/* Teintelle, feuille unique de l atelier.
   Vocabulaire de classes: paillasse, pile, strate, dossier, onglet, coupon,
   reglure, bain, recette, formule, comptoir, carnet.
   Mode clair integral, aucune variante sombre. */

/* ------------------------------------------------------------------
   1. Variables de paillasse
------------------------------------------------------------------ */
:root {
  --papier: #FBF9F1;
  --buvard: #F1EEE0;
  --coupon: #FFFFFF;
  --encre: #1F2740;
  --encre-delave: #565F79;
  --bain: #596E12;
  --bain-fonce: #46570D;
  --bain-pose: #FBF9F1;
  --encre-douce: #3C5A8C;
  --bordure: #DAD5C1;

  --ombre-courte: 3px 3px 0 rgba(31, 39, 64, 0.18);
  --ombre-posee: 1px 1px 0 rgba(31, 39, 64, 0.22);

  --titre: "Lexend", "Trebuchet MS", "Segoe UI", sans-serif;
  --courant: "Domine", Georgia, "Times New Roman", serif;
  --mesure: "Space Mono", "Courier New", monospace;

  --decalage: 24px;
  --escalier: 18px;
  --entete-h: 68px;

  --reglure-force: 1;
  --reglure-h: repeating-linear-gradient(to bottom, rgba(218, 213, 193, 0.85) 0 1px, transparent 1px 32px);
  --reglure-v: repeating-linear-gradient(to right, rgba(218, 213, 193, 0.85) 0 1px, transparent 1px 6px, rgba(218, 213, 193, 0.85) 6px 7px, transparent 7px 168px);
  --reglure-report: repeating-linear-gradient(to right, rgba(89, 110, 18, 0.18) 0 1px, transparent 1px 504px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--entete-h);
  background-color: var(--papier);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.06rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-transform: none;
}

h1 { font-size: 3.1rem; font-weight: 600; }
h2 { font-size: 2.1rem; font-weight: 600; }
h3 { font-size: 1.32rem; font-weight: 500; }
h4 { font-size: 1.08rem; font-weight: 500; }

p { margin: 0 0 1.05em; max-width: 66ch; }

a { color: var(--encre-douce); text-underline-offset: 3px; }
a:hover { color: var(--bain-fonce); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 700; }

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

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--titre);
  padding: 12px 20px;
  z-index: 90;
}
.saut-contenu:focus {
  left: 12px;
  top: 12px;
}

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

/* ------------------------------------------------------------------
   2. Motif de registre comptable
------------------------------------------------------------------ */
.reglure { position: relative; z-index: 0; }
.reglure > * { position: relative; z-index: 1; }
.reglure::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--reglure-h), var(--reglure-v), var(--reglure-report);
  opacity: var(--reglure-force);
  pointer-events: none;
  z-index: 0;
}
.reglure--douce { --reglure-force: 0.4; }
.reglure--sourde { --reglure-force: 0.22; }

.filet-double {
  background-image:
    linear-gradient(var(--encre), var(--encre)),
    linear-gradient(var(--bain), var(--bain));
  background-size: 100% 2px, 100% 1px;
  background-position: bottom 3px left 0, bottom 0 left 0;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------
   3. En tete et navigation
------------------------------------------------------------------ */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--entete-h);
  background: rgba(251, 249, 241, 0.94);
  backdrop-filter: blur(6px);
  z-index: 60;
  transition: height 220ms ease, box-shadow 220ms ease;
}
.entete.entete--posee {
  height: 58px;
  box-shadow: 0 3px 0 rgba(31, 39, 64, 0.1);
}
.entete__rail {
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.24rem;
  color: var(--encre);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.marque__temoin { width: 28px; height: 28px; flex: 0 0 28px; }
.marque__goutte {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bain);
  margin-left: 2px;
  align-self: flex-end;
  margin-bottom: 7px;
}

.echeveau {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.echeveau a {
  position: relative;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--encre);
  text-decoration: none;
  padding: 6px 2px;
  display: inline-block;
}
.echeveau a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--bain);
  transition: width 240ms ease;
}
.echeveau a:hover::after,
.echeveau a:focus-visible::after { width: 100%; }
.echeveau a[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 44px;
  height: 4px;
  background: var(--bain);
}

.bascule-panneau {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--encre);
  color: var(--encre);
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 12px;
  cursor: pointer;
}

