/* ==========================================================================
   Doleancia, feuille de style unique
   Vocabulaire des classes: paraphe, planche, feuillet, gouttiere, empreinte,
   visa, cachet, reglure, bareme, dossier, guichet, bordereau, pied.
   ========================================================================== */

:root {
  --registre: #F0F7F4;
  --registre-alt: #E4EEEA;
  --registre-appuye: #DCEAE5;
  --surface: #FBFEFC;
  --encre: #08241F;
  --encre-douce: #4A6660;
  --sceau: #06715B;
  --sceau-appuye: #055945;
  --sceau-texte: #F3FCF8;
  --echeance: #A64F08;
  --filet: #B4CFC6;

  --titre: "Poppins", "Segoe UI", Arial, sans-serif;
  --courant: "Nunito", "Segoe UI", Arial, sans-serif;
  --main: "Gloria Hallelujah", "Comic Sans MS", cursive;

  --gouttiere: 56px;
  --entete: 72px;
  --pas: 40px;
  --colonne: 96px;

  --ombre-posee: 0 1px 3px rgba(8, 36, 31, 0.10);
  --ombre-levee: 0 10px 22px rgba(8, 36, 31, 0.16);
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--registre);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

h1 { font-size: 3.25rem; font-weight: 700; }
h2 { font-size: 2.125rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1.1em; max-width: 68ch; }

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

ul { margin: 0 0 1.1em; padding-left: 1.1rem; }
li { margin-bottom: 0.45em; }

strong { font-weight: 800; }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(6, 113, 91, 0.38);
  border-radius: 2px;
}

::selection {
  background: rgba(6, 113, 91, 0.20);
  color: var(--encre);
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sceau);
  color: var(--sceau-texte);
  font-family: var(--titre);
  font-weight: 600;
  padding: 12px 20px;
  z-index: 200;
}
.evitement:focus { left: 12px; top: 12px; }

.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Motif signature: reglure de registre a colonnes ---------- */

.reglure {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(74, 102, 96, 0.30) 0,
      rgba(74, 102, 96, 0.30) 1px,
      transparent 1px,
      transparent var(--colonne)),
    repeating-linear-gradient(180deg,
      rgba(74, 102, 96, 0.15) 0,
      rgba(74, 102, 96, 0.15) 1px,
      transparent 1px,
      transparent var(--pas));
  z-index: 0;
}

.reglure--lampe {
  -webkit-mask-image: radial-gradient(120% 110% at 8% 0%, #000 0%, #000 34%, rgba(0, 0, 0, 0.25) 68%, transparent 100%);
  mask-image: radial-gradient(120% 110% at 8% 0%, #000 0%, #000 34%, rgba(0, 0, 0, 0.25) 68%, transparent 100%);
}

/* Filet vert unique pose sur la colonne qui passe derriere la promesse */
.reglure--sceau::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--colonne) * 3);
  width: 1px;
  background: linear-gradient(180deg, rgba(6, 113, 91, 0.85), rgba(6, 113, 91, 0.08));
}

/* ---------- Enveloppe et eventail radial ---------- */

.cadre {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.planche {
  position: relative;
  padding: 96px 0 88px;
  border-top: 1px solid var(--filet);
}

.planche--alt { background: var(--registre-alt); }
.planche--fond { background: var(--registre-appuye); }

.surtitre {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sceau);
  margin: 0 0 14px;
}

.chapeau {
  font-size: 1.125rem;
  color: var(--encre-douce);
  max-width: 68ch;
}

/* L eventail: sept axes ouverts depuis le coin superieur gauche.
   Chaque bloc porte un decalage vertical croissant de gauche a droite. */
.eventail { --pivot: 0; }
.axe-1 { transform: translateY(0); }
.axe-2 { transform: translateY(18px); }
.axe-3 { transform: translateY(38px); }
.axe-4 { transform: translateY(62px); }
.axe-5 { transform: translateY(86px); }
.axe-6 { transform: translateY(112px); }
.axe-7 { transform: translateY(140px); }

/* ---------- Feuillet: la ligne de registre numerotee ---------- */

.feuillet {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 26px 26px 12px;
  padding-left: calc(var(--gouttiere) + 26px);
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe), border-color 220ms var(--courbe);
}

.feuillet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gouttiere);
  width: 1px;
  background: var(--filet);
}

.feuillet__numero {
  position: absolute;
  left: 0;
  top: 22px;
  width: var(--gouttiere);
  text-align: center;
  font-family: var(--main);
  font-size: 1rem;
  color: var(--sceau);
  line-height: 1;
}

