/* En vol ! — interface. 1rem = 10 unités d'une maquette portrait de 1000 × 1800 (taille calculée dans main.js),
   les éléments sont ancrés aux bords de l'écran : borne verticale, mobile et paysage. */
:root {
  /* couleurs de la marque (SVR Lazartigue par défaut ; brand/brand.css les redéfinit) : valeur et triplet rgb */
  --navy: #06182b; --navy2: #0b2741; --blue: #1f8fe6; --cyan: #5cc8ff; --ice: #e8f4ff; --lcd: #e4f23c;
  --navy-rgb: 6, 24, 43; --blue-rgb: 31, 143, 230; --cyan-rgb: 92, 200, 255; --ice-rgb: 232, 244, 255; --lcd-rgb: 228, 242, 60;
  --italic: italic;   /* titres et chiffres en italique */
  --ok: #3be08a; --warn: #ffb21f; --bad: #ff4f4f; --lull: #9fd9ff;
  --glass: rgba(var(--navy-rgb), 0.62); --line: rgba(var(--ice-rgb), 0.22);
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; --text: 'Barlow', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--navy); color: var(--ice); }
body { font-family: var(--text); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui .slider, #ui .opt, #ui .letter { pointer-events: auto; }

/* --- écrans --- */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
body[data-state="loading"] #loader, body[data-state="attract"] #attract, body[data-state="tutorial"] #tutorial,
body[data-state="setup"] #setup, body[data-state="play"] #hud, body[data-state="legend"] #legend, body[data-state="legend"] #hud,
body[data-state="finish"] #finish { opacity: 1; visibility: visible; transition: opacity .45s; }
body[data-state="legend"] #hud .control, body[data-state="legend"] #hud .heel, body[data-state="legend"] #hud .coach { opacity: 0.25; }

/* --- marque --- */
#brand { position: absolute; left: 0; right: 0; top: var(--safe-t); height: 9rem; display: flex; align-items: center; justify-content: space-between; padding: 0 3.2rem; z-index: 5;
  background: linear-gradient(to bottom, rgba(var(--navy-rgb), 0.75), rgba(var(--navy-rgb), 0)); transition: opacity .4s; }
body[data-state="loading"] #brand { opacity: 0; }
.logo { display: block; height: 8.2rem; width: auto; filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.35)); }
.course-tag { text-align: right; font-family: var(--cond); text-transform: uppercase; line-height: 1.05; }
.course-tag span { display: block; font-weight: 700; font-size: 2.6rem; letter-spacing: 0.15rem; }
.course-tag small { display: block; font-weight: 500; font-size: 1.7rem; letter-spacing: 0.2rem; color: var(--cyan); }

/* --- titres communs --- */
.title { font-family: var(--cond); font-weight: 800; font-size: 19rem; line-height: 0.85; letter-spacing: -0.2rem; font-style: var(--italic); text-shadow: 0 0.6rem 3rem rgba(0,0,0,0.35); }
.title em { color: var(--cyan); margin-left: 1rem; }
.kicker { font-family: var(--cond); font-weight: 600; font-size: 2.6rem; letter-spacing: 0.6rem; text-transform: uppercase; color: var(--cyan); }
h2 { font-family: var(--cond); font-weight: 800; font-size: 6.4rem; line-height: 0.95; text-transform: uppercase; font-style: var(--italic); }
h3 { font-family: var(--cond); font-weight: 700; font-size: 2.6rem; letter-spacing: 0.3rem; text-transform: uppercase; }
.cta { font-family: var(--cond); font-weight: 800; font-size: 4.6rem; font-style: var(--italic); text-transform: uppercase; letter-spacing: 0.2rem;
  background: var(--blue); color: #fff; padding: 2.2rem 6rem; border-radius: 0.6rem; box-shadow: 0 1rem 3rem rgba(var(--blue-rgb), 0.45), inset 0 -0.4rem 0 rgba(0,0,0,0.2);
  clip-path: polygon(3rem 0, 100% 0, calc(100% - 3rem) 100%, 0 100%); }
