/*
Theme Name:   La Villageoise — Child
Theme URI:    https://villageoise-bigband-site.lovable.app
Description:  Thème enfant de Twenty Twenty-Four pour le site one-page du New Big Band La Villageoise (Chamoson, Valais). Palette affiche jaune / noir / bleu.
Author:       Académie La Villageoise
Template:     twentytwentyfour
Version:      1.0.0
Text Domain:  lavillageoise
*/

/* ============ Design tokens (unique endroit à modifier) ============ */
:root {
	--lv-jaune: #f8cf24;
	--lv-jaune-clair: #fde78d;
	--lv-noir: #14110f;
	--lv-bleu: #1f4fd8;
	--lv-bleu-clair: #cfdcfb;
	--lv-blanc: #ffffff;
	--lv-gris: #5d5a55;
	--lv-border: 2px solid var(--lv-noir);
	--lv-shadow: 6px 6px 0 var(--lv-noir);
	--lv-shadow-hover: 8px 8px 0 var(--lv-noir);
	--lv-radius: 18px;
	--lv-font-display: "Anton", "Archivo Black", Impact, sans-serif;
	--lv-font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--lv-font-script: "Caveat", cursive;
}

body {
	background: var(--lv-jaune);
	color: var(--lv-noir);
	font-family: var(--lv-font-body);
}

h1, h2, h3, .lv-title {
	font-family: var(--lv-font-display);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
}

.lv-eyebrow {
	font-family: var(--lv-font-script);
	font-size: 1.6rem;
	text-transform: none;
}

/* ============ Sections ============ */
.lv-section {
	padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 4vw, 2rem);
	border-top: var(--lv-border);
}
.lv-section--alt { background: var(--lv-bleu-clair); }
.lv-section--contact { background: var(--lv-noir); color: var(--lv-blanc); }
.lv-section--contact h2 { color: var(--lv-jaune); }

/* ============ Cartes ============ */
.lv-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	margin-top: 2.5rem;
}
.lv-card {
	background: var(--lv-blanc);
	border: var(--lv-border);
	border-radius: var(--lv-radius);
	box-shadow: var(--lv-shadow);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
}
.lv-card--featured { background: var(--lv-bleu-clair); }
.lv-card__title { margin: 0.75rem 0 0; font-size: 1.25rem; }
.lv-card__text { color: var(--lv-gris); flex: 1; }
.lv-card__meta { font-weight: 600; margin: 0.75rem 0 0; }

.lv-pill {
	align-self: flex-start;
	background: var(--lv-bleu);
	color: var(--lv-blanc);
	border: var(--lv-border);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.8rem;
	text-transform: uppercase;
}

/* ============ Boutons pastille ============ */
.lv-btn .wp-block-button__link,
a.lv-btn {
	background: var(--lv-bleu);
	color: var(--lv-blanc);
	border: var(--lv-border);
	border-radius: 999px;
	box-shadow: var(--lv-shadow);
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.85rem 1.75rem;
	display: inline-block;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lv-btn .wp-block-button__link:hover,
a.lv-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--lv-shadow-hover);
}
.lv-btn--ghost .wp-block-button__link { background: var(--lv-blanc); color: var(--lv-noir); }
.lv-btn--small { padding: 0.4rem 1rem; font-size: 0.8rem; box-shadow: 4px 4px 0 var(--lv-noir); }

/* ============ Agenda ============ */
.lv-agenda { border-top: var(--lv-border); margin-top: 2rem; }
.lv-agenda__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2rem;
	padding: 1.4rem 0;
	border-bottom: var(--lv-border);
}
.lv-agenda__date { font-family: var(--lv-font-display); font-size: 1.5rem; min-width: 7rem; }
.lv-agenda__title { flex: 1; font-weight: 700; font-size: 1.05rem; min-width: 12rem; }
.lv-agenda__place { color: var(--lv-gris); }

/* ============ FAQ & tarifs ============ */
.lv-faq__item { border-bottom: var(--lv-border); padding: 0.9rem 0; }
.lv-faq__q { cursor: pointer; font-weight: 700; }
.lv-faq__a { color: var(--lv-gris); padding-top: 0.5rem; }
.lv-tarifs { list-style: none; margin: 0; padding: 0; }
.lv-tarifs__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(20, 17, 15, 0.18);
	font-size: 0.95rem;
}
.lv-tarifs__row em { color: var(--lv-gris); font-size: 0.85rem; }
.lv-empty { color: var(--lv-gris); font-style: italic; }

/* ============ Responsive ============ */
@media (max-width: 640px) {
	.lv-agenda__date { font-size: 1.25rem; min-width: 100%; }
	.lv-agenda__row { gap: 0.25rem; }
	:root { --lv-shadow: 4px 4px 0 var(--lv-noir); --lv-shadow-hover: 6px 6px 0 var(--lv-noir); }
}

