/* ============================================================
   Awilix v4 - composants
   Port exact du design system awilix-website : flat absolu
   (aucune ombre, aucune bordure de carte), 3 niveaux de gris,
   dalles sombres (nav pill / footer), un accent violet, radius
   concentriques 28/18/12, Satoshi 600 pour les titres.
   Deux modes (clair/sombre) via les variables de tokens.css.
   ============================================================ */

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--fg-strong);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--slab);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container--mid    { max-width: var(--container-mid); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--surface);
  color: var(--fg);
}
.section--tight { padding-block: clamp(3.25rem, 5vw, 5rem); }

.surface--dark.section > .container { position: relative; z-index: 1; }

/* ---------- Titres de section : le rituel eyebrow -> h2 -> sous-titre ---------- */

.section-head {
  display: grid;
  gap: 1.375rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
  max-width: 46rem;
}

.section-head--center {
  max-width: 42rem;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}
.section-head--center .section-sub { margin-inline: auto; }

/* Variante en deux temps : titre a gauche, lien a droite (blog). */
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: end;
}
.section-head__main { display: grid; gap: 1.125rem; }
.section-head__link {
  justify-self: end;
  align-self: end;
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

/* Badge eyebrow : pill grise, ouvre chaque en-tete de section. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--fg-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
}
.section-head--center .eyebrow,
.hero__body .eyebrow { justify-self: center; }

.section-title { font-size: var(--fs-h2); }
.section-sub {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 30rem;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1;
  padding: 0.875rem 1.375rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

/* LE bouton du site : violet plein de la marque, texte blanc, aucune
   ombre, aucun lift, identique dans les deux modes et sur toutes les
   surfaces (comme sur le site produit). Les actions secondaires sont
   des liens texte violets ou un bouton neutre gris (--ghost). */
.btn--primary,
.btn--accent {
  background: var(--brand-purple);
  color: #fff;
}
.btn--primary:hover,
.btn--accent:hover { background: var(--brand-purple-dark); }

.btn--ghost {
  background: var(--chip);
  color: var(--fg-strong);
}
.btn--ghost:hover { background: var(--card-2); }
.surface--sand .btn--ghost:hover,
html.dark .btn--ghost:hover { background: var(--line-strong); }

.btn--sm { padding: 0.625rem 1rem; border-radius: var(--radius); }
.btn--lg { padding: 1.0625rem 1.75rem; font-size: 0.9375rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 550;
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.link-arrow:hover { color: var(--accent-hover); }
.link-arrow svg { transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   Header : pill sombre flottante centree (desktop), bloc sombre
   colle aux bords (mobile) - le noir n'existe qu'ici et au
   footer. Radius concentriques : pill 18, CTA interne 12.
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.75rem 1rem 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.header-shell {
  pointer-events: auto;
  position: relative;
  width: fit-content;
  max-width: 100%;
  background: var(--slab);
  color: #fff;
  border-radius: 18px;
}

.header-inner {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.4375rem 0.375rem 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/* Flip 3D du logo : un tour par periode de 8s, longue pause. */
.brand__logo {
  display: inline-block;
  perspective: 600px;
  flex: none;
}
.brand__logo img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  animation: aw-logo-spin 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-style: preserve-3d;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: -1px;
  white-space: nowrap;
}
.brand__dot { color: rgba(255, 255, 255, 0.5); }

.header-sep {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.15);
  margin-inline: 0.5rem;
  flex: none;
}

.nav { display: flex; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 0.125rem; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.5625rem 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__caret { transition: transform 0.25s var(--ease); opacity: 0.7; }
.nav__item--has-menu[data-open="true"] .nav__caret { transform: rotate(180deg); }

/* Sous-menus : dalle sombre detachee sous la pill, meme langage. */
.submenu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 224px;
  padding: 0.4375rem;
  background: var(--slab);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav__item--has-menu:hover .submenu,
.nav__item--has-menu[data-open="true"] .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Pont invisible : le pointeur peut traverser l'ecart entre la pill
   et le sous-menu sans le refermer. */
.submenu::before {
  content: "";
  position: absolute;
  inset: -0.75rem 0 auto 0;
  height: 0.75rem;
}
.submenu__list { display: grid; gap: 1px; }
.submenu--wide .submenu__list { grid-template-columns: repeat(2, minmax(148px, 1fr)); }
.submenu__list a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-sm);
  border-radius: 9px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.submenu__list a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 2rem;
  flex: none;
}

/* Bascule clair/sombre : icone pilotee en CSS via html.dark. */
/* Selecteur de langue : visible seulement quand la page a une jumelle traduite. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
}
.lang-switch__item {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.lang-switch__item:hover { color: #fff; }
.lang-switch__item.is-active {
  color: #0b0b0d;
  background: var(--accent, #c8b6ff);
}
.mobile-nav__lang {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav__lang .lang-switch__item {
  min-width: 34px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 900px) {
  .header-actions .lang-switch { display: none; }
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.theme-toggle:hover { color: #fff; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: block; }

.header-cta {
  flex: none;
  border-radius: 12px;
  padding: 0.625rem 0.875rem;
  font-size: var(--fs-sm);
}

.burger {
  display: none;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.7);
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile : il s'ouvre DANS le meme bloc sombre, sous la rangee. */
.mobile-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0.75rem;
  padding: 0.375rem 0 0.875rem;
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { display: grid; }
.mobile-nav__list a,
.mobile-nav__toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.625rem 0.25rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.mobile-nav__list a:hover,
.mobile-nav__toggle:hover { color: #fff; }
.mobile-nav__sub { display: none; padding: 0 0 0.5rem 0.875rem; }
.mobile-nav__sub.is-open { display: grid; }
.mobile-nav__sub a {
  padding: 0.4375rem 0.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}
.mobile-nav .btn { display: none; }

/* ============================================================
   Hero : rituel du site produit - badge social proof, h1 avec
   mot-cle en degrade, lead, CTA + lien texte, rangee de trust.
   ============================================================ */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

.hero__glow { display: none; }

.hero__body {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
}

/* Badge social proof : avatars clients + texte shimmer, dans un chip. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.875rem 0.25rem 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--chip);
}
.hero__badge--text-only { padding-inline: 0.875rem; }
.hero__badge-avatars { display: flex; }
.hero__badge-avatars img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--chip);
  background: var(--card-win);
  object-fit: cover;
}
.hero__badge-avatars img + img { margin-left: -0.375rem; }

/* Shimmer du badge : balayage lumineux du texte toutes les 14s. */
.aw-text-shimmer {
  font-size: var(--fs-eyebrow);
  font-weight: 550;
  color: transparent;
  background-color: var(--fg-muted);
  background-image: linear-gradient(110deg, transparent 40%, #c9c6d4 50%, transparent 60%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: aw-text-shimmer 14s linear infinite;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin-block: 1.5rem 1.125rem;
}
/* Le mot cle du titre porte le degrade de marque : l'unique entorse
   au flat absolu du design system. En bloc, comme sur le produit. */
.hero__accent {
  display: block;
  padding-bottom: 0.1em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 33rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem 1.5rem;
  margin-top: 2.25rem;
}

/* Rangee de trust items : check violet + texte gris tertiaire 13px. */
.trust-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 1.375rem;
  margin-top: 1.625rem;
}
.trust-items li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-xs);
  color: var(--faint);
}
.trust-items li svg { width: 12px; height: 12px; color: var(--accent); flex: none; }
.trust-items__label { color: var(--faint); }

