/* ==========================================================================
   sections.css — hero → footer
   Macrostructure Bento Grid : hero centré à hauteur fixe, puis grilles
   asymétriques à spans irréguliers. Alternance sombre / clair assumée.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 7vw, 7rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--bg-dark);
  overflow: hidden;
}

/* Orbes du hero : 3 blobs, tailles et couleurs différentes */
.hero .orb--1 { width: 860px; height: 860px; top: -300px;  left: 50%; margin-left: -560px; }
.hero .orb--2 { width: 720px; height: 720px; top: -180px;  right: -180px; }
.hero .orb--3 { width: 600px; height: 600px; bottom: -320px; left: -160px; opacity: .3; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
}

/* Titre de 52 caractères : on redescend d'un cran par rapport à
   --text-display, sinon la première ligne déborde du gabarit. */
.hero .display {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  max-width: 22ch;
  text-wrap: balance;
}
.hero__lede {
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--on-dark-2);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--on-dark-3);
}
.hero__reassure li { display: inline-flex; align-items: center; gap: 0.4375rem; }
.hero__reassure svg { color: var(--blue-400); flex: none; }

/* --------------------------------------------------------------------------
   1b. MOCKUP DASHBOARD — enrichissement Tier A, 100 % HTML/CSS
   Pas de chrome navigateur redessiné : c'est l'interface applicative seule.
   -------------------------------------------------------------------------- */
.mock-wrap {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) auto 0;
  perspective: 1800px;
}

/* Glow bleu diffus posé sous la maquette */
.mock-wrap::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  bottom: -6%;
  height: 55%;
  background: radial-gradient(ellipse at 50% 50%, rgba(27,110,243,.55) 0%, rgba(27,110,243,0) 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.mock {
  transform: rotateX(11deg) rotateY(-4deg) rotateZ(0.4deg) translateZ(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-slower) var(--ease-out);
}
.mock-wrap:hover .mock { transform: rotateX(5deg) rotateY(-2deg); }

.mock__pane {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(158deg, #0A1223 0%, #0E1A31 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 40px 100px -30px rgba(3,6,15,.95),
    0 0 70px -30px rgba(27,110,243,.75),
    var(--inner-top);
}
/* Reflet diagonal */
.mock__pane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 34%);
  pointer-events: none;
}

/* Rail latéral */
.mock__rail {
  padding: var(--space-md);
  border-right: 1px solid rgba(255,255,255,.07);
  background: rgba(4,9,20,.5);
}
.mock__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin-bottom: var(--space-md);
}
.mock__brand i {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--gradient-brand);
  flex: none;
}
.mock__nav { display: flex; flex-direction: column; gap: 2px; }
.mock__nav span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  color: var(--on-dark-3);
}
.mock__nav span::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 3px;
  background: rgba(147,193,255,.20);
  flex: none;
}
.mock__nav span.on {
  background: rgba(74,155,255,.14);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(74,155,255,.28);
}
.mock__nav span.on::before { background: var(--blue-400); }

.mock__rail-foot {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 0.6875rem;
  color: var(--on-dark-4);
}

/* Zone principale */
.mock__main { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.75rem; }
.mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.mock__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-dark);
  letter-spacing: -0.02em;
}
.mock__chip {
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(15,157,107,.16);
  border: 1px solid rgba(15,157,107,.4);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: #6FE3B6;
  white-space: nowrap;
}

.mock__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.mock__kpi {
  padding: 0.625rem 0.6875rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}
.mock__kpi small {
  display: block;
  font-size: 0.625rem;
  color: var(--on-dark-4);
  margin-bottom: 2px;
}
.mock__kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}
.mock__kpi em {
  font-style: normal;
  font-size: 0.625rem;
  color: #6FE3B6;
}

/* Graphique en barres, pur CSS */
.mock__chart {
  flex: 1;
  min-height: 130px;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.mock__chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--on-dark-3);
}
.mock__bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 82px;
}
.mock__bars i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--blue-400) 0%, rgba(27,110,243,.35) 100%);
  height: var(--h, 40%);
  animation: bar-rise var(--dur-slower) var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 45ms);
  transform-origin: 50% 100%;
}
.mock__bars i.hot {
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(27,110,243,.5) 100%);
  box-shadow: 0 0 16px rgba(41,211,240,.55);
}
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.mock__rows { display: flex; flex-direction: column; gap: 4px; }
.mock__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 52px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-xs);
  background: rgba(255,255,255,.022);
  font-size: 0.6875rem;
  color: var(--on-dark-3);
}
.mock__row b { font-weight: 500; color: var(--on-dark-2); }
.mock__row u {
  text-decoration: none;
  justify-self: end;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-pill);
  background: rgba(74,155,255,.16);
  color: var(--blue-300);
  font-size: 0.625rem;
}

/* ==========================================================================
   2. BANDEAU DE STATS (compteurs)
   ========================================================================== */
.stats {
  position: relative;
  border-top: 1px solid var(--line-dark);
  background: var(--bg-dark);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--ls-mega);
  line-height: 1;
  margin-bottom: 0.375rem;
}
.stat__label {
  font-size: var(--text-sm);
  color: var(--on-dark-3);
  line-height: 1.45;
}

/* ==========================================================================
   3. MARQUEE LOGOS — bande de transition sombre → clair
   ========================================================================== */
/* La transition sombre → clair se faisait sur 2 arrêts : l'interpolation
   linéaire entre #0A1224 et #F5F8FD produisait une bande grise nette.
   On la remplace par une rampe multi-arrêts calée sur une courbe douce,
   et le contenu reste dans le tiers haut, resté sombre. */
/* La bande ne va plus jusqu'au blanc : elle s'arrête à mi-parcours, sur le
   bleu-gris #405C88, et la fin de la rampe est reprise par la section
   suivante (voir .trust) — le dégradé passe ainsi derrière le panneau de
   réassurance et ne se termine qu'en dessous. Les arrêts sont ceux de la
   courbe d'origine, renormalisés sur le tronçon conservé. */
