/**
 * PROTAT — styles complémentaires
 *
 * Uniquement ce que theme.json ne peut pas exprimer : styles de blocs
 * personnalisés, accessibilité, comportements responsive fins.
 */

/* --------------------------------------------------------------
 * Accessibilité (WCAG 2.2 AA)
 * -------------------------------------------------------------- */

.protat-skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	display: block;
	padding: 0.875rem 1.5rem;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert-fonce);
	font-weight: 700;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgb(36 41 24 / 24%);
	outline: 2px solid var(--wp--preset--color--rouge);
	outline-offset: 2px;
}

/* Cible tactile minimale de 44 px dans la navigation et les boutons. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------
 * Style de bloc : carte (groupe)
 * -------------------------------------------------------------- */

.wp-block-group.is-style-protat-carte {
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-group.is-style-protat-carte:hover,
.wp-block-group.is-style-protat-carte:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgb(54 81 18 / 12%);
}

/* Les images de carte remplissent la largeur sans déformation. */
.wp-block-group.is-style-protat-carte > .wp-block-image {
	margin-block: 0;
}

.wp-block-group.is-style-protat-carte > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------
 * Style de bloc : badge promotion
 * -------------------------------------------------------------- */

.is-style-protat-badge-promo {
	display: inline-block;
	background: var(--wp--preset--color--rouge);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	padding: 0.4rem 0.7rem;
	border-radius: 8px;
}

/* --------------------------------------------------------------
 * Style de bloc : prix
 * -------------------------------------------------------------- */

