@charset "UTF-8";

/* ACS Automotive — feuille unique. Le site est une page ; la découper
   n'achèterait rien. Ordre : polices, variables, base, scène du hero,
   sections, formulaire, page de retour de contact, puis responsive. */

@font-face {
  font-family: 'Hanken Grotesk'; src: url('fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --paper: #f7f8f5;
  --surface: #fff;
  --surface-alt: #edf0e9;
  --ink: #181a19;
  --muted: #545a56;
  --blue: #002eff;
  --blue-hover: #0025cc;
  --line: #d6dbd4;
  --section-space: clamp(80px, 8vw, 120px);
  /* Les piles de repli comptent : entre le swap et le chargement, c'est
     Georgia et la police système du visiteur qui s'affichent. */
  /* Les titres partagent la police d'interface : Hanken Grotesk porte les
     graisses 100 à 900, le contraste se fait donc à la graisse et non à
     un second fichier. */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body), sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
button svg, a svg { flex: 0 0 auto; }
::selection { background: #dce3ff; color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-family: var(--font-display), sans-serif; font-weight: 700; letter-spacing: -.038em; }
h2 { font-size: clamp(39px, 4.15vw, 60px); line-height: 1.08; }
/* La seconde ligne se détache par la graisse, pas par l'italique : un
   grotesque n'a pas d'italique expressif, et l'italique de titre était
   précisément ce qui datait la page. */
h1 em, h2 em { font-style: normal; font-weight: 250; }
h3 { font-weight: 560; line-height: 1.2; letter-spacing: -.03em; }
.container { width: min(100% - 104px, 1260px); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; padding: 15px 24px; min-height: 52px; border: 1px solid transparent; border-radius: 999px; font-weight: 550; font-size: 16px; white-space: nowrap; transition: background .2s, transform .2s; }
.button-primary { background: var(--blue); color: white; }
.button-primary:hover { background: var(--blue-hover); transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button svg, .text-link svg { transition: transform .25s; }
.button:hover svg, .text-link:hover svg { transform: translate(2px, -2px); }
.text-link { display: inline-flex; align-items: center; gap: 13px; font-size: 16px; font-weight: 550; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #818782; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--blue); }
.eyebrow { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; font-weight: 600; margin-bottom: 24px; color: var(--muted); }
.skip-link { position: fixed; left: 20px; top: -90px; z-index: 100; background: var(--blue); color: white; padding: 12px 24px; border-radius: 8px; }
.skip-link:focus { top: 10px; }

/* Compact navigation floats above the same illustrated paper canvas. */
/* Header fixe, en deux états. Au repos il est transparent et posé sur le
   papier, aligné sur la grille de la page. Au défilement il se matérialise
   en capsule de verre ET son padding se réduit, ce qui écarte son contenu
   d'une vingtaine de pixels — c'est le mécanisme de chatseo.app : la boîte
   extérieure ne bouge pas, c'est le padding qui se resserre.

   Le padding est écrit en longhands et non via des variables : une
   transition sur une propriété alimentée par un var() ne se redéclenche pas
   de façon fiable quand seule la variable change — mesuré, la variable
   passait bien de 50 à 32 px sans que padding-left bouge. Et on ne touche
   que l'axe horizontal, pour ne pas écraser le padding-block du palier
   mobile. */
.site-header {
  position: fixed;
  z-index: 30;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 72px, 1360px);
  border-radius: 44px;
  border: 1px solid transparent;
  background: transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}

/* L'état défilé. La classe est posée par app.js : une timeline CSS
   scroll() aurait évité ce JavaScript, mais elle ne s'active pas dans le
   navigateur de test, donc je ne pouvais pas la vérifier. Six lignes
   vérifiables valent mieux qu'une règle élégante non vérifiée. */
.site-header.is-scrolled {
  border-color: rgba(24, 26, 25, .07);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px -16px rgba(24, 26, 25, .18);
}

/* Le flou n'est pas disponible partout : sans lui, un fond presque opaque,
   sinon le menu passerait sur la photo de la section flotte. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: rgba(255, 255, 255, .96); }
}

/* Menu mobile ouvert : le verre ne suffit pas derrière une liste de liens.
   Placé après .is-scrolled pour gagner à spécificité égale, et il doit
   aussi couvrir le cas du menu ouvert en haut de page. */
.site-header.menu-open {
  background: rgba(255, 255, 255, .97);
  border-color: rgba(24, 26, 25, .07);
  box-shadow: 0 10px 30px -16px rgba(24, 26, 25, .18);
}

/* Au repos, padding-left 50px : le logo tombe alors sur la grille de la
   page (le conteneur commence à 126 px pour un header à 76 px). */
.header-bar { display: flex; align-items: center; gap: 30px; min-height: 76px;
              padding: 8px 30px 8px 50px;
              transition: padding-left .3s, padding-right .3s; }
.site-header.is-scrolled .header-bar { padding-left: 32px; padding-right: 12px; }
.brand { margin-right: auto; flex-shrink: 0; }
.brand img { width: 132px; height: 55px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; gap: 32px; white-space: nowrap; font-size: 15px; }
.desktop-nav a { padding-block: 12px; transition: color .2s; }
.desktop-nav a:hover { color: var(--blue); }
.header-contact { padding: 13px 21px; min-height: 50px; font-size: 14px; }
.menu-toggle { display: none; width: 46px; height: 46px; place-items: center; background: transparent; border: 0; border-radius: 50%; }
.mobile-nav[hidden] { display: none; }
.mobile-nav { padding: 8px 24px 24px; }
.mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-top: 1px solid var(--line); }
.menu-backdrop { position: fixed; inset: 0; z-index: 20; background: #181a1940; border: 0; cursor: default; }
.nojs-navigation { display: flex; gap: 12px; padding: 12px 20px; }

/* Hero keeps the copy as HTML and the scene as independent animated media. */
.hero { position: relative; padding-top: 145px; padding-bottom: clamp(96px, 11vw, 168px); overflow: hidden; }
.hero-copy { text-align: center; position: relative; z-index: 3; }
.hero h1 { font-size: clamp(58px, 6.7vw, 96px); line-height: 1.035; }
.hero-copy > p { margin-top: 21px; font-size: 17px; color: var(--muted); line-height: 1.55; }
.mobile-break { display: none; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 25px; }

/* A single strong figure anchors the proof instead of a row of arbitrary KPIs. */
.proof-section { padding-block: 82px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.proof-message h2 { font-size: clamp(35px, 3.3vw, 48px); }
.proof-message > p { margin-top: 22px; color: var(--muted); max-width: 490px; }
.audience-list { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 27px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .055em; }
.proof-number { padding-left: 60px; border-left: 1px solid var(--line); }
.big-number { display: block; font-family: var(--font-display), sans-serif; font-weight: 640; font-size: clamp(82px, 8vw, 116px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.big-number__plus { color: var(--blue); font-weight: 280; }
/* Largeur figée pendant le comptage : sans cela la ligne sauterait à
   chaque chiffre ajouté, et le « + » danserait. */
.compteur { display: inline-block; font-variant-numeric: tabular-nums; }
.proof-number > p { margin-top: 10px; font-size: 20px; line-height: 1.4; }
.proof-signature { font-size: 13px; color: var(--muted); margin-top: 28px; display: flex; gap: 14px; align-items: center; }
.signature-rule { height: 1px; width: 32px; background: var(--muted); }

.section-heading { margin-bottom: 50px; }
.section-heading > p { max-width: 560px; color: var(--muted); margin-top: 22px; font-size: 18px; }
.featured-services { display: grid; grid-template-columns: 1.12fr 1fr; gap: 28px; align-items: start; }
.featured-service { border-radius: 24px; overflow: hidden; background: #e8ece5; }
.service-nettoyage { margin-top: 72px; background: #e9edf3; }
.service-image { position: relative; overflow: hidden; aspect-ratio: 1.62; }
.service-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); transition: transform .6s; }
.featured-service:hover .service-image img { transform: scale(1.025); }
.featured-service-body { padding: 32px; }
.service-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.service-title-row h3 { font-size: 29px; }
.featured-service-body > p { margin-top: 18px; color: #485046; min-height: 80px; }
.service-details { margin-top: 25px; border-top: 1px solid #181a1929; padding-top: 15px; }
.service-details summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 550; list-style: none; min-height: 32px; }
.service-details summary::-webkit-details-marker { display: none; }
.service-details summary > svg { flex-shrink: 0; transition: transform .2s; }
.service-details[open] summary > svg { transform: rotate(45deg); }
.service-details-content { padding-top: 12px; }
.service-details-content ul { margin: 0 0 22px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.service-details-content li + li { margin-top: 7px; }
.service-details-content .text-link { font-size: 14px; }
.supporting-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 42px; }
.supporting-service { padding: 28px 0 0; border-top: 1px solid var(--line); height: 100%; }
.service-symbol { margin-bottom: 24px; color: var(--ink); }
.supporting-service h3 { font-size: 23px; min-height: 55px; }
.supporting-service > p { font-size: 15px; margin-top: 13px; color: var(--muted); min-height: 98px; }
.supporting-service .service-details { margin-top: 20px; }
.supporting-service .service-details summary { font-size: 12px; line-height: 1.5; }
.services-note { margin-top: 50px; text-align: center; color: var(--muted); font-size: 15px; }
.services-note a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); margin-left: 8px; text-decoration: underline; text-underline-offset: 4px; }

.approach-section { background: #e9ede5; }
.approach-heading { margin-bottom: 48px; }
.commitments { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 28px; border-top: 1px solid #c5cdbf; font-size: 15px; }
.commitments span { display: inline-flex; gap: 11px; align-items: center; }


/* ---- Apparition au scroll -------------------------------------------- */

/* Piloté par IntersectionObserver et non par animation-timeline: view().
   Les timelines de scroll sont annoncées comme supportées par CSS.supports()
   mais restent inactives (currentTime null) dans certains Chrome : rien ne
   s'animait. Un observateur marche partout.

   La classe js-anim est posée par un script en tête de page, et seulement si
   l'utilisateur ne demande pas moins de mouvement. Sans JavaScript, ou en
   mouvement réduit, aucune de ces règles ne s'applique : tout reste dans son
   état final, visible. C'est la dégradation correcte. */

.js-anim .reveal {
  opacity: .25; transform: translateY(22px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js-anim .reveal.vu { opacity: 1; transform: none; }

/* Les étapes : le conteneur reçoit .vu, les enfants suivent en cascade. */
.js-anim .etape-num,
.js-anim .etape-texte,
.js-anim .etape-visuel {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.js-anim .etape.vu .etape-num,
.js-anim .etape.vu .etape-texte,
.js-anim .etape.vu .etape-visuel { opacity: 1; transform: none; }
.js-anim .etape.vu .etape-texte  { transition-delay: .07s; }
.js-anim .etape.vu .etape-visuel { transition-delay: .14s; }

.js-anim .etape-fil::before {
  transform: scaleY(0);
  transition: transform 1s ease-out .15s;
}
.js-anim .etape.vu .etape-fil::before { transform: scaleY(1); }

/* C'est le décalage qui fait lire la séquence, pas la vitesse. */
.js-anim .bulle,
.js-anim .saisie,
.js-anim .ligne {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js-anim .etape.vu .bulle,
.js-anim .etape.vu .saisie,
.js-anim .etape.vu .ligne { opacity: 1; transform: none; }
.js-anim .etape.vu .bulle:nth-child(1) { transition-delay: .20s; }
.js-anim .etape.vu .ligne:nth-child(2) { transition-delay: .26s; }
.js-anim .etape.vu .bulle:nth-child(2) { transition-delay: .34s; }
.js-anim .etape.vu .ligne:nth-child(3) { transition-delay: .38s; }
.js-anim .etape.vu .saisie             { transition-delay: .48s; }
.js-anim .etape.vu .ligne:nth-child(4) { transition-delay: .50s; }
/* Le curseur clignote une fois la saisie arrivée. */
.js-anim .etape.vu .curseur { animation: acs-curseur 1.1s steps(1) .9s infinite; }
@keyframes acs-curseur { 0%, 50% { opacity: .55 } 50.01%, 100% { opacity: 0 } }

.js-anim .coche::after {
  transform: rotate(45deg) scale(0);
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.js-anim .etape.vu .coche::after { transform: rotate(45deg) scale(1); }
.js-anim .etape.vu .ligne:nth-child(2) .coche::after { transition-delay: .55s; }
.js-anim .etape.vu .ligne:nth-child(3) .coche::after { transition-delay: .70s; }
.js-anim .etape.vu .ligne:nth-child(4) .coche::after { transition-delay: .85s; }

/* Les notifications arrivent : l'ancienne d'abord, la récente ensuite,
   pour qu'on lise « ça vient de tomber ». */
.js-anim .notif {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js-anim .notif-pale { transform: translateY(-10px) scale(.96); }
.js-anim .etape.vu .notif      { opacity: 1; transform: none;  transition-delay: .42s; }
.js-anim .etape.vu .notif-pale { opacity: .55; transform: scale(.96); transition-delay: .18s; }

/* L'en-tête de l'agenda arrive avant ses lignes. */
.js-anim .agenda-titre {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js-anim .etape.vu .agenda-titre { opacity: 1; transform: none; transition-delay: .14s; }

/* ---- Les étapes, en timeline ----------------------------------------- */

/* Trois colonnes : le filet et son numéro, le texte, le visuel. Le filet
   de chaque étape se remplit quand elle entre à l'écran — pas un filet
   global piloté au scroll, qui aurait demandé une timeline scroll() ;
   chaque segment se suffit et ça se lit pareil. */
.etapes { display: grid; gap: clamp(56px, 6vw, 88px); }

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.etape-num {
  grid-column: 1;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--muted); padding-top: 6px;
}

/* Le filet part sous le numéro et descend jusqu'à l'étape suivante. */
.etape-fil {
  position: absolute; left: 5px; top: 34px; bottom: calc(-1 * clamp(56px, 6vw, 88px));
  width: 1px; background: #c5cdbf;
}
.etape:last-child .etape-fil { display: none; }

.etape-fil::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink); transform-origin: top;
  /* État de base = état FINAL. Sans JavaScript ou en mouvement réduit, les
     règles d'animation ne s'appliquent pas du tout : si la base était à
     zéro, le filet et les coches
     resteraient invisibles. */
  transform: scaleY(1);
}

.etape-texte { grid-column: 2; }
.etape-texte h3 {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(25px, 2.4vw, 31px); font-weight: 640; letter-spacing: -.03em;
}
.etape-texte p { margin-top: 12px; max-width: 46ch; color: #50594b; font-size: 16px; }

/* ---- Les visuels ------------------------------------------------------ */

.etape-visuel {
  grid-column: 3;
  display: grid; gap: 10px; align-content: start;
  padding: 22px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255, 255, 255, .55);
}

.bulle, .ligne {
  font-size: 14px; line-height: 1.3;
}
/* Étape 01 : un échange, pas une liste d'étiquettes. Le titre dit « on
   parle de vos besoins » — une conversation le raconte mieux que des tags.
   Les deux répliques sont illustratives : aucun nom, aucun chiffre, rien
   qui puisse se lire comme un témoignage réel. */
.visuel-01 { gap: 12px; }

.bulle {
  padding: 12px 16px; font-size: 14px; line-height: 1.45; max-width: 88%;
}
.bulle-client {
  justify-self: start;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface); border: 1px solid var(--line);
}
.bulle-acs {
  justify-self: end; text-align: right;
  border-radius: 16px 16px 4px 16px;
  background: var(--blue); color: #fff; border: 1px solid var(--blue);
}

/* Une ligne de saisie au repos, avec son curseur : ça dit « la conversation
   continue » sans écrire un mot de plus. */
.saisie {
  height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); display: flex; align-items: center; padding: 0 14px;
}
.curseur { width: 1.5px; height: 17px; background: var(--ink); opacity: .55; }
/* Étape 02 : un planning daté. « Enlèvement » seul est une étiquette ;
   « Mar · Enlèvement » est un rendez-vous. Les jours sont illustratifs. */
.agenda-titre {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.ligne {
  display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}
.jour {
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.coche {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line); position: relative;
}
.coche::after {
  content: ""; position: absolute; left: 5px; top: 3px;
  width: 5px; height: 9px; border: solid var(--blue);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(1);
  transform-origin: center;
}
/* Étape 03 : des notifications reçues. Le titre dit « vous gardez
   l'esprit libre » — on vous tient au courant, vous ne courez après rien.
   Contenu illustratif : aucun nom, aucune date réelle. */
.notif {
  display: grid; gap: 5px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 6px 18px -12px rgba(24, 26, 25, .35);
}
.notif-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notif-marque {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 650; letter-spacing: .01em;
}
.notif-marque::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
}
.notif-quand { font-size: 11px; color: var(--muted); }
.notif-titre { font-size: 15px; font-weight: 600; line-height: 1.3; }
.notif-corps { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* La seconde, plus ancienne, s'efface derrière la première. */
.notif-pale { opacity: .55; transform: scale(.96); transform-origin: top; }
.notif-pale .notif-titre { font-weight: 500; }

@media (max-width: 899px) {
  .etape { grid-template-columns: 44px minmax(0, 1fr); }
  .etape-visuel { grid-column: 2; margin-top: 4px; }
  .etape-fil { left: 3px; }
}

.company-section { padding-block: 130px; }
.company-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 90px; align-items: center; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.person-second { margin-top: 65px; }
.person-image { position: relative; aspect-ratio: .85; border-radius: 20px; overflow: hidden; background: #e6e9e2; }
.person-second .person-image { background: #e8ecf1; }
.person-image img { height: 100%; width: 100%; object-fit: cover; object-position: top center; filter: grayscale(1); transition: filter .5s; }
.person:hover img { filter: grayscale(0); }
.person figcaption { margin-top: 16px; }
.person figcaption strong { font-size: 15px; font-weight: 600; display: block; }
.person figcaption span { font-size: 12px; color: var(--muted); }
.company-copy h2 { font-size: clamp(37px, 3.5vw, 51px); }
.company-copy p { margin-top: 24px; color: var(--muted); font-size: 16px; }
.company-copy .text-link { margin-top: 30px; }

.fleet-section { position: relative; height: 360px; overflow: hidden; }
.fleet-section > img { object-fit: cover; object-position: center 57%; filter: grayscale(1); }
.fleet-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #08120dd9, #08120d55 70%, #08120d40); }
.fleet-caption { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; color: white; }
.fleet-caption p { font-family: var(--font-display),sans-serif; font-weight: 640; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.1; letter-spacing: -.035em; max-width: 680px; }
.fleet-caption span { font-size: 18px; margin-top: 18px; color: #e2e6df; }

.contact-section { padding-block: 120px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: start; }
.contact-copy { padding-top: 18px; }
.contact-copy > p { color: var(--muted); margin-top: 25px; max-width: 380px; }
.contact-links { display: grid; gap: 24px; margin-top: 40px; }
.contact-links > a { display: grid; grid-template-columns: 48px 1fr 22px; align-items: center; gap: 15px; }
.contact-icon { border: 1px solid var(--line); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; }
.contact-links small { display: block; font-size: 12px; color: var(--muted); }
.contact-links strong { font-size: 21px; font-weight: 500; }
.contact-links a:hover strong { color: var(--blue); }
.contact-copy .opening-hours { font-size: 14px; margin-top: 32px; }
.contact-panel { padding: 36px; background: #edf0e9; border-radius: 24px; }
.contact-panel > h3 { font-size: 26px; margin-bottom: 28px; }
.site-footer { border-top: 1px solid var(--line); padding-top: 55px; }
.footer-main { display: grid; grid-template-columns: 200px 1fr 1.4fr 48px; gap: 35px; align-items: center; padding-bottom: 50px; }
.footer-main > p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.footer-main address { font-style: normal; font-size: 14px; color: var(--muted); display: flex; gap: 12px; }
.footer-main address svg { flex-shrink: 0; margin-top: 3px; }
.back-to-top { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }
.back-to-top:hover { background: white; }
.footer-bottom { display: flex; gap: 30px; border-top: 1px solid var(--line); padding-block: 22px; color: var(--muted); font-size: 12px; }
.footer-bottom a { margin-left: auto; }

@media (min-width: 1600px) {
  .hero { padding-top: 164px; }
}
@media (max-width: 1100px) {
  .container { width: calc(100% - 72px); }
  .header-bar { gap: 22px; padding-left: 32px; padding-right: 20px; }
  .site-header.is-scrolled .header-bar { padding-left: 24px; padding-right: 12px; }
  .desktop-nav { gap: 20px; font-size: 14px; }
  .header-contact { padding-inline: 18px; font-size: 13px; }
  .proof-grid { gap: 45px; }
  .proof-number { padding-left: 40px; }
  .featured-service-body { padding: 25px; }
  .service-title-row h3 { font-size: 25px; }
  .supporting-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .supporting-service h3, .supporting-service > p { min-height: auto; }
  .supporting-service .service-details summary { font-size: 14px; }
  .company-grid { gap: 45px; }
  .contact-grid { gap: 45px; }
  .contact-panel { padding: 28px; }
  .footer-main { grid-template-columns: 170px 1fr 1.4fr 46px; gap: 20px; }
}
@media (max-width: 899px) {
  .desktop-nav, .header-contact { display: none; }
  .menu-toggle { display: grid; }
  .site-header { top: 18px; width: calc(100% - 40px); }
  .header-bar { min-height: 68px; padding-block: 7px; }
  .brand img { width: 113px; height: 48px; }
  .hero { padding-top: 130px; }
  .hero h1 { font-size: clamp(48px, 7.6vw, 66px); }
  .hero-copy > p { font-size: 16px; }
  .proof-message h2 { font-size: 34px; }
  .proof-grid { gap: 28px; }
  .proof-number { padding-left: 28px; }
  .big-number { font-size: 76px; }
  .proof-number > p { font-size: 18px; }
  .proof-signature { font-size: 11px; }
  .commitments { font-size: 13px; gap: 12px; }
  .company-grid { grid-template-columns: 1fr; gap: 60px; }
  .people { max-width: 580px; }
  .company-copy { max-width: 560px; }
  .company-copy h2 { font-size: 48px; }
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 30px; }
  .contact-links strong { font-size: 17px; }
  .contact-links > a { grid-template-columns: 38px 1fr 18px; gap: 10px; }
  .contact-icon { width: 38px; height: 38px; }
  .contact-panel { padding: 24px; }
  .footer-main { grid-template-columns: 160px 1fr 46px; }
  .footer-main > p { display: none; }
}
@media (max-width: 767px) {
  /* Le header est fixe : les ancres doivent dégager sa hauteur. En mobile
     il occupe 18 + 70 = 88 px ; 104 laisse un peu d'air. La valeur était
     à 24 px du temps où le header défilait avec la page. */
  html { scroll-padding-top: 104px; }
  .container { width: calc(100% - 44px); }
  .section { padding-block: 72px; }
  h2 { font-size: 40px; }
  .hero { padding-top: 122px; }
  .hero-copy { width: calc(100% - 30px); }
  .hero h1 { font-size: clamp(36px, 7.9vw, 59px); letter-spacing: -.047em; line-height: 1.08; }
  .hero-copy > p { font-size: 15px; max-width: 390px; margin: 21px auto 0; padding-inline: 15px; }
  .hero-actions { flex-direction: column; gap: 17px; margin-top: 23px; }
  .hero-actions .button { padding: 14px 23px; font-size: 14px; }
  .hero-actions .text-link { font-size: 14px; }
  .proof-grid { grid-template-columns: 1fr; gap: 35px; }
  .proof-message h2 { font-size: 37px; }
  .proof-message > p { font-size: 16px; }
  .audience-list { gap: 10px 17px; font-size: 10px; margin-top: 22px; }
  .proof-number { border-left: none; border-top: 1px solid var(--line); padding: 30px 0 0; }
  .big-number { font-size: 94px; }
  .proof-number > p { font-size: 18px; }
  .proof-signature { margin-top: 20px; font-size: 12px; }
  .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading > p { font-size: 16px; margin-top: 20px; }
  .featured-services { grid-template-columns: 1fr; gap: 24px; }
  .service-nettoyage { margin-top: 0; }
  .featured-service { border-radius: 20px; }
  .featured-service-body { padding: 25px; }
  .service-title-row h3 { font-size: 26px; }
  .featured-service-body > p { font-size: 15px; min-height: auto; }
  .supporting-services { gap: 25px; margin-top: 35px; }
  .supporting-service h3 { font-size: 22px; }
  .supporting-service > p { font-size: 14px; }
  .supporting-service .service-details summary { font-size: 12px; align-items: flex-start; }
  .service-details-content .text-link { line-height: 1.4; }
  .services-note { margin-top: 35px; display: grid; gap: 8px; justify-items: center; font-size: 14px; }
  .approach-heading { margin-bottom: 35px; }
  .commitments { flex-direction: column; gap: 16px; margin-top: 35px; font-size: 14px; }
  .company-grid { gap: 45px; }
  .people { gap: 14px; }
  .person-second { margin-top: 42px; }
  .person-image { border-radius: 16px; aspect-ratio: .74; }
  .person figcaption strong { font-size: 13px; }
  .person figcaption span { font-size: 11px; line-height: 1.4; display: block; margin-top: 4px; }
  .company-copy h2 { font-size: 40px; }
  .company-copy p { font-size: 16px; margin-top: 21px; }
  .fleet-section { height: 320px; }
  .fleet-caption p { font-size: 43px; max-width: 330px; }
  .fleet-caption span { font-size: 15px; max-width: 220px; }
  .contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .contact-copy { padding-top: 0; }
  .contact-copy > p { font-size: 16px; }
  .contact-links { gap: 22px; margin-top: 30px; }
  .contact-links > a { grid-template-columns: 45px 1fr 20px; gap: 14px; }
  .contact-icon { width: 45px; height: 45px; }
  .contact-links strong { font-size: 20px; }
  .contact-panel { padding: 24px; border-radius: 20px; }
  .contact-panel > h3 { font-size: 24px; }
  .site-footer { padding-top: 35px; }
  .footer-main { grid-template-columns: 1fr 46px; gap: 30px; padding-bottom: 30px; }
  .footer-brand { grid-column: 1; }
  .footer-brand img { width: 150px; }
  .footer-main address { grid-column: 1; grid-row: 2; font-size: 13px; }
  .back-to-top { grid-column: 2; grid-row: 1; }
  .footer-bottom { flex-wrap: wrap; gap: 10px 20px; font-size: 11px; }
  .footer-bottom a { margin-left: 0; width: 100%; }
}
@media (max-width: 379px) {
  .hero h1 { font-size: 35px; }
  .supporting-services { grid-template-columns: 1fr; }
  .supporting-service .service-details summary { font-size: 14px; }
  .contact-panel { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Formulaire de contact ------------------------------------------- */

.contact-form {
  color: var(--ink, #181a19);
}

.contact-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.contact-form__guidance {
  color: var(--muted, #545a56);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 44rem;
}

.contact-form__field {
  display: grid;
  gap: 0.55rem;
}

.contact-form label {
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.contact-form__optional,
.contact-form__required {
  color: var(--muted, #545a56);
  font-weight: 450;
}

.contact-form__error {
  color: #a51f1f;
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 0;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  appearance: none;
  border: 1px solid var(--line, #d6dbd4);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--ink, #181a19);
  font: inherit;
  line-height: 1.5;
  padding: 0.8rem 0.9rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form select {
  appearance: auto;
  cursor: pointer;
}

.contact-form textarea {
  min-height: 10rem;
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--blue, #002eff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, #002eff) 18%, transparent);
}

.contact-form__field--message {
  margin-top: 1.25rem;
}

.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-form__required {
  margin: 0;
  font-size: 0.84rem;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--blue, #002eff);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.82rem 1.15rem;
  transition: background-color 160ms ease, transform 160ms ease;
}

.contact-form__submit:hover {
  background: var(--ink, #181a19);
}

.contact-form__submit:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue, #002eff) 32%, transparent);
  outline-offset: 3px;
}

.contact-form__submit:active {
  transform: translateY(1px);
}

.contact-form__notice {
  margin: 1rem 0 0;
  border-left: 3px solid var(--blue, #002eff);
  color: var(--muted, #545a56);
  font-size: 0.94rem;
  line-height: 1.55;
  padding: 0.1rem 0 0.1rem 0.8rem;
}

.contact-form__notice a {
  color: var(--ink, #181a19);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.contact-form__noscript {
  color: var(--muted, #545a56);
  line-height: 1.55;
  margin: 1rem 0 0;
}

.contact-form__noscript a {
  color: var(--ink, #181a19);
  font-weight: 700;
}

@media (max-width: 640px) {
  .contact-form__fields {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-form__field--message {
    margin-top: 1rem;
  }

  .contact-form__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-form__submit {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form__submit {
    transition: none;
  }
}

/* ---- Honeypot et page de retour du formulaire ------------------------- */

/* Masqué en CSS et non par type="hidden" : un champ caché est ignoré par la
   plupart des robots, ce qui annulerait le piège. */
.contact-form__trap {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.reply-page { display: grid; place-items: center; min-height: 100vh; text-align: center; }
.reply-page .container { max-width: 620px; padding-block: 60px; }
.reply-brand { display: inline-block; margin-bottom: 40px; }
.reply-page h1 { font-family: var(--font-display), sans-serif; font-size: clamp(32px, 4.5vw, 46px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.reply-page p { margin-top: 22px; color: var(--muted); }
.reply-page .button { margin-top: 36px; }
.reply-errors { list-style: none; margin: 24px 0 0; padding: 0; color: #a51f1f; display: grid; gap: 8px; }

/* ---- Icônes ----------------------------------------------------------- */

/* fill est posé ici et non sur les <path> : les sélecteurs CSS ne
   traversent pas l'arbre fantôme d'un <use>, mais fill s'hérite. */
.icon { fill: currentColor; flex: 0 0 auto; }

/* ---- Icônes d'état, et calages autrefois implicites ------------------- */

/* Les deux icônes sont dans le balisage ; le CSS montre celle qui
   correspond à l'état. Aucun JavaScript ne fabrique d'icône. */
.menu-toggle svg:last-child { display: none; }
.menu-toggle[aria-expanded="true"] svg:first-child { display: none; }
.menu-toggle[aria-expanded="true"] svg:last-child { display: block; }

/* Le composant image du framework posait ce calage tout seul ; en HTML
   il faut l'écrire. */
.fleet-section > img { position: absolute; inset: 0; width: 100%; height: 100%; }