/* ==========================================================================
   Curapelle, feuille de style unique.
   Univers: carnet a souche d une praticienne, papier ivoire, encre cuivre,
   tampons apposes a l entree d un service. Mode clair integral.
   Vocabulaire de classes: billet, souche, coupon, perfo, tampon, releve,
   parole, registre, planche, pochette.
   ========================================================================== */

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

:root {
  --papier: #FBF6EE;
  --sable: #F4ECE0;
  --surface: #FFFDF9;
  --prune: #2B2024;
  --taupe: #6B5A56;
  --encre: #9E2E58;
  --encre-sombre: #8A2749;
  --encre-claire: #FFF7F2;
  --patine: #4F7A63;
  --bordure: #E2D6C4;
  --bordure-forte: #CDBCA4;

  --pas: 8px;
  --large: 1200px;
  --etroit: 62ch;

  --titre: "Gloock", "Times New Roman", Georgia, serif;
  --courant: "Vollkorn", Georgia, "Times New Roman", serif;
  --chiffre: "Eczar", Georgia, serif;

  --coin: 3px 12px 3px 3px;
  --ombre-coupon: 0 1px 0 rgba(43, 32, 36, 0.04), 0 10px 26px rgba(43, 32, 36, 0.06);
  --ombre-levee: 0 2px 0 rgba(43, 32, 36, 0.05), 0 18px 38px rgba(43, 32, 36, 0.10);
}

/* 2. Bases -------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  text-size-adjust: 100%;
}

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

h1, h2, h3, h4 { margin: 0 0 0.6em; font-weight: 400; }

h1 {
  font-family: var(--titre);
  font-size: clamp(2.05rem, 5.1vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--titre);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

h3 {
  font-family: var(--courant);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.32;
}

h4 {
  font-family: var(--courant);
  font-size: 1.08rem;
  font-weight: 600;
}

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

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

strong { font-weight: 600; }

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

ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

small, .petit { font-size: 0.875rem; font-weight: 500; }

hr { border: 0; height: 1px; background: var(--bordure); margin: 2.4rem 0; }

::selection { background: rgba(158, 46, 88, 0.16); }

:focus-visible {
  outline: 2px solid var(--encre-claire);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--encre);
  border-radius: 2px;
}

.evitement {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 90;
  background: var(--encre);
  color: var(--encre-claire);
  padding: 10px 18px;
  border-radius: var(--coin);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.evitement:focus { top: 12px; color: var(--encre-claire); }

/* 3. Structure et rythme ------------------------------------------------ */

.cadre {
  width: min(100% - 2.5rem, var(--large));
  margin-inline: auto;
}

.registre {
  position: relative;
  padding: clamp(3.4rem, 7vw, 6rem) 0;
}

.registre--sable { background: var(--sable); }
.registre--surface { background: var(--surface); }

.registre--serre { padding-block: clamp(2.6rem, 4.5vw, 3.6rem); }

.surtitre {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--patine);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.surtitre::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--bordure);
  max-width: 120px;
}

.chapo {
  font-size: 1.16rem;
  color: var(--taupe);
  max-width: 60ch;
}

/* 4. Motif signature: tampons encreurs superposes ------------------------ */

.registre::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 320px;
  height: 320px;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cg transform='rotate(-8 120 120)' stroke='%239E2E58'%3E%3Ccircle cx='94' cy='102' r='54'/%3E%3Ccircle cx='94' cy='102' r='45'/%3E%3C/g%3E%3Cg transform='rotate(5 120 120)' stroke='%234F7A63'%3E%3Ccircle cx='142' cy='128' r='58'/%3E%3Ccircle cx='142' cy='128' r='48'/%3E%3C/g%3E%3Cg transform='rotate(14 120 120)' stroke='%239E2E58'%3E%3Ccircle cx='112' cy='152' r='40'/%3E%3Ccircle cx='112' cy='152' r='32'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.registre--tampon-hd::before { top: -40px; right: -60px; }
.registre--tampon-bg::before { bottom: -50px; left: -70px; }
.registre--tampon-hg::before { top: -60px; left: -50px; width: 260px; height: 260px; }
.registre--sans-tampon::before { display: none; }