.feuillet__empreinte {
  margin: 18px 0 0;
  padding: 8px 0 10px;
  border-top: 1px solid var(--filet);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.feuillet__empreinte span { color: var(--sceau); }

.feuillet:hover,
.feuillet:focus-within {
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
  border-color: var(--sceau);
}

.feuillet .visa {
  position: absolute;
  right: 18px;
  top: 14px;
  font-family: var(--main);
  font-size: 0.95rem;
  color: var(--sceau);
  transform: rotate(-3deg);
}

.visa-ligne {
  font-family: var(--main);
  color: var(--sceau);
  font-size: 1rem;
  margin: 0 0 10px;
}

.visa-ligne--echeance { color: var(--echeance); }

/* ---------- Cachet de cire ---------- */

.cachet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--sceau);
  border-radius: 999px;
  padding: 6px 16px 6px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--encre);
  background: rgba(6, 113, 91, 0.08);
}

.cachet svg { flex: none; }

/* ---------- Boutons: tampons ---------- */

.tampon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: 4px;
  border: 1px solid var(--sceau);
  background: var(--sceau);
  color: var(--sceau-texte);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe), background-color 220ms var(--courbe);
}

.tampon:hover,
.tampon:focus-visible {
  background: var(--sceau-appuye);
  color: var(--sceau-texte);
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
}

.tampon--creux {
  background: transparent;
  border-color: var(--encre-douce);
  color: var(--encre);
}

.tampon--creux:hover,
.tampon--creux:focus-visible {
  background: rgba(8, 36, 31, 0.05);
  border-color: var(--sceau);
  color: var(--encre);
}

.tampon--delai { border-left: 2px solid var(--echeance); }

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

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

.paraphe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--entete);
  z-index: 100;
  background: rgba(240, 247, 244, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow 220ms var(--courbe), border-color 220ms var(--courbe);
}

.paraphe--defile {
  box-shadow: var(--ombre-posee);
  border-bottom: 3px solid var(--sceau);
}

.paraphe__cadre {
  height: var(--entete);
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

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

.marque:hover { color: var(--encre); }

.paraphe__voies {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.paraphe__voies a {
  color: var(--encre);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.paraphe__voies a:hover { color: var(--sceau); }

.paraphe__action { margin-left: 10px; }

.ruban {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--sceau);
  transition: width 90ms linear;
}

.bouton-panneau {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 40px;
  border: 1px solid var(--encre-douce);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  padding: 9px 10px;
}

.bouton-panneau span {
  display: block;
  height: 1px;
  background: var(--encre);
  margin: 5px 0;
}

.panneau {
  position: fixed;
  inset: var(--entete) 0 0 0;
  background: var(--registre);
  z-index: 99;
  padding: 32px 24px 48px;
  overflow-y: auto;
  display: none;
}

.panneau[data-ouvert="oui"] { display: block; }

.panneau ol { list-style: none; margin: 0; padding: 0; }

.panneau li { border-bottom: 1px solid var(--filet); }

.panneau a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  color: var(--encre);
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.125rem;
}

.panneau b {
  font-family: var(--main);
  font-weight: 400;
  color: var(--sceau);
  font-size: 0.95rem;
}

/* ---------- Ouverture, le hero ---------- */

.ouverture {
  position: relative;
  padding: calc(var(--entete) + 84px) 0 92px;
  overflow: hidden;
}

.ouverture__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
}

.ouverture h1 { margin-bottom: 20px; }

.ouverture__accroche {
  font-size: 1.125rem;
  color: var(--encre-douce);
  margin-bottom: 26px;
}

.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

.rassurance {
  border-left: 2px solid var(--sceau);
  padding: 4px 0 4px 18px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  max-width: 60ch;
}

.rassurance b { color: var(--encre); font-weight: 800; }

/* Vignette de registre du hero */
.vignette {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  box-shadow: var(--ombre-posee);
  overflow: hidden;
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe);
}

.vignette:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); }

.vignette__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--filet);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.vignette__ligne {
  position: relative;
  display: grid;
  grid-template-columns: var(--gouttiere) 1fr;
  border-bottom: 1px solid var(--filet);
}

.vignette__ligne:last-of-type { border-bottom: 0; }

.vignette__num {
  border-right: 1px solid var(--filet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--main);
  font-size: 0.95rem;
  color: var(--sceau);
}

.vignette__corps { padding: 12px 16px; }

.vignette__corps p {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.vignette__corps small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}

.vignette__etat {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sceau);
}

.vignette__etat--proche { color: var(--echeance); }

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

.cliche {
  position: relative;
  margin: 0;
  border: 0;
}

