/* ========================================
   AZURIAVET — Design System v2
   Style: Trust & Authority SaaS
   Fonts: Fraunces (titres) + Archivo (texte) — DA v2
   ======================================== */

/* ─── DESIGN TOKENS ─────────────────────── */
:root {
  /* Legacy aliases (secondary pages) */
  --gray-100:  #F4EFEA;
  --gray-200:  #E8E0D7;
  --gray-500:  #6B7B82;
  --gray-700:  #3E555D;
  --blue-pale: #F2E4DA;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 4px 16px rgba(30,49,56,.08);
  --shadow-md-old: 0 8px 40px rgba(30,49,56,.13);
  --transition: 0.22s ease;
  /* Brand */
  --navy:        #2A4149;
  --navy-mid:    #22363D;
  --navy-muted:  #3A5761;
  --blue:        #8F5540;
  --blue-vivid:  #B97457;
  --blue-light:  #C78C6C;
  --cyan:        #C78C6C;
  --white:       #ffffff;

  /* Surface */
  --bg:          #F4EFEA;
  --surface:     #ffffff;
  --surface-2:   #EDE6DE;

  /* Text */
  --text-900:    #2B424A;
  --text-600:    #6B7B82;
  --text-400:    #9DAAB0;

  /* Borders */
  --border:      #E8E0D7;
  --border-mid:  #D6CABD;

  /* Semantic */
  --success:     #059669;
  --warning:     #d97706;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-mid:     250ms;
  --dur-slow:    400ms;

  /* Spacing (8px grid) */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --r-sm:   8px;  --r-md:   12px; --r-lg:   16px;
  --r-xl:   24px; --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(30,49,56,.06), 0 1px 2px rgba(30,49,56,.04);
  --shadow-md:  0 4px 16px rgba(30,49,56,.08), 0 2px 6px rgba(30,49,56,.05);
  --shadow-lg:  0 12px 40px rgba(30,49,56,.12), 0 4px 12px rgba(30,49,56,.07);
  --shadow-xl:  0 24px 64px rgba(30,49,56,.15), 0 8px 24px rgba(30,49,56,.08);
  --shadow-glow:0 0 0 1px rgba(199,140,108,.25), 0 8px 32px rgba(199,140,108,.2);
  --shadow-glow-lg: 0 0 0 1px rgba(42,65,73,.3), 0 16px 48px rgba(42,65,73,.25);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--navy) 0%, #22363D 50%, #3A5761 100%);
  --grad-hero:    radial-gradient(ellipse 150% 80% at 50% -5%,  #3A5761 0%, #2F4852 28%, transparent 58%),
                  radial-gradient(ellipse 70%  50% at 90% 10%,  rgba(199,140,108,.22) 0%, transparent 50%),
                  radial-gradient(ellipse 60%  40% at 10% 80%,  rgba(42,65,73,.35) 0%, transparent 50%),
                  linear-gradient(170deg, #2A4149 0%, #24393F 45%, #2A4149 100%);
  --grad-blue:    linear-gradient(135deg, #2A4149, #3A5761);
  --grad-text:    linear-gradient(135deg, #C78C6C 0%, #DFAE8E 100%);
  --grad-surface: linear-gradient(180deg, #F4EFEA 0%, #ffffff 100%);
}

/* ─── RESET & BASE ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }
input, select, textarea, button { font: inherit; }

/* ─── TYPOGRAPHY ────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: 'Archivo', sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-900);
  font-weight: 700;
}

/* DA v2 : le serif (Fraunces) est réservé à h1/h2 — les titres porteurs.
   h3/h4/h5, labels et boutons restent en Archivo : un serif à 1.1rem dans une
   carte alourdit la lecture et brouille la hiérarchie. */
h1, h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 600;
}
h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p { line-height: 1.7; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: 'Archivo', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.eyebrow--dark { color: var(--blue); }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-label {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); font-family: 'Archivo', sans-serif;
}

/* ─── LAYOUT ─────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); }
.container--narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--sp-6); }
section { padding: var(--sp-24) 0; }

/* ─── BUTTONS ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 13px 24px;
  border-radius: var(--r-full);
  font-family: 'Archivo', sans-serif;
  font-size: .9rem; font-weight: 600; letter-spacing: -.01em;
  border: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out);
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,0);
  transition: background var(--dur-fast);
}
.btn:hover::after { background: rgba(255,255,255,.07); }
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--grad-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(42,65,73,.3), 0 4px 16px rgba(42,65,73,.25), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(42,65,73,.3), 0 8px 24px rgba(42,65,73,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-ghost {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--border-mid);
}
.btn-outline:hover {
  border-color: var(--blue);
  background: rgba(199,140,108,.05);
  transform: translateY(-1px);
}
.btn-white {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-md);
}
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-lg { padding: 15px 32px; font-size: .975rem; }
.btn-xl { padding: 17px 36px; font-size: 1rem; }
.btn-icon { padding: 11px; border-radius: var(--r-md); }

/* Arrow icon inside buttons */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── BADGE BÊTA ─────────────────────────── */
.badge-beta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-family: 'Archivo', sans-serif;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(199,140,108,.1);
  color: #C78C6C;
  border: 1px solid rgba(199,140,108,.2);
}
.badge-beta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #C78C6C;
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(199,140,108,.4); }
  50% { opacity: .7; transform: scale(.85); box-shadow: 0 0 0 4px rgba(199,140,108,0); }
}
.badge-beta--light {
  background: rgba(42,65,73,.1);
  color: var(--blue);
  border-color: rgba(42,65,73,.2);
}
.badge-beta--light .dot { background: var(--blue); animation: pulse-dot-blue 2s ease infinite; }
@keyframes pulse-dot-blue {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(42,65,73,.4); }
  50% { box-shadow: 0 0 0 4px rgba(42,65,73,0); }
}

