/* ==========================================================================
   Guichetia, feuille de style unique
   Vocabulaire de nommage : parapheur, reliure, feuillet, talon, souche, visa,
   registre, bordereau, cartouche, article. Regime clair gris perle et bleu acier.
   ========================================================================== */

:root {
  --fond: #F1F4F6;
  --fond-alt: #E3E9ED;
  --surface: #FFFFFF;
  --texte: #10222E;
  --texte-doux: #4A5C68;
  --tampon: #196B5C;
  --tampon-fonce: #135347;
  --tampon-texte: #FFFFFF;
  --acier: #2E5B74;
  --acier-clair: #59809A;
  --bordure: #C6D0D6;

  --reliure: 64px;
  --gouttiere: 40px;
  --pli: 1180px;
  --dents: 14px;

  --titre: "Alfa Slab One", "Rockwell", Georgia, serif;
  --courant: "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --marge: "Faustina", "Iowan Old Style", Georgia, serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

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

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

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

:focus-visible {
  outline: 2px solid var(--acier);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(25, 107, 92, 0.24);
}

/* --------------------------------------------------------------------------
   1. Titres, surtitres, mentions de marge
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0 0 0.6em; }

h1, .titre-acte {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 { font-size: 3.125rem; }
h2.titre-acte { font-size: 2.0625rem; }

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

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

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

.surtitre {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acier);
}

.surtitre .numero {
  font-family: var(--marge);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--tampon);
  font-variant-numeric: tabular-nums;
}

.mention {
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.mention--visa { color: var(--tampon); }

.fondement {
  display: block;
  margin: -2px 0 10px;
  font-family: var(--marge);
  font-weight: 600;
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--acier);
}

.petit { font-size: 0.875rem; font-weight: 500; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   2. Grille : empilement vertical avec marge de reliure a gauche
   -------------------------------------------------------------------------- */

.pli {
  max-width: var(--pli);
  margin-inline: auto;
  padding-inline: 20px;
  display: grid;
  grid-template-columns: var(--reliure) minmax(0, 1fr);
  align-items: stretch;
}

.reliure {
  position: relative;
  border-right: 1px solid var(--acier);
  background-image:
    radial-gradient(circle 5px at 50% 46px, var(--bordure) 99%, transparent 100%),
    radial-gradient(circle 5px at 50% 118px, var(--bordure) 99%, transparent 100%);
  background-repeat: no-repeat;
}

.reliure .cote {
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--acier-clair);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.corps { padding: 76px 0 76px var(--gouttiere); min-width: 0; }

.souche { position: relative; }
.souche--alt { background: var(--fond-alt); }
.souche--serre .corps { padding-top: 48px; padding-bottom: 48px; }
.souche--ample .corps { padding-top: 104px; padding-bottom: 104px; }

/* Separateur de section en dents de ticket, pleine largeur */
.decoupe {
  height: 22px;
  position: relative;
  background: transparent;
}

.decoupe::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--bordure) 0 4px, transparent 4px 9px);
}

.decoupe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
}

.decoupe--alt::after { background-image: radial-gradient(circle 7px at 9px 14px, var(--fond-alt) 99%, transparent 100%); }

/* --------------------------------------------------------------------------
   3. Motif signature : dents de ticket au bas des blocs
   -------------------------------------------------------------------------- */

.talon { position: relative; padding-bottom: 30px; }

.talon::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--bordure) 0 4px, transparent 4px 9px);
  pointer-events: none;
}

.talon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
}

.souche--alt .talon::after { background-image: radial-gradient(circle 7px at 9px 14px, var(--fond-alt) 99%, transparent 100%); }

/* --------------------------------------------------------------------------
   4. Feuillets et cartes
   -------------------------------------------------------------------------- */

.feuillet {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  padding: 26px 28px 30px 68px;
  margin-bottom: 22px;
}

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

