/* ==========================================================================
   Tourniere, feuille de style unique
   Vocabulaire de nommage: frise, rail, station, creneau, borne, cahier,
   compteur, baton, onglet, vignette, poste, carnet, releve.
   ========================================================================== */

:root {
  --sable: #F6F2E9;
  --ciel: #E7EEF8;
  --blanc: #FFFFFF;
  --nuit: #10203A;
  --ardoise: #4A5A70;
  --bleu: #1A5AD6;
  --bleu-fonce: #10203A;
  --jaune: #E8A21C;
  --bordure: #D8D0BE;

  --titre: "Archivo Black", "Arial Black", Impact, sans-serif;
  --courant: "Open Sans", "Segoe UI", Arial, sans-serif;
  --compte: "Podkova", Georgia, "Times New Roman", serif;

  --coin: 0 0 18px 0;
  --onglet: 8px;
  --debord: 12px;

  --large: 1240px;
  --lecture: 68ch;

  --pas: clamp(56px, 7vw, 108px);
}

/* --------------------------------------------------------------- socle -- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sable);
  color: var(--nuit);
  font-family: var(--courant);
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nuit); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.6em;
  color: var(--nuit);
}

h1 { font-size: 3.4rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.3rem; line-height: 1.2; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; max-width: var(--lecture); }
ul, ol { max-width: var(--lecture); }

:focus-visible {
  outline: 3px solid var(--nuit);
  outline-offset: 2px;
}

.tn-evitement {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--nuit);
  color: var(--blanc);
  padding: 12px 20px;
  border-radius: var(--coin);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s linear;
}
.tn-evitement:focus { top: 12px; color: var(--blanc); }

.tn-enveloppe {
  width: min(100% - 40px, var(--large));
  margin-inline: auto;
}

.tn-invisible {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- motif de comptage --- */

.tn-batons {
  display: inline-block;
  width: 34px;
  height: 24px;
  color: var(--jaune);
  flex: none;
}
.tn-batons--bleu { color: var(--bleu); }
.tn-batons--nuit { color: var(--nuit); }
.tn-batons--large { width: 44px; height: 31px; }

.tn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* variante CSS du motif, quatre traits fins tous les 28 pixels */
.tn-hachures {
  position: relative;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 2px,
    transparent 2px 28px
  );
  opacity: .12;
}
.tn-hachures::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 2px,
    transparent 2px 112px
  );
  transform: rotate(20deg) scaleY(1.4);
  transform-origin: center;
  opacity: .8;
}

/* --------------------------------------------------------- surtitres --- */

.tn-surtitre {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0 0 14px;
  max-width: none;
}
.tn-surtitre--clair { color: #C6D4E8; }

/* ----------------------------------------------------------- boutons --- */

.tn-bouton,
.tn-bouton-second {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: var(--coin);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .18s linear, color .18s linear, border-color .18s linear;
}

.tn-bouton {
  background: var(--bleu);
  color: var(--blanc);
  border-color: var(--bleu);
}
.tn-bouton::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--jaune);
  opacity: 0;
  transition: opacity .18s linear;
}
.tn-bouton:hover,
.tn-bouton:focus-visible {
  background: var(--nuit);
  border-color: var(--nuit);
  color: var(--blanc);
}
.tn-bouton:hover::after,
.tn-bouton:focus-visible::after { opacity: 1; }

.tn-bouton-second {
  background: transparent;
  color: var(--nuit);
  border-color: var(--bleu);
}
.tn-bouton-second:hover,
.tn-bouton-second:focus-visible {
  background: var(--ciel);
  color: var(--nuit);
  box-shadow: inset 0 0 0 2px var(--bleu);
}

.tn-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 0;
}

/* ----------------------------------------------------------- en tete --- */

.tn-entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 72px;
  background: rgba(246, 242, 233, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
  transition: background-color .2s linear, border-color .2s linear;
}
.tn-entete.est-defile {
  background: var(--blanc);
  border-bottom-color: var(--bleu);
}
.tn-entete__aiguille {
  position: absolute;
  left: 0; bottom: -3px;
  height: 3px;
  width: 0;
  background: var(--jaune);
}
.tn-entete__barre {
  height: 71px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.tn-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--nuit);
  font-family: var(--titre);
  font-size: 1.32rem;
  letter-spacing: -0.03em;
  flex: none;
}
.tn-logo svg { flex: none; }
.tn-logo__mot { position: relative; padding-bottom: 6px; }
.tn-logo__mot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background:
    linear-gradient(90deg, var(--bleu) 0 40%, transparent 40% 60%, var(--bleu) 60% 100%);
}

.tn-nav { margin-left: auto; }
.tn-nav__liste {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0; padding: 0;
  max-width: none;
}
.tn-nav__lien {
  position: relative;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--nuit);
  text-decoration: none;
  padding: 6px 0;
}
.tn-nav__lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--bleu);
  transition: width .2s linear;
}
.tn-nav__lien:hover::after,
.tn-nav__lien:focus-visible::after { width: 100%; }

