/* ==========================================================================
   Cloisonia, feuille de style unique
   Duotone serigraphie, deux encres, papier gris chaud
   Grille: panneau lateral fixe a gauche, colonne de contenu qui defile a droite
   ========================================================================== */

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

:root {
  --papier: #F4F3F0;
  --nuit: #101426;
  --surface: #FFFFFF;
  --graphite: #14161C;
  --ardoise: #4E5460;
  --indigo: #1F2184;
  --indigo-fonce: #191B6C;
  --encre-papier: #F4F3F0;
  --alerte: #A3122A;
  --bordure: #D6D3CB;
  --bordure-nuit: rgba(244, 243, 240, 0.22);

  --panneau-largeur: 288px;
  --barre-hauteur: 64px;
  --colonne-max: 1080px;
  --gouttiere: 24px;
  --module: 8px;

  --titre: "Cinzel", "Times New Roman", serif;
  --courant: "Barlow", "Segoe UI", Arial, sans-serif;
  --compte: "Fira Code", "Consolas", monospace;

  --duree-lente: 1400ms;
  --courbe-douce: cubic-bezier(0.16, 0.84, 0.44, 1);
}

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

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

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

body {
  margin: 0;
  background-color: var(--papier);
  background-image:
    repeating-linear-gradient(90deg, rgba(20, 22, 28, 0.018) 0 0.5px, transparent 0.5px 7px);
  color: var(--graphite);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 calc(var(--module) * 2); }

h1 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 3.05rem;
  line-height: 1.12;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h2 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0;
}

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

p, li { max-width: 68ch; }

p { margin: 0 0 calc(var(--module) * 2); }

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

strong { font-weight: 600; }

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

::selection { background: var(--indigo); color: var(--encre-papier); }

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

.panneau :focus-visible,
.pied :focus-visible { outline-color: var(--encre-papier); }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  background: var(--indigo);
  color: var(--encre-papier);
  padding: 12px 20px;
  font-family: var(--compte);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.evitement:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   3. Elements de compte, en Fira Code
   -------------------------------------------------------------------------- */

.compte,
.source,
.horodate,
.siren {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
}

.source {
  font-size: 0.8125rem;
  color: var(--ardoise);
}

.surtitre {
  display: block;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 calc(var(--module) * 1.5);
}

.surtitre--clair { color: rgba(244, 243, 240, 0.72); }

.etiquette {
  display: inline-block;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border: 1px solid var(--bordure);
  background: var(--papier);
  color: var(--ardoise);
  white-space: nowrap;
}

.etiquette--vigilance { border-color: var(--indigo); color: var(--indigo); }
.etiquette--averee { border-color: var(--alerte); color: var(--alerte); }

.legende {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ardoise);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Motif signature: veines de bois en fil continu
   -------------------------------------------------------------------------- */

.veines { display: block; width: 100%; height: 100%; }
.veines path { fill: none; stroke: var(--bordure); stroke-width: 1; opacity: 0.35; }

.veines--panneau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.veines--panneau path { stroke: var(--encre-papier); opacity: 0.14; }

.veines--separateur {
  height: 48px;
  margin: calc(var(--module) * 6) 0;
  overflow: hidden;
}
.veines--separateur path { stroke: var(--bordure); opacity: 0.55; }

.veines--graphe {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.veines--graphe path { stroke: var(--bordure); opacity: 0.4; }

.veines--hero {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 180px;
  pointer-events: none;
}
.veines--hero path {
  stroke: var(--bordure);
  opacity: 0.5;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: tracer-veine 2200ms var(--courbe-douce) forwards;
}
.veines--hero path:nth-child(2) { animation-delay: 90ms; }
.veines--hero path:nth-child(3) { animation-delay: 180ms; }
.veines--hero path:nth-child(4) { animation-delay: 270ms; }
.veines--hero path:nth-child(5) { animation-delay: 360ms; }
.veines--hero path:nth-child(6) { animation-delay: 450ms; }
.veines--hero path:nth-child(7) { animation-delay: 540ms; }

@keyframes tracer-veine { to { stroke-dashoffset: 0; } }

/* Trame allegee, reservee aux en tetes de tableau */
.trame-fil {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(20, 22, 28, 0.07) 0 0.5px,
    transparent 0.5px 6px
  );
}

/* --------------------------------------------------------------------------
   5. Filet de cloison, forme signature
   -------------------------------------------------------------------------- */

.filet-cloison {
  position: relative;
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  background: var(--surface);
}

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

