/* =====================================================
 
   Styles spécifiques à la page d'accueil.
   Nécessite base.css chargé avant.

   SECTIONS :
   ① Wrapper
   ② Hero (V2)
   ③ Conversion stats
   ④ Features (V2)
   ⑤ Free plan badge
   ⑥ How it works (V2)
   ⑦ Trusted & Security (V2)
   ⑧ Responsive
===================================================== */


/* ─────────────────────────────────────────────────────
   ① WRAPPER
───────────────────────────────────────────────────── */

/* Hérite de .page-content (base.css) pour le centrage et l'espacement vertical */
.home {
  /* padding-top, padding-bottom, max-width, margin-inline, padding-inline
     sont tous gérés par .page-content sur l'élément HTML.
     Ne pas redéfinir ici pour garder la cohérence avec dashboard. */
}


/* ─────────────────────────────────────────────────────
   ② HERO (V2)
───────────────────────────────────────────────────── */

.hero.hero-v2 {
  position: relative;
  margin: 0 0 2.6rem;   /* top supprimé — géré par --page-top sur .home */
}

/* Shell — reprend le pattern radial de base.css .base-card mais en version hero */
.hero-shell {
  position: relative;
  padding: 2.5em 2.5em;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 15% 0%,
      color-mix(in srgb, var(--accent-bg) 80%, transparent), transparent 55%),
    radial-gradient(circle at 90% 40%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent);
  overflow: hidden;
}

.hero-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 30% 20%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(circle at 80% 10%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%);
  opacity: .7;
  pointer-events: none;
}

/* Grille 2 colonnes */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 2rem;
  align-items: center;
}

/* ── Eyebrow (pills au-dessus du titre) ── */
.hero-eyebrow {
  display: flex;
  gap: .7em;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Pill hero — variante légère de .ui-pill */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .4em .85em;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: .9em;
}

.hero-pill.subtle {
  color: var(--text);
  opacity: .88;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

.hero-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  flex: 0 0 auto;
}

/* ── Titre ── */
.hero-title {
  margin: 0 0 .55em;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.08;
  font-weight: 950;
  color: var(--text);
  letter-spacing: -.02em;
}

.hero-accent {
  display: block;
  color: var(--accent);
  text-shadow: 0 10px 42px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ── Description ── */
.hero-description {
  margin: 0 0 1.1rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.06em;
}

.hero-description b {
  color: var(--text);
  font-weight: 900;
}

/* ── Check-list ── */
.hero-points {
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55em;
  max-width: 520px;
}

.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: .65em;
  color: var(--text);
  line-height: 1.55;
  font-weight: 750;
}

.hero-check {
  width: 26px;
  height: 26px;
  border-radius: .9em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent-sm);
  flex: 0 0 auto;
  margin-top: .08em;
}

/* ── CTA ── */
.hero-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9em;
  max-width: 100%;
}

.hero-cta .ui-btn {
  width: 100%;
  min-width: 0;
}

/* ── Preuve sociale ── */
.hero-proof {
  display: flex;
  align-items: center;
  gap: .6em;
  width: fit-content;
  padding: .55em .85em;
  border-radius: var(--radius-4);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-2);
  margin-top: 1rem;
}

.hero-proof-dot {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent) 60%, transparent);
  flex: 0 0 auto;
}

/* 3 rings qui s'enchaînent en décalé — effet radar puissant */
.hero-proof-dot::before,
.hero-proof-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: proof-ring 2s ease-out infinite;
}
.hero-proof-dot::after {
  animation-delay: .66s;
}

/* 3e ring via box-shadow animé sur un wrapper — trick CSS pur */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 1.4em;  /* augmenté de .6em → 1.4em pour donner de l'air aux rings */
  width: fit-content;
  padding: .55em .85em;
  border-radius: var(--radius-4);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-2);
  margin-top: 1rem;
}

@keyframes proof-ring {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(5);   opacity: 0;  }
}

.hero-proof-text   { color: var(--text); font-size: .92em; font-weight: 700; }
.hero-proof-text b { color: var(--accent); font-weight: 950; }

/* ── Visuel droit ── */
.hero-visual {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 1.2em;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-4);
  overflow: visible;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    radial-gradient(circle at 90% 10%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%);
  opacity: .7;
  pointer-events: none;
}

.hero-image {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  height: auto;
  transform: translateY(2px);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .20));
}

/* ── Floating cards ── */
.hero-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .65em;
  padding: .7em .85em;
  border-radius: var(--radius-5);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-float--top    { left: .85em;  top: -1.5em; }
.hero-float--bottom { bottom: -2.5em; right: .85em; }
.hero-float--proof  {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.hero-float-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  flex: 0 0 auto;
}

.hero-float-title { font-weight: 950; color: var(--text); line-height: 1.15; font-size: .9em; }
.hero-float-sub   { color: var(--muted); font-weight: 750; font-size: .85em; }


/* ─────────────────────────────────────────────────────
   ③ CONVERSION STATS
───────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   ④ FEATURES (V2)
───────────────────────────────────────────────────── */

