/********************************************************/
/*          1 - Déclaration des variables               */ 
/********************************************************/ 
:root 
{
    --var-color-white: rgb(255, 255, 255) ;
    --var-color-gray: rgb(204, 204, 204) ; 
    --var-color-black: rgb(0, 0, 0) ;
    --var-color-orange-ecl: rgb(255, 165, 0) ;
    --var-color-orange: rgb(153, 76, 0) ;
    --var-color-salmon: rgb(250, 128, 114) ;
    --var-color-blue: rgb(25, 25, 112) ;
    --var-color-green: rgb(40, 167, 69) ;
    --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: 'Montserrat', sans-serif ;  
    --var-font-size-boutons-sp : 1rem ;
    --var-font-size-boutons-pc : 1.5rem ;
    --var-border-radius-pc : 5px ;  
    --var-border-radius-sp : 5px ; 
    --var-font-size-sp : 0.9rem ; 
    --var-font-size-pc : 1.2rem ; 
 
    --var-font-size-sp-nav-i : 1.2rem ; 
    --var-font-size-sp-nav-b : 0.8rem ;
    --var-font-size-pc-nav-i : 1.5em ; 
    --var-font-size-pc-nav-b : 1rem ; 

}


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

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 

html, body 
{
    width: 100%;
    height: 100%;
    overflow-x: hidden; 
    overflow-y: auto;
    background-color: var(--var-color-white);
    font-family: var(--var-font-family) ;
    -webkit-font-smoothing: antialiased;
}

#id_body 
{
    min-height: 100vh ;
    display: flex ;
    flex-direction: column ;
    background-color: var(--var-color-white) ;
} 


#id_main 
{
    display: grid;
    grid-template-rows: auto 1fr auto ;  
    width: 95% ;
    height: 95vh ;
    padding: 0 ;
    gap: 5px ;
    margin: 2.5vh auto ;
}

.section_haut, 
.section_milieu, 
.section_bas 
{
    width: 100% !important ;
    background-color: var(--var-color-white) ;
    border: 2px solid var(--var-color-black) ;
    border-radius: 5px ;
    box-sizing: border-box ; 
}


.section_haut 
{
    display: flex ;
    align-items: center ;
    /*padding: 10px 15px ;*/
    padding: 5px 10px ; 
    min-height: auto ;
    height: auto ;
}

.section_nav 
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Permet le passage à la ligne sur smartphone */
    align-items: center; 
    justify-content: flex-start;
    width: 100%;
    height: auto; /* On laisse la hauteur s'adapter au contenu */
    min-height: 100%;
    gap: 5px;
    padding: 5px 0 ;
}

#id_section_nav 
{
    position: relative ;
}

.section_milieu
{
    grid-row: 2;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
}



#id_section_milieu.is-visible 
{
    display: flex !important;
}

#id_section_milieu.fondus_visible 
{
    opacity: 1 !important ; 
    display: flex !important ;
    flex-direction: row ;
    justify-content: center ;
    align-items: center ;
    gap: 15px ; 

    margin: 20px auto ;
    padding: 10px 25px ; 

    background-color: var(--var-color-white) ;
    
}


.is-visible 
{
    display: flex !important;
    animation: apparition_douce 0.5s ease forwards;
}


.fondus_visible 
{
    opacity: 1 !important ;
}

.grille_videos_responsive 
{
    display: grid;
    /* Utilise minmax pour s'assurer que sur petit écran ça passe en 1 colonne proprement */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.video_container 
{
    display: flex;
    flex-direction: column;
    align-items: center;     /* Centre la vidéo horizontalement */
    justify-content: center;    /* Centre la vidéo verticalement */
    background-color: rgba(0, 0, 0, 0.05); /* Optionnel : léger fond pour voir la zone */
    border-radius: 8px;
    padding: 10px;
}

.video_item 
{
    max-width: 100% ; 
    height: auto ;
    border-radius: 4px ;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) ;
}

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

.btn_crea 
{
    background-color: var(--var-color-white) !important ;
    color: var(--var-color-black) !important ;
    border: 2px solid var(--var-color-black)  !important ;
}


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

#id_dynamique_lacreation 
{
    display: none ; 
    width: 96% !important ;
    max-width: 96% ; 

    margin: 20px auto !important ;
    padding: 20px !important ;

    background-color: var(--var-color-white)  !important ;
    color: var(--var-color-black)  !important ; 
    border: 2px solid var(--var-color-black)  !important ; 
    position: relative !important ;  
    z-index: 999 !important ;        
    min-height: 50px ;
    clear: both;  
}

#id_dynamique_lacreation p, 
#id_dynamique_lacreation span 
{
    color: var(--var-color-black) !important ; 
}

.bloc-actif 
{
    display: block !important;
    padding: 20px !important;
    border: 2px solid var(--var-color-black) !important;
    margin-top: 15px !important;
}

#id_dynamique_lacreation.affiche-contenu-creation 
{
    display: flex !important;
    border: 2px solid var(--var-color-black) !important ; 
    background: var(--var-color-white) !important;
}
 

.onglet_contenu 
{
    width: 100% !important ;  
    max-width: none !important ; 
    padding: 0 !important ;
    margin: 0 !important ;
}


.info_card 
{
    width: 100%; 
    background: var(--var-color-black) ;
    padding: 25px;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid var(--var-color-black) ;
    width: 100%; 
    box-sizing: border-box; 
    margin: 15px 0 0 0;
} 



.info_card p 
{
    text-align: justify;
    hyphens: auto; /* Optionnel : gère les coupures de mots pour un plus beau rendu */
}

.info_card:hover 
{
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}  

.card_header 
{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
} 

.card_texte 
{
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    margin: 0;
}

.btn_fermer_card 
{
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f9f9f9;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--var-color-black);
    transition: 0.2s;
}

.btn_fermer_card:hover 
{
    background: #ffeded;
}

/********************************/
/* Partie - Nos Valeurs*/
/********************************/

 


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

    flex-wrap: nowrap; 
    gap: 15px;   

    width: fit-content; 
    
    margin: 10px auto 25px auto;
    padding: 15px 25px; 
} 

#id_contenu_nosvaleurs 
{
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les enfants horizontalement */
    width: 100%;
} 

#id_menu_nosvaleurs 
{
    display: flex !important;
     
    overflow-x: auto;
    justify-content: flex-start; 

    align-items: center;
    gap: 10px;
    
    /* Le rectangle enveloppant */
    /*width: fit-content;*/ 
    
    width: 96% !important ; 
    max-width: 96% !important ; 

    margin: 30px auto ;
     
    padding: 25px 30px; 
    background-color: var(--var-color-white);
    border: 2px solid var(--var-color-black);
    border-radius: 5px;
} 

.btn_nosvaleurs 
{
    
    width: 65px; 
    height: 65px;
    
    /* Taille de la lettre à l'intérieur */
    font-size: 1.2rem; 
    font-weight: bold;

    /* Design du bouton */
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px ; 
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Couleurs par défaut */
    background-color: var(--var-color-white) ; 
    border: 2px solid var(--var-color-black) ; 
    color: var(--var-color-black) ; 

    margin: 0 !important; 
    flex-shrink: 0; 
}

#id_dynamique_nosvaleurs 
{
    margin: 0 auto;
    transition: width 0.3s ease; 
} 


.menu_nosservices 
{
    display: flex ;
    flex-wrap: wrap ;        
    justify-content: center ; 
    align-items: center ; 
    content: space-evenly; 
    
    gap: 20px ;              
    
    border: 2px solid var(--var-color-black); 
    border-radius: 5px ;
    background-color: var(--var-color-white) ; 
    
    padding: 15px 5px ;           
    max-width: 1200px ;        

    box-sizing: border-box ;
    width: 95% ;
    margin: 20px auto ;
    overflow: visible ;
    
} 

.menu_nosservices, 
.dynamique_nosservices 
{
    width: 96% !important;
    max-width: 96% ; 
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
} 



.info_card_nosservices 
{
    background-color: var(--var-color-white);
    border: 2px solid var(--var-color-black);
    border-radius: 8px;
    width: 100% !important;
    box-sizing: border-box !important;
}

.card_header_nosservices 
{
    font-weight: bold;
    color: var(--var-color-black);
}

.btn_nosservices 
{
    border: 2px solid var(--var-color-black) !important;
    transition: border-color 0.3s ease; 
} 

.btn_nosservices.active 
{
    border-color: var(--var-color-salmon) !important ;
}


/********************************/
/* Partie - Nos Références */
/********************************/

#id_menu_nosreferences 
{
    display: none !important; 
    flex-direction: row;
    justify-content: center; /* Centre les icônes à l'intérieur */
    align-items: center;
    
    /* LE CENTRAGE DU BLOC LUI-MÊME */
    width: 96%;            /* Un peu moins que 100% pour laisser respirer sur les bords */
    max-width: 96%;     /* La même largeur que votre bloc de texte dynamique */
    margin: 0 auto !important; /* Force le centrage horizontal */
    
    border: 2px solid var(--var-color-green);
    border-radius: 15px 15px 0 0;
    box-sizing: border-box; 
}



.btn_nosreferences 
{
    flex: 1; /* Force chaque bouton à s'adapter pour remplir la ligne */
    min-width: 0; /* Permet au bouton de rétrécir si l'écran est petit */
    white-space: nowrap; /* Empêche le texte du bouton de se couper */
    font-size: 0.8rem; /* Baissez légèrement la police si le texte est long */
}


#id_dynamique_nosreferences 
{
    display: none; 
    border: 2px solid var(--var-color-black) !important;  
    background-color: var(--var-color-white) !important;
    border-radius: 5px;
    width: 95% !important;
    max-width: 1100px !important; 
    margin: 20px auto !important; 
    padding: 20px;
    box-sizing: border-box;
}

.onglet_contenu_nosreferences 
{
    border: none !important;             
    background-color: transparent !important;  
    box-shadow: none !important;        
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: none;                      
}

#id_menu_nosreferences, 
#id_dynamique_nosreferences 
{
    width: 100%;             /* Prend toute la largeur possible */
    max-width: 1100px;       /* Largeur max identique pour les deux */
    margin-left: auto;       /* Centrage horizontal */
    margin-right: auto;      /* Centrage horizontal */
    box-sizing: border-box;  /* Inclut padding et border dans le calcul du width */
    border: 2px solid var(--var-color-black);
    border-radius: 5px ;

}
 

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

/* On s'assure que l'icône à l'intérieur change aussi de couleur */
.btn_nosreferences.active i 
{
    color: var(--var-color-salmon) !important;
} 


.info_card_nosreferences 
{
    background-color: var(--var-color-white);
    /*border: 2px solid var(--var-color-black);*/
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0; /* Aligné au menu */
} 


/********************************/
/* Partie - Le social */
/********************************/

.btn_lesocial 
{
    background-color: white !important;
    color: black !important;
    border: 2px solid black !important;
    cursor: pointer ;
    /* ... vos autres propriétés ... */
}

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

#id_dynamique_lesocial 
{
    display: none; /* Cache par défaut */
    width: 90% !important;
    max-width: 1000px;
    margin: 20px auto !important;
    padding: 20px !important;
    background-color: #ffffff !important;
    color: #000000 !important; /* Texte NOIR */
    border: 2px solid #000000 !important;
    position: relative !important; /* Pour passer devant les autres */
    z-index: 999 !important;       /* Priorité maximale */
    min-height: 50px;
    clear: both; /* Évite les chevauchements avec les boutons du dessus */
}

#id_dynamique_lesocial p, 
#id_dynamique_lesocial span 
{
    color: #000000 !important; /* Force aussi le texte à l'intérieur des balises */
}

#id_dynamique_lesocial.affiche-contenu-creation 
{
    display: flex !important;
    border: 2px solid var(--var-color-black) !important; /* La bordure ne revient qu'ici */
    background: var(--var-color-white) !important;
}
 
.onglet_contenu_lesocial 
{
    width: 100% !important; /* Prend toute la largeur de id_dynamique_creation */
    max-width: none !important; /* Supprime le blocage à 800px */
    padding: 0 !important;
    margin: 0 !important;
}




.section_bas 
{
    grid-row: 3;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--var-color-white);
    border: 2px solid var(--var-color-black);
    border-radius: 5px;
    padding: 0 10px;
    overflow: hidden;
    position: relative;
}
 

#id_menu_cont 
{
    display: flex ; 
    flex-shrink: 0 ;
} 

.bouton_menu_desc, 
#id_menu_bouton_cont,
#id_logo_cont 
{
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#id_menu_desc_cont 
{
    flex: 1 ;
    display: none ;
    opacity: 0 ;
    transition: opacity 0.3s ease ;
}

.bouton_menu_desc 
{
    height: 40px; 
    padding: 0 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem; /* Taille adaptée pour mobile/PC */
    border: 2px solid var(--var-color-black);
    border-radius: 5px;
    background-color: var(--var-color-white);
    white-space: nowrap; /* Empêche le texte de revenir à la ligne à l'intérieur du bouton */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;

}

.bouton_menu_desc.active 
{

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

#id_menu_desc_cont.is-visible 
{
    display: flex !important; /* Devient flexible quand actif */
    opacity: 1 !important;
} 


#id_menu_bouton_cont 
{
    width: 100px ;
    height: 40px ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    gap: 5px ;
    border: 2px solid var(--var-color-black) ;
    border-radius: 5px ;
    background-color: var(--var-color-white) ;
    cursor: pointer ;
    font-weight: bold ;
} 


.class_menu_desc 
{
    display: flex ;
    flex-direction: row ;
    flex-wrap: wrap ;
    gap: 5px ;
    width: 100% ;
    justify-content: flex-start ;
}

#id_menu_creation 
{
    display: none ;
    width: 100% ;
    justify-content: center ;
    gap: 10px ;
    opacity: 0 ;
    border: none; 
    transition: opacity 0.4s ease-in-out;
} 

.classe_lacreation 
{
    display: flex ;
    flex-direction: column ;
    align-items: center ;
    width: 100% ;
    gap: 20px ;
    opacity: 0 ;
    transition: opacity 0.4s ease-in-out ;
} 



.classe_lacreation #id_dynamique_lacreation 
{
    display: flex !important ;
} 

.classe_lacreation #id_menu_creation 
{
    display: flex !important ;
    opacity: 1;
    border: 2px solid var(--var-color-black); 
    border-radius: 5px;
}

.bouton_menu_desc.active, 
#id_menu_bouton_cont.active 
{
    background-color: var(--var-color-black) !important ;
    color: var(--var-color-salmon) !important ;
}


.onglet_contenu 
{
    display: none ;
    flex: none ; 
    width: 100% ;
    max-width: 800px ;
    padding: 20px ;
    margin-top: 10px ; 
    margin: 0 auto ;
    animation: zoom_entree 0.3s ease-out ;  
}

.onglet_contenu.actif 
{
    display: block !important ;
}

/* Éléments de contenu partagés */
.video_item 
{
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    border-radius: 8px ; 
    background-color: var(--var-color-black) ;
}


/* Partie La creation*/ 

.btn_crea 
{
    height: 40px ; 
    padding: 0 15px ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    gap: 5px ;
    font-family: var(--var-font-family) ;
    font-size: 0.9rem ;
    border: 2px solid var(--var-color-black) ;
    border-radius: 5px ;
    background-color: var(--var-color-black) ;
    cursor: pointer ;
    transition: all 0.3s ease ;
    white-space: nowrap ;
    cursor: pointer ;
}


.btn_crea i 
{
    font-size: 1rem ;  
    color: var(--var-color-black) ; 
    margin-right: 5px ;
}

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



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


#id_section_milieu.mode-creation #id_menu_creation 
{
    display: flex !important;
    justify-content: center;
    gap: 15px;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
} 

#id_section_milieu.mode-creation #id_dynamique_lacreation 
{
    display: block !important;
    width: 90%;
    margin: 20px auto;
    background-color: white;
    border: 2px solid var(--var-color-black);
    padding: 20px;
    border-radius: 8px;
    min-height: 100px;
}

#id_section_milieu.mode-creation #id_menu_creation,
#id_section_milieu.mode-creation #id_dynamique_lacreation 
{
    display: flex !important; /* Flex pour les boutons du menu */
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

/* On s'assure que le cadre de texte est bien en block sous le menu */
#id_section_milieu.mode-creation #id_dynamique_lacreation 
{
    display: block !important; 
    margin-top: 20px;
}

.onglet_contenu_lacreation 
{
    display: none; /* Géré par le JS */
    opacity: 0;
    transition: opacity 0.4s ease;
}


.onglet_contenu_lacreation.is-visible 
{
    display: block !important;
    opacity: 1;
}

.card_texte_lacreation 
{
    color: var(--var-color-black) !important;
    font-size: 1rem;
    line-height: 1;
}

.card_header_lacreation  
{
    margin-top: 10px ;
    margin-bottom: 10px ;
    background-color: var(--var-color-black) ; 
    color: var(--var-color-salmon) ; 
    border: 2px solid var(--var-color-black) ;
    font-size: 1rem;
}

.card_texte_lacreation .fond-text-lacreation
{
    
    color: var(--var-color-salmon) !important;            
    padding: 2px 8px;                          
    border-radius: 4px;                          
    display: inline-block;                    
    line-height: 1;
}

.puce-carre-lacreation 
{
    display: inline-block;
    width: 8px;           /* Largeur du carré */
    height: 8px;          /* Hauteur du carré */
    background-color: var(--var-color-black); /* Utilise votre variable saumon */
    margin-right: 10px;   /* Espace entre le carré et le texte */
    vertical-align: middle; /* Aligne le carré au milieu du texte */
    transform: translateY(-1px); /* Ajustement précis de la position */
}

.puce-ronde-lacreation 
{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--var-color-black);
    border-radius: 50%; /* C'est cette ligne qui rend la puce ronde */
    margin-right: 10px;
    margin-left: 30px;
    vertical-align: middle;
    transform: translateY(-1px); /* Pour un alignement visuel parfait avec le texte */
}

/* Style des boutons sous-menu création actifs */

/* Partie Nos Services*/ 

.btn_nosservices 
{
    background-color: var(--var-color-white); 
    border: 2px solid var(--var-color-black);  
    border-radius: 5px; 
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    
    width: 80px; 
    height: 80px; 
    box-sizing: border-box; 
}  

.icone_nosservices 
{
    width: 100%;   
    height: 100%;  
    object-fit: contain; 
} 

.logo_nosservices 
{
    
    overflow: visible ; 
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center; 
}

.logo_nosservices:hover::after 
{
    content: attr(data-title); 
    position: absolute;
    bottom: 125%; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--var-color-black) ; 
    color: var(--var-color-salmon) ;
    justify-content: center ;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 1rem;
    /*white-space: nowrap;*/
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    pointer-events: none;   
    white-space: normal; 
    width: max-content;  
    max-width: 180px;
}

.logo_nosservices:hover::before 
{
    content: "";
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    z-index: 999;
}


/* Partie Nos References */  


.menu_nosreferences 
{
    display: flex;
    flex-wrap: wrap;      /* Permet d'aller à la ligne si pas assez de place */
    justify-content: center; 
    gap: 20px;            /* ESPACE ENTRE CHAQUE BOUTON (droite, gauche, haut, bas) */
    padding: 20px;
} 

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

    padding: 12px 25px ; 
    
    /* ESPACE ENTRE L'ICÔNE ET LE TEXTE */
    gap: 12px ; 
    
    /* Style visuel */
    background-color: transparent ;
    border: 2px solid var(--var-color-black) ;
    border-radius: 5px ;   
    cursor: pointer;
    font-weight: 500;
    box-sizing: border-box; 
}  