.feuillet .perfo {
  position: absolute;
  left: 14px;
  top: 30px;
  width: 12px;
}

.feuillet h3 { margin-bottom: 6px; }
.feuillet p:last-child { margin-bottom: 0; }

.feuillet__cote {
  position: absolute;
  left: 8px;
  bottom: 34px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--acier-clair);
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   5. En tete fixe
   -------------------------------------------------------------------------- */

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

.lien-evitement:focus { left: 0; }

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

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 76px;
  background: rgba(241, 244, 246, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--acier);
  box-shadow: 0 2px 0 0 var(--tampon);
  transition: height 200ms ease;
}

.entete__pli {
  max-width: var(--pli);
  margin-inline: auto;
  padding-inline: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.entete.detachee { height: 64px; }

.entete.detachee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background-image: radial-gradient(circle 4px at 6px 8px, var(--fond) 99%, transparent 100%);
  background-size: 12px 8px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.logotype {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: 1.3125rem;
  color: var(--texte);
  text-decoration: none;
  letter-spacing: -0.01em;
  width: calc(var(--reliure) + 116px);
  flex: none;
}

.logotype:hover { color: var(--tampon); }
.logotype svg { flex: none; }

.nav-articles {
  display: flex;
  gap: 22px;
  margin-inline: auto;
}

.nav-articles a {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--texte);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.nav-articles a:hover,
.nav-articles a:focus-visible { border-bottom-color: var(--tampon); color: var(--tampon); }

.bouton-panneau {
  display: none;
  width: 46px;
  height: 40px;
  border: 1px solid var(--acier);
  background: var(--surface);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}

.bouton-panneau span,
.bouton-panneau span::before,
.bouton-panneau span::after {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--texte);
  margin-inline: auto;
  content: "";
}

.bouton-panneau span::before { transform: translateY(-7px); }
.bouton-panneau span::after { transform: translateY(5px); }

.panneau {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--fond);
  padding: 96px 24px 40px;
  overflow-y: auto;
}

.panneau[hidden] { display: none; }

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

.panneau li { border-bottom: 1px dashed var(--bordure); }

.panneau a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 4px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--texte);
  text-decoration: none;
}

.panneau a .numero {
  font-family: var(--marge);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--acier-clair);
  width: 34px;
  flex: none;
}

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

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 15px 28px 19px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.bouton::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background-size: 12px 8px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.bouton--visa { background: var(--tampon); color: var(--tampon-texte); }
.bouton--visa::after { background-image: radial-gradient(circle 4px at 6px 8px, var(--fond) 99%, transparent 100%); }
.bouton--visa:hover { background: var(--tampon-fonce); color: var(--tampon-texte); box-shadow: inset 0 0 0 3px var(--tampon-fonce), inset 0 0 0 4px rgba(255, 255, 255, 0.85); }

.bouton--souche { background: var(--surface); color: var(--texte); border-color: var(--acier); }
.bouton--souche::after { background-image: radial-gradient(circle 4px at 6px 8px, var(--fond) 99%, transparent 100%); }
.bouton--souche:hover { background: var(--fond-alt); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--acier); color: var(--texte); }

.entete .bouton { min-width: 0; padding: 11px 18px 15px; flex: none; }
.souche--alt .bouton::after { background-image: radial-gradient(circle 4px at 6px 8px, var(--fond-alt) 99%, transparent 100%); }
.encadre .bouton::after { background-image: radial-gradient(circle 4px at 6px 8px, var(--surface) 99%, transparent 100%); }

.paire-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; }

/* --------------------------------------------------------------------------
   7. Cartouche d ouverture (hero)
   -------------------------------------------------------------------------- */

.cartouche { padding-top: 76px; position: relative; overflow: hidden; }

.cartouche .corps { padding-top: 64px; padding-bottom: 0; }