.panneau {
  position: fixed;
  inset: 0;
  background: var(--papier);
  z-index: 80;
  padding: 24px clamp(16px, 6vw, 44px) 40px;
  overflow-y: auto;
}
.panneau[hidden] { display: none; }
.panneau__barre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.panneau__fermer {
  background: none;
  border: 1px solid var(--encre);
  color: var(--encre);
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 9px 14px;
  cursor: pointer;
}
.panneau ul { list-style: none; margin: 0; padding: 0; }
.panneau li { border-bottom: 1px solid var(--bordure); }
.panneau a {
  display: block;
  padding: 16px 0;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--encre);
  text-decoration: none;
}
.panneau a:hover { color: var(--bain-fonce); }

/* ------------------------------------------------------------------
   4. Pile de dossiers decales
------------------------------------------------------------------ */
.pile {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(10px, 1.6vw, 22px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px) 0;
  align-items: start;
}

.strate {
  grid-column: 1 / -1;
  position: relative;
  padding: clamp(44px, 5vw, 72px) clamp(20px, 3.2vw, 46px);
  background: var(--papier);
  border: 1px solid var(--bordure);
  scroll-margin-top: 92px;
}
.strate + .strate { margin-top: calc(var(--decalage) * -1); }

.strate--pleine { grid-column: 1 / -1; z-index: 2; }
.strate--c2 { grid-column: 2 / -1; z-index: 3; }
.strate--c3 { grid-column: 3 / -1; z-index: 4; }
.strate--c1 { grid-column: 1 / 12; z-index: 5; }
.strate--c2b { grid-column: 2 / -1; z-index: 6; }
.strate--c3b { grid-column: 3 / -1; z-index: 7; }
.strate--c2c { grid-column: 2 / 13; z-index: 8; }
.strate--base { grid-column: 1 / -1; z-index: 9; }
.strate--socle { grid-column: 1 / -1; z-index: 10; }

.strate--buvard { background: var(--buvard); }
.strate--blanche { background: var(--coupon); }

.strate__onglet {
  position: absolute;
  top: -1px;
  left: clamp(20px, 3.2vw, 46px);
  width: 152px;
  height: 10px;
  background: var(--bain);
}

.surtitre {
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bain-fonce);
  margin: 0 0 14px;
  display: block;
}

.chapo {
  font-size: 1.18rem;
  color: var(--encre-delave);
  max-width: 62ch;
}
.chapo .amorce {
  font-family: var(--titre);
  font-weight: 500;
  color: var(--encre);
}

/* ------------------------------------------------------------------
   5. Boutons
------------------------------------------------------------------ */
.bouton {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 15px 26px;
  cursor: pointer;
  border: 0;
  transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease;
}
.bouton--bain {
  color: var(--bain-pose);
  background-image: linear-gradient(225deg, transparent 0 10px, var(--bain) 10px);
  filter: drop-shadow(3px 3px 0 rgba(31, 39, 64, 0.28));
}
.bouton--bain:hover {
  color: var(--bain-pose);
  transform: translateY(2px);
  filter: drop-shadow(1px 1px 0 rgba(31, 39, 64, 0.28));
  background-image: linear-gradient(225deg, transparent 0 10px, var(--bain-fonce) 10px);
}
.bouton--filet {
  color: var(--encre);
  background: transparent;
  background-image:
    linear-gradient(var(--encre), var(--encre)),
    linear-gradient(var(--bordure), var(--bordure));
  background-size: 100% 2px, 100% 1px;
  background-position: bottom 3px left 0, bottom 0 left 0;
  background-repeat: no-repeat;
  padding-left: 4px;
  padding-right: 4px;
}
.bouton--filet:hover {
  color: var(--bain-fonce);
  background-image:
    linear-gradient(var(--bain), var(--bain)),
    linear-gradient(var(--bain), var(--bain));
}

.rangee-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 30px;
}

/* ------------------------------------------------------------------
   6. Cuve, le premier ecran
------------------------------------------------------------------ */
.cuve {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(10px, 1.6vw, 22px);
  row-gap: 34px;
  align-items: center;
}
.cuve__parole { grid-column: 1 / 8; }
.cuve__image { grid-column: 8 / -1; }

.cuve h1 { margin-bottom: 0.4em; }

.jauge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.jauge li {
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  border: 1px solid var(--bordure);
  background: var(--coupon);
  margin: 0;
}
.jauge li::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  vertical-align: baseline;
}
.jauge .etat--oui::before { background: var(--bain); }
.jauge .etat--essai::before { background: linear-gradient(to top, var(--bain) 50%, transparent 50%); border: 1px solid var(--bain); }
.jauge .etat--non::before { border: 1px solid var(--encre); }

