/* =====================================================================
   GoJido — Landing page "premium métallique cuivre / argent"
   Neutres chauds dominants, cuivre rosé comme unique couleur signature.
   Feuille de style unique, mobile-first.
   Organisation :
   1. Variables & reset
   2. Utilitaires (container, boutons, texte dégradé, animations)
   3. Navigation
   4. Hero (réseau « GoJido » + transition sticky)
   5. Sections (services, démos, process, pourquoi)
   6. CTA + formulaire
   7. Footer
   8. Responsive (tablette / desktop)
   9. Accessibilité (reduced motion)
   ===================================================================== */

/* ---------- 1. Variables & reset ---------- */
:root {
  /* Couleurs — charte "métallique cuivre / argent", dominée par des neutres chauds.
     JAMAIS de blanc pur : les zones claires restent sur un blanc cassé chaud. */
  --white: #fbfaf8;        /* surface de carte (blanc cassé très chaud) */
  --bg: #f5f3f0;           /* blanc cassé chaud — grandes zones claires */
  --bg-soft: #e8e6e3;      /* gris clair chaud — sections alternées */
  --ink: #1a1a1d;          /* noir anthracite — titres */
  --ink-soft: #2e2e33;     /* gris anthracite — texte courant */
  --ink-faint: #6f6f75;    /* gris moyen — texte secondaire (assombri pour une lisibilité AA sur fond clair) */

  /* ---- Coloris signature — TOUT est piloté par ces 2 triplets RGB + tokens
     dérivés. Le sélecteur de coloris (coloris.js) ne fait que les réécrire. ---- */
  --accent-rgb: 212, 148, 52;     /* Ambre & Or — coloris figé */
  --accent-2-rgb: 200, 182, 150;  /* or secondaire */
  --accent: rgb(var(--accent-rgb));       /* couleur signature */
  --accent-2: rgb(var(--accent-2-rgb));   /* accent tech secondaire */
  --accent-cyan: var(--accent-2);
  --accent-soft: #f6ecd9;  /* fond très clair de la teinte signature */
  --accent-ink: #a3711d;   /* teinte foncée (coches, texte dense) */
  --hero-grad-a: #eecb8f;  /* dégradé métallique clair du hero (mot accentué) */
  --hero-grad-b: #e6dcc8;
  /* Coche des listes : url() stockée en variable → recolorable par coloris.js */
  --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3711d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  --border: #dcd8d3;       /* bordures chaudes claires */

  /* Ombres douces premium (teinte anthracite chaude) */
  --shadow-sm: 0 1px 2px rgba(26, 26, 29, 0.04), 0 1px 3px rgba(26, 26, 29, 0.06);
  --shadow-md: 0 4px 16px rgba(26, 26, 29, 0.06), 0 2px 6px rgba(26, 26, 29, 0.04);
  --shadow-lg: 0 18px 40px rgba(26, 26, 29, 0.10), 0 6px 14px rgba(26, 26, 29, 0.05);
  --shadow-accent: 0 10px 30px rgba(var(--accent-rgb), 0.28);

  /* Dégradé métallique cuivre → argent, réservé aux éléments clés */
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);

  /* --- Thème SOMBRE du hero (statique) ---
     Le hero est un bloc sombre qui se dégrade vers le clair en bas, pour se fondre
     naturellement dans le reste du site. Texte clair (il vit sur la zone sombre).
     La nav, elle, bascule sombre/clair via la classe .nav--over-dark (script.js). */
  --hero-title: #f5f3f0;
  --hero-text: #c4c4c8;    /* sous-titre : plus clair pour un contraste net sur l'anthracite */
  --hero-badge-surface: rgba(245, 243, 240, 0.08);
  --hero-badge-border: rgba(245, 243, 240, 0.22);
  --hero-badge-text: #ece4de; /* badge : texte plus lumineux */
  --hero-faint: #8a8a8f;
  --hero-sec-surface: rgba(245, 243, 240, 0.07);
  --hero-sec-ink: #f5f3f0;
  --hero-sec-border: rgba(245, 243, 240, 0.18);

  /* Rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --maxw: 1140px;

  /* Titrage pilotable (réglage « Police ») + profondeur des blocs sombres
     (réglage « Contraste »). */
  --font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Geist", "Inter", system-ui, sans-serif;
  --dark-surface: #1a1a1d;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-soft);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- 2. Utilitaires ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Sur le fond sombre du hero, on éclaircit le dégradé métallique du mot accentué
   pour qu'il brille autant que les mots blancs du titre (meilleure lisibilité).
   Ailleurs (sections claires), le cuivre signature garde sa densité. */
.hero .gradient-text {
  background: linear-gradient(120deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.btn--lg { padding: 14px 28px; font-size: 16px; }

.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  /* Le dégradé doit remplir AUSSI la bordure de 1px (sinon le fond de page
     transparaît sous ce liseré transparent → petit bord clair sur l'arrondi). */
  background-origin: border-box;
  color: #1a1a1d;          /* texte anthracite : lisible sur le métal clair */
  font-weight: 600;
  box-shadow: var(--shadow-accent);
}
/* Reflet lumineux qui balaie le bouton en continu */
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: skewX(-20deg);
  animation: shimmer 3.6s ease-in-out infinite;
}
@keyframes shimmer {
  0% { left: -120%; }
  55%, 100% { left: 130%; }
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(var(--accent-rgb), 0.38);
}
.btn--primary > * { position: relative; z-index: 1; }

