/* Still Lab, aux couleurs de PostGradOsteo.
   Valeurs relevées sur postgradosteo.fr : police Inter, titres très gras et
   serrés, violet #681dff, encre #1d2033, cartes à coins de 22 px.
   Seule la scène 3D garde un fond sombre, pour que l'artère et les os se lisent. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #1d2033;
  --muted: #5b6074;
  --paper: #ffffff;
  --wash: #f8f6fd;
  --lavender: #f4f0ff;
  --lavender-2: #efe8ff;
  --line: #e8e4f1;
  --violet: #681dff;
  --violet-deep: #5212dd;
  --night: #170a3f;
  --peach: #ffefe6;
  --orange: #e2733f;
  --rust: #7a3a24;
  --blood: #ff6b6f;
  --shadow: 0 24px 50px -20px rgba(42, 20, 95, .25);
  --sans: "Inter", "Inter Fallback", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Sur la scène sombre. */
  --stage-text: #ffffff;
  --stage-muted: #d4cdee;
  --stage-line: rgba(212, 205, 238, .22);
  --stage-glass: rgba(23, 10, 63, .72);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

main { min-height: 0; position: relative; }

button, input { font: inherit; color: inherit; }

/* --- Barre du haut --- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(12px);
  box-shadow: 0 9px 28px -22px rgba(42, 20, 95, .38);
  position: relative;
  z-index: 2;
}
.brand { display: flex; align-items: baseline; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
.brand strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.brand strong em { font-style: normal; color: var(--violet); }
.brand span { color: var(--muted); font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trail { display: flex; gap: 4px; list-style: none; margin: 0; padding: 4px; font-size: .85rem; font-weight: 600; background: var(--lavender); border-radius: 99px; }
.trail li { padding: 5px 14px; border-radius: 99px; color: var(--muted); white-space: nowrap; }
.trail li.is-current { color: var(--violet-deep); background: var(--paper); box-shadow: 0 6px 16px -8px rgba(42, 20, 95, .35); }
.trail li.is-done { color: var(--ink); }

/* --- « Comment c'est fait » --- */
.how-btn { margin-left: auto; padding: 7px 14px; font-size: .85rem; white-space: nowrap; }
dialog#how {
  border: 0;
  padding: 0;
  width: min(700px, calc(100% - 24px));
  max-height: 88dvh;
  border-radius: 28px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 40px 80px -30px rgba(23, 10, 63, .6);
}
dialog#how::backdrop { background: rgba(23, 10, 63, .55); backdrop-filter: blur(4px); }
.how { position: relative; padding: 36px 32px 32px; }
.how h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin: 0 0 10px; }
.how .card { margin: 16px 0; }
.how .card ul { margin: 12px 0 0; padding-left: 18px; }
.how .card li { margin-bottom: 6px; }
.how .card li::marker { color: var(--t-strong); }
.how-close { position: absolute; top: 20px; right: 20px; padding: 6px 14px; font-size: .85rem; }
.how-call { font-weight: 800; letter-spacing: -.03em; font-size: 1.25rem; margin: 26px 0 0; }
.how .actions { margin-top: 14px; }
a.btn { display: inline-block; text-decoration: none; }

/* --- Écrans --- */
.screen { display: none; height: 100%; min-height: 0; }
#app[data-screen="plaque"] #plaque,
#app[data-screen="verdict"] #verdict,
#app[data-screen="bilan"] #bilan {
  display: block;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--wash), var(--paper) 420px);
}
#app[data-screen="atelier"] #atelier { display: grid; grid-template-columns: 400px 1fr; }

.sheet { max-width: 780px; margin: 0 auto; padding: 48px 24px 72px; }
.sheet h1 { font-weight: 800; font-size: clamp(2rem, 5.2vw, 3rem); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 12px; text-wrap: balance; }
.sheet h2 { font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.2; margin: 40px 0 10px; }
.lead { color: var(--muted); font-size: 1.08rem; margin: 0 0 24px; }
.kicker { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); margin: 0 0 14px; }

