/* =========================================================================================
   PAGE CONTACT · « LE COMPTOIR » (retenu par Andrea le 07/10/2026)
   Chargée uniquement par contact.html, après pages-b4.css. Système de l'accueil 07 strict :
   Red Hat Display + Onest, les couleurs et les boutons de style.css. Classes « ct- ».
   1 · l'en-tête : la photo de l'agence, le titre, les deux numéros en grand, au centre
   2 · le formulaire : le bandeau devis, posé au centre, à cheval sur la photo
   3 · ce qui se passe ensuite : les trois premières étapes du déroulé de l'accueil
   4 · venir nous voir : au centre aussi — le titre, trois blocs égaux, la carte en pleine largeur
   Rien n'est lié au défilement : entrées au chargement (data-entree) et fondu .apparait.
   Ordinateur (1024 → 1920) ; le téléphone viendra avec la version mobile du site.
   Les trois propositions comparées : ../_archives-essais/contact-3-propositions.html.
   ========================================================================================= */

/* ce que le formulaire avance sur la photo */
.b4-contact{--ct-cheval:clamp(210px,15vw,260px)}


/* =========================================================================================
   1 · L'EN-TÊTE — une seule colonne, au centre : le titre, l'accroche, les deux numéros
   ========================================================================================= */
.ct-scene{position:relative;isolation:isolate;overflow:hidden;background:var(--noir);color:#fff;
  padding:22px 0 calc(var(--ct-cheval) + clamp(48px,4vw,64px))}
.ct-photo{position:absolute;inset:0;z-index:-2;margin:0}
.ct-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
/* le voile : dense derrière le texte (haut), plus léger en bas, où l'agence et la machine se voient de part et d'autre du formulaire */
.ct-voile{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(11,11,11,.82) 0%,rgba(11,11,11,.77) 46%,rgba(11,11,11,.50) 72%,rgba(11,11,11,.32) 100%)}
.js .ct-photo img{transform:scale(1.04)}
.js.pret .ct-photo img{transform:none;transition:transform 2.4s var(--ease)}