/* Bande partenaires : label + logos en filigrane, tres discrets. */
.hero__partners {
  position: relative;
  z-index: 2;
  margin-top: clamp(3.25rem, 6vw, 5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
}
.hero__partners-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
}
.hero__partners-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.25rem;
}
.hero__partners-list img {
  display: block;
  width: auto;
  filter: brightness(0);
  opacity: 0.4;
  transition: opacity var(--dur) var(--ease);
}
html.dark .hero__partners-list img { filter: brightness(0) invert(1); opacity: 0.45; }
.hero__partners-list li:hover img { opacity: 0.75; }

/* Stats de preuve (pages internes) */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.stat__value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-strong);
}
.stat__value em {
  font-style: normal;
  color: var(--accent);
}
.stat__label {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: 0.4375rem;
  letter-spacing: 0.01em;
}

/* Socle social des heros internes : avis Google + logos, centres. */
.hero .hero__social {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  margin-top: clamp(2.75rem, 5vw, 4rem);
}
.hero__reviews { min-height: 24px; }
.hero__trusted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
}
.hero__trusted-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
}
.hero__trusted-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.25rem;
}
.hero__trusted-list img {
  display: block;
  width: auto;
  filter: brightness(0);
  opacity: 0.4;
  transition: opacity var(--dur) var(--ease);
}
html.dark .hero__trusted-list img { filter: brightness(0) invert(1); opacity: 0.45; }
.hero__trusted-list li:hover img { opacity: 0.75; }

/* ============================================================
   Visuels
   ============================================================ */

.media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--card);
  border: 1px solid transparent;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

/* ============================================================
   Bande de libelles (moteurs de reponse) : texte en filigrane
   ============================================================ */

.strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.75rem, 5vw, 4rem);
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}
.strip__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--faint);
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.625rem clamp(1.25rem, 3vw, 2.5rem);
}
.strip__list li {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--faint);
}

/* ============================================================
   Constat : colonnes editoriales separees par des filets fins
   (pas de cards) - plus calme, plus "journal".
   ============================================================ */

.statement-title__accent { color: var(--accent); }

.statement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.statement-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.statement-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: 0.5rem 2rem;
  background: none;
  border-radius: 0;
}
.statement-card:first-child { padding-left: 0; }
.statement-card:last-child { padding-right: 0; }
.statement-card + .statement-card { border-left: 1px solid var(--line); }
/* Variante 2 colonnes (4 cellules) : filets verticaux entre colonnes,
   filet horizontal entre les rangees. */
.statement-grid--2 .statement-card:nth-child(odd) { border-left: 0; padding-left: 0; }
.statement-grid--2 .statement-card:nth-child(even) { padding-right: 0; }
.statement-grid--2 .statement-card { padding-bottom: 1.75rem; }
.statement-grid--2 .statement-card:nth-child(n+3) {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}
.statement-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.statement-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg-strong);
}
.statement-card p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--fg-muted);
}
/* Les anciennes cartes accent deviennent des cellules comme les autres. */
.statement-card--accent { background: none; }
.statement-card--accent .statement-card__num { opacity: 1; }
.statement-card__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.375rem;
  font-weight: 550;
  font-size: var(--fs-xs);
  color: var(--accent);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.statement-card__link:hover { color: var(--accent-hover); gap: 0.65rem; }

/* ============================================================
   Cartes (piliers, services) : panneaux flat gris, icone violette
   nue, hover = changement de fond, jamais de lift.
   ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 1rem;
}
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.625rem 1.625rem 1.375rem;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--ease);
}
a.card:hover { background: var(--card-2); }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.card__icon {
  display: inline-flex;
  color: var(--accent);
  flex: none;
}
.card__icon svg { width: 22px; height: 22px; }
.card__num {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.card__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.card__text {
  font-size: 0.875rem;
  color: var(--fg-muted);
  line-height: 1.6;
}
.card__foot {
  margin-top: auto;
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--accent);
}
.card__foot svg { transition: transform 0.25s var(--ease); }
a.card:hover .card__foot svg { transform: translateX(4px); }

/* ============================================================
   Tuiles secteurs : meme langage que les cartes
   ============================================================ */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.tile {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: 1.625rem;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--ease);
}
.tile:hover { background: var(--card-2); }
.tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.tile__icon {
  display: inline-flex;
  color: var(--accent);
  flex: none;
}
.tile__icon svg { width: 22px; height: 22px; }
.tile__arrow {
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.tile:hover .tile__arrow { opacity: 1; transform: none; }
.tile__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.tile__text { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.6; }

/* ============================================================
   Bloc split (visuel + texte)
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5.5vw, 5rem);
  align-items: center;
}
.split__body { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.split__body p {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 34rem;
}
.split__body p:first-of-type {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg);
}
.split__actions { margin-top: 0.75rem; }

/* ============================================================
   Duo : chapeau de section a gauche (colle au defilement),
   contenu long a droite. Sert au process.
   ============================================================ */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.duo__aside {
  display: grid;
  gap: 1.375rem;
  align-content: start;
  justify-items: start;
  position: sticky;
  top: calc(var(--header-h) + 2.5rem);
}

/* ============================================================
   Process : etapes en panneaux gris, libelle d'etape en filigrane
   (le rituel des step-cards du produit)
   ============================================================ */

.steps { display: grid; gap: 0.75rem; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 1.75rem;
  background: var(--card);
  border-radius: var(--radius-lg);
  transition: background-color 0.25s var(--ease);
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--faint);
  min-width: 1.5rem;
  padding-top: 0.1875rem;
}
.step__body { display: grid; gap: 0.375rem; }
.step__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.step__text { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.6; }