.tn-entete .tn-bouton { padding: 10px 20px; font-size: 0.94rem; }

.tn-cle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: auto;
  background: transparent;
  border: 2px solid var(--bleu);
  border-radius: var(--coin);
  cursor: pointer;
}
.tn-cle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--nuit);
  position: relative;
}
.tn-cle span::before,
.tn-cle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--nuit);
}
.tn-cle span::before { top: -6px; }
.tn-cle span::after { top: 6px; }
.tn-cle[aria-expanded="true"] span { background: transparent; }
.tn-cle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.tn-cle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.tn-panneau {
  position: fixed;
  inset: 72px 0 0 0;
  z-index: 99;
  background: var(--sable);
  padding: 28px 20px 60px;
  overflow-y: auto;
  display: none;
}
.tn-panneau[data-ouvert="oui"] { display: block; }
.tn-panneau__liste {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  max-width: none;
}
.tn-panneau__liste li { border-bottom: 1px solid var(--bordure); }
.tn-panneau__liste a {
  display: block;
  padding: 16px 4px;
  font-family: var(--titre);
  font-size: 1.25rem;
  color: var(--nuit);
  text-decoration: none;
}
.tn-panneau__liste a::before {
  content: attr(data-heure);
  font-family: var(--compte);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--bleu);
  display: block;
}

/* ---------------------------------------------------- fond en derive --- */

.tn-derive {
  background-image: linear-gradient(100deg, #F6F2E9 0%, #E7EEF8 28%, #FFFFFF 46%, #E7EEF8 66%, #F6F2E9 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: tn-derive 36s linear infinite alternate;
}
.tn-derive--nuit {
  background-image: linear-gradient(100deg, #10203A 0%, #17325C 30%, #1A5AD6 50%, #17325C 72%, #10203A 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: tn-derive 36s linear infinite alternate;
}

@keyframes tn-derive {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* ---------------------------------------------------------- sections --- */

main { padding-top: 72px; }

.tn-bloc { padding: var(--pas) 0; position: relative; }
.tn-bloc--ciel { background: var(--ciel); }
.tn-bloc--blanc { background: var(--blanc); }
.tn-bloc--nuit { background: var(--nuit); color: #E4EBF5; }
.tn-bloc--nuit h2,
.tn-bloc--nuit h3 { color: var(--blanc); }

.tn-tete-bloc { max-width: 780px; margin-bottom: 42px; }
.tn-tete-bloc p { color: var(--ardoise); font-size: 1.08rem; }
.tn-bloc--nuit .tn-tete-bloc p { color: #BFD0E6; }

/* -------------------------------------------------------------- hero --- */

.tn-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 78px) 0 0;
}
.tn-hero__voile {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--bleu);
  opacity: .06;
}
.tn-hero > .tn-enveloppe { position: relative; z-index: 1; }

.tn-hero h1 { max-width: 17ch; margin-bottom: 18px; }
.tn-hero__chapeau {
  font-size: 1.18rem;
  color: var(--ardoise);
  max-width: 60ch;
}
.tn-hero__chapeau strong { color: var(--nuit); font-weight: 600; }

/* frise chronologique du hero */

.tn-frise { margin-top: 46px; }

.tn-rail {
  position: relative;
  height: 34px;
  border-bottom: 2px solid var(--bleu);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.tn-rail__heure {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ardoise);
  position: relative;
  padding-bottom: 8px;
}
.tn-rail__heure::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  width: 2px; height: 8px;
  background: var(--bordure);
}
.tn-rail__heure:first-child::after,
.tn-rail__heure:last-child::after { background: var(--bleu); height: 14px; }

.tn-stations {
  list-style: none;
  margin: 0; padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.15fr;
  gap: 0;
}

.tn-station {
  position: relative;
  padding: 34px 26px 8px 0;
  border-left: 1px solid var(--bordure);
  padding-left: 22px;
}
.tn-station:first-child { border-left: 0; padding-left: 0; }

.tn-station__pastille {
  position: absolute;
  top: -11px;
  left: 22px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--jaune);
  border: 4px solid var(--sable);
  box-shadow: 0 0 0 2px var(--bleu);
}
.tn-station:first-child .tn-station__pastille { left: 0; }
.tn-station--halo .tn-station__pastille::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px dashed var(--bleu);
  opacity: .5;
}

.tn-station__heure {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bleu);
  display: block;
  margin-bottom: 4px;
}
.tn-station__titre {
  font-family: var(--titre);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.tn-station p {
  font-size: 0.94rem;
  color: var(--ardoise);
  margin-bottom: 0;
}
.tn-station--gain .tn-station__pastille { background: var(--bleu); }
.tn-station--gain .tn-station__heure { color: var(--nuit); }

.tn-chiffre-cle {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--nuit);
  display: block;
}
.tn-unite {
  display: block;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ardoise);
  margin-top: 4px;
}

/* vignette photo */

