/* ===================================================================
   ANEROM — design system
   Contenu clair, header/footer sombres, "îlots" sombres pour Daneel
   =================================================================== */

/* Polices hébergées sur le site (fichiers variables, sous-ensemble latin, licence OFL) :
   aucune requête vers Google Fonts, donc pas d'IP transmise à un tiers avant consentement. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
}

:root {
  /* ---- surfaces claires (contenu) ---- */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f6f8;
  --color-surface: #ffffff;
  --color-border: #e6e7eb;
  --color-border-strong: #d7d9de;

  --color-fg: #15171c;
  --color-fg-muted: #5b6270;
  --color-fg-faint: #646b78;      /* 5.4:1 sur blanc, 5:1 sur --color-bg-alt (AA) */

  /* ---- surfaces sombres (header, footer, îlots produit) ---- */
  --dark-bg: #111111;
  --dark-surface: #1b1b1b;
  --dark-surface-hover: #242424;
  --dark-border: #2a2a2a;
  --dark-border-strong: #3a3a3a;
  --dark-fg: #f2f2f2;
  --dark-fg-muted: #9a9a9a;
  --dark-fg-faint: #8f8f8f;       /* 5.8:1 sur --dark-bg, 5.3:1 sur --dark-surface (AA) */

  /* ---- accent classique (bleu) ---- */
  --color-accent: #2962ff;
  --color-accent-hover: #4c7dff;
  --color-accent-bg: #eaf0ff;
  --color-accent-bg-dark: #172445;
  --color-accent-text: #2653cc;         /* bleu pour le petit texte seul (6.6:1 sur blanc), la surface reste --color-accent */

  /* ---- accent IA / Daneel (rouge-rose), réservé aux éléments Daneel ---- */
  --color-accent-ai: #fe2c4a;
  --color-accent-ai-hover: #ff5468;
  --color-accent-ai-bg: #ffe3e7;
  --color-accent-ai-bg-dark: #3a141b;
  /* Le rose de marque (#fe2c4a) ne passe pas le seuil AA 4.5:1 en petit texte : ces deux
     variantes servent au texte seul (eyebrows, pastilles, initiales), jamais aux surfaces. */
  --color-accent-ai-text: #c4112c;      /* sur fond clair : 6.1:1 sur blanc, 5:1 sur --color-accent-ai-bg */
  --color-accent-ai-text-dark: #ff6b80; /* sur fond sombre : 5.9:1 sur --color-accent-ai-bg-dark */

  --color-success: #34d399;
  --color-success-bg: #0f2e22;
  --color-danger: #f87171;
  --color-danger-bg: #3a1414;
  --color-warning: #fbbf24;
  --color-warning-bg: #3a2a0a;

  --font-display: "Space Grotesk", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;

  --radius-lg: 8px;
  --radius-full: 999px;
  --header-h: 64px;
  --container-w: 1160px;
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* texte réservé aux lecteurs d'écran (en-tête de colonne du comparatif, etc.) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 96px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-head { max-width: 880px; margin-bottom: 48px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.eyebrow.ai { color: var(--color-accent-ai-text); }
/* dans les îlots sombres, la variante claire du rose */
.daneel-island .eyebrow.ai, .pricing-note .eyebrow.ai, .faq-end .eyebrow.ai { color: var(--color-accent-ai-text-dark); }
.section-head h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
/* le titre profite des 880 px, le texte courant reste sous ~80 caractères par ligne */
.section-head p { color: var(--color-fg-muted); font-size: 17px; max-width: 720px; }
/* un texte long se découpe en plusieurs paragraphes : il leur faut de l'air.
   Le teaser et la carte fondateur ont déjà leur propre espacement. */
.section-head p + p, .module-copy p + p { margin-top: 14px; }

/* ---------- header (sombre) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dark-border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 28px; width: auto; filter: invert(1); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--dark-fg-muted);
  transition: color .15s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--dark-fg); }
/* Daneel est une page à part, pas une ancre : filet, glyphe et typo du produit */
.nav-links .nav-page {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 4px; padding-left: 22px;
  border-left: 1px solid var(--dark-border-strong);
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
}
.nav-links .nav-page svg { width: 15px; height: auto; color: var(--dark-fg); opacity: 0.55; flex: none; transition: opacity .15s ease; }
.nav-links .nav-page:hover svg, .nav-links .nav-page.active svg { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.site-header .btn-secondary { color: var(--dark-fg); border-color: var(--dark-border-strong); }
.site-header .btn-secondary:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--dark-border-strong);
  border-radius: var(--radius-lg);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--dark-fg);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-lg);
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 16px rgba(41,98,255,0.18);
}
.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 4px rgba(41,98,255,0.18), 0 10px 24px rgba(41,98,255,0.28);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { color: var(--color-accent); border-color: var(--color-accent); }

.btn-ai {
  background: linear-gradient(135deg, var(--color-accent-ai), var(--color-accent-ai-hover));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 16px rgba(254,44,74,0.2);
}
.btn-ai:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 4px rgba(254,44,74,0.18), 0 10px 24px rgba(254,44,74,0.28);
  transform: translateY(-1px);
}
.btn-sm { height: 36px; padding: 0 16px; font-size: 13.5px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15.5px; border-radius: 10px; }
/* secondaire posé sur une surface sombre (îlots Daneel, bloc devis) */
.btn-on-dark { color: var(--dark-fg); border-color: var(--dark-border-strong); }
.btn-on-dark:hover { color: var(--dark-fg); border-color: var(--dark-fg-muted); }

/* ---------- icon badges (Daneel glyph, tinted) ---------- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  flex: none;
}
.icon-badge svg { width: 46%; height: auto; }
.icon-badge.lg { width: 72px; height: 72px; border-radius: 18px; }
.icon-badge.ai-light { background: var(--color-accent-ai-bg); color: var(--color-accent-ai); }
.icon-badge.ai-dark { background: var(--color-accent-ai-bg-dark); color: var(--color-accent-ai); }
.icon-badge.sm { width: 44px; height: 44px; border-radius: 12px; }
.icon-badge.xs { width: 22px; height: 22px; border-radius: 6px; }
.icon-badge.xs::after { display: none; }

/* gentle "alive" pulse ring on Daneel/AI badges */
.icon-badge.ai-light, .icon-badge.ai-dark { position: relative; }
.icon-badge.ai-light::after, .icon-badge.ai-dark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--color-accent-ai);
  opacity: 0.55;
  animation: pulseRing 2.6s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- badges / pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  background: var(--color-accent-bg);
  color: var(--color-accent);
}
.badge.ai { background: var(--color-accent-ai-bg); color: var(--color-accent-ai-text); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.muted { background: var(--color-bg-alt); color: var(--color-fg-muted); border: 1px solid var(--color-border); }
.badge.ai-ondark { background: var(--color-accent-ai-bg-dark); color: var(--color-accent-ai-text-dark); }

/* ---------- cards (claires) ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 20px rgba(16,24,40,0.045);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(16,24,40,0.06), 0 16px 32px rgba(16,24,40,0.08);
}
/* liseré accent qui se déploie au survol (cartes claires société) */
.expertise-card, .work-card { position: relative; overflow: hidden; }
.expertise-card::before, .work-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.expertise-card:hover::before, .work-card:hover::before { transform: scaleX(1); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 48px 0 56px; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(21,23,28,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,23,28,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(41,98,255,0.12), transparent);
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--color-accent); }
.hero-kicker { font-size: 17.5px; font-weight: 600; color: var(--color-fg); max-width: 560px; margin-bottom: 16px; }
.hero-lead { font-size: 18px; color: var(--color-fg-muted); max-width: 520px; margin-bottom: 28px; }
.hero-services {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-bottom: 32px;
}
.hero-services li {
  font-size: 14px; font-weight: 600; color: var(--color-fg-muted);
  display: flex; align-items: center; gap: 8px;
}
.hero-services li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); flex: none;
}
.hero-services a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.hero-services a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- hero visual: illustration abstraite maison ---- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: center; }
.hero-art { position: relative; }
.hero-art-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0.4;
  animation: blobFloat 9s ease-in-out infinite;
}
.blob-a { width: 260px; height: 260px; background: var(--color-accent); top: -50px; right: -30px; }
.blob-b { width: 210px; height: 210px; background: var(--color-accent-ai); bottom: -40px; left: -20px; animation-delay: -4.5s; opacity: 0.28; }
@keyframes blobFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.06); }
}

