/* ==========================================================================
   DIGICOM-IT — Sections de la homepage
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero centré — titre, recherche et CTA au centre, photos en encadrement
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(128px, 13vw, 186px);
  /* Le bandeau de preuves remonte chevaucher la base du hero */
  padding-bottom: clamp(88px, 8vw, 124px);
  overflow: hidden;
}

.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(560px, 52vw, 700px);
}

.hero__content {
  position: relative;
  z-index: 3;
  width: min(760px, 100%);
  margin-inline: auto;
  text-align: center;
}

.hero__title {
  margin-top: var(--s-lg);
  font-size: clamp(2.375rem, 1.2rem + 4.6vw, 4.25rem);
}
/* L'accent de marque ne porte que sur la dernière proposition : le fuchsia
   reste une signature, pas une grande surface colorée. */
.hero__title em { font-style: normal; color: var(--brand); }
.hero__title strong {
  font-weight: inherit;
  background: linear-gradient(105deg, #FFFFFF 20%, color-mix(in srgb, var(--brand) 26%, #FFFFFF) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="light"] .hero__title strong {
  background: linear-gradient(100deg, var(--ink) 12%, color-mix(in srgb, var(--brand) 60%, var(--ink)) 88%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__lead {
  margin: var(--s-lg) auto 0;
  max-width: 58ch;
  font-size: var(--fs-body-xl);
  line-height: 1.58;
  color: var(--body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  justify-content: center;
  margin-top: var(--s-xl);
}

/* ---- Démonstration : ce que les clients tapent sur Google ---------------- */

.hero__search { margin-top: clamp(28px, 3.4vw, 44px); }

.searchbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  width: min(620px, 100%);
  margin-inline: auto;
  padding: 9px 9px 9px 22px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-floating);
  text-align: left;
}
/* Liseré lumineux, comme sur le header flottant */
.searchbox::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--brand) 40%, transparent),
    color-mix(in srgb, var(--accent-violet) 26%, transparent) 45%,
    transparent 70%,
    color-mix(in srgb, var(--accent-blue) 26%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.searchbox__icon { width: 21px; height: 21px; color: var(--muted); flex: none; }

.searchbox__query {
  flex: 1;
  min-width: 0;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding-block: 12px;
}
.searchbox__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--brand);
  border-radius: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .searchbox__caret { animation: caret-blink 1.05s steps(1) infinite; }
  @keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
}

.searchbox__submit {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--brand) 80%, transparent);
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.searchbox__submit:hover { background: var(--brand-hover); transform: scale(1.05); }
.searchbox__submit svg { width: 19px; height: 19px; }


.hero__search-caption {
  margin: var(--s-sm) auto 0;
  font-size: var(--fs-caption);
  color: var(--faint);
}

/* ---- Photos d'encadrement ------------------------------------------------ */

.hero__frames {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-frame {
  position: absolute;
  width: var(--w, 300px);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--surface-soft);
  box-shadow: var(--shadow-floating);
  pointer-events: none;
  opacity: 0;
  transform:
    translate3d(var(--dx, 0px), calc(var(--dy, 0px) + 34px), 0)
    rotate(var(--rot, 0deg))
    scale(0.94);
  transition:
    opacity 900ms var(--ease-out),
    transform 1100ms var(--ease-out);
  transition-delay: var(--frame-delay, 0ms);
}
.hero__stage.is-revealed .hero-frame {
  opacity: 1;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--rot, 0deg)) scale(1);
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-frame__inner { aspect-ratio: var(--ratio, 4 / 3); }

/* Voile bleu nuit très léger : les photos s'intègrent au fond sans être
   dénaturées, et le centre reste le point de lecture. */
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--canvas) 26%, transparent),
    color-mix(in srgb, var(--canvas) 6%, transparent));
  transition: opacity 420ms var(--ease);
  pointer-events: none;
}

/* Flottement individuel, très lent, désynchronisé */
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
  .hero__stage.is-revealed .hero-frame {
    animation: frame-float var(--float-cycle, 11s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
  }
  @keyframes frame-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -12px; }
  }
}

/* Annotations manuscrites */
.hero-note {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: 190px;
  font-family: var(--font-hand);
  font-size: 1.375rem;
  line-height: 1.15;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease-out);
  transition-delay: var(--note-delay, 900ms);
  pointer-events: none;
}
.hero__stage.is-revealed .hero-note { opacity: 1; transform: none; }
.hero-note svg { color: var(--brand); width: 42px; height: 34px; }
.hero-note--right { text-align: right; }

/* Placement des quatre cadres et de leurs annotations.
   Les largeurs et les décalages sont resserrés à mesure que l'écran rétrécit,
   pour que le bloc central garde toujours sa respiration. */
@media (min-width: 1200px) {
  .hero-frame--tl { top: 3%;  left: var(--frame-out); --w: var(--frame-w-lg); --rot: -6deg;   --ratio: 4 / 3; --frame-delay: 120ms; --float-cycle: 11s; --float-delay: 0s; }
  .hero-frame--bl { top: 50%; left: calc(var(--frame-out) + 42px); --w: var(--frame-w-sm); --rot: -3.5deg; --ratio: 4 / 3; --frame-delay: 260ms; --float-cycle: 13s; --float-delay: -3s; }
  .hero-frame--tr { top: 7%;  right: var(--frame-out); --w: var(--frame-w-lg); --rot: 5deg;   --ratio: 4 / 3; --frame-delay: 200ms; --float-cycle: 12s; --float-delay: -6s; }
  .hero-frame--br { top: 52%; right: calc(var(--frame-out) + 30px); --w: var(--frame-w-sm); --rot: 3deg; --ratio: 4 / 3; --frame-delay: 340ms; --float-cycle: 14s; --float-delay: -9s; }

  /* Les annotations suivent leurs cadres vers l'extérieur, mais jamais au-delà
     du bord de la fenêtre : les cadres peuvent déborder, pas le texte.
     --note-min est la position du bord de fenêtre, exprimée dans le repère
     du conteneur ; le max() garde toujours la marge de sécurité. */
  .hero { --note-min: calc((1480px - 100vw) / 2); }

  .hero-note--tl { top: -2%; left:  max(calc(var(--frame-out) + 20px), calc(var(--note-min) + 22px)); --note-delay: 1000ms; }
  .hero-note--bl { top: 40%; left:  max(calc(var(--frame-out) + 12px), calc(var(--note-min) + 22px)); --note-delay: 1150ms; }
  .hero-note--tr { top: 0%;  right: max(calc(var(--frame-out) + 20px), calc(var(--note-min) + 22px)); --note-delay: 1075ms; }
  .hero-note--br { top: 79%; right: max(calc(var(--frame-out) + 12px), calc(var(--note-min) + 22px)); --note-delay: 1225ms; }
}

/* Grands écrans : les cadres ne se calent plus sur le conteneur (1480 px) mais
   sur les bords de la fenêtre. Au-delà de 1480 px de large, tout l'espace gagné
   part sur les côtés, et le bloc central respire d'autant. */
@media (min-width: 1900px) {
  .hero {
    /* Photo centrée dans l'espace libre entre le bloc de texte (760 px) et le
       bord de la fenêtre, jamais à moins de 36 px du bord. Exprimé dans le
       repère du conteneur (1480 px), d'où le second terme. */
    --frame-out: calc(max(36px, ((100vw - 760px) / 2 - var(--frame-w-lg)) / 2) + (1480px - 100vw) / 2);
    --frame-w-lg: 380px;
    --frame-w-sm: 310px;
  }
  .hero-note { max-width: 210px; }
}
@media (min-width: 1560px) and (max-width: 1899px) {
  .hero {
    --frame-out: calc(max(26px, ((100vw - 760px) / 2 - var(--frame-w-lg)) / 2) + (1480px - 100vw) / 2);
    --frame-w-lg: 330px;
    --frame-w-sm: 270px;
  }
}
/* 14 pouces : la place suffit pour montrer les photos en entier. */
@media (min-width: 1500px) and (max-width: 1559px) {
  .hero {
    --frame-out: calc((1480px - 100vw) / 2 + 10px);
    --frame-w-lg: 300px;
    --frame-w-sm: 246px;
  }
  .hero-note { font-size: 1.25rem; max-width: 168px; }
}
/* En dessous, les photos débordent volontairement : les rentrer les ferait
   empiéter sur le bloc central. */
@media (min-width: 1360px) and (max-width: 1499px) {
  .hero { --frame-out: -4%; --frame-w-lg: 300px; --frame-w-sm: 246px; }
  .hero-note { font-size: 1.25rem; max-width: 165px; }
}
/* Portables : cadres nettement plus petits, repoussés, et sans annotations */
@media (min-width: 1200px) and (max-width: 1359px) {
  .hero { --frame-out: -7%; --frame-w-lg: 250px; --frame-w-sm: 208px; }
  .hero__content { width: min(660px, 100%); }
  .hero-note { display: none; }
}

/* Sous 1024 px : les photos passent sous le contenu, en bande dédiée */
@media (max-width: 1023px) {
  .hero__stage { min-height: 0; display: flex; flex-direction: column; }
  .hero__content { order: 1; }
  .hero__frames {
    order: 2;
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-sm);
    margin-top: var(--s-2xl);
  }
  .hero-frame {
    position: static;
    width: auto;
    --rot: 0deg;
    --dx: 0; --dy: 0;
    box-shadow: var(--shadow-subtle);
  }
  .hero-frame__inner { aspect-ratio: 1 / 1; }
  .hero-note { display: none; }
}
@media (max-width: 639px) {
  .hero__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Bandeau de preuves + logos clients
   -------------------------------------------------------------------------- */

/* Chevauchement : la carte remonte de la moitié de sa hauteur sur le hero. */
.proof-overlap {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--proof-lift, 84px) * -1);
}

.proof-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-lg);
  padding: 38px;
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.proof-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--brand) 28%, transparent),
    transparent 45%,
    color-mix(in srgb, var(--accent-blue) 22%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.proof-strip {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-floating);
}

.proof-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px var(--s-md);
  align-items: center;
}
.proof-item__icon {
  grid-row: 1 / span 3;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  color: var(--brand);
  transition: transform 420ms var(--ease);
}
.proof-item__icon svg { width: 21px; height: 21px; }
.proof-item:hover .proof-item__icon { transform: translateY(-3px) scale(1.05); }

.proof-item + .proof-item { padding-left: var(--s-lg); border-left: 1px solid var(--hairline); }
.proof-item__value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.proof-item__label { font-size: var(--fs-body-sm); color: var(--body); line-height: 1.3; }
.proof-item__hint { font-size: var(--fs-caption); color: var(--faint); line-height: 1.35; }
.proof-item__hint a { color: var(--brand-ink); }
.proof-item__hint a:hover { text-decoration: underline; }
.proof-item__eyebrow { font-size: var(--fs-caption); color: var(--faint); }

@media (max-width: 1023px) { :root { --proof-lift: 64px; } }
@media (max-width: 1023px) {
  .proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg); }
  .proof-item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 639px) {
  .proof-strip { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: var(--s-md); }
  .proof-item + .proof-item { padding-left: 0; border-left: 0; padding-top: var(--s-md); border-top: 1px solid var(--hairline); }
  .proof-overlap { margin-top: -40px; }
}

.logos-band { margin-top: var(--s-3xl); }
.logos-band__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-md);
  max-width: 520px;
  margin: 0 auto var(--s-2xl);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
/* Filets de part et d'autre du libellé, pour l'ancrer au centre */
.logos-band__label::before,
.logos-band__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong));
}
.logos-band__label::after { background: linear-gradient(90deg, var(--hairline-strong), transparent); }
.logos-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);
}
.logos-marquee__track {
  display: flex; align-items: center; gap: 72px;
  width: max-content;
  animation: logos-scroll 46s linear infinite;
}
.logos-marquee:hover .logos-marquee__track { animation-play-state: paused; }
.logos-marquee img {
  height: 46px; width: auto;
  opacity: 0.66;
  filter: var(--client-logo-filter);
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.logos-marquee img:hover { opacity: 1; transform: scale(1.08); }

@keyframes logos-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: 32px; }
  .logos-marquee { mask-image: none; -webkit-mask-image: none; }
}

/* --------------------------------------------------------------------------
   Nos expertises — cartes empilées au scroll
   Chaque carte est sticky à une hauteur légèrement décalée : la suivante
   vient se poser dessus, les précédentes restent visibles par leur bord haut.
   L'assombrissement et la mise à l'échelle sont pilotés par --cover (0 → 1),
   calculé en JS à partir du recouvrement réel.
   -------------------------------------------------------------------------- */

.poles {
  position: relative;
  display: grid;
  /* Aucun gap : c'est la hauteur de chaque piste qui crée la distance de scroll */
  gap: 0;
}

/* Réserve de fin, en CONTENU et non en padding : une piste collante est bornée
   par la boîte de contenu de son conteneur, un padding ne lui sert donc à rien.
   Sans ce bloc, chaque carte se décroche avant que la suivante ait fini de la
   recouvrir — d'où la bande de texte tranché restée visible. Il lui faut au
   moins la hauteur d'une carte. */
.poles::after {
  content: "";
  display: block;
  height: var(--poles-runway, clamp(545px, 58vh, 640px));
  pointer-events: none;
}

.pole {
  position: sticky;
  top: var(--pole-top, 120px);
  /* Réserve de scroll pendant laquelle la carte reste en place avant que la
     suivante ne vienne se poser dessus.

     Le terme (4 - --i) × 18px compense le décalage d'ancrage de chaque piste.
     Sans lui, les pistes se décrochent en ordre inverse, à plus de 200 px
     d'intervalle : chacune remontait en découvrant sa photo derrière la carte
     du dessus. Avec lui, elles se décrochent ensemble et la pile s'en va d'un
     bloc. */
  --pole-runway: clamp(110px, 16vh, 185px);
  --pole-extra: calc((4 - var(--i, 1)) * 18px);
  padding-bottom: calc(var(--pole-runway) + var(--pole-extra));
  z-index: var(--i, 1);
}
/* La dernière carte n'a personne à attendre : pas de réserve de scroll,
   elle quitte l'écran avec la section. */
/* La dernière piste garde la réserve de base (le terme de compensation y vaut
   zéro) : c'est ce qui aligne son décrochage sur celui des autres. */

.pole__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: stretch;
  /* La hauteur suit le contenu : aucun texte ne doit être coupé.
     Les décalages d'empilement sont resserrés pour que la carte
     entière reste visible même sur un écran de 720 px de haut. */
  min-height: clamp(360px, 46vh, 480px);
  border-radius: var(--r-hero);
  overflow: hidden;
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--pole-accent) 12%, var(--surface)) 0%,
      var(--surface) 42%,
      var(--canvas-soft) 100%);
  border: 1px solid color-mix(in srgb, var(--pole-accent) 22%, var(--hairline));
  /* L'ombre remonte aussi vers le haut : la carte qui arrive se détache
     nettement de celle qu'elle recouvre, au lieu de sembler la prolonger. */
  box-shadow: var(--shadow-floating), 0 -22px 46px -18px rgba(3, 8, 16, 0.92);
  transform: scale(calc(1 - 0.045 * var(--cover, 0)));
  transform-origin: 50% 0;
  filter: brightness(calc(1 - 0.45 * var(--cover, 0)));
  transition: transform 120ms linear, filter 120ms linear;
  will-change: transform, filter;
}

/* Liseré lumineux propre à chaque pôle */
.pole__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--pole-accent) 65%, transparent),
    transparent 42%,
    transparent 62%,
    color-mix(in srgb, var(--pole-accent) 34%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Halo interne, ambiance propre à chaque pôle */
.pole__card::after {
  content: "";
  position: absolute;
  top: -30%; left: -12%;
  width: 60%; height: 130%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--pole-accent) 26%, transparent), transparent 72%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.pole__body {
  position: relative;
  z-index: 2;
  /* Disparaît avant que la carte suivante ne puisse le trancher */
  opacity: calc(1 - var(--fade, 0));
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: clamp(26px, 2.7vw, 44px);
  align-self: center;
  min-height: 0;
}

.pole__head { display: flex; align-items: center; gap: var(--s-md); }
.pole__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--pole-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pole-accent) 32%, transparent);
  color: var(--pole-accent-ink);
}
.pole__icon svg { width: 24px; height: 24px; }
.pole__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.pole__count {
  margin-left: auto;
  padding: 5px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.06em;
}

