/* =====================================================================
   Odihome — page de routage (wireframe v3)
   Le seul job de cette page : faire choisir le pays. Texte condensé à
   une seule promesse, CTA remontés, confiance renforcée. Le pitch
   complet (bénéfices, preuve, avis) vit sur les landing pages BE/FR.
   Fichier organisé en sections claires pour rester facile à modifier :
   1. Design tokens (couleurs, typographies, espacements)
   2. Reset / base
   3. Utilitaires
   4. Navigation
   5. Hero (promesse + confiance)
   6. Téléphone — mise en scène du teaser
   7. Sélection du pays
   8. Footer
   9. Responsive
   10. Accessibilité (prefers-reduced-motion)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens — modifier ici pour changer les couleurs, polices,
   espacements de toute la page.
   --------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --color-paper: #faf7f2;
  --color-ink: #171a21;
  --color-ink-soft: #4a4f5c;
  --color-ink-faint: #8a8f9c;
  --color-blue: #007eff;
  /* bleu de l'app iOS — même valeur, même identité */
  --color-blue-soft: #e6f2ff;
  --color-sage: #00b894;
  /* vert de l'app — remplace l'olive #5c6b4f */
  --color-sage-soft: #e3f7f2;
  --color-line: #e4dfd5;
  --color-card: #fffdfa;
  /* jamais #fff : un blanc pur durcit tout l'écran */
  --color-danger: #ff5c5c;
  --color-orange: #ffb74d;
  --color-eyebrow-dot: var(--color-sage);
  /* était #c0392b — reliquat de l'ancienne palette */

  /* Couleur d'action principale (peut être changée sans toucher au reste) */
  --color-action: var(--color-blue);

  /* Typographies */
  /* Inter Tight ne se distingue d'Inter qu'au-delà de ~40px : réservée aux grands
     titres. En dessous, `--font-body` suffit et évite de charger pour rien. */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* Échelle d'espacement */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;

  /* Layout */
  --container-width: 1080px;
  --radius-sm: 9px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* Ombres */
  --shadow-card-hover: 0 24px 48px -20px rgba(23, 26, 33, 0.18);
  --shadow-phone: 0 24px 48px -14px rgba(23, 26, 33, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);

  /* Thème sombre — page seuil aujourd'hui, sections sombres des pages internes ensuite */
  --dark-bg: #0e1013;
  /* noir bleuté : le noir pur écrase les nuances */
  --dark-surface: #16191e;
  --dark-line: rgba(255, 255, 255, 0.1);
  --dark-line-strong: rgba(255, 255, 255, 0.18);
  --dark-text: #f4f1ec;
  /* blanc cassé, cohérent avec --color-paper */
  --dark-text-soft: #a2a7b0;
  --dark-text-faint: #6d727c;

  /* Rythme des animations */
  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 500ms;

  /* Effet « slide up » des boutons pilule — jetons dédiés, pas partagés avec
     --duration-normal / --ease-signature : les changer ici ne touche RIEN
     d'autre sur le site (cartes, survols de couleur…). Hérite des mêmes
     valeurs par défaut, mais peut s'en écarter librement. */
  --btn-slide-duration: 250ms;
  --btn-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------
   2. Reset / base
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Le header (.nav--sticky) reste collé en haut de l'écran : sans ça, un
     clic sur un lien du menu ("Fonctionnalités", "Tarifs"…) amène le bord
     tout en haut de la section pile sous le viewport, et le header le
     recouvre en partie — titre ou capsule légèrement coupés. ~84px de
     hauteur de nav + un peu de respiration. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

svg {
  display: block;
}

button {
  font: inherit;
}

/* ---------------------------------------------------------------------
   3. Utilitaires
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   4. Navigation — minimale, pas de menu vers des pages inexistantes
   --------------------------------------------------------------------- */
.nav {
  border-bottom: 1px solid var(--color-line);
}

/* Barre alignée sur le blueprint de la page seuil : sigle SVG, retraits
   pleine largeur — logo et boutons près des bords de l'écran plutôt que
   calés sur la largeur du contenu — et deux actions à droite. Le menu à
   cinq ancres reste : sur 12 écrans de contenu, c'est lui qui rend la
   page praticable, et la barre est collante. */
.nav__logo img {
  height: 38px;
  width: auto;
  display: block;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav--sticky .nav__inner {
  max-width: none;
  padding-inline: clamp(18px, 3vw, 44px);
}

/* Même peau sombre que le header de la page seuil (.page-home .nav dans
   home.css), reprise ici puisque France/Belgique chargent styles.css
   seul, sans home.css. */
.nav--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 18, 21, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 18px;
}

.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}

.nav__lang {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: #c9ccd2;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-inline: auto;
}

.nav__menu a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #c9ccd2;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}

.nav__menu a:hover {
  color: #fff;
}

.nav__menu a.nav__country {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.nav__cta {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------
   5. Hero — compact, une seule promesse
   --------------------------------------------------------------------- */
.hero {
  padding: 44px var(--space-3) 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--color-sage);
  background: var(--color-sage-soft);
  border-radius: var(--radius-full);
  padding: 5px 13px;
  margin-bottom: 18px;
}

.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-eyebrow-dot);
  display: inline-block;
  flex-shrink: 0;
}

.eyebrow--blue {
  color: var(--color-blue);
  background: var(--color-blue-soft);
}

.eyebrow--neutral {
  color: var(--color-ink-soft);
  background: rgba(23, 26, 33, 0.06);
}

.eyebrow--neutral .eyebrow__dot {
  background: var(--color-ink-soft);
}

.eyebrow--blue .eyebrow__dot {
  background: var(--color-blue);
}

/* Fond translucide plutôt qu'un ton pastel plein : lisible aussi bien sur
   le fond sombre de la section constat que sur les surfaces claires. */
.eyebrow--red {
  color: var(--color-danger);
  background: rgba(255, 92, 92, 0.16);
}

.eyebrow--red .eyebrow__dot {
  background: var(--color-danger);
}

/* Centrée indépendamment du `text-align` du parent — même technique que
   l'accroche du hero, sortie de son bloc de texte. */
.eyebrow--center {
  display: flex;
  width: fit-content;
  margin: 0 auto 32px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--color-ink);
}

.hero-subtitle {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 440px;
  margin-bottom: var(--space-3);
}

/* Badge de confiance — un vrai composant, pas une simple ligne de texte */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 11px 16px;
  max-width: 420px;
  /* Le badge collait aux deux boutons juste en dessous : ils se lisaient
     comme un même bloc alors que l'un rassure et l'autre appelle à agir. */
  margin-bottom: 22px;
}

.trust-badge__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-sage);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.trust-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.trust-badge__text strong {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.trust-badge__text span {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--color-ink-soft);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   6. Téléphone — démo chapitrée BE ↔ FR, réduite, secondaire (pas le
   sujet principal de la page). Le contenu de l'écran est piloté par
   js/main.js ; ici uniquement la mise en scène visuelle.
   --------------------------------------------------------------------- */
.chapter-label {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.chapter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: opacity var(--duration-normal) ease;
}

.chapter-pill__flag {
  font-size: 0.9375rem;
}

.step-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--color-sage);
  margin-bottom: 14px;
  min-height: 16px;
}

.chapter-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.chapter-dot {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.chapter-dot.is-active {
  background: var(--color-blue);
}

.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.waveform-bg {
  position: absolute;
  width: 130%;
  opacity: 0.4;
  top: 2%;
  z-index: 0;
  pointer-events: none;
}

.phone {
  position: relative;
  z-index: 1;
  width: 196px;
  background: #0f1116;
  border-radius: 26px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
  animation: phone-float 7s ease-in-out infinite;
}

.phone__screen {
  background: linear-gradient(160deg, #1a1d24, #0f1116);
  border-radius: 17px;
  height: 340px;
  position: relative;
  overflow: hidden;
  padding: 13px 11px;
  color: #fff;
}

.phone__status {
  font-size: 0.5rem;
  color: var(--color-ink-faint);
  display: flex;
  justify-content: space-between;
  margin-bottom: 11px;
}

.phone__title {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-bottom: 11px;
}

.phone__field {
  background: #20242e;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.phone__field-label {
  font-family: var(--font-mono);
  font-size: 0.46875rem;
  color: var(--color-ink-faint);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.phone__field-value {
  font-size: 0.625rem;
  color: #edeff3;
}

.photo-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--duration-normal) ease,
    transform var(--duration-normal) ease;
}

.photo-chip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.photo-chip__thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(48, 73, 255, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.bottom-card {
  position: relative;
  background: var(--color-blue);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.6875rem;
  transition: background var(--duration-normal) ease;
}

.bottom-card.is-structured {
  background: #20242e;
}

.bottom-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-danger);
  display: inline-block;
  margin-right: 6px;
}

.checklist-title {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: #8fa0ff;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65625rem;
  color: #edeff3;
}

.checklist__tick {
  color: #6fe0a0;
  font-weight: 700;
}

@keyframes phone-float {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -8px;
  }
}

/* ---------------------------------------------------------------------
   7. Sélection du pays — remontée, le vrai cœur de la page
   --------------------------------------------------------------------- */
.country-select {
  padding: 24px var(--space-3) var(--space-6);
  max-width: var(--container-width);
  margin-inline: auto;
}

.country-select__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-bottom: 28px;
}

.country-select__title strong {
  color: var(--color-ink);
  font-weight: 600;
}

.country-select__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.country-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-normal) var(--ease-signature);
}

.country-card:hover,
.country-card:focus-visible {
  box-shadow: var(--shadow-card-hover);
}

.country-card:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

.country-card__flag {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.country-card__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.country-card__benefit {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
  min-height: 40px;
}

.country-card__cta {
  background: var(--color-blue);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  width: fit-content;
  margin-top: 2px;
  transition: transform var(--duration-fast) var(--ease-signature);
}

.country-card:hover .country-card__cta,
.country-card:focus-visible .country-card__cta {
  transform: translateX(4px);
}

.country-card__expert {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.71875rem;
  color: var(--color-sage);
  font-weight: 600;
}

.country-card__expert svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-sage);
}

/* ---------------------------------------------------------------------
   7bis. Hero des landing pages pays (Belgique/France) — hiérarchie
   visuelle inspirée de Lemlist (titre bicolore centré, double CTA,
   barre d'onglets, panneau produit), avec l'identité Odihome.
   --------------------------------------------------------------------- */
.landing-hero {
  padding: var(--space-6) var(--space-3) var(--space-5);
  max-width: var(--container-width);
  margin-inline: auto;
  text-align: center;
}

.landing-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

/* Masque de révélation, PAR LIGNE : chaque ligne a son propre cadre
   overflow:hidden, chacune sort de sous sa propre ligne de base — pas
   tout le bloc d'un coup. La 2e ligne démarre un peu après la 1re pour
   une petite cascade plutôt qu'un aplat synchrone. */
.landing-hero__title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.15em;
}

.landing-hero__title-line-inner {
  display: inline-block;
  transform: translateY(110%);
}

/* Surlignage statique d'un mot-clé du titre (ex. « Automatisez » côté BE) —
   bleu translucide, pas d'animation contrairement à .feat-pin-highlight
   (celle-ci est liée au cycle de démo « Relecture IA »). */
.landing-hero__title-highlight {
  background-color: #bbd4fc;
  padding: 0 6px;
  border-radius: 4px;
}

.landing-hero__title.is-revealed .landing-hero__title-line-inner {
  animation: landing-hero-title-up 0.7s var(--ease-signature) forwards;
}

.landing-hero__title.is-revealed .landing-hero__title-line:nth-child(2) .landing-hero__title-line-inner {
  animation-delay: 90ms;
}

