/* ==========================================================================
   Menovolia, feuille de style unique
   Carnet de formule de salon : bandes horizontales pleine largeur,
   lignes de balayage fines, encoche de raie, morphing des pictogrammes.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  --satin: #FBF6F5;
  --liedevin-clair: #F3E7E8;
  --surface: #FFFFFF;
  --prune: #2B1B21;
  --prune-doux: #5C444C;
  --bleu: #1B4C8C;
  --bleu-sombre: #143a6b;
  --sur-bleu: #FFFFFF;
  --liedevin: #8E3A54;
  --filet: #E2D0D3;

  --titre: "Marcellus", "Times New Roman", Georgia, serif;
  --courant: "PT Serif", "Times New Roman", Georgia, serif;
  --mesure-police: "Fira Code", "Courier New", monospace;

  --largeur-mesure: 1120px;
  --hauteur-rampe: 72px;
  --raie: 38%;

  --balayage: repeating-linear-gradient(
    0deg,
    rgba(142, 58, 84, 0.07) 0,
    rgba(142, 58, 84, 0.07) 1px,
    rgba(142, 58, 84, 0) 1px,
    rgba(142, 58, 84, 0) 6px
  );
  --balayage-blanc: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.08) 1px,
    rgba(255, 255, 255, 0) 1px,
    rgba(255, 255, 255, 0) 6px
  );

  --douce: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-rampe) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--satin);
  color: var(--prune);
  font-family: var(--courant);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.18;
  margin: 0 0 0.6em;
  color: var(--prune);
}

h1 { font-size: 3.2rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

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

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

ul, ol { margin: 0 0 1.1em; padding-left: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 2rem 0;
}

::selection { background: var(--liedevin-clair); color: var(--prune); }

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

.evitement {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 90;
  background: var(--bleu);
  color: var(--sur-bleu);
  padding: 0.7rem 1.1rem;
  font-family: var(--mesure-police);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 180ms var(--douce);
}
.evitement:focus { top: 8px; color: var(--sur-bleu); }

.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Fragments de mesure, en Fira Code
   -------------------------------------------------------------------------- */

.surtitre {
  font-family: var(--mesure-police);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--liedevin);
  margin: 0 0 1rem;
  display: block;
}
.surtitre--bleu { color: var(--bleu); }
.surtitre--clair { color: rgba(255, 255, 255, 0.86); }

.jeton {
  font-family: var(--mesure-police);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--bleu);
}

.etiquette {
  display: inline-block;
  font-family: var(--mesure-police);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
  border: 1px solid var(--filet);
  background: var(--surface);
  padding: 0.24rem 0.55rem;
  border-radius: 3px;
}
.etiquette--vin { color: var(--liedevin); border-color: rgba(142, 58, 84, 0.35); }

.chapo {
  font-size: 1.16rem;
  color: var(--prune-doux);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. Bandes horizontales, archetype de grille
   -------------------------------------------------------------------------- */

.bande {
  width: 100%;
  border-bottom: 1px solid var(--filet);
  position: relative;
  overflow: hidden;
}
.bande--satin { background: var(--satin); padding: 5.5rem 0; }
.bande--vin { background: var(--liedevin-clair); padding: 5.5rem 0; }
.bande--blanche { background: var(--surface); padding: 5rem 0; }

.bande--serree { padding: 3.4rem 0; }
.bande--ample { padding: 6.6rem 0; }

.bande--balayee::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--balayage);
  pointer-events: none;
}

/* bande courte a l aplat bleu profond, hauteur 180 pixels */
.bande--compte {
  background: var(--bleu);
  color: var(--sur-bleu);
  min-height: 180px;
  display: flex;
  align-items: center;
  padding: 1.8rem 0;
  border-bottom: 0;
}
.bande--compte::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--balayage-blanc);
  pointer-events: none;
}

.mesure {
  width: 100%;
  max-width: var(--largeur-mesure);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.mesure--etroite { max-width: 820px; }

.tete-bande { margin-bottom: 3rem; }
.tete-bande--large { max-width: 760px; }
.tete-bande h2 { margin-bottom: 0.55rem; }

/* filet de separation interne, rappel du carnet de formule */
.filet-raie {
  height: 1px;
  background: var(--filet);
  border: 0;
  margin: 3rem 0;
  position: relative;
}
.filet-raie::after {
  content: "";
  position: absolute;
  left: var(--raie);
  top: -5px;
  width: 2px;
  height: 11px;
  background: var(--liedevin);
}

/* --------------------------------------------------------------------------
   5. Encoche de raie, forme signature des cartes
   -------------------------------------------------------------------------- */

.encoche {
  position: relative;
}
.encoche::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
  transition: height 260ms var(--douce);
}
.encoche::after {
  content: "";
  position: absolute;
  left: calc(var(--raie) + 0.5px);
  top: 10px;
  width: 1px;
  height: 40%;
  background: linear-gradient(to bottom, rgba(142, 58, 84, 0.55), rgba(142, 58, 84, 0));
  pointer-events: none;
}
.encoche:hover::before,
.encoche:focus-within::before { height: 14px; }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.35rem;
  border-radius: 4px;
  font-family: var(--mesure-police);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: background-color 200ms var(--douce), border-color 200ms var(--douce), transform 120ms var(--douce);
}

