/* Home d’Actu Bien-être, tuning du 16/10/2026 : « la chambre vérifiée ».
   Couleurs : variables de da.css (déclinées de global.css), aucune teinte ajoutée. Une grammaire pour toute la page :
   pastille .tn-kicker, H2 à fin accentuée .tn-acc, carte blanche à filet .tn-carte, colonne .container (1132 px). */

@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

html:root {
  --tn-encre: var(--c-texte, #16323a);
  --tn-encre-2: var(--c-texte-2, #44646c);
  --tn-accent: var(--c-primaire, #1e6e80);
  --tn-accent-2: var(--c-secondaire, #4a9fb0);
  --tn-clair: var(--color-main-100, #9ed9e0);
  --tn-doux: var(--c-doux, #e3f3f4);
  --tn-bord: var(--c-bord, #cfe6e9);
  --tn-pale: var(--c-fond-2, #f3fafa);
  --tn-ombre: 0 1px 2px rgb(22 50 58 / .05), 0 18px 40px -18px rgb(22 50 58 / .22);
  --tn-ombre-haute: 0 2px 4px rgb(22 50 58 / .06), 0 30px 60px -24px rgb(22 50 58 / .32);
  --tn-r: 1.25rem;
  --tn-sans: "Figtree", system-ui, sans-serif;
  --tn-serif: "Instrument Serif", Georgia, serif;
}

/* Mobile : pas de bandeau d’annonce, en-tête court */
@media (max-width: 700px) { [data-bandeau], .announcement-bar { display: none !important; } }

.tn-home { font-family: var(--tn-sans); color: var(--tn-encre); }
.tn-home h1, .tn-home h2, .tn-home h3 { font-family: var(--tn-sans); color: var(--tn-encre); }
.tn-home .serif-it { font-family: var(--tn-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.tn-home a { text-underline-offset: 3px; }

/* ─── grammaire commune ─── */
.tn-section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.tn-pale { background: var(--tn-pale); }
.tn-tete { max-width: 52rem; margin: 0 auto clamp(2.5rem, 4.5vw, 4rem); text-align: center; }
.tn-tete-gauche { text-align: left; margin-inline: 0; }
.tn-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .35rem .95rem .35rem .55rem; border-radius: 999px;
  background: white; border: 1px solid var(--tn-bord); color: var(--tn-accent); font-weight: 600; font-size: .875rem; line-height: 1.3; box-shadow: 0 1px 2px rgb(22 50 58 / .05); }
.tn-kicker-point { width: .55rem; height: .55rem; border-radius: 50%; background: var(--tn-accent); box-shadow: 0 0 0 4px rgb(30 110 128 / .16); flex: none; }
.tn-home h2 { text-wrap: balance; font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; margin: 0 0 1rem; }
.tn-acc { color: var(--tn-accent); }
.tn-sous { color: var(--tn-encre-2); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; margin: 0 auto; max-width: 38rem; }
.tn-tete-gauche .tn-sous { margin-inline: 0; }
.tn-sous a { color: var(--tn-accent); font-weight: 600; text-decoration: underline; }
.tn-carte { background: white; border: 1px solid var(--tn-bord); border-radius: var(--tn-r); box-shadow: var(--tn-ombre); }
.tn-pied { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.tn-lien-fleche { display: inline-flex; align-items: center; gap: .4rem; color: var(--tn-accent); font-weight: 600; min-height: 44px; }
.tn-lien-fleche:hover { text-decoration: underline; }
.tn-lien-fleche svg { transition: transform .2s; }
.tn-lien-fleche:hover svg { transform: translateX(3px); }
.tn-lien-carte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tn-boutons { display: flex; flex-wrap: wrap; gap: .9rem; }
.tn-boutons-centre { justify-content: center; }
.tn-tampon { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .8rem; border-radius: .5rem; border: 2px solid currentColor;
  font-weight: 800; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-5deg); line-height: 1.2; background: white; }
.tn-v-vrai .tn-tampon { color: var(--tn-accent); }
.tn-v-faux .tn-tampon { color: var(--tn-encre); }
.tn-v-nuance .tn-tampon { color: var(--tn-accent-2); border-style: dashed; }
.tn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .875rem; color: var(--tn-encre-2); margin: 0; }
.tn-meta .tag-rub { position: relative; z-index: 2; }
.tn-meta-rub { color: var(--tn-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.tn-jauge-plein { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--tn-accent-2), var(--tn-accent)); transform-origin: left center; }

/* ─── 1. hero ─── */
.tn-hero { position: relative; padding-block: clamp(2rem, 4vw, 3.5rem); min-height: calc(100svh - var(--entete-h, 112px)); display: flex; align-items: center; }
.tn-hero > .container { width: 100%; }
.tn-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.tn-hero-texte, .tn-scene { min-width: 0; }
.tn-nobr { white-space: nowrap; }
.tn-hero .tn-h1 { font-family: var(--tn-sans); font-size: clamp(2.5rem, 4vw, 3.65rem); line-height: 1.04; text-wrap: balance; letter-spacing: -.035em; font-weight: 700; margin: 0 0 1.3rem; color: var(--tn-encre); }
.tn-hero .tn-h1 em { color: var(--tn-accent); font-size: 1.12em; line-height: .9; padding-right: .04em; }
.tn-chapeau { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.6; color: var(--tn-encre-2); max-width: 33rem; margin: 0 0 1.9rem; }
.tn-reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--tn-bord); max-width: 34rem; }
.tn-reperes > div { padding-right: 1rem; }
.tn-reperes > div + div { padding-left: 1.1rem; border-left: 1px solid var(--tn-bord); }
.tn-reperes dt { font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 700; line-height: 1; color: var(--tn-accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tn-reperes dd { margin: .45rem 0 0; font-size: .9rem; line-height: 1.35; color: var(--tn-encre-2); }

/* la scène : photo 4/5 entière, points ancrés, fiche de verdict posée sur le bas (sol et drap, rien d’annoté) */
.tn-scene { position: relative; width: min(42vw, calc((100svh - var(--entete-h, 112px) - 9rem) * .8)); margin-bottom: 1.75rem; }
.tn-scene-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 1.5rem; overflow: hidden; box-shadow: var(--tn-ombre-haute); background: var(--tn-doux); }
.tn-scene-photo > img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 50%; display: block; }
.tn-scene-legende { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(6px); font-size: .82rem; font-weight: 600; color: var(--tn-encre); box-shadow: 0 6px 18px -8px rgb(22 50 58 / .35); }
.tn-scene-legende span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--tn-accent); color: white; font-size: .78rem; }

.tn-point { position: absolute; left: var(--x); top: var(--y); width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 2; }
.tn-point-rond { position: relative; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: white; box-shadow: 0 0 0 5px rgb(255 255 255 / .45), 0 4px 12px rgb(22 50 58 / .35); transition: transform .3s; }
.tn-point-rond::after { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: var(--tn-accent); }
.tn-point.est-actif .tn-point-rond { transform: scale(1.18); }
.tn-point.est-actif .tn-point-rond::before { content: ""; position: absolute; inset: -.55rem; border-radius: 50%; border: 2px solid white; animation: tn-pouls 1.8s ease-out infinite; }
@keyframes tn-pouls { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.tn-point-etiquette { position: absolute; left: calc(100% - .2rem); top: 50%; transform: translateY(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .4rem .3rem .7rem; border-radius: 999px; background: rgb(255 255 255 / .94); color: var(--tn-encre); font-size: .8rem; font-weight: 600; box-shadow: 0 6px 16px -6px rgb(22 50 58 / .4); transition: opacity .3s, transform .3s, box-shadow .3s; }
.tn-point.a-gauche .tn-point-etiquette { left: auto; right: calc(100% - .2rem); }
.tn-point.est-actif .tn-point-etiquette { box-shadow: 0 0 0 2px var(--tn-accent), 0 8px 20px -6px rgb(22 50 58 / .45); }
.tn-point-etiquette b { padding: .1rem .45rem; border-radius: 999px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: white; background: var(--tn-encre); }
.tn-v-vrai .tn-point-etiquette b { background: var(--tn-accent); }
.tn-v-nuance .tn-point-etiquette b { background: var(--tn-clair); color: var(--tn-encre); }

.tn-fiches { position: absolute; left: -2.75rem; right: 1.25rem; bottom: -1.75rem; z-index: 3; }
.tn-fiche { display: none; background: white; border-radius: 1.1rem; padding: 1rem 1.2rem .35rem; box-shadow: var(--tn-ombre-haute); border: 1px solid var(--tn-bord); }
.tn-fiche.est-actif { display: block; }
.tn-fiche-lieu { display: flex; align-items: center; gap: .4rem; margin: 0 6rem .45rem 0; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tn-accent); }
.tn-fiche-idee { font-size: 1.05rem; line-height: 1.35; font-weight: 700; margin: 0 0 .75rem; color: var(--tn-encre); }
.tn-fiche-verdict { display: flex; align-items: center; gap: 1rem; margin-bottom: .55rem; }
.tn-fiche-repere { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; font-size: .84rem; line-height: 1.35; color: var(--tn-encre-2); }
.tn-fiche-repere b { font-size: 1.6rem; line-height: 1; color: var(--tn-encre); letter-spacing: -.02em; white-space: nowrap; }
.tn-fiche-lien { display: flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 700; color: var(--tn-accent); border-top: 1px solid var(--tn-bord); min-height: 44px; }
.tn-fiche-lien span { font-weight: 500; color: var(--tn-encre-2); white-space: nowrap; }
.tn-fiche-lien svg { margin-left: auto; flex: none; }
.tn-fiche-lien:hover { text-decoration: underline; }
.tn-fiches-barre { position: absolute; top: 1.1rem; right: 1.2rem; width: 5rem; display: flex; gap: .3rem; z-index: 1; }
.tn-fiches-barre span { flex: 1; height: 4px; border-radius: 4px; background: var(--tn-doux); overflow: hidden; position: relative; }
.tn-fiches-barre span.est-actif::after, .tn-fiches-barre span.est-fait::after { content: ""; position: absolute; inset: 0; background: var(--tn-accent); }
.tn-scene.tn-joue .tn-fiches-barre span.est-actif::after { animation: tn-remplit var(--tn-tour, 5s) linear forwards; transform-origin: left; }
@keyframes tn-remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tn-fiche.tn-entre { animation: tn-monte .45s ease both; }
.tn-fiche.tn-entre .tn-tampon { animation: tn-tampon .55s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
@keyframes tn-tampon { from { transform: rotate(-14deg) scale(1.9); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: 1; } }

/* ─── 2. à la une ─── */
.tn-une-grille { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tn-une-vedette { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.tn-une-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tn-une-corps { padding: 1.6rem 1.75rem 1.75rem; display: grid; gap: .8rem; }
.tn-une-vedette h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.tn-une-vedette h3 a:hover, .tn-une-ligne h3 a:hover { color: var(--tn-accent); }
.tn-une-desc { margin: 0; color: var(--tn-encre-2); }
.tn-fiche-lecture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .4rem 0 0; border: 1px solid var(--tn-bord); border-radius: .9rem; overflow: hidden; }
.tn-fiche-lecture > div { padding: .7rem .9rem; background: var(--tn-pale); }
.tn-fiche-lecture > div + div { border-left: 1px solid var(--tn-bord); }
.tn-fiche-lecture dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tn-encre-2); font-weight: 600; }
.tn-fiche-lecture dd { margin: .15rem 0 0; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.tn-une-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.tn-une-ligne { position: relative; display: grid; grid-template-columns: 2.2rem 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .8rem 1.1rem .8rem .9rem; transition: box-shadow .25s, transform .25s; }
.tn-une-ligne:hover, .tn-une-vedette:hover, .tn-auteur:hover { box-shadow: var(--tn-ombre-haute); transform: translateY(-2px); }
.tn-num { font-size: 1.05rem; font-weight: 700; color: var(--tn-accent); font-variant-numeric: tabular-nums; text-align: center; }
.tn-une-vignette { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: .8rem; display: block; }
.tn-une-ico { display: grid; place-items: center; background: var(--tn-doux); color: var(--tn-accent); border: 1px solid var(--tn-bord); }
.tn-une-texte { display: grid; gap: .3rem; min-width: 0; }
.tn-une-ligne h3 { font-size: 1.08rem; line-height: 1.3; margin: 0; }
.tn-duree { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .8rem; color: var(--tn-encre-2); }
.tn-duree-jauge { width: 4.5rem; height: 5px; border-radius: 5px; background: var(--tn-doux); overflow: hidden; flex: none; }

/* ─── 3. rubriques ─── */
.tn-rub-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.tn-rub-onglets { display: grid; gap: .6rem; }
.tn-rub-onglet { display: grid; grid-template-columns: auto minmax(0, 1fr) 2rem; grid-template-areas: "ico nom n" "ico jauge n"; gap: .35rem 1rem; align-items: center;
  width: 100%; text-align: left; padding: .85rem 1.1rem .85rem .85rem; border-radius: 1rem; background: white; border: 1px solid var(--tn-bord); cursor: pointer; font: inherit; color: var(--tn-encre); transition: box-shadow .2s, border-color .2s; min-height: 44px; }
.tn-rub-onglet:hover { box-shadow: var(--tn-ombre); }
.tn-rub-onglet[aria-selected="true"] { border-color: var(--tn-accent); box-shadow: 0 0 0 1px var(--tn-accent), var(--tn-ombre); }
.tn-rub-ico { grid-area: ico; width: 2.75rem !important; height: 2.75rem !important; }
.tn-rub-nom { grid-area: nom; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.tn-rub-jauge { grid-area: jauge; height: 6px; border-radius: 6px; background: var(--tn-doux); overflow: hidden; }
.tn-rub-n { grid-area: n; font-size: 1.5rem; font-weight: 700; color: var(--tn-accent); text-align: right; font-variant-numeric: tabular-nums; }
.tn-rub-tout { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-radius: 1rem; border: 1px dashed var(--tn-accent-2); color: var(--tn-accent); font-weight: 700; min-height: 44px; }
.tn-rub-tout b { margin-left: auto; font-size: 1.5rem; }
.tn-rub-tout:hover { background: white; }
.tn-rub-panneau { padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.tn-rub-panneau + .tn-rub-panneau { margin-top: 1rem; }
.tn-js .tn-rub-panneau { display: none; margin-top: 0; }
.tn-js .tn-rub-panneau.est-actif { display: block; animation: tn-monte .45s ease both; }
@keyframes tn-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tn-rub-panneau h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin: 0 0 .5rem; }
.tn-rub-panneau h3 a:hover { color: var(--tn-accent); }
.tn-rub-desc { color: var(--tn-encre-2); margin: 0 0 1.2rem; }
.tn-rub-liste { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--tn-bord); }
.tn-rub-liste li { border-bottom: 1px solid var(--tn-bord); }
.tn-rub-liste a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .8rem 0; min-height: 44px; }
.tn-rub-liste a:hover .tn-rub-titre { color: var(--tn-accent); text-decoration: underline; }
.tn-rub-titre { font-weight: 600; }
.tn-rub-qui { font-size: .85rem; color: var(--tn-encre-2); white-space: nowrap; }

/* ─── 4. dette de sommeil ─── */
.tn-dette-carte { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.4rem, 3.5vw, 2.75rem); }
.tn-dette-reglages { display: grid; gap: 1.4rem; align-content: start; }
.tn-curseur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem .8rem; align-items: center; font-weight: 600; }
.tn-curseur > span { display: inline-flex; align-items: center; gap: .5rem; }
.tn-curseur > span svg { color: var(--tn-accent); }
.tn-curseur output { font-weight: 700; color: var(--tn-accent); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.tn-curseur input { grid-column: 1 / -1; width: 100%; accent-color: var(--tn-accent); height: 1.6rem; cursor: pointer; }
.tn-dette-total { border-radius: 1rem; background: var(--tn-doux); padding: 1rem 1.2rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.tn-dette-total p { margin: 0; font-weight: 600; }
.tn-dette-chiffre { font-size: 2.4rem; font-weight: 700 !important; color: var(--tn-accent); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tn-dette-graphe { display: grid; gap: 1.2rem; align-content: space-between; min-width: 0; }
.tn-barres { position: relative; height: 16rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(.4rem, 1.2vw, .9rem); align-items: end; padding: 0 .25rem 1.8rem;
  background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--tn-bord) calc(25% - 1px) 25%); background-size: 100% calc(100% - 1.8rem); background-repeat: no-repeat; }
.tn-barre { position: relative; height: calc(100% * var(--h)); display: flex; flex-direction: column; justify-content: flex-end; transition: height .5s cubic-bezier(.3, .9, .3, 1); }
.tn-barre-plein { flex: 1; border-radius: .6rem .6rem .25rem .25rem; background: linear-gradient(180deg, var(--tn-accent-2), var(--tn-accent)); transform-origin: bottom; }
.tn-barre[data-tn-nuit="weekend"] .tn-barre-plein { background: linear-gradient(180deg, var(--tn-clair), var(--tn-accent-2)); }
.tn-barre-jour { position: absolute; top: 100%; left: 0; right: 0; margin-top: .45rem; text-align: center; font-size: .8rem; font-weight: 600; color: var(--tn-encre-2); }
.tn-barres-besoin { position: absolute; left: 0; right: 0; bottom: calc(1.8rem + (100% - 1.8rem) * var(--besoin)); border-top: 2px dashed var(--tn-encre); z-index: 2; transition: bottom .5s cubic-bezier(.3, .9, .3, 1); }
.tn-barres-besoin b { position: absolute; right: 0; bottom: .3rem; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; background: var(--tn-encre); color: white; }
.tn-dette-alerte { margin: 0; padding: .9rem 1.1rem; border-radius: 1rem; border: 1px solid var(--tn-bord); font-size: .95rem; line-height: 1.5; color: var(--tn-encre-2); }
.tn-dette-alerte b { color: var(--tn-encre); }
.tn-dette-alerte[data-tn-alerte="oui"] { border-color: var(--tn-encre); background: white; }
.tn-dette-alerte a { color: var(--tn-accent); font-weight: 700; text-decoration: underline; }

/* ─── 5. souffle ─── */
.tn-souffle-grille { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1.5rem; align-items: center; }
/* le socle plafonne les photos de section à 480 px : la photo garde ce plafond, centrée sur la carte */
.tn-souffle-photo { margin: 0; border-radius: var(--tn-r); overflow: hidden; box-shadow: var(--tn-ombre); aspect-ratio: 4 / 5; max-height: 480px; align-self: center; }
.tn-souffle-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 36% 40%; display: block; }
.tn-souffle-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pacer chiffres" "pacer etapes" "compte compte" "btn btn"; gap: 1.25rem 2rem; padding: clamp(1.4rem, 3vw, 2.5rem); align-items: center; }
.tn-pacer { grid-area: pacer; position: relative; width: clamp(11rem, 18vw, 15rem); aspect-ratio: 1; display: grid; place-items: center; }
.tn-pacer-halo { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--tn-bord); }
.tn-pacer-rond { width: 78%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; color: white;
  background: radial-gradient(circle at 35% 30%, var(--tn-accent-2) 0%, var(--tn-accent) 75%); box-shadow: 0 20px 40px -18px rgb(30 110 128 / .7); transform: scale(.82); }
.tn-pacer-mot { font-weight: 700; font-size: 1.2rem; }
.tn-pacer-s { font-size: .9rem; opacity: .9; font-variant-numeric: tabular-nums; }
.tn-souffle.tn-joue .tn-pacer-rond { animation: tn-respire 10s ease-in-out infinite; }
@keyframes tn-respire { 0% { transform: scale(.62); } 50% { transform: scale(1); } 100% { transform: scale(.62); } }
.tn-souffle-chiffres { grid-area: chiffres; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.tn-souffle-chiffres div { background: var(--tn-doux); border-radius: .9rem; padding: .8rem; text-align: center; }
.tn-souffle-chiffres dt { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--tn-accent); }
.tn-souffle-chiffres dd { margin: .35rem 0 0; font-size: .8rem; line-height: 1.3; color: var(--tn-encre-2); }
.tn-etapes { grid-area: etapes; list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.tn-etapes li { display: flex; gap: .8rem; align-items: flex-start; }
.tn-etape-n { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: white; background: var(--tn-accent); }
.tn-etapes div { display: grid; line-height: 1.4; }
.tn-etapes div span { color: var(--tn-encre-2); font-size: .92rem; }
.tn-souffle-compte { grid-area: compte; display: flex; align-items: center; gap: .5rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--tn-bord); font-size: .9rem; color: var(--tn-encre-2); }
.tn-souffle-compte span { font-weight: 700; color: var(--tn-accent); font-variant-numeric: tabular-nums; }
.tn-souffle-carte .btn-theme { grid-area: btn; justify-self: start; }

/* ─── 6. quiz ─── */
.tn-quiz-carte { max-width: 50rem; margin: 0 auto; padding: clamp(1.4rem, 3.5vw, 2.75rem); }
.tn-quiz-haut { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.tn-quiz-progres { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; flex: 1; max-width: 16rem; }
.tn-quiz-progres li { flex: 1; height: 6px; border-radius: 6px; background: var(--tn-doux); }
.tn-quiz-progres li.est-fait { background: var(--tn-accent-2); }
.tn-quiz-progres li.est-actif { background: var(--tn-accent); }
.tn-quiz-score { margin: 0; font-weight: 700; color: var(--tn-accent); font-variant-numeric: tabular-nums; }
.tn-question { padding-bottom: 1.5rem; }
.tn-question + .tn-question { border-top: 1px solid var(--tn-bord); padding-top: 1.5rem; }
.tn-js .tn-question { display: none; padding: 0; border: 0; }
.tn-js .tn-question.est-actif { display: block; animation: tn-monte .4s ease both; }
.tn-question-rang { margin: 0 0 .4rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tn-encre-2); }
.tn-question-texte { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; margin: 0 0 1.4rem; }
.tn-choix { display: none; gap: .7rem; flex-wrap: wrap; }
.tn-js .tn-choix { display: flex; }
.tn-choix button { flex: 1 1 8rem; min-height: 3.1rem; border-radius: .75rem; border: 2px solid var(--tn-bord); background: white; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--tn-encre); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.tn-choix button:hover { border-color: var(--tn-accent); transform: translateY(-1px); }
.tn-choix button.est-bon { background: var(--tn-accent); border-color: var(--tn-accent); color: white; }
.tn-choix button.est-faux { border-color: var(--tn-encre); text-decoration: line-through; }
.tn-question.est-repondu .tn-choix button { pointer-events: none; }
.tn-reponse { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 1rem; background: var(--tn-pale); border: 1px solid var(--tn-bord); }
.tn-js .tn-reponse { display: none; margin-top: 1.2rem; }
.tn-js .est-repondu .tn-reponse { display: flex; animation: tn-monte .35s ease both; }
.tn-js .est-repondu .tn-reponse .tn-tampon { animation: tn-tampon .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.tn-reponse .tn-tampon { flex: none; margin-top: .15rem; }
.tn-reponse p { margin: 0; color: var(--tn-encre-2); }
.tn-reponse a { color: var(--tn-accent); font-weight: 700; text-decoration: underline; }
.tn-quiz-suivant { display: none !important; margin-top: 1.4rem; }
.tn-js .tn-quiz-carte.peut-suivre .tn-quiz-suivant { display: inline-flex !important; }

/* ─── 7. méthode ─── */
.tn-parcours { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; position: relative; counter-reset: p; }
.tn-parcours-etape { position: relative; padding: 1.5rem 1.4rem 1.6rem; display: grid; gap: .7rem; align-content: start; }
.tn-parcours-etape:not(:last-child)::after { content: ""; position: absolute; top: 2.85rem; right: -1rem; width: 1rem; height: 2px; background: var(--tn-accent); z-index: 1; }
.tn-parcours-n { position: absolute; top: 1.4rem; right: 1.4rem; font-size: .85rem; font-weight: 700; color: var(--tn-accent-2); font-variant-numeric: tabular-nums; }
.tn-parcours-etape .pastille-ico { width: 3rem; height: 3rem; }
.tn-parcours-etape h3 { font-size: 1.15rem; margin: .2rem 0 0; }
.tn-parcours-etape p { margin: 0; color: var(--tn-encre-2); font-size: .95rem; line-height: 1.5; }
.tn-sources { padding: clamp(1.4rem, 3vw, 2.25rem); display: grid; gap: 1.2rem; }
.tn-sources-titre { display: flex; align-items: center; gap: .55rem; margin: 0; font-weight: 700; font-size: 1.1rem; }
.tn-sources-titre svg { color: var(--tn-accent); }
.tn-sources ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tn-bord); }
.tn-sources li { display: grid; grid-template-columns: 11rem 6rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--tn-bord); }
.tn-source-logo { display: flex; align-items: center; min-height: 44px; }
.tn-source-logo img { height: 2.25rem; width: auto; max-width: 9.5rem; object-fit: contain; }
.tn-source-nom { font-weight: 700; color: var(--tn-encre); }
.tn-source-n { font-size: .85rem; font-weight: 700; color: var(--tn-accent); background: var(--tn-doux); border-radius: 999px; padding: .2rem .65rem; justify-self: start; white-space: nowrap; }
.tn-source-articles { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.tn-source-articles a { color: var(--tn-encre); font-weight: 600; text-decoration: underline; text-decoration-color: var(--tn-bord); text-decoration-thickness: 2px; }
.tn-source-articles a:hover { color: var(--tn-accent); text-decoration-color: currentColor; }
.tn-sources .btn-theme { justify-self: start; }

/* ─── 8. journée ─── */
.tn-frise { position: relative; }
.tn-frise-piste { position: absolute; left: 0; right: 0; top: 2.65rem; height: 4px; border-radius: 4px; background: var(--tn-doux); }
.tn-frise-plein { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tn-clair), var(--tn-accent)); transform-origin: left; }
.tn-frise-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; position: relative; }
.tn-frise-arret { display: grid; grid-template-rows: auto auto 1fr; gap: .6rem; }
.tn-frise-h { order: -1; margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--tn-accent); font-variant-numeric: tabular-nums; }
.tn-frise-point { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: white; border: 4px solid var(--tn-accent); position: relative; z-index: 1; }
.tn-frise-carte { padding: 1.1rem 1.05rem 1rem; display: grid; gap: .5rem; align-content: start; height: 100%; }
.tn-frise-carte .pastille-ico { width: 2.6rem; height: 2.6rem; }
.tn-frise-carte h3 { font-size: 1.02rem; line-height: 1.3; margin: .2rem 0 0; }
.tn-frise-carte p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--tn-encre-2); }
.tn-frise-carte .tn-lien-fleche { font-size: .88rem; margin-top: auto; }

