/* ============================================================================
   Champ « offre » partagé — sélecteur de type, remise, condition
   Source  : kiclic/offer-form.css (Redesign Site internet-13), préfixe of-
   CDC     : Innovation/CDC_Catalogue_Offres_Remises.md §8.3

   Le même bloc de saisie était écrit QUATRE fois (création de Rali, réglages
   d'un Rali, modèles, séries). Cette feuille et lib/offerField.ts existent
   pour qu'il n'y en ait plus qu'un.

   Scopé sous `.of-scope` — une classe neutre que chaque écran pose sur son
   conteneur, parce qu'ils ont tous un scope différent (.sg-scope, .rs-root,
   #tpl-app). La page catalogue, elle, a sa propre copie dans
   catalogue-assets/offer-form.css : elle en utilise bien plus que ces blocs.
   ========================================================================== */
.of-scope .of-typerow { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.of-scope .of-seg { display:flex; gap:4px; padding:4px; border-radius:14px; background:var(--cp-t3); border:1px solid var(--border-soft); flex:1 1 auto; min-width:0 }
.of-scope .of-seg button { flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 10px; border-radius:10px; border:0; background:none; font:inherit; font-size:12.5px; font-weight:680; color:var(--fg-muted); cursor:pointer; white-space:nowrap; transition:all var(--t-fast) }
.of-scope .of-seg button svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto }
.of-scope .of-seg button:hover { color:var(--fg-secondary) }
.of-scope .of-seg button.on { background:var(--bg-elev-1); color:var(--fg); box-shadow:0 2px 10px rgba(0,0,0,.22) }
.of-scope .of-seg button.on svg { stroke:url(#k-grad-stroke) }
.of-scope .of-remise { display:flex; flex-direction:column; gap:6px; flex:0 0 auto }
.of-scope .of-remise > label { font-size:11.5px; font-weight:680; color:var(--fg-secondary) }
.of-scope .of-remise.none { flex:1 1 220px; flex-direction:row; align-items:center; gap:8px; padding:11px 13px; border-radius:12px; background:var(--cp-t2); border:1px solid var(--border-soft); font-size:11.5px; color:var(--fg-muted); line-height:1.4 }
.of-scope .of-remise.none svg { width:14px; height:14px; flex:0 0 auto; stroke:var(--cp-tx-blue); fill:none; stroke-width:2 }
.of-scope .of-rin { display:flex; align-items:center; height:52px; width:132px; padding:0 14px; border-radius:13px; border:1.5px solid rgba(233,78,139,.34); background:rgba(233,78,139,.07); transition:border-color var(--t-fast), box-shadow var(--t-fast) }
.of-scope .of-rin:focus-within { border-color:rgba(233,78,139,.7); box-shadow:0 0 0 3px rgba(233,78,139,.12) }
.of-scope .of-rin input { flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0; color:var(--fg); font-family:var(--font-display); font-size:22px; font-weight:850; letter-spacing:-.02em; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield }
.of-scope .of-rin input::-webkit-outer-spin-button, .of-scope .of-rin input::-webkit-inner-spin-button { appearance:none; -webkit-appearance:none; margin:0 }
.of-scope .of-rin input::placeholder { color:var(--fg-muted); font-weight:700 }
.of-scope .of-rin .cur { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--cp-tx-pink); margin-left:5px }
.of-scope .of-cond { border:1px solid var(--border-soft); border-radius:14px; background:var(--cp-t1); overflow:hidden; transition:border-color var(--t-fast) }
.of-scope .of-cond.on { border-color:rgba(185,104,199,.32); background:rgba(185,104,199,.05) }
.of-scope .of-cond .hd { display:flex; align-items:center; gap:11px; padding:12px 14px }
.of-scope .of-cond .hd .tx { display:flex; flex-direction:column; gap:2px; min-width:0 }
.of-scope .of-cond .hd b { font-size:13px; font-weight:700; color:var(--fg) }
.of-scope .of-cond .hd small { font-size:11.5px; color:var(--fg-muted) }
.of-scope .of-cond .bd { padding:0 14px 14px; display:flex; flex-direction:column; gap:9px }
.of-scope .of-cond .bd input { width:100%; box-sizing:border-box; height:44px; padding:0 14px; border-radius:12px; border:1.5px solid var(--border-soft); background:var(--bg-elev-1); color:var(--fg); font:inherit; font-size:13.5px; font-weight:600; outline:none }
.of-scope .of-cond .bd input:focus { border-color:rgba(185,104,199,.55); box-shadow:0 0 0 3px rgba(185,104,199,.1) }
.of-scope .of-cond .chips { display:flex; flex-wrap:wrap; gap:6px }
.of-scope .of-cond .chips button { font:inherit; font-size:11.5px; font-weight:600; color:var(--fg-secondary); padding:5px 11px; border-radius:999px; border:1px dashed var(--border); background:var(--cp-t2); cursor:pointer; transition:all var(--t-fast) }
.of-scope .of-cond .chips button:hover { color:var(--fg); border-style:solid; border-color:rgba(185,104,199,.5); background:rgba(185,104,199,.1) }
.of-scope .of-cond .ft { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:var(--fg-secondary); line-height:1.45 }
.of-scope .of-cond .ft svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; stroke:var(--cp-tx-blue); fill:none; stroke-width:2 }
.of-scope .of-cond .ft b { color:var(--fg); font-weight:650 }
.of-scope .pf-pv .shot .of-condline { position:absolute; left:10px; right:10px; bottom:62px; font-size:10.5px; font-weight:650; color:rgba(255,255,255,.82); background:rgba(8,8,12,.6); backdrop-filter:blur(6px); border-radius:8px; padding:4px 8px; text-align:center }
.of-scope .of-pill { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; flex:0 0 auto }
.of-scope .of-pill.gratuit { background:rgba(91,141,239,.16); border:1px solid rgba(91,141,239,.34); color:#A8C4FF }
.of-scope .of-pill.remise_pourcent { background:rgba(233,78,139,.16); border:1px solid rgba(233,78,139,.36); color:#FCA5C4 }
.of-scope .of-pill.remise_montant { background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.32); color:#FCD34D }
.of-scope .of-pill.big { height:26px; padding:0 11px; font-size:12.5px }
.of-scope .of-pill.mini { height:18px; padding:0 6px; font-size:9.5px; font-weight:800 }
html[data-theme="light"] .of-scope .of-pill.gratuit { color:#1D4ED8 }
html[data-theme="light"] .of-scope .of-pill.remise_pourcent { color:#BE185D }
html[data-theme="light"] .of-scope .of-pill.remise_montant { color:#B45309 }
.of-scope .cp-prod .ph .tag .of-pill { box-shadow:0 4px 14px rgba(0,0,0,.35) }
.of-scope .gm-rowhead .of-pill.mini { margin-left:2px }
.of-scope .gm-chip .of-pill.mini { margin-left:4px }

/* ── L'interrupteur de l'offre conditionnelle ──────────────────────────────
   Repris de product-form.css. Il manquait à l'extraction : hors de la page
   catalogue, le bouton s'affichait nu — visible seulement à l'écran, aucune
   erreur pour le signaler. */
.of-scope .pf-sw { position:relative; width:38px; height:22px; border-radius:999px; border:0;
  background:var(--cp-t5, rgba(255,255,255,.14)); cursor:pointer; flex:0 0 auto;
  transition:background var(--t-fast, .18s) }
.of-scope .pf-sw::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform var(--t-fast, .18s) }
.of-scope .pf-sw.on { background:var(--k-gradient-h, linear-gradient(90deg,#5B8DEF,#E94E8B)) }
.of-scope .pf-sw.on::after { transform:translateX(16px) }

/* ── Repli des variables du design ─────────────────────────────────────────
   catalogue-assets/catalogue-tokens.css définit --cp-* et --t-fast, mais cette
   feuille est aussi chargée par des pages qui ne l'ont pas (création de Rali,
   réglages, modèles). Sans ces valeurs par défaut, les fonds deviennent
   transparents et le segmented control disparaît. */
.of-scope {
  --cp-t1: rgba(255,255,255,.03);
  --cp-t2: rgba(255,255,255,.05);
  --cp-t3: rgba(255,255,255,.07);
  --cp-t4: rgba(255,255,255,.10);
  --cp-t5: rgba(255,255,255,.14);
  --t-fast: .18s;
  --k-gradient-h: linear-gradient(90deg,#5B8DEF,#B968C7,#E94E8B);
}

/* ── Gratuité : même cadre que « Remise accordée » ─────────────────────────
   Cf. catalogue-assets/offer-form.css — le bloc de droite garde le même
   gabarit quel que soit le type d'offre, pour que la ligne ne saute pas d'un
   clic à l'autre. */
.of-scope .of-rin.free { border-color:rgba(52,199,120,.34); background:rgba(52,199,120,.07); cursor:default }
.of-scope .of-rin.free .val { flex:1 1 auto; color:var(--fg); font-family:var(--font-display);
  font-size:22px; font-weight:850; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.of-scope .of-rin.free .cur { color:#34c778 }


/* ── Curseur de test + seuil de bascule ────────────────────────────────────
   Repris de kiclic/offer-form.css. Le curseur EST le champ de saisie du
   pourcentage (une seule valeur, un seul contrôle) ; il passe en lecture seule
   sur une gratuité ou une remise en euros, où il montre alors la « remise
   équivalente ». Le repère sur la piste marque le seuil au-delà duquel l'offre
   commence à coûter. */
.of-scope .of-slider { margin-top:14px }
.of-scope .of-slider .lb { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:11px; color:var(--fg-muted); font-weight:650 }
.of-scope .of-slider .lb b { font-family:var(--font-display); font-size:14px; font-weight:850; color:#6EE7B7; font-variant-numeric:tabular-nums }
.of-scope .of-slider.over .lb b { color:#FCA5C4 }
.of-scope .of-slider .tk { position:relative; height:26px; margin-top:5px; display:flex; align-items:center }
.of-scope .of-slider .tk:before { content:''; position:absolute; left:0; right:0; height:8px; border-radius:999px; background:var(--cp-t4) }
.of-scope .of-slider .fill { position:absolute; left:0; height:8px; border-radius:999px; background:linear-gradient(90deg,#34D399,#34D399); transition:width .18s var(--ease-out) }
.of-scope .of-slider.over .fill { background:linear-gradient(90deg,#34D399 0%, #34D399 55%, #F59E0B 78%, #E94E8B 100%) }
.of-scope .of-slider .mark { position:absolute; top:0; bottom:0; width:0; display:flex; align-items:center; justify-content:center; pointer-events:none }
.of-scope .of-slider .mark i { display:block; width:2px; height:18px; border-radius:2px; background:var(--fg); opacity:.55; box-shadow:0 0 0 2px var(--bg-elev-1) }
.of-scope .of-slider input[type=range] { position:relative; z-index:2; width:100%; margin:0; background:transparent; appearance:none; -webkit-appearance:none; height:26px; cursor:pointer }
.of-scope .of-slider input[type=range]:disabled { cursor:not-allowed; opacity:.75 }
.of-scope .of-slider input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--k-violet); box-shadow:0 3px 10px rgba(0,0,0,.4) }
.of-scope .of-slider input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--k-violet); box-shadow:0 3px 10px rgba(0,0,0,.4) }
.of-scope .of-slider input[type=range]::-moz-range-track { background:transparent }
.of-scope .of-slider .sc { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--fg-muted); margin-top:2px }
.of-scope .of-slider .sc span:nth-child(2) { font-weight:700; color:var(--fg-secondary) }
.of-scope .of-seuil { display:flex; align-items:flex-start; gap:8px; margin-top:11px; padding:10px 12px; border-radius:12px; font-size:11.5px; line-height:1.45; color:var(--fg-secondary) }
.of-scope .of-seuil svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; fill:none; stroke-width:2.2 }
.of-scope .of-seuil b { color:var(--fg); font-weight:750 }
.of-scope .of-seuil.ok { background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.24) }
.of-scope .of-seuil.ok svg { stroke:#34D399 }
.of-scope .of-seuil.over { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.24) }
.of-scope .of-seuil.over svg { stroke:#F59E0B }
.of-scope .of-seuil.warn { background:rgba(91,141,239,.08); border:1px solid rgba(91,141,239,.2) }
.of-scope .of-seuil.warn svg { stroke:var(--cp-tx-blue) }


/* ── Thème clair ───────────────────────────────────────────────────────────
   Le site bascule via html[data-theme="light"] (cf. catalogue-tokens.css).
   Sans ces valeurs, la piste du curseur reste transparente sur fond blanc et
   le vert clair du pourcentage devient illisible. */
html[data-theme="light"] .of-scope {
  --cp-t1: rgba(17,24,39,.02);
  --cp-t2: rgba(17,24,39,.03);
  --cp-t3: rgba(17,24,39,.05);
  --cp-t4: rgba(17,24,39,.08);
  --cp-t5: rgba(17,24,39,.12);
}
/* Le vert de #6EE7B7 passe sous le seuil de contraste sur blanc. */
html[data-theme="light"] .of-scope .of-slider .lb b { color:#0E9F6E }
html[data-theme="light"] .of-scope .of-slider.over .lb b { color:#D9488B }