/********************************************************/
/*          1 - Déclaration des variables               */ 
/********************************************************/ 
:root 
{
    --var-color-white: rgb(255, 255, 255) ;
    --var-color-gray: rgb(38, 50, 56) ;
    --var-color-black: rgb(18, 18, 18) ;
    --var-color-orange-ecl: rgb(255, 165, 0) ;
    --var-color-orange: rgb(255, 127, 0) ;
    --var-color-salmon: rgb(250, 128, 114) ;
    --var-color-blue: rgb(0, 51, 153) ;
    --var-color-blue-stat: rgb(30, 41, 59) ;
    --var-color-green: rgb(46, 204, 113) ;
    --var-color-gold: rgb(207, 181, 59) ;
    --var-color-yellow: rgb(255, 255, 0) ;
    --var-color-red: rgb(255, 0, 0) ;
    --var-color-icone: rgb(25, 25, 112) ;
    --var-color-turquois: rgb(114, 250, 238) ; 

    --var-font-family: 'Inter', sans-serif;
    --var-font-mantra: 'Great Vibes', cursive; 

    --var-font-header: 'Cormorant Garamond', serif;
    --var-font-cursive: 'Pinyon Script', cursive;
    --var-font-body: 'Montserrat', sans-serif;
    --var-spacing-luxe: 2px;

    --var-border-radius : 5px ; 
    --var-border : 1px ;
    --var-border-radius-scroll: 4px ;

    --var-font-size-smartphone: 0.9rem ; 
    --var-font-size-tablette: 1.0rem ; 
    --var-font-size-pc: 1.1rem ;

}


/********************************************************/
/*            2 - Structure Standard                    */ 
/********************************************************/  


html
{
    scroll-behavior: smooth;
}


body
{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    width: 100%;
    font-family: var(--var-font-family);
    overflow: hidden;
    background-color: var(--var-color-white);
    /* Rendu police luxe */
    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}



*, ::before, ::after 
{
    box-sizing: border-box; 
}



/********************************************************/
/*            Animation                                 */ 
/********************************************************/