.hero-art-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(16,24,40,0.14);
  animation: cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-art-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.hero-art-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.hero-art-bar em { font-style: normal; margin-left: 8px; font-size: 12px; color: var(--color-fg-faint); }

/* ---------- illustration hero : pastilles technologiques + orbites ---------- */
.tp {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px 0 10px; border-radius: var(--radius-full);
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--color-surface); color: var(--color-fg);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 6px 16px rgba(16,24,40,0.07);
  white-space: nowrap;
}
.tp svg { width: 15px; height: 15px; flex: none; color: var(--color-accent); }
.tp.ai { color: var(--color-accent-ai-text); border-color: var(--color-accent-ai-bg); background: var(--color-accent-ai-bg); }
.tp.ai svg { color: var(--color-accent-ai); }
.tp.lg { height: 40px; font-size: 14.5px; padding: 0 16px 0 12px; }
.tp.lg svg { width: 17px; height: 17px; }
.tp.sm { height: 28px; font-size: 12px; padding: 0 10px 0 8px; gap: 5px; }
.tp.sm svg { width: 13px; height: 13px; }
/* pastilles sur surface sombre (Daneel) */
.on-dark .tp, .tp.dark { background: var(--dark-surface); color: var(--dark-fg); border-color: var(--dark-border-strong); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.on-dark .tp svg, .tp.dark svg { color: var(--color-accent-ai); }
.tp.hf { background: var(--dark-bg); color: var(--dark-fg); border-color: var(--dark-border-strong); }
.tp.hf svg { color: var(--dark-fg-muted); }


.tp.xl { height: 42px; font-size: 15.5px; padding: 0 17px 0 13px; gap: 8px; border-width: 2px; border-color: var(--color-accent); box-shadow: 0 10px 28px rgba(41,98,255,0.22); }
.tp.xl svg { width: 18px; height: 18px; }
.tp.xl.ai { border-color: var(--color-accent-ai); background: var(--color-surface); color: var(--color-accent-ai-text); box-shadow: 0 10px 28px rgba(254,44,74,0.22); }

/* orbites : trois anneaux de pastilles en rotation lente autour du logo (rond).
   L'illustration est plus large que sa colonne et décalée à droite : elle sort
   volontairement du cadre, l'overflow du hero la coupe au bord de la fenêtre. */
.orb { position: relative; width: 700px; height: 660px; margin: 0 auto; transform: translateX(45px); }
.orb-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 124px; height: 124px; border-radius: 50%; padding: 11px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px rgba(16,24,40,0.16);
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.orb-center .anerom-mark { width: 100%; height: 100%; color: var(--color-fg); }
.orb-center::after {
  content: ""; position: absolute; inset: -10px; border-radius: inherit;
  border: 2px solid var(--color-accent); opacity: 0.35;
  animation: pulseRing 3s ease-out infinite;
}
.orb-ring {
  position: absolute; left: 50%; top: 50%;
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  border: 1px dashed var(--color-border-strong);
  animation: orbSpin var(--t) linear infinite;
}
.orb-ring.reverse, .orb-ring.reverse .orb-item .tp { animation-direction: reverse; }
.orb-item {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translate(calc(var(--d) / 2));
}
/* le centrage (-50%, -50%) passe avant la rotation : appliqué après, il serait
   lui-même tourné et décalerait chaque pastille selon sa largeur */
.orb-item .tp {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  animation: orbCounter var(--t) linear infinite;
}
@keyframes orbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbCounter {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
  to   { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); }
}
.orb-glow { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(41,98,255,0.18), transparent); filter: blur(10px); }

/* ---------- comment ça se passe (accueil) : trois étapes numérotées ---------- */
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; counter-reset: none; }
.process-steps li { position: relative; padding: 26px 26px 24px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
.process-steps .step-num { display: inline-block; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--color-accent-text); background: var(--color-accent-bg); padding: 5px 11px; border-radius: var(--radius-full); margin-bottom: 14px; }
.process-steps h3 { font-size: 18px; margin-bottom: 8px; }
.process-steps p { color: var(--color-fg-muted); font-size: 15px; }

/* ---------- context banner (WinDev market shift) ---------- */
.banner {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.banner .container { padding: 56px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.banner h2 { font-size: 26px; margin-bottom: 14px; }
.banner p { color: var(--color-fg-muted); }
.banner ul { display: flex; flex-direction: column; gap: 14px; }
.banner li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.banner li strong { color: var(--color-fg); }
.banner li .ico {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  background: var(--color-accent-bg); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ---------- expertise grid ---------- */
.expertise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.expertise-grid-4 { grid-template-columns: repeat(4, 1fr); }
.expertise-card h3 { font-size: 20px; margin: 14px 0 10px; }
.expertise-card p { color: var(--color-fg-muted); font-size: 15px; margin-bottom: 16px; }
.expertise-card .icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--color-accent-bg), #fff);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  transition: transform .3s ease;
}
.expertise-card:hover .icon-wrap { transform: scale(1.1) rotate(-4deg); }
.expertise-card ul { display: flex; flex-direction: column; gap: 8px; }
.expertise-card li { font-size: 14px; color: var(--color-fg-muted); display: flex; gap: 8px; }
.expertise-card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; margin-top: 8px; opacity: 0.7; }

/* ---------- daneel teaser (home) — îlot sombre ---------- */
/* îlot « Le contexte + Daneel » (fusion du 15/09/2026) : contexte et titre, trois chemins,
   puis Daneel avec le flux, puis la ligne IA — un seul récit dans un seul îlot sombre */
.daneel-island {
  border-radius: 20px;
  border: 1px solid var(--dark-border);
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(254,44,74,0.14), transparent),
    var(--dark-surface);
  padding: 56px;
  box-shadow: 0 24px 56px rgba(17,17,17,0.16);
}
.daneel-context { max-width: 820px; margin-bottom: 34px; }
.daneel-context .eyebrow { color: var(--color-accent); }
.daneel-context h2 { color: var(--dark-fg); font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 14px; }
.daneel-context p { color: var(--dark-fg-muted); font-size: 16.5px; }
.daneel-context p + p { margin-top: 12px; }
/* les trois chemins : cartes numérotées, la deuxième est celle de Daneel */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.path-card {
  position: relative; border: 1px solid var(--dark-border-strong); border-radius: 14px;
  padding: 22px 22px 20px; background: rgba(255,255,255,0.03);
}
.path-card strong { display: block; color: var(--dark-fg); font-size: 16.5px; margin: 10px 0 8px; }
.path-card p { color: var(--dark-fg-muted); font-size: 14.5px; margin: 0; }
.path-num { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--dark-fg-faint); }
.path-card.is-daneel {
  border-color: rgba(254,44,74,0.55);
  background: radial-gradient(260px 120px at 100% 0%, rgba(254,44,74,0.16), transparent), rgba(255,255,255,0.03);
}
.path-card.is-daneel .path-num { color: var(--color-accent-ai-text-dark); }
.path-tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-ai-text-dark); background: var(--color-accent-ai-bg-dark);
  padding: 4px 9px; border-radius: var(--radius-full);
}
.daneel-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--dark-border);
}
.daneel-copy .eyebrow { display: flex; }
.daneel-copy h3 { font-size: 28px; margin: 18px 0 12px; color: var(--dark-fg); }
.daneel-copy p { color: var(--dark-fg-muted); font-size: 16px; max-width: 560px; margin-bottom: 24px; }
/* les trois étapes tiennent sur une ligne : libellés courts et pastilles compactes */
.daneel-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.daneel-steps span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--dark-border-strong);
  color: var(--dark-fg-muted);
}
.daneel-steps span em {
  display: inline-flex; align-items: center; gap: 4px;
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: var(--radius-full);
  background: var(--color-accent-ai-bg-dark); color: var(--color-accent-ai-text-dark);
}
/* l'étincelle de Daneel accompagne toujours les lettres IA, sur la même ligne */
.ia-spark { width: 11px; height: 11px; flex: none; }
.hero-chips strong { display: inline-flex; align-items: center; gap: 5px; }
.hero-chips strong .ia-spark { width: 13px; height: 13px; }
.daneel-teaser-stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 0 0 18px; }
.daneel-teaser-stats strong {
  display: block; font-family: var(--font-display); font-size: 30px; line-height: 1;
  color: var(--color-accent-ai); margin-bottom: 4px;
}
.daneel-teaser-stats span { font-size: 12.5px; color: var(--dark-fg-muted); display: block; }

