/* =========================================================================================
   PAGES INTÉRIEURES · le socle commun, dans le système de l'accueil 07
   Se charge APRÈS style.css, qui garde tout le reste : couleurs, échelle typo, boutons,
   surtitres (.sur), en-têtes de section (.sec, .sec-tete, .sec-intro), cartes machines
   (.cartes, .carte), cartes services (.services, .service), articles (.articles, .article),
   bandeau devis, en-tête, menus, pied de page.
   Ici, seulement les composants des pages intérieures. Tous commencent par « pg- ».
   Mode d'emploi, extraits HTML et règles : _GABARITS.md.
   Rien n'est lié au défilement : les entrées se font au chargement (data-entree) ou au
   premier passage à l'écran (.apparait, le fondu simple d'app.js).
   ========================================================================================= */

:root{
  --t-h1-page:clamp(44px,2.2vw + 16px,60px);   /* le titre d'une page intérieure */
  --t-lead:clamp(20px,.5vw + 14px,23px);        /* le texte d'ouverture d'un bloc (pg-intro) */
  --t-article:17.5px;                           /* le corps d'un article ou d'une page de texte */
  --av-fond:rgba(242,194,48,.13);
  --av-bord:rgba(160,118,0,.42);
  --av-encre:#6B4E00;                           /* 7,4:1 sur le fond jaune pâle */
  /* la « boîte blanche posée » (salle, gammes, jauge, emplacement sans photo) : une seule ombre */
  --ombre-boite:0 1px 0 var(--bord),0 26px 56px -26px rgba(11,11,11,.26);
}

/* la rubrique de la page : son onglet garde le trait rouge (body data-rubrique="…") */
body[data-rubrique="parc"] .nav-el[data-menu="parc"] > .nav-lien::after,
body[data-rubrique="services"] .nav-el[data-menu="services"] > .nav-lien::after,
body[data-rubrique="entreprise"] .nav-el[data-menu="entreprise"] > .nav-lien::after,
body[data-rubrique="conseils"] .nav-el[data-menu="conseils"] > .nav-lien::after,
body[data-rubrique="contact"] .nav-lien[href="/nous-contacter/"]::after{transform:scaleX(1)}
/* dans les menus, l'entrée de la page où l'on est (aria-current, posé par la synchro) */
.menu-lien[aria-current="page"] > span,
.menu-lien[aria-current="page"] .menu-lien-txt > span:first-child{color:var(--rouge)}

/* les fonds de section, en plus de .sec */
.sec--creme{background:var(--creme)}
.sec--blanc{background:var(--blanc)}
.sec--noir{background:var(--charbon);color:#fff}
.sec--noir .sec-intro,.sec--noir .pg-texte{color:var(--sur-noir-2)}
.sec--noir :focus-visible{outline-color:#fff}
.sec--serre{padding-block:clamp(4rem,5vw,5.5rem)}

/* un paragraphe de texte courant, dans une section */
.pg-texte{max-width:64ch;font-size:var(--t-texte);line-height:1.7;color:var(--muted)}
.pg-texte + .pg-texte{margin-top:14px}
.pg-texte b,.pg-texte strong{color:var(--encre);font-weight:600}
.sec--noir .pg-texte b{color:#fff}


/* =========================================================================================
   1 · L'EN-TÊTE DE PAGE — fil d'Ariane, titre, chapeau, gestes
   .pg-tete (fond clair) · .pg-tete--photo (sur une photo, pour les services)
   ========================================================================================= */
.pg-tete{padding-block:22px clamp(36px,3.6vw,52px)}
.pg-ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;list-style:none;margin:0;padding:0;
  font:500 var(--t-meta)/1 var(--f-corps);color:var(--muted)}
.pg-ariane li{display:flex;align-items:center;gap:10px}
.pg-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)}
.pg-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}
.pg-ariane a:hover,.pg-ariane a:focus-visible{color:var(--rouge);background-size:100% 1.5px}
.pg-ariane [aria-current]{color:var(--muted)}

