/* ═══════════════════════════════════════════════════════════════════════
   PreLook — Espace salon · Design System v6 « Satin »
   Georgia partout. Un dégradé violet → rose → orange, toujours doux.
   Des surfaces en verre dépoli plutôt que des cases, beaucoup d'air.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Encre */
  --ink:#241B35;
  --ink-soft:#5A5168;
  --ink-mute:#8E869B;
  --hair:rgba(36,27,53,.08);
  --hair-strong:rgba(36,27,53,.14);

  /* Marque */
  --violet:#6B4DE6;
  --violet-deep:#5A3FD0;
  --pink:#B85FA8;
  --orange:#E89B5A;
  --satin:linear-gradient(120deg,#7D66EA 0%,#B57CC0 52%,#E9A57B 100%);
  --satin-soft:linear-gradient(120deg,rgba(125,102,234,.14),rgba(181,124,192,.12) 52%,rgba(233,165,123,.14));
  --satin-line:linear-gradient(90deg,rgba(125,102,234,0),rgba(125,102,234,.45) 20%,rgba(181,124,192,.45) 55%,rgba(233,165,123,.45) 80%,rgba(233,165,123,0));

  /* Surfaces */
  --canvas:#FBF9FC;
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.84);
  --glass-edge:rgba(255,255,255,.9);
  --shadow:0 1px 1px rgba(36,27,53,.03),0 18px 40px -26px rgba(86,63,208,.28);

  /* États */
  --ok:#2E7A5B; --ok-wash:rgba(46,122,91,.09);
  --warn:#9A6116; --warn-wash:rgba(232,155,90,.14);
  --bad:#B03A4A; --bad-wash:rgba(176,58,74,.08);

  --serif:Georgia,"Times New Roman",serif;
  --r-lg:26px; --r-md:18px; --r-sm:12px;

  /* Compatibilité pages existantes */
  --text:var(--ink); --text-light:var(--ink-soft); --subtle:var(--ink-mute);
  --purple:var(--violet); --purple-mid:var(--violet-deep); --grad-main:var(--satin);
  --line:var(--hair); --line-strong:var(--hair-strong); --surface:var(--glass-strong);
  --violet-wash:rgba(107,77,230,.08); --sans:var(--serif);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--canvas)}
body{
  font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink);
  -webkit-font-smoothing:antialiased;min-height:100vh;background:var(--canvas);position:relative;
}
/* Voile satiné fixe : violet en haut à gauche, rose à droite, pêche en bas */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70vw 60vh at 4% -6%,rgba(125,102,234,.17),transparent 64%),
    radial-gradient(60vw 55vh at 100% 6%,rgba(214,128,176,.13),transparent 62%),
    radial-gradient(70vw 60vh at 72% 106%,rgba(233,165,123,.15),transparent 64%);
}
.bg{display:none}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:400;letter-spacing:0;line-height:1.2}
p{font-family:var(--serif);font-size:inherit;line-height:1.65;color:var(--ink-soft)}
a{color:inherit}
button,input,select,textarea{font-family:var(--serif)}
:focus-visible{outline:2px solid rgba(107,77,230,.55);outline-offset:3px;border-radius:10px}
::selection{background:rgba(181,124,192,.22)}

