/*
 * Habillage des pages du module.
 *
 * Volontairement scopé sous `.aida-app` pour ne jamais déborder sur le
 * reste du thème actif : ces pages sont de vraies pages WordPress
 * affichées dans le thème, pas un document autonome
 * (cf. includes/class-page-registry.php).
 *
 * Refonte du 6 septembre 2026, à la demande du client : rapprocher
 * l'apparence de celle d'un logiciel de gestion, sans rien perdre en
 * clarté. Trois principes ont guidé les choix :
 *
 *   1. Une seule couleur d'accent. Le reste est en gris neutre, ce qui
 *      fait ressortir les actions sans que l'écran devienne un sapin.
 *   2. Les surfaces portent l'information, pas les bordures. Fond blanc,
 *      trait de séparation très clair, ombre à peine perceptible.
 *   3. Un statut se lit d'un coup d'œil : pastille colorée, jamais du
 *      texte brut au milieu d'une ligne.
 */

/* ------------------------------------------------------------------ */
/* Jetons                                                              */
/* ------------------------------------------------------------------ */

.aida-app {
	--aida-primary: #0c4a6e;
	--aida-primary-hover: #0a3d5c;
	--aida-primary-soft: #e8f1f7;

	--aida-ink: #1a2733;
	--aida-ink-soft: #5b6b7a;
	--aida-ink-faint: #8595a3;

	--aida-surface: #ffffff;
	--aida-surface-alt: #f7f9fb;
	--aida-page: #eef2f6;

	--aida-line: #e3e9ef;
	--aida-line-strong: #cfd8e0;

	--aida-ok-bg: #e7f6ee;
	--aida-ok-ink: #14663d;
	--aida-wait-bg: #fdf3e2;
	--aida-wait-ink: #8a5a10;
	--aida-alert-bg: #fdecec;
	--aida-alert-ink: #97231f;
	--aida-neutral-bg: #eef1f4;
	--aida-neutral-ink: #55636f;

	--aida-radius: 10px;
	--aida-radius-sm: 6px;
	--aida-shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 8px rgba(16, 32, 48, .04);

	/* La largeur et le centrage sont définis plus bas, dans la règle qui
	 * récupère la marge imposée par le thème. Ne rien fixer ici, pour
	 * n'avoir qu'un seul endroit à lire quand on cherche pourquoi une
	 * page fait telle largeur. */
	color: var(--aida-ink);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/*
 * Retour client (5 sept. 2026) : les tableaux débordaient, bouton coupé.
 * Deux causes mesurées dans un vrai navigateur : le thème applique une
 * marge latérale à son conteneur, et WordPress impose
 * `margin-left/right: auto !important` aux enfants d'un bloc
 * `is-layout-constrained`, ce qui annule silencieusement toute
 * tentative de récupérer cette place. D'où le `!important`, qui n'est
 * pas du confort mais la seule façon de reprendre la main.
 *
 * La boîte est recentrée sur la FENÊTRE et non sur le conteneur du
 * thème. Vérifié à 375px, 1600px et 2560px.
 */
.aida-app {
	width: min(2200px, calc(100vw - 16px));
	max-width: none;
	margin-left: calc(50% - min(1100px, 50vw - 8px)) !important;
	margin-right: 0 !important;
	box-sizing: border-box;

	/* Retour client : "trop de blanc". Le module pose sa propre surface
	   teintée, sur laquelle les cartes blanches se détachent. Sans ça,
	   des cartes blanches sur une page blanche ne se voient pas. */
	background: var(--aida-page);
	border: 1px solid var(--aida-line);
	border-radius: 14px;
	padding: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Gabarit : menu à gauche, contenu à droite                           */
/* ------------------------------------------------------------------ */

.aida-app--shell {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.aida-sidebar {
	position: sticky;
	top: 1rem;
	align-self: start;
}

/* ------------------------------------------------------------------ */
/* Récupération du blanc réservé par le thème                          */
/*                                                                     */
/* Mesuré sur la page, et non supposé : le thème pose 70 px de marge    */
/* haute sur <main> et 70 px de padding sur le groupe qui l'enveloppe,  */
/* soit 140 px avant que l'application commence. Sur un logiciel de     */
/* gestion consulté toute la journée, c'est un écran de défilement pour */
/* rien.                                                                */
/*                                                                     */
/* `!important` est ici obligatoire, et non un raccourci : le thème pose */
/* ces valeurs en attribut `style` SUR L'ÉLÉMENT                         */
/* (`style="margin-top:var(--wp--preset--spacing--60)"`). Un style en    */
/* ligne bat n'importe quelle feuille, quelle que soit sa spécificité —  */
/* seul `!important` passe devant. Même situation que la largeur des     */
/* blocs `is-layout-constrained`, plus bas.                             */
/*                                                                     */
/* Deux garde-fous, parce que ces sélecteurs visent le thème :          */
/* 1. cette feuille n'est chargée QUE sur les pages du module           */
/*    (maybe_enqueue_assets), le reste du site ne la voit jamais ;      */
/* 2. `:has(.aida-app)` exige en plus que l'application soit réellement */
/*    sur la page. Un navigateur trop ancien pour `:has()` ignore la    */
/*    règle et garde l'espacement d'origine — dégradation, pas panne.   */
/* ------------------------------------------------------------------ */

/* La bande de titre du thème, au-dessus de l'application.
 *
 * Vérifié avant de la masquer : sur ces pages elle ne contient QUE le
 * lien du titre du site, aucun menu ni aucune navigation. Elle répétait
 * mot pour mot ce que dit la barre de service juste en dessous, sur 70 px
 * de haut. La marque de la barre est cliquable et ramène à l'accueil du
 * module : rien n'est perdu.
 *
 * Si un jour le thème place une vraie navigation dans cet en-tête, il
 * faudra retirer cette règle — d'où le commentaire plutôt qu'un simple
 * `display: none` muet. */
body:has(.aida-app) .wp-site-blocks > header.wp-block-template-part {
	display: none;
}

body:has(.aida-app) main.wp-block-group {
	margin-top: 1.5rem !important;
}

body:has(.aida-app) main .wp-block-group.alignfull {
	padding-top: 0 !important;
	padding-bottom: 2.5rem !important;
}

/* ------------------------------------------------------------------ */
/* Barre de service                                                    */
/*                                                                     */
/* Retour client du 7 sept. 2026, variante A. Elle remplace les ~250 px */
/* de blanc et le titre centré du thème : identité à gauche, contexte   */
/* à droite, sur les quatorze pages du module.                         */
/* ------------------------------------------------------------------ */

.aida-app .aida-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.25rem;
	flex-wrap: wrap;
	background: var(--aida-surface);
	border: 1px solid var(--aida-line);
	border-radius: var(--aida-radius);
	box-shadow: var(--aida-shadow);
	padding: .7rem 1.1rem;

	/* Pour les pages SANS barre latérale, qui ne sont pas en grille et
	   n'ont donc pas de gap pour espacer. */
	margin: 0 0 1.25rem;
}

/* En grille, la barre occupe les deux colonnes et c'est le `gap` du
   conteneur qui l'espace — sinon l'écart serait compté deux fois. */
.aida-app--shell .aida-topbar {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.aida-app a.aida-topbar-brand,
.aida-topbar-brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	border-radius: var(--aida-radius-sm);
}

.aida-app a.aida-topbar-brand:hover .aida-topbar-names b {
	color: var(--aida-primary);
}

.aida-topbar-logo {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	flex: none;
	display: block;
	object-fit: contain;
}

/* Le substitut, tant que le fichier du logo n'est pas déposé. */
.aida-topbar-logo--texte {
	display: grid;
	place-items: center;
	background: var(--aida-primary);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.aida-topbar-names b {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--aida-ink);
}

.aida-topbar-names small {
	display: block;
	font-size: .76rem;
	line-height: 1.25;
	color: var(--aida-ink-faint);
}

.aida-topbar-context {
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
	font-size: .85rem;
	color: var(--aida-ink-soft);
}

.aida-topbar-club {
	font-weight: 600;
	color: var(--aida-ink);
}

.aida-topbar-sep {
	width: 1px;
	height: 18px;
	background: var(--aida-line);
	flex: none;
}

/* Sur mobile, la barre passe en deux lignes ; les séparateurs verticaux
   n'ont alors plus de sens entre des éléments qui se replient. */
@media (max-width: 600px) {
	.aida-app .aida-topbar {
		align-items: flex-start;
	}

	.aida-topbar-sep {
		display: none;
	}
}

/* `minmax(0, 1fr)` plus haut et ce `min-width` ici : sans eux, un
   tableau large force la colonne de contenu à s'élargir et fait
   déborder toute la grille. */
.aida-main {
	min-width: 0;
}

.aida-main > .aida-panel:last-child {
	margin-bottom: 0;
}

.aida-app *,
.aida-app *::before,
.aida-app *::after {
	box-sizing: border-box;
}

/*
 * Les pages formulaire gardent une colonne de lecture limitée. La
 * contrainte porte sur le PANNEAU et non sur la page entière : sans ça
 * le menu, qui est son frère, se casse sur trois lignes.
 */
.aida-app--narrow .aida-panel,
.aida-app--narrow .aida-card {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------ */
/* Titres                                                              */
/* ------------------------------------------------------------------ */

.aida-app h1 {
	font-size: 1.45rem;
	line-height: 1.25;
	margin: 0 0 1.25rem;
	letter-spacing: -.01em;
	color: var(--aida-ink);
}

.aida-app h2 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 1.75rem 0 .75rem;
	color: var(--aida-ink);
}

.aida-app h2:first-child {
	margin-top: 0;
}

.aida-app h3 {
	font-size: .95rem;
	font-weight: 600;
	margin: 1.25rem 0 .5rem;
}

/* ------------------------------------------------------------------ */
/* Barre de navigation                                                 */
/* ------------------------------------------------------------------ */

.aida-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .15rem;
	background: var(--aida-surface);
	border: 1px solid var(--aida-line);
	border-radius: var(--aida-radius);
	box-shadow: var(--aida-shadow);
	padding: .5rem;
	margin: 0;
}

.aida-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .55rem .75rem;
	border-radius: var(--aida-radius-sm);
	color: var(--aida-ink-soft);
	text-decoration: none;
	font-weight: 500;
	font-size: .92rem;
	line-height: 1.3;
	border-left: 3px solid transparent;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.aida-nav a:hover,
.aida-nav a:focus {
	background: var(--aida-primary-soft);
	color: var(--aida-primary);
	border-left-color: var(--aida-primary);
	text-decoration: none;
}

.aida-nav-logout {
	margin: .5rem 0 0;
	padding: .5rem 0 0;
	border-top: 1px solid var(--aida-line);
}

/* Sélecteur qualifié par `.aida-app` : sans lui, la règle générique des
   boutons (plus spécifique) repeindrait la déconnexion en bouton
   principal, alors que ce n'est pas l'action attendue d'un écran. */
.aida-app .aida-nav-link-button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 1px solid transparent;
	color: var(--aida-ink-soft);
	padding: .5rem .75rem;
	margin: 0;
	border-radius: var(--aida-radius-sm);
	font: inherit;
	font-size: .92rem;
	font-weight: 500;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.aida-app .aida-nav-link-button:hover {
	background: var(--aida-alert-bg);
	border-color: #f3c6c4;
	color: var(--aida-alert-ink);
}

/* Pastille du nombre d'articles au panier. */
.aida-nav .aida-cart-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 .35rem;
	border-radius: 999px;
	background: #ea6a12;
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Surfaces                                                            */
/* ------------------------------------------------------------------ */

.aida-panel,
.aida-card {
	background: var(--aida-surface);
	border: 1px solid var(--aida-line);
	border-radius: var(--aida-radius);
	box-shadow: var(--aida-shadow);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.25rem;
	overflow-x: auto;
}

.aida-panel > :last-child,
.aida-card > :last-child {
	margin-bottom: 0;
}

/*
 * En-tête de section : bandeau teinté qui court d'un bord à l'autre du
 * panneau. Retour client "trop de blanc" : c'est ce bandeau qui donne
 * sa tête à une carte et évite la page uniformément blanche.
 */
/* La bande déborde volontairement du panneau, d'où les marges latérales
   négatives : elle vient coiffer la carte de bord à bord.
   La marge HAUTE, elle, dépend de sa position. En tête de panneau elle
   doit remonter sous le bord ; au milieu — depuis le bloc des tarifs
   ajouté le 8 sept. 2026 — cette même remontée la collait au contenu
   précédent. D'où deux valeurs, et non une. */
.aida-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 2.25rem -1.75rem 1.25rem;
	padding: 1rem 1.75rem;
	background: var(--aida-primary-soft);
	border-bottom: 1px solid var(--aida-line);
	border-radius: var(--aida-radius) var(--aida-radius) 0 0;
}

