/* =========================================================
   PORTAIL OFFICIEL D'IMPLANTATION — IMPLANTIA
   Registre : brand / portail administratif officiel premium
   Mobile-first. Committed navy. Public Sans + Spline Sans Mono.
   ========================================================= */

:root {
  /* --- Palette (OKLCH) --- */
  --bg:        oklch(0.984 0.004 264);   /* blanc cassé, légèrement froid */
  --bg-deep:   oklch(0.955 0.006 264);   /* fond derrière le portail (desktop) */
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.978 0.005 264);

  --ink:       oklch(0.24 0.028 264);    /* texte principal */
  --ink-soft:  oklch(0.44 0.024 264);    /* texte secondaire (>=4.5:1 sur bg) */
  --ink-faint: oklch(0.52 0.021 264);    /* méta / labels (>=4.5:1 sur bg) */

  --navy:      oklch(0.30 0.075 264);    /* bleu nuit — primaire */
  --navy-deep: oklch(0.22 0.065 264);
  --navy-ink:  oklch(0.20 0.06 264);
  --navy-soft: oklch(0.955 0.02 264);    /* fond bleu très pâle */
  --navy-line: oklch(0.88 0.02 264);

  --line:      oklch(0.905 0.008 264);   /* bordures neutres */
  --line-soft: oklch(0.945 0.006 264);

  --amber:     oklch(0.70 0.11 71);      /* alerte quota (sobre) */
  --amber-ink: oklch(0.47 0.09 62);
  --amber-bg:  oklch(0.975 0.028 82);
  --amber-line:oklch(0.90 0.055 78);

  --green:     oklch(0.58 0.12 152);     /* succès */
  --green-ink: oklch(0.42 0.10 152);
  --green-bg:  oklch(0.965 0.035 155);
  --green-line:oklch(0.85 0.07 152);

  --danger:    oklch(0.55 0.16 27);

  /* --- Typo --- */
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- Rayons / ombres --- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;
  --shadow-sm: 0 1px 2px oklch(0.30 0.05 264 / .06), 0 1px 1px oklch(0.30 0.05 264 / .04);
  --shadow-md: 0 4px 14px oklch(0.28 0.06 264 / .08), 0 1px 3px oklch(0.28 0.06 264 / .06);
  --shadow-lg: 0 18px 50px oklch(0.24 0.07 264 / .14), 0 4px 14px oklch(0.24 0.07 264 / .08);
  --shadow-btn: 0 6px 18px oklch(0.30 0.09 264 / .28);

  /* --- Motion --- */
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --e-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* --- z --- */
  --z-list: 40;  --z-sticky: 60;  --z-overlay: 80;

  color-scheme: light;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg-deep);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
svg.ic { width: 1em; height: 1em; display: block; fill: none; }
b, strong { font-weight: 700; }
.mono { font-family: var(--mono); font-weight: 600; letter-spacing: -.01em; }

/* ===== Portail : conteneur (mobile = plein écran) ===== */
.portal {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

/* ===== Barre officielle ===== */
.portal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(16px, 5vw, 26px);
  background: var(--navy);
  color: oklch(0.97 0.01 264);
  position: relative;
  overflow: hidden;
}
/* guilloché discret — texture de document sécurisé */
.portal-bar::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, oklch(1 0 0 / .05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(65deg, oklch(1 0 0 / .035) 0 1px, transparent 1px 11px);
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid oklch(1 0 0 / .28);
  border-radius: 10px;
  background: oklch(1 0 0 / .07);
  color: oklch(0.93 0.03 264);
}
.brand-mark .ic { width: 24px; height: 24px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name strong { font-size: 1.02rem; font-weight: 800; letter-spacing: .06em; }
.brand-name em {
  font-style: normal; font-size: .62rem; letter-spacing: .04em;
  color: oklch(0.82 0.03 264); text-transform: uppercase; margin-top: 1px;
}
.official {
  display: flex; align-items: center; gap: 7px;
  font-size: .58rem; line-height: 1.15; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; text-align: right;
  color: oklch(0.86 0.03 264);
  position: relative; z-index: 1;
  padding: 6px 10px 6px 8px;
  border: 1px solid oklch(1 0 0 / .22);
  border-radius: 40px;
  background: oklch(1 0 0 / .06);
}
.official .ic { width: 20px; height: 20px; flex: none; color: oklch(0.92 0.05 90); }

/* ===== Progression ===== */
.progress {
  padding: 12px clamp(16px, 5vw, 26px) 0;
  background: var(--bg);
}
.progress[hidden] { display: none; }
.progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px;
}
.progress-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--ink-faint);
}
.progress-count { font-size: .74rem; color: var(--ink-soft); font-family: var(--mono); }
.progress-count b { color: var(--navy); }
.progress-track {
  height: 5px; border-radius: 40px; background: var(--line);
  overflow: hidden;
}
.progress-track i {
  display: block; height: 100%; width: 20%;
  border-radius: 40px;
  background: linear-gradient(90deg, var(--navy-deep), var(--navy));
  transition: width .55s var(--e-expo);
}

