/* ============================================================================
   Fiche offre — port du design Claude Design
   Sources : kiclic/product-form.css (préfixe pf-) + kiclic/offer-form.css
             (préfixe of-), « Redesign Site internet-13 ».
   CDC     : Innovation/CDC_Catalogue_Offres_Remises.md §8.4

   Scopé sous .cp-root, comme catalogue.css : le DashboardLayout est en
   Tailwind et les resets du design casseraient le reste du site s'ils
   fuyaient.

   Aucun blur >= 60px n'est introduit ici (cf. memoire « perf GPU web ») : les
   halos du design sont des radial-gradient.
   ========================================================================== */
/* Kiclic — Fiche produit (création / édition) · modale paysage 2 colonnes · préfixe pf- */

/* ===== Coque paysage ===== */
.cp-root .cp-modal.pf { max-width:min(1080px, 96vw); min-width:0; width:100%; display:flex; flex-direction:column; max-height:calc(100vh - 40px); }
.cp-root .pf-body, .cp-root .pf-grid, .cp-root .pf-form, .cp-root .pf-rail, .cp-root .pf-deploy, .cp-root .pf-deploy .gm-picker, .cp-root .pf-deploy .gm-plist { min-width:0; }
.cp-root .pf .cp-mhead { display:flex; align-items:flex-start; gap:14px; padding:20px 26px 16px; border-bottom:1px solid var(--border-soft); flex:0 0 auto; }
.cp-root .pf .cp-mhead .glyph { width:42px; height:42px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; color:#fff; background:var(--k-gradient); box-shadow:0 8px 22px rgba(185,104,199,.32); }
.cp-root .pf .cp-mhead .glyph svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2; }
.cp-root .pf .cp-mhead .glyph.img { background:var(--bg-elev-2); box-shadow:0 6px 16px rgba(0,0,0,.28); padding:0; overflow:hidden; position:relative; }
.cp-root .pf .cp-mhead .glyph.img img { position:absolute; inset:4px; margin:auto; width:auto; height:auto; max-width:calc(100% - 8px); max-height:calc(100% - 8px); object-fit:contain; }
.cp-root .pf .cp-mhead .hx { flex:1 1 auto; min-width:0; }
.cp-root .pf .cp-mhead h3 { margin:0; font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.02em; }
.cp-root .pf .cp-mhead .s { font-size:12.5px; color:var(--fg-muted); margin-top:3px; line-height:1.4; }
.cp-root .pf .cp-mhead .x { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border-soft); background:var(--cp-t2); color:var(--fg-muted); cursor:pointer; display:grid; place-items:center; transition:all var(--t-fast); }
.cp-root .pf .cp-mhead .x:hover { color:var(--fg); border-color:var(--border); background:var(--cp-t3); }
.cp-root .pf .cp-mhead .x svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; }

.cp-root .pf-grid { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 372px; }
.cp-root .pf-form { min-width:0; min-height:0; overflow-y:auto; padding:20px 26px 22px; display:flex; flex-direction:column; gap:20px; scrollbar-width:thin; }
.cp-root .pf-form::-webkit-scrollbar { width:7px; }
.cp-root .pf-form::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.cp-root .pf-rail { min-width:0; min-height:0; overflow-y:auto; padding:20px 22px 22px; border-left:1px solid var(--border-soft); background:linear-gradient(180deg, var(--cp-t2), transparent 40%); display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; }
.cp-root .pf-rail::-webkit-scrollbar { width:5px; }
.cp-root .pf-rail::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ===== Section titres ===== */
.cp-root .pf-sect { display:flex; align-items:center; gap:10px; }
.cp-root .pf-sect .num { width:20px; height:20px; border-radius:50%; background:var(--cp-t4); border:1px solid var(--border-soft); color:var(--fg-secondary); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:0 0 auto; }
.cp-root .pf-sect .ttl { font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg); }
.cp-root .pf-sect .sub { font-size:11.5px; color:var(--fg-muted); }
.cp-root .pf-sect .line { flex:1 1 auto; height:1px; background:var(--border-soft); }
.cp-root .pf-sect .req { font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--cp-tx-pink); border:1px solid color-mix(in srgb, var(--k-pink) 32%, transparent); padding:2px 7px; border-radius:999px; }
.cp-root .pf-block { display:flex; flex-direction:column; gap:11px; }

/* ===== Nom ===== */
.cp-root .pf-name { display:flex; align-items:center; gap:12px; height:56px; padding:0 15px; background:var(--cp-t2); border:1.5px solid var(--border-soft); border-radius:15px; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.cp-root .pf-name:focus-within { border-color:rgba(185,104,199,.55); box-shadow:0 0 0 3px rgba(185,104,199,.1); }
.cp-root .pf-name .gift { width:36px; height:36px; border-radius:11px; background:rgba(233,78,139,.14); color:#FF9CC5; display:grid; place-items:center; flex:0 0 auto; }
.cp-root .pf-name .gift svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.cp-root .pf-name input { flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0; color:var(--fg); font-family:var(--font-sans); font-size:18px; font-weight:650; letter-spacing:-.01em; }
.cp-root .pf-name input::placeholder { color:var(--fg-muted); font-weight:500; }


/* ===== Description ===== */
.cp-root .pf-desc { position:relative; }
.cp-root .pf-desc textarea { width:100%; min-height:92px; resize:vertical; padding:12px 14px; border-radius:14px; border:1.5px solid var(--border-soft); background:var(--cp-t2); color:var(--fg); font:inherit; font-size:13.5px; line-height:1.5; outline:none; box-sizing:border-box; }
.cp-root .pf-desc textarea:focus { border-color:rgba(91,141,239,.5); box-shadow:0 0 0 3px rgba(91,141,239,.1); }
.cp-root .pf-desc textarea::placeholder { color:var(--fg-muted); }
.cp-root .pf-reuse { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:var(--fg-secondary); line-height:1.45; }
.cp-root .pf-reuse svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; stroke:var(--cp-tx-blue); fill:none; stroke-width:2; }
.cp-root .pf-reuse b { color:var(--fg); font-weight:650; }
.cp-root .pf-gen { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--border-soft); background:var(--cp-t2); color:var(--fg-secondary); font:inherit; font-size:12px; font-weight:650; cursor:pointer; transition:all var(--t-fast); }
.cp-root .pf-gen:hover { color:var(--fg); border-color:rgba(185,104,199,.4); }
.cp-root .pf-gen svg { width:13px; height:13px; stroke:url(#k-grad-stroke); fill:none; stroke-width:2; }

/* ===== Capacité ===== */
.cp-root .pf-cap { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,rgba(91,141,239,.10),rgba(233,78,139,.10)); border:1px solid rgba(185,104,199,.28); flex-wrap:wrap; }
.cp-root .pf-cap .big { width:92px; text-align:center; font-family:var(--font-display); font-size:26px; font-weight:800; padding:8px 6px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev-1); color:var(--fg); font-variant-numeric:tabular-nums; outline:none; appearance:textfield; -moz-appearance:textfield; }
.cp-root .pf-cap .big::-webkit-outer-spin-button, .cp-root .pf-cap .big::-webkit-inner-spin-button { appearance:none; -webkit-appearance:none; margin:0; }
.cp-root .pf-cap .big:focus { border-color:rgba(185,104,199,.6); }
.cp-root .pf-cap .mid { font-size:14px; color:var(--fg-secondary); }
.cp-root .pf-cap select { width:118px; }
.cp-root .pf-cap .note { flex:1 1 120px; min-width:0; font-size:11.5px; color:var(--fg-secondary); line-height:1.4; }
/* Mode « modifier partout » : la capacité est diffusable, mais c'est un choix
   affiché — pas une case perdue dans le repli « Personnaliser ». */