/* En tête de panneau : la bande épouse le bord supérieur de la carte. */
.aida-section-head:first-child {
	margin-top: -1.5rem;
}

.aida-section-head h2 {
	color: var(--aida-primary);
}

.aida-section-head h2 {
	margin: 0;
}

.aida-section-sub {
	color: var(--aida-ink-soft);
	font-size: .88rem;
}

/* ------------------------------------------------------------------ */
/* Tuiles chiffrées                                                    */
/* ------------------------------------------------------------------ */

.aida-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.aida-stat {
	display: block;
	background: var(--aida-surface-alt);
	border: 1px solid var(--aida-line);
	border-left: 3px solid var(--aida-primary);
	border-radius: var(--aida-radius);
	padding: 1.15rem 1.25rem;
	text-decoration: none;
	color: inherit;
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

a.aida-stat:hover,
a.aida-stat:focus {
	background: var(--aida-primary-soft);
	box-shadow: 0 2px 4px rgba(16, 32, 48, .08), 0 4px 16px rgba(12, 74, 110, .10);
	text-decoration: none;
	transform: translateY(-1px);
}

/*
 * Tons des tuiles. Ils reprennent exactement ceux des pastilles de
 * statut des listes : un administrateur qui passe du tableau de bord à
 * une liste retrouve le même code couleur, il n'a pas deux langages à
 * apprendre.
 *
 * `--zero` reste neutre : une tuile à zéro n'a rien à signaler, la
 * colorer pour rien userait le sens des couleurs.
 */
.aida-stat--attention,
.aida-stat--wait {
	border-left-color: #d99a24;
	background: var(--aida-wait-bg);
}

a.aida-stat--attention:hover,
a.aida-stat--wait:hover {
	background: #fbeed6;
}

.aida-stat--attention .aida-stat-value,
.aida-stat--wait .aida-stat-value {
	color: var(--aida-wait-ink);
}

.aida-stat--ok {
	border-left-color: #2f8f5b;
	background: var(--aida-ok-bg);
}

a.aida-stat--ok:hover {
	background: #dcf0e5;
}

.aida-stat--ok .aida-stat-value {
	color: var(--aida-ok-ink);
}

.aida-stat--renew {
	border-left-color: #c0504c;
	background: var(--aida-alert-bg);
}

a.aida-stat--renew:hover {
	background: #fbe0df;
}

.aida-stat--renew .aida-stat-value {
	color: var(--aida-alert-ink);
}

.aida-stat--zero {
	border-left-color: var(--aida-line-strong);
	background: var(--aida-surface-alt);
}

.aida-stat--zero .aida-stat-value {
	color: var(--aida-ink-faint);
}

.aida-stat-value {
	display: block;
	font-size: 2rem;
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--aida-primary);
}

