/* ==========================================================================
   Motolisse, feuille de style unique
   Vocabulaire des classes : piste, plot, gabarit, trame, chevron, chrono,
   bareme, emargement. Tout est nomme comme sur une fiche de parcours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de la fiche de piste
   -------------------------------------------------------------------------- */

:root {
  --lin: #F2EDE3;
  --lin-chaud: #E7DFD0;
  --surface: #FBF8F2;
  --encre: #2B2119;
  --encre-douce: #6B5A47;
  --plot: #DCE817;
  --plot-texte: #241C14;
  --brique: #A8442A;
  --filet: #D6CCB8;

  --titre: "Chakra Petch", "Arial Narrow", sans-serif;
  --courant: "Titillium Web", "Segoe UI", sans-serif;
  --donnee: "Sometype Mono", "Courier New", monospace;

  --gouttiere: 28px;
  --biseau: 14px;
  --entete-h: 68px;
  --colonne: 1240px;
  --mesure: 68ch;

  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --masque: 620ms;
}

/* --------------------------------------------------------------------------
   2. Remise a plat
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lin);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--encre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brique); }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: 4.6rem; font-weight: 700; }
h2 { font-size: 2.6rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1.05em; max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}

::selection { background: var(--plot); color: var(--plot-texte); }

/* --------------------------------------------------------------------------
   3. Motif signature : moire par superposition de deux trames
   -------------------------------------------------------------------------- */

.trame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.trame::before,
.trame::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
}

/* premiere trame, points d encre brune, pas de 7 pixels */
.trame::before {
  background-image: repeating-radial-gradient(circle at 0 0, var(--encre) 0 1px, transparent 1px 7px);
  opacity: 0.1;
}

/* seconde trame, points jaunes, decalee de 3 pixels et pivotee de 7 degres */
.trame::after {
  background-image: repeating-radial-gradient(circle at 3px 3px, var(--plot) 0 1px, transparent 1px 7px);
  transform: rotate(7deg);
  opacity: 0.1;
}

.trame--dense::before { opacity: 0.22; }
.trame--dense::after { opacity: 0.22; }

.trame--pleine::before { opacity: 0.55; }
.trame--pleine::after { opacity: 0.55; }

/* bande de 8 pixels de moire pleine intensite */
.filet-moire {
  height: 8px;
  border: 0;
  margin: 0;
  background-image:
    repeating-radial-gradient(circle at 3px 3px, var(--plot) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 0 0, var(--encre) 0 1px, transparent 1px 7px);
  background-color: var(--lin-chaud);
}

/* --------------------------------------------------------------------------
   4. Forme signature : le repere de plot (double chevron) et le biseau
   -------------------------------------------------------------------------- */

.chevron {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  position: relative;
  vertical-align: -2px;
}

.chevron::before,
.chevron::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 8px;
  height: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 76%, 66% 50%, 0 24%);
  background: var(--encre);
}

.chevron::before { left: 0; }
.chevron::after { left: 4px; background: var(--plot); }

.biseau {
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   5. Grille de douze colonnes
   -------------------------------------------------------------------------- */

.piste-large {
  width: min(100% - 40px, var(--colonne));
  margin-inline: auto;
}

.grille12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.col6 { grid-column: span 6; }
.col4 { grid-column: span 4; }
.col8 { grid-column: span 8; }
.col12 { grid-column: span 12; }
.col8--centre { grid-column: 3 / span 8; }

/* --------------------------------------------------------------------------
   6. Boutons taille gant
   -------------------------------------------------------------------------- */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: color 200ms linear;
}

.bouton span { position: relative; z-index: 2; }

.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 260ms var(--courbe);
  z-index: 1;
}

.bouton--plot {
  background: var(--plot);
  color: var(--plot-texte);
}
.bouton--plot::before { background: var(--encre); }
.bouton--plot:hover,
.bouton--plot:focus-visible { color: var(--lin); }
.bouton--plot:hover::before,
.bouton--plot:focus-visible::before { transform: scaleX(1); }

.bouton--trace {
  background: transparent;
  color: var(--encre);
  box-shadow: inset 0 0 0 2px var(--encre);
}
.bouton--trace::before { background: var(--plot); }
.bouton--trace:hover,
.bouton--trace:focus-visible { color: var(--plot-texte); }
.bouton--trace:hover::before,
.bouton--trace:focus-visible::before { transform: scaleX(1); }

.bouton--large { width: 100%; }

