/* Hallmark · shape: Split Studio (/) · genre: modern-minimal · theme: brand · redesign: full · job: book
 * paper: oklch(94.6% 0.014 88.7) · accent: oklch(72.6% 0.164 156.2) · display: Inter Tight · body: Inter Tight · outlier: JetBrains Mono (measured figures only) · hero: Counter (/) · nav: edge-aligned bar, wordmark left, one action right · footer: mast, the wordmark over three link columns · signature: an ink gain counter the visitor drags (one plain sentence, two sliders, the yearly amount set huge in green, the 35-hour weeks as a second figure, and the visitor's hours on one track that reaches or passes a notch at Michelin's measured 420 h), then the Michelin Group project laid out step by step beside the real tracking map of its public dashboard
 * axes: light/grotesk-sans/chromatic-green · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: E, the hero headline names the category (the owner's copy); every picture on the page is real: the public Michelin map, the Playbook, the client and tool logos */
/* Hallmark · dropped the agency's internal automations (inbox sorting, YouTube watch, bounces, file on request) · Romain, 31/10/2026: not serious for company directors; the public Michelin project takes their place */
/* Hallmark · dropped the three client capture slots (Maeva & Co reporting, Michelin dashboard, Maeva workflow) · Romain withdrew consent on 31/10/2026: no client system is shown without the client's written agreement */
/* Hallmark · dropped the service-tag marquee (Agents IA, Automatisations, Reporting automatisé…) · it repeated the three services already listed below and looped without pause */
/* Hallmark · waive 77 · section.section--s holds one row of client logos and four measured figures · the client logos and the yearly hours recovered sit as a band under the hero, by design */
/* Hallmark · dismissed 23 · the yearly amount on the ink counter is the hero's one display figure in green, its signature, green on ink at 8.75:1; with the two green booking buttons it paints about 6% of the 1280 screen, on purpose */
/* Hallmark · dismissed 58 · the words are the owner's; every line a copy gate named was tightened and listed in docs/site/REFONTE-2026-10-31.md */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 unresolved (on a phone the stacked hero shows the headline first and the counter after it, by order; the WhatsApp button now carries a paper ring over the ink) */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved 1 dismissed (the EN footer never had a legal link, the legal page is French only) · old page did better: Maeva & Co's concrete line (back in the results), the figures at a glance (enlarged), the whole Playbook cover (now its real title on ink, 4:3) */

/* Système du site automateall.co (refonte Hallmark du 31/10/2026, voir design.md).
   Les pages refaites lient cette feuille seule ; l'ancienne site.css reste pour les pages
   pas encore refaites et partira dans _archive/ quand plus aucune ne la lira.
   Classes lues par les scripts, gardées : .aa-nav, .aa-nav__toggle, .aa-nav__links,
   .aa-nav__drawer-cta (site.js), .aa-whatsapp-float (Rybbit), #aa-nav-links. */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600&family=JetBrains+Mono:wght@400&display=swap");
@import url("./hallmark/tokens.css");
@import url("./hallmark/base.css");

/* ─── Page ───────────────────────────────────────────────────────────────── */

body { font-size: var(--text-md); }
main { display: block; }
main h2 { font-size: clamp(2rem, 1.6vw + 1.25rem, 2.75rem); }
figure, dl, dd { margin: 0; }
strong, b { font-weight: var(--body-strong); }
a:hover { color: var(--color-accent-strong); }
.num, .figure { font-family: var(--font-outlier); font-weight: 400; letter-spacing: 0; }
/* L'espace d'une fonte à chasse fixe vaut une case entière : « 6 747 » se lisait « 6  747 ». */
.num, .figures dd, .index__figure { word-spacing: -0.4ch; }
.lead { color: var(--color-ink-2); }
.small, small { font-size: var(--text-sm); }
.muted { color: var(--color-muted); }

.skip {
  position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-tooltip);
  padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; outline-color: var(--color-focus); }

.grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

