/* Page de présentation (apprendre-le-tchetchene/) : même nuit que Veillée, Jost sans italique. */
@font-face{font-family:Jost;font-weight:300;font-display:swap;src:url(/fonts/jost-300.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:400;font-display:swap;src:url(/fonts/jost-400.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:500;font-display:swap;src:url(/fonts/jost-500.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:600;font-display:swap;src:url(/fonts/jost-600.woff2) format("woff2")}

:root{--night:#121922;--deep:#18212b;--snow:#f3eee4;--mist:#bcc3c4;--line:rgba(243,238,228,.16);--measure:38rem}
*{box-sizing:border-box;font-style:normal}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--snow);font:400 1.0625rem/1.7 Jost,system-ui,sans-serif}
a{color:var(--snow);text-decoration-thickness:1px;text-underline-offset:.2em}
a:focus-visible,summary:focus-visible{outline:2px solid var(--snow);outline-offset:4px;border-radius:4px}
strong{font-weight:600}

/* Ouverture : la peinture d'accueil de Nokh, le titre posé sur sa nuit. */
.hero{position:relative;display:grid}
.hero-art{display:block;width:100%;height:min(74svh,640px);object-fit:cover;object-position:28% 52%}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(to bottom,rgba(18,25,34,0),var(--night) 88%);pointer-events:none}
.hero-text{position:relative;z-index:1;margin:-9rem auto 0;padding:0 1rem 2.5rem;width:100%;max-width:calc(var(--measure) + 2rem)}
.brand{margin:0 0 .75rem;font-weight:500;font-size:1.125rem;letter-spacing:.04em}
.brand a{text-decoration:none}
h1{margin:0 0 1rem;font-weight:500;font-size:clamp(2.25rem,6.6vw,3.75rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.lede{margin:0 0 1.75rem;color:var(--mist);font-size:1.1875rem;line-height:1.6;max-width:34rem}
.cta{display:inline-block;padding:.85rem 1.5rem;border-radius:999px;background:var(--snow);color:var(--night);font-weight:600;text-decoration:none}
.cta:hover{background:#fff}

@media (min-width:900px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:center;min-height:100svh;max-width:72rem;margin:0 auto;padding:0 2rem;gap:4rem}
 .hero::after{display:none}
 .hero-art{grid-column:2;grid-row:1;height:min(88svh,780px);border-radius:999px 999px 18px 18px;object-position:30% 50%}
 .hero-text{grid-column:1;grid-row:1;margin:0;padding:0}
}

/* Sections : une seule colonne de lecture. */
main{padding-bottom:2rem}
.section{max-width:calc(var(--measure) + 2rem);margin:0 auto;padding:3rem 1rem 0}
h2{margin:0 0 1rem;font-weight:500;font-size:1.625rem;line-height:1.25}
h3{margin:0 0 .25rem;font-weight:500;font-size:1.1875rem}
p{margin:0 0 1rem}
.note,.aside{color:var(--mist)}
.aside{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}

/* Premiers mots : la lecture latine en grand, le sens dessous. */
.words{margin:1.5rem 0;display:grid;gap:0}
.words div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:baseline;padding:.9rem 0;border-top:1px solid var(--line)}
.words div:last-child{border-bottom:1px solid var(--line)}
.words dt{font-size:1.5rem;font-weight:500;line-height:1.25}
.words dd{margin:0;color:var(--mist)}

/* Le parcours : un chemin qui monte, étape après étape. */
.stages{list-style:none;margin:1.5rem 0 0;padding:0;position:relative}
.stages::before{content:"";position:absolute;left:1rem;top:1rem;bottom:1rem;width:1px;background:var(--line)}
.stage{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1rem;padding-bottom:1.5rem}
.stage-mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--night);border:1px solid var(--snow);font-weight:500;font-size:.9375rem;position:relative}
.stage-what{color:var(--snow);margin-bottom:.35rem}
.stage p:not(.stage-what){color:var(--mist)}

.plain{margin:0;padding:0;list-style:none}
.plain li{padding:.75rem 0;border-top:1px solid var(--line)}
.plain li:last-child{border-bottom:1px solid var(--line)}

/* Questions : ouvertes au toucher, sans script. */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;cursor:pointer;font-weight:500;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--mist);font-weight:300;font-size:1.375rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--mist);margin:0 0 1rem}

.closing{text-align:left;padding-top:3.5rem}
.closing p:first-child{font-size:1.375rem;font-weight:500;line-height:1.35}

.footer{max-width:calc(var(--measure) + 2rem);margin:0 auto;padding:2.5rem 1rem 3rem;color:var(--mist);font-size:.9375rem;border-top:1px solid var(--line)}
.footer p{margin:0 0 .35rem}