/* ==========================================================================
   bloo.Cards — Design System 2026
   Version: 2.0.0 — 2026-04-17
   Source : MOCKUP-CARD-GALAXY10.html + MOCKUP-WALLET-BLOO.html

   Contenu :
   - Tokens palette 2026 (Peach Fuzz, Mocha Mousse, Digital Lavender, Sage, Butter, Clay)
   - Typographie Inter self-host
   - Composants partagés : idbar, avatar v2026, verify badge, boutons
   - Keyframes (aurora halo, conic spin, blink)

   ⚠️ Ce fichier NE contient PAS les chassis Galaxy/iPhone (mockup only).
   Les fichiers bloo-public-card-2026.css et bloo-wallet-2026.css portent
   les classes spécifiques à chaque page.

   Convention : préfixe "bloo-" ou classes contextuelles (.card-*, .wallet-*)
   pour éviter les collisions CSS avec les anciens styles.
   ========================================================================== */

/* ==========================================================================
   1. FONT SELF-HOSTING — Inter variable
   ========================================================================== */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("https://blcrds.com/assets/fonts/inter/Inter-Variable.woff2") format("woff2-variations"),
      url("https://blcrds.com/assets/fonts/inter/Inter-Variable.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("https://blcrds.com/assets/fonts/inter/Inter-Variable-Italic.woff2") format("woff2-variations"),
      url("https://blcrds.com/assets/fonts/inter/Inter-Variable-Italic.woff2") format("woff2");
}

/* ==========================================================================
   2. TOKENS — palette 2026 + accents + neutres
   ========================================================================== */
:root{
  /* Palette contemporaine 2026 */
  --bloo-peach-fuzz:        #ffbe98;
  --bloo-mocha-mousse:      #a08060;
  --bloo-digital-lavender:  #c4b5fd;
  --bloo-sage:              #b4c5a0;
  --bloo-butter-yellow:     #f5e6a8;
  --bloo-clay:              #c5a18a;

  /* Neutres atelier */
  --bloo-ink:               #0b0e18;
  --bloo-ink-2:             #141830;
  --bloo-ink-3:             #161a2d;
  --bloo-ink-4:             #252a42;
  --bloo-text:              #e8ecf5;
  --bloo-text-sub:          #8c97b4;
  --bloo-text-faint:        #5a6280;

  /* Accents système */
  --bloo-success:           #22c55e;
  --bloo-danger:            #ef4444;
  --bloo-warn:              #f59e0b;
  --bloo-info:              #3b82f6;
  --bloo-info-deep:         #1d4ed8;

  /* Rayons & shadows unifiés */
  --bloo-r-sm:    8px;
  --bloo-r-md:    12px;
  --bloo-r-lg:    18px;
  --bloo-r-xl:    26px;
  --bloo-r-pill:  999px;

  --bloo-sh-sm:   0 1px 3px rgba(0,0,0,.08);
  --bloo-sh-md:   0 6px 20px -4px rgba(0,0,0,.14);
  --bloo-sh-lg:   0 18px 50px -12px rgba(0,0,0,.28);
  --bloo-sh-xl:   0 40px 80px -20px rgba(0,0,0,.35);

  /* Transitions */
  --bloo-trans:   .22s cubic-bezier(.4,0,.2,1);
  --bloo-trans-slow: .45s cubic-bezier(.4,0,.2,1);

  /* Typographie */
  --bloo-font:    "Inter","-apple-system","BlinkMacSystemFont","Segoe UI","Helvetica Neue",sans-serif;
}

/* ==========================================================================
   3. IDENTITY BAR — barre d'identité active (sticky top)
   ========================================================================== */