.btn--secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #cfcac4;
}

.arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translate(2px, -2px); }

/* Animation d'entrée (stagger) — pilotée par data-delay + JS */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade-up.is-in { opacity: 1; transform: none; }

/* Révélation au scroll (Intersection Observer) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 3. Navigation ---------- */
.nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  /* La nav « se pose » via translateY (transform = fluide, composé par le GPU)
     plutôt que via top. Même courbe d'accélération que tout le reste de la nav,
     pour un mouvement homogène. */
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.nav__inner {
  width: calc(100% - 32px);
  max-width: var(--maxw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 10px 20px;
  /* Thème CLAIR par défaut (la nav flotte sur le site clair) */
  background: rgba(245, 243, 240, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  /* Toutes les propriétés déformées partagent EXACTEMENT la même durée et la même
     courbe (easeOutExpo : démarre vite, se pose en douceur) → morphing homogène. */
  transition:
    width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* État "scrolled" : plus opaque + ombre plus marquée */
.nav.is-scrolled .nav__inner {
  background: rgba(245, 243, 240, 0.9);
  box-shadow: var(--shadow-md);
}

/* Thème SOMBRE : quand la nav surplombe le hero sombre (classe posée en JS) */
.nav--over-dark .nav__inner {
  background: rgba(26, 26, 29, 0.55);
  border-color: rgba(245, 243, 240, 0.10);
}
.nav--over-dark.is-scrolled .nav__inner {
  background: rgba(26, 26, 29, 0.72);
}

/* --- État INITIAL (haut de page) : bandeau pleine largeur collé en haut ---
   Au chargement, la nav est un bandeau translucide qui court d'un bord à l'autre,
   collé tout en haut. Dès le premier scroll (classe .is-scrolled posée en JS), ce
   bandeau s'efface et la pilule flottante apparaît en glissant un peu vers le bas.
   Astuce : le CONTENU (logo, liens, CTA) ne bouge pas horizontalement — seul
   l'habillage « se replie ». On évite ainsi tout à-coup de largeur entre les deux
   états, même sur grand écran. */
/* --- État INITIAL (haut de page) : bandeau plein, carré, collé tout en haut ---
   C'est la MÊME barre que la pilule : on déforme directement sa largeur, ses
   coins et sa position. Dès le scroll, elle « se rétracte » :
     • largeur 100% → calc(100% - 32px) plafonnée à 1140px  (rétrécit)
     • border-radius 0 → pilule                              (s'arrondit)
     • translateY -14px → 0                                  (s'abaisse)
   Le contenu (logo, liens, CTA) se resserre avec elle pour un vrai effet de
   morphing « high ticket ». Le flou de verre reste actif en continu. */
.nav:not(.is-scrolled) { transform: translateY(-14px); }
.nav:not(.is-scrolled) .nav__inner {
  width: 100%;
  /* longueur réelle (et non « none ») → la largeur s'anime sans à-coup, même
     au-delà de 1140px de large */
  max-width: 100vw;
  border-radius: 0;
  box-shadow: none;
  /* Plein écran : on rentre le contenu vers le centre (logo et CTA ne touchent
     plus les bords). Le padding s'anime aussi → il se resserre vers la pilule. */
  padding-left: clamp(20px, 6vw, 130px);
  padding-right: clamp(16px, 6vw, 120px);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  transition: color 0.4s ease;
}
.nav--over-dark .nav__logo { color: #f5f3f0; }
.nav__logo-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--grad);
  box-shadow: var(--shadow-accent);
  /* Léger battement lumineux du logo */
  animation: logoPulse 3.2s ease-in-out infinite;
}
.nav__logo-mark svg { width: 15px; height: 15px; }
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3); }
  50% { box-shadow: 0 6px 22px rgba(var(--accent-2-rgb), 0.5); }
}