/* ============================================================
   Panneau : section encartee dans un grand bloc arrondi
   (la bande jaune), pose sur la surface de la page.
   ============================================================ */

.panel {
  border-radius: var(--radius-xl);
  padding: clamp(2.25rem, 5vw, 4.25rem);
  background: var(--surface);
  color: var(--fg);
}

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.band__title { font-size: var(--fs-h2); }
.band__title span { display: block; }
.band__title span:last-child { color: var(--accent); }
.band__body { display: grid; gap: 1.75rem; justify-items: start; }
.band__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--chip);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.chip svg { color: var(--accent); flex: none; }

/* ============================================================
   Temoignages : cards flat gris (rituel Reviews du produit)
   ============================================================ */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.quote {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.375rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
}
.quote__text { font-size: 0.875rem; line-height: 1.65; color: var(--fg); }
.quote__who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
}
.quote__avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--card-2);
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  flex: none;
}
.quote__id { display: grid; gap: 0.0625rem; }
.quote__name { font-weight: 600; font-size: var(--fs-xs); color: var(--fg-strong); }
.quote__role { font-size: 0.75rem; color: var(--fg-muted); }

/* Widget d'avis Google sous la grille */
.reviews-embed {
  margin-top: 2.5rem;
  min-height: 100px;
}

/* ============================================================
   FAQ : accordeon a filets fins pose sur un panneau gris 28px,
   chevron a gauche (rituel du produit)
   ============================================================ */

.faq {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 0.5rem clamp(1.25rem, 3vw, 2rem);
}
.faq__item { background: none; }
.faq__item + .faq__item { border-top: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-strong);
  transition: color 0.2s var(--ease);
}
.faq__q:hover { color: var(--accent); }
/* Chevron : deux traits en croix -> caret bas, pivote a l'ouverture. */
.faq__sign {
  position: relative;
  order: -1;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--fg-muted);
  transition: transform 0.28s var(--ease);
}
.faq__sign::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.faq__sign::after { content: none; }
.faq__q[aria-expanded="true"] .faq__sign { transform: rotate(180deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 0 1.375rem 1.75rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
  line-height: 1.68;
}

/* ============================================================
   Blog
   ============================================================ */

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.post-card {
  display: grid;
  gap: 0.875rem;
  align-content: start;
  text-decoration: none;
  color: inherit;
}
.post-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid transparent;
}
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.post-card:hover .post-card__thumb img { transform: scale(1.045); }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.post-card__tag {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.post-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s var(--ease);
}
.post-card:hover .post-card__title { color: var(--accent); }

/* ============================================================
   CTA final : texte a gauche avec la rangee de vignettes
   inclinees + etoiles, bouton a droite (rituel FinalCta).
   La variante centree (pages internes) reste disponible.
   ============================================================ */

.final-cta { text-align: center; padding-bottom: clamp(4.5rem, 8vw, 8rem); }
.final-cta__title {
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
}
.final-cta__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 1.125rem auto 2.25rem;
  max-width: 30rem;
}
.final-cta__micro {
  margin-top: 0.875rem;
  font-size: var(--fs-eyebrow);
  color: var(--faint);
}

/* Variante split (home) */
.final-cta--split { text-align: left; }
.final-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.final-split__left { max-width: 36rem; display: grid; justify-items: start; }
.final-split__left .final-cta__text { margin: 1.125rem 0 0; }
.final-split__right {
  display: grid;
  justify-items: center;
  gap: 1rem;
}
.final-split__right .trust-items { margin-top: 0; }

/* Vignettes clients inclinees + etoiles */
.final-logos { margin-top: 2rem; }
.final-logos__row { display: flex; align-items: center; gap: 0.75rem; }
.final-logos__chips { display: flex; }
.final-logos__chips span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid var(--surface);
  background: var(--chip);
  overflow: hidden;
}
.final-logos__chips span + span { margin-left: -0.625rem; }
.final-logos__chips span:nth-child(odd)  { transform: rotate(-5deg); }
.final-logos__chips span:nth-child(even) { transform: rotate(5deg); }
.final-logos__chips img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: cover;
}
.final-logos__stars { display: inline-flex; gap: 2px; }
.final-logos__stars svg { width: 14px; height: 14px; color: var(--brand-star); fill: var(--brand-star); }
.final-logos__caption {
  margin-top: 0.625rem;
  font-size: var(--fs-eyebrow);
  color: var(--faint);
}

/* ============================================================
   Footer "dalle sombre remontante" : bloc slab aux coins
   superieurs arrondis 28px, insere dans le blanc avec un
   retrait lateral - le miroir inverse de la nav pill.
   ============================================================ */