.ct-scene .pg-ariane ol{color:rgba(255,255,255,.74)}
.ct-scene .pg-ariane a{color:#fff;background-image:linear-gradient(#fff,#fff)}
.ct-scene .pg-ariane a:hover,.ct-scene .pg-ariane a:focus-visible{color:#fff}
.ct-scene .pg-ariane li + li::before{border-color:rgba(255,255,255,.5)}
.ct-scene .pg-ariane [aria-current]{color:rgba(255,255,255,.74)}
.ct-scene :focus-visible{outline-color:#fff}

.ct-tete{display:flex;flex-direction:column;align-items:center;max-width:880px;margin:clamp(36px,3.4vw,56px) auto 0;text-align:center;
  text-shadow:0 1px 18px rgba(0,0,0,.28)}
.ct-tete h1{font-weight:800;font-size:var(--t-h1-page);line-height:1.03;letter-spacing:-.022em;color:#fff}
.ct-chapo{margin-top:20px;max-width:58ch;font-size:clamp(17px,.35vw + 13px,19px);line-height:1.6;color:rgba(255,255,255,.92)}
/* les deux numéros, en grand, de part et d'autre d'un filet */
.ct-tels{display:flex;flex-wrap:wrap;justify-content:center;row-gap:24px;margin-top:clamp(34px,3vw,46px)}
.ct-tels a{display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px clamp(28px,3vw,52px);
  font:800 clamp(34px,1.3vw + 18px,46px)/1 var(--f-titre);letter-spacing:.005em;white-space:nowrap;color:#fff;transition:color .25s}
.ct-tels a + a{border-left:1px solid rgba(255,255,255,.32)}
.ct-tels a span{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.ct-tels a:hover,.ct-tels a:focus-visible{color:var(--rouge-sur-noir)}
.ct-heures{margin-top:22px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.84)}


/* =========================================================================================
   2 · LE FORMULAIRE — le bandeau devis de la page, sans son rouge : la carte blanche seule, au centre,
   à cheval sur la photo. Son texte (titre, numéros, adresse) est déjà dans l'en-tête : il s'efface.
   ========================================================================================= */
.b4-contact .bandeau{position:relative;z-index:2;overflow:visible;margin-top:calc(-1 * var(--ct-cheval));padding-block:0;
  background:none;color:var(--encre)}
.b4-contact .bandeau::before,.b4-contact .bandeau::after{display:none}
.b4-contact .bandeau-in{display:block}
.b4-contact .bandeau-txt{display:none}
.b4-contact .bandeau .devis{max-width:800px;margin:0 auto;padding:46px 52px 38px;
  box-shadow:0 44px 80px -34px rgba(11,11,11,.55),0 1px 3px rgba(11,11,11,.10)}
/* le titre de la page est juste au-dessus : la carte s'ouvre sur sa promesse (§ 9.1, sous-titre du formulaire) */
.b4-contact .devis-form > .devis-t{display:none}
.b4-contact .devis-form > .devis-st{display:flex;align-items:center;gap:12px;margin:0;font:700 var(--t-court)/1.3 var(--f-titre);letter-spacing:-.005em;color:var(--encre)}
.b4-contact .devis-form > .devis-st::before{content:"";width:14px;height:10px;background:var(--rouge);transform:skewX(-22deg);flex:none}
.b4-contact .devis-grille{gap:20px;margin-top:28px}
.b4-contact .devis .btn-plein{height:56px;font-size:16px}


/* =========================================================================================
   3 · CE QUI SE PASSE ENSUITE — juste sous le formulaire, dans sa largeur, sur le fond clair
   ========================================================================================= */
.ct-ensuite{padding-block:clamp(52px,4.4vw,68px) clamp(72px,6vw,96px)}
.ct-ensuite-in{max-width:800px;margin:0 auto}
.ct-ensuite-t{font:800 var(--t-bloc)/1.15 var(--f-titre);letter-spacing:-.012em;color:var(--encre)}
/* le titre sur l'axe central de la page, comme l'en-tête, le formulaire et « Venir nous voir » ; les trois étapes
   gardent leur texte à gauche, dans leur colonne (audit des axes du 07/10, C1) */
@media (min-width:1024px){.ct-ensuite-t{text-align:center}}
.ct-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:24px 0 0;padding:0;list-style:none}
.ct-etapes li{padding-top:18px;border-top:1px solid var(--bord-fort);position:relative}
/* le repère du lettrage, posé sur le filet de chaque étape */
.ct-etapes li::before{content:"";position:absolute;top:-6px;left:2px;width:16px;height:10px;background:var(--rouge);transform:skewX(-22deg)}
.ct-num{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge)}
.ct-etapes h3{margin-top:12px;font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em;color:var(--encre)}
.ct-etapes h3 + p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted)}


/* =========================================================================================
   4 · VENIR NOUS VOIR — sur l'axe central de la page, comme ce qui précède : le titre au centre,
   trois blocs égaux dans une boîte blanche (le dessin des trois arguments de l'accueil : un filet
   entre eux, un trait rouge en tête de chacun), puis la carte du trajet dans toute la largeur.
   La grille 5/7 de pages-b4.css (§ 8) est remplacée ; ses réglages tablette et téléphone de la fiche
   et des horaires (.b4-venir, § 13) restent valables.
   ========================================================================================= */
.b4-contact #venir{border-top:1px solid var(--bord)}
.b4-contact .b4-venir{display:block}
.ct-venir-tete{display:flex;flex-direction:column;align-items:center;text-align:center}
/* le surtitre centré : son tiret de part et d'autre */
.ct-venir-tete .sur{justify-content:center}
.ct-venir-tete .sur::after{content:"";width:28px;height:2px;background:currentColor}

.ct-venir-blocs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,3.2vw,48px);
  background:var(--blanc);border-radius:var(--r);box-shadow:var(--ombre-boite)}