.btn_nosreferences i 
{
    font-size: 1.1rem;
}
 
.titre-mission 
{
    background-color: var(--var-color-black) ; /* Utilise votre variable saumon */
    color: var(--var-color-salmon) ;           /* Texte en noir */
    padding: 2px 8px;                        /* Espace autour du texte */
    border-radius: 5px;                      /* Arrondi des angles */
    font-weight: bold;                       /* Met le titre en gras */
    display: inline-block;                   /* Permet de bien appliquer le padding */
    margin-bottom: 5px;                      /* Espace avec le texte du dessous */
}

.conteneur-ligne 
{
    display: flex;
    align-items: flex-start; /* Aligne la puce avec le haut de la première ligne */
    gap: 15px;               /* Espace entre la puce et le début du texte */
    margin-bottom: 8px;      /* Espacement vertical entre les points */
}

.puce-carre 
{
    width: 8px;              /* Taille du carré */
    height: 8px;
    background-color: var(--var-color-black); /* Votre variable noire */
    flex-shrink: 0;          /* Empêche le carré de s'écraser */
    margin-top: 6px;         /* Ajustement précis pour centrer le carré avec la lettre */
} 

.sous-ligne 
{
    margin-left: 30px; /* Décale les sous-puces vers la droite */
} 

.puce-ronde 
{
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--var-color-black); /* Crée le petit "o" */
    border-radius: 50%; /* Rend la puce ronde */
    background-color: transparent;
    flex-shrink: 0;
    margin-top: 7px;
}

/* Partie Le Social*/

.card_header_lesocial  
{
    background-color: var(--var-color-black) ; 
    color: var(--var-color-salmon) ; 
    border: 2px solid var(--var-color-black) ;
    font-size: 1.1rem;
}

.card_texte_lesocial 
{
    color: var(--var-color-black) !important;
    font-size: 1.1rem;
    line-height: 1.5;
}


.card_texte_lesocial .fond-text-lesocial
{
    
    
    color: var(--var-color-salmon) !important;            
    padding: 2px 8px;                          
    border-radius: 4px;                          
    display: inline-block;                    
    line-height: 1.4;
}

.puce-carre-lesocial
{
    display: inline-block;
    width: 8px;           /* Largeur du carré */
    height: 8px;          /* Hauteur du carré */
    background-color: var(--var-color-black); /* Utilise votre variable saumon */
    margin-right: 10px;   /* Espace entre le carré et le texte */
    vertical-align: middle; /* Aligne le carré au milieu du texte */
    transform: translateY(-1px); /* Ajustement précis de la position */
}

.puce-ronde-lesocial 
{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--var-color-black);
    border-radius: 50%; /* C'est cette ligne qui rend la puce ronde */
    margin-right: 10px;
    margin-left: 30px;
    vertical-align: middle;
    transform: translateY(-1px); /* Pour un alignement visuel parfait avec le texte */
} 


/* Partie se connecter */ 

button.bouton_menu_desc#ib_btn_seconnecter.active 
{
    background-color: var(--var-color-black) !important;
    color: var(--var-color-salmon) !important;
}

/* Force aussi la couleur de l'icône et du texte à l'intérieur */
button.bouton_menu_desc#ib_btn_seconnecter.active i,
button.bouton_menu_desc#ib_btn_seconnecter.active span 
{
    color: var(--var-color-salmon) !important;
}
 

#id_logo 
{
    height: 100% ;
    width: auto ;
    object-fit: contain ;
} 


#id_mantra_cont span 
{
    font-size: 1.2rem ;  
    font-weight: 800 ;
    font-style: italic ;
    white-space: nowrap ;
} 

#id_mot_exce, #id_mot_pass 
{
    font-size: 1.2rem ;
    font-weight: 800 ;
    font-style: italic ;
    white-space: nowrap ;
    opacity: 1 ;
}

#id_mot_exce 
{
    color: var(--var-color-blue) !important ;
    transform: translateX(-30px) ;
}

#id_mot_pass 
{
    color: var(--var-color-orange-ecl) !important ;
    transform: translateX(30px) ;
}


#id_mantra_cont.is-visible 
{
    display: flex !important;
    opacity: 1 !important;
} 

#id_mantra_cont.is-visible #id_mot_exce 
{
    animation: slide_in_left 0.4s ease-out forwards ;
}

#id_mantra_cont.is-visible #id_mot_pass 
{
    animation: slide_in_right 0.4s ease-out forwards ;
}

#id_mantra_cont.is-visible #id_logo_cont 
{
    animation: zoom_in 0.6s ease-out 0.2s forwards ;
}
 

#id_menu_cont , 
#id_menu_desc_cont , 
#id_section_milieu 
{
    display: none ;
    opacity: 0 ;
    transition: opacity 0.5s ease ; 
}

.section_bas 
{
    display: flex ;
    align-items: center ;
    justify-content: center ;
    position: relative ;
    overflow: hidden ; 
} 

/* Partie Creation */ 