.reassurance {
  margin-top: 30px;
  padding: 16px 18px;
  border: 1px solid var(--bordure);
  background: var(--coupon);
  max-width: 46ch;
}
.reassurance__valeur {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--bain-fonce);
  display: block;
}
.reassurance p { font-size: 0.94rem; margin: 4px 0 0; color: var(--encre-delave); }

/* ------------------------------------------------------------------
   7. Coupons photographiques
------------------------------------------------------------------ */
.coupon-photo {
  background: var(--coupon);
  padding: 10px;
  border: 1px solid var(--bordure);
  box-shadow: 3px 3px 0 rgba(31, 39, 64, 0.16);
  margin: 0;
}
.coupon-photo img {
  border: 1px solid var(--bordure);
  filter: saturate(0.96) sepia(0.06);
}
.coupon-photo--bain { position: relative; }
.coupon-photo--bain::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 26%;
  background: linear-gradient(to top, rgba(89, 110, 18, 0.12), transparent);
  pointer-events: none;
}
.coupon-photo figcaption {
  font-family: var(--mesure);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--encre-delave);
  padding: 10px 2px 2px;
}

/* ------------------------------------------------------------------
   8. Dossiers, cartes a onglet
------------------------------------------------------------------ */
.dossier {
  position: relative;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  padding: 30px 24px 28px;
  margin: 0;
}
.dossier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.dossier::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 12px;
  height: 6px;
  background-image:
    linear-gradient(var(--encre), var(--encre)),
    linear-gradient(var(--bain), var(--bain));
  background-size: 100% 2px, 100% 1px;
  background-position: top 0 left 0, bottom 0 left 0;
  background-repeat: no-repeat;
}
.dossier h3 { margin-top: 14px; }
.dossier p:last-of-type { margin-bottom: 22px; }

.dossier__cote {
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--encre-delave);
}

/* ------------------------------------------------------------------
   9. Croyances, le probleme
------------------------------------------------------------------ */
.croyances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px;
  margin-top: 34px;
  list-style: none;
  padding: 0;
}
.croyances li {
  margin: 0;
  padding: 20px 20px 22px;
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bain);
}
.croyances b {
  display: block;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.06rem;
  margin-bottom: 6px;
}
.croyances span {
  display: block;
  font-size: 0.96rem;
  color: var(--encre-delave);
}
.croyances .cout {
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bain-fonce);
  margin-top: 10px;
  display: block;
}

/* ------------------------------------------------------------------
   10. Marches du protocole
------------------------------------------------------------------ */
.protocole {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
  margin-top: 32px;
}
.marches { list-style: none; margin: 0; padding: 0; counter-reset: marche; }
.marche {
  position: relative;
  padding: 0 0 26px 62px;
  margin: 0;
  border-left: 1px solid var(--bordure);
  margin-left: 20px;
}
.marche:last-child { border-left-color: transparent; padding-bottom: 0; }
.marche::before {
  counter-increment: marche;
  content: "0" counter(marche);
  position: absolute;
  left: -20px;
  top: -2px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--bain-pose);
  background: var(--bain);
}
.marche h3 { margin-bottom: 6px; }
.marche p { font-size: 0.99rem; color: var(--encre-delave); margin-bottom: 0; }

/* ------------------------------------------------------------------
   11. Recettes, les fonctionnalites en escalier
------------------------------------------------------------------ */
.recettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 36px;
  align-items: start;
}
.recettes .dossier:nth-child(3n + 2) { margin-top: var(--escalier); }
.recettes .dossier:nth-child(3n + 3) { margin-top: calc(var(--escalier) * 2); }
.recettes .dossier p { font-size: 0.99rem; color: var(--encre-delave); }

/* ------------------------------------------------------------------
   12. Gains
------------------------------------------------------------------ */
.gains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
  gap: 20px;
  margin-top: 34px;
  list-style: none;
  padding: 0;
}
.gains li {
  margin: 0;
  padding: 22px 20px;
  background: var(--coupon);
  border: 1px solid var(--bordure);
}
.gains .gain__chiffre {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--bain-fonce);
  display: block;
  line-height: 1.1;
}
.gains .gain__titre {
  display: block;
  font-family: var(--titre);
  font-weight: 500;
  margin: 8px 0 6px;
}
.gains p { font-size: 0.95rem; color: var(--encre-delave); margin: 0; }

