/* ═══════════════════════════════════════════════════════════════════════════
   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="organic"]{
  --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}

/* ═══════════════════════════════ 03 · ORGANIC (gratuit) ════════════════════
   Forêt en hero (arrondi organique 52%/16%) voilée vert, avatar chevauchant,
   nom serif vert profond, tuiles blanches, bouton vert forêt.               */
body[data-layout="organic"]{--o-green:var(--k-accent-deep);--o-ink:color-mix(in oklab,var(--k-accent) 20%,var(--k-ink));--o-muted:var(--k-muted);--o-bg:color-mix(in oklab,var(--k-bg) 72%,color-mix(in oklab,var(--k-accent) 10%,#f1f2ea));background:var(--o-bg)}
body[data-layout="organic"] .card-inner{background:var(--o-bg);color:var(--o-ink)}
/* FIX 2026-09-16 : hero « image large à coins arrondis » (le blob rond n'était pas optimal) */
body[data-layout="organic"] .card-wrap .card-header{height:240px!important;margin:14px 14px 0;width:auto!important;border-radius:26px;overflow:hidden;position:relative;background:var(--k-accent-deep)!important}
body[data-layout="organic"] .card-wrap .card-header::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in oklab,var(--k-accent-deep) 70%,transparent));z-index:2}
body[data-layout="organic"] .card-header-tint{display:none}
body[data-layout="organic"] .card-wrap .card-avatar-wrap{margin:-50px 0 6px!important;position:relative;z-index:3}
body[data-layout="organic"] .card-avatar-frame{width:116px!important;height:116px!important}
body[data-layout="organic"] .card-avatar-verify{right:calc(50% - 62px);bottom:6px}
body[data-layout="organic"] .card-identity{text-align:center;padding:0 24px}
body[data-layout="organic"] .card-name{font:400 clamp(34px,10vw,40px)/1 var(--k-serif);letter-spacing:-.02em;color:var(--o-ink);margin-top:10px}
body[data-layout="organic"] .card-title{color:var(--o-muted)}
body[data-layout="organic"] .card-tagline{color:var(--o-muted)}
body[data-layout="organic"] .mod-btn{background:color-mix(in oklab,var(--k-bg) 35%,#fff);box-shadow:0 10px 24px color-mix(in oklab,var(--k-accent-deep) 10%,transparent)}
body[data-layout="organic"] .mod-icon,body[data-layout="organic"] .mod-label{color:var(--k-accent-ink)}
body[data-layout="organic"] .card-action-btn--primary{background:var(--o-green)}
body[data-layout="organic"] .card-action-btn--ghost{color:var(--k-accent-ink);border-color:color-mix(in oklab,var(--k-accent) 30%,transparent)}

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