.pg-tete h1{margin-top:22px;max-width:30ch;font-weight:800;font-size:var(--t-h1-page);line-height:1.03;letter-spacing:-.022em}
.pg-tete-pied{display:flex;align-items:flex-end;justify-content:space-between;gap:24px clamp(40px,5vw,96px);margin-top:22px}
.pg-chapo{max-width:62ch;font-size:var(--t-intro);line-height:1.6;color:var(--muted)}
.pg-gestes{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;flex:none}
.pg-appel{font-size:15px;color:var(--muted)}
.pg-appel a{color:var(--encre);font-weight:600;border-bottom:1px solid var(--bord-fort);transition:border-color .25s,color .2s}
.pg-appel a:hover,.pg-appel a:focus-visible{color:var(--rouge);border-color:var(--rouge)}
/* sur fond noir (ex. « Est-ce que ça passe ? » des mini-pelles) : les gestes sous le texte */
.sec--noir .pg-gestes{margin-top:32px}
.sec--noir .pg-appel{color:var(--sur-noir-2)}
.sec--noir .pg-appel a{color:#fff;border-color:rgba(255,255,255,.4)}
.sec--noir .pg-appel a:hover,.sec--noir .pg-appel a:focus-visible{color:#fff;border-color:#fff}

/* --- sur une photo : le haut de page des services --- */
.pg-tete--photo{position:relative;isolation:isolate;display:flex;min-height:clamp(480px,calc(100svh - 300px),620px);
  padding-block:22px clamp(76px,6vw,92px);background:var(--noir);color:#fff;overflow:hidden}
.pg-tete--photo > .wrap{position:relative;display:flex;flex-direction:column;width:100%}
.pg-tete-img{position:absolute;inset:0;z-index:-2;margin:0}
.pg-tete-img img{width:100%;height:100%;object-fit:cover}
.pg-tete-voile{position:absolute;inset:0;z-index:-1}
/* le voile suit la colonne de texte (centrée, --max de large), pas la largeur de l'écran :
   à 1920 le titre commence à 260 px, le voile reste opaque jusque-là, puis s'efface comme à 1280 */
.pg-tete--photo{--voile-x:max(0px,(100vw - var(--max)) / 2)}
.pg-tete-voile{background:
    linear-gradient(90deg,rgba(11,11,11,.84) 0%,rgba(11,11,11,.84) var(--voile-x),rgba(11,11,11,.70) calc(34% + var(--voile-x)),rgba(11,11,11,.26) calc(62% + var(--voile-x)),rgba(11,11,11,.05) calc(82% + var(--voile-x))),
    linear-gradient(0deg,rgba(11,11,11,.62) 0%,rgba(11,11,11,0) 42%),
    linear-gradient(180deg,rgba(11,11,11,.45) 0%,rgba(11,11,11,0) 18%)}
.pg-tete--photo .pg-ariane ol{color:rgba(255,255,255,.74)}
.pg-tete--photo .pg-ariane a{color:#fff;background-image:linear-gradient(#fff,#fff)}
.pg-tete--photo .pg-ariane a:hover,.pg-tete--photo .pg-ariane a:focus-visible{color:#fff}
.pg-tete--photo .pg-ariane li + li::before{border-color:rgba(255,255,255,.5)}
.pg-tete--photo .pg-ariane [aria-current]{color:rgba(255,255,255,.74)}
.pg-tete--photo .pg-tete-corps{margin-top:auto;padding-top:48px}
.pg-tete--photo h1{margin-top:0;max-width:20ch;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.pg-tete--photo .pg-tete-pied{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:28px}
.pg-tete--photo .pg-chapo{max-width:56ch;font-size:clamp(17px,.35vw + 13px,19px);color:rgba(255,255,255,.9)}
.pg-tete--photo .pg-appel{color:rgba(255,255,255,.78)}
.pg-tete--photo .pg-appel a{color:#fff;border-color:rgba(255,255,255,.4)}
.pg-tete--photo .pg-appel a:hover,.pg-tete--photo .pg-appel a:focus-visible{color:#fff;border-color:#fff}
.pg-tete--photo :focus-visible{outline-color:#fff}
/* la photo s'installe au chargement, comme sur l'accueil */
.js .pg-tete-img img{transform:scale(1.04)}
.js.pret .pg-tete-img img{transform:none;transition:transform 2.4s var(--ease)}

/* --- les faits clés, posés à cheval sous un haut de page photo (le dessin des 3 arguments de l'accueil) --- */
.pg-faits{position:relative;z-index:2;margin-top:-44px;background:linear-gradient(transparent 44px,var(--fond) 44px)}


/* =========================================================================================
   2 · L'INTRO — un titre à gauche, le texte d'ouverture à droite
   ========================================================================================= */
.pg-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(48px,6vw,96px);align-items:start}
.pg-intro h2{max-width:16ch}
.pg-lead{font:500 var(--t-lead)/1.5 var(--f-titre);letter-spacing:-.004em;color:var(--encre)}
.pg-lead + .pg-lead{margin-top:16px}
.pg-intro-plus{margin-top:26px}
/* un repère « à confirmer » posé directement sous le titre de l'intro */
.pg-intro h2 + .pg-manque{margin-top:28px}
.sec--noir .pg-lead{color:#fff}
/* la citation tirée d'un reel, sous le texte d'ouverture */
.pg-cit{margin:30px 0 0;padding:20px 0 0 22px;border-left:3px solid var(--rouge)}
.pg-cit p{font:500 var(--t-court)/1.5 var(--f-titre);color:var(--encre)}
.pg-cit cite{display:block;margin-top:10px;font:500 var(--t-meta)/1.3 var(--f-corps);font-style:normal;color:var(--muted)}
.sec--noir .pg-cit p{color:#fff}
.sec--noir .pg-cit cite{color:var(--sur-noir-3)}


/* =========================================================================================
   3 · LA SALLE — une machine détourée, ses cotes autour (le dessin de le-parc.html)
   Statique : une seule machine. Elle entre au chargement, rien ne suit le défilement.
   Le nom en filigrane est ajusté à la largeur par app.js (§ 9).
   ========================================================================================= */
.pg-salle-zone{padding-bottom:clamp(3rem,3.6vw,4.25rem)}
.pg-salle{position:relative;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre-boite)}
.pg-scene{position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;
  height:clamp(400px,33vw,600px);--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%)}
.pg-fili{position:absolute;z-index:-1;left:50%;top:41%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;
  font:900 10cqw/.82 var(--f-titre);letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;color:rgba(26,26,26,.058)}
.pg-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 : --s règle sa taille dans le cadre, --dx la décale si sa silhouette déborde d'un côté */
.pg-engin{position:absolute;left:50%;bottom:calc(var(--sol) - 1.2%);transform:translateX(-50%);
  width:min(56%,920px);height:75%;margin:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.pg-engin img{position:relative;z-index:2;left:var(--dx,0%);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%}
.pg-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 */
.pg-cote{position:absolute;z-index:3;margin:0;display:flex;flex-direction:column;gap:12px;min-width:150px}
.pg-cote-1{left:clamp(28px,2.8vw,48px);top:33%}
.pg-cote-2{right:clamp(28px,2.8vw,48px);top:12%;align-items:flex-end;text-align:right}
.pg-cote-3{right:clamp(28px,2.8vw,48px);top:48%;align-items:flex-end;text-align:right}
.pg-cote dt{display:flex;align-items:center;gap:12px;font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pg-cote-1 dt::after,.pg-cote-2 dt::before,.pg-cote-3 dt::before{content:"";flex:none;width:36px;height:2px;background:var(--rouge)}
.pg-cote 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}
.pg-cote .u{font-size:.4em;font-weight:600;letter-spacing:0;color:var(--muted)}
/* une cote qui manque : « À confirmer », discret */
.pg-cote dd.manque{font:500 15.5px/1.3 var(--f-corps);letter-spacing:0;color:var(--muted);align-items:center;padding-top:4px}
.pg-scene-note{position:absolute;z-index:3;left:clamp(28px,2.8vw,48px);bottom:calc(var(--sol) / 2);transform:translateY(50%);
  font:500 var(--t-meta)/1.3 var(--f-corps);color:var(--muted)}

/* la plaque, sous la scène : trois cases */
.pg-plaque{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.9fr);border-top:1px solid var(--bord)}
.pg-plaque > div{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:24px clamp(24px,2.4vw,36px)}
.pg-plaque > div + div{border-left:1px solid var(--bord)}
.pg-plaque-lab{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pg-plaque-t{font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.pg-plaque-t a{transition:color .2s}
.pg-plaque-t a:hover,.pg-plaque-t a:focus-visible{color:var(--rouge)}
.pg-plaque .lien-fleche{align-self:flex-start;font-size:var(--t-petit)}
/* « Tout le parc » (Andrea, 17/10/2026 : « Voir tout le parc » pas assez mis en avant) : le bloc qui mène au parc, en noir,
   avec le bouton du bandeau (style.css, « Voir tout le parc en bandeau ») ; le bouton s'étend sur tout le bloc. Quatre blocs
   sur les fiches qui n'avaient pas celui-là (SalleMachine.astro) */
.pg-plaque > .pg-plaque-parc{position:relative;background:var(--encre)}
.pg-plaque-parc .pg-plaque-lab{color:var(--rouge-sur-noir)}
.pg-plaque-parc .pg-plaque-t{color:#fff}
.pg-plaque > .pg-plaque-parc > .tout-parc-btn{align-self:flex-start;margin-top:4px}
.pg-plaque-parc .tout-parc-btn::after{content:"";position:absolute;inset:0}
.pg-plaque-parc ::selection{background:rgba(255,64,81,.35);color:#fff}
.pg-plaque.pg-plaque--4{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1fr)}
.pg-plaque--4 .pg-plaque-lab{line-height:1.35}   /* à quatre colonnes, « Si elle est trop grosse » passe sur deux lignes */
@media (max-width:1023px){
  .pg-plaque.pg-plaque--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-plaque--4 > div:nth-child(3){border-left:0}
  .pg-plaque--4 > div:nth-child(n+3){border-top:1px solid var(--bord)}
}
@media (max-width:767px){
  .pg-plaque.pg-plaque--4{grid-template-columns:minmax(0,1fr)}
}
/* la liste à puces penchées (le parallélogramme du lettrage) — sert aussi hors de la plaque */
.pg-puces li{display:flex;align-items:baseline;gap:12px;padding:4px 0;font:500 var(--t-petit)/1.45 var(--f-corps);color:var(--encre)}
.pg-puces li::before{content:"";flex:none;width:11px;height:7px;background:var(--rouge);transform:skewX(-22deg) translateY(-1px)}

/* l'entrée, au chargement : la machine glisse, les cotes arrivent l'une après l'autre */
.js .pg-engin img,.js .pg-ombre{opacity:0;transform:translateX(70px)}
.js .pg-ombre{transform:translateX(calc(-50% + 70px))}
.js.pret .pg-engin img{opacity:1;transform:none;transition:opacity 1s var(--ease) .38s,transform 1.3s var(--ease) .38s}
.js.pret .pg-ombre{opacity:1;transform:translateX(-50%);transition:opacity 1s var(--ease) .38s,transform 1.3s var(--ease) .38s}
.js .pg-cote,.js .pg-fili{opacity:0}
.js .pg-cote{transform:translateY(14px)}
.js.pret .pg-cote{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js.pret .pg-cote-1{transition-delay:.72s}
.js.pret .pg-cote-2{transition-delay:.84s}
.js.pret .pg-cote-3{transition-delay:.96s}
.js.pret .pg-fili.ajuste{opacity:1;transition:opacity 1.2s var(--ease) .2s}


/* =========================================================================================
   4 · LA FICHE — le tableau de caractéristiques (une liste dt/dd, sur une ou deux colonnes)
   ========================================================================================= */
.pg-fiche{margin:0;border-top:1px solid var(--bord-fort)}
.pg-fiche > div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:6px 20px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--bord);break-inside:avoid}
.pg-fiche dt{font-size:var(--t-meta);line-height:1.4;color:var(--muted)}
.pg-fiche dd{margin:0;font:700 15.5px/1.4 var(--f-titre);letter-spacing:.003em;color:var(--encre);font-variant-numeric:tabular-nums}
.pg-fiche dd a{border-bottom:1px solid var(--bord-fort);transition:border-color .2s,color .2s}
.pg-fiche dd a:hover,.pg-fiche dd a:focus-visible{color:var(--rouge);border-color:var(--rouge)}
/* sur deux colonnes : la lecture va de gauche à droite, rangée par rangée */
.pg-fiche--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,4vw,64px)}
.pg-fiche--2col > div:last-child,.pg-fiche--2col > div:nth-last-child(2):nth-child(odd){border-bottom:0}
.pg-fiche-cadre{padding:6px 28px 14px;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r)}
.pg-fiche-cadre .pg-fiche{border-top:0}
.pg-fiche-cadre .pg-fiche > div:last-child{border-bottom:0}
/* une valeur absente : « À confirmer » en clair, la question au survol */
.pg-fiche dd.a-voir,.a-voir{font:500 var(--t-meta)/1.4 var(--f-corps);color:var(--muted)}


/* =========================================================================================
   5 · LES ÉQUIPEMENTS — ce qui est fourni avec la machine (ou le service)
   ========================================================================================= */
.pg-equip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);counter-reset:equip}
.pg-equip-el{position:relative;padding:30px clamp(22px,2.2vw,32px) 30px;counter-increment:equip}
.pg-equip-el + .pg-equip-el{border-left:1px solid var(--bord)}
.pg-equip--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-equip-el::before{content:counter(equip,decimal-leading-zero);display:block;margin-bottom:16px;
  font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--rouge);font-variant-numeric:tabular-nums}
.pg-equip-el::after{content:"";position:absolute;top:-1px;left:clamp(22px,2.2vw,32px);width:28px;height:3px;background:var(--rouge)}
.pg-equip-t{font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.pg-equip-p{margin-top:8px;font-size:var(--t-petit);line-height:1.55;color:var(--muted)}


/* =========================================================================================
   6 · LES GRILLES DE CARTES
   · les cartes machines de l'accueil (.cartes > li > .carte) : ajouter .cartes--3 ou .cartes--2
   · les cartes services de l'accueil (.services > li > .service) : ajouter .services--2
   · une carte simple (.pg-cartes > li > .pg-carte) : photo, titre, texte, lien
   ========================================================================================= */
.cartes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cartes--3 > li:nth-child(n+4){margin-top:var(--gout)}
.cartes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cartes--2 > li:nth-child(n+3){margin-top:var(--gout)}
.services--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.services--2 > li:nth-child(n+3){margin-top:var(--gout)}
.services--2 .service-img{aspect-ratio:16/9}
.services--2 .service-tete{padding:28px 30px 0}
.services--2 .service-lien{margin-inline:30px}
.services--2 .service-p{max-width:52ch}
/* le petit surtitre au-dessus du titre d'une carte service */
.service-sur{display:block;margin-bottom:10px;font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge-sur-noir)}

.pg-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);margin:0;padding:0;list-style:none}
.pg-cartes > li{display:flex}
.pg-cartes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-cartes--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-cartes--4 .pg-carte-t{font-size:var(--t-court)}
.pg-cartes--4 .pg-carte-corps{padding:20px 20px 22px}
.pg-carte{display:flex;flex-direction:column;width:100%;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}
a.pg-carte:hover,a.pg-carte:focus-visible,.pg-carte:has(a:hover),.pg-carte:has(a:focus-visible){box-shadow:var(--ombre-survol);transform:translateY(-3px);border-color:var(--bord-fort)}
.pg-carte-img{position:relative;display:block;aspect-ratio:3/2;margin:0;overflow:hidden;background:var(--creme)}
.pg-carte-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pg-carte:hover .pg-carte-img img,a.pg-carte:focus-visible .pg-carte-img img,.pg-carte:has(a:focus-visible) .pg-carte-img img{transform:scale(1.04)}
.pg-carte-num{position:absolute;left:16px;top:14px;padding:6px 9px;border-radius:3px;background:rgba(11,11,11,.78);color:#fff;
  font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pg-carte-corps{flex:1;display:flex;flex-direction:column;padding:22px 24px 24px}
.pg-carte-sur{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge);margin-bottom:10px}
.pg-carte-t{font:800 var(--t-carte)/1.22 var(--f-titre);letter-spacing:-.01em}
.pg-carte-p{margin-top:10px;font-size:var(--t-texte);line-height:1.6;color:var(--muted)}
.pg-carte-corps > .lien-fleche{margin-top:auto;padding-top:18px;align-self:flex-start;background-position:0 100%}
.pg-carte-corps > .pg-carte-p + .lien-fleche{margin-top:auto}


/* =========================================================================================
   7 · LA FAQ — un accordéon natif (<details>), qui s'ouvre au clic ou au clavier
   ========================================================================================= */
.pg-faq{interpolate-size:allow-keywords;border-top:1px solid var(--bord-fort)}
.pg-q{border-bottom:1px solid var(--bord)}
.pg-q summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4px 22px 0;cursor:pointer;list-style:none;
  font:800 var(--t-court)/1.3 var(--f-titre);letter-spacing:-.005em;color:var(--encre);transition:color .2s}
.pg-q summary::-webkit-details-marker{display:none}
.pg-q summary:hover,.pg-q summary:focus-visible{color:var(--rouge)}
.pg-q summary:focus-visible{outline-offset:6px}
/* ouverte, la réponse suit la question de près : le cadre se resserre pour ne pas la toucher */
.pg-q[open] > summary:focus-visible{outline-offset:2px}
/* le « + » qui devient « − » */
.pg-q-signe{position:relative;flex:none;width:34px;height:34px;border:1px solid var(--bord-fort);border-radius:50%;transition:background-color .25s,border-color .25s}
.pg-q-signe::before,.pg-q-signe::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;background:var(--encre);
  transform:translate(-50%,-50%);transition:transform .35s var(--ease),background-color .25s}
