/* ─────────────────────────────────────────────────────────────────────────
   nav-c4c.css — les barres de navigation du site Culture For Causes.

   barre 1 — header : [logo] · [nom de la section, cliquable] · [outils]
   barre 2 — sous-sections de la section active
   barre 3 — troisième niveau, quand il existe

   Le markup est GÉNÉRÉ par `npm run nav:build` depuis data/nav-c4c.json.
   Ne pas l'écrire à la main dans les pages : il serait écrasé au build suivant.

   ── LE CENTRE DU HEADER ───────────────────────────────────────────────────
   Il porte le NOM de la section courante, cliquable, qui déroule les autres.
   Pas les huit sections alignées : elles ne tiennent pas dans un header qui
   porte déjà un logo et des outils (mesuré : 859 px pour 846 disponibles), et
   surtout ce n'est pas l'ergonomie du site — on affiche où l'on est, on
   déroule pour aller ailleurs. Le sélecteur reste identique à toutes les
   largeurs, mobile compris : rien à replier, donc pas de menu hamburger.

   ── L'ANCRAGE COLLANT, ET POURQUOI IL EST EN VARIABLES ────────────────────
   Les pages codaient `top:48px` et `top:96px` en dur. Or au 2026-08-12 les
   barres mesuraient 60, 43 et 51 px : la barre 2 glissait de 12 px SOUS le
   header et la barre 3 de 7 px sous la barre 2. Les constantes dataient d'un
   masthead plus court et n'ont pas suivi. `nav-c4c.js` mesure les hauteurs
   réelles et pose --nav1-h / --nav2-h ; les valeurs ci-dessous ne sont que des
   replis pour le premier rendu, avant que le script ait tourné.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Doit suivre la `min-height` de la barre 1 ci-dessous — 88 px depuis que la
     marque a doublé (2026-08-27). `nav-c4c.js` recalcule la vraie hauteur au
     chargement, mais une valeur périmée ici fait glisser la barre 2 sous le
     header le temps du premier rendu. C'est précisément la panne décrite en
     tête de ce fichier ; elle se reproduit à chaque fois qu'on change la
     hauteur du header sans revenir ici. */
  --nav1-h: 90px;   /* 88 de min-height + 2 de border-bottom */
  --nav2-h: 43px;

  /* ── L'orange de marque en TEXTE (O7) ──────────────────────────────────
     #D25D38 ne donne que 3,53:1 sur le papier et 3,19 sur le papier
     secondaire : sous les 4,5 exigés pour du petit texte. Il n'y est jamais
     arrivé, dans aucun des deux thèmes — le sombre n'a fait que le révéler
     sur 28 éléments d'un coup.

     Et AUCUN orange ne passe des deux côtés : celui qui satisfait le papier
     échoue sur le fond sombre, et réciproquement. D'où deux valeurs.

                     papier  papier-2 | sombre  sombre-2
       #D25D38 marque  3,53     3,19  |  4,44     3,67   ← échoue partout
       #A8402A clair   5,51     4,98  |  2,84     2,35
       #E8845F sombre  2,40     2,17  |  6,54     5,40

     `--accent-text` ne sert QU'AU TEXTE. Les fonds de boutons, bordures et
     filets gardent #D25D38 : ils portent du texte blanc et relèvent du seuil
     de 3:1, qu'ils franchissent. La marque reste donc visuellement intacte.

     Nom neuf à dessein : `--accent` existe déjà côté Museum Voices, avec une
     valeur teal en sombre. Le redéfinir ici l'écraserait — nav-c4c.css est
     chargée après leurs styles inline. */
  --accent-text: #A8402A;
}

