/* ===========================================================================
   agrikole-child — header-fix.css
   Correctif PROPRE de l'espacement header (remplace les rustines du
   Personnalisateur : margin-top:-50px, padding 15px du bandeau, etc.)

   Principes :
   - AUCUNE marge négative.
   - Indépendant de la présence du bandeau #featured-title (les pages qui le
     masquent ne doivent plus avoir de bande vide ~95px).
   - Scopé .header-style-4 (le site utilise ce style ; cf. body.class).
   - Pas de !important : cette feuille est enqueue APRÈS la cascade du thème
     (functions.php, prio 20, dépendance agrikole-theme-style) → elle gagne
     à spécificité égale.
   - Le thème impose html{font-size:62.5%} (1rem≈10px) : VOLONTAIREMENT
     conservé (le normaliser casserait tout le thème). Tailles ici en px,
     sauf le sous-menu laissé en rem (6rem = 60px à ce root) pour cohérence
     avec le calcul d'origine du thème.

   CALIBRAGE : les variables ci-dessous reproduisent le rendu compact actuel
   (ex-rustines). Valeurs de départ raisonnées sur le CSS parent
   (#site-logo-inner margin:30px ; .header-socials-inner 41px ; .nav-wrap
   13px ; #main-content padding:100px 0 ; #featured-title .inner-wrap
   220/222px). À affiner en navigateur (cf. docs/handoff-theme-agrikole.md,
   protocole de vérification) si besoin — un seul endroit à toucher.
   =========================================================================== */

.header-style-4 {
    /* Écart visuel header → contenu (= ancien padding-top:15px du bandeau). */
    --aa-header-gap: 15px;
    /* Marges verticales internes du header réduites pour supprimer le
       « vide ~45px » en bas du header SANS marge négative (l'ancien
       margin-top:-50px ne faisait que masquer ce vide en tirant le bandeau
       par-dessus). Valeurs < marges d'origine du thème → header plus compact,
       contenu visible inchangé en haut. */
    --aa-logo-margin-v: 10px;     /* thème : 30px — réduit pour agrandir le logo
                                     sans grossir le header (cf. --aa-logo-h) */
    --aa-socials-margin-v: 14px;  /* thème : 41px */
    --aa-nav-margin-v: 10px;      /* thème : 13px */
    /* Hauteur globale réduite (demande utilisateur 2026-05-18 : « réduire un
       peu la hauteur générale »). Le header faisait ~131px, piloté par
       l'image du logo (250×103, ratio 2.44) ET le lien de menu
       (#main-nav>ul>li>a height/line-height:100px, style.css l.2207). On
       plafonne les DEUX → header ≈ 100px, tout centré (align-items §1b).
       --aa-logo-h : hauteur max de l'image logo (largeur auto, ratio gardé,
       reste < max-width:250px inline → pas de !important nécessaire).
       --aa-nav-link-h : hauteur du lien de menu = aussi le décalage du
       sous-menu (il s'ouvre pile sous le lien). */
    --aa-logo-h: 80px;            /* image : 103px → 80px (= --aa-nav-link-h :
                                     logo aussi grand que le lien de menu ;
                                     bloc logo 80+2×10=100 = hauteur header,
                                     donc n'agrandit pas le header) */
    --aa-nav-link-h: 80px;        /* thème : 100px ; pilote aussi le logo et
                                     le décalage du sous-menu */
    /* Taille de l'icône-seule du logo à ≤1250px (cf. section 5). */
    --aa-logo-icon: 56px;
}

/* 1. Header compact : on récupère le vide bas du header à sa source
   (marges internes des enfants flex), au lieu de tirer le bandeau dessus.
   IMPORTANT : on ne touche QUE les marges verticales. Le thème met
   margin-left/right:0 sur logo/nav à ≤1440px (style.css l.3408-3417) pour
   éviter que le menu saute à la ligne — surcharger l'horizontal (raccourci
   `margin`) casserait ce responsive. */
.header-style-4 #site-logo-inner {
    margin-top: var(--aa-logo-margin-v);
    margin-bottom: var(--aa-logo-margin-v);
}
.header-style-4 .header-socials-inner {
    margin-top: var(--aa-socials-margin-v);
    margin-bottom: var(--aa-socials-margin-v);
}
.header-style-4 #site-header .nav-wrap {
    margin-top: var(--aa-nav-margin-v);
    margin-bottom: var(--aa-nav-margin-v);
}

