/*
 * GOLDMARKET — modale d'estimation numismatique.
 *
 * Jetons de BRANDBOOK-WEB-GOLDMARKET.md v1.1. Contraste non negociable :
 * #C4913A ne porte JAMAIS de texte sur fond clair (2,7:1). Texte dore sur
 * clair -> #7A5A22. Sur l'aplat dore, texte #1A1814, jamais blanc.
 *
 * Le filet vaut #E7E1D6, valeur reellement deployee sur tout le site. Le
 * brandbook fixe #E5DFD4 : l'ecart est signale, il ne se tranche pas page par
 * page — une seule page alignee creerait un troisieme etat au lieu d'en
 * supprimer un.
 *
 * Zero !important, zero police ajoutee, zero bibliotheque.
 *
 * RUCSS : aucune regle ne porte sur une classe qui n'existerait que dans un
 * etat. Tous les etats passent par un ATTRIBUT — [open], [hidden], [checked],
 * [aria-invalid], [disabled] — sur un element dont la classe est toujours dans
 * le DOM. Rien a inscrire nommement dans la safelist.
 */

.gmne-modale {
	/* Marqueur litteral, motif de rocket_rucss_inline_content_exclusions. */
	--gmne-marqueur: 1;

	--gmne-encre: #1A1814;
	--gmne-clair: #FAFAF8;
	--gmne-creme: #F5F0E8;
	--gmne-filet: #E7E1D6;
	--gmne-or: #C4913A;
	--gmne-or-clair: #E4C48A;
	--gmne-or-fonce: #A97B2E;
	--gmne-or-texte: #7A5A22;
	--gmne-texte: #2A2620;
	--gmne-second: #6E695F;
	--gmne-erreur: #8C4536;
	--gmne-erreur-fond: #F7EDEA;
	--gmne-bord-champ: #D5CFC3;
	--gmne-bord-sombre: #4A4439;
	--gmne-mention: #8A857C;
	--gmne-blanc: #FFFFFF;

	--gmne-display: "Playfair Display", Georgia, serif;
	--gmne-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gmne-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--gmne-dur: 180ms;
	--gmne-ease: cubic-bezier(.4, 0, .2, 1);

	/* Ferme par defaut. Deux ouvertures : [open] avec showModal(), :target sans
	   script — le repli qui ramene le visiteur apres un POST classique. */
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: auto;
	overscroll-behavior: contain;
	background: rgba(26, 24, 20, .68);
	z-index: 10000;
	font: 400 1rem/1.6 var(--gmne-sans);
	color: var(--gmne-texte);
}

.gmne-modale:target,
.gmne-modale[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gmne-modale::backdrop {
	background: rgba(26, 24, 20, .68);
}

.gmne-modale *,
.gmne-modale *::before,
.gmne-modale *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- Le panneau */

.gmne-modale .gmne-panneau {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(640px, 100%);
	max-height: 100%;
	margin: auto;
	background: var(--gmne-clair);
	border: 1px solid var(--gmne-filet);
	border-radius: 4px;
	/* Une seule elevation sur tout le site. */
	box-shadow: 0 1px 2px rgba(26, 24, 20, .06);
}

/* La poignee n'existe que sur la feuille montante ; elle est dans le DOM en
   permanence et ne se montre qu'en dessous de 640 px. */
.gmne-modale .gmne-poignee {
	display: none;
}

/* --------------------------------------------------------------- En-tete */

.gmne-modale .gmne-entete {
	position: relative;
	flex: 0 0 auto;
	padding: 22px 64px 20px 26px;
	background: var(--gmne-encre);
	border-radius: 3px 3px 0 0;
}

.gmne-modale .gmne-surtitre {
	display: block;
	margin: 0 0 6px;
	font: 500 12px/1.3 var(--gmne-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	/* Fond sombre : l'or peut porter du texte ici, 6,1:1 sur #1A1814. */
	color: var(--gmne-or);
}

.gmne-modale .gmne-titre {
	margin: 0;
	font: 400 28px/1.2 var(--gmne-display);
	color: var(--gmne-clair);
	text-wrap: pretty;
}

.gmne-modale .gmne-titre:focus {
	outline: none;
}

/* Pas d'anneau sur les zones d'atterrissage du focus.

   `.gmne-titre`, `.gmne-recap` et `.gmne-fin` portent `tabindex="-1"` : elles
   sont hors de l'ordre de tabulation, donc AUCUNE navigation clavier ne peut
   les atteindre. Le seul focus qu'elles recoivent est celui que le script leur
   donne — a l'ouverture, sur une erreur, ou sur la confirmation — pour que le
   lecteur d'ecran annonce le bon endroit.

   Or Safari iOS fait matcher `:focus-visible` sur ce focus programmatique, la
   ou Chrome ne le fait pas. Signale par le client le 1er septembre 2026 : un
   cadre blanc encadrait « Un expert examine votre piece » a chaque ouverture.
   L'anneau ne protegeait donc aucun usage clavier ; il ne montrait qu'un
   artefact. On le retire, l'annonce vocale reste. */
.gmne-modale .gmne-titre:focus-visible {
	outline: none;
}

.gmne-modale .gmne-x {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--gmne-bord-sombre);
	border-radius: 4px;
	color: var(--gmne-clair);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--gmne-dur) var(--gmne-ease);
}

