/* ==========================================================================
   STUDIO 64 · Formulaires de projet (formulaire-web/ et formulaire-web-2/)
   Complète site.css : mêmes couleurs, mêmes polices, mêmes boutons.
   ========================================================================== */

:root { --ok: #2F6B3A; --ok-bg: #E4EDD8; --warn: #A26B1C; --warn-bg: #F6E7C8; }

.wiz [hidden] { display: none !important; }

/* ── Mise en page : formulaire + guide ───────────────────────────────── */
.wiz { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main guide"; gap: clamp(20px, 3vw, 36px); align-items: start; }
.wiz__main { grid-area: main; min-width: 0; }
.wiz__guide { grid-area: guide; position: sticky; top: 100px; }
@media (max-width: 960px) {
  .wiz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "guide" "main"; }
  .wiz__guide { position: static; }
}

.wiz__card {
  background: var(--cream-hi); border: 1px solid var(--line);
  border-radius: var(--corner) var(--radius) var(--radius) var(--radius);
  padding: clamp(22px, 3.4vw, 40px);
  box-shadow: 0 30px 60px -48px rgba(38,37,46,.55);
}

/* ── Progression ─────────────────────────────────────────────────────── */
.wiz__prog { margin-bottom: clamp(26px, 3.4vw, 36px); }
.wiz__prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 .9rem var(--f-display); }
.wiz__prog-top span { font-weight: 600; color: var(--ink-soft); font-size: .82rem; }
.wiz__bar { height: 6px; margin: 12px 0 14px; background: rgba(52,52,64,.1); border-radius: 99px; overflow: hidden; }
.wiz__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--ink), var(--ochre) 55%, var(--brick)); transition: width .5s var(--ease); }
.wiz__dots { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz__dots button {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 99px;
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  font: 700 .78rem var(--f-display); cursor: pointer;
}
.wiz__dots button.done { border-color: var(--ink); color: var(--ink); }
.wiz__dots button.done:hover { background: var(--ink); color: var(--cream); }
.wiz__dots button.on { background: var(--brick); border-color: var(--brick); color: var(--cream); }
.wiz__dots button:disabled { cursor: default; opacity: .55; }
.wiz__dots button .wiz__dot-n { display: none; }

/* ── Étapes ──────────────────────────────────────────────────────────── */
.wiz__step { display: none; }
.wiz__step.on { display: block; animation: wizIn .4s var(--ease); }
@keyframes wizIn { from { opacity: 0; transform: translateY(10px); } }
.wiz__head .eyebrow { margin-bottom: 12px; }
.wiz__h { font: 800 clamp(1.5rem, 2.8vw, 2.1rem)/1.12 var(--f-display); letter-spacing: -.025em; }
.wiz__h:focus { outline: none; }   /* reçoit le focus à chaque étape, pour les lecteurs d'écran */
.wiz__head p { margin-top: 12px; color: var(--ink-soft); max-width: 46em; }
.wiz__req-note { font-size: .88rem; }
.req { color: var(--brick); font-weight: 700; }

.wiz__block { margin-top: clamp(24px, 3vw, 32px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.wiz__block-head { margin-bottom: 16px; }
.wiz__block-head b { display: block; font: 700 1.02rem/1.35 var(--f-display); }
.wiz__block-head span { display: block; margin-top: 4px; font-size: .92rem; color: var(--ink-soft); }
.wiz__block > * + .field, .wiz__block > .field + * { margin-top: 20px; }
.wiz__fields { display: grid; gap: 22px; }

.wiz__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 40px); padding-top: 24px; border-top: 1px solid var(--line); }
.wiz__actions .btn:only-child { margin-left: auto; }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn--ghost svg { order: -1; }

/* ── Champs ──────────────────────────────────────────────────────────── */
.field label { position: relative; }
.field__hint { display: block; margin: -2px 0 10px; font-size: .88rem; color: var(--ink-soft); }
.field__opt { font-weight: 500; color: var(--ink-soft); }
.field input.is-err, .field textarea.is-err, .field select.is-err { border-color: var(--brick); box-shadow: 0 0 0 3px rgba(157,56,42,.14); }
.field input:disabled { opacity: .55; }
.field input[type="date"] { max-width: 260px; }
.field__count { display: block; margin-top: 6px; text-align: right; font-size: .8rem; color: var(--ink-soft); }
.field__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.field__row .btn { min-height: 52px; }

.err { display: none; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--brick); }
.err.on { display: flex; animation: wizIn .25s var(--ease); }
.err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--brick); color: var(--cream); font: 800 .7rem/1 var(--f-display); }
.field--err > label { color: var(--brick); }
.field--err .opts, .field--err .seg { outline: 2px dashed rgba(157,56,42,.5); outline-offset: 6px; border-radius: 8px; }