.pg-q-signe::after{transform:translate(-50%,-50%) rotate(90deg)}
.pg-q[open] .pg-q-signe::after{transform:translate(-50%,-50%) rotate(0deg)}
.pg-q summary:hover .pg-q-signe,.pg-q summary:focus-visible .pg-q-signe{background:var(--rouge);border-color:var(--rouge)}
.pg-q summary:hover .pg-q-signe::before,.pg-q summary:hover .pg-q-signe::after,.pg-q summary:focus-visible .pg-q-signe::before,.pg-q summary:focus-visible .pg-q-signe::after{background:#fff}
.pg-q-r{padding:0 64px 26px 0}
.pg-q-r p{max-width:62ch;font-size:var(--t-texte);line-height:1.7;color:var(--muted)}
.pg-q-r p + p{margin-top:12px}
.pg-q-r .lien-fleche{margin-top:14px}
/* l'ouverture en douceur, là où le navigateur sait le faire (sinon : ouverture nette) */
.pg-q::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.pg-q[open]::details-content{block-size:auto}


/* =========================================================================================
   8 · TEXTE + IMAGE — la photo d'un côté, le texte de l'autre (.pg-duo--inverse : la photo à droite)
   ========================================================================================= */
.pg-duo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px clamp(48px,6vw,96px);align-items:center}
.pg-duo--inverse{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.pg-duo--inverse .pg-duo-img{order:2}
.pg-duo-img{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--creme)}
.pg-duo-img img{width:100%;height:100%;object-fit:cover}
.pg-duo--portrait .pg-duo-img{aspect-ratio:4/5}
.pg-duo--portrait{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pg-duo--portrait.pg-duo--inverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* le voile monte plus dense jusqu'au texte (contrôle de livraison du 10/10, point 14 : sur le panneau clair des pièces
   Caterpillar, la légende de 12 à 14 px tombait à 3,4:1) ; il s'efface toujours vers le haut, au-dessus des lettres */
.pg-duo-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 24px 18px;color:#fff;font:400 14px/1.45 var(--f-corps);
  background:linear-gradient(0deg,rgba(11,11,11,.86) 0%,rgba(11,11,11,.8) 58%,rgba(11,11,11,0) 100%)}
.pg-duo-img figcaption b{display:block;margin-bottom:6px;font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase}
.pg-duo-txt h2{max-width:18ch}
.pg-duo-txt > .pg-texte{margin-top:18px}
.pg-duo-txt > .pg-lead{margin-top:20px}
.pg-duo-txt > .btn,.pg-duo-txt > .lien-fleche,.pg-duo-txt > .pg-gestes{margin-top:30px}


/* =========================================================================================
   9 · LA GALERIE — des photos posées en grille, légende dessous (rien ne défile tout seul)
   ========================================================================================= */
.pg-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);margin:0;padding:0;list-style:none}
.pg-galerie figure{margin:0}
.pg-galerie--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-galerie--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-galerie-img{display:block;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--creme)}
.pg-galerie-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pg-galerie figcaption{margin-top:12px;font-size:var(--t-meta);line-height:1.45;color:var(--muted)}
/* la mosaïque : la première photo prend deux rangées */
.pg-galerie--mosaique{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-auto-rows:auto}
.pg-galerie--mosaique > :first-child{grid-row:span 2;display:flex;flex-direction:column}
.pg-galerie--mosaique > :first-child .pg-galerie-img{flex:1;aspect-ratio:auto;min-height:100%}
.pg-galerie--mosaique > :first-child figure{display:flex;flex-direction:column;height:100%}
/* la vidéo pas encore intégrée : un emplacement, l'image en attendant */
.pg-video{position:relative;display:block;margin:0;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--noir);color:#fff}
.pg-video img{width:100%;height:100%;object-fit:cover;opacity:.72}
.pg-video-voile{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,11,.7),rgba(11,11,11,.08) 55%)}
.pg-video-jouer{position:absolute;left:clamp(22px,2.4vw,36px);bottom:clamp(20px,2.2vw,32px);display:flex;align-items:center;gap:16px;
  font:700 var(--t-court)/1.2 var(--f-titre)}
.pg-video-jouer::before{content:"";flex:none;width:64px;height:64px;border-radius:50%;background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 54% 50%/26px}


/* =========================================================================================
   10 · L'ENCADRÉ — une note mise à part (« Le détail qui compte », « À retenir »)
   ========================================================================================= */
.pg-encadre{padding:26px 28px 28px;background:var(--creme);border-radius:var(--r)}
.sec--creme .pg-encadre{background:var(--blanc);border:1px solid var(--bord)}
.pg-encadre-t{display:flex;align-items:center;gap:12px;font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.pg-encadre-t::before{content:"";flex:none;width:14px;height:10px;background:var(--rouge);transform:skewX(-22deg)}
.pg-encadre p:not(.pg-encadre-t){margin-top:10px;font-size:var(--t-texte);line-height:1.65;color:var(--muted)}
.pg-encadre .lien-fleche{margin-top:16px}


/* =========================================================================================
   11 · « À CONFIRMER » — ce que seul le client peut dire. Jamais une phrase inventée à la place.
   · une valeur dans une phrase ou un tableau : data-avalider="la question" (pastille jaune,
     style.css) — et « À confirmer » en clair si la valeur manque (.a-voir)
   · un bloc entier qui manque : .pg-manque, la question écrite en clair
   ========================================================================================= */
.pg-manque{display:block;max-width:68ch;padding:16px 20px 17px;background:var(--av-fond);border:1px dashed var(--av-bord);border-radius:var(--r);
  font:400 var(--t-petit)/1.55 var(--f-corps);color:var(--encre);cursor:help}
.pg-manque::before{content:"À confirmer avec le client";display:block;margin-bottom:6px;
  font:700 11px/1.2 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--av-encre)}
