/* ==========================================================================
   AZUR VISION — Système de design v2
   --------------------------------------------------------------------------
   Principes (voir tasks/todo.md) :
   1. Le CONTENU est opaque et très lisible. Le VERRE est réservé à la couche
      flottante (navigation + barre de recherche) — règle Apple : le matériau
      translucide sert la navigation, jamais le texte courant.
   2. Un seul accent : le bleu de la marque.
   3. Chaque section s'ouvre sur la question que se pose le visiteur (.q),
      puis y répond (h2).
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root {
  /* Surfaces — blanc froid cassé, jamais #fff en fond de page */
  --bg:        #f5f7fb;
  --bg-tint:   #edf1f8;
  --surface:   #ffffff;
  --surface-2: #f9fafd;

  /* Encre — bleu nuit, jamais #000 */
  --ink:   #0b1324;
  --ink-2: #3a4459;   /* texte secondaire  (≈ 9:1 sur --bg) */
  --ink-3: #5b6478;   /* texte tertiaire   (≈ 5,6:1 sur --bg) */

  /* Filets */
  --line:   #dce2ec;
  --line-2: #c9d2e1;

  /* Accent unique : le bleu de la marque */
  --blue:      #2547d0;
  --blue-hi:   #1b35a6;  /* survol / appui */
  --blue-wash: #e8edfc;
  --blue-soft: #c7d3f7;

  --ok:      #12805c;
  --ok-wash: #e3f4ed;
  --ko:      #b4232f;
  --ko-wash: #fbe9eb;

  /* Panneau sombre « contenu » (CTA final) */
  --night:   #0a1330;
  --night-2: #13204a;

  /* Typo */
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Rayons : serrés à l'intérieur, plus doux sur les conteneurs.
     La capsule (999px) n'existe QUE sur la couche de verre. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Ombres teintées bleu nuit (jamais du noir pur) */
  --sh-1: 0 1px 2px rgba(15, 28, 70, .06), 0 1px 1px rgba(15, 28, 70, .04);
  --sh-2: 0 12px 32px -14px rgba(15, 28, 70, .22), 0 3px 8px -3px rgba(15, 28, 70, .08);
  --sh-3: 0 30px 60px -24px rgba(15, 28, 70, .30), 0 8px 18px -8px rgba(15, 28, 70, .10);

  /* Verre (couche flottante uniquement) */
  --glass-bg:     rgba(255, 255, 255, .58);
  --glass-border: rgba(255, 255, 255, .62);
  --glass-blur:   blur(22px) saturate(180%);

  /* Mouvement : ressort « critiquement amorti » approché en cubic-bezier */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --t-fast:   160ms;
  --t-base:   280ms;

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --nav-h: 64px;

  /* Échelle de z-index : pas de 9999 au hasard */
  --z-canvas: 0;
  --z-content: 1;
  --z-dock: 40;
  --z-nav: 50;
  --z-panel: 60;
  --z-modal: 80;
  --z-toast: 90;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 32px);
}
body {
  font-family: var(--font);
  font-size: 1.0625rem;          /* 17 px : confortable pour un public non technique */
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--blue-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-toast);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 500; transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

.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;
}

/* ---------- 3. Typographie ---------------------------------------------- */
/* L'interlettrage dépend de la taille : négatif en grand, neutre en courant. */
.display {
  font-size: clamp(2.35rem, 5.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.038em;
  font-weight: 600;
}
.h2 {
  font-size: clamp(1.8rem, 3.3vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 600;
}
.h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  font-weight: 600;
}
.display .soft, .h2 .soft { color: var(--ink-3); }

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
}
.muted { color: var(--ink-3); }
.body-copy { color: var(--ink-2); max-width: 62ch; }
.tnum { font-variant-numeric: tabular-nums; }

/* Étiquette mono : repère de lecture et « tag » technique */
.mono {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-3);
}

/* La question du visiteur, posée avant chaque réponse */
.q {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .01em;
  color: var(--blue);
  margin-bottom: 18px;
}
.q::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
}

/* Surlignage sobre d'un mot-clé (pas de dégradé) */
.mark {
  background: linear-gradient(transparent 62%, var(--blue-wash) 62%);
  padding: 0 .08em;
}

/* ---------- 4. Mise en page -------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  position: relative;
  padding-block: clamp(80px, 11vw, 136px) clamp(88px, 12vw, 148px); /* bas un peu plus grand : correction optique */
}
.section--tint { background: var(--bg-tint); }
.section--rule { border-top: 1px solid var(--line); }

.section__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section__head .body-copy { margin-top: 18px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.split--wide-left  { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--center { align-items: center; }
@media (max-width: 880px) {
  .split, .split--wide-left { grid-template-columns: 1fr; }
}

/* ---------- 5. Boutons -------------------------------------------------- */
.btn {
  --_bg: var(--surface);
  --_fg: var(--ink);
  --_bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--ink-3); }
/* Retour tactile IMMÉDIAT à l'appui (pointer-down), pas au relâchement */
.btn:active { transform: scale(.975); transition-duration: 90ms; }

.btn--primary {
  --_bg: var(--blue); --_fg: #fff; --_bd: var(--blue);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -10px rgba(37, 71, 208, .7);
}
.btn--primary:hover { --_bg: var(--blue-hi); --_bd: var(--blue-hi); }

.btn--dark { --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink); }
.btn--dark:hover { --_bg: #1c2742; --_bd: #1c2742; }

.btn--light { --_bg: #fff; --_fg: var(--night); --_bd: #fff; }
.btn--light:hover { --_bg: #e9eefc; --_bd: #e9eefc; }

.btn--sm { min-height: 38px; padding: 0 14px; font-size: .92rem; border-radius: 9px; }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 1.05rem; }

.btn .arr { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* Lien texte : action tertiaire, moins de bruit qu'un 2e bouton */
.link {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--blue); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--blue-soft);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.link:hover { text-decoration-color: var(--blue); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* ---------- 6. Verre (couche flottante) --------------------------------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  /* arête haute brillante = la lumière qui accroche le matériau */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(15, 28, 70, .05),
    var(--sh-2);
}
/* reflet spéculaire : une lame de lumière en haut du matériau */
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%);
  mix-blend-mode: soft-light;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .96); }
}

/* ---------- 7. Navigation flottante ------------------------------------ */
.gnav {
  position: fixed; z-index: var(--z-nav);
  top: 14px; left: 50%;
  width: min(calc(100% - 24px), 1140px);
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  transition: top var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.gnav.scrolled { top: 10px; }
.gnav__inner {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  height: var(--nav-h);
  padding: 0 10px 0 22px;
}
.gnav__logo { flex-shrink: 0; }

/* Logo horizontal : le symbole « A » + le nom en vrai texte (net à toute taille) */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand img { width: 30px; height: 30px; }
.brand__name {
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .16em;       /* rappelle l'espacement large du logo officiel */
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__name span { font-weight: 400; color: var(--ink-2); }
.brand--lg img { width: 36px; height: 36px; }
.brand--lg .brand__name { font-size: 1.05rem; }

.gnav__links {
  display: flex; align-items: center; gap: 2px;
  margin-inline: auto;
}
.gnav__links > a {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gnav__links > a:hover { color: var(--ink); background: rgba(11, 19, 36, .05); }
.gnav__links > a.active { color: var(--ink); background: rgba(37, 71, 208, .09); }

.gnav__end { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gnav__end .btn { border-radius: var(--r-pill); }
.btn--ghost-nav { --_bg: transparent; --_bd: transparent; color: var(--ink-2); }
.btn--ghost-nav:hover { --_bg: rgba(11, 19, 36, .05); --_bd: transparent; color: var(--ink); }

.lang-toggle {
  min-width: 40px; height: 38px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease);
}
.lang-toggle:hover { background: rgba(11, 19, 36, .06); }
.lang-toggle--mobile { display: none; }

/* Fine barre de progression de lecture, dans le bas de la capsule */
.gnav__progress {
  position: absolute; left: 26px; right: 26px; bottom: 0;
  height: 2px; border-radius: 2px;
  background: transparent; overflow: hidden; pointer-events: none;
}
.gnav__progress span {
  display: block; height: 100%; width: 100%;
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(var(--read, 0));
  opacity: .75;
}

.gnav__burger {
  display: none;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  position: relative;
}
.gnav__burger span {
  position: absolute; left: 13px; right: 13px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-base) var(--ease), top var(--t-base) var(--ease);
}
.gnav__burger span:nth-child(1) { top: 18px; }
.gnav__burger span:nth-child(2) { top: 25px; }
.menu-open .gnav__burger span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-open .gnav__burger span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 1099px) {   /* menu replié tant qu'il ne tient pas sur une ligne (≈1100 px) */
  .gnav { border-radius: 22px; }
  .gnav__inner { padding: 0 6px 0 16px; }
  .gnav__links, .gnav__end .btn--ghost-nav, .gnav__end .lang-toggle { display: none; }
  .gnav__end .btn--primary { display: none; }
  .gnav__burger { display: block; }
  .gnav__end { margin-left: auto; }
  .lang-toggle--mobile { display: inline-block; margin-left: auto; }

  /* Menu mobile : une feuille OPAQUE sous la capsule (pas de verre sur verre) */
  .menu-open .gnav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    margin: 0; padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--sh-3);
    animation: sheet-in var(--t-base) var(--ease) both;
  }
  /* « > a » : les boutons du bas du menu gardent leur propre style */
  .menu-open .gnav__links > a { padding: 14px 14px; font-size: 1.05rem; border-radius: 12px; }
  .menu-open .gnav__links .gnav__mobile-cta { display: grid; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  .menu-open .gnav__links .gnav__mobile-cta .btn { width: 100%; }
}
.gnav__mobile-cta { display: none; }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(64px, 10vw, 120px));
  padding-bottom: clamp(96px, 12vw, 150px);
  overflow: hidden;
}
/* La grille technique très discrète, masquée vers le bas */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(37, 71, 208, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 71, 208, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 30%, transparent 78%);
}
#heroCanvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 26px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .7);
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-wash);
}
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 34px; }