.aida-stat-label {
	display: block;
	margin-top: .3rem;
	font-size: .88rem;
	color: var(--aida-ink-soft);
}

.aida-stat-hint {
	display: block;
	margin-top: .45rem;
	font-size: .8rem;
	color: var(--aida-ink-faint);
}

/* Tuile mise en avant quand le chiffre appelle une action. */
.aida-stat--attention .aida-stat-value {
	color: #b7791f;
}

/* ------------------------------------------------------------------ */
/* Pastilles de statut                                                 */
/* ------------------------------------------------------------------ */

.aida-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--aida-neutral-bg);
	color: var(--aida-neutral-ink);
}

.aida-badge::before {
	content: "";
	width: .45rem;
	height: .45rem;
	border-radius: 999px;
	background: currentColor;
	flex: none;
}

.aida-badge--ok {
	background: var(--aida-ok-bg);
	color: var(--aida-ok-ink);
}

.aida-badge--wait {
	background: var(--aida-wait-bg);
	color: var(--aida-wait-ink);
}

.aida-badge--renew {
	background: var(--aida-alert-bg);
	color: var(--aida-alert-ink);
}

/* Pas un statut de dossier : une indication de contexte (« vous êtes
   dans l'administration »). D'où le bleu du module, et non une des
   trois couleurs réservées aux statuts. */