.site-footer {
  background: var(--surface);
  padding: 0 clamp(0rem, 5vw, 6rem);
}
.site-footer .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  background: var(--slab);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem) 2rem;
}
@media (max-width: 640px) {
  .site-footer { padding: 0; }
  .site-footer .container { border-radius: 0; }
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-top: clamp(3rem, 5vw, 4rem);
}
.footer-about { display: grid; gap: 1rem; align-content: start; justify-items: start; max-width: 22rem; }
.footer-about .brand { padding: 0; }
.footer-about p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}
.footer-about .link-arrow {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  font-size: var(--fs-sm);
  transition: color 0.15s var(--ease);
}
.footer-about .link-arrow:hover { color: #fff; }
.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: 0.625rem; }
.footer-col a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.footer-col a:hover { color: #fff; }

.footer-bar {
  display: grid;
  justify-items: center;
  gap: 1.125rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.footer-social a:hover { color: #fff; background: rgba(255, 255, 255, 0.15); }
.footer-social svg { width: 16px; height: 16px; }
.footer-copy { font-size: var(--fs-eyebrow); color: rgba(255, 255, 255, 0.4); }

/* ============================================================
   Apparition au defilement (easing + blur signature du produit)
   ============================================================ */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), filter 0.5s var(--ease);
}
.js .reveal--blur { filter: blur(6px); }
.js .reveal.is-revealed { opacity: 1; transform: none; filter: blur(0); }
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
.js .reveal[data-delay="4"] { transition-delay: 0.32s; }
.js .reveal[data-delay="5"] { transition-delay: 0.4s; }

/* ---------- Micro-animations signature ---------- */

@keyframes aw-logo-spin {
  0% { transform: rotateY(0); }
  12% { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes aw-text-shimmer {
  0% { background-position: 200% 0; }
  35% { background-position: -200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Tableau comparatif (pages services)
   ============================================================ */

.compare {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare__row {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.15fr;
  align-items: stretch;
}
.compare__row + .compare__row { border-top: 1px solid var(--line); }
.compare__aspect {
  display: flex;
  align-items: center;
  padding: 1.125rem 1.5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--fg-strong);
}
.compare__col-label {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.compare__row--head { background: var(--card-2); }
.compare__row--head .compare__aspect {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.compare__cell {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.5rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.compare__cell .icon { flex: none; }
.compare__cell--old { color: var(--fg-muted); }
.compare__cell--old .icon { opacity: 0.5; }
.compare__col-label--win,
.compare__cell--win { background: var(--accent-soft); }
.compare__col-label--win { color: var(--accent); }
.compare__cell--win { color: var(--fg-strong); font-weight: 550; }
.compare__cell--win .icon { color: var(--accent); }

/* ============================================================
   SERP showcase : la carte de resultats Google du client qui
   grimpe vers le #1. Rendu type "capture d'ecran claire",
   volontairement identique dans les deux modes.
   ============================================================ */

.serp-show {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.serp-show > * { min-width: 0; }

.serp-steps { list-style: none; margin: 1.6rem 0 0; padding: 0; position: relative; }
.serp-steps::before {
  content: ""; position: absolute; left: 13px; top: 16px; bottom: 16px;
  border-left: 1px dashed var(--line-strong);
}
.serp-steps li { position: relative; display: flex; gap: 1rem; padding: 0.75rem 0; }
.serp-steps__num {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  font-size: 0.74rem; font-weight: 700;
  position: relative; z-index: 1;
}
.serp-steps h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; margin: 0 0 0.15rem; color: var(--fg-strong); }
.serp-steps p { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.55; }

.serp-shot {
  background: #ffffff;
  color: #131318;
  border: 1px solid #e7e3ee;
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-body);
}
html.dark .serp-shot { border-color: rgba(255, 255, 255, 0.14); }
.serp-shot__chrome {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 1rem;
  background: #f6f5f9;
  border-bottom: 1px solid #e7e3ee;
}
.serp-shot__dots { display: flex; gap: 5px; }
.serp-shot__dots span { width: 9px; height: 9px; border-radius: 50%; background: #d8d2e4; }
.serp-shot__url {
  flex: 1; min-width: 0;
  background: #ffffff;
  border: 1px solid #e7e3ee;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  color: #63636e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.serp-shot__search {
  display: flex; align-items: center; gap: 0.65rem;
  margin: 1rem 1.15rem 0.35rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid #d8d2e4;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(23, 23, 28, 0.06);
  font-size: 0.92rem; font-weight: 500;
}
.serp-shot__search .icon { color: var(--brand-purple); flex: none; }
.serp-shot__body { padding: 0.8rem 1.15rem 1.25rem; display: grid; gap: 0.7rem; }

.serp-r { position: relative; border-radius: var(--radius); padding: 0.7rem 0.85rem; }
.serp-r__meta { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.3rem; }
.serp-r__fav {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #ececf1; color: #63636e;
  font-size: 0.72rem; font-weight: 700; flex: none;
}
.serp-r__site { font-size: 0.78rem; line-height: 1.25; color: #63636e; }
.serp-r__site strong { display: block; color: #131318; font-weight: 500; }
.serp-r__title { font-size: 0.98rem; font-weight: 700; line-height: 1.3; color: #2f3a8f; margin: 0 0 0.25rem; }
.serp-r__snippet { font-size: 0.82rem; line-height: 1.5; color: #63636e; margin: 0; }
.serp-r--dim { opacity: 0.62; }

.serp-r--you {
  background: #f6f1ff;
  border: 1px solid var(--brand-purple);
}
.serp-r--you .serp-r__fav { background: var(--brand-purple); color: #ffffff; }
.serp-r--you .serp-r__title { color: var(--brand-purple); }
.serp-r__tag {
  position: absolute; top: -11px; right: 12px;
  background: var(--brand-purple); color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.16rem 0.7rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}
.serp-r__pos {
  position: absolute; top: 50%; left: -14px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: #131318; color: #ffffff;
  font-size: 0.72rem; font-weight: 700;
}
.serp-r--you .serp-r__pos { background: var(--brand-purple); }

.serp-r__rich { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.35rem; font-size: 0.78rem; color: #63636e; }
.serp-r__stars { display: inline-flex; gap: 1px; color: #f0a92e; }
.serp-r__stars svg { width: 13px; height: 13px; }

.serp-r--ghost {
  border: 1px dashed #c9c2d8;
  background: #f6f5f9;
  opacity: 0.6;
}
.serp-r--ghost .serp-r__pos { background: #9b97a8; }
.serp-r__ghostlabel {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #9b97a8; margin: 0 0 0.2rem;
}

.serp-climb { position: relative; }
.serp-climb__rail {
  position: absolute; left: -34px; top: 185px; bottom: 46px;
  width: 20px; pointer-events: none;
}
.serp-climb__rail::before {
  content: ""; position: absolute; left: 9px; top: 12px; bottom: 0;
  border-left: 2px dashed var(--accent);
  opacity: 0.8;
}
.serp-climb__rail::after {
  content: ""; position: absolute; left: 3px; top: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--accent);
}

@media (max-width: 980px) {
  .serp-show { grid-template-columns: 1fr; }
  .serp-show__mock { order: -1; }
  .serp-climb__rail { display: none; }
}
@media (max-width: 680px) {
  .serp-r__pos { left: -8px; width: 24px; height: 24px; font-size: 0.68rem; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: 2.75rem; }
  .split__body p { max-width: 46rem; }
  .duo { grid-template-columns: 1fr; gap: 2.5rem; }
  .duo__aside { position: static; }
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; max-width: 34rem; }
}

@media (max-width: 900px) {
  .nav, .header-cta--desktop { display: none; }
  .burger { display: flex; }
  .site-header { padding: 1rem 1rem 0; }
  .header-shell { width: 100%; border-radius: 16px; }
  .header-inner { padding: 0.5rem 0.5rem 0.5rem 0.375rem; justify-content: space-between; }
  .header-sep { display: none; }
  .header-actions { margin-left: 0; gap: 0.5rem; }
  .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .section-head--split {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.25rem;
  }
  .section-head__link { justify-self: start; padding-bottom: 0; }
  .statement-grid,
  .statement-grid--2 { grid-template-columns: 1fr; }
  .statement-card { padding: 1.5rem 0; }
  .statement-card:first-child { padding-top: 0.25rem; }
  .statement-card:last-child { padding-bottom: 0.25rem; }
  .statement-card + .statement-card { border-left: 0; border-top: 1px solid var(--line); }
  .band { grid-template-columns: 1fr; gap: 1.75rem; }
  .compare__row { grid-template-columns: 1fr 1fr; }
  .compare__aspect { grid-column: 1 / -1; padding-bottom: 0.375rem; }
  .compare__row--head .compare__aspect { display: none; }
  .compare__cell { padding-top: 0.25rem; }
  .final-split { flex-direction: column; align-items: flex-start; }
  .final-split__right { justify-items: start; }
}

@media (min-width: 901px) {
  .header-cta--mobile { display: none; }
}

@media (max-width: 680px) {
  :root { --header-h: 72px; }
  .quote-grid, .posts, .tile-grid { grid-template-columns: 1fr; }
  .hero__proof { gap: 1.5rem 2rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .strip__list { gap: 0.5rem 1.25rem; }
  .panel { padding: 1.75rem 1.5rem; }
  .faq { padding-inline: 1.125rem; }
}

@media (max-width: 460px) {
  .hero__actions .btn { width: 100%; }
  .step { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.375rem 1.5rem; }
  .step__num { padding-top: 0; }
  .compare__row { grid-template-columns: 1fr; }
  .compare__row--head { display: none; }
  .compare__cell--old { padding-bottom: 0.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Blog : listing + article
   ============================================================ */

.hero--blog .hero__body { max-width: 46rem; }

/* --- En-tete d'article --- */
/* En-tete resserre: on garde le degagement sous le header translucide,
   on supprime le reste pour amener le contenu plus haut. */
.post-hero {
  padding-top: calc(var(--header-h) + clamp(1.25rem, 2.5vw, 2rem));
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.post-hero__body { display: grid; gap: 1.25rem; justify-items: start; }
.post-hero__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.post-hero__crumbs a { color: inherit; text-decoration: none; opacity: 0.75; }
.post-hero__crumbs a:hover { opacity: 1; }
.post-hero__title {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  /* Pas d'equilibrage des lignes ici : le titre remplit toute la largeur
     du conteneur, jusqu'au-dessus de la colonne laterale. */
  text-wrap: wrap;
}
.post-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* --- Corps d'article --- */
.post-body { padding-top: clamp(1.25rem, 2vw, 1.75rem); }
.post-featured { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.post-featured img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 20px);
  display: block;
}

.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.125em; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display, inherit);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-top: 2em; }
.prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); margin-top: 1.75em; }
.prose h4 { font-size: 1.0625rem; margin-top: 1.5em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { text-decoration: none; }
.prose ul, .prose ol { padding-left: 1.375rem; display: grid; gap: 0.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul ul, .prose ol ul { list-style: circle; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-style: italic;
  color: inherit;
}
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg, 20px); }
.prose figure { margin: 1.75em 0; }
.prose figcaption { font-size: 0.875rem; opacity: 0.7; margin-top: 0.5em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.25em 0; }
.prose code {
  font-size: 0.9em;
  background: var(--chip);
  padding: 0.125em 0.375em;
  border-radius: 6px;
}
.prose pre {
  overflow-x: auto;
  background: var(--card);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg, 20px);
}
.prose pre code { background: none; padding: 0; }

/* Tableaux WP : pleine largeur, defilement horizontal sur mobile */
.prose figure.wp-block-table { overflow-x: auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  vertical-align: top;
  min-width: 8rem;
}
.prose thead th, .prose table tr:first-child strong { color: inherit; }
.prose thead th, .prose tbody tr:first-child:not(:only-child) td strong { font-weight: 600; }
.prose thead th { background: var(--card); }
.prose tbody tr:nth-child(even) td { background: var(--surface-2); }

@media (max-width: 700px) {
  .prose { font-size: 1rem; }
  .prose table { font-size: 0.875rem; }
}

/* --- Hub blog : titres de section cliquables + pied de section --- */
.section-title__link { text-decoration: none; transition: color 0.25s var(--ease); }
.section-title__link:hover { color: var(--accent); }
.section-foot { margin-top: clamp(2rem, 4vw, 3rem); display: flex; justify-content: center; }

/* --- Article : deux colonnes (contenu large + colonne laterale compacte) --- */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
}
.post-main { max-width: 760px; min-width: 0; }
.post-aside { min-width: 0; }
.post-aside__inner {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  display: grid;
  gap: 1.25rem;
}

/* Carte formulaire d'analyse gratuite */
.lead-card {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.25rem 1.5rem;
}
.lead-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
}
.lead-card__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-muted);
}
.lead-form { margin-top: 1rem; display: grid; gap: 0.625rem; }
.lead-form input {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fg);
  background: var(--card-win);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.75rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.lead-form input::placeholder { color: var(--fg-muted); opacity: 0.75; }
.lead-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lead-form__btn { width: 100%; justify-content: center; font-size: 0.9375rem; padding: 0.75rem 1rem; }
.lead-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lead-form__error {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #b3403a;
}

/* Etat de confirmation : la carte se transforme sur place apres l'envoi */
.lead-card__success { text-align: center; padding: 0.625rem 0 0.25rem; }
.lead-card__success svg { color: var(--accent); }
.lead-card__success-title {
  margin-top: 0.625rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
}
.lead-card__success-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Variante large : le meme formulaire en rappel de bas d'article. Les CTA du
   corps de texte ancrent dessus (#lead-form-bottom) pour faire descendre le
   lecteur au lieu de le renvoyer vers la colonne laterale. */
.lead-card--wide {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.625rem 1.5rem 1.75rem;
  text-align: left;
}
.lead-card--wide .lead-card__title { font-size: 1.375rem; }
.lead-card--wide .lead-card__text { font-size: 0.9375rem; }
.lead-form--wide { margin-top: 1.125rem; }
@media (min-width: 640px) {
  .lead-form--wide { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .lead-form--wide .lead-form__btn,
  .lead-form--wide .lead-form__error { grid-column: 1 / -1; }
}
.post-cta__alt { margin-top: 1.75rem; font-size: 0.9375rem; }
.post-cta__alt .link-arrow { text-decoration: none; }

/* Blocs lateraux : categories + articles les plus lus */
.aside-block {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.aside-block__title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.aside-list { margin-top: 0.75rem; display: grid; }
.aside-list li + li { border-top: 1px solid var(--line); }
.aside-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.aside-list a:hover { color: var(--accent); }
.aside-list__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--chip);
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.5rem;
}
.aside-list--posts a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.5625rem 0;
}

/* Bandeau de conversion injecte au tiers du contenu de l'article */
.prose .post-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 2.25em 0;
  padding: 1.25rem 1.375rem;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
}
.post-banner__copy { flex: 1 1 18rem; min-width: 0; }
.post-banner__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
}
.post-banner__text { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.5; color: var(--fg-muted); }
.prose .post-banner__btn { text-decoration: none; color: #fff; flex: 0 0 auto; white-space: nowrap; }

/* Responsive : la colonne passe sous l'article */
@media (max-width: 980px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-main { max-width: 100%; }
  .post-aside__inner { position: static; }
  .lead-card, .aside-block { max-width: 480px; }
}

/* ============ Auteur : byline dans le hero article + page auteur ============ */
.post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .65rem; }
.post-hero__author {
  display: inline-flex; align-items: center; gap: .5rem;
  color: inherit; text-decoration: none; font-weight: 600;
}
.post-hero__author img { border-radius: 50%; display: block; }
.post-hero__author:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-hero__catlink {
  display: inline-flex; align-items: center;
  padding: .28rem .75rem; border-radius: 999px;
  background: var(--chip);
  color: var(--fg-muted);
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
.post-hero__catlink:hover { color: var(--accent); }

.author-hero { display: flex; align-items: flex-start; gap: 1.75rem; }
.author-hero__avatar { border-radius: 50%; flex-shrink: 0; }
.author-hero__role {
  margin: .35rem 0 0; font-size: .95rem; font-weight: 600;
  color: var(--accent);
}
.author-hero .hero__lead { margin-top: .9rem; }
.author-hero__links {
  list-style: none; display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 1.1rem 0 0; padding: 0;
}
.author-hero__links a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid transparent;
  background: var(--chip);
  color: var(--fg-strong); text-decoration: none;
  font-size: .9rem; font-weight: 500; line-height: 1;
  transition: background-color .18s ease, color .18s ease;
}
.author-hero__links a:hover,
.author-hero__links a:focus-visible {
  background: var(--card-2);
  color: var(--accent);
}
.author-hero__links svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (max-width: 640px) {
  .author-hero { flex-direction: column; gap: 1.1rem; }
  .author-hero__avatar { width: 88px; height: 88px; }
}

/* ============================================================
   Pages industries : vision, tagline d'etape, cartes avant/apres
   ============================================================ */
.vision { display: grid; gap: 1.1rem; max-width: 46rem; }
.vision p { font-size: var(--fs-md, 1.0625rem); line-height: 1.75; color: var(--fg-muted); }
.vision p:first-child { color: var(--fg-strong); }

.step__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.ba-card {
  display: grid;
  align-content: start;
  gap: 1.125rem;
  padding: 1.75rem 1.625rem;
  background: var(--card);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur) var(--ease);
}
.ba-card:hover { background: var(--card-2); }
.ba-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
}
.ba-card__cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.875rem;
  align-items: start;
}
.ba-card__arrow { color: var(--accent); margin-top: 1.9rem; display: inline-flex; }
.ba-block { display: grid; gap: 0.3125rem; align-content: start; }
.ba-block__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.ba-block--after .ba-block__tag { color: var(--accent); }
.ba-block__value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.ba-block--after .ba-block__value { color: var(--accent); }
.ba-block__label { font-size: var(--fs-xs); color: var(--fg-muted); }
.ba-block__note { font-size: var(--fs-xs); color: var(--fg-muted); font-style: italic; line-height: 1.5; margin-top: 0.375rem; }
.ba-block__note--win {
  font-style: normal;
  color: var(--fg-strong);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
}
.ba-block__note--win svg { color: var(--accent); flex-shrink: 0; margin-top: 0.15rem; }
.ba-card__duration {
  justify-self: start;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
}
@media (max-width: 1080px) {
  .ba-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 640px) {
  .ba-card__cols { grid-template-columns: 1fr; }
  .ba-card__arrow { transform: rotate(90deg); margin: 0; justify-self: center; }
}

/* ============================================================
   Etudes de cas : hero temoignage, screenshot, croissance,
   equipe, grille du hub
   ============================================================ */
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.case-quote {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 0.875rem;
  max-width: 40rem;
}
.hero--service .case-quote { margin-inline: auto; text-align: left; }
.case-quote blockquote {
  margin: 0;
  font-size: var(--fs-md, 1.0625rem);
  line-height: 1.65;
  color: var(--fg-strong);
}
.case-quote figcaption { display: flex; align-items: center; gap: 0.75rem; }
.case-quote__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.case-quote__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-2);
  color: var(--fg-muted);
  font-weight: 600;
  font-size: var(--fs-xs);
}
.case-quote__id { display: grid; line-height: 1.35; }
.case-quote__name { font-weight: 600; color: var(--fg-strong); font-size: var(--fs-sm); }
.case-quote__role { font-size: var(--fs-xs); color: var(--fg-muted); }

.case-shot { max-width: 420px; width: 100%; justify-self: center; }

.growth {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  display: grid;
  gap: 0;
  margin-top: 1rem;
}
.growth__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--fg-strong);
  padding-bottom: 0.875rem;
}
.growth__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9375rem 0;
  border-top: 1px solid var(--line);
}
.growth__label { font-size: var(--fs-sm); color: var(--fg-muted); }
.growth__values { display: inline-flex; align-items: baseline; gap: 0.625rem; }
.growth__before { font-size: var(--fs-sm); color: var(--fg-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.growth__arrow { color: var(--accent); display: inline-flex; align-self: center; }
.growth__after {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--fg-strong);
}
.growth__delta {
  justify-self: end;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
}

.squad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.squad__member { margin: 0; display: grid; justify-items: center; gap: 0.75rem; text-align: center; }
.squad__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--card);
}
.squad__member figcaption { display: grid; gap: 0.125rem; }
.squad__name { font-weight: 600; color: var(--fg-strong); }
.squad__role { font-size: var(--fs-xs); color: var(--fg-muted); }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.hub-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--card);
  transition: opacity 0.2s var(--ease);
}
.hub-card:hover { opacity: 0.92; }
.hub-card img { display: block; width: 100%; height: auto; }

