@charset "utf-8";

/* ==========================================================================
   Vulvella, feuille de style unique
   Vocabulaire de nommage propre au projet : carnet, releve, sillon, noeud,
   meandre, gaufrage, cliche, fiche, formule, filet.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

:root {
  --nacre: #F6FBF7;
  --opaline: #E4F1E7;
  --papier: #FFFFFF;
  --encre: #15251A;
  --encre-douce: #48604F;
  --vert: #1A6C26;
  --vert-clair: #2A8C36;
  --vert-sombre: #135019;
  --sur-vert: #FFFFFF;
  --lilas: #6A4C93;
  --filet: #CFE3D5;

  --titre: "Prata", "Times New Roman", serif;
  --courant: "Heebo", "Helvetica Neue", Arial, sans-serif;
  --plume: "Lobster", "Brush Script MT", cursive;

  --mesure: 64ch;
  --rayon-bouton: 18px 6px 18px 6px;
  --rayon-cliche: 32px 8px 32px 8px;
  --rayon-fiche: 20px 6px 20px 6px;

  --gaufre-haut: inset 0 1px 0 rgba(255, 255, 255, 1);
  --gaufre-bas: inset 0 -1px 0 var(--filet);
  --contour-filet: 0 0 0 1px var(--filet);
}

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

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

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

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

a { color: var(--vert-sombre); }

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

h1 { font-size: 3.05rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p, li { max-width: var(--mesure); }

strong, b { font-weight: 600; }

/* ---------- Utilitaires de langue visuelle ------------------------------ */

.surtitre {
  font-family: var(--plume);
  font-size: 1.05rem;
  color: var(--vert);
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.etiquette {
  font-family: var(--courant);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.menu-fine { font-size: 0.8125rem; color: var(--encre-douce); }

.mention-lilas { color: var(--lilas); font-weight: 600; }

.gaufrage-fond {
  background-image: repeating-linear-gradient(
    180deg,
    #ffffff 0, #ffffff 1px,
    var(--filet) 1px, var(--filet) 2px,
    rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 14px
  );
}

.filet-gaufre {
  height: 2px;
  border: 0;
  margin: 2.4rem 0;
  max-width: 240px;
  background: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px);
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert);
  color: var(--sur-vert);
  padding: 0.7rem 1.1rem;
  z-index: 90;
  border-radius: var(--rayon-bouton);
}
.evitement:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px #ffffff;
  border-radius: 4px;
}

/* ---------- Boutons ----------------------------------------------------- */

.bouton-encre,
.bouton-papier,
.lien-retrait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--courant);
  text-decoration: none;
  cursor: pointer;
}

.bouton-encre {
  position: relative;
  min-height: 50px;
  padding: 0 1.5rem;
  background: var(--vert);
  color: var(--sur-vert);
  font-weight: 600;
  font-size: 0.95rem;
  border: 0;
  border-radius: var(--rayon-bouton);
  overflow: hidden;
  transition: background-color 220ms ease, transform 120ms ease;
}
.bouton-encre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
}
.bouton-encre:hover { background: var(--vert-sombre); }
.bouton-encre:hover::after { transform: scaleX(1); }
.bouton-encre:active { transform: translateY(1px); }

.bouton-papier {
  position: relative;
  min-height: 50px;
  padding: 0 1.4rem 0 1.7rem;
  background: var(--papier);
  color: var(--vert-sombre);
  font-weight: 600;
  font-size: 0.95rem;
  border: 0;
  border-radius: var(--rayon-bouton);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  transition: background-color 220ms ease, transform 120ms ease;
}
.bouton-papier::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 8px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 34' fill='none'%3E%3Cpath d='M6 0 C6 8 1 10 1 17 C1 24 6 26 6 34' stroke='%231A6C26' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: bottom 260ms ease;
}
.bouton-papier:hover { background: var(--opaline); }
.bouton-papier:hover::before { bottom: 4px; }
.bouton-papier:active { transform: translateY(1px); }

.lien-retrait {
  background: none;
  border: 0;
  padding: 0.2rem 0;
  color: var(--vert-sombre);
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 2px solid;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
}

.paire-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.8rem 0 1.2rem;
}

