/*
 * Feuille du site : l'habillage commun propre à ce site (en-tête, pied, boutons, éléments partagés
 * par plusieurs sections). Chargée par la base (inc/assets.php, poignée dqb-site) après les feuilles
 * de la base et des composants, avant celles des sections. Fichier du site : la mise à niveau de la
 * base n'y touche jamais. Le style d'une section reste dans sections/<slug>/<slug>.css.
 */

/*
 * Habillage commun d'East Coast : bandeau du haut, en-tête (barre, tiroir mobile, boutons du menu),
 * pied, barre fixe mobile, boutons, pages sans modèle, bandeau de cookies, animations communes
 * (parallaxe, dévoilement, trait, barre de progression). Repris de composants/socle/socle.css à la
 * mise à niveau 1.9.0 ; le PHP et le JS du socle restent dans composants/socle/. Chargée après
 * entete.css et pied.css : à spécificité égale, ces règles l'emportent.
 * Mobile-first ; la maquette bascule à 900 px, le site au point 992 de la base.
 */

/* Réglages des apparitions de la base (brique apparition) pour tout le site : maquette plus ample. */
body {
	--apparition-duree: var(--duree-apparition);
	--apparition-distance: var(--espace-7);
}

/* Pas de défilement de la page derrière le tiroir mobile ouvert, ni de barre mobile par-dessus. */
html:has(.dqb-navigation.is-open) {
	overflow: hidden;

	& .dqb-barre-mobile {
		display: none;
	}

	/* Le bandeau (z-index 51) repasse sous le tiroir et son voile. */
	& .dqb-bandeau {
		z-index: auto;
	}
}

/* ---------- Titres ---------- */

/* Titres de section de la maquette : serrés, équilibrés ; la mise en valeur (em du titre) est en couleur principale, droite. */
h1,
h2 {
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.dqb-section :is(h1, h2) em {
	color: var(--couleur-primaire);
	font-style: normal;
}

/* ---------- Boutons communs ---------- */

/* Boutons à l'épaisseur de la maquette (demande de recette, 2026-10-20) : la cible tactile garde 44 px
   par un pseudo-élément invisible, centré sur le bouton, qui ne prend pas de place. */
:is(.dqb-bouton, .dqb-bouton-contour, .dqb-bouton-clair, .dqb-entete__bouton, .dqb-pied__bouton, .dqb-bandeau__lien, .dqb-menu-bouton > a) {
	position: relative;

	&::before {
		content: "";
		position: absolute;
		inset: 50% 0 auto;
		min-height: var(--cible-tactile);
		translate: 0 -50%;
	}
}

.dqb-bouton,
.dqb-bouton-contour,
.dqb-bouton-clair {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--espace-2);
	padding: var(--bouton-padding);
	border: 1px solid var(--couleur-primaire);
	border-radius: var(--rayon-pilule);
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--duree-rapide) var(--courbe),
		color var(--duree-rapide) var(--courbe),
		translate var(--duree-rapide) var(--courbe),
		box-shadow var(--duree-rapide) var(--courbe);
}

