/* ════════════════════════════════════════════════════════════
   EchoBridge — page d'accueil, version 3.1
   Chargé uniquement si is_front_page(). Les variables de charte,
   le reset, le focus et les règles de mouvement réduit sont dans
   base.css, dont ce fichier dépend.
   ════════════════════════════════════════════════════════════ */

.site-main--home {
  --eb-section: clamp(72px, 7vw, 112px);
  --eb-gutter: clamp(20px, 4vw, 32px);
}

/* ════════════════ TITRES DE SECTION ════════════════ */

.section-title {
  text-align: center;
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.section-subtitle {
  text-align: center;
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  color: var(--eb-ink-soft);
  max-width: 60ch;
  margin: 0 auto clamp(48px, 5vw, 68px);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ════════════════ HERO ════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 9vw, 132px) var(--eb-gutter) clamp(72px, 8vw, 108px);
  text-align: center;
  color: var(--eb-white);
  /* Le dégradé s'arrête à tealDeep : poussé jusqu'au teal plein, le texte
     blanc tombait à 2.56:1 dans l'angle inférieur droit. */
  background: linear-gradient(148deg, var(--eb-navy) 0%, var(--eb-navy-mid) 58%, var(--eb-teal-deep) 100%);
}

/* Deux halos plutôt qu'un : le premier (existant) au-dessus, un second plus
   discret en bas à droite pour donner de la profondeur. Tous deux respirent
   lentement (échelle + position) au lieu de rester figés : le fond du hero
   n'est plus une image statique, sans que ce soit un effet appuyé. */
.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -46%;
  left: 50%;
  width: min(1180px, 150%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(84, 202, 195, .22) 0%, rgba(84, 202, 195, .06) 42%, transparent 66%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: -30%;
  right: -10%;
  width: min(620px, 70%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 158, 160, .28) 0%, rgba(0, 158, 160, .08) 45%, transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: eb-hero-drift-a 13s ease-in-out infinite; }
  .hero::after  { animation: eb-hero-drift-b 17s ease-in-out infinite -5s; }
}
@keyframes eb-hero-drift-a {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: .9; }
  50%      { transform: translateX(-50%) translateY(22px) scale(1.06); opacity: 1; }
}
@keyframes eb-hero-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .75; }
  50%      { transform: translate(-26px, -20px) scale(1.12); opacity: 1; }
}

/* Halo qui suit le curseur (desktop uniquement, home.js pose .has-spotlight
   et met à jour --halo-x/--halo-y au pointermove) : une touche interactive
   en plus de la respiration passive, sans dépendre du JS pour être vivant. */
.hero-spotlight {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  background: radial-gradient(460px circle at var(--halo-x, 50%) var(--halo-y, 30%), rgba(84, 202, 195, .16), transparent 70%);
  transition: opacity .5s var(--eb-ease);
  pointer-events: none;
}
.hero.has-spotlight .hero-spotlight { opacity: 1; }

/* Anneaux qui se propagent depuis le centre du hero, comme un signal détecté
   à distance : la même idée que le repère de .hero-trust li::after, reprise
   en grand pour que le hero cesse de n'être qu'un dégradé et un halo qui
   respire. Décoratif, sans lien avec le texte porté par le contenu réel. */
.hero-signal {
  position: absolute;
  z-index: 1;
  top: 38%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.hero-signal span {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border: 1.5px solid rgba(84, 202, 195, .4);
  border-radius: 50%;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-signal span { animation: eb-hero-signal 4.8s ease-out infinite; }
  .hero-signal span:nth-child(2) { animation-delay: 1.6s; }
  .hero-signal span:nth-child(3) { animation-delay: 3.2s; }
}
@keyframes eb-hero-signal {
  0%   { transform: scale(.5); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: scale(4.2); opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--eb-white);
  margin: 0 0 24px;
  text-wrap: balance;
}
.hero-accent {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: var(--eb-teal-lt);
}
/* Trait qui se dessine sous « Sans les noms. » une fois le titre en place :
   une signature discrète sur la ligne qui porte le message de la marque,
   pas un simple soulignement statique. */
.hero-accent::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -.08em;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--eb-teal-lt), var(--eb-teal));
  transform: scaleX(1);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-accent::after {
    transform: scaleX(0);
    animation: eb-hero-underline .6s cubic-bezier(.16, 1, .3, 1) .55s both;
  }
}
@keyframes eb-hero-underline {
  to { transform: scaleX(1); }
}