.gmne-modale .gmne-x:hover {
	background: var(--gmne-bord-sombre);
	color: var(--gmne-clair);
}

.gmne-modale .gmne-x:focus-visible {
	outline: 2px solid var(--gmne-clair);
	outline-offset: 2px;
}

.gmne-modale .gmne-x svg {
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------ Le corps */

.gmne-modale .gmne-corps {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 26px 26px;
}

/* ------------------------------------------ Encadre de la piece concernee */

.gmne-modale .gmne-piece {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 22px;
	padding: 14px 16px;
	background: var(--gmne-creme);
	border: 1px solid var(--gmne-filet);
	border-left: 3px solid var(--gmne-or);
	border-radius: 4px;
}

.gmne-modale .gmne-piece__v {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--gmne-blanc);
}

.gmne-modale .gmne-piece__v img {
	display: block;
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.gmne-modale .gmne-piece__t {
	display: block;
	margin: 0 0 4px;
	font: 500 11px/1.3 var(--gmne-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gmne-or-texte);
}

.gmne-modale .gmne-piece__n {
	margin: 0;
	font: 600 15px/1.35 var(--gmne-sans);
	color: var(--gmne-encre);
}

.gmne-modale .gmne-piece__r {
	display: block;
	margin: 4px 0 0;
	font: 400 13px/1.5 var(--gmne-mono);
	font-variant-numeric: tabular-nums;
	color: var(--gmne-second);
}

/* -------------------------------------------- Recapitulatif des erreurs */

.gmne-modale .gmne-recap {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--gmne-erreur-fond);
	border: 1px solid var(--gmne-erreur);
	border-left: 3px solid var(--gmne-erreur);
	border-radius: 4px;
	font-size: 14px;
	color: var(--gmne-encre);
}

.gmne-modale .gmne-recap:focus {
	outline: none;
}

.gmne-modale .gmne-recap:focus-visible {
	outline: none;
}

.gmne-modale .gmne-recap p {
	margin: 0 0 6px;
	font-weight: 600;
}

.gmne-modale .gmne-recap ul {
	margin: 0;
	padding-left: 20px;
}

.gmne-modale .gmne-recap a {
	color: var(--gmne-erreur);
}

/* ------------------------------------------------------- Echec d'envoi */

.gmne-modale .gmne-echec {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--gmne-erreur-fond);
	border: 1px solid var(--gmne-erreur);
	border-left: 3px solid var(--gmne-erreur);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gmne-encre);
}

.gmne-modale .gmne-echec svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	color: var(--gmne-erreur);
}

.gmne-modale .gmne-echec p {
	margin: 0;
}

.gmne-modale .gmne-echec a {
	color: var(--gmne-erreur);
	font-weight: 600;
}

/* ------------------------------------------------------------- Champs */

