/**
 * Sub Alcatel — composants.
 *
 * Cette feuille ne contient QUE ce que theme.json ne sait pas exprimer :
 * états au survol, composants applicatifs, barre collante, accessibilité.
 * Toute couleur, taille ou espacement vient des variables générées par
 * theme.json — aucune valeur en dur, sauf opacités et ombres.
 */

/* ------------------------------------------------------------------
   1. Raccourcis vers les tokens theme.json
   ------------------------------------------------------------------ */
:root {
	--sub-abysse: var(--wp--preset--color--abysse);
	--sub-profond: var(--wp--preset--color--profond);
	--sub-lien: var(--wp--preset--color--lien);
	--sub-lagon: var(--wp--preset--color--lagon);
	--sub-poulpe: var(--wp--preset--color--poulpe);
	--sub-ecume: var(--wp--preset--color--ecume);
	--sub-blanc: var(--wp--preset--color--blanc);
	--sub-ardoise: var(--wp--preset--color--ardoise);
	--sub-brume: var(--wp--preset--color--brume);
	--sub-corail: var(--wp--preset--color--corail);
	--sub-corail-fonce: var(--wp--preset--color--corail-fonce);
	--sub-sable: var(--wp--preset--color--sable);
	--sub-algue: var(--wp--preset--color--algue);
	--sub-alerte: var(--wp--preset--color--alerte);

	/* Assez foncé pour que le contour d'un champ atteigne 3:1 sur blanc
	   (WCAG 1.4.11) — la brume de la charte plafonne à 1,52. */
	--sub-brume-fonce: var(--wp--custom--bordure--champ);

	--sub-r-champ: 4px;
	--sub-r-carte: 12px;
	--sub-r-pastille: 999px;
	--sub-ombre-1: 0 1px 2px rgba(20, 47, 82, 0.08), 0 0 0 1px rgba(20, 47, 82, 0.05);
	--sub-ombre-2: 0 8px 24px rgba(20, 47, 82, 0.12);
}

/* ------------------------------------------------------------------
   2. Accessibilité — non négociable
   ------------------------------------------------------------------ */

/* Focus clavier toujours visible. Ne jamais remplacer par outline: none. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sub-lagon);
	outline-offset: 2px;
	border-radius: var(--sub-r-champ);
}

/* Sur fond sombre, le lagon ne ressort pas assez : on passe au sable. */
.sub-header :where(a, button):focus-visible,
.sub-footer :where(a, button):focus-visible {
	outline-color: var(--sub-sable);
}

.sub-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--sub-sable);
	color: var(--sub-abysse);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--sub-r-carte) 0;
}

.sub-skip-link:focus {
	left: 0;
	top: 0;
}

/* Toute cible tactile atteint 44 px. */
.wp-block-button__link,
.sub-btn,
.sub-onglets a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 150ms !important;
		scroll-behavior: auto !important;
	}
}

/* Largeur de lecture : au-delà, l'œil perd la ligne. */
.sub-lecture :where(p, ul, ol) {
	max-width: 72ch;
}

/* ------------------------------------------------------------------
   3. En-tête public
   ------------------------------------------------------------------ */
.sub-header {
	position: relative;
	z-index: 20;
}

.sub-header .wp-block-site-title a {
	text-decoration: none;
}

.sub-header .wp-block-navigation a {
	color: #cfddec;
	text-decoration: none;
	padding: 9px 13px;
	border-radius: var(--sub-r-champ);
}

.sub-header .wp-block-navigation a:hover {
	background: rgba(255, 255, 255, 0.09);
	color: var(--sub-blanc);
}

.sub-header .wp-block-navigation .current-menu-item > a,
.sub-header .wp-block-navigation .current_page_ancestor > a {
	color: var(--sub-blanc);
	box-shadow: inset 0 -2px 0 var(--sub-lagon);
}

.sub-baseline {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* Le bleu des bulles du logo, et non le lagon de la palette : sur l'abysse
	   celui-ci tombe à 3,73:1, et ces 10,5 px en capitales ne bénéficient
	   d'aucune tolérance « grand texte ». Ici on est à 6,21:1.
	   Même raison que le #cfddec des liens de navigation : une teinte claire
	   qui n'existe que sur fond sombre n'a pas sa place dans la palette de
	   l'éditeur, où elle serait posée sur du blanc. */
	color: #64bbdc;
	line-height: 1.3;
}

