/* Pole metier id 1 */

/* Fond h2 */
details#art-1-1 {
    background: radial-gradient(circle, rgba(127,171,227,0.4430147058823529) 50%, rgba(22,82,159,0.76234243697479) 68%);
    color: black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.body.pole-body-1.dark-theme details#art-1-1 {
    background: radial-gradient(circle, rgba(22,82,159,0.76234243697479) 50%, rgba(127,171,227,0.4430147058823529) 68%);
    color: white;
}

/* Bouton des carte "Lire la suite" */
.pole-button-1 {
    background-color: #2d405aec; 
    height: 48px;
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px -20px 20px 0px inset, rgba(0, 0, 0, 0.08) 0px -30px 25px 0px inset, rgba(0, 0, 0, 0.05) 0px -60px 30px 0px inset, rgba(0, 0, 0, 0.03) 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 1px, rgba(0, 0, 0, 0.05) 0px 6px 3px, rgba(0, 0, 0, 0.05) 0px 12px 6px, rgba(0, 0, 0, 0.05) 0px 24px 12px;
}
.pole-button-1:hover {
    background-color: #70a1e1; /* Couleur de fond au survol */
}
/* Bouttons mode sombre */
.body.pole-body-1.dark-theme .pole-button-1 {
    background-color: #70a1e1
}
.body.pole-body-1.dark-theme .pole-button-1:hover {
    background-color: #2d405aec;
}

/* Boutons carousel flèches */
.carouselbtn-1 {
    background-color: #87CEEB;
    color: white;
}
.carouselbtn-1:hover {
    background-color: #4682B4; /* Bleu foncé au survol */
}

/* Boutons pour changer de pôle previous-next */
.btnslide-1 {
    background-color: none;
    color: black;
    border: none;
}
.btnslide-1:hover {
    background-color: #87CEEB;
    border: none;
    color: white;
}
.btnslide-1 i {
    font-size: 32px; /* Taille de l'icône en pixels, ajustez selon vos besoins */
}

/* Fond d'ecran */
.pole-body-1 {
    background-image: url('../img/pole/metier/fond6.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative; /* Nécessaire pour la superposition */
    opacity: 1;
}
/* Overlay semi-transparent */
.pole-body-1::before {
    content: ""; /* Nécessaire pour créer le pseudo-élément */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(173, 216, 230, 0.4); /* Bleu clair avec une opacité modérée */
    z-index: -1; /* Placer l'overlay derrière le contenu */
}
/* Fusion sans le before
    .pole-body-1 {
    background-image: linear-gradient(rgba(173, 216, 230, 0.4), rgba(173, 216, 230, 0.4)), 
                      url('../img/pole/metier/fond3.jpg');
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    position: relative; 
} */

/* Mode sombre - Assombrir uniquement l'image de fond */
.body.pole-body-1.dark-theme {
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)), */
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 
                      url('../img/pole/metier/fond6.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1; /* L'opacité globale reste inchangée */
}

.body.pole-body-1.dark-theme .cadretitre {
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px 8px rgba(0, 191, 255, 0.8);
}

/* .body.pole-body-1.dark-theme .card-text {
    color: white;
} */
.body.pole-body-1.dark-theme .personnalrectangle {
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px 8px rgba(0, 191, 255, 0.8);
}


/* ---------------------------------------------------------------------------------------------------------------------- */


/* Pole communication id 2 */

/* Fond h2 */
details#art-1-2 {
    background: radial-gradient(circle, rgba(255,196,137,0.4066001400560224) 50%, rgba(219,109,0,0.6110819327731092) 68%);
    color: black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.body.pole-body-2.dark-theme details#art-1-2 {
    background: radial-gradient(circle, rgba(219,109,0,0.6110819327731092) 50%, rgba(255,196,137,0.4066001400560224) 68%);
    color: white;
}