.bouton--principal {
  background: var(--bleu);
  color: var(--sur-bleu);
}
.bouton--principal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  transition: left 260ms var(--douce);
}
.bouton--principal:hover { background: var(--bleu-sombre); color: var(--sur-bleu); }
.bouton--principal:hover::after { left: 100%; }
.bouton--principal:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 1px #ffffff;
}
.bouton:active { transform: translateY(1px); }

.bouton--second {
  background: transparent;
  color: var(--prune);
  border-color: var(--filet);
}
.bouton--second::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 8px;
  background: var(--filet);
  transition: height 220ms var(--douce), background-color 220ms var(--douce);
}
.bouton--second:hover {
  border-color: var(--liedevin);
  color: var(--prune);
}
.bouton--second:hover::before { height: 12px; background: var(--liedevin); }

.bouton--clair {
  background: var(--surface);
  color: var(--bleu);
  border-color: rgba(255, 255, 255, 0.65);
}
.bouton--clair:hover { background: var(--liedevin-clair); color: var(--bleu-sombre); }

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

.duo-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 2rem 0 1.6rem;
}

/* --------------------------------------------------------------------------
   7. Rampe, en tete fixe
   -------------------------------------------------------------------------- */

.rampe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--hauteur-rampe);
  background: rgba(251, 246, 245, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--filet);
  transition: border-bottom-width 180ms var(--douce), border-bottom-color 180ms var(--douce);
}
.rampe.est-defilee {
  border-bottom-width: 2px;
  border-bottom-color: var(--liedevin);
}

.rampe__interieur {
  max-width: var(--largeur-mesure);
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--prune);
}
.logotype__marque {
  width: 34px;
  height: 34px;
  flex: none;
  display: block;
}
.logotype__mot {
  font-family: var(--titre);
  font-size: 1.28rem;
  letter-spacing: 0.05em;
  color: var(--bleu);
}

.rampe__ancres {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rampe__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mesure-police);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--prune-doux);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--douce), border-color 200ms var(--douce);
}
.rampe__lien:hover,
.rampe__lien.est-active {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}
.rampe__picto { width: 14px; height: 14px; flex: none; }

.rampe__bascule {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: 4px;
  cursor: pointer;
  color: var(--prune);
}
.rampe__bascule svg { width: 22px; height: 22px; }

.rampe__panneau {
  position: fixed;
  top: var(--hauteur-rampe);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--satin);
  padding: 2rem 1.5rem 3rem;
  overflow-y: auto;
  z-index: 59;
}
.rampe__panneau[hidden] { display: none; }
.rampe__panneau ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.rampe__panneau li { border-bottom: 1px solid var(--filet); }
.rampe__panneau a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--mesure-police);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prune);
  text-decoration: none;
}
.rampe__panneau a:hover { color: var(--bleu); }

/* --------------------------------------------------------------------------
   8. Morphing de forme sur le pictogramme actif
   -------------------------------------------------------------------------- */

.picto path,
.rampe__picto path {
  transition: d 320ms var(--douce), stroke 320ms var(--douce), fill 320ms var(--douce);
}

.picto {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--bleu);
}
.picto path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: calc(var(--hauteur-rampe) + 4.5rem);
  padding-bottom: 0;
  background: var(--satin);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--balayage);
  pointer-events: none;
}
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.2rem;
  align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero__promesse {
  font-size: 1.2rem;
  color: var(--prune-doux);
  max-width: 52ch;
}
.hero__cadre {
  position: relative;
  border: 1px solid var(--filet);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.hero__cadre img { border-radius: 6px; }
.hero__cadre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33%;
  background: var(--balayage-blanc);
  pointer-events: none;
}
.hero__legende {
  font-size: 0.8125rem;
  color: var(--prune-doux);
  margin-top: 0.7rem;
}

.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.2rem;
  align-items: baseline;
  border-top: 1px solid var(--filet);
  padding-top: 1.2rem;
  margin-top: 2rem;
}
.reassurance__chiffre {
  font-family: var(--mesure-police);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bleu);
  font-variant-numeric: tabular-nums;
}
.reassurance__texte {
  font-size: 0.9rem;
  color: var(--prune-doux);
  max-width: 34ch;
}

/* bande de rappel sous le hero, debordement pleine largeur */
.ruban-garde {
  width: 100%;
  background: var(--surface);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  margin-top: 4rem;
  padding: 1.1rem 0;
}
.ruban-garde__ligne {
  max-width: var(--largeur-mesure);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  align-items: center;
  font-family: var(--mesure-police);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prune-doux);
}
.ruban-garde__ligne span { display: inline-flex; align-items: center; gap: 0.45rem; }
.ruban-garde__ligne span::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--liedevin);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   10. Constat, listes et photo de detail en bandeau
   -------------------------------------------------------------------------- */