.tn-vignette {
  position: relative;
  margin: 0 0 0 var(--debord);
  background: var(--blanc);
}
.tn-vignette--detail { margin-top: 26px; }
.tn-vignette img {
  border: 1px solid var(--bleu);
  border-radius: var(--coin);
}
.tn-vignette::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 148px; height: var(--onglet);
  background: var(--jaune);
  z-index: 2;
}
.tn-vignette::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 38%;
  border-radius: var(--coin);
  background: linear-gradient(180deg, rgba(246,242,233,0) 0%, rgba(246,242,233,.72) 100%);
  pointer-events: none;
}
.tn-vignette img { width: 100%; }
.tn-vignette__marque {
  position: absolute;
  right: 16px; bottom: 14px;
  z-index: 3;
  display: flex;
  gap: 8px;
  color: var(--blanc);
  opacity: .6;
}
.tn-vignette__legende {
  position: absolute;
  left: 16px; bottom: 12px;
  z-index: 3;
  font-family: var(--compte);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nuit);
}

.tn-hero__bande {
  margin-top: 44px;
  position: relative;
  z-index: 1;
}
.tn-hero__bande .tn-vignette::before { width: 190px; }

/* ----------------------------------------------------- bloc probleme --- */

.tn-releve {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 46px;
  align-items: start;
}

.tn-moments {
  list-style: none;
  margin: 34px 0 0;
  padding: 26px 0 0;
  max-width: none;
  border-top: 2px solid var(--bordure);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tn-moment { position: relative; padding-top: 14px; }
.tn-moment::before {
  content: "";
  position: absolute;
  top: -33px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--nuit);
  border: 3px solid var(--sable);
}
.tn-moment__heure {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--bleu);
}
.tn-moment h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.tn-moment p { font-size: 0.94rem; color: var(--ardoise); margin: 0; }

.tn-facture {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 26px 24px 22px;
  position: relative;
  margin-left: var(--debord);
}
.tn-facture::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 168px; height: var(--onglet);
  background: var(--bleu);
}
.tn-facture h3 { margin-top: 8px; }
.tn-facture dl { margin: 0; }
.tn-facture div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--bordure);
}
.tn-facture div:last-of-type { border-bottom: 0; }
.tn-facture dt { font-size: 0.94rem; color: var(--ardoise); }
.tn-facture dd {
  margin: 0;
  font-family: var(--compte);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--nuit);
  white-space: nowrap;
}
.tn-facture__total { border-top: 2px solid var(--nuit); margin-top: 8px; padding-top: 12px; }
.tn-facture__total dd { color: var(--bleu); font-size: 1.6rem; }
.tn-facture__note { font-size: 0.82rem; color: var(--ardoise); margin: 14px 0 0; }

/* ----------------------------------------------------- bloc solution --- */

.tn-ligne-horaire {
  position: relative;
  margin-top: 18px;
  padding-top: 40px;
}
.tn-ligne-horaire::before {
  content: "";
  position: absolute;
  top: 22px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bleu) 0 70%, var(--bordure) 70% 100%);
}
.tn-etapes {
  list-style: none;
  margin: 0; padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.tn-etape { position: relative; }
.tn-etape::before {
  content: "";
  position: absolute;
  top: -29px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: 0 0 0 3px var(--ciel), 0 0 0 5px var(--bleu);
}
.tn-etape__num {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--bleu);
  display: block;
  margin-bottom: 6px;
}
.tn-etape h3 { font-size: 1.12rem; }
.tn-etape p { font-size: 0.96rem; color: var(--ardoise); margin: 0; }

/* --------------------------------------------- bloc fonctionnalites --- */

.tn-postes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 26px;
  margin-left: var(--debord);
}
.tn-poste {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 30px 26px 26px;
}
.tn-poste::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 132px; height: var(--onglet);
  background: var(--bleu);
}
.tn-poste--gain::before { background: var(--jaune); }
.tn-poste__etiquette {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
  display: block;
  margin-bottom: 8px;
}
.tn-poste p { font-size: 0.97rem; color: var(--ardoise); margin-bottom: 0; }
.tn-poste p + p { margin-top: 10px; }

/* ---------------------------------------------------- bloc avantages --- */

.tn-bloc--nuit { position: relative; overflow: hidden; }
.tn-bloc--nuit .tn-enveloppe { position: relative; z-index: 1; }
.tn-filigrane {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--jaune);
  opacity: .08;
  pointer-events: none;
}