.filet-cloison::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: linear-gradient(
    to top left,
    var(--papier) 0 49%,
    var(--bordure) 49% 51%,
    transparent 51% 100%
  );
}

.filet-cloison--averee { border-left-color: var(--alerte); }
.filet-cloison--averee::after {
  background: linear-gradient(
    to top left,
    var(--alerte) 0 51%,
    transparent 51% 100%
  );
}

.filet-cloison--nuit {
  background: transparent;
  border-color: var(--bordure-nuit);
  border-left-color: var(--encre-papier);
}
.filet-cloison--nuit::before { background: var(--bordure-nuit); }
.filet-cloison--nuit::after {
  background: linear-gradient(
    to top left,
    var(--nuit) 0 49%,
    var(--bordure-nuit) 49% 51%,
    transparent 51% 100%
  );
}

.filet-cloison--papier { background: var(--papier); }

/* --------------------------------------------------------------------------
   6. Panneau lateral fixe
   -------------------------------------------------------------------------- */

.panneau {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--panneau-largeur);
  height: 100vh;
  background: var(--nuit);
  color: var(--encre-papier);
  display: flex;
  flex-direction: column;
  z-index: 60;
  overflow: hidden;
}

.panneau__fond { position: absolute; inset: 0; }

.panneau__corps {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 24px 24px;
  overflow-y: auto;
}

.panneau__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--encre-papier);
  margin-bottom: 34px;
}

.panneau__logo svg { flex: 0 0 auto; }

.panneau__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.panneau__mention {
  font-family: var(--compte);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: rgba(244, 243, 240, 0.6);
  text-transform: uppercase;
  margin-bottom: 22px;
  line-height: 1.5;
  max-width: none;
}

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

.panneau__nav li { margin: 0 0 2px; max-width: none; }

.panneau__ancre {
  display: block;
  position: relative;
  padding: 8px 10px 8px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(244, 243, 240, 0.68);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 140ms linear, border-color 140ms linear;
}

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

.panneau__ancre[aria-current="true"],
.panneau__ancre.est-active {
  color: #FFFFFF;
  border-left-color: #5A5DD8;
}

.panneau__numero {
  font-family: var(--compte);
  font-size: 0.6875rem;
  color: rgba(244, 243, 240, 0.42);
  margin-right: 8px;
}

.panneau__bas { margin-top: auto; padding-top: 22px; }

.panneau__lien-auteur {
  display: block;
  font-size: 0.8125rem;
  color: rgba(244, 243, 240, 0.6);
  text-decoration: none;
  margin-top: 14px;
  border-bottom: 1px solid var(--bordure-nuit);
  padding-bottom: 12px;
}
.panneau__lien-auteur:hover { color: var(--encre-papier); }

.panneau__signature {
  font-family: var(--compte);
  font-size: 0.6875rem;
  color: rgba(244, 243, 240, 0.45);
  margin: 12px 0 0;
  line-height: 1.6;
  max-width: none;
}

/* Barre superieure mobile */

.barre {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--barre-hauteur);
  background: var(--nuit);
  color: var(--encre-papier);
  z-index: 70;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms linear;
}

.barre.est-defilee { border-bottom-color: rgba(214, 211, 203, 0.3); }

.barre__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--encre-papier);
  text-decoration: none;
}

.barre__bouton {
  appearance: none;
  background: transparent;
  border: 1px solid var(--bordure-nuit);
  color: var(--encre-papier);
  font-family: var(--compte);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
}

.tiroir {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--nuit);
  color: var(--encre-papier);
  padding: 88px 24px 32px;
  overflow-y: auto;
}

.tiroir.est-ouverte { display: block; }

.tiroir ul { list-style: none; margin: 0 0 24px; padding: 0; }
.tiroir li { border-bottom: 1px solid var(--bordure-nuit); max-width: none; }

.tiroir a {
  display: block;
  padding: 14px 0;
  color: var(--encre-papier);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
}

.tiroir__fermer {
  position: absolute;
  top: 14px;
  right: 16px;
  appearance: none;
  background: transparent;
  border: 1px solid var(--bordure-nuit);
  color: var(--encre-papier);
  font-family: var(--compte);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. Colonne de contenu
   -------------------------------------------------------------------------- */

.colonne-defilante {
  margin-left: var(--panneau-largeur);
  min-height: 100vh;
}

.enveloppe {
  max-width: var(--colonne-max);
  padding: 0 48px;
  margin: 0;
}

.strate {
  padding: calc(var(--module) * 11) 0 calc(var(--module) * 3);
  position: relative;
}

.strate--serree { padding-top: calc(var(--module) * 7); }

.strate__entete { margin-bottom: calc(var(--module) * 5); }

.strate__chapeau {
  font-size: 1.125rem;
  color: var(--ardoise);
  max-width: 62ch;
}

/* Grille douze colonnes */

.grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
}