/* 1b. Centrage vertical des 3 blocs du header.
   Le parent met .wrap-inner en display:flex; justify-content:space-between
   SANS align-items (style.css l.3260) → align-items:stretch par défaut.
   Le lien de menu (#main-nav>ul>li>a : height:100px; line-height:100px,
   style.css l.2207) se cale alors trop HAUT au lieu d'être aligné sur le
   centre vertical du logo / des icônes. Même spécificité que la règle
   parent (1,1,0) ; feuille chargée après → gagne. On ne redéclare PAS
   display ni justify-content (hérités de la règle parent). */
.header-style-4 #site-header .wrap-inner {
    align-items: center;
}

/* 1c. Hauteur globale réduite (cf. variables --aa-logo-h / --aa-nav-link-h).
   - Logo : on borne la HAUTEUR de l'image (largeur auto → ratio préservé).
     L'inline max-width:250px est sur #site-logo-inner (pas sur l'img) et la
     largeur résultante (~146px) reste < 250px → aucun !important requis,
     contrairement au mode icône ≤1250px (§5) qui, lui, doit battre l'inline.
   - Menu : on réduit height ET line-height du lien (line-height = height →
     le libellé reste centré verticalement dans le lien). Scopé
     .header-style-4, feuille chargée après → gagne sans !important.
   align-items:center (§1b) recentre automatiquement les 3 blocs après
   redimensionnement. */
.header-style-4 #site-logo-inner img {
    height: var(--aa-logo-h);
    width: auto;
    max-width: 100%;
}
/* #site-header préfixé : un CSS inline du thème (options) pose
   `#site-header #main-nav>ul>li>a{line-height:4}` (=72px), spécificité
   (2,0,3) qui battrait (1,1,3) sur line-height. Ici (2,1,3) → on gagne
   height ET line-height ⇒ libellé parfaitement centré dans le lien. */
.header-style-4 #site-header #main-nav > ul > li > a {
    height: var(--aa-nav-link-h);
    line-height: var(--aa-nav-link-h);
}

/* 2. Bandeau-titre compact, SANS marge négative.
   Écrase le padding du thème : 220px 0 70px (style.css l.3531) ET la
   surcharge ≥992px 222px 0 170px (l.5699). margin-top:0 neutralise
   l'ancien -50px. */
.header-style-3 #featured-title,
.header-style-4 #featured-title {
    margin-top: 0;
}
.header-style-3 #featured-title .inner-wrap,
.header-style-4 #featured-title .inner-wrap {
    padding: var(--aa-header-gap) 0 0 0;
}
@media only screen and (min-width: 992px) {
    .header-style-3 #featured-title .inner-wrap,
    .header-style-4 #featured-title .inner-wrap {
        padding: var(--aa-header-gap) 0 0 0;
    }
}

/* 3. Espace haut du contenu IDENTIQUE avec OU sans bandeau.
   Cause réelle de la bande vide sans bandeau = #main-content{padding:100px 0}
   (style.css l.1986). On normalise le padding-top (pas le bottom). */
.header-style-3 #main-content,
.header-style-4 #main-content {
    padding-top: var(--aa-header-gap);
}
/* Quand le bandeau précède le contenu, ne pas cumuler l'écart : le bandeau
   porte déjà --aa-header-gap. Remplaçant non négatif du margin-top:-50px,
   sans :has(). #featured-title et #main-content sont frères adjacents
   (cf. agrikole/header.php). */
#featured-title + #main-content {
    padding-top: 0;
}

/* 4. Nettoyages cosmétiques (réécrits proprement, sans !important).
   Thème : .header-style-4 #site-header{border-bottom:1px} (l.3248),
   #site-header:after{background:#fff} (l.3252),
   .header-socials{border-left} (l.3266), #site-logo{border-right} (l.3275). */
.header-style-4 #site-header,
.mobi-nav-extra {
    border: 0;
}
.header-style-4 #site-logo,
.header-style-4 .header-socials {
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
}