/* ===== Scène + écrans ===== */
.stage {
  position: relative;
  flex: 1;
  display: grid;
  overflow: hidden;
}
.screen {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.screen[hidden] { display: none; }

/* transitions d'entrée/sortie */
.screen.enter-right { animation: enterRight .42s var(--e-expo) both; }
.screen.enter-left  { animation: enterLeft .42s var(--e-expo) both; }
@keyframes enterRight { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes enterLeft  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.screen-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 6vw, 34px) clamp(18px, 5.5vw, 30px) 18px;
  display: flex;
  flex-direction: column;
}

/* ===== Typographie de contenu ===== */
.ref {
  font-size: .72rem; color: var(--ink-faint); letter-spacing: .02em;
  margin-bottom: 14px;
}
.kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--navy);
  margin-bottom: 12px;
}
.kicker-ic { width: 16px; height: 16px; }
.title {
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.lede {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 60ch;
  text-wrap: pretty;
}

/* ===== Champ générique ===== */
.field { margin-top: 24px; }
.field-label {
  display: block;
  font-size: .82rem; font-weight: 700; color: var(--ink);
  margin-bottom: 8px;
}

/* ===== Écran 1 — masthead registre & raffinements ===== */
.masthead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 1.5px solid var(--line);
}
.masthead-l { display: flex; flex-direction: column; gap: 3px; }
.masthead-l > b {
  display: flex; align-items: center; gap: 8px;
  font-size: .64rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--navy);
}
.masthead-l > em {
  font-style: normal; font-size: .58rem; text-transform: uppercase;
  letter-spacing: .085em; color: var(--ink-faint);
}
.masthead-r { display: flex; flex-direction: column; gap: 3px; text-align: right; align-items: flex-end; }
.masthead-r > span {
  font-size: .58rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .09em;
}
.masthead-r > b { font-size: .82rem; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--green);
  animation: livePulse 2.4s var(--e-quart) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.58 0.12 152 / .5); }
  70%  { box-shadow: 0 0 0 7px oklch(0.58 0.12 152 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.58 0.12 152 / 0); }
}

.geo-field { margin-top: 26px; }
.geo-field .field-label { display: flex; align-items: center; gap: 7px; }
.geo-field .lbl-ic { width: 16px; height: 16px; color: var(--navy); flex: none; }
.field-hint { font-size: .76rem; color: var(--ink-faint); margin-top: 9px; }
.trust-line {
  margin-top: 18px; font-size: .76rem; color: var(--ink-faint);
  letter-spacing: .01em;
}