.cliche img {
  border: 1px solid var(--filet);
  display: block;
  width: 100%;
}

.cliche::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  right: -6px;
  bottom: -6px;
  border: 1px solid var(--sceau);
  pointer-events: none;
  z-index: -1;
}

.cliche figcaption {
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--encre-douce);
}

.cliche--hero { margin-top: 28px; }

/* ---------- Constat, colonnes de hauteurs decroissantes ---------- */

.constat__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
  align-items: start;
}

.indice {
  position: relative;
  border-top: 3px solid var(--filet);
  padding: 20px 18px 18px calc(var(--gouttiere) - 10px);
  background: rgba(251, 254, 252, 0.72);
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe), border-color 220ms var(--courbe);
}

.indice::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gouttiere) - 28px);
  width: 1px;
  background: var(--filet);
}

.indice__numero {
  position: absolute;
  left: 0;
  top: 18px;
  width: calc(var(--gouttiere) - 28px);
  text-align: center;
  font-family: var(--main);
  color: var(--echeance);
  font-size: 1rem;
}

.indice h3 { font-size: 1.0625rem; }

.indice p { font-size: 0.9375rem; color: var(--encre-douce); margin-bottom: 0; }

.indice:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); border-top-color: var(--echeance); }

.constat__verdict {
  margin-top: 56px;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--echeance);
  background: var(--surface);
  padding: 28px 30px 12px;
  box-shadow: var(--ombre-posee);
}

.constat__verdict p:last-child { margin-bottom: 1.1em; }

/* ---------- Chaine, les quatre etapes sur quatre axes ---------- */

.chaine__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 48px;
  align-items: start;
}

.etape { position: relative; }

.etape h3 { margin-top: 14px; }

.etape p { font-size: 0.9375rem; color: var(--encre-douce); }

.chaine__appui {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 88px;
}

/* ---------- Lignes, les fonctionnalites ---------- */

.liasse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 48px;
  align-items: start;
}

.liasse .feuillet:nth-child(3n+2) { transform: translateY(22px); }
.liasse .feuillet:nth-child(3n+3) { transform: translateY(44px); }

.liasse .feuillet:nth-child(3n+2):hover { transform: translateY(18px); }
.liasse .feuillet:nth-child(3n+3):hover { transform: translateY(40px); }

.liasse .feuillet p { font-size: 0.9375rem; color: var(--encre-douce); }

/* ---------- Controle, les avantages ---------- */

.gains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 44px;
}

.gain {
  border: 1px solid var(--filet);
  background: var(--registre-alt);
  padding: 26px 28px 14px;
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe);
}

.gain:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); }

.gain__chiffre {
  font-family: var(--main);
  font-size: 2.5rem;
  color: var(--sceau);
  line-height: 1.1;
  display: block;
  margin-bottom: 8px;
}

.gain p { font-size: 0.9375rem; color: var(--encre-douce); }

.controle__appui {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  margin-top: 80px;
}

/* ---------- Visas, preuve sociale ---------- */

.depots {
  margin-top: 44px;
  display: grid;
  gap: 26px;
  max-width: 78ch;
}

.depose {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 26px 28px 12px;
  padding-left: calc(var(--gouttiere) + 26px);
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe);
}

.depose::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--gouttiere);
  width: 1px;
  background: var(--filet);
}

.depose:nth-child(2) { margin-left: 40px; }
.depose:nth-child(3) { margin-left: 80px; }

.depose:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); }

.depose__numero {
  position: absolute;
  left: 0; top: 24px;
  width: var(--gouttiere);
  text-align: center;
  font-family: var(--main);
  color: var(--sceau);
}

.depose blockquote { margin: 0; }

.depose blockquote p { font-size: 1.0625rem; }

.depose figcaption {
  border-top: 1px solid var(--filet);
  padding-top: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--encre-douce);
  margin-bottom: 12px;
}

.depose figcaption b { color: var(--encre); display: block; font-weight: 800; }

.bordereau {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--filet);
  background: var(--registre-alt);
  box-shadow: var(--ombre-posee);
}

.bordereau div {
  padding: 26px 22px;
  border-right: 1px solid var(--filet);
}

.bordereau div:last-child { border-right: 0; }

.bordereau b {
  display: block;
  font-family: var(--main);
  font-size: 2.5rem;
  color: var(--sceau);
  line-height: 1.1;
  font-weight: 400;
}

.bordereau span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--encre-douce);
  margin-top: 6px;
}

/* ---------- Bareme, les tarifs ---------- */

.bareme {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 48px;
  align-items: start;
}

.formule {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 30px 28px 28px;
  box-shadow: var(--ombre-posee);
  overflow: hidden;
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe), border-color 220ms var(--courbe);
}