.cp-root .pf-cap .note .capall { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; font-weight:680; color:var(--fg); cursor:pointer; }

/* ===== Argent (coût / valeur) ===== */
.cp-root .pf-money { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-root .pf-mfield { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cp-root .pf-block { display:flex; flex-direction:column; gap:11px; min-width:0; }
.cp-root .pf-mfield > label { font-size:12px; font-weight:650; color:var(--fg-secondary); display:flex; align-items:center; gap:6px; }
.cp-root .pf-mfield > label .opt { font-weight:500; color:var(--fg-muted); }
.cp-root .pf-inpu { position:relative; display:flex; align-items:center; height:52px; min-width:0; padding:0 15px; border-radius:13px; border:1.5px solid var(--border-soft); background:var(--cp-t2); transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.cp-root .pf-inpu.cost:focus-within { border-color:rgba(251,164,198,.5); box-shadow:0 0 0 3px rgba(233,78,139,.08); }
.cp-root .pf-inpu.value:focus-within { border-color:rgba(234,179,8,.5); box-shadow:0 0 0 3px rgba(234,179,8,.1); }
.cp-root .pf-inpu input { flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0; color:var(--fg); font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; }
.cp-root .pf-inpu input::-webkit-outer-spin-button, .cp-root .pf-inpu input::-webkit-inner-spin-button { appearance:none; -webkit-appearance:none; margin:0; }
.cp-root .pf-inpu input::placeholder { color:var(--fg-muted); font-weight:600; }
.cp-root .pf-inpu .cur { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--fg-muted); flex:0 0 auto; margin-left:6px; }
.cp-root .pf-warn { display:none; align-items:flex-start; gap:8px; margin-top:2px; padding:9px 12px; border-radius:11px; background:rgba(245,158,11,.09); border:1px solid rgba(245,158,11,.22); font-size:11.5px; color:var(--cp-tx-amber); line-height:1.4; }
.cp-root .pf-warn.on { display:flex; }
.cp-root .pf-warn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto; margin-top:1px; }

/* ===== Validité du lot (segmenté) ===== */
.cp-root .pf-valid { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cp-root .pf-vseg { display:flex; gap:4px; padding:4px; border-radius:13px; background:var(--cp-t3); border:1px solid var(--border-soft); }
.cp-root .pf-vseg button { padding:8px 13px; border-radius:9px; border:0; background:none; font:inherit; font-size:12.5px; font-weight:650; color:var(--fg-muted); cursor:pointer; white-space:nowrap; transition:all var(--t-fast); }
.cp-root .pf-vseg button:hover { color:var(--fg); }
.cp-root .pf-vseg button.on { background:var(--bg-elev-1); color:var(--fg); box-shadow:0 2px 8px rgba(0,0,0,.2); }
.cp-root .pf-vcustom { display:flex; align-items:center; gap:8px; }
.cp-root .pf-vcustom input { width:64px; text-align:center; padding:8px 6px; border-radius:10px; border:1px solid var(--border); background:var(--cp-t2); color:var(--fg); font:inherit; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; outline:none; appearance:textfield; -moz-appearance:textfield; }
.cp-root .pf-vcustom input::-webkit-outer-spin-button, .cp-root .pf-vcustom input::-webkit-inner-spin-button { appearance:none; -webkit-appearance:none; margin:0; }
.cp-root .pf-vcustom input:focus { border-color:rgba(185,104,199,.55); }
.cp-root .pf-vcustom span { font-size:12.5px; color:var(--fg-secondary); }

/* ===== Personnaliser (disclosure) ===== */
.cp-root .pf-more { border:1px solid var(--border-soft); border-radius:14px; background:var(--cp-t1); overflow:hidden; }
.cp-root .pf-more > summary { list-style:none; cursor:pointer; padding:13px 16px; font-size:13px; font-weight:700; color:var(--fg); display:flex; align-items:center; gap:9px; }
.cp-root .pf-more > summary::-webkit-details-marker { display:none; }
.cp-root .pf-more > summary .chev { transition:transform var(--t-fast); }
.cp-root .pf-more > summary .chev svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; }
.cp-root .pf-more[open] > summary .chev { transform:rotate(90deg); }
.cp-root .pf-more > summary .opt { margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted); border:1px solid var(--border-soft); padding:2px 8px; border-radius:999px; }
.cp-root .pf-more .inner { padding:2px 16px 16px; display:flex; flex-direction:column; gap:14px; }
.cp-root .pf-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-root .pf-f { display:flex; flex-direction:column; gap:6px; }
.cp-root .pf-f > label { font-size:12px; font-weight:650; color:var(--fg-secondary); }
.cp-root .pf-f .hint { font-size:11px; color:var(--fg-muted); line-height:1.4; }
.cp-root .pf-f .dot { display:flex; gap:8px; align-items:center; }
.cp-root .pf-sw { position:relative; width:38px; height:22px; border-radius:999px; border:0; background:var(--cp-t5); cursor:pointer; flex:0 0 auto; transition:background var(--t-fast); }
.cp-root .pf-sw::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform var(--t-fast) var(--spring); }
.cp-root .pf-sw.on { background:var(--k-gradient-h); }
.cp-root .pf-sw.on::after { transform:translateX(16px); }

/* ===== Note privée ===== */
.cp-root .pf-note { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:13px; background:rgba(91,141,239,.07); border:1px solid rgba(91,141,239,.18); font-size:12px; color:var(--fg-secondary); line-height:1.45; }
.cp-root .pf-note svg { width:15px; height:15px; stroke:var(--cp-tx-blue); fill:none; stroke-width:2; flex:0 0 auto; margin-top:1px; }
.cp-root .pf-note b { color:var(--fg); font-weight:650; }