.gmne-modale .gmne-fs {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.gmne-modale .gmne-lbl {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	font: 500 12px/1.3 var(--gmne-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gmne-texte);
}

.gmne-modale .gmne-req {
	color: var(--gmne-or-texte);
}

.gmne-modale .gmne-champ {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	min-width: 0;
}

.gmne-modale .gmne-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.gmne-modale .gmne-inp {
	width: 100%;
	height: 46px;
	padding: 10px 14px;
	background: var(--gmne-blanc);
	border: 1px solid var(--gmne-bord-champ);
	border-radius: 2px;
	font: 400 16px/1.4 var(--gmne-sans);
	color: var(--gmne-encre);
	appearance: none;
}

.gmne-modale .gmne-inp--z {
	height: auto;
	min-height: 84px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

.gmne-modale .gmne-inp:focus {
	outline: none;
	border-color: var(--gmne-or-texte);
	box-shadow: 0 0 0 1px var(--gmne-or-texte);
}

/* L'erreur ne se dit jamais par la seule couleur : bordure, icone et texte. */
.gmne-modale .gmne-inp[aria-invalid="true"] {
	border: 1.5px solid var(--gmne-erreur);
}

.gmne-modale .gmne-aide {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gmne-second);
}

.gmne-modale .gmne-err {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--gmne-erreur);
}

.gmne-modale .gmne-err svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

/* ------------------------------------------- Intention : les deux cartes */

.gmne-modale .gmne-cartes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.gmne-modale .gmne-carte {
	display: block;
	margin: 0;
	cursor: pointer;
}

/* Masquage accessible : le bouton radio reste focalisable et annonce.
   Jamais display:none, qui le retirerait de l'arbre d'accessibilite. */
.gmne-modale .gmne-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gmne-modale .gmne-carte__b {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-height: 78px;
	height: 100%;
	padding: 14px 16px;
	background: var(--gmne-blanc);
	border: 1px solid var(--gmne-bord-champ);
	border-radius: 4px;
	transition: border-color var(--gmne-dur) var(--gmne-ease),
		background var(--gmne-dur) var(--gmne-ease);
}

.gmne-modale .gmne-carte:hover .gmne-carte__b {
	border-color: var(--gmne-or-fonce);
}

.gmne-modale .gmne-puce {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 1.5px solid var(--gmne-bord-champ);
	border-radius: 50%;
	background: var(--gmne-blanc);
}

/* Trois marques cumulees sur l'etat choisi : puce remplie, bordure or, fond
   creme. Selecteurs de voisinage : aucune classe conditionnelle, donc rien
   que RUCSS puisse elaguer. */
.gmne-modale .gmne-vh:checked ~ .gmne-carte__b {
	border-color: var(--gmne-or);
	background: var(--gmne-creme);
}

.gmne-modale .gmne-vh:checked ~ .gmne-carte__b .gmne-puce {
	border-color: var(--gmne-or-fonce);
	background: radial-gradient(circle at center, var(--gmne-or-fonce) 0 5px, var(--gmne-blanc) 6px);
}

.gmne-modale .gmne-vh:focus-visible ~ .gmne-carte__b {
	outline: 2px solid var(--gmne-encre);
	outline-offset: 2px;
}

.gmne-modale .gmne-vh[aria-invalid="true"] ~ .gmne-carte__b {
	border: 1.5px solid var(--gmne-erreur);
}

.gmne-modale .gmne-carte__c {
	display: block;
}

.gmne-modale .gmne-carte__c b {
	display: block;
	font: 600 15px/1.35 var(--gmne-sans);
	color: var(--gmne-encre);
}

.gmne-modale .gmne-carte__c small {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gmne-second);
}

/* --------------------------------------------- Etat apparent : pastilles */

.gmne-modale .gmne-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gmne-modale .gmne-pastille {
	display: block;
	margin: 0;
	cursor: pointer;
}

.gmne-modale .gmne-pastille__b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	background: var(--gmne-blanc);
	border: 1px solid var(--gmne-bord-champ);
	border-radius: 4px;
	font: 500 14px/1.2 var(--gmne-sans);
	color: var(--gmne-texte);
	transition: border-color var(--gmne-dur) var(--gmne-ease),
		background var(--gmne-dur) var(--gmne-ease);
}

.gmne-modale .gmne-pastille:hover .gmne-pastille__b {
	border-color: var(--gmne-or-fonce);
}

.gmne-modale .gmne-vh:checked ~ .gmne-pastille__b {
	border-color: var(--gmne-or);
	background: var(--gmne-creme);
	color: var(--gmne-encre);
	font-weight: 700;
}

.gmne-modale .gmne-vh:focus-visible ~ .gmne-pastille__b {
	outline: 2px solid var(--gmne-encre);
	outline-offset: 2px;
}

/* ------------------------------------------------------ Bouton d'envoi */

.gmne-modale .gmne-pied {
	margin-top: 4px;
}