/* ══ Palette claire — FILET DE SÉCURITÉ, pas source de vérité ═════════════════
   Les 29 pages écrites à la main déclarent ces tokens dans leur `<style>`
   inline. Les 48 fiches générées (public/artists/, public/artworks/) ne les
   déclaraient nulle part : leur `:root` ne porte que les polices. Sur elles,
   `background: var(--paper)` était donc INVALIDE — les trois barres sortaient
   transparentes et sans filet, et le contenu défilait au travers (constaté le
   2026-09-12 sur /artists/michael-zancan). Le thème sombre, lui, marchait :
   `html.dark` ci-dessous définit bien la palette. Seul le clair manquait.

   `:where(html)` et non `:root` : spécificité ZÉRO (0,0,0). N'importe quelle
   déclaration de page (`:root`, 0,1,0) l'emporte, quel que soit l'ordre de
   chargement — or la moitié des pages posent leur `<style>` AVANT ce fichier.
   Un `:root` ici aurait écrasé les valeurs voulues de login.html, index.html et
   tarifs.html, qui montent délibérément `--ink-4` à #6B6B6B (#8C8C8C ne donne
   que 3,03:1 sur le papier). Ce bloc ne s'applique donc QUE là où rien n'est
   déclaré : il comble, il n'impose pas.

   Valeurs reprises à l'identique des 29 pages — si elles changent, c'est ici
   ET dans les pages, tant que la feuille de thème partagée n'existe pas. */
:where(html) {
  --paper:   #F4F3EF;
  --paper-2: #E9E8E2;
  --ink:     #1A1A1A;
  --ink-2:   #3A3A3A;
  --ink-3:   #5C5C5C;
  --ink-4:   #8C8C8C;
  --rule:    #C0BEBC;
}

/* ══ Palette sombre des pages institutionnelles ═══════════════════════════════
   Le bouton lune existait sur ces pages depuis toujours et n'y faisait RIEN :
   le script inline posait bien `.dark` sur <html>, mais aucune des 17 pages ne
   déclarait de surcharge — leurs tokens `:root` restaient au papier clair.
   Un contrôle sans effet est pire que pas de contrôle (constaté le 2026-08-27).

   POURQUOI ICI, dans la feuille de navigation. Ce n'est pas son objet, et
   c'est assumé : c'est la SEULE feuille que chargent les 17 pages, et elle
   déclare déjà des propriétés de document (--nav1-h). L'alternative était de
   dupliquer la palette dans les 17 blocs `<style>` inline, où elle aurait
   dérivé à la première retouche. Le jour où une vraie feuille de thème
   partagée existe, ce bloc y déménage tel quel.

   `html.dark` (0,1,1) l'emporte sur `:root` (0,1,0) : l'ordre de chargement
   n'entre pas en jeu, la surcharge tient même si la feuille passait avant les
   styles inline.

   Palette reprise à l'identique d'index.html, mêmes noms de tokens — les deux
   moitiés du site basculent donc sur les mêmes valeurs.

   Les couleurs codées en dur des pages (#D25D38, #B94E2E, #fff, #68dbae) sont
   volontairement laissées : ce sont des accents POSÉS SUR des surfaces
   tokenisées — orange de marque, blanc sur bouton orange, vert des chiffres du
   hero Réconciliation. Elles tiennent sur fond clair comme sur fond sombre.
   Audit du 2026-08-28 : 79 occurrences, aucune à corriger. */
html.dark {
  color-scheme: dark;
  --paper:   #1A1A1A;
  --paper-2: #2A2A2A;
  --ink:     #F4F3EF;
  --ink-2:   #D0CFC8;
  --ink-3:   #A8A8A0;
  --ink-4:   #909090;
  --rule:    #3A3A38;
  --accent-text: #E8845F;   /* cf. le tableau de contraste dans :root ci-dessus */
}

/* ══ Commun aux trois barres ══════════════════════════════════════════════ */
.navc4c {
  background: var(--paper);
  border-bottom: 2px solid var(--rule);
  position: sticky;
}
.navc4c-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 767px) { .navc4c-inner { padding: 0 16px; } }

/* Piste défilable : la barre déborde plutôt que de se replier sur deux lignes,
   ce qui ferait sauter la hauteur mesurée et donc l'ancrage des barres dessous. */
.navc4c-scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.navc4c-scroll::-webkit-scrollbar { display: none; }

/* ══ Barre 1 — header ═════════════════════════════════════════════════════ */
[data-navc4c="1"] { top: 0; z-index: 50; }
[data-navc4c="1"] .navc4c-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  /* 88 px = le logo de 52 px plus sa respiration. La barre en faisait 60 quand
     le logo en faisait 26 ; doubler l'un sans l'autre l'aurait fait toucher les
     bords. */
  min-height: 88px;
}