@keyframes landing-hero-title-up {
  from {
    transform: translateY(110%);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__title-line-inner {
    transform: none;
  }

  .landing-hero__title.is-revealed .landing-hero__title-line-inner {
    animation: none;
  }
}

.landing-hero__subtitle {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  opacity: 0;
}

/* Démarre pendant que la 2e ligne du titre finit encore de remonter
   (0.7s + 90ms de délai) : les deux s'enchaînent sans blanc entre eux. */
.landing-hero__subtitle.is-revealed {
  animation: landing-hero-subtitle-in 0.5s ease-out forwards;
  animation-delay: 550ms;
}

@keyframes landing-hero-subtitle-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__subtitle {
    opacity: 1;
  }

  .landing-hero__subtitle.is-revealed {
    animation: none;
  }
}

.landing-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.btn-primary-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  /* Rembourrage vertical déplacé sur `.btn-slide` (voir plus bas) : c'est ce
     qui permet au texte de glisser jusqu'aux bords réels du bouton au survol,
     plutôt que dans une fenêtre plus petite centrée dedans. */
  padding: 0 14px 0 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-signature),
    transform var(--duration-fast) var(--ease-signature);
}

.btn-primary-pill:hover,
.btn-primary-pill:focus-visible {
  background: #2138d6;
  transform: translateY(-1px);
}

.btn-primary-pill:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.btn-primary-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.btn-primary-pill__icon svg {
  width: 13px;
  height: 13px;
}

.btn-secondary-pill {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  padding: 0 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-signature),
    color var(--duration-fast) var(--ease-signature);
}

.btn-secondary-pill:hover {
  border-color: var(--color-ink);
}

/* ---------------------------------------------------------------------
   Deux formes ajoutées avec le blueprint de la page seuil.

   `.btn-app-pill` — contour VERT, réservé au téléchargement de l'app. Le
   vert de marque porté par le trait et le texte reste lisible sur fond
   clair, ce qui n'est pas le cas d'un texte blanc posé dessus (2,54:1).

   `.pill-seal` — l'allure d'une pilule, mais ce n'est PAS un bouton : à
   poser sur un `<span>`, pour les mentions de confiance. Contour discret
   et non bleu, sinon on croit à une action.
   --------------------------------------------------------------------- */
.btn-app-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-sage);
  border: 1.5px solid var(--color-sage);
  border-radius: var(--radius-full);
  padding: 0 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-signature),
    color var(--duration-fast) var(--ease-signature);
}

.btn-app-pill:hover {
  background: var(--color-sage);
  color: #fff;
}

.pill-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  padding: 11px 22px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  opacity: 0.75;
  cursor: default;
}

.btn-secondary-pill:hover,
.btn-secondary-pill:focus-visible {
  border-color: var(--color-ink-soft);
}

.btn-secondary-pill:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

.landing-hero__note {
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-5);
}

.landing-hero__note-deco {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto 4px;
  pointer-events: none;
  user-select: none;
}

/* Ici elle précède les deux colonnes de comparaison, pas un texte
   collé juste en dessous : il lui faut plus de respiration en bas. */
.compare-section .landing-hero__note-deco {
  margin-bottom: 28px;
}

.feat-pin-head .landing-hero__note-deco {
  margin-top: 14px;
}

/* ---------------------------------------------------------------------
   Container à 5 onglets du hero — chaque onglet a sa propre carte,
   affichée immédiatement en dessous. Fait partie intégrante du hero,
   pas une section séparée (voir .how-it-works-demo plus bas, distincte).
   --------------------------------------------------------------------- */
.hero-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.hero-tab {
  border: 1px solid var(--color-line);
  background: var(--color-card);
  color: var(--color-ink-soft);
  font-size: 0.84375rem;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-signature),
    color var(--duration-fast) var(--ease-signature),
    border-color var(--duration-fast) var(--ease-signature);
}

.hero-tab:hover {
  border-color: var(--color-ink-soft);
}

.hero-tab:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

.hero-tab.is-active {
  background: var(--color-sage-soft);
  color: var(--color-sage);
  border-color: var(--color-sage);
  font-weight: 600;
}

/* Les 5 panneaux sont empilés dans la MÊME cellule de grille : leurs
   hauteurs différentes (simple carte, tableau, carte scindée...)
   comptent toutes pour le calcul de la hauteur de la cellule, qui se
   cale donc sur la plus haute — passer d'un onglet à l'autre ne fait
   plus varier la hauteur du module, rien ne bouge autour. */
.hero-tab-panels {
  display: grid;
  text-align: left;
}

.hero-tab-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.hero-tab-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: hero-panel-fade var(--duration-slow) var(--ease-signature);
}

@keyframes hero-panel-fade {
  from {
    opacity: 0;
    translate: 0 6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.hero-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
}

/* Précise que l'illustration montre le mode Standard (BE) — utile sur les étapes
   communes aux deux modes, pour ne pas laisser croire qu'elles sont propres au
   Dictaphone. */
.hero-card__mode-note {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-size: 0.62rem;
  font-style: italic;
  color: var(--color-ink-soft);
  opacity: 0.5;
}

/* Étape 2 · Dictez — assistant conversationnel à gauche, tableau live
   des pièces à droite. */
.hero-card--split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  max-width: 900px;
  padding: 0;
  overflow: hidden;
}

.hero-card__assistant {
  padding: var(--space-4);
  border-right: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero-card__rooms {
  padding: var(--space-4);
}

.hero-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.hero-card__header-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-blue);
  flex-shrink: 0;
}

.hero-card__bubble {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 90%;
}

/* Utilisé hors layout flex (carte simple, pas .hero-card--split) où il n'y
   a pas de gap automatique entre la bulle et ce qui suit. */
.hero-card__bubble--spaced {
  margin-bottom: var(--space-3);
}

.hero-card__bubble--user {
  align-self: flex-end;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-weight: 500;
}

.hero-card__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.hero-card__note {
  margin-bottom: var(--space-3);
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-blue);
  text-align: center;
  background: var(--color-blue-soft);
  border-radius: var(--radius-md);
}

.hero-card__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.hero-card__chip {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  background: var(--color-paper);
}

.hero-card__chip.is-selected {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
  font-weight: 600;
}

.hero-card__chip.is-selected-sage {
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: #fff;
  font-weight: 600;
}

/* Capsule d'action (« Vos éléments »/« Vos pièces » côté app) — pointillés,
   pas une valeur sélectionnable comme les autres capsules. */
.hero-card__chip--action {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.hero-card__field {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
}

.hero-card__field-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.hero-card__field-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--color-ink);
}

.hero-card__field-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #5fa8ff;
}

.hero-card__field--upload {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: var(--color-ink-soft);
  font-size: 0.8125rem;
  padding: 18px;
}

.hero-card__button {
  display: inline-block;
  background: var(--color-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 12px 20px;
  border-radius: var(--radius-full);
}

.hero-room-table {
  width: 100%;
  border-collapse: collapse;
}

/* Étape 4 (FR) uniquement : 5 colonnes (Élément/Caractéristique/État/
   Dégradation/Photo) — trop pour tenir sur une carte étroite en mobile, les
   dernières colonnes sortaient du cadre. Défilement horizontal contenu
   dans la carte plutôt que de perdre des colonnes : .hero-room-table
   garde son comportement normal partout ailleurs (ex. tableau Pièce/Statut
   à 2 colonnes, qui n'en a pas besoin). */
.hero-room-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
}

.hero-room-table--elements {
  min-width: 480px;
}

/* Fondu à droite : signale qu'il reste du contenu à faire glisser dans
   .hero-room-table-scroll ci-dessus. Statique (pas de JS pour le masquer
   une fois arrivé au bout) — reste discret, une carte de démo n'a pas
   besoin de plus. */
.hero-card--elements {
  position: relative;
}

.hero-card--elements::after {
  content: "";
  position: absolute;
  top: var(--space-4);
  bottom: var(--space-4);
  right: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--color-card));
  pointer-events: none;
}

.hero-room-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  font-weight: 500;
  padding-block: 8px;
}

/* En-têtes en capsule colorée — variante utilisée pour le tableau
   Élément/Caractéristique/État/Dégradation/Photo (étape 4 FR). */
.hero-room-table__th-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.hero-room-table__th-badge--gray {
  background: rgba(138, 143, 156, 0.14);
  color: var(--color-ink-faint);
}

.hero-room-table__th-badge--blue {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.hero-room-table__th-badge--red {
  background: rgba(255, 92, 92, 0.14);
  color: var(--color-danger);
}

.hero-room-table__th-badge--orange {
  background: rgba(255, 183, 77, 0.16);
  color: var(--color-orange);
}

.hero-room-table__th-badge--purple {
  background: rgba(167, 139, 250, 0.16);
  color: #7c5cbf;
}

.hero-room-table td {
  padding-block: 10px;
  border-top: 1px solid var(--color-line);
  font-size: 0.84375rem;
  color: var(--color-ink);
}

.hero-room-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78125rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 4px 10px;
}

.hero-room-status--done {
  background: rgba(92, 107, 79, 0.12);
  color: var(--color-sage);
}

.hero-room-status--progress {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.hero-room-status--todo {
  background: var(--color-paper);
  color: var(--color-ink-faint);
}

.hero-room-status--added {
  background: rgba(255, 183, 77, 0.16);
  color: var(--color-orange);
}

.hero-room-table__edit {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--color-blue);
  cursor: pointer;
}

.hero-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-photo-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 18px 8px;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  text-align: center;
}

.hero-photo-grid__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.hero-card--report {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 420px;
}

.hero-report__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.hero-report__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--color-line);
  flex-shrink: 0;
}

.hero-report__cabinet {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-faint);
}

.hero-report__filename {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.hero-report__status {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-sage);
}

.hero-report__swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-report__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-report__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  margin-left: 4px;
}

.hero-report__hint {
  font-size: 0.8125rem;
  color: var(--color-ink-faint);
  line-height: 1.4;
}

.hero-report__cta {
  align-self: center;
}

.how-it-works-demo {
  padding-block: var(--space-6);
  text-align: center;
}

.how-it-works {
  margin-bottom: var(--space-4);
}

.how-it-works__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-sage);
  margin-bottom: 8px;
}

.how-it-works__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 560px;
  margin-inline: auto;
}

.how-it-works__subtitle {
  font-size: 1rem;
  color: var(--color-ink-soft);
  max-width: 480px;
  margin: 8px auto 0;
}

/* Cadre vidéo — réutilisé par le bloc agence (capture réelle du
   dashboard). Paysage uniquement : le format portrait servait aux
   anciens onglets iPhone, retirés au profit du scroll pinné ci-dessus. */
.video-frame {
  width: 260px;
  margin-inline: auto;
  background: #0f1116;
  border-radius: 22px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
}

.video-frame__screen {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.video-frame__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-frame--landscape {
  width: 100%;
  max-width: 600px;
  padding: 14px;
  border-radius: 18px;
}

.video-frame--landscape .video-frame__screen {
  aspect-ratio: 918 / 480;
  border-radius: 10px;
}

/* ---------------------------------------------------------------------
   8. Footer minimal — pas de colonnes de contenu qui n'existe pas ici
   --------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--color-line);
  padding-block: 22px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-ink);
}

.footer__links {
  display: flex;
  gap: 18px;
  font-size: 0.75rem;
}

.footer__links a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--color-ink);
}

.footer__copyright {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--color-ink-faint);
}

/* ---------------------------------------------------------------------
   8bis. Section douleur — juste après le hero des landing pages pays.
   Réutilise les tokens du hero (polices, couleurs, style de carte du
   stepper) ; aucun CTA dans cette section.
   --------------------------------------------------------------------- */
.pain-section {
  padding-block: var(--space-6) var(--space-7);
  text-align: center;
}

.pain-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-ink);
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
}

.pain-intro {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left;
  margin-bottom: var(--space-3);
}

.pain-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.pain-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-blue);
  margin-bottom: var(--space-2);
}

.pain-card__stat {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-blue);
  margin-bottom: 6px;
}

