/*
 * contact.css : page « Contact » (maquette 32, 18 octobre), chargée sur cette page seulement.
 * Haut de page blanc (fil d'Ariane, titre, phrase, formulaire dans une carte à liseré, colonne de droite collante), cabinets (crème), questions (blanc), bilan offert.
 * Les cartes de cabinet, le bloc de questions et le bilan sont ceux de leurs feuilles ; le formulaire est celui de formulaire.css. Mobile d'abord (390 px), puis paliers à 640 et 960 px.
 */

/* ---------- Haut de page : titre, phrase, boutons de téléphone (mobile), carte du formulaire ---------- */
.contact-haut{padding-block:16px 28px;background:var(--blanc)}
.contact-haut__grille{margin-top:10px}
.contact-haut__trait{display:none}
.contact-haut__titre{margin:0;font-family:var(--police-titre);font-weight:700;font-size:32px;line-height:38px;color:var(--vert-fonce)}
.contact-haut__texte{margin:10px 0 14px;max-width:640px;font-size:16px;line-height:26px;color:var(--texte-courant)}
.contact-haut__lateral{margin-top:16px}

/* Deux boutons de téléphone (mobile seulement) */
.boutons-telephone{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}
.boutons-telephone__lien{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:4px 6px;border:1.5px solid var(--vert);border-radius:12px;color:var(--vert-fonce);line-height:18px}
.boutons-telephone__nom{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vert-titre)}
.boutons-telephone__numero{font-size:16px;font-weight:600;white-space:nowrap}

/* Carte du formulaire : conteneur à liseré (l'intérieur est celui du formulaire unique) */
.contact-carte .formulaire--carte{gap:22px;padding:22px 18px;border:1.5px solid var(--filet);border-radius:18px;background:var(--blanc)}

/* ---------- Colonne de droite : « Vous préférez appeler ? » ---------- */
.carte-appeler{display:flex;flex-direction:column;padding:22px 20px;border-radius:18px;background:var(--creme)}
.carte-appeler__titre{margin:0;font-family:var(--police-titre);font-weight:700;font-size:22px;line-height:30px;color:var(--vert-fonce)}
.carte-appeler__ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--filet);color:var(--encre)}
.carte-appeler__texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.carte-appeler__cabinet{font-size:12px;font-weight:600;letter-spacing:.16em;line-height:normal;text-transform:uppercase;color:var(--vert-titre)}
.carte-appeler__numero{font-family:var(--police-titre);font-weight:700;font-size:22px;line-height:30px;white-space:nowrap;color:var(--encre)}
.carte-appeler__rond{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--vert);color:var(--blanc)}
.carte-appeler__horaires{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:15px;line-height:22px;color:var(--texte-courant)}
.carte-appeler__horloge{display:flex;flex:none;color:var(--vert-titre)}
.carte-appeler__urgent{margin:18px 0 0;padding:14px 16px;border-radius:12px;background:var(--blanc);font-size:14px;line-height:22px;color:var(--texte-courant)}
.carte-appeler__urgent strong{font-weight:600;color:var(--vert-fonce)}
.carte-appeler__premiere{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--filet);font-size:15px;line-height:24px;color:var(--texte-courant)}
.carte-appeler__lien{position:relative;font-weight:600;color:var(--vert-fonce);text-decoration:underline;text-underline-offset:4px}
.carte-appeler__lien::after{content:"";position:absolute;inset:-12px -4px}

@media (min-width:640px){
	.contact-haut__titre{font-size:38px;line-height:46px}
}
@media (min-width:960px){
	.contact-haut{padding-block:24px 64px}
	.contact-haut__grille{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,25vw + 60px,380px);gap:48px;margin-top:28px}
	.contact-haut__principal{display:flex;flex-direction:column}
	.contact-haut__trait{display:block;width:44px;height:2px;border-radius:1px;background:var(--vert-lisere)}
	.contact-haut__titre{margin-top:16px;font-size:44px;line-height:52px}
	.contact-haut__texte{margin:12px 0 26px;font-size:17px;line-height:28px}
	.boutons-telephone{display:none}
	.contact-carte .formulaire--carte{padding:32px 36px}
	/* Colonne collante : elle commence à hauteur de la phrase et suit la lecture du formulaire. */
	.contact-haut__lateral{align-self:stretch;margin-top:0;padding-top:92px}
	.carte-appeler{position:sticky;top:24px;padding:26px 26px 24px}
	.carte-appeler__titre,.carte-appeler__numero{font-size:24px}
}

/* ---------- Cabinets : fond crème, cartes blanches (composant des cabinets) ---------- */
.contact-cabinets{padding-block:30px;background:var(--creme)}
@media (min-width:960px){
	.contact-cabinets{padding-block:64px}
}

/* ---------- Bilan offert : sur mobile, dans la suite blanche des questions ; sur ordinateur, sur le fond de la page (crème), après les questions blanches ---------- */
@media (max-width:959px){
	.bilan-page.bilan-page--contact{padding-block:12px 32px;background:var(--blanc)}
}

/* ---------- Questions : titre sur une ligne sur mobile ---------- */
@media (max-width:959px){
	.contact-questions .titre-section{flex-wrap:nowrap}
	.contact-questions .titre-section__titre{font-size:26px;line-height:33px;color:var(--vert-fonce)}
}
@media (min-width:1280px){
	.contact-questions .bloc-questions__grille{grid-template-columns:360px minmax(0,1fr)}
}

/* ---------- Choix du formulaire : cartes à bouton rond (maquette 21, remplacé par la maquette 33 dans une mission suivante) ---------- */
.formulaire--contact .choix--cartes{gap:10px}
.formulaire--contact .carte-choix{min-height:48px;padding:10px 16px;border-radius:10px}
.formulaire--contact .carte-choix__fond{border-color:var(--bord-choix)}
.formulaire--contact .choix__saisie:checked ~ .carte-choix__fond{border-width:2px;border-color:var(--vert);background:var(--vert-clair)}
.formulaire--contact .carte-choix__repere{width:18px;height:18px;border-width:1.5px}
.formulaire--contact .carte-choix__repere .icone{display:none}
.formulaire--contact .choix__saisie:checked ~ .carte-choix__repere{border-width:5px;border-color:var(--vert);background:var(--blanc)}
.formulaire--contact .carte-choix__nom{font-size:15px;font-weight:400;line-height:normal;color:var(--encre)}
.formulaire--contact .choix__saisie:checked ~ .carte-choix__texte .carte-choix__nom{font-weight:600;color:var(--vert-fonce)}
.formulaire--contact .carte-choix__detail{display:none}
.formulaire--contact .pour-disponibilites .champ__saisie--courte{height:54px;padding-block:14px}
.formulaire--contact .champ__saisie--zone:not(.champ__saisie--courte){height:120px}