/*
Theme Name: Judo Paris Force XV
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Thème du club Judo Paris Force XV. Thème enfant de Twenty Twenty-Five : reprend l'identité de la maquette (palette crème/brun, Helvetica Neue) et ajoute les mises en page du site, modifiables depuis l'éditeur WordPress.
Author: Leo Palazzi
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: judo-paris-force-xv
Tags: full-site-editing, block-patterns, block-styles, wide-blocks
*/

/*
 * Ce fichier est chargé APRÈS le CSS du thème parent : ce qui est écrit ici a le
 * dernier mot. Les couleurs, polices et espacements se règlent dans theme.json
 * (ou Apparence > Éditeur > Styles) — on ne garde ici que ce que les blocs ne
 * savent pas exprimer seuls : la grille du menu et la forme des pastilles.
 */

/* ---------------------------------------------------------------
   Contour de focus
   ---------------------------------------------------------------
   Twenty Twenty-Five dessine un contour sur `:focus`, qui se déclenche aussi
   au clic souris : d'où le cadre qui apparaît autour du texte après un clic.

   On ne le retire que dans ce cas précis. `:focus-visible` — la navigation au
   clavier — conserve son contour : c'est le seul repère permettant de savoir
   où l'on se trouve quand on n'utilise pas de souris. Le supprimer partout
   rendrait le site inutilisable au clavier.
   --------------------------------------------------------------- */
.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------
   Logo animé
   ---------------------------------------------------------------
   Le logo est un WebP animé de 110x110 : une rotation 3D en 41 images,
   4,1 secondes par tour. L'animation est dans le fichier lui-même, il n'y a
   donc rien à animer en CSS — on ne fait que le dimensionner.

   Le fichier étant carré alors que le logo y est centré, on l'affiche un peu
   plus grand que les 47px de la maquette : sans cela le dessin paraîtrait
   plus petit qu'avant, à cause de la marge que la rotation exige autour.
   --------------------------------------------------------------- */
.jpfxv-header .jpfxv-logo img,
.jpfxv-header .wp-block-site-logo img {
	width: 58px;
	height: auto;
}

/* L'animation étant dans le fichier lui-même, aucune règle CSS ne peut
   l'arrêter. Pour respecter le réglage « réduire les animations », on masque
   l'image animée et on affiche le PNG statique en fond du lien. */
@media (prefers-reduced-motion: reduce) {
	.jpfxv-header .jpfxv-logo .custom-logo {
		visibility: hidden;
	}

	.jpfxv-header .jpfxv-logo .custom-logo-link {
		display: inline-block;
		background-image: url( "assets/images/logo.png" );
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
}

/* ---------------------------------------------------------------
   Header : menu en 2 lignes x 3 colonnes, comme dans la maquette
   --------------------------------------------------------------- */
.jpfxv-nav .wp-block-navigation__container {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	gap: 8px 24px;
	justify-content: start;
}

/* Les entrées de menu prennent la forme de pastilles. */
.jpfxv-nav .wp-block-navigation-item__content {
	border-radius: 32px;
	padding: 3px 8px;
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Page courante dans le menu
   ---------------------------------------------------------------
   La classe current-menu-item est posée par jpfxv_marquer_lien_courant()
   dans functions.php : WordPress ne le fait pas pour des liens dont
   l'adresse est saisie à la main.
   --------------------------------------------------------------- */

/* Grand écran : pastille pleine, comme dans la maquette. */
@media (min-width: 901px) {
	.jpfxv-nav .current-menu-item > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--texte);
		color: var(--wp--preset--color--gris-hero);
	}
}

/* Mobile : pas de fond. Dans un panneau où les entrées sont empilées et
   larges, une pastille pleine s'étirerait sur toute la ligne et alourdirait
   l'affichage. Le gras suffit à situer la page courante. */
@media (max-width: 900px) {
	.jpfxv-nav .current-menu-item > .wp-block-navigation-item__content {
		font-weight: 700;
	}
}

/* « Contact » est une entrée de menu comme les autres — c'est ce qui lui permet
   de se replier dans le menu mobile. Sur grand écran on le détache seulement
   visuellement : quatrième colonne, centré verticalement, poussé à droite. */
