/**
 * Espace client.
 *
 * Même vocabulaire visuel que le tunnel — mêmes jetons, mêmes cartes — pour
 * qu'on ne sente pas la couture entre réserver et consulter.
 *
 * La page vit dans une section Elementor dont on ne maîtrise rien : tout est
 * donc borné ici, du `box-sizing` à la largeur, et aucune règle ne déborde du
 * préfixe `.gm-account`.
 */

.gm-account {
	--gm-racing: #e11d48;
	--gm-racing-strong: #9f1239;
	--gm-ink: #e8ebf2;
	--gm-surface: #ffffff;
	--gm-surface-alt: #eef1f7;
	--gm-chalk: #0d1220;
	--gm-smoke: #525b6b;
	--gm-border: rgba(13, 18, 32, 0.1);
	--gm-ok: #047857;
	--gm-warn: #b45309;
	--gm-shadow: 0 1px 2px rgba(13, 18, 32, 0.05), 0 8px 20px -12px rgba(13, 18, 32, 0.16);
	--gm-border-strong: rgba(13, 18, 32, 0.16);
	--gm-ease: cubic-bezier(0.22, 1, 0.36, 1);

	max-width: var(--gm-account-width, 1200px);
	margin: 0 auto;
	/*
	 * Pas de fond : la page du site est déjà un fond.
	 *
	 * Le gris froid rangeait les blocs tant que la page déroulait tout. Avec
	 * les volets, il ne reste qu'un bloc à la fois à l'écran, et la plaque
	 * grise se lisait comme un cadre posé par-dessus le site.
	 */
	padding: 0 0 clamp(32px, 5vw, 64px);
	border-radius: 24px;
	overflow: hidden;
	color: var(--gm-chalk);
	font-size: 16px;
	line-height: 1.55;
}

.gm-account *,
.gm-account *::before,
.gm-account *::after {
	box-sizing: border-box;
}

/*
 * Le thème souligne tous les liens de contenu, et un bouton est un lien.
 * Sans cette reprise, les trois actions et les boutons de ligne s'affichent
 * en texte souligné — ce qui les fait lire comme des notes de bas de page
 * plutôt que comme des commandes. `!important` est ici le bon outil : on ne
 * sait pas quelle règle du thème on affronte, et elle changera à la
 * prochaine mise à jour.
 *
 * La classe est écrite deux fois exprès. Entre deux règles `!important` de
 * même poids, c'est l'ordre de chargement qui tranche — et le thème se charge
 * parfois après nous. Doubler le sélecteur relève la spécificité et met fin
 * à la discussion.
 */
.gm-account.gm-account a,
.gm-account.gm-account a:hover,
.gm-account.gm-account a:focus,
.gm-account.gm-account a:visited {
	text-decoration: none !important;
	box-shadow: none !important;
}

.gm-account button {
	font-family: inherit;
}

/*
 * Un titre prend la couleur de ce qui le porte.
 *
 * Le thème impose une encre sombre à tous les `h1` et `h2` du site : sur la
 * bande d'en-tête et sur la carte de la prochaine date, le texte devenait
 * noir sur noir et disparaissait. Le sélecteur est doublé pour la même raison
 * que celui des liens — on ignore quelle règle du thème on affronte.
 */
.gm-account.gm-account h1,
.gm-account.gm-account h2,
.gm-account.gm-account h3,
.gm-account.gm-account h4 {
	color: inherit;
}

/* ========================================================================== */
/* Titres                                                                     */
/* ========================================================================== */

/*
 * L'en-tête, en bande sombre.
 *
 * Le prénom seul sur fond blanc ne distinguait pas l'espace client du reste du
 * site. La bande lui donne une entrée, et la bordure à damier la signe.
 */
.gm-ac-hero {
	position: relative;
	margin: 0 0 clamp(18px, 3vw, 28px);
	padding: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 32px);
	background: radial-gradient(
			55% 90% at 85% 0%,
			color-mix(in srgb, var(--gm-racing) 28%, transparent),
			transparent 70%
		),
		linear-gradient(180deg, #1b2235, var(--gm-chalk));
	color: #fff;
}

.gm-ac-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: repeating-linear-gradient(90deg, var(--gm-racing) 0 20px, #fff 20px 40px);
}

.gm-ac-hero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.gm-ac-hero__id {
	min-width: 0;
	flex: 1 1 240px;
}

.gm-ac-btn--light {
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.gm-ac-btn--light:hover,
.gm-ac-btn--light:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* ========================================================================== */
/* Le menu et les volets                                                      */
/* ========================================================================== */

/*
 * Un sommaire à gauche, un sujet à la fois à droite.
 *
 * Tout empilé, la page faisait huit écrans chez un habitué, et la seule chose
 * urgente — un solde, une date à choisir — se noyait au milieu de l'historique.
 * Le menu n'est pas une navigation : rien ne se charge, tout est déjà là.
 */
.gm-ac-shell {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: clamp(16px, 2.5vw, 28px);
	margin: 0 clamp(16px, 3vw, 32px);
	align-items: start;
}

/*
 * Les cartes perdent leur marge latérale dans un volet.
 *
 * Elles la portaient quand elles se succédaient à même la page ; ici c'est la
 * grille qui tient les gouttières, et la marge doublerait l'écart.
 */
.gm-ac-shell .gm-ac-card,
.gm-ac-shell .gm-ac-next {
	margin-left: 0;
	margin-right: 0;
}

.gm-ac-nav {
	position: sticky;
	top: 16px;
	align-self: start;
	padding: 14px 12px;
	border: 1px solid var(--gm-border);
	border-radius: 20px;
	background: var(--gm-surface);
	box-shadow: 0 1px 2px rgba(13, 18, 32, 0.04), 0 18px 40px -28px rgba(13, 18, 32, 0.3);
}

.gm-ac-nav__title {
	margin: 6px 0 12px 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--gm-smoke);
}

.gm-ac-nav__link {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 13px 14px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--gm-chalk);
	font-size: 0.90625rem;
	text-align: left;
	cursor: pointer;
	transition: background 0.18s var(--gm-ease), color 0.18s var(--gm-ease);
}

.gm-ac-nav__link + .gm-ac-nav__link {
	margin-top: 2px;
}

.gm-ac-nav__link svg {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: var(--gm-smoke);
}

.gm-ac-nav__link > span {
	flex: 1 1 auto;
	min-width: 0;
}

/* Le compteur dit combien, et dispense d'ouvrir pour le savoir. */
.gm-ac-nav__link em {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--gm-surface-alt);
	color: var(--gm-smoke);
	font-size: 0.71875rem;
	font-style: normal;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/*
 * Le chevron ne paraît que sur l'entrée ouverte.
 *
 * Il termine la phrase : il dit que le contenu est à droite. Partout ailleurs
 * il ferait croire à six menus dépliants.
 */
.gm-ac-nav__go {
	display: none;
	margin-right: -2px;
	opacity: 0.9;
}

.gm-ac-nav__link.is-on .gm-ac-nav__go {
	display: flex;
}

.gm-ac-nav__go svg {
	width: 17px;
	height: 17px;
}

/*
 * Le survol et l'état courant se distinguent franchement.
 *
 * Deux gris voisins ne se lisent pas : l'entrée ouverte prend l'encre de la
 * marque, le survol se contente du fond.
 */
.gm-ac-nav__link:hover,
.gm-ac-nav__link:focus-visible {
	background: var(--gm-surface-alt);
	color: var(--gm-chalk);
}

.gm-ac-nav__link:hover svg,
.gm-ac-nav__link:focus-visible svg {
	color: var(--gm-chalk);
}

.gm-ac-nav__link.is-on,
.gm-ac-nav__link.is-on:hover,
.gm-ac-nav__link.is-on:focus-visible {
	background: var(--gm-racing);
	color: #fff;
	font-weight: 700;
}

.gm-ac-nav__link.is-on svg {
	color: #fff;
}

.gm-ac-nav__link.is-on em {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.gm-ac-nav__link--quiet {
	color: var(--gm-smoke);
}

.gm-ac-nav__rule {
	display: block;
	height: 1px;
	margin: 12px 10px;
	background: var(--gm-border);
}

/*
 * La colonne des volets peut rétrécir.
 *
 * Sans `min-width: 0`, un enfant de grille garde la largeur de son contenu le
 * plus long : un code de réservation ou un nom de stage sans espace
 * élargissait toute la page, et le téléphone défilait à l'horizontale.
 */
.gm-ac-vues {
	min-width: 0;
}

/*
 * Un volet caché l'est pour de bon.
 *
 * `display: none` et non une opacité : un bouton masqué mais présent reste
 * atteignable au clavier, et on tabule dans une section qu'on ne voit pas.
 */
.gm-ac-vue {
	display: none;
}

.gm-ac-vue.is-on {
	display: block;
}

/*
 * Sans JavaScript, tout s'affiche.
 *
 * La page redevient la longue liste d'avant : moins commode, jamais vide. Le
 * script pose l'attribut dès qu'il a repris la main, et le menu n'apparaît
 * qu'à ce moment — six boutons qui ne font rien valent mieux absents.
 */
.gm-ac-shell:not([data-gm-pret]) .gm-ac-vue {
	display: block;
}

.gm-ac-shell:not([data-gm-pret]) .gm-ac-nav {
	display: none;
}

/*
 * Au téléphone, le sommaire se range en deux colonnes.
 *
 * Il défilait d'abord à l'horizontale, et c'était la mauvaise réponse : une
 * barre coupée en plein mot ne dit pas qu'elle continue, elle a l'air cassée.
 * On ne demande donc rien au doigt — les six entrées tiennent toutes à
 * l'écran, en trois rangs de deux, et on voit du premier coup d'œil ce que
 * l'espace contient.
 */
@media (max-width: 860px) {
	.gm-ac-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.gm-ac-nav {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 10px;
	}

	.gm-ac-nav__title,
	.gm-ac-nav__rule {
		grid-column: 1 / -1;
	}

	.gm-ac-nav__title {
		margin: 2px 0 2px 4px;
	}

	.gm-ac-nav__rule {
		margin: 2px 6px;
	}

	.gm-ac-nav__link {
		gap: 8px;
		padding: 11px 10px;
		font-size: 0.875rem;
		line-height: 1.25;
	}

	.gm-ac-nav__link + .gm-ac-nav__link {
		margin-top: 0;
	}

	/* Deux colonnes laissent trop peu de place : le chevron de l'entrée
	   ouverte volerait les pixels de son intitulé. */
	.gm-ac-nav__link.is-on .gm-ac-nav__go {
		display: none;
	}
}

/* Sous 380 px, deux colonnes coupent « Mes réservations » en trois lignes :
   une seule colonne reste plus courte que trois rangs mal pliés. */
@media (max-width: 380px) {
	.gm-ac-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.gm-ac-nav__link.is-on .gm-ac-nav__go {
		display: flex;
	}

	/* La tuile se resserre : le rond fléché part, la carte entière est déjà
	   le bouton. */
	.gm-ac-tile {
		min-height: 88px;
		gap: 12px;
		padding: 14px 16px;
	}

	.gm-ac-tile__icon {
		width: 40px;
		height: 40px;
	}

	.gm-ac-tile__go {
		display: none;
	}
}

/* ========================================================================== */
/* Le reste à régler                                                          */
/* ========================================================================== */

/*
 * Le seul chiffre qui coûte de l'argent à ignorer.
 *
 * Il vit dans la bande d'en-tête et non dans un volet : c'est le seul endroit
 * de la page qui reste à l'écran quel que soit l'onglet ouvert, et une dette
 * qu'il faut aller chercher dans le bon onglet est une dette qu'on oublie. La
 * carte est blanche sur fond sombre, donc impossible à survoler des yeux.
 */
.gm-ac-du {
	flex: 0 0 auto;
	width: 260px;
	max-width: 100%;
	padding: 18px 20px 20px;
	border-radius: 18px;
	background: var(--gm-surface);
	color: var(--gm-chalk);
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

.gm-ac-du__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gm-warn);
}

