/* =========================================================================================
   ACCUEIL 07 · LE CLASSIQUE SOLIDE
   La structure qu'un artisan reconnaît sans réfléchir : barre d'infos, en-tête collant avec
   menus déroulants, hero photo, 3 arguments, le parc machine par machine avec leurs cotes,
   services, pourquoi Locamat, témoignage, bandeau devis, pied de page complet.
   Code couleur de direction-n, Red Hat Display (titres) + Onest (corps).
   Animations dans le temps : entrée du hero au chargement, fondu d'entrée des blocs, survols,
   menus. Une seule exception liée au défilement, demandée par Andrea : « Comment ça se passe »
   (§ 7 bis), qui souligne la progression des étapes sans jamais cacher le texte.
   ⚠ La page « le-parc.html » réutilise cette feuille : les classes de l'en-tête, des menus,
   du pied de page et des boutons ne se renomment pas.
   ========================================================================================= */

:root{
  --fond:#FFFCF6;
  --creme:#F3F1ED;
  --blanc:#FFFFFF;
  --encre:#1A1A1A;
  --muted:#6B6B6B;
  --rouge:#D11425;
  --rouge-fonce:#A50F1C;
  --rouge-sur-noir:#FF4051;
  --noir:#0B0B0B; --charbon:#111111; --carte-noire:#151515;
  --bord:rgba(26,26,26,.12);
  --bord-fort:rgba(26,26,26,.24);
  --bord-noir:rgba(255,255,255,.14);
  --sur-noir-2:rgba(255,255,255,.76);
  --sur-noir-3:rgba(255,255,255,.58);
  --av:#F2C230;

  --f-titre:"Red Hat Display",system-ui,sans-serif;
  --f-corps:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* l'échelle typographique — une taille par rôle, partout */
  --t-label:12px;      /* petites capitales espacées : surtitres, familles, colonnes */
  --t-meta:13.5px;     /* libellés de cotes, de champs, mentions */
  --t-petit:14.5px;    /* texte secondaire des cartes, liens d'action */
  --t-texte:15.5px;    /* texte courant des blocs */
  --t-intro:17.5px;    /* chapeaux de section */
  --t-court:19px;      /* titres courts (arguments, encarts) */
  --t-carte:21px;      /* titres de cartes */
  --t-bloc:24px;       /* titres de blocs (conseil, devis) */
  --t-h2:clamp(36px,1.6vw + 15px,46px);
  --t-h1:clamp(48px,3vw + 14px,68px);

  --max:1400px;
  --pad:clamp(2rem,3.4vw,3.25rem);
  --sec-py:clamp(5.5rem,6.8vw,7.75rem);
  --gout:24px;
  --r:4px;

  --ombre-repos:0 1px 2px rgba(11,11,11,.04);
  --ombre-survol:0 22px 40px -24px rgba(11,11,11,.42),0 2px 6px -2px rgba(11,11,11,.08);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --hauteur-tete:84px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
/* la sélection de texte aux couleurs du site, sombre sur les fonds sombres (finitions du 09/10, point 13) ;
   au doigt, le voile gris du navigateur est retiré : l'appui a son propre retour (§ 13, « au doigt ») */
::selection{background:rgba(209,20,37,.16);color:var(--encre)}
.infos ::selection,.hero ::selection,.pg-tete--photo ::selection,.ct-scene ::selection,.sec--noir ::selection,.sec-services ::selection,
.pied ::selection,.pg-relance ::selection,.parc-choisir ::selection,.vid--insta ::selection,.vid-ecran ::selection,.pg-video ::selection,
.mg-carte--parc ::selection,.visio ::selection{background:rgba(255,64,81,.35);color:#fff}
.bandeau-txt ::selection{background:rgba(255,255,255,.28);color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--encre);font:400 16px/1.6 var(--f-corps);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0;font-family:var(--f-titre);text-wrap:balance}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:calc(var(--hauteur-tete) + 20px)}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

