/*=====================================================
 * @file public/assets/css/page-header.css
 * @brief Styles de l’en-tête de page vert fixé en haut (templates/page_header.php).
 *
 * Dernière modification : 18/10/2026 12:10
 * Version : 2.0.2
 *
 * Responsabilités :
 * - carte vert profond (#0f3d27) sur une bande du vert du site qui masque
 *   le contenu passant dessous ; cible en filigrane ;
 * - médaillon du logo, titre en Cormorant Garamond, sous-titre, contrôles
 *   (filtres, onglets) ;
 * - liens « Sur cette page » ; section en cours en blanc gras soulignée de
 *   doré (aria-current) ;
 * - état compact .is-compact : 72 px au plus sur ordinateur ; sur mobile,
 *   logo 32 px et titre 22 px sur une ligne, liens dessous ;
 * - décalage des ancres et du focus : scroll-padding-top alimenté par
 *   --page-sticky-h, estimation fixe sans JavaScript.
 *
 * Dépendances principales :
 * - public/assets/js/page-header.js ;
 * - variables de styles.css (--shell-topbar-h, polices).
 *
 * Contraintes / remarques :
 * - chargée uniquement par les pages qui incluent le composant ;
 * - sous 992 px, le bandeau se cale sous la barre mobile de la coquille ;
 * - non fixé sur les écrans très bas ; transitions coupées si
 *   prefers-reduced-motion ;
 * - contrastes sur #0f3d27 : titre #f7f3ea ≈ 11,0:1 ; sous-titre et liens
 *   #dfe8e1 ≈ 9,8:1 ; focus doré #e3c27a ≈ 7,1:1 ;
 * - guide de lecture : ancrage et sentinelle → bande et carte → motif →
 *   logo → titre et contrôles → liens et section en cours → lignes
 *   défilantes → libellés masqués → disposition ordinateur → état compact.
 *====================================================*/

/* ───────────────────────────────────────────────────────────────────────────
   Ancres et focus clavier : jamais cachés sous le bandeau
   ───────────────────────────────────────────────────────────────────────── */
/* La marge d’ancrage globale des sections (styles.css, 4rem pour l’ancienne
   barre de navigation) s’y ajouterait : elle est neutralisée sur ces pages. */
html { scroll-padding-top: calc(var(--page-sticky-h, 16rem) + .75rem); }
@media (max-width: 991.98px) {
    /* Sans JavaScript : estimation (barre mobile + bandeau normal) */
    html { scroll-padding-top: calc(var(--page-sticky-h, 16rem + 56px) + .75rem); }
}
section { scroll-margin-top: 0; }

/* Pas d’« ancrage de défilement » du navigateur : pendant le compactage,
   il décalerait la page, ce qui pourrait refaire franchir le seuil
   (bandeau qui clignote). La place du bandeau est déjà conservée par la
   marge compensatrice (--ph-shrink). */
html:has(.page-sticky) { overflow-anchor: none; }

/* Sentinelle : repère invisible à ~80 px du haut du document. Quand elle
   sort de l’écran, le script passe le bandeau en compact. */
