/* ============================================================
   MAD Marketing — Dark Premium
   Palette : violet profond #540073 · violet vif #B600FA
   Typo : Mulish (équivalent web d'Avenir)
   ============================================================ */

:root {
  --bg-deep: #060309;
  --bg-base: #08040c;
  --bg-elevated: #100a18;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(182, 0, 250, 0.45);
  --fg: #f6f2fa;
  --muted: #b3a8c2;
  --accent: #b600fa;
  --accent-deep: #540073;
  --accent-soft: #d38cff;
  --grad: linear-gradient(120deg, #8a2be2, #b600fa 55%, #d966ff);
  --grad-btn: linear-gradient(120deg, #6d00a8, #b600fa);
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Mulish", -apple-system, "Segoe UI", sans-serif;
  background: var(--bg-base);
  color: var(--fg);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Typographie : jamais un mot seul sur la dernière ligne d'un paragraphe
   (veuve), peu importe la largeur d'écran. Les navigateurs sans support
   ont un filet de sécurité dans script.js. */
p, li, blockquote, .stat span {
  text-wrap: pretty;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 110px 0; position: relative; }

/* ---------- Typographie ---------- */
h1, h2, h3 { font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; }

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); font-weight: 1000; }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h3 { font-size: 1.35rem; line-height: 1.25; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Libellé éditorial (kicker) — style sobre plutôt qu'une pastille, plus proche
   des vrais sites d'agences/studios et moins « template IA » */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 22px;
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
/* Titre forcé sur une seule ligne (repli en wrap sur mobile).
   On retire la limite de 720px du bloc pour qu'il puisse se centrer sur toute
   la largeur, tout en gardant le sous-titre étroit et lisible. */
.title-1l { white-space: nowrap; }
.section-head:has(.title-1l) { max-width: none; }
.section-head:has(.title-1l) .section-sub { max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 960px) { .title-1l { white-space: normal; } }
.section-sub { color: var(--muted); margin-top: 18px; font-size: 1.06rem; }

/* Logo Google Ads (marque officielle : barres bleue + jaune parallèles, point vert) */
.gads-badge { display: flex; justify-content: center; margin: 34px 0 38px; }
.gads-badge svg { width: 74px; height: auto; display: block; }
@media (max-width: 768px) { .gads-badge { margin: 24px 0 28px; } .gads-badge svg { width: 58px; } }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-primary {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 8px 30px rgba(182, 0, 250, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(182, 0, 250, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-ghost {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-light {
  background: #fff;
  color: #3d0054;
}
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.btn-lg { padding: 17px 34px; font-size: 1.02rem; }
.btn-sm { padding: 11px 22px; font-size: 0.88rem; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* iPhone : réserve l'espace de l'encoche pour que logo et menu restent visibles */
  padding-top: env(safe-area-inset-top, 0px);
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 4, 12, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo-img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
}
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--fg); }

.nav-links { align-items: center; }
.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 76px;
}
.has-dropdown > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-links .chev { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.has-dropdown:hover .chev, .has-dropdown:focus-within .chev { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 270px;
  background: rgba(12, 7, 18, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
}
.nav-dropdown a:hover { background: var(--surface-hover); }
.nav-dropdown a.active::after { display: none; }

.nav-mobile .nav-sub {
  padding: 8px 0 8px 18px;
  margin-left: 4px;
  font-size: 0.96rem;
  color: var(--muted);
  border-left: 2px solid rgba(182, 0, 250, 0.35);
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.nav-burger span {
  width: 22px; height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 4, 12, 0.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  /* Le menu peut dépasser l'écran (barre Safari, petits iPhone) : il défile
     à l'intérieur de la hauteur disponible pour que le bouton du bas reste
     toujours accessible */
  max-height: calc(100svh - 76px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  padding: 12px 0;
  font-size: 1.05rem;
}
.nav-mobile.open { display: flex; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(150px + env(safe-area-inset-top, 0px)) 0 90px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-rocket-video {
  /* Vidéo de fusée DEVANT les textes (fond noir invisible grâce au mode de
     fusion « screen »). Elle part cachée sous l'écran (translateY posé par
     script.js) et monte au rythme du défilement jusqu'à sortir par le haut. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translateY(85%);
  will-change: transform;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 4, 12, 0.55), rgba(8, 4, 12, 0.25) 40%, var(--bg-base) 96%),
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 40%, rgba(8, 4, 12, 0.55));
}
.hero-grid { z-index: 1; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.orb-1 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(182, 0, 250, 0.55), transparent 65%);
  top: -180px; right: -140px;
  animation: drift 14s ease-in-out infinite alternate;
}
.orb-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(84, 0, 115, 0.8), transparent 65%);
  bottom: -200px; left: -160px;
  animation: drift 18s ease-in-out infinite alternate-reverse;
}
.orb-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(217, 102, 255, 0.3), transparent 65%);
  top: 30%; left: 42%;
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, 40px) scale(1.12); }
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
}

.hero-inner { text-align: center; width: 100%; }
.hero-sub {
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 620px;
  margin: 28px auto 40px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-badges {
  list-style: none;
  display: flex;
  gap: 12px 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 56px;
}
.hero-badges li {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-badges svg { width: 16px; height: 16px; color: var(--accent-soft); flex-shrink: 0; }

/* ---------- Bandes de couleur ---------- */
.band-violet {
  background: linear-gradient(180deg, #200c3d 0%, #150826 100%);
  border-top: 1px solid rgba(211, 140, 255, 0.3);
  border-bottom: 1px solid rgba(211, 140, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(211, 140, 255, 0.12), inset 0 -1px 0 rgba(211, 140, 255, 0.12);
}
.band-prune {
  background: linear-gradient(180deg, #2c0d33 0%, #1a081f 100%);
  border-top: 1px solid rgba(255, 46, 166, 0.28);
  border-bottom: 1px solid rgba(255, 46, 166, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 46, 166, 0.1), inset 0 -1px 0 rgba(255, 46, 166, 0.1);
}

/* ---------- Stats ---------- */
.stats { padding: 52px 0 60px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.stat:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.stat strong {
  display: block;
  font-size: 2.6rem;
  font-weight: 1000;
  line-height: 1;
  /* Dégradé périodique : les deux tiers extrêmes sont identiques (aspect au
     repos = dégradé violet habituel), le tiers central porte l'éclat blanc
     rosé du jet de la fusée qui balaie le chiffre pendant l'animation. */
  background: linear-gradient(120deg,
    #8a2be2 0%, #b600fa 18%, #d966ff 33.3%,
    #b600fa 46%, #f6e9ff 50%, #b600fa 54%,
    #8a2be2 66.7%, #b600fa 85%, #d966ff 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
  animation: stat-shine 5.5s ease-in-out infinite;
}
/* Départs décalés : les 4 chiffres ne brillent pas tous en même temps */
.stat:nth-child(2) strong { animation-delay: 0.7s; }
.stat:nth-child(3) strong { animation-delay: 1.4s; }
.stat:nth-child(4) strong { animation-delay: 2.1s; }
@keyframes stat-shine {
  0%, 50% { background-position: 100% 0; }
  95%, 100% { background-position: 0% 0; }
}
.stat strong em { font-style: normal; font-size: 1.8rem; }
.stat span { color: var(--muted); font-size: 0.92rem; font-weight: 600; }

/* ---------- Approche ---------- */
.approche-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
}
.approche-right p { color: var(--muted); font-size: 1.08rem; }
.quote-card {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(120deg, rgba(84, 0, 115, 0.35), rgba(182, 0, 250, 0.12));
  border: 1px solid rgba(182, 0, 250, 0.35);
  border-radius: var(--radius);
  padding: 24px 28px;
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--fg);
}
.quote-card svg { width: 30px; height: 30px; color: var(--accent-soft); flex-shrink: 0; }

/* ---------- Services ---------- */
.section-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px; max-width: 100vw; height: 500px;
  background: radial-gradient(ellipse, rgba(84, 0, 115, 0.35), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.35s var(--ease), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(182, 0, 250, 0.12);
}
.card p { color: var(--muted); font-size: 0.96rem; }
.card-note { color: var(--accent-soft) !important; font-weight: 700; font-size: 0.9rem !important; }
.card-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, rgba(182, 0, 250, 0.25), rgba(84, 0, 115, 0.35));
  border: 1px solid rgba(182, 0, 250, 0.35);
  margin-bottom: 6px;
}
.card-icon svg { width: 26px; height: 26px; color: var(--accent-soft); }
.card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  padding-top: 8px;
}
.card-link svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.card-link:hover svg { transform: translateX(5px); }
.card-link:hover { color: var(--accent-soft); }

.card-feature {
  grid-row: span 2;
  background: linear-gradient(160deg, rgba(182, 0, 250, 0.12), var(--surface) 50%);
  border-color: rgba(182, 0, 250, 0.3);
}
.partner-badge {
  width: 150px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0;
}
.mini-dash {
  margin: 12px 0 6px;
  background: rgba(8, 4, 12, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 16px 14px;
}
.mini-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.mini-dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-soft);
  border: 1px solid rgba(182, 0, 250, 0.35);
  background: rgba(182, 0, 250, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
}
.mini-dash-pill svg { width: 12px; height: 12px; }
.mini-dash-chart { width: 100%; height: 92px; display: block; }
.mini-dash-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mini-dash-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fg);
}
.mini-dash-stats svg { width: 14px; height: 14px; color: var(--accent-soft); }

.card-cta {
  grid-column: 1 / -1;
  background: var(--grad-btn);
  border-color: rgba(255, 255, 255, 0.2);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 40px 44px;
}
.card-cta h3 { font-size: 1.5rem; }
.card-cta p { color: rgba(255, 255, 255, 0.85); max-width: 520px; }
.card-cta .btn { flex-shrink: 0; }
.card-cta:hover { box-shadow: 0 20px 60px rgba(182, 0, 250, 0.4); }
.card-cta-text { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Piliers ---------- */
.piliers { background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.piliers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pilier {
  text-align: center;
  padding: 38px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s ease;
}
.pilier:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.pilier-icon {
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, rgba(182, 0, 250, 0.25), rgba(84, 0, 115, 0.4));
  border: 1px solid rgba(182, 0, 250, 0.4);
  box-shadow: 0 0 30px rgba(182, 0, 250, 0.2);
}
.pilier-icon svg { width: 28px; height: 28px; color: var(--accent-soft); }
.pilier h3 { margin-bottom: 12px; font-size: 1.15rem; }
.pilier p { color: var(--muted); font-size: 0.93rem; }

/* ---------- CTA final ---------- */
.cta-card {
  position: relative;
  text-align: center;
  border-radius: 32px;
  border: 1px solid rgba(182, 0, 250, 0.4);
  background: linear-gradient(160deg, rgba(84, 0, 115, 0.4), rgba(8, 4, 12, 0.6) 60%);
  padding: 90px 40px;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(182, 0, 250, 0.4), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.cta-card > *:not(.cta-glow) { position: relative; }
.cta-text {
  color: var(--muted);
  max-width: 640px;
  margin: 22px auto 38px;
  font-size: 1.05rem;
}
.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-small {
  margin-top: 26px;
  font-size: 0.88rem;
  color: var(--accent-soft);
  font-weight: 700;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
}
.footer-brand .logo-img { height: 34px; margin-bottom: 20px; }
.footer-brand p { color: var(--muted); font-size: 0.95rem; max-width: 340px; }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}
.footer-social a:hover { color: var(--fg); border-color: var(--border-strong); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col { display: flex; flex-direction: column; gap: 13px; }
.footer-col h4 {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
}
.footer-col a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom p { color: rgba(179, 168, 194, 0.65); font-size: 0.85rem; }

/* ---------- Avis clients (Google reviews) ---------- */
.reviews-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto 54px;
}
.reviews-rating-top {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 22px;
}
.reviews-rating-score {
  font-size: 1.9rem;
  font-weight: 1000;
  line-height: 1;
  color: var(--fg);
}
.reviews-rating .stars { display: inline-flex; gap: 2px; }
.reviews-rating-count { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.reviews-rating-count strong { color: var(--fg); font-weight: 800; }
.g-logo { width: 20px; height: 20px; flex-shrink: 0; }

.stars svg { width: 18px; height: 18px; }
.star-fill { fill: #FBBC05; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform 0.35s var(--ease), border-color 0.35s ease;
}
.review-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.review-card .stars { margin-bottom: 2px; }
.review-text { color: var(--fg); font-size: 1rem; line-height: 1.6; flex: 1; }
.review-foot { display: flex; align-items: center; gap: 13px; margin-top: 4px; }
.review-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(140deg, #6d00a8, #b600fa);
  flex-shrink: 0;
}
.review-name { font-weight: 800; font-size: 0.98rem; }
.review-meta { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.review-meta .g-logo { width: 14px; height: 14px; }
.reviews-cta { text-align: center; margin-top: 46px; }

@media (max-width: 1024px) { .reviews-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* ---------- Section croissance épinglée (ligne tracée au scroll) ---------- */
.growth-pin-wrap {
  position: relative;
  height: 200vh; /* la hauteur en trop = distance de scroll pendant l'épinglage */
}
.growth-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.growth-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -30%);
  width: 1100px; max-width: 100vw; height: 700px;
  background: radial-gradient(ellipse, rgba(182, 0, 250, 0.22), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}
.growth-panel {
  position: relative;
  text-align: center;
  width: 100%;
}
.growth-panel h2 { margin-top: 6px; }
.growth-chart {
  width: 100%;
  max-width: 1040px;
  margin: 46px auto 0;
  display: block;
  overflow: visible;
}
.growth-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1.5; }
.growth-line {
  fill: none;
  stroke: #d38cff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(182, 0, 250, 0.75));
}
.growth-area { fill: url(#growthFill); }
.growth-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 10px #d38cff);
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Mobile : même effet épinglé que sur ordinateur (demande Jennifer),
   avec la hauteur d'écran stable (svh) pour éviter les sauts de la barre
   d'adresse iPhone */
@media (max-width: 768px) {
  .growth-pin { height: 100svh; min-height: 0; }
  .growth-chart { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .growth-pin-wrap { height: auto; }
  .growth-pin { position: relative; height: auto; padding: 90px 0; }
}

/* ---------- Photos ---------- */
.photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(182, 0, 250, 0.1);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(182, 0, 250, 0.12), transparent 45%, rgba(8, 4, 12, 0.35));
  pointer-events: none;
}
.photo-caption {
  position: absolute;
  left: 18px; bottom: 14px;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246, 242, 250, 0.85);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.approche-photo { margin-top: 34px; aspect-ratio: 3 / 2; }

/* Bandeau photo de famille pleine largeur (page Pourquoi nous) */
.team-banner {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.team-banner img {
  width: 100%;
  height: clamp(380px, 52vw, 620px);
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.team-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 4, 12, 0.85), transparent 45%),
    linear-gradient(120deg, rgba(84, 0, 115, 0.28), transparent 55%);
  pointer-events: none;
}
.team-banner-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 26px;
  z-index: 1;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 242, 250, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  padding: 0 24px;
}

/* Page approche : titre pleine largeur, puis texte ÉGALISÉ sur la hauteur
   de la photo (même départ en haut, même arrivée en bas).
   ORDINATEUR SEULEMENT : sous 1024px la grille passe en une colonne, il n'y
   a plus de hauteur à égaliser et forcer les marges à zéro collait tous les
   paragraphes et la citation ensemble. */
.approche-title { margin-bottom: 36px; }
.approche-grid-egal figure.approche-photo { margin-top: 0; }
@media (min-width: 1025px) {
  .approche-grid-egal { align-items: stretch; }
  .approche-grid-egal .approche-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .approche-grid-egal .approche-right > * { margin-top: 0 !important; }
}

/* Photo d'équipe (page approche) : la légende passe sous l'image, en bandeau.
   Scopé à figure.* pour ne PAS toucher la .stat-scene de l'accueil qui
   partage la classe .approche-photo (son aspect-ratio définit sa hauteur). */
figure.approche-photo { aspect-ratio: auto; }
figure.approche-photo::after { display: none; }
figure.approche-photo .photo-caption {
  position: static;
  display: block;
  padding: 13px 16px 15px;
  text-align: center;
  border-top: 1px solid var(--border);
  text-shadow: none;
  color: var(--muted);
}

/* ===== Scène de mini-résultats (cartes vitrées flottantes, parallaxe au scroll) ===== */
.stat-scene {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(420px 300px at 78% 16%, rgba(84, 0, 115, 0.45), transparent 62%),
    radial-gradient(520px 380px at 10% 90%, rgba(182, 0, 250, 0.16), transparent 62%),
    linear-gradient(160deg, #150a20, #0a0512);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(182, 0, 250, 0.1);
}
.stat-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(211, 140, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 140, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(75% 75% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 75% at 50% 45%, #000 30%, transparent 100%);
  pointer-events: none;
}
.stat-card {
  position: absolute;
  padding: 13px 16px 12px;
  border-radius: 14px;
  background: rgba(22, 13, 33, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.stat-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.stat-row { display: flex; align-items: baseline; gap: 9px; }
.stat-value { font-size: 1.42rem; font-weight: 900; color: var(--fg); line-height: 1.1; }
.stat-delta { font-size: 0.78rem; font-weight: 800; color: #4ade80; }
.stat-spark { width: 118px; height: 34px; margin-top: 9px; display: block; overflow: visible; }
.stat-spark path {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(182, 0, 250, 0.55));
}
.stat-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 9px; }
.stat-bars i {
  width: 8px;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-deep));
  opacity: 0.9;
}
.stat-ring-wrap { display: flex; align-items: center; gap: 14px; }
.stat-ring { width: 52px; height: 52px; transform: rotate(-90deg); }
.stat-ring .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 4.5; }
.stat-ring .ring-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 113;
  stroke-dashoffset: 70;
  filter: drop-shadow(0 0 5px rgba(182, 0, 250, 0.6));
}
.stat-chip {
  position: absolute;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fg);
  background: rgba(22, 13, 33, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  will-change: transform;
}
.stat-chip b { color: #4ade80; font-weight: 800; }
/* Scènes des pages de services (remplacent les anciennes photos) */
.stat-scene.service-scene { aspect-ratio: 3 / 2; }
.stat-swatches { display: flex; gap: 7px; margin-top: 10px; }
.stat-swatches i { width: 20px; height: 20px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.14); }
.stat-stars { display: block; color: #FBBC05; font-size: 0.9rem; letter-spacing: 2px; margin-top: 7px; }
/* Positions (index / défaut) */
.sc-views { left: 6.5%; top: 11%; }
.sc-followers { right: 6%; top: 24%; }
.sc-engagement { left: 12%; bottom: 13%; }
.sc-chip-conv { right: 9%; bottom: 17%; }
@media (max-width: 768px) {
  /* Scène plus haute sur mobile : les 4 cartes respirent au lieu de se
     chevaucher dans un cadre 3:2 trop serré */
  .stat-scene.approche-photo,
  .stat-scene.service-scene { aspect-ratio: 4 / 5; }
  .stat-value { font-size: 1.2rem; }
  .stat-spark { width: 92px; height: 28px; }
  .sc-views { left: 5%; top: 6%; }
  .sc-followers { right: 4%; top: 27%; }
  .sc-engagement { left: 7%; bottom: 19%; }
  .sc-chip-conv { right: 6%; bottom: 7%; }
}

.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.media-split .photo { aspect-ratio: 3 / 2; }
.media-split p { color: var(--muted); font-size: 1.05rem; }

.cta-card-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: center;
  text-align: left;
}
.cta-card-split .photo { aspect-ratio: 4 / 5; max-height: 460px; }
.cta-card-split .cta-actions { justify-content: flex-start; }

@media (max-width: 900px) {
  .media-split { grid-template-columns: 1fr; gap: 34px; }
  .cta-card-split { grid-template-columns: 1fr; gap: 34px; }
  .cta-card-split .photo { aspect-ratio: 3 / 2; max-height: none; }
}

/* ---------- Pages intérieures ---------- */
[id] { scroll-margin-top: 100px; }

.nav-links a.active,
.nav-mobile a.active { color: var(--fg); }
.nav-links a.active { position: relative; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.page-hero {
  position: relative;
  padding: calc(170px + env(safe-area-inset-top, 0px)) 0 80px;
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -260px; left: 50%;
  transform: translateX(-50%);
  width: 820px; height: 520px;
  background: radial-gradient(ellipse, rgba(182, 0, 250, 0.35), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.page-hero > .container { position: relative; }
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); }
.page-hero .page-sub {
  color: var(--muted);
  font-size: 1.12rem;
  max-width: 640px;
  margin: 22px auto 0;
}

.service-block {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 50px;
  padding: 60px 0;
  border-top: 1px solid var(--border);
}
.service-block:first-of-type { border-top: none; }
.service-side .card-icon { margin-bottom: 18px; }
.service-side h2 { font-size: 1.7rem; margin-bottom: 12px; }
.service-side .card-note { font-size: 0.95rem; }
.service-body p { color: var(--muted); margin-bottom: 16px; }
.service-body .partner-badge { margin: 20px 0; }
.check-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 22px 0 26px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--fg);
  font-weight: 600;
  font-size: 0.98rem;
}
.check-list svg {
  width: 18px; height: 18px;
  color: var(--accent-soft);
  flex-shrink: 0;
  margin-top: 3px;
}
.check-list a,
.media-split a,
.card p a,
.approche-right a:not(.card-link) {
  color: var(--accent-soft);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.check-list a:hover,
.media-split a:hover,
.card p a:hover,
.approche-right a:not(.card-link):hover { color: var(--fg); }

.cta-band {
  border-top: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(84, 0, 115, 0.3), var(--bg-deep) 65%);
  padding: 70px 0;
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p { color: var(--muted); margin-top: 8px; }

.mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 50px;
}

.section-link { text-align: center; margin-top: 44px; }

.form-card {
  max-width: 780px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 50px rgba(182, 0, 250, 0.08);
}
.form-card iframe { display: block; background: #fff; }
.form-card-wide { max-width: 1020px; }
/* Page contact : sur mobile, le calendrier intégré cède sa place à un bouton
   qui ouvre la réservation en plein écran */
.calendrier-mobile { display: none; text-align: center; padding: 10px 0 4px; }
.calendrier-mobile p { color: var(--muted); margin-bottom: 20px; }
@media (max-width: 720px) {
  #calendrier .form-card { display: none; }
  .calendrier-mobile { display: block; }
}

/* Fil d'Ariane */
.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb .sep { color: var(--accent-soft); }
.breadcrumb [aria-current] { color: var(--accent-soft); }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s ease;
}
.faq-item:hover, .faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.05rem; line-height: 1.35; }
.faq-item summary::after {
  content: "+";
  color: var(--accent-soft);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 24px 22px; color: var(--muted); }
.faq-body a { color: var(--accent-soft); font-weight: 700; }

/* Étapes numérotées */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.step-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 1000;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
@media (max-width: 1024px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .steps-grid { grid-template-columns: 1fr; } }

.contact-socials {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}
.contact-socials a {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}
.contact-socials a:hover { color: var(--fg); border-color: var(--border-strong); transform: translateY(-3px); }
.contact-socials svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  .mini-cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .service-block { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .page-hero { padding: calc(140px + env(safe-area-inset-top, 0px)) 0 60px; }
  .cta-band-inner { flex-direction: column; text-align: center; }
}

/* ---------- Blog ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.35s var(--ease), border-color 0.35s ease, background 0.35s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-card h3 { color: var(--fg); font-size: 1.12rem; }
.blog-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.blog-card .blog-lire {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-weight: 800;
  font-size: 0.92rem;
  padding-top: 6px;
}
.blog-card:hover .blog-lire { color: var(--accent-soft); }
.blog-card .blog-lire svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.blog-card:hover .blog-lire svg { transform: translateX(5px); }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; } }

/* Page article */
.article-hero-img {
  max-width: 900px;
  margin: 0 auto 50px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.article-hero-img img { width: 100%; display: block; }
.article-body { max-width: 780px; margin: 0 auto; }
.article-body h2 { font-size: 1.4rem; margin: 40px 0 14px; }
.article-body h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.article-body p { color: var(--muted); margin-bottom: 16px; }
.article-body li { color: var(--muted); }
.article-body ul, .article-body ol { margin: 14px 0 20px 24px; display: grid; gap: 8px; }
.article-body strong { color: var(--fg); }
.article-body a {
  color: var(--accent-soft);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body img { border-radius: var(--radius-sm); margin: 20px 0; max-width: 100%; height: auto; }
.article-retour {
  text-align: center;
  margin-top: 54px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Bannière de témoins (Loi 25) ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: rgba(12, 7, 18, 0.96);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.cookie-banner.visible { opacity: 1; transform: none; }
.cookie-banner p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.cookie-banner a {
  color: var(--accent-soft);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.footer-bottom .cookie-manage {
  color: rgba(179, 168, 194, 0.65);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom .cookie-manage:hover { color: var(--fg); }
@media (max-width: 720px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
  .cookie-actions { justify-content: center; }
}

/* ---------- Page politique de confidentialité ---------- */
.legal-content { max-width: 780px; margin: 0 auto; }
.legal-content h2 { font-size: 1.45rem; margin: 44px 0 14px; }
.legal-content p, .legal-content li { color: var(--muted); }
.legal-content ul { margin: 12px 0 12px 22px; display: grid; gap: 8px; }
.legal-content a { color: var(--accent-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-date { font-size: 0.88rem; color: rgba(179, 168, 194, 0.65); margin-top: 10px; }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d-1 { transition-delay: 0.1s; }
.d-2 { transition-delay: 0.2s; }
.d-3 { transition-delay: 0.3s; }
.d-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .orb { animation: none; }
  .stat strong { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .card-feature { grid-row: auto; }
  .piliers-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .approche-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .section { padding: 80px 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav { background: rgba(8, 4, 12, 0.72); backdrop-filter: blur(18px); border-bottom-color: var(--border); }
  .services-grid { grid-template-columns: 1fr; }
  .piliers-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat { padding: 24px 20px; }
  .stat strong { font-size: 2rem; }
  .hero { padding: calc(130px + env(safe-area-inset-top, 0px)) 0 70px; }
  /* Colonne alignée : tous les crochets partagent le même bord gauche,
     le bloc reste centré dans la page */
  .hero-badges { flex-direction: column; align-items: flex-start; width: fit-content; margin-left: auto; margin-right: auto; gap: 14px; }
  .cta-card { padding: 60px 24px; }
  /* Plus d'air entre le paragraphe d'approche et la citation */
  .quote-card { margin-top: 48px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }
  /* Mobile : 3 avis suffisent, la section devient trop longue sinon */
  .reviews-grid .review-card:nth-child(n + 4) { display: none; }
}