.tn-compteurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 12px;
}
.tn-compteur {
  border-top: var(--onglet) solid var(--jaune);
  padding-top: 18px;
  position: relative;
}
.tn-compteur:nth-child(even) { border-top-color: var(--bleu); }
.tn-compteur__valeur {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--jaune);
  display: block;
}
.tn-compteur:nth-child(even) .tn-compteur__valeur { color: var(--blanc); }
.tn-compteur__unite {
  display: block;
  font-weight: 600;
  font-size: 0.86rem;
  color: #BFD0E6;
  margin: 6px 0 12px;
}
.tn-compteur p { font-size: 0.94rem; color: #D4DFEE; margin: 0; }
.tn-compteur__groupes {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

/* ------------------------------------------------------- bloc preuve --- */

.tn-preuve-tete {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 42px;
  align-items: end;
  margin-bottom: 48px;
}

.tn-temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tn-temoignage {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 0 24px 24px;
  margin: 0;
  position: relative;
}
.tn-avant-apres {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -24px 20px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--bordure);
  background: var(--ciel);
  border-radius: 0;
}
.tn-avant-apres span {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--nuit);
}
.tn-avant-apres .tn-fleche {
  flex: 1;
  height: 2px;
  background: var(--bleu);
  position: relative;
}
.tn-avant-apres .tn-fleche::after {
  content: "";
  position: absolute;
  right: 0; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: 0 0 0 2px var(--bleu);
}
.tn-temoignage blockquote { margin: 0; }
.tn-temoignage blockquote p { font-size: 1rem; margin-bottom: 14px; }
.tn-temoignage figcaption {
  border-top: 2px solid var(--bordure);
  padding-top: 12px;
  font-size: 0.9rem;
  color: var(--ardoise);
}
.tn-temoignage figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1rem;
  color: var(--nuit);
  letter-spacing: -0.01em;
}

.tn-bandeau-chiffres {
  position: relative;
  margin-top: 46px;
  background: var(--nuit);
  border-radius: var(--coin);
  padding: 30px 28px;
  overflow: hidden;
}
.tn-bandeau-chiffres ul {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0; padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.tn-bandeau-chiffres li { border-left: 2px solid rgba(232,162,28,.5); padding-left: 16px; }
.tn-bandeau-chiffres .tn-chiffre-cle { color: var(--jaune); font-size: 2.4rem; }
.tn-bandeau-chiffres .tn-unite { color: #CBD8EA; }

/* ------------------------------------------------------- bloc tarifs --- */

.tn-formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
.tn-formule {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 32px 26px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tn-formule::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 140px; height: var(--onglet);
  background: var(--bleu);
}
.tn-formule--phare {
  margin-top: -12px;
  border: 2px solid var(--nuit);
  box-shadow: 0 18px 0 -12px rgba(16,32,58,.12);
}
.tn-formule--phare::before { background: var(--jaune); width: 190px; }
.tn-formule__marque {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--compte);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
}
.tn-formule h3 { margin-bottom: 6px; font-size: 1.28rem; }
.tn-formule__cible { font-size: 0.92rem; color: var(--ardoise); min-height: 4.5em; }
.tn-formule__prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 16px 0;
  margin-bottom: 20px;
}
.tn-formule__prix b {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--nuit);
}
.tn-formule__prix span { font-weight: 600; font-size: 0.86rem; color: var(--ardoise); }
.tn-formule ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  max-width: none;
  flex: 1;
}
.tn-formule li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.94rem;
  color: var(--ardoise);
}
.tn-formule li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 2px;
  background: var(--bleu);
}
.tn-formule li::after {
  content: "";
  position: absolute;
  left: 14px; top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--jaune);
}
.tn-formule .tn-bouton,
.tn-formule .tn-bouton-second { justify-content: center; width: 100%; }

.tn-tarifs__note {
  margin-top: 26px;
  font-size: 0.92rem;
  color: var(--ardoise);
  max-width: 74ch;
}

/* ---------------------------------------------------------- bloc faq --- */

.tn-faq { max-width: 860px; }
.tn-question {
  border-bottom: 1px solid var(--bordure);
}
.tn-question:first-of-type { border-top: 2px solid var(--nuit); }
.tn-question__bouton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--titre);
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--nuit);
}
.tn-question__bouton:hover { color: var(--bleu); }
.tn-question__index {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bleu);
  flex: none;
  padding-top: 2px;
  min-width: 28px;
}
.tn-question__signe {
  margin-left: auto;
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.tn-question__signe::before,
.tn-question__signe::after {
  content: "";
  position: absolute;
  background: var(--bleu);
  transition: transform .2s linear;
}
.tn-question__signe::before { left: 0; top: 10px; width: 22px; height: 2px; }
.tn-question__signe::after { left: 10px; top: 0; width: 2px; height: 22px; }
.tn-question__bouton[aria-expanded="true"] .tn-question__signe::after { transform: scaleY(0); }
.tn-question__reponse {
  padding: 0 0 22px 44px;
}
.tn-question__reponse p { font-size: 0.99rem; color: var(--ardoise); margin-bottom: .8em; }
.tn-question__reponse p:last-child { margin-bottom: 0; }
.tn-question__reponse[hidden] { display: none; }

/* ------------------------------------------------------ bloc contact --- */

.tn-contact {
  position: relative;
  overflow: hidden;
  padding: var(--pas) 0;
}
.tn-contact > .tn-enveloppe { position: relative; z-index: 1; }
.tn-contact__grille {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: start;
}
.tn-contact__mots p { color: var(--ardoise); }
.tn-contact__mots ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.tn-contact__mots li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 0.96rem;
  color: var(--nuit);
}
.tn-contact__mots li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: 0 0 0 2px var(--bleu);
}