.features-list.features-v2 {
  margin: 2rem 0;
  padding: 2em 1.8em;
  border-radius: var(--radius-6);
  background:
    radial-gradient(circle at 15% 0%,
      color-mix(in srgb, var(--accent-bg) 80%, transparent), transparent 55%),
    radial-gradient(circle at 85% 40%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent);
}

/* Head */
.features-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 2rem;
}

/* Kicker — utilise les tokens de .ui-kicker mais reste une classe locale */
.features-kicker {
  display: inline-block;
  font-size: .8em;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  padding: .35em .85em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.features-title {
  margin: .6em 0 .35em;
  font-size: 1.7em;
  font-weight: 900;
  color: var(--text);
}

.features-subtitle {
  color: var(--muted);
  font-size: 1.03em;
  line-height: 1.65;
}

/* Grille */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}

/* Card */
.feature-card {
  position: relative;
  padding: 1.6em 1.4em;
  border-radius: var(--radius-5);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-2);
  transition:
    transform     var(--duration-2) var(--ease-out),
    box-shadow    var(--duration-2) var(--ease-out),
    border-color  var(--duration-2) var(--ease-out);
  text-align: center;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 50% 0%,
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 52%);
  pointer-events: none;
  opacity: .6;
}

.feature-card > * { position: relative; z-index: 1; }

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Variante CTA */
.feature-card--cta {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-bg) 70%, transparent),
    color-mix(in srgb, var(--card) 85%, transparent)
  );
}

.feature-card--cta.is-primary {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}

/* Icône */
.feature-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 1em;
  border-radius: var(--radius-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: var(--shadow-accent-sm);
}

/* Texte */
.feature-text h3 {
  margin: .3em 0 .25em;
  font-size: 1.15em;
  font-weight: 900;
  color: var(--text);
}

.feature-text p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1em;
}

/* Remplace les inline style="display:flex; justify-content:center; margin-top:1rem;"
   présents sur les boutons CTA des feature-cards */
.feature-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* ─────────────────────────────────────────────────────
   ⑤ HOW IT WORKS (V2)
───────────────────────────────────────────────────── */

.how-it-works.how-it-works-v2 {
  margin: 2rem 0;
  padding: 2em 1.8em;
  border-radius: var(--radius-6);
  background:
    radial-gradient(circle at 15% 0%,
      color-mix(in srgb, var(--accent-bg) 80%, transparent), transparent 55%),
    radial-gradient(circle at 85% 35%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent);
}

/* Head */
.how-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2rem;
}

.how-kicker {
  display: inline-block;
  font-size: .8em;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  padding: .35em .8em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.how-title {
  margin: .6em 0 .35em;
  font-size: 1.7em;
  font-weight: 900;
  color: var(--text);
}

.how-subtitle {
  color: var(--muted);
  font-size: 1.02em;
  line-height: 1.65;
}

/* Grille étapes */
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  max-width: 900px;       /* évite l'étirement excessif sur grands écrans */
  margin-inline: auto;
}

/* Card étape */
.how-step {
  position: relative;
  padding: 1.6em 1.4em 1.5em;
  border-radius: var(--radius-5);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-2);
  text-align: center;
  overflow: hidden;
  transition:
    transform    var(--duration-2) var(--ease-out),
    box-shadow   var(--duration-2) var(--ease-out),
    border-color var(--duration-2) var(--ease-out);
}

.how-step::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 50% 0%,
    color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%);
  opacity: .6;
  pointer-events: none;
}

.how-step > * { position: relative; z-index: 1; }

.how-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Numéro */
.how-step-index {
  position: absolute;
  top: .8em;
  right: .9em;
  font-weight: 900;
  font-size: .85em;
  color: var(--accent);
  opacity: .75;
}

/* Icône */
.how-step-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto .9em;
  border-radius: var(--radius-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: var(--shadow-accent-sm);
}

.how-step h4 {
  margin: .4em 0 .3em;
  font-size: 1.15em;
  font-weight: 900;
  color: var(--text);
}

.how-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1em;
}


/* ─────────────────────────────────────────────────────
   ⑦ TRUSTED & SECURITY (V2)
───────────────────────────────────────────────────── */

.trusted.trusted-v2 {
  margin: 2rem 0 1.5rem;
  padding: 2em 1.8em;
  border-radius: var(--radius-6);
  background:
    radial-gradient(circle at 10% 0%,
      color-mix(in srgb, var(--accent-bg) 80%, transparent), transparent 60%),
    radial-gradient(circle at 90% 30%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent);
}

/* Head */
.trusted-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 1.6rem;
}

.trusted-kicker {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: .35em .8em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.trusted-title {
  margin: .65em 0 .35em;
  color: var(--text);
  font-weight: 900;
  font-size: 1.55em;
  line-height: 1.2;
}

.trusted-subtitle {
  margin: 0 auto;
  color: var(--muted);
  max-width: 680px;
  line-height: 1.65;
  font-size: 1.02em;
}

/* Grille */
.trusted-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.4rem;
  align-items: stretch;
}

