:root {
    --divia-pink: #d2007a !important;
    --divia-light-pink: #ffdcf1 !important;
    --divia-dark: #444854 !important;
    --divia-darkpink: #912464 !important;
    --bs-primary: var(--divia-pink) !important;
    --bs-dark: var(--divia-dark) !important;
    --bs-primary-rgb: 210, 0, 122 !important;
    --bs-secondary: var(--divia-darkpink) !important;
    --bs-secondary-rgb: 145, 36, 100 !important;
    --bs-dark-rgb: 68, 72, 83 !important;
    --bs-primary-bg-subtle: var(--divia-light-pink) !important;
    --bs-link-color: var(--divia-pink) !important;
    --bs-link-hover-color: var(--divia-darkpink) !important;
    --bs-link-hover-color-rgb: 145, 36, 100 !important;
    --divia-lightgray: #F6F2F2 !important;
    --divia-darkgray: #685A56 !important;
    --divia-lightgray-rgb: 255, 220, 241 !important;
    --icon-size-sm: 1.75rem !important;
    --icon-size-md: 2rem !important;
    --icon-size-lg: 2.5rem !important;
    /* .shadow et .shadow-sm -->> Ombres personnalisées */
    --bs-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1) !important;
    --bs-box-shadow-sm: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

/* FONTES */
body {
    background-color: var(--divia-lightgray);
    font-family: 'Roboto', sans-serif !important;
    font-style: normal;
    font-size: 1rem !important;
}

header {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    font-style: normal;
    font-size: 1rem !important;
}

/* Style général du Footer */
footer {
    margin-top: 6rem !important;
    font-family: 'Raleway', sans-serif !important;
    font-style: normal;
    font-size: 1rem !important;
}

/* Pied du Footer */
#footer-band {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 300 !important;
    font-style: normal;
}

/* footer logos : texte + logo sur la même ligne */
#footer-band .footer-logo-metropole {
    height: 25px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;

}

#footer-band .footer-logo-kdm {
    height: 18px !important;
    margin-top: 3px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    border: none !important;
    /* sécurité, parfois certains navigateurs mettent une bordure */
}

#footer-band .footer-logo-metropole:hover,
#footer-band .footer-logo-kdm:hover {
    text-decoration: none !important;
    border: none !important;
    /* sécurité, parfois certains navigateurs mettent une bordure */
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: 'Raleway', sans-serif !important;
}

.fs-6 {
    font-size: 0.90rem !important;
}

.fs-7 {
    font-size: 0.75rem !important;
}

.fs-8 {
    font-size: 0.5rem !important;
}

.grayscale-100 {
    filter: grayscale(100%)
}


/* Style général du Main */
main {
    margin-top: 100px !important;
}

/* COMPORTEMENT RESPONSIVE */
@media (max-width: 991.98px) {

    main {
        margin-top: 67px !important;
    }

    /* lg - 1px */
    .custom-container {
        max-width: 100%;
    }

    footer {
        font-size: 0.857rem !important;
        margin-top: 0rem !important;
    }

    .fs-6-resp {
        font-size: 0.90rem !important;
    }

    .fs-7-resp {
        font-size: 0.75rem !important;
    }

    .fs-8-resp {
        font-size: 0.5rem !important;
    }
}

/* COMPORTEMENT DESKTOP */
@media (min-width: 991.98px) {
    .w-lg-25 {
        width: 25% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-auto {
        width: auto !important;
    }
}

.badge {
    font-weight: 500 !important;
    font-size: 0.55rem !important;
}

/* Styles tactiles */
.touch-action-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.15s ease-out;
}

.touch-action-manipulation:active {
    transform: scale(0.95);
}

/****************************************** LIENS *******************************************/
.link-custom {
    color: rgba(248, 249, 250, 1) !important;
    /* .link-light */
    text-decoration: underline !important;
    text-underline-offset: 0.25rem !important;
    /* offset-2 */
    text-decoration-color: rgba(248, 249, 250, 0) !important;
    /* underline-opacity-0 */
}

.link-custom-no-decoration {
    display: inline-block !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    border: none !important;
}

