/* ==================================================================
   David Gindrat — mécanicien agricole, Gimel (VD)

   RÉFÉRENCE : Industrial X.
   Ce qui fait sa signature, relevé sur la page :
     · page BLANCHE, très grands titres en graisse MOYENNE, casse normale
     · un rouge unique, employé peu mais fort
     · des boutons PILULE
     · des blocs SOMBRES qui ponctuent la page (contact, appel, pied)
     · des sur-titres rouges, courts, en capitales espacées
     · beaucoup de blanc — pas de grille de filets

   Le rouge du template est #FF3A2D ; il ne donne que 3,56 de contraste
   avec du texte blanc, donc il échoue le seuil AA. On garde sa teinte en
   l'assombrissant à #DE2116, qui passe à 4,84 sans changer de couleur à
   l'œil. Le #FF3A2D d'origine ne sert plus que sur fond sombre, où il
   remonte à 5,26.
   ================================================================== */

:root {
  --noir:       #101216;
  --encre:      #16181D;
  --gris:       #6A6F78;
  --ligne:      #E3E5E8;
  --surface:    #F5F6F7;
  --blanc:      #FFFFFF;

  --accent:     #DE2116;   /* sur fond clair : texte, boutons */
  --accent-vif: #FF3A2D;   /* sur fond sombre uniquement */
  --makita:     #015982;   /* la marque garde sa couleur */

  --font:       'Archivo', system-ui, -apple-system, sans-serif;

  --r-pill:     999px;
  /* Angles DROITS sur les cartes et les cadres photo, comme Industrial X.
     Les boutons restent en pilule : c'est exactement le contraste du
     modele -- un cadre net, un bouton rond. */
  --r-card:     0;
  --r-media:    0;

  --pad:        clamp(72px, 8.5vw, 130px);
  --entete:     84px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 20px); }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }

/* `.contact input` porte (0,1,1) et battait `.sr-only` a (0,1,0) : le
   champ fichier reprenait 100 % de large et debordait la page de 842px.
   Le selecteur est donc double pour reprendre la main. */
.sr-only,
.contact input.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

/* Decalage en POURCENTAGE de sa propre taille : une valeur en dur
   laisse depasser des que la police ou le remplissage changent. */
.skip-link {
  position: absolute; left: 1rem; top: 0; z-index: 100;
  transform: translateY(-200%);
  background: var(--noir); color: #fff;
  padding: .8rem 1.2rem; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 600;
  transition: transform .18s ease;
}
.skip-link:focus, .skip-link:focus-visible { transform: translateY(1rem); }

/* ---------------- typographie ---------------- */

h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: -.03em; }

h1 {
  font-size: clamp(44px, 6.6vw, 92px);
  line-height: 1.0;
  letter-spacing: -.045em;
  margin-bottom: 26px;
}

h2 {
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -.038em;
  margin-bottom: 22px;
}

h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* Le sur-titre est ROUGE et precede d'un tiret : c'est la marque de
   fabrique d'Industrial X, et c'est ce qui permet aux titres de rester
   en casse normale sans perdre en autorite. */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: currentColor; flex: none;
}
.eyebrow.center { justify-content: center; }

.lead { font-size: 20px; color: var(--gris); max-width: 60ch; }
.small-lead { font-size: 18px; }
.caption { font-size: 13px; color: var(--gris); margin-top: 28px; }
.center { text-align: center; }
.intro { max-width: 70ch; margin: 0 auto 8px; color: var(--gris); }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 15px; text-decoration: none;
  color: var(--accent);
  transition: gap .2s ease;
}
.text-link::after { content: "→"; }
.text-link:hover, .text-link:focus-visible { gap: .85rem; }