/* Sous 600 px, l'en-tête porte déjà le logo, le titre, le bouton de menu et
   les boutons de compte : la baseline ferait passer le tout sur trois lignes.
   Elle est décorative, le titre du site porte l'information. */
@media (max-width: 599px) {
	.sub-baseline {
		display: none;
	}

	/* Le bouton de menu se range à droite, contre « Connexion » : avec trois
	   enfants et `space-between`, il flottait seul au milieu de l'en-tête.
	   Sur l'élément <nav> seulement : core repose la classe sur la liste elle-même,
	   et la marge automatique y empêchait les lignes de la superposition de
	   s'étendre sur toute la largeur. */
	.sub-header nav.wp-block-navigation {
		margin-left: auto;
	}

	.sub-compte {
		gap: 8px;
	}
}

/* Jusqu'à 1247 px, l'en-tête ne tient pas ses deux boutons : sous 600 px la
   navigation est repliée derrière son bouton de menu et ils passaient à la
   ligne ; au-dessus elle est déployée et l'en-tête montait à trois lignes.
   Le seuil suit la mise en page : l'en-tête s'aligne sur la largeur « large »
   du thème, 1200 px, plus ses marges — soit 1248 px de fenêtre avant que les
   sept entrées, le logo et les deux boutons tiennent sur une ligne. On n'en
   garde donc qu'un en dessous.

   C'est « Connexion » qui reste : « Nous rejoindre » figure dans la navigation
   et ouvre le bandeau d'accueil, alors que l'espace membre n'a pas d'autre
   porte — « Mon espace » ne s'affiche qu'une fois connecté. */
@media (max-width: 1247px) {
	.sub-compte .sub-btn--principal {
		display: none;
	}
}

/* Entre 600 et 1247 px, la navigation est déployée — le bloc Navigation ne se
   replie derrière son bouton de menu qu'en dessous de 600 px — mais elle ne
   tient pas sur la même ligne que le logo et le bouton de compte. Livrée à
   `flex-wrap`, elle poussait le bouton sur une troisième ligne.

   On lui donne donc franchement sa propre ligne, sous une première qui garde le
   logo à gauche et le compte à droite. Deux lignes assumées valent mieux que
   trois subies. */
@media (min-width: 600px) and (max-width: 1247px) {
	.sub-header .wp-block-navigation {
		order: 1;
		flex-basis: 100%;
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------------
   3 bis. Menu mobile — superposition plein écran
   ------------------------------------------------------------------

   Le bloc core réutilise la justification du menu de bureau pour aligner la
   superposition (`--navigation-layout-justification-setting`). Comme la barre
   est justifiée à droite, les 20 entrées s'affichaient en drapeau à droite,
   chacune commençant à une abscisse différente, avec les libellés de section
   plus petits que leurs propres sous-entrées et une cible tactile limitée à la
   largeur du texte. On repasse donc à une liste alignée à gauche, en lignes
   pleine largeur, avec une hiérarchie visible et des cibles de 44 px.

   Tous les sélecteurs sont volontairement longs : les règles de core portent
   quatre classes, il en faut au moins autant pour les reprendre sans !important.
   Ils ne s'appliquent qu'à `.is-menu-open`, donc jamais au menu de bureau. */

/* Cibles tactiles de l'ouverture et de la fermeture : core ne dessine qu'une
   icône de 24 px sans rembourrage. 24 + 2 × 10 = 44 px.
   Par rembourrage et non par `width`/`height` + `display: flex` : core se sert
   de `display` pour masquer le bouton d'ouverture au-delà de 600 px, à
   spécificité égale — le redéclarer le faisait réapparaître sur ordinateur. */
.sub-header .wp-block-navigation__responsive-container-open,
.sub-header .wp-block-navigation__responsive-container-close {
	padding: 10px;
	border-radius: var(--sub-r-pastille);
}

.sub-header .wp-block-navigation__responsive-container-open:hover,
.sub-header .wp-block-navigation__responsive-container-close:hover {
	background: rgba(255, 255, 255, 0.09);
}

/* Le rembourrage ajouté ne doit pas décaler l'icône vers l'intérieur de
   l'en-tête : on reprend les 10 px de chaque côté. */
.sub-header .wp-block-navigation__responsive-container-open {
	margin: -10px;
}

.sub-header .wp-block-navigation__responsive-container.is-menu-open,
/* La liste porte `items-justified-right`, qui redéclare la variable pour elle et
   ses descendants : la poser sur le conteneur seul ne suffit pas. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	/* La cause de l'alignement en drapeau. `stretch` fait porter chaque ligne
	   sur toute la largeur : le texte part de la même marge, et la ligne
	   entière devient cliquable. */
	--navigation-layout-justification-setting: stretch;
}

/* La superposition devient un panneau en deux parties : une barre haute qui
   porte la croix, et la liste qui défile seule dessous. Sans cela la croix
   défile avec la liste — 1 000 px de menu pour 812 d'écran — et il faut remonter
   jusqu'en haut pour fermer. On ne peut pas la fixer : core anime le conteneur
   avec un `translateY` et `animation-fill-mode: forwards`, la transformation
   reste donc en place, et un conteneur transformé devient le bloc conteneur de
   ses descendants `fixed`, qui défilent alors avec lui. La répartition en
   colonnes ne dépend, elle, d'aucun de ces effets de bord. Core pose déjà
   `display: flex; flex-direction: column` sur le conteneur : il reste à
   propager la hauteur jusqu'à la liste. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open {
	overflow: hidden;
	padding: 0;
}

.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Sans cela, un élément flexible refuse de descendre sous la hauteur de son
	   contenu : le panneau déborderait au lieu de faire défiler la liste. */
	min-height: 0;
}