.gm-ac-du__label svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.gm-ac-du__val {
	margin: 6px 0 14px;
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--gm-chalk);
	font-variant-numeric: tabular-nums;
}

/* Le bouton prend la largeur de la carte : au pouce comme à la souris, c'est
   la cible la plus évidente de la bande. */
.gm-ac-du .gm-ac-btn {
	display: block;
	width: 100%;
	text-align: center;
}

/* Passée sous le nom, la carte n'a plus de raison de rester étroite : une
   colonne de 260 px au milieu d'un écran vide se lit comme un oubli. */
@media (max-width: 680px) {
	.gm-ac-du {
		width: 100%;
	}
}

/* WooCommerce découpe le montant en plusieurs balises : aucune ne doit
   reprendre la taille du texte courant. */
.gm-ac-du__val .woocommerce-Price-amount,
.gm-ac-du__val bdi {
	font: inherit;
	color: inherit;
}

/* ========================================================================== */
/* Les trois tuiles                                                           */
/* ========================================================================== */

/*
 * Trois chiffres, et chacun ouvre ce qu'il compte.
 *
 * Posés en blanc sur blanc, ils se lisaient comme un relevé de banque. La
 * photo assombrie ne se regarde pas — elle se devine, et c'est elle qui
 * rappelle de quoi l'on parle sur une page qui ne montre autrement aucune
 * voiture.
 */
.gm-ac-tiles {
	display: grid;
	/*
	 * Trois, puis deux, puis une.
	 *
	 * `auto-fit` plutôt qu'un point de rupture : la colonne des volets ne fait
	 * pas la largeur de l'écran, et une règle écrite pour 860 px se serait
	 * déclenchée au mauvais moment.
	 */
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(10px, 1.4vw, 16px);
	margin-bottom: 20px;
}

.gm-ac-tile {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 104px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 18px;
	background: var(--gm-chalk);
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 18px 40px -26px rgba(13, 18, 32, 0.75);
	transition: transform 0.2s var(--gm-ease), box-shadow 0.2s var(--gm-ease);
}

.gm-ac-tile:hover,
.gm-ac-tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 24px 46px -24px rgba(13, 18, 32, 0.85);
}

/*
 * La photo et son voile, posés l'un sur l'autre.
 *
 * Aucun `z-index` : trois frères positionnés se peignent dans l'ordre du
 * document, et c'est l'ordre du HTML qui fait foi. La version précédente
 * déclarait des couches — décor, `::after`, texte en `z-index: 1` — et au
 * téléphone la carte sortait voilée et floue, le texte passant sous son
 * propre voile.
 *
 * La photo ne se recadre jamais. Elle prend toute la hauteur de la carte, sa
 * largeur suit son propre rapport (`--gm-ratio`, posé par le serveur depuis
 * le fichier) et elle s'accroche à droite : avec `cover` sur une carte plus
 * large que l'image, c'étaient le toit et les roues qui partaient. Ce qui
 * dépasse à gauche n'est que du ciel, et le voile le couvre déjà.
 */
.gm-ac-next__veil {
	position: absolute;
	inset: 0;
}

.gm-ac-next__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	aspect-ratio: var(--gm-ratio, 3 / 2);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Le bord gauche de l'image est blanc : il se fond dans la carte au lieu d'y
   tracer une couture. */
.gm-ac-next__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--gm-chalk) 0%, rgba(13, 18, 32, 0) 34%);
}

/*
 * Le dégradé, et rien derrière.
 *
 * Trois voitures en vignette, juste au-dessus de la carte qui en montre une en
 * grand, se disputaient le regard sans rien dire de plus que le chiffre. Le
 * dégradé garde ce qu'elles apportaient — la profondeur, et le rouge du côté
 * où rien n'est écrit.
 */
.gm-ac-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		var(--gm-chalk) 26%,
		#1b2235 56%,
		var(--gm-racing-strong) 100%
	);
}

.gm-ac-tile > * {
	position: relative;
	z-index: 1;
}

.gm-ac-tile__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
}

.gm-ac-tile__icon svg {
	width: 24px;
	height: 24px;
}

.gm-ac-tile__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gm-ac-tile strong {
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: 2.125rem;
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.gm-ac-tile small {
	font-size: 0.78125rem;
	color: #c8cfdd;
}

.gm-ac-tile__go {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gm-racing);
	color: #fff;
	transition: transform 0.2s var(--gm-ease);
}

.gm-ac-tile__go svg {
	width: 17px;
	height: 17px;
}

.gm-ac-tile:hover .gm-ac-tile__go {
	transform: translateX(3px);
}

/* ========================================================================== */
/* La carte du prochain stage                                                 */
/* ========================================================================== */

/*
 * Tout ce qu'on vérifie la veille, au même endroit.
 *
 * La date, l'heure et l'adresse exacte : sans cette carte, on rouvrait le
 * courriel de confirmation vieux de trois mois. La photo couvre la carte,
 * cadrée à droite, et le voile l'éteint vers la gauche pour que le texte n'ait
 * jamais à lutter contre elle.
 */
.gm-ac-next {
	position: relative;
	overflow: hidden;
	min-height: 340px;
	margin: 0 clamp(16px, 3vw, 32px) 20px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 22px;
	background: var(--gm-chalk);
	color: #fff;
	box-shadow: 0 26px 60px -34px rgba(13, 18, 32, 0.8);
}

.gm-ac-next__veil {
	background: linear-gradient(
		90deg,
		var(--gm-chalk) 28%,
		rgba(13, 18, 32, 0.8) 44%,
		rgba(13, 18, 32, 0.08) 68%,
		rgba(13, 18, 32, 0) 100%
	);
}

/*
 * Le texte vient après le voile dans le document : il se peint donc dessus,
 * sans avoir à le déclarer. `position: relative` suffit à le faire participer
 * à la même étape de peinture que ses deux frères absolus.
 */
.gm-ac-next__text {
	position: relative;
	max-width: 620px;
	padding: clamp(22px, 3vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gm-ac-next__kicker {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gm-racing);
}

.gm-ac-next__title {
	margin: 0;
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: clamp(1.625rem, 3.4vw, 2.625rem);
	font-weight: 400;
	line-height: 0.98;
	text-transform: uppercase;
}

/* Quatre faits sur une même colonne : l'œil descend tout droit. */
.gm-ac-facts {
	list-style: none;
	margin: 4px 0 2px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.gm-ac-facts li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 0.9375rem;
}

.gm-ac-facts i {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	padding-right: 14px;
	border-right: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
}

.gm-ac-facts svg {
	width: 19px;
	height: 19px;
}

.gm-ac-facts span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	text-transform: capitalize;
}

.gm-ac-facts em {
	font-style: normal;
	font-size: 0.84375rem;
	text-transform: none;
	color: #aeb6c6;
}

.gm-ac-next__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.gm-ac-next__actions .gm-ac-btn {
	padding: 13px 22px;
	font-weight: 700;
}

.gm-ac-next__actions .gm-ac-btn svg {
	width: 16px;
	height: 16px;
	margin-left: 2px;
}

.gm-ac-next__rule {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.64);
}

/*
 * Sur la photo, un bouton sombre : il se détache sans masquer la voiture.
 *
 * Il a d'abord été translucide avec un `backdrop-filter`. Le filtre fait du
 * conteneur arrondi une racine d'arrière-plan, et au téléphone le navigateur
 * rendait toute la carte floue et rétrécie — titre, faits et boutons compris.
 * Une opacité élevée donne le même effet sans rien demander au compositeur.
 */
.gm-ac-btn--glass,
.gm-ac-btn--glass:visited {
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(13, 18, 32, 0.78);
	color: #fff;
}

.gm-ac-btn--glass:hover,
.gm-ac-btn--glass:focus-visible {
	border-color: rgba(255, 255, 255, 0.42);
	background: var(--gm-chalk);
	color: #fff;
}

