/* =========================================================================================
   PAGES B2 · les autres machines — mini-chargeurs, compacteur, télescopiques, camion benne,
   et les trois camions de transport (porte-engins, polybenne, fourgon).
   Se charge APRÈS pages.css. Seulement ce qui manque au socle pour ces 7 pages ; tout le reste
   (salle, plaque, fiche, cartes, services, encadré, repères « À confirmer ») vient de pages.css.
   Rien n'est lié au défilement.
   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   1 · LA SALLE SANS PHOTO — les camions dont le projet n'a aucune photo : la scène est moins haute,
   l'emplacement « Photo à fournir » est celui du socle (pages.css § 18, .pg-sans-photo)
   ----------------------------------------------------------------------------------------- */
.b2-scene-vide{height:clamp(360px,28vw,520px)}
/* la valeur absente, posée dans la plaque */
.pg-plaque-t.a-voir{font:500 var(--t-meta)/1.4 var(--f-corps);color:var(--muted)}


/* -----------------------------------------------------------------------------------------
   2 · DEUX MACHINES CÔTE À CÔTE — la fiche des mini-chargeurs (à roues · à chenilles)
   ----------------------------------------------------------------------------------------- */
.b2-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gout)}
.b2-machine{display:flex;flex-direction:column;padding:30px clamp(26px,2.6vw,38px) 32px;background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-repos)}
.b2-machine-t{font:800 var(--t-bloc)/1.2 var(--f-titre);letter-spacing:-.012em}
.b2-machine-t::after{content:"";display:block;width:28px;height:3px;margin-top:16px;background:var(--rouge)}
.b2-machine > .pg-texte{margin-top:16px}
.b2-machine > .pg-fiche{margin-top:20px;border-top:1px solid var(--bord-fort)}
.b2-machine > .pg-fiche > div:last-child{border-bottom:0}
.b2-machine > .pg-gestes{margin-top:auto;padding-top:24px}
.b2-deux + .pg-manque{margin-top:24px}
/* dans la composition des fiches machines (.pg-intro : le titre à gauche, la fiche à droite), les deux
   fiches passent l'une sous l'autre dans la colonne de droite (audit des axes du 07/10, M1) */
@media (min-width:1181px){
  .pg-intro > .b2-deux{grid-template-columns:minmax(0,1fr)}
}


/* -----------------------------------------------------------------------------------------
   3 · LE TABLEAU À DEUX COLONNES — les deux télescopiques, ligne par ligne
   ----------------------------------------------------------------------------------------- */
.b2-compare{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.b2-compare caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.b2-compare th,.b2-compare td{padding:13px 0;border-bottom:1px solid var(--bord);text-align:left;vertical-align:baseline}
.b2-compare thead th{padding:16px 0 14px;border-bottom:1px solid var(--bord-fort);
  font:800 var(--t-court)/1.2 var(--f-titre);letter-spacing:-.005em;color:var(--encre)}
.b2-compare tbody th{width:34%;padding-right:20px;font:400 var(--t-meta)/1.4 var(--f-corps);color:var(--muted)}
.b2-compare td{width:33%;padding-right:20px;font:700 15.5px/1.4 var(--f-titre);letter-spacing:.003em;color:var(--encre)}
.b2-compare td.a-voir{font:500 var(--t-meta)/1.4 var(--f-corps);color:var(--muted)}
.b2-compare tfoot td{padding:18px 20px 6px 0;border-bottom:0}
.b2-compare tfoot .lien-fleche{font-size:var(--t-petit)}
.b2-compare tbody tr:last-child th,.b2-compare tbody tr:last-child td{border-bottom:1px solid var(--bord-fort)}


/* -----------------------------------------------------------------------------------------
   4 · UN SEUL SERVICE — le camion benne n'a que la livraison (§ 3.10) : la carte de service de
   l'accueil, couchée sur toute la largeur (la photo à gauche, le texte à droite)
   ----------------------------------------------------------------------------------------- */
.b2-services--1{grid-template-columns:minmax(0,1fr)}
.b2-services--1 > li{display:block}
.b2-services--1 .service{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:none}
.b2-services--1 .service-img{position:relative;aspect-ratio:auto;min-height:360px}
.b2-services--1 .service-img img{position:absolute;inset:0}
.b2-services--1 .service-corps{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,48px) clamp(28px,3vw,52px)}
.b2-services--1 .service-tete{padding:0}
.b2-services--1 .service-t{font-size:var(--t-bloc)}
.b2-services--1 .service-p{max-width:46ch;font-size:var(--t-texte);line-height:1.6}
.b2-services--1 .service-lien{margin:28px 0 0;align-self:stretch}


/* -----------------------------------------------------------------------------------------
   5 · LES CAMIONS SANS PHOTO, EN LISTE — une carte de texte dans la grille des cartes machines,
   et les liens posés dans la liste numérotée (pg-equip) des pages camions
   ----------------------------------------------------------------------------------------- */
.cartes > li > .b2-carte-texte{grid-row:1/-1;display:flex;flex-direction:column;justify-content:center;padding:28px 26px 26px;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-repos)}
.b2-carte-texte .carte-fam{margin-bottom:10px}
.b2-carte-texte .carte-nom{margin-top:0}
.b2-carte-texte .carte-usage{margin-top:10px}
.b2-carte-liste{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--bord)}
.b2-carte-liste li{border-bottom:1px solid var(--bord)}
.b2-carte-liste a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;
  font:700 15.5px/1.3 var(--f-titre);color:var(--encre);transition:color .2s}
.b2-carte-liste a small{font:500 var(--t-meta)/1.3 var(--f-corps);color:var(--muted);white-space:nowrap}
.b2-carte-liste a .fl{color:var(--rouge);transition:transform .35s var(--ease)}
.b2-carte-liste a:hover,.b2-carte-liste a:focus-visible{color:var(--rouge)}
.b2-carte-liste a:hover .fl,.b2-carte-liste a:focus-visible .fl{transform:translateX(4px)}
.b2-carte-texte > .lien-fleche{margin-top:22px;align-self:flex-start;font-size:var(--t-petit)}

.pg-equip-t a{transition:color .2s}
.pg-equip-t a:hover,.pg-equip-t a:focus-visible{color:var(--rouge)}
.pg-equip-el > .lien-fleche{margin-top:16px;font-size:var(--t-petit)}
.pg-equip-p.a-voir{display:block}


/* -----------------------------------------------------------------------------------------
   6 · LES REPÈRES « À CONFIRMER » EMPILÉS dans la colonne d'une intro (l'un sous l'autre ;
   l'espace sous le titre est dans pages.css § 2)
   ----------------------------------------------------------------------------------------- */
.pg-manque + .pg-manque{margin-top:14px}


/* -----------------------------------------------------------------------------------------
   7 · 1024 → 1180 : on resserre sans tasser
   ----------------------------------------------------------------------------------------- */
@media (max-width:1180px){
  .b2-services--1 .service{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}


/* -----------------------------------------------------------------------------------------
   8 · TABLETTE ET TÉLÉPHONE — sous 1024 px seulement (l'ordinateur n'en voit rien).
   Mode d'emploi : _GABARITS.md § 7. Le socle (pages.css § 23) fait l'essentiel ; ici, ce qui
   manque aux composants de ce lot.
   ----------------------------------------------------------------------------------------- */
@media (max-width:1023px){
  /* la salle sans photo : l'emplacement posé sur le sol, sous le nom en filigrane (comme à l'ordinateur),
     sans la hauteur réservée aux cotes que les camions n'ont pas */
  .b2-scene-vide{--b2-haut:clamp(72px,12vw + 26px,120px);display:block;height:auto;padding:var(--b2-haut) 24px 56px}
  .b2-scene-vide .pg-fili{top:calc(var(--b2-haut) - .22em)}
  .b2-scene-vide .pg-sol{top:auto;bottom:0;height:40px}
  .b2-scene-vide > .pg-sans-photo{position:relative;left:auto;top:auto;bottom:auto;transform:none;
    width:min(100%,460px);height:auto;min-height:132px;margin:0 auto;padding:40px 24px 26px}

  /* les liens des camions dans la liste numérotée : 44 px au doigt, la ligne ne bouge pas */
  .pg-equip-t a{display:inline-block;padding-block:11px;margin-block:-11px}
}

@media (max-width:767px){
  /* la salle aux cotes doubles (« 1,60 · 1,80 m ») : la cote du milieu prend plus de place */
  .b2-scene--double{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr)}
  .b2-scene--double .pg-cote dd:not(.manque){gap:4px;font-size:clamp(21px,7.6vw - 8px,24px)}
  /* la pastille garde ses 7 px d'écart avec l'unité (pages.css § 23), malgré l'écart réduit de cette salle */
  .b2-scene--double .pg-cote dd[data-avalider]:not(.manque)::after{margin-left:3px}

  /* (le grand bouton du haut de page, rogné à 375 px : remonté dans pages.css § 23 le 07/10) */

  .b2-scene-vide{padding-inline:20px}
  .b2-scene-vide > .pg-sans-photo{padding:38px 18px 22px}

  /* les deux mini-chargeurs : l'un sous l'autre, le bouton en pleine largeur */
  .b2-deux{grid-template-columns:minmax(0,1fr)}
  .b2-machine{padding:24px 20px}
  .b2-machine > .pg-gestes{padding-top:22px}

  /* le tableau des deux télescopiques : la colonne des libellés cède la place aux deux machines */
  .b2-compare thead th{padding-right:12px;font-size:16px}
  .b2-compare tbody th{width:30%;padding-right:12px}
  .b2-compare td{width:35%;padding-right:12px;font-size:15px}
  .b2-compare tfoot td{padding-right:12px}

  /* le service seul : la photo au-dessus, comme les cartes de service du téléphone */
  .b2-services--1 .service{grid-template-columns:minmax(0,1fr)}
  .b2-services--1 .service-img{aspect-ratio:16/9;min-height:0}
  .b2-services--1 .service-corps{padding:20px 20px 0}
  .b2-services--1 .service-t{font-size:var(--t-carte)}
  .b2-services--1 .service-p{font-size:15px}
  .b2-services--1 .service-lien{margin:18px 0 0;padding:14px 0 18px}
}

/* ≤ 359 : les très petits téléphones (style.css § 13) */
@media (max-width:359px){
  /* le tableau des deux télescopiques : il ne tient plus en trois colonnes ; le libellé passe au-dessus de ses deux
     valeurs (comme les fiches des pages de texte), les deux machines restent côte à côte */
  .b2-compare,.b2-compare thead,.b2-compare tbody,.b2-compare tfoot{display:block}
  .b2-compare tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px}
  .b2-compare thead td:first-child,.b2-compare tfoot td:first-child{display:none}
  .b2-compare thead th,.b2-compare td,.b2-compare tfoot td{width:auto;padding-right:0}
  .b2-compare tbody th{grid-column:1/-1;width:auto;padding:13px 0 4px}
  .b2-compare tbody td{padding-top:0}
  /* les filets passent des cellules à la rangée : ils restent continus d'une machine à l'autre */
  .b2-compare tr{border-bottom:1px solid var(--bord)}
  .b2-compare thead tr,.b2-compare tbody tr:last-child{border-bottom-color:var(--bord-fort)}
  .b2-compare tfoot tr{border-bottom:0}
  .b2-compare thead th,.b2-compare tbody th,.b2-compare td,
  .b2-compare tbody tr:last-child th,.b2-compare tbody tr:last-child td{border-bottom:0}

  /* la salle aux cotes doubles */
  .b2-scene--double .pg-cote dd:not(.manque){font-size:20px}

  /* la carte « Les autres camions » : le rembourrage des cartes du téléphone, chaque camion puis sa précision dessous */
  .cartes > li > .b2-carte-texte{padding-inline:20px}
  .b2-carte-liste a{flex-direction:column;align-items:flex-start;gap:2px}
}