.hero__actions--center { justify-content: center; }

@media (max-width: 1080px) {
  .card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 800px) {
  .hub-grid { grid-template-columns: 1fr; }
  .growth { padding: 1.375rem 1.25rem; }
  .growth__row { grid-template-columns: 1fr auto; }
  .growth__label { grid-column: 1 / -1; padding-bottom: 0.125rem; }
}

/* ============ Page About : section founder ============ */
.founder {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.founder__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}
.founder__body .eyebrow { margin-bottom: 0.5rem; }
.founder__role {
  font-weight: 600;
  color: var(--accent);
  margin: 0.375rem 0 1rem;
}
.founder__text { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 0.875rem; }
.founder__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.founder__links .btn { display: inline-flex; align-items: center; gap: 0.5rem; }

@media (max-width: 800px) {
  .founder { grid-template-columns: 1fr; gap: 1.75rem; }
  .founder__photo { max-width: 240px; }
}

/* ============ Pages legales : hero compact + prose ============ */
.hero--legal { padding-top: calc(var(--header-h) + 2.5rem); }
.hero--legal .hero__body { max-width: 46rem; }
.hero__title--sm { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.hero__lead--sm { font-size: var(--fs-sm); }

.legal { max-width: 46rem; }
.legal h2 {
  font-size: var(--fs-h4);
  color: var(--fg-strong);
  margin: 2.25rem 0 0.75rem;
}
.legal p { color: var(--fg-muted); margin-bottom: 0.875rem; }
.legal ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.875rem;
  display: grid;
  gap: 0.375rem;
}
.legal ul li {
  position: relative;
  padding-left: 1.125rem;
  color: var(--fg-muted);
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.legal strong { color: var(--fg-strong); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ============ Page Contact : formulaire dans le hero, RDV en section dessous ============ */

.hero--contact { padding-bottom: 4.5rem; }

.contact-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 3.4rem;
  align-items: center;
}
.contact-hero__text { text-align: left; }
.contact-hero__text .hero__title { margin-top: 1.25rem; }
.contact-hero__text .hero__lead { margin-inline: 0; }
.contact-hero__text .hero__actions { justify-content: flex-start; margin-top: 1.8rem; }

.contact-benefits {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: .55rem 1.6rem;
}
.contact-benefits li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.contact-benefits .icon { color: var(--accent); flex: none; }

.contact-points {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.8rem;
}
.contact-point {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--fg-strong);
  text-decoration: none;
}
.contact-point .icon { color: var(--accent); }
a.contact-point:hover { color: var(--accent); }