/* Bouton des carte "Lire la suite" */
.pole-button-2 {
    background-color: #a27d59ec;
    height: 48px;
    font-size: 20px; 
    box-shadow: rgba(0, 0, 0, 0.1) 0px -20px 20px 0px inset, rgba(0, 0, 0, 0.08) 0px -30px 25px 0px inset, rgba(0, 0, 0, 0.05) 0px -60px 30px 0px inset, rgba(0, 0, 0, 0.03) 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 1px, rgba(0, 0, 0, 0.05) 0px 6px 3px, rgba(0, 0, 0, 0.05) 0px 12px 6px, rgba(0, 0, 0, 0.05) 0px 24px 12px;
}
.pole-button-2:hover {
    background-color: #f7bf87; /* Couleur de fond au survol */
}
/* Bouttons mode sombre */
.body.pole-body-2.dark-theme .pole-button-2 {
    background-color: #f7bf87
}
.body.pole-body-2.dark-theme .pole-button-2:hover {
    background-color: #a27d59ec;
}
/* Boutons carousel flèches */
.carouselbtn-2 {
    background-color: #87CEEB; 
}
.carouselbtn-2:hover {
    background-color: #f7bf87; 
}

/* Boutons pour changer de pôle previous-next */
.btnslide-2 {
    background-color: none;
    color: black;
    border: none;
}
.btnslide-2:hover {
    background-color: #f7bf87;
    border: none;
    color: white;
}
.btnslide-2 i {
    font-size: 32px; /* Taille de l'icône en pixels, ajustez selon vos besoins */
}

/* Fond d'ecran */
.pole-body-2 {
    background-image: url('../img/pole/communication/fond2.jpg');
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    position: relative; /* Nécessaire pour la superposition */
}
/* Overlay semi-transparent */
.pole-body-2::before {
    content: ""; /* Nécessaire pour créer le pseudo-élément */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(201, 184, 156, 0.4); /* Orange avec une opacité modérée */
    z-index: -1; /* Placer l'overlay derrière le contenu */
}

/* Mode sombre - Assombrir uniquement l'image de fond */
.body.pole-body-2.dark-theme {
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 
                      url('../img/pole/communication/fond2.jpg');
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    opacity: 1; /* L'opacité globale reste inchangée */
}
.body.pole-body-2.dark-theme .cadretitre {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 0 0 10px 3px #f7bf87, 0 0 20px 5px rgba(247, 191, 135, 0.7), 0 0 30px 7px rgba(247, 191, 135, 0.5)/* Ombre néon multiple */
}

.body.pole-body-2.dark-theme .personnalrectangle {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 0 0 10px 3px #f7bf87, 0 0 20px 5px rgba(247, 191, 135, 0.7), 0 0 30px 7px rgba(247, 191, 135, 0.5)/* Ombre néon multiple */
}

/* ---------------------------------------------------------------------------------------------------------------------- */


/* Pole evolution id 3 */

/* Fond h2 */
details#art-1-3 {
    background: radial-gradient(circle, rgba(255,137,137,0.4066001400560224) 50%, rgba(162,0,0,0.5998774509803921) 68%);
    color: black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.body.pole-body-3.dark-theme details#art-1-3 {
    background: radial-gradient(circle, rgba(162,0,0,0.5998774509803921) 50%, rgba(255,137,137,0.4066001400560224) 68%);
    color: white;
}

/* Bouton des carte "Lire la suite" */
.pole-button-3 {
    background-color: #55181def ;
    height: 48px;
    font-size: 20px; 
    box-shadow: rgba(0, 0, 0, 0.1) 0px -20px 20px 0px inset, rgba(0, 0, 0, 0.08) 0px -30px 25px 0px inset, rgba(0, 0, 0, 0.05) 0px -60px 30px 0px inset, rgba(0, 0, 0, 0.03) 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 1px, rgba(0, 0, 0, 0.05) 0px 6px 3px, rgba(0, 0, 0, 0.05) 0px 12px 6px, rgba(0, 0, 0, 0.05) 0px 24px 12px;
}
.pole-button-3:hover {
    background-color: #ff4956; /* Couleur de fond au survol */
}
/* Boutton mode sombre */
.body.pole-body-3.dark-theme .pole-button-3 {
    background-color: #ff4956; 
}
.body.pole-body-3.dark-theme .pole-button-3:hover {
    background-color: #55181def ;
}
/* Boutons carousel flèches */
.carouselbtn-3 {
    background-color: #87CEEB; 
}
.carouselbtn-3:hover {
    background-color: #ff4956; /* Vert foncé au survol */
}

