/* --- Variables par défaut (Mode Clair) --- */
:root {
    --bg-color: #dddddd;
    --text-color: #212529;
    --card-bg: #ffffff;
    --primary-color: #378cb3;
    --border-color: #dee2e6;
    --color1:#83f3ed;
    --color2:#ccf383;
    --color3:#f07e7e;
    --color4:#dda407;
    --color5:#ae4add;
}

/* --- Variables pour le Mode Sombre --- */
[data-theme="dark"] {
    --bg-color: #181818;
    --text-color: #f1f3f5;
    --card-bg: #1e1e1e;
    --primary-color: #378cb3;
    --border-color: #2d2d2d;
    --color1:#0c918a;
    --color2:#688b27;
    --color3:#a54343;
    --color4:#8f6b09;
    --color5:#be8fd4;
}

.bgc-1{
    background-color: var(--bg-color);
}
.bgc-2{
    background-color: var(--card-bg);
}
.bgc-3{
    background-color: var(--border-color);
}
.bgc-4{
    background-color: var(--text-color);
}
.bgc-5{
    background-color: var(--primary-color);
}
.bgc-6{
    background-color: var(--color1);
}
.bgc-7{
    background-color: var(--color2);
}
.bgc-8{
    background-color: var(--color3);
}
.bgc-9{
    background-color: var(--color4);
}
.bgc-10{
    background-color: var(--color5);
}

.color-1{
    color: var(--bg-color);
}
.color-2{
    color: var(--card-bg);
}
.color-3{
    color: var(--border-color);
}
.color-4{
    color: var(--text-color);
}
.color-5{
    color: var(--primary-color);
}
.color-6{
    color: var(--color1);
}
.color-7{
    color: var(--color2);
}
.color-8{
    color: var(--color3);
}
.color-9{
    color: var(--color4);
}
.color-10{
    color: var(--color5);
}




/* Pour les navigateurs basés sur Webkit (Chrome, Edge, Safari) */
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5); /* Ajuste la luminosité/couleur (à adapter selon ton mode clair/sombre) */
    cursor: pointer;
}

/* Si tu veux cibler précisément selon le mode (clair/sombre) via tes variables */
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8); /* Rend l'icône claire en mode sombre */
}

[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0) brightness(0.2); /* Rend l'icône sombre en mode clair */
}

/* --- Styles communs pour inputs, selects et textareas --- */
input[type="text"],
input[type="time"],
input[type="date"],
select,
textarea {
    background-color: var(--card-bg, #ffffff);
    color: var(--text-color, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    padding: 8px;
    width: 100%;
}

/* Désactivation propre (quand le champ est verrouillé/validé) */
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-color, #f1f3f5);
}

/* --- 1. Pour les <select> : Flèche personnalisée --- */
select {
    /* Supprime l'apparence native pour maîtriser le rendu de la flèche */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Ajout d'une flèche SVG en arrière-plan avec adaptation automatique de la couleur selon le mode */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3cpolyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px; /* Espace pour ne pas écrire par-dessus la flèche */
}

/* Ajustement de la couleur de la flèche du select en mode sombre */
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3cpolyline%3e%3c/svg%3e");
}

/* --- 2. Pour les <textarea> : Gestion du redimensionnement --- */
textarea {
    resize: vertical; /* Permet uniquement d'étirer en hauteur pour ne pas casser la mise en page */
    min-height: 80px;
}

/* --- Application des variables sur le site --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: system-ui, -apple-system, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- CSS Reset global pour repartir sur des bases saines --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

header {
    flex-shrink: 0;
}

/* Le conteneur principal (le milieu) absorbe tout l'espace restant */
.main-container {
    flex-grow: 1;
    overflow-y: auto;
}

.main-container::-webkit-scrollbar {
    display: none; /* Masque complètement la barre */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    margin: auto;
}

