/*
Bandeau d'annonce « Osez passer au Rouge » (accueil, campagne Brief de novembre 2026).
Chargé seulement quand le bandeau est affiché (inc/bandeau-rdv.php).
Mesures Figma : bandeau ordinateur 1137 × 183 px, mobile 377 × 262 px. Les tailles suivent la largeur du bandeau
(unités cqi : 1cqi = 1 % de la largeur du bandeau), avec des minimums pour la lisibilité.
*/


/* Lato 2.0 (LatoLatin, licence OFL : fonts/lato/OFL.txt), nom distinct du Lato de Google importé ailleurs */
@font-face {
	font-family: "Lato 2";
	src: url("../fonts/lato/LatoLatin-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Lato 2";
	src: url("../fonts/lato/LatoLatin-SemiboldItalic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}


/*-------------------------------------------*\
	CONTENEUR (sous l'en-tête fixe)
\*-------------------------------------------*/

/* même écart qu'en ordinateur (33 px) entre le bas du logo et le bandeau ; en mobile le logo fait 68 % de la largeur
   (header.less), au plus 262 × 81 px : haut du logo 20 px + hauteur du logo + 33 px */
.wrap.bandeau-rdv-conteneur {
	padding-top: calc(53px + min(0.21023 * (100vw - 60px), 81px));
	padding-left: 30px;
	padding-right: 30px;
}
@media screen and (min-width: 768px) {
	.wrap.bandeau-rdv-conteneur {
		padding-top: 134px;
		padding-left: 4vw;
		padding-right: 4vw;
	}
}


/*-------------------------------------------*\
	BANDEAU — mobile et tablette (empilé)
\*-------------------------------------------*/

.bandeau-rdv {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	color: #FFFFFF;
	text-align: center;
}

.bandeau-rdv__slogan,
.bandeau-rdv__offre {
	overflow: hidden;
}

/* bloc haut : 377 × 105 */
.bandeau-rdv__slogan {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(105px, 27.85cqi, 183px);
	padding: 2.6cqi 4cqi 0;
	background-color: #D4021D;
	background-image: url("../images/bandeau/trame.png");
	background-image: -webkit-image-set(url("../images/bandeau/trame.png") 1x, url("../images/bandeau/trame@2x.png") 2x);
	background-image: image-set(url("../images/bandeau/trame.png") 1x, url("../images/bandeau/trame@2x.png") 2x);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
}

.bandeau-rdv .bandeau-rdv__titre {
	margin: 0;
	font-family: Spartan, sans-serif;
	font-size: min(10.61cqi, 64px);
	font-weight: 900;
	line-height: 1.025;
	text-transform: uppercase;
	color: #F0596C;
}

.bandeau-rdv__ligne {
	display: block;
}

.bandeau-rdv__rouge {
	color: #FFFFFF;
}

/* bloc bas : pleine largeur × 157, zone de texte 351 de large */
.bandeau-rdv__offre {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: min(4.84cqi, 28px) 3.45cqi min(4.85cqi, 28px);
	background-color: #BA0819;
}

/* spécificité volontairement basse : les marges propres à chaque texte ci-dessous l'emportent (le thème a p + p { margin: 1em 0 }) */
.bandeau-rdv__offre p {
	margin: 0;
}
@media screen and (max-width: 1024px) {
	.bandeau-rdv__offre p {
		max-width: 560px;
	}
	/* coupure de l'accroche propre à la version ordinateur */
	.bandeau-rdv__coupure {
		display: none;
	}
}

.bandeau-rdv .bandeau-rdv__accroche {
	font-family: "Lato 2", Lato, sans-serif;
	font-size: clamp(14px, 3.714cqi, 20px);
	font-weight: 900;
	line-height: 1.1429;
}

.bandeau-rdv .bandeau-rdv__expertises {
	max-width: min(560px, 86cqi);
	margin-top: 1.0em;
	font-family: "Lato 2", Lato, sans-serif;
	font-size: clamp(12px, 3.183cqi, 16px);
	font-style: italic;
	font-weight: 600;
	line-height: 1.3333;
}

.bandeau-rdv .bandeau-rdv__action {
	margin-top: 0.9em;
	font-family: Spartan, sans-serif;
	font-size: clamp(14px, 3.714cqi, 16px);
	font-weight: 800;
	line-height: 31px;
}

/* souligné : épaisseur 9,5 % et décalage 25 % de la taille du texte (1,52/4 px à 16 px, 1,33/3,5 px à 14 px) */
.bandeau-rdv .bandeau-rdv__lien {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-thickness: .095em;
	text-underline-offset: .25em;
	transition: color .3s ease-out;
}
.bandeau-rdv .bandeau-rdv__lien:hover,
.bandeau-rdv .bandeau-rdv__lien:focus-visible {
	color: #000242;
}
/* le thème retire le contour de focus partout (reset.less) : contour visible au clavier */
.bandeau-rdv .bandeau-rdv__lien:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
}


/*-------------------------------------------*\
	BANDEAU — ordinateur (côte à côte, 575 + 562)
\*-------------------------------------------*/

@media screen and (min-width: 1025px) {

	.bandeau-rdv {
		flex-direction: row;
		text-align: left;
	}

	/* zone gauche : 575 × 183, trame 281 × 183 dans le coin inférieur droit */
	.bandeau-rdv__slogan {
		width: 50.5717cqi;
		flex: none;
		justify-content: flex-start;
		min-height: 16.095cqi;
		padding: 1.891cqi 0 0 2.4626cqi;
		background-size: 24.714cqi auto;
	}

	.bandeau-rdv .bandeau-rdv__titre {
		font-size: 5.6289cqi;
		line-height: 1.1719;
	}

	/* zone droite : 562 × 183 */
	.bandeau-rdv__offre {
		flex: 1;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 1.917cqi 0 1.2cqi 2.067cqi;
	}

	.bandeau-rdv .bandeau-rdv__accroche {
		max-width: 42.4cqi;
		font-size: max(15px, 1.759cqi);
		line-height: 1.2;
	}

	.bandeau-rdv .bandeau-rdv__expertises {
		max-width: 43cqi;
		margin-top: .875em;
		font-size: max(13px, 1.4072cqi);
		line-height: 1.25;
	}

	.bandeau-rdv .bandeau-rdv__action {
		margin-top: .5875em;
		font-size: max(14px, 1.4072cqi);
		line-height: 1.9375;
	}

}


/*-------------------------------------------*\
	ANIMATION D'ENTRÉE (export Figma : _annonce-brief/animation-figma.css)
\*-------------------------------------------*/

/*
État de départ : textes hors du cadre (chaque zone masque ce qui dépasse), puis retour à leur place en 0,744 s,
l'un après l'autre à 0,1 s d'écart, à partir de 300 ms après l'affichage (version décalée, retenue le 29/10).
Distances Figma (bandeau de 1137 px) converties en proportions :
- horizontales, de la largeur de la zone du slogan (575 px en ordinateur, toute la largeur en mobile) :
  OSEZ PASSER −536/575 = −93,22 %, AU ROUGE +626,683/575 = +108,99 % ;
- verticales, de la hauteur propre de chaque texte : accroche −120/48 = −250 %, liste −126/40 = −315 %,
  lien −16/31 = −52 % avec un fondu (sinon il serait visible dès le départ).
Sans JavaScript, l'animation se joue aussi et se termine sur les textes visibles. Pas d'animation si l'utilisateur
a demandé de réduire les animations, ni si le navigateur ne connaît pas les unités cqi : affichage direct.
*/

.bandeau-rdv {
	/* courbe de repli : dépasse d'environ 10 % puis revient, comme le ressort de Figma */
	--rv-courbe: cubic-bezier(.34, 1.56, .64, 1);
	--rv-duree: .744256s;
	--rv-delai: .3s;
	--rv-zone: 100cqi;
}
@supports (animation-timing-function: linear(0, 1)) {
	.bandeau-rdv {
		--rv-courbe: linear(0, 0.03, 0.1077, 0.2165, 0.342, 0.4728, 0.6001, 0.7175, 0.8208, 0.9077, 0.9776, 1.0307, 1.0684, 1.0925, 1.1051, 1.1084, 1.1047, 1.096, 1.084, 1.0703, 1.0561, 1.0424, 1.0297, 1.0187, 1.0094, 1.0019, 0.9963, 0.9923, 0.9898, 0.9885, 0.9882, 0.9887, 0.9897, 0.991, 0.9925, 0.994, 0.9955, 0.9969, 0.9981, 0.9991, 0.9998, 1.0004, 1.0009, 1.0011, 1.0012, 1.0013, 1.0012, 1.0011, 1.001, 1.0008, 1.0006);
	}
}
@media screen and (min-width: 1025px) {
	.bandeau-rdv {
		--rv-zone: 50.5717cqi;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (width: 1cqi) {

		.bandeau-rdv__ligne--1,
		.bandeau-rdv__ligne--2,
		.bandeau-rdv .bandeau-rdv__accroche,
		.bandeau-rdv .bandeau-rdv__expertises,
		.bandeau-rdv .bandeau-rdv__action {
			animation-duration: var(--rv-duree);
			animation-timing-function: var(--rv-courbe);
			animation-delay: var(--rv-delai);
			/* état de départ pendant le délai ; à la fin, retour à la position normale (la courbe de Figma
			   s'arrête à 1,0006 : avec « both », le texte resterait décalé de 0,3 px et flou) */
			animation-fill-mode: backwards;
		}

		.bandeau-rdv__ligne--1 { animation-name: rv-osez-passer; }
		.bandeau-rdv__ligne--2 { animation-name: rv-au-rouge; }
		.bandeau-rdv .bandeau-rdv__accroche { animation-name: rv-accroche; }
		.bandeau-rdv .bandeau-rdv__expertises { animation-name: rv-expertises; }
		.bandeau-rdv .bandeau-rdv__action { animation-name: rv-action; }

		/* 0,1 s d'écart entre les éléments : 0,3 / 0,4 / 0,5 / 0,6 / 0,7 s */
		.bandeau-rdv .bandeau-rdv__ligne--2 { animation-delay: calc(var(--rv-delai) + .1s); }
		.bandeau-rdv .bandeau-rdv__accroche { animation-delay: calc(var(--rv-delai) + .2s); }
		.bandeau-rdv .bandeau-rdv__expertises { animation-delay: calc(var(--rv-delai) + .3s); }
		.bandeau-rdv .bandeau-rdv__action { animation-delay: calc(var(--rv-delai) + .4s); }

	}
}

/* relance au retour arrière du navigateur (js/bandeau-rdv.js) */
.bandeau-rdv--relance .bandeau-rdv__ligne,
.bandeau-rdv--relance .bandeau-rdv__offre p {
	animation-name: none !important;
}

@keyframes rv-osez-passer {
	from { translate: calc(var(--rv-zone) * -.9322) 0; }
}
@keyframes rv-au-rouge {
	from { translate: calc(var(--rv-zone) * 1.0899) 0; }
}
@keyframes rv-accroche {
	from { translate: 0 -250%; }
}
@keyframes rv-expertises {
	from { translate: 0 -315%; }
}
@keyframes rv-action {
	from { translate: 0 -52%; opacity: 0; }
}


/*-------------------------------------------*\
	CALQUE « CONTACTEZ-NOUS » PARTAGÉ : FORMULAIRE DE RENDEZ-VOUS
	(header.php, partials/bandeau-rdv-formulaire.php ; styles communs : contact.less, overlay.less)
\*-------------------------------------------*/

/* un seul des deux formulaires visible, selon le lien qui a ouvert le calque (js/bandeau-rdv.js) */
.contact-form--rendez-vous,
.contactLayer[data-formulaire="rendez-vous"] .contact-form:not(.contact-form--rendez-vous) {
	display: none;
}
.contactLayer[data-formulaire="rendez-vous"] .contact-form--rendez-vous {
	display: block;
}

/* « Mon besoin » : 10 cases à cocher */
.contact-form--rendez-vous fieldset {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.contact-form--rendez-vous legend {
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8em;
}
.contact-form--rendez-vous legend span {
	font-weight: 500;
}
.contact-form--rendez-vous .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin-top: 12px;
}
/* mobile : une seule colonne, dans l'ordre de la phrase du bandeau (2 colonnes en tablette, 3 sur ordinateur) */
@media screen and (max-width: 767px) {
	.contact-form--rendez-vous .wpcf7-checkbox {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}
.contact-form--rendez-vous .wpcf7 .wpcf7-checkbox .wpcf7-list-item {
	display: block;
	margin: 0;
}
.contact-form--rendez-vous .wpcf7-checkbox label {
	position: relative;
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
}
/* message d'erreur : espace sous la dernière case */
.contact-form--rendez-vous .contact__row--besoin .wpcf7-not-valid-tip {
	margin-top: 14px;
}
/* case native invisible mais toujours utilisable au clavier ; carré blanc dessiné comme la case du formulaire de contact */
.contact-form--rendez-vous .wpcf7-checkbox input[type=checkbox] {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.contact-form--rendez-vous .wpcf7-checkbox .wpcf7-list-item-label {
	position: relative;
	display: block;
	margin-left: 36px;
}
.contact-form--rendez-vous .wpcf7-checkbox .wpcf7-list-item-label::before,
.contact-form--rendez-vous .wpcf7-checkbox .wpcf7-list-item-label::after {
	position: absolute;
	top: 0;
	left: -36px;
	width: 24px;
	height: 24px;
}
.contact-form--rendez-vous .wpcf7-checkbox .wpcf7-list-item-label::before {
	content: "";
	border: 2px solid #FFFFFF;
}
.contact-form--rendez-vous .wpcf7-checkbox .wpcf7-list-item-label::after {
	content: "\2713";
	visibility: hidden;
	font-size: 15px;
	line-height: 26px;
	text-align: center;
}
.contact-form--rendez-vous .wpcf7-checkbox input:checked + .wpcf7-list-item-label::after {
	visibility: visible;
}
.contact-form--rendez-vous .wpcf7-checkbox input:focus-visible + .wpcf7-list-item-label::before {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* titre : deux corps de plus que le formulaire de contact en mobile et tablette (17 → 19 px ; 32 px sur ordinateur) */
@media screen and (max-width: 1024px) {
	.contact-form--rendez-vous .contact__title {
		font-size: 19px;
	}
}

/* « Précisez votre besoin » : 4 lignes visibles en mobile et tablette, 2 sur ordinateur (plus large que les autres
   champs, 520 px) ; filet blanc sous chaque ligne (style de contact.less) ; global.js ajuste la hauteur au texte,
   la hauteur minimale l'emporte tant que le texte est court */
.contact-form--rendez-vous textarea[name="precisions"] {
	min-height: calc(1.8em * 4);
}

/* texte saisi en blanc (le CSS additionnel impose input { color: #848484 !important }) */
.contact-form--rendez-vous input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]) {
	color: #FFFFFF !important;
}
/* saisie automatique du navigateur : texte blanc aussi (fond rouge déjà prévu dans contact.less) */
.contact-form--rendez-vous input:-webkit-autofill,
.contact-form--rendez-vous textarea:-webkit-autofill {
	-webkit-text-fill-color: #FFFFFF !important;
	caret-color: #FFFFFF;
	filter: none;
}

/* boutons « Envoyer ma demande » et « Accéder à la page » (écran de mot de passe de la page de validation) :
   blancs et soulignés comme le lien « Prendre rendez-vous » du bandeau ;
   texte, soulignement et flèche en bleu nuit au survol et au focus clavier */
.contact-form--rendez-vous .submit-container input[type=submit],
.validation-acces .submit-container input[type=submit] {
	color: #FFFFFF !important; /* le CSS additionnel impose input { color: #848484 !important } */
	text-decoration: underline;
	text-decoration-thickness: 1.33px;
	text-underline-offset: 3.5px;
	transition: color .3s ease-out;
}
/* flèche (images/arrow.svg) dessinée par un masque, pour prendre exactement la couleur voulue */
.contact-form--rendez-vous .submit-container::after,
.validation-acces .submit-container::after {
	background: #FFFFFF;
	-webkit-mask: url("../images/arrow.svg") no-repeat center / contain;
	mask: url("../images/arrow.svg") no-repeat center / contain;
	filter: none;
	transition: background-color .3s ease-out;
}
.contact-form--rendez-vous .submit-container:hover input[type=submit],
.contact-form--rendez-vous .submit-container input[type=submit]:focus-visible,
.validation-acces .submit-container:hover input[type=submit],
.validation-acces .submit-container input[type=submit]:focus-visible {
	color: #000242 !important;
}
.contact-form--rendez-vous .submit-container:hover::after,
.contact-form--rendez-vous .submit-container:has(input:focus-visible)::after,
.validation-acces .submit-container:hover::after,
.validation-acces .submit-container:has(input:focus-visible)::after {
	background-color: #000242;
	filter: none;
}
.contact-form--rendez-vous .submit-container input[type=submit]:focus-visible,
.validation-acces .submit-container input[type=submit]:focus-visible {
	outline: 2px solid #FFFFFF !important;
	outline-offset: 4px;
}

/* mention RGPD, sous le bouton d'envoi (discrète : 2 px de moins que le texte courant du calque) */
.contact-form--rendez-vous .contact__rgpd {
	max-width: 760px;
	margin-top: 30px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.5;
}
.contact-form--rendez-vous .contact__rgpd a {
	text-decoration: underline;
}

@media screen and (min-width: 1025px) {
	.contact-form--rendez-vous legend {
		font-size: 20px;
	}
	.contact-form--rendez-vous .wpcf7-checkbox {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px 30px;
	}
	.contact-form--rendez-vous .wpcf7-checkbox label {
		font-size: 17px;
	}
	.contact-form--rendez-vous textarea[name="precisions"] {
		width: 600px;
		max-width: 100%;
		min-height: calc(1.8em * 2);
	}
	.contact-form--rendez-vous .submit-container input[type=submit],
	.validation-acces .submit-container input[type=submit] {
		text-decoration-thickness: 1.52px;
		text-underline-offset: 4px;
	}
	.contact-form--rendez-vous .contact__rgpd {
		font-size: 11px;
	}
}


/*-------------------------------------------*\
	PAGE DE VALIDATION : ÉCRAN DE MOT DE PASSE
	(partials/bandeau-validation-acces.php ; champ et bouton : styles du calque, contact.less)
\*-------------------------------------------*/

/* sous l'en-tête fixe, centré : même écart sous le logo que le bandeau, plus 20 px */
.wrap.validation-acces {
	padding: calc(73px + min(0.21023 * (100vw - 60px), 81px)) 30px 80px;
}
@media screen and (min-width: 768px) {
	.wrap.validation-acces {
		padding: 154px 4vw 120px;
	}
}

.validation-acces__formulaire {
	max-width: 680px;
	margin: 0 auto;
	padding: 32px 24px 40px;
	background: #D4021D;
	color: #FFFFFF;
}

.validation-acces .validation-acces__texte {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

/* message d'erreur : comme les erreurs des formulaires du calque */
.validation-acces .validation-acces__erreur {
	margin: 20px 0 0;
	padding: 8px 18px;
	background: #FFFFFF;
	color: #D4021D;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

/* texte saisi en blanc (le CSS additionnel impose input { color: #848484 !important }) */
.validation-acces input[type=password] {
	color: #FFFFFF !important;
}

.validation-acces .contact__row {
	margin: 30px 0;
}

/* bouton : flèche juste après le texte (positions du calque prévues pour « Envoyer ma demande ») ;
   hauteur de ligne suffisante pour les accents des capitales (É, À) */
.validation-acces .submit-container {
	display: inline-block;
	margin: 10px 0 0;
}
.validation-acces .submit-container input[type=submit] {
	line-height: 1.6;
}
.validation-acces .submit-container::after {
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
}

@media screen and (min-width: 1025px) {
	.validation-acces__formulaire {
		padding: 50px 60px 60px;
	}
	.validation-acces .validation-acces__texte {
		font-size: 18px;
	}
	.validation-acces .validation-acces__erreur {
		font-size: 14px;
	}
	.validation-acces label {
		align-items: baseline;
	}
	.validation-acces label input {
		flex: 1;
		margin-left: 20px;
	}
	.validation-acces .submit-container::after {
		right: 12px;
	}
}


/*-------------------------------------------*\
	SECTION SUIVANTE « Pourriez-vous vivre… »
\*-------------------------------------------*/

/* mobile : dégagement réduit sous le bandeau (le thème prévoit 120 px pour l'en-tête fixe) */
body.bandeau-rdv-actif div[data-elementor-type="wp-page"] > .elementor-section.s-heading-home:first-child {
	padding-top: 40px !important;
}
/* tablette et ordinateur (option B validée le 29/10) : hauteur du contenu au lieu de toute la hauteur de l'écran,
   pour que le titre reste visible sous le bandeau (1366 × 768 notamment) */
@media screen and (min-width: 768px) {
	body.bandeau-rdv-actif div[data-elementor-type="wp-page"] > .elementor-section.s-heading-home:first-child {
		height: auto;
		padding-top: 20px !important;
		padding-bottom: 60px;
	}
}