@keyframes slide_up
{
    from
    {
        opacity: 0;
        transform: translateY(20px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide_down
{
    from
    {
        opacity: 1;
        transform: translateY(0);
    }
    to
    {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes rotate_needle
{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/********************************************************/
/*****              Classes Communes               ******/
/********************************************************/

.attente_chargement
{
    display: none !important;
}

.visible
{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


/*
.non_visible
{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    display: none !important;
}

*/

.non_visible
{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    border: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


.animation_logo_mantra {

    animation: slide_up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.btn_active_jj
{
    background-color: var(--var-color-black) !important;
    color: var(--var-color-salmon) !important;
}

/* Optionnel : changement de couleur de l'icône si présente */
.btn_active_jj i
{
    color: var(--var-color-salmon) !important;
}

.btn_active_jj span
{
    color: var(--var-color-salmon) !important;
}


.visually-hidden
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/********************************************************/
/*            Pour SmartPhone                           */ 
/********************************************************/ 

@media (max-width: 767px) 
{


    #id_main
    {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        width: 100%;

        padding: 5px;
        gap: 5px;
        overflow: hidden;

        position: relative;


    }



    #id_section_haut,
    #id_section_nav,
    #id_section_bas
    {
        width: 100% !important;
        flex-shrink: 0;
        margin: 0 auto;
        background-color: var(--var-color-white);
        border-radius: var(--var-border-radius);

        transform-style: preserve-3d;
        will-change: transform, opacity, filter;

    }

    #id_section_haut
    {
        border: var(--var-border) solid var(--var-color-black);
        padding: 10px 20px;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start; /* Le bouton reste à gauche */
        min-height: 60px;
    }

    #id_section_haut.visible
    {
        display: flex !important;
    }

    #id_menu_bouton
    {

        background: var(--var-color-white) ;
        border: var(--var-border) solid var(--var-color-black);
        color: var(--var-color-black);
        font-weight: 600;
        padding: 10px 15px;
        border-radius: var(--var-border-radius) ;
        font-family: var(--var-font-family); /* Inter pour le côté pro */
        letter-spacing: 0.5px;
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease;
    }

    #id_menu_bouton.visible
    {
        display: flex !important; /* Force l'affichage malgré les autres classes */
        align-items: center;
        gap: 10px;
    }

    #id_menu_bouton i
    {
        color: var(--var-color-black) ;
        font-size: 1.1rem ;
    }

    #id_section_nav
    {
        min-width: 0 ;
        max-height: 40vh;
        min-height: 0px ;
        border: var(--var-border) solid var(--var-color-black);
        padding: 0px  ;
        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone */
        flex-shrink: 0;
        transition: all 0.3s ease;

        grid-auto-flow: row;

        gap: 5px;

    }

    #id_section_nav.visible
    {
        display: grid !important;
        visibility: visible;
    }



    #id_section_nav::-webkit-scrollbar
    {
        width: 8px;
        border-radius-right: var(--var-border-radius);
    }

    #id_section_nav::-webkit-scrollbar-track
    {
        background: var(--var-color-black) ;
         border-top-right-radius: var(--var-border-radius-scroll);
        border-bottom-right-radius: var(--var-border-radius-scroll);
    }

    #id_section_nav::-webkit-scrollbar-thumb
    {
        background: var(--var-color-salmon);
        border: var(--var-border) solid var(--var-color-salmon) ;

        border-top-right-radius: var(--var-border-radius-scroll);
        border-bottom-right-radius: var(--var-border-radius-scroll);
        width: 8px;
        min-height: 50px;
    }



    #id_menu_nav
    {
        display: grid;
        /* Crée 3 colonnes de largeur égale */
        grid-template-columns: repeat(3, 1fr);

        padding: 5px;
        width: 100%;
        margin: 0;
        gap : 5px ;

        background-color: var(--var-color-white);
        width: 100%;
    }

    .bouton_menu_nav
    {
        display : flex ;
        flex-direction: column ;
        align-items: center;
        justify-content: center;
        text-align: center;

        width: 100% !important;
        min-height: 75px;
        gap: 8px ;

        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);

        border-radius: var(--var-border-radius) ;

        padding: 10px 5px;
        font-family: var(--var-font-family);
        font-size: 0.75rem;

        letter-spacing: 0.2px;
        cursor: pointer;

        word-break: break-word;
        line-height: 1.1;
        transition: all 0.3s ease;
    }


    .bouton_menu_nav:last-child
    {
        grid-column: 1 / span 3;
        margin-top: 0; /* Le gap du parent suffit déjà */
    }

    .bouton_menu_nav i
    {
        font-size: 1.2rem;
        color: var(--var-color-black);
    }

    .bouton_menu_nav span
    {
        font-family: var(--var-font-family);
        font-size: 0.73rem;
        letter-spacing: 0.2px;
        color: var(--var-color-black);
        text-align: center;

    }

    .bouton_menu_nav.visible
    {
        display: flex !important;
        visibility: visible;
        opacity: 1;
        transform: none !important;
    }



    #id_section_milieu
    {
        display: block;
        flex: 1 ;
        padding: 5px ;
        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto !important ;

        border: var(--var-border) solid var(--var-color-black) !important ;
        border-radius: var(--var-border-radius) ;

        -webkit-overflow-scrolling: touch ;

    }

    #id_section_milieu::-webkit-scrollbar
    {
        width: 8px; /* Un peu plus fin pour le luxe */

        display: block !important;
    }

    #id_section_milieu::-webkit-scrollbar-thumb
    {
        background: var(--var-color-salmon);
        border: var(--var-border) solid var(--var-color-salmon) ;

        border-top-right-radius: var(--var-border-radius-scroll);
        border-bottom-right-radius: var(--var-border-radius-scroll);

        min-height: 50px;
    }


    #id_section_milieu::-webkit-scrollbar-track
    {
        background: var(--var-color-black) ;
        border-top-right-radius: var(--var-border-radius-scroll);
        border-bottom-right-radius: var(--var-border-radius-scroll);
    }



    .section_milieu.visible
    {
        display: block !important;
    }


    /************************************************************************************/
    /* Partie La Creation */
    /************************************************************************************/

    .menu_lacreation
    {
        display: none;
        grid-template-columns: repeat(2, 1fr);

        width: 100%;
        gap: 15px;
        padding: 15px;
        /* Centrage et harmonie */
        margin: 10px auto;

        /* Encadré fin aligné sur les bords du parent */
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);

    }

    .menu_lacreation.visible
    {
        display: grid !important;
        width: 100% !important;   /* Force l'occupation totale de la largeur */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
        margin: 40px 0 !important;
    }


    .btn_lacreation
    {
        display: flex;
        flex-direction: column; /* Icône au-dessus */
        align-items: center;
        justify-content: center;
        gap: 8px;

        background: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

        aspect-ratio: auto;
        padding: 10px 5px;
        min-height: 70px;

        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn_lacreation i
    {
        font-size: 1.2rem;
        color: var(--var-color-black);
        transition: transform 0.3s ease;
    }

    .btn_lacreation span
    {
        font-family: var(--var-font-family);
        font-size: 0.73rem;

        letter-spacing: 0.3px;
        color: var(--var-color-black);
        text-align: center;
    }

    .btn_lacreation.btn_active_jj
    {
        background-color: var(--var-color-black) !important;
    }

    .btn_lacreation.btn_active_jj i,
    .btn_lacreation.btn_active_jj span
    {
        color: var(--var-color-salmon) !important;
    }

    /********************* gestion de vision enjeux strategie solutions  */

    #id_cont_lacreation.visible
    {
        display: grid !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        gap: 8px;
        flex: none !important;         /* Espace avant le cadre jaune */
    }

    #id_cont_detail_lacreation
    {
        display: none;
        width: 100%;
        clear: both;
        margin-top: 20px; /* Espacement harmonieux sous le menu */
        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black); /* L'encadré dont tu parlais */
        border-radius: var(--var-border-radius);
        overflow: hidden; /* Pour que rien ne dépasse des bords arrondis */
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    }

    #id_cont_detail_lacreation.non_visible
    {
        display: none;
    }

    #id_cont_detail_lacreation.visible
    {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        float: none !important; /* Sécurité absolue */
        flex: none !important;  /* Empêche le parent de le réduire */
        margin-top: 40px !important;

    }


    .detail_lacreation_lavision.visible,
    .detail_lacreation_lesenjeux.visible,
    .detail_lacreation_lastrategie.visible,
    .detail_lacreation_lessolutions.visible
    {
        animation: slide_up 0.4s ease-out forwards;
    }

#id_cont_detail_lacreation.non_visible,
.detail_lacreation_lavision.non_visible,
.detail_lacreation_lesenjeux.non_visible,
.detail_lacreation_lastrategie.non_visible,
.detail_lacreation_lessolutions.non_visible {
    display: none !important;
}
    .info_card_lacreation
    {
        padding: 25px;
        font-family: var(--var-font-family);

    }


    .card_header_lacreation
    {

        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: var(--var-border) solid var(--var-color-black);
        padding: 10px 15px;
        font-weight: 400;
        text-align: center; /* Centré pour changer la dynamique */

        border-radius: var(--var-border-radius);
        /* Optionnel : un petit effet d'ombre pour décoller le titre */
        box-shadow: 0 4px 5px rgba(0, 51, 153, 0.1);
        letter-spacing: 0.3px;
        line-height: 1.4;

        margin-bottom: 10px;
    }

    .txt-j-bleu
    {
        color: var(--var-color-blue);
        font-size: 0.9rem;
        font-family: var(--var-font-family);
        font-weight: 600; /* Gras prononcé */
    }

    .txt-et-noir
    {
        color: var(--var-color-black);
        font-family: var(--var-font-family);
        font-size: 0.9rem;
        font-weight: 600;
    }

    .txt-j-orange
    {
        color: var(--var-color-orange);
        font-family: var(--var-font-family);
        font-size: 0.9rem;
        font-weight: 600;
    }

    .txt-consulting
    {
        color: var(--var-color-black);
        font-size: 0.9rem;
        font-family: var(--var-font-family);
        font-weight: 600;
        margin-left: 5px;
    }

    /* Styles pour la Ligne 2 (Gris luxe) */
    .txt-business
    {
        color: var(--var-color-gray);
        font-size: 0.9rem;
        font-family: var(--var-font-family);
        font-weight: 400;
        font-style: italic; /* Optionnel : pour différencier du titre */
    }

    .separateur-orange
    {
        height: 3px;               /* Épaisseur de la bande */
        width: 40px;               /* Largeur réduite pour le style "souligné" */
        background-color: var(--var-color-orange); /* Ta variable orange */
        margin: 12px auto;         /* 12px d'espace haut/bas, auto pour centrer */
        border-radius: 10px;       /* Angles arrondis pour la douceur */
        border: none;
    }

    /* Styles pour la Ligne 3 (Bleu) */
    .txt-vision
    {
        color: var(--var-color-blue);
        font-weight: 600;
        font-family: var(--var-font-family);
        font-size: 0.9rem;
    }


    .puce-carre-lacreation
    {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: var(--var-color-black);
        margin-right: 12px;
        vertical-align: middle;
        border-radius: 2px;
        transform: none;
        position: relative;
        top: -1px;
    }

    .puce-ronde-lacreation
    {
        display: inline-block;
        width: 8px;
        height: 8px;

        background-color: var(--var-color-salmon);

        border-radius: 50%;

        margin-left: 25px;
        margin-right: 12px;


        vertical-align: middle;

        box-shadow: 0 0 0 3px rgba(250, 128, 114, 0.2);

        position: relative;
        top: -1px;
    }

    .puce-ronde-lacreation
    {
        display: inline-block;
        width: 10px;
        height: 10px;

        /* Couleur de fond : Saumon pour le dynamisme */
        background-color: var(--var-color-salmon);

        /* Transformation en cercle parfait */
        border-radius: 50%;

        /* Espacement avec le texte */
        margin-right: 15px;

        /* Alignement vertical précis */
        vertical-align: middle;

        /* Effet de halo subtil pour le côté "Luxe" */
        box-shadow: 0 0 0 3px rgba(250, 128, 114, 0.2);

        /* Optionnel : positionnement par rapport à la ligne */
        position: relative;
        top: -1px;
    }

    .text_isole
    {
        font-family: var(--var-font-family);
        font-size: 0.8rem;
        color: var(--var-color-salmon) !important;
    }


    .card_texte_lacreation
    {
        font-size: 0.8rem;
        line-height: 1.6;
        color: var(--var-color-black);
        text-align: justify;
        hyphens: auto;
        font-family: var(--var-font-family);
        text-justify: inter-character; /* Répartit l'espace entre les lettres aussi */
        hyphens: auto; /* Coupe les mots longs (indispensable en français) */
        word-spacing: 0;
    }

    .card_footer_lacreation
    {
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: var(--var-border) solid var(--var-color-black);
        padding: 10px 15px;
        font-weight: 400;
        text-align: justify;
        hyphens: auto;
        font-family: var(--var-font-family);
        border-radius: var(--var-border-radius);
        /* Optionnel : un petit effet d'ombre pour décoller le titre */
        box-shadow: 0 4px 5px rgba(0, 51, 153, 0.1);
        letter-spacing: 0.3px;
        line-height: 1.8;
        padding: 20px;
        margin-top: 25px;
        margin-bottom: 10px;

        font-size: 0.8rem;
        text-justify: inter-character; /* Répartit l'espace entre les lettres aussi */
        hyphens: auto; /* Coupe les mots longs (indispensable en français) */
        word-spacing: 0;

    }


    /********************* CSS du bouton nos valeurs  *********************/

    .menu_nosvaleurs
    {
        display: none;

        flex-direction: row;
        flex-wrap: nowrap;

        justify-content: center;
        align-items: center;
        gap: 10px;

        padding: 20px 10px;
        margin: 10px 0;
        width: 100%;

        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);

    }

    .menu_nosvaleurs.visible
    {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin-top: 50px ;
    }


    .btn_nosvaleurs
    {
        flex: 0 0 40px; /* Taille fixe pour éviter les déformations */
        height: 40px;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        font-family: var(--var-font-family);
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn_nosvaleurs.btn_active_jj
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);
        border-color: var(--var-color-black);
        transform: scale(0.95);

    }


    #id_cont_detail_nosvaleurs
    {

        margin-top: 40px;
        padding: 30px;

        /* L'encadré Premium */
        border: var(--var-border) solid var(--var-color-black) ;
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);

        /* Ombre portée subtile pour donner de la profondeur */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    }

    #id_cont_detail_nosvaleurs.non_visible
    {
        display: none !important;
    }

    #id_cont_detail_nosvaleurs.visible
    {
        display: block !important;
    }

    .bloc_detail_valeur
    {
        display: none ;
        opacity: 0 ;
    }

    .bloc_detail_valeur.visible
    {
        display: block !important;
    }

    .bloc_detail_valeur.non_visible
    {
        display: none !important;
    }


    .detail_nosvaleurs.visible
    {
        display: block !important;
        animation: fadeInSlide 0.5s ease forwards;
    }

    .entete_valeur
    {
        display: flex;
        align-items: center;

        justify-content: center;
        gap: 30px;
        margin-bottom: 20px;

        padding-bottom: 10px;
        width: 100%;
    }

    .texte_valeur p
    {

        /* word-spacing: -2px;*/

        /* Optionnel : pour resserrer aussi les lettres elles-mêmes */
        letter-spacing: -0.2px;
        font-family: var(--var-font-family);
        font-size: 0.8rem;
        /* Assurez-vous que le texte n'est pas justifié,
           car "justify" augmente l'espace entre les mots */
        text-align: left;
        text-justify: inter-character; /* Répartit l'espace entre les lettres aussi */
        hyphens: auto; /* Coupe les mots longs (indispensable en français) */
        word-spacing: 0;
    }

    .icone_symbole
    {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;
        border-radius: 50%;

        border: var(--var-border) solid var(--var-color-black); /* Bordure fine aux couleurs de J & J */
        background-color: var(--var-color-white) ;
        flex-shrink: 0;

        font-size: 1.1rem;
        color: var(--var-color-salmon) ;
    }

    .entete_valeur h2
    {
        margin: 0 ;
        text-align: center ;
        font-family: var(--var-font-family);
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 1px;

    }

    .texte_valeur p
    {
        line-height: 1.5;
        text-align: justify;
        hyphens: auto;
        word-spacing: -1px ;
        font-size: 0.8rem;
    }

    .brand_name
    {
        font-weight: 700;
    }

    .premier_j
    {
        color: var(--var-color-blue) ;
    }

    .deuxieme_j
    {
        color: var(--var-color-orange) ;
    }

    .menu_unesagesse
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 70vh;
        padding: 15px 15%;
        text-align: center;
        border-radius: var(--var-border-radius) ;
        border: var(--var-border) solid var(--var-color-black);
        background-color: var(--var-color-white) ;
        margin-top: 40px ;

    }

    .entete_valeur_unesagesse
    {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        width: 100%;
        white-space: nowrap;
    }


    .entete_valeur_unesagesse h2
    {
        margin: 0 ;
        text-align: center ;
        font-family: var(--var-font-family);
        font-size: 1rem;
        letter-spacing: 1px;
        color: var(--var-color-black) ;
        width: 100%;
    }



    .icone_symbole_unesagesse
    {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;
        border-radius: 50%;

        border: var(--var-border) solid var(--var-color-black); /* Bordure fine aux couleurs de J & J */
        background-color: var(--var-color-white) ;
        flex-shrink: 0;

        font-size: 1.0rem;
        color: var(--var-color-salmon) ;
    }




    /* Bloc de texte */
    .texte_valeur_unesagesse
    {
        width: 100%; /* S'assure que le parent prend tout l'espace */
        max-width: 100%;
        margin: 0 auto;
    }

    .texte_valeur_unesagesse blockquote
    {
        font-size: 0.8rem;
        font-style: italic;
        font-family: var(--var-font-family); /* Ajout du ; manquant */
        color: var(--var-color-black);
        margin-bottom: 20px;
        line-height: 1.5;
        position: relative;
        margin: 0 0 20px 0;
        padding: 0;
        width: 100%;
        text-align: justify;
        display: block;
        position: relative;
        line-height: 1.5;

    }

    .texte_valeur_unesagesse blockquote::before
    {
        content: none !important; /* Supprime le contenu généré */
        display: none;
        position: absolute;
        top: -15px;
        left: 0;
        font-size: 0.8rem;
        color: var(--var-color-black);
        opacity: 0.2;
    }

    .texte_valeur_unesagesse p
    {
        font-size: 0.8rem;
        line-height: 1.5;
        text-align: justify;
        color: var(--var-color-black);
        margin: 0 0 20px 0; /* Pour garder le même espacement qu'entre les blocs */
        hyphens: auto;
        font-family: var(--var-font-family);
        text-justify: inter-character; /* Répartit l'espace entre les lettres aussi */
        hyphens: auto; /* Coupe les mots longs (indispensable en français) */
        word-spacing: 0;
    }


    .texte_valeur_unesagesse strong
    {
        color: var(--var-color-black) ;
        font-weight: 600;
    }

    /********************* CSS du bouton La Securite  *********************/

    .menu_lasecurite
    {
        display: none;
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */

        width: 100%; /* S'aligne parfaitement à gauche et à droite du parent */
        gap: 5px; /* Espace régulier entre les boutons */
        padding: 15px;

        /* Encadré fin aligné sur les bords du parent */
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);

    }

    .menu_lasecurite.visible
    {
        display: grid !important;
        width: 100% !important;   /* Force l'occupation totale de la largeur */
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        padding: 15px;
        font-family: var(--var-font-family);
        font-size: 0.8rem ;
        margin: 40px 0 50px 0 !important;
    }


    .btn_lasecurite
    {
        display: flex;
        flex-direction: column; /* Icône au-dessus */
        align-items: center;
        justify-content: center;
        gap: 8px;

        background: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

        aspect-ratio: auto;
        padding: 10px 5px;
        min-height: 70px;

        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn_lasecurite i
    {
        font-size: 1.2rem;
        color: var(--var-color-black);
        transition: transform 0.3s ease;
    }

    .btn_lasecurite span
    {
        font-family: var(--var-font-family) ;
        font-size: 0.73rem ;
        letter-spacing: 0.3px ;
        color: var(--var-color-black) ;
        text-align: center ;
    }

    .btn_lasecurite.btn_active_jj
    {
        background-color: var(--var-color-black) !important;
    }

    .btn_lasecurite.btn_active_jj i,
    .btn_lasecurite.btn_active_jj span
    {
        color: var(--var-color-salmon) !important ;
    }

    #id_cont_lasecurite.visible
    {
        display: grid !important ;
        width: 100% !important ;
        margin-bottom: 50px !important;
        flex: none !important;
    }

    .bloc_detail_secu
    {
        display: none ;
        width: 100% ;
        background-color: var(--var-color-white) ;
        border: var(--var-border) solid var(--var-color-black) ;
        border-radius: var(--var-border-radius) ;
        padding: 20px ;


    }


    .bloc_detail_secu.visible
    {
        display: block !important;
        margin-top: 30px !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .entete_secu
    {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Icônes aux extrémités */
        margin-bottom: 15px;
        padding-bottom: 10px;

    }

    .entete_secu h5
    {
        font-family: var(--var-font-family);
        font-size: 0.8rem; /* Réduction pour plus d'élégance */
        color: var(--var-color-black);

        letter-spacing: 0.2px; /* Un peu plus d'espace entre les lettres pour compenser la taille */
        text-align: center;
        margin: 0 10px; /* Évite que le texte ne colle trop aux médaillons */
        flex: 1; /* Permet au titre de bien rester centré entre les deux cercles */
    }

    .icone_symbole_secu
    {
        display: flex;
        align-items: center;
        justify-content: center;

        /* Taille du cercle */
        width: 45px;
        height: 45px;

        /* Forme et Bordure */
        border: var(--var-border) solid var(--var-color-black);
        border-radius: 50%; /* Le secret du cercle parfait */
        background-color: var(--var-color-white);

        /* Ombre légère pour le relief (effet jeton) */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);

        /* Transition pour l'élégance */
        transition: all 0.3s ease;
    }

    .icone_symbole_secu i
    {
        font-size: 1rem;
        color: var(--var-color-salmon); /* Saumon pour les icônes de détail */
    }

    .texte_secu p
    {
        font-family: var(--var-font-family);
        font-size: 0.8rem;
        line-height: 1.6;
        color: var(--var-color-black);
        text-align: justify;
        hyphens: auto;
        ext-justify: inter-character;


    }


   /********************* CSS du bouton Nos Equipes  *********************/

    #id_cont_nosequipes
    {
        display: none; /* Par défaut, c'est caché */
        max-width: 800px;
        margin: 0 auto;
    }

    #id_cont_nosequipes.visible
    {
        display: grid !important; /* Devient une grille uniquement quand visible */
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 5px;
        padding: 20px 10px;
        margin-top: 25px ;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
    }

    #id_cont_nosequipes.non_visible
    {
        display: none !important;
    }



    .btn_nosequipes
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;


        background: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

        /* Format rectangulaire */
        padding: 10px;
        min-height: 100px;
        gap:8px ;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .btn_nosequipes i
    {
        font-size: 1.2rem;
        color: var(--var-color-black);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn_nosequipes span
    {
        font-family: var(--var-font-family);
        font-size: 0.73rem;
        text-align: center ;

        letter-spacing: 0.3px;
        color: var(--var-color-black);

        width: 100%;
        white-space: normal ;

    }

    .btn_nosequipes.active
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }

    .btn_nosequipes.active i
    {
        color: var(--var-color-salmon) !important;
    }

    .btn_nosequipes.active span
    {
        color: var(--var-color-salmon) !important;
    }


    #id_cont_equipe_detail
    {
        /* Espacement extérieur */
        margin: 25px auto;

        /* Largeur adaptable : 95% de l'écran sur mobile, max 1100px sur PC */
        width: 100%;


        /* Espacement intérieur (réduit pour mobile) */
        padding: 15px;

        /* L'encadré */
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

        /* Fond et ombre */
        background-color: var(--var-color-white);


        /* Gestion du débordement */
        overflow: hidden;
        box-sizing: border-box; /* Très important pour que le padding ne fasse pas déborder le cadre */
    }

    .pole_equipe_section h5
    {
        color: var(--var-color-salmon);
        font-family: var(--var-font-family);
        margin-bottom: 25px;
        font-size: 0.8rem;
        line-height: 1.5;
        background-color: var(--var-color-blue-stat); ; /* Un fond très léger pour contraster */
        border: var(--var-border) solid var(--var-color-black); /* Une ligne élégante au sommet */
        border-radius: var(--var-border-radius) ;
        padding: 20px 10px ;
        text-align: center;
    }

    .grid_collaborateurs
    {
        display: grid;
        /* Crée 2 colonnes égales */
        grid-template-columns: repeat(2, 1fr);
        /* Espace entre les colonnes et les lignes */
        gap: 40px 10px;
        /* Centre la grille dans le conteneur */
        justify-items: center;
        align-items: stretch;
        padding: 10px 0;
    }

    .titre_pole
    {
        font-size: 1.rem;
        text-align: center;
        margin-bottom: 25px;

        letter-spacing: 1px;
    }


    .photo_cadre
    {
        width: 130px;
        height: 130px;
        margin: -10px auto 10px;

        /* 1. On définit la forme circulaire */
        border-radius: 50%;

        /* 2. CRUCIAL : On coupe tout ce qui dépasse du cercle */
        overflow: hidden;

        /* 3. On force la bordure sur le cercle */
        border: var(--var-border) solid var(--var-color-black);

        /* 4. On s'assure que l'image est bien contenue */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .photo_cadre img
    {
        display: block;
        width: 95%;
        height: 95%;

        /* 5. On remplit le cercle sans déformer la photo */
        object-fit: cover;

        object-position: 50% 10%;

        /* On annule les héritages gênants */
        margin: 0 !important;
        padding: 0 !important;

        /* Optionnel : sécurité pour arrondir l'image elle-même */
        border-radius: 50%;
        border: var(--var-border) solid var(--var-color-salmon);
    }



    .card_collaborateur
    {
        text-align: center;    /* Centre le nom sous la photo */
        cursor: pointer;
        transition: transform 0.3s ease;

        background-color: var(--var-color-white); ; /* Un fond très léger pour contraster */
        border: var(--var-border) solid var(--var-color-black); /* Une ligne élégante au sommet */
        border-radius: var(--var-border-radius) ;
        padding: 20px 10px ;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .info_collaborateur
    {
        display: flex;
        flex-direction: column; /* Aligne le nom au-dessus du domaine */
        gap: 8px;              /* Crée l'espace exact de 8px que tu as demandé */
        width: 100%;
        margin-top: auto;      /* Aimante tout le bloc au fond de la carte */
        padding-top: 15px;     /* Respiration de sécurité sous la photo */
    }


    .nom_collaborateur
    {
        font-size: 0.8rem;             /* Un tout petit peu plus grand pour le nom */
        font-weight: 600;              /* Met le nom en valeur (semi-bold) */
        color: var(--var-color-black);  /* Couleur forte */
        font-family: var(--var-font-family);
        line-height: 1.2;
    }

    .domaine_collaborateur
    {
        font-size: 0.7rem;            /* Un poil plus petit pour la hiérarchie visuelle */
        font-weight: 300;              /* Plus léger */
        color: var(--var-color-gray);   /* Une couleur légèrement adoucie pour le contraste */
        font-family: var(--var-font-family);
        line-height: 1.3;
    }


    .desc_collaborateur_container
    {
        margin-top: 25px;
        padding: 15px;
        background-color: var(--var-color-white); ; /* Un fond très léger pour contraster */
        border: var(--var-border) solid var(--var-color-black); /* Une ligne élégante au sommet */
        border-radius: var(--var-border-radius) ;

    }

     .desc_item
    {
        padding: 10px 0;
    }

    .desc_item h5
    {
        color: var(--var-color-salmon);
        font-family: var(--var-font-family);
        margin-bottom: 25px;
        font-size: 0.8rem;
        line-height: 1.5;
        background-color: var(--var-color-blue-stat); ; /* Un fond très léger pour contraster */
        border: var(--var-border) solid var(--var-color-black); /* Une ligne élégante au sommet */
        border-radius: var(--var-border-radius) ;
        padding: 20px 10px ;
        text-align: center;
    }


    .desc_item p
    {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .desc_item strong
    {
        color: var(--var-color-black);
    }

    /* Effet visuel sur la carte sélectionnée */
    .card_collaborateur.active_collab .photo_cadre
    {
        border-color: var(--var-color-green);
        box-shadow: 0 0 10px rgba(0,0,0,0.2);

    }

    .titre_critere
    {
        font-size: 0.8rem;
        margin-bottom: 6px; /* Petit espace avant la liste en dessous */
        color: var(--var-color-black);
        font-family: var(--var-font-family);
    }

    .liste_critere
    {
        margin: 0 0 16px 0;    /* Supprime les marges par défaut et ajoute un espace en bas du bloc */
        padding-left: 20px;    /* Décale la liste vers la droite pour laisser de la place aux puces */
        list-style-type: square; /* FORCE LES PUCES À ÊTRE DES CARRÉS (Square) */

    }

    .liste_critere li
    {
        font-size: 0.8rem;
        line-height: 1.5;
        color: var(--var-color-black);
        margin-bottom: 8px;    /* Espace de respiration entre deux puces (utile pour le rôle qui a 2 points) */
        font-family: var(--var-font-family);
    }

    .liste_critere li::marker
    {
        color: var(--var-color-salmon); /* Le carré devient saumon au pixel près ! */
    }

    .liste_critere li:last-child
    {
        margin-bottom: 0;
    }



   /********************* Nos Actualités  *********************/

    #id_cont_detail_actualites .cont_tab_actu.visible
    {
        display: block !important;
    }

    #id_cont_detail_actualites.visible
    {
        display: block !important;
    }

   .nav_actualites
   {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes de taille égale */
        grid-template-rows: repeat(3, auto);   /* 3 lignes */
        gap: 5px;                             /* Espacement entre les boutons */
        padding: 15px;
        width: 100%;
         border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);
        margin: 40px 0 20px 0 !important;
    }


    .btn_actu_tab
    {
        display: flex;
        flex-direction: column;    /* Aligne icône et texte verticalement */
        align-items: center;       /* Centre horizontalement */
        justify-content: center;   /* Centre verticalement */
        padding: 15px 10px;
        gap: 5px;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);
        font-family: var(--var-font-family);
        cursor: pointer;
        transition: 0.3s ease;
    }

    .icon_group
    {
        display: flex;
        flex-direction: row; /* Aligne les icônes sur une ligne */
        gap: 5px;            /* Petit espace entre chaque monnaie */
        align-items: center;
        justify-content: center;
    }

    /* Style spécifique pour le texte "CFA" car il n'y a pas d'icône Font Awesome dédiée */
    .cfa_text {
        font-size: 0.7rem;

        font-family: var(--var-font-family);
    }

    /* On ajuste un peu la taille des icônes pour qu'elles tiennent toutes */
    .icon_group i {
        font-size: 0.7rem;
    }

    .btn_actu_tab i
    {
        font-size: 1.rem;         /* On grossit un peu l'icône */
        margin-bottom: 8px;        /* Espace sous l'icône */
        margin-right: 0;           /* On enlève la marge à droite du précédent design */
    }

    .btn_actu_tab span
    {
        font-size: 0.73rem;
        font-family: var(--var-font-family);

    }

    .btn_actu_tab.btn_active_jj
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);
    }

    #id_cont_actualites
    {
        display: flex;
        flex-direction: column;
        width: 100%;

        margin: 0 auto;
    }

    #id_cont_detail_actualites
    {
        background:var(--var-color-white) ;
        border-radius: var(--var-border-radius);
        transition: opacity 0.4s ease;
    }

    .cont_tab_actu
    {   margin-top : 25px ;
        padding: 20px;
        border: var(--var-border) solid var(--var-color-black) ;
        border-radius: var(--var-border-radius) ;

    }

    .cont_tab_actu h5
    {
        text-align: center;
        background-color: var(--var-color-blue-stat); /* Fond bleu */
        color: var(--var-color-salmon);
        padding: 25px 20px;
        margin-bottom: 25px;
        margin-bottom: 25px;

        border-radius: var(--var-border-radius);
    }



    .desc_actu_content p
    {
        margin-bottom: 15px;
        line-height: 1.6;
        font-size: 0.8rem;
        font-family: var(--var-font-family);
    }

    .desc_actu_content p:last-child
    {
        margin-bottom: 0;
    }

    .cont_tab_actu .desc_actu_content p
    {
        display: flex;
        align-items: flex-start; /* Aligne la puce sur la première ligne si le texte est long */
        margin-bottom: 10px;    /* Espace entre les paragraphes si vous en ajoutez d'autres */
    }

    .cont_tab_actu .desc_actu_content p::before
    {
        content: "";
        display: inline-block;
        width: 8px;            /* Taille de la puce */
        height: 8px;           /* Taille de la puce */
        background-color: var(--var-color-salmon); /* Noir (ou utilisez votre code couleur spécifique) */
        border-radius: 2px;    /* Border radius pour l'arrondi léger */
        margin-right: 12px;    /* Espace entre la puce et le texte */
        margin-top: 6px;       /* Ajustement vertical pour centrer face à la première ligne */
        flex-shrink: 0;        /* Empêche la puce de se déformer */
    }


   /********************* Nos Services  *********************/

    #id_contenu_nosservices
    {
        display: grid;
        /* On réduit l'écart pour laisser de la place aux 3 colonnes */
        gap: 5px;
        padding: 10px;
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
        padding: 10px;

        /* 3 colonnes égales */
        grid-template-columns: repeat(3, 1fr);

        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

        /* Sécurité pour éviter que la grille ne déborde */
        box-sizing: border-box;
    }

    .btn_nosservices svg
    {
        width: 60px; /* On adapte la taille des logos sur mobile */
        height: 60px;
        background: var(--var-color-white);
    }

    .btn_nosservices.btn_active_jj svg
     {
         background: var(--var-color-black) ;
         fill: var(--var-color-salmon); /* Si c'est un SVG de remplissage */
         stroke: var(--var-color-salmon); /* Si c'est un SVG de ligne */
     }

    .btn_nosservices
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--var-color-white); /* Fond blanc */
        color: var(--var-color-black);            /* Contenu noir par défaut */
        border: var(--var-border) solid var(--var-color-black); /* Bordure noire */
        border-radius: var(--var-border-radius);
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 10px;
    }


    .btn_nosservices.btn_active_jj
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);
    }

    .btn_nosservices svg
    {
        width: 60px;
        height: 60px;
        background: transparent; /* SURTOUT PAS DE BLANC ICI, sinon ça cache le fond noir en mode actif */
        fill: currentColor;      /* L'icône prend la couleur du texte du bouton (noir ou saumon) */
    }

    .btn_nosservices .bg-shape
    {
        fill: var(--var-color-white); /* Le cercle reste blanc pour faire ressortir l'icône */
        stroke: var(--var-color-black); /* Bordure du cercle en noir */
        stroke-width: 1px;
    }

    .btn_nosservices.btn_active_jj .bg-shape
    {
        fill: var(--var-color-black);
        stroke: var(--var-color-salmon);
    }


    .btn_nosservices.btn_active_jj svg
    {
        fill: var(--var-color-salmon);
    }


    #cont_detail_nosservices.visible
    {
        border: var(--var-border) solid var(--var-color-black); /* Bordure noire */
        border-radius: var(--var-border-radius);
        margin-top:25px ;
    }

    .btn_nosservices .needle-group
    {
        transform-origin: 50px 50px; /* Centre exact du viewBox 100 100 */
        transition: transform 0.5s ease-in-out;
    }

    .btn_nosservices svg text
    {
        font-family: var(--var-font-family);
        transition: fill 0.3s ease;
        pointer-events: none; /* Évite toute interaction parasite avec le texte */
    }

    .btn_nosservices.btn_active_jj .bg-shape
    {
        fill: var(--var-color-black);
        stroke: var(--var-color-salmon);
    }

    /* État actif : on déclenche l'animation infinie */
    .btn_nosservices.btn_active_jj .needle-group
    {
        animation: rotate_needle 20s linear infinite;
    }




    #detail_nosservices
    {
        margin-top: 25px;
        padding: 0;
        margin:0;
        width: 100%;
        box-sizing: border-box;
        /* On s'assure qu'il n'y a pas d'espace si rien n'est affiché */
    }

    .contenu_detail_nosservices
    {
        width: 100%;
        transition: transform 0.5s ease-in-out;
    }

    .info_card_nosservices
    {
        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        width: 100%;
        max-width: 100%;

        /* Marges et Padding identiques à la grille pour l'alignement */
        margin: 0 0 20px 0;
        padding: 10px;

        position: relative;

        margin-top: 25px;
        box-sizing: border-box;


    }

    .card_header_nosservices
    {
        font-family: var(--var-font-family);
        font-size: 0.8rem;
        color: var(--var-color-salmon);
        background-color: var(--var-color-blue-stat);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

        display: block;
        width: 100%;
        box-sizing: border-box;

        /* CENTRAGE DU TEXTE */
        text-align: center;

        /* Les marges et l'aération */
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        padding: 1rem 1.2rem;
        line-height: 1.4;
    }

    .titre_critere_nosservices
     {
        font-size: 0.8rem;
        font-family: var(--var-font-family);
        color: var(--var-color-black) ; /* Ta couleur Saumon distinctive */
        margin-top: 1.6rem;
        margin-bottom: 0.75rem;

        letter-spacing: 0.5px;     /* Un léger espacement des lettres style cabinet de conseil */
        padding-left: 8px;
        border-left: 5px solid var(--var-color-blue-stat);
    }

    .liste_critere_nosservices
    {
        list-style: none;
        padding-left: 0;
        margin-bottom: 1.5rem;
        color: var(--var-color-black) ;
        font-family: var(--var-font-family);
        font-size: 0.8rem;
    }

    .puce-carre-nosservices
    {
        font-size: 0.8rem;
        line-height: 1.6;
        color: var(--var-color-black) ;
        position: relative;
        padding-left: 1.5rem; /* Espace pour que le texte ne colle pas la puce */
        margin-bottom: 0.5rem;
        font-family: var(--var-font-family);
    }

    .puce-carre-nosservices::before
    {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55rem; /* Aligne la puce avec la première ligne de texte */
        width: 7px;
        height: 7px;
        background-color: var(--var-color-salmon) ;
        border-radius: 2px;
    }

    .info_card_nosservices::after
    {

        position: absolute;
        top: 10px;
        right: 15px;
        color: var(--var-color-salmon);
        font-size: 1.rem;
    }


    .btn_nosservices .gears-group
    {
        transform-origin: 50% 50%;
    }

    /* On utilise la même durée (20s) que pour la boussole */
    .btn_nosservices.btn_active_jj .gears-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    .svg-ope stroke
    {
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .btn_nosservices .pilot-group
    {
        transform-origin: 50px 50px;
        transition: transform 0.5s ease-in-out;
    }

    /* Activation au clic */
    .btn_nosservices.btn_active_jj .pilot-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* On s'assure que le style du SVG PPMI suit les autres */
    .svg-ppmi
    {
        width: 60px;
        height: 60px;
        background: transparent;
        fill: currentColor;
    }

    .btn_nosservices .amoa-group
    {
        /* Utilisation de 50% 50% pour un centrage parfait dans le SVG */
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    .btn_nosservices.btn_active_jj .amoa-group
    {
        animation: rotate_needle 20s linear infinite;
    }


    .svg-amoa
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-amoa text
    {
        stroke: none;
    }

    svg-amoe
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-amoe text
    {
        stroke: none;
    }

    /* Animation du groupe central */
    .btn_nosservices .amoe-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation au clic / état actif */
    .btn_nosservices.btn_active_jj .amoe-group
    {
        /* On utilise la même animation rotate_needle que pour l'AMOA */
        animation: rotate_needle 20s linear infinite;
    }

    /* Optionnel : un petit effet de scale au survol pour différencier l'aspect "technique" */
    .btn_nosservices:hover .amoe-group
    {
        transform: scale(1.1);
    }

    .svg-cc
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-cc text
    {
        stroke: none; /* Nettoyage du rendu du texte */
    }

    /* Le groupe central pour le Cloud */
    .btn_nosservices .cc-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation (classe btn_active_jj) */
    .btn_nosservices.btn_active_jj .cc-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : petit effet d'aspiration/zoom propre au Cloud */
    .btn_nosservices:hover .cc-group
    {
        transform: scale(1.1);
    }


    /* Style pour le bouton DSID */
    .svg-dsid
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-dsid text
    {
        stroke: none;
    }

    /* Groupe central DSID */
    .btn_nosservices .dsid-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation (classe btn_active_jj) */
    .btn_nosservices.btn_active_jj .dsid-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Effet au survol : léger zoom pour évoquer l'analyse de données */
    .btn_nosservices:hover .dsid-group
    {
        transform: scale(1.1);
    }

    /* Style pour le bouton Data / IA / Transfo */
    .svg-diatd
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-diatd text
    {
        stroke: none;
    }

    /* Groupe central DIATD */
    .btn_nosservices .diatd-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation (classe btn_active_jj) */
    .btn_nosservices.btn_active_jj .diatd-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de pulsation pour évoquer l'intelligence */
    .btn_nosservices:hover .diatd-group
    {
        transform: scale(1.1);
    }

    /* Style pour le bouton Processus Métiers & IT */
    .svg-ipmit
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-ipmit text
    {
        stroke: none;
    }

    /* Groupe central IPMIT */
    .btn_nosservices .ipmit-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .ipmit-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de rotation légère pour suggérer le mouvement mécanique */
    .btn_nosservices:hover .ipmit-group
    {
        transform: rotate(15deg) scale(1.05);
    }

    /* Style pour le bouton Automatisation */
    .svg-apmit
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-apmit text
    {
        stroke: none;
    }

    /* Groupe central APMIT */
    .btn_nosservices .apmit-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .apmit-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : l'éclair semble s'activer */
    .btn_nosservices:hover .apmit-group
    {
        transform: scale(1.1);
        filter: drop-shadow(0 0 2px var(--var-color-salmon));
    }


    /* Style pour le bouton Optimisation */
    .svg-opmit
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-opmit text
    {
        stroke: none;
    }

    /* Groupe central OPMIT */
    .btn_nosservices .opmit-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .opmit-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de croissance */
    .btn_nosservices:hover .opmit-group
    {
        transform: scale(1.1) translateY(-2px);
    }

    /* Style pour le bouton ERP, CRM, BI */
    .svg-erpcrmbi
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-erpcrmbi text
    {
        stroke: none;
    }

    /* Groupe central ERP-CRM-BI */
    .btn_nosservices .erpcrmbi-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation (classe btn_active_jj) */
    .btn_nosservices.btn_active_jj .erpcrmbi-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de mise en lumière du noyau */
    .btn_nosservices:hover .erpcrmbi-group
    {
        transform: scale(1.1);
        filter: drop-shadow(0 0 3px rgba(0,0,0,0.1));
    }

    /* Style pour le bouton Développement Logiciel */
    .svg-idl
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-idl text
    {
        stroke: none;
    }

    /* Groupe central IDL */
    .btn_nosservices .idl-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .idl-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de "frappe" ou léger rebond */
    .btn_nosservices:hover .idl-group
    {
        transform: scale(1.1);
    }

    /* Style pour le bouton Dev Web & Mobile */
    .svg-dwm
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-dwm text
    {
        stroke: none;
    }

    /* Groupe central DWM */
    .btn_nosservices .dwm-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .dwm-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de mise en avant des écrans */
    .btn_nosservices:hover .dwm-group
    {
        transform: scale(1.1);
    }

        /* Style pour le bouton Formation */
    .svg-fetc
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-fetc text
    {
        stroke: none;
    }

    /* Groupe central FETC */
    .btn_nosservices .fetc-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .fetc-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet d'élévation (ascension sociale/professionnelle) */
    .btn_nosservices:hover .fetc-group
    {
        transform: translateY(-3px) scale(1.05);
    }


    /* Style pour le bouton Culture & Changement */
    .svg-cecc
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-cecc text
    {
        stroke: none;
    }

    /* Groupe central CECC */
    .btn_nosservices .cecc-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .cecc-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de cohésion (léger grossissement) */
    .btn_nosservices:hover .cecc-group
    {
        transform: scale(1.1);
    }


    /* Style pour le bouton TMAE */
    .svg-tmae
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-tmae text
    {
        stroke: none;
    }

    /* Groupe central TMAE */
    .btn_nosservices .tmae-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .tmae-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de protection renforcée (léger rebond) */
    .btn_nosservices:hover .tmae-group
    {
        transform: scale(1.1);
    }


    /* Style pour le bouton Communication */
    .svg-comm
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-comm text
    {
        stroke: none;
    }

    /* Groupe central Communication */
    .btn_nosservices .comm-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .comm-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de vibration / amplification */
    .btn_nosservices:hover .comm-group
    {
        transform: scale(1.1) rotate(-5deg);
    }


    /* Style pour le bouton Marketing */
    .svg-market
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-market text
    {
        stroke: none;
    }

    /* Groupe central Marketing */
    .btn_nosservices .market-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .market-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de décollage */
    .btn_nosservices:hover .market-group
    {
        transform: scale(1.1) translate(2px, -2px);
    }


        /* Style pour le bouton Economie Sociale */
    .svg-ecosoc
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-ecosoc text
    {
        stroke: none;
    }

    /* Groupe central ECOSOC */
    .btn_nosservices .ecosoc-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.5s ease-in-out;
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .ecosoc-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de "battement" léger ou zoom doux */
    .btn_nosservices:hover .ecosoc-group
    {
        transform: scale(1.1);
    }

    /* Style pour le bouton Alpha & Omega */
    .svg-ao
    {
        width: 60px;
        height: 60px;
        background: transparent;
    }

    .svg-ao text
    {
        stroke: none;
    }

    /* Groupe central AO */
    .btn_nosservices .ao-group
    {
        transform-origin: 50% 50%;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animation lors de l'activation */
    .btn_nosservices.btn_active_jj .ao-group
    {
        animation: rotate_needle 20s linear infinite;
    }

    /* Hover : effet de focus central */
    .btn_nosservices:hover .ao-group
    {
        transform: scale(1.15);
    }

   /********************* Nos References  *********************/

    .menu_nosreferences
    {
        display: grid;
         grid-template-columns: repeat(2, 1fr); /* Crée 2 colonnes de largeur égale */
         gap: 5px; /* Espace entre les boutons */
         justify-items: center; /* Centre les boutons horizontalement dans leur cellule */

         padding: 10px;
         width: 100%;
         margin: 0 auto;
         margin-top: 25px ;
         border: var(--var-border) solid var(--var-color-black);
         border-radius: var(--var-border-radius);
    }



    #id_contenu_nosreferences.visible
    {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 25px ;
    }

    #id_contenu_nosreferences
    {
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

    }

    #id_contenu_nosreferences.non_visible
    {
        display: none !important;
    }

    .btn_nosreferences
     {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;

         /* On peut garder une largeur fixe ou mettre 100% pour remplir la cellule du grid */
         width: 100% ;
         min-height: 80px;

         background-color: var(--var-color-white);
         border: var(--var-border) solid var(--var-color-black);
         border-radius: var(--var-border-radius);
         cursor: pointer;
         transition: all 0.3s ease;
         color: var(--var-color-black);
     }



    .btn_nosreferences i
    {
        font-size: 1.rem;
        margin-bottom: 8px;
    }

    .btn_nosreferences span
    {
        font-size: 0.73rem;
        font-family: var(--var-font-family) ;
        text-align: center;
    }

    .btn_nosreferences.btn_active_jj
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);

    }

    .contenu_nosreferences
    {
        margin-top: 25px;
        padding: 15px;
        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        width: 100%;
    }

    #id_contenu_nosreferences.visible
    {
        display: block !important;
    }

    #id_contenu_nosreferences.non_visible
    {
        display: none !important;
    }

    .info_card_nosreferences
    {
        text-align: left;
        color: var(--var-color-black);
        line-height: 1.;
        font-family: var(--var-font-family) ;
    }

    .titre-mission
    {
        display: block;
        color: var(--var-color-salmon);
        font-size: 0.8rem;
        font-family: var(--var-font-family) ;
        background-color: var(--var-color-blue-stat);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 15px 0 ;
        text-align: center;
        width: 100%;

    }


    .label-contexte,
    .label-contexte u,
    .label-contexte strong
    {
        font-size: 0.8rem !important; /* On descend un peu sous le 0.8 du texte pour marquer la différence */
        line-height: 1.2;
        text-decoration: underline; /* Maintient le soulignement du <u> */
    }

    .label-contexte strong
    {
        font-weight: 600; /* Un peu plus épais que 500 pour que le gras reste visible malgré la petite taille */
    }

    .label-env,
    .label-env u,
    .label-env strong
    {
        font-size: 0.8rem !important; /* On descend un peu sous le 0.8 du texte pour marquer la différence */
        line-height: 1.2;
        text-decoration: underline; /* Maintient le soulignement du <u> */
    }

    .label-env strong
    {
        font-weight: 600; /* Un peu plus épais que 500 pour que le gras reste visible malgré la petite taille */
    }


    .contexte-mission
    {
        font-size: 0.8rem;
        font-family: var(--var-font-family) ;
        background-color: var(--var-color-white);
        color: var(--var-color-black);

    }



    .conteneur-ligne
    {
        display: block;
        margin-bottom: 8px;
        padding-left: 20px;
        position: relative;
        font-size: 0.8rem;
        color: var(--var-color-black);
        font-family: var(--var-font-family) ;
    }

    .conteneur-ligne span
    {
        font-size: 0.73rem;
        font-family: var(--var-font-family) ;
        color: var(--var-color-black);
    }

    .puce-carre
    {
        position: absolute;
        left: 0;
        top: 8px;
        width: 8px;
        height: 8px;

        background-color: var(--var-color-black);
        font-family: var(--var-font-family) ;
        border-radius: 2px ;
    }

    .puce-carre span
    {
        font-size: 0.73rem;
        font-family: var(--var-font-family) ;
        color: var(--var-color-black);
    }

    .sous-ligne
    {
        display: flex;
        align-items: flex-start;
        font-size: 0.75rem;
        margin-left: 20px; /* Décalage vers la droite pour l'aspect sous-liste */
        margin-top: 5px;
        font-family: var(--var-font-family) ;
    }

    .conteneur-sdi
    {
        display: flex;
        flex-direction: column; /* Aligne les éléments les uns sous les autres */
        gap: 10px;               /* Espace entre chaque ligne */
        padding-left: 50px;      /* Espace pour laisser la place aux puces */
        margin-top: 10px;
    }

    /* Chaque ligne de texte */
    .sdi-item
    {
        position: relative;
        display: flex;
        align-items: center;
        font-family: var(--var-font-family); /* Utilise Montserrat selon votre root */
        font-size: 0.8rem;
        color: var(--var-color-black);
    }

    /* Création de la puce ronde avec ::before */
    .sdi-item::before
    {
        content: "";           /* Nécessaire pour afficher le pseudo-élément */
        position: absolute;
        left: -20px;           /* Positionne la puce à gauche du texte */
        width: 8px;            /* Diamètre de la puce */
        height: 8px;
        background-color: var(--var-color-salmon); /* Utilise votre variable root */
        border-radius: 50%;    /* Rend le carré rond */
        flex-shrink: 0;
    }

    .env-fonctionnel,
    .env-technique
    {
        font-family: var(--var-font-family) ;
        color: var(--var-color-black);
        font-size: 0.8rem !important;

    }


    /********************* Nos Clients  *********************/

    .menu_nosclients
    {
        /* On prépare la grille ici */

        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        gap: 5px;
        padding: 10px;
        margin-top:25px ;
    }



    #id_cont_nosclients.visible
    {
        display: grid !important;
    }

    #id_cont_nosclients.non_visible
    {
        display: none !important;
    }

    .btn_nosclients
    {
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 20px 10px;
        background-color: var(--var-color-white);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Centre verticalement le contenu */
        width: 100%;
        height: 100%; /
        box-sizing: border-box;

    }

    .btn_nosclients.btn_active_jj
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);

    }

    .btn_nosclients.btn_active_jj .icon_wrapper i
     {
        color: var(--var-color-salmon);
    }

    .icon_wrapper
    {
        display: flex;       /* Aligne les enfants horizontalement par défaut */
        flex-direction: row; /* Force la ligne */
        justify-content: center; /* Centre le bloc d'icônes */
        gap: 15px;
        margin-bottom: 15px;

        justify-items: center;
    }

    .icon_wrapper i
    {
        font-size: 1.0rem;
        gap:10px;
        margin: 0;
        color:  var(--var-color-black) ;
    }

    .btn_nosclients span
    {
        font-family: var(--var-font-family) ;
        font-size: 0.73rem;
        letter-spacing: 0.5px;

    }

    .menu_thematique_nosclients
    {
        margin-top: 25px;
        padding: 10px;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white); /* Un gris très léger pour distinguer le bloc */
    }


    .group_thematique
    {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .btn_sous_thematique
    {
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 15px 5px;
        background-color: var(--var-color-white);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        box-sizing: border-box;
        gap: 5px;
        transition: transform 0.2s ease, background-color 0.3s ease;
    }

    .btn_sous_thematique i
    {
        font-size: 1.0rem;
    }

    .btn_sous_thematique span
    {
        font-size: 0.73rem;
        text-align: center;
        font-family: var(--var-font-family);
    }

    .btn_sous_thematique.btn_active_jj
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }

    .btn_sous_thematique.btn_active_jj i
    {
        color: var(--var-color-salmon) !important;
    }

    .btn_sous_thematique.btn_active_jj span
     {
        color: var(--var-color-salmon);
    }

    .menu_detail_nosclients
    {
    margin-top: 20px;
    }

    .content_detail
    {

        /*border-left: 8px solid var(--var-color-black);
        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);*/
        width: 100%;
        transition: transform 0.5s ease-in-out;
    }

    .content_detail h3
    {
        margin-top: 0;
        color: var(--var-color-black);
        letter-spacing: 1px;
    }

    .info_card_nosclients
    {
        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        width: 100%;
        max-width: 100%;

        /* Marges et Padding identiques à la grille pour l'alignement */
        margin: 0 0 20px 0;
        padding: 10px;

        position: relative;

        margin-top: 25px;
        box-sizing: border-box;


    }

    .card_header_nosclients
    {
        font-family: var(--var-font-family);
        font-size: 0.8rem;
        color: var(--var-color-salmon);
        background-color: var(--var-color-blue-stat);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

        display: block;
        width: 100%;
        box-sizing: border-box;

        /* CENTRAGE DU TEXTE */
        text-align: center;

        /* Les marges et l'aération */
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        padding: 1rem 1.2rem;
        line-height: 1.4;
    }

    .titre_critere_nosclients
     {
        font-size: 0.8rem;
        font-family: var(--var-font-family);
        color: var(--var-color-black) ; /* Ta couleur Saumon distinctive */
        margin-top: 1.6rem;
        margin-bottom: 0.75rem;

        letter-spacing: 0.5px;     /* Un léger espacement des lettres style cabinet de conseil */
        padding-left: 8px;
        border-left: 5px solid var(--var-color-blue-stat);
    }

    .liste_critere_nosclients
    {
        list-style: none;
        padding-left: 0;
        margin-bottom: 1.5rem;
        color: var(--var-color-black) ;
        font-family: var(--var-font-family);
        font-size: 0.8rem;
    }

    .puce-carre-nosclients
    {
        font-size: 0.8rem;
        line-height: 1.6;
        color: var(--var-color-black) ;
        position: relative;
        padding-left: 1.5rem; /* Espace pour que le texte ne colle pas la puce */
        margin-bottom: 0.5rem;
        font-family: var(--var-font-family);
    }

    .puce-carre-nosclients::before
    {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55rem; /* Aligne la puce avec la première ligne de texte */
        width: 7px;
        height: 7px;
        background-color: var(--var-color-salmon) ;
        border-radius: 2px;
    }





     /********************* Partie Nos Partenaires  *********************/

    .menu_partenaires
    {
        display: grid;                  /* On passe en GRID pour la rigueur des colonnes */
        grid-template-columns: 1fr 1fr; /* On crée 2 colonnes de largeur égale (50/50) */
        gap: 5px;                      /* Espace entre les boutons */
        margin: 25px 2px ;
        padding: 10px;
        border: var(--var-border) solid var(--var-color-black) ;
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white) ;
    }

    .btn_partenaire
    {
        display: flex;
        flex-direction: column;         /* Icône au-dessus du texte */
        align-items: center;
        justify-content: center;
        gap:5px ;
        padding: 10px 5px;              /* Un peu de padding vertical */
        background: var(--var-color-white) ;
        border: var(--var-border) solid var(--var-color-black) ;
        border-radius: var(--var-border-radius);
        width: 100%;                    /* Le bouton prend toute la largeur de sa colonne */
    }


    .btn_partenaire.btn_active_jj
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);
    }

    .btn_partenaire i
    {
        font-size: 1.0rem;              /* Taille de l'icône */
    }

    .btn_partenaire.btn_active_jj i
    {
        color: var(--var-color-salmon);
    }

    .btn_partenaire span
    {
        font-size: 0.73rem;
        text-align: center;
    }

    .menu_liste_nospartenaires
    {
        width: 100%;
        box-sizing: border-box;
    }


    .encadre_liste_entreprises
    {
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 20px;
        margin: 20px 0;
        background-color: var(--var-color-white);
        box-sizing: border-box;
    }

    .encadre_liste_entreprises h5
    {

        font-size: 0.8rem;
        text-align: center;
        font-family: var(--var-font-family);
        color: var(--var-color-salmon);
        min-height: 70px;
        background-color: var(--var-color-blue-stat);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        margin-top: 0;
        margin-bottom: 20px;
        line-height: 1.5;
        font-weight: 500;
        box-sizing: border-box;

    }


    .grille_lignes_entreprises
    {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }


    .ligne_entreprise_item
    {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 10px 15px;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);
        width: 100%;
        box-sizing: border-box;
        cursor: pointer !important;
        touch-action: manipulation !important; /* Optimisation mobile */
    }

    .mini_cadre_logo
    {
        width: 90px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px; /* Conservé et unique pour une belle aération intérieure */
        box-sizing: border-box;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);
        overflow: hidden;
        flex-shrink: 0; /* Empêche le logo de s'écraser */
    }

    .mini_cadre_logo img
    {
        max-height: 80%; /* L'image ne dépassera jamais 80% de la hauteur du cadre */
        max-width: 80%;  /* L'image ne dépassera jamais 80% de la largeur (utile pour les logos larges) */
        object-fit: contain;
        pointer-events: none !important;
    }

    .nom_entreprise_droite
    {
        font-size: 0.8rem;
        font-weight: 500;
        font-family: var(--var-font-family);
        color: var(--var-color-black);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);
        padding: 0 10px;

        /* CORRECTION ICI : Fait correspondre la hauteur au mini_cadre_logo */
        height: 90px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        box-sizing: border-box;
        pointer-events: none !important; /* Protège le clic sur mobile */
    }


    .ligne_entreprise_item.active .mini_cadre_logo
    {
        border-color: var(--var-color-green) !important;
    }

    .ligne_entreprise_item.active .nom_entreprise_droite
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }


    .menu_detail_nospartenaires
    {
        width: 100%;
        box-sizing: border-box;
    }

    .zone_details_masquee
    {
        display: none !important;
    }

    .zone_details_masquee.visible_actif
    {
        display: block !important;
        border: var(--var-border) solid var(--var-color-black) !important;
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white) !important; /* CHANGÉ : Fond blanc */
        margin-top: 25px;
        padding: 20px;
        box-sizing: border-box;

        padding: 0px !important;

        overflow: hidden;

    }

    #id_secteur_tous_les_details .bouton_lien_externe_partenaire
    {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: var(--var-color-salmon) !important;
        text-decoration: none !important;
        font-family: var(--var-font-family) !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        font-family: var(--var-font-family) !important;

        align-self: center !important;

        /* Préparation de la boîte pour l'activation */
        padding: 10px 15px !important;
        border: var(--var-border) solid transparent !important; /* Évite les sauts de pixels au clic */
        border-radius: var(--var-border-radius) !important;
        background-color: transparent !important;
        box-sizing: border-box !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    #id_secteur_tous_les_details .bouton_lien_externe_partenaire.btn_active_jj
    {
        display: inline-flex !important; /* Strictement requis pour stabiliser le fond noir */
        background-color: var(--var-color-black) !important; /* Force le fond noir */
        color: var(--var-color-salmon) !important;          /* Force le texte saumon */
        border-color: var(--var-color-black) !important;
    }

    #id_secteur_tous_les_details .bouton_lien_externe_partenaire.btn_active_jj i
    {
        color: var(--var-color-salmon) !important;
    }

    .contenu_fiche_detail
    {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: var(--var-border) solid var(--var-color-black) !important;
        border-radius: var(--var-border-radius) !important;
        padding: 20px !important;
    }




    .contenu_fiche_detail h5,
    #id_secteur_tous_les_details .contenu_fiche_detail p
    {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #id_secteur_tous_les_details .contenu_fiche_detail p
    {
        width: 100% !important; /* Force la largeur identique au h5 */
        color: var(--var-color-black) !important;
        font-family: var(--var-font-family) !important;
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        margin: 0 !important; /* Supprime le margin-bottom pour laisser le gap de 20px bosser seul */
        display: block !important;
        box-sizing: border-box !important;
    }

    .encadre_detail_partenariat
    {
        display: none;
        width: 100%;
        box-sizing: border-box;
    }

    .encadre_detail_partenariat.active_fiche
    {
        display: block !important;
    }

    .contenu_fiche_detail h5
    {
        width: 100% !important; /* Aligné de force à gauche et à droite */
        font-size: 0.8rem;
        text-align: center;
        font-family: var(--var-font-family);
        color: var(--var-color-salmon);
        min-height: 70px;
        background-color: var(--var-color-blue-stat);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        margin: 0 !important; /* Reset strict des marges */
        line-height: 1.5;
        font-weight: 500;
        box-sizing: border-box;
    }

    .contenu_fiche_detail p
    {
        color: var(--var-color-white); /* Texte blanc lisible sur fond noir */
        font-family: var(--var-font-family);
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    #id_secteur_tous_les_details .contenu_fiche_detail p.puce_carre_detailpart
    {
        display: flex !important;
        align-items: center !important; /* Centre la puce verticalement par rapport à la première ligne */
        gap: 12px !important; /* Espace entre le carré saumon et votre texte */
    }

    #id_secteur_tous_les_details .contenu_fiche_detail p.puce_carre_detailpart::before
    {
        content: "" !important;
        display: inline-block !important;

        /* Dimensions du carré */
        width: 8px !important;
        height: 8px !important;

        /* Ne pas autoriser le carré à se déformer ou se rétrécir */
        flex-shrink: 0 !important;

        /* Style et couleur */
        background-color: var(--var-color-salmon) !important;
        border-radius: 2px !important; /* Légère courbure pour adoucir le carré */
    }

    .bouton_lien_externe_partenaire
    {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--var-color-orange);
        text-decoration: none;
        font-family: var(--var-font-family);
        font-size: 0.85rem;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .bouton_lien_externe_partenaire:hover
    {
        color: var(--var-color-orange-ecl);
    }






    /********************* Le Social  *********************/

    .menu_lesocial
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        margin: 25px 2px;
        padding: 10px;
        border: var(--var-border) solid var(--var-color-black);
        background-color: var(--var-color-white);
        border-radius: var(--var-border-radius);

    }

    .btn_lesocial
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 10px 5px;
        gap : 5px;
        width: 100%;

        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        font-family: var(--var-font-family);
        outline: none;
        -webkit-tap-highlight-color: transparent;

    }

    .btn_lesocial i
    {
        font-size: 1.0rem;
        margin-bottom: 5px;
    }

    .btn_lesocial span
    {
        font-size: 0.73rem;
        font-family: var(--var-font-family);
        letter-spacing: 0.5px;
    }

    .btn_lesocial.btn_active_jj,
    .btn_lesocial:focus,
    .btn_lesocial:active
    {
        /* CORRECTION : Fond noir et texte saumon comme pour la section partenaires */
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;

        /* Sécurité pour qu'aucun pixel ne bouge et que le cadre reste immobile */
        outline: none !important;
        border: var(--var-border) solid var(--var-color-black) !important;
    }

    .btn_lesocial.btn_active_jj i,
    .btn_lesocial.btn_active_jj span
    {
        color: var(--var-color-salmon) !important;
    }

    .dynamique_lesocial
    {
        margin-top: 25px;
        padding: 20px;
        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

    }

    .info_card_lesocial,
    .info_card_lesocial p,
    .card_texte_lesocial,
    .card_resume_lesocial,
    .titre-interne-lesocial
    {
        font-family: var(--var-font-family) !important;
        font-size: 0.8rem !important;
        line-height: 1.6 !important; /* L'interligne aéré unique */
        color: var(--var-color-black);
    }

    .info_card_lesocial
    {
        display: inline-block;
        min-width: 100%;
        text-align: left;
    }

    .card_header_lesocial
    {
        display: block;
        background-color: var(--var-color-blue-stat);
        color: var(--var-color-salmon);
        padding: 12px 15px;
        margin: 15px 0;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);

    }

    .card_texte_lesocial,
    .card_resume_lesocial
    {
        display: block;
        margin: 20px 0;
        text-align: left;
        line-height: 1.6 !important;
        white-space: normal;
    }

    .card_texte_lesocial div,
    .card_texte_lesocial p
    {
        margin: 0;
    }


    .ligne-titre-lesocial
    {
        display: flex;

        align-items: flex-start;
        margin-top: 30px !important ;
        margin-bottom: 10px !important;
    }

    .card_texte_lesocial div:not(.ligne-titre-lesocial)
    {
        margin: 0;
    }

    .ligne-titre-lesocial + text
    {
        display: block;
        margin-top: 10px;
    }

    .puce-carre-lesocial
    {
        width: 10px;
        height: 10px;
        background-color: var(--var-color-salmon);
        margin-right: 10px;
        flex-shrink: 0;
        border-radius: 2px;
        margin-top: 3px;

    }

    .titre-interne-lesocial
    {
        font-weight: 700 !important ;
        line-height: 1.2 !important; /* On réduit l'interligne du titre pour qu'il ne "pousse" pas la puce */
        display: inline-block;
        margin: 0;

    }



