:root{
  --noir:#1A0E24; --noir-2:#241531; --surf:#2E1C3E; --surf-2:#3A2650;
  --line:#4C3562; --line-2:#684B85;
  --cream:#F7EFE6; --mute:#C7B4D6;
  --rose:#ED4558; --coral:#B02338;
  --grad:linear-gradient(105deg,#ED4558,#B02338);
  --gold:#F2C864;
  --rose-rgb:237,69,88; --gold-rgb:242,200,100;   /* teintes dérivées de l'accent */
  --ok:#7FCFA6; --warn:#E8A54B; --bad:#D2686B;
  --dsp:"Bodoni Moda",Didot,Georgia,serif;
  --bdy:"Jost",system-ui,sans-serif;
  --e:cubic-bezier(.22,1,.36,1); --r:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* le défilement latéral décalait tout l'écran — en-tête et barre d'onglets
   se retrouvaient rognés. Verrouillé des deux côtés. */
html{overflow-x:hidden;max-width:100%;
  background:var(--noir);           /* sans ça, le gris par défaut du navigateur
                                       transparaissait derrière la page */
  -webkit-text-size-adjust:100%}
body{font-weight:var(--fw,400);letter-spacing:var(--ls,0);line-height:var(--lh,1.5);background:var(--noir);color:var(--cream);overscroll-behavior:none;font-family:var(--bdy);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
/* Filet de sécurité : aucun champ ne doit tomber sur le blanc du navigateur.
   :where() a une spécificité NULLE — toutes les règles existantes le priment. */
:where(input:not([type=range]):not([type=color]):not([type=file]),textarea,select){
  -webkit-appearance:none;appearance:none;
  background:var(--noir-2);border:1px solid var(--line-2);color:var(--cream);
  border-radius:12px;padding:11px 13px;font-size:16px}
:where(input)::placeholder,:where(textarea)::placeholder{color:#6B5A65}
:where(input)::-webkit-outer-spin-button,
:where(input)::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
button{background:none;border:none;cursor:pointer;
  touch-action:manipulation;              /* iOS n'attend plus un double-tap */
  -webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:6px}
.hidden{display:none!important}
.money{font-family:var(--dsp);font-variant-numeric:tabular-nums;color:var(--gold)}
.eyb{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:500}

.b-grad{background:var(--grad);color:#1A0710;font-weight:600;padding:16px;border-radius:var(--r);width:100%;transition:transform .2s var(--e),filter .2s}
.b-grad:hover{transform:translateY(-2px);filter:brightness(1.08)}
.b-grad:disabled{opacity:.5;transform:none;cursor:wait}
.b-ghost{border:1px solid var(--line-2);padding:15px;border-radius:var(--r);width:100%;transition:.2s}
.b-ghost:hover{background:var(--surf);border-color:var(--rose)}
.b-sm{padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;background:var(--grad);color:#1A0710}
.b-sm2{padding:9px 16px;border-radius:100px;font-size:13px;border:1px solid var(--line-2);color:var(--mute)}

.f{margin-bottom:14px}
.f label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.f input,.f textarea,.f select{width:100%;padding:14px 15px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);color:var(--cream);font-size:15px}
.f textarea{resize:vertical;min-height:70px}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--rose)}
.f input::placeholder,.f textarea::placeholder{color:#6B5A65}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:12px;color:var(--mute);margin:-6px 0 14px;line-height:1.55}
.auth-or{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 12px;color:var(--mute);font-size:12px;line-height:1;text-align:center}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.10)}
.auth-or span{display:inline-block;min-width:24px}

.sw{display:flex;align-items:center;gap:13px;padding:14px;border-radius:var(--r);
  background:var(--surf);border:1px solid var(--line);margin-bottom:12px;cursor:pointer}
.sw .tx{flex:1;min-width:0}
.sw .tx b{display:block;font-size:14px;font-weight:500;margin-bottom:2px}
.sw .tx small{font-size:12px;color:var(--mute);line-height:1.45}
.sw .kn{width:46px;height:27px;border-radius:100px;background:var(--surf-2);
  border:1px solid var(--line-2);flex:none;position:relative;transition:.25s var(--e)}
.sw .kn::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--mute);transition:.25s var(--e)}
.sw.on{border-color:rgba(var(--rose-rgb),.4)}
.sw.on .kn{background:var(--grad);border-color:transparent}
.sw.on .kn::after{left:21px;background:#fff}

.ck{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;
  background:var(--surf);border:1px solid var(--line);margin-bottom:7px;cursor:pointer}
.ck .bx{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);flex:none;
  display:grid;place-items:center;color:transparent;transition:.2s}
.ck .bx svg{width:12px;height:12px}
.ck.on{border-color:rgba(228,196,140,.4)}
.ck.on .bx{background:var(--grad);border-color:transparent;color:#1A0710}
.ck .tx{flex:1;min-width:0;font-size:13.5px}
.ck .tx small{display:block;font-size:11.5px;color:var(--mute)}

.icp{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.icp .pv{width:58px;height:58px;border-radius:16px;background:var(--surf-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:26px;flex:none;overflow:hidden;background-size:cover;background-position:center}
.icp .co{flex:1;display:flex;flex-direction:column;gap:8px}
.icp .co input{width:100%;padding:11px 13px;border-radius:12px;background:var(--surf);
  border:1px solid var(--line);color:var(--cream);font-size:19px;text-align:center}
.icp-imp{display:flex;gap:8px}
.icp-imp label,.icp-imp button{flex:1;text-align:center;padding:10px;border-radius:12px;
  border:1px dashed var(--line-2);color:var(--rose);font-size:12.5px;font-weight:500;cursor:pointer}
.icp-imp .rm{border-style:solid;color:var(--bad);border-color:rgba(210,104,107,.35)}
/* iOS refuse d'ouvrir le sélecteur si l'input est en display:none → on le masque autrement */
.filein{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}

/* ── RECADRAGE ── */
.crop-vp{position:relative;width:100%;max-width:360px;margin:0 auto 16px;overflow:hidden;
  border-radius:16px;background:#000;touch-action:none;cursor:grab;border:1px solid var(--line)}
.crop-vp:active{cursor:grabbing}
.crop-vp img{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;
  user-select:none;-webkit-user-drag:none;pointer-events:none}
.crop-vp::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(246,238,242,.18);
  background:linear-gradient(rgba(246,238,242,.10) 1px,transparent 1px) 0 33.33%/100% 33.33%,
             linear-gradient(90deg,rgba(246,238,242,.10) 1px,transparent 1px) 33.33% 0/33.33% 100%}
.crop-z{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.crop-z span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);flex:none}
.crop-z input[type=range]{flex:1;-webkit-appearance:none;height:3px;border-radius:3px;background:var(--line-2)}
.crop-z input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--grad);border:2px solid var(--noir)}
.crop-acts{display:flex;gap:10px}

/* ── AVATAR + BANNIÈRE ── */
.ava{width:76px;height:76px;border-radius:50%;border:2px solid var(--noir);flex:none;
  background:var(--surf-2);background-size:cover;background-position:center;
  display:grid;place-items:center;font-family:var(--dsp);font-size:30px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);margin-bottom:14px}

/* ── PROFIL DU VISITEUR ── */
.me{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--surf);margin-bottom:12px}
.me-bn{height:112px;background:linear-gradient(140deg,var(--surf-2),var(--surf));
  background-size:cover;background-position:center;position:relative}
.me-bd{padding:0 18px 18px;margin-top:-34px;position:relative}
.me-av{width:68px;height:68px;border-radius:50%;border:3px solid var(--surf);
  background:var(--surf-2);background-size:cover;background-position:center;
  display:grid;place-items:center;font-family:var(--dsp);font-size:26px;margin-bottom:10px}
.me-bd h3{font-family:var(--dsp);font-size:22px;font-weight:400}
.me-bd .bi{font-size:13.5px;color:var(--mute);margin-top:6px;line-height:1.55}
.me-bd .bi.none{font-style:italic;opacity:.6}

/* ── PERSONNALISATION : couleur + police ── */
.col-row{display:flex;gap:10px;margin-bottom:10px}
.col-row .cw{flex:1;display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:13px;
  background:var(--surf);border:1px solid var(--line)}
.col-row .cw input[type=color]{width:34px;height:34px;border:none;border-radius:9px;
  background:none;padding:0;cursor:pointer}
.col-row .cw span{font-size:12px;color:var(--mute)}
.gtx{display:inline-block;width:auto;background-image:var(--acc);
  background-size:100% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.08em}

/* ── SÉLECTEUR DE DÉGRADÉ ── */
.gsample{display:flex;align-items:center;justify-content:center;min-height:66px;
  border-radius:14px;background:var(--surf-2);border:1px solid var(--line);margin-bottom:12px;
  padding:10px;overflow:hidden}
.gpre{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.gpre::-webkit-scrollbar{display:none}
.gp{width:46px;height:46px;border-radius:12px;flex:none;border:2px solid transparent;
  transition:.2s;position:relative}
.gp.on{border-color:var(--cream);transform:scale(1.06)}
.cw2{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;
  background:var(--surf);border:1px solid var(--line);flex:1;min-width:0}
.cw2 input[type=color]{width:38px;height:38px;border:none;border-radius:10px;
  background:none;padding:0;flex:none;cursor:pointer}
.cw2 .lb2{min-width:0}
.cw2 .lb2 b{display:block;font-size:12.5px;font-weight:500}
.cw2 .lb2 small{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.me-av.ring{box-shadow:0 0 0 3px var(--noir),0 0 0 6px var(--acc-1)}
.fonts{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fo-c{padding:12px;border-radius:14px;background:var(--surf);border:1px solid var(--line);
  text-align:center;transition:.2s}
.fo-c.on{border-color:var(--rose);background:var(--surf-2)}
.fo-c .sm{display:block;font-size:22px;line-height:1.2;margin-bottom:4px;color:var(--cream)}
.fo-c small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* ── DEUX FILS ── */
.th-tabs{display:flex;gap:7px;padding:10px 20px;background:var(--noir);
  border-bottom:1px solid var(--line);flex:none}
.th-tabs button{flex:1;padding:9px;border-radius:100px;border:1px solid var(--line);
  background:var(--surf);font-size:12.5px;color:var(--mute);transition:.2s;
  display:flex;align-items:center;justify-content:center;gap:6px}
.th-tabs button.on{color:var(--rose);border-color:rgba(var(--rose-rgb),.5);
  background:rgba(var(--rose-rgb),.09);font-weight:500}
.nb2{min-width:17px;height:17px;padding:0 5px;border-radius:100px;background:var(--grad);
  color:var(--noir);font-size:10px;font-weight:700;display:grid;place-items:center}
.th-note{display:flex;gap:9px;align-items:center;padding:11px 20px;flex:none;
  background:rgba(228,196,140,.06);border-bottom:1px solid var(--line)}
.th-note svg{width:15px;height:15px;color:var(--gold);flex:none}
.th-note span{font-size:11.5px;color:var(--mute);line-height:1.45}

/* ── ENREGISTREMENT VOCAL ── */
.rec-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;margin-top:8px;
  border-radius:100px;background:rgba(210,104,107,.1);border:1px solid rgba(210,104,107,.3)}
.rec-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--bad);flex:none;
  animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.rec-bar .t{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--bad)}
.rec-bar .hint2{flex:1;font-size:11px;color:var(--mute)}
.rec-bar .max{font-size:11px;color:var(--mute)}

/* ── MÉDIAS DANS LA CONVERSATION ── */
.bub .med{border-radius:14px;overflow:hidden;margin:-4px -4px 0;max-width:240px}
.bub .med img,.bub .med video{display:block;width:100%;border-radius:14px}
.once{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;
  background:rgba(var(--rose-rgb),.09);border:1px solid rgba(var(--rose-rgb),.3);min-width:190px}
.once.spent{background:var(--surf-2);border-color:var(--line);opacity:.65}
.once .ic2{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:2px dashed var(--rose);color:var(--rose)}
.once.spent .ic2{border-style:solid;border-color:var(--line-2);color:var(--mute)}
.once .ic2 svg{width:15px;height:15px}
.once .tx2{flex:1;min-width:0}
.once .tx2 b{display:block;font-size:13px;font-weight:500}
.once .tx2 small{font-size:11px;color:var(--mute)}
.med-t{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--mute);margin-top:6px}
.med-t svg{width:11px;height:11px}
.med-t button{color:var(--rose);text-decoration:underline;font-size:10.5px}

/* ── classement ── */
.lb{display:grid;gap:8px}
.lbr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px;
  background:var(--surf);border:1px solid var(--line)}
.lbr.lbme{border-color:rgba(var(--rose-rgb),.45);background:rgba(var(--rose-rgb),.06)}
.rk{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);flex:none;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--mute);
  font-variant-numeric:tabular-nums}
.lba{width:34px;height:34px;border-radius:50%;flex:none;background:var(--surf-2);
  background-size:cover;background-position:center;display:grid;place-items:center;
  font-family:var(--dsp);font-size:14px;color:var(--cream)}
.lbn{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbp{flex:none;font-size:12.5px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}

/* ── fluidité : le navigateur ne peint que les cartes visibles ── */
.pc{content-visibility:auto;contain-intrinsic-size:0 330px}
.bkc{content-visibility:auto;contain-intrinsic-size:0 118px}

/* ── filtres du coffre : deux niveaux de puces, comptés ── */
.bkf{display:grid;gap:8px;margin-bottom:16px}
.bkf-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
.bkf-row .rc{display:inline-flex;align-items:center;gap:5px}
.gi{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;
  background:rgba(var(--rose-rgb),.1);border:1px solid rgba(var(--rose-rgb),.24);color:var(--rose)}
.gi svg{width:17px;height:17px}
.bkf-row .rc i{font-style:normal;font-size:10px;opacity:.6;font-variant-numeric:tabular-nums}
.bkf-row.sub{position:relative;padding-left:15px}
.bkf-row.sub::before{content:"";position:absolute;left:4px;top:7px;bottom:9px;width:2px;
  border-radius:2px;background:var(--line-2)}

/* ── banque de contenus + filigrane ── */
.bank{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.bkc{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--surf-2);border:1px solid var(--line)}
.bkc img,.bkc video{width:100%;height:100%;object-fit:cover;display:block}
.bankrow{width:100%;display:flex;align-items:center;gap:12px;padding:14px;border-radius:15px;
  background:var(--surf);border:1px solid var(--line);text-align:left;transition:.2s}
.bankrow:active{background:var(--surf-2)}
.bankrow .n{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--surf-2);color:var(--gold)}
.bankrow .n svg{width:16px;height:16px}
.bankrow b{flex:1;font-size:13.5px;font-weight:500}
.bankrow .ct{font-size:11px;color:var(--mute);flex:none}
.smpl{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pv2{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:19px;background:rgba(0,0,0,.28);pointer-events:none}
.wmv{position:relative}
.wmv::after{content:var(--wm,"www.miriyushop.com");position:absolute;left:0;right:0;bottom:5px;
  text-align:center;font-size:9.5px;letter-spacing:.1em;color:rgba(255,255,255,.85);
  text-shadow:0 1px 5px rgba(0,0,0,.85);pointer-events:none}
.mvw{position:relative;display:block}
.olv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;border-radius:inherit}
.volay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;z-index:4}
.livb{position:absolute;top:7px;left:7px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px 4px 8px;border-radius:100px;background:rgba(10,7,9,.5);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-size:9.5px;font-weight:600;
  letter-spacing:.05em;pointer-events:none;white-space:nowrap}
.livb::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rose);
  box-shadow:0 0 6px var(--rose)}
.cn-vid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  max-width:78%;padding:14px 18px;border-radius:16px;background:rgba(10,7,9,.72);
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);font-size:12.5px;line-height:1.65;text-align:center;
  pointer-events:none}
.cn-vid b{color:#fff}
#yoti{position:fixed;inset:0;z-index:92;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;overflow-y:auto;
  padding-top:calc(env(safe-area-inset-top,0px) + 24px);
  background:radial-gradient(120% 80% at 50% -10%,#1A0F16,var(--noir) 62%)}
#yoti.hidden{display:none}
/* ── page de bienvenue plein écran (fond + texte personnalisables) ── */
#welp{position:fixed;inset:0;z-index:110;background:var(--noir);
  overflow-y:auto;-webkit-overflow-scrolling:touch;transition:opacity .3s ease}
#welp.out{opacity:0}
.welp-bg{position:absolute;inset:0;background:var(--noir) center/cover no-repeat}
.welp-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,7,9,.55),rgba(10,7,9,.30) 42%,var(--noir) 97%)}
.welp-in{position:relative;min-height:100%;max-width:560px;margin:0 auto;
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease .05s,transform .55s cubic-bezier(.2,.7,.2,1) .05s;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(env(safe-area-inset-top,0px) + 60px) 26px
          calc(env(safe-area-inset-bottom,0px) + 26px)}
.welp-t{font-family:'Bodoni Moda',Didot,serif;font-weight:600;font-size:42px;
  line-height:1.06;margin:0 0 14px;color:var(--cream)}
.welp-body p{color:var(--cream);opacity:.93}
.welp-a{margin-top:24px;display:flex;flex-direction:column;gap:10px}
#welp.show .welp-in{opacity:1;transform:none}
@keyframes newsflash{0%{box-shadow:0 0 0 0 rgba(var(--rose-rgb),.55)}70%{box-shadow:0 0 0 16px rgba(var(--rose-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--rose-rgb),0)}}
.newsflash{animation:newsflash 1.4s ease 1}
.annb{border:1px solid rgba(var(--rose-rgb),.28);background:rgba(var(--rose-rgb),.06);
  border-radius:18px;padding:13px 15px;margin:0 0 12px}
.annb .eyb{color:var(--rose)}
.bub .med{position:relative}
.medfs{position:absolute;top:8px;right:8px;z-index:3;width:34px;height:34px;border-radius:12px;
  background:rgba(6,4,6,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.medfs svg{width:16px;height:16px}
#yoti .porte-mark{position:absolute;top:calc(env(safe-area-inset-top,0px) + 26px);left:0;right:0}
.yo-card{width:min(420px,100%);background:var(--surf);border:1px solid var(--line);
  border-radius:22px;padding:28px 22px;text-align:center}
.yo-badge{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:grid;
  place-items:center;border:1.5px solid var(--gold);color:var(--gold);
  font-weight:700;font-size:15px}
.yo-t{font-family:var(--dsp);font-size:21px;margin:0 0 10px;color:var(--cream)}
.yo-x{font-size:12.5px;line-height:1.7;color:var(--mute);margin:0 0 18px;text-align:left}
.yo-x b{color:var(--cream);font-weight:600}
.yo-run{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;
  color:var(--mute);font-size:13px}
.yo-run.hidden{display:none}
.yo-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);
  border-top-color:var(--rose);animation:yospin .8s linear infinite;flex:none}
@keyframes yospin{to{transform:rotate(360deg)}}
.yo-hint{font-size:10.5px;color:var(--mute);opacity:.65;margin:16px 0 0;line-height:1.6}
.democard{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--surf),var(--surf-2))}
.dc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dc-chip{width:34px;height:24px;border-radius:6px;opacity:.8;
  background:linear-gradient(135deg,#E4C48C,#8A6D3F)}
.dc-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.dc-num{font-size:17px;letter-spacing:.18em;color:var(--cream);margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.dc-note{font-size:10.5px;line-height:1.55;color:var(--mute)}
.lgl-free{white-space:pre-wrap;font-size:13.5px;line-height:1.85;color:var(--cream);
  overflow-wrap:break-word}
#camflash.on,#camgrid.on{background:var(--grad);color:#1A1013;border-color:transparent;
  box-shadow:0 6px 18px rgba(var(--rose-rgb),.4)}
#camveil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:rgba(6,4,6,.32);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transition:opacity .22s ease}
.cam-v.switching #camveil{opacity:1}
#camgridfx{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;
  background-image:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32)),
    linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32)),
    linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32)),
    linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32));
  background-repeat:no-repeat;
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 33.33%,0 66.66%,33.33% 0,66.66% 0}
#camgridfx.on{opacity:1}
#camfocus{position:absolute;z-index:6;width:76px;height:76px;margin:-38px 0 0 -38px;
  border:1.5px solid rgba(255,255,255,.95);border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 18px rgba(0,0,0,.35)}
#camfocus.go{animation:focusPop .7s cubic-bezier(.2,.8,.3,1)}
@keyframes focusPop{0%{opacity:0;transform:scale(1.5)}25%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(.94)}}
#camzoom{position:absolute;top:calc(env(safe-area-inset-top) + 70px);left:50%;
  transform:translateX(-50%);z-index:6;padding:5px 12px;border-radius:100px;
  background:rgba(10,7,9,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .25s;pointer-events:none}
#camzoom.on{opacity:1}
#camshot.snapin{animation:snapin .38s cubic-bezier(.2,.9,.3,1)}
@keyframes snapin{from{transform:scale(1.045);opacity:.72}to{transform:none;opacity:1}}
#camflashfx{position:absolute;inset:0;z-index:8;pointer-events:none;background:#fff;opacity:0}
#camflashfx.burst{animation:flashBurst .5s ease-out forwards}
@keyframes flashBurst{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
#camflashfx.snapfx{animation:snapFx .24s ease-out forwards}
@keyframes snapFx{0%{opacity:0}30%{opacity:.16}100%{opacity:0}}
#camflashfx.ring{background:radial-gradient(ellipse at center,transparent 44%,rgba(255,255,255,.95) 100%);
  opacity:1;transition:opacity .3s ease}
/* ── habillage : obturateur vivant, enregistrement qui pulse ── */
html:not(.noanim) #shut:active{transform:scale(.92)}
#shut.rec{box-shadow:0 0 0 4px rgba(232,70,90,.35),0 0 30px rgba(232,70,90,.6)}
html:not(.noanim) #shut.rec{animation:rec-pulse 1.15s ease-in-out infinite alternate}
@keyframes rec-pulse{from{box-shadow:0 0 0 4px rgba(232,70,90,.3),0 0 22px rgba(232,70,90,.45)}
  to{box-shadow:0 0 0 6px rgba(232,70,90,.5),0 0 40px rgba(232,70,90,.75)}}