/* ─── NAV ────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  overflow: hidden;
  /* Le dégradé tombait à 16 % d'opacité en son milieu — exactement sous les
     liens. La barre laissait donc passer ce qu'il y avait derrière : la page
     claire en haut de document (contraste mesuré 1,79), le héros sombre une
     fois défilé (8,74). D'où une barre lisible seulement après défilement.
     Le dégradé conserve sa nuance chaude au centre, mais ne descend plus sous
     88 % d'opacité. */
  background: linear-gradient(135deg,
    rgba(26,42,48,.94) 0%,
    rgba(58,62,60,.89) 50%,
    rgba(26,42,48,.93) 100%
  );
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 8px 32px rgba(30,49,56,.22);
  transition: background var(--dur-mid), box-shadow var(--dur-mid);
}
/* Top half refraction highlight */
.nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
/* Moving glint */
.nav::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: skewX(-18deg);
  animation: glass-glint 9s ease-in-out infinite 2s;
  pointer-events: none; z-index: 0;
}
.nav.scrolled {
  background: linear-gradient(135deg,
    rgba(22,37,42,.97) 0%,
    rgba(50,56,55,.94) 50%,
    rgba(22,37,42,.96) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 12px 40px rgba(30,49,56,.3);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: var(--sp-8);
  position: relative; z-index: 1;
}
.nav__logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.nav__logo img {
  height: 44px; width: auto;
  transition: transform var(--dur-mid) var(--ease-out);
  filter: brightness(0) invert(1);
}
.nav__logo:hover img { transform: scale(1.04); }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  padding: 7px 14px; border-radius: var(--r-md);
  font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.78);
  transition: color var(--dur-fast), background var(--dur-fast);
  position: relative; z-index: 1;
}
.nav__links a:hover, .nav__links a.active {
  color: #fff; background: rgba(255,255,255,.1);
}
.nav__actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.nav__burger { display: none; background: none; border: none; padding: var(--sp-2); border-radius: var(--r-sm); }
.nav__burger svg { width: 22px; height: 22px; color: rgba(255,255,255,.85); }

/* ─── MOBILE MENU ────────────────────────── */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--navy);
  flex-direction: column;
  padding: var(--sp-6);
}
.mobile-menu.open { display: flex; }
.mobile-menu__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-8); }
.mobile-menu__logo img { height: 28px; filter: brightness(0) invert(1); }
.mobile-menu__close {
  background: rgba(255,255,255,.1); border: none; color: #fff;
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu__close svg { width: 20px; height: 20px; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mobile-menu__links a {
  color: rgba(255,255,255,.8); font-size: 1.1rem; font-weight: 500;
  padding: var(--sp-4) var(--sp-3); border-radius: var(--r-md);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.mobile-menu__links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.mobile-menu__footer { padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.1); }
.mobile-menu__footer .btn { width: 100%; }

/* ─── HERO ───────────────────────────────── */
.hero {
  background: var(--grad-hero);
  color: #fff;
  padding: 100px 0 0;
  overflow: hidden;
  position: relative;
  min-height: 90vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* Dot grid pattern */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.hero__inner {
  display: grid; grid-template-columns: 1fr 2fr;
  align-items: flex-start; gap: 16px;
  position: relative; z-index: 1;
}
.hero__content { padding-bottom: 80px; }
.hero__badge-row { margin-bottom: var(--sp-6); }
.hero__title { color: #fff; margin: 0 0 var(--sp-6); }
.hero__title em { font-style: normal; }
/* Override typography defaults inside hero */
.hero h1, .hero h2 { color: #fff; }

/* ── Liquid Glass logo in hero ─────────────── */
.hero__logo-glass {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: 10px 20px 10px 10px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  cursor: default;
  /* Glass layers */
  background: linear-gradient(135deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.05) 45%,
    rgba(255,255,255,.09) 100%
  );
  backdrop-filter: blur(24px) saturate(1.8) brightness(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.12);
  border: 1px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.32);
  border-left-color: rgba(255,255,255,.22);
  box-shadow:
    0 8px 32px rgba(0,0,0,.22),
    0 2px 8px rgba(0,0,0,.12),
    inset 0 1.5px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.12),
    inset 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(199,140,108,.12);
  transition: box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-out);
}
.hero__logo-glass:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(0,0,0,.28),
    0 4px 12px rgba(0,0,0,.15),
    inset 0 1.5px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 0 0 1px rgba(199,140,108,.2);
}
/* Refraction shimmer — top half highlight */
.hero__logo-glass::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
/* Moving glint */
.hero__logo-glass::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: skewX(-20deg);
  animation: glass-glint 5s ease-in-out infinite 1s;
  pointer-events: none;
}
@keyframes glass-glint {
  0%, 70%, 100% { left: -60%; }
  40%           { left: 130%; }
}
.hero__logo-glass img {
  height: 48px; width: auto; position: relative; z-index: 1;
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.3));
}
.hero__logo-glass-label {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
}
.hero__logo-glass-name {
  font-family: 'Archivo', sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  line-height: 1;
}
.hero__logo-glass-tagline {
  font-family: 'Archivo', sans-serif;
  font-size: .78rem; font-weight: 500;
  color: rgba(255,255,255,.85);
  line-height: 1.3;
  margin-top: 3px;
}
.hero__subtitle {
  font-size: 1.1rem; color: rgba(255,255,255,.72);
  max-width: 460px; line-height: 1.75;
  margin-bottom: var(--sp-8);
}
.hero__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.hero__trust {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5);
}
.trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; color: rgba(255,255,255,.55);
  font-family: 'Archivo', sans-serif;
}
.trust-item svg { width: 14px; height: 14px; opacity: .7; flex-shrink: 0; }
.trust-divider { width: 1px; height: 14px; background: rgba(255,255,255,.15); }

