/* FOX — Univers « Saisie capsule » (charte fox-branding §6, évolution actée le 2026-07-23, PR2).
   Chargé UNIQUEMENT par les parcours de saisie (widget, formulaire pro, préparation) via la
   classe body.saisie-capsule. Toutes les autres surfaces (documents, résultat client, site,
   back-office) restent « cabinet éditorial » : filets, pas d'ombres, angles 4-6px.
   White-label : tout dérive de --highlight/--accent (surchargés par la couleur d'agence) ;
   les valeurs rgba orange sont des replis pour les navigateurs sans color-mix(). */

body.saisie-capsule{background:linear-gradient(170deg,#FFF8F3,#FBFAF7 60%) fixed}
body.saisie-capsule.embed{background:transparent}

/* Cartes de saisie : arrondies, ombre douce, sans filet. */
body.saisie-capsule .carte{border:none;border-radius:16px;box-shadow:0 8px 26px rgba(35,38,46,.09)}
body.saisie-capsule .carte.a-bande{border-top:4px solid var(--highlight)}

/* Champs : plus tactiles (≥44px), focus orange doux. */
body.saisie-capsule input:not([type=checkbox]):not([type=radio]),
body.saisie-capsule select,
body.saisie-capsule textarea{border-radius:10px;padding:12px 14px;min-height:46px}
body.saisie-capsule input:focus,
body.saisie-capsule select:focus,
body.saisie-capsule textarea:focus{
  border-color:var(--highlight);outline:none;
  box-shadow:0 0 0 3px rgba(240,84,0,.14);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--highlight) 16%,transparent)}
body.saisie-capsule input[type=range]{accent-color:var(--highlight);min-height:0;box-shadow:none}

/* ——— Boutons capsule ——— */
.cap-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  margin-top:0;padding:13px 26px;min-height:48px;font-family:inherit;font-weight:600;
  font-size:14.5px;letter-spacing:0;cursor:pointer;border:none;
  transition:transform .16s,box-shadow .16s,background .16s,color .16s}
.cap-btn--primaire{color:#fff;
  background:var(--highlight);
  background:linear-gradient(135deg,color-mix(in srgb,var(--highlight) 78%,#FFD9C2),var(--highlight));
  box-shadow:0 6px 18px rgba(240,84,0,.28);
  box-shadow:0 6px 18px color-mix(in srgb,var(--highlight) 30%,transparent)}
.cap-btn--primaire:hover{opacity:1;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(240,84,0,.36);
  box-shadow:0 10px 24px color-mix(in srgb,var(--highlight) 38%,transparent)}
.cap-btn--secondaire{background:var(--feuille);color:var(--accent);border:2px solid var(--accent)}
.cap-btn--secondaire:hover{opacity:1;background:var(--accent);color:var(--sur-accent)}
.cap-btn--ghost{background:rgba(42,46,57,.06);color:var(--accent)}
.cap-btn--ghost:hover{opacity:1;background:rgba(42,46,57,.12)}
.cap-btn:active{transform:scale(.98)}
.cap-btn:focus-visible{outline:none;
  box-shadow:0 0 0 4px rgba(240,84,0,.30);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--highlight) 32%,transparent)}
.cap-btn[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ——— Progression : pastille d'étape + points ——— */
.cap-pill{display:inline-block;background:var(--feuille);border-radius:999px;padding:6px 16px;
  font-size:11.5px;font-weight:600;color:var(--highlight-texte);
  box-shadow:0 3px 10px rgba(35,38,46,.10)}
.cap-dots{display:flex;gap:5px;justify-content:center;align-items:center;flex-wrap:wrap}
.cap-dots i{width:6px;height:6px;border-radius:99px;background:var(--filet);transition:width .2s,background .2s}
.cap-dots i.fait{background:var(--accent);opacity:.35}
.cap-dots i.on{background:var(--highlight);width:18px;opacity:1}

/* ——— Puce de choix tactile (radio/checkbox habillé — même champ, même valeur) ——— */
.cap-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:6px}
.cap-chip{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;
  border:2px solid var(--filet);border-radius:14px;padding:10px 8px;text-align:center;
  font-weight:600;font-size:13.5px;background:var(--feuille);cursor:pointer;
  transition:border-color .15s,background .15s}
.cap-chip:hover{border-color:var(--plume)}
.cap-chip input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0}
.cap-chip.sel,.cap-chip:has(input:checked){
  border-color:var(--highlight);color:var(--highlight-texte);
  background:#FFF3EC;
  background:color-mix(in srgb,var(--highlight) 9%,#fff)}
.cap-chip:has(input:focus-visible){box-shadow:0 0 0 3px rgba(240,84,0,.20)}

/* ——— Anneau de complétude (module O4) — --pct est posé en style inline par le JS ——— */
.cap-ring{border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--highlight) 0 var(--pct,0%),var(--filet) var(--pct,0%) 100%)}
.cap-ring>b{background:var(--feuille);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .cap-btn,.cap-dots i,.cap-chip{transition:none}
  .cap-btn--primaire:hover{transform:none}
}

/* ——— Dark mode (parcours PRO internes uniquement : body.theme-pro, cf. base.html) ———
   Les tokens basculent déjà ; on neutralise le dégradé clair et on adoucit les ombres. */
@media (prefers-color-scheme: dark){
  body.theme-pro.saisie-capsule{background:var(--papier)}
  body.theme-pro.saisie-capsule .carte{box-shadow:0 8px 26px rgba(0,0,0,.35)}
  body.theme-pro.saisie-capsule .cap-pill{box-shadow:0 3px 10px rgba(0,0,0,.35)}
  body.theme-pro.saisie-capsule .cap-chip.sel,
  body.theme-pro.saisie-capsule .cap-chip:has(input:checked){background:#33241C;color:var(--highlight)}
}