.dqb-bouton {
	background: var(--couleur-primaire);
	color: var(--couleur-sur-primaire);

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

.dqb-bouton-contour {
	background: transparent;
	color: var(--couleur-primaire);

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

.dqb-bouton-clair {
	border-color: var(--couleur-fond);
	background: var(--couleur-fond);
	color: var(--couleur-texte);

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

@media (hover: hover) {
	.dqb-bouton:hover,
	.dqb-bouton-clair:hover {
		translate: 0 var(--soulevement-court);
	}
}

/* ---------- Pages sans modèle (mentions légales, confidentialité, cookies) ---------- */

/* page.php de la base (article en conteneur étroit) : pas de maquette, habillage d'après la DA du site. */
.page-template-default .type-page {
	--pile-espace: var(--espace-6);

	& h1 {
		font-size: var(--taille-h2);
	}
}

.page-template-default .type-page .dqb-contenu {
	color: var(--couleur-texte-intro);

	& h2 {
		margin-block-start: var(--espace-6);
		color: var(--couleur-texte);
		font-size: var(--taille-h3);
	}

	& h3 {
		color: var(--couleur-texte);
		font-size: var(--taille-h4);
	}

	/* Liens du texte en or clair (11,6:1 sur le fond sombre) : ces pages n'ont pas de maquette. */
	& a {
		color: var(--couleur-accent);
	}

	& a:hover {
		color: var(--couleur-texte);
	}
}

/* ---------- Bandeau de consentement (Complianz) ---------- */

/* Complianz pose ses couleurs en variables sur :root (uploads/complianz/css/banner-1-optin.css, régénéré
   par ses réglages) : redéfinies sur le bandeau lui-même, elles l'emportent quel que soit l'ordre des
   feuilles. Formes et couleurs du site : fond sombre, bouton d'acceptation en or clair (encre dessus,
   10,9:1). */
.cmplz-cookiebanner,
.cmplz-manage-consent {
	--cmplz_banner_background_color: var(--couleur-surface);
	--cmplz_banner_border_color: var(--couleur-trait);
	--cmplz_banner_border_radius: var(--rayon-l);
	--cmplz_text_color: var(--couleur-texte);
	--cmplz_hyperlink_color: var(--couleur-accent);
	--cmplz_button_accept_background_color: var(--couleur-accent);
	--cmplz_button_accept_border_color: var(--couleur-accent);
	--cmplz_button_accept_text_color: var(--couleur-sur-primaire);
	--cmplz_button_deny_background_color: var(--couleur-fond);
	--cmplz_button_deny_border_color: var(--couleur-accent);
	--cmplz_button_deny_text_color: var(--couleur-accent);
	--cmplz_button_settings_background_color: var(--couleur-fond);
	--cmplz_button_settings_border_color: var(--couleur-trait);
	--cmplz_button_settings_text_color: var(--couleur-texte);
	--cmplz_button_border_radius: var(--rayon-pilule);
	--cmplz_slider_active_color: var(--couleur-primaire);
	--cmplz_slider_inactive_color: var(--couleur-trait-champ);
	--cmplz_category_header_always_active_color: var(--couleur-accent);
	font-family: var(--police-texte);
}

/* Panneau des préférences : Complianz pose un fond gris clair fixe sur chaque catégorie (0,3,0). */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: var(--couleur-fond-alterne);
}

/* (0,3,1) : la règle des boutons de Complianz pèse (0,3,0), .cmplz-cookiebanner .cmplz-buttons .cmplz-btn. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-weight: var(--graisse-forte);
}

/* ---------- Bandeau du haut ---------- */

/* Au-dessus de l'en-tête collant (z-index 50) : la cible tactile du lien (::before de 44 px) déborde
   sous le bandeau aminci sans être masquée. */
.dqb-bandeau {
	position: relative;
	z-index: 51;
	background: var(--couleur-primaire);
	color: var(--couleur-sur-primaire);
	font-size: var(--taille-petite);
	line-height: var(--interligne-serre);
}

.dqb-bandeau__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--espace-4);
	padding-block: var(--espace-2);

	@media (min-width: 992px) {
		justify-content: space-between;
	}
}

.dqb-bandeau__texte {
	display: none;
	margin: 0;

	@media (min-width: 992px) {
		display: block;
	}
}

.dqb-bandeau__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-1);
	color: var(--couleur-sur-primaire);
	font-weight: var(--graisse-forte);
	text-decoration: none;

	&:hover {
		color: var(--couleur-sur-primaire);
		opacity: 0.85;
	}

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

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