.is-style-protat-prix {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 800;
	color: var(--wp--preset--color--rouge);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

/*
 * Le prix barré reste volontairement discret, mais il porte une information :
 * il doit donc rester lisible. L'ancien #A9AB93 plafonnait à 2,35:1 sur crème,
 * soit la moitié du seuil AA. #6F7160 tient 4,9:1 tout en restant en retrait
 * du prix promotionnel.
 */
.is-style-protat-prix-barre {
	color: #6f7160;
	text-decoration: line-through;
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------
 * Style de bloc : atout (puce cochée)
 * -------------------------------------------------------------- */

.is-style-protat-atout {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.is-style-protat-atout::before {
	content: "";
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--wp--preset--color--vert-moyen);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* --------------------------------------------------------------
 * Style de bloc : sur-titre
 * -------------------------------------------------------------- */

/*
 * Sur-titre en petites capitales : la taille et l'espacement des lettres le
 * rendent déjà fragile à lire. `vert-moyen` (#658F0D) ne donnait que 3,75:1,
 * sous le seuil AA de 4,5:1 pour un petit texte. `vert-fonce` monte à 8,3:1.
 * `vert-moyen` et `vert-clair` restent réservés aux icônes, aux bordures et
 * aux grands textes.
 */
.is-style-protat-surtitre {
	color: var(--wp--preset--color--vert-fonce);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------
 * Images de rayon / héros
 * -------------------------------------------------------------- */

.protat-image-couverture img {
	width: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------
 * En-tête
 * -------------------------------------------------------------- */

/*
 * L'en-tête reste visible au défilement.
 *
 * Le collage doit porter sur le CONTENEUR du template-part, pas sur
 * `.protat-header` lui-même : WordPress enveloppe la partie de gabarit dans un
 * `div.wp-block-template-part` dont la hauteur est celle de l'en-tête. Un
 * élément `sticky` ne peut coller que dans les limites de son parent — collé à
 * l'intérieur d'un parent de sa propre taille, il disparaît dès le premier
 * défilement. Ici le parent est `.wp-site-blocks`, qui couvre toute la page.
 */
.protat-entete-fixe {
	position: sticky;
	top: 0;
	z-index: 100;
}

.protat-header {
	background: var(--wp--preset--color--blanc);
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}

.protat-header .custom-logo-link img,
.protat-header .wp-block-site-logo img {
	height: 62px;
	width: auto;
}

@media (width <= 781px) {
	.protat-header .custom-logo-link img,
	.protat-header .wp-block-site-logo img {
		height: 44px;
	}

	/*
	 * En mobile, la barre haute occupait trois lignes et l'en-tête montait à
	 * 218 px, soit un quart de l'écran avant le premier contenu. La baseline
	 * est reprise mot pour mot dans le pied de page : on la masque ici et on ne
	 * garde que ce qui sert à appeler.
	 */
	.protat-baseline-barre {
		display: none;
	}

	.protat-infos-barre {
		margin: 0;
		text-align: center;
		width: 100%;
	}

	/* Cible tactile du numéro de téléphone : 44 px de haut, seuil WCAG 2.2. */
	.protat-infos-barre a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 0.25rem;
	}
}

/* --------------------------------------------------------------
 * Cibles tactiles
 *
 * WCAG 2.2 (2.5.8, niveau AA) demande 24 px ; 44 px est la valeur
 * retenue ici, celle des recommandations Apple et Android, parce que
 * les visiteurs consultent le site depuis une cuisine ou un camion.
 * -------------------------------------------------------------- */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 8px;
}

.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--rouge);
	outline-offset: 2px;
}

@media (width <= 781px) {
	.protat-pied .protat-liste-nue li a,
	.protat-pied p > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.protat-pied .protat-liste-nue {
		--wp--style--block-gap: 0;
	}
}

/* Rubriquage des colonnes du pied de page, sans peser sur la hiérarchie
   de titres de la page. */
.protat-titre-colonne {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------
 * Défilement horizontal des promos sur mobile
 * -------------------------------------------------------------- */

/*
 * Les cartes de promotion défilent horizontalement en mobile plutôt que de
 * s'empiler sur trois écrans de hauteur.
 *
 * Le `display: flex` seul ne suffisait pas : la disposition en grille de
 * WordPress pose `grid-template-columns` dans un style de bloc plus
 * spécifique, et une piste de grille survit au changement de `display`. Il
 * faut donc l'annuler explicitement, sinon les cartes restent en colonne.
 */
@media (width <= 781px) {
	/*
	 * Sélecteur doublé volontairement : les styles de disposition de WordPress
	 * sont imprimés en ligne dans le `<head>`, à la même spécificité qu'une
	 * classe simple. À égalité, c'est l'ordre de déclaration qui tranche, et il
	 * n'est pas garanti. `.wp-block-group` en tête lève l'ambiguïté.
	 */
	.wp-block-group.protat-defilement-mobile {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 0.875rem;
		padding-bottom: 0.75rem;
		-webkit-overflow-scrolling: touch;
		/* Les cartes doivent pouvoir déborder du conteneur centré. */
		scroll-padding-inline-start: 0;
	}

	.wp-block-group.protat-defilement-mobile > * {
		flex: 0 0 85%;
		min-width: 0;
		scroll-snap-align: start;
	}
}

/* --------------------------------------------------------------
 * Pictogrammes de remplacement
 *
 * Utilisés quand un rayon n'a pas encore de photo (la Confiserie).
 * Le format reprend celui d'une bannière 2:1 pour que la grille des
 * rayons reste alignée, photo ou pictogramme.
 * -------------------------------------------------------------- */

.protat-picto {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 1;
	background: var(--wp--preset--color--vert-pale);
	color: var(--wp--preset--color--vert-moyen);
}

.protat-picto svg {
	width: 42%;
	max-width: 15rem;
	height: auto;
}

.protat-picto--produit {
	aspect-ratio: 4 / 3;
}

.protat-picto--produit svg {
	width: 52%;
	max-width: 8rem;
}

/* --------------------------------------------------------------
 * Formulaire de demande de devis (Contact Form 7)
 *
 * Contact Form 7 ne fournit aucun style : sans ces règles, le formulaire
 * s'affiche avec les champs bruts du navigateur, en rupture totale avec
 * le reste du site.
 * -------------------------------------------------------------- */

.protat-formulaire {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.protat-formulaire__ligne {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}

@media (width >= 600px) {
	.protat-formulaire__ligne--double {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Le libellé est un bloc, pas une colonne flex.
 *
 * En `flex-direction: column`, chacun de ses enfants devenait une ligne : le
 * texte, puis l'astérisque `<abbr>*</abbr>`, puis le champ. L'astérisque se
 * retrouvait donc seul entre le libellé et le champ, et le formulaire
 * paraissait décalé.
 *
 * Un simple bloc laisse le texte et l'astérisque sur la même ligne, et le
 * conteneur de champ, passé en `display: block` plus bas, descend seul.
 */
.protat-formulaire label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--encre);
}

.protat-formulaire abbr {
	color: var(--wp--preset--color--rouge);
	text-decoration: none;
	border: 0;
}

/*
 * `box-sizing: border-box` est indispensable ici.
 *
 * Les champs de formulaire sont en `content-box` par defaut dans les
 * navigateurs, et WordPress ne remet pas ce reglage a zero pour eux. Avec
 * `width: 100%`, la largeur de la colonne s ajoutait donc au remplissage de
 * 22 px et a la bordure de 3 px : chaque champ depassait sa colonne de 25 px,
 * pour une gouttiere de 20 px seulement. Les deux colonnes se chevauchaient.
 */
.protat-formulaire input,
.protat-formulaire select,
.protat-formulaire textarea {
	box-sizing: border-box;
}

.protat-formulaire input[type="text"],
.protat-formulaire input[type="email"],
.protat-formulaire input[type="tel"],
.protat-formulaire select,
.protat-formulaire textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.6875rem 0.875rem;
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--encre);
	background: var(--wp--preset--color--blanc);
	border: 1.5px solid var(--wp--preset--color--bordure);
	border-radius: 10px;
	transition: border-color 0.15s ease;
}

.protat-formulaire textarea {
	min-height: 9rem;
	resize: vertical;
}

.protat-formulaire input:focus-visible,
.protat-formulaire select:focus-visible,
.protat-formulaire textarea:focus-visible {
	border-color: var(--wp--preset--color--vert-moyen);
	outline: 2px solid var(--wp--preset--color--vert-moyen);
	outline-offset: 1px;
}

/*
 * Cases à cocher des rayons.
 *
 * Contact Form 7 n'emploie pas de `<label>` ici : chaque choix est un
 * `<span class="wpcf7-list-item">` contenant un `<input>` nu et un
 * `<span class="wpcf7-list-item-label">`. Les règles qui visaient un `label`
 * imbriqué ne s'appliquaient donc à rien : ni l'alignement vertical, ni les
 * cibles tactiles de 44 px n'ont jamais existé. On cible la vraie structure.
 */
.protat-formulaire .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.375rem;
	font-weight: 400;
}