.nav__links {
  display: flex;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.4s ease;
}
.nav--over-dark .nav__links { color: rgba(216, 205, 198, 0.95); }
.nav__links a {
  position: relative;
  transition: color 0.2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav__links a:hover { color: var(--ink); }
.nav--over-dark .nav__links a:hover { color: #f5f3f0; }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { font-size: 14px; padding: 9px 18px; }

/* Burger mobile (caché en desktop) */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.4s ease;
}
.nav--over-dark .nav__burger span { background: #d8cdc6; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: absolute;
  top: 70px;
  left: 16px;
  right: 16px;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: rgba(245, 243, 240, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-weight: 500;
  color: var(--ink-soft);
}
.nav__mobile a:hover { background: var(--bg-soft); color: var(--ink); }
.nav__mobile .btn { margin-top: 6px; }

/* ---------- 4. Hero ---------- */
/* Un seul écran : le champ de particules « GoJido » est un FOND fixe (il ne recule
   pas au scroll), la promesse est posée par-dessus. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;  /* mobile : hauteur RÉELLE visible (barre d'adresse déduite) */
  background: var(--bg);
}

/* Conteneur du hero : plein écran, FOND SOMBRE UNI (pas de dégradé). Le champ
   de particules vit par-dessus et remplit tout l'écran. */
.hero__sticky {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;  /* idem : la barre de confiance reste visible au chargement */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 104px 24px 72px;
  background: var(--dark-surface);
}

/* Couche réseau : champ de particules en PLEIN ÉCRAN (canvas), façon "particle
   network". Fond fixe — il ne recule pas au scroll. */
.hero__net {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.hero__net canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;          /* ne bloque jamais les clics sur les boutons */
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-top: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--hero-badge-text);
  background: var(--hero-badge-surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hero-badge-border);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 30px;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.hero__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
}

/* Logo-mot « GoJido » écrit en texte (façon "Aether Flow" : gras, interlettrage
   serré, dégradé blanc → gris clair). C'est l'élément phare du hero. */
.hero__wordmark {
  font-size: clamp(3.6rem, 12vw, 8.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(to bottom, #f5f3f0 0%, #c9c3bb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}

/* Promesse (sous le logo-mot) : claire, sobre. Le mot accentué garde le dégradé
   métallique cuivre→argent de la marque (.gradient-text, qui pose son propre fond). */
.hero__title {
  font-size: clamp(1.5rem, 3.3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--hero-title);
  max-width: 22ch;
  margin-bottom: 0;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--hero-text);
  max-width: 60ch;
  margin: 32px 0 38px;
  transition: color 0.3s ease;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}

/* Bouton secondaire dans le hero : translucide sur fond sombre, blanc sur clair */
.hero .btn--secondary {
  background: var(--hero-sec-surface);
  color: var(--hero-sec-ink);
  border-color: var(--hero-sec-border);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.25s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.hero .btn--secondary:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* Indice de scroll (s'efface dès qu'on descend, opacité pilotée en JS) */
.hero__hint {
  position: absolute;
  bottom: 104px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--hero-faint);
  transition: color 0.3s ease;
}
.hero__hint-mouse {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hero-badge-border);
  animation: hintBob 1.8s ease-in-out infinite;
}
.hero__hint-mouse svg { width: 12px; height: 12px; }
@keyframes hintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Barre de confiance : posée en bas du hero (toujours visible). */
.hero__trust {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  max-width: 1040px;
}
.hero__trust-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b6aea6;          /* la barre de confiance vit sur le fond sombre */
  margin-bottom: 16px;
}
/* Carrousel de logos partenaires (hero) : défilement continu + fondu sur les
   côtés. Le 2ᵉ groupe (copie) est ajouté en JS → boucle sans couture (-50%).
   Classes dédiées .logos* pour ne pas entrer en collision avec le .marquee
   d'exemples de la section Services. */
.logos {
  width: 100%;
  overflow: hidden;
  /* Fondu progressif sur les bords gauche/droit */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.logos__track {
  display: flex;
  width: max-content;
  animation: logos-scroll 46s linear infinite;
}
/* Pause au survol (confort de lecture) */
.logos:hover .logos__track { animation-play-state: paused; }
.logos__group {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-right: 46px;     /* même écart au raccord entre les deux groupes */
  flex: none;
}
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logos__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: #ada59d;          /* gris clair désaturé sur le fond sombre */
  transition: color 0.25s ease;
}
.logos__item:hover { color: #f0ebe6; }
.logos__item .brand {
  width: 21px;
  height: 21px;
  fill: currentColor;
  flex: none;
}

/* ---------- 5. Sections ---------- */
.section { padding: 92px 0; }
.section--soft { background: var(--bg-soft); }

.section__head { text-align: center; max-width: 640px; margin: 0 auto 54px; }
.section__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 14px;
}
.section__lead { font-size: 1.1rem; color: var(--ink-soft); }

/* ---- Services : grille bento ---- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* Carte de base */
.bento__item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-md);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.bento__item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: #d8d3cd;
}

/* Halo dégradé dans un coin, qui s'intensifie au survol */
.bento__glow {
  position: absolute;
  top: -90px; right: -90px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-2-rgb), 0.12) 45%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s ease;
}
.bento__item:hover .bento__glow { opacity: 1; transform: scale(1.15); }

/* Badge "Le plus demandé" */
.bento__tag {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

/* Icône (animée au survol de la carte) */
.bento__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--grad);
  color: #1a1a1d;
  box-shadow: var(--shadow-accent);
  margin-bottom: 20px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bento__icon svg { width: 26px; height: 26px; }
.bento__item:hover .bento__icon { transform: translateY(-3px) rotate(-6deg); }

/* En-tête de la carte vedette : icône à gauche, titre + texte à droite */
.bento__top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.bento__top .bento__icon { margin-bottom: 0; }
.bento__item--feature .bento__title { margin-top: 4px; padding-right: 90px; }