/* --------------------------------------------------------------------------
   7. En tete fixe et barre de progression
   -------------------------------------------------------------------------- */

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--lin);
  padding: 12px 20px;
  z-index: 999;
  font-family: var(--donnee);
  text-transform: uppercase;
  font-size: 0.8rem;
}
.saut-contenu:focus { left: 0; }

.piste-entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--entete-h);
  z-index: 90;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 180ms linear, border-color 180ms linear;
}

.piste-entete.est-posee {
  background: rgba(242, 237, 227, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--encre);
}

.piste-entete__rail {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--plot);
  opacity: 0;
  transition: opacity 180ms linear;
}
.piste-entete.est-posee .piste-entete__rail { opacity: 1; }

.piste-entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100% - 40px, var(--colonne));
  margin-inline: auto;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--encre);
}
.logotype svg { display: block; }

.piste-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.piste-nav a {
  font-family: var(--donnee);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 140ms linear;
}
.piste-nav a:hover,
.piste-nav a:focus-visible { border-bottom-color: var(--plot); }

.piste-entete .bouton { min-height: 44px; font-size: 0.85rem; padding: 0 20px; }

.bascule-panneau {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--encre);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.bascule-panneau span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--encre);
}

.panneau-piste {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--lin);
  padding: 96px 24px 40px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--masque) var(--courbe);
  overflow-y: auto;
}
.panneau-piste[hidden] { display: none; }
.panneau-piste.est-ouvert { clip-path: inset(0 0 0 0); }

.panneau-piste ul { display: grid; gap: 4px; }
.panneau-piste a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}
.panneau-piste .bouton { margin-top: 26px; }

.ferme-panneau {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--encre);
  background: transparent;
  font-size: 1.3rem;
  font-family: var(--donnee);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   8. Hero : typographie surdimensionnee qui deborde du cadre
   -------------------------------------------------------------------------- */

.hero-plateau {
  position: relative;
  padding-top: calc(var(--entete-h) + 34px);
  padding-bottom: 0;
  background: var(--lin);
  overflow: hidden;
}

.hero-plateau__mot {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 22vw;
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0 0 0.06em -0.055em;
  white-space: nowrap;
  width: max-content;
  max-width: none;
  color: var(--encre);
  clip-path: inset(0 100% 0 0);
  animation: masque-glissant 860ms var(--courbe) 160ms forwards;
}