.band-logos {
  position: relative;
  padding-top: var(--space-2xl);
  padding-bottom: calc(var(--space-2xl) * 2.6);
  overflow: hidden;
  background: linear-gradient(to bottom,
    #060B18   0%,
    #060B18  42%,
    #070D1D  54.3%,
    #0A1526  65.4%,
    #101F35  75.3%,
    #1A2E4B  84%,
    #2A4368  92.6%,
    #405C88 100%);
}
.band-logos > * { position: relative; z-index: 1; }

.band-logos__label {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--on-dark-3);
  margin-bottom: var(--space-lg);
}

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.marquee__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--on-dark-3);
  filter: grayscale(1);
  opacity: .72;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.marquee__item i {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--gradient-brand);
  flex: none;
}
.marquee__item:hover { color: var(--on-dark); opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ==========================================================================
   3b. RÉASSURANCE — composition de deux photos et d'un bloc de texte
   Bande basse : elle prouve qu'il y a un lieu et un visage derrière le site,
   juste après les logos clients. Trois tuiles de même hauteur, même arrondi.
   ========================================================================== */
/* La bande de logos se termine déjà sur un long dégradé : inutile d'y
   rajouter une pleine hauteur de section au-dessus des photos. Le bas garde
   la pleine respiration pour décoller de la section suivante. */
/* Fin de la rampe sombre → clair, reprise là où .band-logos l'a laissée.
   Peinte en image de fond sur la section : elle passe donc DERRIÈRE le
   panneau, qui se retrouve à cheval sur la transition, et ne s'achève en
   #F5F8FD qu'une fois la card dépassée. */
.trust {
  /* La rampe se termine derrière le premier quart du panneau. Le panneau
     garde à peu près la même hauteur dès 1024px : le coefficient en vw
     reste donc faible, sinon la fin de rampe glisse vers le milieu de la
     card sur les grands écrans. */
  --trust-fade: clamp(9rem, 8rem + 2vw, 11rem);

  padding-top: var(--space-xl);
  padding-bottom: clamp(3.5rem, 2rem + 2.5vw, 4.5rem);
  background-color: var(--bg-light);
  background-image: linear-gradient(to bottom,
    #405C88   0%,
    #5D7CA8  26.3%,
    #83A0C6  50%,
    #ADC3E0  71%,
    #D5E1F2  86.8%,
    #F5F8FD 100%);
  background-repeat: no-repeat;
  background-position: top center;
  /* Le `min()` garantit que la rampe s'achève au plus tard sur le bord bas
     de la section : plus longue qu'elle, elle serait tranchée en pleine
     teinte et laisserait une couture nette contre la section suivante. */
  background-size: 100% min(var(--trust-fade), 100%);
}

/* Panneau sombre — l'objet qui fait la coupure entre deux bandes claires */
.trust__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(158deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%);
  box-shadow: var(--shadow-deep), 0 0 80px -34px rgba(27,110,243,.75);
}
/* Bordure 1px en dégradé, comme sur les cards du thème */
.trust__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.trust__panel .orb--1 { width: 620px; height: 620px; top: -280px; left: -200px; }
.trust__panel .orb--2 { width: 460px; height: 460px; bottom: -260px; right: -140px; opacity: .28; }

/* Le panneau est sombre au milieu d'une bande claire : il réimpose ses
   propres couleurs, sinon `.section--light .h3` le repeint en encre. */
.trust__panel .h3 { color: var(--on-dark); }
.trust__panel .eyebrow { color: var(--blue-400); }
.section--light .trust__panel :focus-visible { outline-color: var(--focus-ring); }

/* Trois tuiles de même hauteur : l'alignement décalé faisait accidentel. */
.trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.68fr) minmax(0, 1.12fr);
  gap: var(--space-md);
  align-items: stretch;
}

.trust__place,
.trust__face {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-dark);
  box-shadow: var(--shadow-light);
}
.trust__place img,
.trust__face img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Voile de marque + assombrissement bas : la légende doit rester lisible
   quelle que soit la photo qu'on déposera plus tard. */
.trust__place::after,
.trust__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6,11,24,.92) 4%, rgba(6,11,24,.10) 46%),
    linear-gradient(146deg, rgba(27,110,243,.26) 0%, rgba(27,110,243,0) 60%);
  pointer-events: none;
}
.trust__place figcaption,
.trust__face figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: var(--space-md);
}
.trust__place figcaption b,
.trust__face figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: #fff;
}
.trust__place figcaption span,
.trust__face figcaption span {
  display: block;
  font-size: var(--text-sm);
  color: var(--on-dark-2);
  line-height: 1.4;
}

.trust__place,
.trust__face {
  min-height: clamp(14rem, 10rem + 10vw, 19rem);
  border: 1px solid rgba(255,255,255,.10);
}
.trust__place {
  /* le sceau déborde sur la couture entre les deux photos : la tuile passe
     au-dessus de sa voisine pour que le disque ne soit pas rogné. */
  overflow: visible;
  z-index: 3;
}
/* L'image, elle, reste clippée par l'arrondi */
.trust__place img { border-radius: inherit; }
.trust__place::after { border-radius: inherit; }

.trust__face img { object-position: 50% 22%; }

/* --------------------------------------------------------------------------
   Le sceau tournant — verre dépoli posé sur la photo, texte en anneau
   -------------------------------------------------------------------------- */
.seal {
  position: absolute;
  right: clamp(-2.75rem, -1.5rem - 2vw, -1.5rem);
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(7.5rem, 5.5rem + 6vw, 10.5rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  /* Teinte sombre plutôt que claire : le disque passe sur un ciel très
     lumineux, du blanc translucide y rendrait le texte illisible. */
  background: rgba(6,11,24,.36);
  border: 1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 24px 60px -22px rgba(3,6,15,.85),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.seal > * { grid-area: 1 / 1; }

.seal__ring {
  width: 100%; height: 100%;
  animation: seal-spin 26s linear infinite;
}
.seal__ring text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  fill: #fff;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .seal__ring { animation: none; }
}

.seal__core {
  display: grid;
  place-items: center;
  gap: 1px;
  text-align: center;
  line-height: 1;
}
.seal__flag {
  width: 26px; height: 18px;
  margin-bottom: 5px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.seal__core b {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.8rem + 0.8vw, 1.375rem);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: #fff;
}
.seal__core span {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: rgba(255,255,255,.86);
}

/* --------------------------------------------------------------------------
   Bloc de texte
   -------------------------------------------------------------------------- */
.trust__say {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
}
.trust__say > p:not(.eyebrow):not(.trust__partner) {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--on-dark-2);
}

