/* =========================================================================================
   PAGE CONTACT · « LE FORMULAIRE D'ABORD » (retenu par Andrea le 18/10/2026, parmi trois propositions centrées :
   « je ne trouve pas le truc hyper lisible avec cette photo de fond… mieux mettre en avant la demande de devis »).
   Écrite pour le site, pas une maquette (une « origine » dans banc/empreintes.json). Chargée par la seule page Contact,
   après contact.css : l'en-tête photo de contact.css (§ 1, .ct-scene) ne sert plus, son formulaire à cheval (§ 2) est
   remplacé ici ; « Ce qui se passe ensuite » et « Venir nous voir » (§ 3 et 4) restent ceux de contact.css.
   Aucune couleur ni police nouvelle (le rouge, le charbon de la barre d'infos et du pied, le blanc). Rien de lié au
   défilement : entrée au chargement (data-entree) ; le fondu .apparait du formulaire est celui du socle.
   1 · la carte : son en-tête rouge (le titre, la promesse de rappel, l'accroche) et le formulaire blanc collé dessous,
       une seule carte au centre, en tête de page. En-tête passé du noir au rouge le 18/10/2026 (Andrea : « En rouge,
       ça peut être ? ») : les règles du bandeau devis rouge du socle (style.css) — titre et promesse en blanc, accroche
       en blanc à 92 % (4,78:1 sur le rouge, AA), sélection et cadre du clavier en blanc ; le petit biais passe en
       blanc (Andrea, 18/10 : « l'apostrophe en blanc » ; en rouge, il disparaissait)
   2 · « Vous préférez appeler ? » : les deux numéros en option secondaire, sous la carte
   ========================================================================================= */
.b4-contact{--ct-carte:880px}

/* 1 · la carte */
.ct-haut{padding-top:22px}
.ct-carte-tete{position:relative;max-width:var(--ct-carte);margin:clamp(26px,2.4vw,36px) auto 0;
  padding:clamp(40px,3.4vw,52px) clamp(28px,4.4vw,64px) clamp(34px,2.8vw,42px);
  background:var(--rouge);color:#fff;border-radius:var(--r) var(--r) 0 0;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.ct-carte-tete .biais{width:18px;height:12px;margin-bottom:20px;background:#fff}
.ct-carte-tete h1{font-weight:800;font-size:var(--t-h1-page);line-height:1.03;letter-spacing:-.022em;color:#fff}
.ct-promesse{margin-top:16px;font:700 clamp(19px,.4vw + 14px,21px)/1.3 var(--f-titre);letter-spacing:-.005em;color:#fff;text-wrap:balance}
.ct-accroche{margin-top:12px;max-width:54ch;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.92);text-wrap:balance}
.ct-carte-tete ::selection{background:rgba(255,255,255,.28);color:#fff}
/* un lien venu du texte (CMS) et le cadre du clavier : en blanc, lisibles sur le rouge */
.ct-carte-tete a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ct-carte-tete :focus-visible{outline-color:#fff}

/* le formulaire : le corps blanc de la carte (le bandeau devis, sans son rouge ni son texte : contact.css § 2) */
.b4-contact .bandeau{margin-top:0;padding-block:0}
.b4-contact .bandeau .devis{max-width:var(--ct-carte);padding:40px clamp(28px,4.4vw,64px) 40px;border-radius:0 0 var(--r) var(--r);
  box-shadow:0 44px 80px -40px rgba(11,11,11,.42),0 1px 3px rgba(11,11,11,.08)}
/* la promesse est dans l'en-tête de la carte : le sous-titre du formulaire s'efface */
.b4-contact .devis-form > .devis-st{display:none}
.b4-contact .devis-grille{margin-top:0;gap:22px 24px}

/* 2 · « Vous préférez appeler ? » */
.ct-appeler{padding-top:clamp(40px,3.4vw,52px)}
.ct-appeler-in{display:flex;flex-direction:column;align-items:center;max-width:var(--ct-carte);margin:0 auto;text-align:center}
.ct-appeler-t{font:800 var(--t-court)/1.3 var(--f-titre);letter-spacing:-.005em;color:var(--encre)}
.ct-appeler-tels{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:18px}
.ct-appeler-tels a{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px;border:1.5px solid var(--encre);border-radius:var(--r);
  font:800 22px/1 var(--f-titre);letter-spacing:.005em;white-space:nowrap;color:var(--encre);
  transition:background-color .25s var(--ease-in-out),color .25s var(--ease-in-out)}
.ct-appeler-tels a span{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.ct-appeler-tels a:hover,.ct-appeler-tels a:focus-visible{background:var(--encre);color:#fff}
.ct-appeler-tels a:hover span,.ct-appeler-tels a:focus-visible span{color:rgba(255,255,255,.8)}
.ct-appeler-heures{margin-top:14px;font-size:var(--t-meta);line-height:1.5;color:var(--muted)}
/* au doigt : le même retour qu'au survol, à l'appui */
@media (hover:none) and (pointer:coarse){
  .ct-appeler-tels a:active{background:var(--encre);color:#fff}
  .ct-appeler-tels a:active span{color:rgba(255,255,255,.8)}
}

.b4-contact .ct-ensuite{padding-block:clamp(56px,4.6vw,72px) clamp(72px,6vw,96px)}

/* téléphone (sous 768 px) */
@media (max-width:767px){
  .ct-haut{padding-top:10px}
  .ct-carte-tete{margin-top:18px;padding:30px 20px 26px}
  .ct-carte-tete .biais{margin-bottom:16px}
  .ct-promesse{margin-top:12px;font-size:18px}
  .ct-accroche{font-size:15px}
  .b4-contact .bandeau .devis{padding:26px 20px 24px}
  .b4-contact .devis-grille{gap:16px}
  .ct-appeler{padding-top:36px}
  .ct-appeler-tels{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .ct-appeler-tels a{justify-content:center}
  .ct-appeler-heures{text-wrap:balance}
}