/**
 * Formulaire de contact — habillage.
 *
 * Le site est sombre avec un accent magenta : le formulaire reprend ce parti
 * pris plutôt que de poser un bloc blanc au milieu de la page. Les surfaces
 * sont exprimées en blanc translucide, ce qui les rend indépendantes de la
 * nuance de fond exacte. L'accent vient de la palette Kadence : si elle change,
 * le formulaire suit sans qu'on touche à ce fichier.
 */

.bb-contact {
	--bb-accent: var( --global-palette1, #ff0099 );
	--bb-surface: rgba( 255, 255, 255, .04 );
	--bb-surface-strong: rgba( 255, 255, 255, .07 );
	--bb-line: rgba( 255, 255, 255, .12 );
	--bb-ink: rgba( 255, 255, 255, .92 );
	--bb-ink-soft: rgba( 255, 255, 255, .62 );
	--bb-width: 720px;

	/* Tout ce qui signale un problème part d'ici : la bordure d'un champ
	   fautif, le texte sous ce champ, l'encadré sous le bouton. Une seule
	   teinte, déclinée — deux rouges voisins mais distincts donneraient
	   l'impression de deux erreurs de nature différente. */
	--bb-danger: #ff6b6b;
}

/* -------------------------------------------------------------------------
 * La carte
 * ---------------------------------------------------------------------- */

.bb-contact__form {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.1rem 1.4rem;
	box-sizing: border-box;
	max-width: var( --bb-width );
	margin-inline: auto;
	padding: clamp( 1.4rem, 4vw, 2.4rem );
	background: var( --bb-surface );
	border: 1px solid var( --bb-line );
	border-radius: 18px;
	box-shadow:
		0 1px 0 rgba( 255, 255, 255, .06 ) inset,
		0 24px 48px -24px rgba( 0, 0, 0, .8 );
}

/* Chaque champ occupe une cellule ; le message et le bouton prennent toute la
   largeur. */
.bb-contact__field--wide,
.bb-contact__actions {
	grid-column: 1 / -1;
}

/* Le thème espace les paragraphes du contenu par un sélecteur plus précis
   qu'une simple classe : il faut au moins deux classes pour reprendre la main.
   Dans une grille, l'espacement est l'affaire de `gap`, pas des marges. */
.bb-contact .bb-contact__form > p {
	margin: 0;
}

@media ( max-width: 640px ) {
	.bb-contact__form {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Étiquettes et champs
 * ---------------------------------------------------------------------- */

/* Le thème habille les contrôles par leur type — `input[type="text"]`, etc. —
   ce qui pèse autant qu'une classe suivie d'un élément. À poids égal, la
   dernière feuille chargée l'emporte, et c'est la sienne. Les règles qui
   suivent répètent donc la classe racine pour passer devant sans recourir à
   `!important`, qui fermerait la porte à tout ajustement ultérieur. */

.bb-contact__field label {
	display: block;
	margin-bottom: .5rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --bb-ink-soft );
}

/* `display: block` n'est pas cosmétique : un champ resté en ligne s'assied sur
   une boîte de ligne, dont les jambages ajoutent une dizaine de pixels sous
   chaque champ. */
.bb-contact .bb-contact__field :is( input, textarea ) {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: .8rem 1rem;
	font: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var( --bb-ink );
	background: var( --bb-surface-strong );
	border: 1px solid var( --bb-line );
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.bb-contact .bb-contact__field textarea {
	min-height: 13.5rem;
	resize: vertical;
}

.bb-contact .bb-contact__field :is( input, textarea ):hover {
	border-color: color-mix( in srgb, var( --bb-accent ) 55%, transparent );
}

.bb-contact .bb-contact__field :is( input, textarea ):focus {
	outline: none;
	background: rgba( 255, 255, 255, .1 );
	border-color: var( --bb-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --bb-accent ) 30%, transparent );
}

.bb-contact .bb-contact__form ::placeholder {
	color: rgba( 255, 255, 255, .38 );
}

/* Le remplissage automatique de Chrome force un fond blanc : on le neutralise. */
.bb-contact .bb-contact__field input:-webkit-autofill,
.bb-contact .bb-contact__field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var( --bb-ink );
	box-shadow: 0 0 0 100px #1b1b1b inset;
}

/* -------------------------------------------------------------------------
 * Bouton d'envoi
 * ---------------------------------------------------------------------- */

.bb-contact__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* Le thème pose sa propre mise en forme sur `input[type="submit"]` : la classe
   racine est répétée ici pour la même raison que sur les champs.

   L'apparence est celle du bouton « Mettre à jour le profil » de la page
   mon-profil (`bb-site/assets/css/profil.css`) : deux boutons d'envoi à deux
   pages d'écart doivent se ressembler. On en reprend le rendu, pas la manière :
   là-bas tout est imposé au `!important` et la couleur est écrite en dur, ici
   elle vient de la palette. Si celle-ci change, ce bouton suivra. */
.bb-contact .bb-contact__submit {
	padding: 12px 40px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	background: var( --bb-accent );
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease;
}

/* Le survol assombrit l'accent au lieu de l'éclaircir, comme sur mon-profil.
   `color-mix` évite de figer une seconde couleur en dur : la nuance reste
   dérivée de la palette. */
.bb-contact .bb-contact__submit:hover {
	color: #fff;
	background: color-mix( in srgb, var( --bb-accent ) 88%, #000 );
	box-shadow: 0 4px 12px color-mix( in srgb, var( --bb-accent ) 30%, transparent );
}

.bb-contact .bb-contact__submit:active {
	background: color-mix( in srgb, var( --bb-accent ) 80%, #000 );
}

/* Pendant l'envoi. Pas d'animation : sur une réponse qui vient en moins d'une
   seconde, un sablier qui tourne agite plus qu'il n'informe. */
.bb-contact .bb-contact__form.is-sending .bb-contact__submit {
	opacity: .6;
	cursor: progress;
}

.bb-contact .bb-contact__submit:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --bb-accent ) 45%, transparent );
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Erreurs et messages d'état
 * ---------------------------------------------------------------------- */

/* Un seul attribut porte à la fois l'annonce aux lecteurs d'écran et la mise
   en évidence visuelle : les deux ne peuvent pas diverger.

   Le fond du champ ne bouge pas : seule la bordure signale l'erreur. Un champ
   dont le fond se teinte se lit moins bien, et le message affiché juste en
   dessous dit déjà ce qui ne va pas.

   Le second sélecteur n'est pas décoratif. Sans lui, la règle de focus pèse le
   même poids que celle-ci et c'est l'ordre des lignes qui départage : le champ
   fautif reprendrait le rose au moment précis où l'on clique dedans pour le
   corriger. On l'écrit, plutôt que de dépendre d'un ordre. */
.bb-contact .bb-contact__field :is( input, textarea )[aria-invalid="true"],
.bb-contact .bb-contact__field :is( input, textarea )[aria-invalid="true"]:focus {
	border-color: var( --bb-danger );
}

.bb-contact__error {
	display: block;
	margin-top: .45rem;
	font-size: .84rem;
	font-weight: 500;
	color: color-mix( in srgb, var( --bb-danger ) 80%, #fff );
}

/* L'annonce est sous le formulaire : la marge est donc au-dessus d'elle.

   Réussite et échec partagent la même boîte, à la teinte près. Un refus qui
   s'afficherait ailleurs que la confirmation obligerait à chercher la réponse
   à deux endroits selon qu'elle est bonne ou mauvaise. */
.bb-contact__notice {
	max-width: var( --bb-width );
	margin: 1.1rem auto 0;
	padding: .9rem 1.1rem;
	font-size: .95rem;
	border: 1px solid transparent;
	border-radius: 12px;
}

.bb-contact__notice--ok {
	color: #b7f7c8;
	background: rgba( 70, 180, 80, .14 );
	border-color: rgba( 70, 180, 80, .34 );
}

.bb-contact__notice--error {
	color: color-mix( in srgb, var( --bb-danger ) 55%, #fff );
	background: color-mix( in srgb, var( --bb-danger ) 16%, transparent );
	border-color: color-mix( in srgb, var( --bb-danger ) 42%, transparent );
}

/* -------------------------------------------------------------------------
 * Confirmation
 * ---------------------------------------------------------------------- */

/* Le formulaire se replie sur lui-même pendant que le panneau prend sa place.
   La hauteur de départ est posée en ligne par le script : on ne peut pas
   animer depuis `auto`. Les marges intérieures s'effacent avec elle, sinon il
   resterait cinq centimètres de vide une fois la hauteur à zéro.

   `overflow: hidden` n'est pas décoratif : sans lui, le contenu déborderait
   d'un cadre qui n'a plus de hauteur, et le formulaire semblerait glisser
   par-dessus le panneau plutôt que disparaître dessous. */
.bb-contact .bb-contact__form.is-done {
	padding-block: 0;
	overflow: hidden;
	border-color: transparent;
	opacity: 0;
	transform: translateY( -8px );
	pointer-events: none;
	transition:
		height .32s cubic-bezier( .4, 0, .2, 1 ),
		padding .32s cubic-bezier( .4, 0, .2, 1 ),
		opacity .22s ease,
		transform .32s ease;
}

.bb-contact__done {
	box-sizing: border-box;
	max-width: var( --bb-width );
	margin-inline: auto;
	padding: clamp( 2rem, 5vw, 3rem ) clamp( 1.4rem, 4vw, 2.4rem );
	text-align: center;
	background: var( --bb-surface );
	border: 1px solid rgba( 70, 180, 80, .34 );
	border-radius: 18px;
	box-shadow:
		0 1px 0 rgba( 255, 255, 255, .06 ) inset,
		0 24px 48px -24px rgba( 0, 0, 0, .8 );
	animation: bb-contact-rise .38s cubic-bezier( .2, .7, .3, 1 ) both;
}

/* Le script y pose le focus pour que la lecture continue au bon endroit. Ce
   n'est pas un élément qu'on atteint à la tabulation : lui laisser un contour
   permanent ferait croire à un contrôle. */
.bb-contact__done:focus {
	outline: none;
}

.bb-contact__done:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --bb-accent ) 45%, transparent );
	outline-offset: 4px;
}