@keyframes masque-glissant {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.hero-plateau__surtitre {
  font-family: var(--donnee);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.hero-plateau__socle {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: end;
  padding-bottom: 52px;
}

.hero-plateau__dire { grid-column: span 6; }
.hero-plateau__dire p {
  font-size: 1.18rem;
  font-weight: 300;
  color: var(--encre);
}

.hero-plateau__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.hero-plateau__jauge {
  grid-column: span 5;
  grid-column-start: 8;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-left: 4px solid var(--plot);
  padding: 22px 24px;
}
.hero-plateau__jauge .chrono {
  font-family: var(--donnee);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.hero-plateau__jauge p {
  font-size: 0.92rem;
  color: var(--encre-douce);
  margin: 0;
}

.hero-plateau__vue {
  position: relative;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   9. Cadre de photographie (coin biseaute, trame en bas)
   -------------------------------------------------------------------------- */

.cliche {
  position: relative;
  display: block;
  border: 1px solid var(--encre);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  background: var(--lin-chaud);
}
.cliche img { width: 100%; }
.cliche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  background-image: repeating-radial-gradient(circle at 0 0, var(--plot) 0 1.4px, transparent 1.4px 3px);
  opacity: 0.14;
  transform: rotate(0.6deg);
  pointer-events: none;
}
.cliche figcaption {
  font-family: var(--donnee);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 10px 14px;
  border-top: 1px solid var(--filet);
  background: var(--surface);
}

figure { margin: 0; }

/* --------------------------------------------------------------------------
   10. Bandes de section et surtitres
   -------------------------------------------------------------------------- */

.bande {
  padding: 92px 0;
  position: relative;
}
.bande--lin { background: var(--lin); }
.bande--chaude { background: var(--lin-chaud); }
.bande--encre {
  background: var(--encre);
  color: var(--lin);
}
.bande--encre h2,
.bande--encre h3 { color: var(--lin); }
.bande--encre a { color: var(--plot); }

.enseigne {
  margin-bottom: 44px;
  max-width: 780px;
}
.enseigne__surtitre {
  font-family: var(--donnee);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.bande--encre .enseigne__surtitre { color: var(--plot); }
.bande--encre .chevron::before { background: var(--lin); }

.enseigne__filet {
  height: 2px;
  background: var(--encre);
  border: 0;
  margin: 0 0 18px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--masque) var(--courbe);
}
.bande--encre .enseigne__filet { background: var(--plot); }
.est-tracee .enseigne__filet,
.enseigne.est-tracee .enseigne__filet { transform: scaleX(1); }

.enseigne p {
  font-size: 1.18rem;
  font-weight: 300;
  color: var(--encre-douce);
  margin: 0;
}
.bande--encre .enseigne p { color: var(--lin-chaud); }

/* --------------------------------------------------------------------------
   11. Revelation par masque glissant
   -------------------------------------------------------------------------- */

.revele {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--masque) var(--courbe);
}
.revele.est-tracee { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   12. Cartes generiques marquees du repere de plot
   -------------------------------------------------------------------------- */

.plot-carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 26px 26px 28px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.plot-carte h3 { margin-top: 14px; }
.plot-carte p { color: var(--encre-douce); font-size: 1rem; }
.plot-carte .chevron { position: absolute; top: 22px; left: 26px; }
.plot-carte--marquee { padding-top: 56px; }

.bande--encre .plot-carte {
  background: #362A20;
  border-color: #4A3A2C;
  color: var(--lin);
}
.bande--encre .plot-carte p { color: #D8CCBC; }

/* --------------------------------------------------------------------------
   13. Probleme, deux colonnes de six
   -------------------------------------------------------------------------- */

.carnet {
  border-left: 4px solid var(--brique);
  padding-left: 22px;
  margin-bottom: 30px;
}
.carnet h3 { margin-bottom: 8px; }
.carnet p { color: var(--encre-douce); }

.compte-rendu {
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 24px 26px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.compte-rendu dl { margin: 0; display: grid; gap: 14px; }
.compte-rendu div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-bottom: 1px dotted var(--filet); padding-bottom: 12px; }
.compte-rendu div:last-child { border-bottom: 0; padding-bottom: 0; }
.compte-rendu dt { font-size: 0.95rem; color: var(--encre-douce); margin: 0; }
.compte-rendu dd {
  margin: 0;
  font-family: var(--donnee);
  font-weight: 500;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compte-rendu dd.alerte { color: var(--brique); }

/* --------------------------------------------------------------------------
   14. Solution, bande horizontale de quatre etapes
   -------------------------------------------------------------------------- */

.rail-etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: var(--gouttiere);
}

.gabarit-etape {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--encre);
  padding: 26px 24px 28px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.gabarit-etape__rang {
  font-family: var(--donnee);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.gabarit-etape h3 { font-size: 1.3rem; }
.gabarit-etape p { color: var(--encre-douce); font-size: 0.99rem; }

/* --------------------------------------------------------------------------
   15. Fonctionnalites, trois colonnes de quatre
   -------------------------------------------------------------------------- */

.parc-fonctions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.parc-fonctions .plot-carte__etiquette {
  font-family: var(--donnee);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plot-texte);
  background: var(--plot);
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   16. Avantages, bande de quatre chiffres
   -------------------------------------------------------------------------- */

.bande-gains {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
}
.gain__valeur {
  font-family: var(--donnee);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.gain h3 { font-size: 1.18rem; margin-bottom: 6px; }
.gain p { font-size: 0.97rem; color: var(--encre-douce); }
.bande--encre .gain p { color: #D8CCBC; }
.bande--encre .gain__valeur { color: var(--plot); }
.gain {
  border-top: 2px solid var(--filet);
  padding-top: 20px;
}
.bande--encre .gain { border-top-color: #4A3A2C; }

/* --------------------------------------------------------------------------
   17. Preuve : bandeau de chiffres et temoignages
   -------------------------------------------------------------------------- */

.bandeau-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
  background: var(--surface);
  border: 1px solid var(--encre);
  padding: 30px 30px 34px;
  margin-bottom: 8px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.bandeau-chiffres b {
  display: block;
  font-family: var(--donnee);
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bandeau-chiffres span {
  display: block;
  margin-top: 8px;
  font-size: 0.93rem;
  color: var(--encre-douce);
  max-width: 26ch;
}

.trois-temoins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 48px;
}

.temoin {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 26px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.temoin blockquote { margin: 0; }
.temoin blockquote p { font-size: 1.03rem; }
.temoin figcaption {
  border-top: 2px solid var(--encre);
  padding-top: 14px;
  margin-top: auto;
}
.temoin figcaption b { display: block; font-family: var(--titre); font-size: 1.08rem; font-weight: 600; }
.temoin figcaption span {
  display: block;
  font-family: var(--donnee);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
  text-transform: uppercase;
  margin-top: 4px;
}
.temoin__releve {
  font-family: var(--donnee);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  background: var(--plot);
  color: var(--plot-texte);
  display: inline-block;
  padding: 4px 9px;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   18. Tarifs
   -------------------------------------------------------------------------- */

.trois-formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}

.formule {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--encre);
  display: flex;
  flex-direction: column;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.formule--surelevee { margin-top: -16px; border-width: 2px; }

.formule__entete {
  position: relative;
  padding: 26px 26px 22px;
  border-bottom: 2px solid var(--encre);
  overflow: hidden;
  isolation: isolate;
}
.formule__entete::before,
.formule__entete::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
}
.formule__entete::before {
  background-image: repeating-radial-gradient(circle at 0 0, var(--encre) 0 1px, transparent 1px 7px);
  opacity: 0.18;
}
.formule__entete::after {
  background-image: repeating-radial-gradient(circle at 3px 3px, var(--plot) 0 1px, transparent 1px 7px);
  transform: rotate(7deg);
  opacity: 0.3;
}
.formule__entete h3 { margin: 10px 0 4px; font-size: 1.7rem; }
.formule__cible { font-size: 0.93rem; color: var(--encre-douce); margin: 0; }

.formule__prix {
  font-family: var(--donnee);
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 1;
  display: block;
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
.formule__unite {
  font-family: var(--donnee);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: block;
  margin-top: 6px;
}

.formule__inclus {
  padding: 24px 26px;
  display: grid;
  gap: 12px;
  flex: 1;
}
.formule__inclus li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.97rem;
  line-height: 1.5;
}
.formule__inclus .chevron { margin-top: 3px; }

.formule__pied { padding: 0 26px 26px; }

.fanion {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--plot);
  color: var(--plot-texte);
  font-family: var(--donnee);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  z-index: 2;
}

.note-tarif {
  margin-top: 30px;
  font-size: 0.95rem;
  color: var(--encre-douce);
  max-width: 90ch;
}

/* --------------------------------------------------------------------------
   19. FAQ
   -------------------------------------------------------------------------- */

.pile-faq { display: grid; gap: 0; }

.question {
  border-bottom: 1px solid var(--filet);
  background: transparent;
}
.question:first-child { border-top: 2px solid var(--encre); }

.question__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--encre);
  letter-spacing: -0.01em;
}
.question__bouton:hover { color: var(--brique); }

.question__signe {
  font-family: var(--donnee);
  font-size: 1.4rem;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 200ms var(--courbe);
}
.question__bouton[aria-expanded="true"] .question__signe { transform: rotate(45deg); }

.question__reponse {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--courbe);
  padding: 0 4px 0;
  max-height: 0;
  overflow: hidden;
}
.question__reponse.est-ouverte {
  clip-path: inset(0 0 0 0);
  max-height: 900px;
  padding-bottom: 24px;
}
.question__reponse p { color: var(--encre-douce); max-width: 74ch; }

/* --------------------------------------------------------------------------
   20. Contact
   -------------------------------------------------------------------------- */

.atelier-contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}
.atelier-contact__formulaire { grid-column: span 7; }
.atelier-contact__aparte { grid-column: span 5; }

.fiche-form {
  background: var(--surface);
  border: 1px solid var(--encre);
  padding: 30px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  display: grid;
  gap: 16px;
}

.fiche-form label {
  display: block;
  font-family: var(--donnee);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 6px;
}

.fiche-form input[type="text"],
.fiche-form input[type="email"],
.fiche-form select,
.fiche-form textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--lin);
  border: 1px solid var(--filet);
  border-bottom: 2px solid var(--encre);
  padding: 13px 14px;
  min-height: 52px;
  border-radius: 0;
  appearance: none;
}
.fiche-form textarea { min-height: 128px; resize: vertical; }
.fiche-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.fiche-form input:focus-visible,
.fiche-form select:focus-visible,
.fiche-form textarea:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 2px;
  background: var(--surface);
}

.consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--encre-douce);
  line-height: 1.5;
  text-transform: none;
  font-family: var(--courant);
  letter-spacing: 0;
}
.consentement input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 22px; accent-color: var(--encre); }

.apres-form {
  margin-top: 18px;
  font-size: 0.93rem;
  color: var(--encre-douce);
}

.aparte-bloc {
  background: var(--lin-chaud);
  border: 1px solid var(--filet);
  padding: 26px;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  margin-bottom: 20px;
}
.aparte-bloc h3 { font-size: 1.24rem; }
.aparte-bloc ul { display: grid; gap: 10px; margin-top: 12px; }
.aparte-bloc li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   21. Pied de page
   -------------------------------------------------------------------------- */

.pied-piste {
  background: var(--encre);
  color: var(--lin-chaud);
  padding: 70px 0 0;
}
.pied-piste a { color: var(--lin-chaud); text-decoration: none; }
.pied-piste a:hover { color: var(--plot); text-decoration: underline; }

.pied-piste__grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 36px;
}
.pied-piste h2 {
  font-family: var(--donnee);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plot);
  margin-bottom: 16px;
}
.pied-piste ul { display: grid; gap: 9px; font-size: 0.96rem; }
.pied-piste p { font-size: 0.95rem; color: #CFC2B0; }
.pied-piste .logotype { color: var(--lin); margin-bottom: 14px; }

.reseaux-auteur {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  font-family: var(--donnee);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pied-piste__barre {
  margin-top: 56px;
  border-top: 1px solid #4A3A2C;
  padding: 22px 0 26px;
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  color: #CFC2B0;
}

/* --------------------------------------------------------------------------
   22. Pages internes, texte long
   -------------------------------------------------------------------------- */

.entete-interne {
  padding: calc(var(--entete-h) + 66px) 0 54px;
  background: var(--lin-chaud);
  border-bottom: 1px solid var(--filet);
  position: relative;
  overflow: hidden;
}
.entete-interne h1 { font-size: 3.4rem; max-width: 20ch; }
.entete-interne p { font-size: 1.18rem; font-weight: 300; color: var(--encre-douce); }

.fil {
  font-family: var(--donnee);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 18px;
}
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.texte-long { padding: 74px 0 90px; }
.texte-long .piste-large > * { max-width: 78ch; }
.texte-long h2 {
  font-size: 1.95rem;
  margin-top: 46px;
  padding-top: 18px;
  border-top: 2px solid var(--encre);
}
.texte-long h2:first-of-type { margin-top: 0; }
.texte-long h3 { margin-top: 30px; font-size: 1.24rem; }
.texte-long ul { display: grid; gap: 10px; margin: 0 0 18px; }
.texte-long ul li { display: flex; gap: 10px; align-items: flex-start; }
.texte-long ol { counter-reset: pas; display: grid; gap: 10px; margin: 0 0 18px; }
.texte-long ol li { counter-increment: pas; display: flex; gap: 12px; align-items: flex-start; }
.texte-long ol li::before {
  content: counter(pas, decimal-leading-zero);
  font-family: var(--donnee);
  color: var(--encre-douce);
  flex: 0 0 auto;
}
.texte-long dl { margin: 0 0 18px; display: grid; gap: 12px; }
.texte-long dt { font-family: var(--titre); font-weight: 600; }
.texte-long dd { margin: 4px 0 0; color: var(--encre-douce); }

.encart {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-left: 4px solid var(--plot);
  padding: 22px 24px;
  margin: 28px 0;
}
.encart p { margin-bottom: 0.6em; }
.encart p:last-child { margin-bottom: 0; }

.portrait-auteur {
  float: right;
  margin: 0 0 24px 30px;
  border: 1px solid var(--encre);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  max-width: 260px;
}

.liste-plan { display: grid; gap: 18px; }
.liste-plan li {
  border-bottom: 1px dotted var(--filet);
  padding-bottom: 16px;
  display: block;
}
.liste-plan a { font-family: var(--titre); font-weight: 600; font-size: 1.15rem; }
.liste-plan span { display: block; color: var(--encre-douce); font-size: 0.97rem; margin-top: 4px; }

.page-courte {
  min-height: 68vh;
  display: flex;
  align-items: center;
  padding: calc(var(--entete-h) + 70px) 0 80px;
  position: relative;
  overflow: hidden;
}
.page-courte h1 { font-size: 3.6rem; }
.page-courte .bouton { margin-top: 10px; margin-right: 12px; }
.code-erreur {
  font-family: var(--donnee);
  font-size: 6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--brique);
  display: block;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   23. Adaptations d ecran
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .parc-fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trois-temoins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trois-formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formule--surelevee { margin-top: 0; }
  .pied-piste__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeau-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .bande-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .rail-etapes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
  }
  .rail-etapes .gabarit-etape { flex: 0 0 300px; scroll-snap-align: start; }
}

