/* Tuning de la home blocalians.fr (16/10/2026) : la semaine du foyer, une grammaire unique de haut en bas.
   Couleurs : uniquement les variables de da.css (aucun hexadécimal ici). */

html:root { --tn-r: 1.5rem; --tn-r-petit: 1rem; --tn-air: clamp(4.5rem, 8vw, 7.5rem); --tn-largeur: 1184px; }

/* Lenis : CSS officiel (défilement doux sans saccade). */
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; }
/* GSAP : pas de transition CSS pendant l’entrée d’une fiche. */
.tn-entre { transition: none !important; }

/* Bandeau d’annonce masqué en mobile ; bouton du menu lisible (texte blanc porté par le lien lui-même). */
@media (max-width: 700px) { [data-bandeau], .announcement-bar { display: none !important; } }
header .mm-btn { color: var(--c-surface); }

main[data-bh-home].space-y-24 > :not(:last-child), main[data-bh-home] > * { margin-block: 0 !important; }
main[data-bh-home] { margin-bottom: 0 !important; }
:where(main[data-bh-home]) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.tn-une-corps, .tn-une-petite-corps, .tn-moment-corps, .tn-lecture, .tn-auteur-corps, .tn-rebours-corps, .tn-budget-resultat, .tn-chemin-etape { grid-template-columns: minmax(0, 1fr); }