.gmne-modale .gmne-envoi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 54px;
	padding: 0 24px;
	/* Le seul aplat dore de la modale. Encre sur or, jamais blanc sur or. */
	background: var(--gmne-or);
	color: var(--gmne-encre);
	border: 1px solid var(--gmne-or-fonce);
	border-radius: 2px;
	font: 700 16px/1.2 var(--gmne-sans);
	text-align: center;
	cursor: pointer;
	transition: background var(--gmne-dur) var(--gmne-ease);
}

.gmne-modale .gmne-envoi:hover {
	background: var(--gmne-or-fonce);
	color: var(--gmne-encre);
}

.gmne-modale .gmne-envoi:focus-visible {
	outline: 2px solid var(--gmne-clair);
	outline-offset: 2px;
}

/* Envoi en cours : hauteur conservee, aucun saut de mise en page. */
.gmne-modale .gmne-envoi[disabled] {
	background: var(--gmne-or-fonce);
	border-color: var(--gmne-or-fonce);
	color: var(--gmne-encre);
	cursor: default;
}

/* -------------------------------------------------------- Reassurance */

.gmne-modale .gmne-rassure {
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--gmne-filet);
	list-style: none;
}

.gmne-modale .gmne-rassure li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gmne-texte);
}

.gmne-modale .gmne-rassure li:last-child {
	margin-bottom: 0;
}

.gmne-modale .gmne-rassure svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	/* Sur fond clair, l'or de texte est #7A5A22, jamais #C4913A. */
	color: var(--gmne-or-texte);
}

.gmne-modale .gmne-vieprivee {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gmne-mention);
}

.gmne-modale .gmne-vieprivee a {
	color: var(--gmne-or-texte);
	text-underline-offset: 2px;
}

.gmne-modale .gmne-vieprivee a:hover {
	color: var(--gmne-encre);
}

/* ------------------------------------------------------- Confirmation */

.gmne-modale .gmne-fin {
	text-align: center;
	padding: 8px 0 4px;
}

.gmne-modale .gmne-fin:focus {
	outline: none;
}

.gmne-modale .gmne-fin:focus-visible {
	outline: none;
}

.gmne-modale .gmne-fin__c {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 0 14px;
	border: 1.5px solid var(--gmne-or);
	border-radius: 50%;
	color: var(--gmne-or-texte);
}

.gmne-modale .gmne-fin__c svg {
	width: 26px;
	height: 26px;
}

.gmne-modale .gmne-fin__t {
	margin: 0 0 8px;
	font: 400 24px/1.25 var(--gmne-display);
	color: var(--gmne-encre);
}

.gmne-modale .gmne-fin p {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gmne-texte);
}

.gmne-modale .gmne-fin__m {
	font-weight: 600;
	color: var(--gmne-encre);
	overflow-wrap: anywhere;
}

.gmne-modale .gmne-fin__r {
	font-family: var(--gmne-mono);
	font-size: 13px;
	color: var(--gmne-second);
}

.gmne-modale .gmne-sorties {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.gmne-modale .gmne-sortie {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 18px;
	background: var(--gmne-blanc);
	border: 1px solid var(--gmne-encre);
	border-radius: 2px;
	font: 500 15px/1.2 var(--gmne-sans);
	color: var(--gmne-encre);
	text-decoration: none;
	transition: background var(--gmne-dur) var(--gmne-ease);
}

.gmne-modale .gmne-sortie:hover {
	background: var(--gmne-creme);
	color: var(--gmne-encre);
}

.gmne-modale .gmne-sortie:focus-visible {
	outline: 2px solid var(--gmne-encre);
	outline-offset: 2px;
}

.gmne-modale .gmne-sortie svg {
	width: 18px;
	height: 18px;
}

/* ------------------------------------- Garde-fou de fermeture entamee */

.gmne-modale .gmne-quitter {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(26, 24, 20, .72);
	border-radius: 3px;
}

.gmne-modale .gmne-quitter__b {
	width: min(380px, 100%);
	padding: 22px;
	background: var(--gmne-clair);
	border: 1px solid var(--gmne-filet);
	border-radius: 4px;
	text-align: center;
}

.gmne-modale .gmne-quitter__b p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--gmne-texte);
}

