/* ==========================================================================
   Fidelyxa — démo : « Ma carte » (voir demo-card-editor.js)
   Éditeur à gauche, téléphone à droite. Préfixe .wc-, limité à #appShell.
   ========================================================================== */
#appShell .wc{
  --wc-deep:#052f2b;--wc-green:#0f8f83;--wc-green-ui:#0d8378;--wc-green-text:#0a6f66;--wc-mint:#e2f3ef;--wc-mint-2:#c9e9e2;
  --wc-ink:#0f201d;--wc-soft:#44605a;--wc-line:rgba(15,32,29,.12);
  --wc-display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;--wc-text:'Figtree','Segoe UI',system-ui,sans-serif;
  --wc-ease:cubic-bezier(.22,1,.36,1);--wc-pop:cubic-bezier(.2,1.35,.4,1);
  font-family:var(--wc-text);color:var(--wc-ink);-webkit-font-smoothing:antialiased;
}
#appShell .wc *,#appShell .wc *::before,#appShell .wc *::after{box-sizing:border-box}
#appShell .wc [hidden]{display:none!important}
#appShell .wc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#appShell .wc-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
#appShell .wc-form{display:grid;gap:20px;min-width:0}

/* --- panneaux du formulaire -------------------------------------------------- */
#appShell .wc-panel{display:grid;gap:16px;padding:clamp(22px,2.2vw,30px);border-radius:28px;background:#fff;border:1px solid var(--wc-line)}
#appShell .wc-panel h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;font:700 1.375rem/1.15 var(--wc-display);letter-spacing:-.03em;color:var(--wc-ink)}
#appShell .wc-desc{margin:-8px 0 2px;max-width:46em;font:500 .9375rem/1.5 var(--wc-text);color:var(--wc-soft)}
#appShell .wc-desc code{padding:2px 6px;border-radius:6px;background:var(--wc-mint);color:var(--wc-green-text);font:700 .85em/1 ui-monospace,Menlo,Consolas,monospace}
#appShell .wc-counter,#appShell .wc-field em{font:700 .78rem/1 var(--wc-text);font-style:normal;letter-spacing:0;color:var(--wc-soft);font-variant-numeric:tabular-nums}
#appShell .wc-counter{padding:6px 10px;border-radius:999px;background:var(--wc-mint);color:var(--wc-green-text)}
#appShell .wc-field{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:baseline;margin:0;font:700 .9375rem/1.3 var(--wc-text);color:var(--wc-ink)}
#appShell .wc-field>span{grid-column:1/-1}
#appShell .wc-field>input,#appShell .wc-field>.wc-file,#appShell .wc-field>small{grid-column:1/-1}
#appShell .wc-field small,#appShell .wc-note{margin:0;font:500 .8125rem/1.45 var(--wc-text);color:var(--wc-soft)}
#appShell .wc input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),#appShell .wc textarea{
  width:100%;min-height:48px;margin:0;padding:0 14px;border:1.5px solid var(--wc-line);border-radius:14px;background:#f6faf8;box-shadow:none;
  font:500 1rem/1.4 var(--wc-text);color:var(--wc-ink);transition:border-color .2s ease,box-shadow .2s ease}
#appShell .wc textarea{padding:11px 14px;min-height:64px;resize:vertical}
#appShell .wc input:focus,#appShell .wc textarea:focus{outline:none;border-color:var(--wc-green);box-shadow:0 0 0 4px rgba(15,143,131,.16)}
#appShell .wc :is(button,input[type=range],input[type=color],input[type=checkbox],input[type=file]):focus-visible{outline:3px solid var(--wc-green);outline-offset:2px}
#appShell .wc-file{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1.5px dashed var(--wc-mint-2);border-radius:14px;background:#f6faf8}
#appShell .wc-file input{flex:1;min-width:0;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font:500 .875rem var(--wc-text);color:var(--wc-soft)}
#appShell .wc-file input::file-selector-button{margin-right:12px;padding:9px 14px;border:0;border-radius:999px;background:var(--wc-mint);color:var(--wc-green-text);font:700 .8125rem var(--wc-text);cursor:pointer}
#appShell .wc-text{padding:8px 4px;border:0;background:none;box-shadow:none;color:var(--wc-green-text);font:700 .875rem/1 var(--wc-text);cursor:pointer;white-space:nowrap}
#appShell .wc-text:hover{text-decoration:underline;text-underline-offset:3px}