.dqb-entete {
	border-block-end: 0;
	background: none;
	transition: box-shadow var(--duree-rapide) var(--courbe);

	/* Le fond flouté est sur un pseudo-élément : un backdrop-filter sur l'en-tête lui-même en ferait le
	   bloc conteneur du tiroir (position: fixed), réduit alors à la hauteur de l'en-tête. */
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--couleur-fond) 97%, transparent);
		backdrop-filter: var(--flou-entete);
	}

	&.is-defile {
		box-shadow: var(--ombre-carte);
	}
}

.dqb-entete__barre {
	gap: var(--espace-5);
	padding-block: var(--espace-3);
}

.dqb-entete__marque img {
	width: auto;
	height: var(--hauteur-logo-entete);
	max-height: none;
}

/* Bouton de l'en-tête (Contact) : visible aussi en mobile, comme dans la maquette. */
.dqb-entete__bouton {
	display: inline-flex;
	min-height: 0;
	padding: var(--bouton-padding-petit);
	font-size: var(--taille-petite);
	line-height: var(--interligne-serre);
	white-space: nowrap;
	transition:
		background-color var(--duree-rapide) var(--courbe),
		translate var(--duree-rapide) var(--courbe);

	@media (hover: hover) {
		&:hover {
			translate: 0 -1px;
		}
	}
}

.dqb-entete__actions {
	gap: var(--espace-3);
}

/* Burger : un rond avec l'icône seule ; son nom (« Menu », « Fermer ») reste pour les lecteurs d'écran. */
.dqb-entete__burger {
	position: relative;
	z-index: 2;
	justify-content: center;
	width: var(--taille-bouton-rond);
	height: var(--taille-bouton-rond);
	padding: 0;
	border: 1px solid var(--couleur-trait);
	background: var(--couleur-fond);
	transition:
		border-color var(--duree-rapide) var(--courbe),
		color var(--duree-rapide) var(--courbe);

	&:hover {
		border-color: var(--couleur-primaire);
		color: var(--couleur-primaire);
	}
}