.pain-card__stat--text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.pain-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.pain-card__description {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.pain-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-faint);
  max-width: 620px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------
   Utilitaire d'espacement — sections ajoutées après la section douleur.
   Desktop ~64-128px (fluide), mobile 64px plancher.
   --------------------------------------------------------------------- */
.section-spacing {
  padding-block: clamp(64px, 10vw, 128px);
}

/* ---------------------------------------------------------------------
   8bis-b. Comparaison avant / avec Odihome
   --------------------------------------------------------------------- */

.compare-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}

.compare-headline {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 10px;
}

.compare-subtitle {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
  max-width: 520px;
  margin: 0 auto 16px;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.compare-col {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* Verre dépoli façon Apple : assez transparent pour deviner l'image des
   téléphones derrière, flouté pour que le texte reste lisible par-dessus. */
.compare-col--before {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(180, 188, 200, 0.4);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
}

.compare-col--after {
  border-color: #4ca2ff;
  background: #4ca2ff;
  box-shadow: var(--shadow-card-hover);
}

.compare-col--after .compare-col__title {
  color: #fff;
  font-weight: 800;
}

.compare-col__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.compare-flow {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Espace à gauche pour la bulle flèche (positionnée hors de la capsule,
     voir li::before ci-dessous). */
  margin-left: 34px;
}

/* Chaque étape en capsule — blanche sur le verre dépoli clair, bleu foncé
   (plus clair que le fond de la carte) sur la carte bleue (cf.
   .compare-col--after ci-dessous). */
.compare-flow li {
  position: relative;
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(23, 26, 33, 0.06);
}

/* Bulle flèche, à gauche de la capsule plutôt que dedans — positionnée hors
   de la boîte de la capsule (cf. margin-left sur .compare-flow ci-dessus). */
.compare-flow li::before {
  content: "→";
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  background: #a3a9b3;
  border: 1px solid #a3a9b3;
  color: #fff;
}

.compare-col--after .compare-flow li {
  color: #fff;
  font-weight: 500;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  box-shadow: none;
}

.compare-col--after .compare-flow li::before {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
  color: #4890da;
}

.compare-col__summary {
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}

.compare-col--after .compare-col__summary {
  color: #fff;
  font-weight: 500;
  border-top-color: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------------------------------
   8bis-bb. Bloc agence — sa propre section pleine largeur (fond
   sombre, capture réelle du dashboard), extraite de l'ancienne grille
   de fonctionnalités qui l'englobait (remplacée par .feat-pin-* ci-
   dessus). Non modifié autrement.
   --------------------------------------------------------------------- */
.agency-block {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
  text-align: left;
}

.agency-block__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.agency-block__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.agency-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agency-block__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}

.agency-block__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}

.agency-block__media {
  display: flex;
  justify-content: center;
}

/* Remplace l'ancienne vidéo de démo (lien mort, jamais raccordé après la
   réorganisation des assets vidéo) par une capture dashboard — image déjà
   au format ordinateur portable (mockup inclus), d'où une largeur plus
   généreuse que .feat-card__visual--image (pensée pour un mockup téléphone
   plus étroit). */
.agency-block__image {
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* ---------------------------------------------------------------------
   8bis-c. Bénéfices — trois blocs
   --------------------------------------------------------------------- */
.benefits-headline {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 10px;
}

.benefits-subtitle {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
  max-width: 520px;
  margin: 0 auto var(--space-5);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.benefit-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.benefit-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.benefit-card__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.benefit-card__icon--blue {
  color: #5fa8ff;
}

.benefit-card__icon--green {
  color: #6fe0a0;
}

.benefit-card__icon--orange {
  color: #ffb74d;
}

.benefit-card__icon--red {
  color: #ff8a8a;
}

.benefit-card__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* ---------------------------------------------------------------------
   8bis-d. Exemple de rapport
   --------------------------------------------------------------------- */
.report-example {
  text-align: center;
}

.report-example__headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 10px;
}

.report-example__subtitle {
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
  max-width: 520px;
  margin: 0 auto var(--space-5);
}

.report-example__preview {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.report-example__mock {
  width: 100%;
  max-width: 460px;
  height: 280px;
}

.report-example__image {
  width: 100%;
  max-width: 760px;
  height: auto;
}

/* ---------------------------------------------------------------------
   8bis-e. Preuves et réassurance
   --------------------------------------------------------------------- */
.proof-section {
  text-align: center;
}

.proof-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.proof-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
  text-align: left;
}

.proof-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}

.proof-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-sage);
  font-weight: 700;
}

/* Variante riche (titre + description par item) utilisée sur la page
   France quand le contenu fourni dépasse une simple ligne de confiance. */
.proof-list--rich {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 880px;
}

.proof-list--rich li {
  padding-left: 0;
}

.proof-list--rich li::before {
  content: none;
}

.proof-list--rich li strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.proof-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.proof-item__icon--blue {
  color: #5fa8ff;
}

.proof-item__icon--green {
  color: #6fe0a0;
}

.proof-item__icon--orange {
  color: #ffb74d;
}

.proof-item__icon--red {
  color: #ff8a8a;
}

.proof-list--rich li span {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

@media (max-width: 640px) {
  .proof-list--rich {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   8bis-f. Tarifs
   --------------------------------------------------------------------- */
.pricing-section {
  text-align: center;
}

.pricing-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 10px;
}

.pricing-subtitle {
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
  max-width: 520px;
  margin: 0 auto var(--space-2);
}

.pricing-note {
  font-size: 0.875rem;
  color: var(--color-ink-faint);
  max-width: 520px;
  margin: 0 auto var(--space-5);
}

.pricing-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: var(--space-5);
}

.pricing-toggle__btn {
  border: none;
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.pricing-toggle__btn.is-active {
  background: var(--color-blue);
  color: #fff;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left;
}

.pricing-grid[hidden] {
  display: none;
}

/* France n'a que 2 offres (pas de palier agence) — 3 colonnes fixes
   laissaient un troisième emplacement fantôme qui décentrait la paire. */
.pricing-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}

.pricing-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pricing-card--highlight {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-card-hover);
}

.pricing-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}

.pricing-card__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-blue);
}

.pricing-card__credits {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  margin-bottom: 8px;
}

.pricing-card__features {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pricing-card__features li {
  position: relative;
  padding-left: 20px;
  font-size: 0.84375rem;
  color: var(--color-ink-soft);
}

.pricing-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-sage);
  font-weight: 700;
}

/* Spécificités du plan agence (agents, packs supplémentaires) sorties
   de la liste à cocher et mises en capsules — trop d'info à plat une
   fois la liste commune de 9 fonctionnalités ajoutée à chaque carte. */
.pricing-card__addons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}