.evite{position:absolute;left:-9999px;top:0;z-index:100;background:var(--encre);color:#fff;padding:10px 16px}
.evite:focus{left:16px;top:8px}

/* marqueur de marque : le parallélogramme penché du lettrage LOCAMAT */
.biais{display:inline-block;width:14px;height:10px;background:var(--rouge);transform:skewX(-22deg);flex:none}

/* la flèche des liens */
.fl{display:inline-block;margin-left:.5em;transition:transform .35s var(--ease)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0;height:48px;padding:0 22px;
  border-radius:var(--r);border:1.5px solid transparent;font:600 15px/1 var(--f-corps);letter-spacing:.005em;
  white-space:nowrap;cursor:pointer;
  transition:background-color .25s var(--ease-in-out),color .25s var(--ease-in-out),border-color .25s var(--ease-in-out),transform .2s var(--ease)}
.btn:hover .fl,.btn:focus-visible .fl{transform:translateX(4px)}
.btn:active{transform:scale(.97);transition-duration:.12s}
.btn-rouge{background:var(--rouge);color:#fff}
.btn-rouge:hover,.btn-rouge:focus-visible{background:var(--rouge-fonce)}
.btn-noir{background:var(--encre);color:#fff}
.btn-noir:hover,.btn-noir:focus-visible{background:var(--rouge)}
.btn-contour{border-color:var(--encre);color:var(--encre)}
.btn-contour .fl{color:var(--rouge);transition:transform .35s var(--ease),color .25s}
.btn-contour:hover,.btn-contour:focus-visible{background:var(--encre);color:#fff}
.btn-contour:hover .fl,.btn-contour:focus-visible .fl{color:#fff}
.btn-contour-clair{border-color:rgba(255,255,255,.78);color:#fff}
.btn-contour-clair:hover,.btn-contour-clair:focus-visible{background:#fff;border-color:#fff;color:var(--encre)}
.btn-grand{height:56px;padding:0 28px;font-size:16px}
.btn-petit{height:42px;padding:0 18px;font-size:14px}
.btn-plein{width:100%}
.btn[aria-busy="true"]{cursor:progress;opacity:.86}

.lien-fleche{display:inline-flex;align-items:center;font:600 15px/1.2 var(--f-corps);color:var(--encre);
  padding-bottom:3px;background:linear-gradient(var(--rouge),var(--rouge)) 0 100%/0 2px no-repeat;
  transition:background-size .45s var(--ease),color .25s}
.lien-fleche .fl{color:var(--rouge)}
.lien-fleche:hover,.lien-fleche:focus-visible{background-size:100% 2px}
.lien-fleche:hover .fl,.lien-fleche:focus-visible .fl{transform:translateX(4px)}
/* le cadre du clavier ne colle plus au soulignement (finitions du 09/10, point 4) */
.lien-fleche:focus-visible{outline-offset:7px}

/* ---------- repères « à confirmer » : une petite pastille jaune (le détail au survol) ---------- */
[data-avalider]::after{content:"";display:inline-block;width:8px;height:8px;margin-left:7px;border-radius:50%;
  background:var(--av);box-shadow:0 0 0 3px rgba(242,194,48,.28);vertical-align:.18em;flex:none}
[data-avalider]{cursor:help}


/* =========================================================================================
   1 · LA BARRE D'INFOS
   ========================================================================================= */
.infos{background:var(--charbon);color:var(--sur-noir-2);font:400 13px/1 var(--f-corps)}
.infos-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:38px}
.infos p{display:flex;align-items:center;gap:14px;white-space:nowrap}
.infos a{color:#fff;font-weight:500;transition:color .2s}
.infos a:hover,.infos a:focus-visible{color:var(--rouge-sur-noir)}
.infos-sep{width:1px;height:13px;background:rgba(255,255,255,.22)}


/* =========================================================================================
   2 · L'EN-TÊTE — collant, toujours visible
   ========================================================================================= */
.tete{position:sticky;top:0;z-index:50;background:var(--fond);border-bottom:1px solid var(--bord)}
.tete-in{display:flex;align-items:center;height:var(--hauteur-tete);gap:clamp(24px,3vw,48px)}
.marque{flex:none;display:block}
.marque img{height:40px;width:auto}

.nav{flex:1;min-width:0;height:100%}
.nav-liste{display:flex;align-items:stretch;height:100%;gap:clamp(4px,1vw,14px)}
.nav-el{display:flex;align-items:center}
.nav-lien{position:relative;display:inline-flex;align-items:center;gap:9px;height:100%;padding:0 12px;
  background:none;border:0;cursor:pointer;font:600 15.5px/1 var(--f-corps);color:var(--encre);white-space:nowrap;transition:color .2s}
.nav-lien::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--rouge);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-lien:hover::after,.nav-lien:focus-visible::after,.a-menu.ouvert > .nav-lien::after,.nav-lien[aria-current="page"]::after{transform:scaleX(1)}
.chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.a-menu.ouvert .chev{transform:translateY(1px) rotate(-135deg)}

/* « Le parc » : un vrai lien vers la page du parc, et son chevron qui ouvre le menu */
.nav-lien--page{padding-right:0}
.nav-lien--page::after{right:-18px}
/* le chevron : un vrai bouton de 36 px, distinct du mot (qui reste un lien vers la page) */
.nav-ouvre{display:inline-grid;place-items:center;align-self:center;width:36px;height:36px;margin:0 6px 0 -4px;padding:0;
  background:transparent;border:0;border-radius:var(--r);cursor:pointer;color:var(--encre);
  transition:background-color .2s var(--ease-in-out),color .2s}
.nav-ouvre .chev{width:7px;height:7px}
/* le carré crème est posé 4 px en retrait du bouton (28 px, centré sur le chevron) : sur toute la surface du bouton, qui
   chevauche le mot de 4 px (marge de -4 px), il mordait sur le « c » de « parc » (contrôle de livraison du 10/10, point 27).
   Le bouton garde sa taille, sa place et sa zone de clic (36 px) : rien ne bouge au repos. Au doigt, l'appui (§ 13) aussi */
.nav-ouvre{position:relative;isolation:isolate}
.nav-ouvre::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:var(--r);transition:background-color .2s var(--ease-in-out)}
.nav-ouvre:hover,.nav-ouvre:focus-visible,.a-menu.ouvert .nav-ouvre{color:var(--rouge)}
.nav-ouvre:hover::before,.nav-ouvre:focus-visible::before,.a-menu.ouvert .nav-ouvre::before,.nav-ouvre:active::before{background:var(--creme)}
.nav-el .nav-ouvre:active{background:transparent}
.nav-ouvre:focus-visible{outline-offset:2px}

.tete-actions{display:flex;align-items:center;gap:22px;flex:none}
.tete-tel{display:flex;flex-direction:column;align-items:flex-end;gap:5px;line-height:1}
.tete-tel-lab{font:500 12px/1 var(--f-corps);color:var(--muted)}
.tete-tel-num{font:800 19px/1 var(--f-titre);letter-spacing:.01em;white-space:nowrap;transition:color .25s}
.tete-tel:hover .tete-tel-num,.tete-tel:focus-visible .tete-tel-num{color:var(--rouge)}
.tete-tel:focus-visible{outline-offset:6px}

/* ---------- les menus déroulants ---------- */
.a-menu{position:static}
.menu{position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-top:1px solid var(--bord);
  box-shadow:0 28px 48px -16px rgba(11,11,11,.20);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease-in-out),transform .3s var(--ease),visibility 0s linear .3s}
.a-menu.ouvert .menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-lien{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid transparent}
.menu-lien > span{font:700 16px/1.25 var(--f-titre);transition:color .2s}
.menu-lien small{font:400 13.5px/1.35 var(--f-corps);color:var(--muted)}
.menu-lien:hover > span,.menu-lien:focus-visible > span{color:var(--rouge)}

/* ---------- le menu du parc : la grille de cartes (proposition 1, retenue le 07/10/2026) ----------
   Cinq colonnes, deux rangées, une carte par machine : la machine détourée posée sur un sol clair,
   son nom, sa cote. Chaque famille est un bloc posé sur la grille (sous-grille sur les deux axes) :
   surtitres, images, noms et cotes tombent sur les mêmes lignes d'une carte à l'autre, et le code
   garde l'ordre de lecture, famille par famille (le menu du téléphone le reprend : app.js § 10).
   Rangée 1 : Terrassement (4 colonnes) + Compactage ; sous Terrassement, la note brise-roche et
   « Toutes les mini-pelles et pelles ». Rangée 2 : Manutention (2) + Transport (2) + « Voir tout
   le parc », la seule carte noire. Dessous, l'encart photo en bandeau, calé sur les mêmes colonnes. */
.mg{padding-block:18px 20px}
.mg-grille{--zone-h:clamp(92px,7.6vw,120px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(9,auto);column-gap:16px}
.mg-fam{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;min-width:0}
.mg-fam--terrassement{grid-column:1/5;grid-row:1/6}
.mg-fam--compactage{grid-column:3/4;grid-row:6/10}
.mg-fam--manutention{grid-column:1/3;grid-row:6/10}
.mg-fam--transport{grid-column:4/5;grid-row:6/10}
.mg-fam-t{grid-column:1/-1;grid-row:1;display:flex;align-items:center;min-height:30px;padding-bottom:9px;margin-bottom:12px;
  border-bottom:1px solid var(--bord);font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge)}
/* une carte : trois rangées en sous-grille (l'image, le nom, la cote) */
.mg-carte{display:grid;grid-template-rows:subgrid;grid-row:2 / span 3;min-width:0;background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  transition:border-color .25s var(--ease-in-out),box-shadow .4s var(--ease),background-color .25s var(--ease-in-out)}
.mg-zone{display:flex;align-items:flex-end;justify-content:center;height:var(--zone-h);padding:14px 16px 12px;border-bottom:1px solid var(--bord);
  background:radial-gradient(ellipse 60% 70% at 50% 45%,#FFFFFF 0%,rgba(255,255,255,0) 75%),linear-gradient(180deg,var(--fond) 0%,#F6F4F0 100%)}
.mg-zone img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .45s var(--ease)}
.mg-nom{align-self:start;padding:12px 16px 0;font:800 16px/1.25 var(--f-titre);letter-spacing:-.005em;transition:color .2s}
.mg-cote{align-self:start;padding:3px 16px 14px;font:400 var(--t-meta)/1.35 var(--f-corps);color:var(--muted);text-wrap:balance}
.mg-carte:hover,.mg-carte:focus-visible{border-color:var(--bord-fort);box-shadow:var(--ombre-survol)}
.mg-carte:hover .mg-nom,.mg-carte:focus-visible .mg-nom{color:var(--rouge)}
.mg-carte:hover .mg-zone img,.mg-carte:focus-visible .mg-zone img{transform:translateY(-3px)}
.mg-carte:focus-visible{outline-offset:2px}
/* la page où l'on est (aria-current, posé par la synchro) */
.mg-carte[aria-current="page"]{border-color:var(--rouge)}
.mg-carte[aria-current="page"] .mg-nom,.mg-carte[aria-current="page"] .mg-service-t{color:var(--rouge)}
/* sous Terrassement : la note brise-roche et la page de la famille */
.mg-fam-pied{grid-column:1/-1;grid-row:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 0 16px}
.mg-note{display:flex;align-items:center;gap:12px;font:400 var(--t-meta)/1.4 var(--f-corps);color:var(--muted)}
.mg-tout{flex:none;display:inline-flex;align-items:center;font:600 var(--t-meta)/1.2 var(--f-corps);white-space:nowrap;transition:color .2s}
.mg-tout .fl{color:var(--rouge)}
.mg-tout:hover,.mg-tout:focus-visible,.mg-tout[aria-current="page"]{color:var(--rouge)}
.mg-tout:hover .fl,.mg-tout:focus-visible .fl{transform:translateX(4px)}
/* le transport d'engins : un service, pas une machine du parc — une carte typographique, sans image :
   le titre en haut, la flèche en face, la charge utile sur la ligne des cotes */
.mg-carte--service{background:var(--creme);border-color:transparent}
.mg-service-t{grid-row:1;grid-column:1;align-self:start;padding:14px 44px 0 16px;
  font:800 var(--t-court)/1.2 var(--f-titre);letter-spacing:-.005em;text-wrap:balance;transition:color .2s}
.mg-service-fl{grid-row:1;grid-column:1;align-self:start;justify-self:end;padding:16px 16px 0;
  font:600 18px/1 var(--f-corps);color:var(--rouge);transition:transform .35s var(--ease)}
.mg-carte--service .mg-cote{grid-row:3;color:#5E5E5E}
.mg-carte--service:hover .mg-service-t,.mg-carte--service:focus-visible .mg-service-t{color:var(--rouge)}
.mg-carte--service:hover .mg-service-fl,.mg-carte--service:focus-visible .mg-service-fl{transform:translateX(4px)}
/* « Voir tout le parc » : la dernière carte, la seule noire */
.mg-carte--parc{grid-column:5/6;grid-row:7 / span 3;background:var(--encre);border-color:var(--encre)}
.mg-carte--parc .mg-zone{align-items:flex-start;justify-content:flex-start;background:transparent;border-bottom-color:var(--bord-noir)}
.mg-parc-t{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge-sur-noir);transition:color .2s}
.mg-carte--parc .mg-nom{color:#fff}
.mg-carte--parc .mg-nom .fl{color:var(--rouge-sur-noir)}
.mg-carte--parc .mg-cote{color:var(--sur-noir-2)}
.mg-carte--parc:hover,.mg-carte--parc:focus-visible{background:var(--rouge);border-color:var(--rouge)}
.mg-carte--parc:hover .mg-nom,.mg-carte--parc:focus-visible .mg-nom,
.mg-carte--parc:hover .mg-nom .fl,.mg-carte--parc:focus-visible .mg-nom .fl,
.mg-carte--parc:hover .mg-parc-t,.mg-carte--parc:focus-visible .mg-parc-t,
.mg-carte--parc:hover .mg-cote,.mg-carte--parc:focus-visible .mg-cote{color:#fff}
.mg-carte--parc:hover .mg-nom .fl,.mg-carte--parc:focus-visible .mg-nom .fl{transform:translateX(4px)}
/* l'encart photo en bandeau : il déborde de 20 px de chaque côté pour que son texte tombe sur les colonnes */
.mg-bande{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;column-gap:16px;margin:16px -20px 0;padding:14px 20px;
  background:var(--creme);border-radius:var(--r)}
.mg-bande-t{grid-column:1/2;font:800 17px/1.25 var(--f-titre);letter-spacing:-.005em;text-wrap:balance}
.mg-bande-p{grid-column:2/4;max-width:62ch;font:400 14px/1.5 var(--f-corps);color:#5E5E5E}
.mg-bande-btn{grid-column:4/6;justify-self:end;white-space:nowrap}

/* ---------- « Voir tout le parc » en bandeau (Andrea, 17/10/2026 : « le bouton "Voir tout le parc" n'est pas assez mis en
   avant… elle est trop belle ») ----------
   L'entrée de la page du parc, la même partout (components/commun/ToutLeParc.astro) : la flotte côte à côte (les vignettes
   détourées du menu), le surtitre, le nom de la page, un vrai bouton blanc ; toute la bande est le lien, le bouton passe au
   rouge au survol (et à l'appui au doigt). En tête du menu du parc, où il remplace la carte noire du bas de la grille (le
   transport prend sa place : trois colonnes, la carte du service sur deux) ; sous les tableaux des pages de famille ; en
   tête de l'accordéon « Le parc » du téléphone (app.js § 10). Le même bouton sur la plaque des fiches : pages.css. */
.tout-parc{--k:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(20px,2.6vw,40px);
  padding:12px 20px;background:var(--encre);border-radius:var(--r);color:#fff}
.tout-parc-flotte{display:flex;align-items:flex-end;height:calc(54px * var(--k));min-width:0}
.tout-parc-flotte img{display:block;flex:none;width:auto;height:calc(var(--h) * var(--k));margin-left:calc(-10px * var(--k));
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.4));transition:transform .45s var(--ease)}
.tout-parc-flotte img:first-child{margin-left:0}
.tout-parc-txt{display:flex;flex-direction:column;gap:7px;min-width:0}
.tout-parc-sur{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge-sur-noir)}
.tout-parc-t{font:800 20px/1.2 var(--f-titre);letter-spacing:-.01em;text-wrap:balance}
.tout-parc-btn{background:#fff;color:var(--encre)}
.tout-parc-btn .fl{color:var(--rouge);transition:transform .35s var(--ease),color .25s}
.tout-parc:hover .tout-parc-btn,.tout-parc:focus-visible .tout-parc-btn,a.tout-parc-btn:hover,a.tout-parc-btn:focus-visible{background:var(--rouge);color:#fff}
.tout-parc:hover .tout-parc-btn .fl,.tout-parc:focus-visible .tout-parc-btn .fl,a.tout-parc-btn:hover .fl,a.tout-parc-btn:focus-visible .fl{color:#fff;transform:translateX(4px)}
.tout-parc:hover .tout-parc-flotte img,.tout-parc:focus-visible .tout-parc-flotte img{transform:translateY(-3px)}
.tout-parc:focus-visible{outline-offset:3px}
.tout-parc ::selection{background:rgba(255,64,81,.35);color:#fff}
/* dans le menu du parc : calé sur les cinq colonnes des cartes, débordant de 20 px de chaque côté comme la bande du bas */
.mg .tout-parc{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px;margin:0 -20px 16px}
.mg .tout-parc-flotte{grid-column:1/3}
.mg .tout-parc-txt{grid-column:3/5}
.mg .tout-parc-btn{grid-column:5/6;justify-self:end}
.mg-fam--transport .mg-carte--service{grid-column:2/4}
/* sous un tableau de famille ; en tête de l'accordéon du téléphone */
.tout-parc--page{margin-top:clamp(20px,2vw,28px)}
.mnav .tout-parc{margin:4px 0 6px}
@media (max-width:1279px){
  .tout-parc{--k:.82}
  .tout-parc-t{font-size:18px}
}
/* sous 1024 px : la flotte au-dessus, le texte et le bouton dessous ; au téléphone, le bouton sur toute la largeur */
@media (max-width:1023px){
  .tout-parc{grid-template-columns:minmax(0,1fr) auto;row-gap:14px;padding:16px 18px 18px}
  .tout-parc-flotte{grid-column:1/-1}
}
@media (max-width:599px){
  .tout-parc{--k:.72;grid-template-columns:minmax(0,1fr)}
  .tout-parc-btn{width:100%}
}
@media (max-width:359px){
  .tout-parc{--k:.6}
}
/* au doigt, l'appui fait ce que fait le survol */
@media (hover:none) and (pointer:coarse){
  .tout-parc:active .tout-parc-btn,a.tout-parc-btn:active{background:var(--rouge);color:#fff}
  .tout-parc:active .tout-parc-btn .fl,a.tout-parc-btn:active .fl{color:#fff}
}
/* sur un écran d'ordinateur bas (800 px de haut ou moins, voir plus bas « le menu du parc sur un écran d'ordinateur bas ») :
   le bandeau se resserre, et sa place est reprise sur les marges du menu et la hauteur des images des cartes : le menu tient
   encore sans défiler à 1024 × 768, 1280 × 720 et 1366 × 768 ; plus bas (1366 × 657), il défile en lui-même, comme avant */
@media (min-width:1024px) and (max-height:800px){
  .mg .tout-parc{--k:.7;margin-bottom:8px;padding-block:6px}
  .mg .tout-parc-btn{height:42px}
  .menu-parc .mg{padding-block:12px 14px}
  .mg .mg-grille{--zone-h:clamp(54px,8.6vh,92px)}
}

/* le menu Services : une colonne sous son bouton */
.a-menu[data-menu="services"]{position:relative}
.menu-services{left:-12px;right:auto;width:420px;border:1px solid var(--bord);border-top:0}
.menu-in--liste{display:flex;flex-direction:column;gap:0;padding:8px 24px 10px}
.menu-lien--grand{padding:14px 0;border-bottom:1px solid var(--bord)}
.menu-lien--grand:last-child{border-bottom:0}

/* les menus « Vos travaux », « Conseils » et « L'entreprise » (navigation à six entrées, Andrea, 10/10/2026) : une liste sous
   leur bouton, comme celle des Services ; « Conseils » plus large (les titres des articles), « Tous les articles » au bas */
.a-menu[data-menu="travaux"],.a-menu[data-menu="conseils"],.a-menu[data-menu="entreprise"]{position:relative}
.menu-liste{left:-12px;right:auto;width:380px;border:1px solid var(--bord);border-top:0}
.menu-liste--large{width:460px}
/* « Le Blog », le dernier menu de la barre (Accueil en tête depuis le 18/10/2026) : il s'ouvre vers la gauche, sinon il sort
   de l'écran à 1024 px */
.a-menu[data-menu="conseils"] > .menu-liste{left:auto;right:-12px}
.menu-lien--tout{flex-direction:row;align-items:center;padding:14px 0 12px}
.menu-lien--tout > span{font:600 var(--t-petit)/1.2 var(--f-corps)}
.menu-lien--tout > .fl{color:var(--rouge)}
.menu-lien--tout:hover > .fl,.menu-lien--tout:focus-visible > .fl{transform:translateX(4px)}


/* ---------- les menus en icônes (Andrea, 10/10/2026 : « on ne prend pas de suite le service » ; 11/10 : la version
   « icônes » retenue ; 13/10 : les ronds jaunes « un peu gros, un peu épais », la variante A « trait rouge » choisie) ----------
   Vos travaux, Services, Conseils, L'entreprise : chaque entrée porte une icône au trait (Tabler, .menu-ico) et un titre
   court ; une famille garde la sous-ligne de ses machines. L'icône, sans fond : 20 px, trait de 1,33 px (stroke-width 1,6 sur
   un dessin de 24), au rouge Locamat. Elle ne change pas au survol ni sur la page où l'on est : le titre passe au rouge.
   Contraste du trait : 5,5:1 sur le blanc du menu, 5,3:1 sur le fond du menu du téléphone (objet graphique : 3:1 demandé). */
.menu-liste,.menu-services{width:380px}
.menu-lien--vignette{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;
  align-items:center;padding:12px 0;border-bottom:1px solid var(--bord)}
.menu-lien--vignette:last-child{border-bottom:0}
.menu-ico{display:block;grid-column:1;grid-row:1/3;width:20px;height:20px;stroke-width:1.6;color:var(--rouge)}
.menu-lien--vignette > span{grid-column:2;grid-row:1;align-self:end}
.menu-lien--vignette > small{grid-column:2;grid-row:2;align-self:start}
.menu-lien--vignette > span:last-child{grid-row:1/3;align-self:center}
.menu-lien--vignette[aria-current="page"] > span{color:var(--rouge)}
.menu-in--liste > .menu-lien--tout{padding-left:34px}

/* =========================================================================================
   3 · LE HERO
   ========================================================================================= */
.hero{position:relative;height:clamp(560px,calc(100svh - 260px),760px);min-height:560px;overflow:hidden;
  background:var(--noir);color:#fff;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:62% 88%}
.hero-voile{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(11,11,11,.80) 0%,rgba(11,11,11,.64) 32%,rgba(11,11,11,.20) 58%,rgba(11,11,11,0) 76%),
    linear-gradient(0deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,0) 32%)}
.hero-in{height:100%;display:flex;align-items:center;padding-bottom:40px}
.hero-txt{max-width:760px}
.hero-sur{display:flex;align-items:center;gap:12px;font:600 13px/1 var(--f-corps);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.88);margin-bottom:22px}
.hero h1{font-weight:800;font-size:var(--t-h1);line-height:1.04;letter-spacing:-.02em;color:#fff}
/* le titre « Location de matériel / de chantier en Corse-du-Sud » (chantier n° 34) : sa 2e ligne fait 13,22 em, la boîte 760 px.
   Il suit --t-h1, sauf là où il ne tient pas : de 1024 à 1270 px, la fin de « Sud » passait sur le bras de la pelle (la taille
   suit alors la largeur, 41 px à 1024, et la ligne finit 20 px avant le bras) ; au-delà de 1440 px, il passait sur 3 lignes (la
   taille reste celle de 1440, 57,2 px). Police, graisse, couleur : inchangées ; sous 1024 px, rien ne change */
@media (min-width:1024px){
  .hero h1{font-size:min(var(--t-h1),4.42vw - 4px,57.2px)}
}
.hero-st{max-width:600px;margin-top:22px;font-size:clamp(17px,.35vw + 13px,19px);line-height:1.6;color:rgba(255,255,255,.9)}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-appel{margin-top:20px;font-size:15px;color:rgba(255,255,255,.78)}
.hero-appel a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s}
.hero-appel a:hover,.hero-appel a:focus-visible{border-color:#fff}


/* =========================================================================================
   4 · LES 3 ARGUMENTS — posés à cheval sur le bas du hero
   ========================================================================================= */
.args-zone{position:relative;z-index:2;margin-top:-40px;background:linear-gradient(transparent 40px,var(--creme) 40px)}
.args{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--blanc);border-radius:var(--r);
  box-shadow:0 1px 0 var(--bord),0 24px 50px -22px rgba(11,11,11,.30)}
.arg{position:relative;padding:30px clamp(26px,2.6vw,40px) 30px}
.arg + .arg{border-left:1px solid var(--bord)}
/* le repère : un trait rouge court, posé sur le haut de chaque argument */
.arg::before{content:"";position:absolute;top:0;left:clamp(26px,2.6vw,40px);width:28px;height:3px;background:var(--rouge)}
.arg-t{font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em;text-wrap:balance}
.arg-p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}


/* =========================================================================================
   5 · LES SECTIONS — en-têtes communs
   ========================================================================================= */
.sec{padding-block:var(--sec-py)}
.sec-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:48px}
.sec-tete > div{max-width:780px}
.sur{display:flex;align-items:center;gap:12px;font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rouge);margin-bottom:16px}
.sur::before{content:"";width:28px;height:2px;background:currentColor}
.sur--noir{color:var(--rouge-sur-noir)}
.sec h2{font-weight:800;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.018em}
.sec-intro{margin-top:16px;max-width:62ch;font-size:var(--t-intro);line-height:1.6;color:var(--muted)}
.sec-tete > .btn,.sec-tete > .lien-fleche{flex:none;margin-bottom:4px}
/* la note à droite d'un en-tête de section (employée par le-parc.html) */
.sec-note{display:flex;align-items:center;gap:12px;max-width:380px;font:500 15px/1.5 var(--f-corps);color:var(--encre);
  padding:16px 20px;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r)}


/* =========================================================================================
   6 · LE PARC — les machines en cartes, avec leurs cotes
   ========================================================================================= */
.sec-parc{background:var(--creme);padding-top:clamp(4.5rem,5.6vw,6.25rem)}
.cartes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gout);row-gap:0}
/* chaque carte occupe 4 rangées partagées (photo · en-tête · cotes · pied) : sur une même ligne,
   les tableaux de cotes et les pieds commencent tous à la même hauteur */
.cartes > li{display:grid;grid-row:span 4;grid-template-rows:subgrid}
.cartes > li:nth-child(n+5){margin-top:var(--gout)}
.carte{grid-row:1/-1;display:grid;grid-template-rows:subgrid;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--ombre-repos);transition:box-shadow .45s var(--ease),transform .45s var(--ease),border-color .3s}
.carte:hover,.carte:focus-within{box-shadow:var(--ombre-survol);transform:translateY(-3px);border-color:var(--bord-fort)}
.carte-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--creme)}
.carte-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.carte:hover .carte-img img,.carte:focus-within .carte-img img{transform:scale(1.04)}
.carte-tete{padding:20px 22px 0}
.carte-fam{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge)}
.carte-nom{margin-top:10px;font:800 var(--t-carte)/1.18 var(--f-titre);letter-spacing:-.01em}
.carte-nom a{transition:color .2s}
.carte-nom a:hover,.carte-nom a:focus-visible{color:var(--rouge)}
.carte-usage{margin-top:8px;font-size:var(--t-petit);line-height:1.5;color:var(--muted)}
.cotes{margin:18px 22px 0;border-top:1px solid var(--bord);align-self:start}
.cotes > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--bord)}
.cotes > div:last-child{border-bottom:0}
.cotes dt{font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
.cotes dd{margin:0;font:700 15px/1.3 var(--f-titre);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.cotes dd.a-voir{font:500 var(--t-meta)/1.3 var(--f-corps);color:var(--muted);display:inline-flex;align-items:center}
.carte-pied{display:flex;align-items:stretch;border-top:1px solid var(--bord);margin-top:12px;align-self:end}
.carte-voir{flex:1;display:flex;align-items:center;padding:15px 22px;font:600 var(--t-petit)/1 var(--f-corps);transition:color .2s,background-color .25s}
.carte-voir .fl{color:var(--rouge)}
.carte-voir:hover,.carte-voir:focus-visible{background:var(--creme)}
.carte-voir:hover .fl,.carte-voir:focus-visible .fl{transform:translateX(4px)}
.carte-devis{display:flex;align-items:center;padding:0 20px;border-left:1px solid var(--bord);font:600 var(--t-petit)/1 var(--f-corps);color:var(--rouge);
  transition:background-color .25s var(--ease-in-out),color .25s}
.carte-devis:hover,.carte-devis:focus-visible{background:var(--rouge);color:#fff}
.carte-voir:focus-visible,.carte-devis:focus-visible{outline-offset:-3px}

/* la note sous les cartes */
.cartes-note{display:flex;align-items:center;gap:12px;margin-top:28px;font:500 var(--t-texte)/1.5 var(--f-corps);color:var(--encre)}

/* le conseil, sous les cartes */
.conseil{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:24px;padding:30px 36px;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-repos)}
.conseil-t{font:800 var(--t-bloc)/1.2 var(--f-titre);letter-spacing:-.012em}
.conseil-p{margin-top:8px;font-size:var(--t-texte);line-height:1.55;color:var(--muted);max-width:66ch}
.conseil .btn{flex:none}


/* =========================================================================================
   6 bis · QUELLE MACHINE POUR MON CHANTIER — « la phrase » (retenue le 06/10)
   « Je dois [ … ▾] » : on choisit son chantier dans la phrase ; la réponse et les machines
   proposées arrivent dessous. Au clic ou au clavier, jamais au défilement.
   ========================================================================================= */
.qm{--qm-pad:clamp(34px,3.4vw,56px);position:relative;background:var(--creme);border-radius:var(--r);padding:clamp(34px,3.2vw,50px) var(--qm-pad) 0}
.qm-lab{display:flex;align-items:center;gap:12px;font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.16em;text-transform:uppercase;color:var(--rouge)}
.qm-lab::before{content:"";width:28px;height:2px;background:currentColor}
.qm-phrase{position:relative;z-index:5;margin-top:0;font:800 calc(var(--t-h2) * .86)/1.14 var(--f-titre);letter-spacing:-.018em;color:var(--encre)}
.qm-je{margin-right:.22em}
.qm-mot{display:inline;padding:0;margin:0;background:none;border:0;border-radius:0;cursor:pointer;text-align:left;
  font:inherit;letter-spacing:inherit;color:var(--rouge);
  text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.16em;text-decoration-color:rgba(209,20,37,.38);
  transition:text-decoration-color .25s}
.qm-mot:hover,.qm-mot[aria-expanded="true"]{text-decoration-color:var(--rouge)}
.qm-mot:focus-visible{outline-offset:6px}
.qm-chev{display:inline-block;width:.3em;height:.3em;margin-left:.32em;border-right:.085em solid currentColor;border-bottom:.085em solid currentColor;
  transform:translateY(-.16em) rotate(45deg);transition:transform .3s var(--ease)}
.qm-mot[aria-expanded="true"] .qm-chev{transform:translateY(.02em) rotate(-135deg)}
/* la liste des chantiers, sous le mot */
.qm-liste{position:absolute;top:calc(100% + 12px);left:0;width:min(470px,100%);padding:8px;background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--r);box-shadow:0 30px 60px -22px rgba(11,11,11,.38),0 2px 6px rgba(11,11,11,.06)}
.qm-liste[hidden]{display:none}
.qm-option{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:11px 14px;
  background:none;border:0;border-radius:3px;text-align:left;cursor:pointer;
  font:700 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em;color:var(--encre);transition:background-color .2s,color .2s}
.qm-option-num{font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.qm-option:hover,.qm-option:focus-visible{background:var(--creme)}
.qm-option:focus-visible{outline-offset:-2px}
.qm-option[aria-selected="true"],.qm-option[aria-selected="true"] .qm-option-num{color:var(--rouge)}
/* la réponse */
@keyframes qm-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qm-reponse{margin-top:22px}
.qm-reponse.arrive{animation:qm-entre .5s var(--ease) both}
.qm-rep-p{max-width:62ch;font-size:var(--t-intro);line-height:1.6;color:var(--encre)}
.qm-machines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gout);margin:30px 0 0;padding:0;list-style:none}
.qm-machine{display:flex;flex-direction:column;min-width:0;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre-repos);transition:box-shadow .45s var(--ease),transform .45s var(--ease),border-color .3s}
.qm-machine:hover,.qm-machine:focus-within{box-shadow:var(--ombre-survol);transform:translateY(-3px);border-color:var(--bord-fort)}
.qm-vign{display:flex;align-items:flex-end;justify-content:center;height:150px;padding:20px 20px 16px;border-bottom:1px solid var(--bord);
  background:radial-gradient(ellipse 60% 70% at 50% 45%,#FFFFFF 0%,rgba(255,255,255,0) 75%),linear-gradient(180deg,var(--fond) 0%,#F6F4F0 100%)}
.qm-vign img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.qm-machine-corps{flex:1;display:flex;flex-direction:column;padding:18px 20px 18px}
.qm-nom{margin-top:8px;font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.qm-nom a{transition:color .2s}
.qm-nom a:hover,.qm-nom a:focus-visible{color:var(--rouge)}
.qm-cote{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--bord);
  font-size:var(--t-meta);color:var(--muted)}
.qm-cote b{font:700 15px/1.3 var(--f-titre);color:var(--encre);text-align:right;font-variant-numeric:tabular-nums}
.qm-cote b.a-voir{display:inline-flex;align-items:center;font:500 var(--t-meta)/1.3 var(--f-corps);color:var(--muted)}
.qm-act{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.qm-act .lien-fleche{font-size:var(--t-petit)}
.qm-devis{padding:9px 12px;margin:-9px -12px -9px 0;border-radius:var(--r);font:600 var(--t-petit)/1 var(--f-corps);color:var(--rouge);
  transition:background-color .25s var(--ease-in-out),color .25s}
.qm-devis:hover,.qm-devis:focus-visible{background:var(--rouge);color:#fff}
/* une seule machine proposée : la carte prend deux colonnes, la machine à gauche */
/* trois machines : trois colonnes, sans quart vide à droite */
.qm-machines:has(> li:nth-child(3)):not(:has(> li:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
.qm-machines--une .qm-machine{grid-column:span 2;flex-direction:row}
.qm-machines--une .qm-vign{flex:0 0 50%;height:auto;min-height:190px;border-bottom:0;border-right:1px solid var(--bord)}
/* « Toujours un doute ? », au pied du panneau */
.qm-doute{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;margin:38px calc(-1 * var(--qm-pad)) 0;
  padding:26px var(--qm-pad) 30px;border-top:1px solid var(--bord-fort)}
.qm-doute-txt .conseil-p{margin-top:6px}
.qm-doute-btns{display:flex;align-items:center;gap:28px;flex:none}

/* ARCHIVE — l'ancienne version (image + huit lignes), gardée pour index-machine.html et
   index-deroule.html qui la montrent encore. L'accueil ne l'emploie plus. */
.sec-choix{background:var(--fond)}
.choix{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px);align-items:stretch}
.choix-vue{position:relative;margin:0;min-height:440px;border-radius:var(--r);overflow:hidden;background:var(--creme)}
.choix-vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-in-out)}
.choix-vue img.on{opacity:1}
.choix-leg{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 36px);
  padding:11px 16px;background:rgba(11,11,11,.84);border-radius:3px;color:#fff;font:600 var(--t-petit)/1.25 var(--f-corps)}
.choix-leg b{font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--rouge-sur-noir);font-variant-numeric:tabular-nums}
.choix-liste{margin:0;padding:0;list-style:none;border-top:1px solid var(--bord-fort)}
.choix-el{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;align-items:center;gap:0 16px;padding:16px 20px 16px 16px;
  border-bottom:1px solid var(--bord);transition:background-color .25s var(--ease-in-out)}
.choix-num{font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .2s}
.choix-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.choix-t{font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em;transition:color .2s}
.choix-p{font-size:var(--t-petit);line-height:1.5;color:var(--muted)}
.choix-fl{justify-self:end;color:var(--rouge);transition:transform .35s var(--ease)}
/* la ligne montrée (survol réel ou clavier) prend le fond ; le simple survol ne fait que rougir le titre */
.choix-el.vue{background:var(--creme)}
.choix-el.vue .choix-num{color:var(--rouge)}
.choix-el:hover .choix-t,.choix-el:focus-visible .choix-t{color:var(--rouge)}
.choix-el:hover .choix-fl,.choix-el:focus-visible .choix-fl{transform:translateX(4px)}
.choix-el:focus-visible{outline-offset:-3px}
/* l'encart « Toujours un doute ? », sous la liste */
.conseil--creme{margin-top:40px;background:var(--creme);border-color:transparent;box-shadow:none}
.conseil-btns{display:flex;align-items:center;gap:28px;flex:none}


/* =========================================================================================
   7 · LES SERVICES
   ========================================================================================= */
.sec-services{background:var(--charbon);color:#fff}
.sec-services .sec-tete > p{max-width:420px;margin:0 0 6px}
.sec-intro--noir{color:var(--sur-noir-2)}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gout);row-gap:0}
.services > li{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.service{grid-row:1/-1;display:grid;grid-template-rows:subgrid;background:var(--carte-noire);border:1px solid var(--bord-noir);border-radius:var(--r);
  overflow:hidden;transition:border-color .3s,transform .45s var(--ease)}
.service:hover,.service:focus-within{border-color:rgba(255,255,255,.32);transform:translateY(-3px)}
.service-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#000}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.service:hover .service-img img,.service:focus-within .service-img img{transform:scale(1.05)}
.service-corps{display:contents}
.service-tete{padding:24px 24px 0}
.service-t{font:800 var(--t-carte)/1.2 var(--f-titre);letter-spacing:-.01em}
.service-p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--sur-noir-2)}
.service-lien{display:block;align-self:stretch;margin:22px 24px 0;padding:16px 0 22px;border-top:1px solid var(--bord-noir);
  font:600 var(--t-petit)/1.2 var(--f-corps);color:#fff;transition:color .2s}
.service-lien .fl{color:var(--rouge-sur-noir)}
.service-lien:hover,.service-lien:focus-visible{color:var(--rouge-sur-noir)}
.service-lien:hover .fl,.service-lien:focus-visible .fl{transform:translateX(4px)}
.sec-services :focus-visible{outline-color:#fff}
/* au clavier, le lien d'un service, collé au filet du bas, ne porte pas de cadre : la carte entière s'entoure (finitions du 09/10, point 4) */
.service-lien:focus-visible{outline:none}
.service:has(.service-lien:focus-visible){outline:2px solid #fff;outline-offset:3px}


/* =========================================================================================
   7 bis · COMMENT ÇA SE PASSE — le déroulé vertical (version « 2 fluide », validée le 06/10)
   À gauche, une colonne qui se cale au milieu de l'écran : le titre, un compteur 01 → 05 qui roule,
   une barre, le bouton devis. À droite, les cinq étapes. app.js (§ 7) écrit à chaque image, lissé,
   uniquement des transform et des opacity ; il centre la colonne et aligne les étapes sur le
   compteur au chargement et quand la taille change. Sans JavaScript ou en mouvement réduit :
   les cinq étapes en plein contraste, sans compteur.
   ========================================================================================= */
.sec-deroule{--chiffre:clamp(120px,19vh,200px);background:var(--creme);padding-bottom:clamp(2.5rem,3.4vw,3.75rem)}
.deroule-grille{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(56px,7vw,128px);align-items:start}

/* la colonne qui reste en place (sticky natif : elle se cale et repart sans saut ;
   app.js remplace ce « top » par la valeur qui la centre sous l'en-tête) */
.deroule-col{position:sticky;top:calc(var(--hauteur-tete) + clamp(32px,6vh,64px));display:flex;flex-direction:column;align-items:flex-start}

/* le compteur kilométrique : le « 0 » est fixe, le chiffre des unités roule dans sa fenêtre,
   estompée en haut et en bas (là où il n'y a jamais de lettre quand le chiffre est posé) */
.deroule-compteur{display:flex;align-items:flex-end;margin-top:clamp(28px,4.5vh,48px);
  font:900 var(--chiffre)/1 var(--f-titre);letter-spacing:-.045em;color:var(--rouge);font-variant-numeric:tabular-nums}
.deroule-zero{display:block;height:1em}
.deroule-fenetre{display:block;height:1em;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0,#000 13%,#000 89%,transparent 100%);
          mask-image:linear-gradient(transparent 0,#000 13%,#000 89%,transparent 100%)}
.deroule-roule{display:flex;flex-direction:column;will-change:transform}
.deroule-roule > span{display:block;height:1em}
/* « / 05 » posé sur la ligne de base du grand chiffre (Red Hat Display : ligne de base à 0,856 em) */
.deroule-total{margin-left:14px;padding-bottom:calc((var(--chiffre) - 24px) * .144);
  font:800 var(--t-bloc)/1 var(--f-titre);letter-spacing:-.01em;color:var(--muted)}

/* la barre, qui se remplit d'un seul tenant */
.deroule-barre{position:relative;width:min(100%,340px);height:3px;margin-top:clamp(20px,3vh,32px);background:var(--bord-fort);overflow:hidden}
.deroule-barre b{position:absolute;inset:0;background:var(--rouge);transform-origin:0 50%;will-change:transform}
.deroule-btn{margin-top:clamp(28px,4.5vh,44px)}

/* les étapes (app.js ajuste la marge du haut : le titre de la 1re à hauteur du compteur) */
.deroule-etapes{list-style:none;margin:0;padding:0}
.deroule-etape{position:relative;max-width:640px;min-height:clamp(220px,31vh,320px);padding-top:30px;border-top:1px solid var(--bord-fort)}
/* le filet rouge du haut se trace à mesure que l'étape approche du compteur */
.deroule-filet{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--rouge);transform-origin:0 50%;will-change:transform}
/* 12 px de marge à droite : le petit glissement (10 px) ne sort jamais de la colonne */
.deroule-txt{margin-right:12px;will-change:transform}
.deroule-num{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.16em;text-transform:uppercase;color:var(--rouge)}
/* titre et texte à l'encre ; app.js fait varier leur opacité entre 0,66 et 1 (0,66 = 5,3:1 sur le crème) */
.deroule-voile{will-change:opacity}
.deroule-t{margin-top:14px;font:800 var(--t-bloc)/1.2 var(--f-titre);letter-spacing:-.012em;color:var(--encre)}
.deroule-p{margin-top:12px;max-width:52ch;font-size:var(--t-intro);line-height:1.6;color:var(--encre)}

@media (prefers-reduced-motion:reduce){
  .deroule-compteur,.deroule-barre,.deroule-filet{display:none}
  .deroule-etape{min-height:0;padding-bottom:44px}
}
/* sous 1024 px — une colonne, statique (la version tablette et téléphone : § 13) */
@media (max-width:1023px){
  .deroule-grille{grid-template-columns:minmax(0,1fr)}
  .deroule-col{position:static}
  .deroule-compteur,.deroule-barre,.deroule-filet{display:none}
  .deroule-etape{min-height:0;padding-bottom:28px}
}

/* ARCHIVE — l'ancienne version (cinq cartes sur un rail horizontal), gardée pour index-deroule.html
   et index-machine.html qui la montrent encore. L'accueil ne l'emploie plus. */
.sec-etapes{background:var(--creme)}
.etapes{--g:var(--gout);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.etape{position:relative;display:flex;flex-direction:column;padding-top:32px}
/* le rail : il relie les repères d'une étape à l'autre */
.etape::before{content:"";position:absolute;top:4px;left:0;right:calc(-1 * var(--g));height:2px;background:var(--bord-fort)}
.etape:last-child::before{right:0}
/* le repère : le parallélogramme penché du lettrage */
.etape::after{content:"";position:absolute;top:0;left:2px;width:16px;height:10px;background:var(--rouge);transform:skewX(-22deg)}
.etape-carte{flex:1;padding:26px 24px 28px;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-repos)}
.etape-num{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge)}
.etape-t{margin-top:12px;font:800 var(--t-carte)/1.2 var(--f-titre);letter-spacing:-.01em}
.etape-p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted)}


/* =========================================================================================
   7 ter · LA LIVRAISON — le texte, et la vraie carte de la Corse-du-Sud
   (Leaflet + OpenTopoMap, mêmes réglages que direction-n/pages/livraison.html)
   ========================================================================================= */
.sec-livraison{background:var(--fond)}
.livraison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(48px,6vw,96px);align-items:center}
.livraison-txt .sec-intro{max-width:none}
.livraison-note{display:flex;align-items:baseline;gap:12px;margin-top:24px;padding:18px 22px;background:var(--creme);border-radius:var(--r);
  font:500 var(--t-texte)/1.55 var(--f-corps);color:var(--encre)}