/* l'îlot réutilise le flux animé de la page Daneel (.flux), en plus compact */
/* double classe volontaire : `.flux` est déclarée plus bas et gagnerait sinon */
.flux.flux-teaser { width: 100%; max-width: 440px; height: 360px; margin: 0 auto; }
.flux-teaser .flux-src .tp { padding: 12px 16px; }
.flux-teaser .flux-src strong { font-size: 18px; }
.flux-teaser .hero-glow { display: none; }

/* ---------- about / stats ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: center; }
.about-copy { max-width: 720px; }
.about-grid p { color: var(--color-fg-muted); margin-bottom: 16px; font-size: 16px; }
.about-lead { font-size: 18px; color: var(--color-fg) !important; font-weight: 500; line-height: 1.55; }
/* illustration « qui sommes-nous » : six avatars reliés au logo, anneau en rotation lente,
   impulsions bleues sur les liens (le dialogue). Décorative, SVG inline en currentColor. */
.about-art { display: flex; justify-content: center; }
.team-art { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.ta-ring {
  fill: none; stroke: var(--color-border-strong); stroke-width: 1.5;
  stroke-dasharray: 3 10; stroke-linecap: round;
  transform-origin: 210px 210px; animation: orbSpin 120s linear infinite;
}
.ta-link { stroke: var(--color-border-strong); stroke-width: 1.5; }
.ta-link.outer { stroke: var(--color-border); stroke-dasharray: 4 7; stroke-linecap: round; }
.ta-pulse {
  stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 10 150; animation: taPulse 4.8s linear infinite;
}
.ta-pulse:nth-of-type(2) { animation-delay: -.8s; }
.ta-pulse:nth-of-type(3) { animation-delay: -1.6s; }
.ta-pulse:nth-of-type(4) { animation-delay: -2.4s; }
.ta-pulse:nth-of-type(5) { animation-delay: -3.2s; }
.ta-pulse:nth-of-type(6) { animation-delay: -4s; }
@keyframes taPulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -160; } }
.ta-center { color: var(--color-fg); }
.ta-center > circle {
  fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.5;
  filter: drop-shadow(0 10px 22px rgba(16,24,40,0.14));
}
.ta-node { color: var(--color-accent); animation: taFloat 6s ease-in-out infinite; }
.ta-node:nth-of-type(2) { animation-delay: -1s; }
.ta-node:nth-of-type(3) { animation-delay: -2s; }
.ta-node:nth-of-type(4) { animation-delay: -3s; }
.ta-node:nth-of-type(5) { animation-delay: -4s; }
.ta-node:nth-of-type(6) { animation-delay: -5s; }
.ta-node .bg { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.5; }
.ta-node.accent { color: var(--color-surface); }
.ta-node.accent .bg { fill: var(--color-accent); stroke: var(--color-accent); }
.ta-node .head { fill: currentColor; }
.ta-node .body { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@keyframes taFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* quatre piliers : 2×2 plutôt que 3+1, qui laissait le dernier seul sur sa ligne */
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.value-pillar {
  padding: 26px 26px 24px; border-radius: 16px;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
}
.value-pillar .vp-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.value-pillar h3 { font-size: 17px; margin-bottom: 8px; }
.value-pillar p { font-size: 14.5px; color: var(--color-fg-muted); }

/* ---------- realisations ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-card h3 { font-size: 18px; margin: 4px 0 10px; }
.work-card p { color: var(--color-fg-muted); font-size: 14.5px; }
.work-card .tag { margin-bottom: 14px; }
.work-card .work-sector {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: 10px;
}

/* ---------- testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.testimonial-card { margin: 0; display: flex; flex-direction: column; gap: 20px; position: relative; padding-top: 64px; }
.testimonial-card::before {
  content: "\201C"; position: absolute; top: 8px; left: 24px;
  font-family: var(--font-display); font-size: 84px; line-height: 1;
  color: var(--color-accent); opacity: 0.18;
}
.testimonial-card blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-fg-muted);
}
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; }
.testimonial-card figcaption div { display: flex; flex-direction: column; gap: 2px; }
.testimonial-card .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); color: #fff;
}
.testimonial-card figcaption strong { font-size: 14.5px; color: var(--color-fg); }
.testimonial-card figcaption span { font-size: 13px; color: var(--color-fg-faint); }

/* ---------- clients : carrousel ---------- */
.clients-band { padding: 80px 0; }
.client-carousel { position: relative; overflow: hidden; }
.client-carousel::before,
.client-carousel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 64px;
  z-index: 2;
  pointer-events: none;
}
.client-carousel::before { left: 0; background: linear-gradient(90deg, var(--color-bg-alt), transparent); }
.client-carousel::after { right: 0; background: linear-gradient(270deg, var(--color-bg-alt), transparent); }
.client-track { display: flex; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 6px 20px rgba(16,24,40,0.08);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover { color: var(--color-accent); border-color: var(--color-accent); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.92); }
.carousel-arrow-prev { left: 10px; }
.carousel-arrow-next { right: 10px; }
@media (max-width: 640px) {
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow svg { width: 15px; height: 15px; }
}
.client-slide {
  position: relative;
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
  box-sizing: border-box;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-slide::before {
  content: "";
  position: absolute;
  inset: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 20px rgba(16,24,40,0.045);
}
.client-slide img {
  position: relative;
  z-index: 1;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .25s ease;
}
.client-slide img:hover { transform: scale(1.06); }

/* ---------- bande CTA finale ---------- */
.cta-band { padding: 0 0 96px; }
.cta-band-inner {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: 56px;
  display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  box-shadow: 0 24px 56px rgba(41,98,255,0.28);
}
.cta-band-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(closest-side at 80% 50%, black, transparent);
  mask-image: radial-gradient(closest-side at 80% 50%, black, transparent);
}
.cta-band-inner > * { position: relative; }
.cta-band .eyebrow { color: rgba(255,255,255,0.75); }
.cta-band h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; color: #fff; }
.cta-band p { color: rgba(255,255,255,0.82); max-width: 560px; }
.cta-band-actions { display: flex; flex-direction: column; gap: 12px; }
.cta-band .btn-primary { background: #fff; color: var(--color-accent); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.cta-band .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.45); }
.cta-band .btn-secondary:hover { color: #fff; border-color: #fff; }
/* le formulaire vit dans la bande : deux colonnes, champs sur fond sombre */
.cta-band-form { grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; }
.cta-contact { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; }
.cta-contact li { display: flex; flex-direction: column; gap: 2px; }
.cta-contact span { font-size: 12.5px; color: var(--dark-fg-faint); }
.cta-contact a { font-weight: 600; color: var(--dark-fg); }
.cta-contact a:hover { color: var(--color-accent-ai); }
/* sur la bande bleue de l'accueil, le formulaire reste une carte claire */
.cta-band:not(.ai) .cta-contact span { color: rgba(255,255,255,0.65); }
.cta-band:not(.ai) .cta-contact a { color: #fff; }
.cta-band:not(.ai) .cta-contact a:hover { color: rgba(255,255,255,0.8); }
.cta-contact .cta-addr { font-weight: 600; color: #fff; max-width: 280px; }
.cta-band:not(.ai) form.card { background: var(--color-surface); border: 1px solid var(--color-border); }
/* le bouton du formulaire garde son bleu plein : la règle de la bande le rendait blanc sur blanc */
.cta-band:not(.ai) form .btn-primary { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); color: #fff; }
.cta-band.ai form.card { background: rgba(255,255,255,0.035); border: 1px solid var(--dark-border-strong); }
.cta-band.ai .field label { color: var(--dark-fg-muted); }
/* background-color et non background : le raccourci effacerait les flèches du select */
.cta-band.ai .field input, .cta-band.ai .field textarea, .cta-band.ai .field select {
  background-color: rgba(0,0,0,0.32); border-color: var(--dark-border-strong); color: var(--dark-fg);
}
.cta-band.ai .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--dark-fg-muted) 50%), linear-gradient(135deg, var(--dark-fg-muted) 50%, transparent 50%);
}
.cta-band.ai .field option { background: var(--dark-surface); color: var(--dark-fg); }
.cta-band.ai .field input:focus, .cta-band.ai .field textarea:focus, .cta-band.ai .field select:focus {
  border-color: var(--color-accent-ai); box-shadow: 0 0 0 4px rgba(254,44,74,0.16);
}
.cta-band.ai .form-status { background: var(--color-accent-ai-bg-dark); color: var(--color-accent-ai-text-dark); border-color: var(--color-accent-ai-bg-dark); }

/* variante Daneel : îlot sombre à halo rose */
.cta-band.ai .cta-band-inner {
  background: radial-gradient(700px 300px at 85% 0%, rgba(254,44,74,0.22), transparent), var(--dark-surface);
  border: 1px solid var(--dark-border);
  box-shadow: 0 24px 56px rgba(17,17,17,0.18);
}
.cta-band.ai .eyebrow { color: var(--color-accent-ai-text-dark); }
.cta-band.ai h2 { color: var(--dark-fg); }
.cta-band.ai p { color: var(--dark-fg-muted); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-grid > * { min-width: 0; }
.contact-info-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.contact-info-list .row { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-list .ico {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  background: var(--color-accent-bg); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.contact-info-list a, .contact-info-list span.value { color: var(--color-fg); font-weight: 500; }
.contact-info-list .label { display: block; font-size: 12.5px; color: var(--color-fg-faint); margin-bottom: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 600; color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field textarea, .field select {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  color: var(--color-fg);
  font-family: inherit;
  font-size: 14.5px;
  resize: vertical;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.field select { width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--color-fg-muted) 50%), linear-gradient(135deg, var(--color-fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(41,98,255,0.12);
}
/* piège à robots : invisible à l'écran, ignoré au clavier et par les lecteurs d'écran */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field-row .field { min-width: 0; }
.field-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-fg-faint); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-fg-faint); opacity: 1; }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* `.cta-band .form-status` : sinon `.cta-band p` (plus spécifique) passe le texte en blanc */
.form-status, .cta-band .form-status {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-lg);
  font-size: 14px; font-weight: 500;
  background: var(--color-accent-bg); color: var(--color-accent);
  border: 1px solid var(--color-accent-bg);
}
.form-status.is-error { background: var(--color-accent-ai-bg); color: var(--color-accent-ai-text); border-color: var(--color-accent-ai-bg); }

/* ---------- footer (sombre) ---------- */
.site-footer { background: var(--dark-bg); border-top: 1px solid var(--dark-border); padding: 56px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand img { height: 26px; margin-bottom: 14px; filter: invert(1); }
.footer-brand p { color: var(--dark-fg-muted); font-size: 14px; max-width: 280px; }
.footer-col .footer-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark-fg-faint); margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { display: inline-block; padding: 3px 0; font-size: 14.5px; color: var(--dark-fg-muted); }
.footer-col a:hover { color: var(--dark-fg); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; border-top: 1px solid var(--dark-border);
  font-size: 13px; color: var(--dark-fg-faint);
  /* le bouton de retour en haut flotte au-dessus du coin droit : on lui laisse la place */
  padding-right: 64px;
}
.footer-legal a, .footer-legal .link-btn { display: inline-block; padding: 3px 0; color: var(--dark-fg-muted); }
.footer-legal a:hover, .footer-legal .link-btn:hover { color: var(--dark-fg); }
/* bouton présenté comme un lien (« Gérer les cookies » : une action, pas une navigation) */
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- pages légales ---------- */
.legal .section-head h1 { font-size: clamp(30px, 3.6vw, 40px); margin-bottom: 14px; }
.legal-body { max-width: 720px; }
.legal-body h2 { font-size: 19px; margin: 34px 0 10px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--color-fg-muted); margin-bottom: 10px; }
.legal-body strong { color: var(--color-fg); }
.legal-body a { color: var(--color-accent); font-weight: 500; }
.legal-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--color-fg-muted); }
.legal-todo {
  background: var(--color-warning-bg); color: var(--color-warning);
  border-radius: var(--radius-lg); padding: 12px 14px; font-size: 14px;
}