.formule > * { position: relative; z-index: 1; }

.formule .reglure { opacity: 0.5; }

.formule:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); border-color: var(--sceau); }

.formule--phare {
  border-color: var(--sceau);
  transform: translateY(-16px);
}

.formule--phare:hover { transform: translateY(-20px); }

.formule__marque {
  display: inline-block;
  font-family: var(--main);
  font-size: 0.95rem;
  color: var(--sceau);
  margin-bottom: 10px;
}

.formule__prix {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  display: block;
  margin: 12px 0 4px;
}

.formule__unite {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--encre-douce);
  margin-bottom: 14px;
}

.formule__cible {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: 14px 0;
  margin-bottom: 18px;
}

.formule ul { list-style: none; padding: 0; margin: 0 0 22px; }

.formule li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  border-bottom: 1px solid rgba(180, 207, 198, 0.8);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.formule li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sceau);
}

.bareme__note {
  margin-top: 42px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  border-left: 2px solid var(--filet);
  padding-left: 18px;
}

/* ---------- Dossier, la FAQ ---------- */

.dossier {
  margin-top: 44px;
  max-width: 78ch;
}

.dossier details {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  margin-bottom: 14px;
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe);
}

.dossier details[open] {
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
  border-color: var(--sceau);
}

.dossier summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px calc(var(--gouttiere) + 20px);
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
}

.dossier summary::-webkit-details-marker { display: none; }

.dossier summary::before {
  content: "";
  position: absolute;
  left: var(--gouttiere);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--filet);
}

.dossier summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 15px;
  font-size: 1.4rem;
  color: var(--sceau);
  line-height: 1;
}

.dossier details[open] summary::after { content: "\2212"; }

.dossier__numero {
  position: absolute;
  left: 0;
  top: 18px;
  width: var(--gouttiere);
  text-align: center;
  font-family: var(--main);
  font-weight: 400;
  color: var(--sceau);
  font-size: 0.95rem;
}

.dossier__reponse {
  padding: 0 28px 6px calc(var(--gouttiere) + 20px);
  border-top: 1px solid var(--filet);
  padding-top: 16px;
}

.dossier__reponse p { font-size: 0.9375rem; color: var(--encre-douce); }

/* ---------- Guichet, le formulaire ---------- */

.guichet__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  margin-top: 44px;
  align-items: start;
}

.guichet__aparte {
  border: 1px solid var(--filet);
  background: var(--registre-alt);
  padding: 26px 26px 12px;
  box-shadow: var(--ombre-posee);
}

.guichet__aparte p { font-size: 0.9375rem; color: var(--encre-douce); }

.formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.champ { display: flex; flex-direction: column; gap: 7px; }

.champ--large { grid-column: 1 / -1; }

.champ label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--encre);
}

.champ input,
.champ select,
.champ textarea {
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--encre-douce);
  border-radius: 4px;
  padding: 12px 14px;
  width: 100%;
}

.champ textarea { resize: vertical; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--sceau); }

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

.consentement {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  padding-top: 18px;
}

.consentement input {
  margin-top: 5px;
  width: 18px;
  height: 18px;
  accent-color: var(--sceau);
  flex: none;
}

.formulaire__pied {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.formulaire__pied p { margin: 0; font-size: 0.8125rem; color: var(--encre-douce); }

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

.pied {
  position: relative;
  background: var(--registre-alt);
  border-top: 1px solid var(--filet);
  padding: 72px 0 0;
  overflow: hidden;
}

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.pied h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sceau);
  font-family: var(--courant);
  font-weight: 700;
  margin-bottom: 16px;
}

.pied ul { list-style: none; padding: 0; margin: 0; }

.pied li { margin-bottom: 10px; }

.pied a { color: var(--encre); text-decoration: none; font-size: 0.9375rem; }

.pied a:hover { color: var(--sceau); text-decoration: underline; }

.pied p { font-size: 0.9375rem; color: var(--encre-douce); }

.pied__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
}

.pied__social a { font-size: 0.8125rem; font-weight: 700; }

.pied__barre {
  margin-top: 56px;
  border-top: 1px solid var(--filet);
  padding: 22px 0 28px;
  font-size: 0.8125rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
}

.pied__barre p { margin: 0; font-size: 0.8125rem; }

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

.texte-long { padding: calc(var(--entete) + 64px) 0 80px; position: relative; }

.texte-long h1 { font-size: 2.625rem; }

.texte-long h2 { font-size: 1.5rem; margin-top: 2em; }

.texte-long h3 { font-size: 1.125rem; margin-top: 1.6em; }