.aida-badge--info {
	background: var(--aida-primary-soft);
	color: var(--aida-primary);
}

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

.aida-app label {
	display: block;
	margin: 1.1rem 0 .3rem;
	font-weight: 500;
	font-size: .9rem;
	color: var(--aida-ink-soft);
}

.aida-app input[type=text],
.aida-app input[type=email],
.aida-app input[type=password],
.aida-app input[type=date],
.aida-app input[type=tel],
.aida-app input[type=number],
.aida-app select,
.aida-app textarea {
	/* En bloc, et non en ligne : sinon le bouton de validation vient se
	   caler à droite du dernier champ, faute de place occupée. Retour
	   client sur l'écran de connexion, où « Se connecter » se retrouvait
	   à côté du mot de passe au lieu d'être sous le formulaire.
	   Les champs des tableaux ne sont pas concernés : leur formulaire est
	   un conteneur flex, où cette règle ne provoque aucun retour ligne. */
	display: block;
	width: 100%;
	max-width: 420px;
	padding: .55rem .7rem;
	border: 1px solid var(--aida-line-strong);
	border-radius: var(--aida-radius-sm);
	background: var(--aida-surface);
	font: inherit;
	font-size: .95rem;
	color: var(--aida-ink);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.aida-app input:focus,
.aida-app select:focus,
.aida-app textarea:focus {
	outline: none;
	border-color: var(--aida-primary);
	box-shadow: 0 0 0 3px rgba(12, 74, 110, .12);
}

.aida-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: .75rem 0;
}