.facts {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 560px;
}
.facts li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .92rem; color: var(--ink-2);
}
.facts svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }

/* ---------- 9. « Console » : une automatisation expliquée --------------- */
.flow {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.flow__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.flow__head .mono { color: var(--ink-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  background: var(--ok-wash); color: var(--ok);
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--blue { background: var(--blue-wash); color: var(--blue); }

.flow__steps { position: relative; padding: 10px 18px 16px; }
/* le rail vertical qui relie les étapes */
.flow__steps::before {
  content: '';
  position: absolute; left: 35px; top: 34px; bottom: 44px;
  width: 1px; background: var(--line-2);
}
/* l'impulsion qui parcourt le rail : la donnée qui circule */
.flow__steps::after {
  content: '';
  position: absolute; left: 33px; top: 34px;
  width: 5px; height: 26px; border-radius: 3px;
  background: linear-gradient(to bottom, transparent, var(--blue), transparent);
  animation: flow-pulse 3.4s var(--ease-io) infinite;
}
@keyframes flow-pulse {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(calc(var(--rail, 190px))); opacity: 0; }
}
.flow__step {
  position: relative;
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  align-items: start;
  padding: 12px 0;
}
.flow__icon {
  position: relative; z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.flow__icon svg { width: 17px; height: 17px; }
.flow__step--ai .flow__icon { background: var(--blue); border-color: var(--blue); color: #fff; }
.flow__step--done .flow__icon { background: var(--ok-wash); border-color: #bfe3d3; color: var(--ok); }
.flow__label { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-bottom: 2px; }
.flow__text { font-size: .97rem; line-height: 1.4; color: var(--ink); font-weight: 500; }
.flow__foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; color: var(--ink-3);
}

/* ---------- 10. « C'est pour moi ? » ----------------------------------- */
.checks { display: grid; gap: 2px; }
.checks li {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.08rem; line-height: 1.45;
}
.checks li:first-child { border-top: 1px solid var(--line); }
.checks svg { width: 22px; height: 22px; color: var(--blue); margin-top: 1px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 3vw, 32px);
}
.panel + .panel { margin-top: 16px; }
.panel .h3 { margin-bottom: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
  padding: 6px 11px;
  border-radius: var(--r-xs);
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-2);
}

/* ---------- 11. Offre : fiche technique (pas 3 cartes identiques) ------- */
.specs { border-top: 1px solid var(--ink); }
.spec {
  display: grid;
  grid-template-columns: 128px minmax(0, 1.05fr) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 38px) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-base) var(--ease);
}
.spec__idx { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); padding-top: 6px; white-space: nowrap; }
.spec__title { font-size: clamp(1.35rem, 2.1vw, 1.7rem); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; }
.spec__desc { color: var(--ink-2); max-width: 44ch; }
.spec__uses { display: grid; gap: 8px; padding-top: 4px; }
.spec__uses li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: .97rem; color: var(--ink-2);
}
.spec__uses li::before { content: '→'; font-family: var(--mono); color: var(--blue); font-size: .85rem; }
.spec__cta { padding-top: 4px; }
@media (max-width: 960px) {
  .spec { grid-template-columns: 1fr; gap: 14px; }
  .spec__idx { padding-top: 0; }
}

/* ---------- 12. Démo vocale -------------------------------------------- */
.voice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: clamp(22px, 3vw, 30px);
}
.voice__top { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.voice__avatar {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
}
.voice__avatar svg { width: 22px; height: 22px; }
.voice__name { font-weight: 600; line-height: 1.2; }
.voice__bars {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 92px;
  margin-bottom: 22px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
}
.voice__bars i {
  width: 4px; border-radius: 3px;
  background: var(--blue);
  height: 22%;
  animation: bar 1.25s var(--ease-io) infinite alternate;
}
/* amplitudes et décalages variés : une vraie voix n'est pas régulière */
.voice__bars i:nth-child(3n)   { animation-duration: .95s; }
.voice__bars i:nth-child(4n+1) { animation-duration: 1.45s; }
.voice__bars i:nth-child(5n)   { animation-delay: -.4s; }
.voice__bars i:nth-child(2n)   { animation-delay: -.8s; background: #5f7be3; }
@keyframes bar { from { height: 16%; } to { height: 74%; } }
.voice__list { display: grid; gap: 10px; margin-bottom: 24px; }
.voice__list li { display: flex; gap: 10px; align-items: center; font-size: .97rem; color: var(--ink-2); }
.voice__list svg { width: 18px; height: 18px; color: var(--ok); flex-shrink: 0; }

/* ---------- 13. Avant / après ------------------------------------------ */
.compare {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare__col { padding: clamp(24px, 3.4vw, 38px); }
.compare__col + .compare__col { border-left: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 760px) { .compare__col + .compare__col { border-left: 0; border-top: 1px solid var(--line); } }
.compare__title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.compare ul { display: grid; gap: 14px; }
.compare li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.compare li svg { width: 20px; height: 20px; margin-top: 1px; }
.compare__col--before li { color: var(--ink-2); }
.compare__col--before li svg { color: var(--ko); }
.compare__col--after li svg { color: var(--ok); }
.chip--ko { background: var(--ko-wash); color: var(--ko); }

/* ---------- 14. Témoignages : 1 citation forte + 2 secondaires --------- */
.voices {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 880px) { .voices { grid-template-columns: 1fr; } }
.voices--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.voices__side { display: grid; gap: 16px; }
.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 3vw, 30px);
  display: flex; flex-direction: column; gap: 20px;
}
.quote p { color: var(--ink); line-height: 1.55; }
.quote--lead { padding: clamp(28px, 4vw, 44px); justify-content: space-between; }
/* seulement le texte cité, pas la signature (qui contient aussi un <p>) */
.quote--lead > p { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.42; letter-spacing: -.012em; }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__initials {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-wash); color: var(--blue);
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
}
.quote__name { font-weight: 600; font-size: .95rem; line-height: 1.2; font-style: normal; }
.quote__role { font-size: .88rem; color: var(--ink-3); }

/* ---------- 15. Différences (grille à filets, pas de cartes) ----------- */
.reasons {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; } }
.reason {
  padding: 30px 32px 32px 0;
  border-bottom: 1px solid var(--line);
}
.reason:nth-child(odd) { border-right: 1px solid var(--line); }
.reason:nth-child(even) { padding-left: 32px; padding-right: 0; }
@media (max-width: 760px) {
  .reason, .reason:nth-child(even) { padding: 26px 0; border-right: 0; }
}
.reason__icon { width: 26px; height: 26px; color: var(--blue); margin-bottom: 16px; }
.reason .h3 { margin-bottom: 8px; }
.reason p { color: var(--ink-2); max-width: 42ch; }