.pricing-card__addon {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.pricing-card__addon--blue {
  color: var(--color-blue);
  background: var(--color-blue-soft);
}

.pricing-card__addon--sage {
  color: var(--color-sage);
  background: var(--color-sage-soft);
}

.pricing-card__addon--orange {
  color: #b8710a;
  background: rgba(255, 183, 77, 0.2);
}

.pricing-card__addon--red {
  color: #d13f3f;
  background: rgba(255, 92, 92, 0.16);
}

.pricing-card__addon--purple {
  color: #7c5cbf;
  background: rgba(167, 139, 250, 0.18);
}

/* Sépare visuellement les blocs de fonctionnalités (ex : spécificités
   du plan, puis fonctionnalités communes à tous les plans) — la liste
   à plat devenait dense une fois les 9 fonctionnalités communes
   ajoutées à chaque carte. */
.pricing-card__features li.pricing-card__divider {
  height: 0;
  padding: 0;
  margin: 4px 0;
  border-top: 1px solid var(--color-line);
}

.pricing-card__features li.pricing-card__divider::before {
  content: none;
}

.pricing-card .btn-primary-pill,
.pricing-card .btn-secondary-pill {
  justify-content: center;
  width: 100%;
}

/* ---------------------------------------------------------------------
   8bis-g. FAQ
   --------------------------------------------------------------------- */
.faq-section {
  text-align: center;
}

.faq-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.faq-help-cta {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.faq-help-cta--bottom {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

.faq-list {
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.faq-item {
  border-bottom: 1px solid var(--color-line);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 18px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.faq-item__icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-ink-faint);
  transition: transform var(--duration-fast) ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  color: var(--color-blue);
}

.faq-item__answer {
  padding-bottom: 18px;
}

.faq-item__answer p {
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 580px;
}

.faq-item__answer p+p {
  margin-top: var(--space-2);
}

.faq-item__answer ul {
  margin: var(--space-2) 0 0;
  padding-left: 20px;
  max-width: 580px;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.faq-item__answer li {
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
   8bis-gg. Contact — juste après la FAQ, avant le CTA final.
   --------------------------------------------------------------------- */
.contact-section {
  text-align: center;
}

.contact-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.contact-subtitle {
  max-width: 480px;
  margin: 0 auto var(--space-4);
  color: var(--color-ink-soft);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}

.contact-form__row {
  display: flex;
  gap: var(--space-3);
}

.contact-form__row .contact-form__field {
  flex: 1;
  min-width: 0;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form__field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.contact-form__field input,
.contact-form__field textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-signature);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

/* Honeypot — jamais visible/atteignable par un visiteur qui navigue
   normalement (voir contact.php pour le traitement côté serveur). */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__submit {
  align-self: center;
  margin-top: var(--space-1);
}

.contact-form__status {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
}

.contact-form__status.is-success {
  color: var(--color-sage);
}

.contact-form__status.is-error {
  color: var(--color-danger);
}

@media (max-width: 640px) {
  .contact-form__row {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------
   8bis-h. CTA final
   --------------------------------------------------------------------- */
.final-cta {
  text-align: center;
}

/* Pile de trois téléphones en arrière-plan, mordant sur le bord gauche
   de la fenêtre — même principe que le décor du hero (bleed via
   calc(50% - 50vw)), mais posée en retrait derrière le texte (z-index).
   `.final-cta` porte déjà `position: relative` via `.surface-dark`. */
.final-cta__deco {
  position: absolute;
  top: 50%;
  left: calc(50% - 50vw - 20px);
  transform: translateY(-50%);
  height: clamp(520px, 55vw, 900px);
  width: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.final-cta> :not(.final-cta__deco) {
  position: relative;
  z-index: 1;
}

@media (max-width: 1500px) {
  .final-cta__deco {
    display: none;
  }
}

.final-cta__logo {
  display: block;
  width: clamp(120px, 13vw, 168px);
  height: auto;
  margin: 0 auto 4px;
}

.final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 10px;
}

.final-cta__subtitle {
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
  max-width: 560px;
  margin: 0 auto var(--space-4);
}

.final-cta .landing-hero__actions {
  justify-content: center;
}

.final-cta .landing-hero__note {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   8bis-i. Modale — vidéo hero et exemple de rapport
   --------------------------------------------------------------------- */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 26, 33, 0.72);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  background: #0f1116;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.modal__dialog--report {
  max-width: 900px;
  width: 100%;
  height: 95vh;
  max-height: 95vh;
  background: var(--color-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.modal__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
}

.modal__dialog--video {
  max-width: 920px;
  background: #000;
}

.modal__video-iframe-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.modal__video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.modal__report-iframe-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 640px;
  border-radius: var(--radius-md);
  /* Rendu par PDF.js (js/pdf-preview.mjs) : un <canvas> par page, empilés — on
     défile dedans plutôt que de figer une hauteur de cadre fixe comme l'ancien
     iframe. */
  overflow-y: auto;
  overflow-x: hidden;
  background: #f5f5f7;
  padding: 16px;
  box-sizing: border-box;
}

.modal__report-page {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 16px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.modal__report-page:last-child {
  margin-bottom: 0;
}

.modal__report-error {
  margin: 0;
  padding: 48px 24px;
  text-align: center;
  color: var(--color-ink-soft);
}

@media (max-width: 768px) {
  .modal__dialog--report {
    max-width: 100%;
    /* Un peu moins haut qu'en desktop (95vh) : sur mobile, la barre
       d'adresse du navigateur se montre/se cache dynamiquement, et 100vh
       ne le prend pas en compte — le haut du modal (et donc le bouton
       fermer ✕, positionné juste là) peut se retrouver caché derrière
       elle. On réduit la hauteur pour garder une marge de sécurité, et on
       bascule sur dvh (hauteur de viewport "dynamique", qui elle suit la
       barre d'adresse) là où le navigateur le supporte. */
    height: 88vh;
    max-height: 88vh;
  }

  @supports (height: 100dvh) {
    .modal__dialog--report {
      height: 88dvh;
      max-height: 88dvh;
    }
  }

  .modal__report-iframe-wrapper {
    min-height: 420px;
    padding: 10px;
  }
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.modal__close--dark {
  background: var(--color-paper);
  color: var(--color-ink);
}

body.modal-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   Fonctionnalités détaillées — scroll pinné, 10 fonctionnalités en 3
   groupes. Même mécanique que "Comment ça marche" (.pin-section
   ci-dessous) mais avec des classes .feat-pin-* distinctes : les deux
   sections cohabiteront sur la page une fois "Comment ça marche"
   réintégrée, elles ne doivent donc rien partager.
   --------------------------------------------------------------------- */
.feat-pin-head {
  padding-top: var(--space-6);
  text-align: center;
}

/* Espace en bas de section — .feat-pin-outer n'a pas .section-spacing
   (seul .padding-top vient de .feat-pin-head ci-dessus) contrairement à
   .feat-grid-section plus bas, qui l'a. Même valeur ici. */
.feat-pin-outer {
  /* padding et non margin : .surface-soft::before (le dégradé) s'arrête à la
     boîte de .feat-pin-outer — un margin-bottom laissait donc un bandeau au
     fond de page par défaut avant la section suivante, coupant le dégradé
     avant qu'il n'atteigne réellement le bas. */
  padding-bottom: clamp(64px, 10vw, 128px);
}

/* Grille claire pour "Fonctionnalités" : remplace l'ancien scroll épinglé
   (300vh + sticky) par une grille de cartes statiques, sur le même principe
   que .feat-grid plus bas mais à 2 colonnes — il n'y a que 3 étapes réelles
   ici (pas 7-8), une grille à 3 colonnes laisserait la 3e carte isolée. */
.feat-pin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: var(--space-5);
}

/* Toutes les cartes : texte à gauche, visuel à droite — même logique que
   .feat-card:first-child plus bas (là-bas réservée à la grande carte, ici
   étendue à toutes puisqu'il n'y a que 3 cartes, pas de petites cartes
   empilées à distinguer d'une grande). */
.feat-pin-grid .feat-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
}

/* Cartes 2 et 3 : moitié moins large que la grande carte — la même
   proportion 1.1/0.9 y laissait trop peu de place au visuel (texte des
   maquettes tassé mot par mot). Colonnes égales, gap réduit, et le
   rembourrage des maquettes (pensé pour une colonne bien plus large)
   resserré d'autant. */
.feat-pin-grid .feat-card:not(:first-child) {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.feat-pin-grid .feat-card:not(:first-child) .feat-pin-mock {
  padding: var(--space-3);
}

.feat-pin-grid .feat-card:not(:first-child) .feat-pin-room-block,
.feat-pin-grid .feat-card:not(:first-child) .feat-pin-lio-tip {
  padding: 8px 10px;
}

/* La maquette occupe déjà 100% de sa colonne en mise en page (justify-content
   n'a donc aucune prise) ; c'est son transform: scale(0.86) — recadré depuis
   le centre par défaut — qui laisse un vide visuel égal des deux côtés, y
   compris sur la grande carte (même mécanique, colonne juste plus large). Ce
   vide côté texte est trop visible : on recadre depuis la gauche à la place,
   le rétrécissement se reporte alors du côté du bord de carte, moins gênant. */
.feat-pin-grid .feat-card .feat-pin-mock {
  transform-origin: left center;
}

/* .feat-pin-mock porte une grande ombre portée (--shadow-phone, pensée pour
   flotter librement) ; ici elle se fait couper net par .feat-card__visual
   (overflow: hidden) faute de place en dessous — d'où une bande sombre au
   bord inférieur au lieu d'un fondu. Ombre nettement plus courte pour
   qu'elle s'estompe avant d'atteindre ce bord. */
.feat-pin-grid .feat-card .feat-pin-mock {
  box-shadow: 0 8px 16px -8px rgba(23, 26, 33, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.feat-pin-grid .feat-card__visual {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
}

/* Première carte en vedette : sur toute la largeur. */
.feat-pin-grid .feat-card:first-child {
  grid-column: span 2;
}

/* Grande carte plus haute — plus de respiration, comme la carte Multi-Agents
   de l'ancien site (le texte est plus long ici, l'espace supplémentaire n'est
   donc jamais vide). */
.feat-pin-grid .feat-card:first-child {
  min-height: 480px;
}

/* Espace avant la colonne visuelle — le texte touchait presque le visuel. */
.feat-pin-grid .feat-card:first-child .feat-card__content {
  padding-right: 24px;
}

/* Icône seule au-dessus du titre, grande — même traitement que
   .surface-dark .feat-card__icon-wrap/__icon plus bas, réutilisé ici tel
   quel plutôt que dupliqué. */
.feat-pin-grid .feat-card__icon-wrap {
  justify-content: flex-start;
  margin-bottom: 24px;
}


.feat-pin-grid .feat-pin-step__icon {
  width: 40px;
  height: 40px;
}

/* Grand espace entre le titre et l'accroche/description en dessous —
   l'icône n'étant plus sur la même ligne, le titre redevient un simple
   bloc texte. Taille alignée sur .surface-dark .feat-card__title plus
   bas (1.25rem au lieu du clamp ~1.4-1.75rem pensé pour le bloc épinglé
   plein écran). */
.feat-pin-grid .feat-pin-step__title {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 22px;
}

/* Accroche/description : même taille que .surface-dark .feat-card__text
   plus bas (0.9375rem). La description l'était déjà ; seule l'accroche
   (plus grande, pensée pour le bloc épinglé) est réduite ici — sauf sur
   la grande carte, qui garde son propre traitement (dégradé) plus bas. */
.feat-pin-grid .feat-pin-step__hook {
  font-size: 0.9375rem;
}

/* Accroche de la grande carte : grande et en dégradé, comme .card-title
   dans l'ancien site — le h3 au-dessus reste un simple titre, c'est
   l'accroche courte qui joue ce rôle (même logique que .feat-card__text
   sur .feat-card:first-child plus bas). */
.feat-pin-grid .feat-card:first-child .feat-pin-step__hook {
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: none;
  margin-bottom: var(--space-3);
  background: linear-gradient(135deg, #00b894 0%, #007aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (max-width: 900px) {
  .feat-pin-grid {
    grid-template-columns: 1fr;
  }

  .feat-pin-grid .feat-card {
    display: flex;
    flex-direction: column;
  }

  .feat-pin-grid .feat-card:first-child {
    grid-column: span 1;
    min-height: 0;
  }
}

.feat-pin-step__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.feat-pin-step__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.feat-pin-step__icon--blue {
  color: #5fa8ff;
}

.feat-pin-step__icon--green {
  color: #6fe0a0;
}

.feat-pin-step__icon--orange {
  color: #ffb74d;
}

.feat-pin-step__icon--red {
  color: #ff8a8a;
}

.feat-pin-step__hook {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-blue);
  margin-bottom: var(--space-2);
  max-width: 440px;
}

.feat-pin-step__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 460px;
  margin-bottom: 20px;
}

.feat-pin-mock__image {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
}

/* Mockup produit — même traitement visuel que .pin-mock (dégradé bleu
   foncé), dupliqué ici pour rester indépendant. */
.feat-pin-mock {
  width: 100%;
  max-width: 380px;
  min-height: 420px;
  margin-inline: auto;
  background: linear-gradient(160deg, #26262b, #000);
  border-radius: 22px;
  padding: var(--space-4);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-phone);
}

/* 1 · Mode dictaphone */
.feat-pin-mock__wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}

.feat-pin-mock__wave span {
  width: 4px;
  border-radius: 2px;
  background: var(--color-blue);
  animation: feat-pin-wave 1.1s ease-in-out infinite;
}

.feat-pin-mock__wave span:nth-child(1) {
  height: 40%;
  animation-delay: 0ms;
}

.feat-pin-mock__wave span:nth-child(2) {
  height: 70%;
  animation-delay: 120ms;
}

.feat-pin-mock__wave span:nth-child(3) {
  height: 100%;
  animation-delay: 240ms;
}

.feat-pin-mock__wave span:nth-child(4) {
  height: 60%;
  animation-delay: 360ms;
}

.feat-pin-mock__wave span:nth-child(5) {
  height: 35%;
  animation-delay: 480ms;
}

@keyframes feat-pin-wave {

  0%,
  100% {
    transform: scaleY(0.6);
    opacity: 0.6;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.feat-pin-mock__transcript {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* Variante du mode dictaphone : la vague reste collée en haut de la carte
   (plutôt que centrée avec le texte comme bloc), et elle-même centrée
   horizontalement — la carte de base sert à d'autres étapes, donc tout
   ceci est scopé à ce seul modificateur, rien d'autre ne bouge. */
/* La carte de base centre déjà tout le groupe verticalement
   (`justify-content: center`) — seule la vague a besoin d'être recentrée
   horizontalement, ses barres étant alignées à gauche par défaut. */
.feat-pin-mock--dictaphone .feat-pin-mock__wave {
  justify-content: center;
}

/* Curseur clignotant à la suite du texte tapé au fur et à mesure (voir
   main.js) — un simple trait, pas un caractère, pour rester net à toutes
   les tailles. */
.feat-pin-mock__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: feat-pin-cursor-blink 0.9s step-end infinite;
}

@keyframes feat-pin-cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-pin-mock__cursor {
    animation: none;
  }
}

/* 2 · Enregistrement audio conservé */
.feat-pin-audio {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.feat-pin-audio__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.feat-pin-audio__body {
  flex: 1;
  min-width: 0;
}

.feat-pin-audio__name {
  font-size: 0.8125rem;
  color: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feat-pin-audio__bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.feat-pin-audio__bar-fill {
  display: block;
  width: 55%;
  height: 100%;
  background: var(--color-blue);
  border-radius: 2px;
}

/* 3 · Photos horodatées */
.feat-pin-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.feat-pin-photo-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
}

.feat-pin-photo-grid__icon {
  width: 22px;
  height: 22px;
}

.feat-pin-photo-grid__timestamp {
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  color: rgba(255, 255, 255, 0.55);
}

/* 4 · Dashboard web */
.feat-pin-property-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feat-pin-property-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.9);
}

.feat-pin-status {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.feat-pin-status--done {
  background: rgba(2, 177, 160, 0.2);
  color: #6fe0a0;
}

.feat-pin-status--progress {
  background: rgba(48, 73, 255, 0.25);
  color: #a9b7ff;
}

.feat-pin-status--todo {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

/* 5 · Assistant de relecture IA (même style que la carte équivalente
   de "Comment ça marche", dupliqué ici) */
.feat-pin-mock--structured {
  position: relative;
}

.feat-pin-room-block {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.feat-pin-room-block__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

/* Effet surligneur fluo : le fond jaune balaie tout le texte (pas juste
   un trait en dessous) puis s'efface, en boucle — comme si l'IA venait
   de marquer ce passage au marqueur avant validation. Jaune translucide
   pour que le texte reste lisible par-dessus. */
/* Cycle partagé (4s) avec .feat-pin-ai-card juste en dessous : le
   surlignage se dessine d'abord, puis la carte "Relecture IA" monte —
   jamais les deux à la fois, comme un vrai enchaînement détection →
   alerte. */
.feat-pin-highlight {
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 217, 61, 0.55), rgba(255, 217, 61, 0.55));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  color: #fff;
  padding: 0 2px;
  border-radius: 3px;
  animation: feat-pin-highlight-sweep 4s ease-in-out infinite;
}

/* Pas de retour arrière : une fois balayé, ça tient jusqu'à la fin du
   cycle puis ça disparaît d'un coup (steps) pour repartir de zéro —
   jamais un effacement à rebours. */
@keyframes feat-pin-highlight-sweep {
  0% {
    background-size: 0% 100%;
  }

  15% {
    background-size: 100% 100%;
  }

  78% {
    background-size: 100% 100%;
    animation-timing-function: steps(1, jump-end);
  }

  100% {
    background-size: 0% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-pin-highlight {
    animation: none;
    background-size: 100% 100%;
  }
}

.feat-pin-ai-card {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-2);
  background: #fff;
  color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  transform: translateY(10px);
  animation: feat-pin-ai-card-reveal 4s ease-in-out infinite;
}

.feat-pin-ai-card__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #5fa8ff;
}

/* Apparaît seulement une fois le surlignage complet (15% du cycle),
   reste montée pendant que le surlignage tient, redescend juste avant
   que celui-ci ne se réinitialise. */
@keyframes feat-pin-ai-card-reveal {

  0%,
  15% {
    opacity: 0;
    transform: translateY(10px);
  }

  28% {
    opacity: 1;
    transform: translateY(0);
  }

  78% {
    opacity: 1;
    transform: translateY(0);
  }

  90%,
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-pin-ai-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 6 · Synchronisation cloud */
.feat-pin-cloud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.feat-pin-cloud__icon {
  width: 36px;
  height: 36px;
}

.feat-pin-cloud__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feat-pin-cloud__links span {
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.feat-pin-cloud__devices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feat-pin-cloud__device-icon {
  width: 22px;
  height: 22px;
}

/* 7-9 · Rapport (variantes) */
.feat-pin-mock--report {
  background: var(--color-card);
  color: var(--color-ink);
}

.feat-pin-report__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-2);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-line);
}

.feat-pin-report__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--color-line);
  flex-shrink: 0;
}

.feat-pin-report__cabinet {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-faint);
}

.feat-pin-report__filename {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.feat-pin-report__status {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-sage);
}

.feat-pin-report__swatches {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feat-pin-report__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}

.feat-pin-report__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  margin-left: 4px;
}

.feat-pin-toc__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.feat-pin-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feat-pin-toc li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-ink);
}

