/* Home Pmeconseil, tuning du 22/10/2026 (passe 4) : « la revue du lundi ».
   Une grammaire : pastille, H2 centré à fin accentuée, une seule colonne de 1200 px pour chaque section, fiche blanche à en-tête pointé.
   Couleurs : uniquement l'échelle --color-accent-*, --color-warning-*, --color-success-* de global.css et #fff. */

@font-face {
  font-family: "Geist";
  src: url(/fonts/GeistVF.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
html:root {
  /* défilement programmatique instantané (le défilement doux des ancres passe par tuning.js) */
  scroll-behavior: auto;
  --f-texte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* bandeau d'annonce masqué en mobile : le H1 et la scène doivent tenir au premier écran */
@media (max-width: 700px) { [data-bandeau], .announcement-bar { display: none !important; } }

.tn-home {
  --tn-titre: "Bricolage Grotesque Variable", "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --tn-encre: var(--color-accent-950);
  --tn-encre-2: color-mix(in oklab, var(--color-accent-950) 76%, #fff);
  --tn-bord: var(--color-accent-100);
  --tn-teinte: var(--color-accent-50);
  --tn-ambre: var(--color-warning-800);
  --tn-ambre-fond: var(--color-warning-50);
  --tn-vert: var(--color-success-800);
  --tn-vert-fond: var(--color-success-50);
  --tn-ombre: 0 1px 2px color-mix(in oklab, var(--color-accent-950) 6%, transparent), 0 22px 44px -30px color-mix(in oklab, var(--color-accent-950) 45%, transparent);
  --tn-r: 14px;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  color: var(--tn-encre);
  font-size: 1rem;
  line-height: 1.6;
}
.tn-home :where(*, *::before, *::after) { box-sizing: border-box; }
.tn-home :where(img) { display: block; max-width: 100%; }
.tn-home :where(p, h1, h2, h3, ol, ul, dl, dd, figure, table) { margin: 0; }
.tn-home :where(ol, ul) { padding: 0; list-style: none; }
.tn-home :where(a) { color: inherit; }
.tn-home :where(svg) { flex: none; }
.tn-home :where(button) { font: inherit; }

/* ===== grammaire commune ===== */
.tn-in { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
@media (min-width: 1024px) { .tn-in { width: min(100% - 4rem, 1200px); } }
.tn-sec { padding-block: clamp(4.5rem, 9vw, 7rem); scroll-margin-top: 60px; }
.tn-sec--teinte { background: var(--tn-teinte); border-block: 1px solid var(--tn-bord); }
.tn-tete { max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 3.25rem); text-align: center; }
.tn-kicker {
  display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .9rem .38rem .7rem;
  border: 1px solid var(--color-accent-200); border-radius: 999px; background: #fff;
  color: var(--color-accent-700); font-size: .78rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
}
.tn-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-600); box-shadow: 0 0 0 3px var(--color-accent-100); }
.tn-h1, .tn-h2, .tn-h3 { font-family: var(--tn-titre); color: var(--tn-encre); text-wrap: balance; }
.tn-h2 { margin-top: 1.1rem; font-size: clamp(2rem, 1.25rem + 2.6vw, 3.05rem); line-height: 1.06; letter-spacing: -.028em; font-weight: 700; }
.tn-h1 em, .tn-h2 em {
  font-style: normal; color: var(--color-accent-600);
  background: linear-gradient(transparent 62%, var(--color-accent-100) 62%, var(--color-accent-100) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .04em;
}
.tn-h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; }
.tn-h3 a { text-decoration: none; }
.tn-h3 a:hover { color: var(--color-accent-600); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
.tn-chapo { margin: 1.1rem auto 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.6; color: var(--tn-encre-2); text-wrap: pretty; }
.tn-centre { text-align: center; margin-top: 2.5rem; }

/* la fiche : carte blanche, en-tête pointé, la même partout */
.tn-fiche { background: #fff; border: 1px solid var(--tn-bord); border-radius: var(--tn-r); box-shadow: var(--tn-ombre); overflow: hidden; font-variant-numeric: tabular-nums; }
.tn-fiche-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.25rem; padding: .8rem 1.4rem; border-bottom: 1px solid var(--tn-bord); background: color-mix(in oklab, var(--tn-teinte) 55%, #fff); }
.tn-fiche-titre { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--tn-titre); font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; color: var(--tn-encre); }
.tn-fiche-meta { font-size: .84rem; color: var(--tn-encre-2); }
.tn-piece .tn-fiche-meta { white-space: nowrap; }
.tn-fiche-meta a { color: var(--color-accent-700); font-weight: 600; text-underline-offset: .18em; }
.tn-fiche-meta a:hover { color: var(--color-accent-600); }
.tn-point { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-success-800); box-shadow: 0 0 0 3px var(--color-success-200); }
/* photos de fiche : le cadre est fixe, la photo le remplit (recadrage « cover ») — la hauteur ne suit jamais
   l'image, sinon une fiche change de taille selon le fichier servi. 25/10/2026 : la home était retombée à une
   seule photo (socle home-photos : 5 minimum). */
.tn-piece-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--tn-bord); background: var(--tn-teinte); }
.tn-bandeau-photo { width: 100%; height: clamp(150px, 22vw, 280px); object-fit: cover; border-bottom: 1px solid var(--tn-bord); background: var(--tn-teinte); }

.tn-etiquette {
  display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 999px; min-height: 30px;
  background: #fff; border: 1px solid var(--tn-bord); color: var(--color-accent-700) !important;
  font-size: .8rem; font-weight: 600; text-decoration: none; line-height: 1.4;
}
.tn-etiquette:hover { background: var(--color-accent-100); }
.tn-lien { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--color-accent-600) !important; font-weight: 650; text-decoration: none; }
.tn-lien svg { transition: transform .2s ease; }
.tn-lien:hover { text-decoration: underline; text-underline-offset: .2em; }
.tn-lien:hover svg { transform: translateX(3px); }
.tn-signe { font-size: .88rem; color: var(--tn-encre-2); }
.tn-signe b { color: var(--tn-encre); }