.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: static;
	align-self: flex-end;
	flex: none;
	margin: 10px 12px;
}

.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	min-height: 0;
	width: 100%;
	overflow-y: auto;
	/* Le défilement du menu ne doit pas entraîner celui de la page dessous. */
	overscroll-behavior: contain;
	padding: 0 0 32px;
}

/* Les séparateurs remplacent le blockGap de 4 px hérité de la barre. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0;
}

/* Ligne de menu : toute la largeur, 48 px de haut, texte à gauche.
   Core impose `padding: 0` dans la superposition, d'où la longueur du
   sélecteur. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 20px;
	border-radius: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--sub-blanc);
}

.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:active {
	background: rgba(255, 255, 255, 0.14);
}

/* Une entrée de premier niveau ouvre une section : trait de séparation au-dessus
   de chacune, sauf la première. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Le libellé de section reste visible pendant le défilement de ses sous-entrées :
   dans une liste de 20 lignes, c'est ce qui dit où l'on se trouve. Le fond opaque
   est indispensable, la ligne passe au-dessus du contenu qui défile. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--sub-abysse);
}

/* Sous-entrées : décalées et tenues par un filet vertical, plus légères que leur
   parent. Core leur met 2 rem de rembourrage à gauche ET à droite, ce qui, en
   drapeau à droite, décalait dans le mauvais sens. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	min-width: 0;
	margin: 0 0 8px 20px;
	padding: 0;
	border: 0;
	border-left: 2px solid rgba(255, 255, 255, 0.16);
}

.sub-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 44px;
	padding: 8px 20px 8px 18px;
	font-size: 15px;
	font-weight: 400;
	/* Core impose `color: inherit !important` aux entrées de la superposition :
	   le gris clair des liens d'en-tête n'arrive pas jusqu'ici, il faut le
	   reposer. C'est lui qui distingue une sous-entrée de son parent en blanc. */
	color: #cfddec;
}

/* Page courante : un filet à gauche se lit dans une liste, contrairement au
   soulignement de la barre de bureau. */
.sub-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.sub-header .wp-block-navigation__responsive-container.is-menu-open .current_page_ancestor > .wp-block-navigation-item__content {
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 3px 0 0 var(--sub-lagon);
	color: var(--sub-blanc);
}

/* ------------------------------------------------------------------
   4. Bouton de compte (bloc subalcatel/compte)
   ------------------------------------------------------------------ */
.sub-compte {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sub-compte__lien {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--sub-blanc);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.sub-compte__lien:hover .sub-compte__nom {
	text-decoration: underline;
}

.sub-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--sub-r-pastille);
	background: var(--sub-lagon);
	color: var(--sub-blanc);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

/* Boutons hors bloc « Bouton » de l'éditeur. */
.sub-btn {
	gap: 8px;
	padding: 11px 18px;
	border-radius: var(--sub-r-carte);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
}

.sub-btn--principal {
	background: var(--sub-corail-fonce);
	color: var(--sub-blanc);
}

.sub-btn--principal:hover {
	background: #9e4614;
	color: var(--sub-blanc);
}

.sub-btn--fantome {
	background: transparent;
	color: var(--sub-blanc);
	border-color: rgba(255, 255, 255, 0.4);
}