@media (min-width: 901px) {
	.jpfxv-nav .wp-block-navigation-item.jpfxv-contact {
		grid-row: 1 / span 2;
		align-self: center;
		margin-left: auto;
	}
}

/* Sous 900px la grille 3 colonnes ne tient plus : on repasse en colonne. */
@media (max-width: 900px) {
	.jpfxv-nav .wp-block-navigation__container:not(.has-modal-open) {
		grid-auto-flow: row;
		grid-template-rows: none;
	}
}

/* ---------------------------------------------------------------
   Menu mobile déployé
   ---------------------------------------------------------------
   WordPress calcule la marge intérieure du panneau à partir de
   --wp--style--root--padding-left. Quand cette variable n'est pas émise, la
   déclaration devient invalide et la marge tombe à zéro : les liens se
   collent au bord de l'écran. On la fixe donc explicitement.

   La valeur retire 8px pour compenser le retrait propre aux pastilles : le
   TEXTE des liens s'aligne ainsi sur la marge du header, et non 8px plus loin.
   --------------------------------------------------------------- */
.jpfxv-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--preset--spacing--50);
	padding-right: calc(var(--wp--preset--spacing--40) - 8px);
	padding-bottom: var(--wp--preset--spacing--50);
	padding-left: calc(var(--wp--preset--spacing--40) - 8px);
}

/* Toutes les entrées s'empilent, y compris Contact. */
.jpfxv-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* Le bouton de fermeture reste aligné sur la même marge. */
.jpfxv-nav .wp-block-navigation__responsive-container-close {
	right: calc(var(--wp--preset--spacing--40) - 8px);
}

/* ---------------------------------------------------------------
   Footer : pastilles cerclées
   --------------------------------------------------------------- */
.jpfxv-pill-lg {
	margin: 0;
}

.jpfxv-pill-lg > a {
	display: inline-block;
	padding: 4px 16px;
	border: 1px solid var(--wp--preset--color--texte);
	border-radius: 999px;
	background-color: var(--wp--preset--color--blanc);
	letter-spacing: 0.8px;
	text-decoration: none;
}

.jpfxv-pill-lg > a:hover,
.jpfxv-pill-lg > a:focus {
	background-color: var(--wp--preset--color--texte);
	color: var(--wp--preset--color--blanc);
}

/* Le plan du quartier occupe toute la largeur, sans déborder. */
.jpfxv-map img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
   Bloc Fichier (PDF à télécharger)
   ---------------------------------------------------------------
   WordPress applique `.wp-block-file:not(.wp-element-button){font-size:.8em}`,
   ce qui rapetisse le nom du fichier ET le bouton. On rétablit la taille du
   corps de texte.

   Le préfixe `:root` sert uniquement à passer devant la règle du cœur : sans
   lui les deux ont la même spécificité et le résultat dépend de l'ordre de
   chargement des feuilles de style.
   --------------------------------------------------------------- */
:root .wp-block-file:not(.wp-element-button) {
	font-size: var(--wp--preset--font-size--medium);
}

:root .wp-block-file .wp-block-file__button {
	font-size: var(--wp--preset--font-size--medium);
}

/* Un peu d'air entre le nom du fichier et le bouton, et retour à la ligne
   propre quand les deux ne tiennent pas côte à côte. */
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-file .wp-block-file__button {
	margin-left: 0;
}

/* ---------------------------------------------------------------
   Marges latérales du contenu
   ---------------------------------------------------------------
   Les sections des pages sont en pleine largeur (alignfull) pour que les
   bandeaux puissent aller bord à bord. Sans correctif, TOUT irait bord à
   bord, y compris les textes. On redonne donc à chaque section la même
   marge latérale que le header (24px), sauf à celles qui doivent
   volontairement déborder : bandeaux, plan et fond noir.
   --------------------------------------------------------------- */
/* On neutralise d'abord la marge automatique de WordPress sur le conteneur et
   les décalages négatifs qu'il applique aux blocs pleine largeur : sans ça les
   deux mécanismes se cumulent et le résultat dépend de la version. */
.wp-block-post-content {
	padding-left: 0;
	padding-right: 0;
}

.wp-block-post-content > .alignfull,
main > .alignfull:not(.wp-block-post-content) {
	margin-left: 0;
	margin-right: 0;
}