/* ------------------------------------------------------------------
   13. Preuve, temoignages et mesures
------------------------------------------------------------------ */
.temoignages { margin-top: 36px; }
.temoin {
  position: relative;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  padding: 30px 26px 26px;
  margin: 0 0 32px;
  max-width: 780px;
}
.temoin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.temoin:nth-child(2) { margin-left: 32px; }
.temoin:nth-child(3) { margin-left: 64px; }
.temoin:nth-child(4) { margin-left: 96px; }
.temoin blockquote {
  margin: 12px 0 18px;
  font-size: 1.06rem;
}
.temoin blockquote p:last-child { margin-bottom: 0; }
.temoin figcaption {
  font-family: var(--mesure);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--encre-delave);
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
}
.temoin figcaption b { color: var(--encre); font-weight: 700; }

.mesures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--bordure);
  border: 1px solid var(--bordure);
  margin-top: 40px;
}
.mesure {
  background: var(--papier);
  padding: 22px 18px;
}
.mesure__valeur {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 1.72rem;
  color: var(--bain-fonce);
  display: block;
  line-height: 1.1;
}
.mesure__libelle {
  display: block;
  font-size: 0.9rem;
  color: var(--encre-delave);
  margin-top: 6px;
}

/* ------------------------------------------------------------------
   14. Tarifs
------------------------------------------------------------------ */
.grille-tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 24px;
  margin-top: 38px;
  align-items: start;
}
.formule {
  position: relative;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
}
.formule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.formule--phare {
  margin-top: -20px;
  border: 2px solid var(--encre);
  background: var(--papier);
}
.formule--phare::before { width: 100%; }
.formule__nom { margin: 14px 0 4px; }
.formule__prix {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--encre);
  line-height: 1;
  display: block;
  margin-top: 10px;
}
.formule__unite {
  font-family: var(--mesure);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--encre-delave);
  display: block;
  margin: 6px 0 16px;
}
.formule__cible {
  font-size: 0.96rem;
  color: var(--encre-delave);
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
}
.formule__inclus {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.formule__inclus li {
  position: relative;
  padding-left: 22px;
  font-size: 0.96rem;
  margin-bottom: 10px;
}
.formule__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 3px;
  background: var(--bain);
}
.mention-tarif {
  font-family: var(--mesure);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--encre-delave);
  margin-top: 26px;
}

/* ------------------------------------------------------------------
   15. Comptoir, la FAQ
------------------------------------------------------------------ */
.comptoir { margin-top: 34px; max-width: 860px; }
.question {
  position: relative;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  margin-bottom: 14px;
  padding: 0 22px;
}
.question::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.question > summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 26px 34px 20px 0;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.1rem;
  position: relative;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 32px;
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--bain);
  border-bottom: 2px solid var(--bain);
  transform: rotate(45deg);
  transition: transform 220ms ease;
}
.question[open] > summary::after { transform: rotate(-135deg); }
.question__reponse {
  padding: 0 0 22px;
  border-top: 1px solid var(--bordure);
  margin-top: 4px;
}
.question__reponse p { margin: 16px 0 0; font-size: 0.99rem; color: var(--encre-delave); }

/* ------------------------------------------------------------------
   16. Contact et formulaire
------------------------------------------------------------------ */
.atelier-contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(26px, 3.4vw, 52px);
  margin-top: 34px;
  align-items: start;
}
.formulaire {
  background: var(--coupon);
  border: 1px solid var(--bordure);
  padding: 30px 26px 32px;
  position: relative;
}
.formulaire::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 7px;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-bottom: 2px solid var(--encre);
  padding: 11px 12px;
}
.champ textarea { resize: vertical; line-height: 1.6; }
.champ select { cursor: pointer; }
.champ--accord {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
}
.champ--accord input { margin-top: 6px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--bain); }
.champ--accord label {
  font-family: var(--courant);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--encre-delave);
  margin-bottom: 0;
}
.apres-formulaire {
  font-size: 0.92rem;
  color: var(--encre-delave);
  margin-top: 18px;
}

.contact__aide li {
  font-size: 0.98rem;
  color: var(--encre-delave);
}

/* ------------------------------------------------------------------
   17. Pied de page, le carnet
------------------------------------------------------------------ */
.carnet {
  background: var(--buvard);
  border-top: 2px solid var(--encre);
  margin-top: 74px;
  padding: 58px 0 0;
}
.carnet__rail {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 34px;
}
.carnet h2, .carnet h3 {
  font-size: 0.82rem;
  font-family: var(--mesure);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bain-fonce);
  margin-bottom: 16px;
}
.carnet ul { list-style: none; padding: 0; margin: 0; }
.carnet li { margin-bottom: 9px; }
.carnet a { color: var(--encre); text-decoration: none; font-size: 0.95rem; }
.carnet a:hover { color: var(--bain-fonce); text-decoration: underline; }
.carnet p { font-size: 0.94rem; color: var(--encre-delave); }
.carnet__profils {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
}
.carnet__profils a {
  font-family: var(--mesure);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--bordure);
}
.carnet__editeur {
  font-family: var(--mesure);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  line-height: 1.8;
  color: var(--encre-delave);
}
.pied-registre {
  margin-top: 46px;
  border-top: 1px solid var(--bordure);
  background: var(--papier);
}
.pied-registre__rail {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-family: var(--mesure);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--encre-delave);
}
.pied-registre__rail a { color: var(--encre); }

