/* ==========================================================================
   Configurateur « Je choisis mon gant »
   D'après la maquette fournie par la cliente.

   Deux principes :

   1. Les couleurs et les polices sont des variables, déclarées une fois plus
      bas. La maquette est dans une gamme de bruns chauds qui n'est pas celle du
      site, dont l'accent est l'or #C3943C : c'est un écart assumé, l'or du site
      restant porté par l'en-tête et le bouton « Boutique » qui mène ici.

   2. Aucune police n'est ajoutée. La page charge déjà trois appels à Google
      Fonts, en ajouter un quatrième pour un serif de la même famille visuelle
      serait payer une requête bloquante pour rien. Libre Baskerville, déjà
      chargé par le kit, tient le rôle du serif de la maquette.

   La mise en page à deux colonnes se déclenche sur la largeur du CONTENEUR, pas
   de la fenêtre. Le bloc reste ainsi correct où qu'on le pose, y compris dans
   une colonne étroite, sans dépendre du plafond de contenu du thème que nous
   relevons par ailleurs pour cette page.

   Les sélecteurs qui visent un bouton, un select ou un lien sont scopés sous
   `.gg-conf` : le `reset.css` du thème stylise tous les boutons en rose
   #cc3366 avec un sélecteur d'attribut, de même poids qu'une classe. Le scope
   nous sort de ce match nul, quel que soit l'ordre de chargement des feuilles.

   Attention : un élément qui ÉTABLIT un conteneur n'est pas son propre
   conteneur de requête. Les unités `cqi` de la carte elle-même remontent donc à
   la fenêtre : son remplissage et son rayon sont volontairement exprimés en
   `vw`. Seuls les descendants mesurent bien la carte.
   ========================================================================== */

.gg-conf {
	/* Fonds */
	--gg-fond-page: #fcfcfc;
	--gg-carte-haut: #ffffff;
	--gg-carte-bas: #fbfaf8;
	--gg-bloc: #fefefe;
	--gg-reco: #fdf4ea;
	--gg-recap-tete: #f7f0ea;
	--gg-reassurance: #f9f3ef;
	--gg-choisi-fond: #f9f6f1;

	/* Bruns de la maquette */
	--gg-brun-fonce: #5e391e;
	--gg-brun: #844d24;
	--gg-brun-titre: #7b502f;
	/* Éclairci de #8a6e5a de la maquette : celui-ci passait sous 4,5:1 sur les
	   fonds crème du récapitulatif et des choix sélectionnés. */
	--gg-brun-valeur: #7d6250;
	--gg-brun-prix: #4a372a;

	/* Textes */
	--gg-encre: #1d140f;
	--gg-titre: #33302e;
	--gg-texte: #4f4f4f;
	--gg-gris: #6b6b6b;
	/* Assombri de #9c9a98 de la maquette : 2,8:1 sur blanc, illisible et non
	   conforme. Celui-ci donne 4,7:1 en restant un gris discret. */
	--gg-gris-clair: #767370;

	/* Traits */
	--gg-filet: #f2f2f0;
	--gg-bord-choisi: #b9b0a9;
	--gg-bord-recap: #e8e8e6;
	--gg-separateur: #f0f0f0;
	--gg-icone: #b5aba3;

	--gg-serif: var(--e-global-typography-primary-font-family, "Libre Baskerville"), Georgia, "Times New Roman", serif;
	--gg-sans: var(--e-global-typography-secondary-font-family, "Poppins"), "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	background: var(--gg-fond-page);
	/* Plus de marge en bas qu'en haut : le bandeau vert du pied de page arrive
	   juste après la carte, et 40 px y suffisaient à peine. Les pages du tunnel
	   en ont 72 depuis le même passage, on s'aligne dessus. */
	padding: clamp(16px, 3vw, 40px) 0 clamp(36px, 5vw, 72px);
	font-family: var(--gg-sans);
	color: var(--gg-texte);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.gg-conf *,
.gg-conf *::before,
.gg-conf *::after {
	box-sizing: border-box;
}

/* Le thème plafonne son contenu à 800 px sous 1200 px de fenêtre, ce qui
   étrangle l'écran sur une tablette. On élargit, uniquement sur cette page. */
body.gg-configurateur .site-main {
	max-width: 1180px;
}

/* Le thème affiche le titre de la page au-dessus du contenu, ce qui doublerait
   le titre du configurateur. Hello Elementor prévoit une variable pour ça :
   on l'utilise plutôt que de forcer un `display: none !important`. */
body.gg-configurateur {
	--page-title-display: none;
}

/* --------------------------------------------------------------------------
   Carte principale
   -------------------------------------------------------------------------- */

.gg-conf__carte {
	container-type: inline-size;
	max-width: 1140px;
	margin: 0 auto;
	/* En `vw` et non en `cqi` : voir l'avertissement de l'en-tête. */
	padding: clamp(18px, 3.4vw, 44px);
	background: linear-gradient(180deg, var(--gg-carte-haut) 0%, var(--gg-carte-bas) 100%);
	border-radius: clamp(16px, 2.4vw, 30px);
	box-shadow: 0 1px 2px rgba(30, 20, 15, 0.04), 0 12px 40px rgba(30, 20, 15, 0.05);
}

.gg-conf__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3cqi, 40px);
}

/* --------------------------------------------------------------------------
   Titre
   -------------------------------------------------------------------------- */

.gg-conf__hero {
	margin: 0 0 clamp(18px, 2.6cqi, 32px);
	text-align: center;
}

.gg-conf__titre {
	margin: 0;
	font-family: var(--gg-serif);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.04;
	letter-spacing: 0.02em;
}

