/* Home « Le bureau du lundi » (tuning du 16/10/2026).
   Toutes les couleurs, rayons et ombres viennent des jetons de da.css : aucune couleur écrite en dur. */

@font-face { font-family: "Libre Franklin"; src: url("/fonts/LibreFranklin-VF.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/LibreBaskerville-VF.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/LibreBaskerville-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

html:root {
  --tn-titre: "Libre Franklin", var(--f-titre);
  --tn-texte: "Libre Baskerville", var(--f-texte);
  /* 27/10/2026 garde du parc : 1200 -> 1320 px. La main de lecture était trop juste pour les grilles
     serrées (le registre à 3 colonnes tombait à 288 px de texte, le titre de la une à 289) : à 1320 px,
     la colonne reprend 40 px par colonne de grille. Le réglage ne joue qu'à partir de 1400 px de large. */
  --tn-largeur: 1320px;
  --tn-gout: clamp(20px, 4vw, 40px);
  --tn-air: clamp(60px, 6.4vw, 92px);
  --tn-ombre: 0 1px 2px color-mix(in srgb, var(--c-ombre) 7%, transparent), 0 14px 34px -20px color-mix(in srgb, var(--c-ombre) 30%, transparent);
  --tn-ombre-haut: 0 2px 4px color-mix(in srgb, var(--c-ombre) 8%, transparent), 0 26px 50px -24px color-mix(in srgb, var(--c-ombre) 40%, transparent);
}
html, body { overflow-x: clip; }

/* En-tête de la home : même main que le hero (polices du site, bandeau masqué en mobile) */
.header .navbar-nav a, .header nav a { font-family: var(--tn-titre); }
@media (max-width: 700px) { [data-bandeau], .announcement-bar, .usine-bandeau { display: none !important; } }

/* ── grammaire commune ───────────────────────────────────────────────── */
.tn-home { color: var(--c-texte); font-family: var(--tn-texte); }
.tn-home *, .tn-home *::before, .tn-home *::after { box-sizing: border-box; }
.tn-home :is(h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
.tn-home :is(ol, ul) { list-style: none; padding: 0; }
.tn-home img { display: block; max-width: 100%; }
.tn-home a { color: inherit; }
.tn-int { width: 100%; max-width: calc(var(--tn-largeur) + 2 * var(--tn-gout)); margin-inline: auto; padding-inline: var(--tn-gout); }
.tn-sec { padding-block: var(--tn-air); position: relative; }
.tn-fond-a { background: var(--c-fond); }
.tn-fond-b { background: var(--c-surface); }
.tn-fond-doux { background: color-mix(in srgb, var(--c-doux) 60%, var(--c-surface)); }
.tn-fond-c { background: var(--c-fond-2); }

.tn-kicker {
  display: inline-flex; align-items: center; gap: .6em; padding: .5em 1em .5em .8em;
  border: 1px solid var(--c-bord); border-radius: 999px; background: var(--c-surface);
  font-family: var(--tn-titre); font-weight: 600; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-primaire-texte); line-height: 1.2;
}
.tn-kicker-point { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primaire);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primaire) 18%, transparent); flex: none; }
.tn-h1, .tn-h2, .tn-home h3 { font-family: var(--tn-titre); color: var(--c-texte); }
.tn-h2 { font-weight: 700; font-size: clamp(2rem, 3.3vw, 2.95rem); line-height: 1.08; letter-spacing: -.022em; max-width: 21em; text-wrap: balance; }
.tn-h1 em, .tn-h2 em { font-family: var(--tn-texte); font-style: italic; font-weight: 400; color: var(--c-primaire-texte); letter-spacing: -.01em; }
.tn-intro { font-size: 1.0625rem; line-height: 1.7; color: var(--c-texte-2); max-width: 40em; }
.tn-tete { display: grid; gap: 20px; justify-items: start; margin-bottom: clamp(28px, 3.4vw, 44px); }
.tn-tete-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.tn-tete-ligne > div { display: grid; gap: 20px; justify-items: start; }
.tn-p { font-size: .975rem; line-height: 1.65; color: var(--c-texte-2); }
.tn-meta { font-family: var(--tn-titre); font-size: .8125rem; line-height: 1.5; color: var(--c-texte-2); }
.tn-sous-titre { font-family: var(--tn-titre); font-weight: 600; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-2); margin-bottom: 16px; }

.tn-carte { background: var(--carte-fond); border: var(--carte-bord); border-radius: var(--r-carte); box-shadow: var(--tn-ombre); }
.tn-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--c-bord); font-family: var(--tn-titre); font-weight: 600; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--c-texte-2); }
.tn-etat { padding: .35em .75em; border-radius: 999px; background: var(--c-doux); color: var(--c-sur-doux); letter-spacing: .06em; white-space: nowrap; }
.tn-pastille { display: inline-flex; align-items: center; padding: .3em .75em; border-radius: 999px; background: var(--c-doux); color: var(--c-sur-doux);
  font-family: var(--tn-titre); font-weight: 600; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; line-height: 1.3; }
a.tn-pastille:hover { background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-num { font-family: var(--tn-titre); font-weight: 700; font-size: .8rem; color: var(--c-texte-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tn-fiche-ligne { display: flex; align-items: center; gap: 12px; }
.tn-lien { display: inline-flex; align-items: center; gap: .5em; font-family: var(--tn-titre); font-weight: 600; font-size: .9375rem; line-height: 1.35;
  color: var(--c-primaire-texte) !important; text-decoration: none; }
.tn-lien span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: color-mix(in srgb, var(--c-primaire) 40%, transparent); }
.tn-lien svg { flex: none; transition: transform .2s; }
.tn-lien:hover svg { transform: translateX(4px); }
.tn-lien:hover span { text-decoration-color: currentColor; }
.tn-coche { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-coche svg { width: 13px; height: 13px; stroke-width: 3; }
.tn-rond { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--c-surface); color: var(--c-primaire-texte); border: 1px solid var(--c-bord); }

/* Boutons : la forme du site (rectangle net, bord 2 px, ombre dure) */
.tn-home .tn-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: .8em 1.45em;
  font-family: var(--tn-titre); font-weight: 600; font-size: 1rem; line-height: 1.2; border-radius: var(--r-bouton); box-shadow: var(--btn-ombre);
  text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; }
.tn-home .tn-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c-texte); }
.tn-home .tn-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--c-texte); }
.tn-home a.tn-btn.bh-5e1c-bouton-2 { background: var(--c-surface) !important; color: var(--c-texte) !important; border: 2px solid var(--c-texte) !important; }
.tn-home a.tn-btn.bh-5e1c-bouton-1, .tn-home button.tn-btn.bh-5e1c-bouton-1 { background: var(--c-primaire) !important; color: var(--c-sur-accent, var(--c-sur-primaire)) !important; border: 2px solid var(--c-texte) !important; }
.tn-actions { display: flex; flex-wrap: wrap; gap: 16px 18px; }