.reseau-atelier {
  max-width: 1240px;
  margin: 34px auto 0;
  padding: 0 clamp(16px, 4vw, 40px) 8px;
}
.reseau-atelier h2 { margin-bottom: 12px; }
.reseau-atelier ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.reseau-atelier a { font-family: var(--mesure); font-size: 0.76rem; }

/* ------------------------------------------------------------------
   18. Pages interieures
------------------------------------------------------------------ */
.feuillet {
  max-width: 1240px;
  margin: 0 auto;
  padding: 54px clamp(16px, 4vw, 40px) 0;
}
.fil {
  font-family: var(--mesure);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--encre-delave);
  margin-bottom: 22px;
}
.fil a { color: var(--encre-douce); }

.feuillet__corps {
  background: var(--coupon);
  border: 1px solid var(--bordure);
  padding: clamp(28px, 4vw, 58px);
  position: relative;
}
.feuillet__corps::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 152px;
  height: 10px;
  background: var(--bain);
}
.feuillet__corps h2 {
  margin-top: 2em;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  font-size: 1.62rem;
}
.feuillet__corps h2:first-of-type { margin-top: 1.4em; }
.feuillet__corps h3 { margin-top: 1.6em; }
.feuillet__corps p, .feuillet__corps li { max-width: 74ch; }

.portrait-auteur {
  float: right;
  margin: 0 0 22px 28px;
  background: var(--coupon);
  padding: 10px;
  border: 1px solid var(--bordure);
  box-shadow: 3px 3px 0 rgba(31, 39, 64, 0.16);
  max-width: 232px;
}
.portrait-auteur img { border: 1px solid var(--bordure); }
.portrait-auteur figcaption {
  font-family: var(--mesure);
  font-size: 0.74rem;
  color: var(--encre-delave);
  padding-top: 9px;
}

.encadre-atelier {
  background: var(--buvard);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bain);
  padding: 22px 24px;
  margin: 30px 0;
}
.encadre-atelier p:last-child { margin-bottom: 0; }

.liste-profils { list-style: none; padding: 0; }
.liste-profils li { margin-bottom: 8px; }

.plan-liste { list-style: none; padding: 0; }
.plan-liste > li {
  border-bottom: 1px solid var(--bordure);
  padding: 16px 0;
}
.plan-liste a { font-family: var(--titre); font-weight: 500; font-size: 1.06rem; }
.plan-liste span { display: block; color: var(--encre-delave); font-size: 0.96rem; }

