/* Etoiline, feuille de style unique.
   Registre tenu a la main: une seule colonne, une marge de reliure a gauche,
   des feuillets blancs poses sur l ivoire, des courbes de niveau en fond de section.
   Mode clair integral, aucune variante sombre. */

:root {
  --fond: #FBF7F2;
  --fond-alt: #F5E9E1;
  --surface: #FFFFFF;
  --texte: #241C18;
  --texte-doux: #6E5F55;
  --accent: #2D3E93;
  --accent-profond: #22306F;
  --accent-texte: #FFFFFF;
  --terre: #9C5540;
  --bordure: #E3D8CD;
  --voile: var(--fond);

  --reliure: 88px;
  --colonne: 720px;
  --pli: 2px;

  --titre: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --courant: "Crimson Pro", Georgia, "Times New Roman", serif;
  --registre: "Piazzolla", Georgia, serif;

  --souffle-court: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --souffle-long: 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 88px; }

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

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

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

:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: #DFE3F2; color: var(--texte); }

/* ------------------------------------------------------------------
   1. Colonne du registre et marge de reliure
------------------------------------------------------------------ */

.registre {
  max-width: calc(var(--colonne) + var(--reliure));
  margin: 0 auto;
  padding-left: var(--reliure);
  padding-right: 24px;
  position: relative;
}

/* Le filet vertical de la reliure court sans interruption d une feuille a l autre. */
.registre::before {
  content: "";
  position: absolute;
  left: calc(var(--reliure) - 30px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bordure);
}

.feuille {
  position: relative;
  padding: 76px 0 84px;
  overflow: hidden;
}

.feuille--terre { background: var(--fond-alt); --voile: var(--fond-alt); }

.feuille--encre {
  background: var(--accent);
  color: var(--accent-texte);
  padding: 54px 0 58px;
  --voile: var(--accent);
}

.feuille--encre .registre::before { background: rgba(255, 255, 255, 0.32); }

.enseigne { position: relative; margin: 0 0 34px; }

.cote {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--terre);
  position: absolute;
  left: calc(var(--reliure) * -1);
  top: 6px;
  width: calc(var(--reliure) - 42px);
  text-align: right;
}

/* Perforation ronde alignee dans la marge, a hauteur du filet double. */
.cote::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
}

.feuille--terre .cote::after { background: var(--fond-alt); }
.feuille--encre .cote::after { background: var(--accent); border-color: rgba(255, 255, 255, 0.5); }
.feuille--encre .cote { color: rgba(255, 255, 255, 0.78); }

.intitule {
  display: block;
  font-family: var(--registre);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 10px;
}

.feuille--encre .intitule { color: rgba(255, 255, 255, 0.8); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: 0.02em;
  line-height: 1.14;
  margin: 0 0 16px;
  color: var(--texte);
}

h1 { font-size: 3.4rem; font-weight: 300; }
h2 { font-size: 2.2rem; font-weight: 400; }
h3 { font-size: 1.35rem; font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 500; }

.feuille--encre h2, .feuille--encre h3 { color: var(--accent-texte); }

p { margin: 0 0 18px; max-width: 64ch; }
.doux { color: var(--texte-doux); }
.chapo { font-size: 1.1875rem; line-height: 1.72; color: var(--texte-doux); }

.filet-double {
  border: 0;
  height: 4px;
  margin: 34px 0;
  background:
    linear-gradient(var(--bordure), var(--bordure)) top left / 100% 1px no-repeat,
    linear-gradient(var(--bordure), var(--bordure)) bottom left / 100% 1px no-repeat;
}

.filet-double--court { width: 120px; margin: 26px 0; }

/* ------------------------------------------------------------------
   2. Feuillets: filet double, encoche, perforation
------------------------------------------------------------------ */

.feuillet {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  padding: 34px 30px 28px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background-image:
    linear-gradient(var(--bordure), var(--bordure)),
    linear-gradient(var(--bordure), var(--bordure)),
    radial-gradient(circle at center, var(--fond) 0 2.5px, var(--bordure) 2.5px 3px, transparent 3px);
  background-repeat: no-repeat;
  background-size: calc(100% - 44px) 1px, calc(100% - 44px) 1px, 8px 8px;
  background-position: 30px 16px, 30px 19px, 12px 14px;
  --voile: var(--surface);
}

.feuillet--nu { background-color: transparent; border-style: dashed; }

.feuillet__titre { margin-bottom: 8px; }
.feuillet p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   3. Courbes de niveau imbriquees, motif signature
------------------------------------------------------------------ */

.releve-source { position: absolute; width: 0; height: 0; overflow: hidden; }

.releve { position: absolute; pointer-events: none; z-index: 0; }

.releve--horizon {
  width: 900px;
  height: 900px;
  right: -340px;
  top: -220px;
  opacity: 0.9;
}

.releve--bandeau {
  width: 520px;
  height: 520px;
  left: 46%;
  bottom: -360px;
  opacity: 0.55;
}

.releve--coin {
  width: 190px;
  height: 190px;
  right: -54px;
  top: -46px;
  opacity: 0.85;
}

.releve--vignette {
  position: static;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.9;
}