.aida-checkbox-row input[type=checkbox] {
	margin-top: .2rem;
	flex: none;
}

.aida-checkbox-row label {
	margin: 0;
	font-weight: 400;
	color: var(--aida-ink);
}

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */

.aida-app button,
.aida-app .aida-button,
.aida-app input[type=submit] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin-top: 1.25rem;
	padding: .58rem 1.1rem;
	background: var(--aida-primary);
	color: #fff;
	border: 1px solid var(--aida-primary);
	border-radius: var(--aida-radius-sm);
	font: inherit;
	font-size: .92rem;
	font-weight: 550;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.aida-app button:hover,
.aida-app .aida-button:hover,
.aida-app input[type=submit]:hover {
	background: var(--aida-primary-hover);
	border-color: var(--aida-primary-hover);
	color: #fff;
	text-decoration: none;
}

.aida-app button:focus-visible,
.aida-app .aida-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(12, 74, 110, .25);
}

.aida-app .aida-button:visited,
.aida-app .aida-button:active {
	color: #fff;
}

/* Action secondaire : même gabarit, sans le poids visuel. */
.aida-app .aida-button--ghost,
.aida-app button.aida-button--ghost {
	background: var(--aida-surface);
	color: var(--aida-primary);
	border-color: var(--aida-line-strong);
}

.aida-app .aida-button--ghost:hover,
.aida-app button.aida-button--ghost:hover {
	background: var(--aida-primary-soft);
	border-color: var(--aida-primary);
	color: var(--aida-primary);
}

/* Boutons à l'intérieur d'un tableau : pas de marge haute parasite. */
.aida-app td button,
.aida-app td .aida-button {
	margin-top: 0;
	padding: .35rem .75rem;
	font-size: .85rem;
}

