/* ============================================================
   Vigie GR20 — « Éditorial de montagne »
   Papier #faf8f2 · encre #1d2521 · accent unique terracotta #b0583a
   Filets 1px #eee8da · radius 2px · aucune ombre portée
   Newsreader (titres) · Inter (UI) · petites capitales espacées
   ============================================================ */

/* ————— Fondations ————— */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --paper:       #faf8f2;
  --paper-2:     #f4f0e6;   /* colonne « aujourd'hui » */
  --ink:         #1d2521;
  --ink-mid:     #4d564f;
  --ink-soft:    #6b7168;
  --gray:        #736d5b;   /* AA 4,5:1 sur --paper ET --paper-2 (petits textes) */
  --line:        #e7e0cf;   /* filets structure */
  --rule:        #eee8da;   /* filets internes de la grille */
  --rule-strong: #d9d1ba;
  --accent:      #b0583a;
  --green:       #3d6b4f;
  --amber:       #b07c2e;   /* symboles uniquement (seuil non-texte 3:1) */
  --amber-ink:   #875d20;   /* ambre pour le TEXTE (AA 4,5:1 sur papier) */
  --brick:       #a3402e;
}

html { scroll-behavior: smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

::selection{ background: var(--accent); color: var(--paper); }

a{ color: inherit; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.conteneur{ max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

h1, h2, h3, h4{
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 470;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.014em;
}
h1{ font-size: clamp(30px, 4vw, 42px); font-weight: 380; letter-spacing: -0.02em; margin: 40px 0 14px; }
h2{ font-size: clamp(22px, 2.6vw, 28px); margin: 64px 0 20px; }
h3{ font-size: 18px; }

main > :first-child{ margin-top: 0; }
main{ padding-top: 40px; padding-bottom: 40px; }

p a, li a, .prose a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .14s ease;
}
p a:hover, li a:hover, .prose a:hover{ color: var(--ink); }

/* petites capitales utilitaires */
.pc, .flab{
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
}

/* ————— En-tête ————— */
.site-header{ border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .conteneur{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 20px;
}
.marque{
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  font-family: 'Newsreader', Georgia, serif; font-weight: 470;
  font-size: 21px; letter-spacing: -0.012em; line-height: 1;
}
.marque svg{ display: block; flex: none; }
.nav-principale{ display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.nav-principale a{
  position: relative;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  padding: 4px 0;
  transition: color .14s ease;
}
.nav-principale a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .16s ease;
}
.nav-principale a:hover{ color: var(--ink); }
.nav-principale a:hover::after{ transform: scaleX(1); }
.nav-principale a.actif{ color: var(--ink); }
.nav-principale a.actif::after{ transform: scaleX(1); }

/* sélecteur de langue — discret, petites capitales, filet séparateur */
.sel-langue{
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 10px; padding-left: 22px;
  border-left: 1px solid var(--line);
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
}
.sel-langue a{ text-decoration: none; color: var(--gray); padding: 2px 0; transition: color .14s ease; }
.sel-langue a:hover{ color: var(--ink); }
.sel-langue a.actif{ color: var(--ink); border-bottom: 1px solid var(--accent); }
.sel-langue .sep{ color: var(--rule-strong); }

/* ————— Héros ————— */
/* (pas de filet bas : le bandeau de fraîcheur pleine largeur pose le sien) */
.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: end;
  padding-top: 80px; padding-bottom: 68px;
}
.kicker{
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.kicker::before{
  content: ""; width: 28px; height: 1px; background: var(--accent); flex: none;
}
.hero h1{
  margin: 28px 0 0;
  font-family: 'Newsreader', Georgia, serif; font-weight: 380;
  font-size: clamp(42px, 5.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  max-width: 15ch;
}
.hero h1 .it{ font-style: italic; color: var(--accent); }
.hero .sub{
  margin-top: 28px;
  max-width: 44ch;
  font-size: 15.5px; line-height: 1.68;
  color: var(--ink-mid);
}
.hero .sub a{ color: var(--accent); }
.cta-row{ margin-top: 40px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-note{ margin-top: 14px; font-size: 12px; color: var(--gray); }

.hero-fig{ border-left: 1px solid var(--line); padding-left: 56px; }
.hero-fig figure{ margin: 0; }
.hero-fig svg{ display: block; width: 100%; height: auto; }
.hero-fig figcaption{
  margin-top: 16px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
}

/* ————— Boutons ————— */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 28px;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.btn-primaire{ background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn-primaire:hover{ background: #35423b; border-color: #35423b; color: var(--paper); }
.btn-secondaire{ background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn-secondaire:hover{ background: #35423b; border-color: #35423b; color: var(--paper); }
.btn-discret{ background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-discret:hover{ color: var(--accent); border-color: var(--accent); }
.btn-mini{
  height: 32px; padding: 0 16px;
  font-size: 10.5px; letter-spacing: 0.1em;
  border: 1px solid transparent; color: var(--gray);
}
.btn-mini:hover{ color: var(--ink); border-color: transparent; }
.btn-mini.actif, .btn-mini.actif:hover{
  color: var(--ink); background: transparent;
  border-color: transparent;
  border-bottom-color: var(--accent);
}

/* ————— Ligne de fraîcheur ————— */
.bandeau-fraicheur{
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin: 0 0 8px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.bandeau-fraicheur strong, .bandeau-fraicheur b{ font-weight: 600; color: var(--ink); }
.bandeau-fraicheur code{
  font-size: 11px; text-transform: none; letter-spacing: 0;
  color: var(--ink-mid);
}
/* variante pleine largeur (accueil) : filets bord à bord, contenu aligné 1200px */
.bandeau-fraicheur.plein{ display: block; padding: 0; margin: 0; }
.bandeau-fraicheur.plein .conteneur{
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}
.bandeau-fraicheur .lib{ margin-left: auto; color: var(--accent); font-weight: 600; }
.bandeau-fraicheur .point{
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex: none;
  animation: pulse 3.2s ease-in-out infinite;
}
.bandeau-fraicheur .point.vieux{ background: var(--amber); }
.bandeau-fraicheur .point.aucun{ background: var(--gray); animation: none; }
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }

/* ————— Titres de section éditoriaux ————— */
.sur-titre{
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 56px 0 10px;
}
.sur-titre::before{ content: ""; width: 22px; height: 1px; background: var(--accent); flex: none; }
.sur-titre + h1, .sur-titre + h2{ margin-top: 0; }

/* ————— Formulaires ————— */
input[type="date"], input[type="email"], input[type="number"], input[type="text"], select{
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  height: 40px; padding: 0 12px;
  border: 1px solid #d8d0bb; border-radius: 2px;
  background: transparent;
  max-width: 100%;
  transition: border-color .14s ease;
}
input:hover, select:hover{ border-color: #b3ab92; }
select{ cursor: pointer; }
label{ font-size: 14px; }
.champ{ display: flex; flex-direction: column; gap: 8px; }
.champ > label{
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
}
.ligne-champs{ display: flex; gap: 16px 20px; flex-wrap: wrap; align-items: flex-end; }

fieldset{
  border: 1px solid var(--line); border-radius: 2px;
  padding: 16px 18px 14px; margin: 0;
}
legend{
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.cases{ display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cases label{
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-mid);
  padding: 2px 0;
}
.cases label:hover{ color: var(--ink); }
.cases input[type="checkbox"]{
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none;
  border: 1px solid #b3ab92; border-radius: 2px;
  background: transparent; cursor: pointer;
  display: inline-grid; place-content: center;
  transition: border-color .14s ease, background-color .14s ease;
}
.cases input[type="checkbox"]::before{
  content: ""; width: 9px; height: 9px;
  transform: scale(0);
  background: var(--paper);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 80% 0%, 38% 66%);
  transition: transform .12s ease;
}
.cases input[type="checkbox"]:checked{ background: var(--ink); border-color: var(--ink); }
.cases input[type="checkbox"]:checked::before{ transform: scale(1); }
.cases small{ color: var(--gray); }

/* ————— Filtres de la grille ————— */
.filtres{
  display: flex; align-items: flex-end; gap: 16px 20px; flex-wrap: wrap;
  padding: 40px 0 4px;
}
.filtres .champ input, .filtres .champ select{ min-width: 136px; }
.raccourcis{
  margin-left: auto;
  display: flex; align-items: center; gap: 22px;
  padding-bottom: 10px;
}
.raccourcis a{
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  color: var(--gray); text-decoration: none; padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.raccourcis a:hover{ color: var(--ink); }
.raccourcis a.actif{ color: var(--ink); border-bottom-color: var(--accent); }

/* ————— Légende ————— */
.grille-tete{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 32px; flex-wrap: wrap;
  padding: 32px 0 18px;
}
.grille-kicker{
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.legende{ display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; list-style: none; }
.legende .item{
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.legende .item svg{ width: 12px; height: 12px; flex: none; }
.legende .note{ text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: var(--gray); }

/* glyphe de statut */
.gl{ width: 11px; height: 11px; display: inline-block; vertical-align: middle; }

/* ————— La grille ————— */
.grille-enveloppe{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grille{
  border-collapse: separate; border-spacing: 0;
  width: 100%; min-width: 1072px;
  font-variant-numeric: tabular-nums;
}
table.grille thead th{ font-weight: 500; }
table.grille .months th{
  padding: 6px 6px 4px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); text-align: left;
}
table.grille .months th:first-child,
table.grille .days th:first-child{
  position: sticky; left: 0; z-index: 3;
  background: var(--paper);
}
table.grille .days th{
  padding: 8px 6px 14px;
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
  min-width: 60px;
  text-align: center;
  transition: background-color .13s ease;
}
table.grille .days th:first-child{
  text-align: left;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
  padding-left: 0;
}
.dow{ display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.dnum{ font-size: 14px; font-weight: 500; color: var(--ink); }
.we .dnum{ font-weight: 600; }
.tdy-tag{
  display: block;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.tdy{ background: var(--paper-2); }
.mstart{ border-left: 1px solid #e3dbc5; }

table.grille tbody th.rname{
  position: sticky; left: 0; z-index: 2;
  background: var(--paper);
  text-align: left; font-weight: 400;
  padding: 11px 24px 11px 0;
  border-bottom: 1px solid var(--rule);
  width: 224px; min-width: 224px;
  transition: background-color .13s ease;
}
table.grille tbody th.rname::after{
  content: ""; position: absolute; top: 0; bottom: -1px; left: 100%; width: 14px;
  background: linear-gradient(90deg, rgba(29,37,33,.05), rgba(29,37,33,0));
  pointer-events: none;
}
.rrow{ display: flex; align-items: center; gap: 14px; }
.rn{
  flex: none; width: 22px; text-align: right;
  font-size: 11px; color: #a69f8c;
}
.nm{
  display: block;
  font-family: 'Newsreader', Georgia, serif; font-weight: 470;
  font-size: 16px; line-height: 1.25; letter-spacing: -0.004em;
}
.rname a{ text-decoration: none; color: inherit; }
.rname a:hover .nm{ color: var(--accent); }
.alt{ display: block; margin-top: 2px; font-size: 11px; letter-spacing: 0.03em; color: var(--gray); }

table.grille tbody td{
  height: 54px; text-align: center;
  border-bottom: 1px solid var(--rule);
  padding: 0;
  transition: background-color .13s ease;
}
table.grille tbody td .cell{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  text-decoration: none;
}
table.grille tbody tr.r:hover > th,
table.grille tbody tr.r:hover > td{ background: #f3eee0; }
table.grille tbody tr.r:hover .nm{ color: var(--accent); transition: color .13s ease; }

table.grille tr.sep th{
  position: sticky; left: 0; z-index: 2;
  background: var(--paper);
  text-align: left; font-weight: 500;
  padding: 40px 0 10px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
  border-bottom: 1px solid var(--rule);
}
table.grille tr.sep td{ border-bottom: 1px solid var(--rule); height: auto; padding: 40px 0 10px; }

.fnote{
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0 0;
  font-size: 12px; color: var(--gray);
}

.ring{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--accent); border-radius: 50%;
  vertical-align: middle;
}
.fnote .ring{ width: 18px; height: 18px; flex: none; }
.fnote .ring svg{ width: 8px; height: 8px; }

/* ————— Cartes / encadrés à filets ————— */
.carte{
  border: 1px solid var(--line); border-radius: 2px;
  background: transparent;
  padding: 24px; margin: 20px 0;
}
.carte > :first-child{ margin-top: 0; }
.carte > h2:first-child, .carte h2{ margin-top: 0; }

.note-pied{ font-size: 12px; color: var(--gray); margin-bottom: 0; }

/* ————— Comment ça marche ————— */
.etapes-edito{
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.etape-edito{ border-top: 1px solid var(--line); padding-top: 24px; }
.etape-edito .n{
  font-family: 'Newsreader', Georgia, serif; font-weight: 380; font-style: italic;
  font-size: 30px; color: var(--accent); line-height: 1;
}
.etape-edito p{ margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }

/* ————— Fil d'Ariane ————— */
.fil-etape{
  display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray);
}
.fil-etape a{
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.fil-etape a:hover{ color: var(--ink); border-bottom-color: var(--accent); }
.fil-etape .sep{ color: var(--rule-strong); }

.sous-titre-page{ color: var(--ink-soft); font-size: 14px; margin: 0 0 8px; }

/* navigation étape précédente / suivante */
.etape-nav{
  display: flex; gap: 12px 32px; flex-wrap: wrap; justify-content: space-between;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin: 20px 0;
  font-size: 13px; color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}
.etape-nav a{ color: var(--accent); text-decoration: none; }
.etape-nav a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* ————— Page refuge : calendriers mensuels ————— */
.mois-grille{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 20px; margin: 24px 0;
}
.mois{
  border: 1px solid var(--line); border-radius: 2px;
  padding: 18px 16px 14px;
}
.mois h4{
  margin: 0 0 12px; text-align: center;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.mois table{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mois th{
  color: var(--gray); font-weight: 500; padding: 2px 2px 6px;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
}
.mois td{ text-align: center; padding: 5px 1px 4px; border-bottom: 1px solid var(--rule); }
.mois tr:last-child td{ border-bottom: none; }
.mois .jnum{ font-size: 11px; color: var(--ink); line-height: 1.2; }
.mois .hors-saison{ color: #cfc7b4; font-size: 11px; }
.jour-types{ display: flex; gap: 3px; justify-content: center; margin-top: 3px; }
.jour-types .gl{ width: 8px; height: 8px; }

/* ————— Planificateur : sommaire de revue ————— */
.etapes{ list-style: none; margin: 0; padding: 0; }
.etapes li{
  display: flex; align-items: center; gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule);
}
.etapes li:last-child{ border-bottom: none; }
.etapes .num{
  flex: none; width: 26px; text-align: right;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  color: #a69f8c; font-variant-numeric: tabular-nums;
}
.etapes .nom{ min-width: 0; }
.etapes .nom a{
  font-family: 'Newsreader', Georgia, serif; font-weight: 470;
  font-size: 16px; letter-spacing: -0.004em;
  text-decoration: none; color: var(--ink);
  transition: color .13s ease;
}
.etapes .nom a:hover{ color: var(--accent); }
.etapes .nom small{ display: block; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.03em; color: var(--gray); }
.etapes .quand{
  margin-left: auto; color: var(--ink-soft); font-size: 12.5px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.etapes .gl{ flex: none; margin-left: 4px; }
.etapes li.point-prive{
  color: var(--gray); font-size: 12.5px;
  padding: 7px 2px 7px 44px;
  border-bottom: 1px dashed var(--rule);
}

/* verdicts : encadré à filet, liseré 2px, pastille de titre petites capitales */
.verdict{
  border: 1px solid var(--line); border-left: 2px solid var(--green);
  border-radius: 2px;
  padding: 22px 24px; margin: 24px 0;
}
.verdict.bloque{ border-left-color: var(--brick); }
.verdict.incertain{ border-left-color: var(--amber); }
.verdict .etat{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
.verdict.bloque .etat{ color: var(--brick); }
.verdict.incertain .etat{ color: var(--amber-ink); }
.verdict .etat svg{ width: 11px; height: 11px; flex: none; }
.verdict h3{ margin: 0 0 6px; font-size: 20px; }
.verdict p{ color: var(--ink-mid); font-size: 14px; }
.verdict .compte{ margin: 10px 0 0; font-size: 12px; color: var(--gray); font-variant-numeric: tabular-nums; }
.verdict .btn{ margin-top: 14px; }

/* scanner de saison */
.scanner-enveloppe{ overflow-x: auto; }
table.scanner{
  border-collapse: collapse; width: 100%;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
table.scanner th{
  text-align: left; padding: 6px 12px 12px 2px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
  border-bottom: 1px solid var(--rule-strong);
}
table.scanner td{
  padding: 9px 12px 9px 2px;
  border-bottom: 1px solid var(--rule);
}
table.scanner td a{ color: var(--ink); text-decoration: none; }
table.scanner td a:hover{ color: var(--accent); }
tr.meilleure td{ background: var(--paper-2); }
tr.meilleure td:first-child a{ font-weight: 600; }
.jauge{ display: flex; align-items: center; gap: 10px; }
.jauge .barre{
  height: 3px; border-radius: 0; background: var(--rule);
  width: 140px; overflow: hidden; flex: none;
}
.jauge .barre span{ display: block; height: 100%; background: var(--green); }
.jauge.moyen .barre span{ background: var(--amber); }
.jauge.faible .barre span{ background: var(--brick); }
.jauge small{ font-size: 11px; color: var(--gray); }

/* ————— Plan partageable : actions, variantes ————— */
.actions-plan{ display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 20px 0; }
.actions-plan .btn svg{ width: 15px; height: 15px; margin-right: 10px; flex: none; }
.actions-plan .btn.copie{ color: var(--green); border-color: var(--green); }
.suggestion-sens a{ color: var(--accent); }
.variante{ border-left: 2px solid var(--accent); }
.variante-titre{
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.variante-detail{ font-size: 14px; color: var(--ink-mid); margin: 0 0 12px; }
.etapes-compactes li{ padding: 7px 2px; }
.etapes-compactes .nom a{ font-size: 14.5px; }

/* ————— Météo d'altitude ————— */
.meteo-bande{
  display: flex; gap: 4px;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 16px 14px 14px; margin: 20px 0 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.meteo-jour{
  flex: 1 1 0; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 2px 4px;
  border-left: 1px solid var(--rule);
}
.meteo-jour:first-child{ border-left: none; }
.meteo-jour .mj-jour{
  font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); white-space: nowrap;
}
.meteo-jour svg{ width: 22px; height: 22px; color: var(--ink-mid); }
.meteo-jour .mj-t{
  font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meteo-jour .mj-t small{ font-size: 11px; color: var(--gray); }
.meteo-nuit{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-left: 8px;
}
.meteo-nuit svg{ width: 15px; height: 15px; flex: none; color: var(--ink-mid); }
.meteo-nuit small{ font-size: 10.5px; color: var(--gray); }

/* ————— Messages ————— */
.message{
  border: 1px solid var(--line); border-left: 2px solid var(--green);
  border-radius: 2px;
  padding: 16px 20px; margin: 20px 0;
  font-size: 14px; color: var(--ink-mid);
}
.message strong{ color: var(--ink); }
.message.succes{ border-left-color: var(--green); }
.message.erreur{ border-left-color: var(--brick); }
.message.info{ border-left-color: var(--gray); }

/* ————— Stats : graphiques SVG ————— */
.svg-chart{ width: 100%; height: auto; }
.svg-chart .chart-label{ font-size: 11px; fill: var(--ink); font-family: 'Inter', sans-serif; }
.svg-chart .chart-value{ font-size: 11px; fill: var(--gray); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.svg-chart .chart-track{ fill: var(--rule); }

/* ————— Admin ————— */
table.donnees{
  border-collapse: collapse; width: 100%;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
table.donnees th{
  text-align: left; padding: 6px 12px 10px 2px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray);
  border-bottom: 1px solid var(--rule-strong);
}
table.donnees td{ padding: 8px 12px 8px 2px; border-bottom: 1px solid var(--rule); }
.etiquette{
  display: inline-block; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: 2px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.etiquette.ok{ color: var(--green); border-color: #cfdcc9; }
.etiquette.partiel{ color: var(--amber-ink); border-color: #e4d4b4; }
.etiquette.echec, .etiquette.erreur{ color: var(--brick); border-color: #e6c9c0; }
.compteurs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.compteurs .bloc{
  border-top: 1px solid var(--line); padding-top: 14px;
}
.compteurs .bloc strong{
  display: block; font-size: 28px;
  font-family: 'Newsreader', Georgia, serif; font-weight: 380;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.compteurs .bloc{ font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }

/* ————— Prose / FAQ ————— */
.prose{ max-width: 68ch; color: var(--ink-mid); }
.prose h2{ font-size: 20px; margin: 36px 0 12px; }
.prose p, .prose ul{ margin: 0 0 1em; }
.prose ul{ padding-left: 20px; }
.prose strong{ color: var(--ink); }
details.faq-item{
  border-bottom: 1px solid var(--line);
  max-width: 68ch;
  padding: 4px 0;
}
details.faq-item:first-of-type{ border-top: 1px solid var(--line); margin-top: 28px; }
details.faq-item summary{
  cursor: pointer; padding: 16px 28px 16px 0;
  position: relative;
  font-family: 'Newsreader', Georgia, serif; font-weight: 470;
  font-size: 17px; letter-spacing: -0.008em; color: var(--ink);
  list-style: none;
}
details.faq-item summary::-webkit-details-marker{ display: none; }
details.faq-item summary::after{
  content: "+"; position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 16px; color: var(--accent);
  transition: transform .16s ease;
}
details.faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
details.faq-item summary:hover{ color: var(--accent); }
details.faq-item p, details.faq-item ul{
  padding: 0 0 18px; color: var(--ink-mid); font-size: 14.5px; line-height: 1.7;
}
details.faq-item ul{ padding-left: 20px; }
details.faq-item li{ margin-bottom: 6px; }

/* ————— Pages statut / 404 ————— */
.page-statut{
  max-width: 560px; margin: 48px auto; text-align: center;
}
.page-statut h1{ margin: 24px 0 12px; }
.page-statut h1 .it{ font-style: italic; color: var(--accent); }
.page-statut p{ color: var(--ink-mid); }
.page-statut .actions{ margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page-statut svg{ display: inline-block; }
.statut-marque{
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line);
  margin-bottom: 4px;
}

/* ————— Pied de page ————— */
.site-footer{ border-top: 1px solid var(--line); margin-top: 72px; }
.site-footer .conteneur{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 48px; flex-wrap: wrap;
  padding-top: 36px; padding-bottom: 72px;
  font-size: 12.5px; line-height: 1.7; color: var(--gray);
}
.site-footer strong{
  font-family: 'Newsreader', Georgia, serif; font-weight: 470;
  font-size: 15px; color: var(--ink);
}
.site-footer a{
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .14s ease;
}
.site-footer a:hover{ color: var(--ink); }
.site-footer .avertissement{ max-width: 52ch; }
.site-footer .colophon{
  display: block; margin-top: 10px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ————— Écrans étroits ————— */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap: 56px; padding-top: 56px; padding-bottom: 52px; }
  .hero-fig{ border-left: none; padding-left: 0; max-width: 480px; }
  .etapes-edito{ gap: 32px; }
}
@media (max-width: 640px){
  .conteneur{ padding: 0 20px; }
  .hero .sub{ font-size: 15px; }
  .filtres{ padding-top: 32px; }
  .raccourcis{ margin-left: 0; }
  .etapes-edito{ grid-template-columns: 1fr; }
  table.grille tbody th.rname{ width: 178px; min-width: 178px; padding-right: 14px; }
  .rn{ width: 16px; }
  .nm{ font-size: 15px; }
  .grille-tete{ padding-top: 24px; }
  .carte{ padding: 18px; }
  .etapes .quand{ font-size: 11.5px; }
  .jauge .barre{ width: 90px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
  html{ scroll-behavior: auto; }
}