.bento__title {
  position: relative;
  z-index: 1;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.bento__text {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

/* Liste de bénéfices à puces "check" */
.bento__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 22px;
}
.bento__list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.bento__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  /* Coche dessinée en SVG (couleur d'accent) */
  background-image: var(--check-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px, cover;
}

/* Rangée de métriques (chiffres clés) */
.bento__metrics {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: auto;            /* colle les métriques en bas de la carte */
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.metric { display: flex; flex-direction: column; line-height: 1.15; }
.metric b {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metric span { font-size: 0.8rem; color: var(--ink-faint); }

/* Mini-conversation animée (carte vedette) */
.chat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  margin-bottom: 22px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.chat__bubble {
  max-width: 80%;
  padding: 10px 14px;
  font-size: 0.92rem;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: bubbleIn 0.5s ease forwards;
}
.chat__bubble--in {
  align-self: flex-start;
  background: var(--white);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  animation-delay: 0.2s;
}
.chat__bubble--out {
  align-self: flex-end;
  background: var(--grad);
  color: #1a1a1d;
  border-bottom-right-radius: 4px;
  animation-delay: 1.3s;
}
@keyframes bubbleIn {
  to { opacity: 1; transform: none; }
}
/* Indicateur "en train d'écrire" qui clignote en boucle */
.chat__typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  opacity: 0;
  animation: bubbleIn 0.4s ease forwards 0.8s;
}
.chat__typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  animation: typing 1.2s ease-in-out infinite;
}
.chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.chat__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-4px); opacity: 1; }
}
/* La conversation ne démarre qu'une fois la carte révélée au scroll */
.bento__item .chat__bubble,
.bento__item .chat__typing,
.bento__item .chat__typing span { animation-play-state: paused; }
.bento__item.is-in .chat__bubble,
.bento__item.is-in .chat__typing,
.bento__item.is-in .chat__typing span { animation-play-state: running; }

/* ---- Bande "sur-mesure" : ce n'est qu'un début ---- */
.bento__more {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 26px;
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #f5f3f0 0%, #efe6e1 100%);
  box-shadow: var(--shadow-md);
}
.bento__more-text { max-width: 42ch; }
.bento__more-text .bento__title { margin-bottom: 10px; }
.bento__more-text .bento__text { margin-bottom: 20px; }

/* Marquee : 2 rangées qui défilent en sens opposés, en boucle */
.marquee {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  /* Fondu sur les bords gauche/droite */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex;
  gap: 12px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__track--reverse { animation-direction: reverse; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* -50% car le contenu est dupliqué */
}
/* Pause au survol pour laisser lire */
.marquee:hover .marquee__track { animation-play-state: paused; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
/* Petit point dégradé devant chaque exemple */
.chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
  flex: 0 0 auto;
}

/* Démos — grille auto-adaptative (auto-fit) : le nombre de colonnes s'ajuste
   seul selon la largeur ET le nombre de cartes. Aucune media-query à maintenir. */
.demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
/* Le cadre est un vrai bouton (clic → lightbox) : on réinitialise le style natif */
.demo__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, #efe8e3 0%, #f7f5f2 55%),
    var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo__frame:hover,
.demo__frame:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.demo__frame:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px rgba(var(--accent-rgb), 0.55); }
/* Miniature optionnelle : remplit le cadre et zoome légèrement au survol */
.demo__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo__frame:hover .demo__poster { transform: scale(1.05); }
/* iframe / video injectée occupera tout le cadre */
.demo__frame iframe,
.demo__frame video { width: 100%; height: 100%; border: 0; object-fit: cover; }
.demo__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  background: var(--grad);
  color: #1a1a1d;
  box-shadow: var(--shadow-accent);
  transition: transform 0.25s ease;
  /* Halo qui pulse pour attirer le clic */
  animation: playPulse 2.6s ease-in-out infinite;
}
.demo__play svg { width: 24px; height: 24px; margin-left: 2px; }
.demo__frame:hover .demo__play,
.demo__frame:focus-visible .demo__play { transform: scale(1.12); }
@keyframes playPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.28), 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50% { box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.28), 0 0 0 12px rgba(var(--accent-rgb), 0); }
}
.demo__caption {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Lightbox de lecture — plein écran, fond flouté (langage visuel du hero) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 29, 0.7);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lightbox__dialog {
  position: relative;
  width: min(1040px, 100%);
  opacity: 0;
  transform: scale(0.94) translateY(12px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Classe posée par le JS une frame après l'affichage → déclenche l'anim d'entrée */
.lightbox.is-open .lightbox__backdrop { opacity: 1; }
.lightbox.is-open .lightbox__dialog { opacity: 1; transform: none; }
.lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #1a1a1d;
  box-shadow: 0 30px 80px rgba(26, 26, 29, 0.55);
}
.lightbox__frame iframe,
.lightbox__frame video { width: 100%; height: 100%; border: 0; }
/* Message d'attente tant qu'aucune vidéo n'est branchée (data-demo-src vide) */
.lightbox__pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: rgba(245, 243, 240, 0.82);
  font-size: 0.95rem;
}
.lightbox__title {
  margin-top: 16px;
  text-align: center;
  color: #f5f3f0;
  font-size: 1rem;
  font-weight: 500;
}
.lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(245, 243, 240, 0.25);
  background: rgba(46, 46, 51, 0.85);
  color: #f5f3f0;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.lightbox__close:hover { transform: scale(1.08); background: rgba(66, 66, 72, 0.95); }