/* Puis une seule marge, la même que celle du header. */
.wp-block-post-content > *,
main > .alignfull:not(.wp-block-post-content) {
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

/* Sauf pour ce qui doit vraiment aller bord à bord. */
.wp-block-post-content > .jpfxv-signes,
.wp-block-post-content > .jpfxv-bandeau-noir,
.wp-block-post-content > .jpfxv-map,
main > .jpfxv-signes,
main > .jpfxv-bandeau-noir {
	padding-left: 0;
	padding-right: 0;
}

/* ---------------------------------------------------------------
   Sections de page
   --------------------------------------------------------------- */

/* Intertitre de section : grand titre à gauche, texte d'accroche à droite. */
.jpfxv-section-intro {
	align-items: center;
}

/* ---------------------------------------------------------------
   Fiches professeurs
   ---------------------------------------------------------------
   Les biographies n'ont pas la même longueur : si l'image suit simplement le
   texte, elle démarre à une hauteur différente dans chaque colonne. On étire
   donc les fiches à la même hauteur et on pousse l'image en bas. Comme toutes
   les images sont carrées et de même largeur, leur haut s'aligne.
   --------------------------------------------------------------- */
.jpfxv-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Deux mécanismes complémentaires :
   - margin-top: auto absorbe l'espace libre et cale l'image en bas de fiche,
     ce qui aligne toutes les images entre elles ;
   - padding-top garantit un écart minimum avec le texte, car un padding n'est
     jamais absorbé, contrairement à une marge automatique.

   !important est nécessaire : le bloc Image écrit son margin-top en style
   inline, qui l'emporterait sinon. C'est aussi ce qui corrige les pages déjà
   créées, sans avoir à réinsérer la composition. */
.jpfxv-card > figure:last-child {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--40);
}

/* L'image garde un format carré. */
.jpfxv-card figure img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

/* ---------------------------------------------------------------
   Hero de la page d'accueil
   ---------------------------------------------------------------
   Photo de tatami en fond, texte en crème par-dessus. Titre et adresse à
   gauche, appel à l'action à droite ; les deux se replient l'un sous l'autre
   sur écran étroit.
   --------------------------------------------------------------- */
.jpfxv-hero h1,
.jpfxv-hero p {
	margin: 0;
}

.jpfxv-hero h1 {
	text-wrap: balance;
}

/* Le reflet clair en haut à gauche de la maquette, par-dessus l'assombrissement
   uniforme géré par le bloc Bannière lui-même. */
.jpfxv-hero .wp-block-cover__background {
	background-image: linear-gradient(131deg, rgba(216, 216, 216, 0.7) 0%, rgba(255, 255, 255, 0) 13%);
}

.jpfxv-hero-contenu {
	width: 100%;
}

/* Le bloc d'appel à l'action garde une largeur lisible et reste centré sous le
   titre quand les deux colonnes se replient. */
.jpfxv-hero-cta {
	max-width: 22rem;
}

@media (max-width: 900px) {
	.jpfxv-hero-cta {
		margin-inline: auto;
	}
}

/* Bouton clair : bordure et texte en crème pour ressortir sur la photo. */
.jpfxv-bouton-clair .wp-block-button__link {
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--surface);
	background-color: transparent;
}

.jpfxv-bouton-clair .wp-block-button__link:hover,
.jpfxv-bouton-clair .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--texte);
}

/* ---------------------------------------------------------------
   Header au-dessus du hero (page d'accueil uniquement)
   ---------------------------------------------------------------
   Sur l'accueil, la maquette pose le header directement sur la photo. On le
   rend donc transparent et on passe ses textes en crème, sans dupliquer la
   partie de modèle : le header reste unique pour tout le site.
   --------------------------------------------------------------- */
.home .jpfxv-header,
.blog.home .jpfxv-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 2;
	background-color: transparent !important;
}

.home .jpfxv-header a,
.home .jpfxv-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--surface);
}

/* Page courante sur fond photo : pastille crème, texte brun. */
@media (min-width: 901px) {
	.home .jpfxv-nav .current-menu-item > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--texte);
	}
}

/* Le hero remonte sous le header transparent pour occuper toute la hauteur. */
.home .jpfxv-hero {
	margin-top: 0;
}

/* Lignes « libellé à gauche / valeur à droite » : tableaux d'horaires, de
   cotisations, listes de documents et d'actualités. */