/* ---------- FAQ Daneel ---------- */
/* hero = îlot sombre (Daneel), halo rose signature, pastilles de thèmes */
.faq-hero {
  position: relative; overflow: hidden;
  padding: 76px 0 64px;
  background: var(--dark-bg); color: var(--dark-fg);
}
.faq-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 380px at 82% 0%, rgba(254,44,74,0.20), transparent 70%);
}
.faq-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.faq-hero .icon-badge { display: flex; margin-bottom: 24px; }
.faq-hero .eyebrow { color: var(--color-accent-ai-text-dark); }
.faq-hero h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; margin-bottom: 18px; }
.faq-hero h1 .accent { color: var(--color-accent-ai); }
.faq-hero p { color: var(--dark-fg-muted); font-size: 17px; max-width: 660px; }
.faq-hero p a { color: var(--dark-fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-accent-ai); }
.faq-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.faq-pills a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--dark-border-strong); background: rgba(255,255,255,0.03);
  color: var(--dark-fg-muted); font-size: 13.5px; font-weight: 600;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.faq-pills a span { font-family: var(--font-display); color: var(--color-accent-ai-text-dark); }
.faq-pills a:hover { color: var(--dark-fg); border-color: var(--color-accent-ai); background: rgba(254,44,74,0.08); transform: translateY(-1px); }