/* ---------- En tete ----------------------------------------------------- */

.entete-carnet {
  position: fixed;
  inset: 0 0 auto 0;
  height: 68px;
  z-index: 60;
  background: rgba(246, 251, 247, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
  transition: background-color 200ms ease;
}
.entete-carnet.entete-defilee { background: rgba(246, 251, 247, 0.98); }

.entete-rang {
  height: 68px;
  width: min(1180px, 94vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--encre);
  flex: 0 0 auto;
}
.marque svg { display: block; }
.marque__mot {
  font-family: var(--titre);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  color: var(--vert-sombre);
}

.nav-ancres {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.nav-ancres a {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-ancres a:hover { color: var(--vert-sombre); border-bottom-color: var(--vert); }

.entete-actions { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; }
.entete-actions .bouton-encre { min-height: 42px; font-size: 0.85rem; padding: 0 1.1rem; }

.jauge-trace {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--vert);
}

.note-cookie {
  display: block;
  font-size: 0.72rem;
  color: var(--encre-douce);
  line-height: 1;
}

.bouton-panneau {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: var(--papier);
  border: 0;
  border-radius: 12px 4px 12px 4px;
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  cursor: pointer;
  padding: 10px;
}
.bouton-panneau svg { display: block; width: 100%; height: 100%; }
.bouton-panneau line { stroke: var(--vert-sombre); stroke-width: 2; stroke-linecap: round; }

.panneau-ancres {
  position: fixed;
  inset: 68px 0 auto 0;
  background: var(--opaline);
  padding: 1.6rem 6vw 2.4rem;
  transform: translateY(-120%);
  transition: transform 320ms ease;
  z-index: 55;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
.panneau-ancres[data-ouvert="oui"] { transform: translateY(0); }
.panneau-ancres ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.panneau-ancres li { border-bottom: 2px solid transparent; border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1; }
.panneau-ancres a {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--titre);
  font-size: 1.2rem;
  color: var(--encre);
  text-decoration: none;
}

/* ---------- Sillon, le chemin sinueux qui relie les sections ------------ */

.page-carnet { position: relative; padding-top: 68px; }

.sillon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 180px;
  margin-left: -90px;
  pointer-events: none;
  z-index: 0;
}
.sillon svg { width: 100%; height: 100%; display: block; }
.sillon path {
  fill: none;
  stroke: var(--vert);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

.releve {
  position: relative;
  z-index: 1;
}

.noeud {
  position: absolute;
  top: 34px;
  left: calc(50% + var(--noeud-x, 0px));
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--vert);
  color: var(--vert-sombre);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.68rem;
  display: grid;
  place-items: center;
  z-index: 2;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 400ms ease, transform 400ms ease;
}
.noeud.noeud-visible { opacity: 1; transform: scale(1); }

.cadre {
  width: min(1180px, 92vw);
  margin: 0 auto;
  position: relative;
}

.colonne-gauche { max-width: 620px; margin-right: auto; }
.colonne-droite { max-width: 620px; margin-left: auto; }
.colonne-centre { max-width: 760px; margin: 0 auto; }

/* Rythme vertical volontairement irregulier, section apres section */
.releve--ouverture { padding: 3.4rem 0 5.2rem; }
.releve--creux { padding: 6.6rem 0 5rem; }
.releve--etapes { padding: 4.2rem 0 6.8rem; }
.releve--notes { padding: 5.8rem 0 4.6rem; }
.releve--gain { padding: 7.2rem 0 5.4rem; }
.releve--voix { padding: 0; }
.releve--formules { padding: 5.6rem 0 6.4rem; }
.releve--questions { padding: 4.8rem 0 5.6rem; }
.releve--adresse { padding: 6rem 0 5rem; }

.releve--opaline { background: var(--opaline); }

/* ---------- Cliches photographiques ------------------------------------- */

.cliche {
  position: relative;
  border-radius: var(--rayon-cliche);
  overflow: hidden;
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px var(--filet);
  background: var(--opaline);
}
.cliche img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon-cliche);
}
.cliche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(228, 241, 231, 0.06);
  pointer-events: none;
}
.cliche-legende {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  color: var(--encre-douce);
  max-width: 46ch;
}

