/* ===========================================================
   AGAIN Carte — système visuel.
   Une seule source : les jetons ci-dessous. Identité AGAIN
   (againpass.com) : papier, encre, teal = la marque, corail =
   l'action principale. Sobriété façon Sydely : filets fins, peu
   d'ombres, une action principale par écran. Polices système.
   =========================================================== */

:root{
  /* couleurs */
  --paper:#FFFFFF; --paper-2:#F6F7F8; --paper-3:#ECEFF1;
  --ink:#0C1417; --ink-2:#3E4A50; --ink-3:#5F6E76;
  --line:#E3E7EA; --line-2:#CBD3D8;
  --night:#04161A;
  --accent:#05707A; --accent-hover:#04565E; --accent-soft:#E6F4F5;
  --go:#B82545; --go-hover:#9C1D3A; --go-soft:#FDECEF;
  --ok:#1E6B45; --ok-soft:#E5F4EB; --warn:#7A5200; --warn-soft:#FFF5DB;
  /* typographie */
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.5rem; --fs-2xl:clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  /* espace : une échelle, rien d'autre */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* formes */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --shadow:0 1px 2px rgba(12,20,23,.06);
  --shadow-lg:0 18px 40px -20px rgba(12,20,23,.35);
  --focus:0 0 0 3px rgba(5,112,122,.28);
  --touch:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* la carte elle-même garde son relief : c'est le produit */
  --lift:var(--shadow);
  --lift-2:0 2px 6px rgba(12,20,23,.07), 0 28px 60px -22px rgba(12,20,23,.34);
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; min-height:100dvh; background:var(--paper-2); color:var(--ink-2); font-family:var(--sans); font-size:var(--fs-md); line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ color:var(--ink); line-height:1.15; letter-spacing:-.02em; margin:0; font-weight:650; text-wrap:balance; }
h1{ font-size:var(--fs-2xl); letter-spacing:-.035em; }
h2{ font-size:var(--fs-lg); }
h3{ font-size:var(--fs-md); }
p{ margin:0; }
a{ color:var(--accent); }
img{ max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--s4); top:var(--s3); z-index:99; background:var(--paper); padding:var(--s2) var(--s3); border-radius:var(--r-sm); }
.row{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.stack > * + *{ margin-top:var(--s4); }
.muted{ color:var(--ink-3); } .small{ font-size:var(--fs-sm); }
.eyebrow{ font-size:var(--fs-xs); font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s2); }

/* --- repère AGAIN --- */
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); }
.brand__mark{ display:grid; grid-template-columns:repeat(2,6px); gap:2px; }
.brand__mark i{ width:6px; height:6px; border-radius:1.5px; background:var(--accent); }
.brand__mark i:nth-child(2){ opacity:.55; } .brand__mark i:nth-child(3){ opacity:.75; }
.brand__word{ font-weight:650; letter-spacing:.16em; font-size:.95rem; }
.brand__product{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-3); padding-left:10px; border-left:1px solid var(--line-2); }

/* --- boutons --- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--touch); padding:0 var(--s5); border-radius:var(--r); border:1px solid transparent; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn--primary{ background:var(--go); color:#fff; }
.btn--primary:hover:not(:disabled){ background:var(--go-hover); }
.btn--secondary{ background:var(--paper); color:var(--ink); border-color:var(--line-2); }
.btn--secondary:hover:not(:disabled){ border-color:var(--ink-3); }
.btn--ghost{ background:transparent; color:var(--ink-2); }
.btn--ghost:hover:not(:disabled){ background:var(--paper-3); color:var(--ink); }
.btn--sm{ min-height:36px; padding:0 var(--s3); font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn--block{ width:100%; }
.link{ background:none; border:0; padding:0; color:var(--accent); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* --- champs --- */
.field{ display:grid; gap:6px; }
.field__label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.field__hint{ font-size:var(--fs-sm); color:var(--ink-3); }
.field__error{ font-size:var(--fs-sm); color:var(--go); min-height:0; }
.field__error:empty{ display:none; }
.input{ width:100%; min-height:var(--touch); padding:0 var(--s3); border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
textarea.input{ padding:var(--s2) var(--s3); resize:vertical; min-height:64px; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus); }
.input--lg{ min-height:56px; font-size:var(--fs-lg); }
select.input{ width:auto; min-width:180px; }

