/* =====================================================================
   SpartAI — Design System
   Style : clair & moderne épuré · bleu profond · premium
   ===================================================================== */

/* ---------- Fonts ---------- */
/* Sora (display) + Inter (texte). Fallback système si hors-ligne. */

/* ---------- Tokens ---------- */
:root {
  /* Bleu profond — couleur de marque */
  --navy-950: #060f24;
  --navy-900: #0a1b3d;
  --navy-800: #0f2a5e;
  --navy-700: #163a7d;
  --blue-700: #1b45b0;
  --blue-600: #2258d6;
  --blue-500: #3b74f2;
  --blue-400: #6a9bff;
  --blue-300: #9dbcff;
  --blue-100: #cddcff;
  --sky-50:  #eff4ff;
  --sky-100: #e5eeff;

  /* Neutres */
  --ink:     #0b1220;
  --slate-700: #2e3a4f;
  --slate-600: #475069;
  --slate-500: #6b7488;
  --slate-400: #97a0b3;
  --line:    #e6ebf4;
  --line-soft: #eef2f9;
  --bg:      #ffffff;
  --bg-soft: #f6f9ff;
  --bg-tint: #eef4ff;
  --white:   #ffffff;

  /* Accents fonctionnels */
  --green-500: #17b877;
  --amber-500: #f2a626;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #2258d6 0%, #3b74f2 55%, #6a9bff 100%);
  --grad-deep:  linear-gradient(150deg, #0a1b3d 0%, #123063 60%, #1b45b0 100%);
  --grad-soft:  linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);

  /* Ombres */
  --shadow-xs: 0 1px 2px rgba(10, 27, 61, .06);
  --shadow-sm: 0 4px 14px rgba(10, 27, 61, .07);
  --shadow-md: 0 14px 40px rgba(10, 27, 61, .10);
  --shadow-lg: 0 30px 70px rgba(10, 27, 61, .16);
  --shadow-blue: 0 18px 40px rgba(34, 88, 214, .28);

  /* Rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Layout */
  --container: 1180px;
  /* Hauteur de la barre de navigation. Le panneau mobile s'ouvre juste
     dessous : les deux lisent ce jeton, ils ne peuvent plus se désaccorder. */
  --nav-h: 82px;
  --gutter: clamp(20px, 5vw, 40px);

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--slate-600);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; border-radius: 6px; }

/* ---------- Typographie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.35rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.12rem; letter-spacing: -0.01em; }
p { color: var(--slate-600); }
strong { color: var(--slate-700); font-weight: 600; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body);
  font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad-brand);
}
.eyebrow.center::before { display: none; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--slate-600); line-height: 1.6; }
.muted { color: var(--slate-500); }
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 58px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: 14px 0 16px; }
.bg-soft { background: var(--bg-soft); }
.bg-tint { background: linear-gradient(180deg, #f4f8ff, #eaf1ff); }
.bg-deep { background: var(--grad-deep); color: #cdd9f0; }
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: #fff; }

.grid { display: grid; gap: clamp(18px, 2.5vw, 28px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}

/* ---------- Boutons ---------- */
.btn {
  --btn-py: .92rem; --btn-px: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600; font-size: .98rem; letter-spacing: .005em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 48px rgba(34,88,214,.36); }