.cartouche__ligne {
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.cartouche h1 { max-width: 15ch; margin-bottom: 0; }

.cartouche__reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 14px 0 28px;
  border-top: 1px solid var(--bordure);
  margin-top: 22px;
}

.cartouche__reassurance span {
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.cartouche__reassurance b { color: var(--tampon); font-weight: 700; }

.cartouche__image { margin: 8px 0 0; margin-right: calc(50% - 50vw); max-width: none; }
.cartouche__image .vignette { max-width: min(1180px, calc(100vw - 40px)); }

.cartouche__dents {
  height: 24px;
  background-image: radial-gradient(circle 12px at 15px 24px, var(--fond-alt) 99%, transparent 100%);
  background-size: 30px 24px;
  background-repeat: repeat-x;
}

/* --------------------------------------------------------------------------
   8. Vignettes photographiques et loupe au survol
   -------------------------------------------------------------------------- */

.vignette {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--acier);
  background: var(--fond-alt);
  --lx: 50%;
  --ly: 50%;
}

.vignette::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 46px;
  height: 46px;
  border-top: 1px solid var(--acier);
  border-left: 1px solid var(--acier);
  z-index: 3;
  pointer-events: none;
}

.vignette img {
  width: 100%;
  transform: scale(1);
  transform-origin: var(--lx) var(--ly);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: saturate(0.8);
}

.vignette:hover img,
.vignette:focus-within img { transform: scale(1.12); }

.vignette__loupe {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--tampon);
  background: rgba(255, 255, 255, 0.1);
  left: var(--lx);
  top: var(--ly);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: 4;
}

.vignette__loupe::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 26px;
  height: 2px;
  background: var(--tampon);
  transform: rotate(45deg);
  transform-origin: left center;
}

.vignette:hover .vignette__loupe,
.vignette:focus-within .vignette__loupe { opacity: 1; }

.vignette__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  padding: 40px 20px 12px;
  background: linear-gradient(to top, rgba(241, 244, 246, 0.96), rgba(241, 244, 246, 0));
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte);
  pointer-events: none;
}

.vignette__cachet {
  position: absolute;
  right: 22px;
  bottom: 34px;
  z-index: 3;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--tampon);
  opacity: 0.7;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--marge);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--tampon);
  text-transform: uppercase;
  pointer-events: none;
}

.vignette__dents {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  z-index: 3;
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
}

.souche--alt .vignette__dents { background-image: radial-gradient(circle 7px at 9px 14px, var(--fond-alt) 99%, transparent 100%); }

/* --------------------------------------------------------------------------
   9. Articles de la solution
   -------------------------------------------------------------------------- */

.articles { margin: 0; padding: 0; list-style: none; counter-reset: acte; }

.articles > li {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 24px;
  border-top: 1px solid var(--bordure);
  padding: 26px 0 34px;
}

.articles > li:last-child { border-bottom: 1px solid var(--bordure); }

.articles > li::before {
  counter-increment: acte;
  content: "Art. " counter(acte);
  font-family: var(--marge);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tampon);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

.articles h3 { margin-bottom: 4px; }
.articles p { margin-bottom: 0; }

.articles .delai {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border: 1px solid var(--bordure);
  background: var(--surface);
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--acier);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10. Fonctionnalites, deux colonnes de fiches
   -------------------------------------------------------------------------- */

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

.fiche {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  padding: 24px 26px 34px 62px;
}

.fiche::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 1px;
  background: var(--bordure);
}

.fiche .perfo { position: absolute; left: 14px; top: 26px; width: 12px; }
.fiche p:last-child { margin-bottom: 0; }

.fiche__ecusson {
  position: absolute;
  left: 8px;
  bottom: 32px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  --lx: 50%;
  --ly: 50%;
}