.link-custom:hover {
    text-underline-offset: 0.25rem !important;
    /* offset-3-hover */
    text-decoration-color: rgba(248, 249, 250, 0.75) !important;
    /* underline-opacity-75-hover */
}

.link-custom-white {
    color: var(--divia-pink);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    text-decoration-color: rgba(0, 0, 0, 0);
}

.link-custom-white:hover {
    color: rgba(248, 249, 250, 1);
    text-underline-offset: 0.25rem;
    text-decoration-color: rgba(248, 249, 250, 1);
}

/********************************** PRIMARY DE BOOTSTRAP ***********************************/
.text-primary {
    color: var(--divia-pink) !important;
}

.bg-primary {
    background-color: var(--divia-pink) !important;
}

/* État normal */
.btn-primary {
    color: white !important;
    background-color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
}

/* État survol (hover) */
.btn-primary:hover {
    background-color: white !important;
    color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
}

/* État focus */
.btn-primary:focus,
.btn-primary.focus {
    color: white !important;
    background-color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
    box-shadow: 0 0 0 0.10rem var(--divia-pink) !important;
}

/* État actif (pressed) */
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
    color: white !important;
    background-color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
}

/* État actif + focus */
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    color: white !important;
    background-color: var(--divia-pink) !important;
    box-shadow: 0 0 0 0.10rem var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
}

/* État désactivé */
.btn-primary.disabled,
.btn-primary:disabled {
    color: white !important;
    background-color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
}

/* OUTLINE */
/* État normal */
.btn-outline-primary {
    color: var(--divia-pink) !important;
    background-color: white !important;
    border-color: var(--divia-pink) !important;
}

/* État survol (hover) */
.btn-outline-primary:hover {
    color: white !important;
    background-color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
}

/* État focus */
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    background-color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
    color: white !important;
    box-shadow: 0 0 0 0.1rem var(--divia-pink) !important;
}

/* État actif (pressed) */
.btn-outline-primary:active,
.btn-outline-primary.active,
.show>.btn-outline-primary.dropdown-toggle {
    background-color: white !important;
    color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
}

/* État actif + focus */
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    background-color: white;
    color: var(--divia-pink) !important;
    box-shadow: 0 0 0 0.10rem var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
}

/* État désactivé */
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    background-color: white;
    color: var(--divia-pink) !important;
    border-color: var(--divia-pink) !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
}

/* Primary subtle avec Bouton toggle (ressemble a btn-outline-primary) */
.btn-primary-subtle {
    color: var(--divia-pink) !important;
    background-color: white !important;
    border-color: var(--divia-light-pink) !important;
}

.btn-primary-subtle:hover,
.btn-check:checked+.btn-primary-subtle:hover {
    color: white !important;
    background-color: var(--divia-pink) !important;
    border-color: var(--divia-light-pink) !important;
}

.btn-check:checked+.btn-primary-subtle {
    color: var(--divia-pink) !important;
    background-color: var(--divia-light-pink) !important;
    border-color: var(--divia-light-pink) !important;
}

/* Primary hover ne change pas le bouton sauf si on passe la souris dessus */
.btn-primary-hover {
    --bs-btn-hover-color: white !important;
    --bs-btn-hover-bg: var(--divia-pink) !important;
    --bs-btn-focus-box-shadow: 0 0.5rem 1rem var(--divia-pink) !important;
}

/********************************** STYLE DES MENUS en DESKTOP ****************************************/
/* Style général du dropdown menu */
#desktopNavbar .dropdown-menu {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--divia-dark) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    background-color: #FFF !important;
    border: var(--divia-darkgray) !important;
    border-radius: 5px !important;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.5) !important;
    min-width: 300px !important;
    text-align: left !important;
}

/* Animation pour les menus principaux (dropdown) */
#desktopNavbar .dropdown>.dropdown-menu {
    display: block;
    /* Toujours afficher mais avec opacity 0 */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    /* Ignorer les interactions quand invisible */
    pointer-events: none;
    /* Empêcher tout changement de position pendant la transition */
    position: absolute;
}

/* Animation au survol pour les menus principaux */
#desktopNavbar .dropdown:hover>.dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    /* Réactiver les interactions */
    pointer-events: auto;
}