@media (max-width: 900px) {
  .piste-nav { display: none; }
  .piste-entete .bouton { display: none; }
  .bascule-panneau { display: flex; }
  .hero-plateau__dire,
  .hero-plateau__jauge { grid-column: 1 / -1; }
  .hero-plateau__jauge { grid-column-start: auto; }
  .atelier-contact__formulaire,
  .atelier-contact__aparte { grid-column: 1 / -1; }
  .col6, .col4, .col8, .col8--centre { grid-column: 1 / -1; }
  .entete-interne h1 { font-size: 2.6rem; }
}

@media (max-width: 700px) {
  h1 { font-size: 2.7rem; }
  h2 { font-size: 2rem; }
  .bande { padding: 62px 0; }
  .hero-plateau__mot { font-size: 26vw; }
  .parc-fonctions,
  .trois-temoins,
  .trois-formules,
  .bandeau-chiffres,
  .bande-gains,
  .pied-piste__grille { grid-template-columns: minmax(0, 1fr); }
  .portrait-auteur { float: none; margin: 0 0 24px; max-width: 100%; }
  .page-courte h1 { font-size: 2.5rem; }
  .code-erreur { font-size: 4rem; }
  .fiche-form { padding: 22px; }
  .bouton { width: 100%; }
  .piste-entete .bouton { width: auto; }
}