.fiche__ecusson svg {
  width: 100%;
  height: 100%;
  transform-origin: var(--lx) var(--ly);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fiche:hover .fiche__ecusson svg { transform: scale(1.12); }

/* --------------------------------------------------------------------------
   11. Avantages, pile de lignes larges
   -------------------------------------------------------------------------- */

.gains { margin: 0; padding: 0; }

.gains > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0 28px;
  align-items: baseline;
  border-bottom: 1px dashed var(--bordure);
  padding: 22px 0;
}

.gains dt {
  font-family: var(--marge);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--tampon);
  font-variant-numeric: tabular-nums;
}

.gains dd { margin: 0; }
.gains dd strong { display: block; font-weight: 600; }
.gains dd span { color: var(--texte-doux); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   12. Preuve sociale et registre de chiffres
   -------------------------------------------------------------------------- */

.temoignage {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  padding: 28px 30px 36px 68px;
  margin-bottom: 22px;
}

.temoignage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 1px;
  background: var(--bordure);
}

.temoignage .perfo { position: absolute; left: 14px; top: 30px; width: 12px; }

.temoignage blockquote {
  margin: 0 0 14px;
  font-family: var(--marge);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--texte);
  max-width: 68ch;
}

.temoignage figcaption { font-size: 0.9375rem; color: var(--texte-doux); }
.temoignage figcaption b { color: var(--texte); font-weight: 600; }

.registre {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  margin-top: 8px;
}

.registre > div { padding: 26px 22px 34px; border-left: 1px solid var(--bordure); text-align: center; }
.registre > div:first-child { border-left: none; }

.registre b {
  display: block;
  font-family: var(--marge);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1.05;
  color: var(--acier);
  font-variant-numeric: tabular-nums;
}

.registre span { display: block; font-size: 0.875rem; font-weight: 500; color: var(--texte-doux); margin-top: 6px; }

/* --------------------------------------------------------------------------
   13. Tarifs
   -------------------------------------------------------------------------- */

.tarifs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  padding-top: 12px;
}

.encadre {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  padding: 26px 24px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.encadre--avance {
  margin-top: -12px;
  border: 2px solid var(--tampon);
  border-bottom: none;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--tampon);
}

.encadre__visa {
  position: absolute;
  top: -13px;
  right: 18px;
  background: var(--tampon);
  color: var(--tampon-texte);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
}

.encadre h3 { font-family: var(--titre); font-weight: 400; font-size: 1.375rem; margin-bottom: 4px; }

.encadre__prix {
  font-family: var(--marge);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--tampon);
  font-variant-numeric: tabular-nums;
}

.encadre__prix small { font-family: var(--courant); font-size: 0.875rem; font-weight: 500; color: var(--texte-doux); display: block; }

.encadre__cible { font-size: 0.9375rem; color: var(--texte-doux); border-top: 1px solid var(--bordure); padding-top: 14px; margin-top: 14px; }

.encadre ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 0.9375rem; }

.encadre li { position: relative; padding: 0 0 12px 26px; line-height: 1.5; }

.encadre li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--tampon);
  transform: rotate(7deg);
}

.encadre .bouton { margin-top: auto; width: 100%; min-width: 0; }

.note-tarifs { margin-top: 26px; border-top: 1px solid var(--bordure); padding-top: 16px; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.pile-questions { border-top: 1px solid var(--bordure); }

.question { border-bottom: 1px solid var(--bordure); background: var(--surface); }

.question__bouton {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 26px;
  gap: 0 16px;
  align-items: start;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 22px;
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
}

.question__bouton:hover { background: var(--fond-alt); }

.question__bouton .numero {
  font-family: var(--marge);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--acier-clair);
  padding-top: 4px;
  border-right: 1px solid var(--bordure);
  height: 100%;
}

.question__bouton .croix {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  justify-self: end;
}

.question__bouton .croix::before,
.question__bouton .croix::after {
  content: "";
  position: absolute;
  background: var(--tampon);
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
  transition: transform 200ms ease;
}

.question__bouton .croix::after { transform: rotate(90deg); }
.question__bouton[aria-expanded="true"] .croix::after { transform: rotate(0deg); }