.feat-pin-toc__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* .feat-pin-toc__title est gris foncé par défaut (pensé pour les cartes
   claires --report) : illisible sur le fond sombre qu'ont toutes les
   autres variantes de .feat-pin-mock. Un seul correctif générique plutôt
   qu'un par variante. */
.feat-pin-mock:not(.feat-pin-mock--report) .feat-pin-toc__title {
  color: rgba(255, 255, 255, 0.55);
}

.feat-pin-toc__title--center {
  text-align: center;
}

/* Capsules "pièce" (vert) / "élément" (bleu) — même forme et mêmes
   couleurs que les chips de sélection de l'app iOS (#00b894 / #007eff),
   fond neutre translucide au repos. Quelques capsules se "sélectionnent"
   tour à tour en boucle pour illustrer le geste, sur le même cycle
   partagé (4.8s, sans délai par élément) que .feat-pin-voice-chip /
   .feat-pin-lio-tip : toutes reviennent à zéro au même instant, pas de
   clignotement au rebouclage. */
.feat-pin-room-list,
.feat-pin-element-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.feat-pin-room-chip,
.feat-pin-element-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.1);
}

.feat-pin-room-chip:nth-child(1) {
  animation: feat-pin-room-pick-1 4.8s ease-in-out infinite;
}

.feat-pin-room-chip:nth-child(2) {
  animation: feat-pin-room-pick-2 4.8s ease-in-out infinite;
}

.feat-pin-room-chip:nth-child(3) {
  animation: feat-pin-room-pick-3 4.8s ease-in-out infinite;
}

.feat-pin-element-chip:nth-child(1) {
  animation: feat-pin-element-pick-1 4.8s ease-in-out infinite;
}

.feat-pin-element-chip:nth-child(2) {
  animation: feat-pin-element-pick-2 4.8s ease-in-out infinite;
}

.feat-pin-element-chip:nth-child(3) {
  animation: feat-pin-element-pick-3 4.8s ease-in-out infinite;
}

@keyframes feat-pin-room-pick-1 {

  0%,
  4% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }

  10%,
  82% {
    background: #00b894;
    color: #fff;
  }

  88%,
  100% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }
}

@keyframes feat-pin-room-pick-2 {

  0%,
  20% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }

  26%,
  82% {
    background: #00b894;
    color: #fff;
  }

  88%,
  100% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }
}

@keyframes feat-pin-room-pick-3 {

  0%,
  36% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }

  42%,
  82% {
    background: #00b894;
    color: #fff;
  }

  88%,
  100% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }
}

@keyframes feat-pin-element-pick-1 {

  0%,
  4% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }

  10%,
  82% {
    background: #007eff;
    color: #fff;
  }

  88%,
  100% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }
}

@keyframes feat-pin-element-pick-2 {

  0%,
  20% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }

  26%,
  82% {
    background: #007eff;
    color: #fff;
  }

  88%,
  100% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }
}

@keyframes feat-pin-element-pick-3 {

  0%,
  36% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }

  42%,
  82% {
    background: #007eff;
    color: #fff;
  }

  88%,
  100% {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
  }
}

.feat-pin-voice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Capsules colorées, une par mot-clé, icône micro plate (pas d'emoji).
   "Commandes vocales" au-dessus reste fixe — seules les capsules
   s'animent. `animation-delay` calait chacune sur son PROPRE cycle : au
   premier passage ça donnait bien un enchaînement 1-2-3-4, mais ensuite
   chaque capsule se réinitialisait à son propre instant plutôt que
   toutes ensemble — plus de vrai "recommence du début", juste un
   clignotement continu et désynchronisé. Un seul repère temporel commun
   (même `animation-duration` pour les 4, `animation-delay` à 0) avec un
   @keyframes propre à chacune règle le problème : toutes tombent à 0 au
   même instant, puis rejouent le même enchaînement 1-2-3-4 depuis zéro. */
.feat-pin-voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.84375rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  animation-duration: 4.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.feat-pin-voice-chip__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.feat-pin-voice-chip--blue {
  background: rgba(95, 168, 255, 0.18);
  color: #7fbcff;
  animation-name: feat-pin-voice-chip-1-in;
}

.feat-pin-voice-chip--purple {
  background: rgba(167, 139, 250, 0.18);
  color: #b9a3fb;
  animation-name: feat-pin-voice-chip-2-in;
}

.feat-pin-voice-chip--orange {
  background: rgba(255, 183, 77, 0.18);
  color: #ffc971;
  animation-name: feat-pin-voice-chip-3-in;
}

.feat-pin-voice-chip--red {
  background: rgba(255, 92, 92, 0.18);
  color: #ff8a8a;
  animation-name: feat-pin-voice-chip-4-in;
}

@keyframes feat-pin-voice-chip-1-in {

  0%,
  3% {
    opacity: 0;
    transform: translateY(6px);
  }

  8%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes feat-pin-voice-chip-2-in {

  0%,
  19% {
    opacity: 0;
    transform: translateY(6px);
  }

  24%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes feat-pin-voice-chip-3-in {

  0%,
  38% {
    opacity: 0;
    transform: translateY(6px);
  }

  43%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes feat-pin-voice-chip-4-in {

  0%,
  56% {
    opacity: 0;
    transform: translateY(6px);
  }

  61%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-pin-voice-chip {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 9 · Recommandations de Lio — même principe que les capsules "Commandes
   vocales" (délai par élément via nth-child, apparition une par une,
   réinitialisation nette en boucle), mais en petites cartes empilées
   plutôt qu'en capsules, le texte étant plus long. */
/* list-style/margin/padding jamais réinitialisés sur ce <ul> précis (à la
   différence de .feat-pin-toc/.feat-pin-room-list juste au-dessus) : le
   padding-left:40px par défaut du navigateur (réservé au marqueur de liste)
   réduisait silencieusement la largeur dispo pour les <li>, qui n'en
   occupaient donc que 130px sur 170 — d'où le vide à gauche des capsules. */
.feat-pin-lio-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}

/* Même repère temporel commun que les capsules "Commandes vocales" —
   voir le commentaire à ce sujet plus haut : un @keyframes par élément
   plutôt qu'un animation-delay partagé, pour que les trois retombent à
   zéro au même instant et rejouent l'enchaînement 1-2-3 depuis le début
   à chaque boucle, au lieu de clignoter chacune à son rythme. */
.feat-pin-lio-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  opacity: 0;
  transform: translateY(8px);
  animation-duration: 4.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* Même trio de couleurs que les capsules "Commandes vocales" juste
   au-dessus dans le parcours (bleu / orange / mauve) — déjà établi comme
   la palette de l'app, pas de nouvelle couleur inventée ici. */
.feat-pin-lio-tip:nth-child(1) {
  animation-name: feat-pin-lio-tip-1-in;
  border-color: rgba(95, 168, 255, 0.45);
}

.feat-pin-lio-tip:nth-child(1) .feat-pin-lio-tip__icon {
  color: #7fbcff;
}

.feat-pin-lio-tip:nth-child(2) {
  animation-name: feat-pin-lio-tip-2-in;
  border-color: rgba(255, 183, 77, 0.45);
}

.feat-pin-lio-tip:nth-child(2) .feat-pin-lio-tip__icon {
  color: #ffc971;
}

.feat-pin-lio-tip:nth-child(3) {
  animation-name: feat-pin-lio-tip-3-in;
  border-color: rgba(167, 139, 250, 0.45);
}

.feat-pin-lio-tip:nth-child(3) .feat-pin-lio-tip__icon {
  color: #b9a3fb;
}

.feat-pin-lio-tip__icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
  color: #a9b7ff;
}

.feat-pin-lio-tip p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

@keyframes feat-pin-lio-tip-1-in {

  0%,
  3% {
    opacity: 0;
    transform: translateY(8px);
  }

  8%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes feat-pin-lio-tip-2-in {

  0%,
  21% {
    opacity: 0;
    transform: translateY(8px);
  }

  26%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes feat-pin-lio-tip-3-in {

  0%,
  39% {
    opacity: 0;
    transform: translateY(8px);
  }

  44%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-pin-lio-tip {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 10 · Signature électronique */
.feat-pin-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.feat-pin-signature__mark {
  width: 140px;
  height: 52px;
  color: var(--color-blue);
}

.feat-pin-signature__label {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------
   Grille "Fonctionnalités" (.feat-pin-grid) : les maquettes .feat-pin-mock
   ci-dessus portent un fond sombre + du texte clair pensés pour un fond
   sombre derrière elles (ce qui reste vrai plus bas, cartes .surface-dark).
   Ici la maquette flotte sur une carte blanche — fond sombre isolé,
   détonnant. On la clarifie, en réajustant aussi le texte/les puces qui
   comptaient sur ce fond sombre pour rester lisibles. Placé après tous
   les styles de composants ci-dessus (et pas à côté de .feat-pin-grid en
   tête de fichier) pour gagner en priorité sur leurs sélecteurs
   :nth-child sans avoir à alourdir chaque règle.
   --------------------------------------------------------------------- */
.feat-pin-grid .feat-pin-mock {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}

.feat-pin-grid .feat-pin-mock__transcript {
  color: var(--color-ink-soft);
}

.feat-pin-grid .feat-pin-mock:not(.feat-pin-mock--report) .feat-pin-toc__title {
  color: var(--color-ink-faint);
}

.feat-pin-grid .feat-pin-room-block,
.feat-pin-grid .feat-pin-lio-tip {
  background: rgba(23, 26, 33, 0.045);
  border-color: var(--color-line);
}

.feat-pin-grid .feat-pin-room-block__text,
.feat-pin-grid .feat-pin-lio-tip p {
  color: var(--color-ink-soft);
}

.feat-pin-grid .feat-pin-highlight {
  color: var(--color-ink);
}

.feat-pin-grid .feat-pin-voice-chip--blue {
  background: rgba(0, 126, 255, 0.12);
  color: #0768c9;
}

.feat-pin-grid .feat-pin-voice-chip--purple {
  background: rgba(124, 92, 250, 0.15);
  color: #6b46e5;
}

.feat-pin-grid .feat-pin-voice-chip--orange {
  background: rgba(217, 122, 6, 0.14);
  color: #a15c00;
}

.feat-pin-grid .feat-pin-voice-chip--red {
  background: rgba(225, 75, 75, 0.12);
  color: #d13f3f;
}

/* ---------------------------------------------------------------------
   Comment ça marche — scroll pinné. .pin-section fournit la distance de
   scroll (5 étapes × ~96vh) ; .pin-viewport reste collé en haut de
   l'écran tant qu'elle défile (CSS pur, position: sticky) ; chaque
   .pin-step contient son propre texte + visuel et se superpose en
   fondu via js/main.js.
   --------------------------------------------------------------------- */
.pin-section {
  position: relative;
  height: 480vh;
}

.pin-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pin-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  align-items: start;
  width: 100%;
  text-align: left;
}

.pin-progress {
  grid-column: 1;
  display: flex;
  gap: 6px;
}

.pin-progress__tick {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-line);
  transition: background var(--duration-normal) ease;
}

.pin-progress__tick.is-active,
.pin-progress__tick.is-done {
  background: var(--color-blue);
}

/* Hauteur généreuse et fixe : les .pin-step sont en position: absolute
   (donc hors flux) et ne contribuent pas eux-mêmes à la hauteur de
   .pin-stack. Cette valeur doit rester >= à la plus haute .pin-mock
   réelle, faute de quoi son contenu déborde visuellement de la carte
   (bug déjà rencontré sur l'étape 1 : le champ adresse semblait
   "détaché"). Mieux vaut une marge généreuse ici qu'un débordement. */
.pin-stack {
  grid-column: 1 / -1;
  position: relative;
  min-height: 560px;
  margin-top: var(--space-3);
}

.pin-step {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-signature);
}

.pin-step.is-active {
  opacity: 1;
  pointer-events: auto;
}

.pin-step__number {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-blue);
  margin-bottom: 8px;
}

.pin-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.pin-step__description {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 480px;
}

.pin-dots {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-3);
}

.pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-line);
  transition:
    background var(--duration-normal) ease,
    transform var(--duration-normal) ease;
}

.pin-dot.is-active {
  background: var(--color-blue);
  transform: scale(1.3);
}

/* Mockup produit — fond dégradé bleu foncé, même ton "produit" que le
   mockup téléphone du hero. Réutilisé aussi par la section Exemple de
   rapport et sa modale (.pin-mock--report).
   Hauteur en min-height (pas height fixe) : le contenu détermine sa
   propre taille et ne peut jamais déborder visiblement de la carte. */
.pin-mock {
  width: 100%;
  max-width: 380px;
  min-height: 460px;
  margin-inline: auto;
  background: linear-gradient(160deg, #1a2a5c, #0f1116);
  border-radius: 22px;
  padding: var(--space-4);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-phone);
}

.pin-mock__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.pin-mock__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pin-mock__chip {
  font-size: 0.8125rem;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

.pin-mock__chip.is-selected {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
  font-weight: 600;
}

.pin-mock__field {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.pin-mock__field-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pin-mock__field-value {
  font-size: 0.875rem;
}

.pin-mock__field--upload {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  padding: 18px;
}

.pin-mock__button {
  align-self: flex-start;
  margin-top: 4px;
  background: var(--color-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 12px 20px;
  border-radius: var(--radius-full);
}

.pin-mock__wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}

.pin-mock__wave span {
  width: 4px;
  border-radius: 2px;
  background: var(--color-blue);
  animation: pin-wave 1.1s ease-in-out infinite;
}

.pin-mock__wave span:nth-child(1) {
  height: 40%;
  animation-delay: 0ms;
}

.pin-mock__wave span:nth-child(2) {
  height: 70%;
  animation-delay: 120ms;
}

.pin-mock__wave span:nth-child(3) {
  height: 100%;
  animation-delay: 240ms;
}

.pin-mock__wave span:nth-child(4) {
  height: 60%;
  animation-delay: 360ms;
}

.pin-mock__wave span:nth-child(5) {
  height: 35%;
  animation-delay: 480ms;
}

@keyframes pin-wave {

  0%,
  100% {
    transform: scaleY(0.6);
    opacity: 0.6;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.pin-mock__transcript {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.pin-mock__note {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: rgba(255, 255, 255, 0.55);
}

.pin-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pin-photo-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
}

.pin-mock--structured {
  position: relative;
}

.pin-room-block {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.pin-room-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 8px;
}

.pin-room-block__edit {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

.pin-room-block__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.pin-highlight {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  border-radius: 3px;
  padding: 0 2px;
}

.pin-room-block__photo {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
}

.pin-ai-card {
  margin-top: var(--space-2);
  background: #fff;
  color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-card-hover);
}

.pin-mock--report {
  background: var(--color-card);
  color: var(--color-ink);
}

.pin-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}

.pin-report__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.pin-report__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--color-line);
  flex-shrink: 0;
}

.pin-report__cabinet {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-faint);
}

.pin-report__filename {
  font-size: 0.9375rem;
  font-weight: 600;
}

.pin-report__status {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-sage);
}