.protat-formulaire .wpcf7-list-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	min-height: 44px;
	font-weight: 400;
}

.protat-formulaire .wpcf7-list-item-label {
	cursor: pointer;
	line-height: 1.3;
}

.protat-formulaire input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--wp--preset--color--vert-moyen);
}

.protat-formulaire__envoi {
	margin: 0.375rem 0 0;
}

.protat-formulaire input[type="submit"] {
	min-height: 48px;
	padding: 0.875rem 2rem;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--rouge);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.protat-formulaire input[type="submit"]:hover {
	background: var(--wp--preset--color--vert-fonce);
}

.protat-formulaire input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--vert-fonce);
	outline-offset: 2px;
}

/* Messages de Contact Form 7 : lisibles et non décoratifs. */
.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1.125rem;
	border-width: 1.5px;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--vert-moyen);
	background: var(--wp--preset--color--vert-pale);
	color: var(--wp--preset--color--vert-fonce);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--wp--preset--color--rouge);
	background: #fdf2f2;
	color: #8f0a10;
}

.protat-formulaire .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: #8f0a10;
}

.protat-formulaire .wpcf7-spinner {
	margin-inline-start: 0.75rem;
}

/* --------------------------------------------------------------
 * Carte de localisation
 * -------------------------------------------------------------- */

