/* ============================================================================
   SOCIALNEST — SYSTÈME DE DESIGN v13 · « Google Search Profile + shadcn »
   ----------------------------------------------------------------------------
   Porté depuis la maquette socialnest-mobile-5.html. Trois différences avec
   la maquette, toutes délibérées :

     1. Le décor de démonstration (cadre .phone, encoche, barre d'état) n'est
        pas repris — ce sont des accessoires de présentation.
     2. Les composants s'appliquent à toute l'application, pas à un cadre de
        412 px : les largeurs fixes deviennent des maxima.
     3. Un PONT hérite les classes existantes (.btn, .card, .field, .ed-*,
        .cw-*, .hb-*) vers les nouveaux jetons. 122 gabarits changent d'allure
        sans être réécrits — la même stratégie que la v12.

   INVERSION MAJEURE : la v12 était sombre par défaut (lime/violet sur
   #0E0E10). La v13 est CLAIRE par défaut, accent bleu #3B5CF0, sombre via
   [data-theme="dark"] — appliqué automatiquement si le système le demande.

   Chargement : APRÈS toutes les autres feuilles.
   ========================================================================== */


/* ============================================================
   SOCIALNEST — MOBILE DESIGN SYSTEM v3
   Google Search Profile + twist shadcn.
   Nouveautés : transitions slide horizontales, entrée slide-up
   des cartes, circling-glow d'invitation, icônes Lucide,
   boutons plus fins / rayons resserrés, bordures fines.
   Règles UX conservées : thumb zone, 48px, forms, offline,
   skeletons, ARIA, zoom, gestures.
   ============================================================ */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
/* Sans @property, une variable ne peut pas être animée : le navigateur
   la traite comme une chaîne. Déclarée en <number>, elle s'interpole. */
@property --p{syntax:"<number>";inherits:false;initial-value:0}
:root{
  --g-blue:#4285F4; --g-red:#EA4335; --g-yellow:#FBBC04; --g-green:#34A853;
  --ink:#1F1F22; --ink-soft:#3C4043; --ink-mute:#5F6368; --paper:#FFFFFF;
  --accent:#3B5CF0; --accent-press:#2E49CC;
  --accent-soft:#DCE4FF; --accent-soft-ink:#1B3ac0;
  --aura-pink:#FBDCE2; --aura-blue:#DEE7FF; --aura-green:#D9EEDD; --aura-yellow:#FBEFC6; --aura-lav:#E7E4FD;
  --card:#FFFFFF; --bg:#FFFFFF; --line:rgba(31,31,34,.10); --surface-2:#F1F3F4;
  --font-d:'Outfit',system-ui,sans-serif;
  --font-b:'Figtree',system-ui,sans-serif;
  --r-pill:999px; --r-btn:10px; --r-card:16px; --r-lg:22px;
  --shadow:0 3px 14px rgba(31,31,34,.06);
  --shadow-lg:0 16px 40px rgba(31,31,34,.16);
  --tap:48px;
  --safe-b:env(safe-area-inset-bottom,0px);
  font-size:16px;
}
[data-theme="dark"]{
  --ink:#E8EAED; --ink-soft:#C9CBCF; --ink-mute:#9AA0A6; --paper:#131316;
  --accent:#C3CFFF; --accent-press:#AEBEFF;
  --accent-soft:#2B2C31; --accent-soft-ink:#C3CFFF;
  --aura-pink:#2A171C; --aura-blue:#141C2E; --aura-green:#14251A; --aura-yellow:#282213; --aura-lav:#1C1930;
  --card:#1C1D20; --bg:#0C0C0E; --line:rgba(255,255,255,.11); --surface-2:#26272B;
  --shadow:0 3px 14px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
html,body{height:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* icône Lucide */
.icn{display:inline-block;width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.16em}



.offline{flex:none;background:var(--ink);color:var(--paper);font-weight:500;font-size:.8rem;text-align:center;padding:0;max-height:0;overflow:hidden;transition:max-height .25s,padding .25s;display:flex;align-items:center;justify-content:center;gap:8px}
.offline.show{max-height:52px;padding:11px}

.appbar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 16px;min-height:52px;background:var(--bg);z-index:15}
.appbar h1{font-family:var(--font-d);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;line-height:1.1}
.appbar .sub{font-size:.78rem;color:var(--ink-mute);font-weight:300}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s;flex:none;font-size:1.2rem}
.icon-btn:active{background:var(--surface-2)}
.appbar .spacer{margin-left:auto}

/* signatures */
.g-dot{width:1.05em;height:1.05em;border-radius:50%;background:conic-gradient(var(--g-blue) 0 25%,var(--g-green) 25% 50%,var(--g-yellow) 50% 75%,var(--g-red) 75% 100%);display:inline-block;flex:none}
.gpill{display:inline-flex;align-items:center;gap:.5em;background:var(--card);color:var(--ink);padding:.5em .9em;border-radius:var(--r-pill);box-shadow:var(--shadow);border:1px solid var(--line);font-family:var(--font-d);font-weight:600;font-size:.88rem}
.verif{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;background:linear-gradient(180deg,#5b8bff,#3b5cf0);border-radius:9px;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);display:grid;place-items:center;color:#fff;font-family:var(--font-d);font-weight:700;font-size:.72rem;border:2px solid var(--card)}

/* stage + écrans (slide horizontal) */
.stage{position:relative;flex:1;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 16px calc(96px + var(--safe-b));will-change:transform}
.screen[hidden]{display:none}
.aura{position:absolute;border-radius:50%;filter:blur(60px);opacity:.9;pointer-events:none;z-index:0}

.h2{font-family:var(--font-d);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;margin:22px 0 12px}
.muted{color:var(--ink-mute);font-weight:400}
.sec-label{font-family:var(--font-d);font-weight:600;font-size:.98rem;margin:22px 2px 12px}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-d);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.eyebrow::before{content:"";width:20px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--g-blue),var(--g-red),var(--g-yellow),var(--g-green))}