.btn-ghost { background: #fff; color: var(--navy-900); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--blue-300), var(--shadow-sm); }
.btn-light { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.btn-light:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.btn-lg { --btn-py: 1.05rem; --btn-px: 1.9rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--blue-600);
}
.link-arrow svg { width: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Badges / chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  background: var(--sky-100); color: var(--blue-700);
  font-weight: 600; font-size: .85rem;
}
.chip svg { width: 15px; height: 15px; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 4px rgba(23,184,119,.18); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s, box-shadow .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
/* La barre porte trois groupes : l'identité, la navigation, les actions.
   Ils ne tenaient pas — au sens propre. Mesuré sur les polices du site :
   il fallait 1120px de contenu pour 1100px utiles. Les liens, qui sont
   des éléments flex, se laissaient donc comprimer, et leurs pastilles se
   touchaient. Ce n'était pas un réglage d'espacement à corriger, c'était
   un budget dépassé.

   Point à ne pas perdre de vue : `.container` est plafonné à 1180px, donc
   **au-delà de 1180px de fenêtre la largeur utile ne bouge plus** (1100px,
   gouttières déduites). Un espacement en `vw` grandirait alors que la
   place disponible reste identique — c'est ainsi qu'on déborde sur grand
   écran. D'où des valeurs fixes ci-dessous, et non fluides.

   Le budget est rendu tenable par trois retraits :
   — le bouton d'appel à l'action prend un gabarit de barre (il héritait
     de celui des boutons de section : 52px de haut dans une barre de 74) ;
   — le sélecteur de langue n'affiche que la langue vers laquelle on bascule,
     au lieu des deux ;
   — dans la barre seulement, le lien vers l'application dit « Dashboard ».
   Reste ~40px de jeu, que `margin-inline: auto` répartit autour des liens.
   --------------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: 1rem; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--navy-900); flex: 0 0 auto; }
.brand__mark { width: 36px; height: 36px; object-fit: contain; }
.about-emblem { width: min(220px, 60%); object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 20px 40px rgba(0,0,0,.4)); }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.34rem; letter-spacing: -.02em; color: var(--navy-900); }
.brand__name b { color: var(--blue-600); font-weight: 800; }

/* Les liens prennent le milieu. Le jeu restant se répartit alors de part
   et d'autre du groupe au lieu de s'accumuler à gauche du logo : c'est ce
   qui sépare pour de bon « où aller » de « quoi faire ». */
.nav__links { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
.nav__links a {
  padding: .6rem .81rem; border-radius: var(--r-pill);
  font-weight: 500; font-size: .94rem; white-space: nowrap; color: var(--slate-600);
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--navy-900); background: var(--sky-50); }
.nav__links a.active { color: var(--blue-700); background: var(--sky-100); }

/* Un filet, pas un ornement : il marque la frontière entre la navigation
   du site et les trois commandes qui n'y mènent pas — la langue, l'espace
   client, la prise de rendez-vous. */
.nav__actions {
  display: flex; align-items: center; gap: .75rem; flex: 0 0 auto;
  padding-left: 1.125rem;
  border-left: 1px solid var(--line);
}
.nav__login {
  display: inline-flex; align-items: center;
  padding: .55rem .25rem; font-weight: 600; font-size: .93rem;
  color: var(--slate-600); white-space: nowrap; transition: color .2s;
}
.nav__login:hover { color: var(--navy-900); }
.nav__actions .btn { --btn-py: .64rem; --btn-px: 1.25rem; font-size: .92rem; }

.lang-toggle {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  overflow: hidden; background: #fff;
}
.lang-toggle button {
  padding: .38rem .62rem; font-weight: 600; font-size: .78rem;
  color: var(--slate-500); transition: color .2s, background .2s;
}
.lang-toggle button:hover { color: var(--navy-900); background: var(--sky-50); }
/* Le bouton de la langue courante est masqué : la commande affiche la
   langue vers laquelle elle bascule, ce qui est ce que l'on veut savoir.
   Elle occupe la moitié de la place, et un lecteur d'écran n'entend plus
   qu'un seul choix — le seul qui ait un effet. */
.lang-toggle button.active { display: none; }

.nav__burger { display: none; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--line); }
.nav__burger span { position: relative; width: 18px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: .3s; }
.nav__burger span::before, .nav__burger span::after { content:""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: .3s; }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }
body.menu-open .nav__burger span { background: transparent; }
body.menu-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav__burger span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px, 7vw, 90px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(28px, 5vw, 60px); align-items: center; }
.hero__title { margin: 20px 0 22px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 30px; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 34px; color: var(--slate-500); font-size: .92rem; }
.hero__trust .t-item { display: inline-flex; align-items: center; gap: .5rem; }
.hero__trust svg { width: 18px; color: var(--blue-500); }