.tn-wrap { width: 100%; max-width: var(--tn-largeur); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
.tn-section { padding-block: var(--tn-air); }
.tn-bande { background: var(--c-surface); border-block: 1px solid color-mix(in srgb, var(--c-bord) 55%, transparent); }
.tn-bande-douce { background: color-mix(in srgb, var(--c-doux) 55%, var(--c-fond)); }

/* --- Grammaire : kicker, titres, chapô, carte, étiquette, jauge, lien --- */
.tn-kicker {
  display: inline-flex; align-items: center; gap: .55rem; border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--c-primaire) 30%, transparent);
  background: color-mix(in srgb, var(--c-doux) 70%, var(--c-surface));
  color: var(--c-primaire-texte); padding: .3rem .9rem .3rem .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; line-height: 1.4;
}
.tn-kicker::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-primaire); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primaire) 18%, transparent); }
.tn-h1, .tn-h2, .tn-h3 { font-family: var(--f-titre); color: var(--c-texte); letter-spacing: -.025em; }
.tn-h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; font-weight: 800; margin-top: 1rem; max-width: 19ch; text-wrap: balance; }
.tn-h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 700; }
.tn-acc { font-style: normal; color: var(--c-primaire-texte); }
.tn-chapo { color: var(--c-texte-2); font-size: 1.075rem; line-height: 1.7; max-width: 44ch; }
.tn-texte { color: var(--c-texte-2); line-height: 1.65; }
.tn-mini { color: var(--c-texte-2); font-size: .875rem; line-height: 1.5; }
.tn-tete { display: grid; gap: 1.25rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .tn-tete { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .tn-tete > .tn-chapo { justify-self: end; } }
.tn-tete--seule { grid-template-columns: 1fr !important; }
.tn-carte {
  display: block; min-width: 0; background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-bord) 60%, transparent);
  border-radius: var(--tn-r); transition: box-shadow .3s, transform .3s, border-color .3s;
}
a.tn-carte:hover { box-shadow: var(--o-survol); border-color: color-mix(in srgb, var(--c-primaire) 30%, transparent); }
.tn-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--tn-r-petit); background: var(--c-doux); color: var(--c-primaire-texte); }
.tn-etiquette { display: inline-flex; align-items: center; border-radius: 9999px; background: var(--c-doux); color: var(--c-sur-doux); padding: .15rem .65rem; font-size: .78rem; font-weight: 700; line-height: 1.45; width: fit-content; max-width: 100%; }
.tn-etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; }
.tn-etiquettes li { border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--c-bord) 80%, transparent); padding: .1rem .65rem; font-size: .8rem; color: var(--c-texte-2); }
.tn-fiche-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .85rem; color: var(--c-texte-2); }
.tn-fiche-pied { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: var(--c-texte-2); }
.tn-jauge { display: block; height: .5rem; border-radius: 9999px; background: var(--c-fond-2); overflow: hidden; }
.tn-jauge-v { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--c-primaire); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tn-js .tn-jauge-v { transform: scaleX(0); }
.tn-js .est-vu .tn-jauge-v { transform: scaleX(1); }
.tn-lien { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; color: var(--c-primaire-texte); }
.tn-lien svg { transition: transform .25s; }
.tn-lien:hover svg { transform: translateX(4px); }
.tn-liens { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.tn-centre { display: flex; justify-content: center; margin-top: 2.5rem; }
.tn-btn { white-space: nowrap; }

/* --- Hero : la semaine du foyer (copie à gauche, photo 4/5 + semainier à droite) --- */
.tn-hero { position: relative; overflow: hidden; background: var(--c-fond); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding-block: clamp(1.5rem, 3.5vh, 2.75rem); }
.tn-hero-grille { position: relative; display: grid; gap: 2.25rem 3rem; align-items: center; }
.tn-hero-grille > * { min-width: 0; }
@media (min-width: 1024px) { .tn-hero-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tn-h1 { font-family: 'Bricolage Grotesque', var(--f-titre); font-weight: 800; font-size: clamp(2.5rem, 4.5vw, 4.1rem); line-height: 1.02; margin-top: 1.1rem; letter-spacing: -.035em; color: var(--c-texte); }
.tn-h1 .tn-acc { position: relative; white-space: nowrap; }
.tn-h1 .tn-acc::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; border-radius: 9999px; background: var(--c-primaire); transform-origin: left; }
.tn-js .tn-h1 .tn-acc::after { transform: scaleX(0); animation: tn-trait .9s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes tn-trait { to { transform: scaleX(1); } }
.tn-hero-chapo { margin-top: 1.25rem; color: var(--c-texte-2); font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.65; max-width: 44ch; }
.tn-hero-btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.tn-reperes { display: grid; grid-template-columns: repeat(3, max-content); margin-top: 2rem; border-top: 1px solid var(--c-bord); padding-top: 1.1rem; }
.tn-reperes li { padding-right: 1.75rem; }
.tn-reperes li + li { padding-left: 1.75rem; border-left: 1px solid var(--c-bord); }
.tn-reperes strong { display: block; font-family: var(--f-titre); font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--c-texte); }
.tn-reperes span { display: block; font-size: .85rem; line-height: 1.35; color: var(--c-texte-2); margin-top: .15rem; }

.tn-scene { position: relative; isolation: isolate; }
.tn-scene::before { content: ""; position: absolute; z-index: -1; inset: 9% -1.5rem 9% 30%; border-radius: 2rem; background: color-mix(in srgb, var(--c-doux) 75%, var(--c-fond)); }
.tn-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--tn-r); overflow: hidden; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-ombre) 45%, transparent); background: var(--c-doux); }
.tn-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .tn-scene { min-height: min(calc(100svh - var(--header-h) - 4.5rem), 36rem); display: flex; align-items: center; }
  .tn-photo { width: min(78%, calc((100svh - var(--header-h) - 4.5rem) * .8), 28.8rem); }
  .tn-semainier { position: absolute; right: -1.5rem; top: 0; bottom: 0; margin-block: auto; height: fit-content; width: 17.75rem; }
}
.tn-pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 2; }
.tn-pin-point { position: absolute; left: -.75rem; top: -.75rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-surface); border: 5px solid var(--c-primaire-texte); }
.tn-pin.est-actif .tn-pin-point { animation: tn-pouls 1.6s ease-out infinite; }
@keyframes tn-pouls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-surface) 85%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.tn-pin-label {
  position: absolute; width: max-content; max-width: 11rem; padding: .45rem .75rem; border-radius: .75rem;
  background: var(--c-surface); color: var(--c-texte); font-size: .82rem; font-weight: 700; line-height: 1.3;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--c-ombre) 55%, transparent); transition: opacity .35s, transform .35s;
}
.tn-pin--haut .tn-pin-label { bottom: 1.25rem; left: 50%; transform: translateX(-50%); }
.tn-pin--bas .tn-pin-label { top: 1.25rem; left: 50%; transform: translateX(-50%); }
.tn-pin--gauche .tn-pin-label { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.tn-js .tn-pin:not(.est-actif) .tn-pin-label { opacity: 0; pointer-events: none; }
.tn-js .tn-pin--haut:not(.est-actif) .tn-pin-label { transform: translate(-50%, 6px); }
.tn-js .tn-pin--bas:not(.est-actif) .tn-pin-label { transform: translate(-50%, -6px); }
.tn-js .tn-pin--gauche:not(.est-actif) .tn-pin-label { transform: translate(6px, -50%); }

.tn-semainier { background: var(--c-surface); border-radius: var(--tn-r); border: 1px solid color-mix(in srgb, var(--c-bord) 60%, transparent); box-shadow: 0 28px 60px -28px color-mix(in srgb, var(--c-ombre) 45%, transparent); padding: .9rem; z-index: 3; }
.tn-semainier-tete { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primaire-texte); padding: .15rem .3rem .6rem; }
.tn-semainier ol { display: grid; gap: .15rem; }
.tn-soir a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1.25rem; align-items: center; gap: .6rem; padding: .45rem .45rem; border-radius: .85rem; min-height: 44px; transition: background .3s; }
.tn-soir-j { display: inline-flex; align-items: center; justify-content: center; height: 2.2rem; border-radius: .65rem; background: var(--c-fond-2); font-family: var(--f-titre); font-weight: 800; font-size: .82rem; color: var(--c-texte); transition: background .3s, color .3s; }
.tn-soir-t { font-size: .8rem; line-height: 1.3; color: var(--c-texte-2); }
.tn-soir-t b { display: block; color: var(--c-texte); font-size: .88rem; }
.tn-soir-ok { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--c-bord); color: transparent; transition: all .3s; }
.tn-soir.est-fait .tn-soir-ok, .tn-soir.est-actif .tn-soir-ok { background: var(--c-primaire-texte); border-color: var(--c-primaire-texte); color: var(--c-surface); }
.tn-soir.est-actif a { background: color-mix(in srgb, var(--c-doux) 75%, var(--c-surface)); }
.tn-soir.est-actif .tn-soir-j { background: var(--c-primaire-texte); color: var(--c-surface); }
.tn-soir a:hover { background: color-mix(in srgb, var(--c-doux) 55%, var(--c-surface)); }
.tn-semainier-pied { white-space: nowrap; margin-top: .5rem; padding: .65rem .35rem 0; border-top: 1px solid var(--c-fond-2); font-size: .82rem; color: var(--c-texte-2); }
.tn-semainier-pied strong { font-family: var(--f-titre); font-size: 1rem; color: var(--c-primaire-texte); }
@media (max-width: 1023px) {
  .tn-hero { min-height: 0; padding-top: 1.25rem; padding-bottom: 3rem; }
  .tn-scene { display: grid; gap: 1rem; max-width: 32rem; }
  .tn-scene::before { inset: 20% -1.25rem -1.5rem; }
  .tn-photo { width: 100%; }
}