/*
 * Colonne d'actions : liste déroulante, bouton et lien tiennent sur une
 * ligne, alignés, sans que la liste s'étale sur toute la cellule. Le
 * `form` en ligne évite le retour à la ligne que produit un bloc.
 */
.aida-app td form {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	vertical-align: middle;
}

.aida-app td select {
	width: auto;
	max-width: 210px;
	margin: 0;
	padding: .35rem .5rem;
	font-size: .85rem;
}

.aida-app td label {
	margin: 0;
}

/* Un lien d'action coupé en deux ligne se lit mal. Le tableau défile
   déjà dans sa carte : le laisser s'élargir un peu ne fait pas déborder
   la page. */
.aida-app td a {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Tableaux                                                            */
/* ------------------------------------------------------------------ */

.aida-app table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 1rem 0 0;
	border: 1px solid var(--aida-line);
	border-radius: var(--aida-radius);
	overflow: hidden;
	font-size: .92rem;
}

.aida-app thead th,
.aida-app tr:first-child th {
	background: var(--aida-surface-alt);
	color: var(--aida-ink-soft);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	padding: .7rem .85rem;
	border-bottom: 1px solid var(--aida-line);
	white-space: nowrap;
}

.aida-app td {
	padding: .7rem .85rem;
	border-bottom: 1px solid var(--aida-line);
	vertical-align: middle;
}

.aida-app tbody tr:last-child td,
.aida-app tr:last-child td {
	border-bottom: none;
}

.aida-app tbody tr:hover td {
	background: var(--aida-surface-alt);
}

.aida-app td a {
	color: var(--aida-primary);
	text-decoration: none;
	font-weight: 500;
}

.aida-app td a:hover {
	text-decoration: underline;
}

/* Regroupement par club dans les listes d'administration. */
.aida-app .aida-club-group {
	margin: 1.75rem 0 0;
	padding-bottom: .4rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--aida-primary);
	border-bottom: 2px solid var(--aida-primary-soft);
}

.aida-app .aida-club-group:first-of-type {
	margin-top: .25rem;
}

/* Formulaire d'édition présenté en deux colonnes libellé/champ. */
.aida-app .form-table {
	border: none;
}

.aida-app .form-table th {
	background: none;
	text-transform: none;
	letter-spacing: 0;
	font-size: .9rem;
	font-weight: 500;
	color: var(--aida-ink-soft);
	padding: .5rem 1rem .5rem 0;
	border-bottom: none;
	white-space: normal;
	vertical-align: top;
	width: 220px;
}

.aida-app .form-table td {
	padding: .5rem 0;
	border-bottom: none;
	white-space: normal;
}

.aida-app .form-table label {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Onglets                                                             */
/* ------------------------------------------------------------------ */

.aida-app .nav-tab-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0 0 1.25rem;
	padding: 0 0 0;
	border-bottom: 1px solid var(--aida-line);
}

.aida-app .nav-tab {
	display: inline-block;
	padding: .6rem .95rem;
	margin-bottom: -1px;
	border: 1px solid transparent;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--aida-ink-soft);
	font-size: .92rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--aida-radius-sm) var(--aida-radius-sm) 0 0;
	transition: color .12s ease, border-color .12s ease, background .12s ease;
}

.aida-app .nav-tab:hover {
	background: var(--aida-surface-alt);
	color: var(--aida-primary);
	text-decoration: none;
}

.aida-app .nav-tab-active,
.aida-app .nav-tab-active:hover {
	color: var(--aida-primary);
	border-bottom-color: var(--aida-primary);
	background: none;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Recherche                                                           */
/* ------------------------------------------------------------------ */

.aida-app .aida-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.25rem;
}

/* Les champs sont en bloc par défaut, pour que les boutons passent
   dessous dans les formulaires de saisie. Ici c'est l'inverse qui est
   voulu : tout sur une ligne, à côté des onglets. */
.aida-app .aida-search input[type=search] {
	display: inline-block;
	width: auto;
	flex: 1 1 260px;
	max-width: 420px;
	margin: 0;
	padding: .5rem .7rem;
	border: 1px solid var(--aida-line-strong);
	border-radius: var(--aida-radius-sm);
	font: inherit;
	font-size: .93rem;
	background: var(--aida-surface);
}