.trust__partner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding: 0.5rem 0.875rem;
  align-self: flex-start;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark-strong);
}
.trust__partner-ico { width: 20px; height: 20px; flex: none; }
.trust__partner b {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.3;
}
.trust__partner > span > span,
.trust__partner > span {
  display: block;
  font-size: var(--text-xs);
  color: var(--on-dark-3);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Les trois garanties — une rangée intégrée au panneau, pas trois tuiles
   posées dessus : sur fond sombre, un liseré suffit à les séparer.
   -------------------------------------------------------------------------- */
.guarantees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-dark);
}
/* Icône à gauche sur deux rangs, titre puis texte à droite : la grille
   évite d'ajouter un conteneur intermédiaire dans le markup. */
.guarantee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.875rem;
  row-gap: 0.125rem;
  align-items: start;
  padding-inline: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
}
.guarantee + .guarantee { border-left: 1px solid var(--line-dark); }

.guarantee__ico {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(27,110,243,.26), rgba(91,75,232,.18));
  border: 1px solid rgba(74,155,255,.28);
  color: var(--blue-300);
}
.guarantee__ico svg { width: 21px; height: 21px; }
.guarantee b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--on-dark);
  margin-bottom: 0.1875rem;
}
.guarantee > span:last-child {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--on-dark-3);
}

/* La section qui suit le panneau resserre son rembourrage haut : deux pleines
   hauteurs de section bout à bout ouvraient un trou entre les deux. C'est ici
   qu'on règle l'écart — le rembourrage bas de .trust, lui, est réservé à
   l'ombre du panneau. */
.trust + .section {
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  /* Passe derrière la section précédente, dont l'ombre de panneau peut ainsi
     déborder par-dessus ce fond au lieu d'être tranchée net par lui.
     `position: relative` n'est pas répété : il vient déjà de `.section`.
     Sans danger pour les clics ici — ni <main> ni <body> ne peignent de fond
     propre (celui de body est propagé au canevas), donc rien ne recouvre la
     section ni n'intercepte le pointeur. */
  z-index: -1;
}

/* ==========================================================================
   4. LES 3 PILIERS — cards empilées au scroll
   ========================================================================== */
/* Empilement au scroll. Chaque card est collante et se cale quinze pixels
   plus bas que la précédente : celle qui monte recouvre celle d'avant, dont
   il ne reste que la tranche haute. La course vient du conteneur lui-même —
   une card collée le reste tant que .pillars-grid n'a pas fini de défiler,
   ce qui laisse la suivante venir se poser dessus. */
/* Aligné à gauche, comme le chapeau de section : une colonne centrée
   décalerait la pile par rapport au titre. */
.pillars-grid { max-width: 1080px; }

.pillar-row {
  position: sticky;
  top: calc(var(--header-h) + var(--space-md) + var(--s, 0) * 15px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr);
  gap: var(--space-md);
  align-items: stretch;
}
/* Juste de quoi séparer deux rangées pendant qu'elles se croisent : au-delà,
   un trou de fond clair s'ouvre entre les cards pendant le scroll. */
.pillar-row + .pillar-row { margin-top: clamp(0.875rem, 0.5rem + 1.4vh, 1.5rem); }

.pillar-row > .card { min-height: clamp(17rem, 14rem + 9vh, 22rem); }

/* Visuel de droite — même arrondi que la card, pour lire comme une paire */
.pillar-shot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-dark);
  box-shadow: var(--shadow-card);
}
.pillar-shot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pillar-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(152deg, rgba(27,110,243,.30) 0%, rgba(27,110,243,.04) 52%, rgba(6,11,24,.52) 100%);
  pointer-events: none;
}

.pillar__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(27,110,243,.28), rgba(91,75,232,.20));
  border: 1px solid rgba(74,155,255,.3);
  color: var(--blue-300);
  margin-bottom: var(--space-md);
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card:hover .pillar__icon {
  border-color: rgba(74,155,255,.75);
  box-shadow: var(--glow-cyan);
}
.pillar h3 { margin-bottom: var(--space-xs); }
.pillar p  { color: var(--on-dark-3); font-size: var(--text-base); line-height: var(--lh-loose); }

.pillar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: var(--space-md);
}
.pillar__list li {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-dark);
  font-size: var(--text-sm);
  color: var(--on-dark-2);
}
.pillar__foot { margin-top: var(--space-lg); }

/* Tuile CTA — dernière de la pile, traitée à part : fond de marque, trame
   fine en surimpression et halo cyan. Assez différente pour qu'on comprenne
   que ce n'est plus un pilier mais une invitation. */
.tile-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--gradient-brand);
  box-shadow: var(--glow-blue);
  color: #fff;
  overflow: hidden;
}
.tile-cta::before { background: rgba(255,255,255,.22); }
.tile-cta::after  { display: none; }

/* Quadrillage : masqué en radial pour qu'il s'efface avant les bords */
.tile-cta__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 74% 90% at 82% 8%, #000 0%, transparent 76%);
          mask-image: radial-gradient(ellipse 74% 90% at 82% 8%, #000 0%, transparent 76%);
  pointer-events: none;
}
.tile-cta__glow {
  position: absolute;
  z-index: 0;
  width: 320px; height: 320px;
  top: -150px; right: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,211,240,.55) 0%, rgba(41,211,240,0) 70%);
  filter: blur(46px);
  pointer-events: none;
}

.tile-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  align-self: flex-start;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #fff;
}
.tile-cta__eyebrow .dot-pulse { background: #fff; }
.tile-cta__eyebrow .dot-pulse::after { border-color: #fff; }

.tile-cta h3 { color: #fff; }
.tile-cta p  { color: rgba(255,255,255,.86); font-size: var(--text-base); line-height: 1.6; }

.tile-cta__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
}
.tile-cta__note {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.72);
}
.tile-cta .btn { background: #fff; color: var(--ink); align-self: flex-start; }
.tile-cta .btn:hover { background: var(--bg-light-2); }

/* ==========================================================================
   5. SUR-MESURE — la section la plus travaillée
   ========================================================================== */
.custom-sec { overflow: hidden; }
.custom-sec .orb--1 { width: 780px; height: 780px; top: -220px; left: -220px; }
.custom-sec .orb--2 { width: 640px; height: 640px; top: 30%; right: -240px; }
.custom-sec .orb--3 { width: 520px; height: 520px; bottom: -260px; left: 42%; opacity: .28; }

/* 5a. Marquee de technologies — 2 rangées contre-défilantes */
.tech-strip {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--line-dark);
}
.tech-strip__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--on-dark-4);
  margin-bottom: var(--space-md);
}
.marquee--tech + .marquee--tech { margin-top: 0.625rem; }