.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-12 { grid-column: span 12; }

/* --------------------------------------------------------------------------
   8. Boutons
   -------------------------------------------------------------------------- */

.visa,
.paraphe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 26px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background-color 140ms linear;
}

.visa {
  background: var(--indigo);
  color: var(--encre-papier);
}
.visa::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--encre-papier);
  transition: width 140ms linear;
}
.visa:hover { background: var(--indigo-fonce); }
.visa:hover::before { width: 3px; }

.paraphe {
  background: transparent;
  color: var(--graphite);
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.paraphe:hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--indigo);
  color: var(--indigo);
}

.visa--panneau { width: 100%; font-size: 0.9rem; padding: 14px 18px; }

.duo-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: calc(var(--module) * 4);
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--module) * 9) 0 calc(var(--module) * 6);
  position: relative;
  overflow: hidden;
}

.hero__grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: center;
}

.hero__texte { grid-column: span 7; }
.hero__image { grid-column: span 5; position: relative; }

.hero h1 { margin-bottom: calc(var(--module) * 3); }

.hero__promesse {
  font-size: 1.1875rem;
  color: var(--ardoise);
  max-width: 54ch;
}

.hero__reserve {
  margin-top: calc(var(--module) * 4);
  padding: 14px 18px 14px 20px;
  font-size: 0.9375rem;
  color: var(--graphite);
  max-width: 56ch;
}

.hero__reserve p { margin: 0; }

.hero__chiffre {
  margin-top: calc(var(--module) * 4);
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.hero__chiffre div { max-width: 20ch; }

.hero__chiffre b {
  display: block;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--indigo);
  letter-spacing: -0.02em;
}

.hero__chiffre span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ardoise);
  line-height: 1.45;
  display: block;
}

.cadre-photo {
  position: relative;
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  background: var(--nuit);
  overflow: hidden;
}

.cadre-photo img {
  width: 100%;
  filter: grayscale(1) contrast(1.08) brightness(0.98);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}

.cadre-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(20, 22, 28, 0.08) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(31, 33, 132, 0.42) 0%, rgba(16, 20, 38, 0.62) 100%);
  pointer-events: none;
}

.cadre-photo__legende {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ardoise);
  margin-top: 10px;
  max-width: 46ch;
}

.hero .cadre-photo img {
  animation: visa-zoom var(--duree-lente) var(--courbe-douce) both;
}

@keyframes visa-zoom {
  from { transform: scale(1.08); filter: grayscale(1) blur(7px); opacity: 0; }
  to { transform: scale(1); filter: grayscale(1) contrast(1.08) brightness(0.98) blur(0); opacity: 0.92; }
}

.hero h1,
.hero__promesse {
  animation: monte-paraphe 900ms var(--courbe-douce) 180ms both;
}

@keyframes monte-paraphe {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   10. Encadre lateral et debordement
   -------------------------------------------------------------------------- */

.marge-note {
  padding: 20px 20px 20px 22px;
  font-size: 0.9375rem;
  align-self: start;
  position: sticky;
  top: 40px;
}

.marge-note h3 {
  font-family: var(--compte);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 12px;
}

.marge-note p { font-size: 0.9375rem; color: var(--ardoise); }
.marge-note p:last-child { margin-bottom: 0; }

.debordement {
  margin-left: calc(var(--panneau-largeur) * -0.16);
  padding-left: calc(var(--panneau-largeur) * 0.16);
}

.bande-nuit {
  background: var(--nuit);
  color: var(--encre-papier);
  margin-left: calc(-1 * var(--panneau-largeur));
  padding-left: var(--panneau-largeur);
  padding-top: calc(var(--module) * 8);
  padding-bottom: calc(var(--module) * 8);
  position: relative;
}

.bande-nuit h2, .bande-nuit h3 { color: var(--encre-papier); }
.bande-nuit p { color: rgba(244, 243, 240, 0.78); }
.bande-nuit .strate__chapeau { color: rgba(244, 243, 240, 0.78); }

/* --------------------------------------------------------------------------
   11. Sequence en quatre temps
   -------------------------------------------------------------------------- */

.sequence { list-style: none; margin: 0; padding: 0; counter-reset: temps; }

.sequence > li {
  counter-increment: temps;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--gouttiere);
  padding: 24px 0;
  border-top: 1px solid var(--bordure);
  max-width: none;
}

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

