/* ══════════════════════════════════════════════════════════
   LE RÉCIT — ouverture, chiffres, courbe, 1 sur 1 000,
   annexes, fin.
   ══════════════════════════════════════════════════════════ */

/* ═══════════ OUVERTURE ═══════════
   Le nom, la signature, et rien d'autre : on entre en défilant. */
/* État de départ de l'entrée, tenu par le CSS jusqu'à ce que le script prenne
   la main (classe `pret`). Un filet en tête de page la pose de toute façon
   au bout de trois secondes. */
html.js:not(.pret) .ouverture h1 .ligne > span { transform: translateY(112%); }
html.js:not(.pret) .ouverture__sig { clip-path: inset(-4% 100% -4% -4%); }
html.js:not(.pret) :is(.ouverture__fil, .nav > *, .fil) { opacity: 0; }
.ouverture {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + 24px) var(--g) clamp(34px, 7vh, 72px);
  overflow: hidden;
  isolation: isolate;
}
.ouverture__halo {
  position: absolute; z-index: -1;
  right: -10vw; top: -12vh;
  width: 90vw; height: 110vh;
  background:
    radial-gradient(closest-side, rgba(31, 69, 255, .30), rgba(31, 69, 255, .08) 55%, transparent),
    radial-gradient(closest-side at 70% 60%, rgba(115, 144, 255, .12), transparent);
  pointer-events: none;
}
.ouverture__sig {
  position: absolute; z-index: -1;
  right: calc(var(--g) + 2vw);
  top: calc(var(--nav-h) + 2vh);
  width: min(44vw, 64vh, 680px);
  aspect-ratio: 428 / 420;
  -webkit-mask: url(../assets/signature.webp) center / contain no-repeat;
          mask: url(../assets/signature.webp) center / contain no-repeat;
  background: linear-gradient(103deg, #1B4BFF, #9FB6FF);
}
.ouverture__sig canvas { width: 100%; height: 100%; }

.ouverture__nom { grid-row: 2; align-self: end; }
.ouverture h1 {
  font-weight: 300;
  font-size: clamp(64px, min(13.4vw, 24vh), 236px);
  line-height: .86;
  letter-spacing: -.038em;
  font-variation-settings: 'opsz' 72;
  margin-left: -.05em;
}
.ligne { display: block; overflow: hidden; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.ligne > span { display: inline-block; will-change: transform; }

.ouverture__fil {
  position: absolute; right: var(--g); bottom: clamp(34px, 7vh, 72px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--lumiere-2);
}
.ouverture__fil span { writing-mode: vertical-rl; transform: rotate(180deg); }
.ouverture__fil i { position: relative; display: block; width: 1px; height: 72px; background: var(--filet-nuit); overflow: hidden; }
.ouverture__fil i::after { content: ''; position: absolute; inset: 0; background: var(--lumiere); transform: translateY(-100%); animation: fil 2.4s var(--ease) infinite 1.8s; }
@keyframes fil { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

@media (max-width: 860px) {
  .ouverture { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .ouverture__sig { width: min(86vw, 52svh); right: 50%; transform: translateX(50%); top: calc(var(--nav-h) + 3svh); }
  .ouverture__halo { right: -40vw; top: -20vh; width: 160vw; height: 90vh; }
  .ouverture h1 { font-size: clamp(60px, 19vw, 120px); }
  .ouverture__fil { bottom: calc(40px + env(safe-area-inset-bottom)); }
  .ouverture__fil i { height: 56px; }
}

/* ═══════════ LA DÉFINITION ═══════════
   Une scène fixée : le mot en tête, le J au milieu, le sens en bas. Le
   tracé suit le défilement ; tout est mesuré pour ne jamais se chevaucher. */
.definition { position: relative; height: 250vh; height: 250svh; }
.definition__scene {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(12px, 3vh, 36px);
  padding: calc(var(--nav-h) + 3vh) var(--g) clamp(28px, 7vh, 72px);
  overflow: hidden;
}
.definition__entree { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px clamp(18px, 2.4vw, 36px); }
.definition__mot {
  font-weight: 300;
  font-size: clamp(56px, min(11vw, 19vh), 200px);
  line-height: .9; letter-spacing: -.04em;
  font-variation-settings: 'opsz' 72;
  margin-left: -.04em;
}
.definition__mot em { font-style: italic; font-weight: 300; color: var(--bleu-nuit); padding-right: .06em; }
.definition__gram { display: flex; gap: 14px; align-items: baseline; font-size: clamp(17px, 1.6vw, 22px); color: var(--lumiere-2); }
.definition__phon { font-family: var(--sans); font-size: .82em; letter-spacing: .01em; }
.definition__trace { position: relative; min-height: 0; }
.definition__trace svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.definition__sens { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px clamp(24px, 5vw, 96px); align-items: end; }
.definition__def { font-size: clamp(19px, min(2vw, 3.6vh), 30px); line-height: 1.38; max-width: 26em; text-wrap: pretty; }
.definition__def b { font-family: var(--sans); font-weight: 700; font-size: .8em; margin-right: .2em; }
.definition__def abbr { font-style: italic; color: var(--lumiere-2); }
.definition__voir { justify-self: end; text-align: right; font-size: clamp(19px, min(2vw, 3.6vh), 30px); line-height: 1.3; color: var(--lumiere-2); }
.definition__voir span { color: var(--lumiere); background: linear-gradient(var(--bleu-nuit), var(--bleu-nuit)) 0 100% / var(--souligne, 0%) 1.5px no-repeat; padding-bottom: .06em; }

.dj-depart { stroke: var(--lumiere-3); stroke-width: 1; stroke-dasharray: 3 6; fill: none; }
.dj-depart-txt { font-family: var(--sans); font-size: 12.5px; fill: var(--lumiere-2); }
.dj-trait { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dj-annee { font-family: var(--sans); font-size: 12px; fill: var(--lumiere-3); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .definition { height: 230svh; }
  .definition__scene { padding-top: calc(var(--nav-h) + 2svh); padding-bottom: calc(28px + env(safe-area-inset-bottom) + var(--bas)); }
  .definition__mot { font-size: clamp(52px, 16vw, 92px); }
  .definition__trace { align-self: center; height: min(100%, 40svh); }
  .definition__sens { grid-template-columns: minmax(0, 1fr); }
  .definition__def, .definition__voir { font-size: 18.5px; }
  .definition__voir { justify-self: start; text-align: left; }
}
html:not(.definition-anim) .definition { height: auto; }
html:not(.definition-anim) .definition__scene { position: relative; height: 100vh; height: 100svh; }

/* ═══════════ EN CHIFFRES ═══════════ */
.chiffres { position: relative; padding: calc(var(--R) * 2.5) var(--g) calc(var(--R) * 3); }
.chiffres__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--filet-nuit); }
.chiffre { padding: 34px 28px 0; border-left: 1px solid var(--filet-nuit); }
.chiffre:first-child { border-left: 0; padding-left: 0; }
.chiffre__n { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; line-height: .82; overflow: hidden; padding-bottom: .08em; }
.chiffre__n b {
  display: inline-block;
  font-family: var(--sans); font-weight: 800; font-variation-settings: 'wdth' 125;
  font-size: clamp(72px, 9.4vw, 168px); letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.chiffre__n b sup { font-size: .38em; vertical-align: .95em; letter-spacing: -.02em; margin-left: .04em; }
.chiffre__n span { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--lumiere-2); white-space: nowrap; }
.chiffre__t { margin-top: 18px; max-width: 17em; font-size: 17.5px; line-height: 1.5; color: var(--lumiere-2); }
.chiffre--rouge b { color: #F0606A; }
@media (max-width: 860px) {
  .chiffres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffre { padding: 26px 14px 26px 0; border-left: 0; border-bottom: 1px solid var(--filet-nuit); }
  .chiffre:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--filet-nuit); }
  .chiffre__n { gap: 6px; }
  .chiffre__n b { font-size: clamp(64px, 19vw, 96px); }
  .chiffre__t { font-size: 15px; margin-top: 10px; }
}

/* ═══════════ LA COURBE ═══════════
   Sans script (ou mouvement réduit) : une figure statique suivie du récit
   en liste. Avec script : une scène fixée et un rail de défilement. */
.courbe { position: relative; }
.courbe__scene { position: relative; }
.courbe__nuit, .courbe__jour { position: relative; }
.courbe__svg { width: 100%; height: auto; overflow: visible; }
.courbe__ombre { display: none; }
.courbe__jour { display: none; }

/* mode statique */
html:not(.courbe-anim) .courbe { padding: calc(var(--nav-h) + 40px) var(--g) 96px; }
html:not(.courbe-anim) .courbe__nuit { max-width: 1100px; height: min(60vh, 560px); margin: 24px 0 48px; }
html:not(.courbe-anim) .courbe__nuit .courbe__svg { height: 100%; }
html:not(.courbe-anim) .courbe__etapes { display: grid; gap: 40px; max-width: var(--corps-max); }
html:not(.courbe-anim) .courbe .etape p.decision { font-size: clamp(34px, 5vw, 64px); }

/* mode animé */
.courbe-anim .courbe__scene {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  isolation: isolate;
}
.courbe-anim .courbe__nuit, .courbe-anim .courbe__jour { position: absolute; inset: 0; }
.courbe-anim .courbe__ombre {
  display: block; position: absolute; inset: 0;
  background: radial-gradient(90% 90% at 60% 60%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .85));
  opacity: 0; pointer-events: none;
}
.courbe-anim .courbe__jour {
  display: block;
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path;
}
/* Un SVG positionné ne s'étire pas entre left et right : c'est un élément
   remplacé, il garderait sa taille intrinsèque de 300 × 150. On donne donc
   une largeur et une hauteur explicites. */
.courbe-anim .courbe__svg {
  position: absolute;
  left: 54%;
  top: calc(var(--nav-h) + 72px);
  width: calc(46% - var(--g) - 24px);
  height: calc(100% - var(--nav-h) - 72px - 112px);
}

/* Le texte s'écrit à droite du trait rouge, comme sur la copie. */
.courbe-anim .courbe__etapes {
  position: absolute; z-index: 4;
  left: calc(var(--marge-x) + var(--R)); top: 0; bottom: 0;
  width: min(calc(52% - var(--marge-x) - var(--R) - 32px), 32rem);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.courbe-anim .etape {
  position: absolute; left: 0; right: 0; top: 50%;
  margin-top: -2vh;
  transform: translateY(-50%);
  opacity: 0;
}
/* l'année s'inscrit dans la marge, alignée sur le trait */
@media (min-width: 861px) {
  .courbe-anim .etape__an {
    position: absolute; right: calc(100% + var(--R) + 16px); top: 8px;
    white-space: nowrap; text-align: right;
    font-size: 15px;
  }
}
.courbe-anim .etape.est-active { pointer-events: auto; }
.etape__an {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  opacity: .72;
  margin-bottom: 10px;
}
.etape__titre {
  font-weight: 350;
  font-size: clamp(34px, 3.9vw, 58px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-variation-settings: 'opsz' 72;
  margin-bottom: 18px;
}
.etape p:not(.etape__an) { font-size: var(--fs, 19px); line-height: 1.62; max-width: 29em; }
.etape p + p:not(.etape__an) { margin-top: .7em; }
.etape__fusee { margin-top: 28px; }

/* l'interlude : la décision prend tout l'écran ; sa boîte et sa taille de
   caractère sont calculées par le script pour tenir, toujours */
.courbe-anim .etape--decision { display: flex; flex-direction: column; justify-content: center; margin-top: 0; }
.courbe-anim .etape--decision .decision__l { white-space: nowrap; }
/* `.courbe .etape p.…` : il faut battre `.etape p:not(.etape__an)`, dont le :not() compte */
.courbe .etape p.etape__avant { font-style: italic; opacity: .78; margin-bottom: 28px; }
.courbe .etape p.decision, .decision { font-weight: 300; font-style: italic; font-size: clamp(42px, 7.4vw, 124px); line-height: 1.02; letter-spacing: -.03em; font-variation-settings: 'opsz' 72; }
.decision__l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.decision__l > span { display: inline-block; }

@media (max-width: 860px) {
  .courbe-anim .courbe__svg { left: var(--g); top: calc(var(--nav-h) + 40px); width: calc(100% - var(--g) * 2); height: 38svh; }
  .courbe-anim .courbe__etapes { left: calc(var(--marge-x) + 16px); right: var(--g); width: auto; top: calc(var(--nav-h) + 40px + 38svh + 56px); bottom: calc(24px + env(safe-area-inset-bottom)); }
  .courbe-anim .etape { top: 0; transform: none; }
  .etape__titre { font-size: clamp(28px, 8vw, 40px); margin-bottom: 10px; }
  .etape p:not(.etape__an) { font-size: var(--fs, 16.5px); line-height: 1.55; }
  .etape__an { margin-bottom: 6px; font-size: 13px; }
  .courbe .etape p.etape__avant { margin-bottom: 16px; font-size: 16px; }
}

/* éléments du graphique */
.cg-axe { stroke: currentColor; stroke-width: 1; opacity: .35; }
.cg-graduation { stroke: currentColor; opacity: .28; }
.cg-annee { font-family: var(--sans); font-size: 12.5px; fill: currentColor; opacity: .6; font-variant-numeric: tabular-nums; }
.cg-depart { stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.cg-depart-txt { font-family: var(--sans); font-size: 12.5px; }
.cg-trait { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cg-point { transition: r .5s var(--ease), opacity .4s var(--ease); }
.cg-etiquette { font-family: var(--sans); font-size: 13px; font-weight: 500; }
.cg-note { font-family: var(--serif); font-style: italic; font-size: 17px; }
/* un liseré couleur du fond sous chaque texte : lisible sur les hachures et le tracé */
.cg-etiquette, .cg-note, .cg-depart-txt, .cg-annee { paint-order: stroke; stroke-width: 5px; stroke-linejoin: round; }
.courbe__nuit :is(.cg-etiquette, .cg-note, .cg-depart-txt, .cg-annee) { stroke: #080A12; }
.courbe__jour :is(.cg-etiquette, .cg-note, .cg-depart-txt, .cg-annee) { stroke: #FAFAF7; }

.courbe__nuit .courbe__svg { color: var(--lumiere); }
.courbe__jour .courbe__svg { color: var(--encre); }

/* ═══════════ 1 SUR 1 000 ═══════════
   Une scène fixée sur la copie. Le texte tient sa colonne, à droite du
   trait rouge ; le script mesure cette colonne et pose les mille points
   dans la place qui reste : ils ne passent jamais sous les mots. */
.mille { position: relative; height: 330vh; height: 330svh; }
.mille__scene { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate; will-change: opacity; }
.mille__cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.mille__textes {
  position: absolute; z-index: 2;
  left: calc(var(--marge-x) + var(--R));
  top: calc(var(--nav-h) + 2vh); bottom: 7vh;
  width: min(34vw, 30rem);
  display: flex; flex-direction: column; justify-content: center;
}
.mille__rare { position: absolute; right: calc(100% + var(--R) + 12px); top: 50%; margin-top: -3.2em; }
.mille__compte {
  font-family: var(--sans); font-weight: 800; font-variation-settings: 'wdth' 125;
  font-size: clamp(64px, min(9.6vw, 21vh), 176px);
  line-height: .86; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  margin-left: -.04em;
}
.mille__compte b { font-weight: inherit; transition: color .4s var(--ease); }
.mille__compte.est-un b { color: var(--bleu); }
.mille__titre {
  margin-top: clamp(14px, 3vh, 28px);
  font-weight: 350;
  font-size: clamp(19px, min(1.9vw, 3.9vh), 30px);
  line-height: 1.3; letter-spacing: -.01em;
  font-variation-settings: 'opsz' 72;
  text-wrap: pretty;
  max-width: 21em;
}
.mille__moi {
  margin-top: clamp(14px, 3.4vh, 32px);
  font-weight: 350; font-style: italic;
  font-size: clamp(34px, min(4.6vw, 9.5vh), 80px); line-height: 1.02; letter-spacing: -.025em;
  font-variation-settings: 'opsz' 72;
  color: var(--bleu);
}
.mille__jeu { margin-top: clamp(16px, 3.6vh, 32px); }
@media (max-width: 860px) {
  .mille__textes { left: calc(var(--marge-x) + 16px); right: var(--g); width: auto; top: calc(var(--nav-h) + 1svh); bottom: auto; justify-content: flex-start; }
  .mille__rare { position: static; margin: 0 0 6px; transform-origin: left center; }
  .mille__compte { font-size: clamp(60px, 20vw, 96px); }
  .mille__titre { font-size: clamp(17px, 4.6vw, 21px); margin-top: 10px; }
  .mille__moi { font-size: clamp(30px, 9vw, 44px); margin-top: 10px; }
  .mille__jeu { margin-top: 14px; }
}
html:not(.mille-anim) .mille { height: auto; }
html:not(.mille-anim) .mille__scene { position: relative; height: 100vh; height: 100svh; }

/* ═══════════ ANNEXES ═══════════
   Une copie double posée sur la nuit : une feuille, trois onglets. */
.annexes { padding: calc(var(--R) * 3) var(--g) calc(var(--R) * 5); }
.annexes__tete { max-width: 1120px; margin: 0 auto calc(var(--R) * 1.5); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 40px; flex-wrap: wrap; }
.annexes__titre { font-weight: 300; font-size: clamp(56px, 8.5vw, 140px); line-height: .92; letter-spacing: -.04em; font-variation-settings: 'opsz' 72; }
.annexes__intro { font-style: italic; font-size: 20px; color: var(--lumiere-2); padding-bottom: .6em; }
.feuille {
  --marge-x: clamp(96px, 12vw, 170px);
  max-width: 1120px; margin: 0 auto;
  padding-bottom: calc(var(--R) * 2);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 70px 140px -50px rgba(0, 0, 0, .9), 0 30px 60px -30px rgba(31, 69, 255, .25), 0 0 0 1px rgba(255, 255, 255, .05);
  transform: rotate(-.5deg);
  transform-origin: 50% 0;
}
.feuille__onglets {
  position: relative; z-index: 2;
  display: flex; gap: 4px;
  padding: 18px var(--g) 0 calc(var(--marge-x) + var(--R) - 16px);
  border-bottom: 1px solid var(--reglure-forte);
  background: var(--papier);
  overflow-x: auto; scrollbar-width: none;
}
.feuille__onglets::-webkit-scrollbar { display: none; }
.feuille__onglets button {
  flex: none;
  padding: 12px 16px 14px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--encre-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.feuille__onglets button:hover { color: var(--encre); }
.feuille__onglets button[aria-selected="true"] { color: var(--bleu); border-bottom-color: var(--bleu); }
.feuille__page { padding-top: var(--R); }
.feuille__page .ligne-fo:first-child { margin-top: 8px; }
@media (max-width: 700px) {
  .feuille { --marge-x: 30px; transform: none; border-radius: 4px; }
  .feuille__onglets { padding-left: 34px; }
}

.ligne-xp .copie__marge { padding-top: 18px; }
.xp__tete {
  width: 100%;
  display: grid;
  grid-template-columns: 7.5em 40px minmax(9em, 13em) minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: 20px;
  min-height: calc(var(--R) * 2);
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease);
}
.xp__date { font-family: var(--sans); font-size: 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.xp__logo { width: 40px; height: 40px; display: grid; place-items: center; }
.xp__logo img { width: 40px; height: 40px; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .85; transition: filter .4s var(--ease), opacity .4s var(--ease); }
.xp__logo--txt { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .04em; border: 1.5px solid var(--encre); border-radius: 8px; width: 36px; height: 36px; }
.xp__nom { font-size: 22px; font-weight: 450; letter-spacing: -.01em; line-height: 1.2; }
.xp__role { color: var(--encre-2); font-size: 17px; line-height: 1.4; }
.xp__plus { position: relative; width: 20px; height: 20px; justify-self: end; }
.xp__plus::before, .xp__plus::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; background: var(--bleu); transition: transform .45s var(--ease); }
.xp__plus::after { transform: rotate(90deg); }
.xp__tete[aria-expanded="true"] .xp__plus::after { transform: rotate(0deg); }
.xp__tete:hover .xp__nom, .xp__tete[aria-expanded="true"] .xp__nom { color: var(--bleu); }
.xp__tete:hover .xp__logo img, .xp__tete[aria-expanded="true"] .xp__logo img { filter: none; opacity: 1; }

.xp__corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.xp__corps > p {
  overflow: hidden; min-height: 0;
  max-width: 36em;
  padding-left: calc(7.5em + 40px + 40px);
  color: var(--encre);
}
.xp__tete[aria-expanded="true"] + .xp__corps { grid-template-rows: 1fr; }
.xp__tete[aria-expanded="true"] + .xp__corps > p { padding-bottom: var(--R); }

.ligne-fo { margin-bottom: calc(var(--R) * 1.5); }
.ligne-fo .copie__marge { padding-top: 34px; }
.fo__date { font-family: var(--sans); font-size: 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.fo__nom { display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 450; line-height: 1.25; letter-spacing: -.012em; margin: 4px 0 6px; }
.fo__nom img { width: 32px; height: 32px; object-fit: contain; mix-blend-mode: multiply; }
.ligne-fo p:last-child { max-width: 36em; color: var(--encre-2); }

.savoirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--R) calc(var(--R) * 1.5); max-width: 62rem; }
.savoirs__k { font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--encre); margin-bottom: 4px; }
.savoirs p { color: var(--encre-2); }

@media (max-width: 860px) {
  .xp__tete { grid-template-columns: 40px minmax(0, 1fr) 24px; grid-template-rows: auto auto auto; row-gap: 2px; align-items: start; }
  .xp__date { grid-column: 2; grid-row: 1; font-size: 13px; }
  .xp__logo { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .xp__nom { grid-column: 2; grid-row: 2; font-size: 20px; }
  .xp__role { grid-column: 2; grid-row: 3; font-size: 15.5px; }
  .xp__plus { grid-column: 3; grid-row: 2; align-self: center; }
  .xp__corps > p { padding-left: 60px; }
  .savoirs { grid-template-columns: minmax(0, 1fr); }
  .fo__nom { font-size: 21px; }
}
/* sur mobile, la marge disparaît : la remarque du correcteur passe au-dessus */
.correcteur--ligne { display: none; }
@media (max-width: 700px) {
  .correcteur--ligne { display: block; transform: rotate(-1.5deg); transform-origin: left center; margin: 6px 0 -4px; }
}

/* ═══════════ FIN ═══════════ */
.fin {
  position: relative;
  padding: calc(var(--R) * 5) var(--g) calc(32px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.fin__merci { font-weight: 300; font-size: clamp(48px, 8.4vw, 144px); line-height: .98; letter-spacing: -.035em; font-variation-settings: 'opsz' 72; max-width: 9em; }
.fin__sous { margin-top: 24px; font-size: clamp(19px, 1.7vw, 24px); color: var(--lumiere-2); font-style: italic; }

.contacts { margin-top: calc(var(--R) * 3); border-top: 1px solid var(--filet-nuit); max-width: 70rem; }
.contacts li { border-bottom: 1px solid var(--filet-nuit); }
.contacts a, .contacts li > span:first-child { display: grid; }
.contacts a, .contacts li:last-child {
  display: grid; grid-template-columns: 9em minmax(0, 1fr); align-items: baseline; gap: 16px;
  padding: 22px 0;
  text-decoration: none;
}
.contacts__k { font-family: var(--sans); font-size: 14px; color: var(--lumiere-2); }
.contacts__v { font-size: clamp(22px, 3vw, 40px); line-height: 1.15; letter-spacing: -.015em; font-weight: 350; overflow-wrap: anywhere; transition: color .3s var(--ease), transform .5s var(--ease); display: inline-block; }
.contacts a:hover .contacts__v { color: var(--bleu-pale); transform: translateX(10px); }
@media (max-width: 700px) {
  .contacts a, .contacts li:last-child { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }
}

.fin__sig {
  position: relative;
  margin: calc(var(--R) * 3) auto calc(var(--R) * 2);
  width: min(78vw, 62vh, 560px);
  aspect-ratio: 428 / 420;
  -webkit-mask: url(../assets/signature.webp) center / contain no-repeat;
          mask: url(../assets/signature.webp) center / contain no-repeat;
  background: linear-gradient(103deg, #1B4BFF, #9FB6FF);
  clip-path: inset(0 100% 0 0);
}
.fin__sig canvas { width: 100%; height: 100%; }
html:not(.js) .fin__sig { clip-path: none; }

.fin__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--lumiere-3); }
.fin__pied a { color: var(--lumiere-2); }