.pin-report__swatches {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pin-report__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pin-report__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  margin-left: 4px;
}

/* ---------------------------------------------------------------------
   9. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .pain-grid,
  .benefits-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .nav__menu a:not(.nav__country) {
    display: none;
  }
}

/* Sous 700px, pas de menu burger pour replier les CTA : le bouton
   principal "Tester Odihome gratuitement" (texte long) est celui qui
   déborde en premier — on le masque et on garde juste "Télécharger
   l'app", plus court. */
@media (max-width: 700px) {
  .nav__cta:not(.nav__cta--app) {
    display: none;
  }
}

/* En dessous de 900px (pas assez de place pour deux colonnes fixes), ou
   si l'utilisateur préfère moins de mouvement : on repasse en scroll
   normal, empilé, une étape à la fois — texte + visuel ensemble, dans
   le flux du document, sans position: sticky. */
@media (max-width: 900px),
(prefers-reduced-motion: reduce) {
  .pin-section {
    height: auto;
  }

  .pin-viewport {
    position: static;
    height: auto;
    padding-block: var(--space-6);
  }

  .pin-inner {
    display: block;
  }

  .pin-progress,
  .pin-dots {
    display: none;
  }

  .pin-stack {
    position: static;
    min-height: 0;
    margin-top: 0;
  }

  .pin-step {
    position: static;
    opacity: 1;
    pointer-events: auto;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .pin-step:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 820px) {

  .hero-grid,
  .compare-grid,
  .agency-block {
    grid-template-columns: 1fr;
  }

  .hero-card--split {
    grid-template-columns: 1fr;
  }

  .hero-card__assistant {
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }

  .country-select__grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 2rem;
  }

  .video-frame {
    width: 160px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile étroit : le nom du pays à côté du drapeau pousse le CTA "Tester
   Odihome gratuitement" hors cadre — on garde le drapeau seul. */
@media (max-width: 480px) {
  .nav__country-name {
    display: none;
  }
}

@media (max-width: 640px) {

  .pain-grid,
  .benefits-grid,
  .pricing-grid,
  .proof-list {
    grid-template-columns: 1fr;
  }

  .pain-headline {
    font-size: 1.625rem;
  }

  .pricing-toggle {
    flex-direction: column;
    width: 100%;
  }

  .pricing-toggle__btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   10. Accessibilité — prefers-reduced-motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .phone {
    animation: none;
  }

  .photo-chip,
  .bottom-card,
  .chapter-pill,
  .chapter-dot,
  .country-card,
  .country-card__cta {
    transition-duration: 0.001ms;
  }

  .pin-mock__wave span {
    animation: none;
  }

  .btn-slide__track {
    transition-duration: 0.001ms;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Reveal au scroll — sections des landing pages pays qui apparaissent en
   fondu + léger décalage vertical à l'entrée dans le viewport. Piloté par
   IntersectionObserver (voir main.js) : une seule classe basculée, jamais
   de cascade par carte à l'intérieur — volontairement discret.
   --------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-slow) var(--ease-signature),
    transform var(--duration-slow) var(--ease-signature);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------
   Effet de survol « slide up » sur les boutons pilule
   ---------------------------------------------------------------------
   Le libellé glisse vers le haut et sort du cadre ; une copie identique
   arrive du bas pour prendre sa place. Deux lignes réelles empilées dans
   `.btn-slide__track`, qui se décale d'une hauteur de ligne au survol —
   pas de `content: attr()` : ça n'aurait pas permis aux deux copies de
   se déplacer en sens contraire l'une de l'autre.

   Accessibilité : la copie du bas porte `aria-hidden="true"`, donc le nom
   accessible du bouton reste le libellé unique du haut, pas les deux mis
   bout à bout. `:focus-visible` déclenche le même effet qu'un survol, pour
   qu'il ne soit pas réservé à la souris.

   L'icône flèche (`.btn-primary-pill__icon`) reste EN DEHORS de `.btn-slide` :
   elle ne glisse pas, seul le texte le fait.
   --------------------------------------------------------------------- */

/* `--slide-pad` porte le rembourrage vertical QUE le bouton hôte a cédé (voir
   ses propres règles, `padding: 0 …`) : la fenêtre de défilement retrouve
   ainsi la hauteur RÉELLE du bouton, bords compris — c'est ce qui donne
   l'impression que le texte sort et rentre par les bords du bouton, plutôt
   que par une fenêtre plus petite flottant en son centre. 0 par défaut, pour
   qu'un bouton qui n'en définit pas se comporte comme avant. */
.btn-slide {
  --slide-pad: 0px;
  --slide-h: calc(var(--slide-pad) * 2 + 1.3em);
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: var(--slide-h);
}

.btn-slide__track {
  display: block;
  transition: transform var(--btn-slide-duration) var(--btn-slide-ease);
}

.btn-slide__row {
  display: block;
  padding-block: var(--slide-pad);
  line-height: 1.3;
  box-sizing: border-box;
}

.btn-primary-pill .btn-slide,
.btn-secondary-pill .btn-slide,
.btn-app-pill .btn-slide {
  --slide-pad: 13px;
  /* même valeur que le padding vertical qu'ils cédaient */
}

.market__btn--primary .btn-slide {
  --slide-pad: 11px;
}

.btn-primary-pill:hover .btn-slide__track,
.btn-primary-pill:focus-visible .btn-slide__track,
.btn-secondary-pill:hover .btn-slide__track,
.btn-secondary-pill:focus-visible .btn-slide__track,
.btn-app-pill:hover .btn-slide__track,
.btn-app-pill:focus-visible .btn-slide__track,
.market__btn--primary:hover .btn-slide__track,
.market__btn--primary:focus-visible .btn-slide__track {
  transform: translateY(calc(var(--slide-h) * -1));
}

/* ---------------------------------------------------------------------
   Grille des fonctionnalités secondaires
   ---------------------------------------------------------------------
   Sept fonctionnalités qui comptent mais ne portent pas la différence :
   elles se lisent d'un coup d'œil au lieu de coûter un écran de défilement
   chacune. Les trois qui différencient restent dans le bloc épinglé.
   --------------------------------------------------------------------- */

.feat-grid__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 var(--space-4);
}

.feat-grid {
  display: grid;
  /* 3 colonnes fixes (pas auto-fit) : c'est ce qui permet à la première carte
     de « span 2 » et de laisser exactement 1 carte à côté d'elle en rangée 1,
     comme la grande carte Multi-Agents de l'ancien site — repris ci-dessous. */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Première carte en vedette, comme .feature-card.large dans l'ancien site :
   2 colonnes sur 3 → rangée 1 = cette carte + la suivante, rangée 2 = les 3
   cartes restantes. */
.feat-card:first-child {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feat-card:first-child {
    grid-column: span 2;
  }
}

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

  .feat-card:first-child {
    grid-column: span 1;
  }
}

.feat-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 22px 24px 24px;
}

/* Le groupe rappelle le moment du parcours — même vocabulaire que les
   trois étapes épinglées, pour que la grille s'y raccroche. En capsule,
   ancrée dans le coin haut-droit de la carte (indépendante du flux —
   .feat-card porte position: relative ci-dessus), plutôt qu'un simple
   texte aligné à droite dans le flux du texte. */
.feat-card__group {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-sage);
  background: var(--color-sage-soft);
  border-radius: var(--radius-full);
}