/*
 * L'état, en bas à droite.
 *
 * Il se pose sur la photo et non dans le texte : c'est une estampille, pas une
 * ligne de plus à lire. En haut, il tombait sur le logo du constructeur et sur
 * la partie claire du décor ; en bas, il a le capot pour fond et ne gêne plus
 * rien. Le point vert porte l'information, le mot la confirme.
 */
.gm-ac-next__state {
	position: absolute;
	bottom: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 30px;
	background: rgba(13, 18, 32, 0.82);
	font-size: 0.71875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gm-ac-next__state i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #94a3b8;
	box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.25);
}

/* Le point dit la réponse du pilote : gris tant qu'on ne la demande pas,
   ambre quand on l'attend, vert quand il l'a donnée. */
.gm-ac-next__state.is-wait i {
	background: #f59e0b;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28);
}

.gm-ac-next__state.is-ok i {
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

/*
 * Au téléphone, la photo d'abord, le texte ensuite.
 *
 * Ce bloc vient après les règles de base, et c'est tout ce qui comptait : il
 * se tenait plus haut, dans la requête des 860 px, et les règles de base —
 * même poids, déclarées plus bas — l'écrasaient. Le voile restait horizontal,
 * l'estampille restait en bas à droite, sur les boutons.
 *
 * Plutôt que de glisser la photo sous le texte, où il n'en restait qu'une
 * bande voilée, elle reprend sa place dans le flux, en entier, avec son
 * propre rapport : rien n'est coupé. Le bas de l'image se fond dans la carte,
 * et l'estampille se pose dans le ciel, en haut à gauche.
 */
@media (max-width: 860px) {
	.gm-ac-next {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.gm-ac-next__photo {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		height: auto;
	}

	.gm-ac-next__photo::after {
		background: linear-gradient(180deg, rgba(13, 18, 32, 0) 62%, var(--gm-chalk) 100%);
	}

	.gm-ac-next__veil {
		display: none;
	}

	.gm-ac-next__text {
		max-width: none;
		margin-top: -8px;
		padding-top: 0;
	}

	.gm-ac-next__state {
		top: 14px;
		bottom: auto;
		right: auto;
		left: 14px;
	}

	.gm-ac-next__actions .gm-ac-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ========================================================================== */
/* Le repli d'une sous-liste                                                  */
/* ========================================================================== */

/*
 * Ce qui est consommé se range, sans disparaître.
 *
 * Un bon activé, un stage couru : la preuve doit rester à portée de clic, mais
 * elle n'a pas à peser dans la liste de ce qui attend un geste.
 */
.gm-ac-fold {
	margin-top: 18px;
	border-top: 1px solid var(--gm-border);
}

.gm-ac-fold__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gm-smoke);
	cursor: pointer;
	list-style: none;
}

.gm-ac-fold__head::-webkit-details-marker {
	display: none;
}

.gm-ac-fold__head em {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--gm-surface-alt);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Le chevron, dessiné plutôt qu'écrit : une police peut manquer, pas une
   bordure. */
.gm-ac-fold__head::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.gm-ac-fold[open] > .gm-ac-fold__head::after {
	transform: translateY(2px) rotate(-135deg);
}

.gm-ac-fold__head:hover {
	color: var(--gm-chalk);
}

/* ========================================================================== */
/* Le renvoi vers un autre volet                                              */
/* ========================================================================== */

/*
 * « Voir les trois autres » : un bouton qui se lit comme un lien.
 *
 * C'en est un pour l'œil et un bouton pour le navigateur — il ne mène pas
 * ailleurs, il ouvre un volet déjà rendu.
 */
.gm-ac-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--gm-racing);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.gm-ac-link:hover,
.gm-ac-link:focus-visible {
	color: var(--gm-racing-strong);
	text-decoration: underline;
}

.gm-ac-todo__more {
	margin: 14px 0 0;
}

.gm-ac-eyebrow {
	margin: 0 0 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gm-racing);
}

/*
 * Sur la bande sombre, le rouge de la marque passe tout juste.
 *
 * À cette taille et en capitales, 4:1 ne suffit pas. On l'éclaircit d'un tiers
 * de blanc : la teinte reste celle de la marque, et le mot se lit.
 */
.gm-ac-hero .gm-ac-eyebrow {
	color: color-mix(in srgb, var(--gm-racing) 62%, #fff);
}

.gm-ac-h1 {
	margin: 0;
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.gm-ac-h2 {
	margin: 0 0 16px;
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.gm-ac-lede {
	margin: 0 0 20px;
	color: var(--gm-smoke);
}

.gm-ac-aside {
	margin: 16px 0 0;
	font-size: 0.8125rem;
	color: var(--gm-smoke);
}

.gm-ac-aside a {
	color: var(--gm-racing);
}

.gm-ac-empty {
	margin: 0;
	color: var(--gm-smoke);
}

/* ========================================================================== */
/* Cartes                                                                     */
/* ========================================================================== */

.gm-ac-card {
	margin: 0 clamp(16px, 3vw, 32px) 20px;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--gm-border);
	border-radius: 16px;
	background: var(--gm-surface);
	box-shadow: var(--gm-shadow);
}

.gm-ac-card--center {
	text-align: center;
}

/* Ce qui demande une action porte l'accent : c'est la seule carte qu'on ne
   doit pas pouvoir survoler des yeux sans la voir. */
.gm-ac-card--todo {
	border-color: color-mix(in srgb, var(--gm-racing) 35%, transparent);
	background: color-mix(in srgb, var(--gm-racing) 4%, #fff);
}

.gm-ac-card--quiet {
	background: var(--gm-surface-alt);
	box-shadow: none;
}

.gm-ac-card--fold > summary {
	cursor: pointer;
	margin-bottom: 0;
}

.gm-ac-card--fold[open] > summary {
	margin-bottom: 16px;
}

/* ========================================================================== */
/* Les trois gestes                                                           */
/* ========================================================================== */

.gm-ac-actions {
	margin-inline: clamp(16px, 3vw, 32px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}

/*
 * De vrais boutons : pleins, lisibles de loin, et qui répondent au doigt.
 * Ce sont les trois seules choses qu'on vient faire ici, et elles doivent
 * se voir avant tout le reste de la page.
 */
.gm-ac-action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 64px;
	padding: 18px 20px;
	border: 0;
	border-radius: 14px;
	background: var(--gm-chalk);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	cursor: pointer;
	transition: transform 0.15s var(--gm-ease, ease), background 0.15s ease,
		box-shadow 0.15s ease;
}

.gm-ac-action:hover,
.gm-ac-action:focus-visible {
	transform: translateY(-2px);
	background: var(--gm-racing);
	box-shadow: 0 10px 24px -14px var(--gm-racing);
	color: #fff;
}

.gm-ac-action__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: currentColor;
}

/* ========================================================================== */
/* Boutons                                                                    */
/* ========================================================================== */

.gm-ac-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 2px solid var(--gm-racing);
	border-radius: 999px;
	background: var(--gm-racing);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.gm-ac-btn:hover,
.gm-ac-btn:focus-visible {
	background: var(--gm-racing-strong);
	border-color: var(--gm-racing-strong);
	box-shadow: 0 8px 20px -12px var(--gm-racing);
	color: #fff;
}

/* L'enfoncement : sans retour au doigt, on reclique, et on paie deux fois. */
.gm-ac-btn:active {
	transform: translateY(1px);
	box-shadow: none;
}

.gm-ac-btn--sm {
	padding: 10px 20px;
	font-size: 0.875rem;
}

/* Confirmer sa venue : le vert de l'estampille qu'il fera passer au vert. */
.gm-ac-btn--ok,
.gm-ac-btn--ok:visited {
	border-color: #16a34a;
	background: #16a34a;
}

.gm-ac-btn--ok:hover,
.gm-ac-btn--ok:focus-visible {
	border-color: #15803d;
	background: #15803d;
	box-shadow: 0 8px 20px -12px #16a34a;
}

/* Secondaire : même forme, moins d'encre. Il ne doit pas concurrencer
   l'action principale de la ligne. */
.gm-ac-btn--ghost {
	background: transparent;
	color: var(--gm-racing);
}

.gm-ac-btn--ghost:hover,
.gm-ac-btn--ghost:focus-visible {
	background: var(--gm-racing);
	border-color: var(--gm-racing);
	color: #fff;
}

/* Tertiaire : annuler, se déconnecter. Visible, jamais attirant. */
.gm-ac-btn--quiet {
	border-color: var(--gm-border-strong, rgba(13, 18, 32, 0.16));
	background: transparent;
	color: var(--gm-smoke);
}

.gm-ac-btn--quiet:hover,
.gm-ac-btn--quiet:focus-visible {
	background: var(--gm-surface-alt);
	border-color: var(--gm-smoke);
	box-shadow: none;
	color: var(--gm-chalk);
}

.gm-ac-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.gm-ac-row-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* La mention tient la place des boutons qu'elle remplace : alignée à droite
   comme eux, pour que les lignes d'une même liste gardent leur colonne. */
.gm-ac-locked {
	font-size: 0.8125rem;
	text-align: right;
	color: var(--gm-smoke);
}

.gm-ac-list__item > .gm-ac-row-actions,
.gm-ac-voucher > .gm-ac-row-actions {
	justify-content: flex-end;
}

/* ========================================================================== */
/* À faire                                                                    */
/* ========================================================================== */

.gm-ac-todo,
.gm-ac-list,
.gm-ac-orders,
.gm-ac-vouchers,
.gm-ac-pasts {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Une ligne, trois places : ce dont il s'agit, où ça en est, et le geste.
 *
 * Le cadran du solde s'intercale entre l'intitulé et le bouton, et le bloc des
 * versements passe à la ligne sous les trois. Les écarts et le trait de
 * séparation sont les mêmes pour un stage à programmer et pour un solde : ce
 * sont deux choses à faire, et rien ne justifie qu'elles ne se lisent pas de
 * la même façon.
 */
.gm-ac-todo__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	padding: 16px 0;
	border-bottom: 1px solid var(--gm-border);
}

.gm-ac-todo__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* L'intitulé pousse le reste à droite, et se replie le premier. */
.gm-ac-todo__id {
	flex: 1 1 220px;
	min-width: 0;
}

/*
 * L'échéancier du solde occupe sa propre ligne.
 *
 * Glissé dans le flux à côté du bouton, il réduisait le cadran à une colonne
 * et le champ de saisie à quatre-vingts pixels : la ligne entière lui revient,
 * sous les trois autres.
 */
.gm-ac-todo__item--plan > .gm-ac-plan {
	flex: 1 1 100%;
	margin: 0;
}

.gm-ac-todo__title {
	margin: 0;
	font-weight: 600;
}

.gm-ac-todo__note {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var(--gm-smoke);
}

/* Dans « À faire », le cadran est une colonne de la ligne : il n'a ni à
   s'étirer, ni à se décoller de ce qu'il commente. */
.gm-ac-todo__item > .gm-ac-plan__state {
	flex: 0 1 auto;
	margin: 0;
}

/*
 * Dans une commande, le cadran garde sa boîte.
 *
 * La ligne d'une commande est une grille de quatre colonnes : le cadran se
 * range donc sous elles, et `grid-column: 1 / -1` l'étirait sur toute la
 * largeur — deux chiffres perdus dans un champ vide. Et comme la zone des
 * commandes rattachées est déjà grise, sa propre teinte grise disparaissait :
 * la boîte existait, on ne la voyait plus. Elle reprend le blanc et sa
 * bordure, et ne s'étend qu'à ce qu'elle contient.
 */
.gm-ac-order > .gm-ac-plan__state {
	justify-self: start;
	margin-top: 0;
	border: 1px solid var(--gm-border);
	background: var(--gm-surface);
}

.gm-ac-todo__note.is-urgent {
	color: var(--gm-racing);
	font-weight: 600;
}

/* ========================================================================== */
/* Réservations                                                               */
/* ========================================================================== */

/*
 * La date tient sa largeur, le stage prend le reste.
 *
 * La première colonne s'étirait avec la seconde : sur un écran large, « 10
 * octobre 2026 » se retrouvait seul au milieu de cent pixels de vide, et le
 * nom du stage commençait au tiers de la ligne. Elle ne vaut plus que ce
 * qu'elle mesure, et c'est le stage qui absorbe le reste.
 */
.gm-ac-list__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--gm-border);
}