/* Jauges */
.tn-jauge { display: flex; align-items: center; gap: 12px; font-family: var(--tn-titre); font-weight: 600; font-size: .78rem; color: var(--c-texte-2); white-space: nowrap; }
.tn-jauge-barre { flex: 1; height: 5px; border-radius: 3px; background: var(--c-fond-2); overflow: hidden; min-width: 40px; }
.tn-jauge-barre i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: var(--c-primaire); border-radius: inherit; transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tn-js .tn-sec:not(.tn-vu) .tn-jauge-barre i { transform: scaleX(0); }

/* Apparition au défilement : seulement avec JS, jamais en mouvement réduit */
.tn-js .tn-sec .tn-tete { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.tn-js .tn-sec.tn-vu .tn-tete { opacity: 1; transform: none; }

/* ═══ HERO ═══════════════════════════════════════════════════════════ */
.tn-hero { background: var(--c-surface); display: flex; align-items: center; min-height: calc(100svh - var(--tn-tete, 145px));
  padding-block: clamp(40px, 5vh, 64px); position: relative; overflow: clip; }
.tn-hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 41%; background: var(--c-fond); pointer-events: none; }
.tn-hero-grille { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.tn-hero-texte { min-width: 0; display: grid; gap: 26px; justify-items: start; }
.tn-h1 { font-family: "Libre Franklin", var(--f-titre) !important; font-weight: 700; font-size: clamp(2.6rem, 4.35vw, 4.3rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; max-width: 11.5em; }
.tn-h1 em { font-size: 1.04em; }
.tn-chapeau { font-size: 1.125rem; line-height: 1.7; color: var(--c-texte-2); max-width: 31em; }
.tn-hero .tn-actions { margin-top: 4px; }
.tn-reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 520px; margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--c-bord); }
.tn-reperes div { padding-right: 16px; }
.tn-reperes div + div { padding-left: 20px; border-left: 1px solid var(--c-bord); }
.tn-reperes dt { font-family: var(--tn-titre); font-weight: 700; font-size: 2.25rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tn-reperes dd { margin: 6px 0 0; font-family: var(--tn-titre); font-size: .875rem; color: var(--c-texte-2); line-height: 1.35; }

.tn-scene { position: relative; min-width: 0; padding-left: 150px; }
.tn-scene-photo { position: relative; margin-left: auto; height: min(560px, calc(100svh - var(--tn-tete, 145px) - 130px)); min-height: 440px; aspect-ratio: 821 / 1026; max-width: 100%; }
.tn-scene-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-image); box-shadow: var(--tn-ombre-haut); transition: transform .6s cubic-bezier(.2,.7,.2,1); }

.tn-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; text-decoration: none; z-index: 2; }
.tn-pin-num { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-surface); color: var(--c-primaire-texte); border: 2px solid var(--c-primaire);
  font-family: var(--tn-titre); font-weight: 700; font-size: .95rem; box-shadow: 0 4px 14px color-mix(in srgb, var(--c-ombre) 35%, transparent); transition: background .25s, color .25s, transform .25s; }
.tn-pin-nom { position: absolute; top: 50%; transform: translateY(-50%) scale(.92); white-space: nowrap; padding: .45em .85em; border-radius: 999px;
  background: var(--c-texte); color: var(--c-surface); font-family: var(--tn-titre); font-weight: 600; font-size: .8rem; line-height: 1.2;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.tn-pin-g .tn-pin-nom { right: calc(100% + 10px); }
.tn-pin-d .tn-pin-nom { left: calc(100% + 10px); }
.tn-pin.tn-actif .tn-pin-num { background: var(--c-primaire); color: var(--c-sur-primaire); transform: scale(1.08); }
.tn-pin.tn-actif .tn-pin-nom { opacity: 1; transform: translateY(-50%) scale(1); }
.tn-pin.tn-actif .tn-pin-num::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--c-sur-voile); opacity: .9; animation: tn-onde 1.8s ease-out infinite; }
@keyframes tn-onde { from { transform: scale(.7); opacity: .95; } to { transform: scale(1.5); opacity: 0; } }
.tn-pin:focus-visible { outline: none; }
.tn-pin:focus-visible .tn-pin-num { outline: 3px solid var(--c-texte); outline-offset: 3px; }

/* 27/10/2026 garde du parc : la carte portait 292 px, soit 250 px de texte pour des phrases de 88 à 103 caractères
   (« de délai de paiement par défaut entre professionnels, 60 jours au plus par accord écrit. ») — rouge
   page-cassee:colonne_etroite à 390, 1440 et 1920 (aucun texte de 60 caractères et plus sous 300 px).
   La largeur tient compte du texte, plus l'inverse : padding 20 + bordure 1 de chaque côté, donc 360 px
   pour 318 px de colonne de lecture. Le reste du hero (photo, chevrons) n'est pas touché. */
.tn-fiche { position: absolute; left: 0; top: 6%; width: 360px; z-index: 3; padding: 18px 20px 20px; background: var(--carte-fond); border: var(--carte-bord);
  border-radius: var(--r-carte); box-shadow: var(--tn-ombre-haut); }
.tn-fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--c-bord);
  font-family: var(--tn-titre); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-2); }