.page-courte {
  max-width: 780px;
  margin: 0 auto;
  padding: 74px clamp(16px, 4vw, 40px) 0;
  text-align: left;
}
.page-courte .code-etat {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 4.4rem;
  color: var(--bain);
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------
   19. Chute avec amortissement des cartes
------------------------------------------------------------------ */
.chute {
  opacity: 0;
  transform: translateY(-34px);
  filter: drop-shadow(0 0 0 rgba(31, 39, 64, 0));
}
.chute.est-posee {
  animation: chute-amortie 460ms cubic-bezier(0.22, 1.4, 0.36, 1) both;
  animation-delay: var(--retard, 0ms);
}
@keyframes chute-amortie {
  0% { opacity: 0; transform: translateY(-34px); }
  55% { opacity: 1; transform: translateY(6px); }
  78% { transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   20. Adaptations d ecran
------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .cuve__parole { grid-column: 1 / 7; }
  .cuve__image { grid-column: 7 / -1; }
  .carnet__rail { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --decalage: 0px; }
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.64rem; }
  .echeveau, .entete .bouton { display: none; }
  .bascule-panneau { display: inline-flex; }
  .pile { display: block; padding-bottom: 0; }
  .strate {
    margin-left: 8px;
    margin-top: 20px;
    padding: 38px 20px 42px;
  }
  .strate + .strate { margin-top: 20px; }
  .cuve { display: block; }
  .cuve__image { margin-top: 30px; }
  .protocole, .atelier-contact { grid-template-columns: 1fr; }
  .recettes .dossier:nth-child(3n + 2),
  .recettes .dossier:nth-child(3n + 3) { margin-top: 0; }
  .temoin:nth-child(2), .temoin:nth-child(3), .temoin:nth-child(4) { margin-left: 8px; }
  .formule--phare { margin-top: 0; }
  .portrait-auteur { float: none; margin: 0 0 26px; max-width: 100%; }
}

@media (max-width: 620px) {
  body { font-size: 1.02rem; }
  h1 { font-size: 1.98rem; }
  .carnet__rail { grid-template-columns: 1fr; }
  .rangee-boutons { gap: 14px; }
  .rangee-boutons .bouton { width: 100%; text-align: center; }
  .mesures { grid-template-columns: 1fr 1fr; }
  .page-courte .code-etat { font-size: 3.2rem; }
}

@media (scripting: none) {
  .chute { opacity: 1; transform: none; }
}

@media print {
  .entete, .panneau, .bascule-panneau { display: none; }
  body { padding-top: 0; background: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chute { opacity: 0; transform: none; }
  .chute.est-posee {
    animation: apparition-simple 200ms linear both;
    animation-delay: 0ms;
  }
  @keyframes apparition-simple {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .bouton, .entete, .echeveau a::after, .question > summary::after {
    transition: none;
  }
}
/* ==================================================================
   21. Le Registre des bains, section magazine
   Meme papier buvard, meme reglure de registre, meme onglet de dossier
   et meme double filet que le reste du site. Les cartes tombent avec
   la classe .chute deja en place. Vocabulaire ajoute au dictionnaire
   de la feuille: registre, fiche, corps-article, exergue, encart-auteur,
   lire-aussi, carte-liee.
   Le corps des articles est du HTML nu, sans aucune classe: toutes les
   balises y sont donc mises en forme comme descendantes de .corps-article.
================================================================== */

/* ---------------------------------------------- 21.1 Rails de page */
.registre {
  max-width: 1240px;
  margin: 0 auto;
  padding: 54px clamp(16px, 4vw, 40px) 0;
}

.registre__entete {
  position: relative;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 3.2vw, 46px) clamp(30px, 3.4vw, 46px);
  margin-bottom: 36px;
}
.registre__entete::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 152px;
  height: 10px;
  background: var(--bain);
}
.registre__entete h1 { margin-bottom: 0.34em; max-width: 20ch; }
.registre__compte {
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bain-fonce);
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  margin: 24px 0 0;
  max-width: none;
}

/* ---------------------------------------------- 21.2 Grille de fiches */
.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 26px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.grille-articles > * { margin: 0; }
.grille-articles > *:nth-child(3n + 2) { margin-top: var(--escalier); }
.grille-articles > *:nth-child(3n + 3) { margin-top: calc(var(--escalier) * 2); }

.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0 0 26px;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-courte);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.fiche::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
  z-index: 2;
  transition: width 240ms ease;
}
.fiche::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 12px;
  height: 6px;
  background-image:
    linear-gradient(var(--encre), var(--encre)),
    linear-gradient(var(--bain), var(--bain));
  background-size: 100% 2px, 100% 1px;
  background-position: top 0 left 0, bottom 0 left 0;
  background-repeat: no-repeat;
}
.fiche:hover {
  box-shadow: var(--ombre-posee);
  border-color: var(--encre);
}
.fiche:hover::before { width: 100%; }
.fiche:focus-within { border-color: var(--encre); }

.fiche__vue { display: block; border-bottom: 1px solid var(--bordure); }
.fiche__vue img, img.fiche__vue { filter: saturate(0.96) sepia(0.06); }

.fiche__texte {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px clamp(18px, 2vw, 24px) 0;
}
.fiche__angle {
  font-family: var(--mesure);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bain-fonce);
  display: block;
}
.fiche__titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.26;
  letter-spacing: -0.015em;
  margin: 11px 0 12px;
}
.fiche__titre a {
  color: var(--encre);
  text-decoration: none;
  background-image: linear-gradient(var(--bain), var(--bain));
  background-size: 0 2px;
  background-position: left bottom 2px;
  background-repeat: no-repeat;
  transition: background-size 240ms ease;
}
.fiche__titre a:hover,
.fiche__titre a:focus-visible {
  color: var(--bain-fonce);
  background-size: 100% 2px;
}
.fiche__extrait {
  font-size: 0.95rem;
  color: var(--encre-delave);
  margin: 0 0 18px;
  max-width: none;
  flex: 1;
}
.fiche__mesures {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-family: var(--mesure);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--encre-delave);
  max-width: none;
}