.hero-lead {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.28rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .93);
  max-width: 60ch;
  margin: 0 auto 14px;
  text-wrap: pretty;
}

.hero-scope {
  font-size: .98rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  max-width: 54ch;
  margin: 0 auto 40px;
}

/* Mise en page (flex, gap, empilement mobile) déplacée dans base.css : le
   même bloc est réutilisé tel quel par les sections « Et ensuite » des pages
   intérieures (fonctionnalites.php, methode.php, a-propos.php), qui ne
   chargent jamais homepage.css. Seul cet espacement sous le hero reste
   propre à la home. */
.hero-cta-group { margin-bottom: 44px; }

/* .cta-button / .cta-button-ghost : définis dans base.css (chargé partout),
   pas ici. Un bouton d'appel à l'action est utile sur toutes les pages, pas
   seulement la home. */

/* Entrée du hero au chargement : keyframe partagé, défini dans base.css.
   Le h1 reste le plus léger et le plus rapide des quatre (c'est le plus
   souvent l'élément de LCP de la page), les autres arrivent en cascade. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero-lead, .hero-scope, .hero-cta-group {
    animation: eb-hero-in .7s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero h1 { animation-duration: .5s; }
  .hero-lead { animation-delay: .1s; }
  .hero-scope { animation-delay: .18s; }
  .hero-cta-group { animation-delay: .26s; }
}

.hero-trust {
  display: flex;
  gap: 10px 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .94rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
.hero-trust li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Pastille de repère, décorative : l'information reste portée par le texte. */
.hero-trust li::before {
  content: '';
  position: relative;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--eb-teal-lt);
  flex: 0 0 auto;
}
/* Anneau qui se propage depuis la pastille, comme un signal détecté : un
   clin d'œil discret au produit plutôt qu'un simple point statique. Décalé
   dans le temps d'un élément à l'autre pour ne pas pulser en bloc. */
.hero-trust li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  border: 1px solid var(--eb-teal-lt);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-trust li::after { animation: eb-hero-ping 2.6s ease-out infinite; }
  .hero-trust li:nth-child(2)::after { animation-delay: .7s; }
  .hero-trust li:nth-child(3)::after { animation-delay: 1.4s; }
}
@keyframes eb-hero-ping {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ════════════════ LE COÛT DE L'INACTION, EN CHIFFRES ════════════════ */

.home-stats {
  padding: 56px var(--eb-gutter) 64px;
  background: var(--eb-teal-pale);
}
.home-stats-inner { max-width: 1120px; margin: 0 auto; }
.home-stats-kicker {
  text-align: center;
  font-family: var(--eb-font-title);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eb-teal-deep);
  margin: 0 0 28px;
}
.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.home-stat { text-align: center; }
.home-stat-value {
  font-family: var(--eb-font-title);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--eb-navy);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.home-stat-prefix, .home-stat-suffix { white-space: nowrap; }
.home-stat-label {
  max-width: 240px;
  margin: 0 auto;
  color: var(--eb-ink-soft);
  font-size: .93rem;
  line-height: 1.5;
}
.home-stat-source { opacity: .7; }
@media (max-width: 900px) {
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media (max-width: 480px) {
  .home-stats-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ════════════════ LES TROIS TEMPS ════════════════ */

.how-it-works {
  padding: var(--eb-section) var(--eb-gutter);
  background: var(--eb-white);
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  max-width: 1120px;
  margin: 0 auto;
}

/* Pas de carte : la séquence porte l'information, le filet la relie. */
.step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--eb-border-sq);
}
.step:first-child { border-top-color: var(--eb-teal); }

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 0 18px;
  font-family: var(--eb-font-title);
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--eb-white);
  background: var(--eb-teal-deep);
  border-radius: 50%;
}