.tn-fiche-prog { display: flex; gap: 4px; }
.tn-fiche-prog i { width: 18px; height: 4px; border-radius: 2px; background: var(--c-bord); position: relative; overflow: hidden; }
.tn-fiche-prog i.tn-actif { background: var(--c-primaire); }
.tn-fiche { display: grid; }
.tn-fiche-tete { grid-row: 1; }
.tn-sujet { grid-row: 2; grid-column: 1; display: grid; gap: 10px; align-content: start; }
.tn-js .tn-sujet { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.tn-js .tn-sujet.tn-actif { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .1s, transform .45s ease .1s, visibility 0s; }
.tn-sujet-rub { display: flex; align-items: center; gap: 8px; font-family: var(--tn-titre); font-weight: 600; font-size: .78rem; color: var(--c-primaire-texte); }
.tn-sujet-rub span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-primaire); color: var(--c-sur-primaire); font-size: .7rem; flex: none; }
.tn-sujet-rub em { margin-left: auto; font-style: normal; font-weight: 600; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-texte-2); text-align: right; }
.tn-sujet-chiffre { font-family: var(--tn-titre); font-weight: 600; font-size: 1.1rem; color: var(--c-texte); line-height: 1; }
.tn-sujet-chiffre b { font-weight: 700; font-size: 3.1rem; letter-spacing: -.03em; color: var(--c-primaire-texte); font-variant-numeric: tabular-nums; margin-right: .08em; }
.tn-sujet-regle { font-size: .9rem; line-height: 1.55; color: var(--c-texte-2); }
/* 27/10/2026 garde du parc : le texte du geste était dans un <span>, enfant d'une rangée flex ; il ne
   disposait donc que de la largeur restante (194 px à 1440) alors que la carte en offre 318. Le texte est
   maintenant dans le <p> lui-même, la coche restant décorative sur la première ligne : rouge
   page-cassee:colonne_etroite levé à 390, 1440 et 1920. */
.tn-sujet-geste { display: block; padding: 10px 12px; border-radius: 4px; background: color-mix(in srgb, var(--c-doux) 70%, transparent);
  font-family: var(--tn-titre); font-size: .85rem; line-height: 1.45; color: var(--c-sur-doux); }
.tn-sujet-geste .tn-coche { margin: 0 8px 0 0; vertical-align: -5px; }
.tn-js .tn-sujet .tn-sujet-geste { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.2,.7,.2,1) .2s; }
.tn-js .tn-sujet.tn-actif.tn-geste .tn-sujet-geste { clip-path: inset(0 0 0 0); }
.tn-direct .tn-sujet .tn-sujet-geste { transition: none; }
.tn-sujet .tn-lien { font-size: .82rem; margin-top: 2px; }