/* ===== RAIL DROIT ===== */
.cp-root .pf-railhead { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-muted); }
.cp-root .pf-railhead svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }

/* Aperçu côté joueur */
.cp-root .pf-pv { border-radius:16px; overflow:hidden; border:1px solid var(--border-soft); background:var(--bg-elev-2); }
.cp-root .pf-pv .shot { position:relative; aspect-ratio:16/10; min-height:170px; box-sizing:border-box; background:
    radial-gradient(120% 90% at 10% 0%, rgba(233,78,139,.42), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(245,158,11,.36), transparent 55%),
    linear-gradient(135deg,#2D1B4E 0%, #1A0A2E 100%); display:block; overflow:hidden; }
.cp-root .pf-pv .shot img { position:absolute; inset:14px 14px 60px; margin:auto; width:auto; height:auto; max-width:calc(100% - 28px); max-height:calc(100% - 74px); object-fit:contain; filter:drop-shadow(0 12px 26px rgba(0,0,0,.5)); }
.cp-root .pf-pv .shot .noimg { position:absolute; inset:0; margin:auto; width:max-content; height:max-content; max-width:calc(100% - 28px); }
.cp-root .pf-pv .shot .noimg { font-family:ui-monospace,monospace; font-size:10px; color:rgba(255,255,255,.5); text-align:center; padding:10px 14px; border:1px dashed rgba(255,255,255,.2); border-radius:12px; }
.cp-root .pf-pv .shot .vchip { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:rgba(8,8,12,.66); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:10.5px; font-weight:700; }
.cp-root .pf-pv .shot .vchip svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2; }
.cp-root .pf-pv .gbadge { position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:12px; background:rgba(8,8,10,.72); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); }
.cp-root .pf-pv .gbadge .em { width:28px; height:28px; border-radius:9px; background:var(--k-gradient-h); color:#fff; display:grid; place-items:center; flex:0 0 auto; }
.cp-root .pf-pv .gbadge .em svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.cp-root .pf-pv .gbadge .k { font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.cp-root .pf-pv .gbadge .v { font-size:13px; font-weight:800; color:#fff; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-root .pf-pv .info { padding:12px 14px; }
.cp-root .pf-pv .info .nm { font-size:14.5px; font-weight:750; letter-spacing:-.01em; color:var(--fg); }
.cp-root .pf-pv .info .ds { font-size:12px; color:var(--fg-secondary); line-height:1.45; margin-top:5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cp-root .pf-pv .info .ds.empty { color:var(--fg-muted); font-style:italic; }

/* Simulateur valeur */
.cp-root .pf-sim { border-radius:18px; padding:2px; background:
    linear-gradient(var(--bg-elev-1),var(--bg-elev-1)) padding-box,
    linear-gradient(135deg, rgba(16,185,129,.4), rgba(185,104,199,.28), rgba(233,78,139,.4)) border-box; border:2px solid transparent; position:relative; overflow:hidden; }
.cp-root .pf-sim .in { position:relative; z-index:1; background:var(--bg-elev-1); border-radius:16px; padding:14px; }
.cp-root .pf-sim .glow { position:absolute; inset:-30%; z-index:0; background:radial-gradient(40% 50% at 20% 15%, rgba(16,185,129,.14), transparent 70%), radial-gradient(40% 50% at 82% 85%, rgba(233,78,139,.14), transparent 70%); pointer-events:none; }
.cp-root .pf-sim .cap { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); }
.cp-root .pf-sim .big { font-family:var(--font-display); font-weight:900; font-size:40px; line-height:1; letter-spacing:-.03em; margin-top:5px; font-variant-numeric:tabular-nums; background:linear-gradient(120deg,#FFFFFF,#A7F3D0 70%, #E94E8B 120%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; transition:transform var(--t-base) var(--spring); }
.cp-root .pf-sim .big.bump { animation:pfBump .34s var(--spring); }
html[data-theme="light"] .cp-root .pf-sim .big { background:linear-gradient(120deg,#0F766E,#059669 55%,#DB2777 120%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes pfBump{ 0%{ transform:scale(1);} 50%{ transform:scale(1.05);} 100%{ transform:scale(1);} }
.cp-root .pf-sim .eq { font-size:11.5px; color:var(--fg-secondary); margin-top:5px; font-variant-numeric:tabular-nums; }
.cp-root .pf-sim .eq b { color:var(--fg); font-weight:700; }
.cp-root .pf-sim .rows { margin-top:12px; }
.cp-root .pf-mrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--border-soft); }
.cp-root .pf-mrow:last-child { border-bottom:0; }
.cp-root .pf-mrow .l { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-secondary); }
.cp-root .pf-mrow .l .d { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.cp-root .pf-mrow .l .d.g { background:#34D399; } .cp-root .pf-mrow .l .d.p { background:#E94E8B; }
.cp-root .pf-mrow .val { font-size:13.5px; font-weight:800; color:var(--fg); font-variant-numeric:tabular-nums; }
.cp-root .pf-spread { margin-top:12px; padding:12px 13px; border-radius:13px; background:linear-gradient(120deg,rgba(52,211,153,.14),rgba(91,141,239,.1)); border:1px solid rgba(52,211,153,.22); display:none; }
.cp-root .pf-spread.on { display:block; animation:pfSwap .4s var(--ease-out); }
@keyframes pfSwap{ 0%{ opacity:0; transform:translateY(4px);} 100%{ opacity:1; transform:translateY(0);} }
.cp-root .pf-spread .t { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#6EE7B7; margin-bottom:5px; }
.cp-root .pf-spread .t svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; }
.cp-root .pf-spread .m { font-size:12.5px; color:var(--fg); line-height:1.45; }
.cp-root .pf-spread .m b { font-weight:800; } .cp-root .pf-spread .m .vv { color:#6EE7B7; } .cp-root .pf-spread .m .cc { color:#FCA5C4; }
.cp-root .pf-sim .empty { padding:16px 6px 10px; text-align:center; }
.cp-root .pf-sim .empty .t { font-size:12.5px; font-weight:700; color:var(--fg-secondary); }
.cp-root .pf-sim .empty .d { font-size:11.5px; color:var(--fg-muted); margin-top:4px; line-height:1.4; }
.cp-root .pf-sim.has .empty { display:none; }
.cp-root .pf-sim:not(.has) .rows, .cp-root .pf-sim:not(.has) .big, .cp-root .pf-sim:not(.has) .eq, .cp-root .pf-sim:not(.has) .cap, .cp-root .pf-sim:not(.has) .spread, .cp-root .pf-sim:not(.has) .pf-spread { display:none; }

/* Récap réutilisation */
.cp-root .pf-reuse-card { border-radius:14px; border:1px solid var(--border-soft); background:var(--cp-t1); padding:12px 14px; }
.cp-root .pf-reuse-card .h { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:9px; }
.cp-root .pf-reuse-card .h svg { width:13px; height:13px; stroke:url(#k-grad-stroke); fill:none; stroke-width:2; }
.cp-root .pf-reuse-card .rl { display:flex; flex-wrap:wrap; gap:6px; }
.cp-root .pf-reuse-card .rl span { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--fg-secondary); padding:4px 9px; border-radius:999px; background:var(--cp-t3); border:1px solid var(--border-soft); }
.cp-root .pf-reuse-card .rl span svg { width:11px; height:11px; stroke:var(--cp-tx-green); fill:none; stroke-width:2.6; }

/* Footer réutilisé (cp-mfoot) — bord haut */
.cp-root .pf .cp-mfoot { border-top:1px solid var(--border-soft); flex:0 0 auto; }

/* ===== Responsive : sous 860px, on repasse en colonne ===== */
@media (max-width:880px){
  .cp-root .pf-grid { grid-template-columns:1fr; }
  .cp-root .pf-rail { border-left:0; border-top:1px solid var(--border-soft); }
}

/* ===== Variante « groupe » : corps qui scrolle d'un bloc + section déploiement pleine largeur ===== */
.cp-root .pf.gm .pf-body { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.cp-root .pf.gm .pf-body::-webkit-scrollbar { width:8px; }
.cp-root .pf.gm .pf-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.cp-root .pf.gm .pf-grid { flex:none; }
.cp-root .pf.gm .pf-form, .cp-root .pf.gm .pf-rail { overflow:visible; }
.cp-root .pf-deploy { padding:18px 26px 22px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:12px; }
.cp-root .pf-deploy .gm-picker { margin:0; }
.cp-root .pf-deploy-note { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:13px; background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.2); font-size:12px; color:var(--fg-secondary); line-height:1.45; }
.cp-root .pf-deploy-note svg { width:15px; height:15px; stroke:var(--cp-tx-green); fill:none; stroke-width:2; flex:0 0 auto; margin-top:1px; }
.cp-root .pf-deploy-note b { color:var(--fg); font-weight:650; }
.cp-root .pf.gm .pf-cap .mid { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--fg-secondary); }


/* ═══ offer-form.css ═══ */

/* Kiclic — Catalogue d'offres : type d'offre, condition, visuel généré, simulateur (préfixe of-) */

/* ===== Sélecteur de type + remise ===== */
.cp-root .of-typerow { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.cp-root .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 }
.cp-root .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) }
.cp-root .of-seg button svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto }
.cp-root .of-seg button:hover { color:var(--fg-secondary) }
.cp-root .of-seg button.on { background:var(--bg-elev-1); color:var(--fg); box-shadow:0 2px 10px rgba(0,0,0,.22) }
.cp-root .of-seg button.on svg { stroke:url(#k-grad-stroke) }
.cp-root .of-remise { display:flex; flex-direction:column; gap:6px; flex:0 0 auto }
.cp-root .of-remise > label { font-size:11.5px; font-weight:680; color:var(--fg-secondary) }
.cp-root .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 }
.cp-root .of-remise.none svg { width:14px; height:14px; flex:0 0 auto; stroke:var(--cp-tx-blue); fill:none; stroke-width:2 }
.cp-root .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) }
.cp-root .of-rin:focus-within { border-color:rgba(233,78,139,.7); box-shadow:0 0 0 3px rgba(233,78,139,.12) }
.cp-root .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 }
.cp-root .of-rin input::-webkit-outer-spin-button, .cp-root .of-rin input::-webkit-inner-spin-button { appearance:none; -webkit-appearance:none; margin:0 }
.cp-root .of-rin input::placeholder { color:var(--fg-muted); font-weight:700 }
.cp-root .of-rin .cur { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--cp-tx-pink); margin-left:5px }

/* ===== Offre conditionnelle ===== */
.cp-root .of-cond { border:1px solid var(--border-soft); border-radius:14px; background:var(--cp-t1); overflow:hidden; transition:border-color var(--t-fast) }
.cp-root .of-cond.on { border-color:rgba(185,104,199,.32); background:rgba(185,104,199,.05) }
.cp-root .of-cond .hd { display:flex; align-items:center; gap:11px; padding:12px 14px }
.cp-root .of-cond .hd .tx { display:flex; flex-direction:column; gap:2px; min-width:0 }
.cp-root .of-cond .hd b { font-size:13px; font-weight:700; color:var(--fg) }
.cp-root .of-cond .hd small { font-size:11.5px; color:var(--fg-muted) }
.cp-root .of-cond .bd { padding:0 14px 14px; display:flex; flex-direction:column; gap:9px }
.cp-root .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 }
.cp-root .of-cond .bd input:focus { border-color:rgba(185,104,199,.55); box-shadow:0 0 0 3px rgba(185,104,199,.1) }
.cp-root .of-cond .chips { display:flex; flex-wrap:wrap; gap:6px }
.cp-root .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) }
.cp-root .of-cond .chips button:hover { color:var(--fg); border-style:solid; border-color:rgba(185,104,199,.5); background:rgba(185,104,199,.1) }
.cp-root .of-cond .ft { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:var(--fg-secondary); line-height:1.45 }
.cp-root .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 }
.cp-root .of-cond .ft b { color:var(--fg); font-weight:650 }

