/* ═══════════════════════════════════════════════════════════════════════════
   NAV-SITE — LA navigation du site nutri-track.fr. Elio 🎨, 31/08/2026.

   POURQUOI CE FICHIER
   Le site portait CINQ en-têtes différents pour une seule marque :
     · index.html / telecharger*.html : marque SVG, menu mobile, bascule de thème
     · objectifs/ + es/ + ar/ + hi/    : marque SVG « pastille », liens en dur, pas
                                         de hamburger, pas de bascule de thème
     · sources / faq / promesse / …    : hamburger mais pas de bascule de thème
     · blog/ (102 pages)               : « 🥗 Radish » en EMOJI, aucun sous-menu
     · aliments/ (1 355 fiches)        : « 🥗 Radish » en emoji, marque + CTA, rien d'autre
   Conséquences mesurées : un visiteur qui passait au thème clair sur l'accueil le
   reperdait au premier article de blog (js/accueil-store.js n'y était pas chargé),
   et un visiteur espagnol tombait sur des liens français dès le premier clic.

   CE QUE FAIT CE FICHIER
   Un seul composant, `.rn-*` (préfixe vérifié libre le 31/08 : aucune occurrence
   dans css/ ni dans les 2 700 pages — voir la note « collision de nom de classe »).
   Il est AUTONOME : il ne dépend d'aucune règle de accueil.css / objectifs.css /
   blog.css / aliments.css, qui définissent quatre `.nav` incompatibles. Il ne
   dépend QUE des jetons de css/etal.css (L'Ardoise), chargé sur toutes les pages
   concernées. Aucune couleur en dur hors des trois cas commentés.

   ⛔ AUCUN NOUVEAU SYSTÈME : angles vifs (--r-md vaut 0 sous L'Ardoise), filets de
   cageot, aucune ombre portée, aucun dégradé décoratif, aucune icône emoji.

   SANS JAVASCRIPT, TOUT S'OUVRE QUAND MÊME : les sous-menus, le tiroir mobile et
   le sélecteur de langue sont des <details>/<summary> natifs. Le seul élément qui
   exige JS est la bascule de thème — elle est donc servie `hidden` et révélée par
   js/nav-site.js, jamais affichée morte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. La barre ────────────────────────────────────────────────────────── */
.rn{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:var(--ard-trait,1px) solid var(--ard-filet-fin);
  font-family:var(--sans);
}
.rn-barre{
  max-width:1180px; margin:0 auto; padding:0 20px;
  min-height:60px; display:flex; align-items:center; gap:8px;
}

/* ─── 2. La marque — le SVG radis, jamais l'emoji ────────────────────────── */
.rn-marque{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  color:var(--text); text-decoration:none; margin-inline-end:6px;
  padding:6px 4px; border-radius:var(--r-sm);
}
.rn-marque svg{ width:24px; height:38px; flex:none; }
.rn-mot{
  font-family:var(--display); font-size:1.24rem; line-height:1;
  letter-spacing:.005em; padding-block-start:2px;
}
.rn-marque:hover .rn-mot{ color:var(--accent); }

/* ─── 3. Les onglets ─────────────────────────────────────────────────────── */
.rn-onglets{ display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; }

.rn-groupe{ position:relative; }
.rn-groupe > summary,
.rn-lien{
  display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 12px; box-sizing:border-box;
  color:var(--text); text-decoration:none; cursor:pointer;
  font-size:.945rem; font-weight:600; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--r-sm);
  list-style:none; position:relative;
}
.rn-groupe > summary::-webkit-details-marker,
.rn-groupe > summary::marker{ display:none; content:''; }

/* Le soulignement de cageot : un filet plein sous l'onglet, pas une pastille
   arrondie ni un fond coloré. Il ne DIT PAS l'état à lui seul — l'onglet de la
   page courante porte aussi aria-current="page" et un poids typographique. */
.rn-groupe > summary::after,
.rn-lien::after{
  content:''; position:absolute; inset-inline:10px; bottom:-1px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .16s var(--ease);
}
.rn-groupe > summary:hover::after,
.rn-lien:hover::after,
.rn-groupe[open] > summary::after{ transform:scaleX(1); }

