:root { /* Refonte identité visuelle (2026-08-20) : fond sombre chaud + accent doré, sur le modèle de l'affiche marketing "De l'idée à la réalité" (logo serif Reno Design, fond noir, lettrage crème, accent unique doré plutôt que la palette bleu/or précédente). --paper reste le nom du token de fond de page pour ne pas renommer partout (son RÔLE change : il nommait un fond clair "papier", il nomme maintenant un fond sombre "ardoise" — même fonction dans la cascade). --surface (nouveau) reprend le rôle que jouait l'ancien blanc littéral (#fff) pour les cartes/panneaux : une surface légèrement plus claire que le fond de page, remplace tous les "background: #fff" en dur qui ne se seraient pas inversés automatiquement avec le reste des tokens. */ --paper: #131110; --surface: #1E1B17; --ink: #F3ECE0; --ink-muted: #A99E8E; --line: #35302A; --accent: #9C7A42; --accent-soft: #251F15; --gold: #D9B77C; --danger: #E0685A; --danger-soft: rgba(224,104,90,0.14); --success: #5FAE84; --success-soft: rgba(95,174,132,0.14); --canvas-bg: #171a1d; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Texte présent pour les lecteurs d'écran uniquement (audit accessibilité) : label associé à un champ dont le placeholder seul ne suffit pas (le placeholder disparaît à la saisie et n'est de toute façon pas fiable comme label — non lu par tous les lecteurs d'écran). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Icônes (00-icons.js) ---------- */ [data-icon] svg { display: block; } .inline-icon { display: inline-flex; vertical-align: -3px; margin-right: 6px; } .section-label .inline-icon svg { width: 13px; height: 13px; } .tab-icon { display: inline-flex; vertical-align: -3px; margin-right: 6px; } .tab-icon svg { width: 15px; height: 15px; } body { margin: 0; overflow: hidden; background-color: var(--canvas-bg); font-family: 'Manrope', system-ui, sans-serif; } /* `touch-action: none` (correctif bug signalé 2026-08-15, "difficulté à déplacer les meubles, surtout en mode 2D... parfois ça fonctionne, parfois non") : sans ça, le navigateur mobile reste libre d'interpréter le même geste tactile qu'un glisser de meuble comme un défilement/ pull-to-refresh natif — les deux se disputent le même doigt pendant toute la durée du geste. Le code applicatif gère déjà lui-même pan/rotation/zoom (OrbitControls) et le glisser de meuble (js/02-controls-loader.js) : rien ici ne dépend du geste natif du navigateur, qui n'a donc aucune raison de rester actif sur ce canvas. */ canvas { display: block; width: 100vw; height: 100vh; touch-action: none; } /* Vignettage léger façon photo, superposé au rendu 3D (voir 01-scene-setup.js) : toujours sous les panneaux d'UI (z-index 15+ ailleurs dans ce fichier) et jamais interactif. */ #renderVignette { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(10,10,8,0.16) 100%); } /* ---------- Boutons flottants (FAB) ---------- */ .fab { /* var(--surface), pas var(--ink) : --ink est maintenant la couleur de TEXTE claire du thème sombre (voir :root) — un fond de bouton clair briserait le contraste avec l'icône blanche. --surface (fond de carte sombre) joue ici le rôle que tenait l'ancien --ink foncé. */ position: absolute; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: #fff; border: none; font-size: 19px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 30; cursor: pointer; padding: 0; transition: transform 0.15s ease; } .fab:active { transform: scale(0.92); } #menuToggleBtn { top: max(14px, env(safe-area-inset-top)); left: 14px; background: var(--accent); } #undoFab { top: max(14px, env(safe-area-inset-top)); left: 74px; } #redoFab { top: max(14px, env(safe-area-inset-top)); left: 134px; } /* ---------- Cloche de notifications (v4, renderNotificationBell dans js/00-auth.js) : rendue en FAB dans ce cluster plutôt qu'en icône ronde 30px de l'en-tête compte (css/account.css, jamais chargé ici) — classes .notif-* redéfinies indépendamment pour ce contexte, même principe que les autres duplications volontaires entre ces deux fichiers jamais chargés ensemble. ---------- */ #notifFabSlot { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 194px; z-index: 30; } #notifFabSlot .notif-wrap { position: relative; display: block; } #notifFabSlot .notif-bell-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; padding: 0; } #notifFabSlot .notif-bell-btn svg { width: 20px; height: 20px; } #notifFabSlot .notif-bell-count { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; padding: 0 3px; } /* `position: fixed` + marges de viewport plutôt que `absolute; left:0` ancré sur le bouton-cloche (signalé : "en mobile les notifications sortent de l'écran") : #notifFabSlot est décalé à left:194px (après les 3 FAB menu/annuler/rétablir qui le précèdent) pour laisser de la place à ces boutons sur desktop, mais un panneau de 300px ancré à gauche de CE point (donc à 194px du bord) déborde largement à droite sur un écran mobile de ~360-390px de large — `max-width: calc(100vw - 32px)` limitait déjà la LARGEUR mais pas la POSITION, insuffisant à lui seul. Ancré directement au viewport (au lieu du bouton) avec des marges fixes des deux côtés, il ne peut plus jamais déborder quelle que soit la largeur d'écran. Réancré près du bouton sur desktop (>=700px, media query plus bas) où la place ne manque pas. */ #notifFabSlot .notif-dropdown { position: fixed; top: max(74px, calc(env(safe-area-inset-top) + 60px)); left: 16px; right: 16px; background: var(--paper); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,0.3); padding: 10px; display: none; z-index: 70; max-height: 380px; overflow-y: auto; } #notifFabSlot .notif-dropdown.open { display: block; } #notifFabSlot .notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; } #notifFabSlot .notif-dropdown-head span { font-size: 12.5px; font-weight: 800; color: var(--ink); } #notifFabSlot .notif-mark-all-btn { background: none; border: none; padding: 0; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; } #notifFabSlot .notif-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 9px 8px; cursor: pointer; font-family: inherit; } #notifFabSlot .notif-item:hover, #notifFabSlot .notif-item.unread { background: var(--accent-soft); } #notifFabSlot .notif-item-title { font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 0 0 2px; } #notifFabSlot .notif-item-body { font-size: 11.5px; color: var(--ink-muted); margin: 0 0 3px; line-height: 1.4; } #notifFabSlot .notif-item-date { font-size: 10.5px; color: var(--ink-muted); } #notifFabSlot .notif-empty { color: var(--ink-muted); font-size: 12.5px; padding: 16px 8px; text-align: center; } /* Barre segmentée plutôt qu'une colonne de cercles flottants séparés : même geste, lecture visuelle plus nette (groupe d'actions "vue" clairement délimité). */ #viewControls { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; z-index: 30; background: rgba(34,37,42,0.6); backdrop-filter: blur(6px); border-radius: 30px; box-shadow: 0 4px 14px rgba(0,0,0,0.28); } #viewControls .fab { position: static; background: transparent; box-shadow: none; } /* Icône assombrie à l'état actif (pas héritée du blanc de .fab) : --gold est un doré clair, une icône blanche dessus perd tout contraste — même correction que .level-tab.active plus bas. */ #viewControls .fab.active { background: var(--gold); color: var(--paper); } .vc-divider { width: 24px; height: 1px; background: rgba(255,255,255,0.22); margin: 2px 0 4px; } /* ---------- Bandeau "lecture seule" (js/18-levels.js refreshReadOnlyBanner) : PERSISTANT, pas un toast — bande pleine largeur collée au tout haut de l'écran (top:0), volontairement séparée de la pile de badges centrés plus bas (#hud-toast/#video-recording-badge/#elevationToolbar, tous ancrés à top:max(74px,...) et mutuellement exclusifs) pour ne jamais entrer en conflit avec eux ni disparaître comme un message transitoire. ---------- */ #readonly-banner { display: none; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--gold); color: #2A2113; font-size: 12.5px; font-weight: 700; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25); } /* ---------- Toast HUD (confirmations / erreurs) ---------- */ #hud-toast { position: absolute; left: 50%; z-index: 50; top: max(74px, calc(env(safe-area-inset-top) + 60px)); max-width: min(420px, 88vw); text-align: center; background: rgba(24,22,18,0.94); color: #fff; padding: 11px 16px 11px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,0.35); border-left: 3px solid var(--success); visibility: hidden; opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; } #hud-toast.error { border-left-color: var(--danger); } #hud-toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity 0.2s ease, transform 0.2s ease; } /* ---------- Choix de destination après un export (v5, js/03-history.js showExportDestinationChoice — vidéo/PDF du plan/devis) : même carte que #hud-toast, avec 2 boutons plutôt qu'un simple texte auto-masqué. ---------- */ #export-destination-choice { position: absolute; left: 50%; z-index: 55; top: max(74px, calc(env(safe-area-inset-top) + 60px)); max-width: min(360px, 88vw); text-align: center; background: rgba(24,22,18,0.96); color: #fff; padding: 14px 16px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); border-left: 3px solid var(--success); visibility: hidden; opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; } #export-destination-choice.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity 0.2s ease, transform 0.2s ease; } #exportChoiceLabel { font-size: 13px; font-weight: 600; margin: 0 0 10px; } .export-destination-choice-actions { display: flex; flex-direction: column; gap: 8px; } .export-destination-choice-actions button { border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } #exportChoiceDownloadBtn { background: rgba(255,255,255,0.14); color: #fff; } #exportChoiceCloudBtn { background: var(--gold); color: #1a1712; } #exportChoiceCloudBtn:disabled { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); cursor: not-allowed; } /* ---------- Cotes / métrés (vue plan) ---------- */ #plan-dimensions-layer { position: absolute; inset: 0; z-index: 15; pointer-events: none; display: none; } /* Longueur + angle en direct pendant le tracé d'un mur (js/08-walls.js) — actif en 2D ET en 3D (contrairement au calque de cotes ci-dessus), donc positionné en `fixed` directement plutôt que dans #plan-dimensions-layer (masqué hors du mode 2D). */ #wall-draw-label { position: fixed; transform: translate(-50%, -50%); z-index: 15; pointer-events: none; background: rgba(41,82,163,0.9); color: #fff; border: 1px solid transparent; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; display: none; } /* color en dur (pas var(--ink), un crème clair dans ce thème) : ce fond reste blanc quel que soit le thème (rgba(255,255,255,...)) — un texte clair dessus est illisible (signalé "cotations en jaune sur fond blanc"). Même correctif que #app-dialog-input, js/00-dialogs.js. */ .plan-dim-label { position: absolute; transform: translate(-50%, -50%); background: rgba(255,255,255,0.88); color: #22252A; border: 1px solid var(--line); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; display: none; } .plan-dim-label.plan-dim-area { background: rgba(41,82,163,0.9); color: #fff; border-color: transparent; font-size: 12px; white-space: pre-line; text-align: center; line-height: 1.3; /* Seule étiquette cliquable du calque (le calque parent est pointer-events:none) : nommer une pièce se fait en cliquant directement sur son étiquette de surface. */ pointer-events: auto; cursor: pointer; } .plan-dim-label.plan-dim-area .plan-room-name { display: block; font-size: 13px; font-weight: 800; } .plan-dim-label.plan-dim-area .plan-room-name-placeholder { font-weight: 600; font-style: italic; opacity: 0.75; } /* Toujours visible (pas seulement au survol souris) : sur tactile il n'y a pas de hover, donc le crayon est le seul indice visuel qu'on peut cliquer pour nommer la pièce. */ .plan-dim-label.plan-dim-area .plan-name-pencil { opacity: 0.85; font-size: 11px; } /* Côte de l'outil de mesure (js/45-measure-tool.js) : même famille visuelle que .plan-dim-label, teinte rouge (MEASUREMENT_COLOR, 08-walls.js) pour rester visuellement distincte d'une longueur de mur automatique (bleu foncé neutre) au premier coup d'œil. */ .plan-dim-label.plan-dim-measurement { background: rgba(231,76,60,0.92); color: #fff; border-color: transparent; } /* Édition du nom de pièce en place (js/14-view-2d.js startRoomNameEdit), à la place d'un window.prompt() générique — même famille visuelle que l'étiquette elle-même. */ .plan-room-name-input { width: 130px; max-width: 40vw; font: inherit; font-weight: 800; font-size: 13px; color: var(--ink); background: var(--surface); border: none; border-radius: 4px; padding: 2px 5px; text-align: center; outline: 2px solid rgba(255,255,255,0.7); } /* Bas-droite (pas top-right : #viewControls y occupe déjà toute la colonne haute) — échelle et nord regroupées toutes les deux bas-droite (voir #plan-scale-bar ci-dessous). */ #plan-north-arrow { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); right: 16px; z-index: 15; display: none; flex-direction: column; align-items: center; gap: 1px; color: var(--ink); pointer-events: none; } #plan-north-arrow span { font-size: 11px; font-weight: 800; letter-spacing: .04em; } #plan-north-arrow svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } #plan-scale-bar { /* À droite (avec la flèche nord), pas à gauche : demande utilisateur — l'échelle bas-gauche classique gênait la lecture du plan sur ce côté. Décalée horizontalement de la flèche nord (même bas de ligne, right:16px) pour ne jamais se chevaucher avec elle. */ position: absolute; right: 96px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 15; display: none; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; } #plan-scale-bar-track { height: 5px; border: 1.5px solid var(--ink); border-top: none; width: 100px; background: linear-gradient(var(--ink), var(--ink)) left / 1.5px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) right / 1.5px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; } #plan-scale-bar-label { font-size: 11px; font-weight: 700; color: var(--ink); } /* ---------- Sélecteur d'étage — pile de losanges (phase D, roadmap "Inspiration Planner 5D") ---------- Remplace l'ancienne barre horizontale de pastilles texte centrée en haut : une pile VERTICALE de losanges en bas à droite, RDC en bas / étages au-dessus (même lecture "empilement d'un bâtiment" que les captures Planner 5D — voir buildLevelDiamondButton, js/18-levels.js), le niveau actif ressortant par sa couleur plutôt qu'un libellé de plus à lire. Décalée au-dessus de la zone de la flèche Nord (#plan-north-arrow, même coin, visible seulement en mode 2D) pour ne jamais se chevaucher avec elle. */ #level-tabs { position: absolute; right: 16px; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px); z-index: 25; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; } .level-tab { margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; font-family: inherit; min-height: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .level-tab-diamond { width: 30px; height: 30px; border-radius: 7px; transform: rotate(45deg); background: rgba(34,37,42,0.68); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; } .level-tab-label { transform: rotate(-45deg); font-size: 11px; font-weight: 800; color: #fff; } .level-tab:hover .level-tab-diamond { transform: rotate(45deg) scale(1.08); } .level-tab:active .level-tab-diamond { transform: rotate(45deg) scale(0.94); } .level-tab.active .level-tab-diamond { background: var(--gold); } /* var(--paper), pas var(--ink) : --ink est le texte clair du thème sombre, illisible sur le losange doré actif — il faut ici la même teinte sombre que le fond de page. */ .level-tab.active .level-tab-label { color: var(--paper); } .level-tab-add .level-tab-diamond { background: rgba(34,37,42,0.42); } #level-tabs.single-level .level-tab-add .level-tab-diamond { background: rgba(34,37,42,0.6); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); } /* ---------- Rideau (overlay) ---------- */ #menuOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 39; backdrop-filter: blur(1px); } #menuOverlay.open { display: block; } /* ---------- Menu tiroir (mobile first) ---------- */ #menuDrawer { position: fixed; top: 0; left: 0; height: 100dvh; width: min(360px, 88vw); background: var(--paper); box-shadow: 3px 0 24px rgba(0,0,0,0.28); transform: translateX(-105%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); z-index: 40; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } #menuDrawer.open { transform: translateX(0); } .menu-header { display: flex; flex-direction: column; padding: 20px 18px 16px; flex-shrink: 0; position: relative; background: linear-gradient(var(--paper), var(--paper)), repeating-linear-gradient(0deg, rgba(41,82,163,0.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(41,82,163,0.07) 0 1px, transparent 1px 22px); border-bottom: 1px solid var(--line); } .menu-header .eyebrow { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 3px; } .menu-header h4 { margin: 0 0 10px; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; } .menu-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } /* Lien de retour explicite (flèche + texte souligné au survol) plutôt qu'un simple titre rendu cliquable sans indice visuel — signalé comme "pas clair que ce soit un lien". */ .menu-header-back { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; } .menu-header-back:hover { text-decoration: underline; } .menu-header-back span { width: 14px; height: 14px; } .menu-close { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-size: 15px; cursor: pointer; flex-shrink: 0; } /* Toujours utilisé par l'en-tête du panneau Métrés (export PDF/devis, boutons icône-seule — pas de problème de découvrabilité là où bien moins d'actions cohabitent). */ .menu-icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-size: 15px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; } .menu-icon-btn:active { transform: scale(0.92); } /* Icône + label texte, en ligne, plutôt qu'une rangée de rondes icône-seule avec juste un title="..." : un tooltip ne s'affiche jamais au tactile, donc sur une appli tactile ces boutons ne se comprenaient qu'en cliquant au hasard — signalé comme "toujours pas satisfaisant". Sous le titre plutôt qu'à côté : toute la largeur du panneau est disponible, au lieu de se disputer l'espace avec "Éditeur de plan". Wrap en plusieurs lignes si l'écran est étroit plutôt que de rétrécir les boutons jusqu'à l'illisible. */ .menu-header-actions { display: flex; flex-wrap: wrap; gap: 6px; } .menu-action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .menu-action-btn span[data-icon] { width: 16px; height: 16px; flex-shrink: 0; } .menu-action-btn:active { transform: scale(0.96); } .menu-top-tabs { display: flex; flex-shrink: 0; gap: 4px; padding: 10px 12px; background: var(--paper); border-bottom: 1px solid var(--line); } .top-tab { flex: 1; padding: 10px 4px; background: transparent; color: var(--ink-muted); border: none; font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 10px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .top-tab.active { color: #fff; background: var(--accent); } /* Sous-onglets du groupe "Modéliser" (Roadmap "Éditeur — menu de gauche" : Murs/Ouvertures/ Meubles regroupés) — rangée secondaire, visuellement plus discrète que .menu-top-tabs pour marquer la hiérarchie (groupe -> sous-section), masquée quand Analyser/Découvrir est actif. */ .menu-model-subtabs { display: flex; flex-shrink: 0; gap: 4px; padding: 0 12px 10px; background: var(--paper); border-bottom: 1px solid var(--line); } .menu-model-subtabs.hidden { display: none; } .sub-tab { flex: 1; padding: 8px 4px; background: var(--accent-soft, #251F15); color: var(--ink-muted); border: none; font-family: inherit; font-size: 11.5px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sub-tab.active { color: #fff; background: var(--accent); } .menu-body { flex: 1; overflow-y: auto; padding: 16px 14px 28px; -webkit-overflow-scrolling: touch; background: var(--paper); } .menu-section { display: none; } .menu-section.active { display: block; } .section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); font-weight: 700; margin: 20px 0 10px; } .section-label:first-child { margin-top: 0; } .section-hint { font-size: 12px; color: var(--ink-muted); margin: -6px 0 14px; line-height: 1.4; } /* Grille de cartes meubles */ .furniture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } button.furniture-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin: 0; padding: 12px 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12.5px; text-align: left; min-height: 0; transition: border-color 0.15s ease, transform 0.1s ease; } button.furniture-item:active { transform: scale(0.97); border-color: var(--accent); } .fi-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 17px; overflow: hidden; } /* Aperçu 3D réel du meuble (getFurniturePreviewThumbnail, 06-menu-ui.js) plutôt que l'icône SVG générique : occupe toute la pastille, recadré/centré par le rendu lui-même. */ .fi-icon img { width: 100%; height: 100%; object-fit: contain; } /* Catalogue de meubles/objets muraux (renderItemGrid, 06-menu-ui.js) : une carte par ligne, aperçu 3D à GAUCHE du titre et bien plus grand (72px, contre la pastille 34px partagée par ailleurs par les nuanciers peinture/sol et le choix de style de toit — ceux-là gardent leur petite grille à 2 colonnes, une icône plate n'a pas besoin d'autant de place qu'un vrai rendu 3D). Signalé (2026-08-22) : les aperçus étaient là mais trop petits/mal placés pour vraiment distinguer un meuble d'un autre. */ .furniture-grid-thumb { grid-template-columns: 1fr; gap: 8px; } .furniture-grid-thumb button.furniture-item { flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; } .furniture-grid-thumb .fi-icon { width: 72px; height: 72px; border-radius: 12px; font-size: 30px; flex-shrink: 0; } .furniture-grid-thumb .fi-name { font-size: 13.5px; } .fi-name { display: block; line-height: 1.25; } .fi-dim { display: block; font-weight: 500; opacity: .6; font-size: 10.5px; margin-top: 1px; } /* Nuancier peinture/papier peint (renderWallMaterialPicker, 06-menu-ui.js) : même carte que .furniture-item, mais l'icône est remplacée par un aperçu de couleur/motif réel plutôt qu'un pictogramme — plus parlant pour un choix de finition murale. */ .wm-swatch { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(0,0,0,0.14); } button.furniture-item.wall-material-item.selected { border-color: var(--accent); border-width: 2px; } /* Boutons d'action (ouvertures / murs) : cartes horizontales sobres, accent via pastille icône */ button.action-item { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 12px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13.5px; text-align: left; min-height: 0; transition: border-color 0.15s ease, background 0.15s ease; } button.action-item .ai-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--accent-soft); } button.action-item .ai-text { display: flex; flex-direction: column; } button.action-item .ai-text small { display: block; font-weight: 500; opacity: .6; font-size: 11px; margin-top: 2px; } button.action-item.active { background: var(--accent); color: #fff; border-color: var(--accent); } button.action-item.active .ai-icon { background: rgba(255,255,255,0.15); } button.action-item.active .ai-text small { opacity: .75; } /* Sous-panneaux "tiroir multi-niveau" (renderé statiquement dans index.html, piloté par openMenuSubpanel/closeMenuSubpanel, 06-menu-ui.js) : une section de menu devenue trop longue (Murs) se présente d'abord comme une liste de catégories ; un tap affiche le sous-panneau correspondant (avec bouton retour) et masque la liste, plutôt qu'un unique défilement plat. Même principe que .menu-section (un seul enfant visible à la fois), pas de position absolue ni d'animation de glissement : la hauteur du tiroir doit rester dictée par le contenu réellement affiché, pas par le plus long des deux. */ .menu-categories.hidden { display: none; } /* .menu-category-row s'appuie sur button.action-item pour l'essentiel (chip icône, mise en page texte/small) — elle n'ajoute que ce qui lui est propre : le texte doit pouvoir pousser le chevron final tout à droite, et action-item ne prévoyait pas de 3e élément flex. */ .menu-category-row .ai-text { flex: 1; } .menu-category-row .mcr-chevron { color: var(--ink-muted); flex-shrink: 0; font-size: 15px; } .menu-subpanel { display: none; } .menu-subpanel.open { display: block; } .menu-subpanel-header { display: flex; align-items: center; gap: 10px; margin: -2px 0 16px; } .menu-subpanel-back { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; font-size: 14px; } .menu-subpanel-title { font-weight: 800; font-size: 14.5px; color: var(--ink); } #wall-hint, #edit-hint, #quickroom-hint, #refimg-reposition-hint, #mep-hint, #floor-hole-hint, #roof-panel-hint { font-size: 12px; color: var(--ink-muted); text-align: left; display: none; margin: -2px 0 12px; line-height: 1.4; background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; } #placement-bar { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(24,22,18,0.94); color: #fff; padding: 10px 14px; border-radius: 14px; display: none; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 13px; font-weight: 600; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,0.35); max-width: 92vw; } #placement-bar button { width: auto; margin: 0; padding: 9px 14px; background: var(--danger); color: #fff; border: none; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 13px; min-height: 40px; cursor: pointer; } #furniture-toolbar { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(24,22,18,0.94); color: #fff; padding: 10px 14px; border-radius: 14px; display: none; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } #furniture-toolbar button { width: auto; margin: 0; padding: 9px 14px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 13px; min-height: 40px; cursor: pointer; } #wall-toolbar { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(24,22,18,0.94); color: #fff; padding: 10px 14px; border-radius: 14px; display: none; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,0.35); max-width: 92vw; text-align: center; flex-wrap: wrap; justify-content: center; } #wall-toolbar button { width: auto; margin: 0; padding: 9px 14px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 13px; min-height: 40px; cursor: pointer; } /* Mêmes réglages que #wall-toolbar (US121/US122) : sélection d'une ouverture ou d'un élément mural déjà posé, jusqu'ici sans aucun moyen de le retoucher/supprimer après coup. Même chose pour #measure-toolbar (js/45-measure-tool.js) : sélection d'une côte déjà posée. */ #wallitem-toolbar, #opening-toolbar, #measure-toolbar, #floorhole-toolbar, #roofpanel-toolbar, #annotation-toolbar { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(24,22,18,0.94); color: #fff; padding: 10px 14px; border-radius: 14px; display: none; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,0.35); max-width: 92vw; text-align: center; flex-wrap: wrap; justify-content: center; } #wallitem-toolbar button, #opening-toolbar button, #measure-toolbar button, #floorhole-toolbar button, #roofpanel-toolbar button, #annotation-toolbar button { width: auto; margin: 0; padding: 9px 14px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 13px; min-height: 40px; cursor: pointer; } /* #annotation-toolbar (js/48-annotations.js) : contrairement aux autres, affiche aussi le texte du commentaire + son auteur/date au-dessus des boutons — flex-basis:100% les pousse sur leur propre ligne, même mécanisme flex-wrap que #elevationToolbar plus bas. */ #annotation-toolbar-text { flex-basis: 100%; font-weight: 700; font-size: 13.5px; text-align: left; } #annotation-toolbar-meta { flex-basis: 100%; font-weight: 500; font-size: 11.5px; color: rgba(255,255,255,0.6); text-align: left; margin-top: -6px; } /* ---------- Vues d'élévation (js/18-levels.js), visibles seulement en vue extérieure ---------- */ #elevationToolbar { /* Même décalage que #hud-toast/#video-recording-badge : ligne du dessous, sous le haut de l'écran. #level-tabs ne partage plus cette zone depuis son passage en pile de losanges bas-droite (phase D de la roadmap "Inspiration Planner 5D"), mais le décalage reste cohérent avec les autres éléments transitoires de cette même ligne. */ position: absolute; top: max(74px, calc(env(safe-area-inset-top) + 60px)); left: 50%; transform: translateX(-50%); background: rgba(24,22,18,0.94); color: #fff; padding: 8px 10px; border-radius: 14px; display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,0.35); max-width: 92vw; flex-wrap: wrap; justify-content: center; } #elevationToolbar.open { display: flex; } #elevationToolbar button { width: auto; margin: 0; padding: 8px 12px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 12px; min-height: 34px; cursor: pointer; } #elevationToolbar button.active { background: var(--accent); border-color: var(--accent); } /* ---------- Vue 1ère personne ---------- */ #fpJoystick { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 28px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.35); display: none; z-index: 32; touch-action: none; } #fpJoystickKnob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.85); transform: translate(-50%,-50%); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } #fpExitBtn { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: none; z-index: 32; background: rgba(24,22,18,0.9); color: #fff; border: none; border-radius: 22px; padding: 10px 18px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; } /* ---------- Panneau de configuration des variables (meubles paramétriques) ---------- */ #paramOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 44; } #paramOverlay.open { display: block; } #paramPanel { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-radius: 18px 18px 0 0; z-index: 45; transform: translateY(105%); transition: transform 0.25s cubic-bezier(.2,.8,.2,1); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 75vh; overflow-y: auto; box-shadow: 0 -6px 24px rgba(0,0,0,0.25); } #paramPanel.open { transform: translateY(0); } .param-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .param-header span { font-weight: 800; font-size: 17px; color: var(--ink); } .param-row { margin-bottom: 18px; } .param-row label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .param-row label .param-value { color: var(--accent); font-weight: 800; } .param-row input[type=range] { width: 100%; accent-color: var(--accent); height: 22px; } .param-row select { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--line); font-family: inherit; font-size: 13px; background: var(--surface); color: var(--ink); } .param-toggle-row { display: flex; align-items: center; justify-content: space-between; } .param-toggle-row span { font-size: 13px; font-weight: 700; color: var(--ink); } .param-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; } .param-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 1; } .param-switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 13px; transition: background 0.15s ease; } .param-switch .thumb { /* Le curseur reste clair (var(--ink), pas --surface) volontairement : sur fond sombre, un curseur de la même teinte que la piste (var(--line)) s'y fondrait complètement à l'état désactivé — un galet clair garde l'affordance "interrupteur" lisible dans les deux états. */ position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.15s ease; } .param-switch input:checked ~ .track { background: var(--accent); } .param-switch input:checked ~ .thumb { transform: translateX(20px); } .param-place-btn { width: 100%; padding: 15px; background: var(--accent); color: #fff; border: none; border-radius: 12px; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer; } /* ---------- Métrés & quantités (US14) ---------- */ #bomOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 46; backdrop-filter: blur(1px); } #bomOverlay.open { display: block; } #bomPanel { position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 92vw); background: var(--paper); box-shadow: -3px 0 24px rgba(0,0,0,0.28); transform: translateX(105%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); z-index: 47; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } #bomPanel.open { transform: translateX(0); } /* Variantes de conception (US BIM, js/38-design-variants.js) : même patron que #bomOverlay/ #bomPanel juste au-dessus (panneau plein écran à droite), pour rester visuellement cohérent avec le reste de "Résumé du projet" sans dupliquer les règles de positionnement. */ #variantsOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 46; backdrop-filter: blur(1px); } #variantsOverlay.open { display: block; } #variantsPanel { position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 92vw); background: var(--paper); box-shadow: -3px 0 24px rgba(0,0,0,0.28); transform: translateX(105%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); z-index: 47; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } #variantsPanel.open { transform: translateX(0); } .variant-new-row { display: flex; gap: 8px; margin-bottom: 18px; } .variant-new-row input[type=text] { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--ink); } .variant-new-row button { border: none; border-radius: 10px; padding: 0 14px; background: var(--accent); color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .bom-room-actions { display: flex; gap: 8px; margin-top: 10px; } .bom-room-actions button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 12px; cursor: pointer; } .bom-room-actions button.variant-delete { color: var(--danger); border-color: var(--danger); } .variants-compare-wrap { overflow-x: auto; margin-bottom: 18px; } .variants-compare-table { border-collapse: collapse; width: 100%; font-size: 12.5px; } .variants-compare-table th, .variants-compare-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .variants-compare-table th { color: var(--ink-muted); font-weight: 700; font-size: 11px; } .variants-compare-table td:first-child, .variants-compare-table th:first-child { color: var(--ink-muted); font-weight: 600; white-space: normal; } .variants-compare-table td:not(:first-child) { font-weight: 700; color: var(--ink); } .bom-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; } .bom-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .bom-stat-value { font-size: 17px; font-weight: 800; color: var(--accent); } .bom-stat-label { font-size: 11px; color: var(--ink-muted); font-weight: 600; } .bom-room { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; margin-bottom: 10px; } .bom-room-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .bom-room-title { font-weight: 800; font-size: 14px; color: var(--ink); } .bom-room-level { display: inline-block; font-weight: 700; font-size: 10.5px; color: var(--accent); background: var(--accent-soft, #251F15); border-radius: 5px; padding: 1px 6px; margin-right: 6px; vertical-align: middle; } .bom-room-area { font-weight: 800; font-size: 14px; color: var(--accent); } .bom-room-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; } .bom-room-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .bom-chip { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--accent-soft); border-radius: 20px; padding: 5px 10px; } .bom-empty { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; margin: -2px 0 14px; } .bom-budget-total { border-color: var(--gold); } .bom-budget-lines { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .bom-budget-line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink); padding-top: 6px; border-top: 1px dashed var(--line); } .bom-budget-line span:last-child { font-weight: 700; } .bom-energy-card { display: flex; align-items: center; gap: 14px; } .bom-energy-grade { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.25); } .bom-energy-figures { display: flex; flex-direction: column; gap: 2px; } .bom-energy-value { font-weight: 800; font-size: 15px; color: var(--ink); } .bom-energy-sub { font-size: 11.5px; color: var(--ink-muted); } .bom-note { font-size: 12px; color: var(--ink-muted); line-height: 1.4; margin-top: 4px; background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; } /* ---------- Simulation solaire (US16) ---------- */ #sunPanel { position: absolute; left: 50%; z-index: 25; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 66px); transform: translate(-50%, 130%); width: min(320px, 88vw); background: rgba(24,22,18,0.94); color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); transition: transform 0.25s cubic-bezier(.2,.8,.2,1); pointer-events: none; opacity: 0; } #sunPanel.open { transform: translate(-50%, 0); pointer-events: auto; opacity: 1; } .sun-panel-header { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; margin-bottom: 12px; } .sun-time-label { font-weight: 700; color: var(--gold); font-size: 12px; } .sun-row { margin-bottom: 12px; } .sun-row:last-child { margin-bottom: 0; } .sun-row label { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 5px; opacity: .85; } .sun-row input[type=range] { width: 100%; accent-color: var(--gold); height: 22px; } /* ---------- Filtre de phase (US BIM, js/35-phasing.js) ---------- */ #phaseFilterPanel { position: absolute; left: 50%; z-index: 25; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 66px); transform: translate(-50%, 130%); width: min(240px, 88vw); background: rgba(24,22,18,0.94); color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); transition: transform 0.25s cubic-bezier(.2,.8,.2,1); pointer-events: none; opacity: 0; } #phaseFilterPanel.open { transform: translate(-50%, 0); pointer-events: auto; opacity: 1; } .phase-filter-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 7px 0; cursor: pointer; } .phase-filter-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); } /* ---------- Export vidéo (US23) ---------- */ #video-recording-badge { position: absolute; top: max(74px, calc(env(safe-area-inset-top) + 60px)); left: 50%; transform: translateX(-50%); z-index: 50; display: none; align-items: center; gap: 8px; background: rgba(24,22,18,0.94); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } #video-recording-badge.show { display: flex; } /* Présence collaborative (US BIM, js/42-presence.js) : créé/détruit dynamiquement par renderPresenceBadge, pas de classe .show à gérer (l'existence même de l'élément suffit). En haut à droite plutôt qu'au centre (déjà pris par #elevationToolbar/#video-recording-badge). */ #presenceBadge { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 50; background: rgba(24,22,18,0.94); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.35); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: video-rec-pulse 1s ease-in-out infinite; } @keyframes video-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @media (min-width: 700px) { #menuDrawer { width: 340px; } /* Réancré près du bouton-cloche (voir #notifFabSlot .notif-dropdown ci-dessus) : sur un écran assez large, un panneau collé au bord droit du viewport se retrouverait loin du bouton qui l'ouvre — pas de risque de débordement ici, la place ne manque pas à droite de 194px. */ #notifFabSlot .notif-dropdown { position: absolute; top: calc(100% + 10px); left: 0; right: auto; width: 300px; } } /* ---------- Connexion / compte (js/00-auth.js) ---------- */ #loginModalOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 60; } #loginModalOverlay.open { display: block; } #loginModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(360px, 92vw); background: var(--paper); border-radius: 16px; z-index: 61; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #loginModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .login-modal-hint { font-size: 13px; color: var(--ink-muted); margin: 0 0 14px; line-height: 1.4; } .login-modal-legal { font-size: 11px; color: var(--ink-muted); margin: 4px 0 0; line-height: 1.4; text-align: center; } .login-modal-legal a { color: var(--accent); } .login-modal-error { font-size: 12px; color: var(--danger); font-weight: 700; min-height: 16px; margin: 2px 0 8px; line-height: 1.4; } .login-modal-error.login-modal-success { color: var(--success); } .login-btn { width: 100%; padding: 13px; border: none; border-radius: 10px; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; } .login-btn-google { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .login-btn-email { background: var(--accent); color: #fff; } .login-btn-secondary { background: var(--accent-soft); color: var(--accent); } .login-divider { text-align: center; font-size: 12px; color: var(--ink-muted); margin: 12px 0; position: relative; } .login-divider::before, .login-divider::after { content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--line); } .login-divider::before { left: 0; } .login-divider::after { right: 0; } #loginEmailInput, #loginPasswordInput { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--line); font-family: inherit; font-size: 13px; background: var(--surface); color: var(--ink); margin-bottom: 10px; } /* ---------- Paramètres (compte, métrés, nouveau projet — js/06-menu-ui.js) ---------- */ #settingsModalOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 60; } #settingsModalOverlay.open { display: block; } #settingsModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(380px, 92vw); max-height: min(80vh, 560px); overflow-y: auto; background: var(--paper); border-radius: 16px; z-index: 61; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #settingsModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } /* ---------- Partage du plan courant (v4, js/06-menu-ui.js) — même patron que #settingsModal ci-dessus ---------- */ #shareModalOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 60; } #shareModalOverlay.open { display: block; } #shareModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(400px, 92vw); max-height: min(80vh, 560px); overflow-y: auto; background: var(--paper); border-radius: 16px; z-index: 61; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #shareModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .share-section-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 14px 0 10px; } .share-section-label:first-of-type { margin-top: 4px; } .share-invite-row { display: flex; gap: 8px; flex-wrap: wrap; } .share-invite-row input[type="email"] { flex: 1; min-width: 140px; height: 38px; border-radius: 9px; border: 1px solid var(--line); padding: 0 11px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--ink); } .share-invite-row select { height: 38px; border-radius: 9px; border: 1px solid var(--line); padding: 0 8px; font-family: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); } .share-invite-row button { height: 38px; padding: 0 14px; border-radius: 9px; border: none; background: var(--accent); color: #fff; font-family: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; } .collab-list { display: flex; flex-direction: column; gap: 8px; } .collab-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } .collab-row-email { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collab-row-role { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 3px 8px; flex: none; } .collab-row-remove { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .collab-row-remove svg { width: 12px; height: 12px; } .collab-row-remove:hover { border-color: var(--danger); color: var(--danger); } .share-status { color: var(--ink-muted); font-size: 12px; margin: 4px 0; } .public-share-toggle-btn { width: 100%; height: 38px; border-radius: 9px; border: none; background: var(--accent); color: #fff; font-family: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; } .public-share-link-box { margin-top: 10px; } .public-share-link-input { width: 100%; height: 38px; border-radius: 9px; border: 1px solid var(--line); padding: 0 11px; font-family: inherit; font-size: 12px; background: var(--surface); color: var(--ink-muted); margin-bottom: 8px; } .public-share-link-actions { display: flex; gap: 8px; flex-wrap: wrap; } .public-share-link-actions button { flex: 1; min-width: 88px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; } .public-share-link-actions #publicShareDisableBtn:hover { border-color: var(--danger); color: var(--danger); } /* ---------- Squelettes de chargement (window.skeletonCardsHtml/skeletonRowsHtml, js/00-icons.js) — mêmes classes que css/account.css, redéfinies indépendamment ---------- */ @keyframes skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .skeleton-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .skeleton-thumb { aspect-ratio: 4/3; background: var(--line); animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-lines { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; } .skeleton-line { height: 10px; border-radius: 5px; background: var(--line); animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-line-short { width: 55%; } .skeleton-row { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px; margin-bottom: 8px; } .skeleton-row .skeleton-line { flex: 1; margin: 0; } /* ---------- Génération de plan par IA (js/32-ai-plan.js) ---------- */ #aiPlanModalOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 60; } #aiPlanModalOverlay.open { display: block; } #aiPlanModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(380px, 92vw); max-height: min(85vh, 620px); overflow-y: auto; background: var(--paper); border-radius: 16px; z-index: 61; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #aiPlanModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .ai-plan-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-muted); margin: 10px 0 4px; } #aiPlanModal input, #aiPlanModal textarea { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--line); font-family: inherit; font-size: 13px; background: var(--surface); color: var(--ink); resize: vertical; } #aiPlanGenerateBtn:disabled { opacity: 0.6; cursor: default; } /* ---------- Fiche produit par élément (js/34-custom-fields.js) ---------- */ #productInfoModalOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 60; } #productInfoModalOverlay.open { display: block; } #productInfoModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(380px, 92vw); max-height: min(85vh, 620px); overflow-y: auto; background: var(--paper); border-radius: 16px; z-index: 61; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #productInfoModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } #productInfoModal input, #productInfoModal select { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--line); font-family: inherit; font-size: 13px; background: var(--surface); color: var(--ink); } /* ---------- Mes plans (liste des plans cloud, js/06-menu-ui.js) ---------- */ #plansModalOverlay { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: none; z-index: 60; } #plansModalOverlay.open { display: block; } #plansModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(420px, 92vw); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--paper); border-radius: 16px; z-index: 61; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #plansModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .plans-modal-list { overflow-y: auto; margin-top: 10px; } .plans-modal-status { font-size: 13px; color: var(--ink-muted); text-align: center; padding: 30px 10px; line-height: 1.5; } .plans-modal-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .plans-modal-row:last-child { border-bottom: none; } .plans-modal-open-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: 10px; } .plans-modal-open-btn:hover { background: var(--accent-soft); } .plans-modal-row-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .plans-modal-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .plans-modal-row-thumb svg { width: 22px; height: 22px; color: var(--ink-muted); } .plans-modal-row-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .plans-modal-row-name { font-weight: 800; font-size: 14px; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plans-modal-row-address { font-size: 11.5px; color: var(--ink-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plans-modal-row-date { font-size: 12px; color: var(--ink-muted); } /* Badge propriétaire/partagé (v4) — mêmes classes que css/account.css, redéfinies ici indépendamment (les deux fichiers ne sont jamais chargés ensemble). */ .owner-badge { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 8px; padding: 2px 7px; margin-top: 4px; } .owner-badge-owner { color: var(--ink-muted); background: var(--paper); border: 1px solid var(--line); } .owner-badge-shared { color: var(--accent); background: var(--accent-soft); } .plans-modal-row-actions { flex-shrink: 0; display: flex; align-items: center; gap: 2px; } .plans-modal-delete-btn, .plans-modal-folder-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: none; background: none; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; } .plans-modal-delete-btn:hover { background: var(--danger-soft, rgba(224,104,90,0.14)); color: var(--danger); } .plans-modal-folder-btn:hover { background: var(--accent-soft); color: var(--accent); } .plans-modal-delete-btn svg, .plans-modal-folder-btn svg { width: 17px; height: 17px; } /* Dossiers (phase F, roadmap "Inspiration Planner 5D") : en-tête de groupe +