/* --- Boutons --- */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 99px;
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--violet); color: var(--violet-deep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.is-on { background: var(--violet); color: #fff; border-color: var(--violet); }
.btn.is-on:hover:not(:disabled) { color: #fff; }
/* Une réponse déjà donnée reste lisible une fois les boutons figés. */
.btn.is-on:disabled { opacity: 1; }
.btn-primary { background: var(--night); border-color: var(--night); color: #fff; border-radius: 14px; padding: 13px 20px; font-weight: 650; }
.btn-primary:hover:not(:disabled) { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- Cartes teintées, reprises de la page d'accueil de PostGradOsteo ---
   Mêmes teintes, même légère inclinaison qui se redresse au survol, même
   arrivée par le bas. */
.tone-rose { --t-bg: #fde9ef; --t-soft: #f9d5e0; --t-ink: #7b2442; --t-strong: #d9476f; }
.tone-lilac { --t-bg: #efe8ff; --t-soft: #e0d3ff; --t-ink: #4a1fb0; --t-strong: #7c4dff; }
.tone-sky { --t-bg: #e6f0ff; --t-soft: #cfe0fc; --t-ink: #1d4588; --t-strong: #3b78e0; }
.tone-peach { --t-bg: #ffefe6; --t-soft: #ffdccb; --t-ink: #7a3a24; --t-strong: #e2733f; }
.tone-sage { --t-bg: #e4f4ea; --t-soft: #c9ead7; --t-ink: #1b5a44; --t-strong: #25916a; }
.tone-butter { --t-bg: #fff5d8; --t-soft: #fce9ad; --t-ink: #5f490b; --t-strong: #c9960f; }

.card {
  position: relative;
  padding: 28px;
  border-radius: 28px;
  background: var(--t-bg);
  color: var(--t-ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .44s var(--ease), box-shadow .3s;
}
.card h3 { margin: 0; color: var(--ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.18; }
.card p { margin: 10px 0 0; }
.card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 50%; background: #fff; color: var(--t-strong); }
.card-icon svg { width: 26px; height: 26px; fill: currentColor; }

@media (hover: hover) {
  .card:hover, .card:focus-within { transform: rotate(0deg) translateY(-6px); box-shadow: 0 30px 50px -34px rgba(42, 20, 95, .5); }
  /* Une carte qui contient des boutons se redresse sans bouger sous le curseur. */
  .card.is-quiet:hover, .card.is-quiet:focus-within { transform: rotate(0deg); box-shadow: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(34px) rotate(var(--tilt, 0deg)); }
}
.is-entering .card, .card.is-new, .reading {
  animation: rise .64s calc(var(--i, 0) * 90ms) var(--ease) backwards;
}

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 20px 0 0; padding: 6px; }

/* --- La phrase en question --- */
.plaque {
  position: relative;
  margin: 28px 0;
  padding: 48px 36px 40px;
  border-radius: 22px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.2px) 0 0 / 18px 18px,
    linear-gradient(140deg, var(--violet), var(--violet-deep));
  box-shadow: var(--shadow);
}
.plaque q {
  display: block;
  quotes: "« " " »";
  font-weight: 800;
  letter-spacing: -.04em;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 1.12;
  text-wrap: balance;
}
.plaque cite { display: block; margin-top: 18px; font-style: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--stage-muted); }
.plaque small { display: block; margin-top: 8px; font-size: 1rem; color: var(--stage-muted); }
.plaque.is-struck { background: var(--lavender); color: var(--muted); box-shadow: none; }
.plaque.is-struck q { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--orange); }
.plaque.is-struck cite, .plaque.is-struck small { color: var(--muted); }

.question { font-weight: 800; letter-spacing: -.03em; font-size: 1.35rem; margin: 30px 0 0; }

.source { margin: 26px 6px; }
.source blockquote { margin: 0; color: var(--ink); font-weight: 800; letter-spacing: -.03em; font-size: 1.5rem; line-height: 1.22; }
.source .fr { margin: 12px 0 0; font-size: 1.05rem; }
.source footer { margin-top: 18px; font-size: .86rem; font-weight: 600; }
.source a { color: inherit; }

.note {
  padding: 12px 16px;
  margin: 18px 0;
  color: var(--rust);
  font-size: .92rem;
  background: var(--peach);
  border-radius: 14px;
}
.result { font-weight: 800; font-size: 1.5rem; margin: 26px 0 6px; }

/* --- L'atelier --- */
.panel {
  overflow-y: auto;
  padding: 26px 24px 32px;
  border-right: 1px solid var(--line);
  background: var(--paper);
}
.panel h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; margin: 0 0 12px; line-height: 1.15; }
.panel p { margin: 0 0 12px; }
.panel .step-count { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); margin-bottom: 10px; }
.finding { margin: 22px 2px; padding: 20px 22px; border-radius: 24px; }
.finding p { margin: 0 0 8px; }
.finding strong { color: var(--ink); font-size: 1.08rem; letter-spacing: -.02em; }
.finding p:last-child { margin-bottom: 0; }
.nudge { color: var(--muted); font-size: .95rem; }

.field { margin: 16px 0; }
.field label { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; font-weight: 500; margin-bottom: 4px; }
.field output { color: var(--violet-deep); font-variant-numeric: tabular-nums; font-weight: 700; }
.field small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
input[type="range"] { width: 100%; accent-color: var(--violet); }
.group-title { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; }
.seg { display: flex; gap: 4px; margin-bottom: 8px; padding: 4px; background: var(--lavender); border-radius: 99px; }
.seg .btn { flex: 1; padding: 7px 10px; border-color: transparent; background: transparent; color: var(--muted); }
.seg .btn.is-on { background: var(--paper); color: var(--violet-deep); box-shadow: 0 6px 16px -8px rgba(42, 20, 95, .35); }
.seg .btn:disabled { opacity: .4; }

.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--stage-text);
  background: radial-gradient(ellipse at 55% 45%, #3a2191 0%, #1f0e55 48%, var(--night) 78%, #0f062b 100%);
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.gauge { position: absolute; top: 22px; left: 26px; pointer-events: none; }
.gauge-value { font-weight: 800; letter-spacing: -.05em; font-size: clamp(2.6rem, 5.4vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-label { color: var(--stage-muted); font-size: .92rem; margin-top: 6px; max-width: 220px; }
.gauge-chip { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: .8rem; font-weight: 600; }
.gauge.is-low .gauge-value { color: #ffb37a; }
.gauge.is-critical .gauge-value { color: var(--blood); }

.chartbox {
  position: absolute; right: 20px; bottom: 20px; margin: 0;
  width: min(340px, 42%);
  padding: 12px 12px 10px;
  background: var(--stage-glass);
  border: 1px solid var(--stage-line);
  border-radius: 22px;
  backdrop-filter: blur(8px);
}
#chart { display: block; width: 100%; height: 170px; }
#legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--stage-muted); margin-top: 4px; }
#legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--swatch); margin-right: 5px; vertical-align: middle; }

.squeeze {
  position: absolute; left: 26px; bottom: 24px;
  width: min(360px, 46%);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 12px 16px;
  background: var(--stage-glass);
  border: 1px solid var(--stage-line);
  border-radius: 22px;
  backdrop-filter: blur(8px);
  font-size: .9rem;
  font-weight: 600;
}
.squeeze input { grid-column: 1 / -1; accent-color: #a98bff; }
.squeeze output { font-weight: 700; font-variant-numeric: tabular-nums; }
.squeeze.is-locked { opacity: .5; }

.schema-note { position: absolute; top: 22px; right: 22px; margin: 0; max-width: 250px; text-align: right; font-size: .78rem; color: var(--stage-muted); pointer-events: none; }

/* --- Le verdict --- */
.stamp { margin: 20px 4px; }
.stamp .btn { border-color: transparent; }
.stamp .btn.is-on { background: var(--t-strong); border-color: var(--t-strong); }
.stamp .reading { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--t-soft); }
.stamp .reading p { margin: 8px 0 0; }
.tag { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: .82rem; font-weight: 650; background: #fff; color: var(--t-ink); }
.tag.same::before { content: "= "; }
.tag.other::before { content: "≠ "; }

.score { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 14px 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.score dt { color: var(--ink); font-weight: 600; }
.score dt small { display: block; color: var(--muted); font-weight: 400; }
.score dd { margin: 0; font-weight: 800; letter-spacing: -.03em; font-size: 1.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.score .plus { color: var(--violet-deep); }
.score .minus { color: var(--orange); }

.sources { padding-left: 18px; color: var(--muted); font-size: .92rem; }
.sources li { margin-bottom: 8px; }
.sources a { color: var(--violet-deep); font-weight: 600; }
.sheet ul.plain { padding-left: 18px; }
.sheet ul.plain li { margin-bottom: 6px; }
.sheet ul.plain li::marker, .sources li::marker { color: var(--violet); }

/* --- Accueil du lab --- */
/* Le dégradé ne se répète pas plus bas dans la page. */
body.hub { height: auto; min-height: 100%; background: linear-gradient(180deg, var(--wash), var(--paper)) no-repeat top / 100% 560px var(--paper); }
.hub .bar { position: sticky; top: 0; }
.hub .sheet { max-width: 1040px; padding: 44px 24px 12px; }
.hub-hero h1 { font-size: clamp(2.3rem, 6.2vw, 4rem); line-height: 1.04; max-width: 17ch; }
.hub-hero .lead { max-width: 60ch; margin-bottom: 10px; }
.hl { color: var(--violet); }
.hub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-cards .card { display: flex; flex-direction: column; height: 100%; min-height: 270px; text-decoration: none; }
.card-tag { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.card-go { margin-top: auto; padding-top: 22px; font-weight: 650; color: var(--ink); }
.card.is-soon { opacity: .8; }
.card.is-soon:hover { transform: rotate(var(--tilt, 0deg)); box-shadow: none; }
#comment p { max-width: 68ch; }
.foot { max-width: 1040px; margin: 56px auto 0; padding: 24px 24px 48px; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); }
.foot a { color: var(--violet-deep); font-weight: 600; }

/* --- Petits écrans --- */
@media (max-width: 880px) {
  .bar { padding: 10px 14px; }
  .brand span { display: none; }
  .bar { gap: 8px; }
  .how-btn, a.how-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; flex: none; }
  .how-btn span { display: none; }
  .how-btn::before { content: "?"; font-weight: 800; }
  .how { padding: 28px 18px 22px; }
  .trail { font-size: .76rem; }
  .trail li { padding: 4px 9px; }
  #app[data-screen="atelier"] #atelier { grid-template-columns: 1fr; grid-template-rows: 46dvh 1fr; }
  .stage { order: -1; }
  .panel { border-right: 0; padding: 18px 16px; }
  .schema-note { display: none; }
  .gauge { top: 12px; left: 14px; }
  .gauge-label { font-size: .82rem; }
  .chartbox { right: 10px; bottom: 10px; width: 46%; padding: 6px; border-radius: 16px; }
  #chart { height: 110px; }
  #legend { display: none; }
  .squeeze { left: 10px; bottom: 10px; width: 48%; padding: 8px 12px; border-radius: 16px; }
  .sheet { padding: 28px 16px 56px; }
  .plaque { padding: 36px 20px 30px; }
  .card { padding: 22px; border-radius: 24px; }
  .hub .sheet { padding: 28px 16px 8px; }
  .hub-cards { grid-template-columns: 1fr; }
  .hub-cards .card { min-height: 0; }
  .foot { padding: 20px 16px 40px; }
  .cards { grid-template-columns: 1fr; gap: 14px; padding: 2px; }
  .score { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
  .is-entering .card, .card.is-new, .reading { animation: none; }
  .card:hover, .card:focus-within { transform: rotate(var(--tilt, 0deg)); }
}