.page-sticky-sentinel {
    position: absolute;
    top: var(--ph-compact-at, 80px);
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Bande fixée et carte verte
   ───────────────────────────────────────────────────────────────────────── */
.page-sticky {
    --ph-bg:       #0f3d27;   /* vert profond */
    --ph-title:    #f7f3ea;   /* parchemin */
    --ph-text:     #dfe8e1;
    --ph-gold:     #e3c27a;
    --ph-rule:     rgba(247, 243, 234, .16);
    --ph-pad-x:    2.5rem;
    --ph-duration: 0s;

    position: sticky;
    top: 0;
    z-index: 1010;   /* sous la barre mobile (1020), le tiroir et les modales */
    background: var(--bs-primary, #198754);
    padding: .5rem 0;
    transition: padding var(--ph-duration) ease, margin var(--ph-duration) ease;
}
@media (prefers-reduced-motion: no-preference) {
    .page-sticky { --ph-duration: .2s; }
}
/* Pendant la mesure des deux états (page-header.js), aucune animation */
.page-sticky.is-measuring,
.page-sticky.is-measuring * { transition: none !important; }

@media (max-width: 991.98px) {
    .page-sticky { top: var(--shell-topbar-h, 56px); }
}
/* Écran très bas : un bandeau fixe occuperait l’essentiel de la hauteur */
@media (max-height: 599.98px) {
    .page-sticky { position: static; }
}

/* Le contenu suit le bandeau sans double marge */
.page-sticky + .content-wrapper { margin-top: 0; }

.page-sticky__card {
    position: relative;
    overflow: hidden;                /* motif de cible rogné aux bords */
    max-width: calc(100% - 2rem);    /* même largeur que .content-wrapper */
    margin: 0 auto;
    padding: 2.25rem var(--ph-pad-x) 0;
    background: var(--ph-bg);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    color: var(--ph-title);
    transition: padding var(--ph-duration) ease, box-shadow var(--ph-duration) ease;
}
.page-sticky__card:focus { outline: none; }   /* cible de « Aller au contenu » */

/* Motif : cible en filigrane, débordant en haut à droite */
.page-sticky__target {
    position: absolute;
    top: -150px;
    right: -80px;
    width: 460px;
    height: 460px;
    fill: none;
    stroke: #fff;
    stroke-width: .7;
    opacity: .08;
    pointer-events: none;
}
.page-sticky__target-dot { fill: #fff; stroke: none; }

/* ───────────────────────────────────────────────────────────────────────────
   Médaillon, titre, sous-titre, contrôles
   ───────────────────────────────────────────────────────────────────────── */
.page-sticky__row {
    position: relative;               /* au-dessus du motif */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding-bottom: 1.75rem;
    transition: padding var(--ph-duration) ease, gap var(--ph-duration) ease;
}

/* Logo vert et blanc : posé sur un disque blanc, sinon il se perd sur le vert */
.page-hero__medal {
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    border: 4px solid var(--ph-gold);
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    transition: width var(--ph-duration) ease, height var(--ph-duration) ease,
                border-width var(--ph-duration) ease;
}
.page-hero__medal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero { flex: 1 1 16rem; min-width: 0; }
.page-hero__title {
    margin: 0;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.75rem);   /* 60 px sur grand écran */
    font-weight: 700;
    line-height: 1.02;
    color: var(--ph-title);
    transition: font-size var(--ph-duration) ease;
}
.page-hero__lead {
    max-height: 6em;
    margin: .5rem 0 0;
    overflow: hidden;
    font-size: 1.25rem;               /* 20 px */
    line-height: 1.45;
    color: var(--ph-text);
    transition: max-height var(--ph-duration) ease, opacity var(--ph-duration) ease,
                margin var(--ph-duration) ease, visibility 0s linear 0s;
}

/* Contrôles à droite du titre (filtres des Actualités, bouton de gestion) */
.page-sticky__aside { position: relative; margin-left: auto; }
.page-sticky__aside .form-label { color: var(--ph-text); }

/* ───────────────────────────────────────────────────────────────────────────
   Liens « Sur cette page »
   ───────────────────────────────────────────────────────────────────────── */
.page-subnav {
    position: relative;
    margin: 0 calc(-1 * var(--ph-pad-x));   /* filet d’un bord à l’autre */
    padding: 0 calc(var(--ph-pad-x) - .875rem);
    border-top: 1px solid var(--ph-rule);
    overflow-x: auto;                       /* défilement horizontal si besoin */
    scrollbar-width: none;                  /* sans barre visible */
    -webkit-overflow-scrolling: touch;
    transition: padding var(--ph-duration) ease, margin var(--ph-duration) ease;
}
.page-subnav::-webkit-scrollbar { display: none; }
.page-subnav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-subnav__list li { flex: 0 0 auto; }
.page-subnav__link {
    display: inline-flex;
    align-items: center;
    min-height: 54px;                       /* cible tactile ≥ 44 px */
    padding: 0 .875rem;
    color: var(--ph-text);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -3px 0 transparent; /* place du soulignement doré */
    transition: min-height var(--ph-duration) ease;
}
.page-subnav__link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}
/* Section en cours de lecture */
.page-subnav__link[aria-current] {
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--ph-gold);
}

/* ───────────────────────────────────────────────────────────────────────────
   Rangée sous le titre (onglets Bootstrap des Résultats)
   ───────────────────────────────────────────────────────────────────────── */
.page-sticky__below {
    position: relative;
    margin: 0 calc(-1 * var(--ph-pad-x));
    padding: .55rem var(--ph-pad-x);
    border-top: 1px solid var(--ph-rule);
}
.page-sticky__below .nav-tabs {
    flex-wrap: nowrap;          /* une seule ligne, défilement horizontal */
    gap: .4rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 0;
    margin: 0;
    padding: .2rem .15rem;
    scrollbar-width: none;
}
.page-sticky__below .nav-tabs::-webkit-scrollbar { display: none; }
.page-sticky__below .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
    padding: .35rem .95rem;
    border: 1px solid rgba(247, 243, 234, .4);
    border-radius: 50rem;
    margin: 0;
    background: transparent;
    color: var(--ph-text);
    font-weight: 600;
    white-space: nowrap;
}
.page-sticky__below .nav-tabs .nav-link:hover {
    background: rgba(247, 243, 234, .1);
    color: #fff;
}
.page-sticky__below .nav-tabs .nav-link.active {
    background: var(--ph-title);
    border-color: var(--ph-title);
    color: var(--ph-bg);        /* ≈ 11,0:1 */
}

