/* ==========================================================================
   Seuilia, feuille de style unique
   Vocabulaire de classes emprunte au grand livre de tresorerie associative:
   reglure (bande pleine largeur), colonne-utile (conteneur), filet, bordereau,
   mandat, tampon, chiffrier, temoignage, question, fente (revelation).
   ========================================================================== */

:root {
  --fond: #EFF2E2;
  --fond-alt: #E3E8CE;
  --surface: #FAFBF2;
  --texte: #1E2119;
  --texte-doux: #4A5140;
  --accent: #843C96;
  --accent-fonce: #6A2E79;
  --accent-texte: #FFFFFF;
  --vert-registre: #4C6A1B;
  --bordure: #C6CDAE;
  --ardoise: #1E2119;
  --ardoise-clair: #2C3126;

  --titre: "Abril Fatface", Georgia, "Times New Roman", serif;
  --courant: "Public Sans", "Segoe UI", Arial, sans-serif;
  --chiffre: "Eczar", Georgia, "Times New Roman", serif;

  --colonne: 1180px;
  --filet: 3px;
  --entete: 72px;

  --motif-anneaux: repeating-radial-gradient(circle at 50% 50%,
      transparent 0, transparent 22px,
      rgba(132, 60, 150, 0.05) 22px, rgba(132, 60, 150, 0.05) 24px);
}

*, *::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(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

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

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

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

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

/* --------------------------------------------------------------------------
   Titres et blocs de texte
   -------------------------------------------------------------------------- */

h1, h2 {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: none;
  line-height: 1.12;
  margin: 0 0 18px;
}

h1 { font-size: 3.4rem; }
h2 { font-size: 2.3rem; }

h3 {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 10px;
}

h4 {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0 0 8px;
}

p { margin: 0 0 16px; max-width: 68ch; }

.chapeau {
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--texte-doux);
  max-width: 62ch;
}

.mention-article {
  font-size: 0.875rem;
  color: var(--texte-doux);
  max-width: 72ch;
}

.surtitre {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.pastille-anneau {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vert-registre);
  box-shadow: inset 0 0 0 4px var(--accent);
  flex: none;
}

