/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================================
   Socle Janès : règles que les réglages Bricks ne couvrent pas.
   Couleurs uniquement via les variables de la palette « Thème Janès ».
   ========================================================= */

/* Texte basique sans marge par défaut : Bricks ajoute margin-block: 0 1.2em à tout <p>
   (couche « bricks »), alors que la maquette espace les blocs par des écarts (gap).
   Spécificité nulle : une marge posée par classe ou sur l'élément reste prioritaire.
   Les paragraphes d'un élément Texte enrichi gardent leur marge. */
:where(.brxe-text-basic) {
	margin-block: 0;
}

/* Même principe pour l'élément Titre : Bricks ajoute margin-block: 1.2em 0 à un titre
   qui suit le dernier paragraphe de son parent (ex. surtitre puis H2). */
:where(.brxe-heading) {
	margin-block: 0;
}

/* Mot mis en valeur dans un titre : <span class="mise-en-valeur"> dans le texte
   d'un élément Titre. Bricks ne charge une classe globale que si elle est posée
   sur un élément, d'où ce relais pour l'usage en ligne. */
.mise-en-valeur {
	color: var(--couleur-primaire-fonce);
}

.section--sombre .mise-en-valeur {
	color: var(--couleur-primaire);
}

/* Fin de texte facultative : <span class="masque-mobile"> dans un texte, masqué en mobile portrait
   (jusqu'à 478 px). Sert quand un surtitre ne tient pas sur une ligne à 390 px,
   ex. « Emballages & menuiserie<span class="masque-mobile"> · depuis 2002</span> ». */
@media (max-width: 478px) {
	.masque-mobile {
		display: none;
	}
}

/* Focus clavier visible (AA) : anneau de 2 px décalé, primaire foncé sur fond clair,
   primaire dans tout conteneur « --sombre » (section--sombre…). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--couleur-primaire-fonce);
	outline-offset: 2px;
}

:where([class*="--sombre"]) :focus-visible {
	outline-color: var(--couleur-primaire);
}

/* Menu mobile (classe menu-mobile, élément Hors-canvas) : Bricks passe le panneau en colonne avec
   retour à la ligne. Quand le contenu dépasse l'écran (sous-menu « Produits » ouvert, petit écran),
   le bloc du bas partait dans une seconde colonne à droite. Sans retour à la ligne, le panneau défile.
   L'élément Hors-canvas n'a pas de réglage natif pour flex-wrap. */
.menu-mobile.brxe-offcanvas .brx-offcanvas-inner {
	flex-wrap: nowrap;
}

/* Mouvement réduit : transitions, animations et défilement doux neutralisés. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/* Lien dans le texte d'une case à cocher du formulaire (consentement RGPD → politique de
   confidentialité) : même traitement que les liens des pages légales (classe bloc-legal-texte).
   Le texte des options vient du réglage du champ, aucune classe ne peut y être posée. */