.navc4c-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.navc4c-brand img { height: 52px; width: 52px; object-fit: contain; flex-shrink: 0; }
.navc4c-brand span {
  font-family: var(--f-mono); font-size: 20px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
/* La marque doublée tient sur les écrans larges, pas en dessous d'environ
   1080 px : « CULTURE FOR CAUSES NETWORK » mesure 354 px à 20 px, plus 52 px de
   logo — la colonne de gauche n'en offre pas tant. Et comme le span est en
   `nowrap` avec `overflow: visible`, il ne se tronque pas : il passe SOUS le
   sélecteur de section (mesuré : 112 px de chevauchement à 820 px). D'où ce
   palier, qui rend la marque un cran plus petite plutôt que de la laisser
   déborder. */
@media (max-width: 1080px) {
  [data-navc4c="1"] .navc4c-inner { min-height: 72px; }
  .navc4c-brand img { height: 40px; width: 40px; }
  .navc4c-brand span { font-size: 15px; }
}
/* Second palier : le sélecteur, lui, ne rétrécit plus (sa `clamp` bute à 26 px
   dès 813 px de large), si bien que la place laissée à la marque continue de
   fondre quand le premier palier, lui, ne bouge plus. Mesuré : 11 px de
   chevauchement résiduel à 820 px. */
@media (max-width: 900px) {
  [data-navc4c="1"] .navc4c-inner { min-height: 64px; }
  .navc4c-brand img { height: 34px; width: 34px; }
  .navc4c-brand span { font-size: 13px; }
}
@media (max-width: 767px) { .navc4c-brand span { display: none; } }

/* ── Sélecteur de section ── */
.navc4c-picker { position: relative; display: flex; justify-content: center; }
#navc4c-section-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  transition: opacity .15s;
}
#navc4c-section-btn:hover { opacity: .7; }
#navc4c-section-btn > svg { color: var(--ink-4); flex-shrink: 0; margin-top: 2px; }

.navc4c-picker-label {
  font-family: var(--f-display);
  font-size: clamp(17px, 3.2vw, 26px);
  line-height: 1;
  display: flex; align-items: baseline; gap: 5px;
  white-space: nowrap;
}
.navc4c-picker-label > span { color: var(--accent-text); }
.navc4c-picker-label > em { font-weight: 300; font-style: italic; color: var(--ink-2); }

#navc4c-section-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
  min-width: 240px; z-index: 200; padding: 6px 0;
}
#navc4c-section-menu.open { display: block; }

/* Le panneau de langue est rempli par i18n-switcher.js. Sa géométrie vit ici,
   plutôt que dans un attribut style généré, afin qu'il puisse devenir une
   feuille mobile sans dupliquer le markup sur chaque page. */
#lang-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--paper); border: 1px solid var(--rule);
  min-width: 170px; padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10); z-index: 200;
}
#lang-menu.open { display: block; }

/* Fond partagé des deux feuilles mobiles. Il est créé par nav-c4c.js afin de
   rester hors du HTML généré et de ne pas interférer avec la SPA. */
.navc4c-mobile-backdrop {
  display: none;
  /* Les feuilles vivent dans la barre 1, qui crée un contexte d'empilement à
     z-index:50. Le fond doit donc rester EN DESSOUS de ce contexte : à 70 il
     assombrissait certes la page, mais interceptait aussi tous les clics de la
     feuille, rendue visuellement au travers de lui. */
  position: fixed; inset: 0; z-index: 45;
  background: rgba(18, 18, 17, .42);
  border: 0; padding: 0;
}

/* Entrées du menu déroulant.
   SÉLECTEUR SCOPÉ, et pas seulement `.navc4c-picker-item` : la règle générique
   `.navc4c-item { padding: 12px 0 }` est déclarée PLUS BAS dans ce fichier avec
   la même spécificité (0,1,0), donc elle l'emportait — le padding horizontal
   tombait à 0 et les libellés se collaient au bord gauche du menu (constaté le
   2026-08-12). Préfixer par l'id du menu (1,1,0) rend la règle indépendante de
   l'ordre de déclaration. */
