/* Jetons partagés avec l'app (docs/design/systeme.md). Polices servies par le serveur, aucun CDN. */
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces_400Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces_400Regular_Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces_500Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter_500Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono_500Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --nuit: #1E1A39; --nuit-profonde: #15112A; --papier: #F6F1F4; --papier-chaud: #E8DDE4;
  --encre-douce: #433B60; --brume: #D9CEDA; --brume-basse: #A99FBD; --filet: #D9CEDA; --filet-nuit: #4B4370;
  --prune: #83368B; --prune-sombre: #6C2F72; --rose: #BE4E96; --rose-vif: #E879C0; --rose-pale: #FFD0E7;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --aube: linear-gradient(90deg, #050410, #0D0027, #1A1235, #2E1845, #5A2A5E, #A04A82, #BE4E96);
}

/* Deux thèmes, comme dans l'app : nuit (anonyme, salle) et papier (nommé, lecture). */
.theme-nuit { --fond: var(--nuit); --surface: var(--nuit-profonde); --texte: var(--papier); --texte-2: var(--brume); --legende: var(--brume-basse); --trait: var(--filet-nuit); --accent: var(--rose-vif); --axe: var(--brume-basse); --btn: var(--papier); --btn-texte: var(--nuit); --lien: var(--rose-vif); }
.theme-papier { --fond: var(--papier); --surface: var(--papier-chaud); --texte: var(--nuit); --texte-2: var(--encre-douce); --legende: var(--encre-douce); --trait: var(--filet); --accent: var(--rose); --axe: var(--encre-douce); --btn: var(--prune); --btn-texte: var(--papier); --lien: var(--prune); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* l'attribut hidden l'emporte sur tout display posé par une classe */
html { -webkit-text-size-adjust: 100%; }
html { font-size: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 1.0625rem/1.5 var(--sans); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Une région annoncée (role="status" ou "alert") reste dans la page, vide et invisible, puis se remplit : les lecteurs d'écran l'annoncent. */
.annonce.vide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::placeholder { color: var(--legende); opacity: 1; }
a { color: var(--lien); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.demo-band { display: flex; justify-content: space-between; align-items: center; min-height: 28px; padding: 4px 24px; background: var(--surface); color: var(--legende); font: 400 0.8125rem/1.2 var(--sans); }
.demo-band b { font: 500 11px/1 var(--mono); letter-spacing: 1.2px; }

.title { font: 400 clamp(30px, 4vw, 44px)/1.15 var(--serif); margin: 0; letter-spacing: -0.2px; }
.title em { font-style: italic; color: var(--accent); }
.heading { font: 500 1.375rem/1.3 var(--serif); margin: 0; }
.muted { color: var(--texte-2); }
.caption { font: 400 0.8125rem/1.4 var(--sans); color: var(--legende); }
.data { font: 400 0.8125rem/1.4 var(--mono); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.label { font: 500 11px/1.3 var(--mono); letter-spacing: 1.2px; color: var(--texte-2); }

.rule { border: 0; border-top: 1px solid var(--trait); margin: 0; }
.redline { height: 4px; background: var(--accent); border: 0; margin: 8px 0; }
.dawn { height: 6px; background: var(--aube); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 10px; border: 0; background: var(--btn); color: var(--btn-texte); font: 500 17px/1 var(--sans); cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(0.95); }
.btn-secondary { background: transparent; color: var(--texte); border: 1px solid var(--axe); }
.btn-quiet { background: transparent; color: var(--lien); padding: 0 8px; }

.field { display: grid; gap: 6px; }
.field label { font: 400 0.9375rem/1.4 var(--sans); color: var(--texte-2); }
.field input, .field select { min-height: 48px; padding: 0 14px; background: var(--surface); color: var(--texte); border: 0; border-bottom: 2px solid var(--axe); border-radius: 6px 6px 0 0; font: 400 17px var(--sans); }

/* La barre d'intervalle : l'axe, le point, les moustaches. */
.bar { position: relative; height: 56px; }
.bar .axis { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--axe); border-radius: 1px; }
.bar .axis::before, .bar .axis::after { content: ''; position: absolute; top: -4px; width: 1.5px; height: 10px; background: var(--axe); }
.bar .axis::before { left: 0; } .bar .axis::after { right: 0; }
.bar .ci { position: absolute; top: 21px; height: 4px; background: var(--accent); transition: left .4s cubic-bezier(.2,.7,.2,1), width .4s cubic-bezier(.2,.7,.2,1); }
.bar .ci::before, .bar .ci::after { content: ''; position: absolute; top: -5px; width: 2px; height: 14px; background: var(--accent); border-radius: 1px; }
.bar .ci::before { left: -1px; } .bar .ci::after { right: -1px; }
.bar .pt { position: absolute; top: 17px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--fond); transition: left .4s cubic-bezier(.2,.7,.2,1); }
.bar .ticks { position: absolute; left: 0; right: 0; top: 36px; display: flex; justify-content: space-between; font: 400 0.75rem var(--mono); color: var(--legende); }
/* la moitié des répondants : une bande pâle derrière l'axe, autre forme, autre couleur que la marge */
.bar .iqr { position: absolute; top: 17px; height: 12px; border-radius: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--legende); } /* le contour : la bande reste visible (WCAG 1.4.11) */
.theme-nuit .bar .iqr { background: var(--filet-nuit); }
.bar .bound { position: absolute; top: 0; font: 400 0.8125rem/1 var(--mono); color: var(--texte); transition: left .4s cubic-bezier(.2,.7,.2,1); }
.bar .bound.lo { transform: translateX(calc(-100% - 4px)); } .bar .bound.hi { transform: translateX(4px); }
.legend { display: grid; gap: 6px; font: 400 0.9375rem/1.4 var(--sans); color: var(--texte-2); }
.legend span::before { content: ''; display: inline-block; width: 18px; margin-right: 10px; vertical-align: middle; }
.legend .k-ci::before { height: 5px; background: var(--accent); } .legend .k-iqr::before { height: 12px; border-radius: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--legende); }
.theme-nuit .legend .k-iqr::before { background: var(--filet-nuit); }
.bar.empty .ci, .bar.empty .pt { display: none; }

@media (prefers-reduced-motion: reduce) { .bar .ci, .bar .pt, .bar .bound { transition: none; } }