.formulaire .options-wrapper label a {
	color: var(--texte-titre);
	text-decoration: underline;
	text-decoration-color: var(--couleur-primaire);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.formulaire .options-wrapper label a:hover {
	color: var(--couleur-primaire-fonce);
}

/* Mention reCAPTCHA sous le formulaire (le badge Google est masqué par Bricks : Google exige
   alors cette mention visible). Elle partage la ligne du bouton d'envoi et passe sur deux lignes
   si besoin ; en dessous de 768 px, la classe « formulaire » la met sur toute la largeur. */
.formulaire .form-group:has(.formulaire-protection) {
	flex: 1 1 0;
	min-width: 0;
	padding-right: 16px;
}

/* Formulaire étroit (moins de 628 px, conteneur de la classe formulaire-adaptatif) : la mention
   passe sur toute la largeur, le bouton dessous. */
@container (max-width: 627px) {
	.formulaire .form-group:has(.formulaire-protection) {
		flex-basis: 100%;
		padding-right: 0;
	}
}

/* Conteneur reCAPTCHA ajouté par Bricks (vide, sauf alerte d'erreur) : sans boîte propre, il ne
   prend plus une ligne entière entre la mention et le bouton. L'alerte reste affichable. */
.formulaire .form-group.captcha {
	display: contents;
}

.formulaire .formulaire-protection a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.formulaire .formulaire-protection a:hover {
	color: var(--texte-titre);
}

/* Pastilles « Vous êtes » : largeurs égales quand la place le permet, mais jamais plus étroites
   que leur contenu (sinon « Professionnel », en gras une fois coché, touche la bordure). */
.formulaire.formulaire .form-group[role="radiogroup"] li {
	min-width: max-content;
}

/* Bouton d'envoi du formulaire : même survol que bouton--sombre (fond couleur dominante, texte sombre
   pour garder le contraste AA ; le blanc sur le primaire JWI ne l'atteint pas). */
.formulaire.formulaire button[type="submit"]:hover {
	background-color: var(--couleur-primaire);
	color: var(--texte-titre);
}

/* =========================================================
   Bandeau cookies Complianz (non maquetté) : couleurs, rayons et textes branchés sur les variables
   du thème, à la place des réglages de couleurs de l'extension. Accepter et Refuser ont le même
   poids visuel (recommandation CNIL) : style bouton--sombre ; Préférences : style bouton--contour.
   ========================================================= */
:root:root {
	--cmplz_banner_width: 560px;
	--cmplz_banner_background_color: var(--neutre-blanc);
	--cmplz_banner_border_color: var(--neutre-ligne);
	--cmplz_banner_border_radius: var(--rayon-carte);
	--cmplz_title_font_size: var(--taille-bouton);
	--cmplz_text_color: var(--texte-courant);
	--cmplz_text_font_size: var(--taille-petit);
	--cmplz_link_font_size: var(--taille-petit);
	--cmplz_category_body_font_size: var(--taille-petit);
	--cmplz_hyperlink_color: var(--texte-titre);
	--cmplz_button_font_size: var(--taille-bouton);
	--cmplz_button_border_radius: var(--rayon-pilule);
	--cmplz_button_accept_background_color: var(--couleur-sombre);
	--cmplz_button_accept_border_color: var(--couleur-sombre);
	--cmplz_button_accept_text_color: var(--neutre-blanc);
	--cmplz_button_deny_background_color: var(--couleur-sombre);
	--cmplz_button_deny_border_color: var(--couleur-sombre);
	--cmplz_button_deny_text_color: var(--neutre-blanc);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--couleur-sombre);
	--cmplz_button_settings_text_color: var(--texte-titre);
	--cmplz_category_header_always_active_color: var(--couleur-primaire-fonce);
	--cmplz_category_header_active_font_size: var(--taille-petit);
	--cmplz_slider_active_color: var(--couleur-primaire-fonce);
	--cmplz_slider_inactive_color: var(--texte-discret);
	--cmplz_slider_bullet_color: var(--neutre-blanc);
}

.cmplz-cookiebanner.cmplz-cookiebanner {
	box-shadow: var(--ombre-carte);
}

.cmplz-cookiebanner .cmplz-title {
	font-weight: 600;
	color: var(--texte-titre);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-btn {
	min-height: 50px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
	border-color: var(--couleur-primaire);
	background-color: var(--couleur-primaire);
	color: var(--texte-titre);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	background-color: var(--couleur-sombre);
	color: var(--neutre-blanc);
}

.cmplz-cookiebanner .cmplz-links .cmplz-link {
	text-decoration-color: var(--couleur-primaire);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Onglet flottant « Gérer le consentement » masqué : le lien « Gestion des cookies » du pied de page
   (js/consentement.js) rouvre le bandeau sur toutes les pages. */
#cmplz-manage-consent .cmplz-manage-consent.cmplz-manage-consent {
	display: none;
}

/* =========================================================
   Carte Mapbox du composant « Accès et carte » (js/carte-acces.js), chargée après consentement.
   ========================================================= */
/* Sélecteur doublé : la feuille Mapbox, chargée après, pose .mapboxgl-map { position: relative }. */
.acces-carte .acces-carte-mapbox {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.acces-carte--chargee .acces-carte-mapbox.acces-carte-mapbox {
	opacity: 1;
}

/* La feuille Mapbox impose Helvetica à toute la carte : le repère et les crédits gardent la police du thème
   (les crédits gardent leur taille Mapbox). */
.acces-carte .acces-carte-mapbox.mapboxgl-map {
	font-family: inherit;
}

/* Le repère de la maquette devient le marqueur Mapbox : sa position vient alors de la carte. */
.acces-carte .acces-repere.mapboxgl-marker {
	top: 0;
	left: 0;
}

/* Carte chargée : la mention « chargée après consentement » n'a plus lieu d'être et laisserait
   les crédits Mapbox sous elle en mobile. */
.acces-carte--chargee .acces-note.brxe-div {
	display: none;
}

/* =========================================================
   Politique de cookies : document généré par Complianz (élément Shortcode dans l'emplacement « Blocs »
   du composant « Contenu légal »), mis à l'image des « Bloc légal » (titre H2 au style H3 avec repère
   primaire, texte L, liens soulignés en primaire). Complianz style son document par identifiant
   (#cmplz-document) : les règles reprennent cet identifiant pour passer devant.
   ========================================================= */
.contenu-legal-blocs #cmplz-document {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: none;
	margin: 0;
	font-size: var(--taille-texte-l);
	line-height: 1.65;
	color: var(--texte-courant);
}

.contenu-legal-blocs #cmplz-document > *,
.contenu-legal-blocs #cmplz-document p,
.contenu-legal-blocs #cmplz-document li {
	margin: 0;
	font-size: inherit;
}

