/* ============================================================
   ASGVG — CSS commun (header / nav / footer / typo globale)
   Extrait et consolidé depuis la démo statique validée.
   ============================================================ */

/* --- Reset léger --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #333;
    background-color: #ffffff;
    line-height: 1.6;
}
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: #c9a84c; color: #fff; }

/* --- Barre résultats rapides (au-dessus du header, non-sticky) --- */
#results-bar {
    background: #0a2e1f;
    border-bottom: 1px solid rgba(201,168,76,0.25);
    padding: 7px 40px;
    display: flex;
    gap: 24px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Header sticky 64px --- */
#site-header.site-header {
    background: rgba(13,61,43,0.97);
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    box-shadow: 0 2px 20px rgba(0,0,0,0.2);
    padding: 0 30px;
    min-height: 64px;
    display: flex;
    align-items: center;
}
#site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
}
/* Menu centre dans le header, avec repli automatique.
   Les deux cotes du menu partagent l'espace libre a parts egales : le logo
   occupe la colonne de gauche, un pseudo-element tient la colonne de droite.
   min-width:max-content empeche le logo d'etre compresse ; quand l'ecran
   devient trop etroit pour un vrai centrage, la colonne de droite se resorbe
   et le menu revient contre le bord, sans jamais passer sous le logo. */
#site-header .site-branding {
    flex: 1 1 0;
    min-width: max-content;
}
#site-header .site-navigation { flex: 0 0 auto; }
#site-header .header-inner::after {
    content: '';
    flex: 1 1 0;
}
#site-header .site-branding .site-title a,
#site-header .custom-logo-link {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
}
#site-header .custom-logo-link img {
    height: 48px;
    width: auto;
    display: block;
}
#site-header .site-description {
    color: rgba(255,255,255,0.6);
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    margin: 2px 0 0;
}

/* --- Navigation principale --- */
#site-header .site-navigation {
    display: flex;
    align-items: center;
    background: transparent;
}
#site-header .site-navigation ul.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    gap: 2px;
}
#site-header .site-navigation ul.menu li { display: flex; }
#site-header .site-navigation ul.menu li a {
    color: rgba(255,255,255,0.85);
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
    display: block;
}
#site-header .site-navigation ul.menu li a:hover,
#site-header .site-navigation .current-menu-item > a,
#site-header .site-navigation .current_page_item > a {
    color: #c9a84c;
}

/* --- Toggle mobile : caché en desktop --- */
#site-header .site-navigation-toggle-holder { display: none; }
.site-navigation-dropdown { display: none; }

@media (max-width: 1024px) {
    #site-header .site-navigation { display: none; }
    /* Le menu horizontal cede la place au bouton : les colonnes du centrage
       n'ont plus lieu d'etre, sinon le bouton se retrouverait au milieu. */
    #site-header .site-branding { flex: 0 1 auto; }
    #site-header .header-inner::after { content: none; }
    #site-header .site-navigation-toggle-holder {
        display: flex;
        align-items: center;
    }
    #site-header .site-navigation-toggle {
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 8px;
    }
    #site-header .site-navigation-toggle-icon,
    #site-header .site-navigation-toggle-icon::before,
    #site-header .site-navigation-toggle-icon::after {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        position: relative;
    }
    #site-header .site-navigation-toggle-icon::before,
    #site-header .site-navigation-toggle-icon::after {
        content: '';
        position: absolute;
        left: 0;
    }
    #site-header .site-navigation-toggle-icon::before { top: -7px; }
    #site-header .site-navigation-toggle-icon::after { top: 7px; }
    .site-navigation-dropdown.is-open {
        display: block;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: rgba(13,61,43,0.98);
        padding: 10px 0;
        z-index: 9998;
    }
    .site-navigation-dropdown ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .site-navigation-dropdown ul.menu li a {
        display: block;
        color: rgba(255,255,255,0.85);
        font-family: 'Lato', sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 12px 30px;
        text-decoration: none;
    }
    #results-bar { padding: 7px 20px; }
}

/* --- Masquer le titre H1 auto sur pages "canvas" --- */
.page-template-canvas .entry-title,
.page-template-canvas .page-title { display: none; }

/* --- Contenu pleine largeur ---
   hello-elementor/theme.css borne .site-main à max-width:600px ; les pages
   reproduites depuis la démo gèrent elles-mêmes leur conteneur 1140px, donc
   le <main> doit rester pleine largeur (sinon layout "boxed" type /golf). */