/* Boutons pour changer de pôle previous-next */
.btnslide-3 {
    background-color: none;
    color: black;
    border: none;
}
.btnslide-3:hover {
    background-color: #ff4956;
    border: none;
    color: white;
}
.btnslide-3 i {
    font-size: 32px; /* Taille de l'icône en pixels, ajustez selon vos besoins */
}


/* Fond d'ecran */
.pole-body-3 {
    background-image: url('../img/pole/savoir/fond1.jpg');
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    position: relative; /* Nécessaire pour la superposition */
}
/* Overlay semi-transparent */
.pole-body-3::before {
    content: ""; /* Nécessaire pour créer le pseudo-élément */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(190, 149, 149, 0.4); /* Rouge avec une opacité modérée */
    z-index: -1; /* Placer l'overlay derrière le contenu */
}

/* Mode sombre - Assombrir uniquement l'image de fond */
.body.pole-body-3.dark-theme {
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 
                      url('../img/pole/savoir/fond1.jpg');
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    opacity: 1; /* L'opacité globale reste inchangée */
}
.body.pole-body-3.dark-theme .cadretitre {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #ff4956,        /* Ombre rouge douce */
        0 0 20px 5px rgba(255, 73, 86, 0.7), /* Ombre rouge brillante */
        0 0 30px 7px rgba(255, 73, 86, 0.5); /* Ombre rouge plus étendue */
}

.body.pole-body-3.dark-theme .personnalrectangle {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #ff4956,        /* Ombre rouge douce */
        0 0 20px 5px rgba(255, 73, 86, 0.7), /* Ombre rouge brillante */
        0 0 30px 7px rgba(255, 73, 86, 0.5); /* Ombre rouge plus étendue */
}
/* ---------------------------------------------------------------------------------------------------------------------- */


/* Pole immobilier id 4 */

/* Fond h2 */
details#art-1-4 {
    background: radial-gradient(circle, rgba(177,255,137,0.3309698879551821) 50%, rgba(49,159,0,0.5410539215686274) 68%);
    color: black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.body.pole-body-4.dark-theme details#art-1-4 {
    background: radial-gradient(circle, rgba(49,159,0,0.5410539215686274) 50%, rgba(177,255,137,0.3309698879551821) 68%);
    color: white;
}

/* Bouton des carte "Lire la suite" */
.pole-button-4 {
    background-color: #1e412bec; 
    height: 48px;
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px -20px 20px 0px inset, rgba(0, 0, 0, 0.08) 0px -30px 25px 0px inset, rgba(0, 0, 0, 0.05) 0px -60px 30px 0px inset, rgba(0, 0, 0, 0.03) 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 1px, rgba(0, 0, 0, 0.05) 0px 6px 3px, rgba(0, 0, 0, 0.05) 0px 12px 6px, rgba(0, 0, 0, 0.05) 0px 24px 12px;
}
.pole-button-4:hover {
    background-color: #63D88E; /* Couleur de fond au survol */
}
/* Boutton mode sombre */
.body.pole-body-4.dark-theme .pole-button-4 {
    background-color: #63D88E; 
}
.body.pole-body-4.dark-theme .pole-button-4:hover {
    background-color: #1e412bec ;
}
/* Boutons carousel flèches */
.carouselbtn-4 {
    background-color: #87CEEB;
}
.carouselbtn-4:hover {
    background-color: #63D88E; /* Jaune foncé au survol */
}

/* Boutons pour changer de pôle previous-next */
.btnslide-4 {
    background-color: none;
    color: black;
    border: none;
}
.btnslide-4:hover {
    background-color: #63D88E;
    border: none;
    color: white;
}
.btnslide-4 i {
    font-size: 32px; /* Taille de l'icône en pixels, ajustez selon vos besoins */
}