/* ===== La photo du produit, en ligne (étape 1) =====
   Matière première de l'affiche, pas le visuel du Rali : elle tient dans une
   vignette. Le grand format est réservé à l'affiche, tout en bas de la fiche. */
.cp-root .of-prow { display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:14px; cursor:pointer;
  border:1.5px dashed var(--border); background:var(--cp-t1); transition:border-color var(--t-fast), background-color var(--t-fast) }
.cp-root .of-prow:hover { border-color:rgba(185,104,199,.55) }
.cp-root .of-prow.has { border-style:solid; border-color:var(--border-soft); background:var(--bg-elev-2) }
.cp-root .of-prow .th { flex:0 0 auto; width:46px; height:46px; border-radius:11px; overflow:hidden; display:grid; place-items:center;
  background:var(--cp-t4); color:var(--fg-secondary);
  background-image:linear-gradient(45deg,var(--cp-t2) 25%,transparent 25%,transparent 75%,var(--cp-t2) 75%),
                   linear-gradient(45deg,var(--cp-t2) 25%,transparent 25%,transparent 75%,var(--cp-t2) 75%);
  background-size:12px 12px; background-position:0 0,6px 6px }
.cp-root .of-prow .th svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8 }
.cp-root .of-prow .th img { width:100%; height:100%; object-fit:contain; padding:4px }
.cp-root .of-prow .tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
.cp-root .of-prow .tx b { font-size:12.5px; font-weight:700; color:var(--fg) }
.cp-root .of-prow .tx small { font-size:11px; color:var(--fg-muted); line-height:1.4 }
.cp-root .of-prow .ac { flex:0 0 auto; display:flex; align-items:center; gap:6px }
.cp-root .of-prow .ac button { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:9px; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:650; color:var(--fg-secondary);
  border:1px solid var(--border); background:var(--cp-t2); transition:color var(--t-fast), border-color var(--t-fast) }
