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

/* ═══════════════════════════════ 10 · TACTILE (gratuit) ═════════════════════
   Neumorphisme : halo radial, avatar en relief, hero en orbe, tuiles et
   boutons en relief doux.                                                    */
body[data-layout="tactile"]{--t-bg:color-mix(in oklab,var(--k-bg) 60%,color-mix(in oklab,var(--k-accent) 16%,#e4eaef));--t-ink:color-mix(in oklab,var(--k-accent) 35%,var(--k-ink));--t-muted:var(--k-muted);--t-dark:color-mix(in oklab,var(--t-bg) 74%,#000);--t-light:color-mix(in oklab,var(--t-bg) 35%,#fff);--t-hi:color-mix(in oklab,var(--t-bg) 55%,#fff);--t-lo:color-mix(in oklab,var(--t-bg) 84%,#000);background:var(--t-bg)}
body[data-layout="tactile"] .card-inner{background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.9),transparent 35%),var(--t-bg);color:var(--t-ink);padding-top:56px!important}
body[data-layout="tactile"] .card-inner > .contact-actions{order:2}body[data-layout="tactile"] .card-inner > .card-footer{order:3}
body[data-layout="tactile"] .card-wrap .card-avatar-wrap{order:-1;margin:0 0 4px!important}
body[data-layout="tactile"] .card-avatar-frame{width:116px!important;height:116px!important;border:0!important;box-shadow:14px 14px 30px var(--t-dark),-12px -12px 30px var(--t-light)!important}
body[data-layout="tactile"] .card-avatar-verify{right:calc(50% - 62px);bottom:4px}
body[data-layout="tactile"] .card-identity{text-align:center;padding:0 20px}
body[data-layout="tactile"] .card-name{color:var(--t-ink);text-shadow:1px 1px #fff;margin-top:14px}
body[data-layout="tactile"] .card-title{color:var(--t-muted)}
body[data-layout="tactile"] .card-tagline{color:var(--t-muted)}
/* FIX 2026-09-16 : médaillon central = image LARGE à coins arrondis (le rond n'était pas optimal) */
body[data-layout="tactile"] .card-wrap .card-header{width:auto!important;height:150px!important;border-radius:28px;overflow:hidden;margin:14px 18px 12px;flex:0 0 auto;border:6px solid var(--t-hi);box-shadow:inset 4px 4px 10px var(--t-lo),10px 10px 22px var(--t-dark),-8px -8px 20px var(--t-light);background:var(--t-lo)!important;order:1}
body[data-layout="tactile"] .card-header-tint{display:none}
body[data-layout="tactile"] .mod-btn{background:linear-gradient(145deg,var(--t-hi),var(--t-lo));box-shadow:7px 7px 15px var(--t-dark),-7px -7px 15px var(--t-light)}
body[data-layout="tactile"] .mod-btn:hover{transform:none}
body[data-layout="tactile"] .mod-btn:active{transform:none;box-shadow:inset 5px 5px 10px var(--t-dark),inset -5px -5px 10px var(--t-light)}
body[data-layout="tactile"] .mod-icon{color:var(--k-accent-ink)}body[data-layout="tactile"] .mod-label{color:var(--t-ink)}
body[data-layout="tactile"] .card-action-btn--primary{background:linear-gradient(145deg,var(--k-accent),var(--k-accent-deep));box-shadow:8px 8px 18px var(--t-dark),-7px -7px 18px var(--t-light)}
body[data-layout="tactile"] .card-action-btn--ghost{background:linear-gradient(145deg,var(--t-hi),var(--t-lo));color:var(--t-ink);border:0;box-shadow:7px 7px 15px var(--t-dark),-7px -7px 15px var(--t-light)}
body[data-layout="tactile"] .card-footer{color:var(--t-muted)}

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

/* ═══════════════════════════════════════════════════════════════════════════
   TACTILE 2 — schéma bicolore (correctif 2026-09-21)
   Fond = couleur de fond du thème (gauche) · Texte + icônes = couleur primaire/accent (droite).
   Les tokens --k-* sont redéfinis ici : ils étaient scopés à [data-layout="tactile"]
   et ne s'appliquaient donc jamais à la page tactile2.
   ═══════════════════════════════════════════════════════════════════════════ */
body[data-layout="tactile2"]{
  --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) 82%,#000);
  --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-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --t2-accent:var(--card-accent,#1e6b6b);
  --t2-bg:var(--card-bg,#f8f7f3);
  font-family:var(--k-sans);
  background:var(--t2-bg);
}
body[data-layout="tactile2"] .card-inner{background:var(--t2-bg)!important;color:var(--t2-accent);padding-top:48px!important}
body[data-layout="tactile2"] .card-inner::after{opacity:0!important}
/* Identité : textes en couleur primaire (droite) */
body[data-layout="tactile2"] .card-name{color:var(--t2-accent)!important}
body[data-layout="tactile2"] .card-title{color:var(--t2-accent)!important;opacity:.82;font-weight:600}
body[data-layout="tactile2"] .card-tagline{color:var(--t2-accent)!important;opacity:.75}
body[data-layout="tactile2"] .card-identity{text-align:center;padding:0 20px}
/* Modules : icônes + libellés en couleur primaire, tuiles teintées accent */
body[data-layout="tactile2"] .mod-icon{color:var(--t2-accent)!important}
body[data-layout="tactile2"] .mod-icon i{color:var(--t2-accent)!important}
body[data-layout="tactile2"] .mod-label{color:var(--t2-accent)!important;opacity:.92}
body[data-layout="tactile2"] .mod-btn{background:color-mix(in oklab,var(--t2-accent) 7%,#fff)!important;border:1px solid color-mix(in oklab,var(--t2-accent) 22%,transparent)!important;box-shadow:0 6px 18px color-mix(in oklab,var(--t2-accent) 12%,transparent)!important}
body[data-layout="tactile2"] .mod-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in oklab,var(--t2-accent) 20%,transparent)!important}
/* Carrousel */
body[data-layout="tactile2"] .carousel-dot{background:color-mix(in oklab,var(--t2-accent) 25%,transparent)}
body[data-layout="tactile2"] .carousel-dot.active{background:var(--t2-accent)}
/* CTA : primaire plein accent · secondaire contour accent */
body[data-layout="tactile2"] .card-action-btn--primary{background:var(--t2-accent)!important;color:#fff!important;border:0}
body[data-layout="tactile2"] .card-action-btn--ghost,body[data-layout="tactile2"] .card-action-btn--secondary{color:var(--t2-accent)!important;border:1px solid color-mix(in oklab,var(--t2-accent) 42%,transparent)!important;background:transparent!important}
/* Footer + avatar */
body[data-layout="tactile2"] .card-footer{color:color-mix(in oklab,var(--t2-accent) 80%,transparent)}
body[data-layout="tactile2"] .card-footer-logo{color:var(--t2-accent)}
body[data-layout="tactile2"] .card-avatar-frame{border:3px solid var(--t2-accent)!important;box-shadow:0 10px 26px color-mix(in oklab,var(--t2-accent) 28%,transparent)!important;background:#fff}
body[data-layout="tactile2"] .card-avatar-frame::before{display:none}
/* Hero médaillon discret */
body[data-layout="tactile2"] .card-wrap .card-header{border-radius:22px;overflow:hidden;margin:14px 18px 10px;flex:0 0 auto}