.montant {
  font-family: var(--chiffre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.montant--majeur { font-size: 3rem; line-height: 1; display: block; }
.montant--median { font-size: 2rem; line-height: 1.05; display: block; }
.montant--menu { font-size: 1.5rem; line-height: 1.1; }

/* Cercle ferme: sous tolerance. Cercle ouvert: hors tolerance. */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.etat::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
}
.etat--ferme { color: var(--vert-registre); }
.etat--ferme::before { border: 2px solid var(--vert-registre); }
.etat--ouvert { color: var(--accent); }
.etat--ouvert::before {
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Bandes horizontales alternees, archetype de grille
   -------------------------------------------------------------------------- */

.reglure {
  width: 100%;
  padding: 84px 0;
  border-bottom: var(--filet) solid var(--bordure);
  position: relative;
}

.reglure--pale {
  background-color: var(--fond);
  background-image: var(--motif-anneaux);
  background-size: 260px 260px;
}

.reglure--dense {
  background-color: var(--fond-alt);
  background-image: var(--motif-anneaux);
  background-size: 260px 260px;
}

.reglure--ardoise {
  background-color: var(--ardoise);
  color: var(--fond);
  border-bottom-color: var(--ardoise-clair);
}

.reglure--ardoise h1,
.reglure--ardoise h2,
.reglure--ardoise h3,
.reglure--ardoise h4 { color: var(--fond); }

.reglure--ardoise p,
.reglure--ardoise li { color: #D6DCC4; }

.reglure--ardoise .surtitre { color: #C79CD4; }
.reglure--ardoise .pastille-anneau { background: #C79CD4; box-shadow: inset 0 0 0 4px var(--fond); }
.reglure--ardoise .mention-article { color: #A9B096; }
.reglure--ardoise a { color: #D8B6E2; }

.reglure--serree { padding: 56px 0; }

.colonne-utile {
  width: min(var(--colonne), calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.grille12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}

.tete-bande {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 44px;
}
.tete-bande p { margin-bottom: 0; }

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

.entete-registre {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--entete);
  background: rgba(250, 251, 242, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--filet) solid var(--bordure);
  z-index: 60;
  transition: height 180ms ease, border-color 180ms ease;
}

.entete-registre.tassee { height: 60px; border-bottom-color: var(--ardoise); }

.entete-registre > .colonne-utile {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.jauge-defilement {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 180ms ease;
}
.entete-registre.tassee .jauge-defilement { opacity: 1; }

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--texte);
  flex: none;
}
.marque svg { display: block; flex: none; }
.marque span {
  font-family: var(--titre);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

.ancres {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ancres a {
  font-family: var(--courant);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--texte);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.ancres a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background 160ms ease;
}
.ancres a:hover { color: var(--accent); }
.ancres a[aria-current="true"] { color: var(--accent); }
.ancres a[aria-current="true"]::before { background: var(--accent); }

.bascule-panneau {
  display: none;
  width: 46px;
  height: 40px;
  border: 2px solid var(--bordure);
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.bascule-panneau span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--texte);
}

.panneau-ancres {
  position: fixed;
  inset: 0;
  background: var(--ardoise);
  z-index: 70;
  display: none;
  padding: 96px 24px 40px;
  overflow-y: auto;
}
.panneau-ancres[data-ouvert="oui"] { display: block; }
.panneau-ancres ul { list-style: none; margin: 0 0 28px; padding: 0; }
.panneau-ancres li { border-bottom: 1px solid var(--ardoise-clair); }
.panneau-ancres a {
  display: block;
  padding: 16px 0;
  color: var(--fond);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
}
.panneau-ancres a:hover { color: #D8B6E2; }
.fermer-panneau {
  position: absolute;
  top: 20px;
  right: 24px;
  background: transparent;
  border: 2px solid var(--bordure);
  color: var(--fond);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 10px 16px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Boutons, tampons de bureau
   -------------------------------------------------------------------------- */

.tampon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.tampon--encre {
  background: var(--accent);
  color: var(--accent-texte);
  border: none;
  border-bottom: 3px solid var(--ardoise);
  padding: 15px 30px;
}
.tampon--encre:hover {
  background: var(--accent-fonce);
  color: var(--accent-texte);
  border-bottom-width: 5px;
  transform: translateY(-2px);
}

.tampon--marge {
  background: transparent;
  color: var(--texte);
  border: 2px solid var(--bordure);
  padding: 14px 26px;
}
.tampon--marge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  transition: width 160ms ease, height 160ms ease;
}
.tampon--marge:hover {
  border-color: var(--accent);
  color: var(--texte);
}
.tampon--marge:hover::before { width: 9px; height: 9px; }

.reglure--ardoise .tampon--marge { color: var(--fond); border-color: var(--bordure); }
.reglure--ardoise .tampon--marge:hover { border-color: #D8B6E2; color: var(--fond); }
.reglure--ardoise .tampon--marge::before { background: #D8B6E2; }

.tampon--menu { padding: 11px 20px; }

.duo-tampons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 26px 0 0;
}

/* --------------------------------------------------------------------------
   Hero, bande anthracite et photographie pleine largeur
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 0;
  margin-top: var(--entete);
  background: var(--ardoise);
  color: var(--fond);
  border-bottom: var(--filet) solid var(--ardoise-clair);
  overflow: hidden;
}

.hero-plaque {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  min-height: 620px;
}

.hero-texte {
  background: rgba(30, 33, 25, 0.88);
  padding: 96px 56px 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.hero-texte h1 { max-width: 12ch; }
.hero-texte .chapeau { color: #D6DCC4; }

.hero-image { position: relative; }
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.35);
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #EFF2E2;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}

.hero-anneaux {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 420px;
  height: 420px;
  z-index: 4;
  pointer-events: none;
}

.reassurance {
  margin-top: 34px;
  border-top: var(--filet) solid var(--ardoise-clair);
  padding-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.reassurance .montant { color: #D8B6E2; }
.reassurance p { margin: 0; color: #D6DCC4; font-size: 0.9375rem; max-width: 34ch; }

/* Photographie posee en pleine largeur dans une bande, filets haut et bas */
.plaque-photo {
  position: relative;
  margin: 48px 0 0;
  border-top: var(--filet) solid var(--ardoise);
  border-bottom: var(--filet) solid var(--ardoise);
  overflow: hidden;
  background: var(--ardoise);
}
.plaque-photo img {
  width: 100%;
  filter: saturate(0.35);
}
.plaque-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #EFF2E2;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}
.legende-photo {
  font-size: 0.875rem;
  color: var(--texte-doux);
  margin: 12px 0 0;
  max-width: 72ch;
}
.reglure--ardoise .legende-photo { color: #A9B096; }

.pleine-largeur {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Probleme, colonnes de constat
   -------------------------------------------------------------------------- */

.constats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--filet) solid var(--bordure);
  border-left: var(--filet) solid var(--bordure);
  margin-top: 36px;
}
.constat {
  border-right: var(--filet) solid var(--bordure);
  border-bottom: var(--filet) solid var(--bordure);
  padding: 28px 26px;
  background: var(--surface);
}
.constat p { margin-bottom: 0; font-size: 1rem; }
.constat .montant { color: var(--accent); display: block; margin-bottom: 6px; }

.ardoise-encart {
  margin-top: 40px;
  background: var(--ardoise);
  color: var(--fond);
  padding: 30px 34px;
  border-left: 8px solid var(--accent);
}
.ardoise-encart p { color: #D6DCC4; margin-bottom: 0; }
.ardoise-encart p + p { margin-top: 14px; }
.ardoise-encart strong { color: var(--fond); }

/* --------------------------------------------------------------------------
   Solution, quatre temps numerotes
   -------------------------------------------------------------------------- */

.suite-temps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: var(--filet) solid var(--bordure);
}
.temps {
  border-right: var(--filet) solid var(--bordure);
  border-top: var(--filet) solid var(--bordure);
  border-bottom: var(--filet) solid var(--bordure);
  padding: 30px 24px 34px;
  background: var(--surface);
  position: relative;
}
.temps .rang {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 2rem;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 14px;
}
.temps p { font-size: 1rem; margin-bottom: 0; }
.temps h3 { font-size: 1.1875rem; }

/* --------------------------------------------------------------------------
   Fonctionnalites, bordereaux a anneaux
   -------------------------------------------------------------------------- */

.liasse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bordereau {
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  padding: 30px 26px 32px;
  position: relative;
  overflow: hidden;
}
.bordereau h3 { padding-right: 12px; }
.bordereau p { font-size: 1rem; margin-bottom: 0; }
.bordereau p + p { margin-top: 12px; }
.bordereau .anneaux-coin {
  position: absolute;
  right: -54px;
  bottom: -54px;
  width: 190px;
  height: 190px;
  opacity: 0.08;
  pointer-events: none;
}
.bordereau .etat { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Avantages, colonnes chiffrees sur bande anthracite
   -------------------------------------------------------------------------- */

.gains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--filet) solid var(--ardoise-clair);
  border-left: var(--filet) solid var(--ardoise-clair);
}
.gain {
  border-right: var(--filet) solid var(--ardoise-clair);
  border-bottom: var(--filet) solid var(--ardoise-clair);
  padding: 30px 30px 32px;
}
.gain .montant {
  color: #D8B6E2;
  display: block;
  margin-bottom: 8px;
}
.gain p { margin-bottom: 0; font-size: 1rem; }

/* --------------------------------------------------------------------------
   Preuve sociale, chiffrier et temoignages
   -------------------------------------------------------------------------- */

.chiffrier {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--filet) solid var(--bordure);
  border-bottom: var(--filet) solid var(--bordure);
  border-left: var(--filet) solid var(--bordure);
  background: var(--surface);
  margin-bottom: 44px;
}
.case-chiffre {
  border-right: var(--filet) solid var(--bordure);
  padding: 24px 20px;
}
.case-chiffre .montant { color: var(--accent); display: block; font-size: 2rem; line-height: 1.05; }
.case-chiffre span.libelle {
  display: block;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--texte-doux);
  line-height: 1.45;
}

.temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.temoignage {
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  border-top: 8px solid var(--accent);
  padding: 28px 26px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.temoignage blockquote { margin: 0 0 18px; }
.temoignage blockquote p { font-size: 1rem; margin-bottom: 12px; }
.temoignage blockquote p:last-child { margin-bottom: 0; }
.temoignage figcaption {
  margin-top: auto;
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  font-size: 0.875rem;
  color: var(--texte-doux);
}
.temoignage figcaption strong { display: block; color: var(--texte); font-size: 0.9375rem; }

.renvoi-auteur {
  margin-top: 40px;
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.renvoi-auteur p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tarifs, trois mandats
   -------------------------------------------------------------------------- */

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

.mandat {
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  padding: 30px 26px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.mandat--retenu {
  border-color: var(--accent);
  border-width: 4px;
  box-shadow: 10px 10px 0 rgba(132, 60, 150, 0.14);
}
.bandeau-retenu {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.mandat h3 { font-family: var(--titre); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.015em; }
.mandat .prix { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.mandat .prix .montant { color: var(--accent); font-size: 3rem; line-height: 1; }
.mandat .prix .devise { font-family: var(--chiffre); font-weight: 600; font-size: 1.25rem; color: var(--accent); }
.mandat .unite { font-size: 0.875rem; color: var(--texte-doux); margin-bottom: 14px; }
.mandat .cible {
  font-size: 0.9375rem;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 14px 0;
  margin-bottom: 18px;
}
.mandat ul { list-style: none; margin: 0 0 24px; padding: 0; }
.mandat li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 12px;
}
.mandat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--vert-registre);
}
.mandat .tampon { margin-top: auto; justify-content: center; }

.note-tarifs {
  margin-top: 32px;
  border-top: var(--filet) solid var(--bordure);
  padding-top: 20px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.questions {
  border-top: var(--filet) solid var(--bordure);
  max-width: 900px;
}
.question {
  border-bottom: var(--filet) solid var(--bordure);
  background: transparent;
}
.question > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 46px 22px 0;
  font-weight: 700;
  font-size: 1.0625rem;
  position: relative;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 26px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  transition: border-color 160ms ease, transform 200ms ease;
}
.question[open] > summary::after {
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(45deg);
}
.question > summary:hover { color: var(--accent); }
.reponse { padding: 0 40px 24px 0; }
.reponse p { font-size: 1rem; }
.reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.bloc-contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}

.bordereau-saisie {
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  padding: 32px 30px 34px;
  color: var(--texte);
}
.bordereau-saisie p { color: var(--texte-doux); }

.paire-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 6px;
  color: var(--texte);
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--texte);
  background: #FFFFFF;
  border: 2px solid var(--bordure);
  border-radius: 0;
  padding: 12px 14px;
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--accent);
  outline: 3px solid var(--ardoise);
  outline-offset: 2px;
}
.aide-champ { font-size: 0.8125rem; color: var(--texte-doux); margin: 6px 0 0; }

.champ-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
  margin-bottom: 22px;
}
.champ-consentement input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--accent); }
.champ-consentement label { font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }

.voie-directe {
  margin-top: 20px;
  border-top: var(--filet) solid var(--bordure);
  padding-top: 16px;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.pense-bete { list-style: none; margin: 26px 0 0; padding: 0; }
.pense-bete li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: #D6DCC4;
  font-size: 1rem;
}
.pense-bete li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #D8B6E2;
}

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

.anneaux-pied {
  display: block;
  width: 100%;
  height: 120px;
  background: var(--fond-alt);
  border-bottom: var(--filet) solid var(--bordure);
}

.pied-registre {
  background: var(--fond-alt);
  border-top: none;
  padding: 56px 0 0;
}

.colonnes-pied {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 36px;
  padding-bottom: 44px;
}
.colonnes-pied h2 {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 16px;
}
.colonnes-pied ul { list-style: none; margin: 0; padding: 0; }
.colonnes-pied li { margin-bottom: 10px; }
.colonnes-pied a { color: var(--texte); text-decoration: none; font-size: 0.9375rem; }
.colonnes-pied a:hover { color: var(--accent); text-decoration: underline; }
.colonnes-pied p { font-size: 0.9375rem; color: var(--texte-doux); }

.reseaux { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.reseaux a { font-size: 0.875rem; text-decoration: underline; color: var(--accent); }

.barre-pied {
  border-top: var(--filet) solid var(--bordure);
  padding: 20px 0 26px;
  font-size: 0.875rem;
  color: var(--texte-doux);
}
.barre-pied p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   Pages internes, colonne de lecture
   -------------------------------------------------------------------------- */

.page-interne { margin-top: var(--entete); }

.fil { font-size: 0.875rem; color: var(--texte-doux); margin-bottom: 18px; }
.fil a { color: var(--texte-doux); }

.texte-long { max-width: 760px; }
.texte-long h2 { font-size: 1.85rem; margin-top: 44px; }
.texte-long h3 { margin-top: 28px; }
.texte-long ul, .texte-long ol { padding-left: 22px; max-width: 68ch; }
.texte-long li { margin-bottom: 10px; }
.texte-long dl { max-width: 68ch; }
.texte-long dt { font-weight: 700; margin-top: 16px; }
.texte-long dd { margin: 4px 0 0; color: var(--texte-doux); }

.portrait-auteur {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  align-items: start;
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  padding: 28px;
  margin-bottom: 40px;
}
.portrait-auteur img { border: var(--filet) solid var(--ardoise); width: 100%; }
.portrait-auteur p:last-child { margin-bottom: 0; }

.tableau-registre {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.9375rem;
  background: var(--surface);
}
.tableau-registre caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--texte-doux);
  padding-bottom: 10px;
}
.tableau-registre th, .tableau-registre td {
  border: 1px solid var(--bordure);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.tableau-registre thead th { background: var(--fond-alt); font-weight: 700; }
.tableau-registre td.montant-cellule { font-family: var(--chiffre); font-weight: 600; white-space: nowrap; }

.bloc-central {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.bloc-central h1 { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Signature d animation: revelation par separation en deux moities
   -------------------------------------------------------------------------- */

.fente { position: relative; overflow: hidden; }
.fente::before,
.fente::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bordure);
  z-index: 5;
  pointer-events: none;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fente::before { top: 0; height: 50.5%; }
.fente::after { bottom: 0; height: 50.5%; }
.fente.ouverte::before { transform: translateY(-101%); }
.fente.ouverte::after { transform: translateY(101%); }

.reglure--ardoise .fente::before,
.reglure--ardoise .fente::after { background: var(--ardoise-clair); }

.fente--titre { padding-bottom: 0.1em; }

.fente--registre::before,
.fente--registre::after {
  top: 0;
  bottom: auto;
  height: 100%;
  background: var(--ardoise);
  transition-duration: 620ms;
}
.fente--registre::before { left: 0; right: 50%; }
.fente--registre::after { left: 50%; right: 0; }
.fente--registre.ouverte::before { transform: translateX(-101%); }
.fente--registre.ouverte::after { transform: translateX(101%); }

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

@media (max-width: 1100px) {
  .liasse { grid-template-columns: repeat(2, 1fr); }
  .mandats { grid-template-columns: 1fr; }
  .temoignages { grid-template-columns: 1fr; }
  .chiffrier { grid-template-columns: repeat(2, 1fr); }
  .case-chiffre { border-bottom: var(--filet) solid var(--bordure); }
  .suite-temps { grid-template-columns: repeat(2, 1fr); }
  .colonnes-pied { grid-template-columns: 1fr 1fr; }
  .bloc-contact { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .ancres { display: none; }
  .entete-registre .tampon--menu { display: none; }
  .bascule-panneau { display: flex; }
  .hero-plaque { grid-template-columns: 1fr; min-height: 0; }
  .hero-texte { padding: 56px 24px 48px; order: 2; background: var(--ardoise); }
  .hero-image { order: 1; height: 320px; }
  .hero-anneaux { display: none; }
  .constats { grid-template-columns: 1fr; }
  .gains { grid-template-columns: 1fr; }
  .tete-bande { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .portrait-auteur { grid-template-columns: 1fr; }
  .renvoi-auteur { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.85rem; }
  .reglure { padding: 56px 0; }
  .liasse { grid-template-columns: 1fr; }
  .suite-temps { grid-template-columns: 1fr; }
  .chiffrier { grid-template-columns: 1fr; }
  .colonnes-pied { grid-template-columns: 1fr; }
  .paire-champs { grid-template-columns: 1fr; }
  .montant--majeur { font-size: 2.4rem; }
  .colonne-utile { width: calc(100% - 32px); }
  .bordereau-saisie { padding: 24px 20px 26px; }
}

@media print {
  .entete-registre, .panneau-ancres, .bascule-panneau { display: none; }
  body { background: #FFFFFF; }
  .fente::before, .fente::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fente::before, .fente::after { display: none; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ==========================================================================
   Le Registre des Amicales, section magazine
   Ajout posterieur a la feuille du site, aucune regle existante n est modifiee.
   Meme palette, meme forme signature (anneaux concentriques interrompus),
   meme motif de fond et meme revelation par separation en deux moities.
   Vocabulaire: fiche-article (carte), entete-article, corps-article,
   encart-auteur, lire-aussi, releve-articles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grille de cartes d article
   Reprend la liasse de bordereaux: trois colonnes, gouttiere de 24 pixels,
   et le meme decalage de 70 millisecondes entre les cartes d une rangee.
   -------------------------------------------------------------------------- */

.liasse--magazine {
  align-items: stretch;
}

.fiche-article {
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.fiche-article:hover {
  border-color: var(--accent);
  border-bottom: 5px solid var(--ardoise);
  transform: translateY(-2px);
}

/* Photographie de carte: desaturee, voile pistache, filet anthracite en bas. */
.fiche-article .vignette {
  position: relative;
  border-bottom: var(--filet) solid var(--ardoise);
  background: var(--ardoise);
  overflow: hidden;
}
.fiche-article .vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.35);
}
.fiche-article .vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #EFF2E2;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}

.fiche-article .corps-fiche {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
}
.fiche-article .surtitre { margin-bottom: 12px; }
.fiche-article h3 {
  font-size: 1.1875rem;
  line-height: 1.28;
  margin-bottom: 12px;
}
.fiche-article h3 a {
  color: var(--texte);
  text-decoration: none;
}
.fiche-article h3 a:hover { color: var(--accent); text-decoration: underline; }
.fiche-article p {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-bottom: 18px;
  max-width: none;
}
.fiche-article .datation {
  margin: auto 0 0;
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.fiche-article .datation .lecture { color: var(--accent); }

/* Anneaux concentriques en filigrane, coupes net par le bord de la carte. */
.fiche-article .anneaux-coin {
  position: absolute;
  right: -54px;
  bottom: -54px;
  width: 190px;
  height: 190px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.reglure--ardoise .fiche-article {
  background: var(--ardoise-clair);
  border-color: var(--ardoise-clair);
}
.reglure--ardoise .fiche-article h3 a { color: var(--fond); }
.reglure--ardoise .fiche-article h3 a:hover { color: #D8B6E2; }
.reglure--ardoise .fiche-article p { color: #D6DCC4; }
.reglure--ardoise .fiche-article .datation { color: #A9B096; border-top-color: var(--ardoise); }
.reglure--ardoise .fiche-article .datation .lecture { color: #D8B6E2; }

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

.entete-article { max-width: 860px; }
.entete-article h1 { font-size: 3rem; margin-bottom: 22px; }

.datation-article {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin: 0 0 26px;
  padding: 14px 0;
  border-top: var(--filet) solid var(--bordure);
  border-bottom: var(--filet) solid var(--bordure);
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.datation-article .lecture { color: var(--accent); }

/* Exergue de chapeau: filet violet a gauche, corps releve. */
.chapo-exergue {
  border-left: 6px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 0 0 34px;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 64ch;
}

/* Image a la une, posee en pleine largeur de la colonne de lecture. */
.plaque-une {
  position: relative;
  margin: 0 0 44px;
  border-top: var(--filet) solid var(--ardoise);
  border-bottom: var(--filet) solid var(--ardoise);
  overflow: hidden;
  background: var(--ardoise);
}
.plaque-une img { width: 100%; filter: saturate(0.35); }
.plaque-une::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #EFF2E2;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Corps redactionnel: balises nues, sans aucune classe
   Le redacteur n ecrit que du HTML semantique. Toute la mise en forme descend
   du conteneur, sinon un article paraitrait non style faute de classe.
   -------------------------------------------------------------------------- */

.corps-article {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.68;
}

.corps-article h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 52px 0 18px;
  padding-top: 24px;
  border-top: var(--filet) solid var(--bordure);
}
.corps-article h2::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vert-registre);
  box-shadow: inset 0 0 0 4px var(--accent);
  margin-right: 12px;
  vertical-align: 0.06em;
}
.corps-article > h2:first-child { margin-top: 0; }

.corps-article h3 {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 34px 0 10px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
}

.corps-article p { margin: 0 0 18px; max-width: 68ch; }
.corps-article strong { font-weight: 700; color: var(--texte); }
.corps-article em { font-style: italic; }

.corps-article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover { color: var(--accent-fonce); text-decoration-thickness: 2px; }

.corps-article ul,
.corps-article ol {
  margin: 0 0 22px;
  padding: 0;
  max-width: 68ch;
}
.corps-article ul { list-style: none; }
.corps-article ol { list-style: none; counter-reset: releve; }

.corps-article li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--vert-registre);
}
.corps-article ol > li { counter-increment: releve; }
.corps-article ol > li::before {
  content: counter(releve);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.corps-article li > ul,
.corps-article li > ol { margin: 10px 0 0; }

/* Tableau recapitulatif, reglures du grand livre a colonnes. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 0.9375rem;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-x: auto;
}
.corps-article th,
.corps-article td {
  border: 1px solid var(--bordure);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.corps-article thead th {
  background: var(--fond-alt);
  font-weight: 700;
  border-bottom: var(--filet) solid var(--ardoise);
}
.corps-article tbody tr:nth-child(even) { background: var(--fond); }

/* Encadre, pose sur la trame d anneaux concentriques du site. */
.corps-article aside {
  margin: 30px 0;
  padding: 24px 26px;
  background-color: var(--fond-alt);
  background-image: var(--motif-anneaux);
  background-size: 260px 260px;
  border: var(--filet) solid var(--bordure);
  border-left: 6px solid var(--accent);
}
.corps-article aside p { margin-bottom: 12px; font-size: 1rem; }
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside ul,
.corps-article aside ol { margin-bottom: 0; }

/* Citation, filet vert registre et corps releve. */
.corps-article blockquote {
  margin: 30px 0;
  padding: 6px 0 6px 24px;
  border-left: 6px solid var(--vert-registre);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--texte);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure { margin: 30px 0; }
.corps-article figure img { border: var(--filet) solid var(--ardoise); }
.corps-article figcaption {
  font-size: 0.875rem;
  color: var(--texte-doux);
  margin-top: 10px;
}

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

.appel-article {
  margin: 44px 0 0;
  background: var(--ardoise);
  border-bottom: 5px solid var(--accent);
  padding: 30px 32px;
  max-width: 860px;
}
.appel-article p { color: #D6DCC4; max-width: 60ch; }
.appel-article p:last-of-type { margin-bottom: 22px; }
.appel-article .surtitre { color: #C79CD4; }
.appel-article .pastille-anneau { background: #C79CD4; box-shadow: inset 0 0 0 4px var(--fond); }

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

.encart-auteur {
  margin: 44px 0 0;
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  border-top: 8px solid var(--accent);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  max-width: 860px;
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: var(--filet) solid var(--ardoise);
  filter: saturate(0.35);
}
.encart-auteur .nom-auteur {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.encart-auteur .role-auteur {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.encart-auteur p { font-size: 0.9375rem; margin-bottom: 10px; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi {
  margin-top: 56px;
  border-top: var(--filet) solid var(--bordure);
  padding-top: 34px;
}
.lire-aussi .titre-bloc {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 24px;
  max-width: none;
}
.cartes-lire-aussi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.carte-lien {
  background: var(--surface);
  border: var(--filet) solid var(--bordure);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.carte-lien:hover { border-color: var(--accent); transform: translateY(-2px); }
.carte-lien .vignette {
  position: relative;
  border-bottom: var(--filet) solid var(--ardoise);
  background: var(--ardoise);
  overflow: hidden;
}
.carte-lien .vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.35);
}
.carte-lien .vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #EFF2E2;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}
.carte-lien .texte-carte { padding: 20px 22px 22px; }
.carte-lien .titre-carte {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.32;
  margin: 0 0 10px;
  max-width: none;
}
.carte-lien .titre-carte a { color: var(--texte); text-decoration: none; }
.carte-lien .titre-carte a:hover { color: var(--accent); text-decoration: underline; }
.carte-lien .accroche-carte {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Renvoi vers le magazine, sous la section Derniers articles
   -------------------------------------------------------------------------- */

.renvoi-magazine {
  margin-top: 40px;
  border-top: var(--filet) solid var(--bordure);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.renvoi-magazine p { margin: 0; max-width: 60ch; }

/* --------------------------------------------------------------------------
   Releve des articles publies, page auteur et plan du site
   -------------------------------------------------------------------------- */

ul.releve-articles { list-style: none; margin: 0; padding-left: 0; max-width: 900px; }
ul.releve-articles li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 22px;
  align-items: baseline;
  border-bottom: 1px solid var(--bordure);
  padding: 12px 0;
  margin: 0;
}
ul.releve-articles li:first-child { border-top: var(--filet) solid var(--bordure); }
.releve-articles .date-parution {
  font-family: var(--chiffre);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.releve-articles a { color: var(--texte); text-decoration: none; font-weight: 500; }
.releve-articles a:hover { color: var(--accent); text-decoration: underline; }
.releve-articles .angle-parution {
  display: block;
  font-size: 0.875rem;
  color: var(--texte-doux);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Pied de page des pages du magazine
   Les intitules de colonnes y sont des paragraphes et non des titres, pour
   qu une page d article ne porte qu une seule hierarchie de titres.
   -------------------------------------------------------------------------- */

.colonnes-pied .titre-pied {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--texte);
  margin: 0 0 16px;
  max-width: none;
}

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

@media (max-width: 1220px) {
  .entete-registre .ancres { gap: 14px; }
  .entete-registre .ancres a { font-size: 0.875rem; }
}

@media (max-width: 1100px) {
  .liasse--magazine { grid-template-columns: repeat(2, 1fr); }
  .cartes-lire-aussi { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .entete-article h1 { font-size: 2.6rem; }
  .encart-auteur { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 700px) {
  .liasse--magazine { grid-template-columns: 1fr; }
  .cartes-lire-aussi { grid-template-columns: 1fr; }
  .entete-article h1 { font-size: 2.3rem; }
  .corps-article h2 { font-size: 1.75rem; }
  .chapo-exergue { font-size: 1.0625rem; padding-left: 16px; }
  .appel-article { padding: 26px 22px; }
  .releve-articles li { grid-template-columns: 1fr; }
  .lire-aussi .titre-bloc { font-size: 1.6rem; }
}