.tn-cahier {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 32px 28px 28px;
  position: relative;
  margin-left: var(--debord);
}
.tn-cahier::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 210px; height: var(--onglet);
  background: var(--jaune);
}

.tn-champ { margin-bottom: 18px; }
.tn-champ label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.tn-champ input[type="text"],
.tn-champ input[type="email"],
.tn-champ select,
.tn-champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--nuit);
  background: var(--sable);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 12px 14px;
}
.tn-champ textarea { resize: vertical; min-height: 120px; }
.tn-champ input:focus-visible,
.tn-champ select:focus-visible,
.tn-champ textarea:focus-visible {
  border-color: var(--bleu);
  background: var(--blanc);
}
.tn-champ--aide { font-size: 0.84rem; color: var(--ardoise); margin: 6px 0 0; }

.tn-accord {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ardoise);
  margin: 22px 0;
}
.tn-accord input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--bleu); }

.tn-cahier__pied {
  font-size: 0.86rem;
  color: var(--ardoise);
  margin: 18px 0 0;
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
}

/* -------------------------------------------------------- pied de page - */

.tn-pied {
  background: var(--nuit);
  color: #C9D6E8;
  position: relative;
  overflow: hidden;
  padding: 62px 0 0;
}
.tn-pied a { color: #E4EBF5; text-decoration: none; }
.tn-pied a:hover { color: var(--jaune); text-decoration: underline; }
.tn-pied__colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 36px;
  padding-bottom: 44px;
}
.tn-pied h2, .tn-pied h3 {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 14px;
}
.tn-pied ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.tn-pied li { margin-bottom: 9px; font-size: 0.93rem; }
.tn-pied p { font-size: 0.93rem; color: #AEC0D8; }
.tn-pied .tn-logo { color: var(--blanc); }
.tn-pied .tn-logo__mot::after {
  background: linear-gradient(90deg, var(--jaune) 0 40%, transparent 40% 60%, var(--jaune) 60% 100%);
}
.tn-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
}
.tn-social a {
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(232,162,28,.45);
}
.tn-pied__frise {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 16px;
  color: var(--jaune);
  opacity: .35;
}
.tn-pied__barre {
  border-top: 1px solid rgba(255,255,255,.16);
  padding: 18px 0 26px;
  font-size: 0.85rem;
  color: #9FB3CE;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
.tn-pied__barre p { margin: 0; color: #9FB3CE; max-width: none; }

/* ------------------------------------------------------ pages fines --- */

.tn-page-tete {
  padding: 54px 0 30px;
  border-bottom: 1px solid var(--bordure);
}
.tn-fil {
  font-size: 0.85rem;
  color: var(--ardoise);
  margin-bottom: 14px;
}
.tn-fil a { color: var(--ardoise); }
.tn-page-tete h1 { font-size: 2.6rem; max-width: 20ch; }
.tn-page-tete p { font-size: 1.1rem; color: var(--ardoise); }

.tn-texte { padding: 46px 0 var(--pas); }
.tn-texte h2 { font-size: 1.6rem; margin-top: 2em; }
.tn-texte h2:first-child { margin-top: 0; }
.tn-texte h3 { font-size: 1.1rem; margin-top: 1.6em; }
.tn-texte ul, .tn-texte ol { padding-left: 22px; }
.tn-texte li { margin-bottom: 8px; }
.tn-texte__colonne { max-width: 76ch; }
.tn-enveloppe.tn-texte__colonne {
  width: min(100% - 40px, var(--large));
  max-width: none;
}
.tn-enveloppe.tn-texte__colonne > * { max-width: 76ch; }

.tn-encart {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 24px 24px 20px;
  margin: 28px 0;
  position: relative;
  margin-left: var(--debord);
  max-width: 76ch;
}
.tn-encart::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 120px; height: var(--onglet);
  background: var(--bleu);
}
.tn-encart p:last-child { margin-bottom: 0; }

.tn-auteur-tete {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 38px;
  align-items: start;
  margin-bottom: 12px;
}
.tn-portrait {
  position: relative;
  margin: 0 0 0 var(--debord);
  background: var(--blanc);
}
.tn-portrait img {
  border: 1px solid var(--bleu);
  border-radius: var(--coin);
}
.tn-portrait::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 120px; height: var(--onglet);
  background: var(--jaune);
  z-index: 2;
}

.tn-plan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 10px;
}
.tn-plan article {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 22px 22px 18px;
  position: relative;
  margin-left: var(--debord);
}
.tn-plan article::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 110px; height: var(--onglet);
  background: var(--bleu);
}
.tn-plan h2 { font-size: 1.12rem; margin-bottom: 6px; }
.tn-plan p { font-size: 0.94rem; color: var(--ardoise); margin-bottom: 10px; }
.tn-plan a { font-weight: 600; }

.tn-borne {
  text-align: left;
  max-width: 720px;
  padding: 70px 0 var(--pas);
}
.tn-borne .tn-chiffre-cle { color: var(--bleu); }

/* --------------------------------------------------- apparitions ------- */