.cp-root .of-prow .ac button:hover { color:var(--fg); border-color:rgba(185,104,199,.55) }
.cp-root .of-prow .ac button.rm { padding:0; width:30px; justify-content:center }
.cp-root .of-prow .ac button svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto }

/* ===== Le visuel du Rali (dernière étape) =====
   À gauche l'affiche, au format du Rali — carré ou portrait, jamais paysage.
   À droite de quoi la reprendre en main. La scène accueille un poster DOM
   vivant (KOFRENDER.into) : `into` lui pose une hauteur en ligne, d'où le
   `aspect-ratio` qui ne sert qu'aux états vides et à l'image déposée. */
.cp-root .ov-wrap { display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:16px; align-items:start }
.cp-root .ov-left { display:flex; flex-direction:column; gap:9px; min-width:0 }
.cp-root .ov-stage { position:relative; width:100%; border-radius:16px; overflow:hidden; background:var(--cp-t1);
  border:1px solid var(--border-soft); display:grid; place-items:center; box-shadow:0 14px 32px rgba(0,0,0,.22) }
.cp-root .ov-stage.f11 { aspect-ratio:1/1 }
.cp-root .ov-stage.f45 { aspect-ratio:4/5 }
.cp-root .ov-stage > .of-poster { position:absolute; left:0; top:0; transform-origin:0 0 }
/* `contain`, pas `cover` : c'est le fichier tel qu'il partira en base qu'on
   montre. Le rogner ici laisserait croire à un recadrage qui n'a pas lieu. */