.bloo-idbar,
.card-idbar,
.idbar{
  height:30px;
  padding:0 14px 0 12px;
  background:rgba(18,18,22,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:40;
  font-size:11px;
  color:#e8ecf5;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bloo-idbar-left,
.card-idbar-left,
.idbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.bloo-idbar-right,
.card-idbar-right,
.idbar-right{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:rgba(255,255,255,.58);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.bloo-idbar-dot,
.card-idbar-dot,
.idbar-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6b7280;
  flex-shrink:0;
  transition:background var(--bloo-trans),box-shadow var(--bloo-trans);
}
.bloo-idbar.is-active .bloo-idbar-dot,
.card-idbar.is-active .card-idbar-dot,
.idbar.is-active .idbar-dot{
  background:var(--bloo-success);
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
  animation:blooIdbarBlink 1.6s ease-in-out infinite;
}
.bloo-idbar-label,
.card-idbar-label,
.idbar-label{
  color:rgba(255,255,255,.62);
  font-weight:500;
}
.bloo-idbar-name,
.card-idbar-name,
.idbar-name{
  color:#fff;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@keyframes blooIdbarBlink{
  0%,100%  {opacity:1;   box-shadow:0 0 0 2px rgba(34,197,94,.25)}
  50%      {opacity:.55; box-shadow:0 0 0 4px rgba(34,197,94,.12)}
}

/* ==========================================================================
   4. AVATAR v2026 — frameless + halo aurora + conic ring + verify badge
   ========================================================================== */
.bloo-avatar-wrap,
.card-avatar-wrap{
  position:relative;
  width:120px;
  height:120px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bloo-avatar-wrap::before,
.card-avatar-wrap::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--card-accent,var(--bloo-peach-fuzz)) 38%, transparent) 0%,
    color-mix(in oklab, var(--card-accent,var(--bloo-peach-fuzz)) 15%, transparent) 40%,
    transparent 70%);
  filter:blur(24px);
  z-index:0;
  pointer-events:none;
  animation:blooAuraBreathe 4.2s ease-in-out infinite;
}
.bloo-avatar-frame,
.card-avatar-frame{
  position:relative;
  /* width/height : gérés en inline par card.php avec clamp(108px, 33vw, 145px) — ne pas imposer ici */
  border-radius:50%;
  overflow:hidden;
  z-index:1;
  background:var(--card-bg,#0e1220);
  box-shadow:0 10px 28px -8px rgba(0,0,0,.45);
}
.bloo-avatar-frame::before,
.card-avatar-frame::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    var(--card-accent,var(--bloo-peach-fuzz)) 0deg,
    transparent 90deg,
    color-mix(in oklab, var(--card-accent,var(--bloo-peach-fuzz)) 60%, transparent) 180deg,
    transparent 270deg,
    var(--card-accent,var(--bloo-peach-fuzz)) 360deg);
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  z-index:2;
  animation:blooAuraSpin 10s linear infinite;
}
.bloo-avatar-img,
.card-avatar-img,
.bloo-avatar-frame img,
.card-avatar-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  position:relative;
  z-index:1;
}
.bloo-avatar-verify,
.card-avatar-verify{
  position:absolute;
  bottom:2px;
  right:calc(50% - 58px);
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--bloo-info),var(--bloo-info-deep));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  box-shadow:0 0 0 3px var(--card-bg,var(--bloo-ink-3)),
             0 6px 14px -4px rgba(29,78,216,.55);
  z-index:5;
}
.bloo-avatar-verify i,
.card-avatar-verify i{
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.2));
}

@keyframes blooAuraBreathe{
  0%,100% {opacity:.85; transform:translate(-50%,-50%) scale(1)}
  50%     {opacity:1;   transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes blooAuraSpin{
  from {transform:rotate(0deg)}
  to   {transform:rotate(360deg)}
}

/* ==========================================================================
   5. VERIFY BADGE STANDALONE — utilisable partout
   ========================================================================== */
.bloo-verify-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--bloo-info),var(--bloo-info-deep));
  color:#fff;
  font-size:10px;
  margin-left:6px;
  box-shadow:0 2px 6px -1px rgba(29,78,216,.55);
  vertical-align:middle;
}

/* ==========================================================================
   6. BOUTONS — primary / ghost / CTA principal
   ========================================================================== */
.bloo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:none;
  border-radius:var(--bloo-r-md);
  font-family:var(--bloo-font);
  font-weight:600;
  font-size:14px;
  letter-spacing:-.005em;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--bloo-trans),box-shadow var(--bloo-trans),background var(--bloo-trans);
  white-space:nowrap;
}
.bloo-btn:active{ transform:translateY(1px) }
.bloo-btn:focus-visible{ outline:2px solid var(--bloo-digital-lavender); outline-offset:2px }

.bloo-btn-primary{
  background:linear-gradient(135deg,var(--card-accent,var(--bloo-peach-fuzz)) 0%,var(--card-accent-2,var(--bloo-clay)) 100%);
  color:#1a1d2e;
  box-shadow:var(--bloo-sh-md);
}
.bloo-btn-primary:hover{ box-shadow:var(--bloo-sh-lg) }