/* ── Cartes de choix ─────────────────────────────────────────────────── */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .opts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .opts, .opts--3 { grid-template-columns: minmax(0, 1fr); } }
.opt {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-content: start;
  padding: 16px 18px; border-radius: var(--radius); border: 1.5px solid var(--line-strong);
  background: var(--cream); cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt__ic { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sand); color: var(--ink); transition: background .2s, color .2s; }
.opt__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.opt b { font: 700 1rem/1.3 var(--f-display); align-self: end; }
.opt span:last-child { font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.opt:hover { border-color: var(--ink); }
.opt:has(input:checked) { border-color: var(--brick); background: var(--cream-hi); box-shadow: 0 0 0 3px rgba(157,56,42,.14); }
.opt:has(input:checked) .opt__ic { background: var(--brick); color: var(--cream); }
.opt:has(input:focus-visible) { outline: 3px solid var(--brick); outline-offset: 3px; }
/* « .field label » (site.css) vise les intitulés : pas les cartes, puces et
   interrupteurs, qui sont aussi des <label> quand ils vivent dans un champ. */
.field .opt { display: grid; margin: 0; font: inherit; }
.field .seg label, .field .tog { margin: 0; font: inherit; }

/* Puces (cases à cocher ou boutons radio) : prolonge .seg de site.css */
.seg small { margin-left: 6px; font: 500 .76rem var(--f-body); color: var(--ink-soft); }
.seg input:checked + span small { color: rgba(247,235,212,.7); }
.seg span { background: var(--cream); transition: background .2s, border-color .2s, color .2s; }
.seg label:hover span { border-color: var(--ink); }
.seg--light span { font-weight: 600; }

/* Interrupteur */
.tog { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--cream); cursor: pointer; }
.tog + .tog { margin-top: 8px; }
.tog__txt { flex: 1; min-width: 0; }
.tog__txt b { display: block; font: 700 .95rem/1.3 var(--f-display); }
.tog__txt span { display: block; margin-top: 2px; font-size: .86rem; color: var(--ink-soft); }
.tog__gain { flex: none; font: 800 .85rem var(--f-display); color: var(--brick); }
.tog__sw { position: relative; flex: none; width: 46px; height: 26px; }
.tog__sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.tog__sw i { position: absolute; inset: 0; border-radius: 99px; background: rgba(52,52,64,.22); transition: background .2s; }
.tog__sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.tog__sw input:checked + i { background: var(--brick); }
.tog__sw input:checked + i::after { transform: translateX(20px); }
.tog__sw input:focus-visible + i { outline: 3px solid var(--brick); outline-offset: 3px; }

/* Curseur de budget */
.budget__val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.budget__val b { font: 800 clamp(1.8rem, 3.4vw, 2.4rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--brick); }
.budget__val span { font-size: .92rem; color: var(--ink-soft); }
.budget .range { accent-color: var(--brick); margin-top: 18px; }
.budget__scale { display: flex; justify-content: space-between; font: 600 .78rem var(--f-display); color: var(--ink-soft); }

/* Encarts */
.alerte { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--warn-bg); color: #5B3B0D; font-size: .92rem; }
.alerte::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #fff; font: 800 .78rem/1 var(--f-display); }
.alerte b { display: block; font-family: var(--f-display); }
.alerte p { margin: 2px 0 0; }
.alerte--err { background: #F5D9D2; color: var(--brick-deep); }
.alerte--err::before { background: var(--brick); }
.wiz__note { margin-top: 14px; font-size: .88rem; color: var(--ink-soft); }

/* Société en constitution : ce qui s'affiche dans un mode ou dans l'autre */
.si-constit { display: none !important; }
.is-constit .si-constit { display: revert !important; }
.is-constit .alerte.si-constit { display: flex !important; }
.is-constit .si-bce { display: none !important; }

.bce-res { margin-top: 20px; padding: 20px; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--line); }
.bce-res__head { margin-bottom: 14px; }
.bce-res__head b { display: block; font: 700 .95rem var(--f-display); }
.bce-res__head span { font-size: .88rem; color: var(--ink-soft); }
.bce-res .duo { gap: 14px 18px; }
.bce-res .field + .field { margin-top: 14px; }
.bce-res .duo + .field { margin-top: 14px; }

/* ── Rapport d'éligibilité ───────────────────────────────────────────── */
.verdict { --vd: var(--ink); margin-top: clamp(22px, 3vw, 30px); border-radius: var(--radius); border: 1.5px solid var(--vd); background: var(--cream); overflow: hidden; }
.verdict--eligible { --vd: var(--ok); }
.verdict--conditional { --vd: var(--warn); }
.verdict--blocked { --vd: var(--brick); }
.verdict__head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.verdict__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vd); color: #fff; }
.verdict__ic svg, .crit__dot svg { width: 18px; height: 18px; }
.verdict__head h3 { font: 800 1.08rem/1.3 var(--f-display); }
.verdict__head p { margin: 2px 0 0; font-size: .9rem; color: var(--ink-soft); }
.verdict__reg { margin-left: auto; flex: none; padding: 5px 10px; border-radius: 99px; background: var(--sand); font: 700 .74rem var(--f-display); }
.verdict__body { display: grid; gap: 22px; padding: 20px; }
.sub { font: 700 .7rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.crits { display: grid; gap: 10px; margin-top: 10px; }
.crit { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; }
.crit__dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--ink); }
.crit__dot svg { width: 13px; height: 13px; }
.crit.ok .crit__dot { background: var(--ok); }
.crit.err .crit__dot { background: var(--brick); }
.crit.warn .crit__dot { background: var(--warn); }
.crit b { display: block; font-family: var(--f-display); font-size: .9rem; }
.crit span span { color: var(--ink-soft); }
.crit code, .dom code { font: 600 .85em ui-monospace, "SF Mono", Menlo, monospace; background: var(--sand); padding: 1px 5px; border-radius: 3px; }

.sim { display: grid; gap: 18px; padding: 20px; border-radius: var(--radius); background: var(--cream-hi); border: 1px solid var(--line); }
.jauge__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.jauge__num { font: 800 clamp(2.4rem, 5vw, 3.2rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--brick); transition: transform .18s; }
.jauge__num.pop { transform: scale(1.08); }
.jauge__cap { text-align: right; font-size: .82rem; color: var(--ink-soft); }
.jauge__track { height: 10px; border-radius: 99px; background: rgba(52,52,64,.1); overflow: hidden; }
.jauge__fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--ochre), var(--brick)); transition: width .4s var(--ease); }
.jauge__marks { display: flex; justify-content: space-between; margin-top: 6px; font: 600 .74rem var(--f-display); color: var(--ink-soft); }
.calc { font-size: .88rem; color: var(--ink-soft); }
.calc b { color: var(--ink); font-weight: 600; }
.calc .plaf { color: var(--brick); font-weight: 700; }
.estim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.estim div { padding: 12px 10px 0 0; }
.estim span { display: block; font: 700 .68rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.estim b { display: block; margin-top: 4px; font: 800 1.25rem var(--f-display); }
.estim .accent b { color: var(--brick); }
@media (max-width: 520px) { .estim { grid-template-columns: 1fr; } }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.puces span { padding: 5px 11px; border-radius: 99px; background: var(--sand); font: 600 .8rem var(--f-display); }

/* ── Nom de domaine ──────────────────────────────────────────────────── */
.dom { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); background: rgba(52,52,64,.06); font-size: .92rem; }
.dom[hidden] { display: none; }
.dom svg { flex: none; width: 24px; height: 24px; }
.dom b { display: block; font-family: var(--f-display); }
.dom p { margin: 2px 0 0; color: var(--ink-soft); }
.dom--libre { background: var(--ok-bg); color: var(--ok); }
.dom--pris { background: #F5D9D2; color: var(--brick-deep); }
.dom--att svg { border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; width: 20px; height: 20px; animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ── Récapitulatif ───────────────────────────────────────────────────── */
.recap { display: grid; gap: 14px; }
.recap__sec { border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); overflow: hidden; }
.recap__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: var(--sand); }
.recap__h b { font: 700 .92rem var(--f-display); }
.recap__edit { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; color: var(--brick); font: 700 .82rem var(--f-display); cursor: pointer; }
.recap__edit svg { width: 14px; height: 14px; }
.recap__edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.recap dl { margin: 0; padding: 4px 16px; }
.recap dl div { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.recap dl div:last-child { border-bottom: 0; }
.recap dt { color: var(--ink-soft); }
.recap dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.recap dd.vide { font-weight: 400; font-style: italic; color: var(--ink-soft); }

/* ── Brouillon, fin, mode test ───────────────────────────────────────── */
.wiz__draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 22px; padding: 12px 16px; border-radius: var(--radius); background: rgba(213,163,89,.18); font-size: .92rem; }
.wiz__draft[hidden] { display: none; }
.wiz__draft button { margin-left: auto; border: 0; background: none; padding: 0; color: var(--brick); font: 700 .86rem var(--f-display); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.fin { text-align: center; padding: clamp(10px, 3vw, 30px) 0; }
.fin__ic { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--sand); }
.fin__ic img { width: 48px; height: auto; }
.fin .wiz__h { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.fin p { max-width: 50ch; margin: 14px auto 0; color: var(--ink-soft); }
.fin .small { margin-top: 18px; }
.fin__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

.test-box { margin-top: 26px; padding: 18px 20px; border-radius: var(--radius); border: 1.5px dashed var(--ink); text-align: left; }
.test-box b { display: block; font-family: var(--f-display); }
.test-box p { margin: 4px 0 12px; max-width: none; font-size: .9rem; }
.test-band { position: fixed; left: 18px; bottom: 18px; max-width: calc(100vw - 230px); z-index: 90; padding: 9px 18px; border-radius: 99px; background: var(--ink); color: var(--cream); font: 700 .78rem/1 var(--f-display); letter-spacing: .04em; pointer-events: none; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }

/* PDF */
.pdf-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 700 .86rem var(--f-display); cursor: pointer; }
.pdf-b:hover { background: var(--ink); color: var(--cream); }
.pdf-b svg { width: 16px; height: 16px; }
.pdf-b[disabled] { opacity: .6; cursor: wait; }
.pdf-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .7s linear infinite; }