.cp-root .ov-stage.img img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--cp-t2) }
.cp-root .ov-ph { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:16px }
.cp-root .ov-ph svg { width:26px; height:26px; stroke:var(--cp-tx-violet,#D8A6E3); fill:none; stroke-width:1.8; margin-bottom:2px }
.cp-root .ov-ph.err svg { stroke:var(--cp-tx-amber,#E8B14A) }
.cp-root .ov-ph b { font-size:12.5px; font-weight:700; color:var(--fg) }
.cp-root .ov-ph span { font-size:11px; color:var(--fg-muted); line-height:1.45; max-width:22ch }
.cp-root .ov-state { font-size:11px; line-height:1.45; color:var(--fg-muted); padding-left:2px }
.cp-root .ov-state b { font-weight:700 }
.cp-root .ov-state.auto b { color:var(--cp-tx-violet,#D8A6E3) }
.cp-root .ov-state.tuned b, .cp-root .ov-state.own b { color:var(--fg) }

.cp-root .ov-panel { display:flex; flex-direction:column; gap:11px; min-width:0 }
.cp-root .ov-prod { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:12px; cursor:pointer;
  border:1px solid var(--border); background:var(--cp-t1); transition:border-color var(--t-fast) }
.cp-root .ov-prod:hover { border-color:rgba(185,104,199,.55) }
.cp-root .ov-prod .th { flex:0 0 auto; width:34px; height:34px; border-radius:9px; overflow:hidden; display:grid; place-items:center;
  background:var(--cp-t4); color:var(--fg-secondary) }
.cp-root .ov-prod .th svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8 }
.cp-root .ov-prod .th img { width:100%; height:100%; object-fit:contain; padding:3px }
.cp-root .ov-prod .tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column }
.cp-root .ov-prod .tx b { font-size:11.5px; font-weight:700; color:var(--fg) }
.cp-root .ov-prod .tx small { font-size:10.5px; color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cp-root .ov-prod .go { flex:0 0 auto; color:var(--fg-muted) }
.cp-root .ov-prod .go svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2 }

.cp-root .ov-f { display:flex; flex-direction:column; gap:6px }
.cp-root .ov-f.off { opacity:.45; pointer-events:none }
.cp-root .ov-f > label { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-muted) }
.cp-root .ov-f > label svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2 }
.cp-root .ov-h { font-size:10.5px; color:var(--fg-muted); line-height:1.45 }
.cp-root .ov-h b { color:var(--fg-secondary); font-weight:650 }
.cp-root .ov-seg { display:flex; gap:3px; padding:3px; border-radius:10px; background:var(--cp-t1); border:1px solid var(--border) }
/* `display:flex` + `justify-content` plutôt que `text-align:center` : le reset
   du catalogue impose `text-align:inherit` à tout bouton, donc l'alignement du
   formulaire (à gauche) l'emportait et les libellés collaient au bord. */
.cp-root .ov-seg button { flex:1 1 0; min-width:0; height:28px; border:0; border-radius:7px; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:inherit; font-size:11.5px; font-weight:650; color:var(--fg-secondary); white-space:nowrap }
.cp-root .ov-seg button.on { background:var(--cp-t4); color:var(--fg) }

.cp-root .ov-styles { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px }
.cp-root .ov-st { padding:0; border-radius:9px; cursor:pointer; overflow:hidden; background:var(--cp-t1);
  border:1px solid var(--border); font-family:inherit; color:inherit; transition:border-color var(--t-fast), transform var(--t-fast) }
.cp-root .ov-st:hover { border-color:rgba(185,104,199,.65); transform:translateY(-1px) }
.cp-root .ov-st.on { border-color:transparent; box-shadow:0 0 0 2px var(--k-violet,#B968C7) }
.cp-root .ov-st .fr { display:block; position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--cp-t4) }
.cp-root .ov-st .fr > .of-poster { position:absolute; left:0; top:0; transform-origin:0 0 }
.cp-root .ov-st .nm { display:block; font-size:9px; font-weight:700; padding:3px 2px; color:var(--fg-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cp-root .ov-st.on .nm { color:var(--fg) }

.cp-root .ov-tune { display:flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 12px;
  border-radius:10px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; color:#fff;
  border:0; background:linear-gradient(90deg,#5B8DEF,#B968C7,#E94E8B); box-shadow:0 6px 16px rgba(233,78,139,.24);
  transition:transform .18s, box-shadow .18s }
.cp-root .ov-tune:hover { transform:translateY(-1px); box-shadow:0 9px 22px rgba(233,78,139,.34) }
.cp-root .ov-tune:disabled { opacity:.4; cursor:default; box-shadow:none; transform:none }
.cp-root .ov-tune svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto }

.cp-root .ov-sep { height:1px; background:var(--border-soft); margin:2px 0 }
.cp-root .ov-alt { display:flex; align-items:center; gap:8px; height:34px; padding:0 11px; border-radius:10px; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:650; color:var(--fg-secondary); text-align:left;
  border:1px solid var(--border); background:var(--cp-t1); transition:color var(--t-fast), border-color var(--t-fast) }
.cp-root .ov-alt:hover { color:var(--fg); border-color:rgba(185,104,199,.55) }
.cp-root .ov-alt svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto }
.cp-root .ov-note { display:flex; align-items:flex-start; gap:8px; font-size:10.5px; color:var(--fg-muted); line-height:1.45 }
.cp-root .ov-note svg { width:13px; height:13px; flex:0 0 auto; margin-top:1px; stroke:var(--cp-tx-blue); fill:none; stroke-width:2 }
.cp-root .ov-note b { color:var(--fg-secondary); font-weight:650 }

/* ===== Rail : titre + description générés ===== */
.cp-root .of-auto { border-radius:15px; border:1px solid var(--border-soft); background:var(--cp-t1); padding:12px 13px; display:flex; flex-direction:column; gap:9px }
.cp-root .of-auto .rw { display:flex; flex-direction:column; gap:3px }
.cp-root .of-auto .k { font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted) }
.cp-root .of-auto .v { font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--fg); line-height:1.25 }
.cp-root .of-auto .d { font-size:11.5px; color:var(--fg-secondary); line-height:1.45 }
.cp-root .of-auto .ft { display:flex; align-items:center; gap:7px; font-size:10.5px; color:var(--fg-muted); border-top:1px dashed var(--border-soft); padding-top:8px }
.cp-root .of-auto .ft svg { width:12px; height:12px; stroke:url(#k-grad-stroke); fill:none; stroke-width:2; flex:0 0 auto }

/* ===== Rail : aperçu, visuel d'offre à générer ===== */
.cp-root .of-pvgen { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:14px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 9px, transparent 9px 18px) }
.cp-root .of-pvgen .in { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:80% }
.cp-root .of-pvgen .lg { width:52px; height:52px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.08); display:grid; place-items:center }
.cp-root .of-pvgen .lg img { position:static !important; inset:auto !important; width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; filter:none !important; max-width:none !important; max-height:none !important }
.cp-root .of-pvgen .big { font-family:var(--font-display); font-size:30px; font-weight:900; letter-spacing:-.03em; color:#fff; line-height:1; text-shadow:0 4px 18px rgba(0,0,0,.5) }
.cp-root .of-pvgen .m { font-family:ui-monospace,monospace; font-size:9.5px; color:rgba(255,255,255,.55); border:1px dashed rgba(255,255,255,.24); border-radius:8px; padding:4px 9px }
.cp-root .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 }

/* ===== Rail : simulateur économique ===== */
.cp-root .of-sim { border-radius:18px; padding:2px; position:relative; overflow:hidden; border:2px solid transparent; background:
    linear-gradient(var(--bg-elev-1),var(--bg-elev-1)) padding-box,
    linear-gradient(135deg, rgba(16,185,129,.4), rgba(185,104,199,.28), rgba(233,78,139,.4)) border-box }
.cp-root .of-sim .glow { position:absolute; inset:-30%; z-index:0; pointer-events:none; background:radial-gradient(40% 50% at 20% 15%, rgba(16,185,129,.13), transparent 70%), radial-gradient(40% 50% at 82% 85%, rgba(233,78,139,.13), transparent 70%) }
.cp-root .of-sim .in { position:relative; z-index:1; background:var(--bg-elev-1); border-radius:16px; padding:14px }
.cp-root .of-sim .of-empty { padding:14px 6px 10px; text-align:center }
.cp-root .of-sim .of-empty .t { font-size:12.5px; font-weight:700; color:var(--fg-secondary) }
.cp-root .of-sim .of-empty .d { font-size:11.5px; color:var(--fg-muted); margin-top:5px; line-height:1.45 }
.cp-root .of-sim .of-body { display:none }
.cp-root .of-sim.has .of-body { display:block }
.cp-root .of-sim.has .of-empty { display:none }

.cp-root .of-heroes { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.cp-root .of-heroes > div { border-radius:13px; padding:10px 12px; border:1px solid var(--border-soft); background:var(--cp-t2); display:flex; flex-direction:column; gap:3px; min-width:0 }
.cp-root .of-heroes .k { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted) }
.cp-root .of-heroes .v { font-family:var(--font-display); font-size:23px; font-weight:900; letter-spacing:-.03em; color:var(--fg); font-variant-numeric:tabular-nums; line-height:1.05 }
.cp-root .of-heroes .h1 { background:rgba(91,141,239,.1); border-color:rgba(91,141,239,.26) }
.cp-root .of-heroes .h2 { background:rgba(233,78,139,.09); border-color:rgba(233,78,139,.24) }
.cp-root .of-heroes .h2 .v { color:#FCA5C4 }
.cp-root .of-heroes .h2.zero { background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.26) }
.cp-root .of-heroes .h2.zero .v { color:#6EE7B7 }
html[data-theme="light"] .cp-root .of-heroes .h2 .v { color:#BE185D }
html[data-theme="light"] .cp-root .of-heroes .h2.zero .v { color:#047857 }

.cp-root .of-slider { margin-top:14px }
.cp-root .of-slider .lb { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:11px; color:var(--fg-muted); font-weight:650 }
.cp-root .of-slider .lb b { font-family:var(--font-display); font-size:14px; font-weight:850; color:#6EE7B7; font-variant-numeric:tabular-nums }
.cp-root .of-slider.over .lb b { color:#FCA5C4 }
.cp-root .of-slider .tk { position:relative; height:26px; margin-top:5px; display:flex; align-items:center }
.cp-root .of-slider .tk:before { content:''; position:absolute; left:0; right:0; height:8px; border-radius:999px; background:var(--cp-t4) }
.cp-root .of-slider .fill { position:absolute; left:0; height:8px; border-radius:999px; background:linear-gradient(90deg,#34D399,#34D399); transition:width .18s var(--ease-out) }
.cp-root .of-slider.over .fill { background:linear-gradient(90deg,#34D399 0%, #34D399 55%, #F59E0B 78%, #E94E8B 100%) }
.cp-root .of-slider .mark { position:absolute; top:0; bottom:0; width:0; display:flex; align-items:center; justify-content:center; pointer-events:none }
.cp-root .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) }
.cp-root .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 }
.cp-root .of-slider input[type=range]:disabled { cursor:not-allowed; opacity:.75 }
.cp-root .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) }
.cp-root .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) }
.cp-root .of-slider input[type=range]::-moz-range-track { background:transparent }
.cp-root .of-slider .sc { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--fg-muted); margin-top:2px }
.cp-root .of-slider .sc span:nth-child(2) { font-weight:700; color:var(--fg-secondary) }

.cp-root .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) }
.cp-root .of-seuil svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; fill:none; stroke-width:2.2 }
.cp-root .of-seuil b { color:var(--fg); font-weight:750 }
.cp-root .of-seuil.ok { background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.24) }
.cp-root .of-seuil.ok svg { stroke:#34D399 }
.cp-root .of-seuil.over { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.24) }
.cp-root .of-seuil.over svg { stroke:#F59E0B }
.cp-root .of-seuil.warn { background:rgba(91,141,239,.08); border:1px solid rgba(91,141,239,.2) }
.cp-root .of-seuil.warn svg { stroke:var(--cp-tx-blue) }

.cp-root .of-rows { margin-top:12px }
.cp-root .of-r { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--border-soft) }
.cp-root .of-r:last-child { border-bottom:0 }
.cp-root .of-r .l { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-secondary); min-width:0 }
.cp-root .of-r .l small { color:var(--fg-muted); font-size:10.5px }
.cp-root .of-r .l .d { width:8px; height:8px; border-radius:50%; flex:0 0 auto }
.cp-root .of-r .l .d.g { background:#34D399 } .cp-root .of-r .l .d.b { background:#5B8DEF } .cp-root .of-r .l .d.p { background:#E94E8B }
.cp-root .of-r .v { font-size:13.5px; font-weight:800; color:var(--fg); font-variant-numeric:tabular-nums; text-align:right }
.cp-root .of-r.good .v { color:#6EE7B7 } .cp-root .of-r.bad .v { color:#FCA5C4 }
.cp-root .of-r.tot .v { font-size:12px; font-weight:700; color:var(--fg-secondary) }
html[data-theme="light"] .cp-root .of-r.good .v { color:#047857 } html[data-theme="light"] .cp-root .of-r.bad .v { color:#BE185D }

.cp-root .of-budget { display:none }
.cp-root .of-budget.on { display:flex; align-items:flex-start; gap:8px; margin-top:11px; padding:10px 12px; border-radius:12px; background:rgba(91,141,239,.08); border:1px solid rgba(91,141,239,.2); font-size:11.5px; color:var(--fg-secondary); line-height:1.45 }
.cp-root .of-budget svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; stroke:var(--cp-tx-blue); fill:none; stroke-width:2 }
.cp-root .of-budget b { color:var(--fg); font-weight:700 }

/* ===== Rail : ticket gagnant + écran de scan ===== */
.cp-root .of-tk { display:flex; flex-direction:column; gap:10px }
.cp-root .of-tkcard { border-radius:14px; border:1px solid var(--border-soft); background:var(--bg-elev-2); overflow:hidden }
.cp-root .of-tkcard .hd { display:flex; align-items:center; gap:7px; padding:8px 12px; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-muted); border-bottom:1px solid var(--border-soft); background:var(--cp-t2) }
.cp-root .of-tkcard .hd svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2 }
.cp-root .of-tkcard .bd { padding:11px 13px 13px; position:relative }
.cp-root .of-tkcard .k { font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted) }
.cp-root .of-tkcard .v { font-family:var(--font-display); font-size:16px; font-weight:850; letter-spacing:-.02em; color:var(--fg); margin-top:3px; line-height:1.2 }
.cp-root .of-tkcard .c { font-size:11.5px; color:var(--cp-tx-amber); margin-top:5px; font-weight:600 }
.cp-root .of-tkcard .qr { position:absolute; top:11px; right:13px; width:34px; height:34px; border-radius:8px; background:
    repeating-linear-gradient(0deg, var(--fg) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, var(--bg-elev-2) 0 3px, transparent 3px 6px); opacity:.28 }
