/* ============================================================================
   Nicolas Langlois — feuille de style unique.
   Parti pris : sobre, beaucoup de blanc, les photos font le travail.
   Un seul accent (le bleu du véhicule), pas d'ombres portées, pas de dégradés.
   Un seul JS, pour couper la vidéo si le visiteur demande moins d'animations.
   ========================================================================= */

/* ---------------------------------------------------------------- polices */
@font-face {
  font-family: "Adventor";
  src: url("/assets/fonts/adventor-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Adventor";
  src: url("/assets/fonts/adventor-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- jetons */
:root {
  --blue-900: #14306b;
  --blue-700: #1b4599;
  --blue-500: #0b6fd0;
  --cyan:     #029ddf;
  /* le cyan de marque ne donne que 4,14:1 sur le bleu profond — sous le seuil AA
     de 4,5:1 pour du petit texte. Variante éclaircie réservée aux fonds sombres. */
  --cyan-on-dark: #4fc3f7;

  --ink:      #1b2027;
  --ink-soft: #545d69;
  --line:     #dde3ea;
  --paper:    #ffffff;
  --paper-2:  #f4f7fa;
  --paper-3:  #eaeff5;

  --wrap: 68rem;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --section: clamp(3.5rem, 8vw, 6rem);
  --radius: 10px;

  --display: "Adventor", "Trebuchet MS", sans-serif;
  --text: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.97rem + 0.2vw, 1.0625rem)/1.65 var(--text);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--blue-900);
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p, ul, ol { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--blue-500); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blue-900); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap) 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.bare { list-style: none; padding: 0; }
.lead { font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); color: var(--ink-soft); line-height: 1.55; }
.muted { color: var(--ink-soft); }

.skip {
  position: absolute; left: -9999px;
  background: var(--blue-700); color: #fff; padding: .8rem 1.2rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- en-tête */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
/* Collant seulement à partir du grand écran : sur mobile, l'en-tête fait
   trois lignes (marque, menu, téléphone) et mangeait 228 px de haut en
   permanence — un quart de l'écran d'un téléphone. Mesuré, pas supposé. */
@media (min-width: 56rem) {
  .site-header { position: sticky; top: 0; z-index: 50; }
}
.site-header__inner {
  display: flex; align-items: center; gap: .6rem 1.5rem;
  flex-wrap: wrap;
  padding-block: .55rem;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; margin-right: auto;
  padding-block: .3rem;  /* porte la zone tactile à 44 px */
}
.brand img { width: 46px; height: auto; }
.brand__text { display: flex; flex-direction: column; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  color: var(--blue-900); line-height: 1.15;
}
.brand__role { font-size: .76rem; color: var(--ink-soft); line-height: 1.3; }

.site-nav { width: 100%; order: 3; }
@media (min-width: 56rem) { .site-nav { width: auto; order: 0; } }
.site-nav ul {
  display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0;
  /* une seule ligne, qui défile si besoin : quatre entrées qui passent à la
     ligne ajoutaient 44 px de haut à l'en-tête sur téléphone */
  flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; }
@media (min-width: 56rem) { .site-nav ul { flex-wrap: wrap; overflow: visible; } }
.site-nav a {
  display: flex; align-items: center; min-height: 44px;  /* cible tactile */
  padding: .35rem .75rem; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.site-nav a:hover { background: var(--paper-2); color: var(--blue-900); }
.site-nav a.is-active { color: var(--blue-700); box-shadow: inset 0 -2px 0 var(--blue-700); border-radius: 0; }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem;
  font: 600 1rem/1.2 var(--text);
  border-radius: var(--radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--blue-700); color: #fff; }
.btn--primary:hover { background: var(--blue-900); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--blue-900); background: var(--paper); }
.btn--ghost:hover { border-color: var(--blue-700); color: var(--blue-900); background: var(--paper-2); }
.btn--phone { border-color: var(--line); color: var(--blue-900); font-variant-numeric: tabular-nums; }
.btn--phone:hover { border-color: var(--blue-700); background: var(--paper-2); }
/* sur téléphone, la barre d'action basse porte déjà « Appeler » :
   le numéro dans l'en-tête ferait doublon et coûterait 52 px de haut */
.site-header .btn--phone { display: none; }
@media (min-width: 56rem) { .site-header .btn--phone { display: inline-flex; } }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section); }
.section--tint { background: var(--paper-2); }
.section--ink { background: var(--blue-900); color: #eef3fb; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: #9fd0f5; }
.section--ink .lead, .section--ink .muted { color: #c4d2e9; }
.section__head { max-width: 46rem; margin-bottom: calc(var(--gap) * 1.1); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font: 700 .78rem/1 var(--text);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-500); margin-bottom: .9rem;
}
.section--ink .eyebrow { color: var(--cyan-on-dark); }

/* ---------------------------------------------------------------- héro */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section); }
.hero__grid {
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: calc(var(--gap) * 1.4); }
}
.hero h1 { margin-bottom: .5em; }
.hero__media img { border-radius: var(--radius); width: 100%; }
.hero__caption {
  margin-top: .7rem; font-size: .85rem; color: var(--ink-soft);
  border-left: 3px solid var(--cyan); padding-left: .7rem;
}

