/* =========================================================================================
   PAGES B3 · les familles (terrassement, manutention, transport) et la ville (Propriano)
   Se charge APRÈS style.css et pages.css, seulement depuis ces quatre pages. Classes « b3- ».
   Ce qui est propre à ces pages et vit ici :
   · la phrase « Je dois… » propre à une famille : le dessin de l'accueil (.qm), sans sa liste (§ 3)
   · les deux gammes d'une famille, machine détourée sur sa scène (§ 4)
   · la charge utile en grand (§ 5)
   · la salle « sur place » de la ville : une liste, la vraie photo de chaque machine (§ 6)
   · les deux choix « retrait / livraison » de la ville, qui pilotent la carte (§ 7)
   Remontés dans pages.css le 06/10 : le tableau comparatif et la jauge (§ 17, .pg-comp, .pg-jauge),
   « Photo à fournir » (§ 18), les horaires (§ 19), la carte itinéraire (§ 20, .pg-itin + itineraire.js).
   Les familles ont l'en-tête clair du socle, comme le parc et les machines.
   Rien n'est lié au défilement : tout répond au geste (glisser, choisir, survoler, cliquer).
   ========================================================================================= */


/* =========================================================================================
   3 · « JE DOIS… » — le dessin de l'accueil (style.css § 6 bis), la liste propre à la famille
   ========================================================================================= */
.b3-qm{--qm-pad:clamp(34px,3.4vw,56px);position:relative;background:var(--creme);border-radius:var(--r);padding:clamp(34px,3.2vw,50px) var(--qm-pad) 0}


/* =========================================================================================
   4 · LES DEUX GAMMES — une machine détourée sur sa scène (le dessin de la salle, pages.css § 3)
   ========================================================================================= */
.b3-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gout)}
.b3-gamme{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre-boite)}
.b3-gamme .pg-scene{height:clamp(320px,24vw,420px);border-bottom:1px solid var(--bord)}
.b3-gamme .pg-engin{width:min(84%,680px);height:84%}
.b3-gamme-corps{flex:1;display:flex;flex-direction:column;padding:28px clamp(26px,2.6vw,38px) 30px}
.b3-gamme-t{font:800 var(--t-bloc)/1.18 var(--f-titre);letter-spacing:-.012em}
.b3-gamme-p{margin-top:12px;max-width:46ch;font:500 var(--t-intro)/1.55 var(--f-titre);color:var(--encre)}
.b3-gamme-pied{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;margin-top:auto;padding-top:24px}


/* =========================================================================================
   5 · LE TRANSPORT — la charge utile en grand, sous le titre
   ========================================================================================= */
.b3-chiffre{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--bord-fort)}
.b3-chiffre-v{font:800 clamp(64px,3vw + 36px,92px)/.88 var(--f-titre);letter-spacing:-.04em;color:var(--encre);font-variant-numeric:tabular-nums}
.b3-chiffre-v .u{margin-left:.06em;font-size:.42em;font-weight:700;letter-spacing:-.01em;color:var(--rouge)}
.b3-chiffre-l{font:500 var(--t-texte)/1.4 var(--f-corps);color:var(--muted)}
.pg-duo-txt > .b3-chiffre{margin-top:28px}
.pg-duo-txt > .b3-chiffre + .lien-fleche{margin-top:24px}


/* =========================================================================================
   6 · LA VILLE — « Ce qu'on a sur place » : la liste du parc, la vraie photo de chaque machine
   (prise devant l'agence, le 7 septembre). Survoler ou parcourir au clavier change la photo.
   ========================================================================================= */
.b3-salle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:start}
.b3-liste{margin:0;padding:0;list-style:none;border-top:1px solid var(--bord-fort)}
.b3-ligne-parc{display:grid;grid-template-columns:34px minmax(0,1fr) auto 18px;align-items:center;gap:0 14px;
  padding:13px 14px 13px 12px;border-bottom:1px solid var(--bord);transition:background-color .25s var(--ease-in-out)}
.b3-ligne-n{font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .2s}
.b3-ligne-nom{font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em;transition:color .2s}
.b3-ligne-cote{font-size:var(--t-meta);line-height:1.35;color:var(--muted);text-align:right}
.b3-ligne-fl{justify-self:end;color:var(--rouge);transition:transform .35s var(--ease)}
.b3-ligne-parc.vue{background:var(--creme)}
.b3-ligne-parc.vue .b3-ligne-n{color:var(--rouge)}
.b3-ligne-parc:hover .b3-ligne-nom,.b3-ligne-parc:focus-visible .b3-ligne-nom{color:var(--rouge)}
.b3-ligne-parc:hover .b3-ligne-fl,.b3-ligne-parc:focus-visible .b3-ligne-fl{transform:translateX(4px)}
.b3-ligne-parc:focus-visible{outline-offset:-3px}
.b3-vue{position:relative;margin:0;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--creme)}
.b3-vue > img,.b3-vue-camions{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s var(--ease-in-out)}
.b3-vue > img{object-fit:cover}
.b3-vue > .on{opacity:1}
.b3-vue-leg{position:absolute;z-index:2;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 36px);
  padding:11px 16px;background:rgba(11,11,11,.84);border-radius:3px;color:#fff;font:600 var(--t-petit)/1.25 var(--f-corps)}
.b3-vue-leg b{font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--rouge-sur-noir);font-variant-numeric:tabular-nums}
.b3-vue.sans-leg .b3-vue-leg{opacity:0}
/* les camions de transport n'ont pas été photographiés : la case est typographique */
.b3-vue-camions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:clamp(32px,4vw,56px);
  background:var(--charbon);color:#fff}
.b3-vue-camions .b3-chiffre-v{color:#fff}
.b3-vue-camions .b3-chiffre-v .u{color:var(--rouge-sur-noir)}
.b3-vue-camions p:not(.b3-chiffre-v){max-width:36ch;font:500 var(--t-intro)/1.5 var(--f-titre);color:var(--sur-noir-2)}
.b3-salle-pied{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px}
.b3-salle + .conseil{margin-top:48px}


/* =========================================================================================
   7 · RETRAIT OU LIVRAISON — deux choix ; ils pilotent la carte itinéraire (pages.css § 20)
   ========================================================================================= */
.b3-rl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px);align-items:stretch}
.b3-rl-txt .sec-intro{max-width:46ch}
.b3-opts{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.b3-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;margin:0;padding:18px 60px 20px 22px;
  text-align:left;cursor:pointer;color:var(--encre);background:transparent;border:1px solid var(--bord-fort);border-radius:var(--r);
  transition:background-color .25s var(--ease-in-out),border-color .25s var(--ease-in-out),box-shadow .3s var(--ease)}
.b3-opt:hover,.b3-opt:focus-visible{border-color:var(--encre)}
.b3-opt[aria-pressed="true"]{background:var(--blanc);border-color:var(--encre);box-shadow:0 14px 34px -18px rgba(11,11,11,.35)}
/* le rond du choix, à droite : plein et rouge quand la vue est montrée */
.b3-opt::after{content:"";position:absolute;right:22px;top:22px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--bord-fort);background:var(--blanc);box-shadow:inset 0 0 0 4px var(--blanc);transition:background-color .25s,border-color .25s}
.b3-opt[aria-pressed="true"]::after{border-color:var(--rouge);background:var(--rouge)}
.b3-opt-sur{font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.b3-opt[aria-pressed="true"] .b3-opt-sur{color:var(--rouge)}
.b3-opt-t{font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.b3-opt-p{font-size:var(--t-petit);line-height:1.55;color:var(--muted)}
.b3-rl-txt > .pg-manque{margin-top:22px}
.b3-rl-txt > .pg-gestes{margin-top:28px}
.b3-rl-txt .btn svg{width:13px;height:13px;margin-left:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================================
   8 · 1024 → 1360 : on resserre, sans rien tasser
   ========================================================================================= */
@media (max-width:1180px){
  .b3-salle,.b3-rl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* retrait ou livraison : la carte à gauche, le texte à droite. Le visuel change de côté après la photo du parc
   (§ 6, à droite), aux proportions du texte + carte de l'accueil (style.css, .livraison : 1 / 1,12).
   L'ordre du clavier ne change pas : les deux choix, puis la carte qu'ils pilotent (audit des axes du 07/10, P1) */
@media (min-width:1024px){
  .b3-rl > .pg-itin{order:-1}
}
@media (min-width:1181px){
  .b3-rl{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(48px,6vw,96px)}
}
/* les horaires : « Du lundi au vendredi, 8 h 30 – 12 h » ne se coupe pas (la seule coupure permise est avant « et »).
   1024 → 1180 : la colonne de texte est trop étroite pour deux colonnes ; la semaine puis le week-end, l'un sous l'autre,
   comme au téléphone et comme « Venir nous voir » sur la page contact. Au-delà : deux colonnes, celle de la semaine prend
   la place qu'il lui faut, les deux restent égales dès qu'il y a la place */
@media (min-width:1024px) and (max-width:1180px){
  .b3-rl .pg-horaires{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (min-width:1181px){
  .b3-rl .pg-horaires{grid-template-columns:repeat(2,minmax(min-content,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .b3-vue > img,.b3-vue-camions{transition:none}
}


/* =========================================================================================
   9 · TABLETTE ET TÉLÉPHONE — sous 1024 px seulement (l'ordinateur n'en voit rien).
   Points de rupture du socle (style.css § 13, pages.css § 23, _GABARITS.md § 7).
   · le tableau comparatif en fiches : la largeur et sa barre en pleine largeur, le trait de
     l'accès posé dans chaque barre (l'équivalent du trait qui traverse le tableau)
   · les deux gammes : la machine sur son sol, la carte l'une sous l'autre au téléphone
   · la ville : les photos du parc en rangée qu'on balaie au doigt (au doigt, pas de survol),
     la liste dessous ; « retrait / livraison » : les deux choix, la carte, puis les horaires
   · « Je dois… » en pleine largeur au téléphone, comme sur l'accueil
   ========================================================================================= */
@media (max-width:1023px){
  /* --- le tableau comparatif (terrassement, manutention) : la largeur d'abord, en pleine largeur --- */
  .pg-comp[data-jauge] tbody td.pg-comp-larg{order:1;flex:1 0 100%}
  .pg-comp[data-jauge] tbody td:not(.pg-comp-larg):not(.pg-comp-usage):not(.pg-comp-actions){order:2}
  .pg-comp[data-jauge] tbody td.pg-comp-usage{order:3}
  .pg-comp[data-jauge] tbody td.pg-comp-actions{order:4}
  .pg-comp[data-jauge] .pg-comp-manque{white-space:nowrap}
  .pg-comp[data-jauge] .pg-comp-piste{height:10px}
  /* le trait de l'accès, dans chaque barre, dès que la jauge a été touchée */
  .pg-comp[data-jauge] .pg-comp-piste::after{content:"";position:absolute;top:-5px;bottom:-5px;width:2px;
    left:calc(var(--acces) / 3 * 100% - 1px);background:var(--rouge);opacity:0;pointer-events:none;transition:left .3s var(--ease),opacity .3s}
  .pg-comp[data-jauge].touche .pg-comp-piste::after{opacity:.85}

  /* --- « Je dois… » : une cote « À confirmer » passe entière sous son libellé, sans se couper --- */
  .b3-qm .qm-cote{flex-wrap:wrap;row-gap:2px}
  .b3-qm .qm-cote b{margin-left:auto;white-space:nowrap}

  /* --- le transport : la photo au-dessus du texte dès la tablette (la colonne de texte se tassait),
     cadrée entière (3/2, son format) --- */
  .pg-duo:has(.b3-chiffre){grid-template-columns:minmax(0,1fr);gap:28px}
  .pg-duo:has(.b3-chiffre) .pg-duo-img{aspect-ratio:3/2}
  .pg-duo:has(.b3-chiffre) .pg-duo-txt h2{max-width:none}
  .pg-duo:has(.b3-chiffre) .pg-lead{max-width:60ch}

  /* --- les deux gammes : la machine posée sur son sol, sans cotes autour --- */
  .b3-deux{gap:16px}
  .b3-gamme .pg-scene{--zone:clamp(170px,26vw,230px);height:auto;padding-bottom:28px}
  .b3-gamme .pg-engin{width:min(84%,560px);height:var(--zone)}
  .b3-gamme-corps{padding:24px 24px 26px}

  /* --- la ville : les photos en rangée qu'on balaie, la liste dessous --- */
  .b3-salle{grid-template-columns:minmax(0,1fr);gap:28px}
  .b3-vue{order:-1;display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:min(46%,360px);gap:10px 14px;
    aspect-ratio:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 6px;border-radius:0;background:none;scrollbar-width:none}
  .b3-vue::-webkit-scrollbar{display:none}
  .b3-vue > img,.b3-vue-camions{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;opacity:1;border-radius:var(--r);
    scroll-snap-align:start;transition:none}
  .b3-vue > img{background:var(--creme)}
  .b3-vue-camions{gap:12px;padding:22px 24px}
  .b3-vue-camions .b3-chiffre{margin-top:0;padding-top:0;border-top:0}
  .b3-vue-camions p:not(.b3-chiffre-v){font-size:var(--t-texte)}
  .b3-vue-leg{display:none}
  /* la légende de chaque photo (pages-b3.js § 3) : le numéro et le nom de la ligne, sous la photo */
  .b3-vue > .b3-vue-cap{display:flex;align-items:baseline;gap:10px;font:600 var(--t-petit)/1.3 var(--f-corps);color:var(--encre)}
  .b3-vue-cap b{font:800 var(--t-meta)/1 var(--f-titre);letter-spacing:.04em;color:var(--rouge);font-variant-numeric:tabular-nums}
  /* au doigt, pas de ligne « montrée » : la première ne reste pas surlignée */
  .b3-ligne-parc.vue{background:transparent}
  .b3-ligne-parc.vue .b3-ligne-n{color:var(--muted)}

  /* --- retrait ou livraison : les deux choix, la carte qu'ils pilotent, puis les horaires --- */
  .b3-rl{grid-template-columns:minmax(0,1fr);gap:0}
  .b3-rl-txt{display:contents}
  .b3-rl-txt > .pg-horaires,.b3-rl-txt > .pg-manque,.b3-rl-txt > .pg-gestes{order:2}
  .b3-rl > .pg-itin{order:1;margin-top:20px}
  .b3-rl-txt .sec-intro{max-width:56ch}
  .b3-opts{margin-top:26px}
  /* les horaires sur deux lignes égales (sinon « 18 h » reste seul sur la sienne) */
  .b3-rl .pg-horaires dd{text-wrap:balance}
  /* (« Direction Campomoro » retiré sous 1024 px : remonté dans pages.css § 23 le 07/10, pour la carte du contact aussi) */
  /* (les boutons + et − de la carte, 44 px : remontés dans style.css § 13 le 07/10, pour toutes les cartes) */
}

@media (max-width:767px){
  /* --- « Je dois… » : en pleine largeur, comme .qm sur l'accueil --- */
  .b3-qm{--qm-pad:20px;margin-inline:calc(-1 * var(--pad));padding:26px var(--qm-pad) 0;border-radius:0}
  /* … et se fond dans la section crème qui suit : plus de bande claire entre les deux, un filet (finitions du 09/10, point 9) */
  section:has(.b3-qm){padding-bottom:0}
  section:has(.b3-qm) + .sec--creme{border-top:1px solid var(--bord)}

  /* --- les fiches du tableau --- */
  .pg-comp[data-jauge] tbody td.pg-comp-larg .pg-comp-larg-v{margin-bottom:9px}

  /* --- les deux gammes : l'une sous l'autre --- */
  .b3-deux{grid-template-columns:minmax(0,1fr)}
  .b3-gamme .pg-scene{--zone:clamp(160px,44vw,200px);padding-bottom:24px}
  .b3-gamme-corps{padding:20px 20px 22px}
  .b3-gamme-pied{flex-direction:column;align-items:stretch;gap:6px;padding-top:20px}
  .b3-gamme-pied .lien-fleche{justify-content:center}

  /* --- le transport : la charge utile --- */
  .b3-chiffre{margin-top:24px;padding-top:20px}
  .pg-duo-txt > .b3-chiffre{margin-top:24px}

  /* --- la ville : une photo et la suivante qui dépasse ; la liste sur deux lignes --- */
  .b3-vue{grid-auto-columns:min(84%,340px);gap:10px 12px}
  .b3-vue-camions{gap:10px;padding:20px}
  .b3-vue-camions .b3-chiffre-v{font-size:48px}
  .b3-ligne-parc{grid-template-columns:30px minmax(0,1fr) 18px;grid-template-areas:"n nom fl" "n cote fl";gap:3px 12px;padding:12px 6px 12px 4px}
  .b3-ligne-n{grid-area:n}
  .b3-ligne-nom{grid-area:nom}
  .b3-ligne-cote{grid-area:cote;text-align:left}
  .b3-ligne-fl{grid-area:fl}
  .b3-salle + .conseil{margin-top:36px}

  /* --- retrait ou livraison --- */
  .b3-opts{gap:10px;margin-top:24px}
  .b3-opt{padding:16px 50px 18px 18px}
  .b3-opt::after{right:18px;top:18px}
  /* les horaires : la phrase de la semaine est longue, l'une sous l'autre */
  .b3-rl .pg-horaires{grid-template-columns:minmax(0,1fr);gap:14px}
  .b3-rl-txt > .pg-gestes{margin-top:24px}
  .b3-rl-txt > .pg-gestes .lien-fleche{justify-content:center}
}