.sequence > li::before {
  content: "0" counter(temps);
  font-family: var(--compte);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--indigo);
  line-height: 1;
  padding-top: 4px;
  border-left: 3px solid var(--indigo);
  padding-left: 14px;
  align-self: start;
}

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

/* --------------------------------------------------------------------------
   12. Cartes de surveillance
   -------------------------------------------------------------------------- */

.jeu-cartes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gouttiere);
}

.carte-regle {
  padding: 22px 22px 22px 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms linear, transform 520ms var(--courbe-douce);
}

.carte-regle.est-visible { opacity: 1; transform: none; }

.carte-regle h3 { margin-bottom: 10px; }
.carte-regle p { font-size: 0.9688rem; margin-bottom: 10px; }
.carte-regle p:last-of-type { margin-bottom: 0; }
.carte-regle .source { display: block; margin-top: 12px; }

/* --------------------------------------------------------------------------
   13. Graphe des liens
   -------------------------------------------------------------------------- */

.graphe {
  position: relative;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  overflow: hidden;
}

.graphe__dessin { position: relative; z-index: 2; width: 100%; height: auto; display: block; }

.graphe__legende {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  font-size: 0.8125rem;
  font-family: var(--compte);
  color: var(--ardoise);
}

.graphe__legende span { display: inline-flex; align-items: center; gap: 7px; }

.puce { width: 10px; height: 10px; display: inline-block; }
.puce--audit { background: var(--indigo); }
.puce--expertise { background: var(--ardoise); }
.puce--averee { background: var(--alerte); }

/* --------------------------------------------------------------------------
   14. Registre, tableaux denses
   -------------------------------------------------------------------------- */

.registre-cadre { overflow-x: auto; border: 1px solid var(--bordure); background: var(--surface); }

.registre {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 640px;
}

.registre caption {
  text-align: left;
  font-family: var(--compte);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordure);
}

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

.registre thead th {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
  background-color: var(--papier);
}

.registre tbody th {
  font-weight: 600;
  border-left: 3px solid var(--indigo);
}

.registre td.chiffre {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--indigo);
  white-space: nowrap;
}

.registre tbody tr:last-child th,
.registre tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   15. Preuve sociale
   -------------------------------------------------------------------------- */

.bandeau-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bordure-nuit);
  border: 1px solid var(--bordure-nuit);
  margin-bottom: calc(var(--module) * 6);
}

.bandeau-chiffres div {
  background: var(--nuit);
  padding: 22px 18px;
  max-width: none;
}

.bandeau-chiffres b {
  display: block;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.1;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.bandeau-chiffres span {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(244, 243, 240, 0.7);
  line-height: 1.5;
}

.temoin {
  padding: 24px 24px 22px 26px;
  margin: 0 0 var(--gouttiere);
  background: transparent;
  border-color: var(--bordure-nuit);
  border-left-color: var(--encre-papier);
}

.temoin blockquote { margin: 0; }

.temoin blockquote p {
  font-size: 1.0625rem;
  color: rgba(244, 243, 240, 0.9);
  margin-bottom: 14px;
}

.temoin figcaption {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(244, 243, 240, 0.68);
  line-height: 1.55;
  border-top: 1px solid var(--bordure-nuit);
  padding-top: 12px;
}

.temoin figcaption b { color: #FFFFFF; font-weight: 600; display: block; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   16. Paliers tarifaires
   -------------------------------------------------------------------------- */

.paliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: start;
}

.palier {
  padding: 24px 22px 26px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.palier--avance {
  margin-top: -24px;
  padding-top: 48px;
  border-color: var(--indigo);
  border-left-width: 3px;
}

.palier__marque {
  font-family: var(--compte);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 8px;
  display: block;
}

.palier h3 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.palier__prix {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 2.1rem;
  color: var(--graphite);
  line-height: 1;
  letter-spacing: -0.03em;
}

.palier__unite {
  display: block;
  font-family: var(--courant);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ardoise);
  margin-top: 8px;
}

.palier__cible {
  font-size: 0.9063rem;
  color: var(--ardoise);
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
}

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

.palier li {
  position: relative;
  padding: 0 0 10px 20px;
  max-width: none;
}

.palier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 1px;
  background: var(--indigo);
}

.palier .visa,
.palier .paraphe { margin-top: auto; width: 100%; }

.note-tarif {
  margin-top: calc(var(--module) * 4);
  padding: 18px 20px;
  font-size: 0.9375rem;
}
.note-tarif p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

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

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