.sub-btn--fantome:hover {
	border-color: var(--sub-blanc);
	color: var(--sub-blanc);
}

.sub-btn--sm {
	padding: 8px 14px;
	font-size: 14px;
	min-height: 44px;
}

/* ------------------------------------------------------------------
   6. Cartes et grilles
   ------------------------------------------------------------------ */
.is-style-sub-carte {
	background: var(--sub-blanc);
	border-radius: var(--sub-r-carte);
	box-shadow: var(--sub-ombre-1);
	overflow: hidden;
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.is-style-sub-carte:hover {
	box-shadow: var(--sub-ombre-2);
}

.is-style-sub-carte > :where(:not(.wp-block-post-featured-image):not(.wp-block-image)) {
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

.is-style-sub-carte > :last-child {
	padding-bottom: var(--wp--preset--spacing--30);
}

.is-style-sub-carte .wp-block-post-featured-image img,
.is-style-sub-carte > .wp-block-image img {
	border-radius: 0;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Repli de vignette — voir subalcatel_featured_image_fallback().
   Il occupe la place d'une photo absente pour que la grille garde sa ligne de
   lecture. Rien à lire ici : le bloc est décoratif, et masqué aux lecteurs
   d'écran côté serveur. */
.sub-vignette--repli {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: var(--sub-profond);
}

/* Une hauteur posée par le bloc l'emporte sur le 3/2 : le repli fait alors
   exactement la taille des vignettes voisines. */
.sub-vignette--repli[style*="height"] {
	aspect-ratio: auto;
}

.sub-vignette--repli > a {
	display: block;
	height: 100%;
}

/* Trois houles en bas de cadre, et l'assombrissement qui les tient ensemble
   quelle que soit la teinte du fond. */
.sub-vignette--repli::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.5' opacity='.22'%3E%3Cpath d='M-10 148q40-20 80 0t80 0 80 0 80 0'/%3E%3Cpath d='M-10 170q40-20 80 0t80 0 80 0 80 0'/%3E%3Cpath d='M-10 192q40-20 80 0t80 0 80 0 80 0'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(155deg, rgba(20, 47, 82, 0) 30%, rgba(20, 47, 82, 0.6));
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Le logo du club en filigrane, reteinté en blanc plutôt qu'affiché tel quel :
   le poulpe est un dessin en couleurs, et un dessin en couleurs posé à 24 %
   sur un aplat bleu donne une tache, pas une signature.
   `logo-empreinte.png` ne sert que de masque : seule sa couche alpha compte,
   et elle porte l'encrage du dessin — le fond clair y est transparent, le trait
   opaque. C'est ce qui donne une gravure blanche plutôt qu'une silhouette. */
.sub-vignette--repli::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--sub-blanc);
	-webkit-mask: url(../img/logo-empreinte.png) no-repeat center / 96px auto;
	mask: url(../img/logo-empreinte.png) no-repeat center / 96px auto;
	opacity: 0.24;
}

/* Quatre teintes, une par rubrique. Toutes sombres : le repli ne doit pas
   attirer l'œil davantage qu'une vraie photo. */
.sub-vignette--t1 {
	background-color: var(--sub-abysse);
}

.sub-vignette--t2 {
	background-color: var(--sub-lagon);
}

.sub-vignette--t3 {
	background-color: var(--sub-poulpe);
}

.is-style-sub-panneau {
	background: var(--sub-blanc);
	border-radius: var(--sub-r-carte);
	box-shadow: var(--sub-ombre-1);
	padding: var(--wp--preset--spacing--30);
}

/* Grille de cartes : les colonnes de WordPress passent en une seule
   colonne sous 782px, ce qui est brutal pour 3 ou 4 cartes. */
@media (min-width: 600px) and (max-width: 981px) {
	.is-style-sub-cartes.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.is-style-sub-cartes.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 24px) / 2) !important;
	}
}

/* ------------------------------------------------------------------
   7. Encarts d'alerte
   ------------------------------------------------------------------ */
:where(.is-style-sub-alerte-info, .is-style-sub-alerte-attention, .is-style-sub-alerte-succes) {
	border-left: 4px solid;
	border-radius: var(--sub-r-carte);
	padding: 17px 20px;
}

:where(.is-style-sub-alerte-info, .is-style-sub-alerte-attention, .is-style-sub-alerte-succes) :where(p, h2, h3, h4) {
	max-width: none;
}

