/* ═══════════════════════════════════════════════════════════════════════════
   bloo.Cards — 10 LAYOUTS (skins) — v2 · 16 sept. 2026
   Cible visuelle : kit client « cartes-digitales-bloocards » (10 HTML).
   Scopés body[data-layout="…"] sur la DOM fixe de card.php :
     .card-inner > .card-header · .card-avatar-wrap · .card-identity · .modules-section · .contact-actions · .card-footer
   Règles client : photo + hero sur chaque skin · photo toujours centrée · fond d'écran ⇒ mode bg (design-system).
   Gratuits : organic · neon · tactile · magazine   |   Métier : liquid · aqua · frost · bento · premium · brutal   (décision client 16/09/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700 900;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2')}

/* ── Socle commun (tokens du kit) ─────────────────────────────────────────── */
body[data-layout="neon"]{
  --k-accent:var(--card-accent,#1e6b6b);
  --k-accent-ink:color-mix(in oklab,var(--k-accent) 55%,#14161a);
  --k-accent-deep:color-mix(in oklab,var(--k-accent) 78%,#000);
  --k-accent-soft:color-mix(in oklab,var(--k-accent) 14%,#fff);
  --k-accent-light:color-mix(in oklab,var(--k-accent) 55%,#fff);
  --k-accent-glow:color-mix(in oklab,var(--k-accent) 60%,#fff);
  --k-bg:var(--card-bg,#f8f7f3);
  --k-ink:var(--card-text,#172128);--k-muted:var(--card-text-sec,#65717a);--k-paper:var(--card-bg,#f8f7f3);
  --k-serif:Georgia,'Bitstream Charter','Times New Roman',serif;
  --k-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--k-sans);
}
/* défilement : les 10 skins remplacent la carte "app" à hauteur fixe par une carte qui défile
   (les heros de 250-300 px + 2 rangées de tuiles ne tiennent pas dans 812 px) */
html:has(body[data-layout]){height:auto!important;overflow-y:auto!important}
body[data-layout]{height:auto!important;min-height:100vh;min-height:100dvh;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
body[data-layout] .card-wrap{height:auto!important;min-height:100vh!important;min-height:100dvh!important;overflow:visible!important}
body[data-layout] .card-inner{height:auto!important;min-height:100vh!important;min-height:100dvh!important;overflow:visible!important}
body[data-layout] .modules-section,body[data-layout] .modules-page-wrap{flex:0 0 auto!important;min-height:0!important;overflow:visible!important}
body[data-layout] .modules-page{overflow:visible!important;align-content:start!important}
body[data-layout] .card-inner > .contact-actions{margin-top:auto}
body[data-layout]:has(.bloo-upgrade-strip) .card-footer{margin-bottom:84px}
/* hero réel visible (img/video) */
body[data-layout] .card-wrap .card-header img.card-header-img,body[data-layout] .card-wrap .card-header video.card-header-img{width:100%;height:100%;object-fit:cover;display:block!important}
/* tuiles : look kit (blanc translucide, rayon 18, ombre douce), icône + libellé */
body[data-layout] .mod-btn{border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 10px 26px rgba(20,36,48,.09);border:0;transition:transform .2s,box-shadow .2s}
body[data-layout] .mod-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,36,48,.15)}
body[data-layout] .mod-btn:active{transform:scale(.98)}
body[data-layout] .mod-icon{background:transparent!important;box-shadow:none!important;filter:none!important;color:var(--k-ink);font-size:22px}
body[data-layout] .mod-label{font:750 11px/1.2 var(--k-sans);color:var(--k-ink);letter-spacing:0}
/* CTA : primaire plein 54 px, viral en secondaire contour dessous */
body[data-layout] .contact-actions{flex-direction:column;gap:9px;width:auto!important}
body[data-layout] .card-action-btn{min-height:54px;border-radius:18px;font:800 14px var(--k-sans);letter-spacing:0;text-transform:none;justify-content:center;transition:.2s}
body[data-layout] .card-action-btn--primary{background:var(--k-accent-deep);color:#fff;border:0}
body[data-layout] .card-action-btn--primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
body[data-layout] .card-action-btn--ghost{min-height:46px;background:transparent;color:var(--k-muted);border:1px solid rgba(23,33,40,.18);font-weight:700;font-size:13px}
body[data-layout] .card-footer{font-size:10.5px;letter-spacing:.04em;color:var(--k-muted)}
/* avatar : toujours centré, rond (forcé par card.php), bordure blanche + ombre kit */
body[data-layout] .card-wrap .card-avatar-wrap{display:flex;justify-content:center;padding:0!important}
body[data-layout] .card-avatar-frame{border:4px solid rgba(255,255,255,.92)!important;box-shadow:0 14px 35px rgba(0,0,0,.2)!important;background:#fff}
body[data-layout] .card-avatar-frame::before{display:none}
/* nom : échelle kit */
body[data-layout] .card-name{font:800 clamp(28px,8.6vw,36px)/.96 var(--k-sans);letter-spacing:-.045em;color:var(--k-ink)}
body[data-layout] .card-title{color:var(--k-muted);font-weight:500;margin-top:6px}
body[data-layout] .card-tagline{font-size:14px;line-height:1.55;color:var(--k-muted);max-width:34ch;margin:12px auto 0}
/* plein-cadre : photo en fond de carte via --card-hero (skins liquid / frost / neon) */
body[data-layout="liquid"]:not([data-bg="1"]) .card-inner,body[data-layout="frost"]:not([data-bg="1"]) .card-inner,body[data-layout="neon"]:not([data-bg="1"]) .card-inner{background:var(--card-hero,none) center/cover no-repeat,#071a2a;position:relative}
body[data-layout="liquid"] .card-wrap .card-header,body[data-layout="frost"] .card-wrap .card-header,body[data-layout="neon"] .card-wrap .card-header{display:none!important}
body[data-layout="liquid"] .card-inner > *,body[data-layout="frost"] .card-inner > *,body[data-layout="neon"] .card-inner > *{position:relative;z-index:1}
/* contenu en bas de carte (liquid / frost) : l'avatar absorbe l'espace libre, les modules ne s'étirent plus */
body[data-layout="liquid"] .card-inner > .card-avatar-wrap,body[data-layout="frost"] .card-inner > .card-avatar-wrap{margin-top:auto!important}
body[data-layout="liquid"] .modules-section,body[data-layout="frost"] .modules-section,body[data-layout="liquid"] .modules-page-wrap,body[data-layout="frost"] .modules-page-wrap{flex:0 0 auto!important;min-height:0!important;overflow:visible!important}

/* ═══════════════════════════════ 08 · NEON (gratuit) ════════════════════════
   Nuit techno en fond, fondu vers #05080d, avatar cerclé cyan lumineux,
   tuiles sombres à icônes cyan, bouton dégradé violet→cyan, tagline mono.   */
body[data-layout="neon"]{--n-night:color-mix(in oklab,var(--k-bg) 12%,#05080d);--n-cyan:color-mix(in oklab,var(--k-accent) 70%,#fff);--n-cyan-a:color-mix(in oklab,var(--k-accent-glow) 45%,transparent);background:#05080d;color:#fff}
body[data-layout="neon"]:not([data-bg="1"]) .card-inner{background:var(--card-hero,none) center 0/100% auto no-repeat,var(--n-night)}
body[data-layout="neon"]:not([data-bg="1"]) .card-inner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,6,10,.15),var(--n-night) 62%)}
body[data-layout="neon"] .card-wrap .card-avatar-wrap{margin:120px 0 8px!important}
body[data-layout="neon"] .card-avatar-frame{width:110px!important;height:110px!important;border:1px solid var(--n-cyan)!important;box-shadow:0 0 35px var(--n-cyan-a)!important;background:#0c121b}
body[data-layout="neon"] .card-avatar-verify{right:calc(50% - 59px);bottom:2px}
body[data-layout="neon"] .card-identity{text-align:center;padding:0 22px}
body[data-layout="neon"] .card-name{color:#fff;font-size:clamp(32px,9.5vw,40px)}
body[data-layout="neon"] .card-title{color:#95a3b1}
body[data-layout="neon"] .card-tagline{font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#647383;text-align:left;max-width:none;margin-top:14px}
body[data-layout="neon"] .card-tagline::before{content:"// "}
body[data-layout="neon"] .mod-btn{background:#0c121b;border:1px solid color-mix(in oklab,var(--n-cyan) 22%,#1a2430);box-shadow:none}
body[data-layout="neon"] .mod-icon{color:var(--n-cyan)}
body[data-layout="neon"] .mod-label{color:#fff}
body[data-layout="neon"] .card-action-btn--primary{background:linear-gradient(90deg,var(--k-accent),var(--n-cyan));color:#061015}
body[data-layout="neon"] .card-action-btn--ghost{color:var(--n-cyan);border-color:var(--n-cyan-a)}
body[data-layout="neon"] .card-footer{color:#52606c}

/* ── Accessibilité : pas d'animation si demandé ─────────────────────────── */
@media (prefers-reduced-motion:reduce){body[data-layout] *{animation:none!important;transition:none!important}}