#navc4c-section-menu .navc4c-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 11px 20px;
  border-bottom: 0;
  /* Le libellé long ne doit pas élargir le menu au-delà du raisonnable */
  white-space: nowrap;
}
#navc4c-section-menu .navc4c-item:hover { background: var(--paper-2); color: var(--ink); }

/* L'entrée courante : un filet vertical à gauche plutôt qu'un soulignement —
   dans une liste verticale, un soulignement se confond avec un séparateur. */
#navc4c-section-menu .navc4c-item.on {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 3px 0 0 #D25D38;
}

/* Les marqueurs « soon » et « ↗ » sont poussés au bout de la ligne : alignés
   entre eux d'une entrée à l'autre, ils se lisent comme une colonne d'état. */
#navc4c-section-menu .navc4c-item.soon::after,
#navc4c-section-menu .navc4c-ext::after { margin-left: auto; }

.navc4c-utils { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* ══ Barre 2 — sous-sections ══════════════════════════════════════════════ */
[data-navc4c="2"] { top: var(--nav1-h); z-index: 40; }
[data-navc4c="2"] .navc4c-scroll { gap: 28px; min-height: 43px; }

/* ══ Barre 3 — troisième niveau ═══════════════════════════════════════════ */
/* Fond distinct : sans lui, trois bandes de même couleur empilées se lisent
   comme un seul bloc et la hiérarchie disparaît.
   Museum Voices n'a pas de barre 3 — son troisième niveau reste le menu
   vertical de l'application (cf. `"bars": 2` dans data/nav-c4c.json). */
[data-navc4c="3"] { top: calc(var(--nav1-h) + var(--nav2-h)); z-index: 30; background: var(--paper-2); }
[data-navc4c="3"] .navc4c-scroll { gap: 22px; min-height: 44px; }

/* Lien de retour vers la section parente, à gauche de la barre 3 */
.navc4c-back {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
  color: var(--ink-3); text-decoration: none;
  padding-right: 16px; margin-right: 8px;
  border-right: 1px solid var(--rule);
  flex-shrink: 0; transition: color .15s; white-space: nowrap;
}
.navc4c-back:hover { color: var(--ink); }

/* ══ Entrées ══════════════════════════════════════════════════════════════ */
.navc4c-item {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap; flex-shrink: 0;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.navc4c-item:hover { color: var(--ink); }
.navc4c-item.on { color: var(--ink); border-bottom-color: #D25D38; font-weight: 600; }
[data-navc4c="3"] .navc4c-item { font-size: 10px; padding: 11px 0; }

/* « soon » : visible mais inerte. Le contenu n'existe pas encore — l'entrée est
   montrée pour que la structure cible soit lisible, pas pour être cliquée. */
.navc4c-item.soon { color: var(--ink-4); cursor: default; pointer-events: none; }
.navc4c-item.soon::after {
  content: "soon";
  font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-left: 6px; padding: 1px 4px;
  border: 1px solid var(--rule); color: var(--ink-4);
}

.navc4c-ext::after { content: " ↗"; font-size: 9px; }

/* ══ Mobile ═══════════════════════════════════════════════════════════════ */
/* Cible tactile : 11 px de haut ne suffit pas au doigt (WCAG 2.5.8, 24 px min). */
@media (max-width: 767px) {
  /* Les réglages restent accessibles sur téléphone. Le libellé EN est plus
     explicite qu'un globe seul et tient avec deux vraies cibles tactiles. */
  [data-navc4c="1"] .navc4c-inner {
    min-height: 64px;
    grid-template-columns: 44px minmax(0, 1fr) 100px;
    gap: 8px;
  }
  .navc4c-brand { width: 44px; height: 44px; justify-content: center; margin-left: -5px; }
  #navc4c-section-btn { min-height: 44px; }
  .navc4c-utils { gap: 4px; }
  #lang-switcher { display: block !important; }
  #lang-btn, #theme-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 4px;
  }
  #lang-btn { width: 52px !important; gap: 4px !important; font-weight: 700 !important; }
  #lang-btn > span:not(#lang-current) { display: none; }
  #lang-current { display: inline !important; font-size: 10px; letter-spacing: .06em; }
  #lang-btn svg { width: 15px; height: 15px; }
  #lang-btn:hover, #theme-toggle:hover { background: var(--paper-2); }

  [data-navc4c="2"] .navc4c-item, [data-navc4c="3"] .navc4c-item { padding-top: 14px; padding-bottom: 14px; }

  /* Les menus qui étaient de petits popovers de bureau deviennent des feuilles
     ancrées en bas : elles se lisent mieux au pouce et leurs liens ne se
     retrouvent pas coincés sous le header. Le rôle reste `menu` : on ne piège
     donc pas artificiellement le focus dans une fausse modale. */
  .navc4c-mobile-backdrop.open { display: block; }
  #navc4c-section-menu,
  #lang-menu {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(calc(100% + 20px));
    min-width: 0;
    max-height: min(78dvh, 620px);
    overflow: auto;
    margin: 0;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--rule);
    border-radius: 16px 16px 0 0;
    background: var(--paper);
    box-shadow: 0 -16px 36px -8px rgba(0, 0, 0, .22);
    z-index: 80;
    transition: transform .24s ease, visibility .24s;
  }
  #navc4c-section-menu.open,
  #lang-menu.open {
    display: flex;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  #navc4c-section-menu { flex-direction: column; gap: 4px; }
  #navc4c-section-menu .navc4c-item {
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 6px;
    font-family: var(--f-display);
    font-size: 20px;
    letter-spacing: -.015em;
    text-transform: none;
  }
  #navc4c-section-menu .navc4c-item.on { background: color-mix(in srgb, var(--accent-text) 9%, transparent); }
  #lang-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #lang-menu.open { display: grid; }
  #lang-menu button {
    min-height: 52px;
    padding: 10px 12px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 5px;
    background: var(--paper-2) !important;
  }
  #lang-menu button:disabled { display: none !important; }

  /* La sous-navigation reste une piste tactile, mais un dégradé et une flèche
     signalent qu'elle contient d'autres entrées. nav-c4c.js retire l'indice
     quand l'extrémité droite est atteinte. */
  [data-navc4c="2"].navc4c-can-scroll-right::after,
  [data-navc4c="3"].navc4c-can-scroll-right::after {
    content: "›";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    color: var(--ink-3);
    font-size: 20px;
    background: linear-gradient(90deg, transparent, var(--paper) 55%);
    pointer-events: none;
  }
}