.gm-ac-list__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Une ligne qui vient d'être annulée part en fondu plutôt que de disparaître :
   on doit voir ce qu'on a fait. */
.gm-ac-list__item.is-gone {
	opacity: 0.4;
}

.gm-ac-when {
	display: flex;
	flex-direction: column;
}

.gm-ac-when strong {
	font-size: 1.0625rem;
	text-transform: capitalize;
}

.gm-ac-when span {
	font-size: 0.875rem;
	color: var(--gm-racing);
	font-weight: 600;
}

.gm-ac-what__title {
	margin: 0;
	font-weight: 600;
}

.gm-ac-what__ref {
	margin: 2px 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--gm-smoke);
}

/* ========================================================================== */
/* Bons cadeaux                                                               */
/* ========================================================================== */

.gm-ac-voucher {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--gm-border);
}

.gm-ac-voucher:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.gm-ac-voucher__title {
	margin: 0;
	font-weight: 600;
}

.gm-ac-voucher__for,
.gm-ac-voucher__done {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var(--gm-smoke);
}

.gm-ac-voucher__code {
	margin: 0;
}

/* Le code se recopie dans un SMS : il doit se lire d'un coup d'œil et se
   copier d'un clic. */
.gm-ac-code {
	padding: 8px 14px;
	border: 1px dashed var(--gm-racing);
	border-radius: 10px;
	background: color-mix(in srgb, var(--gm-racing) 6%, #fff);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--gm-racing);
	cursor: pointer;
}

.gm-ac-code.is-copied {
	border-style: solid;
	border-color: var(--gm-ok);
	color: var(--gm-ok);
}

/* ========================================================================== */
/* Commandes                                                                  */
/* ========================================================================== */

.gm-ac-order {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--gm-border);
}

.gm-ac-order:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.gm-ac-order__num {
	margin: 0;
	font-weight: 600;
}

/* Le numéro identifie, le produit renseigne : deux lignes plutôt qu'un titre
   long où les deux se gênaient. */
.gm-ac-order__sub {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var(--gm-smoke);
}

.gm-ac-order__total {
	font-weight: 600;
	white-space: nowrap;
}

.gm-ac-chip {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--gm-surface-alt);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.gm-ac-chip.is-due {
	background: color-mix(in srgb, var(--gm-warn) 14%, #fff);
	color: var(--gm-warn);
}

.gm-ac-chip.is-ok {
	background: color-mix(in srgb, var(--gm-ok) 12%, #fff);
	color: var(--gm-ok);
}

.gm-ac-past {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--gm-border);
	font-size: 0.875rem;
	color: var(--gm-smoke);
}

.gm-ac-past:last-child {
	border-bottom: 0;
}

/* ========================================================================== */
/* Le bon imprimable                                                          */
/* ========================================================================== */

.gm-ac-print__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.gm-ac-print__art {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.gm-ac-print__card {
	padding: clamp(28px, 6vw, 64px);
	border: 2px solid var(--gm-chalk);
	border-radius: 20px;
	background: var(--gm-surface);
	text-align: center;
}

.gm-ac-print__eyebrow {
	margin: 0 0 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gm-racing);
}

.gm-ac-print__stage {
	margin: 0 0 4px;
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	text-transform: uppercase;
	line-height: 1.1;
}

.gm-ac-print__for {
	margin: 0 0 24px;
	color: var(--gm-smoke);
}

.gm-ac-print__label {
	margin: 24px 0 6px;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gm-smoke);
}

.gm-ac-print__code {
	margin: 0;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.12em;
}

.gm-ac-print__valid,
.gm-ac-print__how {
	margin: 16px 0 0;
	font-size: 0.875rem;
	color: var(--gm-smoke);
}

/* À l'impression, il ne reste que le bon : ni barre d'action, ni décor du
   thème. C'est ce qu'on glisse dans une enveloppe. */
@media print {
	.gm-ac-print__bar {
		display: none;
	}

	.gm-account {
		padding: 0;
		max-width: none;
	}

	.gm-ac-print__card {
		box-shadow: none;
	}
}

/* ========================================================================== */
/* Les écrans de WooCommerce insérés ici                                      */
/* ========================================================================== */

/*
 * Modifier ses informations, voir une commande : ces écrans viennent de
 * WooCommerce, avec son balisage. On ne le réécrit pas — on l'accueille, en
 * lui donnant l'espace et la typographie de la page.
 */
.gm-ac-back {
	margin: 0 0 16px;
	font-size: 0.875rem;
}

.gm-ac-back a {
	color: var(--gm-racing);
	font-weight: 600;
}

/*
 * La colonne d'onglets de WooCommerce ne s'affiche plus.
 *
 * Le gabarit qui la produit est retiré côté PHP ; cette règle couvre le cas
 * d'un thème qui l'écrirait lui-même au lieu de passer par le crochet. Le
 * contenu reprend alors toute la largeur : WooCommerce le fait flotter à
 * droite sur 68 %, ce qui laisserait un tiers de blanc à gauche.
 */
.gm-ac-woo .woocommerce-MyAccount-navigation {
	display: none;
}

.gm-ac-woo .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

/*
 * Les champs vont par deux quand ils vont par paires.
 *
 * WooCommerce range « Prénom » et « Nom » avec d'anciens flottants, que le
 * thème redresse ou non selon son humeur. Une grille ne dépend de personne, et
 * retombe sur une colonne au téléphone.
 */
.gm-ac-woo .woocommerce-form-row,
.gm-ac-woo .form-row {
	margin: 0 0 18px;
	padding: 0;
	float: none;
	width: 100%;
}

.gm-ac-woo fieldset {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--gm-border);
}

.gm-ac-woo fieldset legend {
	padding: 0;
	font-weight: 700;
}

@media (min-width: 560px) {
	.gm-ac-woo .form-row-first,
	.gm-ac-woo .form-row-last {
		display: inline-block;
		width: calc(50% - 9px);
		vertical-align: top;
	}

	.gm-ac-woo .form-row-first {
		margin-right: 14px;
	}
}

.gm-ac-woo label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

/*
 * Le bouton « afficher le mot de passe ».
 *
 * WooCommerce le pose dans le champ et le dessine avec sa propre police
 * d'icônes ; sans elle, il retombait en gros rectangle bleu sous chaque
 * champ. On le remet dans le champ et on dessine l'œil au trait — une police
 * peut manquer, pas une bordure.
 */
.gm-ac-woo .password-input {
	position: relative;
	display: block;
}

.gm-ac-woo .password-input input {
	padding-right: 48px;
}

.gm-ac-woo .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 24px;
	height: 16px;
	margin-top: -8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gm-smoke);
	font-size: 0;
	cursor: pointer;
}

.gm-ac-woo .show-password-input::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid currentColor;
	border-radius: 50% / 60%;
}

.gm-ac-woo .show-password-input::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 8px;
	width: 8px;
	height: 8px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.gm-ac-woo .show-password-input.display-password {
	color: var(--gm-racing);
}

.gm-ac-woo input[type="text"],
.gm-ac-woo input[type="email"],
.gm-ac-woo input[type="tel"],
.gm-ac-woo input[type="password"],
.gm-ac-woo select,
.gm-ac-woo textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--gm-border-strong);
	border-radius: 10px;
	background: var(--gm-surface);
	font: inherit;
}

.gm-ac-woo input:focus,
.gm-ac-woo select:focus,
.gm-ac-woo textarea:focus {
	outline: 2px solid var(--gm-racing);
	outline-offset: 1px;
}

.gm-ac-woo .button,
.gm-ac-woo button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 2px solid var(--gm-racing);
	border-radius: 999px;
	background: var(--gm-racing);
	font: inherit;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.gm-ac-woo .button:hover,