.pg-manque[data-avalider]::after{content:none}
.sec--noir .pg-manque{background:rgba(242,194,48,.12);border-color:rgba(242,194,48,.5);color:#fff}
.sec--noir .pg-manque::before{color:#F2C230}


/* =========================================================================================
   12 · L'ARTICLE — le corps d'un article du blog (une colonne de lecture + une colonne de côté)
   ========================================================================================= */
.pg-article-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:clamp(48px,6vw,104px);align-items:start}
.pg-article{max-width:60ch;font-size:var(--t-article);line-height:1.75;color:var(--encre)}
.pg-article > * + *{margin-top:20px}
.pg-article h2{margin-top:52px;font:800 clamp(26px,.8vw + 18px,32px)/1.18 var(--f-titre);letter-spacing:-.014em}
.pg-article h3{margin-top:36px;font:800 var(--t-carte)/1.3 var(--f-titre);letter-spacing:-.008em}
.pg-article h2 + *,.pg-article h3 + *{margin-top:14px}
.pg-article p{color:#2B2B2B}
.pg-article a:not(.btn):not(.lien-fleche){color:var(--encre);text-decoration:underline;text-decoration-color:rgba(209,20,37,.5);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
.pg-article a:not(.btn):not(.lien-fleche):hover,.pg-article a:not(.btn):not(.lien-fleche):focus-visible{color:var(--rouge);text-decoration-color:var(--rouge)}
.pg-article ul,.pg-article ol{margin-block:20px 0;padding:0;list-style:none}
.pg-article ul > li,.pg-article ol > li{position:relative;padding-left:30px}
.pg-article li + li{margin-top:10px}
.pg-article ul > li::before{content:"";position:absolute;left:2px;top:.72em;width:11px;height:7px;background:var(--rouge);transform:skewX(-22deg)}
.pg-article ol{counter-reset:art}
.pg-article ol > li{counter-increment:art}
.pg-article ol > li::before{content:counter(art);position:absolute;left:0;top:0;font:800 var(--t-texte)/1.75 var(--f-titre);color:var(--rouge)}
.pg-article blockquote{margin:32px 0 0;padding:4px 0 4px 24px;border-left:3px solid var(--rouge);font:500 var(--t-court)/1.55 var(--f-titre)}
.pg-article figure{margin:36px 0 0}
.pg-article figure img{width:100%;border-radius:var(--r)}
.pg-article figcaption{margin-top:10px;font-size:var(--t-meta);color:var(--muted)}
.pg-article .pg-encadre{margin-top:32px}
.pg-article-chapo{font:500 var(--t-lead)/1.55 var(--f-titre)!important;color:var(--encre)!important}
/* la colonne de côté : le sommaire de l'article, puis l'appel au devis (rien ne la fait suivre le défilement) */
.pg-cote-col{display:flex;flex-direction:column;gap:24px}
.pg-sommaire{padding:24px 26px;background:var(--creme);border-radius:var(--r)}
.pg-sommaire-t{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pg-sommaire ol,.pg-sommaire ul{list-style:none;margin:0;padding:0}
.pg-sommaire li{border-top:1px solid var(--bord)}
.pg-sommaire li:first-child{border-top:0}
.pg-sommaire a{display:block;padding:10px 0;font:600 var(--t-petit)/1.4 var(--f-corps);transition:color .2s}
.pg-sommaire a:hover,.pg-sommaire a[aria-current],.pg-sommaire a:focus-visible{color:var(--rouge)}
.pg-relance{padding:26px 26px 28px;background:var(--charbon);color:#fff;border-radius:var(--r)}
.pg-relance-t{font:800 var(--t-court)/1.25 var(--f-titre)}
.pg-relance p:not(.pg-relance-t){margin-top:8px;font-size:var(--t-petit);line-height:1.55;color:var(--sur-noir-2)}
.pg-relance .btn{margin-top:18px;width:100%}
.pg-relance :focus-visible{outline-color:#fff}


/* =========================================================================================
   13 · LA PAGE DE TEXTE (légal, plan du site) — le texte à gauche, les pages légales à droite
   ========================================================================================= */
.pg-legal{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(48px,6vw,104px);align-items:start}
.pg-legal-cote .pg-sommaire + .pg-sommaire{margin-top:20px}
.pg-legal-cote .pg-sommaire li{display:block}
.pg-legal-cote .pg-sommaire a{display:flex;align-items:baseline;gap:10px}
.pg-legal-num{font:800 var(--t-label)/1 var(--f-titre);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.pg-legal-cote a[aria-current] .pg-legal-num{color:var(--rouge)}
.pg-legal-texte{max-width:78ch}
/* le texte sur la ligne de grille, le sommaire à droite : la disposition des articles du blog (§ 12).
   Sous 1181 px, une colonne, le sommaire au-dessus (audit des axes du 07/10, L1) */
@media (min-width:1181px){
  .pg-legal{grid-template-columns:minmax(0,1fr) minmax(240px,300px)}
  .pg-legal-cote{order:2}
}
.pg-rub{padding-bottom:44px}
.pg-rub + .pg-rub{padding-top:44px;border-top:1px solid var(--bord)}
.pg-rub-tete{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.pg-rub-num{font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--rouge);font-variant-numeric:tabular-nums}
.pg-rub h2{font:800 clamp(24px,.6vw + 17px,28px)/1.2 var(--f-titre);letter-spacing:-.012em}
.pg-rub > p{max-width:70ch;font-size:var(--t-texte);line-height:1.75;color:#2B2B2B}
.pg-rub > p + p,.pg-rub > * + p{margin-top:14px}
.pg-rub > .pg-fiche,.pg-rub > .pg-manque,.pg-rub > ul{margin-top:18px}
.pg-rub > p + .pg-fiche{margin-top:16px}
.pg-rub a:not(.btn){text-decoration:underline;text-decoration-color:rgba(209,20,37,.5);text-underline-offset:3px}
.pg-rub a:not(.btn):hover,.pg-rub a:not(.btn):focus-visible{color:var(--rouge)}
.pg-rub .pg-fiche dd{font-family:var(--f-corps);font-weight:600;font-variant-numeric:normal}
.pg-rub > .pg-fiche:last-child > div:last-child{border-bottom:0}
.pg-rub .pg-puces{margin-top:16px}
.pg-rub .pg-puces li{font-size:var(--t-texte);font-weight:400;line-height:1.65;color:#2B2B2B}


/* =========================================================================================
   14 · MOUVEMENT RÉDUIT
   ========================================================================================= */
@media (prefers-reduced-motion:reduce){
  .js .pg-engin img,.js .pg-ombre,.js .pg-cote,.js .pg-fili{opacity:1!important;transition:none!important}
  .js .pg-engin img,.js .pg-cote{transform:none!important}
  .js .pg-ombre{transform:translateX(-50%)!important}
  .js .pg-tete-img img{transform:none!important}
  .pg-q::details-content{transition:none}
}


/* =========================================================================================
   15 · 1024 → 1360 : on resserre, sans rien tasser (l'ordinateur d'abord ; le téléphone viendra après)
   ========================================================================================= */
@media (max-width:1360px){
  .pg-plaque{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr)}
  /* le chapeau sur photo reste dans la partie sombre du voile (AA à 1280, mesuré le 06/10) */
  .pg-tete--photo .pg-chapo{max-width:50ch}
}
@media (max-width:1180px){
  .pg-tete--photo .pg-chapo{max-width:46ch}
  .pg-tete-voile{background:
    linear-gradient(90deg,rgba(11,11,11,.86) 0%,rgba(11,11,11,.78) 44%,rgba(11,11,11,.30) 70%,rgba(11,11,11,.05) 88%),
    linear-gradient(0deg,rgba(11,11,11,.62) 0%,rgba(11,11,11,0) 42%),
    linear-gradient(180deg,rgba(11,11,11,.45) 0%,rgba(11,11,11,0) 18%)}
  .pg-tete-pied{flex-direction:column;align-items:flex-start}
  .cartes--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartes--3 > li:nth-child(n+3){margin-top:var(--gout)}
  .pg-equip:not(.pg-equip--3){grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-equip:not(.pg-equip--3) .pg-equip-el:nth-child(odd){border-left:0}
  .pg-equip:not(.pg-equip--3) .pg-equip-el:nth-child(n+3){border-top:1px solid var(--bord)}
  .pg-cartes--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-article-grille,.pg-legal{grid-template-columns:minmax(0,1fr)}
  .pg-cote-col{flex-direction:row;flex-wrap:wrap}
  .pg-cote-col > *{flex:1 1 300px}
  .pg-fiche--2col{grid-template-columns:minmax(0,1fr)}
  .pg-fiche--2col > div:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--bord)}
  .pg-intro{grid-template-columns:minmax(0,1fr)}
  .pg-intro h2{max-width:24ch}
}

/* ---------- 1181 et plus : un chapeau d'une ligne se centre sur les gestes (le bouton du devis) au lieu de tomber au ras de leur
   pied, 50 px sous le titre (polybenne, fourgon, 404 ; 22 px sur les fiches sœurs) : 36 px (contrôle de livraison du 10/10,
   point 28). Un chapeau aussi haut que les gestes, ou plus, ne bouge pas : il fait la hauteur de la rangée ---------- */
@media (min-width:1181px){
  .pg-tete:not(.pg-tete--photo) .pg-tete-pied > .pg-chapo{align-self:center}
}

/* ---------- 1024 à 1180 : sur une colonne, les textes d'ouverture (.pg-lead) et les citations faisaient 106 à 126 signes par
   ligne (chauffeur, mini-pelles, qui sommes-nous, livraison, transport de marchandises) : 62ch, environ 80 signes
   (contrôle de livraison du 10/10, point 12) ---------- */
@media (min-width:1024px) and (max-width:1180px){
  .pg-lead,.pg-cit p{max-width:62ch}
}

/* ---------- 768 à 1180 : la carte de l'article posée au-dessus de la FAQ (mini-pelles, chauffeur) prend la largeur, couchée :
   la photo à gauche (5fr), le titre, le texte et le lien à droite (7fr), centrés sur la hauteur de la photo ; à 440 px, elle
   laissait 300 à 700 px vides à sa
   droite (contrôle de livraison du 10/10, point 11). « .wrap.pg-intro » : la règle des 440 px (§ 16) vient plus loin ---------- */
@media (min-width:768px) and (max-width:1180px){
  .wrap.pg-intro .article{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:32px;max-width:none}
  .wrap.pg-intro .article > .article-img{grid-row:1/-1}
  .wrap.pg-intro .article > .article-t{grid-area:2/2;margin-top:0}
  .wrap.pg-intro .article > .article-p{grid-area:3/2}
  .wrap.pg-intro .article > .article-lien{grid-area:4/2;justify-self:start}
}

/* ---------- 1024 à 1180 : l'article garde sa colonne de côté (288 px), à droite : sur une colonne, le sommaire et la relance
   n'arrivaient qu'après tout le texte (contrôle de livraison du 10/10, point 5) ---------- */
@media (min-width:1024px) and (max-width:1180px){
  .pg-article-grille{grid-template-columns:minmax(0,1fr) 288px;gap:44px}
  .pg-article-grille > .pg-cote-col{flex-direction:column;flex-wrap:nowrap}
  .pg-article-grille > .pg-cote-col > *{flex:0 1 auto}
}

/* ---------- 768 à 1180 : « Si celle-ci ne convient pas » (8 fiches machines) : à deux par rangée, la 3e carte restait seule
   (contrôle de livraison du 10/10, point 4). De 1024 à 1180, les trois cartes sur une rangée, comme au-delà ; de 768 à 1023,
   la 3e prend la largeur des deux autres, couchée : la photo à gauche, l'en-tête, les cotes et les gestes à droite ---------- */
@media (min-width:1024px) and (max-width:1180px){
  .cartes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cartes--3 > li:nth-child(n+3){margin-top:0}
  .cartes--3 > li:nth-child(n+4){margin-top:var(--gout)}
}
@media (min-width:768px) and (max-width:1023px){
  .cartes--3 > li:nth-child(3):last-child{grid-column:1/-1}
  .cartes--3 > li:nth-child(3):last-child > .carte{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cartes--3 > li:nth-child(3):last-child .carte-img{position:relative;grid-column:1;grid-row:1/-1;aspect-ratio:auto}
  .cartes--3 > li:nth-child(3):last-child .carte-img img{position:absolute;inset:0}
  .cartes--3 > li:nth-child(3):last-child .carte > :not(.carte-img){grid-column:2}
  .cartes--3 > li:nth-child(3):last-child .carte-pied{grid-row:3/-1}
}


/* =========================================================================================
   16 · PETITS RACCORDS
   ========================================================================================= */
/* « À confirmer » posé dans le coin d'un bloc (une photo, une vidéo) : une étiquette, pas une pastille */
.av-coin{position:relative}
[data-avalider].av-coin::after{content:"À confirmer";position:absolute;z-index:6;top:14px;right:14px;width:auto;height:auto;margin:0;
  padding:7px 10px 7px 24px;border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.18);
  background:#F2C230 radial-gradient(circle at 12px 50%,#6B4E00 0 3.5px,transparent 4px);
  font:700 11px/1 var(--f-corps);letter-spacing:.08em;text-transform:uppercase;color:#3A2A00}
/* les blocs qui suivent un tableau ou un titre dans une colonne */
.pg-fiche-cadre + .pg-manque,.pg-encadre + .pg-manque{margin-top:20px}
.pg-intro .pg-encadre{margin-top:32px}
.pg-intro .sec-intro{max-width:46ch}
/* une carte qui manque, dans une grille de cartes machines : elle prend toute la hauteur */
.cartes > li > .cartes-manque{grid-row:1/-1;align-self:stretch;max-width:none;display:flex;flex-direction:column;justify-content:center;padding:28px}
/* dans une colonne texte d'un .pg-duo : un sous-titre, un repère à confirmer */
.pg-duo-txt > .pg-manque{margin-top:18px}
.pg-duo-st{margin-top:34px;font:800 var(--t-bloc)/1.2 var(--f-titre);letter-spacing:-.012em}
.pg-duo-txt > .pg-duo-st + .pg-manque{margin-top:14px}
/* la carte d'un article posée sous un titre de section (ex. la FAQ du chauffeur) */
.pg-intro .article{margin-top:36px;max-width:440px}


/* =========================================================================================
   17 · COMPARER — le tableau des machines (largeurs à l'échelle, 0 à 3 m) et la jauge d'accès
   Terrassement, manutention, transport, transport de marchandises. La jauge (pages-b3.js § 1)
   passe la valeur au tableau par --acces : les barres et le trait de l'accès suivent en CSS.
   Rien ne suit le défilement : tout répond au geste (glisser, survoler).
   ========================================================================================= */
.pg-comp-haut{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(48px,6vw,96px);align-items:end;margin-bottom:32px}
.pg-comp-haut .sec-intro{max-width:56ch}
.pg-comp-haut .sec-intro + .lien-fleche{margin-top:18px}

/* la jauge : une carte blanche, la valeur en grand, le curseur dessous */
.pg-jauge{padding:24px 28px 22px;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-boite)}
.pg-jauge-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.pg-jauge-lab{display:block;font:700 var(--t-label)/1.3 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pg-jauge-aide{margin-top:8px;max-width:32ch;font-size:var(--t-meta);line-height:1.45;color:var(--muted)}
.pg-jauge-val{flex:none;display:flex;align-items:baseline;gap:6px;font:800 clamp(36px,1.1vw + 22px,42px)/.9 var(--f-titre);
  letter-spacing:-.03em;color:var(--encre);font-variant-numeric:tabular-nums}
.pg-jauge-val .u{font-size:.42em;font-weight:600;letter-spacing:0;color:var(--muted)}
.pg-curseur{--p:100%;margin-top:18px}
.pg-curseur input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:grab}
.pg-curseur input:active{cursor:grabbing}
.pg-curseur input:focus-visible{outline:2px solid var(--rouge);outline-offset:1px;border-radius:3px}
.pg-curseur input::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--rouge) 0 var(--p),var(--bord-fort) var(--p) 100%)}
.pg-curseur input::-moz-range-track{height:4px;border-radius:2px;background:var(--bord-fort)}
.pg-curseur input::-moz-range-progress{height:4px;border-radius:2px;background:var(--rouge)}
.pg-curseur input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;
  background:var(--blanc);border:3px solid var(--rouge);box-shadow:0 3px 10px rgba(11,11,11,.22);transition:transform .2s var(--ease)}
.pg-curseur input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--blanc);border:3px solid var(--rouge);
  box-shadow:0 3px 10px rgba(11,11,11,.22)}
.pg-curseur input:hover::-webkit-slider-thumb,.pg-curseur input:active::-webkit-slider-thumb,.pg-curseur input:focus-visible::-webkit-slider-thumb{transform:scale(1.1)}
.pg-bornes{display:flex;justify-content:space-between;margin-top:9px;font:500 var(--t-label)/1 var(--f-corps);color:var(--muted);font-variant-numeric:tabular-nums}
.pg-jauge-res{margin-top:16px;padding-top:14px;min-height:4.4em;border-top:1px solid var(--bord);
  font-size:var(--t-petit);line-height:1.55;color:var(--muted)}
.pg-jauge-res b{font-weight:600;color:var(--encre)}
.pg-jauge-res span{display:block;margin-top:2px}
.pg-jauge-note{margin-top:10px;font:500 var(--t-meta)/1.3 var(--f-corps);color:var(--muted)}
/* la lecture graduée (Andrea, 18/10/2026) : trois états, chacun sa couleur, toujours écrite à côté d'un mot (la couleur
   n'est jamais seule à le dire). Le vert et l'orange rejoignent le rouge Locamat, sombres pour se lire en petit : contraste
   AA sur le blanc (5,4:1 et 5,3:1) comme sur leur teinte à 10 % (4,7:1 et 4,6:1). Les seuils : src/lib/acces.ts */
.pg-jauge,.pg-comp[data-jauge]{--passe:#1F7A3E;--serre:#A85500;--trop:var(--rouge)}
.pg-etat--passe{--etat:var(--passe)}
.pg-etat--serre{--etat:var(--serre)}
.pg-etat--trop{--etat:var(--trop)}
.pg-etat::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--etat);vertical-align:1px}
.pg-jauge-legende{display:grid;gap:3px;margin-top:16px;font:400 var(--t-meta)/1.4 var(--f-corps);color:var(--muted)}
/* la légende reste une clé discrète (la pastille porte la couleur, le mot reste à l'encre) : la couleur des mots est réservée
   au résultat, juste dessous */