.rn-groupe > summary:hover, .rn-lien:hover,
.rn-groupe[open] > summary{ color:var(--accent); }

.rn-onglets [aria-current="page"],
.rn-groupe[data-actif] > summary{ color:var(--accent); }
.rn-onglets [aria-current="page"]::after,
.rn-groupe[data-actif] > summary::after{ transform:scaleX(1); }

/* Le chevron : SVG au trait, pas un caractère « ▾ ». */
.rn-chev,.rn-globe{ fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.rn-chev{ width:11px; height:11px; flex:none; opacity:.75; transition:transform .16s var(--ease); }
/* ⚠️ `>` OBLIGATOIRE. Écrit en descendant (`.rn-groupe[open] .rn-chev`), ce
   sélecteur retournait les QUATRE chevrons du tiroir dès que le hamburger était
   ouvert — le hamburger est lui aussi un `.rn-groupe[open]`, et les onglets sont
   ses descendants. Résultat mesuré au banc : les 4 chevrons en `matrix(-1,0,0,-1)`
   alors que les 4 groupes étaient `open:false`. Une flèche qui annonce l'inverse
   de l'état est pire qu'une absence de flèche. */
.rn-groupe[open] > summary .rn-chev{ transform:rotate(180deg); }

/* ─── 4. Le panneau déroulant ────────────────────────────────────────────── */
.rn-panneau{
  position:absolute; inset-inline-start:0; top:calc(100% + 7px); z-index:60;
  min-width:264px; padding:10px;
  background:var(--surface);
  border:var(--ard-trait,1px) solid var(--ard-filet-fort);
  border-radius:var(--r-md);
}
.rn-panneau-large{ min-width:520px; }
.rn-titre{
  margin:2px 8px 8px; font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-2);
}
.rn-liste{ display:grid; gap:1px; }
.rn-panneau-large > .rn-liste{ grid-template-columns:1fr 1fr; gap:1px 10px; }
/* Colonnes titrées : le motif « barre de catégories + colonne à la une ». Il
   évite d'empiler 68 articles dans un menu — on montre les portes, pas le stock. */
.rn-colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.rn-colonnes > div + div{ border-inline-start:var(--ard-trait,1px) solid var(--ard-filet-fin); padding-inline-start:14px; }
.rn-panneau a{
  display:block; padding:9px 10px; color:var(--text); text-decoration:none;
  font-size:.925rem; line-height:1.3; border-radius:var(--r-sm);
  border-inline-start:2px solid transparent;
}
.rn-panneau a:hover{ background:var(--surface-2); color:var(--accent); border-inline-start-color:var(--accent); }
.rn-panneau a[aria-current="page"]{ color:var(--accent); border-inline-start-color:var(--accent); font-weight:650; }
.rn-pied-panneau{
  margin:8px 8px 2px; padding-top:9px;
  border-top:var(--ard-trait,1px) solid var(--ard-filet-fin);
}
.rn-pied-panneau a{ padding:4px 0; font-size:.875rem; color:var(--text-2); font-weight:600; border:0; }
.rn-pied-panneau a:hover{ background:none; color:var(--accent); }

/* ─── 5. Bloc de droite : langue · thème · CTA ───────────────────────────── */
.rn-droite{ display:flex; align-items:center; gap:6px; flex:none; margin-inline-start:auto; }