/* ---------- Hero -------------------------------------------------------- */

.ouverture-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 3rem;
  align-items: center;
}

.ouverture-texte h1 { margin-bottom: 1rem; }
.ouverture-chapeau { font-size: 1.15rem; color: var(--encre-douce); max-width: 46ch; }

.ouverture-cliche { position: relative; }
.ouverture-cliche .cliche { margin-right: -6vw; }

.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
  list-style: none;
  padding-left: 0;
}
.reassurance li {
  font-size: 0.85rem;
  color: var(--encre-douce);
  padding-left: 1.15rem;
  position: relative;
  max-width: none;
}
.reassurance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 12px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M6 0 C6 3 1 4 1 6 C1 8 6 9 6 12' stroke='%231A6C26' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bande-ouverture {
  margin-top: 2.6rem;
  padding: 1rem 1.3rem;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.bande-ouverture strong { color: var(--encre); }

/* ---------- Fiches et meandre ------------------------------------------- */

.fiche {
  position: relative;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  padding: 1.6rem 1.5rem 1.5rem 2.2rem;
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
}
.fiche h3 { margin-bottom: 0.4rem; }
.fiche p { font-size: 0.98rem; color: var(--encre-douce); margin: 0; }
.fiche p + p { margin-top: 0.5rem; }

.meandre {
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 10px;
  pointer-events: none;
}
.meandre svg { width: 100%; height: 100%; display: block; }
.meandre path {
  fill: none;
  stroke: var(--vert);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 420ms ease;
}
.trace-faite .meandre path { stroke-dashoffset: 0; }

.fiche--miroir { padding: 1.6rem 2.2rem 1.5rem 1.5rem; }
.fiche--miroir .meandre { left: auto; right: 10px; transform: scaleX(-1); }

/* ---------- Probleme ---------------------------------------------------- */

.liste-couts {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
}
.liste-couts .fiche { padding-block: 1.2rem; }
.chiffre-cout {
  font-family: var(--titre);
  font-size: 1.6rem;
  color: var(--vert-sombre);
  display: block;
  line-height: 1.1;
}

.encart-lilas {
  margin-top: 2.2rem;
  padding: 1.3rem 1.4rem;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), 0 0 0 1px #DCD2EB;
  border-left: 4px solid var(--lilas);
}
.encart-lilas p { margin: 0; font-size: 0.95rem; }

/* ---------- Solution en quatre etapes ----------------------------------- */

.echelle-etapes {
  list-style: none;
  padding: 0;
  margin: 2.6rem 0 0;
  display: grid;
  gap: 1.6rem;
}
.etape {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  max-width: none;
}
.etape:nth-child(even) { margin-left: 2.6rem; }
.etape__numero {
  font-family: var(--plume);
  font-size: 2.3rem;
  color: var(--vert);
  line-height: 1;
}
.etape h3 { margin-bottom: 0.3rem; }
.etape p { margin: 0; color: var(--encre-douce); font-size: 0.98rem; }

.embranchement {
  position: absolute;
  left: -2.6rem;
  top: 2.2rem;
  width: 2.6rem;
  height: 20px;
}
.embranchement path {
  fill: none;
  stroke: var(--vert);
  stroke-width: 2;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
}

/* ---------- Fonctionnalites --------------------------------------------- */

.grille-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.grille-notes .fiche { display: flex; flex-direction: column; }
.pictogramme { width: 34px; height: 34px; margin-bottom: 0.8rem; }
.pictogramme path,
.pictogramme circle,
.pictogramme line {
  fill: none;
  stroke: var(--vert);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 500ms ease;
}
.fiche:hover .pictogramme path,
.fiche:focus-within .pictogramme path { stroke-dashoffset: 90; animation: retrace 700ms ease forwards; }

@keyframes retrace {
  from { stroke-dashoffset: 90; }
  to { stroke-dashoffset: 0; }
}

.rappel-notes {
  margin-top: 2.2rem;
  padding: 1.4rem 1.5rem;
  background: var(--opaline);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas);
}
.rappel-notes p { margin: 0; }

.cliche-detail { margin-top: 2.8rem; max-width: 720px; }