.step h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.step p {
  color: var(--eb-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

/* ════════════════ VISITE DE LA PLATEFORME ════════════════ */

/* Panneau contenu et arrondi, pas une bande plein-largeur bord à bord :
   même traitement que les sections intérieures (voir pages.css), pour que
   la home et les pages intérieures suivent la même grammaire visuelle. */
.platform-tour {
  max-width: var(--eb-shell);
  margin: clamp(20px, 2.5vw, 32px) auto;
  padding: var(--eb-section) var(--eb-gutter);
  background: var(--eb-bg);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-sm);
}
@media (max-width: 640px) {
  .platform-tour { margin-inline: 12px; border-radius: var(--eb-radius); }
}

.tour-header {
  max-width: 720px;
  margin: 0 auto clamp(48px, 5vw, 72px);
}

.tour-side {
  max-width: 1180px;
  margin: 0 auto clamp(64px, 7vw, 96px);
}

.tour-side-header {
  max-width: 700px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}

.tour-pill {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 18px;
  font-family: var(--eb-font-title);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 100px;
}
/* Contraste vérifié : 7.75:1 et 12.92:1. */
.tour-pill-teal {
  background: var(--eb-teal-pale);
  color: var(--eb-teal-deep);
}
.tour-pill-navy {
  background: var(--eb-navy);
  color: var(--eb-white);
}

.tour-side-header h3 {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.tour-side-header > p {
  font-size: 1.04rem;
  color: var(--eb-ink-soft);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.tour-grid {
  display: grid;
  gap: clamp(22px, 2.4vw, 32px);
}
.tour-grid-mobile { grid-template-columns: repeat(3, 1fr); }
/* 3 colonnes, pas 2 : la capture large occupe toute la largeur (grid-column:
   1/-1) et les 3 captures restantes tombent alors sur une seule ligne pleine.
   À 2 colonnes, ces 3 cartes se répartissaient 2 puis 1, laissant une cellule
   vide à droite de la dernière — la grille asymétrique doit avoir exactement
   autant de cellules que de contenu, jamais une case vide. */
.tour-grid-desktop { grid-template-columns: repeat(3, 1fr); }
.tour-grid-desktop .tour-card-wide { grid-column: 1 / -1; }

/* Simple conteneur de mise en page : le cadre de la capture
   (.section-shot-frame, partagé avec les pages intérieures, base.css) porte
   maintenant lui-même la carte (bordure, ombre, radius) — plus de carte
   blanche autour d'une carte, qui doublait le cadrage. */
.tour-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* Le composant partagé a ses propres marge/largeur pensées pour une section
   pleine largeur ; ici il vit dans une cellule de grille déjà dimensionnée. */
.tour-card .section-shot {
  margin: 0;
  max-width: none;
}

.tour-card figcaption {
  margin-top: 20px;
  text-align: center;
}
.tour-card h4 {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 8px;
}
.tour-card p {
  font-size: .96rem;
  color: var(--eb-ink-soft);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* Cartes « côté collaborateur » : capture au format portrait (voir
   .section-shot-portrait, base.css), largeur fluide pour ne pas déborder à
   3 colonnes sur écran moyen. */
.tour-grid-mobile .section-shot-portrait { max-width: 100%; }

.tour-footer-cta {
  text-align: center;
  margin-top: clamp(8px, 2vw, 24px);
}
/* Contraste blanc sur tealDeep : 8.56:1. */
.tour-footer-cta .cta-button {
  background: var(--eb-teal-deep);
  color: var(--eb-white);
  box-shadow: 0 2px 4px rgba(1, 84, 100, .18), 0 14px 34px rgba(1, 84, 100, .28);
}
.tour-footer-cta .cta-button:hover {
  background: var(--eb-navy);
  box-shadow: 0 4px 8px rgba(1, 84, 100, .2), 0 20px 44px rgba(1, 84, 100, .34);
}

/* ════════════════ ONGLETS FONCTIONNALITÉS ════════════════
   Une capture à la fois plutôt que la vue d'ensemble de .platform-tour.
   Sans JS, .showcase-panel n'a pas de règle qui la masque : les quatre
   panneaux restent tous visibles, empilés. home.js ajoute .has-tabs une
   fois chargé, et c'est seulement alors que les onglets font quelque chose. */
.showcase-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.showcase-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--eb-border);
  background: var(--eb-white);
  color: var(--eb-ink);
  font-family: var(--eb-font-title);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .18s var(--eb-ease), background-color .18s var(--eb-ease), color .18s var(--eb-ease), transform .12s var(--eb-ease);
}
.showcase-tab svg { width: 17px; height: 17px; flex: none; }
.showcase-tab:hover { border-color: var(--eb-teal); }
.showcase-tab:active { transform: scale(.97); }
.showcase.has-tabs .showcase-tab.is-active {
  background: var(--eb-teal);
  border-color: var(--eb-teal);
  color: var(--eb-white);
}

.showcase-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  margin-bottom: 48px;
}
.showcase.has-tabs .showcase-panel { display: none; margin-bottom: 0; }
.showcase.has-tabs .showcase-panel.is-active { display: flex; }

.showcase-panel-text {
  max-width: 620px;
  text-align: center;
}
.showcase-panel-text h3 {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.showcase-panel-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--eb-ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.showcase-panel-shot { margin: 0; max-width: 640px; }
.showcase-panel-shot.section-shot-portrait { max-width: 260px; }

/* ════════════════ FONCTIONNALITÉS ════════════════ */

.features {
  padding: var(--eb-section) var(--eb-gutter);
  background: var(--eb-white);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 26px);
  max-width: 1180px;
  margin: 0 auto;
}

.feature-card {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 30px);
  background: var(--eb-bg);
  border-radius: var(--eb-radius-lg);
  transition: transform .25s var(--eb-ease), box-shadow .25s var(--eb-ease);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--eb-shadow-md);
}