/* ═══ À LA UNE ════════════════════════════════════════════════════════ */
.tn-une-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.tn-une-tete { overflow: hidden; }
.tn-une-tete figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tn-une-tete:hover figure img { transform: scale(1.03); }
.tn-une-tete figure { overflow: hidden; }
.tn-une-corps { display: grid; gap: 14px; padding: 24px 26px 26px; }
.tn-une-tete h3 { font-weight: 700; font-size: 1.6rem; line-height: 1.18; letter-spacing: -.015em; }
.tn-home h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s; }
.tn-home h3 a:hover { background-size: 100% 1px; }
.tn-une-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tn-une-fiche { display: grid; gap: 12px; align-content: start; padding: 20px 22px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.tn-une-fiche:hover { transform: translateY(-3px); box-shadow: var(--tn-ombre-haut); border-color: color-mix(in srgb, var(--c-primaire) 45%, var(--c-bord)); }
.tn-une-fiche h3 { font-weight: 650; font-size: 1.08rem; line-height: 1.3; letter-spacing: -.005em; }
.tn-une-fiche .tn-jauge { margin-top: 4px; }

/* ═══ CALCULATEUR : tranche sombre, le ticket en pleine lumière ═══════ */
.tn-fond-nuit { background: var(--c-texte); color: var(--c-sur-primaire); }
.tn-fond-nuit .tn-kicker { background: transparent; border-color: color-mix(in srgb, var(--c-sur-primaire) 28%, transparent); color: var(--c-doux); }
.tn-fond-nuit .tn-h2 { color: var(--c-sur-primaire); }
.tn-fond-nuit .tn-h2 em { color: var(--c-doux); }
.tn-fond-nuit .tn-intro, .tn-fond-nuit .tn-impaye-tete .tn-meta { color: color-mix(in srgb, var(--c-sur-primaire) 72%, var(--c-texte)); }
.tn-impaye-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 72px; align-items: center; }
.tn-impaye-tete { margin-bottom: 0; }
.tn-calc-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 8px; }
.tn-calc-champs label { display: grid; gap: 8px; align-content: end; font-family: var(--tn-titre); font-weight: 600; font-size: .82rem; color: color-mix(in srgb, var(--c-sur-primaire) 80%, var(--c-texte)); }
.tn-champ { display: flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--c-sur-primaire) 22%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--c-sur-primaire) 7%, transparent); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.tn-champ:focus-within { border-color: var(--c-doux); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-doux) 25%, transparent); }
.tn-champ input { flex: 1; min-width: 0; border: 0 !important; background: transparent; padding: 12px 12px; font-family: var(--tn-titre); font-weight: 700; font-size: 1.3rem; color: var(--c-sur-primaire); box-shadow: none !important; outline: none; }
.tn-champ i { display: grid; place-items: center; padding: 0 10px; font-style: normal; font-weight: 600; font-size: .74rem; color: var(--c-doux); border-left: 1px solid color-mix(in srgb, var(--c-sur-primaire) 18%, transparent); white-space: nowrap; }
.tn-ticket { padding: 28px 30px 30px; display: grid; gap: 16px; align-content: start; position: relative; background: var(--carte-fond); color: var(--c-texte); border-radius: var(--r-carte) var(--r-carte) 0 0; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-voile) 90%, transparent); transform: rotate(1.2deg); }
.tn-ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 8px 0, transparent 6px, var(--carte-fond) 6.5px) 0 0 / 16px 10px repeat-x; }
.tn-ticket dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--c-bord); }
.tn-ticket dt { font-family: var(--tn-titre); font-size: .95rem; color: var(--c-texte); }
.tn-ticket dt small { display: block; font-size: .78rem; color: var(--c-texte-2); margin-top: 2px; }
.tn-ticket dd { margin: 0; font-family: var(--tn-titre); font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tn-ticket .tn-ticket-total { border-bottom: 0; padding-top: 16px; }
.tn-ticket .tn-ticket-total dt { font-weight: 700; font-size: 1.05rem; }
.tn-ticket .tn-ticket-total dd { font-size: 2.4rem; letter-spacing: -.02em; color: var(--c-primaire-texte); }
.tn-ticket-jour { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 4px; background: color-mix(in srgb, var(--c-doux) 70%, transparent); font-family: var(--tn-titre); font-size: .9rem; color: var(--c-sur-doux); }
.tn-ticket-jour b { font-size: 1.15rem; }
.tn-flash { animation: tn-flash .6s ease; }
@keyframes tn-flash { 0% { color: var(--c-primaire); transform: translateY(-2px); } 100% { transform: none; } }

/* ═══ QUIZ : tête et score à gauche, une seule carte à hauteur fixe ═══ */
.tn-quiz-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.tn-quiz-tete { margin-bottom: 0; }
.tn-score { display: grid; gap: 14px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--c-bord); width: 100%; }
.tn-score-chiffre { font-family: var(--tn-titre); line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.tn-score-chiffre b { font-weight: 700; font-size: 3.6rem; letter-spacing: -.04em; color: var(--c-primaire-texte); font-variant-numeric: tabular-nums; }
.tn-score-chiffre span { font-weight: 600; font-size: 1rem; color: var(--c-texte-2); }
.tn-score-pts { display: flex; gap: 8px; }
.tn-score-pts li { flex: 1; }
.tn-score-pts span { display: grid; place-items: center; height: 34px; border-radius: 4px; border: 1px solid var(--c-bord); background: var(--c-surface); font-family: var(--tn-titre); font-weight: 700; font-size: .85rem; color: var(--c-texte-2); transition: background .3s, color .3s, border-color .3s; }
.tn-score-pts li.tn-courant span { border-color: var(--c-primaire); color: var(--c-primaire-texte); box-shadow: inset 0 0 0 1px var(--c-primaire); }
.tn-score-pts li.tn-ok span { background: var(--c-primaire); border-color: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-score-pts li.tn-ko span { background: var(--c-fond-2); color: var(--c-texte-2); text-decoration: line-through; }
.tn-quiz-carte { padding: 26px 30px 26px; display: grid; gap: 22px; }
.tn-question { display: grid; gap: 20px; align-content: start; }
/* 27/10/2026 garde du parc : la pile maison (grid-area 1/1 + opacity) est retirée : c'est le kit_vivant
   qui masque les affirmations non courantes ([data-question][hidden], règle du kit). Les garder toutes
   dans une même cellule empêcherait la mesure « une affirmation à la fois » du socle. */
@keyframes tn-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tn-affirmation { font-weight: 650; font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.25; letter-spacing: -.012em; }
/* 27/10/2026 garde du parc : les boutons Vrai / Faux, le compteur, la barre de progression et le score
   sont ceux du kit_vivant (.kv-choix, .kv-bouton, .kv-quiz-pied), déjà habillés aux couleurs du site par
   kit-vivant.css. Les règles maison .tn-choix / .tn-quiz-prog / .tn-quiz-pied n'ont plus d'objet.
   La règle qui s'applique est [data-explication] : le kit la masque tant qu'aucune réponse n'est donnée. */
.tn-reponse { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: 4px; background: color-mix(in srgb, var(--c-doux) 70%, transparent); border-left: 4px solid var(--c-primaire); }
.tn-verdict-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tn-verdict-mot { font-family: var(--tn-titre); font-weight: 800; font-size: 1.3rem; color: var(--c-primaire-texte); }
.tn-explication { font-size: .95rem; line-height: 1.6; color: var(--c-texte-2); }

.tn-quiz-pied .tn-btn[disabled] { opacity: .45; pointer-events: none; }

/* ═══ PARCOURS ════════════════════════════════════════════════════════ */
.tn-rail { position: relative; height: 4px; border-radius: 2px; background: var(--c-fond-2); margin: 0 0 22px; overflow: hidden; }
.tn-rail i { position: absolute; inset: 0; background: var(--c-primaire); transform-origin: left; transform: scaleX(var(--p, 1)); }
/* 27/10/2026 garde du parc : quatre colonnes laissaient 243 px de texte dans chaque carte (« Lister les
   contrats, les échéances et les engagements en cours. » = 63 caractères) — rouge colonne_etroite. La
   grille passe à trois colonnes au large (426 px de carte, 386 px de texte) et la quatrième carte se
   recentre seule sur la deuxième ligne. Deux colonnes sous 1200 px. */
.tn-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }
.tn-etape:last-child:nth-child(3n + 1) { grid-column: 2; }
.tn-etape { overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .35s, box-shadow .35s; }
.tn-etape figure { overflow: hidden; }
.tn-etape img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: filter .5s, transform .8s; }
.tn-js .tn-etape:not(.tn-atteint) img { filter: grayscale(.85) contrast(.92); }
.tn-etape-corps { display: grid; gap: 10px; align-content: start; padding: 18px 20px 22px; }
.tn-etape-sem { display: flex; align-items: center; gap: 10px; font-family: var(--tn-titre); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-2); }
.tn-etape-sem span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c-primaire); color: var(--c-primaire-texte); font-size: .8rem; letter-spacing: 0; transition: background .3s, color .3s; }
.tn-etape.tn-atteint .tn-etape-sem span, html:not(.tn-js) .tn-etape-sem span { background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-etape h3 { font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.tn-etape.tn-atteint { box-shadow: var(--tn-ombre-haut); }
.tn-lien-tete { max-width: 22em; }

/* ═══ RUBRIQUES ═══════════════════════════════════════════════════════ */
.tn-rub-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: stretch; }
.tn-rub-barres { padding: 22px 22px 14px; display: grid; gap: 4px; align-content: start; }
.tn-rub-ligne { display: grid; grid-template-columns: 34px minmax(0, 11em) minmax(0, 1fr) 2.2em; gap: 14px; align-items: center; width: 100%; padding: 14px 12px; border: 0; border-radius: 4px;
  background: transparent; color: var(--c-texte); text-align: left; cursor: pointer; font: inherit; transition: background .25s; }
.tn-rub-ligne:hover { background: color-mix(in srgb, var(--c-doux) 40%, transparent); }
.tn-rub-ligne.tn-actif { background: color-mix(in srgb, var(--c-doux) 75%, transparent); }
.tn-rub-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-bord); color: var(--c-primaire-texte); }
.tn-rub-nom { font-family: var(--tn-titre); font-weight: 600; font-size: .98rem; }
.tn-rub-barre { height: 10px; border-radius: 5px; background: var(--c-fond-2); overflow: hidden; }
.tn-rub-barre i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: color-mix(in srgb, var(--c-primaire) 45%, var(--c-surface)); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1), background .25s; }
.tn-rub-ligne.tn-actif .tn-rub-barre i { background: var(--c-primaire); }
.tn-js .tn-sec:not(.tn-vu) .tn-rub-barre i { transform: scaleX(0); }
.tn-rub-ligne b { font-family: var(--tn-titre); font-weight: 700; font-size: 1.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.tn-rub-panneaux { display: grid; gap: 16px; }
.tn-rub-panneau { padding: 26px 28px; display: grid; gap: 14px; align-content: start; }
.tn-js .tn-rub-panneaux { display: grid; }
.tn-js .tn-rub-panneau { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.tn-js .tn-rub-panneau.tn-actif { opacity: 1; visibility: visible; transition: opacity .35s; }
.tn-rub-panneau h3 { font-weight: 700; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.015em; }
.tn-rub-panneau ul { display: grid; border-top: 1px solid var(--c-bord); }
.tn-rub-panneau li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-bord); text-decoration: none; font-family: var(--tn-titre); font-weight: 600; font-size: .95rem; line-height: 1.35; }
.tn-rub-panneau li a:hover span { color: var(--c-primaire-texte); }
.tn-rub-panneau li small { flex: none; font-weight: 500; font-size: .78rem; color: var(--c-texte-2); }