.question__bouton {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  padding: 18px 44px 18px 16px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--graphite);
  cursor: pointer;
  position: relative;
  transition: border-color 140ms linear, background-color 140ms linear;
}

.question__bouton:hover { background: var(--surface); border-left-color: var(--indigo); }
.question__bouton[aria-expanded="true"] { border-left-color: var(--indigo); color: var(--indigo); }

.question__bouton::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--compte);
  font-size: 1.25rem;
  color: var(--indigo);
}

.question__bouton[aria-expanded="true"]::after { content: "-"; }

.question__reponse {
  padding: 0 44px 20px 19px;
  font-size: 0.9688rem;
  color: var(--ardoise);
}

.question__reponse[hidden] { display: none; }
.question__reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Formulaire
   -------------------------------------------------------------------------- */

.dossier-contact {
  padding: 28px 28px 30px 30px;
}

.champ { margin-bottom: 18px; }

.champ label {
  display: block;
  font-family: var(--compte);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: 6px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--graphite);
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--bordure);
  padding: 11px 12px;
  transition: border-color 140ms linear;
}

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

.champ textarea { resize: vertical; min-height: 120px; }

.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9063rem;
  color: var(--ardoise);
  margin: 22px 0;
  max-width: 62ch;
}

.consentement input { margin-top: 4px; flex: 0 0 auto; }

.consentement label {
  font-family: var(--courant);
  font-size: 0.9063rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ardoise);
  margin: 0;
}

.voie-directe {
  font-size: 0.9063rem;
  color: var(--ardoise);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
}

/* --------------------------------------------------------------------------
   19. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--nuit);
  color: rgba(244, 243, 240, 0.76);
  margin-left: var(--panneau-largeur);
  padding: calc(var(--module) * 8) 0 calc(var(--module) * 3);
  position: relative;
}

.pied a { color: rgba(244, 243, 240, 0.82); text-decoration: none; }
.pied a:hover { color: #FFFFFF; text-decoration: underline; }

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

.pied h2, .pied h3 {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, 0.55);
  margin-bottom: 14px;
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 9px; font-size: 0.9375rem; max-width: none; }

.pied__phrase { font-size: 0.9375rem; color: rgba(244, 243, 240, 0.72); }

.pied__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  text-decoration: none;
  color: #FFFFFF;
}

.pied__logo .panneau__nom { color: #FFFFFF; }

.pied__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--compte);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  margin-top: 16px;
}

.pied__editeur { font-size: 0.8438rem; line-height: 1.7; color: rgba(244, 243, 240, 0.64); }
.pied__editeur .compte { color: rgba(244, 243, 240, 0.8); }

.pied__barre {
  margin-top: calc(var(--module) * 6);
  padding-top: 20px;
  border-top: 1px solid var(--bordure-nuit);
  font-size: 0.8125rem;
  color: rgba(244, 243, 240, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

.pied__barre p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   20. Pages internes
   -------------------------------------------------------------------------- */

.page-interne { padding: calc(var(--module) * 10) 0 calc(var(--module) * 6); }

.fil { font-family: var(--compte); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ardoise); margin-bottom: 22px; }
.fil a { color: var(--ardoise); }
.fil a:hover { color: var(--indigo); }

.texte-long h2 { margin-top: calc(var(--module) * 6); }
.texte-long h3 { margin-top: calc(var(--module) * 4); }
.texte-long ul, .texte-long ol { padding-left: 22px; margin-bottom: calc(var(--module) * 2); }
.texte-long li { margin-bottom: 8px; }
.texte-long dl { margin: 0 0 calc(var(--module) * 3); }
.texte-long dt { font-weight: 600; margin-top: 12px; }
.texte-long dd { margin: 4px 0 0; color: var(--ardoise); max-width: 68ch; }

.portrait-auteur {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: calc(var(--module) * 5);
}

.portrait-auteur img { border: 1px solid var(--bordure); border-left: 3px solid var(--indigo); }

.encadre {
  padding: 22px 24px;
  margin: calc(var(--module) * 4) 0;
}
.encadre p:last-child { margin-bottom: 0; }

.plan-liste { list-style: none; padding: 0; margin: 0; }
.plan-liste > li {
  padding: 18px 20px;
  margin-bottom: 14px;
  max-width: none;
}
.plan-liste h3 { margin-bottom: 6px; font-size: 1.0625rem; }
.plan-liste p { margin: 0; font-size: 0.9375rem; color: var(--ardoise); }

.page-courte {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--module) * 12) 0;
}