/* ---------- Avantages --------------------------------------------------- */

.duo-gain {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.duo-gain .cliche { margin-left: -5vw; }

.liste-gains { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 1.1rem; }
.liste-gains li {
  position: relative;
  padding-left: 1.5rem;
  max-width: none;
  font-size: 0.99rem;
}
.liste-gains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 12px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M6 0 C6 3 1 4 1 6 C1 8 6 9 6 12' stroke='%236A4C93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.liste-gains strong { display: block; font-weight: 600; }

/* ---------- Preuve sociale ---------------------------------------------- */

.bande-voix {
  background: var(--opaline);
  padding: 5.4rem 0 4.6rem;
  position: relative;
}
.grille-voix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.4rem;
}
.temoin {
  position: relative;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  padding: 1.5rem 1.4rem 1.4rem 2.2rem;
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  margin: 0;
}
.temoin blockquote { margin: 0; }
.temoin blockquote p { font-size: 0.97rem; color: var(--encre-douce); }
.temoin blockquote p:first-child {
  font-family: var(--plume);
  font-size: 1.15rem;
  color: var(--vert-sombre);
  line-height: 1.35;
  margin-top: 0;
}
.temoin figcaption {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
  font-size: 0.8125rem;
  color: var(--encre-douce);
}
.temoin figcaption b { display: block; color: var(--encre); font-weight: 600; }

.chiffres-releve {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 3rem;
  padding-top: 2.2rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
  list-style: none;
  padding-left: 0;
}
.chiffres-releve li { max-width: none; }
.chiffres-releve b {
  display: block;
  font-family: var(--titre);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--vert-sombre);
  line-height: 1.05;
}
.chiffres-releve span { font-size: 0.85rem; color: var(--encre-douce); display: block; }

/* ---------- Tarifs ------------------------------------------------------ */

.grille-formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.8rem;
  align-items: start;
}
.formule {
  position: relative;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  padding: 1.8rem 1.5rem 1.6rem 2.2rem;
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
}
.formule--avancee {
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), 0 0 0 2px var(--vert);
  margin-top: -1.4rem;
  padding-bottom: 2rem;
}
.formule__ruban {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sur-vert);
  background: var(--vert);
  padding: 0.25rem 0.6rem;
  border-radius: 10px 3px 10px 3px;
  margin-bottom: 0.7rem;
}
.formule h3 { margin-bottom: 0.2rem; }
.formule__prix {
  font-family: var(--titre);
  font-size: 2.6rem;
  color: var(--encre);
  line-height: 1.05;
  display: block;
  margin: 0.4rem 0 0.1rem;
}
.formule__unite { font-size: 0.8125rem; color: var(--encre-douce); display: block; margin-bottom: 0.9rem; }
.formule__cible { font-size: 0.92rem; color: var(--encre-douce); }
.formule ul {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 1.5rem;
  display: grid;
  gap: 0.65rem;
}
.formule li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
  max-width: none;
}
.formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 12px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M6 0 C6 3 1 4 1 6 C1 8 6 9 6 12' stroke='%231A6C26' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.formule .bouton-encre,
.formule .bouton-papier { width: 100%; }

.note-formules {
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: var(--encre-douce);
  max-width: 78ch;
}

/* ---------- Foire aux questions ----------------------------------------- */

.pile-questions { margin-top: 2.4rem; display: grid; gap: 0; }
.question {
  background: var(--papier);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
}
.question:first-child { border-radius: var(--rayon-fiche) var(--rayon-fiche) 0 0; }
.question h3 { margin: 0; font-size: 1.1rem; }
.question__bouton {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.15rem 3rem 1.15rem 1.4rem;
  font-family: var(--titre);
  font-size: 1.1rem;
  color: var(--encre);
  cursor: pointer;
  position: relative;
  line-height: 1.35;
}
.question__bouton::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 1.45rem;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--vert);
  border-bottom: 2px solid var(--vert);
  transform: rotate(45deg);
  transition: transform 260ms ease;
}
.question__bouton[aria-expanded="true"]::after { transform: rotate(-135deg); }
.question__reponse { padding: 0 1.4rem 1.3rem; }
.question__reponse p { margin: 0 0 0.7rem; color: var(--encre-douce); font-size: 0.98rem; }
.question__reponse p:last-child { margin-bottom: 0; }
.question__reponse[hidden] { display: none; }