/* Hero visual */
.hero__visual {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 58px;
}
.hero__visual-glow {
  position: absolute; top: 10%; right: 0;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(199,140,108,.2) 0%, transparent 70%);
  filter: blur(50px); pointer-events: none;
}

/* iPad */
/* Troisième surface du héros : AzuriaVet Cloud dans le navigateur.
   Le sous-titre annonce « iPad et iPhone sur le terrain, web app à la clinique »
   et la ligne de garanties dit « iPad, iPhone & Web » — le visuel n'en montrait
   que deux. Placé en absolu (le héros est en flex : un troisième élément en flux
   écraserait l'iPad, qui est en flex:1), derrière l'iPad, dans l'espace libre du
   haut. Même perspective que l'iPad, accentuée, pour rester dans le même plan. */
.device-browser {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 64%; max-width: 620px;
  display: flex; flex-direction: column; gap: 9px;
  transform: perspective(1200px) rotateY(-9deg) rotateX(4deg);
  transform-origin: center bottom;
  /* La capture est une vraie fenêtre Safari, détourée avec son canal alpha et
     son ombre système : pas de cadre à dessiner, et une ombre portée légère
     seulement, sinon elle se cumule à celle de l'image. */
  filter: drop-shadow(0 20px 34px rgba(30,49,56,.42));
  transition: transform var(--dur-slow) var(--ease-out);
}
.device-browser img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) {
  /* En dessous, le héros se resserre : la fenêtre chevaucherait le texte. */
  .device-browser { display: none; }
}

.device-ipad {
  position: relative; z-index: 2;
  flex: 1; max-width: 900px;
  display: flex; flex-direction: column; gap: 9px;
  transform: perspective(1200px) rotateY(-5deg) rotateX(3deg);
  transform-origin: center bottom;
  filter: drop-shadow(0 32px 48px rgba(30,49,56,.55)) drop-shadow(0 8px 16px rgba(30,49,56,.35));
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
}

.device-ipad__shell {
  background: linear-gradient(160deg, #3A5761 0%, #22363D 100%);
  border-radius: 28px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.3);
  overflow: hidden;
}
.device-ipad__screen {
  width: 100%; height: auto;
  display: block;
  border-radius: 16px;
  transition: transform 0.5s var(--ease-out);
  transform-origin: center center;
}


/* iPhone — côte à côte, légèrement surélevé */
.device-iphone {
  position: relative; z-index: 3;
  width: 195px;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 9px;
  margin-bottom: 64px;
  transform: perspective(800px) rotateY(6deg) rotateX(2deg);
  transform-origin: center bottom;
  filter: drop-shadow(0 20px 36px rgba(30,49,56,.5));
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
}

.device-iphone__shell {
  background: linear-gradient(160deg, #3A5761 0%, #22363D 100%);
  border-radius: 34px; padding: 9px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.3);
}
.device-iphone__screen {
  border-radius: 26px; overflow: hidden;
}
.device-iphone__screen img {
  width: 100%; display: block;
  transition: transform 0.5s var(--ease-out);
  transform-origin: center center;
}



/* Légende de chaque appareil : sans elle, la fenêtre du navigateur et l'écran
   de l'iPad se lisent comme le même écran — ils partagent la barre latérale
   Azuria. Le nom de la surface est en sable lisible (le #C78C6C tomberait à
   3,79 sur le bleu, insuffisant pour du petit texte), l'usage en retrait. */