.constat__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.6rem;
  margin-bottom: 3rem;
}

.fiche {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 1.9rem 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
  transition: border-color 240ms var(--douce), transform 240ms var(--douce);
}
.fiche:hover,
.fiche:focus-within {
  border-color: var(--liedevin);
  transform: translateY(-2px);
}
.fiche:hover::after,
.fiche:focus-within::after { opacity: 1; }
.fiche > * { position: relative; z-index: 1; }
.fiche__voile {
  position: absolute;
  inset: 0;
  background: var(--balayage);
  opacity: 0;
  transition: opacity 240ms var(--douce);
  pointer-events: none;
  z-index: 0;
}
.fiche:hover .fiche__voile,
.fiche:focus-within .fiche__voile { opacity: 1; }
.fiche h3 { margin-bottom: 0.5rem; }
.fiche p { font-size: 0.98rem; color: var(--prune-doux); }
.fiche__cout {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--mesure-police);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--bleu);
  font-variant-numeric: tabular-nums;
}

/* photo de matiere capillaire masquee en bande horizontale large */
.bandeau-matiere {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  position: relative;
  background: var(--surface);
}
.bandeau-matiere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.bandeau-matiere::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33%;
  background: var(--balayage-blanc);
  pointer-events: none;
}
.bandeau-matiere__note {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: var(--largeur-mesure);
  width: 100%;
  padding: 0 1.5rem;
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prune);
}
.bandeau-matiere__note em {
  background: rgba(255, 255, 255, 0.88);
  padding: 0.3rem 0.6rem;
  font-style: normal;
  border-left: 2px solid var(--liedevin);
}

.liste-raie {
  list-style: none;
  margin: 0;
  padding: 0;
}
.liste-raie li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
}
.liste-raie li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 1px;
  background: var(--liedevin);
  box-shadow: 0 4px 0 0 var(--liedevin);
}
.liste-raie li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.62em - 4px);
  width: 2px;
  height: 13px;
  background: var(--bleu);
}

/* --------------------------------------------------------------------------
   11. Methode, marches numerotees
   -------------------------------------------------------------------------- */

.marches {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: marche;
  border-top: 1px solid var(--filet);
}
.marche {
  counter-increment: marche;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 1.6rem;
  align-items: start;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--filet);
  position: relative;
}
.marche::before {
  content: "0" counter(marche);
  font-family: var(--mesure-police);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--bleu);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-top: 0.25rem;
}
.marche h3 { margin-bottom: 0.45rem; }
.marche p { font-size: 1rem; color: var(--prune-doux); }
.marche__delai {
  font-family: var(--mesure-police);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--liedevin);
  border-left: 2px solid var(--liedevin);
  padding-left: 0.8rem;
  display: block;
}

/* schema de raie en SVG, seul endroit ou le motif porte une information */
.schema {
  margin: 3rem 0 0;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 1.8rem 1.5rem 1.2rem;
}
.schema svg { width: 100%; height: auto; display: block; }
.schema figcaption {
  font-size: 0.8125rem;
  color: var(--prune-doux);
  margin-top: 0.9rem;
}

/* --------------------------------------------------------------------------
   12. Nuancier de fonctionnalites
   -------------------------------------------------------------------------- */

.nuancier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.nuancier .fiche { padding-top: 2.1rem; }
.nuancier__tete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.nuancier__tete h3 { margin: 0; }

.avertissement {
  margin-top: 2.4rem;
  background: var(--surface);
  border: 1px solid rgba(142, 58, 84, 0.4);
  border-left: 4px solid var(--liedevin);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.3rem;
}
.avertissement h3 { color: var(--liedevin); }
.avertissement p { color: var(--prune); }

/* --------------------------------------------------------------------------
   13. Gains
   -------------------------------------------------------------------------- */

.gains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--filet);
  border-left: 1px solid var(--filet);
}
.gain {
  border-right: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: 1.9rem 1.4rem;
  background: var(--surface);
  position: relative;
}
.gain::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
}
.gain__valeur {
  font-family: var(--mesure-police);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--bleu);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1.1;
}
.gain h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.gain p { font-size: 0.95rem; color: var(--prune-doux); margin: 0; }

.duo-terrain {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 3rem;
  align-items: center;
  margin-top: 3.4rem;
}
.duo-terrain__cadre {
  border: 1px solid var(--filet);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--surface);
}
.duo-terrain__cadre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33%;
  background: var(--balayage-blanc);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Bandeau de chiffres
   -------------------------------------------------------------------------- */

.comptes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.6rem;
}
.compte { border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: 1.1rem; }
.compte__valeur {
  font-family: var(--mesure-police);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--sur-bleu);
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.05;
}
.compte__libelle {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0.4rem 0 0;
  max-width: 26ch;
}

/* --------------------------------------------------------------------------
   15. Temoignages
   -------------------------------------------------------------------------- */

