/* =========================================================
   EEB Karaté — styles du site public
   ========================================================= */

:root {
	--eeb-rouge: #e2231a;
	--eeb-rouge-fonce: #a8140d;
	--eeb-noir: #111;
	--eeb-gris: #6b6b6b;
	--eeb-gris-clair: #f4f4f5;
	--eeb-bordure: #e4e4e7;
	--eeb-rayon: 8px;
	--eeb-ombre: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
}

/* ---------- Base ---------- */

/* Sans cette règle, « largeur : 100 % » sur un champ de formulaire désigne la
   largeur de son CONTENU : le rembourrage et les bordures s'y ajoutent, et le
   champ déborde de sa colonne d'une vingtaine de pixels. On demande donc à ces
   éléments de compter leur largeur bordures comprises, comme le fait déjà
   l'essentiel des blocs de WordPress. */
input,
select,
textarea,
button,
fieldset {
	box-sizing: border-box;
}

/* Un champ ne doit jamais dépasser son conteneur, même si un attribut « size »
   ou un contenu long l'y pousse. */
.eeb-champ input,
.eeb-champ select,
.eeb-champ textarea {
	max-width: 100%;
}

/* ---------- En-tête ---------- */

.eeb-header { position: sticky; top: 0; z-index: 100; }

/* Le nom du club reste à gauche ; le menu et le bouton sont repoussés contre
   le bord droit. C'est la marge automatique du menu qui absorbe tout l'espace
   disponible et pousse ce qui suit — plutôt qu'une répartition « espacée », qui
   aurait laissé le menu au milieu. */
/* La bande d'en-tête reprend la géométrie du bloc de colonnes situé plus bas :
   même plafond de 1600 px, même centrage. Le nom du club et le bouton tombent
   donc sur les bords extérieurs de la première et de la dernière photo. */