/* --- messages --- */
.alert{ padding:var(--s3) var(--s4); border-radius:var(--r); font-size:var(--fs-sm); border:1px solid transparent; }
.alert ul{ margin:var(--s1) 0 0; padding-left:18px; }
.alert--error{ background:var(--go-soft); color:var(--go-hover); border-color:#F5C8D2; }
.alert--success{ background:var(--ok-soft); color:var(--ok); border-color:#C3E3CF; }
.alert--info{ background:var(--warn-soft); color:var(--warn); border-color:#F0DFA8; }
.badge{ display:inline-block; padding:4px 10px; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:650; }
.badge--live{ background:var(--ok-soft); color:var(--ok); }
.badge--draft{ background:var(--paper-3); color:var(--ink-2); }
.badge--warn{ background:var(--warn-soft); color:var(--warn); }
.info{ font-size:var(--fs-sm); color:var(--ink-2); padding:var(--s3) var(--s4); background:var(--paper-2); border-radius:var(--r); }
.empty{ color:var(--ink-3); padding:var(--s4); text-align:center; }

/* --- onglets segmentés --- */
.seg{ display:inline-flex; gap:2px; padding:3px; border-radius:var(--r); background:var(--paper-3); }
.seg button{ min-height:32px; border:0; background:none; padding:0 var(--s3); border-radius:var(--r-sm); color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
.seg button[aria-selected="true"]{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }

/* --- interrupteur --- */
.switch{ position:relative; display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer; min-height:var(--touch); }
.switch input{ position:absolute; opacity:0; width:40px; height:24px; margin:0; cursor:pointer; }
.switch__ui{ width:40px; height:24px; border-radius:var(--r-full); background:var(--line-2); position:relative; transition:background .15s; flex:none; }
.switch__ui::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:var(--r-full); background:#fff; box-shadow:var(--shadow); transition:transform .18s var(--ease); }
.switch input:checked + .switch__ui{ background:var(--accent); }
.switch input:checked + .switch__ui::after{ transform:translateX(16px); }
.switch input:focus-visible + .switch__ui{ box-shadow:var(--focus); }
.switch__label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); }

/* --- barre du haut (pages hors éditeur) --- */
.topbar{ display:flex; align-items:center; gap:var(--s5); padding:var(--s3) clamp(var(--s4),4vw,var(--s6)); background:var(--paper); border-bottom:1px solid var(--line); }
.topbar__home{ text-decoration:none; }
.topbar__nav{ display:flex; gap:var(--s1); margin-left:auto; }
.topbar__nav a{ min-height:40px; display:inline-flex; align-items:center; padding:0 var(--s3); border-radius:var(--r-sm); color:var(--ink-2); text-decoration:none; font-weight:600; font-size:var(--fs-sm); }
.topbar__nav a:hover{ background:var(--paper-2); color:var(--ink); }
.topbar__nav a[aria-current="page"]{ color:var(--ink); background:var(--paper-3); }
.topbar__out{ margin:0; }
.topbar__out .link{ font-size:var(--fs-sm); color:var(--ink-3); }
@media (max-width:620px){ .brand__product{ display:none; } .topbar__out{ display:none; } .topbar{ gap:var(--s3); } }

/* --- connexion --- */
.is-auth{ background:var(--paper); }
.is-auth .topbar{ border-color:transparent; }
.auth{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); max-width:1120px; margin:0 auto; padding:var(--s6) clamp(var(--s4),4vw,var(--s6)) var(--s8); min-height:calc(100dvh - 70px); align-items:center; }
.auth__panel{ width:min(420px,100%); justify-self:center; display:grid; gap:var(--s5); }
.auth__panel h1{ font-size:clamp(2rem,1.5rem + 2vw,2.75rem); }
.auth__lead{ color:var(--ink-3); font-size:var(--fs-lg); margin-top:var(--s2); }
.auth__form{ display:grid; gap:var(--s4); }
.auth__help{ font-size:var(--fs-sm); color:var(--ink-3); }
.auth__visual{ display:grid; place-items:center; align-self:stretch; padding:var(--s7); border-radius:28px; background:var(--paper-2); border:1px solid var(--line); }
.auth__visual .wc{ width:320px; }
@media (max-width:860px){ .auth{ grid-template-columns:1fr; } .auth__visual{ display:none; } }

/* --- pages --- */
.page{ max-width:1080px; margin:0 auto; padding:var(--s6) clamp(var(--s4),4vw,var(--s6)) var(--s8); }
.page--narrow{ max-width:620px; }
.page__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4) var(--s5); flex-wrap:wrap; margin-bottom:var(--s5); }
.page__head .status{ margin-top:var(--s3); display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); margin-bottom:var(--s4); }
.panel h2{ margin-bottom:var(--s4); }
.overview__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--s5); align-items:start; }
@media (max-width:860px){ .overview__grid{ grid-template-columns:1fr; } }
.preview-panel{ display:grid; gap:var(--s4); justify-items:center; padding:var(--s6) var(--s4); border-radius:var(--r-xl); background:var(--paper); border:1px solid var(--line); }
.preview-stage{ width:100%; display:grid; justify-items:center; }
.summary-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); display:grid; gap:var(--s4); }
.kv dt{ font-size:var(--fs-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; font-weight:650; }
.kv dd{ margin:var(--s1) 0 0; color:var(--ink); font-weight:600; }
.reward-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.reward-list li{ display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s3); border-radius:var(--r-sm); background:var(--paper-2); }
.reward-list span{ color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.reward-list p{ font-size:var(--fs-sm); color:var(--ink-3); }

/* ===========================================================
   La carte (assets/card.js) — même dessin partout.
   =========================================================== */
.wc{ --c-primary:#05707A; --c-secondary:#FFD27A; --c-text:#FFFFFF;
  position:relative; width:100%; max-width:360px; border-radius:22px; overflow:hidden; display:flex; flex-direction:column;
  background:var(--c-primary); color:var(--c-text); box-shadow:var(--lift-2); isolation:isolate; text-align:left;
  transition:background .25s var(--ease), color .25s var(--ease); }
.wc::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(160deg, rgba(255,255,255,.14) 0%, transparent 40%, rgba(0,0,0,.12) 100%); }
.wc__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 0; }
.wc__brand{ display:flex; align-items:center; gap:10px; min-width:0; font-weight:650; letter-spacing:-.01em; }
.wc__brand > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc__logo{ width:34px; height:34px; flex:none; border-radius:9px; object-fit:contain; background:#fff; padding:2px; }
.wc__logo--mark{ display:grid; place-items:center; font-weight:750; color:var(--c-primary); }
.wc__counter{ display:grid; justify-items:end; line-height:1.05; }
.wc__counter small{ font-size:.6rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.wc__counter b{ font-size:1.25rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.wc__body{ display:grid; gap:14px; padding:16px 18px 18px; }
.wc__stamps{ list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(var(--cols,5), minmax(0,1fr)); }
.wc__stamps li{ aspect-ratio:1; border-radius:999px; display:grid; place-items:center; border:1.5px dashed color-mix(in srgb, currentColor 45%, transparent); background:color-mix(in srgb, currentColor 7%, transparent); }
.wc__stamps li.is-on{ border:0; background:var(--c-secondary); color:var(--c-primary); }
.wc__stamps li.is-new{ animation:stampIn .35s var(--ease-out) both; }
.wc__stamps svg{ width:58%; height:58%; }
@keyframes stampIn{ from{ transform:scale(.6) rotate(-12deg); opacity:0; } }
.wc__points{ display:flex; align-items:baseline; gap:6px; }
.wc__points strong{ font-size:2.8rem; font-weight:750; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.wc__points span{ font-weight:600; opacity:.8; }
.wc__bar{ height:6px; border-radius:999px; background:color-mix(in srgb, currentColor 18%, transparent); overflow:hidden; }
.wc__bar span{ display:block; height:100%; background:var(--c-secondary); border-radius:inherit; transition:width .3s var(--ease-out); }
.wc__fields{ display:grid; grid-template-columns:1fr 1.3fr; gap:12px; margin:0; }
.wc__fields div:last-child{ text-align:right; }
.wc__fields dt{ font-size:.6rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.wc__fields dd{ margin:2px 0 0; font-weight:620; overflow-wrap:anywhere; }
.wc__code{ display:grid; justify-items:center; gap:6px; padding-top:2px; }
.wc__qr{ width:116px; height:116px; padding:6px; background:#fff; border-radius:12px; }
.wc__no{ font-size:.72rem; font-weight:600; opacity:.8; }

/* Bandeau : la carte du site AGAIN — bandeau en tête, corps blanc. */
.wc--bandeau{ background:#fff; color:var(--ink); }
.wc--bandeau::after{ display:none; }
.wc__band{ position:relative; height:120px; background:var(--c-primary); color:var(--c-text); display:flex; align-items:flex-end; padding:14px 18px; overflow:hidden; }
.wc__band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wc__band > img + .wc__brand{ text-shadow:0 1px 8px rgba(0,0,0,.45); }
.wc__band .wc__brand{ position:relative; }
.wc__chip{ position:absolute; top:14px; right:16px; width:30px; height:22px; border-radius:5px; background:linear-gradient(135deg,#E9D9A6,#B8A06A); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.wc__title small{ display:block; font-size:.66rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.wc__title b{ display:block; font-size:1.5rem; letter-spacing:-.03em; line-height:1.1; color:var(--ink); }
.wc--bandeau .wc__stamps li{ border-color:var(--line-2); background:var(--paper-2); color:var(--ink-3); }
.wc--bandeau .wc__stamps li.is-on, .wc--epure .wc__stamps li.is-on{ background:var(--c-secondary); color:var(--c-on-secondary); }
.wc--bandeau .wc__bar{ background:var(--paper-3); }

/* Épuré : blanc, la couleur en filet et en compteur. */
.wc--epure{ background:#fff; color:var(--ink); box-shadow:0 0 0 1px var(--line), var(--lift); border-top:6px solid var(--c-primary); }
.wc--epure::after{ display:none; }
.wc--epure .wc__brand{ color:var(--c-text); }
.wc--epure .wc__counter b{ color:var(--c-primary); }
.wc--epure .wc__stamps li{ border-style:solid; border-color:var(--line-2); background:transparent; color:var(--ink-3); }
.wc--epure .wc__qr{ box-shadow:0 0 0 1px var(--line); }

/* Nuit : la nuit d'AGAIN, la couleur en halo. */
.wc--nuit{ background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--c-primary) 70%, transparent) 0%, transparent 60%), var(--night); }
.wc--nuit .wc__stamps li.is-on{ color:var(--night); }


/* ===========================================================
   L'éditeur pas à pas
   =========================================================== */
.is-editor{ background:var(--paper); }
.editor__loading{ padding:var(--s7); text-align:center; }
.wiz__top{ position:sticky; top:0; z-index:20; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s4); padding:var(--s3) clamp(var(--s4),4vw,var(--s6)); background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.wiz__exit{ color:var(--ink-2); text-decoration:none; font-weight:600; font-size:var(--fs-sm); min-height:var(--touch); display:inline-flex; align-items:center; }
.progress{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:var(--s1); }
.progress button{ display:inline-flex; align-items:center; gap:var(--s2); min-height:40px; padding:0 var(--s3); border:0; border-radius:var(--r-full); background:none; color:var(--ink-3); font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
.progress button:hover{ background:var(--paper-2); color:var(--ink); }
.progress__num{ display:grid; place-items:center; width:24px; height:24px; border-radius:var(--r-full); border:1.5px solid var(--line-2); font-size:var(--fs-xs); font-weight:700; }
.progress .is-done .progress__num{ background:var(--accent); border-color:var(--accent); color:#fff; }
.progress .is-done button{ color:var(--ink-2); }
.progress .is-current button{ color:var(--ink); background:var(--paper-3); }
.progress .is-current .progress__num{ background:var(--ink); border-color:var(--ink); color:#fff; }
.save{ font-size:var(--fs-sm); color:var(--ink-3); display:flex; gap:var(--s2); align-items:center; justify-content:flex-end; min-width:150px; }
.save--ok::before{ content:""; width:8px; height:8px; border-radius:var(--r-full); background:var(--ok); }
.save--error{ color:var(--go); font-weight:600; }

.wiz__main{ max-width:1160px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:var(--s7); padding:var(--s6) clamp(var(--s4),4vw,var(--s6)) 140px; align-items:start; }
.wiz__step{ display:grid; gap:var(--s4); align-content:start; max-width:620px; min-width:0; }
.wiz__step h1{ font-size:clamp(2rem,1.5rem + 2vw,2.75rem); }
.wiz__step h1:focus{ outline:none; box-shadow:none; }
.wiz__count{ font-size:var(--fs-xs); font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.wiz__intro{ color:var(--ink-3); font-size:var(--fs-lg); margin-top:calc(var(--s2) * -1); }
.step-body{ display:grid; gap:var(--s5); margin-top:var(--s3); }
.group{ display:grid; gap:var(--s3); }
.group__title{ font-size:var(--fs-sm); font-weight:650; color:var(--ink); }
.inline-fields{ display:flex; gap:var(--s4); flex-wrap:wrap; align-items:flex-start; }

.preview{ position:sticky; top:96px; display:grid; gap:var(--s3); justify-items:center; padding:var(--s5); border-radius:var(--r-xl); background:var(--paper-2); border:1px solid var(--line); }
.preview__label{ justify-self:start; font-size:var(--fs-xs); font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.preview__card{ width:100%; display:grid; justify-items:center; }
.preview__note{ font-size:var(--fs-sm); color:var(--ink-3); text-align:center; }

.wiz__bar{ position:fixed; left:0; right:0; bottom:0; z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); }
.wiz__bar-in{ max-width:1160px; margin:0 auto; display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s3) clamp(var(--s4),4vw,var(--s6)); }
.wiz__bar .btn--primary{ min-width:min(320px,55vw); min-height:52px; font-size:var(--fs-md); }

@media (max-width:1000px){
  .wiz__top{ grid-template-columns:auto 1fr; }
  .progress{ grid-column:1 / -1; grid-row:2; justify-content:space-between; }
  .progress__label{ display:none; }
  .progress .is-current .progress__label{ display:inline; }
  .wiz__main{ grid-template-columns:minmax(0,1fr); gap:var(--s5); padding-top:var(--s4); }
  .preview{ position:static; order:-1; padding:var(--s3); }
  .preview .wc{ max-width:300px; }
  .preview__note{ display:none; }
}
@media (max-width:620px){
  /* Téléphone : un aperçu compact, pour que la question de l'étape reste visible. */
  .preview{ gap:var(--s2); }
  .preview .wc{ max-width:220px; font-size:.78rem; border-radius:16px; }
  .preview .wc__qr{ width:72px; height:72px; }
  .preview .wc__counter b{ font-size:1rem; }
  .preview .wc__logo{ width:26px; height:26px; }
  .preview .wc__band{ height:84px; }
  .preview .wc__title b{ font-size:1.15rem; }
  .preview .seg{ display:none; }
}
@media (max-width:480px){
  .save{ min-width:0; }
  .progress button{ padding:0 6px; gap:6px; }
  .tier{ padding:var(--s4); }
  .tier__amount input{ font-size:2.4rem; }
  .wiz__bar .btn{ padding:0 var(--s4); }
  .wiz__bar .btn--primary{ flex:1; min-width:0; }
}

/* sélection d'image */
.picker{ display:flex; gap:var(--s4); align-items:flex-start; }
.picker__box{ position:relative; display:grid; place-items:center; flex:none; width:104px; height:104px; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); border:1px dashed var(--line-2); cursor:pointer; }
.picker--wide .picker__box{ width:200px; height:77px; }
.picker__box img{ width:100%; height:100%; object-fit:cover; }
.picker:not(.picker--wide) .picker__box img{ object-fit:contain; padding:var(--s2); background:#fff; }
.picker__box:hover{ border-color:var(--accent); }
.picker__empty{ font-size:1.8rem; font-weight:300; color:var(--ink-3); }
.picker__busy{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.85); font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); }
.picker__side{ display:grid; gap:var(--s2); align-content:start; }
@media (max-width:480px){ .picker{ flex-direction:column; } }

/* styles de carte */
.themes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
@media (max-width:760px){ .themes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.theme{ display:grid; gap:2px; justify-items:start; padding:var(--s2) var(--s2) var(--s3); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); cursor:pointer; text-align:left; }
.theme:hover{ border-color:var(--line-2); }
.theme[aria-checked="true"]{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.theme__mini{ display:block; width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:var(--paper-2); position:relative; pointer-events:none; margin-bottom:var(--s2); }
.theme__mini .wc{ position:absolute; top:8px; left:50%; width:300px; max-width:none; transform:translateX(-50%) scale(.42); transform-origin:top center; box-shadow:var(--shadow); }
.theme__name{ font-weight:650; color:var(--ink); font-size:var(--fs-sm); padding:0 var(--s1); }
.theme__hint{ font-size:var(--fs-xs); color:var(--ink-3); line-height:1.35; padding:0 var(--s1); }

/* couleurs */
.presets{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.preset{ display:inline-flex; align-items:center; gap:var(--s2); min-height:40px; padding:0 var(--s3) 0 6px; border:1px solid var(--line); border-radius:var(--r-full); background:var(--paper); font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); cursor:pointer; }
.preset[aria-pressed="true"]{ border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.preset__dot{ display:grid; grid-template-columns:1fr 1fr; width:26px; height:26px; border-radius:var(--r-full); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.swatches{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
@media (max-width:620px){ .swatches{ grid-template-columns:1fr; } }
.swatch{ display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3); border:1px solid var(--line); border-radius:var(--r-lg); }
.swatch__pick{ position:relative; flex:none; width:44px; height:44px; cursor:pointer; }
.swatch__chip{ position:absolute; inset:0; border-radius:var(--r); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch__pick input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0; padding:0; }
.swatch__pick:focus-within .swatch__chip{ box-shadow:var(--focus); }
.swatch__hex{ display:block; width:100%; border:0; background:none; font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink); padding:2px 0; }
.swatch__hex:focus{ outline:none; box-shadow:0 1px 0 var(--accent); border-radius:0; }

/* règles */
.mechs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (max-width:620px){ .mechs{ grid-template-columns:1fr; } }
.mech{ display:grid; gap:var(--s3); text-align:left; padding:var(--s5); border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--paper); cursor:pointer; color:var(--ink-2); }
.mech:hover{ border-color:var(--ink-3); }
/* Système verrouillé (des clients sont inscrits) : l'autre choix reste visible, inactif. */
.mech:disabled{ cursor:not-allowed; opacity:.45; }
.mech:disabled:hover{ border-color:var(--line-2); }
.info--lock{ border-left:3px solid var(--ink); }
.mech[aria-checked="true"]{ background:var(--ink); border-color:var(--ink); color:rgba(255,255,255,.75); }
.mech__title{ font-size:var(--fs-xl); font-weight:650; letter-spacing:-.025em; color:var(--ink); }
.mech[aria-checked="true"] .mech__title, .mech[aria-checked="true"] .mech__rate{ color:#fff; }
.mech__text{ font-size:var(--fs-sm); line-height:1.45; }
.mech__dots{ display:flex; gap:6px; }
.mech__dots span{ width:22px; height:22px; border-radius:var(--r-full); border:1.5px solid currentColor; opacity:.5; }
.mech__dots span.is-on{ background:currentColor; opacity:1; }
.mech[aria-checked="true"] .mech__dots span{ border-color:#fff; } .mech[aria-checked="true"] .mech__dots span.is-on{ background:#fff; }
.mech__rate{ font-size:var(--fs-xl); font-weight:650; color:var(--ink); }
.stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; width:max-content; background:var(--paper); }
.stepper__btn{ width:var(--touch); height:var(--touch); border:0; background:var(--paper); font-size:1.2rem; cursor:pointer; color:var(--ink); }
.stepper__btn:hover:not(:disabled){ background:var(--paper-2); }
.stepper__btn:disabled{ opacity:.35; cursor:not-allowed; }
.stepper__value{ width:64px; height:var(--touch); border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-weight:700; font-size:var(--fs-lg); color:var(--ink); font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.stepper__value::-webkit-inner-spin-button{ -webkit-appearance:none; }

/* paliers de récompense */
.tiers{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.tier{ display:grid; gap:var(--s3); padding:var(--s4) var(--s5) var(--s5); border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--paper); }
.tier.is-off{ background:var(--paper-2); }
.tier.is-off .tier__amount, .tier.is-off .tier__title, .tier.is-off .tier__desc{ opacity:.55; }
.tier__head{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.tier__badge{ padding:5px 12px; border-radius:var(--r-full); background:var(--ink); color:#fff; font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.tier__goal{ margin-left:auto; font-size:var(--fs-sm); font-weight:600; color:var(--ink-3); }
.tier__del{ margin-left:auto; }
.tier__amount{ display:flex; align-items:baseline; gap:var(--s2); }
.tier__amount input{ width:4ch; min-width:2ch; border:0; border-bottom:2px solid var(--line-2); background:none; font-size:3rem; font-weight:700; letter-spacing:-.04em; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums; padding:0; -moz-appearance:textfield; border-radius:0; }
.tier__amount input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.tier__amount input:focus{ outline:none; box-shadow:none; border-bottom-color:var(--accent); }
.tier__amount span{ font-size:var(--fs-lg); font-weight:600; color:var(--ink-3); }
.tier__title{ display:flex; align-items:center; gap:var(--s3); min-height:52px; padding:0 var(--s4); border:1px solid var(--line-2); border-radius:var(--r); }
.tier__title:focus-within{ border-color:var(--accent); box-shadow:var(--focus); }
.tier__title input{ flex:1; min-width:0; border:0; background:none; font-size:var(--fs-md); font-weight:600; color:var(--ink); }
.tier__title input:focus{ outline:none; box-shadow:none; }
.tier__icon svg{ width:20px; height:20px; display:block; color:var(--ink-2); }
.tier-add{ min-height:56px; border:1.5px dashed var(--line-2); border-radius:var(--r-xl); background:none; color:var(--ink-2); font-weight:600; cursor:pointer; }
.tier-add:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.tier-add:disabled{ opacity:.45; cursor:not-allowed; }

/* récapitulatif */
.summary{ margin:0; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; }
.summary__row{ display:grid; grid-template-columns:140px minmax(0,1fr) auto; gap:var(--s3); align-items:start; padding:var(--s4) var(--s5); border-top:1px solid var(--line); }
.summary__row:first-child{ border-top:0; }
.summary__row dt{ font-size:var(--fs-sm); color:var(--ink-3); padding-top:2px; }
.summary__row dd{ margin:0; color:var(--ink); font-weight:600; }
@media (max-width:620px){ .summary__row{ grid-template-columns:1fr auto; } .summary__row dd{ grid-column:1 / -1; grid-row:2; } }
.summary__biz{ display:inline-flex; align-items:center; gap:var(--s2); }
.summary__biz img{ width:32px; height:32px; object-fit:contain; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; }
.summary__colors{ display:inline-flex; gap:4px; vertical-align:middle; margin-left:var(--s2); }
.summary__dot{ width:18px; height:18px; border-radius:var(--r-full); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.summary__rewards{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.summary__rewards span{ font-weight:500; color:var(--ink-3); }
.summary__rewards .is-off{ opacity:.6; }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* Grilles de l'éditeur : une colonne qui ne dépasse jamais l'écran, quel que soit le contenu. */
.wiz__step, .step-body, .group, .tiers, .tier, .field{ grid-template-columns:minmax(0,1fr); }

.step-body > .badge, .group > .btn, .step-body > .btn{ justify-self:start; }