/********************* Nous Rejoindre  *********************/


    #id_menu_nousrejoindre
    {
        width: 100%;
        margin-top: 25px;
        padding: 15px 10px;
        margin-right: 15px ;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--var-color-white) ;

    }

    .groupe_boutons_rejoindre
    {
        display: flex;
        gap: 5px; /* Espace entre les deux colonnes */
        width: 100%; /* Important pour que le flex:1 fonctionne */
        justify-content: center;
        flex-wrap: nowrap; /* Force le maintien sur une seule ligne */
    }

    .btn_sous_nousrejoindre
    {
        /* Flexibilité pour le 2 colonnes / 1 ligne */
        flex: 1;
        min-width: 140px; /* Largeur minimale pour éviter l'écrasement */

        /* Alignement vertical (Icône sur Span) */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;

        /* Style et Bordures */
        padding: 15px 5px;
        background-color: var(--var-color-white);
        cursor: pointer;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        transition: all 0.3s ease;
    }

    .btn_sous_nousrejoindre span
    {
        font-family: var(--var-font-family);
        font-size: 0.73rem; /* Légèrement plus petit pour le mobile */
        text-align: center;
        color: var(--var-color-black);
        line-height: 1.2;
    }

    .btn_sous_nousrejoindre:active,
    .btn_sous_nousrejoindre.btn_active_jj
    {
        background-color: var(--var-color-black);
    }

    .btn_sous_nousrejoindre:active span,
    .btn_sous_nousrejoindre.btn_active_jj span
    {
        color: var(--var-color-salmon);
    }

    #section_flambeau
    {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-top: 25px;
        width: 100%;
        padding: 20px;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color:var(--var-color-white);
        font-family: var(--var-font-family);
    }

    .info_card_nousrejoindre
    {
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 20px;
        background-color: var(--var-color-white);
        display: flex;
        flex-direction: column;
        gap: 25px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .card_header_nousrejoindre,
    .card_texte_nousrejoindre,
    .form_nousrejoindre
    {
        width: 100%;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);
        box-sizing: border-box;
        font-family: var(--var-font-family);
        font-size: 0.8rem;

    }

    .card_header_nousrejoindre
    {
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        color: var(--var-color-salmon);
        background-color: var(--var-color-blue-stat) !important;


    }

    .card_texte_nousrejoindre
    {
        padding: 20px;
        font-size: 0.8rem;
        line-height: 1.6;
    }

    .form_nousrejoindre
    {
        padding: 25px;
        display: flex;
        flex-direction: column;
        gap: 25px;
        font-family: var(--var-font-family);
    }




    .zone_upload_nousrejoindre
    {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        width: 100%;
    }

    .zone_upload_nousrejoindre label
    {
        font-size: 0.8rem;
        width: fit-content;
        font-family: var(--var-font-family);
        display: block; /* On le passe en block pour stabiliser son encombrement */
        margin-left: 0 !important;
    }

    .zone_upload_nousrejoindre label:first-child
    {
        font-size: 0.8rem;
        width: fit-content;
        font-family: var(--var-font-family);
        display: block;
        margin: 0 !important; /* Force la suppression de toute marge parasite */
        padding: 0 !important; /* Force la suppression de tout padding parasite */
    }

    .badge_pdf
    {
        width: fit-content;
        display: block; /* S'assure qu'il se comporte comme un bloc propre */
        margin: 0 !important; /* Supprime toutes les marges pour s'aligner sur le label */
        margin-bottom: 5px !important; /* Gère uniquement l'espace avec le bouton en dessous */

        font-size: 0.7rem;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        padding: 3px 0; /* On met le padding horizontal à 0 pour coller parfaitement au texte */

        font-family: var(--var-font-family);
        align-self: flex-start !important;
    }

    .input_hidden
    {
        display: none;
    }

    .zone_upload_nousrejoindre .custom_file_click
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);
        height: 60px ;
        padding: 0px 20px;
        gap:8px ;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: var(--var-border-radius);
        cursor: pointer;
        font-weight: bold;
        box-sizing: border-box;
        border: var(--var-border) solid var(--var-color-black);
    }

    .file_status
    {
        font-size: 0.8rem;
        color: var(--var-color-black);
        margin-top: 5px;
    }



    .input_pdf_only
    {
        width: 100%;        /* Prend toute la largeur de la zone_upload */
        display: block;      /* S'assure qu'il se comporte comme un bloc complet */
        cursor: pointer;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        min-width: 300px;

    }

    .btn_valider_nousrejoindre
    {
        font-size: 0.8rem;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: var(--var-border) solid var(--var-color-black);
        font-size: 0.8rem;
        min-width: 100%;
        min-height: 80px ;
        font-weight: 700;
        border-radius: var(--var-border-radius) ;
        width: fit-content;      /* L'encadré s'adapte à la taille du texte */
        margin: 10px auto;
        margin-top: 25px ;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor:pointer ;
    }

    .btn_valider_nousrejoindre:hover
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon);
        border: var(--var-border) solid var(--var-color-black);
    }

    .card_texte_nousrejoindre textarea
    {
        width: 100%;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 10px;
        margin-top: 10px;
        font-family: inherit;
        hyphens: auto
        resize: vertical; /* Permet à l'utilisateur d'agrandir en hauteur seulement */
    }

    #section_bougie
    {
        width: 100%;
        margin-top: 25px;
        padding: 25px;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        background-color: var(--var-color-white);
    }

    #section_bougie .info_card_nousrejoindre
    {
        width: 100%;
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 25px; /* Espace régulier entre Header, Texte et Formulaire */
    }

    #section_bougie .card_header_nousrejoindre
    {
        background-color: var(--var-color-blue-stat);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        color: var(--var-color-salmon);
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 40px;
        font-size: 0.8rem;
        font-family: var(--var-font-family);

    }

    #section_bougie .card_texte_nousrejoindre
    {
        border: none; /* On retire explicitement la bordure */
        padding: 10px 0; /* Un peu d'espace haut/bas seulement */
    }

    #section_bougie .card_texte_nousrejoindre textarea
    {
        width: 100%;
        border: var(--var-border) solid var(--var-color-black); /* Le textarea lui-même reste encadré pour la saisie */
        border-radius: var(--var-border-radius);
        padding: 15px;
        margin-top: 10px;
        background: transparent;
        resize: none;
    }

    #section_bougie .form_nousrejoindre
    {
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    #section_bougie .custom_file_click
    {
        display: inline-flex;    /* Utilise flex pour aligner l'icône et le texte proprement */
        align-items: center;
        gap: 5px;
        font-size:0.75rem ;

        white-space: nowrap;     /* EMPÊCHE LE RETOUR À LA LIGNE (La solution clé) */
        width: fit-content;      /* Le bouton s'adapte à la largeur du texte */

        background-color: var(--var-color-black);
        color: var(--var-color-salmon);
        padding: 10px 10px;      /* Ajuste le padding si nécessaire */
        border-radius: var(--var-border-radius);
        border: var(--var-border) solid var(--var-color-black);
        cursor: pointer;

    }

    /* 4. LA ZONE UPLOAD : ENCADRÉ (à l'intérieur du formulaire) */
    #section_bougie .zone_upload_nousrejoindre
    {
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }


/********************* Partie Nous-Contactez  *********************/

.menu_contacteznous
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 25px 2px ;

    padding: 10px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: var(--var-color-white);

}