.cta.small { font-size: 3.4rem; padding: 1.6rem 4.6rem; }
.cta.ghost { background: transparent; border: 0.2rem solid var(--line); box-shadow: none; clip-path: none; font-size: 3rem; padding: 1.4rem 4rem; }
.cta:active { transform: translateY(0.3rem); }

/* --- chargement --- */
#loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; background: radial-gradient(circle at 50% 40%, #0f3a62, var(--navy) 70%); }
#loader .bar { width: 50rem; height: 0.8rem; background: rgba(255,255,255,0.12); border-radius: 1rem; overflow: hidden; }
#loader .bar span { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .3s; }
#loader p { font-family: var(--cond); font-size: 2.6rem; letter-spacing: 0.3rem; text-transform: uppercase; opacity: 0.7; }

/* --- attente --- */
#attract { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 15rem 5rem calc(6rem + var(--safe-b)); text-align: center;
  background: linear-gradient(to bottom, rgba(var(--navy-rgb), 0.2), rgba(var(--navy-rgb), 0) 40%, rgba(var(--navy-rgb), 0) 55%, rgba(var(--navy-rgb), 0.85)); }
#attract .pitch { font-size: 3rem; line-height: 1.35; max-width: 76rem; margin: 3rem auto 0; text-shadow: 0 0.2rem 1rem rgba(0,0,0,0.5); }
#attract .cta { margin: auto 0 5rem; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05); box-shadow: 0 1rem 5rem rgba(var(--cyan-rgb), 0.65); } }
.board { width: 100%; max-width: 70rem; }
.board h3 { color: var(--cyan); margin-bottom: 1.4rem; }
.board ol { list-style: none; display: grid; gap: 0.6rem; }
.board li { display: grid; grid-template-columns: 5rem 1fr auto; align-items: baseline; gap: 1.6rem; font-family: var(--cond); font-size: 3rem; font-weight: 600;
  background: var(--glass); padding: 0.9rem 2rem; border-left: 0.4rem solid var(--blue); text-align: left; }
.board li b { color: var(--cyan); font-weight: 800; }
.board li em { font-style: normal; font-variant-numeric: tabular-nums; }
.board li.me { background: rgba(var(--blue-rgb), 0.55); border-left-color: var(--lcd); }
.board li.empty { opacity: 0.5; }

/* --- tutoriel --- */
#tutorial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; padding: 12rem 5rem calc(5rem + var(--safe-b));
  background: rgba(var(--navy-rgb), 0.86); backdrop-filter: blur(0.6rem); text-align: center; }
#tutorial h2 { font-size: 5.6rem; max-width: 80rem; }
.tuto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; max-width: 90rem; }
.tuto-card { background: rgba(255,255,255,0.06); border: 0.15rem solid var(--line); border-radius: 1rem; padding: 3rem 2.6rem; text-align: left; }
.tuto-card.wide { grid-column: span 2; display: grid; grid-template-columns: 12rem 1fr; column-gap: 2.6rem; align-items: center; }
.tuto-card.wide .tuto-ico { grid-row: span 2; }
.tuto-card h3 { margin: 1.6rem 0 1rem; } .tuto-card.wide h3 { margin: 0 0 0.8rem; }
.tuto-card h3 small { font-size: 1.9rem; color: var(--cyan); margin-left: 0.8rem; }
.tuto-card p { font-size: 2.5rem; line-height: 1.35; opacity: 0.9; }
.tuto-card strong { color: var(--cyan); font-weight: 600; }
.tuto-ico { height: 14rem; position: relative; }
.tuto-ico.foil i, .tuto-ico.sheet i { position: absolute; left: 3rem; top: 0; bottom: 0; width: 5rem; border-radius: 3rem; background: rgba(255,255,255,0.12); }
.tuto-ico.foil b, .tuto-ico.sheet b { position: absolute; left: 2rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0.4rem rgba(255,255,255,0.8); animation: thumb 2.4s ease-in-out infinite; }
.tuto-ico.sheet b { animation-delay: -1.2s; background: #fff; }
@keyframes thumb { 0%, 100% { top: 6rem; } 50% { top: 0.5rem; } }
.tuto-ico.gust { height: 12rem; border-radius: 50%; background: radial-gradient(circle at 45% 45%, rgba(var(--navy-rgb), 0.95), rgba(var(--navy-rgb), 0.4) 55%, transparent 70%),
  repeating-linear-gradient(100deg, rgba(255,255,255,0.0) 0 1.4rem, rgba(255,255,255,0.18) 1.4rem 1.6rem); animation: drift 3s linear infinite; }
@keyframes drift { from { transform: translateX(2rem); } to { transform: translateX(-2rem); } }
.keys { font-size: 2rem; opacity: 0.55; }
@media (pointer: coarse) { .keys { display: none; } }

/* --- choix des voiles --- */
#setup { display: flex; flex-direction: column; gap: 2.2rem; padding: 11rem 4rem calc(4rem + var(--safe-b));
  background: linear-gradient(to bottom, rgba(var(--navy-rgb), 0.92) 0%, rgba(var(--navy-rgb), 0.55) 30%, rgba(var(--navy-rgb), 0.1) 46%, rgba(var(--navy-rgb), 0.1) 52%, rgba(var(--navy-rgb), 0.9) 64%); }