/* Aurora background */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
}
.aurora::before { width: 620px; height: 620px; top: -180px; right: -120px; background: radial-gradient(circle, #cde0ff, transparent 68%); }
.aurora::after { width: 520px; height: 520px; bottom: -220px; left: -140px; background: radial-gradient(circle, #e2ebff, transparent 66%); }
.grid-lines { position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 60% at 60% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 20%, #000 30%, transparent 75%);
  opacity: .7;
}

/* ---------- 3D visual (pur CSS) ---------- */
/* .hero__visual est la boîte de référence des pastilles : le décor la
   remplit entièrement, si bien que leurs pourcentages tombent au même
   endroit qu'avant. Ce détour sert le téléphone, où les pastilles
   sortent du décor pour devenir une liste. */
.hero__visual { position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.scene { position: relative; width: 100%; aspect-ratio: 1 / 1; perspective: 1200px; }
.hero__proof { list-style: none; margin: 0; padding: 0; }
.scene__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d9e6ff, #eef4ff 60%, transparent 72%); filter: blur(6px); }
.orb {
  position: absolute; inset: 12%; border-radius: 32% 68% 60% 40% / 44% 40% 60% 56%;
  background: linear-gradient(150deg, #f0f5ff 0%, #b6cdff 44%, #6f9bff 100%);
  box-shadow: inset 14px 20px 44px rgba(255,255,255,.85), inset -26px -30px 66px rgba(34,88,214,.38), var(--shadow-lg);
  animation: morph 14s ease-in-out infinite;
}
@keyframes morph {
  0%,100% { border-radius: 32% 68% 60% 40% / 44% 40% 60% 56%; transform: rotate(0deg); }
  50% { border-radius: 60% 40% 38% 62% / 56% 60% 40% 44%; transform: rotate(8deg); }
}
.scene__emblem {
  position: absolute; top: 50%; left: 50%; width: 34%;
  transform: translate(-50%, -50%);
  color: var(--navy-900);
  filter: drop-shadow(0 20px 30px rgba(10,27,61,.28));
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translate(-50%, -54%);} 50% { transform: translate(-50%, -46%);} }

.chipfloat {
  position: absolute; display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem .95rem; border-radius: 14px; background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-md); backdrop-filter: blur(6px);
  font-size: .86rem; font-weight: 600; color: var(--navy-900);
  animation: floaty 5.5s ease-in-out infinite;
}
.chipfloat svg { width: 20px; height: 20px; }
.chipfloat .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.chipfloat small { display: block; font-weight: 500; color: var(--slate-500); font-size: .74rem; }
.chipfloat.cf1 { top: 8%; left: -4%; animation-delay: .2s; }
.chipfloat.cf2 { top: 40%; right: -8%; animation-delay: 1.1s; }
/* 16 % et non 6 % : les pastilles héritent du translate(-50%) des
   keyframes « floaty », donc elles sont centrées sur leur ancre et
   débordent de part et d'autre. À 6 %, celle-ci mordait sur la fin du
   paragraphe du hero vers 1000 px de large — texte masqué. */
.chipfloat.cf3 { bottom: 6%; left: 16%; animation-delay: .6s; }
.bg-brand { background: var(--grad-brand); }
.bg-green { background: linear-gradient(135deg,#12a56a,#22c98a); }
.bg-navy { background: var(--grad-deep); }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--sky-100); color: var(--blue-600); margin-bottom: 18px;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .98rem; }

.pillar {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}
.pillar::after { content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--grad-brand); }
.pillar__num { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--blue-500); letter-spacing: .1em; }
.pillar h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 10px 0 14px; }
.feature-list { display: grid; gap: .8rem; margin-top: 20px; }
.feature-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--slate-600); font-size: .98rem; }
.feature-list svg { width: 20px; height: 20px; color: var(--blue-500); flex: none; margin-top: 2px; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 22px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px); transition: box-shadow .3s, border-color .3s;
}
.step:hover { box-shadow: var(--shadow-sm); border-color: var(--blue-300); }
.step__n {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff;
  background: var(--grad-deep);
}
.step h3 { font-size: 1.25rem; margin-bottom: 8px; }

/* ---------- Stats ---------- */
/* Colonnes dimensionnées par leur texte, groupe centré — et non trois
   tiers de la largeur. À trois valeurs, les tiers laissaient plus d'air
   entre une valeur et le bord de la carte qu'entre deux valeurs : l'œil
   y voyait trois éléments poussés vers les bords, pas un groupe centré.
   Le minmax(0, …) laisse les colonnes rétrécir sous la largeur de leur
   libellé ; sans lui, le texte déborderait de la carte sur mobile. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: center; gap: clamp(26px, 6vw, 92px); }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.1rem); color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.stat__num b { color: var(--blue-600); }
.bg-deep .stat__num { color: #fff; } .bg-deep .stat__num b { color: var(--blue-400); }
.stat__label { margin-top: 8px; font-size: .95rem; color: var(--slate-500); }
.bg-deep .stat__label { color: #a9bce0; }

/* ---------- Logos strip ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 60px); opacity: .72; }
.logos span { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--slate-400); letter-spacing: -.01em; }

/* ---------- Security schema ---------- */
.secviz {
  position: relative; background: var(--grad-deep); border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 46px); color: #cdd9f0; overflow: hidden;
}
.secviz__stage { position: relative; }
.secviz svg { width: 100%; height: auto; }
.sec-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 22px; }
.sec-legend li { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: #b9c8e6; }
.sec-legend .k { width: 12px; height: 12px; border-radius: 4px; }

/* ---------- Use case cards ---------- */
.uc {
  display: grid; gap: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 32px);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.uc:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.uc__tag { display: inline-flex; width: fit-content; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--bg-tint); color: var(--blue-700); font-weight: 600; font-size: .8rem; }