.question__reponse { padding: 0 22px 4px 108px; }
.question__reponse[hidden] { display: none; }
.question__reponse p { font-size: 1rem; }

/* --------------------------------------------------------------------------
   15. Bordereau de contact
   -------------------------------------------------------------------------- */

.bordereau {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  padding: 30px 30px 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }

.champ label, .consentement { font-size: 0.9375rem; font-weight: 600; }

.champ input,
.champ select,
.champ textarea {
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 2px;
  padding: 11px 12px;
}

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

.champ textarea { resize: vertical; }

.aide-champ {
  margin: -2px 0 0;
  font-style: italic;
  color: var(--texte-doux);
}

.consentement {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  border-top: 1px dashed var(--bordure);
  padding-top: 16px;
}

.consentement input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--tampon); }

.bordereau .bouton { grid-column: 1 / -1; justify-self: start; }

.voie-directe { margin-top: 20px; }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */

.pied { background: var(--fond-alt); border-top: 1px solid var(--acier); }

.pied .corps { padding-top: 54px; padding-bottom: 34px; }

.pied__colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 34px;
}

.pied h2 {
  font-family: var(--courant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acier);
  margin-bottom: 14px;
}

.pied ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.pied li { padding: 5px 0; }
.pied a { color: var(--texte); text-decoration: none; }
.pied a:hover { color: var(--tampon); text-decoration: underline; }
.pied p { font-size: 0.9375rem; color: var(--texte-doux); }

.reseaux { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 0.875rem; }

.barre-bas {
  border-top: 1px solid var(--bordure);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   17. Pages internes, texte long
   -------------------------------------------------------------------------- */

.redac { max-width: 72ch; }
.redac h2 { font-family: var(--titre); font-weight: 400; font-size: 1.625rem; margin-top: 42px; }
.redac h3 { margin-top: 26px; }
.redac ul, .redac ol { padding-left: 22px; }
.redac li { margin-bottom: 8px; }
.redac table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; margin: 18px 0; }
.redac th, .redac td { border: 1px solid var(--bordure); padding: 10px 12px; text-align: left; vertical-align: top; }
.redac th { background: var(--fond-alt); font-weight: 600; }

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

.portrait {
  float: right;
  margin: 0 0 22px 26px;
  border: 1px solid var(--acier);
  max-width: 220px;
}

.portrait img { filter: saturate(0.85); }

.encart {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--tampon);
  padding: 20px 22px;
  margin: 26px 0;
}

.encart p:last-child { margin-bottom: 0; }

.centre-page { text-align: left; max-width: 62ch; }

/* --------------------------------------------------------------------------
   18. Apparition au defilement
   -------------------------------------------------------------------------- */