.btn_contacteznous
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 5px;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    width: 100%;
    box-sizing: border-box;
}

.btn_contacteznous.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border-color: var(--var-color-black);
}

.btn_contacteznous i
{
    font-size: 1.0rem;
    margin-bottom: 5px;
}

.btn_contacteznous.btn_active_jj i
{
    color: var(--var-color-salmon);
}

.btn_contacteznous span
{
    font-size: 0.73rem;
    text-align: center;
    font-family: var(--var-font-family);
}

.grille_contacteznous_typeclient
{
    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;
    gap: 5px;
    padding: 10px;
    width: 100%;
    max-width: 450px;
    margin: 0 0;
    box-sizing: border-box;

    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    position: relative;

}

#id_categories_lesocial::after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Taille adaptée au gap de 5px */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--var-color-orange);

    /* Filet blanc pour couper la superposition avec les bordures noires des boutons */
    border: 2px solid var(--var-color-white);
    z-index: 10;
}


#id_categories_lebusiness::after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Même taille pour une parfaite symétrie */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--var-color-blue);

    border: 2px solid var(--var-color-white);
    z-index: 10;
}



.btn_cat_lesocial,
.btn_cat_lebusiness
{
    display: flex;
    flex-direction: column; /* Force l'icône à se placer AU-DESSUS du texte */
    align-items: center;    /* Centre l'icône et le texte horizontalement */
    justify-content: center; /* Centre le contenu verticalement */
    gap:8px ;
    padding: 10px 5px;     /* Espace interne généreux pour le clic tactile */
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    cursor: pointer;
    box-sizing: border-box;

}