/* Fond d'ecran */
.pole-body-4 {
    background-image: url('../img/pole/immobilier/fond3.jpg');
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    position: relative; /* Nécessaire pour la superposition */
}
/* Overlay semi-transparent */
.pole-body-4::before {
    content: ""; /* Nécessaire pour créer le pseudo-élément */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(153, 194, 153, 0.363); /* Vert avec une opacité modérée */
    z-index: -1; /* Placer l'overlay derrière le contenu */
}


/* Mode sombre - Assombrir uniquement l'image de fond */
.body.pole-body-4.dark-theme {
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 
                      url('../img/pole/immobilier/fond3.jpg');
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    opacity: 1; /* L'opacité globale reste inchangée */
}
.body.pole-body-4.dark-theme .cadretitre {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #63D88E,        /* Ombre verte douce */
        0 0 20px 5px rgba(99, 216, 142, 0.7), /* Ombre verte brillante */
        0 0 30px 7px rgba(99, 216, 142, 0.5); /* Ombre verte plus étendue */
}
.body.pole-body-4.dark-theme .personnalrectangle {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #63D88E,        /* Ombre verte douce */
        0 0 20px 5px rgba(99, 216, 142, 0.7), /* Ombre verte brillante */
        0 0 30px 7px rgba(99, 216, 142, 0.5); /* Ombre verte plus étendue */
}

/* ---------------------------------------------------------------------------------------------------------------------- */


/* Pole universal id 5 */

/* Fond h2 */
details#art-1-5 {
    background: radial-gradient(circle, rgba(210,186,241,0.5018382352941176) 50%, rgba(94,53,148,0.7847514005602241) 68%);
    color: black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.body.pole-body-5.dark-theme details#art-1-5 {
    background: radial-gradient(circle, rgba(94,53,148,0.7847514005602241) 50%, rgba(210,186,241,0.5018382352941176) 68%);
    color: white;
}

/* Bouton des carte "Lire la suite" */
.pole-button-5 {
    background-color: #483f54ee;
    height: 48px;
    font-size: 20px; 
    box-shadow: rgba(0, 0, 0, 0.1) 0px -20px 20px 0px inset, rgba(0, 0, 0, 0.08) 0px -30px 25px 0px inset, rgba(0, 0, 0, 0.05) 0px -60px 30px 0px inset, rgba(0, 0, 0, 0.03) 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 1px, rgba(0, 0, 0, 0.05) 0px 6px 3px, rgba(0, 0, 0, 0.05) 0px 12px 6px, rgba(0, 0, 0, 0.05) 0px 24px 12px;
}
.pole-button-5:hover {
    background-color: #B49ED1; /* Couleur de fond au survol */
}
/* Boutton mode sombre */
.body.pole-body-5.dark-theme .pole-button-5 {
    background-color: #B49ED1; 
}
.body.pole-body-5.dark-theme .pole-button-5:hover {
    background-color: #483f54ee;
}
/* Boutons carousel flèches */
.carouselbtn-5 {
    background-color: #87CEEB;
}

.carouselbtn-5:hover {
    background-color: #B49ED1; 
}

/* Boutons pour changer de pôle previous-next */
.btnslide-5 {
    background-color: none;
    color: black;
    border: none;
}
.btnslide-5:hover {
    background-color: #B49ED1;
    border: none;
    color: white;
}
.btnslide-5 i {
    font-size: 32px; /* Taille de l'icône en pixels, ajustez selon vos besoins */
}