.jpfxv-row > p,
.jpfxv-row > h2,
.jpfxv-row > h3 {
	margin: 0;
}

/* Sur mobile la ligne se replie, le second élément passe dessous à gauche. */
@media (max-width: 600px) {
	.jpfxv-row {
		row-gap: 4px;
	}
}

/* ---------------------------------------------------------------
   Tableau des cotisations
   ---------------------------------------------------------------
   En flex « space-between », chaque ligne se répartit indépendamment : le
   montant se cale donc à un endroit différent selon la longueur du libellé,
   et l'en-tête ne s'aligne pas avec les lignes. Une grille à deux colonnes
   règle le problème une fois pour toutes.
   --------------------------------------------------------------- */
.jpfxv-tarif {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--40);
}

/* Le montant reste d'un seul tenant et aligné à droite. */
.jpfxv-tarif > :last-child {
	text-align: right;
	white-space: nowrap;
}

/* Sous 600px, le libellé passe au-dessus du montant plutôt que de se
   comprimer sur deux ou trois lignes. */
@media (max-width: 600px) {
	.jpfxv-tarif {
		grid-template-columns: 1fr;
	}

	.jpfxv-tarif > :last-child {
		text-align: left;
	}
}

/* Lignes de documents et d'actualités : toute la ligne réagit au survol. */
.jpfxv-doc a {
	text-decoration: none;
}