/* ─── Boutons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border: 1px solid transparent; border-radius: var(--radius-control);
  font: inherit; font-size: var(--text-md); font-weight: var(--body-strong); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); color: var(--color-accent-ink); }
.btn--primary:active { background: var(--color-accent-strong); color: var(--color-paper); }
.btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--secondary:active { background: var(--color-ink-2); color: var(--color-paper); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.band--ink .btn--secondary { color: var(--color-paper); border-color: var(--color-paper); }
.band--ink .btn--secondary:hover { background: var(--color-paper); color: var(--color-ink); }
.band--ink :focus-visible { outline-color: var(--color-focus-dark); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.actions__note { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.hero__text > .actions__note, .resource__text > .actions__note, .close__body > .actions__note { margin-top: calc(var(--space-sm) * -1); }
/* La mesure (800 h chez les clients) passe avant l'estimation du calculateur. */
.hero__text > .actions__note { color: var(--color-ink-2); font-size: var(--text-md); }
.hero__text > .actions__note strong { font-weight: var(--body-strong); color: var(--color-ink); }

.link { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-weight: var(--body-strong); }
.link:hover { color: var(--color-accent-strong); }
.link:active { color: var(--color-ink-2); }

/* ─── Menu (.aa-nav, piloté par site.js) ─────────────────────────────────── */

.aa-nav {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  background: var(--color-paper); border-bottom: 1px solid var(--color-rule);
}
.aa-nav__inner {
  display: flex; align-items: center; gap: var(--space-xl);
  max-width: var(--container); min-height: 72px; margin-inline: auto; padding-inline: var(--gutter);
}
.aa-nav__brand { display: inline-flex; flex-shrink: 0; }
.aa-nav__logo { width: auto; height: 26px; }
.aa-nav__links { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.aa-nav__links a {
  color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
  padding-block: var(--space-xs); border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.aa-nav__links a:hover { color: var(--color-accent-strong); }
.aa-nav__links a:active { color: var(--color-ink-2); }
.aa-nav__links a[aria-current="page"] { border-bottom-color: var(--color-ink); }
.aa-nav__links .aa-nav__lang { color: var(--color-muted); }
.aa-nav__links .aa-nav__drawer-cta { display: none; }
.aa-nav__cta { flex-shrink: 0; }
.aa-nav__toggle {
  display: none; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-md); margin-left: auto;
  background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); border-radius: var(--radius-control);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.aa-nav__toggle:hover { background: var(--color-ink); color: var(--color-paper); }
.aa-nav__toggle:active { background: var(--color-ink-2); color: var(--color-paper); }
.aa-nav__toggle-close { display: none; }

@media (max-width: 60rem) {
  .aa-nav__inner { gap: var(--space-md); min-height: 64px; }
  .aa-nav__cta { display: none; }
  .aa-nav__toggle { display: inline-flex; }
  /* Tiroir ancré sous la barre, hauteur explicite : animations.js laisse un transform
     sur .aa-nav après l'avoir masquée puis réaffichée, ce qui ferait de la barre (64 px)
     la référence d'un tiroir en fixed avec bottom: 0 (seul « Services » restait visible). */
  .aa-nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - 64px); height: calc(100dvh - 64px); z-index: var(--z-sticky-nav);
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: var(--space-lg) var(--gutter) var(--space-2xl); background: var(--color-paper); overflow-y: auto;
  }
  .aa-nav.is-open .aa-nav__links { display: flex; }
  .aa-nav.is-open .aa-nav__toggle-open { display: none; }
  .aa-nav.is-open .aa-nav__toggle-close { display: inline; }
  .aa-nav__links a { font-size: var(--text-xl); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .aa-nav__links a[aria-current="page"] { border-bottom-color: var(--color-ink); }
  .aa-nav__links .aa-nav__drawer-cta { display: inline-flex; margin-top: var(--space-xl); font-size: var(--text-md); border-bottom: 1px solid transparent; }
}

/* ─── Sections ───────────────────────────────────────────────────────────── */

.section { padding-block: var(--section-gap) 0; }
.section--s { padding-block: var(--section-gap-s) 0; }
.section--l { padding-block: var(--section-gap-l) 0; }
.section:last-of-type { padding-bottom: var(--section-gap); }
.band { padding-block: var(--section-gap-s); margin-top: var(--section-gap); }
.band--paper { background: var(--color-paper-2); }
.band--ink { background: var(--color-ink); color: var(--color-paper); }
.band--ink .lead, .band--ink p { color: var(--color-paper); }
.band--ink a:not(.btn) { color: var(--color-paper); }
.band--ink a:not(.btn):hover { color: var(--color-accent); }
.band--ink .actions__note { color: var(--color-paper); }
.band--paper .actions__note, .band--paper .muted { color: var(--color-ink-2); }
.band + .band { margin-top: 0; }