.marquee__track--tech {
  gap: 0.625rem;
  animation-duration: 46s;
}
.marquee__track--rev {
  animation-direction: reverse;
  animation-duration: 58s;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(150deg, rgba(12,21,38,.9), rgba(17,30,54,.8));
  border: 1px solid rgba(255,255,255,.09);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-dark-3);
  white-space: nowrap;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.tech-chip__mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(74,155,255,.08);
  border: 1px solid rgba(74,155,255,.16);
  color: var(--on-dark-3);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.tech-chip__mark svg { width: 17px; height: 17px; }

.tech-chip:hover {
  color: var(--on-dark);
  border-color: rgba(74,155,255,.5);
  box-shadow: 0 0 28px -10px rgba(74,155,255,.85);
}
.tech-chip:hover .tech-chip__mark {
  color: var(--blue-300);
  background: rgba(74,155,255,.16);
  border-color: rgba(74,155,255,.55);
}

/* Bento des types de projets — spans irréguliers */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
}
.proj-grid > .pj-1 { grid-column: span 2; }
.proj-grid > .pj-2 { grid-column: span 2; }
.proj-grid > .pj-3 { grid-column: span 2; }
.proj-grid > .pj-4 { grid-column: span 3; }
.proj-grid > .pj-5 { grid-column: span 3; }

.proj {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-lg);
}
.proj__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--blue-400);
}
.proj h3 { font-size: var(--text-lg); }
.proj p  { font-size: var(--text-base); color: var(--on-dark-3); line-height: 1.6; }
.proj__meta {
  margin-top: auto;
  padding-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--on-dark-4);
}

/* ==========================================================================
   6. « COMMENT ON BOSSE » — deck de cards superposées
   Les cinq étapes sont empilées en éventail : la carte active devant, les
   suivantes décalées derrière. On les fait glisser à gauche / à droite.
   ========================================================================== */
.deck { position: relative; }

/* Puces d'étape : la navigation directe, et le fil d'Ariane du deck */
.deck__steps {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--space-lg);
  padding-bottom: 2px;
}
.deck__steps::-webkit-scrollbar { display: none; }

.deck__step {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.5625rem 0.9375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-light);
  background: #fff;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.deck__step b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.deck__step span {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}
.deck__step:hover { border-color: rgba(27,110,243,.4); color: var(--ink); }
.deck__step[aria-current="true"] {
  background: var(--ink);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-light);
}
.deck__step[aria-current="true"] b { color: var(--blue-300); }

/* La scène : toutes les cards occupent la même cellule de grille, donc la
   hauteur est celle de la plus haute et rien ne saute d'une étape à l'autre.
   La marge droite/basse laisse voir le talon des cards de derrière. */
.deck__stage {
  display: grid;
  touch-action: pan-y;                  /* le glissement horizontal est à nous */
  /* La scène est une surface de glissement : à la souris, balayer une card
     surlignerait son texte au lieu de la faire défiler. */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding-right: clamp(1.25rem, 3.4vw, 2.75rem);
  padding-bottom: clamp(1rem, 2.6vw, 2rem);
}

.deck-card {
  --deck-x: clamp(11px, 2.2vw, 22px);
  --deck-y: clamp(9px, 1.7vw, 17px);
  --deck-t:
    translate3d(calc(var(--o, 0) * var(--deck-x)), calc(var(--o, 0) * var(--deck-y)), 0)
    rotate(calc(var(--o, 0) * 1.05deg))
    scale(calc(1 - var(--o, 0) * 0.035));

  grid-area: 1 / 1;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  transform-origin: 50% 100%;
  transform: var(--deck-t);
  z-index: calc(10 - var(--o, 0));
  cursor: grab;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}
/* .card:hover impose son propre translateY : on le neutralise ici, sinon la
   card du dessus reprend sa place dans la pile au survol. */
.deck-card:hover,
.deck-card:focus-within { transform: var(--deck-t); }

/* La card du dessus se détache de la pile : liseré chaud tout autour, halo
   bleu, et une ombre franche poussée vers la droite — c'est de ce côté que
   les autres dépassent, donc c'est là que la séparation doit se voir. */
.deck-card[data-active] {
  box-shadow:
    var(--inner-top),
    0 1px 2px rgba(3, 6, 15, .45),
    30px 4px 34px -26px rgba(3, 6, 15, 1),
    26px 22px 62px -30px rgba(3, 6, 15, .95),
    0 0 70px -20px rgba(27, 110, 243, .60);
}
.deck-card[data-active]::before { background: var(--gradient-border-hot); }

/* Celles de derrière reculent d'un cran : sans ça, la tranche visible a la
   même valeur que la card active et la pile se lit mal. */
.deck-card:not([data-active]) {
  filter: brightness(.72) saturate(.9);
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
}

/* Cards déjà vues : sorties par la gauche */
.deck-card[data-past] {
  transform: translate3d(-46%, 0, 0) rotate(-7deg) scale(.94);
  opacity: 0;
  pointer-events: none;
}
/* Au-delà de la 3e du dessous, plus rien n'est visible : on l'efface */
.deck-card[data-far] { opacity: 0; pointer-events: none; }

.deck__stage.is-dragging .deck-card { transition: none; }
.deck__stage.is-dragging { cursor: grabbing; }
.deck__stage.is-dragging .deck-card { cursor: grabbing; }

.deck-card__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--ls-mega);
  line-height: .82;
  margin-bottom: var(--space-md);
}
.deck-card h3 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.deck-card p  { color: var(--on-dark-2); line-height: var(--lh-loose); max-width: var(--measure); }
.deck-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-dark);
}
.deck-card__grid h4 { font-size: var(--text-base); margin-bottom: 0.1875rem; }
.deck-card__grid p  { font-size: var(--text-sm); color: var(--on-dark-3); line-height: 1.55; }

.deck__nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.deck__hint {
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.deck__dots { display: flex; gap: 6px; margin-left: auto; }

@media (max-width: 640px) {
  .deck__hint { display: none; }
}

/* ==========================================================================
   6b. COMMANDES DE CARROUSEL — partagées par le deck « méthode » et la bande
   de réalisations. Sur fond clair dans les deux cas.
   ========================================================================== */
.tnav {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-light-strong);
  color: var(--ink);
  background: #fff;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.tnav:hover { border-color: var(--blue-500); color: var(--blue-500); box-shadow: 0 8px 24px -14px rgba(27,110,243,.9); }
.tnav[disabled] { opacity: .35; }

.tdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(11,18,32,.20);
  transition: background-color var(--dur-base) var(--ease-out),
              width var(--dur-base) var(--ease-out);
}
.tdot[aria-current="true"] { width: 22px; border-radius: var(--radius-pill); background: var(--blue-500); }