/* ===== Combobox département ===== */
.combo { position: relative; }
.combo-input {
  width: 100%;
  height: 56px;
  padding: 0 46px 0 46px;
  font-size: 16px;               /* anti-zoom iOS */
  font-weight: 500;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .18s var(--e-quart), box-shadow .18s var(--e-quart);
}
.combo-input::placeholder { color: var(--ink-faint); font-weight: 400; }
.combo-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px oklch(0.30 0.075 264 / .12);
}
.combo-icon, .combo-caret {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
.combo-icon { left: 15px; } .combo-icon .ic { width: 20px; height: 20px; }
.combo-caret { right: 14px; color: var(--navy); } .combo-caret .ic { width: 20px; height: 20px; }
.combo.selected .combo-input { border-color: var(--navy); font-weight: 600; }

.combo-list {
  list-style: none; padding: 6px; margin: 0;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  z-index: var(--z-list);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: min(46vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.combo-list.open { display: block; animation: pop .16s var(--e-quart) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.combo-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 9px;
  font-size: .95rem; cursor: pointer;
  scroll-margin: 6px;
}
.combo-opt .code {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  color: var(--navy); background: var(--navy-soft);
  padding: 3px 7px; border-radius: 6px; min-width: 40px; text-align: center;
}
.combo-opt .name { color: var(--ink); }
.combo-opt[aria-selected="true"], .combo-opt:hover { background: var(--surface-2); }
.combo-opt.active { background: var(--navy-soft); }
.combo-empty { padding: 14px 12px; color: var(--ink-faint); font-size: .9rem; text-align: center; }

/* ===== Alerte quota (sobre) ===== */
.quota {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-radius: var(--r-md);
  transition: background .3s var(--e-quart), border-color .3s var(--e-quart);
}
.quota p { font-size: .86rem; color: var(--amber-ink); line-height: 1.4; }
.quota-ic { width: 18px; height: 18px; flex: none; color: var(--amber); margin-top: 1px; }
.quota.is-ok {
  background: var(--green-bg); border-color: var(--green-line);
}
.quota.is-ok p { color: var(--green-ink); }
.quota.is-ok .quota-ic { color: var(--green); }

/* ===== Cartes d'options (radio) ===== */
.cards { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .18s var(--e-quart), box-shadow .18s var(--e-quart),
              background .18s var(--e-quart), transform .12s var(--e-quart);
}
.opt:active { transform: scale(.988); }
.opt-ic {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--navy-soft);
  color: var(--navy);
  transition: background .2s var(--e-quart), color .2s var(--e-quart);
}
.opt-ic .ic { width: 24px; height: 24px; }
.opt-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.opt-txt b { font-size: 1rem; font-weight: 700; color: var(--ink); }
.opt-txt em { font-style: normal; font-size: .84rem; color: var(--ink-soft); line-height: 1.35; }
.opt-check {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--surface);
  transition: all .2s var(--e-quart);
  transform: scale(.9);
}
.opt-check .ic { width: 16px; height: 16px; opacity: 0; transition: opacity .18s; }

.opt[aria-checked="true"] {
  border-color: var(--navy);
  border-width: 2px;
  box-shadow: 0 0 0 4px oklch(0.30 0.075 264 / .10), var(--shadow-md);
  padding: 15px;                   /* compense +1px de bordure */
}
.opt[aria-checked="true"] .opt-ic { background: var(--navy); color: oklch(0.97 0.01 264); }
.opt[aria-checked="true"] .opt-check {
  background: var(--navy); border-color: var(--navy); transform: scale(1);
}
.opt[aria-checked="true"] .opt-check .ic { opacity: 1; }

/* option "déclaration" sans icône (écrans conformité) */
.opt-plain { padding: 17px 18px; }
.opt-plain[aria-checked="true"] { padding: 16px 17px; }

/* ===== Attestations (toggle switch) ===== */
.attest { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.attest-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .2s var(--e-quart), background .2s var(--e-quart);
}
.attest-row.on {
  border-color: var(--navy); background: var(--navy-soft);
  box-shadow: 0 0 0 3px oklch(0.30 0.075 264 / .08);
}
.attest-txt b { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.attest-txt em { font-style: normal; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }

.switch { position: relative; flex: none; width: 50px; height: 30px; display: inline-block; margin-top: 2px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--line); border-radius: 40px;
  transition: background .22s var(--e-quart);
}
.switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .26s var(--e-expo);
}
.switch input:checked + .switch-track { background: var(--navy); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 4px oklch(0.30 0.075 264 / .18); }

.fineprint {
  display: flex; align-items: center; gap: 7px;
  margin-top: 18px; font-size: .78rem; color: var(--ink-faint);
}
.fineprint .ic { width: 15px; height: 15px; }

/* ===== Écran de traitement ===== */
.screen-processing { justify-content: center; }
.proc {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(24px, 8vw, 44px) clamp(20px, 6vw, 34px);
  gap: 22px;
}
.proc[hidden] { display: none; }

