/* =====================================================================
   FROST STUDIO — pages annexes (mentions légales, confidentialité).
   Une colonne de lecture, typographie du site, rien d'autre.
   ===================================================================== */
:root { --ob-0: #050507; --ob-1: #070809; --bone: #e9e4dc; --bone-soft: rgba(233,228,220,.62); --bone-faint: rgba(233,228,220,.34); --cold: #b9c6d6; --gutter: clamp(1.25rem, 3.4vw, 3.25rem); --ease-out: cubic-bezier(.22,1,.36,1); --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --font-serif: "Instrument Serif", "Times New Roman", serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }
* { box-sizing: border-box; }
html { background: var(--ob-0); }
body { margin: 0; background: var(--ob-0); color: var(--bone); font-family: var(--font-display); -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.page__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(var(--gutter) * .6) var(--gutter); border-bottom: 1px solid rgba(233,228,220,.08); }
.page__logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--bone); text-decoration: none; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
.page__logo svg { width: 1.35rem; height: 1.35rem; }
.page__logo i { font: italic 1.08em/1 var(--font-serif); text-transform: none; letter-spacing: 0; color: rgba(233,228,220,.92); }
.page__back { color: var(--bone-soft); text-decoration: none; font-size: .6rem; }
.page__back:hover { color: var(--bone); }
.page__main { width: min(100%, 46rem); margin: 0 auto; padding: clamp(3rem, 8vh, 6rem) var(--gutter) 5rem; }
.page__label { margin: 0 0 1rem; font-size: .64rem; color: var(--bone-soft); }
.page__title { margin: 0 0 2.4rem; }
.page__title span { display: block; }
.page__title .sans { font-size: clamp(2.4rem, 6vw, 5.2rem); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.page__title .serif { font: italic clamp(1.8rem, 4.2vw, 3.6rem)/1 var(--font-serif); margin: .05em 0 0 clamp(.3rem, 2vw, 2rem); color: rgba(233,228,220,.94); }
.page__updated { margin: -1.4rem 0 2.4rem; font-size: .6rem; color: var(--bone-faint); }
.page__main h2 { margin: 2.6rem 0 .8rem; font: italic 400 1.7rem/1.1 var(--font-serif); }
.page__main h3 { margin: 1.6rem 0 .5rem; font-size: 1rem; font-weight: 700; }
.page__main p, .page__main li { font-size: 1rem; font-weight: 300; line-height: 1.65; color: rgba(233,228,220,.82); }
.page__main p { margin: 0 0 1rem; }
.page__main ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.page__main a { color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(233,228,220,.3); }
.page__main a:hover { border-color: var(--bone); }
.page__main dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0 0 1.2rem; }
.page__main dt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-faint); padding-top: .35rem; }
.page__main dd { margin: 0; font-weight: 300; line-height: 1.6; color: rgba(233,228,220,.86); }
/* à compléter par Axel : visible, jamais confondu avec du contenu final */
.todo { display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: var(--cold); border: 1px dashed rgba(185,198,214,.45); border-radius: .3rem; padding: .15rem .5rem; }
.page__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding: 1.2rem var(--gutter) 1.6rem; border-top: 1px solid rgba(233,228,220,.08); font-size: .58rem; letter-spacing: .14em; color: var(--bone-faint); }
.page__foot a { color: inherit; text-decoration: none; }
.page__foot a:hover { color: var(--bone); }
@media (max-width: 640px) { .page__main dl { grid-template-columns: 1fr; gap: .2rem; } .page__main dt { padding-top: .8rem; } }