.setup-head { min-height: 18rem; padding-right: 36rem; }
.setup-head p:last-child { font-size: 2.4rem; opacity: 0.75; margin-top: 0.4rem; }
.setup-map { position: absolute; right: 3rem; top: 10rem; width: 33rem; height: 19.8rem; }
#map { width: 100%; height: 100%; }
#map .land { fill: rgba(var(--ice-rgb), 0.16); stroke: rgba(var(--ice-rgb), 0.3); stroke-width: 0.6; }
#map .route { fill: none; stroke: rgba(var(--cyan-rgb), 0.5); stroke-width: 2; stroke-dasharray: 4 4; }
#map .done { fill: none; stroke: var(--cyan); stroke-width: 3; }
#map .leg-now { fill: none; stroke: var(--lcd); stroke-width: 4; }
#map .city { fill: #fff; } #map text { fill: #fff; font: 600 13px var(--cond); text-transform: uppercase; letter-spacing: 1px; }
#map .pos { fill: var(--lcd); stroke: var(--navy); stroke-width: 2; }
.weather { display: grid; grid-template-columns: 14rem repeat(3, 1fr); gap: 1.6rem; align-items: center; background: var(--glass); border: 0.15rem solid var(--line); border-radius: 1rem; padding: 1.8rem 2.4rem; }
.wind-rose svg { width: 12rem; height: 12rem; }
.wind-rose .ring { fill: none; stroke: var(--line); stroke-width: 2; }
.wind-rose .hull { fill: var(--blue); }
#wind-arrow path { fill: none; stroke: var(--lcd); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.wx b { display: block; font-family: var(--cond); font-weight: 800; font-size: 6.4rem; line-height: 1; color: var(--lcd); font-variant-numeric: tabular-nums; }
.wx span { font-family: var(--cond); font-size: 2.1rem; letter-spacing: 0.15rem; text-transform: uppercase; opacity: 0.8; }
.brief { font-size: 2.6rem; line-height: 1.35; max-width: 92rem; }
.choice[data-kind="main"] { margin-top: auto; }
.choice h3 { margin-bottom: 1rem; }
.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.opt { pointer-events: auto; background: var(--glass); border: 0.2rem solid var(--line); border-radius: 0.8rem; padding: 1.6rem 1rem 1.4rem; text-align: center; transition: background .15s, border-color .15s, transform .15s; }
.opt b { display: block; font-family: var(--cond); font-weight: 800; font-size: 4.2rem; line-height: 1; }
.opt span { display: block; font-family: var(--cond); font-size: 2.1rem; margin-top: 0.6rem; opacity: 0.75; }
.opt.on { background: var(--blue); border-color: #fff; transform: translateY(-0.4rem); box-shadow: 0 0.8rem 2.4rem rgba(var(--blue-rgb), 0.5); }
.opt.on span { opacity: 1; }
.setup-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.timer { position: relative; width: 10rem; height: 10rem; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 3; }
.timer circle.t { stroke: var(--cyan); stroke-dasharray: 106.8; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.timer span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--cond); font-weight: 800; font-size: 4rem; }
.verdict { position: absolute; left: 4rem; right: 4rem; top: 48%; text-align: center; font-family: var(--cond); font-weight: 800; font-style: var(--italic); font-size: 6rem; text-transform: uppercase;
  opacity: 0; transform: scale(0.9); transition: opacity .3s, transform .3s; text-shadow: 0 0.4rem 2rem rgba(0,0,0,0.6); }