/*
 * La carte s'étire sur toute la hauteur de sa colonne pour s'aligner sur la
 * fiche d'accès placée à côté : les colonnes WordPress s'étirent déjà à la
 * même hauteur, encore faut-il que la carte la remplisse au lieu de rester
 * à sa hauteur minimale.
 */
.protat-carte {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wp--preset--color--vert-pale);
	min-height: 480px;
	height: 100%;
	display: flex;
}

/* La colonne devient conteneur flex pour que la carte remplisse sa hauteur. */
.protat-colonne-carte {
	display: flex;
}

.protat-carte__apercu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	text-align: center;
	padding: 2.5rem 1.75rem;
	width: 100%;
	color: var(--wp--preset--color--vert-fonce);
}

.protat-carte__icone {
	color: var(--wp--preset--color--vert-moyen);
}

.protat-carte__adresse {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--encre);
}

.protat-carte__mention {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--gris-texte);
}

.protat-carte__bouton {
	margin-top: 0.375rem;
	min-height: 44px;
	padding: 0.75rem 1.625rem;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.protat-carte__bouton:hover {
	background: var(--wp--preset--color--rouge);
}

.protat-carte__bouton:focus-visible {
	outline: 2px solid var(--wp--preset--color--rouge);
	outline-offset: 2px;
}

.protat-carte--chargee {
	background: none;
}

.protat-carte__cadre {
	flex: 1 1 auto;
	width: 100%;
	min-height: 480px;
	height: 100%;
	border: 0;
	display: block;
}

/* --------------------------------------------------------------
 * Listes de navigation sans puces (pied de page, colonnes de liens)
 * -------------------------------------------------------------- */

.protat-liste-nue {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------
 * Fil d'Ariane
 * -------------------------------------------------------------- */

/*
 * `gris-texte` (#77795E) tombe à 4,40:1 sur crème : juste sous le seuil AA.
 * Le fil d'Ariane étant en x-small, il passe à `encre-douce` (#55583F, 6,7:1).
 */
.protat-fil-ariane {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--encre-douce);
}

.protat-fil-ariane ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.protat-fil-ariane li::after {
	content: "›";
	margin-inline-start: 0.5rem;
	color: var(--wp--preset--color--bordure);
}

.protat-fil-ariane li:last-child::after {
	content: none;
}

.protat-fil-ariane a {
	color: var(--wp--preset--color--encre-douce);
}

.protat-fil-ariane [aria-current="page"] {
	color: var(--wp--preset--color--encre);
	font-weight: 600;
}

/* --------------------------------------------------------------
 * Itinéraires GPS de la fiche d'accès
 *
 * Empilés dans une colonne étroite, les trois boutons avaient des
 * largeurs différentes et dessinaient un bord droit en escalier.
 * Centrés et de largeur commune, ils forment un bloc propre.
 * -------------------------------------------------------------- */

.protat-itineraires {
	justify-content: center;
}

.protat-itineraires .wp-block-button {
	flex: 0 1 auto;
}

.protat-itineraires .wp-block-button__link {
	min-width: 12rem;
	justify-content: center;
}

/* --------------------------------------------------------------
 * Carte : même hauteur que la fiche d'accès
 *
 * `align-self: stretch` s'ajoute à `height: 100%` : si un navigateur
 * ne résout pas la hauteur en pourcentage dans une colonne flex, la
 * carte retombait à la taille par défaut d'une iframe, soit 300 × 150.
 * -------------------------------------------------------------- */

.protat-colonne-carte {
	align-self: stretch;
}

.protat-carte {
	align-self: stretch;
	width: 100%;
}

@media (width <= 781px) {
	.protat-carte,
	.protat-carte__cadre {
		min-height: 320px;
	}

	.protat-itineraires .wp-block-button {
		flex: 1 1 100%;
	}

	.protat-itineraires .wp-block-button__link {
		width: 100%;
	}
}

/* --------------------------------------------------------------
 * Formulaire : corrections de mise en page
 *
 * Deux défauts constatés à la mise en ligne, qui rendaient le
 * formulaire décalé et pénible à remplir.
 * -------------------------------------------------------------- */

/*
 * Contact Form 7 enveloppe chaque champ dans un `span`, donc un élément en
 * ligne. Dans la colonne flex du libellé, il ne s'étirait pas : le champ
 * était plus étroit que son propre libellé et paraissait mal aligné.
 */
.protat-formulaire .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	/* Remplace le `gap` de l'ancienne colonne flex du libellé. */
	margin-top: 0.4375rem;
}

