/** * Glassora — Atelier desktop (UI v2). * * Refonte de l'usage GRAND DESKTOP du configurateur : la page qui défilait sur * 1 900 px devient un ATELIER tenant dans une fenêtre — trois colonnes * (bibliothèque · scène · inspecteur), le verre en héros, les outils flottant * en verre dépoli au-dessus de la scène, et la barre d'achat toujours à vue. * Vocabulaire visuel repris de l'atelier mobile (configurator-mobile.css) : * mêmes jetons, mêmes voiles floutés, même courbe d'animation. * * PORTÉE — tout est enfermé dans `@media (min-width:1181px)` ET préfixé * `html.gd`. En dessous de 1181 px (mobile ≤720 et tablette 721-1180), pas une * seule règle de ce fichier ne s'applique : l'atelier mobile et la mise en page * tablette restent strictement inchangés. * * DÉGRADATION — la classe `gd` est posée par un script inline (avant le premier * rendu), mais les composants injectés par configurator-desktop.js (onglets de * l'inspecteur, barre flottante, corbeille) ne sont stylés que sous * `.gd-ready` / `.gd-floor`. Si le JS ne s'exécute pas, l'inspecteur reste une * colonne défilante classique avec sa barre d'achat collée en bas : dégradé, * jamais cassé. */ @media ( min-width: 1181px ) { /* ================================================================== 1. Jetons & cadre de l'atelier ================================================================== */ /* Les jetons vivent sur , pas seulement sur la page : la visite guidée est ancrée dans pour couvrir tout l'écran, et n'héritait donc de rien — sa bulle sortait transparente sur le voile sombre. */ html.gd, html.gd .glassora-configurator-page { --gd-bg: #FAFAF8; --gd-ink: #111827; --gd-muted: #5F6470; --gd-line: rgba( 17, 24, 39, .09 ); --gd-hairline: #ECEBE7; --gd-gold: #C8A96A; --gd-gold-ink: #7A6224; --gd-champ: #E6D4A3; --gd-surface: #FFFFFF; --gd-veil: rgba( 255, 255, 255, .74 ); --gd-sunk: #F4F3EF; --gd-shadow: 0 1px 2px rgba( 17, 24, 39, .04 ), 0 12px 32px rgba( 17, 24, 39, .055 ); --gd-float: 0 10px 30px rgba( 17, 24, 39, .13 ); --gd-ease: cubic-bezier( .32, .72, 0, 1 ); --gd-r: 20px; --gd-r-sm: 12px; /* Hauteur du header fixe du site, mesurée par le JS. */ --gd-top: 97px; --gd-gutter: 20px; /* Au-delà, la scène ne fait que se vider : le verre est borné par la HAUTEUR de la fenêtre, pas par sa largeur. */ --gd-max: 1680px; } /* L'atelier tient dans la fenêtre : plus aucun contrôle sous la ligne de flottaison. Le pied de page du site reste accessible en défilant. */ html.gd .glassora-configurator-page { display: grid; /* Colonne unique explicitement étirée : laissée implicite, la piste se dimensionnait sur le contenu et l'atelier restait collé à gauche sur les très grands écrans. */ grid-template-columns: minmax( 0, 1fr ); grid-template-rows: auto minmax( 0, 1fr ); height: 100vh; height: 100svh; box-sizing: border-box; padding: calc( var( --gd-top ) + 10px ) var( --gd-gutter ) var( --gd-gutter ); background: var( --gd-bg ); overflow: hidden; } html.gd .glassora-configurator-page [data-bg-glass-workflow] { display: none !important; } /* --- Bandeau de titre : une ligne, pas un hero --------------------- */ html.gd .bg-configurator-hero { grid-row: 1; width: 100% !important; max-width: var( --gd-max ) !important; margin: 0 auto !important; padding: 0 2px 10px !important; background: none !important; border: 0 !important; } html.gd .bg-configurator-hero__shell { display: flex !important; align-items: baseline !important; gap: 12px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } html.gd .bg-configurator-hero__eyebrow { display: inline-block !important; margin: 0 !important; color: var( --gd-gold-ink ) !important; font-family: 'Manrope', sans-serif !important; font-size: .62rem !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } html.gd .bg-configurator-hero__title { margin: 0 !important; color: var( --gd-ink ) !important; font-family: 'Cormorant Garamond', serif !important; font-size: 1.22rem !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: 0 !important; } html.gd .bg-configurator-hero__lead { display: none !important; } /* ================================================================== 2. Grille : bibliothèque · scène · inspecteur ================================================================== */ html.gd .bg-configurator { grid-row: 2; width: 100% !important; max-width: var( --gd-max ) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax( 264px, 296px ) minmax( 0, 1fr ) minmax( 344px, 384px ) !important; grid-template-rows: minmax( 0, 1fr ) !important; align-items: stretch !important; gap: 16px !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; background: none !important; } /* Reliquats de l'ancienne mise en page mobile : jamais sur desktop. */ html.gd .bg-configurator__mobile-hero-title, html.gd .bg-configurator__mobile-control, html.gd .bg-configurator__mobile-steps, html.gd .bg-configurator__mobile-bat-bar, html.gd .bg-configurator__mobile-edit-lock, html.gd .bg-configurator__sheet-validate, html.gd .bg-configurator__scrim { display: none !important; } /* Surface commune des trois colonnes. */ html.gd .bg-configurator__panel--left, html.gd .bg-configurator__stage, html.gd .bg-configurator__panel--right { position: relative !important; inset: auto !important; transform: none !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; max-height: none !important; margin: 0 !important; background: var( --gd-surface ) !important; border: 1px solid var( --gd-hairline ) !important; border-radius: var( --gd-r ) !important; box-shadow: var( --gd-shadow ) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ================================================================== 3. Colonne 1 — Bibliothèque de l'atelier ================================================================== */ html.gd .bg-configurator__panel--left { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 18px 16px !important; overflow-y: auto !important; overscroll-behavior: contain !important; z-index: 1 !important; } html.gd .bg-configurator__panel--left::-webkit-scrollbar, html.gd .bg-configurator__panel--right::-webkit-scrollbar, html.gd .gd-pane::-webkit-scrollbar { width: 10px; } html.gd .bg-configurator__panel--left::-webkit-scrollbar-thumb, html.gd .bg-configurator__panel--right::-webkit-scrollbar-thumb, html.gd .gd-pane::-webkit-scrollbar-thumb { background: rgba( 17, 24, 39, .14 ); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } /* Gouttière de défilement réservée en permanence. Sans elle, replier « Modèles » supprime le débordement, la barre de 10 px disparaît et toute la colonne s'élargit d'autant : la page saute à chaque pli/dépli. On réserve la place une fois pour toutes, occupée ou non. Et `scrollbar-width` sur les trois : sans elle, seule la section Thèmes héritait de la barre fine, les onglets n'avaient pas la même laisse. */ html.gd .bg-configurator__panel--left, html.gd .bg-configurator__panel--right:not( .gd-ready ), html.gd .gd-pane { scrollbar-width: thin !important; scrollbar-gutter: stable !important; } /* L'inspecteur en onglets ne défile pas lui-même (c'est la section active qui défile) : sans cette annulation il réserve une seconde gouttière, héritée de sa vie de colonne, et vole 10 px au contenu. */ html.gd .bg-configurator__panel--right.gd-ready { scrollbar-gutter: auto !important; } html.gd .bg-configurator__panel--left .bg-configurator__intro { flex: 0 0 auto !important; display: grid !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } html.gd .bg-configurator__panel--left .bg-configurator__eyebrow { display: block !important; margin: 0 !important; color: var( --gd-gold-ink ) !important; font-family: 'Manrope', sans-serif !important; font-size: .6rem !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } html.gd .bg-configurator__panel--left .bg-configurator__intro h2 { margin: 0 !important; color: var( --gd-ink ) !important; font-family: 'Cormorant Garamond', serif !important; font-size: 1.28rem !important; font-weight: 500 !important; line-height: 1.1 !important; } html.gd .bg-configurator__panel--left .bg-configurator__technique { display: none !important; } /* Occasions & modèles : plus de cartouches dans la carte, la colonne EST la carte. Des filets suffisent à séparer les deux temps. */ html.gd .bg-configurator__themes, html.gd .bg-configurator__templates { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html.gd .bg-configurator__templates { padding-top: 16px !important; border-top: 1px solid var( --gd-hairline ) !important; } html.gd .bg-configurator__theme-dropdown select { min-height: 44px !important; border-radius: var( --gd-r-sm ) !important; transition: border-color .2s var( --gd-ease ), box-shadow .2s var( --gd-ease ) !important; } html.gd .bg-configurator__theme-dropdown select:focus-visible { box-shadow: 0 0 0 3px rgba( 200, 169, 106, .22 ) !important; } html.gd .bg-configurator__collapse { width: 100% !important; padding: 0 !important; background: none !important; border: 0 !important; } html.gd .bg-configurator__templates h3 { margin: 0 !important; font-family: 'Manrope', sans-serif !important; font-size: .64rem !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var( --gd-muted ) !important; } html.gd .bg-configurator__tpl-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important; gap: 10px !important; margin-top: 12px !important; } html.gd .bg-configurator__tpl-card { border-radius: var( --gd-r-sm ) !important; transition: transform .22s var( --gd-ease ), border-color .22s var( --gd-ease ), box-shadow .22s var( --gd-ease ) !important; } html.gd .bg-configurator__tpl-card:hover { transform: translateY( -2px ) !important; } /* Import de fichier : dernière affordance de la colonne, poussée en bas tant qu'il reste de la place. */ html.gd .bg-configurator__panel--left .bg-configurator__asset-upload { flex: 0 0 auto !important; margin-top: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 52px !important; padding: 0 16px !important; background: var( --gd-sunk ) !important; border: 1px dashed #D8D5CC !important; border-radius: var( --gd-r-sm ) !important; color: var( --gd-ink ) !important; font-family: 'Manrope', sans-serif !important; font-size: .78rem !important; font-weight: 700 !important; cursor: pointer !important; transition: border-color .2s var( --gd-ease ), background .2s var( --gd-ease ), color .2s var( --gd-ease ) !important; } html.gd .bg-configurator__panel--left .bg-configurator__asset-upload:hover, html.gd .bg-configurator__panel--left .bg-configurator__asset-upload:focus-visible { background: #FAF7EF !important; border-color: var( --gd-gold ) !important; color: var( --gd-gold-ink ) !important; outline: none !important; } /* Colonne au repos : une phrase plutôt qu'un vide. Elle s'efface d'elle-même dès que la section « Modèles » perd son attribut `hidden`. */ html.gd .gd-empty { flex: 0 0 auto; margin: -4px 0 0 !important; color: var( --gd-muted ); font-family: 'Inter', sans-serif; font-size: .76rem; line-height: 1.5; } html.gd .bg-configurator__templates:not( [hidden] ) + .gd-empty { display: none; } /* Aide-mémoire clavier — l'atelier desktop a un clavier, autant le dire. */ html.gd .gd-keys { flex: 0 0 auto; display: grid; gap: 7px; /* Poussé en bas de la colonne : import + raccourcis forment le pied de la bibliotheque. `!important` car le skin remet a plat les marges des enfants du panneau. */ margin: auto 0 0 !important; padding: 12px 14px; background: var( --gd-sunk ); border-radius: var( --gd-r-sm ); } html.gd .gd-keys > strong { color: var( --gd-muted ); font-family: 'Manrope', sans-serif; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } html.gd .gd-keys > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var( --gd-muted ); font-family: 'Inter', sans-serif; font-size: .72rem; line-height: 1.3; } html.gd .gd-keys kbd { flex: 0 0 auto; padding: 3px 7px; background: var( --gd-surface ); border: 1px solid var( --gd-hairline ); border-bottom-width: 2px; border-radius: 7px; color: var( --gd-ink ); font-family: 'Manrope', sans-serif; font-size: .66rem; font-weight: 700; line-height: 1; } /* ================================================================== 4. Colonne 2 — La scène : le verre, et rien qui le concurrence ================================================================== */ html.gd .bg-configurator__stage { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; isolation: isolate !important; } html.gd .bg-configurator__preview { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; min-width: 0 !important; max-height: none !important; max-width: none !important; margin: 0 !important; padding: 74px 28px 92px !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* Le verre prend toute la hauteur disponible sans jamais être suréchantillonné au-delà de sa définition : `max-*` seulement, pas de `width:100%`. */ html.gd .bg-configurator__canvas { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain; touch-action: none; } /* Vue RÈGLE : instrument de mesure, échelle 1:1. On ne la contraint pas à la hauteur de la scène (les cotes annoncées deviendraient fausses) ; si elle dépasse, elle défile. Même arbitrage que l'atelier mobile. */ html.gd .bg-configurator__stage:has( [data-bg-config-view="ruler"].is-active ) .bg-configurator__preview { display: block !important; align-items: flex-start !important; text-align: center !important; overflow: auto !important; overscroll-behavior: contain !important; padding: 74px 20px 92px !important; } html.gd .bg-configurator__stage:has( [data-bg-config-view="ruler"].is-active ) .bg-configurator__canvas { display: inline-block !important; max-height: none !important; object-fit: fill; } /* --- Barres d'outils flottantes ----------------------------------- */ html.gd .bg-configurator__toolbar { position: absolute !important; top: 14px !important; left: 14px !important; right: 14px !important; z-index: 4 !important; display: flex !important; grid-template-columns: none !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; } html.gd .bg-configurator__toolbar > * { pointer-events: auto !important; } html.gd .bg-configurator__views, html.gd .bg-configurator__tools { justify-self: auto !important; margin-inline: 0 !important; width: max-content !important; padding: 5px !important; background: var( --gd-veil ) !important; -webkit-backdrop-filter: blur( 20px ) saturate( 180% ) !important; backdrop-filter: blur( 20px ) saturate( 180% ) !important; border: 1px solid var( --gd-line ) !important; border-radius: 999px !important; box-shadow: var( --gd-float ) !important; } html.gd .bg-configurator__views .bg-configurator__view { height: 36px !important; min-height: 36px !important; background: transparent !important; border-color: transparent !important; transition: background .2s var( --gd-ease ), color .2s var( --gd-ease ), transform .2s var( --gd-ease ) !important; } html.gd .bg-configurator__views .bg-configurator__view:hover, html.gd .bg-configurator__views .bg-configurator__view:focus-visible { background: rgba( 17, 24, 39, .06 ) !important; border-color: transparent !important; color: var( --gd-ink ) !important; } html.gd .bg-configurator__views .bg-configurator__view.is-active { background: var( --gd-ink ) !important; border-color: var( --gd-ink ) !important; color: #FFFFFF !important; } html.gd .bg-configurator__views .bg-configurator__view:active { transform: scale( .96 ) !important; } /* L'œil retrouve sa place : sur la scène, pas dans la colonne d'achat. */ html.gd .bg-configurator__views .bg-configurator__view--icon { display: inline-flex !important; } html.gd .bg-configurator__tools { gap: 2px !important; } html.gd .bg-configurator__tools .bg-configurator__tool { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; display: grid !important; place-items: center !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; color: var( --gd-ink ) !important; box-shadow: none !important; transition: background .2s var( --gd-ease ), transform .2s var( --gd-ease ) !important; } html.gd .bg-configurator__tools .bg-configurator__tool-label { display: none !important; } html.gd .bg-configurator__tools .bg-configurator__tool:hover, html.gd .bg-configurator__tools .bg-configurator__tool:focus-visible { background: rgba( 17, 24, 39, .07 ) !important; outline: none !important; } html.gd .bg-configurator__tools .bg-configurator__tool:active { transform: scale( .92 ) !important; } html.gd .bg-configurator__tools .bg-configurator__tool--reset:hover { background: rgba( 156, 33, 49, .1 ) !important; color: #9C2131 !important; } /* « Fichier » : l'import est une action de premier plan — pastille dorée dans la barre d'outils de la scène, toujours sous les yeux. */ html.gd .bg-configurator__tools .bg-configurator__tool--upload-shortcut { width: auto !important; min-width: 0 !important; padding: 0 16px 0 12px !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; border-radius: 999px !important; background: linear-gradient( 120deg, var( --gd-gold ), var( --gd-champ ) ) !important; color: #0B1220 !important; box-shadow: 0 4px 14px rgba( 200, 169, 106, .35 ) !important; } html.gd .bg-configurator__tools .bg-configurator__tool--upload-shortcut:hover, html.gd .bg-configurator__tools .bg-configurator__tool--upload-shortcut:focus-visible { background: linear-gradient( 120deg, var( --gd-gold ), var( --gd-champ ) ) !important; box-shadow: 0 6px 18px rgba( 200, 169, 106, .5 ) !important; } html.gd .bg-configurator__tools .bg-configurator__tool--upload-shortcut .bg-configurator__tool-label { display: inline !important; font-family: 'Manrope', sans-serif !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .03em !important; } /* --- Plancher flottant : cote du marquage + suppression ------------ */ html.gd .gd-floor { position: absolute; left: 50%; bottom: 16px; z-index: 4; transform: translateX( -50% ); display: flex; align-items: center; gap: 10px; max-width: calc( 100% - 28px ); pointer-events: none; } html.gd .gd-floor > * { pointer-events: auto; } html.gd .gd-floor .bg-configurator__adjust--desktop { display: flex !important; align-items: center !important; align-content: center !important; gap: 2px !important; margin: 0 !important; padding: 5px !important; background: var( --gd-veil ) !important; -webkit-backdrop-filter: blur( 20px ) saturate( 180% ) !important; backdrop-filter: blur( 20px ) saturate( 180% ) !important; border: 1px solid var( --gd-line ) !important; border-radius: 999px !important; box-shadow: var( --gd-float ) !important; } html.gd .gd-floor .bg-configurator__adjust-head, html.gd .gd-floor .bg-configurator__adjust--desktop .bg-configurator__hint, html.gd .gd-floor .bg-configurator__equal-size { display: none !important; } html.gd .gd-floor .bg-configurator__stepper { display: flex !important; align-items: center !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html.gd .gd-floor .bg-configurator__stepper-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; display: grid !important; place-items: center !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; color: var( --gd-ink ) !important; font-size: 1.05rem !important; line-height: 1 !important; box-shadow: none !important; transition: background .18s var( --gd-ease ), transform .18s var( --gd-ease ) !important; } html.gd .gd-floor .bg-configurator__stepper-btn:hover { background: rgba( 17, 24, 39, .07 ) !important; } html.gd .gd-floor .bg-configurator__stepper-btn:active { transform: scale( .9 ) !important; } html.gd .gd-floor .bg-configurator__metrics { min-width: 116px !important; padding: 0 4px !important; text-align: center !important; color: var( --gd-ink ) !important; font-family: 'Manrope', sans-serif !important; font-size: .78rem !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; letter-spacing: .01em !important; background: none !important; border: 0 !important; } /* Corbeille — l'équivalent visible de la touche « Suppr ». Même arbitrage que l'atelier mobile : elle n'apparaît que s'il y a quelque chose à retirer. */ html.gd .gd-trash { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; background: var( --gd-veil ); -webkit-backdrop-filter: blur( 20px ) saturate( 180% ); backdrop-filter: blur( 20px ) saturate( 180% ); border: 1px solid rgba( 156, 33, 49, .22 ); border-radius: 50%; color: #9C2131; cursor: pointer; box-shadow: var( --gd-float ); transition: transform .18s var( --gd-ease ), background .18s var( --gd-ease ); } html.gd .gd-trash:hover { background: rgba( 156, 33, 49, .1 ); } html.gd .gd-trash:active { transform: scale( .92 ); } html.gd .gd-trash[hidden] { display: none; } /* --- Invitation de départ ------------------------------------------ */ html.gd .bg-configurator__stage-hint:not( [hidden] ) { position: absolute !important; left: 50% !important; bottom: 76px !important; z-index: 3 !important; transform: translateX( -50% ) !important; display: block !important; width: min( 380px, calc( 100% - 40px ) ) !important; margin: 0 !important; padding: 12px 18px !important; background: rgba( 255, 255, 255, .88 ) !important; -webkit-backdrop-filter: blur( 16px ) !important; backdrop-filter: blur( 16px ) !important; border: 1px solid var( --gd-line ) !important; border-radius: 16px !important; box-shadow: 0 6px 22px rgba( 17, 24, 39, .08 ) !important; color: var( --gd-muted ) !important; font-family: 'Inter', sans-serif !important; font-size: .78rem !important; line-height: 1.45 !important; text-align: center !important; } /* Pastille recto/verso posée sur le verre : le badge de la barre d'outils fait déjà le travail, en toutes lettres. */ html.gd .bg-configurator__preview .bg-configurator__side-badge { display: none !important; } /* ================================================================== 5. Colonne 3 — L'inspecteur ================================================================== */ html.gd .bg-configurator__panel--right { grid-column: 3 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; z-index: 1 !important; } /* Avec le JS : une seule section à la fois, elle seule défile. */ html.gd .bg-configurator__panel--right.gd-ready { overflow: hidden !important; } html.gd .bg-configurator__panel--right.gd-ready > .gd-pane { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; } /* Spécificité (0,4,0) : la règle de mise en forme des sections, plus bas dans le fichier, est elle aussi en `!important` — à égalité, la dernière gagne. */ html.gd .bg-configurator__panel--right > .gd-pane.gd-pane--off { display: none !important; } /* --- Onglets segmentés -------------------------------------------- */ html.gd .gd-tabs { flex: 0 0 auto; display: flex; gap: 3px; margin: 14px 14px 4px; padding: 4px; background: var( --gd-sunk ); border-radius: 13px; } html.gd .gd-tabs button { flex: 1; min-height: 34px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var( --gd-muted ); font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: background .22s var( --gd-ease ), color .22s var( --gd-ease ), box-shadow .22s var( --gd-ease ); } html.gd .gd-tabs button:hover { color: var( --gd-ink ); } html.gd .gd-tabs button[aria-selected="true"] { background: var( --gd-surface ); color: var( --gd-ink ); box-shadow: 0 1px 2px rgba( 17, 24, 39, .06 ), 0 3px 10px rgba( 17, 24, 39, .05 ); } /* --- Corps des sections -------------------------------------------- */ /* Le gabarit place « Validation BAT » APRÈS le bloc d'achat : l'ordre visuel est rétabli ici (onglets, section, barre d'achat), sans toucher au DOM. */ html.gd .bg-configurator__panel--right > .gd-tabs { order: 0 !important; } html.gd .bg-configurator__panel--right > .gd-pane { order: 1 !important; /* Les sections héritent d'une grille de carte qui ÉTIRE ses rangées pour remplir la hauteur : dans une colonne pleine hauteur, le titre faisait 95 px et les champs flottaient au milieu du vide. On repart d'un flux simple, aligné en haut. */ display: grid !important; grid-template-rows: none !important; grid-template-columns: minmax( 0, 1fr ) !important; align-content: start !important; gap: 12px !important; position: static !important; top: auto !important; margin: 0 !important; padding: 14px 16px 20px !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html.gd .bg-configurator__panel--right > .gd-pane > h3 { margin: 0 !important; color: var( --gd-ink ) !important; font-family: 'Manrope', sans-serif !important; font-size: .62rem !important; font-weight: 800 !important; letter-spacing: .14em !important; line-height: 1.2 !important; text-transform: uppercase !important; color: var( --gd-muted ) !important; } html.gd .bg-configurator__glass-row { display: grid !important; grid-template-columns: minmax( 0, 1fr ) 104px !important; gap: 10px !important; align-items: end !important; } html.gd .bg-configurator__spec { margin: 0 !important; padding: 12px 14px !important; background: var( --gd-sunk ) !important; border: 0 !important; border-radius: var( --gd-r-sm ) !important; color: var( --gd-muted ) !important; font-family: 'Inter', sans-serif !important; font-size: .76rem !important; line-height: 1.5 !important; } html.gd .bg-configurator__text-flow .bg-configurator__hint { margin: 0 0 12px !important; color: var( --gd-muted ) !important; font-size: .74rem !important; line-height: 1.45 !important; } html.gd .bg-configurator__line-panel summary { min-height: 46px !important; } /* Utilitaires de texte : deux boutons jumeaux, sous les lignes. */ html.gd .gd-text-utils { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 8px; margin-top: 12px; } html.gd .gd-text-utils .bg-configurator__select-all, html.gd .gd-text-utils .bg-configurator__equal-size { width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 0 10px !important; border-radius: var( --gd-r-sm ) !important; font-family: 'Manrope', sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; } /* ================================================================== 6. Barre d'achat — toujours à vue, jamais à chercher ================================================================== */ html.gd .bg-configurator__panel--right > .bg-configurator__cta { order: 2 !important; position: sticky !important; bottom: 0 !important; z-index: 2 !important; flex: 0 0 auto !important; display: grid !important; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important; gap: 9px !important; margin: 0 !important; padding: 13px 16px 15px !important; background: var( --gd-surface ) !important; border: 0 !important; border-top: 1px solid var( --gd-hairline ) !important; border-radius: 0 !important; box-shadow: 0 -10px 28px rgba( 17, 24, 39, .05 ) !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__price.is-ready { order: 1 !important; grid-column: 1 / -1 !important; margin: 0 !important; padding: 0 2px 3px !important; border-top: 0 !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__price-total { font-size: 1.44rem !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__add-cart { order: 2 !important; grid-column: 1 / -1 !important; min-height: 54px !important; border-radius: 15px !important; font-family: 'Manrope', sans-serif !important; font-size: .92rem !important; font-weight: 700 !important; box-shadow: 0 8px 22px rgba( 200, 169, 106, .3 ) !important; transition: transform .2s var( --gd-ease ), box-shadow .2s var( --gd-ease ) !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__add-cart:active { transform: scale( .985 ) !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__bat-button { order: 3 !important; grid-column: 1 !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__devis { order: 4 !important; grid-column: 2 !important; margin: 0 !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__bat-button, html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__devis { width: 100% !important; min-height: 44px !important; padding: 0 10px !important; border-radius: var( --gd-r-sm ) !important; font-family: 'Manrope', sans-serif !important; font-size: .73rem !important; font-weight: 700 !important; } /* « Visualiser le verre » vit désormais sur la scène (icône œil). */ html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__glass-preview-button { display: none !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__status { order: 5 !important; grid-column: 1 / -1 !important; margin: 0 !important; padding: 0 2px !important; background: none !important; border: 0 !important; color: var( --gd-muted ) !important; font-family: 'Inter', sans-serif !important; font-size: .7rem !important; line-height: 1.4 !important; text-align: center !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__status:empty { display: none !important; } /* ================================================================== 7. Modale d'aperçu du verre ================================================================== */ html.gd .bg-configurator__modal-dialog { border-radius: 22px !important; box-shadow: 0 40px 80px rgba( 17, 24, 39, .28 ) !important; } /* ================================================================== 8. Accessibilité & préférences système ================================================================== */ html.gd .gd-tabs button:focus-visible, html.gd .gd-trash:focus-visible { outline: 2px solid var( --gd-gold ); outline-offset: 2px; } @media ( prefers-reduced-motion: reduce ) { html.gd .glassora-configurator-page *, html.gd .glassora-configurator-page *::before, html.gd .glassora-configurator-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Écrans peu hauts (portables 13" en 1280×800) : on rogne les marges, pas les contrôles — la barre d'achat et la scène restent entières. */ @media ( max-height: 820px ) { html.gd .glassora-configurator-page { --gd-gutter: 14px; } html.gd .bg-configurator-hero { padding-bottom: 8px !important; } html.gd .bg-configurator__preview { padding: 66px 20px 82px !important; } html.gd .bg-configurator__panel--right > .bg-configurator__cta { gap: 7px !important; padding: 10px 16px 12px !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__add-cart { min-height: 48px !important; } html.gd .bg-configurator__panel--right .bg-configurator__cta .bg-configurator__price-total { font-size: 1.3rem !important; } /* L'onglet Verre (choix + validation BAT) doit tenir sans défiler : le résumé resserre ses lignes. */ html.gd .bg-configurator__glass-choice .bg-configurator__validation { gap: 8px !important; padding-top: 10px !important; } html.gd .bg-configurator__summary { padding: 2px 14px !important; } html.gd .bg-configurator__sum-row { padding: 6px 0 !important; } html.gd .bg-configurator__panel--right > .gd-pane { gap: 10px !important; } html.gd .bg-configurator__spec { padding: 10px 12px !important; } } /* ================================================================== 9. Immersion — l'atelier prend l'écran (miroir de la coque mobile) ================================================================== */ /* Le chrome du site s'efface une fois l'atelier prêt. `gd-live` n'est posée QUE par configurator-desktop.js après avoir construit la barre de titre et son bouton de sortie : sans JS, le header du site reste — on ne piège jamais l'utilisateur sur une page sans navigation. */ html.gd.gd-live, html.gd.gd-live body { height: 100%; overflow: hidden; } html.gd.gd-live #hdr, html.gd.gd-live .site-top-marquee, html.gd.gd-live .glassora-hero-marquee, html.gd.gd-live .site-footer, html.gd.gd-live body > footer, html.gd.gd-live .bg-configurator-hero { display: none !important; } html.gd.gd-live .glassora-configurator-page { padding-top: 12px; } /* --- Barre de titre (miroir de gm__bar) ---------------------------- */ html.gd .gd-topbar { grid-row: 1; width: 100%; max-width: var( --gd-max ); margin: 0 auto; display: grid; grid-template-columns: 44px minmax( 0, 1fr ) 44px; align-items: center; gap: 8px; padding: 0 2px 10px; } html.gd .gd-topbar__title { display: grid; gap: 1px; text-align: center; min-width: 0; } html.gd .gd-topbar__title > span { color: var( --gd-gold-ink ); font-family: 'Manrope', sans-serif; font-size: .58rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } html.gd .gd-topbar__title > strong { color: var( --gd-ink ); font-family: 'Cormorant Garamond', serif; font-size: 1.18rem; font-weight: 500; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sortie : navigation EXPLICITE (referrer du site, sinon data-gm-exit-url), jamais history.back() — même règle que l'atelier mobile. */ html.gd .gd-exit { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: var( --gd-veil ); -webkit-backdrop-filter: blur( 14px ); backdrop-filter: blur( 14px ); border: 1px solid var( --gd-line ); border-radius: 50%; color: var( --gd-ink ); cursor: pointer; transition: transform .18s var( --gd-ease ), background .18s var( --gd-ease ); } html.gd .gd-exit:hover { background: rgba( 17, 24, 39, .07 ); } html.gd .gd-exit:active { transform: scale( .92 ); } /* --- Sortie de la vue règle (miroir de gm__ruler-exit) ------------- */ /* Sans elle, la règle est une impasse : le plancher flottant s'efface et un seul geste ramène au verre. */ html.gd .gd-ruler-exit { position: absolute; left: 50%; bottom: 16px; transform: translateX( -50% ); z-index: 5; display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; background: #111827; color: #FAFAF8; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba( 17, 24, 39, .28 ); transition: transform .18s var( --gd-ease ); } html.gd .gd-ruler-exit:active { transform: translateX( -50% ) scale( .96 ); } html.gd .gd-ruler-exit svg { width: 16px; height: 16px; } html.gd .bg-configurator__stage:has( [data-bg-config-view="ruler"].is-active ) .gd-ruler-exit { display: inline-flex; } html.gd .bg-configurator__stage:has( [data-bg-config-view="ruler"].is-active ) .gd-floor { display: none; } /* --- Toast (miroir de gm__toast) ----------------------------------- */ html.gd .gd-toast { position: absolute; top: 72px; left: 50%; transform: translateX( -50% ) translateY( -6px ); z-index: 6; max-width: min( 420px, calc( 100% - 32px ) ); padding: 10px 18px; border-radius: 999px; background: #111827; color: #FAFAF8; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: 0 10px 30px rgba( 17, 24, 39, .25 ); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s var( --gd-ease ); } html.gd .gd-toast.is-on { opacity: 1; transform: translateX( -50% ) translateY( 0 ); } /* --- Badge d'onglet (miroir des pastilles du dock mobile) ---------- */ html.gd .gd-tabs em { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; vertical-align: 1px; font-family: 'Manrope', sans-serif; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1; color: #0B1220; background: linear-gradient( 120deg, var( --gd-gold ), var( --gd-champ ) ); border-radius: 999px; } html.gd .gd-tabs em[hidden] { display: none; } /* La coche est un TRACE, pas un caractere : « ✓ » (U+2713) n'existe dans aucune des polices du site et tombait en carre vide. */ html.gd .gd-tabs em svg { width: 11px; height: 11px; display: block; } /* --- Entrée d'une section de l'inspecteur -------------------------- */ @keyframes gd-pane-in { from { opacity: 0; transform: translateY( 8px ); } to { opacity: 1; transform: none; } } html.gd .gd-pane.gd-pane-in { animation: gd-pane-in .28s var( --gd-ease ); } /* ================================================================== 10. Bibliothèque dans l'inspecteur — deux colonnes, zéro défilement ================================================================== */ /* Le JS déplace la colonne « Bibliothèque » DANS l'inspecteur (onglet Thèmes, même vocabulaire que le dock mobile) et replie la validation BAT dans l'onglet Verre. Tout est gardé derrière `gd-live` : sans JS, le panneau reste à gauche et la grille à trois colonnes reprend ses droits. */ html.gd.gd-live .glassora-configurator-page { --gd-max: 1480px; } html.gd.gd-live .bg-configurator { grid-template-columns: minmax( 0, 1fr ) minmax( 360px, 420px ) !important; } html.gd.gd-live .bg-configurator__stage { grid-column: 1 !important; } html.gd.gd-live .bg-configurator__panel--right { grid-column: 2 !important; } /* La bibliothèque devenue section d'onglet abandonne son costume de colonne : plus de carte dans la carte, elle se fond dans l'inspecteur. */ html.gd .bg-configurator__panel--right > .bg-configurator__panel--left { /* Devenu onglet, il reste un élément flexible d'une colonne : son `align-self: start` de colonne le faisait se dimensionner sur son contenu, si bien que replier « Modèles » rétrécissait la section de 47 px et décalait tout. Il occupe désormais toute la largeur. */ align-self: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: auto !important; } /* L'en-tête « Thèmes de gravure » répète l'onglet : superflu. */ html.gd .bg-configurator__panel--right .bg-configurator__intro { display: none !important; } /* La zone d'import devient secondaire (la pastille dorée de la scène est l'accès principal) : présence discrète en pied de section. */ html.gd .bg-configurator__panel--right .bg-configurator__asset-upload { min-height: 46px !important; } /* --- Validation BAT repliée dans l'onglet Verre -------------------- */ html.gd .bg-configurator__glass-choice .bg-configurator__validation { /* Le skin (§35) l'épinglait en (3,3) dans la grande grille : dans la colonne unique du pane, ce placement créait des colonnes implicites et posait titre, champs et spécifications côte à côte. */ grid-area: auto !important; grid-column: 1 !important; grid-row: auto !important; margin: 6px 0 0 !important; padding: 14px 0 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var( --gd-hairline ) !important; border-radius: 0 !important; box-shadow: none !important; display: grid !important; gap: 10px !important; align-content: start !important; } html.gd .bg-configurator__glass-choice .bg-configurator__validation > h3 { margin: 0 !important; color: var( --gd-muted ) !important; font-family: 'Manrope', sans-serif !important; font-size: .62rem !important; font-weight: 800 !important; letter-spacing: .14em !important; line-height: 1.2 !important; text-transform: uppercase !important; } html.gd .bg-configurator__glass-choice .bg-configurator__validation .bg-configurator__hint { margin: 0 !important; color: var( --gd-muted ) !important; font-family: 'Inter', sans-serif !important; font-size: .72rem !important; line-height: 1.45 !important; } /* ================================================================== 11. Taille du texte, champ par champ (+ / −) ================================================================== */ /* Le pas-à-pas flottant de la scène redimensionne TOUT le marquage, dessin compris. Celui-ci, posé sur la ligne du libellé de chaque champ, ne touche qu'à ce texte-là. Boutons compacts : sur desktop la souris vise juste. */ html.gd .bg-configurator__tpl-field-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } html.gd .bg-configurator__tpl-textsize { flex: 0 0 auto !important; padding: 2px !important; background: var( --gd-surface ) !important; border: 1px solid var( --gd-hairline ) !important; border-radius: 999px !important; } html.gd .bg-configurator__tpl-textsize button { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: .85rem !important; transition: background .18s var( --gd-ease ), transform .18s var( --gd-ease ) !important; } html.gd .bg-configurator__tpl-textsize button:active:not( [disabled] ) { transform: scale( .9 ) !important; } html.gd .bg-configurator__tpl-textsize > span { min-width: 42px !important; font-size: .7rem !important; } /* Personnaliser un modèle est une tâche à soi seule : l'aide-mémoire clavier n'a rien à y faire et volait 134 px à la section. Il revient dès que les champs du modèle se referment. */ html.gd .bg-configurator__panel--left:has( .bg-configurator__tpl-fields--inline ) .gd-keys { display: none !important; } /* ================================================================== 12. Visite guidée ================================================================== */ /* Le projecteur n'est PAS un trou découpé dans un voile : c'est une boîte transparente entourée d'une ombre de 9999px. Un seul élément, aucun masque SVG, aucune découpe à recalculer — et l'élément éclairé reste net, jamais redessiné par-dessus. */ html.gd .gd-tour { position: fixed; inset: 0; z-index: 9500; } html.gd .gd-tour[hidden] { display: none; } html.gd .gd-tour__spot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba( 11, 18, 32, .62 ); transition: top .28s var( --gd-ease ), left .28s var( --gd-ease ), width .28s var( --gd-ease ), height .28s var( --gd-ease ); pointer-events: auto; } /* --- La bulle ------------------------------------------------------ */ html.gd .gd-tour__bubble { position: absolute; width: min( 330px, calc( 100vw - 32px ) ); padding: 20px 22px 18px; background: var( --gd-surface ); border-radius: 18px; box-shadow: 0 18px 50px rgba( 11, 18, 32, .3 ); transition: top .28s var( --gd-ease ), left .28s var( --gd-ease ); } html.gd .gd-tour__step { margin: 0 0 6px; color: var( --gd-gold-ink ); font-family: 'Manrope', sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } html.gd .gd-tour__title { margin: 0 0 8px; color: var( --gd-ink ); font-family: 'Cormorant Garamond', serif; font-size: 1.34rem; font-weight: 500; line-height: 1.15; } html.gd .gd-tour__body { margin: 0; color: var( --gd-muted ); font-family: 'Inter', sans-serif; font-size: .84rem; line-height: 1.55; } /* --- Où l'on en est ------------------------------------------------ */ html.gd .gd-tour__dots { display: flex; gap: 6px; margin: 16px 0 14px; } html.gd .gd-tour__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba( 17, 24, 39, .16 ); transition: background .2s var( --gd-ease ), width .2s var( --gd-ease ); } html.gd .gd-tour__dots i.is-on { width: 18px; border-radius: 999px; background: var( --gd-gold ); } /* --- Les commandes -------------------------------------------------- */ html.gd .gd-tour__actions { display: flex; align-items: center; gap: 8px; } /* « Passer » reste à gauche, séparé : une sortie, pas une action du parcours. */ html.gd .gd-tour__skip { margin-right: auto; padding: 8px 2px; background: none; border: 0; color: var( --gd-muted ); font-family: 'Manrope', sans-serif; font-size: .74rem; font-weight: 700; cursor: pointer; transition: color .18s var( --gd-ease ); } html.gd .gd-tour__skip:hover { color: var( --gd-ink ); } html.gd .gd-tour__prev, html.gd .gd-tour__next { min-height: 40px; padding: 0 18px; border-radius: var( --gd-r-sm ); font-family: 'Manrope', sans-serif; font-size: .78rem; font-weight: 700; cursor: pointer; transition: transform .18s var( --gd-ease ), box-shadow .18s var( --gd-ease ); } html.gd .gd-tour__prev { background: transparent; border: 1px solid var( --gd-hairline ); color: var( --gd-ink ); } html.gd .gd-tour__prev[hidden] { display: none; } html.gd .gd-tour__next { border: 0; background: linear-gradient( 120deg, var( --gd-gold ), var( --gd-champ ) ); color: #0B1220; box-shadow: 0 6px 18px rgba( 200, 169, 106, .32 ); } html.gd .gd-tour__next:active { transform: scale( .97 ); } /* --- Le point d'entrée, dans la barre de titre ---------------------- */ html.gd .gd-tour-open { justify-self: end; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; white-space: nowrap; background: var( --gd-surface ); border: 1px solid var( --gd-hairline ); border-radius: 999px; color: var( --gd-ink ); font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 700; cursor: pointer; transition: border-color .18s var( --gd-ease ), color .18s var( --gd-ease ); } html.gd .gd-tour-open:hover, html.gd .gd-tour-open:focus-visible { border-color: var( --gd-gold ); color: var( --gd-gold-ink ); outline: none; } /* La barre de titre doit laisser respirer un bouton plus large que le × */ html.gd.gd-live .gd-topbar { grid-template-columns: 44px minmax( 0, 1fr ) auto; } /* Pendant la visite, l'atelier ne bouge plus sous les pieds. */ html.gd.gd-tour-on .glassora-configurator-page { pointer-events: none; } html.gd.gd-tour-on .gd-tour { pointer-events: auto; } /* Écrans peu hauts : la bulle se resserre pour ne jamais sortir du cadre. */ @media ( max-height: 820px ) { html.gd .gd-tour__bubble { padding: 16px 18px 14px; } html.gd .gd-tour__dots { margin: 12px 0 10px; } } /* ================================================================== Panier dans l'atelier — pastille + confirmation en place ================================================================== PLACEMENT — coin BAS GAUCHE de la scène. Tous les autres emplacements de l'atelier sont pris : · la rangée de titre porte, en `gd-live`, le bouton de sortie à gauche et « Visite guidée » à droite (.gd-topbar, 44px | titre | auto) ; · le haut de la scène est barré d'un bord à l'autre par les deux grappes flottantes (.bg-configurator__views à gauche, .bg-configurator__tools à droite, top/left/right 14px) ; · le bas-centre revient au plancher flottant (.gd-floor : cote du marquage et corbeille) et à l'invitation de départ ; · la colonne de droite est l'inspecteur, avec sa barre d'achat collée. Reste le bas gauche : libre, dans la même famille visuelle que les barres flottantes (voile flouté, capsule, ombre portée), et à quelques centimètres du bouton « Ajouter au panier » de l'inspecteur. La scène est déjà `position: relative !important` (§2) : elle sert de conteneur. Son `overflow: hidden` recadre proprement les deux composants. */ html.gd .gl-cart-pill { position: absolute; left: 14px; bottom: 14px; /* Même étage que les barres d'outils flottantes de la scène. */ z-index: 5; /* La marge de calage du flux classique n'a plus lieu d'être hors flux. */ margin: 0; max-width: calc( 50% - 24px ); min-height: 38px; padding: 0 13px 0 10px; /* Voile et filet des grappes d'outils : la pastille en est la voisine. */ background: var( --gd-veil ); border-color: var( --gd-line ); box-shadow: var( --gd-float ); font-size: .78rem; } html.gd .gl-cart-pill:hover, html.gd .gl-cart-pill:focus-visible { border-color: var( --gd-gold ); } html.gd .gl-cart-pill__icon { color: var( --gd-muted ); } html.gd .gl-cart-pill__count { background: linear-gradient( 120deg, var( --gd-gold ), var( --gd-champ ) ); color: #0B1220; } html.gd .gl-cart-pill__total { /* Or lisible sur clair — --gd-gold est réservé aux filets et ornements. */ color: var( --gd-gold-ink ); } /* --- Confirmation ------------------------------------------------- */ /* `position: fixed` serait piégé : la scène pose `isolation: isolate`, la carte resterait peinte dans son contexte. On la pose donc en absolu AU-DESSUS du verre — l'endroit que le client regarde au moment où il clique. Assez haute pour ne pas masquer le plancher flottant (bas 16 px, ~52 px de haut). */ html.gd .gl-cart-done { position: absolute; left: 50%; right: auto; bottom: 84px; z-index: 6; transform: translateX( -50% ); width: min( 400px, calc( 100% - 40px ) ); border-color: var( --gd-hairline ); background: var( --gd-surface ); box-shadow: var( --gd-float ); } html.gd .gl-cart-done__view { background: linear-gradient( 120deg, var( --gd-gold ), var( --gd-champ ) ); color: #0B1220; } /* Repartir a neuf : contour discret, comme toute action secondaire de la couche desktop. */ html.gd .gl-cart-done__new { border-color: var( --gd-line ); background: var( --gd-surface ); color: var( --gd-ink ); } /* Rester ou l'on est n'est pas une action : un lien, et rien qui rappelle un bouton — la surface et le contour de l'ancienne regle en faisaient le jumeau de « composer une autre gravure ». */ html.gd .gl-cart-done__close { border: 0; background: none; color: var( --gd-muted, #5F6470 ); } html.gd .gl-cart-done__close:hover { color: var( --gd-ink ); } } /* La note d'edition, dans l'inspecteur : une phrase et un lien sous la touche d'achat, et non plus un second bouton pleine largeur. */ html.gd .bg-configurator__cta .glassora-cart-edit-note { margin-top: 8px; color: var( --gd-muted, #5F6470 ); } html.gd .bg-configurator__cta .glassora-cart-new-item { color: var( --gd-gold-ink, #7A6224 ); } html.gd .bg-configurator__cta .glassora-cart-new-item:hover { color: var( --gd-ink, #111827 ); } /* --- Panier dans la rangee de titre -------------------------------- */ /* Meme piege que la barre mobile : la rangee est une grille a trois colonnes, un quatrieme noeud y creait une rangee implicite. Et la pastille etait encore epinglee en bas de scene par la regle plus haut, ou le proprietaire la trouvait « presque invisible ». */ html.gd .gd-topbar { /* `minmax( 0, 1fr )` et non `1fr` : un `1fr` refuse de descendre sous le contenu minimum de son titre, et ecrase alors les colonnes voisines. La pastille tombait a 26 px, icone comprimee. */ grid-template-columns: 44px minmax( 0, 1fr ) auto auto; column-gap: 10px; } html.gd .gd-topbar .gl-cart-pill { position: static; grid-column: 4; align-self: center; margin: 0; inset: auto; } /* La note traverse les deux colonnes du bloc d'achat, et se lit EN DERNIER : le bloc place ses elements automatiquement, et l'insertion en JS la faisait remonter au-dessus de la touche doree. */ html.gd .bg-configurator__cta .glassora-cart-edit-note { grid-column: 1 / -1; order: 99; width: 100%; } /* La pastille etait dessinee pour FLOTTER au-dessus d'une photo : ombre portee, voile floute. Posee dans une rangee plate ou aucune de ses voisines n'a d'ombre, elle avait l'air collee par-dessus. Elle adopte donc le langage du bouton « Visite guidee » avec lequel elle voisine : meme hauteur, meme filet, meme blanc franc, aucune ombre. */ html.gd .gd-topbar .gl-cart-pill { height: 36px; min-height: 0; /* Incompressible : la colonne du titre gagnait l'arbitrage de la grille et ecrasait la pastille a 26 px, icone tronquee. `max-content` lui garantit sa taille naturelle quoi qu'il arrive. */ min-width: max-content; padding: 0 12px; gap: 7px; background: #FFFFFF; border: .8px solid var( --gd-hairline, #ECEBE7 ); border-radius: 999px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var( --gd-ink, #111827 ); font-family: var( --gd-head, inherit ); font-size: .72rem; font-weight: 700; letter-spacing: .04em; transition: border-color .18s var( --gd-ease, ease ), background .18s var( --gd-ease, ease ); } html.gd .gd-topbar .gl-cart-pill:hover { background: var( --gd-surface, #FFFFFF ); border-color: var( --gd-gold-ink, #7A6224 ); } /* Le compte devient une pastille doree, comme sur mobile : on lit un nombre, pas une suite de chiffres melee au montant. */ html.gd .gd-topbar .gl-cart-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: linear-gradient( 180deg, var( --gd-champ, #E9D9B6 ), var( --gd-gold, #C9A44C ) ); border-radius: 999px; color: var( --gd-lux, #0B1220 ); font-size: 11px; line-height: 1; } html.gd .gd-topbar .gl-cart-pill__total { color: var( --gd-gold-ink, #7A6224 ); font-variant-numeric: tabular-nums; } /* --- Apercu du panier : popover, pas feuille ----------------------- */ /* Sur grand ecran, une feuille qui monte du bas serait un geste mobile plaque sur une souris. Le panneau s'ancre donc sous la pastille, en haut a droite, la ou le regard vient de cliquer. */ html.gd .gl-cart-sheet { align-items: flex-start; justify-content: flex-end; padding: 66px 20px 20px; } html.gd .gl-cart-sheet__voile { background: rgba( 11, 18, 32, .18 ); } html.gd .gl-cart-sheet__panel { width: 400px; max-width: none; max-height: min( 70vh, 640px ); border-radius: var( --gd-r, 18px ); box-shadow: 0 18px 50px rgba( 17, 24, 39, .22 ); animation-name: gl-cart-popover; } @keyframes gl-cart-popover { from { transform: translateY( -8px ); opacity: 0; } to { transform: none; opacity: 1; } } /* Meme chose sur desktop : sans compte ni total, la pastille se resserre autour de son icone au lieu de garder une capsule vide. */ html.gd .gd-topbar .gl-cart-pill[data-vide] { /* Panier vide : la capsule devient un bouton rond de 36 px, du meme gabarit que ses voisines. Reduite a son icone elle tombait a 22 px de large — un filet, pas une commande. */ width: 36px; min-width: 36px; padding: 0; justify-content: center; border-radius: 50%; } /* Le total quitte aussi la pastille desktop. Meme raison que sur mobile : la barre dit COMBIEN, l'apercu dit combien ca coute — et le prix de ce qu'on compose est deja dans le bloc d'achat, a trente centimetres de la. Ne reste que l'icone et le nombre, qui se lisent d'un coup d'oeil. Le montant reste annonce aux lecteurs d'ecran par l'aria-label de la pastille. */ html.gd .gd-topbar .gl-cart-pill__total { display: none; } /* Meme raison que sur mobile : le titre traverse la rangee et se centre sur elle, pas sur sa colonne — la pastille l'avait decale. */ html.gd .gd-topbar { position: relative; } /* Meme motif que sur mobile : le titre hors flux, centre sur la barre. */ html.gd .gd-topbar > .gd-topbar__title { position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); max-width: calc( 100% - 420px ); pointer-events: none; text-align: center; } /* Les commandes gardent la grille : sortie a gauche, visite puis panier a droite. Sans colonnes explicites, le placement automatique les alignait toutes du meme cote. */ html.gd .gd-topbar > .gd-exit { grid-column: 1; } html.gd .gd-topbar > .gd-tour-open { grid-column: 3; } /* Et l'alerte flotte au lieu de rogner la scene. */ html.gd .bg-configurator__stage-alert { position: absolute; top: 68px; left: 14px; right: 14px; z-index: 6; max-width: 620px; margin: 0 auto; border-radius: var( --gd-r-sm, 12px ); box-shadow: var( --gd-shadow, 0 10px 30px rgba( 17, 24, 39, .13 ) ); } /* Le titre occupant explicitement la rangee 1 sur toute la largeur, le placement automatique renvoyait ses voisins en RANGEE 2 : la pastille tombait a y=60 au lieu de 14. On place donc chacun sur la rangee 1, ou ils se superposent au titre sans le pousser. */ /* L'alerte : hauteur libre et bords non contraints. Sans `bottom: auto` elle heritait d'un ancrage bas et s'etirait sur 678 px. */ html.gd .bg-configurator__stage-alert { bottom: auto; height: auto; } /* Dans l'inspecteur, le pas-a-pas se pose juste au-dessus de la touche d'achat, sur toute la largeur. */ html.gd .bg-configurator__cta .gl-qty { grid-column: 1 / -1; justify-content: space-between; width: 100%; margin-bottom: 4px; } /* ========================================================================== LA BANDE D'ALERTES — une règle, plus des rustines ========================================================================== Trois fois de suite un avertissement s'est retrouvé caché : par la barre FACE / RÈGLE / RECTO-VERSO, par le popup de saisie, puis encore par la barre. La cause était toujours la même et elle est structurelle : dans `.bg-configurator__stage`, TOUT ce qui compte flotte en `position:absolute` (barre z-4, popup z-6, panneaux z-6/7) — sauf `.gl-reprise`, restée dans le FLUX. Un enfant de flux placé en haut de la scène est donc écrasé par construction, quelle que soit sa hauteur. La règle, désormais : dans la scène, une alerte n'est jamais dans le flux. Elle rejoint la bande d'overlay, au-dessus de la barre (z-7), et `rangerAlertes()` (configurator-desktop.js) l'y empile en MESURANT la barre plutôt qu'en devinant sa hauteur. Ajouter une alerte demain = l'ajouter à cette liste, et elle se range toute seule. ⚠️ Couche desktop uniquement. En mobile, la barre n'occupe pas cette bande et le bandeau dans le flux est correct : on n'y touche pas. */ html.gd .bg-configurator__stage > .gl-reprise { position: absolute; left: 22px; right: 22px; /* Valeur de départ, remplacée par la mesure dès que le script tourne. Elle n'a qu'à être SOUS la barre : si le script ne tournait pas, le bandeau resterait lisible plutôt que caché. */ top: 78px; z-index: 7; margin: 0; max-width: none; }