/* ─── 9. équipe ─── */
.tn-equipe-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.tn-auteur { position: relative; padding: 1.5rem 1.1rem 1.3rem; text-align: center; display: grid; justify-items: center; gap: .3rem; align-content: start; transition: box-shadow .25s, transform .25s; }
.tn-auteur-photo { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; object-position: 50% 30%; margin-bottom: .6rem; box-shadow: 0 0 0 4px white, 0 0 0 5px var(--tn-bord); }
.tn-auteur h3 { font-size: 1.08rem; margin: 0; }
.tn-auteur h3 a:hover { color: var(--tn-accent); }
.tn-auteur-role { margin: 0; color: var(--tn-accent); font-weight: 700; font-size: .85rem; line-height: 1.3; }
.tn-auteur-spe { margin: 0; color: var(--tn-encre-2); font-size: .82rem; line-height: 1.35; }
.tn-auteur-n { margin: .5rem 0 0; font-size: .85rem; color: var(--tn-encre-2); }
.tn-auteur-n b { font-size: 1.6rem; color: var(--tn-encre); margin-right: .2rem; }
.tn-auteur-rubs { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: .3rem 0 0; }
.tn-auteur-rubs span { font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--tn-doux); color: var(--tn-accent); }

/* ─── 10. avant / après ─── */
.tn-avap { padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2.25rem); }
.tn-avap-entete, .tn-avap-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .8fr); gap: 1.5rem; align-items: center; }
.tn-avap-entete { padding: .4rem 0 .9rem; border-bottom: 2px solid var(--tn-encre); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tn-encre-2); }
.tn-avap-entete span { display: inline-flex; align-items: center; gap: .4rem; }
.tn-avap ul { list-style: none; margin: 0; padding: 0; }
.tn-avap-ligne { padding: 1.05rem 0; border-bottom: 1px solid var(--tn-bord); }
.tn-avap-ligne:last-child { border-bottom: 0; }
.tn-avap-avant, .tn-avap-apres { display: flex; gap: .6rem; align-items: flex-start; margin: 0; line-height: 1.45; }
.tn-avap-avant { color: var(--tn-encre-2); }
.tn-avap-avant s { text-decoration-thickness: 1.5px; text-decoration-color: rgb(68 100 108 / .7); }
.tn-avap-avant svg { flex: none; margin-top: .15rem; color: var(--tn-encre-2); }
.tn-avap-apres { font-weight: 600; }
.tn-avap-apres svg { flex: none; margin-top: .1rem; padding: .15rem; border-radius: 50%; background: var(--tn-accent); color: white; width: 1.3rem; height: 1.3rem; }
.tn-avap-lien { display: flex; align-items: center; gap: .4rem; color: var(--tn-accent); font-weight: 600; font-size: .92rem; line-height: 1.35; min-height: 44px; }
.tn-avap-lien svg { flex: none; }
.tn-avap-lien:hover { text-decoration: underline; }