.device-legende {
  align-self: flex-start;
  font-family: 'Archivo', sans-serif;
  font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,239,234,.55);
  white-space: nowrap;
  /* Fond sombre indispensable : la légende de l'iPad se superpose à la fenêtre
     du navigateur, claire. Sans lui, texte clair sur fond clair. */
  background: rgba(24,38,44,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px 4px 9px;
  border-radius: 4px;
  border: 1px solid rgba(244,239,234,.09);
}
.device-legende b {
  font-weight: 600;
  color: rgba(244,239,234,.9);
  margin-left: .5em;
}
@media (max-width: 1024px) { .device-legende { display: none; } }

/* ─── SURVOL DES APPAREILS : lire l'interface en détail ─────────────────────
   Au survol, l'appareil se redresse (la perspective s'annule) et grandit. Le
   redressement compte autant que l'échelle : une capture inclinée reste
   difficile à lire même agrandie.
   L'origine de transformation diffère par appareil pour que chacun grandisse
   vers l'espace libre — le héros est en `overflow: hidden`, tout débordement
   serait coupé. La fenêtre navigateur, la plus petite et la plus en retrait,
   grandit le plus.
   Sous `(hover: hover)` : sur écran tactile il n'y a pas de survol, et l'état
   resterait collé après un appui. */
@media (hover: hover) {
  /* L'agrandissement lui-même est piloté par initDeviceZoom() dans js/main.js :
     la timeline d'ouverture GSAP pose un `transform` inline sur ces éléments,
     qu'aucune règle de feuille de style ne peut surcharger. On ne garde ici que
     l'affordance au curseur. */
  .device-ipad,
  .device-iphone,
  .device-browser { cursor: zoom-in; }
}

@media (prefers-reduced-motion: reduce) {
  .device-ipad, .device-iphone, .device-browser { transition: none; }
}

/* ─── STATS ROW ──────────────────────────── */
.stats-row {
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--sp-8) 0;
  position: relative; z-index: 1;
}
.stats-row__inner {
  display: flex; align-items: center; justify-content: space-around;
  gap: var(--sp-6); flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-item__value {
  font-family: 'Archivo', sans-serif;
  font-size: 2rem; font-weight: 800;
  color: #fff; line-height: 1;
  margin-bottom: 4px;
}
.stat-item__value span { color: #C78C6C; }
.stat-item__label {
  font-size: .8rem; color: rgba(255,255,255,.5);
  font-family: 'Archivo', sans-serif;
  text-transform: uppercase; letter-spacing: .07em;
}
.stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,.1); }

/* ─── SECTION HEADER ─────────────────────── */
.section-header { margin-bottom: var(--sp-16); }
.section-header--center { text-align: center; }
.section-header--center p { margin: 0 auto; }
.section-header h2 { margin: var(--sp-3) 0 var(--sp-4); }
.section-header p { color: var(--text-600); max-width: 520px; font-size: 1.05rem; }

/* ─── BENEFITS ───────────────────────────── */
.benefits { background: var(--white); }
.benefits__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.benefit-card {
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative; overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid);
}
.benefit-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-blue);
  opacity: 0; transition: opacity var(--dur-mid);
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(199,140,108,.3);
}
.benefit-card:hover::before { opacity: .03; }
.benefit-card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--bg) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  position: relative; z-index: 1;
}
.benefit-card__icon svg { width: 22px; height: 22px; color: var(--blue); flex-shrink: 0; }
.benefit-card h3 { font-size: 1rem; margin-bottom: var(--sp-2); position: relative; z-index: 1; }
.benefit-card p { font-size: .875rem; color: var(--text-600); line-height: 1.65; position: relative; z-index: 1; }

/* ─── FEATURES BENTO ─────────────────────── */
.features-bento { background: var(--bg); }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--sp-5);
}
.bento-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  padding: var(--sp-8);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-mid);
}
.bento-card--wide { grid-column: span 2; }
.bento-card--tall { grid-row: span 2; }
.bento-card--dark {
  background: linear-gradient(135deg, var(--navy) 0%, #22363D 100%);
  border-color: rgba(255,255,255,.08);
}
.bento-card--dark h3, .bento-card--dark p { color: #fff; }
.bento-card--dark p { color: rgba(255,255,255,.65); }
.bento-card--dark .bento-card__icon {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.1);
}
.bento-card--dark .bento-card__icon svg { color: #C78C6C; }
.bento-card__icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
}
.bento-card__icon svg { width: 20px; height: 20px; color: var(--blue); }
.bento-card h3 { margin-bottom: var(--sp-2); font-size: 1.05rem; }
.bento-card p { font-size: .875rem; color: var(--text-600); line-height: 1.65; }
.bento-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
/* Carte d'une fonctionnalité encore en développement : elle doit se distinguer
   nettement de l'existant, sinon la page promet ce qui n'est pas livré. Trait
   discontinu et fond légèrement teinté d'argile. */
.bento-card--futur {
  border-style: dashed;
  border-color: rgba(185,116,87,.42);
  background: linear-gradient(180deg, rgba(185,116,87,.05) 0%, var(--surface) 60%);
}
.badge-futur {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-bottom: var(--sp-3);
  padding: 4px 11px;
  border-radius: var(--r-full);
  border: 1px solid rgba(185,116,87,.35);
  background: rgba(185,116,87,.1);
  color: #8F5540;
  font-family: 'Archivo', sans-serif;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.badge-futur::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-vivid);
}