.dqb-entete__burger-texte {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Liens du menu en barre, dès 992 px : texte seul, couleur au survol. */
.dqb-navigation .menu-item > a {
	font-size: var(--taille-moyenne);
	font-weight: var(--graisse-moyenne);
	transition: color var(--duree-rapide) var(--courbe);

	&:hover,
	&[aria-current="page"] {
		background: none;
		color: var(--couleur-primaire);
	}
}

.dqb-navigation__liste {
	@media (min-width: 992px) {
		gap: var(--espace-5);
	}
}

/* Dès 992 px, le menu se range à droite, contre les actions (maquette), et non contre le logo. */
.dqb-navigation {
	@media (min-width: 992px) {
		margin-inline-start: auto;
	}
}

.dqb-entete__actions {
	@media (min-width: 992px) {
		margin-inline-start: 0;
	}
}

/* Classes de menu (Apparence > Menus > Classes CSS) : dqb-menu-mobile (dans le tiroir seulement),
   dqb-menu-bouton (bouton contour), dqb-menu-bouton-plein (bouton plein). */
.dqb-navigation .dqb-menu-mobile {
	@media (min-width: 992px) {
		display: none;
	}
}

.dqb-navigation .dqb-menu-bouton > a,
.dqb-navigation .dqb-menu-bouton-plein > a {
	justify-content: center;
	border: 1px solid var(--couleur-primaire);
	border-radius: var(--rayon-pilule);
	font-weight: var(--graisse-forte);
}

.dqb-navigation .dqb-menu-bouton > a {
	color: var(--couleur-primaire);

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

.dqb-navigation .dqb-menu-bouton-plein > a {
	background: var(--couleur-primaire);
	color: var(--couleur-sur-primaire);

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

.dqb-navigation .dqb-menu-bouton {
	@media (min-width: 992px) {
		margin-inline-start: var(--espace-2);
	}
}

.dqb-navigation .dqb-menu-bouton > a {
	@media (min-width: 992px) {
		min-height: 0;
		padding: var(--bouton-padding-petit);
		font-size: var(--taille-petite);
		line-height: var(--interligne-serre);
	}
}

/* Tiroir mobile : panneau à droite, sur toute la hauteur, sur un voile ; le burger reste au-dessus
   et sert de bouton « Fermer ». Il glisse à l'ouverture (rien en mouvement réduit). */
@keyframes dqb-tiroir {
	from {
		translate: 105% 0;
	}
}

.dqb-js .dqb-navigation.is-open {
	/* Le panneau n'est ouvert que sous 992 px : entete.js le ferme au passage en grand écran. */
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 1;
	width: var(--largeur-tiroir);
	max-height: none;
	padding: var(--retrait-tiroir) var(--espace-5) calc(var(--espace-5) + env(safe-area-inset-bottom));
	border: 0;
	border-radius: var(--rayon-xl) 0 0 var(--rayon-xl);
	box-shadow: 0 0 0 100vmax var(--voile-tiroir);
	animation: dqb-tiroir var(--duree-tiroir) var(--courbe-tiroir);
}

.dqb-navigation.is-open .dqb-navigation__liste {
	gap: var(--espace-1);

	& > .menu-item:not(.dqb-menu-bouton, .dqb-menu-bouton-plein) > a {
		justify-content: space-between;
		min-height: var(--hauteur-ligne-tiroir);
		padding: 0 var(--espace-4);
		border-radius: var(--rayon-m);
		background: var(--couleur-surface);
		font-size: var(--taille-grande);
		font-weight: var(--graisse-forte);
	}

	& > .menu-item:not(.dqb-menu-bouton, .dqb-menu-bouton-plein) > a::after {
		content: "";
		width: var(--taille-icone-ligne);
		height: var(--taille-icone-ligne);
		background: var(--couleur-primaire);
		mask: url("../icones/materiel/chevron-right.svg") center / contain no-repeat;
	}
}

.dqb-navigation.is-open .dqb-menu-bouton,
.dqb-navigation.is-open .dqb-menu-bouton-plein {
	margin-block-start: var(--espace-2);

	& > a {
		min-height: var(--hauteur-bouton-grand);
	}
}

/* ---------- Pied ---------- */

.dqb-pied {
	margin-block-start: 0;
	padding-block: var(--espace-7) 0;
	border-block-start: 1px solid var(--couleur-pied-trait);
	background: var(--couleur-pied-fond);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-moyenne);
	text-align: center;

	@media (min-width: 576px) {
		text-align: start;
	}
}

.dqb-pied__grille {
	gap: var(--espace-6);
	justify-items: center;

	@media (min-width: 576px) {
		justify-items: start;
	}

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

.dqb-pied__marque {
	align-items: center;

	@media (min-width: 576px) {
		align-items: flex-start;
	}
}

.dqb-pied__logo img {
	width: auto;
	height: var(--hauteur-logo-pied);
	max-height: none;
}

.dqb-pied__slogan {
	opacity: 1;
}

.dqb-pied__titre {
	margin-block-end: var(--espace-2);
	color: var(--couleur-texte);
	font-size: var(--taille-moyenne);
	letter-spacing: 0;
	text-transform: none;
	opacity: 1;
}

.dqb-pied__liens {
	display: flex;
	flex-direction: column;
	gap: var(--espace-2);
}

/* Sans hauteur minimale, comme la maquette (demande de recette, 2026-10-20). */
.dqb-pied__liens a {
	min-height: 0;
	color: var(--couleur-texte-doux);

	&:hover {
		color: var(--couleur-primaire);
		text-decoration: none;
	}
}

.dqb-pied__logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-3);
	margin: 0;
	padding: 0;
	list-style: none;

	@media (min-width: 576px) {
		align-items: flex-start;
	}

	& img {
		width: auto;
		height: var(--hauteur-logo-marque);
	}
}

.dqb-pied__projet {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-3);

	@media (min-width: 576px) {
		align-items: flex-start;
	}

	& p {
		margin: 0;
	}
}