/* --- Rubriques : trois fiches sommaire --- */
.tn-tiroirs-grille { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .tn-tiroirs-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tn-tiroir { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; background: var(--c-fond); }
.tn-tiroir-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.tn-tiroir-pct { font-family: var(--f-titre); font-size: 1.8rem; font-weight: 800; color: var(--c-primaire-texte); }
.tn-sommaire { display: grid; border-top: 1px solid var(--c-bord); }
.tn-sommaire a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--c-bord) 60%, transparent); min-height: 44px; font-weight: 600; color: var(--c-texte); line-height: 1.35; }
.tn-sommaire a:hover span { color: var(--c-primaire-texte); }
.tn-sommaire small { flex: none; color: var(--c-texte-2); font-weight: 500; font-size: .8rem; padding-top: .1rem; }
.tn-tiroir .tn-lien { margin-top: auto; }

/* --- À la une --- */
.tn-une-grille { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .tn-une-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.tn-une-grande { overflow: hidden; display: flex; flex-direction: column; }
.tn-une-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.tn-une-img img, .tn-une-vignette img, .tn-moment-img img, .tn-auteur-photo img, .tn-rebours-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
a:hover > .tn-une-img img, a:hover .tn-une-vignette img, a:hover .tn-moment-img img, a:hover .tn-auteur-photo img, .tn-rebours-photo:hover img { transform: scale(1.04); }
.tn-une-corps { display: grid; gap: .75rem; padding: 1.6rem 1.75rem 1.75rem; }
.tn-une-titre { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; font-weight: 800; }
.tn-une-liste { display: grid; gap: 1rem; align-content: start; }
.tn-une-petite { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; padding: .9rem; align-items: center; }
.tn-une-vignette { display: block; aspect-ratio: 1; border-radius: var(--tn-r-petit); overflow: hidden; }
.tn-une-petite-corps { display: grid; gap: .45rem; }
.tn-une-petite-titre { font-family: var(--f-titre); font-weight: 700; font-size: 1.12rem; line-height: 1.25; color: var(--c-texte); }
.tn-une-tous { padding-left: .5rem; }

/* --- Dimanche soir : parcours en 4 gestes --- */
.tn-dimanche-grille { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .tn-dimanche-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.tn-dimanche-photos { position: relative; aspect-ratio: 4 / 3; border-radius: var(--tn-r); overflow: hidden; background: var(--c-doux); }
@media (min-width: 960px) { .tn-dimanche-photos { position: sticky; top: calc(var(--header-h) + 2rem); } }
.tn-dimanche-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s; }
.tn-dimanche-photos img.est-actif { opacity: 1; }
.tn-dimanche-compteur { position: absolute; left: 1rem; bottom: 1rem; background: var(--c-surface); border-radius: 9999px; padding: .3rem .85rem; font-family: var(--f-titre); font-weight: 800; color: var(--c-texte); }
.tn-gestes { display: grid; gap: .75rem; }
.tn-geste { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 1.3rem 1.4rem; border-radius: var(--tn-r); background: color-mix(in srgb, var(--c-surface) 55%, transparent); border: 1px solid transparent; transition: background .35s, border-color .35s, box-shadow .35s; cursor: pointer; overflow: hidden; }
.tn-geste.est-actif { background: var(--c-surface); border-color: color-mix(in srgb, var(--c-bord) 60%, transparent); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--c-ombre) 45%, transparent); }
.tn-geste-num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--c-primaire); font-family: var(--f-titre); font-weight: 800; color: var(--c-primaire-texte); }
.tn-geste.est-actif .tn-geste-num { background: var(--c-primaire-texte); border-color: var(--c-primaire-texte); color: var(--c-surface); }
.tn-geste-titre { font-family: var(--f-titre); font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--c-texte); padding-top: .35rem; }
.tn-geste-chiffre { margin: .35rem 0 .25rem; color: var(--c-texte-2); font-size: .95rem; }
.tn-geste-chiffre strong { font-family: var(--f-titre); font-size: 1.6rem; font-weight: 800; color: var(--c-primaire-texte); margin-right: .2rem; }
.tn-js .tn-geste:not(.est-actif) .tn-geste-corps > .tn-texte, .tn-js .tn-geste:not(.est-actif) .tn-geste-corps > .tn-lien { display: none; }
.tn-geste-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.tn-geste-barre span { display: block; height: 100%; width: 100%; background: var(--c-primaire); transform: scaleX(0); transform-origin: left; }
.tn-geste.est-actif.est-chrono .tn-geste-barre span { animation: tn-chrono var(--tn-duree, 6s) linear forwards; }
@keyframes tn-chrono { to { transform: scaleX(1); } }