/* corps : sommaire collant à gauche, questions à droite */
.faq { padding: 72px 0 96px; }
.faq-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.faq-aside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.faq-nav { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); padding: 8px; }
.faq-nav-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-fg-faint); padding: 10px 12px 6px; }
.faq-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--color-fg-muted); font-size: 14px; font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.faq-nav a span { font-family: var(--font-display); font-size: 12px; color: var(--color-fg-faint); width: 22px; transition: color .2s ease; }
.faq-nav a:hover { background: var(--color-bg-alt); color: var(--color-fg); }
.faq-nav a.is-active { background: var(--color-accent-ai-bg); color: var(--color-accent-ai-text); }
.faq-nav a.is-active span { color: var(--color-accent-ai-text); }
.faq-toggle-all {
  margin: 8px 4px 4px; width: calc(100% - 8px); padding: 9px 12px;
  border-radius: 8px; border: 1px dashed var(--color-border-strong); background: transparent;
  color: var(--color-fg-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.faq-toggle-all:hover { border-color: var(--color-accent-ai); color: var(--color-accent-ai); }
.faq-help {
  border-radius: 14px; padding: 20px;
  background: radial-gradient(240px 140px at 100% 0%, rgba(254,44,74,0.18), transparent), var(--dark-surface);
  border: 1px solid var(--dark-border); color: var(--dark-fg-muted); font-size: 14px; line-height: 1.55;
}
.faq-help strong { color: var(--dark-fg); display: block; margin-bottom: 4px; }
.faq-help .btn { margin-top: 14px; }

/* groupes numérotés */
/* padding: 0 neutralise l'espacement global des <section> */
.faq-group { padding: 0; margin-bottom: 64px; scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-group:last-of-type { margin-bottom: 40px; }
.faq-group-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.faq-group-num {
  flex: none; margin-top: 4px; padding: 6px 12px; border-radius: var(--radius-full);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--color-accent-ai-text); background: var(--color-accent-ai-bg);
}
.faq-group-head h2 { font-size: 25px; margin-bottom: 4px; }
.faq-group-head p { color: var(--color-fg-muted); }

/* questions : cartes numérotées, chevron rond, ouverture animée (JS, cf. main.js) */
.faq-list { display: flex; flex-direction: column; gap: 12px; counter-reset: faq; }
.faq-item {
  border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .6s ease;
}
.faq-item:hover { border-color: var(--color-border-strong); box-shadow: 0 10px 28px rgba(17,17,17,0.06); transform: translateY(-1px); }
.faq-item[open] { border-color: rgba(254,44,74,0.35); box-shadow: 0 16px 40px rgba(254,44,74,0.10); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; font-weight: 600; font-size: 16.5px; color: var(--color-fg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  counter-increment: faq; content: counter(faq, decimal-leading-zero);
  flex: none; width: 26px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--color-fg-faint); transition: color .2s ease;
}
.faq-item summary:hover::before, .faq-item[open] summary::before { color: var(--color-accent-ai); }
.faq-item .faq-q { flex: 1; }
.faq-chevron {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--color-border); color: var(--color-fg-muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease, border-color .2s ease;
}
.faq-chevron svg { width: 12px; height: 12px; }
.faq-item summary:hover .faq-chevron { border-color: var(--color-accent-ai); color: var(--color-accent-ai); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); background: var(--color-accent-ai); border-color: var(--color-accent-ai); color: #fff; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-accent-ai); outline-offset: -2px; border-radius: 14px; }
.faq-body { overflow: hidden; }
.faq-body-inner {
  margin: 0 22px; padding: 16px 0 22px 42px;
  border-top: 1px solid var(--color-border);
  color: var(--color-fg-muted); font-size: 15.5px; line-height: 1.65;
}
.faq-body-inner p + p { margin-top: 10px; }
.faq-body-inner a { color: var(--color-accent-ai-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* fin de page : îlot sombre d'appel à l'action */
.faq-end {
  position: relative; overflow: hidden; margin-top: 8px; padding: 44px 40px; border-radius: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  background: radial-gradient(600px 260px at 85% 0%, rgba(254,44,74,0.22), transparent), var(--dark-surface);
  border: 1px solid var(--dark-border); color: var(--dark-fg);
  box-shadow: 0 24px 56px rgba(17,17,17,0.18);
}
.faq-end > * { position: relative; z-index: 1; }
.faq-end .hero-glow { opacity: 0.22; }
.faq-end h2 { font-size: 24px; margin-bottom: 8px; }
.faq-end p { color: var(--dark-fg-muted); }
.faq-end .hero-cta { flex-direction: column; align-items: stretch; }

/* ---------- bandeau de consentement ---------- */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  width: fit-content; max-width: calc(100% - 32px); margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 10px 8px 18px; border-radius: var(--radius-full);
  background: var(--dark-surface); color: var(--dark-fg);
  border: 1px solid var(--dark-border-strong);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
}
/* sans cette règle, `display: flex` l'emporterait sur l'attribut hidden */
.cookie-bar[hidden] { display: none; }
.cookie-bar p { font-size: 13px; line-height: 1.4; color: var(--dark-fg-muted); }
.cookie-bar p a { color: var(--dark-fg); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 8px; flex: none; }
.cookie-bar .btn { height: 30px; padding: 0 14px; font-size: 13px; }
.cookie-bar .btn-secondary { color: var(--dark-fg); border-color: var(--dark-border-strong); }
.cookie-bar .btn-secondary:hover { color: var(--dark-fg); border-color: var(--dark-fg-muted); }

/* ---------- retour en haut ---------- */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark-surface); color: var(--dark-fg);
  border: 1px solid var(--dark-border-strong);
  box-shadow: 0 8px 24px rgba(16,24,40,0.24);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .15s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--dark-surface-hover); }
.back-to-top:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ---------- reveal-on-scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* staggered cascade for grids of reveal cards */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .08s; }
.stagger > *:nth-child(3) { transition-delay: .16s; }
.stagger > *:nth-child(4) { transition-delay: .24s; }
.stagger > *:nth-child(5) { transition-delay: .32s; }
.stagger > *:nth-child(6) { transition-delay: .40s; }

/* ---------- daneel product page specifics ---------- */
/* hero = îlot sombre plein écran (autorisé pour Daneel), halo rose signature */
.daneel-hero {
  position: relative; overflow: hidden;
  padding: 48px 0 56px;
  background: var(--dark-bg); color: var(--dark-fg);
}
.daneel-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.daneel-hero::after {
  content: "";
  position: absolute; z-index: 0;
  top: -260px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 720px;
  background: radial-gradient(closest-side, rgba(254,44,74,0.22), transparent);
}
.daneel-hero .container { position: relative; z-index: 1; }
/* la colonne de texte est la plus large : en dessous, le H1 casse après « pour vos » */
.daneel-hero-grid { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 48px; align-items: center; }
/* les chiffres clés courent sous les deux colonnes plutôt que de s'empiler */
.daneel-hero-grid .hero-chips { grid-column: 1 / -1; margin-top: 8px; }
/* bloc de marque en tête du hero : glyphe + nom du produit */
.daneel-brand { display: flex; align-items: center; gap: 16px; }
.daneel-brand .db-text { display: flex; flex-direction: column; gap: 2px; }
.daneel-brand strong { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--dark-fg); line-height: 1; }
.daneel-brand strong .brand-e { color: var(--color-accent-ai); } /* wordmark : second e en rose sur fond sombre (design-system/CLAUDE.md) */
.daneel-brand em { font-style: normal; font-size: 13.5px; color: var(--dark-fg-muted); }
.daneel-hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; margin: 18px 0 20px; color: var(--dark-fg); }
.daneel-hero h1 .accent { color: var(--color-accent-ai); }
.daneel-hero .hero-lead { color: var(--dark-fg-muted); max-width: 560px; margin-bottom: 30px; }
.daneel-hero .hero-lead strong { color: var(--dark-fg); }
.daneel-hero .hero-cta { margin-bottom: 30px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-chips li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--color-fg-muted);
  padding: 7px 14px; border-radius: var(--radius-full);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.hero-chips li strong { font-family: var(--font-display); font-size: 15px; color: var(--color-accent-ai-text-dark); }
.hero-chips.on-dark li { background: rgba(255,255,255,0.03); border-color: var(--dark-border-strong); color: var(--dark-fg-muted); }