/* ═══ FABRIQUE : l'épreuve annotée ═══════════════════════════════════ */
.tn-fab-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.tn-epreuve { position: relative; display: grid; gap: 18px; padding: 26px 30px 26px 46px; background: var(--carte-fond); border: var(--carte-bord); border-radius: var(--r-carte);
  box-shadow: var(--tn-ombre-haut), 10px 10px 0 -1px var(--c-surface), 10px 10px 0 0 var(--c-bord); }
.tn-epreuve-bandeau { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--c-bord);
  font-family: var(--tn-titre); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-2); }
.tn-zone { position: relative; border-radius: 4px; outline: 2px solid transparent; outline-offset: 6px; transition: outline-color .35s, background .35s; }
.tn-zone-n { position: absolute; left: -34px; top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--c-primaire); background: var(--c-surface); color: var(--c-primaire-texte); font-family: var(--tn-titre); font-weight: 700; font-size: .72rem; font-style: normal; transition: background .3s, color .3s, transform .3s; }
.tn-zone.tn-actif { outline-color: var(--c-primaire); background: color-mix(in srgb, var(--c-doux) 45%, transparent); }
.tn-zone.tn-actif .tn-zone-n, .tn-zone.tn-fait .tn-zone-n, html:not(.tn-js) .tn-zone-n { background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-zone.tn-actif .tn-zone-n { transform: scale(1.15); }
.tn-epreuve-titre { font-weight: 700; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.12; letter-spacing: -.018em; }
.tn-epreuve-chapeau { margin-top: 8px; font-size: 1rem; line-height: 1.6; color: var(--c-texte-2); }
.tn-epreuve-milieu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.tn-epreuve-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-image); }
.tn-epreuve-chiffres { display: grid; gap: 10px; }
.tn-epreuve-chiffres p { font-family: var(--tn-titre); font-size: .9rem; line-height: 1.35; color: var(--c-texte-2); }
.tn-epreuve-chiffres b { display: block; font-size: 2.1rem; line-height: 1; letter-spacing: -.03em; color: var(--c-primaire-texte); }
.tn-epreuve-chiffres .tn-epreuve-source { font-weight: 600; font-size: .78rem; color: var(--c-texte); padding: .35em .7em; border: 1px solid var(--c-bord); border-radius: 999px; justify-self: start; }
.tn-epreuve-exemple p { font-size: .95rem; line-height: 1.6; color: var(--c-texte); }
.tn-epreuve-exemple strong, .tn-epreuve-geste strong { font-family: var(--tn-titre); }
.tn-epreuve-geste { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: color-mix(in srgb, var(--c-doux) 70%, transparent); font-family: var(--tn-titre); font-size: .9rem; line-height: 1.45; color: var(--c-sur-doux); }
.tn-epreuve-geste .tn-zone-n { left: -48px; top: 12px; }
.tn-epreuve-signe { padding-top: 12px; border-top: 1px dashed var(--c-bord); font-family: var(--tn-titre); font-size: .82rem; color: var(--c-texte-2); }
.tn-epreuve-signe .tn-zone-n { top: 10px; }
.tn-controle { padding: 22px 24px 10px; position: relative; }
.tn-controle li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 8px; margin-inline: -8px; border-bottom: 1px solid var(--c-bord); border-radius: 4px; cursor: default; transition: background .3s; }
.tn-controle li:last-child { border-bottom: 0; }
.tn-controle li.tn-actif { background: color-mix(in srgb, var(--c-doux) 60%, transparent); }
.tn-controle li strong { display: flex; gap: 8px; align-items: baseline; font-family: var(--tn-titre); font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
.tn-controle li span:not(.tn-case):not(.tn-num) { display: block; font-size: .86rem; line-height: 1.5; color: var(--c-texte-2); }
.tn-case { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--c-primaire); border-radius: 4px; background: var(--c-primaire); color: var(--c-sur-primaire); transition: background .3s, border-color .3s; }
.tn-case svg { width: 15px; height: 15px; stroke-width: 3; transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.tn-js .tn-controle li:not(.tn-fait) .tn-case { background: var(--c-surface); border-color: var(--c-texte); }
.tn-js .tn-controle li:not(.tn-fait) .tn-case svg { opacity: 0; transform: scale(.4); }
.tn-tampon { border: 2px solid var(--c-primaire); background: var(--c-surface); color: var(--c-primaire-texte); transform: rotate(-4deg); transition: opacity .3s, transform .4s cubic-bezier(.3,1.5,.5,1); }
.tn-js .tn-controle:not(.tn-bon) .tn-tampon { opacity: 0; transform: rotate(-4deg) scale(1.6); }
.tn-registre { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.tn-registre ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; padding: 22px 0; border-top: 1px solid var(--c-bord); }
.tn-registre ol > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.tn-registre ol strong { display: block; font-family: var(--tn-titre); font-weight: 700; font-size: .95rem; margin-bottom: 2px; }
.tn-registre ol li span:not(.tn-coche) { display: block; font-size: .84rem; line-height: 1.5; color: var(--c-texte-2); }
.tn-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tn-logos a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--r-carte); text-decoration: none; transition: border-color .2s, transform .2s; }
.tn-logos a:hover { border-color: var(--c-primaire); transform: translateY(-2px); }
.tn-logo-img { display: block; height: 26px; width: 90px; flex: none; }
.tn-logos .tn-logo-img img { height: 26px; width: auto; max-width: 100%; object-fit: contain !important; object-position: left center; }
.tn-logos span:not(.tn-logo-img) { font-family: var(--tn-titre); font-weight: 600; font-size: .8rem; line-height: 1.25; color: var(--c-texte); }
.tn-liens { display: flex; flex-wrap: wrap; gap: 12px 28px; }

