/* =========================================================================================
   PAGES B1 · LES MACHINES DE TERRASSEMENT
   mini-pelles.html (page pivot) · mini-pelle-5t.html · pelle-8t.html · pelle-14t.html
   Se charge APRÈS style.css et pages.css. Les pages machines n'en ont presque pas besoin :
   elles reprennent tels quels les composants de pages.css (modèle : mini-pelle-2-7t.html).
   Ce qui est ici :
     1 · la gamme de la page pivot : les quatre pelles debout sur le même sol, et sous chacune
         ce que dit le tableau « Choisir son tonnage » du § 3.1 (largeur, pour quoi) ;
     (les raccords « Est-ce que ça passe ? » sur fond noir et « repère sous un titre » sont
      remontés dans pages.css le 06/10.)
   Rien n'est lié au défilement : les machines entrent au chargement (.pret), le reste
   apparaît avec le fondu d'app.js (.apparait).
   ========================================================================================= */


/* =========================================================================================
   1 · LA GAMME — page pivot
   Une seule boîte blanche (le dessin de la salle de pages.css § 3). Le fond commun (dégradé,
   sol, nom en filigrane) est posé une fois derrière les quatre colonnes ; chaque colonne est
   une rangée du tableau du § 3.1, couchée : la machine, son nom, sa largeur, son usage, les gestes.
   La taille des machines monte de la 2,7 à la 14 pour donner l'ordre de grandeur : ce n'est
   PAS une échelle (on n'a pas les cotes exactes des quatre).
   ========================================================================================= */
.b1-gamme{position:relative;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre-boite);--sol:15%}

/* le fond commun : aussi haut qu'une scène (4 colonnes de proportion 5/4 → la boîte fait 5 fois sa hauteur) */
.b1-gamme-fond{position:absolute;left:0;top:0;width:100%;aspect-ratio:5/1;overflow:hidden;isolation:isolate;container-type:inline-size;
  background:
    radial-gradient(ellipse 46% 64% at 50% 44%,#FFFFFF 0%,rgba(255,255,255,0) 74%),
    linear-gradient(180deg,var(--fond) 0%,var(--creme) 100%)}
.b1-gamme-fond .pg-fili{top:40%}
.b1-gamme-lab{position:absolute;z-index:2;left:clamp(22px,2.2vw,32px);top:clamp(20px,1.9vw,28px);
  display:flex;align-items:center;gap:12px;font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.b1-gamme-lab::before{content:"";width:28px;height:2px;background:var(--rouge)}

.b1-gamme-liste{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.b1-gamme-liste > li{display:grid;grid-row:span 5;grid-template-rows:subgrid;min-width:0}

/* la scène de chaque colonne : transparente, le fond commun passe derrière */
.b1-g-scene{position:relative;display:block;aspect-ratio:5/4}
.b1-g-engin{position:absolute;left:50%;bottom:calc(var(--sol) - 1.4%);width:var(--w);margin:0;transform:translateX(-50%);transform-origin:50% 100%;
  pointer-events:none;transition:transform .7s var(--ease)}
.b1-g-engin img{position:relative;z-index:2;width:100%;height:auto}
.b1-g-ombre{position:absolute;z-index:1;left:50%;bottom:-11px;width:80%;height:24px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(26,26,26,.38),rgba(26,26,26,.12) 58%,rgba(26,26,26,0));filter:blur(5px)}
.b1-gamme-liste > li:hover .b1-g-engin,.b1-gamme-liste > li:focus-within .b1-g-engin{transform:translateX(-50%) scale(1.035)}

/* sous la scène : les rangées du tableau, alignées d'une colonne à l'autre */
.b1-gamme-liste > li > :not(.b1-g-scene):not(.carte-pied){padding-inline:clamp(20px,2vw,30px)}
.b1-gamme-liste > li + li > :not(.b1-g-scene){border-left:1px solid var(--bord)}
.b1-g-nom{padding-top:24px;border-top:1px solid var(--bord);font:800 var(--t-carte)/1.2 var(--f-titre);letter-spacing:-.01em}
.b1-g-nom a{transition:color .2s}
.b1-g-nom a:hover,.b1-gamme-liste > li:hover .b1-g-nom a,.b1-g-nom a:focus-visible,.b1-gamme-liste > li:focus-within .b1-g-nom a{color:var(--rouge)}
.b1-g-cote,.b1-g-usage{margin:0}
.b1-g-cote{padding-top:18px}
.b1-g-cote dt,.b1-g-usage dt{display:flex;align-items:center;gap:10px;font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
/* pas de trait rouge devant « Largeur » : répété quatre fois, il faisait douze marques rouges dans la boîte avec les flèches et les « Devis » */
.b1-g-cote dd{margin:10px 0 0;display:flex;align-items:baseline;gap:6px;font:800 clamp(34px,1.2vw + 20px,46px)/1 var(--f-titre);
  letter-spacing:-.03em;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}
.b1-g-cote .u{font-size:.42em;font-weight:600;letter-spacing:0;color:var(--muted)}
/* la largeur qui manque (la 5) : « À confirmer », discret, à la hauteur des chiffres */
.b1-g-cote dd.manque{min-height:1em;font:500 var(--t-texte)/1.3 var(--f-corps);letter-spacing:0;color:var(--muted);align-items:center}
.b1-g-usage{padding-top:18px;padding-bottom:22px}
.b1-g-usage dd{margin:8px 0 0;font-size:var(--t-petit);line-height:1.55;color:var(--muted)}
.b1-gamme-liste .carte-pied{margin-top:0}

/* l'entrée, au chargement : les quatre machines arrivent l'une après l'autre, de la plus petite à la plus grosse
   (une animation sur l'image ; le survol, lui, agit sur le cadre : les deux ne se gênent pas) */
.js .b1-g-engin img,.js .b1-g-ombre{opacity:0}
.js.pret .b1-g-engin img{animation:b1-entre 1.1s var(--ease) calc(.36s + var(--i,0) * .12s) both}
.js.pret .b1-g-ombre{animation:b1-ombre .9s var(--ease) calc(.36s + var(--i,0) * .12s) both}
@keyframes b1-entre{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes b1-ombre{from{opacity:0}to{opacity:1}}


/* =========================================================================================
   3 · 1024 → 1180 : on resserre la gamme sans la casser
   ========================================================================================= */
@media (max-width:1180px){
  .b1-gamme-liste > li > :not(.b1-g-scene):not(.carte-pied){padding-inline:18px}
  .b1-gamme-liste .carte-voir{padding-inline:18px}
  .b1-gamme-liste .carte-devis{padding-inline:14px}
}

@media (prefers-reduced-motion:reduce){
  .js .b1-g-engin img,.js .b1-g-ombre{opacity:1!important;animation:none!important}
  .b1-g-engin{transition:none}
}


/* =========================================================================================
   4 · TABLETTE ET TÉLÉPHONE — sous 1024 px seulement (l'ordinateur n'en voit rien)
   Les composants communs (en-tête de page, salle, plaque, fiche, cartes, services, FAQ…) sont
   adaptés par pages.css § 23 : il ne reste ici que la gamme de la page pivot.
   Le fond commun (filigrane, sol) ne tient que sur une rangée de quatre : sous 1024 px, chaque
   scène porte son propre fond et son propre sol, et la taille des machines monte toujours
   de la 2,7 à la 14.
     · tablette : deux machines par rangée, les rangées du tableau toujours alignées ;
     · téléphone : une machine par rangée, couchée (la machine à gauche, son nom et sa largeur
       à droite, l'usage et les gestes dessous), comme la liste du parc.
   ========================================================================================= */
@media (max-width:1023px){
  .b1-gamme-fond{display:none}
  .b1-gamme-lab{position:relative;left:auto;top:auto;padding:20px 24px;border-bottom:1px solid var(--bord)}
  .b1-gamme-liste{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* chaque scène : le dégradé et le sol de la salle, la machine plus petite qu'à quatre de front */
  .b1-g-scene{aspect-ratio:3/2;overflow:hidden;isolation:isolate;background:
    radial-gradient(ellipse 46% 60% at 50% 46%,#FFFFFF 0%,rgba(255,255,255,0) 74%),
    linear-gradient(180deg,var(--fond) 0%,var(--creme) 100%)}
  .b1-g-scene::before{content:"";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%)}
  .b1-g-engin{width:calc(var(--w) * .78)}
  .b1-gamme-liste > li:hover .b1-g-engin,.b1-gamme-liste > li:focus-within .b1-g-engin{transform:translateX(-50%)}

  /* les filets : la seconde colonne, la seconde rangée */
  .b1-gamme-liste > li + li > :not(.b1-g-scene){border-left:0}
  .b1-gamme .b1-gamme-liste > li:nth-child(even) > *{border-left:1px solid var(--bord)}
  .b1-gamme-liste > li:nth-child(n+3) > .b1-g-scene{border-top:1px solid var(--bord)}
  .b1-gamme .b1-gamme-liste > li > :not(.b1-g-scene):not(.carte-pied){padding-inline:24px}
  .b1-gamme .b1-gamme-liste .carte-voir{padding-inline:24px;min-height:50px}
  .b1-gamme .b1-gamme-liste .carte-devis{padding-inline:20px}

  /* le nom de la machine : 44 px au doigt, la ligne ne bouge pas */
  .b1-g-nom a{display:inline-block;padding-block:11px;margin-block:-11px}
  .b1-g-usage dd{font-size:var(--t-petit)}
  /* (la plaque des pages machines : remontée dans pages.css § 23 le 07/10, elle vaut pour toutes les machines) */
}

@media (max-width:767px){
  .b1-gamme-lab{padding:18px 20px}
  .b1-gamme-liste{grid-template-columns:minmax(0,1fr)}

  /* une machine par rangée, couchée */
  .b1-gamme-liste > li{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,46%) minmax(0,1fr);
    grid-template-areas:"scene nom" "scene cote" "usage usage" "pied pied";align-content:start;column-gap:16px;padding-top:20px}
  .b1-gamme-liste > li + li{border-top:1px solid var(--bord)}
  .b1-gamme .b1-gamme-liste > li:nth-child(even) > :not(.b1-g-scene){border-left:0}

  .b1-g-scene{grid-area:scene;align-self:start;aspect-ratio:4/3;margin-left:20px;border-radius:var(--r)}
  .b1-gamme .b1-gamme-liste > li > .b1-g-scene{border:1px solid var(--bord)}
  .b1-g-engin{width:var(--w)}
  .b1-g-ombre{bottom:-6px;height:14px;filter:blur(3px)}

  .b1-gamme .b1-gamme-liste > li > :not(.b1-g-scene):not(.carte-pied){padding-inline:0 20px}
  .b1-gamme .b1-gamme-liste > li > .b1-g-usage:not(.b1-g-scene){padding:16px 20px 18px}
  .b1-g-nom{grid-area:nom;align-self:end;padding-top:0;border-top:0;font-size:19px}
  .b1-g-cote{grid-area:cote;align-self:start;padding-top:10px}
  .b1-g-cote dd{margin-top:6px;font-size:30px}
  .b1-g-cote .u{font-size:.5em}
  .b1-g-cote dd.manque{font-size:15px}
  .b1-g-usage{grid-area:usage}
  .b1-g-usage dd{margin-top:6px}
  .b1-gamme-liste .carte-pied{grid-area:pied}
  .b1-gamme .b1-gamme-liste .carte-voir{padding-inline:20px}
  .b1-gamme .b1-gamme-liste .carte-devis{padding-inline:20px}
}