/*
Theme Name: Mystériales
Theme URI: https://mysteriales.fr
Author: Les Mystériales
Description: Thème du festival Les Mystériales de Redon. Thème à blocs léger : l'apparence se règle dans Apparence → Éditeur, les contenus (auteurs, exposants, éditions) viennent de l'extension « Mystériales – Socle ».
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.1.1
License: GPL-2.0-or-later
Text Domain: mysteriales
*/

/* ---------- Généralités ---------- */
html { scroll-padding-top: 6rem; }

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}

.lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0.5rem;
	z-index: 1000;
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--encre);
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-weight: 700;
}
.lien-evitement:focus { left: 0.5rem; }

img { height: auto; }

/* ---------- En-tête ---------- */
.site-entete {
	position: sticky;
	top: 0;
	z-index: 100;
}
body.admin-bar .site-entete { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar .site-entete { top: 0; } }

.site-entete .wp-block-site-logo img,
.site-entete .myst-logo img { width: 56px; height: 56px; display: block; }
.site-entete .wp-block-site-title { margin: 0; }
.site-entete .wp-block-navigation a:hover { color: var(--wp--preset--color--orange); }
.site-entete .wp-block-navigation .current-menu-item > a,
.site-entete .wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.site-entete .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--nuit) !important;
	color: var(--wp--preset--color--creme) !important;
	padding: 2rem;
}
.site-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: var(--wp--preset--font-size--large);
	gap: 1.25rem;
}

/* ---------- Pied de page ---------- */
.site-pied a { color: var(--wp--preset--color--creme); }
.site-pied a:hover { color: var(--wp--preset--color--orange); }
.site-pied .wp-block-navigation { row-gap: 0.4rem; }

/* ---------- Cartes (listes auteurs / exposants / actualités) ---------- */
.myst-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
.myst-grille--exposant { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

.myst-carte {
	position: relative;
	background: var(--wp--preset--color--papier);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--carte);
	transition: transform .2s ease, box-shadow .2s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.myst-carte:hover,
.myst-carte:focus-within { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(27, 16, 11, .18); }
.myst-carte__image {
	aspect-ratio: 1;
	background: var(--wp--preset--color--sable);
	overflow: hidden;
}
.myst-carte__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.myst-grille--exposant .myst-carte__image { background: #fff; }
.myst-grille--exposant .myst-carte__image img { object-fit: contain; padding: 12%; box-sizing: border-box; }
.myst-carte__image--vide {
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 2.5rem;
	color: var(--wp--preset--color--canard);
}
.myst-carte__nom {
	margin: 0;
	padding: 0.75rem 0.9rem 0.9rem;
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
}
.myst-carte__nom a { color: var(--wp--preset--color--encre); text-decoration: none; }
/* Toute la carte est cliquable. */
.myst-carte__nom a::after { content: ""; position: absolute; inset: 0; }
.myst-carte__detail {
	display: block;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--wp--preset--color--canard-fonce);
	margin-top: 0.2rem;
}

/* Actualités (Query Loop) */
.myst-actus .wp-block-post {
	background: var(--wp--preset--color--papier);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--carte);
}
.myst-actus .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; }

/* ---------- Fiche auteur / exposant ---------- */
.myst-fiche__photo img {
	border-radius: 12px;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center top;
}
.myst-fiche--exposant .myst-fiche__photo img {
	object-fit: contain;
	background: #fff;
	padding: 8%;
	box-sizing: border-box;
}

.myst-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.myst-badges a,
.myst-badges span {
	display: inline-block;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sable);
	color: var(--wp--preset--color--encre);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}
.myst-badges .est-courante { background: var(--wp--preset--color--canard); color: #fff; }

.auteur-social-links { justify-content: flex-start; margin: 0; }

.myst-livre { display: flex; gap: 1.25rem; align-items: center; }
.myst-livre img { width: 110px; height: auto; border-radius: 4px; box-shadow: var(--wp--preset--shadow--carte); }
.myst-livre__titre { font-family: var(--wp--preset--font-family--titres); font-size: var(--wp--preset--font-size--large); margin: 0; }

/* ---------- Accueil ---------- */
.myst-hero img { width: 100%; display: block; }
.myst-acces .wp-block-column {
	background: var(--wp--preset--color--papier);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--carte);
	position: relative;
	transition: transform .2s ease;
}
.myst-acces .wp-block-column:hover { transform: translateY(-3px); }
.myst-acces h3 a { text-decoration: none; color: var(--wp--preset--color--encre); }
.myst-acces h3 a::after { content: ""; position: absolute; inset: 0; }