.livraison-note .biais{transform:translateY(-1px) skewX(-22deg)}
.livraison-txt > .btn{margin-top:32px}
/* la carte : isolée, pour que ses calques restent sous l'en-tête collant */
.livraison-carte{position:relative;isolation:isolate;z-index:0;min-height:clamp(500px,40vw,600px);border-radius:var(--r);overflow:hidden;
  background:#EAE5DA;box-shadow:0 30px 60px -30px rgba(11,11,11,.38),0 1px 3px rgba(11,11,11,.08)}
.livraison-carte-fond{position:absolute;inset:0;z-index:0}
.livraison-carte .leaflet-container{background:#E9E4D9;font-family:var(--f-corps)}
.livraison-carte .leaflet-tile-pane{filter:saturate(.5) sepia(.3) brightness(1.06) contrast(.92)}
.livraison-carte .leaflet-control-zoom{border:0;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.livraison-carte .leaflet-control-zoom a{width:34px;height:34px;color:var(--encre);font:400 19px/34px var(--f-corps)}
.livraison-carte .leaflet-control-attribution{font:400 10.5px/1.4 var(--f-corps);background:rgba(255,252,246,.86);color:#555}
.livraison-carte .leaflet-control-attribution a{color:#444}
/* l'agence : un point rouge qui respire (en boucle), son nom à côté */
.carte-pin-icone{overflow:visible}
.carte-pin{position:relative;display:block;width:20px;height:20px}
.carte-pin i{position:absolute;inset:0;border-radius:50%;background:var(--rouge);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.carte-pin::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rouge);opacity:.5;animation:carte-onde 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes carte-onde{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.6);opacity:0}}
.carte-pin-nom{position:absolute;left:30px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:8px 12px;
  background:var(--noir);color:#fff;border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.25);font:600 12px/1.3 var(--f-corps);letter-spacing:.01em}
.carte-pin-nom b{display:block;font:700 10px/1.3 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge-sur-noir)}
.carte-pin-nom::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;background:var(--noir);transform:translateY(-50%) rotate(45deg)}
/* la légende, posée en bas à gauche */
.carte-legende{position:absolute;z-index:450;left:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;padding:14px 16px;
  background:rgba(255,252,246,.95);border-radius:var(--r);box-shadow:0 10px 28px rgba(0,0,0,.14);
  font:500 var(--t-meta)/1.3 var(--f-corps);color:var(--encre);pointer-events:none}
.carte-legende span{display:flex;align-items:center;gap:10px}
.carte-leg-zone{width:20px;height:14px;border:2px solid var(--rouge);background:#C9B79A;border-radius:2px;flex:none}
.carte-leg-pin{width:12px;height:12px;margin-inline:4px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.2);flex:none}
/* sans la bibliothèque (hors ligne) : une surface calme, son texte suffit */
.carte-repli{position:absolute;inset:0;display:none;place-items:center;padding:2rem;text-align:center;color:var(--muted)}
.livraison-carte.sans-carte .carte-repli{display:grid}


/* =========================================================================================
   8 · POURQUOI LOCAMAT
   ========================================================================================= */
.sec-pourquoi{background:var(--creme)}
.pourquoi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,96px);align-items:start}
.pourquoi-photo{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--creme)}
.pourquoi-photo img{width:100%;height:100%;object-fit:cover}
.pourquoi-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 26px 22px;color:#fff;font:400 14px/1.45 var(--f-corps);
  background:linear-gradient(0deg,rgba(11,11,11,.78),rgba(11,11,11,0))}