.tag {
  padding: 4px 12px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600;
  font-family: 'Archivo', sans-serif; letter-spacing: .04em;
  background: rgba(199,140,108,.08);
  color: var(--blue);
  border: 1px solid rgba(199,140,108,.15);
}
.tag--white {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.15);
}
.nf-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--r-full);
  background: rgba(5,150,105,.15);
  color: #34d399;
  border: 1px solid rgba(5,150,105,.25);
  font-family: 'Archivo', sans-serif; font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  margin-top: var(--sp-4);
}
.nf-badge svg { width: 14px; height: 14px; }

/* ─── DEVICE SHOWCASE ────────────────────── */
.showcase { background: var(--white); overflow: hidden; }
.showcase__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: var(--sp-16);
}
.showcase__inner--reverse { direction: rtl; }
.showcase__inner--reverse > * { direction: ltr; }
.showcase__content .eyebrow { margin-bottom: var(--sp-3); }
.showcase__content h2 { margin-bottom: var(--sp-4); }
.showcase__content p { color: var(--text-600); margin-bottom: var(--sp-6); font-size: 1.05rem; line-height: 1.75; }
.feature-checklist { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.check-item { display: flex; align-items: center; gap: var(--sp-3); }
.check-item svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; }
.check-item span { font-size: .9rem; color: var(--text-600); }
.showcase__device {
  position: relative; display: flex; justify-content: center; align-items: center;
}
.showcase__device-bg {
  position: absolute;
  width: 80%; height: 80%;
  background: radial-gradient(ellipse, rgba(199,140,108,.12) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(30px);
}
.showcase__device-frame {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, #3A5761 0%, #22363D 100%);
  border-radius: 24px; padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(199,140,108,.15);
  max-width: 480px; width: 100%;
}
.showcase__device-frame img { border-radius: 14px; width: 100%; }
.showcase__device-phone {
  position: absolute; bottom: -20px; right: -20px; z-index: 2;
  background: linear-gradient(160deg, #3A5761 0%, #22363D 100%);
  border-radius: 28px; padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-lg);
  width: 140px;
}
.showcase__device-phone img { border-radius: 22px; width: 100%; }

/* Troisième surface de la composition : AzuriaVet Cloud dans le navigateur.
   La section promet « iPad, iPhone et le web » — le visuel ne montrait que deux
   appareils. Placée derrière l'iPad (z-index 0) en haut à gauche, pour former un
   triangle avec le téléphone en bas à droite. */
.showcase__device-browser {
  position: absolute; top: -30px; left: -70px; z-index: 0;
  width: 290px;
  filter: drop-shadow(0 16px 28px rgba(30,49,56,.4));
}
.showcase__device-browser img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  /* Sur mobile la composition se resserre : on garde l'iPad et le téléphone,
     la fenêtre navigateur déborderait. */
  .showcase__device-browser { display: none; }
}

/* ─── TRUST / REASSURANCE ────────────────── */
.reassurance { background: var(--navy); position: relative; overflow: hidden; }
.reassurance::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.reassurance::after {
  content: ''; position: absolute;
  top: -50%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(199,140,108,.15) 0%, transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.reassurance .section-header h2 { color: #fff; }
.reassurance .section-header p { color: rgba(255,255,255,.6); }
.reassurance__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5); position: relative; z-index: 1;
}
.trust-card {
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
  text-align: center;
  transition: background var(--dur-mid), border-color var(--dur-mid), transform var(--dur-mid) var(--ease-out);
}
.trust-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(199,140,108,.3);
  transform: translateY(-3px);
}
.trust-card__icon {
  width: 52px; height: 52px; border-radius: var(--r-lg);
  background: rgba(199,140,108,.12);
  border: 1px solid rgba(199,140,108,.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
}
.trust-card__icon svg { width: 24px; height: 24px; color: #C78C6C; }
.trust-card h3 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-2); }
.trust-card p { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.6; }

/* ─── WHY BETA ────────────────────────────── */
.why-beta { background: var(--white); }
.why-beta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); align-items: center; }
.perk-list { display: flex; flex-direction: column; gap: var(--sp-5); margin: var(--sp-8) 0; }
.perk {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-mid), box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-out);
}
.perk:hover { border-color: rgba(199,140,108,.3); box-shadow: var(--shadow-md); transform: translateX(4px); }
.perk__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--grad-blue);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(42,65,73,.3);
}
.perk__icon svg { width: 18px; height: 18px; color: #fff; }
.perk h4 { font-size: .925rem; margin-bottom: 3px; }
.perk p { font-size: .85rem; color: var(--text-600); }
.why-beta__visual {
  position: relative; display: flex; justify-content: center; align-items: center;
}
.why-beta__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 380px;
  position: relative; z-index: 2;
}
.why-beta__card-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.why-beta__card-header img { height: 28px; }
.why-beta__card h4 { font-size: .875rem; color: var(--text-600); }
.why-beta__device-frame {
  background: linear-gradient(160deg, #3A5761, #22363D);
  border-radius: var(--r-lg); padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp-5);
}
.why-beta__device-frame img { border-radius: 10px; width: 100%; }
.why-beta__hint { font-size: .8rem; color: var(--text-400); text-align: center; font-family: 'Archivo', sans-serif; }
.why-beta__bg {
  position: absolute; width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(199,140,108,.07) 0%, transparent 70%);
  filter: blur(30px);
}