/* ── Navigation flottante ────────────────────────────────────────────── */
.dn{
  position:sticky;top:14px;z-index:200;
  margin:14px auto 0;max-width:1120px;width:calc(100% - 32px);
  height:60px;padding:0 10px 0 18px;display:flex;align-items:center;gap:20px;
  background:rgba(255,255,255,.62);
  backdrop-filter:saturate(1.5) blur(22px);-webkit-backdrop-filter:saturate(1.5) blur(22px);
  border:1px solid var(--glass-edge);border-radius:20px;box-shadow:var(--shadow);
}
.dn-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.dn-brand img{width:28px;height:28px;border-radius:8px}
.dn-brand-name{font-size:1.12rem;color:var(--ink);line-height:1}
.dn-brand-tag{font-style:italic;font-size:.72rem;color:var(--ink-mute);margin-top:3px}
.dn-tabs{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
.dn-tabs::-webkit-scrollbar{display:none}
.dn-tab{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:12px;
  font-size:.9rem;color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:color .2s,background .2s;
}
.dn-tab svg{width:15px;height:15px;opacity:.55;flex-shrink:0}
.dn-tab:hover{color:var(--ink);background:rgba(36,27,53,.04)}
.dn-tab.active{color:var(--ink);background:var(--satin-soft)}
.dn-tab.active svg{opacity:.9;color:var(--violet)}
.dn-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dn-salon{font-style:italic;font-size:.85rem;color:var(--ink-mute);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-lang{display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(36,27,53,.04)}
.dn-lang a{font-size:.74rem;letter-spacing:.06em;color:var(--ink-mute);text-decoration:none;padding:3px 8px;border-radius:7px}
.dn-lang a[aria-current="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(36,27,53,.08)}
.dn-logout{padding:8px 14px;border-radius:12px;border:0;background:transparent;font-size:.86rem;color:var(--ink-soft);cursor:pointer;transition:color .2s,background .2s}
.dn-logout:hover{color:var(--ink);background:rgba(36,27,53,.05)}

/* ── Page ────────────────────────────────────────────────────────────── */
.dp{padding:48px 24px 110px}
.dp-inner{max-width:1080px;margin:0 auto}
.dp-ph{margin-bottom:30px;max-width:620px}
.dp-ph h1{font-size:1.85rem;margin-bottom:8px}
.dp-ph p{font-size:1rem}

/* ── Panneaux en verre ───────────────────────────────────────────────── */
.dc{
  background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-md);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);padding:24px 26px;margin-bottom:18px;
}
.dc-muted{background:rgba(255,255,255,.34);box-shadow:none}
.dc-label,.dc h2,.side h2,.sec-title{font-size:1.12rem;font-weight:400;color:var(--ink);margin:0 0 14px;letter-spacing:0;text-transform:none}
.dc p{color:var(--ink-soft)}
.kicker{font-style:italic;font-size:.9rem;color:var(--ink-mute)}

.dr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:.95rem}
.dr:last-child{border:none}
.dr-label{color:var(--ink-mute);font-style:italic;font-size:.92rem}

