/**
 * Page Contact - ce qui n'appartient qu'à elle.
 *
 * Le design system (socle.css) et ce que les pages de rubrique partagent
 * (pages.css) sont chargés avant : la bande photo, la F.A.Q. et les tuiles
 * viennent de là. On trouve ici les quatre moyens de contact, le bloc des
 * réponses immédiates avec sa recherche, et la colonne du formulaire.
 */

/* ---------- le titre et le statut ---------- */
.exo2-contact-hero { min-height: 0; }
/* Deux précautions pour que le titre s'aligne sur les cartes du dessous. Le
   hero est un conteneur flex : sans « width: 100% », son wrap se réduit à son
   contenu, puis son « margin: 0 auto » le centre. Et la largeur de lecture se
   pose sur le titre et le chapeau, pas sur le wrap, qui la centrerait aussi. */
.exo2-contact-tete { position: relative; z-index: 2; width: 100%; padding-top: 190px; padding-bottom: 60px; }
.exo2-contact-tete h1,
.exo2-contact-tete .exo2-hhero-sub { max-width: 780px; }
.exo2-contact-tete .exo2-hhero-sub { margin-top: 16px; }

/* Le statut : une pastille et une phrase, pas une promesse. */
.exo2-contact-statut {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin: 24px 0 0; font-size: 14.5px; color: var(--exo2-texte);
}
.exo2-contact-pastille {
	width: 9px; height: 9px; border-radius: 50%; flex: none;
	background: var(--exo2-corail); box-shadow: 0 0 0 4px rgba(245, 109, 82, .22);
}
.exo2 .exo2-contact-statut a { color: var(--exo2-corail); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- les quatre moyens de joindre ---------- */
.exo2-contact-moyens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.exo2-contact-moyen { padding: 24px 26px 26px; display: block; transition: box-shadow .2s, transform .2s; }
.exo2-contact-moyen:hover { transform: translateY(-2px); box-shadow: var(--exo2-ombre); }
.exo2-contact-moyen b {
	display: block; margin: 10px 0 8px; color: #fff;
	font: italic 700 21px var(--exo2-police-titre); letter-spacing: .5px;
	/* Une adresse e-mail ou un numéro ne doivent jamais déborder de leur carte. */
	overflow-wrap: anywhere;
}
.exo2-contact-moyen p { margin: 0; color: var(--exo2-meta); font-size: 14px; line-height: 1.55; }

/* ---------- réseaux et avis ---------- */
.exo2-contact-social { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 42px; padding-top: 34px; border-top: 1px solid var(--exo2-ligne); }
.exo2-contact-social > div > p { margin: 8px 0 18px; color: var(--exo2-meta); font-size: 15px; line-height: 1.6; max-width: 520px; }
.exo2 .exo2-contact-liens { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.exo2 .exo2-contact-liens a {
	display: block; padding: 13px 16px; box-shadow: var(--exo2-liseret);
	background: rgba(255, 255, 255, .03); transition: background-color .2s;
}
.exo2 .exo2-contact-liens a:hover { background: rgba(255, 255, 255, .07); }
.exo2-contact-liens b { display: block; color: #fff; font: 700 14px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .6px; }
.exo2-contact-liens span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--exo2-meta); }

/*
 * Le bloc des avis.
 *
 * C'est la page où l'on demande un avis, et personne n'y pense si on ne le
 * demande pas : ses cartes portent donc les étoiles, la note réelle de la
 * plateforme, et l'action écrite en toutes lettres.
 */
.exo2 .exo2-contact-avis .exo2-contact-liens a { padding: 15px 18px; box-shadow: inset 0 0 0 1px rgba(245, 109, 82, .28); background: rgba(245, 109, 82, .05); }
.exo2 .exo2-contact-avis .exo2-contact-liens a:hover { background: rgba(245, 109, 82, .12); }
.exo2 .exo2-contact-avis .exo2-stars { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: 1px; color: var(--exo2-corail); }
.exo2-contact-avis-action {
	margin-top: 8px; color: var(--exo2-corail);
	font: 600 12px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
}

/*
 * Les réponses immédiates.
 *
 * C'est le bloc qui doit être vu : sa recherche est large, ses réponses sont
 * complètes, et le renvoi vers le formulaire n'arrive qu'après.
 */
.exo2-contact-chercher { display: grid; gap: 8px; max-width: 620px; margin-bottom: 26px; }
.exo2-contact-chercher input {
	width: 100%; height: 50px; padding: 0 16px; border-radius: 0; box-shadow: none;
	background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .22);
	font: 16px var(--exo2-police);
}
.exo2-contact-chercher input::placeholder { color: rgba(255, 255, 255, .35); }
.exo2-contact-chercher input:focus-visible { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }
.exo2-contact-compteur { font-size: 13px; color: var(--exo2-meta); }