.gmne-modale .gmne-quitter__a {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.gmne-modale .gmne-sec {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 16px;
	background: var(--gmne-blanc);
	border: 1px solid var(--gmne-encre);
	border-radius: 2px;
	font: 500 15px/1.2 var(--gmne-sans);
	color: var(--gmne-encre);
	cursor: pointer;
}

.gmne-modale .gmne-sec:hover {
	background: var(--gmne-creme);
}

.gmne-modale .gmne-sec:focus-visible {
	outline: 2px solid var(--gmne-encre);
	outline-offset: 2px;
}

/* ---------------------------------------------------------- Le leurre */

/* Hors flux et hors tabulation, jamais display:none : certains robots ne
   remplissent que ce qui est rendu. */
.gmne-modale .gmne-leurre {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------- Sous 640 px : feuille montante */

@media (max-width: 639px) {

	.gmne-modale:target,
	.gmne-modale[open] {
		align-items: flex-end;
	}

	.gmne-modale .gmne-panneau {
		width: 100%;
		max-height: 92vh;
		margin: 0;
		border-width: 0;
		border-radius: 12px 12px 0 0;
	}

	.gmne-modale .gmne-poignee {
		display: block;
		flex: 0 0 auto;
		width: 36px;
		height: 4px;
		margin: 8px auto 0;
		background: var(--gmne-bord-sombre);
		border-radius: 2px;
	}

	.gmne-modale .gmne-entete {
		padding: 14px 62px 16px 20px;
		border-radius: 12px 12px 0 0;
	}

	.gmne-modale .gmne-titre {
		font-size: 24px;
	}

	.gmne-modale .gmne-x {
		top: 12px;
		right: 12px;
	}

	.gmne-modale .gmne-corps {
		padding: 18px 20px 18px;
	}

	.gmne-modale .gmne-grille,
	.gmne-modale .gmne-cartes,
	.gmne-modale .gmne-sorties {
		grid-template-columns: minmax(0, 1fr);
	}

	.gmne-modale .gmne-inp {
		height: 50px;
	}

	.gmne-modale .gmne-inp--z {
		height: auto;
	}

	/* Le bouton d'envoi colle au pied : centre sur mobile, il sort du champ. */
	.gmne-modale .gmne-pied {
		position: sticky;
		bottom: 0;
		margin: 0 -20px;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--gmne-clair);
		border-top: 1px solid var(--gmne-filet);
	}

	.gmne-modale .gmne-envoi {
		height: 56px;
	}

	.gmne-modale .gmne-delai {
		display: block;
		margin: 8px 0 0;
		font-size: 13px;
		line-height: 1.4;
		text-align: center;
		color: var(--gmne-second);
	}

	/* Etat de confirmation : la feuille montante se recentre.
	   La feuille est ancree en bas pour UNE raison — que le bouton d'envoi
	   collant reste sous le pouce. Une fois la demande partie, ce bouton
	   n'existe plus : l'ancrage ne sert alors qu'a coller un panneau court
	   contre le bord, en laissant du vide au-dessus. On recentre, on arrondit
	   les quatre coins, et on retire la poignee, qui annonce un glissement
	   qui n'a plus lieu d'etre.

	   Le selecteur lit l'etat REEL du DOM (`.gmne-fin` sans `hidden`) plutot
	   qu'une classe posee par le script : le repli sans JavaScript, qui ouvre
	   la modale par `:target` apres le POST, sert exactement le meme HTML et
	   doit obtenir exactement la meme mise en page. Sur un navigateur sans
	   `:has()`, la regle est ignoree et la feuille reste en bas : degradation,
	   pas casse. */
	.gmne-modale:has(.gmne-fin:not([hidden])) {
		align-items: center;
	}

	.gmne-modale:has(.gmne-fin:not([hidden])) .gmne-panneau {
		width: calc(100% - 24px);
		max-height: calc(100% - 48px);
		margin: 0 12px;
		border-radius: 12px;
	}

	.gmne-modale:has(.gmne-fin:not([hidden])) .gmne-entete {
		border-radius: 12px 12px 0 0;
	}

	.gmne-modale:has(.gmne-fin:not([hidden])) .gmne-poignee {
		display: none;
	}
}

/* Le rappel de delai sous le bouton n'est utile qu'a la feuille montante :
   ailleurs, la reassurance le porte deja trois lignes plus bas. */
@media (min-width: 640px) {

	.gmne-modale .gmne-delai {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.gmne-modale * {
		transition: none;
		animation: none;
	}
}

/* En dernier, pour gagner sans !important sur les display: poses au-dessus. */
.gmne-modale [hidden] {
	display: none;
}