.rn-langue > summary{
  min-width:44px; min-height:40px; padding:0 9px; gap:5px;
  font-size:.87rem; font-weight:650; text-transform:uppercase; letter-spacing:.04em;
  border:var(--ard-trait,1px) solid var(--ard-filet-fin);
}
.rn-langue > summary::after{ display:none; }
.rn-langue > summary:hover{ border-color:var(--ard-filet-fort); }
.rn-langue .rn-panneau{ inset-inline-start:auto; inset-inline-end:0; min-width:196px; }
.rn-langue .rn-panneau a{ display:flex; justify-content:space-between; gap:14px; }
.rn-langue .rn-code{ color:var(--text-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; padding-top:2px; }
.rn-globe{ width:15px; height:15px; flex:none; }

.rn-theme{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; min-width:40px; height:40px; flex:none; cursor:pointer;
  background:none; color:var(--text);
  border:var(--ard-trait,1px) solid var(--ard-filet-fin); border-radius:var(--r-sm);
}
.rn-theme:hover{ border-color:var(--ard-filet-fort); color:var(--accent); }
.rn-theme svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.rn-theme[hidden]{ display:none; }

.rn-cta{
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  background:var(--accent-aplat); color:var(--accent-sur);
  font-size:.925rem; font-weight:700; text-decoration:none; white-space:nowrap;
  border:var(--ard-trait,1px) solid var(--accent-aplat); border-radius:var(--r-sm);
}
.rn-cta:hover{ background:var(--bg); color:var(--accent); }

/* ─── 6. Le tiroir mobile ────────────────────────────────────────────────── */
/* `position:static` est OBLIGATOIRE : sans lui, le tiroir (absolute) se
   positionnerait par rapport au bouton de 44 px et non par rapport à la
   barre — panneau de 44 px de large collé à droite. */
.rn-burger{ display:none; position:static; }
.rn-burger > summary{
  width:44px; min-width:44px; height:44px; padding:0; justify-content:center;
  border:var(--ard-trait,1px) solid var(--ard-filet-fort); border-radius:var(--r-sm);
}
.rn-burger > summary::after{ display:none; }
.rn-burger .rn-barres{ position:relative; width:18px; height:2px; background:currentColor; }
.rn-burger .rn-barres::before,.rn-burger .rn-barres::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:currentColor;
  transition:transform .18s var(--ease);
}
.rn-burger .rn-barres::before{ top:-6px }
.rn-burger .rn-barres::after{ top:6px }
.rn-burger[open] .rn-barres{ background:transparent }
.rn-burger[open] .rn-barres::before{ transform:translateY(6px) rotate(45deg) }
.rn-burger[open] .rn-barres::after{ transform:translateY(-6px) rotate(-45deg) }

.rn-tiroir{
  position:absolute; inset-inline:0; top:100%; z-index:59;
  max-height:calc(100vh - 60px); overflow-y:auto; padding:10px 16px 18px;
  background:var(--bg); border-top:var(--ard-trait,1px) solid var(--ard-filet-fin);
  border-bottom:var(--ard-trait,1px) solid var(--ard-filet-fort);
}
.rn-tiroir .rn-groupe{ border-bottom:var(--ard-trait,1px) solid var(--ard-filet-fin); }
.rn-tiroir .rn-groupe > summary,
.rn-tiroir > .rn-lien{
  display:flex; justify-content:space-between; width:100%;
  min-height:50px; padding:0 2px; font-size:1.02rem;
  border-bottom:var(--ard-trait,1px) solid var(--ard-filet-fin);
}
.rn-tiroir .rn-groupe > summary{ border-bottom:0 }
/* Le soulignement de cageot est désactivé dans le tiroir : l'onglet de la
   section courante y serait signalé PAR LA SEULE COULEUR. On lui rend un
   repère de forme — un filet d'accent en marge. */
.rn-tiroir .rn-groupe[data-actif] > summary,
.rn-tiroir > .rn-lien[aria-current="page"]{
  border-inline-start:3px solid var(--accent); padding-inline-start:9px;
}
.rn-tiroir .rn-groupe > summary::after,
.rn-tiroir > .rn-lien::after{ display:none }
.rn-tiroir .rn-panneau{
  position:static; min-width:0; padding:0 0 10px 12px;
  background:none; border:0;
}
.rn-tiroir .rn-panneau .rn-liste{ grid-template-columns:1fr }
.rn-tiroir .rn-colonnes{ grid-template-columns:1fr; gap:0 }
.rn-tiroir .rn-colonnes > div + div{ border-inline-start:0; padding-inline-start:0 }
.rn-tiroir .rn-colonnes .rn-titre{ display:block; margin:10px 0 2px }
.rn-tiroir .rn-titre{ display:none }
.rn-tiroir .rn-pied-panneau{ margin-inline:0 }