.code-erreur {
  font-family: var(--compte);
  font-size: 4rem;
  font-weight: 500;
  color: var(--indigo);
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -0.04em;
}

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

@media (max-width: 1180px) {
  .enveloppe { padding: 0 32px; }
}

@media (max-width: 1023px) {
  html { scroll-padding-top: 80px; }

  .panneau { display: none; }
  .barre { display: flex; }

  .colonne-defilante { margin-left: 0; padding-top: var(--barre-hauteur); }
  .pied { margin-left: 0; }

  .enveloppe { padding: 0 20px; max-width: none; }

  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.55rem; }

  .hero { min-height: 0; padding-top: calc(var(--module) * 5); }
  .hero__texte, .hero__image { grid-column: span 12; }
  .hero__image { margin-top: calc(var(--module) * 4); }

  .col-8, .col-6, .col-4 { grid-column: span 12; }

  .marge-note { position: static; }

  .jeu-cartes { grid-template-columns: 1fr; }

  .bande-nuit {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .bandeau-chiffres { grid-template-columns: repeat(2, 1fr); }

  .paliers { grid-template-columns: 1fr; }
  .palier--avance { margin-top: 0; padding-top: 24px; }

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

  .portrait-auteur { grid-template-columns: 1fr; }
  .portrait-auteur img { max-width: 220px; }

  .sequence > li { grid-template-columns: 1fr; gap: 10px; }
  .sequence > li::before { padding-top: 0; }

  .debordement { margin-left: 0; padding-left: 0; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .bandeau-chiffres { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; }
  .champ--duo { grid-template-columns: 1fr; }
  .hero__chiffre { gap: 20px; }
  .dossier-contact { padding: 20px 18px 22px 20px; }
  .code-erreur { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .cadre-photo img,
  .hero h1,
  .hero__promesse { animation: none; opacity: 1; transform: none; filter: grayscale(1) contrast(1.08) brightness(0.98); }
  .hero .cadre-photo img { opacity: 0.92; }
  .veines--hero path { animation: none; stroke-dashoffset: 0; }
  .carte-regle { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

@media print {
  .panneau, .barre, .tiroir, .evitement { display: none; }
  .colonne-defilante, .pied { margin-left: 0; }
  body { background: #FFFFFF; }
}

/* ==========================================================================
   22. MAGAZINE, La Note d acceptation
   Ajout en fin de feuille: aucune regle precedente n est modifiee.
   Meme vocabulaire que le reste du site: filet de cloison sur le bord gauche,
   coin inferieur droit rogne a 45 degres, deux encres, Cinzel en capitales,
   Barlow sur une mesure de 68 caracteres, Fira Code sur tout ce qui se compte.
   Un article est une note versee au dossier, le sommaire est une liasse.
   ========================================================================== */

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

.magazine { padding: calc(var(--module) * 10) 0 calc(var(--module) * 8); }

.magazine__entete {
  max-width: 72ch;
  margin-bottom: calc(var(--module) * 6);
}

.magazine__entete h1 { margin-bottom: calc(var(--module) * 3); }

.magazine__chapeau {
  font-size: 1.125rem;
  color: var(--ardoise);
  max-width: 68ch;
  margin-bottom: 0;
}

.magazine__compte {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  margin: calc(var(--module) * 3) 0 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   22.2 Liasse, la grille de cartes d article
   -------------------------------------------------------------------------- */

.liasse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--module) * 4) var(--gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feuillet {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  padding: 0 0 20px;
  max-width: none;
  transition: border-color 140ms linear;
}

/* Filet gris double, a 4 pixels vers l interieur du filet de cloison */
.feuillet::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bordure);
  z-index: 2;
}

/* Coin inferieur droit rogne, comme un angle de chemise */
.feuillet::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: linear-gradient(
    to top left,
    var(--papier) 0 49%,
    var(--bordure) 49% 51%,
    transparent 51% 100%
  );
  z-index: 2;
}

.feuillet:hover { border-color: var(--indigo); }
.feuillet:hover .feuillet__vue img { opacity: 1; }

.feuillet__vue {
  position: relative;
  margin: 0 0 16px;
  background: var(--nuit);
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}

.feuillet__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.98);
  mix-blend-mode: luminosity;
  opacity: 0.92;
  transition: opacity 240ms linear;
}

/* Duotone serigraphie: graphite dans les ombres, bleu nuit dans les demi teintes */
.feuillet__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(20, 22, 28, 0.08) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(31, 33, 132, 0.42) 0%, rgba(16, 20, 38, 0.62) 100%);
  pointer-events: none;
}

