/* ----------------------------------------------------------------
   pape-france.fr — EN-TÊTE et PIED DE PAGE
   ---------------------------------------------------------------- */

/* ⚠️ SECTION SANS CIBLE DEPUIS LE 18 SEPTEMBRE 2026 ─────────────
   Tout ce qui suit et qui vise .papefrance-siteheader ne s'applique
   plus à rien. L'en-tête V4 mis en production ce jour-là sert
   .papefrance-topbar[data-fond="clair"] sur TOUTES les pages, y
   compris internes ; .papefrance-siteheader a disparu du markup –
   zéro occurrence dans le HTML servi, vérifié sur / et /inscriptions/.

   ⚠️ CE N'EST PAS DÉTECTABLE DEPUIS LE DÉPÔT. La règle du projet
   (CLAUDE.md, « Le HTML n'est presque jamais dans le dépôt ») dit
   qu'une classe sans occurrence ici n'est PAS du code mort, le markup
   vivant en base. C'est vrai, et c'est précisément ce qui rend ces
   règles indiscernables de règles actives : seul le HTML servi
   tranche. Le piège a été payé deux fois la même semaine – le burger
   affiché en desktop (règle GB clé sur un uniqueId périmé) et le
   masquage au défilement, en panne silencieuse sur tout le site parce
   que son sélecteur ne visait plus rien.

   DONC : MODIFIER UNE RÈGLE .papefrance-siteheader CI-DESSOUS N'AURA
   AUCUN EFFET ET NE LÈVERA AUCUN MESSAGE. Écrire pour
   .papefrance-topbar[data-fond="clair"], dans header-v4.css.

   Deux exceptions, toujours vivantes :
   - .papefrance-siteheader__cta – le bouton de don porte cette classe
     sur les deux en-têtes (vérifié dans l'export du 17 septembre) ;
   - .papefrance-siteheader--cache et la transition qui l'accompagne,
     réécrites pour couvrir les deux préfixes (bloc ≤ 768 px).

   Conservé et non supprimé : l'en-tête interne peut revenir, et le
   dépôt seul ne permettrait pas de le rétablir. À trancher après
   l'évènement. ─────────────────────────────────────────────────── */

   /* --- EN-TÊTE --- */