.tampon-plein {
  position: absolute;
  inset: auto auto -30px -20px;
  width: 190px;
  height: 190px;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg%3E%3Ccircle cx='88' cy='92' r='56' fill='%239E2E58' opacity='0.55'/%3E%3Ccircle cx='118' cy='116' r='48' fill='%234F7A63' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* 5. Perforations ------------------------------------------------------- */

.perfo {
  height: 5px;
  background-image:
    linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.perfo--filet {
  border-top: 1px solid var(--bordure);
  padding-top: 4px;
}

.perfo-verticale {
  width: 5px;
  background-image:
    linear-gradient(to bottom, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 2px 8px;
  background-repeat: repeat-y;
  background-position: 50% 0;
}

/* Bord perfore applique a toute carte coupon. */
.coupon,
.parole,
.question,
.billet-tarif,
.encart {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  box-shadow: var(--ombre-coupon);
}

.coupon::after,
.parole::after,
.billet-tarif::after,
.encart::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  pointer-events: none;
}

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

.bouton-encre,
.bouton-filet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: var(--coin);
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.bouton-encre {
  background: var(--encre);
  color: var(--encre-claire);
  border: 1px solid var(--encre);
}
.bouton-encre:hover {
  background: var(--encre-sombre);
  border-color: var(--encre-sombre);
  color: var(--encre-claire);
  transform: translateY(-1px);
}
.bouton-encre:focus-visible {
  outline: 2px solid var(--encre-claire);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--encre);
}

.bouton-filet {
  background: transparent;
  color: var(--prune);
  border: 1px solid var(--bordure-forte);
  box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4px var(--bordure-forte);
}
.bouton-filet:hover {
  background: var(--sable);
  color: var(--prune);
  box-shadow: inset 0 0 0 3px var(--sable), inset 0 0 0 4px var(--encre);
}

.bouton-large { width: 100%; }

/* Signature d animation: halo qui pulse autour du bouton principal. */
.halo { position: relative; isolation: isolate; }
.halo::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 6px 16px 6px 6px;
  border: 3px solid var(--encre);
  filter: blur(7px);
  opacity: 0;
  z-index: -1;
  animation: pulsation 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.halo:hover::before { animation: resserrement 0.9s ease-out 1; }
.halo:focus-visible::before {
  animation: none;
  filter: none;
  opacity: 1;
  inset: -5px;
}

@keyframes pulsation {
  0% { transform: scale(1); opacity: 0.35; }
  70% { opacity: 0.08; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes resserrement {
  0% { transform: scale(1.1); opacity: 0.2; }
  55% { transform: scale(0.99); opacity: 0.55; }
  100% { transform: scale(1.04); opacity: 0.18; }
}

/* 7. En tete ------------------------------------------------------------ */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(251, 246, 238, 0.92);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid transparent;
}

.entete.est-defilee {
  border-bottom-color: var(--bordure);
  box-shadow: 0 5px 0 -4px var(--bordure-forte);
}

.entete.est-defilee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  opacity: 0.55;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: min(100% - 2.5rem, var(--large));
  margin-inline: auto;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  font-family: var(--titre);
  font-size: 1.42rem;
  color: var(--prune);
  text-decoration: none;
  letter-spacing: -0.015em;
}
.marque:hover { color: var(--encre-sombre); }
.marque svg { width: 34px; height: 34px; flex: none; }

.ancres {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.ancres li { margin: 0; }
.ancres a {
  font-weight: 500;
  font-size: 0.99rem;
  color: var(--prune);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
}
.ancres a:hover { border-bottom-color: var(--encre); color: var(--encre-sombre); }

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

.declic {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--coin);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.declic span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--prune);
  box-shadow: 0 -6px 0 var(--prune), 0 6px 0 var(--prune);
}

.panneau {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--papier);
  padding: 24px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
.panneau[data-ouvert="oui"] { display: flex; }
.panneau__haut { display: flex; align-items: center; justify-content: space-between; }
.panneau__fermer {
  width: 46px;
  height: 46px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--coin);
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--prune);
  font-family: var(--courant);
}
.panneau ul { list-style: none; padding: 0; margin: 2rem 0 0; }
.panneau li { border-bottom: 1px solid var(--bordure); margin: 0; }
.panneau a {
  display: block;
  padding: 16px 2px;
  font-size: 1.22rem;
  font-family: var(--titre);
  color: var(--prune);
  text-decoration: none;
}
.panneau .bouton-encre { margin-top: 1.8rem; }

body.panneau-ouvert { overflow: hidden; }

/* 8. Hero en billet perfore avec souche ---------------------------------- */

.billet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 8fr) 5px minmax(0, 4fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px 18px 3px 3px;
  box-shadow: var(--ombre-levee);
  overflow: hidden;
}

.billet__corps {
  padding: clamp(2rem, 4.4vw, 3.5rem);
  position: relative;
}

.billet__mention {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--patine);
  margin-bottom: 1rem;
}

.billet__corps h1 { max-width: 17ch; }

.billet__sous-titre {
  font-size: 1.2rem;
  color: var(--taupe);
  max-width: 54ch;
  margin-bottom: 1.9rem;
}

.billet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.billet__souche {
  background: var(--sable);
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.souche__bloc { }
.souche__chiffre {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.05;
  color: var(--encre);
  display: block;
}
.souche__legende {
  font-size: 0.9rem;
  color: var(--taupe);
  margin: 0;
  max-width: none;
}

.souche__cadre {
  border-top: 1px solid var(--bordure-forte);
  padding-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--prune);
}
.souche__cadre strong { display: block; font-family: var(--chiffre); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.76rem; color: var(--patine); margin-bottom: 0.35rem; }