.feuillet__texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 20px 0 22px;
}

.feuillet__angle {
  display: block;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 10px;
}

.feuillet__titre {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 10px;
}

.feuillet__titre a {
  color: var(--graphite);
  text-decoration: none;
}

.feuillet__titre a:hover,
.feuillet__titre a:focus-visible {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feuillet__extrait {
  font-size: 0.9375rem;
  color: var(--ardoise);
  margin-bottom: 16px;
  max-width: none;
}

.feuillet__pied {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ardoise);
  max-width: none;
}

.feuillet__duree { color: var(--indigo); }

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

.derniers__pied {
  margin-top: calc(var(--module) * 5);
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.derniers__note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ardoise);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   22.4 Entete d article, exergue et image a la une
   -------------------------------------------------------------------------- */

.note-article { padding: calc(var(--module) * 9) 0 calc(var(--module) * 8); }

.note-article__entete {
  max-width: 72ch;
  margin-bottom: calc(var(--module) * 4);
}

.note-article__entete h1 {
  font-size: 2.55rem;
  margin-bottom: calc(var(--module) * 2.5);
}

.note-article__marque {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ardoise);
  max-width: none;
}

.note-article__marque a { color: var(--indigo); }
.note-article__valeur { color: var(--graphite); }
.note-article__duree .note-article__valeur { color: var(--indigo); }

/* Exergue du chapeau, traite comme un encadre a filet de cloison */
.exergue {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  padding: 20px 24px 20px 26px;
  margin: 0 0 calc(var(--module) * 5);
  max-width: 68ch;
  font-size: 1.0938rem;
  line-height: 1.6;
  color: var(--graphite);
}

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

.exergue::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: linear-gradient(
    to top left,
    var(--papier) 0 49%,
    var(--bordure) 49% 51%,
    transparent 51% 100%
  );
}

/* Image a la une, cadre duotone et signature d animation du site */
.cliche {
  position: relative;
  margin: 0 0 calc(var(--module) * 6);
  background: var(--nuit);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  overflow: hidden;
}

.cliche img {
  width: 100%;
  filter: grayscale(1) contrast(1.08) brightness(0.98);
  mix-blend-mode: luminosity;
  opacity: 0.92;
  animation: note-zoom var(--duree-lente) var(--courbe-douce) both;
}

.cliche::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(20, 22, 28, 0.08) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(31, 33, 132, 0.42) 0%, rgba(16, 20, 38, 0.62) 100%);
  pointer-events: none;
}

@keyframes note-zoom {
  from { transform: scale(1.08); filter: grayscale(1) blur(7px); opacity: 0; }
  to { transform: scale(1); filter: grayscale(1) contrast(1.08) brightness(0.98) blur(0); opacity: 0.92; }
}

/* --------------------------------------------------------------------------
   22.5 Corps de l article, balises nues sans aucune classe
   -------------------------------------------------------------------------- */

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

.corps-article h2 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.14;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphite);
  position: relative;
  border-left: 3px solid var(--indigo);
  padding-left: 16px;
  margin: calc(var(--module) * 7) 0 calc(var(--module) * 2.5);
}

.corps-article h2::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--bordure);
}

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

.corps-article h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--graphite);
  position: relative;
  padding-left: 16px;
  margin: calc(var(--module) * 4.5) 0 calc(var(--module) * 1.5);
}

.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--indigo);
}

.corps-article p { margin: 0 0 calc(var(--module) * 2.5); max-width: 68ch; }

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

.corps-article a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.corps-article a:hover,
.corps-article a:focus-visible { text-decoration-thickness: 2px; }

.corps-article ul,
.corps-article ol {
  list-style: none;
  margin: 0 0 calc(var(--module) * 3);
  padding: 0;
}

.corps-article li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  max-width: 66ch;
}

.corps-article li:last-child { margin-bottom: 0; }

.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--indigo);
}

.corps-article ol { counter-reset: point-note; }

.corps-article ol > li {
  counter-increment: point-note;
  padding-left: 34px;
}

.corps-article ol > li::before {
  content: counter(point-note, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--indigo);
  line-height: 2.1;
}

.corps-article li > ul,
.corps-article li > ol { margin: 10px 0 0; }

/* Tableau recapitulatif, meme traitement que le registre du site */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--bordure);
  font-size: 0.9375rem;
  margin: 0 0 calc(var(--module) * 4);
}

.corps-article thead th {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
  background-color: var(--papier);
  background-image: repeating-linear-gradient(
    180deg,
    rgba(20, 22, 28, 0.07) 0 0.5px,
    transparent 0.5px 6px
  );
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: bottom;
}