.texte-long .cadre { max-width: 860px; }

.fil {
  font-size: 0.8125rem;
  color: var(--encre-douce);
  margin-bottom: 24px;
}

.fil a { color: var(--encre-douce); }

.encart {
  border: 1px solid var(--filet);
  border-left: 3px solid var(--sceau);
  background: var(--surface);
  padding: 24px 26px 8px;
  margin: 32px 0;
  box-shadow: var(--ombre-posee);
}

.encart p { font-size: 0.9375rem; }

.portrait {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin: 32px 0 40px;
}

.portrait img { border: 1px solid var(--filet); }

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

.liste-plan { list-style: none; padding: 0; }

.liste-plan li {
  border-bottom: 1px solid var(--filet);
  padding: 16px 0 16px calc(var(--gouttiere) - 10px);
  position: relative;
}

.liste-plan li::before {
  content: attr(data-entree);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: var(--main);
  color: var(--sceau);
  font-size: 0.95rem;
}

.liste-plan a { font-family: var(--titre); font-weight: 600; font-size: 1.0625rem; }

.liste-plan p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--encre-douce); }

.centre-court {
  padding: calc(var(--entete) + 110px) 0 120px;
  text-align: center;
  position: relative;
}

.centre-court p { margin-inline: auto; }

.centre-court .tampon { margin: 8px 6px 0; }

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

.paraitre {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--courbe), transform 520ms var(--courbe);
}

.paraitre.est-visible { opacity: 1; transform: translateY(0); }

/* ---------- Reponses aux tailles d ecran ---------- */

@media (max-width: 1080px) {
  h1 { font-size: 2.75rem; }
  .constat__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chaine__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liasse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bareme { grid-template-columns: 1fr; }
  .formule--phare { transform: none; }
  .formule--phare:hover { transform: translateY(-4px); }
}

@media (max-width: 900px) {
  :root { --entete: 64px; }

  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.625rem; }

  .paraphe__voies { display: none; }
  .paraphe__action { display: none; }
  .bouton-panneau { display: block; }

  .ouverture { padding-top: calc(var(--entete) + 48px); }
  .ouverture__grille { grid-template-columns: 1fr; gap: 40px; }

  .chaine__appui,
  .controle__appui,
  .guichet__grille { grid-template-columns: 1fr; gap: 34px; }

  .liasse { grid-template-columns: 1fr; }
  .gains { grid-template-columns: 1fr; }
  .bordereau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bordereau div:nth-child(2) { border-right: 0; }
  .bordereau div:nth-child(1),
  .bordereau div:nth-child(2) { border-bottom: 1px solid var(--filet); }

  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .formulaire { grid-template-columns: 1fr; }

  .portrait { grid-template-columns: 1fr; }

  /* L eventail se replie: simple retrait de 12 pixels par element */
  .axe-1, .axe-2, .axe-3, .axe-4, .axe-5, .axe-6, .axe-7 { transform: none; }
  .liasse .feuillet:nth-child(3n+2),
  .liasse .feuillet:nth-child(3n+3),
  .liasse .feuillet:nth-child(3n+2):hover,
  .liasse .feuillet:nth-child(3n+3):hover { transform: none; }
  .liasse .feuillet:nth-child(2n) { margin-left: 12px; }
  .depose:nth-child(2) { margin-left: 12px; }
  .depose:nth-child(3) { margin-left: 24px; }
  .liasse .feuillet:hover,
  .depose:hover { transform: translateY(-4px); }
}