/* ---------- Contact ----------------------------------------------------- */

.duo-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
}

.formulaire-consultation {
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
}
.champ { margin-bottom: 1.1rem; }
.champ label {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 0.35rem;
}
.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(--nacre);
  border: 0;
  border-radius: 12px 4px 12px 4px;
  padding: 0.75rem 0.85rem;
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ-consentement {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--encre-douce);
  margin-bottom: 1.3rem;
}
.champ-consentement input { margin-top: 0.35rem; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--vert); }
.champ-consentement label { text-transform: none; letter-spacing: 0; font-size: 0.85rem; font-weight: 400; }

.apres-formulaire { font-size: 0.8125rem; color: var(--encre-douce); margin-top: 1rem; }

.aparte-contact .fiche { margin-bottom: 1.2rem; }

/* ---------- Pages internes ---------------------------------------------- */

.page-texte { padding: 3.4rem 0 4.4rem; }
.page-texte h2 { margin-top: 2.4rem; }
.page-texte h3 { margin-top: 1.6rem; }
.page-texte ul, .page-texte ol { padding-left: 1.2rem; }
.page-texte li { margin-bottom: 0.4rem; }
.fil-ariane { font-size: 0.8125rem; color: var(--encre-douce); margin-bottom: 1.4rem; }
.fil-ariane a { color: var(--vert-sombre); }

.portrait-auteur {
  float: right;
  margin: 0 0 1.4rem 1.8rem;
  border-radius: var(--rayon-cliche);
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px var(--filet);
  max-width: 240px;
}