.papefrance-siteheader {
  position: sticky;
  top: var(--pf-flag-h);
  z-index: 50;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--rule);
  font-family: 'Jost', system-ui, sans-serif !important;
}
.papefrance-siteheader__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.papefrance-siteheader__brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.1;
}
.papefrance-siteheader .papefrance-brand-logo { height: 42px; }
.papefrance-siteheader__brand-main {
  font-family: 'LeonXIV', sans-serif !important;
  font-size: 19px; font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.papefrance-siteheader__brand-sub {
  font-size: 10px; font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.papefrance-siteheader__right, .papefrance-topbar__right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.papefrance-siteheader__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.papefrance-siteheader__nav a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}
.papefrance-siteheader__nav a:hover,
.papefrance-siteheader__nav a[aria-current="page"] { color: var(--navy); }

/* ─── SOUS-MENUS DÉROULANTS, AU-DESSUS DE 768 px ─────────────────────────
   Le panneau du sous-menu desktop n'existait nulle part dans le thème : il
   n'était visible que parce que le bloc GenerateBlocks peignait ses
   .menu-item en #000000, une couleur écrite en base. En nettoyant ce noir
   dans l'éditeur — ce qu'il fallait faire, il donnait un sous-menu noir en
   thème clair — le dernier fond a disparu avec lui : le menu s'ouvrait sur
   du transparent, sans ombre ni bordure, texte marine posé à même le
   contenu de la page. Quasiment invisible.

   Le panneau est donc écrit ici, en tokens, et ne dépend plus d'un réglage
   en base. Le `!important` sur le fond des .menu-item reste nécessaire tant
   qu'un des quatre blocs de navigation porte encore son noir d'origine.

   Les deux en-têtes sont traités ensemble via :is(), comme partout
   ailleurs : c'est un bloc correctif propre à l'un des deux qui avait cassé
   les sous-menus de l'accueil. */
@media (min-width: 769px) {
  :is(.papefrance-topbar__nav, .papefrance-siteheader__nav) :is(.gb-sub-menu, ul.sub-menu) {
    background: var(--paper) !important;
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 6px !important;
    min-width: 220px;
    box-shadow: 0 24px 48px -24px rgba(15,45,133,.45);
    overflow: hidden;
  }
  :is(.papefrance-topbar__nav, .papefrance-siteheader__nav) :is(.gb-sub-menu, ul.sub-menu) .menu-item {
    background: transparent !important;
    color: inherit !important;
  }
  :is(.papefrance-topbar__nav, .papefrance-siteheader__nav) :is(.gb-sub-menu, ul.sub-menu) a {
    display: block;
    padding: 10px 14px !important;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ink) !important;
    text-decoration: none;
  }
  :is(.papefrance-topbar__nav, .papefrance-siteheader__nav) :is(.gb-sub-menu, ul.sub-menu) a:hover,
  :is(.papefrance-topbar__nav, .papefrance-siteheader__nav) :is(.gb-sub-menu, ul.sub-menu) a:focus-visible {
    background: var(--primary-tint);
    color: var(--navy) !important;
  }
  /* --primary-deep et non --navy : en thème sombre, --navy s'éclaircit à
     #3E63D8, qui ne donne que 3,2:1 sur la surface #16204A du panneau.
     --primary-deep vaut #6E8CF2 en sombre et reste --navy-900 en clair,
     lisible dans les deux. */
  :is(.papefrance-topbar__nav, .papefrance-siteheader__nav) :is(.gb-sub-menu, ul.sub-menu) .current-menu-item > a {
    color: var(--primary-deep) !important;
    font-weight: 600;
  }
}
.papefrance-siteheader__cta {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--navy-900) !important;
  background: var(--yellow) !important;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .2s;
  white-space: nowrap;
}
.papefrance-siteheader__cta:hover,
.papefrance-siteheader__cta:focus,
.papefrance-siteheader__cta:active {
  background: var(--yellow-hover, #ffb735) !important;
  color: var(--navy-900) !important;
}

/* .papefrance-siteheader__toggle : SUPPRIMÉ en v4.1.
   Burger fait main, jamais câblé — aucun JS du site ne pose
   [data-open], vérifié par grep sur tout le dépôt. Il était pourtant
   rendu visible sous 900 px, à côté du burger fonctionnel de
   GenerateBlocks (.gb-menu-toggle), soit deux hamburgers dont un
   inerte. Le seul bouton de menu est celui de GB.
   Équivalents supprimés en même temps : .papefrance-topbar__toggle
   (style-v3.css) et .site-header__toggle (pages-v3.css). */


/* --- PIED DE PAGE --- */
.papefrance-sitefooter {
  background: var(--navy-900) !important;
  color: rgba(255,255,255,0.72);
  font-family: 'Jost', system-ui, sans-serif !important;
}
.papefrance-sitefooter__top {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px var(--pad) 52px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.papefrance-sitefooter__brand-main {
  font-family: 'LeonXIV', sans-serif !important;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
.papefrance-sitefooter__brand-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
}
.papefrance-sitefooter__tagline {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 18px 0 0;
  max-width: 32ch;
}
.papefrance-sitefooter__col h3, .papefrance-sitefooter__col h4 {
  font-size: 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 18px;
}
.papefrance-sitefooter__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.papefrance-sitefooter__col a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}
.papefrance-sitefooter__col a:hover { color: #fff; }
.papefrance-sitefooter__cta-card p {
  font-family: 'LeonXIV', sans-serif !important;
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 16px;
}
.papefrance-sitefooter__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--navy-900) !important;
  background: var(--yellow) !important;
  padding: 12px 22px;
  border-radius: 999px;
  transition: transform .2s, background .2s;
}
.papefrance-sitefooter__cta:hover { transform: translateY(-1px); background: var(--yellow-hover, #ffb735) !important; }
.papefrance-sitefooter__cta .arrow { transition: transform .2s; }
.papefrance-sitefooter__cta:hover .arrow { transform: translateX(3px); }

.papefrance-sitefooter__bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.papefrance-sitefooter__bottom-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
}
.papefrance-sitefooter__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.papefrance-sitefooter__legal a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color .2s;
}
.papefrance-sitefooter__legal a:hover { color: #fff; }
.papefrance-sitefooter__social { display: flex; gap: 10px; }
.papefrance-sitefooter__social a {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition: border-color .2s, color .2s, background .2s;
}
.papefrance-sitefooter__social a:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.papefrance-sitefooter__social svg { width: 17px; height: 17px; display: block; }


/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  /* .papefrance-siteheader__toggle n'est plus affiché ici : ce burger
     fait main n'est câblé à aucun JS (aucune occurrence de data-open
     dans le site), il s'affichait donc à côté de celui, fonctionnel,
     de GenerateBlocks. Voir la note en fin de fichier. */

  .papefrance-siteheader__inner {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
  }
/*  .page-id-1234 .papefrance-siteheader__inner {
    padding: 6px var(--pad);
  }*/
  .papefrance-siteheader__brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .papefrance-siteheader__brand-main,
  .papefrance-siteheader__brand-sub { white-space: normal; }

  .papefrance-siteheader__right, .papefrance-topbar__right {
    flex-direction: column-reverse;
    gap: 3px;
  }
  .papefrance-siteheader__right {
/*    position: absolute;*/
    top: 100%; left: 0; right: 0;
/*    flex-direction: column;*/
    flex-direction: column-reverse;
/*    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 24px 40px -28px rgba(20,17,50,.5);
    padding: 8px 24px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;*/
    transition: opacity .2s ease, transform .2s ease;
  }
/*  .page-id-1234 .papefrance-siteheader__right {
    flex-direction: row;
  }*/

  /* .papefrance-siteheader__nav en colonne : DÉPLACÉ à 768 px, plus
     bas dans ce fichier. Entre 769 et 900 px, GenerateBlocks rend
     encore le menu en mode desktop (data-gb-mobile-breakpoint="768px")
     et ces règles lui imposaient une mise en page mobile. C'est le
     défaut que la v4 déclarait avoir corrigé et qui subsistait ici. */

  .papefrance-siteheader__cta {
    text-align: center;
/*    margin-top: 16px;*/
    margin-top: 0;
    padding: 14px 18px;
  }

  /* Le burger de GenerateBlocks : DÉPLACÉ à 768 px lui aussi. Il n'a
     rien à faire ici, GB ne l'affiche pas au-dessus de 768 px. Ses
     valeurs étaient de toute façon écrasées par mobile-first-v4.css. */

  .papefrance-sitefooter__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
    padding: 56px 24px 40px;
  }
  .papefrance-sitefooter__brand-block { grid-column: 1 / -1; }
  .papefrance-sitefooter__cta-card { grid-column: 1 / -1; }
  .papefrance-sitefooter__bottom-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ─── 768 px : le SEUL palier du menu ───────────────────────────────
   Imposé par GenerateBlocks, qui l'expose dans le markup
   (<nav data-gb-mobile-breakpoint="768px">). Au-delà, GB rend le menu
   en desktop et rien de ce qui suit ne doit s'appliquer.
   Ces règles vivaient à 900 px, où elles imposaient une mise en page
   mobile à un menu que GB gérait déjà en desktop. */