.verdict small { display: block; font-family: var(--text); font-style: normal; font-weight: 500; font-size: 2.6rem; text-transform: none; margin-top: 1rem; }
.verdict.show { opacity: 1; transform: none; }
.verdict.good { color: var(--ok); } .verdict.over { color: var(--warn); } .verdict.under { color: var(--lull); }

/* --- HUD --- */
.topbar { position: absolute; left: 3.2rem; right: 3.2rem; top: calc(10rem + var(--safe-t)); display: flex; justify-content: space-between; align-items: flex-end; }
.topbar .leg b { display: block; font-family: var(--cond); font-weight: 800; font-size: 3.6rem; text-transform: uppercase; font-style: var(--italic); line-height: 1; }
.topbar .leg span, .topbar .clock span { font-family: var(--cond); font-size: 2rem; letter-spacing: 0.2rem; text-transform: uppercase; opacity: 0.75; }
.topbar .clock { text-align: right; }
.topbar .clock b { display: block; font-family: var(--cond); font-weight: 700; font-size: 3.6rem; font-variant-numeric: tabular-nums; line-height: 1; }
.progress { position: absolute; left: 3.2rem; right: 3.2rem; top: calc(16.4rem + var(--safe-t)); }
.progress .track { position: relative; height: 0.8rem; background: rgba(255,255,255,0.18); border-radius: 1rem; }
.progress .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(to right, var(--blue), var(--cyan)); border-radius: 1rem; }
.progress .boat { position: absolute; top: 50%; left: 0; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5rem rgba(var(--cyan-rgb), 0.4); }
.progress .ticks i { position: absolute; top: -0.6rem; width: 0.3rem; height: 2rem; background: rgba(255,255,255,0.5); }