.eeb-header__inner {
	gap: 1.6rem;
	max-width: min(100%, 1600px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.eeb-header__inner > .eeb-header__menu { margin-left: auto; }

.eeb-header__brand { gap: .85rem; }
.eeb-header__brand .wp-block-site-title a { color: inherit; text-decoration: none; }

.eeb-header__menu a:hover { color: var(--eeb-rouge); text-decoration: none; }
.eeb-header__menu .current-menu-item > a { color: var(--eeb-rouge); }

.eeb-header__cta .wp-block-button__link { padding: .6em 1.2em; font-size: .8rem; }

/* Quand l'en-tête passe à la ligne, la marge automatique n'a plus de sens :
   elle collerait le menu tout à droite d'une ligne à lui seul. */
/* En dessous, le bloc de présentation reprend toute la largeur : l'en-tête
   doit suivre, sinon il resterait rentré sans raison. */
/* En dessous, l'en-tête et le bloc de présentation reprennent tous deux toute
   la largeur : il n'y a plus d'axe commun à respecter, et la remontée ferait
   sortir le logo de l'écran. */
@media (max-width: 900px) {
	.eeb-header__inner { gap: 1rem; max-width: 100% !important; }
	.eeb-header__inner > .eeb-header__menu { margin-left: auto; }
	.eeb-header__brand .wp-block-site-title { font-size: 1.15rem !important; }
}

@media (max-width: 781px) {
	.eeb-header__inner > .eeb-header__menu { margin-left: auto; }
}

/* Le bouton reste visible sur téléphone : « Mon espace » ayant quitté le menu,
   c'est devenu le seul chemin vers l'espace adhérent. Le masquer le rendrait
   inaccessible là où la plupart des familles consultent le site. */
@media (max-width: 600px) {
	.eeb-header__cta .wp-block-button__link { padding: .55em 1em; font-size: .72rem; }
}

/* ---------- Pied de page ---------- */

.eeb-footer a { color: #fff; text-decoration: none; }
.eeb-footer a:hover { color: var(--eeb-rouge); text-decoration: underline; }

/* ---------- Briques réutilisables ---------- */

.eeb-card {
	background: #fff;
	border: 1px solid var(--eeb-bordure);
	border-radius: var(--eeb-rayon);
	padding: 1.4rem 1.6rem;
}

.eeb-chapo {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--eeb-gris);
}

/* Bandeau titre rouge, repris du document d'assemblée générale du club. */
.eeb-titre-barre {
	border-left: 5px solid var(--eeb-rouge);
	padding-left: .7em;
}

/* ---------- Tableaux (résultats, licenciés, parcours) ---------- */

.eeb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.eeb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	background: #fff;
}

.eeb-table th {
	background: var(--eeb-noir);
	color: #fff;
	text-align: left;
	padding: .7rem .85rem;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	white-space: nowrap;
}

.eeb-table td {
	padding: .65rem .85rem;

	/* Ce trait sépare les lignes ET ferme le bas du tableau : la dernière cellule
	   n'est pas traitée à part. C'est ce qui garantit une épaisseur identique
	   partout — un filet ajouté sous le tableau viendrait s'additionner à celui-ci
	   et doublerait la dernière ligne. La teinte est assez soutenue pour que la
	   clôture se voie sur fond blanc ; en gris très clair, le tableau paraissait
	   ouvert en bas. */
	border-bottom: 1px solid var(--eeb-bordure-tableau, #d4d4d8);
	vertical-align: top;
}

.eeb-table tbody tr:nth-child(even) { background: #fafafa; }
.eeb-table tbody tr:hover { background: #fff5f5; }
.eeb-table .num { text-align: right; white-space: nowrap; }

.eeb-table caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 .6rem;
	color: var(--eeb-gris);
	font-size: .9rem;
}

/* ---------- Médailles ---------- */

.eeb-place {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em;
	height: 1.9em;
	padding: 0 .45em;
	border-radius: 999px;
	font-weight: 700;
	font-size: .8rem;
	background: var(--eeb-gris-clair);
	color: var(--eeb-noir);
}

.eeb-place--or     { background: #f6d879; color: #5a4300; }
.eeb-place--argent { background: #dcdfe4; color: #3d444d; }
.eeb-place--bronze { background: #e8c39a; color: #6a3f14; }

/* ---------- Ceintures ---------- */

.eeb-ceinture {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-weight: 600;
}

.eeb-ceinture::before {
	content: "";
	width: 2.2em;
	height: .75em;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, .25);
	background: var(--eeb-ceinture-couleur, #fff);
	flex: 0 0 auto;
}

/* ---------- Messages ---------- */

.eeb-message {
	border-radius: var(--eeb-rayon);
	padding: .9rem 1.1rem;
	margin: 0 0 1.2rem;
	border: 1px solid;
	font-size: .95rem;
}

.eeb-message--ok    { background: #edfaf1; border-color: #b6e3c6; color: #17603a; }
.eeb-message--erreur{ background: #fdf0ef; border-color: #f3c2be; color: #8f1c14; }
.eeb-message--info  { background: #eef4fd; border-color: #c3d7f5; color: #1c4b8f; }

.eeb-message ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- Formulaires ---------- */

.eeb-form { margin: 0; }

.eeb-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem 1.2rem;
}

.eeb-champ { display: flex; flex-direction: column; gap: .35rem; }
.eeb-champ--large { grid-column: 1 / -1; }

.eeb-champ label {
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--eeb-gris);
}

.eeb-champ .requis { color: var(--eeb-rouge); }

.eeb-champ input[type="text"],
.eeb-champ input[type="email"],
.eeb-champ input[type="tel"],
.eeb-champ input[type="date"],
.eeb-champ input[type="number"],
.eeb-champ input[type="password"],
.eeb-champ input[type="file"],
.eeb-champ select,
.eeb-champ textarea {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--eeb-bordure);
	border-radius: 6px;
	font: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--eeb-noir);
}

.eeb-champ input:focus,
.eeb-champ select:focus,
.eeb-champ textarea:focus {
	outline: 2px solid var(--eeb-rouge);
	outline-offset: 1px;
	border-color: var(--eeb-rouge);
}

.eeb-champ textarea { min-height: 140px; resize: vertical; }
.eeb-champ .aide { font-size: .8rem; color: var(--eeb-gris); text-transform: none; letter-spacing: 0; font-weight: 400; }

.eeb-case {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .95rem;
	line-height: 1.5;
}

.eeb-case input { margin-top: .25rem; flex: 0 0 auto; }
.eeb-case label { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 400; color: var(--eeb-noir); }

/* Champ pot de miel : invisible pour l'humain, visible pour le robot. */
.eeb-pot-de-miel {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eeb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	align-items: center;
	margin-top: 1.4rem;
}

.eeb-bouton {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	background: var(--eeb-rouge);
	color: #fff;
	border: 1px solid var(--eeb-rouge);
	border-radius: 4px;
	padding: .75em 1.5em;
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
}

.eeb-bouton:hover { background: var(--eeb-rouge-fonce); border-color: var(--eeb-rouge-fonce); color: #fff; text-decoration: none; }

.eeb-bouton--secondaire { background: #fff; color: var(--eeb-noir); border-color: var(--eeb-bordure); }
.eeb-bouton--secondaire:hover { background: var(--eeb-gris-clair); color: var(--eeb-noir); border-color: var(--eeb-gris); }

.eeb-bouton--danger { background: #fff; color: #8f1c14; border-color: #f3c2be; }
.eeb-bouton--danger:hover { background: #fdf0ef; color: #8f1c14; border-color: #d9453a; }

/* ---------- Espace adhérent ---------- */

.eeb-espace { margin: 0; }

.eeb-espace__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	padding: 1.4rem 1.6rem;
	background: var(--eeb-noir);
	color: #fff;
	border-radius: var(--eeb-rayon);
	margin-bottom: 1.6rem;
}

.eeb-espace__entete h2 { margin: 0; color: #fff; font-size: 1.5rem; }
.eeb-espace__entete .meta { color: #bdbdbd; font-size: .9rem; margin-top: .2rem; }
.eeb-espace__entete .droite { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }

.eeb-onglets {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	border-bottom: 2px solid var(--eeb-bordure);
	margin-bottom: 1.6rem;
}

.eeb-onglets a {
	padding: .7rem 1.1rem;
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--eeb-gris);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.eeb-onglets a:hover { color: var(--eeb-noir); text-decoration: none; }
.eeb-onglets a.actif { color: var(--eeb-rouge); border-bottom-color: var(--eeb-rouge); }

.eeb-vide {
	text-align: center;
	padding: 2.5rem 1.5rem;
	color: var(--eeb-gris);
	background: var(--eeb-gris-clair);
	border-radius: var(--eeb-rayon);
	font-size: .95rem;
}

/* ---------- Documents ---------- */

.eeb-doc-liste { list-style: none; margin: 0; padding: 0; }

.eeb-doc {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--eeb-bordure);
}

.eeb-doc__icone {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	background: #fdf0ef;
	color: var(--eeb-rouge);
	border-radius: 6px;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.eeb-doc__nom { font-weight: 600; }
.eeb-doc__meta { font-size: .82rem; color: var(--eeb-gris); }
.eeb-doc__actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Fiches / statistiques ---------- */

.eeb-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: 1.6rem;
}

.eeb-stat {
	border: 1px solid var(--eeb-bordure);
	border-radius: var(--eeb-rayon);
	padding: 1rem 1.2rem;
	background: #fafafa;
	text-align: center;
}

.eeb-stat__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--eeb-gris); }
.eeb-stat__valeur { font-size: 1.7rem; font-weight: 800; margin-top: .15rem; line-height: 1.1; }
.eeb-stat--rouge .eeb-stat__valeur { color: var(--eeb-rouge); }

/* ---------- Divers ---------- */

.eeb-etiquette {
	display: inline-block;
	padding: .2em .6em;
	border-radius: 3px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--eeb-gris-clair);
	color: var(--eeb-gris);
}

.eeb-etiquette--rouge { background: #fdf0ef; color: var(--eeb-rouge); }
.eeb-etiquette--vert  { background: #edfaf1; color: #17603a; }

.eeb-discret { color: var(--eeb-gris); font-size: .88rem; }

/* ---------- Photo de profil ---------- */

.eeb-vignette {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--eeb-gris-clair);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--eeb-bordure);
	vertical-align: middle;
}

/* Sans photo, on affiche les initiales : plus sobre qu'une silhouette grise. */
.eeb-vignette--vide {
	background: var(--eeb-rouge);
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1;
}

.eeb-espace__entete .eeb-vignette {
	border-color: rgba(255, 255, 255, .25);
	box-shadow: none;
}

.eeb-photo-bloc {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex-wrap: wrap;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--eeb-bordure);
	border-radius: var(--eeb-rayon);
	background: #fafafa;
	margin-bottom: 1.4rem;
}

.eeb-photo-bloc__champs { flex: 1 1 260px; }
.eeb-photo-bloc .eeb-champ { margin: 0; }

/* La photo d'identité garde ses proportions 35/45 : ce que l'on voit à l'écran
   est exactement ce qui sera imprimé sur la carte de licence. */
.eeb-vignette { aspect-ratio: 35 / 45; }
.eeb-espace__entete .eeb-vignette { border-radius: 3px; }

/* ---------- Numéros de téléphone : cadre au survol ---------- */

/* Le rembourrage ET la bordure sont posés en permanence, la bordure étant
   d'abord transparente. Ne les ajouter qu'au survol ferait sauter le texte au
   passage de la souris.

   La marge est positive et non négative : le cadre occupe donc sa place dans
   la ligne, ce qui dégage l'air nécessaire autour du « ou » qui sépare les deux
   numéros. Une marge négative les aurait fait se toucher au survol. */
a[href^="tel:"] {
	display: inline-block;
	padding: .18em .55em;
	margin: 0 .25em;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

a[href^="tel:"]:hover,
a[href^="tel:"]:focus-visible {
	border-color: var(--eeb-noir);
	background: transparent;
	color: var(--eeb-noir);
	text-decoration: none;
}

/* Sur le bandeau rouge, le texte reste blanc : du noir sur ce rouge tombe à
   4:1 de contraste, sous le seuil de lisibilité. C'est le cadre qui signale
   que le numéro est cliquable, pas la couleur du texte. */
.has-rouge-background-color a[href^="tel:"]:hover,
.has-rouge-background-color a[href^="tel:"]:focus-visible,
.eeb-footer a[href^="tel:"]:hover,
.eeb-footer a[href^="tel:"]:focus-visible {
	border-color: var(--eeb-noir);
	background: transparent;
	color: inherit;
}

/* Un écran tactile n'a pas de survol. Or c'est précisément sur un téléphone
   qu'appuyer sur le numéro sert à quelque chose : le cadre y est donc visible
   en permanence, en version atténuée. */
@media (hover: none) {
	a[href^="tel:"] {
		border-color: rgba(17, 17, 17, .45);
	}

	.has-rouge-background-color a[href^="tel:"],
	.eeb-footer a[href^="tel:"] {
		border-color: rgba(255, 255, 255, .5);
	}
}

/* ---------- Colonnes d'activités de l'accueil ---------- */

/* Le bloc va d'un bord à l'autre, mais pas au-delà du raisonnable : au-delà de
   1600 px les photos deviendraient énormes sans rien apporter. */
.eeb-colonnes-activites {
	flex-wrap: wrap;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

/* Cinq de front sur grand écran. WordPress répartit les colonnes à parts
   égales, mais sans passage à la ligne : on le lui apprend ici, sinon cinq
   colonnes se tassent jusqu'à devenir illisibles sur un portable. */
.eeb-colonnes-activites > .wp-block-column {
	flex-basis: calc(20% - 0.8rem) !important;
	flex-grow: 0;
}

/* Quatre puis trois de front : la photo reprend de la hauteur avant de devenir
   trop étroite. */
@media (max-width: 1500px) {
	.eeb-colonnes-activites > .wp-block-column { flex-basis: calc(25% - 0.75rem) !important; }
}

@media (max-width: 1200px) {
	.eeb-colonnes-activites > .wp-block-column { flex-basis: calc(33.333% - 0.667rem) !important; }
}

/* En dessous, WordPress empile déjà les colonnes ; on passe simplement par une
   étape à deux, plus agréable sur une tablette tenue à la verticale. */
@media (max-width: 900px) {
	.eeb-colonnes-activites > .wp-block-column { flex-basis: calc(50% - 0.5rem) !important; }
}

@media (max-width: 600px) {
	.eeb-colonnes-activites > .wp-block-column { flex-basis: 100% !important; }
}

/* Le titre et le texte sont légèrement rentrés par rapport à la photo. C'est
   le seul moyen d'écarter les textes de deux colonnes voisines sans toucher à
   l'écart entre les images : l'espacement du bloc, lui, s'applique aux deux à
   la fois. Chaque texte recule de 0,55 rem, ce qui met 1,1 rem de plus entre
   deux colonnes, tandis que les photos gardent leur écart d'origine. */
.eeb-colonnes-activites h3,
.eeb-colonnes-activites p {
	padding-left: .55rem;
	padding-right: .55rem;
}

.eeb-colonnes-activites h3 { margin-top: .9rem; margin-bottom: .35rem; }
.eeb-colonnes-activites p { margin-top: 0; }

/* Titre et texte centrés sous la photo. À l'essai : pour revenir à un texte
   aligné à gauche, il suffit de retirer ce bloc. */
.eeb-colonnes-activites h3,
.eeb-colonnes-activites p {
	text-align: center;
}

/* Sur une seule colonne, ce retrait n'a plus de raison d'être. */
@media (max-width: 600px) {
	.eeb-colonnes-activites h3,
	.eeb-colonnes-activites p {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------- Texte de présentation de l'accueil ---------- */

/* Le bloc va d'un bord à l'autre, mais son contenu occupe les trois quarts,
   avec le même plafond que les colonnes d'activités juste en dessous : sans ce
   plafond, la ligne de texte s'étirerait indéfiniment sur un très grand écran. */
/* Le sélecteur vise aussi « alignfull » et force les marges : sans cela, la
   règle de WordPress qui fait déborder les blocs pleine largeur
   (.has-global-padding > .alignfull, deux classes) l'emporte sur la nôtre et
   remplace le centrage automatique par des marges négatives. Le bloc restait
   alors collé à gauche, et son texte se centrait par rapport à lui-même plutôt
   qu'au milieu de la page. */
.eeb-presentation.alignfull {
	max-width: 1600px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Sur mobile et tablette, les trois quarts n'ont plus de sens : le texte
   reprend toute la largeur disponible. */
@media (max-width: 900px) {
	.eeb-presentation > * { max-width: 100% !important; }
}

/* Dans le bloc de présentation, les paragraphes gardent la taille du chapô mais
   reprennent la couleur du texte courant : deux paragraphes entiers en gris
   donneraient une impression délavée, et le contraste passe de 5,3 à 18,9. */
.eeb-presentation .eeb-chapo {
	color: var(--eeb-noir);
}

/* « Bienvenue au club » centré, texte compris.

   La difficulté : la barre rouge est une bordure gauche, donc collée au bord de
   l'élément. Un simple centrage du texte laisserait la barre plantée à gauche,
   à des centaines de pixels du mot. Plutôt que de jouer sur la largeur de la
   boîte — fragile, car elle dépend du texte et de la police — on supprime la
   bordure et on redessine la barre en élément inline, placé juste avant le
   texte. Elle fait dès lors partie de la ligne et se centre avec elle,
   quelle que soit la longueur du titre. */
.eeb-presentation .eeb-titre-barre {
	border-left: none;
	padding-left: 0;
	text-align: center;
}

.eeb-presentation .eeb-titre-barre::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: .78em;
	margin-right: .45em;
	background: var(--eeb-rouge);
	vertical-align: -.02em;
}

/* Les paragraphes suivent le titre, et partagent tous la même écriture.

   Sans cette règle, le premier paragraphe — qui porte la classe « chapô » —
   s'affiche en 1,15 rem et en gris, les suivants en 1,0625 rem et en noir :
   trois différences visibles sur une même page. On ne vise que les enfants
   DIRECTS, pour que les légendes d'une galerie, les cellules d'un tableau ou
   le texte d'un encart gardent leur propre traitement. */
.eeb-presentation > p,
.eeb-presentation > .eeb-chapo {
	text-align: center;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--eeb-noir);
}

/* ---------- Page Contact ---------- */

/* Même largeur que les colonnes d'activités de l'accueil, pour que les deux
   pages se répondent. Le sélecteur nomme « alignfull » et force les marges :
   sans cela, la règle de WordPress sur les blocs pleine largeur l'emporte et
   colle le bloc à gauche au lieu de le centrer. */
.eeb-contact.alignfull {
	max-width: 1600px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Trois colonnes serrées deviennent illisibles avant même que WordPress ne les
   empile : on passe donc par une étape où le plan descend sous le reste.

   ⚠ La borne basse à 782 px est indispensable. WordPress empile les colonnes
   en dessous de 781 px avec une règle de force égale à la nôtre ; sans borne,
   la nôtre arrive après dans la feuille et l'emporte, les trois colonnes
   restent côte à côte sur un téléphone et la page déborde horizontalement. */
@media (min-width: 782px) and (max-width: 1100px) {
	.eeb-colonnes-contact { flex-wrap: wrap !important; }
	.eeb-colonnes-contact > .wp-block-column:nth-child(1) { flex-basis: 58% !important; }
	.eeb-colonnes-contact > .wp-block-column:nth-child(2) { flex-basis: 34% !important; }
	.eeb-colonnes-contact > .wp-block-column:nth-child(3) { flex-basis: 100% !important; }
	.eeb-colonnes-contact > .wp-block-column:nth-child(3) .eeb-carte iframe { aspect-ratio: 21 / 9; }
}

/* Sur téléphone, on laisse WordPress empiler et on rend au plan un cadrage
   confortable ; le panoramique n'a de sens qu'en pleine largeur d'écran. */
@media (max-width: 781px) {
	.eeb-colonnes-contact > .wp-block-column { flex-basis: 100% !important; }
	.eeb-carte iframe { aspect-ratio: 4 / 3; }
}

/* ---------- En-tête sur petit écran ---------- */

/* Sur un téléphone de 390 px, le logo et le nom du club consomment à eux seuls
   toute la largeur utile, avant même le menu et le bouton. On réduit les deux
   pour que la ligne respire. */
@media (max-width: 600px) {
	.eeb-header__brand { gap: .6rem; }
	.eeb-header__brand .wp-block-site-title { font-size: 1rem !important; line-height: 1.15; }
	.eeb-header__brand .wp-block-site-logo img,
	.eeb-header__brand .wp-block-site-logo .custom-logo-link img { width: 42px !important; height: auto; }
	.eeb-header__inner { gap: .7rem; }
}

/* Garde-fou général : rien ne doit pouvoir provoquer un défilement horizontal
   sur téléphone. Un seul élément trop large décale toute la page et donne
   l'impression que le site est cassé. */
@media (max-width: 781px) {
	.wp-site-blocks { overflow-x: clip; }
	.eeb-table-wrap { overflow-x: auto; }
}

/* ---------- Numéros du club, alignés ---------- */

/* « Président » et « Secrétaire » n'ont pas la même longueur : sans largeur
   imposée, les deux numéros ne démarreraient pas au même endroit. La valeur
   couvre la plus longue des deux étiquettes. */
.eeb-tel-role {
	display: inline-block;
	min-width: 6.6em;
}

/* Chiffres à chasse fixe. Par défaut, Inter donne au « 1 » une largeur moindre
   qu'au « 4 » ou au « 0 » : deux numéros de dix chiffres ne tombent alors pas
   sur la même longueur, et celui qui n'a pas de « 1 » paraît plus gros. Cette
   variante impose la même largeur à tous les chiffres — c'est ce qui sert à
   aligner des colonnes de nombres. */
a[href^="tel:"] {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Sur téléphone, la ligne peut manquer de place : on préfère alors un retour
   à la ligne propre à un alignement qui pousse le numéro hors de l'écran. */
@media (max-width: 400px) {
	.eeb-tel-role { min-width: 0; display: block; }
}

/* ---------- Titres alignés à gauche ---------- */

/* Le titre de page vient du gabarit, pas du contenu : sans cette règle il
   garde la largeur par défaut et démarre à un tout autre endroit que le texte. */
.eeb-page-titre.alignfull {
	max-width: 1600px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Sur les pages qui portent cette classe, les titres reviennent à gauche
   pendant que les paragraphes restent centrés. */
.eeb-titres-gauche .eeb-titre-barre,
.eeb-page-titre .wp-block-post-title {
	text-align: left;
}

/* Exceptions : pages dont le titre est centré. La classe vient de l'adresse de
   la page (eeb_classe_page) et non de son numéro, qui diffère entre le site
   local et la production. */
.eeb-page-le-club .eeb-page-titre .wp-block-post-title,
.eeb-page-epreuves-passage-de-grade .eeb-page-titre .wp-block-post-title,
.eeb-page-resultats .eeb-page-titre .wp-block-post-title {
	text-align: center;
}

/* Pages de cours. La règle vise le préfixe de leur adresse plutôt que chacune des
   cinq pages : une page de cours créée plus tard sera centrée d'elle-même, sans
   qu'il faille revenir ici. */
body[class*="eeb-page-cours-"] .eeb-page-titre .wp-block-post-title {
	text-align: center;
}

/* Exception : sur les fiches de passage de grade, le titre est centré au-dessus
   du dessin de la ceinture, lui-même centré.

   La règle ne vise pas les pages une par une : elle reconnaît toute page dont le
   contenu porte une fiche de grade. Les fiches à venir — orange, bleue, marron —
   seront donc centrées sans rien ajouter ici. Le :has est indispensable, le titre
   venant du gabarit et non du contenu : il n'existe aucun lien de parenté entre
   les deux, seule la présence de la fiche dans la même page les relie. */
main:has(.eeb-fiche-grade) .eeb-page-titre .wp-block-post-title {
	text-align: center;
}

/* Le bloc « tableau » de WordPress place la classe sur la figure englobante,
   pas sur la balise <table> : sans cette règle, la fusion des bordures et la
   largeur ne s'appliqueraient pas. */
.wp-block-table.eeb-table table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

.wp-block-table.eeb-table { overflow-x: auto; }
.wp-block-table.eeb-table td:first-child { white-space: nowrap; }

/* ---------- Périodes du tableau des horaires ---------- */

/* Deux teintes très pâles pour distinguer d'un coup d'œil les horaires de
   pleine saison de ceux de fin de saison. Le filet coloré à gauche double
   l'information : la couleur seule ne suffit pas pour qui la distingue mal. */
.eeb-tableau-horaires tbody tr.eeb-periode-a,
.eeb-tableau-horaires tbody tr.eeb-periode-a:nth-child(even) {
	background: #eef4fd;
}

.eeb-tableau-horaires tbody tr.eeb-periode-b,
.eeb-tableau-horaires tbody tr.eeb-periode-b:nth-child(even) {
	background: #fdf5e9;
}

.eeb-tableau-horaires tbody tr.eeb-periode-a:hover { background: #e2ecfa; }
.eeb-tableau-horaires tbody tr.eeb-periode-b:hover { background: #faedd8; }

/* Le filet est dessiné en ombre intérieure : une vraie bordure viendrait
   perturber la fusion des bordures du tableau. */
.eeb-tableau-horaires tbody tr.eeb-periode-a td:first-child { box-shadow: inset 4px 0 0 #2f6fb5; }
.eeb-tableau-horaires tbody tr.eeb-periode-b td:first-child { box-shadow: inset 4px 0 0 #d98b1f; }

/* À l'impression, les fonds doivent être conservés, sinon la distinction
   disparaît sur le papier. */
@media print {
	.eeb-tableau-horaires tbody tr.eeb-periode-a { background: #eef4fd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.eeb-tableau-horaires tbody tr.eeb-periode-b { background: #fdf5e9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Espace adhérent ---------- */

/* Le titre de page est centré ici seulement : ailleurs il reste aligné à
   gauche sur l'axe du contenu, comme sur « Le club » et « Résultats ». */
.eeb-page-mon-espace .eeb-page-titre .wp-block-post-title {
	text-align: center;
}

/* ---------- Galeries au format paysage ---------- */

/* Problème résolu ici : dans une galerie « recadrée », WordPress étire chaque
   case sur la hauteur de la rangée, laquelle est dictée par la photo la plus
   haute. Une seule photo verticale suffit donc à imposer une case très haute,
   et les photos horizontales voisines sont agrandies pour la remplir — sur la
   page « Le club », la photo 4 se retrouvait grossie 2,6 fois, réduite à une
   bande centrale.

   La classe eeb-galerie-paysage impose au contraire un format identique et
   explicite à toutes les cases : 3/2, le format paysage courant des appareils
   photo, déjà retenu par add_image_size( 'eeb-carte', 640, 420 ). Aucune photo
   ne dicte plus la hauteur des autres.

   La classe est répétée dans le sélecteur pour peser plus lourd que la règle de
   WordPress, qui s'appuie sur :not(#individual-image) — un identifiant, donc une
   spécificité élevée. C'est volontaire, et cela évite un !important. On ne
   s'appuie pas sur .is-cropped : la règle continue ainsi de s'appliquer si la
   case « Recadrer les images » est décochée un jour dans l'éditeur. */

.wp-block-gallery.has-nested-images.eeb-galerie-paysage.eeb-galerie-paysage figure.wp-block-image:not(#individual-image) {
	aspect-ratio: 3 / 2;

	/* Les deux déclarations qui suivent sont le cœur du correctif, et non des
	   ajustements. WordPress pose align-self:inherit sur la case, ce qui la fait
	   hériter du stretch de la galerie : une hauteur lui est alors imposée par
	   la rangée, et une hauteur imposée l'emporte sur aspect-ratio, qui ne
	   servirait plus à rien. flex-start rend à la case sa hauteur propre.
	   flex-grow:0 empêche par ailleurs la dernière case d'une rangée incomplète
	   de s'élargir seule, et donc de devenir plus grande que ses voisines. */
	align-self: flex-start;
	flex-grow: 0;
}

.wp-block-gallery.has-nested-images.eeb-galerie-paysage.eeb-galerie-paysage figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Palier intermédiaire. WordPress ne connaît que deux états : deux colonnes en
   dessous de 600 px, puis d'un coup les cinq colonnes demandées. Sur une
   tablette, cinq cases côte à côte tomberaient à environ 110 px de large — des
   timbres-poste. Trois colonnes sur cette plage font la transition.

   La gouttière est celle de WordPress (--wp--style--unstable-gallery-gap), et
   non --wp--style--block-gap : la galerie calcule ses largeurs avec la
   première, s'en écarter décalerait les cases d'un ou deux pixels. */
@media (min-width: 600px) and (max-width: 899px) {
	.wp-block-gallery.has-nested-images.eeb-galerie-paysage.eeb-galerie-paysage figure.wp-block-image:not(#individual-image) {
		width: calc(33.333% - var(--wp--style--unstable-gallery-gap, 16px) * .66667);
	}
}
/* ---------- Photos d'ambiance dans les marges ---------- */

/* Le texte de la page occupe 75 % de la largeur : il reste une bande vide de
   chaque côté, que ces colonnes de photos viennent habiller de haut en bas.

   Le remplissage n'est pas réglé à la main. Chaque colonne est tendue du haut
   au bas de la page (top:0 ; bottom:0) et ses photos se partagent cette hauteur
   à parts égales (flex:1). Ajouter ou retirer une photo, rallonger un
   paragraphe : la colonne reste pleine, sans trou en bas ni débordement. Fixer
   une hauteur de photo aurait au contraire demandé de la recalculer à chaque
   modification du texte.

   Les largeurs sont en pourcentage et non en vw, parce que la page est plafonnée
   à 1600 px (voir .eeb-presentation.alignfull) : au-delà, un calcul en vw
   continuerait de croître et pousserait les photos hors de la page. Le
   pourcentage, lui, suit ce plafond de lui-même. La bande libre valant 12,5 %
   de chaque côté, une photo de 10 % s'y centre avec 1,25 % de part et d'autre. */

.eeb-presentation.alignfull {
	/* Repère des colonnes : sans cela, elles se caleraient sur la fenêtre
	   entière et non sur la page. */
	position: relative;
}

.eeb-colonne-marge {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10%;
	display: flex;
	flex-direction: column;
	gap: 1rem;

	/* En position absolue, une marge héritée de l'espacement entre blocs
	   décalerait la colonne vers le bas. */
	margin: 0;
}

.eeb-colonne-marge--gauche { left: 1.25%; }
.eeb-colonne-marge--droite { right: 1.25%; }

/* La figure entière est étirée, et non l'image seule : WordPress place le bouton
   « agrandir » en mesurant la figure, qui doit donc garder une hauteur réelle. */
.eeb-colonne-marge .wp-block-image {
	flex: 1;
	margin: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--eeb-rayon, 8px);
}

.eeb-colonne-marge .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* En dessous de 1400 px de large, la bande latérale ne peut plus contenir une
   photo lisible sans mordre sur le texte : les colonnes disparaissent et la page
   reprend exactement l'allure qu'elle avait avant. C'est le principe même d'un
   décor de marge — il n'existe que s'il y a de la place pour lui. */
@media (max-width: 1399px) {
	.eeb-colonne-marge { display: none; }
}

/* À l'impression, ces photos ne servent à rien et gêneraient la mise en page. */
@media print {
	.eeb-colonne-marge { display: none; }
}

/* ---------- Galerie transformée en boutons ---------- */

/* Les cinq photos du bas de « Le club » mènent chacune à une page de cours.
   Une photo cliquable ne se voit pas : sans libellé ni réaction au survol, le
   visiteur n'a aucune raison de cliquer. Le nom du cours est donc écrit par
   dessus, sur un voile sombre qui garantit la lisibilité quelle que soit la
   photo choisie — c'est ce qui permet au club de changer les photos librement.

   Les sélecteurs répètent .wp-block-gallery et .has-nested-images pour passer
   devant les règles de WordPress, qui habillent déjà les légendes de galerie
   d'un dégradé et d'un flou cantonnés au bas de l'image. */

.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image {
	overflow: hidden;
	border-radius: var(--eeb-rayon, 8px);
}

/* Le lien doit occuper toute la case, sans quoi seule la surface exacte de
   l'image serait cliquable. */
.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image img {
	transition: transform .35s ease;
}

/* WordPress pose déjà un voile, mais bridé à 3 em de haut et adouci par un
   dégradé : il éclaire le bas de la photo, pas le libellé centré. On le reprend
   sur toute la hauteur, d'un seul tenant. */
.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image:has(figcaption)::before {
	height: 100%;
	max-height: none;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: none;
	-webkit-mask-image: none;
	mask-image: none;
	transition: background .25s ease;
}

.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image figcaption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .6rem;
	background: none;
	overflow: visible;
	font-family: var(--wp--preset--font-family--titre, inherit);
	font-size: clamp(.72rem, .85vw, .95rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);

	/* Sans cela, le bouton ne fonctionne pas. La legende couvre toute la case
	   pour centrer le nom du cours : elle se retrouve donc PAR-DESSUS le lien et
	   intercepte les clics, alors que le lien est bien present dans la page. Les
	   clics doivent la traverser. Le survol, lui, reste declenche par la case. */
	pointer-events: none;
}

/* Au survol, le voile prend le rouge du club et la photo avance légèrement :
   deux signaux qui disent « ceci est un bouton » sans ajouter d'élément. */
.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image:hover::before,
.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image:focus-within::before {
	background: rgba(226, 35, 26, .68);
}

.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image:hover img,
.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image:focus-within img {
	transform: scale(1.06);
}

/* Le contour de focus doit rester visible : il est dessiné sur la case, pas sur
   le lien, que le débordement masqué rognerait. */
.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image:focus-within {
	outline: 3px solid var(--eeb-rouge, #e2231a);
	outline-offset: 3px;
}

.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image > a:focus-visible {
	outline: none;
}

/* Certaines personnes règlent leur système pour supprimer les animations. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image img { transition: none; }
	.wp-block-gallery.has-nested-images.eeb-galerie-boutons figure.wp-block-image:hover img { transform: none; }
}

/* ---------- Sous-menu « Le club » ---------- */

/* WordPress donne au panneau déroulant les couleurs du menu — texte blanc sur
   fond noir, comme l'en-tête. Posé tel quel au-dessus d'une page blanche, il
   flotte sans limite nette : l'ombre et le retrait lui donnent son contour.

   « Le club » reste un lien vers sa propre page : le panneau s'ouvre au survol,
   il ne remplace pas le clic. Un bouton distinct, ajouté par WordPress, permet
   de l'ouvrir au clavier et au doigt. */

.eeb-header__menu .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding: .5rem 0;
	border: none;
	border-radius: var(--eeb-rayon, 8px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.eeb-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .55rem 1.1rem;
	width: 100%;
}

/* Le survol colore toute la ligne, et pas seulement le texte : la cible est
   plus large, donc plus facile à viser. */
.eeb-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: rgba(255, 255, 255, .08);
}

/* Dans le menu plein écran des téléphones, le panneau est déjà dans le flux :
   l'ombre et le fond n'auraient plus de sens, seul le décalage sert à montrer
   que ces entrées dépendent de « Le club ». */
@media (max-width: 781px) {
	.eeb-header__menu .wp-block-navigation__submenu-container {
		min-width: 0;
		padding: 0 0 0 1rem;
		box-shadow: none;
	}
}

/* ---------- Bloc « S'inscrire » des pages de cours ---------- */

/* Les deux phrases à gauche, le bouton à leur droite et centré sur leur
   hauteur. La disposition elle-même vient du bloc groupe de WordPress (flex,
   espacement maximal, alignement vertical centré), réglé dans l'éditeur : elle
   se voit donc aussi pendant l'édition, sans dépendre de cette feuille.

   Ce qui suit ne règle que ce que l'éditeur ne sait pas exprimer. */

.eeb-inscription {
	gap: 1.5rem 2.5rem;
}

/* Sans base de largeur, une phrase courte laisserait le bouton flotter au
   milieu de la ligne au lieu de le repousser au bord. Le texte prend donc toute
   la place disponible, tout en pouvant passer sous le bouton s'il devient trop
   à l'étroit. */
.eeb-inscription__texte {
	flex: 1 1 20rem;
}

/* Les deux phrases forment un seul paragraphe visuel : l'espacement normal
   entre blocs les éloignerait trop pour que le bouton paraisse centré entre
   elles. */
.eeb-inscription__texte > p {
	margin-block: 0;
}

.eeb-inscription__texte > p + p {
	margin-block-start: .35rem;
}

.eeb-inscription .wp-block-buttons {
	flex: 0 0 auto;
	margin-block: 0;
}

/* Sur téléphone, les deux éléments sont déjà l'un sous l'autre : le bouton
   s'étire alors sur toute la largeur, plus facile à viser du pouce. */
@media (max-width: 600px) {
	.eeb-inscription .wp-block-buttons,
	.eeb-inscription .wp-block-button,
	.eeb-inscription .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ---------- Vignettes cliquables de l'accueil ---------- */

/* Les cinq vignettes d'activité mènent chacune à une page. Contrairement aux
   boutons du bas de « Le club », leur intitulé est déjà écrit sous la photo :
   inutile de le répéter par dessus. Il ne manque que le signal du survol, sans
   lequel rien n'indique que la photo est cliquable.

   Le voile est posé en ::after et reste transparent au repos : l'animer depuis
   le néant provoquerait un saut au premier survol. */

.eeb-vignette-lien {
	position: relative;
	overflow: hidden;
	border-radius: var(--eeb-rayon, 8px);
}

.eeb-vignette-lien > a {
	display: block;
}

.eeb-vignette-lien img {
	display: block;
	transition: transform .35s ease;
}

.eeb-vignette-lien::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(226, 35, 26, 0);
	transition: background .25s ease;
	pointer-events: none;
}

.eeb-vignette-lien:hover img,
.eeb-vignette-lien:focus-within img {
	transform: scale(1.05);
}

.eeb-vignette-lien:hover::after,
.eeb-vignette-lien:focus-within::after {
	background: rgba(226, 35, 26, .28);
}

/* Le contour de focus est dessiné sur la vignette : posé sur le lien, il serait
   rogné par le débordement masqué qui rend le zoom possible. */
.eeb-vignette-lien:focus-within {
	outline: 3px solid var(--eeb-rouge, #e2231a);
	outline-offset: 3px;
}

.eeb-vignette-lien > a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.eeb-vignette-lien img { transition: none; }
	.eeb-vignette-lien:hover img { transform: none; }
}

/* ---------- Bouton posé sur la ligne du titre de page ---------- */

/* Le titre d'une page vient du gabarit, le contenu vient de l'éditeur : un bloc
   du contenu ne peut donc pas être placé « à côté » du titre au sens propre.
   Le bouton est posé en tête de contenu, puis remonté sur la ligne du titre.

   La remontée est calculée, pas tâtonnée. Trois valeurs la composent :
     – la hauteur du titre, soit sa taille de police × 1,2 (interligne des
       titres, réglé dans theme.json) ;
     – l'écart de 24 px entre le bloc du titre et le contenu ;
     – la moitié de l'écart de hauteur entre le titre et le bouton, pour que le
       bouton se centre sur la ligne plutôt que de s'aligner sur son sommet.
   Ce qui donne : 0,6 × taille du titre + 48 px. La taille du titre étant
   elle-même variable selon la largeur de l'écran, la remontée suit. */

/* Le sélecteur est volontairement lourd. WordPress applique
   « :root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 } »,
   qui remet à zéro la marge haute du premier élément d'un contenu — et ce bouton
   est justement le premier. Une simple classe perdait donc contre cette règle, et
   la remontée n'avait aucun effet. */
:root .eeb-presentation > .eeb-bouton-titre {
	margin-block-start: calc(-0.6 * var(--wp--preset--font-size--titre, 2.5rem) - 48px);
	margin-block-end: 0;
}

/* Sans cela, la marge négative se propagerait au groupe entier et remonterait
   toute la page sous le titre : c'est la fusion des marges entre un conteneur et
   son premier enfant. flow-root l'empêche, sans rien couper — les colonnes de
   photos de « Le club », posées en absolu, ne sont pas concernées. Le :has cible
   uniquement les pages qui portent ce bouton. */
.eeb-presentation:has(> .eeb-bouton-titre) {
	display: flow-root;
}

/* Le seuil est 900 px, et non la coupure habituelle de 782 px, parce que c'est à
   900 px que « .eeb-presentation > * » repasse en pleine largeur (voir plus haut) :
   le bouton s'alignerait alors sur le bord de la page tandis que le titre resterait
   sur son axe à 75 %. Mesuré : 98 px d'écart à droite. Au-delà de ce seuil, le
   bouton reprend donc simplement sa place en tête de contenu. */
@media (max-width: 900px) {
	:root .eeb-presentation > .eeb-bouton-titre {
		margin-block-start: 0;
		margin-block-end: var(--wp--style--block-gap, 24px);
	}
}

/* ---------- Ceinture illustrant une fiche de passage de grade ---------- */

/* Le dessin fait 362 px de large : l'afficher plus grand le rendrait flou. Il
   est donc borné, et centré pour ne pas flotter seul à gauche du titre. */
.eeb-ceinture-illustration {
	max-width: 300px;
	margin: 0 auto 1.5rem;
}

.eeb-ceinture-illustration img {
	width: 100%;
	height: auto;
}

/* Le fond du dessin est transparent : sur papier, une ceinture blanche ne se
   verrait que par son trait noir, ce qui est le rendu voulu. Les fonds doivent
   en revanche être imprimés pour les autres couleurs, ce que les navigateurs
   ne font pas par défaut. */
@media print {
	.eeb-ceinture-illustration {
		max-width: 55mm;
		margin-bottom: 6mm;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ---------- Feuille A4 paysage (fiche d'évaluation) ---------- */

/* Reproduit à l'écran la fiche papier du club : une feuille A4 couchée, avec ses
   bandeaux verts et ses cases à remplir à la main.

   Toute la fiche est dimensionnée en « cqw » — des pourcentages de la largeur de
   la feuille elle-même. Une seule règle fixe donc l'échelle de l'ensemble : la
   feuille rétrécit d'un bloc sur un écran étroit, sans qu'aucun texte ne déborde
   de sa case ni ne se réordonne. Des tailles en pixels auraient demandé une
   dizaine de points de rupture, et la fiche aurait fini par ne plus ressembler à
   une feuille. */

.eeb-feuille-a4 {
	container-type: inline-size;
	width: 100%;
	max-width: 297mm;
	margin: 0 auto 2rem;
}

.eeb-feuille-a4__page {
	aspect-ratio: 297 / 210;
	box-sizing: border-box;
	padding: 2cqw 2.6cqw;
	background: #fff;
	color: #111;
	border: 1px solid #d4d4d8;
	border-radius: 3px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
	font-family: var(--wp--preset--font-family--texte, sans-serif);
	font-size: 1.02cqw;
	line-height: 1.2;
	letter-spacing: 0;
	display: flex;
	flex-direction: column;
	gap: .85cqw;
}

/* Bandeaux de section. */
.eeb-f__bandeau {
	/* Vert des ceintures, repris de eeb_grades() dans le plugin. */
	background: #3f9e50;
	color: #fff;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .4cqw 0;
	font-size: 1.1cqw;
}

.eeb-f__titre {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1cqw;
	font-size: 1.3cqw;
}

.eeb-f__titre img {
	width: 7cqw;
	height: auto;
}

/* Bandeau d'identité et règles de validation, côte à côte. */
.eeb-f__haut {
	display: flex;
	gap: 3cqw;
	align-items: flex-start;
}

.eeb-f__identite { flex: 0 0 38%; }
.eeb-f__regles   { flex: 1; margin: 0; padding-left: 1.4cqw; }
.eeb-f__regles li { margin-bottom: .35cqw; }

/* Tous les tableaux de la feuille partagent le même trait fin. */
.eeb-feuille-a4 table {
	width: 100%;
	border-collapse: collapse;
	background: none;
}

.eeb-feuille-a4 th,
.eeb-feuille-a4 td {
	border: 1px solid #444;
	padding: .26cqw .55cqw;
	font-size: inherit;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.eeb-f__identite th { width: 26%; font-weight: 700; background: #f4f4f5; }
.eeb-f__identite td { height: 2.2cqw; }

/* Grilles de notation : huit colonnes numérotées, trois niveaux. */
.eeb-f__grille thead th {
	background: #eaf7ec;
	font-weight: 700;
	text-align: center;
}

/* La première colonne porte les niveaux, les huit suivantes les techniques. Sans
   cette distinction, la largeur de 12,5 % s'appliquait aussi à la colonne des
   niveaux : les neuf colonnes ne pouvaient plus tenir, et la huitième technique
   se retrouvait écrasée à 23 px. */
.eeb-f__grille th:first-child { width: 9%; }
.eeb-f__grille th:not(:first-child) { width: 11.375%; }

.eeb-f__grille tbody th {
	background: #f4f4f5;
	font-weight: 700;
	width: 9%;
	white-space: nowrap;
}

.eeb-f__grille tbody td {
	text-align: center;
	height: 1.5cqw;
}

/* Ligne médiane teintée : sur une grille de huit colonnes remplie à la main, elle
   évite de noter la mauvaise technique en suivant la ligne du regard. */
.eeb-f__grille tbody tr:nth-child(2) td { background: #fafafa; }

/* Bas de feuille : termes à gauche, observations à droite. */
.eeb-f__bas {
	display: flex;
	gap: 3cqw;
	flex: 1;
	min-height: 0;
}

/* Le cadre des termes et celui des observations doivent se terminer à la même
   hauteur. Les deux blocs sont bien étirés par le flex parent, mais le tableau
   des termes gardait sa hauteur naturelle à l'intérieur du sien : il s'arrêtait
   donc plus haut, laissant un vide sous lui pendant que le cadre voisin
   descendait jusqu'en bas. Le tableau prend maintenant la place restante, et ses
   dix lignes se répartissent dessus. */
.eeb-f__termes {
	flex: 0 0 42%;
	display: flex;
	flex-direction: column;
}

.eeb-f__termes table { flex: 1; }
.eeb-f__termes .eeb-f__bandeau { margin-bottom: 0; }
.eeb-f__termes td:first-child { background: #f7fcf8; }
.eeb-f__termes td:last-child  { width: 12%; }

.eeb-f__observations {
	flex: 1;
	border: 1px solid #444;
	padding: .7cqw .9cqw;
	font-weight: 700;
}

/* Pied de feuille : les trois cadres de clôture. */
.eeb-f__pied {
	display: flex;
	gap: 2cqw;
}

.eeb-f__pied > div {
	flex: 1;
	border: 1px solid #444;
	padding: .7cqw .9cqw;
	font-weight: 700;
	min-height: 4.2cqw;
}

.eeb-f__pied > div span {
	display: block;
	margin-top: 1.2cqw;
}

/* ---------- Bouton d'impression en pied de fiche ---------- */

/* Le bouton clôt la fiche, centré. Il reste masqué sur papier : la classe
   .eeb-bouton figure déjà dans les éléments écartés par print.css — un bouton
   imprimé ne servirait à rien. */
.eeb-imprimer-pied {
	margin-top: 2.5rem;

	/* Deux boutons côte à côte, centrés, qui passent l'un sous l'autre si la
	   place manque. Un simple text-align:center les aurait collés. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
}

/* ---------- Feuille A4 portrait (fiches de programme) ---------- */

/* Même principe que la feuille paysage : toute la mise en page est exprimée en
   pourcentages de la largeur de la feuille, de sorte qu'elle rétrécisse d'un
   bloc sans jamais se réordonner. Les valeurs diffèrent parce que la feuille est
   plus étroite : à taille de texte égale sur le papier, il faut une proportion
   plus grande ici que sur une feuille couchée. */

.eeb-feuille-a4--portrait {
	max-width: 210mm;
}

.eeb-feuille-a4--portrait .eeb-feuille-a4__page {
	aspect-ratio: 210 / 297;
	padding: 5cqw 6cqw;
	font-size: 1.55cqw;
	line-height: 1.45;
	gap: 3cqw;
	justify-content: flex-start;
}

.eeb-fp__entete {
	text-align: center;
	margin-bottom: 1cqw;
}

.eeb-fp__entete img {
	width: 30cqw;
	height: auto;
	display: block;
	margin: 0 auto 1.5cqw;
}

.eeb-fp__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre, serif);
	font-size: 3cqw;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.15;
}

/* Le filet prend la couleur de la ceinture de la fiche, définie plus bas par
   --eeb-couleur-ceinture. Le rouge du site ne sert que de repli, si une fiche
   n'a pas encore reçu sa classe de couleur. */
.eeb-fp__section h3 {
	margin: 0 0 1.2cqw;
	padding-left: .8em;
	border-left: .5cqw solid var(--eeb-couleur-ceinture, var(--eeb-rouge, #e2231a));
	font-family: var(--wp--preset--font-family--titre, sans-serif);
	font-size: 2cqw;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.2;
}

.eeb-fp__section + .eeb-fp__section {
	margin-top: 2cqw;
}

.eeb-fp__section ul {
	margin: 0;
	padding-left: 1.6em;
}

.eeb-fp__section li {
	margin-bottom: .5cqw;
}

/* Les termes japonais sont alignés en deux colonnes : le terme reste lisible
   d'un coup d'œil quand on révise, ce qu'une simple suite « terme : sens »
   ne permet pas. */
.eeb-fp__termes {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .5cqw 1.5cqw;
	margin: 0;
}

.eeb-fp__termes dt { font-weight: 700; }
.eeb-fp__termes dd { margin: 0; }

/* ---------- Bordure de couleur des feuilles ---------- */

/* Chaque feuille porte la couleur de sa ceinture : la fiche s'identifie de loin,
   sans avoir à lire son titre. Les couleurs sont celles de eeb_grades(), comme
   les dessins de ceinture et les pastilles de l'espace adhérent.

   Le liseré gris posé en « outline » n'est pas décoratif : sur une bordure
   blanche — moitié haute de la blanche-jaune — la feuille se confondrait sans lui
   avec le fond de la page. Il délimite le bord dans tous les cas. */

.eeb-feuille-a4__page {
	border-width: .38cqw;
	outline: 1px solid rgba(0, 0, 0, .14);
}

.eeb-feuille-a4--c-jaune .eeb-feuille-a4__page  { border-color: #f4d13d; }
.eeb-feuille-a4--c-orange .eeb-feuille-a4__page { border-color: #ef8b28; }
.eeb-feuille-a4--c-verte .eeb-feuille-a4__page  { border-color: #3f9e50; }
.eeb-feuille-a4--c-bleue .eeb-feuille-a4__page  { border-color: #2f6fb5; }
.eeb-feuille-a4--c-marron .eeb-feuille-a4__page { border-color: #7b4a25; }

/* Ceintures bicolores : la bordure reprend le partage haut/bas du dessin.
   border-image impose une bordure « transparente » comme repli, faute de quoi la
   couleur unie resterait visible sur les navigateurs qui l'ignorent. */
.eeb-feuille-a4--c-blanche-jaune .eeb-feuille-a4__page {
	border-color: transparent;
	border-image: linear-gradient(180deg, #ffffff 50%, #f4d13d 50%) 1;
}

.eeb-feuille-a4--c-jaune-orange .eeb-feuille-a4__page {
	border-color: transparent;
	border-image: linear-gradient(180deg, #f4d13d 50%, #ef8b28 50%) 1;
}

.eeb-feuille-a4--c-orange-verte .eeb-feuille-a4__page {
	border-color: transparent;
	border-image: linear-gradient(180deg, #ef8b28 50%, #3f9e50 50%) 1;
}

.eeb-feuille-a4--c-verte-bleue .eeb-feuille-a4__page {
	border-color: transparent;
	border-image: linear-gradient(180deg, #3f9e50 50%, #2f6fb5 50%) 1;
}

.eeb-feuille-a4--c-bleue-marron .eeb-feuille-a4__page {
	border-color: transparent;
	border-image: linear-gradient(180deg, #2f6fb5 50%, #7b4a25 50%) 1;
}

/* ---------- Message d'attente (contenu en préparation) ---------- */

.eeb-attente {
	margin: 3rem auto;
	padding: 2.5rem 1.5rem;
	max-width: 34rem;
	text-align: center;
	background: var(--eeb-gris-clair, #f4f4f5);
	border: 1px solid var(--eeb-bordure, #e4e4e7);
	border-radius: var(--eeb-rayon, 8px);
}

/* Le sablier se retourne toutes les six secondes. Le mouvement dit « en cours »
   là où une icône figée laisserait croire à une page vide ou cassée — c'est tout
   son rôle, d'où une cadence lente : une animation rapide donnerait l'impression
   d'un chargement bloqué. */
.eeb-sablier {
	margin: 0 0 1rem;
	font-size: 3.2rem;
	display: inline-block;
	line-height: 1;
	animation: eeb-sablier 6s ease-in-out infinite;
	transform-origin: 50% 50%;
}

@keyframes eeb-sablier {
	0%, 42%   { transform: rotate(0deg); }
	50%, 92%  { transform: rotate(180deg); }
	100%      { transform: rotate(360deg); }
}

.eeb-attente__texte {
	margin: 0;
	color: var(--eeb-gris, #6b6b6b);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Une animation qui tourne en boucle est précisément ce que ce réglage système
   demande d'éviter ; le sablier reste alors simplement affiché. */
@media (prefers-reduced-motion: reduce) {
	.eeb-sablier { animation: none; }
}

/* Sur papier, un sablier n'a pas de sens : seul le message est conservé. */
@media print {
	.eeb-sablier { display: none; }
	.eeb-attente { border: none; background: none; }
}

/* Sablier logé dans une case du bilan : il occupe la place du chiffre absent, à
   sa taille, pour que la rangée garde sa hauteur et son alignement. La marge
   basse du sablier de pleine page n'a pas cours ici. */
.eeb-stat__valeur.eeb-sablier {
	margin: 0;
	font-size: 1.9rem;
}

/* ---------- Liste des compétitions du club ---------- */

/* Les quatre tableaux, un par année, doivent présenter la même grille. Sans
   largeurs imposées, chacun calcule les siennes d'après son propre contenu : la
   colonne « Discipline » de 2023, qui ne compte qu'une ligne, ne tombait pas au
   même endroit que celle de 2026. table-layout:fixed fige la répartition, la
   première ligne suffisant alors à la déterminer. */
.eeb-competitions table {
	table-layout: fixed;
}

.eeb-competitions th:nth-child(1),
.eeb-competitions td:nth-child(1) { width: 50%; }

.eeb-competitions th:nth-child(2),
.eeb-competitions td:nth-child(2) { width: 22%; }

.eeb-competitions th:nth-child(3),
.eeb-competitions td:nth-child(3) { width: 28%; }

/* Le thème empêche les retours à la ligne dans la première colonne de ses
   tableaux. Utile pour des horaires courts ; ici, avec une largeur imposée, un
   nom long comme « Championnat de France Karaté MIX » déborderait de sa case. */
.eeb-competitions td:first-child {
	white-space: normal;
}

/* La mention d'attente est volontairement discrète : répétée sur chaque ligne,
   à la couleur du texte, elle prendrait le pas sur le nom des compétitions —
   qui est l'information de la page. */
.eeb-competitions__attente {
	color: var(--eeb-gris, #6b6b6b);
	font-size: .92rem;
	font-style: italic;
}

.eeb-presentation .eeb-competitions + h3,
.eeb-presentation h3 + .eeb-competitions {
	margin-top: .8rem;
}

/* ---------- Couleur de ceinture propre à chaque fiche ---------- */

/* Une seule variable porte la couleur, ce qui évite de répéter la liste des
   ceintures à chaque élément qui doit s'y accorder.

   Les ceintures bicolores prennent leur seconde couleur, celle du grade visé :
   sur un filet de quelques pixels, la moitié blanche d'une blanche-jaune
   disparaîtrait dans le fond de la feuille et donnerait un trait à moitié
   effacé. Le partage des deux teintes reste porté par le dessin de la ceinture
   et par la bordure de la feuille, où la place ne manque pas. */

.eeb-feuille-a4--c-blanche       { --eeb-couleur-ceinture: #b8b8bd; }
.eeb-feuille-a4--c-blanche-jaune { --eeb-couleur-ceinture: #f4d13d; }
.eeb-feuille-a4--c-jaune         { --eeb-couleur-ceinture: #f4d13d; }
.eeb-feuille-a4--c-jaune-orange  { --eeb-couleur-ceinture: #ef8b28; }
.eeb-feuille-a4--c-orange        { --eeb-couleur-ceinture: #ef8b28; }
.eeb-feuille-a4--c-orange-verte  { --eeb-couleur-ceinture: #3f9e50; }
.eeb-feuille-a4--c-verte         { --eeb-couleur-ceinture: #3f9e50; }
.eeb-feuille-a4--c-verte-bleue   { --eeb-couleur-ceinture: #2f6fb5; }
.eeb-feuille-a4--c-bleue         { --eeb-couleur-ceinture: #2f6fb5; }
.eeb-feuille-a4--c-bleue-marron  { --eeb-couleur-ceinture: #7b4a25; }
.eeb-feuille-a4--c-marron        { --eeb-couleur-ceinture: #7b4a25; }

/* ---------- Pied de page : deux colonnes centrées ---------- */

/* À trois colonnes, la largeur pleine était justifiée. À deux, elle laissait un
   grand vide à droite : les colonnes sont donc ramenées au centre et bornées,
   pour qu'elles restent proches l'une de l'autre plutôt que repoussées aux
   extrémités. */
.eeb-footer__colonnes {
	max-width: 46rem;
	margin-inline: auto;
	justify-content: center;
	text-align: center;
}

/* Sur téléphone, WordPress empile déjà les colonnes ; il ne reste qu'à resserrer
   l'écart, un espacement pensé pour une séparation latérale étant trop grand une
   fois les blocs l'un sous l'autre. */
@media (max-width: 781px) {
	.eeb-footer__colonnes {
		gap: 2rem;
	}
}

/* ---------- Tarifs d'adhésion ---------- */

/* Les groupes de formules se placent côte à côte. auto-fit plutôt que deux
   colonnes fixes : sur les pages de cours, un seul groupe est affiché et occupe
   alors toute la largeur au lieu de laisser une colonne vide. Le minimum de
   18 rem fait repasser les blocs l'un sous l'autre dès que la place manque, sans
   qu'un point de rupture soit nécessaire. */
.eeb-tarifs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem 2.5rem;
	align-items: start;
	max-width: 46rem;
	margin-bottom: 1.5rem;
}

/* Nom du groupe de formules, quand plusieurs sont affichés à la suite. */
.eeb-tarifs__groupe {
	margin: 1.4rem 0 .5rem;
	font-family: var(--wp--preset--font-family--titre, inherit);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .92rem;
}

.eeb-tarifs__bloc .eeb-tarifs__groupe {
	margin-top: 0;
}

/* Ces tableaux n'ont pas d'en-tête : la barre noire du thème n'aurait rien à
   porter, et un montant se lit mieux sans elle. */
.eeb-tarifs__table {
	margin: 0;
}

.eeb-tarifs__table td:first-child {
	white-space: normal;
}

/* Les montants sont alignés à droite et de chasse fixe : l'œil compare alors les
   prix colonne par colonne, ce qu'un alignement à gauche empêche. */
.eeb-tarifs__montant {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	font-variant-numeric: tabular-nums lining-nums;
	width: 42%;
}

.eeb-tarif-note {
	max-width: 34rem;
}

/* ---------- Entrée de menu qui n'est qu'un ouvreur ---------- */

/* « Le club » ne mène plus à une page : il n'ouvre que son sous-menu, dont la
   première entrée — Infos générales — porte désormais la page. WordPress rend
   alors une balise de lien SANS adresse. Elle n'est donc pas cliquable, mais
   elle en garde l'apparence : la main du curseur promettrait un clic sans effet.
   La couleur au survol est conservée, elle, car le sous-menu s'ouvre bien à ce
   moment-là — c'est un retour utile, pas une fausse promesse. */
.eeb-header__menu a:not([href]) {
	cursor: default;
}

/* ---------- Compétitions : affichage sur téléphone ---------- */

/* Sur un écran étroit, ce tableau à trois colonnes ne tient pas. Les largeurs
   imposées — indispensables pour aligner les quatre tableaux entre eux sur grand
   écran — réduisaient la colonne « Compétition » à 154 px pour un contenu de
   239 px : le nom débordait par-dessus la colonne voisine, et l'en-tête
   « Discipline » par-dessus « Résultats ».

   Chaque ligne devient donc un bloc : le nom de la compétition, puis sa
   discipline et son état en dessous. Rien n'est tronqué, rien ne se chevauche,
   et il n'y a pas de défilement latéral à faire pour lire une ligne.

   Le seuil est celui du thème pour les tableaux (781 px), afin que ce basculement
   coïncide avec les autres changements de mise en page. */
@media (max-width: 781px) {

	.eeb-competitions table {
		table-layout: auto;
	}

	/* L'en-tête ne sert plus : les trois valeurs se lisent d'elles-mêmes une fois
	   empilées, et le répéter à chaque bloc alourdirait la lecture. */
	.eeb-competitions thead {
		display: none;
	}

	.eeb-competitions tbody,
	.eeb-competitions tr,
	.eeb-competitions td {
		display: block;
		width: auto;
	}

	/* Les largeurs de colonnes du grand écran visent td:nth-child(n) : elles pèsent
	   donc plus lourd que la règle ci-dessus et continueraient de s'appliquer,
	   maintenant chaque bloc à 50 %, 22 % ou 28 % de la largeur. Il faut les
	   annuler avec la même précision. */
	.eeb-competitions td:nth-child(1),
	.eeb-competitions td:nth-child(2),
	.eeb-competitions td:nth-child(3) {
		width: auto;
	}

	.eeb-competitions tr {
		padding: .7rem 0;
		border-bottom: 1px solid var(--eeb-bordure-tableau, #d4d4d8);
	}

	.eeb-competitions tr:last-child {
		border-bottom: none;
	}

	.eeb-competitions td {
		padding: 0;
		border: none;
	}

	/* Discipline et état tiennent sur une seule ligne sous le nom, séparés par un
	   point médian ajouté en CSS — le contenu du tableau n'a pas à changer. */
	.eeb-competitions td:nth-child(2),
	.eeb-competitions td:nth-child(3) {
		display: inline;
		color: var(--eeb-gris, #6b6b6b);
		font-size: .92rem;
	}

	.eeb-competitions td:nth-child(3)::before {
		content: " · ";
	}

	.eeb-competitions td:first-child {
		margin-bottom: .15rem;
	}
}