/* ============================================================
   SpiLi — Musée des spiritueux & liqueurs
   Feuille principale, identité « Le Filet » (lot 1).
   ------------------------------------------------------------
   Cette feuille ne déclare plus aucune couleur, aucune police et
   aucun rayon : elle consomme les jetons de css/tokens.css, qui
   est le point d'entrée unique de la charte.

   Trois règles du système la contraignent :
   — l'accent ne code jamais un contenu, seulement un état
     (lien, survol, actif, focus, sélection) ;
   — aucun angle arrondi, aucune ombre portée, aucun dégradé ;
   — aucun mouvement décoratif, aucune icône décorative.

   La structure des pages n'a pas changé au lot 1 : les sélecteurs
   et la géométrie sont ceux de juillet 2026. La refonte de
   l'accueil est le lot 2, celle de l'Atlas le lot 3.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Le défilement animé est un confort, pas une décoration — mais il
   reste du mouvement : on le retire quand le système le demande. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--spili-fond);
  color: var(--spili-texte-doux);
  font-family: var(--spili-courant);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--spili-titre);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--spili-texte);
}

a { color: var(--spili-accent); }
a:hover { color: var(--spili-accent-fort); }

/* Surtitres et données : le registre monospace de l'instrument. */
.eyebrow, .kicker, .post-meta, .atlas-card-meta, .atlas-panel-kicker,
.milestone .date, .chrono-periode, .legal-band, .sante, .brand-museum {
  font-family: var(--spili-data);
}

/* ---------- En-tête et logotype ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--spili-fond);
  border-bottom: 1px solid var(--spili-trait);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px;
  padding-top: 22px; padding-bottom: 22px;
}

/* Le logotype : Spi | Li. La césure est la primitive du système —
   un filet vertical de 1 px sur 26 px, 4 px de marge de part et
   d'autre. Elle sépare SPIritueux de LIqueurs. */
.brand {
  display: inline-flex; align-items: center;
  font-family: var(--spili-titre);
  font-size: 26px; font-weight: 500; letter-spacing: -0.045em;
  color: var(--spili-texte);
  text-decoration: none;
}
.brand-cesure {
  display: inline-block; width: 1px; height: 26px;
  background: var(--spili-texte); margin: 0 4px;
}
.brand-filet {
  display: inline-block; width: 1px; height: 19px;
  background: var(--spili-trait); margin: 0 14px;
}
.brand-museum {
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--spili-texte-faible);
}

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; font-size: 14.5px; }
.nav a {
  color: var(--spili-texte-doux); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--spili-accent); }
/* L'onglet actif est un état : il se marque par un filet, pas par une couleur. */
.nav a.is-current { color: var(--spili-texte); border-bottom-color: var(--spili-texte); }
.nav a.nav-cta {
  color: var(--spili-texte); border: 1px solid var(--spili-texte);
  padding: 8px 15px; font-size: 13.5px;
}
.nav a.nav-cta:hover { background: var(--spili-texte); color: var(--spili-fond); }

/* ---------- Ce qui se pose sous l'en-tête collant ----------
   L'en-tête est collant sur 87 px. Tout ce qui vient se placer en haut de
   fenêtre passe donc DERRIÈRE lui, et perd d'autant : mesuré à 86 px sur une
   station de visite, c'est-à-dire son surtitre et son titre — exactement ce
   qu'on venait lire.

   Le défaut a trois sources, et une seule règle : le défilement piloté par
   script (`scrollIntoView`), le saut d'ancre du navigateur (`#identifiant`),
   et `:target`. `scroll-margin-top` les couvre toutes les trois, ce qu'aucune
   correction dans le JavaScript ne ferait — le navigateur saute avant que le
   script existe.

   Posé sur tout élément identifiable plutôt qu'au cas par cas : une ancre
   ajoutée demain n'aura pas à y penser. */

[id] {
  scroll-margin-top: calc(var(--spili-entete) + 20px);
}

/* ---------- Les panneaux de navigation (lot N-1) ----------
   Le premier objet ouvrant du système. Il n'ajoute aucune primitive : le
   panneau est un bloc à filet, ses colonnes sont séparées par des traits, et
   l'état ouvert se marque comme l'onglet actif — par le filet, jamais par une
   couleur. La seule chose neuve est qu'il se déploie. */

.nav-groupe { position: relative; display: inline-flex; }

/* La tête du groupe est rendue en `<a>` par le gabarit puis remplacée par un
   `<button>` par le script : les deux doivent se ressembler exactement, sinon
   la barre saute au chargement. */