.btn_cat_lesocial i,
.btn_cat_lebusiness i
{
    font-size: 1.2rem;
    text-align: center;

}
.btn_cat_lesocial span,
.btn_cat_lebusiness span
{
    font-size: 0.73rem;
    text-align: center;
    font-family: var(--var-font-family);

}

.btn_cat_lesocial.btn_active_jj ,
.btn_cat_lebusiness.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border-color: var(--var-color-black);
}

.btn_cat_lesocial.btn_active_jj i ,
.btn_cat_lebusiness.btn_active_jj i
{
    color: var(--var-color-salmon);
}


.conteneur_formulaires_finaux
{
    width: 100%;
    max-width: 450px; /* Aligné sur la largeur max de votre .grille_contacteznous_typeclient */
    margin: 25px 0;   /* Cohérent avec vos marges existantes sans centrage forcé */
    box-sizing: border-box;
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 15px;

}


.titre_form_soc_part,
.titre_form_bus_part
{
    font-size: 0.9rem; /* Légèrement supérieur aux labels pour marquer la hiérarchie */
    font-family: var(--var-font-family);
    padding: 10px 15px;
    text-align: center ;
    background-color: var(--var-color-blue-stat);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    margin-top: 10px;      /* Supprime le décalage naturel du titre en haut */
    margin-bottom: 25px; /* Crée l'espace parfait avant le premier champ */
}

.form_soc_part,
.form_bus_part
{
    display: flex;
    flex-direction: column;
    gap: 15px; /* Écartement confortable mais compact, adapté à vos blocs de boutons */
    width: 100%;
    box-sizing: border-box;
}

.label_soc_part,
.label_bus_part
{
    font-size: 0.8rem; /* Alignement strict sur la taille de vos boutons existants */
    font-family: var(--var-font-family);

    color: var(--var-color-black);
}

.obligatoire_soc_part,
.obligatoire_bus_part
{
    color: var(--var-color-salmon); /* Utilisation de votre couleur d'accent pour la cohérence */
    margin-left: 2px;
}

.input_soc_part, .input_bus_part,
.select_soc_part, .select_bus_part,
.textarea_soc_part, .textarea_bus_part
{
    width: 100%;
    padding: 10px; /* Équivalent au padding interne de vos boutons */
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem; /* Un peu plus grand que les libellés pour le confort de lecture */
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}

.input_soc_part:focus, .select_soc_part:focus, .textarea_soc_part:focus,
.input_bus_part:focus, .select_bus_part:focus, .textarea_bus_part:focus
{
    background-color: #f5f5f5; /* Un gris très léger pour marquer la saisie sans casser la bordure noire */
    border-color: var(--var-color-black);
}

.input_soc_part::placeholder,
.textarea_soc_part::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}

.input_bus_part::placeholder,
.textarea_bus_part::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}


.textarea_soc_part,
.textarea_bus_part
{

    resize: vertical;
    min-height: 200px; /* Légèrement augmenté pour accueillir confortablement les 2 phrases */
    resize: vertical;
    line-height: 1.5;
}

.wrapper_indicatif_drapeau_soc
{
    display: flex;
    align-items: center;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
}

.zone_drapeau_img_soc
{
    width: 22px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.wrapper_indicatif_drapeau_soc .input_readonly_soc
{
    border: none !important;
    background: transparent !important;
    padding-left: 8px;
    width: 100%;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: not-allowed;
}

.btn_submit_soc_part,
.btn_submit_bus_part
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;

    /* Reprise stricte de la classe .btn_active_jj de votre extrait */
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    transition: opacity 0.2s;
    margin-top:25px ;
}

.btn_submit_soc_part.btn_active_jj,
.btn_submit_bus_part.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}


.btn_submit_soc_part:hover,
.btn_submit_bus_part:hover
{
    opacity: 0.9; /* Une légère variation d'opacité pour le retour utilisateur */
}

.select_soc_part, .select_bus_part
{
    width: 100%;
    padding: 10px;
    padding-right: 35px; /* Laisse l'espace de sécurité à droite pour la flèche */
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;

    /* Masque la flèche par défaut du système */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Injecte la flèche SVG Saumon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa8072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.select_soc_part:focus, .select_bus_part:focus
{
    background-color: #f5f5f5;
    border-color: var(--var-color-black);
}

/* --- Conteneur et Structure Globale (Social Entreprise) --- */
.form_soc_ent
{
    display: flex;
    flex-direction: column;
    gap: 15px; /* Écartement confortable mais compact, adapté à vos blocs de boutons */
    width: 100%;
    box-sizing: border-box;
}

.group_soc_ent
{
    display: flex;
    flex-direction: column;
    gap: 5px; /* Petit espace entre le label et son champ associé */
    width: 100%;
    box-sizing: border-box;
}

/* --- Badge Titre Centré --- */
.titre_form_soc_ent
{
    font-size: 0.9rem; /* Légèrement supérieur aux labels pour marquer la hiérarchie */
    font-family: var(--var-font-family);
    padding: 10px 15px;
    text-align: center;
    background-color: var(--var-color-blue-stat);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    margin-top: 10px;      /* Supprime le décalage naturel du titre en haut */
    margin-bottom: 25px; /* Crée l'espace parfait avant le premier champ */
}

/* --- Labels et Obligatoire --- */
.label_soc_ent
{
    font-size: 0.8rem; /* Alignement strict sur la taille de vos boutons existants */
    font-family: var(--var-font-family);
    color: var(--var-color-black);
}

.obligatoire_soc_ent
{
    color: var(--var-color-salmon); /* Utilisation de votre couleur d'accent pour la cohérence */
    margin-left: 2px;
}

/* --- Champs de Saisie --- */
.input_soc_ent,
.select_soc_ent,
.textarea_soc_ent
{
    width: 100%;
    padding: 10px; /* Équivalent au padding interne de vos boutons */
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem; /* Un peu plus grand que les libellés pour le confort de lecture */
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}

.input_soc_ent:focus,
.select_soc_ent:focus,
.textarea_soc_ent:focus
{
    background-color: #f5f5f5; /* Un gris très léger pour marquer la saisie sans casser la bordure noire */
    border-color: var(--var-color-black);
}

/* --- Placeholders --- */
.input_soc_ent::placeholder,
.textarea_soc_ent::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}

/* --- Zone de Message / Description --- */
.textarea_soc_ent
{
    resize: vertical;
    min-height: 200px; /* Aligné sur votre modèle pour accueillir confortablement les phrases */
    line-height: 1.5;
}

/* --- Composant Drapeau / Indicatif Unique --- */
.wrapper_indicatif_drapeau_soc
{
    display: flex;
    align-items: center;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
}

.zone_drapeau_img_soc
{
    width: 22px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.wrapper_indicatif_drapeau_soc .input_readonly_soc
{
    border: none !important;
    background: transparent !important;
    padding-left: 8px;
    width: 100%;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: not-allowed;
}

/* --- Bouton de Validation Massif --- */
.btn_submit_soc_ent
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* Grand bouton pour marquer la validation */
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    transition: opacity 0.2s;
    margin-top:25px;
}

.btn_submit_soc_ent.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_submit_soc_ent:hover
{
    opacity: 0.9; /* Légère variation d'opacité pour le retour utilisateur */
}

.select_soc_ent
{
    width: 100%;
    padding: 10px;
    padding-right: 35px; /* Espace de sécurité pour éviter la superposition du texte */
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;

    /* Masque la flèche native du système (Windows, Mac, iOS, Android) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Injecte la flèche SVG épurée en Noir (%23000000) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa8072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.select_soc_ent:focus
{
    background-color: #f5f5f5;
    border-color: var(--var-color-black);
}

/* ==========================================================================
   🌱 BRANCHE : SOCIAL — ORGANISATION (ONG / Association)
   ========================================================================== */

.form_soc_org
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}


.group_soc_org
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

.titre_form_soc_org
{
    font-size: 0.9rem;
    font-family: var(--var-font-family);
    padding: 10px 15px;
    text-align: center;
    background-color: var(--var-color-blue-stat);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    margin-top: 10px;
    margin-bottom: 25px;
}


.label_soc_org
{
    font-size: 0.8rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
}


.obligatoire_soc_org
{
    color: var(--var-color-salmon);
    margin-left: 2px;
}

.input_soc_org,
.textarea_soc_org
{
    width: 100%;
    padding: 10px;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}

.select_soc_org
{
    width: 100%;
    padding: 10px;
    padding-right: 35px; /* Espace de sécurité pour la flèche */
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;

    /* Masque la flèche par défaut */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Injecte le chevron Saumon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa8072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.input_soc_org:focus,
.select_soc_org:focus,
.textarea_soc_org:focus
{
    background-color: #f5f5f5;
    border-color: var(--var-color-black);
}

.input_soc_org::placeholder,
.textarea_soc_org::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}


.textarea_soc_org
{
    resize: vertical;
    min-height: 200px;
    line-height: 1.5;
}

.wrapper_indicatif_drapeau_soc
{
    display: flex;
    align-items: center;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
}

.zone_drapeau_img_soc
{
    width: 22px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.wrapper_indicatif_drapeau_soc .input_readonly_soc
{
    border: none !important;
    background: transparent !important;
    padding-left: 8px;
    width: 100%;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: not-allowed;
}

.btn_submit_soc_org
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    transition: opacity 0.2s;
    margin-top:25px;
}

.btn_submit_soc_org.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_submit_soc_org:hover
{
    opacity: 0.9;
}


/* ==========================================================================
   🌱 BRANCHE : SOCIAL — ÉTAT / INSTITUTIONNEL
   ========================================================================== */

.form_soc_gov
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.group_soc_gov
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

.titre_form_soc_gov
{
    font-size: 0.9rem;
    font-family: var(--var-font-family);
    padding: 10px 15px;
    text-align: center;
    background-color: var(--var-color-blue-stat);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    margin-top: 10px;
    margin-bottom: 25px;
}

.label_soc_gov
{
    font-size: 0.8rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
}

.obligatoire_soc_gov
{
    color: var(--var-color-salmon);
    margin-left: 2px;
}

.input_soc_gov,
.textarea_soc_gov
{
    width: 100%;
    padding: 10px;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}

.select_soc_gov
{
    width: 100%;
    padding: 10px;
    padding-right: 35px;
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa8072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.input_soc_gov:focus,
.select_soc_gov:focus,
.textarea_soc_gov:focus
{
    background-color: #f5f5f5;
    border-color: var(--var-color-black);
}

.input_soc_gov::placeholder,
.textarea_soc_gov::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}

.textarea_soc_gov
{
    resize: vertical;
    min-height: 200px;
    line-height: 1.5;
}

.btn_submit_soc_gov
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    transition: opacity 0.2s;
    margin-top:25px;
}

.btn_submit_soc_gov.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_submit_soc_gov:hover
{
    opacity: 0.9;
}

/* ==========================================================================
   🏢 BRANCHE : LE BUSINESS — ENTREPRISE (Calqué sur le modèle Social)
   ========================================================================== */

.form_bus_ent
{
    display: flex;
    flex-direction: column;
    gap: 15px; /* Écartement confortable mais compact, adapté à vos blocs de boutons */
    width: 100%;
    box-sizing: border-box;
}

.group_bus_ent
{
    display: flex;
    flex-direction: column;
    gap: 5px; /* Petit espace vertical entre le label et son champ associé */
    width: 100%;
    box-sizing: border-box;
}

.titre_form_bus_ent
{
    font-size: 0.9rem; /* Légèrement supérieur aux labels pour marquer la hiérarchie */
    font-family: var(--var-font-family);
    padding: 10px 15px;
    text-align: center;
    background-color: var(--var-color-blue-stat);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    margin-top: 10px;      /* Supprime le décalage naturel du titre en haut */
    margin-bottom: 25px; /* Crée l'espace parfait avant le premier champ */
}

.label_bus_ent
{
    font-size: 0.8rem; /* Alignement strict sur la taille de vos boutons existants */
    font-family: var(--var-font-family);
    color: var(--var-color-black);
}

.obligatoire_bus_ent
{
    color: var(--var-color-salmon); /* Utilisation de la couleur d'accent pour la cohérence */
    margin-left: 2px;
}