.btn_crea 
{
    background-color: var(--var-color-white) !important;
    color: var(--var-color-black) !important;
    border: 2px solid var(--var-color-black) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn_crea i 
{
    color: inherit !important;
    margin-bottom: 5px;
}

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

/* Partie Nos Services*/
#id_contenu_nosservices 
{
    display: none; 
    width: 96% !important ;
} 

#id_contenu_nosservices.is-visible 
{
    display: flex !important; 
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px; 
    width: 96% !important ;
    max-width: 96% !important ;
    margin: 20px auto;
    padding: 15px 5px !important ;
    animation: apparition_douce 0.5s ease forwards;
}

/**************************************************/
/* Partie contacter-Nous */ 
/**************************************************/ 

#id_categories_lesocial, #id_categories_lebusiness 
{
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}


#id_bloc_formulaire_global 
{
    background-color: var(--var-color-white);
    border: 2px solid var(--var-color-black); /* Encadrement bleu */
    border-radius: 5px;
    padding: 25px;
    
    /* Détachement visuel par rapport au bloc du dessus */
    margin-top: 40px; 
    margin-bottom: 40px;
    
    
    
    /* Centrage et largeur */
    width: 90%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    

}


#id_titre_dynamique_form 
{
    color: var(--var-color-black);
    /*border: 2px solid var(--var-color-black); */
    background-color: var(--var-color-white);
    
    margin-bottom: 20px;
    text-align: center ;

    justify-items: center;
    align-content: center ;
    
    font-size: 1.1rem; 
    padding-top: 30px; /* Espace identique en haut */
    padding-bottom: 30px; /* Espace identique en bas */
}




#id_logo 
{
    height: 100% ;
    width: auto ;
    object-fit: contain ;
} 


#id_logo_cont 
{
    height: 80% ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    background: none ;
    border: none ;
    cursor: pointer ;
    padding: 0 ;
    opacity: 0 ;
}



/* Masquer le mantra ou le positionner de façon à ne pas décentrer le logo */

#id_mantra_cont
{
    display: none ;  
    align-items: center ;
    justify-content: center ;
    gap: 15px ;
    width: 100% ;
    height: 100% ;
}



#id_mantra_cont span 
{
    font-size: 0.7rem ;
    font-weight: 800 ;
    font-style: italic ;
    color: var(--var-color-black) ;
    text-transform: none ;
    letter-spacing: normal ;
} 





#id_mantra_cont.is-visible 
{
    opacity: 1 !important ;
    display: flex !important ;
}


#id_mot_exce 
{
    color: var(--var-color-blue) !important ; 
}

#id_mot_pass 
{
    color: var(--var-color-orange-ecl) !important ;
}     
   


@keyframes slide_in_left 
{
    to 
    { opacity: 1 ; 
        transform: translateX(0) ; 
    }
}

@keyframes slide_in_right 
{
    to 
    { 
        opacity: 1 ; 
        transform: translateX(0) ;
    }
}

@keyframes zoom_in 
{
    from 
    { 
        opacity: 0 ; 
        transform: scale(0.5) ; 
    }

    to 
    { 
        opacity: 1 ; 
        transform: scale(1) ; 
    }
} 

@keyframes zoom_entree 
{
    from 
    {
        opacity: 0;
        transform: scale(0.8);
    }
    to 
    {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes bounce_in 
{
    0% {
        opacity: 0;
        transform: translate(-50%, 10px); /* Part d'un peu plus bas */
    }
    60% {
        transform: translate(-50%, -5px); /* Remonte un peu trop haut */
    }
    80% {
        transform: translate(-50%, 2px);  /* Redescend un peu */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);    /* Position finale parfaite */
    }
}

@keyframes apparition_carte 
{
    from 
    { 
        opacity: 0 ; 
        transform: translateY(10px) ; 
    }

    to 
    { 
        opacity: 1 ; 
        transform: translateY(0) ;
    }
} 

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

/********************************************************/
/* 2 -   Navigation & Menu (SMARTPHONE)                 */ 
/********************************************************/ 

@media (max-width: 767px) 
{
    
    #id_menu_cont 
    {
        display: none ;  
        width: 100px ;     
        margin: 0 ;      
        align-items: center ;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    #id_menu_bouton_cont 
    {
        width: 100px ; 
        height: 42px ; 
        font-size: 0.8rem ;
        margin-top: auto;
        margin-bottom: auto; 
        margin-left: 0;
        box-sizing: border-box;
        display: flex ;
        align-items: center ;
        justify-content: center ;
        gap: 5px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: var(--var-border-radius-sp) ;
        cursor: pointer ;
        box-sizing: border-box;
    } 
    
    

    #id_menu_bouton_cont i 
    {
        font-size: 1.5rem ; 
    }
    
    .section_nav 
    {
        display: flex ; 
        flex-direction: row ;
        justify-content: flex-start ;
        align-items: center ; 
        height: 100% ;
        width: 100% ;
        padding: 5px 0px ;
        gap: 5px ;
    }
    

    .class_menu_desc 
    {
        display: grid !important ;
        grid-template-columns: repeat(2, 1fr) ; 
        gap: 8px ;
        width: 100% ;
        padding: 10px 0px ; 
        margin-left: 0;
    }

    .bouton_menu_desc 
    {
        width: 100% ;
        justify-content: center ;
        height: 45px ;
        font-size: 0.8rem ;
        align-items: center ;
    } 

    #id_menu_bouton_cont
    {
        height: 45px ;
    }

    .bouton_menu_desc:last-child 
    {
        grid-column: span 2 ; 
    }
    
    .bouton_menu_desc i 
    {
        font-size: 0.8rem ;
    }
   
    .grille_videos_responsive 
    {
        flex-direction: column ;
        justify-content: center ; 
        align-items: center ;
        gap: 20px ; 
        padding: 20px 0 ;
    } 

    .video_container 
    {
        width: 90% ;
        margin: 0 auto ;
    }

    .video_item 
    {
        width: 100% ;
        height: auto ;
        border: 2px solid var(--var-color-black) ;
    }



    
    /* --- LE CONTENEUR (CADRE) --- */

    #id_section_milieu.mode-creation #id_menu_creation
     {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 colonnes */
        gap: 10px !important;
        width: 96% !important;
        margin: 15px auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        border: 2px solid black !important;
        background-color: white !important;
        border-radius: 8px !important;
    }

    #id_section_milieu.mode-creation .btn_crea 
    {
        background-color: white !important;
        color: black !important;
        border: 2px solid black !important;
        height: 75px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #id_section_milieu.mode-creation .btn_crea.active 
    {
        background-color: black !important;
        color: var(--var-color-salmon) !important;
    }
    
    
    
    .btn_crea 
    {
        width: 100% !important;
        height: 75px !important;
        background-color: white !important;
        color: black !important;
        border: 2px solid black !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
    }

    .btn_crea i 
    {
        color: inherit !important;
        margin-bottom: 5px;
    } 

    .btn_crea span 
    {
        display: block;
        width: 100%;
    }

  
    
    #id_section_milieu.mode-creation #id_dynamique_lacreation 
    {
        width: 96% !important;
        margin: 0 auto 15px auto !important;
        box-sizing: border-box !important;
        border: 2px solid black !important;
        border-radius: 8px !important;
    }

    
    


    .onglet_contenu 
    {
        flex: 1 1 100% ;
        width: 100% ;
    }
    
    .info_card 
    {
         
        margin: 15px 0 0 0 !important; 
        width: 100% !important;
    } 


    /*****************************************/ 
    /* Partie Nos Valeurs */ 
    /*****************************************/


    
    .menu_nosvaleurs 
    {
        display: flex !important;
        justify-content: space-evenly; 
        align-items: center;
        
        gap: 0; 
        
        width: 100%; 
        max-width: 100%;
        
        margin: 10px auto;
        padding: 10px 0; 
        
        background-color: var(--var-color-white); 
        color:var(--var-color-black); 
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
    }

    .btn_nosvaleurs 
    {
        display: flex ;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0; 
        cursor: pointer;
        transition: all 0.3s ease;
        font: 1em sans-serif;
        /* Optionnel : pour que les boutons soient ronds et bien centrés */
        border-radius: 5px;
        border: 2px solid var(--var-color-black);
    }

    .btn_nosvaleurs:hover 
    {
        background-color: var(--var-color-black); 
        color:var(--var-color-salmon);
    }


    /*****************************/
    /* Partie - Nos services     */
    /*****************************/  
    
    .btn_nosservices 
    {
        width: 96% !important;  
        max-width: 96% ;
        height: 50px !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px;
    }

    .btn_nosservices img 
    {
        width: 30px !important;
        height: auto;
    }


    .menu_nosservices 
    {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        
        width: 96% !important; 
        max-width: 96% !important; 
        margin: 15px auto !important;

        padding: 30px 20px !important; 

        background-color: var(--var-color-white);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
    
        box-sizing: border-box !important; 
    } 
    
    
    #id_contenu_nosservices.is-visible 
    {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        
        /* On s'assure que la grille utilise 100% de l'espace interne disponible */
        width: 96% !important; 
        margin: 0 auto !important;
        
        /* Espacement entre les icônes (vertical horizontal) */
        gap: 20px 15px !important;
        justify-items: center;
        align-items: center;
    } 

    .logo_nosservices 
    {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
    } 

    .icone_nosservices 
    {
        max-width: 60px ;
        width: 100% ;
        height: auto ;
        display: block ;
        margin: 0 auto ;
    }

    #id_section_milieu.fondus_visible 
    {
        flex-direction: column !important ;
        justify-content: flex-start !important ;
        padding: 10px 0 !important ; 
    } 

    .menu_nosservices, 
    .dynamique_nosservices 
    {
        width: 96% !important ;
        max-width: 96% !important ;
        margin: 10px auto !important ; 
        display: block !important ; 
    }

    #id_contenu_nosservices , 
    #id_dynamique_nosservices 
    {
        width: 96% !important ;
        max-width: 96% !important ; 
        margin: 0 auto !important ;
        box-sizing: border-box !important ;
    }

    .dynamique_nosservices 
    {
        /* Le bloc de texte prend toute la largeur en dessous */
        width: 96% !important;
        margin: 0 auto !important;
    }

    .info_card_nosservices 
    {
        padding: 20px !important;
        margin-top: 10px;
    }

    .card_header_nosservices 
    {
        font-size: 0.8rem;
        white-space: nowrap ;
        text-align: left;
        margin-bottom: 8px;
    }

    .card_texte_nosservices 
    {
        font-size: 0.9rem;
    }
    
    /****************************/
    /* Nos références*/ 
    /****************************/

    .menu_nosreferences 
    {
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
        padding: 10px;
    }  

    #id_menu_nosreferences 
    {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        padding: 15px; /* Padding plus serré sur mobile */
        gap: 15px 10px;
        border-width: 2px; /* Bordure plus fine pour ne pas encombrer l'écran */
    } 

    #id_menu_nosreferences.is-open 
    {
        width: 96% !important;
        border-width: 2px;  

        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        grid-template-rows: auto;
        gap: 15px;
        
        padding: 15px; 
        box-sizing: border-box;
    }

    .btn_nosreferences 
    {
        width: 100%; 
        display: flex;
        align-items: center;
        justify-content: center; 
        
        gap: 2px;
        padding: 10px 5px; 
        font-size: 0.9rem; 
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn_nosreferences i 
    {
        margin-right: 2px; 
        font-size: 0.9rem;
    } 

    .btn_nosreferences span 
    {
        font-size: 0.9rem;
    }

    #id_dynamique_nosreferences 
    { 

        width: 96% !important;    
        max-width: 96%;
        margin: 0 auto !important; /* Centrage automatique */
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        display: none;

    }

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

    #id_section_milieu.mode-social #id_menu_lesocial
     {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 colonnes */
        gap: 10px !important;
        width: 96% !important;
        margin: 15px auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        border: 2px solid black !important;
        background-color: white !important;
        border-radius: 8px !important;
    }

    #id_section_milieu.mode-social .btn_lesocial
    {
        background-color: white !important;
        color: black !important;
        border: 2px solid black !important;
        height: 75px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #id_section_milieu.mode-social .btn_lesocial.active 
    {
        background-color: black !important;
        color: var(--var-color-salmon) !important;
    }


    .btn_lesocial 
    {
        width: 100% !important;
        height: 75px !important;
        background-color: white !important;
        color: black !important;
        border: 2px solid black !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        border-radius: 5px;
    }

    .btn_lesocial i 
    {
        color: inherit !important;
        margin-bottom: 5px;
    } 

    .btn_lesocial span 
    {
        display: block;
        width: 100%;
    }

    #id_section_milieu.mode-social #id_dynamique_lesocial
    {
        width: 96% !important;
        margin: 0 auto 15px auto !important;
        box-sizing: border-box !important;
        border: 2px solid black !important;
        border-radius: 8px !important;
    }

    .onglet_contenu_lesocial
    {
        flex: 1 1 100% ;
        width: 100% ;
    }


    .info_card_lesocial 
    {
        padding: 20px !important;
        /*margin-top: 10px;*/
    }

    .card_header_lesocial 
    {
        font-size: 1rem;
        /*margin-bottom: 8px;*/
    }

    .card_texte_lesocial 
    {
        font-size: 0.9rem;
    } 

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


    #id_section_milieu.mode-contacteznous 
    {
        /*display: flex !important; */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: column !important; 
        align-items: center !important;     
        justify-content: center !important;
        width: 100% !important; 
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        
        border-radius: 5px !important;
    }  


        

    #id_menu_contacteznous 
    {
        display: flex !important;
        flex-direction: row !important; /* Force les boutons côte à côte */
        width: 96% !important;
        max-width: 96% !important;
        height: 70px !important; /* Hauteur plus adaptée au mobile que 100px */
        margin: 15px auto !important;
        padding: 15px !important; /* Espace entre le cadre noir et les boutons */
        gap: 10px !important;    /* Espace entre les deux boutons */
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        align-items: stretch !important; /* Force les boutons à remplir la hauteur */
    } 

    
  
    #id_section_milieu.mode-contacteznous .btn_contacteznous 
    {
        flex: 1 !important; /* Chaque bouton prend exactement la moitié (50/50) */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Centre l'icône et le texte horizontalement */
        
        height: 100% !important;
        border: 2px solid var(--var-color-black) !important;
        background-color: var(--var-color-white) !important;
        border-radius: 5px !important;
        padding: 0 5px !important;
        
        font-size: 13px !important; /* Un peu plus petit pour éviter le retour à la ligne */
        gap: 8px !important;        /* Espace entre icône et texte */
        white-space: nowrap !important;
    }

    .btn_contacteznous 
   {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;                         
        height: 100%;                    
        border: none;                    
        cursor: pointer;
        gap: 10px;
        color: var(--var-color-black);
        transition: all 0.3s ease;
    } 

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

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

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


    #id_dynamique_contacteznous 
    {
        flex-direction: column !important; 
        display: none; 

        width: 96% !important;      
        max-width: 96% !important;   
        margin: 15px auto !important;  
        gap: 10px !important;
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        
        
        box-sizing: border-box !important; 
        padding: 15px !important; 
    } 

    
    

    #id_categories_lesocial , #id_categories_lebusiness 
    {
        display: grid !important; /* On active la grille */
        
        /* Définit 2 colonnes de taille identique */
        grid-template-columns: 1fr 1fr !important; 
        
        /* Centrage complet */
        justify-items: center !important; 
        align-items: center !important;
        
        /* Espaces et Fond */
        background-color: white !important;
        padding: 30px 10px !important; /* Espaces réguliers haut/bas (30px) */
        gap: 15px !important; /* Espace entre les boutons de la grille */
        
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 5px;
    } 

    .btn_cat_lesocial, .btn_cat_lebusiness
    {
        display: flex !important;
        flex-direction: column !important; /* Empile l'icône sur le texte pour gagner de la place */
        justify-content: center !important;
        align-items: center !important;
        
        width: 100% !important; /* Prend toute la largeur de sa cellule de grille */
        height: 80px !important; /* Hauteur fixe pour la symétrie */
        
        background-color: white !important ; 
        color: var(--var-color-black) !important ;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        
        font-size: 12px !important; /* Texte légèrement réduit pour mobile */
        gap: 5px !important;
        padding: 5px !important;
        text-align: center;  
        transition: all 0.3s ease !important;

    } 

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

    .btn_cat_lesocial.active i, 
    .btn_cat_lebusiness.active i 
    {
        color: var(--var-color-salmon) !important;
    } 

    .btn_cat_lesocial i , .btn_cat_lebusiness i 
    {
        font-size: 1rem !important;
        margin: 0 !important;
    } 

    
    #id_champs_variables, 
    #id_champs_communs, 
    .form_section[style*="display: block"] 
    {
        display: flex !important;
        flex-direction: column;
        gap: 20px; /* Espacement régulier entre CHAQUE élément */
    }

    #id_champs_variables 
    {
        margin-bottom: 20px;
    } 



    #id_bloc_formulaire_global 
    {
        display: none; /* Conservé pour votre JS */
        margin-top: 20px;
        
        /* On aligne strictement sur les valeurs du titre */
        width: 96% !important;
        max-width: 1000px !important;
        
        /* On ajoute ceci pour s'assurer que le bloc est bien centré */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3. Style des groupes (Label + Input) */
    #id_form_contact_final .form-group 
    {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #id_form_contact_final label 
    {
        
        margin-bottom: 8px; /* Espace précis entre label et champ */
        text-align: left;
    }

    /* 4. Champs de saisie */
    #id_form_contact_final input, 
    #id_form_contact_final select, 
    #id_form_contact_final textarea 
    {
        width: 100% !important;
        padding: 12px;
        margin: 0; 
        border: 1px solid #000;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 16px;
    }

    /* 5. Le Bouton Submit */
    .btn_envoi_demande_social_business 
    {
        width: 100%;
        padding: 15px;
        margin-top: 20px;  
         margin-bottom: 20px;  
        height : 70px ; 
        /*font-weight: bold;*/
        cursor: pointer;
    }

    
    
    #id_bloc_formulaire_global 
    {

        width: 96%;
        max-width: 800px; /* Plus grand pour le PC */
        margin: 20px auto; /* Centré */
    }
    

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



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


    button[data-target^="seconnecter_mdp_oubli_"] 
    {
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black); 
        cursor: pointer;
        width: 96%;
        max-width: 96%;
       
    }

    html body button[data-target^="seconnecter_mdp_oubli_"].btn-mdp-actif 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important; 
        border-color: var(--var-color-black) !important;
    } 
    

    #message 
    {
        aspect-ratio: 100 / 30 !important;
        min-height: 150px;
    }


    
   .btn_envoi_demande_social_business 
   {
        
        border: 2px solid var(--var-color-black) !important ; 
        color: var(--var-color-black);
        background-color: var(--var-color-white); 
        border-radius: 5px ;
        
        
        /*text-transform: uppercase; */
        justify-items: center;
        align-content: center ;
        justify-content: center;
        
        height: 80px ;
        margin-top: 20px ; 
        /*margin-bottom: 10px ;  */
        padding-top: 30px ; 
        padding-bottom: 30px ; 

        font-size: 0.9rem ; 
        
   } 
 

   #id_titre_dynamique_form 
    {
        color: var(--var-color-black);
        /*border: 2px solid var(--var-color-black); */
        background-color: var(--var-color-white);
        
        margin-bottom: 20px;
        
        /*text-align: left !important;*/ 
        text-align: center ;
        justify-items: center;
        align-content: center ;

        white-space: nowrap;


        font-size: 0.9rem !important; /* Taille réduite pour mobile */
        padding-top: 20px; /* On peut aussi réduire un peu l'espace sur mobile */
        padding-bottom: 20px;
        /*line-height: 1.3;*/
        padding-left: 4px; 
        padding-right: 4px;
        
    }


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

    #id_section_milieu.mode-sinscrire 
    {
    
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: column !important; 
        align-items: center !important;     
        justify-content: center !important;
        width: 100% !important; 
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        
        border-radius: 5px !important;
    }  

    


 
    #id_menu_sinscrire 
    {

        display: grid !important; 
        grid-template-columns: 1fr 1fr !important; 

        width: 96% !important;
        max-width: 96% !important;

        /*height: 80px !important;*/  

        height: 100% !important;

        margin: 15px auto !important;
        padding: 20px 10px !important; 
        gap: 15px !important;
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        align-items: stretch !important;  
    } 
 



    #id_section_milieu.mode-sinscrire .btn_sinscrire 
    {
        flex: 1 !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; 
        
        height: 100% !important;
        border: 2px solid var(--var-color-black) !important;
        background-color: var(--var-color-white) !important;
        border-radius: 5px !important;
        
        padding: 30px 10px !important; 
        gap: 15px !important; 
        
        font-size: 1rem !important; 
       
        white-space: nowrap !important;
    } 

    #id_section_milieu.mode-sinscrire-entr .btn_sinscrire 
    {
        flex: 1 !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; 
        
        height: 100% !important;
        border: 2px solid var(--var-color-black) !important;
        background-color: var(--var-color-white) !important;
        border-radius: 5px !important;
        
        padding: 30px 10px !important; 
        gap: 10px !important; 
        
        font-size: 13px !important; 
       
        white-space: nowrap !important;
    }

    .btn_sinscrire 
   {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;                         
        height: 100%;                    
        border: none;                    
        cursor: pointer;
        /*gap: 10px;*/
        color: var(--var-color-black);
        transition: all 0.3s ease;
    } 

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

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

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



  .btn_sinscrire 
    {
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        transition: all 0.3s ease;
        font-size: 1rem !important;
    }

    /* État Actif (Noir/Saumon) - Déclenché par le JS */
    .btn_sinscrire.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    } 
    

    #id_menu_sinscrire, 
    #id_sinscrire_particulier 
    {
        width: 95% !important; 
        max-width: 95% !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important; 
    }




    #id_titre_sinscrire_particulier, 
    .btn_submit_sinscrire_particulier 
    {
        height: 60px; 
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        margin: 0; 
        font-weight: bold;
        text-transform: uppercase;
    }

    #id_titre_sinscrire_particulier 
    {
        color: var(--var-color-black);
        background-color: var(--var-color-white);
        margin-bottom: 20px;
        font-size: 1rem;
        padding: 0; 
    }

    #id_sinscrire_particulier 
    {
        margin-top: 30px;
        padding: 20px;
        background-color: var(--var-color-white); 
        border: 2px solid var(--var-color-black);  
        border-radius: 8px;
    }

    .form_grid_sinscrire_particulier 
    {
        display: flex;
        flex-direction: column;
        gap: 15px; 
    }


    .form_group_sinscrire_particulier 
    {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .form_group_sinscrire_particulier label 
    {
        
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .form_group_sinscrire_particulier input 
    {
        width: 100%; 
        box-sizing: border-box; 
        padding: 12px;
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
    }


    .form_group_sinscrire_particulier select 
    {
        width: 100% ; 
        box-sizing: border-box ; 
        padding: 12px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
    }
    


    .btn_submit_sinscrire_particulier 
    {
        margin-top: 5px; 
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.9rem;
         
        transition: 0.3s;
    }


    #id_menu_sinscrire, 
    #id_sinscrire_entreprise 
    {
        width: 95% !important ; 
        max-width: 95% !important ; 
        margin-left: auto !important ;
        margin-right: auto !important ;
        box-sizing: border-box !important ; 
    }




    #id_titre_sinscrire_entreprise , 
    .btn_submit_sinscrire_entreprise 
    {
        height: 60px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;
        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;
        text-transform: uppercase ;
    }

    #id_titre_sinscrire_entreprise 
    {
        color: var(--var-color-black) ;
        /*border: 2px solid var(--var-color-black) ; */
        background-color: var(--var-color-white) ;
        margin-bottom: 20px ;
        font-size: 1rem ;
        padding: 0 ; 
    }

    #id_sinscrire_entreprise 
    {
        margin-top: 30px ;
        padding: 20px ;
        background-color: var(--var-color-white) ; 
        border: 2px solid var(--var-color-black) ;  
        border-radius: 8px ;
    }

    .form_grid_sinscrire_entreprise 
    {
        display: flex ;
        flex-direction: column ;
        gap: 15px ; 
    }


    .form_group_sinscrire_entreprise 
    {
        display: flex ;
        flex-direction: column ;
        text-align: left ;
    } 


    .form_group_sinscrire_entreprise label 
    {
        
        margin-bottom: 5px ;
        font-size: 1rem ;
    } 


    .form_group_sinscrire_entreprise input 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
    }



    .form_group_sinscrire_entreprise select 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
    }
    

    .btn_submit_sinscrire_entreprise 
    {
        margin-top: 10px ;
        background-color: var(--var-color-white) ;
        color: var(--var-color-black) ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
        cursor: pointer ;
        font-size: 0.9rem ;
        
    }



    #id_menu_sinscrire, 
    #id_sinscrire_organisation 
    {
        width: 95% !important ; 
        max-width: 95% !important ; 
        margin-left: auto !important ;
        margin-right: auto !important ;
        box-sizing: border-box !important ; 
    }


    #id_titre_sinscrire_organisation , 
    .btn_submit_sinscrire_organisation 
    {
        height: 60px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;
        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;
    }

    .btn_submit_sinscrire_organisation 
    {
        cursor:pointer ; 
    }

    #id_titre_sinscrire_organisation 
    {
        color: var(--var-color-black) ;
        /*border: 2px solid var(--var-color-black) ;*/
        background-color: var(--var-color-white) ;
        margin-bottom: 20px ;
        font-size: 1rem ;
        padding: 0 ; 
    }

    #id_sinscrire_organisation 
    {
        margin-top: 30px ;
        padding: 20px ;
        background-color: var(--var-color-white) ; 
        border: 2px solid var(--var-color-black) ;  
        border-radius: 8px ;
    }

    .form_grid_sinscrire_organisation 
    {
        display: flex ;
        flex-direction: column ;
        gap: 15px ; 
    }


    .form_group_sinscrire_organisation 
    {
        display: flex ;
        flex-direction: column ;
        text-align: left ;
    } 


    .form_group_sinscrire_organisation label 
    {
        
        margin-bottom: 5px ;
        font-size: 1rem ;
    } 


    .form_group_sinscrire_organisation input 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
    }



    .form_group_sinscrire_organisation select 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
    }
    

    .btn_submit_sinscrire_organisation 
    {
        margin-top: 10px ;
        background-color: var(--var-color-white) ;
        color: var(--var-color-black) ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
        cursor: pointer ;
        font-size: 1rem ;
        
    } 


    #id_menu_sinscrire, 
    #id_sinscrire_etat 
    {
        width: 95% !important ; 
        max-width: 95% !important ; 
        margin-left: auto !important ;
        margin-right: auto !important ;
        box-sizing: border-box !important ; 
    }

    #id_titre_sinscrire_etat , 
    .btn_submit_sinscrire_etat 
    {
        height: 60px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;
        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;

    }

    #id_titre_sinscrire_etat 
    {
        color: var(--var-color-black) ;
        /*border: 2px solid var(--var-color-black) ;*/ 
        background-color: var(--var-color-white) ;
        margin-bottom: 20px ;
        font-size: 1rem ;
        padding: 0 ; 
    }

    #id_sinscrire_etat 
    {
        margin-top: 30px ;
        padding: 20px ;
        background-color: var(--var-color-white) ; 
        border: 2px solid var(--var-color-black) ;  
        border-radius: 5px ;
    }

    .form_grid_sinscrire_etat 
    {
        display: flex ;
        flex-direction: column ;
        gap: 15px ; 
    }


    .form_group_sinscrire_etat 
    {
        display: flex ;
        flex-direction: column ;
        text-align: left ;
    } 


    .form_group_sinscrire_etat label 
    {
        
        margin-bottom: 5px ;
        font-size: 1rem ;
    } 


    .form_group_sinscrire_etat input , 
    .form_group_sinscrire_etat select
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
    }


    
    

    .btn_submit_sinscrire_etat 
    {
        margin-top: 10px ;
        background-color: var(--var-color-white) ;
        color: var(--var-color-black) ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
        cursor: pointer ;
        font-size: 1rem ;
    }



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

    #id_section_milieu.mode-seconnecter 
    {
        /*display: flex !important; */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: column !important; 
        align-items: center !important;     
        justify-content: center !important;
        width: 100% !important; 
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap : 20px ; 
        border-radius: 5px !important;
    }  


    /*
    #id_section_milieu 
    {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;     
        width: 100%;
        gap: 20px;                         
    }
        */

    #id_section_milieu 
    {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
        gap: 20px !important; /* C'est cet espace qui sera identique partout entre les blocs */
        padding: 10px 0;
    } 

    #id_menu_seconnecter 
    {
        display: grid !important; 
        grid-template-columns: 1fr 1fr !important; /* 2 colonnes pour le 2x2 */
        
        width: 100% !important;      
        max-width: 96% !important; /* Limite sur PC, s'étire sur Mobile */
        height: 100% !important;

        margin: 15px auto !important;
        padding: 20px 10px !important; 
        gap: 10px !important;
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        align-items: stretch !important;  

    } 

    #id_menu_seconnecter, 
    [class^="sidentifier_mdpoubli_"], 
    .methode_connexion_cont 
    {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;    /* Le gap s'occupe de l'espace haut */
        margin-bottom: 0 !important; /* Le gap s'occupe de l'espace bas */
    }
 

    
    
    .btn_seconnecter 
    {
        width: 100% !important;
        height: 80px !important; 
        
        display: flex !important;
    
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap : 10px ; 
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    } 

    .btn_seconnecter.active 
    {
     background-color: var(--var-color-black);
     color: var(--var-color-salmon);   
    }

    [class^="btn_action_"]  
    {
        flex: 1 1 140px; 
    
        width: 96% !important;
        max-width: 96% !important;
        
        display: flex !important;
        
        flex-direction: column !important; 
        align-items: center !important;    
        justify-content: center;
        gap: 5px;                         
        padding: 5px 5px;     
        margin: auto !important;          
                              
        height: 70px;

        box-sizing: border-box !important;
        border: 2px solid var(--var-color-black);
        background-color: var(--var-color-white) !important;
        border-radius: 5px !important;
    }

    [class^="btn_action_"]  i 
    {
        width: 100%;
        font-size: 0.8rem;                    
        margin: 0 !important;    
        margin-bottom: 2px !important;                
    }

    [class^="btn_action_"]  span 
    {
        
        font-size: 0.8rem;                
        display: block;
    }


    #id_section_milieu [class^="btn_action_"].active 
    {
        background-color: var(--var-color-black) !important;
        background: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;    
    }

    #id_zone_mdp_oubli 
    {
        margin-top: 15px;
        text-align: center;
        width: 100%;
    }
 
    [class^="sidentifier_mdpoubli_"] 
    {
        
        width: 96% !important;
        max-width: 96% !important;
        box-sizing: border-box !important; 
        
        
        height: 100px !important;
        min-height: 100px !important; 
        max-height: 100px !important;
        overflow: hidden; 

        display: none; 
        flex-direction: row !important;
        align-items: center !important; 
        justify-content: center !important;
        gap : 5px ; 
        
        margin: 20px auto !important; 

        padding: 0 5px !important; 
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;   
        background-color: var(--var-color-white);
    }


    .methode_connexion_cont 
    {
            display: none;  
            flex-direction: row !important;
            
            height: 100px !important;
            min-height: 100px !important; 
            max-height: 100px !important;
            overflow: hidden; 
    
            gap: 5px !important; 
            padding: 0 5px !important;

            justify-content: space-evenly !important; 
            align-items: center !important;
        
            width: 96% !important;
            justify-content: center;
            align-items: center;
            
            border: 2px solid var(--var-color-black) !important; 
            color: var(--var-color-black);
            border: 2px solid var(--var-color-black);
            border-radius: 5px;
        
            margin: 20px auto !important; 
    }

    .btn_methode_connexion 
    {
        
        flex: 1 !important;  
        width: 0;
        min-width: min-content;
        
        display: inline-flex;       
        align-items: center;
        justify-content: center;
            
        gap: 5px !important;
        
        height: 50px !important;    
        padding: 0 5px !important; 
        
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        cursor: pointer;
        box-sizing: border-box !important;
        white-space: nowrap;   
    }

     

    .btn_methode_connexion i , .btn_methode_connexion span
    {
        font-size: 0.8rem; 
    }

    .btn_methode_connexion.active 
    {
        background-color: var(--var-color-black);
        color: var(--var-color-salmon) ;
    }



    
     #id_zone_formulaires_connexion  
    {
        width: 96%; 
        max-width: 96%; 

        width: 96%;
        display: flex;
        flex-direction: column;
        align-items: center; 

        height: auto !important; 
        margin: 5px auto 0 auto !important;
        box-sizing: border-box;
        
    } 
    
    .form_final_cont 
    {
        display: flex;
        flex-direction: column; 
        background-color: var(--var-color-white);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        padding: 10px;
        margin: 0 auto;
        width: 100%;  
        max-width: 100%; 
        box-sizing: border-box; 

    }  


    .titre_form_final 
     {

        width: 100%;
        align-items: center;
        text-align: center;
        justify-content: center;
        color: var(--var-color-black); 


        height: auto !important;      /* On remplace 100px par auto */
        margin-top: 0;
        margin-bottom: 5px !important; /* On contrôle l'espace précisément avec une petite marge */
        padding: 5px 0;
       
        border-radius: 5px;
        
        text-transform: uppercase;
        font-size: 0.9rem;
        /*padding-bottom: 5px;*/
    }  



    .form_grid_final 
    {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;  
        margin-top: 0 !important;
    } 

    .form_group_connexion 
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }  


    .form_group_connexion label 
    {
        
        margin-bottom: 10px; 
        color: var(--var-color-black);
        font-size: 0.85rem;
    }

    
    .form_group_connexion input, 
    .form_group_connexion select 
    {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        box-sizing: border-box; 
        font-size: 0.85rem;
    }

    
    .label_obligatoire 
    {
        color: var(--var-color-salmon);
        margin-left: 3px;
    }

    
    .btn_validation_final 
    {
        width: 100%;
        padding: 15px;
        margin-top: 10px;
        height: 100px ;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px;
        font-weight: bold;
        
        font-size: 0.9rem;
        cursor: pointer;
        transition: 0.3s ease;
    }


    #id_zone_mdp_oubli 
    {
        width: 96% ;
        max-width: 96% ;
         
        box-sizing: border-box ; 
        margin-left: auto ;
        margin-right: auto ;
        display: none ;  
        
    } 


    [class^="sidentifier_mdpoubli_"] , 
    #id_zone_mdp_oubli 
    {
        width: 96%; 
        max-width: 96%;          
        display: none;         
        justify-content: center;
        gap: 10px;
        margin-top: 0px;       
    } 
    
   

    button[data-target^="seconnecter_mdp_oubli_"].btn-mdp-actif 
    {
        background-color: var(--var-color-black) !important ;
        color: var(--var-color-salmon) !important ;
         
    } 

    .titre_form_final_mdp_oubli 
     {
        display: flex ;  
        width: 100% ;
        align-items: center ;
        text-align: center ;
        justify-content: center ;
        color: var(--var-color-black) ;

        height: auto !important;      /* On laisse le titre prendre sa place naturelle */
        min-height: auto !important;  /* Sécurité */
        margin-top: 0;
        margin-bottom: 0px !important; /* Supprime la marge sous le titre */
        padding-top: 10px;
        padding-bottom: 5px !important; 

        /*border: 2px solid var(--var-color-black) ;*/
        border-radius: 5px ;
        
        text-transform: uppercase;
        font-size: 0.9rem;
        
    } 
    
    .form_group_mdp_oubli 
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 0 !important;
    }  


    .form_group_mdp_oubli label 
    {
        
        margin-bottom: 5px !important; 
        margin-top: 0;
        color: var(--var-color-black);
        font-size: 0.9rem;
    }

    /* Style des champs de saisie */
    .form_group_mdp_oubli input 
    {
        width: 100%;
        padding: 10px;
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        box-sizing: border-box; /* Important pour que le padding ne casse pas la largeur */
        font-size: 0.9rem;
    }


    .btn_valider_mdp_oubli 
    {
        width: 100%;
        padding: 15px;
        margin-top: 15px;
        height: 60px ;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px;
        font-weight: bold;
        
        font-size: 1rem;
        cursor: pointer;
        transition: 0.3s ease;
    }
   

   

    #id_logo_cont 
    {
        height: 60% ; 
    }

    #id_mantra_cont 
    {
        gap: 10px ; 
    }
     

    #id_mantra_cont span 
    {
        font-size: 0.85rem ;
    }

    

}