@media (max-width: 560px) {
  .cadre,
  .paraphe__cadre { width: calc(100% - 32px); }
  .planche { padding: 64px 0 60px; }
  .bordereau { grid-template-columns: 1fr; }
  .bordereau div { border-right: 0; border-bottom: 1px solid var(--filet); }
  .bordereau div:last-child { border-bottom: 0; }
  .pied__grille { grid-template-columns: 1fr; }
  .feuillet,
  .depose { padding-left: calc(var(--gouttiere) + 14px); padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .paraitre { opacity: 1; transform: none; }

  .feuillet:hover,
  .depose:hover,
  .gain:hover,
  .indice:hover,
  .formule:hover,
  .vignette:hover,
  .tampon:hover,
  .tampon:focus-visible,
  .dossier details[open] { transform: none; }
}

@media print {
  .paraphe, .panneau, .ruban { display: none; }
  body { background: #fff; color: var(--encre); }
}

/* ==========================================================================
   Magazine: Le Grand Livre du courtage
   Section ajoutee en fin de feuille, aucune regle precedente n est modifiee.
   Meme palette, meme gouttiere de registre numerotee, meme reglure a colonnes
   et meme ombre qui se souleve au survol que le reste du site.
   Vocabulaire: magazine, parution, ecriture, corps-registre, suite.
   ========================================================================== */

/* ---------- Titre de colonne du pied, equivalent de .pied h3 ----------
   Les pages du magazine reservent h2 et h3 au corps redactionnel:
   les intitules du pied de page passent donc en paragraphe. */

.pied__titre {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sceau);
  margin: 0 0 16px;
}

/* ---------- Mesure de lecture ---------- */

.cadre--lecture { width: min(880px, calc(100% - 48px)); }

/* ---------- Page d index du magazine ---------- */

.magazine {
  position: relative;
  padding: calc(var(--entete) + 64px) 0 88px;
}

.magazine__entete {
  border-bottom: 1px solid var(--filet);
  padding-bottom: 34px;
  margin-bottom: 52px;
  max-width: 78ch;
}

.magazine__entete h1 { margin-bottom: 22px; }

.magazine__chapeau {
  font-size: 1.125rem;
  color: var(--encre-douce);
  max-width: 68ch;
}

.magazine__mention {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.magazine__mention span { color: var(--sceau); }

/* ---------- Grille des parutions ---------- */

.parutions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

/* L eventail radial: chaque colonne descend d un cran de plus */
.parutions .parution:nth-child(3n+2) { transform: translateY(22px); }
.parutions .parution:nth-child(3n+3) { transform: translateY(44px); }
.parutions .parution:nth-child(3n+2):hover,
.parutions .parution:nth-child(3n+2):focus-within { transform: translateY(18px); }
.parutions .parution:nth-child(3n+3):hover,
.parutions .parution:nth-child(3n+3):focus-within { transform: translateY(40px); }

/* ---------- Carte d article: une ligne du grand livre ---------- */

.parution {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding-left: var(--gouttiere);
  overflow: hidden;
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe), border-color 220ms var(--courbe);
}

/* Filet vertical continu qui separe la gouttiere du contenu */
.parution::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gouttiere);
  width: 1px;
  background: var(--filet);
  z-index: 2;
}

/* Numero d entree imprime dans la gouttiere, de la main du courtier */
.parution::after {
  content: attr(data-entree);
  position: absolute;
  left: 0;
  top: 16px;
  width: var(--gouttiere);
  text-align: center;
  font-family: var(--main);
  font-size: 1rem;
  line-height: 1;
  color: var(--sceau);
}

.parution:hover,
.parution:focus-within {
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
  border-color: var(--sceau);
}

.parution__vue {
  margin: 0;
  border-bottom: 1px solid var(--filet);
}

.parution__vue img {
  width: 100%;
  height: auto;
  display: block;
}

.parution__texte {
  padding: 20px 22px 4px;
  flex: 1 1 auto;
}

.parution__angle {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sceau);
}

.parution__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.parution__titre a {
  color: var(--encre);
  text-decoration: none;
}

.parution__titre a:hover,
.parution__titre a:focus-visible { color: var(--sceau); }

.parution__extrait {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin-bottom: 1em;
  max-width: none;
}

/* Reglure horizontale de pied, dans le traitement des empreintes du registre */
.parution__empreinte {
  margin: 0;
  padding: 9px 22px 10px;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.parution__empreinte span { color: var(--sceau); }

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

.derniers { position: relative; }

.derniers .parutions { margin-top: 0; }

.derniers__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: 44px;
}

.derniers__entete .chapeau { margin-bottom: 0; }

.derniers__suite {
  margin-top: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

.derniers__suite p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  border-left: 2px solid var(--filet);
  padding-left: 18px;
  max-width: 52ch;
}

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

.ecriture {
  position: relative;
  padding: calc(var(--entete) + 56px) 0 88px;
}

.ecriture__entete {
  border-bottom: 1px solid var(--filet);
  padding-bottom: 26px;
  margin-bottom: 34px;
}

.ecriture__entete h1 {
  font-size: 2.75rem;
  margin-bottom: 22px;
}

.ecriture__marque {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.ecriture__valeur { color: var(--encre); }

.ecriture__marque a { color: var(--sceau); text-decoration: none; }

.ecriture__marque a:hover { color: var(--encre); text-decoration: underline; }

/* Chapeau en exergue typographique, pose comme une entree de registre */
.exergue {
  position: relative;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--sceau);
  border-radius: 4px;
  padding: 24px 26px;
  margin: 0 0 36px;
  max-width: none;
  box-shadow: var(--ombre-posee);
}

.ecriture__cliche { margin: 0 0 44px; }