#camv::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.32) 100%)}
.vnav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(6px)}
.vwm{position:absolute;left:auto;right:14px;bottom:calc(env(safe-area-inset-bottom) + 10px);
  text-align:right;z-index:4;font-size:12px;letter-spacing:.14em;
  color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.85);pointer-events:none}
/* ═══ MATIÈRE — un vrai site respire : grain analogique très léger sur toute
   la surface, typographie d'affichage resserrée, cartes à profondeur douce,
   boutons qui répondent au doigt. Tout passe par les variables : la
   personnalisation de l'admin reste maîtresse des couleurs. ═══ */
body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;mix-blend-mode:soft-light}
h1,h2,.welp-t,.sec-h h2{letter-spacing:-.012em}
.sec-h p,.hint{max-width:62ch}
button,.b-sm,.b-ghost,.b-grad,.icn,.rc{transition:transform .12s var(--e),opacity .2s,background .25s,border-color .25s}
button:active,.b-sm:active,.b-ghost:active,.b-grad:active,.icn:active,.rc:active{transform:scale(.975)}
.crc,.bankrow,.annr,.cv{box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 10px 30px -22px rgba(0,0,0,.9)}
.obdots{display:flex;gap:7px;justify-content:center;margin-bottom:22px}
.obdot{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:.3s var(--e)}
.obdot.on{background:var(--rose);width:20px;border-radius:3px}
.obl{display:grid;gap:9px;margin-top:16px}
.obc{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border-radius:16px;
  border:1px solid var(--line);background:var(--surf);text-align:left}
.obc.on{border-color:rgba(var(--rose-rgb),.45);background:rgba(var(--rose-rgb),.07)}
.obav{width:42px;height:42px;border-radius:50%;flex:none;background:var(--noir);background-size:cover;
  background-position:center;display:flex;align-items:center;justify-content:center;
  font-family:var(--dsp);font-size:18px;color:var(--cream)}
.obn{flex:1;min-width:0}
.obn b{display:block;font-size:14px;font-weight:600;color:var(--cream)}
.obn small{display:block;font-size:11.5px;color:var(--mute)}
.obk{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--mute)}
.obc.on .obk{border-color:transparent;background:var(--grad);color:#1a0d14;font-weight:700}
/* ═══ APPARENCE PILOTÉE — chaque règle lit une variable réglable dans
   Studio ▸ Le site ▸ Apparence. Les valeurs par défaut reproduisent
   exactement le rendu actuel : rien ne bouge tant que rien n'est touché. ═══ */
html{font-size:var(--fs,16px)}
body{letter-spacing:var(--tr,0)}
.wrap{padding-left:var(--pad,16px);padding-right:var(--pad,16px)}
.b-grad,.b-ghost,.b-sm,.rc,.kchip{border-radius:var(--btnr,100px)}
.crc,.gft,.gcard,.bankrow,.annr,.cv,.mdl,.f input,.f textarea,.f select,.obc{border-radius:var(--r,16px)}
body::after{opacity:var(--grain,.045)}
html.flat .crc,html.flat .gft,html.flat .bankrow,html.flat .annr,html.flat .cv{box-shadow:none}
html.noanim *,html.noanim *::before,html.noanim *::after{
  animation-duration:.001ms!important;transition-duration:.001ms!important}
.gft{border:1px solid var(--line);border-radius:18px;padding:15px 16px;margin-bottom:12px;background:var(--surf)}
.gft.done{border-color:rgba(127,207,166,.35)}
.gft-h{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px}
.gft-h b{font-size:14.5px;font-weight:600;color:var(--cream)}
.gft-d{font-size:12.5px;color:var(--mute);line-height:1.55;margin-bottom:9px}
.lkr{width:100%;-webkit-appearance:none;appearance:none;height:26px;background:none}
.lkr::-webkit-slider-runnable-track{height:5px;border-radius:100px;background:var(--surf-2)}
.lkr::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--grad);margin-top:-7.5px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.lkr::-moz-range-track{height:5px;border-radius:100px;background:var(--surf-2)}
.lkr::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--rose)}
.pvc{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surf);
  margin-bottom:16px}
.pvc-m{position:relative;aspect-ratio:4/5;background:var(--surf-2)}
.pvc-m img,.pvc-m video{width:100%;height:100%;object-fit:cover;display:block}
.pvc-b{padding:14px 15px 15px}
.pvc-t{font-size:13.5px;color:var(--cream);line-height:1.55;margin-bottom:11px}
.pvc-d{margin-left:auto;font-size:11px;color:var(--mute);align-self:center}
.gft-m{position:relative;border-radius:14px;overflow:hidden;margin-bottom:11px;
  aspect-ratio:16/10;background:var(--surf-2)}
.gft-m img,.gft-m video{width:100%;height:100%;object-fit:cover}
.gft-lock{position:absolute;left:0;right:0;bottom:0;padding:8px 11px;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.gft-r{display:flex;gap:9px;margin:0 0 11px}
.rbtn{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:100px;
  border:1px solid var(--line-2);background:var(--surf-2);color:var(--mute);
  font-size:12px;font-variant-numeric:tabular-nums}
.rbtn svg{width:15px;height:15px}
.rbtn.on{color:var(--rose);border-color:rgba(var(--rose-rgb),.45);background:rgba(var(--rose-rgb),.10)}
.cmlist{max-height:46vh;overflow:auto}
.cmrow{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.cmrow>div{flex:1;min-width:0}
.cmrow b{font-size:13px;color:var(--cream);margin-right:7px}
.cmrow span{font-size:11px;color:var(--mute)}
.cmrow p{font-size:13px;color:var(--cream);line-height:1.5;margin-top:4px;word-break:break-word}
.gbar{height:7px;border-radius:100px;background:var(--surf-2);overflow:hidden;margin-bottom:7px}
.gbar>i{display:block;height:100%;border-radius:100px;background:var(--grad);transition:width .6s var(--e)}
.gft-n{font-size:11.5px;color:var(--gold);font-variant-numeric:tabular-nums;margin-bottom:11px}
.gft-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wheelw{position:relative;width:min(260px,72vw);aspect-ratio:1;margin:8px auto 18px}
.wheel{position:absolute;inset:0;border-radius:50%;border:2px solid var(--line-2);
  box-shadow:0 18px 50px -24px #000, 0 0 0 8px rgba(255,255,255,.02) inset;
  transition:transform 4s cubic-bezier(.13,.72,.09,1)}
.wheelp{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:2;
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:15px solid var(--rose);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.rpage{position:relative;padding-bottom:26px}
.vkanji{position:absolute;left:10px;top:104px;writing-mode:vertical-rl;z-index:1;
  font-family:var(--dsp);font-size:19px;letter-spacing:.42em;color:rgba(255,255,255,.16)}
.roue-h{padding:24px var(--pad,16px) 8px;text-align:center;position:relative;z-index:1}
.roue-k{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px}
.rpage .wheelw{display:flex;justify-content:center;align-items:center;padding:18px 0 6px;
  position:relative;margin-top:34px}
.rpage .wheelw::before{content:'';position:absolute;inset:-52px;z-index:-1;pointer-events:none;
  border-radius:50%;
  background:repeating-conic-gradient(rgba(var(--gold-rgb),.22) 0deg 3deg,transparent 3deg 18deg);
  -webkit-mask:radial-gradient(circle,transparent 32%,#000 56%,transparent 76%);
  mask:radial-gradient(circle,transparent 32%,#000 56%,transparent 76%)}
.rpage .wheelw::after{content:'';position:absolute;inset:-30px;z-index:-1;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--gold-rgb),.24),transparent 68%)}
html:not(.noanim) .rpage .wheelw::before{animation:ray-spin 24s linear infinite}
html:not(.noanim) .rpage .wheelw::after{animation:bloom-breathe 3.2s ease-in-out infinite alternate}
@keyframes ray-spin{to{transform:rotate(360deg)}}
@keyframes bloom-breathe{from{opacity:.65;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}
.rpage .wheel{width:min(320px,82vw);height:min(320px,82vw)}
.rpage .wstage{width:min(320px,82vw);height:min(320px,82vw)}
#wheel3d{position:absolute;inset:-40px;z-index:5;display:none;touch-action:none}
.wheelw.rw-on #wheel3d{display:block}
.wheelw.rw-on .wstage{display:none}
/* révélation du lot en gros plan */
#wbig{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(6,2,14,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wbig-in{position:relative;width:min(400px,92vw);max-height:86vh;overflow:auto;text-align:center;
  background:var(--surf);border:1px solid var(--line-2);border-radius:22px;padding:20px 18px 22px;
  box-shadow:0 30px 70px -30px #000}
html:not(.noanim) .wbig-in{animation:wbig-pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes wbig-pop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}
.wbig-x{position:absolute;top:10px;right:10px}
.wbig-m{position:relative;border-radius:16px;overflow:hidden;margin:6px 0 14px;background:var(--noir-2)}
.wbig-m img{display:block;width:100%;max-height:52vh;object-fit:cover}
.wbig-th{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
.wbig-th span{width:58px;height:58px;border-radius:12px;overflow:hidden;background:var(--noir-2);
  box-shadow:0 0 0 1px var(--line-2)}
.wbig-th img{width:100%;height:100%;object-fit:cover;display:block}
.wbig-th .ph{display:grid;place-items:center;font-family:var(--dsp);font-size:22px;
  color:rgba(var(--gold-rgb),.55)}
.wbig-ph{display:grid;place-items:center;height:200px;font-family:var(--dsp);font-size:52px;
  color:rgba(var(--gold-rgb),.6)}
.wbig-t{display:block;font-family:var(--dsp);font-size:23px;color:var(--cream);margin-bottom:6px}
.wbig-in .b-grad,.wbig-in .b-ghost{width:100%}
.wbig-in.rare .wbig-m{box-shadow:0 0 0 2px rgba(var(--gold-rgb),.8),0 0 34px -6px rgba(var(--gold-rgb),.7)}
.wlab{position:absolute;inset:0;pointer-events:none}
.wlab i{position:absolute;left:50%;top:7%;transform:translateX(-50%);font-style:normal;
  font-size:12.5px;font-weight:700;color:#33203C;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
.segrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0 18px}
.segchip{padding:7px 14px;border-radius:100px;background:var(--sc,#F26D7D);color:#33203C;
  font-size:12.5px;font-weight:700;box-shadow:0 4px 12px -6px rgba(0,0,0,.8)}
.b-lancer{display:block;width:100%;padding:17px;border-radius:100px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#F0566A,#D42B44);color:#FFF4E8;
  font-family:var(--dsp);font-size:19px;letter-spacing:.06em;
  border:2px solid rgba(var(--gold-rgb),.75);
  box-shadow:0 .09em 0 rgba(120,20,34,.9),0 14px 30px -12px rgba(212,43,68,.8);
  text-shadow:0 2px 0 rgba(120,20,34,.55)}
.b-lancer::after{content:'';position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  left:-45%}
html:not(.noanim) .b-lancer::after{animation:lancer-sheen 2.8s ease-in-out infinite}
@keyframes lancer-sheen{0%{left:-45%}55%,100%{left:115%}}
html:not(.noanim) .b-lancer:active{transform:translateY(2px) scale(.99)}
.b-lancer span{opacity:.75;font-size:15px;margin-left:6px}

/* ═══ TYPOGRAPHIE — le premier levier de qualité perçue : des titres dont les
   lignes s'équilibrent, des paragraphes sans mot orphelin, des chiffres qui
   s'alignent, une ponctuation qui déborde proprement. Enrichissement
   progressif : les navigateurs anciens retombent sur le rendu normal. ═══ */
h1,h2,h3,.home-t,.welp-t,.wrt,.sec-h h2,.crc-n,.pvc-t b,.mdl-top h2,.roue-k{
  text-wrap:balance}
p,.bio,.home-s,.sec-h p,.hint,.crc-bio,.pvc-t,.cmrow p,.becc span{
  text-wrap:pretty;hanging-punctuation:first allow-end}
.home-t,.welp-t,.porte-mark{letter-spacing:-.018em;line-height:1.02}
.sec-h h2{letter-spacing:-.008em}
.home-s,.sec-h p,.crc-bio,.pvc-t{line-height:1.62}
.hint,.cmrow span{line-height:1.55}
b,strong,.gft-n,.stt b,.segchip,.rbtn,.bdg,.cnt,.price,.eur{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.home-k,.roue-k,.eyb,.gtag{font-feature-settings:"case" 1}
/* les majuscules espacées ne collent plus à leur bord droit */
.home-k,.eyb{padding-right:.32em}

/* ═══ RYTHME — une seule échelle d'espacement pour tout le site : c'est ce qui
   fait qu'un écran « respire » au lieu de sembler bricolé. ═══ */
:root{--sp1:6px;--sp2:10px;--sp3:16px;--sp4:24px;--sp5:34px;--sp6:48px}
.sec-h{margin-bottom:var(--sp3)}
.sec-h+*{margin-top:0}
.view>.wrap>*+*{margin-top:var(--sp3)}
.crg{gap:var(--sp4)}
.segrow{margin:var(--sp3) 0 var(--sp4)}
.home-h{padding-bottom:var(--sp4)}

/* ═══ TRANSITIONS NATIVES — le navigateur anime le changement d'écran ═══ */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vt-in .34s cubic-bezier(0,0,.2,1) both}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px) scale(.995)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px) scale(.995)}}
.topbar{view-transition-name:pd-top}
.tabbar{view-transition-name:pd-bar}

/* la scène de profil se pose aussi en grand sur la vitrine */
.vfx{position:absolute;left:0;right:0;top:0;height:190px;pointer-events:none;z-index:0;
  border-radius:0 0 26px 26px;overflow:hidden}
.vfx::before{content:'';position:absolute;inset:0}
.cover{position:relative}

/* ═══ EFFETS DE PROFIL — une scène animée qui déborde de la couverture,
   comme les effets de profil qu'on collectionne ailleurs. Cinq ambiances :
   quatre vivantes, une entièrement statique. ══════════════════════════════ */
.pfx{position:relative;isolation:isolate}
.pfx .crc-cov{position:relative;overflow:visible}
.pfx .crc-cov::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none}

/* 池 étang de koï — l'eau ondule, les nénuphars flottent */
.pfx-etang .crc-cov::before{
  background:
    radial-gradient(60% 26% at 22% 88%,rgba(105,210,198,.5),transparent 70%),
    radial-gradient(46% 20% at 74% 94%,rgba(80,170,220,.45),transparent 70%),
    repeating-linear-gradient(100deg,rgba(255,255,255,.10) 0 2px,transparent 2px 14px);
  mask-image:linear-gradient(0deg,#000 0 42%,transparent 76%)}
html:not(.noanim) .pfx-etang .crc-cov::before{animation:pfx-wave 7s ease-in-out infinite alternate}
@keyframes pfx-wave{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 0,30px 0}}

/* 花吹雪 pluie de pétales */
.pfx-petales .crc-cov::before{
  background:
    radial-gradient(circle at 18% 22%,rgba(240,168,200,.9) 0 3px,transparent 4px),
    radial-gradient(circle at 62% 12%,rgba(240,168,200,.75) 0 2.5px,transparent 4px),
    radial-gradient(circle at 84% 44%,rgba(247,220,232,.85) 0 3px,transparent 4px),
    radial-gradient(circle at 38% 66%,rgba(240,168,200,.7) 0 2px,transparent 4px),
    radial-gradient(circle at 72% 78%,rgba(247,220,232,.8) 0 2.5px,transparent 4px)}
html:not(.noanim) .pfx-petales .crc-cov::before{animation:pfx-fall 9s linear infinite}
@keyframes pfx-fall{from{transform:translateY(-14%) rotate(0)}to{transform:translateY(14%) rotate(6deg)}}

/* 灯籠流し lanternes flottantes */
.pfx-toro .crc-cov::before{
  background:
    radial-gradient(circle at 26% 74%,rgba(242,200,100,.95) 0 4px,rgba(242,200,100,.25) 5px 12px,transparent 13px),
    radial-gradient(circle at 58% 58%,rgba(237,69,88,.9) 0 3.5px,rgba(237,69,88,.22) 5px 11px,transparent 12px),
    radial-gradient(circle at 82% 80%,rgba(242,200,100,.8) 0 3px,rgba(242,200,100,.2) 4px 10px,transparent 11px)}
html:not(.noanim) .pfx-toro .crc-cov::before{animation:pfx-rise 11s ease-in-out infinite alternate}
@keyframes pfx-rise{from{transform:translateY(8%)}to{transform:translateY(-8%)}}

/* 花火 feux d'artifice */
.pfx-hanabi .crc-cov::before{
  background:
    repeating-conic-gradient(from 0deg at 30% 34%,rgba(242,200,100,.55) 0 2deg,transparent 2deg 16deg),
    repeating-conic-gradient(from 8deg at 74% 24%,rgba(237,69,88,.45) 0 2deg,transparent 2deg 18deg);
  mask-image:radial-gradient(46% 46% at 30% 34%,#000,transparent 70%),
    radial-gradient(38% 38% at 74% 24%,#000,transparent 70%);
  mask-composite:add;-webkit-mask-composite:source-over}
html:not(.noanim) .pfx-hanabi .crc-cov::before{animation:pfx-pop 3.6s ease-out infinite}
@keyframes pfx-pop{0%{opacity:0;transform:scale(.6)}18%{opacity:1}70%{opacity:.5}100%{opacity:0;transform:scale(1.18)}}

/* 墨 encre et brume — entièrement statique, pour qui préfère le calme */
.pfx-encre .crc-cov::before{
  background:
    radial-gradient(70% 40% at 50% 8%,rgba(0,0,0,.55),transparent 72%),
    linear-gradient(160deg,rgba(247,239,230,.14),transparent 46%),
    repeating-linear-gradient(88deg,rgba(255,255,255,.06) 0 1px,transparent 1px 22px)}

/* deux parures de plus : dragon (statique) et vague */
.deco-ryu .avd{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23F2C864' stroke-width='2.4' opacity='.95'><path d='M40 4c14 0 26 10 30 24-8-6-16-4-18 4 8 2 12 8 10 16-6-8-14-8-18 0-4-8-12-8-18 0-2-8 2-14 10-16-2-8-10-10-18-4C14 14 26 4 40 4z'/></g><circle cx='31' cy='24' r='2.4' fill='%23ED4558'/><circle cx='49' cy='24' r='2.4' fill='%23ED4558'/></svg>")}
.deco-nami .avd{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%2369D2C6' stroke-width='2.6' opacity='.9'><circle cx='40' cy='40' r='36' stroke-dasharray='3 7'/><path d='M10 52c8-8 14-8 22 0s14 8 22 0 12-8 16-4'/></g></svg>")}
html:not(.noanim) .deco-nami .avd{animation:deco-turn 18s linear infinite}

/* ═══ OMIKUJI · FUROSHIKI · KUMIKO · HANABI ══════════════════════════════ */
/* OMIKUJI おみくじ — la bande de papier qu'on tire au sanctuaire : elle se
   déroule du haut, en-tête rouge, papier crème. */
.omik{position:relative;margin:6px auto 0;max-width:230px;padding:22px 14px 16px;
  border-radius:4px;background:linear-gradient(180deg,#F8F1E4,#EFE3D0);
  box-shadow:0 12px 26px -14px #000,inset 0 -3px 10px rgba(0,0,0,.08);
  transform-origin:50% 0}
html:not(.noanim) .omik{animation:omk-roll .6s cubic-bezier(.2,.9,.25,1) both}
@keyframes omk-roll{from{opacity:0;transform:scaleY(.06)}to{opacity:1;transform:none}}
.omik-h{position:absolute;top:0;left:0;right:0;height:14px;border-radius:4px 4px 0 0;
  background:#C22233;color:#F8F1E4;font-size:8px;letter-spacing:.32em;
  display:flex;align-items:center;justify-content:center}
.omik .wrt{color:#2A1620;text-shadow:none}
.omik .hanko{box-shadow:none}

/* FUROSHIKI 風呂敷 — le tissu noué qui emballe un cadeau : il couvre l'aperçu
   verrouillé, avec son nœud au centre. */
html.th-asia .gft-lock{background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)}
html.th-asia .gft-m::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(var(--rose-rgb),.16) 0 9px,transparent 9px 18px),
    linear-gradient(180deg,rgba(var(--rose-rgb),.10),rgba(0,0,0,.24))}
html.th-asia .gft-m::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;z-index:2;pointer-events:none;border-radius:50% 6px 50% 6px;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.85),rgba(var(--rose-rgb),.7));
  box-shadow:0 6px 14px -6px #000}

/* KUMIKO 組子 — le treillis de bois assemblé sans clou : il borde les fenêtres */
html.th-asia .mdl{border-top:1px solid rgba(var(--gold-rgb),.35)}
html.th-asia .mdl::after{content:'';position:absolute;top:0;left:0;right:0;height:9px;
  pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(var(--gold-rgb),.6) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(60deg,rgba(var(--gold-rgb),.35) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(-60deg,rgba(var(--gold-rgb),.35) 0 1px,transparent 1px 16px)}

/* HANABI 花火 — trois gerbes qui s'ouvrent en corolle et retombent */
#hnb{position:fixed;inset:0;z-index:97;pointer-events:none;overflow:hidden}
.hnb-g{position:absolute;width:0;height:0}
.hnb-g i{position:absolute;width:4px;height:4px;border-radius:50%;
  transform:rotate(var(--a)) translateY(0);
  animation:hnb-burst 1.5s cubic-bezier(.15,.85,.3,1) both}
@keyframes hnb-burst{
  0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}
  14%{opacity:1}
  70%{opacity:1;transform:rotate(var(--a)) translateY(-88px) scale(1)}
  100%{opacity:0;transform:rotate(var(--a)) translateY(-104px) scale(.5)}}

/* ═══ DARUMA · OFUDA · MANEKI-NEKO ════════════════════════════════════════ */
/* DARUMA 達磨 — on lui peint un œil en formulant le vœu, le second quand il
   se réalise. Ici : il se colore à mesure que l'objectif approche, et son
   second œil s'ouvre à 100 %. */
.grow2{display:flex;align-items:center;gap:11px}
.grow2 .gbar{flex:1}
.daruma{position:relative;width:34px;height:38px;flex:none;border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--surf-2) 80%,#000) 0 calc(100% - var(--dp,0%)),
    var(--rose) calc(100% - var(--dp,0%)) 100%);
  border:1px solid rgba(var(--gold-rgb),.4);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.35),0 4px 10px -6px #000;
  transition:background .6s var(--e)}