/* Répété sur chaque carte, l'intitulé de groupe devenait redondant en
   fin de rangée. Gardé dans le DOM (alignement des titres inchangé
   entre cartes voisines) mais invisible sauf sur la première carte de
   chaque groupe. */
.feat-card__group--repeat {
  visibility: hidden;
}

.feat-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  text-align: center;
}

.feat-card__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0;
  text-align: center;
}

/* Maquette conservée dans la carte : mêmes composants que dans le bloc
   épinglé, simplement bornés. `--mock-scale` permet aux règles existantes de
   s'appliquer telles quelles sans être réécrites. */
.feat-card {
  display: flex;
  flex-direction: column;
}

.feat-card__visual {
  margin-top: auto;
  padding-top: 18px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.feat-card__visual .feat-pin-mock {
  width: 100%;
  max-width: 100%;
  transform: scale(0.86);
  transform-origin: center;
  /* .feat-pin-mock porte min-height: 420px en base (pensé pour le bloc épinglé,
     plein écran). transform: scale() ne change pas la taille de mise en page :
     sans cette réduction ici, la carte grandissait quand même pour loger les
     420px avant recadrage — d'où des cartes trop hautes dans cette grille. */
  min-height: 280px;
}

/* Première carte : vraie capture d'écran (reprise de l'ancien site) plutôt que la
   maquette animée — même logique que .card-visual img de l'ancien site. */
.feat-card__visual--image img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 16px;
  display: block;
  margin-inline: auto;
}

/* La maquette porte son propre panneau sombre (dégradé), pensé pour se détacher
   d'une section CLAIRE (bloc épinglé « fonctionnalités »). Posée telle quelle dans
   une carte déjà sombre (.surface-dark .feat-card), elle empile deux fonds sombres
   l'un sur l'autre — on la fait fondre dans la carte à la place. Exclu : les variantes
   qui ont leur propre fond voulu (--report = page blanche, un « papier » posé dedans). */
.surface-dark .feat-card__visual .feat-pin-mock:not(.feat-pin-mock--report) {
  background: transparent;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   Rythme des surfaces — blueprint de la page seuil
   ---------------------------------------------------------------------
   La page était uniformément sur `--color-paper` : les douze sections ne se
   distinguaient que par du vide. On alterne désormais trois surfaces, et la
   séparation se fait par la teinte plutôt que par l'espace.

   `container` borne le contenu à 1080 px, or une surface doit aller d'un bord
   à l'autre. D'où le fond posé en pseudo-élément débordant en `100vw` : on
   garde le centrage du contenu sans toucher au balisage.
   --------------------------------------------------------------------- */

.surface-card,
.surface-dark {
  position: relative;
}

.surface-card::before,
.surface-dark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.surface-card::before {
  background: var(--color-card);
  border-block: 1px solid var(--color-line);
}

/* Les deux moments sombres : le constat du problème, et la conclusion. Ils
   encadrent la démonstration comme le panneau noir encadre la page seuil. */
.surface-dark::before {
  background: radial-gradient(ellipse 82% 72% at 50% 50%, #26262b 0%, #000 72%);
}

/* La couleur claire ne vaut QUE pour le texte posé à même le fond sombre.
   Sans cette restriction elle déteignait à l'intérieur des cartes blanches
   de la section — les sous-titres y devenaient illisibles.
   `:where()` garde une spécificité nulle : les règles propres à chaque
   composant continuent de l'emporter sans avoir à surenchérir. */
.surface-dark {
  color: #f5f5f7;
}

.surface-dark :where(h2, h3, .pain-headline, .final-cta__title) {
  color: #f5f5f7;
}

.surface-dark :where(.pain-intro, .pain-note, .final-cta__subtitle) {
  color: #c9ccd2;
}

/* .proof-list li / .proof-list--rich li strong,span ont une spécificité
   (classe + tag(s)) que :where() (poids nul) ne peut pas emporter — override
   direct nécessaire ici plutôt que dans la liste :where() ci-dessus. */
.surface-dark .proof-list li {
  color: #c9ccd2;
}

.surface-dark .proof-list--rich li strong {
  color: #f5f5f7;
}

.surface-dark .proof-list--rich li span {
  color: #c9ccd2;
}

/* .btn-secondary-pill est pensé pour un fond clair (texte + contour foncés,
   voir plus haut) — sur fond sombre (ex. final-cta) il devenait quasi
   invisible. Repris en clair, même logique que les cartes .pain-card. */
.surface-dark .btn-secondary-pill {
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.3);
}

.surface-dark .btn-secondary-pill:hover,
.surface-dark .btn-secondary-pill:focus-visible {
  border-color: #f5f5f7;
}

/* Cartes sombres elles aussi (plus de carte claire posée sur le fond
   sombre) : un ton à peine plus clair que le fond suffit à les détacher.
   Icône centrée plutôt que casée à gauche. Une couleur par carte, dans
   l'ordre — rouge, orange, bleu — posée par position, pas par classe :
   rien à changer côté HTML si l'ordre des cartes bouge un jour. */
.surface-dark .pain-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

.surface-dark .pain-card :where(p, h3) {
  color: inherit;
}

.surface-dark .pain-card__description {
  color: #c9ccd2;
}

/* "Et tout le reste, sans y penser" en sombre : même traitement que les
   .pain-card (carte à peine plus claire que le fond). Les icônes de
   titre passent en rouge/orange/bleu/vert au fil des cartes (voir
   .feat-card__icon--*), posées par classe cette fois puisque chaque
   carte a un icône distinct — pas de rotation automatique par position
   possible ici (contrairement aux .pain-card, qui partagent une icône
   par carte mais pas un sujet). */
.surface-dark .feat-card {
  /* Couleur fixe, pas une superposition transparente : la première carte, en
     « span 2 », chevauche le centre du dégradé radial de fond de la section
     (plus clair au milieu) — avec un fond semi-transparent elle ressortait donc
     visiblement plus claire que les cartes normales, plus étroites et décalées
     du centre. Un ton opaque rend toutes les cartes identiques, quelle que soit
     leur position/largeur. */
  background: #232328;
  border-color: rgba(255, 255, 255, 0.1);
  padding: 28px 28px 24px;
}

.surface-dark .feat-card__text {
  color: #c9ccd2;
}

/* Habillage repris des cartes sombres de l'ancien site (icône + titre) : icône plus
   grande posée à gauche plutôt que centrée, titre plus affirmé, tout aligné à gauche.
   Seul le texte change de traitement — le visuel (.feat-card__visual) reste centré,
   l'ancien site n'ayant pas d'équivalent à cette maquette animée. */
.surface-dark .feat-card__icon-wrap {
  justify-content: flex-start;
  /* Un peu plus d'air avant le titre — descend le bloc titre/texte sous l'icône. */
  margin-bottom: 24px;
}

.surface-dark .feat-card__icon {
  width: 40px;
  height: 40px;
}

.surface-dark .feat-card__title {
  /* Espace dédié entre le titre et le texte d'explication (au lieu des 6px
     serrés de la règle de base, pensée pour un titre suivi directement du
     texte sans respiration). */
  margin-bottom: 10px;
}

.surface-dark .feat-card__title,
.surface-dark .feat-card__text {
  text-align: left;
}

.surface-dark .feat-card__group {
  color: #6fe0a0;
  background: rgba(0, 184, 148, 0.16);
}

.surface-dark .feat-card__title {
  font-size: 1.25rem;
}

/* Cartes sans illustration (visuel retiré en BE/FR pour certaines cartes) :
   sans le bloc .feat-card__visual en dessous, les 10px ci-dessus paraissent
   trop serrés entre le titre et le texte — on creuse l'écart pour ces cartes. */
.surface-dark .feat-card:not(:has(.feat-card__visual)) .feat-card__title {
  margin-bottom: 18px;
}

/* Première carte : texte à gauche, image à droite — comme .feature-card.large
   dans l'ancien site (grid 2 colonnes, centré verticalement), au lieu de tout
   empiler comme les autres cartes. */
.surface-dark .feat-card:first-child {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}

.surface-dark .feat-card:first-child .feat-card__visual {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
}

/* Sous 641 px, la carte redevient une carte normale (grid-column: span 1,
   cf. media query plus haut) : pas assez de largeur pour deux colonnes,
   on repasse à l'empilement vertical comme les autres cartes. */
@media (max-width: 640px) {
  .surface-dark .feat-card:first-child {
    display: flex;
    flex-direction: column;
  }
}

/* Première carte : le texte d'explication devient le grand titre en dégradé,
   comme .card-title dans l'ancien site (le petit h3 au-dessus joue alors le
   rôle du label « MULTI-AGENTS »). */
.surface-dark .feat-card:first-child .feat-card__text {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #00b894 0%, #007aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.feat-card__icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.feat-card__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.feat-card__icon--blue {
  color: #5fa8ff;
}

.feat-card__icon--green {
  color: #6fe0a0;
}

.feat-card__icon--orange {
  color: #ffb74d;
}

.feat-card__icon--red {
  color: #ff8a8a;
}

.surface-dark .pain-card__icon {
  display: block;
  margin-inline: auto;
}

.surface-dark .pain-card:nth-child(1) .pain-card__icon {
  color: var(--color-danger);
}

.surface-dark .pain-card:nth-child(2) .pain-card__icon {
  color: var(--color-orange);
}

.surface-dark .pain-card:nth-child(3) .pain-card__icon {
  color: var(--color-blue);
}

/* ---------------------------------------------------------------------
   Hero — même surface que le haut de la page d'accueil
   --------------------------------------------------------------------- */

/* Première section de la page : pas de filet supérieur, la barre du haut
   pose déjà le sien juste au-dessus. */
.surface-card--first::before {
  border-top: 0;
}

/* Le PNG est cerné d'une large zone transparente : marges négatives pour le
   rapprocher du chapeau, comme sur la page d'accueil. */
.landing-hero__logo {
  display: block;
  width: clamp(120px, 13vw, 168px);
  height: auto;
  margin: -18px auto -6px;
}

/* ---------------------------------------------------------------------
   Démonstration interactive — surface du panneau France de l'accueil
   ---------------------------------------------------------------------
   Exactement le même dégradé radial que `.market--fr` : blanc pur au centre,
   `--color-paper` aux bords. Elle succède au hero, qui est en `--color-card` :
   deux surfaces claires voisines mais distinctes, la séparation se fait au
   filet.
   --------------------------------------------------------------------- */

.surface-soft {
  position: relative;
}

.surface-soft::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, #ffffff 0%, #ddd7c8 100%);
  border-block: 1px solid var(--color-line);
}

.hero-demo-section {
  padding-block: clamp(40px, 5vw, 72px);
}