.temoins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.temoin {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 2rem 1.5rem 1.5rem;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.temoin__voile {
  position: absolute;
  inset: 0;
  background: var(--balayage);
  opacity: 0.55;
  pointer-events: none;
}
.temoin blockquote {
  margin: 0 0 1.1rem;
  position: relative;
  z-index: 1;
}
.temoin blockquote p {
  font-style: italic;
  font-size: 1.02rem;
  color: var(--prune);
}
.temoin figcaption {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--filet);
  padding-top: 0.85rem;
  font-size: 0.86rem;
  color: var(--prune-doux);
}
.temoin figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--prune);
}
.temoin__serie {
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bleu);
  display: block;
  margin-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   16. Tarifs
   -------------------------------------------------------------------------- */

.formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.formule {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 2.2rem 1.6rem 1.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.formule--avant {
  border-color: var(--bleu);
  border-width: 2px;
}
.formule__drapeau {
  position: absolute;
  top: -1px;
  right: 1.2rem;
  background: var(--bleu);
  color: var(--sur-bleu);
  font-family: var(--mesure-police);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 0 0 3px 3px;
}
.formule h3 { margin-bottom: 0.35rem; }
.formule__prix {
  font-family: var(--mesure-police);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bleu);
  font-size: 2.6rem;
  line-height: 1;
  display: block;
  margin: 0.7rem 0 0.2rem;
}
.formule__unite {
  font-family: var(--mesure-police);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--prune-doux);
  display: block;
  margin-bottom: 1rem;
}
.formule__cible {
  font-size: 0.95rem;
  color: var(--prune-doux);
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
}
.formule ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1;
}
.formule li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  color: var(--prune);
}
.formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--liedevin);
  box-shadow: 0 4px 0 0 var(--liedevin);
}
.formule li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.62em - 4px);
  width: 2px;
  height: 13px;
  background: var(--bleu);
}
.note-tarifs {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--prune-doux);
  max-width: 74ch;
}

/* --------------------------------------------------------------------------
   17. Foire aux questions
   -------------------------------------------------------------------------- */

.questions {
  border-top: 1px solid var(--filet);
}
.question {
  border-bottom: 1px solid var(--filet);
}
.question__bouton {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 1.35rem 3rem 1.35rem 0;
  font-family: var(--titre);
  font-size: 1.18rem;
  color: var(--prune);
  cursor: pointer;
  position: relative;
  line-height: 1.3;
}
.question__bouton:hover { color: var(--bleu); }
.question__signe {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--bleu);
}
.question__signe path { transition: d 320ms var(--douce); }
.question__reponse {
  padding: 0 0 1.5rem;
  max-width: 74ch;
}
.question__reponse p { font-size: 1rem; color: var(--prune-doux); }
.question__reponse[hidden] { display: none; }

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */

.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
}
.contact__mots p { color: var(--prune-doux); }

.brief {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 2rem 1.7rem;
  position: relative;
}
.brief::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
}
.champ { margin-bottom: 1.2rem; }
.champ label {
  display: block;
  font-family: var(--mesure-police);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prune-doux);
  margin-bottom: 0.4rem;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--prune);
  background: var(--satin);
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 0.7rem 0.8rem;
  min-height: 46px;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 2px solid var(--bleu);
  outline-offset: 1px;
  background: var(--surface);
}
.champ--accord {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border-top: 1px solid var(--filet);
  padding-top: 1.2rem;
}
.champ--accord input { margin-top: 0.35rem; flex: none; width: 18px; height: 18px; }
.champ--accord label {
  font-family: var(--courant);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--prune-doux);
  margin: 0;
}
.brief__delai {
  margin-top: 1.3rem;
  font-size: 0.86rem;
  color: var(--prune-doux);
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   19. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--surface);
  border-top: 1px solid var(--filet);
  padding: 4rem 0 0;
}
.pied__colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}
.pied h2 {
  font-family: var(--mesure-police);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--liedevin);
  margin-bottom: 1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.55rem; }
.pied a { color: var(--prune-doux); text-decoration: none; font-size: 0.94rem; }
.pied a:hover { color: var(--bleu); text-decoration: underline; }
.pied__position {
  font-size: 0.94rem;
  color: var(--prune-doux);
  margin: 0.9rem 0 1.2rem;
  max-width: 40ch;
}
.pied__profils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.pied__profils a {
  font-family: var(--mesure-police);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pied__editeur {
  font-size: 0.86rem;
  color: var(--prune-doux);
  margin-top: 0.9rem;
}
.pied__reseau {
  margin-top: 3rem;
  border-top: 1px solid var(--filet);
  padding-top: 1.4rem;
}
.pied__reseau ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
.pied__reseau a { font-size: 0.82rem; }
.pied__barre {
  margin-top: 2rem;
  border-top: 1px solid var(--filet);
  background: var(--satin);
  padding: 1.3rem 0;
}
.pied__barre .mesure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--prune-doux);
}

/* --------------------------------------------------------------------------
   20. Pages interieures
   -------------------------------------------------------------------------- */