/* ------------------------- 21.3 Derniers articles sur la page d accueil */
.derniers-articles { margin-top: 34px; }
.registre__suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
}
.registre__suite p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--encre-delave);
  max-width: 52ch;
}

/* ---------------------------------------------- 21.4 Entete d article */
.article-magazine {
  position: relative;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  padding: clamp(28px, 4vw, 58px);
}
.article-magazine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 152px;
  height: 10px;
  background: var(--bain);
}
.article-magazine h1 {
  font-size: 2.5rem;
  max-width: 22ch;
  margin-bottom: 0.42em;
}

.entete-article { margin-bottom: 30px; }
.mesures-article {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  font-family: var(--mesure);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--encre-delave);
  max-width: none;
}
.mesures-article .angle-article {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bain-fonce);
}

.exergue {
  position: relative;
  background: var(--buvard);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bain);
  padding: 22px 26px;
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--encre);
  max-width: 70ch;
}
.exergue .amorce {
  font-family: var(--titre);
  font-weight: 500;
  color: var(--encre);
}

.une-article { margin: 34px 0 38px; }

/* ---------------------------------------------- 21.5 Corps redactionnel
   Aucune classe n est disponible ici: le corps arrive en HTML semantique nu.
   Mesure de lecture limitee, intertitres a onglet, listes a filet olive,
   tableau en registre a colonnes, encadre et citation au meme vocabulaire. */
.corps-article {
  max-width: 68ch;
  font-size: 1.06rem;
  line-height: 1.72;
}
.corps-article > *:first-child { margin-top: 0; }

.corps-article h2 {
  position: relative;
  font-size: 1.72rem;
  margin: 2.1em 0 0.55em;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 96px;
  height: 4px;
  background: var(--bain);
}
.corps-article h2:first-child { margin-top: 0; }

.corps-article h3 {
  position: relative;
  font-size: 1.28rem;
  margin: 1.8em 0 0.5em;
  padding-left: 24px;
}
.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 13px;
  height: 3px;
  background: var(--bain);
}

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

.corps-article ul,
.corps-article ol {
  list-style: none;
  margin: 0 0 1.3em;
  padding-left: 0;
}
.corps-article li { margin-bottom: 0.55em; }
.corps-article ul li {
  position: relative;
  padding-left: 24px;
}
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 11px;
  height: 3px;
  background: var(--bain);
}
.corps-article ol { counter-reset: etape-bain; }
.corps-article ol li {
  position: relative;
  padding-left: 38px;
  counter-increment: etape-bain;
}
.corps-article ol li::before {
  content: counter(etape-bain, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.06em;
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--bain-fonce);
}
.corps-article li ul,
.corps-article li ol { margin: 0.5em 0 0.2em; }

.corps-article a {
  color: var(--encre-douce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover {
  color: var(--bain-fonce);
  text-decoration-color: var(--bain);
}
.corps-article strong { font-weight: 700; color: var(--encre); }
.corps-article em { font-style: italic; }

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0 32px;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  font-size: 0.95rem;
  line-height: 1.55;
}
.corps-article thead { background: var(--buvard); }
.corps-article th {
  font-family: var(--mesure);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
  text-align: left;
  padding: 13px 14px;
  border-bottom: 2px solid var(--encre);
  vertical-align: bottom;
}
.corps-article td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.corps-article tbody tr:last-child td { border-bottom: 0; }
.corps-article th + th,
.corps-article td + td { border-left: 1px solid var(--bordure); }
.corps-article tbody tr:nth-child(even) { background: rgba(241, 238, 224, 0.55); }
.corps-article tbody th {
  font-family: var(--mesure);
  border-bottom: 1px solid var(--bordure);
  background: transparent;
}

.corps-article blockquote {
  margin: 30px 0;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--bain);
  font-size: 1.09rem;
  color: var(--encre);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  position: relative;
  margin: 34px 0;
  padding: 32px 24px 24px;
  background-color: var(--buvard);
  background-image: repeating-linear-gradient(to bottom, rgba(218, 213, 193, 0.5) 0 1px, transparent 1px 32px);
  border: 1px solid var(--bordure);
}
.corps-article aside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.corps-article aside p:last-child,
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 30px 0;
  padding: 10px;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  box-shadow: 3px 3px 0 rgba(31, 39, 64, 0.16);
}
.corps-article figure img { border: 1px solid var(--bordure); }
.corps-article figcaption {
  font-family: var(--mesure);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--encre-delave);
  padding: 10px 2px 2px;
}