/* ── Guide latéral ───────────────────────────────────────────────────── */
.guide { padding: 22px; border-radius: var(--radius) var(--corner) var(--radius) var(--radius); background: var(--ink); color: var(--cream); }
.guide__head { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 0; color: inherit; text-align: left; cursor: default; }
.guide__head b { display: block; font: 700 1rem/1.3 var(--f-display); }
.guide__head small { display: block; margin-top: 2px; font-size: .84rem; color: rgba(247,235,212,.7); }
.guide__chev { display: none; margin-left: auto; width: 20px; height: 20px; transition: transform .2s; }
.guide__body { display: grid; gap: 16px; margin-top: 20px; }
.tip { display: flex; gap: 12px; }
.tip::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .45em; border-radius: 50%; background: var(--ochre); }
.tip:nth-child(2)::before { background: var(--brick); }
.tip:nth-child(3)::before { background: var(--cream); border-radius: 0; }
.tip b { display: block; font: 700 .92rem/1.35 var(--f-display); }
.tip p { margin: 4px 0 0; font-size: .88rem; line-height: 1.55; color: rgba(247,235,212,.76); }
.guide__foot { display: grid; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-dark); font-size: .82rem; color: rgba(247,235,212,.7); }
.guide__foot .pdf-b { margin-top: 6px; justify-self: start; border-color: rgba(247,235,212,.5); color: var(--cream); }
.guide__foot .pdf-b:hover { background: var(--cream); color: var(--ink); }
.guide :focus-visible { outline-color: var(--ochre); }
@media (max-width: 960px) {
  .guide { padding: 16px 18px; }
  .guide__head { cursor: pointer; }
  .guide__chev { display: block; }
  .guide.open .guide__chev { transform: rotate(180deg); }
  .guide:not(.open) .guide__body, .guide:not(.open) .guide__foot { display: none; }
}

/* ── Formulaire 2 : écrans d'attente, fichiers, couleurs ─────────────── */
.gate { text-align: center; padding: clamp(30px, 6vw, 60px) 0; }
.gate .pdf-spin { width: 28px; height: 28px; border-width: 3px; color: var(--brick); }
.gate p { margin-top: 16px; color: var(--ink-soft); }
.save { display: inline-flex; align-items: center; gap: 8px; }
.save::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ochre); }

.drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 18px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--cream); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop svg { width: 28px; height: 28px; color: var(--brick); }
.drop b { font: 700 .95rem var(--f-display); }
.drop p { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.drop:hover, .drop.is-over { border-color: var(--brick); background: var(--cream-hi); }
.drop:has(input:focus-visible) { outline: 3px solid var(--brick); outline-offset: 3px; }
.files { display: grid; gap: 8px; margin-top: 10px; }
.file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--sand); font-size: .9rem; }
.file b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.file span span { font-size: .8rem; color: var(--ink-soft); }
.file__txt { flex: 1; min-width: 0; }
.file__x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.file__x:hover { background: rgba(52,52,64,.1); }