/* Animation pour les sous-menus (dropend) */
#desktopNavbar .dropend>.dropdown-menu {
    display: block;
    /* Toujours afficher mais avec opacity 0 */
    opacity: 0;
    transform: translateX(-10px);
    /* Animation horizontale pour les sous-menus */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    /* Ignorer les interactions quand invisible */
    pointer-events: none;
    /* Fixer la position pendant toute la transition */
    position: absolute;
    top: -1rem;
    left: 90%;
    /* Assurer que le menu soit invisible quand non-survolé */
    visibility: hidden;
}

/* Animation au survol pour les sous-menus */
#desktopNavbar .dropend:hover>.dropdown-menu {
    opacity: 1;
    transform: translateX(0);
    /* Réactiver les interactions */
    pointer-events: auto;
    visibility: visible;
}

/* Gestion de la transition de sortie */
#desktopNavbar .dropend>.dropdown-menu.fade-out {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}

/* Style pour les liens de sous menu */
#desktopNavbar .dropdown>.nav-link.dropdown-toggle {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.975rem !important;
    color: var(--divia-dark);
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    /* Transition sur le changement de couleur */
    transition: color 0.3s ease-out;
}

/* Styles spécifiques pour les dropends */
#desktopNavbar .dropend .dropdown-toggle {
    font-weight: 600 !important;
    margin-left: 0 !important;
    padding-left: 1rem !important;
}

#desktopNavbar .dropend>.nav-link.dropdown-toggle {
    font-weight: 600 !important;
    color: var(--divia-dark);
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    /* Transitions multiples */
    transition: all 0.15s ease-out;
}

#desktopNavbar .dropend>.nav-link.dropdown-toggle:hover {
    color: #FFF !important;
    border-radius: 5px;
    background-color: var(--divia-pink) !important;
}

/* Effacement des icônes par défaut */
#desktopNavbar .dropdown>.nav-link.dropdown-toggle::after,
#desktopNavbar .dropend>.nav-link.dropdown-toggle::after {
    display: none !important;
}

/* Nouvelle icone pour le dropend */
#desktopNavbar .custom-dropdend-icon {
    position: absolute;
    top: 0.5rem;
    right: 15px;
    font-size: 1rem;
    color: var(--divia-pink) !important;
    transform: translateX(-10px);
    /* Transition pour l'icône dropend */
    transition: transform 0.2s ease-out, color 0.2s ease-out;
}

/* Translation de l'icône dropend au survol */
#desktopNavbar .dropend:hover .custom-dropdend-icon {
    transform: translateX(-15px);
    color: white !important;
}

/* Style pour l'icône dropdown */
#desktopNavbar .dropdown>.nav-link.dropdown-toggle .dropdown-icon {
    color: var(--divia-pink) !important;
    margin-left: 0rem !important;
    font-size: 0.8rem !important;
    transition: transform 0.2s ease-out !important;
}

/* Animation au survol pour transformer le chevron droit en chevron bas */
#desktopNavbar .dropdown:hover>.nav-link.dropdown-toggle .dropdown-icon {
    transform: rotate(90deg);
    display: inline-block;
}

/* États de survol et de focus */
#desktopNavbar .dropdown:hover>.nav-link {
    color: var(--divia-pink) !important;
}

#desktopNavbar .dropdown .nav-link:focus,
#desktopNavbar .dropdown .nav-link.show {
    color: var(--divia-dark) !important;
}

/* Styles des éléments de dropdown */
#desktopNavbar .dropdown-menu .dropdown-item {
    color: var(--divia-dark) !important;
    font-weight: 600 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Styles des éléments de dropdown en Hover */
#desktopNavbar .dropdown-menu .dropdown-item:hover {
    border-radius: 3px;
    color: #FFF !important;
    background-color: var(--divia-pink);
}

/********************************** STYLE DES MENUS en RESPONSIVE ****************************************/

.offcanvas-body {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    padding-bottom: 2rem;
}

/* Améliore les transitions pour éviter les saccades */
.accordion-collapse {
    transition: height 0.3s ease;
}

/* Cible uniquement l'accordéon dans .offcanvas-body */
.offcanvas-body .accordion-item {
    border: none !important;
    background: transparent !important;
}

.offcanvas-body .accordion-body {
    padding: 0 !important;
}

