/*
Theme Name: JSF
Theme URI: https://jeunesse-sans-frontieres.fr
Author: Jeunesse Sans Frontières
Description: Thème simple et coloré pour Jeunesse Sans Frontières (Bannalec). Couleurs, police et espacements sont centralisés dans theme.json : pour appliquer la nouvelle charte graphique, modifiez uniquement ce fichier (ou Apparence > Éditeur > Styles).
Version: 2.4
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: jsf
*/

/* Bandeau de couleurs, comme les poudres de la Bannacolor */
.jsf-bandes {
	height: 10px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--orange) 0 25%,
		var(--wp--preset--color--rose) 25% 50%,
		var(--wp--preset--color--violet) 50% 75%,
		var(--wp--preset--color--ambre) 75% 100%);
}

/* Bandeau défilant */
.jsf-defilant {
	overflow: hidden;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--encre);
	padding: 0.9rem 0;
	transform: rotate(-1.2deg);
	margin-block: var(--wp--preset--spacing--50) !important;
}
.jsf-defilant__piste {
	display: flex;
	width: max-content;
	animation: jsf-defile 38s linear infinite;
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.jsf-defilant__piste span { padding-right: 2rem; }
@keyframes jsf-defile { to { transform: translateX(-50%); } }

/* Pastille « autocollant » */
.jsf-sticker {
	display: inline-block;
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--encre);
	font-weight: 800;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	transform: rotate(-4deg);
	margin-bottom: 0.5rem !important;
}

/* Tuiles colorées (bento) */
.jsf-tuile { border-radius: 28px; overflow: hidden; }
.jsf-tuile .wp-block-image img { border-radius: 18px; }
.jsf-tuile h3 a { text-decoration: none; }

/* Images */
.wp-block-image img,
.wp-block-post-featured-image img { border-radius: 24px; }

/* Liens et focus */
a { text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
:where(a, button, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--rose);
	outline-offset: 3px;
}

/* Frise de l'histoire */
.jsf-frise > .wp-block-group {
	border-left: 4px solid var(--wp--preset--color--violet);
	border-radius: 0;
	padding-left: 1.5rem;
}
.jsf-annee {
	display: inline-block;
	background: var(--wp--preset--color--ambre);
	border-radius: 999px;
	padding: 0.15rem 0.8rem;
	font-weight: 800;
}

/* Sous-menus */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(30, 22, 56, 0.14);
	padding: 0.5rem 0;
}

@media (prefers-reduced-motion: reduce) {
	.jsf-defilant__piste { animation: none; }
	* { scroll-behavior: auto !important; transition: none !important; }
}

/* Phrase manifeste */
.jsf-manifeste {
	font-size: clamp(1.8rem, 4.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	max-width: 22ch;
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) !important;
}

/* Chiffres clés */
.jsf-chiffre {
	font-size: clamp(2.6rem, 6vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--violet);
	margin-bottom: 0.25rem !important;
}

/* Partenaires */
.jsf-partenaires { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.jsf-partenaires span {
	background: var(--wp--preset--color--blanc);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-weight: 700;
}

/* Bouton contour dans l'en-tête */
header .wp-block-button.is-style-outline .wp-block-button__link { padding-block: calc(0.85rem - 2px); border-width: 2px; }

/* ===== Version 2.1 : mise en page large ===== */

/* Le bandeau défilant incliné ne doit pas créer de défilement horizontal */
html, body { overflow-x: clip; }

/* Bandeau de titre des pages */
.jsf-entete-page .wp-block-post-title { margin-top: 0; margin-bottom: 0; }

/* Hero en deux colonnes : la photo remplit sa colonne */
.jsf-hero .wp-block-image { height: 100%; margin: 0; }
.jsf-hero .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	max-height: 640px;
	object-fit: cover;
	border-radius: 32px;
}
.jsf-hero h1 { max-width: 14ch; }

/* Photos des tuiles : même hauteur que les tuiles voisines */
.jsf-photo-tuile img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.jsf-photo-tuile { height: 100%; margin: 0; }

/* Bandeau « Prochain rendez-vous » */
.jsf-prochain .wp-block-buttons { margin-top: 0; }
.jsf-prochain p { margin: 0; }

/* Agenda : cartes d'événement */
.jsf-evt-carte { border-radius: 32px; overflow: hidden; }
.jsf-evt-date {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	border-radius: 24px;
	padding: 1.5rem;
	min-height: 100%;
}
.jsf-evt-date p { margin: 0; line-height: 1; }
.jsf-evt-jour { font-size: clamp(3.4rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -0.05em; }
.jsf-evt-mois { font-size: 1.25rem; font-weight: 800; margin-top: 0.4rem !important; }
.jsf-evt-semaine { font-size: 0.95rem; font-weight: 600; margin-top: 0.5rem !important; opacity: 0.85; }
.jsf-evt-lieu { font-weight: 700; }

/* Agenda : liste compacte de l'accueil */
.jsf-evt-ligne {
	border-top: 2px solid var(--wp--preset--color--encre);
	padding-block: 1rem;
}
.jsf-evt-ligne p { margin: 0; }
.jsf-evt-ligne .jsf-evt-ligne-date { font-weight: 800; min-width: 13rem; }
.jsf-evt-ligne .jsf-evt-ligne-titre { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.jsf-evt-ligne a { white-space: nowrap; }

/* Liste à puces colorées */
.jsf-puces { list-style: none; padding-left: 0; }
.jsf-puces li { padding-left: 1.6rem; position: relative; margin-bottom: 0.6rem; }
.jsf-puces li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
}

@media (max-width: 781px) {
	.jsf-hero .wp-block-image img { min-height: 240px; }
	.jsf-evt-date { flex-direction: row; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
	.jsf-evt-mois, .jsf-evt-semaine { margin-top: 0 !important; }
	.jsf-evt-ligne .jsf-evt-ligne-date { min-width: 0; }
}

/* Contenu des sections : aligné sur la largeur « large », texte courant limité pour rester lisible */
.jsf-large > p,
.jsf-large > .wp-block-list { max-width: 64ch; }
.jsf-large > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.jsf-large > .wp-block-heading:first-child { margin-top: 0; }

/* Tuiles : même hauteur que la photo ou la tuile voisine */
.wp-block-column > .jsf-tuile:only-child,
.wp-block-column > .wp-block-group:only-child > .jsf-tuile:only-child { height: 100%; }
.wp-block-column > .wp-block-group:only-child:has(> .jsf-tuile) { height: 100%; }

/* Pas d'espace vide entre la dernière section colorée et le pied de page */
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > footer::before {
	content: "";
	display: block;
	height: 10px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--orange) 0 25%,
		var(--wp--preset--color--rose) 25% 50%,
		var(--wp--preset--color--violet) 50% 75%,
		var(--wp--preset--color--ambre) 75% 100%);
}