.pole__promise {
  font-size: clamp(1.3125rem, 1.02rem + 0.95vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin-top: 2px;
}
.pole__promise em { font-style: normal; color: var(--pole-accent-ink); }

.pole__desc { color: var(--muted); max-width: 48ch; font-size: var(--fs-body-sm); }

.pole__services { display: flex; flex-wrap: wrap; gap: 8px; }
.pole__service {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--canvas) 45%, transparent);
  color: var(--body);
  font-size: var(--fs-caption);
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.pole__service svg { width: 14px; height: 14px; color: var(--pole-accent-ink); flex: none; }
.pole__service:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--pole-accent) 55%, transparent);
  transform: translateY(-2px);
}

.pole__cta { margin-top: var(--s-sm); align-self: start; }

/* ---- Visuel ---- */
.pole__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 0;
  background: var(--surface-soft);
}
.pole__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-out);
}

/* Fondu vers le corps de la carte : la photo n'est pas « posée », elle s'y intègre */
.pole__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--surface) 30%, transparent) 22%,
      transparent 52%),
    linear-gradient(200deg,
      color-mix(in srgb, var(--pole-accent) 14%, transparent),
      transparent 60%);
  pointer-events: none;
}

.pole__badge {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-lg);
  background: rgba(5, 13, 24, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: var(--fs-caption);
  line-height: 1.35;
  max-width: 262px;
}
.pole__badge svg { width: 17px; height: 17px; color: var(--pole-accent-ink); flex: none; }
.pole__badge strong { color: #fff; display: block; font-weight: 600; margin-bottom: 2px; text-wrap: balance; }

/* ---- Pied de section ---- */
.poles-foot {
  position: relative;
  z-index: 20;
  display: grid;
  justify-items: center;
  /* La réserve de scroll de l'empilement laisse un grand vide en fin de section.
     On remonte l'appel à l'action dedans : c'est de l'espace vide, rien n'y est
     dessiné, et la marge restante suffit à ne jamais recouvrir la dernière carte. */
  margin-top: calc(var(--s-2xl) - clamp(80px, 11vh, 135px));
}
.poles-foot__cta { display: grid; justify-items: center; gap: var(--s-sm); }
.poles-foot__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Annotation manuscrite réutilisable en tête de section */
.section-note {
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: 190px;
  font-family: var(--font-hand);
  font-size: 1.3125rem;
  line-height: 1.2;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  pointer-events: none;
}
.section-note svg { color: var(--brand); width: 40px; height: 32px; }
.section-note--right { text-align: right; }

/* Au-delà de 1480 px (la largeur du conteneur), les annotations partent vers les
   bords de la fenêtre : le bloc central respire d'autant. En dessous, elles
   restent calées sur le conteneur. */
/* 100% = la largeur du bloc d'en-tête, plus étroit que le conteneur : c'est lui
   la référence pour atteindre le bord de la fenêtre. */
.section-note { --note-out: min(calc((100% - 100vw) / 2 + 38px), 0px); }
.section-note:not(.section-note--right) { left: var(--note-out); }
.section-note--right { right: var(--note-out); }

/* Repoussées vers les bords, elles ont la place d'être plus larges : sans cela
   « pour votre croissance » se coupait sur une troisième ligne. */
@media (min-width: 1600px) { .section-note { max-width: 250px; font-size: 1.375rem; } }
@media (max-width: 1279px) { .section-note { display: none; } }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  /* Sous 1024 px, plus d'empilement collant : la carte grandit avec son contenu,
     sinon un texte long fait disparaître le bouton sous la ligne de coupe. */
  .pole__card {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    min-height: 0;
  }
  /* Plus d'empilement collant : la réserve de fin n'a plus lieu d'être,
     et l'appel à l'action reprend une marge normale. */
  .poles::after { display: none; }
  .pole__body { opacity: 1; }
  .poles-foot { margin-top: var(--s-2xl); }
  .pole__media { order: -1; min-height: 240px; aspect-ratio: 16 / 10; }
  .pole__media::after {
    background:
      linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface) 92%, transparent) 100%),
      linear-gradient(200deg, color-mix(in srgb, var(--pole-accent) 14%, transparent), transparent 60%);
  }
  .poles-foot { text-align: center; }
}

/* Sous 900 px : plus d'empilement sticky — les cartes se suivent simplement.
   Un sticky sur des cartes hautes rendrait la lecture pénible au doigt. */
@media (max-width: 899px) {
  .poles { gap: var(--s-lg); }
  .pole {
    position: static;
    padding-bottom: 0;
  }
  .pole__card {
    transform: none !important;
    filter: none !important;
    box-shadow: var(--shadow-subtle);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pole { position: static; padding-bottom: var(--s-lg); }
  .pole__card { transform: none !important; filter: none !important; }
}

/* --------------------------------------------------------------------------
   Situations clients — composition éditoriale
   4 cartes problème → réponse, plus un bloc humain plein format à droite.
   -------------------------------------------------------------------------- */

.situations__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: var(--s-2xl);
  align-items: start;
  margin-bottom: var(--s-3xl);
}
.situations__title { max-width: 24ch; margin-top: var(--s-lg); }
.situations__title em { font-style: normal; color: var(--brand); }
.situations__intro { margin-top: var(--s-lg); max-width: 56ch; color: var(--muted); }

/* Bloc « équipe » de l'en-tête : visages + repère */
.situations__aside {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  align-self: end;
  padding: 14px 20px 14px 14px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.avatar-stack { display: flex; }
.avatar-stack img {
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--canvas) 80%, transparent);
  transition: transform 420ms var(--ease);
}
.avatar-stack img + img { margin-left: -16px; }
.situations__aside:hover .avatar-stack img { transform: translateY(-3px); }
.situations__aside:hover .avatar-stack img:nth-child(2) { transition-delay: 60ms; }
.situations__aside:hover .avatar-stack img:nth-child(3) { transition-delay: 120ms; }

.situations__aside-text { display: grid; gap: 1px; }
.situations__aside-text strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.situations__aside-text span { font-size: var(--fs-caption); color: var(--muted); line-height: 1.35; }

@media (max-width: 1023px) {
  .situations__head { grid-template-columns: minmax(0, 1fr); }
  .situations__aside { align-self: start; justify-self: start; }
}

/* ---- Grille : 4 cartes + 1 bloc humain ---- */
.situations__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.situation {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-sm);
  min-height: 290px;
  /* La pastille d'icône est en position absolue en haut à gauche : ce retrait
     supérieur lui réserve sa place. Sans lui, un intitulé sur trois lignes
     remonte et passe derrière elle. */
  padding: 94px 28px 28px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border: 1px solid var(--hairline);
  isolation: isolate;
  transition:
    transform 460ms var(--ease),
    border-color 460ms var(--ease),
    box-shadow 460ms var(--ease);
}

/* Photo de fond, ancrée à droite : elle habille sans gêner la lecture */
.situation__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.situation__bg img,
.situation__bg .photo-slot {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 78% 50%;
  transform: scale(1.03);
  transition: transform 1200ms var(--ease-out);
  border-radius: 0;
}

/* Voile : le texte reste lisible quelle que soit la photo */
.situation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--canvas-soft) 96%, transparent) 0%,
      color-mix(in srgb, var(--canvas-soft) 86%, transparent) 42%,
      color-mix(in srgb, var(--canvas-soft) 42%, transparent) 78%,
      color-mix(in srgb, var(--canvas-soft) 20%, transparent) 100%),
    linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--canvas) 55%, transparent) 100%);
  transition: opacity 460ms var(--ease);
}

/* Halo qui s'allume au survol */
.situation::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(70% 90% at 12% 100%,
    color-mix(in srgb, var(--brand) 24%, transparent), transparent 72%);
  opacity: 0;
  transition: opacity 520ms var(--ease);
  pointer-events: none;
}
.situation:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 42%, var(--hairline));
  box-shadow: 0 28px 60px -32px color-mix(in srgb, var(--brand) 85%, transparent), var(--shadow-subtle);
}
.situation:hover::after { opacity: 1; }

.situation__icon {
  position: absolute;
  top: 26px; left: 28px;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand-ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 460ms var(--ease), background-color 460ms var(--ease);
}
.situation__icon svg { width: 21px; height: 21px; }
.situation:hover .situation__icon {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--brand) 26%, transparent);
}

.situation__quote {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 19ch;
}
.situation__quote em { font-style: normal; color: var(--brand); }

.situation__answer {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  max-width: 30ch;
}

.situation__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--s-xs);
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
}
.situation__link svg { width: 15px; height: 15px; color: var(--brand); transition: transform var(--dur-micro) var(--ease); }
.situation:hover .situation__link svg { transform: translateX(5px); }
.situation__link::after { content: ""; position: absolute; inset: 0; }

/* Pastille flottante posée sur la photo */
.situation__badge {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.94);
  color: #0B1728;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.8);
  transition: transform 460ms var(--ease);
}
.situation__badge svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.situation:hover .situation__badge { transform: translateY(-4px); }
.situation__badge--tr { top: 24px; right: 24px; }
.situation__badge--br { bottom: 24px; right: 24px; }

/* ---- Bloc humain ---- */
.situation-human {
  position: relative;
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--hairline));
  background: var(--surface);
  isolation: isolate;
  transition: border-color 460ms var(--ease), box-shadow 460ms var(--ease);
}
.situation-human:hover {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--hairline));
  box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--brand) 80%, transparent);
}

.situation-human__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.situation-human__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.02);
  transition: transform 1600ms var(--ease-out);
}

.situation-human::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--canvas) 97%, transparent) 0%,
      color-mix(in srgb, var(--canvas) 90%, transparent) 32%,
      color-mix(in srgb, var(--canvas) 46%, transparent) 56%,
      color-mix(in srgb, var(--canvas) 26%, transparent) 74%,
      color-mix(in srgb, var(--canvas) 90%, transparent) 100%),
    radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%);
}

.situation-human__top { padding: 28px 28px 0; }
.situation-human__title {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.9375rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  margin-top: var(--s-md);
}
.situation-human__title em { font-style: normal; color: var(--brand); }
.situation-human__top p { margin-top: var(--s-sm); color: var(--body); font-size: var(--fs-body-sm); max-width: 34ch; }

.situation-human__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin: auto 22px 22px;
  border-radius: var(--r-lg);
  background: rgba(7, 17, 31, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #EDF1F6;
  font-size: var(--fs-body-sm);
  line-height: 1.4;
}
.situation-human__foot span:first-child {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 36%, transparent);
  color: var(--brand-ink);
}
.situation-human__foot svg { width: 20px; height: 20px; }

/* ---- Pied de section ---- */
.situations__foot {
  display: grid;
  justify-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-2xl);
  padding-top: var(--s-2xl);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.situations__foot-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: none;
}
.situations__foot-sub {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  max-width: 52ch;
}
.situations__foot-cta { margin-top: var(--s-md); }
.situations__foot-cta svg { width: 19px; height: 19px; transition: transform var(--dur-micro) var(--ease); }
.situations__foot-cta:hover svg { transform: translateX(4px); }

@media (max-width: 1199px) {
  .situations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situation-human { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
  .situation-human__bg img { object-position: 50% 26%; }
  .situation-human__top { max-width: 640px; }
}
@media (max-width: 767px) {
  .situations__grid { grid-template-columns: minmax(0, 1fr); }
  /* Sous 767 px, la pastille passe à 22 px et les badges se rangent en haut à
     droite : le retrait supérieur doit couvrir les deux. */
  .situation { min-height: 260px; padding: 96px 24px 24px; }
  .situation__icon { top: 22px; left: 24px; }
  .situation__badge--tr { top: 20px; right: 20px; }
  .situation__badge--br { bottom: 20px; right: 20px; }
  .situation__quote { max-width: none; }
  .situation__answer { max-width: none; }
  .situations__aside { padding: 12px 16px 12px 12px; }
  /* Sur une carte étroite, la pastille descendue heurterait le lien :
     on la remonte systématiquement à côté de l'icône. */
  .situation__badge--tr,
  .situation__badge--br { top: 22px; right: 20px; bottom: auto; max-width: 45%; }
  .avatar-stack img { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   Réalisations — un projet à la une, puis trois projets en appui
   Section volontairement très respirante : l'espace fait le haut de gamme.
   -------------------------------------------------------------------------- */

.works__head {
  max-width: 720px;
  margin: 0 auto clamp(56px, 6vw, 88px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--s-lg);
}
.works__title { max-width: 18ch; }
.works__title strong { font-weight: inherit; color: var(--ink); }
.works__title b {
  font-weight: inherit;
  color: color-mix(in srgb, var(--brand) 42%, var(--ink));
}
.works__title em { font-style: normal; color: var(--brand); }
.works__intro { color: var(--muted); max-width: 54ch; margin-inline: auto; }

/* Micro-libellés verticaux, en marge — détail éditorial */
.works__rail {
  position: absolute;
  top: 22%;
  display: grid;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.6;
  pointer-events: none;
}
.works__rail--left { left: 26px; padding-left: 18px; border-left: 1px solid var(--hairline); }
.works__rail--right { right: 26px; padding-right: 18px; border-right: 1px solid var(--hairline); text-align: right; top: 46%; }
@media (max-width: 1479px) { .works__rail { display: none; } }

/* ---- Projet à la une ---- */
.work-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 4vw, 68px);
  align-items: center;
  padding: clamp(26px, 2.8vw, 44px);
  border-radius: var(--r-hero);
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  border: 1px solid var(--hairline);
  margin-bottom: clamp(40px, 4.5vw, 72px);
  transition: border-color 520ms var(--ease), box-shadow 520ms var(--ease);
}
/* Liseré lumineux, comme le header et le CTA final */
.work-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--brand) 52%, transparent),
    color-mix(in srgb, var(--accent-violet) 30%, transparent) 38%,
    transparent 62%,
    color-mix(in srgb, var(--accent-blue) 34%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.work-hero:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--hairline));
  box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--brand) 90%, transparent);
}

.work-hero__body { display: grid; gap: var(--s-md); padding-right: clamp(0px, 1vw, 20px); }
.work-hero__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.work-hero__name {
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
}
.work-hero__meta { font-size: var(--fs-body-sm); color: var(--muted); }
.work-hero__desc { color: var(--body); max-width: 40ch; }
.work-hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-xs); }
.work-hero__cta { margin-top: var(--s-md); }

/* Étiquette de service, avec pictogramme */
.work-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px 10px 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: var(--body);
  font-size: var(--fs-caption);
  font-weight: 500;
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.work-tag svg { width: 15px; height: 15px; color: var(--brand-ink); flex: none; }
.work-tag--sm { padding: 8px 14px 8px 11px; }
.work-tag--sm svg { width: 13px; height: 13px; }
a.work-tag:hover { color: var(--ink); border-color: color-mix(in srgb, var(--brand) 50%, transparent); transform: translateY(-2px); }

/* ---- Visuel de projet, présenté comme une fenêtre ---- */
.work-shot {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-floating);
}
.work-shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--canvas-soft) 92%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.work-shot__bar i {
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  background: var(--hairline-strong);
  flex: none;
}
.work-shot__bar span {
  flex: 1;
  height: 18px;
  margin-left: 8px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.work-shot__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.work-shot__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1.02);
  transition: transform 1600ms var(--ease-out);
}

@media (max-width: 1023px) {
  .work-hero { grid-template-columns: minmax(0, 1fr); }
  .work-hero__body { order: 2; padding-right: 0; }
  .work-hero__desc { max-width: none; }
}

/* ---- Trois projets en appui ---- */
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 44%, transparent);
  border: 1px solid var(--hairline);
  transition: transform 480ms var(--ease), border-color 480ms var(--ease), box-shadow 480ms var(--ease);
}
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(110% 70% at 50% 0%,
    color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 520ms var(--ease);
  pointer-events: none;
}
.work-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--brand) 38%, var(--hairline));
  box-shadow: 0 34px 70px -40px color-mix(in srgb, var(--brand) 85%, transparent), var(--shadow-subtle);
}
.work-card:hover::after { opacity: 1; }

.work-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-soft); }
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1.02);
  transition: transform 1200ms var(--ease-out);
}