.tableau-donnees {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.tableau-donnees th,
.tableau-donnees td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
.tableau-donnees th { font-weight: 600; background: var(--opaline); }

.liste-profils { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.liste-profils li { max-width: none; }

.bloc-centre { text-align: center; padding: 5rem 0; }
.bloc-centre p { margin-left: auto; margin-right: auto; }

/* ---------- Pied de page ------------------------------------------------ */

.pied-carnet {
  background: var(--opaline);
  padding: 3.4rem 0 1.6rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
  position: relative;
  z-index: 1;
}
.pied-colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
}
.pied-carnet h2 { font-size: 1rem; font-family: var(--courant); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: 0.9rem; }
.pied-carnet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.pied-carnet li { max-width: none; font-size: 0.9rem; }
.pied-carnet a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied-carnet a:hover { color: var(--vert-sombre); border-bottom-color: var(--vert); }
.pied-carnet p { font-size: 0.9rem; color: var(--encre-douce); }
.pied-reseau { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 2px solid transparent; border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1; }
.pied-reseau ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.pied-reseau li { font-size: 0.8125rem; }
.barre-bas {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
  font-size: 0.8125rem;
  color: var(--encre-douce);
}
.barre-bas p { max-width: none; margin: 0.2rem 0; }

/* ---------- Apparition au defilement ------------------------------------ */

.apparait {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.apparait.trace-faite { opacity: 1; transform: none; }

/* ---------- Adaptations ------------------------------------------------- */

@media (max-width: 1080px) {
  .grille-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-voix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres-releve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-formules { grid-template-columns: 1fr; }
  .formule--avancee { margin-top: 0; }
}

@media (max-width: 900px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }

  .nav-ancres, .entete-actions { display: none; }
  .bouton-panneau { display: block; }

  .sillon { left: 22px; margin-left: 0; width: 60px; }
  .noeud { left: 34px; margin-left: -12px; }
  .cadre { width: auto; margin: 0 5vw 0 4.6rem; }
  .colonne-gauche, .colonne-droite, .colonne-centre { max-width: none; margin: 0; }

  .ouverture-grille, .duo-gain, .duo-contact { grid-template-columns: 1fr; gap: 2rem; }
  .ouverture-cliche .cliche { margin-right: 0; }
  .duo-gain .cliche { margin-left: 0; }
  .duo-gain > div:first-child { order: 2; }

  .grille-notes, .grille-voix { grid-template-columns: 1fr; }
  .etape { grid-template-columns: 3rem minmax(0, 1fr); }
  .etape:nth-child(even) { margin-left: 0; }
  .embranchement { display: none; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
  .portrait-auteur { float: none; margin: 0 0 1.4rem; }

  .releve--ouverture { padding: 2.4rem 0 3.6rem; }
  .releve--creux, .releve--etapes, .releve--notes, .releve--gain,
  .releve--formules, .releve--questions, .releve--adresse { padding: 3.6rem 0; }
}

@media (max-width: 560px) {
  .pied-colonnes { grid-template-columns: 1fr; }
  .chiffres-releve { grid-template-columns: 1fr; }
  .paire-boutons .bouton-encre,
  .paire-boutons .bouton-papier { width: 100%; }
}

@media print {
  .entete-carnet, .panneau-ancres, .sillon, .paire-boutons { display: none; }
  body { background: #ffffff; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .apparait { opacity: 1; transform: none; }
  .meandre path { stroke-dashoffset: 0; }
  .noeud { opacity: 1; transform: none; }
  .sillon path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}
/* ==========================================================================
   Le Carnet des mots justes, magazine de Vulvella
   Section ajoutee apres la construction du site. Aucune regle ci dessus n est
   modifiee. Meme palette, meme typographie, meme forme signature (le meandre
   de bord gauche), meme motif (les filets gaufres) et meme signature
   d animation (le trace progressif des chemins SVG) que le reste du carnet.
   Vocabulaire de nommage: sommaire, feuillet, corps-article, encart, lire-aussi.
   ========================================================================== */

:root {
  /* Mesure de lecture propre aux articles, 68 signes au maximum par ligne. */
  --mesure-article: 68ch;
  /* Le meandre reduit, servi en image de fond la ou aucune classe n est admise. */
  --puce-meandre: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M6 0 C6 3 1 4 1 6 C1 8 6 9 6 12' stroke='%231A6C26' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --meandre-bord: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 34' fill='none'%3E%3Cpath d='M6 0 C6 8 1 10 1 17 C1 24 6 26 6 34' stroke='%231A6C26' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Titres de bloc et de colonne, sans balise de titre ----------- */
/* Le gabarit d article reserve h2 et h3 au corps redactionnel: les intitules
   de l encart auteur, du bloc A lire aussi et du pied de page prennent donc
   la forme d un paragraphe mis en page comme un titre. */

.titre-bloc {
  font-family: var(--titre);
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--encre);
  margin: 0 0 1.2rem;
  max-width: none;
}

.pied-titre {
  font-size: 1rem;
  font-family: var(--courant);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 0.9rem;
  max-width: none;
}

/* ---------- Entete de la page d index du magazine ------------------------ */

.releve--magazine { padding: 3.6rem 0 5.4rem; }

.entete-magazine { max-width: 760px; }
.entete-magazine h1 { margin-bottom: 0.9rem; }
.entete-magazine .chapeau-magazine {
  font-size: 1.15rem;
  color: var(--encre-douce);
  max-width: 58ch;
}
.entete-magazine .filet-gaufre { margin: 2rem 0 0; }

.compte-articles {
  display: block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--encre-douce);
}

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

.sommaire-magazine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 2.8rem;
  padding: 0;
  list-style: none;
}

.feuillet {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.1rem 1.3rem 1.4rem 2.2rem;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  max-width: none;
  transition: box-shadow 240ms ease, transform 240ms ease;
}
.feuillet:hover,
.feuillet:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), 0 0 0 2px var(--filet);
}
.feuillet .meandre { top: 18px; bottom: 18px; }

.feuillet__cliche {
  position: relative;
  display: block;
  margin: 0 0 1rem;
  border-radius: var(--rayon-cliche);
  overflow: hidden;
  background: var(--opaline);
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px var(--filet);
}
.feuillet__cliche img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon-cliche);
}
.feuillet__cliche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(228, 241, 231, 0.06);
  pointer-events: none;
}

.feuillet__angle {
  display: inline-block;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-sombre);
  margin-bottom: 0.5rem;
}