/* ---------------------------------------------- 21.6 Appel et encart auteur */
.appel-article {
  position: relative;
  margin-top: 42px;
  padding: 32px 26px 28px;
  background-color: var(--buvard);
  background-image: repeating-linear-gradient(to bottom, rgba(218, 213, 193, 0.5) 0 1px, transparent 1px 32px);
  border: 1px solid var(--bordure);
}
.appel-article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.appel-article p { max-width: 64ch; }
.appel-article p:last-of-type { margin-bottom: 0; }

.encart-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 40px;
  padding: 32px 26px 26px;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-courte);
}
.encart-auteur::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
}
.encart-auteur img {
  border: 1px solid var(--bordure);
  padding: 3px;
  background: var(--coupon);
}
.encart-auteur__role {
  font-family: var(--mesure);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bain-fonce);
  display: block;
  margin-bottom: 8px;
}
.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.015em;
  color: var(--encre);
  display: block;
  margin-bottom: 10px;
}
.encart-auteur p {
  font-size: 0.97rem;
  color: var(--encre-delave);
  margin-bottom: 0.7em;
  max-width: 62ch;
}
.encart-auteur p:last-child { margin-bottom: 0; }

/* ---------------------------------------------- 21.7 Bloc A lire aussi */
.lire-aussi {
  position: relative;
  margin-top: 46px;
  padding: clamp(30px, 3.4vw, 46px) clamp(20px, 3vw, 38px) clamp(28px, 3vw, 40px);
  background-color: var(--buvard);
  background-image: repeating-linear-gradient(to bottom, rgba(218, 213, 193, 0.5) 0 1px, transparent 1px 32px);
  border: 1px solid var(--bordure);
}
.lire-aussi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 152px;
  height: 10px;
  background: var(--bain);
}
.lire-aussi__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.62rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 0 0 8px;
  max-width: none;
}
.lire-aussi__intro {
  font-size: 0.97rem;
  color: var(--encre-delave);
  margin: 0 0 28px;
}

.cartes-liees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 22px;
  align-items: start;
}
.cartes-liees > *:nth-child(2) { margin-top: var(--escalier); }
.cartes-liees > *:nth-child(3) { margin-top: calc(var(--escalier) * 2); }

.carte-liee {
  position: relative;
  margin: 0;
  padding: 0 0 20px;
  background: var(--coupon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-courte);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.carte-liee::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 10px;
  background: var(--bain);
  z-index: 2;
  transition: width 240ms ease;
}
.carte-liee:hover {
  box-shadow: var(--ombre-posee);
  border-color: var(--encre);
}
.carte-liee:hover::before { width: 100%; }
.carte-liee img {
  border-bottom: 1px solid var(--bordure);
  filter: saturate(0.96) sepia(0.06);
}
.carte-liee__texte { padding: 16px 18px 0; }
.carte-liee__titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 9px;
  max-width: none;
}
.carte-liee__titre a { color: var(--encre); text-decoration: none; }
.carte-liee__titre a:hover,
.carte-liee__titre a:focus-visible { color: var(--bain-fonce); text-decoration: underline; }
.carte-liee__accroche {
  font-size: 0.91rem;
  line-height: 1.62;
  color: var(--encre-delave);
  margin: 0;
  max-width: none;
}

/* ---------------------------------------------- 21.8 Adaptations d ecran */
@media (max-width: 900px) {
  .registre { padding-top: 36px; }
  .article-magazine h1 { font-size: 2.05rem; }
  .grille-articles > *:nth-child(3n + 2),
  .grille-articles > *:nth-child(3n + 3) { margin-top: 0; }
  .cartes-liees > *:nth-child(2),
  .cartes-liees > *:nth-child(3) { margin-top: 0; }
  .corps-article { max-width: none; }
}

@media (max-width: 620px) {
  .article-magazine h1 { font-size: 1.86rem; }
  .corps-article h2 { font-size: 1.44rem; }
  .corps-article h3 { font-size: 1.16rem; }
  .exergue { font-size: 1.08rem; padding: 18px 18px; }
  .encart-auteur { grid-template-columns: 1fr; gap: 18px; }
  .corps-article table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche, .fiche::before, .carte-liee, .carte-liee::before, .fiche__titre a { transition: none; }
}

/* Intitules de colonne du pied de page sur les pages du magazine, ou la
   hierarchie des titres h2 et h3 est reservee au corps redactionnel. */
.carnet .carnet__rubrique {
  font-family: var(--mesure);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bain-fonce);
  margin: 0 0 16px;
  max-width: 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}