.ring { position: relative; width: 168px; height: 168px; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.ring-fg {
  fill: none; stroke: var(--navy); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .2s linear;
}
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; }
.ring-val { display: flex; align-items: baseline; gap: 3px; }
.ring-val b { font-size: 2.7rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ring-val span { font-size: 1.2rem; color: var(--ink-faint); font-weight: 700; }

.proc-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 4px;
}
.proc-kicker .ic { width: 15px; height: 15px; color: var(--navy); }
.proc-kicker .mono { text-transform: none; letter-spacing: -.01em; color: var(--ink); }

.proc-status {
  font-size: 1.05rem; font-weight: 600; color: var(--navy);
  min-height: 1.6em;
  transition: opacity .25s;
}
.proc-steps { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.pstep {
  display: flex; align-items: center; gap: 9px;
  font-size: .9rem; color: var(--ink-faint);
  transition: color .3s;
}
.pstep .ic {
  width: 18px; height: 18px; padding: 2px;
  border-radius: 50%; border: 1.5px solid var(--line);
  color: transparent; transition: all .3s var(--e-quart);
}
.pstep.done { color: var(--ink); }
.pstep.done .ic { background: var(--green); border-color: var(--green); color: #fff; }
.pstep.active { color: var(--navy); font-weight: 600; }
.pstep.active .ic {
  border-color: var(--navy-line); border-top-color: var(--navy);
  color: transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Résultat / succès (tampon) ===== */
.screen-processing.success { background: var(--green-bg); }
.result { animation: fadeUp .5s var(--e-expo) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.stamp {
  width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center; gap: 0;
  color: var(--green-ink);
  border: 3px double var(--green-line);
  background: oklch(1 0 0 / .5);
  position: relative;
  flex-direction: column;
  animation: stampIn .6s var(--e-expo) both;
}
.stamp .ic { width: 40px; height: 40px; color: var(--green); }
.stamp span {
  font-size: .82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.1; margin-top: 4px; text-align: center;
}
@keyframes stampIn {
  0%   { opacity: 0; transform: scale(1.5) rotate(-11deg); }
  60%  { opacity: 1; transform: scale(.94) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}
.stamp-done { border: 3px solid var(--green-line); background: var(--green-bg); }
.stamp-done .ic { width: 58px; height: 58px; }
.stamp-neutral { border: 3px solid var(--line); background: var(--surface-2); animation: none; }
.stamp-neutral .ic { width: 54px; height: 54px; color: var(--ink-faint); }

.done-note {
  margin-top: 8px; font-size: .82rem; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 7px;
}
.done-note .ic { width: 15px; height: 15px; flex: none; }

/* prochaines étapes (écran de fin de quiz) */
.done-steps {
  list-style: none; margin: 22px auto 6px; padding: 0;
  display: inline-flex; flex-direction: column; gap: 12px;
  text-align: left; max-width: 340px;
}
.done-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }
.done-steps .ds-n {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--navy-soft); border: 1px solid var(--navy-line);
  color: var(--navy); font-size: .82rem; font-weight: 700; font-family: var(--mono);
}
.done-steps b { color: var(--ink); font-weight: 700; }

/* réassurance de recontact (capture) */
.capture-reassure {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--navy-soft); border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  font-size: .82rem; line-height: 1.4; color: var(--navy-ink);
}
.capture-reassure .ic { width: 17px; height: 17px; flex: none; color: var(--navy); margin-top: 1px; }

/* reçu officiel (référence de suivi) */
.receipt {
  margin-top: 10px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 13px 24px; border-radius: var(--r-md);
  border: 1.5px dashed var(--navy-line); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.receipt-k {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); font-weight: 700;
}
.receipt b { font-size: 1.1rem; color: var(--navy); }

.result-title { margin-top: 4px; }
.result-lede { color: var(--ink-soft); }
.result-lede b { white-space: nowrap; }
.reserve {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 40px;
  background: var(--surface); border: 1px solid var(--green-line);
  color: var(--green-ink); font-size: .9rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.reserve .ic { width: 18px; height: 18px; color: var(--green); }

/* ===== Tag éligible (capture) ===== */
.eligible-tag {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 7px 13px; border-radius: 40px;
  background: var(--green-bg); border: 1px solid var(--green-line);
  color: var(--green-ink); font-size: .78rem; font-weight: 700;
  margin-bottom: 18px;
}
.eligible-tag .ic { width: 15px; height: 15px; color: var(--green); }
.eligible-tag b { font-family: var(--mono); }

/* ===== Formulaire (capture) ===== */
.form { display: flex; flex-direction: column; margin-top: 4px; }
.form .field { margin-top: 18px; }
.form .field:first-of-type { margin-top: 22px; }
.form .err { min-height: 1.05em; margin-top: 5px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.form-row .field { margin-top: 0; }
.form-row .field:first-of-type { margin-top: 0; }

.input-plain {
  width: 100%; height: 56px; padding: 0 16px;
  font-size: 16px; font-weight: 500;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  transition: border-color .18s var(--e-quart), box-shadow .18s var(--e-quart);
}
.input-plain::placeholder { color: var(--ink-faint); font-weight: 400; }
.input-plain:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px oklch(0.30 0.075 264 / .12); }
.field.invalid .input-plain { border-color: var(--danger); }

.input-wrap { position: relative; }
.input-ic {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
.input-ic .ic { width: 20px; height: 20px; }
.input-wrap input {
  width: 100%; height: 56px;
  padding: 0 16px 0 46px;
  font-size: 16px; font-weight: 500;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  transition: border-color .18s var(--e-quart), box-shadow .18s var(--e-quart);
}
.input-wrap input::placeholder { color: var(--ink-faint); font-weight: 400; }
.input-wrap input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 4px oklch(0.30 0.075 264 / .12);
}
.field.invalid .input-wrap input { border-color: var(--danger); }
.field.invalid .input-ic { color: var(--danger); }
.err { font-size: .78rem; color: var(--danger); margin-top: 6px; min-height: 1em; }
.btn-cta { margin-top: 22px; }

/* ===== Boutons ===== */
.action {
  padding: 14px clamp(18px, 5.5vw, 30px) calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--bg) 32%);
  position: sticky; bottom: 0; z-index: var(--z-sticky);
}
.action[hidden] { display: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 22px;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
  border-radius: var(--r-md);
  transition: transform .12s var(--e-quart), box-shadow .2s var(--e-quart),
              background .2s var(--e-quart), opacity .2s;
}
.btn .ic { width: 20px; height: 20px; }
.btn-primary { background: var(--navy); color: oklch(0.98 0.008 264); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-primary:active { transform: translateY(1px) scale(.995); }
.btn-primary:disabled {
  background: var(--line); color: var(--ink-faint);
  box-shadow: none; cursor: not-allowed;
}
.btn:focus-visible { outline: 3px solid oklch(0.30 0.075 264 / .4); outline-offset: 2px; }

.secure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 11px; font-size: .74rem; color: var(--ink-faint);
}
.secure .ic { width: 14px; height: 14px; }

.link-back {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  font-size: .82rem; font-weight: 600; color: var(--ink-faint);
  padding: 6px 10px 6px 6px; margin: -6px 0 10px -6px; border-radius: 8px;
}
.link-back .ic { width: 18px; height: 18px; }
.link-back:hover { color: var(--navy); }

/* ===== Pied de portail ===== */
.portal-foot {
  padding: 16px clamp(16px, 5vw, 26px) calc(16px + env(safe-area-inset-bottom));
  text-align: center; font-size: .7rem; color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 3px;
}
.foot-legal { opacity: .8; font-size: .66rem; }

/* =========================================================
   DESKTOP — le portail devient une "feuille" encadrée
   ========================================================= */
@media (min-width: 720px) {
  body {
    background:
      radial-gradient(120% 80% at 50% -10%, oklch(0.40 0.06 264 / .10), transparent 60%),
      var(--bg-deep);
    padding: clamp(20px, 4vh, 48px) 20px;
    display: grid; place-items: start center;
    min-height: 100dvh;
  }
  .portal {
    width: 100%;
    max-width: 480px;
    min-height: auto;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--navy-line);
  }
  .portal-bar { border-radius: 0; }
  .stage { min-height: 540px; }
  .screen-body { max-height: 62vh; }
  .action { border-radius: 0; }
}

@media (min-width: 720px) {
  .portal { margin-inline: auto; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .screen.enter-right, .screen.enter-left { animation: fadeQuick .2s both; }
  @keyframes fadeQuick { from { opacity: 0; } to { opacity: 1; } }
  .ring-fg { transition: none; }
}