.hero { padding: clamp(2.4rem, 5vw, 4.2rem) 0 clamp(2rem, 4vw, 3.4rem); }

.hero__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.8rem;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--taupe);
}
.hero__pied span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__pied svg { width: 15px; height: 15px; flex: none; color: var(--patine); }

/* 9. Planches photographiques ------------------------------------------- */

.planche {
  position: relative;
  background: var(--papier);
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: 3px 16px 3px 3px;
  box-shadow: var(--ombre-coupon);
}

.planche__masque {
  position: relative;
  overflow: hidden;
  border-radius: 2px 12px 2px 2px;
  outline: 1px solid var(--bordure-forte);
  outline-offset: -1px;
}

.planche__masque img {
  width: 100%;
  filter: saturate(0.85);
  display: block;
}

.planche__masque::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(158, 46, 88, 0.12);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.planche__perfo {
  height: 2px;
  margin-top: 8px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}

.planche__legende {
  margin: 10px 2px 2px;
  font-size: 0.85rem;
  color: var(--taupe);
  max-width: none;
}

/* 10. Duos et grilles ---------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}

.duo--inverse > *:first-child { order: 2; }

.carnet {
  display: grid;
  gap: 1.2rem;
}
.carnet--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carnet--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carnet--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 11. Section probleme avec souche laterale ------------------------------ */

.probleme {
  display: grid;
  grid-template-columns: minmax(0, 7fr) 5px minmax(0, 4fr);
  gap: 0;
  align-items: stretch;
}

.probleme__corps { padding-right: clamp(1.4rem, 3vw, 2.6rem); }

.probleme__souche {
  padding-left: clamp(1.4rem, 3vw, 2.6rem);
}

.rappel {
  border-left: 2px solid var(--patine);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin-bottom: 1.4rem;
}
.rappel h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.rappel p { font-size: 0.92rem; color: var(--taupe); margin: 0; max-width: none; }

.liste-fait { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.liste-fait li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
  max-width: var(--etroit);
}
.liste-fait li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--encre);
  border-radius: 50%;
  box-shadow: 3px 3px 0 -1px rgba(79, 122, 99, 0.55);
}

/* 12. Coupons de methode ------------------------------------------------- */

.coupon {
  padding: 1.5rem 1.5rem 2.1rem;
}

.coupon__numero {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre);
  display: block;
  margin-bottom: 0.7rem;
}

.coupon h3 { margin-bottom: 0.45rem; }
.coupon p { font-size: 0.98rem; color: var(--taupe); max-width: none; }

.coupon--fonction { padding: 1.7rem 1.6rem 2.2rem; }
.coupon--fonction h3 { display: flex; align-items: flex-start; gap: 0.6rem; }
.coupon--fonction svg { width: 22px; height: 22px; flex: none; color: var(--patine); margin-top: 4px; }

/* 13. Avantages ---------------------------------------------------------- */

.gain {
  border-top: 1px solid var(--bordure);
  padding-top: 1.1rem;
}
.gain__mesure {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 2.15rem;
  line-height: 1.05;
  color: var(--encre);
  display: block;
  margin-bottom: 0.4rem;
}
.gain h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.gain p { font-size: 0.95rem; color: var(--taupe); max-width: none; }

/* 14. Preuve ------------------------------------------------------------- */

.parole {
  padding: 1.6rem 1.6rem 2.2rem;
  margin: 0;
}
.parole blockquote {
  margin: 0 0 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--bordure-forte);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
}
.parole blockquote p { max-width: none; }
.parole figcaption {
  font-size: 0.9rem;
  color: var(--taupe);
  line-height: 1.5;
}
.parole figcaption b {
  display: block;
  font-family: var(--courant);
  font-weight: 600;
  color: var(--prune);
  font-size: 0.98rem;
}

.releve {
  position: relative;
  overflow: hidden;
  background: var(--sable);
  border: 1px solid var(--bordure);
  border-radius: 3px 18px 3px 3px;
  padding: 2rem clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}
.releve__cellule { position: relative; z-index: 1; }
.releve__cellule + .releve__cellule { border-left: 1px solid var(--bordure-forte); padding-left: 1.4rem; }
.releve__nombre {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--encre);
  display: block;
}
.releve__mot { font-size: 0.9rem; color: var(--taupe); margin: 0.4rem 0 0; max-width: none; }

/* 15. Tarifs, billets a souche de prix ----------------------------------- */

.grille-tarifs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: start;
}

.billet-tarif {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0 1.6rem;
}