.pal { display: flex; flex-wrap: wrap; gap: 12px; }
.pal__c { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--cream); }
.pal__c input[type="color"] { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.field .pal__c input[type="text"] { width: 104px; min-height: 40px; padding: 8px 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.paires { display: grid; gap: 10px; }
.paire { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.field .paire input:first-child { font: 800 1.05rem var(--f-display); color: var(--brick); }

/* ── Aide : « ? », panneau, relance, fête ────────────────────────────── */
.aide-i { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; vertical-align: 1px; border-radius: 50%; border: 1.5px solid var(--ink-soft); background: transparent; color: var(--ink-soft); font: 800 .7rem/1 var(--f-display); cursor: pointer; }
.aide-i[aria-expanded="true"], .aide-i:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.aide-b { display: block; margin: 8px 0 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--ink); color: var(--cream); font: 400 .88rem/1.55 var(--f-body); }
.aide-b[hidden] { display: none; }

.aide-btn { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 99px; border: 0; background: var(--ink); color: var(--cream); font: 700 .88rem var(--f-display); cursor: pointer; box-shadow: 0 14px 30px -12px rgba(38,37,46,.6); }
.aide-btn svg { width: 20px; height: 20px; color: var(--ochre); }
.aide-btn:hover { background: var(--ink-deep); }
.aide-btn[hidden] { display: none; }
.aide-btn.pulse { animation: pulse 1.6s var(--ease) 3; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(213,163,89,.35); } }

.aide-pan { position: fixed; right: 18px; bottom: 78px; z-index: 81; width: min(380px, calc(100vw - 36px)); max-height: min(72vh, 620px); overflow: auto; border-radius: var(--radius) var(--corner) var(--radius) var(--radius); background: var(--cream-hi); border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(38,37,46,.5); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s var(--ease); }
.aide-pan.on { opacity: 1; transform: none; }
.aide-pan[hidden] { display: none; }
.aide-pan__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 18px 20px; background: var(--ink); color: var(--cream); }
.aide-pan__h span { display: block; font: 700 .68rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); }
.aide-pan__h b { display: block; margin-top: 4px; font: 700 1rem/1.3 var(--f-display); }
.aide-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(247,235,212,.12); color: var(--cream); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.aide-pan__c { padding: 18px 20px 20px; display: grid; gap: 14px; }
.aide-t { font: 700 .7rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.aide-alerte { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: #F5D9D2; color: var(--brick-deep); font-size: .9rem; }
.aide-tips { display: grid; gap: 10px; }
.aide-tips div { padding-left: 12px; border-left: 3px solid var(--ochre); font-size: .88rem; }
.aide-tips b { font-family: var(--f-display); }
.aide-tips p { margin: 2px 0 0; color: var(--ink-soft); }
.aide-q { border-bottom: 1px solid var(--line); }
.aide-q summary { list-style: none; cursor: pointer; padding: 10px 0; font: 700 .9rem/1.35 var(--f-display); }
.aide-q summary::-webkit-details-marker { display: none; }
.aide-q summary::after { content: "+"; float: right; color: var(--brick); }
.aide-q[open] summary::after { content: "–"; }
.aide-q p { margin: 0 0 10px; font-size: .88rem; color: var(--ink-soft); }
.aide-lien { border: 0; background: none; padding: 0; color: var(--brick); font: 700 .86rem var(--f-display); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.aide-q .aide-lien { margin-bottom: 10px; }
.aide-ct { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none; }
.aide-ct + .aide-ct { margin-top: 8px; }
.aide-ct:hover { border-color: var(--ink); }
.aide-ct svg { flex: none; width: 20px; height: 20px; color: var(--brick); }
.aide-ct b { display: block; font: 700 .9rem var(--f-display); }
.aide-ct small { display: block; font-size: .8rem; color: var(--ink-soft); }

.aide-nudge { position: fixed; right: 18px; bottom: 78px; z-index: 79; width: min(300px, calc(100vw - 36px)); padding: 16px 18px; border-radius: var(--radius); background: var(--cream-hi); border: 1px solid var(--line); box-shadow: 0 20px 40px -18px rgba(38,37,46,.5); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s var(--ease); }
.aide-nudge.on { opacity: 1; transform: none; }
.aide-nudge[hidden] { display: none; }
.aide-nudge b { display: block; padding-right: 28px; font: 700 .95rem var(--f-display); }
.aide-nudge p { margin: 4px 0 12px; font-size: .88rem; color: var(--ink-soft); }
.aide-nudge .aide-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: rgba(52,52,64,.08); color: var(--ink); }

.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 30% { box-shadow: 0 0 0 6px rgba(157,56,42,.25); } }

.fete { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.fete i { position: absolute; top: -20px; border-radius: 2px; animation: tombe linear forwards; }
@keyframes tombe { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); } }

@media print {
  .aide-btn, .aide-pan, .aide-nudge, .wiz__guide, .wiz__actions { display: none !important; }
}