.tn-apparait {
  opacity: 0;
  transition: opacity .2s linear;
}
.tn-apparait.est-visible { opacity: 1; }
.no-js .tn-apparait { opacity: 1; }

/* -------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .tn-stations { grid-template-columns: 1.5fr 1fr 1fr; }
  .tn-station:nth-child(4) { grid-column: 1 / -1; border-left: 0; padding-left: 0; margin-top: 22px; }
  .tn-station:nth-child(4) .tn-station__pastille { left: 0; }
  .tn-postes { grid-template-columns: repeat(2, 1fr); }
  .tn-compteurs { grid-template-columns: repeat(2, 1fr); }
  .tn-bandeau-chiffres ul { grid-template-columns: repeat(2, 1fr); }
  .tn-etapes { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .tn-temoignages { grid-template-columns: 1fr; }
  .tn-formules { grid-template-columns: 1fr; }
  .tn-formule--phare { margin-top: 0; }
  .tn-pied__colonnes { grid-template-columns: repeat(2, 1fr); }
  .tn-releve { grid-template-columns: 1fr; }
  .tn-preuve-tete { grid-template-columns: 1fr; }
  .tn-contact__grille { grid-template-columns: 1fr; }
  .tn-auteur-tete { grid-template-columns: 1fr; }
  .tn-portrait { max-width: 260px; }
}

@media (max-width: 900px) {
  .tn-nav, .tn-entete .tn-bouton { display: none; }
  .tn-cle { display: inline-flex; }
}

@media (max-width: 720px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }
  .tn-page-tete h1 { font-size: 1.9rem; }
  .tn-rail { justify-content: space-between; overflow: hidden; }
  .tn-rail__heure:nth-child(even) { display: none; }
  .tn-stations {
    grid-template-columns: 1fr;
    border-left: 2px solid var(--bleu);
    padding-left: 26px;
    margin-top: 8px;
  }
  .tn-station,
  .tn-station:first-child,
  .tn-station:nth-child(4) {
    border-left: 0;
    padding-left: 0;
    padding-top: 26px;
    margin-top: 0;
  }
  .tn-station__pastille,
  .tn-station:first-child .tn-station__pastille,
  .tn-station:nth-child(4) .tn-station__pastille { left: -36px; top: 20px; }
  .tn-moments { grid-template-columns: 1fr; row-gap: 30px; }
  .tn-moment::before { top: -22px; }
  .tn-moment:first-child::before { top: -33px; }
  .tn-etapes { grid-template-columns: 1fr; }
  .tn-postes { grid-template-columns: 1fr; }
  .tn-compteurs { grid-template-columns: 1fr; }
  .tn-bandeau-chiffres ul { grid-template-columns: 1fr; }
  .tn-plan { grid-template-columns: 1fr; }
  .tn-pied__colonnes { grid-template-columns: 1fr; }
  .tn-formule__cible { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tn-derive, .tn-derive--nuit {
    animation: none;
    background-position: 50% 50%;
  }
  .tn-apparait { opacity: 1; transition: none; }
  * { transition-duration: .001ms !important; }
}

@media print {
  .tn-entete, .tn-panneau, .tn-cle { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   MAGAZINE, Le Cahier d heures
   Section ajoutee sans toucher a aucune regle ci dessus. Meme palette, meme
   forme signature (bandeau horaire de huit pixels debordant de douze pixels
   sur la gauche), meme motif de batons de comptage, meme derive de degrade.
   Vocabulaire: cahier, carte, releve, corps, renvoi, signature.
   ========================================================================== */

/* ------------------------------------------------- entete du magazine --- */

.tn-cahier-tete {
  position: relative;
  padding: 54px 0 40px;
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}
.tn-cahier-tete > .tn-enveloppe { position: relative; z-index: 1; }
.tn-cahier-tete h1 { font-size: 3rem; max-width: 18ch; margin-bottom: 16px; }
.tn-cahier-tete__chapeau {
  font-size: 1.12rem;
  color: var(--ardoise);
  max-width: 62ch;
  margin-bottom: 0;
}
.tn-cahier-tete__rail {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 2px solid var(--bleu);
  max-width: 62ch;
  flex-wrap: wrap;
}
.tn-cahier-tete__rail span {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
}
.tn-cahier-tete__rail b {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--nuit);
  margin-right: 6px;
}

/* ----------------------------------------------- grille de cartes ------ */

.tn-cahier-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
  margin-left: var(--debord);
}