.work-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-sm);
  padding: clamp(22px, 2vw, 30px);
}
.work-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-md);
}
.work-card__name { font-size: 1.1875rem; letter-spacing: -0.018em; transition: color var(--dur-micro) var(--ease); }
.work-card:hover .work-card__name { color: var(--brand-ink); }
.work-card__meta { font-size: var(--fs-caption); color: var(--muted); margin-top: 3px; }
.work-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-xs); }

.work-card__go {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand);
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.work-card__go svg { width: 17px; height: 17px; }
.work-card:hover .work-card__go { background: var(--brand); color: #fff; transform: translateX(3px); }
.work-card__go::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 1023px) { .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .works__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Ligne de pied ---- */
.works__foot {
  max-width: none;          /* p { max-width: 760px } ne doit pas s'appliquer ici */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-lg);
  margin-top: clamp(48px, 5vw, 80px);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}
.works__foot::before,
.works__foot::after {
  content: "";
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong));
}
.works__foot::after { background: linear-gradient(90deg, var(--hairline-strong), transparent); }

/* --------------------------------------------------------------------------
   L'agence
   -------------------------------------------------------------------------- */

.agency {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}

/* Colonne éditoriale ------------------------------------------------------ */

.agency__title { max-width: 18ch; }
.agency__title b {
  font-weight: inherit;
  color: color-mix(in srgb, var(--brand) 88%, var(--ink));
}
.agency__intro .t-lead { max-width: 54ch; }

.agency__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
  margin-top: var(--s-2xl);
}
.agency__point {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px 22px 24px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid var(--hairline);
  transition: transform 420ms var(--ease), border-color 420ms var(--ease),
              background-color 420ms var(--ease);
}
.agency__point:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--hairline));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.agency__point-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  transition: background-color 420ms var(--ease), transform 420ms var(--ease);
}
.agency__point:hover .agency__point-icon {
  background: color-mix(in srgb, var(--brand) 24%, transparent);
  transform: scale(1.06);
}
.agency__point-icon svg { width: 21px; height: 21px; }
.agency__point h3 { font-size: 1.0625rem; line-height: 1.35; }
.agency__point p { font-size: var(--fs-body-sm); color: var(--muted); max-width: none; }

.agency__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-md);
  margin-top: var(--s-2xl);
}
.agency__cta .btn svg { width: 18px; height: 18px; transition: transform var(--dur-micro) var(--ease); }
.agency__cta .btn:hover svg { transform: translateX(4px); }
.agency__cta-rule {
  flex: 0 0 auto;
  width: clamp(20px, 4vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-violet) 70%, transparent), transparent);
}
.agency__cta-note { font-size: var(--fs-body-sm); color: var(--muted); }

/* Mosaïque ---------------------------------------------------------------- */

.agency__mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1.3fr 1fr 1fr;
  aspect-ratio: 1 / 0.88;
  gap: 14px;
}
.agency__tile {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  min-height: 0;
  min-width: 0;
}
.agency__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placement : 4 colonnes, 3 rangées — voir le HTML pour l'ordre des tuiles */
.agency__tile--wide  { grid-column: span 3; }
.agency__tile--tall  { grid-row: span 2; }
.agency__tile--span2 { grid-column: span 2; }

/* Léger zoom au survol, comme sur les réalisations */
.agency__tile img { transition: transform 900ms var(--ease); }

/* Tuile « valeurs » : les mots affichés dans les locaux */
.agency__tile--values {
  display: grid;
  align-content: center;
  padding: 20px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-raised) 80%, transparent);
}
.agency__tile--values p { display: grid; gap: 3px; max-width: none; }
.agency__tile--values span {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 0.95vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
}
.agency__tile--values .is-accent { color: var(--brand); }

/* Tuile citation */
.agency__tile--quote {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 20px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}
.agency__quote-mark {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 0.6;
  color: var(--brand);
}
.agency__tile--quote p {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}
.agency__quote-rule {
  width: 34px; height: 2px;
  border-radius: var(--r-full);
  background: var(--brand);
}

/* Note manuscrite posée sur la dernière tuile */
.agency__hand {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-family: var(--font-hand);
  font-size: clamp(1.05rem, 1.5vw, 1.375rem);
  line-height: 1.15;
  text-align: right;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* Pastille de localisation, posée à cheval sur la première rangée */
.agency__pin {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.agency__pin svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.agency__pin span { display: grid; gap: 1px; font-size: var(--fs-caption); color: var(--muted); line-height: 1.25; }
.agency__pin strong { font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink); }

/* Bandeau de repères ------------------------------------------------------ */

.agency__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-2xl);
  padding: 22px clamp(18px, 3vw, 34px);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--hairline);
}
.agency__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px clamp(14px, 2.4vw, 30px);
}
.agency__stat + .agency__stat { border-left: 1px solid var(--hairline); }
.agency__stat-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--r-full);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
}
.agency__stat-icon svg { width: 20px; height: 20px; }
.agency__stat-text { display: grid; gap: 2px; font-size: var(--fs-body-sm); color: var(--muted); }
.agency__stat-text strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

/* Adaptations ------------------------------------------------------------- */

@media (max-width: 1199px) {
  .agency { grid-template-columns: minmax(0, 1fr); gap: var(--s-2xl); }
  .agency__title { max-width: 20ch; }
  .agency__pin { top: -16px; right: 14px; }
}
@media (max-width: 767px) {
  .agency__points { grid-template-columns: minmax(0, 1fr); }
  .agency__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: minmax(150px, auto);
    aspect-ratio: auto;
  }
  .agency__tile--wide  { grid-column: span 2; aspect-ratio: 16 / 10; }
  .agency__tile--span2 { grid-column: span 2; aspect-ratio: 16 / 10; }
  .agency__tile--tall  { grid-row: span 1; aspect-ratio: 3 / 4; }
  .agency__tile { aspect-ratio: 1 / 1; }
  .agency__tile--values, .agency__tile--quote { aspect-ratio: auto; min-height: 150px; }
  .agency__stats { grid-template-columns: minmax(0, 1fr); }
  .agency__stat + .agency__stat { border-left: 0; border-top: 1px solid var(--hairline); }
}

@media (prefers-reduced-motion: reduce) {
  .agency__point:hover { transform: none; }
}

/* Grille équipe : plus affichée sur la homepage (retirée à votre demande).
   Le composant est conservé pour la future page /agence/. */
.team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 232px));
  gap: var(--s-2xl) var(--grid-gap);
  align-items: start;
  margin-top: var(--s-3xl);
  padding-top: var(--s-2xl);
  border-top: 1px solid var(--hairline);
}
.team__intro { align-self: center; padding-right: var(--s-lg); }
.team__intro h3 { font-size: var(--fs-h4); margin-bottom: var(--s-sm); }
.team__intro p { font-size: var(--fs-body-sm); color: var(--muted); max-width: 34ch; }
.team__member { display: grid; gap: var(--s-sm); }

.team__photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;         /* carré compact plutôt que grand portrait */
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  transition: border-color 420ms var(--ease), transform 420ms var(--ease);
}
.team__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease-out), filter 500ms var(--ease);
}

/* Voile + identité + LinkedIn, révélés au survol et au focus clavier */
.team__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 16px;
  background: linear-gradient(180deg,
    rgba(5, 13, 24, 0) 30%,
    rgba(5, 13, 24, 0.62) 62%,
    rgba(5, 13, 24, 0.92) 100%);
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.team__overlay-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  color: #fff;
  transform: translateY(10px);
  transition: transform 480ms var(--ease-out) 40ms;
}
.team__overlay-role {
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.76);
  transform: translateY(10px);
  transition: transform 480ms var(--ease-out) 90ms;
}
.team__linkedin {
  position: absolute;
  top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-8px) scale(0.9);
  transition:
    opacity 380ms var(--ease),
    transform 420ms var(--ease-out) 60ms,
    background-color var(--dur-micro) var(--ease);
}
.team__linkedin:hover { background: var(--brand); border-color: var(--brand); }
.team__linkedin svg { width: 16px; height: 16px; }

.team__member:hover .team__photo,
.team__member:focus-within .team__photo { border-color: color-mix(in srgb, var(--brand) 40%, var(--hairline)); }
.team__member:hover .team__photo img,
.team__member:focus-within .team__photo img { transform: scale(1.06); filter: brightness(0.92); }
.team__member:hover .team__overlay,
.team__member:focus-within .team__overlay { opacity: 1; }
.team__member:hover .team__overlay-name,
.team__member:hover .team__overlay-role,
.team__member:focus-within .team__overlay-name,
.team__member:focus-within .team__overlay-role { transform: none; }
.team__member:hover .team__linkedin,
.team__member:focus-within .team__linkedin { opacity: 1; transform: none; }

/* Identité toujours lisible sous la photo, y compris sans survol */
.team__member h3 { font-size: 0.9375rem; }
.team__member p { font-size: var(--fs-caption); color: var(--muted); }

@media (max-width: 1023px) { .agency { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team__intro { grid-column: 1 / -1; padding-right: 0; }
  .team__intro p { max-width: 60ch; }
}
@media (max-width: 639px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Bande photo « en coulisses » — emplacements pour les futures photos
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: var(--s-md);
}
.gallery__item {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-soft);
  margin: 0;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }

.gallery__item figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(5, 13, 24, 0.64);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: var(--fs-caption);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms var(--ease), transform 420ms var(--ease-out);
  z-index: 2;
}
.gallery__item:hover figcaption { opacity: 1; transform: none; }

.gallery__item--w2 { grid-column: span 2; }
.gallery__item--w3 { grid-column: span 3; }
.gallery__item--h2 { grid-row: span 2; }

@media (max-width: 1023px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 165px; }
  .gallery__item--w3 { grid-column: span 2; }
}
@media (max-width: 639px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .gallery__item--w2, .gallery__item--w3 { grid-column: span 2; }
  .gallery__item--h2 { grid-row: span 1; }
  /* Sur une tuile basse, le libellé suffit : l'indication détaillée déborderait */
  .gallery .photo-slot { gap: 6px; padding: 12px; }
  .gallery .photo-slot__hint { display: none; }
  .gallery .photo-slot svg { width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   Notre différence — ce que change le fait de travailler avec l'agence
   -------------------------------------------------------------------------- */

.difference__head {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  max-width: 900px;
  margin: 0 auto var(--s-2xl);
  text-align: center;
}
.difference__title { max-width: 26ch; }
.difference__title b {
  font-weight: inherit;
  color: var(--brand);
}
.difference__lede {
  max-width: 66ch;
  color: var(--muted);
  text-wrap: balance;
}

.difference__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-md);
}
.diff-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--s-md);
  align-items: start;
  padding: 22px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--hairline);
  transition: transform 420ms var(--ease), border-color 420ms var(--ease),
              background-color 420ms var(--ease);
}
.diff-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--brand) 32%, var(--hairline));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.diff-card__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--r-full);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  transition: background-color 420ms var(--ease), transform 420ms var(--ease);
}
.diff-card:hover .diff-card__icon {
  background: color-mix(in srgb, var(--brand) 24%, transparent);
  transform: scale(1.07);
}
.diff-card__icon svg { width: 25px; height: 25px; }
.diff-card h3 { font-size: 1.0625rem; line-height: 1.35; margin-bottom: 6px; }
.diff-card p { font-size: var(--fs-body-sm); color: var(--muted); max-width: none; }

/* Bandeau promesse ---------------------------------------------------------
   Bordure dégradée obtenue par masque : le fond reste opaque. */
.promise {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 0.62fr) auto;
  align-items: center;
  gap: clamp(24px, 3.5vw, 52px);
  margin-top: var(--s-2xl);
  padding: clamp(26px, 3vw, 40px) clamp(26px, 3.4vw, 46px);
  border-radius: var(--r-panel);
  background:
    radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--accent-violet) 13%, transparent), transparent 62%),
    radial-gradient(80% 150% at 100% 100%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-soft) 92%, transparent);
}
.promise::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, var(--accent-violet), var(--brand) 52%, var(--accent-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.promise__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-md);
}
.promise__rule {
  flex: 1 1 auto;
  max-width: 90px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.promise__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  max-width: 26ch;
}
.promise__title b { font-weight: inherit; color: var(--brand); }

.promise__sep { width: 1px; align-self: stretch; background: var(--hairline-strong); }

.promise__action { display: grid; justify-items: center; gap: var(--s-sm); text-align: center; }
.promise__action .btn svg { width: 18px; height: 18px; transition: transform var(--dur-micro) var(--ease); }
.promise__action .btn:hover svg { transform: translateX(4px); }
.promise__action p { font-size: var(--fs-body-sm); color: var(--muted); max-width: none; }

.promise__hand {
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
  color: var(--ink);
  text-align: center;
  max-width: none;
  transform: rotate(-6deg);
}

/* Trois repères de pied de section */
.difference__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-2xl);
}
.difference__foot-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px clamp(14px, 2.4vw, 30px);
}
.difference__foot-item + .difference__foot-item { border-left: 1px solid var(--hairline); }
.difference__foot-icon { color: var(--brand); flex: none; }
.difference__foot-icon svg { width: 26px; height: 26px; }
.difference__foot-item span:last-child {
  display: grid;
  gap: 2px;
  font-size: var(--fs-body-sm);
  color: var(--muted);
}
.difference__foot-item strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 1279px) {
  .difference__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 0.7fr); }
  .promise__hand { grid-column: 1 / -1; margin-top: var(--s-sm); }
}
@media (max-width: 767px) {
  .difference__grid { grid-template-columns: minmax(0, 1fr); }
  .promise { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); }
  .promise__sep { width: 100%; height: 1px; align-self: auto; }
  .promise__title { max-width: none; }
  .difference__foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); }
  .difference__foot-item { justify-content: flex-start; }
  .difference__foot-item + .difference__foot-item { border-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-md); }
}

@media (prefers-reduced-motion: reduce) {
  .diff-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Nos outils — carte des outils utilisés, logos fournis par l'agence
   -------------------------------------------------------------------------- */

.toolmap { position: relative; }

.toolmap__glow {
  position: absolute;
  left: 50%; top: 46%;
  width: min(760px, 84%); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--r-full);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-violet) 16%, transparent) 0%, transparent 66%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .toolmap__glow { animation: halo-breathe 21s ease-in-out infinite; }
}

/* Cercle discret qui contient le bloc central */
.toolmap::before {
  content: "";
  position: absolute;
  left: 50%; top: 47%;
  width: min(640px, 74%); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--accent-violet) 22%, transparent);
  opacity: 0;
  transition: opacity 1.4s var(--ease) 300ms;
  pointer-events: none;
}
.toolmap.is-revealed::before { opacity: 1; }

/* Liens pointillés */
.toolmap__links {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.toolmap__links path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent-violet) 62%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 1.2s var(--ease) 400ms;
}
.toolmap.is-revealed .toolmap__links path { opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
  .toolmap.is-revealed .toolmap__links path {
    animation: link-flow 5.5s linear infinite;
    animation-delay: var(--link-delay, 0s);
  }
}
@keyframes link-flow { to { stroke-dashoffset: -32; } }

/* Grille : rail gauche / centre / rail droit, avec un nœud au-dessus du centre */
.toolmap__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 250px);
  grid-template-areas:
    ".      haut   ."
    "gauche centre droite"
    ".      bas    .";
  gap: clamp(20px, 3vw, 44px) clamp(16px, 3vw, 48px);
  align-items: center;
}
.toolmap__top    { grid-area: haut; display: grid; justify-items: center; }
.toolmap__bottom { grid-area: bas;  display: grid; justify-items: center; }
.toolmap__top .toolmap__node,
.toolmap__bottom .toolmap__node { max-width: 250px; }
.toolmap__center { grid-area: centre; text-align: center; padding: clamp(8px, 2vw, 28px) 0; }
.toolmap__rail--left  { grid-area: gauche; }
.toolmap__rail--right { grid-area: droite; }
.toolmap__rail {
  display: grid;
  gap: clamp(20px, 3.4vh, 40px);
  justify-items: center;
}