/* couleurs */
#appShell .wc-presets{display:flex;flex-wrap:wrap;gap:10px}
#appShell .wc-presets button{width:52px;height:52px;padding:0;border:2px solid transparent;border-radius:16px;background:var(--b);box-shadow:inset 0 0 0 1px rgba(15,32,29,.12);cursor:pointer;display:grid;place-items:center;transition:transform .25s var(--wc-ease)}
#appShell .wc-presets button i{width:18px;height:18px;border-radius:50%;background:var(--f);box-shadow:8px 0 0 -3px var(--l)}
#appShell .wc-presets button:hover{transform:translateY(-2px)}
#appShell .wc-presets button.is-on{border-color:var(--wc-ink);box-shadow:0 0 0 3px #fff inset}
#appShell .wc-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#appShell .wc-colors label{display:grid;gap:8px;margin:0;font:700 .875rem/1 var(--wc-text);color:var(--wc-ink)}
#appShell .wc-colors input{width:100%;height:48px;padding:4px;border:1.5px solid var(--wc-line);border-radius:14px;background:#fff;cursor:pointer}
#appShell .wc-warn{margin:0;font:700 .875rem/1.4 var(--wc-text);color:#9a5200}
#appShell .wc-warn:empty{display:none}

/* boutons segmentés */
#appShell .wc-seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--wc-mint);justify-self:start}
#appShell .wc-seg--wrap{flex-wrap:wrap;border-radius:24px}
#appShell .wc-seg button{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--wc-soft);font:700 .9375rem/1 var(--wc-text);cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
#appShell .wc-seg button.is-on{background:var(--wc-ink);color:#fff}
#appShell .wc input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--wc-green-ui)}

/* listes de champs */
#appShell .wc-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) 44px;gap:10px;align-items:start;margin-bottom:10px}
#appShell .wc-row label{display:block;margin:0}
#appShell .wc-x{width:44px;height:48px;border:1.5px solid var(--wc-line);border-radius:14px;background:#fff;box-shadow:none;color:var(--wc-soft);font:500 1.4rem/1 var(--wc-text);cursor:pointer}
#appShell .wc-x:hover{border-color:#d9a39b;color:#a02b17;background:#fff7f5}
#appShell .wc-add{justify-self:start;min-height:44px;padding:0 18px;border:1.5px dashed var(--wc-green);border-radius:999px;background:transparent;box-shadow:none;color:var(--wc-green-text);font:700 .9375rem/1 var(--wc-text);cursor:pointer}
#appShell .wc-add:hover:not(:disabled){background:var(--wc-mint)}
#appShell .wc-add:disabled{border-color:var(--wc-line);color:var(--wc-soft);cursor:not-allowed}
#appShell .wc-check{display:flex;gap:12px;align-items:center;margin:0;font:600 .9375rem/1.35 var(--wc-text);color:var(--wc-ink);cursor:pointer}
#appShell .wc-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--wc-green-ui)}

/* actions */
#appShell .wc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
#appShell .wc-actions p{margin:0;font:500 .875rem/1.4 var(--wc-text);color:var(--wc-soft)}
#appShell .wc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1.5px solid rgba(15,32,29,.28);border-radius:999px;background:transparent;box-shadow:none;color:var(--wc-ink);font:700 1rem/1 var(--wc-text);cursor:pointer;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,transform .18s var(--wc-ease)}
#appShell .wc-btn:hover{border-color:var(--wc-ink)}
#appShell .wc-btn:active{transform:scale(.98)}
#appShell .wc-btn--primary{background:var(--wc-green-ui);border-color:transparent;color:#fff}
#appShell .wc-btn--primary:hover{background:var(--wc-green-text);border-color:transparent}
#appShell .wc-btn--block{width:100%}

