/* Section « Contact » : carte sombre des formulaires (onglets en pilule) qui chevauche l'en-tête de
   page, colonne de réassurance dessous puis à droite dès 992 px. Formulaires : thème Orbital de
   Gravity Forms, réglé par ses variables (--gf-…, lues dans gravity-forms-orbital-theme 2.10.0.1). */

.dqb-contact {
	position: relative;
	z-index: 2;
	margin-block-start: calc(-1 * var(--chevauchement));
	padding-block-end: var(--espace-section);
	scroll-margin-top: var(--espace-9);
}

.dqb-contact__grille {
	display: grid;
	gap: var(--espace-5);
	align-items: start;

	@media (min-width: 992px) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.dqb-contact__formulaires {
	overflow: hidden;
	border-radius: var(--rayon-xl);
	background: var(--couleur-fond);
	box-shadow: var(--ombre-flottante);
}

/* Onglets : deux pilules côte à côte dans un rail gris. */
.dqb-contact .dqb-onglets__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--espace-2);
	margin: var(--espace-4) var(--espace-4) 0;
	padding: var(--espace-1);
	border: 0;
	border-radius: var(--rayon-pilule);
	background: var(--couleur-gris-bouton);
}

.dqb-contact .dqb-onglets__onglet {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--hauteur-onglet);
	padding: var(--espace-2) var(--espace-3);
	border: 0;
	border-radius: var(--rayon-pilule);
	color: var(--couleur-texte);
	text-align: center;
	transition:
		background-color var(--duree-normale) var(--courbe),
		color var(--duree-normale) var(--courbe),
		box-shadow var(--duree-normale) var(--courbe);

	&[aria-selected="true"] {
		background: var(--couleur-primaire);
		box-shadow: var(--ombre-pastille);
		color: var(--couleur-sur-primaire);
	}

	&[aria-selected="true"]:focus-visible {
		outline-color: var(--couleur-texte);
	}
}

.dqb-contact__onglet-nom {
	font-size: var(--taille-moyenne);
	font-weight: var(--graisse-forte);
}

.dqb-contact__onglet-precision {
	font-size: var(--taille-mini);
	font-weight: var(--graisse-texte);
}

/* Sans JS, les titres des panneaux restent visibles : même présentation que le nom de l'onglet. */
.dqb-contact .dqb-onglets:not(.is-actif) .dqb-onglets__titre {
	display: flex;
	flex-direction: column;
	font-size: var(--taille-h4);
}

.dqb-contact .dqb-onglets__panneau {
	padding: var(--espace-5);

	@media (min-width: 768px) {
		padding: var(--espace-6);
	}

	&:focus-visible {
		outline-offset: calc(-1 * var(--focus-epaisseur));
	}
}

.dqb-contact .dqb-onglets__contenu {
	display: flex;
	flex-direction: column;
	gap: var(--espace-4);
}

.dqb-contact__titre-formulaire {
	font-size: var(--taille-h4);
}

.dqb-contact__intro {
	color: var(--couleur-texte-doux);
	font-size: var(--taille-moyenne);
}

/* Gravity Forms (Orbital, 2.10.0.1), réglé par ses propres variables plutôt qu'en luttant contre ses
   sélecteurs (le bouton d'envoi pèse (0,6,1) : input[type="submit"].button.gform_button…).
   - bordures : filtre gform_default_styles (inc/projet.php), car le style en ligne du formulaire les pose ;
   - hauteur et graisse du bouton : --gf-ctrl-btn-size-lg (que le style en ligne lit) et
     --gf-ctrl-btn-font-weight, définis par Orbital sur .gform-theme--framework (0,1,0) ;
   - pleine largeur : pied du formulaire en grille, le bouton (largeur auto) s'étire sur la colonne. */
.dqb-contact .gform_wrapper.gform-theme {
	--gf-color-danger: var(--couleur-erreur);
	--gf-color-danger-rgb: 239, 138, 115; /* --couleur-erreur en composantes, pour le cadre du résumé des erreurs */
	--gf-ctrl-btn-radius: var(--rayon-pilule);
	--gf-ctrl-btn-size-lg: var(--hauteur-bouton-envoi);
	--gf-ctrl-btn-font-weight: var(--graisse-forte);
	--gf-ctrl-label-font-weight-primary: var(--graisse-moyenne);
	--gf-form-gap-y: var(--ecart-champs);
}

.dqb-contact .gform_wrapper.gform-theme .gform_footer {
	display: grid;
}

.dqb-contact .gform_wrapper .gform_confirmation_message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-4);
	padding-block: var(--espace-6);
	text-align: center;
}

/* Contenus posés dans les formulaires (scripts/formulaires.php, scripts/consentement.php) : description
   de la case de consentement en ligne discrète (Orbital en fait une boîte encadrée qui défile), boutons
   du message de remerciement. */
.dqb-contact .gform_wrapper.gform-theme .gfield_consent_description {
	max-height: none;
	margin-block-start: var(--espace-2);
	padding: 0;
	overflow: visible;
	border: 0;
	color: var(--couleur-texte-attenue);
	font-size: var(--taille-mini);
	line-height: var(--interligne-moyen);
}

.dqb-contact__confirmation-boutons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--espace-3);
}

/* Colonne de réassurance. */
.dqb-contact__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--espace-3);
	margin: 0;
	padding: 0;
	list-style: none;

	@media (min-width: 1200px) {
		padding-block-start: var(--retrait-colonne-contact);
	}
}

.dqb-contact__carte {
	display: flex;
	gap: var(--espace-4);
	padding: var(--espace-5);
	border-radius: var(--rayon-l);
	background: var(--couleur-fond);
	box-shadow: var(--ombre-carte);
}

.dqb-contact__icone {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--taille-icone-contact);
	height: var(--taille-icone-contact);
	border-radius: var(--rayon-s);
	background: var(--couleur-primaire-douce);
	color: var(--couleur-primaire);
}

.dqb-contact__carte-texte {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--espace-1);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-moyenne);
	line-height: var(--interligne-moyen);

	& strong {
		color: var(--couleur-texte);
		font-size: var(--taille-grande);
		font-weight: var(--graisse-titre);
	}
}

.dqb-contact__element-catalogue {
	display: flex;
}

.dqb-contact__catalogue {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--espace-4);
	padding: var(--espace-5);
	border-radius: var(--rayon-l);
	background: var(--couleur-primaire);
	color: var(--couleur-sur-primaire);
	text-decoration: none;
	transition:
		background-color var(--duree-rapide) var(--courbe),
		translate var(--duree-rapide) var(--courbe);

	& .dqb-icone {
		flex: none;
	}

	& .dqb-contact__carte-texte {
		color: var(--couleur-sur-primaire);
		font-size: var(--taille-petite);
	}

	& .dqb-contact__carte-texte strong {
		color: var(--couleur-sur-primaire);
		font-size: var(--taille-texte);
	}

	&:hover {
		background: var(--couleur-accent);
		color: var(--couleur-sur-primaire);
	}

	&:focus-visible {
		outline-color: var(--couleur-texte);
	}
}

@media (hover: hover) {
	.dqb-contact__catalogue:hover {
		translate: 0 var(--soulevement-carte);
	}
}