/* La coche se trace, elle n'apparaît pas : le geste dit « c'est fait » mieux
   que l'image fixe, et il dure moins longtemps qu'un regard. */
.bb-contact__done-mark {
	width: 3.5rem;
	height: 3.5rem;
	fill: none;
	stroke: #7ddb95;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb-contact__done-mark circle {
	opacity: .3;
}

.bb-contact__done-mark path {
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
	animation: bb-contact-check .4s .2s ease-out forwards;
}

/* Le thème impose ses marges aux titres du contenu : deux classes pour
   reprendre la main, comme partout ailleurs dans ce fichier. */
.bb-contact .bb-contact__done-title {
	margin: .9rem 0 0;
	font-size: clamp( 1.35rem, 3.5vw, 1.75rem );
	line-height: 1.2;
	color: var( --bb-ink );
}

.bb-contact .bb-contact__done-text {
	max-width: 42ch;
	margin: .7rem auto 0;
	font-size: 1rem;
	color: var( --bb-ink-soft );
}

.bb-contact .bb-contact__done-back {
	margin: 1.8rem 0 0;
}

/* Un lien, pas un second bouton d'envoi : le contour suffit à le désigner sans
   entrer en concurrence avec l'accent, qui n'a plus rien à demander ici. */
.bb-contact .bb-contact__done-link {
	display: inline-block;
	padding: 11px 28px;
	font-size: 15px;
	font-weight: 600;
	color: var( --bb-ink );
	text-decoration: none;
	background: var( --bb-surface-strong );
	border: 1px solid var( --bb-line );
	border-radius: 8px;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.bb-contact .bb-contact__done-link:hover,
.bb-contact .bb-contact__done-link:focus {
	color: #fff;
	background: rgba( 255, 255, 255, .1 );
	border-color: var( --bb-accent );
}

.bb-contact .bb-contact__done-link:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --bb-accent ) 45%, transparent );
	outline-offset: 3px;
}

@keyframes bb-contact-rise {
	from {
		opacity: 0;
		transform: translateY( 14px );
	}
}

@keyframes bb-contact-check {
	to {
		stroke-dashoffset: 0;
	}
}

/* -------------------------------------------------------------------------
 * Pot de miel
 * ---------------------------------------------------------------------- */

/* Hors du flux plutôt que `display: none` : certains robots ignorent les champs
   masqués, et c'est précisément eux qu'on cherche à faire trébucher. */
.bb-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Confort
 * ---------------------------------------------------------------------- */

/* Le repli du formulaire et l'arrivée du panneau sont un agrément, pas une
   information : coupés, la confirmation s'affiche simplement d'un coup. Le
   script accorde son minuteur à ce réglage et retire le formulaire aussitôt. */
@media ( prefers-reduced-motion: reduce ) {
	.bb-contact *,
	.bb-contact *::before,
	.bb-contact *::after {
		transition: none !important;
		animation: none !important;
	}

	/* La coche est dessinée par son animation : sans elle, il faut poser le
	   trait directement, sinon elle resterait invisible. */
	.bb-contact__done-mark path {
		stroke-dashoffset: 0;
	}
}