.tete-page {
  padding-top: calc(var(--hauteur-rampe) + 4rem);
  padding-bottom: 3.4rem;
  background: var(--satin);
  border-bottom: 1px solid var(--filet);
  position: relative;
  overflow: hidden;
}
.tete-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--balayage);
  pointer-events: none;
}
.fil {
  font-family: var(--mesure-police);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prune-doux);
  margin-bottom: 1.2rem;
}
.fil a { color: var(--prune-doux); text-decoration: none; }
.fil a:hover { color: var(--bleu); }

.texte-long h2 {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
  position: relative;
}
.texte-long h2::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: -1px;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
}
.texte-long h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.texte-long h2:first-child::before { display: none; }
.texte-long h3 { margin-top: 1.9rem; }
.texte-long ul { list-style: none; padding: 0; }
.texte-long ul li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.65rem;
  max-width: 68ch;
}
.texte-long ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--liedevin);
  box-shadow: 0 4px 0 0 var(--liedevin);
}
.texte-long ul li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.62em - 4px);
  width: 2px;
  height: 13px;
  background: var(--bleu);
}
.texte-long dl { margin: 0 0 1.4rem; }
.texte-long dt {
  font-family: var(--mesure-police);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-top: 0.9rem;
}
.texte-long dd { margin: 0.25rem 0 0; color: var(--prune-doux); }

.portrait {
  float: none;
  border: 1px solid var(--filet);
  border-radius: 6px;
  margin: 0 0 1.6rem;
  max-width: 260px;
}
.bloc-auteur {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.encart {
  background: var(--liedevin-clair);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 1.6rem;
  margin: 2rem 0;
  position: relative;
}
.encart::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
}
.encart p:last-child { margin-bottom: 0; }

.plan-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  list-style: none;
  padding: 0;
}
.plan-liste li {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 1.4rem;
  position: relative;
  padding-left: 1.4rem;
  margin: 0;
}
.plan-liste li::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
  box-shadow: none;
}
.plan-liste li::after { display: none; }
.plan-liste a {
  font-family: var(--titre);
  font-size: 1.15rem;
  text-decoration: none;
}
.plan-liste p {
  font-size: 0.93rem;
  color: var(--prune-doux);
  margin: 0.4rem 0 0;
}

.centre-page {
  text-align: center;
  padding-top: calc(var(--hauteur-rampe) + 5rem);
  padding-bottom: 5rem;
}
.centre-page p { margin-left: auto; margin-right: auto; }
.centre-page .duo-boutons { justify-content: center; }
.grand-chiffre {
  font-family: var(--mesure-police);
  font-size: 4.4rem;
  font-weight: 500;
  color: var(--bleu);
  display: block;
  line-height: 1;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   21. Animations au defilement
   -------------------------------------------------------------------------- */

.leve {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--douce), transform 620ms var(--douce);
}
.leve.est-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   22. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero__grille,
  .duo-terrain,
  .contact__grille { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc-auteur { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 220px; }
}

@media (max-width: 900px) {
  .rampe__ancres { display: none; }
  .rampe__action { display: none; }
  .rampe__bascule { display: inline-flex; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  .bande--satin,
  .bande--vin,
  .bande--blanche { padding: 3.6rem 0; }
  .marche { grid-template-columns: 60px minmax(0, 1fr); }
  .marche::before { font-size: 1.35rem; }
  .marche__delai { grid-column: 2; }
  .bandeau-matiere { height: 190px; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .pied__colonnes { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: calc(var(--hauteur-rampe) + 2.6rem); }
  .formule__prix { font-size: 2.2rem; }
  .compte__valeur { font-size: 2rem; }
  .grand-chiffre { font-size: 3.2rem; }
  .duo-boutons .bouton { width: 100%; }
}

@media print {
  .rampe, .rampe__panneau, .duo-boutons, .brief { display: none; }
  body { background: #ffffff; }
}

/* --------------------------------------------------------------------------
   23. Mouvement reduit : le morphing est neutralise,
       seule la couleur change encore.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .picto path,
  .rampe__picto path,
  .question__signe path {
    transition: stroke 200ms linear, fill 200ms linear;
  }
  .leve { opacity: 1; transform: none; }
}
/* ==========================================================================
   24. Le Cahier de densite, section magazine
   Meme palette, memes polices, meme grille de bandes pleine largeur,
   meme encoche de raie, meme motif de lignes de balayage et meme morphing
   de pictogramme que le reste de Menovolia. Section ajoutee a la fin du
   fichier: aucune regle precedente n est touchee.
   ========================================================================== */

/* --------------------------------------------------------------------------
   24.1 Reperes de mesure du magazine, en Fira Code
   -------------------------------------------------------------------------- */

.cahier-jalons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.7rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
  font-family: var(--mesure-police);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--prune-doux);
  font-variant-numeric: tabular-nums;
}
.cahier-jalons > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding-left: 1.25rem;
}
/* puce de raie: deux traits horizontaux et un trait vertical court */
.cahier-jalons > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  margin-top: -2px;
  background: var(--liedevin);
  box-shadow: 0 4px 0 0 var(--liedevin);
}
.cahier-jalons > span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 2px;
  height: 11px;
  margin-top: -6px;
  background: var(--bleu);
}
.cahier-jalons time,
.cahier-jalons b {
  font-family: var(--mesure-police);
  font-weight: 500;
  color: var(--bleu);
}