.is-style-sub-alerte-info {
	background: #e4eff8;
	border-color: var(--sub-lagon);
	color: #153f63;
}

.is-style-sub-alerte-attention {
	background: #fdf4e0;
	border-color: var(--sub-sable);
	color: #4a3a10;
}

.is-style-sub-alerte-succes {
	background: #e4f2ec;
	border-color: var(--sub-algue);
	color: #0d4433;
}

/* ------------------------------------------------------------------
   8. Badges d'état
   Un état n'est jamais signalé par la couleur seule : le libellé porte
   toujours l'information (WCAG 1.4.1).
   ------------------------------------------------------------------ */
.sub-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1;
	padding: 6px 11px;
	border-radius: var(--sub-r-pastille);
	white-space: nowrap;
}

.sub-badge--neutre {
	background: var(--sub-ecume);
	color: var(--sub-ardoise);
}

.sub-badge--info {
	background: #d7e6f4;
	color: var(--sub-profond);
}

.sub-badge--attente {
	background: var(--sub-sable);
	color: var(--sub-abysse);
}

.sub-badge--valide {
	background: var(--sub-algue);
	color: var(--sub-blanc);
}

/* Le rouge, et non l'orange du logo : depuis que celui-ci porte l'action
   principale, un refus peint en corail foncé ne se distinguait plus d'un
   bouton « s'inscrire ». */
.sub-badge--refus {
	background: var(--sub-alerte);
	color: var(--sub-blanc);
}

/* ------------------------------------------------------------------
   9. Styles de texte
   ------------------------------------------------------------------ */
.is-style-sub-chapeau {
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.55;
	color: var(--sub-ardoise);
}

.is-style-sub-surtitre {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	/* Sur fond clair, le lagon tombe à 3,72:1 — sous le seuil, et ce texte de
	   12,5 px ne bénéficie pas de la tolérance « grand texte ». */
	color: var(--sub-lien);
}

.has-abysse-background-color .is-style-sub-surtitre,
.sub-hero .is-style-sub-surtitre {
	color: var(--sub-sable);
}

.is-style-sub-liste-cochee {
	list-style: none;
	padding-left: 0;
}

.is-style-sub-liste-cochee li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 9px;
}

.is-style-sub-liste-cochee li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--sub-algue);
	font-weight: 700;
}

.is-style-sub-image-nette img {
	border-radius: 0;
}

/* ------------------------------------------------------------------
   10. Hero
   ------------------------------------------------------------------ */
.sub-hero {
	position: relative;
	overflow: hidden;
}

/* Rayons de lumière, visibles même sans photo de fond. */
.sub-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.14;
	background: repeating-linear-gradient(
		101deg,
		transparent 0 44px,
		rgba(255, 255, 255, 0.6) 44px 47px,
		transparent 47px 130px
	);
}

.sub-hero > * {
	position: relative;
	z-index: 1;
}

.sub-hero :where(h1, h2) {
	color: var(--sub-blanc);
}

/* ------------------------------------------------------------------
   11. Fil d'Ariane
   ------------------------------------------------------------------ */
.sub-fil-ariane {
	font-size: 13.5px;
	color: var(--sub-ardoise);
}

.sub-fil-ariane a {
	color: var(--sub-lien);
	text-decoration: none;
}

.sub-fil-ariane a:hover {
	text-decoration: underline;
}

.sub-fil-ariane [aria-current="page"] {
	font-weight: 600;
	color: var(--sub-abysse);
}

/* ------------------------------------------------------------------
   12. Pied de page
   ------------------------------------------------------------------ */
.sub-footer {
	color: #b0c4da;
	font-size: 14.5px;
}

.sub-footer :where(h2, h3, h4) {
	color: var(--sub-blanc);
}

.sub-footer a {
	color: #b0c4da;
	text-decoration: none;
}

.sub-footer a:hover {
	color: var(--sub-blanc);
	text-decoration: underline;
}

.sub-footer .wp-block-navigation a {
	padding: 4px 0;
}

.sub-footer-bas {
	border-top: 1px solid rgba(255, 255, 255, 0.11);
	font-size: 13px;
}

/* ------------------------------------------------------------------
   13. Écrans applicatifs (espace membre)
   ------------------------------------------------------------------ */
.sub-app {
	background: var(--sub-ecume);
	min-height: 60vh;
}