/* ══ Bloc « landing page + lien sortant » ═════════════════════════════════ */
/* MuseumWeek, Magazine et (si D4) Enquêtes gardent une page courte sur le
   domaine principal avant d'envoyer vers un site tiers. Ce bloc est GÉNÉRÉ
   (`npm run nav:build`, marqueurs LANDING:START/END) : `rel="noopener"` n'y est
   jamais oublié et le nom d'hôte affiché ne peut pas mentir sur la destination. */
.lp-out {
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  background: var(--paper-2);
  padding: 56px 40px;
}
@media (max-width: 767px) { .lp-out { padding: 40px 16px; } }

.lp-out-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; text-align: center; }
@media (max-width: 767px) { .lp-out-inner { padding: 0; } }

.lp-out-kicker {
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 16px;
}
.lp-out-title {
  font-family: var(--f-display); font-size: clamp(26px, 4vw, 38px);
  font-weight: 400; line-height: 1.15; color: var(--ink); margin-bottom: 14px;
}
.lp-out-lede {
  font-family: var(--f-body); font-size: 16px; line-height: 26px;
  color: var(--ink-2); max-width: 620px; margin: 0 auto 28px;
}

.lp-out-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #B94E2E;   /* #D25D38 ne donne que 3,92:1 sur blanc */
  text-decoration: none; padding: 14px 26px;
  transition: background .15s;
}
.lp-out-cta:hover { background: #A8402A; }
.lp-out-cta svg { flex-shrink: 0; }

/* Le nom d'hôte, en clair : un visiteur doit savoir OÙ il va avant de cliquer,
   pas après. C'est aussi ce qui distingue ce bloc d'un bouton ordinaire. */
.lp-out-host {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-4); margin-top: 14px;
}