/* ─── 11. FAQ ─── */
.tn-faq-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tn-faq-grille .tn-tete { margin-bottom: 0; }
.tn-faq-liste { padding: .4rem clamp(1.1rem, 2.5vw, 2rem); }
.tn-faq-item { border-bottom: 1px solid var(--tn-bord); }
.tn-faq-item:last-child { border-bottom: 0; }
.tn-faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.15rem 0; cursor: pointer; font-weight: 700; font-size: 1.05rem; line-height: 1.35; min-height: 44px; }
.tn-faq-item summary::-webkit-details-marker { display: none; }
.tn-faq-signe { flex: none; position: relative; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tn-doux); transition: background .2s, transform .3s; }
.tn-faq-signe::before, .tn-faq-signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; background: var(--tn-accent); transform: translate(-50%, -50%); }
.tn-faq-signe::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.tn-faq-item[open] .tn-faq-signe { background: var(--tn-accent); }
.tn-faq-item[open] .tn-faq-signe::before, .tn-faq-item[open] .tn-faq-signe::after { background: white; }
.tn-faq-item[open] .tn-faq-signe::after { transform: translate(-50%, -50%) rotate(0deg); }
.tn-faq-item p { margin: 0 0 1.2rem; color: var(--tn-encre-2); max-width: 60ch; }