.ct-venir-bloc{position:relative;min-width:0;padding:34px clamp(26px,2.6vw,40px) 36px}
.ct-venir-bloc + .ct-venir-bloc{border-left:1px solid var(--bord)}
.ct-venir-bloc::before{content:"";position:absolute;top:0;left:clamp(26px,2.6vw,40px);width:28px;height:3px;background:var(--rouge)}
/* les trois têtes de bloc — « Locamat », « Nous joindre directement », « Horaires » — ont le même dessin */
.ct-venir .b4-st{margin:0 0 14px}
.ct-venir .b4-adresse{margin-top:0;font-size:var(--t-texte);line-height:1.65}
.ct-venir .b4-adresse b{margin-bottom:14px;font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.ct-venir-bloc .pg-gestes{margin-top:24px;gap:14px 24px}
/* la fiche « Nous joindre directement » : à plat dans son bloc, le libellé puis la valeur */
.ct-venir .pg-fiche-cadre{padding:0;background:none;border:0;border-radius:0}
.ct-venir .pg-fiche > div{grid-template-columns:auto minmax(0,1fr);gap:4px 18px}
.ct-venir .pg-fiche > div:first-child{padding-top:4px}
.ct-venir .pg-fiche a[href^="mailto"]{white-space:nowrap}
/* les horaires : la semaine, puis le week-end */
.ct-venir .pg-horaires{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:0;padding-top:4px;border-top:0}
.ct-venir .pg-horaires dd{text-wrap:balance}
/* la carte : toute la largeur du conteneur, sous les trois blocs. Au moins 610 px de haut : en dessous, le cadrage
   d'itineraire.js pose « Direction Campomoro » sous l'étiquette de l'agence (mesuré à 1024 et 1280 avec 540 et 563 px) */
.ct-venir .pg-itin{margin-top:clamp(28px,2.6vw,40px);min-height:clamp(610px,44vw,700px)}


/* ---------- 1024 → 1180 : on resserre, sans rien tasser ---------- */
@media (max-width:1180px){
  .b4-contact .bandeau .devis{padding:40px 40px 34px}
  .ct-etapes{gap:24px}
  /* trois blocs plus étroits : la fiche passe en libellé au-dessus de la valeur (l'e-mail ne se coupe pas) */
  .ct-venir .pg-fiche > div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ---------- tablette et téléphone (sous 1024 px) : les trois blocs l'un sous l'autre ---------- */
@media (max-width:1023px){
  .ct-venir-blocs{grid-template-columns:minmax(0,1fr)}
  .ct-venir-bloc + .ct-venir-bloc{border-left:0;border-top:1px solid var(--bord)}
  .ct-venir .pg-itin{min-height:540px}
}


/* =========================================================================================
   5 · TÉLÉPHONE (sous 768 px ; l'ordinateur et la tablette n'en voient rien). _GABARITS.md § 7.
   Le formulaire reste le sujet : l'en-tête se resserre pour que la carte monte, les numéros restent
   en grand et l'un sous l'autre, la carte prend le rembourrage du formulaire devis du socle.
   ========================================================================================= */
@media (max-width:767px){
  .b4-contact{--ct-cheval:160px}
  .ct-scene{padding:10px 0 calc(var(--ct-cheval) + 28px)}
  .ct-tete{margin-top:18px}
  .ct-chapo{margin-top:14px;font-size:16px}
  .ct-tels{flex-direction:column;align-items:center;row-gap:14px;margin-top:24px}
  .ct-tels a{gap:8px;padding:4px 0}
  .ct-tels a + a{border-left:0}
  .ct-heures{margin-top:16px;text-wrap:balance}

  .b4-contact .bandeau .devis{padding:26px 20px 24px}
  .b4-contact .devis-grille{gap:16px;margin-top:20px}

  /* ce qui se passe ensuite : les trois étapes l'une sous l'autre */
  .ct-ensuite{padding-block:48px 64px}
  .ct-etapes{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:22px}

  /* venir nous voir : les blocs prennent le rembourrage de la carte du formulaire, la carte 420 px */
  .ct-venir-blocs{margin-top:28px}
  .ct-venir-bloc{padding:26px 20px 28px}
  .ct-venir-bloc::before{left:20px}
  .ct-venir .pg-itin{margin-top:24px;min-height:420px}
}