/* Le formulaire est centré et sa largeur bornée : au-delà d'environ 45 rem,
   l'œil perd la relation entre un libellé et son champ. */
.protat-formulaire {
	max-width: 44rem;
	margin-inline: auto;
	width: 100%;
}

.protat-formulaire .wpcf7-list-item input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;
	accent-color: var(--wp--preset--color--vert-moyen);
	flex: 0 0 auto;
}

/* Le bouton d'envoi : pleine largeur en mobile, où un bouton étroit au
   milieu d'une colonne de champs larges se cherche. */
.protat-formulaire__envoi {
	margin: 0;
}

.protat-formulaire input[type="submit"] {
	min-height: 52px;
	padding-inline: 2rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media (width <= 600px) {
	.protat-formulaire input[type="submit"] {
		width: 100%;
	}
}

/* La mention sous le bouton reste lisible : elle porte l'information de
   traitement des données. */
.protat-formulaire__mention {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--encre-douce);
	margin: 0;
}

/* --------------------------------------------------------------
 * Formulaire : états de chargement et d'erreur
 *
 * Sans retour visible, un visiteur qui ne voit rien se passer
 * reclique et envoie deux fois. Contact Form 7 pose les classes,
 * encore faut-il les habiller.
 * -------------------------------------------------------------- */

/* Pendant l'envoi, le bouton se grise et le curseur l'annonce. */
.wpcf7 form.submitting .protat-formulaire input[type="submit"] {
	opacity: 0.55;
	cursor: progress;
	pointer-events: none;
}

.protat-formulaire .wpcf7-spinner {
	margin-inline-start: 0.75rem;
	vertical-align: middle;
}

/*
 * Champ en erreur : la bordure rouge ne suffit pas, une personne
 * daltonienne ne la distingue pas. L'épaisseur double, et le message
 * de Contact Form 7 nomme le problème juste dessous.
 */
.protat-formulaire .wpcf7-not-valid {
	border-color: var(--wp--preset--color--rouge);
	border-width: 2.5px;
}

.protat-formulaire .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: #a8100e;
}

/* --------------------------------------------------------------
 * Palier tablette
 *
 * Entre 782 et 1024 px, les grilles de trois colonnes se serrent :
 * les cartes tombent sous 15 rem et le texte y devient haché. Deux
 * colonnes respirent mieux à cette largeur.
 * -------------------------------------------------------------- */

@media (782px <= width <= 1024px) {
	.protat-atout-colonne {
		padding-top: 0.875rem;
	}

	.protat-formulaire__ligne--double {
		gap: 1rem;
	}
}

/* --------------------------------------------------------------
 * Bannière de consentement
 *
 * Barre basse et compacte, sans voile assombrissant la page : le
 * visiteur voit tout de suite où il est arrivé, et la bannière
 * n'occupe qu'une bande.
 *
 * « Autoriser tout » est le bouton plein, et c'est délibéré. La
 * CNIL n'exige pas que les deux boutons soient identiques, elle
 * exige que refuser demande le même nombre de clics qu'accepter et
 * reste lisible : ici, un clic de part et d'autre, même hauteur,
 * même famille de caractères, contraste suffisant sur les deux.
 * -------------------------------------------------------------- */