.feuillet__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--encre);
  margin: 0 0 0.6rem;
  max-width: none;
}
.feuillet__titre a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.feuillet__titre a:hover { color: var(--vert-sombre); border-bottom-color: var(--vert); }

.feuillet__extrait {
  font-size: 0.95rem;
  color: var(--encre-douce);
  margin: 0 0 1.1rem;
  max-width: none;
}

.feuillet__pied {
  margin-top: auto;
  padding-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  font-size: 0.8125rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
}

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

.releve--derniers { padding: 5.2rem 0 5.4rem; }
.derniers-articles .paire-boutons { margin-bottom: 0; }
.derniers-articles .sommaire-magazine { margin-bottom: 2rem; }
.derniers-articles > p { color: var(--encre-douce); }

/* ---------- Entete d un article ----------------------------------------- */

.releve--article { padding: 2.6rem 0 4.6rem; }

.entete-article { max-width: var(--mesure-article); }
.entete-article .fil-ariane { margin-bottom: 1.2rem; }
.entete-article h1 { margin-bottom: 1rem; }

.reperes-article {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0 0 1.6rem;
  padding: 0 0 1rem;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
}
.reperes-article li { max-width: none; }
.reperes-article .repere-angle {
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-sombre);
}

.chapo-article {
  position: relative;
  margin: 0 0 2rem;
  padding: 0.2rem 0 0.2rem 1.6rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: var(--mesure-article);
}
.chapo-article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 8px;
  background: no-repeat center/100% 100% var(--meandre-bord);
}

.cliche-article {
  margin: 0 0 2.4rem;
  position: relative;
  border-radius: var(--rayon-cliche);
  overflow: hidden;
  background: var(--opaline);
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px var(--filet);
}
.cliche-article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon-cliche);
}
.cliche-article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(228, 241, 231, 0.06);
  pointer-events: none;
}

/* ---------- Corps redactionnel, balises nues sans aucune classe ---------- */

.corps-article {
  max-width: var(--mesure-article);
  margin: 0;
}

.corps-article h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--encre);
  margin: 2.8rem 0 0.9rem;
  padding-top: 1.4rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
}
.corps-article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.corps-article h3 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--encre);
  margin: 1.9rem 0 0.6rem;
}

.corps-article p {
  margin: 0 0 1.1rem;
  max-width: var(--mesure-article);
}

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

.corps-article a {
  color: var(--vert-sombre);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--filet);
  text-underline-offset: 3px;
}
.corps-article a:hover { text-decoration-color: var(--vert); }

.corps-article ul,
.corps-article ol {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.corps-article ol { counter-reset: fil-article; }
.corps-article li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.6rem;
  max-width: var(--mesure-article);
}
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 12px;
  background: no-repeat center/100% 100% var(--puce-meandre);
}
.corps-article ol > li::before {
  counter-increment: fil-article;
  content: counter(fil-article);
  position: absolute;
  left: 0;
  top: -0.15em;
  font-family: var(--plume);
  font-size: 1.15rem;
  color: var(--vert);
  line-height: 1.4;
}
.corps-article li > ul,
.corps-article li > ol { margin: 0.5rem 0 0; }

.corps-article table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  margin: 1.8rem 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  overflow: hidden;
}
.corps-article caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--encre-douce);
}
.corps-article th,
.corps-article td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--filet);
}
.corps-article thead th {
  font-weight: 600;
  color: var(--encre);
  background: var(--opaline);
  box-shadow: var(--gaufre-haut);
}
.corps-article tbody tr:last-child td { border-bottom: 0; }
.corps-article tbody th { font-weight: 600; color: var(--encre); }

.corps-article blockquote {
  position: relative;
  margin: 1.8rem 0;
  padding: 1.3rem 1.4rem 1.2rem 2.2rem;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
}
.corps-article blockquote::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 8px;
  background: no-repeat center/100% 100% var(--meandre-bord);
}
.corps-article blockquote p { color: var(--encre-douce); }
.corps-article blockquote p:first-child {
  font-family: var(--plume);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--vert-sombre);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  position: relative;
  margin: 1.8rem 0;
  padding: 1.3rem 1.4rem 1.2rem 2.2rem;
  background-color: var(--opaline);
  background-image: repeating-linear-gradient(
    180deg,
    #ffffff 0, #ffffff 1px,
    var(--filet) 1px, var(--filet) 2px,
    rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 22px
  );
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas);
}
.corps-article aside::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 8px;
  background: no-repeat center/100% 100% var(--meandre-bord);
}
.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: 1.8rem 0; }
.corps-article figure img { border-radius: var(--rayon-cliche); }
.corps-article figcaption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--encre-douce);
  max-width: 46ch;
}

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