/* ─── 12. appel ─── */
.tn-appel-carte { padding: clamp(1.6rem, 4.5vw, 3.75rem); background: linear-gradient(160deg, var(--tn-pale), white 55%); }
.tn-appel-carte .tn-tete { margin-bottom: 2rem; }
.tn-soir-chips { display: none; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1.5rem; }
.tn-js .tn-soir-chips { display: flex; }
.tn-soir-chips button { min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--tn-bord); background: white; font: inherit; font-weight: 600; color: var(--tn-encre); cursor: pointer; transition: all .2s; }
.tn-soir-chips button:hover { border-color: var(--tn-accent); }
.tn-soir-chips button[aria-pressed="true"] { background: var(--tn-accent); border-color: var(--tn-accent); color: white; }
.tn-soir-cartes { max-width: 44rem; margin: 0 auto 2.2rem; display: grid; gap: .8rem; }
.tn-soir-carte { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 1.1rem; background: white; border: 1px solid var(--tn-bord); box-shadow: var(--tn-ombre); }
.tn-js .tn-soir-carte { display: none; }
.tn-js .tn-soir-carte.est-actif { display: grid; animation: tn-monte .4s ease both; }
.tn-soir-repere { margin: 0; display: grid; text-align: center; padding-right: 1.2rem; border-right: 1px solid var(--tn-bord); }
.tn-soir-repere b { font-size: 2.3rem; line-height: 1; color: var(--tn-accent); letter-spacing: -.02em; }
.tn-soir-repere span { font-size: .78rem; line-height: 1.3; color: var(--tn-encre-2); margin-top: .35rem; }
.tn-soir-geste { margin: 0 0 .2rem; font-weight: 700; font-size: 1.12rem; line-height: 1.35; }