/* ---------------- boutons pilule ---------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 54px; padding: 0 30px;
  border: 2px solid var(--accent); border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
  text-align: center;
}
.button:hover, .button:focus-visible { background: #C01A10; border-color: #C01A10; transform: translateY(-2px); }

.button.secondary { background: transparent; color: var(--encre); border-color: var(--ligne); }
.button.secondary:hover, .button.secondary:focus-visible { background: var(--encre); border-color: var(--encre); color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------------- en-tête ---------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.header-bar { height: var(--entete); display: flex; align-items: center; gap: 34px; }
.logo img { height: 44px; width: auto; }

.desktop-nav { margin-left: auto; }
.desktop-nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.desktop-nav a {
  font-size: 15px; font-weight: 500; text-decoration: none;
  color: var(--gris);
  transition: color .2s ease;
}
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--accent); }

.header-cta { min-height: 46px; padding: 0 24px; font-size: 14px; }

.menu-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 13px;
  background: transparent; border: 1px solid var(--ligne); border-radius: var(--r-pill);
  flex-direction: column; justify-content: space-between; cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; background: var(--encre); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-mobile { border-top: 1px solid var(--ligne); padding: 22px 24px 28px; background: var(--blanc); }
.menu-mobile ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 2px; }
.menu-mobile a { display: block; padding: 13px 0; font-size: 19px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ligne); }
.menu-mobile .button { width: 100%; }

/* ---------------- hero pleine largeur ---------------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--entete));
  display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Voile HORIZONTAL : le texte est a gauche, c'est ce cote qui doit
   s'assombrir. Un voile uniforme eteindrait la photo entiere. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,12,16,.86), rgba(10,12,16,.55) 46%, rgba(10,12,16,.12) 78%, transparent);
}

.hero-content { position: relative; padding: 100px 0; }

/* Pas de panneau encadre : le texte se pose DIRECTEMENT sur la photo,
   comme dans Industrial X. C'est le voile qui porte la lisibilite. */