.hero-demo-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 32px;
}

/* Module (onglets + cartes) à gauche, support téléphone à droite. Empilé
   en dessous de 1000px — le module garde tout l'espace, le téléphone
   passe en dessous. */
.hero-demo__layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-5);
}

.hero-demo__module {
  min-width: 0;
}

@media (min-width: 1000px) {
  .hero-demo__layout {
    grid-template-columns: 1.35fr 0.65fr;
    gap: var(--space-6);
  }
}

/* En dessous de 1000px, .hero-demo__layout passe en une colonne : le
   module est empilé au-dessus du téléphone. Le calage en grille de tous
   les onglets sur la même cellule (hauteur verrouillée sur le plus haut,
   utile en colonnes côte à côte pour éviter un sursaut visuel) devient
   ici un gros espace vide sous les onglets courts avant d'arriver au
   téléphone — chaque onglet reprend sa hauteur naturelle à la place. */
@media (max-width: 999px) {
  .hero-tab-panels {
    display: block;
  }

  .hero-tab-panel {
    display: none;
    grid-area: auto;
  }

  .hero-tab-panel.is-active {
    display: block;
  }
}

/* Cadre vide, prêt à recevoir une image ou vidéo de l'app : le contenu
   réel remplacera .hero-demo__phone-placeholder sans toucher au cadre. */
.hero-demo__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 5vw, 48px);
}

.hero-demo__phone {
  position: relative;
  width: min(260px, 70vw);
  aspect-ratio: 9 / 19.3;
  margin-inline: auto;
  background: #0b0b0d;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(15, 15, 20, 0.18);
}

.hero-demo__phone-notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 20px;
  background: #0b0b0d;
  border-radius: 12px;
  z-index: 2;
}

.hero-demo__phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-card);
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-demo__phone-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-ink-faint);
  text-align: center;
  padding: 24px;
}

.hero-demo__phone-placeholder svg {
  width: 34px;
  height: 34px;
}

.hero-demo__phone-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  line-height: 1.4;
}

/* Vidéos par étape — une par onglet, empilées et croisées en fondu au
   changement d'onglet (voir initHeroTabs dans main.js). */
.hero-demo__phone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* L'enregistrement d'écran laisse une bande noire en bas de la vidéo
     (pas un souci de cadrage CSS) : léger zoom ancré en haut pour la
     faire sortir du cadre visible. Ajuster la valeur si besoin. */
  transform: scale(1.05);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) ease;
}

.hero-demo__phone-video.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Capsules en haut à gauche du hero belge — même fichier que la page
   d'accueil, mais nettement plus petit : ici c'est un rappel discret, pas le
   sujet. La largeur découle de la hauteur au rapport du fichier (2206/1608),
   donc aucun rognage latéral quelle que soit la taille de l'écran. */
/* `clip` et non `hidden` : le débordement du décor est coupé sans créer de
   conteneur de défilement, donc sans barre horizontale. */
.landing-hero {
  overflow-y: clip;
}

.landing-hero__deco {
  position: absolute;
  top: -34px;
  /* le décor mord le haut de la section, coupé par son bord */
  /* Bord GAUCHE DE L'ÉCRAN, comme sur la page d'accueil. Le hero est un
     `.container` borné à 1080 px et centré : `calc(50% - 50vw)` ramène le
     décor au bord de la fenêtre quelle que soit sa largeur, et les 40 px
     supplémentaires le font mordre dehors. */
  left: calc(50% - 50vw - 40px);
  /* Hauteur FIXE et non relative : `62%` de la section donnait 520 px, le
     décor recouvrait le logo et le titre. Ici c'est un rappel d'angle. */
  height: clamp(150px, 17vw, 250px);
  aspect-ratio: 2206 / 1608;
  width: auto;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Le contenu passe devant : sans cela le décor (et la bannière téléphone,
   même traitement) se poseraient sur le texte. */
.landing-hero> :not(.landing-hero__deco):not(.landing-hero__phone-banner) {
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  .landing-hero__deco {
    display: none;
  }
}

/* Bannière téléphone à droite du hero (BE et FR partagent ce traitement),
   posée en absolu dans la marge à droite du container (comme le décor à
   gauche), masquée en dessous de 1100px. Image quasi carrée (deux
   téléphones côte à côte) : dimensionnée en LARGEUR pour contrôler
   directement jusqu'où elle mord dans la marge. */
.landing-hero__phone-banner {
  display: none;
  position: absolute;
  right: calc(50% - 50vw + 70px);
  bottom: calc(-1 * var(--space-5) + 250px);
  width: clamp(300px, 28vw, 480px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1100px) {
  .landing-hero__phone-banner {
    display: block;
    opacity: 0;
    animation: hero-phone-banner-in 900ms var(--btn-slide-ease) 150ms forwards;
  }
}

/* Même effet d'entrée que les téléphones de la page seuil
   (.market__phone dans home.css) : fondu + léger zoom-in. */
@keyframes hero-phone-banner-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__phone-banner {
    opacity: 1;
    animation: none;
  }
}

/* La baseline belge est plus courte que la française — plus de marge
   avant le texte, donc l'image peut mordre plus loin vers la gauche. */
@media (min-width: 1100px) {
  .landing-hero--be .landing-hero__phone-banner {
    right: calc(50% - 50vw + 140px);
    bottom: calc(-1 * var(--space-5) + 280px);
  }
}

/* Écrans très larges : la marge à droite du container grandit bien plus
   vite que le texte n'en a besoin — l'image peut grossir et mordre un peu
   plus loin vers la gauche sans jamais s'approcher du texte. */
/* Le texte est plafonné à 720px de large : passé 1600px, il ne bouge plus
   (le container centré a lui-même atteint sa largeur max). Continuer à
   faire grossir l'image avec le viewport ne rapprocherait ni n'éloignerait
   rien de pertinent — elle est donc figée ici, à sa taille de 1600px. Seul
   `right` reste sur la formule viewport-relative (déjà valable pour toutes
   les largeurs), ce qui la garde bien à l'extrême droite. */
@media (min-width: 1600px) {
  .landing-hero__phone-banner {
    /* Fixe, en px, plutôt que la formule liée au viewport : au-delà de ce
       point, elle ne doit plus bouger PAR RAPPORT AU TEXTE (donc par
       rapport au container, pas par rapport au bord de la fenêtre). Valeur
       reprise telle quelle de ce que la formule viewport-relative donnait
       pile à 1600px, pour ne rien déplacer au passage du seuil. */
    right: -190px;
    bottom: calc(-1 * var(--space-5) + 220px);
    width: 480px;
  }
}

/* Même raisonnement qu'à 1100px, une fois la position figée : décalage
   propre à la Belgique, moins de bord à mordre puisque le texte est
   plus court. */
@media (min-width: 1600px) {
  .landing-hero--be .landing-hero__phone-banner {
    right: -120px;
    bottom: calc(-1 * var(--space-5) + 250px);
  }
}

/* Le logo et le décor restent centrés (au-dessus, inchangés) ; seul le bloc
   de texte bascule à gauche à partir de 1100px, pour dégager toute la
   colonne de droite à la bannière téléphone sans jamais s'en approcher.
   Même traitement pour la Belgique et la France. */
@media (min-width: 1100px) {

  .landing-hero--be .landing-hero__content,
  .landing-hero--fr .landing-hero__content {
    text-align: left;
    max-width: 720px;
  }

  .landing-hero--be .landing-hero__content .landing-hero__title,
  .landing-hero--be .landing-hero__content .landing-hero__subtitle,
  .landing-hero--fr .landing-hero__content .landing-hero__title,
  .landing-hero--fr .landing-hero__content .landing-hero__subtitle {
    margin-inline: 0;
  }

  .landing-hero--be .landing-hero__content .landing-hero__actions,
  .landing-hero--fr .landing-hero__content .landing-hero__actions {
    justify-content: flex-start;
  }

  /* Sortie du bloc de texte et centrée (voir HTML), elle collait aux
     boutons juste au-dessus faute de marge propre — poussée plus bas,
     vers le bas de la section, avec un vrai espace de respiration.
     Posée sur le trait déco (premier des deux à suivre les boutons),
     pas sur la note : sinon c'est l'espace déco→note qui gonfle au lieu
     de boutons→déco. */
  .landing-hero--be .landing-hero__note-deco,
  .landing-hero--fr .landing-hero__note-deco {
    margin-top: var(--space-6);
  }
}

/* ---------------------------------------------------------------------
   Transition de page — un seul rideau bleu, gauche → droite
   ---------------------------------------------------------------------
   Boutons "Découvrir" de la page seuil uniquement. Un unique panneau
   couvre l'écran en glissant depuis la gauche, puis — sur la page
   d'arrivée — repart dans le même sens pour révéler le contenu en
   sortant à droite.
   --------------------------------------------------------------------- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4ca3ff;
  transform: translateX(-100%);
  pointer-events: none;
  /* Force la promotion sur son propre calque dès le départ : évite que le
     glissement se mette à saccader quand la page d'arrivée, plus lourde
     (images, polices), sollicite le fil principal au même moment. */
  will-change: transform;
}

/* Icône fixe au centre de l'écran, indépendante du rideau : elle ne
   glisse pas avec lui. Elle n'est visible que pendant que le bleu
   recouvre effectivement le centre — invisible avant que le bord du
   rideau n'y arrive, invisible à nouveau une fois qu'il l'a dépassé. */
.page-transition-icon {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

/* ATTENTION : le rideau n'avance pas à vitesse constante — il utilise
   var(--ease-signature) = cubic-bezier(0.22, 1, 0.36, 1), une courbe très
   avancée en début de course. Son bord atteint donc le centre de l'écran
   vers 13% du temps de ses 0.5s (~65ms), pas à 50% comme le donnerait un
   calcul linéaire naïf (c'est ce qui rendait le fondu sortant précédent
   bien trop tardif : l'icône restait seule après le départ du bleu).
   Le fondu entrant tient tout entier APRÈS ce point (14%→24%) pour ne
   jamais apparaître sur du contenu pas encore couvert ; le fondu sortant
   tient tout entier AVANT (4%→12%) pour avoir totalement disparu au
   moment où le bleu découvre le centre. */
@keyframes page-transition-icon-in {

  0%,
  14% {
    opacity: 0;
  }

  24%,
  100% {
    opacity: 1;
  }
}

@keyframes page-transition-icon-out {

  0%,
  4% {
    opacity: 1;
  }

  12%,
  100% {
    opacity: 0;
  }
}

/* Même durée que .page-transition.is-covering/is-revealing, démarrée au
   même instant. */
.page-transition-icon.is-covering {
  animation: page-transition-icon-in 0.5s ease-out forwards;
}

.page-transition-icon.is-arrived {
  opacity: 1;
}

.page-transition-icon.is-revealing {
  animation: page-transition-icon-out 0.5s ease-in forwards;
}

@keyframes page-transition-cover {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes page-transition-reveal {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

.page-transition.is-covering {
  pointer-events: auto;
  animation: page-transition-cover 0.5s var(--ease-signature) forwards;
}

/* Posée de façon SYNCHRONE par un script en ligne, avant le premier rendu
   de la page (voir HTML) : le rideau est déjà plein écran dès le tout
   premier pixel peint, sans transition ni délai — rien à révéler tant
   qu'on n'a pas explicitement ajouté "is-revealing" par la suite. */
.page-transition.is-arrived {
  pointer-events: auto;
  transform: translateX(0);
}

.page-transition.is-revealing {
  transform: translateX(0);
  animation: page-transition-reveal 0.5s var(--ease-signature) forwards;
}

@media (prefers-reduced-motion: reduce) {

  .page-transition.is-covering,
  .page-transition.is-revealing,
  .page-transition-icon.is-covering,
  .page-transition-icon.is-revealing {
    animation-duration: 0.001ms;
  }
}