/*=================================================================================================================
############## STYLE GLOBAL #######################################################################################
===================================================================================================================*/

/*=================================================================================================================
----------------- 1 VARIABLES -------------------------------------------------------------------------------------
===================================================================================================================*/
    :root {
    --color-alfa: #1a9c5b;
    --color-alfa-dark: #10794d;   
    --blanc: #ffffff;   
    --color-light: #f4f4f4;
    --color-dark: #575555; 
  

    --color-red-light: #ffebee;
    --color-red-normal: #f44336;
    --color-red-dark: #b71c1c;

    --color-blue-light: #e3f2fd;
    --color-blue-normal: #5195cc;
    --color-blue-dark: #3562a5;

    --color-orange-light: #ffebee;
    --color-orange-normal: #f47c36;
    --color-orange-dark: #b7401c;



}

/*=================================================================================================================
----------------- 1 HTML ------------------------------------------------------------------------------------------
===================================================================================================================*/


body {
    font-family: Arial, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-light);
    padding-top: 170px; 
    transition: padding-top 0.3s ease;
}

h2 {
color: var(--color-dark);
font-style: oblique;
font-weight: 400;
}

html {scroll-behavior: smooth;}

footer {
background: #424242; 
color: white; 
text-align: center; 
padding: 20px; 
margin-top: 30px;
}

/*--- ADAPTATION MOBILE-----------------------------------------------*/
@media (max-width: 700px) {
    body{
        padding-top: 70px;
    }
}


/*=================================================================================================================
----------------- 3 HEADER -----------------------------------------------------------------------------------------
===================================================================================================================*/


/* zone banniere + barre de menu principale de navigation fixe */
.zone-entete-fixe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 2000; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: height 0.3s ease, box-shadow 0.3s ease;
}

/*Banniere couleur */
.banniere-principale {
    height: 100%;
    background-color: var(--color-alfa);
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    padding: 0 20px;
    box-sizing: border-box;
}

/*Titre "GDON du Libournais"*/
.texte-banniere { 
    color: var(--blanc);
    font-size: clamp(1rem,5vw,3rem);
    font-weight: bold;
    margin: 0;
    padding-left: 20px;
    line-height: 1.1;
}

/*Logo "GDON du Libournais"*/
.logo-banniere { /* Logo GDON */
    height: 80%;
    width: auto;
    transition: height 0.3s ease;
    border-radius: 50%;    /* Transforme le carré en cercle parfait */
    object-fit: cover;     /* Empêche le logo de se déformer s'il était rectangulaire (recadre au centre) */
    object-position: center;
}

/* hiperlink sur logo et texte */
.lien-logo-banniere {
    display: flex; /* Aligne le logo et le texte */
    align-items: center;   /* Centre verticalement */
    text-decoration: none; /* Supprime le soulignement */
    height: 100%;  
    width: auto;  
}


/*--- ADAPTATION MOBILE ------------------------------------------------------*/

@media (max-width: 700px){
.zone-entete-fixe { height: 80px;}
.texte-banniere { font-size: clamp(1rem,5vw,1.8rem);}
}


/*--- COMPORTEMENT SCROLL ---------------------------------------------------*/

body.scrolled .zone-entete-fixe {height: 80px;}
body.scrolled .texte-banniere {font-size: clamp(1rem,5vw,1.8rem);}


/*=================================================================================================================
----------------- 4 BARRE DE NAVIGTION : MENU ET SOUSMENUS---------------------------------------------------------
===================================================================================================================*/


/* ___ 3.1 Barre de navgation ->Menu principale __________________________________________________________________*/
.navigation-principale {
    height: 50px;
    background-color: var(--color-dark);
}

.liste-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; 
    height: 100%;
}

.element-menu {
    flex: 1;
    border-right: 1px solid #555;
    position: relative; 
    padding: 0;
}

.element-menu:last-child {
    border-right: none;
}

/* style pour les <a href>*/
.lien-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Affichage du sous-menu au survol de l'élément parent */
.element-menu:hover .sous-menu-deroulant {
    display: block;
}

/* Changement de couleur de l'onglet au survol */
.element-menu:hover .lien-menu {
    background-color: var(--color-alfa-dark);
}

/* ___ 3.2 Sous Menu liste déroulante __________________________________________________________________________________________ */

.sous-menu-deroulant {
    display: none; /*cache par defaut*/
    position: absolute;
    top: var(--hauteur-menu);
    left: 0;
    width: 100%;
    background-color: #333;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.sous-menu-deroulant li {
    border-bottom: 1px solid #444;
}

.sous-menu-deroulant a {
    display: block;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    text-align: left;
}

.sous-menu-deroulant a:hover {
    background-color: var(--color-alfa-dark);
}

/* --- ADAPTATION MOBILE et MENU BURGUER ----------------------------------------------*/