/* --------------------------------------------------------------------------
   24. Mouvement reduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revele,
  .question__reponse,
  .panneau-piste,
  .hero-plateau__mot { clip-path: inset(0 0 0 0) !important; animation: none !important; transition: color 120ms linear, background-color 120ms linear !important; }
  .enseigne__filet { transform: scaleX(1) !important; transition: none !important; }
  .bouton::before { transition: none !important; }
  .question__reponse { max-height: none; }
  .question__reponse:not(.est-ouverte) { display: none; }
}

@media print {
  .piste-entete, .panneau-piste, .bascule-panneau { display: none !important; }
  body { background: #FFFFFF; }
  .revele { clip-path: none; }
}

/* --------------------------------------------------------------------------
   25. Le magazine, La Fiche de Piste
   Section ajoutee sans toucher aux regles precedentes. Meme palette, meme
   moire par superposition de trames, meme repere de plot (double chevron et
   coin superieur droit biseaute) et meme revelation par masque glissant de
   la gauche vers la droite que le reste du site.
   Le corps redactionnel des articles ne porte aucune classe : les balises
   nues h2, h3, p, ul, ol, li, table, thead, tbody, tr, th, td, blockquote,
   aside, figure, figcaption, strong, em et a sont mises en forme ici en tant
   que descendantes de .corps-article.
   -------------------------------------------------------------------------- */

/* ---- 25.1 Chapeau de la page d index du magazine ---- */

.magazine-chapo {
  font-size: 1.18rem;
  font-weight: 300;
  color: var(--encre-douce);
  max-width: 74ch;
}

.magazine-relance {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}

/* ---- 25.2 Grille de cartes d article ---- */

.grille-fiches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grille-fiches > li { display: flex; }

/* ---- 25.3 Carte d article ---- */

.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--filet);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: border-color 200ms linear;
}
.fiche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--plot);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--courbe);
  pointer-events: none;
  z-index: 2;
}
.fiche:hover,
.fiche:focus-within { border-color: var(--encre); }
.fiche:hover::after,
.fiche:focus-within::after { transform: scaleX(1); }

.fiche__vue {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--filet);
  background: var(--lin-chaud);
  overflow: hidden;
}
.fiche__vue img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* moire signature posee sur le quart bas de la vignette */
.fiche__vue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  background-image: repeating-radial-gradient(circle at 0 0, var(--plot) 0 1.4px, transparent 1.4px 3px);
  opacity: 0.14;
  transform: rotate(0.6deg);
  pointer-events: none;
}

.fiche__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.fiche__angle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--donnee);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 12px;
  max-width: none;
}

.fiche__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  max-width: none;
}
.fiche__titre a { text-decoration: none; }
.fiche__titre a:hover,
.fiche__titre a:focus-visible { text-decoration: underline; text-decoration-color: var(--plot); text-decoration-thickness: 3px; }

.fiche__extrait {
  font-size: 0.97rem;
  color: var(--encre-douce);
  flex: 1 1 auto;
  margin: 0 0 18px;
  max-width: none;
}

.fiche__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px dotted var(--filet);
  padding-top: 12px;
  font-family: var(--donnee);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  margin: 0;
  max-width: none;
}

/* ---- 25.4 Section Derniers articles de la page d accueil ---- */

.derniers-articles .grille-fiches { margin-top: 6px; }
.derniers-articles__relance {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}
.derniers-articles__relance p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.97rem;
  max-width: 52ch;
}

/* ---- 25.5 Entete d article, fil d Ariane et jalons ---- */