.contact-card {
  background: var(--card);
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: 2rem 2rem 2.2rem;
}
.contact-card__head { margin-bottom: 1.4rem; }
.contact-card__title {
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--fg-strong);
  margin: .55rem 0 0;
}
.contact-card__text {
  margin: .6rem 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
/* Section prise de RDV : carte centree, cible du scroll #call. Le picker
   (static/js/rdv.js) charge les creneaux reels via le serveur du site. */
.contact-booking { scroll-margin-top: 70px; }
.contact-booking .contact-card--booking {
  max-width: 46rem;
  margin-inline: auto;
}

/* Embed Calendly (solution provisoire, en attendant le moteur de creneaux
   maison). Hauteur fixe : le widget inline de Calendly ne se redimensionne
   pas tout seul, et il lui faut de la place pour afficher calendrier +
   creneaux cote a cote sur grand ecran. */
.booking-embed {
  max-width: 70rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.booking-embed .calendly-inline-widget {
  min-width: 320px;
  width: 100%;
  height: 800px;
}
/* L'iframe Calendly porte sa propre marge interne haute : sur grand ecran on
   la compense pour ne pas cumuler deux blancs sous le chapeau de section. */
@media (min-width: 1025px) {
  .booking-embed { margin-top: -3rem; }
}
@media (max-width: 1024px) {
  .booking-embed .calendly-inline-widget { height: 1020px; }
}
@media (max-width: 640px) {
  .booking-embed .calendly-inline-widget { height: 1000px; }
}
.contact-booking .hero__proof { margin-top: 3.2rem; }

.rdv { display: grid; gap: 1.25rem; }
.rdv__loading, .rdv__msg { font-size: var(--fs-sm); color: var(--fg-muted); }
.rdv__msg--error { color: #b3423f; }
.rdv__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--fg-strong);
}
.rdv__tz { font-size: var(--fs-xs); color: var(--faint); margin-top: -0.5rem; }
.rdv__days {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: none;
}
.rdv__days::-webkit-scrollbar { display: none; }
.rdv-day {
  flex: none;
  display: grid;
  justify-items: center;
  gap: .125rem;
  min-width: 74px;
  padding: .625rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--card-win);
  font: inherit;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.rdv-day__dow { font-size: var(--fs-xs); color: var(--fg-muted); }
.rdv-day__date { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-strong); }
.rdv-day:hover { background: var(--card-2); }
.rdv-day.is-selected { background: var(--accent); }
.rdv-day.is-selected .rdv-day__dow { color: rgba(255, 255, 255, 0.7); }
.rdv-day.is-selected .rdv-day__date { color: #fff; }
.rdv__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .5rem;
}
.rdv-slot {
  padding: .625rem .25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--card-win);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-strong);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.rdv-slot:hover { background: var(--accent-soft); color: var(--accent); }