.protat-consentement {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 10000;
	padding: 0.75rem;
	pointer-events: none;
}

.protat-consentement__boite {
	pointer-events: auto;
	max-width: 40rem;
	margin-inline: auto;
	padding: 1.125rem 1.25rem;
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
	box-shadow: 0 10px 34px rgb(36 41 24 / 22%);
}

.protat-consentement__titre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 0.375rem;
	color: var(--wp--preset--color--encre);
}

.protat-consentement__texte {
	margin: 0 0 0.875rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--encre-douce);
}

.protat-consentement__texte a {
	color: var(--wp--preset--color--vert-fonce);
	font-weight: 600;
}

.protat-consentement__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.protat-consentement__bouton {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0 1.125rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 8px;
	border: 2px solid var(--wp--preset--color--vert-fonce);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.protat-consentement__bouton--oui {
	background: var(--wp--preset--color--vert-fonce);
	color: #fff;
}

.protat-consentement__bouton--oui:hover {
	background: var(--wp--preset--color--vert-nuit);
}

.protat-consentement__bouton--non {
	background: transparent;
	color: var(--wp--preset--color--vert-fonce);
}

.protat-consentement__bouton--non:hover {
	background: var(--wp--preset--color--vert-pale);
}

.protat-consentement__bouton--discret {
	border-color: var(--wp--preset--color--bordure);
	background: transparent;
	color: var(--wp--preset--color--encre-douce);
	font-weight: 600;
}

.protat-consentement__bouton--discret:hover {
	border-color: var(--wp--preset--color--encre-douce);
	color: var(--wp--preset--color--encre);
}

.protat-consentement__bouton:active {
	transform: translateY(1px);
}

/* --- Panneau de gestion ---------------------------------------- */

.protat-consentement__detail {
	margin-top: 1rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--wp--preset--color--bordure);
}

.protat-consentement__intro {
	margin: 0 0 0.875rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--encre-douce);
}

.protat-consentement__choix {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0;
	padding: 0.75rem 0;
	border-top: 1px solid var(--wp--preset--color--bordure);
}

.protat-consentement__choix:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.protat-consentement__libelle {
	font-size: 0.8125rem;
	line-height: 1.45;
}

.protat-consentement__libelle strong {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--encre);
}

.protat-consentement__libelle span {
	color: var(--wp--preset--color--encre-douce);
}

.protat-consentement__toujours {
	flex: 0 0 auto;
	align-self: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--vert-fonce);
	white-space: nowrap;
}

/*
 * L'interrupteur.
 *
 * La case reste une vraie `input[type="checkbox"]` : elle garde son
 * comportement au clavier, son état pour les lecteurs d'écran et sa
 * liaison au libellé. Seule son apparence change. Un interrupteur
 * dessiné en `div` avec un `onclick` aurait perdu les trois.
 */
.protat-consentement__bascule {
	flex: 0 0 auto;
	align-self: center;
	position: relative;
	width: 46px;
	height: 26px;
	margin: 0;
	appearance: none;
	background: #c9cec0;
	border: 0;
	border-radius: 13px;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.protat-consentement__bascule::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgb(36 41 24 / 35%);
	transition: transform 0.18s ease;
}

.protat-consentement__bascule:checked {
	background: var(--wp--preset--color--vert-fonce);
}

.protat-consentement__bascule:checked::after {
	transform: translateX(20px);
}

.protat-consentement__detail .protat-consentement__actions {
	margin-top: 1rem;
}