/* ---------- 16. Étapes ------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.step--first { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.step__n { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }
.step .h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: .98rem; }

.price {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px 24px; align-items: center;
  margin-top: 16px;
  padding: 22px 26px;
  border-radius: var(--r-md);
  background: var(--blue-wash);
  border: 1px solid var(--blue-soft);
}
.price__icon { width: 26px; height: 26px; color: var(--blue); }
.price p { color: var(--ink); max-width: 70ch; }
@media (max-width: 760px) { .price { grid-template-columns: 1fr; } }

/* ---------- 17. Bloc « posez votre question » dans la page ------------- */
.ask {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 640px;
  min-height: 62px;
  padding: 0 10px 0 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  text-align: left;
  color: var(--ink-3);
  font-size: 1.05rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ask:hover { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-wash), var(--sh-2); }
.ask svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }
.ask span { flex: 1; }
.kbd {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-family: var(--mono); font-size: .75rem; color: var(--ink-3);
}
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 760px; }
.suggest button {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .93rem; color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.suggest button:hover { border-color: var(--blue); color: var(--blue); }
.suggest button:active { transform: scale(.97); }

/* ---------- 18. CTA final (panneau sombre CONTENU, pas pleine largeur) - */
.final {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(120% 140% at 0% 0%, var(--night-2) 0%, var(--night) 55%);
  color: #eef2ff;
  padding: clamp(44px, 7vw, 88px) clamp(26px, 6vw, 80px);
}
#ctaCanvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.final .q { color: #9fb3ff; }
.final h2 { color: #fff; max-width: 16ch; margin-bottom: 18px; }
.final p { color: #c3cdf0; max-width: 52ch; margin-bottom: 32px; font-size: 1.1rem; }
.final .facts { border-top-color: rgba(255,255,255,.14); }
.final .facts li { color: #c3cdf0; }
.final .facts svg { color: #9fb3ff; }

/* ---------- 19. Pied de page ------------------------------------------- */
.footer {
  padding: 64px 0 120px;   /* marge basse : la barre de recherche flotte au-dessus */
  border-top: 1px solid var(--line);
  margin-top: clamp(80px, 10vw, 120px);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 1060px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__brand .brand { margin-bottom: 16px; }
.footer__brand p { color: var(--ink-3); font-size: .95rem; max-width: 34ch; }
.footer h4 { font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--ink-3); margin-bottom: 14px; letter-spacing: .02em; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: var(--ink-2); font-size: .95rem; transition: color var(--t-fast) var(--ease); }
.footer__col a:hover { color: var(--blue); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-3);
}
.footer__bottom a:hover { color: var(--blue); }

/* ---------- 20. Barre flottante « search & get » ----------------------- */
.dock {
  position: fixed; z-index: var(--z-dock);
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 600px);
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  transition: transform var(--t-base) var(--ease), bottom var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
/* en défilant vers le bas, la barre se fait plus discrète (comme Safari) */
.dock.is-tucked { transform: translateX(-50%) translateY(6px) scale(.94); opacity: .9; }
.dock.is-open  { transform: translateX(-50%); opacity: 1; }
/* Verre adaptatif : au-dessus d'un fond sombre, le matériau s'épaissit
   pour que le texte reste lisible (comme la « vibrancy » d'Apple). */
.dock.on-dark { --glass-bg: rgba(255, 255, 255, .9); }
/* la bannière cookies s'affiche en bas : on remonte la barre au-dessus */
body:has(.cookie-banner) .dock { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 96px); }

.dock__bar { display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 7px 0 18px; }
.dock__icon { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }
.dock__input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font-size: 1rem; color: var(--ink);
}
.dock__input::placeholder { color: var(--ink-3); opacity: 1; }
.dock__input::-webkit-search-cancel-button { display: none; }
.dock__kbd { margin-right: 4px; }
.dock__clear {
  display: none; width: 34px; height: 34px; border-radius: var(--r-pill);
  color: var(--ink-3); place-items: center;
}
.dock__clear svg { width: 16px; height: 16px; }
.dock.has-value .dock__clear { display: grid; }
.dock.has-value .dock__kbd { display: none; }
.dock__cta { border-radius: var(--r-pill) !important; }
.dock__cta-short { display: none; }
@media (max-width: 560px) {
  .dock__kbd { display: none; }
  .dock__cta-long { display: none; }
  .dock__cta-short { display: inline; }
  .dock__bar { height: 56px; padding-left: 16px; }
}
@media (hover: none) { .dock__kbd { display: none; } }

/* Le panneau de réponses : OPAQUE (jamais du verre sur du verre) */
.answers {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
  max-height: min(64vh, 560px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform-origin: 50% 100%;   /* s'ouvre DEPUIS la barre qui l'a déclenché */
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.98);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.dock.is-open .answers {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s;
}
.answers__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
}
.answers__close { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); }
.answers__close:hover { background: var(--bg); color: var(--ink); }
.answers__close svg { width: 16px; height: 16px; }
.answers__body { overflow-y: auto; overscroll-behavior: contain; padding: 8px; }

/* la meilleure réponse, affichée directement */
.hit-top {
  margin: 6px 6px 10px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: var(--blue-wash);
  border: 1px solid var(--blue-soft);
}
.hit-top__q { font-weight: 600; font-size: 1.02rem; line-height: 1.35; margin-bottom: 8px; letter-spacing: -.01em; }
.hit-top__a { color: var(--ink-2); font-size: .97rem; line-height: 1.55; margin-bottom: 12px; }

.hits__label { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); padding: 10px 12px 6px; }
.hit {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  text-align: left;
  font-size: .97rem; line-height: 1.35;
  color: var(--ink);
}
.hit__meta { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); white-space: nowrap; }
.hit:hover, .hit[aria-selected="true"] { background: var(--bg); }
.hit[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--blue-soft); }
.hit mark, .hit-top mark { background: transparent; color: var(--blue); font-weight: 600; }

.answers__empty { padding: 22px 18px 20px; }
.answers__empty p { color: var(--ink-2); margin: 6px 0 16px; font-size: .97rem; }
.answers__foot {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .7rem; color: var(--ink-3);
}
@media (hover: none) { .answers__foot { display: none; } }

/* voile léger sur mobile quand le panneau est ouvert */
.dock-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-dock) - 1);
  background: rgba(11, 19, 36, .18);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.dock-open .dock-scrim { opacity: 1; visibility: visible; transition: opacity var(--t-base) var(--ease), visibility 0s; }
@media (min-width: 761px) { .dock-scrim { display: none; } }

/* ---------- 21. Modale Calendly (ids conservés pour js/main.js) -------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.modal.active { display: grid; place-items: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(11, 19, 36, .5); animation: fade-in var(--t-base) var(--ease) both; }
.modal__panel {
  position: relative;
  width: min(calc(100% - 24px), 1000px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: pop-in var(--t-base) var(--ease) both;
}
.modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; color: var(--ink-2);
}
.modal__close:hover { background: var(--bg); }
.modal__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 820px) { .modal__layout { grid-template-columns: 1fr; } }
.modal__left { padding: 36px 32px; border-right: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 820px) { .modal__left { border-right: 0; border-bottom: 1px solid var(--line); padding: 30px 22px; } }
.modal__title { margin: 14px 0 10px; }
.modal__sub { color: var(--ink-2); margin-bottom: 24px; }
.modal__agenda-title { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); margin-bottom: 12px; }
.modal__agenda-list { display: grid; gap: 10px; margin-bottom: 24px; }
.modal__agenda-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--ink-2); font-size: .97rem; }
.modal__agenda-list li::before { content: '✓'; color: var(--ok); font-weight: 600; }
.modal__note { padding: 14px 16px; border-radius: 12px; background: var(--blue-wash); color: var(--ink-2); font-size: .92rem; }
.modal__right { padding: 30px 24px 24px; min-height: 520px; display: flex; flex-direction: column; }
.modal__right-label { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); margin-bottom: 8px; }
.calendly-inline-widget { flex: 1; min-height: 480px; }
.modal__mobile { display: none; gap: 10px; flex-direction: column; margin-top: 12px; }
@media (max-width: 820px) {
  .calendly-inline-widget { display: none; }
  .modal__right { min-height: 0; }
  .modal__mobile { display: flex; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- 22. Bannière cookies (injectée par js/main.js) ------------- */