.nav button.nav-tete {
  font: inherit; background: none; cursor: pointer;
  color: var(--spili-texte-doux);
  border: 0; border-bottom: 2px solid transparent;
  padding: 0 0 2px;
}
.nav .nav-tete::after {
  content: "▾";
  font-size: 10px; margin-left: 5px;
  color: var(--spili-texte-faible);
  transition: transform var(--spili-transition);
  display: inline-block;
}
.nav-groupe.est-ouvert .nav-tete { color: var(--spili-texte); border-bottom-color: var(--spili-texte); }
.nav-groupe.est-ouvert .nav-tete::after { transform: rotate(180deg); }
.nav button.nav-tete:hover { color: var(--spili-accent); }
.nav button.nav-tete:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 3px; }

.nav-panneau {
  position: absolute; top: calc(100% + 14px); left: -18px;
  z-index: 60;
  background: var(--spili-fond-eleve);
  border: 1px solid var(--spili-texte);
  min-width: 640px;
}
.nav-panneau[hidden] { display: none; }
/* Posé par `navigation.js` quand le panneau sortirait de l'écran : il s'aligne
   alors sur le bord droit de sa tête au lieu du bord gauche. */
.nav-groupe.est-a-droite .nav-panneau { left: auto; right: -18px; }
.nav-panneau-corps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--spili-trait);
}
.nav-colonne {
  background: var(--spili-fond-eleve);
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 3px;
}
.nav-colonne-titre {
  font-family: var(--spili-data); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  border-bottom: 1px solid var(--spili-trait);
  padding-bottom: 8px; margin-bottom: 8px;
}
.nav a.nav-lien {
  display: block; padding: 7px 0;
  border-bottom: 0; color: var(--spili-texte-doux);
}
.nav a.nav-lien:hover { color: var(--spili-texte); }
.nav a.nav-lien:hover .nav-lien-nom { color: var(--spili-accent); }
.nav-lien-nom { display: block; font-size: 14.5px; color: var(--spili-texte); }
/* La glose dit ce qu'on trouvera : c'est elle qui distingue ce panneau d'une
   liste, et elle vaut plus que le nom qu'elle accompagne. */
.nav-lien-glose {
  display: block; font-size: 12.5px; line-height: 1.45;
  color: var(--spili-texte-faible);
}

/* La recherche, à sa place enfin : dans la barre. */
.nav a.nav-recherche {
  font-family: var(--spili-data); font-size: 12.5px;
  letter-spacing: 0.04em; color: var(--spili-texte-faible);
  margin-left: auto;
}
.nav a.nav-recherche:hover { color: var(--spili-accent); }
.nav a.nav-recherche span { font-size: 15px; }

/* ---------- Le bouton du menu, sur téléphone ---------- */

.nav-bouton {
  display: none;
  font: inherit; background: none; cursor: pointer;
  align-items: center; gap: 10px;
  border: 1px solid var(--spili-texte);
  padding: 9px 14px;
  color: var(--spili-texte);
}
.nav-bouton[hidden] { display: none; }
.nav-bouton-mot { font-size: 13.5px; }
/* Trois filets, pas une icône : la charte proscrit l'icône décorative, et le
   filet est la primitive du système. */
.nav-bouton-trait,
.nav-bouton-trait::before,
.nav-bouton-trait::after {
  display: block; width: 16px; height: var(--spili-filet);
  background: var(--spili-texte);
}
.nav-bouton-trait { position: relative; }
.nav-bouton-trait::before,
.nav-bouton-trait::after { content: ""; position: absolute; left: 0; }
.nav-bouton-trait::before { top: -5px; }
.nav-bouton-trait::after { top: 5px; }
.nav-bouton:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 2px; }

/* ---------- Hero ---------- */

.hero { padding: 88px 0 72px; }
.eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--spili-texte-faible); margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2.8rem, 7vw, 4.75rem); letter-spacing: -0.04em; line-height: 1.02; }
/* `.subtitle` est parti avec la refonte de l'accueil au lot 2 : c'était le
   « Le musée des spiritueux & liqueurs » posé sous le mot « SpiLi ». Le héros
   de l'écran 01 n'a plus qu'un titre, et aucune autre page ne s'en servait. */
.hero .lead { max-width: 46ch; margin-top: 26px; color: var(--spili-texte-doux); font-size: 20px; line-height: 1.5; }
.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block; padding: 15px 26px;
  font-size: 15px; text-decoration: none;
  border: 1px solid var(--spili-texte); color: var(--spili-texte);
  transition: background var(--spili-transition), color var(--spili-transition);
}
.btn-primary { background: var(--spili-texte); color: var(--spili-fond); }
.btn-primary:hover { background: var(--spili-accent); border-color: var(--spili-accent); color: var(--spili-fond); }
.btn-outline:hover, .btn:hover { background: var(--spili-accent-voile); color: var(--spili-texte); }

/* ---------- Sections ---------- */

.section { padding: 60px 0; }
.section.alt {
  background: var(--spili-fond-carte);
  border-top: 1px solid var(--spili-trait); border-bottom: 1px solid var(--spili-trait);
}
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); margin-bottom: 14px; }
.section-head p { color: var(--spili-texte-doux); }
.kicker {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible); display: block; margin-bottom: 12px;
}