/* ==========================================================================
   7. RÉALISATIONS
   ========================================================================== */
/* Marquee de réalisations — cartes CLAIRES sur bande claire.
   Les cartes sombres créaient un contraste trop dur ici : sur les piliers
   la carte sombre est un parti pris, mais sur des visuels photo elle
   écrasait les images. Ici la photo porte le contraste, la carte s'efface. */
.works-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.works-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-lg);
  animation: marquee 66s linear infinite;
}
.works-marquee:hover .works-marquee__track,
.works-marquee:focus-within .works-marquee__track { animation-play-state: paused; }

.wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 340px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-light);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-light);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.wcard:hover,
.wcard:focus-within {
  transform: translateY(-4px);
  border-color: rgba(27,110,243,.34);
  box-shadow: 0 1px 2px rgba(11,18,32,.06), 0 26px 60px -28px rgba(27,110,243,.5);
}

.wcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex: none;
  background: var(--bg-light-2);
}
.wcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-slower) var(--ease-out);
}
.wcard:hover .wcard__media img { transform: scale(1.06); }

/* Voile bleu de marque, léger : la photo doit rester lisible */
.wcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(146deg, rgba(27,110,243,.30) 0%, rgba(27,110,243,.05) 55%, rgba(6,11,24,.34) 100%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.wcard:hover .wcard__media::after { opacity: .7; }

.wcard__badge {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  z-index: 3;
  padding: 0.25rem 0.6875rem;
  border-radius: var(--radius-pill);
  background: rgba(6,11,24,.60);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
          backdrop-filter: blur(10px) saturate(150%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: #fff;
  white-space: nowrap;
}

.wcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  flex: 1;
  padding: var(--space-lg);
}
.wcard__cat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--blue-500);
}
.wcard__body h3 { font-size: var(--text-lg); color: var(--ink); }
.wcard__desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-2);
}

.wcard__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.25rem;
}
.wcard__stack li {
  padding: 0.1875rem 0.5625rem;
  border-radius: var(--radius-pill);
  background: var(--bg-light);
  border: 1px solid var(--line-light);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-2);
}

.wcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-light);
}
.wcard__kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--blue-500);
}
.wcard__kpi span {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.35;
}
.wcard__go {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-light-strong);
  color: var(--ink-2);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.wcard:hover .wcard__go {
  color: #fff;
  background: var(--btn-primary);
  border-color: transparent;
  transform: translateX(2px);
}

.wcard__link { position: absolute; inset: 0; z-index: 4; }
.wcard__link:focus-visible { outline-offset: -4px; }

.works-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Commandes du carrousel — n'existent qu'en mode mobile (cf. ≤ 900px) */
.works-nav {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.works-dots { display: flex; gap: 6px; margin-left: auto; }

/* --- Mobile : carrousel classique, plus de marquee ------------------------ */
@media (max-width: 900px) {
  .works-marquee {
    /* `overflow-x` seul laisserait `overflow-y: hidden` hérité de la bande
       marquee : la combinaison piège le geste vertical sur certains
       Android. On repasse explicitement en « défile en x, libre en y ». */
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;    /* inertie iOS < 13 */
    scrollbar-width: none;
    /* le snapport doit commencer après la gouttière, sinon la carte
       accrochée vient se coller au bord de l'écran */
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-block: 6px var(--space-xs);
    -webkit-mask-image: none;
            mask-image: none;
    overscroll-behavior-x: contain;
  }
  .works-marquee::-webkit-scrollbar { display: none; }

  /* La piste garde `width: max-content` : si elle retombe en `auto`, ses
     cartes débordent d'une boîte trop étroite — la gouttière de droite
     disparaît du défilement et le panoramique tactile devient erratique. */
  .works-marquee__track {
    gap: var(--space-md);
    animation: none;
    transform: none;
  }
  .wcard {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .works-nav { display: flex; }
}

/* Mouvement réduit : le marquee redevient une zone défilable au doigt */
@media (prefers-reduced-motion: reduce) {
  .works-marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .works-marquee__track { animation: none; }
  .wcard { scroll-snap-align: start; }
}

/* ==========================================================================
   8. MUR D'AVIS — Google + Trustpilot
   Les colonnes sont construites en JS (module `wall`) : chaque avis est posé
   dans la colonne la plus courte, donc les hauteurs restent libres et les
   cards restent collées. Sans JS, la grille reste une simple colonne.
   ========================================================================== */

/* 8a. Résumé des notes, au-dessus du mur */
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--surface-light);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-light);
}
.rating__logo { width: 20px; height: 20px; flex: none; }
.rating__logo--tp { color: #00B67A; }
.rating__val { font-size: var(--text-sm); color: var(--ink-3); }
.rating__val b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.rating__count {
  font-size: var(--text-sm);
  color: var(--ink-3);
  white-space: nowrap;
}

/* Sur mobile, les deux notes doivent tenir côte à côte sur une seule ligne :
   les étoiles sautent (le logo et la note suffisent) et le libellé se
   raccourcit à « 27 » — la plateforme est déjà dite par le logo. */
@media (max-width: 640px) {
  .ratings { flex-wrap: nowrap; gap: 0.5rem; }
  .rating {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.5rem 0.625rem;
  }
  .rating .stars { display: none; }
  .rating__src { display: none; }
  .rating__count::after { content: " avis"; }
  .rating__logo { width: 17px; height: 17px; }
  .rating__val b { font-size: var(--text-md); }
}

/* 8b. Étoiles — jaunes chez Google, blanches sur pastille verte chez
   Trustpilot, comme sur les deux plateformes. */
.stars {
  display: inline-flex;
  gap: 2px;
  color: #FBBC05;
}
.stars svg { width: 17px; height: 17px; flex: none; }
.stars--tp { gap: 3px; color: #fff; }
.stars--tp svg {
  width: 18px; height: 18px;
  padding: 2px;
  border-radius: 3px;
  background: #00B67A;
}

/* 8c. Le mur */
.wall { position: relative; }

.wall__view {
  position: relative;
  max-height: clamp(30rem, 24rem + 16vw, 40rem);
  overflow: hidden;
  transition: max-height var(--dur-slower) var(--ease-out);
}
/* Fondu de troncature : il annonce qu'il y a la suite */
.wall__view::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 11rem;
  background: linear-gradient(to top, var(--bg-light) 14%, rgba(245,248,253,0) 100%);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.wall.is-open .wall__view::after { opacity: 0; }

.wall__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.wall__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1 1 0;
  min-width: 0;
}

.wall__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}
.wall__more svg { transition: transform var(--dur-base) var(--ease-out); }
.wall.is-open .wall__more svg { transform: rotate(180deg); }