.billet-tarif__souche {
  position: relative;
  background: var(--sable);
  padding: 1.5rem 1.5rem 1.3rem;
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}
.billet-tarif__souche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}

.billet-tarif__nom {
  font-family: var(--titre);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  position: relative;
  z-index: 1;
}
.billet-tarif__prix {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  color: var(--encre);
  position: relative;
  z-index: 1;
}
.billet-tarif__unite {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-top: 0.3rem;
  position: relative;
  z-index: 1;
}

.billet-tarif__cible {
  padding: 1.3rem 1.5rem 0.4rem;
  font-size: 0.95rem;
  color: var(--taupe);
  max-width: none;
}

.billet-tarif__inclus {
  list-style: none;
  padding: 0.4rem 1.5rem 1.4rem;
  margin: 0;
  flex: 1 1 auto;
}
.billet-tarif__inclus li {
  position: relative;
  padding-left: 1.55rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}
.billet-tarif__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--patine);
  border-radius: 50%;
}

.billet-tarif__pied { padding: 0 1.5rem; }

.billet-tarif--avant {
  border-color: var(--encre);
  box-shadow: var(--ombre-levee);
}
.billet-tarif--avant .billet-tarif__souche { background: #F7E7E9; }

.etiquette-avant {
  position: absolute;
  top: 1.5rem;
  right: 1.4rem;
  z-index: 2;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-claire);
  background: var(--encre);
  padding: 5px 11px;
  border-radius: 2px 9px 2px 2px;
}

.note-tarif {
  margin-top: 1.5rem;
  font-size: 0.92rem;
  color: var(--taupe);
  max-width: 74ch;
}

/* 16. FAQ ---------------------------------------------------------------- */

.bande-questions {
  display: grid;
  gap: 0.9rem;
  max-width: 900px;
}

.question { padding: 0; }
.question summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 3rem 1.15rem 1.4rem;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.08rem;
  position: relative;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  top: 1.5rem;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--encre);
  border-bottom: 1.5px solid var(--encre);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.question[open] summary::after { transform: rotate(-135deg); }
.question summary:focus-visible { outline: 2px solid var(--encre); outline-offset: -3px; box-shadow: none; }
.reponse {
  padding: 0 1.4rem 1.6rem;
  border-top: 1px solid var(--bordure);
  padding-top: 1rem;
  margin: 0 1.4rem;
}
.reponse p { font-size: 0.99rem; color: var(--taupe); }

/* 17. Encart et formulaire ----------------------------------------------- */

.encart { padding: 1.5rem 1.6rem 2rem; }
.encart h3 { font-size: 1.12rem; }
.encart p { font-size: 0.95rem; color: var(--taupe); max-width: none; }

.zone-contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) 5px minmax(0, 6fr);
  gap: 0;
  align-items: start;
}

.zone-contact__mot { padding-right: clamp(1.4rem, 3vw, 2.6rem); }
.zone-contact__fiche { padding-left: clamp(1.4rem, 3vw, 2.6rem); }

.fiche {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px 18px 3px 3px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--ombre-coupon);
}

.champ { margin-bottom: 1.1rem; }
.champ label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.champ .aide { font-size: 0.85rem; color: var(--taupe); font-weight: 400; display: block; margin-top: -0.15rem; 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(--papier);
  border: 1px solid var(--bordure-forte);
  border-radius: 2px 9px 2px 2px;
  padding: 12px 14px;
  line-height: 1.5;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 0;
  box-shadow: none;
  background: var(--surface);
}

.champ--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.champ--duo .champ { margin-bottom: 0; }

.consentement {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--taupe);
  margin: 1.3rem 0;
  line-height: 1.55;
}
.consentement input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--encre); flex: none; }

.apres-fiche { font-size: 0.88rem; color: var(--taupe); margin-top: 1rem; }

/* 18. Pied de page ------------------------------------------------------- */

.pochette {
  background: var(--sable);
  border-top: 1px solid var(--bordure);
  padding: clamp(2.8rem, 5vw, 4rem) 0 1.6rem;
  position: relative;
}
.pochette::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.7;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}

.pochette__colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2rem;
}

.pochette h2 {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--patine);
  margin-bottom: 1rem;
}

.pochette ul { list-style: none; padding: 0; margin: 0; }
.pochette li { margin-bottom: 0.55rem; }
.pochette a { color: var(--prune); text-decoration: none; font-size: 0.96rem; }
.pochette a:hover { color: var(--encre-sombre); text-decoration: underline; }
.pochette p { font-size: 0.94rem; color: var(--taupe); }

.pochette__position { max-width: 34ch; }

.profils { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; }
.profils a { font-size: 0.9rem; border-bottom: 1px solid var(--bordure-forte); }

.pochette__editeur { font-size: 0.88rem; color: var(--taupe); line-height: 1.6; }