/* ───────────────────────────────────────────────────────────────────────────
   Focus clavier : doré, bien visible sur le vert
   ───────────────────────────────────────────────────────────────────────── */
.page-sticky a:focus-visible,
.page-sticky button:focus-visible,
.page-sticky select:focus-visible,
.page-sticky input:focus-visible {
    outline: 3px solid var(--ph-gold);
    outline-offset: 2px;
    box-shadow: none;
}
/* Dans les lignes défilantes (qui rognent ce qui dépasse) : contour intérieur */
.page-subnav__link:focus-visible,
.page-sticky__below .nav-link:focus-visible { outline-offset: -3px; }
.page-subnav__link[aria-current]:focus-visible { box-shadow: inset 0 -3px 0 var(--ph-gold); }

/* ───────────────────────────────────────────────────────────────────────────
   État compact (page défilée)
   ───────────────────────────────────────────────────────────────────────── */
.page-sticky.is-compact {
    padding-top: .25rem;
    padding-bottom: .25rem;
    margin-bottom: var(--ph-shrink, 0px);   /* garde la même place dans la page */
}
.page-sticky.is-compact .page-sticky__card {
    padding-top: .5rem;
    padding-bottom: .5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);   /* légère ombre portée */
}
.page-sticky.is-compact .page-sticky__row { gap: .75rem 1rem; padding-bottom: 0; }
.page-sticky.is-compact .page-hero__medal { width: 44px; height: 44px; border-width: 2px; }
.page-sticky.is-compact .page-hero__title {
    font-size: 1.75rem;                     /* 28 px, sur une ligne */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-sticky.is-compact .page-hero__lead {
    width: 0;                               /* ne réserve plus de largeur */
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, 0s, 0s, var(--ph-duration);
}
/* Libellés des filtres masqués visuellement (restent lus) : bande basse */
.page-sticky.is-compact .page-sticky__aside .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Ordinateur et tablette : titre à gauche, liens / onglets alignés à droite */
@media (min-width: 768px) {
    .page-sticky.is-compact .page-sticky__card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .page-sticky.is-compact .page-sticky__row { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; }
    .page-sticky.is-compact .page-hero { flex: 0 1 auto; }
    .page-sticky.is-compact .page-subnav,
    .page-sticky.is-compact .page-sticky__below {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border-top: 0;
    }
    .page-sticky.is-compact .page-subnav__list { margin-left: auto; }
    .page-sticky.is-compact .page-subnav__link {
        min-height: 44px;
        padding: 0 .55rem;                  /* tient à côté du titre dès 1280 px */
        font-size: .9375rem;
    }
    .page-sticky.is-compact .page-sticky__below .nav-tabs {
        justify-content: flex-end;
        padding-top: 0;                     /* bande ≤ 72 px avec les onglets */
        padding-bottom: 0;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Mobile (< 768 px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-sticky { --ph-pad-x: 1rem; }
    .page-sticky__card { max-width: calc(100% - 1rem); padding-top: 1.25rem; }
    .page-sticky__target { top: -90px; right: -70px; width: 260px; height: 260px; }
    .page-sticky__row { flex-wrap: wrap; gap: .75rem .9rem; padding-bottom: 1.1rem; }
    .page-hero__medal { width: 64px; height: 64px; border-width: 3px; }
    .page-hero { flex: 1 1 0; }
    .page-hero__title { font-size: 2.125rem; line-height: 1.05; }   /* 34 px */
    .page-hero__lead { font-size: 1rem; }                          /* 16 px */
    .page-sticky__aside { width: 100%; margin-left: 0; }
    .page-subnav__link { min-height: 48px; }

    .page-sticky.is-compact .page-sticky__card { padding-top: .4rem; padding-bottom: 0; }
    .page-sticky.is-compact .page-sticky__row { gap: .4rem .6rem; padding-bottom: .4rem; }
    .page-sticky.is-compact .page-hero { flex: 1 1 0; }
    /* Filtres (Actualités) : seconde ligne, le titre garde toute la largeur */
    .page-sticky.is-compact .page-sticky__aside { flex: 1 0 100%; }
    .page-sticky.is-compact .page-hero__medal { width: 32px; height: 32px; }
    .page-sticky.is-compact .page-hero__title { font-size: 1.375rem; }   /* 22 px */
    .page-sticky.is-compact .page-subnav__link { min-height: 44px; }
    .page-sticky.is-compact .page-sticky__below { padding-top: .3rem; padding-bottom: .3rem; }
}