/* ═══ AVIS : un dossier lecteur, avant / après ═══════════════════════ */
.tn-avis-grille { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.tn-note { display: grid; gap: 14px; align-content: start; }
.tn-note-chiffre { font-family: var(--tn-titre); line-height: 1; }
.tn-note-chiffre b { font-weight: 700; font-size: 5.2rem; letter-spacing: -.045em; color: var(--c-primaire-texte); }
.tn-note-chiffre span { font-weight: 600; font-size: 1.5rem; color: var(--c-texte-2); margin-left: 6px; }
.tn-repartition { display: grid; gap: 10px; margin: 4px 0 8px; }
.tn-repartition li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 1.4em; gap: 12px; align-items: center; font-family: var(--tn-titre); font-size: .85rem; color: var(--c-texte-2); }
.tn-repartition b { color: var(--c-texte); text-align: right; }
.tn-repartition .tn-jauge-barre { height: 8px; border-radius: 4px; }
.tn-lecteurs { display: none; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--c-bord); }
.tn-js .tn-lecteurs { display: flex; }
.tn-lecteurs button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--c-bord); border-radius: 999px; background: var(--c-surface); color: var(--c-texte);
  font-family: var(--tn-titre); font-weight: 600; font-size: .8rem; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.tn-lecteurs button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-doux); color: var(--c-sur-doux); font-size: .66rem; letter-spacing: .02em; }
.tn-lecteurs button:hover { border-color: var(--c-primaire); }
.tn-lecteurs button.tn-actif { background: var(--c-texte); border-color: var(--c-texte); color: var(--c-surface); }
.tn-lecteurs button.tn-actif span { background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-dossiers { display: grid; gap: 16px; }
.tn-js .tn-dossiers { gap: 0; }
.tn-js .tn-dossier { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s, transform .45s, visibility 0s .45s; }
.tn-js .tn-dossier.tn-actif { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .05s, transform .45s .05s; }
.tn-dossier { padding: 24px 28px 28px; display: grid; gap: 20px; align-content: start; }
.tn-dossier blockquote p { font-style: italic; font-size: 1.22rem; line-height: 1.6; color: var(--c-texte); }
.tn-avant-apres { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.tn-avant, .tn-apres { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 4px; }
.tn-avant { border: 1px solid var(--c-bord); background: var(--c-fond); }
.tn-apres { background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-avant small, .tn-apres small { font-family: var(--tn-titre); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-2); }
.tn-apres small { color: color-mix(in srgb, var(--c-sur-primaire) 80%, var(--c-primaire)); }
.tn-avant a { font-family: var(--tn-titre); font-weight: 700; font-size: .98rem; line-height: 1.35; color: var(--c-primaire-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.tn-apres strong { font-family: var(--tn-titre); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.tn-aa-fleche { display: grid; place-items: center; color: var(--c-primaire-texte); }
.tn-reserve .tn-apres { background: var(--c-fond-2); color: var(--c-texte); }
.tn-reserve .tn-apres small { color: var(--c-texte-2); }

/* ═══ FRISE ═══════════════════════════════════════════════════════════ */
.tn-axe { position: relative; height: 400px; margin-inline: 4px; }
.tn-axe::before, .tn-axe::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--c-bord); }
.tn-axe::after { background: var(--c-primaire); transform-origin: left; transition: transform 1.8s cubic-bezier(.4,.1,.2,1); }
.tn-js .tn-sec:not(.tn-vu) .tn-axe::after { transform: scaleX(0); }
.tn-jalon { position: absolute; left: var(--pos); top: 50%; width: 0; height: 0; }
.tn-jalon-pt { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-surface); border: 3px solid var(--c-primaire); z-index: 1; transition: background .3s calc(var(--i) * .35s + .2s); }
.tn-vu .tn-jalon-pt, html:not(.tn-js) .tn-jalon-pt { background: var(--c-primaire); }
.tn-jalon::after { content: ""; position: absolute; left: -1px; top: 14px; width: 2px; height: 22px; background: var(--c-bord); }
.tn-jalon.tn-haut::after { top: auto; bottom: 14px; }
.tn-jalon-carte { position: absolute; top: 40px; left: 0; width: 220px; transform: translateX(-50%); padding: 16px 18px; display: grid; gap: 6px; }
.tn-jalon.tn-haut .tn-jalon-carte { top: auto; bottom: 40px; }
.tn-jalon.tn-debut .tn-jalon-carte { transform: translateX(-12px); }
.tn-jalon.tn-fin .tn-jalon-carte { transform: translateX(calc(-100% + 12px)); }
.tn-jalon-carte b { font-family: var(--tn-titre); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; color: var(--c-primaire-texte); }
.tn-jalon-carte strong { font-family: var(--tn-titre); font-weight: 700; font-size: .98rem; }
.tn-jalon-carte span { font-size: .85rem; line-height: 1.5; color: var(--c-texte-2); }
.tn-js .tn-jalon-carte { opacity: 0; transition: opacity .5s calc(var(--i) * .35s + .3s), translate .5s calc(var(--i) * .35s + .3s); translate: 0 10px; }
.tn-js .tn-vu .tn-jalon-carte { opacity: 1; translate: 0 0; }

/* ═══ ÉQUIPE ══════════════════════════════════════════════════════════ */
/* 27/10/2026 garde du parc : cinq colonnes donnaient 226 px de carte (73 caractères de bio) — rouge
   colonne_etroite à 1440 et 1920, et 166 px à 390. Trois colonnes au large, une seule sur téléphone. */
.tn-equipe-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.tn-signature { overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .3s, box-shadow .3s; }
.tn-signature:hover { transform: translateY(-4px); box-shadow: var(--tn-ombre-haut); }
/* 27/10/2026 garde du parc : la liste passant de 5 à 3 colonnes (voir plus bas), les portraits sont plus
   larges — un rapport 4/5 sans borne donnait 533 px de haut à 1440, au-dessus des 480 px autorisés pour
   une image de bloc de home (socle:images-hors-hero). La hauteur est bornée, le cadrage reste au cover. */
.tn-signature figure { overflow: hidden; background: var(--c-fond-2); aspect-ratio: 4 / 5; max-height: 420px; }
.tn-signature img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tn-signature:hover img { transform: scale(1.04); }
.tn-signature-corps { display: grid; gap: 8px; align-content: start; padding: 16px 18px 20px; justify-items: start; }
.tn-signature h3 { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.tn-signature .tn-jauge { width: 100%; margin-top: 6px; }

/* ═══ QUESTIONS ═══════════════════════════════════════════════════════ */
.tn-questions-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.tn-situations ul { display: grid; gap: 12px; margin-bottom: 20px; }
/* 27/10/2026 garde du parc : le conseil partageait la carte en deux (223 px de texte à 1440) — rouge
   colonne_etroite. Le profil et le conseil s'empilent, la flèche décorative disparaît (le profil est
   au-dessus, la flèche ne mène nulle part). */
.tn-situation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; padding: 18px 20px; }
.tn-situation-profil { font-family: var(--tn-titre); font-weight: 700; font-size: .95rem; line-height: 1.35; }
.tn-situation-fleche { display: none; }
.tn-situation-conseil { font-size: .88rem; line-height: 1.5; color: var(--c-texte-2); }
.tn-faq { display: grid; gap: 10px; }
.tn-faq > .tn-lien { margin-top: 10px; }
.tn-acc { padding: 0; box-shadow: none; }
.tn-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-family: var(--tn-titre); font-weight: 650; font-size: 1rem; line-height: 1.35; }
.tn-acc summary::-webkit-details-marker { display: none; }
.tn-acc-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-fond-2); flex: none; transition: transform .3s, background .3s; }
.tn-acc[open] .tn-acc-ico { transform: rotate(180deg); background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-acc .tn-p { padding: 0 22px 20px; }
.tn-acc[open] { border-color: color-mix(in srgb, var(--c-primaire) 40%, var(--c-bord)); }

/* ═══ CTA ═════════════════════════════════════════════════════════════ */
.tn-cta-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.tn-cta-texte { display: grid; gap: 26px; justify-items: start; }
.tn-route { display: grid; gap: 0; width: 100%; max-width: 560px; }
.tn-route li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 20px; }
.tn-route li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--c-bord); }
.tn-route li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-primaire); font-family: var(--tn-titre); font-weight: 700; color: var(--c-primaire-texte); transition: background .3s calc(var(--i) * .4s + .2s), color .3s calc(var(--i) * .4s + .2s); }
.tn-vu .tn-route li > span, html:not(.tn-js) .tn-route li > span { background: var(--c-primaire); color: var(--c-sur-primaire); }
.tn-route div { font-size: .92rem; line-height: 1.55; color: var(--c-texte-2); padding-top: 8px; }
.tn-route strong { display: block; font-family: var(--tn-titre); font-weight: 700; font-size: 1.02rem; color: var(--c-texte); margin-bottom: 2px; }
.tn-cta-photo { position: relative; }
/* 27/10/2026 garde du parc : même borne qu'à l'équipe — la main élargie à 1320 px donnait 510 px de haut
   à cette photo à 1440 (socle:images-hors-hero). Le rapport reste, la hauteur est plafonnée. */