/* --- Header & Navigation --- */
.site-header {
    position: relative; /* INDISPENSABLE pour ancrer le menu mobile absolute */
    background-color: var(--card-bg, #ffffff);
    border-bottom: 1px solid var(--border-color, #dee2e6);
    padding: 0.75rem 1.5rem;
    z-index: 1000;
}

.header-content {
    width: 100%;
    margin: 0 auto;
}

.site-logo img {
    height: 40px;
    width: auto;
    display: block;
}

/* Liens du menu principal */
.site-nav .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav .nav-links a {
    color: var(--text-color, #212529);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-nav .nav-links a:hover {
    color: var(--primary-color, #0d6efd);
}

/* --- Actions du Header (Connexion & Burger) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-login {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color, #0d6efd);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.btn-login:hover {
    opacity: 0.9;
    color: #ffffff;
}

/* Bouton Burger (masqué par défaut sur grand écran) */
.burger-menu {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color, #212529);
    cursor: pointer;
    padding: 0.25rem;
}

/* --- Sections & Contenu --- */
.btn {
    background-color: var(--text-color);
    color: var(--bg-color);
    border-radius: 6px;
    font-weight: 500;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 2px 0 #181818;
    padding: 0.75rem 1.5rem;
}


.btn-primary {
    background-color: var(--primary-color, #0d6efd);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 500;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 2px 0 #181818;
}

.btn-primary:hover {
    opacity: 0.9;
    color: #ffffff;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-color, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 2px 0 #181818;
}

.btn-secondary:hover {
    background-color: var(--border-color, #dee2e6);
}

/*Boutons et interfaces applications*/
.btn-centre1{
    background-color: var(--color1);
    color: var(--text-color, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-centre1:hover {
    background-color: var(--color1, #dee2e6);
}

.btn-centre2{
    background-color: var(--color2);
    color: var(--text-color, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-centre2:hover {
    background-color: var(--color2, #dee2e6);
}

.btn-box{
    width: 100%;
    max-width: 110px;
    aspect-ratio: 1;
    background-color: var(--primary-color, #0d6efd);
    color: #ffffff;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.3rem;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 5px rgba(0, 0, 0, 0.37); 
    
}

.btn-box:hover {
    opacity: 0.9;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.562); 

}

.btn-primary, .btn-secondary, .btn-centre1, .btn-centre2, .btn-box, .btn {
    display: inline-block;
    white-space: normal; /* Autorise le texte du bouton à passer à la ligne proprement */
    text-align: center;  /* Centre le texte s'il passe sur 2 lignes */
    height: auto;        /* S'adapte dynamiquement à la hauteur du texte */
    padding: .5rem 1.5rem;  /* Assure une bonne zone de clic */
    margin: .3rem;
    box-sizing: border-box;
}



/*======================
ALERTES================*/

.succes{
    color: greenyellow;
    font-weight: bold;
}

.alerte{
    color: orange;
    font-weight: bold;
}

.danger{
    color: red;
    font-weight: bold;
}

/* --- Footer & Bouton Thème --- */
/* --- Footer Styling --- */
.site-footer {
    flex-shrink: 0;
    background-color: var(--card-bg, #ffffff);
    border-top: 1px solid var(--border-color, #dee2e6);
    padding: 1rem 1.5rem;
    padding-bottom: 1rem;
}

.footer-content {
    width: 100%;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    color: var(--text-color, #212529);
    font-size: 0.9rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--primary-color, #0d6efd);
}

.btn-theme {
    background: none;
    border: 1px solid var(--border-color, #dee2e6);
    color: var(--text-color, #212529);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-theme:hover {
    background-color: var(--border-color, #dee2e6);
}

/* --- Bandeau Cookies --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-bg, #ffffff);
    border-top: 1px solid var(--border-color, #dee2e6);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: none; /* Masqué par défaut, affiché par le JS si pas de choix enregistré */
}

.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-content p {
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.4;
    color: var(--text-color, #212529);
}

.cookie-content a {
    color: var(--primary-color, #0d6efd);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* --- Responsive / Media Queries (Mobile) --- */
@media (max-width: 768px) {
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--card-bg, #ffffff);
        border-bottom: 1px solid var(--border-color, #dee2e6);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        z-index: 999;
    }

    .site-nav.nav-open {
        max-height: 300px;
    }

    .site-nav .nav-links {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 1rem;
    }

    .burger-menu {
        display: block;
    }

    .btn-login span {
        display: none;
    }

    .site-footer .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        
    }
    
    .footer-links {
        justify-content: center;
    }

/* Responsive mobile pour le bandeau */
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .cookie-actions {
        width: 100%;
        justify-content: stretch;
    }
    .cookie-actions button {
        flex: 1;
        text-align: center;
    }
}