.hero-panel { width: min(760px, 100%); color: #fff; }
.hero-panel .eyebrow { color: var(--accent-vif); }
.hero-panel .lead { color: rgba(255,255,255,.86); }

/* ---------------- bandeau de confiance ---------------- */

.trust-strip { background: var(--noir); color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid div { padding: 34px 30px; border-left: 1px solid rgba(255,255,255,.12); }
.trust-grid div:first-child { border-left: 0; padding-left: 0; }
.trust-grid strong { display: block; font-size: 19px; font-weight: 600; }
.trust-grid span { display: block; font-size: 14px; color: rgba(255,255,255,.6); margin-top: 4px; }

/* ---------------- sections ---------------- */

.section { padding: var(--pad) 0; }
.shaded { background: var(--surface); }

.section-heading {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 60px; margin-bottom: 58px;
}
.section-heading > p { max-width: 40ch; color: var(--gris); margin: 0; }
.section-heading.compact { margin-bottom: 44px; }

/* ---------------- cartes de service ---------------- */

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.service-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 30px 34px;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-card);
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.service-card:hover, .service-card:focus-within {
  transform: translateY(-6px);
  background: var(--blanc);
  box-shadow: 0 26px 54px rgba(16,18,22,.11);
}

.service-body { padding: 0; display: flex; flex-direction: column; flex: 1; }

/* L'icone reste un TRAIT, pas une pastille : dans Industrial X c'est le
   chiffre qui porte la serie, l'icone ne fait que nommer le service.
   Une pastille rouge de 58px lui volerait la hierarchie. */
.service-card .icon {
  width: 30px; height: 30px; margin: 0 0 58px;
  display: grid; place-items: center;
  color: var(--accent);
  background: none; border: 0; border-radius: 0;
}
.service-card .icon svg, .service-card .icon i {
  width: 30px; height: 30px; stroke-width: 1.5;
}

.service-card h3 { font-size: 22px; font-weight: 500; margin-bottom: 10px; }
.service-card p { color: var(--gris); font-size: 15px; flex: 1; }
.service-card .text-link { margin-top: 22px; align-self: flex-start; font-size: 14px; }

/* Le numero d'Industrial X : GRAND, maigre, cale en haut a droite, dans
   l'encre du texte. Il compte la serie a distance -- d'ou le grand vide
   qui le separe du titre. Ce n'est plus l'etiquette posee sur une photo. */
.number {
  position: absolute; right: 26px; top: 18px;
  font-size: clamp(38px, 3.4vw, 58px);
  font-weight: 400; line-height: 1; letter-spacing: -.02em;
  /* Le chiffre COMPTE la serie, il ne la titre pas : dans cette teinte il
     se lit sans disputer la hierarchie au h3. Purement decoratif, d'ou
     l'aria-hidden -- un lecteur d'ecran n'a pas a annoncer « zero un ». */
  color: #AEB4BC;
  transition: color .28s ease;
}
.service-card:hover .number,
.service-card:focus-within .number { color: var(--accent); }

/* ---------------- étapes ---------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* Escalier facon Industrial X. C'est ICI qu'il a un sens : trois etapes
   numerotees, dont la premiere est deja le bloc sombre -- exactement la
   serie 01/02/03 du modele, ou le 01 sombre est aussi le plus bas.

   La marge basse NEGATIVE compense exactement la marge haute. En grille
   `align-items: stretch`, la hauteur d'une carte vaut la hauteur de rangee
   MOINS ses marges : sans cette compensation, la premiere colonne
   grandirait la rangee de 56 px et les deux autres s'etireraient d'autant
   -- on obtiendrait des cartes inegales au lieu d'un decalage.

   Au-dessus de 850 px seulement : en dessous la grille passe a une seule
   colonne et un decalage vertical n'aurait plus aucun sens. */
@media (min-width: 851px) {
  /* Une SEULE source pour la hauteur de marche : la compensation ne peut
     plus diverger du decalage. Elle suit la largeur parce que le padding
     bas de section la suit aussi -- a 851 px un decalage fixe de 56 px ne
     laissait plus que 16 px avant la section suivante. */
  .steps { --marche: clamp(30px, 3.9vw, 56px); }
  .steps article:nth-child(1) {
    margin-top: var(--marche);
    margin-bottom: calc(var(--marche) * -1);
  }
  .steps article:nth-child(2) {
    margin-top: calc(var(--marche) / 2);
    margin-bottom: calc(var(--marche) / -2);
  }
}
.steps article {
  padding: 40px 34px;
  background: var(--blanc);
  border-radius: var(--r-card);
  box-shadow: 0 1px 0 var(--ligne);
}
/* Une carte SOMBRE parmi les trois : Industrial X ponctue ses series
   d'un bloc contraste plutot que de les aligner a l'identique. */
.steps article:first-child { background: var(--noir); color: #fff; }
.steps article:first-child p { color: rgba(255,255,255,.66); }
.steps article:first-child span { border-color: rgba(255,255,255,.35); color: #fff; }

.steps span {
  width: 46px; height: 46px; margin-bottom: 24px;
  display: grid; place-items: center;
  border: 2px solid var(--accent); border-radius: var(--r-pill);
  font-weight: 700; color: var(--accent);
}
.steps p { color: var(--gris); font-size: 15px; }

/* ---------------- blocs image + texte ---------------- */

.feature-grid, .zone-grid, .contact-grid {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(36px, 5.5vw, 84px);
  align-items: center;
}
.reverse > div:first-child { order: 2; }
.reverse > div:last-child { order: 1; }

.media { border-radius: var(--r-media); overflow: hidden; background: var(--surface); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.tall { aspect-ratio: 4 / 5; }

/* En deux colonnes, l'image ne DICTE plus la hauteur de la section : elle
   se cale sur la colonne de texte. Le 4/5 sur une colonne de 592 px la
   faisait monter a 740 px, soit 163 px de plus que son texte (Felco) et
   293 px de plus (A propos) -- c'est l'image qui menait la mise en page.
   `align-self: stretch` est indispensable : la grille est en
   `align-items: center`, donc sans lui `height: 100 %` reste indefini. */
@media (min-width: 851px) {
  .feature-grid .media.tall {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 430px;
    max-height: 580px;
  }
}

.checklist { list-style: none; padding: 0; margin: 22px 0; }
.checklist li { padding: 10px 0 10px 30px; border-bottom: 1px solid var(--ligne); position: relative; font-weight: 500; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 1.25em;
  width: 14px; height: 2px; background: var(--accent);
}

/* ---------------- réalisations ---------------- */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.gallery .media { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.gallery .media img { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.gallery article:hover .media img { transform: scale(1.05); }
.gallery h3 { margin-bottom: 6px; }
.gallery p { color: var(--gris); font-size: 15px; }

/* ---------------- marques ---------------- */

.brand-grid {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.brand-grid li { display: flex; }
.brand-grid a {
  flex: 1; min-height: 110px;
  display: grid; place-items: center; padding: 18px;
  background: var(--blanc); border-radius: var(--r-media);
  box-shadow: 0 1px 0 var(--ligne);
  transition: transform .2s ease, box-shadow .2s ease;
}
.brand-grid a:hover, .brand-grid a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16,18,22,.10);
}
/* Hauteur imposee, largeur libre : fixer les deux deformerait une
   marque deposee. */
.brand-grid img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }

/* ---------------- zone d'intervention ---------------- */

.zone-grid { align-items: start; }
.info-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  border-top: 1px solid var(--ligne); padding: 18px 0; font-size: 15px;
}
.info-row strong { font-weight: 600; }
.info-row span { color: var(--gris); }
.zone-grid .text-link { margin-top: 24px; }

.map { border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 1px 0 var(--ligne); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------- contact, en bloc SOMBRE ---------------- */

.contact { background: var(--noir); color: #fff; }
.contact .eyebrow { color: var(--accent-vif); }
.contact h2 { color: #fff; }
.contact > .container > div > p { color: rgba(255,255,255,.66); }
.contact-grid { align-items: start; }

.contact-list { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 13px; }
.contact-list li { display: flex; align-items: center; gap: 13px; }
.contact-list svg, .contact-list i { width: 19px; height: 19px; flex: none; color: var(--accent-vif); }
.contact-list a { text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--accent-vif); }

.social-titre {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin: 34px 0 12px;
}
.social-liens { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.social-liens a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill);
  text-decoration: none; font-size: 14px; font-weight: 500;
  transition: border-color .2s ease, background-color .2s ease;
}
.social-liens a:hover, .social-liens a:focus-visible { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.social-liens .ico { width: 17px; height: 17px; }

.contact form {
  background: var(--blanc); color: var(--encre);
  border-radius: var(--r-card);
  padding: clamp(26px, 3.2vw, 42px);
}
.contact label {
  display: flex; flex-direction: column; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris);
  margin-bottom: 22px;
}
.contact input, .contact select, .contact textarea {
  width: 100%; padding: 15px 16px;
  border: 1px solid var(--ligne); border-radius: 0;
  background: var(--surface); color: var(--encre);
  font: 400 16px var(--font);
}
.contact textarea { resize: vertical; min-height: 128px; }
.contact input:focus-visible, .contact select:focus-visible, .contact textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; background: #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.upload {
  flex-direction: row !important; align-items: center; justify-content: space-between;
  gap: 14px !important;
  border: 1px dashed var(--ligne); border-radius: 0;
  padding: 17px 18px; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.upload:hover, .upload:focus-within { border-color: var(--accent); background: rgba(222,33,22,.04); }
.upload-titre em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .65; }
.upload-action {
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--accent); white-space: nowrap;
}
.contact form .button { width: 100%; }

/* ---------------- appel final ---------------- */


/* ---------------- pied de page ---------------- */

/* Le bandeau rouge separait ces deux blocs. Sans lui, la section contact
   et le pied de page ont EXACTEMENT le meme fond (#101216) : les 122 px
   de padding bas + 76 px de padding haut se lisaient comme un seul aplat
   noir de 198 px, et le pied ne se lisait plus comme un pied. Un filet
   marque la limite, et on retire la moitie du vide. */
.site-footer {
  background: var(--noir); color: rgba(255,255,255,.62);
  padding: 56px 0 26px;
  border-top: 1px solid rgba(255,255,255,.10);
}
#contact.section { padding-bottom: clamp(52px, 4.4vw, 68px); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 10px; }
.footer-brand img { height: 50px; width: auto; margin-bottom: 8px; }
.footer-brand p { font-size: 14px; max-width: 38ch; margin: 0; }
.footer-grid strong { color: #fff; font-weight: 600; margin-bottom: 4px; }
.footer-grid a, .footer-grid span { color: rgba(255,255,255,.62); text-decoration: none; font-size: 14px; }
/* Le survol passe au BLANC : la regle partagee avec la navigation
   claire imposait la couleur d'encre, soit exactement le fond -- le
   lien disparaissait sous le curseur. */
.footer-grid a:hover, .footer-grid a:focus-visible { color: #fff; }

.legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 58px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: rgba(255,255,255,.45);
}
.legal a { color: inherit; text-decoration: none; }
.legal a:hover, .legal a:focus-visible { color: #fff; }

/* ---------------- mouvement ---------------- */

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .72s cubic-bezier(.22,.68,.28,1),
              transform .72s cubic-bezier(.22,.68,.28,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Variantes d'entree. La direction sert la LECTURE : dans un bloc
   image + texte, l'image entre d'un cote et le texte de l'autre, les deux
   convergent. Tout faire monter donne un defilement uniforme et mou. */
.reveal[data-reveal="gauche"] { transform: translateX(-34px); }
.reveal[data-reveal="droite"] { transform: translateX(34px); }
.reveal[data-reveal="zoom"]   { transform: scale(.955); }
.reveal[data-reveal="gauche"].is-visible,
.reveal[data-reveal="droite"].is-visible,
.reveal[data-reveal="zoom"].is-visible { transform: none; }

/* ---- parallaxe ----
   La photo est plus HAUTE que son cadre. Sans cette marge, la translation
   decouvrirait une bande vide en haut ou en bas du cadre. L'amplitude en
   JS reste inferieure a la moitie du debord, jamais egale. */
.hero-media img { height: 118%; top: -9%; position: relative; }
.media.parallaxe img { height: 124%; top: -12%; position: relative; }
.hero-media img, .media.parallaxe img { will-change: transform; }

/* Le contenu du hero s'efface en glissant quand on le depasse : sans lui,
   le texte reste net par-dessus une photo qui bouge, et la parallaxe se
   lit comme un bug d'affichage plutot que comme de la profondeur.
   On pilote .hero-content et NON .hero-panel : le panneau porte deja
   `.reveal`, une transform en ligne ecraserait son animation d'entree. */
.hero-content { will-change: transform, opacity; }

/* ---- typographie ----
   Chaque mot est masque par son propre cadre et remonte a l'interieur.
   `overflow: hidden` sur une boite a la hauteur de la ligne COUPERAIT les
   jambages des g, p, q et de la cedille : d'ou le padding bas compense par
   une marge negative, qui agrandit le cadre sans deplacer le texte. */
.typo-mot {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.typo-mot > span {
  display: inline-block; transform: translateY(110%);
  transition: transform .8s cubic-bezier(.19,.72,.24,1);
}
.typo.is-visible .typo-mot > span { transform: none; }

/* Le tiret rouge de l'exergue se TRACE au lieu d'apparaitre : il annonce
   le titre qui monte juste apres. */
.eyebrow.typo-trait::before { transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.22,.68,.28,1); }
.eyebrow.typo-trait.is-visible::before { transform: scaleX(1); }

/* ---- entete ----
   Pas de LIGNE (elle avait ete refusee) : c'est la hauteur qui se resserre
   et l'opacite du fond qui monte, une fois la page quittee du haut. */
.site-header { transition: background .3s ease, box-shadow .3s ease; }
.site-header .header-bar { transition: height .3s cubic-bezier(.22,.68,.28,1); }
.site-header.est-defile { background: rgba(255,255,255,.94); box-shadow: 0 8px 30px rgba(16,18,22,.07); }
.site-header.est-defile .header-bar { height: calc(var(--entete) - 16px); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal[data-reveal] { opacity: 1; transform: none; }
  /* La parallaxe est desactivee en JS ; on remet aussi les photos a plat
     pour qu'aucune ne reste decalee de -9 %. */
  .hero-media img, .media.parallaxe img { height: 100%; top: 0; transform: none !important; will-change: auto; }
  .site-header.est-defile .header-bar { height: var(--entete); }
}

/* ==================================================================
   PAGE LEGALE
   Cette page n'avait AUCUNE regle : `.legal-page`, `.legal-content`,
   `.narrow` et `.legal-droits` etaient des classes vides. Le texte
   courait donc sur les 1240 px du conteneur -- des lignes de plus de
   200 signes -- et les listes affichaient les puces du navigateur.
   ================================================================== */

.legal-page { padding: calc(var(--entete) + 56px) 0 var(--pad); }
.legal-page .section-heading { display: block; margin-bottom: 56px; }
.legal-page h1 { font-size: clamp(34px, 4.4vw, 60px); max-width: 20ch; }
.legal-page .section-heading > p { color: var(--gris); font-size: 15px; margin-top: 18px; }

.legal-layout {
  display: grid; grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px); align-items: start;
}

/* Sommaire colle en haut : sur 4000 px de texte legal, c'est le seul
   moyen de savoir ou l'on est et d'atteindre une section precise. */
.legal-sommaire { position: sticky; top: calc(var(--entete) + 24px); }
.sommaire-titre {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 16px;
}
.sommaire-liste { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--ligne); }
.sommaire-liste a {
  display: block; padding: 9px 0 9px 18px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.35; color: var(--gris); text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.sommaire-liste a:hover, .sommaire-liste a:focus-visible {
  color: var(--encre); border-left-color: var(--accent);
}

/* La MESURE, seul vrai correctif de lisibilite ici : au-dela d'environ
   75 signes par ligne, l'oeil perd le debut de la ligne suivante. */
.legal-content { max-width: 74ch; }
.legal-content p { color: var(--gris); margin: 0 0 18px; }
.legal-content strong { color: var(--encre); }

/* Le numero de section en rouge : il rythme la lecture sans ajouter de
   filet ni de fond. `scroll-margin-top` evite que le titre vise par le
   sommaire ne se retrouve SOUS l'entete collante. */
.legal-content h2 {
  font-size: clamp(22px, 2vw, 28px); font-weight: 500;
  margin: 52px 0 16px; padding-top: 22px;
  border-top: 1px solid var(--ligne);
  scroll-margin-top: calc(var(--entete) + 24px);
}
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content h3 {
  font-size: 18px; font-weight: 600; margin: 32px 0 12px;
  scroll-margin-top: calc(var(--entete) + 24px);
}

/* Listes au marqueur maison : le meme tiret rouge que les listes de
   l'accueil, a la place des puces du navigateur. */
.legal-content ul { list-style: none; margin: 0 0 18px; padding: 0; }
.legal-content li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  color: var(--gris);
}
.legal-content li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 12px; height: 2px; background: var(--accent);
}

.legal-adresse { line-height: 1.7; }

@media (max-width: 900px) {
  /* Le sommaire passe AU-DESSUS du texte et cesse de coller : une
     colonne collante n'a plus de sens quand elle prend toute la largeur. */
  .legal-layout { grid-template-columns: 1fr; gap: 36px; }
  .legal-sommaire { position: static; }
  .sommaire-liste { columns: 2; column-gap: 24px; }
}
@media (max-width: 560px) {
  .sommaire-liste { columns: 1; }
}

/* ---------------- blocs a photo pleine moitie -----------------------
   « Spécialiste de proximité » et « Spécialité Felco » : la photo occupe
   toute une moitie de section, bord a bord. Elle sort donc du
   `.container` -- on annule la largeur et les marges de la grille, et on
   deplace le padding vertical de la SECTION vers la colonne de texte,
   sinon la photo garderait une bande vide en haut et en bas.

   `calc(50vw - 620px)` cale le bord exterieur du texte sur celui du
   conteneur du reste de la page (1240 px centres). Sans ce calcul, la
   colonne deborderait de l'alignement general du site.

   La photo est en POSITION ABSOLUE dans son cadre. Sans cela elle impose
   sa hauteur naturelle a la rangee : `height: 100 %` sur une rangee de
   hauteur automatique redevient `auto`, la photo reprend son ratio natif
   et etire la section (1080 px mesures au lieu de 691). Hors flux, le
   cadre s'etire librement jusqu'a la hauteur du texte. */
@media (min-width: 851px) {
  #apropos.section { padding: 0; }

  #apropos > .feature-grid {
    width: 100%; max-width: none; margin: 0;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
  }

  #apropos .media.tall {
    aspect-ratio: auto;
    align-self: stretch;
    position: relative;
    min-height: 460px; max-height: none;
    height: auto;
  }
  #apropos .media.tall img {
    position: absolute; left: 0; top: -12%;
    width: 100%; height: 124%;
    object-fit: cover;
  }

  /* Respiration verticale reduite : `--pad` (jusqu'a 130 px) etait cale
     pour des sections a fond uni. Ici la photo occupe deja toute la
     hauteur, un blanc aussi large de chaque cote allonge la section sans
     rien apporter. */
  #apropos > .feature-grid > :not(.media) {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(52px, 5vw, 84px);
  }
  /* La colonne est passee en flex pour centrer verticalement ; ses
     enfants s'etirent donc sur toute la largeur par defaut, ce qui
     transformait le bouton en barre pleine largeur. On ne recale QUE les
     elements d'action : mettre `align-items: flex-start` sur la colonne
     ferait aussi retrecir les titres et changerait leurs retours a la ligne. */
  /* Titre recalibre pour une DEMI-colonne. Le `clamp` global monte a
     60 px, taille prevue pour un titre qui traverse le conteneur : dans
     548 px il partait sur trois lignes et pesait a lui seul 189 px. */
  #apropos h2 { font-size: clamp(28px, 3.1vw, 46px); }
  /* C'est le PLANCHER du cadre qui fixe la hauteur de la section, pas le
     texte : la colonne de texte ne pese que ~350 px et le bloc paraissait
     ecrase. Le texte reste centre verticalement dans la hauteur ainsi
     obtenue, donc la section garde 600 px a toutes les largeurs au lieu
     de varier avec la longueur des paragraphes. */
  #apropos .media.tall { min-height: 600px; }

  #apropos > .feature-grid > :not(.media) > .button,
  #apropos > .feature-grid > :not(.media) > .actions { align-self: flex-start; }
  #apropos > .feature-grid > :not(.media) {
    padding-left: clamp(30px, 4vw, 72px);
    padding-right: max(24px, calc(50vw - 620px));
  }
}