.bloo-btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--bloo-text);
  border:1px solid rgba(255,255,255,.12);
}
.bloo-btn-ghost:hover{ background:rgba(255,255,255,.1) }

.bloo-btn-lavender{
  background:linear-gradient(135deg,var(--bloo-digital-lavender) 0%,#a78bfa 100%);
  color:#1a1d2e;
  box-shadow:0 8px 20px -4px rgba(167,139,250,.45);
}

/* ==========================================================================
   7. CHIP / PILL / BADGE — étiquettes utilitaires
   ========================================================================== */
.bloo-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:var(--bloo-r-pill);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--bloo-text);
  font-size:12px;
  font-weight:500;
}
.bloo-chip.is-active{
  background:rgba(196,181,253,.16);
  border-color:rgba(196,181,253,.3);
  color:var(--bloo-digital-lavender);
}

/* ==========================================================================
   8. GLASS / AURORA — surfaces vitrées avec halo
   ========================================================================== */
.bloo-glass{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--bloo-r-xl);
}
.bloo-aurora-bg{
  position:relative;
  overflow:hidden;
}
.bloo-aurora-bg::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(500px 300px at 12% 12%, color-mix(in oklab, var(--card-accent,var(--bloo-peach-fuzz)) 28%, transparent), transparent 60%),
    radial-gradient(450px 280px at 88% 22%, color-mix(in oklab, var(--card-accent-2,var(--bloo-clay)) 26%, transparent), transparent 60%),
    radial-gradient(550px 350px at 50% 88%, color-mix(in oklab, var(--bloo-digital-lavender) 22%, transparent), transparent 60%);
  filter:blur(32px);
  animation:blooAuroraFloat 14s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
.bloo-aurora-bg > *{ position:relative; z-index:1 }

@keyframes blooAuroraFloat{
  0%   {transform:translate(0,0) rotate(0deg)}
  50%  {transform:translate(-3%,2%) rotate(3deg)}
  100% {transform:translate(2%,-1%) rotate(-2deg)}
}

/* ==========================================================================
   9. CONIC RING ROTATING — utilitaire décoratif (à appliquer sur halo)
   ========================================================================== */
.bloo-conic-ring{
  position:relative;
}
.bloo-conic-ring::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  background:conic-gradient(from 0deg,
    var(--card-accent,var(--bloo-peach-fuzz)) 0deg,
    transparent 90deg,
    color-mix(in oklab, var(--card-accent,var(--bloo-peach-fuzz)) 60%, transparent) 180deg,
    transparent 270deg,
    var(--card-accent,var(--bloo-peach-fuzz)) 360deg);
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:blooAuraSpin 10s linear infinite;
  pointer-events:none;
}

/* ==========================================================================
   10. UTILITY — scrollbar discrète, truncate, focus
   ========================================================================== */
.bloo-scroll-hidden{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.bloo-scroll-hidden::-webkit-scrollbar{
  display:none;
}
.bloo-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================================
   11. NFC WAVES — animation pairing
   ========================================================================== */
.bloo-nfc-stage{
  position:relative;
  width:160px;
  height:160px;
  margin:0 auto;
}
.bloo-nfc-core{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:68px;
  height:68px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--bloo-digital-lavender),#a78bfa);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  z-index:3;
  box-shadow:0 12px 32px -8px rgba(167,139,250,.55);
}
.bloo-nfc-wave{
  position:absolute;
  top:50%; left:50%;
  border-radius:50%;
  border:2px solid var(--bloo-digital-lavender);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  animation:blooNfcWave 2.4s ease-out infinite;
}
.bloo-nfc-wave.w1{ width:100px; height:100px; animation-delay:0s }
.bloo-nfc-wave.w2{ width:130px; height:130px; animation-delay:.6s }
.bloo-nfc-wave.w3{ width:160px; height:160px; animation-delay:1.2s }

@keyframes blooNfcWave{
  0%   {transform:translate(-50%,-50%) scale(.4); opacity:.8}
  100% {transform:translate(-50%,-50%) scale(1.4); opacity:0}
}

/* ==========================================================================
   12. TOAST & POPOVERS
   ========================================================================== */
