/**
 * Gravure sur le pied — la scène et ses réglages.
 *
 * PRINCIPE : cette feuille n'invente aucun langage visuel. Elle pose une scène
 * PAR-DESSUS celle du calice, aux mêmes dimensions, et laisse les réglages
 * hériter des classes de l'atelier (`bg-configurator__group`, `gm__sheet`).
 * Tout est préfixé `glp-` ; aucune règle ne vise un sélecteur du moteur, du
 * thème ou de la boutique — elle ne peut donc rien repeindre de l'existant.
 */

/* ------------------------------------------------------------------
   La scène : le pied qui se relève vers le regard
   ------------------------------------------------------------------ */

.glp-scene {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fermée, elle n'existe pas : ni au clic, ni au clavier, ni au lecteur. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .34s ease, visibility 0s linear .34s;
}
.glp-scene.is-on {
	opacity: 1;
	visibility: visible;
	/* La scène MONTRE, elle ne capte pas : rien n'y est cliquable, et la laisser
	   intercepter les gestes volait les touches destinées à ce qui est dessous. */
	pointer-events: none;
	transition: opacity .34s ease .12s, visibility 0s;
}

/* LA BASCULE. Le pied arrive COUCHÉ, presque à plat, puis se redresse — le
   mouvement du verre qu'on retourne dans la main. La perspective est portée
   ici et non sur l'élément animé : c'est ce qui donne la profondeur au lieu
   d'un simple écrasement vertical. */
.glp-scene__inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	perspective: 1200px;
	perspective-origin: 50% 42%;
}
.glp-scene .glp-canvas {
	display: block;
	width: min(78%, 460px);
	height: auto;
	transform: rotateX(72deg) translateY(14%) scale(.82);
	transform-origin: 50% 62%;
	opacity: 0;
	transition: transform .62s cubic-bezier(.2,.85,.25,1), opacity .4s ease;
	/* L'ombre portée fait exister le disque au-dessus de la scène : sans elle
	   il flotte, et l'œil ne sait plus s'il regarde un objet ou un dessin. */
	filter: drop-shadow(0 22px 30px rgba(20, 18, 36, .16));
}
.glp-scene.is-on .glp-canvas {
	transform: rotateX(0) translateY(0) scale(1);
	opacity: 1;
	transition-delay: .1s;
}