.cookie-banner {
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 600px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 14px 14px 20px;
  border-radius: 18px;
  background: var(--ink); color: #dfe6f7;
  box-shadow: var(--sh-3);
  animation: pop-in var(--t-base) var(--ease) both;
}
.cookie-banner__text { font-size: .88rem; line-height: 1.45; }
.cookie-banner__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner__btn { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: .9rem; font-weight: 500; }
.cookie-banner__btn--accept { background: #fff; color: var(--ink); }
.cookie-banner__btn--refuse { color: #dfe6f7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
@media (max-width: 560px) { .cookie-banner { flex-direction: column; align-items: stretch; } }

/* ---------- 23. Apparition au défilement (.anim → .visible par main.js) - */
.anim { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.anim.visible { opacity: 1; transform: none; }
.anim-d1 { transition-delay: 70ms; }
.anim-d2 { transition-delay: 140ms; }
.anim-d3 { transition-delay: 210ms; }
/* sans JavaScript, tout reste visible */
.no-js .anim { opacity: 1; transform: none; }

/* ---------- 24. Accessibilité : préférences système --------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .anim { opacity: 1; transform: none; }
  .flow__steps::after { display: none; }
  .voice__bars i { height: 40%; }
  .voice__bars i:nth-child(odd) { height: 62%; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before { display: none; }
}
@media (prefers-contrast: more) {
  :root { --line: #9aa6bb; --line-2: #7d8aa3; --ink-2: #1f2940; --ink-3: #2f3a52; }
  .glass { background: #fff; border-color: var(--ink); }
}

/* ---------- 25. Impression ------------------------------------------- */
@media print {
  .gnav, .dock, .dock-scrim, #heroCanvas, #ctaCanvas, .cookie-banner, .modal { display: none !important; }
  .anim { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   26. SCHÉMAS EXPLICATIFS ANIMÉS — rendre l'automatisation VISIBLE
   --------------------------------------------------------------------------
   Une automatisation est invisible : les données circulent sans témoin.
   Ces composants montrent trois choses : le TRAJET (.canvas, .hub),
   la CONVERSATION (.convo, .orb) et l'EFFORT SUPPRIMÉ (.effort, .delta).
   Toute animation ne démarre que quand le schéma est à l'écran
   ([data-visual] → .is-live, posé par js/av-visuals.js) et s'éteint avec
   prefers-reduced-motion. Références Refero : FlowMapp (canevas), Cartesia (orbe).
   ========================================================================== */

/* ---------- 26.1 En-tête des pages intérieures ------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 96px));
  padding-bottom: clamp(64px, 9vw, 112px);
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(37, 71, 208, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 71, 208, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 30% 20%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 30% 20%, #000 25%, transparent 75%);
}
.page-hero .display { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 20px; }
.page-hero .lead { margin-bottom: 30px; }
.page-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
@media (max-width: 960px) { .page-hero__grid { grid-template-columns: 1fr; } }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 26px;
  font-family: var(--mono); font-size: .76rem; color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-hidden] { opacity: .5; }

/* ---------- 26.2 Sommaire « sur cette page » (les questions) ----------- */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.toc a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .9rem; color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.toc a::before { content: attr(data-n); font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.toc a:hover, .toc a.is-current { border-color: var(--blue); color: var(--blue); }

/* ---------- 26.3 Canevas de workflow (le trajet d'une donnée) ---------- */
.canvas {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.canvas__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.canvas__body {
  position: relative;
  padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 32px);
  /* fond « table de travail » pointillé, comme un éditeur de schémas */
  background-image: radial-gradient(rgba(37, 71, 208, .16) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.canvas__legend {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-2);
}
.lane { display: flex; align-items: center; }
.lane + .lane { margin-top: 18px; }

.node {
  position: relative; z-index: 1;
  flex: 0 1 190px; min-width: 0;
  display: grid; gap: 4px;
  padding: 14px 14px 13px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  opacity: .55;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease), box-shadow 300ms var(--ease);
}
.node__ico {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--bg); color: var(--ink-2);
  margin-bottom: 6px;
}
.node__ico svg { width: 16px; height: 16px; }
.node__k { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
.node__t { font-size: .92rem; font-weight: 500; line-height: 1.3; }
.node--ai { border-color: var(--blue-soft); }
.node--ai .node__ico { background: var(--blue); color: #fff; }
.node--ok .node__ico { background: var(--ok-wash); color: var(--ok); }
/* nœud de décision : l'icône est posée en losange */
.node--if .node__ico { background: #fff4e0; color: #9a5b00; transform: rotate(45deg); border-radius: 6px; }
.node--if .node__ico svg { transform: rotate(-45deg); }

/* les nœuds s'allument l'un après l'autre (ordre donné par --i) */
.is-live .node { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 260ms); }
.is-live .node--ai { box-shadow: 0 0 0 4px var(--blue-wash), var(--sh-1); }

.edge {
  position: relative;
  flex: 1 1 28px; min-width: 22px;
  height: 2px;
  background: var(--line-2);
}
.edge::after {
  content: ''; position: absolute; right: -1px; top: -4px;
  border: 5px solid transparent; border-left: 6px solid var(--line-2); border-right: 0;
}
.edge i {                                  /* le « paquet » de donnée qui circule */
  position: absolute; left: 0; top: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 71, 208, .15);
  opacity: 0;
}
.is-live .edge i { animation: packet-x 2.6s var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * 260ms + 400ms); }
@keyframes packet-x {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
.edge__label {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-family: var(--mono); font-size: .66rem; color: var(--ink-3);
  white-space: nowrap; background: var(--surface); padding: 0 4px;
}
@media (max-width: 760px) {
  .lane { flex-direction: column; align-items: stretch; }
  .node { flex-basis: auto; }
  .edge { flex: 0 0 30px; width: 2px; height: 30px; min-width: 0; margin-left: 29px; }
  .edge::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 6px solid var(--line-2); border-bottom: 0; }
  .edge i { left: -3px; top: 0; }
  .is-live .edge i { animation-name: packet-y; }
  .edge__label { left: 18px; bottom: auto; top: 50%; transform: translateY(-50%); }
}
@keyframes packet-y {
  0%   { top: 0; opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}

/* ---------- 26.4 Moyeu d'intégration (l'IA au centre de vos outils) ---- */
.hub { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin-inline: auto; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__lines line { stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 4 5; }
.is-live .hub__lines line { animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.hub__core {
  position: absolute; left: 50%; top: 50%;
  width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #5b78f0, var(--blue) 55%, #1a2f8f);
  color: #fff;
  box-shadow: 0 0 0 10px var(--blue-wash), 0 20px 40px -16px rgba(37, 71, 208, .6);
  font-weight: 600; font-size: clamp(.8rem, 1.6vw, .98rem); line-height: 1.2;
  padding: 10px;
}
.is-live .hub__core { animation: core-breathe 3.2s var(--ease-io) infinite; }
@keyframes core-breathe {
  50% { box-shadow: 0 0 0 18px rgba(37, 71, 208, .08), 0 20px 40px -16px rgba(37, 71, 208, .6); }
}
.hub__sat {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) scale(.9);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font-size: .86rem; font-weight: 500; white-space: nowrap;
  opacity: 0;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.hub__sat svg { width: 16px; height: 16px; color: var(--blue); }
.is-live .hub__sat { opacity: 1; transform: translate(-50%, -50%); transition-delay: calc(var(--i, 0) * 110ms); }
@media (max-width: 480px) { .hub__sat { font-size: .74rem; padding: 6px 8px; } }

/* ---------- 26.5 Orbe vocal (la voix rendue visible) ------------------- */
.orb { position: relative; width: min(220px, 60vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.orb__core {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 32%),
    radial-gradient(circle at 70% 75%, #6f8cff, rgba(111,140,255,0) 55%),
    radial-gradient(circle at 50% 50%, #2547d0, #1a2f8f);
  box-shadow: 0 24px 50px -18px rgba(37, 71, 208, .65);
}
.orb__ring { position: absolute; inset: 19%; border-radius: 50%; border: 1.5px solid rgba(37, 71, 208, .35); opacity: 0; }
.is-live .orb__core { animation: orb-talk 1.8s var(--ease-io) infinite; }
.is-live .orb__ring { animation: orb-ring 2.4s var(--ease) infinite; }
.is-live .orb__ring:nth-child(2) { animation-delay: .8s; }
.is-live .orb__ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes orb-talk { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.06); } 60% { transform: scale(.97); } }
@keyframes orb-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }

/* ---------- 26.6 Conversation qui se déroule (appel ou chat) ----------- */
.convo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.convo__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.convo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); }
.convo__timer { margin-left: auto; font-variant-numeric: tabular-nums; }
.convo__body { display: grid; gap: 10px; padding: 18px 16px 20px; min-height: 280px; align-content: start; }
.msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: .95rem; line-height: 1.45;
  opacity: 0; transform: translateY(8px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.msg.is-shown { opacity: 1; transform: none; }
.msg__who { display: block; font-family: var(--mono); font-size: .66rem; margin-bottom: 2px; opacity: .75; }
.msg--client { justify-self: start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg--agent  { justify-self: end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
/* action système : ce que l'agent FAIT pendant qu'il parle */
.msg--sys {
  justify-self: center; max-width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ok-wash); color: var(--ok);
  font-family: var(--mono); font-size: .74rem;
}
.typing { justify-self: end; display: none; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--blue-wash); }
.typing.is-shown { display: inline-flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: typing 1s var(--ease-io) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.convo__replay {
  display: none; margin: 0 16px 16px;
  font-family: var(--mono); font-size: .74rem; color: var(--blue);
}
.convo.is-done .convo__replay { display: inline-flex; }

/* ---------- 26.7 L'effort supprimé : plusieurs gestes → un seul -------- */
.effort { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 3vw, 28px); align-items: center; }
@media (max-width: 760px) { .effort { grid-template-columns: 1fr; } .effort__arrow { transform: rotate(90deg); justify-self: center; } }
.effort__col { padding: 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.effort__col h3 { margin-bottom: 14px; }
.effort__list { display: grid; gap: 8px; }
.effort__list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bg);
  font-size: .93rem;
  transition: opacity 400ms var(--ease);
}
.effort__list li span:first-child { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); }
/* un geste « absorbé » par l'automatisation : barré puis estompé */
.effort__list li.is-done { opacity: .42; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.effort__arrow { width: 44px; height: 44px; color: var(--blue); }
.effort__auto {
  display: grid; place-items: center; text-align: center; gap: 10px;
  min-height: 100%;
  padding: 28px 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  transition: border-color 500ms var(--ease), background 500ms var(--ease), box-shadow 500ms var(--ease);
}
.effort__auto svg { width: 40px; height: 40px; color: var(--ink-3); transition: color 500ms var(--ease); }
.effort__auto.is-on { border: 1px solid var(--ok); background: var(--ok-wash); box-shadow: 0 0 0 4px rgba(18, 128, 92, .08); }
.effort__auto.is-on svg { color: var(--ok); }

/* ---------- 26.8 Avant → après (chiffres PUBLIÉS d'une étude de cas) --- */
.delta { display: grid; gap: 14px; }
.delta__row { display: grid; gap: 6px; }
.delta__label { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.delta__label b { font-variant-numeric: tabular-nums; }
.delta__track { height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.delta__bar {
  display: block; height: 100%; border-radius: 6px;
  width: var(--v); transform-origin: left; transform: scaleX(0);
  transition: transform 1100ms var(--ease);
  background: var(--line-2);
}
.delta__bar--after { background: var(--blue); }
.is-live .delta__bar { transform: scaleX(1); }
.is-live .delta__bar--after { transition-delay: 350ms; }

/* ---------- 26.9 Étude de cas : problème → solution → résultat -------- */
.case { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 36px); }
.case + .case { margin-top: 18px; }
.case__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.case__path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .case__path { grid-template-columns: 1fr; } .case__arrow { transform: rotate(90deg); justify-self: center; } }
.case__step { padding: 16px; border-radius: 14px; background: var(--bg); }
.case__step--sol { background: var(--blue-wash); }
.case__step--res { background: var(--ok-wash); }
.case__step .mono { display: block; margin-bottom: 6px; }
.case__step p { font-size: .95rem; line-height: 1.45; }
.case__step ul { display: grid; gap: 6px; }
.case__step li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: .93rem; line-height: 1.4; }
.case__step li::before { content: '✓'; color: var(--ok); font-weight: 600; }
.case__arrow { align-self: center; width: 22px; height: 22px; color: var(--ink-3); }

/* ---------- 26.10 Rail d'étapes qui se remplit au défilement ---------- */
.rail { position: relative; display: grid; gap: 18px; padding-left: 64px; }
.rail::before, .rail::after { content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; }
.rail::before { background: var(--line); }
.rail::after { background: var(--blue); transform-origin: top; transform: scaleY(var(--p, 0)); }
.rail__step { position: relative; }
.rail__dot {
  position: absolute; left: -64px; top: 0;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: .8rem; color: var(--ink-3);
  transition: background 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease);
}
.rail__step.is-reached .rail__dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.rail__card { padding: clamp(20px, 3vw, 28px); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.rail__card .h3 { margin: 8px 0 10px; }
.rail__card p { color: var(--ink-2); }
.rail__card ul { display: grid; gap: 8px; margin-top: 14px; }
.rail__card li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--ink-2); font-size: .97rem; }
.rail__card li::before { content: '→'; font-family: var(--mono); color: var(--blue); }

/* ---------- 26.11 Carte de La Réunion (schéma, pas à l'échelle) -------- */
.island { position: relative; max-width: 520px; margin-inline: auto; }
.island svg { width: 100%; height: auto; overflow: visible; }
.island__land { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.island__relief { fill: none; stroke: var(--line); stroke-width: 1; }
.island__pin .dot { fill: var(--blue); }
.island__pin .halo { fill: var(--blue); opacity: .18; transform-box: fill-box; transform-origin: center; }
.island__pin--home .dot, .island__pin--home .halo { fill: var(--ok); }
.is-live .island__pin .halo { animation: pin-pulse 2.4s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 180ms); }
@keyframes pin-pulse { from { transform: scale(.6); opacity: .35; } to { transform: scale(2.4); opacity: 0; } }
.island text { font-family: var(--font); font-size: 12px; fill: var(--ink-2); }
.island text.home { font-weight: 600; fill: var(--ink); }
.island__note { text-align: center; margin-top: 10px; }

/* ---------- 26.12 Grilles et blocs utilitaires ------------------------ */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 880px) { .duo, .trio { grid-template-columns: 1fr; } }
.tile { padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.tile__icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-wash); color: var(--blue);
  margin-bottom: 16px;
}
.tile__icon svg { width: 20px; height: 20px; }
.tile .h3 { margin-bottom: 8px; }
.tile p { color: var(--ink-2); font-size: .98rem; }
.bullets { display: grid; gap: 10px; }
/* Puce en position absolue (et non en grille) : un <strong> en début de ligne
   devenait sinon un élément de grille à part, et le reste du texte tombait dans
   la colonne de 20 px de la puce, un mot par ligne (bug du 21/09). */
.bullets li { position: relative; padding-left: 30px; color: var(--ink-2); line-height: 1.45; }
.bullets li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); }