/* --- Budget --- */
.tn-budget-fiche { display: grid; gap: 2rem; padding: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .tn-budget-fiche { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; } }
.tn-budget-champs { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 560px) { .tn-budget-champs { grid-template-columns: 1fr 1fr; } .tn-budget-large { grid-column: 1 / -1; } }
.tn-budget-champs label { display: grid; gap: .35rem; font-weight: 700; font-size: .9rem; color: var(--c-texte); }
.tn-budget-champs label span { font-weight: 500; color: var(--c-texte-2); font-size: .8rem; }
.tn-champ { width: 100%; min-height: 50px; border-radius: var(--tn-r-petit); border: 1px solid var(--c-bord); background: var(--c-fond); padding: .6rem 1rem; color: var(--c-texte); font-size: 1.05rem; font-weight: 600; }
.tn-champ:focus { outline: 2px solid var(--c-primaire); outline-offset: 1px; background: var(--c-surface); }
.tn-budget-resultat { display: grid; gap: 1rem; align-content: start; background: var(--c-fond); border-radius: var(--tn-r); padding: 1.5rem; }
.tn-budget-jour output { font-family: var(--f-titre); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; color: var(--c-primaire-texte); letter-spacing: -.03em; }
.tn-budget-barre { display: flex; height: 1rem; border-radius: 9999px; overflow: hidden; background: var(--c-fond-2); gap: 3px; }
.tn-budget-barre span { flex: 0 0 var(--p); transition: flex-basis .6s cubic-bezier(.2,.7,.2,1); }
.tn-b-logement { background: var(--c-texte); }
.tn-b-charges { background: var(--c-texte-2); }
.tn-b-reste { background: var(--c-primaire); }
.tn-budget-legende { display: grid; gap: .4rem; }
.tn-budget-legende li { display: grid; grid-template-columns: .8rem 1fr auto; gap: .6rem; align-items: center; font-size: .92rem; color: var(--c-texte-2); }
.tn-budget-legende i { width: .8rem; height: .8rem; border-radius: 3px; }
.tn-budget-legende output { font-weight: 800; color: var(--c-texte); }
.tn-budget-resultat .tn-texte output { font-weight: 800; color: var(--c-texte); }