.appel-article {
  margin: 2.8rem 0 0;
  max-width: var(--mesure-article);
  padding: 1.6rem 1.6rem 1.7rem;
  background: var(--opaline);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas);
}
.appel-article p { margin: 0 0 1.1rem; }
.appel-article .paire-boutons { margin: 0; }

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

.encart-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
  margin: 2.6rem 0 0;
  max-width: var(--mesure-article);
  padding: 1.5rem 1.5rem 1.4rem 2.2rem;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
}
.encart-auteur img {
  border-radius: 24px 6px 24px 6px;
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px var(--filet);
}
.encart-auteur .auteur-nom {
  font-family: var(--titre);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--encre);
  margin: 0 0 0.2rem;
  max-width: none;
}
.encart-auteur .auteur-role {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 0.6rem;
}
.encart-auteur p { font-size: 0.95rem; color: var(--encre-douce); margin: 0 0 0.6rem; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi {
  margin-top: 3.4rem;
  padding-top: 2.2rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg, #ffffff 0 1px, var(--filet) 1px 2px) 1;
}
.lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.carte-lire {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem 1.2rem 1.2rem 2rem;
  background: var(--papier);
  border-radius: var(--rayon-fiche);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), var(--contour-filet);
  max-width: none;
  transition: box-shadow 240ms ease, transform 240ms ease;
}
.carte-lire:hover,
.carte-lire:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--gaufre-haut), var(--gaufre-bas), 0 0 0 2px var(--filet);
}
.carte-lire .meandre { left: 9px; top: 16px; bottom: 16px; }
.carte-lire__cliche {
  display: block;
  margin-bottom: 0.9rem;
  border-radius: var(--rayon-cliche);
  overflow: hidden;
  background: var(--opaline);
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px var(--filet);
}
.carte-lire__cliche img { display: block; width: 100%; height: auto; border-radius: var(--rayon-cliche); }
.carte-lire__titre {
  font-family: var(--titre);
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--encre);
  margin: 0 0 0.45rem;
  max-width: none;
}
.carte-lire__titre a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.carte-lire__titre a:hover { color: var(--vert-sombre); border-bottom-color: var(--vert); }
.carte-lire__accroche { font-size: 0.9rem; color: var(--encre-douce); margin: 0; max-width: none; }

/* ---------- Trace du meandre sur les cartes hautes ----------------------- */
/* Les cartes du magazine sont plus hautes que les fiches de la page d accueil:
   le trait a besoin d une reserve de tirets plus longue pour se dessiner d un
   seul geste, du haut de la carte jusqu en bas. */

.feuillet .meandre path,
.carte-lire .meandre path,
.encart-auteur .meandre path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 420ms ease;
}
.feuillet.trace-faite .meandre path,
.carte-lire.trace-faite .meandre path,
.encart-auteur.trace-faite .meandre path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .feuillet .meandre path,
  .carte-lire .meandre path,
  .encart-auteur .meandre path { stroke-dashoffset: 0; }
}

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

@media (max-width: 1080px) {
  .sommaire-magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lire-aussi__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .titre-bloc { font-size: 1.35rem; }
  .corps-article h2 { font-size: 1.6rem; }
  .sommaire-magazine,
  .lire-aussi__grille { grid-template-columns: 1fr; }
  .releve--magazine, .releve--article, .releve--derniers { padding: 3.2rem 0; }
  .encart-auteur { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 700px) {
  /* Un tableau large defile dans sa propre boite plutot que d elargir la page. */
  .corps-article table { display: block; overflow-x: auto; }
}

@media print {
  .lire-aussi, .appel-article { display: none; }
  .corps-article { 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}