.prose { max-width: 65ch; color: var(--spili-texte-doux); }
.prose p + p { margin-top: 18px; }

/* ---------- Grilles de cartes ----------
   Le filet de séparation est produit par la grille elle-même :
   gap de 2 px sur fond --spili-trait, pas de bordure par cellule. */

.grid { display: grid; gap: 2px; background: var(--spili-trait); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--spili-fond-eleve); padding: 28px 26px; }
.card h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; }
.card p { font-size: 14.5px; color: var(--spili-texte-doux); }
.card ul { margin: 10px 0 0 18px; font-size: 14.5px; color: var(--spili-texte-doux); }
.card li + li { margin-top: 6px; }

/* ---------- Feuille de route ----------
   Chaque jalon est coiffé d'un filet, pas signalé par une pastille. */

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 20px; }
.milestone { border-top: 3px solid var(--spili-texte); padding-top: 14px; }
.milestone .date {
  display: block; font-size: 13px; letter-spacing: 0.04em;
  color: var(--spili-texte); margin-bottom: 8px;
}
.milestone p { color: var(--spili-texte-doux); font-size: 14.5px; }

/* ---------- Bandeau d'appel ---------- */

.cta-band {
  text-align: center; padding: 72px 24px;
  background: var(--spili-fond-carte);
  border-top: 1px solid var(--spili-trait); border-bottom: 1px solid var(--spili-trait);
}
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 14px; }
.cta-band p { color: var(--spili-texte-doux); max-width: 620px; margin: 0 auto 30px; }

/* ---------- Listes ----------
   La puce décorative « ◆ » est remplacée par un filet : le système
   n'a pas d'icône. */

.feature-list { list-style: none; max-width: 760px; }
.feature-list li {
  padding: 14px 0 14px 34px; position: relative;
  border-bottom: 1px solid var(--spili-trait-faible);
  color: var(--spili-texte-doux);
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 26px;
  width: 16px; height: 1px; background: var(--spili-texte);
}
.feature-list li strong { color: var(--spili-texte); font-weight: 500; }

/* ---------- Étapes numérotées ---------- */

.steps { counter-reset: step; max-width: 760px; }
.step { position: relative; padding: 20px 0 20px 64px; border-bottom: 1px solid var(--spili-trait-faible); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 22px;
  font-family: var(--spili-data); font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--spili-texte-faible);
}
.step h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
.step p { color: var(--spili-texte-doux); font-size: 14.5px; }

/* ---------- Pied de page ---------- */

.site-footer { border-top: 1px solid var(--spili-trait); padding: 36px 0 40px; }
/* Le plan du site, en colonnes (lot N-1). C'était une ligne de treize liens,
   parce que la barre ne pouvait pas les prendre. L'ordre des colonnes reprend
   celui des panneaux : qui a vu l'un retrouve l'autre. */
.footer-plan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px; padding-bottom: 30px;
}
.footer-colonne { display: flex; flex-direction: column; gap: 8px; }
.footer-colonne-titre {
  font-family: var(--spili-data); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  border-bottom: 1px solid var(--spili-trait);
  padding-bottom: 8px; margin-bottom: 2px;
}
.footer-colonne a { color: var(--spili-texte-doux); text-decoration: none; font-size: 14px; }
.footer-colonne a:hover { color: var(--spili-accent); }
.legal-band {
  border-top: 1px solid var(--spili-trait); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 26px; align-items: baseline;
  font-size: 11.5px; line-height: 1.7; color: var(--spili-texte-faible);
}
.legal-band a { color: var(--spili-texte-faible); }
.legal-band a:hover { color: var(--spili-accent); }
/* La mention sanitaire est obligatoire : elle se lit, donc elle est
   dans la couleur de texte pleine, jamais en gris clair. */
.sante {
  margin-left: auto; max-width: 74ch;
  font-size: 11.5px; line-height: 1.7; color: var(--spili-texte);
}

/* ---------- Les langues (lot I18N-1) ---------- */

/* Le bandeau de traduction.

   Il est en haut du contenu et non en pied : une réserve qu'on découvre après
   avoir lu la page n'en est pas une. Il est discret sans être fuyant — c'est
   une information, pas un avertissement de danger, et le site n'a pas de
   registre alarmiste. Le filet de gauche est celui des réserves du corpus
   (`.rep-reserve`), pour que les deux se reconnaissent. */
.bandeau-traduction {
  border-bottom: 1px solid var(--spili-trait);
  background: var(--spili-fond-eleve);
}
.bandeau-traduction p {
  margin: 0; padding: 12px 0;
  font-size: 12.5px; line-height: 1.65;
  color: var(--spili-texte-doux);
}
.bandeau-traduction a {
  color: var(--spili-accent);
  text-decoration: underline; text-underline-offset: 2px;
}