.pochette__bas {
  margin-top: 2.6rem;
  border-top: 1px solid var(--bordure-forte);
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--taupe);
}
.pochette__bas p { margin: 0; font-size: 0.86rem; max-width: none; }
.pochette__reseau { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.pochette__reseau a { font-size: 0.84rem; color: var(--taupe); }

/* 19. Pages interieures -------------------------------------------------- */

.page-texte { padding: clamp(2.6rem, 5vw, 4.4rem) 0; }
.page-texte .cadre { max-width: 860px; }
.page-texte h2 { margin-top: 2.4rem; }
.page-texte h3 { margin-top: 1.6rem; }
.page-texte p, .page-texte li { max-width: 72ch; }

.fil {
  font-size: 0.86rem;
  color: var(--taupe);
  margin-bottom: 1.6rem;
}
.fil a { color: var(--taupe); }

.entete-page {
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 1.6rem;
  margin-bottom: 2.2rem;
  position: relative;
}
.entete-page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}

.portrait-auteur {
  float: right;
  margin: 0 0 1.4rem 1.8rem;
  width: 200px;
}
.portrait-auteur img { border-radius: 2px 14px 2px 2px; }

.mini-sommaire {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
}
.mini-sommaire h2 { margin-top: 0; font-family: var(--chiffre); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--patine); }
.mini-sommaire ul { margin: 0; padding-left: 1.1rem; }
.mini-sommaire li { font-size: 0.95rem; }

.tableau-plan { width: 100%; border-collapse: collapse; margin: 1.4rem 0 2rem; }
.tableau-plan th, .tableau-plan td {
  text-align: left;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.96rem;
  vertical-align: top;
}
.tableau-plan th { font-family: var(--chiffre); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--patine); }

.centre-message {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.centre-message .cadre { max-width: 640px; }
.centre-message p { margin-left: auto; margin-right: auto; }
.centre-message .billet__actions { justify-content: center; }

/* 20. Animations au defilement ------------------------------------------- */

.apparait {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.apparait.est-visible { opacity: 1; transform: none; }

/* 21. Adaptations -------------------------------------------------------- */

@media (max-width: 1040px) {
  .carnet--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carnet--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-tarifs { grid-template-columns: 1fr; }
  .pochette__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ancres { display: none; }
  .entete .bouton-encre { display: none; }
  .declic { display: inline-flex; }

  .billet { grid-template-columns: 1fr; }
  .billet .perfo-verticale {
    width: auto;
    height: 5px;
    background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    background-position: 0 50%;
  }
  .billet__souche { flex-direction: row; flex-wrap: wrap; gap: 1.4rem 2.4rem; }
  .souche__cadre { border-top: 0; padding-top: 0; }

  .probleme, .zone-contact { grid-template-columns: 1fr; }
  .probleme .perfo-verticale, .zone-contact .perfo-verticale {
    width: auto;
    height: 5px;
    margin: 2rem 0;
    background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    background-position: 0 50%;
  }
  .probleme__corps, .zone-contact__mot { padding-right: 0; }
  .probleme__souche, .zone-contact__fiche { padding-left: 0; }

  .duo { grid-template-columns: 1fr; }
  .duo--inverse > *:first-child { order: 0; }

  .releve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .releve__cellule + .releve__cellule { border-left: 0; padding-left: 0; }
  .releve__cellule:nth-child(2n) { border-left: 1px solid var(--bordure-forte); padding-left: 1.4rem; }

  .portrait-auteur { float: none; margin: 0 0 1.6rem; width: 180px; }
}

@media (max-width: 620px) {
  body { font-size: 1.02rem; }
  .carnet--trois, .carnet--quatre, .carnet--deux { grid-template-columns: 1fr; }
  .champ--duo { grid-template-columns: 1fr; }
  .releve { grid-template-columns: 1fr; }
  .releve__cellule:nth-child(2n) { border-left: 0; padding-left: 0; }
  .releve__cellule + .releve__cellule { border-top: 1px solid var(--bordure-forte); padding-top: 1rem; }
  .pochette__colonnes { grid-template-columns: 1fr; }
  .billet__actions .bouton-encre, .billet__actions .bouton-filet { width: 100%; }
  .registre::before { width: 200px; height: 200px; }
}

@media print {
  .entete, .panneau, .declic { display: none; }
  body { background: #FFFFFF; }
}

@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;
  }
  .halo::before {
    animation: none;
    opacity: 0.3;
    filter: none;
    inset: -5px;
  }
  .apparait { opacity: 1; transform: none; }
}
/* ==========================================================================
   22. Magazine, Cahier des seances.
   Le magazine n est pas un module rapporte: il reprend les jetons de couleur,
   les trois polices, la forme signature de la perforation, le motif des tampons
   encreurs et le halo qui pulse autour du bouton principal.
   Vocabulaire de classes: cahier, coupon, souche, perfo, tampon, comme le site.
   Le corps redactionnel est du HTML nu: toutes les balises y sont mises en forme
   en tant que descendantes de .cahier-corps, sans aucune classe.
   ========================================================================== */

/* 22.1 Entete du magazine ------------------------------------------------ */

.cahier-tete {
  position: relative;
  padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--sable);
  border-bottom: 1px solid var(--bordure);
}
.cahier-tete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
  opacity: 0.75;
}