/* Bloc central */
.toolmap__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.toolmap__rule {
  display: block;
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-violet) 70%, transparent), transparent);
}
.toolmap__center h2 {
  margin-top: var(--s-md);
  font-size: clamp(1.6rem, 1rem + 2.5vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.toolmap__center h2 b { font-weight: inherit; color: var(--brand); }
.toolmap__lede {
  margin: var(--s-lg) auto 0;
  max-width: 48ch;
  font-size: var(--fs-body-sm);
  color: var(--muted);
}
.toolmap__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: var(--s-xl) auto 0;
  max-width: 320px;
  color: color-mix(in srgb, var(--accent-violet) 85%, var(--ink));
}
.toolmap__infinity {
  font-size: 1.5rem;
  line-height: 1;
  flex: none;
}
.toolmap__divider .toolmap__rule { flex: 1 1 auto; width: auto; }
.toolmap__tagline {
  margin-top: var(--s-md);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  max-width: none;
}

/* Pastilles d'outils */
.toolmap__node {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--node-delay, 0ms);
}
.toolmap.is-revealed .toolmap__node { opacity: 1; transform: none; }

.toolmap__pill {
  position: relative;
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  min-height: 74px;
  padding: 16px 22px;
  border-radius: var(--r-full);
  background:
    radial-gradient(120% 160% at 50% 0%, color-mix(in srgb, var(--accent-violet) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-violet) 30%, var(--hairline));
  box-shadow: 0 0 32px -18px color-mix(in srgb, var(--accent-violet) 80%, transparent);
  transition: border-color 460ms var(--ease), transform 460ms var(--ease),
              box-shadow 460ms var(--ease);
}
.toolmap__node:hover .toolmap__pill {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 46%, transparent);
  box-shadow: 0 0 42px -14px color-mix(in srgb, var(--brand) 70%, transparent);
}
.toolmap__pill img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(22px, 2vw, 27px);
  object-fit: contain;
}
@media (prefers-reduced-motion: no-preference) {
  .toolmap.is-revealed .toolmap__pill { animation: node-float var(--node-cycle, 10s) ease-in-out infinite; }
}
@keyframes node-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.toolmap__node figcaption {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  line-height: 1.4;
}

/* Emplacements dont le fichier de logo n'est pas encore exploitable */
.toolmap__node--slot .toolmap__pill {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent-violet) 28%, var(--hairline));
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  box-shadow: none;
}
.toolmap__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--body);
}
.placeholder--xs { font-size: 0.625rem; padding: 2px 8px; }

.toolmap__note {
  margin: var(--s-2xl) auto 0;
  max-width: 66ch;
  text-align: center;
}

/* Sous 1024 px la carte devient une grille lisible, sans liens ni flottement */
@media (max-width: 1023px) {
  .toolmap::before, .toolmap__links { display: none; }
  .toolmap__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "centre" "haut" "gauche" "droite" "bas";
    gap: var(--s-xl);
  }
  .toolmap__rail, .toolmap__top, .toolmap__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    gap: var(--s-md);
  }
  .toolmap__top, .toolmap__bottom { grid-template-columns: minmax(0, 260px); justify-content: center; }
  .toolmap__center { padding: 0; }
}
@media (max-width: 519px) {
  .toolmap__rail { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .toolmap.is-revealed .toolmap__pill { animation: none; }
  .toolmap__node { opacity: 1; transform: none; }
  .toolmap__node:hover .toolmap__pill { transform: none; }
}

/* --------------------------------------------------------------------------
   Promesse / engagements + process
   -------------------------------------------------------------------------- */

.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.why-card {
  position: relative;
  display: grid; gap: var(--s-sm); align-content: start;
  padding: 32px 28px;
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: transform 420ms var(--ease), border-color 420ms var(--ease);
}
.why-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand) 30%, var(--hairline)); }
.why-card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  color: var(--brand-ink);
}
.why-card__icon svg { width: 21px; height: 21px; }
.why-card h3 { font-size: 1.0625rem; }
.why-card p { font-size: var(--fs-body-sm); color: var(--muted); max-width: none; }

@media (max-width: 1023px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* Cinq étapes en frise, reliées par des pointillés */

.method__head {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  max-width: 900px;
  margin: 0 auto var(--s-2xl);
  text-align: center;
}
.method__label {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.method__title { max-width: 22ch; }
.method__title b { font-weight: inherit; color: var(--brand); }
.method__lede { max-width: 62ch; color: var(--muted); text-wrap: balance; }

.method__flow { position: relative; }
.method__links {
  position: absolute;
  left: 0; right: 0;
  top: clamp(150px, 15vw, 210px);
  height: 40px;
  width: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.method__links path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent-blue) 60%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 1s var(--ease) 500ms;
}
.method__steps.is-revealed ~ * .method__links path,
.method__flow:has(.step.is-revealed) .method__links path { opacity: 0.7; }

.method__steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  align-items: start;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--s-sm);
  text-align: center;
}
.step__media {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 30px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
}
.step__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease); }
.step__media .photo-slot { height: 100%; border: 0; }

/* Pastille numérotée, à cheval sur le bas du visuel */
.step__num {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: center;
  margin-bottom: 8px;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--step, var(--brand));
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  border: 3px solid var(--canvas);
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--step, var(--brand)) 90%, transparent);
  z-index: 3;
}
.step__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--step, var(--brand));
}
.step__icon svg { width: 28px; height: 28px; }
.step h3 { font-size: 1.0625rem; line-height: 1.3; }
.step p { font-size: var(--fs-body-sm); color: var(--muted); max-width: 30ch; margin-inline: auto; }

/* Appel à l'action + note manuscrite */
.method__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  margin-top: var(--s-3xl);
}
.method__btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-border: color-mix(in srgb, var(--accent-blue) 40%, var(--hairline-strong));
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.95);
}
.method__btn:hover {
  --btn-bg: var(--brand);
  --btn-border: var(--brand);
  transform: translateY(-2px);
}
.method__btn svg { width: 19px; height: 19px; transition: transform var(--dur-micro) var(--ease); }
.method__btn:hover svg { transform: translateX(4px); }
.method__arrow { color: var(--faint); flex: none; }
.method__arrow svg { width: 74px; height: 36px; }
.method__hand {
  font-family: var(--font-hand);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.2;
  color: var(--body);
  max-width: none;
  transform: rotate(-4deg);
}

/* Trois repères de pied */
.method__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-2xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--hairline);
}
.method__foot-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px clamp(12px, 2vw, 26px);
  font-size: var(--fs-body-sm);
  color: var(--body);
}
.method__foot-item + .method__foot-item { border-left: 1px solid var(--hairline); }
.method__foot-item span { color: var(--brand); flex: none; display: grid; place-items: center; }
.method__foot-item svg { width: 24px; height: 24px; }

@media (max-width: 1023px) {
  .method__links { display: none; }
  .method__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xl) var(--s-lg); }
}
@media (max-width: 599px) {
  .method__steps { grid-template-columns: minmax(0, 1fr); }
  .method__foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); }
  .method__foot-item { justify-content: flex-start; }
  .method__foot-item + .method__foot-item { border-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-md); }
  .method__arrow { display: none; }
  .method__hand { transform: none; text-align: center; }
}

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

/* --------------------------------------------------------------------------
   SEO / GEO
   -------------------------------------------------------------------------- */

.geo {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.68fr) minmax(0, 0.88fr);
  gap: clamp(22px, 2.6vw, 44px);
  align-items: center;
}

/* Colonne éditoriale ------------------------------------------------------ */

.geo__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-ink);
  max-width: none;
}
.geo__label-rule {
  flex: 1 1 auto;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.geo__title { max-width: 20ch; }
.geo__title b { font-weight: inherit; color: var(--brand); }
.geo__intro .t-lead { max-width: 52ch; }
.geo__intro .t-lead strong { color: var(--ink); font-weight: 600; }
.geo__note { margin-top: var(--s-lg); max-width: 52ch; font-size: var(--fs-body-sm); color: var(--faint); }
.geo__cta svg { width: 19px; height: 19px; transition: transform var(--dur-micro) var(--ease); }
.geo__cta:hover svg { transform: translateX(4px); }

.geo__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-2xl);
}
.geo__foot-item { display: flex; align-items: center; gap: 12px; padding: 4px clamp(10px, 1.4vw, 20px); }
.geo__foot-item:first-child { padding-left: 0; }
.geo__foot-item + .geo__foot-item { border-left: 1px solid var(--hairline); }
.geo__foot-item > span:first-child { color: var(--brand); flex: none; display: grid; place-items: center; }
.geo__foot-item svg { width: 24px; height: 24px; }
.geo__foot-item > span:last-child { display: grid; gap: 1px; font-size: var(--fs-caption); color: var(--muted); text-wrap: nowrap; }
.geo__foot-item strong { font-family: var(--font-display); font-size: 0.8125rem; white-space: nowrap; font-weight: 600; color: var(--ink); }

/* Visuel : la recherche et les moteurs qui gravitent autour ---------------- */

.geo__stage {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
}
.geo__orbit {
  position: absolute;
  left: 50%; top: 44%;
  width: min(370px, 96%); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--accent-violet) 26%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-violet) 12%, transparent) 0%, transparent 62%);
}
.geo__orbit--inner {
  width: min(250px, 68%);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
  background: none;
}
@media (prefers-reduced-motion: no-preference) {
  .geo__orbit { animation: halo-breathe 24s ease-in-out infinite; }
  .geo__orbit--inner { animation: halo-breathe 18s ease-in-out infinite reverse; }
}

/* Barre de recherche : une image légendée, pas un vrai champ */
.geo__search {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(330px, 92%);
  padding: 12px 12px 12px 18px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--hairline-strong));
  box-shadow: 0 22px 54px -26px rgba(0, 0, 0, 0.95),
              0 0 40px -18px color-mix(in srgb, var(--brand) 80%, transparent);
  rotate: -2deg;
}
.geo__search-mark { display: grid; place-items: center; color: var(--muted); flex: none; }
.geo__search-mark svg { width: 20px; height: 20px; }
.geo__search-text { flex: 1 1 auto; font-size: var(--fs-body-sm); color: var(--faint); }
.geo__search-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-full);
  color: #fff;
  background: var(--brand);
  box-shadow: 0 0 24px -8px color-mix(in srgb, var(--brand) 90%, transparent);
}
.geo__search-btn svg { width: 17px; height: 17px; }

/* Pastilles des moteurs : nom seul, aucun logo de marque reproduit */
.geo-chip {
  position: absolute;
  z-index: 4;
  left: var(--x, 50%);
  top: var(--y, 50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--r-full);
  white-space: nowrap;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip, var(--accent-violet)) 44%, transparent);
  box-shadow: 0 0 30px -14px color-mix(in srgb, var(--chip, var(--accent-violet)) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.geo-chip img {
  display: block;
  width: auto;
  height: 20px;
  object-fit: contain;
}
.geo-chip--mark img { height: 22px; }
.geo-chip__name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .geo-chip { animation: node-float var(--chip-cycle, 10s) ease-in-out infinite; animation-delay: var(--chip-delay, 0s); }
}

.geo__hand {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: max-content;
  translate: -50% 0;
  z-index: 4;
  font-family: var(--font-hand);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.2;
  text-align: center;
  color: var(--body);
  max-width: none;
  transform: rotate(-4deg);
}

/* Panneau des quatre principes -------------------------------------------- */

.geo__panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-panel);
  border: 1px solid color-mix(in srgb, var(--accent-violet) 26%, var(--hairline));
  background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
}
.geo-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border: 1px solid var(--hairline);
  transition: transform 420ms var(--ease), border-color 420ms var(--ease);
}
.geo-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 32%, var(--hairline));
}
.geo-card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 36%, transparent);
}
.geo-card__icon svg { width: 23px; height: 23px; }
.geo-card h3 { font-size: 1rem; line-height: 1.32; margin-bottom: 5px; }
.geo-card p { font-size: var(--fs-body-sm); color: var(--muted); max-width: none; }

@media (max-width: 1279px) {
  .geo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .geo__intro { grid-column: 1 / -1; }
  .geo__title { max-width: 24ch; }
}
@media (max-width: 899px) {
  .geo { grid-template-columns: minmax(0, 1fr); }
  .geo__stage { min-height: 360px; }
  .geo__foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); }
  .geo__foot-item { padding-left: 0; }
  .geo__foot-item + .geo__foot-item { border-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-md); }
}
@media (max-width: 519px) {
  .geo-chip { padding: 8px 13px; }
  .geo-chip img { height: 17px; }
  .geo-chip--mark img { height: 19px; }
  .geo-chip__name { font-size: 0.8125rem; }
  .geo__stage { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .geo-chip { animation: none; }
  .geo__orbit, .geo__orbit--inner { animation: none; }
  .geo-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Avis Google — preuve sociale, placée juste après les réalisations
   -------------------------------------------------------------------------- */

.reviews { position: relative; }

/* Intro centrée : label encadré de filets, titre, chapô */
.reviews__intro {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  max-width: 900px;
  margin: 0 auto var(--s-2xl);
  text-align: center;
}
.reviews__label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.reviews__rule {
  display: block;
  width: clamp(28px, 7vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 60%, transparent));
}
.reviews__label .reviews__rule:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, transparent), transparent); }

.reviews__title { max-width: 22ch; }
.reviews__title b {
  font-weight: inherit;
  color: color-mix(in srgb, var(--brand) 82%, var(--ink));
}
.reviews__lede {
  max-width: 62ch;
  color: var(--muted);
  text-wrap: balance;
}

/* Carte de note : « Excellent », 5 étoiles, nombre d'avis, provenance Google */
.reviews__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--s-2xl);
  padding: 30px clamp(26px, 4vw, 52px);
  border-radius: var(--r-panel);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--surface-raised) 72%, transparent);
  border: 1px solid var(--hairline);
  box-shadow: 0 22px 60px -38px rgba(0, 0, 0, 0.9);
  text-align: center;
}
.reviews__rating-main,
.reviews__rating-side { display: grid; gap: 10px; justify-items: center; align-content: center; }
.reviews__rating-side { gap: 8px; }

.reviews__score-label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.reviews__count { font-size: var(--fs-body-sm); color: var(--muted); }
.reviews__count strong { color: var(--ink); font-weight: 600; }

.reviews__rating-sep {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--hairline-strong), transparent);
}
.reviews__rating-note { font-size: var(--fs-caption); color: var(--faint); max-width: 30ch; }

.reviews__google-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
}
.reviews__google-logo svg { width: 20px; height: 20px; flex: none; }

/* Étoiles */
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 19px; height: 19px; color: #FBBC04; }
.stars--sm svg { width: 14px; height: 14px; }
.stars--lg svg { width: clamp(24px, 3vw, 30px); height: clamp(24px, 3vw, 30px); }

/* Les étoiles de la carte de note s'allument une par une à la révélation */
.reviews__rating .stars--lg svg {
  opacity: 0;
  transform: scale(0.6) rotate(-24deg);
}
.reviews__rating.is-revealed .stars--lg svg {
  animation: star-pop 620ms var(--ease) forwards;
}
.reviews__rating.is-revealed .stars--lg svg:nth-child(1) { animation-delay: 180ms; }
.reviews__rating.is-revealed .stars--lg svg:nth-child(2) { animation-delay: 280ms; }
.reviews__rating.is-revealed .stars--lg svg:nth-child(3) { animation-delay: 380ms; }
.reviews__rating.is-revealed .stars--lg svg:nth-child(4) { animation-delay: 480ms; }
.reviews__rating.is-revealed .stars--lg svg:nth-child(5) { animation-delay: 580ms; }
@keyframes star-pop {
  0%   { opacity: 0; transform: scale(0.6) rotate(-24deg); }
  60%  { opacity: 1; transform: scale(1.16) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Piste de défilement horizontal */
.reviews__viewport { position: relative; }
.reviews__track {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px var(--s-md);
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: var(--r-lg); }

/* Dégradés de bord : indiquent qu'il reste des avis à faire défiler */
.reviews__fade {
  position: absolute;
  top: 0;
  bottom: var(--s-md);
  width: clamp(28px, 5vw, 72px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.reviews__fade--left  { left: 0;  background: linear-gradient(90deg, var(--canvas-soft), transparent); }
.reviews__fade--right { right: 0; background: linear-gradient(270deg, var(--canvas-soft), transparent); }
.reviews__viewport[data-at-start="false"] .reviews__fade--left  { opacity: 1; }
.reviews__viewport[data-at-end="false"]   .reviews__fade--right { opacity: 1; }

.review { flex: 0 0 min(360px, 82%); }
@media (min-width: 768px)  { .review { flex: 0 0 calc((100% - var(--grid-gap)) / 2); } }
@media (min-width: 1200px) { .review { flex: 0 0 calc((100% - var(--grid-gap) * 2) / 3); } }

.review {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  gap: var(--s-md);
  align-content: start;
  padding: 30px 28px 28px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: transform 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
}
/* Halo interne au survol : la carte « s'allume » sans changer de couleur de fond */
.review::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 460ms var(--ease);
  pointer-events: none;
}
.review:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--hairline));
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, 0.95);
}
.review:hover::before { opacity: 1; }

