:root{--tndSapin:#2e122a;--tndSapinVif:#461e35;--tndSapinClair:#703766;--tndJade:#da9ecf;--tndBrume:#eab3d2;--tndMenthe:#f5caf9;--tndFilet:#c48bc9;--tndGrisVert:#572a5b;--tndBlancCasse:#fdf8fe}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--tndSapin);background:var(--tndMenthe);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Radley',Georgia,serif;font-weight:400;letter-spacing:-.01em}
img{display:block;max-width:100%;height:auto}
a{color:var(--tndSapinVif);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.tndCadre{max-width:1120px;margin:0 auto;padding:0 18px}

/* ---- entête : volontairement NON collante, contrairement à la maquette ---- */
.tndEntete{border-bottom:3px double var(--tndFilet);background:var(--tndMenthe)}
.tndEnteteLigne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:17px 0;gap:14px}
.tndMarque{font-family:'Radley',Georgia,serif;font-size:1.3rem;color:var(--tndSapin);letter-spacing:.01em}
.tndMarque:hover{text-decoration:none;color:var(--tndSapinClair)}
.tndNav a{color:var(--tndGrisVert);font-weight:600;font-size:.89rem;margin-left:24px}
.tndNav a:hover{color:var(--tndSapinVif);text-decoration:none}

/* ---- bandeau d'ouverture ---- */
.tndBandeau{background:var(--tndBrume);border-bottom:1px solid var(--tndFilet);padding:50px 0 54px}
.tndBandeauGrille{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:center}
.tndBandeauVolet{min-width:0}
.tndRubrique{display:inline-block;border:1px solid var(--tndSapinVif);color:var(--tndSapinVif);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 11px;margin-bottom:18px}
.tndTitre{font-size:clamp(1.95rem,4vw,2.9rem);line-height:1.12;margin-bottom:18px}
.tndTitre em{font-style:italic;color:var(--tndSapinClair)}
.tndChapeau{font-size:1.12rem;color:var(--tndGrisVert);max-width:35rem}
.tndCompteurs{display:flex;gap:30px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--tndFilet)}
.tndCompteur strong{display:block;font-family:'Radley',Georgia,serif;font-size:1.45rem;color:var(--tndSapin);line-height:1.2}
.tndCompteur span{font-size:.81rem;color:#6b366d}
.tndVisuel img{width:100%;border:1px solid var(--tndFilet)}
.tndErsatz{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--tndJade);border:1px solid var(--tndFilet)}
.tndErsatz span{font-family:'Radley',Georgia,serif;font-size:4rem;color:var(--tndSapinVif)}

/* ---- colonne de lecture ---- */
.tndLecture{padding:54px 0 6px}
.tndColonne{max-width:43rem;margin:0 auto}
.tndColonne p{margin-bottom:1.3rem;color:var(--tndGrisVert)}
.tndTitrePartie{font-size:1.5rem;line-height:1.26;margin:2.3rem 0 .7rem;color:var(--tndSapin)}
.tndTitrePartie:before{content:"\00B7";color:var(--tndSapinClair);margin-right:.4em}
.tndTitreSousPartie{font-size:1.12rem;margin:1.7rem 0 .5rem}

/* ---- progression : ce que la page traite, dans l'ordre ---- */
.tndProgression{background:var(--tndBlancCasse);border:1px solid var(--tndFilet);padding:20px 24px;margin:0 0 32px}
.tndProgressionTitre{font-family:'Radley',Georgia,serif;font-size:1.02rem;color:var(--tndSapin);margin-bottom:12px}
.tndProgressionListe{list-style:none;margin:0;counter-reset:qv}
.tndProgressionListe li{counter-increment:qv;position:relative;padding-left:34px;margin-bottom:9px;font-size:.96rem;color:var(--tndGrisVert)}
.tndProgressionListe li:last-child{margin-bottom:0}
.tndProgressionListe li:before{content:counter(qv);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--tndJade);color:var(--tndSapin);font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Barlow',system-ui,sans-serif}

/* ---- relevé de l'exemple ---- */
.tndExemple{border-left:4px solid var(--tndJade);padding:4px 0 4px 22px;margin:0 0 30px}
.tndExempleTitre{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tndSapinClair);margin-bottom:10px}
.tndExempleLigne{display:flex;flex-wrap:wrap;gap:10px;font-size:.95rem;padding:5px 0;border-bottom:1px dotted var(--tndFilet)}
.tndExempleLigne:last-child{border-bottom:0}
.tndExempleCle{flex:0 0 11rem;color:var(--tndSapinClair);font-weight:600}
.tndExempleValeur{flex:1;min-width:12rem;color:var(--tndGrisVert)}
.tndPoints{list-style:none;margin:0 0 1.3rem}
.tndPoints li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--tndGrisVert)}
.tndPoints li:before{content:"\2713";position:absolute;left:0;color:var(--tndSapinClair);font-weight:700}
.tndManques{list-style:none;margin:0 0 1.3rem}
.tndManques li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--tndGrisVert)}
.tndManques li:before{content:"\003F";position:absolute;left:4px;color:var(--tndSapinClair);font-weight:700}