.entete-article {
  padding: calc(var(--entete-h) + 62px) 0 46px;
  background: var(--lin-chaud);
  border-bottom: 1px solid var(--filet);
  position: relative;
  overflow: hidden;
}
.entete-article h1 {
  font-size: 3.3rem;
  max-width: 22ch;
  margin-bottom: 22px;
}

.jalons-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-family: var(--donnee);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  margin: 0 0 26px;
  max-width: none;
}
.jalons-article span { display: inline-flex; align-items: center; gap: 8px; }
.jalons-article b {
  font-weight: 500;
  color: var(--plot-texte);
  background: var(--plot);
  padding: 3px 10px;
}

.chapo-article {
  font-size: 1.24rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--encre);
  border-left: 4px solid var(--plot);
  padding-left: 22px;
  max-width: 68ch;
  margin: 0;
}

.maj-article {
  font-family: var(--donnee);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 24px 0 0;
  max-width: none;
}

/* ---- 25.6 Corps d article, mesure de lecture confortable ---- */

.corps-piste { padding: 56px 0 78px; }

.vue-article { margin: 0 0 44px; }

.corps-article {
  max-width: var(--mesure);
}
.corps-article > *:first-child { margin-top: 0; }

.corps-article p {
  margin: 0 0 1.05em;
  max-width: none;
}

.corps-article h2 {
  position: relative;
  font-size: 1.9rem;
  line-height: 1.08;
  margin: 52px 0 16px;
  padding: 20px 0 0 30px;
  border-top: 2px solid var(--encre);
  max-width: none;
}
.corps-article h2::before,
.corps-article h2::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 8px;
  height: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 76%, 66% 50%, 0 24%);
  background: var(--encre);
}
.corps-article h2::before { left: 0; }
.corps-article h2::after { left: 4px; background: var(--plot); }

.corps-article h3 {
  font-size: 1.26rem;
  margin: 32px 0 12px;
  padding-left: 14px;
  border-left: 3px solid var(--plot);
  max-width: none;
}

.corps-article ul {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.corps-article ul > li {
  position: relative;
  padding-left: 26px;
}
.corps-article ul > li::before,
.corps-article ul > li::after {
  content: "";
  position: absolute;
  top: 0.52em;
  width: 8px;
  height: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 76%, 66% 50%, 0 24%);
  background: var(--encre);
}
.corps-article ul > li::before { left: 0; }
.corps-article ul > li::after { left: 4px; background: var(--plot); }

.corps-article ol {
  counter-reset: passage;
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.corps-article ol > li {
  counter-increment: passage;
  position: relative;
  padding-left: 40px;
}
.corps-article ol > li::before {
  content: counter(passage, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--donnee);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.corps-article li p:last-child { margin-bottom: 0; }

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--filet);
  margin: 28px 0 30px;
  font-size: 0.96rem;
}
.corps-article thead th {
  background: var(--encre);
  color: var(--lin);
  font-family: var(--donnee);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
}
.corps-article td,
.corps-article tbody th {
  border-bottom: 1px solid var(--filet);
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
}
.corps-article tbody th {
  font-family: var(--titre);
  font-weight: 600;
  width: 34%;
}
.corps-article tbody tr:nth-child(even) { background: var(--lin); }
.corps-article tbody tr:last-child td,
.corps-article tbody tr:last-child th { border-bottom: 0; }

.corps-article blockquote {
  margin: 32px 0;
  padding: 6px 0 6px 26px;
  border-left: 4px solid var(--plot);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.5;
}
.corps-article blockquote p { margin-bottom: 0.7em; }
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-left: 4px solid var(--plot);
  padding: 24px 26px;
  margin: 32px 0;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.corps-article aside p { font-size: 1rem; }
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside ul,
.corps-article aside ol { margin-bottom: 0; }

.corps-article figure {
  margin: 30px 0;
  border: 1px solid var(--encre);
  background: var(--lin-chaud);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.corps-article figcaption {
  font-family: var(--donnee);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 10px 14px;
  border-top: 1px solid var(--filet);
  background: var(--surface);
}

.corps-article a {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--plot);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.corps-article a:hover,
.corps-article a:focus-visible {
  background: var(--plot);
  color: var(--plot-texte);
  text-decoration-color: var(--encre);
}

.corps-article strong { font-weight: 600; color: var(--encre); }
.corps-article em { font-style: italic; }

/* ---- 25.7 Appel a l action de fin d article ---- */

.appel-piste {
  margin: 46px 0 0;
  background: var(--lin-chaud);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--encre);
  padding: 28px 30px 30px;
  max-width: var(--mesure);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.appel-piste__surtitre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--donnee);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 12px;
  max-width: none;
}
.appel-piste p { color: var(--encre-douce); }
.appel-piste .bouton { margin-top: 8px; }