.exo2 .exo2-contact-reponses details[hidden] { display: none; }
.exo2-contact-reponses .exo2-more { margin-top: 12px; }
.exo2-contact-vide { margin-top: 20px; }

/* « Tu n'as pas trouvé ? », en bandeau sous les réponses. */
.exo2-contact-pastrouve {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	margin-top: 26px; padding: 22px 26px; background: rgba(255, 255, 255, .04); box-shadow: var(--exo2-liseret);
}
.exo2-contact-pastrouve b { display: block; color: #fff; font: 700 17px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .3px; }
.exo2-contact-pastrouve p { margin: 6px 0 0; color: var(--exo2-meta); font-size: 15px; max-width: 640px; }

/* ---------- le formulaire et sa colonne ---------- */
.exo2-contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.exo2-contact-form-intro { margin: 14px 0 26px; color: var(--exo2-meta); font-size: 16px; line-height: 1.65; }

.exo2-contact-sujets-titre { margin-bottom: 10px; }
.exo2-contact-sujets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.exo2-contact-sujet {
	background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
	color: var(--exo2-texte); cursor: pointer; padding: 9px 14px;
	font: 600 13px var(--exo2-police); letter-spacing: .3px;
	transition: border-color .15s, background-color .15s, color .15s;
}
.exo2-contact-sujet:hover { border-color: #fff; }
.exo2-contact-sujet.exo2-on { background: var(--exo2-accent); border-color: transparent; color: #fff; }
.exo2-contact-aide {
	margin: 0 0 24px; padding: 14px 16px; font-size: 14.5px; line-height: 1.6;
	color: var(--exo2-texte); background: rgba(245, 109, 82, .08);
	border-left: 2px solid var(--exo2-corail);
}
.exo2-contact-delai { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--exo2-meta); }

/* Le portrait de celui qui répond, et l'adresse. */
.exo2-contact-cote { display: grid; gap: 20px; }
.exo2-contact-qui { padding: 22px 24px 24px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; }
.exo2-contact-qui figure { margin: 0; }
.exo2-contact-qui img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; display: block; }
.exo2-contact-qui b { display: block; margin: 6px 0 6px; color: #fff; font: italic 700 19px var(--exo2-police-titre); letter-spacing: .5px; }
.exo2-contact-qui p { margin: 0; color: var(--exo2-meta); font-size: 13.5px; line-height: 1.55; }

.exo2-contact-ou { padding: 24px 26px 26px; }
.exo2-contact-ou address { font-style: normal; margin: 12px 0 0; display: grid; gap: 2px; }
.exo2-contact-ou address b { color: #fff; font: 700 16px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.exo2-contact-ou address span { font-size: 15px; color: var(--exo2-texte); }
.exo2-contact-precision { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--exo2-meta); }

/* La carte : un cadre vide tant que le visiteur ne l'a pas demandée. */
.exo2-contact-carte {
	margin-top: 20px; padding: 18px; text-align: center;
	background: rgba(255, 255, 255, .03); box-shadow: var(--exo2-liseret);
}
.exo2-contact-carte p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--exo2-meta); }
.exo2-contact-carte-chargee { padding: 0; }
.exo2-contact-carte iframe { display: block; width: 100%; height: 260px; border: 0; }
.exo2-contact-ou .exo2-more { margin-top: 16px; }

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1200px) {
	.exo2-contact-moyens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-contact-grille { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.exo2-contact-cote { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 900px) {
	.exo2-contact-social { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-contact-tete { padding-top: 130px; padding-bottom: 40px; }
	/* Sur un téléphone, l'appel est l'action la plus utile : les moyens
	   s'empilent dans l'ordre du gabarit, téléphone en premier. */
	.exo2-contact-moyens { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.exo2-contact-moyen { padding: 18px 20px 20px; }
	.exo2-contact-cote { grid-template-columns: minmax(0, 1fr); }
	.exo2-contact-pastrouve { display: block; }
	.exo2-contact-pastrouve .exo2-btn { margin-top: 16px; width: 100%; }
	.exo2-contact-qui { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.exo2-contact-qui img { width: 64px; height: 64px; }
}

/* =======================================================================
   Le formulaire de contact, habillé au design system
   =======================================================================
   Son balisage appartient à ConvertForms : on remplace son apparence, pas sa
   structure. La variable de fond est reprise comme sur l'Exo'base, parce que
   le composant l'écrit sous un sélecteur d'identifiant. */
.exo2-contact-form .convertforms {
	margin: 0;
	--input-background-color: #0d0d0d !important;
	--input-color: #fff;
	--input-border-color: rgba(255, 255, 255, .22);
	--input-border-radius: 0;
	--input-placeholder-color: rgba(255, 255, 255, .35);
	--label-color: var(--exo2-meta);
}
.exo2-contact-form .convertforms .cf-label,
.exo2-contact-form .convertforms .cf-control-label {
	font: 600 11px var(--exo2-police); letter-spacing: 1px; text-transform: uppercase;
	color: var(--exo2-meta); margin-bottom: 7px; display: block;
}
.exo2-contact-form .convertforms .cf-required-label { color: var(--exo2-corail); }
.exo2-contact-form .convertforms .cf-control-group { margin-bottom: 16px; }
.exo2-contact-form .convertforms .cf-input,
.exo2-contact-form .convertforms input[type="text"],
.exo2-contact-form .convertforms input[type="email"],
.exo2-contact-form .convertforms input[type="tel"],
.exo2-contact-form .convertforms select,
.exo2-contact-form .convertforms textarea {
	width: 100%; height: 46px; padding: 0 14px; border-radius: 0; box-shadow: none;
	background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .22);
	font: 15px var(--exo2-police);
}
.exo2-contact-form .convertforms textarea { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.55; }
.exo2-contact-form .convertforms .cf-input::placeholder,
.exo2-contact-form .convertforms textarea::placeholder { color: rgba(255, 255, 255, .35); }
.exo2-contact-form .convertforms .cf-input:focus,
.exo2-contact-form .convertforms .cf-input:focus-visible {
	outline: 2px solid var(--exo2-corail); outline-offset: 2px;
	border-color: rgba(255, 255, 255, .35); background: #0d0d0d; color: #fff;
}
.exo2-contact-form .convertforms button[type="submit"],
.exo2-contact-form .convertforms input[type="submit"],
.exo2-contact-form .convertforms .cf-submit {
	background: var(--exo2-accent) var(--exo2-degrade); color: #fff;
	border: 0; border-radius: 0; box-shadow: var(--exo2-ombre);
	font: italic 700 14px/50px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	padding: 0 34px 2px; cursor: pointer; width: 100%; height: auto;
}
.exo2-contact-form .convertforms button[type="submit"]:hover,
.exo2-contact-form .convertforms input[type="submit"]:hover { background-image: var(--exo2-degrade-survol); }
.exo2-contact-form .convertforms .cf-terms-text,
.exo2-contact-form .convertforms .cf-terms-text p,
.exo2-contact-form .convertforms .cf-recaptcha-branding { font-size: 12px; line-height: 1.55; color: var(--exo2-meta); }
.exo2 .exo2-contact-form .convertforms a { color: var(--exo2-corail); }