/* Titre de section : 40 px avec le bloc précédent (28 px + écart de 12 px), comme entre deux Bloc légal. */
.contenu-legal-blocs #cmplz-document h2 {
	display: flex;
	align-items: center;
	margin: 28px 0 0;
	padding: 0;
	border: 0;
	font-size: var(--taille-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--texte-titre);
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
}

.contenu-legal-blocs #cmplz-document h2::before {
	content: "";
	flex-shrink: 0;
	align-self: flex-start;
	width: 8px;
	height: 28px;
	margin: calc((1.3em - 28px) / 2) 12px 0 0;
	border-radius: 4px;
	background-color: var(--couleur-primaire);
}

.contenu-legal-blocs #cmplz-document h3 {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	font-size: var(--taille-h4);
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	color: var(--texte-titre);
}

.contenu-legal-blocs #cmplz-document a {
	color: var(--texte-titre);
	text-decoration: underline;
	text-decoration-color: var(--couleur-primaire);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.contenu-legal-blocs #cmplz-document a:hover {
	color: var(--couleur-primaire-fonce);
}

/* Focus : l'anneau commun du thème remplace la bordure ajoutée par Complianz ; pas d'icône de lien externe. */
.contenu-legal-blocs #cmplz-document a:focus {
	padding: 0;
	border: 0;
}

.contenu-legal-blocs #cmplz-document a[target="_blank"]::after {
	content: none;
}

.contenu-legal-blocs #cmplz-document ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

.contenu-legal-blocs #cmplz-document li::marker {
	color: var(--couleur-primaire);
}

/* 7.1 Réglages de consentement : catégories en cartes neutres, case à cocher aux couleurs du thème
   (sélecteurs repris de Complianz, qui passe par identifiant et classe doublée). */
.contenu-legal-blocs #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.contenu-legal-blocs #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--neutre-ligne);
	border-radius: 12px;
	background-color: var(--neutre-fond);
}

.contenu-legal-blocs #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	padding: 12px 16px;
	background-color: transparent;
}

.contenu-legal-blocs #cmplz-manage-consent-container .cmplz-category-title {
	font-size: var(--taille-texte);
	font-weight: 600;
	line-height: 1.4;
	color: var(--texte-titre);
}

.contenu-legal-blocs #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
	padding: 0 16px 14px;
	font-size: var(--taille-petit);
	line-height: 1.55;
	color: var(--texte-courant);
}

.contenu-legal-blocs #cmplz-manage-consent-container input.cmplz-consent-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--couleur-primaire-fonce);
	cursor: pointer;
}

/* Mobile (point de rupture « mobile paysage » de Bricks) : 32 px entre sections, comme les Bloc légal.
   Le balisage vient de Complianz : aucune classe Bricks ne peut le porter. */
@media (max-width: 767px) {
	.contenu-legal-blocs #cmplz-document h2 {
		margin-top: 20px;
	}
}

/* =========================================================
   Appel à l'action : halos en dégradés radiaux au lieu de filter: blur(), posé dans le CSS de la classe
   appel-action (non modifiable après création). Sur iPhone, Safari ne peignait pas le flou sous les
   éléments composités (photos rondes avec ombre, boutons) : rectangles nets à leur place. Les dégradés
   reprennent la couleur et l'emprise du disque flouté (profil gaussien : 76 / 50 / 24 % à -1σ / 0 / +1σ).
   Mêmes valeurs à toutes les largeurs, comme le rendu validé au lot 2 (les @media de la classe ne
   s'appliquaient pas, Bricks les émettant avant la règle de base).
   ========================================================= */
.appel-action.brxe-section::before,
.appel-action.brxe-section::after {
	border-radius: 0;
	background-color: transparent;
	filter: none;
}

.appel-action.brxe-section::before {
	left: -300px;
	top: -340px;
	width: 840px;
	height: 840px;
	background-image: radial-gradient(closest-side,
		var(--couleur-primaire-doux) 33.3%,
		color-mix(in srgb, var(--couleur-primaire-doux) 76%, transparent) 50%,
		color-mix(in srgb, var(--couleur-primaire-doux) 50%, transparent) 66.7%,
		color-mix(in srgb, var(--couleur-primaire-doux) 24%, transparent) 83.3%,
		transparent);
}

.appel-action.brxe-section::after {
	right: -340px;
	top: 40px;
	width: 880px;
	height: 880px;
	background-image: radial-gradient(closest-side,
		var(--couleur-secondaire-doux) 27.3%,
		color-mix(in srgb, var(--couleur-secondaire-doux) 76%, transparent) 45.5%,
		color-mix(in srgb, var(--couleur-secondaire-doux) 50%, transparent) 63.6%,
		color-mix(in srgb, var(--couleur-secondaire-doux) 24%, transparent) 81.8%,
		transparent);
}