.rdv-slot.is-selected { background: var(--accent); color: #fff; }
.rdv__formats { display: flex; gap: .5rem; flex-wrap: wrap; }
.rdv-format {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5625rem .875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--card-win);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-strong);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.rdv-format.is-selected { background: var(--accent); color: #fff; }
.rdv__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.rdv__fields .field { grid-column: span 2; }
.rdv__fields .field--half { grid-column: span 1; }
.rdv__confirm { width: 100%; margin-top: .25rem; }
.rdv__success { text-align: center; padding: 1.5rem .5rem 1rem; display: grid; justify-items: center; gap: .625rem; }
.rdv__success-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.rdv__success h3 { font-size: 1.3rem; color: var(--fg-strong); }
.rdv__success p { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 30rem; }
.rdv__success .btn { margin-top: .5rem; }
@media (max-width: 560px) {
  .rdv__fields { grid-template-columns: 1fr; }
  .rdv__fields .field--half { grid-column: span 1; }
}

.contact-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
}
.field { display: grid; gap: .4rem; grid-column: span 2; }
.field--half { grid-column: span 1; }
.field__label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fg-strong);
}
.field__req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-strong);
  background: var(--card-win);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 104px; }
.field select:invalid { color: var(--fg-muted); }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-muted); opacity: .75; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Honeypot : sorti du flux et invisible, mais present dans le DOM pour les bots */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form__submit { width: 100%; margin-top: 1.3rem; }
.contact-form__error {
  margin: .9rem 0 0;
  font-size: var(--fs-sm);
  color: #b3423f;
}
.contact-form__error a { color: inherit; font-weight: 600; }

