/* =========================================================================================
   PAGE « LE PARC » · le système du showroom (accueil 08) dans la famille de l'accueil 07
   S'appuie sur style.css de l'accueil 07 : couleurs, typo, boutons, en-tête, menus, bandeau
   devis, pied de page. Ici seulement ce qui est propre à la page : le titre, les filtres,
   la salle (une machine à la fois), la liste comparative et le bandeau conseil.
   Toutes les classes commencent par « parc- » pour ne jamais croiser celles de l'accueil.
   Rien n'est lié au défilement : tout bouge au clic, au clavier ou au chargement.
   ========================================================================================= */

/* on est sur la page du parc : l'onglet « Le parc » garde son trait rouge */
.nav-el[data-menu="parc"] > .nav-lien::after{transform:scaleX(1)}

.parc-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* =========================================================================================
   1 · LE TITRE DE LA PAGE
   ========================================================================================= */
.parc-tete{padding-block:22px 30px}
.parc-ariane ol{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;font:500 13.5px/1 var(--f-corps);color:var(--muted)}
.parc-ariane li{display:flex;align-items:center;gap:10px}
.parc-ariane li + li::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--bord-fort);border-top:1.5px solid var(--bord-fort);transform:rotate(45deg)}
.parc-ariane a{color:var(--encre);padding-block:4px;background:linear-gradient(var(--rouge),var(--rouge)) 0 100%/0 1.5px no-repeat;
  transition:background-size .4s var(--ease),color .2s}
.parc-ariane a:hover,.parc-ariane a:focus-visible{color:var(--rouge);background-size:100% 1.5px}
.parc-ariane [aria-current]{color:var(--muted)}

.parc-titre{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(40px,6vw,120px);margin-top:20px}
.parc-titre h1{flex:none;font-weight:800;font-size:var(--t-h1,clamp(48px,3vw + 14px,68px));line-height:.98;letter-spacing:-.024em}
.parc-titre p{max-width:64ch;font-size:var(--t-intro,17.5px);line-height:1.6;color:var(--muted);padding-bottom:4px}


/* =========================================================================================
   2 · LA SALLE — un seul bloc : filtres, scène, plaque, vignettes
   ========================================================================================= */
.parc-zone{padding-bottom:clamp(4.5rem,5.6vw,6.5rem)}
.parc-salle{position:relative;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 var(--bord),0 26px 56px -26px rgba(11,11,11,.26)}

/* ---------- les filtres par famille ---------- */
.parc-filtres{display:grid;grid-template-columns:repeat(5,minmax(max-content,1fr));border-bottom:1px solid var(--bord)}
.parc-filtre{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;
  padding:17px clamp(16px,1.5vw,22px) 16px;background:var(--blanc);border:0;text-align:left;cursor:pointer;
  transition:background-color .25s var(--ease-in-out)}
.parc-filtre + .parc-filtre{border-left:1px solid var(--bord)}
.parc-filtre-nom{display:flex;align-items:center;gap:10px;font:800 17.5px/1.15 var(--f-titre);letter-spacing:-.005em;transition:color .2s}
.parc-filtre-sous{font:400 var(--t-meta,13.5px)/1.3 var(--f-corps);color:var(--muted);white-space:nowrap}
/* le trait rouge du choix, comme sous les liens de l'en-tête */
.parc-filtre::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--rouge);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.parc-filtre:hover,.parc-filtre:focus-visible{background:var(--fond)}
.parc-filtre:hover .parc-filtre-nom,.parc-filtre:focus-visible .parc-filtre-nom{color:var(--rouge)}
.parc-filtre.on{background:var(--fond)}
.parc-filtre.on::after{transform:scaleX(1)}
.parc-filtre.on .parc-filtre-nom{color:var(--encre)}

/* ---------- la scène ---------- */
.parc-scene{position:relative;overflow:hidden;isolation:isolate;
  height:clamp(400px,calc(100svh - var(--hauteur-tete) - 340px),640px);
  --sol:13%;
  background:
    radial-gradient(ellipse 42% 58% at 50% 46%,#FFFFFF 0%,rgba(255,255,255,0) 72%),
    linear-gradient(180deg,var(--fond) 0%,var(--creme) 100%)}

/* le nom en filigrane, derrière la machine (taille ajustée en JS à la largeur de la scène) */
.parc-filis{position:absolute;inset:0;z-index:-1;pointer-events:none}
.parc-fili{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);
  font:900 120px/.82 var(--f-titre);letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;
  color:rgba(26,26,26,.058);opacity:0;user-select:none}
