/* ==========================================================================
   === Page « Contact » ===
   --------------------------------------------------------------------------
   Cette page n'est PAS inscrite dans bmf_is_job_page_template() : le menu
   OceanWP par défaut est blanc dès le chargement (comme sur Projets).

   Réutilisations :
     - Le HERO clone le markup .projets-hero* de archive-projet.php pour
       hériter du fond beige #F2EDE8, du breadcrumb (picto home + flèche
       grise), du titre Self Modern 40 px, du séparateur vertical 1×80 px
       #5C7D8F et de la description Inter Light 18 px. Aucun override n'est
       nécessaire — on charge projets.css en dépendance.
     - Le bouton flottant « Haut de page » réutilise le composant
       .haut-de-page#bmf-haut-de-page (sélecteurs ré-écrits ci-dessous pour
       que le bouton fonctionne même si projets.css n'est pas chargé sur
       cette page).

   Section propre : 2 colonnes formulaire / encarts, encarts couleur
   #EFF2F4 avec liseré gauche #5C7D8F (3 px) + coins droits arrondis (20 px).
   Override complet des styles par défaut de Contact Form 7 pour matcher la
   charte (labels Inter Regular 16, inputs border-bottom 1px #1D1D1B,
   textarea border 1px, case RGPD calquée sur les filtres Projets, bouton
   submit avec flèche rouge à droite via background-image).
   ========================================================================== */

:root {
	--bmf-ct-ink: #1d1d1b;
	--bmf-ct-white: #ffffff;
	--bmf-ct-beige: #f2ede8;             /* Fond de l'intro (identique Projets). */
	--bmf-ct-blue: #5c7d8f;               /* Liserés gauche + séparateur intro. */
	--bmf-ct-card-bg: #eff2f4;            /* Fond des deux encarts. */
	--bmf-ct-placeholder: #767676;        /* Placeholders du formulaire. */
	--bmf-ct-bar-width: 4px;              /* Épaisseur du liseré gauche (+1 px vs initial). */
	--bmf-ct-radius-corner: 20px;
	--bmf-ct-card-padding-y: 48px;        /* Padding vertical des encarts. */
	--bmf-ct-card-padding-x: 64px;        /* Padding horizontal des encarts (plus large que vertical, cf. maquette). */
	--bmf-ct-content-max: var(--bmf-home-content-max, 1280px);
	--bmf-ct-error: #c0392b;
	--bmf-ct-success: #2c8f4c;
	--bmf-ct-serif: "Self Modern", "Cormorant Garamond", Georgia, serif;
	--bmf-ct-sans: "Inter", system-ui, sans-serif;
}

/* ==========================================================================
   Wrapper principal
   ========================================================================== */
.bmf-contact {
	color: var(--bmf-ct-ink);
	font-family: var(--bmf-ct-sans);
	background: var(--bmf-ct-white);
}

/* Le hero clone .projets-hero* — overrides ciblés pour matcher la maquette
   Contact (séparateur moins haut, espace en bas du bandeau beige) sans
   toucher au comportement du hero sur l'archive Projets. */
.bmf-contact-hero.projets-hero {
	background: var(--bmf-ct-beige);
	padding: 20px 20px 40px;
}

.bmf-contact-hero .projets-hero__separator {
	height: 48px;
}

.bmf-contact-hero .projets-hero__row {
	align-items: center;
}

/* ==========================================================================
   Section 2 — 2 colonnes (formulaire / encarts)
   ========================================================================== */
.bmf-contact-main {
	padding: 64px 20px 80px;
	background: var(--bmf-ct-white);
}