/* Le sélecteur de langue.

   Une ligne de liens, entre le plan du site et la bande légale : il appartient
   au pied parce qu'il n'est pas une destination du site mais un réglage de
   lecture. Chaque langue s'écrit dans sa propre langue, ce qui impose de ne
   pas forcer la casse — « 日本語 » n'a pas de majuscule, et `text-transform`
   abîmerait « İ » dans d'autres alphabets. */
.footer-langues {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  padding: 22px 0; margin-top: 4px;
  border-top: 1px solid var(--spili-trait);
  font-size: 13px;
}
.footer-langue { color: var(--spili-texte-faible); text-decoration: none; }
.footer-langue:hover { color: var(--spili-accent); }
.footer-langue.is-current {
  color: var(--spili-texte);
  /* La langue servie est marquée par un filet sous le mot plutôt que par une
     graisse : la graisse déplacerait les autres, et une ligne de langues qui
     bouge au changement de page se relit mal. */
  border-bottom: 1px solid var(--spili-accent);
}

/* ---------- Page mentions légales ---------- */

.page-simple { padding: 72px 0; max-width: 65ch; }
.page-simple h1 { font-size: 2.4rem; margin-bottom: 32px; }
.page-simple h2 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; margin: 34px 0 12px; }
.page-simple p, .page-simple li { color: var(--spili-texte-doux); font-size: 15px; }

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .nav { gap: 18px; }
}
/* Sous 860 px la navigation ne tient plus sur la ligne du logotype : elle
   passe dessous, alignée à gauche, plutôt que de se replier en escalier. */
@media (max-width: 860px) {
  .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .site-header .container {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding-top: 18px; padding-bottom: 18px;
  }
  .nav { gap: 16px; font-size: 14px; }
  /* Le pied passe en colonne : la mention sanitaire ne se décale plus à
     droite, elle reprend le bord gauche du texte. */
  .sante { margin-left: 0; }
}
@media (max-width: 560px) {
  .grid.cols-4, .grid.cols-3, .grid.cols-2, .timeline { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 48px; }
  .section { padding: 48px 0; }
}

/* ============================================================
   Atlas, journal, pages communauté
   ============================================================ */

.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;
}

/* ---------- Hero de page intérieure ---------- */

.page-hero { padding: 60px 0 30px; }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.25rem); letter-spacing: -0.038em; margin-bottom: 16px; }
.page-hero .lead { max-width: 65ch; color: var(--spili-texte-doux); font-size: 20px; line-height: 1.5; }
.page-hero .eyebrow { margin-bottom: 16px; }

/* ---------- Atlas : barre d'outils ---------- */

.atlas-section { padding: 20px 0 70px; }
.atlas-toolbar {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding-bottom: 18px;
}

/* Segments accolés dans un cadre filaire : le segment actif est un
   état, il passe en plein. */
.atlas-modes { display: flex; border: 1px solid var(--spili-texte); }
.atlas-modes button {
  background: none; border: 0; cursor: pointer;
  color: var(--spili-texte-doux); font-family: var(--spili-courant); font-size: 14px;
  padding: 8px 20px; transition: background var(--spili-transition), color var(--spili-transition);
}
.atlas-modes button + button { border-left: 1px solid var(--spili-trait); }
.atlas-modes button:hover { color: var(--spili-texte); background: var(--spili-accent-voile); }
.atlas-modes button.is-active { background: var(--spili-texte); color: var(--spili-fond); }

.atlas-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.atlas-filters input,
.atlas-filters select {
  background: var(--spili-fond-eleve); border: 1px solid var(--spili-trait);
  color: var(--spili-texte);
  font-family: var(--spili-courant); font-size: 14px;
  padding: 9px 14px; min-width: 160px;
}
.atlas-filters input::placeholder { color: var(--spili-texte-faible); }
.atlas-reset {
  background: none; border: 1px solid var(--spili-trait); color: var(--spili-texte-doux);
  font-family: var(--spili-courant); font-size: 13.5px;
  padding: 9px 16px; cursor: pointer; transition: border-color var(--spili-transition), color var(--spili-transition);
}
.atlas-reset:hover { color: var(--spili-accent); border-color: var(--spili-accent); }

.atlas-count {
  font-family: var(--spili-data); color: var(--spili-texte-faible);
  font-size: 12px; letter-spacing: 0.04em; margin-bottom: 14px;
}
/* Un filtre actif se voit dans le fil, pas seulement dans les repères
   estompés : le décompte passe en texte plein et porte son propre filet.
   C'est le seul état de la barre, et il ne code rien d'autre (lot A-4). */
.atlas-count.est-filtre {
  color: var(--spili-texte);
  border-left: var(--spili-notation) solid var(--spili-texte);
  padding-left: 10px;
}