.aida-app .aida-search input[type=search]:focus {
	outline: none;
	border-color: var(--aida-primary);
	box-shadow: 0 0 0 3px rgba(12, 74, 110, .12);
}

.aida-app .aida-search button {
	margin: 0;
	flex: none;
}

.aida-app .aida-search-clear {
	color: var(--aida-ink-soft);
	font-size: .9rem;
	text-decoration: none;
	white-space: nowrap;
}

.aida-app .aida-search-clear:hover {
	color: var(--aida-alert-ink);
	text-decoration: underline;
}

/*
 * Bouton de suppression définitive. Rouge, mais discret tant qu'on ne le
 * survole pas : il vit à côté d'un lien « Modifier » utilisé cent fois
 * par jour, il ne doit pas attirer le clic.
 */
.aida-app .aida-delete-form {
	display: inline-block;
	margin: 0;
}

.aida-app button.aida-button--danger {
	margin: 0;
	padding: .35rem .75rem;
	font-size: .85rem;
	background: var(--aida-surface);
	color: var(--aida-alert-ink);
	border: 1px solid #f0c3c1;
}

.aida-app button.aida-button--danger:hover {
	background: var(--aida-alert-ink);
	border-color: var(--aida-alert-ink);
	color: #fff;
}

.aida-app .aida-pagination {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.25rem 0 0;
	font-size: .92rem;
}

.aida-app .aida-pagination a {
	color: var(--aida-primary);
	text-decoration: none;
	font-weight: 500;
	padding: .35rem .75rem;
	border: 1px solid var(--aida-line-strong);
	border-radius: var(--aida-radius-sm);
}

.aida-app .aida-pagination a:hover {
	background: var(--aida-primary-soft);
	border-color: var(--aida-primary);
}

.aida-app .aida-pagination-page {
	color: var(--aida-ink-soft);
}

/* La barre d'actions groupées, au-dessus de la liste des licenciés à
   renouveler. Elle n'apparaît qu'une fois des cases cochées, d'où
   l'attribut `hidden` posé et retiré par le script du formulaire. */
.aida-app .aida-selection-bar {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	margin: 0 0 1rem;
	padding: .7rem 1rem;
	background: var(--aida-primary-soft);
	border: 1px solid var(--aida-line);
	border-radius: var(--aida-radius-sm);
}

.aida-app .aida-selection-bar button {
	margin-top: 0;
}

.aida-selection-count {
	font-weight: 600;
	font-size: .9rem;
	color: var(--aida-primary);
	margin-right: auto;
}

/* Un tableau large doit défiler dans son cadre, jamais pousser la page
   vers la droite. */
.aida-app .aida-table-scroll {
	overflow-x: auto;
}

/* Le rappel des tarifs, sur l'accueil de l'espace club et sur la page de
   connexion. Deux colonnes de montants qui doivent s'aligner : d'où les
   chiffres tabulaires. */