/* boutons : la classe et la forme du bouton du menu (hp-btn), en plein et en contour */
.tn-home .hp-btn.tn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 0 1.4rem;
  background: var(--color-accent-600); border: 2px solid var(--color-accent-600); border-radius: .5rem; cursor: pointer;
  font-weight: 650; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: background .2s ease;
}
.tn-home .hp-btn.tn-btn:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.tn-home .hp-btn.tn-btn--contour { background: #fff; color: var(--color-accent-600) !important; }
.tn-home .hp-btn.tn-btn--contour:hover { background: var(--tn-teinte); color: var(--color-accent-700) !important; }
.tn-boutons { display: flex; flex-wrap: wrap; gap: .8rem; }
.tn-boutons--centre { justify-content: center; margin-top: 2.5rem; }

/* ===== hero : la revue du lundi ===== */
.tn-hero { position: relative; background: linear-gradient(180deg, #fff 0%, #fff 45%, var(--tn-teinte) 100%); padding-block: 1.25rem clamp(3rem, 6vw, 4.5rem); }
.tn-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "chapo" "cta" "cta2" "scene" "index"; }
.tn-hero-titre { grid-area: titre; min-width: 0; }
.tn-hero-chapo { grid-area: chapo; min-width: 0; margin-top: .85rem; font-size: clamp(1.02rem, 1rem + .2vw, 1.14rem); line-height: 1.55; color: var(--tn-encre-2); text-wrap: pretty; }
.tn-hero-cta { grid-area: cta; margin-top: 1rem; justify-self: start; }
.tn-hero-cta2 { grid-area: cta2; margin-top: .6rem; justify-self: start; }
.tn-hero-index { grid-area: index; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; font-size: .9rem; color: var(--tn-encre-2); }
.tn-hero-index span { display: inline-flex; align-items: baseline; gap: .3rem; padding: .25rem .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--tn-bord); }
.tn-hero-index b { font-family: var(--tn-titre); font-size: 1.02rem; color: var(--tn-encre); }
.tn-h1 {
  margin-top: .8rem; font-family: "Bricolage Grotesque Variable", "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.35rem, 1.2rem + 4vw, 4.2rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 720;
}

.tn-revue { grid-area: scene; display: grid; margin-top: 1.4rem; border-radius: 18px; box-shadow: 0 2px 4px color-mix(in oklab, var(--color-accent-950) 6%, transparent), 0 40px 80px -48px color-mix(in oklab, var(--color-accent-950) 60%, transparent); }
/* photo 3/2 entière en bureau, carrée en mobile : le cadre des repères suit exactement le recadrage « cover » */
.tn-rv-photo { --ox: .06; position: relative; aspect-ratio: 1 / 1; overflow: hidden; container-type: size; background: var(--color-accent-100); }
.tn-rv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--ox) * 100%) 50%; }
.tn-rv-cadre {
  --W: max(100cqw, 150cqh);
  position: absolute; width: var(--W); height: calc(var(--W) / 1.5);
  left: calc((100cqw - var(--W)) * var(--ox)); top: calc((100cqh - var(--W) / 1.5) / 2); pointer-events: none;
}
.tn-pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: var(--color-accent-600); color: #fff; border: 3px solid #fff; font-weight: 700; font-size: .9rem; line-height: 1;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--color-accent-950) 45%, transparent); transition: background .25s ease, transform .25s ease;
}
.tn-pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.tn-pin.tn-actif { background: var(--tn-ambre); transform: translate(-50%, -50%) scale(1.12); }
.tn-pin.tn-actif::after { animation: tn-onde 1.6s ease-out infinite; }
.tn-pin:focus-visible { outline: 3px solid var(--color-accent-950); outline-offset: 3px; }
@keyframes tn-onde { 0% { transform: scale(.8); opacity: .95; } 100% { transform: scale(1.5); opacity: 0; } }