.cahier-tete h1 { max-width: 16ch; }

.cahier-tete__chapo {
  font-size: 1.16rem;
  color: var(--taupe);
  max-width: 66ch;
  margin-bottom: 1.3rem;
}

.cahier-tete__compte {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--patine);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--coin);
  background: var(--surface);
  padding: 8px 14px;
}

/* 22.2 Grille et carte d article ---------------------------------------- */

.cahier-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: start;
}

.cahier-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  box-shadow: var(--ombre-coupon);
  padding: 1.2rem 1.3rem 2.1rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.cahier-carte::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.cahier-carte:hover {
  transform: translateY(-2px);
  border-color: var(--bordure-forte);
  box-shadow: var(--ombre-levee);
}
.cahier-carte:focus-within {
  border-color: var(--encre);
  box-shadow: var(--ombre-levee);
}

.cahier-carte__angle {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--patine);
  margin: 0 0 0.85rem;
  max-width: none;
}

/* Traitement photo du projet: cadre ivoire, filet cuivre, voile rose, perforation. */
.cahier-carte__cadre {
  position: relative;
  overflow: hidden;
  border-radius: 2px 12px 2px 2px;
  outline: 1px solid var(--bordure-forte);
  outline-offset: -1px;
  background: var(--papier);
}
.cahier-carte__cadre img {
  width: 100%;
  filter: saturate(0.85);
  transition: transform 0.4s ease;
}
.cahier-carte__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(158, 46, 88, 0.12);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cahier-carte:hover .cahier-carte__cadre img { transform: scale(1.02); }

.cahier-carte__perfo {
  height: 2px;
  margin: 9px 0 0.9rem;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}

.cahier-carte__titre {
  font-family: var(--titre);
  font-size: 1.24rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin: 0 0 0.65rem;
  max-width: none;
}
.cahier-carte__titre a {
  color: var(--prune);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--bordure-forte), var(--bordure-forte));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.cahier-carte__titre a:hover {
  color: var(--encre-sombre);
  background-image: linear-gradient(to right, var(--encre), var(--encre));
}

.cahier-carte__extrait {
  font-size: 0.96rem;
  color: var(--taupe);
  margin: 0 0 1.1rem;
  max-width: none;
  flex: 1 1 auto;
}

.cahier-carte__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--taupe);
  max-width: none;
}
.cahier-carte__duree { color: var(--encre); }

/* Carte en tete de sommaire, sur toute la largeur de la grille. */
.cahier-carte--tete { grid-column: 1 / -1; }
.cahier-carte--tete .cahier-carte__titre { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }

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

.cahier-avant__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.cahier-avant__tete p { max-width: 62ch; }
.cahier-avant__lien {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-sombre);
  text-decoration: none;
  border-bottom: 1px solid var(--bordure-forte);
  padding-bottom: 4px;
  white-space: nowrap;
}
.cahier-avant__lien:hover { color: var(--prune); border-bottom-color: var(--encre); }

/* 22.4 Entete d article, fil d Ariane, angle, dates, temps de lecture ---- */

.cahier-art { padding-bottom: clamp(2rem, 4vw, 3rem); }

.cahier-art__tete {
  position: relative;
  background: var(--sable);
  border-bottom: 1px solid var(--bordure);
  padding: clamp(1.6rem, 3.5vw, 2.6rem) 0 clamp(2rem, 4vw, 3rem);
}
.cahier-art__tete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
  opacity: 0.75;
}

.cahier-fil {
  font-size: 0.86rem;
  color: var(--taupe);
  margin: 0 0 1.6rem;
  max-width: none;
}
.cahier-fil a { color: var(--taupe); }
.cahier-fil a:hover { color: var(--encre-sombre); }
.cahier-fil span[aria-hidden] { color: var(--bordure-forte); padding: 0 0.35rem; }

.cahier-art__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
  margin: 0 0 1.1rem;
  max-width: none;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}
.cahier-art__angle {
  color: var(--encre-claire);
  background: var(--encre);
  border-radius: 2px 9px 2px 2px;
  padding: 5px 11px;
}
.cahier-art__duree { color: var(--patine); }

.cahier-art__tete h1 { max-width: 22ch; }

/* Exergue du chapeau: coupon a filet cuivre et bord perfore. */
.cahier-art__chapo {
  position: relative;
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--encre);
  border-radius: var(--coin);
  box-shadow: var(--ombre-coupon);
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--prune);
  max-width: 68ch;
}
.cahier-art__chapo::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}