.daruma::before,.daruma::after{content:'';position:absolute;top:13px;width:7px;height:9px;
  border-radius:50%;background:#F7EFE6}
.daruma::before{left:6px}
.daruma::after{right:6px;background:rgba(247,239,230,.22)}
.daruma.done::after{background:#F7EFE6}
html.th-asia .daruma{border-color:rgba(var(--gold-rgb),.65)}

/* OFUDA 御札 — les paliers d'abonnement prennent la forme des talismans de
   sanctuaire : bande verticale, sommet taillé, liseré d'or. */
html.th-asia .tc{clip-path:polygon(0 14px,50% 0,100% 14px,100% 100%,0 100%);
  padding-top:26px;border-top:0;
  background-image:linear-gradient(180deg,rgba(var(--gold-rgb),.10),transparent 30%)}
html.th-asia .tc::after{content:'\u5FA1\u672D';position:absolute;top:16px;left:50%;
  transform:translateX(-50%);font-size:9px;letter-spacing:.28em;
  color:rgba(var(--gold-rgb),.55);pointer-events:none}
html.th-asia .tc.hero{box-shadow:0 0 0 1px rgba(var(--gold-rgb),.35),
  0 18px 40px -20px rgba(var(--rose-rgb),.6)}

/* MANEKI-NEKO — il monte du coin, salue trois fois, repart */
#maneki{position:fixed;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));
  width:104px;height:114px;z-index:95;pointer-events:none}
.mnk{width:100%;height:100%;animation:mnk-in 4.2s cubic-bezier(.2,.9,.25,1) both}
.mnk svg{width:100%;height:100%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
.mnk-paw{transform-origin:96px 84px;animation:mnk-wave .62s ease-in-out 3 alternate}
@keyframes mnk-in{
  0%{opacity:0;transform:translateY(60px) scale(.8)}
  12%{opacity:1;transform:none}
  82%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(50px) scale(.9)}}
@keyframes mnk-wave{from{transform:rotate(-4deg)}to{transform:rotate(-34deg)}}

/* le kanji de l'onglet actif bascule en 3D à chaque changement */
html.th-asia:not(.noanim) .tb.on .jp{animation:jp-flip .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes jp-flip{
  from{opacity:0;transform:rotateX(-90deg) translateY(-4px)}
  to{opacity:1;transform:none}}

/* ═══ ARTISANAT 和 — cinq gestes traditionnels, actifs seulement en thème Asie :
   NOREN 暖簾 le rideau de boutique en tête de section · KINTSUGI 金継ぎ la veine
   d'or qui répare au lieu de cacher · KASUMI 霞 les bandes de brume des
   paravents · EMA 絵馬 les plaquettes de vœux pour les avis · TORII ⛩ la porte
   du sanctuaire en pied de page. ══════════════════════════════════════════ */

/* NOREN — un rideau court, fendu, suspendu au-dessus de chaque intertitre */
html.th-asia .sec-h{position:relative;padding-top:20px}
html.th-asia .sec-h::before{content:'';position:absolute;top:0;left:0;width:88px;height:13px;
  border-radius:0 0 3px 3px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--rose) 78%,var(--noir)) 0 13px,
      transparent 13px 16px),
    linear-gradient(180deg,rgba(var(--gold-rgb),.55),transparent 42%);
  box-shadow:0 3px 8px -4px rgba(0,0,0,.8)}

/* KINTSUGI — une veine d'or traverse la carte : la réparation devient l'ornement */
html.th-asia .gcard,html.th-asia .mdl,html.th-asia .pvc{position:relative}
html.th-asia .gcard::after,html.th-asia .pvc::after{
  background:
    linear-gradient(118deg,transparent 42%,rgba(255,255,255,.028) 50%,transparent 58%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 200 120' preserveAspectRatio='none'><path d='M0 88 L26 74 L22 58 L52 46 L48 30 L82 22 L104 6' fill='none' stroke='%23F2C864' stroke-width='1.5' opacity='.5'/><path d='M52 46 L70 54 L66 70' fill='none' stroke='%23F2C864' stroke-width='1' opacity='.35'/></svg>");
  background-repeat:no-repeat,no-repeat;
  background-position:center,left top;
  background-size:auto,58% auto}

/* KASUMI — les bandes de brume des paravents anciens, derrière le hero */
html.th-asia .home-h::before,html.th-asia .roue-h::before{content:'';position:absolute;
  inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.09) 30%,transparent 62%) 0 22% /100% 16px no-repeat,
    linear-gradient(90deg,transparent 18%,rgba(255,255,255,.055) 46%,transparent 78%) 0 44% /100% 12px no-repeat,
    linear-gradient(90deg,transparent 34%,rgba(var(--rose-rgb),.075) 60%,transparent) 0 68% /100% 14px no-repeat}
html.th-asia .home-h>*,html.th-asia .roue-h>*{position:relative;z-index:1}

/* EMA — les avis prennent la forme des plaquettes de vœux des sanctuaires */
html.th-asia .rv{
  clip-path:polygon(0 12px,50% 0,100% 12px,100% 100%,0 100%);
  padding-top:22px;
  border-top-color:rgba(var(--gold-rgb),.35)}
html.th-asia .rv::before{content:'';position:absolute;top:14px;left:50%;width:26px;height:2px;
  margin-left:-13px;border-radius:2px;background:rgba(var(--gold-rgb),.5)}