.bmf-contact-main__inner {
	max-width: var(--bmf-ct-content-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.bmf-contact-form,
.bmf-contact-asides {
	min-width: 0;
}

/* Avertissement admin (CF7 absent / ID non renseigné) — non visible en front
   pour les visiteurs. */
.bmf-contact-form__warning {
	background: #fff8e5;
	border: 1px solid #f0c674;
	color: #6b5300;
	padding: 16px 20px;
	border-radius: 6px;
	font-family: var(--bmf-ct-sans);
	font-size: 14px;
	line-height: 1.5;
}

.bmf-contact-form__warning code {
	background: #fff;
	padding: 0 4px;
	border-radius: 3px;
	font-size: 13px;
}

/* ==========================================================================
   Formulaire — override Contact Form 7
   --------------------------------------------------------------------------
   CF7 génère un wrapper .wpcf7 qui contient .wpcf7-form. À l'intérieur, on
   prévoit ce balisage (cf. docs/contact-form-template.txt) :
     <p><label>Prénom et Nom <input …></label></p>
     <p><label>E-mail <input …></label></p>
     <p><label>Téléphone <em>(facultatif)</em> <input …></label></p>
     <p><label>Message <textarea …></textarea></label></p>
     <p>[acceptance] J'accepte… [/acceptance]</p>
     <p>[submit "ENVOYER MESSAGE"]</p>
   ========================================================================== */
.bmf-contact-form .wpcf7 {
	margin: 0;
	padding: 0;
}

.bmf-contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bmf-contact-form .wpcf7-form p {
	margin: 0;
}

.bmf-contact-form .wpcf7-form label {
	display: block;
	margin: 0;
	font-family: var(--bmf-ct-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: var(--bmf-ct-ink);
}

.bmf-contact-form .wpcf7-form label em {
	font-style: italic;
	font-weight: 400;
}

/* Inputs texte / email / tel : ligne fine en bas, fond transparent. */
.bmf-contact-form .wpcf7-form input[type="text"],
.bmf-contact-form .wpcf7-form input[type="email"],
.bmf-contact-form .wpcf7-form input[type="tel"] {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px 0;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bmf-ct-ink);
	border-radius: 0;
	outline: none;
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bmf-ct-ink);
	-webkit-appearance: none;
	appearance: none;
}

.bmf-contact-form .wpcf7-form input[type="text"]:focus,
.bmf-contact-form .wpcf7-form input[type="email"]:focus,
.bmf-contact-form .wpcf7-form input[type="tel"]:focus {
	border-bottom-color: var(--bmf-ct-blue);
	border-bottom-width: 2px;
	padding-bottom: 7px;             /* compense l'épaississement pour ne pas faire sauter le layout */
}

/* Textarea : bordure complète. */
.bmf-contact-form .wpcf7-form textarea {
	display: block;
	width: 100%;
	min-height: 160px;
	margin-top: 8px;
	padding: 12px;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid var(--bmf-ct-ink);
	border-radius: 0;
	outline: none;
	resize: vertical;
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bmf-ct-ink);
}

.bmf-contact-form .wpcf7-form textarea:focus {
	border-color: var(--bmf-ct-blue);
}

/* Placeholders — toutes plateformes. */
.bmf-contact-form .wpcf7-form input::placeholder,
.bmf-contact-form .wpcf7-form textarea::placeholder {
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bmf-ct-placeholder);
	opacity: 1;
}

.bmf-contact-form .wpcf7-form input::-webkit-input-placeholder,
.bmf-contact-form .wpcf7-form textarea::-webkit-input-placeholder {
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-style: italic;
	font-size: 14px;
	color: var(--bmf-ct-placeholder);
}

.bmf-contact-form .wpcf7-form input::-moz-placeholder,
.bmf-contact-form .wpcf7-form textarea::-moz-placeholder {
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-style: italic;
	font-size: 14px;
	color: var(--bmf-ct-placeholder);
	opacity: 1;
}

/* Case à cocher RGPD — calquée sur le design des filtres Projets.
   CF7 sortira typiquement :
     <span class="wpcf7-form-control-wrap" data-name="acceptance-rgpd">
       <span class="wpcf7-form-control wpcf7-acceptance">
         <span class="wpcf7-list-item first last">
           <label>
             <input type="checkbox" name="acceptance-rgpd" value="1" />
             <span class="wpcf7-list-item-label">J'accepte…</span>
           </label>
         </span>
       </span>
     </span>
*/
.bmf-contact-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.bmf-contact-form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bmf-ct-ink);
}

.bmf-contact-form .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 14px;
	height: 16px;
	margin: 2px 0 0;        /* alignement vertical sur la ligne de texte */
	padding: 0;
	border: 1.5px solid var(--bmf-ct-ink);
	background-color: #fff;
	background-image: none;
	border-radius: 2px;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
}

.bmf-contact-form .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]::before,
.bmf-contact-form .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]:checked::before {
	content: none;
	display: none;
}

.bmf-contact-form .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background-color: var(--bmf-ct-ink);
	border-radius: 1px;
}

.bmf-contact-form .wpcf7-acceptance .wpcf7-list-item-label {
	flex: 1 1 auto;
}

/* Bouton « ENVOYER MESSAGE » — flèche noire 9×15 à droite via background.
   On évite ::after (impossible sur <input>) : on pose la flèche directement
   en background du submit. La flèche est positionnée à 8 px du bord droit
   au repos et à 0 px au survol (déplacement de 8 px vers la droite SANS
   jamais sortir du bouton, donc pas de troncature). */
.bmf-contact-form .wpcf7-form input[type="submit"],
.bmf-contact-form .wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	padding: 6px 32px 6px 0;
	background-color: transparent;
	background-image: url("../../images/fleche-noire.png");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 9px 15px;
	border: 0;
	color: var(--bmf-ct-ink);
	font-family: var(--bmf-ct-sans);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-position 200ms ease, color 200ms ease;
}

.bmf-contact-form .wpcf7-form input[type="submit"]:hover,
.bmf-contact-form .wpcf7-form input[type="submit"]:focus,
.bmf-contact-form .wpcf7-form .wpcf7-submit:hover,
.bmf-contact-form .wpcf7-form .wpcf7-submit:focus {
	background-position: right 0 center;
	outline: none;
}

/* Pendant l'envoi CF7 désactive le bouton. On évite opacity (qui grise le
   texte ET la flèche) : on garde l'apparence intacte, on signale juste
   l'état via le curseur. */
.bmf-contact-form .wpcf7-form input[type="submit"]:disabled,
.bmf-contact-form .wpcf7-form .wpcf7-submit:disabled {
	cursor: not-allowed;
}

/* Spinner CF7 — petit ajustement vertical. */
.bmf-contact-form .wpcf7-spinner {
	vertical-align: middle;
	margin: 0 0 0 12px;
}

/* Messages d'erreur / succès CF7 (override du visuel par défaut). */
.bmf-contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--bmf-ct-error);
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-size: 13px;
	font-style: italic;
}

.bmf-contact-form .wpcf7-form input.wpcf7-not-valid,
.bmf-contact-form .wpcf7-form textarea.wpcf7-not-valid {
	border-color: var(--bmf-ct-error);
}

.bmf-contact-form .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	font-family: var(--bmf-ct-sans);
	font-size: 14px;
	line-height: 1.5;
}

.bmf-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.bmf-contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.bmf-contact-form .wpcf7 form.payment-required .wpcf7-response-output,
.bmf-contact-form .wpcf7 form.failed .wpcf7-response-output,
.bmf-contact-form .wpcf7 form.aborted .wpcf7-response-output {
	color: var(--bmf-ct-error);
	background: #fdecea;
	border-color: var(--bmf-ct-error);
}

.bmf-contact-form .wpcf7 form.sent .wpcf7-response-output {
	color: var(--bmf-ct-success);
	background: #ebf7ee;
	border-color: var(--bmf-ct-success);
}

/* ==========================================================================
   Section 2.2 — Encarts droite (« Nos adresses » + « Nos coordonnées »)
   ========================================================================== */
.bmf-contact-asides {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/*
 * Encarts contact : même couleur que le conteneur beige du hero au-dessus
 * (--bmf-ct-beige = #F2EDE8), pas de liseret bleu à gauche → l'encart se
 * lit comme la continuité visuelle du bloc hero.
 */
.bmf-contact-card {
	position: relative;
	background: var(--bmf-ct-beige);
	border-top-right-radius: var(--bmf-ct-radius-corner);
	/* Pas de border-bottom-right-radius : coin bas-droit carré, cf. maquette. */
	overflow: hidden;
}

.bmf-contact-card__inner {
	padding: var(--bmf-ct-card-padding-y) var(--bmf-ct-card-padding-x);
}

.bmf-contact-card__title {
	margin: 0 0 28px;
	font-family: var(--bmf-ct-serif);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--bmf-ct-ink);
}

.bmf-contact-card__title em {
	font-style: italic;
}

/* --- Encart « Nos adresses » : 3 colonnes côte à côte --- */
.bmf-contact-adresses__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.bmf-contact-adresses__item {
	margin: 0;
}

.bmf-contact-adresses__ville {
	margin: 0 0 8px;
	font-family: var(--bmf-ct-serif);
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.2;
	color: var(--bmf-ct-ink);
}

/* Lignes d'adresse : Inter Light 12 px #1D1D1B. */
.bmf-contact-adresses__line {
	margin: 0;
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bmf-ct-ink);
}

/* --- Encart « Nos coordonnées » --- */
.bmf-contact-coord__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Téléphone, e-mail et lien LinkedIn : Inter Light 12 px #1D1D1B. */
.bmf-contact-coord__item {
	margin: 0;
	font-family: var(--bmf-ct-sans);
	font-weight: 300;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bmf-ct-ink);
}