/* ---------- Éditions ---------- */
.myst-editions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; list-style: none; padding: 0; }
.myst-editions li {
	position: relative;
	background: var(--wp--preset--color--papier);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--carte);
	padding: 1.25rem 1.5rem;
}
.myst-editions a { font-family: var(--wp--preset--font-family--titres); font-size: var(--wp--preset--font-size--x-large); color: var(--wp--preset--color--encre); text-decoration: none; }
.myst-editions a::after { content: ""; position: absolute; inset: 0; }
.myst-editions__chiffres { display: block; margin-top: 0.25rem; color: var(--wp--preset--color--canard-fonce); }

/* ---------- Programme (liste simple d'événements) ---------- */
.myst-evenements { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.myst-evenements li { background: var(--wp--preset--color--papier); border-radius: 8px; padding: 0.75rem 1rem; }
.myst-evenements time { display: block; font-size: 0.9rem; color: var(--wp--preset--color--canard-fonce); font-weight: 700; }

/* ---------- Divers ---------- */
.myst-carte-osm iframe { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: 12px; }

.wp-block-search__input { border-radius: 999px; padding-inline: 1rem; border: 1px solid #b9ab8e; }

/* Logos (partenaires) */
.myst-logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
	gap: 1.25rem;
	align-items: center;
	margin-block: 1.5rem;
}
.myst-logos figure { margin: 0; background: #fff; border-radius: 10px; padding: 1rem; display: grid; place-items: center; aspect-ratio: 3/2; }
.myst-logos img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* Liens réseaux sur les fiches : pastilles visibles sur le fond crème */
.auteur-social-links .social-link-author {
	background-color: var(--wp--preset--color--papier);
	box-shadow: var(--wp--preset--shadow--carte);
}

/* En-tête : menu + bouton Soutenir */
.site-entete__actions { flex: 1 1 auto; }
.site-entete__soutenir .wp-block-button__link { white-space: nowrap; font-size: 1rem; }
.site-entete__soutenir .wp-block-button__link:hover { background-color: var(--wp--preset--color--creme) !important; color: var(--wp--preset--color--nuit) !important; }
.site-entete .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--nuit) !important;
	border: 1px solid var(--wp--preset--color--nuit-claire) !important;
	border-radius: 8px;
	padding: 0.5rem 0;
	min-width: 220px !important;
}
.site-entete .wp-block-navigation__submenu-container a { padding: 0.5rem 1rem !important; font-weight: 400; }
.site-entete .wp-block-navigation-submenu__toggle { font-weight: 700; }
@media (max-width: 600px) {
	.site-entete .site-sous-titre { display: none; }
	.site-entete .wp-block-site-title { font-size: 1.05rem; }
	.site-entete .wp-block-site-logo img, .site-entete .myst-logo img { width: 44px; height: 44px; }
}
/* Menu mobile : sous-menu affiché à plat, en retrait */
.site-entete .is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	padding: 0.25rem 0 0 1rem !important;
	font-size: var(--wp--preset--font-size--medium);
}

/* Cartes d'actualités : hauteur selon le contenu */
.myst-actus .wp-block-post-template { align-items: start; }

/* Menu mobile aligné à gauche (plus lisible) */
.site-entete .is-menu-open .wp-block-navigation__responsive-container-content,
.site-entete .is-menu-open .wp-block-navigation__container,
.site-entete .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.site-entete .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3rem; }

/* Bouton menu dès la largeur tablette (le menu complet ne tient sur une ligne qu’au-delà de ~1250 px) */
@media (max-width: 1250px) {
	.site-entete .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.site-entete .site-entete__actions { flex: 0 0 auto; }
}