/**
 * Saisie au clic sur le verre — couche d'essai, POSÉE SUR l'atelier desktop.
 *
 * Mêmes disciplines que `configurator-desktop.css`, pour les mêmes raisons :
 *  · tout est dans `@media (min-width:1181px)` et préfixé `html.gd` — la
 *    tablette et l'atelier mobile ne peuvent pas être atteints ;
 *  · le skin `configurator-glassora.css` déclare en `!important` à (0,1,0) et
 *    (0,2,0) : il faut le battre à spécificité SUPÉRIEURE, pas égale.
 *
 * La couche ne se charge qu'avec `?ui=popup`. Sans elle, le parcours actuel
 * est intact — les accordéons de l'inspecteur reprennent leur place, car ils
 * ne sont ici que MASQUÉS, jamais retirés du document.
 */

@media ( min-width: 1181px ) {

/* ── L'inspecteur devient une porte ──────────────────────────────────────── */

/* Les accordéons ne sont pas supprimés : les champs canoniques restent dans
   le document, c'est eux que le popup pilote et que la pastille compte. Les
   masquer suffit, et rend le retour arrière gratuit. */
html.gd .bg-configurator__text-flow.glcp-porte-active .bg-configurator__text-lines,
html.gd .bg-configurator__text-flow.glcp-porte-active .bg-configurator__hint {
	display: none !important;
}

/* « Selectionner toutes les lignes » RESTE VISIBLE — il etait masque avec les
   accordeons, et l onglet ne montrait plus que la porte. Il suffit de le
   retirer de la liste ci-dessus.

   ⚠️ AUCUNE REGLE DE PLUS ICI, ET C'EST VOULU. Un premier essai lui imposait
   "display:block" et "width:100%" : il tombait a 42 px de haut quand son
   jumeau « Uniformiser les tailles » en faisait 54, alors que la feuille de
   base les dessine ENSEMBLE — meme fond, meme bordure, meme rayon, meme
   graisse. Habiller la moitie d'une paire, c'est la casser. */

html.gd .glcp-porte {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

html.gd .glcp-apercu {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	padding: 16px 14px !important;
	border: 1px solid var( --lgray, #ECEBE7 ) !important;
	border-radius: var( --r-field, 12px ) !important;
	background: var( --off, #FAFAF8 ) !important;
	text-align: center !important;
	line-height: 1.35 !important;
}

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

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

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

/* ── Le popup ────────────────────────────────────────────────────────────── */

html.gd .glcp {
	position: absolute;
	/* Repli seulement : la largeur réelle est posée par le script, calée sur la
	   place libre à côté du verre. */
	width: 316px;
	/* La scène est en `overflow:hidden` : le popup y est de toute façon
	   rogné. On le borne donc nous-mêmes, et la liste des lignes défile à
	   l'intérieur plutôt que le popup de sortir du cadre. */
	max-height: calc( 100% - 24px );
	display: flex;
	flex-direction: column;
	border: 1px solid var( --lgray, #ECEBE7 );
	border-radius: var( --r-card, 20px );
	background: #fff;
	box-shadow: 0 18px 48px rgba( 17, 24, 39, .18 ), 0 2px 6px rgba( 17, 24, 39, .06 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -6px ) scale( .97 );
	transform-origin: top center;
	transition: opacity .2s var( --ease, ease ), transform .26s var( --ease, ease ), visibility .26s;
	/* Au-dessus du plancher flottant (cote, corbeille) mais sous rien d'autre :
	   la scène s'isole déjà (`isolation:isolate`). */
	z-index: 6;
}

html.gd .glcp.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

html.gd .glcp.is-above { transform-origin: bottom center; }

html.gd .glcp-pointe {
	position: absolute;
	left: 50%;
	width: 13px;
	height: 13px;
	margin-left: -6.5px;
	background: #fff;
	border: 1px solid var( --lgray, #ECEBE7 );
	transform: rotate( 45deg );
}

html.gd .glcp:not( .is-above ):not( .is-cote ) .glcp-pointe {
	top: -7px;
	border-right: 0;
	border-bottom: 0;
}

html.gd .glcp.is-above:not( .is-cote ) .glcp-pointe {
	bottom: -7px;
	border-left: 0;
	border-top: 0;
}

/* Posé À CÔTÉ du verre : la pointe sort par le flanc, et sa hauteur est
   calculée pour viser le marquage. `margin-left` est neutralisé — il ne servait
   qu'au centrage horizontal de la pointe en mode dessus/dessous. */
html.gd .glcp.is-cote .glcp-pointe {
	left: auto;
	right: auto;
	margin-left: 0;
	margin-top: -6.5px;
}

html.gd .glcp.is-cote-gauche .glcp-pointe {
	right: -7px;
	border-left: 0;
	border-bottom: 0;
}

html.gd .glcp.is-cote-droite .glcp-pointe {
	left: -7px;
	border-right: 0;
	border-top: 0;
}

/* Recadré faute de place : la pointe désignerait n'importe quoi. */
html.gd .glcp.is-recadre .glcp-pointe { display: none; }

html.gd .glcp-tete {
	flex: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px 9px;
	border-bottom: 1px solid var( --lgray, #ECEBE7 );
}

html.gd .glcp-face {
	font-family: var( --head, 'Manrope', sans-serif );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --gold-ink, #7A6224 );
}

html.gd .glcp-mesure {
	font-family: var( --head, 'Manrope', sans-serif );
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --tgray, #5F6470 );
}

html.gd .glcp-rangs {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 5px;
	display: flex;
	flex-direction: column;
}

html.gd .glcp-rang {
	position: relative;
	padding: 7px 10px 7px 12px;
	border-radius: 10px;
	transition: background .2s var( --ease, ease );
}

html.gd .glcp-rang:hover { background: var( --off, #FAFAF8 ); }
html.gd .glcp-rang.is-focus { background: var( --off, #FAFAF8 ); }

/* Le filet or de la ligne active : le même repère que le reste de la maison. */
html.gd .glcp-rang.is-focus::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	border-radius: 2px;
	background: var( --gold, #C8A96A );
}

html.gd .glcp-saisie {
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var( --navy, #111827 ) !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	outline: none !important;
	box-shadow: none !important;
}

html.gd .glcp-saisie::placeholder { color: #A9ADB6; }

/* Champs d'un modèle de thème : ils portent un nom, contrairement aux lignes
   de gravure qui se lisent d'elles-mêmes. « Prénoms » et « Date » ne se
   devinent pas l'un de l'autre. */
html.gd .glcp-etiquette {
	display: block;
	margin-bottom: 2px;
	font-family: var( --head, 'Manrope', sans-serif );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --tgray, #5F6470 );
}

html.gd .glcp-rang--modele { padding-top: 9px; padding-bottom: 9px; }

/* Le mot posé quand la face porte un AUTRE modèle : rien à éditer ici, et
   surtout rien qui ressemble à un champ — le popup doit avoir l'air d'un
   panneau d'information, pas d'un formulaire qu'on hésiterait à remplir. */
html.gd .glcp-rang--note { padding: 4px 12px 10px; cursor: default; }
html.gd .glcp-rang--note:hover { background: none; }

html.gd .glcp-rang--note p {
	margin: 0 0 8px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var( --tgray, #5F6470 ) !important;
}

html.gd .glcp-rang--note p:first-child {
	color: var( --navy, #111827 ) !important;
	font-weight: 500 !important;
}

/* Nom du champ à gauche, son échelle à droite — la même disposition que dans
   l'onglet Thèmes. C'est le même réglage : il ne doit pas changer de forme
   selon l'endroit où on le rencontre. */
html.gd .glcp-tete-champ {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 3px;
}

html.gd .glcp-tete-champ .glcp-etiquette { margin-bottom: 0; }

html.gd .glcp-pas--modele { height: 26px; }

html.gd .glcp-pas--modele button {
	width: 22px !important;
	height: 24px !important;
	font-size: 14px !important;
}

html.gd .glcp-pas--modele .glcp-valeur {
	min-width: 44px;
	font-size: 11.5px;
}

/* Deux rangs plutôt qu'un : posé à côté du verre, le popup ne fait plus que
   ~210-260 px. Police, taille, gras et italique sur une seule ligne y
   deviendraient quatre boutons écrasés. La police prend donc toute la largeur,
   la taille et les styles se partagent le rang suivant. */
html.gd .glcp-reglages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
}

html.gd .glcp-reglages select {
	flex: 1 1 100% !important;
	min-width: 0 !important;
	height: 30px !important;
	padding: 0 6px !important;
	border: 1px solid var( --lgray, #ECEBE7 ) !important;
	border-radius: 9px !important;
	background: #fff !important;
	color: var( --navy, #111827 ) !important;
	font-family: var( --head, 'Manrope', sans-serif ) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

html.gd .glcp-pas {
	display: flex;
	align-items: center;
	flex: none;
	height: 30px;
	border: 1px solid var( --lgray, #ECEBE7 );
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
}

html.gd .glcp-pas button {
	width: 24px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var( --tgray, #5F6470 ) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

html.gd .glcp-pas button:hover {
	background: var( --off, #FAFAF8 ) !important;
	color: var( --navy, #111827 ) !important;
}

html.gd .glcp-pas .glcp-valeur {
	min-width: 52px;
	text-align: center;
	font-family: var( --head, 'Manrope', sans-serif );
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

html.gd .glcp-style {
	flex: none !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: 1px solid var( --lgray, #ECEBE7 ) !important;
	border-radius: 9px !important;
	background: #fff !important;
	color: var( --tgray, #5F6470 ) !important;
	font-family: var( --serif, Georgia, serif ) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background .2s var( --ease, ease ), color .2s var( --ease, ease ) !important;
}

html.gd .glcp-style[ aria-pressed="true" ] {
	background: var( --navy, #111827 ) !important;
	border-color: var( --navy, #111827 ) !important;
	color: #fff !important;
}

html.gd .glcp-style--ital { font-style: italic !important; }

/* Le mot que l'atelier ne disait pas : la taille vient d'être réduite pour
   tenir dans la zone. */
html.gd .glcp-reduit {
	display: flex;
	gap: 7px;
	margin-top: 9px;
	padding: 8px 10px;
	border-radius: 9px;
	background: #FBF1EC;
	color: #A8471F;
	font-size: 12.5px;
	line-height: 1.45;
}

/* Le pied tient sur un rang tant qu'il le peut ; sinon la légende passe
   dessous, TOUJOURS calée à droite. À 208 px de large, le bouton et la légende
   ne peuvent pas partager un rang : sans `wrap` + `margin-left:auto`, la
   légende se coupait n'importe où et changeait d'alignement selon la largeur.
   Un repli, un seul, prévisible. */
html.gd .glcp-pied {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 10px 12px 11px;
	border-top: 1px solid var( --lgray, #ECEBE7 );
}

/* Bouton secondaire pleine largeur : la commande touche les quatre lignes
   d'un coup, elle doit se voir et se lire en entier. Le libellé peut tenir sur
   deux lignes à 208 px — c'est voulu, on ne l'abrège pas. */
html.gd .glcp-uniformiser {
	width: 100% !important;
	padding: 9px 12px !important;
	border: 1px solid var( --lgray, #ECEBE7 ) !important;
	border-radius: var( --r-field, 12px ) !important;
	background: #fff !important;
	color: var( --navy, #111827 ) !important;
	font-family: var( --head, 'Manrope', sans-serif ) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: border-color .2s var( --ease, ease ), background .2s var( --ease, ease ) !important;
}

html.gd .glcp-uniformiser:hover:not( [disabled] ),
html.gd .glcp-uniformiser:focus-visible:not( [disabled] ) {
	border-color: var( --gold, #C8A96A ) !important;
	background: var( --off, #FAFAF8 ) !important;
}

html.gd .glcp-uniformiser[ disabled ] {
	color: #A9ADB6 !important;
	background: var( --off, #FAFAF8 ) !important;
	cursor: not-allowed !important;
}

html.gd .glcp-touches {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	text-align: right;
	font-size: 11.5px;
	color: #9AA0AA;
}

/* Le point médian entre les deux raccourcis : un séparateur, pas un mot. */
html.gd .glcp-touches i {
	font-style: normal;
	opacity: .6;
}

html.gd .glcp-touches kbd {
	display: inline-block;
	min-width: 17px;
	padding: 1px 5px;
	border: 1px solid var( --lgray, #ECEBE7 );
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #fff;
	font-family: var( --head, 'Manrope', sans-serif );
	font-size: 10.5px;
	font-weight: 600;
	color: var( --tgray, #5F6470 );
}

html.gd .glcp :focus-visible {
	outline: 2px solid var( --gold, #C8A96A );
	outline-offset: 2px;
}

/* Le curseur annonce que le verre se clique. */
html.gd.glcp-live .bg-configurator__canvas canvas { cursor: pointer; }

@media ( prefers-reduced-motion: reduce ) {
	html.gd .glcp { transition: none; }
}

}