/* Réponse directe citable (40-60 mots) sous un titre-question — pour le GEO */
.answer {
  padding: 18px 20px;
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  background: var(--surface);
  color: var(--ink);
  max-width: 68ch;
  font-size: 1.05rem; line-height: 1.6;
}

/* Texte long (mentions légales, guides) */
.prose { max-width: 70ch; color: var(--ink-2); }
.prose h2 { font-size: 1.35rem; letter-spacing: -.015em; color: var(--ink); margin: 44px 0 12px; }
.prose h3 { font-size: 1.1rem; color: var(--ink); margin: 28px 0 8px; }
.prose p, .prose ul { margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 26.13 FAQ : catégories fixes + questions ------------------- */
.faqx { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 880px) { .faqx { grid-template-columns: 1fr; } }
.faqx__nav { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 2px; }
@media (max-width: 880px) { .faqx__nav { position: static; display: flex; flex-wrap: wrap; gap: 8px; } }
.faqx__nav a {
  padding: 9px 12px; border-radius: 10px;
  font-size: .94rem; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (max-width: 880px) { .faqx__nav a { border: 1px solid var(--line); background: var(--surface); } }
.faqx__nav a:hover { background: var(--surface); color: var(--ink); }
.faqx__nav a.is-current { background: var(--blue-wash); color: var(--blue); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group > h2 { font-size: 1.35rem; letter-spacing: -.015em; margin-bottom: 14px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-of-type { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.qa summary::after {
  content: ''; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%235b6478' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--t-base) var(--ease);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa[open] summary h3 { color: var(--blue); }
.qa__a { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; }
.qa__a .link { margin-top: 10px; }

/* ---------- 26.14 Formulaire ------------------------------------------ */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field label { font-size: .9rem; font-weight: 500; color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none; padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235b6478' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-wash); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
/* l'erreur n'apparaît qu'APRÈS avoir quitté le champ (js/av-visuals.js) */
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--ko); }
.field__error { display: none; font-size: .84rem; color: var(--ko); }
.field.is-invalid .field__error { display: block; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* ---------- 26.15 Mouvement réduit : tout est visible, rien ne bouge --- */
@media (prefers-reduced-motion: reduce) {
  .node, .msg { opacity: 1 !important; transform: none !important; }
  .hub__sat { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .edge i, .typing { display: none !important; }
  .delta__bar { transform: none !important; }
}

/* ---------- 26.16 Maquettes d'interface (illustrations en code) ------- */
.mini-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.mini-table th {
  text-align: left; padding: 10px 18px;
  font-family: var(--mono); font-size: .7rem; font-weight: 400; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.mini-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table .chip { white-space: nowrap; }
@media (max-width: 480px) { .mini-table th, .mini-table td { padding: 10px 12px; } }

.browser {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.browser__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.browser__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.browser__bar em {
  flex: 1; margin-left: 10px; padding: 4px 10px;
  border-radius: 7px; background: var(--bg);
  font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--ink-3);
}
.browser__page { display: grid; gap: 10px; padding: 26px 24px 20px; }
.sk { display: block; height: 10px; width: 78%; border-radius: 5px; background: var(--bg-tint); }
.sk--title { height: 22px; width: 62%; background: var(--line); }
.sk--short { width: 48%; }
.sk--btn { width: 120px; height: 30px; border-radius: 8px; background: var(--blue); margin-top: 6px; }
.browser__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.browser__cards i { display: block; height: 62px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.browser__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 22px; }
/* un léger balayage lumineux sur les blocs : le site « se charge vite » */
.is-live .sk, .is-live .browser__cards i {
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.2s var(--ease-io) infinite;
}
@keyframes shimmer { from { background-position: -150% 0; } to { background-position: 250% 0; } }
a.tile { display: block; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
a.tile:hover { border-color: var(--blue); }
a.tile:active { transform: scale(.99); }


/* ==========================================================================
   27. AFFINAGE « TECH, PAS IA » (17/09/2026)
   --------------------------------------------------------------------------
   Retire les signatures des sites générés relevées à l'audit (skill
   design-taste-frontend) sans toucher à l'identité : vagues, bleu, schémas,
   questions du visiteur. Chaque règle dit ce qu'elle supprime.
   ========================================================================== */

/* La question du visiteur se lit comme une vraie question, pas comme une
   étiquette de gabarit (plus de police machine, plus de tiret décoratif). */
.q {
  display: block;
  font-family: var(--font);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.q::before { content: none; }
.final .q { color: #9fb3ff; }

/* Police machine réservée à ce qui EST technique (touche clavier, chrono).
   Les petits libellés passent en Geist : un seul registre de lecture. */
.mono, .node__k, .flow__label, .msg__who, .card__n, .step__n, .spec__idx,
.crumbs, .hits__label, .answers__foot, .hit__meta, .modal__agenda-title,
.modal__right-label, .footer h4, .edge__label, .canvas__bar .mono, .effort__list li span:first-child {
  font-family: var(--font);
  letter-spacing: 0;
}
.mono { font-size: .84rem; }
.footer h4 { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.convo__timer, .kbd { font-family: var(--mono); }

/* Pastilles : plus de point coloré devant (le tic n°1), ton neutre par défaut */
.chip {
  font-family: var(--font);
  font-size: .78rem;
  padding: 3px 8px;
  background: var(--bg-tint);
  color: var(--ink-2);
}
.chip::before { content: none; }
.chip--blue { background: var(--blue-wash); color: var(--blue-hi); }
.chip--ko { background: var(--ko-wash); color: var(--ko); }
.chip--ok, .flow__head .chip, .voice__top .chip { background: var(--ok-wash); color: var(--ok); }

/* En-têtes : plus de grille décorative ; les vagues suffisent */
.hero::before, .page-hero::before { content: none; }

/* Plus de badge à point vert au-dessus du titre : une simple ligne de contexte */
.hero__eyebrow {
  display: block;
  padding: 0; border: 0; background: none;
  font-family: var(--font);
  font-size: 1rem; letter-spacing: 0;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.hero__eyebrow .dot { display: none; }

/* Titre d'une seule couleur : la hiérarchie vient de la taille, pas du gris */
.display .soft, .h2 .soft { color: inherit; }

/* La réponse directe reste (Google et les IA la citent) mais perd son encadré
   répété 58 fois : c'est un paragraphe d'introduction, pas une alerte. */
.answer {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font-size: clamp(1.06rem, 1.4vw, 1.18rem);
  line-height: 1.6;
}

/* Avant/après : barres sans rail de fond (effet « tableau de bord ») */
.delta__track { background: none; height: 8px; border-radius: 4px; }
.delta__bar { border-radius: 4px; }

/* Sommaire : plus de numéros devant les liens */
.toc a::before { content: none; }

/* Tuiles : plus de carte « icône dans un carré + titre + texte ».
   Un filet en haut, l'icône nue, et de l'espace. */
.tile {
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
}
.tile__icon {
  width: auto; height: auto;
  display: block;
  background: none;
  color: var(--blue);
  margin-bottom: 12px;
}
.tile__icon svg { width: 24px; height: 24px; }
a.tile { transition: border-color var(--t-fast) var(--ease); }
a.tile:hover { border-top-color: var(--blue); }
a.tile:active { transform: none; }

/* Étapes : une frise, pas trois cartes identiques */
.step {
  padding: 22px 0 0;
  border: 0;
  border-top: 2px solid var(--line-2);
  border-radius: 0;
  background: none;
}
.step--first { border-top-color: var(--blue); box-shadow: none; }
.step__top { margin-bottom: 14px; justify-content: flex-start; }
.step__n { display: none; }
.steps { gap: clamp(20px, 3vw, 36px); }

/* Panneaux latéraux : moins de boîtes dans les boîtes */
.panel { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 22px 0 0; }
.panel + .panel { margin-top: 30px; }

/* Maquette de navigateur : retirée des pages (fausse capture d'écran) */
.browser { display: none; }

/* Pied de page : liens utilitaires alignés, sans séparateurs décoratifs */
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Hero de l'accueil : titre sur toute la largeur (2 lignes max sur ordinateur),
   puis texte + boutons à gauche et schéma à droite. Marge haute resserrée. */
.hero { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 80px)); }
.hero__title { font-size: clamp(2.3rem, 5vw, 4rem); max-width: 22ch; margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 1100px) { .hero__title { max-width: none; } }
.hero__grid { align-items: start; }
.hero .lead { margin-top: 4px; }
.page-hero { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 76px)); }
.page-hero .display { font-size: clamp(2.1rem, 3.6vw, 2.75rem); }

.flow__foot { font-family: var(--font); font-size: .8rem; letter-spacing: 0; }

/* Carte (contour OpenStreetMap) : noms lisibles même quand la carte est réduite */
.island { max-width: 560px; }
.island__land {
  fill: var(--surface);
  stroke: var(--blue-soft);
  stroke-width: 2;
  filter: drop-shadow(0 14px 22px rgba(15, 28, 70, .12));
}
.island text { font-size: 17px; font-weight: 500; fill: var(--ink-2); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.island text.home { font-weight: 600; fill: var(--ink); }
.island__note { font-size: .82rem; }

/* =====================================================================
   28. RESPONSIVE : lisibilité et confort au doigt (audit du 17/09/2026)
   ===================================================================== */

/* Aucun texte sous 12 px (0,75 rem), quelle que soit la taille d'écran */
.node__k, .edge__label, .msg__who, .msg--sys, .flow__label, .hub__sat,
.mini-table th, .effort__list li span:first-child,
.loop__no, .loop__mobile .mono { font-size: .75rem; }
@media (max-width: 480px) { .hub__sat { font-size: .75rem; } }

/* Tableaux : jamais plus larges que l'écran. Les pastilles passent à la ligne
   sur téléphone, et le conteneur défile en dernier recours. */
div:has(> .mini-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
  .mini-table { font-size: .88rem; }
  .mini-table .chip { white-space: normal; }
}

/* Zones tactiles d'au moins 44 px sur écran tactile ou étroit */
@media (max-width: 767px), (pointer: coarse) {
  .answers__close { width: 44px; height: 44px; }
  .dock__clear { width: 44px; height: 44px; }
  .dock .btn--sm { min-height: 44px; }
  [data-replay] { min-height: 44px; align-items: center; }
  .link[data-replay] { display: inline-flex; padding: 0 12px; }   /* .convo__replay reste masqué jusqu'à la fin */
}

/* Boutons : un libellé long passe à la ligne sur téléphone plutôt que de sortir de l'écran */
.btn { max-width: 100%; }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } }

/* Titres de page : lignes équilibrées, taille réduite sur petit téléphone */
.display, .h2 { text-wrap: balance; }
@media (max-width: 480px) {
  .page-hero .display { font-size: 1.85rem; line-height: 1.12; }
  .hero__title { font-size: 2.05rem; }
}

/* Fiche d'identité (accueil) : faits vérifiables, présentés comme une fiche, pas comme une carte */
.idcard { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 20px; }
.idcard__lead { max-width: 62ch; color: var(--ink-2); }
.idcard__lead strong { color: var(--ink); }
.idcard__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 28px; margin: 0; }
.idcard__facts dt { font-size: .8rem; color: var(--ink-3); margin-bottom: 2px; }
.idcard__facts dd { margin: 0; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.idcard__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 767px), (pointer: coarse) { .idcard__links a { min-height: 44px; display: inline-flex; align-items: center; } }

/* =====================================================================
   29. FLUIDITÉ : animations en boucle limitées à transform / opacity
   (calculées par la carte graphique, sans recalcul de la page).
   Même rendu qu'avant ; audit du 17/09/2026.
   ===================================================================== */

/* Paquet de données sur les liaisons : le <i> couvre toute la liaison (moins le
   point) et glisse de 100 % de sa propre largeur ; le point est dessiné au début. */
.edge i {
  left: 0; top: -3px; width: calc(100% - 8px); height: 8px;
  background: none; box-shadow: none; border-radius: 0;
}
.edge i::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px rgba(37, 71, 208, .15);
}
@keyframes packet-x {
  0%   { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@media (max-width: 640px) {
  .edge i { left: -3px; top: 0; width: 8px; height: calc(100% - 8px); }
}
@keyframes packet-y {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Barres de voix : même amplitude (16 % → 74 %) obtenue par un scaleY */
.voice__bars i { height: 74%; transform: scaleY(.3); animation-name: bar-y; will-change: transform; }
@keyframes bar-y { from { transform: scaleY(.216); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .voice__bars i { transform: none; height: 40%; }
  .voice__bars i:nth-child(odd) { height: 62%; }
}

/* Cœur du moyeu : l'anneau qui « respire » est un calque à part (opacité + échelle) */
.hub__core::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(37, 71, 208, .08);   /* ombre extérieure : ne recouvre pas le cœur */
  opacity: 0; transform: scale(.9); pointer-events: none;
}
.is-live .hub__core { animation: none; }
.is-live .hub__core::before { animation: core-ring 3.2s var(--ease-io) infinite; }
@keyframes core-ring { 50% { opacity: 1; transform: scale(1); } }

/* Animations en boucle hors de l'écran : en pause (js/av-visuals.js pose .is-offscreen) */
.is-offscreen, .is-offscreen *, .is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }

/* Effet verre : flou plus léger sur téléphone (coût proportionnel au rayon) */
@media (max-width: 767px) { :root { --glass-blur: blur(14px) saturate(160%); } }

/* Navigation : le petit glissement au défilement passe par transform (pas par top) */
.gnav { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.gnav.scrolled { top: 14px; transform: translate(-50%, -4px); }

/* Recherche : parcourir par sujet */
.cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 12px; }
.cat {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .92rem; color: var(--ink); text-align: left;
  transition: border-color var(--t-fast, 150ms) var(--ease), background var(--t-fast, 150ms) var(--ease);
}
.cat:hover, .cat[aria-selected="true"] { border-color: var(--blue); background: var(--blue-wash); }
.cat__n { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hits__back {
  display: inline-flex; align-items: center; min-height: 40px; margin: 2px 4px 6px;
  padding: 0 10px; border-radius: 10px; font-size: .9rem; color: var(--blue);
}
.hits__back:hover, .hits__back[aria-selected="true"] { background: var(--blue-wash); }
@media (max-width: 767px), (pointer: coarse) { .cat, .hits__back { min-height: 44px; } }

/* FAQ élargie (11 thèmes) : le sommaire collant ne dépasse jamais l'écran */
@media (min-width: 881px) {   /* même seuil que la version collante (§ faqx) */
  .faqx__nav { max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 880px) {
  /* téléphone/tablette : les thèmes sur une ligne qui défile au doigt, au lieu d'un bloc de 470 px */
  .faqx__nav { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; margin-inline: -4px; padding-inline: 4px; }
  .faqx__nav a { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}

/* Bouton de langue dans la navigation (FR ⇄ EN) */
.gnav__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-2);
}
.gnav__lang:hover { border-color: var(--blue); color: var(--blue); }
.gnav__lang--mobile { display: none; }
@media (max-width: 880px) {
  .gnav__lang { display: none; }
  .gnav__lang--mobile { display: inline-flex; justify-content: center; width: 100%; }
}

/* =====================================================================
   30. PAGE 404 : sobre, une seule colonne, un seul geste principal
   ===================================================================== */
.e404 { min-height: 78vh; display: grid; align-items: center; }
.e404__wrap { max-width: 760px; }
.e404__eyebrow { color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.e404__code {
  font-size: clamp(5.5rem, 16vw, 10rem);
  line-height: .82;
  font-weight: 600;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  color: var(--line-2);
  margin: 6px 0 clamp(18px, 3vw, 28px);
  user-select: none;
}
.e404__code span { color: var(--blue-soft); }
.e404__title { font-size: clamp(1.9rem, 4vw, 2.75rem); max-width: 18ch; }
.e404__lead { margin-top: 14px; max-width: 46ch; }
.e404__ask { margin-top: clamp(22px, 3vw, 30px); max-width: 420px; }
.e404__actions { margin-top: 22px; }

.e404__links { margin-top: clamp(34px, 5vw, 52px); border-top: 1px solid var(--line); }
.e404__links-title { padding-top: 18px; color: var(--ink-3); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.e404__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: .98rem;
  transition: color var(--t-fast, 150ms) var(--ease), padding-left var(--t-fast, 150ms) var(--ease);
}
.e404__links a:first-of-type { border-top: 1px solid var(--line); margin-top: 10px; }
.e404__links a:hover { color: var(--blue); padding-left: 6px; }
.e404__links a span:last-child { color: var(--ink-3); }
.e404__links a:hover span:last-child { color: var(--blue); }
@media (max-width: 767px), (pointer: coarse) { .e404__links a { min-height: 48px; } }

/* =====================================================================
   31. « C'est pour moi ? » : des phrases de clients, par thème (sobre)
   ===================================================================== */
.fit__intro { margin-top: 30px; color: var(--ink-2); }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 16px; }
.fit__label { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fit li { padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink); line-height: 1.45; }
.fit__outro { margin-top: 26px; color: var(--ink-2); }
@media (max-width: 640px) { .fit { grid-template-columns: 1fr; gap: 18px; } }

/* Un lien du menu ne se coupe jamais en deux (« IA à La Réunion ») */
.gnav__links > a { white-space: nowrap; }

/* Accueil : trois bénéfices sous les boutons, lisibles en un coup d'œil */
.hero__gains { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; color: var(--ink-2); font-size: .98rem; }
.hero__gains li { padding-left: 22px; position: relative; }
.hero__gains li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-wash); box-shadow: inset 0 0 0 2px var(--blue); }
.hero__gains strong { color: var(--ink); font-weight: 600; }

/* =====================================================================
   32. Calculateur de l'accueil (sobre : un cadre, deux curseurs, un total)
   ===================================================================== */
.calc { margin-top: clamp(28px, 4vw, 40px); padding: clamp(20px, 3vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 18px); }
.calc__titre { font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.calc__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; margin-top: 18px; }
.calc__champ label { display: block; font-size: .95rem; color: var(--ink); line-height: 1.4; }
.calc__aide { display: block; color: var(--ink-3); font-size: .85rem; margin-top: 2px; }
.calc__ligne { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.calc__val { min-width: 64px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.calc input[type="range"] {
  flex: 1; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; --pct: 50%;
}
.calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--blue) var(--pct), var(--line) var(--pct)); }
.calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--blue); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue); box-shadow: 0 2px 6px rgba(15, 28, 70, .18); }
.calc input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue); }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.calc__resultat { display: flex; flex-wrap: wrap; gap: 10px 40px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.calc__resultat p { display: flex; align-items: baseline; gap: 8px; }
.calc__chiffre { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__unite { color: var(--ink-3); }
.calc__note { margin-top: 14px; font-size: .9rem; color: var(--ink-3); max-width: 70ch; }
@media (max-width: 720px) { .calc__champs { grid-template-columns: 1fr; } }

/* =====================================================================
   33. Services : aiguillage « partez de votre besoin » + ligne de bénéfice
   ===================================================================== */
.route { border-top: 1px solid var(--line); margin-top: 8px; }
.route__ligne {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 32px; align-items: center;
  padding: 18px 4px; border-bottom: 1px solid var(--line);
  transition: background var(--t-fast, 150ms) var(--ease), padding-left var(--t-fast, 150ms) var(--ease);
}
.route__besoin { color: var(--ink); font-size: 1.02rem; }
.route__reponse { color: var(--blue); font-weight: 500; }
.route__ligne:hover { background: var(--blue-wash); padding-left: 12px; }
@media (max-width: 720px) {
  .route__ligne { grid-template-columns: 1fr; gap: 4px; padding: 16px 2px; }
}
.gain { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--blue); color: var(--ink-2); max-width: 62ch; }
.gain strong { color: var(--ink); font-weight: 600; }

/* ---------- 34. Menu déroulant « Solutions » ---------------------------
   Bureau : s'ouvre au survol ou au focus clavier, panneau opaque en deux
   colonnes (métiers | besoins teintés). Mobile : replié, ouvert par le
   chevron, affiché dans la feuille du menu. */
.gnav__drop { position: relative; display: flex; align-items: center; }
.gnav__drop-link {
  padding: 8px 4px 8px 12px;
  border-radius: var(--r-pill);
  font-size: .94rem; font-weight: 500; white-space: nowrap;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gnav__drop-link.active { color: var(--ink); }
.gnav__drop-btn {
  display: grid; place-items: center;
  width: 26px; height: 32px; margin-right: 2px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
}
.gnav__drop-btn svg { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); }
.gnav__drop.is-open .gnav__drop-btn svg { transform: rotate(180deg); }
.gnav__drop:hover .gnav__drop-link, .gnav__drop.is-open .gnav__drop-link { color: var(--ink); }

.gnav__panel {
  position: absolute; top: calc(100% + 16px); left: -14px;
  width: min(720px, calc(100vw - 32px));
  display: grid; grid-template-columns: 1.9fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh-3);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-fast);
}
/* Pont invisible sous « Solutions » : la souris traverse l'écart jusqu'au panneau
   sans le refermer. Il vit sur .gnav__drop (et non dans le panneau, dont
   l'overflow:hidden le coupait : c'était la cause du menu qui se fermait). */