.sub-tuile {
	background: var(--sub-blanc);
	border-radius: var(--sub-r-carte);
	box-shadow: var(--sub-ombre-1);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sub-tuile__libelle {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sub-ardoise);
}

.sub-tuile__valeur {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 31px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sub-profond);
}

.sub-tuile__valeur--alerte {
	color: var(--sub-alerte);
}

.sub-tuile__detail {
	font-size: 13.5px;
	color: var(--sub-ardoise);
}

/* ------------------------------------------------------------------
   14. Tableaux
   ------------------------------------------------------------------ */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--sub-ardoise);
	font-weight: 700;
	border-bottom: 2px solid var(--sub-brume);
	padding: 10px 12px;
}

.wp-block-table td {
	padding: 13px 12px;
	border-bottom: 1px solid var(--sub-ecume);
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

/* Les montants s'alignent sur la virgule : chiffres tabulaires. */
.wp-block-table td:last-child,
.sub-nombre {
	font-variant-numeric: tabular-nums;
}

/* Sur mobile, un tableau défile dans son propre conteneur —
   jamais la page entière. */
.wp-block-table {
	overflow-x: auto;
}

/* ------------------------------------------------------------------
   15. Formulaires
   ------------------------------------------------------------------ */
:where(input[type="text"], input[type="email"], input[type="url"], input[type="password"],
	input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
	select, textarea) {
	width: 100%;
	padding: 12px 14px;
	min-height: 46px;
	border: 1.5px solid var(--sub-brume-fonce);
	border-radius: var(--sub-r-champ);
	background: var(--sub-blanc);
	color: var(--sub-abysse);
	font-family: inherit;
	/* 16 px, et pas un pixel de moins : sous ce seuil, Safari iOS zoome la page
	   à la prise de focus et ne dézoome jamais. */
	font-size: 16px;
}

:where(input, select, textarea):focus {
	border-color: var(--sub-lagon);
}

label {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 6px;
}

/* ------------------------------------------------------------------
   16. Blog
   ------------------------------------------------------------------ */
.sub-article-meta {
	font-size: 13.5px;
	color: var(--sub-ardoise);
}

.wp-block-post-featured-image img {
	border-radius: var(--sub-r-carte);
}

/* Marque visuelle des contenus réservés aux membres. */
.sub-prive .wp-block-post-title::before {
	content: "🔒";
	margin-right: 8px;
	font-size: 0.8em;
}

/* ------------------------------------------------------------------
   17. Impression — le bureau imprime les listes d'inscrits
   ------------------------------------------------------------------ */
@media print {
	.sub-header,
	.sub-footer,
	.sub-skip-link,
	.wp-block-query-pagination {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 12pt;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}

/* --- Repères de rédaction ---
   Posés par l'installateur de pages du plugin, à supprimer une fois la page
   écrite. Volontairement voyants : un repère discret reste six mois en ligne.

   Ne jamais réutiliser `.sub-todo` ailleurs : l'extension l'avait employée pour
   la liste « À faire » du tableau de bord, qui s'affichait donc en encart de
   brouillon, précédée de « À rédiger — », à chaque connexion d'un membre. Elle
   utilise maintenant `.sub-actions`. */

.sub-todo {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid #b26900;
	border-radius: 4px;
	background: #fff8ec;
	color: #6b4400;
	font-size: 0.95rem;
}

.sub-todo::before {
	content: "À rédiger — ";
	font-weight: 700;
	font-style: normal;
}

/* ---------------------------------------------------------------------------
   Images dans le corps des articles

   Les articles repris de Joomla portent des `<img>` bruts, pas des blocs
   Image : aucune règle de bloc ne s'y applique. Sans ce filet, une photo de
   2 900 px déborde de la colonne de lecture et pousse la page en défilement
   horizontal sur mobile.

   `height: auto` est indispensable : les balises portent une hauteur en dur,
   et la contraindre en largeur sans libérer la hauteur écrase l'image.
   --------------------------------------------------------------------------- */

.wp-block-post-content img,
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* Les photos pleine largeur méritent de respirer et de rester lisibles. */
.wp-block-post-content > img,
.wp-block-post-content p > img {
	display: block;
	margin-inline: auto;
	border-radius: var(--wp--custom--rayon--moyen, 8px);
}

/* Deux images côte à côte dans un même paragraphe : on les laisse s'aligner
   plutôt que de les empiler en colonne d'imagettes. */
.wp-block-post-content p:has(img + img) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 1rem);
	align-items: flex-start;
	justify-content: center;
}