/* Panel générique */
.trusted-panel {
  border-radius: var(--radius-5);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-2);
  padding: 1.25em 1.2em;
  overflow: hidden;
  position: relative;
}

.trusted-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at 20% 0%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%),
    radial-gradient(circle at 80% 20%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%);
  pointer-events: none;
  opacity: .65;
}

.trusted-panel > * { position: relative; z-index: 1; }

/* Header du panel */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-title {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  font-weight: 900;
  color: var(--text);
}

.panel-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  flex: 0 0 auto;
}

/* Pill rating ★ */
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: .42em .75em;
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
  user-select: none;
}

.rating-stars { letter-spacing: .08em; font-size: .95em; }
.rating-text  { color: var(--text); opacity: .9; font-size: .88em; }

/* Témoignages */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.t-card {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--radius-5);
  padding: 1em .95em;
  box-shadow: var(--shadow-1);
  transition:
    transform    var(--duration-2) var(--ease-out),
    box-shadow   var(--duration-2) var(--ease-out),
    border-color var(--duration-2) var(--ease-out);
}

.t-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}

.t-head {
  display: flex;
  gap: .75em;
  align-items: center;
  margin-bottom: .7em;
}

.t-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: var(--shadow-accent-sm);
}

.t-meta   { line-height: 1.15; }
.t-name   { font-weight: 900; color: var(--text); font-size: .95em; }
.t-role   { font-size: .88em; color: var(--muted); font-weight: 700; }

.t-quote {
  margin: 0;
  color: var(--text);
  font-size: clamp(.88em, 1.1vw, .96em);
  line-height: 1.6;
}

.t-foot {
  display: flex;
  gap: .45em;
  flex-wrap: wrap;
  margin-top: .9em;
}

.t-tag {
  display: inline-flex;
  align-items: center;
  padding: .28em .62em;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 800;
  font-size: .82em;
}

/* Panel sécurité */
.trusted-panel--security { padding: 1.25em 1.25em 1.1em; }

.security-lead {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.65;
  font-size: 1.02em;
}

.security-badges-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75em;
  margin-bottom: 1rem;
}

.s-badge {
  display: flex;
  gap: .75em;
  align-items: center;
  padding: .75em .85em;
  border-radius: var(--radius-4);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.s-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  flex: 0 0 auto;
}

.s-badge-title { font-weight: 900; color: var(--text); margin: 0; font-size: .95em; }
.s-badge-sub   { font-size: .88em; color: var(--muted); font-weight: 700; }

.security-checklist {
  list-style: none;
  padding: 0;
  margin: .2em 0 1rem;
  display: grid;
  gap: .5em;
}

.security-checklist li {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  color: var(--text);
  line-height: 1.6;
  font-size: 1em;
}

.security-checklist li::before {
  content: "";
  width: .58em;
  height: .58em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-bg);
  margin-top: .5em;
  flex: 0 0 auto;
}

.security-footnote {
  display: flex;
  align-items: center;
  gap: .55em;
  color: var(--accent);
  font-weight: 900;
  font-size: .9em;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  padding: .55em .75em;
  border-radius: var(--radius-4);
  width: fit-content;
}

.security-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-bg);
  flex: 0 0 auto;
  animation: base-pulse 2s infinite; /* @keyframe défini dans base.css */
}


/* ─────────────────────────────────────────────────────
   ⑧ RESPONSIVE
───────────────────────────────────────────────────── */

/* Hero */
@media (max-width: 980px) {
  .hero-shell   { padding: 3em 3em; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .hero-visual { min-height: 240px; margin-top: 1.2em; }
  .hero-float--top    { left: .85em;  top: -1.5em; }
  .hero-float--bottom { bottom: -2.5em; right: .85em; }
}

@media (max-width: 560px) {
  .hero-shell   { padding: 3em 3em; }
  .hero-cta     { grid-template-columns: 1fr; gap: .75em; }
  .hero-float   { padding: .62em .75em; }
  .hero-float--proof { display: none; } /* masqué sur mobile — la preuve reste dans hero-left */
}

/* Features */
@media (max-width: 1000px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* How it works */
@media (max-width: 900px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .how-steps { grid-template-columns: 1fr; }

  .how-step-index {
    position: static;
    margin-bottom: .5em;
    display: block;
  }
}

/* Trusted */
@media (max-width: 1000px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .trusted-grid  { grid-template-columns: 1fr; }
  .trusted-head  { text-align: center; }
  .panel-head    { justify-content: center; flex-wrap: wrap; }
  .security-footnote { margin: 0 auto; }
}

/* ─────────────────────────────────────────────────────
   FIX — SVG bandwidth/requests ne disparaît plus sur petit écran
   .db-usage-label est un flex-row, le SVG sans flex-shrink: 0
   se compresse jusqu'à disparaître quand le conteneur est étroit.
───────────────────────────────────────────────────── */
.db-usage-label svg {
  flex-shrink: 0;
}

.db-usage-row-head {
  flex-wrap: wrap;
  gap: .4em .5em;
}

.db-usage-vals {
  flex-shrink: 0;
}