.contact-form__success { text-align: center; padding: 2.4rem 1rem 2.6rem; }
.contact-form__success-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.contact-form__success h3 {
  font-size: 1.3rem;
  color: var(--fg-strong);
  margin: 0 0 .6rem;
}
.contact-form__success p {
  margin: 0 auto;
  max-width: 28rem;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

@media (max-width: 980px) {
  .contact-hero { grid-template-columns: 1fr; gap: 2.6rem; }
  .contact-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-card { padding: 1.4rem 1.2rem 1.6rem; }
  .field--half { grid-column: span 2; }
}

/* ============================================================
   Pages ville : maillage entre villes (bloc automatique en bas de page)
   ============================================================ */
.cities__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.cities__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1rem; border-radius: var(--radius-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 500; color: var(--fg-strong); text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cities__link:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.cities__link svg { color: var(--accent); flex: none; }

/* ============================================================
   Gabarit comparatif et alternatives (compare.html)
   ============================================================ */
.verdict {
  margin-top: 2.25rem; display: grid; gap: 0.5rem; justify-items: start; text-align: left;
  padding: 1.25rem 1.5rem; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--accent-line); max-width: 46rem;
}
.verdict__label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.verdict__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-strong); margin: 0; }

.disclosure {
  font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-muted);
  border-left: 2px solid var(--accent-line); padding-left: 0.875rem;
  max-width: 46rem; margin: -1.5rem auto 2.5rem;
}

.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: none; }
.rank__item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem;
  padding: 1.625rem 1.75rem; background: var(--card); border: 1px solid transparent; border-radius: var(--radius-lg);
}
.rank__item--win { background: var(--card-win); border-color: var(--accent-line); box-shadow: var(--shadow-pop); }
.rank__pos {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  color: var(--faint); min-width: 2.25rem; padding-top: 0.2rem;
}
.rank__item--win .rank__pos { color: var(--accent); }
.rank__body { display: grid; gap: 0.875rem; min-width: 0; }
.rank__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.rank__name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.rank__tag {
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent);
}
.rank__tagline { color: var(--fg-muted); line-height: 1.6; margin: 0; }
.rank__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.rank__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: var(--fs-sm); line-height: 1.5; }
.rank__list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.rank__list svg { flex: none; margin-top: 0.25rem; }
.rank__list--pros svg { color: var(--brand-success); }
.rank__list--cons svg { color: var(--fg-muted); opacity: 0.7; }
.rank__list-title {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); margin: 0 0 0.5rem;
}
.rank__facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--fs-sm); color: var(--fg-muted);
  border-top: 1px solid var(--line); padding-top: 0.875rem;
}
.rank__facts strong { color: var(--fg-strong); font-weight: 600; }
.rank__cta { justify-self: start; }
@media (max-width: 720px) {
  .rank__item { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.375rem 1.25rem; }
  .rank__cols { grid-template-columns: 1fr; }
}

.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); }
.cmp table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.cmp th, .cmp td { padding: 0.875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.cmp thead th {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); background: var(--card-2); white-space: nowrap;
}
.cmp tbody th { font-weight: 600; color: var(--fg-strong); background: var(--card); position: sticky; left: 0; z-index: 1; min-width: 10.5rem; }
.cmp thead th:first-child { position: sticky; left: 0; z-index: 2; }
.cmp .cmp--win { background: var(--accent-soft); color: var(--fg-strong); font-weight: 550; }
.cmp thead .cmp--win { color: var(--accent); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

.ref { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 3rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--card); border-radius: var(--radius-xl); }
.ref__name { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 0.625rem; }
.ref__summary { color: var(--fg-muted); line-height: 1.65; margin: 0 0 1.25rem; }
.ref__cols { display: grid; gap: 1.25rem; align-content: start; }
@media (max-width: 860px) { .ref { grid-template-columns: 1fr; } }

/* ============================================================
   Articles de classement du blog (post-ranking.html) : la colonne
   principale d'un article, dessinée comme une page
   ============================================================ */
.post-hero--ranking .post-hero__body { max-width: 52rem; }
.post-hero--ranking .eyebrow { margin-bottom: -0.25rem; }
.post-main--ranking { display: grid; gap: 2.5rem; align-content: start; }
.post-main--ranking .post-featured { margin: 0; }
.takeaways {
  display: grid; gap: 0.875rem; padding: 1.5rem 1.75rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.takeaways__title {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.takeaways li { display: flex; gap: 0.625rem; align-items: flex-start; line-height: 1.55; color: var(--fg-strong); }
.takeaways li svg { flex: none; margin-top: 0.3rem; color: var(--accent); }
.post-block { display: grid; gap: 1.25rem; }
.post-block__head { display: grid; gap: 0.5rem; justify-items: start; }
.post-block__title { font-size: clamp(1.45rem, 2.6vw, 1.85rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.post-block__deck { color: var(--fg-muted); line-height: 1.6; margin: 0; }
.post-main--ranking .disclosure { margin: 0; max-width: none; }
.post-main--ranking .rank__item { padding: 1.375rem 1.5rem; }
.post-main--ranking .cmp table { min-width: 680px; }
.post-main--ranking .statement-grid { margin-top: 0; }
.post-main--ranking .prose .post-banner { margin: 0; }
@media (max-width: 720px) {
  .takeaways { padding: 1.25rem 1.125rem; }
  .post-main--ranking { gap: 2rem; }
}

/* Pied de page : colonne des pages comparatives quand il y en a */
.footer-inner--5 { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .footer-inner--5 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .footer-inner--5 { grid-template-columns: 1fr 1fr; } }