.tn-rv-panneau { display: flex; flex-direction: column; min-width: 0; }
.tn-rv-panneau .tn-fiche-tete { border-radius: 0; padding: .8rem 1.5rem; }
.tn-rv-etape { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-accent-700); line-height: 1.3; }
.tn-rv-constat { display: grid; gap: .45rem; padding: .95rem 1.5rem .85rem; }
.tn-rv-calc { display: grid; gap: .05rem; }
.tn-rv-calc li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .36rem .6rem; border-radius: 8px; font-size: .97rem; color: var(--tn-encre-2); transition: background .25s ease, color .25s ease; }
.tn-rv-calc li span { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.tn-rv-calc li span i { flex: none; display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--tn-teinte); color: var(--color-accent-700); font-style: normal; font-size: .7rem; font-weight: 700; transition: background .25s ease, color .25s ease; }
.tn-rv-calc li b { color: var(--tn-encre); font-weight: 650; white-space: nowrap; }
.tn-rv-calc li.tn-actif { background: var(--tn-ambre-fond); color: var(--tn-encre); }
.tn-rv-calc li.tn-actif span i { background: var(--tn-ambre); color: #fff; }
.tn-rv-calc .tn-rv-total { margin-top: .3rem; padding-block: .55rem .4rem; border-top: 2px solid var(--tn-encre); border-radius: 0 0 8px 8px; color: var(--tn-encre); font-weight: 650; }
.tn-rv-total b { font-family: var(--tn-titre); font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; color: var(--color-accent-600) !important; display: inline-block; transform-origin: right center; }

.tn-rv-suite { border-top: 1px solid var(--tn-bord); }
.tn-rv-suite li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .78rem 1.5rem; border-bottom: 1px solid var(--tn-bord); transition: background .3s ease; }
.tn-rv-res { font-size: .97rem; color: var(--tn-encre); line-height: 1.35; }
.tn-rv-res b { font-family: var(--tn-titre); font-size: 1.15rem; letter-spacing: -.01em; white-space: nowrap; }
.tn-rv-suite li[data-etape="2"] .tn-rv-res b { color: var(--tn-ambre); }
.tn-rv-suite li[data-etape="3"] .tn-rv-res b { color: var(--tn-vert); }
.tn-rv-suite li.tn-on { background: color-mix(in oklab, var(--tn-teinte) 80%, #fff); }
.tn-rv-mini { display: flex; align-items: flex-end; gap: 2px; width: 76px; height: 28px; }
.tn-rv-mini i { flex: 1; height: var(--h); min-height: 3px; border-radius: 2px 2px 0 0; background: var(--color-accent-200); transform-origin: bottom; }
.tn-rv-mini i.tn-bas { background: var(--tn-ambre); }
.tn-rv-coche {
  justify-self: end; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--tn-vert);
  background: var(--tn-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: background-color .2s ease;
}
.tn-rv-coche.tn-vide { background-color: #fff; background-image: none; border-color: var(--color-accent-300); }
.tn-rv-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; margin-top: auto; padding: .7rem 1.5rem .8rem; font-size: .86rem; color: var(--tn-encre-2); }
.tn-rv-pied a { display: inline-flex; align-items: center; gap: .3rem; color: var(--color-accent-700); font-weight: 650; text-underline-offset: .18em; }
.tn-rv-pied a:hover { color: var(--color-accent-600); }

@media (max-width: 640px) {
  .tn-hero { padding-top: 1rem; }
  .tn-hero-suite { display: none; }
  .tn-hero .tn-kicker { font-size: .7rem; padding-block: .3rem; }
  .tn-hero-cta, .tn-hero-cta2 { justify-self: stretch; }
  .tn-hero .hp-btn.tn-btn { min-height: 48px; }
  .tn-revue { margin-top: 1.25rem; }
  .tn-pin { width: 32px; height: 32px; font-size: .82rem; }
  .tn-rv-constat { padding-inline: 1rem; }
  .tn-rv-panneau .tn-fiche-tete, .tn-rv-pied { padding-inline: 1rem; }
  .tn-rv-panneau .tn-fiche-meta { display: none; }
  .tn-rv-suite li { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; padding: .7rem 1rem; }
  .tn-rv-suite .tn-rv-res { grid-column: 1; grid-row: 2; }
  .tn-rv-mini, .tn-rv-coche { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
  .tn-hero { padding-top: 1.6rem; }
  /* le titre à gauche, le chapo, les boutons et les repères à droite, alignés par le haut ; la scène dessous */
  .tn-hero-grille {
    grid-template-columns: minmax(0, 1.25fr) auto minmax(0, .6fr); column-gap: .8rem;
    grid-template-areas: "titre chapo chapo" "titre cta cta2" "titre index index" "scene scene scene";
    align-content: start;
  }
  .tn-hero-titre { grid-row: 1 / span 3; padding-right: 2.7rem; }
  .tn-hero-chapo { margin-top: .2rem; }
  .tn-hero-cta, .tn-hero-cta2 { margin-top: 1.15rem; }
  .tn-hero-index { margin-top: 1rem; }
  .tn-revue { margin-top: 1.8rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tn-rv-photo { --ox: .5; aspect-ratio: auto; align-self: stretch; min-height: 400px; }
}

/* ===== à la une : trois pièces d'article ===== */
.tn-une-grille { display: grid; gap: 1.5rem; }
.tn-piece { display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; }
.tn-piece-corps { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem 1.3rem 1.1rem; }
.tn-piece-type { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.tn-piece-pied { display: grid; gap: .45rem; margin-top: auto; padding: 1rem 1.3rem 1.25rem; border-top: 1px dashed var(--color-accent-200); }
.tn-piece-pied .tn-h3 { font-size: 1.12rem; }
.tn-trame-barre { position: relative; display: flex; gap: 3px; height: 34px; }
.tn-trame-barre span { flex: var(--m); display: grid; place-items: center; border-radius: 6px; background: var(--color-accent-100); color: var(--color-accent-800); font-size: .74rem; font-weight: 700; white-space: nowrap; transition: background .3s ease, color .3s ease; }
.tn-trame-barre span.tn-on { background: var(--color-accent-600); color: #fff; }
.tn-trame-liste { display: grid; gap: .1rem; counter-reset: t; }
.tn-trame-liste li { counter-increment: t; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6rem; padding: .4rem .5rem; border-radius: 8px; transition: background .3s ease; }
.tn-trame-liste li::before { content: counter(t); grid-row: span 2; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%; border: 1.5px solid var(--color-accent-300); color: var(--color-accent-700); font-size: .72rem; font-weight: 700; }
.tn-trame-liste b { font-size: .93rem; font-weight: 650; }
.tn-trame-liste span { font-size: .84rem; color: var(--tn-encre-2); line-height: 1.4; }
.tn-trame-liste li.tn-on { background: var(--tn-teinte); }
.tn-devis-liste { display: grid; gap: .1rem; }
.tn-devis-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6rem; padding: .4rem .5rem; border-radius: 8px; transition: background .3s ease; }
.tn-devis-liste b { font-size: .93rem; font-weight: 650; }
.tn-devis-liste li > span:last-child { grid-column: 2; font-size: .84rem; color: var(--tn-encre-2); line-height: 1.4; }
.tn-case { grid-row: span 2; width: 20px; height: 20px; margin-top: .15rem; border-radius: 5px; border: 2px solid var(--tn-vert); background: var(--tn-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; transition: background-color .2s ease; }
.tn-devis-liste li.tn-vide .tn-case { background-color: #fff; background-image: none; border-color: var(--color-accent-300); }
.tn-devis-liste li.tn-on { background: var(--tn-vert-fond); }
.tn-devis-total { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border-radius: 8px; border-top: 2px solid var(--tn-encre); background: var(--tn-teinte); font-size: .88rem; }
.tn-devis-total b { color: var(--color-accent-700); }
.tn-clause-liste { display: grid; gap: .1rem; }
.tn-clause-liste li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 .4rem; padding: .4rem .5rem; border-radius: 8px; transition: background .3s ease, box-shadow .3s ease; }
.tn-clause-n { grid-row: span 2; font-family: var(--tn-titre); font-weight: 700; font-size: .9rem; color: var(--color-accent-500); }
.tn-clause-liste b { font-size: .93rem; font-weight: 650; }
.tn-clause-liste li > span:last-child { grid-column: 2; font-size: .84rem; color: var(--tn-encre-2); line-height: 1.4; }
.tn-clause-liste li.tn-on { background: var(--tn-ambre-fond); box-shadow: inset 3px 0 0 var(--tn-ambre); }
@media (min-width: 900px) { .tn-une-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== le carnet : tableau de bord par rubrique, cartes qui remplissent toute la ligne ===== */
.tn-tdb-tete { display: grid; gap: .9rem; padding: 1rem 1.4rem; }
.tn-tdb-compte { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: 1rem; color: var(--tn-encre-2); }
.tn-tdb-compte .tn-point { margin-right: .35rem; }
.tn-tdb-compte b { font-family: var(--tn-titre); font-size: 1.45rem; color: var(--tn-encre); display: inline-block; }
.tn-tdb-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem 1.25rem; }
.tn-tdb-jauges li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; font-size: .82rem; color: var(--tn-encre-2); }
.tn-tdb-jauges b { color: var(--tn-encre); }
.tn-jauge { display: block; height: 6px; border-radius: 999px; background: var(--color-accent-100); overflow: hidden; }
.tn-jauge i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--color-accent-600); transform-origin: left; }
.tn-tdb-ligne { display: grid; gap: 1rem; padding: 1.25rem 1.4rem; border-top: 1px solid var(--tn-bord); }
.tn-tdb-rub { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico nom" "ico info" ". lien"; gap: .1rem .8rem; align-content: start; }
.tn-tdb-ico { grid-area: ico; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--tn-teinte); color: var(--color-accent-600); }
.tn-tdb-nom { grid-area: nom; font-family: var(--tn-titre); font-weight: 650; font-size: 1.08rem; }
.tn-tdb-nom a { text-decoration: none; }
.tn-tdb-nom a:hover { color: var(--color-accent-600); text-decoration: underline; }
.tn-tdb-info { grid-area: info; font-size: .84rem; color: var(--tn-encre-2); }
.tn-tdb-lien { grid-area: lien; justify-self: start; font-size: .88rem; min-height: 40px; }
.tn-tdb-articles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.tn-tdb-art { display: flex; flex-direction: column; gap: .55rem; padding: .85rem 1rem .7rem; border-radius: 10px; border: 1px solid var(--tn-bord); background: #fff; transition: border-color .2s ease, background .2s ease; }
.tn-tdb-art.tn-choisi { border-color: var(--color-accent-600); background: var(--tn-teinte); box-shadow: inset 3px 0 0 var(--color-accent-600); }
.tn-tdb-cle { display: flex; align-items: baseline; gap: .55rem; }
.tn-tdb-cle b { font-family: var(--tn-titre); font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; color: var(--color-accent-600); white-space: nowrap; }
.tn-tdb-cle span { font-size: .82rem; line-height: 1.3; color: var(--tn-encre-2); }
.tn-tdb-titre { font-family: var(--tn-titre); font-weight: 600; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.tn-tdb-titre a { text-decoration: none; }
.tn-tdb-titre a:hover { color: var(--color-accent-600); text-decoration: underline; text-underline-offset: .15em; }
.tn-tdb-pied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; font-size: .82rem; color: var(--tn-encre-2); }
.tn-tdb-etat { padding: .15rem .55rem; border-radius: 999px; background: var(--color-accent-600); color: #fff; font-weight: 600; font-size: .76rem; white-space: nowrap; }
.tn-js .tn-tdb-etat { display: none; }
.tn-tdb-btn {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-accent-300); background: #fff; color: var(--color-accent-700); font-size: .78rem; font-weight: 650; white-space: nowrap;
}
.tn-tdb-btn::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; }
.tn-tdb-btn[hidden] { display: none; }
.tn-tdb-btn:hover { border-color: var(--color-accent-600); }
.tn-tdb-btn[aria-pressed="true"] { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.tn-tdb-btn[aria-pressed="true"]::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; border-color: #fff; }
/* la grille suit le nombre d'articles de la rubrique : jamais de colonne vide.
   25/10/2026 : le pas de colonne était libre, trois articles tombaient à 285 px (socle page-cassee : 300 px
   minimum). Le pas de 320 px garantit la largeur minimale, auto-fit garde une seule colonne en mobile. */
@media (min-width: 1024px) {
  .tn-tdb-tete { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.5rem; }
  .tn-tdb-jauges { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tn-tdb-ligne { grid-template-columns: 250px minmax(0, 1fr); gap: 1.5rem; }
  .tn-tdb-articles[data-n="2"] .tn-tdb-art { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; }
  .tn-tdb-articles[data-n="2"] .tn-tdb-cle { flex-direction: column; align-items: flex-start; gap: .3rem; width: 10.5rem; }
  .tn-tdb-articles[data-n="2"] .tn-tdb-titre { flex: 1; min-width: 0; }
  .tn-tdb-articles[data-n="2"] .tn-tdb-pied { flex-basis: 100%; }
}

/* ===== simulateur de remise : une fiche, le ticket à droite ===== */
.tn-simu-grille { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 1.9rem); }
.tn-simu-gauche { display: grid; gap: 1.3rem; align-content: start; min-width: 0; }
.tn-simu-champs { display: grid; gap: 1.2rem; }
.tn-simu-champ { display: grid; gap: .5rem; }
.tn-simu-lib { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.tn-simu-lib output { font-family: var(--tn-titre); font-size: 1.3rem; color: var(--color-accent-600); }
.tn-simu input[type="range"] { width: 100%; height: 28px; accent-color: var(--color-accent-600); cursor: pointer; }
.tn-simu-res { display: grid; gap: 1rem; padding: 1.15rem; border-radius: 10px; background: var(--tn-teinte); border: 1px solid var(--tn-bord); }
.tn-simu-gros { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.tn-simu-gros span { font-weight: 600; }
.tn-simu-gros b { font-family: var(--tn-titre); font-size: clamp(2.4rem, 2rem + 1.5vw, 3rem); line-height: 1; color: var(--tn-ambre); }
.tn-simu-barres { display: grid; gap: .55rem; }
.tn-simu-barres p { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem; align-items: center; gap: .75rem; font-size: .9rem; }
.tn-simu-barres b { text-align: right; white-space: nowrap; }
.tn-simu-barre { display: block; height: 14px; border-radius: 999px; background: #fff; border: 1px solid var(--tn-bord); overflow: hidden; }
.tn-simu-barre i { display: block; height: 100%; width: var(--l); border-radius: inherit; background: var(--color-accent-400); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.tn-simu-avec .tn-simu-barre i { background: var(--tn-ambre); }
.tn-simu-note { font-size: .86rem; color: var(--tn-encre-2); }
.tn-simu-note .tn-lien { display: flex; width: fit-content; font-size: .95rem; }
.tn-ticket { display: flex; flex-direction: column; gap: .85rem; align-self: start; min-width: 0; padding: 1.25rem 1.3rem 1.3rem; border-radius: 12px; border: 1.5px dashed var(--color-accent-300); background: color-mix(in oklab, var(--tn-teinte) 60%, #fff); font-variant-numeric: tabular-nums; }
.tn-ticket-tete { font-family: var(--tn-titre); font-weight: 700; font-size: 1.1rem; padding-bottom: .7rem; border-bottom: 2px dashed var(--color-accent-200); text-align: center; }
.tn-ticket-lignes { display: grid; gap: .5rem; }
.tn-ticket-lignes div { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; color: var(--tn-encre-2); }
.tn-ticket-lignes dd { color: var(--tn-encre); font-weight: 600; white-space: nowrap; }
.tn-ticket-remise dd, .tn-ticket-remise dt span { color: var(--tn-ambre); }
.tn-ticket-marge { margin-top: .25rem; padding-top: .65rem; border-top: 2px dashed var(--color-accent-200); font-weight: 650; }
.tn-ticket-marge dt { color: var(--tn-encre); }
.tn-ticket-marge dd { font-family: var(--tn-titre); font-size: 1.4rem; color: var(--color-accent-600) !important; }
.tn-ticket-pied { padding: .9rem 1rem; border-radius: 10px; background: var(--tn-ambre-fond); border: 1px solid color-mix(in oklab, var(--tn-ambre) 25%, transparent); text-align: center; color: var(--tn-encre-2); font-size: .9rem; line-height: 1.45; }
.tn-ticket-pied b { color: var(--tn-encre); }
.tn-ticket-gros { font-family: var(--tn-titre); font-size: 2.3rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--tn-ambre); }
@media (max-width: 520px) { .tn-simu-barres p { grid-template-columns: 1fr auto; } .tn-simu-barre { grid-column: 1 / -1; grid-row: 2; } }
@media (min-width: 960px) { .tn-simu-grille { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: 2.25rem; } }

/* ===== le contrôle : une affirmation à la fois, le chiffre qui tranche toujours visible ===== */
.tn-ctl-corps { display: grid; }
.tn-ctl-scene { min-width: 0; display: flex; flex-direction: column; }
.tn-ctl-registre { display: grid; gap: .7rem; align-content: start; padding: 1.25rem 1.4rem; border-top: 1px solid var(--tn-bord); background: color-mix(in oklab, var(--tn-teinte) 55%, #fff); }
.tn-ctl-registre-titre { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.tn-ctl-registre ol { display: grid; gap: .3rem; }
.tn-ctl-registre li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px; background: #fff; border: 1px solid var(--tn-bord); font-size: .9rem; transition: border-color .25s ease, background .25s ease; }
.tn-ctl-registre li i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-accent-300); color: var(--color-accent-700); font-style: normal; font-size: .72rem; font-weight: 700; }
.tn-ctl-registre li b { font-size: .78rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--tn-teinte); color: var(--color-accent-700); white-space: nowrap; }
.tn-ctl-registre li.tn-cours { border-color: var(--color-accent-600); box-shadow: inset 3px 0 0 var(--color-accent-600); }
.tn-ctl-registre li.tn-juste b { background: var(--tn-vert-fond); color: var(--tn-vert); }
.tn-ctl-registre li.tn-rate b { background: var(--tn-ambre-fond); color: var(--tn-ambre); }
.tn-ctl-registre-pied { font-size: .84rem; color: var(--tn-encre-2); }
.tn-ctl-compteur { font-size: .9rem; color: var(--tn-encre-2); }
.tn-ctl-compteur[hidden] { display: none; }
.tn-ctl-compteur b { font-family: var(--tn-titre); font-size: 1.1rem; color: var(--tn-encre); }
.tn-ctl-pistes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 1.2rem 1.6rem 0; }
.tn-ctl-pistes[hidden] { display: none; }
.tn-ctl-pistes li { height: 6px; border-radius: 999px; background: var(--color-accent-100); transition: background .3s ease; }
.tn-ctl-pistes li.tn-cours { background: var(--color-accent-400); }
.tn-ctl-pistes li.tn-juste { background: var(--tn-vert); }
.tn-ctl-pistes li.tn-rate { background: var(--tn-ambre); }
.tn-ctl-item { display: grid; gap: 1rem; padding: 1.1rem 1.6rem 1.5rem; }
.tn-ctl-item + .tn-ctl-item { border-top: 1px solid var(--tn-bord); }
.tn-js .tn-ctl-item + .tn-ctl-item { border-top: 0; }
.tn-ctl-item[hidden] { display: none; }
.tn-ctl-n { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.tn-ctl-q { font-family: var(--tn-titre); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); line-height: 1.25; font-weight: 650; letter-spacing: -.015em; text-wrap: balance; }
.tn-js .tn-ctl-q { min-height: 2.5em; }
.tn-ctl-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tn-ctl-choix[hidden] { display: none; }
.tn-ctl-btn {
  min-height: 54px; border-radius: .5rem; border: 2px solid var(--color-accent-600); background: #fff; color: var(--color-accent-600);
  font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.tn-ctl-btn:hover { background: var(--tn-teinte); }
.tn-ctl-btn[aria-pressed="true"] { background: var(--color-accent-600); color: #fff; }
.tn-ctl-btn:disabled { cursor: default; }
.tn-ctl-verdict { display: grid; gap: 1rem; padding: 1rem; border-radius: 12px; background: var(--tn-teinte); border: 1px solid var(--tn-bord); transition: background .3s ease, border-color .3s ease; }
.tn-ctl-chiffre { display: grid; gap: .3rem; align-content: start; padding: .9rem 1rem; border-radius: 10px; background: #fff; border: 1px solid var(--tn-bord); }
.tn-ctl-chiffre-lib { font-size: .7rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700) !important; }
.tn-ctl-chiffre b { font-family: var(--tn-titre); font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; color: var(--tn-encre); white-space: nowrap; transition: color .3s ease; }
.tn-ctl-chiffre span { font-size: .86rem; line-height: 1.4; color: var(--tn-encre-2); }
.tn-ctl-texte { display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; color: var(--tn-encre-2); min-width: 0; }
.tn-ctl-attente { display: none; }
.tn-ctl-rep { font-weight: 700; color: var(--tn-encre); font-size: 1.02rem; }
.tn-ctl-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: auto; }
.tn-ctl-actions .tn-lien { min-height: 40px; }
/* en attente de réponse : le chiffre de l'article reste affiché, l'explication arrive après le choix */
.tn-ctl-item.tn-attente .tn-ctl-rep, .tn-ctl-item.tn-attente .tn-ctl-expl, .tn-ctl-item.tn-attente .tn-ctl-actions { display: none; }
.tn-ctl-item.tn-attente .tn-ctl-attente { display: flex; align-items: center; min-height: 100%; padding: .2rem 0 .2rem 1rem; border-left: 2px dashed var(--color-accent-200); font-size: 1rem; font-weight: 550; color: var(--color-accent-700); }
.tn-ctl-item.tn-attente .tn-ctl-chiffre b { color: var(--tn-encre); }
.tn-ctl-item.tn-juste .tn-ctl-verdict { background: var(--tn-vert-fond); border-color: color-mix(in oklab, var(--tn-vert) 30%, transparent); }
.tn-ctl-item.tn-juste .tn-ctl-rep, .tn-ctl-item.tn-juste .tn-ctl-chiffre b { color: var(--tn-vert); }
.tn-ctl-item.tn-rate .tn-ctl-verdict { background: var(--tn-ambre-fond); border-color: color-mix(in oklab, var(--tn-ambre) 30%, transparent); }
.tn-ctl-item.tn-rate .tn-ctl-rep, .tn-ctl-item.tn-rate .tn-ctl-chiffre b { color: var(--tn-ambre); }
.tn-ctl-suite { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; border-radius: .5rem; border: 2px solid var(--color-accent-600); background: var(--color-accent-600); color: #fff; font-weight: 650; cursor: pointer; }
.tn-ctl-suite:hover { background: var(--color-accent-700); }
.tn-ctl-suite[hidden] { display: none; }
.tn-ctl-fin { padding: 2.5rem 1.5rem; text-align: center; margin-block: auto; }
.tn-ctl-fin[hidden] { display: none; }
.tn-ctl-fin-score b { font-family: var(--tn-titre); font-size: 4rem; line-height: 1; color: var(--color-accent-600); }
.tn-ctl-fin-score span { font-family: var(--tn-titre); font-size: 1.6rem; color: var(--tn-encre-2); }
.tn-ctl-fin .tn-boutons--centre { margin-top: 1.4rem; }
.tn-ctl :focus-visible { outline: 3px solid var(--color-accent-600); outline-offset: 2px; }
@media (min-width: 1200px) { .tn-ctl-verdict { grid-template-columns: 360px minmax(0, 1fr); } }
/* 25/10/2026 : à 390 px la boîte du chiffre tombait à 264 px de large pour un texte de 102 caractères
   (socle page-cassee : 300 px minimum). Trois niveaux de marge intérieure (item, verdict, chiffre)
   mangeaient 115 px sur les 350 px utiles. Le verdict laisse la place au chiffre, l'item se resserre. */
@media (max-width: 640px) {
  .tn-ctl-item { padding: .85rem .75rem 1.2rem; }
  .tn-ctl-verdict { display: contents; }
  .tn-ctl-chiffre { padding: .5rem; }
}
@media (min-width: 900px) {
  .tn-ctl-corps { grid-template-columns: minmax(0, 1fr) 340px; }
  .tn-ctl-registre { border-top: 0; border-left: 1px solid var(--tn-bord); }
  .tn-ctl-registre li span { white-space: nowrap; }
}

/* ===== année du dirigeant ===== */
.tn-agenda-in { padding: clamp(1.25rem, 3vw, 1.75rem); }
.tn-mois { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; margin-top: .4rem; }
.tn-mois li { position: relative; display: grid; place-items: center; gap: .2rem; padding: .6rem .2rem; border-radius: 8px; background: var(--tn-teinte); color: var(--tn-encre-2); font-size: .82rem; font-weight: 600; min-height: 64px; }
.tn-mois li i, .tn-rdv-tete i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent-600); color: #fff; font-style: normal; font-size: .76rem; font-weight: 700; }
.tn-mois .tn-mois-rdv { background: #fff; border: 1px solid var(--color-accent-300); color: var(--tn-encre); }
.tn-mois .tn-passe { opacity: .55; }
.tn-mois .tn-maintenant { background: var(--tn-ambre-fond); border: 1px solid var(--tn-ambre); color: var(--tn-ambre); opacity: 1; }
.tn-mois .tn-maintenant::after { content: "Aujourd’hui"; position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); padding: 0 .4rem; border-radius: 999px; background: var(--tn-ambre); color: #fff; font-size: .62rem; letter-spacing: .03em; white-space: nowrap; }
.tn-agenda .tn-fiche-meta b { color: var(--color-accent-700); }
.tn-rdv { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.tn-rdv li { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem .6rem; border-radius: 10px; border: 1px solid var(--tn-bord); background: #fff; }
.tn-rdv li.tn-prochain { border-color: var(--color-accent-600); box-shadow: 0 0 0 1px var(--color-accent-600); }
.tn-rdv-tete { display: flex; align-items: center; gap: .5rem; font-family: var(--tn-titre); font-weight: 650; font-size: 1.1rem; }
.tn-rdv li > p:nth-child(2) { font-size: .93rem; color: var(--tn-encre-2); }
.tn-rdv .tn-lien { margin-top: auto; font-size: .9rem; }
@media (min-width: 760px) { .tn-mois { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
/* 25/10/2026 : à 5 colonnes fixes les rendez-vous tombaient à 216 px pour 118 caractères (socle page-cassee :
   300 px minimum). Le pas de 320 px laisse le nombre de colonnes suivre la place, la description respire. */
@media (max-width: 640px) {
  .tn-agenda-in { padding: .9rem .6rem; }
  .tn-rdv li { padding: .9rem .5rem .6rem; }
}

/* ===== voyants : un tableau de bord en tuiles sur fond nuit, chaque voyant avec sa mesure et sa jauge ===== */
.tn-sec--nuit { background: var(--color-accent-950); color: #fff; }
.tn-sec--nuit .tn-kicker { background: color-mix(in oklab, #fff 8%, transparent); border-color: color-mix(in oklab, #fff 22%, transparent); color: var(--color-accent-100); }
.tn-sec--nuit .tn-kicker::before { background: var(--color-warning-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-warning-400) 30%, transparent); }
.tn-sec--nuit .tn-h2 { color: #fff; }
.tn-sec--nuit .tn-h2 em { color: var(--color-accent-200); background: linear-gradient(transparent 62%, color-mix(in oklab, var(--color-accent-500) 45%, transparent) 62%, color-mix(in oklab, var(--color-accent-500) 45%, transparent) 92%, transparent 92%); }
.tn-sec--nuit .tn-chapo { color: var(--color-accent-200); }
.tn-tableau { display: grid; gap: 1rem; }
.tn-tableau > * { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: 1.25rem 1.35rem 1.3rem; border-radius: var(--tn-r); background: color-mix(in oklab, var(--color-accent-900) 70%, var(--color-accent-950)); border: 1px solid color-mix(in oklab, #fff 14%, transparent); font-variant-numeric: tabular-nums; transition: border-color .25s ease, background .25s ease; }
.tn-tableau-bilan { background: color-mix(in oklab, var(--color-accent-800) 60%, var(--color-accent-950)) !important; }
.tn-tableau-titre, .tn-voyant-tete { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-200); }
.tn-tableau-titre { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tn-bilan-compte { font-size: .8rem; letter-spacing: .02em; text-transform: none; font-weight: 600; color: var(--color-accent-200); }
.tn-bilan-compte b { font-family: var(--tn-titre); font-size: 1.35rem; color: #fff; display: inline-block; }
.tn-bilan-liste { display: grid; gap: .1rem; margin-top: .35rem; }
.tn-bilan-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .42rem .2rem; border-bottom: 1px solid color-mix(in oklab, #fff 10%, transparent); font-size: .86rem; }
.tn-bilan-liste li b { color: #fff; font-weight: 650; }
.tn-bilan-liste li > span:last-child { color: var(--color-accent-200); text-align: right; white-space: nowrap; }
.tn-bilan-liste .tn-lampe { width: 11px; height: 11px; }
.tn-bilan-liste li.tn-on .tn-lampe, .tn-bilan-liste li.tn-test .tn-lampe { background: var(--color-warning-400); border-color: var(--color-warning-400); box-shadow: 0 0 10px color-mix(in oklab, var(--color-warning-400) 70%, transparent); }
.tn-bilan-liste li.tn-on > span:last-child { color: var(--color-warning-200); }
.tn-conseil { margin-top: auto; padding-top: .55rem; font-size: .86rem; font-weight: 600; color: var(--color-warning-200); }
.tn-voyant-tete { display: flex; align-items: center; gap: .6rem; }
.tn-voyant-tete a { color: var(--color-accent-200); text-decoration: none; }
.tn-voyant-tete a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.tn-voyant .tn-h3 { font-size: 1.1rem; color: #fff; }
.tn-voyant-mesure { margin-top: .35rem; font-size: .85rem; color: var(--color-accent-200); }
.tn-voyant-valeur { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; }
.tn-voyant-valeur b { font-family: var(--tn-titre); font-size: 2.1rem; line-height: 1.05; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.tn-voyant-valeur span { font-size: .84rem; color: var(--color-accent-200); }
.tn-voyant-jauge { position: relative; height: 10px; margin-top: .3rem; border-radius: 999px; background: color-mix(in oklab, #fff 13%, transparent); }
.tn-voyant-jauge i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: inherit; background: var(--color-warning-400); transform-origin: left; }
.tn-voyant-jauge em { position: absolute; left: min(var(--m), calc(100% - 3px)); top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: #fff; }
.tn-voyant-repere { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--color-accent-100); }
.tn-voyant-repere::before { content: ""; flex: none; width: 3px; height: 12px; border-radius: 2px; background: #fff; }
.tn-lampe { flex: none; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in oklab, #fff 10%, transparent); border: 2px solid color-mix(in oklab, #fff 30%, transparent); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tn-voyant.tn-allume .tn-lampe, .tn-voyant.tn-test .tn-lampe { background: var(--color-warning-400); border-color: var(--color-warning-400); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-warning-400) 22%, transparent), 0 0 16px color-mix(in oklab, var(--color-warning-400) 70%, transparent); }
.tn-voyant.tn-allume { border-color: var(--color-warning-400); background: color-mix(in oklab, var(--color-warning-400) 10%, color-mix(in oklab, var(--color-accent-900) 70%, var(--color-accent-950))); }
.tn-voyant-btn {
  align-self: flex-start; margin-top: .6rem; min-height: 44px; padding: 0 1rem; border-radius: .5rem; border: 2px solid color-mix(in oklab, #fff 55%, transparent);
  background: transparent; color: #fff; font-weight: 650; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease;
}
.tn-voyant-btn:hover { border-color: #fff; background: color-mix(in oklab, #fff 8%, transparent); }
.tn-voyant-btn[hidden] { display: none; }
.tn-voyant-btn[aria-pressed="true"] { background: var(--color-warning-400); border-color: var(--color-warning-400); color: var(--color-accent-950); }
.tn-voyants :focus-visible { outline: 2px solid var(--color-warning-400); outline-offset: 2px; }
@media (min-width: 720px) { .tn-tableau { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tn-tableau { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

/* ===== lexique : le carnet de calcul ===== */
.tn-calc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tn-calc-table th, .tn-calc-table td { padding: .85rem 1.4rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--tn-bord); }
.tn-calc-table thead th { border-top: 0; padding-block: .65rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); background: #fff; }
.tn-calc-table tbody th { font-family: var(--tn-titre); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.tn-calc-table tbody th a { text-decoration: none; }
.tn-calc-table tbody th a:hover { color: var(--color-accent-600); text-decoration: underline; text-underline-offset: .18em; }
.tn-calc-f { color: var(--tn-encre-2); }
.tn-calc-ex { color: var(--tn-encre); font-weight: 500; }
.tn-calc-r { text-align: right !important; white-space: nowrap; }
.tn-calc-r b { display: inline-block; padding: .3rem .7rem; border-radius: 8px; background: var(--tn-teinte); font-family: var(--tn-titre); font-size: 1.12rem; color: var(--color-accent-600); transition: background .25s ease, color .25s ease; }
.tn-calc-table tbody tr { transition: background .25s ease; }
.tn-calc-table tbody tr.tn-on { background: color-mix(in oklab, var(--tn-ambre-fond) 70%, #fff); }
.tn-calc-table tbody tr.tn-on .tn-calc-r b { background: var(--tn-ambre); color: #fff; }
.tn-calc-note { padding: .9rem 1.4rem; border-top: 1px solid var(--tn-bord); background: var(--tn-teinte); font-size: .9rem; color: var(--tn-encre-2); }
.tn-calc-note b { color: var(--tn-encre); }
@media (max-width: 760px) {
  .tn-calc-table thead { display: none; }
  .tn-calc-table, .tn-calc-table tbody, .tn-calc-table tr, .tn-calc-table th, .tn-calc-table td { display: block; }
  .tn-calc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; padding: .9rem 1.1rem; border-top: 1px solid var(--tn-bord); }
  .tn-calc-table tbody tr:first-child { border-top: 0; }
  .tn-calc-table th, .tn-calc-table td { padding: 0; border: 0; }
  .tn-calc-table tbody th { grid-column: 1; }
  .tn-calc-r { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .tn-calc-f, .tn-calc-ex { grid-column: 1; font-size: .88rem; }
  .tn-calc-r b { font-size: 1rem; }
}

/* ===== rédaction : la méthode montrée sur un article, puis les auteurs ===== */
.tn-methode { margin-bottom: 1.5rem; }
.tn-etapes { position: relative; display: grid; gap: 1.5rem; padding: 1.5rem 1.4rem 1.6rem; }
.tn-etapes li { position: relative; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.tn-etapes li > p:not(.tn-etape-ex) { font-size: .93rem; color: var(--tn-encre-2); }
.tn-etapes .tn-h3 { font-size: 1.1rem; margin-top: .35rem; }
.tn-etape-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--color-accent-600); color: var(--color-accent-600); font-family: var(--tn-titre); font-weight: 700; font-size: 1.1rem; position: relative; z-index: 1; transition: background .3s ease, color .3s ease; }
.tn-etapes li.tn-fait .tn-etape-n { background: var(--color-accent-600); color: #fff; }
.tn-etape-ex { display: grid; gap: .2rem; margin-top: .35rem; padding: .7rem .85rem; border-radius: 10px; background: var(--tn-teinte); box-shadow: inset 3px 0 0 var(--color-accent-600); font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--tn-encre); }
.tn-etape-ex span { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
/* 25/10/2026 : à 4 colonnes les étapes tombaient à 267 px pour 174 caractères (socle page-cassee : 300 px
   minimum). Deux colonnes gardent la frise lisible ; le trait de progression était calé sur 4 colonnes. */
@media (min-width: 900px) {
  .tn-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
  .tn-etapes li > p:not(.tn-etape-ex) { min-height: 4.8em; }
}
.tn-auteurs { display: grid; gap: 1.25rem; }
.tn-auteur { display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem 1.35rem .9rem; transition: transform .25s ease, border-color .25s ease; }
.tn-auteur-tete { display: flex; align-items: center; gap: .85rem; }
.tn-auteur-ini { flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--color-accent-950); color: #fff; font-family: var(--tn-titre); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.tn-auteur .tn-h3 { font-size: 1.15rem; }
.tn-auteur-rub { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--color-accent-700); font-weight: 600; }
.tn-auteur-n { padding: .6rem 0; border-block: 1px solid var(--tn-bord); font-size: .88rem; color: var(--tn-encre-2); }
.tn-auteur-n b { font-family: var(--tn-titre); font-size: 1.4rem; color: var(--color-accent-600); margin-right: .15rem; }
.tn-auteur-liste { display: grid; gap: .45rem; }
.tn-auteur-liste li { position: relative; padding-left: 1rem; font-size: .9rem; line-height: 1.35; }
.tn-auteur-liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 2px; background: var(--color-accent-400); }
.tn-auteur-liste a { text-decoration: none; color: var(--tn-encre); }
.tn-auteur-liste a:hover { color: var(--color-accent-600); text-decoration: underline; }
.tn-auteur-tout { margin-top: auto; font-size: .9rem; }
/* 25/10/2026 : à 4 colonnes la fiche d'auteur tombait à 285 px pour 201 caractères (socle page-cassee : 300 px
   minimum). On reste à deux colonnes, la liste d'articles signés reste lisible. */
@media (min-width: 720px) { .tn-auteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== recherche : le champ à gauche, les rubriques à droite ===== */
.tn-recherche-in { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); }
.tn-recherche-gauche { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.tn-recherche-gauche > .tn-lien { justify-self: start; }
.tn-recherche-form { position: relative; display: flex; gap: .6rem; }
.tn-recherche-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-accent-600); pointer-events: none; }
.tn-recherche-form input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 1rem 0 3rem; border-radius: .5rem; border: 1px solid var(--color-accent-300);
  font: inherit; font-size: 1.08rem; color: var(--tn-encre); background: #fff;
}
.tn-recherche-form input:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 1px; border-color: var(--color-accent-600); }
.tn-recherche-form .hp-btn.tn-btn { min-height: 56px; }
.tn-sujets { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .9rem; color: var(--tn-encre-2); }
.tn-sujets a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .8rem; border-radius: 999px; border: 1px dashed var(--color-accent-300); color: var(--color-accent-700); text-decoration: none; font-weight: 600; }
.tn-sujets a:hover { background: var(--tn-teinte); border-style: solid; }
.tn-pastilles { display: grid; gap: .45rem; padding-top: 1.5rem; border-top: 1px solid var(--tn-bord); }
.tn-pastilles a { display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 .55rem 0 .9rem; border-radius: 10px; background: var(--tn-teinte); border: 1px solid var(--tn-bord); text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--tn-encre); }
.tn-pastilles a span { flex: 1; }
.tn-pastilles a svg { color: var(--color-accent-600); }
.tn-pastilles b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .4rem; border-radius: 999px; background: #fff; color: var(--color-accent-600); font-size: .82rem; }
.tn-pastilles a:hover { border-color: var(--color-accent-600); }
@media (max-width: 560px) { .tn-recherche-form { flex-direction: column; } .tn-recherche-ico { top: 28px; } }
@media (min-width: 900px) {
  .tn-recherche-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; }
  .tn-pastilles { padding: 0 0 0 2.5rem; border-top: 0; border-left: 1px solid var(--tn-bord); }
}

/* ===== questions ===== */
.tn-q-grille { display: grid; gap: 1.5rem; align-items: start; }
.tn-faq { display: grid; gap: .75rem; }
.tn-faq details { padding: 0 1.25rem; box-shadow: none; }
.tn-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 60px; font-weight: 650; cursor: pointer; list-style: none; }
.tn-faq summary::-webkit-details-marker { display: none; }
.tn-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tn-teinte); color: var(--color-accent-600); font-size: 1.2rem; font-weight: 500; transition: transform .2s ease; }
.tn-faq details[open] summary::after { transform: rotate(45deg); }
.tn-faq details p { padding: 0 0 1.15rem; color: var(--tn-encre-2); }
.tn-ecrire-in { display: grid; gap: .85rem; padding: 1.35rem 1.4rem 1.5rem; }
.tn-ecrire p { color: var(--tn-encre-2); }
.tn-ecrire-liste { display: grid; gap: .4rem; counter-reset: e; }
.tn-ecrire-liste li { counter-increment: e; display: flex; gap: .6rem; align-items: baseline; font-size: .95rem; }
.tn-ecrire-liste li::before { content: counter(e); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--color-accent-300); color: var(--color-accent-700); font-size: .75rem; font-weight: 700; }
.tn-ecrire a[href^="mailto"] { color: var(--color-accent-600); font-weight: 650; }
.tn-ecrire .hp-btn.tn-btn { justify-self: start; }
@media (min-width: 960px) { .tn-q-grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 2.5rem; } }

/* ===== survol (pointeur fin seulement) ===== */
@media (hover: hover) {
  .tn-piece:hover, .tn-auteur:hover { transform: translateY(-4px); border-color: var(--color-accent-200); }
  .tn-tdb-art:hover { border-color: var(--color-accent-400); }
  .tn-pin:hover { background: var(--tn-ambre); }
  .tn-voyant:hover { border-color: color-mix(in oklab, #fff 32%, transparent); }
}

/* ===== 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; }
}

/* ===== le menu calé sur la colonne de 1200 px des sections (logo, pastille et bord de la photo alignés) ===== */
html body .hp-barre { width: min(100% - 2.5rem, 1200px); max-width: none; padding-inline: 0; }
html body .hp-ligne-in { max-width: 1200px; }
@media (min-width: 1024px) { html body .hp-barre { width: min(100% - 4rem, 1200px); } }

/* ===== bandeau avant le pied de page : même fiche, même titre gras, même bouton bleu que le hero ===== */
html body .uf-block { max-width: 1200px; width: min(100% - 2.5rem, 1200px); border-color: var(--color-accent-100); border-radius: 14px; box-shadow: 0 1px 2px color-mix(in oklab, var(--color-accent-950) 6%, transparent), 0 22px 44px -30px color-mix(in oklab, var(--color-accent-950) 45%, transparent); }
@media (min-width: 1024px) { html body .uf-block { width: min(100% - 4rem, 1200px); } }
html body .uf-block.uf-block .about-banner { background: var(--color-accent-50); grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem; padding: 2.25rem 2.5rem; }
html body .uf-block.uf-block .about-banner .brand-name { display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .9rem .38rem .7rem; border: 1px solid var(--color-accent-200); border-radius: 999px; background: #fff; color: var(--color-accent-700); font-family: "Geist", ui-sans-serif, sans-serif; font-size: .78rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2; }
html body .uf-block.uf-block .about-banner .brand-name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-600); box-shadow: 0 0 0 3px var(--color-accent-100); }
html body .uf-block.uf-block .about-banner h2 { margin: 0 0 .45rem; font-family: "Bricolage Grotesque Variable", "Bricolage Grotesque", sans-serif; font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--color-accent-950); }
html body .uf-block.uf-block .about-banner p { font-family: "Geist", ui-sans-serif, sans-serif; font-size: 1rem; line-height: 1.55; color: color-mix(in oklab, var(--color-accent-950) 76%, #fff); }
html body .uf-block.uf-block .about-banner .af-button { gap: .5rem; min-height: 50px; padding: 0 1.4rem; background: var(--color-accent-600); border: 2px solid var(--color-accent-600); border-radius: .5rem; color: #fff !important; font-family: "Geist", ui-sans-serif, sans-serif; font-size: 1rem; font-weight: 650; white-space: nowrap; filter: none; transition: background .2s ease; }
html body .uf-block.uf-block .about-banner .af-button:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
html body .uf-block.uf-block .about-banner .af-button:focus-visible { outline: 3px solid var(--color-accent-950); outline-offset: 3px; }
@media (max-width: 1000px) { html body .uf-block.uf-block .about-banner { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 2rem 1.5rem; } html body .uf-block.uf-block .about-banner > * { grid-column: auto; justify-self: start; } }
@media (max-width: 600px) { html body .uf-block { border-radius: 14px; } html body .uf-block.uf-block .about-banner > .af-button { justify-self: stretch; } }