/* ============================================================
   Carte de visite digitale — BassinWebFlow
   DA reprise du theme bassinwebflow.fr : blanc dominant,
   encre noire, bleu signature #3F7BFF.
   UNE SEULE police : Inter (auto-hebergee, RGPD).
   Mobile-only.
   ============================================================ */

@font-face { font-family:'Inter'; src:url('fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-800.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root {
  --blue: #3F7BFF;
  --blue-deep: #2B5DD9;
  --blue-light: #5BC4E8;
  --blue-soft: rgba(63, 123, 255, 0.10);
  --ink: #0A0A0A;
  --ink-2: #171717;
  --ink-mute: #525252;
  --ink-faint: #737373;
  --line: #E5E5E5;
  --paper: #FFFFFF;
  --paper-2: #FAFAFA;
  --paper-3: #F5F5F3;
  --radius-card: 18px;
  --radius-btn: 10px;
  --shadow-sm: 0 1px 2px rgba(10,10,12,0.04), 0 1px 1px rgba(10,10,12,0.03);
  --shadow: 0 1px 2px rgba(10,10,12,0.04), 0 8px 24px -8px rgba(10,10,12,0.08);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(26px, 7vh, 64px) 16px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.001em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.card { width: 100%; max-width: 408px; }

/* ---- Identite ---- */
.identity { text-align: center; padding: 2px 4px 0; }

.logo-mark {
  display: block;
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 20px;
  box-shadow: 0 10px 22px -8px rgba(63, 123, 255, 0.5);
}

.name {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.95rem, 6.4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.brand {
  margin: 7px 0 0;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.role {
  margin: 9px 0 0;
  font-size: 1.02rem;
  color: var(--ink-mute);
}

.place {
  margin: 14px 0 0;
  font-weight: 600;
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* separateur en pointilles (signature du theme) */
.identity::after {
  content: "";
  display: block;
  height: 0;
  margin: 22px 0 0;
  border-top: 1px dashed var(--line);
}

/* ---- Bouton principal : vCard (degrade bleu du logo) ---- */
.cta {
  width: 100%;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  min-height: 58px;
  border: none;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(63, 123, 255, 0.6);
  transition: transform 0.25s var(--ease), filter 0.2s var(--ease), box-shadow 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cta:hover { filter: brightness(0.97); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(63, 123, 255, 0.7); }
.cta:active { transform: scale(0.99); }

.cta-ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
}
.cta-ico svg { width: 21px; height: 21px; }
.cta-text { display: flex; flex-direction: column; gap: 1px; }
.cta-title { font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.cta-sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.74); }

/* ---- Groupes (coordonnees / liens) ---- */
.group { margin-top: 24px; }

.group-label {
  margin: 0 0 10px 2px;
  font-weight: 600;
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.group > .row:first-of-type { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.group > .row:last-of-type { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.group > .row:only-of-type { border-radius: var(--radius-card); }

.row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  min-height: 64px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.row + .row { border-top: none; }
.row:hover { background: var(--paper-3); }
.row:active { background: #efefec; }

.row-ico {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
}
.row-ico svg { width: 21px; height: 21px; }
.row-ico.is-brand { background: #fff; border: 1px solid var(--line); }
.row-ico.is-brand svg, .row-ico.is-brand img { width: 24px; height: 24px; display: block; }
.row-ico.is-brand img { object-fit: contain; border-radius: 5px; }

.row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.row-title { font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.row-sub { font-size: 0.87rem; color: var(--ink-mute); }

.row-go { flex-shrink: 0; color: var(--ink-faint); opacity: 0.6; display: flex; }
.row-go svg { width: 18px; height: 18px; }

/* ---- Pied ---- */
.foot { margin-top: 26px; text-align: center; }
.foot-rule {
  display: block;
  height: 0;
  margin: 0 0 14px;
  border-top: 1px dashed var(--line);
}
.foot p {
  margin: 0;
  font-weight: 600;
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Toast (feedback maison, jamais d'alert natif) ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 16px);
  padding: 12px 18px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 10;
}
.toast[hidden] { display: block; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Focus visible ---- */
.cta:focus-visible,
.row:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---- Animations d'entree (respecte prefers-reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  [data-anim] {
    opacity: 0;
    transform: translateY(12px);
    animation: rise 0.6s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  @keyframes rise { to { opacity: 1; transform: none; } }
}