.bloo-toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  padding:14px 22px;
  border-radius:var(--bloo-r-pill);
  background:rgba(18,18,22,.95);
  color:#fff;
  font-size:14px;
  font-weight:500;
  box-shadow:var(--bloo-sh-lg);
  z-index:9999;
  display:flex;
  align-items:center;
  gap:10px;
  animation:blooToastIn .35s cubic-bezier(.34,1.56,.64,1);
}
.bloo-toast.success{ background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff }
.bloo-toast.error  { background:linear-gradient(135deg,#dc2626,#ef4444); color:#fff }

@keyframes blooToastIn{
  from {transform:translate(-50%,30px); opacity:0}
  to   {transform:translate(-50%,0);    opacity:1}
}

/* ==========================================================================
   13. RESPONSIVE HELPERS
   ========================================================================== */
@media (max-width: 420px){
  .bloo-hide-mobile{ display:none !important }
}
@media (min-width: 421px){
  .bloo-hide-desktop{ display:none !important }
}

/* ==========================================================================
   14. REDUCED MOTION — a11y
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .bloo-avatar-wrap::before,
  .card-avatar-wrap::before,
  .bloo-avatar-frame::before,
  .card-avatar-frame::before,
  .bloo-conic-ring::before,
  .bloo-nfc-wave,
  .bloo-aurora-bg::before{
    animation:none !important;
  }
  .bloo-idbar.is-active .bloo-idbar-dot,
  .card-idbar.is-active .card-idbar-dot,
  .idbar.is-active .idbar-dot{
    animation:none !important;
  }
}

/* ==========================================================================
   15. HOTFIX — carte publique layout spacing (2026-04-17)
   ========================================================================== */
/* On préserve .card-nav-indicator (header légal natif avec "Se connecter").
   C'est MA nouvelle .card-idbar qui fait doublon → on la masque sur la carte publique. */
.card-wrap .card-idbar{ display:none !important; }

/* Zone du haut (card-header) retirée : il n'y a plus de cover → on collapse à 0.
   Les h-badges (QR + lang) restent visibles via position:absolute qui remonte
   au nearest positioned ancestor (.card-inner). */
/* 2026-09 : collapse UNIQUEMENT s'il n'y a pas de média hero réel (img/video uploadé).
   Le <div class="card-header-img"> placeholder (dégradé) reste masqué. */
.card-wrap .card-header:not(:has(img.card-header-img, video.card-header-img)){
  height:0 !important;
  min-height:0 !important;
  overflow:visible !important;
  background:transparent !important;
}
.card-wrap .card-header div.card-header-img,
.card-wrap .card-header .card-header-tint,
.card-wrap .card-header .card-header-gradient{ display:none !important; }

/* Avatar — neutralise les marges/padding négatifs historiques (hero plein-écran obsolete).
   L'avatar commence proprement en haut du card-inner. */
.card-wrap .card-avatar-wrap{
  padding-top:18px !important;
  margin-top:0 !important;
  margin-bottom:14px !important;
  height:auto !important;
  min-height:auto;
}

/* Espacement nom ↔ avatar */
.card-wrap .card-name{ margin-top:6px !important; }

/* Remonte les h-badges (QR + lang) en absolu sur le contenu, puisque card-header collapsed */
.card-wrap .h-badges{
  position:absolute !important;
  top:14px !important;
  right:12px !important;
  z-index:500 !important;
}

/* CTAs contact-actions — alignement vertical parfait des 2 boutons */
.card-wrap .contact-actions > *{
  min-height:38px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.card-wrap .contact-actions i{ line-height:1 !important; }

/* ==========================================================================
   16. HOTFIX MOBILE — iPhone SE 375×667 / Samsung S10 360×760 (2026-04-17)
   ==========================================================================
   Problèmes corrigés :
   1. Le footer légal est tronqué car .card-inner a height:100vh + overflow:hidden.
      → passe .card-inner en flex column avec height:auto pour que le footer soit
        poussé en bas et toujours visible.
   2. Les 3 rangées de 4 boutons (12 total) étaient collées en haut avec
      align-content:start → 118px d'espace mort entre la row3 et les dots.
      → space-evenly pour distribuer verticalement.
   3. Fin trait blanc entre .card-nav-indicator (bar sombre) et la carte : 2px
      du body background qui passe au travers.
      → margin-bottom:0 + margin-top:0 + même background
   ========================================================================== */

/* 1. Supprimer le trait blanc nav ↔ card
   La .card-nav-indicator est position:fixed; top:0; height:30px.
   Le margin-top historique de 32px laissait 2px de body bg visible = trait blanc.
   Fix : margin-top exactement 30px (colle la carte au bas de la nav, aucun gap). */
.card-nav-indicator{
  margin:0 !important;
  border:0 !important;
}
.card-wrap{
  margin-top:30px !important;
  border-top:0 !important;
}
/* Page body : fond sombre derrière la carte — garantit qu'aucun pixel blanc ne fuit */
body:has(.card-wrap){
  background:#0a0604 !important;
}

/* 2. .card-inner en flex column → footer toujours en bas et visible
   La hauteur est dimensionnée pour remplir le viewport MOINS la nav fixe (30px). */
.card-wrap,
.card-wrap .card-inner{
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  min-height:calc(100vh - 30px) !important;
  min-height:calc(100dvh - 30px) !important;
  overflow:visible !important;
}

/* 3. Carrousel — distribuer les 3 rangées verticalement */
.card-wrap .modules-track,
.card-wrap .carousel-track{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  min-height:0 !important;
}
.card-wrap .modules-page{
  align-content:space-evenly !important;
  align-self:stretch !important;
  width:100% !important;
  gap:10px 6px !important;
  padding:8px 6px !important;
}

/* HOTFIX preview backoffice : iframe étroit ~400px → garantir 4 boutons/ligne
   en réduisant gap+padding et en forçant min-width:0 sur les boutons (sans
   bloquer le shrink — flex 1 1).  Spécificité (0,3,0) pour battre la règle
   .card-wrap .modules-page ci-dessus. */
body.wip-preview.wip-legacy .card-wrap .modules-page{
  gap:6px 4px !important;
  padding:4px 6px !important;
  align-content:start !important;
}
body.wip-preview.wip-legacy .card-wrap .mod-btn{
  flex:1 1 calc(25% - 4px) !important;
  max-width:calc(25% - 4px) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:5px 2px !important;
  gap:4px !important;
  min-height:auto !important;
}
body.wip-preview.wip-legacy .card-wrap .mod-icon{
  width:50px !important;
  height:50px !important;
  font-size:38px !important;
}
body.wip-preview.wip-legacy .card-wrap .mod-label{
  font-size:10px !important;
  max-width:100% !important;
}

/* 4. Boutons modules — plus grands et mieux centrés sur mobile */
@media (max-width: 420px){
  .card-wrap .mod-btn{
    min-height:74px !important;
    padding:6px 2px !important;
  }
  .card-wrap .mod-btn i{
    font-size:19px !important;
  }
  .card-wrap .mod-btn .mod-label,
  .card-wrap .mod-btn span{
    font-size:10.5px !important;
    line-height:1.15 !important;
  }
}

/* 5. Footer légal — lisibilité WCAG AAA via couleur adaptative au thème
   Principe : on s'aligne sur la teinte du CTA "Obtenir ma bloo.Cards" et on
   réutilise --card-text (dark-teal #1A2E2E sur Jean Dupont, clair sur Martha).
   Résultat : contraste 7.77:1 (AAA) sans background sombre, adaptatif par thème.
   Avant : liens #999 @ opacity:0.7, 9px → 2:1 sur fond orange saumon (FAIL). */
.card-wrap .card-footer{
  margin-top:auto !important;
  padding:12px 14px 16px !important;
  position:relative !important;
  z-index:10 !important;
  background:transparent !important;
}
.card-wrap .card-footer a,
.card-wrap .card-footer a:visited,
.card-wrap .card-footer a:link{
  color:var(--card-text,#1A2E2E) !important;
  opacity:.92 !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  transition:opacity .15s ease,text-decoration-color .15s ease !important;
  text-shadow:none !important;
}
.card-wrap .card-footer a:hover,
.card-wrap .card-footer a:focus-visible{
  opacity:1 !important;
  color:var(--card-text,#1A2E2E) !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}
.card-wrap .card-footer .sep,
.card-wrap .card-footer .footer-sep{
  color:var(--card-text,#1A2E2E) !important;
  opacity:.55 !important;
}

/* 6. CTAs contact-actions — marges compactes sur écrans courts (height < 700px)
   Note : padding/gap gérés par les styles inline liquid dans card.php
   (padding:8px clamp(20px,6vw,32px) 6px; gap:clamp(8px,2.5vw,14px))
   On ne force plus ici. */
@media (max-height: 700px){
  .card-wrap .card-avatar-wrap{
    padding-top:10px !important;
    margin-bottom:8px !important;
  }
}

/* 7. CTA "Obtenir ma bloo.Cards" — voile blanc semi-opaque + backdrop-blur
   Principe : le texte teal --card-accent (#1E6B6B) n'a que 3.35:1 sur #F5B070.
   En ajoutant un voile blanc à 38% + blur, le fond effectif devient plus clair
   → contraste mesuré ≈ 4.6:1 (PASS AA). Glassmorphism cohérent Aurora Glass.
   Adaptatif : voile blanc fonctionne sur tous les thèmes (clairs et foncés). */
.card-wrap .contact-actions a[href*="register"]{
  background:rgba(255,255,255,.38) !important;
  backdrop-filter:blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(6px) saturate(140%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),
             0 1px 3px rgba(0,0,0,.08) !important;
}
.card-wrap .contact-actions a[href*="register"]:hover,
.card-wrap .contact-actions a[href*="register"]:focus-visible{
  background:rgba(255,255,255,.55) !important;
  transform:translateY(-1px) !important;
}

/* 8. RESPONSIVE LIQUID — délégué à card.php (inline clamp())
   Raison : les clamp() inline dans card.php gèrent déjà le scaling fluide
   360px (S10) → 430px (iPhone Pro Max) avec une meilleure spécificité
   et sans !important global. Cette section est volontairement vide pour
   ne pas concurrencer les règles inline. */

/* ==========================================================================
   FIN — bloo-design-system-2026.css v2.0.5 (Responsive Liquid delegated)
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════════
   MODE FOND D'ÉCRAN (body[data-bg="1"]) — règle client 16/09 :
   « Si fond d'écran : juste le fond, pas de photo de profil, pas de hero,
     pas de badge ✓ » + couleurs de contenu adaptées (clair sur voile).
   S'applique à TOUS les layouts (legacy + 10 skins).
   ═══════════════════════════════════════════════════════════════════════════ */
body[data-bg="1"] .card-wrap .card-avatar-wrap,
body[data-bg="1"] .card-wrap .card-header,
body[data-bg="1"] .card-avatar-verify { display:none !important; }
body[data-bg="1"] .card-inner { background:#0b0f18 !important; color:#fff !important; }
body[data-bg="1"] .card-inner::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.14) 32%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.66) 100%);
}
body[data-bg="1"] .card-identity {
  padding-top:58px !important; margin-top:0 !important; text-align:center !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-radius:0 !important;
}
body[data-bg="1"] .modules-section {
  background:transparent !important; border:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; margin-left:0 !important; margin-right:0 !important;
}
body[data-bg="1"] .card-name,
body[data-bg="1"] .card-company { color:#fff !important; text-shadow:0 1px 14px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.7) !important; }
body[data-bg="1"] .card-title { color:rgba(255,255,255,.9) !important; text-shadow:0 1px 10px rgba(0,0,0,.6) !important; }
body[data-bg="1"] .card-tagline { color:rgba(255,255,255,.85) !important; text-shadow:0 1px 10px rgba(0,0,0,.6) !important; text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
body[data-bg="1"] .card-tagline::before, body[data-bg="1"] .card-tagline::after { content:none !important; }
body[data-bg="1"] .mod-btn {
  background:rgba(10,14,26,.46) !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:18px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.28) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  flex-direction:column !important; width:auto !important;
}
body[data-bg="1"] .mod-icon { background:transparent !important; color:#fff !important; border:0 !important; text-shadow:none !important; filter:none !important; box-shadow:none !important; }
body[data-bg="1"] .mod-label { color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,.65) !important; text-transform:none !important; letter-spacing:0 !important; }
body[data-bg="1"] .card-action-btn { border-radius:14px !important; text-transform:none !important; letter-spacing:0 !important; }
body[data-bg="1"] .card-action-btn--primary { background:#fff !important; color:#0f1624 !important; border:0 !important; box-shadow:0 10px 28px rgba(0,0,0,.4) !important; }
body[data-bg="1"] .card-action-btn--ghost { background:rgba(10,14,26,.46) !important; color:#fff !important; border:1px solid rgba(255,255,255,.4) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none !important; }
body[data-bg="1"] .card-footer, body[data-bg="1"] .card-footer a, body[data-bg="1"] .card-footer-logo { color:rgba(255,255,255,.88) !important; border-color:rgba(255,255,255,.22) !important; text-shadow:0 1px 6px rgba(0,0,0,.6); }
body[data-bg="1"] .h-badges-float .h-badge { background:rgba(10,14,26,.5) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }