/**
 * 10 - Contact
 *
 * La page de contact reprend la grammaire du site : bandeau photo,
 * colonne de coordonnees en filets plutot qu en cartes, formulaire
 * habille aux jetons du systeme. Les champs proviennent de l extension
 * de formulaires : on ne redefinit que leur apparence, jamais leur
 * comportement, afin que l envoi reste celui de l extension.
 */

/* ==================================================================
   BANDEAU DE CONTACT
   ================================================================== */

/* Le titre tient en deux lignes a toutes les largeurs : sa taille est
   bornee par la largeur reellement disponible, la ligne la plus longue
   mesurant environ treize cadratins dans Archivo 800. */
.otb-bandeau__titre--duo {
	font-size: min(var(--otb-t-titre), calc((100vw - 2 * var(--otb-marge)) / 13));
	line-height: 0.98;
	overflow-wrap: normal;
	hyphens: none;
}

.otb-bandeau__titre--duo .otb-bandeau__or { color: var(--otb-or); }

/* ==================================================================
   COORDONNEES
   Aucun conteneur de carte : des filets horizontaux, comme le tableau
   de classement.
   ================================================================== */

.otb-coordonnees {
	border-top: 1px solid var(--otb-filet);
	margin-top: var(--otb-e-m);
}

.otb-coordonnees__ligne {
	display: grid;
	gap: 6px;
	padding: var(--otb-e-m) 0;
	border-bottom: 1px solid var(--otb-filet);
}

.otb-coordonnees__cle {
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--otb-gris);
}

.otb-coordonnees__valeur {
	margin: 0;
	font-size: var(--otb-t-normal);
	line-height: 1.6;
	color: var(--otb-blanc);
	font-style: normal;
}

.otb-coordonnees__valeur address { font-style: normal; line-height: 1.6; }

.otb-coordonnees__valeur a { color: var(--otb-or); }
.otb-coordonnees__valeur a:hover { color: var(--otb-or-clair); }

.otb-coordonnees__precision {
	display: block;
	margin-top: 4px;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--otb-gris);
}

/* ==================================================================
   FORMULAIRE
   ================================================================== */

.otb-formulaire { max-width: none; }

.otb-formulaire .otb-formulaire__titre {
	font-size: var(--otb-t-grand);
	text-transform: uppercase;
	margin-bottom: var(--otb-e-m);
}

.otb-formulaire .grunion-field-wrap { margin-bottom: var(--otb-e-m); }

.otb-formulaire .grunion-field-label,
.otb-formulaire .wp-block-jetpack-label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--otb-gris);
}

.otb-formulaire .grunion-label-required {
	margin-left: 8px;
	font-family: var(--otb-texte);
	font-weight: 400;
	font-size: 0.72rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--otb-or);
}

.otb-formulaire input[type="text"],
.otb-formulaire input[type="email"],
.otb-formulaire input[type="tel"],
.otb-formulaire input[type="url"],
.otb-formulaire textarea,
.otb-formulaire select {
	width: 100%;
	padding: 14px 16px;
	background: var(--otb-surface);
	border: 1px solid var(--otb-filet);
	border-radius: var(--otb-r-m);
	color: var(--otb-blanc);
	font-family: var(--otb-texte);
	font-size: var(--otb-t-normal);
	line-height: 1.5;
	transition:
		border-color var(--otb-vite) var(--otb-courbe),
		background-color var(--otb-vite) var(--otb-courbe);
}

.otb-formulaire textarea {
	min-height: 170px;
	resize: vertical;
}

.otb-formulaire input::placeholder,
.otb-formulaire textarea::placeholder { color: var(--otb-gris); opacity: 1; }

.otb-formulaire input:hover,
.otb-formulaire textarea:hover,
.otb-formulaire select:hover { border-color: var(--otb-filet-clair); }