.head { display: grid; gap: var(--space-md); max-width: 52rem; margin-bottom: var(--space-2xl); }
.head--split {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns);
  align-items: end; max-width: none;
}
.head--split h2 { grid-column: 1 / span 6; }
.head--split .lead { grid-column: 8 / -1; }

/* ─── Héros (Stage) ──────────────────────────────────────────────────────── */

.hero { display: grid; align-content: center; padding-block: clamp(var(--space-xl), 9svh, var(--space-3xl)) var(--space-2xl); }
/* Le bandeau des logos et des chiffres entre dans le premier écran (revue finale, 44c). */
.hero + .section--s { padding-top: var(--space-lg); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: none; font-size: clamp(2.5rem, 3.9vw + 1rem, 4.5rem); line-height: 1.02; }
.hero .lead { max-width: 34ch; }
.hero__proof { display: grid; gap: var(--space-sm); }
.hero__proof .capture { min-height: min(64svh, 640px); }

/* Emplacement de capture : la capture réelle remplace le contenu de secours. */
.capture {
  position: relative; display: grid; place-items: center;
  min-height: 440px; padding: var(--space-lg);
  border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-paper-2);
}
.capture img { border-radius: min(1vw, var(--radius-card)); }
.capture__label { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 52ch; }
.capture__attente {
  align-self: center; justify-self: center; padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-muted); border-radius: var(--radius-card);
  color: var(--color-ink-2); font-size: var(--text-sm); text-align: center; max-width: 32ch;
}

/* ─── Calculateur de gain (héros, posture Counter) ───────────────────────── */
/* Lu par calculateurs.js : form[data-calc="gain"], les name, [data-out], [data-message], output[for].
   Un panneau encre : la phrase se règle au curseur, le montant rendu est la plus grande chose
   de l'écran après le titre, en vert sur encre (8,75:1). Piste = mélange encre et ivoire. */

.gain {
  --gain-piste: color-mix(in oklch, var(--color-paper) 26%, var(--color-ink));
  --gain-doux: color-mix(in oklch, var(--color-paper) 78%, var(--color-ink));
  display: grid; gap: var(--space-lg); align-content: space-between; min-height: min(64svh, 36rem);
  padding: clamp(var(--space-lg), 3.4vw, var(--space-2xl));
  background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card);
}
.gain :focus-visible { outline: 2px solid var(--color-focus-dark); outline-offset: 4px; }
.gain__phrase { display: grid; gap: var(--space-xs); font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.01em; }
.gain__ligne { display: block; color: var(--color-paper); }
.gain__valeur { display: inline; font-weight: var(--display-weight); font-variant-numeric: tabular-nums; color: var(--color-paper); }

.gain input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 0;
  background: transparent; cursor: pointer;
}
.gain input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 4px;
  background: linear-gradient(to right, var(--color-accent) var(--p, 18%), var(--gain-piste) var(--p, 18%));
}
.gain input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--gain-piste); }
.gain input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--color-accent); }
.gain input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 36px; height: 36px; margin-top: calc((var(--space-sm) + var(--space-3xs)) * -1); /* (piste 8 - curseur 36) / 2 */ border-radius: 50%;
  background: var(--color-accent); border: 8px solid var(--color-ink); box-shadow: 0 0 0 2px var(--color-accent);
  transition: transform var(--dur-micro) var(--ease-out);
}
.gain input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent);
  border: 8px solid var(--color-ink); box-shadow: 0 0 0 2px var(--color-accent);
}
.gain input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.gain input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.95); }