.protat-consentement button:focus-visible,
.protat-consentement__bascule:focus-visible {
	outline: 2px solid var(--wp--preset--color--rouge);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.protat-consentement__bascule,
	.protat-consentement__bascule::after,
	.protat-consentement__bouton {
		transition: none;
	}
}

@media (width <= 600px) {
	.protat-consentement {
		padding: 0.5rem;
	}

	.protat-consentement__boite {
		padding: 1rem;
	}

	.protat-consentement__actions .protat-consentement__bouton {
		flex: 1 1 100%;
	}
}

/*
 * La barre d'action mobile est elle aussi fixée en bas de l'écran :
 * les deux se superposeraient. Tant qu'un choix reste à faire, la
 * bannière passe devant et la barre s'efface.
 */
body.protat-consentement-ouvert .protat-barre-action {
	display: none;
}

@media print {
	.protat-consentement {
		display: none;
	}
}

/* --------------------------------------------------------------
 * Carte en attente de consentement
 *
 * L'encart occupe exactement la place de la carte, pour que la page
 * ne saute pas quand le visiteur l'accepte.
 * -------------------------------------------------------------- */

.protat-carte__attente {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	width: 100%;
	min-height: 480px;
	padding: 2rem 1.75rem;
	text-align: center;
	background: var(--wp--preset--color--vert-pale);
	color: var(--wp--preset--color--vert-fonce);
}

.protat-carte__attente-texte {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
}

.protat-carte__attente-bouton {
	min-height: 48px;
	padding: 0 1.625rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--vert-fonce);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.protat-carte__attente-bouton:hover {
	background: var(--wp--preset--color--vert-nuit);
}

.protat-carte__attente-bouton:focus-visible {
	outline: 2px solid var(--wp--preset--color--rouge);
	outline-offset: 2px;
}

.protat-carte__attente-mention {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--encre-douce);
}

@media (width <= 781px) {
	.protat-carte__attente {
		min-height: 320px;
	}
}

/* Le lien de révocation du pied de page : un bouton, parce qu'il déclenche
   une action et ne mène pas à une page. Il doit toutefois se lire comme les
   liens qui l'entourent. */
.protat-pied-consentement {
	margin: 0;
}

.protat-pied-consentement button {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--wp--preset--color--vert-pale);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	min-height: 44px;
}

.protat-pied-consentement button:hover {
	color: #fff;
}

.protat-pied-consentement button:focus-visible {
	outline: 2px solid var(--wp--preset--color--vert-pale);
	outline-offset: 2px;
}

/* --------------------------------------------------------------
 * Barre d'action mobile
 *
 * Visible sous 781 px seulement : en desktop, l'en-tête collant
 * porte déjà « Devenir client » en permanence.
 * -------------------------------------------------------------- */

.protat-barre-action {
	display: none;
}

@media (width <= 781px) {
	.protat-barre-action {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		gap: 1px;
		background: var(--wp--preset--color--bordure);
		box-shadow: 0 -4px 16px rgb(36 41 24 / 16%);
		/* Respecte la zone réservée des téléphones à encoche. */
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.protat-barre-action__principal,
	.protat-barre-action__second {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 54px;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		text-decoration: none;
	}

	.protat-barre-action__principal {
		flex: 1 1 auto;
		background: var(--wp--preset--color--rouge);
		color: #fff;
	}

	.protat-barre-action__second {
		flex: 0 0 30%;
		background: var(--wp--preset--color--blanc);
		color: var(--wp--preset--color--vert-fonce);
	}

	.protat-barre-action a:active {
		filter: brightness(0.92);
	}

	.protat-barre-action a:focus-visible {
		outline: 2px solid var(--wp--preset--color--encre);
		outline-offset: -4px;
	}

	/*
	 * La barre masquerait la fin du pied de page : on rend la hauteur au
	 * document plutôt que de laisser du contenu inaccessible.
	 */
	body {
		padding-bottom: 54px;
	}

}

@media print {
	.protat-barre-action {
		display: none;
	}
}