/* TORII — la porte du sanctuaire veille sur le pied de page */
html.th-asia .foot{position:relative}
html.th-asia .foot::before{content:'';position:absolute;top:10px;left:50%;width:64px;height:52px;
  margin-left:-32px;pointer-events:none;opacity:.32;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'><g stroke='%23ED4558' stroke-width='3.4' fill='none'><path d='M4 10h56'/><path d='M9 18h46'/><path d='M16 18v32M48 18v32'/></g><path d='M2 8h60l-4 5H6z' fill='%23ED4558'/></svg>")}

/* ═══ PARURES 和 — la sélection de motifs et les décorations de profil ═══ */
.wagg{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.wag{padding:9px 6px 8px;border-radius:14px;border:1px solid var(--line-2);
  background:var(--surf-2);display:flex;flex-direction:column;align-items:center;gap:5px}
.wag-p{width:100%;height:34px;border-radius:8px;background:var(--noir-2);
  background-image:var(--wp);background-size:34px auto;opacity:.5}
.wag b{font-size:13px;color:var(--cream);line-height:1}
.wag i{font-style:normal;font-size:9.5px;color:var(--mute);letter-spacing:.02em}
.wag.on{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.08)}
.wag.on .wag-p{opacity:.9}
.jpx{float:right;color:rgba(var(--gold-rgb),.6);font-size:12px}

/* décorations de profil — une parure animée autour de l'avatar */
.avw{position:relative;flex:none;width:52px;height:52px}
.avd{position:absolute;inset:-13px;pointer-events:none;background-repeat:no-repeat;
  background-size:contain;background-position:center}
html:not(.noanim) .deco-koi .avd{animation:deco-swim 6s linear infinite}
html:not(.noanim) .deco-sakura .avd{animation:deco-turn 14s linear infinite}
html:not(.noanim) .deco-tsuru .avd{animation:deco-float 3.4s ease-in-out infinite alternate}
html:not(.noanim) .deco-kitsune .avd{animation:deco-pulse 2.8s ease-in-out infinite alternate}
@keyframes deco-swim{to{transform:rotate(360deg)}}
@keyframes deco-turn{to{transform:rotate(-360deg)}}
@keyframes deco-float{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@keyframes deco-pulse{from{filter:drop-shadow(0 0 3px rgba(var(--rose-rgb),.4))}
  to{filter:drop-shadow(0 0 11px rgba(var(--gold-rgb),.75))}}
.deco-koi .avd{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23F2C864' stroke-width='2' opacity='.9'><circle cx='40' cy='40' r='34' stroke-dasharray='5 9'/></g><g transform='translate(40,6)'><path d='M0 0c7 3 11 8 11 14 0 5-5 9-11 9s-11-4-11-9c0-6 4-11 11-14z' fill='%23ED4558' opacity='.95'/><circle cx='-3' cy='9' r='1.7' fill='%23231327'/></g></svg>")}
.deco-sakura .avd{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='%23F0A8C8' opacity='.9'><path d='M40 2c4 5 4 9 0 13-4-4-4-8 0-13z'/><path d='M78 40c-5 4-9 4-13 0 4-4 8-4 13 0z'/><path d='M40 78c-4-5-4-9 0-13 4 4 4 8 0 13z'/><path d='M2 40c5-4 9-4 13 0-4 4-8 4-13 0z'/><path d='M67 13c-1 6-4 9-9 9 1-6 4-8 9-9z'/><path d='M13 67c1-6 4-9 9-9-1 6-4 8-9 9z'/></g></svg>")}
.deco-tsuru .avd{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23F7EFE6' stroke-width='2.2' opacity='.9'><path d='M14 26c10-9 22-9 30-2'/><path d='M66 26c-10-9-22-9-30-2'/><path d='M40 8v6'/></g><circle cx='40' cy='6' r='3' fill='%23ED4558'/></svg>")}
.deco-kitsune .avd{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g transform='translate(40,9)'><path d='M-13 0l4-9 5 5h8l5-5 4 9c0 8-6 13-13 13S-13 8-13 0z' fill='%23F7EFE6' opacity='.95'/><path d='M-7 2h5M2 2h5' stroke='%23ED4558' stroke-width='2'/><path d='M-3 8h6' stroke='%23ED4558' stroke-width='1.6'/></g></svg>")}

/* ═══ AURA & MICRO-INTERACTIONS ═══════════════════════════════════════════ */
.crc,.pvc,.gft,.gcard{
  box-shadow:
    0 1px 0 rgba(255,255,255,calc(.03 + var(--rel,5) * .006)) inset,
    0 calc(2px + var(--rel,5) * .6px) calc(10px + var(--rel,5) * 3px) calc(-6px - var(--rel,5) * .6px) rgba(0,0,0,.85),
    0 calc(12px + var(--rel,5) * 2px) calc(34px + var(--rel,5) * 6px) -20px rgba(var(--aura,0,0,0),.55),
    0 calc(10px + var(--rel,5) * 2px) calc(30px + var(--rel,5) * 6px) calc(-18px - var(--rel,5) * 1px) rgba(0,0,0,.7)}
.crc-cov::after,.pvc-m::after{content:'';position:absolute;inset:auto 0 -18px 0;height:44px;
  pointer-events:none;filter:blur(18px);opacity:.5;
  background:radial-gradient(60% 100% at 50% 0%,rgba(var(--aura,0,0,0),.85),transparent 70%)}
.b-grad,.b-sm,.b-ghost,.crc,.pvc,.rc,.tb,.rbtn,.segchip{
  transition:transform .34s cubic-bezier(.34,1.4,.64,1),
    box-shadow .28s var(--e),border-color .24s var(--e),background .24s var(--e)}
html:not(.noanim) .b-sm:active,html:not(.noanim) .rc:active,
html:not(.noanim) .rbtn:active{transform:scale(.94)}
html:not(.noanim) .tb:active{transform:scale(.9)}
.cover-in img,.crc-cov img{will-change:transform}

/* ═══ MATIÈRE — ce qui distingue une interface « propre » d'une interface
   désirable : des surfaces qui ont un grain, une arête qui capte la lumière,
   des images qui arrivent au lieu d'apparaître, des teintes mélangées dans un
   espace perceptuel (OKLab) pour ne jamais virer au gris sale. ═══════════ */

/* 1 · les surfaces gagnent une profondeur interne (dégradé + arête haute) */
.crc,.pvc,.gft,.gcard,.bkc,.mdl,.becc,.subhint{
  background-image:linear-gradient(174deg,
    color-mix(in oklab,var(--cream) 5%,transparent),
    transparent 42%)}
.crc,.pvc,.gft,.gcard,.mdl{
  border-color:color-mix(in oklab,var(--line-2) 62%,transparent)}

/* 2 · les images se révèlent : montée douce + net à l'arrivée */
img,video{background:color-mix(in oklab,var(--surf-2) 88%,#000)}
html:not(.noanim) .crc-cov img,html:not(.noanim) .pvc-m img,
html:not(.noanim) .gft-m img,html:not(.noanim) .cover-in img{
  animation:img-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes img-in{
  from{opacity:0;transform:scale(1.035);filter:saturate(.7) blur(6px)}
  to{opacity:1;transform:none;filter:none}}

/* 3 · les teintes bonbon se mélangent proprement au fond */
.segchip{background:color-mix(in oklab,var(--sc,#F26D7D) 88%,var(--noir))}
.gfil .rc.on{background:color-mix(in oklab,var(--cc,#F26D7D) 90%,var(--noir))}
.gtag{background:color-mix(in oklab,currentColor 12%,transparent)}

/* 4 · les champs de saisie deviennent des objets, pas des trous */
input,textarea,select{
  background:color-mix(in oklab,var(--surf-2) 82%,#000);
  border:1px solid color-mix(in oklab,var(--line-2) 70%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--cream) 6%,transparent),
    inset 0 -8px 16px -12px #000;
  transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{
  border-color:rgba(var(--gold-rgb),.55);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--cream) 8%,transparent),
    0 0 0 3px rgba(var(--gold-rgb),.16)}
.home-q:focus-within{border-color:rgba(var(--gold-rgb),.5);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.14),0 10px 30px -20px #000}

/* 5 · séparateurs et vides : le soin des détails que personne ne remarque
   consciemment, mais que tout le monde ressent */
.empty{padding:34px 18px;text-align:center;color:var(--mute);font-size:13px;
  border:1px dashed color-mix(in oklab,var(--line-2) 55%,transparent);
  border-radius:18px;
  background:radial-gradient(120% 80% at 50% 0%,
    color-mix(in oklab,var(--rose) 7%,transparent),transparent 70%)}
hr,.sep{border:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* 6 · l'arête spéculaire suit la lumière du haut (plus fine, plus juste) */
.crc::before,.gft::before,.gcard::before,.mdl::before{
  background:linear-gradient(90deg,transparent,
    color-mix(in oklab,var(--cream) 22%,transparent),transparent)}

/* ═══ FESTIVE-100 — le langage de la page Roue s'étend à tout le site :
   pastilles bonbon, boutons épais de fête foraine, barres laquées
   arc-en-ciel, blocs qui arrivent en 3D. Dosé, jamais criard. ═══ */
.gfil .rc:nth-child(6n+2){--cc:#F26D7D}
.gfil .rc:nth-child(6n+3){--cc:#F6C86A}
.gfil .rc:nth-child(6n+4){--cc:#69D2C6}
.gfil .rc:nth-child(6n+5){--cc:#B48CF2}
.gfil .rc:nth-child(6n+0){--cc:#F2A0C4}
.gfil .rc:nth-child(6n+1){--cc:#8FD08A}
.gfil .rc{border-color:color-mix(in srgb,var(--cc,#F26D7D) 45%,transparent)}
.gfil .rc.on{background:var(--cc,#F26D7D);border-color:var(--cc,#F26D7D);color:#33203C;font-weight:700}
.crc-g .gtag:nth-child(5n+1){color:#F6C86A;border-color:rgba(246,200,106,.45)}
.crc-g .gtag:nth-child(5n+2){color:#F2A0C4;border-color:rgba(242,160,196,.45)}
.crc-g .gtag:nth-child(5n+3){color:#69D2C6;border-color:rgba(105,210,198,.45)}
.crc-g .gtag:nth-child(5n+4){color:#B48CF2;border-color:rgba(180,140,242,.45)}
.crc-g .gtag:nth-child(5n+0){color:#8FD08A;border-color:rgba(143,208,138,.45)}
.b-grad{border:2px solid rgba(var(--gold-rgb),.55);color:#FFF6EA;
  box-shadow:0 3px 0 rgba(60,10,22,.85),0 16px 34px -14px rgba(var(--rose-rgb),.7);
  text-shadow:0 1px 0 rgba(60,10,22,.45)}
html:not(.noanim) .b-grad:active{transform:translateY(3px) scale(.985);
  box-shadow:0 1px 0 rgba(60,10,22,.85),0 10px 24px -12px rgba(var(--rose-rgb),.6)}
.gbar{height:9px;border-radius:100px;background:rgba(255,255,255,.08)}
.gbar i{background:linear-gradient(90deg,#F26D7D,#F6C86A,#69D2C6,#B48CF2);
  box-shadow:0 0 12px rgba(246,200,106,.55);border-radius:100px}
.toast{border:1.5px solid rgba(var(--gold-rgb),.5);
  box-shadow:0 3px 0 rgba(0,0,0,.55),0 18px 40px -18px #000}
.bdg{box-shadow:0 2px 0 rgba(60,10,22,.8),0 0 10px rgba(var(--rose-rgb),.6)}
.tabbar .tb.on{color:var(--gold)}
@keyframes cout-rise{
  from{opacity:0;transform:translateY(14px) rotateX(7deg) scale(.985)}
  to{opacity:1;transform:none}}
.sec-h h2::after{background:linear-gradient(90deg,#F6C86A,#F2A0C4,transparent)}
body{position:relative}
#garland{position:absolute;left:0;right:0;top:56px;height:0;z-index:39;pointer-events:none}
.gb{position:absolute;width:7px;height:7px;border-radius:50%;background:#FFF0C8;
  box-shadow:0 0 9px 2px rgba(var(--gold-rgb),.7),0 0 3px rgba(255,255,255,.9)}
html:not(.noanim) .gb{animation:wb-tw 1.3s ease-in-out infinite alternate}
html.noanim .gb{opacity:.55}

html:not(.noanim) .b-lancer,html:not(.noanim) .home-h .b-grad{
  animation:btn-glow 2.6s ease-in-out infinite alternate}
@keyframes btn-glow{
  from{filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),.14))}
  to{filter:drop-shadow(0 0 16px rgba(var(--gold-rgb),.42))}}
.crc-av{position:relative}
.crc-av::after{content:'';position:absolute;inset:-3.5px;border-radius:50%;pointer-events:none;
  background:conic-gradient(#F26D7D,#F6C86A,#69D2C6,#B48CF2,#F2A0C4,#F26D7D);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.vkanji.home{position:absolute;top:12px;right:10px;left:auto;font-size:15px;
  letter-spacing:.34em;color:rgba(var(--gold-rgb),.35)}
.fxlayer .gbp{position:absolute;width:7px;height:7px;border-radius:50%;background:#FFF0C8;
  box-shadow:0 0 10px 2px rgba(var(--gold-rgb),.75),0 0 3px rgba(255,255,255,.9)}
html:not(.noanim) .fxlayer .gbp{animation:wb-tw 1.3s ease-in-out infinite alternate}
html.noanim .fxlayer .gbp{opacity:.55}
.b-ghost{border-color:rgba(var(--gold-rgb),.42);color:var(--cream)}
/* signature japonaise — seulement quand le thème est asiatique */
.jp{display:none;font-style:normal}
html.th-asia:not(.fx-off-kanji) .jp{display:block;position:absolute;top:3px;right:6px;
  font-size:8.5px;letter-spacing:.06em;line-height:1;
  color:rgba(var(--gold-rgb),.55);pointer-events:none}
.tabbar .tb{position:relative}
html.th-asia .topbar .mk::after{content:'\u796D';font-size:11px;vertical-align:super;
  margin-left:7px;color:rgba(var(--gold-rgb),.55);-webkit-text-fill-color:rgba(var(--gold-rgb),.55)}
html.th-asia:not(.noanim) .topbar .mk{animation:mk-neon 3s ease-in-out infinite alternate}
@keyframes mk-neon{
  from{filter:drop-shadow(0 0 4px rgba(var(--gold-rgb),.18))}
  to{filter:drop-shadow(0 0 13px rgba(var(--rose-rgb),.5))}}
/* transition d'écran v2 : glisse, léger volume, ressort doux */
html:not(.noanim) #screen.scr{animation:scr-in2 .4s cubic-bezier(.2,.8,.2,1)}
@keyframes scr-in2{
  from{opacity:0;transform:translateY(16px) scale(.99)}
  60%{opacity:1}
  to{opacity:1;transform:none}}
/* le balayage lumineux du hero — la lumière passe sur le titre */
.home-h{overflow:hidden}
.home-h::after{content:'';position:absolute;top:0;bottom:0;width:34%;left:-40%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,246,230,.10),transparent)}
html:not(.noanim) .home-h::after{animation:hero-sweep 5.6s ease-in-out infinite}
@keyframes hero-sweep{0%,55%{left:-40%}85%,100%{left:130%}}
.wblt{position:absolute;inset:-7px;pointer-events:none}
.wblt i{position:absolute;inset:0}
.wblt b{position:absolute;top:-3px;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:#FFF0C8;
  box-shadow:0 0 10px 2px rgba(var(--gold-rgb),.75),0 0 3px rgba(255,255,255,.9)}
html:not(.noanim) .wblt b{animation:wb-tw 1.1s ease-in-out infinite alternate}
@keyframes wb-tw{from{opacity:1}to{opacity:.35}}
#koifx{position:fixed;inset:0;z-index:94;pointer-events:none;overflow:hidden;
  perspective:900px}
.koiw{position:absolute;top:26%;left:-30%;width:200px;height:100px;
  animation:koi-x 3.4s cubic-bezier(.3,.1,.6,.9) forwards;transform-style:preserve-3d}
.koib{width:100%;height:100%;
  animation:koi-y 1.05s ease-in-out infinite alternate;transform-style:preserve-3d}
.koib svg{width:100%;height:100%;opacity:.38;
  filter:drop-shadow(0 0 14px rgba(242,200,100,.5)) drop-shadow(0 10px 20px rgba(0,0,0,.5))}
@keyframes koi-x{
  0%{left:-30%;transform:rotateY(14deg) rotateZ(-4deg)}
  55%{transform:rotateY(-8deg) rotateZ(3deg)}
  100%{left:112%;transform:rotateY(12deg) rotateZ(-3deg)}}
@keyframes koi-y{from{transform:translateY(-9px) rotateZ(-2.5deg)}
  to{transform:translateY(9px) rotateZ(2.5deg)}}
html.noanim .koiw{display:none}
#cfx{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:hidden}
.cft{position:absolute;top:-5vh;width:9px;height:14px;border-radius:3px;
  animation-name:cf-fall;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes cf-fall{to{transform:translateY(114vh) rotate(var(--cr,300deg))}}
html.noanim .cft{display:none}
.flip3d{perspective:820px;width:116px;height:146px;margin:0 auto 12px}
.f3i{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  animation:f3turn .95s cubic-bezier(.2,.75,.25,1) .15s both}
@keyframes f3turn{from{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}
html.noanim .f3i{animation:none;transform:rotateY(360deg)}
.f3b,.f3f{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -14px #000}
.f3b{transform:rotateY(180deg);background:
  radial-gradient(circle at 50% 36%,#2A1519,#170B0D 70%);
  border:1px solid rgba(var(--gold-rgb),.4);color:var(--gold);
  font-family:var(--dsp);font-size:34px}
.f3f{background:var(--surf-2);border:1px solid var(--line-2);overflow:hidden;
  color:var(--gold);font-size:30px}
.f3f img{width:100%;height:100%;object-fit:cover}
.hanko{writing-mode:vertical-rl;display:inline-block;vertical-align:middle;margin-right:12px;
  padding:10px 6px;border-radius:8px;background:#F6EFE4;color:#C22233;
  font-family:var(--dsp);font-size:19px;letter-spacing:.2em;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.7);transform:rotate(-4deg)}
.wres{text-align:center;min-height:70px}
.wrt{display:block;font-family:var(--dsp);font-size:24px;color:var(--cream);margin-bottom:6px}
html:not(.noanim) .omik .wrt{animation:wrt-stamp .5s cubic-bezier(.2,1.6,.4,1) .35s both}
@keyframes wrt-stamp{
  0%{opacity:0;transform:scale(2.4) rotate(-10deg)}
  70%{opacity:1;transform:scale(.94) rotate(1deg)}
  100%{opacity:1;transform:none}}
#decor{position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:calc(var(--motif,.04) * 7);overflow:hidden}
.fxlayer{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:calc(var(--motif,.04) * 7);overflow:hidden}
.fxp{position:absolute;top:-8vh;background-size:contain;background-repeat:no-repeat;
  background-image:var(--fx-glyph,none);
  will-change:transform;opacity:.92;
  filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.35))}
html:not(.noanim) .fxp.fall{animation-name:fx-fall;animation-timing-function:linear;
  animation-iteration-count:infinite}
html:not(.noanim) .fxp.rise{top:auto;bottom:-8vh;animation-name:fx-rise;
  animation-timing-function:linear;animation-iteration-count:infinite}
html.noanim .fxp{display:none}
@keyframes fx-fall{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(var(--dx,0),118vh,0) rotate(330deg)}}
@keyframes fx-rise{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.8}
  80%{opacity:.5}
  100%{transform:translate3d(var(--dx,0),-118vh,0) scale(.5);opacity:0}}
.fxc{position:absolute;top:0;width:104px;height:164px;background-size:contain;
  background-repeat:no-repeat;background-image:var(--fx-corner,none);
  opacity:.92;transform-origin:50% 0;
  filter:drop-shadow(0 0 16px rgba(232,64,79,.4)) drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.fxc.l{left:10px}
.fxc.r{right:10px;transform:scaleX(-1)}
html:not(.noanim) .fxc{animation:fx-sway 7s ease-in-out infinite alternate}
html:not(.noanim) .fxc.r{animation-name:fx-sway2}
@keyframes fx-sway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes fx-sway2{from{transform:scaleX(-1) rotate(2.4deg)}to{transform:scaleX(-1) rotate(-2.4deg)}}
/* la vue glisse en place à chaque changement d'onglet */
html:not(.noanim) #screen.scr{animation:scr-in .34s var(--e)}
@keyframes scr-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ═══ DÉCOR — un fond de vagues seigaiha, motif japonais traditionnel, posé
   très bas et fondu vers le centre : on le devine plus qu'on ne le voit. ═══ */
#app::after,#porte::after,#welp::after{content:'';position:absolute;inset:0;z-index:0;
  pointer-events:none;opacity:var(--motif,.04);
  background-image:var(--motif-img);background-repeat:repeat;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 40%,transparent 60%,rgba(0,0,0,.9));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 40%,transparent 60%,rgba(0,0,0,.9))}
#porte::after,#welp::after{opacity:calc(var(--motif,.04) * 1.4);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 30%,transparent 88%,rgba(0,0,0,.35));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 30%,transparent 88%,rgba(0,0,0,.35))}
#app::after{position:fixed;z-index:-1}
/* #porte et #welp restent EXACTEMENT ce qu'ils sont : des pages plein écran
   (position:fixed). Le décor se positionne contre eux sans jamais les changer. */
#porte>*:not(.fxlayer),#welp>*:not(.fxlayer){position:relative;z-index:2}
/* laque : une brillance oblique glisse sur les surfaces, comme sur un vernis */
.crc,.pvc,.gft,.gcard{overflow:hidden}
.crc::after,.pvc::after,.gft::after,.gcard::after{content:'';position:absolute;inset:0;
  pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,calc(.02 + var(--rel,5) * .006)) 50%,transparent 58%)}
/* filets d'or aux intertitres : le trait de pinceau */
.sec-h h2::after{content:'';display:block;width:34px;height:2px;margin-top:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* ═══ RELIEF — le site cesse d'être une feuille : les surfaces ont une épaisseur,
   les cartes s'inclinent sous le doigt, les fenêtres arrivent en volume et la
   roue repose sur sa table. Dosable au curseur « Relief » (--rel, 0 à 10). ═══ */
/* La perspective vit sur les GRILLES et les listes, jamais sur .view :
   posée sur le conteneur de page entier, elle promeut tout l'écran en couche
   composite (texte flou sur iOS, défilement qui saccade) et réancre les
   éléments fixes qu'elle contient. */
.crg,.bank-g,.cata-g,.gfts,.pvlist{perspective:calc(700px + var(--rel,5) * 120px);
  perspective-origin:50% 22%}
.crc,.pvc,.gft,.gcard,.bkc,.cv,.bankrow,.annr{
  box-shadow:
    0 1px 0 rgba(255,255,255,calc(.03 + var(--rel,5) * .006)) inset,
    0 calc(2px + var(--rel,5) * .6px) calc(10px + var(--rel,5) * 3px) calc(-6px - var(--rel,5) * .6px) rgba(0,0,0,.85),
    0 calc(10px + var(--rel,5) * 2px) calc(30px + var(--rel,5) * 6px) calc(-18px - var(--rel,5) * 1px) rgba(0,0,0,.7)}
html:not(.noanim) .crc:active,html:not(.noanim) .pvc:active,
html:not(.noanim) .gft:active,html:not(.noanim) .gcard:active,html:not(.noanim) .cv:active{
  transform:perspective(900px) rotateX(calc(var(--rel,5) * .34deg)) translateZ(calc(var(--rel,5) * -.8px)) scale(.988)}
/* les images des cartes reculent d'un plan : la bordure les surplombe */
.crc-cov,.pvc-m,.gft-m{transform:translateZ(calc(var(--rel,5) * -1px))}
/* les fenêtres arrivent en volume */
html:not(.noanim) .mdl{transform-origin:50% 0;
  animation:mdl-in .34s cubic-bezier(.2,.9,.24,1) both}
@keyframes mdl-in{
  from{opacity:0;transform:perspective(1000px) rotateX(calc(var(--rel,5) * .9deg)) translateY(22px) scale(.97)}
  to{opacity:1;transform:none}}
/* les boutons s'enfoncent vraiment */
.b-grad,.b-ghost,.b-sm{transform-style:preserve-3d}
html:not(.noanim) .b-grad:active{transform:translateY(calc(var(--rel,5) * .18px)) scale(.978)}
/* l'onglet actif se soulève */
.tabbar .tb.on svg,.tabbar .tb[aria-current] svg{
  transform:translateY(calc(var(--rel,5) * -.22px)) scale(calc(1 + var(--rel,5) * .006));
  filter:drop-shadow(0 calc(2px + var(--rel,5) * .4px) calc(4px + var(--rel,5) * .8px) rgba(var(--rose-rgb),.45))}
/* le grand titre prend de l'épaisseur */
.home-t,.welp-t,.wrt,.sec-h h2,.porte-mark{
  font-family:ui-rounded,'SF Pro Rounded','Hiragino Maru Gothic ProN','Arial Rounded MT Bold',var(--dsp);
  font-weight:800;letter-spacing:-.01em;
  text-shadow:
    0 .05em 0 rgba(var(--rose-rgb),.6),
    0 calc(6px + var(--rel,5) * 1px) calc(22px + var(--rel,5) * 3px) rgba(0,0,0,.55)}
/* la roue repose sur sa table */
.wheelw{perspective:1000px}
.wstage{position:relative;transform:rotateX(calc(var(--rel,5) * 2.1deg));
  transform-style:preserve-3d;transition:transform .5s var(--e)}
.wstage::before{content:'';position:absolute;inset:-9px;border-radius:50%;
  transform:translateZ(calc(var(--rel,5) * -2.4px));
  background:radial-gradient(circle at 50% 34%,#2A1519,#120809 68%);
  box-shadow:0 calc(14px + var(--rel,5) * 3px) calc(34px + var(--rel,5) * 6px) calc(-14px) #000}
.whub{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;transform:translateZ(calc(var(--rel,5) * 2.6px));
  background:radial-gradient(circle at 34% 30%,#FFF0C8,#EBC46A 42%,#8A6428 100%);
  box-shadow:0 0 0 3px rgba(90,47,54,.9),0 6px 16px -6px #000,
    inset 0 -4px 8px rgba(0,0,0,.35)}
html.noanim .wstage{transform:none}
.wheel{box-shadow:
  0 calc(10px + var(--rel,5) * 2px) calc(30px + var(--rel,5) * 5px) calc(-12px - var(--rel,5)) #000,
  0 0 0 calc(4px + var(--rel,5) * .6px) rgba(255,255,255,.03) inset}
/* l'avatar et la couverture se détachent */
.crc-av,.obav{box-shadow:0 calc(4px + var(--rel,5) * .8px) calc(14px + var(--rel,5) * 2px) calc(-6px) rgba(0,0,0,.9)}

/* ═══ COUTURE — ce qui fait qu'un site « claque » : de la lumière derrière la
   matière, du verre dépoli sur les barres, un filet de lumière sur l'arête des
   cartes, une ombre colorée sous l'action principale, et une entrée en scène. ═══ */
#app::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(64% 36% at 50% 24%, rgba(var(--gold-rgb),.11), transparent 72%),
    radial-gradient(120% 78% at 50% -12%, rgba(var(--rose-rgb),.17), transparent 62%),
    radial-gradient(95% 60% at 12% 108%, rgba(var(--gold-rgb),.09), transparent 58%),
    repeating-conic-gradient(from -8deg at 50% 16%,
      rgba(255,255,255,.032) 0deg 8deg, transparent 8deg 22deg)}
#app>*:not(.fxlayer){position:relative;z-index:1}
#porte::before,#welp::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 32% at 50% 6%, rgba(var(--gold-rgb),.16), transparent 74%),
    radial-gradient(110% 60% at 50% -14%, rgba(var(--rose-rgb),.15), transparent 64%),
    repeating-conic-gradient(from -8deg at 50% 4%,
      rgba(255,246,230,.06) 0deg 8deg, transparent 8deg 22deg)}
#screen,.topbar,.tabbar{position:relative;z-index:1}
.topbar{background:linear-gradient(180deg,rgba(10,7,9,.92),rgba(10,7,9,.62));
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.05)}
.tabbar{background:linear-gradient(0deg,rgba(10,7,9,.95),rgba(10,7,9,.72));
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2)}
/* arête de lumière : la ligne blanche d'un pli de tissu sous un projecteur */
.crc,.gft,.gcard,.annr,.cv,.bankrow,.mdl{position:relative}
.crc::before,.gft::before,.gcard::before,.mdl::before{content:'';position:absolute;
  left:14px;right:14px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
/* l'action principale porte sa propre lumière */
.b-grad{box-shadow:0 10px 34px -12px rgba(var(--rose-rgb),.65),
  0 1px 0 rgba(255,255,255,.18) inset}
.b-grad:active{box-shadow:0 6px 18px -10px rgba(var(--rose-rgb),.6)}
/* entrée en scène : la vue monte, les blocs suivent en cascade */
@keyframes cout-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:not(.noanim) .view>*{animation:cout-rise .52s var(--e) both}
html:not(.noanim) .view>*:nth-child(2){animation-delay:.05s}
html:not(.noanim) .view>*:nth-child(3){animation-delay:.1s}
html:not(.noanim) .view>*:nth-child(4){animation-delay:.15s}
html:not(.noanim) .view>*:nth-child(n+5){animation-delay:.2s}
/* le logotype capte la lumière */
.topbar .mk{background:linear-gradient(92deg,var(--cream) 30%,var(--gold) 70%,var(--cream));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
/* les chiffres et compteurs respirent l'or */
.money,.gft-n,.roul-seg .rp{text-shadow:0 0 22px rgba(var(--gold-rgb),.22)}

/* ═══ SIGNATURE — la marque de la plateforme est un logotype, pas un titre :
   capitales espacées, filet d'accent, et une hiérarchie qui laisse le nom de
   la créatrice régner sur sa boutique. Le reste suit un rythme éditorial. ═══ */
.topbar .mk{font-family:var(--dsp);font-size:17.5px;font-weight:500;letter-spacing:.26em;
  color:var(--cream);position:relative;padding-bottom:3px;white-space:nowrap}
.topbar .mk::after{content:'';position:absolute;left:0;bottom:0;width:22px;height:1px;
  background:var(--rose);opacity:.85}
.sec-h{margin-bottom:18px}
.sec-h h2{font-size:26px;line-height:1.12}
.sec-h p{margin-top:5px;font-size:12.5px;line-height:1.6}
.eyb{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.view>.wrap>.eyb:not(:first-child){margin-top:26px}
/* une seule couleur d'accent domine : les surfaces secondaires se contentent
   d'un filet, pas d'un dégradé — c'est ce qui distingue un vrai produit */
.crc-a .b-sm:not(.flwon),.gft-a .b-sm{background:var(--surf-2);border:1px solid var(--line-2);color:var(--cream)}
.crc-a .b-sm:not(.flwon):active,.gft-a .b-sm:active{border-color:var(--rose);background:rgba(var(--rose-rgb),.10)}
/* Un doigt qui tombe sur le DESSIN d'un bouton ne doit jamais rien annuler :
   les icônes deviennent transparentes au toucher, le bouton reçoit tout. */
button svg,button svg *{pointer-events:none}
.tico{position:relative;width:38px;height:38px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--mute);
  border:1px solid transparent;background:transparent}
.tico svg{width:20px;height:20px}
.tico.on{color:var(--cream);border-color:var(--line-2);background:var(--surf)}
.tico .bdg{position:absolute;top:2px;right:2px}
.tabbar{justify-content:center}
.tabbar .tb{min-width:0;padding-left:2px;padding-right:2px;flex:1 1 0;max-width:150px}
.tabbar .tb>span:not(.cnt){font-size:9.2px;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (min-width:430px){.tabbar .tb>span:not(.cnt){font-size:10px}}
.home-h{padding:26px var(--pad,16px) 22px;position:relative}
.home-k{font-family:var(--dsp);font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.home-t{font-family:var(--dsp);font-size:clamp(30px,8.4vw,44px);line-height:1.06;
  letter-spacing:-.015em;color:var(--cream);font-weight:500}
.home-s{margin-top:10px;font-size:13px;color:var(--mute);line-height:1.6;max-width:34ch}
.home-q{display:flex;align-items:center;gap:10px;margin-top:20px;padding:12px 15px;
  border-radius:100px;border:1px solid var(--line-2);background:var(--surf);
  box-shadow:0 10px 30px -20px #000}
.home-q svg{width:18px;height:18px;color:var(--mute);flex:none}
.home-q input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-size:14px}
.gfil{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;
  scrollbar-width:none}
.gfil::-webkit-scrollbar{display:none}
.gfil .rc{flex:none}
.crc-g{display:flex;gap:6px;flex-wrap:wrap;padding:10px 15px 0}
.gtag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),.3);border-radius:100px;padding:3px 9px}
.becc{display:block;width:100%;text-align:left;margin:20px 0 4px;padding:16px 17px;
  border-radius:18px;border:1px dashed var(--line-2);background:transparent}
.becc b{display:block;font-size:14px;color:var(--cream);margin-bottom:3px}
.becc span{font-size:12px;color:var(--mute)}
.topbar .mk{cursor:pointer}
.subn{font-size:11.5px;color:var(--mute);white-space:nowrap}
.subrow{display:flex;gap:9px;align-items:center;justify-content:center;margin-top:16px}
.subrow .b-grad{padding:11px 26px;font-size:13.5px}
.subrow .b-grad.subon{background:var(--surf-2);color:var(--cream);
  border:1px solid var(--line-2);box-shadow:none}
.subbell{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--surf-2);color:var(--cream)}
.subhint{display:flex;align-items:center;gap:11px;padding:13px 14px;margin-bottom:16px;
  border:1px solid rgba(var(--rose-rgb),.28);border-radius:16px;
  background:linear-gradient(120deg,rgba(var(--rose-rgb),.10),rgba(var(--gold-rgb),.05))}
.subhint b{display:block;font-size:13.5px;color:var(--cream);margin-bottom:3px}
.subhint p{font-size:11.5px;color:var(--mute);line-height:1.5}
.subhint>div{flex:1;min-width:0}
.cover{position:relative}
.cover::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%, rgba(var(--rose-rgb),.14), transparent 70%),
    linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
.cover-in{position:relative;z-index:1}
.crg{display:grid;gap:18px}
.crc{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surf);
  transition:transform .25s var(--e),border-color .25s}
.crc:active{transform:scale(.985);border-color:rgba(var(--rose-rgb),.35)}
body.nobar #app,body.nobar #screen{padding-bottom:0}
body.nobar .view{padding-bottom:calc(env(safe-area-inset-bottom) + 18px)}
.crc-cov{height:132px;background:linear-gradient(120deg,rgba(var(--rose-rgb),.20),rgba(var(--gold-rgb),.12));
  background-size:cover;background-position:center}
.crc-b{display:flex;align-items:center;gap:11px;padding:0 15px;margin-top:-24px}
.crc-av{width:52px;height:52px;border-radius:50%;flex:none;background:var(--noir);
  border:2px solid var(--noir);background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;font-family:var(--dsp);font-size:21px}
.crc-t b{display:block;font-size:15px;font-weight:600;margin-top:22px}
.crc-t small{display:block;color:var(--mute);font-size:11.5px}
.vrf{color:var(--rose);font-size:12px}
.crc-bio{padding:10px 15px 0;font-size:12.5px;color:var(--mute);line-height:1.55}
.crc-a{display:flex;gap:8px;align-items:center;padding:13px 15px 15px;flex-wrap:wrap}
.crc-a .b-sm.flwon{color:var(--rose);border-color:rgba(var(--rose-rgb),.4);background:rgba(var(--rose-rgb),.08)}
.pinb{color:var(--rose);border-color:rgba(var(--rose-rgb),.35);background:rgba(var(--rose-rgb),.08)}
.cv.pin{border-color:rgba(var(--rose-rgb),.3)}
.abkg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.abkg .bkc{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surf)}
.abkg .bkc img,.abkg .bkc video{width:100%;height:100%;object-fit:cover}
.wm2{position:absolute;right:7px;bottom:6px;z-index:4;font-size:10px;font-weight:600;
  letter-spacing:.05em;color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.55);
  pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;
  max-width:70%;overflow:hidden;text-overflow:ellipsis}

/* audio */
.aud{display:flex;align-items:center;gap:11px;min-width:180px}
.aud button{width:34px;height:34px;border-radius:50%;background:var(--grad);color:var(--noir);
  display:grid;place-items:center;flex:none}
.aud button svg{width:14px;height:14px}
.aud .wv{flex:1;height:22px;display:flex;align-items:center;gap:2px}
.aud .wv i{flex:1;background:currentColor;opacity:.35;border-radius:2px}
.aud .dr{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}

/* ── CAPTURE ── */
.cv{position:relative}
.tstb{position:absolute;bottom:12px;right:14px;padding:3px 9px;border-radius:100px;
  border:1px solid var(--gold);color:var(--gold);font-size:9.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.cam{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease}
.cam.on{opacity:1;visibility:visible;pointer-events:auto;animation:camIn .3s cubic-bezier(.22,.9,.26,1)}
@keyframes camIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
.cam-v{flex:1;position:relative;overflow:hidden;background:#000}
.cam-v video,.cam-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;z-index:5}
.cam-top button{width:40px;height:40px;border-radius:50%;background:rgba(20,12,16,.45);
  border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;
  backdrop-filter:blur(14px);transition:transform .16s var(--e)}
.cam-top button:active{transform:scale(.88)}
.cam-top button svg{width:18px;height:18px}
.cam-tm{position:absolute;top:calc(env(safe-area-inset-top) + 22px);left:50%;transform:translateX(-50%);
  z-index:2;display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:100px;
  background:var(--grad);color:#1A1013;font-size:13px;font-weight:700;
  box-shadow:0 6px 22px rgba(var(--rose-rgb),.4);font-variant-numeric:tabular-nums}
.cam-tm .d{width:7px;height:7px;border-radius:50%;background:#1A1013;animation:pulse 1s infinite}
.cam-b{padding:34px 20px calc(env(safe-area-inset-bottom) + 20px);flex:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.92) 30%,#000);
  margin-top:-58px;position:relative;z-index:4}
.shut{width:74px;height:74px;border-radius:50%;margin:0 auto;border:4px solid rgba(255,255,255,.92);
  display:grid;place-items:center;position:relative;
  transition:transform .18s cubic-bezier(.34,1.4,.5,1)}
.shut:active{transform:scale(.9)}
.shut i{width:56px;height:56px;border-radius:50%;background:#fff;transition:.25s var(--e)}
.shut.rec{border-color:rgba(255,255,255,.35)}
.shut.rec i{width:26px;height:26px;border-radius:8px;background:var(--grad);
  box-shadow:0 0 22px rgba(var(--rose-rgb),.55)}
.shut svg.ring{position:absolute;inset:-4px;width:82px;height:82px;transform:rotate(-90deg)}
.shut svg.ring circle{fill:none;stroke:url(#ringg);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:245;stroke-dashoffset:245;transition:stroke-dashoffset .2s linear}
.cam-h{text-align:center;font-size:12px;color:rgba(255,255,255,.55);margin-top:14px;
  letter-spacing:.02em;animation:hintFade 4.4s ease forwards}
@keyframes hintFade{0%,62%{opacity:1}100%{opacity:0}}

/* rangée de prise de vue : galerie · déclencheur · retourner (façon Instagram) */
.shoot-row{display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.flip2{width:46px;height:46px;border-radius:50%;background:rgba(20,12,16,.45);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);
  display:grid;place-items:center;color:#fff;transition:transform .16s var(--e)}
.flip2:active{transform:scale(.88)}
.flip2 svg{width:21px;height:21px;transition:transform .42s cubic-bezier(.3,.9,.3,1)}
.flip2.spin svg{transform:rotate(180deg)}

.cn-mark{text-align:center;font-family:var(--dsp);font-size:15px;letter-spacing:.42em;
  color:var(--gold);margin:0 0 10px}
.cn-t{text-align:center;font-family:var(--dsp);font-size:19px;color:#F6EEF2;margin:0 0 8px}
.cn-x{text-align:center;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.6);
  margin:0 auto 16px;max-width:340px}
.cn-x b{color:#F6EEF2;font-weight:600}
.cn-b{width:100%;padding:15px;border-radius:100px;background:var(--grad);color:#1A1013;
  font-size:14.5px;font-weight:700;box-shadow:0 10px 30px rgba(var(--rose-rgb),.32)}
.cn-hint{text-align:center;font-size:11px;color:rgba(255,255,255,.4);margin-top:10px}
.cn-b2{width:100%;padding:13px;border-radius:100px;border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:13.5px;font-weight:500;margin-top:9px}

/* barre du bas après capture : mode à gauche, Envoyer à droite */
.done-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.done-row.solo{justify-content:center}
.keep-tg{display:flex;align-items:center;gap:10px;color:#fff;min-width:0}
.keep-tg .kic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px dashed rgba(255,255,255,.85);transition:.2s}
.keep-tg .kic.solid{border-style:solid;border-color:var(--gold);
  background:rgba(228,196,140,.16);color:var(--gold)}
.keep-tg .kic svg{width:16px;height:16px}
.keep-tg .kic b{font-size:15px;font-weight:700}
.keep-tg .klb{font-size:13.5px;font-weight:600;text-align:left;line-height:1.25}
.cam-send2{display:flex;align-items:center;gap:9px;padding:8px 20px 8px 8px;border-radius:100px;
  background:var(--grad);color:#1A1013;font-size:14.5px;font-weight:700;flex:none;
  box-shadow:0 10px 28px rgba(var(--rose-rgb),.38);transition:transform .16s var(--e)}
.cam-send2:active{transform:scale(.94)}
.cam-send2 .sav{width:32px;height:32px;border-radius:50%;background:#26161F;
  background-size:cover;background-position:center;display:grid;place-items:center;
  font-family:var(--dsp);font-size:13px;color:#F6EEF2}

/* ── ÉDITEUR PHOTO : texte, dessin, enregistrement ── */
.cam-tools{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px;z-index:5;
  display:flex;gap:9px}
.cam-tools button{width:40px;height:40px;border-radius:50%;background:rgba(20,12,16,.45);
  border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;
  backdrop-filter:blur(14px);transition:.2s}
.cam-tools button:active{transform:scale(.88)}
.cam-tools button.on{background:var(--grad);color:#1A1013;border-color:transparent;
  box-shadow:0 6px 18px rgba(var(--rose-rgb),.4)}
.cam-tools button svg{width:18px;height:18px}
.cam-tools button b{font-family:var(--dsp);font-size:17px;line-height:1}

#camdraw{position:absolute;inset:0;z-index:2;touch-action:none;pointer-events:none}
.cam{-webkit-user-select:none;user-select:none}
.cam button{touch-action:manipulation}
.shut{touch-action:none;-webkit-touch-callout:none}
.txt-in textarea{-webkit-user-select:text;user-select:text}
#camtxt{position:absolute;inset:0;z-index:3;pointer-events:none}
.ctx{position:absolute;pointer-events:auto;cursor:move;padding:4px 10px;border-radius:8px;
  font-weight:700;line-height:1.25;text-align:center;white-space:pre-wrap;max-width:80%;
  text-shadow:0 2px 14px rgba(0,0,0,.6);transform:translate(-50%,-50%);user-select:none;
  -webkit-user-select:none;touch-action:none}   /* sans lui, iOS vole le glisser */
.ctx.sel{outline:1.5px dashed rgba(255,255,255,.7);outline-offset:5px;border-radius:10px}

.pal{position:absolute;left:16px;right:16px;bottom:16px;z-index:5;display:none;
  align-items:center;gap:10px}
.pal.on{display:flex}
.pal .sw3{width:28px;height:28px;border-radius:50%;flex:none;border:2px solid rgba(255,255,255,.35);
  transition:.15s}
.pal .sw3.on{border-color:#fff;transform:scale(1.18)}
.pal .sz{flex:1;-webkit-appearance:none;height:3px;border-radius:3px;background:rgba(255,255,255,.3)}
.pal .sz::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff}

.txt-in{position:absolute;left:12px;right:12px;top:auto;
  bottom:calc(env(safe-area-inset-bottom) + 128px);z-index:6;display:none;gap:10px;
  align-items:flex-end}
.txt-in.on{display:flex}
.txt-in textarea{flex:1;background:rgba(12,8,11,.62);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;color:#fff;padding:11px 14px;font-size:17px;font-weight:600;
  line-height:1.3;resize:none;outline:none;max-height:96px;
  text-shadow:0 1px 8px rgba(0,0,0,.4)}
.txt-in .ok2{flex:none;padding:12px 18px;border-radius:100px;background:#fff;color:#000;
  font-size:13.5px;font-weight:700}

/* ── PIED DE PAGE LÉGAL ── */
.foot{padding:30px 18px calc(34px + env(safe-area-inset-bottom));
  background:var(--noir-2);border-top:1px solid var(--line);margin-top:44px}
.foot-in{max-width:760px;margin:0 auto}
.foot-warn{display:flex;gap:11px;padding:14px;border-radius:14px;margin-bottom:26px;
  background:rgba(var(--rose-rgb),.06);border:1px solid rgba(var(--rose-rgb),.2)}
.foot-warn svg{width:18px;height:18px;color:var(--rose);flex:none;margin-top:1px}
.foot-warn b{display:block;font-size:12.5px;font-weight:600;color:var(--rose);margin-bottom:4px;
  letter-spacing:.02em}
.foot-warn p{font-size:11.5px;color:var(--mute);line-height:1.55}

.foot-cols{display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:26px}
.foot-g .eyb{margin-bottom:12px}
.foot-g a{display:block;width:100%;text-align:left;padding:7px 0;font-size:12.5px;
  color:var(--mute);line-height:1.4;transition:color .2s;cursor:pointer}
.foot-g a:hover,.foot-g a:active{color:var(--cream)}

.foot-c{font-size:11px;color:#6B5A65;line-height:1.75;padding-top:20px;
  border-top:1px solid var(--line)}
.foot-c b{color:var(--mute);font-weight:500}
.foot-sos{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.foot-sos span{font-size:10.5px;padding:5px 10px;border-radius:100px;
  background:var(--surf);border:1px solid var(--line);color:var(--mute)}

/* ── DOCUMENT LÉGAL ── */
.lgl{padding-bottom:4px}
.lgl-s{margin-bottom:26px}
.lgl-s:last-child{margin-bottom:0}
.lgl-s h3{display:flex;align-items:baseline;gap:9px;font-family:var(--dsp);font-size:18px;
  font-weight:400;color:var(--cream);margin-bottom:10px;line-height:1.3}
.lgl-s h3 i{font-style:normal;font-family:var(--ui);font-size:11px;font-weight:600;
  color:var(--rose);flex:none;font-variant-numeric:tabular-nums}
.lgl-s p{font-size:13.5px;line-height:1.7;color:var(--mute);margin-bottom:10px}
.lgl-s p:last-child{margin-bottom:0}
.lgl-s b{color:var(--cream);font-weight:500}
.lgl-s ul{list-style:none;margin:4px 0 12px}
.lgl-s li{display:flex;gap:9px;padding:4px 0;font-size:13px;line-height:1.6;color:var(--mute)}
.lgl-s li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--rose);
  flex:none;margin-top:9px;opacity:.6}
.lgl-dl{display:grid;gap:1px;background:var(--line);border-radius:14px;overflow:hidden;
  border:1px solid var(--line);margin:4px 0 12px}
.lgl-dl div{display:flex;justify-content:space-between;gap:14px;padding:12px 14px;
  background:var(--surf);font-size:12.5px}
.lgl-dl dt{color:var(--mute);flex:none}
.lgl-dl dd{color:var(--cream);text-align:right;font-weight:500;min-width:0}
.lgl-q{padding:13px 15px;border-radius:13px;margin:4px 0 12px;background:var(--surf);
  border:1px dashed var(--line-2);font-style:italic;font-size:13px;color:var(--cream);line-height:1.6}
.lgl-w{display:flex;gap:11px;padding:14px;border-radius:14px;margin:4px 0 12px;
  background:rgba(232,165,75,.07);border:1px solid rgba(232,165,75,.3)}
.lgl-w.bad{background:rgba(210,104,107,.07);border-color:rgba(210,104,107,.32)}
.lgl-w svg{width:18px;height:18px;color:var(--warn);flex:none;margin-top:1px}
.lgl-w.bad svg{color:var(--bad)}
.lgl-w p{font-size:12.5px;line-height:1.6;color:var(--mute);margin:0}
.lgl-w b{display:block;color:var(--warn);font-weight:600;margin-bottom:3px;font-size:12.5px}
.lgl-w.bad b{color:var(--bad)}
.todo{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;
  background:rgba(232,165,75,.12);color:var(--warn);font-size:12px;font-weight:500;
  border:1px dashed rgba(232,165,75,.4)}
.foot-edit{background:none;border:none;padding:0;text-align:left;cursor:pointer;
  font-size:11px;color:#6B5A65;line-height:1.9}
.foot-pen{color:var(--gold);margin-left:5px;white-space:nowrap;font-weight:600}
@media(hover:hover){.foot-edit:hover .foot-pen{text-decoration:underline}}

/* index des documents */
.lgl-ix{display:grid;gap:8px;margin-bottom:6px}
.lgl-ix button{display:flex;align-items:center;gap:12px;padding:14px;border-radius:15px;
  background:var(--surf);border:1px solid var(--line);text-align:left;transition:.2s}
.lgl-ix button:active{background:var(--surf-2)}
.lgl-ix .n{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--surf-2);color:var(--rose)}
.lgl-ix .n svg{width:15px;height:15px}
.lgl-ix .tx3{flex:1;min-width:0}
.lgl-ix .tx3 b{display:block;font-size:13.5px;font-weight:500;margin-bottom:2px}
.lgl-ix .tx3 small{font-size:11px;color:var(--mute)}
.lgl-ix .ar{color:var(--line-2);flex:none}

/* ── BANDEAU COOKIES ── */
.ck2{position:fixed;left:10px;right:10px;z-index:95;
  bottom:calc(90px + env(safe-area-inset-bottom));
  padding:20px;border-radius:22px;background:var(--surf);border:1px solid var(--line-2);
  box-shadow:0 -14px 50px rgba(0,0,0,.7);
  transform:translateY(220%);transition:.5s var(--e);
  max-width:520px;margin:0 auto}
.ck2.on{transform:none}
.ck2 .hd2{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ck2 .hd2 svg{width:19px;height:19px;color:var(--gold);flex:none}
.ck2 h4{font-family:var(--dsp);font-size:20px;font-weight:400}
.ck2 p{font-size:12.5px;color:var(--mute);line-height:1.6;margin-bottom:16px}
.ck2 p b{color:var(--cream);font-weight:500}
.ck2 .row2{display:flex;gap:9px}
.ck2 .row2 button{flex:1;padding:13px;border-radius:100px;font-size:13.5px;font-weight:600;
  transition:.2s}
.ck2 .row2 .no2{border:1px solid var(--line-2);color:var(--cream);background:var(--surf-2)}
.ck2 .row2 .yes2{background:var(--grad);color:var(--noir)}
.ck2 .lnk2{display:block;width:100%;margin-top:12px;font-size:11.5px;color:var(--mute);
  text-align:center;text-decoration:underline}

/* ── AVIS ── */
.stars{display:flex;gap:4px}
.stars svg{width:15px;height:15px}
.stars .s{color:var(--line-2)}
.stars .s.on{color:var(--gold)}
.star-pick{display:flex;gap:10px;justify-content:center;margin:6px 0 4px}
.star-pick button{width:46px;height:46px;color:var(--line-2);transition:transform .15s var(--e),color .15s}
.star-pick button svg{width:100%;height:100%}
.star-pick button.on{color:var(--gold)}
.star-pick button.on:active{transform:scale(.88)}
.star-lbl{text-align:center;font-size:13px;color:var(--mute);min-height:20px;margin-bottom:14px}

.rv-top{display:flex;gap:20px;align-items:center;padding:18px;border-radius:20px;
  background:var(--surf);border:1px solid var(--line);margin-bottom:14px}
.rv-avg{text-align:center;flex:none}
.rv-avg b{font-family:var(--dsp);font-size:44px;color:var(--gold);display:block;line-height:1}
.rv-avg small{font-size:11px;color:var(--mute)}
.rv-dist{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dist{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mute)}
.dist .n{width:10px;text-align:right;flex:none}
.dist .bar{flex:1;height:5px;border-radius:5px;background:var(--surf-2);overflow:hidden}
.dist .bar i{display:block;height:100%;border-radius:5px;background:var(--gold)}
.dist .c{width:22px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

.rvf{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;scrollbar-width:none}
.rvf::-webkit-scrollbar{display:none}
.rvf button{white-space:nowrap;padding:8px 14px;border-radius:100px;border:1px solid var(--line);
  background:var(--surf);font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:5px}
.rvf button svg{width:12px;height:12px}
.rvf button.on{color:var(--gold);border-color:rgba(228,196,140,.45);background:rgba(228,196,140,.08);font-weight:500}

.rv{padding:15px;border-radius:18px;background:var(--surf);border:1px solid var(--line);margin-bottom:10px}
.rv-h{display:flex;gap:11px;align-items:center;margin-bottom:10px}
.rv-h .av2{width:38px;height:38px;border-radius:50%;flex:none;background:var(--surf-2);
  background-size:cover;background-position:center;display:grid;place-items:center;
  font-family:var(--dsp);font-size:16px;color:var(--mute)}
.rv-h .who{flex:1;min-width:0}
.rv-h .who b{display:block;font-size:14px;font-weight:500}
.rv-h .who b.gtx{display:inline-block;width:auto;max-width:100%;vertical-align:middle}
.rv-h .who small{font-size:11px;color:#6B5A65}
.rv .txt{font-size:14px;line-height:1.55;color:var(--cream);opacity:.9}
.rv .obj{margin-top:9px;font-size:11px;color:var(--gold);letter-spacing:.05em}

/* ── MODÉRATION ── */
.rv.mod-hidden{border-color:rgba(232,165,75,.35)}
.rv.mod-del{border-color:rgba(210,104,107,.3);background:var(--noir-2)}
.rv-mod{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rv-mod button{font-size:11.5px;padding:7px 12px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--mute);transition:.2s}
.rv-mod button:hover{color:var(--cream);border-color:var(--cream)}
.rv-mod button.warn{color:var(--warn);border-color:rgba(232,165,75,.35)}
.rv-mod button.bad{color:var(--bad);border-color:rgba(210,104,107,.35)}
.rv-mod button.ok{color:var(--ok);border-color:rgba(127,207,166,.35)}
.rv-flag{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:100px;margin-bottom:10px}
.rv-flag.h{color:var(--warn);background:rgba(232,165,75,.1)}
.rv-flag.b{color:var(--bad);background:rgba(210,104,107,.1)}

.warnbox{display:flex;gap:12px;padding:15px;border-radius:16px;margin-bottom:14px;
  background:rgba(210,104,107,.07);border:1px solid rgba(210,104,107,.3)}
.warnbox svg{width:20px;height:20px;color:var(--bad);flex:none;margin-top:1px}
.warnbox b{display:block;font-size:13.5px;font-weight:500;color:var(--bad);margin-bottom:3px}
.warnbox p{font-size:12.5px;color:var(--mute);line-height:1.55}

.masked{position:relative}
.masked .veil2{position:absolute;inset:-4px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;backdrop-filter:blur(9px);
  background:rgba(10,7,9,.55);cursor:pointer;z-index:2}
.masked .veil2 span{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:7px}
.masked .veil2 svg{width:14px;height:14px}
.rv-tabs{display:flex;gap:7px;margin-bottom:14px}
.rv-tabs button{flex:1;padding:10px;border-radius:100px;border:1px solid var(--line);
  background:var(--surf);font-size:12.5px;color:var(--mute);transition:.2s}
.rv-tabs button.on{color:var(--rose);border-color:rgba(var(--rose-rgb),.5);
  background:rgba(var(--rose-rgb),.09);font-weight:500}

/* ── THÈMES ── */
.thm{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.th-c{display:flex;align-items:center;gap:10px;padding:11px;border-radius:14px;
  background:var(--surf);border:1px solid var(--line);transition:.2s;text-align:left;width:100%}
.th-c.on{border-color:var(--rose);background:var(--surf-2)}
.th-c .sw2{width:34px;height:34px;border-radius:10px;flex:none;position:relative;overflow:hidden}
.th-c .sw2 i{position:absolute;inset:0;display:block}
.th-c .sw2 i:nth-child(2){clip-path:polygon(100% 0,100% 100%,0 100%)}
.th-c b{font-size:13px;font-weight:500;display:block}
.th-c small{font-size:11px;color:var(--mute)}

/* aperçu doux : le visuel teaser est visible, sans flou lourd */
.veil.soft{backdrop-filter:none;
  background:linear-gradient(180deg,rgba(10,7,9,.15) 0%,rgba(10,7,9,.55) 45%,rgba(10,7,9,.92) 100%)}
.pc .tz{position:absolute;top:9px;left:9px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:100px;background:rgba(10,7,9,.7);color:var(--gold);
  border:1px solid rgba(228,196,140,.3)}
/* ── Tutoriel du premier lancement ── */
/* ── VISITE GUIDÉE ─────────────────────────────────────────────────
   Sobriété : un seul accent (le rose), aucun dégradé décoratif.
   Le carton reprend exactement les codes des fenêtres du site. */
#tourspot{position:fixed;z-index:121;display:none;border-radius:18px;pointer-events:none;
  border:2px solid var(--rose);
  box-shadow:0 0 0 4px rgba(var(--rose-rgb),.16),0 0 26px rgba(var(--rose-rgb),.35);
  transition:top .34s var(--e),left .34s var(--e),width .34s var(--e),height .34s var(--e)}
#tourspot.on{display:block}

#tour{position:fixed;inset:0;z-index:120;display:none;
  align-items:flex-end;justify-content:center;
  padding:18px 18px calc(84px + env(safe-area-inset-bottom));
  background:rgba(5,3,5,.26);touch-action:none;overscroll-behavior:contain}
#tour.on{display:flex}
#tour.top{align-items:flex-start;padding-top:74px}

/* carton + flèche qui le relie à l'élément éclairé */
#tour .tour-w{position:relative;width:100%;max-width:420px}
.tour-arw{position:absolute;width:14px;height:14px;display:none;z-index:3;
  background:var(--noir-2);border:1px solid var(--line-2);transform:rotate(45deg);
  transition:left .34s var(--e)}
#tour.arw-up .tour-arw{display:block;top:-8px;border-right:0;border-bottom:0}
#tour.arw-down .tour-arw{display:block;bottom:-8px;border-left:0;border-top:0}

.tour-c{position:relative;width:100%;overflow:hidden;
  background:var(--noir-2);border:1px solid var(--line-2);border-radius:22px;
  padding:20px 20px 18px;box-shadow:0 22px 54px rgba(0,0,0,.68);
  animation:tourIn .32s var(--e)}
@keyframes tourIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#tour.top .tour-c{animation:tourInTop .32s var(--e)}
@keyframes tourInTop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* filet de progression : seule la portion parcourue se voit */
.tour-bar{height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.07);margin-bottom:15px}
.tour-bar i{display:block;height:100%;border-radius:2px;background:var(--rose);
  transition:width .45s var(--e)}

/* en-tête sur une seule ligne : picto · section · numéro … Passer */
.tour-h{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.tour-ic{width:16px;height:16px;flex:none;display:grid;place-items:center;color:var(--rose)}
.tour-ic svg{width:16px;height:16px}
.tour-eyb{flex:1;min-width:0;font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tour-eyb i{font-style:normal;opacity:.45;margin:0 6px}
.tour-eyb b{color:var(--cream);font-weight:400;font-variant-numeric:tabular-nums}
.tour-skip{flex:none;font-size:12px;color:var(--mute);padding:5px 0 5px 10px}
.tour-skip:active{color:var(--cream)}

.tour-c h4{font-family:var(--dsp);font-size:23px;font-weight:400;line-height:1.16;
  margin:0 0 8px;color:var(--cream)}
.tour-c p{font-size:14px;color:rgba(240,232,236,.72);line-height:1.62;margin:0}

.tour-btns{display:flex;gap:9px;align-items:center;margin-top:18px}
.tour-b{height:44px;border-radius:100px;font-size:13.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:.2s}
.tour-b.main{flex:1;color:#fff;background:linear-gradient(120deg,var(--rose),var(--coral))}
.tour-b.ghost{flex:0 0 auto;padding:0 20px;color:var(--mute);border:1px solid var(--line-2)}
.tour-b svg{width:14px;height:14px}

.tb.tour-hi{color:var(--rose)}
/* ── Onglet Compte : sections repliables (fin du fourre-tout) ── */
/* ── Demandes reçues : en tête du Studio, toujours dépliées ── */
.reqhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.reqhead h2{font-family:var(--dsp);font-size:22px;font-weight:400;color:var(--cream);margin:0}
.reqhead p{font-size:12px;color:var(--mute);margin:4px 0 0;line-height:1.4}
.reqhead>div:first-child{flex:1;min-width:0}
.reqn{flex:none;font-size:11.5px;font-weight:600;color:#fff;padding:6px 12px;border-radius:100px;
  background:var(--rose);white-space:nowrap;box-shadow:0 4px 14px rgba(var(--rose-rgb),.3)}
/* ── Annonces groupées : bandeau du Studio + file d'attente ── */
/* ── Forfaits à la carte : cartes, catalogue flouté, cases de catégorie ── */
.fsec{margin-bottom:18px}
.fsec-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fsec-h b{flex:1;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:500}
.fc-cr{font-size:11px;font-weight:600;color:#fff;background:var(--rose);padding:4px 10px;border-radius:100px}
.fcard{width:100%;display:flex;align-items:center;gap:13px;margin-bottom:9px;padding:14px 16px;
  border-radius:16px;text-align:left;background:var(--surf);border:1px solid var(--line);transition:.2s}
.fcard:active{transform:scale(.99)}
.fc-n{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-family:var(--dsp);font-size:19px;color:var(--gold);
  background:rgba(228,196,140,.1);border:1px solid rgba(228,196,140,.3)}
.fc-b{flex:1;min-width:0}
.fc-b b{display:block;font-size:14px;font-weight:500;color:var(--cream)}
.fc-b small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.fc-p{flex:none;font-family:var(--dsp);font-size:17px;color:var(--gold)}
.cata-cr{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;
  background:rgba(var(--rose-rgb),.08);border:1px solid rgba(var(--rose-rgb),.3)}
.cata-cr.none{background:var(--surf);border-color:var(--line)}
.cata-cr .n{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--rose);color:#fff;font-size:14px;font-weight:600}
.cata-cr.none .n{background:var(--line-2);color:var(--mute)}
.cata-cr .b{flex:1;min-width:0}
.cata-cr .b b{display:block;font-size:13.5px;color:var(--cream)}
.cata-cr .b small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.cata-c{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surf)}
.cata-c.own{border-color:rgba(127,207,166,.35)}
.cata-im{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--noir-2)}
.cata-im img{width:100%;height:100%;object-fit:cover}
.cata-im .ph{width:100%;height:100%}
.cata-ok{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(127,207,166,.9);color:#0A0709}
.cata-ok svg{width:14px;height:14px}
/* couleur de fond d'un dossier */
.cbgr{display:flex;align-items:center;gap:10px}
.cbgr input[type=color]{width:58px;height:42px;padding:3px;flex:none;border-radius:12px}
.cbgr span{flex:1;min-width:0;font-size:12.5px;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbgr .b-sm{flex:none}
/* éditeur de textes */
.txr{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.txr-l{flex:0 0 40%;min-width:0}
.txr-l b{display:block;font-size:12.5px;font-weight:500;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txr-l small{display:block;font-size:10.5px;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txr input{flex:1;min-width:0;padding:10px 12px!important;font-size:14px!important}
.txr .b-sm{flex:none}
/* choix rapide du fond */
.bgq{display:flex;gap:8px;flex-wrap:wrap}
.bgq-b{flex:1 1 82px;min-width:0;padding:8px;border-radius:14px;
  border:1px solid var(--line-2);background:var(--surf);text-align:center;
  touch-action:manipulation}
.bgq-b span{display:block;height:34px;border-radius:9px;border:1px solid var(--line-2)}
.bgq-b i{display:block;font-style:normal;font-size:10.5px;color:var(--mute);margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgq-b.on{border-color:var(--rose)}
.bgq-b.on i{color:var(--cream)}
/* ── Tuiles de dossier sur la vitrine ── */
.ctiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.ctile{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);text-align:left;isolation:isolate;
  transition:transform .25s var(--e),border-color .25s var(--e)}
.ctile:active{transform:scale(.98)}
.ctile:hover{border-color:var(--line-2)}
.ct-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  transition:transform .5s var(--e)}
.ctile:hover .ct-bg{transform:scale(1.04)}
.ct-sc{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,5,7,.05) 30%,rgba(8,5,7,.62) 68%,rgba(8,5,7,.9))}
.ct-in{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 15px;display:block}
.ct-in b{display:block;font-family:var(--dsp);font-size:19px;font-weight:400;color:#fff;
  line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ct-in small{display:block;font-size:11px;color:rgba(255,255,255,.72);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-badge{position:absolute;top:10px;right:10px;z-index:1;font-size:10.5px;font-weight:600;
  color:#fff;background:var(--rose);padding:4px 10px;border-radius:100px;
  box-shadow:0 4px 14px rgba(var(--rose-rgb),.45)}
.ct-badge.off{background:rgba(8,5,7,.75);color:var(--mute)}
@media(min-width:520px){.ctiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
/* ── Vitrine à l'unité : entrée, sélecteur de lot, grille de prix ── */
.carte-e{width:100%;display:flex;align-items:center;gap:12px;margin-bottom:22px;
  padding:16px 18px;border-radius:20px;text-align:left;
  background:linear-gradient(120deg,rgba(var(--rose-rgb),.1),rgba(228,196,140,.07));
  border:1px solid rgba(var(--rose-rgb),.3)}
.carte-e:active{transform:scale(.99)}
.carte-e-t{flex:1;min-width:0}
.carte-e-t b{display:block;font-family:var(--dsp);font-size:19px;font-weight:400;color:var(--cream)}
.carte-e-go,.carte-e-cr{white-space:nowrap}
.carte-e-t small{display:block;font-size:11.5px;color:var(--mute);margin-top:3px}
.carte-e-go{flex:none;font-size:12.5px;color:var(--rose);font-weight:500}
.carte-e-cr{flex:none;font-size:11.5px;font-weight:600;color:#fff;background:var(--rose);
  padding:5px 11px;border-radius:100px}
#camcont{position:absolute;left:22px;right:22px;z-index:6;
  bottom:calc(env(safe-area-inset-bottom) + 26px);
  height:52px;border-radius:100px;font-size:15px;font-weight:600;color:#0A0709;
  background:var(--grad);box-shadow:0 10px 30px rgba(var(--rose-rgb),.32);
  animation:up .45s var(--e) .35s both}
#camcont:active{transform:scale(.98)}
.carte-w{margin-top:2px}
.qsel{border:1px solid var(--line);border-radius:18px;background:var(--surf);
  padding:15px 16px;margin-bottom:16px}
.qsel-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  margin-bottom:11px}
.qsel-r{display:flex;gap:8px;flex-wrap:wrap}
.qc{flex:1 1 54px;min-width:0;padding:11px 4px;border-radius:14px;text-align:center;
  border:1px solid var(--line-2);background:var(--noir-2);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}   /* aucune transition : réponse immédiate */
.qc b{display:block;font-family:var(--dsp);font-size:21px;font-weight:400;color:var(--cream);line-height:1}
.qc small{display:block;font-size:10px;color:var(--mute);margin-top:4px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.qc.on{border-color:var(--rose);background:rgba(var(--rose-rgb),.12)}
.qc.on b{color:var(--rose)}
.qc.on small{color:var(--cream)}
.qsel-f{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;min-height:52px;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--line)}
.qsel-f span{flex:1;min-width:0;font-size:13px;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsel-f span i{display:block;font-style:normal;font-size:11px;color:var(--mute);
  margin-top:2px;white-space:nowrap}
.qsel-f .b-grad{flex:0 0 auto;width:auto;padding:0 20px;height:44px;white-space:nowrap}
.qsel-f span{flex:1 1 auto;min-width:0}
.pgrid{display:flex;gap:7px}
.pg-c{flex:1;min-width:0;text-align:center}
.pg-c span{display:block;font-family:var(--dsp);font-size:15px;color:var(--gold);margin-bottom:5px}
.pg-c input{width:100%;text-align:center;padding:10px 4px!important;font-size:14px!important}
/* progression du catalogue : 10/82 débloqués */
.cata-pg{margin-bottom:12px}
.cata-pg-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;min-width:0}
.cata-pg-h b{font-family:var(--dsp);font-size:26px;font-weight:400;color:var(--cream);
  font-variant-numeric:tabular-nums;line-height:1}
.cata-pg-h b i{font-style:normal;font-size:17px;color:var(--mute)}
.cata-pg-h b{flex:none}
.cata-pg-h span{flex:1;min-width:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cata-pg-h em{flex:none;white-space:nowrap;font-style:normal;font-size:12px;color:var(--gold);
  font-variant-numeric:tabular-nums}
.cata-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.cata-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--rose),var(--coral));transition:width .5s var(--e)}
.rc.vide{opacity:.42}
.cata-vid{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:100px;background:rgba(8,5,7,.62);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cata-vid svg{width:11px;height:11px;fill:currentColor;stroke:none}
.cata-vid i{font-style:normal;font-size:10.5px;font-variant-numeric:tabular-nums}
.cata-b{padding:11px 12px 13px}
.cata-b b{display:block;font-size:12.5px;font-weight:500;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cata-b small{display:block;font-size:10.5px;color:var(--mute);margin:3px 0 9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cata-got{font-size:11px;color:#7FCFA6}
.cata-lock{font-size:11px;color:var(--mute)}
button.cata-lock{background:none;border:none;padding:0;text-decoration:underline;
  text-underline-offset:3px;color:var(--gold);cursor:pointer;font-family:inherit;text-align:left}
html:not(.noanim) .qsel.pulse{animation:qsel-pulse .85s ease 2}
@keyframes qsel-pulse{50%{box-shadow:0 0 0 3px rgba(var(--gold-rgb),.55),0 0 26px -4px rgba(var(--gold-rgb),.5)}}
/* page « Faites-moi confiance » : répartition des choix par filtre */
.cfrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 15px;border:1px solid var(--line);border-radius:16px;background:var(--surf);
  margin-bottom:10px}
.cf-l b{display:block;font-family:var(--dsp);font-size:17px;color:var(--cream)}
.cf-l small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.cf-s{display:flex;align-items:center;gap:12px;flex:none}
.cf-s>b{min-width:24px;text-align:center;font-family:var(--dsp);font-size:19px;color:var(--gold)}
.cf-s .b-sm{width:40px;height:40px;padding:0;border-radius:13px;font-size:19px;line-height:1}
.cf-s .b-sm:disabled{opacity:.32}
.cf-f{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.cf-f>span{text-align:center;font-size:12.5px;color:var(--mute);letter-spacing:.04em}
.cf-f .b-grad:disabled{opacity:.4}
/* ── mode Canva : surbrillances, barre, panneau ── */
.ve-t{outline:1px dashed transparent;outline-offset:2px;border-radius:4px;cursor:grab}
.ve-t:hover{outline-color:rgba(var(--gold-rgb),.6)}
.ve-sel{outline:2px solid var(--rose)!important;outline-offset:2px}
.ve-hd{opacity:.28;filter:grayscale(1)}
#vebar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:130;display:flex;flex-wrap:wrap;align-items:center;gap:7px;justify-content:flex-start;
  background:var(--surf);border:1px solid rgba(var(--gold-rgb),.5);border-radius:16px;
  padding:10px 12px;font-size:12.5px;color:var(--mute);box-shadow:0 18px 46px -18px #000}
#vepop{position:fixed;left:12px;right:12px;bottom:calc(64px + env(safe-area-inset-bottom));
  z-index:130;background:var(--surf);border:1px solid var(--line-2);border-radius:16px;
  padding:12px;box-shadow:0 22px 55px -20px #000}
#vepop .vp-t{font-size:12px;color:var(--gold);margin-bottom:9px;letter-spacing:.03em}
#vepop .vp-r{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
#vepop .vp-r:last-child{margin-bottom:0}
#vepop .vp-s{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mute);flex:1;min-width:150px}
#vepop .vp-s input{flex:1}
#vepop .b-sm.on{border-color:var(--rose);color:var(--rose)}
.ve-i{outline:1px dashed transparent;outline-offset:2px;cursor:pointer}
.ve-i:hover{outline-color:rgba(var(--rose-rgb),.65)}
.vemx{position:absolute;left:0;top:0;z-index:5;border-radius:14px;overflow:hidden}
.vemx img,.vemx video{display:block;width:100%;border-radius:14px}
/* héritage Design System : chaque composant lit les variables du style actif */
.b-grad,.b-ghost,.b-sm{padding-top:var(--btnp,14px);padding-bottom:var(--btnp,14px)}
.b-grad{box-shadow:0 10px 30px -12px rgba(var(--rose-rgb),calc(var(--btnsh,0)*2))}
svg{stroke-width:var(--icw,1.8)}
.tabbar svg,.icn svg{transform:scale(var(--ics,1))}
/* la vitesse agit là où elle se ressent, sans écraser les durées d'origine */
.view{animation-duration:calc(.3s * var(--spd,1))}
.mdl-bg{transition-duration:calc(.42s * var(--spd,1))}
#mb .mdl{transition-duration:calc(.42s * var(--spd,1))}
/* Apparence ▸ Composants ▸ Animations « Réduites » = mode performance :
   les flous d'arrière-plan sont ce qui coûte le plus cher sur téléphone */
#screen,#md,#np{-webkit-overflow-scrolling:touch}
html.noanim *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.noanim .fxlayer,html.noanim .grain{display:none!important}
.stkpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.stk{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surf)}
.stk b{display:block;font-family:var(--dsp);font-size:23px;color:var(--cream);line-height:1.1}
.stk small{display:block;font-size:11px;color:var(--mute);margin-top:3px;letter-spacing:.05em}
.stbars{display:flex;align-items:flex-end;gap:6px;height:150px;padding:6px 2px;
  border:1px solid var(--line);border-radius:16px;background:var(--surf);overflow-x:auto}
.stb{flex:1 0 42px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.stb i{display:block;width:100%;border-radius:7px 7px 3px 3px;background:var(--grad);min-height:3px}
.stb u{display:block;font-size:9.5px;color:var(--mute);text-decoration:none;margin-top:5px}
.stb em{display:block;font-size:9.5px;color:var(--gold);font-style:normal}
.livedot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--bad, #FF5C78);
  box-shadow:0 0 0 4px rgba(255,92,120,.18)}
html:not(.noanim) .livedot{animation:livep 1.3s ease-in-out infinite alternate}
@keyframes livep{to{box-shadow:0 0 0 9px rgba(255,92,120,0)}}
.cmpsw{width:34px;height:22px;border-radius:7px;border:1px solid var(--line-2);display:block}
.dsfav{background:none;border:none;padding:0 0 0 6px;color:var(--line-2);font-size:13px;
  cursor:pointer;line-height:1}
.dsfav.on{color:var(--gold)}
.dsdirty{display:block;width:100%;margin:0 0 12px;padding:11px 13px;border-radius:14px;
  border:1px solid rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.09);
  color:var(--gold);font-family:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.dsnav{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 4px;position:sticky;top:0;z-index:3;
  background:var(--surf);padding:6px 0}
.dsn{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--mute);font-size:12.5px;font-family:inherit;cursor:pointer;transition:.18s}
.dsn.on{border-color:var(--rose);color:var(--rose);background:rgba(var(--rose-rgb),.08)}
.ve-lk{cursor:pointer}
.vemt{color:var(--cream);padding:2px 4px;white-space:pre-wrap;line-height:1.35;
  text-shadow:0 1px 8px rgba(0,0,0,.35)}
.ve-grip{position:absolute;right:5px;bottom:5px;width:24px;height:24px;z-index:7;
  display:grid;place-items:center;border-radius:8px;cursor:nwse-resize;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.55);
  color:#fff;font-size:13px;touch-action:none;user-select:none}
#screen{position:relative}
#app{position:relative;z-index:0}
#md{position:relative}
#vebar .vesv{font-style:normal;font-size:11px;color:var(--gold);opacity:0;flex:none}
html:not(.noanim) #vebar .vesv.go{animation:vesv 1.6s ease}
@keyframes vesv{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
#vepop .vsw{width:30px;height:30px;padding:0;border-radius:9px}
#vepop select{background:var(--noir-2);color:var(--cream);border:1px solid var(--line);
  border-radius:10px;padding:6px 8px;font-size:12px;max-width:150px}
#vepop input[type=color]{width:34px;height:30px;border:1px solid var(--line);border-radius:9px;
  background:none;padding:0}
/* cœur favori — visible uniquement côté studio */
.chf{display:inline-grid;place-items:center;width:26px;height:26px;color:var(--line-2);
  cursor:pointer;flex:none}
.chf.on{color:var(--rose)}
html:not(.noanim) .chf.on svg{animation:chf-pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes chf-pop{0%{transform:scale(.55)}60%{transform:scale(1.25)}100%{transform:none}}
.cv .chf{align-self:center;margin-left:6px}
/* révélation séquentielle : la carte se retourne en 3D, floue puis nette */
#rvq{position:fixed;inset:0;z-index:97;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(5,2,12,.86);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.rvq-in{width:min(380px,92vw);text-align:center}
.rvq-n{font-size:11.5px;letter-spacing:.28em;color:var(--gold);margin-bottom:10px}
.rvq-card{position:relative;border-radius:20px;overflow:hidden;background:var(--noir-2);
  margin-bottom:14px;box-shadow:0 30px 70px -28px #000;perspective:900px}
.rvq-card img{display:block;width:100%;max-height:56vh;object-fit:cover}
.rvq-ph{display:grid;place-items:center;height:230px;font-family:var(--dsp);font-size:54px;
  color:rgba(var(--gold-rgb),.55)}
html:not(.noanim) .rvq-card{animation:rvq-flip .75s cubic-bezier(.2,1.25,.35,1) both}
@keyframes rvq-flip{
  0%{opacity:0;transform:perspective(900px) rotateY(78deg) scale(.86);filter:blur(16px) brightness(.55)}
  60%{opacity:1;filter:blur(2px) brightness(1)}
  100%{opacity:1;transform:none;filter:none}}
html:not(.noanim) .rvq-card::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  animation:rvq-sheen .9s ease .35s both}
@keyframes rvq-sheen{to{left:120%}}
.rvq-t{display:block;font-family:var(--dsp);font-size:22px;color:var(--cream);margin-bottom:6px}
.rvq-in .b-grad,.rvq-in .b-ghost{width:100%}

.kchips{display:flex;flex-wrap:wrap;gap:7px}
.kchip{padding:8px 13px;border-radius:100px;font-size:12.5px;color:var(--mute);
  border:1px solid var(--line-2);background:var(--surf);transition:.18s}
.kchip.on{color:#fff;background:var(--rose);border-color:var(--rose)}
.annbar{width:100%;display:flex;align-items:center;gap:12px;margin:14px 0 4px;
  padding:14px 16px;border-radius:18px;text-align:left;
  background:rgba(var(--rose-rgb),.07);border:1px solid rgba(var(--rose-rgb),.34)}
.annbar-n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--rose);color:#fff;font-size:13px;font-weight:600}
.annbar-t{flex:1;min-width:0}
.annbar-t b{display:block;font-size:14px;font-weight:500;color:var(--cream)}
.annbar-t small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.annbar-go{flex:none;font-size:12.5px;color:var(--rose);font-weight:500}
.annr{display:flex;align-items:center;gap:6px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:14px;background:var(--surf);padding-right:8px}
.annr.on{border-color:rgba(var(--rose-rgb),.35);background:var(--surf-2)}
.annr-t{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:12px 14px;text-align:left}
.annr-k{width:20px;height:20px;flex:none;border-radius:6px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:#fff}
.annr.on .annr-k{background:var(--rose);border-color:var(--rose)}
.annr-k svg{width:12px;height:12px}
.annr-b{flex:1;min-width:0}
.annr-b b{display:block;font-size:13.5px;font-weight:500;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annr-b small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.asec{border:1px solid var(--line);border-radius:18px;background:var(--surf);
  margin-bottom:10px;overflow:hidden;transition:border-color .25s,background .25s}
.asec.on{border-color:rgba(var(--rose-rgb),.3);background:var(--surf-2)}
.asec-h{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;text-align:left}
.asec-ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--surf-2);border:1px solid var(--line);transition:.25s}
.asec.on .asec-ic{background:rgba(var(--rose-rgb),.13);border-color:rgba(var(--rose-rgb),.32)}
.asec-ic svg{width:16px;height:16px;color:var(--rose)}
.asec-t{flex:1;min-width:0}
.asec-t b{display:block;font-size:14px;font-weight:500;color:var(--cream);line-height:1.3}
.asec-t small{display:block;font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.35}
.asec-n{flex:none;font-size:11px;color:var(--mute);padding:3px 9px;border-radius:100px;
  border:1px solid var(--line);font-variant-numeric:tabular-nums}
.asec-ch{width:15px;height:15px;flex:none;color:var(--line-2);transition:transform .3s var(--e),color .25s}
.asec.on .asec-ch{transform:rotate(90deg);color:var(--rose)}
.asec-b{max-height:0;overflow:hidden;transition:max-height .4s var(--e)}
.asec.on .asec-b{max-height:5000px}
.asec-in{padding:4px 15px 16px}
.asec-h:active{transform:scale(.99)}
.pc .promo-rib{position:absolute;top:9px;left:9px;z-index:4;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:100px;color:#1a0f14;
  background:linear-gradient(120deg,var(--gold),#f2d79a);box-shadow:0 2px 10px rgba(0,0,0,.35)}
/* ── FAQ : la réponse se déplie au clic sur la question ── */
.faq-i{border:1px solid var(--line);border-radius:16px;background:var(--surf);margin-bottom:9px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;text-align:left;
  font-size:14px;font-weight:500;color:var(--cream);line-height:1.4}
.faq-q span{flex:1}
.faq-q svg{width:17px;height:17px;flex:none;color:var(--rose);transition:transform .25s}
.faq-i.on .faq-q svg{transform:rotate(180deg)}
.faq-i.on{border-color:rgba(var(--rose-rgb),.32);background:var(--surf-2)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .34s var(--e)}
.faq-i.on .faq-a{max-height:640px}
.faq-a p{padding:0 16px 15px;font-size:13.5px;color:var(--mute);line-height:1.65;white-space:pre-line}
.faq-adm{display:flex;gap:7px;padding:0 16px 14px}

/* PORTE */
#porte{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:flex-end;
  padding:40px 26px calc(40px + env(safe-area-inset-bottom));
  /* ⇢ REMPLACER : background-image:url('fond.jpg') */
  background:linear-gradient(180deg,rgba(10,7,9,.3),rgba(10,7,9,.86) 55%,var(--noir)),
             radial-gradient(120% 80% at 70% 20%,#4A1C33,#24101C 45%,#0A0709);
  background-size:cover;background-position:center}
.porte-mark{font-family:var(--dsp);font-size:clamp(46px,15vw,78px);letter-spacing:.06em;line-height:1;margin-bottom:14px}
.porte-sub{color:var(--mute);font-size:15px;margin-bottom:36px;max-width:30ch}
.porte-acts{display:flex;flex-direction:column;gap:11px;max-width:400px}
.porte-note{margin-top:24px;font-size:11.5px;color:#6B5A65;line-height:1.7;max-width:42ch}

/* MODALE */
.mdl-bg{position:fixed;inset:0;z-index:96;background:rgba(6,4,6,.85);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
.mdl-bg.on{opacity:1;visibility:visible}
@media(min-width:640px){.mdl-bg{align-items:center}}
.mdl{background:var(--noir-2);border:1px solid var(--line);width:100%;max-width:460px;
  border-radius:24px 24px 0 0;padding:26px 22px calc(30px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .4s var(--e);max-height:90vh;overflow-y:auto}
.mdl-bg.on .mdl{transform:none}
.mback{flex:none;margin-right:2px;align-self:flex-start}
@media(min-width:640px){.mdl{border-radius:24px;padding-bottom:28px}}
.mdl-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:14px}
.mdl-top h2{font-family:var(--dsp);font-size:26px;font-weight:400;line-height:1.15}
.mdl-top p{font-size:13px;color:var(--mute);margin-top:4px}
.x{width:32px;height:32px;border-radius:50%;background:var(--surf);display:grid;place-items:center;color:var(--mute);flex:none}

.yoti{text-align:center}
.seal{width:110px;height:110px;margin:0 auto 24px;position:relative}
.seal-h{position:absolute;inset:0;transition:transform 1s var(--e),opacity 1s var(--e)}
.seal-h.l{clip-path:inset(0 50% 0 0)} .seal-h.r{clip-path:inset(0 0 0 50%)}
.seal.chk{animation:pls 1.2s ease-in-out infinite}
@keyframes pls{50%{transform:scale(.94);opacity:.7}}
.seal.brk .seal-h.l{transform:translateX(-40px) rotate(-12deg);opacity:0}
.seal.brk .seal-h.r{transform:translateX(40px) rotate(12deg);opacity:0}
.yoti h3{font-family:var(--dsp);font-size:24px;font-weight:400;margin-bottom:10px}
.yoti p{color:var(--mute);font-size:14px;margin-bottom:22px}
.yoti .fine{font-size:12px;color:#6B5A65;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);line-height:1.7}
.yoti .fine b{color:var(--rose);font-weight:500}

/* CHASSIS */
.app{min-height:100vh;padding-bottom:96px}
.app.nopad{padding-bottom:0}
.topbar{position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.28)),var(--noir-2);
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rt{flex:none;min-width:0}
.topbar .mk{flex:1;min-width:0;text-align:left}
.topbar .mk{font-family:var(--dsp);font-size:18px;letter-spacing:.14em}
.rt{display:flex;gap:8px;align-items:center}
.pill{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:100px;border:1px solid var(--line-2);color:var(--mute);white-space:nowrap}
.pill.v{color:var(--ok);border-color:rgba(127,207,166,.3)}
.pill.a{color:var(--gold);border-color:rgba(228,196,140,.3)}
.bell{position:relative;width:36px;height:36px;border-radius:11px;background:var(--surf);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--cream);flex:none}
.bell svg{width:17px;height:17px;pointer-events:none}
.bell .bdg{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:100px;background:var(--grad);color:#1A0710;font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--noir);pointer-events:none}
.bell.ring{animation:ring .6s var(--e)}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}

.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;
  /* (voir bloc RENDU ORDINATEUR en fin de feuille) */
  background:var(--noir);border-top:1px solid var(--line);
  padding:9px 0 calc(9px + env(safe-area-inset-bottom))}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;color:var(--mute);transition:color .2s;position:relative}
.tb svg{width:20px;height:20px}
.tb span{font-size:9.5px}
.tb.on{color:var(--rose)}
.tb .cnt{position:absolute;top:0;right:calc(50% - 20px);min-width:15px;height:15px;padding:0 4px;
  border-radius:100px;background:var(--grad);color:#1A0710;font-size:9px;font-weight:700;display:grid;place-items:center}

.wrap{max-width:760px;margin:0 auto;padding:22px 18px 30px}
.sec{margin-bottom:32px}
.sec-h{margin-bottom:14px}
.sec-h h2{font-family:var(--dsp);font-size:23px;font-weight:400}
.sec-h p{font-size:12.5px;color:var(--mute);margin-top:2px}
.view{animation:up .3s var(--e)}
@keyframes up{from{opacity:0;transform:translateY(10px)}}
.card{background:var(--surf);border:1px solid var(--line);border-radius:20px}
.add{width:100%;border:1px dashed var(--line-2);border-radius:var(--r);padding:15px;color:var(--rose);font-weight:500;font-size:14px;transition:.2s}
.add:hover{background:rgba(var(--rose-rgb),.07);border-color:var(--rose)}
.empty{text-align:center;color:var(--mute);font-size:13.5px;padding:24px 12px;line-height:1.6}

/* NOTIFICATIONS */
#np{position:fixed;inset:0;z-index:94;background:rgba(6,4,6,.75);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;display:flex;justify-content:flex-end}
#np.on{opacity:1;visibility:visible}
.np-in{width:100%;max-width:420px;background:var(--noir-2);border-left:1px solid var(--line);
  height:100%;overflow-y:auto;transform:translateX(100%);transition:transform .42s var(--e);
  padding:20px 18px calc(24px + env(safe-area-inset-bottom))}
#np.on .np-in{transform:none}
.np-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.np-h h2{font-family:var(--dsp);font-size:24px;font-weight:400}
/* ── Notification cliquable : elle mène quelque part ── */
.nt-go{cursor:pointer}
.nt-go:active{transform:scale(.99)}
.nt-ch{width:15px;height:15px;flex:none;color:var(--line-2);align-self:center;margin-left:2px}
.nt-go:hover .nt-ch{color:var(--rose)}
.np-tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.np-tabs::-webkit-scrollbar{display:none}
.nf{flex:0 0 auto;padding:9px 14px;border-radius:100px;border:1px solid var(--line);background:var(--surf);
  font-size:12.5px;color:var(--mute);transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.nf.on{color:var(--rose);border-color:rgba(var(--rose-rgb),.5);background:rgba(var(--rose-rgb),.09);font-weight:500}
.nf .n{font-size:10px;background:var(--grad);color:#1A0710;border-radius:100px;padding:1px 5px;font-weight:700}
.np-sub{font-size:12px;color:var(--mute);margin:12px 0 16px;display:flex;justify-content:space-between}
.np-sub button{color:var(--rose);font-size:12px;font-weight:500}
.nt{display:flex;gap:12px;padding:14px;border-radius:16px;background:var(--surf);
  border:1px solid var(--line);margin-bottom:9px;position:relative;overflow:hidden}
.nt.unread{border-color:var(--line-2);background:var(--surf-2)}
.nt.unread::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--grad)}
.nt-ic{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center}
.nt-ic svg{width:16px;height:16px}
.nt-ic.req{background:rgba(var(--rose-rgb),.12);color:var(--rose)}
.nt-ic.ok{background:rgba(127,207,166,.12);color:var(--ok)}
.nt-ic.pay{background:rgba(228,196,140,.12);color:var(--gold)}
.nt-ic.msg{background:rgba(255,126,90,.12);color:var(--coral)}
.nt-ic.bad{background:rgba(210,104,107,.12);color:var(--bad)}
.nt-b{flex:1;min-width:0}
.nt-b b{display:block;font-size:14px;font-weight:500;margin-bottom:3px}
.nt-b p{font-size:12.5px;color:var(--mute);line-height:1.5}
.nt-t{font-size:11px;color:#6B5A65;margin-top:5px}
.nt-a{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.chrono{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--warn);font-variant-numeric:tabular-nums}
.chrono svg{width:12px;height:12px}
.chrono.hot{color:var(--bad);animation:bl 1s infinite}
@keyframes bl{50%{opacity:.45}}

/* MESSAGERIE */
.cv{display:flex;gap:13px;align-items:center;padding:14px;border-radius:16px;background:var(--surf);
  border:1px solid var(--line);margin-bottom:9px;width:100%;text-align:left;transition:.2s}
.cv.unread{border-color:rgba(var(--rose-rgb),.35);background:var(--surf-2)}
.cv .av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--dsp);font-size:19px;color:var(--cream)}
.cv .bd{flex:1;min-width:0}
.cv .bd .tp{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px}
.cv .bd b{font-size:14.5px;font-weight:500}
.cv .bd .tm{font-size:11px;color:#6B5A65;flex:none}
.cv .bd .lm{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv .bd .lm em{font-style:normal;color:var(--gold)}
.cv .nb{min-width:20px;height:20px;padding:0 6px;border-radius:100px;background:var(--grad);
  color:#1A0710;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.chat{display:flex;flex-direction:column;height:calc(100dvh - 62px);max-width:760px;margin:0 auto}
.chat-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex:none}
.chat-h .bk{width:34px;height:34px;border-radius:10px;background:var(--surf);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--cream);flex:none}
.chat-h .bk svg{width:16px;height:16px}
.chat-h .nm{flex:1;min-width:0}
.chat-h .nm b{display:block;font-family:var(--dsp);font-size:19px;font-weight:400}
.chat-h .nm small{font-size:11.5px;color:var(--mute)}
.chat-b{flex:1;overflow-y:auto;padding:18px}
.chat-f{flex:none;padding:12px 18px;border-top:1px solid var(--line);background:var(--noir);
  margin-bottom:calc(60px + env(safe-area-inset-bottom))}
.thread{display:flex;flex-direction:column;gap:10px}
.bub{max-width:80%;padding:12px 15px;border-radius:18px;font-size:14.5px;line-height:1.5}
.bub.them{background:var(--surf);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.bub.me{background:#3A2130;border-bottom-right-radius:5px;align-self:flex-end}
.bub .tm{font-size:10.5px;color:var(--mute);margin-top:5px}
.drop{max-width:82%;align-self:flex-start;border-radius:18px;border-bottom-left-radius:5px;
  overflow:hidden;background:var(--surf);border:1px solid rgba(228,196,140,.3)}
.drop.mine{align-self:flex-end;border-bottom-left-radius:18px;border-bottom-right-radius:5px}
.drop .hdr{padding:9px 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--line);background:rgba(228,196,140,.05)}
.drop .md{aspect-ratio:16/10;position:relative}
.drop .ft{padding:12px 15px;font-size:12.5px;color:var(--mute)}
.composer{display:flex;gap:6px;align-items:center}
.composer input{flex:1;min-width:0;padding:13px 15px;border-radius:100px;background:var(--surf);
  border:1px solid var(--line);color:var(--cream);font-size:14.5px}
.composer input:focus{outline:none;border-color:var(--rose)}
.composer .snd{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#1A0710;
  display:grid;place-items:center;flex:none}
.composer .snd svg{width:18px;height:18px}
.composer .att{width:42px;height:42px;border-radius:50%;border:1px solid rgba(228,196,140,.32);
  color:var(--gold);display:grid;place-items:center;flex:none;transition:.2s}
.composer .att:active{background:rgba(228,196,140,.12)}
.composer .att svg{width:17px;height:17px}
.composer #mic:active{color:var(--bad);border-color:rgba(210,104,107,.5)}

/* ADMIN */
.cat{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:11px}
.cat.svc{border-color:rgba(228,196,140,.25)}
.cat.off{opacity:.5}
.cat-h{display:flex;align-items:center;gap:12px}
.cat-ic{width:46px;height:46px;border-radius:13px;background:var(--surf-2);display:grid;place-items:center;
  font-size:21px;flex:none;overflow:hidden;background-size:cover;background-position:center}
.cat-h .nm{flex:1;min-width:0}
.cat-h .nm b{display:block;font-size:15.5px;font-weight:500}
.icn{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--mute);flex:none;transition:.2s}
.icn:hover{color:var(--rose);background:var(--surf-2)}
.icn.del:hover{color:var(--bad)}
.icn:disabled{opacity:.25}
.icn svg{width:16px;height:16px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tag{font-size:11px;padding:5px 10px;border-radius:100px;background:var(--surf-2);color:var(--mute);border:1px solid var(--line)}
.tag.g{color:var(--gold);border-color:rgba(228,196,140,.25)}
.tag.r{color:var(--rose);border-color:rgba(var(--rose-rgb),.25)}
.tag.k{color:var(--ok);border-color:rgba(127,207,166,.25)}
/* arbre de sous-dossiers */
.tree{margin-top:12px}
.tnode{padding-left:14px;border-left:1px solid var(--line-2);margin-top:2px}
.trow{display:flex;align-items:center;gap:9px;padding:8px 0}
.trow .tv{width:32px;height:32px;border-radius:9px;background:var(--surf-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:14px;flex:none;overflow:hidden;
  background-size:cover;background-position:center}
.trow .dot{width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none}
.trow .nm{flex:1;min-width:0}
.trow .nm b{font-size:13.5px;font-weight:500;display:block}
.trow .nm small{font-size:11.5px;color:var(--mute)}
.add-sub{color:var(--rose);font-size:12.5px;font-weight:500;padding:7px 0}

.tier-a{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:17px;margin-bottom:11px}
.tier-a.gold{border-color:rgba(228,196,140,.35)}
.tier-a .th{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tier-a h3{font-family:var(--dsp);font-size:20px;font-weight:500}
.tier-a .pr{font-family:var(--dsp);font-size:22px;color:var(--gold);white-space:nowrap}
.tier-a .pr small{font-family:var(--bdy);font-size:11px;color:var(--mute)}
.tier-a .ds{font-size:13px;color:var(--mute);margin-top:5px}

.itm{display:flex;gap:12px;align-items:center;padding:12px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px}
.itm .th2{width:46px;height:58px;border-radius:9px;flex:none}
.itm .bd{flex:1;min-width:0}
.itm .bd b{display:block;font-size:14.5px;font-weight:500;margin-bottom:3px}
.itm .bd .mt{font-size:11.5px;color:var(--mute)}

.rq{padding:14px;border-radius:16px;background:var(--surf);border:1px solid var(--line);margin-bottom:9px}
.rq.pending{border-color:rgba(var(--rose-rgb),.3)}
.rq.accepted{border-color:rgba(232,165,75,.35)}
.rq.paid{border-color:rgba(127,207,166,.35)}
.rq.expired,.rq.refused{opacity:.55}
.rq-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rq-h b{font-size:14.5px;font-weight:500}
.rq-h small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.st{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:100px;white-space:nowrap}
.st.pending{color:var(--rose);background:rgba(var(--rose-rgb),.1)}
.st.accepted{color:var(--warn);background:rgba(232,165,75,.1)}
.st.paid{color:var(--ok);background:rgba(127,207,166,.1)}
.st.expired,.st.refused{color:var(--bad);background:rgba(210,104,107,.1)}

/* VITRINE */
.cover{position:relative;height:50vh;min-height:340px;display:flex;align-items:flex-end;padding:0 20px 24px;
  background:radial-gradient(110% 80% at 65% 25%,#5A2440,#2A1220 48%,#0A0709);background-size:cover;background-position:center}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,7,9,.55) 68%,var(--noir))}
.cover-in{position:relative;z-index:2;max-width:760px;margin:0 auto;width:100%}
.cover h1{font-family:var(--dsp);font-size:clamp(42px,13vw,68px);font-weight:400;line-height:.95}
.cover .hd{color:var(--rose);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
.cover .bio{opacity:.78;font-size:15px;max-width:40ch;margin-top:12px}
.cover .stt{display:flex;gap:22px;margin-top:18px}
.cover .stt b{font-family:var(--dsp);font-size:19px;display:block}
.cover .stt span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.rail{position:sticky;top:0;z-index:35;background:var(--noir);border-bottom:1px solid var(--line);padding:12px 0}
.rail-in{display:flex;gap:8px;overflow-x:auto;padding:0 18px;scrollbar-width:none}
.rail-in::-webkit-scrollbar{display:none}
.rc{white-space:nowrap;padding:9px 16px;border-radius:100px;border:1px solid var(--line);
  background:var(--surf);font-size:13.5px;color:var(--mute);display:flex;align-items:center;gap:7px;transition:.2s}
.rc:hover{border-color:var(--line-2);color:var(--cream)}
.rc.on{color:var(--rose);border-color:rgba(var(--rose-rgb),.5);background:rgba(var(--rose-rgb),.09);font-weight:500}
.rc .ci{width:18px;height:18px;border-radius:5px;background-size:cover;background-position:center;flex:none}

/* section par dossier */
.dsec{margin-bottom:38px}
.dsec-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dsec-h .ic{width:38px;height:38px;border-radius:11px;background:var(--surf-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:18px;flex:none;overflow:hidden;background-size:cover;background-position:center}
.dsec-h .tt{flex:1;min-width:0}
.dsec-h h3{font-family:var(--dsp);font-size:25px;font-weight:400;line-height:1.1}
.dsec-h small{font-size:11.5px;color:var(--mute)}
.dsec-h .more{font-size:12.5px;color:var(--rose);font-weight:500;flex:none}
.dsec-tap{cursor:pointer}
.dsec-tap:active{opacity:.55}
@media(hover:hover){.dsec-tap:hover .more{text-decoration:underline}}
.dsec-l{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);margin-bottom:16px}

/* tuiles de sous-dossiers */
.folders{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:14px}
.fo{display:flex;align-items:center;gap:11px;padding:13px;border-radius:15px;background:var(--surf);
  border:1px solid var(--line);text-align:left;transition:.2s;width:100%}
.fo:hover{border-color:var(--rose);transform:translateY(-2px)}
.fo .fi{width:34px;height:34px;border-radius:10px;background:var(--surf-2);display:grid;place-items:center;flex:none;color:var(--gold)}
.fo .fi svg{width:16px;height:16px}
.fo .fb{flex:1;min-width:0}
.fo .fb b{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo .fb small{font-size:11px;color:var(--mute)}

/* fil d'Ariane */
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px;font-size:12.5px}
.crumb button{color:var(--mute);transition:.2s}
.crumb button:hover{color:var(--rose)}
.crumb .cur{color:var(--cream);font-weight:500}
.crumb .sp{color:var(--line-2)}

.grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
/* réglages d'affichage par dossier */
.grid.large{gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid.large .pc .md{aspect-ratio:4/5}
.grid.large .pc .ft{padding:14px 16px 16px}
.grid.large .pc .ft b{font-size:16px}
.grid.list{grid-template-columns:1fr;gap:10px}
.grid.list .pc{flex-direction:row;align-items:stretch}
.grid.list .pc .md{width:112px;aspect-ratio:1;flex:none}
.grid.list .pc .ft{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
.grid.list .pc .ft b{font-size:15px}
.grid.list .veil{gap:5px;padding:8px}
.grid.list .veil .pr{font-size:15px}
.grid.list .veil .lb{font-size:8.5px}
.grid.list .veil .b-unlock,.grid.list .veil .b-tier{font-size:10px;padding:5px 9px}
.pc{border-radius:18px;overflow:hidden;background:var(--surf);border:1px solid var(--line);
  transition:transform .3s var(--e),border-color .3s;display:flex;flex-direction:column}
.pc:hover{transform:translateY(-4px);border-color:var(--line-2)}
.pc .md{aspect-ratio:3/4;position:relative}
/* ⇢ REMPLACER : <img src="URL SIGNÉE"> */
.ph{position:absolute;inset:0}
.veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:14px;text-align:center;
  background:repeating-linear-gradient(-45deg,rgba(10,7,9,.82) 0 8px,rgba(10,7,9,.7) 8px 16px);
  backdrop-filter:blur(18px);transition:opacity .6s var(--e)}
.open .veil{opacity:0;pointer-events:none}
.veil .lk{width:17px;height:17px;color:var(--gold);opacity:.75}
.veil .lb{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);line-height:1.4}
.veil .pr{font-family:var(--dsp);font-size:20px;color:var(--gold)}
.b-unlock{background:var(--grad);color:#1A0710;font-weight:600;font-size:12px;padding:8px 14px;border-radius:100px;transition:transform .2s var(--e)}
.b-unlock:hover{transform:scale(1.06)}
.b-tier{border:1px solid var(--gold);color:var(--gold);font-size:11.5px;padding:7px 13px;border-radius:100px}
.pc .ft{padding:11px 13px 13px}
.pc .ft b{display:block;font-size:13.5px;font-weight:500;margin-bottom:5px;line-height:1.3}
.pc .ft small{font-size:11px;color:var(--mute);display:block}
.incl{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:100px}
.incl.free{color:var(--ok);background:rgba(127,207,166,.1);border:1px solid rgba(127,207,166,.25)}
.incl.pay{color:var(--gold);background:rgba(228,196,140,.08);border:1px solid rgba(228,196,140,.25)}

.svc-opt{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;
  background:var(--surf);border:1px solid var(--line);margin-bottom:9px}
.svc-opt .nm{flex:1;min-width:0}
.svc-opt .nm b{font-size:14px;font-weight:500;display:block}
.svc-opt .nm small{font-size:12px;color:var(--mute)}
.gcard{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:11px}
.gcard.roul{border-color:rgba(228,196,140,.28)}
.gcard.trust{border-color:rgba(var(--rose-rgb),.24)}
.gcard-h{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.gcard-h .gi{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-size:19px;background:var(--surf-2);border:1px solid var(--line)}
.gcard-h .gt{flex:1;min-width:0}
.gcard-h .gt b{display:block;font-size:14.5px;font-weight:500}
.gcard-h .gt small{font-size:11.5px;color:var(--mute)}
.gcard p.gd{font-size:12.5px;color:var(--mute);line-height:1.45;margin:0 0 12px}
.gcard p.gd b{color:var(--cream)}
.gcard p.ginfo{font-size:12.5px;color:var(--cream);line-height:1.5;margin:0 0 12px;padding:9px 12px;
  border-radius:11px;background:var(--surf-2);border:1px solid var(--line);white-space:pre-wrap}
.dsec-d{font-size:12.5px;color:var(--mute);line-height:1.5;margin:7px 0 2px;white-space:pre-wrap}
.gcard-a{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.roul-list{margin:2px 0 12px;display:flex;flex-direction:column;gap:7px}
.roul-seg{display:flex;align-items:center;gap:10px;font-size:12.5px}
.roul-seg .rl{flex:1;min-width:0;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roul-seg .rbar{flex:none;width:88px;height:6px;border-radius:100px;background:var(--surf-2);overflow:hidden}
.roul-seg .rbar>i{display:block;height:100%;border-radius:100px;background:var(--grad)}
.roul-seg .rp{flex:none;width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--gold);font-weight:600}
/* ── Jeu de la confiance : curseur de mise ── */
.trust-box{margin:4px 0 10px}
.trust-rg{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  outline:none;margin:8px 0 6px;
  background:linear-gradient(90deg,var(--rose) var(--p,0%),var(--line-2) var(--p,0%))}
.trust-rg::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--rose);border:3px solid var(--noir-2);box-shadow:0 2px 10px rgba(var(--rose-rgb),.45)}
.trust-rg::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--rose);
  border:3px solid var(--noir-2)}
.trust-lim{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute);
  font-variant-numeric:tabular-nums;margin-bottom:9px}
.trust-err{font-size:12px;color:var(--warn);line-height:1.45;margin:8px 0 0;
  padding:9px 12px;border-radius:12px;background:rgba(232,165,75,.08);
  border:1px solid rgba(232,165,75,.32)}
.trust-in{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.trust-in input{width:118px;flex:none;text-align:right;
  -webkit-appearance:none;appearance:none;
  padding:12px 14px;border-radius:14px;
  background:var(--noir-2);border:1px solid var(--line-2);color:var(--cream);
  font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
.trust-in input:focus{outline:none;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(var(--rose-rgb),.15)}
.trust-in input::placeholder{color:#6B5A65}
/* iOS ajoute des flèches sur les champs numériques : on les retire */
.trust-in input::-webkit-outer-spin-button,
.trust-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.trust-in .eq{font-size:12.5px;color:var(--mute)}
.trust-in .eq b{color:var(--gold)}
.gseg-ed{display:flex;gap:7px;margin-bottom:7px}
.gseg-bank{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 10px;
  font-size:12.5px;color:var(--mute)}
.gseg-bank .stk{width:58px;padding:8px 10px;border-radius:10px;background:var(--noir-2);
  border:1px solid var(--line-2);color:var(--cream);text-align:center}
.gseg-bank b{color:var(--gold)}
.gseg-pool{margin:-4px 0 12px;padding:10px;border-radius:14px;background:var(--noir-2);
  border:1px solid var(--line);max-height:220px;overflow:auto}
.gseg-ed input{-webkit-appearance:none;appearance:none;
  padding:11px 13px;border-radius:12px;
  background:var(--noir-2);border:1px solid var(--line-2);color:var(--cream);
  font-size:16px}
.gseg-ed input:focus{outline:none;border-color:var(--rose)}
.gseg-ed input::placeholder{color:#6B5A65}
.gseg-ed input::-webkit-outer-spin-button,
.gseg-ed input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gseg-ed input.sl{flex:1;min-width:0}
.gseg-ed input.sp{width:80px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.dispo{font-size:12px;color:var(--mute);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.dispo svg{width:13px;height:13px;color:var(--gold)}

.tiers-c{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tc{position:relative;border:1px solid var(--line);border-radius:22px;padding:26px 20px;
  background:linear-gradient(170deg,var(--surf-2),var(--surf));display:flex;flex-direction:column;overflow:hidden}
.tc.hero{border-color:rgba(228,196,140,.42)}
.tc.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tc.act{border-color:rgba(127,207,166,.4)}
.tc .flag{position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tc h3{font-family:var(--dsp);font-size:26px;font-weight:400;margin-bottom:4px}
.tc .pr{font-family:var(--dsp);font-size:40px;color:var(--gold);margin:15px 0 3px;line-height:1}
.tc .pr small{font-family:var(--bdy);font-size:12px;color:var(--mute)}
.tc .ds{font-size:13.5px;color:var(--mute);margin-bottom:14px}
.tc .drp{display:flex;gap:8px;align-items:flex-start;padding:11px 13px;border-radius:13px;
  background:rgba(228,196,140,.06);border:1px solid rgba(228,196,140,.22);margin-bottom:14px}
.tc .drp svg{width:14px;height:14px;color:var(--gold);flex:none;margin-top:2px}
.tc .drp span{font-size:12.5px;color:var(--gold);line-height:1.45}
.tc .cnt2{font-size:10.5px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.tc ul{list-style:none;flex:1;margin-bottom:20px}
.tc li{display:flex;gap:9px;font-size:13.5px;color:var(--mute);padding:5px 0}
.tc li svg{width:13px;height:13px;color:var(--gold);flex:none;margin-top:4px}
.tc .edit{margin-top:9px;font-size:12.5px;color:var(--rose);font-weight:500;text-align:center;padding:8px}

.amt{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}
.amt .l{font-size:13px;color:var(--mute)}
.amt .v{font-family:var(--dsp);font-size:30px;color:var(--gold)}
.done{text-align:center;padding:20px 0 6px}
.tick{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:rgba(127,207,166,.12);border:1px solid rgba(127,207,166,.4);color:var(--ok)}
.done h4{font-family:var(--dsp);font-size:22px;font-weight:400;margin-bottom:6px}
.done p{color:var(--mute);font-size:14px}

footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 18px 0}
.lg{font-size:11px;color:#5C4C55;line-height:1.75;max-width:70ch;margin:0 auto}
.lg b{color:var(--mute)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ── FLUIDITÉ ──────────────────────────────────────────────────────────
   Retour tactile sur ce qui se tape, défilement à inertie, et suppression
   du flash gris que met iOS sur chaque appui. */
*{-webkit-tap-highlight-color:transparent}
.pc,.fo,.tc,.bankrow,.cv,.rc,.nf,.tb,.faq-q,.add,.add-sub,.icn,.sw,.b-grad,.b-ghost,.b-sm,.b-sm2,
.svc-opt,.tour-b,.tour-skip{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pc,.fo,.tc,.cv,.bankrow,.sw,.faq-q,.svc-opt,.rc,.nf{
  transition:transform .16s var(--e),background .2s,border-color .2s,color .2s}
.pc:active,.fo:active,.tc:active,.cv:active,.bankrow:active,.sw:active,
.faq-q:active,.svc-opt:active{transform:scale(.985)}
.b-grad:active,.b-ghost:active,.b-sm:active,.b-sm2:active,
.add:active,.add-sub:active,.tour-b:active{transform:scale(.97)}
.rc:active,.nf:active{transform:scale(.94)}
.icn:active{transform:scale(.88)}
.tb:active svg{transform:scale(.88)}
.tb svg{transition:transform .16s var(--e)}
/* inertie iOS, et la page derrière ne suit plus quand on fait défiler un panneau */
.mdl,.np-in,.chat-b,.bkf-row,.np-tabs,.th-tabs,.smpl,.rvf,.gpre{
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* visite guidée : le carton reste en place, seul son contenu se relaie */
.tour-in{animation:tourSwap .32s var(--e)}
@keyframes tourSwap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
body,button,input,textarea,select{font-family:var(--body,'Jost'),system-ui,sans-serif}
/* l'éditeur photo/vidéo grave toujours en Jost : l'aperçu doit être identique,
   même si Miriyu choisit une autre police de corps pour le site */
.ctx,.txt-in textarea{font-family:'Jost',system-ui,sans-serif}

/* mode application (écran d'accueil) : rien sous l'encoche ni la barre home ;
   dans Safari classique ces marges valent zéro — aucun changement visible */
.tabbar{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
#porte{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}

/* ═══ ORDINATEUR UNIQUEMENT — le téléphone ne lit jamais ces règles ═══
   Colonne centrale posée sur un décor aux couleurs de la marque ;
   tout ce qui est fixé à l'écran est contraint à la même colonne. */
@media (min-width:900px){
  body::before{content:"";position:fixed;inset:0;z-index:-2;
    background:linear-gradient(180deg,#070508,#0B080B 55%,#080609)}
  body::after{content:"";position:fixed;z-index:-1;top:-22vh;left:-12vw;
    width:72vw;height:56vh;border-radius:50%;
    background:var(--grad);opacity:.06;filter:blur(150px)}
  #app{max-width:720px;margin:0 auto;min-height:100vh;background:var(--noir);
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    box-shadow:0 0 90px rgba(0,0,0,.55)}
  .tabbar{max-width:720px;left:0;right:0;margin:0 auto;
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .ck2{max-width:700px;left:0;right:0;margin:0 auto}
  #porte{max-width:none;left:0;right:0;margin:0;border:none}
  #yoti{max-width:720px;left:0;right:0;margin:0 auto;
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .cam{width:min(520px,100%);left:0;right:0;margin:0 auto;
    border-left:1px solid rgba(255,255,255,.08);
    border-right:1px solid rgba(255,255,255,.08)}
  .bub{max-width:440px}
}
/* ── grand écran : page de bienvenue plein écran (façon MYM) ── */
@media(min-width:960px){
  html,body{overscroll-behavior:auto}
  #welp{overflow-y:auto}
  #porte{position:fixed;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:0 8vw;text-align:center;
    background:
      radial-gradient(58% 78% at 16% 18%,rgba(var(--rose-rgb),.18),transparent 60%),
      radial-gradient(48% 66% at 86% 80%,rgba(var(--gold-rgb),.14),transparent 62%),
      var(--noir)}
  #porte .fxlayer{position:absolute;inset:0}
  #porte .porte-mark{font-size:clamp(72px,9vw,150px);letter-spacing:.02em;line-height:1}
  #porte .porte-sub{font-size:21px;max-width:640px;margin:20px auto 38px}
  #porte .porte-acts{display:flex;flex-direction:row;gap:16px;width:auto;justify-content:center}
  #porte .porte-acts button{min-width:250px;font-size:17px;padding:17px 26px;width:auto}
  #porte .porte-note{margin-top:36px;max-width:560px;font-size:13px}
}
/* survols à la souris — jamais au doigt */
@media (hover:hover) and (min-width:900px){
  .md{transition:transform .22s var(--e),filter .22s var(--e)}
  .md:hover{transform:translateY(-3px)}
  .bankrow:hover,.cv:hover,.rc:hover,.b-ghost:hover,.b-sm:hover,.att:hover{
    border-color:var(--line-2);
    box-shadow:0 0 0 1px rgba(var(--gold-rgb),.12) inset,
      0 12px 34px -18px rgba(0,0,0,.72)}
  .b-grad:hover,.cam-send2:hover{filter:brightness(1.07)}
  .tb:hover span{color:var(--cream)}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
    border:3px solid #080609}
  ::-webkit-scrollbar-track{background:transparent}
}

/* ═══ COUCHE DE FLUIDITÉ GLOBALE ═══════════════════════════════════════
   Retour tactile universel + transitions des états et des couleurs.
   Le contenu des vues garde sa règle : animation au changement d'onglet. */
.asec-ch{transition:transform .3s var(--e),color .2s ease}
.sw .kn::after{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
button,.bankrow,.chip,.rc,.kchip,.ck,.icn,.asec-h,.tb,.annr{
  transition:transform .16s cubic-bezier(.2,.7,.3,1),opacity .16s ease,
             background-color .22s ease,border-color .22s ease,
             color .22s ease,box-shadow .22s ease}
.pc,.gcard,.card{transition:transform .18s cubic-bezier(.2,.7,.3,1),
  box-shadow .25s ease,border-color .25s ease}
input,textarea,select{transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.rail-in,.bkf-row,.np-tabs,.th-tabs{-webkit-overflow-scrolling:touch}
@media (hover:none){
  button:active,.bankrow:active,.chip:active,.rc:active,.kchip:active,
  .icn:active,.ck:active,.asec-h:active,.tb:active{transform:scale(.96)}
  .sw:active{transform:scale(.98)}
  .pc:active,.gcard:active,.card:active,.annr:active{transform:scale(.985)}
}
.qc{transition:none}   /* choix délibéré : les lots répondent instantanément */
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 86px);
  transform:translateX(-50%) translateY(14px);z-index:130;max-width:86vw;
  padding:11px 18px;border-radius:100px;font-size:13.5px;font-weight:500;text-align:center;
  background:rgba(20,14,18,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);color:var(--cream);
  box-shadow:0 12px 34px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.3,1)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:rgba(255,92,120,.5);color:#FFD9E0}
.cam-v{touch-action:none}                     /* pincer zoome la caméra, jamais la page */
.cam,.cam *{-webkit-user-select:none;user-select:none}
.cam #txtin{-webkit-user-select:text;user-select:text}
.cam,#welp{overscroll-behavior:contain}
#porte.hasbg{background-size:cover;background-position:center}
#porte.hasbg .porte-note,#porte.hasbg .porte-sub{text-shadow:0 1px 12px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══ RENDU ORDINATEUR — le mobile reste la référence ; sur grand écran,
   l'application vit dans une colonne centrée, mise en scène. La caméra,
   le plein écran des médias et le guide gardent tout l'écran. ═══ */
@media (min-width:900px){
  body{background:
    radial-gradient(1100px 760px at 72% -8%, rgba(var(--rose-rgb),.10), transparent 60%),
    radial-gradient(900px 680px at 8% 108%, rgba(var(--gold-rgb),.07), transparent 55%),
    #0a0608}
  #screen{max-width:520px;margin:0 auto;min-height:100vh;background:var(--noir);
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    box-shadow:0 0 120px -40px rgba(0,0,0,.9)}
  /* centrage SANS transform : les composants animés par transform (.ck2…)
     ne doivent JAMAIS être re-centrés par transform — collision d'états. */
  .tabbar{left:0;right:0;margin:0 auto;max-width:520px;
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .mdl{max-width:560px;margin-left:auto;margin-right:auto}
  #porte{align-items:center}
  #porte>*{width:100%;max-width:520px}
  #yoti{align-items:center}
  #yoti>*{width:100%;max-width:520px}
}

/* ═══ CASINO NÉON — couche de cascade FINALE, posée après tout le reste :
   gagne sur les règles antérieures sans les réécrire, réversible d'un bloc.
   Actif UNIQUEMENT sous html.th-casino (thème 'casino' choisi) — zéro impact
   sur le matsuri japonais ou les autres palettes. ═══ */
html.fx-off-torii .foot::before{display:none}
html.fx-off-kintsugi .gcard::after,html.fx-off-kintsugi .pvc::after{display:none}
html.th-casino .b-lancer{
  background:linear-gradient(180deg,#FF4FC3,#9B30FF);
  border-color:rgba(var(--gold-rgb),.85);
  box-shadow:0 .09em 0 rgba(78,8,64,.9),0 14px 34px -12px rgba(255,46,156,.65),
    0 0 26px -4px rgba(155,48,255,.6);
  text-shadow:0 2px 0 rgba(78,8,64,.65)}
html.th-casino .whub{
  box-shadow:0 0 0 3px rgba(var(--rose-rgb),.65),0 0 18px 2px rgba(var(--rose-rgb),.5),
    0 6px 16px -6px #000,inset 0 -4px 8px rgba(0,0,0,.35)}
/* ampoules de la roue : chasse lumineuse magenta→or au lieu du simple clignotement doré */
html.th-casino:not(.noanim) .wblt b{animation:wb-tw-casino 1.1s ease-in-out infinite alternate}
@keyframes wb-tw-casino{
  0%{opacity:1;box-shadow:0 0 10px 2px rgba(var(--rose-rgb),.9),0 0 4px rgba(255,255,255,.9)}
  50%{opacity:.55;box-shadow:0 0 15px 3px rgba(var(--gold-rgb),.9),0 0 4px rgba(255,255,255,.9)}
  100%{opacity:1;box-shadow:0 0 10px 2px rgba(var(--rose-rgb),.9),0 0 4px rgba(255,255,255,.9)}}
/* le ticket garde son identité sanctuaire (おみくじ, 運) — le casino arrive par
   la LUMIÈRE, pas en effaçant le japon : liseré néon et dégradé électrique
   sur l'en-tête, à la place du rouge plat, sans toucher au texte ni au kanji */
html.th-casino .omik{
  box-shadow:0 12px 30px -14px #000,inset 0 -3px 10px rgba(0,0,0,.08),
    0 0 0 1px rgba(var(--rose-rgb),.5),0 0 30px -6px rgba(155,48,255,.6)}
html.th-casino .omik-h{background:linear-gradient(90deg,#FF2E9C,#9B30FF)}
html.th-casino .omik .wrt{color:var(--gold);text-shadow:0 0 10px rgba(var(--gold-rgb),.55)}
html.th-casino .hanko{box-shadow:0 0 0 2px rgba(var(--rose-rgb),.65),0 0 16px -2px rgba(var(--rose-rgb),.6),
  0 6px 14px -6px rgba(0,0,0,.7)}
html.th-casino .f3b{background:radial-gradient(circle at 50% 36%,#2A1030,#170822 70%);
  border-color:rgba(var(--rose-rgb),.5);color:var(--gold);
  text-shadow:0 0 14px rgba(var(--gold-rgb),.5)}
/* reflet holographique façon carte de collection, en balayage continu (pas de suivi tactile) */
html.th-casino .flip3d .f3f{position:relative;overflow:hidden}
html.th-casino:not(.noanim) .flip3d .f3f::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.6) 45%,
    rgba(255,46,156,.45) 50%,rgba(155,48,255,.45) 55%,transparent 70%);
  background-size:220% 220%;mix-blend-mode:color-dodge;
  animation:holo-sweep 2.4s ease-in-out infinite}
@keyframes holo-sweep{0%{background-position:120% 120%}100%{background-position:-20% -20%}}
/* palier « jackpot » : flash plein écran pour les tirages rares (jackpotFlash(), JS) */
#jpf{position:fixed;inset:0;z-index:97;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 40%,rgba(var(--gold-rgb),.55),transparent 62%)}
#jpf.go{animation:jpf-pop .9s cubic-bezier(.2,.85,.25,1)}
@keyframes jpf-pop{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
html.noanim #jpf{display:none}
html.th-casino .wres.jackpot .wrt{
  color:var(--gold);text-shadow:0 0 12px rgba(var(--gold-rgb),.8),0 0 26px rgba(var(--rose-rgb),.5)}
html.th-casino:not(.noanim) .wres.jackpot .wrt{animation:jpt-pulse 1.1s ease-in-out infinite alternate}
@keyframes jpt-pulse{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ═══ AMÉLIORATION GLOBALE — couche finale, tout le site ═══
   Zéro spécificité (:where) : n'écrase AUCUNE règle existante, ne fait
   qu'ajouter là où rien n'était défini. Tout s'éteint sous html.noanim. */
/* 1 · pressé = enfoncé : toute l'interface répond en 3D sous le doigt */
:where(button,.rc,.kchip,.tico,.th-c,.sw,.ck,.tag){transition-property:transform,box-shadow,filter,opacity;
  transition-duration:.18s;transition-timing-function:var(--e)}
html:not(.noanim) :where(button,.rc,.kchip,.tico,.th-c,.sw,.ck):active{transform:translateY(1px) scale(.97)}
html:not(.noanim) :where(.gcard,.crc,.pvc,.cat,.omik):active{transform:perspective(700px) rotateX(1.6deg) scale(.988)}
/* 2 · chaque écran entre en cascade — une seule fois (classe .stg posée par paint()
   au vrai changement d'écran puis retirée : un like ne peut PAS la rejouer) */
html:not(.noanim) #screen.stg>.view>*{animation:rise-in .48s var(--e) both}
html:not(.noanim) #screen.stg>.view>*:nth-child(2){animation-delay:.05s}
html:not(.noanim) #screen.stg>.view>*:nth-child(3){animation-delay:.1s}
html:not(.noanim) #screen.stg>.view>*:nth-child(4){animation-delay:.15s}
html:not(.noanim) #screen.stg>.view>*:nth-child(n+5){animation-delay:.2s}
@keyframes rise-in{from{opacity:0;transform:translateY(14px) scale(.988);filter:blur(7px)}
  60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}
.mdl-bg{transition:.42s cubic-bezier(.3,.8,.3,1)}
/* 3 · la modale se pose avec un léger ressort au lieu d'une simple glissade */
.mdl{transition:transform .46s cubic-bezier(.22,1.18,.32,1)}
/* 4 · anneau de focus doré — clavier et accessibilité, sans toucher au tactile */
:where(button,input,select,textarea):focus-visible{outline:2px solid rgba(var(--gold-rgb),.8);outline-offset:2px}