/* Felco : bloc contenu comme les autres, mais photo a DROITE. Le balisage
   la place en premier ; `order` l'envoie en deuxieme colonne sans toucher
   au HTML, donc sans casser l'ordre de lecture au clavier. */
@media (min-width: 851px) {
  #felco > .feature-grid > .media { order: 2; }
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 1080px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid div:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust-grid div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}

@media (max-width: 850px) {
  .feature-grid, .zone-grid, .contact-grid { grid-template-columns: 1fr; }
  /* En colonne unique, le TEXTE repasse en premier : ouvrir un bloc par
     une image sans titre ne dit pas de quoi il parle. */
  .reverse > div:first-child, .reverse > div:last-child { order: initial; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 20px; }
  .gallery { grid-template-columns: 1fr; }
  .media.tall { aspect-ratio: 3 / 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 32px, 1240px); }
  .hero { min-height: auto; align-items: flex-end; }
  .hero-content { padding: 150px 0 48px; }
  .actions { flex-direction: column; align-items: stretch; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid div { border-left: 0; padding-left: 0; }
  .trust-grid div + div { border-top: 1px solid rgba(255,255,255,.12); }
  .service-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .info-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------- avis clients ---------------- */

.avis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 48px; }

.avis {
  margin: 0; padding: 44px;
  background: var(--blanc); border-radius: var(--r-card);
  box-shadow: 0 1px 0 var(--ligne);
  font-size: 20px; line-height: 1.5;
}
/* Une carte sombre sur deux : la meme ponctuation que les etapes. */
.avis--sombre { background: var(--noir); color: #fff; box-shadow: none; }

.avis p { margin: 0 0 28px; }
.avis p::before { content: "« "; color: var(--accent); }
.avis p::after  { content: " »"; color: var(--accent); }

.avis footer {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris);
}
.avis--sombre footer { color: rgba(255,255,255,.55); }