/* flux de migration (illustration maison) : HFSQL → Daneel → 5 moteurs */
.hero-glow { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.45; z-index: 0; animation: blobFloat 9s ease-in-out infinite; pointer-events: none; }
.hero-glow.g1 { width: 260px; height: 260px; background: var(--color-accent-ai); top: -40px; right: -20px; }
.hero-glow.g2 { width: 200px; height: 200px; background: var(--color-accent-ai); bottom: -30px; left: -10px; opacity: 0.25; animation-delay: -4.5s; }
.flux { position: relative; width: 100%; max-width: 560px; height: 520px; margin: 0 auto; }
.flux > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flux path.base { fill: none; stroke: var(--dark-border-strong); stroke-width: 2; }
.flux path.beam { fill: none; stroke: var(--color-accent-ai); stroke-width: 2; stroke-dasharray: 10 26; stroke-linecap: round; animation: beam 2.4s linear infinite; }
.flux path.beam:nth-of-type(odd) { animation-delay: -1.2s; }
@keyframes beam { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -72; } }
.flux-node { position: absolute; transform: translate(-50%, -50%); }
.flux-src { left: 12%; top: 50%; }
.flux-src .tp { height: auto; flex-direction: column; gap: 2px; padding: 14px 20px; border-radius: 14px; }
.flux-src strong { font-size: 20px; }
.flux-src small { font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--dark-fg-muted); }
.flux-core { left: 50%; top: 50%; z-index: 2; }
.flux-core .icon-badge { box-shadow: 0 0 0 8px var(--dark-bg), 0 0 40px rgba(254,44,74,0.45); }
.flux-t1 { left: 84%; top: 12% } .flux-t2 { left: 84%; top: 31% } .flux-t3 { left: 84%; top: 50% } .flux-t4 { left: 84%; top: 69% } .flux-t5 { left: 84%; top: 88% }


/* modules Daneel : trois encarts horizontaux (îlots sombres), illustration alternée */
.modules { display: flex; flex-direction: column; gap: 24px; }
.module-block {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
  padding: 44px 48px; border-radius: 20px;
  background: radial-gradient(520px 260px at 100% 0%, rgba(254,44,74,0.12), transparent), var(--dark-surface);
  border: 1px solid var(--dark-border);
  box-shadow: 0 16px 40px rgba(17,17,17,0.14);
}
.module-block.reverse .module-copy { order: 2; }
.module-block.reverse .module-illus { order: 1; }
.module-copy .step-index {
  display: block; font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--color-accent-ai-text-dark); margin-bottom: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.module-copy h3 { font-size: clamp(22px, 2.4vw, 28px); color: var(--dark-fg); margin-bottom: 12px; }
.module-tagline { font-size: 16.5px; font-weight: 500; color: var(--dark-fg); margin-bottom: 14px; line-height: 1.55; }
.module-copy p { color: var(--dark-fg-muted); font-size: 15px; }
.module-list { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 22px; }
.module-list li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--dark-fg); line-height: 1.5; }
.module-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px;
  border-left: 2px solid var(--color-accent-ai); border-bottom: 2px solid var(--color-accent-ai);
  transform: rotate(-45deg);
}
.module-meta { display: flex; align-items: center; gap: 8px; }
.module-name {
  display: inline-block;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px; color: var(--dark-fg-faint);
  border: 1px solid var(--dark-border-strong);
  border-radius: 6px; padding: 4px 8px;
}
/* mini-illustrations (décoratives) */
.mi-card {
  border-radius: 14px; overflow: hidden;
  background: var(--dark-bg); border: 1px solid var(--dark-border-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  padding: 16px 18px 18px;
}
.mi-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--dark-fg); }
.module-illus .mi-card + .mi-card { margin-top: 16px; }
/* bandeau de fin de migration réussie */
.mi-done {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  background: var(--color-success-bg); color: var(--color-success);
  border: 1px solid rgba(52,211,153,0.25);
}
.mi-done::before { content: "✓"; font-size: 14px; }
.mi-stats .ok b { color: var(--color-success); }
.mi-head em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--dark-fg-muted); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--dark-border-strong); white-space: nowrap; }
.mi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mi-stats div { font-size: 11px; color: var(--dark-fg-muted); padding: 10px 12px; border-radius: 8px; background: var(--dark-surface); }
.mi-stats b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--dark-fg); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
/* reprend le code couleur des compteurs de sévérité de l'application */
.mi-stats .err b { color: var(--color-danger); }
.mi-stats .warn b { color: var(--color-warning); }
.mi-diag, .mi-diff, .mi-log { display: flex; flex-direction: column; gap: 6px; }
.mi-diag li, .mi-diff li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--dark-surface); font-size: 12px; color: var(--dark-fg); }
.mi-diag small, .mi-diff small { display: block; font-size: 11px; color: var(--dark-fg-muted); font-family: "SFMono-Regular", Consolas, monospace; }
.mi-diag .sev { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mi-diag .sev.high { background: var(--color-danger); } .mi-diag .sev.mid { background: var(--color-warning); } .mi-diag .sev.low { background: var(--color-success); }
.mi-diag b { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-fg-muted); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--dark-border-strong); }
.mi-diag b.ai { color: var(--color-accent-ai-text-dark); border-color: var(--color-accent-ai-bg-dark); background: var(--color-accent-ai-bg-dark); }
.mi-gauge { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 11.5px; color: var(--dark-fg-muted); }
.mi-gauge div { height: 8px; border-radius: 4px; background: var(--dark-surface); overflow: hidden; }
.mi-gauge i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--color-accent-ai), var(--color-accent-ai-hover)); }
.mi-gauge span { font-variant-numeric: tabular-nums; color: var(--dark-fg); }
.mi-log { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dark-border); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; color: var(--dark-fg-muted); }
.mi-log b { color: var(--color-success); margin-right: 6px; }
/* la carte de copie joue une migration : les jauges se remplissent, puis le
   journal se valide ligne à ligne. `backwards` garde l'état lisible quand les
   animations sont neutralisées (prefers-reduced-motion). */
.mi-gauge i { animation: miGauge 7s ease-in-out infinite backwards; }
.mi-gauge:nth-of-type(3) i { animation-delay: .5s; }
.mi-gauge:nth-of-type(4) i { animation-delay: 1s; }
@keyframes miGauge { 0% { width: 0; } 55%, 100% { width: var(--w); } }

/* la table en cours défile pendant la copie, comme dans l'application.
   Le dernier nom reste visible par défaut : c'est l'état lu quand les
   animations sont désactivées. */