.pourquoi-photo figcaption span{display:block;font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;
  color:#fff;margin-bottom:8px}
.chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:40px 0 0;border-top:1px solid var(--bord)}
.chiffre{padding:26px 28px 26px 0;border-bottom:1px solid var(--bord)}
.chiffre:nth-child(even){padding:26px 0 26px 28px;border-left:1px solid var(--bord)}
.chiffre dt{font:800 clamp(32px,1.2vw + 16px,40px)/1 var(--f-titre);letter-spacing:-.02em;color:var(--rouge);font-variant-numeric:lining-nums}
.chiffre dd{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.chiffre dd b{display:block;font:700 16px/1.35 var(--f-titre);color:var(--encre);margin-bottom:3px}
.pourquoi-pied{margin-top:26px;font-size:var(--t-texte);color:var(--encre)}
.pourquoi-btns{display:flex;align-items:center;gap:28px;margin-top:30px}


/* =========================================================================================
   8 bis · LES CONSEILS — les quatre articles du blog
   ========================================================================================= */
.sec-conseils{background:var(--fond)}
.articles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px var(--gout);margin:0;padding:0;list-style:none}
.articles > li{display:flex}
.article{display:flex;flex-direction:column;width:100%}
.article-img{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--creme)}
.article-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.article:hover .article-img img,.article:focus-within .article-img img{transform:scale(1.04)}
/* « mini-chargeur ou mini-pelle » : les deux machines, côte à côte */
.article-img--duo{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--fond)}
.article-img--duo img{min-width:0;object-position:40% 62%}
.article-img--duo img + img{object-position:60% 62%}
.article-t{margin-top:22px;font:800 var(--t-carte)/1.22 var(--f-titre);letter-spacing:-.01em}
.article-t a{transition:color .2s}
.article-t a:hover,.article-t a:focus-visible{color:var(--rouge)}
.article-p{margin:10px 0 20px;font-size:var(--t-texte);line-height:1.55;color:var(--muted)}
.article-lien{margin-top:auto;align-self:flex-start}
.article:hover .article-t a,.article:focus-within .article-t a{color:var(--rouge)}
.article:hover .article-lien,.article:focus-within .article-lien{background-size:100% 2px}
.article:hover .article-lien .fl,.article:focus-within .article-lien .fl{transform:translateX(4px)}


/* =========================================================================================
   9 · LE TÉMOIGNAGE
   ========================================================================================= */
.sec-temoin{background:var(--creme)}
.temoin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,96px);align-items:start}
.temoin-mots{margin-top:32px;border-top:1px solid var(--bord-fort)}
.temoin-mots li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--bord);
  font:700 17px/1.2 var(--f-titre)}
.temoin-mots li::before{content:"";width:12px;height:8px;background:var(--rouge);transform:skewX(-22deg);flex:none}
.temoin-d{position:relative;margin:0;padding:48px 56px 44px;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);
  box-shadow:var(--ombre-repos)}
/* le guillemet : un grand « rouge, en Red Hat Display, accroché au coin */
/* l'encre du « fait 0,52 em au-dessus de la ligne de base : interlignage 26px → l'encre tient pile dans 42px */
.temoin-guillemet{display:block;height:42px;margin:0 0 20px -3px;font:800 80px/26px var(--f-titre);color:var(--rouge);pointer-events:none}
.temoin-d blockquote{margin:0}
.temoin-d blockquote p{font:500 clamp(21px,.6vw + 14px,24px)/1.52 var(--f-titre);letter-spacing:-.004em;color:var(--encre)}
.temoin-d figcaption{display:flex;flex-direction:column;gap:4px;margin-top:30px;padding-top:22px;border-top:1px solid var(--bord)}
.temoin-qui{display:inline-flex;align-items:center;font:800 17px/1.3 var(--f-titre)}
.temoin-ou{font-size:var(--t-petit);color:var(--muted)}


/* =========================================================================================
   10 · LE BANDEAU DEVIS
   ========================================================================================= */
