/*
 * base.css — styles globaux du thème.
 * Uniquement ce que theme.json ne peut pas exprimer : reset, accessibilité,
 * alignements, variations de style transverses. Chargé sur tout le site.
 */

/* ─── Preset Musical Écran ───────────────────────────────────────────────── */

body.is-musical-ecran {
	--wp--preset--font-family--display: var(--wp--preset--font-family--display-me);
	--wp--preset--font-family--body: var(--wp--preset--font-family--body-me);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ─── Skip link ──────────────────────────────────────────────────────────── */

.skip-link {
	position: absolute;
	top: -9999px;
	left: 1rem;
	z-index: 9999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	top: 1rem;
}

/* ─── Screen reader only ─────────────────────────────────────────────────── */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Alignments ─────────────────────────────────────────────────────────── */

.alignfull {
	max-width: none;
}

/* ─── Eyebrow (variation de style core/paragraph) ────────────────────────── */

.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* ─── Pastilles d'indicateur de navigation ───────────────────────────────── */

.is-dot-jaune > a::after,
.is-dot-rose > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-left: 0.375em;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.is-dot-jaune > a::after {
	background-color: var(--wp--preset--color--contrast);
}

.is-dot-rose > a::after {
	background-color: var(--wp--preset--color--rose);
}

/* ─── Titres : césure seulement en dernier recours ───────────────────────── */
/* Core applique word-break:break-word aux .wp-block-column, hérité par les titres. */

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
	/* On passe à la ligne au mot ; un mot trop long pour la largeur se coupe
	   plutôt que de déborder (évite le dépassement sur petits écrans). */
	word-break: normal;
	overflow-wrap: break-word;
}

/* Neutralise la coupure agressive héritée des colonnes (core). */
.wp-block-column {
	word-break: normal;
}

/* ─── Transitions globales ───────────────────────────────────────────────── */

a,
button {
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), opacity var(--wp--custom--transition);
}

/* ─── En-tête : logo centré, navigation scindée ──────────────────────────── */

/* .wp-block-group pour battre la disposition flex générée par le groupe (WP). */
.wp-block-group.site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

/* Chaque navigation remplit sa moitié et répartit ses liens vers le logo */
.site-header__bar > .wp-block-navigation {
	width: 100%;
}

/* ─── Header sticky ──────────────────────────────────────────────────────── */

/* Le sticky est sur le <header> racine généré par tagName:"header" */
header.wp-block-template-part:has(.site-header) {
	position: sticky;
	top: 0;
	z-index: 200;
	background-color: var(--wp--preset--color--base);
	transition: transform 320ms ease;
}

/* « Poussé » hors de l'écran quand les filtres de la Programmation atteignent
   le haut et prennent sa place (classe posée par header.js). */
header.wp-block-template-part.is-pushed {
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part:has(.site-header) {
		transition: none;
	}
}

.site-header {
	transition: padding-top 320ms ease, padding-bottom 320ms ease;
}

.site-header.is-scrolled {
	padding-top: var(--wp--preset--spacing--30) !important;
	padding-bottom: var(--wp--preset--spacing--30) !important;
}

.site-header__logos {
	justify-self: center;
}

/* Logos : hauteur explicite pour que la transition fonctionne */
.site-header__logos .wp-block-site-logo img,
.site-header__logos .wp-block-image img {
	height: 80px !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
	transition: height 320ms ease;
}

/* La figure core/image ne doit pas avoir de largeur fixe */
.site-header__logos .wp-block-image {
	width: auto !important;
	max-width: none !important;
	line-height: 0;
}

.site-header.is-scrolled .site-header__logos .wp-block-site-logo img,
.site-header.is-scrolled .site-header__logos .wp-block-image img {
	height: 50px !important;
}

/* Séparateur vertical entre les deux logos */
.site-header__logo-sep {
	width: 1px !important;
	height: 80px;
	margin: 0 !important;
	border: none !important;
	flex-shrink: 0;
	transition: height 320ms ease;
}

.site-header.is-scrolled .site-header__logo-sep {
	height: 50px;
}

/* Mobile : logos au-dessus, navigations empilées et centrées */
@media (max-width: 781px) {
	.wp-block-group.site-header__bar {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--wp--preset--spacing--40);
	}

	.site-header__logos {
		order: -1;
	}

	.site-header__logos .wp-block-site-logo img,
	.site-header__logos .wp-block-image img {
		height: 32px !important;
	}

	.site-header.is-scrolled .site-header__logos .wp-block-site-logo img,
	.site-header.is-scrolled .site-header__logos .wp-block-image img {
		height: 22px !important;
	}

	.site-header__bar > .wp-block-navigation {
		width: auto;
	}
}

/* ─── Variations de section (hero Musical Écran) ─────────────────────────── */

.is-style-section-musical-ecran {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.is-style-section-rose {
	background-color: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--base);
}

/* ─── Grille à filets (logos partenaires) ────────────────────────────────── */
/* Le fond "line" visible dans les gouttières de 1px fait office de filets. */

.wp-block-group.is-style-grille-filets {
	gap: 1px;
	background-color: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
}

.is-style-grille-filets > * {
	margin: 0;
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50);
}

/* ─── Carte cliquable (archive éditions) : lien étiré ────────────────────── */

.edition-card {
	position: relative;
}

.edition-card .wp-block-post-featured-image {
	overflow: hidden;
}

.edition-card .wp-block-post-featured-image img {
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Le lien du titre est étiré pour couvrir toute la carte. */
.edition-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.edition-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.edition-card:hover .wp-block-post-title a {
	text-decoration: underline;
}

/* ─── Variantes de bouton rose ───────────────────────────────────────────── */

/* Rose plein */
.wp-block-button.is-style-rose .wp-block-button__link {
	background-color: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rose);
}

.wp-block-button.is-style-rose .wp-block-button__link:hover,
.wp-block-button.is-style-rose .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--rose);
	border-color: var(--wp--preset--color--rose);
}

/* Rose contour */
.wp-block-button.is-style-rose-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--rose);
	border: 1px solid var(--wp--preset--color--rose);
}

.wp-block-button.is-style-rose-outline .wp-block-button__link:hover,
.wp-block-button.is-style-rose-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--rose);
}