.gm-ac-woo button[type="submit"]:hover {
	background: var(--gm-racing-strong);
	border-color: var(--gm-racing-strong);
	color: #fff;
}

.gm-ac-woo table {
	width: 100%;
	border-collapse: collapse;
}

.gm-ac-woo table th,
.gm-ac-woo table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--gm-border);
	text-align: left;
}

/* ========================================================================== */
/* Mobile                                                                     */
/* ========================================================================== */

@media (max-width: 860px) {
	.gm-ac-actions {
		grid-template-columns: 1fr;
	}

	.gm-ac-action {
		justify-content: flex-start;
		min-height: 56px;
		padding: 16px 18px;
	}

	/* Les tableaux deviennent des blocs : à 360 px, trois colonnes ne tiennent
	   pas, et une barre de défilement horizontale perd tout le monde. */
	.gm-ac-list__item,
	.gm-ac-voucher,
	.gm-ac-order {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 10px;
	}

	.gm-ac-when {
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
	}

	.gm-ac-order__total,
	.gm-ac-chip {
		justify-self: start;
	}

	/*
	 * Une chose à faire, d'un seul bloc serré.
	 *
	 * En colonne, la base de 220 px de l'intitulé devenait une hauteur : chaque
	 * titre traînait un vide de deux cents pixels avant son bouton. L'intitulé
	 * ne prend plus que ce qu'il contient, et les écarts se resserrent.
	 */
	.gm-ac-todo__item {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
		padding: 14px 0;
	}

	.gm-ac-todo__id {
		flex: 0 0 auto;
	}

	/* Les deux chiffres se partagent la largeur, sous le titre qu'ils
	   commentent. */
	.gm-ac-todo__item > .gm-ac-plan__state {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding: 10px 14px;
	}

	/* Le trait de la ligne sépare déjà : l'échéancier n'en ajoute pas un
	   second juste sous le bouton. */
	.gm-ac-todo__item--plan > .gm-ac-plan {
		padding-top: 0;
		border-top: 0;
	}

	.gm-ac-btn {
		width: 100%;
	}

	.gm-ac-row-actions .gm-ac-btn {
		width: auto;
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------- */
/* Payer en plusieurs fois                                                */
/* ---------------------------------------------------------------------- */

/*
 * Replié par défaut, mais lisible une fois ouvert.
 *
 * La plupart des clients règlent d'un coup : déployé, le formulaire ferait de
 * l'échéancier la voie normale. Ouvert, en revanche, il doit répondre d'un
 * regard à la seule question qu'on se pose — où en suis-je ?
 */
/*
 * Toute la largeur de la ligne, et non une colonne de plus.
 *
 * `.gm-ac-order` est une grille ; `flex: 1 1 100%` n'y veut rien dire, et ces
 * deux blocs se rangeaient dans les colonnes du montant et du bouton. Au
 * téléphone, le formulaire de versement finissait dans une bande de six
 * caractères de large.
 */
.gm-ac-plan,
.gm-ac-plan__state {
	grid-column: 1 / -1;
}

.gm-ac-plan {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--gm-border, #e3e3e9);
}

.gm-ac-plan__summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--gm-racing, #e4003a);
	cursor: pointer;
	list-style: none;
}

.gm-ac-plan__summary::-webkit-details-marker {
	display: none;
}

.gm-ac-plan__summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.875rem;
	line-height: 1;
}

.gm-ac-plan[open] .gm-ac-plan__summary::before {
	content: "\2212";
}

.gm-ac-plan__body {
	margin-top: 16px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--gm-surface-alt, #eef1f7);
}

/*
 * Les deux chiffres qui répondent à la question, côte à côte et grands.
 *
 * Posés sur la ligne de commande et non dans le dépliant : « combien ai-je
 * déjà réglé » est la première question de quiconque revient sur cette page,
 * et elle ne doit pas se mériter par un clic.
 */
.gm-ac-plan__state {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin: 14px 0 0;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--gm-surface-alt, #eef1f7);
}

.gm-ac-plan__fig {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gm-ac-plan__figlabel {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gm-smoke, #6b6b76);
}

/*
 * Deux chiffres, deux couleurs, et le même alphabet que le reste du site.
 *
 * Ce qui est versé est acquis, ce qui reste est à faire : le vert et le rouge
 * disent en un regard ce que deux montants noirs côte à côte obligeaient à
 * lire deux fois.
 */
.gm-ac-plan__figval {
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--gm-chalk, #10131c);
	font-variant-numeric: tabular-nums;
}

.gm-ac-plan__figval.is-ok {
	color: var(--gm-ok);
}

.gm-ac-plan__figval.is-due {
	color: var(--gm-racing);
}

.gm-ac-plan__label {
	display: block;
	margin: 0 0 8px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gm-smoke, #6b6b76);
}

.gm-ac-plan__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* L'euro vit dans le champ : un montant sans unité se saisit en hésitant. */
.gm-ac-plan__money {
	position: relative;
	flex: 0 1 160px;
}

.gm-ac-plan__input {
	width: 100%;
	padding: 12px 34px 12px 14px;
	border: 1px solid var(--gm-border, #d8d8de);
	border-radius: 12px;
	background: #fff;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 700;
}

.gm-ac-plan__input:focus {
	outline: 2px solid var(--gm-racing, #e4003a);
	outline-offset: 1px;
}

.gm-ac-plan__unit {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--gm-smoke, #6b6b76);
	pointer-events: none;
}

.gm-ac-plan__hint {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--gm-smoke, #6b6b76);
}

/* Le refus vient du serveur : il doit se voir sans être agressif. */
.gm-ac-alert {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 3px solid #c0392b;
	border-radius: 0 10px 10px 0;
	background: rgba(192, 57, 43, 0.07);
	font-size: 0.875rem;
	color: #8e2a20;
}

/* ---------------------------------------------------------------------- */
/* Un achat et ce qui s'y rattache                                        */
/* ---------------------------------------------------------------------- */

/*
 * Chaque achat est une carte.
 *
 * Solde et versements se lisaient comme des achats séparés : on comptait trois
 * stages pour un seul. Un retrait ne suffisait pas — rien ne disait où un
 * groupe commençait ni où il finissait. La carte, elle, se voit.
 */
.gm-ac-groups {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-ac-group {
	border: 1px solid var(--gm-border);
	border-radius: 16px;
	background: var(--gm-surface, #fff);
}

/*
 * Le résumé, qui tient lieu de titre et de bouton.
 *
 * Il porte ce qu'on vient chercher — l'offre, la date, l'état, le montant —
 * pour qu'un client qui compte dix achats n'ait pas à tous les déplier pour
 * retrouver le sien.
 */
.gm-ac-group__head {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 6px 14px;
	padding: 16px 18px 16px 42px;
	position: relative;
	cursor: pointer;
	list-style: none;
}

.gm-ac-group__head::-webkit-details-marker {
	display: none;
}

/* Le chevron, dessiné plutôt qu'écrit : une police peut manquer, pas une
   bordure. */
.gm-ac-group__head::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 18px;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--gm-smoke);
	border-bottom: 2px solid var(--gm-smoke);
	transform: translateY(-70%) rotate(-45deg);
	transition: transform 0.2s ease;
}

.gm-ac-group[open] > .gm-ac-group__head::before {
	transform: translateY(-30%) rotate(45deg);
}

.gm-ac-group__head:hover::before {
	border-color: var(--gm-racing);
}

/*
 * Les quatre cases, placées et non devinées.
 *
 * Laissée au placement automatique, la pastille d'état se rangeait sur la
 * ligne du produit et non sur celle du numéro : l'écart se voyait, sans qu'on
 * sache d'où il venait. L'état et le montant enjambent les deux lignes et se
 * centrent dessus.
 */
.gm-ac-group__title {
	grid-area: 1 / 1;
	font-weight: 600;
	line-height: 1.35;
}

.gm-ac-group__prod {
	grid-area: 2 / 1;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--gm-smoke);
}

.gm-ac-group__head .gm-ac-chip {
	grid-column: 2;
	grid-row: 1 / 3;
}

.gm-ac-group__total {
	grid-column: 3;
	grid-row: 1 / 3;
	font-weight: 700;
	white-space: nowrap;
}

.gm-ac-group__body {
	padding: 0 18px 14px;
	border-top: 1px solid var(--gm-border);
}

.gm-ac-group .gm-ac-order.is-head {
	border-bottom: 0;
}

/*
 * Le titre est déjà dans le résumé.
 *
 * Le répéter juste en dessous ferait lire deux fois la même ligne à l'ouverture
 * — on ne garde que la date, qui ancre la commande dans le temps.
 */
.gm-ac-group__body .gm-ac-order.is-head .gm-ac-order__num {
	display: none;
}

/*
 * Au téléphone, le résumé tient en quatre cases.
 *
 * Trois colonnes sur 340 px laissaient l'état flotter au milieu d'un vide et
 * repoussaient « Commande n° 12909 » sur deux lignes, pendant que le chevron
 * et deux retraits emboîtés mangeaient cinquante pixels à gauche. Le numéro et
 * l'état se partagent la première ligne, le produit et le montant la seconde,
 * et plus rien ne se replie faute de place.
 */
@media (max-width: 680px) {
	.gm-ac-group__head {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 3px 10px;
		padding: 12px 12px 12px 30px;
	}

	.gm-ac-group__head::before {
		left: 12px;
	}

	.gm-ac-group__title {
		grid-area: 1 / 1;
		font-size: 0.9375rem;
	}

	.gm-ac-group__head .gm-ac-chip {
		grid-area: 1 / 2;
	}

	.gm-ac-group__prod {
		grid-area: 2 / 1;
	}

	.gm-ac-group__total {
		grid-area: 2 / 2;
		text-align: right;
	}
}

/*
 * La zone des commandes liées, en retrait et sur fond atténué.
 *
 * Le fond fait plus que le trait : il dit « ceci appartient à ce qui précède »
 * sans qu'on ait à suivre un alignement des yeux.
 */
.gm-ac-group__tied {
	margin-top: 4px;
	padding: 4px 16px 6px;
	border-radius: 12px;
	background: var(--gm-surface-alt, #eef1f7);
}

.gm-ac-group__tiedtitle {
	margin: 10px 0 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gm-smoke);
}

.gm-ac-group__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-ac-group__sub .gm-ac-order {
	border-bottom-color: rgba(13, 18, 32, 0.08);
}

/*
 * Au téléphone, quatre colonnes deviennent quatre colonnes illisibles.
 *
 * L'intitulé prend la largeur, l'état et le montant se rangent sous lui, et le
 * bouton tient toute la ligne — on le vise au pouce.
 */
@media (max-width: 680px) {
	.gm-ac-order {
		grid-template-columns: 1fr auto;
		gap: 10px 12px;
	}

	.gm-ac-order__id {
		grid-column: 1 / -1;
	}

	.gm-ac-order .gm-ac-row-actions {
		grid-column: 1 / -1;
	}

	.gm-ac-order .gm-ac-row-actions .gm-ac-btn {
		display: block;
		text-align: center;
	}

	/*
	 * Plus de retrait sur la carte elle-même.
	 *
	 * Le résumé, le corps et les lignes rattachées portent déjà chacun leur
	 * marge : celle-ci s'y ajoutait, et le contenu se retrouvait à cinquante
	 * pixels du bord sur un écran qui en fait trois cent quarante.
	 */
	.gm-ac-group__body {
		padding: 0 12px 10px;
	}

	.gm-ac-group__tied {
		padding-inline: 10px;
	}

	/* Une carte par achat tient déjà les achats séparés : l'écart peut se
	   resserrer sans qu'on les confonde. */
	.gm-ac-groups {
		gap: 10px;
	}

	.gm-ac-card {
		padding: 16px 14px;
	}

	.gm-ac-card .gm-ac-h2 {
		margin-bottom: 12px;
	}
}

/* ==========================================================================
 * L'habillage d'octobre 2026 — la bande, les gestes, le menu, les compteurs.
 *
 * Écrit à la suite, et préfixé de `.gm-account` : chaque règle pèse un cran
 * de plus que celle qu'elle remplace, sans toucher au reste de la feuille.
 * La carte du prochain stage et « À faire » ne sont pas concernées.
 * ========================================================================== */

.gm-account {
	--gm-wide: "Saira", "Arial Black", sans-serif;
	--gm-night: #0b0f19;
	/* La bande déborde de l'espace pour prendre toute la largeur : rien ne
	   doit plus la rogner. */
	overflow: visible;
	border-radius: 0;
}

/* La flèche ronde, cerclée de rouge. */
.gm-account .gm-ac-go {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	border-radius: 50%;
	background: rgba(11, 15, 25, 0.55);
	box-shadow: inset 0 0 0 1.5px var(--gm-racing);
	color: #fff;
	transform: none;
	transition: background 0.2s var(--gm-ease);
}

.gm-account .gm-ac-go svg {
	width: 18px;
	height: 18px;
}

/* ------------------------------------------------------------- La bande */

.gm-account .gm-ac-hero {
	position: relative;
	overflow: hidden;
	/* Toute la largeur de l'écran ; compte.js corrige au pixel près (la
	   barre de défilement compte dans 100vw). */
	margin: 0 calc(50% - 50vw) 28px;
	padding: 0;
	border-radius: 0;
	background: var(--gm-night);
}

/* Sur grand écran, la photo couvre toute la bande, gestes compris. */
.gm-account .gm-ac-hero__top {
	position: static;
}

/* Le contenu, lui, reste dans la largeur de l'espace. */
.gm-account .gm-ac-hero__wrap {
	position: relative;
	max-width: var(--gm-account-width, 1200px);
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.gm-account .gm-ac-hero::after {
	display: none;
}

/* La photo et son voile : deux frères, sans z-index. */
.gm-account .gm-ac-hero__photo,
.gm-account .gm-ac-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.gm-account .gm-ac-hero__photo {
	background-position: 60% 30%;
	background-size: cover;
	background-repeat: no-repeat;
}

.gm-account .gm-ac-hero__veil {
	background:
		linear-gradient(90deg, rgba(8, 10, 16, 0.95) 0%, rgba(8, 10, 16, 0.75) 38%, rgba(8, 10, 16, 0.2) 70%, rgba(8, 10, 16, 0.45) 100%),
		linear-gradient(0deg, rgba(8, 10, 16, 0.85), transparent 55%);
}

.gm-account .gm-ac-hero__inner {
	position: relative;
	flex-wrap: nowrap;
	gap: 32px;
	padding: 44px 0 28px;
}

.gm-account .gm-ac-hero .gm-ac-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: #fff;
}

.gm-account .gm-ac-hero .gm-ac-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--gm-racing);
}