/* ---------- Le saut vers le contenu (recette du 30 août) ----------
   Il n'existait pas, alors que le `<main id="contenu">` avait été posé au lot 5
   pour le rendre possible. Neuf liens de navigation précèdent le contenu sur
   chaque page, et jusqu'à quatre-vingt-onze repères tabulables sur la carte.

   Il se retire hors du cadre plutôt que par `display:none`, qui le rendrait
   infocusable — donc inutile. Il revient au premier focus, et à lui seul. */

.saut-contenu {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--spili-texte);
  color: var(--spili-fond);
  font-family: var(--spili-courant); font-size: 14px;
  padding: 12px 20px;
  text-decoration: none;
  transition: top var(--spili-transition);
}
.saut-contenu:focus {
  top: 12px;
  outline: 2px solid var(--spili-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .saut-contenu { transition: none; }
}

/* ---------- Atlas : scène ---------- */

/* La scène est en deux colonnes : la vue à gauche, le panneau à côté. Il a
   été posé en surimpression sur la carte au lot 3b, où il masquait 39 % de sa
   largeur — du côté de l'Asie et de l'Océanie ; la colonne l'en a sorti.

   Le lot A-1 garde la colonne et lui retire sa permanence : elle vaut 0 tant
   que rien n'est sélectionné. Le panneau ne masque donc jamais la carte — le
   motif du lot 3b tient —, et il ne lui prend de la place que lorsqu'il a
   quelque chose à dire. Mesuré avant ce lot : la carte occupait 608 px sur
   une fenêtre de 1440, soit 42 %, dont 380 px de panneau vide.

   `--panneau` est la seule valeur à changer ; la transition est le geste de
   bascule de la grammaire du 4 août (320 ms), et elle porte sur une largeur
   de piste, pas sur une position. */
.atlas-stage {
  --panneau: 0px;
  display: grid;
  /* `minmax(0, …)` et le `min-width` du panneau ci-dessous sont tous deux
     nécessaires : un élément de grille ne descend pas sous son contenu
     minimal par défaut, et la piste refusait de se refermer — elle restait à
     380 px avec `--panneau: 0px`. */
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--panneau));
  gap: 0; align-items: start;
  transition: grid-template-columns 320ms var(--spili-courbe, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.atlas-stage.a-selection { --panneau: 380px; gap: 2px; }
.atlas-view { position: relative; }

/* Sans script, la piste ne peut pas s'ouvrir : le panneau reprend sa colonne
   d'origine, et son mode d'emploi reste lisible. La classe est posée par
   `atlas.js` au démarrage — son absence signale l'absence de script. */
.atlas-stage:not(.est-pilotee) { --panneau: 380px; gap: 2px; }
.atlas-stage:not(.est-pilotee) { grid-template-columns: minmax(0, 1fr) 380px; }

@media (prefers-reduced-motion: reduce) {
  .atlas-stage,
  .atlas-stage.est-pilotee .atlas-panel { transition: none; }
}

#canvas-atlas {
  display: block; width: 100%; height: 560px;
  background: var(--spili-fond-carte);
  border: 1px solid var(--spili-trait);
}

.atlas-hint { margin-top: 12px; font-size: 13.5px; color: var(--spili-texte-faible); max-width: 640px; }
.atlas-empty { color: var(--spili-texte-faible); padding: 48px 0; text-align: center; }

/* ---------- Atlas : grille de cartes ---------- */

.atlas-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--spili-trait);
}
.atlas-card {
  background: var(--spili-fond-eleve); padding: 22px 20px; cursor: pointer;
  border: 1px solid transparent;
  transition: border-color var(--spili-transition), background var(--spili-transition);
}
.atlas-card:hover, .atlas-card:focus-visible { border-color: var(--spili-accent); }
.atlas-card h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
.atlas-card-meta {
  font-size: 11.5px; color: var(--spili-texte-faible);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px;
}
.atlas-card-desc { font-size: 14.5px; color: var(--spili-texte-doux); }
.atlas-card-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-card-tags span, .atlas-panel-tags span {
  font-family: var(--spili-data); font-size: 12px; color: var(--spili-texte-faible);
  border: 1px solid var(--spili-trait); padding: 3px 11px;
}
/* L'étiquette « IG » désigne un contenu : elle se distingue par le
   filet, pas par la couleur d'accent. */
.atlas-card-tags .atlas-tag-ig { color: var(--spili-texte); border-color: var(--spili-texte); }

/* ---------- Atlas : panneau de détail ---------- */

.atlas-panel {
  position: relative;
  max-height: 720px; overflow-y: auto;
  background: var(--spili-fond-eleve);
  border: 1px solid var(--spili-texte);
  padding: 26px 24px 30px;
}
/* La piste fermée mesure 0 : le panneau doit s'y replier sans déborder ni
   laisser son filet en trait vertical. `visibility` le retire du parcours de
   tabulation, ce que `overflow` seul ne ferait pas. */