/* Fond d'ecran */
.pole-body-5 {
    background-image: url('../img/pole/design/fond1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative; /* Nécessaire pour la superposition */
}
/* Overlay semi-transparent */
.pole-body-5::before {
    content: ""; /* Nécessaire pour créer le pseudo-élément */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(179, 142, 179, 0.315); /* Violet avec une opacité modérée */
    z-index: -1; /* Placer l'overlay derrière le contenu */
}

/* Mode sombre - Assombrir uniquement l'image de fond */
.body.pole-body-5.dark-theme {
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 
                      url('../img/pole/design/fond1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1; /* L'opacité globale reste inchangée */
}
.body.pole-body-5.dark-theme .cadretitre {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #B49ED1,         /* Ombre violette douce */
        0 0 20px 5px rgba(180, 158, 209, 0.7), /* Ombre violette brillante */
        0 0 30px 7px rgba(180, 158, 209, 0.5); /* Ombre violette plus étendue */
}
.body.pole-body-5.dark-theme .personnalrectangle {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #B49ED1,         /* Ombre violette douce */
        0 0 20px 5px rgba(180, 158, 209, 0.7), /* Ombre violette brillante */
        0 0 30px 7px rgba(180, 158, 209, 0.5); /* Ombre violette plus étendue */
}
/* ---------------------------------------------------------------------------------------------------------------------- */


/* Pole innovation id 6 */

/* Fond h2 */
details#art-1-6 {
    background: radial-gradient(circle, rgba(240,255,137,0.29735644257703087) 50%, rgba(228,168,18,0.6699054621848739) 68%);
    color: black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.body.pole-body-6.dark-theme details#art-1-6 {
    background: radial-gradient(circle, rgba(228,168,18,0.6699054621848739) 50%, rgba(240,255,137,0.29735644257703087) 68%);
    color: white;
}

/* Bouton des carte "Lire la suite" */
.pole-button-6 {
    background-color: #625229e8; 
    height: 48px;
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px -20px 20px 0px inset, rgba(0, 0, 0, 0.08) 0px -30px 25px 0px inset, rgba(0, 0, 0, 0.05) 0px -60px 30px 0px inset, rgba(0, 0, 0, 0.03) 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 1px, rgba(0, 0, 0, 0.05) 0px 6px 3px, rgba(0, 0, 0, 0.05) 0px 12px 6px, rgba(0, 0, 0, 0.05) 0px 24px 12px;
}
.pole-button-6:hover {
    background-color: #F6CD66; /* Couleur de fond au survol */
}
/* Boutton mode sombre */
.body.pole-body-6.dark-theme .pole-button-6 {
    background-color: #F6CD66; 
}
.body.pole-body-6.dark-theme .pole-button-6:hover {
    background-color: #625229e8;
}
/* Boutons carousel flèches */
.carouselbtn-6 {
    background-color: #87CEEB;
}

.carouselbtn-6:hover {
    background-color: #F6CD66;
}

/* Boutons pour changer de pôle previous-next */
.btnslide-6 {
    background-color: none;
    color: black;
    border: none;
}
.btnslide-6:hover {
    background-color: #F6CD66;
    border: none;
    color: white;
}
.btnslide-6 i {
    font-size: 32px; /* Taille de l'icône en pixels, ajustez selon vos besoins */
}

/* Fond d'ecran */
.pole-body-6 {
    background-image: url('../img/pole/innovation/fond3.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative; /* Nécessaire pour la superposition */
}
/* Overlay semi-transparent */
.pole-body-6::before {
    content: ""; /* Nécessaire pour créer le pseudo-élément */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(184, 184, 140, 0.4); /* Jaune avec une opacité modérée */
    z-index: -1; /* Placer l'overlay derrière le contenu */
}

/* Mode sombre - Assombrir uniquement l'image de fond */
.body.pole-body-6.dark-theme {
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 
                      url('../img/pole/innovation/fond3.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1; /* L'opacité globale reste inchangée */
}
.body.pole-body-6.dark-theme .cadretitre {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #F6CD66,         /* Ombre jaune doré douce */
        0 0 20px 5px rgba(246, 205, 102, 0.8), /* Ombre jaune brillante */
        0 0 30px 7px rgba(246, 205, 102, 0.6), /* Ombre jaune plus étendue */
        0 0 40px 10px rgba(246, 205, 102, 1);  /* Ombre jaune très intense */
}
.body.pole-body-6.dark-theme .personnalrectangle {
    border: 2px solid #ffffff; /* Bordure néon avec la couleur #f7bf87 */
    box-shadow: 
        0 0 10px 3px #F6CD66,         /* Ombre jaune doré douce */
        0 0 20px 5px rgba(246, 205, 102, 0.8), /* Ombre jaune brillante */
        0 0 30px 7px rgba(246, 205, 102, 0.6), /* Ombre jaune plus étendue */
        0 0 40px 10px rgba(246, 205, 102, 1);  /* Ombre jaune très intense */
}
/* -------------------------------------------------------------------------------------------------------------------- */

/* Texte en mode sombre pour tous les pôles */
.body.dark-theme .noarticle {
    color: #ffffff !important; /* Texte en blanc dans tous les pôles en mode sombre */
}
/* Pour appliquer le style au texte en mode sombre */
.body.body.dark-theme .titrepole {
    color: whitesmoke !important;  /* Ajout de !important pour surcharger les autres règles */
}

/* ----------------------------------------------------------- Styles généraux de la carte --------------------------------------------------------------- */
.corpscard {
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
    background: #fdf8ff;
}

/* Carte mode sombre */
.body.body.dark-theme .corpscard {
    background: #2e2e2e;  /* Fond sombre en mode dark */
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
.body.body.dark-theme .card-text {
    color: white;
}
.body.body.dark-theme .titlesizecard {
color: var(--first-color);
border-radius: 8px;
/* background-color: #1d1b1b; */
background-color: #1d1b1b52;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}
/* Style pour le titre de la carte */
.titlesizecard {
    font-size: 23px; /* Taille du titre */
    font-weight: bold; /* Gras pour le titre */
    line-height: 1.4; /* Hauteur de ligne pour le titre */
    margin-bottom: 4px; /* Espacement sous le titre */
    margin-top: 0px;
    overflow: hidden; /* Assurez-vous que le texte ne dépasse pas */
    flex-shrink: 0; /* Empêche le titre de se réduire */
    height: 125px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    /* text-align: center;  */
    border-radius: 8px;
    background-color: #c9d6da42;
}

/* Style pour le texte à l'intérieur de la carte */
.sizefontcard {
    font-size: 18px; /* Taille de la police du texte */
    color: #000000; /* Couleur du texte */
    line-height: 1.6; /* Espacement entre les lignes du texte */
    height: 140px; /* Hauteur fixe pour le texte */
    overflow: hidden; /* Masque le texte qui dépasse */
    flex-grow: 1; /* Permet au texte de remplir l'espace restant */
}

/* Style pour taille card */
.polecardstyle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 15px;
    width: 100%;
    min-height: 610px; /* Hauteur minimale pour la carte */
    max-height: auto; /* Permet de s'ajuster si nécessaire */
    overflow: hidden; /* Empêche l'image de sortir du cadre */
    position: relative; /* Permet une gestion plus facile du contenu dans le conteneur */

    /* box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px !important; */
}
.body.dark-theme .polecardstyle {
    border: none;
}
/* Img card */
.article__modal-img {
    width: 100%;
    height: 260px !important; /* Ajuster la hauteur de l'image selon tes besoins */
    object-fit: cover; /* Assure que l'image couvre l'ensemble du conteneur sans déformation */
    border-radius: 5px 5px 5px 5px; /* Bord arrondi en haut de l'image */
    transition: transform 0.3s ease-in-out; /* Transition fluide pour la transformation */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
/* Effet de zoom au survol */
.article__modal-img:hover {
    transform: scale(1.1); /* L'image grandit de 10% */
}


.carousel-control-prev,
.carousel-control-next {
    top: 50%; /* Centre verticalement les flèches */
    transform: translateY(-50%);
    width: auto; /* Ajuste la largeur si nécessaire */
    height: auto; /* Assure une taille adaptée */
    z-index: 2; /* S'assure que les flèches sont au-dessus de tout autre élément */
    display: none; /* S'assure que les flèches n'apparaissent pas au chargement de la page puis disparaissent lorsque carousel pas besoin de slide */
}

.carousel-control-prev {
    left: -50px; /* Positionne la flèche précédente à gauche, en dehors du carrousel */
}

.carousel-control-next {
    right: -50px; /* Positionne la flèche suivante à droite, en dehors du carrousel */
}



/* Bouton normal (inactif) */
.carousel-indicators button {
    width: 50px !important; /* Largeur de l'indicateur */
    height: 6px !important; /* Hauteur de l'indicateur */
    background-color: #322e2e; /* Couleur de fond des indicateurs inactifs */
    border: none; /* Enlever la bordure */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour un effet fluide */
    margin: 0 12px !important; /* Espacement entre les indicateurs */
}

/* Centrer les indicateurs sous le carousel */
.carousel-indicators {
    position: relative;
}


/* Indicateur au survol (inactif) */
.carousel-indicators button:hover {
    background-color: #c00000; /* Couleur au survol */
    transform: scale(1.1); /* Agrandir légèrement au survol */
}

/* Indicateur actif (normal) */
.carousel-indicators .active {
    background-color: #000000f4; /* Couleur de fond de l'indicateur actif */
    transform: scale(1.2); /* Agrandir l'indicateur actif */
}

/* Indicateur actif au survol */
.carousel-indicators .active:hover {
    background-color: #590000; /* Pas de changement de couleur sur hover pour l'indicateur actif */
    transform: scale(1.3); /* Agrandir encore plus l'indicateur actif au survol */
}



@media (max-width: 992px) {
    .carousel-item .col-md-4 {
        flex: 0 0 50%; /* Chaque article occupe 50% de la largeur */
        max-width: 50%;
    }
}
/* Assurez-vous que les cartes prennent toute la largeur quand il n'y a qu'une seule carte par slide */
@media (max-width: 768px) {
    .carousel-inner .carousel-item .col-md-4 {
        /* Utiliser col-12 pour chaque carte en mode mobile, elle prendra toute la largeur */
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*-------------------- Rectangle bas de page ------------------------- */

/* .personnalrectangle { */
    /* box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
    /* box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; */
/* } */
.body.dark-theme .personnalrectangle {
    background-color: #2e2e2e;
}
.lastimg{
    /* box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; */
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}


/* Conteneur flex pour chaque summary pour aligner la flèche et le texte sur la même ligne */
.details-custom summary {
    display: flex;
    align-items: center; /* Aligne verticalement la flèche et le texte */
    padding-left: 10px; /* Ajoute un peu de padding gauche pour ne pas toucher le bord */
    gap: 10px; /* Espacement entre la flèche et le texte */
    cursor: pointer;
}

/* Positionner la flèche à gauche du texte */
.toggle-arrows {
    font-size: 18px; /* Taille de la flèche */
    color: black; /* Couleur de la flèche */
}
.body.dark-theme .toggle-arrows {
    color: white;
}
.endbloch5 {
    color: black;
}
.body.dark-theme .endbloch5 {
    color: white;
}
/* Quand l'élément details est ouvert, faire pivoter la flèche vers la droite */
details[open] summary .toggle-arrows {
    transform: rotate(90deg); /* Flèche qui pivote à 90 degrés */
}
.endrectangle {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.previouspoole {
    /* Décalage de la flèche vers la gauche */
    left: -70px ; /* Ajuste cette valeur pour déplacer légèrement la flèche vers la gauche */
    top: 50% ; /* Centre la flèche verticalement */
    transform: translateY(-50%) ; /* Assure que la flèche reste bien centrée verticalement */
    
    /* Assurez-vous que la flèche soit au-dessus de tout autre élément */
    z-index: 9999 ; /* Un z-index élevé pour s'assurer qu'elle est devant les autres éléments */
}
.nextpole {
    /* Décalage de la flèche vers la droite */
    right: -70px; /* Déplace légèrement la flèche vers la droite */
    top: 50%; /* Centre la flèche verticalement */
    transform: translateY(-50%); /* Garde la flèche centrée verticalement */
    
    /* Assurez-vous que la flèche soit au-dessus de tout autre élément */
    z-index: 9999; /* Un z-index élevé pour s'assurer qu'elle est devant les autres éléments */
}