/* Guillemet décoratif */
.review__mark {
  position: absolute;
  top: -4px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 5.25rem;
  line-height: 1;
  font-weight: 600;
  color: color-mix(in srgb, var(--brand) 12%, transparent);
  pointer-events: none;
  user-select: none;
}

.review__head { position: relative; display: flex; align-items: center; gap: 12px; }
.review__avatar {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  background: var(--avatar, var(--surface-raised));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  flex: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 12%, transparent) inset;
}
.review__who { display: grid; gap: 4px; min-width: 0; }
.review__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-body-sm); color: var(--ink); }
.review__g { margin-left: auto; flex: none; width: 20px; height: 20px; }

.review blockquote { position: relative; font-size: var(--fs-body-sm); line-height: 1.68; color: var(--body); }
.review__client {
  position: relative;
  font-size: var(--fs-caption);
  color: var(--faint);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--hairline);
}

/* Contrôles : flèches rondes + pastilles de pagination */
.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-md);
  margin-top: var(--s-lg);
}
.reviews__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  transition: border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease),
              background-color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
}
.reviews__btn:hover:not(:disabled) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  transform: translateY(-2px);
}
.reviews__btn:disabled { opacity: 0.35; cursor: default; }
.reviews__btn svg { width: 18px; height: 18px; }

.reviews__dots { display: flex; align-items: center; gap: 9px; }
.reviews__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  border: 0;
  padding: 0;
  background: var(--hairline-strong);
  transition: width var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
  cursor: pointer;
}
.reviews__dot[aria-current="true"] { width: 26px; background: var(--brand); }

/* Pied de section : la phrase était posée à plat sous les flèches, sans
   hiérarchie et sans cible. On lui donne un titre, une relance et un vrai
   bouton — l'invitation devient une action. Pas de filet de séparation :
   les flèches du carrousel marquent déjà la fin des avis. */
.reviews__foot {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: none;
  margin-top: var(--s-2xl);
  text-align: center;
}
.reviews__foot-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: none;
}
.reviews__foot-sub {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  max-width: 52ch;
}
.reviews__foot-cta { margin-top: var(--s-md); }
.reviews__foot-cta svg { width: 19px; height: 19px; transition: transform var(--dur-micro) var(--ease); }
.reviews__foot-cta:hover svg { transform: translateX(4px); }

/* Lien vers la fiche Google, sous le bloc de note */
.reviews__profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--dur-micro) var(--ease),
              background-color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.reviews__profile svg { width: 15px; height: 15px; color: var(--muted); }
.reviews__profile:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  transform: translateY(-1px);
}
.reviews__profile:hover svg { color: var(--brand); }

@media (max-width: 767px) {
  .reviews__rating { gap: var(--s-lg); padding: 26px 24px; }
  .reviews__rating-sep { width: 100%; height: 1px; align-self: auto; background: var(--hairline); }
  .reviews__foot { display: grid; gap: 10px; justify-items: center; }
  .reviews__foot .link-arrow { margin-left: 0; }
  .review__mark { font-size: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__rating .stars--lg svg { opacity: 1; transform: none; animation: none; }
  .reviews__track { scroll-behavior: auto; }
  .review:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Ressources
   -------------------------------------------------------------------------- */

/* Carte de guide : un article mis en avant, deux en appui */

.guides__head {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  max-width: 900px;
  margin: 0 auto var(--s-2xl);
  text-align: center;
}
.guides__label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.guides__rule {
  display: block;
  width: clamp(24px, 5vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong));
}
.guides__label .guides__rule:last-child { background: linear-gradient(90deg, var(--hairline-strong), transparent); }
.guides__title { max-width: 24ch; }
.guides__title b { font-weight: inherit; color: var(--brand); }
.guides__lede { max-width: 64ch; color: var(--muted); text-wrap: balance; }

.guides__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.guide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: stretch;
  min-height: 250px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--glow, var(--brand)) 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-soft) 92%, transparent);
  box-shadow: 0 0 44px -26px color-mix(in srgb, var(--glow, var(--brand)) 90%, transparent);
  transition: box-shadow 520ms var(--ease), transform 520ms var(--ease);
}
/* Bordure lumineuse par masque : le halo de la maquette, sans image */
.guide::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--glow, var(--brand)) 92%, transparent),
    color-mix(in srgb, var(--glow, var(--brand)) 26%, transparent) 46%,
    color-mix(in srgb, var(--glow, var(--brand)) 70%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.guide:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 62px -20px color-mix(in srgb, var(--glow, var(--brand)) 90%, transparent);
}

.guide--featured {
  grid-row: span 2;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}

.guide__body {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s-md);
  padding: clamp(22px, 2.4vw, 34px);
}
.guide--featured .guide__body { gap: var(--s-lg); padding: clamp(26px, 2.8vw, 44px); }

.guide__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--glow, var(--brand)) 60%, var(--ink));
  background: color-mix(in srgb, var(--glow, var(--brand)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--glow, var(--brand)) 46%, transparent);
}

.guide__title {
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem);
  line-height: 1.28;
  letter-spacing: -0.014em;
}
.guide--featured .guide__title { font-size: clamp(1.375rem, 1rem + 1.15vw, 1.875rem); line-height: 1.22; max-width: 15ch; }
.guide__title b { font-weight: inherit; color: color-mix(in srgb, var(--glow, var(--brand)) 74%, var(--ink)); }
.guide--featured .guide__title b { color: var(--glow, var(--brand)); }

.guide__lede { font-size: var(--fs-body-sm); color: var(--muted); max-width: 42ch; }
.guide--featured .guide__lede { font-size: var(--fs-body); }

.guide__cta {
  --btn-bg: var(--glow, var(--brand));
  --btn-fg: #fff;
  --btn-border: var(--glow, var(--brand));
  box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--glow, var(--brand)) 85%, transparent);
}
.guide__cta:hover {
  --btn-bg: color-mix(in srgb, var(--glow, var(--brand)) 84%, #fff);
  --btn-border: color-mix(in srgb, var(--glow, var(--brand)) 84%, #fff);
  transform: translateY(-2px);
}
.guide--featured .guide__cta { padding: 15px 26px; min-height: 54px; }
.guide__cta svg { width: 18px; height: 18px; transition: transform var(--dur-micro) var(--ease); }
.guide__cta:hover svg { transform: translateX(4px); }

/* Zone visuelle : elle se fond dans la carte par un dégradé latéral */
.guide__media { position: relative; overflow: hidden; }
.guide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface-soft) 0%, transparent 46%);
  pointer-events: none;
  z-index: 2;
}
.guide__media .photo-slot { height: 100%; border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0; }
.guide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.guides__foot { margin-top: var(--s-2xl); text-align: center; max-width: none; }
.guides__foot .btn svg { width: 19px; height: 19px; transition: transform var(--dur-micro) var(--ease); }
.guides__foot .btn:hover svg { transform: translateX(5px); }

@media (max-width: 1023px) {
  .guides__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .guide--featured { grid-row: auto; }
}
@media (max-width: 639px) {
  .guide, .guide--featured { grid-template-columns: minmax(0, 1fr); }
  .guide__media { order: -1; min-height: 170px; }
  .guide__media::after { background: linear-gradient(0deg, var(--surface-soft) 0%, transparent 58%); }
}

@media (prefers-reduced-motion: reduce) {
  .guide:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Présence locale
   -------------------------------------------------------------------------- */

.local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.local__visuals { display: grid; gap: var(--s-md); }
.local__media {
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
}
.local__media img { width: 100%; height: 100%; object-fit: cover; }
.local__media--wide { aspect-ratio: 21 / 9; border-radius: var(--r-xl); }

.local__cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-lg); }
.local__cities a,
.local__cities span {
  padding: 10px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  font-size: var(--fs-body-sm);
  color: var(--body);
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.local__cities a:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-2px); }
.local__cities a[aria-current] { border-color: color-mix(in srgb, var(--brand) 60%, transparent); color: var(--ink); }

.local__address {
  display: grid; gap: 6px;
  margin-top: var(--s-xl);
  padding: var(--s-lg);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid var(--hairline);
  font-size: var(--fs-body-sm);
}
.local__address strong { display: block; font-family: var(--font-display); }
.local__address a { color: var(--brand-ink); font-weight: 600; }

@media (max-width: 899px) { .local { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 4vw, 68px);
  align-items: start;
}

/* Colonne éditoriale ------------------------------------------------------ */

.faq__aside { position: sticky; top: 118px; }
.faq__kicker { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: none; }
.faq__kicker-rule { width: clamp(20px, 4vw, 46px); height: 1px; background: var(--hairline-strong); }
.faq__kicker-text {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.faq__title { max-width: 16ch; }
.faq__title b { font-weight: inherit; color: var(--brand); }
.faq__lede { margin-top: var(--s-lg); max-width: 52ch; color: var(--muted); }

/* Carte de contact : photo, message, bouton, trois réassurances */
.faq__card {
  position: relative;
  margin-top: var(--s-2xl);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 94%, transparent);
  box-shadow: 0 0 52px -28px color-mix(in srgb, var(--brand) 90%, transparent);
}
.faq__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--accent-violet) 80%, transparent) 55%, var(--accent-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}
/* La photo occupe la moitié droite et se fond dans le fond de la carte */
.faq__card-media { position: absolute; inset: 0 0 auto auto; width: 56%; height: 100%; }
.faq__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faq__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface-soft) 0%, color-mix(in srgb, var(--surface-soft) 55%, transparent) 42%, transparent 78%);
}
.faq__card-body {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--s-md);
  width: min(100%, 340px);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) var(--s-lg);
}
.faq__card-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}
.faq__card-icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-full);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}
.faq__card-icon svg { width: 15px; height: 15px; }
.faq__card-title {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.faq__card-title b { font-weight: inherit; color: var(--brand); }
.faq__card-text { font-size: var(--fs-body-sm); color: var(--muted); max-width: 30ch; }
.faq__card-cta svg { width: 18px; height: 18px; transition: transform var(--dur-micro) var(--ease); }
.faq__card-cta:hover svg { transform: translateX(4px); }

.faq__card-points {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.faq__card-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}
.faq__card-points li + li { border-left: 1px solid var(--hairline); }
.faq__card-points svg { width: 20px; height: 20px; flex: none; color: var(--brand); }

/* Accordéon numéroté ------------------------------------------------------ */

.faq__list { display: grid; gap: 14px; }

.faq__item {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 56%, transparent);
  transition: border-color 420ms var(--ease), background-color 420ms var(--ease),
              box-shadow 420ms var(--ease);
}
.faq__item:hover { border-color: color-mix(in srgb, var(--brand) 26%, var(--hairline)); }
.faq__item:has(.faq__question[aria-expanded="true"]) {
  border-color: color-mix(in srgb, var(--brand) 62%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 0 46px -24px color-mix(in srgb, var(--brand) 90%, transparent);
}

.faq__question {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  align-items: center;
  gap: var(--s-md);
  width: 100%;
  padding: 20px 22px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.35;
}
.faq__num {
  display: grid; place-items: center;
  width: 52px; height: 34px;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--hairline-strong);
  transition: color 420ms var(--ease), border-color 420ms var(--ease), background-color 420ms var(--ease);
}
.faq__question[aria-expanded="true"] .faq__num {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.faq__question:hover .faq__label { color: var(--brand-ink); }
.faq__label { transition: color var(--dur-micro) var(--ease); }

/* Bouton + / − rond, à droite */
.faq__question .plus {
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline-strong);
  transition: background-color 420ms var(--ease), border-color 420ms var(--ease), transform 420ms var(--ease);
}
.faq__question .plus::before,
.faq__question .plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.5px;
  translate: -50% -50%;
  border-radius: 2px;
  background: currentColor;
  transition: transform 420ms var(--ease), opacity 420ms var(--ease);
}
.faq__question .plus::after { transform: rotate(90deg); }
.faq__question[aria-expanded="true"] .plus {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
.faq__question[aria-expanded="true"] .plus::after { transform: rotate(0deg); opacity: 0; }
.faq__question:hover .plus { border-color: color-mix(in srgb, var(--brand) 55%, var(--hairline-strong)); }

.faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease); }
.faq__answer > div { overflow: hidden; }
.faq__question[aria-expanded="true"] + .faq__answer { grid-template-rows: 1fr; }
.faq__answer p {
  color: var(--muted);
  font-size: var(--fs-body-sm);
  max-width: 68ch;
  padding: 0 22px 6px 74px;
}
.faq__answer p:last-child { padding-bottom: 22px; }

/* Repères de pied ---------------------------------------------------------- */

.faq__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 0;
  margin-top: var(--s-3xl);
  padding-top: var(--s-2xl);
  border-top: 1px solid var(--hairline);
}
.faq__foot-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px clamp(12px, 2vw, 28px);
}
.faq__foot-item + .faq__foot-item { border-left: 1px solid var(--hairline); }
.faq__foot-icon { color: var(--brand); flex: none; }
.faq__foot-icon svg { width: 26px; height: 26px; }
.faq__foot-item span:last-child { display: grid; gap: 2px; font-size: var(--fs-body-sm); color: var(--muted); }
.faq__foot-item strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); }
.faq__hand {
  font-family: var(--font-hand);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.2;
  color: var(--ink);
  text-align: right;
  max-width: none;
  padding-left: clamp(16px, 2.4vw, 34px);
  transform: rotate(-5deg);
}

@media (max-width: 1279px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__aside { position: static; }
  .faq__title { max-width: 22ch; }
  .faq__foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq__hand { grid-column: 1 / -1; text-align: center; padding: var(--s-lg) 0 0; transform: none; }
}
@media (max-width: 767px) {
  .faq__card-media { position: relative; width: 100%; height: 190px; }
  .faq__card-media::after { background: linear-gradient(0deg, var(--surface-soft) 0%, transparent 72%); }
  .faq__card-body { width: 100%; }
  .faq__card-points { grid-template-columns: minmax(0, 1fr); }
  .faq__card-points li + li { border-left: 0; border-top: 1px solid var(--hairline); }
  .faq__question { grid-template-columns: 44px minmax(0, 1fr) 30px; gap: var(--s-sm); padding: 16px; }
  .faq__num { width: 44px; height: 30px; font-size: 0.75rem; }
  .faq__question .plus { width: 30px; height: 30px; }
  .faq__answer p { padding-inline: 16px; }
  .faq__foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); }
  .faq__foot-item + .faq__foot-item { border-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-md); }
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(34px, 4.5vw, 68px);
  border-radius: var(--r-hero);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--brand) 42%, transparent),
    color-mix(in srgb, var(--accent-violet) 30%, transparent) 45%,
    transparent 70%,
    color-mix(in srgb, var(--accent-blue) 26%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.final-cta__content { position: relative; z-index: 1; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-xl); }
.final-cta__contact {
  display: flex; flex-wrap: wrap; gap: var(--s-lg);
  margin-top: var(--s-xl); padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-body-sm);
}
.final-cta__contact a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.final-cta__contact a:hover { color: var(--brand-ink); }
.final-cta__contact svg { width: 16px; height: 16px; color: var(--brand); }