@media (max-width: 768px) {
  /* En-tête masqué en descendant, rendu en remontant (v4.3, classe posée
     par assets/js/pf-theme.js). 129 px sur 685 à 360 px de large : sur la
     page Itinéraire, près de la moitié de la place restée à la carte une
     fois la fiche ouverte. Le bouton de don suit l'en-tête : il revient au
     premier geste vers le haut.
     transform et non top : l'en-tête reste sticky, rien ne se recalcule
     dans la page. La classe n'est jamais posée menu ouvert (le JS le
     vérifie, mobile-first-v4.css §4 l'annule aussi) : un transform, comme
     le backdrop-filter, ferait de l'en-tête le bloc conteneur de l'overlay
     en position:fixed du menu.

     LES DEUX EN-TÊTES, depuis le 18 septembre 2026. L'en-tête V4 mis
     en production ce jour-là sert .papefrance-topbar[data-fond="clair"]
     sur TOUTES les pages, .papefrance-siteheader ayant disparu du
     markup (relevé dans le HTML servi : zéro occurrence). Ces règles,
     écrites pour lui seul, ne visaient donc plus rien et le masquage
     était tombé en panne partout, sans le moindre message.
     .papefrance-siteheader reste visé au cas où il revienne, et le JS
     pose la classe au préfixe de l'en-tête qu'il a trouvé. */
  :is(.papefrance-siteheader, .papefrance-topbar[data-fond="clair"]) { transition: transform .25s ease; }
  .papefrance-siteheader--cache,
  .papefrance-topbar--cache { transform: translateY(-100%); }
  @media (prefers-reduced-motion: reduce) {
    :is(.papefrance-siteheader, .papefrance-topbar[data-fond="clair"]) { transition: none; }
  }

  .papefrance-siteheader__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 15px;
  }
  .papefrance-siteheader__nav a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--rule);
  }

  /* Le bloc GB peint ce bouton en #000000 en base : on le remet à nu.
     Les dimensions définitives sont posées par mobile-first-v4.css §2,
     chargée après celle-ci. */
  .papefrance-siteheader__nav .gb-menu-toggle,
  .papefrance-topbar__nav .gb-menu-toggle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
    width: 42px; height: 42px;
  }
  .papefrance-siteheader__nav .gb-menu-open-icon svg { color: var(--pf-nav-burger, #123B7A) !important; }
  .papefrance-topbar__nav .gb-menu-open-icon svg { color: var(--pf-nav-ink, #fff) !important; }
  .papefrance-siteheader__nav .gb-menu-close-icon svg,
  .papefrance-topbar__nav .gb-menu-close-icon svg { color: var(--pf-nav-ink, #fff) !important; }
}

/* Ici vivait un second @media (max-width:768px) qui forçait .gb-menu-container
   en position:fixed;inset:0;min-height:100svh !important — MENU FERMÉ
   COMPRIS. C'était un calque invisible plein écran par-dessus la page,
   qui avalait les clics, et mobile-first-v4.css §3 n'existait que pour
   l'annuler à coups de !important. Supprimé en v4.1 : c'est ce que son
   propre commentaire réclamait.

   L'overlay plein écran du menu OUVERT est écrit une seule fois, dans
   mobile-first-v4.css §4, sur les marqueurs réels de GenerateBlocks.
   Ne pas le redéclarer ici. */

@media (max-width: 540px) {
  .papefrance-sitefooter__top { grid-template-columns: 1fr; }
}