/* =====================================================================
   Darel Services — maquette de refonte (octobre 2026)
   Rouge du logo #FF3131, noir, béton. Titres Big Shoulders, texte Barlow.

    1. Jetons            2. Base               3. Briques communes
    4. En-tête et route  5. Le camion-grue     6. Plaque, boutons, tampon
    7. Hero accueil      8. Bandes de service  9. Bornes (étapes)
   10. Zone (carte 44)  11. Demande et formulaire
   12. Pages intérieures 13. FAQ              14. Pied de page
   15. Animations        16. Téléphone (≤ 900 px)
   17. Landing pages locales (villes × services)
   ===================================================================== */

/* 1. Jetons ----------------------------------------------------------- */
:root {
  --rouge: #FF3131;          /* rouge du logo */
  --rouge-profond: #E0241E;  /* aplats avec texte blanc (contraste 4,7:1) */
  --rouge-texte: #CF1B16;    /* texte rouge sur fond clair (4,7:1 sur béton) */
  --noir: #151515;
  --asphalte: #141517;
  --bitume: #222428;
  --gris: #565A60;
  --gris-clair: #9EA3A9;
  --filet: #D8D4CC;
  --beton: #F1EFEA;
  --blanc: #FFFFFF;
  --bleu-plaque: #0F3FA6;

  --f-titre: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-texte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-plaque: "Barlow Condensed", "Arial Narrow", sans-serif;

  --h-entete: 100px;
  --h-route-m: 66px;
  --marge: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --sortie: cubic-bezier(.2, .8, .2, 1);
}

/* 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--h-entete) + 16px); }
body {
  margin: 0;
  background: var(--beton);
  color: var(--noir);
  font: 400 18px/1.55 var(--f-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
main, .pied { overflow-x: clip; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.08; /* les accents de Big Shoulders sont hauts : en dessous, É et È touchent la ligne du dessus */
  letter-spacing: .005em;
}
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
::selection { background: var(--rouge); color: #fff; }

/* 3. Briques communes -------------------------------------------------- */
.enveloppe { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--marge); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.evitement {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--noir); color: #fff; text-decoration: none; font-weight: 700;
}
.evitement:focus { top: 12px; }