.otb-formulaire input:focus-visible,
.otb-formulaire textarea:focus-visible,
.otb-formulaire select:focus-visible {
	border-color: var(--otb-or);
	background: var(--otb-surface-haute);
	outline: 2px solid var(--otb-or);
	outline-offset: 2px;
}

/* Liste deroulante : la fleche native est remplacee par un chevron
   trace en CSS, pour que le champ ait la meme peau que les autres. */
.otb-formulaire .contact-form__select-wrapper {
	position: relative;
	border: 0;
	padding: 0;
	background: none;
}

.otb-formulaire select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 46px;
	cursor: pointer;
}

.otb-formulaire .contact-form__select-wrapper::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -7px;
	border-right: 2px solid var(--otb-or);
	border-bottom: 2px solid var(--otb-or);
	transform: rotate(45deg);
	pointer-events: none;
}

.otb-formulaire select option {
	background: var(--otb-surface);
	color: var(--otb-blanc);
}

/* Consentement : une case a cocher lisible, alignee sur le texte. */
.otb-formulaire .grunion-field-consent-wrap label,
.otb-formulaire .wp-block-jetpack-field-consent label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--otb-texte);
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.55;
	text-transform: none;
	letter-spacing: 0;
	color: var(--otb-gris);
}

.otb-formulaire input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--otb-or);
	cursor: pointer;
}

/* Message d erreur en ligne, jamais une alerte modale. */
.otb-formulaire .contact-form__input-error {
	margin-top: 8px;
	font-size: 0.84rem;
	color: var(--otb-defaite);
}

.otb-formulaire .contact-form__input-error svg { fill: currentColor; }

/* Bouton d envoi : exactement le bouton primaire du site. */
.otb-formulaire button[type="submit"],
.otb-formulaire .wp-block-button__link,
.otb-formulaire .contact-form button.pushbutton-wide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 30px;
	background: var(--otb-or);
	border: 1px solid transparent;
	border-radius: var(--otb-r-pill);
	color: var(--otb-nuit);
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: var(--otb-t-petit);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--otb-vite) var(--otb-courbe), transform var(--otb-vite) var(--otb-courbe);
}

.otb-formulaire button[type="submit"]:hover,
.otb-formulaire .wp-block-button__link:hover,
.otb-formulaire button[type="submit"]:focus-visible {
	background: var(--otb-or-clair);
	color: var(--otb-nuit);
}

.otb-formulaire button[type="submit"]:active { transform: translateY(1px); }

/* Confirmation d envoi. */
.otb-formulaire .contact-form-submission {
	padding: var(--otb-e-l);
	background: var(--otb-surface);
	border: 1px solid var(--otb-filet);
	border-radius: var(--otb-r-m);
}

.otb-formulaire .contact-form-submission h4 {
	font-size: var(--otb-t-moyen);
	margin-bottom: var(--otb-e-s);
}

.otb-formulaire .jetpack_forms_contact-form-custom-success-message { color: var(--otb-gris); }

/* ==================================================================
   LIENS UTILES
   Une liste en filets, pas une rangee de cartes identiques.
   ================================================================== */

.otb-liens { border-top: 1px solid var(--otb-filet); }

.otb-lien {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--otb-e-m);
	padding: var(--otb-e-m) 0;
	border-bottom: 1px solid var(--otb-filet);
	color: var(--otb-blanc);
	transition: color var(--otb-vite) var(--otb-courbe), padding-left var(--otb-vite) var(--otb-courbe);
}

.otb-lien:hover,
.otb-lien:focus-visible { color: var(--otb-or); padding-left: 8px; }

.otb-lien__intitule {
	font-family: var(--otb-titre);
	font-weight: 700;
	font-size: var(--otb-t-moyen);
	line-height: 1.2;
}

.otb-lien__note {
	flex: 0 1 auto;
	font-family: var(--otb-texte);
	font-size: 0.86rem;
	color: var(--otb-gris);
	text-align: right;
}

@media (max-width: 560px) {
	.otb-lien { flex-direction: column; gap: 4px; }
	.otb-lien__note { text-align: left; }
}