/* ── Chiffres (compatibilité) ────────────────────────────────────────── */
.dstats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:18px}
.dstat{padding:4px 22px}
.dstat-label{font-style:italic;font-size:.9rem;color:var(--ink-mute);margin-bottom:6px}
.dstat-val{font-size:2rem;line-height:1.05}
.dstat-sub{font-size:.85rem;color:var(--ink-mute);margin-top:4px}
.dbar{background:rgba(36,27,53,.07);border-radius:99px;height:5px;margin-top:10px;overflow:hidden}
.dbar-fill{height:100%;border-radius:99px;background:var(--satin);transition:width .8s cubic-bezier(.16,1,.3,1)}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.db{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:999px;
  font-size:.94rem;letter-spacing:.01em;cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.db-primary{background:var(--satin);color:#fff;box-shadow:0 10px 24px -14px rgba(125,102,234,.8)}
.db-primary:hover{box-shadow:0 14px 30px -14px rgba(125,102,234,.9);transform:translateY(-1px)}
.db-outline{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--hair-strong)}
.db-outline:hover{border-color:rgba(107,77,230,.45);color:var(--violet-deep)}
.db-dark{background:var(--ink);color:#fff}
.db-dark:hover{background:#140E20}
.db-danger{background:rgba(255,255,255,.7);color:var(--bad);border-color:rgba(176,58,74,.25)}
.db-danger:hover{border-color:var(--bad)}
.db-block{width:100%}
.db-quiet{background:transparent;color:var(--violet-deep);padding:8px 2px;border-radius:6px}
.db-quiet:hover{text-decoration:underline;text-underline-offset:4px}
.db:disabled,.db[aria-busy="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Statuts ─────────────────────────────────────────────────────────── */
.dbadge{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:99px;font-size:.82rem;white-space:nowrap}
.dbadge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dbadge-green{background:var(--ok-wash);color:var(--ok)}
.dbadge-amber{background:var(--warn-wash);color:var(--warn)}
.dbadge-red{background:var(--bad-wash);color:var(--bad)}
.dbadge-gray{background:rgba(36,27,53,.05);color:var(--ink-soft)}
.dbadge-purple{background:rgba(107,77,230,.09);color:var(--violet-deep)}

/* ── Messages ────────────────────────────────────────────────────────── */
.derr,.dok,.dnote{padding:14px 18px;border-radius:var(--r-sm);font-size:.95rem;margin-bottom:18px;display:none;border:1px solid}
.derr{background:rgba(252,236,238,.85);border-color:rgba(176,58,74,.18);color:var(--bad)}
.dok{background:rgba(234,246,240,.85);border-color:rgba(46,122,91,.18);color:var(--ok)}
.dnote{display:block;background:rgba(255,255,255,.6);border-color:rgba(125,102,234,.22);color:var(--ink)}
.derr a,.dok a,.dnote a{color:inherit;text-underline-offset:3px}

/* ── Tableau ─────────────────────────────────────────────────────────── */
.dtable{width:100%;border-collapse:collapse;font-size:.94rem}
.dtable th{text-align:left;padding:0 0 10px;font-weight:400;font-style:italic;font-size:.86rem;color:var(--ink-mute);border-bottom:1px solid var(--hair)}
.dtable td{padding:12px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.dtable td+td,.dtable th+th{padding-left:14px}
.dtable tr:last-child td{border:none}
.dtable .num{text-align:right;white-space:nowrap}

/* ── Grilles ─────────────────────────────────────────────────────────── */
.dg2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dg3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dactions{display:flex;gap:10px;flex-wrap:wrap}

/* ── Formulaires ─────────────────────────────────────────────────────── */
.dfield{margin-bottom:16px}
.dlabel{display:block;font-size:.92rem;margin-bottom:6px;color:var(--ink-soft)}
.dinput,.dselect{
  width:100%;padding:12px 15px;border:1px solid var(--hair-strong);border-radius:var(--r-sm);
  font-size:1rem;background:rgba(255,255,255,.82);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;
}
.dinput:focus,.dselect:focus{border-color:rgba(107,77,230,.55);box-shadow:0 0 0 4px rgba(125,102,234,.12)}
.dinput:disabled{background:rgba(36,27,53,.04);color:var(--ink-mute);cursor:not-allowed}
.dselect{appearance:none;cursor:pointer;background:rgba(255,255,255,.82) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E869B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.dhint{font-style:italic;font-size:.84rem;color:var(--ink-mute);margin-top:5px}

.dappstore{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;font-size:.9rem;text-decoration:none}
.dappstore:hover{background:#140E20}

/* ═══ Accueil du tableau de bord ═══════════════════════════════════════ */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.hello h1{font-size:1.9rem}
.hello .kicker{margin-bottom:6px}

/* Carte salon : la pièce forte */
.dash-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;margin-bottom:22px;align-items:stretch}
.pass{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  border-radius:var(--r-lg);padding:26px 28px 24px;min-height:232px;display:flex;flex-direction:column;
  background:var(--satin);
  box-shadow:0 30px 60px -34px rgba(86,63,208,.65),inset 0 1px 0 rgba(255,255,255,.35);
}
.pass::before{ /* grain satiné */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.22;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pass::after{ /* reflet */
  content:"";position:absolute;z-index:-1;inset:-40% -10% auto auto;width:70%;height:120%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.32),transparent);transform:rotate(-18deg);
}
.pass-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.pass-brand{font-size:1rem;letter-spacing:.02em;opacity:.95}
.pass-plan{font-size:.82rem;font-style:italic;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32)}
.pass-salon{color:#fff;font-size:1.35rem;line-height:1.25;margin-top:20px;max-width:15em;overflow-wrap:anywhere}
.pass-bottom{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.pass-credits{font-size:2.9rem;line-height:1}
.pass-credits small{display:block;font-style:italic;font-size:.88rem;opacity:.86;margin-top:8px}
.pass-meta{text-align:right;font-size:.86rem;line-height:1.5;opacity:.92}
.pass-meta strong{display:block;font-weight:400;font-size:.95rem;opacity:1}
.pass-inactive{background:linear-gradient(120deg,#5C5470 0%,#7D7290 55%,#A99A9A 100%)}

.side{
  background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-lg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);
  padding:24px 26px;display:flex;flex-direction:column;
}
.side-actions{margin-top:auto;padding-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.side-actions .db{flex:1}

/* Jauge de consommation */
.gauge{display:flex;align-items:center;gap:18px;margin:2px 0 6px}
.gauge svg{flex-shrink:0}
.gauge strong{display:block;font-weight:400;font-size:1.5rem;line-height:1.1}
.gauge span{font-style:italic;font-size:.88rem;color:var(--ink-mute)}

/* ── Section activité ────────────────────────────────────────────────── */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:38px 0 16px}
.section-head h2{font-size:1.45rem}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.6);border:1px solid var(--glass-edge)}
.seg button{border:0;background:transparent;padding:6px 13px;border-radius:9px;font-size:.86rem;color:var(--ink-mute);cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(36,27,53,.1)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 4px;margin-bottom:18px}
.kpi{padding:2px 22px;position:relative}
.kpi+.kpi::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,rgba(181,124,192,.4),transparent)}
.kpi-label{font-style:italic;font-size:.9rem;color:var(--ink-mute)}
.kpi-val{font-size:2.1rem;line-height:1.15;margin-top:4px}
.kpi-sub{font-size:.84rem;color:var(--ink-mute)}

.chart-bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px;border-bottom:1px solid var(--hair);position:relative}
.chart-bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;cursor:default}
.chart-bars .bar i{display:block;width:100%;max-width:24px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#B7A8F3,#8B76EC);min-height:2px;transition:filter .2s}
.chart-bars .bar.now i{background:var(--satin)}
.chart-bars .bar:hover i{filter:brightness(1.08)}
.chart-x{display:flex;gap:10px;margin-top:8px}
/* Échelle verticale du graphique hebdomadaire */
.chart{display:grid;grid-template-columns:auto 1fr;gap:10px}
.chart-y{position:relative;height:150px;min-width:18px}
.chart-y span{position:absolute;right:0;transform:translateY(50%);font-size:.74rem;font-style:italic;color:var(--ink-mute);line-height:1;font-variant-numeric:tabular-nums}
.chart .chart-bars{padding-top:0}
.chart-bars .grid{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(36,27,53,.08);pointer-events:none}
.chart-x span{flex:1;text-align:center;font-style:italic;font-size:.78rem;color:var(--ink-mute)}
.tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.8rem;padding:4px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.bar:hover .tip,.bar:focus-visible .tip{opacity:1}

.passport-big{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.passport-big strong{font-weight:400;font-size:2.6rem;line-height:1}
.passport-big span{font-style:italic;color:var(--ink-mute)}
.split{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:2px;margin:18px 0 12px;background:rgba(36,27,53,.06)}
.split i{display:block;height:100%}
.split .a{background:#6B4DE6}
.split .b{background:#E0965A}
.legend{display:grid;gap:8px;font-size:.93rem}
.legend div{display:flex;align-items:center;gap:10px;justify-content:space-between}
.legend em{display:flex;align-items:center;gap:9px;font-style:normal;color:var(--ink-soft)}
.legend em::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}

.hbars{display:grid;gap:12px}
.hbar{display:grid;grid-template-columns:minmax(110px,40%) 1fr auto;align-items:center;gap:12px;font-size:.93rem}
.hbar span{color:var(--ink-soft)}
.hbar b{font-weight:400;min-width:3ch;text-align:right}
.hbar .track{height:8px;border-radius:99px;background:rgba(36,27,53,.06);overflow:hidden}
.hbar .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#9A85EF,#7D66EA)}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.trio>div{padding:0 18px}
.trio>div+div{border-left:1px solid var(--hair)}
.trio strong{display:block;font-weight:400;font-size:1.7rem;line-height:1.15}
.trio span{font-style:italic;font-size:.88rem;color:var(--ink-mute)}

.locked{position:relative;overflow:hidden}
.locked .veil{filter:blur(6px);opacity:.55;pointer-events:none;user-select:none}
.locked .lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px;background:linear-gradient(180deg,rgba(251,249,252,.2),rgba(251,249,252,.75))}
.locked .lock h3{font-size:1.3rem}
.locked .lock p{max-width:420px}
.empty{font-style:italic;color:var(--ink-mute);padding:8px 0}

/* ── Offres ──────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:20px;align-items:stretch;margin-bottom:18px}
.plan{
  background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-lg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);
  padding:28px 26px;display:flex;flex-direction:column;
}
.plan h3{color:var(--ink);font-size:1.5rem;margin-bottom:4px}
.plan-for{font-style:italic;font-size:.92rem;color:var(--ink-mute);min-height:2.8em}
.plan-price{margin:18px 0 2px;display:flex;align-items:baseline;gap:6px}
.plan-price strong{font-weight:400;font-size:2.35rem;line-height:1}
.plan-price span{font-style:italic;font-size:.9rem;color:var(--ink-mute)}
.plan-vat{font-size:.8rem;color:var(--ink-mute)}
.plan-promo{margin-top:8px;font-size:.9rem;color:var(--ok)}
.plan ul{list-style:none;margin:18px 0 22px;display:grid;gap:10px;font-size:.95rem;color:var(--ink-soft)}
.plan li{display:flex;gap:11px;align-items:flex-start}
.plan li::before{content:"";flex-shrink:0;margin-top:.55em;width:6px;height:6px;border-radius:50%;background:var(--satin)}
.plan-terms{font-style:italic;font-size:.82rem;color:var(--ink-mute);margin-top:12px;text-align:center;line-height:1.55}
.plan .db{margin-top:auto}
.plan-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--satin);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:0 30px 60px -34px rgba(86,63,208,.65)}
.plan-hero::after{content:"";position:absolute;z-index:-1;inset:-30% -20% auto auto;width:80%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.plan-hero h3{color:#fff}
.plan-hero .plan-for,.plan-hero .plan-vat,.plan-hero .plan-price span,.plan-hero .plan-terms{color:rgba(255,255,255,.82)}
.plan-hero ul{color:rgba(255,255,255,.95)}
.plan-hero li::before{background:#fff}
.plan-hero .plan-promo{color:#fff;font-style:italic}
.plan-hero .db-primary{background:#fff;color:var(--ink);box-shadow:none}
.plan-hero .db-primary:hover{background:rgba(255,255,255,.9)}
.plan-spots,.plan-trial{align-self:flex-start;display:inline-block;font-size:.82rem;font-style:italic;padding:4px 12px;border-radius:99px}
.plan-spots{margin-bottom:16px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34)}
.plan-trial{margin-top:12px;background:rgba(125,102,234,.09);color:var(--violet-deep)}
.plan-hero .plan-trial{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3)}
.plan-off{opacity:.6}

/* ── Crédits ─────────────────────────────────────────────────────────── */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:18px}
.pack{
  background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-md);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);
  padding:24px 24px 22px;display:flex;flex-direction:column;
}
.pack-n{font-size:2.6rem;line-height:1}
.pack-u{font-style:italic;font-size:.9rem;color:var(--ink-mute);margin-top:4px}
.pack-p{font-size:1.25rem;margin-top:18px}
.pack-unit{font-style:italic;font-size:.84rem;color:var(--ink-mute);margin-bottom:18px}
.pack .db{margin-top:auto}
.balance{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.balance-n{font-size:3.2rem;line-height:1;background:var(--satin);-webkit-background-clip:text;background-clip:text;color:transparent}
.balance-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.balance-split div{padding-left:16px;position:relative}
.balance-split div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:linear-gradient(180deg,rgba(125,102,234,.5),rgba(233,165,123,.5))}
.balance-split strong{display:block;font-weight:400;font-size:1.4rem}
.balance-split span{font-style:italic;font-size:.86rem;color:var(--ink-mute)}