.final-cta__media {
  position: relative;
  z-index: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
}
.final-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.final-cta__media figcaption {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(5, 13, 24, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: var(--fs-caption);
  z-index: 2;
}
.final-cta__media figcaption strong { display: block; color: #fff; font-size: var(--fs-body-sm); }

@media (max-width: 899px) {
  .final-cta { grid-template-columns: minmax(0, 1fr); }
  .final-cta__media { max-width: 520px; }
}

/* --------------------------------------------------------------------------
   Fil d'Ariane (préparé pour les pages internes)
   -------------------------------------------------------------------------- */

.breadcrumb { padding-block: var(--s-md); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--muted); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--faint); }
.breadcrumb a:hover { color: var(--brand-ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   MOUVEMENTS LIÉS AU SCROLL

   Quatre moments de la page lisent la variable --p publiée par le moteur
   (app.js, bloc 14). Chaque règle retombe sur var(--p, 1), l'état final,
   pour qu'une page sans JavaScript reste juste. --q vaut 1 - p : ce qu'il
   reste à parcourir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Du hero à la grille — les quatre repères
   Au sortir du hero, les repères sont resserrés au centre, comme une seule
   ligne. Ils gagnent leur colonne à mesure que la bande monte : la grille
   se forme sous le regard plutôt que d'apparaître déjà faite.
   -------------------------------------------------------------------------- */

.proof-strip[data-scroll] .proof-item {
  transform:
    translate3d(calc((1.5 - var(--i, 0)) * var(--q) * 52px), calc(var(--q) * 22px), 0)
    scale(calc(1 - 0.07 * var(--q)));
}
/* Les repères des extrémités partent de plus loin : le resserrement se lit. */
.proof-strip[data-scroll] .proof-item:first-child,
.proof-strip[data-scroll] .proof-item:last-child {
  transform:
    translate3d(calc((1.5 - var(--i, 0)) * var(--q) * 62px), calc(var(--q) * 30px), 0)
    scale(calc(1 - 0.09 * var(--q)));
}
/* --------------------------------------------------------------------------
   2. Projet à la une — la maquette se redresse
   La capture arrive légèrement basculée en arrière, puis se met à plat au
   moment où elle occupe le centre de l'écran. Le texte monte à contretemps,
   plus lentement, pour que les deux ne se déplacent pas d'un bloc.
   -------------------------------------------------------------------------- */

.work-hero { perspective: 1200px; }

.work-shot[data-scroll] {
  transform-origin: 50% 88%;
  transform:
    rotateX(calc(var(--q) * 13deg))
    translate3d(0, calc(var(--q) * -14px), 0)
    scale(calc(1 - 0.055 * var(--q)));
}
.work-hero__body[data-scroll] {
  transform: translate3d(0, calc(var(--q) * 38px), 0);
}

/* --------------------------------------------------------------------------
   3. Mosaïque de l'agence — les tuiles rejoignent leur place
   Chaque tuile arrive décalée latéralement, en alternance, et se range dans
   la grille au fil du scroll. Les tuiles étant à des hauteurs différentes,
   elles n'atteignent pas leur place au même moment : le décalage vient de la
   mise en page, pas d'un minuteur.
   -------------------------------------------------------------------------- */

.agency__mosaic .agency__tile[data-scroll] {
  transform:
    translate3d(calc(var(--dx, 0px) * var(--q)), calc(var(--q) * 26px), 0)
    scale(calc(1 - 0.035 * var(--q)));
}
/* La pastille de lieu occupe le premier rang : les tuiles suivent en 2, 3, 4… */
.agency__mosaic .agency__tile[data-scroll]:nth-child(even) { --dx: -42px; }
.agency__mosaic .agency__tile[data-scroll]:nth-child(odd)  { --dx: 42px; }

/* --------------------------------------------------------------------------
   4. Situations clients — le visuel se pose
   Les photos de fond des quatre cartes se dézooment au fil du scroll plutôt
   qu'au moment où la carte apparaît. Le mouvement est lent et continu : il
   donne de la vie à la section sans jamais attirer l'oeil sur lui-même.
   -------------------------------------------------------------------------- */

.situation__bg[data-scroll] img {
  transform: scale(calc(1 + 0.09 * var(--q)));
}

/* --------------------------------------------------------------------------
   5. Sous 1024 px
   Sur mobile, l'écran est court : un mouvement calculé sur la hauteur de
   fenêtre y devient brusque. On garde le zoom des images, on retire les
   déplacements.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .proof-strip[data-scroll] .proof-item,
  .proof-strip[data-scroll] .proof-item:first-child,
  .proof-strip[data-scroll] .proof-item:last-child,
  .work-shot[data-scroll],
  .work-hero__body[data-scroll],
  .agency__mosaic .agency__tile[data-scroll] {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .situation__bg[data-scroll] img { transform: none !important; }
  .proof-strip[data-scroll] .proof-item,
  .proof-strip[data-scroll] .proof-item:first-child,
  .proof-strip[data-scroll] .proof-item:last-child,
  .work-shot[data-scroll],
  .work-hero__body[data-scroll],
  .agency__mosaic .agency__tile[data-scroll] {
    transform: none !important;
  }
}

/* ==========================================================================
   VERSION 25 — page resserrée
   Chapitre « L'agence » (agence + différences + présence locale, méthode,
   outils), Situations sur une ligne, en-tête des réalisations en deux colonnes.
   ========================================================================== */

/* Chapitre : trois sections qui se lisent d'un bloc --------------------- */

.chapter--first { padding-bottom: calc(var(--section-y) * 0.5); }
.chapter:not(.chapter--first) { padding-top: calc(var(--section-y) * 0.5); }
.chapter:not(.chapter--last) { padding-bottom: calc(var(--section-y) * 0.5); }

/* Les huit différences, en liste compacte dans la colonne de l'agence ---- */

.agency__diffs-label {
  margin-top: var(--s-2xl);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.agency__diffs.difference__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.4vw, 36px);
  margin-top: var(--s-sm);
}
.agency__diffs .diff-card {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
}
.agency__diffs .diff-card:hover { transform: none; background: none; }
.agency__diffs .diff-card__icon { width: 38px; height: 38px; }
.agency__diffs .diff-card__icon svg { width: 18px; height: 18px; }
.agency__diffs .diff-card h3 { font-size: 0.975rem; margin-bottom: 2px; }
.agency__diffs .diff-card p { font-size: 0.875rem; line-height: 1.5; }

/* Présence locale, en bandeau sous la mosaïque -------------------------- */

.agency-local {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-top: var(--s-3xl);
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}
.agency-local__title {
  margin-top: var(--s-sm);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  line-height: 1.25;
  max-width: 24ch;
}
.agency-local__intro p:last-child {
  margin-top: var(--s-sm);
  font-size: var(--fs-body-sm);
  color: var(--muted);
}
.agency-local .local__cities { margin-top: 0; }
.agency-local .local__cities a { padding: 8px 14px; }
.agency-local .local__address { margin-top: 0; font-style: normal; }

@media (max-width: 1199px) {
  .agency-local { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .agency-local__intro { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .agency__diffs.difference__grid,
  .agency-local { grid-template-columns: minmax(0, 1fr); }
}

/* Méthode compacte : cinq étapes sur une ligne, sans visuels ------------- */

.method--compact .method__head { margin-bottom: var(--s-xl); }
.method--compact .method__links { top: 2px; }
.method--compact .step__num { align-self: start; margin-bottom: 4px; border-color: var(--canvas); }
@media (max-width: 1023px) {
  .method--compact .method__links { display: none; }
}

/* Situations : les quatre cartes sur une ligne -------------------------- */

@media (min-width: 1200px) {
  .situations__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .situations__grid .situation { min-height: 360px; padding-top: 104px; }
  /* Carte étroite : la pastille remonte à côté de l'icône pour ne pas heurter le lien. */
  .situation__badge--tr,
  .situation__badge--br { top: 24px; right: 20px; bottom: auto; max-width: 62%; }
}

/* Pastilles de résultat : verre sombre plutôt que blanc plein, moins criardes sur le Dark. */
.situation__badge {
  background: color-mix(in srgb, var(--canvas) 62%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Réalisations : en-tête en deux colonnes ------------------------------- */

.works__head--split {
  max-width: none;
  margin: 0 0 clamp(40px, 4vw, 64px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  justify-items: start;
  gap: var(--s-xl) clamp(32px, 5vw, 80px);
  text-align: left;
}
.works__head-side { display: grid; justify-items: start; gap: var(--s-lg); }
.works__head--split .works__intro { max-width: 46ch; }
@media (max-width: 899px) {
  .works__head--split { grid-template-columns: minmax(0, 1fr); }
}

/* Le titre de l'agence collait à son paragraphe */
.agency__intro .agency__title + .t-lead { margin-top: var(--s-xl); }

/* Méthode compacte sur mobile : une liste numérotée plutôt qu'une pile centrée */
@media (max-width: 767px) {
  .method--compact .method__steps { gap: var(--s-lg); }
  .method--compact .step {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    justify-items: start;
    text-align: left;
  }
  .method--compact .step__num { grid-row: 1 / span 2; margin: 0; }
  .method--compact .step__icon { display: none; }
  .method--compact .step h3,
  .method--compact .step p { grid-column: 2; margin-inline: 0; max-width: none; }
}

/* ==========================================================================
   VERSION 26 — EFFETS DE SCROLL
   ========================================================================== */

/* --------------------------------------------------------------------------
   Effet 1 — Le hero s'assemble en site
   Actif seulement si :root porte data-scene (grand écran, fenêtre assez haute,
   mouvement autorisé : décidé dans le <head>, avant le premier rendu).
   Le JavaScript publie --p (0 → 1) sur la traversée de la scène, et, pour
   chaque photo, --tx / --ty / --ts : le déplacement et l'échelle qui la posent
   exactement sur son emplacement dans la page de site.
   Sans data-scene, tout ce bloc est inerte et le hero reste classique.
   -------------------------------------------------------------------------- */

.hero-site,
.hero-site__caption { display: none; }

:root[data-scene] .hero[data-hero-scene] {
  /* Durée de la scène : la hauteur ajoutée au-delà d'un écran */
  --scene-travel: 115vh;
  --t: clamp(0, var(--p, 0) / 0.22, 1);                 /* le texte s'efface   */
  --n: clamp(0, var(--p, 0) / 0.14, 1);                 /* les notes aussi     */
  --m: clamp(0, (var(--p, 0) - 0.2) / 0.4, 1);          /* la page apparaît    */
  --c: clamp(0, (var(--p, 0) - 0.8) / 0.16, 1);         /* la légende conclut  */
  /* Grande page, à la manière de portrait.so : environ 3/4 de la largeur,
     bornée par la hauteur de fenêtre (hauteur ≈ 0,565 × largeur + 141 px). */
  --site-w: min(1240px, 78vw, calc((100vh - 300px) / 0.565));
  height: calc(100vh + var(--scene-travel));
  padding: 0;
  /* clip et non hidden : hidden créerait un conteneur de défilement et
     casserait le position: sticky du pin. */
  overflow: clip;
}
:root[data-scene] .hero[data-hero-scene] .hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 84px;
  overflow: clip;
}
:root[data-scene] .hero[data-hero-scene] .hero__pin > .container { width: 100%; }
:root[data-scene] .hero[data-hero-scene] .hero__stage { min-height: calc(100vh - 120px); }

/* Fenêtres moins hautes : le bloc central se resserre pour tenir dans l'écran */
@media (max-height: 899px) {
  :root[data-scene] .hero[data-hero-scene] .hero__title { font-size: clamp(2.25rem, 1rem + 3.6vw, 3.5rem); }
  :root[data-scene] .hero[data-hero-scene] .hero__lead { font-size: var(--fs-body-lg); margin-top: var(--s-md); }
  :root[data-scene] .hero[data-hero-scene] .hero__search { margin-top: var(--s-lg); }
  :root[data-scene] .hero[data-hero-scene] .hero__actions { margin-top: var(--s-lg); }
}

/* Portables 13 pouces : la fenêtre utile tombe souvent sous 760 px de haut */
@media (max-height: 759px) {
  :root[data-scene] .hero[data-hero-scene] .hero__pin { padding-top: 76px; }
  :root[data-scene] .hero[data-hero-scene] .hero__stage { min-height: calc(100vh - 96px); }
  :root[data-scene] .hero[data-hero-scene] .hero__title { margin-top: var(--s-md); font-size: clamp(2rem, 0.8rem + 3vw, 2.875rem); }
  :root[data-scene] .hero[data-hero-scene] .hero__lead { font-size: var(--fs-body); margin-top: var(--s-sm); }
  :root[data-scene] .hero[data-hero-scene] .hero__search { margin-top: var(--s-md); }
  :root[data-scene] .hero[data-hero-scene] .searchbox { padding-block: 6px; }
  :root[data-scene] .hero[data-hero-scene] .hero__actions { margin-top: var(--s-md); }
}
@media (max-height: 679px) {
  :root[data-scene] .hero[data-hero-scene] .hero__search-caption { display: none; }
  :root[data-scene] .hero[data-hero-scene] .hero__title { font-size: clamp(1.875rem, 0.8rem + 2.6vw, 2.5rem); }
  :root[data-scene] .hero[data-hero-scene] .hero__lead { font-size: 0.9375rem; line-height: 1.5; }
}

/* Écrans bas : la page de site perd sa barre de navigation et les lignes sous
   les vignettes (≈ 70 px de moins en hauteur), ce qui lui permet d'être plus large. */
@media (max-height: 820px) {
  :root[data-scene] .hero[data-hero-scene] { --site-w: min(1240px, 78vw, calc((100vh - 275px) / 0.565)); }
  :root[data-scene] .hero[data-hero-scene] .hero-site__nav,
  :root[data-scene] .hero[data-hero-scene] .hero-site__card .hero-site__line { display: none; }
  :root[data-scene] .hero[data-hero-scene] .hero-site__card .hero-site__slot { margin-bottom: 0; }
}

/* Le texte s'efface en montant */
:root[data-scene] .hero[data-hero-scene] .hero__content {
  opacity: calc(1 - var(--t));
  transform: translateY(calc(var(--t) * -70px)) scale(calc(1 - var(--t) * 0.05));
}
/* Le H1 reste dans la page (lecteurs d'écran, outils SEO) : seul le reste du bloc est masqué */
:root[data-scene] .hero[data-hero-scene].is-built .hero__content { pointer-events: none; }
:root[data-scene] .hero[data-hero-scene].is-built .hero__content > :not(.hero__title) { visibility: hidden; }

:root[data-scene] .hero[data-hero-scene] .hero__stage.is-revealed .hero-note { opacity: calc(1 - var(--n)); }
:root[data-scene] .hero[data-hero-scene].is-live .hero-note { transition: none; }

/* Les photos rejoignent leur emplacement, décalées les unes des autres */
:root[data-scene] .hero[data-hero-scene] .hero-frame {
  --k0: clamp(0, (var(--p, 0) - var(--k-start, 0.1)) / 0.5, 1);
  --k: calc(var(--k0) * var(--k0) * (3 - 2 * var(--k0)));
}
:root[data-scene] .hero[data-hero-scene] .hero-frame--tl { --k-start: 0.08; }
:root[data-scene] .hero[data-hero-scene] .hero-frame--tr { --k-start: 0.13; }
:root[data-scene] .hero[data-hero-scene] .hero-frame--bl { --k-start: 0.18; }
:root[data-scene] .hero[data-hero-scene] .hero-frame--br { --k-start: 0.23; }

:root[data-scene] .hero[data-hero-scene] .hero__stage.is-revealed .hero-frame {
  transform:
    translate3d(
      calc(var(--dx, 0px) * (1 - var(--k)) + var(--tx, 0px) * var(--k)),
      calc(var(--dy, 0px) * (1 - var(--k)) + var(--ty, 0px) * var(--k)),
      0)
    rotate(calc(var(--rot, 0deg) * (1 - var(--k))))
    scale(calc(1 + (var(--ts, 1) - 1) * var(--k)));
  animation-name: frame-float-scene;
}
/* Une fois l'entrée jouée, le transform suit le scroll sans retard */
:root[data-scene] .hero[data-hero-scene].is-live .hero-frame { transition: opacity 900ms var(--ease-out); }
@keyframes frame-float-scene {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-12px * (1 - var(--k, 0))); }
}

/* La page de site */
:root[data-scene] .hero[data-hero-scene] .hero-site {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: var(--site-w);
  translate: -50% -50%;
  opacity: var(--m);
  transform: translateY(calc((1 - var(--m)) * 40px)) scale(calc(0.94 + var(--m) * 0.06));
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--hairline-strong);
  box-shadow:
    0 50px 120px -50px rgba(0, 0, 0, 0.75),
    0 0 90px -30px color-mix(in srgb, var(--brand) 38%, transparent);
  pointer-events: none;
}
/* Mesure : le JavaScript lit les emplacements sans la transformation d'entrée */
:root[data-scene] .hero[data-hero-scene] .hero-site.is-measuring { transform: none; transition: none; }

.hero-site__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.hero-site__dots { display: flex; gap: 6px; }
.hero-site__dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.hero-site__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline: auto;
  padding: 3px 14px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--canvas) 70%, transparent);
  font-size: 0.75rem;
  color: var(--muted);
  translate: -32px 0;
}
.hero-site__url svg { width: 11px; height: 11px; color: var(--accent-green, #3DD68C); }
.hero-site__body { padding: 16px 20px 20px; }
.hero-site__text { padding-left: clamp(0px, 1.5vw, 24px); }
.hero-site__nav { display: flex; align-items: center; gap: 14px; height: 26px; }
.hero-site__logo {
  width: 74px; height: 12px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand), var(--accent-violet));
  opacity: 0.8;
}
.hero-site__links { display: flex; gap: 12px; margin-left: auto; }
.hero-site__links i { width: 36px; height: 6px; border-radius: var(--r-full); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.hero-site__navcta { width: 74px; height: 22px; border-radius: var(--r-full); background: color-mix(in srgb, var(--brand) 85%, transparent); }

.hero-site__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  margin-top: 16px;
}
.hero-site__text { display: grid; gap: 9px; justify-items: start; }
.hero-site__kicker {
  width: 96px; height: 16px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.hero-site__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--site-w, 880px) * 0.037);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-site__title b { font-weight: inherit; color: var(--brand); }