.tn-carte-article {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
}
.tn-carte-article::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 132px; height: var(--onglet);
  background: var(--bleu);
  z-index: 2;
}
.tn-carte-article:nth-child(3n + 2)::before { background: var(--jaune); }
.tn-carte-article:hover { border-color: var(--bleu); }
.tn-carte-article:hover::before { background: var(--jaune); }
.tn-carte-article__image {
  display: block;
  border-bottom: 1px solid var(--bleu);
  background: var(--ciel);
}
.tn-carte-article__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.tn-carte-article__corps {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.tn-carte-article__angle {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
  display: block;
  margin-bottom: 8px;
}
.tn-carte-article h2,
.tn-carte-article h3,
.tn-carte-article__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--nuit);
  margin: 0 0 10px;
}
.tn-carte-article a[href] { text-decoration: none; color: var(--nuit); }
.tn-carte-article h2 a:hover,
.tn-carte-article h3 a:hover,
.tn-carte-article__titre a:hover,
.tn-carte-article h2 a:focus-visible,
.tn-carte-article h3 a:focus-visible,
.tn-carte-article__titre a:focus-visible {
  color: var(--bleu);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tn-carte-article__extrait {
  font-size: 0.95rem;
  color: var(--ardoise);
  margin: 0 0 16px;
  max-width: none;
}
.tn-carte-article__releve {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ardoise);
}
.tn-carte-article__releve b { font-weight: 600; color: var(--nuit); }

/* ------------------------------- entete d un article du magazine ------- */

.tn-page-article { position: relative; overflow: hidden; }
.tn-page-article > .tn-enveloppe { position: relative; z-index: 1; }

.tn-article-tete {
  position: relative;
  z-index: 1;
  padding: 46px 0 32px;
}
.tn-article-tete .tn-fil { margin-bottom: 18px; }
.tn-article-tete h1 {
  font-size: 2.9rem;
  max-width: 20ch;
  margin-bottom: 18px;
}
.tn-article-releve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  max-width: none;
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: var(--ardoise);
}
.tn-article-releve li { display: flex; align-items: center; gap: 8px; }
.tn-article-releve b { color: var(--nuit); font-weight: 600; }
.tn-article-releve__angle {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--bleu);
  padding: 5px 12px;
  border-radius: var(--coin);
}

/* exergue du chapeau */

.tn-chapo {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 26px 26px 22px;
  margin: 0 0 34px var(--debord);
  max-width: 70ch;
}
.tn-chapo::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 160px; height: var(--onglet);
  background: var(--jaune);
}
.tn-chapo p {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--nuit);
  margin: 0;
  max-width: none;
}

/* image a la une */

.tn-une {
  position: relative;
  background: var(--blanc);
  margin: 0 0 40px var(--debord);
}
.tn-une img {
  width: 100%;
  border: 1px solid var(--bleu);
  border-radius: var(--coin);
}
.tn-une::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 190px; height: var(--onglet);
  background: var(--jaune);
  z-index: 2;
}
.tn-une::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 32%;
  border-radius: var(--coin);
  background: linear-gradient(180deg, rgba(246,242,233,0) 0%, rgba(246,242,233,.66) 100%);
  pointer-events: none;
}
.tn-une__marque {
  position: absolute;
  right: 18px; bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
  color: var(--blanc);
  opacity: .6;
}

/* --------------------------------------------------------- corps ------ */
/* Le corps redactionnel est du HTML nu, sans aucun attribut class: toutes
   les balises sont mises en forme comme descendantes de .tn-corps. */

.tn-corps {
  max-width: var(--lecture);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--nuit);
}
.tn-corps > *:first-child { margin-top: 0; }

.tn-corps h2 {
  position: relative;
  font-size: 1.75rem;
  line-height: 1.12;
  margin: 2.1em 0 0.55em;
  padding-top: 20px;
}
.tn-corps h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 96px; height: var(--onglet);
  background: var(--bleu);
}
.tn-corps h3 {
  font-size: 1.16rem;
  line-height: 1.25;
  margin: 1.8em 0 0.5em;
  color: var(--nuit);
}
.tn-corps h3::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.86em;
  margin-right: 10px;
  vertical-align: -0.04em;
  background: var(--jaune);
}
.tn-corps p { margin: 0 0 1.15em; max-width: none; }
.tn-corps strong { font-weight: 700; color: var(--nuit); }
.tn-corps em { font-style: italic; color: var(--ardoise); }

.tn-corps a {
  color: var(--bleu);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tn-corps a:hover,
.tn-corps a:focus-visible { color: var(--nuit); background: var(--ciel); }

/* listes: la puce reprend le baton de comptage */

.tn-corps ul,
.tn-corps ol {
  max-width: none;
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
}
.tn-corps ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.tn-corps ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 2px; height: 14px;
  background: var(--bleu);
}
.tn-corps ol { counter-reset: tn-pas; }
.tn-corps ol li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 10px;
  counter-increment: tn-pas;
}
.tn-corps ol li::before {
  content: counter(tn-pas);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--compte);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--bleu);
}
.tn-corps li ul,
.tn-corps li ol { margin: 10px 0 0; }

/* tableau recapitulatif */

.tn-corps table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  overflow: hidden;
  margin: 0 0 1.6em;
  font-size: 0.95rem;
}
.tn-corps thead { background: var(--nuit); }
.tn-corps th {
  font-family: var(--compte);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--blanc);
  padding: 12px 14px;
  vertical-align: bottom;
}
.tn-corps tbody th {
  background: var(--ciel);
  color: var(--nuit);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  vertical-align: top;
}
.tn-corps td {
  padding: 12px 14px;
  border-top: 1px solid var(--bordure);
  color: var(--nuit);
  vertical-align: top;
}
.tn-corps tbody tr:nth-child(even) td { background: #FBF9F4; }

/* encadre */

.tn-corps aside {
  position: relative;
  background: var(--ciel);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 24px 24px 20px;
  margin: 1.8em 0 1.8em var(--debord);
}
.tn-corps aside::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 120px; height: var(--onglet);
  background: var(--jaune);
}
.tn-corps aside p { font-size: 0.99rem; }
.tn-corps aside > *:last-child { margin-bottom: 0; }