/* Trame de relief tres discrete sur les sections terracotta. */
.feuille--terre::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 12% 30%, rgba(156, 85, 64, 0.055) 0 1px, transparent 1px 46px);
  z-index: 0;
}

.feuille > .registre, .feuille > .large { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   4. Revelation par separation en deux moities
------------------------------------------------------------------ */

.devoile { position: relative; }

.avec-volets .devoile > * { transition: opacity var(--souffle-long); }

.avec-volets .devoile::before,
.avec-volets .devoile::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  background: var(--voile);
  z-index: 4;
  pointer-events: none;
  transition: transform var(--souffle-long);
  transition-delay: calc(var(--pas, 0) * 80ms);
}

.avec-volets .devoile::before { top: -2px; height: calc(50% + 2px); transform: translateY(-6px); }
.avec-volets .devoile::after { bottom: -2px; height: calc(50% + 2px); transform: translateY(6px); }

.avec-volets .devoile.est-ouvert::before { transform: translateY(-102%); }
.avec-volets .devoile.est-ouvert::after { transform: translateY(102%); }

.avec-volets .devoile--fente::before {
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: 50%;
  height: auto;
  transform: translateX(-4px);
}
.avec-volets .devoile--fente::after {
  top: -2px;
  bottom: -2px;
  left: 50%;
  right: -2px;
  height: auto;
  transform: translateX(4px);
}
.avec-volets .devoile--fente.est-ouvert::before { transform: translateX(-102%); }
.avec-volets .devoile--fente.est-ouvert::after { transform: translateX(102%); }

/* ------------------------------------------------------------------
   5. En tete collant
------------------------------------------------------------------ */

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 10px 18px;
  z-index: 60;
  font-family: var(--registre);
}
.evitement:focus { left: 12px; top: 12px; }

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 247, 242, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bordure);
}

.entete--defilee {
  border-bottom: 0;
  box-shadow: 0 1px 0 0 var(--bordure), 0 4px 0 0 var(--bordure);
}

.entete__barre {
  max-width: calc(var(--colonne) + var(--reliure));
  margin: 0 auto;
  height: 72px;
  padding: 0 24px 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--texte);
  text-decoration: none;
  flex: 0 0 auto;
}

.marque svg { flex: 0 0 auto; }
.marque:hover { color: var(--accent); }

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

.chemin a {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  text-decoration: none;
}

.chemin a:hover { color: var(--accent); text-decoration: underline; }

/* Le bouton principal de l en tete garde son texte blanc sur le bleu matin:
   la regle de navigation ci dessus ne doit pas lui imposer la couleur douce. */
.chemin a.bouton--encre,
.chemin a.bouton--encre:hover,
.chemin a.bouton--encre:focus-visible {
  color: var(--accent-texte);
  text-decoration: none;
}

.trois-filets {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--pli);
  cursor: pointer;
  padding: 0;
}

.trois-filets span:not(.evitement) {
  display: block;
  width: 22px;
  height: 1px;
  margin: 4px auto;
  background: var(--texte);
}

.panneau {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--fond);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path var(--souffle-long);
  overflow-y: auto;
  padding: 90px 28px 40px;
}

.panneau[hidden] { display: none; }
.panneau.est-ouvert { clip-path: inset(0 0 0 0); }

.panneau__liste { list-style: none; margin: 0; padding: 0; max-width: 420px; }

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

.panneau__liste a {
  display: block;
  padding: 16px 4px;
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--texte);
  text-decoration: none;
}

.panneau__liste a:hover { color: var(--accent); }

.panneau__fermer {
  position: absolute;
  top: 18px;
  right: 20px;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--pli);
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte);
  padding: 10px 16px;
  cursor: pointer;
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--pli);
  font-family: var(--registre);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 0;
}

.bouton--encre { background: var(--accent); color: var(--accent-texte); }

.bouton--encre::before,
.bouton--encre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: var(--accent-profond);
  transition: height var(--souffle-court);
  z-index: 0;
}

.bouton--encre::before { top: 50%; }
.bouton--encre::after { bottom: 50%; }
.bouton--encre:hover::before, .bouton--encre:hover::after { height: 50%; }
.bouton--encre span { position: relative; z-index: 1; }
.bouton--encre:hover { color: var(--accent-texte); }

.bouton--filet {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--bordure);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

.bouton--filet:hover {
  color: var(--accent-profond);
  box-shadow: inset 0 0 0 1px var(--surface), inset 0 0 0 2px var(--bordure);
}

.bouton--clair { background: var(--surface); color: var(--accent); }

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

/* ------------------------------------------------------------------
   7. Hero
------------------------------------------------------------------ */

.ouverture { padding-top: 62px; padding-bottom: 70px; }

.ouverture h1 { margin-bottom: 20px; max-width: 15ch; }

.ouverture .chapo { max-width: 58ch; }

.gage {
  margin-top: 30px;
  border-left: 2px solid var(--terre);
  padding: 4px 0 4px 16px;
  font-family: var(--registre);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: 52ch;
}

.gage strong { color: var(--texte); font-weight: 600; }

/* Debordement volontaire: la photographie mord sur la marge de reliure. */
.cadre {
  position: relative;
  margin: 44px 0 0 calc(var(--reliure) * -1 + 18px);
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 12px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  --voile: var(--surface);
}