.cp-root .of-tkcard.scan { border-color:rgba(52,211,153,.3) }
.cp-root .of-tkcard.scan .bd { background:rgba(52,211,153,.07) }
.cp-root .of-tkcard.scan .v { color:#6EE7B7 }
html[data-theme="light"] .cp-root .of-tkcard.scan .v { color:#047857 }

/* ===== Pastille de type d'offre (cartes, matrice) ===== */
.cp-root .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 }
.cp-root .of-pill.gratuit { background:rgba(91,141,239,.16); border:1px solid rgba(91,141,239,.34); color:#A8C4FF }
.cp-root .of-pill.remise_pourcent { background:rgba(233,78,139,.16); border:1px solid rgba(233,78,139,.36); color:#FCA5C4 }
.cp-root .of-pill.remise_montant { background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.32); color:#FCD34D }
.cp-root .of-pill.big { height:26px; padding:0 11px; font-size:12.5px }
.cp-root .of-pill.mini { height:18px; padding:0 6px; font-size:9.5px; font-weight:800 }
html[data-theme="light"] .cp-root .of-pill.gratuit { color:#1D4ED8 }
html[data-theme="light"] .cp-root .of-pill.remise_pourcent { color:#BE185D }
html[data-theme="light"] .cp-root .of-pill.remise_montant { color:#B45309 }

/* Carte du catalogue : ligne économique */
.cp-root .cp-prod .of-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12px; color:var(--fg-secondary); font-variant-numeric:tabular-nums }
.cp-root .cp-prod .of-line b { color:var(--fg); font-weight:750 }
.cp-root .cp-prod .of-line .free { color:#6EE7B7; font-weight:750 }
.cp-root .cp-prod .of-line .sep { color:var(--fg-muted) }
.cp-root .cp-prod .of-cnd { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--cp-tx-amber); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.22); border-radius:999px; padding:3px 9px; align-self:flex-start; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cp-root .cp-prod .of-nobudget { font-size:10.5px; color:#6EE7B7; font-weight:650 }
html[data-theme="light"] .cp-root .cp-prod .of-line .free, html[data-theme="light"] .cp-root .cp-prod .of-nobudget { color:#047857 }
.cp-root .cp-prod .ph .tag .of-pill { box-shadow:0 4px 14px rgba(0,0,0,.35) }

/* Matrice parc : pastille de type par site */
.cp-root .gm-rowhead .of-pill.mini { margin-left:2px }
.cp-root .gm-c { position:relative }
.cp-root .gm-c .of-ov { position:absolute; top:4px; left:4px; font-size:9px; font-weight:800; padding:1px 5px; border-radius:999px; background:rgba(233,78,139,.9); color:#fff; letter-spacing:-.01em }
.cp-root .gm-chip .of-pill.mini { margin-left:4px }

/* ===== Le rail a plus à dire : on l'élargit un peu ===== */
@media (min-width:881px){ .cp-root .pf-grid { grid-template-columns:minmax(0,1fr) 396px } }
@media (max-width:620px){ .cp-root .of-heroes { grid-template-columns:1fr } }
/* L'affiche passe au-dessus du panneau plutôt que de se réduire à un timbre :
   c'est la pièce qu'on juge. Sa largeur est bornée pour rester au format. */
@media (max-width:760px){
  .cp-root .ov-wrap { grid-template-columns:1fr }
  .cp-root .ov-left { max-width:280px; margin:0 auto; width:100% }
  .cp-root .ov-styles { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:440px){
  .cp-root .of-prow { flex-wrap:wrap }
  .cp-root .of-prow .ac { width:100%; justify-content:flex-end }
}

.cp-root .pf-pv .shot img.full { inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover; padding:0; filter:none }

/* ── Pastille de type d'offre sur les cartes et la matrice ─────────────────
   Ajout du port : le design n'a de pastille que dans la fiche, mais la matrice
   parc doit montrer qu'un site offre quand un autre remise (CDC §8.4.5). */
.cp-root .of-pill { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
  border:1px solid transparent; backdrop-filter:blur(6px) }
.cp-root .cp-prod .ph .of-pill { position:absolute; left:10px; bottom:10px; z-index:2 }
.cp-root .of-pill.gratuit { background:rgba(52,199,120,.16); border-color:rgba(52,199,120,.34); color:#34c778 }
.cp-root .of-pill.remise_pourcent { background:rgba(233,78,139,.16); border-color:rgba(233,78,139,.34); color:#e94e8b }
.cp-root .of-pill.remise_montant { background:rgba(91,141,239,.16); border-color:rgba(91,141,239,.34); color:#5b8def }
.cp-root .of-pill.mini { padding:1px 6px; font-size:9.5px; margin-bottom:3px; backdrop-filter:none }

/* Condition rappelée sur la carte — le pro doit voir d'un coup d'œil qu'une
   offre est conditionnée, sans ouvrir la fiche. */
.cp-root .of-cardcond { display:flex; align-items:center; gap:6px; margin:-2px 0 8px;
  font-size:11.5px; color:var(--fg-muted); line-height:1.35 }
.cp-root .of-cardcond svg { width:12px; height:12px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2 }

/* Suggestions de titre (CDC §7.2) — proposées tant que le champ est vide. */
.cp-root .of-sugg { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px }
.cp-root .of-sugg:empty { display:none }
.cp-root .of-sugg button { padding:6px 11px; border-radius:999px; border:1px solid var(--border-soft);
  background:var(--cp-t2); font:inherit; font-size:11.5px; font-weight:650; color:var(--fg-secondary);
  cursor:pointer; transition:all var(--t-fast) }
.cp-root .of-sugg button:hover { color:var(--fg); border-color:rgba(185,104,199,.4); background:rgba(185,104,199,.09) }

/* Ligne d'aide sous le nom : rappelle que le titre EST l'offre (CDC §7.1). */
.cp-root .pf-hintline { display:flex; align-items:flex-start; gap:7px; margin-top:8px;
  font-size:11.5px; color:var(--fg-muted); line-height:1.4 }
.cp-root .pf-hintline svg { width:13px; height:13px; flex:0 0 auto; margin-top:1px;
  stroke:var(--cp-tx-blue); fill:none; stroke-width:2 }

/* ── Ne jamais laisser le rail écraser ses blocs ───────────────────────────
   `.pf-rail` et `.pf-form` sont des conteneurs flex column à hauteur
   contrainte (la modale est en `max-height`). Leurs enfants ont donc
   `flex-shrink:1` par défaut. En principe `min-height:auto` les empêche de
   passer sous la hauteur de leur contenu — MAIS la spec flexbox résout
   `min-height:auto` à 0 dès qu'un item a un `overflow` autre que `visible`.

   `.of-sim` a `overflow:hidden` : il était donc le seul item compressible du
   rail, et absorbait tout le débordement. Résultat, un simulateur écrasé à
   8 px (son padding + sa bordure), avec un contenu parfaitement présent dans
   le DOM et un `display:block` trompeur — aucune erreur JS pour le signaler.

   Les deux colonnes ont `overflow-y:auto` : elles doivent DÉFILER, jamais
   comprimer. */
.cp-root .pf-rail > *,
.cp-root .pf-form > * { flex: 0 0 auto; }

/* ── Gratuité : même cadre que « Remise accordée » ─────────────────────────
   Le bloc de droite gardait auparavant une forme différente en gratuité (une
   phrase pleine largeur), ce qui faisait sauter toute la ligne à chaque
   changement de type. Il garde désormais le même gabarit : étiquette, cadre,
   grand chiffre. Une gratuité, c'est simplement « le gagnant paie 0 € ».
   Teinte verte plutôt que rose : rien n'est déduit, rien n'est à saisir. */
.cp-root .of-rin.free { border-color:rgba(52,199,120,.34); background:rgba(52,199,120,.07); cursor:default }
.cp-root .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 }
.cp-root .of-rin.free .cur { color:#34c778 }

/* ── Déploiement parc, en ligne dans le formulaire ─────────────────────────
   `.pf-deploy` du design est une BANDE pleine largeur sous le formulaire :
   elle porte son propre `padding:18px 26px`. Utilisée comme bloc à l'intérieur
   de `.pf-form` (qui a déjà 26px de padding), elle décalait le sélecteur de
   52px par rapport aux autres champs. Ici on ne veut que le garde-fou de
   largeur, pas le padding. */
.cp-root .pf-deploy-inline { min-width:0 }
.cp-root .pf-deploy-inline .gm-picker,
.cp-root .pf-deploy-inline .gm-plist { min-width:0; margin:0; width:100% }

/* ── Validité : espacement sous le segmented control ───────────────────────
   `.pf-valid` et sa phrase d'aide vivent dans un même conteneur (#pfValidBox,
   re-rendu à chaque changement), donc le `gap:11px` du `.pf-block` parent ne
   s'applique pas entre eux. On le rétablit à l'identique plutôt que d'inventer
   une autre valeur. */
.cp-root .pf-valid + .pf-reuse { margin-top: 11px; }