/* ─── 7. Points de rupture ───────────────────────────────────────────────── */
@media (max-width:1024px){
  .rn-onglets{ display:none }
  .rn-burger{ display:block }
  .rn{ position:sticky }
  .rn-barre{ position:relative; gap:6px; padding:0 16px }
}
@media (min-width:1025px){
  .rn-tiroir{ display:none }
}
/* Sous 420 px, marque + hamburger + langue + thème + CTA se chevauchaient
   (même défaut que celui corrigé le 25/08 sur l'accueil : 43,80 px de
   débordement mesurés à 320 px). On sort le MOT de la marque du flux — le
   symbole reste, et le nom accessible du lien reste complet grâce au .sr-only
   posé dans le gabarit. Le CTA garde son texte : c'est lui qui convertit. */
@media (max-width:520px){
  .rn-barre{ padding:0 12px; min-height:56px }
  .rn-cta{ padding:0 12px; font-size:.875rem }
  .rn-langue > summary{ padding:0 7px }
}
/* Seuil MESURÉ — RECALCULÉ le 31/08/2026 après un débordement de 3 px constaté
   à 390 px (la largeur de téléphone la plus répandue) sur les 2 684 pages.
   L'ancien seuil (383 px) venait d'une addition faite à la main, et elle était
   fausse de 16 px : elle oubliait la marge de fin de `.rn-marque` (6 px) et
   comptait le bouton de thème à 38 px alors qu'il repasse à 40 px dès que le
   mot réapparaît. Relevé au navigateur (tools/qa/banc-elio-p0-site-20260831.mjs) :

     largeur  marque   gouttière  bloc droite  total   dispo (w−24)  débordement
       360 px   32,0        6         255,9    293,9      336            0
       384 px  111,2        6         257,9    375,1      360           +9
       390 px  111,2        6         257,9    375,1      366           +3
       400 px  111,2        6         257,9    375,1      376            0

   Le mot ne tient donc qu'à partir de 400 px. En dessous : le symbole seul —
   le nom accessible du lien reste complet grâce au .sr-only du gabarit. */
@media (max-width:399px){
  .rn-mot{ display:none }
  .rn-theme{ width:38px; min-width:38px }
}

/* ─── 8. Accessibilité ───────────────────────────────────────────────────── */
.rn a:focus-visible,
.rn summary:focus-visible,
.rn button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm);
}
.rn .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ⚠️ LE LIEN D'ÉVITEMENT NE SE CACHE PAS À -9999px. Piège rencontré par Jules
   sur les pages arabes : `left:-9999px` devient `right:-9999px` en RTL, ce qui
   pousse l'élément HORS du bord droit et gonfle le scrollWidth — 10 499 px
   mesurés pour un écran de 500, donc une barre de défilement horizontale sur
   toute la page. On le sort donc par le HAUT : un débordement au-dessus du bord
   supérieur ne crée aucune barre de défilement, dans les deux sens de lecture. */
.rn-saut{
  position:absolute; inset-inline-start:8px; top:0; z-index:70;
  transform:translateY(-160%);
  padding:10px 14px; background:var(--surface); color:var(--text);
  border:var(--ard-trait,1px) solid var(--ard-filet-fort); text-decoration:none;
  font-family:var(--sans); font-weight:600;
}
.rn-saut:focus{ transform:translateY(8px); outline:2px solid var(--accent); outline-offset:2px }

@media (prefers-reduced-motion:reduce){
  .rn-groupe > summary::after, .rn-lien::after, .rn-chev,
  .rn-burger .rn-barres::before, .rn-burger .rn-barres::after{ transition:none }
}

/* ─── 9. Les deux icônes de thème sont TOUJOURS dans le DOM ──────────────────
   Le basculement se fait en CSS sur aria-pressed, pas en JS : une seule source
   de vérité (l'attribut ARIA), donc l'icône ne peut pas mentir sur l'état. */
.rn-theme .rn-ico-soleil{ display:none }
.rn-theme[aria-pressed="true"] .rn-ico-lune{ display:none }
.rn-theme[aria-pressed="true"] .rn-ico-soleil{ display:inline }