.paraitre { opacity: 0; transform: translateY(14px); transition: opacity 460ms ease, transform 460ms ease; }
.paraitre.visee { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .jeu-fiches { grid-template-columns: minmax(0, 1fr); }
  .tarifs { grid-template-columns: minmax(0, 1fr); }
  .encadre--avance { margin-top: 0; }
  .pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --reliure: 28px; --gouttiere: 20px; }
  h1 { font-size: 2rem; letter-spacing: 0; }
  h2.titre-acte { font-size: 1.5rem; letter-spacing: 0; }
  .nav-articles { display: none; }
  .entete .bouton { display: none; }
  .bouton-panneau { display: block; margin-left: auto; }
  .reliure {
    background-image:
      radial-gradient(circle 3px at 50% 32px, var(--bordure) 99%, transparent 100%),
      radial-gradient(circle 3px at 50% 80px, var(--bordure) 99%, transparent 100%);
  }
  .reliure .cote { display: none; }
  .logotype { width: auto; }
  .corps { padding: 52px 0 52px var(--gouttiere); }
  .articles > li { grid-template-columns: minmax(0, 1fr); }
  .articles > li::before { padding-bottom: 6px; }
  .gains > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .registre { grid-template-columns: minmax(0, 1fr); }
  .registre > div { border-left: none; border-top: 1px solid var(--bordure); }
  .registre > div:first-child { border-top: none; }
  .bordereau { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 32px; }
  .feuillet, .temoignage { padding-left: 54px; }
  .question__bouton { grid-template-columns: 42px minmax(0, 1fr) 26px; gap: 0 10px; }
  .question__reponse { padding-left: 74px; }
  .portrait { float: none; margin: 0 0 22px; max-width: 100%; }
  .cartouche__image { margin-right: 0; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .pied__colonnes { grid-template-columns: minmax(0, 1fr); }
  .bouton { width: 100%; }
  .vignette__cachet { display: none; }
  .question__reponse { padding-left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .vignette:hover img,
  .vignette:focus-within img { transform: scale(1.03); transform-origin: 50% 50%; }
  .paraitre { opacity: 1; transform: none; }
}

@media print {
  .entete, .panneau, .bouton, .vignette__loupe { display: none !important; }
  body { background: #FFFFFF; }
}

/* ==========================================================================
   20. Le Registre des Manifestations, magazine du site
   Meme regime clair gris perle et bleu acier, meme marge de reliure,
   meme motif de dents de ticket et meme loupe au survol que le reste du site.
   Vocabulaire de nommage : sommaire, notice, acte, exergue, renvoi, parapheur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 Sommaire du magazine, grille de notices d article
   -------------------------------------------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.notice {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  padding-bottom: 30px;
}

/* Dents de ticket au bas de chaque notice, comme une souche detachee du carnet */
.notice::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2;
}

.souche--alt .notice::after { background-image: radial-gradient(circle 7px at 9px 14px, var(--fond-alt) 99%, transparent 100%); }

.notice .vignette { border: none; border-bottom: 1px solid var(--bordure); display: block; }
.notice .vignette::before { width: 34px; height: 34px; top: 0; left: 0; }
.notice .vignette__dents { background-image: radial-gradient(circle 7px at 9px 14px, var(--surface) 99%, transparent 100%); }
.notice .vignette img { aspect-ratio: 3 / 2; object-fit: cover; }

.notice__contenu {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 14px 58px;
}

/* Marge de reliure interne de la notice, filet vertical continu */
.notice__contenu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 36px;
  width: 1px;
  background: var(--bordure);
}

.notice__contenu .perfo { position: absolute; left: 11px; top: 24px; width: 12px; }

.notice__angle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acier);
  max-width: none;
}

.notice__angle .numero {
  font-family: var(--marge);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--tampon);
  font-variant-numeric: tabular-nums;
}

.notice__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  max-width: none;
}

.notice__titre a { color: var(--texte); text-decoration: none; }
.notice__titre a:hover,
.notice__titre a:focus-visible { color: var(--tampon); text-decoration: underline; text-underline-offset: 4px; }

.notice__extrait {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: none;
}

.notice__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--bordure);
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

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

.mentions-acte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bordure);
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.mentions-acte__angle {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tampon-texte);
  background: var(--tampon);
  padding: 4px 12px;
}

.acte-une { margin: 26px 0 34px; }
.acte-une img { width: 100%; }

.exergue {
  margin: 22px 0 6px;
  padding: 16px 0 20px 22px;
  border-top: 1px solid var(--bordure);
  border-left: 3px solid var(--tampon);
  border-bottom: 1px dashed var(--bordure);
  font-weight: 300;
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--texte);
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   20.3 Corps de l article, mis en forme sur les balises nues.
   Le corps redactionnel ne porte aucune classe : tout se joue ici.
   -------------------------------------------------------------------------- */

.acte-texte { max-width: 68ch; }

.acte-texte > :first-child { margin-top: 0; }

.acte-texte p { max-width: none; margin: 0 0 1.1em; }