.bmf-contact-coord__link {
	color: var(--bmf-ct-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 180ms ease, color 180ms ease;
}

.bmf-contact-coord__link:hover,
.bmf-contact-coord__link:focus {
	color: var(--bmf-ct-blue);
	border-bottom-color: var(--bmf-ct-blue);
}

.bmf-contact-coord__item--linkedin {
	margin-top: 16px;
}

.bmf-contact-coord__link--linkedin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	border-bottom: 0;
}

.bmf-contact-coord__link--linkedin:hover,
.bmf-contact-coord__link--linkedin:focus {
	border-bottom: 0;
}

.bmf-contact-coord__arrow {
	display: inline-block;
	transition: transform 200ms ease;
	font-weight: 400;
	color: var(--bmf-ct-ink);
}

.bmf-contact-coord__link--linkedin:hover .bmf-contact-coord__arrow,
.bmf-contact-coord__link--linkedin:focus .bmf-contact-coord__arrow {
	transform: translateX(4px);
}

.bmf-contact-coord__link--linkedin .bmf-contact-coord__label {
	border-bottom: 1px solid transparent;
	transition: border-color 180ms ease;
}

.bmf-contact-coord__link--linkedin:hover .bmf-contact-coord__label,
.bmf-contact-coord__link--linkedin:focus .bmf-contact-coord__label {
	border-bottom-color: var(--bmf-ct-blue);
	color: var(--bmf-ct-blue);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
	.bmf-contact-main {
		padding: 48px 20px 64px;
	}

	.bmf-contact-main__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.bmf-contact-card__inner {
		padding: 40px 48px;
		padding-left: calc(48px + var(--bmf-ct-bar-width));
	}

	.bmf-contact-card__title {
		font-size: 32px;
		margin-bottom: 24px;
	}

	.bmf-contact-hero.projets-hero {
		padding: 20px 20px 32px;
	}
}

@media (max-width: 767px) {
	/* Évite le zoom automatique sur iOS (champs < 16px). */
	.bmf-contact-form .wpcf7-form input[type="text"],
	.bmf-contact-form .wpcf7-form input[type="email"],
	.bmf-contact-form .wpcf7-form input[type="tel"],
	.bmf-contact-form .wpcf7-form textarea {
		font-size: 16px;
	}

	.bmf-contact-form .wpcf7-form input::placeholder,
	.bmf-contact-form .wpcf7-form textarea::placeholder {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.bmf-contact-main {
		padding: 36px 16px 56px;
	}

	.bmf-contact-main__inner {
		gap: 40px;
	}

	.bmf-contact-form .wpcf7-form {
		gap: 20px;
	}

	.bmf-contact-card__inner {
		padding: 32px 28px;
		padding-left: calc(28px + var(--bmf-ct-bar-width));
	}

	.bmf-contact-card__title {
		font-size: 28px;
		margin-bottom: 20px;
	}

	.bmf-contact-adresses__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.bmf-contact-hero.projets-hero {
		padding: 16px 16px 28px;
	}

	.bmf-contact-hero .projets-hero__breadcrumb {
		margin-bottom: 14px;
	}

	.bmf-contact-hero .projets-hero__separator {
		display: none;
	}

	/* Titre + intro en colonne avec marge verticale (gap horizontal seul sur .projets-hero__row). */
	.bmf-contact-hero .projets-hero__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.bmf-contact-hero .projets-hero__titre {
		line-height: 1.1;
	}

	.bmf-contact-hero .projets-hero__description {
		flex: none;
		width: 100%;
		font-size: 16px;
		line-height: 1.5;
	}

	.bmf-contact-hero .projets-hero__description p {
		margin: 0;
	}
}

@media (max-width: 480px) {
	.bmf-contact-main {
		padding: 32px 14px 48px;
	}

	.bmf-contact-card__inner {
		padding: 28px 22px;
		padding-left: calc(22px + var(--bmf-ct-bar-width));
	}

	.bmf-contact-card__title {
		font-size: 26px;
	}

	.bmf-contact-form .wpcf7-form label {
		font-size: 15px;
	}
}

/* ==========================================================================
   Bouton flottant « Haut de page » — composant autonome.
   ========================================================================== */
.haut-de-page#bmf-haut-de-page {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: center;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.haut-de-page#bmf-haut-de-page.is-visible,
.haut-de-page#bmf-haut-de-page.visible {
	opacity: 1;
	visibility: visible;
}

.haut-de-page#bmf-haut-de-page .haut-de-page__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 4px;
}

.haut-de-page#bmf-haut-de-page .haut-de-page__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--bmf-ct-sans);
	font-weight: 600;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bmf-ct-ink);
}

.haut-de-page#bmf-haut-de-page .haut-de-page__label span {
	display: block;
	line-height: 1.4;
}