/* ============ Gabarit one-page ============ */
.lv-wrap { max-width: 1180px; margin: 0 auto; }
.lv-cols { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.lv-h-small { font-size: 1.1rem; letter-spacing: 0.08em; }
.lv-hero {
	background: var(--lv-noir);
	color: var(--lv-blanc);
	border-bottom: var(--lv-border);
	padding: clamp(4rem, 12vw, 8rem) clamp(1rem, 4vw, 2rem);
	text-align: center;
}
.lv-hero__inner { max-width: 900px; margin: 0 auto; }
.lv-hero .lv-title { color: var(--lv-jaune); font-size: clamp(2.2rem, 7vw, 4.5rem); }
.lv-hero__text { font-size: clamp(1rem, 2vw, 1.2rem); max-width: 620px; margin: 1rem auto 2rem; }
.lv-hero .lv-btn { margin: 0.4rem; }
.lv-section--editor { border-top: none; background: var(--lv-jaune); }
.lv-grid--infos { margin-top: 2rem; }
.lv-section--contact a { color: var(--lv-jaune); }

/* ============ En-tête ============ */
/* Rendu par header.php. Le thème parent étant un thème de blocs, il n'en
   fournit aucun : sans ces règles, l'en-tête tombe au fil du texte. */
.lv-skip {
	position: absolute;
	left: -9999px;
}
.lv-skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	background: var(--lv-noir);
	color: var(--lv-jaune);
	padding: 0.6rem 1rem;
	border-radius: var(--lv-radius);
}

.lv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--lv-jaune);
	border-bottom: var(--lv-border);
}
.lv-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.7rem clamp(1rem, 4vw, 2rem);
}
.lv-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--lv-noir);
	margin-right: auto;
}
.lv-header__logo {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: var(--lv-border);
	object-fit: cover;
	display: block;
}
.lv-header__name {
	font-family: var(--lv-font-display);
	text-transform: uppercase;
	font-size: 1rem;
	line-height: 1.1;
	max-width: 12ch;
}

.lv-nav__list {
	display: flex;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lv-nav__list a {
	color: var(--lv-noir);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.lv-nav__list a:hover,
.lv-nav__list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lv-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: var(--lv-blanc);
	border: var(--lv-border);
	border-radius: 999px;
	cursor: pointer;
}
.lv-header__burger span {
	display: block;
	height: 2px;
	background: var(--lv-noir);
}

/* Sous 900px le menu passe en tiroir déroulant sous l'en-tête : garder les
   six liens en ligne les tasserait sous la limite de lisibilité. */
@media (max-width: 900px) {
	.lv-header__burger { display: flex; }
	/* Specificite volontairement egale a celle de `a.lv-btn` (0,1,1) du kit :
	   avec le simple `.lv-header__cta`, la regle perdait et le bouton restait
	   affiche, faisant deborder l'en-tete et defiler toute la page en largeur. */
	a.lv-header__cta { display: none; }
	.lv-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--lv-jaune);
		border-bottom: var(--lv-border);
		padding: 1rem clamp(1rem, 4vw, 2rem);
	}
	.lv-nav.est-ouvert { display: block; }
	.lv-nav__list { flex-direction: column; gap: 0.9rem; }
}

/* ============ Image des cartes de cours ============ */
.lv-card__media {
	margin: -1px -1px 1rem;
	border-bottom: var(--lv-border);
	overflow: hidden;
	border-radius: calc(var(--lv-radius) - 2px) calc(var(--lv-radius) - 2px) 0 0;
}
.lv-card__media img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
}

/* ============ Pied de page ============ */
.lv-footer {
	background: var(--lv-noir);
	color: var(--lv-blanc);
	border-top: var(--lv-border);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem) 1.5rem;
}
.lv-footer__inner {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	max-width: 1200px;
	margin: 0 auto;
}
.lv-footer .lv-eyebrow { color: var(--lv-jaune); }
.lv-footer a { color: var(--lv-blanc); }
.lv-footer__social { display: flex; gap: 1rem; }
.lv-footer__bas {
	max-width: 1200px;
	margin: 2rem auto 0;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.85rem;
	color: var(--lv-jaune-clair);
}

/* Aucun element de l'en-tete ne doit imposer une largeur minimale superieure a
   l'ecran : un seul debordement ici fait defiler la page entiere en largeur. */
.lv-header__inner { flex-wrap: wrap; }
.lv-header__brand { min-width: 0; }
.lv-header__name { overflow-wrap: anywhere; }
.lv-nav { min-width: 0; }

/* ============ Grille de photos (sections Ensemble / Académie) ============ */
/* min(100%, …) et non une valeur fixe : sous la largeur du minmax, une valeur
   fixe deborde la grille et fait defiler la page en largeur. */
.lv-grid--photos {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	margin-bottom: 2.5rem;
}
.lv-photo {
	margin: 0;
	border: var(--lv-border);
	border-radius: var(--lv-radius);
	box-shadow: var(--lv-shadow);
	overflow: hidden;
}
.lv-photo img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* ============ Sections insérées dans le contenu de la page ============ */
/* `page-onepage.php` rend `the_content()` à l'intérieur de
   `.lv-section--editor > .lv-wrap`, donc dans un conteneur limité à 1180px.
   Une section de pleine largeur composée dans l'éditeur y apparaîtrait comme
   un encadré flottant au lieu d'une bande. Ces règles la ramènent à la largeur
   de l'écran, sans toucher au gabarit. */
.lv-section--editor { padding: 0; }
.lv-section--editor > .lv-wrap { max-width: none; }
.lv-section--editor .lv-section {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(clamp(1rem, 4vw, 2rem), calc(50vw - 590px));
	padding-right: max(clamp(1rem, 4vw, 2rem), calc(50vw - 590px));
}
.lv-section--editor .lv-section > .lv-wrap { max-width: 1180px; }