/* apparitions (seulement quand JS a posé .tn-js et que le mouvement est permis) */
.tn-anime .tn-apparait { opacity: 0; transform: translateY(14px); transition: opacity .6s ease var(--d, 0ms), transform .6s ease var(--d, 0ms), box-shadow .25s; }
.tn-anime .tn-apparait.est-vu { opacity: 1; transform: none; }
.tn-anime .tn-avap-ligne s { text-decoration-color: transparent; transition: text-decoration-color .7s ease calc(var(--d, 0ms) + 250ms); }
.tn-anime .tn-avap.est-vu .tn-avap-ligne s { text-decoration-color: rgb(68 100 108 / .7); }

/* ─── responsive ─── */
@media (max-width: 1100px) {
  .tn-frise-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.6rem; }
  .tn-frise-piste { display: none; }
  .tn-equipe-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tn-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-parcours-etape::after { display: none; }
}
@media (max-width: 960px) {
  .tn-hero { min-height: 0; }
  .tn-hero-grille, .tn-une-grille, .tn-rub-grille, .tn-dette-carte, .tn-souffle-grille, .tn-faq-grille { grid-template-columns: minmax(0, 1fr); }
  .tn-scene { justify-self: center; width: 100%; max-width: 30rem; margin-bottom: 0; }
  .tn-fiches { position: relative; left: auto; right: auto; bottom: auto; margin: -4.5rem .75rem 0; }
  .tn-souffle-photo { aspect-ratio: 4 / 3; width: 100%; }
  .tn-faq-grille .tn-tete { text-align: center; margin-inline: auto; }
  .tn-faq-grille .tn-sous { margin-inline: auto; }
}
@media (max-width: 700px) {
  .tn-section { padding-block: 3.75rem; }
  .tn-hero { padding-block: 1.25rem 2.5rem; }
  .tn-hero .tn-kicker { display: none; }
  .tn-hero .tn-h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); margin-bottom: .9rem; }
  .tn-chapeau { font-size: 1rem; margin-bottom: 1.3rem; }
  .tn-boutons .btn-theme, .tn-boutons .btn-contour { font-size: 1rem; padding: .7rem 1.1rem; }
  .tn-reperes { margin-top: 1.6rem; padding-top: 1.1rem; }
  .tn-reperes dt { font-size: 1.7rem; }
  .tn-reperes dd { font-size: .8rem; }
  .tn-hero-grille { gap: 2rem; }
  .tn-point:not(.est-actif) .tn-point-etiquette { opacity: 0; transform: translateY(-50%) scale(.9); }
  .tn-home h2 { font-size: clamp(1.75rem, 7.4vw, 2.1rem); }
  .tn-une-ligne { grid-template-columns: 4.25rem minmax(0, 1fr); padding: .7rem; }
  .tn-num { display: none; }
  .tn-une-vignette { width: 4.25rem; height: 4.25rem; }
  .tn-fiche-lecture { grid-template-columns: minmax(0, 1fr); }
  .tn-fiche-lecture > div + div { border-left: 0; border-top: 1px solid var(--tn-bord); }
  .tn-souffle-carte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pacer" "chiffres" "etapes" "compte" "btn"; justify-items: stretch; }
  .tn-pacer { justify-self: center; }
  .tn-parcours, .tn-equipe-grille, .tn-frise-liste { grid-template-columns: minmax(0, 1fr); }
  .tn-frise-arret { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: auto; }
  .tn-frise-point { display: none; }
  .tn-frise-h { order: 0; padding-top: .9rem; }
  .tn-sources li { grid-template-columns: minmax(0, 1fr) auto; }
  .tn-source-articles { grid-column: 1 / -1; }
  .tn-avap-entete { display: none; }
  .tn-avap-ligne { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .tn-soir-carte { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .tn-soir-repere { border-right: 0; padding: 0 0 .8rem; border-bottom: 1px solid var(--tn-bord); }
  .tn-auteur { grid-template-columns: 4.5rem minmax(0, 1fr); text-align: left; justify-items: start; column-gap: 1rem; }
  .tn-auteur-photo { grid-row: span 5; width: 4.5rem; height: 4.5rem; margin: 0; }
  .tn-auteur-rubs { justify-content: flex-start; }
  .tn-auteur-n { margin-top: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-home *, .tn-home *::before, .tn-home *::after { animation: none !important; transition: none !important; }
  .tn-pacer-rond { transform: scale(.9); }
}