/* L'etiquette dit CLAIREMENT que la place est vide. Une citation
   inventee serait un mensonge sur une entreprise reelle ; un
   emplacement nomme se comprend et se remplit. */
.avis-attente {
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: rgba(222,33,22,.10); color: var(--accent);
  letter-spacing: .1em;
}
.avis--sombre .avis-attente { background: rgba(255,58,45,.16); color: var(--accent-vif); }

@media (max-width: 850px) {
  .avis-grid { grid-template-columns: 1fr; }
  .avis { padding: 32px; font-size: 18px; }
}

/* ---------------- mot-symbole ----------------
   Le logo devient du TEXTE, comme dans la maquette : deux lignes,
   interligne serre, graisse 800. Une image de 575x197 px etait floue
   des qu'on l'agrandissait et portait ses propres couleurs, etrangeres
   a la palette. En texte, il suit l'encre du site et reste net a toute
   taille -- et il disparait du poids de la page. */

.logo {
  display: inline-block;
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  line-height: 1;
  /* En CAPITALES, le crenage negatif du bas-de-casse fait se toucher les
     lettres : -.055em collait le D au A. Les capitales demandent au
     contraire un peu d'air. */
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--encre);
}

.logo:hover, .logo:focus-visible { color: var(--accent); }

.logo--pied {
  color: #fff;
  font-size: 23px;
  margin-bottom: 10px;
}

/* ---------------- bouton secondaire sur fond SOMBRE ----------------
   `.button.secondary` est ecrit pour un fond CLAIR : encre sur
   transparent, bordure gris pale. Pose sur la photo du hero, il donnait
   1,28 de contraste -- le libelle n'apparaissait qu'au survol, quand le
   fond passait a l'encre. Meme famille de defaut que le survol du pied
   de page : un style de contexte clair applique a un contexte sombre.

   La regle vise TOUS les blocs sombres du site, pas seulement le hero :
   le prochain bloc sombre ajoute sera couvert sans qu'on y pense. */
.hero .button.secondary,
.contact .button.secondary,
.trust-strip .button.secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(4px);
}

.hero .button.secondary:hover,
.hero .button.secondary:focus-visible,
.contact .button.secondary:hover,
.contact .button.secondary:focus-visible,
.trust-strip .button.secondary:hover,
.trust-strip .button.secondary:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--encre);
}