.gain__resultat { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--gain-piste); }
.gain__resultat > p:first-child { color: var(--gain-doux); }
.gain__euros {
  display: block; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(3.25rem, 5.6vw + 0.4rem, 6.75rem); line-height: 0.92; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; color: var(--color-accent); overflow-wrap: anywhere;
}
.gain__detail { font-size: var(--text-lg); color: var(--color-paper); }
.gain__detail output { font-weight: var(--display-weight); font-variant-numeric: tabular-nums; }
/* Le temps rendu : second chiffre, la moitié du montant, en ivoire. */
.gain__temps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); color: var(--color-paper); font-size: var(--text-lg); }
.gain__temps output { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2rem, 1.8vw + 1rem, 3rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* Repère : une seule piste, la barre du visiteur et un cran à 420 h (Michelin, mesuré), même échelle.
   --k, --m et --a posés par calculateurs.js ; seule la barre s'anime, en scaleX. */
.gain__repere { display: grid; gap: var(--space-xs); }
.gain__repere-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); font-size: var(--text-sm); color: var(--gain-doux); }
.gain__repere-tete output { font-size: var(--text-lg); font-weight: var(--display-weight); font-variant-numeric: tabular-nums; color: var(--color-paper); }
.gain__piste-repere { position: relative; height: 14px; margin-block: var(--space-2xs); border-radius: 4px; background: var(--gain-piste); }
.gain__barre { position: absolute; inset: 0; border-radius: 4px; background: var(--color-accent); transform: scaleX(var(--k, 0.8)); transform-origin: left center; transition: transform var(--dur-short) var(--ease-out); }
.gain__cran { position: absolute; top: calc(var(--space-xs) * -1); bottom: calc(var(--space-xs) * -1); left: calc(var(--m, 0.8) * 100%); width: 2px; margin-left: -1px; background: var(--color-paper); }
.gain__repere-label { position: relative; height: 1.5em; font-size: var(--text-sm); color: var(--color-paper); }
.gain__repere-label span { position: absolute; top: 0; left: calc(var(--m, 0.8) * 100%); transform: translateX(calc(var(--a, -100) * 1%)); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gain__barre { transition: none; } }
.gain__message { font-size: var(--text-sm); color: var(--color-paper); }
.gain__note { font-size: var(--text-sm); color: var(--gain-doux); }
@media (prefers-reduced-motion: reduce) { .gain input[type="range"]::-webkit-slider-thumb { transition: none; } }

/* ─── Projet mis en avant (Michelin Group, cas public) ──────────────────── */
/* Les étapes portent les vrais logos des outils ; la carte est une capture du tableau de bord public du projet. */

.projet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.projet__etapes { grid-column: 1 / span 5; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.projet__etapes li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.projet__etapes img { width: 40px; height: 40px; object-fit: contain; }
.projet__etapes h3 { font-size: var(--text-xl); }
.projet__etapes p { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 48ch; }
.projet__carte { grid-column: 7 / -1; display: grid; gap: var(--space-sm); }
/* La carte interactive (carte-lieux.js) : MapLibre et le fond OpenFreeMap repeint aux jetons ; la capture
   de la carte de suivi reste en place tant que la carte n'est pas prête (sans script, sans WebGL, hors ligne). */
.carte { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.carte__secours { display: block; width: 100%; height: 100%; object-fit: cover; }
/* .carte devant : la feuille de MapLibre, chargée après, pose position: relative sur .maplibregl-map. */
.carte .carte__fond { position: absolute; inset: 0; }
.carte__fond .maplibregl-ctrl-group { border-radius: var(--radius-control); box-shadow: 0 0 0 1px var(--color-rule); }
.carte__fond .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.carte__fond .maplibregl-ctrl-attrib { font-size: var(--text-xs); }
.carte__fond .maplibregl-ctrl button:focus-visible, .carte__fond .maplibregl-ctrl-attrib-button:focus-visible, .carte__fond a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: none; }
.carte__fond .maplibregl-ctrl button:focus:not(:focus-visible) { box-shadow: none; }
/* Message « ⌘ + molette » de MapLibre : voile encre, texte ivoire ; caché tant que MapLibre ne le montre pas
   (.carte--js est posée par carte-lieux.js avant de créer la carte ; sans script, la carte n'existe pas). */
.carte__fond .maplibregl-cooperative-gesture-screen { background: color-mix(in oklch, var(--color-ink) 82%, transparent); color: var(--color-paper); font-family: var(--font-body); font-size: var(--text-md); }
.carte--js .maplibregl-cooperative-gesture-screen:not(.maplibregl-show) { visibility: hidden; }
.carte__compte { font-size: var(--text-md); color: var(--color-ink-2); }
.carte__compte strong { font-weight: var(--body-strong); color: var(--color-ink); font-variant-numeric: tabular-nums; }
/* Choix de la ville (radios, patterns.md « A choice between a few »), inséré par le script. */
.carte__villes { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.carte__villes-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.carte__villes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.carte__villes label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md);
  border: 1px solid var(--color-muted); border-radius: var(--radius-control); font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.carte__villes label:hover { background: var(--color-paper-2); }
.carte__villes input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.carte__villes input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.projet__resultats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.projet__resultats > div { display: grid; gap: var(--space-2xs); align-content: start; }
.projet__resultats dt { order: 2; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 32ch; }
.projet__resultats dd { order: 1; margin: 0; font-family: var(--font-outlier); font-size: var(--text-2xl); line-height: 1.1; color: var(--color-accent-strong); word-spacing: -0.4ch; }
.projet__lien { margin-top: var(--space-xl); }

/* ─── Paire (deux exemples sans capture) ─────────────────────────────────── */

.pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); margin-top: var(--space-3xl); }
.pair > article { grid-column: span 6; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.pair h3 { font-size: var(--text-xl); }
.pair p { color: var(--color-ink-2); max-width: 52ch; }
.pair__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: baseline; }

