/* ============================================================
   KOREXA — Configurateur de site (Phase 1, front)
   Mobile-first. Réutilise les tokens/police de style.css.
   Cas d'usage principal : scan QR code sur téléphone (375px).
   ============================================================ */

.cfg-body{min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;overflow-x:hidden}

/* ============================================================
   Topbar : retour + barre de progression
   ============================================================ */
.cfg-topbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(22,24,28,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.cfg-topbar-inner{max-width:760px;margin:0 auto;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));display:flex;align-items:center;gap:14px}
.cfg-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-2);flex-shrink:0;min-height:40px;font-family:var(--font-head)}
.cfg-back span{font-family:var(--font-body)}
.cfg-back:hover{color:var(--primary)}
.cfg-progress{flex:1;height:6px;border-radius:100px;background:var(--border);overflow:hidden}
.cfg-progress-fill{height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--secondary),var(--accent));transition:width .55s var(--transition)}
.cfg-step-count{font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

/* ============================================================
   Layout des étapes
   ============================================================ */
.cfg-main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:84px 18px 132px;position:relative}
.cfg-step{display:none}
.cfg-step.is-active{display:block}
.cfg-step-inner{display:flex;flex-direction:column}

.cfg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin-bottom:14px}
.cfg-optional{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--muted);background:var(--bg-2);border:1px solid var(--border);border-radius:100px;padding:2px 9px;text-transform:none}
.cfg-title{font-family:var(--font-head);font-size:clamp(30px,8vw,44px);color:var(--primary);line-height:1.06;letter-spacing:-.02em;margin-bottom:10px}
.cfg-title .gold{color:var(--secondary);font-style:italic}
.cfg-sub{font-size:16px;color:var(--text-2);line-height:1.5;margin-bottom:26px;max-width:560px}
.cfg-sub-mt{margin-top:30px}

/* ============================================================
   Grilles + cartes sélectionnables
   ============================================================ */
.cfg-grid{display:grid;grid-template-columns:1fr;gap:12px}
.cfg-card{position:relative;display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:18px 18px;min-height:64px;transition:transform .35s var(--transition),border-color .3s,box-shadow .35s,background .3s;color:var(--text)}
.cfg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--secondary)}
.cfg-card:active{transform:translateY(-1px) scale(.99)}
.cfg-card.selected{border-color:var(--accent);background:var(--amber-subtle);box-shadow:var(--shadow-md)}
.cfg-card-ico{flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-md);background:var(--amber-subtle);border:1px solid var(--border-amber);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}
.cfg-card-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cfg-card-title{font-family:var(--font-head);font-size:18px;font-weight:600;color:var(--primary);line-height:1.15}
.cfg-card-desc{font-size:13px;color:var(--muted);line-height:1.3}
.cfg-card-check{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-amber);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;opacity:0;transform:scale(.4);transition:opacity .3s var(--transition),transform .3s var(--transition)}
.cfg-card.selected .cfg-card-check{opacity:1;transform:scale(1)}
.cfg-card.selected .cfg-card-ico{background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-color:transparent}

/* Cartes "centrées" (sous-métier, objectif, budget, délai) : icône au-dessus */
.cfg-card-sub,.cfg-card-budget,.cfg-card-delai{flex-direction:column;text-align:center;justify-content:center;gap:8px;padding:22px 14px}
.cfg-card-check-multi{gap:14px}
.cfg-card-budget .cfg-card-title{font-size:17px}

/* ============================================================
   Accueil
   ============================================================ */
.cfg-welcome{min-height:calc(100vh - 220px);justify-content:center;text-align:center;align-items:center}
.cfg-welcome .cfg-sub{margin-left:auto;margin-right:auto}
.cfg-start{font-size:17px;padding:17px 34px;margin-bottom:26px}
.cfg-welcome-meta{font-size:13px;color:var(--muted);font-weight:500}

/* ============================================================
   Champs de saisie
   ============================================================ */
.cfg-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.cfg-field label{font-size:14px;font-weight:600;color:var(--primary);font-family:var(--font-head)}
.cfg-field input{width:100%;font-family:var(--font-body);font-size:16px;color:var(--text);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:15px 16px;transition:border-color .3s,box-shadow .3s;min-height:54px}
.cfg-field input::placeholder{color:var(--muted)}
.cfg-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--amber-glow)}
.cfg-field.cfg-invalid input{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.cfg-consent{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}

/* Chrome de maquette partagé (réutilisé par la maquette photo, étape 6) */
.mk-bar{display:flex;gap:5px;padding:6px 4px}
.mk-bar i{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.18)}
.mk-screen{display:block;border-radius:8px 8px 0 0;overflow:hidden;border:1px solid rgba(0,0,0,.06);border-bottom:none}