.lightbox__close svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .lightbox__close { top: 8px; right: 8px; }
}

/* --- Modal de réservation Cal.com : réutilise .lightbox mais avec un cadre
   plus haut (un calendrier, pas une vidéo 16:9). --- */
.cal-modal__dialog { width: min(1000px, 100%); }
.cal-frame {
  position: relative;
  width: 100%;
  height: min(82vh, 760px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);       /* fond clair chaud pendant le chargement de l'iframe */
  box-shadow: 0 30px 80px rgba(26, 26, 29, 0.55);
}
.cal-frame iframe { width: 100%; height: 100%; border: 0; }
.cal-modal__fallback {
  margin-top: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(245, 243, 240, 0.72);
}
.cal-modal__fallback a { color: #e6bcac; text-decoration: underline; }
.cal-modal__fallback a:hover { color: #f0d0c3; }
/* Sur mobile : le calendrier occupe tout l'écran (meilleur confort de saisie). */
@media (max-width: 640px) {
  .cal-modal { padding: 0; }
  .cal-modal__dialog { width: 100%; height: 100%; display: flex; flex-direction: column; }
  .cal-frame { flex: 1; height: auto; border-radius: 0; box-shadow: none; }
  .cal-modal .lightbox__close { top: 10px; right: 10px; }
  .cal-modal__fallback { position: absolute; bottom: 8px; left: 0; right: 0; margin: 0; }
}

/* Process — timeline verticale premium
   Spine dégradée qui se remplit au scroll + pastilles qui s'allument à son passage. */
.steps {
  position: relative;
  display: grid;
  gap: 24px;
  max-width: 720px;          /* la timeline reste lisible et centrée */
  margin-inline: auto;
}
/* Spine verticale (rail gris) + remplissage dégradé (hauteur pilotée en JS) */
.steps__line {
  position: absolute;
  left: 27px;                /* centré sur les pastilles (colonne de 56px) */
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.steps__line-fill {
  display: block;
  width: 100%;
  height: 0;                 /* piloté au scroll (0 → 100%) ; 100% si reduced-motion */
  background: var(--grad);
  border-radius: 2px;
  transition: height 0.15s linear;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
/* Pastille numérotée posée sur la spine */
.step__node {
  position: relative;
  z-index: 1;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background 0.45s ease, border-color 0.45s ease,
    box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.step__num {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-soft);
  transition: color 0.45s ease;
}
/* État "atteint" : la pastille s'allume en dégradé quand la spine la dépasse */
.step.is-active .step__node {
  background: var(--grad);
  background-origin: border-box; /* le dégradé couvre la bordure (pas de liseré clair) */
  border-color: transparent;
  box-shadow: var(--shadow-accent);
  transform: scale(1.08);
}
.step.is-active .step__num { color: #1a1a1d; }
/* Carte de contenu illustrée */
.step__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.step__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 14px;
}
.step__icon svg { width: 22px; height: 22px; }
.step__title { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.step__text { font-size: 0.98rem; color: var(--ink-soft); }

/* Pourquoi GoJido — cartes "atouts" : icône, chiffre clé animé, hover premium */
.why { display: grid; grid-template-columns: 1fr; gap: 24px; }
.why__item {
  position: relative;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 26px 30px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Liseré dégradé en haut, tracé au survol */
.why__item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.why__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.why__item:hover::before { transform: scaleX(1); }
.why__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.why__item:hover .why__icon { transform: scale(1.08); }
.why__icon svg { width: 26px; height: 26px; }
.why__big {
  font-size: clamp(3rem, 8vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums; /* largeur stable pendant le comptage */
}
.why__title { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.why__text { color: var(--ink-soft); max-width: 34ch; margin: 0 auto; }

/* ---- Témoignages : colonnes qui défilent verticalement ----
   Inspiré du composant "testimonials-columns" : chaque colonne défile en
   boucle (translateY -50%), avec un fondu haut/bas (mask) et des vitesses
   différentes. Le 2ᵉ groupe (copie) est ajouté en JS pour une boucle sans
   couture (voir script.js §9). Sur mobile : une seule colonne. */
.tcols {
  display: flex;
  justify-content: center;
  gap: 22px;
  max-height: 680px;
  overflow: hidden;
  /* Fondu en haut et en bas pour faire apparaître/disparaître les cartes */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.tcol { width: 100%; max-width: 330px; }
.tcol--md, .tcol--lg { display: none; } /* révélées en tablette / desktop */

.tcol__track {
  display: flex;
  flex-direction: column;
  animation: tcol-scroll var(--tcol-dur, 36s) linear infinite;
  will-change: transform;
}
/* Pause au survol pour laisser le temps de lire — UNIQUEMENT sur les appareils
   à pointeur : au tactile, un tap « colle » le :hover et figeait tout. */
@media (hover: hover) {
  .tcols:hover .tcol__track { animation-play-state: paused; }
}

@keyframes tcol-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Mobile (< 700px, là où une seule colonne était visible) : on abandonne le
   défilement vertical automatique — peu maniable au doigt — pour un carrousel
   à BALAYAGE horizontal (scroll-snap natif). `display: contents` aplatit les
   colonnes : les 9 cartes deviennent les diapositives, y compris celles des
   colonnes 2 et 3 masquées ailleurs. Les groupes clonés par le JS pour la
   boucle (aria-hidden) sont écartés pour ne pas dupliquer les cartes. */
@media (max-width: 699.98px) {
  .tcols {
    justify-content: flex-start;
    gap: 14px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 6px 4px 26px;      /* place pour l'ombre des cartes (sinon rognée) */
    scrollbar-width: none;       /* barre de défilement masquée (geste naturel) */
  }
  .tcols::-webkit-scrollbar { display: none; }

  .tcol, .tcol--md, .tcol--lg, .tcol__track, .tcol__group { display: contents; }
  .tcol__track { animation: none; }
  .tcol__group[aria-hidden="true"] { display: none; }  /* copies de boucle du JS */

  .tcard {
    flex: 0 0 min(86%, 330px);
    scroll-snap-align: center;
    margin-bottom: 0;
  }
}

/* Carte témoignage */
.tcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-md);
  /* marge (et non gap) : garantit un espace après CHAQUE carte, copie comprise,
     pour que le translateY -50% boucle pile sur le groupe dupliqué */
  margin-bottom: 22px;
}
.tcard__text {
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.62;
  font-style: normal;
}
.tcard__person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.tcard__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--bg-soft);
}
.tcard__id { display: flex; flex-direction: column; }
.tcard__name { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.tcard__role { font-size: 0.84rem; color: var(--ink-faint); line-height: 1.3; }

/* ---------- 6. CTA + formulaire ---------- */
.cta {
  position: relative;
  padding: 104px 0 100px;
  overflow: hidden;
  /* Fond CONTINU : haut et bas exactement à la couleur des sections voisines
     (--bg) → aucune couture visible ; le centre s'éclaire en douceur. Le radial
     est centré verticalement (46%) et retombe à 0 avant les bords : plus de
     bande nette en haut comme avant. */
  background:
    radial-gradient(58% 52% at 50% 46%,
      rgba(var(--accent-rgb), 0.12) 0%,
      rgba(var(--accent-2-rgb), 0.08) 38%,
      rgba(250, 251, 252, 0) 72%),
    linear-gradient(180deg, var(--bg) 0%, #efe6e1 50%, var(--bg) 100%);
}
/* Halo diffus, entièrement à l'intérieur de la section (plus rogné par overflow) */
.cta__glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 760px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(var(--accent-rgb), 0.18) 0%,
    rgba(var(--accent-2-rgb), 0.12) 42%,
    rgba(255, 255, 255, 0) 70%);
  filter: blur(50px);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; text-align: center; }
.cta__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 18px;
}
.cta__lead { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 30px; }
.cta__btn { margin-bottom: 0; }

/* Séparateur "ou" entre l'appel direct et le formulaire */
.cta__or {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  margin: 28px auto 26px;
}
.cta__or::before,
.cta__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cta__or span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Formulaire premium : carte nette, liseré dégradé, champs confortables */
.form {
  position: relative;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 34px 32px 30px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Liseré dégradé en haut de la carte (signature GoJido) */
.form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.form__row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.form__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form__field span { font-size: 14px; font-weight: 500; color: var(--ink); }
.form__field input,
.form__field textarea {
  font-family: inherit;
  font-size: 16px;  /* jamais < 16px : iOS zoome automatiquement au focus sinon */
  color: var(--ink);
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  resize: vertical;
}
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--ink-faint); }
.form__field input:hover,
.form__field textarea:hover { border-color: #cfcac4; }
.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}
.form__submit { width: 100%; margin-top: 6px; }
.form__submit svg { width: 18px; height: 18px; }
/* Réassurance sous le bouton (cadenas + délai de réponse) */
.form__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
}
.form__note svg { width: 14px; height: 14px; flex-shrink: 0; }
.form__status { font-size: 14px; margin-top: 12px; text-align: center; min-height: 20px; }
.form__status.is-ok { color: #15803d; }
.form__status.is-err { color: #dc2626; }

/* ---------- 7. Footer ---------- */
.footer { background: var(--white); border-top: 1px solid var(--border); padding: 54px 0 30px; }
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.footer__brand p { color: var(--ink-soft); margin-top: 10px; max-width: 38ch; font-size: 0.95rem; }
.footer__links { display: flex; gap: 22px; }
.footer__links a {
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.footer__links a:hover { color: var(--accent); }
.footer__bottom {
  padding-top: 22px;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* ---------- 7bis. Bouton WhatsApp flottant (discret, secondaire) ----------
   Pastille anthracite à icône cuivre : présent en permanence en bas à droite
   mais volontairement effacé (opacité réduite) pour ne pas voler la vedette au
   CTA principal « Réserver un appel ». Révélé en JS quand le numéro est valide. */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;                 /* au-dessus du contenu, sous la lightbox (200) */
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);      /* anthracite */
  color: var(--accent);        /* icône cuivre rosé (signature) */
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 6px 20px rgba(26, 26, 29, 0.22);
  opacity: 0.9;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float:hover {
  opacity: 1;
  transform: translateY(-3px);
  background: var(--ink-soft);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.3);
}
.wa-float:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.5);
}
@media (max-width: 640px) {
  .wa-float { right: 16px; bottom: 16px; width: 48px; height: 48px; }
  .wa-float svg { width: 24px; height: 24px; }
}

/* ---------- 8. Responsive (tablette / desktop) ---------- */
@media (min-width: 700px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .why { grid-template-columns: repeat(3, 1fr); }
  .tcol--md { display: block; } /* 2ᵉ colonne de témoignages */
}

@media (min-width: 860px) {
  /* Bento : carte vedette haute à gauche, 2 cartes empilées à droite */
  .bento {
    grid-template-columns: 1.25fr 1fr;
    align-items: stretch;
  }
  .bento__item--feature { grid-row: 1 / span 2; }

  /* La bande "sur-mesure" occupe toute la largeur, texte + marquee côte à côte */
  .bento__more {
    grid-column: 1 / -1;
    grid-template-columns: 0.85fr 1.4fr;
    align-items: center;
    gap: 36px;
  }
}

@media (min-width: 960px) {
  /* Timeline verticale : on aère un peu et on agrandit les cartes en desktop */
  .steps { gap: 30px; }
  .step__card { padding: 26px 30px; }

  .footer__inner { flex-direction: row; align-items: center; }

  .tcol--lg { display: block; } /* 3ᵉ colonne de témoignages */
}

@media (max-width: 820px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* Tablette & mobile : on resserre le rythme vertical entre les sections
   (sur desktop 92px respire bien, sur petit écran c'est trop d'air). */
@media (max-width: 768px) {
  .section { padding: 58px 0; }
  .section__head { margin-bottom: 36px; }
  .cta { padding: 64px 0 60px; }        /* le CTA final suit le même rythme resserré */
  .tcols { max-height: 520px; }         /* colonne de témoignages moins haute sur mobile */
}

/* Très petits écrans : les 2 boutons du hero passent en pleine largeur,
   empilés — plus faciles à viser au pouce qu'une paire côte à côte. */
@media (max-width: 480px) {
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* Petits écrans : le hero tient sur UN écran, sans piste de scroll résiduelle.
   (L'ancienne version animait le hero au scroll sur ~2 écrans ; ce n'est plus
   le cas — la hauteur excédentaire ne créait qu'un grand vide avant la section
   suivante.) Le padding bas réserve la place de la barre de confiance
   (positionnée en absolu) pour que le contenu centré ne passe pas dessous. */
@media (max-width: 600px) {
  .hero { height: auto; }
  .hero__sticky { padding: 88px 20px 140px; }
  .hero__hint { display: none; }  /* superflu au tactile, chevauchait la barre de confiance */
  .hero__trust { bottom: 22px; }
  .hero__trust-label { margin-bottom: 12px; }
  .hero__trust .trust__logos { gap: 12px 26px; }
  .hero__trust .trust__logos span { font-size: 16px; }
}

/* ---------- 9. Accessibilité : préférence "moins d'animations" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up, .reveal { opacity: 1 !important; transform: none !important; }

  /* La hero redevient un bloc centré classique (pas d'effet sticky au scroll).
     Le dégradé vertical sombre→clair reste, lui (c'est du CSS statique). */
  .hero { height: auto; }
  .hero__sticky { position: static; height: auto; min-height: 100vh; }
  .hero__net { transform: none !important; opacity: 1 !important; }
  .hero__content { transform: none !important; }
  .hero__hint { display: none; }
  .hero__trust {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    margin-top: 44px;
  }

  /* Marquee figé : pas de défilement, logos centrés qui passent à la ligne. */
  .logos { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logos__track { animation: none; width: 100%; }
  .logos__group { flex-wrap: wrap; justify-content: center; padding-right: 0; gap: 18px 32px; }

  /* Témoignages figés : on coupe le défilement et le fondu, on montre une
     pile statique (les 3 colonnes restent visibles côte à côte si l'espace
     le permet, sinon empilées). */
  .tcols {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    flex-wrap: wrap;
  }
  .tcol--md, .tcol--lg { display: block; }
  .tcol__track { animation: none; }
}


/* =====================================================================
   Rythme sombre — blocs anthracite qui ponctuent le parcours clair
   (Pourquoi GoJido + CTA/footer), en écho au hero. La profondeur est
   pilotée par --dark-surface (réglage « Contraste »).
   ===================================================================== */
.section--dark { background: var(--dark-surface); }
.section--dark .section__title { color: #f5f3f0; }
.section--dark .section__lead { color: #c4c4c8; }
.section--dark .eyebrow { color: var(--accent); }

/* Sur fond sombre, le dégradé signature s'éclaircit (comme dans le hero). */
.section--dark .gradient-text,
.cta--dark .gradient-text {
  background: linear-gradient(120deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Cartes « Pourquoi » en verre sombre */
.section--dark .why__item {
  background: rgba(245, 243, 240, 0.045);
  border-color: rgba(245, 243, 240, 0.10);
  box-shadow: none;
}
.section--dark .why__item:hover {
  background: rgba(245, 243, 240, 0.06);
  border-color: rgba(245, 243, 240, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.section--dark .why__title { color: #f5f3f0; }
.section--dark .why__text { color: #c4c4c8; }
.section--dark .why__icon {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

/* CTA final sombre — mêmes halos que le hero */
.cta--dark {
  background:
    radial-gradient(58% 52% at 50% 44%,
      rgba(var(--accent-rgb), 0.16) 0%,
      rgba(var(--accent-2-rgb), 0.10) 40%,
      rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, var(--dark-surface) 0%, #101012 50%, var(--dark-surface) 100%);
}
.cta--dark .cta__glow {
  background: radial-gradient(circle,
    rgba(var(--accent-rgb), 0.22) 0%,
    rgba(var(--accent-2-rgb), 0.12) 42%,
    rgba(0, 0, 0, 0) 70%);
}
.cta--dark .cta__title { color: #f5f3f0; }
.cta--dark .cta__lead { color: #c4c4c8; }
.cta--dark .cta__or span { color: #8a8a8f; }
.cta--dark .cta__or::before,
.cta--dark .cta__or::after { background: rgba(245, 243, 240, 0.14); }

/* Formulaire sur fond sombre */
.cta--dark .form {
  background: rgba(245, 243, 240, 0.045);
  border-color: rgba(245, 243, 240, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.cta--dark .form__field span { color: #ece7e1; }
.cta--dark .form__field input,
.cta--dark .form__field textarea {
  background: rgba(245, 243, 240, 0.06);
  border-color: rgba(245, 243, 240, 0.14);
  color: #f5f3f0;
}
.cta--dark .form__field input::placeholder,
.cta--dark .form__field textarea::placeholder { color: #8a8a8f; }
.cta--dark .form__field input:hover,
.cta--dark .form__field textarea:hover { border-color: rgba(245, 243, 240, 0.24); }
.cta--dark .form__field input:focus,
.cta--dark .form__field textarea:focus {
  border-color: var(--accent);
  background: rgba(245, 243, 240, 0.09);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22);
}
.cta--dark .form__note { color: #8a8a8f; }

/* Footer sombre (prolonge le CTA) */
.footer--dark {
  background: var(--dark-surface);
  border-top-color: rgba(245, 243, 240, 0.10);
}
.footer--dark .nav__logo { color: #f5f3f0; }
.footer--dark .footer__brand p { color: #b8b4ae; }
.footer--dark .footer__inner { border-bottom-color: rgba(245, 243, 240, 0.10); }
.footer--dark .footer__links a { color: #c4c4c8; }
.footer--dark .footer__links a:hover { color: var(--accent); }
.footer--dark .footer__bottom { color: #8a8a8f; }

/* =====================================================================
   Titrage : police pilotable (réglage « Police »). Le corps de texte
   suit --font-body, les titres --font-head.
   ===================================================================== */
.hero__wordmark, .hero__title, h1, h2, h3,
.section__title, .cta__title, .nav__logo,
.bento__title, .step__title, .why__title, .why__big,
.metric b, .tcard__name {
  font-family: var(--font-head, "Inter", system-ui, sans-serif);
}


/* =====================================================================
   Logo image (remplace le wordmark placeholder). Bascule automatique
   blanc (sur fond sombre) / anthracite (sur pilule claire).
   ===================================================================== */
.nav__logo-img { height: 26px; width: auto; display: block; }
.nav__logo-img--on-dark { display: none; }
.nav--over-dark .nav__logo-img--on-light { display: none; }
.nav--over-dark .nav__logo-img--on-dark { display: block; }
@media (max-width: 480px) { .nav__logo-img { height: 22px; } }


/* =====================================================================
   Hero : logo complet interactif (parallaxe 3D au pointeur + reflet
   métallique balayant, piloté par script.js / CSS).
   ===================================================================== */
.hero__logo {
  position: relative;
  width: clamp(210px, 32vw, 400px);
  margin-bottom: 26px;
}
.hero__logo-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.4));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}
.hero__logo:hover .hero__logo-img {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.5)) brightness(1.08);
}


/* =====================================================================
   Fiabilité de l'apparition du hero : ce moteur d'aperçu gèle parfois les
   transitions d'opacité. On fait donc apparaître logo / titre / actions via
   is-in SANS dépendre d'un fondu d'opacité (comme le badge et le sous-titre,
   qui s'affichent, eux, de façon fiable).
   ===================================================================== */
.hero__logo.fade-up,
.hero__title.fade-up,
.hero__actions.fade-up { transition-property: filter; }