.cadre--dedans { margin-left: 0; }

.cadre__vue { position: relative; overflow: hidden; }

.cadre__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(45, 62, 147, 0.06) 0%, rgba(45, 62, 147, 0) 22%),
    rgba(251, 247, 242, 0.08);
  pointer-events: none;
}

.cadre img { filter: saturate(0.8); width: 100%; }

.cadre__legende {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  padding: 12px 4px 2px;
  margin: 0;
}

/* ------------------------------------------------------------------
   8. Probleme, solution, listes
------------------------------------------------------------------ */

.constats { list-style: none; margin: 26px 0 0; padding: 0; }

.constats li {
  position: relative;
  padding: 0 0 16px 26px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bordure);
  max-width: 62ch;
}

.constats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 9px;
  height: 9px;
  background: var(--terre);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

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

.etapes { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: pas; }

.etape {
  position: relative;
  padding-left: 62px;
  margin-bottom: 30px;
  counter-increment: pas;
}

.etape::before {
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--registre);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 4px;
  width: 44px;
}

.etape h3 { margin-bottom: 6px; }
.etape p { margin-bottom: 0; }

.entrees { display: grid; gap: 18px; margin-top: 30px; }

.gains { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }

.gain { border-top: 1px solid var(--bordure); padding-top: 16px; }

.gain__valeur {
  display: block;
  font-family: var(--registre);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--terre);
  line-height: 1.2;
}

.gain__libelle { display: block; font-size: 1rem; color: var(--texte-doux); }

/* ------------------------------------------------------------------
   9. Paroles et compteurs
------------------------------------------------------------------ */

.paroles { display: grid; gap: 22px; margin-top: 30px; }

.parole { margin: 0; }

.parole blockquote { margin: 0 0 14px; padding: 0; }

.parole blockquote p {
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--texte);
}

.parole figcaption {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
}

.parole figcaption strong { display: block; color: var(--texte); font-weight: 600; letter-spacing: 0.02em; }

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

.compteur__valeur {
  display: block;
  font-family: var(--titre);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--accent-texte);
}

.compteur__libelle {
  display: block;
  font-family: var(--registre);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 8px;
}

/* ------------------------------------------------------------------
   10. Formules
------------------------------------------------------------------ */

.formules { display: grid; gap: 20px; margin-top: 30px; }

.formule { display: flex; flex-direction: column; }

.formule--retenue { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 62, 147, 0.08); }

.formule__mention {
  font-family: var(--registre);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terre);
  display: block;
  margin-bottom: 6px;
}

.formule__prix {
  font-family: var(--registre);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.1;
  display: block;
  margin: 10px 0 2px;
}

.formule__unite {
  display: block;
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--texte-doux);
  margin-bottom: 14px;
}

.formule__cible { font-size: 1rem; color: var(--texte-doux); }

.formule__liste { list-style: none; margin: 16px 0 22px; padding: 0; font-size: 1rem; }

.formule__liste li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.formule__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.formule .bouton { margin-top: auto; }

.note-tarifaire { font-size: 0.9375rem; color: var(--texte-doux); margin-top: 24px; }

/* ------------------------------------------------------------------
   11. Questions
------------------------------------------------------------------ */

.questions { display: grid; gap: 14px; margin-top: 30px; }

.question { padding: 26px 30px 22px; }

.question h3 { margin: 0; }

.question__intitule {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0 34px 0 0;
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--texte);
  cursor: pointer;
  position: relative;
  line-height: 1.2;
}

.question__intitule::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--souffle-court);
}

.question__intitule[aria-expanded="true"]::after { transform: rotate(225deg); }
.question__intitule:hover { color: var(--accent); }

.question__reponse { padding-top: 14px; }
.question__reponse p { margin-bottom: 12px; }
.question__reponse p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   12. Formulaire
------------------------------------------------------------------ */

.demande { margin-top: 30px; }

.champ { margin-bottom: 20px; }

.champ label, .champ__libelle {
  display: block;
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 7px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1.0625rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--pli);
  padding: 12px 14px;
  line-height: 1.5;
}

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

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

.champ__aide { font-size: 0.9375rem; color: var(--texte-doux); margin: 7px 0 0; }

.accord {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texte-doux);
  font-family: var(--courant);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin-bottom: 22px;
}

.accord input { margin-top: 6px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent); }

.suite-formulaire { font-size: 0.9375rem; color: var(--texte-doux); margin-top: 20px; }

/* ------------------------------------------------------------------
   13. Pied de page
------------------------------------------------------------------ */

.pied {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 54px 0 0;
}

.pied__grille {
  max-width: calc(var(--colonne) + var(--reliure) + 120px);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

.pied h2, .pied h3 {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 14px;
}

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

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

.pied__phrase { font-size: 0.9375rem; color: var(--texte-doux); max-width: 34ch; }

.pied__profils { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }

.pied__profils a {
  font-family: var(--registre);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bordure);
}

.pied__editeur { font-size: 0.875rem; color: var(--texte-doux); margin-top: 12px; }