.comment_optionnel
{
    font-size: 0.75rem;
    color: #7f8c8d;
    font-style: italic;
    font-weight: normal;
    margin-left: 4px;
}

.input_bus_ent,
.select_bus_ent,
.textarea_bus_ent
{
    width: 100%;
    padding: 10px; /* Équivalent au padding interne de vos boutons */
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.75rem; /* Un peu plus grand que les libellés pour le confort de lecture */
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}

.input_bus_ent:focus,
.select_bus_ent:focus,
.textarea_bus_ent:focus
{
    background-color: #f5f5f5; /* Un gris très léger pour marquer la saisie sans casser la bordure noire */
    border-color: var(--var-color-black);
}

.select_bus_ent
{
    width: 100%;
    padding: 10px;
    padding-right: 35px; /* ⚠️ Important : laisse de l'espace à droite pour que le texte ne chevauche pas la flèche */
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;

    /* 1️⃣ Étape 1 : On masque la flèche d'origine du navigateur */
    -webkit-appearance: none; /* Pour Safari et Chrome */
    -moz-appearance: none;    /* Pour Firefox */
    appearance: none;         /* Standard */

    /* 2️⃣ Étape 2 : On injecte une flèche en SVG couleur Saumon en arrière-plan */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa8072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Positionne la flèche à 12px du bord droit */
    background-size: 16px; /* Taille de la petite flèche */
}

/* --- Optionnel : Changement de fond au focus (on garde la flèche) --- */
.select_bus_ent:focus
{
    background-color: #f5f5f5;
    border-color: var(--var-color-black);
}

/* --- Placeholders --- */
.input_bus_ent::placeholder,
.textarea_bus_ent::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}

/* --- Zone de Message / Cahier des charges --- */
.textarea_bus_ent
{
    resize: vertical;
    min-height: 200px; /* Aligné sur votre modèle pour accueillir confortablement le texte */
    line-height: 1.5;
}

/* --- Composant Drapeau / Indicatif Unique --- */
.wrapper_indicatif_drapeau_bus
{
    display: flex;
    align-items: center;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
}

.zone_drapeau_img_bus
{
    width: 22px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.wrapper_indicatif_drapeau_bus .input_readonly_bus
{
    border: none !important;
    background: transparent !important;
    padding-left: 8px;
    width: 100%;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: not-allowed;
}

/* --- Bouton de Validation Massif --- */
.btn_submit_bus_ent
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* Grand bouton pour marquer la validation */
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    transition: opacity 0.2s;
    margin-top:25px;
}

.btn_submit_bus_ent.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_submit_bus_ent:hover
{
    opacity: 0.9; /* Légère variation d'opacité pour le retour utilisateur au survol */
}

/* ==========================================================================
   🏢 BRANCHE : BUSINESS — ORGANISATION (Supra-structures)
   ========================================================================== */

.form_bus_org
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}


.group_bus_org
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

/* --- Badge Titre Centré --- */
.titre_form_bus_org
{
    font-size: 0.9rem;
    font-family: var(--var-font-family);
    padding: 10px 15px;
    text-align: center;
    background-color: var(--var-color-blue-stat);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    margin-top: 10px;
    margin-bottom: 15px;
}

/* --- Labels et Mentions --- */
.label_bus_org
{
    font-size: 0.8rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
}

.obligatoire_bus_org
{
    color: var(--var-color-salmon);
    margin-left: 2px;
}

/* --- Champs de Saisie (Inputs, Textareas) --- */
.input_bus_org,
.textarea_bus_org
{
    width: 100%;
    padding: 10px;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}

/* --- Menu Déroulant (Sélecteur flèche Saumon) --- */
.select_bus_org
{
    width: 100%;
    padding: 10px;
    padding-right: 35px; /* Espace de sécurité pour la flèche */
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;

    /* Masque la flèche par défaut */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Injecte le chevron Saumon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa8072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.input_bus_org:focus,
.select_bus_org:focus,
.textarea_bus_org:focus
{
    background-color: #f5f5f5;
    border-color: var(--var-color-black);
}

/* --- Placeholders --- */
.input_bus_org::placeholder,
.textarea_bus_org::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}

.textarea_bus_org
{
    resize: vertical;
    min-height: 200px;
    line-height: 1.5;
}

/* --- Composant Drapeau / Indicatif (Réutilisation du wrapper global bus) --- */
.wrapper_indicatif_drapeau_bus .input_readonly_bus
{
    border: none !important;
    background: transparent !important;
    padding-left: 8px;
    width: 100%;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: not-allowed;
}

/* --- Bouton de Validation Massif --- */
.btn_submit_bus_org
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    transition: opacity 0.2s;
}

.btn_submit_bus_org.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_submit_bus_org:hover
{
    opacity: 0.9;
}

/* ==========================================================================
   🏢 BRANCHE : BUSINESS — ÉTAT / COMMANDE PUBLIQUE
   ========================================================================== */

.form_bus_gov
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.group_bus_gov
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

.titre_form_bus_gov
{
    font-size: 0.9rem;
    font-family: var(--var-font-family);
    padding: 10px 15px;
    text-align: center;
    background-color: var(--var-color-blue-stat);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    margin-top: 10px;
    margin-bottom: 15px;
}

.label_bus_gov
{
    font-size: 0.8rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
}

.obligatoire_bus_gov
{
    color: var(--var-color-salmon);
    margin-left: 2px;
}

.input_bus_gov,
.textarea_bus_gov
{
    width: 100%;
    padding: 10px;
    background: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}

.select_bus_gov
{
    width: 100%;
    padding: 10px;
    padding-right: 35px;
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-size: 0.85rem;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa8072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.input_bus_gov:focus,
.select_bus_gov:focus,
.textarea_bus_gov:focus
{
    background-color: #f5f5f5;
    border-color: var(--var-color-black);
}

.input_bus_gov::placeholder,
.textarea_bus_gov::placeholder
{
    color: #7f8c8d;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    opacity: 0.75;
    font-style: italic;
}

.textarea_bus_gov
{
    resize: vertical;
    min-height: 200px;
    line-height: 1.5;
}

.btn_submit_bus_gov
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    transition: opacity 0.2s;
    margin-top:25px ;
}


.btn_submit_bus_gov.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_submit_bus_gov:hover
{
    opacity: 0.9;
}

/************************************************************************************/
/* Partie S'inscrire */
/************************************************************************************/

.menu_sinscrire
{
    display: none;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes fluides pour le format 2x2 */
    gap: 5px;                      /* Espace entre les boutons */
    margin: 25px 2px ;
    padding: 10px;

    box-sizing: border-box;

    /* Encadrement et couleurs basés sur vos variables */
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);

    position: relative;
}

.menu_sinscrire.visible
{
    display: grid !important;              /* Force l'affichage en Grid 2x2 */
}

/* 🔵 LA BILLE BLEUE (Inscription) */
.menu_sinscrire::after {
    content: "";
    position: absolute;

    /* Calage parfait au centre mort du conteneur */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Dimensions de la bille */
    width: 8px;
    height: 8px;

    /* Design de la bille */
    background-color: var(--var-color-salmon) ; /* Ton bleu signature / focus */

    border-radius: 50%;

    /* Sécurité pour qu'elle passe au-dessus des bordures des boutons */
    z-index: 10;
    pointer-events: none; /* Évite de bloquer le clic sur les boutons juste en dessous */
}

.btn_sinscrire
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap:5px ;
    padding: 10px 5px;

    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_sinscrire i
{
    font-size: 1.2rem;                     /* Taille ajustée pour les écrans de smartphones */
    color: var(--var-color-black) ;                      /* Votre bleu signature */
}

.btn_sinscrire span
{
    font-size: 0.73rem;                       /* Lisibilité parfaite sur mobile */
    font-family: var(--var-font-family);
    text-align: center;
    padding: 0 5px;
}

.menu_formulaires_sinscrire
{
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contenu_formulaire_sinscrire
{
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 15px;

    width: 100%;
    box-sizing: border-box;

}

.contenu_formulaire_sinscrire h5
{
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    margin-top: 0;
    width:100% ;
    box-sizing: border-box;
    font-size: 0.8rem;
    margin-top: 20px;

    border-bottom: 20px ;
    padding: 15px ;

    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    text-align: center;
    font-family: var(--var-font-family);

    background-color: var(--var-color-blue-stat);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    color: var(--var-color-salmon);
}

.liste_modalites_sinscrire
{
    list-style-type: none; /* 🌟 Force les puces à être carrées */
    margin: 0 0 20px 0px;   /* Marge externe : 20px en bas et à gauche pour le retrait */
    padding: 0;
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.liste_modalites_sinscrire li
{
    font-size: 0.75rem;
    line-height: 1.4;
    /* 🌟 CORRECTION : On repasse en positionnement relatif avec un padding à gauche pour laisser la place à la puce */
    position: relative;
    padding-left: 15px;
}

.liste_modalites_sinscrire li::before
{
    content: "";

    position: absolute;
    left: 0;
    top: 4px;

    width: 8px;
    height: 8px;
    background-color: var(--var-color-salmon);
    border-radius: 2px;
    flex-shrink: 0;
}

.asterisque_obligatoire
{
    color: var(--var-color-salmon);
    font-weight: bold; /* Optionnel : pour qu'il ressorte encore mieux */
}

.btn_valider_sinscrire
{
    display: inline-block;
    width: 100%;

    margin: 20px auto 0 auto;     /* Le centre horizontalement */
    padding: 10px 20px;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    min-height: 80px ;
    color: var(--var-color-black) !important;
    background-color: var(--var-color-white) !important;
    border: var(--var-border) solid var(--var-color-black) !important;
    border-radius: var(--var-border-radius);
    text-align: center;
    cursor: pointer;

}

.btn_valider_sinscrire.btn_active_jj
{
    background-color: var(--var-color-black) !important;
    color: var(--var-color-salmon) !important;
    border-color: var(--var-color-black) !important;
}



/* Niveau 4 */
.menu_saisie_formulaires_sinscrire
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    margin-top : 25px ;
}

.contenu_formulaire_sinscrire_detail
{
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 15px;               /* Même espace interne pour s'aligner sur les bords */

    width: 100%;
    box-sizing: border-box;      /* Sécurité absolue contre le débordement sur smartphone */
}

.contenu_formulaire_sinscrire_detail h5
{
    font-family: var(--var-font-family);
    color: var(--var-color-black);
    margin-top: 0;
    width:100% ;
    box-sizing: border-box;
    font-size: 0.8rem;
    margin-top: 20px;

    border-bottom: 20px ;
    padding: 15px ;

    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    text-align: center;
    font-family: var(--var-font-family);

    background-color: var(--var-color-blue-stat);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    color: var(--var-color-salmon);
}


.grille_formulaire_sinscrire
{
    display: flex;
    flex-direction: column;
    gap: 15px;                   /* Espace régulier entre chaque champ */
    width: 100%;
}

.groupe_saisie_form,
.groupe_saisie_form_large
{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.grille_formulaire_sinscrire label
{
    font-family: var(--var-font-family);
    font-size: 0.75rem;

    color: var(--var-color-black);
    margin-bottom: 6px;
}

.asterisque_obligatoire
{
    color: var(--var-color-salmon);
    font-weight: bold;
    margin-left: 2px;
}

.grille_formulaire_sinscrire input[type="text"],
.grille_formulaire_sinscrire input[type="email"],
.grille_formulaire_sinscrire input[type="password"],
.grille_formulaire_sinscrire input[type="tel"],
.grille_formulaire_sinscrire select
{
    width: 100%;
    height: 45px;                /* Hauteur idéale pour le confort des doigts */
    padding: 10px;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: var(--var-color-white);
}

.grille_formulaire_sinscrire input:focus,
.grille_formulaire_sinscrire select:focus
{
    outline: none;
    border-color: var(--var-color-black);
    background-color: var(--var-color-white);
}


.critere_mdp_unique
{
    display: inline-flex;
    align-items: flex-start;   /* Aligne la bille sur la première ligne du texte si la phrase se coupe */
    font-family: var(--var-font-family);
    font-size: 0.75rem;        /* Taille réduite idéale pour smartphone */
    color: #666666;            /* Gris discret pour ne pas surcharger */
    line-height: 1.3;          /* Donne un peu de respiration à la phrase */
    text-align: left;
}


.critere_mdp_unique::before
{
    content: "";
    display: inline-block;
    width: 8px;                /* Taille de la bille */
    height: 8px;
    margin-right: 8px;         /* Écart entre la bille et le début de la phrase */
    margin-top: 3px;           /* Centre légèrement la bille par rapport à la première ligne de texte */
    border-radius: 50%;        /* Rend le bloc parfaitement sphérique */

    /* Effet 3D identique : point lumineux blanc en haut à gauche qui fond dans le saumon */
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-salmon) 60%, #c45345 100%);

    /* Ombre subtile sous la bille pour le relief */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

    flex-shrink: 0;            /* Empêche la bille de s'écraser si la phrase s'affiche sur 2 ou 3 lignes */
}

.indicateur_confirmation_mdp
 {
    display: block;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
}

.critere_conf_mdp_unique
{
    display: inline-flex;
    align-items: flex-start;
    font-family: var(--var-font-family);
    font-size: 0.75rem;
    line-height: 1.3;
    transition: color 0.25s ease;
}

.critere_mdp_unique::before
{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    margin-top: 3px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink:0 ;
    transition: background 0.25s ease;
 }

.critere_mdp_unique.status_ko
{
    color: #666666;
}

.critere_mdp_unique.status_ko::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-salmon) 60%, #c45345 100%);
}

/* État OK : Bille Verte */
.critere_mdp_unique.status_ok
{
    color: #2e7d32;
}

.critere_mdp_unique.status_ok::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #4caf50 60%, #2e7d32 100%);
}

.critere_conf_mdp_unique::before
{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    margin-top: 3px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.critere_conf_mdp_unique.status_ko
{
    color: #666666; /* Message discret tant que c'est KO */
}
.critere_conf_mdp_unique.status_ko::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-salmon) 60%, #c45345 100%);
}

/* --- ÉTAT 2 : MOT DE PASSE OK (Style Vert Réussite) --- */
.critere_conf_mdp_unique.status_ok
{
    color: #2e7d32; /* Vert foncé textuel pour la lisibilité */
}
.critere_conf_mdp_unique.status_ok::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #4caf50 60%, #2e7d32 100%);
}

.conteneur_code_pin_4chiffres
{
    display: flex;
    flex-direction: column;         /* 1. Force l'indicateur à se mettre EN DESSOUS des cases */
    width: 100%;                    /* S'étire sur toute la largeur disponible */
    margin-top: 8px;
    box-sizing: border-box;
}

.case_code_pin
{
    flex: 1;                     /* Force les 4 cases à s'étirer équitablement pour prendre tout l'espace */
    height: 45px !important;     /* Conserve la même hauteur exacte que tes autres inputs */
    max-width: 80px;             /* Sécurité pour éviter qu'ils ne deviennent trop larges si l'écran est grand */
    text-align: center;          /* Centre le chiffre au milieu du rectangle */
    font-family: var(--var-font-family);
    font-size: 1.2rem;
    font-weight: bold;

    /* Intégration à ta charte graphique */
    background-color: #fbfbfb;
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);

    padding: 0;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.indicateur_validation_pin
{
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.critere_pin_unique
{
    display: inline-flex;
    align-items: center;
    font-family: var(--var-font-family);
    font-size: 0.75rem;
    line-height: 1.3;
    transition: color 0.25s ease;
}

.critere_pin_unique::before
{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.critere_pin_unique.status_ko
{
    color: #666666;
}

.critere_pin_unique.status_ko::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-salmon) 60%, #c45345 100%);
}

/* --- ÉTAT 2 : CODE COMPLET (Style Vert Réussite) --- */
.critere_pin_unique.status_ok
{
    color: #2e7d32;
}

.critere_pin_unique.status_ok::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #4caf50 60%, #2e7d32 100%);
}


.case_code_pin:focus
{
    outline: none;
    border-color: var(--var-color-salmon); /* Devient saumon pour montrer la case active */
    background-color: var(--var-color-white);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}


.bloc_les_4_cases                  /* 2. Correction : Ajout du point "." oublié pour la classe */
{
    display: flex;
    justify-content: space-between; /* Distribue tes 4 cases du bord gauche au bord droit */
    gap: 10px;                      /* Espace fixe entre les cases */
    width: 100%;                    /* Occupe toute la largeur du conteneur parent */
    margin-bottom: 8px;
}

.bloc_telephone_international
{
    display: flex;
    justify-content: space-between; /* Aligne le premier élément à gauche et le dernier à droite */
    align-items: center;
    gap: 5px;                       /* Séparation subtile et uniforme entre chaque encadré */
    width: 100%;                    /* S'étire sur 100% de la largeur du formulaire */
    box-sizing: border-box;
}

.encadre_tel_element
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 45px;                   /* Même hauteur exacte que tous tes autres inputs */
    padding: 0 12px;
    background-color: var(--var-color-white) ;
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    white-space: nowrap;            /* Évite que l'indicatif ne passe à la ligne */
    box-sizing: border-box;
}

.champ_telephone_saisie
{
    flex: 1;                        /* Force l'input à s'étirer pour coller à l'extrême droite */
    height: 45px !important;        /* Conserve l'alignement de hauteur */
    padding: 10px 14px;
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    color: var(--var-color-black);
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black) !important;
    border-radius: var(--var-border-radius);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.champ_telephone_saisie:focus
{
    outline: none;
    border-color: var(--var-color-black);
    background-color: var(--var-color-white);
}