/* 8d. Card d'avis — sombre, signature du thème. La provenance est portée
   par une pastille en verre dépoli : sur fond sombre, un logo posé à nu
   perd sa lisibilité, le verre lui redonne un support. */
.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.review__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.6875rem 0.3125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--on-dark-2);
}
.review__logo { width: 15px; height: 15px; flex: none; }
.review__logo--tp { color: #00B67A; }

.review blockquote {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--on-dark-2);
}

.review__who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
}
.review__id { min-width: 0; flex: 1; }
.review__id b {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.3;
}
.review__id > span {
  display: block;
  font-size: var(--text-xs);
  color: var(--on-dark-3);
  line-height: 1.35;
}
.review__when {
  font-size: var(--text-xs);
  color: var(--on-dark-4);
  white-space: nowrap;
  align-self: flex-start;
}

/* L'avatar existe en photo ou en initiales, comme sur Google */
.avatar {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  padding: 2px;
  background: var(--gradient-text);
  flex: none;
}
.avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface-dark);
}
.avatar--initials {
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}
.avatar--initials[data-tone="a"] { background: #1B6EF3; }
.avatar--initials[data-tone="b"] { background: #5B4BE8; }
.avatar--initials[data-tone="c"] { background: #0F9D6B; }
.avatar--initials[data-tone="d"] { background: #C2410C; }
.avatar--initials[data-tone="e"] { background: #0F766E; }

/* ==========================================================================
   8e. TÉMOIGNAGES VIDÉO
   ========================================================================== */

/* 8b. Témoignages vidéo 9:16 */
.vgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.vcard {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-dark);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.vcard img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.vcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,11,24,.95) 8%, rgba(6,11,24,.05) 52%);
  pointer-events: none;
}
.vcard:hover, .vcard:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(74,155,255,.7);
  box-shadow: var(--glow-blue-lg);
}
.vcard:hover img { transform: scale(1.05); }

/* Play overlay en verre */
.vcard__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
          backdrop-filter: blur(10px) saturate(160%);
  color: #fff;
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.vcard:hover .vcard__play { transform: translate(-50%, -50%) scale(1.09); background: rgba(255,255,255,.26); }

.vcard__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: var(--space-md);
  text-align: left;    /* le <button> centre par défaut */
}
.vcard__meta b { display: block; font-size: var(--text-base); color: #fff; font-weight: 600; }
.vcard__meta span { display: block; font-size: var(--text-sm); color: var(--on-dark-2); }
.vcard__dur {
  position: absolute;
  top: var(--space-sm); right: var(--space-sm);
  z-index: 3;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(6,11,24,.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--on-dark-2);
}

/* ==========================================================================
   9. MODALE VIDÉO
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,6,15,.82);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
}
.modal__dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: min(86vh, 760px);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-dark);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-deep), 0 0 90px -34px rgba(27,110,243,.9);
  transform: translate3d(0, 14px, 0) scale(.97);
  transition: transform var(--dur-slow) var(--ease-out);
}
.modal.is-open .modal__dialog { transform: none; }
/* Le média est injecté par le JS dans ce conteneur : il doit remplir la modale */
.modal__dialog > [data-modal-media] { position: absolute; inset: 0; }
.modal__dialog video,
.modal__dialog img { width: 100%; height: 100%; object-fit: cover; }

.modal__close {
  position: absolute;
  top: var(--space-sm); right: var(--space-sm);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(6,11,24,.66);
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
}
.modal__close:hover { background: rgba(6,11,24,.9); border-color: rgba(74,155,255,.7); }

.modal__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: var(--space-lg);
  background: linear-gradient(to top, rgba(3,6,15,.95), transparent);
}
.modal__caption b { display: block; color: #fff; font-weight: 600; }
.modal__caption span { display: block; font-size: var(--text-sm); color: var(--on-dark-2); }

/* ==========================================================================
   10. DOUBLE CIBLE
   ========================================================================== */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.duo__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  border-radius: var(--radius-xl);
}
.duo__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
}
.duo__list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--space-xs); }
.duo__list li { display: flex; gap: 0.625rem; font-size: var(--text-base); line-height: 1.55; }
.duo__list svg { flex: none; margin-top: 4px; }
.duo__block .btn { align-self: flex-start; margin-top: auto; }

/* Bloc clair — TPE/PME */
.duo__block--light {
  background: var(--surface-light);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-light);
  color: var(--ink-2);
}
.duo__block--light .duo__price { color: var(--blue-500); }
.duo__block--light .duo__list svg { color: var(--blue-500); }

/* Bloc sombre — startup / éditeur */
.duo__block--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(158deg, var(--bg-dark) 0%, #0C1730 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-deep), 0 0 70px -34px rgba(27,110,243,.8);
  color: var(--on-dark-2);
}
.duo__block--dark .orb--1 { width: 460px; height: 460px; top: -190px; right: -150px; }
.duo__block--dark .orb--2 { width: 380px; height: 380px; bottom: -200px; left: -120px; opacity: .3; }
.duo__block--dark h3 { color: var(--on-dark); }
.duo__block--dark .duo__price { color: var(--blue-300); }
.duo__block--dark .duo__list svg { color: var(--cyan); }

/* Léger désaxement des deux blocs — juste de quoi casser la symétrie, un
   degré suffit. En dessous de 861px les blocs s'empilent : désaxés l'un
   sous l'autre, ils donneraient l'impression d'un bug de rendu.
   `rotate` plutôt que `transform` : les deux propriétés se composent, donc
   un futur translate au survol ne repartirait pas de zéro. */