.cahier-art__photo {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
}

/* 22.5 Corps redactionnel, balises nues ---------------------------------- */

.cahier-corps {
  max-width: 68ch;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--prune);
}

.cahier-corps > *:first-child { margin-top: 0; }

.cahier-corps p {
  margin: 0 0 1.15em;
  max-width: 66ch;
}

.cahier-corps h2 {
  position: relative;
  font-family: var(--titre);
  font-size: clamp(1.45rem, 3.1vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--prune);
  margin: 2.7rem 0 0.9rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bordure);
  max-width: 26ch;
}
.cahier-corps h2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
  opacity: 0.8;
}

.cahier-corps h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.34;
  color: var(--prune);
  margin: 1.9rem 0 0.6rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--encre);
  max-width: 34ch;
}

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

.cahier-corps a {
  color: var(--encre-sombre);
  text-decoration: underline;
  text-decoration-color: var(--bordure-forte);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cahier-corps a:hover {
  color: var(--prune);
  text-decoration-color: var(--encre);
}

/* Listes a puces: le point de tampon encreur, cercle ouvert double d une ombre patine. */
.cahier-corps ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3em;
}
.cahier-corps ul li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.55em;
  max-width: 64ch;
}
.cahier-corps ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--encre);
  border-radius: 50%;
  box-shadow: 3px 3px 0 -1px rgba(79, 122, 99, 0.55);
}

/* Listes numerotees: le numero en Eczar, comme les etapes de la methode du site. */
.cahier-corps ol {
  list-style: none;
  counter-reset: coupon;
  padding: 0;
  margin: 0 0 1.3em;
}
.cahier-corps ol li {
  position: relative;
  counter-increment: coupon;
  padding-left: 2.1rem;
  margin-bottom: 0.55em;
  max-width: 64ch;
}
.cahier-corps ol li::before {
  content: counter(coupon);
  position: absolute;
  left: 0;
  top: 0.06em;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--encre);
}

.cahier-corps li > ul,
.cahier-corps li > ol { margin: 0.5em 0 0.2em; }

/* Tableau recapitulatif: en tete sable, filets cuivre, chiffres en Eczar. */
.cahier-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.7rem 0 1.9rem;
  font-size: 0.96rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  overflow: hidden;
}
.cahier-corps thead { background: var(--sable); }
.cahier-corps th {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 0.95rem;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--patine);
  border-bottom: 1px solid var(--bordure-forte);
}
.cahier-corps td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--bordure);
  color: var(--prune);
}
.cahier-corps tbody tr:last-child td { border-bottom: 0; }
.cahier-corps tbody tr:nth-child(even) { background: rgba(244, 236, 224, 0.5); }
.cahier-corps tbody th {
  border-bottom: 1px solid var(--bordure);
  font-family: var(--courant);
  font-size: 0.96rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--prune);
  font-weight: 600;
}

/* Encadre: coupon detache du carnet a souche. */
.cahier-corps aside {
  position: relative;
  background: var(--sable);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  box-shadow: var(--ombre-coupon);
  padding: 1.3rem 1.5rem 1.9rem;
  margin: 1.9rem 0;
}
.cahier-corps aside::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}
.cahier-corps aside p { font-size: 0.98rem; color: var(--prune); max-width: none; }
.cahier-corps aside p:last-child { margin-bottom: 0; }
.cahier-corps aside strong { color: var(--encre-sombre); }
.cahier-corps aside ul,
.cahier-corps aside ol { margin-bottom: 0; }
.cahier-corps aside li { max-width: none; }

/* Citation: filet cuivre de 2 pixels a gauche, Vollkorn italique. */
.cahier-corps blockquote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--encre);
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--prune);
}
.cahier-corps blockquote p { max-width: 60ch; }
.cahier-corps blockquote p:last-child { margin-bottom: 0; }

.cahier-corps figure {
  margin: 1.9rem 0;
  background: var(--papier);
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: 3px 16px 3px 3px;
  box-shadow: var(--ombre-coupon);
}
.cahier-corps figure img {
  border-radius: 2px 12px 2px 2px;
  outline: 1px solid var(--bordure-forte);
  outline-offset: -1px;
  filter: saturate(0.85);
}
.cahier-corps figcaption {
  margin: 10px 2px 2px;
  font-size: 0.85rem;
  color: var(--taupe);
}

/* 22.6 Relance vers le produit ------------------------------------------ */

.cahier-relance {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px 18px 3px 3px;
  box-shadow: var(--ombre-coupon);
  padding: 1.7rem 1.7rem 2.2rem;
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
  max-width: 68ch;
}
.cahier-relance::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}
.cahier-relance__titre {
  font-family: var(--titre);
  font-size: 1.35rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  max-width: none;
}
.cahier-relance p { font-size: 0.99rem; color: var(--taupe); max-width: none; }
.cahier-relance .bouton-encre { margin-top: 1.3rem; }