/* pictogramme de carte, meme morphing que les pictogrammes de la rampe */
.cahier-picto {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--bleu);
}
.cahier-picto path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: d 320ms var(--douce), stroke 320ms var(--douce);
}

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

.cahier-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cahier-grille > li { display: flex; }
.cahier-grille--trois { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.cahier-carte {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 240ms var(--douce), transform 240ms var(--douce);
}
.cahier-carte:hover,
.cahier-carte:focus-within {
  border-color: var(--liedevin);
  transform: translateY(-2px);
}

.cahier-carte__vue {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--filet);
  background: var(--liedevin-clair);
}
.cahier-carte__vue img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center 40%;
}
/* le tiers bas de la photo est raccorde au motif de la page */
.cahier-carte__vue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: var(--balayage-blanc);
  pointer-events: none;
}

.cahier-carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.6rem 1.4rem 1.4rem;
}
/* l encoche de raie du bord superieur s allonge au survol de la carte entiere */
.cahier-carte:hover .cahier-carte__corps.encoche::before,
.cahier-carte:focus-within .cahier-carte__corps.encoche::before { height: 14px; }

.cahier-carte__reperes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  max-width: none;
}
.cahier-carte__rang {
  font-family: var(--mesure-police);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prune-doux);
  font-variant-numeric: tabular-nums;
}
.cahier-carte__titre {
  font-size: 1.24rem;
  line-height: 1.24;
  margin: 0 0 0.7rem;
}
.cahier-carte__titre a {
  color: var(--prune);
  text-decoration: none;
  background-image: linear-gradient(var(--liedevin), var(--liedevin));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 260ms var(--douce), color 200ms var(--douce);
}
.cahier-carte__titre a:hover,
.cahier-carte__titre a:focus-visible {
  color: var(--bleu);
  background-size: 100% 1px;
}
.cahier-carte__extrait {
  font-size: 0.98rem;
  color: var(--prune-doux);
  margin: 0 0 1.2rem;
  max-width: none;
}
.cahier-carte__jalons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: auto 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
  max-width: none;
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prune-doux);
  font-variant-numeric: tabular-nums;
}
.cahier-carte__jalons time { color: var(--bleu); }

/* --------------------------------------------------------------------------
   24.3 Entete d article: fil d Ariane, angle, dates et temps de lecture
   -------------------------------------------------------------------------- */

.cahier-entete .fil { margin-bottom: 1.4rem; }
.cahier-entete h1 { margin-bottom: 1rem; max-width: 20ch; }
.cahier-entete .etiquette { margin-bottom: 1.2rem; }

/* chapeau en exergue typographique */
.cahier-exergue {
  font-size: 1.18rem;
  line-height: 1.66;
  color: var(--prune);
  max-width: 62ch;
  margin: 0;
  padding: 1.4rem 0 1.4rem 1.6rem;
  border-left: 2px solid var(--liedevin);
  position: relative;
}
.cahier-exergue::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 12px;
  background: var(--bleu);
}

/* image a la une, pleine largeur de la mesure */
.cahier-vue {
  margin: 0 0 2.6rem;
  border: 1px solid var(--filet);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--surface);
}
.cahier-vue img {
  width: 100%;
  height: auto;
  display: block;
}
.cahier-vue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33%;
  background: var(--balayage-blanc);
  pointer-events: none;
}
.cahier-legende {
  margin: 0.8rem 0 0;
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--prune-doux);
  max-width: none;
}

/* --------------------------------------------------------------------------
   24.4 Corps d article: balises nues, aucune classe dans le texte redactionnel
   Le corps verse par l assembleur ne porte ni class, ni style, ni id.
   Tout ce qui suit met donc en forme des balises brutes, descendantes du
   conteneur de corps, avec la forme signature du projet.
   -------------------------------------------------------------------------- */

.cahier-corps {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--prune);
}
.cahier-corps > *:first-child { margin-top: 0; }
.cahier-corps > *:last-child { margin-bottom: 0; }

.cahier-corps p {
  margin: 0 0 1.25em;
  max-width: none;
}

.cahier-corps h2 {
  font-size: 2.1rem;
  margin: 3.2rem 0 1rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--filet);
  position: relative;
}
.cahier-corps h2::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: -1px;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
}
.cahier-corps h2::after {
  content: "";
  position: absolute;
  left: calc(var(--raie) + 0.5px);
  top: 9px;
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, rgba(142, 58, 84, 0.5), rgba(142, 58, 84, 0));
}