.uc ul { display: grid; gap: .6rem; }
.uc ul li { display: flex; gap: .6rem; font-size: .95rem; }
.uc ul svg { width: 18px; color: var(--green-500); flex: none; }

/* ---------- Chat demo (mini) ---------- */
.chat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden; max-width: 420px;
}
.chat__bar { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.chat__bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e7f0; }
.chat__bar .name { margin-left: .4rem; font-weight: 600; color: var(--navy-900); font-size: .92rem; }
.chat__body { padding: 1.1rem; display: grid; gap: .7rem; min-height: 220px; }
.msg { padding: .7rem 1rem; border-radius: 14px; font-size: .92rem; max-width: 82%; line-height: 1.5; }
.msg.bot { background: var(--sky-50); color: var(--slate-700); border-bottom-left-radius: 4px; }
.msg.user { background: var(--grad-brand); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: var(--blue-400); animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,60%,100%{opacity:.3} 30%{opacity:1} }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--grad-deep); border-radius: var(--r-xl);
  padding: clamp(38px, 6vw, 68px); text-align: center; color: #cdd9f0;
}
.cta-band h2 { color: #fff; }
.cta-band .hero__cta { justify-content: center; }
.cta-band::before { content:""; position:absolute; width:400px; height:400px; top:-160px; right:-100px; border-radius:50%; background: radial-gradient(circle,#2258d6,transparent 70%); opacity:.5; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: .9rem; color: var(--slate-700); }
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: #fff; font: inherit; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(59,116,242,.14); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: .82rem; color: var(--slate-500); }
.form-success { display: none; padding: 1rem 1.2rem; border-radius: var(--r-md); background: #e7f8f0; color: #0d7a4f; font-weight: 600; border: 1px solid #b6e6cf; }
.form-success.show { display: block; }

.contact-cards { display: grid; gap: 14px; }
.contact-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.contact-card .ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--sky-100); color: var(--blue-600); }
.contact-card .ico svg { width: 22px; }
.contact-card h4 { margin-bottom: 3px; }
.contact-card a { color: var(--blue-700); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 6px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; color: var(--navy-900); font-family: var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--sky-100); color: var(--blue-600); display: grid; place-items: center; transition: transform .3s, background .3s; font-size: 1.1rem; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--blue-600); color: #fff; }
.faq details p { padding: 0 18px 18px; font-size: .98rem; }

/* ---------- Value / bullets ---------- */
.bullets { display: grid; gap: 1.1rem; }
.bullets li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.bullets .bi { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--sky-100); color: var(--blue-600); }
.bullets .bi svg { width: 22px; }
.bullets h4 { margin-bottom: 3px; }
.bullets p { font-size: .95rem; }

/* ---------- Team ---------- */
.team-card { text-align: center; }
.team-card .avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; box-shadow: var(--shadow-sm); }
.team-card h4 { margin-bottom: 2px; }
.team-card .role { font-size: .88rem; color: var(--blue-600); font-weight: 600; }

