/*
Theme Name: Les Fées Spéciales
Description: Thème du site des Fées Spéciales (block theme), successeur du thème Bridge.
Version: 0.2.4
Requires at least: 7.1
Requires PHP: 8.3
Text Domain: lfs
*/

/* Les styles de base sont dans theme.json ; ici, ce qu'il ne sait pas exprimer. */

/* --- Liens : bleu de l'ancien site, même bleu pour le texte et les icônes ---- */
a:where(:not(.wp-element-button)):active {
	color: var(--wp--preset--color--link-hover);
}

/* titres-liens : couleur du titre, prune au survol, comme l'ancien site */
:is(h1, h2, h3, h4, h5, h6) a {
	color: inherit;
}

:is(h1, h2, h3, h4, h5, h6) a:is(:hover, :focus-visible, :active) {
	color: var(--wp--preset--color--plum);
}

/* pictos SVG des métiers (CSS de page repris de l'ancien site) */
a:is(:hover, :focus-visible, :active) svg .filllayer {
	fill: var(--wp--preset--color--link-hover) !important;
	stroke: var(--wp--preset--color--link-hover) !important;
}

a:is(:hover, :focus-visible, :active) svg .strokelayer {
	stroke: var(--wp--preset--color--link-hover) !important;
}

/* --- En-tête collant, légèrement translucide ------------------------------------
   Le sticky se pose sur le conteneur de la partie de modèle (div.wp-block-template-part),
   enfant direct de .wp-site-blocks : posé sur le <header> lui-même, il resterait
   prisonnier de ce conteneur, qui fait exactement sa hauteur */
.wp-site-blocks > .wp-block-template-part:has(> .lfs-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .lfs-header) {
	top: var(--wp-admin--admin-bar--height, 0);
}

.lfs-header {
	background: rgb(255 255 255 / 0.88);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid rgb(16 0 91 / 0.08);
}

/* en-tête réduit une fois la page défilée (assets/js/header.js) */
.lfs-header,
.lfs-header .lfs-logo img {
	transition: padding 0.25s ease, width 0.25s ease;
}

.lfs-scrolled .lfs-header {
	padding-top: 0.3rem !important;
	padding-bottom: 0.3rem !important;
}

.lfs-header .lfs-logo img {
	display: block;
	width: 130px;
	height: auto;
}

.lfs-scrolled .lfs-header .lfs-logo img {
	width: 80px;
}

@media (prefers-reduced-motion: reduce) {
	.lfs-header,
	.lfs-header .lfs-logo img {
		transition: none;
	}
}

.lfs-header .wp-block-site-logo img {
	height: auto;
}

.lfs-header .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: 0 12px 30px rgb(16 0 91 / 0.12);
	padding: 0.4rem 0;
}

.lfs-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--plum);
}

/* --- Bannière vidéo de l'accueil ---------------------------------------------- */
.lfs-banner {
	margin-top: 0 !important;
}

.lfs-banner video {
	display: block;
	width: 100%;
	max-height: calc(100vh - 80px);
	object-fit: cover;
}

/* --- Contenu repris de l'ancien site ------------------------------------------ */
/* Lignes WPBakery à fond coloré : bandes pleine largeur qui se touchent,
   contenu sur la largeur de la grille de l'ancien site */
.entry-content > .wp-block-group.has-background {
	--wp--style--global--content-size: 1100px;
	max-width: none;
	margin-block: 0;
	/* annule la marge latérale du contenu : d'un bord à l'autre de l'écran */
	margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right)) !important;
	padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
}

/* accueil : vidéo des projets d'un bord à l'autre, entre les bandes */
.home .entry-content > .wp-block-embed {
	max-width: none;
	margin-block: 0;
	margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right)) !important;
}

/* page qui commence par une bande (titre masqué) : collée au menu ;
   qui finit par une bande : collée au pied de page */
main:has(> .entry-content:first-child > .wp-block-group.has-background:first-child) {
	margin-block-start: 0 !important;
	padding-top: 0 !important;
}

main:has(> .entry-content > .wp-block-group.has-background:last-child) {
	padding-bottom: 0 !important;
}