/* ─── CTA FINAL ──────────────────────────── */
.cta-final {
  background: var(--grad-hero);
  color: #fff; text-align: center;
  padding: var(--sp-24) 0;
  position: relative; overflow: hidden;
}
.cta-final::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.cta-final::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(199,140,108,.2) 0%, transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.cta-final__inner { position: relative; z-index: 1; }
.cta-final h2 { color: #fff; margin: var(--sp-4) 0 var(--sp-4); max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-final p { color: rgba(255,255,255,.65); font-size: 1.1rem; margin-bottom: var(--sp-10); max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-final__actions { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

/* ─── FOOTER ─────────────────────────────── */
.footer { background: var(--navy); color: rgba(255,255,255,.55); padding: var(--sp-16) 0 var(--sp-8); }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-12); padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(255,255,255,.07); }
.footer__brand img { height: 40px; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); opacity: .85; }
.footer__brand p { font-size: .875rem; color: rgba(255,255,255,.45); line-height: 1.7; max-width: 260px; }
.footer__brand-tagline { margin-top: var(--sp-3); font-size: .75rem; color: rgba(255,255,255,.3); letter-spacing: .05em; font-family: 'Archivo', sans-serif; }
.footer__col h5 {
  color: rgba(255,255,255,.9); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--sp-5); font-family: 'Archivo', sans-serif;
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a { font-size: .875rem; color: rgba(255,255,255,.45); transition: color var(--dur-fast); }
.footer__col a:hover { color: rgba(255,255,255,.9); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-8);
  font-size: .825rem;
}
.footer__bottom .badge-beta { background: rgba(199,140,108,.12); border-color: rgba(199,140,108,.2); }
.footer__bottom a { transition: color var(--dur-fast); }
.footer__bottom a:hover { color: rgba(255,255,255,.9); }

/* ─── FORM ───────────────────────────────── */
.form-section { background: var(--bg); }
.form-card {
  max-width: 680px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-12);
  box-shadow: var(--shadow-xl);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-group { margin-bottom: var(--sp-5); }
.form-group--full { grid-column: span 2; }
label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--text-900); margin-bottom: var(--sp-2);
  font-family: 'Archivo', sans-serif;
}
label .opt { font-weight: 400; color: var(--text-400); }
input, select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: .9rem; color: var(--text-900);
  outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(199,140,108,.12);
}
input::placeholder, textarea::placeholder { color: var(--text-400); }
textarea { resize: vertical; min-height: 96px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px;
}
.honeypot { display: none !important; }
.form-submit { margin-top: var(--sp-6); }
.form-submit .btn { width: 100%; padding: 15px; font-size: .95rem; }
.form-note { font-size: .78rem; color: var(--text-400); text-align: center; margin-top: var(--sp-3); line-height: 1.5; }
.form-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.form-success {
  display: none; text-align: center; padding: var(--sp-8);
  background: rgba(5,150,105,.06); border-radius: var(--r-lg);
  border: 1px solid rgba(5,150,105,.2);
}
.form-success__icon { font-size: 2.5rem; margin-bottom: var(--sp-3); }
.form-success h3 { color: #065f46; margin-bottom: var(--sp-2); }
.form-success p { color: #047857; font-size: .9rem; }

/* ─── INNER PAGES ────────────────────────── */
.page-hero {
  background: var(--grad-hero);
  padding: var(--sp-20) 0 var(--sp-16);
  color: #fff; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin: var(--sp-3) 0 var(--sp-4); }
.page-hero p { color: rgba(255,255,255,.7); font-size: 1.1rem; max-width: 560px; }

/* Features full page */
.feature-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-16); align-items: center;
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--border);
}
.feature-block:last-child { border-bottom: none; }
.feature-block--reverse { direction: rtl; }
.feature-block--reverse > * { direction: ltr; }
.feature-block__content h3 { font-size: 1.6rem; margin: var(--sp-3) 0 var(--sp-4); }
.feature-block__content p { color: var(--text-600); line-height: 1.75; margin-bottom: var(--sp-5); }