/* Halo au curseur : décoratif, activé par home.js sur pointeur fin seulement. */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(300px circle at var(--halo-x, 50%) var(--halo-y, 50%),
              rgba(0, 158, 160, .13), transparent 68%);
  transition: opacity .3s var(--eb-ease);
  pointer-events: none;
}
.features-grid.has-halo .feature-card:hover::before { opacity: 1; }

.feature-card > * { position: relative; }

/* Même traitement que .item-card-icon sur les pages intérieures (pages.css) :
   dégradé teal, icône blanche, ombre portée. Les deux étaient jusqu'ici deux
   styles distincts pour le même élément conceptuel. */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  color: var(--eb-white);
  background: linear-gradient(135deg, var(--eb-teal-lt) 0%, var(--eb-teal) 100%);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 158, 160, .28);
  transition: transform .3s var(--eb-ease), box-shadow .3s var(--eb-ease);
}
/* Même micro-interaction que .item-card:hover .item-card-icon (pages.css) :
   le style partagé ci-dessus avait gagné une source commune, pas encore le
   survol qui va avec. */
.feature-card:hover .feature-icon {
  transform: translateY(-2px) rotate(-4deg) scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 158, 160, .36);
}
.feature-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.feature-card h3 {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.feature-card p {
  color: var(--eb-ink-soft);
  font-size: .97rem;
  line-height: 1.58;
  margin: 0;
  text-wrap: pretty;
}

.features-note {
  max-width: 1180px;
  margin: clamp(28px, 3vw, 40px) auto 0;
  font-size: .94rem;
  color: var(--eb-ink-soft);
  text-align: center;
}

/* ════════════════ GARANTIES ════════════════
   Occupe la place qu'un mur de logos clients ou de témoignages tiendrait
   ailleurs : des garanties vérifiables plutôt qu'une preuve sociale qu'on
   n'a pas honnêtement à montrer aujourd'hui. Traitement gris → couleur au
   survol, comme une bande de logos, appliqué ici à de vraies garanties. */
.guarantees {
  padding: clamp(48px, 5vw, 72px) var(--eb-gutter);
  background: var(--eb-teal-pale);
}
.guarantees-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.guarantees-kicker {
  font-family: var(--eb-font-title);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--eb-teal-deep);
  margin: 0 0 28px;
}
.guarantees-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
}
.guarantee-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--eb-ink-soft);
  filter: grayscale(1);
  opacity: .68;
  transition: filter .25s var(--eb-ease), opacity .25s var(--eb-ease), color .18s var(--eb-ease);
}
.guarantee-badge svg { width: 20px; height: 20px; flex: none; color: var(--eb-teal-deep); }
.guarantee-badge span {
  font-family: var(--eb-font-title);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.guarantee-badge:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--eb-ink);
}
.guarantees-more {
  margin: 28px 0 0;
  font-size: .92rem;
}
.guarantees-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--eb-teal-deep);
  font-weight: 700;
  text-decoration: none;
}
.guarantees-more a:hover { text-decoration: underline; }
.guarantees-more a svg { width: 15px; height: 15px; transition: transform .18s var(--eb-ease); }
.guarantees-more a:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .guarantees-more a:hover svg { transform: none; }
}