/* le premier intertitre du corps suit deja le filet de l entete, sans doublon */
.cahier-corps > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.cahier-corps > h2:first-child::before,
.cahier-corps > h2:first-child::after { display: none; }

.cahier-corps h3 {
  font-size: 1.35rem;
  margin: 2.3rem 0 0.7rem;
  padding-left: 1.7rem;
  position: relative;
}
.cahier-corps h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 1px;
  background: var(--liedevin);
  box-shadow: 0 4px 0 0 var(--liedevin);
}
.cahier-corps h3::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.5em - 4px);
  width: 2px;
  height: 13px;
  background: var(--bleu);
}

.cahier-corps strong { font-weight: 700; color: var(--prune); }
.cahier-corps em { font-style: italic; }

.cahier-corps a {
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: rgba(142, 58, 84, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 200ms var(--douce), text-decoration-color 200ms var(--douce);
}
.cahier-corps a:hover,
.cahier-corps a:focus-visible {
  color: var(--bleu-sombre);
  text-decoration-color: var(--bleu);
}

/* listes a puces: la puce reprend l encoche de raie */
.cahier-corps ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.cahier-corps ul li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.7rem;
}
.cahier-corps ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 13px;
  height: 1px;
  background: var(--liedevin);
  box-shadow: 0 4px 0 0 var(--liedevin);
}
.cahier-corps ul li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: calc(0.62em - 4px);
  width: 2px;
  height: 13px;
  background: var(--bleu);
}

/* listes numerotees: le numero est une mesure, donc en Fira Code */
.cahier-corps ol {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  counter-reset: cahier-etape;
}
.cahier-corps ol li {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 0.7rem;
  counter-increment: cahier-etape;
}
.cahier-corps ol li::before {
  content: counter(cahier-etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--mesure-police);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--bleu);
  font-variant-numeric: tabular-nums;
}
.cahier-corps li > ul,
.cahier-corps li > ol { margin: 0.6rem 0 0; }
.cahier-corps li p { margin-bottom: 0.6rem; }

/* tableau recapitulatif, calque sur le carnet de formule du salon */
.cahier-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.2rem 0;
  background: var(--surface);
  border: 1px solid var(--filet);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}
.cahier-corps thead { background: var(--liedevin-clair); }
.cahier-corps th {
  text-align: left;
  padding: 0.85rem 0.95rem;
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--prune);
  border-bottom: 1px solid var(--filet);
  vertical-align: bottom;
}
.cahier-corps td {
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
  color: var(--prune);
}
.cahier-corps tbody tr:nth-child(even) { background: var(--satin); }
.cahier-corps tbody tr:last-child td { border-bottom: 0; }
.cahier-corps tbody th {
  font-family: var(--courant);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--filet);
}

/* encadre: meme traitement que les encarts des pages interieures */
.cahier-corps aside {
  background: var(--liedevin-clair);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 1.6rem 1.5rem;
  margin: 2.2rem 0;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
}
.cahier-corps aside::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
  z-index: 1;
}
.cahier-corps aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--balayage);
  opacity: 0.6;
  pointer-events: none;
}
.cahier-corps aside > * { position: relative; z-index: 1; }
.cahier-corps aside p:last-child { margin-bottom: 0; }
.cahier-corps aside ul { margin-bottom: 0; }

/* citation: l italique de PT Serif est reservee aux temoignages */
.cahier-corps blockquote {
  margin: 2.2rem 0;
  padding: 1.5rem 1.5rem 1.5rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-left: 2px solid var(--liedevin);
  border-radius: 0 4px 4px 0;
  position: relative;
}
.cahier-corps blockquote::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 14px;
  background: var(--bleu);
}
.cahier-corps blockquote p {
  font-style: italic;
  font-size: 1.04rem;
  color: var(--prune);
}
.cahier-corps blockquote p:last-child { margin-bottom: 0; }

.cahier-corps figure {
  margin: 2.2rem 0;
  border: 1px solid var(--filet);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.cahier-corps figure img { width: 100%; height: auto; }
.cahier-corps figcaption {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--filet);
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prune-doux);
}

/* tableaux, encadres, citations et figures debordent legerement la mesure
   de lecture, de facon symetrique, pour rester lisibles a soixante huit signes */
@media (min-width: 820px) {
  .cahier-corps > table,
  .cahier-corps > aside,
  .cahier-corps > blockquote,
  .cahier-corps > figure {
    width: calc(100% + 5rem);
    margin-left: -2.5rem;
    margin-right: -2.5rem;
  }
}

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