/* citation */

.tn-corps blockquote {
  margin: 1.8em 0;
  padding: 6px 0 6px 24px;
  border-left: 3px solid var(--bleu);
}
.tn-corps blockquote p {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--nuit);
}
.tn-corps blockquote > *:last-child { margin-bottom: 0; }

/* figure */

.tn-corps figure { margin: 1.8em 0; }
.tn-corps figure img { border: 1px solid var(--bleu); border-radius: var(--coin); }
.tn-corps figcaption { font-size: 0.86rem; color: var(--ardoise); margin-top: 8px; }

/* ------------------------------------------- appel a l action de fin --- */

.tn-article-appel {
  position: relative;
  background: var(--nuit);
  color: #E4EBF5;
  border-radius: var(--coin);
  padding: 30px 30px 28px;
  margin: 42px 0 0 var(--debord);
  max-width: 70ch;
  overflow: hidden;
}
.tn-article-appel::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 150px; height: var(--onglet);
  background: var(--jaune);
  z-index: 2;
}
.tn-article-appel > * { position: relative; z-index: 1; }
.tn-article-appel p { color: #CBD8EA; max-width: none; }
.tn-article-appel strong { color: var(--blanc); }
.tn-article-appel__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--blanc);
  margin: 6px 0 12px;
}

/* ------------------------------------------------- encart auteur ------ */

.tn-signature {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 26px 26px 22px;
  margin: 40px 0 0 var(--debord);
  max-width: 70ch;
}
.tn-signature::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 118px; height: var(--onglet);
  background: var(--bleu);
}
.tn-signature__photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--bleu);
  border-radius: var(--coin);
}
.tn-signature__role {
  font-family: var(--compte);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0 0 4px;
}
.tn-signature__nom {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--nuit);
  margin: 0 0 8px;
}
.tn-signature p { font-size: 0.96rem; color: var(--ardoise); margin-bottom: 0.7em; max-width: none; }
.tn-signature p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ bloc A lire aussi --- */

.tn-renvois {
  background: var(--ciel);
  padding: var(--pas) 0;
  margin-top: var(--pas);
}
.tn-renvois__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--nuit);
  margin: 0 0 28px;
  max-width: none;
}
.tn-renvois__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-left: var(--debord);
}
.tn-renvoi {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
}
.tn-renvoi::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--debord));
  width: 110px; height: var(--onglet);
  background: var(--bleu);
  z-index: 2;
}
.tn-renvoi:hover { border-color: var(--bleu); }
.tn-renvoi:hover::before { background: var(--jaune); }
.tn-renvoi img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--bleu);
}
.tn-renvoi__mots { padding: 18px 20px 20px; }
.tn-renvoi__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.04rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  max-width: none;
}
.tn-renvoi__titre a { color: var(--nuit); text-decoration: none; }
.tn-renvoi__titre a:hover,
.tn-renvoi__titre a:focus-visible { color: var(--bleu); text-decoration: underline; text-underline-offset: 4px; }
.tn-renvoi p { font-size: 0.92rem; color: var(--ardoise); margin: 0; max-width: none; }

/* -------------------- section Derniers articles de la page d accueil -- */

.tn-derniers__pied {
  margin: 34px 0 0;
  max-width: none;
}
.tn-derniers__pied a { font-weight: 600; }

/* ------------------- intitules de colonnes du pied de page en para --- */
/* Sur les pages du magazine, les h2 sont reserves au corps redactionnel:
   les intitules du pied de page prennent la meme forme sans etre des titres. */

.tn-pied__titre {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: 0.95rem;
  color: var(--blanc);
  margin: 0 0 14px;
  max-width: none;
}

/* ------------------------------------------- responsive du magazine --- */

@media (max-width: 1080px) {
  .tn-cahier-grille,
  .tn-renvois__grille { grid-template-columns: repeat(2, 1fr); }
  .tn-cahier-tete h1 { font-size: 2.4rem; }
  .tn-article-tete h1 { font-size: 2.3rem; }
}

@media (max-width: 720px) {
  .tn-cahier-grille,
  .tn-renvois__grille { grid-template-columns: 1fr; }
  .tn-cahier-tete h1,
  .tn-article-tete h1 { font-size: 1.9rem; }
  .tn-corps h2 { font-size: 1.45rem; }
  .tn-corps table { display: block; overflow-x: auto; }
  .tn-signature { grid-template-columns: 1fr; }
  .tn-chapo p { font-size: 1.04rem; }
  .tn-article-appel { padding: 26px 22px 24px; }
}