/* ============================= */
/* Base font-size et variables   */
/* ============================= */
:root {
    /* 62.5% de 16px (défaut navigateur) = 10px */
    /* Cela permet de garder 1rem = 10px tout en respectant le zoom utilisateur */
    font-size: 62.5%; 
    
    /* Échelle typographique (Basée sur 1rem = 10px) */
    --fs-h1: 3.6rem; /* 36px */
    --fs-h2: 3rem;   /* 30px */
    --fs-h3: 2.4rem; /* 24px */
    --fs-h4: 2rem;   /* 20px */
    --fs-h5: 1.8rem; /* 18px */
    --fs-h6: 1.6rem; /* 16px */
    --fs-p: 1.8rem;  /* 18px (idéal pour la lecture) */
    --fs-small: 1.4rem; /* 14px */

    --line-height: 1.6; /* Augmenté légèrement pour l'accessibilité */
    --spacing: 1.5rem;

    /* Couleurs Héritées */
    --color-dark: #1d1d1b;      /* Le "noir" de la boîte de com */
    --color-blue: #04baee;      /* Bleu ciel */
    --color-orange: #ed7203;    /* Orange */
    --color-teal: #2d989e;      /* Vert canard */
    
    /* Couleurs de texte sécurisées */
    --text-on-dark: #fcfcfc;    /* Blanc cassé (AAA sur --color-dark) */

    /* Accordions & UI */
    --acc-border: #ccc;
    --acc-bg-hover: #f9f9f9;
    --acc-focus-color: #005a9c;
    --acc-text: #1a1a1a;
}

/* ============================= */
/* Responsive Root               */
/* ============================= */

/* On évite de descendre en dessous de 9px pour garder une base saine */
@media (max-width: 1400px) {
    :root { font-size: 58%; } /* Env. 9.3px */
}

@media (max-width: 1000px) {
    :root { font-size: 56.25%; } /* 9px : limite basse conseillée */
}

/* ============================= */
/* Body et base                 */
/* ============================= */
body {
    font-size: var(--fs-p);
    font-family: "Outfit", sans-serif;
    color: #000;
    font-weight: 400;
    line-height: var(--line-height);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
}

/* ============================= */
/* Titres (Utilisation des vars) */
/* ============================= */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing);
    line-height: 1.2; /* Les titres sont mieux avec un line-height serré */
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* ============================= */
/* Contenu                       */
/* ============================= */
p, li {
    font-size: var(--fs-p);
    margin-bottom: var(--spacing);
}

ul, ol {
    padding-left: 2.5rem;
    margin-bottom: var(--spacing);
}

li {
    margin-bottom: 0.8rem;
}

small {
    font-size: var(--fs-small);
}

/* ============================= */
/* Ajustements Mobiles           */
/* ============================= */
@media (max-width: 1000px) {
    :root {
        /* On ajuste les variables plutôt que de trop réduire le root */
        --fs-h1: 2.8rem; 
        --fs-h2: 2.4rem;
        --fs-h3: 2.1rem;
        --fs-p: 1.6rem; /* Garanti 14.4px réel (9px * 1.6) */
    }
}

/* ============================= */
/* Utilitaires                   */
/* ============================= */
code {
    background-color: #f7f7f7;
    padding: 1.5rem;
    color: #c00;
    display: block;
    max-height: 200px;
    overflow: auto;
    font-size: 1.3rem;
    border-radius: 4px;
}

[hidden="true"] { display: none; }
[hidden="false"] { display: block !important; }

.block + .block {
    margin-top: 2rem;
}

/* ============================= */
/* STRUCTURE DU HEADER           */
/* ============================= */

#header {
    display: flex;
    flex-wrap: wrap; /* Pour que la description passe au dessus */
    width: 100%;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* --- Ligne 1 : Description (100%) --- */
.site-description {
    flex: 0 0 100%;
    background-color: var(--color-dark);
    color: var(--text-on-dark);
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    line-height: 3em;
    margin: 0;
}

/* Les fameux ronds Armor/Argoat */
.site-description::before, .site-description::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
.site-description::before { background-color: var(--color-blue); }
.site-description::after  { background-color: var(--color-teal); }

/* --- Ligne 2 : Les 3 Blocs --- */
#header > div {
    display: flex;
    align-items: center;
}

/* Bloc Menu (Gauche) */
#header > div:has(#toggle-main-menu) {
    flex: 1;
    justify-content: flex-start;
}

/* Bloc Logo (Centre - Large) */
#header > div:has(#logo) {
    flex: 2; /* Plus de largeur pour le logo */
    justify-content: center;
}

/* Bloc Recherche (Droite) */
#header > div:has(#search-access) {
    flex: 1;
    justify-content: flex-end;
}

/* Éléments internes */
#logo {
    margin: 0;
}

#logo img {
    display: block;
    width: 250px; /* Force une largeur pour le test */
    height: auto;
    max-height: 80px;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: color 0.2s ease;
}

button:hover {
    color: var(--color-orange); /* Orange héritage au survol */
}

/* Petit détail visuel pour la recherche */
#search-access span {
    border-bottom: 2px solid var(--color-blue);
    padding-bottom: 2px;
}