.ecriture__cliche figcaption { max-width: 68ch; }

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

.corps-registre {
  max-width: 68ch;
  counter-reset: entree-registre;
}

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

.corps-registre h2 {
  counter-increment: entree-registre;
  position: relative;
  font-size: 2.125rem;
  font-weight: 600;
  margin: 2.1em 0 0.6em;
  padding-left: calc(var(--gouttiere) + 22px);
  min-height: 1.4em;
}

/* La gouttiere numerotee du registre, reprise pour chaque grande partie */
.corps-registre h2::before {
  content: counter(entree-registre, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.18em;
  width: var(--gouttiere);
  text-align: center;
  font-family: var(--main);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sceau);
}

.corps-registre h2::after {
  content: "";
  position: absolute;
  left: var(--gouttiere);
  top: 0;
  bottom: 0.1em;
  width: 1px;
  background: var(--filet);
}

.corps-registre h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.9em 0 0.5em;
  padding-left: 18px;
  border-left: 2px solid var(--sceau);
}

.corps-registre p {
  margin: 0 0 1.15em;
  max-width: none;
}

.corps-registre ul,
.corps-registre ol {
  margin: 0 0 1.4em;
  padding: 0 0 0 calc(var(--gouttiere) - 12px);
  list-style: none;
  counter-reset: point-registre;
}

.corps-registre li {
  position: relative;
  margin-bottom: 0.6em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid rgba(180, 207, 198, 0.8);
}

.corps-registre li:last-child { border-bottom: 0; }

.corps-registre ul > li::before {
  content: "";
  position: absolute;
  left: calc(18px - var(--gouttiere));
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--sceau);
}

.corps-registre ol > li { counter-increment: point-registre; }

.corps-registre ol > li::before {
  content: counter(point-registre, decimal-leading-zero);
  position: absolute;
  left: calc(12px - var(--gouttiere));
  top: 0.1em;
  width: calc(var(--gouttiere) - 24px);
  text-align: right;
  font-family: var(--main);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sceau);
}

.corps-registre li ul,
.corps-registre li ol { margin: 0.6em 0 0; }

.corps-registre strong { color: var(--encre); font-weight: 800; }

.corps-registre em { font-style: italic; color: var(--encre); }

.corps-registre a { color: var(--sceau); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.corps-registre a:hover { color: var(--encre); }

/* Tableau recapitulatif: la reglure a colonnes du grand livre */
.corps-registre table {
  width: 100%;
  margin: 0 0 1.8em;
  border-collapse: collapse;
  border: 1px solid var(--filet);
  background: var(--surface);
  font-size: 0.9375rem;
  box-shadow: var(--ombre-posee);
}

.corps-registre thead { background: var(--registre-alt); }

.corps-registre th {
  text-align: left;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sceau);
  padding: 12px 14px;
  border: 1px solid var(--filet);
  vertical-align: bottom;
}

.corps-registre td {
  padding: 12px 14px;
  border: 1px solid var(--filet);
  color: var(--encre-douce);
  vertical-align: top;
}

.corps-registre tbody tr:nth-child(even) { background: rgba(228, 238, 234, 0.7); }

.corps-registre td strong { color: var(--encre); }

/* Encadre recapitulatif */
.corps-registre aside {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--sceau);
  border-radius: 4px;
  padding: 24px 26px 8px;
  margin: 2em 0;
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe);
}

.corps-registre aside:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); }

.corps-registre aside p { font-size: 0.9375rem; color: var(--encre-douce); }

.corps-registre aside p:first-child { color: var(--encre); }

.corps-registre aside ul,
.corps-registre aside ol { margin-bottom: 1em; }

/* Citation */
.corps-registre blockquote {
  position: relative;
  margin: 2em 0;
  padding: 22px 26px 6px calc(var(--gouttiere) + 12px);
  background: var(--registre-alt);
  border: 1px solid var(--filet);
  border-radius: 4px;
  box-shadow: var(--ombre-posee);
}

.corps-registre blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gouttiere);
  width: 1px;
  background: var(--sceau);
}

.corps-registre blockquote p {
  font-size: 1.0625rem;
  color: var(--encre);
}

.corps-registre figure { margin: 2em 0; }

.corps-registre figure img { border: 1px solid var(--filet); }

.corps-registre figcaption {
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--encre-douce);
}

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

.appel-registre {
  position: relative;
  margin: 52px 0 44px;
  padding: 30px 32px 10px;
  padding-left: calc(var(--gouttiere) + 30px);
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe), border-color 220ms var(--courbe);
}

.appel-registre::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gouttiere);
  width: 1px;
  background: var(--filet);
}

