/* ══════════════════════════════════════════════════════════════════
   WILLOS ULTIME — Design system unifié
   Base : wallet_v2.html (design retenu). Étendu : cartes Produit /
   Service / YouTube / Site / Overview + bouton PWA + fiche autonome.
   Utilisé par wallet.html ET par toutes les fiches autonomes.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#000;--bg2:#0a0a0f;--panel:#111118;--panel2:#161620;
  --line:rgba(255,255,255,.08);--line-g:rgba(0,200,83,.2);--line-c:rgba(34,211,238,.2);
  --green:#00c853;--green2:#4ade80;--cyan:#22d3ee;
  --amber:#f59e0b;--blue:#3b82f6;--violet:#8b5cf6;--red:#ef4444;--yt:#ff3b30;
  --text:#f0f6ff;--muted:#6b7fa0;--soft:#b8c8de;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* Stage : fond plein écran (belle présentation desktop + mobile) */
html,body{background:var(--bg);font-family:Inter,-apple-system,'SF Pro Display',system-ui,sans-serif;color:var(--text);min-height:100%}
body.willos-stage{background:radial-gradient(1200px 600px at 50% -10%,#0b1020 0%,#000 60%);display:flex;justify-content:center;overflow-x:hidden}

/* Phone : le cadre 390px, colonne centrée */
.phone{width:390px;min-height:100vh;background:var(--bg);position:relative;overflow-x:hidden;padding-top:calc(env(safe-area-inset-top,0px) + 14px)}

/* ─── STATUS BAR ─── */
.status-bar{height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 8px;font-size:15px;font-weight:600}
.sb-time{font-size:17px;font-weight:700}
.sb-icons{display:flex;align-items:center;gap:5px;font-size:12px}

/* ─── NAV BAR ─── */
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 0}
.nav-title{font-family:Sora,sans-serif;font-size:28px;font-weight:900;letter-spacing:-.03em}
.nav-title span{color:var(--green)}
.nav-sub{font-size:11px;color:var(--muted);margin-top:2px;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}
.nav-icon-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--line);display:grid;place-items:center;font-size:10px;font-family:'IBM Plex Mono',monospace;cursor:pointer;text-decoration:none;color:var(--muted)}

/* ─── SCORE BAND ─── */
.score-band{margin:16px 20px;background:linear-gradient(135deg,rgba(0,200,83,.12),rgba(34,211,238,.08));border:1px solid var(--line-g);border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:14px}
.score-ring{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--green) 0%,var(--cyan) var(--score-pct,75%),rgba(255,255,255,.06) var(--score-pct,75%));display:grid;place-items:center;position:relative}
.score-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--bg2)}
.score-val{position:relative;z-index:1;font-family:Sora,sans-serif;font-size:15px;font-weight:900;color:var(--green)}
.score-info{flex:1}
.score-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.score-sub{font-size:11px;color:var(--muted)}
.score-badge{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;background:rgba(0,200,83,.12);border:1px solid rgba(0,200,83,.3);color:var(--green);padding:4px 8px;border-radius:7px;white-space:nowrap;text-decoration:none}

/* ─── SECTION TITLE ─── */
.s-title{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin:20px 0 10px}
.s-title h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.s-title a{font-size:12px;font-weight:600;color:var(--green);text-decoration:none}