.gm-account .gm-ac-hero .gm-ac-h1 {
	margin: 12px 0 14px;
	font-family: var(--gm-wide);
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1;
	color: #fff;
}

.gm-account .gm-ac-h1 span {
	color: var(--gm-racing);
}

.gm-account .gm-ac-hero__lede {
	max-width: 400px;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
}

/* Le solde dû : un panneau de verre. */
.gm-account .gm-ac-du {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	align-items: center;
	flex: 0 0 300px;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	background: rgba(11, 15, 25, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	box-shadow: none;
}

.gm-account .gm-ac-du__icon svg {
	display: block;
	width: 28px;
	height: 28px;
}

.gm-account .gm-ac-du__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.gm-account .gm-ac-du__val {
	margin: 2px 0 0;
	font-family: var(--gm-wide);
	font-size: 1.75rem;
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1.1;
	color: #fff;
}

.gm-account .gm-ac-du__btn {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	padding: 13px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--gm-racing);
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(225, 29, 72, 0.9);
	transition: background 0.2s var(--gm-ease);
}

.gm-account .gm-ac-du__btn:hover,
.gm-account .gm-ac-du__btn:focus-visible {
	background: var(--gm-racing-strong);
}

.gm-account .gm-ac-du__btn svg {
	width: 18px;
	height: 18px;
}

.gm-account .gm-ac-du__go {
	display: none;
}

/* Sans dette, la déconnexion prend le coin. */
.gm-account .gm-ac-out {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	padding: 16px 20px;
	border: 1px solid rgba(225, 29, 72, 0.7);
	border-radius: 12px;
	background: rgba(11, 15, 25, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-weight: 600;
}

.gm-account .gm-ac-out__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.gm-account .gm-ac-out svg {
	width: 18px;
	height: 18px;
}

/* ------------------------------------------- Les trois gestes, dans la bande */

.gm-account .gm-ac-hero .gm-ac-actions {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0 0 40px;
}

.gm-account .gm-ac-action {
	position: relative;
	overflow: hidden;
	justify-content: flex-start;
	gap: 18px;
	min-height: 96px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 3px solid var(--gm-racing);
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(14, 18, 28, 0.92), rgba(14, 18, 28, 0.7));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	text-align: left;
	box-shadow: none;
	transition: transform 0.25s var(--gm-ease);
}

/* Chaque geste garde sa teinte, en dégradé. */
.gm-account .gm-ac-action--reserver {
	background: linear-gradient(90deg, rgba(120, 8, 30, 0.92) 0%, rgba(150, 14, 46, 0.72) 55%, rgba(40, 6, 14, 0.6));
}

.gm-account .gm-ac-action--activer {
	background: linear-gradient(90deg, rgba(10, 18, 36, 0.94) 0%, rgba(18, 34, 66, 0.72) 60%, rgba(10, 16, 30, 0.6));
}

.gm-account .gm-ac-action--offrir {
	background: linear-gradient(90deg, rgba(22, 14, 10, 0.94) 0%, rgba(56, 30, 14, 0.7) 60%, rgba(20, 12, 8, 0.6));
}

.gm-account .gm-ac-action:hover,
.gm-account .gm-ac-action:focus-visible {
	transform: translateY(-2px);
	box-shadow: none;
	color: #fff;
}

.gm-account .gm-ac-action:hover .gm-ac-go,
.gm-account .gm-ac-action:focus-visible .gm-ac-go {
	background: var(--gm-racing);
}

.gm-account .gm-ac-action__pic {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	color: var(--gm-racing);
}

.gm-account .gm-ac-action--reserver .gm-ac-action__pic {
	color: #fff;
}

.gm-account .gm-ac-action__pic svg {
	display: block;
	width: 32px;
	height: 32px;
}

.gm-account .gm-ac-action__txt strong {
	display: block;
	font-family: var(--gm-wide);
	font-size: 1rem;
	font-weight: 700;
	font-stretch: 112%;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.gm-account .gm-ac-action__txt small {
	display: block;
	margin-top: 4px;
	font-size: 0.8125rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------- Le menu */

.gm-account .gm-ac-shell {
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 24px;
}

.gm-account .gm-ac-nav {
	top: 24px;
	padding: 22px 16px;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(13, 18, 32, 0.05), 0 18px 40px -26px rgba(13, 18, 32, 0.4);
}

.gm-account .gm-ac-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px 14px;
}

.gm-account .gm-ac-nav__title {
	margin: 0;
	font-family: var(--gm-wide);
	font-size: 0.875rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gm-chalk);
}

.gm-account .gm-ac-nav__all {
	display: none;
}