/********************************************************/
/*  3 - Navigation & Menu (PC / Tablettes)              */ 
/********************************************************/ 


/* --- AJUSTEMENT SPÉCIFIQUE TABLETTES (iPad) --- */
@media (min-width: 768px) and (max-width: 1024px) 
{

    /* On s'assure que le conteneur du bouton Menu reste bien à gauche */
    #id_menu_cont 
    {
       /* margin-bottom: 10px ;  */
        height: auto ;
    } 

    .section_nav 
    {
        height: auto ;
        padding: 10px ;
    }

    #id_section_milieu 
    {
        padding: 20px !important; 
    }


    #id_section_milieu.classe_lacreation #id_menu_creation 
    {
        display: flex !important ;
        flex-direction: row !important ;
        /*width : 96% ; 
        max-width: 96% ;*/
    }

    #id_section_milieu.classe_lacreation .grille_videos_responsive 
    {
        display: none !important ;
    }

    .grille_videos_responsive 
    {
        display: flex !important ;
        flex-direction: row ; 
        flex-wrap: wrap ; 
        justify-content: center ; 
        align-items: center ;
        gap: 30px ;
        width: 100% ;
        margin: 0 auto ; 
        padding: 20px ; 
    }


    .video_container 
    {
        width: 45% ;              
        max-width: 500px ;
        margin: 0 ;
    }

    .class_menu_desc 
    {
        display: grid !important ;
        grid-template-columns: repeat(3, 1fr) ; 
        gap: 10px ;
        width: 100% ;
    }

    .bouton_menu_desc 
    {
        width: 100% ;
        height: 50px ;  
        justify-content: center ;
        font-size: 0.9rem ;
    } 

    #id_menu_bouton_cont 
    {
        height: 50px ;
    }

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


    #id_menu_creation, 
    #id_dynamique_lacreation 
    {
        width: 96% !important;
        max-width: 96% !important;
        margin: 15px auto !important; /* Centrage identique */
        
        box-sizing: border-box !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 8px !important;
        padding: 20px !important;
        background-color: var(--var-color-white) !important;
        
    }

     

    .classe_lacreation #id_menu_creation 
    {
        display: flex !important; /* On passe en FLEX pour la tablette */
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Interdit le retour à la ligne */
        justify-content: space-between !important;
        gap: 12px !important;
        height: auto !important;
    }
    
    
    .btn_crea 
    {
        background-color: var(--var-color-white) !important; /* Fond blanc forcé */
        color: var(--var-color-black) !important;          /* Texte noir forcé */
        border: 2px solid var(--var-color-black) !important;
        
        /* On garde vos autres propriétés de confort */
        flex: 1 !important;
        height: 85px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn_crea.active 
    {
        background-color: var(--var-color-black) !important; /* Fond noir */
        color: var(--var-color-salmon) !important;         /* Texte saumon */
    }


    .btn_crea i
    {
        color: inherit !important; 
        font-size: 1.1rem !important;
        margin-bottom: 5px !important;
    }

    
    #id_dynamique_lacreation 
    {
       /* margin-top: -5px !important; */ 
       margin-top: 80px ;
    }  


    #id_main .onglet_contenu 
    {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        display: none; /* Caché par défaut, géré par votre classe .actif */
    } 

    #id_main .onglet_contenu.actif
    {
        display: block;
    }

    /* Harmonisation des boutons */
    #id_main .btn_crea 
    {
        flex: 1;
        height: 45px;
        font-size: 1rem;
        white-space: nowrap;
    }

    

    /****************************************/
    /* Partie Nos Valeurs */  
    /****************************************/ 
 

    .menu_nosvaleurs 
    {
        display: flex !important;
        justify-content: space-evenly; 
        align-items: center;
        
        gap: 0; 
        
        width: 100%; 
        max-width: 100%;
        
        margin: 20px auto;
        padding: 20px 0; 
        
        background-color: var(--var-color-white); 
        color:var(--var-color-black); 
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
    }

    .btn_nosvaleurs 
    {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0; 
        cursor: pointer;
        transition: all 0.3s ease;
        
        /* Optionnel : pour que les boutons soient ronds et bien centrés */
        border-radius: 5px;
        border: 2px solid var(--var-color-black);
    }

    .btn_nosvaleurs:hover 
    {
        background-color: var(--var-color-black); 
        color:var(--var-color-salmon);
    }


 
    
    

    /****************************************/
    /* Partie Menu Services*/  
    /****************************************/ 

    #id_section_milieu 
    {
        padding: 20px !important;
        display: flex !important;
        justify-content: center !important;
    }

    #id_contenu_nosservices 
    {
    display: none;  
    } 

    .btn_nosservices 
    {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px !important;
    }  

    .menu_nosservices 
    {
        /* 1. On passe en inline-flex pour que le cadre entoure strictement le contenu */
        display: inline-flex !important; 
        flex-wrap: nowrap !important;
        justify-content: center !important;
        /*justify-content: space-between ;*/
        align-items: center !important;

        /* 2. On augmente le padding latéral drastiquement pour décoller les bords */
        padding: 30px 50px !important; 
        
        /* 3. On définit un espace fixe entre logos */
        gap: 25px !important; 

        /* 4. Largeur adaptative */
        width: 96% !important ; 
        min-width: fit-content !important; 
        max-width: 96% !important;
        
        margin: 20px auto !important;
        box-sizing: border-box !important;
        
        /* Design */
        background-color: var(--var-color-white);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
    }
    
    #id_contenu_nosservices.menu_nosservices.is-visible 
    {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; 
        justify-content: center !important;
        align-items: center !important;

        padding: 30px 60px !important; 
        gap: 25px !important; 

        
        width: 96% !important;
        max-width: 96% !important;
        min-width: fit-content !important;
        
        margin: 20px auto !important;
        box-sizing: border-box !important;
        
        background-color: var(--var-color-white);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
    } 

    #id_section_milieu.fondus_visible 
    {
        flex-direction: column !important; /* Force l'empilement vertical */
        align-items: center !important;    /* Centre les blocs horizontalement */
        justify-content: flex-start !important;
        gap: 20px !important;              /* Espace entre les deux cadres */
    }

    #id_contenu_nosservices, 
    #id_dynamique_nosservices 
    {
        width: 96% !important;
        max-width: 96% !important; /* Largeur idéale pour une tablette */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .icone_nosservices 
    {
        max-width: 40px !important; /* L'image à l'intérieur du bouton */
        height: auto;
    }

    .logo_nosservices 
    {
        flex: 0 0 auto !important;
        margin: 0 !important; /* Supprime toute marge parasite */
        display: flex !important;
        justify-content: center !important;
    } 


    .info_card_nosservices 
    {
        padding: 30px !important;
        margin-top: 20px;
    }

    .card_header_nosservices 
    {
        font-size: 0.8rem ;
        margin-bottom: 15px ;
    }

    .card_texte_nosservices 
    {
        font-size: 0.9rem ;
    } 

    /****************************/
    /* Partie Nos Références    */ 
    /****************************/

    .menu_nosreferences 
    {
        display: grid; 
        /* Crée 2 colonnes égales (50% chacune moins l'espace du gap) */
        grid-template-columns: repeat(2, 1fr); 
        padding: 30px; 
        gap: 20px 40px;
    }  

    #id_menu_nosreferences 
    {
        display: grid !important;
        padding: 25px; /* On réduit un peu le padding */
        gap: 20px 40px;
    }

    #id_menu_nosreferences.is-open 
    {
        gap: 15px 10px;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto;
        width: 100%;
        padding: 15px;  

        width: 96% !important; 
        max-width: 96% ;
        box-sizing: border-box; 
        border: 2px solid var(--var-color-black) !important;

    }

    .btn_nosreferences 
    {
        /* Force tous les boutons à prendre toute la largeur de leur cellule de grille */
        width: 100%; 
        /* Aligne le contenu à gauche ou au centre selon votre choix */
        display: flex;
        align-items: center;
        justify-content: center; 
        
        /* Ajustement du texte pour qu'il ne déborde pas */
        padding: 20px 40px;
        font-size: 1rem; 
        white-space: nowrap; /* Empêche le texte de revenir à la ligne */
        overflow: hidden;
        text-overflow: ellipsis; 
        min-height: 80px; 
        gap: 15px; 
    } 

    .btn_nosreferences i 
    {
        margin-right: 8px; /* Espace entre icône et texte */
        font-size: 1rem;
    }

    #id_dynamique_nosreferences 
    {
        width: 96% !important;  
        max-width: 96% ;
        box-sizing: border-box; 
    }
    

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

    

    #id_menu_lesocial 
    {
        display: grid !important;
        /* Force 2 colonnes strictement égales (50% chacune) */
        grid-template-columns: 1fr 1fr !important; 
        grid-gap: 12px !important; /* Espace entre les boutons */
        
        width: 98% !important; /* On occupe presque tout l'écran pour gagner de la place */
        max-width: 1000px !important; 
        margin: 15px auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 8px !important;
        /*background-color: var(--var-color-white) !important;*/
    }
    
    #id_section_milieu.mode-social .btn_lesocial 
    {
        /* Largeur et Hauteur identiques */
        width: 100% !important;
        min-height: 60px !important; /* Force une hauteur commune */
        
        display: flex !important;
        flex-direction: row !important; /* Aligné horizontalement pour gagner de la hauteur */
        align-items: center !important;
        justify-content: center !important;
        
        /* On réduit les marges internes pour laisser de la place au texte */
        padding: 5px !important; 
        gap: 5px !important; 
        
        /*background-color: white !important;*/
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        cursor: pointer;
        
        /* Typographie : La clé pour que ça tienne sur une ligne */
        font-size: 1rem !important; 
        text-align: center !important;
        box-sizing: border-box !important;
    }



    #id_dynamique_lesocial 
    {
        width: 95% !important;
        max-width: 1000px !important; /* Doit être identique au max-width du menu ci-dessus */
        margin: 0 auto 20px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
    }

    #id_section_milieu.mode-social .btn_lesocial.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }
    

    

    #id_section_milieu.mode-social .btn_lesocial span 
    {
        white-space: nowrap !important; /* INTERDIT le retour à la ligne */
        display: inline-block !important;
    }
    



    #id_section_milieu.mode-social .btn_lesocial.active i 
    {
        color: var(--var-color-salmon) !important;
    }

    
    .info_card_lesocial 
    {
        padding: 30px !important;
        /*margin-top: 20px;*/
    }

    .card_header_lesocial 
    {
        font-size: 1.1rem;
        /*margin-bottom: 15px;*/
    }

    .card_texte_lesocial 
    {
        font-size: 1.1rem;
    } 



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

    #id_section_milieu.mode-contacteznous 
    {
        display: flex !important ;
        flex-direction: column !important ;  
        align-items: center !important ;     
        width: 96% !important ;
    } 

    /* encadré des deux boutons : social ou business*/

    #id_menu_contacteznous 
    {
        display: flex !important;
        width: 96% !important;
        max-width: 96% !important;  
        height: 100px !important;
        margin: 20px auto !important;
        padding: 20px !important;  
        gap: 20px !important;    
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important; 
        border-radius: 5px !important;

        box-sizing: border-box !important;
        align-items: stretch !important; 
    }

    /* boutons : social ou business */

    #id_section_milieu.mode-contacteznous .btn_contacteznous 
    {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        
        height: 100% !important; 
        
       
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        color: var(--var-color-black) !important;
        
        
        gap: 20px !important ;  
        
        padding: 0 40px !important;
        
        cursor: pointer !important;
        
        transition: all 0.5s ease !important;
        white-space: nowrap !important;

    } 


    #id_section_milieu.mode-contacteznous .btn_contacteznous.active 
    {
        background-color: var(--var-color-black) !important ;
        color: var(--var-color-salmon) !important ;
    } 
    
    #id_section_milieu.mode-contacteznous .btn_contacteznous i 
    {
        margin-bottom: 0 !important ;    
        font-size: 1rem !important ;   
        color: inherit !important ;
    } 

    #id_section_milieu.mode-contacteznous .btn_contacteznous span 
    {
        text-align: left !important;
        white-space: nowrap !important; 
        font-size: 1rem !important ; 
    } 


            
       

    /* l encadre de particulier, entreprise, organisation et etat */
    #id_dynamique_contacteznous 
    {
     
        display: none ;
        width: 96% !important ;
        max-width: 96% !important ;
        
        align-items: center !important;     
        justify-content: center !important; 
        flex-direction: row !important; 

        height: 100px !important ;
        margin: 20px auto !important ;
        padding: 0 20px !important ;  
        gap: 20px !important ; 
 
        box-sizing: border-box !important;
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        
        box-sizing: border-box !important;
        overflow: hidden !important;     

    }  


    
    #id_categories_lesocial, 
    #id_categories_lebusiness 
    {
         
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center; 
        flex-wrap: nowrap;
        flex-direction: row;
    }

   
    .btn_cat_lesocial, .btn_cat_lebusiness 
    {
        flex: 1 !important;
        height: 60px !important; 
        display: flex !important; 

        max-width: 450px !important;  

        align-items: center !important;
        justify-content: center !important; 

        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        gap: 15px !important;
        
        padding: 0 15px !important;
        
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: all 0.5s ease !important;
        
    } 

    .btn_cat_lesocial i, .btn_cat_lebusiness span
    {
        font-size: 1rem !important ; 
    } 

    #id_section_milieu.mode-contacteznous .btn_cat_lesocial.active , 
    #id_section_milieu.mode-contacteznous .btn_cat_lebusiness.active
    {
        background-color: var(--var-color-black) !important ;
        color: var(--var-color-salmon) !important ;
    } 


    #id_bloc_formulaire_global 
    {
        display: none; 
        margin-top: 20px;
        
        width: 96% !important;
        max-width: 96% !important;
        
        margin-left: auto !important;
        margin-right: auto !important;

        margin: 20px auto; 
    }

    #id_titre_dynamique_form 
    {
        color: var(--var-color-black);
        border: 2px solid var(--var-color-white); 
        
        margin-bottom: 20px;
        text-align: center ;

        justify-items: center;
        align-content: center ;
        
        font-size: 1rem; 
        padding-top: 30px; 
        padding-bottom: 30px; 
    }
    
    #id_champs_variables , 
    #id_champs_communs , 
    .form_section[style*="display: block"] 
    {
        display: flex !important ;
        flex-direction: column ;
        gap: 20px ; 
    }

    #id_champs_variables 
    {
        margin-bottom: 20px;
    } 

    #id_form_contact_final .form-group 
    {
        display: flex ;
        flex-direction: column ;
        width: 100% ;
    }

    #id_form_contact_final label 
    {
        
        margin-bottom: 5px ; 
        text-align: left ;
        font-size: 1rem ;
    }


    #id_form_contact_final input, 
    #id_form_contact_final select, 
    #id_form_contact_final textarea 
    {
        width: 100% !important;
        padding: 15px;
        margin: 0; 
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
        box-sizing: border-box ;
        font-size: 1rem ;
    }

    
    .btn_envoi_demande_social_business 
    {
        width: 100% ;
        
        
        font-weight: bold ;
        cursor: pointer ;

        background-color: var(--var-color-white) !important ;
        border: 2px solid var(--var-color-black) !important ;
        border-radius: 5px !important; 
        color: var(--var-color-black) ; 

        padding: 15px ;
        margin-top: 20px ; 
        margin-bottom: 20px ; 
        padding-top: 30px; 
        padding-bottom: 30px; 

        text-align: center ;

        justify-items: center;
        align-content: center ;
        
        font-size: 1rem; 
        
    }   
        
         

    .btn_envoi_demande_social_business:hover 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
        transition: all 0.3s ease-in-out !important;
        
    } 

    #message 
    {
        aspect-ratio: 100 / 30 !important;
        min-height: 150px;
    }





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

    
    #id_menu_sinscrire 
    {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;  
        height: 100px !important;
        margin: 20px auto !important;
        padding: 20px !important;  
        gap: 5px !important;    
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;  
        border-radius: 5px !important;
        box-sizing: border-box !important;
        align-items: stretch !important;  
    }  

    #id_section_milieu.mode-sinscrire .btn_sinscrire 
    {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        height: 100% !important; 
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        
        gap: 5px !important; 
        padding: 0 20px !important;
        
        cursor: pointer !important;
        color: var(--var-color-black) !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
    } 

    #id_section_milieu.mode-sinscrire .btn_sinscrire.active 
    {
        background-color: var(--var-color-black) !important ;
        color: var(--var-color-salmon) !important ;
    }

    .btn_sinscrire i 
    {
        margin-bottom: 0 !important;   
        font-size: 1rem !important;   
    }

    #id_sinscrire_particulier , 
    #id_sinscrire_entreprise , 
    #id_sinscrire_organisation , 
    #id_sinscrire_etat
    {

        width: 96% !important;
        max-width: 96% !important;  
        
        margin: 20px auto !important;

        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;  
        border-radius: 5px !important;
        box-sizing: border-box !important;
        
        
    }
     

    #id_titre_sinscrire_particulier , 
    #id_titre_sinscrire_entreprise , 
    #id_titre_sinscrire_organisation , 
    #id_titre_sinscrire_etat   
    {
        color: var(--var-color-black);
        /*border: 2px solid var(--var-color-white);*/ 
        
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: center ;

        justify-items: center;
        align-content: center ;
        
        font-size: 1rem; 
        padding-top: 20px; 
        padding-bottom: 20px; 
    }

       
    [class^="form_group_sinscrire_"] 

    {
        display: flex !important ;
        flex-direction: column ;
        
        margin-bottom: 20px ; 
        padding-left : 40px ;  
        padding-right : 20px ; 
    } 

    [class^="form_group_sinscrire_"] label
    
    {
        width: 96% !important;
        margin-bottom: 5px ; 
        font-size: 1rem ;
        text-align: left;
    }


    .form_group_sinscrire_particulier input, 
    .form_group_sinscrire_particulier select, 
    .form_group_sinscrire_particulier textarea , 

    .form_group_sinscrire_entreprise input, 
    .form_group_sinscrire_entreprise select, 
    .form_group_sinscrire_entreprise textarea , 

    .form_group_sinscrire_organisation input, 
    .form_group_sinscrire_organisation select, 
    .form_group_sinscrire_organisation textarea , 

    .form_group_sinscrire_etat input, 
    .form_group_sinscrire_etat select, 
    .form_group_sinscrire_etat textarea  
    {
        /*width: 96% !important;*/
        width: 100% !important;
        padding-left : 10px ;  
        padding-right : 10px ;
        height: 60px ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
        box-sizing: border-box ;
        font-size: 1rem ;
    } 

    
    #id_section_milieu [class^="btn_submit_sinscrire_"] 
    {
        /* ÉTAPE 1 : On change width à 'auto' pour que les marges dictent la largeur */
        width: calc(100% - 60px) !important; 

        height: 105px ; /* 1.5 x 60px */ 
        
        margin-left: 40px !important;  
        margin-right: 20px !important;

        display: block !important; 

        
        padding-left:15px ; 
        padding-right: 15px ; 

        margin-top: 10px; 
        margin-bottom: 20px;
        font-weight: bold;
        cursor: pointer;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        color: var(--var-color-black); 
        text-align: center ;
        justify-items: center;
        align-content: center ;
        
        font-size: 1rem; 
        padding-top: 20px;  
        padding-bottom: 20px;
        box-sizing: border-box !important;
    }         
          

    .btn_submit_sinscrire_organisation  
    {
        cursor:pointer ; 
    } 

    #id_section_milieu [class^="btn_submit_sinscrire_"]:hover 

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

    
    /************************/
    /* Partie se connecter  */ 
    /************************/

    #id_section_milieu.mode-seconnecter 
    {
  
        width: 100% !important;
        min-height: 80px !important;  
        

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;
        
        
        padding: 5px !important; 
        gap: 20px !important; 
        
        
        cursor: pointer;
        
        
        font-size: 1rem !important; 
        text-align: center !important;
        box-sizing: border-box !important;
    }
 
    

    
    #id_menu_seconnecter 
    {
        display: grid !important; 
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 

        width: 96% !important;
        max-width: 96% !important;

        height: auto !important; 
        min-height: 120px !important;
        max-height: 180px !important; 

        margin: 20px auto !important; 
        padding: 15px !important; 
        gap: 15px !important;
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 8px !important; 
        box-sizing: border-box !important;
        
        align-items: center !important; 
        justify-items: center !important;
        
        overflow: hidden;  
    }
 
    #id_menu_seconnecter .btn_seconnecter 
    {
        width: 100% !important;
        height: 100% !important;
        max-height: 80px !important; 
        margin: 0 !important;
    }    

    #id_section_milieu.mode-seconnecter-entr .btn_seconnecter 
    {
        flex: 1 !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; 
           
        height: 60px !important;
        border: 2px solid var(--var-color-black) !important;
        background-color: var(--var-color-white) !important;
        border-radius: 5px !important;
     
        padding: 10px !important;
        gap: 20px !important;    
        white-space: nowrap !important;
    }
    
    
   

    .btn_seconnecter 
   {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;                         
        height: 100%;                    
        border: none;                    
        cursor: pointer;
        /*gap: 10px;*/
        color: var(--var-color-black);
        transition: all 0.3s ease;
    }  

    #id_section_milieu.mode-seconnecter .btn_seconnecter.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }  
 

    #id_section_milieu.mode-seconnecter .btn_seconnecter i 
    {
        margin-bottom: 0 !important;    
        font-size: 1rem !important;  
        color: inherit !important;
    } 

    #id_section_milieu.mode-seconnecter .btn_seconnecter span 
    {
        text-align: left !important;
        white-space: nowrap !important; 
    } 

 
    #id_section_milieu 
    {
        display: flex;
        
        flex-direction: column !important;  
        flex-direction: column !important;
        align-items: center;
        padding: 20px; 

        width: 96%;
        max-width: 96%;
        margin: 0 auto;
    }


    .menu_seconnecter, 
    [class^="sidentifier_mdpoubli_"] 
    {
        width: 96%; 
        max-width: 96%;          
        display: none;         
        justify-content: center;
        gap: 20px ;
        margin-top: 40px ;  
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;     

    } 
    
    
    
    [class^="sidentifier_mdpoubli_"] 
    {
        /* FIXE LA LARGEUR */
        width: 96% !important;
        max-width: 96% !important;
        box-sizing: border-box !important; /* Crucial : inclut padding/border dans les 96% */
        
        /* FIXE LA HAUTEUR */
        height: 100px !important;
        min-height: 100px !important; 
        max-height: 100px !important;
        overflow: hidden; 

        /* STABILISE LE FLEX */
        display: none; /* Sera 'flex' via JS */
        flex-direction: row !important;
        align-items: center !important; /* Aligne les boutons verticalement au centre */
        justify-content: center !important;
        
        margin: 40px auto 0 auto !important;
        padding: 0 15px !important; /* Padding horizontal léger */ 
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;   
        background-color: var(--var-color-white);
    } 




    [class^="btn_action_"] 
    {
        
        width: 100% !important;
        height: 100% !important; 
        
        
        min-height: 50px !important;  
        max-height: 70px !important;  
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        
        /* 4. ESTHÉTIQUE */
        padding: 10px 20px !important;
        border-radius: 5px !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
        border: 2px solid var(--var-color-black);
        background-color: var(--var-color-white) !important;
        border-radius: 5px !important;
        cursor: pointer;
    } 
    
    


    #id_section_milieu [class^="btn_action_"].active 
    {
        background-color: var(--var-color-black) !important;
        background: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;    
    }

    

    [id^="id_menu_methode_connexion_"] 
    {
        width: 96% !important;
        height: 100px !important; 
        min-height: 100px !important; 
        max-height: 100px !important;
        overflow: hidden;
        
        /* Encadrement identique au conteneur parent pour l'harmonie */
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important; 
        gap : 15px ; 

        /* Espacement intérieur */
        padding: 20px !important;
        font-size: 1.1rem; 
        margin-top: 70px !important;
         
        /* Structure interne */
        box-sizing: border-box !important;
    } 

    [id^="id_menu_methode_connexion_"], span 
    {
        font-size: 1rem; 
    } 
    [id^="id_menu_methode_connexion_"], i 
    {
        font-size: 1rem; 
    }

    .methode_connexion_cont 
    {
        display: none; /* Changé en flex par le JS */
        flex-direction: row !important;    /* Les boutons restent alignés horizontalement */
        width: 96%;
        justify-content: center;
        gap: 20px;
    } 

    .btn_methode_connexion 
    {
        height: 100% !important;
        flex: 1;
        width: 96%; 
        max-width: 96%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        
        padding: 15px 25px;
        font-size: 1rem;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
    } 

    
    .btn_methode_connexion.active 
    {
        background-color: var(--var-color-black);

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



    /* Gestion du formulaire d'authentification */  

    #id_zone_formulaires_connexion  
    {
        width: 96%; 
        max-width: 96%; 

        width: 96%;
        display: flex;
        flex-direction: column;
        align-items: center; 

        /* Suppression du height: 100px qui bloquait l'affichage */
        height: auto !important; 
        margin: 40px auto 0 auto !important;
        box-sizing: border-box;
        
    } 

    

    .form_final_cont 
    {
        display: flex;
        flex-direction: column; 
        background-color: var(--var-color-white);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        padding: 25px;
        margin: 0 auto;
        width: 100%;  
        max-width: 100%; 
        box-sizing: border-box; 

    }  


    .titre_form_final 
     {
        display: flex; /* Force le titre à se comporter comme un bloc entier */
        width: 100%;
        align-items: center;
        text-align: center;
        justify-content: center;
        color: var(--var-color-black);
        /*border: 2px solid var(--var-color-black);*/
        border-radius: 5px;
        height: 100px;
        margin-top: 0;
        margin-bottom: 25px;
        text-transform: uppercase;
        font-size: 1.1rem;
        padding-bottom: 10px;
    }  



    .form_grid_final 
    {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 100%; /* S'assure que le formulaire prend toute la place sous le titre */
    } 

    .form_group_connexion 
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }  


    .form_group_connexion label 
    {
        
        margin-bottom: 10px; /* Espace entre le texte et la zone de saisie */
        color: var(--var-color-black);
        font-size: 1rem;
    }

    /* Style des champs de saisie */
    .form_group_connexion input, 
    .form_group_connexion select 
    {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        box-sizing: border-box; /* Important pour que le padding ne casse pas la largeur */
        font-size: 1rem;
    }

    /* Style de l'astérisque obligatoire */
    .label_obligatoire 
    {
        color: var(--var-color-salmon);
        margin-left: 3px;
    }

    /* Bouton de validation */
    .btn_validation_final 
    {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
        height: 100px ;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px;
        font-weight: bold;
        
        font-size: 1rem;
        cursor: pointer;
        transition: 0.3s ease;
    }

    #id_zone_mdp_oubli 
    {
        width: 96% ;
        max-width: 96% ;
         
        box-sizing: border-box ; 
        margin-left: auto ;
        margin-right: auto ;
        display: none ;  
        
        
    } 

    
    [class^="sidentifier_mdpoubli_"] , 
    #id_zone_mdp_oubli 
    {
        width: 96%; 
        max-width: 96%;          
        display: none;         
        justify-content: center;
        gap: 20px;
        margin-top: 40px;      /* Espace entre les deux lignes de boutons */
    } 
    
   

    button[data-target^="seconnecter_mdp_oubli_"].btn-mdp-actif 
    {
        background-color: var(--var-color-black) !important ;
        color: var(--var-color-salmon) !important ;
         
        
    } 

    .titre_form_final_mdp_oubli 
     {
        display: flex ;  
        width: 100% ;
        align-items: center ;
        text-align: center ;
        justify-content: center ;
        color: var(--var-color-black) ;
        /*border: 2px solid var(--var-color-black) ;*/
        border-radius: 5px ;
        height: 100px ;
        margin-top: 0;
        margin-bottom: 25px;
        text-transform: uppercase;
        font-size: 1rem;
        padding-bottom: 10px;
    } 
    
    .form_group_mdp_oubli 
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }  


    .form_group_mdp_oubli label 
    {
        
        margin-bottom: 10px; /* Espace entre le texte et la zone de saisie */
        color: var(--var-color-black);
        font-size: 1rem;
    }

    /* Style des champs de saisie */
    .form_group_mdp_oubli input 
    {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        box-sizing: border-box; /* Important pour que le padding ne casse pas la largeur */
        font-size: 1rem;
    }


    .btn_valider_mdp_oubli 
    {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
        height: 100px ;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px;
        font-weight: bold;
        
        font-size: 1rem;
        cursor: pointer;
        transition: 0.3s ease;
    }


    #id_logo_cont 
    {
        height: 70% ; 
        transition: transform 0.3s ease ;
    }

    #id_mantra_cont span 
    {
        font-size: 1rem ; 
    }


}