/* ══════════ CARD ARENA — 3D FLIP STACK ══════════ */
.card-arena{padding:0 20px;position:relative;height:252px;margin-bottom:8px}
.card-3d{position:absolute;left:20px;right:20px;height:172px;border-radius:20px;perspective:1300px;-webkit-perspective:1300px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;cursor:pointer;transition:top .52s cubic-bezier(.4,0,.2,1),transform .52s cubic-bezier(.4,0,.2,1),filter .52s ease,opacity .52s ease}
.card-3d.pos-5{top:0;z-index:1;transform:scale(.86);filter:brightness(.28);opacity:.55}
.card-3d.pos-4{top:2px;z-index:2;transform:scale(.895);filter:brightness(.32);opacity:.7}
.card-3d.pos-3{top:14px;z-index:3;transform:scale(.935);filter:brightness(.55)}
.card-3d.pos-2{top:26px;z-index:4;transform:scale(.968);filter:brightness(.78)}
.card-3d.pos-front{top:40px;z-index:5;transform:scale(1);filter:brightness(1)}
.card-flipper{width:100%;height:100%;border-radius:20px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .72s cubic-bezier(.4,0,.2,1)}
.card-3d.flipped .card-flipper{transform:rotateY(180deg)}
.card-face,.card-verso{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.card-face{transform:rotateY(0deg)}
.card-verso{transform:rotateY(180deg)}
.card-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1px);background-size:9px 9px;pointer-events:none}
.card-holo{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;animation:holo 5s ease-in-out infinite alternate}
@keyframes holo{0%{opacity:.35;transform:translateX(-5%)}100%{opacity:.75;transform:translateX(5%)}}
.card-scan{position:absolute;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:scan 5s ease-in-out infinite;pointer-events:none}
@keyframes scan{0%,100%{top:-2px;opacity:0}6%{opacity:1}94%{opacity:.6;top:calc(100% + 2px)}}
.card-inner{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}

/* Primitives partagées recto */
.ci-top{display:flex;align-items:flex-start;justify-content:space-between}
.ci-brand{display:flex;flex-direction:column;gap:1px}
.ci-logo{font-family:Sora,sans-serif;font-size:16px;font-weight:900;color:#fff}
.ci-sub{font-family:'IBM Plex Mono',monospace;font-size:6px;color:rgba(255,255,255,.28);letter-spacing:.15em;text-transform:uppercase}
.ci-type{font-family:'IBM Plex Mono',monospace;font-size:6.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:4px;white-space:nowrap}
.ci-type.green{background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.25);color:var(--green)}
.ci-type.violet{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);color:var(--violet)}
.ci-type.cyan{background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);color:var(--cyan)}
.ci-type.amber{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);color:var(--amber)}
.ci-type.red{background:rgba(255,59,48,.1);border:1px solid rgba(255,59,48,.3);color:var(--yt)}
.ci-type.blue{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:var(--blue)}
.ci-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;margin:6px 0}
.ci-ent{font-size:6.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:'IBM Plex Mono',monospace}
.ci-name{font-family:Sora,sans-serif;font-size:15px;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.1}
.ci-id{font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:rgba(0,200,83,.55);letter-spacing:.1em;margin-top:2px}
.ci-bot{display:flex;align-items:flex-end;justify-content:space-between}
.ci-date{display:flex;flex-direction:column;gap:1px}
.date-l{font-family:'IBM Plex Mono',monospace;font-size:6px;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.1em}
.date-v{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.6)}
.eudi-badge{display:flex;align-items:center;gap:3px;background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.25);border-radius:4px;padding:3px 7px}
.eudi-s{color:#FFD700;font-size:6px;letter-spacing:1px}
.eudi-t{font-family:'IBM Plex Mono',monospace;font-size:6px;font-weight:700;color:var(--green2)}
.flag-fr{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.05em}
.flip-hint{position:absolute;bottom:10px;right:14px;z-index:5;font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:600;color:rgba(255,255,255,.28);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}

/* Grand chiffre mis en avant (prix, compteur…) */
.ci-hero-val{font-family:Sora,sans-serif;font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1}
.ci-tagline{font-size:8.5px;color:rgba(255,255,255,.55);line-height:1.4;margin-top:3px}
.ci-pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:6px;font-weight:700;padding:2px 6px;border-radius:99px;letter-spacing:.06em;margin-top:4px}