.hero-site__line { display: block; width: 92%; height: 7px; border-radius: var(--r-full); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.hero-site__line--short { width: 58%; }
.hero-site__btn {
  margin-top: 6px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
}
/* Emplacement vide, visible tant que la photo n'est pas arrivée */
.hero-site__slot {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px dashed var(--hairline-strong);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.hero-site__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.hero-site__card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--canvas) 36%, transparent);
}
.hero-site__card .hero-site__slot { border-radius: 8px; margin-bottom: 4px; }

/* Légende manuscrite, dans la page, sous le bouton : elle conclut la scène */
:root[data-scene] .hero[data-hero-scene] .hero-site__caption {
  display: block;
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: calc(var(--site-w, 880px) * 0.02);
  line-height: 1.2;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  opacity: var(--c);
  transform: translateY(calc((1 - var(--c)) * 10px)) rotate(-2deg);
}

/* --------------------------------------------------------------------------
   Effet 2 — Les outils convergent vers DIGICOM-IT
   La carte reçoit --p du moteur (bloc 14) pendant son arrivée à l'écran.
   Chaque pastille part de l'extérieur (--ox / --oy, portés par le HTML) et
   rejoint sa place ; les liens s'allument et leurs pointillés coulent vers
   le centre, où l'icône DIGICOM-IT se pose en dernier.
   Sans JavaScript, --p vaut 1 : la carte est dans son état final.
   -------------------------------------------------------------------------- */

.toolmap__hub {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
}
.toolmap__emblem { display: none; }

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .toolmap[data-scroll] {
    --kh0: clamp(0, (var(--p, 1) - 0.62) / 0.34, 1);
    --kh: calc(var(--kh0) * var(--kh0) * (3 - 2 * var(--kh0)));
  }

  .toolmap[data-scroll] .toolmap__node {
    --k0: clamp(0, (var(--p, 1) - var(--i, 0) * 0.035) / 0.55, 1);
    --k: calc(var(--k0) * var(--k0) * (3 - 2 * var(--k0)));
    opacity: calc(0.08 + 0.92 * var(--k));
    transform:
      translate3d(calc(var(--ox, 0px) * (1 - var(--k))), calc(var(--oy, 0px) * (1 - var(--k))), 0)
      scale(calc(0.82 + 0.18 * var(--k)));
    transition: none;
  }

  /* Liens : ils s'allument avec la convergence, et le flux va vers le centre */
  .toolmap[data-scroll] .toolmap__links path {
    opacity: calc(var(--p, 1) * 0.62);
    transition: none;
    animation-direction: reverse;
  }

  /* Le cercle se resserre autour du bloc central */
  .toolmap[data-scroll]::before { scale: calc(0.82 + 0.18 * var(--p, 1)); }

  /* L'icône du centre se pose en dernier, en pivotant */
  .toolmap[data-scroll] .toolmap__hub {
    opacity: var(--kh);
    transform: rotate(calc((1 - var(--kh)) * -180deg)) scale(calc(0.4 + 0.6 * var(--kh)));
    filter: drop-shadow(0 0 calc(var(--kh) * 14px) color-mix(in srgb, var(--brand) 55%, transparent));
  }

  /* Grande icône en filigrane derrière le bloc central */
  .toolmap__emblem {
    display: block;
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: 0;
    width: min(430px, 46%);
    aspect-ratio: 1;
    translate: -50% -50%;
    opacity: calc(var(--p, 1) * 0.13);
    rotate: calc((1 - var(--p, 1)) * -40deg);
    scale: calc(0.72 + 0.28 * var(--p, 1));
    pointer-events: none;
  }
  :root[data-theme="light"] .toolmap__emblem { opacity: calc(var(--p, 1) * 0.09); }
}

/* En mise en scène, le bandeau de preuves ne remonte presque plus sur le hero :
   il viendrait sinon recouvrir le bas de la page de site assemblée. */
:root[data-scene] .proof-overlap { --proof-lift: 16px; }


/* Titre du hero : apparition d'un bloc (fondu, léger flou, montée), sans
   découpage en mots. Le dégradé de la première ligne (background-clip: text)
   ne s'affiche pas sur des mots animés un par un : ils disparaissaient ou
   apparaissaient rognés pendant le chargement. */
.hero__title[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(8px);
  transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out), filter 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.hero__title[data-reveal].is-revealed { opacity: 1; transform: none; filter: none; }

/* --------------------------------------------------------------------------
   Effet 3 — Notre méthode : les étapes s'allument au scroll
   Mêmes conditions que la scène du hero (:root[data-scene]). La section
   devient plus haute qu'un écran, son contenu reste épinglé ; le JavaScript
   (bloc 17) publie --p et pose is-lit / is-current sur les étapes.
   -------------------------------------------------------------------------- */

.method__rail { display: none; }

:root[data-scene] .method[data-pin-steps] {
  --q: clamp(0, var(--p, 0) / 0.8, 1);
  height: calc(100vh + 130vh);
  padding: 0;
  overflow: clip;
}
:root[data-scene] .method[data-pin-steps] .method__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 84px;
  overflow: clip;
}
:root[data-scene] .method[data-pin-steps] .method__pin > .container { width: 100%; }

/* La ligne remplace les pointillés : elle court sous les pastilles */
:root[data-scene] .method[data-pin-steps] .method__links { display: none; }
:root[data-scene] .method[data-pin-steps] .method__rail {
  display: block;
  position: absolute;
  z-index: 1;
  top: 21px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
  background: var(--hairline-strong);
}
:root[data-scene] .method[data-pin-steps] .method__rail-fill {
  display: block;
  height: 100%;
  width: calc(var(--q) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent-violet), var(--accent-blue));
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 55%, transparent);
}

/* Étapes : en attente, atteintes, en cours */
:root[data-scene] .method[data-pin-steps] .step {
  opacity: 0.3;
  transform: translate3d(0, 10px, 0);
  transition: opacity 520ms var(--ease), transform 620ms var(--ease-out);
}
:root[data-scene] .method[data-pin-steps] .step.is-lit { opacity: 0.72; transform: none; }
:root[data-scene] .method[data-pin-steps] .step.is-current { opacity: 1; }

:root[data-scene] .method[data-pin-steps] .step__num {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  transition: background-color 420ms var(--ease), color 420ms var(--ease),
              box-shadow 420ms var(--ease), transform 520ms var(--ease-out);
}
:root[data-scene] .method[data-pin-steps] .step.is-lit .step__num {
  background: var(--step, var(--brand));
  color: #fff;
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--step, var(--brand)) 90%, transparent);
}
:root[data-scene] .method[data-pin-steps] .step.is-current .step__num { transform: scale(1.14); }

:root[data-scene] .method[data-pin-steps] .step__icon { color: var(--faint); transition: color 420ms var(--ease); }
:root[data-scene] .method[data-pin-steps] .step.is-lit .step__icon { color: var(--step, var(--brand)); }

/* L'étape en cours : un halo et un léger cadre derrière le texte */
:root[data-scene] .method[data-pin-steps] .step::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16px -10px -20px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--step, var(--brand)) 30%, var(--hairline));
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--step, var(--brand)) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 50%, transparent);
  opacity: 0;
  transition: opacity 520ms var(--ease);
  pointer-events: none;
}
:root[data-scene] .method[data-pin-steps] .step.is-current::before { opacity: 1; }
:root[data-scene] .method[data-pin-steps] .step.is-current p { color: var(--body); }

/* Fenêtres basses : le titre se resserre pour que tout tienne à l'écran */
@media (max-height: 759px) {
  :root[data-scene] .method[data-pin-steps] .method__title { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
  :root[data-scene] .method[data-pin-steps] .method__head { margin-bottom: var(--s-lg); gap: var(--s-sm); }
  :root[data-scene] .method[data-pin-steps] .method__lede { font-size: var(--fs-body-sm); }
}
@media (max-height: 699px) {
  :root[data-scene] .method[data-pin-steps] .method__lede { display: none; }
}

/* Fin des expertises : la dernière piste garde sa réserve de défilement (elle
   aligne le décrochage de la pile), mais cet espace est vide. On retire la
   marge basse de la section et on fait remonter la suite d'autant : il reste
   ~88 px entre la dernière carte et la section Situations. La marge négative
   ne change pas la boîte de .poles, donc rien au comportement collant. */
@media (min-width: 1024px) {
  .poles-section { padding-bottom: 0; }
  .poles { margin-bottom: calc(88px - clamp(110px, 16vh, 185px)); }
}

/* Hero en mise en scène : les photos et leurs légendes descendent pour ne plus
   passer sous le header flottant (bas du header ≈ 98 px). Chaque photo bouge
   avec sa légende, et les paires du bas suivent pour ne pas se chevaucher.
   margin-top plutôt que top : offsetTop l'inclut, donc la mesure de la scène
   (bloc 16) reste exacte. */
:root[data-scene] .hero[data-hero-scene] .hero-frame--tl,
:root[data-scene] .hero[data-hero-scene] .hero-note--tl { margin-top: 46px; }
:root[data-scene] .hero[data-hero-scene] .hero-frame--tr,
:root[data-scene] .hero[data-hero-scene] .hero-note--tr { margin-top: 40px; }
:root[data-scene] .hero[data-hero-scene] .hero-frame--bl,
:root[data-scene] .hero[data-hero-scene] .hero-note--bl,
:root[data-scene] .hero[data-hero-scene] .hero-frame--br,
:root[data-scene] .hero[data-hero-scene] .hero-note--br { margin-top: 30px; }


/* ==========================================================================
   VERSION 28 — finitions de la homepage
   ========================================================================== */

/* Ressources : illustrations dessinées à la place des visuels manquants.
   Elles prennent la couleur de la carte (--glow) ; aucun chiffre affiché. */
.guide__media { display: grid; place-items: center; background:
  radial-gradient(70% 70% at 60% 45%, color-mix(in srgb, var(--glow, var(--brand)) 16%, transparent), transparent 70%),
  color-mix(in srgb, var(--surface) 70%, transparent); }
.guide__art { width: min(88%, 340px); height: auto; overflow: visible; }
.guide__art .art-panel { fill: color-mix(in srgb, var(--surface-soft) 92%, transparent); stroke: color-mix(in srgb, var(--glow, var(--brand)) 34%, var(--hairline)); stroke-width: 1.2; }
.guide__art .art-panel--mid { fill: color-mix(in srgb, var(--glow, var(--brand)) 14%, var(--surface-soft)); }
.guide__art .art-line { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.guide__art .art-line--soft { fill: color-mix(in srgb, var(--ink) 12%, transparent); }
.guide__art .art-stroke { stroke: var(--glow, var(--brand)); stroke-width: 3; stroke-linecap: round; }
.guide__art .art-fill { fill: color-mix(in srgb, var(--glow, var(--brand)) 16%, transparent); }
.guide__art .art-dot { fill: var(--glow, var(--brand)); filter: drop-shadow(0 0 6px var(--glow, var(--brand))); }
.guide__art .art-gauge-bg { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 6; stroke-linecap: round; }
.guide__art .art-gauge { stroke: var(--glow, var(--brand)); stroke-width: 6; stroke-linecap: round; }
.guide__art .art-fill-solid { fill: var(--glow, var(--brand)); }
.guide__art .art-fill-solid--soft { fill: color-mix(in srgb, var(--glow, var(--brand)) 45%, transparent); }
.guide__art .art-grid rect { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: var(--hairline); }
.guide__art .art-button { fill: var(--glow, var(--brand)); }
.guide__art .art-cursor { fill: var(--ink); stroke: var(--canvas); stroke-width: 1.5; stroke-linejoin: round; }
.guide__art { transition: transform 700ms var(--ease-out); }
.guide:hover .guide__art { transform: translateY(-4px) scale(1.02); }

/* Outils : 3CX et Microsoft 365, en nom de marque tant que les logos manquent */
.toolmap__node--name .toolmap__name { font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ink); }
.guide--featured .guide__art { width: min(92%, 480px); }

/* Logos d'outils : variante à texte blanc sur le Dark, variante foncée sur le Light */
.toolmap__pill .logo-on-light { display: none; }
:root[data-theme="light"] .toolmap__pill .logo-on-dark { display: none; }
:root[data-theme="light"] .toolmap__pill .logo-on-light { display: block; }

/* Mosaïque allégée : 3 photos + les valeurs, sur une grille 3 × 2 */
.agency__mosaic--simple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1.15fr 1fr;
  aspect-ratio: 3 / 2.25;
}
.agency__mosaic--simple .agency__tile--wide     { grid-column: 1 / span 2; grid-row: 1; }
.agency__mosaic--simple .agency__tile--values   { grid-column: 3; grid-row: 1; }
.agency__mosaic--simple .agency__tile--it       { grid-column: 1; grid-row: 2; }
.agency__mosaic--simple .agency__tile--building { grid-column: 2 / span 2; grid-row: 2; }
@media (max-width: 1023px) {
  .agency__mosaic--simple { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; }
  .agency__mosaic--simple .agency__tile { aspect-ratio: 4 / 3; }
  .agency__mosaic--simple .agency__tile--wide,
  .agency__mosaic--simple .agency__tile--building { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .agency__mosaic--simple .agency__tile--values,
  .agency__mosaic--simple .agency__tile--it { grid-column: auto; grid-row: auto; }
}


/* ==========================================================================
   VERSION 30 — fluidité
   ========================================================================== */

/* Les éléments pilotés par le scroll ne transitionnent plus leur transform.
   Le lissage est fait en JavaScript (bloc 0) ; une transition CSS de 0,8 à
   1,4 s par-dessus relançait le mouvement à chaque cran : effet élastique. */
[data-scroll][data-reveal],
.media-reveal[data-scroll] img,
.situation__bg[data-scroll] img,
.work-shot[data-scroll],
.work-hero__body[data-scroll],
.proof-strip[data-scroll] .proof-item,
.agency__mosaic .agency__tile[data-scroll] {
  transition-property: opacity, filter;
}

/* Halos : le dégradé radial est déjà diffus, le flou n'ajoutait rien à l'œil
   mais coûtait cher à chaque image. */
.halo { filter: none; }

/* Flou d'arrière-plan retiré sur les pastilles qui bougent avec la page (il
   était recalculé à chaque image) ; fond un peu plus opaque à la place. */
.proof-strip { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--surface) 96%, transparent); }
.pole__badge,
.situation__icon,
.situation__badge,
.agency__pin,
.final-cta__media figcaption {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--canvas) 84%, transparent);
}

/* Méthode épinglée : contenu calé sous le header plutôt que centré, pour ne
   pas laisser une demi-hauteur d'écran vide à l'arrivée de la section. */
:root[data-scene] .method[data-pin-steps] .method__pin {
  align-items: flex-start;
  padding-top: calc(84px + 4vh);
}