/* Séparateur "titre + filet" de WPBakery */
.lfs-text-separator {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.lfs-text-separator::before,
.lfs-text-separator::after {
	content: "";
	flex: 1;
	border-top: 2px solid var(--wp--preset--color--lavender);
}

/* --- Titres de page : comme les h1 de l'ancien contenu (centré, capitales, filet) */
.lfs-entry-title {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xx-large);
	text-align: center;
	text-transform: uppercase;
}

.lfs-entry-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	margin: 0.6rem auto 0;
	border-top: 2px solid currentColor;
}

/* Petit filet sous les titres, signature de l'ancien site */
.separator.small {
	width: 2.5rem;
	margin-inline: auto;
	border-top: 2px solid currentColor;
}

/* Images de l'ancien éditeur */
.entry-content img {
	max-width: 100%;
	height: auto;
}

.entry-content .alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
.entry-content .alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.entry-content .aligncenter { display: block; margin-inline: auto; }

/* --- Cartes (blog, archives) ------------------------------------------------- */
.lfs-card {
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lfs-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgb(16 0 91 / 0.1);
}

.lfs-card .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}

.lfs-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* en masonry, la hauteur de la carte est celle de son contenu */
[data-lfs-masonry] .lfs-card {
	height: auto;
}

/* --- Filtres des grilles de projets (HTML de l'ancien site : li.filter) ------- */
.filter_holder ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.6rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.filter_holder .filter {
	padding: 0.3rem 0.95rem;
	border: 1px solid rgb(16 0 91 / 0.12);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.filter_holder .filter:hover,
.filter_holder .filter:focus-visible {
	border-color: currentcolor;
	background: var(--wp--preset--color--white);
}

.filter_holder .filter.active {
	border-color: var(--wp--preset--color--night);
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--sun);
}