/* ─── Variantes de cartes : bases héritées (wallet_v2) ─── */
.cf-pass{background:linear-gradient(135deg,#06091a 0%,#0d1428 60%,#080b18 100%);border:1px solid rgba(0,200,83,.28);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,200,83,.06)}
.cf-pass .card-holo{background:linear-gradient(115deg,transparent,rgba(0,200,83,.14) 30%,transparent 55%,rgba(34,211,238,.1) 80%,transparent)}
.cv-pass{background:linear-gradient(145deg,#04070f 0%,#080e1c 100%);border:1px solid rgba(0,200,83,.18)}
.cf-fiche{background:linear-gradient(135deg,#040d1a 0%,#081828 60%,#050e1c 100%);border:1px solid rgba(34,211,238,.22);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(34,211,238,.05)}
.cf-fiche .card-holo{background:linear-gradient(115deg,transparent,rgba(34,211,238,.12) 35%,transparent 60%,rgba(59,130,246,.08) 85%,transparent)}
.cv-fiche{background:linear-gradient(145deg,#040d1a 0%,#081828 100%);border:1px solid rgba(34,211,238,.15)}
.cf-ia{background:linear-gradient(135deg,#100820 0%,#1a0f30 60%,#0e0620 100%);border:1px solid rgba(139,92,246,.28);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(139,92,246,.06)}
.cf-ia .card-holo{background:linear-gradient(115deg,transparent,rgba(139,92,246,.14) 30%,transparent 55%,rgba(91,124,250,.1) 80%,transparent)}
.cv-ia{background:linear-gradient(145deg,#0c0616 0%,#140a26 100%);border:1px solid rgba(139,92,246,.18)}

/* ═══════════════ NOUVELLES CARTES ═══════════════ */
/* PRODUIT — vert */
.cf-prod{background:linear-gradient(135deg,#05130b 0%,#0a2318 55%,#06140c 100%);border:1px solid rgba(0,200,83,.3);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,200,83,.06)}
.cf-prod .card-holo{background:linear-gradient(115deg,transparent,rgba(0,200,83,.16) 32%,transparent 60%,rgba(74,222,128,.1) 84%,transparent)}
.cv-prod{background:linear-gradient(145deg,#04100a 0%,#082015 100%);border:1px solid rgba(0,200,83,.2)}
.cf-prod .ci-id,.cf-prod .ci-hero-val{color:var(--green2)}

/* SERVICE — cyan */
.cf-svc{background:linear-gradient(135deg,#04141a 0%,#08262f 55%,#05151b 100%);border:1px solid rgba(34,211,238,.3);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(34,211,238,.06)}
.cf-svc .card-holo{background:linear-gradient(115deg,transparent,rgba(34,211,238,.16) 32%,transparent 60%,rgba(59,130,246,.1) 84%,transparent)}
.cv-svc{background:linear-gradient(145deg,#04121a 0%,#082230 100%);border:1px solid rgba(34,211,238,.2)}
.cf-svc .ci-id,.cf-svc .ci-hero-val{color:var(--cyan)}

/* YOUTUBE — rouge */
.cf-yt{background:linear-gradient(135deg,#180505 0%,#2a0c0c 55%,#160404 100%);border:1px solid rgba(255,59,48,.32);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,59,48,.06)}
.cf-yt .card-holo{background:linear-gradient(115deg,transparent,rgba(255,59,48,.16) 32%,transparent 60%,rgba(245,158,11,.08) 84%,transparent)}
.cv-yt{background:linear-gradient(145deg,#140404 0%,#240909 100%);border:1px solid rgba(255,59,48,.2)}
.cf-yt .ci-id,.cf-yt .ci-hero-val{color:var(--yt)}

/* SITE INTERNET — bleu */
.cf-site{background:linear-gradient(135deg,#050d1a 0%,#0a1a30 55%,#060e1c 100%);border:1px solid rgba(59,130,246,.32);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(59,130,246,.06)}
.cf-site .card-holo{background:linear-gradient(115deg,transparent,rgba(59,130,246,.16) 32%,transparent 60%,rgba(34,211,238,.1) 84%,transparent)}
.cv-site{background:linear-gradient(145deg,#040b16 0%,#081628 100%);border:1px solid rgba(59,130,246,.2)}
.cf-site .ci-id,.cf-site .ci-hero-val{color:#60a5fa}

/* OVERVIEW GOOGLE — violet→bleu (Gemini) */
.cf-ov{background:linear-gradient(135deg,#0c0820 0%,#141033 45%,#0a1226 100%);border:1px solid rgba(139,92,246,.32);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(139,92,246,.06)}
.cf-ov .card-holo{background:linear-gradient(115deg,transparent,rgba(139,92,246,.16) 28%,transparent 52%,rgba(59,130,246,.12) 80%,transparent)}
.cv-ov{background:linear-gradient(145deg,#080616 0%,#0e0c28 100%);border:1px solid rgba(139,92,246,.2)}
.cf-ov .ci-id,.cf-ov .ci-hero-val{color:#a78bfa}

/* ─── VERSO générique : lignes clé/valeur + CTA (sans icônes) ─── */
.cv-layout2{position:absolute;inset:0;padding:11px 14px;display:flex;flex-direction:column;gap:0;z-index:2}
.cv-hd{font-family:'IBM Plex Mono',monospace;font-size:6px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px;display:block}
.cv-hd.green{color:rgba(0,200,83,.6)}.cv-hd.cyan{color:rgba(34,211,238,.6)}.cv-hd.violet{color:rgba(139,92,246,.65)}.cv-hd.red{color:rgba(255,59,48,.65)}.cv-hd.blue{color:rgba(96,165,250,.7)}
.cv-row2{display:flex;justify-content:space-between;align-items:baseline;padding:2.5px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.cv-row2:last-of-type{border:none}
.cv-k{font-size:8px;color:rgba(255,255,255,.4);font-weight:500;flex-shrink:0}
.cv-v{font-size:8.5px;color:rgba(255,255,255,.82);font-weight:600;text-align:right;font-family:'IBM Plex Mono',monospace}
.cv-note{font-size:7.5px;color:rgba(255,255,255,.4);line-height:1.5;margin-top:5px}
.cv-cta{display:block;margin-top:auto;padding:8px 10px;border-radius:8px;font-size:9px;font-weight:700;text-align:center;text-decoration:none;letter-spacing:.02em}
.cv-cta.wa{background:rgba(0,200,83,.14);border:1px solid rgba(0,200,83,.32);color:var(--green)}
.cv-cta.link{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--soft)}
.cv-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.cv-chip{font-family:'IBM Plex Mono',monospace;font-size:6.5px;font-weight:600;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);letter-spacing:.05em}
.cv-chip.ok{background:rgba(0,200,83,.1);border-color:rgba(0,200,83,.25);color:var(--green)}
.cv-chip.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.28);color:var(--amber)}

/* ─── VERSO Passeport : bloc QR scannable (QR + identite legale) ─── */
.cv-qr{display:flex;gap:11px;align-items:center;margin:4px 0 6px;text-decoration:none}
.cv-qr-code{flex-shrink:0;background:#fff;border-radius:7px;padding:5px;line-height:0}
.cv-qr-code svg{display:block;width:66px;height:66px}
.cv-qr-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.5px}
.cv-qr-cap{font-family:'IBM Plex Mono',monospace;font-size:6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.cv-qr-id{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.02em;margin-top:1px}
.cv-qr-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:1px}
.cv-qr-k{font-size:7px;color:rgba(255,255,255,.4);font-weight:600;flex-shrink:0;letter-spacing:.02em}
.cv-qr-v{font-size:7.5px;color:rgba(255,255,255,.82);font-weight:600;text-align:right;font-family:'IBM Plex Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── CARD LABEL + ACTIONS ─── */
.card-nav{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:2px}
.card-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:.1em;text-transform:uppercase}
.card-dots-nav{display:flex;gap:5px;margin-top:8px;justify-content:center}
.cdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15);transition:.2s;cursor:pointer}
.cdot.on{background:var(--green);box-shadow:0 0 6px rgba(0,200,83,.5)}
.card-actions{display:flex;gap:8px;padding:0 20px;margin-bottom:4px}
.ca-btn{flex:1;padding:11px 0;border-radius:12px;font-size:11px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:.15s;text-decoration:none}
.ca-btn:hover,.ca-btn:active{border-color:var(--line-g);color:var(--green2);background:rgba(0,200,83,.05)}
.ca-btn.primary{background:rgba(0,200,83,.1);border-color:rgba(0,200,83,.25);color:var(--green)}

/* ─── PRODUITS GRID ─── */
.products{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px}
.product-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.product-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent,var(--green))}
.product-card:hover,.product-card:active{border-color:var(--line-g);transform:scale(.99)}
.pc-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.2}
.pc-desc{font-size:10px;color:var(--muted);line-height:1.5}
.pc-price{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--green);margin-top:auto}
.pc-badge{position:absolute;top:9px;right:9px;font-size:7.5px;font-weight:700;padding:2px 6px;border-radius:99px;background:rgba(0,200,83,.12);color:var(--green);border:1px solid rgba(0,200,83,.25)}

/* ─── SERVICE TILES ─── */
.service-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px}
.svc-tile{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:13px 12px;display:flex;flex-direction:column;gap:5px}
.svc-name{font-size:13px;font-weight:700;color:var(--text)}
.svc-desc{font-size:9.5px;color:var(--muted);line-height:1.5;flex:1}
.svc-tag{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;padding:2px 6px;border-radius:4px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.18);color:var(--cyan);letter-spacing:.06em}

/* ─── VIDEO LIST (YouTube) ─── */
.video-list{display:flex;flex-direction:column;gap:8px;padding:0 20px}
.video-row{display:flex;gap:11px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-decoration:none;transition:.15s}
.video-row:hover{border-color:rgba(255,59,48,.3)}
.video-thumb{flex-shrink:0;width:64px;height:40px;border-radius:8px;background:linear-gradient(135deg,#2a0c0c,#160404);border:1px solid rgba(255,59,48,.25);display:grid;place-items:center;position:relative;overflow:hidden}
.video-thumb::after{content:'';width:0;height:0;border-left:9px solid rgba(255,255,255,.85);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.video-meta{flex:1;min-width:0}
.video-title{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.video-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--muted);margin-top:3px}
.video-dur{flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,.4)}

/* ─── AUDIT ROWS (Site) ─── */
.audit-rows{display:flex;flex-direction:column;gap:6px;padding:0 20px}
.audit-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.audit-led{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.audit-led.ok{background:var(--green);box-shadow:0 0 6px rgba(0,200,83,.45)}
.audit-led.warn{background:var(--amber)}
.audit-led.off{background:rgba(255,255,255,.2)}
.audit-info{flex:1}
.audit-name{font-size:12px;font-weight:700;color:var(--text)}
.audit-desc{font-size:9.5px;color:var(--muted);margin-top:1px}
.audit-status{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;flex-shrink:0}
.audit-status.ok{color:var(--green)}.audit-status.warn{color:var(--amber)}.audit-status.off{color:var(--muted)}

/* ─── OVERVIEW GOOGLE — bloc SERP simulé ─── */
.serp{background:var(--panel);border:1px solid rgba(139,92,246,.22);border-radius:16px;padding:15px 16px;margin:0 20px}
.serp-badge{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.06em;color:#a78bfa;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.28);border-radius:99px;padding:4px 10px;margin-bottom:11px}
.serp-badge .dot{width:6px;height:6px;border-radius:50%;background:#a78bfa}
.serp-answer{font-size:12.5px;line-height:1.55;color:var(--soft)}
.serp-answer b{color:var(--text)}
.serp-cite{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.serp-src{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:3px 8px;text-decoration:none}
.serp-src:hover{border-color:rgba(139,92,246,.3);color:#a78bfa}
.honest-note{margin:12px 20px 0;font-size:10px;line-height:1.55;color:var(--muted);border-left:2px solid rgba(139,92,246,.3);padding-left:11px}
.honest-note b{color:var(--soft)}

/* ─── PLANS / STATUS ROWS ─── */
.willos-plans{display:flex;flex-direction:column;gap:6px;padding:0 20px}
.plan-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.plan-led{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.plan-led.green{background:var(--green);box-shadow:0 0 6px rgba(0,200,83,.45)}
.plan-led.violet{background:var(--violet)}.plan-led.cyan{background:var(--cyan)}.plan-led.amber{background:var(--amber)}.plan-led.red{background:var(--yt)}.plan-led.blue{background:var(--blue)}
.plan-info{flex:1}
.plan-name{font-size:12px;font-weight:700;color:var(--text)}
.plan-desc{font-size:9.5px;color:var(--muted);margin-top:1px}
.plan-status{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;flex-shrink:0}
.plan-status.green-txt{color:var(--green)}.plan-status.violet-txt{color:var(--violet)}.plan-status.cyan-txt{color:var(--cyan)}.plan-status.amber-txt{color:var(--amber)}

/* ─── CHANNELS ─── */
.channels{display:flex;gap:8px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.channels::-webkit-scrollbar{display:none}
.ch{flex-shrink:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:68px}
.ch-name{font-size:9px;font-weight:700;color:var(--soft)}
.ch-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(0,200,83,.6)}
.ch-dot.warn{background:var(--amber)}

/* ─── TAB PANELS ─── */
.tab-section{display:none}
.tab-section.active{display:block;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ─── BOTTOM NAV ─── */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:390px;max-width:100vw;background:rgba(0,0,0,.9);backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:10px 6px 22px;display:flex;justify-content:space-between;gap:2px;overflow-x:auto;scrollbar-width:none;z-index:100}
.bottom-nav::-webkit-scrollbar{display:none}
.bn-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px 8px;border-radius:10px;transition:.15s;text-decoration:none}
.bn-label{font-size:9px;font-weight:600;color:var(--muted);transition:color .2s;white-space:nowrap}
.bn-dot{width:5px;height:5px;border-radius:50%;margin-top:2px;transition:.2s;background:rgba(255,255,255,.15)}
.bn-item.active .bn-label{color:var(--green)}
.bn-item.active .bn-dot{background:var(--green);box-shadow:0 0 6px rgba(0,200,83,.5)}
.bn-item.active.c-cyan .bn-label{color:var(--cyan)}.bn-item.active.c-cyan .bn-dot{background:var(--cyan);box-shadow:0 0 6px rgba(34,211,238,.5)}
.bn-item.active.c-violet .bn-label{color:var(--violet)}.bn-item.active.c-violet .bn-dot{background:var(--violet);box-shadow:0 0 6px rgba(139,92,246,.5)}
.bn-item.active.c-amber .bn-label{color:var(--amber)}.bn-item.active.c-amber .bn-dot{background:var(--amber);box-shadow:0 0 6px rgba(245,158,11,.5)}
.bn-item.active.c-red .bn-label{color:var(--yt)}.bn-item.active.c-red .bn-dot{background:var(--yt);box-shadow:0 0 6px rgba(255,59,48,.5)}
.bn-item.active.c-blue .bn-label{color:var(--blue)}.bn-item.active.c-blue .bn-dot{background:var(--blue);box-shadow:0 0 6px rgba(59,130,246,.5)}

/* ─── SPACER + FOOTER ─── */
.pb{height:92px}
.wallet-footer{padding:14px 20px 10px;text-align:center;font-size:9px;color:var(--muted);line-height:1.6;letter-spacing:.02em}
.wallet-footer a{color:var(--green);text-decoration:none;font-weight:600}

/* ─── FICHE AUTONOME : bandeau retour vers le wallet ─── */
.fiche-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 0}
.fiche-back{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:5px}
.fiche-back:hover{color:var(--soft)}
.fiche-kicker{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fiche-siblings{display:flex;gap:6px;padding:0 20px;margin-top:4px;flex-wrap:wrap}
.sib{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;padding:5px 9px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--muted);text-decoration:none}
.sib:hover,.sib.on{border-color:var(--line-g);color:var(--green2)}

/* ─── BULLE WHATSAPP (flottante) ─── */
#wa-float{position:fixed;bottom:104px;right:16px;z-index:200;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.45);text-decoration:none;transition:transform .2s,box-shadow .2s}
#wa-float:hover,#wa-float:active{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.6)}
#wa-float svg{width:28px;height:28px}
body.no-nav #wa-float{bottom:24px}

/* ─── BOUTON PWA (installer sur le bureau) ─── */
#pwa-install{position:fixed;bottom:104px;right:78px;z-index:200;height:52px;padding:0 16px;border:none;border-radius:26px;background:linear-gradient(135deg,#00c853,#22d3ee);color:#04120b;font-family:Inter,sans-serif;font-size:12px;font-weight:800;letter-spacing:.01em;display:none;align-items:center;gap:7px;cursor:pointer;box-shadow:0 4px 20px rgba(0,200,83,.4);transition:transform .2s}
#pwa-install:hover{transform:scale(1.04)}
#pwa-install svg{width:16px;height:16px}
body.no-nav #pwa-install{bottom:24px}
/* Rangée PWA dans un panneau (fallback / info) */
.pwa-row{display:flex;align-items:center;gap:11px;margin:0 20px;padding:13px 15px;border-radius:14px;background:linear-gradient(135deg,rgba(0,200,83,.09),rgba(34,211,238,.06));border:1px solid var(--line-g);cursor:pointer}
.pwa-row .pi{width:34px;height:34px;border-radius:10px;background:rgba(0,200,83,.12);border:1px solid rgba(0,200,83,.28);display:grid;place-items:center;flex-shrink:0}
.pwa-row .pi svg{width:18px;height:18px;color:var(--green)}
.pwa-row .pt{flex:1}
.pwa-row .pt b{display:block;font-size:12px;color:var(--text);font-weight:700}
.pwa-row .pt small{font-size:9.5px;color:var(--muted)}
.pwa-row .pgo{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--green)}
.pwa-hint{margin:8px 20px 0;font-size:9.5px;color:var(--muted);line-height:1.5}

/* ══════════════════════════════════════════════════════════════════
   RAPPORT D'IDENTITÉ NUMÉRIQUE — même concept graphique que le wallet
   ══════════════════════════════════════════════════════════════════ */
/* Hero score global */
.rap-hero{margin:14px 20px 0;background:linear-gradient(135deg,#06120b 0%,#08221a 55%,#050f18 100%);border:1px solid var(--line-g);border-radius:20px;padding:20px 18px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.rap-hero .card-holo{background:linear-gradient(115deg,transparent,rgba(0,200,83,.12) 30%,transparent 55%,rgba(34,211,238,.1) 82%,transparent)}
.rap-hero-top{display:flex;align-items:center;gap:18px;position:relative;z-index:2}
.rap-ring{width:96px;height:96px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--green) 0%,var(--cyan) var(--pct,80%),rgba(255,255,255,.06) var(--pct,80%));display:grid;place-items:center;position:relative}
.rap-ring::before{content:'';position:absolute;inset:8px;border-radius:50%;background:#06120b}
.rap-ring-in{position:relative;z-index:1;text-align:center}
.rap-ring-in b{font-family:Sora,sans-serif;font-size:28px;font-weight:900;color:var(--text);display:block;line-height:1}
.rap-ring-in small{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--muted);letter-spacing:.1em}
.rap-hero-info{flex:1}
.rap-hero-label{font-family:Sora,sans-serif;font-size:16px;font-weight:800;color:var(--text)}
.rap-hero-note{font-size:11px;color:var(--soft);line-height:1.5;margin-top:3px}
.rap-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;position:relative;z-index:2}
.rap-tag{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;padding:3px 8px;border-radius:99px;background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.28);color:var(--green);letter-spacing:.04em}

/* 3 niveaux ACTUEL / SEO / GEO */
.rap-levels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 20px}
.rap-lvl{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 10px;text-align:center;position:relative;overflow:hidden}
.rap-lvl::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--lc,var(--green))}
.rap-lvl-code{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.rap-lvl-score{font-family:Sora,sans-serif;font-size:24px;font-weight:900;margin:3px 0 1px}
.rap-lvl-label{font-size:9.5px;font-weight:700;color:var(--soft)}
.rap-lvl-desc{font-size:8px;color:var(--muted);line-height:1.45;margin-top:4px}
.rap-cap{margin:8px 20px 0;font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--muted);letter-spacing:.02em}

/* Piliers */
.rap-pillars{display:flex;flex-direction:column;gap:8px;padding:0 20px}
.rap-pill{background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:12px;padding:12px 14px}
.rap-pill.green{border-left-color:var(--green)}.rap-pill.amber{border-left-color:var(--amber)}.rap-pill.cyan{border-left-color:var(--cyan)}.rap-pill.red{border-left-color:var(--red)}
.rap-pill-hd{display:flex;align-items:baseline;justify-content:space-between}
.rap-pill-name{font-size:13px;font-weight:700;color:var(--text)}
.rap-pill-score{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700}
.rap-pill-score.green{color:var(--green)}.rap-pill-score.amber{color:var(--amber)}.rap-pill-score.cyan{color:var(--cyan)}.rap-pill-score.red{color:var(--red)}
.rap-pill-tag{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--soft);margin-left:6px}
.rap-pill-copy{font-size:10px;color:var(--muted);line-height:1.5;margin-top:5px}
.rap-pill-checks{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}

/* Cohérence NAP */
.nap-strip{margin:0 20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.nap-line{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.nap-line:last-child{border-bottom:none}
.nap-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.nap-dot.ok{background:var(--green);box-shadow:0 0 6px rgba(0,200,83,.4)}
.nap-dot.warn{background:var(--amber)}
.nap-dot.off{background:rgba(255,255,255,.2)}
.nap-field{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;width:74px;flex-shrink:0}
.nap-value{font-size:10.5px;color:var(--soft);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nap-flag{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700}
.nap-flag.ok{color:var(--green)}.nap-flag.warn{color:var(--amber)}.nap-flag.off{color:var(--muted)}

/* Grille canaux (IA / social) */
.chan-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 20px}
.chan-cell{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.chan-cell .nap-dot{width:6px;height:6px}
.chan-name{font-size:10.5px;font-weight:600;color:var(--soft)}
.chan-state{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600}
.chan-state.ok{color:var(--green)}.chan-state.warn{color:var(--amber)}.chan-state.off{color:var(--muted)}

/* Comparaison concurrents (présence, PAS classement — R-PRO-6) */
.compare{margin:0 20px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1fr repeat(3,44px);align-items:center;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:10px}
.cmp-row:last-child{border-bottom:none}
.cmp-row.head{background:rgba(255,255,255,.03);font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.cmp-row.you{background:rgba(0,200,83,.06)}
.cmp-name{font-weight:600;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-row.you .cmp-name{color:var(--green);font-weight:700}
.cmp-cell{text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:700}
.cmp-yes{color:var(--green)}.cmp-no{color:rgba(255,255,255,.25)}

/* Plan d'action */
.actions-list{display:flex;flex-direction:column;gap:9px;padding:0 20px}
.action-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px;position:relative}
.action-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.action-card.critique::before{background:var(--red)}
.action-card.important::before{background:var(--amber)}
.action-card.conseille::before{background:var(--cyan)}
.action-hd{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.action-prio{font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:99px}
.action-prio.critique{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:var(--red)}
.action-prio.important{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:var(--amber)}
.action-prio.conseille{background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.28);color:var(--cyan)}
.action-cat{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.04em}
.action-title{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3}
.action-detail{font-size:10px;color:var(--muted);line-height:1.5;margin-top:3px}

/* ─── PLAN / ENTITLEMENTS : badge + cartes à débloquer (Option B) ─── */
.plan-badge{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;color:var(--green);background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.28);border-radius:99px;padding:3px 9px;letter-spacing:.03em;white-space:nowrap}
.plan-badge .pb-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.unlock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px}
.unlock-tile{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px dashed rgba(255,255,255,.16);border-radius:12px;padding:11px 13px;text-decoration:none;transition:.15s}
.unlock-tile:hover{border-color:var(--line-g);background:rgba(0,200,83,.04)}
.unlock-plus{width:26px;height:26px;border-radius:8px;background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.25);color:var(--green);display:grid;place-items:center;font-size:16px;font-weight:700;flex-shrink:0;line-height:1}
.unlock-info{min-width:0}
.unlock-name{display:block;font-size:11px;font-weight:700;color:var(--soft)}
.unlock-cta{display:block;font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--muted);letter-spacing:.04em}
.unlock-full{grid-column:1/-1;text-align:center;padding:12px 14px;border:1px dashed rgba(245,158,11,.3);border-radius:12px;background:rgba(245,158,11,.06);color:var(--amber);font-size:10.5px;font-weight:600;line-height:1.5}
.unlock-full a{color:var(--amber);text-decoration:underline}