/* Surtitre : deux traits de marquage au sol avant le texte */
.surtitre {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font: 700 14px/1.2 var(--f-texte);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rouge-texte);
}
.surtitre::before {
  content: ""; flex: 0 0 30px; height: 4px;
  background: linear-gradient(90deg, var(--rouge) 0 11px, transparent 11px 19px, var(--rouge) 19px 30px);
}
.sur-fonce .surtitre, .sur-rouge .surtitre { color: #fff; }
.sur-rouge .surtitre::before { background: linear-gradient(90deg, #fff 0 11px, transparent 11px 19px, #fff 19px 30px); }

.section { padding: clamp(68px, 9vw, 132px) 0; }
.section--blanc { background: var(--blanc); }
.section--fonce { background: var(--asphalte); color: #fff; }
.titre-section { font-size: clamp(42px, 5.4vw, 84px); margin-bottom: 22px; }
.chapo { font-size: clamp(18px, 1.5vw, 21px); max-width: 36em; color: var(--gris); }
.sur-fonce .chapo { color: #C9CCD0; }

/* 4. En-tête et route ---------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanc);
  border-bottom: 3px solid var(--noir);
}
.entete__barre {
  height: var(--h-entete);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.entete__logo { position: relative; z-index: 2; align-self: stretch; display: flex; align-items: center; padding-right: 14px; background: var(--blanc); }
.entete__logo img { height: 56px; width: auto; }

.route { position: relative; z-index: 1; align-self: stretch; min-width: 0; }
.route__liste {
  list-style: none; margin: 0; padding: 14px 0 0;
  display: flex; justify-content: center; gap: clamp(22px, 3.4vw, 60px);
}
.route__lien {
  position: relative; display: block; padding: 4px 2px;
  font: 800 21px/1 var(--f-titre); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--noir);
  transition: color .2s;
}
.route__lien:hover, .route__lien:focus-visible, .route__lien.est-cible { color: var(--rouge-texte); }
.route__appel { display: none; }
.entete__horaires { display: none; }

/* 5. Le camion-grue -------------------------------------------------------
   Posé sur le filet noir du bas de l'en-tête. Sa position, ses roues, sa
   grue et son chargement sont pilotés par js/site.js (scripts classiques). */
.camion {
  position: absolute; left: 0; bottom: -2px;
  width: 146px; display: none;
  pointer-events: none; will-change: transform;
  transform: translate3d(-200px, 0, 0);
}
.js-pret .camion { display: block; }
.camion svg { width: 100%; height: auto; overflow: visible; }
.c-ombre { fill: rgba(0, 0, 0, .14); }
.c-charge { transition: none; }

/* 6. Plaque, boutons, tampon ------------------------------------------------
   La plaque : le numéro de téléphone présenté comme une plaque minéralogique,
   bande bleue à gauche (le combiné), bande du département à droite (44). */
.plaque {
  --h: 46px;
  display: inline-flex; align-items: stretch;
  height: var(--h);
  background: #fff; color: var(--noir); text-decoration: none;
  border: 2px solid var(--noir); border-radius: 6px;
  box-shadow: 0 3px 0 var(--noir);
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.plaque:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--noir); }
.plaque:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--noir); }
.plaque__bande {
  flex: 0 0 calc(var(--h) * .56);
  display: grid; place-items: center;
  background: var(--bleu-plaque); color: #fff;
  font: 700 calc(var(--h) * .34)/1 var(--f-plaque);
}
.plaque__bande:first-child { border-radius: 3px 0 0 3px; }
.plaque__bande:last-child { border-radius: 0 3px 3px 0; }
.plaque__bande svg { width: 58%; height: auto; }
.plaque__num {
  display: flex; align-items: center;
  padding: 0 calc(var(--h) * .3);
  font: 600 calc(var(--h) * .6)/1 var(--f-plaque);
  letter-spacing: .03em; white-space: nowrap;
}
.plaque--xl { --h: 76px; box-shadow: 0 5px 0 var(--noir); border-width: 3px; border-radius: 9px; }
.plaque--xl:hover { box-shadow: 0 8px 0 var(--noir); }
.plaque--xl .plaque__bande:first-child { border-radius: 5px 0 0 5px; }
.plaque--xl .plaque__bande:last-child { border-radius: 0 5px 5px 0; }
.plaque-legende { margin: 14px 0 0; font-size: 15px; color: var(--gris); }
.plaque-legende a { color: var(--noir); font-weight: 700; text-underline-offset: 3px; }
.sur-fonce .plaque-legende, .sur-rouge .plaque-legende { color: rgba(255, 255, 255, .86); }
.sur-fonce .plaque-legende a, .sur-rouge .plaque-legende a { color: #fff; }

.bouton {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 22px;
  background: var(--noir); color: #fff;
  font: 700 15px/1 var(--f-texte); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background .2s, color .2s;
}
.bouton svg { width: 20px; height: 12px; flex: none; transition: transform .25s var(--sortie); }
.bouton:hover { background: var(--rouge-profond); }
.bouton:hover svg { transform: translateX(4px); }
.sur-fonce .bouton { background: #fff; color: var(--noir); }
.sur-fonce .bouton:hover { background: var(--rouge-profond); color: #fff; }
.bouton--rouge { background: var(--rouge-profond); }
.bouton--rouge:hover { background: var(--noir); }

/* Tampon : l'étiquette « gratuit » posée de travers sur les photos */
.tampon {
  position: absolute; z-index: 2;
  display: grid; justify-items: center; gap: 2px;
  padding: 14px 20px 11px;
  background: #fff; color: var(--rouge-texte);
  border: 3px solid var(--rouge);
  outline: 1.5px solid var(--rouge); outline-offset: -9px;
  font-family: var(--f-titre); text-transform: uppercase; line-height: .9; text-align: center;
  transform: rotate(-7deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
.tampon span { font-weight: 800; font-size: 15px; letter-spacing: .1em; }
.tampon strong { font-weight: 900; font-size: 46px; letter-spacing: .02em; }

/* 7. Hero de l'accueil ------------------------------------------------------- */
.hero { padding-top: clamp(30px, 4.6vw, 64px); }
.hero__haut {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 31%);
  gap: clamp(28px, 4vw, 64px); align-items: end;
}
.hero__h1 { font-size: clamp(50px, 6.3vw, 100px); line-height: .94; }
.hero__h1 .l { display: block; overflow: hidden; padding: .17em 0 .03em; margin: -.17em 0 -.03em; }
.hero__h1 .l > span { display: block; }
.hero__h1 .rouge { color: var(--rouge); }
.hero__h1-suite {
  display: block; margin-top: .42em;
  font: 600 clamp(19px, 1.85vw, 27px)/1.25 var(--f-texte);
  text-transform: none; letter-spacing: 0; color: var(--gris);
}
.hero__cote { padding-bottom: 6px; }
.hero__cote > p { font-size: 19px; max-width: 30em; margin-bottom: 26px; }
/* La scène : le vrai camion, détouré, posé sur une route qui ferme le hero.
   Toutes les mesures découlent de la largeur du camion (--l) : corps 1547 × 684,
   roue arrière posée à 80,5 % de sa hauteur, roue avant à 99,5 % (perspective). */
.scene {
  --l: clamp(330px, 64vw, 1240px);
  --h: calc(var(--l) * .44215);
  --pad: 0px; /* bande libre au-dessus du camion (téléphone : place du tampon) */
  position: relative;
  height: calc(var(--pad) + var(--h) * 1.12);
  margin-top: clamp(26px, 3vw, 48px);
}
.scene__route { /* bitume, ligne pointillée côté opposé (derrière le camion), ligne de rive devant */
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h) * .38);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .88) 0 46px, transparent 46px 86px) 0 calc(var(--h) * .025) / 100% 4px no-repeat,
    linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)) 0 calc(100% - var(--h) * .055) / 100% 4px no-repeat,
    linear-gradient(180deg, #1b1c1f, var(--asphalte) 60%);
}
.scene__camion { position: absolute; left: calc(var(--l) * -.025); top: var(--pad); width: var(--l); }
.scene__caisse { position: relative; transform-origin: 80.3% 99.5%; }
.scene__corps { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.scene__roue { position: absolute; z-index: 2; display: block; max-width: none; }
.scene__roue--ar { left: 18.811%; top: 61.55%; width: 7.369%; height: 19.152%; transform-origin: 50% 49.92%; }
.scene__roue--av { left: 73.691%; top: 73.099%; width: 13.187%; height: 26.608%; transform-origin: 50% 50%; }
.scene__ombre { /* ombre portée le long de la ligne d'appui (8,3° : la roue arrière est plus loin) */
  position: absolute; z-index: 0; left: 8%; top: 82%; width: 86%; height: 16%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 55%, transparent);
  transform: rotate(8.3deg); filter: blur(3px);
}
.scene .tampon { right: max(var(--marge), calc((100vw - var(--max)) / 2 + var(--marge))); top: calc(var(--h) * .22); } /* aligné sur la colonne du numéro */

/* 8. Bandes de service -------------------------------------------------------- */
.service__grille {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(32px, 5.4vw, 96px); align-items: center;
}
.service--inverse .service__photo { order: 2; }
.service__photo { position: relative; margin: 0; }
.service__photo picture { display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.service__photo img { width: 100%; height: 100%; object-fit: cover; }
.service__photo figcaption {
  position: absolute; left: 0; bottom: 0;
  padding: 9px 14px; background: var(--noir); color: #fff;
  font: 600 13px/1.2 var(--f-texte); letter-spacing: .06em; text-transform: uppercase;
}
.service__texte > p { max-width: 33em; }
.service h2 { font-size: clamp(44px, 5.4vw, 86px); margin-bottom: 24px; }
.service h2 em { font-style: normal; color: var(--rouge); }

/* Véhicules : pictogrammes au trait */
.vehicules {
  list-style: none; margin: 30px 0 36px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--noir);
}
.vehicules li {
  display: grid; align-content: start; gap: 10px;
  padding: 18px 12px 0 0;
  font: 600 15px/1.25 var(--f-texte);
}
.vehicules svg { width: 62px; height: auto; color: var(--noir); }
.deux-col .vehicules { margin-top: 8px; margin-bottom: 0; }
.deux-col .vehicules li { font-size: 17px; gap: 14px; padding-top: 24px; }
.deux-col .vehicules svg { width: 86px; }

/* Métaux : chaque métal avec sa vraie teinte */
.metaux {
  list-style: none; margin: 30px 0 36px; padding: 18px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px;
  border-top: 2px solid var(--noir);
}
.metal { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 12px; font: 600 15px/1.2 var(--f-texte); }
.metal__ech {
  position: relative; overflow: hidden;
  height: 30px; border-radius: 2px;
  background: var(--m);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.metal__ech::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 46%, transparent 62%);
  transform: translateX(-130%);
}
.metal:hover .metal__ech::after { transform: translateX(130%); transition: transform .8s var(--sortie); }
.metal--acier { --m: linear-gradient(140deg, #4e2f20, #9b5934 36%, #6e3f27 58%, #b06a3c 80%, #57331f); }
.metal--cuivre { --m: linear-gradient(140deg, #7b3f22, #d9895a 40%, #b4643a 62%, #e8a273 82%, #8a4727); }
.metal--alu { --m: linear-gradient(140deg, #8f9499, #eef0f2 40%, #c4c8cc 62%, #f5f6f7 82%, #a2a7ac); }
.metal--plomb { --m: linear-gradient(140deg, #43474c, #7d8288 42%, #5c6167 64%, #8a8f95 84%, #4a4e53); }
.metal--zinc { --m: linear-gradient(140deg, #6f7c86, #c8d2d9 40%, #93a0a9 62%, #d3dce2 82%, #75828b); }
.metal--laiton { --m: linear-gradient(140deg, #7a5f18, #e3c25f 40%, #b8912f 62%, #efd37c 82%, #86691d); }
.service__note { font-size: 16px; color: var(--gris); margin: -14px 0 32px; }
.deux-col .metaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 22px; margin-top: 8px; padding-top: 24px; }
.deux-col .metal { grid-template-columns: 72px 1fr; gap: 14px; font-size: 18px; }
.deux-col .metal__ech { height: 46px; }

/* Bennes : trois tailles, à l'échelle de leur volume */
.service--benne { background: var(--asphalte); color: #fff; padding: clamp(60px, 7vw, 100px) 0; }
.service--benne .service__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.service--benne h2 { font-size: clamp(40px, 4.4vw, 68px); margin-bottom: 18px; }
.service--benne p { color: #C9CCD0; }
.bennes {
  list-style: none; margin: 0; padding: 0 0 0;
  display: grid; grid-template-columns: .66fr .83fr 1fr; gap: clamp(14px, 2.4vw, 34px); align-items: end;
  border-bottom: 3px solid #fff;
}
.benne { display: grid; gap: 14px; }
.benne svg { width: 100%; height: auto; }
.benne__vol { font: 900 clamp(26px, 2.6vw, 38px)/1 var(--f-titre); text-transform: uppercase; color: #fff !important; margin: 0 0 8px; }
.benne__vol small { font-size: .62em; text-transform: none; }
.benne__usage { font-size: 15px; line-height: 1.35; color: #B9BDC2; min-height: 2.7em; }
.benne__fig { padding-bottom: 0; }
.bennes-legende { display: grid; grid-template-columns: .66fr .83fr 1fr; gap: clamp(14px, 2.4vw, 34px); margin-top: 16px; }

/* 9. Bornes (étapes) ----------------------------------------------------------
   Des bornes kilométriques à tête rouge plantées le long d'une route. */
.etapes {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px);
  position: relative;
}
.etapes::before { /* la route : bitume et marquage au sol */
  content: ""; position: absolute; left: 0; right: 0; top: 89px; height: 12px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 22px, transparent 22px 42px) center / 100% 2px no-repeat, var(--asphalte);
  transform-origin: left center;
}
.etape { position: relative; }
.borne { width: 64px; height: 92px; margin-left: 2px; }
.borne__corps { fill: #fff; stroke: var(--noir); stroke-width: 3; }
.borne__tete { fill: var(--rouge); }
.borne__num { font: 900 36px var(--f-titre); fill: var(--noir); }
.etape h3 { font-size: clamp(26px, 2.2vw, 32px); margin: 36px 0 10px; }
.etape p { font-size: 17px; color: var(--gris); max-width: 22em; }
.a-preparer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: clamp(30px, 4vw, 48px); padding: 18px 22px;
  background: var(--beton); border-left: 6px solid var(--rouge);
  font-size: 17px;
}
.a-preparer strong { font-family: var(--f-titre); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }

/* 10. Zone (carte du 44) -------------------------------------------------------- */
.zone__grille { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.carte44 { width: 100%; height: auto; overflow: visible; }
.carte44__dep { fill: #fff; stroke: var(--noir); stroke-width: 3; stroke-linejoin: round; }
.carte44__ville circle { fill: var(--noir); }
.carte44__ville text { font: 600 23px var(--f-texte); fill: var(--noir); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.carte44__base circle { fill: var(--rouge); }
.carte44__base .halo { fill: none; stroke: var(--rouge); stroke-width: 3; opacity: .35; }
.carte44__base text { font: 900 32px var(--f-titre); text-transform: uppercase; fill: var(--rouge-texte); letter-spacing: .03em; }
.carte44__base .carte44__commune { font: 600 21px var(--f-texte); text-transform: none; letter-spacing: 0; fill: var(--noir); }
.villes { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.villes li {
  padding: 8px 12px; background: #fff; border: 1.5px solid var(--noir);
  font: 600 15px/1 var(--f-texte);
}
.villes li.est-base { background: var(--noir); color: #fff; }

/* 11. Demande et formulaire ---------------------------------------------------- */
.demande { background: var(--rouge-profond); color: #fff; padding: clamp(68px, 9vw, 128px) 0; }
.demande__grille { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(34px, 5vw, 88px); align-items: start; }
.demande .titre-section { color: #fff; }
.demande .chapo { color: #fff; } /* 4,7:1 sur le rouge ; à 90 % on tombait à 4,0:1 */
.demande__coord { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid rgba(255, 255, 255, .55); }
.demande__coord li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .35); font-size: 17px; }
.demande__coord b { font: 700 13px/1.6 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.demande__coord a { color: #fff; text-underline-offset: 3px; }

.formulaire {
  position: relative;
  background: #fff; color: var(--noir);
  padding: clamp(22px, 3vw, 40px);
  border: 3px solid var(--noir);
  box-shadow: 12px 12px 0 var(--noir);
}
.formulaire__titre { font: 900 30px/1 var(--f-titre); text-transform: uppercase; margin: 0 0 20px; }
.champ { display: grid; gap: 7px; align-content: start; margin: 0 0 18px; border: 0; padding: 0; min-width: 0; } /* start : dans .duo, l'erreur du voisin n'étire pas le champ */
.champ > label, .champ > legend, .champ__etiq {
  padding: 0; font: 700 13px/1.2 var(--f-texte); letter-spacing: .09em; text-transform: uppercase;
}
.champ__facultatif { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gris); }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ select, .champ textarea {
  width: 100%; padding: 13px 14px;
  font: 500 17px/1.3 var(--f-texte); color: var(--noir);
  background: #fff; border: 2px solid var(--noir); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ select { background-image: linear-gradient(45deg, transparent 50%, var(--noir) 50%), linear-gradient(135deg, var(--noir) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--rouge); outline-offset: 0; }
.champ--erreur input, .champ--erreur .plaque-saisie { border-color: var(--rouge-texte); background: #FFF4F3; }
.champ__erreur { display: none; font-size: 14px; font-weight: 600; color: var(--rouge-texte); }
.champ--erreur .champ__erreur { display: block; }
.formulaire__echec { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--rouge-texte); }
.formulaire__echec[hidden] { display: none; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Choix du service : trois tuiles */
.choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 14px 6px 12px; border: 2px solid var(--noir); cursor: pointer;
  font: 700 15px/1.15 var(--f-texte);
  transition: background .15s, color .15s;
}
.choix label svg { width: 46px; height: auto; }
.choix label:hover { background: var(--beton); }
.choix input:checked + label { background: var(--noir); color: #fff; }
.choix input:focus-visible + label { outline: 3px solid var(--rouge); outline-offset: 2px; }

/* La case immatriculation, en forme de plaque */
.plaque-saisie {
  display: flex; align-items: stretch; height: 56px; max-width: 330px;
  border: 2px solid var(--noir); border-radius: 6px; background: #fff; overflow: hidden;
}
.plaque-saisie__bande {
  flex: 0 0 34px; display: grid; place-items: center; align-content: center; gap: 2px;
  background: var(--bleu-plaque); color: #fff; font: 700 14px/1 var(--f-plaque);
}
.plaque-saisie__bande svg { width: 18px; height: 18px; }
.plaque-saisie input {
  flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; padding: 0 12px !important;
  font: 600 30px/1 var(--f-plaque) !important; letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.plaque-saisie:focus-within { outline: 3px solid var(--rouge); outline-offset: 0; }
.plaque-saisie input::placeholder { color: #C3C6CA; }
.si-epave, .si-benne, .si-ferraille { display: none; }
.formulaire[data-service="epave"] .si-epave,
.formulaire[data-service="benne"] .si-benne,
.formulaire[data-service="ferraille"] .si-ferraille { display: grid; }
.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 6px; }
.formulaire__mention { font-size: 13px; line-height: 1.45; color: var(--gris); margin: 16px 0 0; }
.formulaire__ok { display: none; text-align: left; }
.formulaire.est-envoye .formulaire__corps { display: none; }
.formulaire.est-envoye .formulaire__ok { display: block; }
.formulaire__ok h3 { font-size: 40px; margin: 6px 0 12px; }
.formulaire__ok p { color: var(--gris); }

/* 11 bis. Avis Google ---------------------------------------------------------
   La pastille de note (heros et section avis) et la section avis de l'accueil :
   quatre avis repris mot pour mot, qui s'allument mot à mot au défilement. */
.note-google {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 8px 15px 8px 10px;
  background: #fff; color: var(--noir); text-decoration: none;
  border: 1.5px solid var(--noir); border-radius: 999px;
  font: 600 15px/1 var(--f-texte);
  transition: transform .15s, box-shadow .15s;
}
.note-google:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--noir); }
.note-google__g { width: 20px; height: 20px; flex: none; }
.note-google__score { font: 800 18px/1 var(--f-texte); }
.note-google__etoiles { position: relative; display: block; width: 88px; height: 15px; flex: none; }
.note-google__etoiles svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.note-google__etoiles .vides { fill: #DAD7D0; }
.note-google__etoiles .pleines { fill: #F4B400; }
.note-google__sep { width: 1px; height: 18px; background: var(--filet); flex: none; }
.note-google__nb { color: var(--gris); white-space: nowrap; }
.note-google__nb b { color: var(--noir); font-weight: 700; }
.hero__cote .note-google, .page-hero__texte .note-google { display: flex; width: max-content; }

.avis { padding: clamp(64px, 8vw, 112px) 0; }
.avis__tete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  padding-bottom: 22px; border-bottom: 3px solid var(--noir);
}
.avis__titre { font-size: clamp(40px, 4.6vw, 68px); }
.avis__tete .note-google { margin: 0; }
.avis__liste { list-style: none; margin: 0; padding: 0; }
.avis__item { /* une ligne par avis : la parole à gauche, l'auteur dans sa colonne à droite */
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: baseline; gap: 8px 32px;
  padding: 22px 0; border-bottom: 1px solid var(--filet);
}
.avis__texte { margin: 0; font: 500 clamp(21px, 1.95vw, 28px)/1.3 var(--f-texte); letter-spacing: -.01em; }
.avis__auteur {
  display: inline-flex; align-items: center; gap: 12px; margin: 0; justify-self: end;
  font: 700 13px/1.3 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); white-space: nowrap;
}
.avis__etoiles { width: 64px; height: 11px; fill: #F4B400; flex: none; }

/* 12. Pages intérieures ------------------------------------------------------- */
.page-hero { padding-top: clamp(26px, 3.6vw, 52px); }
.fil { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; font: 600 14px/1.3 var(--f-texte); color: var(--gris); }
.fil a { color: var(--noir); text-underline-offset: 3px; }
.fil li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--gris-clair); }
.page-hero__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.page-hero h1 { font-size: clamp(50px, 6.6vw, 104px); line-height: 1.08; }
.page-hero h1 .l { display: block; overflow: hidden; padding: .17em 0 .03em; margin: -.17em 0 -.03em; }
.page-hero h1 .l > span { display: block; }
.page-hero h1 .suite { display: block; margin-top: .4em; font: 600 clamp(19px, 1.8vw, 26px)/1.25 var(--f-texte); text-transform: none; letter-spacing: 0; color: var(--gris); }
.page-hero__texte > p { font-size: 19px; max-width: 31em; margin: 24px 0 28px; }
.page-hero__photo { position: relative; margin: 0; }
.page-hero__photo picture { display: block; aspect-ratio: 4 / 3.3; overflow: hidden; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__photo .tampon { left: -26px; bottom: 28px; }
.page-hero + .section { padding-top: clamp(68px, 8vw, 116px); }

.deux-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.texte-court p { max-width: 34em; }
.texte-court h2 { font-size: clamp(36px, 4vw, 60px); margin-bottom: 20px; }
.paire-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.paire-photos picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.paire-photos--portrait picture { aspect-ratio: 4 / 5; } /* le tracteur est photographié en hauteur */
.paire-photos img { width: 100%; height: 100%; object-fit: cover; }
.paire-photos figcaption { grid-column: 1 / -1; font-size: 14px; color: var(--gris); }

.publics { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 52px); }
.public { background: #fff; border-top: 6px solid var(--noir); }
.public picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.public img { width: 100%; height: 100%; object-fit: cover; }
.public__texte { padding: 24px clamp(20px, 2.4vw, 32px) 28px; }
.public h3 { font-size: 34px; margin-bottom: 12px; }
.public p { color: var(--gris); margin: 0; }

.depots { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.depots li { padding: 9px 14px; background: #fff; border: 1.5px solid var(--noir); font: 600 16px/1 var(--f-texte); }
.depots--fonce li { background: transparent; border-color: #fff; color: #fff; }

/* 13. FAQ ------------------------------------------------------------------------ */
.faq { margin-top: clamp(26px, 3vw, 40px); border-top: 3px solid var(--noir); }
.faq details { border-bottom: 1.5px solid var(--noir); }
.faq summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 22px 56px 22px 0;
  font: 800 clamp(22px, 1.9vw, 27px)/1.15 var(--f-titre); text-transform: uppercase; letter-spacing: .02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background:
    linear-gradient(var(--noir), var(--noir)) center / 22px 3px no-repeat,
    linear-gradient(var(--noir), var(--noir)) center / 3px 22px no-repeat;
  transition: transform .25s var(--sortie);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--rouge-texte); }
.faq details p { margin: -4px 0 22px; max-width: 46em; color: var(--gris); }

/* 14. Pied de page ------------------------------------------------------------- */
.pied { position: relative; background: var(--asphalte); color: #C6C9CD; padding: 84px 0 34px; font-size: 16px; }
.pied::before {
  content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 44px, transparent 44px 80px);
}
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
.pied__logo img { width: 210px; height: auto; margin-bottom: 18px; }
.pied h2 { font: 800 15px/1.2 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 6px 0 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #9A9EA4; }
.pied__bas a { color: #C6C9CD; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Signature de l'agence, centrée sous le bas de pied (même bloc que les autres sites Ta Vitrine Locale) */
.pied__credit { display: flex; flex-wrap: wrap; gap: 2px 7px; align-items: center; justify-content: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: #9A9EA4; }
.pied .pied__credit-lien { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; }
.pied a.pied__credit { color: #9A9EA4; text-decoration: none; } /* toute la mention est le lien */
.pied a.pied__credit:hover .pied__credit-lien, .pied a.pied__credit:focus-visible .pied__credit-lien { color: var(--rouge); }
.pied__credit-logo { display: inline-flex; width: 17px; height: 17px; }
.pied__credit-logo svg { width: 100%; height: 100%; }
.pied__credit-tag { flex-basis: 100%; text-align: center; font-size: 12.5px; }

/* 15. Animations ---------------------------------------------------------------
   Arrivée : les lignes du titre montent, la photo du camion entre par la gauche,
   cabine en tête, et freine ; le tampon se pose. Tout en CSS (aucune attente du JS). */
@keyframes monte { from { transform: translateY(108%); } to { transform: none; } }
@keyframes apparait { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entreCamion { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
/* Le camion arrive : mêmes paliers et mêmes courbes pour le corps et les roues, l'angle des roues reste
   proportionnel au trajet (distance ÷ rayon apparent) et finit à 0 : la photo au repos est l'originale. */
@keyframes roule {
  0% { transform: translateX(-118%); animation-timing-function: cubic-bezier(.2, .55, .3, 1); }
  72% { transform: translateX(1.1%); animation-timing-function: ease-in-out; }
  86% { transform: translateX(-.35%); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0); }
}
@keyframes tourneAv {
  0% { transform: scaleY(.8861) rotate(-1035deg) scaleY(1.1286); animation-timing-function: cubic-bezier(.2, .55, .3, 1); }
  72% { transform: scaleY(.8861) rotate(9.65deg) scaleY(1.1286); animation-timing-function: ease-in-out; }
  86% { transform: scaleY(.8861) rotate(-3.07deg) scaleY(1.1286); animation-timing-function: ease-in-out; }
  100% { transform: scaleY(.8861) rotate(0deg) scaleY(1.1286); }
}
@keyframes tourneAr {
  0% { transform: scaleX(.8634) rotate(-1624deg) scaleX(1.1582); animation-timing-function: cubic-bezier(.2, .55, .3, 1); }
  72% { transform: scaleX(.8634) rotate(15.1deg) scaleX(1.1582); animation-timing-function: ease-in-out; }
  86% { transform: scaleX(.8634) rotate(-4.82deg) scaleX(1.1582); animation-timing-function: ease-in-out; }
  100% { transform: scaleX(.8634) rotate(0deg) scaleX(1.1582); }
}
@keyframes freinage { 0%, 62% { transform: none; } 78% { transform: rotate(.55deg); } 91% { transform: rotate(-.18deg); } 100% { transform: none; } }
@keyframes tamponne { 0% { opacity: 0; transform: rotate(-18deg) scale(1.7); } 70% { opacity: 1; transform: rotate(-6deg) scale(.96); } 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }
@keyframes traceRoute { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes secours { to { opacity: 1; transform: none; } }
@keyframes remplit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes allume { 0% { color: #C5C8CC; } 45% { color: var(--rouge); } 100% { color: var(--noir); } }
@keyframes planteBorne { from { transform: translateY(26px) scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .js .arrivee .l > span { animation: monte .8s var(--sortie) both; }
  .js .arrivee .l:nth-child(2) > span { animation-delay: .09s; }
  .js .arrivee .l:nth-child(3) > span { animation-delay: .18s; }
  .js .arrivee .l:nth-child(4) > span { animation-delay: .27s; }
  .js .arrivee .apparait { animation: apparait .7s var(--sortie) both; animation-delay: .42s; }
  .js .arrivee .apparait--2 { animation-delay: .54s; }
  .js .arrivee .apparait--3 { animation-delay: .66s; }
  /* La scène joue quand elle entre à l'écran (.vu) : tout de suite sur ordinateur, au défilement sur téléphone */
  .js .scene.revele { opacity: 1; transform: none; }
  .js-pret .scene.revele:not(.vu) .scene__camion { transform: translateX(-118%); }
  .js-pret .scene.revele:not(.vu) .tampon { animation: none; opacity: 0; }
  .js-pret .scene.vu .scene__camion { animation: roule 1.6s .2s both; }
  .js-pret .scene.vu .scene__roue--av { animation: tourneAv 1.6s .2s both; }
  .js-pret .scene.vu .scene__roue--ar { animation: tourneAr 1.6s .2s both; }
  .js-pret .scene.vu .scene__caisse { animation: freinage 1.6s .2s both; }
  .js-pret .scene.vu .tampon { animation: tamponne .42s cubic-bezier(.3, 1.3, .5, 1) 1.6s both; }
  .js .arrivee .page-hero__photo picture { animation: entreCamion .9s cubic-bezier(.55, .05, .25, 1) .15s both; }
  .js .arrivee .tampon { animation: tamponne .42s cubic-bezier(.3, 1.3, .5, 1) 1.15s both; }

  /* Révélations au défilement (classe .vu posée par site.js). Filet de sécurité :
     si site.js ne tourne pas (classe .js-pret absente), tout s'affiche au bout de 2,5 s. */
  .js:not(.js-pret) .revele, .js:not(.js-pret) .revele .borne, .js:not(.js-pret) .revele .benne__fig { animation: secours 0s 2.5s forwards; }
  .js .revele { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--sortie), transform .7s var(--sortie); }
  .js .revele.vu { opacity: 1; transform: none; }
  .js .etapes.revele { opacity: 1; transform: none; }
  .js .etapes.revele::before { transform: scaleX(0); }
  .js .etapes.revele.vu::before { animation: traceRoute 1.1s var(--sortie) both; }
  .js .etapes.revele .borne { opacity: 0; transform-origin: 50% 100%; }
  .js .etapes.revele.vu .borne { animation: planteBorne .55s cubic-bezier(.3, 1.4, .5, 1) both; }
  .js .etapes.revele.vu .etape:nth-child(1) .borne { animation-delay: .25s; }
  .js .etapes.revele.vu .etape:nth-child(2) .borne { animation-delay: .5s; }
  .js .etapes.revele.vu .etape:nth-child(3) .borne { animation-delay: .75s; }
  .js .etapes.revele.vu .etape:nth-child(4) .borne { animation-delay: 1s; }
  .js .arrivee .note-google .pleines { animation: remplit .9s var(--sortie) .95s both; }
  .js-pret .avis__tete.revele .pleines { clip-path: inset(0 100% 0 0); }
  .js-pret .avis__tete.revele.vu .pleines { animation: remplit .9s var(--sortie) .25s both; }
  .js .avis__liste.revele { opacity: 1; transform: none; }
  .js-pret .avis__texte .mot { color: #C5C8CC; }
  .js-pret .avis__liste.vu .mot { animation: allume .7s var(--sortie) both; animation-delay: calc(var(--i) * 40ms + .2s); }
  .js-pret .avis__liste.revele .avis__auteur { opacity: 0; transition: opacity .6s var(--sortie); }
  .js-pret .avis__liste.revele.vu .avis__auteur { opacity: 1; transition-delay: calc(var(--fin, 1) * 40ms + .2s); }
  .js .bennes.revele { opacity: 1; transform: none; }
  .js .bennes.revele .benne__fig { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--sortie), transform .6s var(--sortie); }
  .js .bennes.revele.vu .benne__fig { opacity: 1; transform: none; }
  .js .bennes.revele.vu .benne:nth-child(2) .benne__fig { transition-delay: .14s; }
  .js .bennes.revele.vu .benne:nth-child(3) .benne__fig { transition-delay: .28s; }
}

/* 16. Écrans intermédiaires et téléphone ---------------------------------------- */
@media (max-width: 1180px) {
  .route__lien { font-size: 19px; }
  .entete__logo img { height: 50px; }
  .metaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .hero__haut { grid-template-columns: 1fr; align-items: start; }
  .hero__cote { max-width: 640px; }
}

@media (max-width: 1040px) {
  .service__grille, .service--benne .service__grille, .zone__grille, .demande__grille, .page-hero__grille, .deux-col { grid-template-columns: minmax(0, 1fr); }
  .service--inverse .service__photo { order: 0; }
  .page-hero__photo .tampon { left: auto; right: 16px; bottom: auto; top: -14px; }
}

@media (max-width: 900px) {
  :root { --h-entete: 66px; }
  html { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--h-route-m) + env(safe-area-inset-bottom) + 16px); }
  body { font-size: 17px; }

  /* En-tête : logo et plaque, sans la route (qui descend en bas d'écran) */
  .entete { position: relative; border-bottom: 0; }
  .entete__barre { grid-template-columns: 1fr auto; }
  .entete__logo img { height: 44px; }
  .entete .plaque { display: none; }
  .entete__horaires { display: block; margin: 0; text-align: right; font: 600 14px/1.3 var(--f-texte); color: var(--gris); }
  .entete__horaires b { display: block; font: 800 17px/1.1 var(--f-titre); letter-spacing: .04em; text-transform: uppercase; color: var(--noir); }

  /* La route : barre fixe en bas de l'écran, sous le pouce */
  .route {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(var(--h-route-m) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-template-columns: minmax(0, 1fr) var(--h-route-m);
    background: #fff;
    box-shadow: 0 -1px 0 var(--filet), 0 -8px 22px rgba(0, 0, 0, .07);
  }
  .route::after {
    content: ""; position: absolute; left: 0; right: var(--h-route-m); bottom: env(safe-area-inset-bottom);
    height: 3px; background: var(--noir);
  }
  .route__liste { padding: 9px 4px 0; gap: 0; justify-content: space-around; }
  .route__liste li { flex: 1 1 0; min-width: 0; text-align: center; }
  .route__lien { font-size: 15px; letter-spacing: .05em; padding: 2px 0; }
  .route__appel {
    display: grid; place-items: center; align-content: center; gap: 3px;
    background: var(--rouge-profond); color: #fff; text-decoration: none;
    font: 700 12px/1 var(--f-texte); letter-spacing: .06em; text-transform: uppercase;
  }
  .route__appel svg { width: 24px; height: 24px; }
  .camion { width: 72px; bottom: calc(env(safe-area-inset-bottom) + 2px); }

  .scene { --l: min(100vw, 680px); --pad: 74px; margin-top: 16px; }
  .scene .tampon { right: 5vw; top: 4px; padding: 10px 14px 8px; }
  .scene .tampon strong { font-size: 32px; }
  .scene .tampon span { font-size: 12px; }
  .tampon strong { font-size: 36px; }
  .tampon span { font-size: 13px; }
  .plaque--xl { --h: 64px; }
  .vehicules { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .vehicules li { padding-bottom: 12px; }
  .etapes { grid-template-columns: 1fr; gap: 0; }
  .etapes::before { left: 28px; right: auto; top: 0; bottom: 0; width: 12px; height: auto; transform-origin: center top;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .9) 0 18px, transparent 18px 34px) center / 2px 100% no-repeat, var(--asphalte); }
  .js .etapes.revele.vu::before { animation-name: traceRouteV; }
  .etape { display: grid; grid-template-columns: 70px 1fr; gap: 0 18px; padding-bottom: 26px; }
  .etape .borne { width: 52px; height: 75px; margin: 0 0 0 7px; position: relative; z-index: 1; }
  .etape h3 { margin: 8px 0 8px; grid-column: 2; grid-row: 1; }
  .etape p { grid-column: 2; margin: 0; }
  .etape .borne { grid-row: 1 / span 2; }
  .bennes, .bennes-legende { gap: 12px; }
  .benne__usage { font-size: 14px; }
  .publics { grid-template-columns: 1fr; }
  .avis__item { padding: 18px 0; grid-template-columns: 1fr; }
  .avis__auteur { justify-self: start; }
  .note-google { font-size: 14px; gap: 8px; padding: 7px 12px 7px 9px; }
  .note-google__etoiles { width: 78px; height: 13px; }
  .carte44__ville.mineure { display: none; }
  .carte44__ville text { font-size: 38px; }
  .carte44__ville circle { r: 10px; }
  .carte44__base { transform-box: view-box; transform-origin: 668px 154px; transform: scale(1.45); }
  .duo { grid-template-columns: 1fr; }
  .demande__coord li { grid-template-columns: 92px 1fr; }
  .formulaire { box-shadow: 7px 7px 0 var(--noir); }
  .pied { padding-top: 76px; padding-bottom: calc(34px + var(--h-route-m) + env(safe-area-inset-bottom)); }
  .pied__grille { grid-template-columns: 1fr; gap: 30px; }
  .page-hero__photo { margin-left: calc(var(--marge) * -1); margin-right: calc(var(--marge) * -1); }
  .page-hero__photo picture { aspect-ratio: 16 / 11; }
  .service__photo { margin-left: calc(var(--marge) * -1); margin-right: calc(var(--marge) * -1); }
}
@keyframes traceRouteV { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 520px) {
  .hero__h1 { font-size: clamp(46px, 14.2vw, 64px); line-height: 1.08; }
  .page-hero h1 { font-size: clamp(42px, 12.4vw, 58px); }
  .titre-section, .service h2 { font-size: clamp(38px, 11vw, 52px); }
  .hero__cote > p, .page-hero__texte > p { font-size: 18px; }
  .plaque--xl { --h: 60px; width: 100%; }
  .plaque--xl .plaque__num { flex: 1; justify-content: center; font-size: 34px; }
  .metaux { grid-template-columns: 1fr 1fr; gap: 12px 12px; }
  .metal { grid-template-columns: 38px 1fr; gap: 9px; font-size: 14px; }
  .deux-col .metal { grid-template-columns: 50px 1fr; gap: 10px; font-size: 15px; }
  .deux-col .metal__ech { height: 34px; }
  .choix label { font-size: 13px; padding: 12px 4px 10px; }
  .choix label svg { width: 38px; }
  .entete__logo img { height: 38px; }
  .route__lien { font-size: 14px; letter-spacing: .03em; }
  .benne__vol { font-size: 22px; }
  .bennes, .bennes-legende { gap: 8px; }
}
@media (max-width: 370px) {
  .route__lien { font-size: 13px; letter-spacing: .02em; }
  .camion { width: 62px; }
}

/* 17. Landing pages locales ------------------------------------------------------
   Une page = un service dans une ville. Panneau d'entrée de ville (EB10 : fond blanc,
   listel rouge), communes en pastilles, liens en boutons ; sur les pages service, les
   12 villes ; sur l'accueil, la grille villes × services et la carte du secteur. */
.page-ville .page-hero h1 { font-size: clamp(46px, 5.6vw, 88px); }
.page-ville .titre-section { font-size: clamp(38px, 4.2vw, 64px); }
.page-ville .page-hero h1.h1-long { font-size: clamp(42px, 4.6vw, 72px); } /* Bain-de-Bretagne, Nort-sur-Erdre, Châteaubriant */
.ville-insec { white-space: nowrap; } /* le nom de ville ne se coupe pas au trait d'union */

.secteur-local { padding: clamp(52px, 6vw, 88px) 0; }
.secteur-local__grille { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.panneau {
  justify-self: center; display: grid; place-items: center;
  width: min(100%, 440px); min-height: 156px; padding: 30px 34px;
  background: #fff; border-radius: 14px; text-align: center;
  box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 17px var(--rouge), 0 0 0 1.5px #CFCBC2, 0 16px 34px rgba(0, 0, 0, .13);
}
.panneau__nom { font: 900 clamp(34px, 3.9vw, 56px)/1.04 var(--f-titre); text-transform: uppercase; letter-spacing: .02em; color: var(--noir); }
.panneau--long .panneau__nom { font-size: clamp(28px, 2.9vw, 42px); white-space: nowrap; }
.panneau__officiel { margin-top: 4px; font: 600 15px/1.2 var(--f-texte); color: var(--gris); } /* commune nouvelle : le nom officiel sous le nom usuel */
.secteur-local__titre { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 12px; }
.secteur-local .chapo { margin-bottom: 0; }
.villes li.est-ville { background: var(--rouge-profond); border-color: var(--rouge-profond); color: #fff; }
.secteur-local__route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 24px 0 0; padding-top: 16px; border-top: 2px solid var(--noir); font-size: 17px; }
.secteur-local__route b { font: 700 13px/1.6 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }

.local { align-items: center; }
.local__photo { margin: 0; }
.local__photo picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.local__photo img { width: 100%; height: 100%; object-fit: cover; }

.liens-locaux { padding: clamp(56px, 7vw, 100px) 0; }
.liens-locaux__grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.liens-locaux__titre { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 18px; }
.liens-boutons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bouton--ligne { background: #fff; color: var(--noir); box-shadow: inset 0 0 0 2px var(--noir); }
.bouton--ligne:hover { background: var(--noir); color: #fff; }
.bouton--discret { box-shadow: inset 0 0 0 2px #CFCBC2; color: var(--gris); }

/* Pages service : les 12 villes du service */
.liens-villes { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lien-ville {
  position: relative; display: grid; gap: 5px; height: 100%;
  padding: 16px 44px 17px 18px;
  background: #fff; color: var(--noir); text-decoration: none;
  border: 2px solid var(--noir);
  transition: background .2s, color .2s;
}
.section--blanc .lien-ville { background: var(--beton); }
.lien-ville__service { font: 600 13px/1.2 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.lien-ville__nom { font: 900 clamp(24px, 2.1vw, 31px)/1.08 var(--f-titre); text-transform: uppercase; letter-spacing: .02em; }
.lien-ville::after { /* le département, comme la bande de droite d'une plaque */
  content: attr(data-dep); position: absolute; right: 12px; top: 12px;
  padding: 4px 5px 3px; border-radius: 2px;
  background: var(--bleu-plaque); color: #fff; font: 700 13px/1 var(--f-plaque);
}
.lien-ville svg { position: absolute; right: 15px; bottom: 19px; width: 20px; height: 12px; transition: transform .25s var(--sortie); }
.lien-ville:hover { background: var(--noir); color: #fff; }
.lien-ville:hover .lien-ville__service { color: #C9CCD0; }
.lien-ville:hover svg { transform: translateX(4px); }

/* Accueil : grille villes × services et carte du secteur */
.grille-villes__aide { margin: 26px 0 0; font: 700 13px/1.4 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.grille-villes { list-style: none; margin: 10px 0 0; padding: 0; border-top: 2px solid var(--noir); }
.grille-villes li { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.grille-villes__ville { font: 800 21px/1.1 var(--f-titre); text-transform: uppercase; letter-spacing: .02em; }
.grille-villes__ville small { display: inline-block; margin-left: 4px; padding: 3px 4px 2px; border-radius: 2px; background: var(--bleu-plaque); color: #fff; font: 700 12px/1 var(--f-plaque); vertical-align: 3px; }
.grille-villes a {
  display: block; min-width: 92px; padding: 10px 12px; text-align: center;
  background: #fff; color: var(--noir); text-decoration: none; border: 1.5px solid var(--noir);
  font: 700 13px/1 var(--f-texte); letter-spacing: .07em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.grille-villes a:hover { background: var(--noir); color: #fff; }

.carte-secteur { width: 100%; height: auto; background: var(--beton); outline: 2px solid var(--noir); outline-offset: -1px; }
.carte-secteur__fond { fill: none; }
.carte-secteur__voisin { fill: #E7E4DD; stroke: #CBC6BC; stroke-width: 2; stroke-linejoin: round; }
.carte-secteur__dep-fond { fill: #fff; }
.carte-secteur__dep { fill: none; stroke: var(--noir); stroke-width: 3; stroke-linejoin: round; }
.carte-secteur__num { font: 900 110px var(--f-titre); fill: #E3E0D8; }
.carte-secteur__cercle { fill: rgba(255, 49, 49, .045); stroke: var(--rouge); stroke-width: 3; stroke-dasharray: 14 10; }
.carte-secteur__rayon { font: 800 26px var(--f-titre); fill: var(--rouge-texte); letter-spacing: .04em; }
.carte-secteur__ville circle { fill: var(--noir); }
.carte-secteur__ville text { font: 600 25px var(--f-texte); fill: var(--noir); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.carte-secteur__base circle { fill: var(--rouge); }
.carte-secteur__base .halo { fill: none; stroke: var(--rouge); stroke-width: 3; opacity: .35; }
.carte-secteur__base text { font: 900 32px var(--f-titre); text-transform: uppercase; fill: var(--rouge-texte); letter-spacing: .03em; }
.carte-secteur__base .carte-secteur__commune { font: 600 21px var(--f-texte); text-transform: none; letter-spacing: 0; fill: var(--noir); }

@media (max-width: 1180px) {
  .liens-villes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .secteur-local__grille, .liens-locaux__grille { grid-template-columns: 1fr; }
  .panneau { justify-self: start; }
}
@media (max-width: 900px) {
  .liens-villes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .local__photo { margin-left: calc(var(--marge) * -1); margin-right: calc(var(--marge) * -1); }
  .carte-secteur__ville text { font-size: 34px; }
  .carte-secteur__rayon { font-size: 32px; }
}
@media (max-width: 640px) { /* une ville par ligne : nom à gauche, département et flèche à droite */
  .liens-villes { grid-template-columns: 1fr; gap: 8px; }
  .lien-ville { gap: 3px; padding: 11px 92px 12px 14px; }
  .lien-ville__service { font-size: 12px; letter-spacing: .06em; }
  .lien-ville__nom { font-size: 23px; }
  .lien-ville::after { top: 50%; right: 52px; transform: translateY(-50%); }
  .lien-ville svg { top: 50%; bottom: auto; right: 16px; margin-top: -6px; }
}
@media (max-width: 520px) {
  .page-ville .page-hero h1 { font-size: clamp(40px, 11.4vw, 54px); }
  .page-ville .page-hero h1.h1-long { font-size: clamp(32px, 9.6vw, 46px); }
  .page-ville .titre-section { font-size: clamp(34px, 9.6vw, 46px); }
  .panneau { width: 100%; min-height: 118px; padding: 24px 26px; }
  .liens-boutons li { width: 100%; }
  .liens-boutons .bouton { width: 100%; justify-content: space-between; }
  .grille-villes li { gap: 6px; }
  .grille-villes__ville { font-size: 18px; }
  .grille-villes__ville small { display: block; width: max-content; margin: 4px 0 0; }
  .grille-villes a { min-width: 0; padding: 12px 8px; font-size: 12px; letter-spacing: .04em; }
}
@media (max-width: 370px) {
  .grille-villes li { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-villes__ville { grid-column: 1 / -1; }
}

/* 18. Corrections de l'audit global (03/10/2026) -----------------------------------
   Accessibilité (focus, erreurs, zones tactiles), typographie (unités, insécables, titres
   équilibrés), petits écrans et largeurs intermédiaires. */
.unite { text-transform: none; }   /* m³, km : un symbole d'unité ne passe jamais en capitales */
.insec { white-space: nowrap; }    /* noms de communes et mots composés : pas de coupure au trait d'union */
h2, h3, summary, .surtitre { text-wrap: balance; }
p { text-wrap: pretty; }
.plaque-legende a { white-space: nowrap; }
.liens-boutons .bouton { line-height: 1.3; }
.sur-rouge .formulaire .surtitre { color: var(--rouge-texte); } /* confirmation d'envoi : elle était blanche sur blanc */
.sur-rouge .formulaire .surtitre::before { background: linear-gradient(90deg, var(--rouge) 0 11px, transparent 11px 19px, var(--rouge) 19px 30px); }
.demande__texte :focus-visible { outline-color: #fff; } /* le contour rouge disparaissait sur le fond rouge */
.champ--erreur .choix label { border-color: var(--rouge-texte); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: no-preference) { .js:not(.js-pret) .etapes.revele::before { animation: secours 0s 2.5s forwards; } }
@media (min-width: 901px) { .deux-col .titre-section { font-size: clamp(38px, 4.2vw, 64px); } }
@media (min-width: 521px) { #titre-zone { font-size: clamp(42px, 5.4vw, 76px); } }
@media (min-width: 961px) and (max-width: 1365px) { .hero__haut { grid-template-columns: minmax(0, 1fr) 390px; } } /* la plaque de l'accueil sortait de l'écran */
@media (max-width: 900px) { /* zones tactiles plus grandes */
  .route__liste { padding-top: 0; }
  .route__lien { padding: 11px 0 33px; }
  .fil { row-gap: 12px; } /* fil sur deux lignes : la zone tactile des liens ne mord pas sur la ligne suivante */
  .fil a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* zone tactile ≥ 40 px sans changer la mise en page */
  .pied__bas { line-height: 2; row-gap: 14px; }
  .pied__bas a { display: inline-block; padding: 6px 0; margin: -6px 0; }
  .pied ul { gap: 0; }
  .pied li > a { display: inline-block; padding: 9px 0; }
  .demande__coord a { display: inline-block; padding: 9px 0; margin: -9px 0; }
  .note-google { padding: 10px 14px 10px 10px; }
}
@media (max-width: 520px) {
  .grille-villes a { padding: 14px 8px; }
}
@media (max-width: 370px) {
  .plaque--xl .plaque__num { font-size: 30px; padding: 0 10px; }
  .demande__coord li { grid-template-columns: 1fr; gap: 6px; }
}

/* Rachat de voiture : pastille à côté de la note Google dans chaque hero, ligne dans le pied */
.pastilles { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 16px; }
.pastilles .note-google { margin: 0; }
.rachat {
  display: flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 100%; /* pas max-content : il élargissait la colonne du hero sur mobile */
  margin: 0; padding: 6px 15px 6px 11px;
  background: #fff; color: var(--noir);
  border: 1.5px solid var(--noir); border-left: 6px solid var(--rouge-profond); border-radius: 4px;
  font-size: 14px; line-height: 1.25;
}
.rachat svg { width: 32px; height: auto; flex: none; color: var(--rouge-texte); }
.rachat b { display: block; font-weight: 800; }
.pied__rachat { margin-top: 12px; color: #fff; }

/* Hero resserré (11/10) : la pastille rachat doit se voir sans défiler */
.hero { padding-top: clamp(22px, 3vw, 48px); }
.hero__cote > p { font-size: 17px; line-height: 1.55; margin-bottom: 20px; }
.page-hero { padding-top: clamp(16px, 2vw, 32px); }
.fil { margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(44px, 5.2vw, 82px); }
.page-ville .page-hero h1 { font-size: clamp(40px, 4.4vw, 70px); }
.page-ville .page-hero h1.h1-long { font-size: clamp(36px, 3.7vw, 58px); }
.page-hero h1 .suite { margin-top: .3em; font-size: clamp(18px, 1.6vw, 23px); }
.page-hero__texte > p { font-size: 17px; line-height: 1.55; margin: 16px 0 20px; }
.plaque--xl { --h: 66px; }
.plaque-legende { margin-top: 10px; }
@media (max-width: 900px) { .plaque--xl { --h: 60px; } }
@media (max-width: 520px) {
  .hero__h1 { font-size: clamp(40px, 12vw, 56px); }
  .page-hero h1 { font-size: clamp(36px, 10.4vw, 50px); }
  .page-ville .page-hero h1 { font-size: clamp(34px, 9.8vw, 48px); }
  .page-ville .page-hero h1.h1-long { font-size: clamp(29px, 8.4vw, 42px); }
  .hero__cote > p, .page-hero__texte > p { font-size: 16px; }
  .plaque--xl { --h: 54px; }
  .plaque--xl .plaque__num { font-size: 30px; }
}

/* ============================================================
   Bandeau cookies (js/cookies.js, repris de Colson Elec)
   ============================================================ */
.ck {
  position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(820px, calc(100% - 48px));
  background: var(--noir); color: #fff; border-top: 4px solid var(--rouge);
  padding: 20px 22px 20px 28px; box-shadow: 0 22px 48px -14px rgba(0, 0, 0, .6);
  display: flex; align-items: center; gap: 28px;
}
.ck__txt { flex: 1; margin: 0; font: 500 16px/1.45 var(--f-texte); color: #E6E6E6; }
.ck__txt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ck__btns { display: flex; gap: 10px; flex: none; }
.ck__btn {
  min-height: 50px; padding: 0 24px; border-radius: 0; cursor: pointer;
  font: 700 15px/1 var(--f-texte); letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
}
.ck__btn--non { background: transparent; color: #fff; border: 2px solid #55585E; }
.ck__btn--non:hover { border-color: #fff; }
.ck__btn--oui { background: var(--rouge-profond); color: #fff; border: 0; }
.ck__btn--oui:hover { background: #fff; color: var(--noir); }
.ck__btn:focus-visible, .ck__txt a:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
/* Téléphone : au-dessus de la route fixe du bas */
@media (max-width: 900px) {
  .ck {
    left: 12px; right: 12px; width: auto; transform: none;
    bottom: calc(var(--h-route-m) + 12px + env(safe-area-inset-bottom, 0px));
    flex-direction: column; align-items: stretch; gap: 14px; padding: 16px;
  }
  .ck__txt { font-size: 14.5px; }
  .ck__btn { flex: 1; min-height: 46px; padding: 0; font-size: 14px; }
}