.gnav__panel::before { content: none; }
@media (min-width: 1100px) {
  .gnav__drop::after {
    content: ''; position: absolute; left: -14px; top: 100%;
    width: min(720px, calc(100vw - 32px)); height: 20px;
    display: none;
  }
  .gnav__drop:hover::after, .gnav__drop.is-open::after { display: block; }
}
.gnav__drop.is-open .gnav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease), visibility 0s;
}
@media (min-width: 1100px) and (hover: hover) {
  .gnav__drop:hover .gnav__panel, .gnav__drop:focus-within .gnav__panel {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease), visibility 0s;
  }
  .gnav__drop:hover .gnav__drop-btn svg { transform: rotate(180deg); }
}
.gnav__col { padding: 16px 12px 14px; }
.gnav__col--tint { background: var(--surface-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.gnav__label {
  margin: 0 10px 8px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue);
}
.gnav__list { display: grid; gap: 2px; }
.gnav__col:first-child .gnav__list { grid-template-columns: 1fr 1fr; }
.gnav__list a {
  display: block; padding: 9px 10px; border-radius: 12px;
  transition: background var(--t-fast) var(--ease);
}
.gnav__list a:hover, .gnav__list a:focus-visible { background: rgba(11, 19, 36, .05); }
.gnav__list a[aria-current="page"] { background: var(--blue-wash); }
.gnav__list strong { display: block; font-size: .92rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.gnav__list span { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-3); line-height: 1.35; }
.gnav__all {
  margin: auto 10px 2px; padding-top: 12px;
  font-size: .86rem; font-weight: 500; color: var(--blue);
}
.gnav__all:hover { color: var(--blue-hi); }

@media (max-width: 1099px) {
  .menu-open .gnav__links { max-height: calc(100dvh - var(--nav-h) - 40px); overflow-y: auto; }
  .menu-open .gnav__drop { flex-wrap: wrap; }
  .menu-open .gnav__drop-link { flex: 1; padding: 14px 14px; font-size: 1.05rem; border-radius: 12px; }
  .menu-open .gnav__drop-btn { width: 48px; height: 48px; border-radius: 12px; }
  .menu-open .gnav__drop-btn svg { width: 14px; height: 14px; }
  .gnav__panel {
    position: static; width: 100%; display: none;
    grid-template-columns: 1fr;
    box-shadow: none; border-radius: 14px;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
  }
  .gnav__panel::before { display: none; }
  .gnav__drop.is-open .gnav__panel { display: grid; margin: 2px 0 6px; }
  .gnav__col--tint { border-left: 0; border-top: 1px solid var(--line); }
  .gnav__col:first-child .gnav__list { grid-template-columns: 1fr; }
  .gnav__list span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gnav__panel, .gnav__drop-btn svg { transition: none !important; }
}

/* Tableaux à l'étroit (téléphone, ou colonne étroite sur tablette) : chaque ligne devient une fiche, le titre de colonne
   au-dessus de chaque valeur (data-label posé par av-ui.js). Un tableau de 3 à
   5 colonnes tassé dans 375 px affichait un mot par ligne (bug du 21/09). */
div:has(> .mini-table) { container-type: inline-size; }
@container (max-width: 680px) {
  .mini-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mini-table, .mini-table tbody, .mini-table tr, .mini-table td { display: block; width: 100%; }
  .mini-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mini-table tr:last-child { border-bottom: 0; }
  .mini-table td { border: 0; padding: 4px 16px; }
  .mini-table td:first-child { font-weight: 600; color: var(--ink); padding-bottom: 6px; }
  .mini-table td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  }
}

/* Mention « Membre de La French Tech La Réunion » (pied de page) : lien réciproque
   avec la fiche de l'annuaire, texte seul (pas de logo : marque protégée). */
.footer__badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 500; color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.footer__badge:hover { border-color: var(--blue); color: var(--blue); }
/* Plusieurs pastilles côte à côte (French Tech, avis Google) */
.footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer__badges .footer__badge { margin-top: 0; }