.tn-cta-photo img { width: 100%; aspect-ratio: 4 / 3.4; max-height: 460px; object-fit: cover; border-radius: var(--r-image); box-shadow: var(--tn-ombre-haut); }
.tn-cta-photo figcaption { position: absolute; left: -28px; bottom: 28px; max-width: 340px; padding: 16px 18px; background: var(--carte-fond); border: var(--carte-bord); border-radius: var(--r-carte); box-shadow: var(--tn-ombre-haut); font-family: var(--tn-titre); font-size: .88rem; line-height: 1.45; color: var(--c-texte-2); }
.tn-cta-photo figcaption b { display: block; font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; color: var(--c-primaire-texte); margin-bottom: 4px; }

/* ═══ Mouvement réduit : rendu statique complet ═══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .tn-home *, .tn-home *::before, .tn-home *::after { animation: none !important; transition: none !important; }
  .tn-js .tn-sec .tn-tete { opacity: 1; transform: none; }
}

/* ═══ Tablette ═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* 27/10/2026 garde du parc : sous 1100 px, la carte ne tient plus dans la scène sans manger la photo
     (360 px de carte sur 460 px de scène). Elle passe au-dessus de la photo, comme sur téléphone, et la
     scène occupe alors toute la largeur : 318 px de texte au lieu de 218. */
  .tn-hero-grille { grid-template-columns: minmax(0, 1fr); }
  .tn-scene { padding-left: 0; }
  .tn-fiche { position: relative; left: auto; top: auto; width: auto; margin: 0 0 28px; }
  .tn-registre ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-calc-champs { grid-template-columns: minmax(0, 1fr); }
  .tn-impaye-grille, .tn-quiz-grille { gap: 44px; }
}
@media (max-width: 900px) {
  .tn-hero { min-height: 0; padding-block: 28px 56px; }
  .tn-hero::before { display: none; }
  .tn-hero-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tn-hero-texte { gap: 20px; }
  .tn-scene { padding-left: 0; }
  .tn-scene-photo { height: auto; min-height: 0; width: 100%; margin: 0; }
  /* 27/10/2026 : la carte pleine largeur ne garde plus 14 px de marge de chaque côté sous 900 px
     (à 390 px : 322 px de carte, 280 px de texte — sous le seuil des 300 px). Sans marge latérale,
     la carte s'aligne sur la colonne de lecture de la page. */
  .tn-fiche { position: relative; left: auto; top: auto; width: auto; margin: -18px 0 0; }
  .tn-une-grille, .tn-impaye-grille, .tn-quiz-grille, .tn-rub-grille, .tn-fab-grille, .tn-avis-grille, .tn-questions-grille, .tn-cta-grille { grid-template-columns: minmax(0, 1fr); }
  .tn-calc-champs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tn-ticket { transform: none; }
  .tn-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-home .tn-axe { height: auto; display: grid; gap: 14px; padding-left: 30px; margin-inline: 0; }
  .tn-axe::before, .tn-axe::after { left: 8px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; margin: 0; }
  .tn-axe::after { transform-origin: top; }
  .tn-js .tn-sec:not(.tn-vu) .tn-axe::after { transform: scaleY(0); }
  .tn-jalon { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .tn-jalon-pt { left: -30px; top: 20px; }
  .tn-jalon::after { display: none; }
  .tn-jalon-carte, .tn-jalon.tn-haut .tn-jalon-carte { position: relative; top: auto; bottom: auto; width: auto; transform: none !important; }
  .tn-cta-photo figcaption { left: 14px; }
}
@media (max-width: 640px) {
  .tn-h1 { font-size: clamp(2.3rem, 10.4vw, 2.8rem); }
  .tn-chapeau { font-size: 1.02rem; }
  .tn-reperes dt { font-size: 1.8rem; }
  .tn-reperes div + div { padding-left: 12px; }
  .tn-reperes div { padding-right: 8px; }
  .tn-actions { width: 100%; }
  .tn-actions .tn-btn { flex: 1 1 auto; }
  .tn-une-liste, .tn-registre ol, .tn-calc-champs { grid-template-columns: minmax(0, 1fr); }
  .tn-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tn-etape-corps { padding: 14px 14px 16px; }
  .tn-etape .tn-p { display: none; }
  .tn-etape h3 { font-size: 1rem; }
  .tn-equipe-liste { grid-template-columns: minmax(0, 1fr); }
  .tn-signature-corps { padding: 12px 12px 16px; }
  .tn-avant-apres { grid-template-columns: minmax(0, 1fr); }
  .tn-aa-fleche { transform: rotate(90deg); height: 24px; }
  .tn-dossier { padding: 20px 18px 22px; }
  .tn-dossier blockquote p { font-size: 1.05rem; }
  .tn-note-chiffre b { font-size: 4rem; }
  .tn-epreuve { padding: 20px 12px 20px 34px; box-shadow: var(--tn-ombre-haut); }
  .tn-epreuve-milieu { grid-template-columns: minmax(0, 1fr); }
  .tn-zone-n { left: -30px; }
  .tn-epreuve-geste .tn-zone-n { left: -44px; }
  .tn-logos { grid-template-columns: minmax(0, 1fr); }
  .tn-score-chiffre b { font-size: 3rem; }
  .tn-quiz-pied { justify-content: flex-start; }
  .tn-situation { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tn-situation-fleche { display: none; }
  .tn-rub-ligne { grid-template-columns: 34px minmax(0, 1fr) 2em; }
  .tn-rub-barre { grid-column: 2 / 4; grid-row: 2; }
  .tn-rub-ligne b { grid-column: 3; grid-row: 1; }
  .tn-quiz-carte, .tn-ticket { padding: 22px 12px; }
  .tn-rub-panneau { padding: 22px 18px; }
  .tn-choix button, .tn-quiz-carte .kv-choix .kv-bouton { flex: 1 1 auto; padding-inline: .8em; }
  .tn-ticket .tn-ticket-total dd { font-size: 1.7rem; }
  .tn-pin-nom { font-size: .74rem; }
  .tn-cta-photo figcaption { position: relative; left: auto; bottom: auto; margin: -40px 14px 0; max-width: none; }
}

/* ═══ 27/10/2026 garde du parc : colonne de lecture ≥ 300 px sur téléphone ══════════════════════════
   page-cassee:colonne_etroite mesure, à 390, 1440 et 1920 px, tout texte de 60 caractères et plus dont la
   boîte fait moins de 300 px (page_cassee.py). À 390 px la colonne de lecture fait 350 px : il ne reste
   donc que 50 px pour ce qui n'est pas le texte (icône, pastille numérotée, rembourrage). Ces règles
   empilent ces ornements au lieu de leur donner une colonne, ou rendent au texte sa pleine largeur. Rien
   n'est retiré du contenu : seule la mise en page change. */
@media (max-width: 640px) {
  /* Cartes dont la rangée icône + texte laissait moins de 300 px au texte */
  .tn-une-corps { padding: 22px 18px; }
  .tn-controle { padding: 18px 6px 8px; }
  .tn-controle li { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding-inline: 0; margin-inline: 0; }
  .tn-controle .tn-case { width: 22px; height: 22px; }
  /* Le titre du lien devient un bloc : le texte reprend la largeur de la carte, la flèche passe dessous */
  .tn-ticket .tn-lien { display: block; }
  .tn-ticket .tn-lien > span { display: block; }
  /* Même chose pour la liste des articles du rubriquage : le <small> de rubrique passe dessous */
  .tn-rub-panneau li a { display: block; }
  .tn-rub-panneau li a > span { display: block; }
  /* L'épreuve : le geste s'affiche sur toute la largeur, sa coche décorative disparaît */
  .tn-epreuve-geste { display: block; padding: 12px 0; }
  .tn-epreuve-geste .tn-coche { display: none; }
  .tn-epreuve-signe > span:not(.tn-zone-n) { display: block; }
  /* La question des accordéons garde toute la largeur ; le chevron passe à la ligne suivante */
  .tn-acc summary { flex-wrap: wrap; padding: 16px 16px; gap: 8px; }
  .tn-acc summary > span { flex: 1 1 100%; }
  .tn-acc-ico { margin-left: auto; }
  .tn-acc .tn-p { padding: 0 18px 20px; }
  /* Les trois étapes du CTA : pastille plus petite pour que le texte dépasse 300 px */
  .tn-route li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .tn-route li > span { width: 28px; height: 28px; font-size: .9rem; }
  .tn-route li:not(:last-child)::before { left: 13px; top: 30px; }
  /* La mention de fin du quiz occupe sa propre ligne */
  .tn-quiz-pied .tn-meta { width: 100%; }
}

/* Sans JS : les trois sujets s'empilent sous la photo au lieu de la recouvrir */
html:not(.tn-js) .tn-scene { padding-left: 0; }
html:not(.tn-js) .tn-fiche { position: relative; left: auto; top: auto; width: auto; margin: 16px 0 0; gap: 18px; }
html:not(.tn-js) .tn-pin-nom { opacity: 1; }

/* Lenis (CSS officiel) : défilement amorti sans à-coups */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }