/* =========================================================================================
   PAGES B4 · services, entreprise et contact — ce que le socle (style.css + pages.css) n'a pas
   livraison · transport-marchandises · pieces-caterpillar · qui-sommes-nous · recrutement · contact
   Chargée APRÈS pages.css, et seulement par ces six pages. Toutes les classes commencent par « b4- » ;
   le reste n'ajuste que des espacements entre composants du socle.
   Rien n'est lié au défilement : les blocs entrent avec .apparait, les cartes bougent dans le temps.
   ========================================================================================= */

/* ---------- 1 · raccords entre composants du socle ---------- */
.pg-duo-txt > .pg-fiche-cadre{margin-top:26px}
.pg-duo-txt > .pg-fiche-cadre + .btn{margin-top:30px}
.pg-duo-txt > .pg-lead + .pg-texte{margin-top:14px}
.livraison-txt > .pg-manque{margin-top:24px}
.livraison-txt > .pg-manque + .btn{margin-top:30px}
.temoin-g > .pg-manque{margin-top:30px}
/* sur fond noir, le texte d'ouverture garde le blanc franc du socle ; ses repères aussi */
.sec--noir [data-avalider]::after{box-shadow:0 0 0 3px rgba(242,194,48,.35)}

/* deux paragraphes dans une carte simple (livraison : les deux possibilités) */
.b4-voies .pg-carte-img{aspect-ratio:16/9}
.b4-voies .pg-carte-corps{padding:26px 30px 28px}
.b4-voies .pg-carte-t{font-size:var(--t-bloc);line-height:1.2;letter-spacing:-.012em}
.b4-voies .pg-carte-p{max-width:60ch}
.b4-voies .pg-carte-p + .pg-carte-p{margin-top:12px}

/* la galerie du parc, sous l'intro (qui sommes-nous) */
.b4-galerie{margin-top:clamp(52px,4.6vw,68px)}


/* ---------- 3 · la licence : les quatre étapes sous l'intro (transport) ---------- */
.b4-etapes{margin-top:clamp(44px,3.8vw,56px)}


/* ---------- 4 · l'étiquette Bergerat Monnoyeur, sur fond noir (pièces) ---------- */
.b4-machines{align-items:center}
.b4-etiquette{margin:0}
.b4-etiquette img{width:100%;border-radius:var(--r)}
.b4-etiquette figcaption{margin-top:14px;font-size:var(--t-meta);line-height:1.45;color:var(--sur-noir-3)}


/* ---------- 5 · le conseil avant de louer, seul dans sa section (qui sommes-nous) ---------- */
.b4-conseil{margin-top:0}
.sec .b4-conseil h2.conseil-t{font-size:var(--t-bloc);line-height:1.2;letter-spacing:-.012em}
.b4-conseil > .btn{flex:none}


/* ---------- 6 · la candidature : le texte à gauche, la carte du formulaire à droite (recrutement)
   Le dessin du bandeau devis, en clair. Ce n'est pas un form.devis (un seul par page). ---------- */
.b4-cand-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,572px);gap:clamp(48px,6vw,96px);align-items:start}
.b4-cand-txt h2{max-width:16ch}
.b4-cand{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);padding:36px 36px 30px;
  box-shadow:0 30px 60px -24px rgba(11,11,11,.45)}
.b4-cand .btn-plein{margin-top:20px}


/* ---------- 7 · contact : l'en-tête court, le formulaire juste dessous ---------- */
.b4-tete-contact{padding-bottom:clamp(44px,4vw,60px)}
.b4-tete-contact .pg-tete-pied{margin-top:18px}
/* le champ e-mail ajouté par pages-b4.js (§ 9.1) : le dessin des autres champs */
.champ input[type=email]{width:100%;height:48px;padding:0 14px;border:1px solid #8C8C8C;border-radius:var(--r);background:#fff;
  font:400 15.5px/1.4 var(--f-corps);color:var(--encre);transition:border-color .2s,box-shadow .2s;appearance:none}
.champ input[type=email]:hover{border-color:var(--encre)}
.champ input[type=email]:focus{outline:none;border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre),0 0 0 4px rgba(26,26,26,.10)}
.champ .champ-aide + .champ-err{margin-top:-2px}
/* la confirmation : « Retour à l'accueil » et « Voir le parc » côte à côte (les gestes du socle, .pg-gestes) */
.devis-ok .pg-gestes{margin-top:20px}
.devis-ok .pg-gestes .lien-fleche{margin-top:0}
.devis-ok .pg-gestes .btn{margin:0}

/* ---------- 8 · contact : venir nous voir (la carte : pages.css § 20, .pg-itin ; les horaires : § 19) ---------- */
.b4-venir{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,96px);align-items:stretch}
.b4-adresse{margin-top:26px;font-style:normal;font-size:var(--t-intro);line-height:1.6;color:var(--encre)}
.b4-adresse b{display:block;margin-bottom:4px;font:800 var(--t-court)/1.3 var(--f-titre)}
.b4-venir-txt > .pg-gestes{margin-top:28px}
.b4-st{margin:44px 0 14px;font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.b4-st + .pg-horaires{margin-top:0;padding-top:18px}
/* ---------- 10 · 1024 → 1180 : on passe en colonne ce qui tasserait ---------- */
@media (max-width:1180px){
  .b4-cand-grille,.b4-venir{grid-template-columns:minmax(0,1fr)}
  .b4-cand-txt h2{max-width:none}
  .b4-venir .pg-itin{min-height:540px}
  .b4-conseil{flex-wrap:wrap}
  .b4-voies .pg-carte-corps{padding:24px 24px 26px}
}


/* ---------- 11 · transport : le camion vu du ciel, calé dans la moitié droite, jamais sous le titre ----------
   La photo (2 400 px) commence à 30 % de la largeur, son bord gauche se fond dans le noir du voile. */
.b4-transport .pg-tete-img{left:30%}
.b4-transport .pg-tete-img img{object-position:50% 52%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}

/* ---------- 12 · contact : dans le bandeau placé sous le titre, le texte se cale en haut du formulaire
   (centré, il laissait un grand vide rouge au-dessus de « Ce qui se passe ensuite ») ---------- */
.b4-contact .bandeau-in{align-items:start}
.b4-contact .bandeau-txt{padding-top:40px}
@media (max-width:1100px){ .b4-contact .bandeau-txt{padding-top:0} }



/* =========================================================================================
   13 · TABLETTE ET TÉLÉPHONE — sous 1024 px seulement (l'ordinateur n'en voit rien). _GABARITS.md § 7.
   ========================================================================================= */
@media (max-width:1023px){
  /* (la case d'accord des formulaires, 44 px : remontée dans style.css § 13 le 07/10, devis de l'accueil compris) */

  /* transport : la photo en bandeau, le camion en haut ; le titre dessous, sur le noir (comme le hero de l'accueil).
     Sur l'ordinateur, la photo commence à 30 % et se fond à gauche : ici, elle prend toute la largeur. */
  .b4-transport{--b4-bande:clamp(260px,40vw + 144px,440px)}
  .b4-transport .pg-tete-img{left:0;bottom:auto;height:var(--b4-bande)}
  .b4-transport .pg-tete-img img{object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
  .b4-transport .pg-tete-voile{bottom:auto;height:var(--b4-bande);
    background:linear-gradient(180deg,rgba(11,11,11,.78) 0,rgba(11,11,11,.42) 90px,rgba(11,11,11,0) 170px,rgba(11,11,11,0) 50%,rgba(11,11,11,.74) 82%,var(--noir) 100%)}
  .b4-transport .pg-tete--photo .pg-tete-corps{padding-top:calc(var(--b4-bande) - 90px)}

  /* contact, « Nous joindre directement » : les numéros et l'e-mail à 44 px au doigt, soulignés sous le mot */
  .b4-venir .pg-fiche dd a{display:inline-block;padding-block:12px;margin-block:-12px;border-bottom:0;
    text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--bord-fort);text-underline-offset:5px}
}

@media (max-width:767px){
  /* transport : le titre tient sur trois lignes (la taille, pas le texte) */
  .b4-transport .pg-tete--photo h1{max-width:none;font-size:clamp(28px,4.5vw + 11px,32px)}

  /* livraison : les deux possibilités, le rembourrage des cartes simples du socle */
  .b4-voies .pg-carte-corps{padding:20px 20px 18px}

  /* qui sommes-nous : les quatre machines du parc en une rangée qu'on balaie au doigt (la suivante dépasse) */
  .b4-galerie{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:0 var(--pad) 8px;scrollbar-width:none}
  .b4-galerie::-webkit-scrollbar{display:none}
  .b4-galerie > li{scroll-snap-align:start}

  /* recrutement : la carte de candidature, le rembourrage du formulaire devis au téléphone */
  .b4-cand-grille{gap:32px}
  .b4-cand{padding:26px 20px 22px}

  /* contact, venir nous voir : la fiche en libellé puis valeur (l'e-mail ne se coupe plus), la carte moins haute */
  .b4-venir .pg-fiche > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .b4-venir .pg-itin{min-height:420px}
  /* contact, les horaires : l'un sous l'autre, chaque phrase en lignes égales (comme .b3-rl ; audit du 07/10, point 9) */
  .b4-venir .pg-horaires{grid-template-columns:minmax(0,1fr);gap:14px}
  .b4-venir .pg-horaires dd{text-wrap:balance}
}

/* ≤ 374 : les petits et très petits téléphones (style.css § 13) */
@media (max-width:374px){
  /* transport : trois lignes comme à 375 (28 px pour 335 px utiles, dans la même proportion : 26,7 px à 360,
     23,4 px à 320 ; à 28 px fixes, quatre lignes à 360) */
  .b4-transport .pg-tete--photo h1{font-size:calc(8.358vw - 3.343px)}
}