.cahier-appel {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 2.2rem 1.9rem 1.9rem;
  position: relative;
  overflow: hidden;
}
.cahier-appel__voile {
  position: absolute;
  inset: 0;
  background: var(--balayage);
  opacity: 0.5;
  pointer-events: none;
}
.cahier-appel > *:not(.cahier-appel__voile) { position: relative; z-index: 1; }
.cahier-appel__titre {
  font-family: var(--titre);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--prune);
  margin: 0 0 0.8rem;
  max-width: none;
}
.cahier-appel p { color: var(--prune-doux); }
.cahier-appel .bouton { margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   24.6 Encart auteur
   -------------------------------------------------------------------------- */

.cahier-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 1.8rem 1.6rem;
  position: relative;
}
.cahier-auteur::before {
  content: "";
  position: absolute;
  left: var(--raie);
  top: 0;
  width: 2px;
  height: 10px;
  background: var(--liedevin);
}
.cahier-auteur img {
  width: 96px;
  height: 96px;
  border-radius: 6px;
  border: 1px solid var(--filet);
  object-fit: cover;
}
.cahier-auteur__nom {
  font-family: var(--titre);
  font-size: 1.2rem;
  color: var(--prune);
  margin: 0 0 0.2rem;
  max-width: none;
}
.cahier-auteur__role {
  display: block;
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 0.9rem;
}
.cahier-auteur p { font-size: 0.98rem; color: var(--prune-doux); }

/* --------------------------------------------------------------------------
   24.7 Bloc A lire aussi
   -------------------------------------------------------------------------- */

.cahier-aussi__mur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}
.cahier-aussi-carte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 240ms var(--douce), transform 240ms var(--douce);
}
.cahier-aussi-carte:hover,
.cahier-aussi-carte:focus-within {
  border-color: var(--liedevin);
  transform: translateY(-2px);
}
.cahier-aussi-carte__vue {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--filet);
}
.cahier-aussi-carte__vue img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center 40%;
}
.cahier-aussi-carte__vue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: var(--balayage-blanc);
  pointer-events: none;
}
.cahier-aussi-carte__corps { padding: 1.3rem 1.2rem 1.2rem; }
.cahier-aussi-carte__titre {
  font-family: var(--titre);
  font-size: 1.06rem;
  line-height: 1.24;
  margin: 0 0 0.5rem;
  max-width: none;
}
.cahier-aussi-carte__titre a {
  color: var(--prune);
  text-decoration: none;
}
.cahier-aussi-carte__titre a:hover,
.cahier-aussi-carte__titre a:focus-visible {
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: var(--liedevin);
}
.cahier-aussi-carte__accroche {
  font-size: 0.92rem;
  color: var(--prune-doux);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   24.8 Titre de bloc du magazine, quand la hierarchie h2 et h3 est reservee
        au corps redactionnel
   -------------------------------------------------------------------------- */

.cahier-titre-bloc {
  font-family: var(--titre);
  font-size: 1.7rem;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--prune);
  margin: 0 0 0.6rem;
  max-width: none;
}
.cahier-intro {
  color: var(--prune-doux);
  max-width: 62ch;
  margin: 0 0 2.4rem;
}
.pied h4 {
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.18;
  color: var(--prune);
  margin: 0 0 1rem;
}

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

.cahier-derniers__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 2.6rem;
}
.cahier-derniers__tete > div { max-width: 700px; }
.cahier-derniers__suite { margin: 2.6rem 0 0; }

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

.cahier-sommaire {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cahier-sommaire li {
  position: relative;
  padding: 1rem 0 1rem 1.9rem;
  border-bottom: 1px solid var(--filet);
  max-width: none;
}
.cahier-sommaire li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 13px;
  height: 1px;
  background: var(--liedevin);
  box-shadow: 0 4px 0 0 var(--liedevin);
}
.cahier-sommaire li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: calc(1.5em - 4px);
  width: 2px;
  height: 13px;
  background: var(--bleu);
}
.cahier-sommaire a {
  font-family: var(--titre);
  font-size: 1.12rem;
  color: var(--prune);
  text-decoration: none;
}
.cahier-sommaire a:hover,
.cahier-sommaire a:focus-visible {
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: var(--liedevin);
}
.cahier-sommaire__reperes {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mesure-police);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--prune-doux);
  font-variant-numeric: tabular-nums;
}
.cahier-sommaire__reperes time { color: var(--bleu); }

/* --------------------------------------------------------------------------
   24.11 Adaptations du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .rampe__ancres { gap: 0.95rem; }
}

@media (max-width: 900px) {
  .cahier-entete h1 { max-width: none; }
  .cahier-corps h2 { font-size: 1.7rem; }
  .cahier-appel__titre { font-size: 1.4rem; }
  .cahier-titre-bloc { font-size: 1.45rem; }
}

@media (max-width: 620px) {
  .cahier-exergue { font-size: 1.08rem; padding-left: 1.1rem; }
  .cahier-auteur { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .cahier-corps table { display: block; overflow-x: auto; }
  .cahier-carte__vue img { height: 170px; }
  .cahier-appel { padding: 1.8rem 1.3rem 1.4rem; }
}

/* --------------------------------------------------------------------------
   24.12 Mouvement reduit: le morphing des pictogrammes de carte est neutralise,
         seule la couleur change encore.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cahier-picto path { transition: stroke 200ms linear, fill 200ms linear; }
  .cahier-carte:hover,
  .cahier-aussi-carte:hover { transform: none; }
}

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}