.mi-cycle { position: relative; display: inline-block; min-width: 84px; text-align: right; }
.mi-cycle em { font-style: normal; position: absolute; right: 0; top: 0; opacity: 0; }
.mi-cycle em:last-child { position: static; opacity: 1; }
.mi-cycle em:nth-child(1) { animation: miTable1 7s linear infinite; }
.mi-cycle em:nth-child(2) { animation: miTable2 7s linear infinite; }
.mi-cycle em:nth-child(3) { animation: miTable3 7s linear infinite; }
.mi-cycle em:nth-child(4) { animation: miTable4 7s linear infinite; }
@keyframes miTable1 { 0%, 12% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes miTable2 { 0%, 13% { opacity: 0; } 15%, 26% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes miTable3 { 0%, 27% { opacity: 0; } 29%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes miTable4 { 0%, 41% { opacity: 0; } 43%, 100% { opacity: 1; } }

.mi-log li { animation: miLog 7s ease-out infinite backwards; }
.mi-log li:nth-child(2) { animation-delay: .35s; }
.mi-log li:nth-child(3) { animation-delay: .7s; }
.mi-log li:nth-child(4) { animation-delay: 1.05s; }
@keyframes miLog {
  0%, 52% { opacity: 0; transform: translateY(3px); }
  64%, 100% { opacity: 1; transform: none; }
}
.mi-diff i { font-style: normal; font-size: 14px; color: var(--color-accent-ai); }
.mi-diff li.del { color: var(--dark-fg-muted); }
.mi-diff li.del i { color: var(--dark-fg-faint); }
.mi-diff li.mod span { color: var(--color-warning); }
.mi-diff li.add span { color: var(--color-success); }
.mi-foot { margin-top: 12px; text-align: center; font-size: 12.5px; font-weight: 600; color: #fff; padding: 9px; border-radius: 8px; background: linear-gradient(135deg, var(--color-accent-ai), var(--color-accent-ai-hover)); }

.pricing-note {
  background: var(--dark-surface);
  border: 1px dashed var(--dark-border-strong);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
}
.pricing-note h3 { font-size: 20px; margin-bottom: 10px; color: var(--dark-fg); }
.pricing-note p { color: var(--dark-fg-muted); max-width: 520px; margin: 0 auto 20px; }

/* ---------- pourquoi ANEROM (page Daneel) ---------- */
/* stretch : la carte du fondateur s'aligne sur la hauteur de la liste de droite */
.why-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: stretch; }
.why-founder {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 32px;
  background: radial-gradient(520px 240px at 100% 0%, rgba(254,44,74,0.16), transparent), var(--dark-surface);
  border: 1px solid var(--dark-border);
  box-shadow: 0 24px 56px rgba(17,17,17,0.16);
  display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center;
  align-content: center;
}
/* même guillemet décoratif que les témoignages de l'accueil, en version sombre */
.why-founder::before {
  content: "\201C"; position: absolute; top: 6px; right: 30px;
  font-family: var(--font-display); font-size: 96px; line-height: 1;
  color: var(--color-accent-ai); opacity: 0.22; pointer-events: none;
}
.why-founder .avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  background: var(--color-accent-ai-bg-dark); color: var(--color-accent-ai-text-dark);
  border: 1px solid var(--dark-border-strong);
}
.why-founder strong { display: block; font-family: var(--font-display); font-size: 18px; color: var(--dark-fg); }
.why-founder > div > span { display: block; font-size: 13px; color: var(--dark-fg-muted); margin-top: 2px; }
.why-founder p { grid-column: 1 / -1; margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--dark-fg); }
/* clin d'œil au nom, en pied de section : une note, pas un argument */
.asimov-note {
  margin-top: 32px; padding: 28px 32px;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: 16px;
}
.asimov-note .eyebrow { margin-bottom: 10px; }
.asimov-note h3 { font-size: 20px; margin-bottom: 10px; }
.asimov-note p { color: var(--color-fg-muted); font-size: 15.5px; }
.asimov-note p + p { margin-top: 12px; }
.asimov-note strong { color: var(--color-fg); }
.why-list { display: flex; flex-direction: column; gap: 14px; }
.why-list li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  padding: 18px 20px; border-radius: 14px;
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.why-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-ai-bg); color: var(--color-accent-ai);
}
.why-list h3 { font-size: 16px; margin-bottom: 4px; }
.why-list p { font-size: 14.5px; color: var(--color-fg-muted); }

/* ---------- le temps gagné (Daneel vs prestation classique) ---------- */
  border-radius: 14px;
  padding: 26px 26px 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
  counter-increment: gain;
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--color-border);
  font-size: 14.5px;
}
  content: counter(gain);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
}
  background: var(--dark-surface);
  border-color: var(--dark-border);
  box-shadow: 0 16px 40px rgba(17,17,17,0.14);
}
.gain-note { font-size: 13px; color: var(--color-fg-faint); margin-top: 18px; max-width: 760px; }

/* ---------- la différence Daneel (comparatif + cartes de valeur) ---------- */
.compare-wrap { overflow-x: auto; margin: 22px 0 8px; }
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  min-width: 640px;
}
.compare th, .compare td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.compare thead th { font-family: var(--font-display); font-size: 14px; }
.compare thead th.daneel {
  background: var(--color-accent-ai-text); /* blanc dessus : 6:1 (le rose de marque plafonne à 3.7:1) */
  color: #fff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.compare thead th.presta { color: var(--color-fg-muted); }
.compare td.crit { font-weight: 600; color: var(--color-fg); width: 22%; }
.compare td.daneel { background: var(--color-accent-ai-bg); font-weight: 500; color: var(--color-fg); }
.compare td.presta { color: var(--color-fg-muted); }
.compare tr:last-child td.daneel { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.compare .yes { color: var(--color-accent-ai-text); font-weight: 700; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
}
.value-card .vi {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-accent-ai-bg);
  color: var(--color-accent-ai);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.value-card h3 { font-size: 16px; margin-bottom: 6px; }
.value-card p { color: var(--color-fg-muted); font-size: 14px; line-height: 1.55; }

/* ---------- pour qui (page Daneel) : trois situations, réutilise .value-card ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.audience-grid .value-card { padding: 24px; }
.audience-grid .value-card h3 { font-size: 17px; }
.audience-grid .value-card p { font-size: 14.5px; }

/* ---------- essai (page Daneel) : deux modes en mini-cartes ---------- */
.essai-modes { display: grid; gap: 12px; }
.essai-mode { border: 1px solid var(--color-border); border-radius: 14px; padding: 18px 20px; background: var(--color-surface); }
.essai-mode h3 { font-size: 16px; margin-bottom: 6px; color: var(--color-fg); }
.essai-mode p { font-size: 14.5px; color: var(--color-fg-muted); margin: 0; }

/* ---------- devis Daneel (îlot sombre) ---------- */
.quote-points {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 520px; margin: 0 auto 24px; text-align: left;
}
.quote-points li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; color: var(--dark-fg);
}
.quote-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--color-accent-ai); border-bottom: 2px solid var(--color-accent-ai);
  transform: rotate(-45deg) translateY(-2px);
}
.pricing-note .pricing-legal { font-size: 12.5px; color: var(--dark-fg-faint); margin: 18px auto 0; }

/* ---------- manifeste IA (accueil) ---------- */
.manifesto { text-align: center; }
.manifesto-line {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.28;
  max-width: 900px;
  margin: 0 auto 16px;
}
.manifesto-line .accent { color: var(--color-accent); }
.manifesto p { color: var(--color-fg-muted); max-width: 640px; margin: 0 auto; font-size: 16px; }
.manifesto-points {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px;
  max-width: 900px; margin: 32px auto 0; text-align: left;
}
.manifesto-points li {
  flex: 1 1 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  font-size: 14.5px; color: var(--color-fg-muted); line-height: 1.5;
}
.manifesto-points li strong { display: block; color: var(--color-accent); margin-bottom: 4px; }