.bandeau{background:var(--rouge);color:#fff;padding-block:clamp(4.75rem,5.8vw,6.75rem);position:relative;overflow:hidden}
/* le rappel discret du lettrage : deux bandes penchées dans l'angle */
.bandeau::before,.bandeau::after{content:"";position:absolute;top:-20%;height:140%;width:180px;background:rgba(11,11,11,.10);
  transform:skewX(-22deg);right:12%;pointer-events:none}
.bandeau::after{right:calc(12% + 220px);width:60px;background:rgba(11,11,11,.07)}
/* le formulaire garde une largeur fixe : ses deux colonnes ne tronquent jamais la liste des machines */
.bandeau-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,572px);gap:clamp(48px,6vw,96px);align-items:center}
.bandeau-txt{padding-block:12px}
.bandeau h2{font:800 clamp(38px,1.9vw + 14px,52px)/1.05 var(--f-titre);letter-spacing:-.02em}
.bandeau-txt > p{margin-top:20px;max-width:46ch;font-size:18px;line-height:1.6;color:rgba(255,255,255,.92)}
.bandeau-tels{display:flex;gap:44px;margin-top:36px}
.bandeau-tels a{display:flex;flex-direction:column;gap:9px;font:800 28px/1 var(--f-titre);letter-spacing:.005em;white-space:nowrap;transition:opacity .2s}
.bandeau-tels a span{font:600 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9)}
/* un trait blanc se dessine sous le numéro, comme sous les liens fléchés (finitions du 09/10, point 7) ; le rembourrage
   du bas est repris par la marge : rien ne bouge au repos */
.bandeau-tels a{background:linear-gradient(#fff,#fff) 0 100%/0 2px no-repeat;padding-bottom:7px;margin-bottom:-7px;transition:background-size .45s var(--ease)}
.bandeau-tels a:hover,.bandeau-tels a:focus-visible{background-size:100% 2px}
.bandeau-agence{display:flex;flex-direction:column;gap:8px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.28);
  max-width:460px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92)}
.bandeau-agence b{display:block;font:700 16px/1.3 var(--f-titre);color:#fff;margin-bottom:2px}
.bandeau :focus-visible{outline-color:#fff}
.bandeau .devis :focus-visible{outline-color:var(--rouge)}

.devis{background:var(--blanc);color:var(--encre);border-radius:var(--r);padding:36px 36px 30px;box-shadow:0 30px 60px -24px rgba(11,11,11,.45)}
.devis-t{font:800 var(--t-bloc)/1.15 var(--f-titre);letter-spacing:-.012em}
.devis-st{margin-top:6px;font-size:15px;color:var(--muted)}
.devis-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin-top:24px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ--plein{grid-column:1/-1}
.champ label,.champ-lab{font:600 var(--t-meta)/1.2 var(--f-corps)}
.facultatif{margin-left:6px;font-weight:400;color:var(--muted)}
.champ input[type=text],.champ input[type=tel],.champ select,.champ textarea{width:100%;padding:0 14px;border:1px solid #8C8C8C;border-radius:var(--r);
  background:#fff;font:400 15.5px/1.4 var(--f-corps);color:var(--encre);transition:border-color .2s,box-shadow .2s;appearance:none}
.champ input[type=text],.champ input[type=tel],.champ select{height:48px}
.champ textarea{min-height:76px;padding:12px 14px;resize:vertical;display:block}
.champ ::placeholder{color:#737373;opacity:1}
.champ select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--encre)}
/* le champ actif : une bordure de 2 px, nette, et un halo léger ; la case à cocher garde le cadre rouge du site, au
   clavier seulement (finitions du 09/10, point 6). :where() garde la force de l'ancienne règle : un champ en erreur
   reste rouge quand on y revient. */
.champ input:where(:not([type=checkbox])):focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre),0 0 0 4px rgba(26,26,26,.10)}
.case input:focus{box-shadow:none}
.case input:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
.champ.erreur input,.champ.erreur select,.champ.erreur .fichier{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(209,20,37,.12)}
.champ-aide{font-size:12.5px;line-height:1.35;color:var(--muted)}
.champ-err{font:500 12.5px/1.4 var(--f-corps);color:var(--rouge)}
.champ-err:empty{display:none}
/* le champ photo : un bouton franc, le nom du fichier à côté */
.fichier{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;padding:6px 14px 6px 6px;
  border:1px dashed #8C8C8C;border-radius:var(--r);cursor:pointer;transition:border-color .2s,background-color .2s}
.fichier:hover,.fichier:has(input:focus-visible){border-color:var(--encre);background:var(--fond)}
.fichier input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fichier input:focus-visible + .fichier-btn{outline:2px solid var(--rouge);outline-offset:2px}
.fichier-btn{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:3px;background:var(--creme);
  font:600 14px/1 var(--f-corps);color:var(--encre)}
.fichier-nom{min-width:0;font-size:13px;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.fichier.a-fichier .fichier-nom{color:var(--encre);font-weight:500;white-space:nowrap}
.champ--case{margin-top:20px}
.case{display:flex;align-items:flex-start;gap:10px;font:400 13px/1.45 var(--f-corps)!important;color:var(--muted);cursor:pointer}
.case a{color:var(--encre);text-decoration:underline;text-underline-offset:2px}
.case input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--rouge);flex:none}
.champ--case .champ-err{margin-top:6px}
.devis .btn-plein{margin-top:20px}
.devis-pied{margin-top:14px;font-size:var(--t-meta);color:var(--muted);text-align:center}
.devis-pied a{color:var(--encre);font-weight:600}
.devis-ok{padding-block:8px 4px}
.devis-ok .devis-t{display:flex;align-items:center;gap:12px}
.devis-ok .devis-t::before{content:"";width:16px;height:12px;background:var(--rouge);transform:skewX(-22deg);flex:none}
.devis-ok p:not(.devis-t){margin-top:12px;font-size:var(--t-texte);line-height:1.6;color:var(--muted)}
.devis-ok p a{color:var(--encre);font-weight:600}
.devis-ok .lien-fleche{margin-top:20px}
.devis-ok:focus{outline:none}


/* =========================================================================================
   11 · LE PIED DE PAGE
   ========================================================================================= */
.pied{background:var(--noir);color:var(--sur-noir-2);font-size:15px;line-height:1.6}
.pied-haut{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,9.4fr);gap:clamp(40px,5vw,80px);padding-block:76px 60px}
.pied-marque img{height:44px;width:auto}
.pied-marque p{margin-top:18px;max-width:28ch;color:var(--sur-noir-3)}
/* à partir de 1024 px, chaque lien et chaque ligne des horaires tiennent sur une ligne : leur colonne ne descend pas sous
   leur largeur ; la première (l'adresse, qui passe à la ligne) cède les quelques pixels qu'il faut. Une colonne déjà assez
   large ne bouge pas (finitions finales du 10/10, point 8 : « Location de matériel à Propriano » faisait deux lignes) */