/* About */
.about-content { max-width: 720px; margin: 0 auto; }
.about-content h2 { margin: var(--sp-10) 0 var(--sp-4); }
.about-content p { color: var(--text-600); line-height: 1.8; margin-bottom: var(--sp-4); font-size: 1.05rem; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-12); }
.value-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6);
  text-align: center; transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value-card__icon {
  width: 52px; height: 52px; border-radius: var(--r-lg);
  background: var(--grad-blue); display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-4); box-shadow: 0 4px 16px rgba(42,65,73,.25);
}
.value-card__icon svg { width: 24px; height: 24px; color: #fff; }
.value-card h4 { margin-bottom: var(--sp-2); }
.value-card p { font-size: .875rem; color: var(--text-600); }

/* Legal */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h2 { font-size: 1.4rem; margin: var(--sp-10) 0 var(--sp-3); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-3); }
.legal-content h3 { font-size: 1rem; margin: var(--sp-6) 0 var(--sp-2); }
.legal-content p { color: var(--text-600); line-height: 1.8; margin-bottom: var(--sp-4); font-size: .95rem; }
.legal-content ul { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.legal-content ul li { color: var(--text-600); line-height: 1.8; list-style: disc; font-size: .95rem; }
.legal-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ─── ANIMATIONS ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .fade-up {
    opacity: 0; transform: translateY(20px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  .reveal.visible, .fade-up.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1, .fade-up[style*="delay:.08"] { transition-delay: .08s; }
  .reveal-delay-2, .fade-up[style*="delay:.16"] { transition-delay: .16s; }
  .reveal-delay-3, .fade-up[style*="delay:.24"] { transition-delay: .24s; }
  .reveal-delay-4, .fade-up[style*="delay:.32"] { transition-delay: .32s; }
}

/* ─── LEGACY COMPAT ──────────────────────── */
.nav__cta { flex-shrink: 0; }
.benefit-icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--blue-pale); display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; font-size: 1.5rem;
}
.section-header { margin-bottom: var(--sp-16); }
.section-header:not(.section-header--center) h2 { margin: 12px 0 16px; }
.section-header p { color: var(--gray-500); max-width: 520px; font-size: 1.05rem; }
.label { font-family: 'Archivo', sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.device-frame { background:#1a2340; border-radius:24px; padding:12px; box-shadow:var(--shadow-xl); }
.device-frame img { border-radius:14px; width:100%; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:640px){ .form-row { grid-template-columns:1fr; } }
.optional { font-weight:400; color:var(--gray-500); }
.form-submit { text-align:center; margin-top:28px; }
.form-submit .btn { width:100%; justify-content:center; }
.form-note { font-size:.8rem; color:var(--gray-500); margin-top:12px; text-align:center; }
.mobile-menu a { color:rgba(255,255,255,.8); font-size:1.1rem; font-weight:500; padding:var(--sp-4) var(--sp-3); border-radius:var(--r-md); display:block; }
.mobile-menu a:hover { color:#fff; background:rgba(255,255,255,.08); }
.mobile-menu .btn { margin-top:24px; width:100%; justify-content:center; }
.mobile-menu__close { background:rgba(255,255,255,.1); border:none; color:#fff; cursor:pointer; padding:var(--sp-3); font-size:1.2rem; border-radius:var(--r-md); }
.footer__col h4 { color:rgba(255,255,255,.9); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-5); font-family: 'Archivo', sans-serif; }
.perk { cursor:default; }
.features-full { background:var(--white); }
.feature-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ─── RESPONSIVE ─────────────────────────── */
@media (max-width: 1024px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .reassurance__grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card--wide { grid-column: span 2; }
  .bento-card--tall { grid-row: span 1; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { justify-content: center; max-width: 660px; margin: 0 auto; gap: 12px; }
  .device-ipad { transform: none; max-width: 460px; }
  .device-ipad:hover { transform: translateY(-6px) scale(1.01); }
  .device-iphone { width: 148px; margin-bottom: 40px; transform: none; }
  .showcase__inner { grid-template-columns: 1fr; gap: var(--sp-12); }
  .showcase__inner--reverse { direction: ltr; }
  .why-beta__inner { grid-template-columns: 1fr; }
  .feature-block { grid-template-columns: 1fr; gap: var(--sp-8); }
  .feature-block--reverse { direction: ltr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  section { padding: var(--sp-16) 0; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: flex; align-items: center; justify-content: center; }
  .benefits__grid { grid-template-columns: 1fr; }
  .reassurance__grid { grid-template-columns: 1fr 1fr; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card--wide { grid-column: span 1; }
  .hero { min-height: auto; padding: 70px 0 0; }
  .hero__content { padding-bottom: var(--sp-8); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .device-iphone { display: none; }
  .stats-row__inner { gap: var(--sp-8); }
  .stat-divider { display: none; }
  .form-card { padding: var(--sp-8) var(--sp-6); }
  .form-grid { grid-template-columns: 1fr; }
  .form-group--full { grid-column: span 1; }
  .footer__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__bottom { flex-direction: column; text-align: center; }
  .cta-final__actions { flex-direction: column; align-items: center; }
  .cta-final__actions .btn { width: 100%; justify-content: center; max-width: 340px; }
  .values-grid { grid-template-columns: 1fr; }
  .why-beta__card { max-width: 100%; }
}
@media (max-width: 480px) {
  .container { padding: 0 var(--sp-4); }
  .stats-row__inner { flex-direction: column; gap: var(--sp-5); }
  .reassurance__grid { grid-template-columns: 1fr; }
}

/* ========================================
   MOTION SYSTEM
   ======================================== */

/* ─── Word split animation ─────────────── */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.15;
}
.word { display: inline-block; }

/* ─── Scroll progress bar ──────────────── */
#scrollProgress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 999;
  background: var(--grad-blue);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ─── Cursor glow ──────────────────────── */
#cursorGlow {
  position: fixed; top: 0; left: 0;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,140,108,.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: normal;
  will-change: transform;
}

/* ─── Hero mouse blob ──────────────────── */
.hero__blob {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,140,108,.18) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  will-change: transform;
  top: 0; left: 0;
  z-index: 0;
}

/* ─── Marquee ──────────────────────────── */
.marquee {
  overflow: hidden;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  cursor: default;
  user-select: none;
}
.marquee--dark {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.marquee__track {
  display: flex; align-items: center;
  gap: 0; width: max-content;
}
.marquee__item {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-6);
  font-family: 'Archivo', sans-serif;
  font-size: .875rem; font-weight: 500;
  color: var(--text-600);
  white-space: nowrap;
}
.marquee--dark .marquee__item { color: rgba(255,255,255,.5); }
.marquee__item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--blue); opacity: .6; }
.marquee--dark .marquee__item svg { color: #C78C6C; }
.marquee__sep {
  color: var(--border-mid); font-size: 1.2rem; line-height: 1;
  padding: 0 var(--sp-2);
}
.marquee--dark .marquee__sep { color: rgba(255,255,255,.15); }

/* ─── Gradient animated border ─────────── */
@keyframes border-rotate {
  from { --gradient-angle: 0deg; }
  to   { --gradient-angle: 360deg; }
}
@property --gradient-angle {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
.glow-border {
  position: relative;
  isolation: isolate;
}
.glow-border::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from var(--gradient-angle), transparent 30%, var(--blue-light), var(--cyan), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-mid);
  z-index: -1;
  animation: border-rotate 4s linear infinite;
}
.glow-border:hover::before { opacity: 1; }

/* ─── Animated gradient hero title ─────── */
@keyframes grad-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(135deg, #C78C6C, #DFAE8E, #a78bfa, #C78C6C);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: grad-shift 5s ease infinite;
}

/* ─── Floating badge animation ─────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.badge-float { animation: float 3.5s ease-in-out infinite; }

/* ─── Shine sweep on cards ─────────────── */
@keyframes shine {
  0%   { left: -100%; }
  60%, 100% { left: 150%; }
}
.shine-card { position: relative; overflow: hidden; }
.shine-card::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: skewX(-20deg);
  animation: shine 6s ease-in-out infinite;
  pointer-events: none;
}

/* ─── Number glow ──────────────────────── */
.stat-item__value {
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(199,140,108,.4));
}
.stat-item__value--emoji {
  background: none;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 0 12px rgba(199,140,108,.3));
  font-size: 2.2rem;
}
.stat-item__value span {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(56,189,248,.5));
}