/* --- aperçu ------------------------------------------------------------------- */
#appShell .wc-side{position:sticky;top:98px;max-height:calc(100vh - 116px);overflow-y:auto;scrollbar-width:none;display:grid;gap:16px;padding:22px;border-radius:32px 32px 32px 88px;background:var(--wc-mint)}
#appShell .wc-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#appShell .wc-side .wc-seg{background:#fff}
#appShell .wc-side .wc-seg button{min-height:38px;padding:0 14px;font-size:.875rem}
#appShell .wc-phone{justify-self:center;width:min(318px,100%);padding:10px;border-radius:48px;background:linear-gradient(145deg,#46544f,#0c1514 55%,#2a3a37);box-shadow:0 40px 70px -34px rgba(5,47,43,.7),inset 0 0 0 1.5px rgba(255,255,255,.14)}
#appShell .wc-screen{position:relative;overflow:hidden;min-height:500px;padding:46px 14px 20px;border-radius:39px;background:#0a0f0e}
#appShell .wc-screen::before{content:"";position:absolute;top:12px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:99px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
#appShell .wc-wtitle{margin:0 4px 12px;font:800 1.5rem/1 var(--wc-display);letter-spacing:-.035em;color:#fff}
#appShell .wc-pass{position:relative;border-radius:16px;overflow:hidden;animation:wc-pass-in .5s var(--wc-ease)}
@keyframes wc-pass-in{from{opacity:.4;transform:translateY(8px) scale(.985)}}
#appShell .wc-pass small{display:block;font:700 .625rem/1.2 var(--wc-text);letter-spacing:.06em;text-transform:uppercase}
/* Apple */
#appShell .wc-pass--apple{background:var(--bg);color:var(--fg);padding-bottom:14px;transition:background-color .3s ease,color .3s ease}
#appShell .wc-pass--apple small{color:var(--lb)}
#appShell .wc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 10px}
#appShell .wc-brand{display:flex;align-items:center;gap:8px;min-width:0;font:700 1rem/1.1 var(--wc-text);letter-spacing:-.01em}
#appShell .wc-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#appShell .wc-logo{flex:none;height:30px;max-width:96px;width:auto;object-fit:contain}
#appShell .wc-logo.is-initial,#appShell .wc-g-logo.is-initial{display:grid;place-items:center;width:30px;border-radius:50%;background:rgba(255,255,255,.22);font:800 .95rem/1 var(--wc-display)}
#appShell .wc-hf{text-align:right;flex:none}
#appShell .wc-hf b{display:block;margin-top:2px;font:600 1.125rem/1 var(--wc-text);white-space:nowrap}
#appShell .wc-strip{position:relative;display:grid;align-items:center;min-height:98px;padding:12px 14px;background:rgba(255,255,255,.1) center/cover no-repeat}
#appShell .wc-strip.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.05))}
#appShell .wc-strip>*{position:relative}
#appShell .wc-stamps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none}
#appShell .wc-stamps li{aspect-ratio:1;max-width:38px;width:100%;justify-self:center;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--fg) 55%,transparent);display:grid;place-items:center}
#appShell .wc-stamps li.on{border-color:transparent;background:var(--fg)}
#appShell .wc-stamps li svg{width:54%;height:54%;fill:var(--bg)}
#appShell .wc-stamps li.is-fresh{animation:wc-stamp .55s var(--wc-pop)}
@keyframes wc-stamp{0%{transform:scale(2.2) rotate(-16deg);opacity:0}55%{transform:scale(.9) rotate(3deg);opacity:1}100%{transform:none}}
#appShell .wc-primary b{display:block;font:300 2.9rem/1 var(--wc-text);letter-spacing:-.02em}
#appShell .wc-primary small{margin-top:4px}
#appShell .wc-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:12px 14px 4px}
#appShell .wc-fields div{min-width:0}
#appShell .wc-fields div:nth-child(even){text-align:right}
#appShell .wc-fields b{display:block;margin-top:3px;font:500 1rem/1.2 var(--wc-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#appShell .wc-code{display:grid;justify-items:center;gap:6px;width:fit-content;max-width:calc(100% - 28px);margin:16px auto 0;padding:10px;border-radius:10px;background:#fff;color:#0f201d}
#appShell .wc-code-svg{display:block;width:112px;height:112px;fill:#0f201d}
#appShell .wc-code-svg--wide{width:216px;height:62px}
#appShell .wc-code span{font:600 .6875rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;color:#0f201d}
/* dos */
#appShell .wc-pass--back{padding:16px;background:#f2f4f3;color:#0f201d;min-height:420px}
#appShell .wc-back-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(15,32,29,.12);font:700 1rem/1.2 var(--wc-text)}
#appShell .wc-back-head .wc-logo.is-initial{background:var(--wc-green);color:#fff}
#appShell .wc-pass--back dl{margin:0}
#appShell .wc-pass--back dl div{padding:12px 0;border-bottom:1px solid rgba(15,32,29,.1)}
#appShell .wc-pass--back dt{font:700 .6875rem/1.2 var(--wc-text);letter-spacing:.05em;text-transform:uppercase;color:#61766f}
#appShell .wc-pass--back dd{margin:4px 0 0;font:500 .9375rem/1.4 var(--wc-text)}
/* Google */
#appShell .wc-pass--google{padding:16px 16px 18px;border-radius:24px;background:var(--bg)}
#appShell .wc-pass--google.is-dark{color:#fff}
#appShell .wc-pass--google.is-light{color:#1f1f1f}
#appShell .wc-pass--google small{opacity:.78}
#appShell .wc-g-top{display:flex;align-items:center;gap:10px;font:500 .9375rem/1.2 var(--wc-text)}
#appShell .wc-g-logo{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff}
#appShell .wc-pass--google h3{margin:16px 0 14px;font:400 1.5rem/1.15 var(--wc-text);letter-spacing:-.01em;color:inherit}
#appShell .wc-g-row{display:flex;justify-content:space-between;gap:14px}
#appShell .wc-g-row div:nth-child(2){text-align:right}
#appShell .wc-g-row b{display:block;margin-top:3px;font:500 1.0625rem/1.2 var(--wc-text)}
#appShell .wc-g-hero{height:74px;margin:16px -16px -18px;background:center/cover no-repeat}
#appShell .wc-pnote{margin:12px 4px 0;font:500 .75rem/1.45 var(--wc-text);color:rgba(255,255,255,.62)}
/* notification */
#appShell .wc-notif{position:absolute;z-index:3;left:10px;right:10px;top:42px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:rgba(250,252,251,.97);color:#0f201d;box-shadow:0 18px 34px -14px rgba(0,0,0,.7);transform:translateY(-160%);opacity:0;transition:transform .7s var(--wc-pop),opacity .25s ease}
#appShell .wc-notif.is-show{transform:none;opacity:1}
#appShell .wc-notif span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;overflow:hidden;background:var(--wc-green);color:#fff;font:800 .9rem/1 var(--wc-display)}
#appShell .wc-notif img{width:100%;height:100%;object-fit:contain;background:#fff}
#appShell .wc-notif b{display:block;font:700 .8125rem/1.2 var(--wc-text)}
#appShell .wc-notif small{display:block;margin-top:2px;font:500 .78rem/1.3 var(--wc-text);color:#44605a}
/* ce qu'Apple fixe */
#appShell .wc-locked{padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.7);font:500 .875rem/1.5 var(--wc-text);color:var(--wc-soft)}
#appShell .wc-locked b{display:block;margin-bottom:6px;font:700 .9375rem/1.2 var(--wc-text);color:var(--wc-ink)}
#appShell .wc-locked ul{margin:0;padding:0;list-style:none}
#appShell .wc-locked li{position:relative;padding-left:16px}
#appShell .wc-locked li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--wc-green)}

@media (max-width:1180px){
  #appShell .wc-grid{grid-template-columns:1fr}
  #appShell .wc-side{position:static;max-height:none;overflow:visible;order:-1;border-radius:28px 28px 28px 64px}
}
@media (max-width:640px){
  #appShell .wc-row{grid-template-columns:1fr 44px}
  #appShell .wc-row label:first-child{grid-column:1}
  #appShell .wc-row label:nth-child(2){grid-column:1;grid-row:2}
  #appShell .wc-x{grid-column:2;grid-row:1}
  #appShell .wc-colors{gap:8px}
  #appShell .wc-side{padding:16px}
  #appShell .wc-side-head{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  #appShell .wc-pass,#appShell .wc-stamps li.is-fresh{animation:none}
  #appShell .wc-notif{transition:opacity .2s ease;transform:none}
}
@media (min-width:1181px) and (max-height:860px){
  #appShell .wc-phone{zoom:.84}
  #appShell .wc-locked{display:none}
}