/* Mise en route de Cap (lot L8) : calque plein écran, design sombre, polices du système uniquement.
   Variables reprises de index.html (--bg, --s1, --s2, --s3, --bd, --tx, --tx2, --ac, --ac-ink), avec des valeurs de repli. */
html.ob-open, html.ob-open body { overflow: hidden; }
.ob {
  --ob-bg: var(--bg, #000); --ob-s1: var(--s1, #1C1C1E); --ob-s2: var(--s2, #2C2C2E); --ob-s3: var(--s3, #3A3A3C);
  --ob-bd: var(--bd, #38383A); --ob-tx: var(--tx, #fff); --ob-tx2: var(--tx2, #86868B);
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  background: var(--ob-bg); color: var(--ob-tx);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }
.ob button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ob :focus-visible { outline: 2px solid var(--ac, #0A84FF); outline-offset: 2px; }
.ob [hidden] { display: none !important; }

/* ---------- haut : retour, progression, passer ---------- */
.ob-top { flex: none; padding: calc(6px + env(safe-area-inset-top, 0px)) 6px 0; }
.ob-top-nu { padding-bottom: 0; }
.ob-nav { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.ob .ob-link { min-height: 44px; min-width: 64px; padding: 0 12px; color: var(--ac, #0A84FF); font-size: 16px; text-align: left; }
.ob .ob-link[data-ob="skip"] { text-align: right; }
.ob-vide { visibility: hidden; }
.ob-count { font-size: 13px; color: var(--ob-tx2); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; }
.ob-bar { height: 4px; margin: 2px 14px 0; background: var(--ob-s2); border-radius: 2px; overflow: hidden; }
.ob-bar i { display: block; height: 100%; background: var(--ac, #0A84FF); border-radius: 2px; transition: width .35s cubic-bezier(.4, 0, .2, 1); }

/* ---------- corps défilant et bouton principal fixe en bas ---------- */
.ob-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 16px 28px; }
.ob-in { max-width: 520px; margin: 0 auto; }
.ob-center { min-height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 12px 4px; }
.ob-foot { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .06); background: var(--ob-bg); }
.ob-foot-in { max-width: 520px; margin: 0 auto; }
.ob .ob-pri { display: block; width: 100%; min-height: 52px; border-radius: 14px; background: var(--ac, #0A84FF); color: var(--ac-ink, #fff);
  font-weight: 600; font-size: 17px; letter-spacing: -.01em; transition: opacity .15s, transform .1s; }
.ob .ob-pri:active { transform: scale(.985); }
.ob .ob-pri:disabled { background: var(--ob-s2); color: var(--ob-tx2); cursor: default; transform: none; }
.ob .ob-pri-s { min-height: 48px; margin-top: 14px; }
.ob .ob-sec { display: block; width: 100%; min-height: 48px; margin-top: 6px; border-radius: 14px; color: var(--ob-tx2); font-size: 16px; }
.ob-hint { text-align: center; color: var(--ob-tx2); font-size: 13px; margin: 6px 0 0; min-height: 18px; }
.ob-hint:empty { min-height: 0; margin: 0; }

/* ---------- textes ---------- */
.ob-h { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 6px 0 8px; overflow-wrap: anywhere; }
.ob-h-s { font-size: 22px; }
.ob-h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 28px 0 4px; }
.ob-p { color: var(--ob-tx); font-size: 16px; margin: 0 0 12px; }
.ob-why { color: var(--ob-tx2); font-size: 15px; margin: 0 0 18px; }
.ob-sous { font-size: 14px; margin: 10px 0 0; }
.ob-bas { color: var(--ob-tx2); font-size: 13px; margin: 28px auto 0; max-width: 320px; }
.ob-q { font-size: 13px; font-weight: 600; color: var(--ob-tx2); text-transform: none; margin: 24px 0 10px 2px; }
.ob-grp-t { font-size: 13px; font-weight: 600; color: var(--ob-tx2); margin: 18px 0 8px 2px; }
.ob-lab { display: block; font-size: 13px; font-weight: 600; color: var(--ob-tx2); margin: 18px 0 6px 2px; text-align: left; }
.ob-err { color: var(--red, #FF453A); font-size: 14px; margin: 8px 0 0; min-height: 0; text-align: left; }
.ob-err:empty { margin: 0; }
.ob-err-c { text-align: center; }
.ob-garde { color: var(--ob-tx); font-size: 14px; font-weight: 500; margin: 8px 2px 0; }
.ob-garde:empty { margin: 0; }
.ob-dim { color: var(--ob-tx2); }
.ob-capmsg { background: var(--ob-s1); border-left: 3px solid var(--ac, #0A84FF); border-radius: 12px; padding: 12px 14px; font-size: 15px; margin: 0 0 14px; }
.ob .ob-lien { display: inline-block; min-height: 44px; padding: 10px 2px; color: var(--ac, #0A84FF); font-size: 15px; text-align: left; }
.ob .ob-lien-c { display: block; width: 100%; text-align: center; margin-top: 2px; min-height: 44px; padding: 10px 2px; font-size: 14px; color: var(--ob-tx2); }
.ob .ob-center .ob-lien { align-self: center; text-align: center; }
.ob-hero { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: var(--ob-s1); color: var(--ac, #0A84FF); display: grid; place-items: center; }
.ob-hero svg { width: 32px; height: 32px; }
.ob-icone { display: block; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 17px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }

/* ---------- champs ---------- */
.ob-input { display: block; width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ob-bd);
  background: var(--ob-s1); color: var(--ob-tx); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; }
.ob-input:focus { outline: none; border-color: var(--ac, #0A84FF); }
.ob-input[readonly] { color: var(--ob-tx2); }
.ob-input::placeholder { color: #636366; }
.ob-big { font-size: 22px; font-weight: 600; min-height: 56px; }
input[type="date"].ob-input { min-height: 50px; color-scheme: dark; }
.ob-form { text-align: left; }
.ob-copie { margin-top: 16px; font-size: 14px; }
.ob-res { font-size: 15px; margin: 12px 0 0; min-height: 22px; }

/* ---------- choix : puces, listes à cocher, pastilles de couleur ---------- */
.ob-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-chips-1 { grid-template-columns: 1fr; margin-top: 18px; }
.ob .ob-chip { min-height: 48px; padding: 10px 12px; border-radius: 12px; background: var(--ob-s1); border: 1.5px solid transparent; font-size: 16px; font-weight: 500; text-align: center; transition: background .15s, border-color .15s; }
.ob .ob-chip.on { border-color: var(--ac, #0A84FF); background: color-mix(in srgb, var(--ac, #0A84FF) 18%, var(--ob-s1)); }
.ob-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-list { background: var(--ob-s1); border-radius: 14px; overflow: hidden; }
.ob-list-sep { margin-top: 16px; }
.ob .ob-opt, .ob .ob-check { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 14px; text-align: left; font-size: 16px; }
.ob .ob-opt + .ob-opt { border-top: 1px solid var(--ob-bd); }
.ob .ob-opt small, .ob .ob-check small { display: block; color: var(--ob-tx2); font-size: 13px; margin-top: 2px; }
.ob .ob-check { background: var(--ob-s1); border-radius: 14px; margin-top: 16px; }
.ob-tick { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--ob-s3); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.ob-radio .ob-tick { border-radius: 50%; }
.on > .ob-tick { background: var(--ac, #0A84FF); border-color: var(--ac, #0A84FF); }
.on > .ob-tick::after { content: ""; width: 10px; height: 6px; border: solid var(--ac-ink, #fff); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.ob-badge { display: inline-block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ac-ink, #fff); background: var(--ac, #0A84FF); border-radius: 6px; padding: 2px 6px; margin-left: 4px; vertical-align: 2px; }
.ob-sws { display: grid; grid-template-columns: repeat(4, 44px); justify-content: space-between; row-gap: 14px; max-width: 300px; }
.ob .ob-sw { width: 44px; height: 44px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .15s; }
.ob .ob-sw.on { box-shadow: 0 0 0 3px var(--ob-bg), 0 0 0 5px var(--sw); transform: scale(.92); }

/* ---------- aperçus en direct ---------- */
.ob-prev { margin-top: 26px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, #121214, #0B0B0C); border: 1px solid rgba(255, 255, 255, .07); }
.ob-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ob-hello { font-size: 22px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; min-width: 0; }
.ob-icone-s { flex: none; width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.ob-mini { position: relative; border-radius: 14px; padding: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--ac, #0A84FF) 26%, #1C1C1E), #1C1C1E 70%); border: 1px solid color-mix(in srgb, var(--ac, #0A84FF) 45%, transparent); }
.ob-mini-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-mini-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ac, #0A84FF); color: var(--ac-ink, #fff); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.ob-mini-n { font-size: 18px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; min-width: 0; }
.ob-mini-r { margin-left: auto; font: 600 13px/1 var(--cond, "Arial Narrow", sans-serif); font-stretch: condensed; letter-spacing: .04em; color: #D9A066; text-transform: uppercase; }
.ob-mini-l { font-size: 14px; margin-top: 8px; overflow-wrap: anywhere; }
.ob-lvl { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 12px; }
.ob-lvl i { display: block; height: 100%; border-radius: 3px; background: var(--ac, #0A84FF); }
.ob-prev-sem { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.ob-cal { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ob-s2); color: var(--ac, #0A84FF); display: grid; place-items: center; }
.ob-cal svg { width: 22px; height: 22px; }
.ob-prev-radar { padding: 8px 4px; }
.ob-radar { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; overflow: visible; }
.ob-rg { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 4; }
.ob-rs { stroke: rgba(255, 255, 255, .18); stroke-width: 1; stroke-dasharray: 2 4; }
.ob-rp { fill: color-mix(in srgb, var(--ac, #0A84FF) 16%, transparent); stroke: var(--ac, #0A84FF); stroke-width: 1.6; stroke-dasharray: 5 4; }
.ob-rt { fill: var(--ob-tx); font-size: 13px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }

/* ---------- É5 : curseurs et chaîne du soir ---------- */
.ob-sl { margin-top: 18px; }
.ob-sl-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 4px; }
.ob-sl-h label { font-size: 15px; color: var(--ob-tx2); font-weight: 600; }
.ob-sl-h b { font: 700 24px/1 var(--cond, "Arial Narrow", sans-serif); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.ob-sl input[type="range"] { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--ac, #0A84FF); background: transparent; touch-action: pan-y; }
.ob-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.ob-chain i { color: var(--ob-tx2); font-style: normal; }
.ob-ch { padding: 6px 10px; border-radius: 999px; background: var(--ob-s2); }
.ob-ch.on { background: var(--ac, #0A84FF); color: var(--ac-ink, #fff); }
.ob-ol { list-style: none; padding: 0; margin: 6px 0 0; font-size: 14px; }
.ob-ol li { margin: 2px 0; }
.ob-fin { margin: 14px 2px 0; font-size: 14px; }

/* ---------- É6 : heures de cours, jours, aperçu balayable ---------- */
.ob-cl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--ob-s1); border-radius: 14px; padding: 12px 14px; }
.ob-cl-t { font-size: 15px; font-weight: 600; }
div.ob-cl-t { margin: 0 2px 8px; color: var(--ob-tx2); font-size: 13px; }
.ob-cl-h { display: inline-flex; align-items: center; gap: 8px; color: var(--ob-tx2); font-size: 15px; }
.ob-time { width: 118px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ob-bd); background: var(--ob-s2); color: var(--ob-tx);
  font: 600 17px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; color-scheme: dark; -webkit-appearance: none; appearance: none; text-align: center; }
.ob-time:focus { outline: none; border-color: var(--ac, #0A84FF); }
.ob-jours { background: var(--ob-s1); border-radius: 14px; overflow: hidden; }
.ob-jr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom chip" "h h"; align-items: center; gap: 6px 8px; padding: 10px 12px; }
.ob-jr + .ob-jr { border-top: 1px solid var(--ob-bd); }
.ob-jr > b { grid-area: nom; font-size: 15px; font-weight: 600; }
.ob-jr .ob-cl-h { grid-area: h; }
.ob .ob-chip-s { background: var(--ob-s2); grid-area: chip; min-height: 44px; padding: 6px 12px; font-size: 13px; }
.ob-prev-jour { padding: 10px; }
.ob-dnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ob-dnav b { font-size: 16px; }
.ob .ob-arrow { width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--ac, #0A84FF); display: grid; place-items: center; }
.ob-dprev { touch-action: pan-y; border-radius: 14px; outline: none; }
.ob-dprev .tl { background: var(--ob-s1); }
.ob-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ob-s3); transition: background .2s, transform .2s; }
.ob-dots i.on { background: var(--ac, #0A84FF); transform: scale(1.15); }

/* ---------- É7 : récapitulatif animé (3 s au plus) et gain ---------- */
.ob-anim { margin: 6px 0 4px; }
.ob-ln { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 12px; overflow-wrap: anywhere;
  opacity: 0; transform: translateY(8px); animation: ob-in .45s cubic-bezier(.2, .8, .2, 1) forwards; }
.ob-ln:nth-child(2) { animation-delay: .6s; }
.ob-ln:nth-child(3) { animation-delay: 1.2s; }
.ob-ln:nth-child(4) { animation-delay: 1.8s; }
.ob-fixe .ob-ln { animation: none; opacity: 1; transform: none; }
@keyframes ob-in { to { opacity: 1; transform: none; } }
.ob-gain { margin-top: 18px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--ac, #0A84FF) 30%, #1C1C1E), #1C1C1E 75%);
  border: 1px solid color-mix(in srgb, var(--ac, #0A84FF) 50%, transparent); opacity: 0; animation: ob-in .45s cubic-bezier(.2, .8, .2, 1) 2.4s forwards; }
.ob-fixe + .ob-gain { animation: none; opacity: 1; }
.ob-gain b { display: block; font-size: 17px; }
.ob-gain small { display: block; color: var(--ob-tx2); font-size: 13px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .ob-ln, .ob-gain { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ob-bar i, .ob .ob-pri, .ob .ob-sw { transition: none; }
}

/* ---------- É8 : écran d'accueil ---------- */
.ob-e8-ic { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 18px; font-size: 13px; font-weight: 500; }
.ob-e8-ic img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .5); }
.ob-steps { list-style: none; padding: 0; margin: 18px 0 0; text-align: left; background: var(--ob-s1); border-radius: 14px; overflow: hidden; }
.ob-steps li { padding: 12px 14px; font-size: 15px; }
.ob-steps li + li { border-top: 1px solid var(--ob-bd); }

/* ---------- feuille du bas et message ---------- */
.ob-sheet { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; }
.ob-sheet-in { position: relative; width: 100%; max-width: 560px; max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--ob-s1); border-radius: 18px 18px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: left;
  animation: ob-up .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes ob-up { from { transform: translateY(30px); opacity: .4; } }
.ob-sheet-in .ob-input { background: var(--ob-s2); }
.ob-sheet-in .ob-p { font-size: 15px; color: var(--ob-tx); }
.ob-sh-t { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 4px 48px 12px 0; }
.ob .ob-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; color: var(--ob-tx2); font-size: 17px; }
.ob-toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); z-index: 99; max-width: calc(100vw - 32px);
  background: var(--ob-s2); border: 1px solid var(--ob-bd); border-radius: 12px; padding: 10px 16px; font-size: 14px; text-align: center; opacity: 0; pointer-events: none; transition: .25s; }
.ob-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ob-sheet-in { animation: none; } .ob-toast { transition: none; } }

/* ---------- écrans étroits et grands écrans ---------- */
@media (max-width: 359px) {
  .ob-h { font-size: 25px; }
  .ob-sws { grid-template-columns: repeat(4, 44px); max-width: 100%; }
  .ob-time { width: 108px; }
}
@media (min-width: 761px) {
  .ob-body { padding-top: 32px; }
  .ob-h { font-size: 32px; }
}
@media (min-width: 761px) {
  .ob-nav, .ob-bar { max-width: 560px; margin-left: auto; margin-right: auto; }
}