.corps-article tbody th {
  text-align: left;
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  vertical-align: top;
}

.corps-article td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
  color: var(--ardoise);
}

.corps-article tbody tr:last-child th,
.corps-article tbody tr:last-child td { border-bottom: 0; }

/* Encadre, forme signature complete */
.corps-article aside {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  padding: 20px 24px 20px 26px;
  margin: 0 0 calc(var(--module) * 4);
}

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

.corps-article aside::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: linear-gradient(
    to top left,
    var(--papier) 0 49%,
    var(--bordure) 49% 51%,
    transparent 51% 100%
  );
}

.corps-article aside p { font-size: 0.9688rem; color: var(--graphite); }
.corps-article aside p:last-child,
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

/* Citation d une regle, sa source la suit en Fira Code entre parentheses */
.corps-article blockquote {
  margin: 0 0 calc(var(--module) * 4);
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--indigo);
  font-size: 1.0938rem;
  line-height: 1.6;
  color: var(--graphite);
}

.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 0 0 calc(var(--module) * 4);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  background: var(--nuit);
}

.corps-article figure img {
  width: 100%;
  filter: grayscale(1) contrast(1.08) brightness(0.98);
  opacity: 0.92;
}

.corps-article figcaption {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(244, 243, 240, 0.72);
  padding: 10px 16px 12px;
}

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

.appel-article {
  position: relative;
  max-width: 68ch;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  padding: 24px 26px 26px 28px;
  margin: calc(var(--module) * 5) 0;
}

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

.appel-article::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: linear-gradient(
    to top left,
    var(--papier) 0 49%,
    var(--bordure) 49% 51%,
    transparent 51% 100%
  );
}

.appel-article__titre {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 12px;
}

.appel-article p { font-size: 0.9688rem; }
.appel-article p:last-child { margin-bottom: 0; }

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

.encart-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: start;
  max-width: 68ch;
  padding: 22px 24px 22px 26px;
  margin: 0 0 calc(var(--module) * 7);
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
}

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

.encart-auteur img {
  border: 1px solid var(--bordure);
  filter: grayscale(1) contrast(1.05);
}

.encart-auteur__role {
  display: block;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 8px;
}

.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.encart-auteur p { font-size: 0.9375rem; color: var(--ardoise); }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi {
  padding-top: calc(var(--module) * 4);
  border-top: 1px solid var(--bordure);
}

.lire-aussi__titre {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: calc(var(--module) * 3);
}

.lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.renvoi {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--indigo);
  padding: 0 0 18px;
  transition: border-color 140ms linear;
}

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

.renvoi::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: linear-gradient(
    to top left,
    var(--papier) 0 49%,
    var(--bordure) 49% 51%,
    transparent 51% 100%
  );
  z-index: 2;
}

.renvoi:hover { border-color: var(--indigo); }

.renvoi > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bordure);
  filter: grayscale(1) contrast(1.08) brightness(0.98);
  opacity: 0.92;
}

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

.renvoi__titre {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.32;
  margin-bottom: 8px;
}

.renvoi__titre a { color: var(--graphite); text-decoration: none; }
.renvoi__titre a:hover,
.renvoi__titre a:focus-visible {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* --------------------------------------------------------------------------
   22.9 Intitules de colonne du pied de page
   Dans le magazine, les balises h2 et h3 sont reservees au corps redactionnel:
   les colonnes du pied de page portent donc un paragraphe mis en forme.
   -------------------------------------------------------------------------- */

.pied__titre {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, 0.55);
  margin: 0 0 14px;
  max-width: none;
}

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

@media (max-width: 1023px) {
  .magazine { padding: calc(var(--module) * 5) 0 calc(var(--module) * 6); }
  .note-article { padding: calc(var(--module) * 5) 0 calc(var(--module) * 6); }
  .note-article__entete h1 { font-size: 1.95rem; }
  .corps-article h2 { font-size: 1.4rem; }
  .liasse,
  .lire-aussi__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .encart-auteur { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .liasse,
  .lire-aussi__grille { grid-template-columns: 1fr; }
  .exergue { padding: 16px 18px 16px 20px; }
  .corps-article table { display: block; overflow-x: auto; }
  .appel-article { padding: 20px 18px 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cliche img {
    animation: none;
    opacity: 0.92;
    transform: none;
    filter: grayscale(1) contrast(1.08) brightness(0.98);
  }
}

@media print {
  .cliche img { animation: none; }
  .feuillet, .renvoi, .appel-article { break-inside: avoid; }
}