/* ─── Logos clients ──────────────────────────────────────────────────────── */

/* Hauteurs réglées sur le poids visuel : le mot Michelin recadré sur son contenu (michelin-logo.webp). */
.proof__clients img.logo--michelin { height: 40px; width: auto; }
.proof__clients img.logo--seb { height: 56px; width: auto; }
.proof__clients img.logo--maeva { height: 40px; width: auto; }

/* ─── Preuves (logos clients, chiffres) ──────────────────────────────────── */

.proof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.proof__clients { grid-column: 1 / span 5; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: center; gap: var(--space-md) var(--space-xl); }
.proof__clients figcaption { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); }
.figures { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures > div { display: grid; gap: var(--space-2xs); padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.figures > div:first-child { padding-left: 0; border-left: 0; }
.figures dt { order: 2; font-size: var(--text-sm); color: var(--color-ink-2); }
.figures dd { order: 1; margin: 0; font-variant-numeric: tabular-nums; font-family: var(--font-outlier); font-size: clamp(2.25rem, 1.4vw + 1.25rem, 2.75rem); line-height: 1.1; color: var(--color-ink); }

/* ─── Split (texte d'un côté, preuve de l'autre) ─────────────────────────── */

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.split + .split { margin-top: var(--space-3xl); }
.split__text { grid-column: 1 / span 5; display: grid; gap: var(--space-md); justify-items: start; }
.split__proof { grid-column: 7 / -1; display: grid; gap: var(--space-sm); }
.split__text h3 { font-size: var(--text-xl); max-width: 22ch; }
.split__text p { max-width: 46ch; }
.split__meta { display: flex; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-2); }
.split__result { color: var(--color-ink-2); }
.split__result .num { color: var(--color-accent-strong); font-size: var(--text-lg); }

/* ─── Rangées (titre à gauche, texte à droite, filets) ───────────────────── */

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.rows > li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-sm);
  padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule);
}
.rows__title { grid-column: 1 / span 4; font-size: var(--text-title); }
.rows__body { grid-column: 6 / span 5; display: grid; gap: var(--space-md); align-content: start; }
.rows__aside { grid-column: 11 / -1; justify-self: end; align-self: start; }
.rows__tools { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.rows__tools img { height: 22px; width: auto; }
.rows__exemples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.rows__exemples li { color: var(--color-ink-2); max-width: 60ch; }
.rows__exemples strong { color: var(--color-ink); }

/* ─── Index des cas clients ──────────────────────────────────────────────── */

.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.index > li { border-bottom: 1px solid var(--color-rule); }
.index a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center;
  padding-block: var(--space-xl); color: var(--color-ink); text-decoration: none;
}
.index a:hover .index__client, .index a:hover .index__go { color: var(--color-accent-strong); }
.index a:active .index__client { color: var(--color-ink-2); }
.index__client { grid-column: 1 / span 3; font-size: var(--text-title); font-weight: var(--display-weight); transition: color var(--dur-micro) var(--ease-out); }
/* Logos des clients (demande de Romain) : mêmes poids visuels que le bandeau sous le héros, un cran plus petits. */
.index__client:has(.index__logo) { display: flex; align-items: center; min-height: 56px; }
.index__logo { display: block; width: auto; }
.index__logo--michelin { height: 32px; }
.index__logo--maeva { height: 34px; }
.index__logo--seb { height: 48px; }
.index__what { grid-column: 4 / span 5; color: var(--color-ink-2); }
.index__figure { grid-column: 9 / span 2; font-family: var(--font-outlier); font-size: var(--text-xl); color: var(--color-accent-strong); white-space: nowrap; }
.index__figure--words { font-family: var(--font-body); font-size: var(--text-lg); word-spacing: normal; color: var(--color-ink); }
.index__go { grid-column: 11 / -1; justify-self: end; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }

/* ─── Étapes (vrai processus, <ol>) ──────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.steps > li { counter-increment: etape; display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.steps > li::before { content: counter(etape); font-family: var(--font-outlier); font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); margin-bottom: var(--space-sm); }
.steps h3 { font-size: var(--text-title); }
.steps p { color: var(--color-ink-2); }

/* ─── Ressource (playbook) ───────────────────────────────────────────────── */

.resource { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.resource__text { grid-column: 1 / span 6; display: grid; gap: var(--space-md); justify-items: start; }
.resource__side { grid-column: 8 / -1; display: grid; gap: var(--space-lg); align-content: start; }
.resource__cover { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-ink); }
.resource__cover img { display: block; width: 100%; height: auto; }
.resource__text .resource__list { width: 100%; margin-top: var(--space-md); }
.resource__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-ink); }
.resource__list li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }

/* ─── Clôture (bande encre) ──────────────────────────────────────────────── */

.close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.close h2 { grid-column: 1 / span 7; max-width: 16ch; }
.close__body { grid-column: 8 / -1; display: grid; gap: var(--space-lg); justify-items: start; }

/* ─── Pied de page (mât) ─────────────────────────────────────────────────── */

.site-footer { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--color-ink); margin-top: var(--section-gap); }
main:has(> .band:last-child) + .site-footer { margin-top: 0; border-top: 0; }
.site-footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.site-footer__brand { grid-column: 1 / span 5; display: grid; gap: var(--space-md); align-content: start; }
.site-footer__brand img { width: 240px; height: auto; }
.site-footer__brand p { color: var(--color-ink-2); max-width: 36ch; }
.site-footer__col { grid-column: span 2; display: grid; gap: var(--space-xs); align-content: start; }
.site-footer__col:first-of-type { grid-column: 7 / span 2; }
.site-footer__col h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--body-strong); letter-spacing: 0; max-width: none; margin-bottom: var(--space-xs); }
.site-footer__col a { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.site-footer__col a:hover { color: var(--color-accent-strong); text-decoration: underline; }
.site-footer__col a:active { color: var(--color-ink-2); }
.site-footer__legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.site-footer__legal a { color: var(--color-muted); }

/* ─── WhatsApp (classe suivie par Rybbit) ────────────────────────────────── */

.aa-whatsapp-float {
  position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-raised);
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.aa-whatsapp-float:hover { background: var(--color-accent-strong); color: var(--color-paper); }
.aa-whatsapp-float:active { background: var(--color-ink-2); }
.aa-whatsapp-float svg { width: 24px; height: 24px; }
/* Anneau ivoire : lisible sur l'encre du compteur. Rangé (téléphone) tant qu'un calculateur est à l'écran :
   état posé par calculateurs.js, qui ajoute aussi .js-calc à <html> ; sans script, le bouton reste visible. */
.aa-whatsapp-float { box-shadow: 0 0 0 2px var(--color-paper); transition: background-color var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.js-calc .aa-whatsapp-float--range { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(var(--space-md)); }
@media (prefers-reduced-motion: reduce) { .aa-whatsapp-float { transition: none; } }

/* ─── Petits écrans ──────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .hero { padding-block: var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__proof .capture { min-height: 320px; }
  .gain { min-height: 0; }
  .head--split h2, .head--split .lead { grid-column: 1 / -1; }
  .proof__clients, .figures { grid-column: 1 / -1; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .figures > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .split__text, .split__proof, .split--wide .split__text, .split--wide .split__proof { grid-column: 1 / -1; }
  .projet__etapes, .projet__carte { grid-column: 1 / -1; }
  .pair > article { grid-column: 1 / -1; }
  .capture { min-height: 280px; }
  .rows__title, .rows__body, .rows__aside { grid-column: 1 / -1; justify-self: start; }
  .index a { row-gap: var(--space-xs); }
  .index__client { grid-column: 1 / -1; }
  .index__what, .index__figure, .index__go { grid-column: 1 / -1; justify-self: start; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .resource__text, .resource__side { grid-column: 1 / -1; }
  .close h2, .close__body { grid-column: 1 / -1; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col, .site-footer__col:first-of-type { grid-column: span 4; }
}
@media (max-width: 40rem) {
  .gain__phrase { font-size: var(--text-lg); }
  .gain__repere > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .projet__resultats { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .site-footer__col, .site-footer__col:first-of-type { grid-column: span 6; }
  .aa-whatsapp-float { right: var(--space-md); bottom: var(--space-md); width: 48px; height: 48px; }
}

.steps__action { margin-top: var(--space-2xl); }