.burger-menu {
    display: none; 
}
@media (max-width: 700px) {

    .burger-menu {
        display: block;
        background: none;
        border: none;
        color: var(--blanc);
        font-size: 1.8rem;
        cursor: pointer;
        margin-left: auto; 
    }
 
    .navigation-principale {
        display: none; 
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        height: auto;
        background-color: var(--color-dark);
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .navigation-principale.active {
        display: block;
    }

    .liste-menu {
        flex-direction: column;
        height: auto;
    }

    .element-menu {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #555;
        padding: 0; 
    }

    .lien-menu {
        padding: 15px 20px;
        justify-content: flex-start; 
        font-size: 1.1rem;
    }

    .sous-menu-deroulant {
        display: none; 
        position: relative; 
        top: 0;
        background-color: #222;
    }
    
    .sous-menu-deroulant.ouvert {
        display: block;
    }

    .sous-menu-deroulant a {
        padding: 12px 35px; 
}
}


/* ___ Affichage DE LIENS DU SOUS MENU DIFFERENTIEL SELON MOBILE OU BUREAU _____________________________________ */

/* --- Par défaut (Version ordinateur) --- */
.lien-to-mobile {
    display: none !important; /* On cache le lien mobile sur ordinateur */
}
.lien-to-bureau {
    display: inline-block;    /* On affiche le lien bureau normal */
}

/* --- ADAPTATION MOBILE ---------------------------------------------- */

@media (max-width: 700px) {
    .lien-to-bureau {
        display: none !important; /* On cache le lien bureau sur téléphone */
    }
    .lien-to-mobile {
        display: inline-block !important; /* On affiche le lien mobile sur téléphone */
    }
}

/*=================================================================================================================
----------------- 5 ZONE DE CONTENU PRINCIPAL  --------------------------------------------------------------------
===================================================================================================================*/


/* ___ 5.1 Main __________________________________________________________________*/
.main-simple {
    max-width: 1200px;
    min-height: calc(100vh - 290px);
    width: 60vw;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 20px; 
    padding-top: 5px;
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
}
.main-simple h2 {
    color: var(--color-dark); 
}

.main-dashboard {
    max-width: 2100px;
    width: 90vw;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 20px; 
    padding-top: 5px;
    background-color: white;
    box-sizing: border-box;
    min-height: calc(100vh - 290px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.main-avec-sidebar{
    width: 60vw;
    max-width: 1250px;
    min-height: calc(100vh - 290px);
    margin: 20px auto;  
    padding: top 5px;box-sizing: border-box;
    background-color: white;

} 

/* Grid de Divisionn pour conteneur le sidebar : 2 colonnes une etroite à agauche et une large a droite */
.grid-page-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr; 
    gap: 0;                     
    flex-grow: 1;                  
    align-items: start;
    background: white;
}
/*--- ADAPTATION MOBILE -----------------------------------------------------*/
@media (max-width: 700px) {

    .main-simple {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 5px;
    }

    .main-avec-sidebar {
        width: 100%;
    }
    
    .grid-page-sidebar{
        grid-template-columns: 1fr;
    }
}

/* ___5.2 En-tete - Titre page ___________________________________________________________________________________________________________*/

.entete-page {
    position: sticky;
    top: 160px; 
    display: block !important; 
    width: 100% !important;          
    text-align: left !important;
    height: 40px;  
    border-radius: 5px 5px 0 0;    
    margin-top: 0;     
    margin-bottom: 5px;  
    border-bottom: 4px solid var(--color-light);
    padding: 15px 0 !important; 
    background-color: var(--blanc); 
    z-index: 1100;
    transition: top 0.3s ease, font-size 0.3s ease;
}

.entete-page h1 {
    margin: 0;
    padding-left: 30px;
    font-size: clamp(0.1rem,5vw,2.2rem); 
    color: var(--color-alfa-dark);
}

/*-- ADAPTATION SCROLL -----------------------------------------------------*/
body.scrolled .entete-page {
    top: 130px; 
    height: 65px;     
    padding: 15px 0 !important;
    box-sizing: border-box;
}

body.scrolled .entete-page h1 {
    font-size: clamp(0.1rem,5vw,1.8rem)
}

/*-- ADAPTATION MOBILE -----------------------------------------------------*/
@media (max-width: 700px) {

    .entete-page {
        top: 60px;
    }
    
    body.scrolled .entete-page {
    top: 80px; 
    box-sizing: border-box;
    }
}

/* ___5.2 Contenu de la page ___________________________________________________________________________________________________________*/

/* div principal */
.information-simple {
    width: 100%;
    padding: 5px 30px 30px;
    box-sizing: border-box;
}

/*---ADAPTATION MOBILE -----------------------------------------------------------*/
@media (max-width: 700px) {

    .information-simple{
        padding: 10px 20px 10px;
    }
}


/*=================================================================================================================
----------------- 6 SIDEBAR - MENU LATERAL  -----------------------------------------------------------------------
===================================================================================================================*/

/* conteneurSidebar (menu lateral) */
.sidebar-navigation {
    position: sticky;   
    top: 255px;          
    width: 250px;
    float: left;
    left: auto;     
    height: fit-content;
    background-color: var(--blanc);
    border-radius: 8px;
    padding: 20px 15px;
    box-sizing: border-box;
    z-index: 100;
    margin: 10px;
    box-sizing: border-box;
    background: var(--color-light);
}

/*liste sidebar*/
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sidebar bouton*/
.sidebar-menu .sidebar-bouton {
    display: block;
    background-color: var(--color-dark);
    color: white;
    padding: 12px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-justify: distribute;
}

/*sidebar compertement boutons */
.sidebar-menu .sidebar-bouton:hover,
.sidebar-menu .sidebar-bouton.active {
    background-color: var(--color-alfa);
    transform: translateX(5px); /* Efecto sutil hacia la derecha */
}

.sidebar-bouton-text {padding-left: 10px;}

/* SIDEBAR Responsive Mobile */
@media (max-width: 700px) {
       
    /*on cache la colonne du sidebar en mobiles*/
    .sidebar-navigation {
    display:none;
    }

}

/*=================================================================================================================
----------------- 7 POLICES ET PARAGRAPHES  -----------------------------------------------------------------------
===================================================================================================================*/

.lead { font-size: 1.3rem; 
    color: #555; 
    font-style: italic; 
    margin-bottom: 30px; }

.introduction {
color: var(--color-dark);
text-align: justify;
}

.lien-txt {
color: var(--color-alfa) !important;
font-style: oblique;
}

/* Note en dessous de cartes ou images centreées */
.note {
    margin-top: 12px;
    color: #666; /* Couleur grise */
    font-size: 0.9rem;
    text-align: center; /* Centré sous la carte */
}



/*=================================================================================================================
----------------- 9 BOUTONS  --------------------------------------------------------------------------------------
===================================================================================================================*/

/* ___9.1 BOUTONS ACTION PRINCIPALE _______________________________________________________________________*/
.bouton-type1 {
    background-color: var(--color-dark);
    color: white;
    padding: 15px 25px;     /* Boutons un peu plus larges pour l'équilibre */
    text-decoration: none;
    border-radius: 5px;    /* Forme arrondie */
    font-weight: bold;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

.bouton-type1:hover {
    background-color: var(--color-alfa-dark);
    transform: translateY(-3px); /* Petit effet de soulèvement au survol */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}


/* ___9.2 BOUTONS ACTION SECONDAIRE ____________________________________________________________________________*/

.bouton-type2 {
    display: inline-block;
    background-color: var(--color-alfa-dark);
    color: #ffffff;
    border: 2px solid var(--color-alfa-dark);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.bouton-type2:hover {
    background-color: var(--blanc);
    color: var(--color-alfa-dark);
}

.bouton-type3 {
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    color: #333;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.bouton-type3:hover {
    background-color: var(--blanc);
    border-color: var(--color-dark);
}





/*___ 9.3 BOUTON STICKY ____________________________________________________________________________________*/
.bouton-sticky {
    display: none; 
}

/* --- ADAPTATION MOBILE ---------------------------------------------- */
@media (max-width: 700px) {
    .bouton-sticky {
        display: block;             /* On l'affiche sur mobile */
        position: fixed;            /* Devient indépendant du scroll (effet drone) */
        bottom: 20px;               /* À 20 pixels du bord inférieur de l'écran */
        right: 20px;                /* À 20 pixels du bord droit de l'écran */
        z-index: 800;              /* S'assure de passer AU-DESSUS des tableaux et cartes */
        background-color: var(--color-alfa); /* Ton beau vert GDON */
        color: white;               /* Texte ou icône en blanc */
        padding: 12px 18px;         /* Espace interne pour une bonne zone de clic */
        border-radius: 30px;        /* Forme pilule/arrondie très moderne */
        font-weight: bold;
        text-decoration: none;      /* Si c'est une balise <a> */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .bouton-sticky:active {
        transform: scale(0.95);     /* Le bouton s'enfonce légèrement sous le pouce */
    }
}

/*=================================================================================================================
----------------- 8 DIV DE NAVIGATION INTERNE  --------------------------------------------------------------------------------------
===================================================================================================================*/

.navigation-interne {
    display: flex;  /* Active le mode Flexbox */
    justify-content: center; /* Centre les boutons horizontalement */
    align-items: center;    /* Aligne les boutons verticalement si besoin */
    gap: 20px;      /* Espace entre les boutons */
    margin: 40px 0; /* Espace au-dessus et en dessous du menu */
    flex-wrap: wrap;/* Permet aux boutons de passer à la ligne sur mobile */
    width: 100%;    /* S'assure que le menu prend toute la largeur */
}

@media (max-width:700px){
.navigation-interne{
flex-direction: column;
width: 100%;}
.navigation-interne .bouton-type1{
    width: 80%;
}
.bouton-type1:active{
    transform: scale(0.95);   
    }
}