.dqb-pied .dqb-pied__bouton {
	display: inline-flex;
	align-items: center;
	padding: var(--bouton-padding-petit);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-primaire);
	color: var(--couleur-sur-primaire);
	font-weight: var(--graisse-forte);
	line-height: var(--interligne-serre);
	text-decoration: none;

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

.dqb-pied__bas {
	justify-content: center;
	gap: var(--espace-2) var(--espace-5);
	margin-block-start: var(--espace-6);
	padding-block: var(--espace-4) var(--espace-5);
	border-block-start-color: var(--couleur-trait);
	color: var(--couleur-texte-attenue);
	font-size: var(--taille-mini);

	@media (min-width: 576px) {
		justify-content: flex-start;
	}

	& p {
		margin: 0;
	}
}

.dqb-pied__credit a {
	color: var(--couleur-texte-doux);
	text-decoration: underline;

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

.dqb-pied__legal {
	gap: var(--espace-2) var(--espace-5);

	& a {
		color: var(--couleur-texte-attenue);
		text-decoration: none;
	}

	& a:hover {
		color: var(--couleur-primaire);
	}
}

/* ---------- Barre fixe mobile ---------- */

.dqb-barre-mobile {
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: var(--espace-2);
	padding: var(--espace-2) var(--espace-3) calc(var(--espace-2) + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--couleur-fond) 97%, transparent);
	box-shadow: var(--ombre-barre);

	@media (min-width: 992px) {
		display: none;
	}
}

.dqb-barre-mobile__lien {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hauteur-bouton-barre);
	border: 1px solid var(--couleur-primaire);
	border-radius: var(--rayon-pilule);
	color: var(--couleur-primaire);
	font-size: var(--taille-moyenne);
	font-weight: var(--graisse-forte);
	text-decoration: none;

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

	&:nth-child(2) {
		background: var(--couleur-primaire);
		color: var(--couleur-sur-primaire);
	}
}

.dqb-barre-mobile__reserve {
	height: var(--hauteur-barre-mobile);

	@media (min-width: 992px) {
		display: none;
	}
}

/* ---------- Animations communes (socle.js) ---------- */

/* Barre de progression de la lecture, en haut de l'écran. */
.dqb-progression {
	position: fixed;
	inset: 0 0 auto;
	z-index: 9999;
	height: var(--epaisseur-progression);
	background: var(--couleur-primaire);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* Dévoilement de haut en bas (clip) et trait qui se dessine : masqués seulement quand socle.js est
   prêt (dqb-socle-pret sur <html>), jamais sans JS ni en mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
	.dqb-socle-pret [data-dqb-devoile] {
		&:not(.is-visible) {
			clip-path: inset(0 0 100% 0);
		}

		&.is-visible {
			clip-path: inset(0);
			transition: clip-path var(--duree-devoile) var(--courbe-apparition);
		}
	}

	.dqb-socle-pret [data-dqb-trait] {
		transform-origin: 0 50%;

		&:not(.is-visible) {
			transform: scaleX(0);
		}

		&.is-visible {
			transform: none;
			transition: transform var(--duree-trait) var(--courbe-apparition);
		}
	}
}

/* Parallaxe : l'image, plus grande que son cadre, glisse dedans (socle.js pose la transformation). */
[data-dqb-parallaxe] {
	will-change: transform;
}

/* Logos du groupe (Ligne Spa, Promo Balneo, Promo Sauna) sur le fond sombre de la charte : fournis en
   couleur sur fond clair, ils sont passés en blanc, comme sur les aperçus du client. À retirer quand
   les versions claires seront dans la médiathèque. */
.dqb-presentation__logo img,
.dqb-pied__logos img,
.dqb-partenaire__logo img {
	filter: brightness(0) invert(1);
}