.atlas-stage.est-pilotee .atlas-panel {
  min-width: 0;
  overflow: hidden auto;
  transition: opacity 160ms ease, visibility 0s linear 320ms;
}
.atlas-stage.est-pilotee:not(.a-selection) .atlas-panel {
  opacity: 0; visibility: hidden; border-width: 0; padding-left: 0; padding-right: 0;
}
.atlas-stage.est-pilotee.a-selection .atlas-panel {
  opacity: 1; visibility: visible; transition-delay: 0s, 0s;
}
/* Le panneau ne disparaît plus : quand rien n'est sélectionné, il porte son
   mode d'emploi. Une colonne vide qui apparaît et disparaît fait sauter la
   mise en page à chaque clic. */
.atlas-panel-vide { color: var(--spili-texte-faible); font-size: 14.5px; }
.atlas-panel.is-open .atlas-panel-vide { display: none; }
.atlas-panel:not(.is-open) .atlas-panel-close { display: none; }
.atlas-panel-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; color: var(--spili-texte-faible);
  font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.atlas-panel-close:hover { color: var(--spili-accent); }
.atlas-panel-kicker {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible); display: block; margin-bottom: 8px;
}
.atlas-panel h3 { font-size: 1.6rem; margin-bottom: 6px; }
.atlas-panel h4 {
  font-family: var(--spili-data); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--spili-texte-faible); margin: 22px 0 10px;
}
.atlas-panel p { font-size: 14.5px; color: var(--spili-texte-doux); }
.atlas-panel-origin { color: var(--spili-texte) !important; font-size: 13.5px !important; margin-bottom: 14px; }
/* Le motif d'une précision rétrogradée : pourquoi la carte n'en dit pas plus.
   En retrait typographique — c'est un appareil critique, pas le propos. */
.atlas-panel-motif {
  font-size: 13px !important; color: var(--spili-texte-faible) !important;
  margin-top: 8px;
}
.atlas-panel-note {
  background: var(--spili-fond-carte); padding: 12px 14px;
  margin-top: 14px; font-size: 13.5px !important;
}
.atlas-panel-note strong { color: var(--spili-texte); }
.atlas-panel-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-panel-list { list-style: none; }
.atlas-panel-list li { padding: 11px 0; border-bottom: 1px solid var(--spili-trait-faible); font-size: 14.5px; }
.atlas-panel-list strong { color: var(--spili-texte); }
.atlas-panel-list em {
  font-family: var(--spili-data); color: var(--spili-texte-faible);
  font-style: normal; font-size: 12px; letter-spacing: 0.04em;
}
.atlas-panel-list span { color: var(--spili-texte-doux); font-size: 13.5px; }
.atlas-chip {
  background: none; border: 1px solid var(--spili-trait);
  color: var(--spili-texte-doux); font-family: var(--spili-data); font-size: 12px;
  padding: 4px 13px; cursor: pointer; transition: border-color var(--spili-transition), color var(--spili-transition);
}
.atlas-chip:hover { color: var(--spili-accent); border-color: var(--spili-accent); }

/* ---------- Chronologie ---------- */

.chrono { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x mandatory; }
.chrono-item {
  flex: 0 0 290px; scroll-snap-align: start;
  background: var(--spili-fond-eleve);
  border-top: 3px solid var(--spili-texte);
  padding: 22px 20px;
}
.chrono-periode {
  font-size: 13px; letter-spacing: 0.04em; color: var(--spili-texte);
  display: block; margin-bottom: 8px;
}
.chrono-item h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.chrono-item p { font-size: 13.5px; color: var(--spili-texte-doux); }

/* ---------- Journal ---------- */

.post-list { display: grid; gap: 2px; background: var(--spili-trait); max-width: 820px; }
.post-item {
  background: var(--spili-fond-eleve); padding: 26px 24px;
  border: 1px solid transparent;
  transition: border-color var(--spili-transition);
}
.post-item:hover { border-color: var(--spili-accent); }
.post-meta {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible); margin-bottom: 10px;
}
.post-item h2 { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; }
.post-item h2 a { color: var(--spili-texte); text-decoration: none; }
.post-item h2 a:hover { color: var(--spili-accent); }
.post-item p { color: var(--spili-texte-doux); font-size: 14.5px; }
.post-item .post-more { display: inline-block; margin-top: 14px; font-size: 14px; }

.article { max-width: 65ch; padding: 60px 0 70px; }
.article h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin-bottom: 14px; }
.article .post-meta { margin-bottom: 26px; }
.article h2 { font-size: 1.6rem; margin: 40px 0 14px; }
.article h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; margin: 28px 0 10px; }
.article p { margin-bottom: 17px; color: var(--spili-texte-doux); }
.article ul, .article ol { margin: 0 0 18px 22px; color: var(--spili-texte-doux); }
.article li { margin-bottom: 8px; }
/* Le filet de citation est noir : l'accent ne qualifie pas un contenu. */
.article blockquote {
  border-left: var(--spili-notation) solid var(--spili-texte);
  padding: 4px 0 4px 20px; margin: 24px 0;
  font-size: 1.12rem; color: var(--spili-texte);
}
.article .article-lead { font-size: 20px; line-height: 1.5; color: var(--spili-texte-doux); margin-bottom: 30px; }
.article-nav { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--spili-trait); font-size: 14px; }