.pied__barre {
  margin-top: 44px;
  border-top: 1px solid var(--bordure);
  padding: 18px 24px 26px;
  font-family: var(--registre);
  font-size: 0.8125rem;
  color: var(--texte-doux);
  text-align: center;
}

.pied__barre a { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------------------
   14. Pages internes
------------------------------------------------------------------ */

.fil {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
  padding: 24px 0 0;
}

.fil a { color: var(--texte-doux); }

.texte-legal h2 { font-size: 1.7rem; margin-top: 44px; }
.texte-legal h3 { font-size: 1.2rem; margin-top: 28px; }
.texte-legal ul { padding-left: 20px; margin: 0 0 18px; }
.texte-legal li { margin-bottom: 8px; max-width: 62ch; }
.texte-legal dt { font-weight: 600; font-family: var(--registre); font-size: 0.9375rem; margin-top: 14px; }
.texte-legal dd { margin: 4px 0 0; color: var(--texte-doux); }

.portrait {
  border: 1px solid var(--bordure);
  padding: 10px;
  background: var(--surface);
  max-width: 220px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  margin: 0 0 26px;
}

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

.plan-liste { list-style: none; margin: 26px 0 0; padding: 0; }
.plan-liste li { margin-bottom: 20px; border-bottom: 1px solid var(--bordure); padding-bottom: 16px; }
.plan-liste a { font-family: var(--titre); font-size: 1.25rem; letter-spacing: 0.02em; }
.plan-liste p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--texte-doux); }

.centre-message { padding: 90px 0 100px; }
.centre-message h1 { font-size: 2.8rem; }

/* ------------------------------------------------------------------
   15. Adaptations d ecran
------------------------------------------------------------------ */

@media (min-width: 900px) {
  .entrees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .formule {
    padding: 30px 22px 26px;
    background-size: calc(100% - 34px) 1px, calc(100% - 34px) 1px, 8px 8px;
    background-position: 22px 16px, 22px 19px, 9px 14px;
  }
  .formule__liste li { font-size: 0.9375rem; }
  .compteurs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 34px; }
  .pied__grille { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
}

@media (max-width: 899px) {
  :root { --reliure: 24px; --colonne: 100%; }

  .registre { padding-left: 24px; padding-right: 20px; }
  .registre::before { left: 10px; }

  .chemin { display: none; }
  .trois-filets { display: block; }

  .cote {
    position: static;
    display: inline-block;
    width: auto;
    text-align: left;
    margin-right: 10px;
  }
  .cote::after { display: none; }

  .intitule { display: inline-block; }

  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.7rem; }
  .ouverture h1 { max-width: none; }

  .cadre { margin-left: 0; }
  .feuille { padding: 54px 0 58px; }
  .releve--horizon { width: 620px; height: 620px; right: -300px; top: -160px; }
  .question { padding: 22px 22px 20px; }
  .feuillet { padding: 30px 22px 24px; background-position: 22px 16px, 22px 19px, 9px 14px; background-size: calc(100% - 34px) 1px, calc(100% - 34px) 1px, 8px 8px; }
}

@media (max-width: 560px) {
  .compteurs { grid-template-columns: 1fr; }
  .duo-boutons .bouton { width: 100%; }
  .centre-message h1 { font-size: 2rem; }
}

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

  .avec-volets .devoile::before,
  .avec-volets .devoile::after { display: none; }

  .panneau { transition: none; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .entete, .panneau, .duo-boutons, .releve { display: none; }
  body { background: #FFFFFF; }
}

/* ==================================================================
   16. Magazine, Les Feuillets de memoire
   Section ajoutee apres la construction du site, sans toucher a une
   seule regle precedente. Le magazine n est pas un module rapporte:
   il reprend les variables de la palette, le feuillet signature
   (filet double en haut, coin superieur gauche encoche, perforation
   ronde dans la marge), les courbes de niveau et la revelation par
   separation en deux moities.
   Le corps des articles est du HTML nu, sans aucun attribut class:
   tout y est mis en forme par selecteur de balise, en descendance
   du conteneur .corps.
================================================================== */

/* ------------------------------------------------------------------
   16.1 Sommaire du magazine et cartes d article
------------------------------------------------------------------ */

.sommaire {
  display: grid;
  gap: 20px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.feuillet-article {
  display: flex;
  flex-direction: column;
  margin: 0;
  transition: border-color var(--souffle-court), box-shadow var(--souffle-court);
}

.feuillet-article:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 62, 147, 0.08);
}

/* La photographie reste un document pose sur le registre: passe-partout
   ivoire, filet de un pixel, voile de bleu matin sur le cinquieme haut. */
.feuillet-article__vue {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 8px;
  margin: 0 0 18px;
}

.feuillet-article__vue::after {
  content: "";
  position: absolute;
  inset: 8px;
  background:
    linear-gradient(to bottom, rgba(45, 62, 147, 0.06) 0%, rgba(45, 62, 147, 0) 22%),
    rgba(251, 247, 242, 0.08);
  pointer-events: none;
}

.feuillet-article__vue img {
  width: 100%;
  filter: saturate(0.8);
  transition: filter var(--souffle-court);
}

.feuillet-article:hover .feuillet-article__vue img { filter: saturate(0.95); }

.feuillet-article__angle {
  font-family: var(--registre);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 8px;
  max-width: none;
}