.acte-texte h2 {
  position: relative;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
}

/* Le visa vert appose sur le filet de separation, forme signature du site */
.acte-texte h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -6px;
  width: 12px;
  height: 12px;
  background: var(--tampon);
  transform: rotate(7deg);
}

.acte-texte h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 32px 0 10px;
  padding-left: 14px;
  border-left: 2px solid var(--acier);
}

.acte-texte ul { list-style: none; margin: 0 0 1.3em; padding: 0; }

.acte-texte ul > li {
  position: relative;
  padding: 0 0 10px 26px;
  line-height: 1.6;
}

.acte-texte ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 11px;
  height: 11px;
  background: var(--tampon);
  transform: rotate(7deg);
}

.acte-texte ol { list-style: none; counter-reset: point; margin: 0 0 1.3em; padding: 0; }

.acte-texte ol > li {
  position: relative;
  padding: 0 0 10px 40px;
  line-height: 1.6;
}

.acte-texte ol > li::before {
  counter-increment: point;
  content: counter(point) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--marge);
  font-weight: 700;
  font-size: 1rem;
  color: var(--acier);
  font-variant-numeric: tabular-nums;
}

.acte-texte li > ul,
.acte-texte li > ol { margin: 10px 0 0; }

.acte-texte strong { font-weight: 600; color: var(--texte); }
.acte-texte em { font-style: italic; }

.acte-texte a { color: var(--acier); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.acte-texte a:hover,
.acte-texte a:focus-visible { color: var(--tampon); }

/* Tableau recapitulatif, tenu comme un etat de registre */
.acte-texte table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 28px 0 32px;
  background: var(--surface);
}

.acte-texte th,
.acte-texte td {
  border: 1px solid var(--bordure);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.acte-texte thead th {
  background: var(--fond-alt);
  font-weight: 600;
  color: var(--texte);
  border-bottom: 2px solid var(--acier);
}

.acte-texte tbody th { background: var(--fond); font-weight: 600; }
.acte-texte tbody tr:nth-child(even) td { background: var(--fond); }

.acte-texte blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--tampon);
  font-family: var(--marge);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--texte);
}

.acte-texte blockquote p:last-child { margin-bottom: 0; }

/* Encadre en feuillet perfore, ferme par la decoupe en dents de ticket */
.acte-texte aside {
  position: relative;
  margin: 32px 0;
  padding: 22px 24px 34px 58px;
  background-color: var(--surface);
  background-image:
    radial-gradient(circle 4px at 19px 28px, var(--bordure) 99%, transparent 100%),
    radial-gradient(circle 4px at 19px 58px, var(--bordure) 99%, transparent 100%);
  background-repeat: no-repeat;
  border: 1px solid var(--bordure);
  border-bottom: none;
  font-size: 1rem;
}

.acte-texte aside::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 38px;
  width: 1px;
  background: var(--bordure);
}

.acte-texte aside::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
}

.acte-texte aside p:last-child { margin-bottom: 0; }
.acte-texte aside ul:last-child { margin-bottom: 0; }

.acte-texte figure { margin: 28px 0; }
.acte-texte figure img { border: 1px solid var(--acier); }

.acte-texte figcaption {
  margin-top: 10px;
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   20.4 Parapheur de fin d article, appel a l action
   -------------------------------------------------------------------------- */

.parapheur {
  position: relative;
  margin: 40px 0 0;
  padding: 26px 28px 40px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--tampon);
  max-width: 68ch;
}

.parapheur::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
}

.parapheur p { max-width: none; }
.parapheur .paire-boutons { margin-top: 20px; }
.parapheur .bouton::after { background-image: radial-gradient(circle 4px at 6px 8px, var(--surface) 99%, transparent 100%); }

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

.notice-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
  margin: 40px 0 0;
  padding: 24px 26px 34px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-bottom: none;
  border-left: 4px solid var(--acier);
  max-width: 68ch;
}