/* ---------- Page hero (inner) ---------- */
.page-hero { position: relative; padding: clamp(56px, 8vw, 96px) 0 clamp(30px, 5vw, 48px); overflow: hidden; }
.page-hero .container { position: relative; }
.page-hero h1 { margin: 16px 0 18px; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero .lead { max-width: 640px; }
.breadcrumb { font-size: .85rem; color: var(--slate-500); }
.breadcrumb a:hover { color: var(--blue-600); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: #9fb0d0; padding: clamp(52px, 7vw, 80px) 0 30px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 40px); padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.09); }
.footer .brand__name { color: #fff; }
.footer .brand__mark { filter: brightness(0) invert(1); }
.footer .brand__name b { color: var(--blue-400); }
.footer h5 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .95rem; margin-bottom: 14px; letter-spacing: .02em; }
.footer a { color: #9fb0d0; font-size: .93rem; transition: color .2s; }
.footer a:hover { color: #fff; }
.footer ul { display: grid; gap: 10px; }
.footer__desc { max-width: 300px; margin: 16px 0 18px; font-size: .93rem; color: #8ea1c4; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; font-size: .85rem; color: #7e91b6; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.footer__social a:hover { background: var(--blue-600); }
.footer__social svg { width: 18px; }

/* ---------- Appel à l'action flottant ----------
   Sous 1180 px, le bouton « Prendre rendez-vous » de l'en-tête part se
   replier dans le menu : plus rien ne pousse à la prise de contact tant
   qu'on n'a pas atteint le bas de page. Ce bouton reste sous le pouce.
   z-index 80 : sous le panneau du menu (90) et sous l'en-tête (100), donc
   il s'efface quand le menu s'ouvre au lieu de flotter par-dessus. */
.cta-float { display: none; }

@media (max-width: 1180px) {
  .cta-float {
    position: fixed; z-index: 80;
    right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.15rem; border-radius: 999px;
    background: var(--grad-brand); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    letter-spacing: -.01em; white-space: nowrap;
    box-shadow: 0 12px 30px rgba(34, 88, 214, .42);
  }
  .cta-float svg { width: 18px; height: 18px; flex: none; }
  .cta-float:active { transform: translateY(1px); }
  /* Le menu déplié couvre l'écran : le bouton n'y a plus sa place. */
  body.menu-open .cta-float { display: none; }
  /* La dernière ligne du pied de page ne passe plus dessous. */
  .footer { padding-bottom: 96px; }
}

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Mobile menu panel ---------- */
.mobile-panel {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 90;
  background: rgba(255,255,255,.98); backdrop-filter: blur(10px);
  padding: 24px var(--gutter); display: none; flex-direction: column; gap: 6px;
  transform: translateY(-8px); opacity: 0; transition: opacity .25s, transform .25s;
}
.mobile-panel a { padding: 14px 4px; font-size: 1.1rem; font-weight: 600; color: var(--navy-900); border-bottom: 1px solid var(--line-soft); }
body.menu-open .mobile-panel { display: flex; opacity: 1; transform: none; }
.mobile-panel .btn { margin-top: 16px; }

/* ---------- Responsive ---------- */
/* La barre complète ne tient qu'au-delà de 1180px, largeur à laquelle le
   conteneur atteint son maximum. En deçà, le menu prend le relais — il
   contient déjà les mêmes liens et les mêmes actions. */
@media (max-width: 1180px) {
  /* Barre allégée : logo, langue, menu. Elle n'a plus besoin de la même
     hauteur — et le panneau mobile suit, il lit le même jeton. */
  :root { --nav-h: 74px; }
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__login { display: none; }
  /* Les liens masqués emportaient leur `margin-inline: auto` : sans lui,
     langue et menu se recollaient au logo. Le groupe reprend la marge. */
  .nav__actions { margin-left: auto; border-left: 0; padding-left: 0; }
  .nav__burger { display: flex; }
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* display:contents dissout le conteneur : décor et pastilles redeviennent
     deux éléments de la grille, qu'on peut alors ordonner séparément — le
     décor au-dessus du titre, les promesses après le texte. */
  .hero__visual { display: contents; }
  .scene { order: -1; max-width: 400px; margin-inline: auto; }
  .hero__proof { order: 1; display: grid; gap: 10px; }
  /* Le flottement venait des keyframes « floaty », qui portaient aussi le
     translate(-50%) : sans lui, une pastille posée dans le flux part de
     travers — c'est ce qui coupait la dernière hors de l'écran. */
  .chipfloat { position: static; transform: none; animation: none; width: 100%; }
  .split { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --nav-h: 68px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  body { font-size: 16px; }
  .hero__trust { gap: 1rem; }
}
@media (max-width: 480px) {
  .footer__top { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 30px; }
}


/* Message d'échec du formulaire — jumeau de .form-success. */
.form-error { display: none; padding: 1rem 1.2rem; border-radius: var(--r-md); background: #fdecec; color: #a3232c; font-weight: 600; border: 1px solid #f3c3c3; }
.form-error.show { display: block; }

/* Piège à robots : hors de l'écran plutôt que display:none, que les
   robots savent reconnaître et éviter. Un humain ne le voit jamais. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }