/** * Glassora — Atelier mobile (UI v2). * * Habillage de la refonte mobile du configurateur : coque plein écran, scène * dédiée au verre, menus en écrans empilés. Voir configurator-mobile.js. * * PORTÉE — tout est préfixé par `html.gm` ET enfermé dans `@media (max-width:720px)`. * La classe `gm` n'est posée que sur mobile, quand la v2 est active. Le DESKTOP * et la version mobile précédente (`?ui=legacy`) ne voient jamais ces règles. */ @media ( max-width: 720px ) { /* ================================================================== 1. Contexte — la coque prend l'écran ================================================================== */ html.gm, html.gm body { height: 100%; overflow: hidden; overscroll-behavior: none; } /* Chrome du site masqué : la coque fournit sa propre navigation. */ html.gm #hdr, html.gm .site-top-marquee, html.gm .glassora-hero-marquee, html.gm .site-footer, html.gm body > footer, html.gm #mobile-menu, html.gm .bg-configurator-hero, html.gm [data-bg-glass-workflow] { display: none !important; } /* Le configurateur d'origine reste dans le DOM (source de vérité de tous les contrôles) mais n'est plus affiché : la scène et la modale sont déplacées dans la coque par le JS. La coque, elle, est ancrée dans pour ne pas hériter des règles `.bg-configurator xxx` du skin. */ html.gm .bg-configurator { display: none !important; } /* ================================================================== 2. Coque ================================================================== */ html.gm .gm { --gm-bg: #FAFAF8; --gm-ink: #111827; --gm-muted: #5F6470; --gm-line: rgba( 17, 24, 39, .09 ); --gm-gold: #C8A96A; --gm-gold-ink: #7A6224; --gm-champ: #E6D4A3; --gm-surface: #FFFFFF; --gm-veil: rgba( 250, 250, 248, .82 ); --gm-shadow: 0 1px 2px rgba( 17, 24, 39, .04 ), 0 8px 24px rgba( 17, 24, 39, .05 ); --gm-ease: cubic-bezier( .32, .72, 0, 1 ); --gm-safe-t: env( safe-area-inset-top, 0px ); --gm-safe-b: env( safe-area-inset-bottom, 0px ); position: fixed; inset: 0 0 auto 0; /* Hauteur de repli ; le JS la remplace par la hauteur RÉELLEMENT visible (visualViewport) dès qu'un clavier virtuel est ouvert. */ height: 100dvh; z-index: 9000; display: block; background: var( --gm-bg ); color: var( --gm-ink ); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: contain; touch-action: manipulation; } html.gm .gm[hidden] { display: none; } /* Socle défensif — la coque vit DANS `.bg-configurator` : sans cela, ses règles héritées s'appliquent à nos éléments (les titres d'écran sortaient en blanc sur fond clair). Placé avant les composants, qui gardent la main. */ /* `:where()` n'ajoute pas de spécificité : ce socle bat les règles héritées (≤ 0,2,0) mais s'efface devant les composants déclarés plus bas. */ /* `svg` volontairement exclu : lui poser une couleur romprait le `currentColor` des icônes (coche or, chevrons, aperçus de modèles en gris gravure). */ html.gm .gm :where( h1, h2, h3, h4, p, span, strong, em, label, button, input, select ) { margin: 0; color: var( --gm-ink ); font-family: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; line-height: 1.35; font-size: inherit; -webkit-tap-highlight-color: transparent; } /* Les boutons-icônes colorent leur pictogramme via `currentColor` : le socle ci-dessus repeint les et casserait la chaîne (corbeille rouge devenue navy, chevron crème invisible sur fond navy). On la rétablit ici. */ html.gm .gm__remove .gm-i, html.gm .gm__ruler-exit .gm-i, html.gm .gm__ruler-exit span, html.gm .gm__bar-btn .gm-i, html.gm .gm__ghost-btn .gm-i, html.gm .gm__size-btn .gm-i, html.gm .gm__dock-item .gm-i, html.gm .gm-stepper__btn .gm-i, html.gm .gm__toast > span { color: inherit; } html.gm .gm__root { position: absolute; inset: 0; /* Contexte d'empilement propre : la scène héritée porte de forts z-index qui, sans cela, passeraient AU-DESSUS des écrans (taps interceptés). */ z-index: 1; isolation: isolate; display: grid; grid-template-rows: auto minmax( 0, 1fr ) auto auto; } /* --- Barre de titre ---------------------------------------------- */ html.gm .gm__bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: calc( var( --gm-safe-t ) + 8px ) 12px 8px; background: var( --gm-veil ); backdrop-filter: blur( 20px ) saturate( 180% ); -webkit-backdrop-filter: blur( 20px ) saturate( 180% ); border-bottom: 1px solid var( --gm-line ); } html.gm .gm__bar-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var( --gm-ink ); border-radius: 50%; cursor: pointer; transition: background .2s var( --gm-ease ); } html.gm .gm__bar-btn:active { background: rgba( 17, 24, 39, .06 ); } html.gm .gm__bar-title { text-align: center; line-height: 1.15; min-width: 0; } html.gm .gm__bar-title span { display: block; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var( --gm-gold-ink ); } html.gm .gm__bar-title strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 500; letter-spacing: .01em; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Scène (le verre) -------------------------------------------- */ /* Les photos de verres sont détourées sur fond blanc : la scène reste blanche pour qu'aucune couture n'apparaisse autour du cliché. */ html.gm .gm__stage { position: relative; min-height: 0; display: flex; background: #FFFFFF; box-shadow: inset 0 -60px 60px -60px rgba( 17, 24, 39, .06 ); } /* Invitation initiale : disparaît dès qu'une gravure existe. */ html.gm .gm__hint { position: absolute; left: 50%; bottom: 16px; transform: translateX( -50% ); z-index: 3; width: min( 320px, calc( 100% - 40px ) ); margin: 0; padding: 12px 16px; border-radius: 16px; border: 1px solid var( --gm-line ); background: rgba( 255, 255, 255, .86 ); backdrop-filter: blur( 16px ); -webkit-backdrop-filter: blur( 16px ); font-size: 13px; line-height: 1.5; text-align: center; color: var( --gm-muted ); box-shadow: 0 6px 22px rgba( 17, 24, 39, .08 ); } html.gm .gm__hint strong { color: var( --gm-ink ); font-family: 'Manrope', sans-serif; font-weight: 700; } html.gm .gm__hint[hidden], html.gm .gm__size[hidden], html.gm .gm__ruler-exit[hidden] { display: none; } /* Sortie de la vue règle : sans elle, la règle est une impasse. */ html.gm .gm__ruler-exit { position: absolute; left: 50%; bottom: 12px; transform: translateX( -50% ); z-index: 4; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 20px 0 12px; border: 0; border-radius: 999px; background: #111827; color: #FAFAF8; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba( 17, 24, 39, .28 ); } html.gm .gm__ruler-exit .gm-i { width: 20px; height: 20px; } html.gm .gm__stage-slot { flex: 1; min-height: 0; display: flex; } /* Les règles héritées sont posées en `!important` par la surcouche de skin : on les neutralise explicitement pour reprendre la main sur la mise en page. */ html.gm .gm .bg-configurator__stage { flex: 1; min-width: 0; min-height: 0; display: flex !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; max-width: none !important; max-height: none !important; /* Contexte d'empilement neutre : sans cela son z-index hérité passait au-dessus des commandes flottantes de la scène. */ z-index: 0 !important; isolation: isolate; } /* Éléments hérités de l'ancienne UI mobile : la v2 les remplace. */ html.gm .gm .bg-configurator__mobile-hero-title, html.gm .gm .bg-configurator__toolbar, html.gm .gm .bg-configurator__stage-hint, html.gm .gm .bg-configurator__mobile-control, html.gm .gm .bg-configurator__mobile-steps, html.gm .gm .bg-configurator__mobile-bat-bar, html.gm .gm .bg-configurator__mobile-edit-lock, html.gm .gm .bg-configurator__side-badge, html.gm .gm .bg-configurator__sheet-validate { display: none !important; } html.gm .gm .bg-configurator__preview { flex: 1; min-width: 0; min-height: 0; display: flex !important; align-items: center; justify-content: center; padding: 6px 12px 64px !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; max-width: none !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } html.gm .gm .bg-configurator__canvas { margin: 0 !important; object-fit: contain; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; touch-action: none; } /* Vue VERRE : le verre occupe toute la scène disponible, ratio préservé (le hit-test du moteur compense déjà le letterbox éventuel). */ html.gm .gm:not( .is-ruler ) .bg-configurator__canvas { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; } /* Vue RÈGLE : instrument de mesure. On laisse la largeur posée par le moteur (`style.width`), calculée pour que les cotes soient justes — la contraindre à la hauteur de la scène faussait l'échelle annoncée (agrandie en recto, rétrécie en recto/verso où les deux zones sont empilées). Si la réglette dépasse, elle défile. */ /* Ce qui rabotait la réglette : glass-configurator.css épingle le canvas mobile à une « largeur de page blanche » `clamp(218px, 100vw - 157px, 258px)` — soit 233 px sur un iPhone — en `!important`, sur width ET min-width. Bon pour la photo du verre, ruineux pour un instrument de mesure. `--gm-ruler-w` porte la largeur logique voulue par le moteur ; elle est posée par le JS à chaque rendu mais sa VALEUR ne change pas, donc aucun clignotement (l'ancien verrou, lui, ajoutait puis retirait `!important` à chaque frappe — d'où le zoom/dézoom). */ html.gm .gm.is-ruler .bg-configurator__canvas { width: var( --gm-ruler-w, auto ) !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; object-fit: fill; } html.gm .gm.is-ruler .bg-configurator__preview { display: block !important; overflow: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; text-align: center; /* Marge horizontale réduite : la réglette mobile fait 300 px de large et doit tenir sans être rétrécie, même sur un écran de 320 px. */ padding: 10px 4px 78px !important; } html.gm .gm.is-ruler .bg-configurator__canvas { display: inline-block; } /* Annuler / Rétablir : discrets, en surimpression. */ html.gm .gm__stage-tools { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; } html.gm .gm__ghost-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var( --gm-line ); background: rgba( 255, 255, 255, .72 ); backdrop-filter: blur( 14px ); -webkit-backdrop-filter: blur( 14px ); color: var( --gm-ink ); border-radius: 50%; cursor: pointer; transition: transform .18s var( --gm-ease ), opacity .18s var( --gm-ease ); } html.gm .gm__ghost-btn:active { transform: scale( .92 ); } html.gm .gm__ghost-btn[disabled], html.gm .gm__size-btn[disabled] { opacity: .3; pointer-events: none; } /* Commandes posées SUR le verre : taille du marquage + suppression. */ html.gm .gm__stage-bar { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; pointer-events: none; } html.gm .gm__stage-bar > * { pointer-events: auto; } html.gm .gm__size { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var( --gm-line ); background: rgba( 255, 255, 255, .76 ); backdrop-filter: blur( 18px ) saturate( 180% ); -webkit-backdrop-filter: blur( 18px ) saturate( 180% ); box-shadow: 0 6px 22px rgba( 17, 24, 39, .1 ); } html.gm .gm__size-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var( --gm-ink ); border-radius: 50%; cursor: pointer; } html.gm .gm__size-btn:active { background: rgba( 17, 24, 39, .07 ); } /* Suppression du marquage — l'équivalent tactile de la touche « Suppr ». Toujours au même endroit, masqué quand il n'y a rien à retirer. */ html.gm .gm__remove { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba( 156, 33, 49, .22 ); border-radius: 50%; background: rgba( 255, 255, 255, .78 ); backdrop-filter: blur( 18px ) saturate( 180% ); -webkit-backdrop-filter: blur( 18px ) saturate( 180% ); color: #9c2131; cursor: pointer; box-shadow: 0 6px 22px rgba( 17, 24, 39, .1 ); transition: transform .18s var( --gm-ease ), background .18s var( --gm-ease ); } html.gm .gm__remove .gm-i { width: 22px; height: 22px; } html.gm .gm__remove:active { transform: scale( .92 ); background: rgba( 156, 33, 49, .1 ); } html.gm .gm__remove[hidden] { display: none; } html.gm .gm__size-value { min-width: 104px; text-align: center; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var( --gm-ink ); } /* --- Dock -------------------------------------------------------- */ html.gm .gm__dock { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 2px; padding: 6px 8px 4px; background: var( --gm-veil ); backdrop-filter: blur( 20px ) saturate( 180% ); -webkit-backdrop-filter: blur( 20px ) saturate( 180% ); border-top: 1px solid var( --gm-line ); } html.gm .gm__dock-item { position: relative; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border: 0; background: transparent; color: var( --gm-ink ); border-radius: 14px; cursor: pointer; transition: background .2s var( --gm-ease ), transform .2s var( --gm-ease ); } html.gm .gm__dock-item:active { background: rgba( 17, 24, 39, .05 ); transform: scale( .96 ); } html.gm .gm__dock-item span { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .02em; } html.gm .gm__dock-item .gm-i { width: 24px; height: 24px; } html.gm .gm__dock-item em { position: absolute; top: 4px; right: calc( 50% - 22px ); min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1; color: #0B1220; background: linear-gradient( 120deg, var( --gm-gold ), var( --gm-champ ) ); border-radius: 999px; } html.gm .gm__dock-item em[hidden] { display: none; } /* Coche TRACEE : « ✓ » (U+2713) n'existe dans aucune des polices du site. */ html.gm .gm__dock-item em svg { width: 11px; height: 11px; display: block; } /* --- Barre d'achat ----------------------------------------------- */ html.gm .gm__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px calc( var( --gm-safe-b ) + 12px ); background: var( --gm-surface ); border-top: 1px solid var( --gm-line ); } html.gm .gm__cta-price { flex: 0 0 auto; display: flex; flex-direction: column; line-height: 1.2; } html.gm .gm__cta-price span { font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var( --gm-muted ); } html.gm .gm__cta-price strong { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var( --gm-ink ); } html.gm .gm__cta-btn { flex: 1; min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px; background: linear-gradient( 120deg, #C8A96A, #E6D4A3 ); color: #0B1220; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .01em; cursor: pointer; box-shadow: 0 8px 22px rgba( 200, 169, 106, .32 ); transition: transform .2s var( --gm-ease ), box-shadow .2s var( --gm-ease ); } html.gm .gm__cta-btn:active { transform: scale( .985 ); box-shadow: 0 4px 14px rgba( 200, 169, 106, .28 ); } html.gm .gm__cta-btn[disabled], html.gm .gm__cta-btn.is-loading { opacity: .6; } /* Message d'erreur du panier : au-dessus de la rangée (sous elle, il tombait dans la zone de sécurité et se retrouvait tronqué). */ html.gm .gm .glassora-cart-note { order: -1; flex: 1 0 100%; margin: 0 0 2px !important; padding: 8px 12px; border-radius: 10px; background: rgba( 156, 33, 49, .07 ); font-family: 'Manrope', sans-serif; font-size: 13px !important; font-weight: 600; text-align: center; } /* ================================================================== 3. Écrans empilés ================================================================== */ html.gm .gm__screens { position: absolute; inset: 0; z-index: 20; pointer-events: none; } html.gm .gm-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var( --gm-bg ); pointer-events: auto; transform: translate3d( 0, 0, 0 ); transition: transform .4s var( --gm-ease ); will-change: transform; box-shadow: -18px 0 42px rgba( 17, 24, 39, .1 ); } html.gm .gm-screen.is-entering, html.gm .gm-screen.is-leaving { transform: translate3d( 100%, 0, 0 ); } html.gm .gm-screen__bar { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax( 0, 1fr ) auto; align-items: center; gap: 6px; padding: calc( var( --gm-safe-t ) + 8px ) 8px 8px; background: var( --gm-veil ); backdrop-filter: blur( 20px ) saturate( 180% ); -webkit-backdrop-filter: blur( 20px ) saturate( 180% ); border-bottom: 1px solid var( --gm-line ); } html.gm .gm-screen__back { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; gap: 2px; padding: 0 10px 0 4px; border: 0; background: transparent; color: var( --gm-gold-ink ); font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; border-radius: 12px; cursor: pointer; max-width: 30vw; overflow: hidden; } html.gm .gm-screen__back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.gm .gm-screen__back:active { opacity: .55; } html.gm .gm-screen__title { color: var( --gm-ink ); font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 500; letter-spacing: .01em; /* Cormorant utilise des chiffres elzéviriens : illisibles pour « Ligne 1 ». */ font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: center; } html.gm .gm-screen__action { justify-self: end; } html.gm .gm-screen__done { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var( --gm-gold-ink ); font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; border-radius: 12px; cursor: pointer; } html.gm .gm-screen__done:active { opacity: .55; } html.gm .gm-screen__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 16px calc( var( --gm-safe-b ) + 28px ); } /* ================================================================== 4. Composants d'écran ================================================================== */ html.gm .gm-section { margin: 0 0 26px; } html.gm .gm-section__title { margin: 0 4px 8px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var( --gm-gold-ink ); } html.gm .gm-section__hint { margin: 0 4px 12px; font-size: 13.5px; line-height: 1.55; color: var( --gm-muted ); } html.gm .gm-list { display: flex; flex-direction: column; gap: 1px; background: var( --gm-line ); border-radius: 18px; overflow: hidden; box-shadow: var( --gm-shadow ); } html.gm .gm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 14px; border: 0; background: var( --gm-surface ); color: var( --gm-ink ); text-align: left; font-family: inherit; cursor: pointer; transition: background .18s var( --gm-ease ); } html.gm .gm-row:active { background: #F3F1EC; } html.gm .gm-row__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.gm .gm-row__copy strong { font-family: 'Manrope', sans-serif; font-size: 15.5px; font-weight: 600; line-height: 1.3; } html.gm .gm-row__copy span { font-size: 13px; line-height: 1.45; color: var( --gm-muted ); } html.gm .gm-row__icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient( 140deg, rgba( 200, 169, 106, .18 ), rgba( 230, 212, 163, .28 ) ); color: var( --gm-gold-ink ); font-size: 20px; } html.gm .gm-row--theme.is-active .gm-row__icon { background: linear-gradient( 140deg, #C8A96A, #E6D4A3 ); color: #0B1220; } html.gm .gm-i { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; } html.gm .gm-i svg { width: 100%; height: 100%; } html.gm .gm-i--chevron { color: rgba( 17, 24, 39, .3 ); width: 18px; height: 18px; } html.gm .gm-i--lead { width: 42px; height: 42px; padding: 10px; border-radius: 13px; background: rgba( 17, 24, 39, .05 ); color: var( --gm-ink ); } html.gm .gm-i--add { width: 22px; height: 22px; color: var( --gm-gold-ink ); } html.gm .gm-i--check { width: 20px; height: 20px; color: var( --gm-gold-ink ); opacity: 0; transform: scale( .7 ); transition: opacity .2s var( --gm-ease ), transform .2s var( --gm-ease ); } html.gm .is-active > .gm-i--check { opacity: 1; transform: none; } html.gm .gm-empty { padding: 22px 16px; border-radius: 18px; background: var( --gm-surface ); box-shadow: var( --gm-shadow ); font-size: 14px; line-height: 1.6; color: var( --gm-muted ); } /* --- Aperçu de la gravure ---------------------------------------- */ html.gm .gm-preview { display: grid; place-items: center; min-height: 118px; margin: 0 0 22px; padding: 18px 16px; border-radius: 20px; background: radial-gradient( 120% 100% at 50% 0%, #FFFFFF 0%, #F5F3EE 100% ); border: 1px solid var( --gm-line ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .8 ); text-align: center; overflow: hidden; } html.gm .gm-preview__stack { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; } html.gm .gm-preview__line { display: block; max-width: 100%; color: #9b9b9b; line-height: 1.2; word-break: break-word; text-shadow: 0 1px 0 rgba( 255, 255, 255, .9 ); } html.gm .gm-preview__empty { font-size: 13.5px; color: rgba( 17, 24, 39, .35 ); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 17px; } /* --- Lignes de texte --------------------------------------------- */ html.gm .gm-line { display: flex; align-items: stretch; gap: 0; background: var( --gm-surface ); } html.gm .gm-line--solo { border-radius: 18px; overflow: hidden; box-shadow: var( --gm-shadow ); } html.gm .gm-line__field { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 4px 10px 14px; } html.gm .gm-line__label { font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var( --gm-muted ); } html.gm .gm-line__label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; } html.gm .gm-line__field input, html.gm .gm-line__field select { width: 100%; min-height: 40px; padding: 0; border: 0; background: transparent; color: var( --gm-ink ); font-family: 'Manrope', sans-serif; /* 16 px minimum : en dessous, iOS zoome au focus et ne dézoome jamais. */ font-size: 16.5px; font-weight: 500; letter-spacing: .01em; appearance: none; -webkit-appearance: none; } html.gm .gm-line__field input:focus, html.gm .gm-line__field select:focus { outline: none; } html.gm .gm-line__field input::placeholder { color: rgba( 17, 24, 39, .28 ); font-weight: 400; } html.gm .gm-line__style { flex: 0 0 auto; min-width: 104px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 10px 10px 10px 10px; border: 0; border-left: 1px solid var( --gm-line ); background: transparent; color: var( --gm-ink ); cursor: pointer; text-align: right; } html.gm .gm-line__style[hidden] { display: none; } html.gm .gm-line__style-copy { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; } html.gm .gm-line__style:active { background: #F3F1EC; } html.gm .gm-line__style-name { max-width: 88px; font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var( --gm-gold-ink ); } html.gm .gm-line__style-size { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var( --gm-muted ); } html.gm .gm-line-add { color: var( --gm-gold-ink ); } html.gm .gm-line-add .gm-row__copy strong { color: var( --gm-gold-ink ); font-weight: 600; } /* --- Taille du texte d'un champ de modèle -------------------------- */ /* Posé À CÔTÉ du champ, pas en dessous : `.gm-line` est déjà une rangée, et chaque champ garde ainsi son propre réglage sous les yeux — prénom et date se dosent séparément. Pas-à-pas resserré : à pleine taille il mangeait la largeur du champ de saisie. */ html.gm .gm-line__size { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 12px 8px 6px; } html.gm .gm-line__size-label { font-family: 'Manrope', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var( --gm-muted ); } html.gm .gm-line__size .gm-stepper { grid-template-columns: 40px auto 40px; gap: 3px; padding: 3px; border-radius: 11px; } html.gm .gm-line__size .gm-stepper__btn { height: 38px; border-radius: 9px; } html.gm .gm-line__size .gm-stepper__btn svg { width: 17px; height: 17px; } html.gm .gm-line__size .gm-stepper__value { min-width: 46px; font-size: 12px; } /* --- Réglages ----------------------------------------------------- */ html.gm .gm-size-box { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 18px; border-radius: 18px; background: var( --gm-surface ); box-shadow: var( --gm-shadow ); } html.gm .gm-stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 6px; padding: 4px; border-radius: 14px; background: #F3F1EC; } html.gm .gm-stepper__btn { height: 46px; display: grid; place-items: center; border: 0; border-radius: 11px; background: var( --gm-surface ); color: var( --gm-ink ); cursor: pointer; box-shadow: 0 1px 2px rgba( 17, 24, 39, .08 ); transition: transform .15s var( --gm-ease ); } html.gm .gm-stepper__btn svg { width: 20px; height: 20px; } html.gm .gm-stepper__btn:active { transform: scale( .93 ); } html.gm .gm-stepper__value { text-align: center; font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } html.gm .gm-slider { width: 100%; height: 30px; background: transparent; appearance: none; -webkit-appearance: none; } html.gm .gm-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient( 90deg, var( --gm-gold ), var( --gm-champ ) ); } html.gm .gm-slider::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient( 90deg, var( --gm-gold ), var( --gm-champ ) ); } html.gm .gm-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: #FFFFFF; border: 1px solid var( --gm-line ); box-shadow: 0 2px 8px rgba( 17, 24, 39, .18 ); } html.gm .gm-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; border: 1px solid var( --gm-line ); box-shadow: 0 2px 8px rgba( 17, 24, 39, .18 ); } html.gm .gm-toggles, html.gm .gm-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #F3F1EC; } html.gm .gm-toggle, html.gm .gm-seg { min-height: 48px; border: 0; border-radius: 11px; background: transparent; color: var( --gm-ink ); font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s var( --gm-ease ), color .2s var( --gm-ease ), box-shadow .2s var( --gm-ease ); } html.gm .gm-toggle strong { font-weight: 800; } html.gm .gm-toggle.is-on, html.gm .gm-seg.is-on { background: var( --gm-surface ); box-shadow: 0 1px 3px rgba( 17, 24, 39, .12 ); color: var( --gm-gold-ink ); } /* --- Polices ------------------------------------------------------ */ html.gm .gm-font { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 12px 14px; border: 0; background: var( --gm-surface ); color: var( --gm-ink ); text-align: left; cursor: pointer; } html.gm .gm-font:active { background: #F3F1EC; } html.gm .gm-font__sample { flex: 1; min-width: 0; font-size: 23px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.gm .gm-font__name { flex: 0 0 auto; max-width: 34%; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600; color: var( --gm-muted ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Modèles ------------------------------------------------------ */ html.gm .gm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } html.gm .gm-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 12px; border: 1px solid var( --gm-line ); border-radius: 18px; background: var( --gm-surface ); color: var( --gm-ink ); cursor: pointer; box-shadow: var( --gm-shadow ); transition: border-color .2s var( --gm-ease ), transform .2s var( --gm-ease ); } html.gm .gm-card:active { transform: scale( .975 ); } html.gm .gm-card.is-active { border-color: var( --gm-gold ); box-shadow: 0 0 0 1px var( --gm-gold ), var( --gm-shadow ); } /* Hauteur fixe : certains SVG de modèles portent une taille intrinsèque en mm (export Illustrator) qui, sinon, impose la hauteur de toute la rangée. */ html.gm .gm-card__art { display: grid; place-items: center; width: 100%; height: 112px; min-height: 0; overflow: hidden; color: #6b6b6b; } html.gm .gm-card__art svg { width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; } html.gm .gm-card__name { font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.3; } html.gm .gm-card > .gm-i--check { position: absolute; top: 8px; right: 8px; } /* --- Verres ------------------------------------------------------- */ html.gm .gm-glass { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 82px; padding: 12px 14px; border: 0; background: var( --gm-surface ); color: var( --gm-ink ); text-align: left; cursor: pointer; } html.gm .gm-glass:active { background: #F3F1EC; } html.gm .gm-glass__thumb { flex: 0 0 auto; width: 44px; height: 62px; display: grid; place-items: center; border-radius: 10px; background: #F6F4EF; overflow: hidden; } html.gm .gm-glass__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } html.gm .gm-glass__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.gm .gm-glass__copy strong { font-family: 'Manrope', sans-serif; font-size: 15.5px; font-weight: 600; } html.gm .gm-glass__copy span { font-size: 12.5px; line-height: 1.4; color: var( --gm-muted ); } html.gm .gm-glass__area { font-family: 'Manrope', sans-serif; font-size: 11.5px; color: var( --gm-gold-ink ); } html.gm .gm-glass__price { flex: 0 0 auto; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } /* --- Récapitulatif ------------------------------------------------ */ html.gm .gm-recap { border-radius: 18px; background: var( --gm-surface ); box-shadow: var( --gm-shadow ); overflow: hidden; } html.gm .gm-recap__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var( --gm-line ); } html.gm .gm-recap__row:last-child { border-bottom: 0; } html.gm .gm-recap__row span { flex: 0 0 auto; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var( --gm-muted ); } html.gm .gm-recap__row strong { text-align: right; font-size: 14px; font-weight: 600; line-height: 1.4; } /* --- Bouton principal d'écran ------------------------------------- */ html.gm .gm-primary { display: block; width: 100%; min-height: 54px; margin: 4px 0 0; padding: 0 20px; border: 0; border-radius: 14px; background: #111827; color: #FFFFFF; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .18s var( --gm-ease ); } html.gm .gm-primary:active { transform: scale( .985 ); } /* Action principale toujours sous le pouce, même sur un écran long. */ /* La classe `gm-primary--sticky` n'est plus posee par aucun ecran : le bouton colle en bas faisait doublon avec la sortie de l'en-tete, qui ne defile jamais. La regle est conservee, commentee, parce qu'elle decrit une intention valable — une action principale a portee de pouce — qu'on pourra reprendre le jour ou un ecran en aura vraiment besoin. html.gm .gm-primary--sticky { position: sticky; bottom: 2px; z-index: 3; margin-top: 16px; box-shadow: 0 10px 28px rgba( 17, 24, 39, .22 ); } */ html.gm .gm-primary--danger { margin-top: 18px; background: transparent; border: 1px solid rgba( 156, 33, 49, .32 ); color: #9c2131; } /* ================================================================== 5. Retours (toast, statut moteur) & modale d'aperçu ================================================================== */ html.gm .gm__toast { position: absolute; left: 50%; /* Au-dessus de la pastille de cote et de l'invite, pas devant. */ bottom: calc( var( --gm-safe-b ) + 224px ); z-index: 60; transform: translate( -50%, 10px ); max-width: calc( 100% - 40px ); margin: 0; padding: 11px 18px; border-radius: 999px; background: rgba( 17, 24, 39, .93 ); backdrop-filter: blur( 12px ); -webkit-backdrop-filter: blur( 12px ); color: #FAFAF8; font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.35; opacity: 0; pointer-events: none; transition: opacity .28s var( --gm-ease ), transform .28s var( --gm-ease ); } html.gm .gm__toast.is-visible { opacity: 1; transform: translate( -50%, 0 ); pointer-events: auto; } html.gm .gm__toast { display: flex; align-items: center; justify-content: center; gap: 14px; } /* « Annuler » dans la notification : filet de sécurité immédiat après une suppression, sans aller chercher le bouton Annuler de la scène. */ html.gm .gm__toast-action { flex: 0 0 auto; min-height: 32px; padding: 0 4px; border: 0; background: transparent; color: var( --gm-champ ); font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; } html.gm .gm__toast-action[hidden] { display: none; } /* ---- Feuille d'actions (suppression ambiguë) ---- */ html.gm .gm__sheet { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; } html.gm .gm__sheet[hidden] { display: none; } html.gm .gm__sheet-scrim { position: absolute; inset: 0; background: rgba( 11, 18, 32, .38 ); opacity: 0; transition: opacity .3s var( --gm-ease ); } html.gm .gm__sheet.is-open .gm__sheet-scrim { opacity: 1; } html.gm .gm__sheet-card { position: relative; margin: 0 10px calc( var( --gm-safe-b ) + 10px ); transform: translateY( 110% ); transition: transform .34s var( --gm-ease ); } html.gm .gm__sheet.is-open .gm__sheet-card { transform: none; } html.gm .gm__sheet-title { padding: 14px 16px 12px; border-radius: 18px 18px 0 0; background: #FFFFFF; backdrop-filter: blur( 20px ); -webkit-backdrop-filter: blur( 20px ); border-bottom: 1px solid var( --gm-line ); font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; text-align: center; color: var( --gm-muted ); } html.gm .gm__sheet-actions { display: flex; flex-direction: column; gap: 1px; background: var( --gm-line ); border-radius: 0 0 18px 18px; overflow: hidden; } html.gm .gm__sheet-action { min-height: 58px; border: 0; background: #FFFFFF; color: var( --gm-ink ); font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 500; cursor: pointer; } html.gm .gm__sheet-action.is-destructive { color: #9c2131; } html.gm .gm__sheet-action:active { background: #F0EEE9; } html.gm .gm__sheet-cancel { width: 100%; min-height: 58px; margin-top: 8px; border: 0; border-radius: 18px; background: #FFFFFF; color: var( --gm-ink ); font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: var( --gm-shadow ); } /* Entrées destructives dans les écrans. */ html.gm .gm-row--danger .gm-row__copy strong { color: #9c2131; } html.gm .gm-row--danger .gm-i--lead { background: rgba( 156, 33, 49, .08 ); color: #9c2131; } /* Messages du moteur (erreurs de validation BAT) : même matière que nos notifications, et placés assez haut pour ne pas recouvrir l'invite ni la pastille de cote. */ html.gm .gm .bg-configurator__mobile-status { position: absolute; left: 50%; bottom: 132px; z-index: 6; transform: translate( -50%, 8px ); max-width: calc( 100% - 36px ); margin: 0; padding: 11px 18px; border-radius: 18px; background: rgba( 17, 24, 39, .93 ); color: #FAFAF8; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transition: opacity .28s var( --gm-ease ), transform .28s var( --gm-ease ); } html.gm .gm .bg-configurator__mobile-status.is-visible { opacity: 1; transform: translate( -50%, 0 ); } /* Aperçu photo du verre : déplacé dans la coque, au-dessus de tout. */ html.gm .gm > .bg-configurator__modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: calc( var( --gm-safe-t ) + 16px ) 16px calc( var( --gm-safe-b ) + 16px ); } html.gm .gm > .bg-configurator__modal[hidden] { display: none; } html.gm .gm > .bg-configurator__modal .bg-configurator__modal-backdrop { position: absolute; inset: 0; background: rgba( 11, 18, 32, .72 ); backdrop-filter: blur( 8px ); -webkit-backdrop-filter: blur( 8px ); border: 0; } html.gm .gm > .bg-configurator__modal .bg-configurator__modal-dialog { position: relative; max-width: 100%; max-height: 100%; padding: 14px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 24px 60px rgba( 0, 0, 0, .35 ); } html.gm .gm > .bg-configurator__modal img { max-width: 100%; max-height: 74dvh; object-fit: contain; } html.gm .gm > .bg-configurator__modal .bg-configurator__modal-close { position: absolute; top: -10px; right: -10px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var( --gm-line ); border-radius: 50%; background: #FFFFFF; color: #111827; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba( 0, 0, 0, .18 ); } /* ================================================================== 6. Accessibilité & préférences ================================================================== */ html.gm .gm :focus-visible { outline: 2px solid var( --gm-gold-ink ); outline-offset: 2px; border-radius: 10px; } @media ( prefers-reduced-motion: reduce ) { html.gm .gm-screen, html.gm .gm__toast, html.gm .gm-i--check, html.gm .gm__dock-item, html.gm .gm-primary, html.gm .gm__cta-btn { transition: none !important; } } /* Paysage : la scène se réduit, les barres restent atteignables. */ @media ( orientation: landscape ) and ( max-height: 480px ) { html.gm .gm__bar { padding-top: calc( var( --gm-safe-t ) + 4px ); padding-bottom: 4px; } html.gm .gm__bar-title span { display: none; } html.gm .gm__bar-title strong { font-size: 17px; } html.gm .gm__dock-item { min-height: 46px; flex-direction: row; gap: 7px; } html.gm .gm__cta { padding-top: 6px; padding-bottom: calc( var( --gm-safe-b ) + 6px ); } html.gm .gm__cta-btn { min-height: 44px; } html.gm .gm__size, html.gm .gm__ruler-exit { bottom: 6px; } html.gm .gm__hint { bottom: 6px; width: min( 440px, calc( 100% - 130px ) ); padding: 8px 14px; font-size: 12px; } html.gm .gm .bg-configurator__preview { padding-bottom: 56px; } } /* ================================================================== 7. Visite guidée ================================================================== */ /* Même projecteur que sur desktop : une boîte transparente entourée d'une ombre de 9999px, pas une découpe. Elle vit DANS la coque, au-dessus des écrans empilés (z-index 20) et de la scène. */ html.gm .gm-tour { position: absolute; inset: 0; z-index: 60; } html.gm .gm-tour[hidden] { display: none; } html.gm .gm-tour__spot { position: absolute; border-radius: 16px; box-shadow: 0 0 0 9999px rgba( 11, 18, 32, .66 ); transition: top .26s var( --gm-ease ), left .26s var( --gm-ease ), width .26s var( --gm-ease ), height .26s var( --gm-ease ); } /* La carte prend la largeur : sur 375 px, « à côté » n'existe pas. Elle se place au-dessus ou en dessous de la zone éclairée, jamais dessus. */ html.gm .gm-tour__card { position: absolute; left: 12px; right: 12px; padding: 18px 18px 16px; background: var( --gm-surface ); border-radius: 20px; box-shadow: 0 18px 44px rgba( 11, 18, 32, .32 ); transition: top .26s var( --gm-ease ); } html.gm .gm-tour__step { margin: 0 0 6px; color: var( --gm-gold-ink ); font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } html.gm .gm-tour__title { margin: 0 0 7px; color: var( --gm-ink ); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; line-height: 1.15; } html.gm .gm-tour__body { margin: 0; color: var( --gm-muted ); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; } html.gm .gm-tour__dots { display: flex; gap: 6px; margin: 14px 0 12px; } html.gm .gm-tour__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba( 17, 24, 39, .16 ); transition: width .2s var( --gm-ease ), background .2s var( --gm-ease ); } html.gm .gm-tour__dots i.is-on { width: 18px; border-radius: 999px; background: var( --gm-gold ); } html.gm .gm-tour__actions { display: flex; align-items: center; gap: 10px; } /* « Passer » à gauche, séparé : une sortie, pas une étape du parcours. */ html.gm .gm-tour__skip { flex: 0 0 auto; min-height: 48px; padding: 0 4px; background: none; border: 0; color: var( --gm-muted ); font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; } /* Le bouton d'avancement occupe le reste : c'est celui qu'on vise au pouce. */ html.gm .gm-tour__next { flex: 1; min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient( 120deg, var( --gm-gold ), var( --gm-champ ) ); color: #0B1220; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 22px rgba( 200, 169, 106, .32 ); transition: transform .18s var( --gm-ease ); } html.gm .gm-tour__next:active { transform: scale( .985 ); } /* ================================================================== 12. Panier dans l'atelier — pastille + confirmation en place ================================================================== Le balisage vit dans `.bg-configurator__stage`, que le JS DÉPLACE dans la coque : la pastille voyage donc avec la scène, sans qu'aucun code n'ait à la déménager. Deux bénéfices, qu'un élément flottant au-dessus de la coque n'aurait pas eus : elle hérite du contexte d'empilement de la scène (elle passe donc SOUS les écrans empilés — pas de pastille par-dessus « Texte » ou « Thèmes »), et elle disparaît d'elle-même en vue règle ou en plein écran, comme le reste des commandes de scène. PLACEMENT — coin HAUT GAUCHE de la scène. Le haut droit est pris par annuler/rétablir (.gm__stage-tools, top/right 10px), le bas par la barre de taille et la corbeille (.gm__stage-bar) puis par l'invitation (.gm__hint), et les deux créneaux de 44 px de la barre de titre sont occupés (quitter, plus d'options). Le haut gauche est le seul angle libre — et il fait pendant, en miroir, aux deux boutons fantômes d'en face. */ /* Conteneur positionné explicite : la scène héritée est en `position:sticky` (donc déjà positionnée), mais on ne veut pas dépendre d'une valeur posée pour une autre raison, à trois fichiers de distance. */ html.gm .gm .bg-configurator__stage { position: relative !important; } html.gm .gm .gl-cart-pill { position: absolute; top: 10px; /* Zone sûre horizontale : en paysage, l'encoche mord sur le bord gauche. Même logique que --gm-safe-t / --gm-safe-b de la coque. */ left: max( 10px, env( safe-area-inset-left, 0px ) ); /* Même étage que les boutons fantômes de la scène : au-dessus du verre, sous les écrans empilés (z-index 20) et les feuilles (60/70). */ z-index: 3; /* La marge de calage du flux classique n'a plus lieu d'être hors flux. */ margin: 0; max-width: calc( 100% - 120px ); min-height: 36px; padding: 0 12px 0 9px; gap: 7px; background: rgba( 255, 255, 255, .76 ); border-color: var( --gm-line ); box-shadow: var( --gm-shadow ); font-size: 13px; } /* Le socle défensif de la coque (`:where(span, …)`, spécificité 0,2,1) repeint et redimensionne tous les `span` : nos deux jetons doivent le rebattre, sans quoi le compteur perd son or et le total sa couleur lisible. */ html.gm .gm .gl-cart-pill__icon { color: var( --gm-muted ); } html.gm .gm .gl-cart-pill__count { color: #0B1220; background: linear-gradient( 120deg, var( --gm-gold ), var( --gm-champ ) ); font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; } html.gm .gm .gl-cart-pill__total { /* Or LISIBLE sur clair : --gm-gold (#C8A96A) ne tient pas le contraste. */ color: var( --gm-gold-ink ); font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; } /* --- Confirmation ------------------------------------------------- */ /* `position:fixed` est inopérant ici : la scène pose `isolation:isolate`, la carte resterait peinte dans le contexte de la scène — donc SOUS le dock et la barre d'achat. On la pose donc en absolu dans la scène, au-dessus du verre : c'est bien « en place », là où le regard est déjà. */ html.gm .gm .gl-cart-done { position: absolute; left: 50%; right: auto; /* Au-dessus de `.gm__stage-bar` (54 px mesures + 12 px de garde), et non a la meme hauteur qu'elle. Les deux sont absolues dans des PARENTS DIFFERENTS — la barre dans la coque mobile, la carte dans la scene — donc leurs z-index ne se comparent pas : la barre passait devant les boutons « Voir le panier » et « Continuer », quoi qu'on ecrive. */ bottom: 78px; /* Au-dessus de la barre de taille et de l'invitation (z-index 3/4). */ z-index: 6; transform: translateX( -50% ); width: min( 340px, calc( 100% - 24px ) ); padding: 14px; border-color: var( --gm-line ); background: var( --gm-surface ); box-shadow: 0 12px 34px rgba( 17, 24, 39, .18 ); } html.gm .gm .gl-cart-done__text { color: var( --gm-ink ) !important; font-family: 'Manrope', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; } html.gm .gm .gl-cart-done__view, html.gm .gm .gl-cart-done__close { min-height: 48px; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; } html.gm .gm .gl-cart-done__view { /* Reprise littérale du bouton d'achat de la coque (.gm__cta-btn) : la confirmation prolonge le geste, elle ne le rejoue pas autrement. */ color: #0B1220; background: linear-gradient( 120deg, var( --gm-gold ), var( --gm-champ ) ); } html.gm .gm .gl-cart-done__close { color: var( --gm-ink ); background: var( --gm-surface ); border: 1px solid var( --gm-line ); } } /* fin @media (max-width:720px) */ /* ================================================================== Panier dans la barre de navigation, alerte en rangee propre ================================================================== La bande haute de la scene portait le statut du panier, les outils de dessin ET les alertes : les trois se recouvraient. Le statut remonte donc dans la barre (toujours visible, jamais sur le verre) et l'alerte prend sa propre rangee. Le JS deplace les noeuds ; ici on les rhabille. */ /* TROIS colonnes : quitter | titre | panier. La barre en a compte quatre tant qu'elle portait un bouton « options » a droite. Ce bouton retire, la regle qui l'envoyait en colonne 4 s'appliquait au bouton QUITTER — seul `.gm__bar-btn` restant, donc `:last-of-type` — qui partait a droite pendant que la pastille etait rejetee sur une SECONDE RANGEE. La barre passait de 60 a 113 px et mangeait 53 px de toile. Chaque element est donc place explicitement, sans dependre de sa position dans le balisage : c'est precisement ce qui vient de casser. La colonne du panier se replie d'elle-meme (largeur `auto`) quand la pastille est masquee. */ html.gm .gm__bar { grid-template-columns: 44px 1fr auto; } html.gm .gm__bar > .gm__bar-btn { grid-column: 1; } html.gm .gm__bar .gl-cart-pill { grid-column: 3; } html.gm .gm__bar .gl-cart-pill { position: static; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-width: 44px; /* cible tactile pleine, meme a un chiffre */ min-height: 44px; margin: 0 2px 0 0; padding: 0 8px; background: none; border: 0; border-radius: 999px; box-shadow: none; backdrop-filter: none; color: var( --gm-ink, #111827 ); } html.gm .gm__bar .gl-cart-pill:active { background: var( --gm-off, rgba( 17, 24, 39, .06 ) ); } /* Le compte devient une pastille de notification : lisible d'un coup d'oeil, sans lire de chiffres au milieu d'un texte. */ html.gm .gm__bar .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( --gm-champ, #E9D9B6 ), var( --gm-gold, #C9A44C ) ); border-radius: 999px; color: var( --gm-lux, #0B1220 ); font-family: var( --gm-head, inherit ); font-size: 11px; font-weight: 700; line-height: 1; } /* Le total quitte la barre : 375 px n'ont pas la place, et le prix de ce qu'on compose est deja sous le pouce, dans le bloc d'achat. La barre dit COMBIEN, le bas de page dit COMBIEN CA COUTE. */ html.gm .gm__bar .gl-cart-pill__total { display: none; } /* --- Alerte : sa propre rangee, sous la barre ------------------------ */ /* L'alerte reste dans la scene, mais ne court plus sous les fleches annuler/retablir : elle leur reserve leur emprise a droite (94 px + garde). Sur la capture iPhone, le message passait dessous et devenait illisible. La pastille du panier ayant quitte le coin gauche, le texte peut en revanche commencer au bord — et il est aligne a gauche, plus lisible que centre sur quatre lignes. */ html.gm .gm .bg-configurator__stage-alert { padding: 10px 104px 11px 16px; text-align: left; font-size: 13px; line-height: 1.35; } /* La note d'edition prend toute la rangee sous la touche doree. Ce n'est plus un bouton pleine hauteur — il coutait 61 px pris sur la scene, mesures a 375 px — mais une phrase et un lien, qui ne paraissent QUE lorsqu'on modifie une ligne du panier. */ html.gm .gm__cta .glassora-cart-edit-note { flex: 1 0 100%; margin: 4px 0 0; color: var( --gm-muted, #5F6470 ); } /* LA PHRASE SAUTE, SUR MOBILE SEULEMENT. Mesuree a 375 px : 282 px pour la phrase, 180 px pour le lien — ils ne tiennent pas sur une ligne dans les 347 px utiles, et empiles ils coutaient 69 px, plus que le bouton qu'on vient de retirer. Or la touche principale annonce deja « Mettre a jour : 6 verres » : l'etat est dit. Ne reste que ce qui manquait vraiment, la sortie. Ailleurs (bureau, mise en page classique) la colonne est large : la phrase y reste. */ html.gm .gm__cta .glassora-cart-edit-note__texte { display: none; } html.gm .gm__cta .glassora-cart-new-item { color: var( --gm-gold-ink, #7A6224 ); } html.gm .gm__cta .glassora-cart-new-item:active { color: var( --gm-ink, #111827 ); } /* La feuille couvre la coque plein ecran : le dock et la barre d'achat sont posés au-dessus de tout, il faut passer devant eux. */ html.gm .gl-cart-sheet { z-index: 9600; } html.gm .gl-cart-sheet__panel { max-height: 84vh; } /* Sans chiffre, la pastille se resume a son icone : on la recentre pour qu'elle ne flotte pas dans une capsule trop large. */ html.gm .gm__bar .gl-cart-pill { justify-content: center; } /* --- Titre vraiment centre sur la barre --------------------------- */ /* La barre n'est plus symetrique : un bouton a gauche, la pastille ET le bouton d'options a droite. Le titre, cale dans sa colonne, se retrouvait decale de 34 px vers la gauche. Il traverse donc toute la rangee et se centre sur la BARRE, pas sur une colonne. `pointer-events: none` pour que les commandes qu'il survole restent cliquables. */ html.gm .gm__bar { position: relative; } /* Le titre SORT de la grille et se centre en absolu sur la barre. Le laisser dans une colonne le decalait de 34 px des que la pastille est apparue a droite ; le placer explicitement en rangee 1 repoussait au contraire ses voisins en rangee 2. Hors flux, il est centre quoi qu'il arrive, et les commandes gardent la grille pour elles seules. */ html.gm .gm__bar > .gm__bar-title { position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); max-width: calc( 100% - 200px ); pointer-events: none; text-align: center; } /* --- L'alerte ne rapetisse plus le verre -------------------------- */ /* Dans le flux, elle poussait la scene et le verre perdait 128 px de hauteur, soit 27 % de sa taille — le dessin devenait illisible au moment precis ou le client a besoin de le regarder. Elle flotte desormais au-dessus du haut de la scene, qui est vide : la geometrie du verre ne depend plus d'elle. */ html.gm .gm .bg-configurator__stage-alert { position: absolute; top: 0; left: 0; right: 0; z-index: 4; max-height: 40%; overflow-y: auto; background: var( --gm-warn-bg, #FBF3DF ); border-bottom: 1px solid var( --gm-warn-line, rgba( 176, 137, 40, .3 ) ); box-shadow: 0 6px 18px rgba( 17, 24, 39, .06 ); } /* Meme precaution que sur desktop : le titre traversant la rangee 1, les commandes doivent y etre posees explicitement, sinon le placement automatique les renvoie en rangee 2 et la barre double de hauteur. */ /* Cible tactile pleine sur telephone : 30 px se rate au pouce. */ html.gm .gm .bg-configurator__stage-alert-close { width: 44px; height: 44px; /* AUCUNE marge negative a droite : elle poussait le bouton de 12 px dans la zone reservee aux fleches annuler/retablir, et son bord mordait sur la premiere. Deux cibles qui se chevauchent, c'est un clic sur deux qui part au mauvais endroit. */ margin: -10px 0 0 0; } /* Le pas-a-pas prend sa propre rangee, au-dessus du prix et de la grande touche : cale a cote d'eux il tombait sous la cible tactile. */ html.gm .gm__cta .gm__cta-qty { flex: 1 0 100%; justify-content: space-between; margin: 0 0 2px; } html.gm .gm__cta .gl-qty__btn { width: 44px; height: 44px; } /* Le bloc prix est devenu un bouton : il doit EN AVOIR L'AIR. Un bloc de texte secretement cliquable ne se decouvre pas — on aurait remplace une barre encombrante par une commande invisible. */ html.gm .gm__cta .gm__cta-price { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 30px 6px 10px; background: var( --gm-off, rgba( 17, 24, 39, .04 ) ); border: 1px solid var( --gm-line, rgba( 17, 24, 39, .12 ) ); border-radius: var( --gm-r-btn, 13px ); text-align: left; cursor: pointer; position: relative; } html.gm .gm__cta .gm__cta-price::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 1.8px solid var( --gm-muted, #5F6470 ); border-bottom: 1.8px solid var( --gm-muted, #5F6470 ); transform: rotate( -45deg ); } html.gm .gm__cta .gm__cta-price:active { background: var( --gm-off, rgba( 17, 24, 39, .08 ) ); } /* --- Les deux actions commerciales, sous le bouton d'ajout ---------------- « Generer mon BAT » et « Demander un devis » etaient enfermees dans le menu « ... » du coin superieur droit, derriere une icone sans etiquette. Or ce sont les deux decisions qu'on prend PRECISEMENT au moment ou l'on regarde le prix : personne n'ira les chercher dans un menu d'outils. Sur desktop elles sont deja a cote du bouton d'ajout — le mobile s'aligne. Deliberement DISCRETES : ce sont des sorties de secours du parcours normal, pas des concurrentes du bouton d'ajout. Texte seul, filet leger, pas de fond plein qui viendrait disputer l'attention a l'action principale. -------------------------------------------------------------------------- */ html.gm .gm__cta-second[hidden] { display: none; } html.gm .gm__cta-second { flex: 1 0 100%; display: flex; gap: 8px; } html.gm .gm__cta-link { flex: 1 1 0; min-width: 0; /* 40 px et non 44 : ce sont des actions secondaires, et la barre est deja le bloc le plus haut de l'ecran. La cible reste confortable parce que la largeur, elle, est genereuse — la moitie de la barre chacune. */ min-height: 40px; padding: 0 10px; border: 1px solid var( --gm-line ); border-radius: 999px; background: transparent; color: var( --gm-ink-soft, #5F6470 ); font: inherit; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } html.gm .gm__cta-link:active { transform: scale( .985 ); } html.gm .gm__cta-link:focus-visible { outline: 2px solid var( --gold-ink, #7A6224 ); outline-offset: 2px; } @media ( prefers-reduced-motion: reduce ) { html.gm .gm__cta-link:active { transform: none; } } /* --- Les faces gravees, sur la scene ------------------------------------- Graver une face ou deux est une decision structurante : elle change le prix, le bon a graver, et le fichier envoye au laser. Elle etait la troisieme section d'un ecran qu'il fallait aller ouvrir — trois gestes de profondeur pour un choix que le desktop, lui, affiche en permanence. En haut a GAUCHE : les outils occupent la droite. La pastille annonce son ETAT (« Recto », « Recto + verso ») et non l'action, parce qu'un client doit pouvoir savoir ou il en est sans rien deduire. -------------------------------------------------------------------------- */ html.gm .gm__faces { position: absolute; top: 10px; left: 10px; z-index: 3; min-height: 34px; padding: 0 12px; border: 1px solid var( --gm-line ); border-radius: 999px; background: var( --gm-surface ); color: var( --gm-ink-soft, #5F6470 ); font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; cursor: pointer; } /* Deux faces : l'etat le moins courant se signale, sans crier. */ html.gm .gm__faces.is-duo { border-color: var( --gold-ink, #7A6224 ); color: var( --gold-ink, #7A6224 ); } html.gm .gm__faces[hidden] { display: none; } html.gm .gm__faces:active { transform: scale( .97 ); } html.gm .gm__faces:focus-visible { outline: 2px solid var( --gold-ink, #7A6224 ); outline-offset: 2px; } @media ( prefers-reduced-motion: reduce ) { html.gm .gm__faces:active { transform: none; } }