.pg-jauge-legende b{font-weight:600;color:var(--encre)}

/* le tableau : le dessin de la liste comparative de le-parc.html, plus la colonne des largeurs */
.pg-comp-cadre{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden}
.pg-comp{--acces:3;width:100%;border-collapse:collapse;table-layout:fixed}
.pg-comp thead th{padding:16px 18px 15px;border-bottom:1px solid var(--bord-fort);background:var(--blanc);text-align:left;vertical-align:bottom;
  font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pg-comp .pg-comp-col-machine{width:27%}
.pg-comp .pg-comp-col-court{width:10%}
.pg-comp .pg-comp-col-larg{width:22%}
.pg-comp .pg-comp-col-actions{width:178px}
.pg-comp tbody tr{border-top:1px solid var(--bord);transition:background-color .25s var(--ease-in-out)}
.pg-comp tbody tr:first-child{border-top:0}
.pg-comp tbody tr:hover,.pg-comp tbody tr:focus-within{background:var(--fond)}
.pg-comp tbody th,.pg-comp tbody td{padding:12px 18px;text-align:left;vertical-align:middle;font-weight:400}
.pg-comp tbody th{padding-left:14px}

.pg-comp-machine{display:flex;align-items:center;gap:18px}
.pg-comp-vign{flex:none;display:grid;place-items:center;width:104px;height:62px;padding:6px 8px;background:var(--creme);border-radius:3px;overflow:hidden}
.pg-comp-vign img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .5s var(--ease)}
.pg-comp-nom{font:800 var(--t-court)/1.2 var(--f-titre);letter-spacing:-.006em;color:var(--encre);transition:color .2s}
a.pg-comp-machine:hover .pg-comp-nom,a.pg-comp-machine:focus-visible .pg-comp-nom{color:var(--rouge)}
a.pg-comp-machine:hover .pg-comp-vign img,a.pg-comp-machine:focus-visible .pg-comp-vign img{transform:scale(1.06)}