.pied-cols{display:grid;grid-template-columns:minmax(0,.95fr) minmax(auto,1.25fr) minmax(auto,.9fr) minmax(auto,1fr);gap:32px}
@media (min-width:1024px){
  .pied-col li a,.pied-heures{white-space:nowrap}
}
.pied-col a[href^="mailto"]{white-space:nowrap}
.pied-t{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.pied-col p + p{margin-top:12px}
.pied-col li + li{margin-top:8px}
.pied a{transition:color .2s}
.pied a:hover,.pied a:focus-visible{color:#fff}
.pied :focus-visible{outline-color:#fff}
.pied-col a[href^="tel"]{color:#fff;font-weight:600}
.pied-col a[href^="tel"]:hover,.pied-col a[href^="tel"]:focus-visible{color:var(--rouge-sur-noir)}
.pied-tout{color:#fff;font-weight:600}
.pied-tout::after{content:" →";color:var(--rouge-sur-noir)}
.pied-bas{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:22px 28px;border-top:1px solid var(--bord-noir);
  font-size:var(--t-meta);color:var(--sur-noir-3)}
.pied-bas ul{display:flex;flex-wrap:wrap;gap:8px 24px}
/* 1181 → 1279 : « Nous joindre » s'élargit (un peu moins d'écart entre les colonnes) ; les horaires y restent sur deux
   lignes et l'adresse e-mail tient dans sa colonne. À 1280 et au-delà, rien ne change */
@media (min-width:1181px) and (max-width:1279px){
  .pied-cols{grid-template-columns:minmax(0,.9fr) minmax(auto,1.3fr) minmax(auto,.85fr) minmax(auto,.95fr);gap:24px}
}


/* =========================================================================================
   12 · LES ANIMATIONS — dans le temps, jamais au défilement
   ========================================================================================= */
/* l'entrée du hero, au chargement */
.js [data-entree]{opacity:0;transform:translateY(16px)}
.js.pret [data-entree]{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease)}
.js.pret [data-entree="2"]{transition-delay:.08s}
.js.pret [data-entree="3"]{transition-delay:.18s}
.js.pret [data-entree="4"]{transition-delay:.28s}
.js.pret [data-entree="5"]{transition-delay:.36s}
.js.pret [data-entree="6"]{transition-delay:.46s}
.js .hero-img img{transform:scale(1.045)}
.js.pret .hero-img img{transform:none;transition:transform 2.4s var(--ease)}

/* un simple fondu à l'entrée d'un bloc */
.js .apparait{opacity:0;transform:translateY(14px)}
.js .apparait.vu{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
/* une fois entrée, la carte retrouve ses survols sans retard */
.js .apparait.vu.pose{transition-delay:0s!important}

/* le formulaire : le champ photo signalé quand on arrive par « Envoyer une photo » */
@keyframes signale{0%,100%{box-shadow:0 0 0 0 rgba(209,20,37,0)}35%{box-shadow:0 0 0 5px rgba(209,20,37,.22)}}
.fichier.signale{border-color:var(--rouge);animation:signale 1.4s var(--ease) 2}

@media (prefers-reduced-motion:reduce){
  .js [data-entree],.js .apparait{opacity:1!important;transform:none!important;transition:none!important}
  .js .hero-img img{transform:none!important;transition:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- 1280 : on resserre un peu ---------- */
@media (max-width:1360px){
  .nav-lien{padding:0 9px;font-size:15px}
  .nav-lien::after{left:9px;right:9px}
  .nav-lien--page{padding-right:0}
  .nav-lien--page::after{right:-18px}
  .nav-ouvre{margin-right:2px}
  .tete-actions{gap:18px}
  .carte-tete{padding:18px 18px 0}
  .cotes{margin-inline:18px}
  .carte-voir{padding:15px 18px}
  .carte-devis{padding:0 16px}
  .carte-nom{font-size:20px}
  .service-tete{padding:22px 20px 0}
  .service-lien{margin-inline:20px}
  /* le menu du parc : un peu moins de marge dans les cartes (« Compacteur tandem 2,5 t » sur une ligne) */
  .mg-nom,.mg-cote{padding-inline:14px}
  .mg-zone{padding-inline:14px}
  .mg-service-t{padding-left:14px}
  .mg-service-fl{padding-right:14px}
  .etape-carte{padding:24px 20px 26px}
}

/* ---------- 1024 px et plus : la navigation sur un second étage (Andrea, 10/10/2026 ; à toutes les largeurs d'ordinateur
   depuis le 17/10/2026, pour les réseaux) ----------
   Six entrées, le téléphone et le devis ne tiennent pas sur une ligne sous 1400 px ; au-delà, la ligne était pleine et les
   icônes des réseaux n'y tenaient plus (17/10). La ligne du haut garde le logo, le téléphone et le devis ; les six entrées
   passent dessous, alignées sur le logo, sous un filet d'un bord à l'autre de l'écran, les réseaux au bout de la ligne.
   L'en-tête collant passe de 85 à 129 px : --hauteur-tete suit (ancres, colonnes collantes, haut du parc). */
@media (min-width:1024px){
  :root{--hauteur-tete:128px}
  .tete-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:76px 52px;height:auto;row-gap:0}
  .marque{grid-area:1/1}
  .tete-actions{grid-area:1/3}
  .nav{grid-area:2/1/3/4;height:52px}
  .nav-liste{margin-left:-12px}
  .tete::before{content:"";position:absolute;left:0;right:0;top:76px;height:1px;background:var(--bord);pointer-events:none}
}
@media (min-width:1024px) and (max-width:1360px){
  .nav-liste{margin-left:-9px}
}
/* les réseaux (Andrea, 17/10/2026) : au bout de la ligne des entrées, la dernière icône alignée sur le bord droit du devis
   (la zone de clic, 40 px, déborde du dessin de 11 px de chaque côté : marge de -11 px). Le glyphe de la marque, 18 px comme
   dans le pied, à l'encre ; au survol, au clavier et à l'appui, le rouge (pas d'autre effet). Sous 1024 px : le menu du
   téléphone les reprend (app.js § 13), l'en-tête ne les montre pas */
.tete-reseaux{display:none}
@media (min-width:1024px){
  .tete-reseaux{grid-area:2/3;justify-self:end;align-self:center;position:relative;z-index:1;display:flex;align-items:center;margin-right:-11px}
  .tete-reseau{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);color:var(--encre);transition:color .2s}
  .tete-reseau .ico-reseau{width:18px;height:18px}
  .tete-reseau:focus-visible{color:var(--rouge);outline-offset:-2px}
}
@media (min-width:1024px) and (hover:hover){
  .tete-reseau:hover{color:var(--rouge)}
}
@media (min-width:1024px) and (hover:none) and (pointer:coarse){
  .tete-reseau:active{color:var(--rouge)}
}
/* l'encart Instagram en bas de page (Base.astro, 17/10/2026) : derrière une section crème, il prend le fond de la page */
.sec--creme + .encart-insta-sec{background:var(--fond)}

/* ---------- 1024 à 1180 : on resserre encore, sans rien tasser ---------- */
@media (max-width:1180px){
  .etapes{--g:16px}
  .etape-carte{padding:22px 18px 24px}
  .etape-t{font-size:var(--t-court)}
  .etape-p{font-size:var(--t-petit)}
  .articles{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
  .conseil--creme{flex-wrap:wrap;gap:20px 40px}
  .qm-machines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qm-doute{flex-wrap:wrap}
  /* le menu du parc : la grille garde ses cinq colonnes, en plus compact pour tenir dans un écran de 768 px ;
     le bandeau photo quitte les colonnes (son titre aurait trois lignes dans une seule) */
  .mg{padding-block:14px 16px}
  .mg-grille{--zone-h:80px}
  .mg-nom{font-size:15px}
  .mg-service-t{font-size:var(--t-court)}
  .mg-bande{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;column-gap:24px}
  .mg-bande-t,.mg-bande-p,.mg-bande-btn{grid-column:auto}
  /* les services : deux colonnes, comme les articles */
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services > li:nth-child(n+3){margin-top:var(--gout)}
  .service-t{font-size:var(--t-carte)}
  .carte-voir{padding:15px 14px}
  .carte-devis{padding:0 14px}
  /* le pied : la marque au-dessus, les quatre colonnes ont toute la largeur */
  .pied-haut{grid-template-columns:minmax(0,1fr);gap:44px}
  .pied-marque{display:flex;align-items:center;gap:28px}
  .pied-marque p{margin-top:0}
  /* le bandeau devis : un peu plus d'air pour le titre */
  .bandeau-in{gap:48px}
  .bandeau h2{font-size:34px}
}

/* ---------- 1024 à 1180 : le sous-titre du haut de l'accueil se resserre (30em) : sa 2e ligne passait sur le bras clair de la
   pelle, 2,95:1 au pire (contrôle de livraison du 10/10, point 7) ---------- */
@media (min-width:1024px) and (max-width:1180px){
  .hero-st{max-width:30em}
}

/* ---------- le menu du parc sur un écran d'ordinateur bas (800 px de haut ou moins) ----------
   De 1024 à 1399 px, l'en-tête passe sur deux étages (129 px) et pousse le menu de 44 px : sur un portable 1366 × 768 (657 px
   utiles avec la barre de favoris), 1280 × 720 ou un iPad couché, la bande « Envoyer une photo du chantier » sortait de
   l'écran, et on ne pouvait pas l'atteindre (l'en-tête est collant, la molette fait défiler la page). La grille garde ses
   cinq colonnes et ses proportions ; seuls la hauteur des images et les marges intérieures se resserrent. Au-delà de 800 px
   de haut, rien ne change (le menu tient déjà à 1280 × 800). Posé après le bloc 1024-1180 pour l'emporter sur lui
   (finitions finales du 10/10, point 2). */
@media (min-width:1024px) and (max-height:800px){
  .mg-grille{--zone-h:clamp(64px,10vh,92px)}
  .mg-zone{padding-block:10px 8px}
  .mg-nom{padding-top:9px}
  .mg-cote{padding-bottom:10px}
  .mg-fam-t{margin-bottom:8px}
  .mg-fam-pied{padding-block:8px 10px}
  .mg-bande{margin-top:10px;padding-block:10px}
  /* le filet de sécurité, pour un écran plus bas encore (moins de 670 px environ) : le menu défile en lui-même, sans
     entraîner la page. Sa hauteur compte la barre d'infos (38 px), qui n'est au-dessus de l'en-tête qu'en haut de page :
     page défilée, le menu s'arrête 38 px plus haut que nécessaire, il n'est jamais coupé. Tant qu'il tient dans l'écran,
     il ne défile pas. Réservé aux écrans bas : un cadre qui défile change le lissage du texte du menu */
  .menu-parc{max-height:calc(100dvh - var(--hauteur-tete) - 40px);overflow-y:auto;overscroll-behavior:contain}
}

/* ---------- jusqu'à 1100 : le bandeau devis passe sur une colonne (le formulaire garde sa largeur) ---------- */
@media (max-width:1100px){
  .bandeau-in{grid-template-columns:minmax(0,1fr);gap:44px}
  .bandeau-txt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 48px;align-items:end;padding-block:0}
  .bandeau-txt > h2,.bandeau-txt > p{grid-column:1}
  .bandeau-tels,.bandeau-agence{grid-column:2}
  .bandeau-tels{grid-row:1;margin-top:0;align-self:end}
  .bandeau-agence{grid-row:2;margin-top:24px;align-self:end}
  .bandeau h2{font-size:38px}
  .bandeau-tels{gap:32px}
  .bandeau-tels a{font-size:24px}
  .devis{max-width:none}
}

/* ---------- 1024 à 1100 : le texte du bandeau devis suit son titre, à 20 px comme aux autres largeurs ; aligné en bas de sa
   rangée (celle de l'adresse et des horaires, plus haute), il tombait 69 px sous le titre (contrôle de livraison du 10/10,
   point 13) ---------- */
@media (min-width:1024px) and (max-width:1100px){
  .bandeau-txt > p{align-self:start}
}


/* ---------- 1024 à 1180 : la carte de livraison (accueil, livraison) est trop étroite pour sa légende, posée en bas à gauche :
   elle cachait le nom de Bonifacio (jusqu'à 1101 px) et rognait son point (jusqu'à 1160 px environ). Elle passe en haut à
   droite, sur la Haute-Corse (contrôle de livraison du 10/10, point 9 ; le rapport disait 1024 à 1099, mesuré plus large) ---------- */
@media (min-width:1024px) and (max-width:1180px){
  .livraison-carte .carte-legende{left:auto;right:18px;top:18px;bottom:auto}
}

/* =========================================================================================
   13 · TABLETTE ET TÉLÉPHONE — tout ce qui suit vit sous 1024 px : l'ordinateur (1024 et plus)
   n'en voit rien. Deux points de rupture, partout sur le site :
   · ≤ 1023 px — tablette portrait et téléphones : l'en-tête se replie (bouton menu + panneau
     plein écran, app.js § 10), les blocs texte + image passent l'un sous l'autre ;
   · ≤ 767 px — téléphones : une colonne, échelle typographique réduite, marges de 20 px.
   Rien n'est lié au défilement ici : les rangées qui se balaient au doigt (.cartes--defile,
   .articles--defile) sont de simples défilements horizontaux, sans effet.
   Mode d'emploi pour les pages intérieures : _GABARITS.md § 7.
   ========================================================================================= */

/* le bouton menu et son panneau n'existent qu'en dessous de 1024 px */
.tete-menu,.mnav{display:none}
.tete-menu{flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;
  background:none;border:0;border-radius:var(--r);cursor:pointer;color:var(--encre)}
.tete-menu-barres{position:relative;display:block;width:22px;height:14px}
.tete-menu-barres i{position:absolute;left:0;right:0;height:2px;border-radius:1px;background:currentColor}
.tete-menu-barres i:nth-child(1){top:0}
.tete-menu-barres i:nth-child(2){top:6px}
.tete-menu-barres i:nth-child(3){top:12px}

/* ---------- le panneau du menu (construit par app.js § 10 à partir des menus de l'ordinateur) ---------- */
.mnav{position:fixed;inset:0;z-index:200;flex-direction:column;background:var(--fond);color:var(--encre);
  visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity .24s var(--ease-in-out),transform .4s var(--ease),visibility 0s linear .4s}
.mnav.ouvert{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.mnav-tete{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--hauteur-tete);
  padding-inline:var(--pad);border-bottom:1px solid var(--bord)}
.mnav-fermer{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;
  border-radius:var(--r);cursor:pointer;color:var(--encre)}
.mnav-croix{position:relative;display:block;width:22px;height:22px}
.mnav-croix::before,.mnav-croix::after{content:"";position:absolute;left:0;right:0;top:10px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.mnav-croix::after{transform:rotate(-45deg)}
.mnav-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px var(--pad) 32px}
.mnav-liste > li{border-bottom:1px solid var(--bord)}
.mnav-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mnav-lien{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0;
  background:none;border:0;text-align:left;cursor:pointer;font:800 24px/1.1 var(--f-titre);letter-spacing:-.016em;color:var(--encre)}
/* la rubrique où l'on est : le parallélogramme rouge, devant le mot */
.mnav-el.ici > .mnav-ligne > .mnav-lien::before,.mnav-el.ici > .mnav-lien::before{content:"";flex:none;order:-1;width:12px;height:9px;margin-right:2px;
  background:var(--rouge);transform:skewX(-22deg)}
.mnav-el.ici > .mnav-ligne > .mnav-lien,.mnav-el.ici > .mnav-lien{justify-content:flex-start}
.mnav-el.ici > .mnav-ligne > button.mnav-lien .chev{margin-left:auto}
.mnav-ouvre{flex:none;display:grid;place-items:center;width:48px;height:48px;margin-right:-12px;padding:0;background:none;border:0;
  border-radius:var(--r);cursor:pointer;color:var(--encre)}
.mnav .chev{width:9px;height:9px;border-width:0 2px 2px 0;transition:transform .35s var(--ease)}
.mnav-el.ouvert .chev{transform:translateY(2px) rotate(-135deg)}
.mnav-el.ouvert > .mnav-ligne .mnav-lien{color:var(--rouge)}
/* le contenu d'un accordéon : il s'ouvre en douceur (hauteur 0 → la sienne) */
.mnav-sous{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .4s var(--ease),visibility 0s linear .4s}
.mnav-el.ouvert > .mnav-sous{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.mnav-sous-in{min-height:0;overflow:hidden}
.mnav-sous-in > :last-child{margin-bottom:18px}
.mnav-tout{display:flex;align-items:center;min-height:52px;font:700 18px/1.2 var(--f-titre);color:var(--encre)}
.mnav-tout .fl{color:var(--rouge)}
.mnav-fam{margin-top:14px;padding-bottom:8px;border-bottom:1px solid var(--bord);
  font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge)}
.mnav .menu-lien{min-height:56px;padding:6px 0;justify-content:center}
.mnav .menu-lien > span{font-size:17px}
.mnav .menu-lien small{font-size:14px}
/* une machine du parc (app.js § 10 la construit depuis sa carte) : sa vignette détourée, son nom, sa cote */
.mnav-machine{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 0}
.mnav-vign{flex:none;display:flex;align-items:flex-end;justify-content:center;width:64px;height:44px;padding:4px 5px 3px;border-radius:3px;
  background:linear-gradient(180deg,var(--blanc) 0%,var(--creme) 100%);box-shadow:inset 0 0 0 1px var(--bord)}
.mnav-vign img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.mnav-machine-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mnav-machine-nom{font:700 17px/1.25 var(--f-titre);color:var(--encre)}
.mnav-machine-cote{font:400 14px/1.35 var(--f-corps);color:var(--muted)}
.mnav-machine--sans{padding-left:78px}
.mnav-machine[aria-current="page"] .mnav-machine-nom{color:var(--rouge)}
/* les menus en icônes (10, 11 et 13/10/2026) : Vos travaux, Services, Conseils, L'entreprise (2e à 5e entrées) ont la ligne
   d'une machine (app.js § 10), avec l'icône du menu de l'ordinateur, au trait rouge, à la place de la vignette */
.mnav .menu-ico{flex:none}
/* la page d'une famille (« Toutes les mini-pelles et pelles ») */
.mnav-sous-lien{display:flex;align-items:center;min-height:48px;font:600 17px/1.3 var(--f-corps);color:var(--encre)}
.mnav-sous-lien .fl{color:var(--rouge)}
.mnav-sous-lien[aria-current="page"]{color:var(--rouge)}
/* le chevron de « Services » à l'aplomb de celui de « Le parc » */
.mnav-lien .chev{margin-right:8px}
.mnav .menu-lien--grand{padding:12px 0;border-bottom:1px solid var(--bord)}
.mnav .menu-lien--grand:last-child{border-bottom:0}
.mnav .menu-lien[aria-current="page"] > span,.mnav-lien[aria-current="page"]{color:var(--rouge)}
/* les deux numéros, en grand */
.mnav-tels{display:flex;flex-direction:column;gap:4px;margin-top:22px}
.mnav-tels a{display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:72px;
  font:800 30px/1 var(--f-titre);letter-spacing:.005em;color:var(--encre);font-variant-numeric:tabular-nums}
.mnav-tels a span{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
/* le devis : toujours en bas du panneau */
.mnav-pied{flex:none;padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--bord);background:var(--fond)}
.mnav-pied .btn{width:100%}
/* pendant que le panneau est ouvert, la page dessous ne défile pas (app.js fige le corps) */
html.mnav-ouvert{scroll-behavior:auto}
html.mnav-ouvert body{position:fixed;left:0;right:0;overflow:hidden}

/* ---------- une carte (Leaflet) ne capture le doigt qu'après un appui ---------- */
@media (hover:none) and (pointer:coarse){
  .carte-garde:not(.carte-active) .leaflet-container{pointer-events:none}
  .carte-garde.carte-active{box-shadow:0 0 0 2px var(--rouge),0 30px 60px -30px rgba(11,11,11,.38)}
}

/* ---------- au doigt : pas de survol qui reste accroché après un appui ---------- */
@media (hover:none){
  .carte:hover,.qm-machine:hover,.service:hover{transform:none}
  .carte:hover{box-shadow:var(--ombre-repos);border-color:var(--bord)}
  .carte:hover .carte-img img,.service:hover .service-img img,.article:hover .article-img img{transform:none}
}

/* ---------- au doigt : l'appui se voit (finitions du 09/10, point 1 ; règle R10) ----------
   Sans souris, pas de survol : le retour vient pendant l'appui (:active). Les cartes se tassent d'un rien, la zone
   touchée prend la couleur de son survol ; le voile gris du navigateur est retiré (§ 1). Rien ne change au repos.
   Les « Devis » mènent au formulaire de la même page : leur survol ne reste pas accroché au retour.
   app.js écoute « touchstart » : sans écouteur, Safari sur iPhone n'applique pas :active.
   La FAQ et les cartes des pages (pages.css), les vidéos (videos.css) et le blog (pages-b5.css), dont le survol
   est neutralisé au doigt plus loin, ont leur appui dans leur feuille. */
@media (hover:none) and (pointer:coarse){
  .carte:active,.qm-machine:active,.service:active{transform:scale(.985);transition-duration:.12s}
  .btn-rouge:active{background:var(--rouge-fonce)}
  .btn-noir:active{background:var(--rouge)}
  .btn-contour:active,.parc-btn-contour:active,.parc-comp-tout:active{background:var(--encre);border-color:var(--encre);color:#fff}
  .btn-contour:active .fl{color:#fff}
  .btn-contour-clair:active{background:#fff;border-color:#fff;color:var(--encre)}
  .btn:active .fl,.lien-fleche:active .fl,.carte-voir:active .fl,.service-lien:active .fl,.mg-tout:active .fl,.mnav-tout:active .fl,.menu-lien--tout:active > .fl,
  .pg-comp-voir:active .fl,.parc-voir:active .fl,.b2-carte-liste a:active .fl,.choix-el:active .choix-fl,.b3-ligne-parc:active .b3-ligne-fl{transform:translateX(4px)}
  .lien-fleche:active,.article:active .article-lien,.bandeau-tels a:active{background-size:100% 2px}
  .pg-ariane a:active{color:var(--rouge);background-size:100% 1.5px}
  .carte-voir:active,.qm-option:active,.nav-ouvre:active,.tete-menu:active,.mnav-fermer:active,.mnav-ouvre:active{background:var(--creme)}
  .carte-devis:hover:not(:active):not(:focus-visible),.qm-devis:hover:not(:active):not(:focus-visible){background:transparent;color:var(--rouge)}
  .pg-comp-devis:hover:not(:active):not(:focus-visible),.parc-ligne-devis:hover:not(:active):not(:focus-visible){background:transparent;border-color:rgba(209,20,37,.35);color:var(--rouge)}
  .carte-devis:active,.qm-devis:active{background:var(--rouge);color:#fff}
  .pg-comp-devis:active,.parc-ligne-devis:active,.parc-fleche:active{background:var(--rouge);border-color:var(--rouge);color:#fff}
  .carte-nom a:active,.qm-nom a:active,.article-t a:active,.article:active .article-t a,.tete-tel:active .tete-tel-num,.qm-mot:active,
  .menu-lien:active > span,.mg-carte:active .mg-nom,.mg-tout:active,.mnav-lien:active,.mnav-tout:active,.mnav-machine:active .mnav-machine-nom,
  .choix-el:active .choix-t,.insta-compte:active,.pg-plaque-t a:active,.pg-sommaire a:active,.pg-rub a:not(.btn):active,
  a.pg-comp-machine:active .pg-comp-nom,.pg-comp-voir:active,.parc-voir:active,.parc-ligne-machine:active .parc-ligne-nom,
  .parc-filtre:active .parc-filtre-nom,.b1-g-nom a:active,.b2-carte-liste a:active,.pg-equip-t a:active,.b3-ligne-parc:active .b3-ligne-nom,
  .vid-chapo-insta:active{color:var(--rouge)}
  .pg-appel a:active,.pg-fiche dd a:active{color:var(--rouge);border-color:var(--rouge)}
  .pg-article a:not(.btn):not(.lien-fleche):active{color:var(--rouge);text-decoration-color:var(--rouge)}
  .sec--noir .pg-appel a:active,.pg-tete--photo .pg-appel a:active{color:#fff;border-color:#fff}
  .pg-tete--photo .pg-ariane a:active,.ct-scene .pg-ariane a:active,.pied a:active{color:#fff}
  .service-lien:active,.infos a:active,.pied-col a[href^="tel"]:active,.ct-tels a:active{color:var(--rouge-sur-noir)}
  .hero-appel a:active,.parc-choisir-tel a:active{border-color:#fff}
  .fichier:active{border-color:var(--encre);background:var(--fond)}
  .insta-vign:active::after,.insta-vign:hover:active::after{opacity:1}
  .visio-fermer:active{background:rgba(255,255,255,.24)}
  .mg-carte:active{border-color:var(--bord-fort);box-shadow:var(--ombre-survol)}
  .parc-filtre:active{background:var(--fond)}
  .parc-vign:active{background:var(--blanc)}
  .b3-opt:active{border-color:var(--encre)}
  .cv-zoom button:active{background:#f4f4f4}
}


/* ---------- ≤ 1023 : TABLETTE PORTRAIT (et téléphones) ---------- */
@media (max-width:1023px){
  :root{
    --pad:32px;
    --sec-py:clamp(4rem,8vw,5.25rem);
    --hauteur-tete:72px;
    --t-meta:14px;
    --t-h1:46px;
    --t-h2:34px;
    --t-intro:17px;
  }

  /* la barre d'infos : le plus utile seulement — la livraison et le fixe */
  .infos{font-size:14px}
  .infos-in{height:44px}
  .infos-g > span:first-child,.infos-g > .infos-sep,.infos-d > span:first-child,.infos-d > .infos-sep{display:none}
  .infos-d a{display:inline-flex;align-items:center;min-height:44px}

  /* l'en-tête : le logo, le téléphone, le devis, le bouton menu */
  .js .nav{display:none}
  .tete-in{gap:20px}
  .marque img{height:36px}
  .tete-actions{margin-left:auto;gap:20px}
  .tete-actions .btn{height:44px;padding:0 18px;font-size:14.5px}
  .tete-tel{justify-content:center;min-height:44px}
  .tete-tel-lab{font-size:14px}
  .marque{display:flex;align-items:center;min-height:44px}
  .tete-menu{display:inline-flex}
  .mnav{display:flex}

  /* les champs : 16 px, sinon le téléphone zoome sur le formulaire */
  .champ input[type=text],.champ input[type=tel],.champ select,.champ textarea{font-size:16px}
  .champ-aide,.champ-err{font-size:14px}
  .case{font-size:14px!important}
  /* la case d'accord (sur deux lignes, 41 px) : 44 px au doigt, dans tous les formulaires */
  .champ--case .case{min-height:44px}
  .fichier-nom{font-size:14px}

  /* les cibles au doigt : 44 px de haut au moins (les liens dans une phrase gagnent leur hauteur
     par un rembourrage qui ne change pas la ligne) */
  .hero-appel a{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;
    text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px}
  .carte-nom a{display:inline-block;padding-block:11px;margin-block:-11px}
  .qm-mot{padding-block:8px}
  .qm-nom a,.article-t a{padding-block:11px}
  .qm-devis{padding-block:15px;margin-block:-15px}
  .devis-pied a,.case a{padding-block:13px}
  /* les liens fléchés : le soulignement reste sous le mot */
  .lien-fleche{min-height:44px;background-position:0 calc(50% + .82em)}

  /* le hero : la photo en bandeau, cadrée sur la machine ; le texte dessous, sur le noir */
  .hero{--hero-img:clamp(250px,50vw + 75px,470px);height:auto;min-height:0}
  .hero-img{inset:0 0 auto 0;height:var(--hero-img)}
  .hero-img img{object-position:88% 50%}
  .hero-voile{inset:0 0 auto 0;height:var(--hero-img);
    background:linear-gradient(180deg,rgba(11,11,11,.22) 0%,rgba(11,11,11,0) 24%,rgba(11,11,11,0) 50%,rgba(11,11,11,.74) 82%,var(--noir) 100%)}
  .hero-in{height:auto;display:block;padding-top:calc(var(--hero-img) - 64px);padding-bottom:84px}
  .hero-txt{max-width:640px}
  .hero-st{max-width:56ch}

  /* les 3 arguments */
  .arg{padding:24px 22px}
  .arg::before{left:22px}
  .arg-t{font-size:18px}

  /* les cartes du parc : deux par rangée */
  .cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartes > li:nth-child(n+3){margin-top:var(--gout)}
  .conseil{flex-direction:column;align-items:flex-start;gap:20px}

  /* « Je dois [ … ▾] » : les machines proposées en cartes couchées (la photo à gauche), l'une sous l'autre ; à deux par
     rangée (768), le corps ne faisait que 185 px : « Devis » passait dessous et « À confirmer » se coupait (audit du 07/10, point 5) */
  .qm-machines,.qm-machines:has(> li:nth-child(3)):not(:has(> li:nth-child(4))){grid-template-columns:minmax(0,1fr);gap:12px}
  .qm-machine,.qm-machines--une .qm-machine{grid-column:auto;flex-direction:row}
  .qm-vign,.qm-machines--une .qm-vign{flex:0 0 124px;height:auto;min-height:0;padding:14px 12px;border-bottom:0;border-right:1px solid var(--bord);align-items:center}
  .qm-machine-corps{min-width:0;padding:14px 16px 8px 18px}
  /* trop étroit pour les deux gestes sur une ligne : « Devis » passe dessous, rien ne se coupe */
  .qm-act{flex-wrap:wrap;column-gap:14px}
  .qm-act .lien-fleche{white-space:nowrap}

  /* les services : le texte d'en-tête passe sous le titre */
  .sec-services .sec-tete{flex-direction:column;align-items:flex-start;gap:16px}

  /* « Comment ça se passe » : la version simple, un rail vertical qui relie les cinq étapes, rien ne bouge */
  .sec-deroule{padding-bottom:var(--sec-py)}
  .deroule-grille{row-gap:0}
  .deroule-col{display:contents}
  .deroule-etapes{order:2;margin-top:36px;max-width:640px}
  .deroule-btn{order:3;margin-top:4px;justify-self:start}
  .deroule-etape{min-height:0;max-width:none;padding:0 0 32px 44px;border-top:0}
  .deroule-etape::before{content:"";position:absolute;left:6px;top:14px;bottom:-2px;width:2px;background:var(--bord-fort)}
  .deroule-etape:last-child::before{display:none}
  .deroule-etape::after{content:"";position:absolute;left:0;top:0;width:16px;height:11px;background:var(--rouge);transform:skewX(-22deg)}
  .deroule-t{margin-top:10px}

  /* la livraison : le texte, puis la carte */
  .livraison{grid-template-columns:minmax(0,1fr);gap:40px}
  .livraison-carte{min-height:clamp(340px,56vw,460px)}

  /* pourquoi Locamat */
  .pourquoi{gap:40px}

  /* le témoignage */
  .temoin{grid-template-columns:minmax(0,1fr);gap:28px}
  .temoin-mots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}

  /* le bandeau devis : le texte sur une colonne (les deux numéros côte à côte), le formulaire dessous */
  .bandeau-txt{display:block}
  .bandeau-tels{flex-wrap:wrap;gap:16px 40px;margin-top:30px}
  .bandeau-agence{margin-top:30px}

  /* les cartes Leaflet : des boutons + et − de 44 px, sur toutes les cartes (accueil, livraison, contact, Propriano).
     Le sélecteur est renforcé : leaflet.min.css (.leaflet-touch .leaflet-bar a) et pages.css § 20 les ramenaient à 30 et 34 px */
  .livraison-carte .leaflet-bar.leaflet-control-zoom a,.pg-itin .leaflet-bar.leaflet-control-zoom a{width:44px;height:44px;line-height:44px;font-size:22px}
  /* l'étiquette de l'agence, posée sur les cartes : 14 px (« L'agence », en capitales, 11 px) */
  .carte-pin-nom{font-size:14px}
  .carte-pin-nom b{font-size:11px}

  /* le pied : deux colonnes de deux */
  .pied-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}
  .pied-col ul a,.pied-col p a,.pied-bas a{display:inline-flex;align-items:center;min-height:44px}
  .pied-col li + li{margin-top:0}
  .pied-col p + p{margin-top:6px}
  .pied-col ul a{min-width:44px}
  .pied-tout::after{margin-left:.3em}
}


/* ---------- ≤ 767 : TÉLÉPHONES ---------- */
@media (max-width:767px){
  :root{
    --pad:20px;
    --sec-py:4rem;
    --gout:16px;
    --hauteur-tete:64px;
    --t-h1:clamp(30px,4.5vw + 13px,34px);
    --t-h2:clamp(26px,2.5vw + 17px,29px);
    --t-intro:16.5px;
    --t-court:18px;
    --t-carte:20px;
    --t-bloc:22px;
  }

  /* l'en-tête : le logo, le numéro (un appui l'appelle), le bouton menu */
  .infos{display:none}
  .tete-in{gap:12px}
  .marque img{height:30px}
  .tete-actions{gap:0}
  .tete-actions .btn{display:none}
  .tete-tel-num{font-size:17px}

  /* sections */
  .sec-tete{flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:32px}
  .sec-tete > .btn,.sec-tete > .lien-fleche{margin-bottom:0}
  .sur{margin-bottom:12px}
  .sec-intro{margin-top:12px}

  /* le hero */
  .hero-in{padding-bottom:76px}
  .hero-sur{gap:10px;margin-bottom:16px;font-size:11.5px;letter-spacing:.09em}
  .hero h1{line-height:1.08}
  .hero-st{margin-top:16px;font-size:16px}
  .hero-btns{gap:10px;margin-top:26px}
  .hero-btns .btn{flex:1 1 auto;height:52px;padding:0 16px;font-size:15px}
  .hero-appel{margin-top:16px}

  /* les 3 arguments : l'un sous l'autre */
  .args{grid-template-columns:minmax(0,1fr)}
  .arg{padding:20px 20px 20px}
  .arg + .arg{border-left:0;border-top:1px solid var(--bord)}
  .arg::before{left:20px}
  .arg-p{font-size:15px}

  /* les cartes machines : une par rangée (et .cartes--defile : une rangée qui se balaie au doigt) */
  .cartes{grid-template-columns:minmax(0,1fr)}
  .cartes > li:nth-child(n+2){margin-top:var(--gout)}
  .carte-tete{padding:18px 18px 0}
  .cotes{margin-inline:18px}
  .carte-voir{padding:15px 18px;min-height:50px}
  .carte-devis{padding:0 18px}
  .cartes--defile{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,330px);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad));padding:4px var(--pad) 10px;scrollbar-width:none}
  .cartes--defile::-webkit-scrollbar{display:none}
  .cartes.cartes--defile > li{margin-top:0;scroll-snap-align:start}
  .cartes-note{margin-top:18px;align-items:baseline;font-size:15px}
  .cartes-note .biais{transform:translateY(-1px) skewX(-22deg)}
  .conseil{padding:24px 20px}

  /* « Je dois [ … ▾] » */
  .qm{--qm-pad:20px;margin-inline:calc(-1 * var(--pad));padding:26px var(--qm-pad) 0;border-radius:0}
  .qm-phrase{font-size:clamp(23px,1.8vw + 16px,25px);line-height:1.22}
  .qm-liste{left:calc(-1 * var(--qm-pad) + 8px);width:calc(100% + 2 * var(--qm-pad) - 16px);padding:6px}
  .qm-option{min-height:50px;padding:10px 12px;font-size:17px}
  .qm-reponse{margin-top:18px}
  .qm-rep-p{font-size:16px}
  .qm-machines,.qm-machines:has(> li:nth-child(3)):not(:has(> li:nth-child(4))){grid-template-columns:minmax(0,1fr);gap:10px;margin-top:20px}
  .qm-vign,.qm-machines--une .qm-vign{flex-basis:96px;padding:12px 10px}
  .qm-machine-corps{padding:12px 14px 6px 16px}
  .qm-nom{margin-top:6px;font-size:17px}
  .qm-cote{margin-top:8px;padding-top:8px}
  .qm-act{align-items:center;padding-top:2px}
  .qm-doute{flex-direction:column;align-items:stretch;gap:18px;margin-top:28px;padding:22px var(--qm-pad) 22px}
  .qm-doute-btns{flex-direction:column;align-items:stretch;gap:6px}
  .qm-doute-btns .lien-fleche{justify-content:center}

  /* les services : l'un sous l'autre */
  .services{grid-template-columns:minmax(0,1fr)}
  .services > li:nth-child(n+2){margin-top:var(--gout)}
  .service-img{aspect-ratio:16/9}
  .service-tete{padding:20px 20px 0}
  .service-lien{margin:18px 20px 0;padding:14px 0 18px}

  /* « Comment ça se passe » */
  .deroule-etapes{margin-top:30px}
  .deroule-etape{padding:0 0 28px 40px}
  .deroule-t{font-size:20px}
  .deroule-p{margin-top:8px;font-size:16px}
  .deroule-btn{width:100%}

  /* la livraison */
  .livraison{gap:32px}
  .livraison-txt > .btn{margin-top:24px}
  .livraison-note{padding:16px 18px}
  .livraison-carte{min-height:420px}
  /* la légende passe au-dessus du crédit de la carte (qui tient sur deux lignes) */
  .carte-legende{left:12px;bottom:40px;padding:12px 14px;gap:8px}
  /* l'étiquette de l'agence (14 px) ne tient plus à droite du point : elle passe dessous, comme sur les cartes itinéraire */
  .livraison-carte .carte-pin-nom{left:50%;top:calc(100% + 14px);transform:translateX(-50%)}
  .livraison-carte .carte-pin-nom::before{left:50%;top:-5px;transform:translateX(-50%) rotate(45deg)}

  /* pourquoi Locamat */
  .pourquoi{grid-template-columns:minmax(0,1fr);gap:32px}
  .pourquoi-photo{aspect-ratio:1/1}
  .pourquoi-photo img{object-position:50% 58%}
  .pourquoi-photo figcaption{padding:44px 20px 18px}
  .chiffres{margin-top:28px}
  .chiffre{padding:20px 14px 20px 0}
  .chiffre:nth-child(even){padding:20px 0 20px 16px}
  .chiffre dt{font-size:30px}
  .chiffre dd{margin-top:10px;font-size:14.5px}
  .chiffre dd b{font-size:15.5px}
  .pourquoi-btns{flex-wrap:wrap;gap:12px 24px;margin-top:26px}

  /* les conseils (.articles--defile : la rangée se balaie au doigt) */
  .articles{grid-template-columns:minmax(0,1fr);gap:40px}
  .articles--defile{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,320px);gap:var(--gout);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 8px;scrollbar-width:none}
  .articles--defile::-webkit-scrollbar{display:none}
  .articles--defile > li{scroll-snap-align:start}
  .article-t{margin-top:18px}

  /* le témoignage */
  .temoin-mots{margin-top:24px}
  .temoin-mots li{font-size:16px}
  .temoin-d{padding:30px 22px 26px}
  .temoin-guillemet{height:34px;margin-bottom:14px;font-size:68px;line-height:22px}
  .temoin-d blockquote p{font-size:18px;line-height:1.55}
  .temoin-d figcaption{margin-top:24px;padding-top:18px}

  /* le bandeau devis : le texte, puis le formulaire en pleine largeur */
  .bandeau{padding-block:56px 60px}
  .bandeau::before{right:-60px}
  .bandeau::after{right:150px}
  .bandeau-in{gap:32px}
  .bandeau-txt{display:block}
  .bandeau h2{font-size:30px;line-height:1.08}
  .bandeau-txt > p{margin-top:16px;font-size:16.5px}
  .bandeau-tels{flex-wrap:wrap;gap:16px 32px;margin-top:26px}
  .bandeau-tels a{justify-content:center;min-height:44px;font-size:24px}
  /* l'adresse et les horaires : le pied les redit un écran plus bas (audit du 07/10, point 4) */
  .bandeau-agence{display:none}
  .devis{padding:26px 20px 22px}
  .devis-grille{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}
  .champ--case{margin-top:18px}

  /* le pied : la marque, puis l'adresse et les numéros, puis les deux listes côte à côte */
  .pied-haut{padding-block:56px 36px;gap:36px}
  .pied-marque{flex-direction:column;align-items:flex-start;gap:14px}
  .pied-marque img{height:38px}
  .pied-cols{gap:32px 20px}
  .pied-col:nth-child(-n+2){grid-column:1/-1}
  .pied-t{margin-bottom:10px}
  .pied-bas{flex-direction:column;align-items:flex-start;gap:6px;padding-block:18px 26px}
  /* les mentions côte à côte, sur trois rangées (chaque lien garde ses 44 px) */
  .pied-bas ul{flex-direction:row;flex-wrap:wrap;gap:0 22px}
}


/* ---------- ≤ 359 : TRÈS PETITS TÉLÉPHONES (320 à 359 px : anciens Android, premier iPhone SE) ----------
   Rien de nouveau : le 375 ramené à la largeur. De 360 px et plus, rien de ce qui suit ne s'applique.
   · l'en-tête se resserre : le logo et le numéro rapetissent avec l'écran (30 → 26 px, 17 → 15 px à 320), rien
     ne disparaît, le bouton menu reste dans l'écran ;
   · les grands titres suivent la largeur utile (100vw − 2 × 20 px) dans la proportion du 375 (30 px pour 335 px),
     pour garder les coupures de ligne validées à 375 : 30 px y deviennent 25 px à 320, 27,2 px à 344. */
@media (max-width:359px){
  :root{
    --t-h1:calc(8.955vw - 3.582px);   /* 30 px à 375 */
    --t-h2:calc(7.873vw - 3.149px);   /* 26,4 px à 375 */
  }

  /* l'en-tête */
  .marque img{height:clamp(26px,10.26vw - 6.82px,30px)}
  .tete-tel-num{font-size:clamp(15px,5.13vw - 1.41px,17px)}

  /* le bandeau devis : son titre garde la proportion du 375 (« Un chantier en vue ? » depuis le 17/10/2026, sur une ligne) */
  .bandeau h2{font-size:calc(8.955vw - 3.582px)}

  /* les conseils (.articles--defile) : la carte garde la largeur du 375 jusqu'à 344 px (88 % au lieu de 80 %), la suivante
     dépasse toujours ; dessous, le titre suit la carte pour garder ses deux lignes */
  .articles--defile{grid-auto-columns:min(88%,320px)}
  .article-t{font-size:min(var(--t-carte),calc(6.567vw - 2.627px))}

  /* un bouton dont le libellé ne tient pas sur une ligne passe à la ligne au lieu de sortir de son bloc
     (la recette du grand bouton du haut de page, pages.css § 23) ; 48 px de haut s'il tient sur une ligne */
  .conseil > .btn{display:block;width:fit-content;max-width:100%;height:auto;padding:11.5px 22px;line-height:22px;
    white-space:normal;text-align:center;text-wrap:balance}
}

/* ---------- téléphone couché (moins de 500 px de haut) : le panneau du menu ----------
   La liste ne tient pas dans la hauteur et défile entre l'en-tête du panneau et le bouton devis : une ombre légère en
   bas de la liste dit qu'elle continue. Elle est posée sur le cadre (scroll) ; un voile couleur papier, posé au bout de
   la liste (local), vient la couvrir quand on arrive en bas. Aucun script ; les écrans debout n'en voient rien. */
@media (max-width:1023px) and (orientation:landscape) and (max-height:500px){
  .mnav-corps{background:
    linear-gradient(rgba(255,252,246,0),var(--fond) 55%) 0 100%/100% 44px no-repeat local,
    linear-gradient(rgba(11,11,11,0),rgba(11,11,11,.11)) 0 100%/100% 26px no-repeat scroll}
}



/* =========================================================================================
   14 · LES RÉSEAUX — Instagram relié au site (07/10)
   · la section « Suivez le parc sur Instagram » de l'accueil (entre le témoignage et le devis) ;
   · le compte dans le pied de page (colonne « Nous joindre ») : Facebook et TikTok y ont leur
     emplacement, masqué tant que le client n'a pas confirmé leur adresse ;
   · le compte dans le panneau du menu (sous 1024 px, construit par app.js § 10) ;
   · l'encart « Suivez le parc sur Instagram », en fin d'article et en bas des fiches machines (10/10/2026 : il remplace
     la fenêtre surgissante ; rien ne surgit).
   Le glyphe Instagram est celui de la marque, jamais déformé, à l'encre (fond clair) ou blanc (fond noir).
   Les règles tablette et téléphone sont en bas de ce paragraphe (≤ 1023 et ≤ 767, comme partout).
   ========================================================================================= */
.ico-reseau{display:block;flex:none;width:18px;height:18px}

/* ---------- la section de l'accueil ---------- */
.sec-insta{background:var(--fond)}
.insta-compte{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:700 18px/1.2 var(--f-titre);letter-spacing:-.005em;
  color:var(--encre);transition:color .2s}
.insta-compte .ico-reseau{width:22px;height:22px}
.insta-compte:hover,.insta-compte:focus-visible{color:var(--rouge)}
.insta-gestes{flex:none;display:flex;align-items:center;gap:28px;margin-bottom:4px}
.insta-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.insta-vign{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--creme)}
.insta-vign img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
/* au survol : le voile et le glyphe, comme sur la grille d'un compte */
.insta-vign::after{content:"";position:absolute;inset:0;background:rgba(11,11,11,.46) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E") no-repeat center/34px;
  opacity:0;transition:opacity .35s var(--ease-in-out)}
.insta-vign:hover::after{opacity:1}
.insta-vign:hover img{transform:scale(1.04)}

/* ---------- le pied de page ---------- */
.pied-reseaux{margin-top:12px}
.pied-reseaux + p{margin-top:12px}
.pied-reseau{display:inline-flex;align-items:center;gap:10px}
.pied-reseau .ico-reseau{color:#fff}

/* ---------- le panneau du menu (sous 1024 px) : le compte, sous les deux numéros ---------- */
.mnav-reseaux{margin-top:14px;padding-top:6px;border-top:1px solid var(--bord)}
.mnav-reseau{display:flex;flex-direction:column;justify-content:center;gap:9px;min-height:72px;color:var(--encre)}
.mnav-reseau > span:first-child{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.mnav-reseau-v{display:inline-flex;align-items:center;gap:10px;font:800 22px/1 var(--f-titre);letter-spacing:-.005em}
.mnav-reseau-v .ico-reseau{width:22px;height:22px}

/* ---------- l'encart « Suivez le parc sur Instagram » (10/10/2026 : il remplace la fenêtre surgissante) ----------
   En fin d'article : un bloc crème dans la colonne de l'article, trois publications à gauche, le texte à droite. En bas d'une
   fiche machine (--large) : une section crème, le texte à gauche, cinq publications à droite. Rien ne surgit. */
.encart-insta{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;margin-top:56px;padding:20px 28px 20px 20px;
  background:var(--creme);border-radius:var(--r)}
.encart-insta-vign{display:grid;grid-template-columns:repeat(3,92px);gap:4px}
.encart-insta-vign img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:var(--fond)}
.encart-insta .sur{margin-bottom:10px;color:var(--rouge)}
.encart-insta-t{font:800 var(--t-carte)/1.15 var(--f-titre);letter-spacing:-.012em}
.encart-insta-compte{display:flex;align-items:center;gap:9px;margin-top:8px;font:700 16px/1.2 var(--f-titre)}
.encart-insta-compte .ico-reseau{width:20px;height:20px}
.encart-insta .btn{margin-top:16px;height:44px}
/* en fin d'article : la règle « .pg-article > * + * » (20 px) l'emportait sur la marge de l'encart, qui se collait au bouton du
   devis ; et « .pg-article p » grisait son titre et son compte (finitions finales du 10/10, point 4) */
.pg-article > .encart-insta{margin-top:48px}
.pg-article .encart-insta .encart-insta-t,.pg-article .encart-insta .encart-insta-compte{color:var(--encre)}
.encart-insta-sec{padding-block:clamp(3.5rem,4.6vw,4.75rem);background:var(--creme)}
.encart-insta--large{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:56px;margin:0;padding:0;background:none}
.encart-insta--large .encart-insta-vign{order:2;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.encart-insta--large .encart-insta-vign img{border-radius:var(--r)}
.sec .encart-insta--large .encart-insta-t{font-size:clamp(26px,1vw + 16px,30px);line-height:1.12}

/* au doigt : pas de survol accroché sur les vignettes */
@media (hover:none){
  .insta-vign:hover::after{opacity:0}
  .insta-vign:hover img{transform:none}
}

/* ---------- ≤ 1023 : tablette (et téléphones) ---------- */
@media (max-width:1023px){
  /* l'en-tête de la section : le titre, puis les deux gestes dessous */
  .insta-tete{flex-direction:column;align-items:flex-start;gap:24px}
  .insta-compte{min-height:44px;margin-top:10px}
  .insta-gestes .btn{order:-1}
  .insta-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  /* le pied : le compte garde ses 44 px au doigt (comme les autres liens du pied) */
  .pied-reseaux{margin-top:6px}
  .pied-reseaux + p{margin-top:6px}
  /* l'encart d'une fiche machine : le texte, puis les publications dessous */
  .encart-insta--large{grid-template-columns:minmax(0,1fr);gap:28px}
  .encart-insta--large .encart-insta-vign{order:0}
}

/* ---------- ≤ 767 : téléphones ---------- */
@media (max-width:767px){
  /* la grille comme celle d'un compte : trois colonnes, des joints fins */
  .insta-grille{gap:4px}
  .insta-vign{border-radius:2px}
  .insta-gestes{flex-wrap:wrap;gap:12px 24px;width:100%}
  .insta-gestes .btn{width:100%;height:52px}
  /* l'encart : les publications au-dessus (trois), le texte dessous, le bouton sur toute la largeur */
  .encart-insta{grid-template-columns:minmax(0,1fr);gap:20px;padding:16px 16px 20px;margin-top:44px}
  .encart-insta-vign,.encart-insta--large .encart-insta-vign{grid-template-columns:repeat(3,minmax(0,1fr))}
  .encart-insta--large .encart-insta-vign img:nth-child(n+4){display:none}
  .encart-insta--large{padding:0;margin-top:0}   /* sa section a déjà son air (finitions finales du 10/10, point 10) */
  .encart-insta .btn{width:100%;height:52px}
}