.parc-fili.on{opacity:1}

/* le sol */
.parc-sol{position:absolute;left:0;right:0;bottom:0;height:var(--sol);border-top:1px solid var(--bord);
  background:linear-gradient(180deg,rgba(26,26,26,.035),rgba(26,26,26,0) 85%)}

/* la machine */
.parc-engins{position:absolute;left:50%;bottom:calc(var(--sol) - 1.2%);transform:translateX(-50%);
  width:min(56%,920px);height:75%;pointer-events:none}
/* --dx décale une machine dont la silhouette déborde d'un côté (la flèche du télescopique) */
.parc-engin{position:absolute;top:0;bottom:0;left:var(--dx,0%);right:calc(-1 * var(--dx,0%));margin:0;opacity:0;display:flex;align-items:flex-end;justify-content:center}
.parc-engin.on{opacity:1}
.parc-engin img{position:relative;z-index:2;min-width:0;min-height:0;width:calc(100% * var(--s,1));height:calc(100% * var(--s,1));
  object-fit:contain;object-position:50% 100%}
.parc-ombre{position:absolute;z-index:1;left:50%;bottom:-13px;width:calc(78% * var(--s,1));height:30px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(26,26,26,.40),rgba(26,26,26,.14) 58%,rgba(26,26,26,0));filter:blur(5px)}