/* 22.7 Encart auteur ----------------------------------------------------- */

.cahier-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
  background: var(--sable);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  box-shadow: var(--ombre-coupon);
  padding: 1.6rem 1.6rem 2.1rem;
  margin: clamp(2rem, 3.5vw, 2.8rem) 0 0;
  max-width: 68ch;
}
.cahier-auteur::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}
.cahier-auteur img {
  width: 96px;
  height: 96px;
  border-radius: 2px 14px 2px 2px;
  outline: 1px solid var(--bordure-forte);
  outline-offset: -1px;
  filter: saturate(0.85);
}
.cahier-auteur__nom {
  font-family: var(--titre);
  font-size: 1.24rem;
  line-height: 1.2;
  margin: 0 0 0.1rem;
  max-width: none;
}
.cahier-auteur__role {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--patine);
  margin: 0 0 0.7rem;
  max-width: none;
}
.cahier-auteur p { font-size: 0.96rem; color: var(--taupe); max-width: none; }

/* 22.8 Bloc A lire aussi ------------------------------------------------- */

.cahier-aussi {
  background: var(--sable);
  border-top: 1px solid var(--bordure);
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2.6rem, 5vw, 3.6rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
  position: relative;
}
.cahier-aussi::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.7;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}
.cahier-aussi__titre {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  max-width: 26ch;
}
.cahier-aussi__intro { color: var(--taupe); max-width: 66ch; margin-bottom: 1.9rem; }

.cahier-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  align-items: start;
}

.cahier-aussi__carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  box-shadow: var(--ombre-coupon);
  padding: 1rem 1.1rem 1.9rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.cahier-aussi__carte::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 9px;
  height: 2px;
  background-image: linear-gradient(to right, var(--bordure-forte) 0 2px, transparent 2px 8px);
  background-size: 8px 2px;
}
.cahier-aussi__carte:hover {
  transform: translateY(-2px);
  border-color: var(--bordure-forte);
  box-shadow: var(--ombre-levee);
}
.cahier-aussi__carte img {
  width: 100%;
  border-radius: 2px 12px 2px 2px;
  outline: 1px solid var(--bordure-forte);
  outline-offset: -1px;
  filter: saturate(0.85);
  margin-bottom: 0.85rem;
}
.cahier-aussi__lien {
  font-family: var(--titre);
  font-size: 1.1rem;
  line-height: 1.26;
  letter-spacing: -0.015em;
  margin: 0 0 0.45rem;
  max-width: none;
}
.cahier-aussi__lien a { color: var(--prune); text-decoration: none; border-bottom: 1px solid var(--bordure-forte); }
.cahier-aussi__lien a:hover { color: var(--encre-sombre); border-bottom-color: var(--encre); }
.cahier-aussi__accroche {
  font-size: 0.93rem;
  color: var(--taupe);
  margin: 0;
  max-width: none;
}

/* Liste des articles signes, page auteur et plan du site. */
.cahier-signes { list-style: none; padding: 0; margin: 1.4rem 0 2rem; }
.cahier-signes li {
  border-top: 1px solid var(--bordure);
  padding: 0.8rem 0;
  margin: 0;
  max-width: 74ch;
}
.cahier-signes li:last-child { border-bottom: 1px solid var(--bordure); }
.cahier-signes a {
  font-weight: 600;
  color: var(--prune);
  text-decoration: none;
  border-bottom: 1px solid var(--bordure-forte);
}
.cahier-signes a:hover { color: var(--encre-sombre); border-bottom-color: var(--encre); }
.cahier-signes__repere {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Intitule de colonne du pied de page dans les pages du magazine: les pages
   d article ne portent qu un seul titre, le h1. Les colonnes du pied y sont donc
   annoncees par un paragraphe, mis en forme exactement comme le h2 du site. */
.pochette .cahier-rubrique {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--patine);
  margin: 0 0 1rem;
  max-width: none;
}

/* 22.9 Adaptations du magazine ------------------------------------------- */

@media (max-width: 1040px) {
  .cahier-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cahier-aussi__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cahier-grille { grid-template-columns: 1fr; }
  .cahier-aussi__grille { grid-template-columns: 1fr; }
  .cahier-auteur { grid-template-columns: 1fr; }
  .cahier-relance .bouton-encre { width: 100%; }
  .cahier-corps h2 { max-width: none; }
  .cahier-corps h3 { max-width: none; }
  /* Un tableau large reste lisible en defilant a l interieur de sa propre boite. */
  .cahier-corps table { display: block; overflow-x: auto; }
}

@media print {
  .cahier-aussi, .cahier-relance { display: 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}