/* --- Âges --- */
.tn-ages-fiche { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .tn-ages-fiche { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .tn-ages-fiche > .tn-lien { grid-column: 1 / -1; } }
.tn-ages-regle { display: grid; gap: 1rem; }
.tn-ages-regle label strong { display: block; font-family: var(--f-titre); font-size: 2.6rem; line-height: 1.1; font-weight: 800; color: var(--c-primaire-texte); }
.tn-ages-regle input[type="range"] { width: 100%; accent-color: var(--c-primaire-texte); height: 2.75rem; cursor: pointer; }
.tn-ages-crans { display: grid; grid-template-columns: repeat(4, 1fr); font-size: .8rem; color: var(--c-texte-2); }
.tn-ages-crans li:nth-child(2) { text-align: center; padding-right: 15%; }
.tn-ages-crans li:nth-child(3) { text-align: center; padding-left: 15%; }
.tn-ages-crans li:last-child { text-align: right; }
.tn-ages-panneaux { display: grid; gap: 1.5rem; }
.tn-ages-panneau ul { display: grid; gap: .75rem; margin-top: .9rem; }
.tn-ages-panneau li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .75rem; border-radius: var(--tn-r-petit); background: var(--c-fond); color: var(--c-texte); font-weight: 600; line-height: 1.4; }
.tn-js .tn-ages-panneau:not(.est-actif) { display: none; }
.tn-js .tn-ages-panneau .tn-h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tn-js .tn-ages-panneau.est-actif li { animation: tn-monte .45s both; }
.tn-js .tn-ages-panneau.est-actif li:nth-child(2) { animation-delay: .07s; }
.tn-js .tn-ages-panneau.est-actif li:nth-child(3) { animation-delay: .14s; }
@keyframes tn-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Grands moments --- */
.tn-rebours { display: grid; overflow: hidden; }
@media (min-width: 900px) { .tn-rebours { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.tn-rebours-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
@media (min-width: 900px) { .tn-rebours-photo { aspect-ratio: auto; min-height: 100%; max-height: 30rem; } }
.tn-rebours-corps { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.tn-rebours-frise { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.tn-rebours-frise::before { content: ""; position: absolute; left: 10%; right: 10%; top: 1.35rem; height: 2px; background: var(--c-fond-2); }
.tn-rebours-frise button { position: relative; display: grid; justify-items: center; gap: .45rem; width: 100%; min-height: 44px; background: none; border: 0; cursor: pointer; text-align: center; padding: 0; }
.tn-rebours-j { display: inline-flex; align-items: center; justify-content: center; min-width: 2.7rem; height: 2.7rem; padding: 0 .4rem; border-radius: 9999px; background: var(--c-surface); border: 2px solid var(--c-bord); font-family: var(--f-titre); font-weight: 800; font-size: .85rem; color: var(--c-texte); transition: all .3s; }
.tn-rebours-quand { font-size: .78rem; line-height: 1.25; color: var(--c-texte-2); }
.tn-rebours-frise li.est-fait .tn-rebours-j { border-color: var(--c-primaire); color: var(--c-primaire-texte); }
.tn-rebours-frise li.est-actif .tn-rebours-j { background: var(--c-primaire-texte); border-color: var(--c-primaire-texte); color: var(--c-surface); transform: scale(1.08); }
.tn-rebours-details { display: grid; gap: 1rem; }
.tn-rebours-detail { padding: 1.1rem 1.2rem; border-radius: var(--tn-r-petit); background: var(--c-fond); }
.tn-rebours-quoi { font-family: var(--f-titre); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--c-texte); margin-bottom: .35rem; }
.tn-rebours-quoi span { display: block; font-family: var(--f-texte); font-size: .8rem; font-weight: 700; color: var(--c-primaire-texte); letter-spacing: .03em; }
.tn-js .tn-rebours-detail:not(.est-actif) { display: none; }
.tn-moments-grille { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 900px) { .tn-moments-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tn-moment { overflow: hidden; display: flex; flex-direction: column; }
.tn-moment-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.tn-moment-corps { display: grid; gap: .8rem; padding: 1.4rem 1.5rem 1.5rem; flex: 1; align-content: start; }
.tn-moment-titre { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--c-texte); }
.tn-moment-barre { display: grid; gap: .35rem; }
.tn-moment-l { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--c-texte-2); }
.tn-moment-l strong { color: var(--c-texte); font-weight: 800; white-space: nowrap; }
.tn-moment-article { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-weight: 700; color: var(--c-primaire-texte); line-height: 1.35; }

/* --- Vrai ou faux --- */
.tn-quiz-grille { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .tn-quiz-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.tn-quiz-fiche { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.25rem; background: var(--c-fond); }
.tn-quiz-haut { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.tn-quiz-score { font-weight: 800; color: var(--c-primaire-texte); }
.tn-quiz-progres { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.tn-quiz-progres span { height: .35rem; border-radius: 9999px; background: var(--c-fond-2); transition: background .3s; }
.tn-quiz-progres span.est-bon { background: var(--c-primaire); }
.tn-quiz-progres span.est-faux { background: var(--c-texte-2); }
.tn-quiz-progres span.est-actif { background: color-mix(in srgb, var(--c-primaire) 40%, var(--c-fond-2)); }
.tn-question { display: grid; gap: 1rem; }
.tn-question + .tn-question { border-top: 1px solid var(--c-fond-2); padding-top: 1.25rem; }
.tn-js .tn-question + .tn-question { border: 0; padding: 0; }
.tn-question-texte { font-family: var(--f-titre); font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 700; line-height: 1.25; color: var(--c-texte); }
.tn-quiz-choix { display: flex; flex-wrap: wrap; gap: .75rem; }
.tn-quiz-choix button, .tn-quiz-suite { min-height: 48px; padding: .6rem 1.6rem; border-radius: 9999px; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.tn-quiz-choix button { background: var(--c-surface); border: 2px solid var(--c-primaire-texte); color: var(--c-primaire-texte); }
.tn-quiz-choix button:hover { transform: scale(1.04); }
.tn-quiz-choix button.est-choisi { background: var(--c-primaire-texte); color: var(--c-surface); }
.tn-quiz-choix button:disabled { cursor: default; }
.tn-quiz-suite { display: inline-flex; align-items: center; gap: .5rem; width: max-content; background: var(--c-primaire-texte); color: var(--c-surface); border: 0; }
.tn-quiz-suite[hidden], .tn-quiz-choix[hidden] { display: none; }
.tn-question-reponse { color: var(--c-texte-2); line-height: 1.65; padding: 1rem 1.1rem; border-radius: var(--tn-r-petit); background: var(--c-surface); border-left: 4px solid var(--c-primaire); }
.tn-question-reponse b { color: var(--c-texte); }
.tn-js .tn-question:not(.est-actif) { display: none; }
.tn-js .tn-question:not(.est-repondu) .tn-question-reponse { display: none; }
.tn-quiz-lectures { display: grid; gap: .9rem; }
.tn-lecture { display: grid; gap: .5rem; padding: 1.2rem 1.3rem; }
.tn-lecture-titre { font-family: var(--f-titre); font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--c-texte); }

/* --- Équipe --- */
.tn-equipe-grille { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .tn-equipe-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tn-auteur { overflow: hidden; display: flex; flex-direction: column; }
.tn-auteur-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-doux); }
.tn-auteur-corps { display: grid; gap: .55rem; padding: 1.2rem 1.25rem 1.4rem; align-content: start; }
.tn-auteur-nom { font-family: var(--f-titre); font-size: 1.2rem; font-weight: 800; color: var(--c-texte); }
@media (max-width: 559px) { .tn-equipe-grille { gap: .75rem; } .tn-auteur-corps { padding: .9rem; } }

/* --- Méthode et sources --- */
.tn-chemin { position: relative; display: grid; gap: 1rem; counter-reset: c; }
@media (min-width: 900px) { .tn-chemin { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tn-chemin-etape { position: relative; display: grid; gap: .8rem; align-content: start; padding: 1.5rem; }
.tn-chemin-num { position: absolute; right: 1.25rem; top: 1.1rem; font-family: var(--f-titre); font-weight: 800; font-size: 1.6rem; color: color-mix(in srgb, var(--c-primaire) 35%, var(--c-surface)); }
.tn-chemin-titre { font-family: var(--f-titre); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--c-texte); }
@media (min-width: 900px) {
  .tn-chemin-etape:not(:last-child)::after { content: ""; position: absolute; right: -1rem; top: 2.5rem; width: 1rem; height: 2px; background: var(--c-primaire); }
}
.tn-js .tn-chemin-etape { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.tn-js .est-vu .tn-chemin-etape { opacity: 1; transform: none; }
.tn-js .est-vu .tn-chemin-etape:nth-child(2) { transition-delay: .12s; }
.tn-js .est-vu .tn-chemin-etape:nth-child(3) { transition-delay: .24s; }
.tn-js .est-vu .tn-chemin-etape:nth-child(4) { transition-delay: .36s; }
.tn-acteurs { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid color-mix(in srgb, var(--c-bord) 70%, transparent); }
.tn-acteurs ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; flex: 1; }
.tn-acteurs img { height: 2.1rem; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.tn-acteurs img:hover { filter: none; opacity: 1; }

/* --- FAQ --- */
.tn-faq-grille { display: grid; gap: 1rem 4rem; }
@media (min-width: 960px) { .tn-faq-grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .tn-faq-grille .tn-tete { position: sticky; top: calc(var(--header-h) + 2rem); } }
.tn-faq-liste { display: grid; gap: .75rem; }
.tn-faq-item { padding: 0 1.4rem; }
.tn-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; padding: 1rem 0; cursor: pointer; list-style: none; font-family: var(--f-titre); font-weight: 700; font-size: 1.1rem; line-height: 1.35; color: var(--c-texte); }
.tn-faq-item summary::-webkit-details-marker { display: none; }
.tn-faq-plus { position: relative; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--c-doux); }
.tn-faq-plus::before, .tn-faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; background: var(--c-primaire-texte); transform: translate(-50%, -50%); transition: transform .25s; }
.tn-faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.tn-faq-item[open] .tn-faq-plus::after { transform: translate(-50%, -50%) rotate(0); }
.tn-faq-item[open] { box-shadow: var(--o-survol); }
.tn-faq-item > .tn-texte { padding-bottom: .5rem; }
.tn-faq-item > .tn-lien { margin-bottom: .9rem; }

/* --- Appel final --- */
.tn-appel { padding-top: 0; }
.tn-appel-fiche { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem); border-radius: 2rem; background: color-mix(in srgb, var(--c-doux) 70%, var(--c-fond)); }
.tn-appel-fiche .tn-h2 { max-width: 22ch; margin-inline: auto; }
.tn-appel-fiche .tn-hero-btns { margin-top: 1rem; }

/* --- Mobile --- */
@media (max-width: 700px) {
  .tn-h1 { font-size: clamp(2.3rem, 10.4vw, 2.8rem); margin-top: .9rem; }
  .tn-hero-chapo { margin-top: 1rem; font-size: 1rem; }
  .tn-hero-btns { margin-top: 1.4rem; gap: .65rem; }
  .tn-reperes { margin-top: 1.6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tn-reperes li { padding-right: .75rem; }
  .tn-reperes li + li { padding-left: .9rem; }
  .tn-reperes strong { font-size: 1.7rem; }
  .tn-tete { margin-bottom: 2rem; }
  .tn-une-petite { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .tn-rebours-quand { display: none; }
  .tn-rebours-frise::before { top: 1.35rem; }
  .tn-pin-label { max-width: 11rem; font-size: .78rem; }
}

/* --- Sans mouvement : rendu statique complet --- */
@media (prefers-reduced-motion: reduce) {
  .tn-semaine *, .tn-dimanche *, .tn-ages *, .tn-moments *, .tn-tiroirs *, .tn-sources *, .tn-equipe *, .tn-une * { animation: none !important; transition: none !important; }
  .tn-js .tn-jauge-v { transform: none; }
  .tn-js .tn-chemin-etape { opacity: 1; transform: none; }
  .tn-js .tn-h1 .tn-acc::after { animation: none; transform: none; }
}