/* ─── Noise texture overlay ────────────── */
.noise-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ─── Animated dots grid ───────────────── */
@keyframes pulse-grid {
  0%, 100% { opacity: .06; }
  50%       { opacity: .1; }
}
.hero::before { animation: pulse-grid 4s ease-in-out infinite; }

/* ─── Bento card dark glow ─────────────── */
.bento-card--dark {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.04);
}
.bento-card--dark:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(199,140,108,.3),
              0 16px 48px rgba(30,49,56,.3), 0 0 40px rgba(199,140,108,.1);
}

/* ─── Link hover underline draw ────────── */
.footer__col a { position: relative; }
.footer__col a::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: rgba(255,255,255,.5);
  transition: width var(--dur-mid) var(--ease-out);
}
.footer__col a:hover::after { width: 100%; }

/* ─── Nav link active indicator ────────── */
.nav__links a { position: relative; }
.nav__links a::after {
  content: ''; position: absolute; bottom: 2px; left: 50%;
  width: 0; height: 2px;
  border-radius: 1px;
  background: var(--grad-blue);
  transform: translateX(-50%);
  transition: width var(--dur-mid) var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.active::after { width: 60%; }

/* ─── Perk hover arrow ─────────────────── */
.perk::after {
  content: '→';
  margin-left: auto;
  opacity: 0;
  transform: translateX(-8px);
  font-size: .85rem;
  color: var(--blue);
  transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-out);
  flex-shrink: 0;
  align-self: center;
}
.perk:hover::after { opacity: 1; transform: translateX(0); }

/* ─── Button ripple ────────────────────── */
.btn { position: relative; }

/* ─── Stats row glass ──────────────────── */
.stats-row {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── Reduced motion overrides ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gradient-text { animation: none; }
  .badge-float { animation: none; }
  .shine-card::after { animation: none; }
  #cursorGlow { display: none; }
}

/* ─── SURVOL DES CAPTURES (page Fonctionnalités) ─────────────────────────
   L'agrandissement est piloté par initCaptureZoom() dans js/main.js :
   initReveals() anime les deux colonnes de chaque .feature-block en GSAP et
   leur laisse un `transform` inline, qu'aucune règle de feuille de style ne
   peut surcharger. Le curseur y est posé en JS également, pour ne l'afficher
   que sur les colonnes qui portent réellement une image. */

}