@media (min-width: 1025px)  

{
    .section_haut, .section_milieu, .section_bas 
    {
        width: 100% ;
        max-width: none ;
        margin: 0 ;
    }

    
    .section_nav, #id_section_milieu 
    {
        max-width: none ;
        width: 100% ;
        padding: 0 20px ;
    } 

    #id_section_milieu
    {
        display: flex ; 
        flex-direction: column ; 
    }

    .section_nav
    {
        display: flex ;
        flex-direction: row ;
        justify-content: flex-start ;
        align-items: center ;
        margin: 0 ;
        width: 100% ; 
        gap: 20px ;
        flex-wrap: nowrap !important;
    } 

    
    #id_menu_cont 
    {
        display: flex ; 
        width: 120px ;
        margin: 0 ;  
    } 


    #id_menu_bouton_cont 
    {
        width: 100% ;
        height: 45px ; 
        font-size: 0.9rem ;
        cursor: pointer ;
        border: 2px solid var(--var-color-black) ;
    } 



    #id_menu_desc_cont 
    {
        position: static ;
        width: auto ;
        display: flex ;  
        flex: 1 ;
        top: 100% ;  
        left: 0 ;
        z-index: 1000 ; 
        display: none ; 
        background-color: var(--var-color-white) ;
    }

    #id_menu_desc_cont.is-visible 
    {
    display: flex !important ; 
    opacity: 1 !important ;
    } 

    

    .class_menu_desc 
    {
        display: flex !important ;
        flex-direction: row ;
        flex-wrap: nowrap ;
        justify-content: space-evenly ;
        align-items: center ;
        width: 100% ;
        gap: 10px ;
    }

    .bouton_menu_desc 
    {
        font-size: 1rem ;
        padding: 0 15px ;
        height: 45px ; 
        width: auto ;
    } 

    
    .grille_videos_responsive 
    {
        display: grid ;
        grid-template-columns: repeat(2, 1fr) ; 
        grid-template-rows: auto ;  

        gap: 30px ;          
        max-width: 1000px ;      
        margin: 40px auto ;    
        padding: 20px ;
        
    }     

    .video_container 
    {
        width: 100% ;
        display: flex ;
        justify-content: center ;
        align-items: center ; 
        border-radius: 12px ;
        overflow: hidden ;
    }
    
    .video_item 
    {
        width: 100% ;
        aspect-ratio: 16 / 9 ; 
        display: block ;
        border: 2px solid var(--var-color-black) ; 
        border-radius: 5px ;
        
    }

    /* Partie la création */

    #id_section_milieu.mode-creation 
    {
        display: flex !important;
        flex-direction: column !important; /* Force le cadre dynamique en DESSOUS du menu */
        align-items: center !important;    /* Centre les deux blocs horizontalement */
        width: 100% !important;
    }

    #id_menu_creation 
    {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        
        width: 96% !important;
        max-width: 96% !important;
        margin: 15px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        
        /* L'ENCADREMENT DU CADRE GLOBAL */
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        gap: 15px !important;
    }
 

    #id_section_milieu.mode-creation .btn_crea 
    {
        flex: 1 !important; /* Pour qu'ils occupent la même largeur */
        display: flex !important;
        flex-direction: row !important; /* Icône à gauche du texte */
        align-items: center !important;
        justify-content: center !important;
        
        height: 55px !important;
        padding: 0 15px !important;
        gap: 10px !important;

        /* Bordure des boutons individuels */
        border: 2px solid var(--var-color-black) !important;
        background-color: var(--var-color-white) !important;
        border-radius: 5px !important;
        cursor: pointer;
        transition: all 0.3s ease;

    }

    #id_section_milieu.mode-creation .btn_crea.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    } 

    #id_section_milieu.mode-creation .btn_crea i 
    {
        margin-bottom: 0 !important;    /* Supprime la marge du bas utilisée en mode colonne */
        font-size: 1.2rem !important;   /* Taille adaptée pour le mode ligne */ 
        color: inherit !important;
    }
      

    #id_section_milieu.mode-creation .btn_crea span 
    {
        text-align: left !important;
        white-space: nowrap !important; /* Évite que le texte ne revienne à la ligne */
    }
  
    

    #id_dynamique_lacreation 
    {
        /* On utilise EXACTEMENT les mêmes propriétés de largeur et marges que le cadre du haut */
        width: 96% !important;
        max-width: 96% !important;
        margin: 0 auto 15px auto !important; /* 0 en haut pour réduire l'espace entre les deux */
        
        padding: 20px !important;
        box-sizing: border-box !important;
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        
        display: none; /* Affiché par le JS */
    } 


    .classe_lacreation 
    {
        display: flex ;
        flex-direction: column ;
        align-items: center ;  
        width: 100% ;
    } 

    /************************************/
    /*      Partie Nos Valeurs          */ 
    /************************************/  

    .menu_nosvaleurs 
    {
        display: flex !important;
        justify-content: space-evenly; 
        align-items: center;
        
        gap: 0; 
        
        width: 100%; 
        max-width: 100%;
        
        margin: 20px auto;
        padding: 15px 0; 
        
        background-color: var(--var-color-white);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
    }

    .btn_nosvaleurs 
    {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0; 
        cursor: pointer;
        transition: all 0.3s ease;
        
        /* Optionnel : pour que les boutons soient ronds et bien centrés */
        border-radius: 5px;
        border: 2px solid var(--var-color-black);
    }

    .btn_nosvaleurs:hover
    {
        background-color: var(--var-color-black) ;
        color: var(--var-color-salmon) ;
    }



    /* Partie Services*/ 
    
    .menu_nosservices 
    {
        display: flex ;
        flex-wrap: wrap ;        
        justify-content: center ; 
        align-items: center ; 
        justify-content: space-evenly; 
        
        gap: 20px ;              
        
        border: 2px solid var(--var-color-black); 
        border-radius: 5px ;
        background-color: var(--var-color-white) ; 
        
        padding: 15px 5px ;          
        max-width: 96% ;       

        box-sizing: border-box ;
        width: 96% ;
        margin: 20px auto ;
        overflow: visible ;
        
    } 


     #id_contenu_nosservices.is-visible 
     {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important; 
        justify-content: space-evenly !important;
        flex-wrap: wrap;
        gap: 30px;
        width: 96% !important;
        max-width: 96% !important ;
        margin: 20px auto !important; 
        padding: 15px 5px !important ;
        text-align: center;
    } 

    /* Force le centrage horizontal des logos */ 
    #id_section_milieu.mode-services 
    {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        width: 100% !important;
    }


    .info_card_nosservices 
    {
        padding: 30px !important;
        margin-top: 20px;
    }

    .card_header_nosservices 
    {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .card_texte_nosservices 
    {
        font-size: 1.1rem;
    } 


    /****************************/
    /* Partie Nos Références */
    /****************************/
    
    #id_menu_nosreferences 
    {
        width: 96% !important;
        max-width: 96% !important;  
        
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Force la ligne unique */
        gap: 10px; /* Réduit l'espace entre les boutons eux-mêmes */
        padding: 20px 15px; /* Réduit le padding interne du cadre */
    }


    #id_menu_nosreferences.is-open 
    {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between; 
        align-items: center;
        
        width: 96% !important;
        max-width: 96% !important;  
        margin: 0 auto 10px auto !important;
        padding: 15px 20px; 
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px;
        background-color: var(--var-color-white);
        box-sizing: border-box;
    }


    #id_dynamique_nosreferences 
    {
        border: 2px solid var(--var-color-black) !important;
        background-color: var(--var-color-white);
        border-radius: 5px;
        padding: 25px;
        
        /* ALIGNEMENT VERTICAL PARFAIT */
        width: 96% !important;
        max-width: 96% !important;  
        margin: 0 auto !important; /* Centre le cadre sous le menu */
        box-sizing: border-box;
    }

    .onglet_contenu_nosreferences 
    {
        border: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .btn_nosreferences 
    {
        flex: 1;           
        min-width: 0;       
        margin: 0 5px;     
        
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;         /* Plus d'espace entre l'icône et le texte */
        padding: 12px 10px; /* Padding vertical pour rendre le bouton plus "épais" */
        
        border: 2px solid var(--var-color-black); /* On garde la bordure des boutons */
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn_nosreferences span 
    {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    /* Force le centrage horizontal des logos */ 
    #id_section_milieu.mode-references 
    {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        width: 100% !important;
    } 


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

    
    #id_section_milieu.mode-social 
    {
        display: flex !important;
        flex-direction: column !important; /* Force le cadre dynamique en DESSOUS du menu */
        align-items: center !important;    /* Centre les deux blocs horizontalement */
        width: 100% !important;
    } 

    #id_menu_lesocial 
    {
        display: flex !important;
        flex-direction: row !important; /* Force l'alignement horizontal */
        justify-content: space-between !important; /* Espacement harmonieux */
        align-items: center !important;
        
        width: 96% !important;
        max-width: 96% !important;
        margin: 15px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        gap: 15px !important; /* Espace entre les boutons */
    }
    

    #id_section_milieu.mode-social .btn_lesocial 
    {
        flex: 1 !important; /* Pour qu'ils aient tous la même largeur */
        display: flex !important;
        flex-direction: row !important; /* Icône à côté du texte */
        align-items: center !important;
        justify-content: center !important;
        height: 55px !important;
        padding: 0 10px !important;
        gap: 10px !important;
        
        cursor: pointer ;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: white !important;
        white-space: nowrap !important; /* Évite que le texte passe à la ligne */
    }

    #id_section_milieu.mode-social .btn_lesocial.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }  

    #id_section_milieu.mode-social .btn_lesocial i 
    {
        margin-bottom: 0 !important;    /* Supprime la marge du bas utilisée en mode colonne */
        font-size: 1.2rem !important;   /* Taille adaptée pour le mode ligne */ 
        color: inherit !important;
    }

    #id_section_milieu.mode-social .btn_lesocial span 
    {
        text-align: left !important;
        white-space: nowrap !important; /* Évite que le texte ne revienne à la ligne */
    } 

    #id_dynamique_lesocial 
    {

         display: none ; 

        
        width: 96% !important ;
        max-width: 96% !important ;
        margin: 0 auto 15px auto !important ;  
        
        padding: 20px !important ;
        box-sizing: border-box !important ;
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        
         
    } 

    .classe_lesocial 
    {
        display: flex ;
        flex-direction: column ;
        align-items: center ;  
        width: 100% ;
    } 


    .info_card_lesocial 
    {
        padding: 30px !important;
        /*margin-top: 20px;*/

    }

    .card_header_lesocial 
    {
        font-size: 1.1rem;
        /*margin-bottom: 15px;*/
    }

    .card_texte_lesocial 
    {
        font-size: 1.1rem;
    } 

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

    #id_section_milieu.mode-contacteznous 
    {
        display: flex !important;
        flex-direction: column !important;  
        align-items: center !important;   
        width: 96% !important;
    } 

    #id_section_milieu 
    {
        display: flex !important;
        flex-direction: column !important;  
        align-items: center !important;     
        width: 96%;
        gap: 20px;                         
    }
    
    #id_menu_contacteznous 
    {
        display: flex !important ; 

        width: 96% !important ;
        max-width: 96% !important ;  
        height: 100px !important ;
        margin: 20px auto !important ;
        padding: 20px !important ;  
        gap: 20px !important ;    
        
        background-color: var(--var-color-white) !important ;
        border: 2px solid var(--var-color-black) !important ;  
        color: var(--var-color-black) !important ; 
        border-radius: 5px !important ; 

        box-sizing: border-box !important ;
        align-items: stretch !important ;  
    }




    #id_section_milieu.mode-contacteznous .btn_contacteznous 
    {
        flex: 1 !important ;
        display: flex !important ;
        align-items: center !important ;
        justify-content: center !important ;
        
         
        height: 100% !important ;
        gap: 20px !important;  
        padding: 0 40px !important; 
        
         
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;
        color: var(--var-color-black) !important;
        border-radius: 5px !important;
        
        cursor: pointer !important;
        
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
    }


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

    #id_section_milieu.mode-contacteznous .btn_contacteznous.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }  

    #id_section_milieu.mode-contacteznous .btn_contacteznous i 
    {
        margin-bottom: 0 !important;     
        font-size: 1.1rem !important;     
        color: inherit !important;
    }

    #id_section_milieu.mode-contacteznous .btn_contacteznous span 
    {
        text-align: left !important;
        white-space: nowrap !important;  
    } 

    #id_dynamique_contacteznous 
    {
        display: none ;  
        flex-direction: row !important ;
        justify-content: center !important ;
        align-items: center !important ; 
        
        width: 96% !important ;
        max-width: 96% !important ;
        gap: 30px !important ; 
        
        margin: 20px auto !important ;
        padding: 30px 20px !important ; 
        box-sizing: border-box !important ;
        
        background-color: var(--var-color-white) !important ;
        border: 2px solid var(--var-color-black) !important ; 
        color: var(--var-color-black) ;
        border-radius: 5px !important ;
        
        overflow: hidden !important;

    } 

    .classe_contacteznous 
    {
        display: flex ;
        flex-direction: column ;
        align-items: center ;  
        justify-content: center !important ;

        width: 100% ;
    }  


    #id_menu_contacteznous , 
    #id_categories_lesocial , 
    #id_categories_lebusiness 
    {
        display: flex ;
        align-items: center ;
        justify-content: center ;   

        height: 40px ;  
    }

    #id_categories_lesocial , 
    #id_categories_lebusiness 
    {
        flex-direction: row ;
        flex-wrap: nowrap ;
    }

    .btn_cat_lesocial ,
    .btn_cat_lebusiness 
    {
        
        display: flex !important ;
        align-items: center !important ;
        justify-content: center !important ; 
        
        flex: 1 !important ;
        height: 60px !important ;
        gap: 10px !important ;
        margin: 0 !important ; 
        padding: 0 15px !important ;
           
        
        border: 2px solid var(--var-color-black) !important ;
        border-radius: 5px !important ;
        background-color: var(--var-color-white) !important ;
        
    } 

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

    .btn_cat_lesocial.active i , 
    .btn_cat_lebusiness.active i 
    {
        color: var(--var-color-salmon) !important ;
    } 
     
    .btn_cat_lesocial i , 
    .btn_cat_lebusiness i 
    {
        font-size: 1.1rem !important;
        margin: 0 !important;
    } 


    #id_champs_variables , 
    #id_champs_communs , 
    .form_section[style*="display: block"] 
    {
        display: flex !important ;
        flex-direction: column ;
        gap: 20px ;
    }

    #id_champs_variables 
    {
        margin-bottom: 20px ;
    } 



    #id_bloc_formulaire_global 
    {
        display: none ;  

        width: 96% !important ;
        max-width: 96% !important ;
        
        margin-left: auto !important ;
        margin-right: auto !important ;
        margin-top: 20px ;
    }

    /* 3. Style des groupes (Label + Input) */
    #id_form_contact_final .form-group 
    {
        display: flex ;
        flex-direction: column ;
        width: 100% ;
    }

    #id_form_contact_final label 
    {
        
        margin-bottom: 8px; 
        text-align: left;
    }

    /* 4. Champs de saisie */
    #id_form_contact_final input, 
    #id_form_contact_final select, 
    #id_form_contact_final textarea 
    {
        width: 100% !important; 

        padding: 12px;
        margin: 0;  

        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
        box-sizing: border-box ; 

        font-size: 1.1rem ;
    }

    /* 5. Le Bouton Submit */
    .btn_envoi_demande_social_business 
    {
        width: 100% ;
        padding: 15px ;
        margin-bottom: 20px ; 
        margin-top: 20px ;  
        font-weight: bold ;
        cursor: pointer ; 
        height: 100px ;
        border-radius: 5px ;

    }

    
    
    #id_bloc_formulaire_global 
    {
        width: 96% ;
        max-width: 96% ; 
        margin: 20px auto ;  
    }
    

    #message 
    {
        aspect-ratio: 100 / 30 !important;
        min-height: 150px;
    }


   .btn_envoi_demande_social_business 
   {
        
        background-color: var(--var-color-white) ; 
        color: var(--var-color-black) ;
        border: 2px solid var(--var-color-black) !important ; 

        
        margin-top: 20px ;
        margin-bottom: 20px ;

        /* text-transform: uppercase ; */ 

        justify-items: center ;
        align-content: center ;
        
        font-size: 1.1rem ; 
        padding-top: 30px ; 
        padding-bottom: 30px ;
   } 

   .btn_envoi_demande_social_business:hover
   {
        background-color: var(--var-color-black) ; 
        color: var(--var-color-salmon) ;
   } 


   #id_form_contact_final input:focus , 
   #id_form_contact_final select:focus , 
   #id_form_contact_final textarea:focus 
    {
    
        border-color: var(--var-color-salmon) !important ; 
        outline: none !important ;
        transition: border-color 0.3s ease, box-shadow 0.3s ease ; 
        
    }


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

    
    #id_section_milieu.mode-sinscrire 
    {
        display: flex !important ;
        flex-direction: column !important ; 
        align-items: center !important ;   
        width: 100% !important ;
    }  

    #id_section_milieu.mode-sinscrire-entr
    {
        display: flex !important ;
        flex-direction: column !important ; 
        align-items: center !important ;     
        width: 100% !important ;
    } 

    
    
    #id_menu_sinscrire 
    {
        display: flex !important;
        width: 96% !important;
        max-width: 96% !important;
        height: 100px !important;
        margin: 20px auto !important;
        padding: 20px !important; 
        gap: 20px !important;  
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }




    #id_section_milieu.mode-sinscrire .btn_sinscrire 
    {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        
        height: 100% !important; 
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 8px !important;
        background-color: var(--var-color-white) !important;
        
        gap: 20px !important; 
        
        padding: 0 40px !important;
        
        cursor: pointer !important;
        color: var(--var-color-black) !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
    } 


    #id_section_milieu.mode-sinscrire-entr .btn_sinscrire 
    {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        
        height: 100% !important; 
        
        
        border: 2px solid var(--var-color-black) !important;
        border-radius: 8px !important;
        background-color: var(--var-color-white) !important;
        
        
        gap: 20px !important; 
        
        padding: 0 40px !important;
        
        cursor: pointer !important;
        color: var(--var-color-black) !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
    }


    
   .btn_sinscrire 
   {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;                        
    height: 100%;                   
    border: none;                   
    background: transparent;
    cursor: pointer;
    gap: 10px;
    color: var(--var-color-black);
    transition: all 0.3s ease;
    }

    .btn_sinscrire:hover, .btn_sinscrire.active 
    {
        background-color: var(--var-color-salmon) ;
        color: var(--var-color-black) ;
        border-radius: 5px;
    }

    #id_section_milieu.mode-sinscrire .btn_sinscrire.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }  

    #id_section_milieu.mode-sinscrire .btn_sinscrire i 
    {
        margin-bottom: 0 !important;    
        font-size: 1rem !important;   
        color: inherit !important;
    }

    #id_section_milieu.mode-sinscrire .btn_sinscrire span 
    {
        text-align: left !important;
        white-space: nowrap !important; 
    } 
 

    #id_section_milieu.mode-sinscrire-entr .btn_sinscrire.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    }  

    #id_section_milieu.mode-sinscrire-entr .btn_sinscrire i 
    {
        margin-bottom: 0 !important;   
        font-size: 1rem !important;   
        color: inherit !important;
    }

    #id_section_milieu.mode-sinscrire-entr .btn_sinscrire span 
    {
        text-align: left !important;
        white-space: nowrap !important; 
    } 
 
    

    /************************/
    /* Partie se connecter  */ 
    /************************/

    #id_menu_seconnecter 
    {
        display: flex !important;
        width: 96% !important;
        max-width: 96% !important; /* On limite la largeur sur PC pour éviter l'étirement */
        height: 100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 20px !important; /* Réduit pour laisser de la place aux boutons */
        gap: 20px !important;    /* Espace horizontal réduit entre les deux boutons */
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important; /* Cadre extérieur */
        border-radius: 5px !important;
        box-sizing: border-box !important;
        align-items: stretch !important; /* Force les boutons à prendre toute la hauteur */
    }


    
    
    #id_section_milieu.mode-seconnecter .btn_seconnecter 
    {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* On supprime le height: 55px et on met 100% pour remplir les 80px du parent */
        height: 100% !important; 
        
        /* L'encadrement de chaque bouton */
        border: 2px solid var(--var-color-black) !important;
        border-radius: 5px !important;
        background-color: var(--var-color-white) !important;
        
        /* Aération interne */
        gap: 15px !important; /* Espace entre icône et texte */
        
        padding: 0 40px !important;
        
        cursor: pointer !important;
        color: var(--var-color-black) !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
    } 


    .btn_seconnecter 
    {
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        transition: all 0.3s ease;
        
    }

    
    

    #id_section_milieu button.btn_seconnecter.active 
    {
        background-color: var(--var-color-black) !important;
        background: var(--var-color-black) !important; /* On ajoute background en plus de background-color */
        color: var(--var-color-salmon) !important;
    }

    /* On s'assure que l'icône à l'intérieur suit aussi la couleur saumon */
    #id_section_milieu button.btn_seconnecter.active i , button.btn_seconnecter.active span 
    {
        color: var(--var-color-salmon) !important;
    } 

    

    /* pour la gestion des boutons menu part/entr/orga/etat et leurs fils "sidentifier et mot de passe oublie*/
    #id_section_milieu 
    {
        display: flex;
                
        flex-direction: column;    
        justify-content: center;
        align-items: center;
        padding: 20px;
        width: 96%; 
        max-width: 96%;
    }


     .menu_seconnecter, 
    [class^="sidentifier_mdpoubli_"] 
    {
        width: 96%; 
        max-width: 96%;          
        display: none;         
        justify-content: center;
        gap: 20px;
        margin-top: 40px;      /* Espace entre les deux lignes de boutons */
    } 

    [class^="sidentifier_mdpoubli_"]
    {
        height: 100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 20px !important; /* Réduit pour laisser de la place aux boutons */
        gap: 20px !important;    /* Espace horizontal réduit entre les deux boutons */
        
        background-color: var(--var-color-white) !important;
        border: 2px solid var(--var-color-black) !important; /* Cadre extérieur */
        border-radius: 5px !important;
        box-sizing: border-box !important;
        align-items: stretch !important; 

    } 


    

    /* Les boutons eux-mêmes */
    [class^="btn_action_"] 
    {
        flex: 1;               
           
        padding: 15px 25px;
        font-size: 1.1rem;
        cursor: pointer;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        background-color: var(--var-color-white); 
        color: var(--var-color-black) ;
        white-space: nowrap;    
        
    }


    #id_section_milieu [class^="btn_action_"].active 
    {
        background-color: var(--var-color-black) !important;
        background: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
        
    }

    /* S'assure que l'icône et le texte à l'intérieur passent aussi en saumon */
    #id_section_milieu [class^="btn_action_"].active i, 
    #id_section_milieu [class^="btn_action_"].active span 
    {
        color: var(--var-color-salmon) !important;
    } 


    .methode_connexion_cont 
    {
        display: none;
        flex-direction: row; 

        width: 96%; 
        max-width: 96%;
        height: 100px !important; 

        
        margin: 40px auto 0 auto !important ; 

        padding: 20px !important;
        gap: 20px !important; 

        border: 2px solid var(--var-color-black);
        border-radius: 5px; 
        
        
        box-sizing: border-box !important; 
        justify-content: center;
        
        align-items: stretch !important;
        

    } 


    .btn_methode_connexion 
    {
        height: 100% !important;
        flex: 1;
        width: 96%; 
        max-width: 96%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        
        padding: 15px 25px;
        font-size: 1.1rem;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
    } 


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

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


    /* Gestion du formulaire d'authentification */  

    #id_zone_formulaires_connexion  
    {
        display: flex ; 
        flex-direction: column ;
        width: 96%; 
        max-width: 96%;
        /* Suppression du height: 100px qui bloquait l'affichage */
        height: auto !important; 
        margin: 40px auto 0 auto !important;
        box-sizing: border-box;
    } 

    .form_final_cont 
    {
        display: flex;
        flex-direction: column; /* Force l'empilement vertical du titre et du form */
        background-color: var(--var-color-white);
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        padding: 25px;
        margin: 0 auto;
        width: 100%; /* Prend toute la place du parent id_zone_formulaires_connexion */
        max-width: 100%; 
        box-sizing: border-box; 

    }  



     .titre_form_final 
     {
        display: flex; /* Force le titre à se comporter comme un bloc entier */
        width: 100%;
        align-items: center;
        text-align: center;
        justify-content: center;
        color: var(--var-color-black);
        /*border: 2px solid var(--var-color-black);*/
        border-radius: 5px;
        height: 100px;
        margin-top: 0;
        margin-bottom: 25px;
        text-transform: uppercase;
        font-size: 1.1rem;
        padding-bottom: 10px;
    }  



    .form_grid_final 
    {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 100%; /* S'assure que le formulaire prend toute la place sous le titre */
    } 

    .form_group_connexion 
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }  


    .form_group_connexion label 
    {
        
        margin-bottom: 10px; /* Espace entre le texte et la zone de saisie */
        color: var(--var-color-black);
        font-size: 1.1rem;
    }

    /* Style des champs de saisie */
    .form_group_connexion input, 
    .form_group_connexion select 
    {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        box-sizing: border-box; /* Important pour que le padding ne casse pas la largeur */
        font-size: 1.1rem;
    }

    /* Style de l'astérisque obligatoire */
    .label_obligatoire 
    {
        color: var(--var-color-salmon);
        margin-left: 3px;
    }

    /* Bouton de validation */
    .btn_validation_final 
    {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
        height: 100px ;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px;
        font-weight: bold;
        
        font-size: 1.1rem;
        cursor: pointer;
        transition: 0.3s ease;
    }

    #id_zone_mdp_oubli 
    {
        width: 96% ;
        max-width: 96% ;
         
        box-sizing: border-box ; 
        margin-left: auto ;
        margin-right: auto ;
        display: none ;  
        
        
    } 

    
    [class^="sidentifier_mdpoubli_"] , 
    #id_zone_mdp_oubli 
    {
        width: 96%; 
        max-width: 96%;          
        display: none;         
        justify-content: center;
        gap: 20px;
        margin-top: 40px;      /* Espace entre les deux lignes de boutons */
    } 
    
   

    button[data-target^="seconnecter_mdp_oubli_"].btn-mdp-actif 
    {
        background-color: var(--var-color-black) !important ;
        color: var(--var-color-salmon) !important ;
         
        
    } 

    .titre_form_final_mdp_oubli 
     {
        display: flex ;  
        width: 100% ;
        align-items: center ;
        text-align: center ;
        justify-content: center ;
        color: var(--var-color-black) ;
        /*border: 2px solid var(--var-color-black) ;*/
        border-radius: 5px ;
        height: 100px ;
        margin-top: 0;
        margin-bottom: 25px;
        text-transform: uppercase;
        font-size: 1.1rem;
        padding-bottom: 10px;
    } 
    
    .form_group_mdp_oubli 
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }  


    .form_group_mdp_oubli label 
    {
        
        margin-bottom: 10px; /* Espace entre le texte et la zone de saisie */
        color: var(--var-color-black);
        font-size: 1.1rem;
    }

    /* Style des champs de saisie */
    .form_group_mdp_oubli input 
    {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--var-color-black);
        border-radius: 5px;
        box-sizing: border-box; /* Important pour que le padding ne casse pas la largeur */
        font-size: 1.1rem;
    }


    .btn_valider_mdp_oubli 
    {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
        height: 100px ;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px;
        font-weight: bold;
        
        font-size: 1.1rem;
        cursor: pointer;
        transition: 0.3s ease;
    }

    


}

/********************************************************/
/*  4 - Commun                                          */ 
/********************************************************/

#id_section_milieu:not(.mode-references) #id_menu_nosreferences,
#id_section_milieu:not(.mode-references) #id_dynamique_nosreferences 
{
    display: none !important;
}

/* Idem pour les services */
#id_section_milieu:not(.mode-services) .menu_nosservices 
{
    display: none !important;
}


#id_section_milieu:not(.mode-creation) #id_menu_creation,
#id_section_milieu:not(.mode-creation) #id_dynamique_lacreation 
{
    display: none !important;
} 

#id_section_milieu:not(.mode-social) #id_menu_social,
#id_section_milieu:not(.mode-social) #id_dynamique_lesocial
{
    display: none !important;
} 


#id_section_milieu:not(.mode-contacteznous) #id_menu_contacteznous,
#id_section_milieu:not(.mode-contacteznous) #id_dynamique_contacteznous
{
    display: none !important;
} 

.mode-contacteznous #id_menu_contacteznous 
{
    display: flex !important; /* Affiche les boutons Social/Business */
    /*animation: fadeInDown 0.5s ease;*/
}



#id_section_milieu:not(.mode-sinscrire) #id_menu_sinscrire 
{
    display: none !important;
}

#id_section_milieu:not(.mode-sinscrire-entr) #id_menu_sinscrire 
{
    display: none !important;
}


#id_section_milieu:not(.mode-seconnecter) #id_menu_seconnecter 
{
    display: none !important;
}
 

.label_obligatoire 
{
    color: var(--var-color-red) !important;
    font-weight: bold;
    margin-left: 5px;
} 

/************************************/
/* Partie s 'inscrire car commune   */  
/************************************/ 

#id_section_milieu:not(.mode-sinscrire) #id_menu_sinscrire,
#id_section_milieu:not(.mode-sinscrire) #id_sinscrire_particulier 
{
    display: none !important;
}


#id_section_milieu:not(.mode-sinscrire-entr) #id_sinscrire_entreprise 
{
    display: none !important;
}


    

@media (min-width: 1025px) 
{

    .btn_sinscrire 
    {
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        transition: all 0.3s ease;
        font-size: 1.1rem !important;
    }

    /* État Actif (Noir/Saumon) - Déclenché par le JS */
    .btn_sinscrire.active 
    {
        background-color: var(--var-color-black) !important;
        color: var(--var-color-salmon) !important;
    } 
    

    #id_menu_sinscrire, 
    #id_sinscrire_particulier 
    {
        width: 95% !important; 
        max-width: 95% !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important; 
    }




    
    .btn_submit_sinscrire_particulier 
    {
        height: 100px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;
        width: 100% ;
        margin: 0 ;  

        color: var(--var-color-black) ;
        background-color: var(--var-color-white) ; 
        border: 2px solid var(--var-color-black) ;
        font-weight: bold;
        text-transform: uppercase ;
    } 

    .btn_submit_sinscrire_particulier:hover
    {
        color: var(--var-color-salmon) ; 
        background-color: var(--var-color-black) ; 

    }

    #id_titre_sinscrire_particulier 
    {
        height: 60px; 
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        margin: 0; 
        font-weight: bold;
        /*text-transform: uppercase;*/
        color: var(--var-color-black);
        background-color: var(--var-color-white);
        margin-bottom: 20px;
        font-size: 1.1rem;
        padding: 0; 
    }

    #id_sinscrire_particulier 
    {
        margin-top: 30px;
        padding: 20px;
        background-color: var(--var-color-white); 
        border: 2px solid var(--var-color-black);  
        border-radius: 8px;
    }

    .form_grid_sinscrire_particulier 
    {
        display: flex;
        flex-direction: column;
        gap: 15px; 
    }


    .form_group_sinscrire_particulier 
    {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .form_group_sinscrire_particulier label 
    {
        
        margin-bottom: 5px;
        font-size: 1.2rem;
    }

    .form_group_sinscrire_particulier input 
    {
        width: 100%; 
        box-sizing: border-box; 
        padding: 12px;
        border: 1px solid var(--var-color-black);
        border-radius: 5px;
    }


    .form_group_sinscrire_particulier select 
    {
        width: 100% ; 
        box-sizing: border-box ; 
        padding: 12px ;
        border: 1px solid var(--var-color-black) ;
        border-radius: 5px ;
    }
    


    .btn_submit_sinscrire_particulier 
    {
        margin-top: 10px;
        background-color: var(--var-color-white);
        color: var(--var-color-black);
        border: 2px solid var(--var-color-black);
        border-radius: 5px ;
        height: 100px ;
        cursor: pointer ;
        font-size: 1.1rem ;
        transition: 0.3s ;
    }


    #id_menu_sinscrire, 
    #id_sinscrire_entreprise 
    {
        width: 95% !important ; 
        max-width: 95% !important ; 
        margin-left: auto !important ;
        margin-right: auto !important ;
        box-sizing: border-box !important ; 
    }



    
    .btn_submit_sinscrire_entreprise 
    {
        height: 100px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ; 
        border :2px solid var(--var-color-black) ;  
        border-radius: 5px;
        width: 100% ;
        font-size: 1.1rem ;
        margin: 0 ; 
        font-weight: bold ;
        text-transform: uppercase ;
    }

    .btn_submit_sinscrire_entreprise:hover
    {
        color: var(--var-color-salmon) ; 
        background-color: var(--var-color-black) ; 

    }

    #id_titre_sinscrire_entreprise 
    {
        height: 60px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;
        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;
        /*text-transform: uppercase ;*/

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

        background-color: var(--var-color-white) ;
        margin-bottom: 20px ;
        font-size: 1.1rem ;
        padding: 0 ; 
    }

    #id_sinscrire_entreprise 
    {
        margin-top: 30px ;
        padding: 20px ;
        background-color: var(--var-color-white) ; 
        border: 2px solid var(--var-color-black) ;  
        border-radius: 8px ;
    }

    .form_grid_sinscrire_entreprise 
    {
        display: flex ;
        flex-direction: column ;
        gap: 15px ; 
    }


    .form_group_sinscrire_entreprise 
    {
        display: flex ;
        flex-direction: column ;
        text-align: left ;
    } 


    .form_group_sinscrire_entreprise label 
    {
        
        margin-bottom: 5px ;
        font-size: 1.2rem ;
    } 


    .form_group_sinscrire_entreprise input 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 1px solid var(--var-color-black) ;
        border-radius: 5px ;
    }



    .form_group_sinscrire_entreprise select 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 1px solid var(--var-color-black) ;
        border-radius: 5px ;
    }
    

    .btn_submit_sinscrire_entreprise 
    {
        margin-top: 10px ;
        background-color: var(--var-color-white) ;
        color: var(--var-color-black) ;
        border: 2px solid var(--var-color-black) ;
        border-radius: 5px ;
        cursor: pointer ;
        font-size: 1.1rem ;
        transition: 0.3s ;
    }



    #id_menu_sinscrire, 
    #id_sinscrire_organisation 
    {
        width: 95% !important ; 
        max-width: 95% !important ; 
        margin-left: auto !important ;
        margin-right: auto !important ;
        box-sizing: border-box !important ; 
    }


     
    #id_titre_sinscrire_organisation 
    {
        color: var(--var-color-black) ;
         
        background-color: var(--var-color-white) ;
        margin-bottom: 20px ;
        font-size: 1.1rem ;
        padding: 0 ;  

        height: 60px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;
        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;
        /*text-transform: uppercase ;*/
    }

    #id_sinscrire_organisation 
    {
        margin-top: 30px ;
        padding: 20px ;
        background-color: var(--var-color-white) ; 
        border: 2px solid var(--var-color-black) ;  
        border-radius: 8px ;
    }

    .form_grid_sinscrire_organisation 
    {
        display: flex ;
        flex-direction: column ;
        gap: 15px ; 
    }


    .form_group_sinscrire_organisation 
    {
        display: flex ;
        flex-direction: column ;
        text-align: left ;
    } 


    .form_group_sinscrire_organisation label 
    {
        
        margin-bottom: 5px ;
        font-size: 1.2rem ;
    } 


    .form_group_sinscrire_organisation input 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 1px solid var(--var-color-black) ;
        border-radius: 5px ;
    }



    .form_group_sinscrire_organisation select 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 1px solid var(--var-color-black) ;
        border-radius: 5px ;
    }
    

   
    
    .btn_submit_sinscrire_organisation 
    {
        height: 100px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;

        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;
        text-transform: uppercase ; 

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

        border-radius: 5px ;

        font-size: 1.1rem ;

    }

    .btn_submit_sinscrire_organisation
    {
        cursor:pointer ; 
    }

    #id_menu_sinscrire, 
    #id_sinscrire_etat 
    {
        width: 95% !important ; 
        max-width: 95% !important ; 
        margin-left: auto !important ;
        margin-right: auto !important ;
        box-sizing: border-box !important ; 
    }

    #id_titre_sinscrire_etat 
    {
        height: 60px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;
        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;
        /*text-transform: uppercase ;*/
        color: var(--var-color-black) ;
        
        background-color: var(--var-color-white) ;
        margin-bottom: 20px ;
        font-size: 1.1rem ;
        padding: 0 ;
    }

    
    #id_sinscrire_etat 
    {
        margin-top: 30px ;
        padding: 20px ;
        background-color: var(--var-color-white) ; 
        border: 2px solid var(--var-color-black) ;  
        border-radius: 8px ;
    }

    .form_grid_sinscrire_etat 
    {
        display: flex ;
        flex-direction: column ;
        gap: 15px ; 
    }


    .form_group_sinscrire_etat 
    {
        display: flex ;
        flex-direction: column ;
        text-align: left ;
    } 


    .form_group_sinscrire_etat label 
    {
        
        margin-bottom: 5px ;
        font-size: 1.2rem ;
    } 


    .form_group_sinscrire_etat input 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 1px solid var(--var-color-black) ;
        border-radius: 5px ;
    }



    .form_group_sinscrire_etat select 
    {
        width: 100% ; 
        box-sizing: border-box ;
        padding: 12px ;
        border: 1px solid var(--var-color-black) ;
        border-radius: 5px ;
    }
    
    /*
    .btn_submit_sinscrire_etat 
    {
        margin-top: 10px ;
        background-color: var(--var-color-white) ;
        color: var(--var-color-black) ;
        border: 5px solid var(--var-color-black) ;
        border-radius: 5px ;
        cursor: pointer ;
        font-size: 1.1rem ;
        transition: 0.3s ;
    } 
    */

    .btn_submit_sinscrire_etat 
    {
        height: 100px ; 
        display: flex ;
        align-items: center ;
        justify-content: center ;
        box-sizing: border-box ;

        width: 100% ;
        margin: 0 ; 
        font-weight: bold ;
        text-transform: uppercase ; 

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

        border-radius: 5px ;

        font-size: 1.1rem ;

    }
 

}