.notice-auteur::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
}

.notice-auteur img {
  width: 96px;
  height: 96px;
  border: 1px solid var(--acier);
  filter: saturate(0.85);
}

.notice-auteur p { max-width: none; margin: 0 0 0.7em; font-size: 0.9375rem; color: var(--texte-doux); }
.notice-auteur p:last-child { margin-bottom: 0; }

.notice-auteur__nom {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--texte);
  letter-spacing: -0.01em;
}

.notice-auteur__role {
  font-family: var(--marge);
  font-weight: 600;
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--acier);
}

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

.renvoi {
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--acier);
}

.renvoi__intitule {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acier);
  max-width: none;
}

.renvoi__intitule .numero {
  font-family: var(--marge);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--tampon);
}

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

.renvoi__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: none;
  padding-bottom: 26px;
}

.renvoi__carte::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dents);
  background-image: radial-gradient(circle 7px at 9px 14px, var(--fond) 99%, transparent 100%);
  background-size: 18px var(--dents);
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2;
}

.renvoi__carte .vignette { border: none; border-bottom: 1px solid var(--bordure); display: block; }
.renvoi__carte .vignette::before { width: 30px; height: 30px; top: 0; left: 0; }
.renvoi__carte .vignette__dents { background-image: radial-gradient(circle 7px at 9px 14px, var(--surface) 99%, transparent 100%); }
.renvoi__carte .vignette img { aspect-ratio: 3 / 2; object-fit: cover; }

.renvoi__texte { padding: 18px 20px 10px; }

.renvoi__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  max-width: none;
}

.renvoi__titre a { color: var(--texte); text-decoration: none; }
.renvoi__titre a:hover,
.renvoi__titre a:focus-visible { color: var(--tampon); text-decoration: underline; text-underline-offset: 4px; }

.renvoi__accroche { margin: 0; font-size: 0.875rem; color: var(--texte-doux); max-width: none; }

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

.derniers-actes .sommaire { margin-top: 22px; }

.derniers-actes__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
}

.derniers-actes__pied p { margin: 0; font-size: 0.9375rem; color: var(--texte-doux); max-width: 52ch; }

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

.releve { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordure); }

.releve > li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px dashed var(--bordure);
}

.releve time {
  font-family: var(--marge);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--acier);
  font-variant-numeric: tabular-nums;
}

.releve a { color: var(--texte); text-decoration: none; font-weight: 500; }
.releve a:hover,
.releve a:focus-visible { color: var(--tampon); text-decoration: underline; text-underline-offset: 3px; }

.releve .petit { display: block; margin-top: 2px; }

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

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

@media (max-width: 900px) {
  .acte-texte h2 { font-size: 1.5rem; letter-spacing: 0; }
  .acte-texte aside { padding-left: 52px; }
  .notice-auteur { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .releve > li { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .sommaire { grid-template-columns: minmax(0, 1fr); }
  .renvoi__grille { grid-template-columns: minmax(0, 1fr); }
  .acte-texte table { display: block; overflow-x: auto; }
  .notice__contenu { padding-left: 48px; }
  .notice__contenu::before { left: 30px; }
  .notice__contenu .perfo { left: 8px; }
}

/* --------------------------------------------------------------------------
   20.10 Pied de page des pages du magazine
   Les intitules de colonne y sont des paragraphes et non des titres, afin que
   la hierarchie h1, h2, h3 d un article reste entierement portee par le texte.
   -------------------------------------------------------------------------- */

.pied .pied__rubrique {
  margin: 0 0 14px;
  max-width: none;
  font-family: var(--courant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acier);
}

/* --------------------------------------------------------------------------
   20.11 Entete d article : le titre respire sur une mesure plus large que
   celle du hero de la page d accueil, car il compte souvent dix mots.
   -------------------------------------------------------------------------- */

.acte-tete h1 { max-width: 26ch; }