/* ---------- Pages communauté : état d'amorçage ---------- */

.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--spili-trait); }
.roster-slot { background: var(--spili-fond-carte); padding: 26px 22px; text-align: center; }
.roster-slot .slot-num {
  font-family: var(--spili-data); font-size: 1.6rem; letter-spacing: 0.04em;
  color: var(--spili-texte-faible); display: block; margin-bottom: 6px;
}
.roster-slot p { font-size: 13.5px; color: var(--spili-texte-doux); }
.roster-slot.is-open { background: var(--spili-fond-eleve); }
.roster-slot.is-open .slot-num { color: var(--spili-texte); }

.wanted-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--spili-trait); max-width: 900px; }
.wanted-item { background: var(--spili-fond-eleve); padding: 20px 22px; }
.wanted-item h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.wanted-item p { font-size: 14px; color: var(--spili-texte-doux); }

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .atlas-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- La navigation sur téléphone (lot N-1) ----------
   Elle se dépliait en entier, sur trois lignes, et occupait 27 % de l'écran
   avant la moindre ligne de contenu. Elle se replie derrière un bouton, et les
   panneaux deviennent des sections empilées : un survol n'existe pas au doigt,
   et un panneau flottant sur 375 px n'a nulle part où flotter. */
@media (max-width: 860px) {
  .site-header .container { flex-wrap: wrap; row-gap: 0; }
  .nav-bouton { display: inline-flex; margin-left: auto; }

  .nav {
    display: none;
    width: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--spili-trait);
    margin-top: 18px; padding-top: 6px;
  }
  .nav.est-deploye { display: flex; }

  .nav > a,
  .nav-groupe { border-bottom: 1px solid var(--spili-trait-faible); }
  .nav > a { padding: 14px 0; border-bottom-width: 1px; }
  .nav-groupe { display: block; }
  .nav .nav-tete { display: block; width: 100%; text-align: left; padding: 14px 0; }
  .nav button.nav-tete { border-bottom: 0; }

  /* Le panneau reprend le flux : ni position absolue, ni largeur minimale —
     il n'a plus de quoi flotter. */
  .nav-panneau {
    position: static; min-width: 0;
    border: 0; border-top: 1px solid var(--spili-trait-faible);
    margin-bottom: 8px;
  }
  .nav-panneau-corps { grid-template-columns: 1fr; gap: 0; background: none; }
  .nav-colonne { padding: 14px 0 10px; }

  .nav a.nav-recherche { margin-left: 0; padding: 14px 0; }
  .nav a.nav-cta { margin-top: 16px; text-align: center; }

  .footer-plan { gap: 26px; }
}

@media (max-width: 860px) {
  .roster { grid-template-columns: repeat(2, 1fr); }
  /* Une seule colonne : le panneau passe sous la carte. La piste variable
     n'a plus d'objet, et les règles de repli ci-dessus sont neutralisées —
     sinon un panneau ouvert resterait invisible sur téléphone. */
  .atlas-stage,
  .atlas-stage.a-selection,
  .atlas-stage:not(.est-pilotee) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .atlas-panel { width: 100%; margin-top: 18px; max-height: none; }
  .atlas-stage.est-pilotee:not(.a-selection) .atlas-panel {
    opacity: 1; visibility: visible; border-width: 1px;
    padding-left: 24px; padding-right: 24px;
  }
}
@media (max-width: 560px) {
  .atlas-grid, .roster, .wanted-list { grid-template-columns: 1fr; }
  .atlas-toolbar { flex-direction: column; align-items: stretch; }
  .atlas-filters input, .atlas-filters select { flex: 1 1 100%; min-width: 0; }
  #canvas-atlas { height: 420px; }
  .atlas-modes { justify-content: center; }
  .atlas-modes button { flex: 1; padding: 8px 12px; }
}

/* ---------- Atlas : l'entrée de la salle sur téléphone (lot A-1) ----------
   Mesuré avant ce lot : la carte commençait à 1 445 px du haut, soit près de
   deux écrans de défilement. Le bandeau y pesait 602 px pour un texte qui se
   lit une fois, et les deux sélecteurs de filtre occupaient chacun une ligne
   pleine. On compacte ce qui s'énonce, jamais ce qui s'utilise : les cibles
   de la barre gardent leur taille.

   Ceci abaisse le seuil, il ne le règle pas : la carte reste à 297 × 153 px,
   et c'est le lot A-5 qui lui donnera la fenêtre. */