.gm-account .gm-ac-nav__list,
.gm-account .gm-ac-nav__low {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gm-account .gm-ac-nav__link {
	gap: 14px;
	padding: 13px 14px;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 500;
}

.gm-account .gm-ac-nav__link + .gm-ac-nav__link {
	margin-top: 0;
}

.gm-account .gm-ac-nav__link.is-on {
	box-shadow: 0 12px 24px -14px rgba(225, 29, 72, 0.9);
}

.gm-account .gm-ac-nav__link.is-on .gm-ac-nav__go {
	display: none;
}

.gm-account .gm-ac-nav__rule {
	margin: 12px 8px;
}

/* ------------------------------------------------------- Les compteurs */

.gm-account .gm-ac-tile {
	gap: 16px;
	min-height: 108px;
	padding: 20px;
	border: 0;
	border-radius: 14px;
	background:
		radial-gradient(60% 110% at 100% 100%, rgba(225, 29, 72, 0.32), transparent 62%),
		linear-gradient(135deg, #151b2b, #0b0f19 70%);
}

.gm-account .gm-ac-tile::before,
.gm-account .gm-ac-tile::after {
	display: none;
}

.gm-account .gm-ac-tile:hover .gm-ac-go,
.gm-account .gm-ac-tile:focus-visible .gm-ac-go {
	background: var(--gm-racing);
	transform: none;
}

.gm-account .gm-ac-tile__icon {
	width: 52px;
	height: 52px;
	border-color: rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}

.gm-account .gm-ac-tile__icon svg {
	width: 26px;
	height: 26px;
}

.gm-account .gm-ac-tile strong {
	font-family: var(--gm-wide);
	font-size: 2.1rem;
	font-weight: 800;
}

.gm-account .gm-ac-tile small {
	margin-top: 4px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------- À faire */

.gm-account .gm-ac-card--faire {
	padding: 26px 28px;
	border: 0;
	border-radius: 16px;
	background: var(--gm-surface);
	box-shadow: 0 1px 2px rgba(13, 18, 32, 0.05), 0 18px 40px -26px rgba(13, 18, 32, 0.4);
}

.gm-account .gm-ac-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.gm-account .gm-ac-card--faire .gm-ac-h2 {
	margin: 0;
	font-family: var(--gm-wide);
	font-size: 1.125rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: 0.02em;
}

.gm-account .gm-ac-count {
	padding: 2px 10px;
	border-radius: 999px;
	background: #fdecef;
	color: var(--gm-racing);
	font-size: 0.75rem;
	font-weight: 700;
}

/* Un point devant chaque ligne : rouge quand ça presse. */
.gm-account .gm-ac-card--faire .gm-ac-todo__item {
	position: relative;
	padding-left: 26px;
	border-bottom: 0;
	border-top: 1px solid var(--gm-border);
}

.gm-account .gm-ac-card--faire .gm-ac-todo__item:first-child {
	border-top: 0;
}

.gm-account .gm-ac-todo__dot {
	position: absolute;
	top: 22px;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #c9ced8;
}

.gm-account .gm-ac-todo__dot.is-urgent {
	background: var(--gm-racing);
	box-shadow: 0 0 0 4px #fdecef;
}

.gm-account .gm-ac-card--faire .gm-ac-todo__title {
	font-weight: 700;
}

.gm-account .gm-ac-card--faire .gm-ac-todo__note.is-urgent {
	font-weight: 500;
}

/* Les boutons de ligne : sombres et carrés, le rouge au survol. */
.gm-account .gm-ac-card--faire .gm-ac-btn {
	padding: 11px 16px;
	border: 0;
	border-radius: 10px;
	background: var(--gm-chalk);
	font-size: 0.8125rem;
	font-weight: 600;
}

.gm-account .gm-ac-card--faire .gm-ac-btn:hover,
.gm-account .gm-ac-card--faire .gm-ac-btn:focus-visible {
	background: var(--gm-racing);
	color: #fff;
}

/* ---------------------------------------------- Les volets, sans cadre */

/*
 * Un volet n'est plus une carte posée dans la colonne.
 *
 * Ses éléments sont déjà des cartes (les commandes, et désormais chaque
 * réservation) : un second cadre autour d'eux mangeait la largeur, surtout au
 * téléphone. « À faire » et les stages passés (un accordéon) gardent le leur.
 */
.gm-account .gm-ac-vue > .gm-ac-card:not(.gm-ac-card--faire):not(.gm-ac-card--fold) {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Chaque réservation, sa carte — comme les commandes. */
.gm-account .gm-ac-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gm-account .gm-ac-list__item,
.gm-account .gm-ac-list__item:last-child {
	grid-template-columns: 170px minmax(0, 1fr);
	grid-template-areas:
		"when what"
		"act  act";
	align-items: center;
	gap: 4px 24px;
	padding: 18px 22px 14px;
	border: 1px solid var(--gm-border);
	border-radius: 16px;
	background: var(--gm-surface);
}

/*
 * La carte, ramassée : la date et le stage sur une ligne, les gestes dessous.
 *
 * Sur la même ligne, les trois boutons ne laissaient au nom du stage qu'une
 * colonne étroite, où il se pliait en trois — et les marges que le thème
 * donne à chaque paragraphe gonflaient encore la carte.
 */
.gm-account .gm-ac-list__item p {
	margin: 0;
	line-height: 1.4;
}

.gm-account .gm-ac-list__item > .gm-ac-when {
	grid-area: when;
}

.gm-account .gm-ac-list__item > .gm-ac-what {
	grid-area: what;
}

.gm-account .gm-ac-what__title {
	font-size: 1rem;
	font-weight: 600;
}

.gm-account .gm-ac-what__ref {
	margin-top: 2px;
	font-size: 0.8125rem;
	color: var(--gm-smoke);
}

.gm-account .gm-ac-list__item > .gm-ac-row-actions {
	grid-area: act;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--gm-border);
}

.gm-account .gm-ac-list__item .gm-ac-btn {
	padding: 9px 16px;
	font-size: 0.8125rem;
}

/* La mention « présence confirmée » ouvre la ligne des gestes, à gauche. */
.gm-account .gm-ac-list__item .gm-ac-chip {
	margin-right: auto;
}

/*
 * Les onglets du menu, à plat.
 *
 * Le thème donne à tous les boutons du site une ombre et un fond : chaque
 * onglet sortait en relief, comme une carte. Le sélecteur est doublé et
 * l'ombre forcée, pour la même raison que les liens plus haut.
 */
@media (min-width: 861px) {
	.gm-account.gm-account .gm-ac-nav__link:not(.is-on) {
		border: 0 !important;
		background: transparent;
		box-shadow: none !important;
	}

	.gm-account.gm-account .gm-ac-nav__link:not(.is-on):hover,
	.gm-account.gm-account .gm-ac-nav__link:not(.is-on):focus-visible {
		background: var(--gm-surface-alt);
	}
}

/* ---------------------------------------------------------- Téléphone */

@media (max-width: 860px) {
	/* La bande, bord à bord, en haut de l'écran. */
	/* Le fond sombre ne couvre que le haut ; les gestes passent dessous. */
	.gm-account .gm-ac-hero {
		margin-bottom: 22px;
		background: none;
	}

	.gm-account .gm-ac-hero__top {
		position: relative;
		background: var(--gm-night);
	}

	.gm-account .gm-ac-hero__wrap {
		padding: 0 18px;
	}

	.gm-account .gm-ac-hero__acts {
		padding: 0 12px;
	}

	.gm-account .gm-ac-hero__photo {
		background-position: 74% 50%;
	}

	.gm-account .gm-ac-hero__veil {
		background:
			linear-gradient(90deg, rgba(8, 10, 16, 0.92) 0%, rgba(8, 10, 16, 0.55) 60%, rgba(8, 10, 16, 0.2)),
			linear-gradient(0deg, rgba(8, 10, 16, 0.85), transparent 55%);
	}

	.gm-account .gm-ac-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		padding: 30px 0 22px;
	}

	.gm-account .gm-ac-hero .gm-ac-eyebrow {
		font-size: 0.6875rem;
	}

	.gm-account .gm-ac-hero .gm-ac-h1 {
		margin: 10px 0;
		font-size: 2.5rem;
	}

	.gm-account .gm-ac-h1 span {
		display: block;
	}

	.gm-account .gm-ac-hero__lede {
		max-width: 240px;
		font-size: 0.875rem;
	}

	/* Le solde : une pastille de verre ; le bouton la couvre entière. */
	.gm-account .gm-ac-du {
		align-self: flex-end;
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
		grid-template-columns: auto auto auto;
		gap: 0 12px;
		padding: 12px 14px;
	}

	.gm-account .gm-ac-du__icon svg {
		width: 24px;
		height: 24px;
	}

	.gm-account .gm-ac-du__label {
		font-size: 0.625rem;
	}

	.gm-account .gm-ac-du__val {
		font-size: 1.35rem;
	}

	.gm-account .gm-ac-du__btn {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		border-radius: 14px;
		background: transparent;
		box-shadow: none;
		font-size: 0;
		color: transparent;
	}

	.gm-account .gm-ac-du__btn:hover,
	.gm-account .gm-ac-du__btn:focus-visible {
		background: rgba(255, 255, 255, 0.04);
	}

	.gm-account .gm-ac-du__btn svg {
		display: none;
	}

	.gm-account .gm-ac-du__go {
		display: block;
		margin-left: 6px;
	}

	.gm-account .gm-ac-du__go svg {
		display: block;
		width: 18px;
		height: 18px;
	}

	.gm-account .gm-ac-out {
		align-self: flex-end;
		padding: 10px 14px;
	}

	/* Les trois gestes : sous la bande, un par ligne. */
	.gm-account .gm-ac-hero .gm-ac-actions {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 16px 0 0;
	}

	.gm-account .gm-ac-action {
		gap: 16px;
		min-height: 0;
		padding: 16px 16px 16px 18px;
		border-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: 0 1px 2px rgba(13, 18, 32, 0.05), 0 14px 30px -20px rgba(13, 18, 32, 0.6);
	}

	/* Hors de la photo, les dégradés reprennent toute leur opacité. */
	.gm-account .gm-ac-action--reserver {
		background: linear-gradient(90deg, #7a0820 0%, #9a0f30 55%, #3c0a14);
	}

	.gm-account .gm-ac-action--activer {
		background: linear-gradient(90deg, #0a1224 0%, #142a52 60%, #0c1428);
	}

	.gm-account .gm-ac-action--offrir {
		background: linear-gradient(90deg, #160e0a 0%, #3a2010 60%, #140c08);
	}

	.gm-account .gm-ac-action__pic svg {
		width: 28px;
		height: 28px;
	}

	.gm-account .gm-ac-action__txt {
		flex: 1;
		min-width: 0;
	}

	.gm-account .gm-ac-action__txt strong {
		font-size: 0.9375rem;
	}

	.gm-account .gm-ac-action .gm-ac-go {
		width: 36px;
		height: 36px;
	}

	/* Le menu : quatre cartes, puis le compte et la déconnexion en ligne. */
	.gm-account .gm-ac-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		margin: 0 12px;
	}

	.gm-account .gm-ac-nav {
		display: block;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.gm-account .gm-ac-nav__head {
		padding: 0 2px 12px;
	}

	.gm-account .gm-ac-nav__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__link {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		min-height: 96px;
		padding: 12px 10px;
		border-radius: 12px;
		background: var(--gm-surface);
		font-size: 0.8125rem;
		line-height: 1.25;
		box-shadow: 0 1px 2px rgba(13, 18, 32, 0.05), 0 12px 26px -20px rgba(13, 18, 32, 0.45);
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__link.is-on {
		background: var(--gm-racing);
		color: #fff;
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__link svg {
		width: 22px;
		height: 22px;
		color: var(--gm-chalk);
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__link.is-on svg {
		color: #fff;
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__link > span {
		flex: none;
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__link em {
		position: absolute;
		top: 10px;
		right: 8px;
		margin: 0;
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__go {
		display: none;
	}

	.gm-account .gm-ac-nav__rule {
		display: none;
	}

	.gm-account .gm-ac-nav__low {
		flex-direction: row;
		justify-content: flex-end;
		gap: 4px;
		margin-top: 6px;
	}

	.gm-account .gm-ac-nav__low .gm-ac-nav__link {
		width: auto;
		padding: 8px 10px;
		font-size: 0.8125rem;
	}

	.gm-account .gm-ac-nav__low .gm-ac-nav__link > span {
		flex: none;
	}

	.gm-account .gm-ac-nav__low .gm-ac-nav__go {
		display: none;
	}

	.gm-account .gm-ac-card--faire {
		padding: 20px 18px;
	}

	.gm-account .gm-ac-list {
		gap: 10px;
	}

	.gm-account .gm-ac-list__item,
	.gm-account .gm-ac-list__item:last-child {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"when"
			"what"
			"act";
		gap: 6px;
		padding: 16px 16px 14px;
	}

	.gm-account .gm-ac-list__item > .gm-ac-row-actions {
		justify-content: stretch;
	}

	.gm-account .gm-ac-list__item .gm-ac-chip {
		flex: 1 1 100%;
		margin-right: 0;
		text-align: center;
	}

	.gm-account .gm-ac-todo__dot {
		top: 20px;
	}

	/* Les compteurs : trois sur une ligne. */
	.gm-account .gm-ac-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin-bottom: 14px;
	}

	.gm-account .gm-ac-tile {
		flex-wrap: wrap;
		gap: 8px;
		min-height: 0;
		padding: 12px 10px;
		border-radius: 12px;
	}

	.gm-account .gm-ac-tile__icon {
		width: auto;
		height: auto;
		border: 0;
		background: none;
	}

	.gm-account .gm-ac-tile__icon svg {
		width: 24px;
		height: 24px;
	}

	.gm-account .gm-ac-tile__text {
		flex: 1 1 60%;
	}

	.gm-account .gm-ac-tile strong {
		font-size: 1.6rem;
	}

	.gm-account .gm-ac-tile small {
		font-size: 0.6875rem;
		line-height: 1.3;
	}

	.gm-account .gm-ac-tile .gm-ac-go {
		display: flex;
		width: 28px;
		height: 28px;
	}

	.gm-account .gm-ac-tile .gm-ac-go svg {
		width: 14px;
		height: 14px;
	}
}

/* Au plus étroit : deux cartes de menu par rang, et les compteurs en colonne. */
@media (max-width: 400px) {
	.gm-account .gm-ac-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gm-account .gm-ac-nav__list .gm-ac-nav__link {
		min-height: 80px;
	}

	.gm-account .gm-ac-tile {
		flex-direction: column;
		align-items: flex-start;
	}

	.gm-account .gm-ac-tile .gm-ac-go {
		position: absolute;
		top: 10px;
		right: 10px;
	}
}

/* -- Première connexion après un achat en caisse (1.1.16). */
.gm-ac-first {
	max-width: 420px;
	margin: 18px auto 0;
	text-align: left;
}

.gm-ac-first p {
	margin: 0 0 14px;
}

.gm-ac-first input[readonly] {
	background: var(--gm-surface-alt, #f4f6fa);
	color: var(--gm-smoke, #525b6b);
}

.gm-ac-first .gm-ac-btn {
	width: 100%;
	justify-content: center;
}

/* Boutons du plugin : jamais soulignés, quel que soit le thème (1.2.27).
   Le kit Elementor souligne tous les liens, plus fort que nos classes. */
:is(a, button):is([class^="gm"], [class*=" gm"]):is([class*="btn"], [class*="cta"], [class*="button"]),
:is(a, button):is([class^="gm"], [class*=" gm"]):is([class*="btn"], [class*="cta"], [class*="button"]):is(:hover, :focus, :active, :visited),
:is(a, button):is([class^="gm"], [class*=" gm"]):is([class*="btn"], [class*="cta"], [class*="button"]) * {
	text-decoration: none !important;
}

/* =================================================================
 * « Voir et imprimer le bon » (1.2.38) : le bon à taille raisonnable à
 * gauche, le panneau (code, extras, mode d'emploi, actions) à droite.
 * ================================================================= */

.gm-ac-print--v2 .gm-ac-print__bar { margin-bottom: 20px; }

/* Le bon à gauche, à taille raisonnable ; tout ce qu'on en fait à droite. */
.gm-ac-print__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
	gap: 32px;
	align-items: start;
}

.gm-ac-print__visual { margin: 0; }
.gm-ac-print__visual a { display: block; width: fit-content; max-width: 100%; margin: 0 auto; border-radius: 16px; outline-offset: 4px; }
.gm-ac-print--v2 .gm-ac-print__art {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 70vh;
	margin: 0 auto;
	border-radius: 16px;
	box-shadow: 0 24px 50px -28px rgba(13, 18, 32, 0.55);
	transition: transform 0.2s ease;
	cursor: zoom-in;
}
.gm-ac-print__visual a:hover .gm-ac-print__art { transform: translateY(-2px); }
.gm-ac-print__visual figcaption {
	margin-top: 10px;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--gm-smoke, #5b6474);
}

/* Le panneau. */
.gm-ac-print__info {
	position: sticky;
	top: 24px;
	padding: 26px;
	border: 1px solid rgba(13, 18, 32, 0.08);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 40px -30px rgba(13, 18, 32, 0.5);
}
.gm-ac-print--v2 .gm-ac-print__eyebrow { margin: 0 0 6px; }
.gm-ac-print__title {
	margin: 0;
	font-family: var(--gm-font-display, "Anton"), "Arial Narrow", sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
}
.gm-ac-print__incl { margin: 8px 0 0; font-size: 0.875rem; color: var(--gm-smoke, #5b6474); }

.gm-ac-print__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 20px 0 0;
}
.gm-ac-print__facts div { padding: 12px 14px; border-radius: 12px; background: #f4f6fa; }
.gm-ac-print__facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-smoke, #5b6474); }
.gm-ac-print__facts dd { margin: 4px 0 0; font-weight: 600; }

.gm-ac-print__codebox {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 12px;
	margin-top: 14px;
	padding: 14px 14px 14px 16px;
	border: 1.5px dashed rgba(225, 29, 72, 0.5);
	border-radius: 12px;
	background: #fdf2f4;
}
.gm-ac-print__codelabel { grid-column: 1 / -1; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-racing, #e11d48); }
.gm-ac-print__codeval { font: 700 1.375rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.08em; color: #0d1220; background: none; padding: 0; }
.gm-ac-print__copy {
	padding: 8px 14px;
	border: 1px solid rgba(13, 18, 32, 0.15);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}
.gm-ac-print__copy:hover { border-color: #0d1220; }

.gm-ac-print__steps {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: etape;
	display: grid;
	gap: 10px;
}
.gm-ac-print__steps li {
	position: relative;
	padding-left: 34px;
	font-size: 0.875rem;
	line-height: 1.45;
	counter-increment: etape;
}
.gm-ac-print__steps li::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: -1px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #0d1220;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.gm-ac-print__actions { display: grid; gap: 10px; margin-top: 22px; }
.gm-ac-print__actions .gm-ac-btn { width: 100%; justify-content: center; text-align: center; }

/* Les extras du bon. */
.gm-ac-print__extras { margin-top: 16px; }
.gm-ac-print__extrastitle { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-smoke, #5b6474); }
.gm-ac-print__extras ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gm-ac-print__extras li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border-radius: 999px;
	background: #fdecef;
	font-size: 0.8125rem;
	font-weight: 600;
}
.gm-ac-print__extraico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--gm-racing, #e11d48); }
.gm-ac-print__extraico svg { width: 15px; height: 15px; }

/* Tablette et téléphone : le bon d'abord, le panneau dessous. */
@media (max-width: 900px) {
	.gm-ac-print__layout { grid-template-columns: 1fr; gap: 20px; }
	.gm-ac-print__info { position: static; padding: 20px; }
	.gm-ac-print--v2 .gm-ac-print__art { max-height: none; }
	.gm-ac-print__visual figcaption { display: none; }
}

/* À l'impression : le bon seul, pleine largeur. */
@media print {
	.gm-ac-print__info,
	.gm-ac-print__visual figcaption { display: none !important; }
	.gm-ac-print__layout { display: block; }
	.gm-ac-print--v2 .gm-ac-print__art { max-height: none; box-shadow: none; }
}

.gm-ac-print__copy.is-copied { border-color: #16a34a; background: #16a34a; color: #fff; }
.gm-ac-print--v2 .gm-ac-print__card { margin: 0; }