#content.site-main,
.site-main {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- Conteneur de contenu générique (page.php / index.php) --- */
.asgvg-content {
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px 30px;
}

/* ============================================================
   RESPONSIVE — compléments mobile (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Barre résultats : empile verticalement sur très petit écran */
    #results-bar {
        flex-direction: column;
        gap: 8px;
        padding: 10px 16px;
        text-align: center;
    }

    /* Footer : 1 colonne au lieu de 3 */
    #site-footer > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Pages équipes — sous-nav : taille de police réduite */
    nav[style*="top:64px"] a {
        font-size: 10px !important;
        padding: 12px 10px !important;
    }

    /* Year-nav sticky : réduit la taille */
    .year-nav a, .year-nav button {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    /* Titres hero : taille adaptée */
    .actu-hero h1,
    .membres-hero h1 { font-size: 28px; }

    /* Grille actualités : déjà gérée dans le template (auto-fill 280px) */

    /* Login card : plein écran sur mobile */
    .login-card { padding: 28px 20px 24px; }
}

@media (max-width: 480px) {
    /* Header branding : titre plus petit */
    #site-header .site-branding .site-title a,
    #site-header .custom-logo-link span { font-size: 16px; letter-spacing: 1px; }

    /* Filtres actualités : plus compacts */
    .filter-btn { padding: 6px 14px; font-size: 12px; }
    .actu-filters { padding: 14px 16px; }

    /* 404 : chiffre plus petit */
    .error404-code { font-size: 80px; }
    .error404-title { font-size: 24px; }
}

/* ============================================================
   Contenus saisis dans l'éditeur riche
   L'éditeur enveloppe le texte dans des <p>. Les templates rendent
   désormais ces champs dans un <div> (un <p> ne peut pas contenir de <p>).
   On neutralise les marges extrêmes pour que l'espacement reste
   identique à celui d'un simple texte.
   ============================================================ */
.asgvg-riche > p:first-child { margin-top: 0; }
.asgvg-riche > p:last-child  { margin-bottom: 0; }
.asgvg-riche img { max-width: 100%; height: auto; }
.asgvg-riche ul, .asgvg-riche ol { margin: 0 0 1em; padding-left: 1.4em; }

/* ============================================================
   Accessibilité
   ============================================================ */

/* Lien d'évitement : visible uniquement au clavier. */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
}
.skip-link.screen-reader-text:focus {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: 10px 18px;
    background: #c9a84c;
    color: #0d3d2b;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
}

/* Repère de focus lisible sur fond clair comme sur fond vert. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #c9a84c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Bouton « Revenir en haut »
   ============================================================ */
#asgvg-haut {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #0d3d2b;
    color: #c9a84c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
#asgvg-haut.is-visible { opacity: 1; visibility: visible; transform: none; }
#asgvg-haut:hover { background: #c9a84c; color: #0d3d2b; }

/* ============================================================
   Adaptation mobile des mises en page à colonnes

   Les gabarits portent leurs grilles en style en ligne (héritage de la
   démo statique). On ne peut donc les adapter qu'en ciblant la valeur
   déclarée. La grille du calendrier — repeat(7,1fr) — est volontairement
   laissée intacte : une semaine doit garder ses sept colonnes.
   ============================================================ */

@media (max-width: 900px) {
    [style*="columns:repeat(5,1fr)"], [style*="columns: repeat(5, 1fr)"],
    [style*="columns:repeat(3,1fr)"], [style*="columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 700px) {
    [style*="columns:1fr 1fr"],     [style*="columns: 1fr 1fr"],
    [style*="columns:1.4fr 1fr"],   [style*="columns: 1.4fr 1fr"],
    [style*="columns:1fr 2fr"],     [style*="columns: 1fr 2fr"],
    [style*="columns:2fr 1fr"],     [style*="columns: 2fr 1fr"],
    [style*="columns:1.5fr 1fr 1fr"], [style*="columns: 1.5fr 1fr 1fr"],
    [style*="columns:repeat(2,1fr)"], [style*="columns: repeat(2, 1fr)"],
    [style*="columns:repeat(3,1fr)"], [style*="columns: repeat(3, 1fr)"],
    [style*="columns:repeat(5,1fr)"], [style*="columns: repeat(5, 1fr)"],
    [style*="minmax(420px"],
    [style*="minmax(300px"],
    [style*="minmax(280px"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Les chiffres clés restent sur deux colonnes : ce sont de petites cartes,
   les empiler allongerait la page sans rien gagner en lisibilité. */
@media (max-width: 700px) {
    .asgvg-chiffres { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* Tableaux larges : défilement horizontal plutôt que débordement de page. */
@media (max-width: 760px) {
    #content table,
    .page-content table,
    .asgvg-content table,
    .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* Pagination des actualités : passe à la ligne au lieu de déborder. */
.actu-pagination { flex-wrap: wrap; }

/* Barres de navigation défilantes : masquer la barre de défilement. */
nav[style*="overflow-x:auto"]::-webkit-scrollbar,
.year-nav::-webkit-scrollbar { height: 0; }