.jpfxv-doc:hover a,
.jpfxv-doc:focus-within a {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Liste des articles avec extrait (blog et archives)
   --------------------------------------------------------------- */

/* La première entrée n'a pas besoin d'espace au-dessus : le trait de la
   section fait déjà la séparation. */
.jpfxv-articles > li:first-child .jpfxv-article {
	padding-top: 0;
}

/* La dernière entrée ne porte pas de trait, la pagination suit. */
.jpfxv-articles > li:last-child .jpfxv-article {
	border-bottom: 0;
}

.jpfxv-article .wp-block-post-date,
.jpfxv-article .wp-block-post-title,
.jpfxv-article .wp-block-post-excerpt {
	margin: 0;
}

.jpfxv-article .wp-block-post-title a,
.jpfxv-article .wp-block-post-date a {
	text-decoration: none;
}

.jpfxv-article .wp-block-post-title a:hover,
.jpfxv-article .wp-block-post-title a:focus {
	text-decoration: underline;
}

/* « Lire la suite » se détache du texte de l'extrait. */
.jpfxv-article .wp-block-post-excerpt__more-text {
	margin-top: var(--wp--preset--spacing--30);
}

.jpfxv-article .wp-block-post-excerpt__more-link {
	text-decoration: underline;
}

/* La date d'un article reste lisible et ne se coupe pas. */
.jpfxv-news .wp-block-post-date {
	flex-shrink: 0;
	min-width: 8em;
}

.jpfxv-news .wp-block-post-date a,
.jpfxv-news .wp-block-post-title a {
	text-decoration: none;
}

.jpfxv-news .wp-block-post-title a:hover,
.jpfxv-news .wp-block-post-title a:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Grilles auto-adaptatives (horaires, valeurs)
   ---------------------------------------------------------------
   Garde-fou : une piste `minmax(Xrem, 1fr)` reste large de X même quand le
   conteneur est plus étroit, ce qui déborde et rogne le contenu sur petits
   écrans. On plafonne donc la largeur minimale à celle du conteneur.
   --------------------------------------------------------------- */
.jpfxv-grille {
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

/* Sans min-width: 0, un élément de grille refuse de descendre sous la largeur
   de son contenu le plus large et déborde. */
.jpfxv-grille > * {
	min-width: 0;
}

/* Sous 600px, une seule colonne : plus lisible que des cartes comprimées. */
@media (max-width: 600px) {
	.jpfxv-grille {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
   Horaires
   ---------------------------------------------------------------
   Plus de cartes à fond crème : chaque catégorie est une colonne de lignes
   séparées par des filets, comme dans la maquette.
   --------------------------------------------------------------- */
.jpfxv-horaire {
	overflow-wrap: break-word;
}

.jpfxv-horaire-titre > * {
	margin: 0;
}

/* Un créneau : le jour dans une colonne de largeur fixe, l'horaire juste
   après. C'est cette largeur fixe qui aligne verticalement tous les horaires
   d'une même colonne. */
.jpfxv-creneau {
	align-items: baseline;
}

.jpfxv-creneau > p {
	margin: 0;
}

.jpfxv-creneau-jour {
	flex: 0 0 140px;
}

/* Le dernier créneau ferme la colonne par un filet. */
.jpfxv-horaire > .jpfxv-creneau:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Sur écran étroit, 140px mangeraient trop de largeur. */
@media (max-width: 480px) {
	.jpfxv-creneau-jour {
		flex: 0 0 90px;
	}
}

/* Ligne de stage : le titre et les dates s'alignent, puis se replient. */
.jpfxv-stage > h2,
.jpfxv-stage > p {
	margin: 0;
}

/* Dessins des judokas : la légende reste collée sous l'image. */
.jpfxv-dessin figure {
	margin-bottom: 0;
}

.jpfxv-dessin > p {
	margin: 0;
}

/* ---------------------------------------------------------------
   Signes du judo en bandeau défilant
   ---------------------------------------------------------------
   Deux rangées qui glissent en sens opposés. Le contenu de chaque rangée est
   écrit deux fois dans le HTML : l'animation déplace la piste de la moitié de
   sa largeur exactement, si bien qu'à la fin du cycle la seconde série occupe
   la position de départ de la première. La boucle est donc sans raccord.
   --------------------------------------------------------------- */
.jpfxv-signes {
	overflow: hidden;
}

.jpfxv-signes-rangee {
	overflow: hidden;
}

/* La rangée du bas est décalée, comme dans la maquette. */
.jpfxv-signes-rangee--droite {
	margin-left: -133px;
}

.jpfxv-signes-piste {
	display: flex;
	width: max-content;
	will-change: transform;
}

.jpfxv-signes-rangee--gauche .jpfxv-signes-piste {
	animation: jpfxv-defile-gauche 60s linear infinite;
}

.jpfxv-signes-rangee--droite .jpfxv-signes-piste {
	animation: jpfxv-defile-droite 60s linear infinite;
}

/* -50% : la largeur d'une série, puisque le contenu est doublé. */
@keyframes jpfxv-defile-gauche {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes jpfxv-defile-droite {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Une carte : calligraphie au-dessus, noms en bas, filet tout autour. Les
   bordures adjacentes se superposent pour ne former qu'un seul trait. */
.jpfxv-signe {
	flex: 0 0 276px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--texte);
	margin-right: -1px;
}

.jpfxv-signe-glyphe {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 179px;
	padding: 16px;
}

.jpfxv-signe-glyphe figure {
	margin: 0;
}

.jpfxv-signe-glyphe img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 74px;
}

.jpfxv-signe-noms {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 93px;
	padding: 16px 24px;
}

.jpfxv-signe-nom,
.jpfxv-signe-traduction {
	margin: 0;
	font-size: 25px;
	line-height: 1.2;
}

.jpfxv-signe-nom {
	font-weight: 500;
}

.jpfxv-signe-traduction {
	font-weight: 200;
}

/* Sur petit écran, des cartes de 276px prennent tout l'écran : on réduit. */
@media (max-width: 600px) {
	.jpfxv-signe {
		flex-basis: 200px;
	}

	.jpfxv-signe-glyphe {
		height: 130px;
	}

	.jpfxv-signe-glyphe img {
		height: 54px;
	}

	.jpfxv-signe-noms {
		height: 74px;
		padding: 12px 16px;
	}

	.jpfxv-signe-nom,
	.jpfxv-signe-traduction {
		font-size: 18px;
	}

	.jpfxv-signes-rangee--droite {
		margin-left: -60px;
	}
}

/* Un défilement permanent gêne certaines personnes — vertiges, troubles de
   l'attention, lecture difficile. Les systèmes proposent un réglage
   « réduire les animations » : on le respecte et on fige les rangées. */
@media (prefers-reduced-motion: reduce) {
	.jpfxv-signes-rangee--gauche .jpfxv-signes-piste,
	.jpfxv-signes-rangee--droite .jpfxv-signes-piste {
		animation: none;
	}

	.jpfxv-signes-rangee {
		overflow-x: auto;
	}
}