@media (min-width: 861px) {
  .duo { gap: var(--space-xl); }

  .duo__block {
    transition: rotate var(--dur-slow) var(--ease-out);
  }
  .duo__block--light { rotate: -1.1deg; }
  .duo__block--dark  { rotate:  1.1deg; }

  /* Au survol la card se redresse : l'inclinaison se lit alors comme un
     parti pris, pas comme un défaut d'alignement. */
  .duo__block:hover { rotate: 0deg; }
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq { display: flex; flex-direction: column; gap: 0.625rem; max-width: 880px; margin-inline: auto; }

.faq__item {
  border-radius: var(--radius-md);
  background: linear-gradient(158deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%);
  border: 1px solid var(--line-dark);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.faq__item:has(.faq__q[aria-expanded="true"]) {
  border-color: rgba(74,155,255,.36);
  box-shadow: 0 0 40px -22px rgba(74,155,255,.9);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 1.125rem var(--space-lg);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--on-dark);
}
.faq__q:hover { color: var(--blue-300); }
.faq__chev {
  flex: none;
  color: var(--on-dark-3);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); color: var(--blue-400); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq__a > div { overflow: hidden; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--on-dark-2);
  max-width: 70ch;
}

/* ==========================================================================
   12. CONTACT
   ========================================================================== */
/* La section contact est passée en clair : plus d'orbes ici. */
.contact-sec { overflow: hidden; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-lg);
  align-items: stretch;
}

.contact-form { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* --------------------------------------------------------------------------
   12b. Colonne de contact direct — card sombre sur la bande claire, avec la
   silhouette de la France en filigrane derrière.
   -------------------------------------------------------------------------- */
.contact-aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(158deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: var(--shadow-deep), 0 0 70px -34px rgba(27,110,243,.8);
  color: var(--on-dark-2);
}

/* Filigrane : la silhouette est déjà un aplat, on la pose telle quelle en
   image de fond. Un `mask` aurait permis de la recolorer au dégradé de
   marque, mais Chromium refuse les images de masque servies en file:// —
   la maquette ouverte au double-clic n'aurait rien affiché.
   z-index 0 et pas -1 : sous un z-index négatif, l'élément passerait
   derrière le fond de sa propre card et disparaîtrait. */
.contact-aside__map {
  position: absolute;
  z-index: 0;
  right: -13%;
  bottom: -10%;
  width: min(76%, 25rem);
  aspect-ratio: 364 / 350;
  background: url("../img/france-doodle.png") no-repeat center / contain;
  filter: brightness(1.7) saturate(1.4);
  opacity: .22;
  pointer-events: none;
}
.contact-aside__glow {
  position: absolute;
  z-index: 0;
  width: 420px; height: 420px;
  top: -180px; left: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,110,243,.55) 0%, rgba(27,110,243,0) 70%);
  filter: blur(60px);
  pointer-events: none;
}

.contact-aside__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}
/* La card est sombre au milieu d'une section claire : elle doit réimposer
   ses propres couleurs, sinon les règles `.section--light .h3` la repeignent
   en encre foncée sur fond foncé. */
.contact-aside .h3 { color: var(--on-dark); max-width: 18ch; }
.contact-aside .eyebrow { color: var(--blue-400); }
.section--light .contact-aside :focus-visible { outline-color: var(--focus-ring); }

/* TODO Wapixi : ligne de disponibilité — à tenir à jour ou à retirer. Une
   mention de rareté qui ne bouge jamais finit par se voir. */
.contact-aside__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  align-self: flex-start;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: rgba(15,157,107,.14);
  border: 1px solid rgba(15,157,107,.36);
  font-size: var(--text-sm);
  color: #6FE3B6;
}
.contact-aside__status .dot-pulse { background: #6FE3B6; }
.contact-aside__status .dot-pulse::after { border-color: #6FE3B6; }

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: var(--space-xs);
}
.contact-links a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem;
  margin-inline: -0.75rem;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-base) var(--ease-out);
}
.contact-links a:hover { background: rgba(74,155,255,.10); }
.contact-links__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(27,110,243,.28), rgba(91,75,232,.20));
  border: 1px solid rgba(74,155,255,.28);
  color: var(--blue-300);
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.contact-links__ico svg { width: 20px; height: 20px; }
.contact-links a:hover .contact-links__ico {
  border-color: rgba(74,155,255,.7);
  box-shadow: var(--glow-cyan);
}
.contact-links b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--on-dark);
  line-height: 1.3;
}
.contact-links span span,
.contact-links a > span:last-child {
  display: block;
  font-size: var(--text-sm);
  color: var(--on-dark-3);
  line-height: 1.4;
}

.contact-aside__note {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--on-dark-3);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
}
.contact-aside__flag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-dark-2);
}
.contact-aside__flag svg {
  width: 22px; height: 15px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.form-grid .full { grid-column: 1 / -1; }

/* ==========================================================================
   13. FOOTER — Ft1 masthead × Ft3 index SEO local × Ft7 newsletter
   ========================================================================== */
.foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-darkest);
  padding-top: var(--section-y);
  color: var(--on-dark-3);
}
.foot .orb--1 {
  width: 1000px; height: 620px;
  left: 50%; margin-left: -500px; bottom: -420px;
  opacity: .48;
}
.foot .orb--2 { width: 480px; height: 480px; top: -180px; right: -180px; opacity: .22; }
/* Grain plus marqué sur le footer */
.foot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain-url);
  opacity: .085;
  pointer-events: none;
}

/* 13a. Masthead */
.foot__mast {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-2xl);
  align-items: end;
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--line-dark);
}
.foot__mast .h2 { max-width: 16ch; }
.foot__mast p { color: var(--on-dark-3); font-size: var(--text-base); line-height: var(--lh-loose); }

/* 13b. Newsletter */
.news { margin-top: var(--space-md); }
.news__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.news__row .input { flex: 1 1 220px; min-width: 0; }
.news__note { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--on-dark-4); }