/* La cote, sous le disque : même rôle que le compteur de l'atelier. */
.glp-cotes {
	margin: 0;
	font-family: var(--head, system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tgray, #5f6470);
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}
.glp-scene.is-on .glp-cotes {
	opacity: 1;
	transform: none;
	transition-delay: .38s;
}

/* PAS D'ANIMATION QUAND ELLE EST REFUSÉE. Le contenu reste identique : seul le
   mouvement disparaît, jamais l'information. */
@media (prefers-reduced-motion: reduce) {
	.glp-scene,
	.glp-scene .glp-canvas,
	.glp-cotes {
		transition: opacity .2s ease !important;
	}
	.glp-scene .glp-canvas {
		transform: none !important;
	}
	.glp-cotes {
		transform: none !important;
	}
}

/* ------------------------------------------------------------------
   L'entrée : un segment de vue de plus
   ------------------------------------------------------------------ */

/* Sur bureau, le bouton porte DÉJÀ `bg-configurator__view` : il hérite de tout.
   On ne corrige que son état pressé, que l'atelier exprime par `is-active`. */
.glp-view-btn[hidden] { display: none !important; }

/* Sur téléphone, l'entrée vit SUR LA SCÈNE, sous le verre — la barre d'outils
   est pleine, et le contrôle est mieux là : il touche l'objet qu'il retourne.
   Posé en absolu au bas de la scène, il ne prend aucune place dans le flux du
   moteur et ne déplace donc rien. */
.glp-flip {
	position: absolute;
	left: 50%;
	/* Au-dessus de la barre de cotes, qui occupe les 54 derniers pixels de la
	   scène — mesuré, pas estimé. La pastille se pose alors sur le PIED de la
	   photo du verre : le contrôle touche exactement ce qu'il montre. */
	bottom: 66px;
	transform: translateX(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border: .8px solid var(--line, #e3e1e8);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(20, 18, 36, .1);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--navy, #23212e);
	/* Sur une seule ligne : « Retourner le / verre » sur deux lignes cassait la
	   pastille en pavé — vu à l'écran, à 375 px. */
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.glp-flip.is-active,
.glp-flip.is-active .glp-flip__txt,
.glp-flip.is-active .glp-flip__ico {
	color: #fff;
}
.glp-flip.is-active {
	background: var(--navy, #23212e);
	border-color: var(--navy, #23212e);
}
/* Trois niveaux pour passer devant `html.gm .gm :where(button)` (0,2,1). */
html.gm .gm .glp-flip { font-size: 13px; font-weight: 600; }
html.gm .gm .glp-flip__txt { font-size: 13px; font-weight: 600; }
.glp-flip__ico {
	display: inline-flex;
	transition: transform .5s cubic-bezier(.2,.85,.25,1);
}
/* L'icône tourne quand la vue bascule : le bouton FAIT le geste qu'il annonce. */
.glp-flip.is-active .glp-flip__ico { transform: rotate(180deg); }
.glp-flip[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.glp-flip__ico { transition: none; }
}

/* ------------------------------------------------------------------
   Les réglages
   ------------------------------------------------------------------ */

.glp-group[hidden],
.glp-sheet[hidden] { display: none !important; }

.gm .glp-sheet .glp-sheet-title,
.glp-group .glp-title,
.glp-sheet .glp-sheet-title,
.glp-title {
	margin: 0 0 14px;
	font-family: var(--head, inherit);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tgray, #5f6470);
}

.glp-group .glp-fields,
.glp-sheet .glp-fields { display: grid; gap: 12px; }

.glp-field { display: block; }
.glp-field[hidden] { display: none !important; }
.gm .glp-sheet .glp-field > span,
.glp-group .glp-field > span,
.glp-sheet .glp-field > span {
	display: block;
	margin: 0 0 5px;
	font-family: var(--head, inherit);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tgray, #5f6470);
}
.glp-group .glp-field input[type="text"],
.glp-group .glp-field input[type="file"],
.glp-group .glp-field select,
.glp-sheet .glp-field input[type="text"],
.glp-sheet .glp-field input[type="file"],
.glp-sheet .glp-field select {
	width: 100%;
	font: inherit;
	font-size: 14px;
	padding: 9px 11px;
	border: 1px solid var(--line, #e3e1e8);
	border-radius: 8px;
	background: #fff;
	color: var(--navy, #23212e);
}
.glp-field input[type="text"]:focus,
.glp-field select:focus {
	outline: none;
	border-color: var(--gold-ink, #7a6224);
	box-shadow: 0 0 0 3px rgba(184, 151, 74, .15);
}
.glp-field input[type="range"] {
	width: 100%;
	accent-color: var(--gold-ink, #7a6224);
}

.gm .glp-sheet .glp-note,
.glp-group .glp-note,
.glp-sheet .glp-note {
	margin: 2px 0 0;
	padding-left: 11px;
	border-left: 2px solid var(--gold-ink, #7a6224);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--tgray, #5f6470);
}
.glp-note strong { color: var(--navy, #23212e); }

/* La feuille mobile : elle emprunte `gm__sheet` et n'ajoute que son ancrage. */
.glp-sheet {
	position: fixed;
	inset: auto 0 0 0;
	/* Dans la coque `.gm` (contexte d'empilement à 9000) : il suffit de passer
	   au-dessus de `gm__root`, qui est à 1. */
	z-index: 50;
	padding: 0 10px calc(10px + env(safe-area-inset-bottom));
}
.glp-sheet-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}
.glp-sheet-head .glp-sheet-title { margin: 0; }
html.gm .gm .glp-retour {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gold-ink, #7a6224);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.glp-sheet-card {
	max-height: 58vh;
	overflow-y: auto;
	padding: 16px 16px 20px;
	border-radius: 16px 16px 0 0;
	background: #fff;
	box-shadow: 0 -10px 34px rgba(20, 18, 36, .18);
}

/* LE DISQUE REÇOIT LE DOIGT — mais lui seul.
   La scène reste transparente aux gestes (règle générale plus haut) : c'est
   le CANEVAS qui les prend. Rendre toute la scène sensible volait les touches
   destinées à ce qui est dessous — la barre d'outils, la feuille. */
.glp-scene.is-on .glp-canvas {
	pointer-events: auto;
	/* Sans cela le navigateur interprète le glissement comme un défilement de
	   page et la marque ne suit pas le doigt. */
	touch-action: none;
}

/* ------------------------------------------------------------------
   Téléphone : réserver la place de la feuille
   ------------------------------------------------------------------

   La feuille de réglages occupe le bas de l'écran. Sans réserve, la scène se
   centre sur toute la hauteur et la ligne de cotes passe SOUS le bord de la
   feuille — à moitié lisible, ce qui est pire qu'absente sur une cote. On
   réserve donc le bas, et le disque comme sa cote tiennent au-dessus. */
html.gm .glp-scene__inner {
	justify-content: center;
	padding-bottom: 43%;
}

/* ==================================================================
   BUREAU — la marque se manipule, comme sur le calice
   ==================================================================

   Tout ce bloc est enfermé dans la media query de l'atelier desktop et
   préfixé `html.gd`, exactement comme `configurator-desktop.css` et
   `configurator-popup.css`. Le téléphone et la tablette ne peuvent pas
   être atteints : ils n'ont ni poignée ni glissement, ils règlent au
   curseur, et c'est très bien ainsi. */

@media ( min-width: 1181px ) {

/* LA SCÈNE REDEVIENT SENSIBLE — mais elle seule.
   Fermée, elle reste transparente aux gestes (règle générale plus haut) ;
   ouverte, c'est le CANEVAS qui les reçoit, pas le cadre autour. Rendre
   toute la scène cliquable volait les clics destinés à ce qui est dessous. */
html.gd .glp-scene.is-on .glp-canvas {
	pointer-events: auto;
	touch-action: none;
	cursor: text;
}

/* ── La porte, dans le panneau droit ─────────────────────────────────── */

/* Mêmes formes que `.glcp-porte` : le pied n'invente pas sa propre porte,
   il prend celle que le calice a déjà. */
html.gd .glp-porte {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

html.gd .glp-apercu {
	margin: 0;
	padding: 14px 12px;
	border: 1px solid var( --lgray, #ECEBE7 );
	border-radius: var( --r-field, 12px );
	background: var( --off, #FAFAF8 );
	text-align: center;
	font-size: 15px;
	line-height: 1.35;
	color: var( --navy, #111827 );
	/* Un nom long ne doit pas élargir le panneau ni sortir du cadre. */
	overflow-wrap: anywhere;
}

html.gd .glp-apercu-vide {
	color: #A9ADB6;
	font-size: 13.5px;
	font-style: italic;
}

html.gd .glp-ouvrir {
	width: 100%;
	padding: 12px;
	border: 1px solid var( --navy, #111827 );
	border-radius: var( --r-btn, 14px );
	background: var( --navy, #111827 );
	color: #fff;
	font-family: var( --head, 'Manrope', sans-serif );
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .25s var( --ease, ease );
}

html.gd .glp-ouvrir:hover,
html.gd .glp-ouvrir:focus-visible {
	background: var( --lux, #0B1220 );
}

/* ── Le popup du pied ────────────────────────────────────────────────── */

/* Il hérite de `.glcp` en entier — cadre, pointe, ombre, transitions. On ne
   corrige QUE ce qui distingue le pied : sa vignette de face porte le mot
   « Pied » là où celle du calice porte « Recto », et il n'a qu'une ligne,
   donc pas de liste qui défile. */
html.gd .glp-pop .glcp-rangs {
	overflow: visible;
}

/* ⚠️ `hidden` NE SUFFIT PAS SUR CETTE LIGNE.
   Elle emprunte `.glcp-reduit` au popup du calice, dont la feuille pose un
   `display: flex` a (0,2,0) — soit plus fort que la regle `display:none` que
   le navigateur applique a l attribut `hidden`. La note restait donc VISIBLE
   apres avoir ete masquee, et affichait la reduction d un texte precedent :
   « Reduit a 1,9 mm » sous une marque qui n avait pas ete reduite du tout.
   Constate a l ecran, l attribut bien pose et le calcul bien a jour. */
html.gd .glp-pop-reduit[hidden] { display: none !important; }

/* ── Le calice, mis en retrait ───────────────────────────────────────── */

/* `inert` coupe déjà le clic, le focus et le lecteur d'écran. Il ne se VOIT
   pas : sans ce retrait, les vues du calice restaient franches et pleines
   alors qu'elles ne répondaient plus — ce qui se lit comme une panne. On
   les éteint doucement, et le curseur le dit aussi. */
html.gd[data-glp-vue] .glp-en-retrait {
	opacity: .34;
	filter: saturate( .55 );
	transition: opacity .3s var( --ease, ease ), filter .3s var( --ease, ease );
}

html.gd[data-glp-vue] .glp-en-retrait,
html.gd[data-glp-vue] .glp-en-retrait * {
	cursor: not-allowed;
}

/* Le plancher flottant et la pastille de face DISPARAISSENT plutôt que de
   pâlir : ils désignent un point précis du calice, et un repère estompé qui
   montre encore quelque chose d'invisible est pire qu'un repère absent. */
html.gd[data-glp-vue] .bg-configurator__stage-hint.glp-en-retrait,
html.gd[data-glp-vue] .gd-floor.glp-en-retrait,
html.gd[data-glp-vue] .gd-ruler-exit.glp-en-retrait,
html.gd[data-glp-vue] .bg-configurator__side-badge.glp-en-retrait {
	opacity: 0;
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	html.gd[data-glp-vue] .glp-en-retrait { transition: none; }
}

}

@media ( min-width: 1181px ) {

/* ── Le plancher du pied ─────────────────────────────────────────────────

   Jumeau de `.gd-floor`, dont il EMPRUNTE toutes les classes internes : le
   pas, la cote et la corbeille y sont dessinés par la feuille du desktop, au
   pixel près. On ne pose ici que son ancrage — il flotte au même endroit que
   celui du calice, qu'il remplace le temps de la vue. */
html.gd .glp-floor[hidden] { display: none !important; }

/* L'alerte de définition, en ambre : ni une erreur (le fichier est accepté),
   ni une note neutre (il y a quelque chose à corriger, maintenant). */
html.gd .glp-note--alerte,
.gm .glp-sheet .glp-note--alerte,
.glp-note--alerte {
	border-left-color: #b8860b;
	color: #7a5c07;
	background: rgba( 184, 134, 11, .06 );
	padding: 8px 11px;
	border-radius: 0 8px 8px 0;
}

.glp-note--alerte[hidden],
.glp-note--conflit[hidden] { display: none !important; }

}