/* Bouton principal */
.offcanvas-body .accordion-button {
    background-color: #fff;
    color: var(--divia-darkgray);
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase !important;
}

/* Supprimer l'effet actif par défaut */
.offcanvas-body .accordion-button:focus,
.offcanvas-body .accordion-button:not(.collapsed) {
    box-shadow: none !important;
    background-color: #fff !important;
}

/* Ligne sous le bouton */
.offcanvas-body .accordion-header {
    border-bottom: 1px solid #DDD8D8 !important;
    padding-bottom: 5px !important;
    margin-bottom: 0.5rem !important;
}

/* Styles des éléments de dropdown */
.offcanvas-body .dropdown-item {
    font-weight: 600 !important;
    color: var(--divia-darkgray) !important;
    padding-left: 1.1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.15s ease-out;
}

/* Changer la couleur au clic */
.offcanvas-body .dropdown-item:active,
.offcanvas-body .dropdown-item:focus {
    transform: scale(0.95);
    color: var(--divia-pink) !important;
}

/* Icones */
.offcanvas-body .menuAccordion-icon {
    color: var(--divia-pink) !important;
    font-size: 1.1rem;
}

.offcanvas-body .link-icon {
    color: var(--divia-darkgray) !important;
    margin-left: 0.1rem !important;
    font-size: 0.8rem !important;
}

/* Cacher le chevron Bootstrap */
.offcanvas-body .accordion-button::after {
    display: none !important;
}

/* Conteneur de l’icône pour l'alignement */
.offcanvas-body .chevron-container {
    margin-left: auto;
    /* Pousse l'icône à l'extrême droite */
    display: flex;
    align-items: center;
}

/* Style du chevron */
.offcanvas-body .chevron-icon {
    transition: transform 0.3s ease-out;
    color: var(--divia-pink) !important;
}

/* Rotation et couleur lorsqu’ouvert */
.offcanvas-body .accordion-button:not(.collapsed) .chevron-icon {
    transform: rotate(90deg);
}

/**************** Styles spécifiques aux accordéons imbriqués **************/
/* décalage à gauche */
.offcanvas-body .submenuAccordion {
    margin-left: 1.1rem !important;
}

/* Style du sous-menu */
.offcanvas-body .accordion .accordion-item .accordion-button {
    padding: 0.5rem 1rem !important;
    font-size: 1rem;
    font-weight: 600 !important;
    color: var(--divia-darkgray) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Pas ligne sous le bouton de sous menu */
.offcanvas-body .submenuAccordion .accordion-header {
    margin-left: -1rem !important;
    border-bottom: none !important;
    padding-bottom: 0px !important;
    margin-bottom: 0rem !important;
}

/* désactivation du hover pour tactile */
@media (hover: none) {
    .offcanvas-body .dropdown-item:hover {
        background-color: transparent !important;
    }
}


/********************** STYLE GÉNÉRAL DES ACCORDÉONS ********************************/

/* Modification de l'en-tête de l'accordéon */
.accordion-button.bg-custom-pink {
    color: #fff;
    background-color: var(--divia-pink);
    border-color: var(--divia-pink);
    outline: none !important;
}

.accordion-button.bg-custom-pink.collapsed,
.accordion-button.bg-custom-pink:not(.collapsed) {
    color: var(--divia-pink);
    background-color: var(--divia-lightgray);
    border-color: var(--divia-lightgray);
    outline: none !important;
}

.accordion-button.bg-custom-pink:hover {
    color: #fff;
    background-color: var(--divia-pink);
    border-color: var(--divia-pink);
    outline: none !important;
}

.accordion-button.bg-custom-pink::after,
.accordion-button.bg-custom-pink:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D2007A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Couleur du chevron sur hover */
.accordion-button.bg-custom-pink:hover::after,
.accordion-button.bg-custom-pink:not(.collapsed):hover::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button.bg-custom-pink:not(.collapsed)::after {
    transform: rotate(-180deg);
}

/* Surcharge pour l'ombre de l'élément sélectionné */
.accordion-button:focus {
    border-color: var(--custom-pink) !important;
    box-shadow: 0px 4px 12px rgba(210, 0, 122, 0.3) !important;
}