/* ---- 25.8 Encart auteur ---- */

.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--encre);
  padding: 26px 28px 28px;
  margin: 40px 0 0;
  max-width: var(--mesure);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.encart-auteur img { border: 1px solid var(--encre); }
.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  max-width: none;
}
.encart-auteur__role {
  font-family: var(--donnee);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 12px;
  max-width: none;
}
.encart-auteur p { font-size: 0.98rem; color: var(--encre-douce); }

/* ---- 25.9 Bloc A lire aussi ---- */

.lire-aussi {
  background: var(--lin-chaud);
  border-top: 1px solid var(--filet);
  padding: 64px 0 74px;
}
.titre-bloc {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  max-width: none;
  color: var(--encre);
}
.lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiche-liee {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: border-color 200ms linear;
}
.fiche-liee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--plot);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--courbe);
  pointer-events: none;
  z-index: 2;
}
.fiche-liee:hover,
.fiche-liee:focus-within { border-color: var(--encre); }
.fiche-liee:hover::after,
.fiche-liee:focus-within::after { transform: scaleX(1); }

.fiche-liee img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--filet);
}
.fiche-liee__corps { padding: 20px 22px 24px; }
.fiche-liee__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  max-width: none;
}
.fiche-liee__titre a { text-decoration: none; }
.fiche-liee__titre a:hover,
.fiche-liee__titre a:focus-visible { text-decoration: underline; text-decoration-color: var(--plot); text-decoration-thickness: 3px; }
.fiche-liee__accroche {
  font-size: 0.94rem;
  color: var(--encre-douce);
  margin: 0;
  max-width: none;
}

/* le titre du bloc A lire aussi vit dans une enseigne du site, il doit reprendre
   la composition des titres de section plutot que celle du chapeau */
.enseigne .titre-bloc { font-size: 2rem; font-weight: 600; color: var(--encre); }
.lire-aussi .enseigne { margin-bottom: 34px; }

/* ---- 25.10 Sommaire du magazine sur la page auteur et le plan du site ---- */

ul.sommaire-magazine { display: grid; gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; }
ul.sommaire-magazine li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  align-items: baseline;
  border-bottom: 1px dotted var(--filet);
  padding-bottom: 14px;
}
ul.sommaire-magazine a { font-family: var(--titre); font-weight: 600; font-size: 1.12rem; }
ul.sommaire-magazine time {
  font-family: var(--donnee);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
ul.sommaire-magazine span {
  grid-column: 1 / -1;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

/* ---- 25.11 Titre de colonne du pied de page sur les pages du magazine ---- */

.pied-piste__titre {
  font-family: var(--donnee);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plot);
  margin: 0 0 16px;
  max-width: none;
}

/* ---- 25.12 Adaptations d ecran du magazine ---- */

@media (max-width: 1080px) {
  .grille-fiches,
  .lire-aussi__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entete-article h1 { font-size: 2.7rem; }
}

@media (max-width: 700px) {
  .grille-fiches,
  .lire-aussi__grille { grid-template-columns: minmax(0, 1fr); }
  .entete-article { padding-top: calc(var(--entete-h) + 46px); }
  .entete-article h1 { font-size: 2.2rem; }
  .chapo-article { font-size: 1.1rem; padding-left: 16px; }
  .corps-article h2 { font-size: 1.55rem; }
  .corps-article table { display: block; overflow-x: auto; }
  .encart-auteur { grid-template-columns: minmax(0, 1fr); }
  .appel-piste { padding: 22px 20px 24px; }
  .fiche__pied { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche::after,
  .fiche-liee::after { transition: none !important; transform: scaleX(1) !important; }
  .fiche,
  .fiche-liee { transition: border-color 120ms linear !important; }
}

/* --------------------------------------------------------------------------
   Correction: grand espace vide dans l ouverture
   La jauge etait ecrite grid-column: span 5 puis grid-column-start: 8. La
   propriete longue ecrase la portee posee par le raccourci: il restait un
   debut a la colonne 8 et une fin automatique, donc une seule colonne de
   78 pixels dans un emplacement de 500. Le reste de la place restait vide.
   -------------------------------------------------------------------------- */
.hero-plateau__jauge {
  grid-column: 8 / span 5;
}
@media (max-width: 1080px) {
  .hero-plateau__jauge { grid-column: 1 / -1; }
}