/* le manifeste IA vit désormais dans l'îlot sombre Daneel : il en reprend les codes */
.daneel-ia {
  grid-column: 1 / -1;
  margin-top: 28px; padding-top: 26px;
  border-top: 1px solid var(--dark-border);
  text-align: center;
}
/* un paragraphe centré ligne à ligne se lit mal : on le borne et on le centre en bloc */
.daneel-ia p { max-width: 660px; margin: 0 auto; color: var(--dark-fg-muted); font-size: 15.5px; }
.daneel-ia .eyebrow { color: var(--color-accent-ai-text-dark); }
.daneel-ia .manifesto-line { font-size: clamp(21px, 2.4vw, 27px); color: var(--dark-fg); }
.daneel-ia .manifesto-line .accent { color: var(--color-accent-ai); }
.daneel-ia .manifesto-points li {
  background: rgba(255,255,255,0.04);
  border-color: var(--dark-border-strong);
  color: var(--dark-fg-muted);
}
.daneel-ia .manifesto-points li strong { color: var(--color-accent-ai-text-dark); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .container { padding: 0 20px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid > * { min-width: 0; }
  .hero-art { max-width: 520px; margin: 24px auto 0; }
  .hero-cta { margin-bottom: 8px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 14px; }
  .header-actions .btn-secondary-desktop { display: none; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .expertise-grid-4 { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
}

@media (max-width: 920px) {
  /* navigation mobile : le menu ne tient plus en ligne sous 920 px */
  .header-actions .btn-secondary-desktop { display: none; }
  .nav-toggle { display: flex; }
  /* le panneau reste dans le flux mais invisible (et non display:none), ce qui
     permet de l'animer : glissement vers le bas, puis cascade des entrées */
  .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    padding: 6px 24px 18px;
    background: var(--dark-bg);
    border-bottom: 1px solid var(--dark-border);
    box-shadow: 0 24px 40px rgba(0,0,0,0.35);
    opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .site-header.nav-open .nav-links {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav-links a {
    width: 100%; padding: 15px 0; font-size: 16px;
    border-bottom: 1px solid var(--dark-border);
    opacity: 0; transform: translateX(-8px);
    transition: opacity .28s ease, transform .28s ease, color .15s ease;
  }
  .site-header.nav-open .nav-links a { opacity: 1; transform: none; }
  .site-header.nav-open .nav-links a:nth-child(2) { transition-delay: .05s; }
  .site-header.nav-open .nav-links a:nth-child(3) { transition-delay: .1s; }
  .site-header.nav-open .nav-links a:nth-child(4) { transition-delay: .15s; }
  /* Daneel : plus de filet vertical (il devenait un séparateur collé à l'icône) ;
     un espace et le glyphe suffisent à le distinguer, en dernière position */
  .nav-links .nav-page {
    margin: 8px 0 0; padding: 15px 0 4px; border-left: 0; border-bottom: 0;
    gap: 10px;
  }
  .nav-links .nav-page svg { width: 18px; opacity: 1; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .expertise-grid { grid-template-columns: 1fr; }
  .client-slide { flex: 0 0 180px; width: 180px; height: 180px; padding: 24px; }
  .client-slide::before { inset: 11px; }
  .banner .container { grid-template-columns: 1fr; }
  .module-block { grid-template-columns: 1fr; padding: 32px 28px; }
  .module-block.reverse .module-copy { order: 1; }
  .module-block.reverse .module-illus { order: 2; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .daneel-grid { grid-template-columns: 1fr; }
  .paths { grid-template-columns: 1fr; }
  .daneel-hero-grid { grid-template-columns: 1fr; }
  .hero-grid > * { min-width: 0; }
  .flux { max-width: 560px; margin: 8px auto 0; }
  /* hero empilé : l'illustration se recentre et ne déborde plus */
  .orb { width: 100%; max-width: 560px; height: 470px; transform: scale(.7); }
  .values-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  /* qui sommes-nous empilé : l'illustration passe sous le texte, plus petite */
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .team-art { max-width: 300px; }
  .cta-band-inner { grid-template-columns: 1fr; padding: 40px 32px; }
  .cta-band-actions { flex-direction: row; flex-wrap: wrap; }
  .why-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* FAQ : le sommaire collant disparaît, les pastilles du hero font office de navigation */
  .faq-layout { grid-template-columns: 1fr; }
  .faq-aside { display: none; }
  .faq-end { grid-template-columns: 1fr; }
  .faq-end .hero-cta { flex-direction: row; flex-wrap: wrap; }
}

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

@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
  .client-slide { flex: 0 0 150px; width: 150px; height: 150px; padding: 20px; }
  .client-slide::before { inset: 9px; }
  .footer-top { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  /* comparatif Daneel / prestation : sous 720 px, le tableau à trois colonnes devient une pile
     de fiches (un critère par carte, les deux réponses étiquetées par un ::before), plus de
     défilement horizontal : deux colonnes sur trois étaient coupées sur téléphone. */
  .compare-wrap { overflow: visible; }
  .compare { min-width: 0; display: block; font-size: 14.5px; }
  .compare thead { display: none; }
  .compare tbody { display: flex; flex-direction: column; gap: 12px; }
  .compare tr { display: block; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-surface); }
  .compare td { display: block; padding: 12px 16px; border-bottom: 0; }
  .compare td.crit { width: auto; padding: 12px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-muted); }
  .compare td.daneel::before, .compare td.presta::before { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
  .compare td.daneel::before { content: "Daneel"; color: var(--color-accent-ai-text); }
  .compare td.presta::before { content: "Prestation classique"; color: var(--color-fg-faint); }
  .compare td.daneel, .compare tr:last-child td.daneel { border-radius: 0; }
  .faq-hero { padding: 52px 0 44px; }
  .faq { padding: 48px 0 64px; }
  .faq-group { margin-bottom: 52px; }
  .faq-group-head { gap: 12px; }
  .faq-item summary { padding: 16px 16px; font-size: 15.5px; gap: 12px; }
  .faq-body-inner { margin: 0 16px; padding-left: 0; }
  .faq-end { padding: 32px 24px; }
  .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
  section { padding: 64px 0; }
  .daneel-island { padding: 32px 24px; }
  .daneel-grid { margin-top: 28px; padding-top: 28px; }
  /* Sous 720 px, l'orbe n'est plus une réduction homothétique (à 0,48 les libellés devenaient
     illisibles) : anneaux plus petits, pastilles à taille réelle, et cinq des onze pastilles de
     l'anneau extérieur masquées (celles de rang pair) pour qu'elles ne se chevauchent pas sur
     une circonférence trois fois plus courte. Les diamètres inline (--d) sont surchargés en
     !important, seule façon de passer devant un style="…". Extension ≈ 320 px + une pastille :
     tient dans 390 px sans rien couper. */
  .hero-art { width: 100%; max-width: none; margin-top: 8px; }
  .orb { width: 100%; height: 372px; transform: none; }
  .orb-ring:nth-of-type(1), .orb-ring:nth-of-type(1) .orb-item { --d: 180px !important; }
  .orb-ring:nth-of-type(2), .orb-ring:nth-of-type(2) .orb-item { --d: 250px !important; }
  .orb-ring:nth-of-type(3), .orb-ring:nth-of-type(3) .orb-item { --d: 320px !important; }
  .orb-ring:nth-of-type(3) .orb-item:nth-child(2n) { display: none; }
  .orb-center { width: 92px; height: 92px; padding: 8px; }
  .orb-glow { width: 320px; height: 320px; }
  .orb .tp.xl { height: 36px; font-size: 14px; padding: 0 14px 0 11px; }
  .orb .tp.sm { height: 26px; font-size: 11.5px; }
  /* sous 720 px, les nœuds s'ancrent aux bords du cadre pour ne jamais en sortir */
  .flux-src { left: 0; transform: translate(0, -50%); }
  .flux-t1, .flux-t2, .flux-t3, .flux-t4, .flux-t5 { left: auto; right: 0; transform: translate(0, -50%); }
  /* version compacte du flux (hero Daneel et teaser) : cadre de 290 à 350 px de large */
  .flux { height: 340px; }
  .flux-teaser { height: 320px; }
  .flux .flux-src .tp { padding: 8px 10px; }
  .flux .flux-src strong { font-size: 14px; }
  .flux .flux-src small { display: none; }
  .flux .flux-core { left: 46%; }
  .flux .flux-core .icon-badge { width: 40px; height: 40px; border-radius: 10px; }
  .flux .tp.dark { height: 28px; font-size: 11.5px; padding: 0 9px 0 7px; }
  .cta-band { padding-bottom: 64px; }
  .cta-band-inner { padding: 32px 22px; border-radius: 16px; }
  .cta-band-actions .btn { width: 100%; }
  .why-founder { padding: 24px 20px; }
  .module-block { padding: 24px 18px; }
  .mi-gauge { grid-template-columns: 76px 1fr auto; }
}

@media (max-width: 400px) {
  /* téléphones étroits (360 px) : l'orbe garde ses trois anneaux, un peu plus serrés */
  .orb { height: 352px; }
  .orb-ring:nth-of-type(1), .orb-ring:nth-of-type(1) .orb-item { --d: 170px !important; }
  .orb-ring:nth-of-type(2), .orb-ring:nth-of-type(2) .orb-item { --d: 235px !important; }
  .orb-ring:nth-of-type(3), .orb-ring:nth-of-type(3) .orb-item { --d: 300px !important; }
  .orb-glow { width: 300px; height: 300px; }
}