.btn_valider_sinscrire_final
{
    /* 1. Alignement et étirement parfait à gauche et à droite */
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height:80px ;
    /* 2. Espacement vertical pour détacher le bouton du bloc Code PIN */
    margin: 40px 0 0 0;

    /* 3. Dimension et confort de clic sur smartphone */
    height: 50px; /* Légèrement plus haut que les inputs pour marquer l'importance */
    padding: 0 20px;

    /* 4. Typographie */
    font-family: var(--var-font-family);
    font-size: 0.8rem;

    text-align: center;

    /* 5. Couleurs de base (Fond noir, texte blanc, bordure noire) */
    background-color: var(--var-color-white) !important;
    color: var(--var-color-black) !important;
    border: var(--var-border) solid var(--var-color-black) !important;
    border-radius: var(--var-border-radius);

    /* 6. Finitions */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Supprime le flash bleu natif sur mobile au clic */
    transition: all 0.25s ease-in-out;
}

/* 7. Effet au survol (ou au clic prolongé sur smartphone) */
.btn_valider_sinscrire_final:hover,
.btn_valider_sinscrire_final:active
{
    background-color: var(--var-color-black) !important;
    color: var(--var-color-salmon) !important;
    border: var(--var-border) solid var(--var-color-black) !important;
}


.grille_formulaire_sinscrire select,
select[name="civilite"],
.js_select_pays
{
    /* 1. On masque la flèche native grise par défaut (iOS, Android, Chrome) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 2. On injecte une flèche saumon épurée via un SVG en arrière-plan */
    /* La couleur #f67280 correspond à ton saumon (à ajuster avec ton code hexa exact si besoin) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f67280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");

    /* 3. Positionnement précis de la nouvelle flèche à l'extrême droite */
    background-repeat: no-repeat;
    background-position: right 15px center; /* Placé à 15px du bord droit, centré verticalement */
    background-size: 16px; /* Taille subtile et élégante de la flèche */

    /* 4. Sécurité pour que le texte de l'option ne chevauche pas la flèche */
    padding-right: 40px !important;

    /* On conserve tes bases pour l'harmonie sur smartphone */
    width: 100%;
    height: 45px;
    padding-left: 10px;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: #fbfbfb;
}

/* Correctif spécifique pour Internet Explorer / Edge au cas où */
.grille_formulaire_sinscrire select::-ms-expand
{
    display: none;
}


.bouton_en_chargement
{
    background-color: #cccccc !important; /* Le fond devient gris neutre */
    color: #ffffff !important;           /* Le texte passe en blanc */
    cursor: not-allowed !important;      /* Curseur de survol "Interdit" */
    opacity: 0.8;
    transition: background-color 0.2s ease;
}



/************************************************************************************/
/* Partie Se Connecter */
/************************************************************************************/

.menu_seconnecter
{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes fluides pour le format 2x2 */
    gap: 5px;                      /* Espace entre les boutons */
    margin: 25px 2px ;
    padding: 10px;

    box-sizing: border-box;

    /* Encadrement et couleurs basés sur vos variables */
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);

    position: relative;
}

.menu_seconnecter::after {
    content: "";
    position: absolute;

    /* Calage parfait au centre mort du conteneur */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Dimensions de la bille */
    width: 8px;
    height: 8px;

    /* Design de la bille */
    background-color: #00cc66; /* Vert validation standard */

    border-radius: 50%;

    /* Sécurité */
    z-index: 10;
    pointer-events: none;
}

.non_visible
{
    display: none !important;
}

.btn_seconnecter
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap:5px ;
    padding: 10px 5px;
    cursor: pointer; /* Petit bonus pour le curseur main au survol */

    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.btn_seconnecter i
{
    font-size: 1.2rem;                     /* Taille ajustée pour les écrans de smartphones */
    color : var(--var-color-black) ;                     /* Votre bleu signature */
}

.btn_seconnecter span
{
    font-size: 0.73rem;                       /* Lisibilité parfaite sur mobile */
    font-family: var(--var-font-family);
    text-align: center;
    padding: 0 5px;
}


/* Branche du Niveau 3 */

/* 1. Div X : Le conteneur général du Niveau 3 */

.identifier_connexion
{
    width: 100%;
    margin: 20px 2px;
    box-sizing: border-box;
}

.bloc_profil_connexion
{
    display: grid !important; /* Force l'affichage en grille quand la classe non_visible est retirée */
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes d'égale largeur */
    gap: 5px; /* Espace uniforme entre les 3 boutons */
    width: 100%;
    box-sizing: border-box;
    width: calc(100% - 4px);
    padding: 10px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.groupe_icones_bouton
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px; /* Espacement horizontal harmonieux entre les deux icônes */
    width: 100%;
}

/* On applique la même taille aux deux icônes du groupe */
.groupe_icones_bouton i
{
    font-size: 1.2rem;
    color: var(--var-color-black);
}

.btn_action_connexion
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    font-family: var(--var-font-family);
    border-radius: var(--var-border-radius);
    cursor: pointer;
    box-sizing: border-box;

}

.btn_action_connexion i
{
    font-size: 1.2rem; /* Légèrement plus grand pour détacher l'icône */
}

.btn_action_connexion span
{
    font-size: 0.75rem;
    text-align: center;
    font-family: var(--var-font-family);

}

.btn_secondaire
{
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
}

.btn_secondaire i
{
    color: var(--var-color-black);
}

.btn_principal
{
    grid-column: span 2;
    display: flex;
    flex-direction: column; /* Aligne le groupe d'icône AU-DESSUS du span */
    justify-content: center;
    align-items: center;
    gap: 8px; /* Espace vertical entre le groupe d'icônes et le texte */

    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
}

.btn_principal i
{
    color: var(--var-color-black);
}



/* Branche du Niveau 4 */

/* 1. Div X : Le conteneur général du Niveau 4 */


#id_zone_canaux_global
{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1 ligne, 3 colonnes égales */
    gap: 10px;                             /* Espace régulier entre les boutons */
    width: 100%;

    max-width: 420px;

    margin: 20px 0px;

    padding: 15px 10px;
    box-sizing: border-box;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);


}

.btn_canal_option
{
    display: flex;
    flex-direction: column;                /* Aligne l'icône VERTICALEMENT au-dessus du texte */
    align-items: center;                   /* Centrage horizontal parfait */
    justify-content: center;               /* Centrage vertical parfait */
    padding: 14px 8px;                     /* Confort de clic optimal sur Smartphone */
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-family: var(--var-font-family);

    font-size: 0.75rem;

    cursor: pointer;

}

.btn_canal_option i
{
    font-size: 1.0rem;
    margin-bottom: 6px;
    color: var(--var-color-black);
    transition: transform 0.2s ease;
}


.btn_canal_option.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon)
    border-color: var(--var-color-black) ;
}

.btn_canal_option.btn_active_jj i
{
    color: var(--var-color-salmon)

}


/* Branche du Niveau 4 - 2 et 4 - 3*/

/* 1. Div X : Le conteneur général du Niveau 4 */

#id_zone_recup_mdp_global,
#id_zone_recup_code_global
{
    display: grid !important;              /* Force l'affichage en grille quand la classe non_visible est retirée */
    grid-template-columns: repeat(2, 1fr); /* 1 ligne, 2 colonnes égales (50% / 50%) */
    gap: 10px;                             /* Conserve le même espace régulier entre les boutons */
    width: 100%;
    max-width: 420px;
    margin: 20px 0px;
    padding: 15px 10px;
    box-sizing: border-box;

    /* Copie conforme du design de ton conteneur 4-1 pour l'harmonisation */
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

/* Ajustements légers pour les boutons à l'intérieur des Niveaux 4-2 et 4-3 */
#id_zone_recup_mdp_global .btn_canal_option,
#id_zone_recup_code_global .btn_canal_option
{
    /* Ils héritent déjà de toutes les propriétés de .btn_canal_option (hauteur, police, curseur) */
    /* On ajuste juste le padding pour être sûr que le texte "Récupérer via SMS/Email" tienne sur smartphone */
    padding: 14px 4px;
}

/* Gestion du comportement au clic pour les boutons du 4-2 et 4-3 */
#id_zone_recup_mdp_global .btn_canal_option.btn_active_jj,
#id_zone_recup_code_global .btn_canal_option.btn_active_jj
{
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
    border-color: var(--var-color-black);
}

#id_zone_recup_mdp_global .btn_canal_option.btn_active_jj i,
#id_zone_recup_code_global .btn_canal_option.btn_active_jj i
{
    color: var(--var-color-salmon);
}

/*****Formulaire de saisie récupération mot de passe ou code secret oublié****/

.formulaire_saisie_connexion
{
    display: flex;
    flex-direction: column;
    gap: 15px;                 /* Espacement équilibré entre le champ et le bouton */
    width: 100%;
    background-color: var(--var-color-white) ; /* Fond blanc épuré */
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 20px;             /* Respiration interne optimale sur mobile */
    box-sizing: border-box;
    margin-top: 15px;          /* Distance propre avec l'ascenseur du Niveau 4 */

}

.groupe_saisie_jj
{
    display: flex;
    flex-direction: column;
    gap: 8px;                  /* Espacement sémantique labélisation */
    width: 100%;
}

.groupe_saisie_jj label
{
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    color: var(--var-color-black);
    text-align: left;
    font-family: var(--var-font-family);
}

.groupe_saisie_jj input[type="email"]
{
    width: 100%;
    height: 50px;              /* Hauteur "confort de clic" parfaite pour les pouces */

    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
    border: var(--var-border) solid var(--var-color-black) ;
    border-radius: var(--var-border-radius);
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    color: var(--var-color-black);
    background-color: var(--var-color-white); /* Léger gris de fond pour inciter à la saisie */

    outline: none;
}

.groupe_saisie_jj input[type="email"]:focus
{
    border-color: var(--var-color-black);
    background-color: var(--var-color-white);

}

/* Ajustement du placeholder */
.groupe_saisie_jj input[type="email"]::placeholder
{
    color: var(--var-color-black);
    font-size: 0.8rem;
    font-family: var(--var-font-family);
}

#btn_soumettre_mdp_email,
#btn_soumettre_code_email
{
    width: 100%;               /* Force le bouton à prendre toute la largeur du cadre */
    display: flex;
    justify-content: center;   /* Centre horizontalement le texte à l'intérieur */
    align-items: center;       /* Centre verticalement le texte */
    box-sizing: border-box;    /* Sécurité pour que le padding n'élargisse pas le bouton au-delà du cadre */

    /* Optionnel : Ajustement de la hauteur pour correspondre à tes standards premium */
    height: 80px;
    margin-top: 5px;
}

/* Sécurité pour le texte à l'intérieur du bouton sur les petits écrans */
#btn_soumettre_mdp_email span,
#btn_soumettre_code_email span
{
    text-align: center;
    white-space: normal;
    font-size: 0.8rem;         /* Ajuste légèrement si le texte est trop long sur de très petits smartphones */
    white-space: normal;       /* Permet au texte de passer à la ligne proprement si l'écran est très étroit */
}


/* =========================================================================
   🧱 HARMONISATION DU MODÈLE DE BOÎTE GLOBAL (NIVEAUX 3, 4, 5)
   ========================================================================= */

/* On applique la même règle de largeur maximale et de centrage à tous les blocs principaux */
.identifier_connexion,
#id_zone_canaux_global,
#id_zone_recup_mdp_global,
#id_zone_recup_code_global,
.formulaire_saisie_connexion {
    width: 100% !important;
    max-width: 420px;                     /* Alignement parfait de la largeur max */
    margin-left: auto !important;          /* Centrage horizontal parfait à gauche */
    margin-right: auto !important;         /* Centrage horizontal parfait à droite */
    box-sizing: border-box !important;
}

/* =========================================================================
   🎰 BRANCHE DU NIVEAU 3 (CORRECTION)
   ========================================================================= */

.identifier_connexion {
    margin-top: 20px;
    margin-bottom: 20px;
}

.bloc_profil_connexion {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    width: 100% !important;               /* 🎯 Suppression du calc(100% - 4px) qui décalait la bordure */
    padding: 10px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    box-sizing: border-box !important;
}

/* =========================================================================
   📡 BRANCHE DU NIVEAU 4 (CORRECTION)
   ========================================================================= */

#id_zone_canaux_global,
#id_zone_recup_mdp_global,
#id_zone_recup_code_global {
    display: grid !important;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px 10px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

#id_zone_canaux_global {
    grid-template-columns: repeat(3, 1fr);
}

#id_zone_recup_mdp_global,
#id_zone_recup_code_global {
    grid-template-columns: repeat(2, 1fr);
}

/* =========================================================================
   📝 BRANCHE DU NIVEAU 5 (CORRECTION)
   ========================================================================= */

.carte_formulaire_auth {
    width: 100%;
    max-width: 420px;
    margin: 20px auto 0 auto;
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 25px; /* Espace interne de respiration */
    box-sizing: border-box; /* Sécurité anti-débordement totale */
}

.carte_formulaire_auth .formulaire_saisie_connexion_auth {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

.carte_formulaire_auth .groupe_saisie_jj_auth {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

.carte_formulaire_auth .groupe_saisie_jj_auth label {
    font-family: var(--var-font-family);
    font-size: 0.8rem;

    margin-bottom: 6px;
    color: var(--var-color-black);
}

/* Style universel des champs de saisie natifs */
.carte_formulaire_auth .js_select_pays_auth,
.carte_formulaire_auth .champ_standard_saisie_auth,
.carte_formulaire_auth .groupe_saisie_jj_auth input[type="password"] {
    height: 50px;
    padding: 0 15px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: var(--var-color-white);
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    outline: none;
    box-sizing: border-box;
    width: 100%;

}

.carte_formulaire_auth .js_select_pays_auth:focus,
.carte_formulaire_auth .champ_standard_saisie_auth:focus,
.carte_formulaire_auth .groupe_saisie_jj_auth input[type="password"]:focus {
    border-color: #0056b3;
}

/* 📞 BLOC TÉLÉPHONE INTERNATIONAL - SÉCURISÉ CONTRE LES DÉBORDEMENTS */
.carte_formulaire_auth .bloc_telephone_international_auth {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.carte_formulaire_auth .encadre_tel_element_auth {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: #f8f9fa;
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    box-sizing: border-box;
}

.carte_formulaire_auth .js_drapeau_visuel_auth
{
    min-width: 65px;
    max-width: 65px;
    font-size: 1.2rem;
}

.carte_formulaire_auth .js_indicatif_visuel_auth {
    min-width: 65px;
    max-width: 65px;

    padding: 0 4px;
}

/* Fix de l'étirement : width: 0 permet au flex-grow de calculer l'espace interne strict */
.carte_formulaire_auth .champ_telephone_saisie_auth {
    flex: 1;
    width: 0;
    min-width: 0;
    height: 50px;
    padding: 0 15px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}

/* 🔑 RECTANGLES DU CODE SECRET À 4 CHIFFRES (CIBLAGE UNIVERSEL ASSURÉ) */
.carte_formulaire_auth .conteneur_code_pin_4chiffres_auth {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.carte_formulaire_auth .bloc_les_4_cases_auth {
    display: flex;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Sélecteur simplifié et direct pour contourner les conflits de double classe HTML */
.carte_formulaire_auth input.case_code_pin_auth {
    display: block;
    flex: 1;
    width: 0; /* Évite que la taille native de l'input texte ne casse la grille */
    height: 50px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: var(--var-color-white);
    font-family: var(--var-font-family);
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    outline: none;
    box-sizing: border-box;

}

.carte_formulaire_auth input.case_code_pin_auth:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}

.carte_formulaire_auth .indicateur_validation_pin_auth
{
    margin-top: 4px;
}

.carte_formulaire_auth .critere_pin_unique_auth
{
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    font-weight: 500;
}

.carte_formulaire_auth .status_ko_auth
{
    color: #dc3545;
}

.carte_formulaire_auth .status_ok_auth
{
    color: #28a745;
}

/* 🚀 BOUTON DE SOUMISSION / VALIDATION */
.carte_formulaire_auth .btn_action_connexion.btn_principal
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    margin-top: 35px;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    height: 80px; /* Passage de 55px à 60px */
    margin-top: 45px;
    cursor: pointer;
    box-sizing: border-box;

}

.carte_formulaire_auth .btn_action_connexion.btn_principal.btn_active_jj
{
    /* Demandes : Background noir et texte couleur saumon */
    background-color: var(--var-color-black);
    color: var(--var-color-salmon);
}

.carte_formulaire_auth .btn_action_connexion.btn_principal:hover
{
    background-color: #222222;
}

.carte_formulaire_auth .btn_action_connexion.btn_principal:active
{
    transform: scale(0.98);
}

/* 🧼 CLASSE UTILITAIRE DE MASQUAGE FORCÉ */
.carte_formulaire_auth.non_visible,
.non_visible
{
    display: none !important;
}



/* ------- Bouton Mon Espace Profil (Header) Navigation Prive------- */



    #id_section_haut.mode_prive
    {
        justify-content: space-between !important; /* Pousse le profil à gauche et la déconnexion à droite */
        min-height: 85px !important; /* Augmente légèrement pour accueillir les boutons de 70px */
        padding: 5px 15px; /* Ajustement du padding pour le smartphone */
    }

    #id_section_haut.mode_prive .logo_seo,
    #id_section_haut.mode_prive #id_menu_bouton
    {
        display: none !important;
    }


    .bouton_profil_header,
    .bouton_deconnexion_header
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        /* Dimensions demandées */
        height: 70px; /* Ta hauteur fixe */
        min-width: 140px; /* Largeur minimale pour garantir des formes identiques */
        padding: 5px 10px;

        /* Design inactif */
        background-color: var(--var-color-white) !important; /* Fond blanc inactif */
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius); /* Ta convention d'arrondi */

        font-family: var(--var-font-family);
        box-sizing: border-box;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }


    .conteneur_texte_profil
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .titre_mon_espace
    {
        font-size: 0.75rem;
        font-family: var(--var-font-family);
        color: var(--var-color-black);
        white-space: nowrap;
    }

    .sous_titre_profil
    {
        font-size: 0.75rem;
        color: var(--var-color-black);
        font-family: var(--var-font-family);
        opacity: 0.8;
    }

    .bouton_profil_header .j_bleu
    {
        color: var(--var-color-blue);
        transition: color 0.3s ease;
    }

    .bouton_profil_header .j_saumon
    {
        color: var(--var-color-salmon); /* Ton saumon global */
        transition: color 0.3s ease;
    }

    .bouton_profil_header.btn_active_jj
    {
        background-color: var(--var-color-black) !important; /* Fond noir */
        border-color: var(--var-color-black) !important;
    }

    /* Tous les textes (y compris le titre et le sous-titre) passent au saumon */
    .bouton_profil_header.btn_active_jj span,
    .bouton_profil_header.btn_active_jj .j_bleu,
    .bouton_profil_header.btn_active_jj .j_saumon
    {
        color: var(--var-color-salmonon) !important;
    }


    .bouton_deconnexion_header
    {
        color: var(--var-color-black); /* Rouge d'alerte */
        gap: 5px; /* Espacement icône et texte */
    }

    .bouton_deconnexion_header i
    {
        font-size: 1.1rem;
    }

    .bouton_deconnexion_header span
    {
        font-size: 0.73rem;
        font-family: var(--var-font-family);
        color: var(--var-color-black);
    }


    #id_menu_nav_prive
    {
        display: grid !important; /* Force le comportement Grid quand le menu est visible */
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes strictement égales */
        padding: 3px;
        width: 100%;
        margin: 0;
        gap: 5px; /* Espace horizontal et vertical entre les boutons */
        background-color: var(--var-color-white);
    }

    #id_menu_nav_prive #ib_btn_boutique .j_bleu
    {
        color: var(--var-color-blue) ;
    }


    #id_menu_nav_prive #ib_btn_boutique .j_saumon
    {
        color: var(--var-color-salmon);
    }

    #id_menu_nav_prive #ib_btn_contribuez_business .j_bleu
    {
        color: var(--var-color-blue) ;
    }

    #id_menu_nav_prive #ib_btn_contribuez_business .j_saumon
    {
        color: var(--var-color-salmon);
    }


    .bouton_menu_nav_prive
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100% !important;
        min-height: 75px;
        gap: 5px; /* Espace entre l'icône FontAwesome et le texte span */
        background-color: var(--var-color-white);
        border: var(--var-border) solid var(--var-color-black);
        border-radius: var(--var-border-radius);
        padding: 10px 5px;
        font-family: var(--var-font-family);
        font-size: 0.75rem;
        letter-spacing: 0.2px;
        cursor: pointer;
        word-break: break-word; /* Force le texte trop long à aller à la ligne sans déborder */
        line-height: 1.1;
        transition: all 0.3s ease;
    }

    .bouton_menu_nav_prive i
    {
        font-size: 1.2rem;
        color: var(--var-color-black);
    }

    .bouton_menu_nav_prive span
    {
        font-family: var(--var-font-family);
        font-size: 0.73rem;
        letter-spacing: 0.2px;
        color: var(--var-color-black);
    }

    #id_section_nav.visible
    {
        display: grid !important;
        visibility: visible;
        animation: slide_up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Utilise ton animation native */
    }

    .zone_icone_paiement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Espace de 4 pixels entre la carte et le symbole Euro */
}

/* Style de la carte bancaire */
.zone_icone_paiement .fa-credit-card {
    font-size: 1.2rem; /* Aligné sur tes autres icônes */
    color: var(--var-color-black);
}

/* Style du symbole Euro (légèrement plus petit pour créer une hiérarchie visuelle) */
.zone_icone_paiement .icone_euro {
    font-size: 0.9rem;
    color: var(--var-color-black);
    font-weight: 900;
}

/* 🎯 Gestion du mode actif (Quand le bouton passe en fond noir et texte saumon) */
.bouton_menu_nav_prive.btn_active_jj .zone_icone_paiement i {
    color: var(--var-color-salmon) !important;
    background-color: var(--var-color-black);
}


/***Partie Mes Infos Personnelles - Niveau 2 **/

#id_menu_infos_perso
{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 25px auto 0 auto;
    padding: 10px 5px;
    gap: 5px;
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    box-sizing: border-box;
}


.bouton_infos_perso
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100% !important;
    min-height: 75px;
    gap: 5px;
    background-color: var(--var-color-white) !important;
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 10px 5px;
    font-family: var(--var-font-family);
    cursor: pointer;
    word-break: break-word;
    line-height: 1.1;
    transition: all 0.3s ease;
}


.bouton_infos_perso i
{
    font-size: 1.2rem;
    color: var(--var-color-black);
}

.bouton_infos_perso span
{
    font-family: var(--var-font-family);
    font-size: 0.73rem;
    letter-spacing: 0.2px;
    color: var(--var-color-black);
}

.bouton_infos_perso.btn_active_jj
{
    background-color: var(--var-color-black) !important;
    border-color: var(--var-color-black) !important;
}

.bouton_infos_perso.btn_active_jj i,
.bouton_infos_perso.btn_active_jj span
{
    color: var(--var-color-saumon) !important;
}


/***Partie Mes Infos Personnelles - Détail Niveau 3 **/



.bloc_detail_profil_perso
{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    background-color: var(--var-color-white);

    gap: 25px; /* Écart entre la carte info et la carte stats */
    margin-top: 25px; /* Écart mathématique avec le sous-menu Niveau 2 */
    box-sizing: border-box;
}


.carte_info_profil_perso
{
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 15px;
    box-sizing: border-box;
}

.carte_info_profil_perso h3
{
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    color: var(--var-color-black);
    margin: 0 0 12px 0;
    padding-bottom: 6px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.carte_info_profil_perso h3 .j_bleu
{
    color: var(--var-color-blue) !important;
    font-weight: bold;
}

.carte_info_profil_perso h3 .j_saumon
{
    color: var(--var-color-salmon) !important;
    font-weight: bold;
}

.ligne_info_perso
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ligne_info_perso:last-child {
    margin-bottom: 0;
}

.ligne_info_perso i
{
    font-size: 0.95rem;
    color: var(--var-color-black);
    width: 20px; /* Centre et aligne verticalement toutes les icônes */
    text-align: center;
}

.ligne_info_perso p
{
    font-family: var(--var-font-family);
    font-size: 0.8rem;
    color: var(--var-color-black);
    margin: 0;
}

.ligne_info_perso strong
{
    font-weight: 300;
}


.badge_profil_perso
{
    background-color: var(--var-color-white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: capitalize; /* Met automatiquement la première lettre en majuscule */
}

.section_repartition_jj
{
    margin-top: 25px;

    width: 100%;
    overflow-x: auto; /* 🔥 Magique : Si l'écran est trop petit, cela crée une mini barre de défilement interne UNIQUE pour le tableau au lieu de casser tout ton design */
    display: block;
    box-sizing: border-box;

}

.section_repartition_jj h4
{
    font-family: var(--var-font-family);
    font-size: 0.78rem;
    color: var(--var-color-black);
    text-align: center;
    margin: 0 0 8px 0;
    font-weight: 600;

}

.table_stats_profil_jj
{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--var-font-family);
    font-size: 0.75rem;
    text-align: center;
    max-width: 650px; /* 💡 Ajout : Permet d'étirer le tableau tout en gardant une limite propre pour les grands écrans */
    margin: 10px auto;
    box-sizing: border-box;

}

.table_stats_profil_jj th
{
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    font-family: var(--var-font-family);
    font-weight: 300;

    padding: 8px 10px;

}

.table_stats_profil_jj td
{

    padding: 8px 6px;
    border: var(--var-border) solid var(--var-color-black);
    color: var(--var-color-black);
    white-space: nowrap;
}

.table_stats_profil_jj td strong
{
    font-weight: normal; /* 🔨 Neutralise l'effet gras natif de tes balises <strong> */
}


/* ========================================================================== */
/* Navigation Privée - Mes infos personnelles - Mon Profil - Modifier         */
/* ========================================================================== */

/* ========================================================================== */
/* Navigation Privée - Mes infos personnelles - Mon Profil - Modifier         */
/* ========================================================================== */

#id_bloc_detail_profil_modifier
{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: var(--var-border) solid var(--var-color-black);
    margin-top: 25px;
    border-radius: var(--var-border-radius);
}

#id_bloc_detail_profil_modifier.non_visible,
#id_bloc_detail_profil_modifier .contenu_formulaire_modifier_detail.non_visible
{
    display: none !important;
}

#id_bloc_detail_profil_modifier.visible,
#id_bloc_detail_profil_modifier .contenu_formulaire_modifier_detail.visible
{
    display: flex !important;
}

.contenu_formulaire_modifier_detail
{
    width: 100%;
    box-sizing: border-box;
    background-color: var(--var-color-white);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* --- Titre Principal Données (à modifier) - {Profil} --- */
.contenu_formulaire_modifier_detail h5
{
    font-family: var(--var-font-family);
    color: var(--var-color-salmon);
    font-size: 0.8rem;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--var-color-blue-stat);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
}

.ligne_formulaire_paire_titres
{
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #dddddd;
}

.titre_colonne_gauche,
.titre_colonne_droite
{
    display: inline-flex;
    align-items: center;
    font-family: var(--var-font-family);
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--var-color-black);
}

.titre_colonne_gauche::before
{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-blue-stat) 60%, #1565c0 100%);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.titre_colonne_droite::before
{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-salmon) 60%, #c45345 100%);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.grille_formulaire_modifier label {
    display: inline-flex;
    align-items: center;
    font-family: var(--var-font-family);
    font-size: 0.75rem;
    color: var(--var-color-black);
    margin-bottom: 6px;
}

/* Base commune des puces pour labels */
.groupe_saisie_form_lecture label::before,
.groupe_saisie_form_lecture_large label::before,
.groupe_saisie_form label::before,
.groupe_saisie_form_large label::before
{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.groupe_saisie_form_lecture label::before,
.groupe_saisie_form_lecture_large label::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-blue-stat) 60%, #1565c0 100%);
}

.groupe_saisie_form label::before,
.groupe_saisie_form_large label::before
{
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--var-color-salmon) 60%, #c45345 100%);
}

.grille_formulaire_modifier
{
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Alignement vertical strict pour Smartphone */
.ligne_formulaire_paire_champs,
.ligne_formulaire_paire_champs_large
{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
}

.ligne_formulaire_paire_champs:last-child,
.ligne_formulaire_paire_champs_large:last-child
{
    margin-bottom: 0;
}

.groupe_saisie_form_lecture,
.groupe_saisie_form_lecture_large,
.groupe_saisie_form,
.groupe_saisie_form_large
{
    display: flex;
    flex-direction: column;
    width: 100% !important;
    box-sizing: border-box;
}

.groupe_saisie_form_lecture,
.groupe_saisie_form_lecture_large
{
    margin-bottom: 10px;
}

/* --- Base des inputs standards --- */
.grille_formulaire_modifier input[type="text"],
.grille_formulaire_modifier input[type="email"],
.grille_formulaire_modifier input[type="tel"],
.grille_formulaire_modifier select
{
    width: 100%;
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    font-family: var(--var-font-family);
    font-size: 0.9rem;
    color: var(--var-color-black);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    background-color: var(--var-color-white);
    -webkit-appearance: none;
    appearance: none;
}

.grille_formulaire_modifier input:focus,
.grille_formulaire_modifier select:focus
{
    outline: none;
    border-color: var(--var-color-black);
    background-color: var(--var-color-white);
}

/* --- Zone Lecture Seule (Générique) --- */
.grille_formulaire_modifier .champ_lecture_seule
{
    background-color: #f5f5f5 !important;
    color: #888888 !important;
    border: var(--var-border) dashed var(--var-color-black) !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Flèche personnalisée Select --- */
.grille_formulaire_modifier select
{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23000000' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
}

/* ========================================================================== */
/* BLOC TÉLÉPHONE INTERNATIONAL NETTOYÉ (PAS DE DOUBLE BORDURE)              */
/* ========================================================================== */

.bloc_telephone_international_modif
{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    border: none !important;        /* Le conteneur parent n'a AUCUNE bordure */
    background-color: transparent !important;
    overflow: visible !important;
}

/* 👈 SÉCURITÉ : Force le parent à rester sans bordure ni fond, même en lecture seule */
.grille_formulaire_modifier .bloc_telephone_international_modif.champ_lecture_seule
{
    border: none !important;
    background-color: transparent !important;
    background: transparent !important;
    pointer-events: auto; /* Permet aux enfants d'avoir leur propre comportement */
}

/* Éléments rigides (Drapeau / Indicatif) */
.encadre_tel_element_modif
{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;
    height: 100% !important;
    padding: 0 !important;
    background-color: var(--var-color-white) !important;
    color: var(--var-color-black);
    font-family: var(--var-font-family);
    font-size: 0.85rem;
    text-align: center !important;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0 !important;
    border: var(--var-border) solid var(--var-color-black) !important; /* Contour propre */
    border-radius: var(--var-border-radius);
}

/* Le champ numéro de téléphone flexible */
.grille_formulaire_modifier .champ_telephone_saisie_modif
{
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    background-color: var(--var-color-white) !important;
    /* On écrase la bordure par défaut et on applique le contour fermé arrondi */
    border: var(--var-border) solid var(--var-color-black) !important;
    border-radius: var(--var-border-radius) !important;
}

/* Désactivation de l'outline au focus pour éviter qu'une bordure navigateur apparaisse */
.grille_formulaire_modifier .champ_telephone_saisie_modif:focus
{
    outline: none !important;
    border: var(--var-border) solid var(--var-color-black) !important;
}

/* --- Bascule automatique en mode Lecture Seule (appliquée aux enfants) --- */
.bloc_telephone_international_modif.champ_lecture_seule .encadre_tel_element_modif,
.bloc_telephone_international_modif.champ_lecture_seule .champ_telephone_saisie_modif
{
    background-color: #f5f5f5 !important;
    color: #888888 !important;
    border: var(--var-border) dashed var(--var-color-black) !important;
    cursor: not-allowed;
    pointer-events: none;
}



.encadre_tel_element_modif img {
    width: 24px;   /* Ou 40px selon tes besoins */
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* --- Bouton de validation --- */
.btn_valider_modifier_final
{
    width: 100%;
    height: 70px;
    margin-top: 25px;
    background-color: var(--var-color-white);
    color: var(--var-color-black);
    font-family: var(--var-font-family);
    border: var(--var-border) solid var(--var-color-black);
    border-radius: var(--var-border-radius);
    cursor: pointer;
    box-sizing: border-box;
}


/* ========================================================================== */
/* 1. SÉCURITÉ CONTENEURS GLOBAUX : Disparition totale des boîtes de menus     */
/* ========================================================================== */
.non_visible,
#id_menu_nav.non_visible,
#id_menu_nav_prive.non_visible,
.bouton_menu_nav.non_visible,
.bouton_menu_nav_prive.non_visible,
#id_bloc_detail_profil_perso.non_visible,
#id_menu_infos_perso.non_visible
{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* On s'assure que la section_nav globale ne garde aucune hauteur fantôme */
.section_nav.non_visible {
    display: none !important;
    height: 0 !important;
}

/************************************************************************************/
/* Section Bas */
/************************************************************************************/

    #id_section_bas
    {

        margin-top: auto;
        display: flex; /* Pour centrer le mantra et le logo */
        align-items: center;
        justify-content: center;

        flex-shrink: 0;
        min-height: 80px;
        width: 100% !important;
        border: var(--var-border) solid var(--var-color-black);
        background-color: var(--var-color-white);
        border-radius: var(--var-border-radius);

        animation: slide_up 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;

        /* Sécurité pour le rendu 3D */
        will-change: transform, opacity;
        overflow: hidden;

        padding-bottom: env(safe-area-inset-bottom);

    }



    #id_mantra_cont
    {
        display: flex;
        flex-direction: row;     /* Aligne les 3 éléments sur une ligne */
        align-items: center;     /* Aligne les textes sur le centre du logo */
        justify-content: center;
        gap: 20px;               /* Espace élégant entre les mots et le logo */
        width: 100%;
    }

    #id_mot_exce, #id_mot_pass
    {
        font-family: var(--var-font-header) ;

        font-weight: 400;   /* Une graisse normale permet de mieux voir les déliés */
        font-size: 1.2rem;  /* On augmente un peu la taille pour apprécier les courbes */
        font-variant-ligatures: common-ligatures;
        letter-spacing: 0.5px;
        white-space: nowrap;     /* Empêche le texte de revenir à la ligne */
        text-shadow: none;
        text-decoration: none !important; /* Supprime le soulignement de texte */
        border-bottom: none !important;  /* Supprime une éventuelle bordure inférieure */
        line-height: 1.5;
        padding-bottom: 5px ;
        display: inline-block;

        vertical-align: middle;
        margin-bottom: 5px;
    }

    #id_mot_exce, #id_mot_pass
    {
        text-decoration: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background-image: none !important; /* Pour éliminer un dégradé linéaire qui simulerait un trait */
        -webkit-appearance: none;
        appearance: none;
    }


    #id_mot_exce, #id_mot_pass, #id_logo_cont
    {
        opacity: 0;
        animation: slide_up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    #id_mot_exce
    {
        color: var(--var-color-blue);
        animation-delay: 1s;
    }

    #id_mot_pass
    {
        color: var(--var-color-orange);
        animation-delay: 2s;
    }



    #id_logo_cont
    {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;

        animation-delay: 3s;
    }


    #id_logo_cont.active
    {
        /* Bordure verte de 2px sans animation */
        border: var(--var-border) solid var(--var-color-green) ;


        border-radius: var(--var-border-radius) ;

        /* On s'assure que le contenu ne touche pas la bordure */
        padding: 5px;
    }


    #id_logo
    {
        height: 50px;            /* Ajuste la taille du logo selon tes besoins */
        width: auto;
        object-fit: contain;
    }



}


/********************************************************/
/*            Pour Tablette                             */ 
/********************************************************/  

@media (min-width: 768px) and (max-width: 1024px) 
{

    
}


/********************************************************/
/*            Pour PC                                   */
/********************************************************/

@media (min-width: 1025px)
{


}



@media (max-width: 380px) {
    .photo_cadre {
        width: 110px !important;
        height: 110px !important;
    }
}