/* 13c. Colonnes de liens */
.foot__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}
.foot__col h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--on-dark);
  margin-bottom: var(--space-md);
}
.foot__col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.foot__col a {
  font-size: var(--text-base);
  color: var(--on-dark-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.foot__col a:hover { color: var(--on-dark); }

/* 13d. Blocs SEO local */
.seo-local {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--line-dark);
}
/* Trois accordéons repliés : 48 liens de villes à plat allongeaient le pied
   de page de plusieurs écrans. Les liens restent dans le document, donc
   toujours explorables — seul leur affichage est différé. */
.seo-local__group { border-top: 1px solid var(--line-dark); }
.seo-local__group:first-child { border-top: 0; }

.seo-local__sum {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.9375rem 0;
  cursor: pointer;
  list-style: none;
}
.seo-local__sum::-webkit-details-marker { display: none; }
.seo-local__sum:hover h3 { color: var(--blue-300); }

.seo-local h3 {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-dark);
  transition: color var(--dur-base) var(--ease-out);
}
.seo-local__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--on-dark-4);
  white-space: nowrap;
}
.seo-local__chev {
  flex: none;
  color: var(--on-dark-3);
  transition: transform var(--dur-base) var(--ease-out);
}
.seo-local__group[open] .seo-local__chev { transform: rotate(180deg); }
.seo-local__group[open] .seo-local__links { padding-bottom: var(--space-lg); }
.seo-local__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}
.seo-local__links a {
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.022);
  font-size: var(--text-sm);
  color: var(--on-dark-3);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.seo-local__links a:hover {
  color: var(--on-dark);
  border-color: rgba(74,155,255,.45);
  background: rgba(74,155,255,.07);
}

/* 13e. Barre de bas de footer */
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--line-dark);
  font-size: var(--text-sm);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot__legal a:hover { color: var(--on-dark); }
.socials { display: flex; gap: 0.5rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--on-dark-3);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.socials a:hover {
  color: var(--on-dark);
  border-color: rgba(74,155,255,.6);
  box-shadow: 0 0 22px -8px rgba(74,155,255,.9);
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* --- ≤ 1180px ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- ≤ 1024px ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .stats__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
  .vgrid         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__cols    { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  .contact-grid  { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .foot__mast { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
}

/* --- ≤ 860px ------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Le visuel des piliers disparaît : sur un écran étroit, il volerait la
     place au texte sans rien apporter. L'empilement au scroll, lui, reste
     le même que sur ordinateur. */
  .pillar-row  { grid-template-columns: minmax(0, 1fr); }
  .pillar-shot { display: none; }

  /* La photo du lieu passe pleine largeur : le sceau a besoin de place à
     droite, sinon il vient s'asseoir sur la légende. */
  .trust__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__place { grid-column: 1 / -1; min-height: clamp(13rem, 9rem + 16vw, 17rem); }
  /* Le portrait garde son format 3/4 : en pleine largeur il devenait un
     bandeau où le visage passait à la trappe. */
  .trust__face  {
    min-height: 0;
    aspect-ratio: 3 / 4;
    margin-top: 0;
    margin-left: 0;
  }
  .seal         { width: clamp(6.75rem, 4rem + 12vw, 9rem); right: -0.75rem; }

  /* Empilées, les garanties se séparent par le haut : le filet vertical
     resterait pendu à gauche des deux dernières. */
  .guarantees   { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .guarantee    { padding-inline: 0; }
  .guarantee + .guarantee {
    border-left: 0;
    border-top: 1px solid var(--line-dark);
    padding-top: var(--space-md);
  }

  .proj-grid > .pj-1,
  .proj-grid > .pj-2,
  .proj-grid > .pj-3,
  .proj-grid > .pj-4,
  .proj-grid > .pj-5 { grid-column: span 3; }

  .wcard        { flex-basis: 306px; }
  .duo          { grid-template-columns: minmax(0, 1fr); }
  .mock__pane   { grid-template-columns: 150px minmax(0, 1fr); }
  .form-grid    { grid-template-columns: minmax(0, 1fr); }
}

/* --- ≤ 640px ------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--header-h) + 2.5rem); }
  /* Allègement mobile : on ne garde qu'un orbe par section */
  .hero .orb--3,
  .custom-sec .orb--3,
  .contact-sec .orb--2,
  .foot .orb--2,
  .duo__block--dark .orb--2 { display: none; }

  .fx-grid { --grid-opacity: .04; }

  .proj-grid > .pj-1,
  .proj-grid > .pj-2,
  .proj-grid > .pj-3,
  .proj-grid > .pj-4,
  .proj-grid > .pj-5 { grid-column: span 6; }

  .stats__grid  { gap: var(--space-lg); }
  .trust__face,
  .trust__say   { grid-column: 1 / -1; }

  /* Portrait réduit et centré. `width` et pas `max-width` : centrée, la
     tuile serait dimensionnée sur son contenu, or l'image et la légende
     sont en position absolue — elle s'effondrerait à zéro. */
  .trust__face {
    width: min(74%, 20rem);
    justify-self: center;
    box-shadow: var(--shadow-deep);
  }
  .wcard        { flex-basis: min(84vw, 320px); }
  .works-cta    { flex-direction: column; align-items: flex-start; }
  /* Témoignages vidéo : carrousel au doigt, la vignette suivante dépasse
     franchement pour qu'on comprenne tout de suite qu'il y a une suite. */
  .vgrid {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 0;
    /* déborde jusqu'aux bords de l'écran, puis repose sur la gouttière */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-xs);
    scroll-padding-left: var(--gutter);
  }
  .vgrid::-webkit-scrollbar { display: none; }
  .vcard {
    flex: 0 0 62%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .foot__cols   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-card__n { font-size: var(--text-3xl); }
  .card         { padding: var(--space-lg); }

  /* La maquette dashboard se redresse et défile horizontalement si besoin */
  .mock       { transform: none; }
  .mock-wrap:hover .mock { transform: none; }
  .mock__pane { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mock__rail { display: none; }
  .mock__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mock__kpi b { font-size: 0.9375rem; }
}

/* --- ≤ 420px ------------------------------------------------------------- */
@media (max-width: 420px) {
  /* .vgrid : déjà passé en carrousel dans le palier ≤ 640px ci-dessus */
  .stats__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__cols  { grid-template-columns: minmax(0, 1fr); }
  .btn         { padding-inline: 1.125rem; }
  .mock__rows  { display: none; }
}

/* Les libellés SEO local (« Développement application mobile à Salon-de-Provence »)
   sont trop longs pour tenir sur une ligne en pilule au-dessous de ~700px :
   une pilule qui casse sur deux lignes lit comme un bug. On repasse donc en
   liste verticale de liens simples, où le retour à la ligne est normal. */
@media (max-width: 700px) {
  .seo-local__links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .seo-local__links a {
    padding: 0.6875rem 0;
    border: 0;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
    background: none;
    line-height: 1.45;
  }
  .seo-local__links a:hover { background: none; color: var(--on-dark); }
  .seo-local__links a:last-child { border-bottom: 0; }
}