/* les cotes, autour de la machine */
.parc-mesure{position:absolute;z-index:3;margin:0;display:flex;flex-direction:column;gap:12px;min-width:150px}
.parc-mesure-1{left:clamp(28px,2.8vw,48px);top:33%}
.parc-mesure-2{right:clamp(28px,2.8vw,48px);top:12%;align-items:flex-end;text-align:right}
.parc-mesure-3{right:clamp(28px,2.8vw,48px);top:48%;align-items:flex-end;text-align:right}
.parc-mesure dt{display:flex;align-items:center;gap:12px;font:700 var(--t-label,12px)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* le petit trait rouge qui part vers la machine */
.parc-mesure-1 dt::after,.parc-mesure-2 dt::before,.parc-mesure-3 dt::before{content:"";flex:none;width:36px;height:2px;background:var(--rouge)}
.parc-mesure dd{margin:0;display:flex;align-items:baseline;gap:7px;font:800 clamp(40px,1.7vw + 22px,58px)/.95 var(--f-titre);
  letter-spacing:-.03em;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}
.parc-mesure .u{font-size:.4em;font-weight:600;letter-spacing:0;color:var(--muted)}
/* une cote qui manque : un repère « à confirmer », discret */
.parc-mesure dd.manque{font:500 15.5px/1.3 var(--f-corps);letter-spacing:0;color:var(--muted);align-items:center;padding-top:4px}
.parc-mesure dd.manque .u{display:none}
.parc-mesure[hidden]{display:none}

.parc-note{position:absolute;z-index:3;left:clamp(28px,2.8vw,48px);bottom:calc(var(--sol) / 2);transform:translateY(50%);
  font:500 13.5px/1.3 var(--f-corps);color:var(--muted)}

/* compteur et flèches, posés sur le sol à droite */
.parc-nav{position:absolute;z-index:3;right:clamp(20px,2.2vw,40px);bottom:calc(var(--sol) / 2);transform:translateY(50%);
  display:flex;align-items:center;gap:10px}
.parc-compteur{display:flex;align-items:center;gap:10px;margin-right:8px;font:700 14px/1 var(--f-titre);font-variant-numeric:tabular-nums;color:var(--encre)}
.parc-compteur-sep{width:22px;height:1.5px;background:var(--bord-fort)}
.parc-compteur-t{color:var(--muted)}
.parc-fleche{width:46px;height:46px;display:grid;place-items:center;padding:0;background:var(--blanc);color:var(--encre);
  border:1px solid var(--bord-fort);border-radius:50%;cursor:pointer;
  transition:background-color .25s var(--ease-in-out),border-color .25s var(--ease-in-out),color .2s}
.parc-fleche svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease)}
.parc-fleche:hover,.parc-fleche:focus-visible{background:var(--rouge);border-color:var(--rouge);color:#fff}
.parc-fleche-prec:hover svg,.parc-fleche-prec:focus-visible svg{transform:translateX(-2px)}
.parc-fleche-suiv:hover svg,.parc-fleche-suiv:focus-visible svg{transform:translateX(2px)}
.parc-fleche:disabled{opacity:.35;cursor:default;background:var(--blanc);border-color:var(--bord-fort);color:var(--encre)}
.parc-fleche:disabled svg{transform:none}

/* ---------- la plaque ---------- */
.parc-plaque{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:center;gap:clamp(28px,2.8vw,52px);
  min-height:170px;padding:24px clamp(24px,2.4vw,36px);border-top:1px solid var(--bord)}
.parc-plaque-sur{display:flex;align-items:center;gap:12px;font:700 var(--t-label,12px)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge)}
.parc-plaque-marque{color:var(--muted);padding-left:12px;border-left:1px solid var(--bord-fort)}
.parc-plaque-marque:empty{display:none}
.parc-plaque-nom{margin-top:11px;font:800 clamp(28px,.9vw + 18px,36px)/1.06 var(--f-titre);letter-spacing:-.018em;white-space:nowrap}
.parc-plaque-accroche{margin-top:9px;max-width:62ch;font-size:var(--t-texte,15.5px);line-height:1.55;color:var(--muted)}
.parc-plaque-equip{align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(28px,3vw,48px);border-left:1px solid var(--bord)}
.parc-plaque-lab{font:700 var(--t-label,12px)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.parc-equip li{display:flex;align-items:baseline;gap:12px;padding:5px 0;font:500 var(--t-petit,14.5px)/1.4 var(--f-corps);color:var(--encre)}
.parc-equip li::before{content:"";flex:none;width:11px;height:7px;background:var(--rouge);transform:skewX(-22deg) translateY(-1px)}
.parc-plaque-gestes{display:flex;flex-direction:column;gap:10px;width:224px}
.parc-plaque-gestes .btn{width:100%}

/* le bouton contour, version fond clair (même gabarit que les boutons de l'accueil) */
.parc-btn-contour{background:transparent;border-color:var(--bord-fort);color:var(--encre)}
.parc-btn-contour:hover,.parc-btn-contour:focus-visible{background:var(--encre);border-color:var(--encre);color:#fff}
.parc-btn-contour.sans-fiche{color:var(--muted)}

/* ---------- la rangée de vignettes ---------- */
.parc-rangee{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid var(--bord);background:var(--fond)}
.parc-vign{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;
  padding:15px clamp(12px,1.2vw,18px) 14px;background:transparent;border:0;cursor:pointer;text-align:left;color:var(--encre);
  transition:background-color .3s var(--ease-in-out),opacity .35s var(--ease-in-out)}
.parc-vign + .parc-vign{border-left:1px solid var(--bord)}
.parc-vign::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--rouge);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.parc-vign img{width:100%;height:clamp(40px,4.6vh,54px);object-fit:contain;object-position:0 100%;
  opacity:.62;filter:saturate(.55);transition:opacity .35s,filter .35s,transform .5s var(--ease)}
.parc-vign-nom{max-width:100%;font:600 14px/1.2 var(--f-corps);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.parc-vign:hover,.parc-vign:focus-visible{background:var(--blanc)}
.parc-vign:hover img,.parc-vign:focus-visible img{opacity:1;filter:none;transform:translateY(-2px)}
.parc-vign:hover .parc-vign-nom,.parc-vign:focus-visible .parc-vign-nom{color:var(--encre)}
.parc-vign.on{background:var(--blanc)}
.parc-vign.on::before{transform:scaleX(1)}
.parc-vign.on img{opacity:1;filter:none}
.parc-vign.on .parc-vign-nom{color:var(--encre);font-weight:700}
/* hors de la famille choisie : en retrait, mais toujours cliquable (le filtre revient alors sur « Tout ») */
.parc-vign.hors img{opacity:.22;filter:grayscale(1)}
.parc-vign.hors .parc-vign-nom{color:rgba(107,107,107,.6)}
.parc-vign.hors:hover img,.parc-vign.hors:focus-visible img{opacity:.5;filter:grayscale(1);transform:none}
/* le cadre du clavier, à l'intérieur : le bandeau le couperait au-dehors (finitions du 09/10, point 4) */
.parc-filtre:focus-visible,.parc-vign:focus-visible{outline-offset:-3px}

.parc-annonce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* =========================================================================================
   3 · TOUT LE PARC, CÔTE À CÔTE — la liste comparative
   ========================================================================================= */
.parc-comp{background:var(--creme)}
.parc-comp .sec-tete{margin-bottom:34px}
.parc-comp-barre{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:40px;margin-bottom:14px}
.parc-comp-etat{font-size:15px;color:var(--muted)}
.parc-comp-etat b{font:700 15px/1 var(--f-corps);color:var(--encre)}
.parc-comp-tout{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:var(--blanc);border:1px solid var(--bord-fort);
  border-radius:var(--r);font:600 14px/1 var(--f-corps);color:var(--encre);cursor:pointer;
  transition:background-color .25s var(--ease-in-out),color .25s,border-color .25s}
.parc-comp-tout:hover,.parc-comp-tout:focus-visible{background:var(--encre);border-color:var(--encre);color:#fff}
.parc-comp-tout[hidden]{display:none}

.parc-table-cadre{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden}
.parc-table{width:100%;border-collapse:collapse;table-layout:fixed}
.parc-table thead th{padding:16px 18px 15px;border-bottom:1px solid var(--bord-fort);background:var(--blanc);text-align:left;
  font:700 var(--t-label,12px)/1.2 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.parc-table .parc-col-machine{width:30%}
.parc-table .parc-col-usage{width:27%}
.parc-table .parc-col-actions{width:184px}
.parc-table tbody tr{border-top:1px solid var(--bord);transition:background-color .25s var(--ease-in-out)}
.parc-table tbody tr:first-child{border-top:0}
.parc-table tbody tr:hover,.parc-table tbody tr:focus-within{background:var(--fond)}
.parc-table tbody th,.parc-table tbody td{padding:12px 18px;text-align:left;vertical-align:middle;font-weight:400}
.parc-table tbody th{padding-left:14px}
.parc-table tr[hidden]{display:none}

.parc-ligne-machine{display:flex;align-items:center;gap:18px}
.parc-ligne-img{flex:none;display:grid;place-items:center;width:104px;height:62px;padding:6px 8px;background:var(--creme);border-radius:3px;overflow:hidden}
.parc-ligne-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .5s var(--ease)}
.parc-ligne-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.parc-ligne-fam{font:700 11px/1.2 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--rouge)}
.parc-ligne-nom{font:800 18px/1.2 var(--f-titre);letter-spacing:-.006em;color:var(--encre);transition:color .2s}
.parc-ligne-machine:hover .parc-ligne-nom,.parc-ligne-machine:focus-visible .parc-ligne-nom{color:var(--rouge)}
.parc-ligne-machine:hover .parc-ligne-img img,.parc-ligne-machine:focus-visible .parc-ligne-img img{transform:scale(1.06)}

.parc-num{font:700 16px/1.25 var(--f-titre);font-variant-numeric:tabular-nums;letter-spacing:.005em;color:var(--encre);white-space:nowrap}
.parc-num small{display:block;margin-top:3px;font:400 12.5px/1.2 var(--f-corps);letter-spacing:0;color:var(--muted)}
.parc-manque{display:inline-flex;align-items:center;font:500 var(--t-meta,13.5px)/1.3 var(--f-corps);color:var(--muted);white-space:nowrap}
.parc-usage{font-size:var(--t-petit,14.5px);line-height:1.5;color:var(--muted)}

.parc-actions{white-space:nowrap}
.parc-actions{text-align:right!important}
.parc-voir{display:inline-flex;align-items:center;font:600 14.5px/1 var(--f-corps);color:var(--encre);padding:10px 4px}
.parc-voir .fl{color:var(--rouge)}
.parc-voir:hover,.parc-voir:focus-visible{color:var(--rouge)}
.parc-voir:hover .fl,.parc-voir:focus-visible .fl{transform:translateX(4px)}
.parc-ligne-devis{display:inline-flex;align-items:center;height:36px;margin-left:10px;padding:0 14px;border:1px solid rgba(209,20,37,.35);border-radius:var(--r);
  font:600 14px/1 var(--f-corps);color:var(--rouge);transition:background-color .25s var(--ease-in-out),color .25s,border-color .25s}
.parc-ligne-devis:hover,.parc-ligne-devis:focus-visible{background:var(--rouge);border-color:var(--rouge);color:#fff}

/* la ligne qui revient après un changement de filtre : un fondu court */
@keyframes parc-ligne-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.parc-table tr.arrive{animation:parc-ligne-arrive .5s var(--ease) both}


/* =========================================================================================
   4 · LE CONSEIL — « envoyez une photo du chantier » (reel 10)
   ========================================================================================= */
.parc-choisir{position:relative;overflow:hidden;background:var(--charbon);color:#fff}
/* le rappel discret du lettrage, comme sur le bandeau devis : deux bandes penchées */
.parc-choisir::before,.parc-choisir::after{content:"";position:absolute;top:-20%;height:140%;width:160px;background:rgba(255,255,255,.035);
  transform:skewX(-22deg);left:-40px;pointer-events:none}
.parc-choisir::after{left:150px;width:50px;background:rgba(255,255,255,.025)}
.parc-choisir-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,96px);align-items:center}
.parc-choisir-txt > p:not(.sur){margin-top:18px;max-width:46ch;font-size:var(--t-intro,17.5px);line-height:1.6;color:var(--sur-noir-2)}
.parc-choisir-carte{padding:34px 36px;background:var(--carte-noire);border:1px solid var(--bord-noir);border-radius:var(--r)}
.parc-choisir-t{font:800 var(--t-bloc,24px)/1.22 var(--f-titre);letter-spacing:-.008em;text-wrap:balance}
.parc-choisir-p{margin-top:10px;font-size:var(--t-texte,15.5px);line-height:1.6;color:var(--sur-noir-2)}
.parc-choisir-gestes{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin-top:26px}
.parc-choisir-tel{font-size:15px;color:var(--sur-noir-2)}
.parc-choisir-tel a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s}
.parc-choisir-tel a:hover,.parc-choisir-tel a:focus-visible{border-color:#fff}


/* =========================================================================================
   5 · 1280 : on resserre un peu
   ========================================================================================= */
@media (max-width:1360px){
  .parc-plaque{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto}
  .parc-plaque-gestes{width:210px}
  .parc-table tbody th,.parc-table tbody td{padding-inline:14px}
  .parc-ligne-img{width:92px;height:56px}
  .parc-ligne-machine{gap:14px}
  .parc-table .parc-col-actions{width:172px}
}

/* ---------- 1024 à 1279 : les noms des vignettes (« Mini-pelle 2,7 t », « Mini-chargeurs », « Télescopiques », « Camion benne »)
   étaient coupés par des points de suspension à 1024 (contrôle de livraison du 10/10, point 10). La taille du texte ne change
   pas : la marge intérieure de chaque vignette se resserre juste ce qu'il faut pour le plus long nom, en gras (« Mini-chargeurs »,
   102 px) : 7,4 px à 1024, puis elle rejoint d'elle-même la marge d'origine (1,2vw) vers 1130 px ; au-delà, rien ne change ---------- */
@media (min-width:1024px) and (max-width:1279px){
  .parc-vign{padding-inline:clamp(7px,5.8vw - 52px,1.2vw)}
}

/* ---------- 1024 à 1279 : le tableau comparatif se resserre encore : à 1024, les pastilles « À confirmer » débordaient de 24 px
   sur la colonne voisine (dix chevauchements) et les en-têtes « Largeur » et « Hauteur » de 8 px (contrôle de livraison du
   10/10, point 3 ; les valeurs testées par le directeur artistique). Les colonnes de cotes y gagnent la place ---------- */
@media (min-width:1024px) and (max-width:1279px){
  .parc-table .parc-col-machine{width:24%}
  .parc-table .parc-col-usage{width:20%}
  .parc-table .parc-col-actions{width:150px}
  .parc-table thead th,.parc-table tbody th,.parc-table tbody td{padding-inline:10px}
  .parc-ligne-img{width:64px;height:44px;padding:4px}
  .parc-ligne-machine{gap:10px}
  .parc-ligne-devis{margin-left:6px;padding:0 10px}
}

@media (prefers-reduced-motion:reduce){
  .parc-table tr.arrive{animation:none}
}


/* =========================================================================================
   6 · TABLETTE ET TÉLÉPHONE — sous 1024 px seulement (l'ordinateur n'en voit rien)
   ≤ 1023 : la salle se range en hauteur (la machine, ses cotes sur le sol, les flèches de part et
   d'autre), les filtres et les vignettes deviennent des rangées qui se balaient au doigt, le
   tableau devient des fiches. Le balayage gauche / droite sur la scène : parc.js § 2.
   ≤ 767 : une colonne, la salle en pleine largeur.
   ========================================================================================= */
@media (max-width:1023px){
  /* le fil d'Ariane au doigt, le titre */
  .parc-ariane ol{font-size:14px}
  .parc-ariane a,.parc-ariane [aria-current]{display:inline-flex;align-items:center;min-height:44px;padding-block:0;background-position:0 calc(50% + .72em)}
  .parc-titre{flex-direction:column;align-items:flex-start;gap:16px}
  .parc-titre h1{font-size:var(--t-h1)}
  .parc-titre p{padding-bottom:0}

  /* les filtres : des onglets qui défilent à l'horizontale (un fondu à droite dit qu'il y en a d'autres) */
  .parc-filtres{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
    padding-right:44px}
  .parc-filtres::-webkit-scrollbar{display:none}
  .parc-filtre{flex:none;min-height:64px;justify-content:center;padding:12px 20px;scroll-snap-align:start}
  .parc-filtre-sous{font-size:14px}

  /* la scène : la machine en haut, les cotes en rangée sur le sol ; un balayage change de machine */
  .parc-scene{--zone:clamp(170px,26vw + 70px,300px);height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;gap:0 16px;padding:calc(var(--zone) + 62px) 24px 22px;touch-action:pan-y pinch-zoom}
  .parc-sol{top:calc(var(--zone) + 42px);height:auto}
  .parc-engins{top:44px;bottom:auto;width:min(66%,560px);height:var(--zone)}
  .parc-fili{top:calc(44px + var(--zone) / 2)}
  .parc-mesure,.parc-mesure-1,.parc-mesure-2,.parc-mesure-3{position:relative;left:auto;right:auto;top:auto;min-width:0;gap:8px;
    align-items:flex-start;text-align:left}
  .parc-mesure::before{content:"";width:22px;height:2px;background:var(--rouge)}
  .parc-mesure-1 dt::after,.parc-mesure-2 dt::before,.parc-mesure-3 dt::before{display:none}
  .parc-mesure dt{white-space:normal;letter-spacing:.12em;line-height:1.3}
  .parc-mesure dd{flex-wrap:wrap;white-space:normal;font-size:clamp(24px,2vw + 17px,34px)}
  .parc-mesure dd.manque{font-size:15px;padding-top:2px}
  /* l'unité (« t », « m ») : 14 px au moins ; la pastille « À confirmer » reste collée à la valeur (le dessin de pages.css § 23) */
  .parc-mesure .u{font-size:14px}
  .parc-mesure dd[data-avalider]{flex-wrap:nowrap;white-space:nowrap}
  .parc-note{position:relative;left:auto;bottom:auto;transform:none;grid-column:1/-1;margin-top:14px;font-size:14px}
  /* le compteur en haut, les flèches de part et d'autre de la machine */
  .parc-nav{position:absolute;inset:0;transform:none;display:block;pointer-events:none}
  .parc-compteur{position:absolute;top:16px;left:50%;transform:translateX(-50%);margin:0;pointer-events:none}
  .parc-fleche{position:absolute;top:calc(44px + var(--zone) / 2 - 23px);pointer-events:auto;background:rgba(255,255,255,.92)}
  .parc-fleche-prec{left:16px}
  .parc-fleche-suiv{right:16px}

  /* la plaque : le nom et l'équipement côte à côte, les gestes dessous */
  .parc-plaque{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 32px;min-height:0;padding:22px 24px}
  .parc-plaque-nom{white-space:normal}
  .parc-plaque-gestes{grid-column:1/-1;flex-direction:row;width:auto}
  .parc-plaque-gestes .btn{width:auto;flex:1 1 0}

  /* les vignettes : une rangée qui se balaie au doigt */
  .parc-rangee{position:relative;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .parc-rangee::-webkit-scrollbar{display:none}
  .parc-vign{flex:0 0 152px;scroll-snap-align:start;padding:14px 12px 13px}
  .parc-vign:last-child{margin-right:40px}
  .parc-vign img{height:48px}

  /* la liste : des fiches, deux par rangée (chaque case reprend le titre de sa colonne, app.js § 11) */
  .parc-comp .sec-tete{flex-direction:column;align-items:flex-start;gap:20px}
  .parc-comp .sec-note{max-width:none}
  .parc-table-cadre{background:none;border:0;border-radius:0;overflow:visible}
  .parc-table,.parc-table tbody{display:block}
  .parc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .parc-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .parc-table tbody tr,.parc-table tbody tr:first-child{display:flex;flex-wrap:wrap;align-content:flex-start;gap:16px 14px;padding:16px 18px 6px;
    background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r)}
  .parc-table tbody tr:hover,.parc-table tbody tr:focus-within{background:var(--blanc)}
  .parc-table tr[hidden]{display:none}
  .parc-table tbody th,.parc-table tbody td{display:block;padding:0}
  .parc-table tbody th{flex:1 0 100%}
  .parc-table tbody td{flex:1 1 0;min-width:0}
  .parc-table tbody td.parc-usage,.parc-table tbody td.parc-actions{flex:1 0 100%}
  .parc-table tbody td[data-label]:not(.parc-usage):not(.parc-actions)::before{content:attr(data-label);display:block;margin-bottom:7px;
    font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .parc-num small{font-size:14px}
  .parc-manque{white-space:normal}
  .parc-table tbody td.parc-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px;
    border-top:1px solid var(--bord);text-align:left!important}
  .parc-voir{min-height:48px;padding:0}
  .parc-ligne-devis{height:44px;margin-left:0}

  /* le conseil */
  .parc-choisir-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .parc-choisir-tel 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}
}

@media (max-width:767px){
  .parc-tete{padding-block:10px 24px}
  .parc-titre{margin-top:6px;gap:12px}
  .parc-titre p{font-size:16px}

  /* la salle, en pleine largeur */
  .parc-zone{padding-bottom:3.5rem}
  .parc-zone > .wrap{padding-inline:0}
  .parc-salle{border-inline:0;border-radius:0}
  .parc-filtre{padding:10px 16px;min-height:60px}
  .parc-filtre-nom{font-size:16.5px}
  .parc-scene{--zone:clamp(150px,40vw,200px);gap:0 12px;padding:calc(var(--zone) + 58px) 20px 20px}
  .parc-engins{width:64%}
  .parc-fleche{width:44px;height:44px;top:calc(44px + var(--zone) / 2 - 22px)}
  .parc-fleche-prec{left:10px}
  .parc-fleche-suiv{right:10px}
  .parc-mesure dt{font-size:11px;letter-spacing:.1em}
  .parc-mesure dd{font-size:24px}
  .parc-mesure dd.manque{font-size:14px}
  /* la pastille à 7 px de la valeur (le dessin de pages.css § 23) */
  .parc-mesure dd[data-avalider]::after{margin-left:0}
  /* une cote double (« 1,60 · 1,80 m ») : deux lignes au plus, l'unité collée au dernier chiffre (en rangée souple,
     l'unité passait seule sur une troisième ligne) ; une cote simple ne change pas */
  .parc-mesure dd:not(.manque){display:block}
  .parc-mesure dd:not(.manque) .u{margin-left:7px}
  .parc-mesure dd[data-avalider]:not(.manque)::after{margin-left:7px}
  .parc-plaque{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px}
  .parc-plaque-nom{font-size:26px}
  .parc-plaque-equip{padding:16px 0 0;border-left:0;border-top:1px solid var(--bord)}
  .parc-plaque-gestes{flex-direction:column}
  .parc-plaque-gestes .btn{width:100%;flex:none}
  .parc-vign{flex-basis:148px}

  /* la liste : une fiche par rangée */
  .parc-comp-barre{margin-bottom:10px}
  .parc-comp-tout{height:44px}
  .parc-table tbody{grid-template-columns:minmax(0,1fr);gap:12px}
  .parc-table tbody tr,.parc-table tbody tr:first-child{padding:14px 16px 4px;gap:14px 12px}
  .parc-ligne-img{width:88px;height:54px}

  /* le conseil */
  .parc-choisir-carte{padding:24px 20px}
  .parc-choisir-gestes{flex-direction:column;align-items:stretch;gap:8px}
  .parc-choisir-gestes .btn{width:100%;padding-inline:16px;font-size:15px}
  .parc-choisir-tel{text-align:center}
}