.aida-app .aida-tarifs td + td,
.aida-app .aida-tarifs th + th {
	width: 22%;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.aida-app .aida-tarifs td em {
	color: var(--aida-ink-faint);
	font-size: .88rem;
	font-style: normal;
}

/* Une explication à la place d'un contrôle : ni bouton, ni badge, elle
   doit s'effacer devant les lignes qui, elles, offrent une action. */
.aida-app .aida-muted {
	color: var(--aida-ink-faint);
	font-size: .9rem;
	font-style: italic;
}

.aida-app .aida-search-notice {
	margin: 0 0 .75rem;
	padding: .5rem .85rem;
	background: var(--aida-primary-soft);
	border-radius: var(--aida-radius-sm);
	font-size: .9rem;
	color: var(--aida-primary);
	font-weight: 500;
}

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

.aida-app .aida-flash,
.aida-app .aida-error,
.aida-app .notice {
	display: flex;
	gap: .6rem;
	padding: .8rem 1rem;
	border-radius: var(--aida-radius-sm);
	border: 1px solid transparent;
	margin: 0 0 1.25rem;
	font-size: .93rem;
}

.aida-app .aida-flash,
.aida-app .notice-success {
	background: var(--aida-ok-bg);
	border-color: #bfe5d0;
	color: var(--aida-ok-ink);
}

.aida-app .aida-error,
.aida-app .notice-error {
	background: var(--aida-alert-bg);
	border-color: #f3c6c4;
	color: var(--aida-alert-ink);
}

.aida-app .aida-links {
	margin-top: 1rem;
	font-size: .92rem;
}

/* `:not(.aida-button)` est indispensable : sans lui, cette règle est
   plus spécifique que celle des boutons et repeint le libellé d'un
   bouton en bleu sur fond bleu, donc invisible. */
.aida-app .aida-links a:not(.aida-button) {
	color: var(--aida-primary);
	text-decoration: none;
}

.aida-app .aida-links a:not(.aida-button):hover {
	text-decoration: underline;
}

.aida-app .aida-total {
	font-size: 1.15rem;
	font-weight: 650;
	color: var(--aida-ink);
	margin: 1rem 0 0;
}

/* Récapitulatif du panier, toujours visible en haut de l'écran. */
.aida-cart-summary {
	border-color: var(--aida-line-strong);
	background: linear-gradient(180deg, var(--aida-surface) 0%, var(--aida-surface-alt) 100%);
}

/* ------------------------------------------------------------------ */
/* Coordonnées bancaires                                               */
/* ------------------------------------------------------------------ */

.aida-bank-transfer {
	border-left: 3px solid var(--aida-primary);
}

.aida-bank-transfer h2 {
	margin-top: 0;
}

.aida-bank-notice {
	background: var(--aida-ok-bg);
	border: 1px solid #bfe5d0;
	color: var(--aida-ok-ink);
	border-radius: var(--aida-radius-sm);
	padding: .8rem 1rem;
	font-weight: 600;
}

.aida-bank-name {
	font-weight: 600;
	margin-bottom: .25rem;
}

.aida-bank-table {
	width: auto;
	min-width: min(28rem, 100%);
}

.aida-bank-table th {
	background: none;
	text-transform: none;
	letter-spacing: 0;
	font-size: .88rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Ces valeurs vont être recopiées à la main dans une banque en ligne :
   chasse fixe, espacées, et sélectionnables d'un double-clic sans
   emporter le libellé de la ligne. */
.aida-bank-value {
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
	font-size: 1rem;
	letter-spacing: .04em;
	word-break: break-all;
	user-select: all;
}

.aida-bank-footnote {
	margin-bottom: 0;
	font-size: .88rem;
	color: var(--aida-ink-soft);
}

/* ------------------------------------------------------------------ */
/* Petits écrans                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	/* Le menu repasse au-dessus du contenu : une colonne latérale fixe
	   sur un téléphone mangerait la moitié de l'écran. */
	.aida-app--shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.aida-sidebar {
		position: static;
	}

	.aida-nav {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: .25rem;
	}

	.aida-nav a {
		border-left: none;
		border-bottom: 2px solid transparent;
		justify-content: flex-start;
	}

	.aida-nav a:hover,
	.aida-nav a:focus {
		border-left-color: transparent;
		border-bottom-color: var(--aida-primary);
	}

	.aida-nav-logout {
		margin: 0 0 0 auto;
		padding: 0;
		border-top: none;
	}

	.aida-app .aida-nav-link-button {
		width: auto;
		border-color: var(--aida-line-strong);
	}
}

@media (max-width: 782px) {
	.aida-app {
		padding: .75rem;
	}

	.aida-panel,
	.aida-card {
		padding: 1.15rem;
	}

	.aida-section-head {
		margin: -1.15rem -1.15rem 1rem;
		padding: .85rem 1.15rem;
	}

	.aida-stats {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: .75rem;
	}

	.aida-stat {
		padding: .9rem 1rem;
	}

	.aida-stat-value {
		font-size: 1.6rem;
	}

	.aida-app .form-table th {
		width: auto;
		display: block;
		padding: .5rem 0 0;
	}

	.aida-app .form-table td {
		display: block;
	}
}