/* ════════════════ POURQUOI ECHOBRIDGE ════════════════ */

.value-prop {
  max-width: var(--eb-shell);
  margin: clamp(20px, 2.5vw, 32px) auto;
  padding: var(--eb-section) var(--eb-gutter);
  background: var(--eb-navy);
  color: var(--eb-white);
  text-align: center;
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-lg);
}
@media (max-width: 640px) {
  .value-prop { margin-inline: 12px; border-radius: var(--eb-radius); }
}

.value-prop-content {
  max-width: 940px;
  margin: 0 auto;
}

.value-prop h2 {
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--eb-white);
  margin: 0 0 22px;
  text-wrap: balance;
}

.value-prop > .value-prop-content > p {
  font-size: clamp(1.02rem, .98rem + .35vw, 1.16rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  max-width: 66ch;
  margin: 0 auto clamp(40px, 4vw, 56px);
  text-wrap: pretty;
}

.benefits-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}

.benefit-item {
  padding: 26px 24px;
  background: rgba(255, 255, 255, .07);
  border-radius: var(--eb-radius);
}

.benefit-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  color: var(--eb-navy);
  background: var(--eb-teal-lt);
  border-radius: 50%;
}
.benefit-mark svg {
  width: 18px;
  height: 18px;
  display: block;
}

.benefit-item h3 {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--eb-white);
  margin: 0 0 8px;
}
.benefit-item p {
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  text-wrap: pretty;
}

/* ════════════════ QUESTIONS FRÉQUENTES ════════════════ */
.home-faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.home-faq-item {
  border-bottom: 1px solid var(--eb-border);
}
.home-faq-item:first-child { border-top: 1px solid var(--eb-border); }
.home-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--eb-font-title);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--eb-ink);
}
.home-faq-chevron {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--eb-teal);
  transition: transform .25s var(--eb-ease);
}
.home-faq-question[aria-expanded="true"] .home-faq-chevron { transform: rotate(180deg); }

/* Hauteur animée via grid-template-rows (0fr → 1fr) : fonctionne sans JS de
   mesure, contrairement à max-height qui demande une valeur arbitraire.
   Repliée UNIQUEMENT une fois .has-accordion posé par home.js (les réponses
   restent toutes visibles, empilées, sans JavaScript — jamais masquées par
   défaut, sans quoi le contenu deviendrait inaccessible sans script). */
.home-faq-answer {
  display: grid;
  grid-template-rows: 1fr;
}
.home-faq.has-accordion .home-faq-answer {
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--eb-ease);
}
.home-faq-answer > p {
  overflow: hidden;
  margin: 0;
  padding: 0 4px 20px;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--eb-ink-soft);
}
.home-faq.has-accordion .home-faq-answer > p { padding-bottom: 0; }
.home-faq.has-accordion .home-faq-question[aria-expanded="true"] + .home-faq-answer {
  grid-template-rows: 1fr;
}
.home-faq.has-accordion .home-faq-question[aria-expanded="true"] + .home-faq-answer > p {
  padding-bottom: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .home-faq-answer { transition: none; }
  .home-faq-chevron { transition: none; }
}