/* Position du sous-menu = bas du lien de menu (s'ouvre pile sous le lien,
   suit automatiquement --aa-nav-link-h ; ex-valeur figée 6rem=60px qui
   chevauchait l'ancien lien de 100px). */
#site-header .nav-wrap ul.sub-menu {
    top: var(--aa-nav-link-h);
}

/* Réseaux sociaux masqués sous 1600px (rendu actuel voulu). */
@media only screen and (max-width: 1600px) {
    .header-socials {
        display: none;
    }
}

/* Respiration sous le header en mobile (rendu actuel voulu). */
@media only screen and (max-width: 991px) {
    #site-header-wrap {
        margin-bottom: 20px;
    }
}

/* Bandeau d'infos header. */
.header-info {
    font-size: 17px;
}

/* 5. Logo icône-seule à ≤1250px.
   Aucun asset « icône seule » pur n'existe dans la médiathèque ; on dérive
   l'icône en rognant l'asset vertical existant logo_base.png (251×359 : le
   rond feuille occupe le carré du haut, « Apaba » + tagline en bas). On
   masque le <img> texte et on peint le haut de logo_base.png en fond, la
   hauteur de la boîte coupant la partie texte. Asset rapatrié dans le
   thème enfant (assets/img/) → URL relative à ce CSS, zéro dépendance au
   dossier uploads/, valable sur tout domaine.
   --aa-logo-icon : taille de l'icône dans le header (calibré 56px). */
@media only screen and (max-width: 1250px) {
    .header-style-4 #site-logo-inner {
        max-width: var(--aa-logo-icon, 56px) !important; /* écrase le style inline max-width:250px */
    }
    .header-style-4 #site-logo-inner .main-logo img {
        display: none;
    }
    .header-style-4 #site-logo-inner .main-logo {
        display: block;
        width: var(--aa-logo-icon, 56px);
        height: var(--aa-logo-icon, 56px);
        background: url('../img/logo_base.png') no-repeat top center;
        background-size: var(--aa-logo-icon, 56px) auto;
    }
}

/* 6. Header collant FIGÉ.
   Au scroll, le JS parent (assets/js/main.js l.221 headerFixed()) ajoute
   .fixed-hide sur #site-header → position:fixed + marges DIFFÉRENTES de
   l'état repos (style.css l.3466-3482 : logo 17px, nav 0, socials 28px),
   alors que la section 1 ci-dessus compacte le repos (14/10/18px). Comme
   .nav-wrap/#site-logo-inner/.header-socials-inner ont transition:all .3s,
   ce delta s'animait → menu qui monte, icônes qui descendent, logo qui
   bouge. On réutilise ICI les MÊMES variables que le repos, avec les
   MÊMES sélecteurs que le parent (spécificité égale 2,2,0 ; feuille
   chargée après → gagne, sans !important). Repos == scroll ⇒ aucun delta
   à animer ⇒ aucun mouvement. La barre reste simplement position:fixed
   (épinglée, fond translucide + ombre du parent conservés = collant
   stable voulu). Le <div> espaceur injecté par le JS (= hauteur header au
   load) reste exact puisque la hauteur ne change plus → pas de saut du
   contenu. Vertical UNIQUEMENT (jamais le raccourci `margin` : casserait
   le reset horizontal ≤1440px du parent — cf. note section 1).
   header-style-5 ajouté seulement car le parent groupe 4+5 sur ces
   sélecteurs (parité de spécificité ; le site est en header-style-4). */
.header-style-4 #site-header.fixed-hide #site-logo-inner,
.header-style-5 #site-header.fixed-hide #site-logo-inner {
    margin-top: var(--aa-logo-margin-v);
    margin-bottom: var(--aa-logo-margin-v);
}
.header-style-4 #site-header.fixed-hide .nav-wrap,
.header-style-5 #site-header.fixed-hide .nav-wrap {
    margin-top: var(--aa-nav-margin-v);
    margin-bottom: var(--aa-nav-margin-v);
}
.header-style-4 #site-header.fixed-hide .header-socials-inner,
.header-style-5 #site-header.fixed-hide .header-socials-inner {
    margin-top: var(--aa-socials-margin-v);
    margin-bottom: var(--aa-socials-margin-v);
}