.pg-comp-num{font:700 16px/1.25 var(--f-titre);font-variant-numeric:tabular-nums;letter-spacing:.005em;color:var(--encre);white-space:nowrap}
.pg-comp-num small{display:block;margin-top:3px;font:400 var(--t-meta)/1.2 var(--f-corps);letter-spacing:0;color:var(--muted)}
.pg-comp-manque{display:inline-flex;align-items:center;font:500 var(--t-meta)/1.3 var(--f-corps);color:var(--muted);white-space:nowrap}
.pg-comp-usage{font-size:var(--t-petit);line-height:1.5;color:var(--muted)}
.pg-comp-actions{white-space:nowrap;text-align:right!important}
.pg-comp-voir{display:inline-flex;align-items:center;font:600 14.5px/1 var(--f-corps);color:var(--encre);padding:10px 4px}
.pg-comp-voir .fl{color:var(--rouge)}
.pg-comp-voir:hover,.pg-comp-voir:focus-visible{color:var(--rouge)}
.pg-comp-voir:hover .fl,.pg-comp-voir:focus-visible .fl{transform:translateX(4px)}
.pg-comp-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}
.pg-comp-devis:hover,.pg-comp-devis:focus-visible{background:var(--rouge);border-color:var(--rouge);color:#fff}

/* la colonne des largeurs : la valeur, puis la piste graduée 0 – 1 – 2 – 3 m */
.pg-comp-echelle{position:relative;display:block;height:12px;margin-top:10px;letter-spacing:0;text-transform:none}
.pg-comp-echelle i{position:absolute;top:0;font:500 var(--t-label)/1 var(--f-corps);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.pg-comp-echelle i:nth-child(1){left:0}
.pg-comp-echelle i:nth-child(2){left:33.333%;transform:translateX(-50%)}
.pg-comp-echelle i:nth-child(3){left:66.667%;transform:translateX(-50%)}
.pg-comp-echelle i:nth-child(4){right:0}
.pg-comp-larg{position:relative}
.pg-comp-larg-v{display:block;margin-bottom:9px;transition:color .3s var(--ease)}
.pg-comp-piste{position:relative;display:block;height:8px;border-radius:2px;
  background:
    linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(26,26,26,.22) calc(33.333% - .5px) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(66.667% - .5px),rgba(26,26,26,.22) calc(66.667% - .5px) calc(66.667% + .5px),transparent calc(66.667% + .5px)),
    var(--creme)}
.pg-comp-ok,.pg-comp-trop{position:absolute;top:0;bottom:0;display:block}
/* les deux barres couvrent la largeur de la machine (fixe) ; le curseur ne change que leur échelle, sans recalcul de la
   mise en page (finitions du 09/10, point 14) : le noir part de la gauche jusqu'à l'accès, le rouge part de la droite
   (la largeur de la machine) jusqu'à l'accès */
.pg-comp-ok{left:0;width:calc(var(--l) / 3 * 100%);background:var(--encre);border-radius:2px 0 0 2px;
  transform:scaleX(calc(min(var(--l),var(--acces)) / var(--l)));transform-origin:0 50%;
  transition:transform .3s var(--ease),background-color .3s}
.pg-comp-trop{left:0;width:calc(var(--l) / 3 * 100%);background:var(--rouge);
  transform:scaleX(calc(max(0, var(--l) - var(--acces)) / var(--l)));transform-origin:100% 50%;
  transition:transform .3s var(--ease)}
.pg-comp-piste--vide{background:repeating-linear-gradient(90deg,var(--bord-fort) 0 6px,transparent 6px 12px)}
/* le trait de l'accès : il traverse toutes les lignes à la même abscisse ; il n'apparaît qu'une fois la jauge touchée */
.pg-comp tbody .pg-comp-larg::after{content:"";position:absolute;top:0;bottom:-1px;width:2px;pointer-events:none;
  left:calc(18px + (100% - 36px) * var(--acces) / 3 - 1px);background:var(--rouge);opacity:0;
  transition:left .3s var(--ease),opacity .3s}
.pg-comp.touche tbody .pg-comp-larg::after{opacity:.85}
/* une machine plus large que l'accès : la ligne s'efface, le dépassement est rouge */
.pg-comp-ligne > *{transition:opacity .35s var(--ease)}
.pg-comp-ligne.trop > :not(.pg-comp-larg){opacity:.32}
.pg-comp-ligne.trop .pg-comp-larg-v{color:var(--rouge)}
.pg-comp-ligne.trop .pg-comp-ok{background:var(--muted)}
/* la jauge touchée (lecture graduée, Andrea, 18/10/2026 ; pages-b3.js § 1) : la barre de chaque machine prend la couleur de son
   état ; quand l'accès est plus étroit, la part qui tient passe au rouge pâle et le dépassement reste rouge. Aucun mot dans la
   ligne (Andrea : « pas la peine d'écrire à chaque fois… tant que c'est écrit en haut ») : l'état y est dit au lecteur d'écran
   (.pg-comp-etat.sr). Le trait de l'accès passe au noir, le rouge disant désormais « trop étroit ». À quelques centimètres près
   (« juste »), la ligne ne s'efface pas */
.pg-comp-ligne[data-etat="passe"]{--etat:var(--passe)}
.pg-comp-ligne[data-etat="serre"]{--etat:var(--serre)}
.pg-comp.touche .pg-comp-ligne[data-etat="passe"] .pg-comp-ok,.pg-comp.touche .pg-comp-ligne[data-etat="serre"] .pg-comp-ok{background:var(--etat)}
.pg-comp.touche .pg-comp-ligne[data-etat="juste"] .pg-comp-ok,.pg-comp.touche .pg-comp-ligne[data-etat="trop"] .pg-comp-ok{background:#EDA1A8}
.pg-comp-ligne[data-etat="juste"] .pg-comp-larg-v{color:var(--rouge)}
.pg-comp[data-jauge] tbody .pg-comp-larg::after,.pg-comp[data-jauge].touche .pg-comp-piste::after{background:var(--encre)}
.pg-jauge-res .pg-etat b{color:var(--etat)}
.pg-jauge-res > span + span{margin-top:5px}
.pg-jauge-res a{color:var(--encre);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.pg-jauge-res a:hover,.pg-jauge-res a:focus-visible{color:var(--rouge)}
/* une machine dont on attend la confirmation (la 6 tonnes) */
.pg-comp-attente .pg-comp-nom{color:var(--muted)}
/* le tableau des camions : la charge utile en chiffres, la conduite en mots */
.pg-comp--camions .pg-comp-col-machine{width:25%}
.pg-comp--camions .pg-comp-col-charge{width:14%}
.pg-comp--camions .pg-comp-col-conduite{width:19%}
.pg-comp-conduite{font:600 var(--t-petit)/1.4 var(--f-corps);color:var(--encre)}


/* =========================================================================================
   18 · « PHOTO À FOURNIR » — une machine ou un camion dont le projet n'a aucune photo.
   Un seul libellé, un seul dessin : un emplacement en pointillé. Jamais un autre véhicule à la place.
   · dans une case de tableau : .pg-comp-vign.pg-sans-photo (le mot seul)
   · dans une salle : .pg-sans-photo posé sur le sol de la scène (titre + phrase)
   ========================================================================================= */
.pg-sans-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  background:var(--blanc);border:1.5px dashed var(--bord-fort);border-radius:var(--r)}
.pg-sans-photo-t{font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--encre)}
.pg-sans-photo-p{max-width:38ch;font:400 var(--t-petit)/1.5 var(--f-corps);color:var(--muted)}
.pg-comp-vign.pg-sans-photo{gap:0;background:transparent;border-width:1px;border-radius:3px}
.pg-comp-vign.pg-sans-photo .pg-sans-photo-t{font-size:11px;letter-spacing:.06em;line-height:1.25;color:var(--muted)}
.pg-scene > .pg-sans-photo{position:absolute;z-index:2;left:50%;bottom:calc(var(--sol) + 16px);transform:translateX(-50%);
  width:min(38%,540px);height:34%;min-height:124px;margin:0;padding:24px;box-shadow:var(--ombre-boite)}
.pg-scene > .pg-sans-photo.av-coin[data-avalider]::after{top:12px;right:12px}


/* =========================================================================================
   19 · LES HORAIRES — deux colonnes : la semaine, le week-end (ville, contact)
   ========================================================================================= */
.pg-horaires{margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;padding-top:22px;border-top:1px solid var(--bord-fort)}
.pg-horaires dt{display:flex;align-items:center;margin:0 0 6px;font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pg-horaires dd{margin:0;font:600 var(--t-texte)/1.5 var(--f-corps);color:var(--encre)}


/* =========================================================================================
   20 · LA CARTE ITINÉRAIRE — de Propriano à l'agence (ville, contact) · script : itineraire.js
   Vraie cartographie (Leaflet + OpenTopoMap). Isolée, pour que ses calques restent sous
   l'en-tête collant. Deux cadrages possibles (boutons [data-vue]) : l'agence, ou le département.
   ========================================================================================= */
.pg-itin{position:relative;isolation:isolate;z-index:0;min-height:clamp(560px,44vw,700px);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)}
.pg-itin-fond{position:absolute;inset:0;z-index:0}
.pg-itin .leaflet-container{background:#E9E4D9;font-family:var(--f-corps)}
.pg-itin .leaflet-tile-pane{filter:saturate(.5) sepia(.3) brightness(1.06) contrast(.92)}
.pg-itin .leaflet-control-zoom{border:0;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.pg-itin .leaflet-control-zoom a{width:34px;height:34px;color:var(--encre);font:400 19px/34px var(--f-corps)}
.pg-itin .leaflet-control-attribution{font:400 10.5px/1.4 var(--f-corps);background:rgba(255,252,246,.86);color:#555}
.pg-itin .leaflet-control-attribution a{color:#444}
.pg-itin.av-coin[data-avalider]::after{z-index:700}
/* les tracés (classes posées par itineraire.js) */
.pg-itin-zone{fill:var(--rouge);fill-opacity:.12;stroke:var(--rouge);stroke-opacity:.6;stroke-dasharray:4 5}
.pg-itin-d121{fill:none;stroke:#1A1A1A;stroke-opacity:.55;stroke-dasharray:1 8}
.pg-itin-route-lise{fill:none;stroke:#fff;stroke-opacity:.92}
.pg-itin-route{fill:none;stroke:var(--rouge)}
.pg-itin-route,.pg-itin-route-lise,.pg-itin-d121{transition:opacity .6s ease}
.vue-chantier .pg-itin-route,.vue-chantier .pg-itin-route-lise,.vue-chantier .pg-itin-d121{opacity:0}
.pg-itin-dep,.pg-itin-hors-dep{opacity:0;transition:opacity .6s ease}
.vue-chantier .pg-itin-dep,.vue-chantier .pg-itin-hors-dep{opacity:1}
/* le point qui parcourt le trajet, en boucle (dans le temps, jamais au défilement) — sur demande (data-parcours) */
.pg-itin-mobile circle:first-child{fill:rgba(209,20,37,.2)}
.pg-itin-mobile circle:last-child{fill:#fff;stroke:var(--rouge);stroke-width:2.5}
/* les marques : le départ, la direction de Campomoro ; l'agence reprend le point de l'accueil (.carte-pin) */
.pg-itin-icone{background:none;border:0}
.pg-itin-depart,.pg-itin-dir{transition:opacity .5s ease}
.vue-chantier .pg-itin-depart,.vue-chantier .pg-itin-dir{opacity:0}
.pg-itin--etroite .pg-itin-dir{display:none}
.pg-itin-depart{position:absolute;left:0;top:0;display:block;transform:translate(-7px,-7px)}
.pg-itin-depart i{display:block;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--rouge);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pg-itin-dir{position:absolute;left:0;top:0;transform:translate(-10px,calc(-100% - 10px));white-space:nowrap;
  padding:6px 11px;border-radius:3px;background:rgba(255,252,246,.95);box-shadow:0 2px 10px rgba(26,26,26,.16);
  font:700 10.5px/1.2 var(--f-corps);letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.pg-itin-dir span{color:var(--rouge);margin-right:3px}
/* le nom de l'agence passe sous le point : à droite il couvrirait l'itinéraire, à gauche la route de Campomoro */
.pg-itin .carte-pin-nom{left:50%;top:calc(100% + 14px);transform:translateX(-50%)}
.pg-itin .carte-pin-nom::before{left:50%;top:-5px;transform:translateX(-50%) rotate(45deg)}
/* la légende suit le cadrage choisi */
.pg-itin .carte-legende{z-index:650}
.pg-itin-leg-trajet{width:22px;height:4px;border-radius:2px;background:var(--rouge);box-shadow:0 0 0 2px #fff;flex:none}
.pg-itin-leg-route{width:22px;height:0;border-top:3px dotted rgba(26,26,26,.6);flex:none}
.pg-itin-leg-chantier{display:none!important}
.vue-chantier .pg-itin-leg-chantier{display:flex!important}
.vue-chantier .pg-itin-leg-agence{display:none!important}
/* sans la carte (pas de réseau, script bloqué) : l'adresse et le lien suffisent */
.pg-itin.sans-carte .carte-repli{display:grid}
.pg-itin.sans-carte .carte-legende{display:none}


/* =========================================================================================
   21 · 1024 → 1360 : les composants 17 à 20 se resserrent, sans rien tasser
   ========================================================================================= */
@media (max-width:1360px){
  .pg-comp tbody th,.pg-comp tbody td,.pg-comp thead th{padding-inline:14px}
  .pg-comp tbody .pg-comp-larg::after{left:calc(14px + (100% - 28px) * var(--acces) / 3 - 1px)}
  .pg-comp-vign{width:88px;height:54px}
  .pg-comp-machine{gap:14px}
  .pg-comp-nom{font-size:17px}
  .pg-comp .pg-comp-col-actions{width:166px}
}
@media (max-width:1180px){
  .pg-comp-haut{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg-comp .pg-comp-col-machine{width:25%}
  .pg-comp .pg-comp-col-larg{width:20%}
  .pg-comp .pg-comp-col-court{width:11.5%}
  .pg-comp .pg-comp-col-actions{width:156px}
  .pg-comp tbody th,.pg-comp tbody td,.pg-comp thead th{padding-inline:12px}
  .pg-comp tbody .pg-comp-larg::after{left:calc(12px + (100% - 24px) * var(--acces) / 3 - 1px)}
  .pg-comp .pg-comp-manque{font-size:12.5px}
  .pg-comp--camions .pg-comp-col-machine{width:27%}
  .pg-comp-vign{width:72px;height:46px;padding:4px 6px}
  .pg-scene > .pg-sans-photo{width:min(50%,520px)}
}
@media (prefers-reduced-motion:reduce){
  .pg-comp-ok,.pg-comp-trop,.pg-comp tbody .pg-comp-larg::after,.pg-comp-ligne > *,.pg-comp-larg-v{transition:none}
  .pg-itin-mobile{display:none}
}

/* au doigt (finitions du 09/10, point 1 ; règle R10) : pas de survol accroché après un appui — la question de la FAQ
   ne reste pas rouge, une carte ne reste pas soulevée — et l'appui se voit (style.css § 13 pour le reste) */
@media (hover:none) and (pointer:coarse){
  .pg-q summary:hover{color:var(--encre)}
  .pg-q summary:hover .pg-q-signe{background:transparent;border-color:var(--bord-fort)}
  .pg-q summary:hover .pg-q-signe::before,.pg-q summary:hover .pg-q-signe::after{background:var(--encre)}
  .pg-q summary:active{color:var(--rouge)}
  .pg-q summary:active .pg-q-signe{background:var(--rouge);border-color:var(--rouge)}
  .pg-q summary:active .pg-q-signe::before,.pg-q summary:active .pg-q-signe::after{background:#fff}
  a.pg-carte:hover,.pg-carte:has(a:hover){box-shadow:var(--ombre-repos);transform:none;border-color:var(--bord)}
  .pg-carte:hover .pg-carte-img img{transform:none}
  a.pg-carte:active,.pg-carte:has(a:active){transform:scale(.985);transition-duration:.12s}
}


/* =========================================================================================
   22 · LA PAGE INTROUVABLE (404.html) — l'en-tête clair, plus d'air avant le bandeau devis
   ========================================================================================= */
.pg-introuvable{padding-bottom:clamp(88px,8vw,128px)}


/* =========================================================================================
   23 · TABLETTE ET TÉLÉPHONE — sous 1024 px seulement (l'ordinateur n'en voit rien)
   Mêmes points de rupture que style.css § 13 : ≤ 1023 (tablette portrait) · ≤ 767 (téléphones).
   Mode d'emploi : _GABARITS.md § 7.
   ========================================================================================= */
@media (max-width:1023px){
  :root{--t-h1-page:42px;--t-lead:20px}

  /* l'en-tête de page : le fil d'Ariane et l'appel au doigt (44 px) */
  .pg-tete h1{max-width:none}
  .pg-ariane ol{gap:0 8px;font-size:14px}
  .pg-ariane li{gap:8px}
  .pg-ariane a{display:inline-flex;align-items:center;min-height:44px;padding-block:0;background-position:0 calc(50% + .72em)}
  .pg-ariane [aria-current]{display:inline-flex;align-items:center;min-height:44px}
  .pg-appel a{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;
    text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--bord-fort);text-underline-offset:5px}
  .pg-tete--photo .pg-appel a,.sec--noir .pg-appel a{text-decoration-color:rgba(255,255,255,.45)}
  .pg-tete--photo{min-height:0;padding-block:18px 72px}
  .pg-tete--photo .pg-tete-corps{padding-top:clamp(150px,30vw,230px)}
  .pg-tete--photo h1{max-width:18ch}
  /* le voile monte depuis le bas : le texte est en bas, la photo respire en haut. Une bande de 170 px s'assombrit en haut,
     sous le fil d'Ariane, qui se lisait mal sur les ciels clairs (audit du 07/10, point 2) */
  .pg-tete-voile,.pg-tete--photo .pg-tete-voile{background:
    linear-gradient(180deg,rgba(11,11,11,.80) 0,rgba(11,11,11,.50) 90px,rgba(11,11,11,0) 170px),
    linear-gradient(0deg,rgba(11,11,11,.90) 0%,rgba(11,11,11,.80) 40%,rgba(11,11,11,.40) 68%,rgba(11,11,11,.12) 84%,rgba(11,11,11,.30) 100%)}
  .pg-tete--photo .pg-ariane ol,.pg-tete--photo .pg-ariane [aria-current]{color:rgba(255,255,255,.88)}

  /* la salle : la machine en haut, ses trois cotes en rangée sur le sol */
  .pg-scene{--zone:clamp(180px,30vw + 60px,300px);height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;gap:0 16px;padding:calc(var(--zone) + 44px) 24px 24px}
  .pg-sol{top:calc(var(--zone) + 18px);height:auto}
  .pg-engin{top:22px;bottom:auto;width:min(80%,600px);height:var(--zone)}
  .pg-fili{top:calc(22px + var(--zone) / 2)}
  .pg-cote,.pg-cote-1,.pg-cote-2,.pg-cote-3{position:relative;left:auto;right:auto;top:auto;min-width:0;gap:8px;align-items:flex-start;text-align:left}
  .pg-cote::before{content:"";width:22px;height:2px;background:var(--rouge)}
  .pg-cote-1 dt::after,.pg-cote-2 dt::before,.pg-cote-3 dt::before{display:none}
  .pg-cote dt{white-space:normal;letter-spacing:.12em}
  .pg-cote dd{flex-wrap:wrap;white-space:normal;font-size:clamp(26px,2vw + 18px,34px)}
  .pg-cote dd.manque{font-size:15px;padding-top:2px}
  /* l'unité (« t », « m ») : 14 px au moins ; la pastille « À confirmer » reste collée à la valeur (sinon elle passe seule à la ligne) */
  .pg-cote .u{font-size:14px}
  .pg-cote dd[data-avalider]{flex-wrap:nowrap;white-space:nowrap}
  .pg-scene-note{position:relative;left:auto;bottom:auto;transform:none;grid-column:1/-1;margin-top:16px}
  .pg-scene > .pg-sans-photo{top:22px;bottom:auto;width:min(82%,520px);height:var(--zone);min-height:0}

  /* la plaque, sous la salle : à trois colonnes étroites, les contenus n'ont plus la même hauteur ; centrés, leurs
     étiquettes ne s'alignaient plus. On les cale en haut, et l'étiquette sur deux lignes (« Si elle est trop petite »)
     reprend un interligne lisible */
  .pg-plaque > div{justify-content:flex-start}
  .pg-plaque-lab{line-height:1.35}

  /* les cartes simples : les trois colonnes de l'ordinateur restent (à deux par rangée, la 3e restait seule), resserrées ;
     la galerie : deux par rangée (audit du 07/10, point 7) */
  .pg-cartes{gap:14px}
  .pg-carte-corps{padding:18px 18px 16px}
  .pg-carte-t{font-size:18px}
  /* à trois colonnes étroites, un surtitre long passe sur deux lignes : il reprend un interligne lisible (comme .pg-plaque-lab) */
  .pg-carte-sur{line-height:1.35}
  .pg-galerie--4{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* texte + image : l'image au-dessus dès la tablette (à côté, la colonne de texte tombait à 25-38 signes par ligne),
     le texte mesuré (audit du 07/10, point 6) */
  .pg-duo,.pg-duo--inverse,.pg-duo--portrait,.pg-duo--portrait.pg-duo--inverse{grid-template-columns:minmax(0,1fr);gap:28px}
  .pg-duo--inverse .pg-duo-img{order:0}
  .pg-duo-txt{max-width:640px}
  .pg-duo--portrait .pg-duo-img{aspect-ratio:3/2}

  /* comparer : la jauge sous le texte, le tableau en fiches (deux par rangée) */
  .pg-comp-haut{grid-template-columns:minmax(0,1fr);align-items:start}
  .pg-comp-cadre{background:none;border:0;border-radius:0;overflow:visible}
  .pg-comp,.pg-comp tbody{display:block}
  .pg-comp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pg-comp tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .pg-comp tbody tr,.pg-comp 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)}
  .pg-comp tbody tr:hover,.pg-comp tbody tr:focus-within{background:var(--blanc)}
  .pg-comp tbody th,.pg-comp tbody td{display:block;padding:0}
  .pg-comp tbody th{flex:1 0 100%;padding-left:0}
  .pg-comp tbody td{flex:1 1 0;min-width:0}
  .pg-comp tbody td.pg-comp-larg{flex-grow:1.5}
  .pg-comp tbody td.pg-comp-usage,.pg-comp tbody td.pg-comp-actions{flex:1 0 100%}
  .pg-comp tbody td[data-label]:not(.pg-comp-usage):not(.pg-comp-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)}
  .pg-comp tbody .pg-comp-larg::after{display:none}
  .pg-comp-larg-v{margin-bottom:8px}
  .pg-comp .pg-comp-manque{font-size:14px;white-space:normal}
  .pg-comp tbody td.pg-comp-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}
  .pg-comp tbody td.pg-comp-actions:empty{display:none}
  .pg-comp-voir{min-height:48px;padding:0}
  .pg-comp-devis{height:44px;margin-left:0}

  /* la jauge au doigt : la piste prend 44 px de haut, les graduations passent à 14 px */
  .pg-curseur input{height:44px}
  .pg-bornes{font-size:14px}
  /* un lien dans la plaque d'une machine (« Mini-pelle 5 t ») : 44 px au doigt, la ligne ne bouge pas */
  .pg-plaque-t a{display:inline-block;padding-block:11px;margin-block:-11px}
  .pg-carte-t a{padding-block:11px}

  /* l'article : une colonne mesurée (≈ 65 signes par ligne en tablette) ; la colonne de côté passe sous le texte,
     ses blocs l'un sous l'autre (§ 15 les range côte à côte, mais seulement pour l'ordinateur de 1024 à 1180) */
  .pg-article-grille > *{max-width:640px}
  /* la FAQ, les encadrés, les pages légales : ≈ 60 signes par ligne (audit du 07/10, point 11) */
  .pg-q-r p,.pg-encadre p:not(.pg-encadre-t),.pg-rub > p{max-width:46ch}
  .pg-cote-col{flex-direction:column;align-items:stretch}
  .pg-cote-col > *{flex:none}

  /* la carte itinéraire : moins haute ; « Direction Campomoro » couvrirait l'étiquette de l'agence (14 px sous
     1024 px, style.css § 13) : on le retire, la légende le nomme (itineraire.js le fait déjà sous 560 px) */
  .pg-itin{min-height:clamp(380px,60vw,480px)}
  .pg-itin .pg-itin-dir{display:none}
}
/* tablette : le titre sur photo prend la largeur de la colonne, sur deux lignes au plus (finitions du 09/10, point 3) */
@media (min-width:768px) and (max-width:1023px){.pg-tete--photo h1{max-width:24ch}}

@media (max-width:767px){
  :root{--t-h1-page:clamp(30px,4.5vw + 13px,34px);--t-lead:18px;--t-article:17px}

  /* l'en-tête de page : le fil d'Ariane au doigt, les gestes en pleine largeur */
  .pg-tete{padding-block:10px 36px}
  .pg-tete h1{margin-top:6px;line-height:1.06}
  /* le fil d'Ariane tient sur une ligne : la page courante se coupe en points de suspension, le titre la donne en
     entier juste dessous (audit du 07/10, point 1) */
  .pg-ariane ol{flex-wrap:nowrap}
  .pg-ariane li{flex:none}
  .pg-ariane li:last-child{flex:0 1 auto;min-width:0}
  .pg-ariane [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:44px}
  /* jusqu'à 429 px, un fil à quatre niveaux (Accueil › Le parc › la famille › la machine) laisse tomber « Le parc » : les points
     de suspension coupaient le nom de la machine au milieu de son chiffre, « Mini-pelle 2,… » (finitions finales du 10/10,
     point 7). La famille, juste au-dessus, y mène toujours ; le fil complet reste dans les données structurées */
  @media (max-width:429px){
    .pg-ariane li:nth-child(2):nth-last-child(n+3){display:none}
  }
  .pg-tete-pied{margin-top:18px;gap:22px}
  .pg-chapo{font-size:16.5px}
  .pg-gestes{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .pg-gestes .btn{width:100%}
  /* le grand bouton du haut de page : son libellé est long (« Demander un devis pour un mini-chargeur ») ; comme les
     boutons du hero de l'accueil, 15 px, et s'il ne tient toujours pas, il passe sur deux lignes au lieu d'être rogné */
  .pg-tete .pg-gestes .btn-grand{display:block;height:auto;padding:16px;font-size:15px;line-height:22px;
    white-space:normal;text-align:center;text-wrap:balance}
  .pg-appel{text-align:center}
  .pg-tete--photo{padding-block:10px 64px}
  .pg-tete--photo .pg-tete-corps{padding-top:clamp(130px,40vw,200px)}
  .pg-tete--photo .pg-tete-pied{gap:22px}
  .pg-tete--photo .pg-chapo{font-size:16px}
  .pg-tete--photo .pg-appel{text-align:left}

  /* l'intro */
  .pg-intro{gap:18px}
  .pg-cit{margin-top:24px;padding:16px 0 0 18px}

  /* la salle */
  .pg-salle-zone{padding-bottom:3rem}
  .pg-scene{--zone:clamp(160px,44vw,220px);gap:0 12px;padding:calc(var(--zone) + 40px) 18px 20px}
  .pg-engin{width:88%}
  .pg-cote dt{font-size:11px;letter-spacing:.1em}
  .pg-cote dd{font-size:24px}
  .pg-cote dd.manque{font-size:14px}
  /* la pastille à 7 px de la valeur (l'écart du chiffre à son unité) : « À confirmer » et sa pastille tiennent dans une colonne de 375 px */
  .pg-cote dd[data-avalider]::after{margin-left:0}
  .pg-scene > .pg-sans-photo{width:86%;padding:18px}
  .pg-plaque{grid-template-columns:minmax(0,1fr)}
  .pg-plaque > div{padding:20px}
  .pg-plaque > div + div{border-left:0;border-top:1px solid var(--bord)}

  /* la fiche */
  .pg-fiche-cadre{padding:2px 18px 8px}
  .pg-fiche > div{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:4px 14px;padding:12px 0}
  .pg-fiche dd{font-size:15px}

  /* les équipements : l'un sous l'autre */
  .pg-equip,.pg-equip--3,.pg-equip:not(.pg-equip--3){grid-template-columns:minmax(0,1fr)}
  .pg-equip-el,.pg-equip:not(.pg-equip--3) .pg-equip-el:nth-child(n+3){padding:22px 20px}
  .pg-equip-el + .pg-equip-el,.pg-equip:not(.pg-equip--3) .pg-equip-el:nth-child(odd){border-left:0;border-top:1px solid var(--bord)}
  .pg-equip-el::after{left:20px}
  .pg-equip-el::before{margin-bottom:12px}

  /* les cartes voisines (« Si celle-ci ne convient pas », « Ce qui va avec ») : une rangée qu'on balaie au doigt, la
     suivante dépasse — les valeurs de .cartes--defile, style.css § 13 (audit du 07/10, point 3) */
  .cartes--3,.cartes--2{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,330px);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:4px var(--pad) 10px;scrollbar-width:none}
  .cartes--3::-webkit-scrollbar,.cartes--2::-webkit-scrollbar{display:none}
  .cartes.cartes--3 > li,.cartes.cartes--2 > li{margin-top:0;scroll-snap-align:start}
  .services--2{grid-template-columns:minmax(0,1fr)}
  .services--2 > li:nth-child(n+2){margin-top:var(--gout)}
  .services--2 .service-tete{padding:20px 20px 0}
  .services--2 .service-lien{margin-inline:20px}
  .pg-cartes,.pg-cartes--2,.pg-cartes--4{grid-template-columns:minmax(0,1fr)}
  .pg-carte-corps,.pg-cartes--4 .pg-carte-corps{padding:20px 20px 18px}
  .pg-carte-t{font-size:20px}

  /* la FAQ */
  .pg-q summary{gap:16px;min-height:56px;padding:16px 0}
  .pg-q-signe{width:32px;height:32px}
  .pg-q-r{padding:0 0 22px}
  .pg-q-r p{font-size:15.5px}

  /* texte + image : la photo au-dessus, toujours */
  .pg-duo,.pg-duo--inverse,.pg-duo--portrait,.pg-duo--portrait.pg-duo--inverse{grid-template-columns:minmax(0,1fr);gap:24px}
  .pg-duo--inverse .pg-duo-img{order:0}
  .pg-duo--portrait .pg-duo-img{aspect-ratio:4/3}
  .pg-duo-txt > .btn,.pg-duo-txt > .lien-fleche,.pg-duo-txt > .pg-gestes{margin-top:24px}
  .pg-duo-st{margin-top:28px}

  /* la galerie, la vidéo */
  .pg-galerie,.pg-galerie--2{grid-template-columns:minmax(0,1fr)}
  .pg-galerie--4{gap:12px}
  .pg-galerie--mosaique{grid-template-columns:minmax(0,1fr)}
  .pg-galerie--mosaique > :first-child{grid-row:auto}
  .pg-galerie--mosaique > :first-child .pg-galerie-img{aspect-ratio:3/2;min-height:0}
  .pg-video-jouer{gap:12px;font-size:16px}
  .pg-video-jouer::before{width:52px;height:52px;background-size:22px}

  /* l'encadré, le manque */
  .pg-encadre{padding:22px 20px 22px}
  .pg-manque{padding:14px 16px 15px}

  /* l'article, sa colonne de côté */
  .pg-article-grille{gap:40px}
  .pg-article h2{margin-top:40px;font-size:24px}
  .pg-article h3{margin-top:30px;font-size:20px}
  .pg-sommaire{padding:18px 20px}
  .pg-sommaire a{display:flex;align-items:center;min-height:44px;padding-block:8px}

  /* la page de texte (légal) */
  .pg-legal{gap:36px}
  .pg-rub{padding-bottom:32px}
  .pg-rub + .pg-rub{padding-top:32px}
  .pg-rub h2{font-size:22px}
  .pg-rub-tete{gap:12px}

  /* comparer : une fiche par rangée */
  .pg-comp-haut{gap:24px;margin-bottom:24px}
  .pg-jauge{padding:20px 20px 18px}
  .pg-comp tbody{grid-template-columns:minmax(0,1fr);gap:12px}
  .pg-comp tbody tr,.pg-comp tbody tr:first-child{padding:14px 16px 4px;gap:14px 12px}
  .pg-comp-vign{width:88px;height:54px}
  .pg-comp-nom{font-size:18px}

  /* horaires, carte itinéraire */
  .pg-horaires{gap:16px}
  .pg-itin{min-height:380px}
}

/* ≤ 359 : les très petits téléphones — le 375 ramené à la largeur (style.css § 13) */
@media (max-width:359px){
  :root{--t-h1-page:calc(8.955vw - 3.582px)}   /* 30 px à 375, dans la proportion de la largeur utile */

  /* la salle : les trois cotes gardent leur colonne (« À confirmer » passe sur deux lignes plutôt que chez sa voisine) */
  .pg-scene{column-gap:8px;padding-inline:12px}
  .pg-cote dt{letter-spacing:.08em}
  .pg-cote dd{font-size:clamp(22px,5.128vw + 5.59px,24px)}   /* 24 px à 375 → 22 px à 320 : la cote et son unité tiennent leur colonne */
  .pg-cote dd.manque{font-size:var(--t-meta);white-space:normal}

  /* l'article : la relance de la colonne de côté, son bouton passe à la ligne */
  .pg-relance{padding-inline:20px}
  .pg-relance .btn,.pg-duo-txt > .btn{display:block;height:auto;padding:11.5px 18px;line-height:22px;
    white-space:normal;text-align:center;text-wrap:balance}
  .pg-duo-txt > .btn{width:fit-content;max-width:100%}

  /* les horaires : « Du lundi au vendredi, » puis « 8 h 30 – 12 h » (les espaces insécables tiennent l'heure) */
  .pg-horaires .nb,.pg-carte-p .nb{white-space:normal}
}