/* ── Modale ──────────────────────────────────────────────────────────── */
.dmodal{position:fixed;inset:0;z-index:500;background:rgba(36,27,53,.32);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px}
.dmodal-box{background:rgba(255,255,255,.95);border-radius:var(--r-md);padding:28px;max-width:460px;width:100%;box-shadow:var(--shadow)}
.dmodal-box h3{font-size:1.35rem;margin-bottom:10px}
.dmodal-box p{margin-bottom:20px}

/* ── Réactif ─────────────────────────────────────────────────────────── */
@media(max-width:1180px){.dn-salon{display:none}}
@media(max-width:1040px){.dn-tab span{display:none}.dn-brand-tag{display:none}.dn-tabs{justify-content:flex-start}}
@media(max-width:960px){
  .dash-top{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan-for{min-height:0}
  .kpis{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .kpi:nth-child(3)::before{display:none}
}
@media(max-width:720px){
  .dn{height:auto;flex-wrap:wrap;padding:10px 12px 6px;row-gap:4px;top:8px;width:calc(100% - 20px);margin-top:8px}
  .dn-right{margin-left:auto}
  .dn-tabs{order:3;flex:1 0 100%;padding:2px 0}
  .dn-tab span{display:inline}
  .dp{padding:28px 16px 80px}
  .dp-ph h1,.hello h1{font-size:1.55rem}
  .dg2,.dg3,.packs{grid-template-columns:1fr}
  .pass{padding:22px 22px 20px;min-height:220px}
  .pass-credits{font-size:2.5rem}
  .pass-meta{text-align:left}
  .balance{grid-template-columns:1fr;gap:18px}
  .trio{grid-template-columns:1fr;gap:16px}
  .trio>div{padding:0}.trio>div+div{border-left:0;border-top:1px solid var(--hair);padding-top:14px}
  .hbar{grid-template-columns:minmax(90px,38%) 1fr auto}
  .dstats{grid-template-columns:1fr}
}
@media(max-width:420px){.dn-brand-name{display:none}.kpi-val{font-size:1.8rem}}

/* La feuille du site impose des tailles en !important sur mobile */
@media(max-width:768px){
  .dp-ph h1,.hello h1{font-size:1.55rem!important}
  .pass-salon{font-size:1.2rem!important}
  .dc-label,.dc h2,.side h2,.sec-title{font-size:1.08rem!important}
  .section-head h2{font-size:1.3rem!important}
  .plan h3{font-size:1.35rem!important}
  .auth-box h1{font-size:1.6rem!important}
  .locked .lock h3{font-size:1.15rem!important}
}

/* Un seul moment animé : l'arrivée de la carte salon */
@media (prefers-reduced-motion:no-preference){
  .pass{animation:passIn .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes passIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ── Navigation : défilement propre des onglets ─────────────────────── */
.dn-tabs{min-width:0;justify-content:safe center}
@media(max-width:1360px){.dn-salon{display:none}}

/* ── Page Parrainage : lisibilité sur le dégradé satiné ─────────────── */
.ref-hero .rh-title{font-weight:400}
.ref-hero .rh-sub{color:rgba(255,255,255,.9);font-size:.95rem}
.ref-hero .rh-tag{font-style:italic;letter-spacing:.02em;text-transform:none;font-weight:400;font-size:.82rem}
.ref-hero .rh-stat,.ref-hero .rh-palier,.ref-hero .rh-link{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.ref-hero .rh-stat-val{font-weight:400}
.ref-hero .rh-stat-lbl,.ref-hero .rh-palier-desc{color:rgba(255,255,255,.88);font-style:italic}
.ref-hero .rh-palier-n{color:rgba(255,255,255,.92);letter-spacing:.02em;text-transform:none;font-weight:400;font-style:italic;font-size:.82rem}
.ref-hero .rh-palier-val{font-weight:400;font-size:1.05rem}
.ref-hero .rh-link-url{color:#fff}

/* Info-bulles du graphique : jamais hors de l'écran */
.chart-bars .bar:nth-child(-n+2) .tip{left:0;transform:none}
.chart-bars .bar:nth-last-child(-n+2) .tip{left:auto;right:0;transform:none}
.dp{overflow-x:clip}

/* ── Devise (€ / £ / $) ─────────────────────────────────────────────── */
.cur-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px;font-size:.82rem;font-style:italic;color:var(--ink-mute)}
.cur-row:empty{display:none}
.cur-switch{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--hair)}
.cur-switch button{font-family:inherit;font-style:normal;font-size:.78rem;letter-spacing:.02em;color:var(--ink-soft);background:none;border:0;padding:5px 12px;border-radius:999px;cursor:pointer}
.cur-switch button.on{background:var(--violet);color:#fff}
.cur-switch button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* Statistiques détaillées (« Voir plus ») */
.more-toggle{display:flex;justify-content:center;margin-top:26px}
.more{margin-top:26px;padding-top:26px;border-top:1px solid var(--hair)}
.more[hidden]{display:none}
.more-sep{height:1px;background:var(--hair);margin:28px 0}
.quad{display:grid;grid-template-columns:repeat(4,1fr)}
.quad>div{padding:0 18px}
.quad>div+div{border-left:1px solid var(--hair)}
.quad strong{display:block;font-weight:400;font-size:1.7rem;line-height:1.15}
.quad span{display:block;font-style:italic;font-size:.88rem;color:var(--ink-mute);margin-top:2px}
.delta{display:inline-block;font-style:normal;font-size:.78rem;padding:2px 8px;border-radius:99px;margin-top:4px}
.delta.up{background:var(--ok-wash);color:var(--ok)}
.delta.down{background:var(--bad-wash);color:var(--bad)}
.delta.flat{background:rgba(36,27,53,.05);color:var(--ink-mute)}
.mini-title{font-style:italic;font-size:.88rem;color:var(--ink-mute);margin:18px 0 10px}
.note{font-style:italic;font-size:.86rem;color:var(--ink-mute);margin-top:12px}
.hbar b small,.dr small{font-size:.8rem;color:var(--ink-mute)}
@media (max-width:720px){
  .quad{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .quad>div:nth-child(3){border-left:none}
}