/* ---- cartes à visuel latéral ---- */
.tndSerie{margin:56px auto 0}
.tndSerieEntete{border-bottom:1px solid var(--tndFilet);padding-bottom:10px;margin-bottom:24px}
.tndSerieTitre{font-size:1.4rem;margin:0}
.tndSerieNote{font-size:.86rem;color:var(--tndGrisVert);margin-top:4px}
.tndListeFiches{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tndCarteFiche{display:flex;gap:16px;background:var(--tndBlancCasse);border:1px solid var(--tndFilet);padding:14px}
.tndCarteFiche:hover{background:#fef8fe}
.tndCarteVisuel{flex:0 0 132px}
.tndCarteVisuel img{width:100%;border:1px solid var(--tndFilet)}
.tndCarteErsatz{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--tndJade)}
.tndCarteErsatz span{font-family:'Radley',Georgia,serif;font-size:1.9rem;color:var(--tndSapinVif)}
.tndCarteCorps{flex:1;min-width:0}
.tndCarteSur{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tndSapinClair);margin-bottom:6px}
.tndCarteTitre{font-size:1.06rem;line-height:1.3;margin-bottom:6px}
.tndCarteTitre a{color:var(--tndSapin)}
.tndCarteResume{font-size:.92rem;color:var(--tndGrisVert);margin-bottom:8px}
.tndCarteLien{font-size:.79rem;font-weight:700;color:var(--tndSapinClair)}
.tndCarteLien:after{content:" \203A"}

/* ---- clôture : CLAIRE, là où les gabarits voisins la mettent en sombre ---- */
.tndCloture{background:var(--tndJade);border-top:1px solid var(--tndFilet);border-bottom:1px solid var(--tndFilet);padding:52px 0;margin-top:62px}
.tndClotureSurtitre{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tndSapinVif);margin-bottom:14px}
.tndCloture h2{font-size:1.7rem;margin-bottom:12px;max-width:34rem}
.tndCloture p{color:var(--tndGrisVert);max-width:42rem;margin-bottom:1.1rem}
.tndAcquis{list-style:none;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;max-width:46rem}
.tndAcquis li{position:relative;padding-left:24px;font-size:.96rem;color:var(--tndSapin)}
.tndAcquis li:before{content:"\2192";position:absolute;left:0;color:var(--tndSapinVif)}
.tndSommaireNu{list-style:none;margin:0;max-width:28rem}
.tndSommaireNu li{padding:10px 0;border-bottom:1px solid var(--tndFilet)}

/* ---- pied ---- */
.tndPied{background:var(--tndSapin);color:#c590bd;padding:38px 0;font-size:.9rem}
.tndPied a{color:var(--tndMenthe)}
.tndPiedGrille{display:grid;grid-template-columns:3fr 2fr;gap:30px}
.tndPiedTitre{font-family:'Radley',Georgia,serif;color:var(--tndMenthe);font-size:.95rem;margin-bottom:10px}

@media(max-width:900px){
.tndBandeauGrille{grid-template-columns:1fr;gap:28px}
.tndListeFiches,.tndAcquis,.tndPiedGrille{grid-template-columns:1fr}
/* Sans min-width:0 ni passage à la ligne, la barre de navigation déborde du viewport sur
   un téléphone : un élément flex ne se réduit pas sous la largeur de son contenu, et toute
   la page se met alors à défiler horizontalement. */
.tndNav{flex:1 1 100%;min-width:0}
.tndNav a{margin-left:0;margin-right:18px;display:inline-block}
}
@media(max-width:560px){
/* La carte à visuel latéral passe en pile : à 132 px de visuel, il ne reste pas de place
   pour un titre de deux lignes. */
.tndCarteFiche{flex-direction:column}
.tndCarteVisuel{flex:0 0 auto}
}
/* Titres mesurés au navigateur à 375 px : au-delà de deux lignes, un intitulé de partie
   cesse de se lire d'un coup d'œil. C'est la taille qui descend, pas l'intitulé. */
@media(max-width:480px){
.tndTitre{font-size:1.85rem}
.tndTitrePartie{font-size:1.2rem}
.tndSerieTitre{font-size:1.18rem}
.tndCloture h2{font-size:1.38rem}
.tndExempleCle{flex:1 1 100%}
}