.gg-conf__titre-1,
.gg-conf__titre-2 {
	display: block;
}

.gg-conf__titre-1 {
	color: var(--gg-encre);
	font-size: clamp(26px, 6.2cqi, 50px);
}

/* Dans la maquette la seconde ligne est plus grande que la première, et brune. */
.gg-conf__titre-2 {
	color: var(--gg-brun-titre);
	font-size: clamp(30px, 7.2cqi, 58px);
	margin-top: 0.04em;
}

.gg-conf__accroche {
	margin: clamp(10px, 1.6cqi, 20px) auto 0;
	max-width: 30em;
	color: var(--gg-gris-clair);
	font-size: clamp(13px, 1.5cqi, 16px);
	line-height: 1.45;
}

.gg-conf__accroche strong {
	color: var(--gg-brun-valeur);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Étapes
   -------------------------------------------------------------------------- */

.gg-conf__etape {
	margin: 0 0 clamp(12px, 1.6cqi, 20px);
	padding: clamp(14px, 1.9cqi, 22px);
	background: var(--gg-bloc);
	border: 1px solid var(--gg-filet);
	border-radius: 16px;
}

.gg-conf__etape:last-child {
	margin-bottom: 0;
}

.gg-conf__etape-tete {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gg-conf__puce {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--gg-brun);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.gg-conf__etape-titre {
	flex: 1 1 auto;
	margin: 0;
	color: var(--gg-titre);
	font-family: var(--gg-sans);
	font-size: clamp(12px, 1.35cqi, 15px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.gg-conf__aide {
	margin: 10px 0 14px;
	color: var(--gg-gris);
	font-size: clamp(12px, 1.25cqi, 14px);
}

.gg-conf-icone {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--gg-icone);
}

.gg-conf__legende {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gg-conf__choix {
	margin: 0;
	padding: 0;
	border: 0;
}

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

.gg-conf__champs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.gg-conf__champ {
	position: relative;
	margin: 0;
	padding: 9px 12px 8px;
	background: #fff;
	border: 1px solid var(--gg-filet);
	border-radius: 10px;
	transition: border-color 0.15s ease;
}

/* La flèche est dessinée sur le conteneur, pas sur le bouton : elle reste ainsi
   calée sur la carte quelle que soit la longueur du libellé, et un fond en
   dégradé porté par le bouton se décalerait dès que la police change. */
.gg-conf__champ::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 18px;
	width: 8px;
	height: 8px;
	border-right: 1.6px solid var(--gg-gris);
	border-bottom: 1.6px solid var(--gg-gris);
	transform: rotate(45deg);
	pointer-events: none;
}

/* Un seul anneau de focus, porté par le conteneur. */
.gg-conf__champ:focus-within {
	border-color: var(--gg-brun);
	box-shadow: 0 0 0 3px rgba(132, 77, 36, 0.14);
}

.gg-conf__champ--cache {
	margin-top: 10px;
}

/* Le champ replié est un `<div>` : une règle de thème sur `div` battrait la
   règle du navigateur pour `[hidden]`. */
.gg-conf__champ[hidden] {
	display: none;
}

.gg-conf__label {
	display: block;
	color: var(--gg-gris-clair);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Listes déroulantes maison

   La liste d'un `<select>` est dessinée par le système d'exploitation : aucune
   propriété CSS ne l'atteint. Sur cet écran, elle ouvrait un rectangle blanc à
   angles vifs surligné en bleu, étranger au reste.

   Le champ fermé garde donc exactement la géométrie d'avant, et le panneau
   ouvert reprend les rayons, l'ombre et les crèmes de la carte.
   -------------------------------------------------------------------------- */

.gg-conf .gg-conf__combo {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 1px 0 0;
	/* La réserve à droite laisse la place à la flèche du conteneur. */
	padding: 0 22px 0 0;
	border: 0;
	background: transparent;
	color: var(--gg-texte);
	font-family: inherit;
	/* 16 px au minimum : en dessous, iOS zoome sur le champ au moindre appui. */
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

/* L'anneau de focus est sur le conteneur : celui du bouton ferait double
   emploi. Le conteneur le porte via `:focus-within`. */
.gg-conf .gg-conf__combo:focus {
	outline: none;
}

.gg-conf .gg-conf__combo:disabled {
	color: var(--gg-gris-clair);
	cursor: not-allowed;
}

.gg-conf__combo-valeur {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gg-conf__combo-valeur--fort {
	font-weight: 700;
}

/* Une invite, pas une valeur. Le gris est celui des libellés, mesuré à 4,7:1
   sur blanc. */
.gg-conf .gg-conf__combo-valeur.est-invite {
	color: var(--gg-gris-clair);
	font-weight: 500;
}

/* Champ ouvert : même mise en avant que le focus, plus la flèche retournée. Le
   `z-index` fait passer le panneau au-dessus de l'étape suivante. */
.gg-conf__champ.est-ouverte {
	z-index: 5;
	border-color: var(--gg-brun);
	box-shadow: 0 0 0 3px rgba(132, 77, 36, 0.14);
}

.gg-conf__champ.est-ouverte::after {
	bottom: 22px;
	border-color: var(--gg-brun);
	transform: rotate(225deg);
}

.gg-conf__combo-liste {
	position: absolute;
	/* Débord de 1 px de chaque côté : le panneau s'aligne sur le bord extérieur
	   du champ, bordure comprise. */
	top: calc(100% + 7px);
	right: -1px;
	left: -1px;
	z-index: 20;
	max-height: 246px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: #fff;
	border: 1px solid var(--gg-filet);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(61, 39, 25, 0.06), 0 18px 38px rgba(61, 39, 25, 0.16);
}

/* Sans cette ligne, une règle du thème sur `ul` reprendrait la main sur la
   règle du navigateur pour `[hidden]`, et la liste resterait ouverte. */
.gg-conf__combo-liste[hidden] {
	display: none;
}

.gg-conf__combo-option {
	position: relative;
	display: flex;
	align-items: center;
	/* 40 px : cible tactile, la liste native du téléphone n'est plus là. */
	min-height: 40px;
	padding: 8px 34px 8px 12px;
	border-radius: 8px;
	color: var(--gg-texte);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
}

/* Survol et navigation clavier partagent le même repère : l'un se substitue à
   l'autre, ils n'ont pas à se distinguer. */
.gg-conf__combo-option:hover,
.gg-conf__combo-option.est-actif {
	background: var(--gg-reco);
}

.gg-conf__combo-option[aria-selected="true"] {
	color: var(--gg-brun);
	font-weight: 700;
}

/* Une coche, et pas seulement une teinte : le choix en place doit se voir sans
   distinguer les couleurs. */
.gg-conf__combo-option[aria-selected="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 10px;
	height: 6px;
	border-bottom: 1.8px solid currentColor;
	border-left: 1.8px solid currentColor;
	transform: translateY(-70%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Taille recommandée
   -------------------------------------------------------------------------- */

.gg-conf__reco {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 12px 16px;
	background: var(--gg-reco);
	border: 1px solid #f6e6d4;
	border-radius: 12px;
}

.gg-conf__reco-corps {
	flex: 1 1 auto;
}

.gg-conf__reco-titre {
	margin: 0;
	color: var(--gg-titre);
	font-size: clamp(12px, 1.3cqi, 15px);
	font-weight: 700;
}

.gg-conf__reco-valeur {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 2px 0 0;
}

.gg-conf__reco-valeur strong {
	color: var(--gg-brun-valeur);
	font-size: clamp(22px, 2.8cqi, 30px);
	font-weight: 600;
	line-height: 1.1;
}

.gg-conf__reco-valeur span {
	color: var(--gg-brun-valeur);
	font-size: clamp(11px, 1.2cqi, 14px);
	font-weight: 500;
}

.gg-conf__reco[data-etat="inconnue"] {
	background: #fbf5f4;
	border-color: #f3e0dd;
}

.gg-conf__note {
	margin: 10px 0 0;
	color: var(--gg-gris-clair);
	font-size: 11.5px;
	line-height: 1.5;
}

.gg-conf .gg-conf__lien {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gg-brun);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	/* Sans cela, le clic sélectionne le libellé du bouton et le surligne. */
	-webkit-user-select: none;
	user-select: none;
}

.gg-conf .gg-conf__lien:focus-visible {
	outline: 2px solid var(--gg-brun);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Doublure : pastilles de matière
   -------------------------------------------------------------------------- */

.gg-conf__choix--swatch {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.gg-conf__swatch {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 8px 6px 10px;
	border: 1px solid transparent;
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gg-conf__swatch input,
.gg-conf__option input,
.gg-conf__pastille input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.gg-conf__swatch-visuel {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--gg-filet);
	border-radius: 9px;
	background: #efe7dd;
}

/* Textures approchées : la maquette montre des photos de tissu, indisponibles.
   Sélectionnées par l'INDEX du choix et non par son libellé : la cliente peut
   renommer « Cachemire » sans que la texture disparaisse. */
.gg-conf__swatch-visuel[data-choix="0"] {
	background: linear-gradient(150deg, #efe3d3 0%, #e3d3bf 100%);
}

.gg-conf__swatch-visuel[data-choix="1"] {
	background: linear-gradient(150deg, #fbf6ee 0%, #ece2d3 55%, #f7f1e8 100%);
}

.gg-conf__swatch-visuel[data-choix="2"] {
	background: linear-gradient(150deg, #b9b4ad 0%, #9c968e 100%);
}

.gg-conf__swatch-visuel[data-choix="3"] {
	background: linear-gradient(150deg, #6f6a64 0%, #4e4a45 100%);
}

.gg-conf__coche {
	position: absolute;
	top: -6px;
	right: -6px;
	display: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gg-brun);
	box-shadow: 0 0 0 2px #fff;
}

.gg-conf__coche::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 6px;
	width: 7px;
	height: 4px;
	border-left: 1.7px solid #fff;
	border-bottom: 1.7px solid #fff;
	transform: rotate(-45deg);
}

.gg-conf__swatch-nom {
	margin-top: 9px;
	color: var(--gg-gris);
	font-size: clamp(11px, 1.05cqi, 12px);
	font-weight: 600;
	line-height: 1.25;
	/* Deux lignes réservées : « Sans doublure » passe à la ligne, les quatre
	   pastilles doivent rester alignées. */
	min-height: 2.5em;
}

.gg-conf__swatch-sous {
	margin-top: 2px;
	color: var(--gg-gris-clair);
	font-size: clamp(10px, 0.95cqi, 11px);
	line-height: 1.25;
	min-height: 2.5em;
}

.gg-conf__swatch.est-choisi {
	border-color: var(--gg-bord-choisi);
	background: var(--gg-choisi-fond);
}

.gg-conf__swatch.est-choisi .gg-conf__coche {
	display: block;
}

.gg-conf__swatch.est-choisi .gg-conf__swatch-nom {
	color: var(--gg-brun-valeur);
}

/* --------------------------------------------------------------------------
   Matière extérieure : cartes
   -------------------------------------------------------------------------- */

.gg-conf__choix--cartes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: 12px;
}

.gg-conf__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	/* La réserve à droite est permanente : la coche de l'état sélectionné s'y
	   pose sans décaler le texte au moment du clic. */
	padding: 12px 34px 12px 14px;
	background: #fff;
	border: 1px solid var(--gg-filet);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gg-conf__option-visuel {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: linear-gradient(150deg, #8a5a33 0%, #6d431f 100%);
}

.gg-conf__option-visuel[data-choix="1"] {
	background: linear-gradient(150deg, #a9b79c 0%, #7f9070 100%);
}

/* Étape 5 : le papier cadeau. Un aplat sobre pour « sans », un papier kraft
   ruban pour « avec ». */
.gg-conf__option-visuel--sans-cadeau {
	background: linear-gradient(150deg, #e7e3de 0%, #d3cec8 100%);
}

.gg-conf__option-visuel--cadeau {
	background:
		linear-gradient(90deg, transparent 44%, #f7ede4 44%, #f7ede4 56%, transparent 56%),
		linear-gradient(180deg, transparent 44%, #f7ede4 44%, #f7ede4 56%, transparent 56%),
		linear-gradient(150deg, #a5703f 0%, #85562c 100%);
}

.gg-conf__option-corps {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gg-conf__option-nom {
	color: var(--gg-texte);
	font-size: clamp(12px, 1.3cqi, 14px);
	font-weight: 600;
}

.gg-conf__option-sous {
	margin-top: 2px;
	color: var(--gg-gris);
	font-size: clamp(10.5px, 1.1cqi, 12px);
	line-height: 1.3;
}

/* L'état sélectionné se voyait à un écart de fond de 1,078:1 et une bordure à
   1,98:1, autant dire pas du tout, et c'est le seul repère sur une option
   payante comme le papier cadeau. Trait brun doublé, et une coche : le choix se
   lit aussi sans distinguer les couleurs. */
.gg-conf__option.est-choisi {
	border-color: var(--gg-brun);
	background: var(--gg-choisi-fond);
	box-shadow: inset 0 0 0 1px var(--gg-brun);
}

.gg-conf__option.est-choisi::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 11px;
	height: 6px;
	border-bottom: 2px solid var(--gg-brun);
	border-left: 2px solid var(--gg-brun);
	transform: translateY(-70%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Fourchette de prix : pastilles
   -------------------------------------------------------------------------- */

.gg-conf__choix--pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gg-conf__pastille {
	position: relative;
	padding: 9px 14px;
	background: #fff;
	border: 1px solid var(--gg-filet);
	border-radius: 8px;
	color: var(--gg-texte);
	font-size: clamp(11.5px, 1.2cqi, 13px);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gg-conf__pastille.est-choisi {
	background: var(--gg-brun);
	border-color: var(--gg-brun);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Options sans résultat
   -------------------------------------------------------------------------- */

.gg-conf__epuise {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #9a5c52;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Un choix indisponible est réellement désactivé : le curseur le dit, et
   l'input `disabled` le retire du parcours au clavier. */
.gg-conf__swatch.est-vide,
.gg-conf__option.est-vide,
.gg-conf__pastille.est-vide {
	opacity: 0.5;
	cursor: not-allowed;
}

.gg-conf__swatch.est-vide .gg-conf__swatch-visuel,
.gg-conf__option.est-vide .gg-conf__option-visuel {
	filter: grayscale(0.7);
}

.gg-conf__pastille.est-vide {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* L'attribut `hidden` doit gagner contre le `display` posé plus bas : sans cette
   règle, plus spécifique, le badge resterait visible sur les choix disponibles. */
.gg-conf__epuise[hidden] {
	display: none;
}

/* Sur une pastille, le badge se pose sous le libellé plutôt que par-dessus. */
.gg-conf__epuise--pastille {
	position: static;
	display: block;
	transform: none;
	margin-top: 2px;
	padding: 0;
	background: none;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Messages de WooCommerce et repli sans JavaScript
   -------------------------------------------------------------------------- */

.gg-conf__notices {
	margin: 0 0 clamp(14px, 1.8cqi, 22px);
}

.gg-conf__notices .woocommerce-error,
.gg-conf__notices .woocommerce-message,
.gg-conf__notices .woocommerce-info {
	margin: 0 0 8px;
	font-size: clamp(12.5px, 1.3cqi, 14px);
}

.gg-conf__noscript {
	margin: 0 0 clamp(14px, 1.8cqi, 22px);
	padding: 14px 16px;
	background: var(--gg-reco);
	border: 1px solid #f6e6d4;
	border-radius: 12px;
	color: var(--gg-texte);
	font-size: clamp(12.5px, 1.3cqi, 14px);
	line-height: 1.5;
}

.gg-conf__noscript a {
	color: var(--gg-brun);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Sur les cartes de matière le badge se pose dans le coin : à droite au milieu,
   il recouvrait le sous-titre, et lui réserver la place étranglait le texte. */
.gg-conf__option .gg-conf__epuise {
	top: 6px;
	left: auto;
	right: 8px;
	transform: none;
}

/* Mention d'ajustement : une étape que le visiteur avait choisie a dû être
   déplacée, faute de modèle. Le ton est celui du panneau de recommandation, pas
   celui d'une erreur : rien n'est cassé, on explique. */
.gg-conf__ajuste {
	margin: 12px 0 0;
	padding: 9px 12px;
	background: var(--gg-reco);
	border: 1px solid #f0dcc4;
	border-radius: 10px;
	color: var(--gg-brun-valeur);
	font-size: 12.5px;
	line-height: 1.45;
}

.gg-conf__ajuste[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Colonne de droite : visuel et récapitulatif
   -------------------------------------------------------------------------- */

.gg-conf__colonne--droite {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8cqi, 22px);
}

.gg-conf__visuel {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --------------------------------------------------------------------------
   Galerie du modèle

   Le défilement est celui du navigateur, avec accroche par photo. Le
   glissement du doigt, le pavé tactile et la molette horizontale marchent
   donc sans une ligne de code, et mieux qu'une reimplémentation.
   -------------------------------------------------------------------------- */

/*
 * Le format de la boîte est EXACTEMENT celui des photos.
 *
 * Elle était carrée : un carré en `cover` rognait un tiers de la hauteur du
 * gant, haut et bas, c'est-à-dire le poignet et le bout des doigts.
 *
 * Le 3 / 4 essayé ensuite était un compromis, censé laisser des bandes de fond
 * assez fines pour passer inaperçues. Mesuré au contrôle final sur un téléphone
 * de 390 px : 37 px de bandes, soit 11 % de la largeur du cadre. Ça se voit.
 *
 * Les photos du catalogue sont en 683 x 1024, soit 2 / 3, mesuré. En donnant au
 * cadre ce rapport exact, la photo le remplit d'un bord à l'autre : plus une
 * seule bande, et le gant occupe toute la largeur disponible. Le cadre est plus
 * haut qu'avant, et c'est justifié : c'est le produit qu'on est venu voir.
 */
.gg-conf__galerie {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: var(--gg-recap-tete);
}

.gg-conf__piste {
	display: flex;
	/* En absolu plutôt qu'en pourcentage : `inset: 0` se résout toujours, là où
	   `height: 100%` demande un parent à hauteur définie et échouait dès que la
	   galerie tenait sa hauteur du flex. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* Le geste ne doit pas se propager à la page : sans ça, arrivé à la dernière
	   photo, la poursuite du glissement fait défiler tout l'écran. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

/* La barre de défilement n'apporte rien ici : les vignettes et le compteur
   disent déjà où on en est. */
.gg-conf__piste::-webkit-scrollbar {
	display: none;
}

.gg-conf__piste:focus-visible {
	outline: 2px solid var(--gg-brun);
	outline-offset: -2px;
}

.gg-conf__vue {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	/* Chaque vue est une scène : la photo au centre, à sa taille. */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/*
 * La photo entière, jamais recadrée, et le même traitement partout.
 *
 * Trois défauts corrigés ici, tous mesurés sur la préproduction.
 *
 * 1. `!important` sur les dimensions, et il le faut. Une feuille chargée avant
 *    la nôtre impose `height: auto` à toute image, ce que fait à peu près tout
 *    thème WordPress pour éviter les images déformées. L'image sortait à
 *    440 x 659 dans une boîte de 440 x 240 : 419 px de gant coupés net par le
 *    `overflow: hidden`. La feuille adverse est servie depuis un domaine tiers,
 *    illisible depuis la page ; on ne peut pas la citer, la mesure suffit.
 *
 * 2. `max-height`, surtout pas `height`. Une hauteur en pourcentage exige un
 *    bloc conteneur à hauteur DÉFINIE. Ni une boîte dimensionnée par le flex ni
 *    une rangée de grille auto-dimensionnée n'en fournissent : la définition
 *    est circulaire, le navigateur revient à la hauteur naturelle, et
 *    `object-fit` n'a plus rien à faire puisqu'il ne travaille que sur une
 *    boîte déjà dimensionnée. `max-height: 100%` se résout, lui.
 *
 * 3. `contain`, et non `cover`, sur téléphone aussi. Le recadrage d'une photo
 *    de gant retire le gant : ces images sont portrait, le sujet occupe la
 *    hauteur. Avec la boîte en 3 / 4 et la photo en 2 / 3, ce qui reste de fond
 *    tient dans 18 px de chaque côté sur un écran de 375 px.
 */
.gg-conf__vue img,
.gg-conf__vue .gg-conf-photo {
	display: block;
	/* `!important` sur la seule hauteur. La largeur n'est disputée par personne :
	   aucune feuille tierce ne la déclare en forçant, et notre propre `width` a
	   disparu de cette règle. Un `!important` posé par confort masque la vraie
	   raison du premier, qui est bien réelle. */
	width: auto;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	-webkit-user-select: none;
	user-select: none;
}

.gg-conf__visuel-vide {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.gg-conf__visuel-vide .gg-conf-icone {
	width: 64px;
	height: 64px;
	color: #d9d7d8;
}

/* Flèches. Discrètes au repos, elles n'apparaissent qu'au survol de la galerie
   sur un écran pointé, et restent visibles en permanence là où il n'y a pas de
   survol, c'est-à-dire au doigt. */
.gg-conf .gg-conf__fleche {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--gg-brun-fonce);
	box-shadow: 0 2px 10px rgba(30, 20, 15, 0.18);
	cursor: pointer;
	transition: opacity 0.18s ease, background-color 0.18s ease;
}

.gg-conf .gg-conf__fleche .gg-conf-icone {
	width: 20px;
	height: 20px;
}

.gg-conf .gg-conf__fleche--prec {
	left: 10px;
}

.gg-conf .gg-conf__fleche--suiv {
	right: 10px;
}

.gg-conf .gg-conf__fleche:hover {
	background: #fff;
}

.gg-conf .gg-conf__fleche:disabled {
	opacity: 0;
	pointer-events: none;
}

.gg-conf .gg-conf__fleche[hidden] {
	display: none;
}

@media (hover: hover) {
	.gg-conf .gg-conf__fleche {
		opacity: 0;
	}

	.gg-conf__galerie:hover .gg-conf__fleche,
	.gg-conf__galerie:focus-within .gg-conf__fleche {
		opacity: 1;
	}

	.gg-conf__galerie:hover .gg-conf__fleche:disabled,
	.gg-conf__galerie:focus-within .gg-conf__fleche:disabled {
		opacity: 0;
	}
}

/* Compteur « 3 / 6 ». Il tient le rôle des anciennes pastilles au doigt, sans
   demander de viser une cible de 7 px. */
.gg-conf__compteur {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	margin: 0;
	padding: 4px 10px 5px;
	border-radius: 20px;
	background: rgba(30, 20, 15, 0.62);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.gg-conf__compteur[hidden] {
	display: none;
}

/* Vignettes, sur écran large seulement : au doigt on fait glisser, et une
   rangée de miniatures y volerait de la hauteur au récapitulatif. */
.gg-conf__vignettes {
	display: none;
}

.gg-conf__vignettes[hidden] {
	display: none;
}

.gg-conf .gg-conf__vignette {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--gg-recap-tete);
	cursor: pointer;
	opacity: 0.62;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.gg-conf .gg-conf__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gg-conf .gg-conf__vignette:hover {
	opacity: 1;
}

.gg-conf .gg-conf__vignette.est-active {
	opacity: 1;
	border-color: var(--gg-brun);
}

.gg-conf .gg-conf__vignette:focus-visible {
	outline: 2px solid var(--gg-brun);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Choix du modèle, quand plusieurs correspondent
   -------------------------------------------------------------------------- */

.gg-conf__modeles {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--gg-separateur);
}

.gg-conf__modeles[hidden] {
	display: none;
}

.gg-conf__modeles-titre {
	margin: 0 0 9px;
	color: var(--gg-gris-clair);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Une seule ligne qui défile, et non un retour à la ligne : deux modèles aux
   noms longs empilaient 120 px de hauteur, pris sur la photo quand la colonne
   est collante et plafonnée. */
.gg-conf__modeles-liste {
	display: flex;
	flex-wrap: nowrap;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 3px;
}

.gg-conf .gg-conf__modele-choix {
	flex: 0 0 auto;
}

.gg-conf .gg-conf__modele-choix {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	padding: 8px 12px 9px;
	background: #fff;
	border: 1px solid var(--gg-filet);
	border-radius: 9px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gg-conf .gg-conf__modele-choix strong {
	color: var(--gg-texte);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
}

.gg-conf .gg-conf__modele-choix em {
	color: var(--gg-brun-valeur);
	font-size: 12.5px;
	font-style: normal;
	font-weight: 600;
}

.gg-conf .gg-conf__modele-choix:hover {
	border-color: var(--gg-bord-choisi);
}

.gg-conf .gg-conf__modele-choix[aria-pressed="true"] {
	background: var(--gg-choisi-fond);
	border-color: var(--gg-brun);
	box-shadow: inset 0 0 0 1px var(--gg-brun);
}

.gg-conf .gg-conf__modele-choix:focus-visible {
	outline: 2px solid var(--gg-brun);
	outline-offset: 2px;
}

/* Récapitulatif */

.gg-conf__recap {
	overflow: hidden;
	background: var(--gg-bloc);
	border: 1px solid var(--gg-bord-recap);
	border-radius: 16px;
}

.gg-conf__recap-tete {
	margin: 0;
	padding: 12px 16px;
	background: var(--gg-recap-tete);
	color: var(--gg-titre);
	font-size: clamp(10.5px, 1.1cqi, 12px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
}

.gg-conf__recap-liste {
	margin: 0;
	padding: 0;
}

.gg-conf__recap-ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--gg-separateur);
}

.gg-conf__recap-ligne dt {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--gg-gris);
	font-size: clamp(11.5px, 1.2cqi, 13px);
}

.gg-conf__recap-ligne dt .gg-conf-icone {
	width: 16px;
	height: 16px;
}

.gg-conf__recap-ligne dd {
	margin: 0;
	color: var(--gg-brun-valeur);
	font-size: clamp(11.5px, 1.2cqi, 13px);
	font-weight: 600;
	text-align: right;
}

.gg-conf__prix-bloc {
	padding: 16px;
	text-align: center;
}

.gg-conf__prix-libelle {
	margin: 0;
	color: var(--gg-texte);
	font-size: clamp(11.5px, 1.2cqi, 13px);
	font-weight: 500;
}

.gg-conf__prix {
	margin: 4px 0 0;
	color: var(--gg-brun-prix);
	font-size: clamp(24px, 3cqi, 34px);
	font-weight: 700;
	line-height: 1.1;
}

.gg-conf__prix .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.gg-conf__prix-note {
	margin: 5px 0 0;
	color: var(--gg-gris-clair);
	font-size: 10.5px;
	line-height: 1.4;
}

.gg-conf__vide {
	margin: 0;
	padding: 0 16px 16px;
	color: #9a5c52;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

.gg-conf__vide a {
	color: var(--gg-brun);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.gg-conf__actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: clamp(18px, 2.4cqi, 30px);
}

/* Un seul bouton d'action : il reste large mais pas démesuré sur grand écran. */
@container (min-width: 560px) {
	.gg-conf__actions {
		max-width: 520px;
		margin-inline: auto;
	}
}

/* En colonne : la mention qui explique un bouton désactivé se place sous lui,
   et non à côté. */
.gg-conf__achat {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gg-conf__raison {
	margin: 0;
	color: var(--gg-gris-clair);
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
}

.gg-conf__raison[hidden] {
	display: none;
}

.gg-conf .gg-conf__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: 100%;
	padding: 14px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.gg-conf .gg-conf__cta span {
	display: flex;
	flex-direction: column;
}

.gg-conf .gg-conf__cta strong {
	font-size: clamp(12px, 1.35cqi, 14.5px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.gg-conf .gg-conf__cta em {
	margin-top: 2px;
	font-size: clamp(10.5px, 1.1cqi, 12px);
	font-style: normal;
	line-height: 1.25;
}

.gg-conf .gg-conf__cta--principal {
	background: var(--gg-brun-fonce);
	color: #f7ede4;
}

.gg-conf .gg-conf__cta--principal .gg-conf-icone {
	color: #f7ede4;
}

.gg-conf .gg-conf__cta--principal em {
	color: #e8d8c8;
}

.gg-conf .gg-conf__cta--principal:hover:not(:disabled) {
	background: #6d4425;
}

.gg-conf .gg-conf__cta--principal:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.gg-conf .gg-conf__cta:focus-visible {
	outline: 2px solid var(--gg-brun);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Réassurance
   -------------------------------------------------------------------------- */

.gg-conf__reassurance {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: clamp(16px, 2.2cqi, 26px) 0 0;
	padding: clamp(14px, 1.8cqi, 20px);
	list-style: none;
	background: var(--gg-reassurance);
	border-radius: 14px;
}

.gg-conf__reassurance li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.gg-conf__reassurance span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gg-conf__reassurance strong {
	color: var(--gg-titre);
	font-size: clamp(10.5px, 1.1cqi, 12px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.25;
}

.gg-conf__reassurance em {
	margin-top: 2px;
	color: var(--gg-gris);
	font-size: clamp(10px, 1.05cqi, 11.5px);
	font-style: normal;
	line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Deux colonnes, à partir de la largeur du conteneur
   -------------------------------------------------------------------------- */

@container (min-width: 560px) {
	.gg-conf__champs {
		grid-template-columns: 1fr 1fr;
	}

	.gg-conf__choix--swatch {
		grid-template-columns: repeat(4, 1fr);
	}

	.gg-conf__choix--cartes {
		grid-template-columns: 1fr 1fr;
	}

	.gg-conf__reassurance {
		grid-template-columns: repeat(3, 1fr);
	}

}

@container (min-width: 820px) {
	.gg-conf__grille {
		grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
		align-items: start;
	}

	.gg-conf__hero {
		text-align: left;
	}

	.gg-conf__accroche {
		margin-left: 0;
	}

	/* La colonne de droite suit le défilement.
	   La photo et le prix sont le seul retour visuel du parcours : sans ça, on
	   change une doublure à l'étape 2 et on ne voit rien bouger, parce que le
	   visuel est resté en haut de page. `align-self: start` est indispensable,
	   un élément étiré sur toute la hauteur de la ligne n'a rien où coller.
	   Mesuré sur la préproduction : colonne de 841 px pour 1 368 px à gauche,
	   donc plus de 500 px de défilement pendant lesquels elle reste visible. */
	.gg-conf__colonne--droite {
		position: sticky;
		/*
		 * Le décalage est MESURÉ par le script, pas deviné.
		 *
		 * L'en-tête du site passe en `position: fixed` au défilement. Sa hauteur
		 * dépend du point de rupture, de la présence de la barre d'administration,
		 * et il peut rétrécir en cours de défilement : toute valeur écrite en dur
		 * ici est fausse dans au moins un cas. Une première tentative s'appuyait
		 * sur une classe du corps de page, elle visait `admin-bar-showing` alors
		 * que WordPress pose `admin-bar` : elle ne s'est jamais appliquée.
		 *
		 * Le repli à 100 px sert le temps du premier calcul, et si le script ne
		 * tourne pas.
		 */
		top: var(--gg-collant, 100px);
		align-self: start;
		max-height: calc(100vh - var(--gg-collant, 100px) - 16px);
		/* Filet pour le seul cas où la hauteur disponible bouge encore, le
		   redimensionnement de la fenêtre : la colonne s'y adapte en douceur au
		   lieu de sauter. Le défilement, lui, ne la fait plus varier du tout. */
		transition: max-height 0.28s ease;
		/* Filet de sécurité : si le récapitulatif seul dépassait la hauteur
		   disponible, il défile ici au lieu d'être coupé. */
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/*
	 * La photo cède de la HAUTEUR, jamais du sujet.
	 *
	 * Sur une fenêtre courte, la colonne entière ne tient pas sous l'en-tête.
	 * Quelque chose doit rétrécir, et ce n'est pas au récapitulatif de le faire :
	 * c'est lui qui porte le prix, la taille et les choix. C'est donc la photo.
	 *
	 * Première version : la boîte rétrécissait et `object-fit: cover` recadrait.
	 * Mauvaise idée, et en plus mal exécutée.
	 *
	 * Mal exécutée d'abord. Mesuré sur la préproduction, fenêtre de 807 px : la
	 * boîte faisait 440 × 364 et l'image 440 × 659. Autrement dit `height: 100%`
	 * ne se résolvait pas, parce qu'une hauteur en pourcentage a besoin d'un
	 * parent à hauteur définie et que celle-ci venait du flex. L'image gardait sa
	 * hauteur naturelle et débordait de 295 px, coupés net par le `overflow:
	 * hidden` de la galerie. Le gant disparaissait par le bas.
	 *
	 * Mauvaise idée ensuite. Même correctement recadrée, une photo de gant
	 * recadrée reste une photo dont on a retiré le gant : ces images sont
	 * portrait (683 × 1024 mesuré), le sujet occupe la hauteur, et tout rognage
	 * vertical mange l'objet qu'on est venu voir.
	 *
	 * D'où la version actuelle : la photo garde ses proportions, se pose ENTIÈRE
	 * et centrée sur le fond crème de la galerie, et c'est ce fond qui absorbe
	 * l'espace. Sur une fenêtre courte, le gant devient plus petit ; il ne
	 * devient jamais partiel.
	 */
	.gg-conf__visuel {
		flex: 1 1 auto;
		/* Sans ce `min-height`, un enfant flexible refuse de descendre sous sa
		   taille de contenu et rien ne rétrécit. */
		min-height: 0;
	}

	.gg-conf__galerie {
		/*
		 * Une hauteur de référence, et un retrait plutôt qu'une croissance.
		 *
		 * `flex-grow` ne distribue que de l'ESPACE LIBRE. Une colonne dont la
		 * hauteur est seulement plafonnée par `max-height` n'en a aucun : elle
		 * s'ajuste à son contenu, et il n'y a rien à distribuer. Résultat
		 * mesuré : la galerie restait sur son plancher de 240 px, la colonne
		 * faisait 618 px pour 745 disponibles, et la photo ressortait à 160 px
		 * de large au milieu d'une colonne de 440.
		 *
		 * En sens inverse, une hauteur de référence généreuse fait déborder le
		 * contenu du plafond. La hauteur de la colonne devient alors définie, et
		 * c'est le RETRAIT qui s'applique : la galerie prend tout ce qui reste
		 * une fois le récapitulatif servi, sans jamais dépasser ce que la photo
		 * peut remplir. Un seul réglage donne ainsi une grande photo sur un
		 * grand écran et une petite sur une fenêtre courte.
		 */
		flex: 0 1 auto;
		/* 2 / 3 : le format des photos du catalogue, 683 x 1024 mesuré. */
		aspect-ratio: 2 / 3;
		min-height: 240px;

		/*
		 * Le cadre suit la photo, au lieu de rester large et vide.
		 *
		 * Relevé en recette : dès que la liste des modèles correspondants
		 * s'affiche, elle prend de la hauteur au cadre, qui tombe à son plancher
		 * de 240 px. La photo, contenue et centrée, ne faisait plus que 160 px de
		 * large au milieu d'un cadre de 440 : deux bandes crème de 140 px de
		 * chaque côté, ce qui donnait moins un décor qu'un vide.
		 *
		 * `align-self: center` retire l'étirement que la colonne applique par
		 * défaut. La largeur redevient libre, le rapport 2 / 3 la déduit de la
		 * hauteur, et le cadre épouse la photo. Le plafond de largeur garde le
		 * cadre dans la colonne sur les fenêtres hautes, où la photo est déjà
		 * grande.
		 */
		align-self: center;
		width: auto;
		max-width: 100%;

		/*
		 * La hauteur de référence redevient explicite.
		 *
		 * `align-self: center` retire l'étirement, et avec lui la largeur sur
		 * laquelle le rapport 2 / 3 déduisait sa hauteur de base. Le cadre
		 * retombait alors sur son plancher de 240 px et n'en bougeait plus, même
		 * sur une fenêtre de 1 200 px de haut : mesuré. On la pose donc en clair,
		 * et c'est le RETRAIT qui la ramène à ce que la colonne peut offrir.
		 *
		 * 640 px, c'est la hauteur qu'une photo occupant les 440 px de la colonne
		 * atteindrait au rapport 2 / 3 : le mieux que cette colonne puisse donner.
		 * Mesuré ensuite sur une fenêtre de 800 px : cadre de 242 × 363, photo
		 * remplissant exactement le cadre, récapitulatif entièrement visible.
		 */
		height: 640px;
	}

	/* Les vignettes n'apparaissent qu'ici : au doigt on fait glisser la photo, et
	   une rangée de miniatures volerait de la hauteur au récapitulatif. */
	.gg-conf__vignettes {
		display: flex;
		flex: 0 0 auto;
		gap: 7px;
		overflow-x: auto;
		scrollbar-width: thin;
		padding-bottom: 2px;
	}

	.gg-conf__recap,
	.gg-conf__annonce {
		flex: 0 0 auto;
	}

}

/* --------------------------------------------------------------------------
   Message flottant

   Le bouton d'achat n'est jamais grisé : c'est le clic qui explique ce qui
   manque, et ce message se voit d'où que vienne le clic.
   -------------------------------------------------------------------------- */

.gg-conf__toast {
	position: fixed;
	left: 50%;
	bottom: 22px;
	z-index: 1000;
	max-width: min(520px, calc(100vw - 32px));
	padding: 13px 18px;
	background: var(--gg-brun-fonce);
	color: #fdf6ef;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(30, 20, 15, 0.28);
	font-family: var(--gg-sans);
	font-size: 14.5px;
	line-height: 1.45;
	text-align: center;
	/* Il ne doit jamais intercepter un clic destiné à la page derrière. */
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 14px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gg-conf__toast[hidden] {
	display: none;
}

.gg-conf__toast.est-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Préférences d'accessibilité
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gg-conf * {
		transition: none !important;
	}
}

.gg-conf__swatch:focus-within,
.gg-conf__option:focus-within,
.gg-conf__pastille:focus-within {
	outline: 2px solid var(--gg-brun);
	outline-offset: 2px;
}