.appel-registre:hover {
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
  border-color: var(--sceau);
}

.appel-registre__mention {
  font-family: var(--main);
  font-size: 1rem;
  color: var(--sceau);
  margin: 0 0 10px;
}

.appel-registre__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 12px;
}

.appel-registre p { font-size: 0.9375rem; color: var(--encre-douce); }

.appel-registre .tampon { margin-bottom: 22px; }

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

.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin: 44px 0;
  padding: 28px 30px 12px;
  background: var(--registre-alt);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--sceau);
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe);
}

.encart-auteur:hover { box-shadow: var(--ombre-levee); transform: translateY(-4px); }

.encart-auteur img {
  border: 1px solid var(--filet);
  width: 96px;
  height: 96px;
}

.encart-auteur__role {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sceau);
  margin-bottom: 8px;
}

.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 10px;
}

.encart-auteur p { font-size: 0.9375rem; color: var(--encre-douce); }

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

.lire-aussi {
  margin-top: 56px;
  border-top: 1px solid var(--filet);
  padding-top: 34px;
}

.lire-aussi__titre {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sceau);
  margin: 0 0 26px;
}

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

.suite {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding-left: 34px;
  overflow: hidden;
  box-shadow: var(--ombre-posee);
  transition: box-shadow 220ms var(--courbe), transform 220ms var(--courbe), border-color 220ms var(--courbe);
}

.suite::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  width: 1px;
  background: var(--filet);
  z-index: 2;
}

.suite:hover,
.suite:focus-within {
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
  border-color: var(--sceau);
}

.suite img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--filet);
}

.suite__texte { padding: 16px 18px 6px; }

.suite__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.suite__titre a { color: var(--encre); text-decoration: none; }

.suite__titre a:hover,
.suite__titre a:focus-visible { color: var(--sceau); }

.suite__accroche {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-bottom: 1em;
  max-width: none;
}

/* ---------- Reponses aux tailles d ecran, magazine ---------- */

@media (max-width: 1080px) {
  .parutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parutions .parution:nth-child(3n+2),
  .parutions .parution:nth-child(3n+3),
  .parutions .parution:nth-child(3n+2):hover,
  .parutions .parution:nth-child(3n+3):hover,
  .parutions .parution:nth-child(3n+2):focus-within,
  .parutions .parution:nth-child(3n+3):focus-within { transform: none; }
  .parutions .parution:nth-child(2n) { margin-top: 26px; }
  .parutions .parution:hover,
  .parutions .parution:focus-within { transform: translateY(-4px); }
  .ecriture__entete h1 { font-size: 2.25rem; }
}

@media (max-width: 900px) {
  .magazine { padding-top: calc(var(--entete) + 44px); }
  .ecriture { padding-top: calc(var(--entete) + 36px); }
  .ecriture__entete h1 { font-size: 2.125rem; }
  .corps-registre h2 { font-size: 1.625rem; }
  .lire-aussi__grille { grid-template-columns: 1fr; }
  .encart-auteur { grid-template-columns: 1fr; gap: 18px; }
  .derniers__entete { display: block; }
  .derniers__entete .chapeau { margin-bottom: 22px; }
}

@media (max-width: 560px) {
  .cadre--lecture { width: calc(100% - 32px); }
  .parutions { grid-template-columns: 1fr; }
  .parutions .parution:nth-child(2n) { margin-top: 0; }
  .exergue { padding: 20px; font-size: 1.0625rem; }
  .appel-registre { padding-left: calc(var(--gouttiere) + 14px); padding-right: 18px; }
  .corps-registre h2 { padding-left: calc(var(--gouttiere) - 8px); }
  .corps-registre h2::before { width: calc(var(--gouttiere) - 22px); }
  .corps-registre h2::after { left: calc(var(--gouttiere) - 20px); }
  .corps-registre table { font-size: 0.8125rem; }
  .corps-registre th,
  .corps-registre td { padding: 9px 10px; }
  .corps-registre blockquote { padding-left: calc(var(--gouttiere) - 8px); }
  .corps-registre blockquote::before { left: calc(var(--gouttiere) - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .parution:hover,
  .parution:focus-within,
  .parutions .parution:nth-child(3n+2):hover,
  .parutions .parution:nth-child(3n+3):hover,
  .suite:hover,
  .suite:focus-within,
  .appel-registre:hover,
  .encart-auteur:hover,
  .corps-registre aside:hover { transform: none; }
}

@media print {
  .parution,
  .suite,
  .appel-registre,
  .encart-auteur,
  .corps-registre aside,
  .corps-registre blockquote,
  .exergue { box-shadow: none; }
}