@media (max-width: 560px) {
  .atlas-bandeau { padding-top: 34px; padding-bottom: 18px; }
  .atlas-bandeau h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 12px; }
  .atlas-bandeau .lead { font-size: 17px; line-height: 1.45; }
  .atlas-bandeau .container { gap: 20px; }
  .atlas-chiffres { padding-top: 14px; gap: 4px; }
  .atlas-chiffres-note { font-size: 11.5px; line-height: 1.45; }

  .atlas-porte { padding-bottom: 18px; }
  .atlas-porte-texte { font-size: 0.94rem; line-height: 1.5; }

  /* Les deux sélecteurs tiennent sur une ligne : ils sont courts, et leur
     hauteur de cible ne change pas. Le champ de recherche garde la sienne. */
  .atlas-filters { flex-wrap: wrap; }
  .atlas-filters input[type="search"] { flex: 1 1 100%; }
  .atlas-filters select { flex: 1 1 calc(50% - 5px); min-width: 0; }
}

/* ---------- Atlas : grille à deux niveaux (lot 3b) ----------
   La grille ne listait que les 24 catégories. Elle montre désormais aussi les
   terroirs, qui n'étaient navigables nulle part, et chaque carte porte le lien
   vers sa fiche complète. */

.atlas-grid { display: block; background: none; gap: 0; }
.atlas-grid-bloc + .atlas-grid-bloc { margin-top: 44px; }
.atlas-grid-titre {
  font-family: var(--spili-data); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  padding-bottom: 12px; margin-bottom: 2px;
  border-bottom: 1px solid var(--spili-trait);
}
.atlas-grid-cartes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--spili-trait);
}
.atlas-card h4 {
  font-family: var(--spili-titre); font-size: 21px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px;
}
.atlas-card h4 a { color: var(--spili-texte); text-decoration: none; }
.atlas-card h4 a:hover { color: var(--spili-accent); text-decoration: underline; }
.atlas-card-actions { margin-top: 14px; }

@media (max-width: 1120px) {
  .atlas-grid-cartes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .atlas-grid-cartes { grid-template-columns: 1fr; }
}

/* Le lien vers la fiche complète : la seule sortie du panneau vers les 98
   fiches de l'Atlas, qu'aucune page ne référençait avant le lot 3b. */
.atlas-panel-fiche { margin: 20px 0 4px; }
.atlas-panel-fiche a {
  font-family: var(--spili-data); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.atlas-chip--ligne { border: 0; padding: 0; color: var(--spili-accent); }
.atlas-chip--ligne:hover { color: var(--spili-accent-fort); text-decoration: underline; }

/* ---------- Atlas : bandeau de titre (lot 3c) ---------- */

.atlas-bandeau .container {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 56px; align-items: end;
}
.atlas-chiffres {
  border-left: 1px solid var(--spili-trait);
  padding-left: 28px;
  font-family: var(--spili-data); font-size: 12px; line-height: 1.5;
  color: var(--spili-texte-doux);
  display: flex; flex-direction: column; gap: 11px;
}
.atlas-chiffres > div { display: flex; align-items: baseline; gap: 10px; }
.atlas-chiffres dt { order: 2; }
/* Le chiffre porte l'accent : il ne code pas un contenu, il signale
   l'ampleur — c'est le seul emploi de l'accent dans ce bloc. */
.atlas-chiffres dd { order: 1; margin: 0; color: var(--spili-accent); }
.atlas-chiffres-note { display: block !important; color: var(--spili-texte-faible); }

@media (max-width: 860px) {
  .atlas-bandeau .container { grid-template-columns: 1fr; gap: 28px; }
  .atlas-chiffres { border-left: 0; padding-left: 0; border-top: 1px solid var(--spili-trait); padding-top: 20px; }
}

/* ---------- Soutenir le projet (lot N-1) ----------
   Quatre voies, de même poids : aucune n'est mise en avant, parce que le projet
   a besoin des quatre et qu'un ordre suggérerait une préférence. */

.soutenir-voies {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px; background: var(--spili-trait);
  border: 1px solid var(--spili-trait);
}
.soutenir-voie {
  background: var(--spili-fond-eleve);
  padding: 28px 30px 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.soutenir-kicker {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.soutenir-voie h2 {
  font-size: 1.32rem; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.2; margin: 0;
}
.soutenir-texte { font-size: 0.94rem; line-height: 1.6; color: var(--spili-texte-doux); }
/* L'engagement porte le filet de notation : c'est la seule ligne de la carte
   qui dit ce que la voie coûte, et elle doit se lire avant le lien. */
.soutenir-engagement {
  border-left: var(--spili-notation) solid var(--spili-texte);
  padding-left: 14px;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--spili-texte);
}
.soutenir-lien { margin-top: auto; padding-top: 6px; }
.soutenir-lien a { font-size: 0.92rem; }

@media (max-width: 560px) {
  .soutenir-voie { padding: 22px 20px 24px; }
}