/* Avis Google : en-tête sur deux colonnes (titre à gauche, note à droite) */
@media (min-width: 1024px) {
  .reviews__head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    margin-bottom: var(--s-2xl);
  }
  .reviews__head .reviews__intro { justify-items: start; text-align: left; margin: 0; max-width: none; }
  .reviews__head .reviews__label .reviews__rule:first-child { display: none; }
  .reviews__head .reviews__title { max-width: 20ch; }
  .reviews__head .reviews__lede { text-wrap: pretty; }
  .reviews__head .reviews__rating { margin: 0; justify-self: end; }
}
@media (min-width: 1024px) {
  .reviews__head .reviews__rating { flex-wrap: nowrap; width: 100%; justify-content: space-around; gap: clamp(16px, 2.4vw, 36px); }
}
.reviews__profile { white-space: nowrap; }

/* Page de site du hero : vrais textes à la place des barres grises.
   Tailles en cqw : proportionnelles à la largeur de la page. */
/* Unités de conteneur : 1cqw = 1 % de la largeur de la page de site. */
.hero-site { container-type: inline-size; }
.hero-site__logo {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; height: auto; background: none; opacity: 1; border-radius: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.477cqw; color: var(--ink);
}
.hero-site__logo i {
  width: 1.818cqw; height: 1.818cqw;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--brand), var(--accent-violet));
}
.hero-site__links { gap: 2.045cqw; }
.hero-site__links span { font-size: 1.307cqw; color: var(--muted); }
.hero-site__navcta {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto;
  padding: 0.568cqw 1.591cqw;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.250cqw; color: #fff;
}
.hero-site__kicker {
  width: auto; height: auto;
  padding: 0.341cqw 1.136cqw;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.193cqw; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--brand) 70%, var(--ink));
}
.hero-site__lead {
  max-width: 34ch;
  font-size: 1.477cqw; line-height: 1.5; color: var(--muted);
}
.hero-site__btns { display: flex; flex-wrap: wrap; gap: 0.909cqw; margin-top: 0.455cqw; }
.hero-site__btns .hero-site__btn { margin-top: 0; font-size: 1.307cqw; padding: 0.795cqw 1.591cqw; }
.hero-site__btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.hero-site__card-title {
  display: block; margin-top: 0.227cqw;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.420cqw; color: var(--ink);
}
.hero-site__card-link { display: block; font-size: 1.193cqw; color: var(--brand); }
/* Écrans bas : on garde la navigation (elle rend la page crédible) mais on
   retire le lien sous les vignettes. */
@media (max-height: 820px) {
  :root[data-scene] .hero[data-hero-scene] .hero-site__nav { display: flex; }
  :root[data-scene] .hero[data-hero-scene] .hero-site__card-link { display: none; }
}

/* Méthode épinglée, v31 : c'est le bloc de contenu qui reste collé sous le
   header (et non un écran entier). Une piste vide (.method__runway) sous le
   bloc donne la distance de défilement pendant laquelle les étapes s'allument.
   Plus de demi-écran vide avant ni après la section. */
.method__runway { display: none; }
:root[data-scene] .method[data-pin-steps] {
  height: auto;
  padding: 40px 0 calc(var(--section-y) * 0.5);
}
:root[data-scene] .method[data-pin-steps] .method__pin {
  position: sticky;
  top: 104px;
  height: auto;
  display: block;
  padding-top: 0;
  overflow: visible;
}
:root[data-scene] .method[data-pin-steps] .method__runway { display: block; height: 110vh; }

/* ==========================================================================
   VERSION 34 — cartes « Situations clients » : la photo passe au second plan
   La photo n'est plus le fond de la carte : c'est un encadré en haut à droite
   qui se fond vers la gauche et vers le bas. La citation passe devant son bord
   estompé, le reste de la carte est un fond sombre uni : lecture plus nette.
   ========================================================================== */

.situation {
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 26px;
  /* Bordure dégradée fuchsia → violet → transparent, fond opaque */
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 92%, var(--canvas)), color-mix(in srgb, var(--surface) 92%, var(--canvas))) padding-box,
    linear-gradient(150deg,
      color-mix(in srgb, var(--brand) 70%, transparent) 0%,
      color-mix(in srgb, var(--accent-violet) 45%, transparent) 38%,
      color-mix(in srgb, var(--accent-violet) 12%, transparent) 70%,
      color-mix(in srgb, var(--brand) 30%, transparent) 100%) border-box;
}
.situation:hover { border-color: transparent; }

/* Plus de voile sur toute la carte : la photo est déjà cantonnée à son encadré */
.situation::before { display: none; }

.situation__bg {
  inset: 18px 18px auto auto;
  width: 60%;
  aspect-ratio: 4 / 3;
  max-height: 58%;
  border-radius: 14px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(180deg, #000 55%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.8;
}
.situation__bg img { object-position: 60% 35%; }

/* Icône en haut à gauche, étiquette juste à côté (plus sur la photo à droite) */
.situation__icon { position: relative; top: auto; left: auto; flex: none; }
.situation__head { display: flex; align-items: center; gap: 12px; }
.situation__badge,
.situation__badge--tr,
.situation__badge--br {
  position: absolute;
  top: 31px;
  left: 86px;
  right: auto;
  bottom: auto;
  max-width: calc(100% - 110px);
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 500;
}
.situation__badge svg { display: none; }

.situation__quote {
  margin-top: clamp(40px, 5vw, 64px);
  font-size: clamp(1.25rem, 0.95rem + 0.55vw, 1.5rem);
  line-height: 1.2;
  max-width: 13ch;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--canvas) 70%, transparent);
}
.situation__answer { max-width: 32ch; }
.situation__link { margin-top: auto; padding-top: 10px; }

/* Pictogramme discret en bas à droite */
.situation__deco {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: -1;
  width: 52px;
  height: 52px;
  color: color-mix(in srgb, var(--accent-violet) 30%, transparent);
  pointer-events: none;
}
.situation__deco svg { width: 100%; height: 100%; }

@media (min-width: 1200px) {
  .situations__grid .situation { min-height: 400px; padding-top: 26px; }
}
@media (max-width: 767px) {
  .situation { padding: 22px; }
  .situation__badge, .situation__badge--tr, .situation__badge--br { top: 27px; left: 80px; }
}
/* Réglages après capture */
.situation__bg { width: 66%; aspect-ratio: 1 / 0.82; max-height: 60%; }
.situation__quote { margin-top: 28px; max-width: none; padding-right: 8%; }
.situation__badge,
.situation__badge--tr,
.situation__badge--br { font-size: 0.75rem; padding: 7px 12px; white-space: nowrap; }
.situation__deco { width: 44px; height: 44px; color: color-mix(in srgb, var(--accent-violet) 16%, transparent); }
/* La citation ne chevauche que la partie estompée de la photo */
.situation__bg {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 45%),
    linear-gradient(180deg, #000 40%, transparent 96%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 45%),
    linear-gradient(180deg, #000 40%, transparent 96%);
}
.situation__quote { margin-top: 72px; max-width: 88%; padding-right: 0; }
@media (min-width: 1200px) {
  .situations__grid .situation { min-height: 380px; }
}
.pole__count { white-space: nowrap; flex: none; }

/* Situations : l'icône DIGICOM-IT remplace les portraits dans la pastille équipe */
.situations__aside-mark {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--hairline-strong);
}
.situations__aside-mark img { width: 30px; height: 30px; }

/* ==========================================================================
   VERSION 37 — Projet à la une : étude de cas STERE (résultats + témoignage)
   ========================================================================== */
.work-hero__body { gap: var(--s-md); }
.work-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 4px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.work-hero__stats > div {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface) 92%, var(--canvas));
}
.work-hero__stats dt {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--brand), var(--accent-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.work-hero__stats dd { margin: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }
.work-hero__quote {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--brand) 70%, transparent);
}
.work-hero__quote p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--body); font-style: italic; max-width: 46ch; }
.work-hero__quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.work-hero__desc { font-size: var(--fs-body-sm); }

/* Légende placée sous sa photo : la flèche est au-dessus du texte et pointe vers la photo */
.hero-note--up svg { display: inline-block; margin-bottom: 2px; }

/* Légende « Des conseils… » : calée juste sous sa photo, quelle que soit la
   hauteur de l'écran (haut de la photo à 52 % + hauteur de la photo en 4:3). */
@media (min-width: 1200px) {
  .hero-note--br { top: calc(52% + var(--frame-w-sm, 246px) * 0.75 + 6px); }
}
@media (min-width: 1200px) {
  .hero-note--br { top: calc(52% + var(--frame-w-sm, 246px) * 0.75 + 14px); }
}
@media (min-width: 1200px) and (max-height: 759px) {
  .hero-note--br { top: calc(52% + var(--frame-w-sm, 246px) * 0.75 + 2px); }
}
@media (min-width: 1200px) and (max-height: 759px) {
  .hero-note--br { top: calc(52% + var(--frame-w-sm, 246px) * 0.75 + 7px); }
}

/* v39 : vignettes du faux site avec un court texte (ce que DIGICOM-IT apporte) */
.hero-site__card-text { display: block; font-size: 1.08cqw; line-height: 1.45; color: var(--muted); }
.hero-site__caption { max-width: none; }

/* Avis : on peut attraper la piste à la souris (app.js, bloc 23) */
@media (hover: hover) and (pointer: fine) {
  .reviews__track { cursor: grab; }
  .reviews__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .reviews__track.is-dragging * { pointer-events: none; }
}

/* v40 : section Ressources de l'accueil, les 4 parcours du guide reliés par une ligne */
.guide-paths {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap);
  margin-top: var(--s-2xl);
}
.guide-paths::before {
  content: ""; position: absolute; top: 21px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent-blue), var(--accent-violet), color-mix(in srgb, var(--accent-blue) 60%, var(--accent-violet)));
  opacity: 0.55;
}
.guide-path {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 58px 22px 22px; margin-top: 21px;
  border-radius: var(--r-panel); border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  transition: border-color 400ms var(--ease), transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.guide-path:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--glow) 55%, var(--hairline));
  box-shadow: 0 28px 60px -36px color-mix(in srgb, var(--glow) 90%, transparent);
}
.guide-path__num {
  position: absolute; top: -21px; left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  background: var(--canvas-soft, var(--canvas)); border: 2px solid var(--glow);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--glow) 14%, transparent);
}
.guide-path__art {
  display: grid; place-items: center; aspect-ratio: 16 / 9; margin: -34px -8px 4px;
  border-radius: var(--r-lg);
  background: radial-gradient(70% 70% at 60% 45%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 70%);
}
.guide-path__art .guide__art { width: 86%; }
.guide-path:hover .guide__art { transform: translateY(-4px) scale(1.02); }
.guide-path__entry { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--glow); }
.guide-path__title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.guide-path__steps { display: grid; gap: 6px; counter-reset: etape; }
.guide-path__steps li { counter-increment: etape; position: relative; padding-left: 24px; font-size: var(--fs-body-sm); color: var(--body); }
.guide-path__steps li::before { content: counter(etape); position: absolute; left: 0; top: 1px; font-size: 0.75rem; font-weight: 600; color: var(--glow); }
.guide-path__steps .guide-path__more { color: var(--muted); }
.guide-path__steps .guide-path__more::before { content: "+"; }
.guide-path__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline);
  font-size: var(--fs-caption); color: var(--muted);
  background: linear-gradient(90deg, var(--glow) var(--progress, 0%), transparent var(--progress, 0%)) top / 100% 2px no-repeat;
}
.guide-path.is-started .guide-path__meta { color: var(--ink); font-weight: 600; }
.guide-path__cta {
  justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--glow) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--glow) 45%, transparent); color: var(--ink);
}
.guide-path__cta:hover { background: var(--glow); color: #fff; }
.guide-path__cta svg { width: 16px; height: 16px; }
@media (max-width: 1199px) {
  .guide-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--grid-gap) + 21px); }
  .guide-paths::before { display: none; }
}
@media (max-width: 639px) {
  .guide-paths { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .guide-paths::before { display: block; top: 21px; bottom: 21px; left: 20px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--brand), var(--accent-blue), var(--accent-violet)); }
  .guide-path__num { left: -30px; top: 16px; translate: -50% 0; }
  .guide-path { padding-top: 22px; margin-top: 0; }
  .guide-path__art { display: none; }
}
/* v40 : les vignettes ont maintenant un texte : la page de site est un peu plus
   haute. On réduit légèrement sa largeur pour qu'elle reste au-dessus du bandeau
   de réassurance (rapport hauteur/largeur 0,565 -> 0,64). */
:root[data-scene] .hero[data-hero-scene] { --site-w: min(1240px, 78vw, calc((100vh - 300px) / 0.64)); }
@media (max-height: 820px) {
  :root[data-scene] .hero[data-hero-scene] { --site-w: min(1240px, 78vw, calc((100vh - 275px) / 0.64)); }
}

/* v40 : photo de Jean-Noël Saunois sous son témoignage (étude de cas STERE) */
.work-hero__quote cite { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.work-hero__quote cite img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px color-mix(in srgb, var(--brand) 60%, transparent);
}
.work-hero__quote cite span { display: grid; gap: 1px; line-height: 1.3; }
.work-hero__quote cite small { font-size: 0.75rem; font-weight: 400; color: var(--muted); }

/* v40 : blocs des prestations (pôles) en version claire, plus lisibles */
:root[data-theme="light"] .poles > .pole:nth-of-type(2) { --pole-accent-ink: #1E5BC6 !important; }
:root[data-theme="light"] .poles > .pole:nth-of-type(3) { --pole-accent-ink: #5A3FCC !important; }
:root[data-theme="light"] .pole__card {
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--pole-accent) 7%, #fff) 0%,
      #fff 45%,
      color-mix(in srgb, var(--pole-accent) 4%, #fff) 100%);
  border-color: color-mix(in srgb, var(--pole-accent) 26%, var(--hairline));
  /* Pas d'assombrissement ni d'ombre noire sous la carte qui arrive : sur fond
     clair, la pile doit rester lumineuse */
  box-shadow: 0 24px 60px -30px rgba(20, 30, 60, 0.28), 0 -14px 30px -18px rgba(20, 30, 60, 0.18);
  filter: brightness(calc(1 - 0.06 * var(--cover, 0)));
}
:root[data-theme="light"] .pole__card::after { opacity: 0.45; }
:root[data-theme="light"] .pole__promise { color: var(--ink); }
:root[data-theme="light"] .pole__desc { color: var(--body); }
:root[data-theme="light"] .pole__count { color: var(--muted); border-color: var(--hairline-strong); }
:root[data-theme="light"] .pole__service {
  background: #fff;
  border-color: color-mix(in srgb, var(--pole-accent) 22%, var(--hairline-strong));
  color: var(--ink);
}
:root[data-theme="light"] .pole__badge {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(20, 30, 60, 0.08);
  color: var(--body);
  box-shadow: 0 16px 34px -18px rgba(20, 30, 60, 0.45);
}
:root[data-theme="light"] .pole__badge strong { color: var(--ink); }
:root[data-theme="light"] .pole__media::after {
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.35) 18%, transparent 42%),
    linear-gradient(200deg, color-mix(in srgb, var(--pole-accent) 10%, transparent), transparent 60%);
}

/* v40 : étude de cas STERE plus compacte, textes sur toute la largeur de la colonne
   (alignés sur le tableau des chiffres) */
.work-hero__desc { max-width: none; }
.work-hero__quote p { max-width: none; }

/* Pied de page : réseaux sociaux */
.footer-social { display: flex; gap: 10px; margin-top: var(--s-md); }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); color: var(--body); transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.footer-social a:hover { border-color: var(--brand); color: var(--brand); }
.footer-social svg { width: 18px; height: 18px; }

/* Légende de la photo « Dites-nous ce qui coince » : toujours sombre, pour
   que le texte blanc reste lisible en thème clair comme en thème sombre. */
.final-cta__media figcaption { background: rgba(5, 13, 24, 0.74); }

/* Avis : le carrousel coupe ce qui dépasse. On lui donne de la marge en bas
   (compensée par une marge négative) pour que l'ombre au survol ne soit plus
   tranchée net. */
.reviews__track { padding-bottom: 56px; margin-bottom: -40px; padding-top: 12px; margin-top: -6px; }
.reviews__fade { bottom: 56px; }
:root[data-theme="light"] .review:hover { box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.32); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .review:hover { box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.32); }
}