/* ============================================================
   Étape 4 — 5 mini-maquettes de style (vraies maquettes de site)
   Chaque carte dessine en HTML/CSS pur : navbar + hero + 2 sections
   + footer. Rendu en miniature via un canevas 2× mis à scale(.5)
   pour un texte net (aucune image, conforme CSP).
   ============================================================ */
.cfg-styles{grid-template-columns:1fr;gap:16px}
.cfg-style{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-width:2px}
.cfg-style.selected{border-color:var(--accent);background:var(--surface)}
.cfg-styles .cfg-card:hover{transform:none;box-shadow:var(--shadow-md)}
.cfg-style .cfg-card-check{background:var(--accent);color:var(--on-amber)}
.cfg-style-meta{display:flex;flex-direction:column;gap:3px;padding:13px 16px 16px}

.mk-frame{position:relative;width:100%;height:290px;overflow:hidden;background:#fff;border-bottom:1px solid var(--border-subtle)}
.cfg-styles .mk{position:absolute;top:0;left:0;width:200%;height:580px;transform:scale(.5);transform-origin:top left;display:flex;flex-direction:column;font-family:var(--font-body);text-align:left;color:#111}
.cfg-styles .mk *{box-sizing:border-box}

/* Composants génériques (dimensions "design", ÷2 à l'affichage) */
.cfg-styles .mk-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 30px}
.cfg-styles .mk-nav b{font-size:23px;font-weight:800;letter-spacing:.02em}
/* Nom d'entreprise (nav + footer) : tronque proprement les noms longs */
.cfg-styles .mk-nav b,.cfg-styles .mk-foot b{display:inline-block;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.cfg-styles .mk-links,.cfg-styles .mk-fcols{flex-shrink:0}
.cfg-styles .mk-links{display:flex;gap:18px}
.cfg-styles .mk-links i{display:block;width:50px;height:9px;border-radius:5px;background:currentColor;opacity:.35}
.cfg-styles .mk-hero{padding:38px 30px 32px;display:flex;flex-direction:column;gap:14px;flex-shrink:0}
.cfg-styles .mk-eye{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.cfg-styles .mk-h1{font-size:46px;line-height:1.04;font-weight:800;max-width:84%}
.cfg-styles .mk-p{font-size:17px;line-height:1.4;max-width:74%;opacity:.72}
.cfg-styles .mk-btns{display:flex;gap:12px;margin-top:8px}
.cfg-styles .mk-cta,.cfg-styles .mk-cta2{font-size:15px;font-weight:700;padding:13px 24px;border-radius:9px;display:inline-block;white-space:nowrap}
.cfg-styles .mk-cta2{background:transparent}
.cfg-styles .mk-sec{padding:0 30px}
.cfg-styles .mk-cards{display:flex;gap:14px;margin-bottom:26px}
.cfg-styles .mk-card{flex:1;border-radius:13px;padding:18px 16px;display:flex;flex-direction:column;gap:9px}
.cfg-styles .mk-ico{width:42px;height:42px;border-radius:11px;flex-shrink:0}
.cfg-styles .mk-card b{font-size:15px;font-weight:700}
.cfg-styles .mk-card u{display:block;height:7px;border-radius:4px;background:currentColor;opacity:.4;text-decoration:none}
.cfg-styles .mk-card u:last-child{width:62%}
.cfg-styles .mk-band{display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:15px;padding:24px 28px;margin-bottom:26px}
.cfg-styles .mk-band strong{font-size:25px;font-weight:800;line-height:1.12;max-width:60%}
.cfg-styles .mk-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:22px 30px}
.cfg-styles .mk-foot b{font-size:19px;font-weight:800}
.cfg-styles .mk-fcols{display:flex;gap:16px}
.cfg-styles .mk-fcols i{display:block;width:40px;height:8px;border-radius:4px;background:currentColor;opacity:.3}

/* ---- Style 1 — Sobre & Professionnel ---- */
.mk-sobre{background:#F8F8F8;color:#0B1D3D}
.mk-sobre .mk-nav{background:#fff;border-bottom:1px solid #E6E6EA}
.mk-sobre .mk-nav b{font-family:var(--font-head);font-weight:600;letter-spacing:.14em}
.mk-sobre .mk-eye{color:#B89328}
.mk-sobre .mk-h1{font-family:var(--font-head);font-weight:600}
.mk-sobre .mk-cta{background:#0B1D3D;color:#fff}
.mk-sobre .mk-cta2{color:#0B1D3D;box-shadow:inset 0 0 0 2px #D4AF37}
.mk-sobre .mk-card{background:#fff;border:1px solid #ECECEF}
.mk-sobre .mk-ico{background:linear-gradient(135deg,#0B1D3D,#D4AF37)}
.mk-sobre .mk-band{background:#0B1D3D;color:#fff}
.mk-sobre .mk-band .mk-cta{background:#D4AF37;color:#0B1D3D}
.mk-sobre .mk-foot{background:#fff;border-top:1px solid #E6E6EA}

/* ---- Style 2 — Moderne & Dynamique ---- */
.mk-moderne{background:#fff;color:#0B1D3D}
.mk-moderne .mk-nav b{color:#0F766E;font-weight:800}
.mk-moderne .mk-hero{background:linear-gradient(120deg,#0F766E,#3B82F6);background-size:200% 200%;color:#fff;border-radius:0 0 28px 0;margin-bottom:26px}
.mk-moderne .mk-eye{color:rgba(255,255,255,.9)}
.mk-moderne .mk-h1{color:#fff}
.mk-moderne .mk-p{color:rgba(255,255,255,.92);opacity:1}
.mk-moderne .mk-cta{background:#fff;color:#0F766E}
.mk-moderne .mk-cta2{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.mk-moderne .mk-card{background:#F4F8FF;border:1px solid #E5EEFB}
.mk-moderne .mk-ico{background:linear-gradient(135deg,#0F766E,#3B82F6)}
.mk-moderne .mk-band{background:linear-gradient(120deg,#3B82F6,#0F766E);color:#fff}
.mk-moderne .mk-band .mk-cta{background:#fff;color:#3B82F6}
.mk-moderne .mk-foot{border-top:1px solid #E5EEFB}
.cfg-style.mk-moderne.selected .mk-hero,.cfg-style.mk-moderne:hover .mk-hero{animation:cfgShift 3s ease infinite}
@keyframes cfgShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- Style 3 — Chaleureux & Local ---- */
.mk-chaleureux{background:#F5ECD7;color:#5A4632}
.mk-chaleureux .mk-nav b{font-family:var(--font-head);color:#C2714F;font-weight:600}
.mk-chaleureux .mk-hero{background:#C2714F;color:#FBF4E6;border-radius:0 0 34px 34px;margin-bottom:26px}
.mk-chaleureux .mk-eye{color:#F5ECD7}
.mk-chaleureux .mk-h1{font-family:var(--font-head);font-weight:600;color:#FBF4E6}
.mk-chaleureux .mk-p{color:rgba(251,244,230,.9);opacity:1}
.mk-chaleureux .mk-cta{background:#6B7C45;color:#FBF4E6}
.mk-chaleureux .mk-cta2{color:#FBF4E6;box-shadow:inset 0 0 0 2px rgba(251,244,230,.65)}
.mk-chaleureux .mk-card{background:#FBF4E6;border:1px solid #E9D7B5;color:#7A5A3F}
.mk-chaleureux .mk-card b{color:#C2714F}
.mk-chaleureux .mk-ico{background:#6B7C45}
.mk-chaleureux .mk-band{background:#6B7C45;color:#FBF4E6}
.mk-chaleureux .mk-band .mk-cta{background:#C2714F;color:#FBF4E6}
.mk-chaleureux .mk-foot{background:#EFE3C8}

/* ---- Style 4 — Minimaliste & Épuré ---- */
.mk-minimal{background:#fff;color:#111}
.mk-minimal .mk-nav{border-bottom:1px solid #EEE}
.mk-minimal .mk-nav b{color:#111;font-weight:800;letter-spacing:.06em}
.mk-minimal .mk-links i{opacity:.2}
.mk-minimal .mk-hero{padding-top:58px;padding-bottom:50px}
.mk-minimal .mk-eye{color:#E11D48;letter-spacing:.26em}
.mk-minimal .mk-h1{font-size:56px;font-weight:800;letter-spacing:-.02em;max-width:88%}
.mk-minimal .mk-p{color:#777;opacity:1}
.mk-minimal .mk-cta{background:#111;color:#fff;border-radius:0}
.mk-minimal .mk-cta2{color:#111;box-shadow:inset 0 0 0 1.5px #111;border-radius:0}
.mk-minimal .mk-card{background:#fff;border:1px solid #ECECEC;border-radius:0}
.mk-minimal .mk-card b{color:#111}
.mk-minimal .mk-ico{background:#111;border-radius:0}
.mk-minimal .mk-card:nth-child(2) .mk-ico{background:#E11D48}
.mk-minimal .mk-band{background:#111;color:#fff;border-radius:0}
.mk-minimal .mk-band .mk-cta{background:#E11D48;color:#fff}
.mk-minimal .mk-foot{border-top:1px solid #EEE}

/* ---- Style 5 — Audacieux & Premium ---- */
.mk-premium{background:#0D0D0D;color:#EDE7D8}
.mk-premium .mk-nav{border-bottom:1px solid rgba(212,175,55,.25)}
.mk-premium .mk-nav b{font-family:var(--font-head);color:#D4AF37;font-weight:600;letter-spacing:.2em}
.mk-premium .mk-links i{background:#D4AF37;opacity:.45}
.mk-premium .mk-hero{background:radial-gradient(ellipse at 72% -10%,rgba(212,175,55,.22),transparent 60%)}
.mk-premium .mk-eye{color:#D4AF37;letter-spacing:.24em}
.mk-premium .mk-h1{font-family:var(--font-head);font-weight:600;font-style:italic;color:#F4EFE2}
.mk-premium .mk-p{color:rgba(237,231,216,.62);opacity:1}
.mk-premium .mk-cta{background:#D4AF37;color:#0D0D0D}
.mk-premium .mk-cta2{color:#D4AF37;box-shadow:inset 0 0 0 1.5px rgba(212,175,55,.55)}
.mk-premium .mk-card{background:#161616;border:1px solid rgba(212,175,55,.22);color:#EDE7D8}
.mk-premium .mk-card b{font-family:var(--font-head);color:#F4EFE2}
.mk-premium .mk-ico{background:linear-gradient(135deg,#D4AF37,#8A6F1F)}
.mk-premium .mk-band{background:linear-gradient(120deg,#1A1A1A,#0D0D0D);border:1px solid rgba(212,175,55,.3);color:#F4EFE2}
.mk-premium .mk-band strong{font-family:var(--font-head)}
.mk-premium .mk-band .mk-cta{background:#D4AF37;color:#0D0D0D}
.mk-premium .mk-foot{border-top:1px solid rgba(212,175,55,.2)}
.mk-premium .mk-foot b{font-family:var(--font-head);color:#D4AF37}
.mk-premium .mk-fcols i{background:#D4AF37;opacity:.5}

@media(min-width:768px){.cfg-styles{grid-template-columns:1fr 1fr}}

/* ============================================================
   Étape 5 — palettes
   ============================================================ */
.cfg-palette{justify-content:flex-start;gap:14px}
.cfg-swatch{display:flex;flex-shrink:0;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.cfg-swatch i{width:22px;height:36px;display:block}
.cfg-trust{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;padding:16px;border-radius:var(--radius-lg);background:transparent;border:1.5px dashed var(--border);color:var(--primary);font-weight:600;font-size:15px;transition:all .3s var(--transition);min-height:56px}
.cfg-trust:hover{border-color:var(--accent);background:var(--amber-subtle)}
.cfg-trust.selected{border-style:solid;border-color:var(--accent);background:var(--amber-glow)}

/* ============================================================
   Étape 6 — photos (drag & drop + preview)
   ============================================================ */
.cfg-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;width:100%;min-height:160px;padding:28px 18px;border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:all .3s var(--transition)}
.cfg-drop:hover{border-color:var(--secondary);background:var(--surface-2)}
.cfg-drop.dragover{border-color:var(--accent);background:var(--amber-subtle);transform:scale(1.01)}
.cfg-drop-ico{font-size:34px}
.cfg-drop-title{font-family:var(--font-head);font-size:19px;color:var(--primary);font-weight:600}
.cfg-drop-sub{font-size:13px;color:var(--muted)}
.cfg-previews{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.cfg-previews:empty{display:none}
.cfg-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle);background:var(--bg-2)}
.cfg-thumb img{width:100%;height:100%;object-fit:cover}
.cfg-thumb-del{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
.cfg-thumb-del:hover{background:#DC2626}

.cfg-photo-mockup{margin-top:22px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-md)}
.cfg-photo-mockup .mk-bar{padding:9px 12px;background:var(--bg-2);border-bottom:1px solid var(--border-subtle)}
.cfg-photo-mockup .mk-screen{display:block}
.mk-photo-hero{display:flex;align-items:center;justify-content:center;height:130px;background:linear-gradient(135deg,#221C12 0%,#1A1814 48%,#141519 100%);background-size:cover;background-position:center;color:rgba(255,255,255,.6);font-size:13px;font-weight:600}
.mk-thumbs{display:flex;gap:6px;padding:10px 12px}
.mk-thumbs span{flex:1;height:34px;border-radius:6px;background:var(--bg-2);background-size:cover;background-position:center}

/* ============================================================
   Étape 8 / final — confirmation + récap
   ============================================================ */
.cfg-confirm{text-align:center;margin-bottom:30px}
.cfg-confirm-check{width:72px;height:72px;margin:0 auto 18px}
.cfg-confirm-check svg{width:72px;height:72px}
.cfg-confirm-check circle{stroke:var(--success);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:cfgCircle .6s var(--transition) forwards}
.cfg-confirm-check path{stroke:var(--success);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:cfgCheck .4s var(--transition) .5s forwards}
@keyframes cfgCircle{to{stroke-dashoffset:0}}
@keyframes cfgCheck{to{stroke-dashoffset:0}}
.cfg-confirm-msg{font-size:16px;color:var(--text-2);line-height:1.55;max-width:480px;margin:8px auto 0}
.cfg-confirm-msg strong{color:var(--primary)}

.cfg-recap-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:24px 22px;box-shadow:var(--shadow-md);margin-bottom:22px}
.cfg-recap-head{font-family:var(--font-head);font-size:20px;color:var(--primary);margin-bottom:16px}
.cfg-recap{display:flex;flex-direction:column}
.cfg-recap-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.cfg-recap-row:last-child{border-bottom:none}
.cfg-recap-k{font-size:13px;font-weight:600;color:var(--muted);flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}
.cfg-recap-v{font-size:15px;color:var(--primary);font-weight:600;text-align:right;font-family:var(--font-head)}
.cfg-recap-note{margin-top:16px;font-size:13.5px;color:var(--secondary);font-weight:600;background:var(--amber-subtle);border:1px solid var(--border-amber);border-radius:var(--radius-md);padding:12px 14px;text-align:center}
.cfg-call{width:100%;font-size:16px;padding:17px 24px;margin-bottom:14px}
.cfg-restart{display:block;text-align:center;font-size:14px;color:var(--muted);font-weight:600;padding:8px;transition:color .3s}
.cfg-restart:hover{color:var(--primary)}

/* ============================================================
   Barre de navigation (Précédent / Continuer)
   ============================================================ */
.cfg-nav{position:fixed;bottom:0;left:0;right:0;z-index:90;display:flex;gap:12px;max-width:760px;margin:0 auto;padding:14px 18px;padding-bottom:calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 62%,rgba(22,24,28,0))}
.cfg-nav[hidden]{display:none}
.cfg-nav .cfg-prev{flex-shrink:0;background:var(--surface)}
.cfg-nav .cfg-next{flex:1}
.cfg-nav.no-prev .cfg-prev{display:none}

/* ============================================================
   Toast (validation)
   ============================================================ */
.cfg-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);z-index:200;background:var(--surface-2);color:var(--text);border:1px solid var(--border-amber);font-size:14px;font-weight:600;padding:13px 20px;border-radius:100px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--transition);max-width:calc(100vw - 36px);text-align:center}
.cfg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   Secousse (champ / sélection invalide)
   ============================================================ */
@keyframes cfgShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.cfg-shake{animation:cfgShake .5s var(--transition)}

/* ============================================================
   Tablette / desktop (mobile-first → on enrichit)
   ============================================================ */
@media(min-width:560px){
  .cfg-grid.cols-2{grid-template-columns:1fr 1fr}
  .cfg-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
  .cfg-previews{grid-template-columns:repeat(6,1fr)}
}
@media(min-width:760px){
  .cfg-main{padding-top:96px}
  .cfg-title{font-size:clamp(34px,4vw,48px)}
}

/* ============================================================
   Préférence "réduire les animations"
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .cfg-progress-fill,.cfg-card,.cfg-toast{transition:none}
  .cfg-confirm-check circle,.cfg-confirm-check path,.mk-moderne .mk-hero{animation:none}
  .cfg-confirm-check circle{stroke-dashoffset:0}
  .cfg-confirm-check path{stroke-dashoffset:0}
}