.pill{display:inline-flex;align-items:center;gap:.4em;padding:.5em 1em;border-radius:var(--r-pill);font-weight:500;font-size:.85rem;white-space:nowrap}
.pill--ink{background:var(--ink);color:var(--paper)}
.pill--soft{background:var(--surface-2);color:var(--ink-soft)}
.pill--cat{font-family:var(--font-d);font-weight:600}
.cat-blue{background:var(--aura-blue);color:#2747b8}[data-theme="dark"] .cat-blue{color:#aec3ff}
.pill--green{background:rgba(52,168,83,.16);color:#1c6b38}[data-theme="dark"] .pill--green{color:#8fe0a6}
.pill--blue{background:rgba(59,92,240,.14);color:var(--accent-soft-ink)}
.pill--red{background:rgba(234,67,53,.14);color:#c5372b}[data-theme="dark"] .pill--red{color:#ff9d93}

/* boutons (plus fins, moins arrondis) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-d);font-weight:600;font-size:.95rem;min-height:44px;padding:0 1.25em;border-radius:var(--r-btn);transition:transform .12s,box-shadow .15s,background .15s;border:1px solid transparent}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent);color:#fff}
[data-theme="dark"] .btn--primary{color:#16255C}
.btn--primary:active{background:var(--accent-press)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--soft{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--block{width:100%}
.btn--lg{min-height:50px;font-size:1rem;padding:0 1.4em}
.btn-follow{width:100%;min-height:46px;border-radius:16px;background:var(--accent-soft);color:var(--accent-soft-ink);font-family:var(--font-d);font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:.5em;transition:transform .12s}
.btn-follow:active{transform:scale(.98)}

.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);border:1px solid var(--line);padding:16px;position:relative;z-index:1}
.card+.card{margin-top:12px}

/* blobs */
.shape-flower{clip-path:url(#cf)} .shape-hepta{clip-path:url(#ch)} .shape-quad{clip-path:url(#cq)} .shape-cloud{clip-path:url(#cc)}
.avatar{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:1.4rem;color:#1F1F22;border-radius:50%}
.avatar--lg{width:96px;height:96px;font-size:2.1rem;position:relative}
.bg-y{background:linear-gradient(135deg,#FFE59E,#FBBC04)}
.bg-b{background:linear-gradient(135deg,#A9C6FF,#4285F4)}
.bg-g{background:linear-gradient(135deg,#A8E6BC,#34A853)}
.bg-p{background:linear-gradient(135deg,#FFB3C6,#EA4335)}

/* HOME */
.hero-wrap{position:relative}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px;position:relative;z-index:1}
.stat{background:var(--card);border-radius:var(--r-card);padding:14px 12px;box-shadow:var(--shadow);border:1px solid var(--line)}
.stat .n{font-family:var(--font-d);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.stat .l{font-size:.72rem;color:var(--ink-mute);font-weight:400;line-height:1.2;margin-top:2px}
.stat .up{color:#1c6b38;font-size:.72rem;font-weight:600}[data-theme="dark"] .stat .up{color:#8fe0a6}
.live{background:linear-gradient(150deg,#1b1c20,#2a2b31);color:#fff;border-radius:var(--r-card);padding:18px;position:relative;overflow:hidden;z-index:1;border:1px solid rgba(255,255,255,.06)}
.live .glow{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(50px);opacity:.6}
.live .g1{background:var(--g-red);top:-60px;right:-30px}
.live .g2{background:var(--g-blue);bottom:-70px;left:-30px}
.live__badge{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.75rem;background:rgba(234,67,53,.28);color:#fff;padding:5px 10px;border-radius:var(--r-pill)}
.live__badge .rec{width:8px;height:8px;border-radius:50%;background:var(--g-red);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.quick button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--card);border-radius:var(--r-card);padding:15px;box-shadow:var(--shadow);border:1px solid var(--line);min-height:var(--tap);text-align:left;transition:transform .12s}
.quick button:active{transform:scale(.97)}
.quick .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.quick b{font-family:var(--font-d);font-weight:600;font-size:.94rem}
.quick span{font-size:.76rem;color:var(--ink-mute)}
.feed-item{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.feed-item:last-child{border-bottom:none}
.feed-item .txt{flex:1;min-width:0}
.feed-item .txt b{font-family:var(--font-d);font-weight:600;font-size:.9rem}
.feed-item .txt p{font-size:.82rem;color:var(--ink-mute)}
.feed-item time{font-size:.72rem;color:var(--ink-mute);flex:none}

.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:10px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:sweep 1.1s infinite}
[data-theme="dark"] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes sweep{100%{transform:translateX(100%)}}
.skel-line{height:12px;margin:8px 0;border-radius:6px}

/* DISCOVER */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--r-pill);padding:0 16px;min-height:var(--tap);box-shadow:var(--shadow);border:1px solid var(--line);transition:border .15s;position:relative;z-index:1}
.searchbar:focus-within{border-color:var(--accent)}
.searchbar input{flex:1;border:none;background:none;font-family:var(--font-b);font-size:1rem;color:var(--ink);min-height:var(--tap)}
.searchbar input:focus{outline:none}
.chips-scroll{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips-scroll::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 15px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);font-weight:500;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;transition:.15s;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.brand{position:relative;overflow:hidden}
.brand__row{display:flex;gap:14px;align-items:center;transition:transform .2s;background:var(--card);position:relative;z-index:1}
.brand__row .avatar{width:50px;height:50px;font-size:1.2rem}
.brand__info{flex:1;min-width:0}
.brand__info b{font-family:var(--font-d);font-weight:600;font-size:.98rem}
.brand__info p{font-size:.8rem;color:var(--ink-mute)}
.brand__save{width:44px;height:44px;flex:none;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;transition:.15s}
.brand__save[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-soft-ink)}
.swipe-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:22px;background:var(--g-green);color:#fff;font-weight:600;font-size:.85rem;border-radius:var(--r-card);opacity:0;transition:opacity .15s;pointer-events:none;z-index:0}
.match{font-family:var(--font-d);font-weight:700;font-size:.85rem;color:#1c6b38}[data-theme="dark"] .match{color:#8fe0a6}

/* CREATE */
.create-hero{text-align:center;padding:14px 6px 4px;position:relative;z-index:1}
.create-hero h2{font-family:var(--font-d);font-weight:700;font-size:1.55rem;letter-spacing:-.02em;margin:10px 0 6px;line-height:1.14}
.field{margin-top:16px}
.field label{display:block;font-family:var(--font-d);font-weight:600;font-size:.85rem;margin-bottom:7px}
.field .hint{font-weight:300;color:var(--ink-mute);font-size:.78rem;margin-left:6px}
.field textarea,.field input{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-family:var(--font-b);font-size:1rem;color:var(--ink);background:var(--card);transition:border .15s,box-shadow .15s;min-height:var(--tap)}
.field textarea{min-height:92px;resize:none;line-height:1.5}
.field textarea:focus,.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field .err{display:none;color:#c5372b;font-size:.8rem;font-weight:500;margin-top:6px}
[data-theme="dark"] .field .err{color:#ff9d93}
.field.invalid input,.field.invalid textarea{border-color:#EA4335}
.field.invalid .err{display:block}
.field.valid input{border-color:var(--g-green)}
.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.plat{min-height:42px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);font-weight:500;font-size:.86rem;display:inline-flex;align-items:center;gap:7px;transition:.15s;color:var(--ink)}
.plat[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-soft-ink)}
.acc-row{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:14px;padding:12px 14px;margin-top:8px;min-height:var(--tap);border:1px solid var(--line)}
.acc-row .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;color:#1F1F22;font-size:.85rem}
.acc-row b{font-family:var(--font-d);font-weight:600;font-size:.9rem;display:block}
.acc-row span{font-size:.76rem;color:var(--ink-mute)}
.acc-row .chk{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--g-green);color:#fff;display:grid;place-items:center;flex:none}

/* CIRCLING GLOW (invitation à compléter) */
.invite{position:relative;isolation:isolate;border-radius:var(--r-card);padding:16px}
.invite::before{content:"";position:absolute;inset:-2px;border-radius:18px;z-index:-1;background:conic-gradient(from var(--ang),var(--g-blue),var(--g-green),var(--g-yellow),var(--g-red),var(--g-blue));animation:hue 5s linear infinite;filter:blur(7px);opacity:.8}
.invite::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);z-index:-1;background:var(--card)}
@keyframes hue{to{--ang:360deg}}
.invite .cstep{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:var(--tap);padding:10px 0;border-top:1px solid var(--line)}
.invite .cstep:first-of-type{border-top:0;margin-top:6px}
.invite .cstep .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex:none}
.invite .cstep b{font-family:var(--font-d);font-weight:600;font-size:.9rem;display:block}
.invite .cstep small{font-size:.76rem;color:var(--ink-mute)}
.invite .cstep .chev{margin-left:auto;color:var(--ink-mute)}
.prog{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.prog>i{display:block;height:100%;width:80%;border-radius:99px;background:linear-gradient(90deg,#4285F4,#34A853)}

/* CARTE PROFIL */
.pcard{position:relative;z-index:1}
.pcover{position:relative;border-radius:var(--r-lg);overflow:hidden;height:224px;background:
  radial-gradient(120px 90px at 22% 26%,#FBBC04,transparent 70%),
  radial-gradient(150px 120px at 84% 20%,#4285F4,transparent 72%),
  radial-gradient(150px 130px at 60% 96%,#34A853,transparent 72%),
  linear-gradient(160deg,#2b2c31,#151519)}
.pcover__grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.72))}
.pcover__id{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;gap:14px;z-index:2}
.pphoto{width:74px;height:74px;flex:none;position:relative;border-radius:22px}
.pphoto>span:first-child{width:100%;height:100%;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:1.9rem;color:#1F1F22}
.pcover__id h2{font-family:var(--font-d);font-weight:700;font-size:1.5rem;color:#fff;line-height:1.05;letter-spacing:-.02em}
.pcover__id .ptot{color:rgba(255,255,255,.86);font-weight:400;font-size:.86rem;margin-top:2px}
.pcard .btn-follow{margin-top:12px}
.pchips{display:flex;gap:10px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pchips::-webkit-scrollbar{display:none}
.pchip{flex:none;min-width:148px;background:var(--surface-2);border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:10px;min-height:var(--tap);border:1px solid var(--line)}
.pchip .pi{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:.95rem;background:var(--card)}
.pchip b{font-family:var(--font-d);font-weight:600;font-size:.86rem;display:block;line-height:1.15}
.pchip span{font-size:.75rem;color:var(--ink-mute)}
.about{width:100%;text-align:left;background:var(--surface-2);border-radius:14px;padding:15px;margin-top:12px;border:1px solid var(--line)}
.about__top{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-d);font-weight:600;font-size:.94rem}
.about__top .chev{transition:transform .2s;color:var(--ink-mute)}
.about[aria-expanded="true"] .about__top .chev{transform:rotate(180deg)}
.about__txt{color:var(--ink-soft);font-size:.9rem;font-weight:400;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.about[aria-expanded="true"] .about__txt{-webkit-line-clamp:unset;overflow:visible}
.pins{display:flex;gap:12px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pins::-webkit-scrollbar{display:none}
.tile{position:relative;border-radius:14px;overflow:hidden;flex:none;width:148px;aspect-ratio:3/4;display:block}
.tile__img{position:absolute;inset:0}
.tile__grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75))}
.tile__pin{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.42);display:grid;place-items:center;color:#fff;z-index:2;font-size:.8rem}
.tile__meta{position:absolute;left:10px;right:10px;bottom:10px;z-index:2}
.tile__meta b{color:#fff;font-family:var(--font-d);font-weight:600;font-size:.82rem;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__src{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.85);font-size:.72rem;font-weight:500;margin-top:5px}
.tile__src .icn{width:14px;height:14px}
.lp-filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lp-filters::-webkit-scrollbar{display:none}
.lpf{flex:none;min-height:40px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;font-family:var(--font-d);font-weight:600;font-size:.85rem;color:var(--ink-soft);transition:.15s}
.lpf[aria-selected="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent-soft-ink)}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-grid .tile{width:100%}

/* INBOX */
.seg{display:flex;background:var(--surface-2);border-radius:var(--r-pill);padding:4px;margin:8px 0 4px;border:1px solid var(--line)}
.seg button{flex:1;min-height:40px;border-radius:var(--r-pill);font-family:var(--font-d);font-weight:600;font-size:.85rem;color:var(--ink-mute);transition:.15s}
.seg button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.thread{display:flex;gap:12px;align-items:flex-start;padding:15px 4px;border-bottom:1px solid var(--line);width:100%;text-align:left;transition:background .15s;border-radius:12px}
.thread:active{background:var(--surface-2)}
.thread .avatar{width:44px;height:44px;font-size:1.05rem}
.thread .body{flex:1;min-width:0}
.thread .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.thread b{font-family:var(--font-d);font-weight:600;font-size:.94rem}
.thread time{font-size:.72rem;color:var(--ink-mute);flex:none}
.thread p{font-size:.83rem;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.unread{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}

.link-block{display:flex;align-items:center;gap:14px;background:var(--surface-2);border-radius:14px;padding:13px 15px;margin-top:10px;min-height:var(--tap);transition:transform .12s;width:100%;text-align:left;border:1px solid var(--line)}
.link-block:active{transform:scale(.98)}
.link-block .thumb{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem}
.link-block .lb{flex:1;min-width:0}
.link-block b{font-family:var(--font-d);font-weight:600;font-size:.9rem;display:block}
.link-block span{font-size:.78rem;color:var(--ink-mute);word-break:break-all}

/* sheet */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:24px 24px 0 0;padding:10px 18px calc(24px + var(--safe-b));transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);z-index:80;box-shadow:0 -10px 40px rgba(0,0,0,.25);border:1px solid var(--line);border-bottom:0}
.sheet.show{transform:translateY(0)}
.sheet .grip{width:40px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 14px}
.sheet h3{font-family:var(--font-d);font-weight:700;font-size:1.18rem;margin-bottom:4px}
.sheet-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);min-height:var(--tap);width:100%;text-align:left}
.sheet-row:last-of-type{border-bottom:none}
.sheet-row .ic{width:40px;height:40px;border-radius:11px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.sheet-row .lb b{font-family:var(--font-d);font-weight:600;font-size:.94rem;display:block}
.sheet-row .lb span{font-size:.78rem;color:var(--ink-mute)}
.switch{margin-left:auto;width:50px;height:31px;border-radius:var(--r-pill);background:var(--surface-2);position:relative;transition:background .2s;flex:none;border:1px solid var(--line)}
.switch[aria-checked="true"]{background:var(--g-green);border-color:transparent}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.switch[aria-checked="true"]::after{transform:translateX(19px)}

.toast{position:absolute;left:16px;right:16px;bottom:calc(100px + var(--safe-b));background:var(--ink);color:var(--paper);border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:10px;font-weight:500;font-size:.9rem;box-shadow:var(--shadow-lg);transform:translateY(160%);transition:transform .3s cubic-bezier(.32,.72,0,1);z-index:90}
.toast.show{transform:translateY(0)}
.toast .tk{width:26px;height:26px;border-radius:50%;background:var(--g-green);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}

/* tab bar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:calc(72px + var(--safe-b));padding-bottom:var(--safe-b);background:var(--card);border-top:1px solid var(--line);display:flex;align-items:stretch;z-index:50}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-mute);min-height:56px;transition:color .15s}
.tabbar .tab .icn{width:23px;height:23px;transition:transform .15s}
.tabbar .tab .lbl{font-size:.66rem;font-weight:600;font-family:var(--font-d)}
.tabbar .tab[aria-selected="true"]{color:var(--accent)}
[data-theme="dark"] .tabbar .tab[aria-selected="true"]{color:#aec3ff}
.tabbar .tab[aria-selected="true"] .icn{transform:translateY(-1px)}
.fab{flex:0 0 auto;position:relative;width:64px}
.fab button{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:58px;height:58px;border-radius:19px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(59,92,240,.4);transition:transform .12s,box-shadow .15s}
[data-theme="dark"] .fab button{color:#16255C;box-shadow:0 8px 22px rgba(195,207,255,.32)}
.fab button .icn{width:25px;height:25px}
.fab button:active{transform:translateX(-50%) scale(.92)}
.fab button.is-on{box-shadow:0 0 0 4px rgba(59,92,240,.22),0 8px 22px rgba(59,92,240,.5)}
.fab .lbl{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:.66rem;font-weight:600;font-family:var(--font-d);color:var(--ink-mute)}

/* entrée slide-up des blocs */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.center{text-align:center}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}

/* ============================================================================
   PONT — l'existant hérite du nouveau système
   ----------------------------------------------------------------------------
   Ces sélecteurs ne sont pas dans la maquette. Ils rattachent le vocabulaire
   déjà présent dans les gabarits aux jetons v13, pour éviter 122 réécritures.
   ========================================================================== */


/* PORTÉE — pourquoi `.main-area` figure dans chaque liste ci-dessous.
   Les propriétés personnalisées suivent l'HÉRITAGE, pas la spécificité : la
   définition portée par l'ancêtre le PLUS PROCHE l'emporte, quelle que soit
   la spécificité du sélecteur. app-dark.css redéfinit plusieurs jetons sur
   `.app-shell, .main-area, body.app-shell` ; un remap posé uniquement sur
   `.app-shell` était donc systématiquement écrasé pour tout ce qui vit dans
   `.main-area` — c'est-à-dire la totalité du contenu applicatif. Symptôme
   observé : bulles de chat en texte blanc sur gris clair.

/* ---- remap de la palette --app-* ---------------------------------------
   app-dark.css pilote TOUTE la coquille applicative par ces jetons, et pose
   `body{background:var(--app-bg)!important}`. Les redéfinir bascule d'un coup
   les surfaces, le texte, les bordures et les accents — au lieu de livrer
   bataille sélecteur par sélecteur. C'est le même levier que la v12 a utilisé
   dans l'autre sens.

   Portée : .app-shell et les racines applicatives uniquement. Les pages
   publiques à habillage ne chargent pas app-dark et gardent leurs couleurs. */
:root, .app-shell, .main-area, .content, [data-surface="app"] {
  --app-bg:         var(--bg);
  --app-surface:    var(--card);
  --app-surface-2:  var(--surface-2);
  --app-surface-3:  var(--line);
  --app-text:       var(--ink);
  --app-muted:      var(--ink-mute);
  --app-faint:      var(--ink-mute);
  --app-border:     var(--line);
  --app-accent:     var(--accent);
  --app-accent-ink: #FFFFFF;
  --app-accent-2:   var(--accent);
  --app-green:      var(--g-green);
  --app-red:        var(--g-red);
  --app-amber:      var(--g-yellow);
  --app-r-card:     var(--r-card);
  --app-r-input:    12px;
  --app-pill:       var(--r-pill);
}
[data-theme="dark"] { --app-accent-ink: #16255C; }

/* app-dark pose body en !important ; la v13 charge après, à spécificité
   égale — donc elle gagne. */
body { background: var(--bg) !important; color: var(--ink) !important; }


/* ---- remap de la palette --sn-* (main.css) ------------------------------
   Cette palette claire d'origine pilote encore des fonds posés en style
   attribut dans les gabarits (`background: var(--sn-neutral-50)`). Sans
   remap, ces blocs restaient clairs en thème sombre et le texte tombait
   dessus à 1,2:1. La v12 faisait déjà ce pontage, dans l'autre sens. */
:root, .app-shell, .main-area, .content, [data-surface="app"] {
  --sn-white:        var(--card);
  --sn-cream:        var(--surface-2);
  --sn-neutral-50:   var(--surface-2);
  --sn-neutral-100:  var(--surface-2);
  --sn-neutral-200:  var(--line);
  --sn-neutral-300:  var(--line);
  --sn-neutral-400:  var(--ink-mute);
  --sn-neutral-500:  var(--ink-mute);
  --sn-neutral-600:  var(--ink-soft);
  --sn-neutral-700:  var(--ink-soft);
  --sn-neutral-800:  var(--ink);
  --sn-neutral-900:  var(--ink);
  --sn-purple-50:    var(--accent-soft);
  --sn-purple-100:   var(--accent-soft);
  --sn-purple-400:   var(--ink);
  --sn-purple-500:   var(--ink);
  --sn-purple-600:   var(--accent);
  --sn-purple-1000:  var(--ink);
  --sn-lime-400:     var(--accent);
  --sn-error:        var(--g-red);
  --sn-success:      var(--g-green);
  --sn-warning:      var(--g-yellow);
  --sn-radius-md:    var(--r-btn);
  --sn-radius-lg:    var(--r-card);
  --sn-radius-pill:  var(--r-pill);

  /* Polices. Les gabarits appellent ces jetons directement
     (`font: 600 1.2rem var(--ds-f-display)`), donc une règle sur h1 ne suffit
     pas : les titres restaient en Anton. */
  --sn-font-display: var(--font-d);
  --sn-font-body:    var(--font-b);
  --sn-font-grotesk: var(--font-d);
  --ds-f-display:    var(--font-d);
  --ds-f-body:       var(--font-b);
  --app-font-display: var(--font-d);
  --app-font-body:    var(--font-b);
}

/* ---- remap de l'échelle --ds-* (v12) -----------------------------------
   Le tableau de bord, l'éditeur et plusieurs cartes écrivent encore
   `background: var(--ds-1)` ou `color: var(--ds-t2)` en dur dans leur bloc
   <style>. Ces jetons n'étaient PAS repris par la v13 : ils gardaient donc
   leurs valeurs sombres (texte clair, surfaces noires) au milieu d'une
   interface claire — d'où les libellés blancs sur blanc du tableau de bord. */
:root, .app-shell, .main-area, .content, [data-surface="app"] {
  --ds-bg:   var(--bg);
  --ds-1:    var(--card);
  --ds-2:    var(--surface-2);
  --ds-3:    var(--line);
  --ds-t1:   var(--ink);
  --ds-t2:   var(--ink-mute);
  --ds-t3:   var(--ink-mute);
  --ds-line: var(--line);
  --ds-accent:     var(--accent);
  --ds-accent-ink: #FFFFFF;
  --ds-link:   var(--accent);
  --ds-danger: var(--g-red);
  --ds-ok:     var(--g-green);
  --ds-warn:   var(--g-yellow);
  --ds-r-md: 12px;  --ds-r-lg: 14px;  --ds-r-xl: var(--r-card);
  --ds-pill: var(--r-pill);
}
[data-theme="dark"] { --ds-accent-ink: #16255C; }

/* ---- coquille applicative --------------------------------------------- */
.app-shell { background: var(--bg); color: var(--ink); }
.main-area, .content, .page { background: var(--bg); }

.topbar {
  background: var(--card) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.topbar-brand, .sidebar-brand { font-family: var(--font-d); font-weight: 700; color: var(--ink) !important; }
.topbar-brand span, .sidebar-brand span { color: var(--accent) !important; }
.topbar-brand b, .sidebar-brand b { color: var(--g-yellow) !important; }
.topbar-avatar { border: 1px solid var(--line) !important; }

.sidebar { background: var(--card) !important; border-right: 1px solid var(--line) !important; }
.sidebar-nav a {
  color: var(--ink-mute) !important; border-radius: var(--r-btn) !important;
  font-family: var(--font-d); font-weight: 500;
}
.sidebar-nav a:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.sidebar-nav a.active, .sidebar-nav a[aria-current="page"] {
  background: var(--accent-soft) !important; color: var(--accent-soft-ink) !important; font-weight: 600;
}
.sidebar-divider { color: var(--ink-mute) !important; font-family: var(--font-d); font-weight: 600; }

/* La barre du bas devient la tabbar v13 : même rôle, nouveau vêtement.
   Nom de classe exact : .bottom-nav (avec trait d'union). app-dark la fixe à
   rgba(20,20,23,.92) — un fond sombre codé en dur, qui restait noir au milieu
   d'une interface claire et rendait les libellés illisibles. */
.bottom-nav {
  background: var(--card) !important;
  border-top: 1px solid var(--line) !important;
  padding-bottom: var(--safe-b);
}
.bottom-nav a, .bn-more { color: var(--ink-soft) !important; font-family: var(--font-d); font-weight: 600; }
.bottom-nav a.active, .bottom-nav a[aria-current="page"] { color: var(--accent) !important; }
.bn-sheet { background: var(--card) !important; color: var(--ink) !important; }
.bn-sheet a, .bn-sheet button { color: var(--ink) !important; }
.bn-grab { background: var(--line) !important; }

/* ---- textes hérités qui étaient blancs sur fond sombre -----------------
   Ces classes codaient `rgba(255,255,255,.5-.7)` en dur dans le <style> de
   leur gabarit — juste sur un fond noir, illisible sur un fond blanc.
   Mesurés au navigateur à 1:1 après l'inversion. */
.hb-sub, .hb-next__p, .ed-chev, .ed-hint, .offer-tab,
.form-section-title, .mk-toc-link, .as-sub, .cw-sub, .dn-url {
  color: var(--ink-mute) !important;
}
.hb-next__tag { color: var(--g-red) !important; }
.ed-url-badge { color: var(--ink) !important; background: var(--surface-2) !important; }

/* Le point de la signature était jaune Google : 1,71:1 sur blanc. */
.topbar-brand b, .sidebar-brand b { color: var(--accent) !important; }

/* ---- surfaces ---------------------------------------------------------- */
.card, .ed-card, .cw-card, .hb-card, .mk-section, .dc-card, .stat-card, .empty-state {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.table-wrap { border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
table { color: var(--ink); }
th { font-family: var(--font-d); font-weight: 600; color: var(--ink-mute); }
td, th { border-color: var(--line) !important; }

/* ---- typographie ------------------------------------------------------- */
body, .app-shell { font-family: var(--font-b); color: var(--ink); }
h1, h2, h3, h4, .page-head h1, .card-title, .dc-title, .ed-h-t, .cw-h1 {
  font-family: var(--font-d); font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.text-muted, .lede, .muted, .hp-lead, .ed-h-s, .cw-sub, .dc-light { color: var(--ink-mute) !important; }

/* ---- boutons ----------------------------------------------------------- */
/* .btn existe déjà partout ; on le rhabille au lieu d'introduire .btn--primary
   dans 137 endroits. Les modificateurs historiques sont remappés. */
.btn {
  font-family: var(--font-d) !important; font-weight: 600 !important;
  border-radius: var(--r-btn) !important;
  border: 1px solid transparent !important;
  transition: transform .12s, box-shadow .15s, background .15s !important;
}
.btn:active { transform: scale(.97); }
.btn.lime, .btn.primary, .btn-primary, .cw-btn-primary, .ed-save, .hb-next__go {
  background: var(--accent) !important; color: #fff !important;
}
[data-theme="dark"] .btn.lime,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .cw-btn-primary,
[data-theme="dark"] .ed-save { color: #16255C !important; }
.btn.purple, .btn.accent { background: var(--ink) !important; color: var(--paper) !important; }
.btn.ghost, .btn.outline, .btn.secondary {
  background: transparent !important; border-color: var(--line) !important; color: var(--ink) !important;
}
.btn.soft { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.btn.full, .btn.block { width: 100%; }

/* ---- formulaires ------------------------------------------------------- */
.field input, .field select, .field textarea,
input.input, select.select, textarea.textarea,
.lk-in, .cw-input, .ed-input {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-family: var(--font-b) !important;
}
.field input:focus, .field select:focus, .field textarea:focus,
input.input:focus, select.select:focus, textarea.textarea:focus, .lk-in:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.form-label, .ed-label, label { font-family: var(--font-d); font-weight: 600; color: var(--ink); }
.form-error { color: #c5372b; }
[data-theme="dark"] .form-error { color: #ff9d93; }

/* ---- pastilles --------------------------------------------------------- */
.pill, .chip, .badge, .tag {
  border-radius: var(--r-pill) !important;
  font-family: var(--font-d); font-weight: 600;
}

/* ---- icônes ------------------------------------------------------------ */
/* .ic est la classe historique (304 usages) ; .icn celle de la v13. On aligne
   le trait pour que les deux sprites cohabitent pendant la migration. */
.ic, .icn {
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* ---- socle d'accessibilité conservé de la v12 -------------------------- */
/* iOS zoome tout champ sous 16px. La liste reprend les sélecteurs de
   app-dark.css : un simple `select` perdait contre `select.select`. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea, .cw-input, .ds-input, .lk-in,
.field input, .field select, .field textarea,
input.input, select.select, textarea.textarea {
  font-size: max(16px, 1em) !important;
}

@media (max-width: 900px), (pointer: coarse) {
  .btn, .cw-btn-primary, button[type="submit"] { min-height: 44px; }
  .btn.sm, .btn-icon { min-height: 40px; }
  .sidebar-nav a, .bottomnav a { min-height: 44px; }
  .topbar-avatar { width: 40px; height: 40px; }
  .topbar-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .as-x { min-width: 40px; min-height: 40px; display: grid; place-items: center; }
  .offer-tab, .tabs a, .tab-link, .mk-toc-link { min-height: 40px; display: inline-flex; align-items: center; }
  .ed-url-badge { min-height: 44px; display: inline-flex; align-items: center; }
  .mk-nav-links a, .mk-footer-links a, .mk-nav-brand { display: inline-flex; align-items: center; min-height: 40px; }

  /* Barre d'actions du chat : trois liens à 33px et une croix à 24px. */
  .lc-actions-bar a { display: inline-flex; align-items: center; min-height: 40px; }
  .lc-close, .as-close, [aria-label*="Fermer"] {
    min-width: 40px; min-height: 40px; display: grid; place-items: center;
  }
}

/* Tableaux : 13 gabarits en affichent un sans conteneur défilant. */
@media (max-width: 760px) {
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto;
          -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  table thead, table tbody, table tfoot { display: table; width: 100%; min-width: max-content; }
  table th, table td { white-space: nowrap; }
}

.cw-bottom, .ds-dock, [data-fixed-bottom] {
  padding-bottom: max(20px, calc(12px + env(safe-area-inset-bottom))) !important;
}

/* ---- utilitaires de mise en page pleine largeur ------------------------ */
/* La maquette vit dans un cadre de 412px. En production les écrans sont plus
   larges : on borne le contenu au lieu de l'étirer. */
.v13-wrap { max-width: 780px; margin-inline: auto; }
@media (min-width: 900px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .quick { grid-template-columns: repeat(4, 1fr); }
}


/* ---- blocs volontairement sombres --------------------------------------
   Certains composants gardent un fond sombre dans le thème clair (bloc de
   configuration, carte live, aperçus). Le remap de --ink y rendait le texte
   sombre sur sombre — mesuré à 1,1:1. On y force la couleur claire. */
/* `.hb-setup` figurait ici quand son fond était sombre. Le remap de --ds-1
   l'a rendu CLAIR : forcer le texte en blanc le rendait donc invisible —
   mesuré à 1:1 sur « Étapes de configuration » et les cinq libellés d'étape.
   Il suit désormais la surface du thème comme n'importe quelle carte. */
.hb-setup { background: var(--card) !important; color: var(--ink) !important; }
.hb-setup b, .hb-setup strong { color: var(--ink) !important; }
.hb-setup .muted, .hb-setup small, .hb-setup span { color: var(--ink-mute) !important; }
.hb-step { color: var(--ink) !important; }
.hb-step b { color: var(--ink) !important; }
.hb-step span, .hb-step small { color: var(--ink-mute) !important; }
.hb-step__go { color: var(--accent) !important; }

/* Restent volontairement sombres : ils portent une image ou un dégradé. */
.live, .ed-thumb, .pcover, .dark-block, [data-dark] { color: #FFFFFF !important; }
.live b, .pcover__id h2 { color: #FFFFFF !important; }
.live .muted, .pcover__id .ptot { color: rgba(255,255,255,.72) !important; }

/* ---- derniers îlots de texte clair sur fond clair ----------------------
   Conteneurs sans classe propre, hérités de feuilles historiques. Mesurés
   au navigateur à 1:1 après l'inversion du thème. */
.empty-state, .empty-state p, .empty-state div,
.form-section th, .form-section td, .form-section div,
.mk-toc, .mk-toc div, .offer-mgr, .offer-mgr div,
.dc-light, .dc-light div, .dc-light span:not([class]), code, pre, .code {
  color: var(--ink) !important;
}
/* `span:not([class])` et pas `span` : la règle d'origine forçait TOUS les
   spans de .dc-light en encre sombre, y compris ceux qui portent leur propre
   fond — le badge d'état retombait à 3,11:1 sur l'accent. Une règle de
   rattrapage ne doit pas écraser ce qui a été décidé explicitement. */
.empty-state p, .dc-light div, .mk-toc div { color: var(--ink-mute) !important; }
code, pre, .code { background: var(--surface-2) !important; }

/* Le violet de la v12 subsiste dans quelques libellés : 3,39:1 sur gris clair. */
.dc-light span[style*="8B6CF6"], [style*="color:#8B6CF6"], [style*="color: #8B6CF6"] {
  color: var(--accent) !important;
}
/* Rouge d'alerte Google à 3,92:1 sur blanc — on assombrit pour le petit texte. */
.hb-next__tag { color: #c5372b !important; }
[data-theme="dark"] .hb-next__tag { color: #ff9d93 !important; }

/* ---- correctifs mesurés dans les DEUX thèmes ---------------------------- */

/* En thème sombre l'accent devient CLAIR (#C3CFFF) : l'encre des boutons
   pleins doit alors être foncée. Deux boutons manquaient à la liste. */
[data-theme="dark"] .hb-next__go,
[data-theme="dark"] .ed-url-btn.primary,
[data-theme="dark"] .btn.lime,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .cw-btn-primary,
[data-theme="dark"] .ed-save { color: #16255C !important; }

/* Conteneurs dont le fond blanc était codé en dur : en thème sombre le texte
   clair tombait dessus à 1,21:1. On les rattache à la surface du thème. */
.offer-mgr, .form, .form-section, .mk-toc, .empty-state, .table-wrap,
.dc-light, .offer-tab, .panel, .box {
  background-color: var(--card) !important;
}
.offer-tab { background: transparent !important; color: var(--ink-mute) !important; }
.offer-tab.is-active, .offer-tab[aria-selected="true"] {
  background: var(--accent-soft) !important; color: var(--accent-soft-ink) !important;
}

/* Vignettes d'aperçu : fond volontairement sombre, donc il faut le poser —
   sinon le texte clair qu'elles portent se retrouve sur du blanc. */
.ed-thumb, .ed-thumb.wide, .ed-thumb.round {
  background-color: #1F1F22 !important; color: #FFFFFF !important;
}
/* L'initiale de substitution est un <span> nu : elle héritait de --ink-mute
   posé plus haut, soit 2,72:1 sur ce fond volontairement sombre. */
.ed-thumb > *, .ed-thumb span { color: #FFFFFF !important; }

/* Restes du système lime/violet de la v12. */
[style*="E3F331"], .lime-bg { background-color: var(--accent) !important; }

/* ---- trois derniers cas, mesurés au navigateur -------------------------
   Des styles en attribut référencent encore les anciens jetons, résolus dans
   une portée où ils valent leur ancienne valeur claire-sur-sombre. Plutôt que
   de traquer la cascade jeton par jeton, on force la couleur au point d'usage. */
.app-shell [style*="--sn-neutral-500"],
.app-shell [style*="--sn-neutral-400"],
.app-shell [style*="--app-muted"],
.app-shell [style*="--app-faint"] { color: var(--ink-mute) !important; }

.app-shell [style*="--sn-neutral-900"],
.app-shell [style*="--app-text"] { color: var(--ink) !important; }

/* .btn.purple prend l'accent : en thème sombre l'accent est clair, donc
   l'encre doit être foncée — mesuré à 1,53:1 sur « Sauvegarder ». */
.btn.purple, .btn.purple.lg, .btn.accent {
  background: var(--ink) !important; color: var(--paper) !important;
}

/* La carte d'aperçu du media kit imite la page publique : elle porte du texte
   blanc en style attribut. Sans fond sombre explicite, ces chiffres
   devenaient blancs sur blanc — mesuré à 1:1. */
.preview-card {
  background: #1F1F22 !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.14) !important;
}
.preview-card * { color: inherit; }
.preview-card .muted, .preview-card small { color: rgba(255,255,255,.68) !important; }

/* Boutons d'envoi. app-dark les peint en accent via
   `.btn[type="submit"]:not(.ghost):not(...)` — spécificité (0,4,0), qui prime
   sur `.btn.purple.lg`. Se battre sur le fond serait une erreur : un bouton
   d'envoi EN accent, c'est le bon rendu. Le défaut est l'encre — en thème
   sombre l'accent devient CLAIR (#C3CFFF) et le blanc dessus tombe à 1,53:1.
   On corrige donc la couleur du texte, avec la spécificité nécessaire. */
[data-theme="dark"] .btn[type="submit"]:not(.ghost):not(.outline):not(.soft),
[data-theme="dark"] button.btn.purple, [data-theme="dark"] button.btn.accent,
[data-theme="dark"] .app-shell .btn.purple, [data-theme="dark"] .app-shell .btn.accent {
  color: #16255C !important;
}
.app-shell .btn.purple:not([type="submit"]), .main-area .btn.purple:not([type="submit"]) {
  background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important;
}

/* Badges d'état à 10px : --ink-mute sur une bordure translucide donne 4,06:1
   en thème sombre, sous le seuil. On passe au ton plus contrasté. */
[data-theme="dark"] .app-shell [style*="--sn-neutral-500"],
[data-theme="dark"] .app-shell [style*="--app-muted"] { color: var(--ink-soft) !important; }

/* Le bandeau argent du hub porte quatre mesures, pas trois : on ajuste la
   grille pour ce cas précis plutôt que de sacrifier une donnée. */
.hb-money.stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; background: none; }
@media (min-width: 560px) { .hb-money.stat-row { grid-template-columns: repeat(4, 1fr); } }
.hb-money.stat-row > .stat { background: var(--card); }

/* Le halo tournant de .invite se pose SOUS le contenu. Les cartes d'action du
   hub ont déjà leur propre fond : on neutralise le calque plein de .invite
   pour ne garder que l'anneau, sinon il masquerait le dégradé. */
/* Le halo de .invite se pose SOUS le contenu mais AU-DESSUS du fond de
   l'élément (isolation + z-index négatif). Rendre `::after` transparent —
   ce que faisait la version précédente — laissait donc le dégradé conique
   recouvrir toute la carte : texte illisible sur un aplat arc-en-ciel.
   Le calque opaque est rétabli. */
.hb-next.invite::after { background: var(--card); }

/* Le toast, la feuille et le voile étaient `position:absolute` dans la
   maquette parce qu'ils vivaient dans le cadre .phone. Hors de ce cadre, il
   faut du `fixed` : sinon ils se positionnent par rapport au document et
   s'éloignent de l'écran dès qu'on fait défiler. */
.toast { position: fixed; left: 16px; right: 16px; max-width: 520px; margin-inline: auto;
         bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.scrim { position: fixed; }
.sheet { position: fixed; max-width: 640px; margin-inline: auto; }
@media (min-width: 900px) { .toast { bottom: 24px; } }


/* ============================================================================
   TRANSITIONS DE PAGE — glissement horizontal
   ----------------------------------------------------------------------------
   La maquette faisait glisser des <section> dans une seule page. SocialNest est
   une application multi-pages Django : chaque navigation est un chargement
   complet, il n'y a pas deux écrans présents en même temps à animer.

   L'API View Transitions le permet nativement entre deux documents. Le
   navigateur photographie l'ancienne page, charge la nouvelle, et anime la
   bascule. C'est la seule façon d'obtenir ce mouvement sans transformer toute
   l'application en client HTMX.

   Sens : l'écran sortant part vers la GAUCHE, l'entrant le suit depuis la
   DROITE. Au retour, l'inverse — sinon la navigation arrière donne
   l'impression d'avancer, et l'utilisateur perd le fil de sa position.

   Navigateurs sans support : aucune animation, la page se charge normalement.
   ========================================================================== */
@view-transition { navigation: auto; }

@keyframes vt-out-left  { to   { transform: translateX(-26%); opacity: .6; } }
@keyframes vt-in-right  { from { transform: translateX(100%); } }
@keyframes vt-out-right { to   { transform: translateX(26%);  opacity: .6; } }
@keyframes vt-in-left   { from { transform: translateX(-100%); } }

::view-transition-old(root) {
  animation: vt-out-left .34s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root) {
  animation: vt-in-right .34s cubic-bezier(.4,0,.2,1) both;
}
/* Retour : le mouvement s'inverse. */
html[data-nav="back"]::view-transition-old(root) {
  animation: vt-out-right .34s cubic-bezier(.4,0,.2,1) both;
}
html[data-nav="back"]::view-transition-new(root) {
  animation: vt-in-left .34s cubic-bezier(.4,0,.2,1) both;
}

/* Les éléments persistants ne doivent PAS glisser avec la page : une barre de
   navigation qui part à gauche à chaque changement d'onglet est un défaut,
   pas une animation.

   Contre-intuitif : `view-transition-name: none` ne les exclut pas — au
   contraire, ils restent dans le calque `root` et glissent avec lui. Il faut
   leur donner un NOM propre pour qu'ils soient capturés séparément ; le
   navigateur les fait alors se transformer sur place au lieu de les
   emporter. Un nom doit être unique dans le document : ces trois éléments
   n'apparaissent qu'une fois chacun. */
.topbar     { view-transition-name: sn-topbar; }
.bottom-nav { view-transition-name: sn-bottomnav; }
.sidebar    { view-transition-name: sn-sidebar; }

/* Ils se fondent au lieu de glisser. */
::view-transition-old(sn-topbar), ::view-transition-new(sn-topbar),
::view-transition-old(sn-bottomnav), ::view-transition-new(sn-bottomnav),
::view-transition-old(sn-sidebar), ::view-transition-new(sn-sidebar) {
  animation-duration: .18s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---- Boutons : passe demandée — un peu plus fins, rayon resserré ---------
   La hauteur de frappe reste à 44px sous 900px : c'est le minimum WCAG 2.5.5
   et Apple HIG, et le document de référence fourni le rappelle explicitement.
   On resserre donc ce qui peut l'être — rayon, marge horizontale, corps —
   sans toucher à la zone tactile. Le bouton PARAÎT plus fin, il reste
   aussi facile à viser.
   Le rayon final (10px) est désormais porté directement par le jeton --r-btn
   en tête de feuille : plus de seconde définition qui contredisait la première. */
.btn, .btn--primary, .btn--soft, .btn--ghost, .btn--ink {
  padding: 0 1.05em;
  font-size: .92rem;
  border-radius: var(--r-btn);
}
.btn--lg { min-height: 48px; font-size: .98rem; padding: 0 1.25em; }
.btn.sm, .btn--sm { font-size: .84rem; padding: 0 .85em; border-radius: 9px; }
.card, .ed-card, .cw-card, .hb-card { border-radius: var(--r-card) !important; }


/* ============================================================================
   HALO D'INVITATION — attirer l'œil sur ce qui reste à faire
   ----------------------------------------------------------------------------
   Le composant .invite de la maquette entoure un bloc d'un dégradé conique en
   rotation. Ici on l'applique à ce qui n'est PAS fait : posé partout, un halo
   ne désigne plus rien.

   Deux règles de retenue :
     - une seule étape porte le halo à la fois, la PREMIÈRE non faite ; les
       suivantes gardent un liseré discret. Cinq halos en rotation sur un même
       écran, c'est une décoration, plus un guide ;
     - l'animation s'arrête sous prefers-reduced-motion, le liseré reste.
   ========================================================================== */
[data-glow] { position: relative; isolation: isolate; border-radius: 12px; }

/* Toutes les étapes à faire : liseré sobre. */
[data-glow]::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1;
  border-radius: 13.5px;
  background: linear-gradient(120deg, var(--line), var(--accent-soft), var(--line));
  opacity: .55;
}
[data-glow]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 12px; background: var(--card);
}

/* La première seulement : le halo tourne. */
[data-glow]:first-of-type::before {
  background: conic-gradient(from var(--ang),
    var(--g-blue), var(--g-green), var(--g-yellow), var(--g-red), var(--g-blue));
  animation: hue 5s linear infinite;
  filter: blur(5px);
  opacity: .85;
}

.hb-step--todo { padding: 11px 12px; }

@media (prefers-reduced-motion: reduce) {
  [data-glow]:first-of-type::before { animation: none; filter: none; opacity: .6; }
}

/* Sur fond sombre, le calque interne doit suivre la surface du thème. */
[data-theme="dark"] [data-glow]::after { background: var(--card); }

/* app-dark resserre les boutons dans .main-area jusqu'à 11px
   (`.main-area .btn:not(.lg):not(.xl)`, spécificité 0,4,0). « Un peu plus
   fins » ne veut pas dire illisibles : on pose un plancher à 13,5px, ce qui
   reste plus compact que les 15px d'origine tout en restant lisible à bout
   de bras. */
.main-area .btn:not(.lg):not(.xl),
.app-shell .btn:not(.lg):not(.xl) {
  font-size: 13.5px;
  padding: 0 1.05em;
  border-radius: var(--r-btn);
}
.main-area .btn.sm, .app-shell .btn.sm { font-size: 12.5px; padding: 0 .85em; }

/* ---- carte d'action prioritaire du tableau de bord ---------------------
   Les trois variantes partaient d'un dégradé sombre codé en dur
   (`linear-gradient(150deg, #2A1416, var(--ds-1) 62%)`) : lisible sur fond
   noir, illisible en thème clair où le texte devient sombre. On garde
   l'intention — une teinte qui dit la nature du blocage — avec une couleur
   dérivée de l'accent sémantique, très diluée. */
.hb-next {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
}
.hb-next--block {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--g-red) 14%, var(--card)), var(--card) 62%) !important;
  border-color: color-mix(in srgb, var(--g-red) 45%, var(--line)) !important;
}
.hb-next--money {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--g-green) 14%, var(--card)), var(--card) 62%) !important;
  border-color: color-mix(in srgb, var(--g-green) 45%, var(--line)) !important;
}
.hb-next--do {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card) 62%) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
}
.hb-next--calm { border-style: dashed !important; }
.hb-next__t, .hb-next__p { color: var(--ink) !important; }
.hb-next__p { color: var(--ink-mute) !important; }

/* ---- derniers libellés sous le seuil, mesurés au navigateur ------------
   Petits textes décoratifs : « Header » dans l'éditeur (2,72:1),
   « Powered by Claude » dans le chat (3,11:1), les badges « API OFF » du
   media kit (4,48:1 — à un cheveu des 4,5 exigés). */
.ed-thumb-label, .ed-preview-label, [class*="preview"] > small,
.lc-powered, .lc-sub, .lc-actions-bar a, .lc-actions-bar span {
  color: var(--ink-mute) !important;
}
.app-shell [style*="--app-border"][style*="font-size: 10px"],
.app-shell [style*="background: var(--app-border)"] {
  color: var(--ink-soft) !important;
  background: var(--surface-2) !important;
}

/* ============================================================================
   TIROIR DE PROFIL — un champ, aucune navigation
   ========================================================================== */
.dr { max-width: 560px; }
.dr-body { min-height: 190px; }

.dr-title { font-family: var(--font-d); font-weight: 700; font-size: 1.15rem; margin-bottom: 4px; }
.dr-hint  { font-size: 13px; color: var(--ink-mute); line-height: 1.45; margin-bottom: 16px; }

.dr-in {
  width: 100%; min-height: 50px; padding: 13px 15px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-family: var(--font-b); font-size: 16px;   /* pas de zoom iOS */
}
.dr-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.dr-in { min-height: 108px; resize: vertical; line-height: 1.5; }

/* Le « @ » est posé par l'interface, pas tapé par le créateur : la moitié
   des pseudos arrivaient avec, l'autre sans. */
.dr-handle { position: relative; }
.dr-handle-at {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--ink-mute); font-size: 16px; pointer-events: none;
}
.dr-in--at { padding-left: 30px; }

.dr-money { position: relative; }
.dr-money-cur {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-mute); font-size: 16px; pointer-events: none;
}
.dr-money .dr-in { padding-right: 34px; }

.dr-file { display: flex; align-items: center; gap: 14px; cursor: pointer; margin-bottom: 10px; }
.dr-file-prev {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  background-size: cover; background-position: center; background-color: var(--surface-2);
  display: grid; place-items: center; color: var(--ink-mute);
}
.dr-file-prev--vide { border: 2px dashed var(--line); }
.dr-file-cta {
  flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-d); font-weight: 600; font-size: 14px;
}

.dr-err {
  display: block; margin: 2px 0 10px; font-size: 13px; font-weight: 500; color: #c5372b;
}
[data-theme="dark"] .dr-err { color: #ff9d93; }

.dr-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.dr-save {
  flex: 1; min-height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff;
  font-family: var(--font-d); font-weight: 700; font-size: 15px;
}
[data-theme="dark"] .dr-save { color: #16255C; }
.dr-save:disabled { opacity: .6; cursor: default; }
.dr-skip {
  min-height: 50px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  color: var(--ink-mute); font-size: 13.5px; font-weight: 600;
}

.dr-load { padding: 6px 0 2px; }
.dr-load .skel-line { display: block; }

/* ---- anneau de progression --------------------------------------------
   Le pourcentage est porté par une variable : l'animer, c'est animer un
   angle, pas redessiner un SVG à chaque point. */
.pg-wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line);
}
.pg-ring {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--surface-2) 0);
  transition: --p .6s cubic-bezier(.4,0,.2,1);
}
.pg-ring::before {
  content: ""; position: absolute; width: 40px; height: 40px;
  border-radius: 50%; background: var(--card);
}
.pg-num {
  position: relative; font-family: var(--font-d); font-weight: 700;
  font-size: 15px; color: var(--ink);
}
.pg-num small { font-size: 10px; font-weight: 600; color: var(--ink-mute); }
.pg-body { flex: 1; min-width: 0; }
.pg-t { display: block; font-family: var(--font-d); font-weight: 600; font-size: 14px; }
.pg-s { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-mute); }
.pg-go {
  flex: none; min-height: 40px; padding: 0 15px; border: 0; border-radius: 10px;
  cursor: pointer; background: var(--accent); color: #fff;
  font-family: var(--font-d); font-weight: 600; font-size: 13px;
}
[data-theme="dark"] .pg-go { color: #16255C; }

/* Étape cochée — le trait se barre, la couleur s'éteint. */
@keyframes step-done { 0% { transform: scale(1); } 40% { transform: scale(.97); } 100% { transform: scale(1); } }
.is-done { animation: step-done .35s cubic-bezier(.4,0,.2,1); opacity: .55; }
.is-done .hb-step__go { display: none; }

@media (prefers-reduced-motion: reduce) {
  .is-done { animation: none; }
  .pg-ring { transition: none; }
}

/* ============================================================================
   DENSITÉ MOBILE — rien ne doit être trop gros
   ----------------------------------------------------------------------------
   Principe qui gouverne tout ce bloc : la ZONE DE FRAPPE reste à 44 px, la
   DENSITÉ VISUELLE se resserre. Ce sont deux choses différentes qu'on
   confond souvent. Un bouton peut paraître fin et rester aussi facile à
   viser — c'est le remplissage et le corps de texte qui changent, pas la
   hauteur cliquable.
   ========================================================================== */

/* ---- bandeau de mesures ------------------------------------------------
   Remplace trois cartes empilées à 48 px de chiffre. Mesuré à 390 px : 491 px
   avant, une seule rangée après. Ce qui compte sur un téléphone n'est pas la
   taille du chiffre, c'est qu'il soit lisible sans faire défiler. */
.kstrip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; margin-bottom: 6px;
}
.kstrip__i {
  padding: 11px 10px; text-align: center;
  border-left: 1px solid var(--line);
}
.kstrip__i:first-child { border-left: 0; }
.kstrip__n {
  display: block; font-family: var(--font-d); font-weight: 700;
  font-size: 1.32rem; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.kstrip__n--money { color: var(--accent); }
.kstrip__l {
  display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .03em; color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kstrip__note { font-size: 11px; color: var(--ink-mute); margin-bottom: 18px; }
@media (min-width: 700px) { .kstrip__n { font-size: 1.6rem; } }

/* ---- champs de saisie --------------------------------------------------
   Mesurés entre 48 et 52 px. Le corps reste à 16 px — en dessous, iOS zoome
   au focus et décale la page — mais le remplissage se resserre. 44 px de
   haut, soit exactement la zone de frappe requise, sans un pixel de plus. */
@media (max-width: 900px), (pointer: coarse) {
  /* `!important` assumé : app-dark.css fixe `padding: 12px 15px !important`
     sur ces mêmes sélecteurs, et cw-kit.css fait de même sur les titres. Ces
     déclarations ont été écrites pour une autre densité ; la couche v13 est
     la dernière à parler sur la présentation, elle doit pouvoir trancher. */
  .field input, .field select, .field textarea,
  input.input, select.select, textarea.textarea,
  .lk-in, .sl-input, .sl-select, .dr-in, .cw-input,
  .ed-in, .ed-ta, .as-in, .mk-in, .sh-in {
    min-height: 44px !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
    border-radius: 10px !important;
  }
  textarea.dr-in, .field textarea, .ed-ta { min-height: 76px !important; }

  /* Libellés et aides : le texte d'accompagnement occupait autant que le
     champ qu'il accompagne. */
  .form-label, .ed-label, .dr-title { font-size: 13px; margin-bottom: 5px; }
  .dr-hint, .ed-hint, .form-help, .sl-hint { font-size: 12px; line-height: 1.4; }
  .dr-hint { margin-bottom: 12px; }

  /* ---- en-têtes de page ------------------------------------------------
     Mesurés entre 155 et 196 px : un tiers d'écran consommé par un titre et
     une phrase avant le premier contenu utile. */
  .page-head { margin-bottom: 16px !important; gap: 10px; }
  .page-head h1 { font-size: 1.28rem !important; line-height: 1.15 !important; margin-bottom: 3px !important; }
  .page-head .lede { font-size: 12.5px !important; line-height: 1.4; margin-bottom: 0 !important; }
  .page-head .eyebrow { font-size: 10px !important; }
  /* Trois boutons aux libellés longs se replient sur trois lignes : mesuré à
     95 px pour la seule rangée d'actions, sur un en-tête de 188 px. Les
     tronquer ferait perdre l'information ; les empiler coûte un tiers
     d'écran. On les fait défiler horizontalement — une seule rangée, aucun
     libellé sacrifié. */
  .page-head .actions {
    gap: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    margin-inline: -2px;
    scroll-snap-type: x proximity;
  }
  .page-head .actions::-webkit-scrollbar { display: none; }
  .page-head .actions > * { flex: none; scroll-snap-align: start; white-space: nowrap; }

  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.08rem; }
  h3 { font-size: .98rem; }

  /* ---- cartes et rythme vertical --------------------------------------- */
  .card, .ed-card, .cw-card, .hb-card, .mk-section, .dc-card { padding: 13px !important; }
  .card + .card, .ed-card + .ed-card { margin-top: 9px; }
  .mb-6 { margin-bottom: 18px !important; }
  .mb-4 { margin-bottom: 12px !important; }
  .mt-4 { margin-top: 12px !important; }

  /* ---- boutons : plus fins, zone de frappe intacte ---------------------- */
  .btn { padding: 0 .95em; }
  .btn.lg, .btn--lg { min-height: 46px; font-size: .95rem; }
  .dr-save, .ha-cta, .kz-cta { min-height: 46px; font-size: 14.5px; }
  .ed-save { min-height: 44px; font-size: 14px; }

  /* ---- rangées de liste ------------------------------------------------- */
  .lk-sum { min-height: 64px; }

  /* Cartes repliées de l'éditeur : 101 px chacune, mesuré. Six cartes, c'est
     600 px consommés avant d'avoir ouvert quoi que ce soit. L'en-tête garde
     ses 44 px de zone de frappe — seuls le remplissage et l'interligne
     bougent. */
  .ed-head { padding: 11px 13px !important; min-height: 44px; }
  .ed-ico { width: 32px !important; height: 32px !important; }
  .ed-h-t { font-size: 14px !important; line-height: 1.25; }
  .ed-h-s { font-size: 11.5px !important; line-height: 1.3; margin-top: 1px; }
  .ed-card { border-radius: 14px !important; }
  .ed-fast { padding: 11px 13px !important; }
  .ed-url { margin-bottom: 12px !important; }
  .sl-row { min-height: 52px; padding: 5px 7px; }
  .pg-wrap { padding: 11px; gap: 11px; }
  .pg-ring { width: 46px; height: 46px; }
  .pg-ring::before { width: 35px; height: 35px; }
}

/* Pastilles d'état sur fond d'accent : l'encre sombre y tombe à 3,11:1
   (mesuré sur « ACTIF » dans la liste des produits). Sur un aplat d'accent,
   l'encre est claire — c'est le même contrat que les boutons pleins. */
.pill.active, .pill.is-active, .badge.active, .tag.active,
[class*="pill"][class*="active"] {
  background: var(--accent) !important; color: #FFFFFF !important;
}
[data-theme="dark"] .pill.active, [data-theme="dark"] .badge.active,
[data-theme="dark"] [class*="pill"][class*="active"] { color: #16255C !important; }

/* Badge d'état d'un produit. En capitales et à 10 px, il criait pour une
   information secondaire ; en encre sombre sur l'accent, il tombait à
   3,11:1. */
.sp-state {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-pill); white-space: nowrap;
}
.sp-state--on  { background: var(--accent); color: #FFFFFF; }
.sp-state--off { background: var(--surface-2); color: var(--ink-mute); }
[data-theme="dark"] .sp-state--on { color: #16255C; }

/* Initiale d'avatar. Le fond ET l'encre sont posés ensemble : les laisser
   dériver dans deux règles séparées avait donné 2,72:1 dans un sens, puis
   1,11:1 dans l'autre après une correction à l'aveugle. */
.topbar-avatar, .as-avatar {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}