.filter_outer:last-of-type .filter_holder ul {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* --- Pied de page : gris de l'ancien site (Bridge : #262626 / #818181, blanc au survol) */
.lfs-footer a {
	color: inherit;
	text-decoration-color: rgb(129 129 129 / 0.5);
	text-underline-offset: 0.2em;
	transition: color 0.2s ease-in-out;
}

/* plus spécifique que les titres-liens prune du contenu */
.lfs-footer a:is(:hover, :focus-visible, :active) {
	color: var(--wp--preset--color--white);
	text-decoration-color: currentColor;
}

/* icônes des réseaux : gris, blanches au survol (pas les couleurs des marques) */
.lfs-footer .wp-social-link {
	color: var(--wp--preset--color--ash);
	transition: color 0.2s ease-in-out;
}

.lfs-footer .wp-social-link:is(:hover, :focus-within) {
	color: var(--wp--preset--color--white);
}

.lfs-footer__bottom {
	margin-bottom: 0 !important;
}

.lfs-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lfs-footer h2 {
	margin-bottom: 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.lfs-footer__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

.lfs-footer__logos img {
	display: block;
	height: 56px;
	width: auto;
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
	.lfs-card,
	.lfs-card:hover {
		transition: none;
		transform: none;
	}
}

/* --- Étiquettes au-dessus des titres (date, catégorie) ------------------------ */
.lfs-eyebrow,
.lfs-eyebrow a {
	color: var(--wp--preset--color--plum);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --- Visibilité par taille d'écran (classes WPBakery reprises) ---------------- */
@media (max-width: 767px) { .vc_hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .vc_hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .vc_hidden-md { display: none !important; } }
@media (min-width: 1200px) { .vc_hidden-lg { display: none !important; } }

/* --- Classes utilitaires de l'ancien site (CSS global de Bridge) --------------- */
.centeredMaxSize {
	max-width: 650px;
	margin-inline: auto;
}

.centeredMaxSizeTider {
	max-width: 700px;
}

/* --- Icônes Font Awesome de l'ancien contenu (seuls ces deux chevrons servent) --
   Chevron cerclé dessiné en masque : il prend la couleur du lien, survol compris */
.fa-chevron-circle-right,
.fa-chevron-circle-left {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline: 0.15em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-1.7 4.2a.9.9 0 0 0 0 1.3L8.8 8l-2.5 2.5a.9.9 0 1 0 1.3 1.3l3.15-3.15a.9.9 0 0 0 0-1.3L7.6 4.2a.9.9 0 0 0-1.3 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-1.7 4.2a.9.9 0 0 0 0 1.3L8.8 8l-2.5 2.5a.9.9 0 1 0 1.3 1.3l3.15-3.15a.9.9 0 0 0 0-1.3L7.6 4.2a.9.9 0 0 0-1.3 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
	font-style: normal;
}

.fa-chevron-circle-left {
	transform: scaleX(-1);
}

/* --- Pied de page en bas de l'écran, même sur les pages courtes ---------------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1;
}

/* pas d'espace entre en-tête, contenu et pied de page (blockGap racine de WP) :
   le main a ses propres marges intérieures, et les bandes s'y collent */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* --- Pages en largeur "grille de projets" (classe lfs-wide, functions.php) --------
   Tout le contenu sur 1100px ; les bandes blanches deviennent un panneau de cette
   largeur (+ marge intérieure) au lieu d'aller d'un bord à l'autre */
.lfs-wide .entry-content {
	--wp--style--global--content-size: 1100px;
	--lfs-panel-padding: var(--wp--preset--spacing--40);
}

.lfs-wide .entry-content > .wp-block-group.has-background[style*="#ffffff" i] {
	max-width: calc(1100px + 2 * var(--lfs-panel-padding)) !important;
	margin-inline: auto !important;
	padding-inline: var(--lfs-panel-padding);
}

/* un panneau blanc en tête ou en fin de page garde l'espace avec le menu et le
   pied de page (les bandes pleine largeur, elles, s'y collent) */
.lfs-wide main:has(> .entry-content:first-child > .wp-block-group.has-background[style*="#ffffff" i]:first-child) {
	padding-top: var(--wp--preset--spacing--50) !important;
}

.lfs-wide main:has(> .entry-content > .wp-block-group.has-background[style*="#ffffff" i]:last-child) {
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

/* Espaceur seul en tête de page (ancien contenu : compensait le menu de Bridge
   posé par-dessus la page) : inutile avec le menu collant */
.entry-content > .wp-block-group:first-child:not(:has(:not(.wp-block-group, .wp-block-spacer))) {
	display: none;
}

/* --- Image avec texte au survol (Bridge "image_with_text_over" : carte du contact) --
   Image d'un bord à l'écran à l'autre ; au survol (ou au focus clavier), un voile
   bleu nuit et le texte apparaissent par-dessus */
.wp-site-blocks {
	overflow-x: clip; /* les 100vw ci-dessous, avec une barre de défilement classique */
}

.entry-content .lfs-image-text {
	position: relative;
	width: 100vw;
	max-width: none !important;
	margin-block: 0 !important;
	margin-inline: calc(50% - 50vw) !important;
}

.lfs-image-text .wp-block-image {
	margin: 0;
}

.lfs-image-text .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.lfs-image-text__text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--40);
	background: rgb(16 0 91 / 0.62);
	color: var(--wp--preset--color--white);
	text-align: center;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.lfs-image-text:hover .lfs-image-text__text,
.lfs-image-text:focus-within .lfs-image-text__text {
	opacity: 1;
}

.lfs-image-text__text > * {
	margin-block: 0;
}

.lfs-image-text__text p,
.lfs-image-text__text h3 {
	color: inherit !important;
}

/* filets de l'ancienne mise en page : marges ramenées à la normale */
.lfs-image-text__text .separator {
	margin: 0.9rem auto 1.4rem !important;
}

.lfs-image-text__text .separator:first-child {
	display: none;
}

.lfs-image-text__text .qbutton {
	margin-bottom: 2rem;
}

/* écrans tactiles : pas de survol, le texte reste visible */
@media (hover: none) {
	.lfs-image-text__text {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lfs-image-text__text {
		transition: none;
	}
}

/* page qui commence par l'image : collée au menu, et au pied de page si elle finit */
main:has(> .entry-content > .wp-block-group:first-child .lfs-image-text) {
	padding-top: 0 !important;
}

main:has(> .entry-content > .wp-block-group:last-child .lfs-image-text) {
	padding-bottom: 0 !important;
}

/* --- Bouton "qbutton" de Bridge (contenu repris) ------------------------------- */
.qbutton {
	display: inline-block;
	padding: 0.6em 1.4em;
	border: 2px solid currentColor;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qbutton:hover,
.qbutton:focus-visible {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--night);
}

.lfs-image-text__text .qbutton {
	color: var(--wp--preset--color--white);
}

.lfs-image-text__text .qbutton:hover,
.lfs-image-text__text .qbutton:focus-visible {
	color: var(--wp--preset--color--night);
}