/* ---------------------------------------------------------------- grilles */
.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* deux portes d'entrée : nettoyage / images */
.door {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.door:hover { border-color: var(--blue-700); transform: translateY(-2px); color: inherit; }
.door img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.door__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.door__body h3 { margin-bottom: .4rem; }
.door__body p { color: var(--ink-soft); font-size: .96rem; }
.door__more {
  margin-top: auto; padding-top: 1rem;
  font-weight: 700; color: var(--blue-500); font-size: .95rem;
}
.door:hover .door__more { color: var(--blue-900); }

/* cartes de prestation */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; background: var(--paper);
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-soft); font-size: .96rem; }

/* étapes numérotées */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--gap); } }
.steps li { counter-increment: step; padding-top: 3.1rem; position: relative; }
.steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-700); color: #fff;
  font: 700 1.05rem/1 var(--display);
}
.steps h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.steps p { font-size: .93rem; color: var(--ink-soft); }

/* bandeau de preuve */
.proof { display: grid; gap: 1.2rem; }
@media (min-width: 48rem) { .proof { grid-template-columns: repeat(3, 1fr); gap: var(--gap); } }
.proof__item { border-left: 3px solid var(--cyan); padding-left: 1.1rem; }
.proof__big {
  display: block; font: 700 2rem/1.1 var(--display); color: var(--blue-900);
}
.section--ink .proof__big { color: #fff; }
.proof__item p { font-size: .93rem; margin: .35rem 0 0; }

/* figures et galeries */
.figure { margin: 0; }
.figure img { border-radius: var(--radius); width: 100%; }
.figure figcaption {
  margin-top: .6rem; font-size: .85rem; color: var(--ink-soft);
  border-left: 3px solid var(--line); padding-left: .7rem;
}
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
.gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery--tall img { aspect-ratio: 3 / 4; }

/* bloc chantier */
.case { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 56rem) {
  .case { grid-template-columns: 1fr 1fr; }
  .case--flip .case__media { order: 2; }
}
.case + .case { margin-top: calc(var(--section) * .8); padding-top: calc(var(--section) * .8); border-top: 1px solid var(--line); }
/* un chantier = un bloc texte+visuel, puis sa galerie en PLEINE largeur
   (imbriquée dans la colonne de texte, elle donnait des vignettes minuscules) */
.chantier + .chantier { margin-top: calc(var(--section) * .8); padding-top: calc(var(--section) * .8); border-top: 1px solid var(--line); }
.chantier .gallery { margin-top: var(--gap); }
.case__media img { border-radius: var(--radius); width: 100%; }
/* une source en portrait dans une colonne large devient une tour : on la borne */
.case__media--portrait img { max-width: 22rem; margin-inline: auto; }

/* utilitaire d'espacement (une classe, jamais un attribut style=) */
.mt-gap { margin-top: var(--gap); }

/* liste à puces cochées */
.checks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.checks li { padding-left: 1.9rem; position: relative; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .75rem; height: .42rem;
  border-left: 2.5px solid var(--cyan); border-bottom: 2.5px solid var(--cyan);
  transform: rotate(-45deg);
}

/* bande d'appel à l'action */
.cta { text-align: center; }
.cta h2 { margin-bottom: .4em; }
.cta .btn-row { justify-content: center; margin-top: 1.6rem; }

/* ---------------------------------------------------------------- pied */
.site-footer {
  margin-top: var(--section);
  background: var(--blue-900); color: #d6e0f2;
  padding-block: var(--section) 0;
  font-size: .93rem;
}
.site-footer a { color: #a9d4f7; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: var(--gap); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: .4rem; }
.site-footer__title { font-weight: 700; color: #fff; margin-bottom: .5rem; }
/* liens de pied en liste : cibles tactiles confortables sur mobile */
.site-footer .bare a, .site-footer__grid p > a {
  display: inline-flex; align-items: center; min-height: 44px;
}
@media (min-width: 48rem) {
  .site-footer .bare a, .site-footer__grid p > a { min-height: 0; display: inline; }
}

/* --------------------------------------------------------------- barre d'action mobile
   Motif classique des sites de service local : les deux actions qui comptent
   (appeler, demander un devis) restent sous le pouce. Masquée sur grand écran,
   où l'en-tête collant joue déjà ce rôle. */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.action-bar .btn {
  padding: .7rem .6rem; font-size: .95rem; min-height: 46px;
  white-space: nowrap;  /* « Demander un devis » passait sur deux lignes */
}
body { padding-bottom: 4.4rem; }   /* la barre ne recouvre jamais le pied de page */
@media (min-width: 56rem) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}
.site-footer__legal {
  margin-top: var(--section);
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-block: 1.3rem;
  font-size: .85rem; color: #a9b8d4;
}
.site-footer__legal p { margin: 0; }

/* ---------------------------------------------------------------- prose légale */
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose dl { margin: 0 0 1.1em; }
.prose dt { font-weight: 700; }
.prose dd { margin: 0 0 .6em; }

/* ---------------------------------------------------------------- pictogrammes
   Dessinés à la main en SVG, pas générés : c'est du trait, pas de la photo.
   `currentColor` les fait suivre la couleur du texte, donc ils marchent aussi
   bien sur fond clair que sur fond sombre. Aucun fichier à charger. */
.card__icon {
  display: block;
  width: 3.4rem; height: 3.4rem;
  margin-bottom: .8rem;
  color: var(--blue-500);
}
.section--ink .card__icon { color: var(--cyan-on-dark); }


/* vidéo d'en-tête : même traitement que les images */
.hero__video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--paper-3); }