/* ════════════════ APPEL FINAL ════════════════ */

.cta-section {
  padding: var(--eb-section) var(--eb-gutter);
  background: var(--eb-white);
  text-align: center;
}

.cta-section h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--eb-navy);
  margin: 0 0 16px;
  text-wrap: balance;
}
.cta-section > p {
  font-size: 1.08rem;
  color: var(--eb-ink-soft);
  margin: 0 auto 36px;
  max-width: 56ch;
}

.cta-button-dark {
  background: var(--eb-teal-deep);
  color: var(--eb-white);
  box-shadow: 0 2px 4px rgba(1, 84, 100, .18), 0 14px 34px rgba(1, 84, 100, .26);
}
.cta-button-dark:hover {
  background: var(--eb-navy);
  color: var(--eb-white);
}

/* ── Révélation au défilement (home.js) ──
   Même geste que les pages intérieures (pages.js/pages.css) : état masqué
   posé uniquement une fois le script confirmé actif (.has-reveal sur
   <body>), jamais sans JavaScript ni en mouvement réduit. */
body.has-reveal .step,
body.has-reveal .feature-card,
body.has-reveal .benefit-item,
body.has-reveal .cta-section,
body.has-reveal .home-stat {
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
              transform .7s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}
body.has-reveal .step.is-in-view,
body.has-reveal .feature-card.is-in-view,
body.has-reveal .benefit-item.is-in-view,
body.has-reveal .cta-section.is-in-view,
body.has-reveal .home-stat.is-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Titres de section : même sobriété que sur les pages intérieures (pas de
   scale, juste un léger décalage vertical) ; ils mènent la révélation. */
body.has-reveal .section-title,
body.has-reveal .value-prop h2,
body.has-reveal .tour-side-header h3 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
body.has-reveal .section-title.is-in-view,
body.has-reveal .value-prop h2.is-in-view,
body.has-reveal .tour-side-header h3.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.has-reveal .step,
  body.has-reveal .feature-card,
  body.has-reveal .benefit-item,
  body.has-reveal .cta-section,
  body.has-reveal .home-stat,
  body.has-reveal .section-title,
  body.has-reveal .value-prop h2,
  body.has-reveal .tour-side-header h3 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ════════════════ RESPONSIVE ════════════════ */

@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-list { grid-template-columns: repeat(2, 1fr); }
  .tour-grid-desktop { grid-template-columns: 1fr; }
  .tour-grid-desktop .tour-card-wide { grid-column: auto; }
}

@media (max-width: 768px) {
  .steps-container { grid-template-columns: 1fr; gap: 32px; }
  .step { padding-top: 22px; }
  .step:not(:first-child) { border-top-color: var(--eb-border-sq); }
  .tour-grid-mobile { grid-template-columns: repeat(2, 1fr); }
  .tour-grid-mobile .section-shot-portrait { max-width: 230px; }
}

@media (max-width: 480px) {
  .features-grid,
  .benefits-list,
  .tour-grid-mobile { grid-template-columns: 1fr; }
  /* Empilement du .hero-cta-group lui-même : déplacé dans base.css (voir
     commentaire plus haut). */
  .hero-trust {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 30ch;
    margin-inline: auto;
  }
  .tour-grid-mobile .section-shot-portrait { max-width: 265px; }
}

/* ════════════════ MOUVEMENT RÉDUIT ════════════════ */

@media (prefers-reduced-motion: reduce) {
  .cta-button:hover,
  .feature-card:hover { transform: none; }
  .feature-card:hover .feature-icon { transform: none; }
  .feature-card::before { transition: none; }

  /* home.js ne pose jamais .has-reveal quand le mouvement réduit est actif :
     ce filet reprend le même état de repli que pages.css, pour rester correct
     même si prefers-reduced-motion bascule en cours de session. */
  body.has-reveal .step,
  body.has-reveal .feature-card,
  body.has-reveal .benefit-item,
  body.has-reveal .cta-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}