/* ===========================================================
   BMC PHONE — système visuel
   Sobre · premium · crédible technique. Fond blanc dominant.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Encre & nuit (jamais de noir pur) */
  --ink:#0E1C2B;          /* texte fort, titres */
  --ink-2:#16293B;        /* panneaux nuit */
  --navy:#0C1826;         /* nuit profonde (sections rares) */

  /* Accent froid / métallique */
  --steel:#34728F;        /* acier — accent principal froid */
  --steel-deep:#22566E;   /* acier foncé — hover, traits */
  --steel-tint:#EAF1F4;   /* voile acier très clair */

  /* Métal & gris */
  --silver:#AEB9C4;       /* filets métalliques */
  --slate:#5B6B7A;        /* texte secondaire */
  --slate-2:#8593A1;      /* texte tertiaire */

  /* Surfaces */
  --bg:#F5F7F9;           /* fond cool */
  --bg-2:#EEF1F4;
  --surface:#FFFFFF;
  --line:#E4E8EC;         /* bordures claires */
  --line-2:#D5DBE1;

  /* Réservé au LOGO uniquement */
  --logo-blue:#1C9FE0;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --shadow-sm:0 1px 2px rgba(14,28,43,.05), 0 2px 8px rgba(14,28,43,.04);
  --shadow:0 12px 30px -12px rgba(14,28,43,.18), 0 4px 12px -6px rgba(14,28,43,.10);
  --shadow-lg:0 40px 80px -32px rgba(14,28,43,.30), 0 12px 30px -16px rgba(14,28,43,.16);
}

*{box-sizing:border-box;}
.bmc{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
.bmc h1,.bmc h2,.bmc h3,.bmc h4,.bmc .disp{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-0.02em; margin:0; color:var(--ink);
}
.bmc p{margin:0;}

/* ---------- utilitaires ---------- */
.bmc-eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel);
  display:inline-flex; align-items:center; gap:9px;
}
.bmc-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--steel);display:inline-block;}
.bmc-eyebrow.no-rule::before{display:none;}

.bmc-kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);font-weight:600;font-family:'Space Grotesk',sans-serif;}

.bmc-btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:.18s;white-space:nowrap;
}
.bmc-btn--primary{background:var(--ink);color:#fff;}
.bmc-btn--primary:hover{background:var(--steel-deep);}
.bmc-btn--steel{background:var(--steel);color:#fff;}
.bmc-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.bmc-btn--ghost:hover{border-color:var(--ink);}
.bmc-btn--light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.22);}
.bmc-btn svg{display:block;}

.bmc-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--slate);
  background:var(--surface);border:1px solid var(--line);
  padding:7px 13px;border-radius:999px;
}
.bmc-dot{width:7px;height:7px;border-radius:50%;background:var(--steel);display:inline-block;}

/* étoiles */
.bmc-stars{display:inline-flex;gap:3px;align-items:center;}

/* placeholder image (zone à remplacer) */
.bmc-ph{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg,#EDF0F3 0 11px,#E6EAEE 11px 22px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.bmc-ph span{
  font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.06em;
  color:var(--slate-2);background:rgba(255,255,255,.78);
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  text-align:center;font-weight:500;
}
.bmc-ph--dark{
  background:repeating-linear-gradient(135deg,#16293B 0 11px,#132434 11px 22px);
  border-color:rgba(255,255,255,.08);
}
.bmc-ph--dark span{background:rgba(12,24,38,.6);color:#9FB0C0;border-color:rgba(255,255,255,.12);}

/* filet métallique fin */
.bmc-rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);}

.bmc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}

/* ===========================================================
   ANIMATIONS — effets flottants, entrées, pulsation
   =========================================================== */
@keyframes bmcFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@keyframes bmcFloatRot{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-18px) rotate(-1.2deg);}
}
@keyframes bmcRise{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes bmcFade{ from{opacity:0;} to{opacity:1;} }
@keyframes bmcPulse{
  0%,100%{transform:scale(1);opacity:.55;}
  50%{transform:scale(1.9);opacity:0;}
}
@keyframes bmcGlowPulse{
  0%,100%{opacity:.35;}
  50%{opacity:.85;}
}
@keyframes bmcScan{
  0%{transform:translateY(-10%);opacity:0;}
  15%{opacity:1;}
  85%{opacity:1;}
  100%{transform:translateY(620%);opacity:0;}
}
@keyframes bmcShimmer{
  0%{background-position:-180% 0;}
  100%{background-position:280% 0;}
}
@keyframes bmcDrift{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(0,-10px);}
}

.bmc-float{animation:bmcFloat 6.5s ease-in-out infinite;will-change:transform;}
.bmc-float-slow{animation:bmcFloatRot 9s ease-in-out infinite;will-change:transform;}
.bmc-drift{animation:bmcDrift 7s ease-in-out infinite;}
.bmc-rise{animation:bmcRise .85s cubic-bezier(.2,.75,.25,1) both;}
.bmc-fadein{animation:bmcFade 1.1s ease both;}
.bmc-pulse-ring{animation:bmcPulse 2.6s ease-out infinite;}
.bmc-glow{animation:bmcGlowPulse 4s ease-in-out infinite;}

/* point de soudure pulsé */
.bmc-solder{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--logo-blue);box-shadow:0 0 0 0 rgba(28,159,224,.6);}
.bmc-solder::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--logo-blue);animation:bmcPulse 2.6s ease-out infinite;}

/* ligne de scan (microscope) */
.bmc-scanwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;}
.bmc-scanline{position:absolute;left:6%;right:6%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--logo-blue),transparent);
  filter:drop-shadow(0 0 6px rgba(28,159,224,.7));
  animation:bmcScan 5.5s ease-in-out infinite;}

/* lien soulignement animé sous-jacent (héros CTA) */
.bmc-shine{background-size:200% 100%;animation:bmcShimmer 3.4s linear infinite;}

@media (prefers-reduced-motion: reduce){
  .bmc-float,.bmc-float-slow,.bmc-drift,.bmc-rise,.bmc-fadein,
  .bmc-pulse-ring,.bmc-glow,.bmc-solder::after,.bmc-scanline,.bmc-shine{
    animation:none !important;
  }
  .bmc-rise{opacity:1;transform:none;}
}