.feuillet-article__titre {
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.18;
  margin: 0 0 12px;
}

.feuillet-article__titre a {
  color: var(--texte);
  text-decoration: none;
}

.feuillet-article__titre a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feuillet-article__extrait {
  font-size: 1rem;
  color: var(--texte-doux);
  margin: 0 0 20px;
  max-width: none;
}

.feuillet-article__jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: auto 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--bordure);
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
  max-width: none;
}

.feuillet-article__jalons time { color: var(--texte); }

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

.fil--article {
  padding: 0 0 20px;
  line-height: 1.7;
}

.fil--article a { color: var(--texte-doux); }
.fil--article a:hover { color: var(--accent); }
.fil__actuel { color: var(--texte); }

.jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0 0 26px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--bordure);
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--texte-doux);
  max-width: none;
}

.jalons time { color: var(--texte); }

/* Chapeau en exergue typographique, filet terracotta comme la mention
   de garantie de la page d accueil. */
.exergue {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--texte);
  border-left: 2px solid var(--terre);
  padding: 6px 0 6px 20px;
  margin: 0 0 32px;
  max-width: 60ch;
}

.article-photo { margin-top: 0; }
.article-photo .cadre__legende { padding-bottom: 0; }

/* ------------------------------------------------------------------
   16.3 Corps redactionnel, balises nues
   Mesure de lecture volontairement courte: aucune phrase difficile
   ne doit s etirer au dela de 65 caracteres.
------------------------------------------------------------------ */

.corps {
  max-width: 65ch;
  margin: 34px 0 0;
}

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

.corps p {
  margin: 0 0 20px;
  max-width: none;
}

/* Intertitre de partie: filet double du feuillet, pose au dessus du titre. */
.corps h2 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.16;
  margin: 50px 0 18px;
  padding-top: 24px;
  background:
    linear-gradient(var(--bordure), var(--bordure)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--bordure), var(--bordure)) 0 3px / 100% 1px no-repeat;
}

.corps h3 {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.22;
  margin: 34px 0 12px;
  padding-left: 22px;
  position: relative;
}

/* Etoile a quatre branches du logotype, reprise en puce de sous partie. */
.corps h3::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.42em;
  width: 10px;
  height: 10px;
  background: var(--terre);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.corps ul,
.corps ol {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.corps li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  line-height: 1.7;
}

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

.corps ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--terre);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.corps ol { counter-reset: repere-corps; }

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

.corps ol > li::before {
  content: counter(repere-corps, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.12em;
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.corps li > ul,
.corps li > ol { margin: 11px 0 0; }

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

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

.corps a:hover {
  color: var(--accent-profond);
  background: rgba(45, 62, 147, 0.07);
}

/* Tableau recapitulatif: une page de registre, en tete en Piazzolla
   capitales et filet double sous la ligne de tete. */
.corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  font-size: 1rem;
  text-align: left;
}

.corps caption {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--texte-doux);
  text-align: left;
  padding: 0 0 10px;
}

.corps thead th {
  font-family: var(--registre);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte);
  background-color: var(--fond-alt);
  background-image:
    linear-gradient(var(--bordure), var(--bordure)),
    linear-gradient(var(--bordure), var(--bordure));
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px;
  background-position: 0 100%, 0 calc(100% - 3px);
  line-height: 1.4;
}

.corps th,
.corps td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
  text-align: left;
  line-height: 1.6;
}

.corps tbody th {
  font-family: var(--registre);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texte);
  width: 30%;
}

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

/* Parole citee: Piazzolla en italique, voix distincte du recit. */
.corps blockquote {
  margin: 0 0 28px;
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--registre);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--texte);
}

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

/* Encadre: le feuillet signature complet, filet double, encoche et perforation. */
.corps aside {
  position: relative;
  margin: 0 0 30px;
  padding: 36px 26px 24px;
  background-color: var(--fond-alt);
  border: 1px solid var(--bordure);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background-image:
    linear-gradient(var(--bordure), var(--bordure)),
    linear-gradient(var(--bordure), var(--bordure)),
    radial-gradient(circle at center, var(--fond-alt) 0 2.5px, var(--bordure) 2.5px 3px, transparent 3px);
  background-repeat: no-repeat;
  background-size: calc(100% - 40px) 1px, calc(100% - 40px) 1px, 8px 8px;
  background-position: 26px 18px, 26px 21px, 10px 16px;
}

.corps aside p:last-child,
.corps aside ul:last-child,
.corps aside ol:last-child { margin-bottom: 0; }

.corps figure {
  margin: 0 0 28px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

.corps figure img { width: 100%; filter: saturate(0.8); }

.corps figcaption {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  padding: 12px 4px 2px;
}

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

.appel {
  position: relative;
  margin: 40px 0 0;
  padding: 30px 28px 28px;
  background-color: var(--fond-alt);
  border: 1px solid var(--bordure);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  --voile: var(--fond-alt);
}

.appel__intitule {
  font-family: var(--registre);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 10px;
}

.appel p { max-width: 58ch; }
.appel p:last-of-type { margin-bottom: 22px; }

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

.encart-auteur {
  position: relative;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 34px 0 0;
  padding: 34px 26px 24px;
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background-image:
    linear-gradient(var(--bordure), var(--bordure)),
    linear-gradient(var(--bordure), var(--bordure)),
    radial-gradient(circle at center, var(--fond) 0 2.5px, var(--bordure) 2.5px 3px, transparent 3px);
  background-repeat: no-repeat;
  background-size: calc(100% - 40px) 1px, calc(100% - 40px) 1px, 8px 8px;
  background-position: 26px 16px, 26px 19px, 10px 14px;
}

.encart-auteur__photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  filter: saturate(0.85);
}

.encart-auteur__nom {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 4px;
}

.encart-auteur__role {
  font-family: var(--registre);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 12px;
}

.encart-auteur__texte { min-width: 0; }
.encart-auteur__texte p { font-size: 1rem; color: var(--texte-doux); max-width: 58ch; }
.encart-auteur__texte p:last-child { margin-bottom: 0; }

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

.lire-aussi__titre {
  font-family: var(--titre);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.14;
  color: var(--texte);
  margin: 0 0 16px;
  max-width: none;
}

.lire-aussi__grille {
  display: grid;
  gap: 18px;
  margin: 30px 0 0;
}

.carte-liee {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  padding: 14px 16px 18px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition: border-color var(--souffle-court), box-shadow var(--souffle-court);
  --voile: var(--surface);
}

.carte-liee:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 62, 147, 0.08);
}

.carte-liee__vue {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bordure);
  padding: 6px;
  margin: 0 0 14px;
}

.carte-liee__vue::after {
  content: "";
  position: absolute;
  inset: 6px;
  background:
    linear-gradient(to bottom, rgba(45, 62, 147, 0.06) 0%, rgba(45, 62, 147, 0) 22%),
    rgba(251, 247, 242, 0.08);
  pointer-events: none;
}

.carte-liee__vue img { width: 100%; filter: saturate(0.8); }

.carte-liee__titre {
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
  max-width: none;
}

.carte-liee__titre a { color: var(--texte); text-decoration: none; }
.carte-liee__titre a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.carte-liee__accroche {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-doux);
  margin: 0;
  max-width: none;
}

.lire-aussi__suite {
  margin: 26px 0 0;
  font-family: var(--registre);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------
   16.7 Mise en avant du magazine sur la page d accueil
------------------------------------------------------------------ */

.feuille--feuillets {
  background:
    linear-gradient(var(--bordure), var(--bordure)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--bordure), var(--bordure)) 0 3px / 100% 1px no-repeat,
    var(--fond);
}

.derniers__suite {
  margin: 30px 0 0;
  font-family: var(--registre);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

/* Liste datee des neuf feuillets sur la page auteur. */
.feuillets-parus { list-style: none; margin: 28px 0 0; padding: 0; }

.feuillets-parus li {
  border-bottom: 1px solid var(--bordure);
  padding: 0 0 16px;
  margin-bottom: 16px;
  max-width: 64ch;
}

.feuillets-parus li:last-child { border-bottom: 0; margin-bottom: 0; }

.feuillets-parus a {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--texte);
  text-decoration: none;
}

.feuillets-parus a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.feuillets-parus .jalon-ligne {
  display: block;
  margin-top: 6px;
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
}

/* Intitules de colonne du pied de page des pages du magazine, ou les
   niveaux de titre sont reserves au corps redactionnel. */
.pied__intitule,
.pied .pied__marque {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 14px;
  max-width: none;
}

/* ------------------------------------------------------------------
   16.8 Adaptations d ecran du magazine
------------------------------------------------------------------ */

@media (min-width: 900px) {
  /* Le lien du magazine ajoute un intitule dans la barre d en tete.
     La navigation se resserre pour rester sur une seule ligne, sans
     changer de corps ni de casse. */
  .entete__barre { gap: 16px; }
  .chemin { gap: 15px; }
  .chemin a { letter-spacing: 0.08em; white-space: nowrap; }

  .sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lire-aussi__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feuillet-article {
    padding: 30px 24px 24px;
    background-size: calc(100% - 38px) 1px, calc(100% - 38px) 1px, 8px 8px;
    background-position: 24px 16px, 24px 19px, 9px 14px;
  }
}

@media (max-width: 899px) {
  .lire-aussi__titre { font-size: 1.7rem; }
  .corps h2 { font-size: 1.7rem; margin-top: 40px; }
  .corps { max-width: none; }
  /* Un tableau large ne pousse jamais la page: il defile dans sa propre boite. */
  .corps table { display: block; overflow-x: auto; }
  .encart-auteur { flex-direction: column; gap: 16px; }
  .appel { padding: 26px 20px 24px; }
  .corps aside { padding: 34px 20px 22px; background-size: calc(100% - 32px) 1px, calc(100% - 32px) 1px, 8px 8px; background-position: 20px 18px, 20px 21px, 9px 16px; }
  .encart-auteur { padding: 32px 20px 22px; background-size: calc(100% - 32px) 1px, calc(100% - 32px) 1px, 8px 8px; background-position: 20px 16px, 20px 19px, 9px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .feuillet-article,
  .carte-liee,
  .feuillet-article__vue img { transition: none; }
}

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}

/* En tete: aucun libelle ne se coupe en deux lignes. La gouttiere et la taille
   du texte cedent avant le mot, jamais l inverse. */
header a, header button { white-space: nowrap; }
header nav[class] { column-gap: clamp(10px, 1.3vw, 26px); }
/* Entre le menu de bureau et le menu replie du telephone, la barre est a l etroit:
   la gouttiere et le corps du texte cedent d un cran plutot que de deborder. */
@media (max-width: 1220px) {
  header nav[class] { column-gap: clamp(8px, 1vw, 16px); }
  header nav[class] a, header nav[class] button { font-size: 0.93em; letter-spacing: 0; }
  /* Le bouton de l en tete se resserre lui aussi: c est la piece la plus large
     de la barre, et c est elle qui sortait de la fenetre. */
  header a[class*="bouton"], header a[class*="cta"] { padding-left: 14px; padding-right: 14px; }
}

/*xn:start*/
/* Pages ressources: portail, guide pilier, comparatifs, outils, aimant.
   Un seul bloc, prefixe xn-, ajoute a la feuille du site. Il ne redefinit
   aucune classe existante et emprunte au site ses couleurs et ses polices. */
:root{
  --xn-bg:#FBF7F2;--xn-soft:#F5E9E1;--xn-surface:#FFFFFF;--xn-text:#241C18;
  --xn-muted:#6E5F55;--xn-accent:#2D3E93;--xn-on-accent:#FFFFFF;--xn-line:#E3D8CD;
  --xn-h:"Big Shoulders Display", "Arial Narrow", sans-serif;--xn-b:"Crimson Pro", Georgia, "Times New Roman", serif;
}
.xn-main{background:var(--xn-bg);color:var(--xn-text);font-family:var(--xn-b);line-height:1.65}
.xn-main *,.xn-main *::before,.xn-main *::after{box-sizing:border-box}
.xn-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.xn-wrap--narrow{max-width:800px}
.xn-band{padding:clamp(34px,5.2vw,68px) 0}
.xn-band--soft{background:var(--xn-soft)}
.xn-band--surface{background:var(--xn-surface)}
.xn-main h1,.xn-main h2,.xn-main h3,.xn-main h4{font-family:var(--xn-h);color:var(--xn-text);line-height:1.16;margin:0 0 .55em;text-wrap:balance}
.xn-main h1{font-size:clamp(1.95rem,4.4vw,3.05rem);letter-spacing:-.01em}
.xn-main h2{font-size:clamp(1.4rem,2.7vw,2.05rem);margin-top:1.6em}
.xn-main h3{font-size:clamp(1.08rem,1.7vw,1.3rem);margin-top:1.4em}
.xn-main p{margin:0 0 1.05em;color:var(--xn-text)}
.xn-main a{color:var(--xn-accent);text-underline-offset:3px}
.xn-main a:hover{text-decoration:none}
.xn-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.83rem;color:var(--xn-muted);padding:22px 0 0;margin:0}
.xn-crumb a{color:var(--xn-muted)}
.xn-crumb span[aria-hidden]{opacity:.5}
.xn-eyebrow{display:inline-block;font-family:var(--xn-h);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .7em}
.xn-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--xn-muted);max-width:64ch}
.xn-hd{padding:clamp(26px,4vw,52px) 0 clamp(18px,3vw,32px)}
.xn-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.83rem;color:var(--xn-muted);margin:.4em 0 0;padding:0;list-style:none}
.xn-prose>*:first-child{margin-top:0}
.xn-prose ul,.xn-prose ol{margin:0 0 1.2em;padding-left:1.25em}
.xn-prose li{margin:0 0 .5em}
.xn-note{border-left:3px solid var(--xn-accent);background:var(--xn-surface);padding:14px 18px;margin:0 0 1.3em;font-size:.95rem;color:var(--xn-muted)}
.xn-card{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:clamp(18px,2.4vw,26px)}
.xn-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin:0;padding:0;list-style:none}
.xn-grid h3{margin-top:0}
.xn-grid p{font-size:.94rem;color:var(--xn-muted);margin-bottom:.8em}
.xn-tag{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--xn-h);color:var(--xn-muted);margin:0 0 .6em}
.xn-btn,.xn-main a.xn-btn{display:inline-block;font-family:var(--xn-h);font-size:.95rem;letter-spacing:.02em;padding:13px 24px;border-radius:3px;border:1px solid var(--xn-accent);background:var(--xn-accent);color:var(--xn-on-accent);text-decoration:none;cursor:pointer;text-align:center}
.xn-btn:hover,.xn-main a.xn-btn:hover{filter:brightness(1.09);text-decoration:none}
.xn-btn--ghost,.xn-main a.xn-btn--ghost{background:transparent;color:var(--xn-accent)}
.xn-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 0}
.xn-tablewrap{overflow-x:auto;border:1px solid var(--xn-line);border-radius:4px;background:var(--xn-surface)}
.xn-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.xn-table th,.xn-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--xn-line);vertical-align:top}
.xn-table thead th{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;background:var(--xn-soft);color:var(--xn-text)}
.xn-table tbody th{font-weight:600;color:var(--xn-text);width:26%}
.xn-table td:first-of-type{color:var(--xn-text)}
.xn-table .xn-yes{color:var(--xn-accent);font-weight:600}
.xn-faq dt{font-family:var(--xn-h);font-size:1.06rem;margin:1.4em 0 .4em;color:var(--xn-text)}
.xn-faq dd{margin:0;color:var(--xn-muted)}
.xn-toc{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:20px 24px;margin:0 0 2em}
.xn-toc p{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .7em}
.xn-toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:32px}
.xn-toc li{margin:0 0 .42em;font-size:.94rem;break-inside:avoid}
@media(max-width:640px){.xn-toc ol{columns:1}}
.xn-check{list-style:none;margin:0;padding:0}
.xn-check li{position:relative;padding:0 0 .62em 30px;color:var(--xn-text)}
.xn-check li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:8px;border-left:2.5px solid var(--xn-accent);border-bottom:2.5px solid var(--xn-accent);transform:rotate(-45deg)}
.xn-form{display:grid;gap:14px;max-width:520px}
.xn-form label{font-family:var(--xn-h);font-size:.86rem;letter-spacing:.03em;display:block;margin:0 0 5px;color:var(--xn-text)}
.xn-form input[type=text],.xn-form input[type=email],.xn-form input[type=number]{width:100%;padding:11px 13px;border:1px solid var(--xn-line);border-radius:3px;background:var(--xn-surface);color:var(--xn-text);font:inherit;font-size:1rem}
.xn-form input:focus-visible,.xn-btn:focus-visible,.xn-main a:focus-visible{outline:3px solid var(--xn-accent);outline-offset:2px}
.xn-consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--xn-muted)}
.xn-consent input{margin-top:.25em;flex:0 0 auto}
.xn-tool{display:grid;gap:26px;grid-template-columns:minmax(280px,1fr) minmax(260px,.85fr);align-items:start}
@media(max-width:820px){.xn-tool{grid-template-columns:1fr}}
.xn-out{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:22px 24px;position:sticky;top:16px}
@media(min-width:821px){.xn-sticky{position:sticky;top:16px}}
.xn-out__row{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--xn-line)}
.xn-out__row:last-child{border:0;margin:0;padding:0}
.xn-out__lab{font-family:var(--xn-h);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .3em}
.xn-out__val{font-family:var(--xn-h);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.05;color:var(--xn-accent);margin:0}
.xn-out__row--first .xn-out__val{font-size:clamp(2rem,4.6vw,2.9rem)}
.xn-out__note{font-size:.86rem;color:var(--xn-muted);margin:.35em 0 0}
.xn-field__help{font-size:.83rem;color:var(--xn-muted);margin:5px 0 0}
.xn-hint{font-size:.85rem;color:var(--xn-muted);margin:1.2em 0 0}
.xn-cta{background:var(--xn-accent);color:var(--xn-on-accent);border-radius:4px;padding:clamp(24px,3.4vw,40px)}
.xn-cta h2,.xn-cta p{color:var(--xn-on-accent)}
.xn-cta h2{margin-top:0}
.xn-cta a{color:var(--xn-on-accent)}
.xn-cta .xn-btn,.xn-main .xn-cta a.xn-btn{background:var(--xn-on-accent);color:var(--xn-accent);border-color:var(--xn-on-accent)}
.xn-cta .xn-btn--ghost,.xn-main .xn-cta a.xn-btn--ghost{background:transparent;color:var(--xn-on-accent)}
.xn-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.xn-links a{font-family:var(--xn-h);font-size:1rem}
.xn-links span{display:block;font-family:var(--xn-b);font-size:.89rem;color:var(--xn-muted)}

/* Appel vers l article pilier, insere dans les neuf articles du magazine */
.xn-pillar{border:1px solid var(--xn-line);border-left:4px solid var(--xn-accent);background:var(--xn-surface);
  border-radius:3px;padding:16px 20px;margin:1.8em 0;font-family:var(--xn-b);line-height:1.55}
.xn-pillar__k{font-family:var(--xn-h);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .35em}
.xn-pillar__t{font-family:var(--xn-h);font-size:1.1rem;margin:0 0 .3em;line-height:1.25}
.xn-pillar__t a{color:var(--xn-text)}
.xn-pillar__d{font-size:.9rem;color:var(--xn-muted);margin:0}

/* Le lien de menu ajoute. La barre qui l accueille etait calibree au pixel:
   on l autorise a passer a la ligne plutot qu a casser un libelle en trois. */
.xn-navlink{white-space:nowrap}
nav:has(> .xn-navlink){flex-wrap:wrap}
nav:has(> .xn-navlink) > a{white-space:nowrap}
@media(min-width:1024px){nav:has(> .xn-navlink){font-size:.93em;column-gap:clamp(.7rem,1.45vw,1.5rem);row-gap:.3rem}}

/* Bloc de liens ajoute au pied de page de chaque page du site */
.xn-foot{border-top:1px solid currentColor;margin:26px 0 0;padding:20px 0 2px;font-size:.9rem}
.xn-foot__t{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px;opacity:.72}
.xn-foot__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px}
.xn-foot__l a{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.92}
.xn-foot__l a:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.xn-main *{animation:none!important;transition:none!important}}
/*xn:end*/