.lcd { position: absolute; left: 3.2rem; top: calc(21rem + var(--safe-t)); width: 36rem; padding: 1.6rem 2.2rem 0.8rem; border-radius: 1.4rem;
  background: linear-gradient(#141818, #050707); border: 0.4rem solid #5b5f62; box-shadow: 0 0.8rem 2.4rem rgba(0,0,0,0.5), inset 0 0 1.6rem rgba(0,0,0,0.8); }
.lcd .row { display: grid; grid-template-columns: 1fr auto 3rem; align-items: baseline; color: var(--lcd); font-family: var(--cond); font-style: var(--italic); }
.lcd .row span { font-size: 2.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15rem; opacity: 0.8; }
.lcd .row b { font-size: 4.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; text-shadow: 0 0 1.2rem rgba(var(--lcd-rgb), 0.35); }
.lcd .row em { font-size: 2rem; font-weight: 700; padding-left: 0.6rem; }
.lcd small { display: block; text-align: center; font-size: 1.3rem; letter-spacing: 0.3rem; color: rgba(255,255,255,0.35); margin-top: 0.4rem; }
.speed { position: absolute; right: 3.2rem; top: calc(20rem + var(--safe-t)); text-align: right; }
.speed b { display: block; font-family: var(--cond); font-weight: 800; font-style: var(--italic); font-size: 13rem; line-height: 0.9; font-variant-numeric: tabular-nums; text-shadow: 0 0.4rem 2rem rgba(0,0,0,0.45); }
.speed span { font-family: var(--cond); font-weight: 600; font-size: 2.4rem; letter-spacing: 0.4rem; text-transform: uppercase; }
.flight-tag { display: table; margin: 1rem 0 0 auto; font-family: var(--cond); font-weight: 800; font-size: 2.2rem; letter-spacing: 0.3rem; padding: 0.4rem 1.4rem; border-radius: 0.4rem; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
.flight-tag.on { background: var(--ok); color: var(--navy); }

.gust-chip { position: absolute; right: 3.2rem; top: calc(41rem + var(--safe-t)); display: flex; align-items: center; gap: 1.2rem; padding: 1rem 2rem; border-radius: 4rem;
  font-family: var(--cond); font-weight: 800; font-size: 3rem; letter-spacing: 0.15rem; text-transform: uppercase; background: var(--warn); color: var(--navy);
  opacity: 0; transform: translateX(3rem); transition: opacity .25s, transform .25s; }
.gust-chip.show { opacity: 1; transform: none; }
.gust-chip.lull { background: var(--lull); }
.gust-chip.squall { background: var(--bad); color: #fff; }
.gust-chip i { width: 3rem; height: 3rem; border-radius: 50%; border: 0.4rem solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-family: var(--cond); font-weight: 800; font-style: var(--italic); font-size: 9rem; line-height: 0.95; text-transform: uppercase;
  text-shadow: 0 0.5rem 2.4rem rgba(0,0,0,0.55); opacity: 0; transform: scale(0.8); pointer-events: none; }
.toast small { display: block; font-size: 3.2rem; font-style: normal; letter-spacing: 0.2rem; margin-top: 1rem; }
.toast.show { animation: toast 1.6s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes toast { 0% { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: scale(1.05); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3rem); } }
.toast.good { color: var(--ok); } .toast.bad { color: var(--bad); } .toast.warn { color: var(--warn); } .toast.info { color: #fff; }


/* commandes */
.control { position: absolute; bottom: calc(3.6rem + var(--safe-b)); width: 25rem; display: flex; flex-direction: column; gap: 1.2rem; }
.control.left { left: 2.4rem; } .control.right { right: 2.4rem; }
.control .label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--cond); text-transform: uppercase; padding: 0 0.6rem; }
.control .label b { font-weight: 800; font-size: 3.6rem; font-style: var(--italic); letter-spacing: 0.15rem; }
.control .label span { font-weight: 600; font-size: 2.4rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.control .body { display: flex; gap: 1.6rem; height: 56rem; }
.control.right .body { flex-direction: row; }
.slider { position: relative; flex: 0 0 15rem; touch-action: none; cursor: grab; }
.slider .rail { position: absolute; left: 50%; top: 4rem; bottom: 4rem; width: 4.6rem; margin-left: -2.3rem; border-radius: 3rem; background: rgba(var(--navy-rgb), 0.55);
  border: 0.2rem solid var(--line); box-shadow: inset 0 0 1.6rem rgba(0,0,0,0.5);
  background-image: repeating-linear-gradient(to bottom, transparent 0 3.6rem, rgba(255,255,255,0.18) 3.6rem 3.8rem); }
.slider .thumb { position: absolute; left: 50%; width: 12rem; height: 8rem; margin: -4rem 0 0 -6rem; top: 50%; border-radius: 2.2rem;
  background: linear-gradient(#2a9cf0, #1268b4); border: 0.3rem solid rgba(255,255,255,0.9); box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.45); transition: box-shadow .15s; }
.slider[data-ctl="sheet"] .thumb { background: linear-gradient(#f6f8fa, #c4ccd4); border-color: #fff; }
.slider .thumb i { position: absolute; left: 3rem; right: 3rem; top: 50%; height: 2rem; margin-top: -1rem;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.3) 0 0.3rem, transparent 0.3rem 0.8rem); }
.slider.active .thumb { box-shadow: 0 0 0 1rem rgba(var(--cyan-rgb), 0.35), 0 0.8rem 2rem rgba(0,0,0,0.45); }
.slider .hint { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--cond); font-weight: 700; font-size: 2rem; letter-spacing: 0.2rem; text-transform: uppercase; opacity: 0.7; }
.slider .hint.up { top: 0; } .slider .hint.down { bottom: 0; }
.slider .hint.up::before { content: '▲ '; } .slider .hint.down::before { content: '▼ '; }

.gauge { position: relative; flex: 0 0 4.4rem; margin: 4rem 0; border-radius: 0.6rem; overflow: visible; }
.gauge .zones { position: absolute; inset: 0; border-radius: 0.6rem; border: 0.2rem solid rgba(255,255,255,0.3); }
.gauge .mark { position: absolute; left: -1.2rem; right: -1.2rem; height: 0.8rem; margin-top: -0.4rem; top: 50%; background: #fff; border-radius: 0.4rem; box-shadow: 0 0 1rem rgba(0,0,0,0.6); transition: background .2s; }
.gauge .mark::after { content: ''; position: absolute; top: 50%; margin-top: -1.2rem; border: 1.2rem solid transparent; }
.control.left .gauge .mark::after { left: -2.2rem; border-right-color: #fff; border-left-width: 0; }
.control.right .gauge .mark::after { right: -2.2rem; border-left-color: #fff; border-right-width: 0; }
.gauge .g-lbl { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--cond); font-size: 1.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1rem; opacity: 0.7; }
.gauge .g-lbl.top { top: -3.2rem; } .gauge .g-lbl.bot { bottom: -3.2rem; }
.gauge.ok .mark { background: var(--ok); }
.gauge.warn .mark { background: var(--warn); }
.gauge.bad .mark { background: var(--bad); }
.readout { font-family: var(--cond); font-weight: 600; font-size: 2.4rem; text-transform: uppercase; letter-spacing: 0.15rem; text-align: center; opacity: 0.9; }
.tell { display: flex; align-items: center; gap: 1rem; justify-content: center; }
.tell svg { width: 10rem; height: 5rem; }
.tell .sail { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 3; }
.tell .ribbon { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.tell .ribbon.w { stroke: var(--ok); } .tell .ribbon.l { stroke: var(--bad); }
.tell span { font-family: var(--cond); font-weight: 600; font-size: 2.2rem; text-transform: uppercase; letter-spacing: 0.15rem; min-width: 11rem; }

.heel { position: absolute; left: 50%; bottom: calc(4rem + var(--safe-b)); width: 30rem; margin-left: -15rem; text-align: center; }
.heel svg { width: 100%; height: 17.5rem; }
.heel .arc { fill: none; stroke: rgba(255,255,255,0.3); stroke-width: 6; }
.heel .danger { fill: none; stroke: var(--bad); stroke-width: 6; }
#heel-needle { stroke: #fff; stroke-width: 4; stroke-linecap: round; transform-origin: 0 0; }
.heel .cap { height: 1.2rem; margin: 0.6rem 3rem 0; border-radius: 1rem; background: rgba(255,255,255,0.15); overflow: hidden; }
.heel .cap i { display: block; height: 100%; width: 0; background: var(--bad); }
.heel span { display: block; font-family: var(--cond); font-weight: 700; font-size: 2.4rem; text-transform: uppercase; letter-spacing: 0.2rem; margin-top: 0.8rem; }
.heel.alarm .arc { stroke: var(--bad); animation: blink .3s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.coach { position: absolute; left: 27rem; right: 27rem; bottom: calc(27rem + var(--safe-b)); text-align: center; font-family: var(--cond); font-weight: 800; font-size: 3.6rem; line-height: 1.05;
  text-transform: uppercase; text-shadow: 0 0.3rem 1.2rem rgba(0,0,0,0.75); transition: opacity .2s; }
.coach small { display: block; font-family: var(--text); font-weight: 500; font-size: 2.2rem; text-transform: none; opacity: 0.9; margin-top: 0.6rem; }
.coach.bad { color: var(--bad); } .coach.warn { color: var(--warn); } .coach.good { color: var(--ok); }

/* fin d'étape */
#legend { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2rem; background: rgba(var(--navy-rgb), 0.55); }
.legend-perf b { display: block; font-family: var(--cond); font-weight: 800; font-size: 16rem; font-style: var(--italic); line-height: 0.9; color: var(--lcd); }
.legend-perf span { font-family: var(--cond); font-size: 3rem; letter-spacing: 0.3rem; text-transform: uppercase; }
#legend-note { font-size: 2.8rem; max-width: 70rem; opacity: 0.9; }

/* arrivée */
#finish { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 2.4rem; padding: 12rem 4rem calc(4rem + var(--safe-b)); text-align: center;
  background: linear-gradient(to bottom, rgba(var(--navy-rgb), 0.9), rgba(var(--navy-rgb), 0.55) 40%, rgba(var(--navy-rgb), 0.92) 70%); overflow-y: auto; pointer-events: auto; }
#finish h2 { font-size: 8rem; }
#finish .time span { font-family: var(--cond); font-size: 2.6rem; letter-spacing: 0.3rem; text-transform: uppercase; opacity: 0.8; }
#finish .time b { display: block; font-family: var(--cond); font-weight: 800; font-size: 10rem; font-style: var(--italic); color: var(--lcd); line-height: 1; font-variant-numeric: tabular-nums; }
.rank b { font-family: var(--cond); font-weight: 800; font-size: 5rem; text-transform: uppercase; color: var(--cyan); }
.rank p { font-size: 2.6rem; opacity: 0.85; margin-top: 0.4rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; width: 100%; max-width: 90rem; }
.stats div { background: var(--glass); border: 0.15rem solid var(--line); border-radius: 0.8rem; padding: 1.6rem 1rem; }
.stats b { display: block; font-family: var(--cond); font-weight: 800; font-size: 4.6rem; line-height: 1; }
.stats span { font-family: var(--cond); font-size: 2rem; letter-spacing: 0.1rem; text-transform: uppercase; opacity: 0.75; }
.initials p { font-family: var(--cond); font-size: 2.6rem; text-transform: uppercase; letter-spacing: 0.2rem; margin-bottom: 1.2rem; }
.letters { display: flex; justify-content: center; gap: 1.6rem; margin-bottom: 2rem; }
.letter { display: grid; grid-template-rows: 6rem 10rem 6rem; width: 11rem; background: var(--glass); border: 0.2rem solid var(--line); border-radius: 1rem; overflow: hidden; }
.letter button { font-size: 3.4rem; color: var(--cyan); }
.letter button:active { background: rgba(255,255,255,0.15); }
.letter b { display: grid; place-items: center; font-family: var(--cond); font-weight: 800; font-size: 8rem; }
#finish .board { display: none; }
#finish.saved .board { display: block; } #finish.saved .initials { display: none; }

#btn-sound { position: absolute; right: 2rem; bottom: calc(1rem + var(--safe-b)); width: 5rem; height: 5rem; border-radius: 50%; font-size: 2.6rem; opacity: 0.35; z-index: 10; }
#btn-sound.off { text-decoration: line-through; }
body[data-state="play"] #btn-sound { display: none; }

/* paysage (aperçu sur ordinateur, tablette) : commandes aux bords, colonne centrale plus étroite */
@media (orientation: landscape) {
  #setup { padding-left: 50%; padding-right: 4rem; transform: none; background: linear-gradient(to right, rgba(var(--navy-rgb), 0) 30%, rgba(var(--navy-rgb), 0.92) 52%); }
  .setup-map { left: 4rem; right: auto; top: auto; bottom: 4rem; }
  .verdict { left: 50%; }
  #attract { background: linear-gradient(to bottom, rgba(var(--navy-rgb), 0.35), rgba(var(--navy-rgb), 0) 45%, rgba(var(--navy-rgb), 0.85)); }
  #attract .board { max-width: 60rem; }
  .coach { bottom: calc(24rem + var(--safe-b)); left: 34rem; right: 34rem; }
  #tutorial h2 { font-size: 5rem; }
  .control .body { height: 44rem; }
  .gust-chip { top: calc(36rem + var(--safe-t)); }
}