/* ============================================================
OHM WORKS - Visualiseur d'Images Drone
Palette: Marine #1B1F3B | Orange #F08C00 | Blanc #FFFFFF
============================================================ */
/* Polices vendorisées (P1 — RGPD) — TTF dans lib/fonts/, plus de fetch vers Google Fonts. */
@import url('lib/fonts/fonts.css');
/* ── Tokens thème (clair / sombre) ──────────────────────────
Les variables sont pilotées par la classe :root.theme-light /
:root.theme-dark posée par le script inline en haut de
index-optimized.html (lit localStorage.ohm-theme). Le défaut
= sombre pour rester compatible avec l'existant.
Composants OHM (header, sidebars, panneaux) utilisent ces
tokens. Les surfaces fonctionnelles (carte Leaflet, viewer
Potree 3D) restent sombres par design. */
/* ── Tokens OKLCH tintés (Round 2 — DESIGN.md) ──────────────
Toutes les neutres penchent vers la marine OHM (hue 250-264).
Plus de #fff/#000/rgba(255,255,255,X) purs : tout passe par
un token avec chroma 0.005-0.030. Le mode clair gagne son
identité propre (surfaces tintées plus fort, accent plus
foncé) au lieu d'être une simple inversion. */
:root,
:root.theme-dark {
/* Surfaces (dark) */
--ohm-bg: oklch(0.18 0.025 264);
--ohm-bg-soft: oklch(0.22 0.030 262);
--ohm-surface: oklch(0.27 0.035 260);
--ohm-surface-2: oklch(0.32 0.030 258);
--ohm-border: oklch(0.32 0.025 260);
--ohm-border-soft: oklch(0.28 0.020 260);
/* Foreground (texte / icônes) — pench marine */
--ohm-fg-strong: oklch(0.97 0.005 260);
--ohm-fg-medium: oklch(0.86 0.010 258);
--ohm-fg-soft: oklch(0.64 0.012 256);
--ohm-fg-faint: oklch(0.46 0.014 252);
/* Compat anciens tokens — alias vers les nouveaux */
--ohm-text: var(--ohm-fg-strong);
--ohm-text-soft: var(--ohm-fg-medium);
--ohm-text-muted: var(--ohm-fg-soft);
/* Accent OHM */
--ohm-accent: #F08C00; /* oklch(0.69 0.16 60) */
--ohm-accent-hi: #ffa54a;
--ohm-accent-dim: rgba(240, 140, 0, 0.12);
--ohm-header-bg: linear-gradient(135deg, oklch(0.27 0.035 260) 0%, oklch(0.22 0.030 262) 100%);
--ohm-shadow: 0 2px 20px oklch(0.10 0.020 264 / 0.55);
/* Overlays tintés (remplace les rgba(0,0,0,X) purs) */
--ohm-overlay-soft: oklch(0.18 0.025 264 / 0.55);
--ohm-overlay-hard: oklch(0.12 0.030 264 / 0.78);
/* Highlights tintés (remplace les rgba(255,255,255,X) purs) */
--ohm-tint-1: oklch(0.95 0.010 258 / 0.05);
--ohm-tint-2: oklch(0.95 0.010 258 / 0.08);
--ohm-tint-3: oklch(0.95 0.010 258 / 0.12);
/* ── Sévérité (4 niveaux nommés) ──────────────────────────
1 Information = bleu (hue 255) · 2 Mineur = jaune/ambre (90) ·
3 Majeur = orange (55) · 4 Critique = rouge (27). L'information est
neutre (bleu), distincte de la rampe de gravité jaune→orange→rouge.
Token *-bg = même couleur en alpha 0.16, pour fonds de boutons au repos. */
--ohm-sev-1: oklch(0.64 0.15 255);
--ohm-sev-2: oklch(0.78 0.13 90);
--ohm-sev-3: oklch(0.68 0.17 55);
--ohm-sev-4: oklch(0.58 0.20 27);
--ohm-sev-1-bg: oklch(0.64 0.15 255 / 0.16);
--ohm-sev-2-bg: oklch(0.78 0.13 90 / 0.16);
--ohm-sev-3-bg: oklch(0.68 0.17 55 / 0.16);
--ohm-sev-4-bg: oklch(0.58 0.20 27 / 0.16);
--ohm-sev-1-border: oklch(0.64 0.15 255 / 0.45);
--ohm-sev-2-border: oklch(0.78 0.13 90 / 0.45);
--ohm-sev-3-border: oklch(0.68 0.17 55 / 0.45);
--ohm-sev-4-border: oklch(0.58 0.20 27 / 0.45);
/* ── Sémantique colorée (Round 8 — light/dark adaptive) ────
4 familles (success/info/warning/danger) × 3 variants :
- base : pour color: (texte, icône)
- -bg : alpha 0.16 pour fond de bouton/badge
- -border : alpha 0.45 pour bordure légère
En dark : lightness haute (~0.72-0.78) pour pop sur navy.
Hue spécifique pour distinguer de l'accent OHM (orange, hue 60). */
--ohm-success: oklch(0.78 0.16 145);
--ohm-success-bg: oklch(0.78 0.16 145 / 0.16);
--ohm-success-border: oklch(0.78 0.16 145 / 0.45);
--ohm-info: oklch(0.72 0.13 235);
--ohm-info-bg: oklch(0.72 0.13 235 / 0.16);
--ohm-info-border: oklch(0.72 0.13 235 / 0.45);
--ohm-warning: oklch(0.80 0.16 85);
--ohm-warning-bg: oklch(0.80 0.16 85 / 0.16);
--ohm-warning-border: oklch(0.80 0.16 85 / 0.45);
--ohm-danger: oklch(0.68 0.22 25);
--ohm-danger-bg: oklch(0.68 0.22 25 / 0.16);
--ohm-danger-border: oklch(0.68 0.22 25 / 0.45);
}
:root.theme-light {
/* Surfaces (light) — palette sand/beige chaud (hue 78, chroma 0.020-0.030).
Identité chaleureuse qui se marie naturellement avec l'accent orange OHM. */
--ohm-bg: oklch(0.95 0.025 78); /* sand doux : fond général */
--ohm-bg-soft: oklch(0.97 0.018 80); /* sand très clair : zones secondaires */
--ohm-surface: oklch(0.99 0.010 80); /* blanc cassé chaud : cartes / panneaux */
--ohm-surface-2: oklch(0.93 0.030 78); /* sand plus marqué : surfaces accentuées */
--ohm-border: oklch(0.84 0.028 78); /* bordure sand visible */
--ohm-border-soft: oklch(0.90 0.022 80); /* bordure douce */
/* Foreground (light) — brun chaud foncé (hue 60-70) pour cohérence avec sand */
--ohm-fg-strong: oklch(0.22 0.022 65);
--ohm-fg-medium: oklch(0.34 0.020 68);
--ohm-fg-soft: oklch(0.50 0.018 72);
--ohm-fg-faint: oklch(0.66 0.016 75);
--ohm-text: var(--ohm-fg-strong);
--ohm-text-soft: var(--ohm-fg-medium);
--ohm-text-muted: var(--ohm-fg-soft);
/* Accent : orange OHM — version foncée pour contraste sur sand */
--ohm-accent: #F08C00;
--ohm-accent-hi: #d97700;
--ohm-accent-dim: rgba(240, 140, 0, 0.10);
--ohm-header-bg: linear-gradient(135deg, oklch(0.99 0.010 80) 0%, oklch(0.93 0.030 78) 100%);
--ohm-shadow: 0 2px 12px oklch(0.40 0.04 65 / 0.10);
--ohm-overlay-soft: oklch(0.30 0.030 60 / 0.45);
--ohm-overlay-hard: oklch(0.18 0.035 64 / 0.65);
/* En clair, les "tints" deviennent des ombres tintées chaudes */
--ohm-tint-1: oklch(0.30 0.030 60 / 0.04);
--ohm-tint-2: oklch(0.30 0.030 60 / 0.06);
--ohm-tint-3: oklch(0.30 0.030 60 / 0.10);
/* Sévérité — lightness décalée vers le bas pour contraste sur fond clair.
Les *-bg restent en alpha pour rester transparents (les surfaces
blanches assument). */
--ohm-sev-1: oklch(0.52 0.16 255);
--ohm-sev-2: oklch(0.60 0.13 80);
--ohm-sev-3: oklch(0.56 0.17 55);
--ohm-sev-4: oklch(0.50 0.20 27);
--ohm-sev-1-bg: oklch(0.52 0.16 255 / 0.10);
--ohm-sev-2-bg: oklch(0.60 0.13 80 / 0.12);
--ohm-sev-3-bg: oklch(0.56 0.17 55 / 0.12);
--ohm-sev-4-bg: oklch(0.50 0.20 27 / 0.14);
--ohm-sev-1-border: oklch(0.52 0.16 255 / 0.40);
--ohm-sev-2-border: oklch(0.60 0.13 80 / 0.45);
--ohm-sev-3-border: oklch(0.56 0.17 55 / 0.45);
--ohm-sev-4-border: oklch(0.50 0.20 27 / 0.50);
/* Sémantique colorée — lightness descend vers ~0.48 pour contraste
sur blanc, chroma maintenu pour rester vif. */
--ohm-success: oklch(0.50 0.18 145);
--ohm-success-bg: oklch(0.50 0.18 145 / 0.10);
--ohm-success-border: oklch(0.50 0.18 145 / 0.45);
--ohm-info: oklch(0.48 0.18 235);
--ohm-info-bg: oklch(0.48 0.18 235 / 0.10);
--ohm-info-border: oklch(0.48 0.18 235 / 0.45);
--ohm-warning: oklch(0.58 0.18 75);
--ohm-warning-bg: oklch(0.58 0.18 75 / 0.12);
--ohm-warning-border: oklch(0.58 0.18 75 / 0.50);
--ohm-danger: oklch(0.55 0.22 25);
--ohm-danger-bg: oklch(0.55 0.22 25 / 0.10);
--ohm-danger-border: oklch(0.55 0.22 25 / 0.50);
}
/* ── Système d'icônes Lucide (Round 7 extract) ─────────────────
Helper window.ohmIcon(name, opts) → string SVG. Auto-hydratation
des `` au DOMContentLoaded. Voir
lib/icons/lucide.js pour la liste des picto disponibles. */
.ohm-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em; /* aligne avec la baseline du texte */
flex-shrink: 0;
color: currentColor;
pointer-events: none;
}
/* Quand l'icône est seule dans un span hôte, garder l'alignement flex */
[data-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
[data-icon] .ohm-icon {
vertical-align: middle;
}
/* Variantes de taille — utiles pour boutons compacts vs headers */
.ohm-icon-sm { width: 14px; height: 14px; }
.ohm-icon-md { width: 16px; height: 16px; }
.ohm-icon-lg { width: 20px; height: 20px; }
.ohm-icon-xl { width: 24px; height: 24px; }
/* Placeholder si icône inconnue */
.ohm-icon-missing {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 1px dashed var(--ohm-border);
border-radius: 3px;
font-size: 10px;
color: var(--ohm-fg-faint);
line-height: 1;
}
/* Éléments cachés par défaut */
#marker-count { display: none; }
#central-point-info { display: none; }
#hidden-file-input { display: none; }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--ohm-bg);
color: var(--ohm-text);
transition: background-color 0.2s, color 0.2s;
}
/* En mode clair, le texte du logo doit virer au sombre car le
header passe en blanc. */
:root.theme-light .brand-text-infradesk { color: var(--ohm-text); }
/* ── Header ─────────────────────────────────────────────── */
header {
background: var(--ohm-header-bg);
color: var(--ohm-text);
padding: 0 28px;
height: 86px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--ohm-shadow);
border-bottom: 2px solid var(--ohm-accent);
position: relative;
z-index: 10000;
overflow: visible;
transition: background 0.2s, color 0.2s;
}
:root.theme-light header { color: var(--ohm-text); }
/* ── Zones header (Round 2 — impeccable layout) ──────────────
Le header est désormais structuré en 3 zones flex séparées par
un fin séparateur vertical : Brand | Outils | Statut & Compte.
Chaque zone groupe ses items avec un gap intra de 8-10px ; le
séparateur crée un gap inter de 18px qui isole visuellement les
3 rôles. Sur viewport étroit, le séparateur Outils/Compte se
replie. */
.header-zone {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.header-zone-tools { gap: 8px; }
.header-zone-account { gap: 10px; margin-left: auto; }
/* Espace de respiration entre le logo INFRADESK et les boutons modules
(Inventaire / Intervention / Charge). Sans ce margin, le logo et le
premier bouton paraissaient colles. */
.header-zone-brand { margin-right: 20px; }
/* Séparateur vertical fin entre zones */
.header-sep {
width: 1px;
height: 22px;
background: var(--ohm-border);
opacity: 0.6;
flex-shrink: 0;
margin: 0 4px;
}
:root.theme-light .header-sep { opacity: 0.7; }
/* Compat ancien sélecteur — header-left reste utilisé par auth-modal etc. */
.header-left {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
/* Boutons et badges du header — alignement vertical sur la ligne médiane
(align-items: center du flex parent). Plus de décalage : tous les éléments
à gauche comme à droite partagent la même hauteur que le bouton INVENTAIRE. */
.header-left > button,
.header-right > button,
.header-right > .export-btn-wrapper,
.header-right > .header-badge {
margin-top: 0;
}
/* Logo INFRADESK — IBM Plex Sans 700 (référence corporate tech IBM).
Sobre, sérieux, polyvalent. Chargé via Google Fonts dans
index-optimized.html. Remplace l'ancien Airstrike "jeu vidéo"
par un rendu B2B industriel (mai 2026). */
.header-logo {
display: flex;
align-items: center;
text-decoration: none;
gap: 14px;
transition: opacity 0.2s;
}
.header-logo:hover {
opacity: 0.85;
}
.brand-text-infradesk {
font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
color: var(--ohm-text);
user-select: none;
}
/* Suffixe module à droite du logo : "Infradesk · Télécommunication".
Poids 400 pour rester secondaire vs le mot-marque "Infradesk" (700),
mais taille et opacité plus présentes (21px / 0.85) pour qu'on lise
immédiatement de quel module il s'agit. Aligné optiquement sur la
ligne médiane du logo via vertical-align. */
.brand-text-module {
font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
color: var(--ohm-text);
opacity: 0.85;
margin-left: 4px;
vertical-align: 2px;
user-select: none;
}
:root.theme-light .brand-text-module { opacity: 0.85; }
/* .header-logo img / .brand-tagline / .header-center / .header-title :
retirés en 2026-05 (chrome épuré, plus de tryptique, plus de titre
central, plus d'image dans le logo). Si tu réintroduis un asset
image, recréer .header-logo img ici. */
/* Badge + Export + Reset groupés à droite */
.header-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-left: auto;
}
/* ── Chip "site courant" ────────────────────────────────────
Repère "tu es ici" centré dans le header (impeccable critique
P0, 2026-05-23). Pattern calme / corporate : neutre tinté au
repos, accent orange uniquement au hover. Position absolue
pour rester centré quelle que soit la largeur de header-left
/ header-right. Caché par défaut tant qu'aucun site n'est
sélectionné — pas de "Aucun site" qui ferait du bruit visuel. */
.header-site-chip {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ohm-surface-2);
border: 1px solid var(--ohm-border);
border-radius: 6px;
padding: 6px 8px 6px 12px;
font-size: 13px;
font-weight: 600;
line-height: 1;
color: var(--ohm-text);
max-width: 38vw;
box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
cursor: pointer;
user-select: none;
}
.header-site-chip:hover {
border-color: var(--ohm-accent);
box-shadow: 0 0 0 1px var(--ohm-accent) inset;
}
.header-site-chip.hidden { display: none !important; }
.header-site-chip .hsc-icon {
font-size: 13px;
line-height: 1;
color: var(--ohm-text-muted);
flex-shrink: 0;
}
.header-site-chip:hover .hsc-icon { color: var(--ohm-accent); }
.header-site-chip .hsc-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.02em;
}
.header-site-chip .hsc-sep {
color: var(--ohm-text-muted);
margin: 0 -2px;
}
.header-site-chip .hsc-sub {
color: var(--ohm-text-soft);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header-site-chip .hsc-close {
border: none;
background: transparent;
color: var(--ohm-text-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
width: 22px;
height: 22px;
border-radius: 4px;
margin-left: 2px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.header-site-chip .hsc-close:hover {
color: var(--ohm-accent);
background: rgba(240, 140, 0, 0.10);
}
/* Mobile / petit viewport : chip plus court, on cache le sous-dossier.
Sur tablette portrait (<= 900px), le chip risque de chevaucher les
boutons modules — on le masque, l'utilisateur navigue via la sidebar. */
@media (max-width: 1100px) {
.header-site-chip { max-width: 28vw; padding: 5px 6px 5px 10px; font-size: 12px; }
.header-site-chip .hsc-sep,
.header-site-chip .hsc-sub { display: none; }
}
@media (max-width: 900px) {
.header-site-chip { display: none !important; }
.header-sep { display: none; }
.header-zone-tools { gap: 6px; }
/* Tactile ≥44px (WCAG 2.5.5 target size). Round 7 harden : avant,
le padding 6×10 produisait des cibles de 28-32px de hauteur,
sous le seuil tactile recommandé. min-height assure la hauteur
même quand le contenu (icône+texte court) n'occupe pas la place. */
.inventaire-header-btn,
.intervention-header-btn,
.load-calc-header-btn,
.admin-btn {
padding: 10px 14px;
letter-spacing: 0.5px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* Boutons icône (close, settings, power) — carré 44×44 minimum */
.hsc-close,
.images-grid-close-btn,
.folder-move-close-btn,
.folder-edit-close-btn,
.sites-close-btn,
.site-pick-close-btn,
.ticketing-close-btn,
.label-manager-close,
.folders-collapse-btn,
.site-add-panel-btn {
min-width: 44px;
min-height: 44px;
}
/* Liens action dropdown — augmente la cible verticale */
.export-dropdown-item,
.ticket-export-item {
min-height: 44px;
padding-top: 10px;
padding-bottom: 10px;
}
}
/* ── Help popover (Round 6 clarify) ─────────────────────────
Bouton "?" subtile près des boutons modules. Click = popover
contextuel positionné automatiquement. Cf. app/14-help-popover.js. */
.ohm-help-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin: 0 0 0 4px;
padding: 0;
border: 1px solid var(--ohm-border);
background: transparent;
color: var(--ohm-fg-soft);
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 50%;
cursor: pointer;
vertical-align: middle;
font-family: inherit;
transition: color 0.15s, border-color 0.15s, background 0.15s;
flex-shrink: 0;
}
.ohm-help-trigger:hover,
.ohm-help-trigger[aria-expanded="true"] {
color: var(--ohm-accent);
border-color: var(--ohm-accent);
background: var(--ohm-accent-dim);
}
.ohm-help-trigger:focus-visible {
outline: 2px solid var(--ohm-accent);
outline-offset: 1px;
}
.ohm-help-pop {
position: fixed;
z-index: 999990;
max-width: 320px;
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 8px;
box-shadow: 0 8px 28px var(--ohm-overlay-hard);
padding: 12px 14px;
color: var(--ohm-fg-medium);
font-size: 12.5px;
line-height: 1.5;
animation: ohm-help-fade 0.15s ease-out;
}
@keyframes ohm-help-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.ohm-help-pop.hidden { display: none !important; }
.ohm-help-pop-title {
font-size: 13px;
font-weight: 700;
color: var(--ohm-fg-strong);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.ohm-help-pop-body {
color: var(--ohm-fg-medium);
}
.ohm-help-pop-arrow {
position: absolute;
top: -6px;
width: 12px;
height: 12px;
background: var(--ohm-surface);
border-top: 1px solid var(--ohm-border);
border-left: 1px solid var(--ohm-border);
transform: rotate(45deg);
}
.ohm-help-pop.flip-up .ohm-help-pop-arrow {
top: auto;
bottom: -6px;
border-top: none;
border-left: none;
border-bottom: 1px solid var(--ohm-border);
border-right: 1px solid var(--ohm-border);
}
/* Sur petits écrans, popover plus compact */
@media (max-width: 700px) {
.ohm-help-pop { max-width: 88vw; font-size: 12px; padding: 10px 12px; }
}
/* ── Confirmation modal (Round 4 harden) ────────────────────
Composant ohmConfirm() réutilisable pour toutes les actions
destructives. Remplace les confirm() natifs. Cohérent avec
le design system : tokens, accent orange, focus sur Annuler. */
.ohm-confirm-overlay {
position: fixed;
inset: 0;
z-index: 999998;
display: flex;
align-items: center;
justify-content: center;
background: var(--ohm-overlay-hard);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 24px;
animation: ohm-confirm-fade 0.15s ease-out;
}
@keyframes ohm-confirm-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.ohm-confirm-overlay.hidden { display: none !important; }
.ohm-confirm-shell {
width: 100%;
max-width: 440px;
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 12px;
box-shadow: 0 24px 64px var(--ohm-overlay-hard);
padding: 20px 22px 18px;
animation: ohm-confirm-slide 0.18s cubic-bezier(.2,.65,.3,1);
}
@keyframes ohm-confirm-slide {
from { transform: translateY(-8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ohm-confirm-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.ohm-confirm-icon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
}
.ohm-confirm-title {
font-size: 16px;
font-weight: 700;
color: var(--ohm-fg-strong);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.3;
}
.ohm-confirm-body {
font-size: 13px;
color: var(--ohm-fg-medium);
line-height: 1.5;
margin: 0 0 12px;
}
.ohm-confirm-impact {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--ohm-accent-dim);
border-radius: 6px;
font-size: 12px;
color: var(--ohm-accent);
font-weight: 600;
margin-bottom: 14px;
line-height: 1.4;
}
.ohm-confirm-impact::before {
content: "⚠";
font-size: 13px;
flex-shrink: 0;
}
.ohm-confirm-impact.hidden { display: none !important; }
.ohm-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 14px;
}
.ohm-confirm-cancel,
.ohm-confirm-ok {
padding: 8px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
font-family: inherit;
line-height: 1;
}
.ohm-confirm-cancel {
background: transparent;
border: 1px solid var(--ohm-border);
color: var(--ohm-fg-medium);
}
.ohm-confirm-cancel:hover {
background: var(--ohm-tint-1);
color: var(--ohm-fg-strong);
border-color: var(--ohm-fg-soft);
}
.ohm-confirm-cancel:focus {
outline: 2px solid var(--ohm-accent);
outline-offset: 1px;
}
.ohm-confirm-ok {
background: var(--ohm-accent);
border: 1px solid var(--ohm-accent);
color: #fff;
}
.ohm-confirm-ok:hover {
background: var(--ohm-accent-hi);
border-color: var(--ohm-accent-hi);
}
.ohm-confirm-ok:active {
transform: translateY(1px);
}
.ohm-confirm-ok:focus {
outline: 2px solid var(--ohm-accent);
outline-offset: 1px;
}
/* Variant danger : bouton rouge */
.ohm-confirm-ok.is-danger {
background: #ef4444;
border-color: #ef4444;
color: #fff;
}
.ohm-confirm-ok.is-danger:hover {
background: #dc2626;
border-color: #dc2626;
}
.ohm-confirm-ok.is-danger:focus {
outline-color: #ef4444;
}
.ohm-confirm-shell:has(.ohm-confirm-ok.is-danger) .ohm-confirm-impact {
background: rgba(239, 68, 68, 0.10);
color: #fca5a5;
}
:root.theme-light .ohm-confirm-shell:has(.ohm-confirm-ok.is-danger) .ohm-confirm-impact {
color: #b91c1c;
}
/* ── Welcome panel (Round 3 onboard) ────────────────────────
Affiché par-dessus la carte quand aucun site n'est sélectionné.
Bouton croix pour le masquer. JS dans app/12-welcome-panel.js. */
.ohm-welcome-panel {
position: absolute;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
/* Fond gradient discret OHM : la radiale au centre apporte de la lumière
sans masquer le contenu ; le voile linéaire diagonal donne un
indice de profondeur. Compatibles dark & light. */
background:
radial-gradient(ellipse 80% 60% at 50% 30%,
color-mix(in oklch, var(--ohm-accent) 9%, transparent) 0%,
transparent 70%),
radial-gradient(ellipse 70% 80% at 85% 100%,
color-mix(in oklch, var(--ohm-accent) 6%, transparent) 0%,
transparent 65%),
linear-gradient(160deg,
var(--ohm-bg) 0%,
var(--ohm-bg-soft) 100%);
overflow-y: auto;
animation: ohm-welcome-fade 0.2s ease-out;
}
.ohm-welcome-panel.hidden { display: none !important; }
@keyframes ohm-welcome-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.ohm-welcome-shell {
width: 100%;
max-width: 860px;
position: relative;
}
.ohm-welcome-close {
position: absolute;
top: -8px;
right: -8px;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--ohm-fg-soft);
font-size: 24px;
line-height: 1;
cursor: pointer;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
font-family: inherit;
}
.ohm-welcome-close:hover {
color: var(--ohm-accent);
background: var(--ohm-tint-1);
}
.ohm-welcome-greet {
text-align: center;
margin-bottom: 40px;
}
/* Greeting principal (Mai 2026) : "Bonjour [Name] · [rôle]".
Dominante visuelle de l'écran d'accueil. */
.ohm-welcome-hello {
font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
font-size: clamp(34px, 4.4vw, 56px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--ohm-fg-strong);
margin: 0 0 14px;
}
.ohm-welcome-hello-txt { color: var(--ohm-fg-strong); }
.ohm-welcome-hello-sep { color: var(--ohm-fg-soft); margin: 0 4px; }
.ohm-welcome-hello-role {
color: var(--ohm-accent);
font-weight: 600;
text-transform: capitalize;
}
/* Brandline : "Bienvenue sur Infradesk" — la marque elle-même reprend
exactement la typo signature du logo en haut à gauche du header
(classe .brand-text-infradesk → IBM Plex 700, 30px). */
.ohm-welcome-brandline {
margin: 0;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ohm-fg-soft);
display: inline-flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.ohm-welcome-brandmark {
/* Hérite tout de .brand-text-infradesk (taille 30px, IBM Plex 700).
On force juste la couleur sur le foreground fort en mode sombre,
le mode clair la surcharge déjà sur .brand-text-infradesk. */
color: var(--ohm-fg-strong);
text-transform: none;
letter-spacing: -0.01em;
}
/* (legacy — conservé pour rétrocompatibilité, plus utilisé par
le nouveau markup mais d'autres scripts pourraient l'invoquer) */
.ohm-welcome-eyebrow {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ohm-accent);
margin-bottom: 6px;
}
.ohm-welcome-title {
font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ohm-fg-strong);
line-height: 1;
margin: 0 0 8px;
}
.ohm-welcome-sub {
font-size: 15px;
color: var(--ohm-fg-soft);
margin: 0;
}
/* Statistiques globales */
.ohm-welcome-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 32px;
}
/* Variante 2 colonnes (Sites + Composants, sans Images) */
.ohm-welcome-stats--duo {
grid-template-columns: repeat(2, 1fr);
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.ohm-wstat {
background: var(--ohm-bg-soft);
border: 1px solid var(--ohm-border);
border-radius: 10px;
padding: 16px 18px;
text-align: center;
transition: border-color 0.15s, transform 0.15s;
}
.ohm-wstat:hover {
border-color: var(--ohm-accent);
transform: translateY(-1px);
}
.ohm-wstat-num {
font-family: 'IBM Plex Sans', system-ui, sans-serif;
font-size: 30px;
font-weight: 700;
color: var(--ohm-fg-strong);
line-height: 1;
}
.ohm-wstat-lbl {
margin-top: 6px;
font-size: 11px;
font-weight: 600;
color: var(--ohm-fg-soft);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Deux colonnes Récents | Actions */
.ohm-welcome-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
@media (max-width: 800px) {
.ohm-welcome-cols { grid-template-columns: 1fr; }
}
.ohm-welcome-col {
background: var(--ohm-bg-soft);
border: 1px solid var(--ohm-border);
border-radius: 10px;
padding: 18px;
}
.ohm-welcome-h3 {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ohm-fg-soft);
margin: 0 0 12px;
}
/* Items récents */
.ohm-welcome-recent {
display: flex;
flex-direction: column;
gap: 4px;
}
.ohm-welcome-recent-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
color: var(--ohm-fg-medium);
font-size: 13px;
font-family: inherit;
text-align: left;
width: 100%;
transition: background 0.12s, color 0.12s;
}
.ohm-welcome-recent-item:hover {
background: var(--ohm-accent-dim);
color: var(--ohm-fg-strong);
}
.ohm-wri-ic { color: var(--ohm-fg-soft); font-size: 13px; }
.ohm-welcome-recent-item:hover .ohm-wri-ic { color: var(--ohm-accent); }
.ohm-welcome-recent-empty {
color: var(--ohm-fg-soft);
font-size: 12px;
font-style: italic;
padding: 8px 4px;
}
/* Actions */
.ohm-welcome-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.ohm-welcome-act {
display: flex;
align-items: center;
gap: 12px;
background: transparent;
border: 1px solid var(--ohm-border);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
color: var(--ohm-fg-medium);
font-family: inherit;
text-align: left;
width: 100%;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ohm-welcome-act:hover {
border-color: var(--ohm-accent);
background: var(--ohm-accent-dim);
color: var(--ohm-fg-strong);
}
.ohm-wact-ic {
font-size: 18px;
flex-shrink: 0;
line-height: 1;
}
.ohm-wact-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ohm-wact-tl { font-size: 13px; font-weight: 600; }
.ohm-wact-sb { font-size: 11px; color: var(--ohm-fg-soft); }
.ohm-welcome-act:hover .ohm-wact-sb { color: var(--ohm-fg-medium); }
/* Footer tip */
.ohm-welcome-foot {
text-align: center;
padding-top: 8px;
}
.ohm-welcome-tip {
font-size: 12px;
color: var(--ohm-fg-soft);
}
.ohm-welcome-tip kbd {
display: inline-block;
background: var(--ohm-surface-2);
border: 1px solid var(--ohm-border);
border-radius: 3px;
padding: 1px 5px;
font-family: inherit;
font-size: 11px;
margin: 0 2px;
color: var(--ohm-fg-medium);
}
/* ── Bouton Command palette ⌘K ───────────────────────────────
OHM 2026-05-29 — bouton visuel retiré (raccourci Ctrl+K conservé).
CSS .ohm-cmdk-btn supprimé car plus aucune instance dans le DOM. */
/* ── Command palette modale ──────────────────────────────────
Modale recherche rapide. Indexe les sites, modules, actions,
thèmes. Cf. app/11-command-palette.js. */
.ohm-cmdk-overlay {
position: fixed;
inset: 0;
z-index: 999996;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
background: var(--ohm-overlay-hard);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: ohm-cmdk-fade 0.15s ease-out;
}
@keyframes ohm-cmdk-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.ohm-cmdk-overlay.hidden { display: none !important; }
.ohm-cmdk-shell {
width: min(640px, calc(100vw - 32px));
max-height: 70vh;
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 12px;
box-shadow: 0 24px 64px var(--ohm-overlay-hard);
overflow: hidden;
display: flex;
flex-direction: column;
animation: ohm-cmdk-slide 0.18s cubic-bezier(.2,.65,.3,1);
}
@keyframes ohm-cmdk-slide {
from { transform: translateY(-12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ohm-cmdk-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--ohm-border);
}
.ohm-cmdk-icon {
color: var(--ohm-fg-soft);
font-size: 16px;
line-height: 1;
}
.ohm-cmdk-input {
flex: 1;
border: none;
background: transparent;
color: var(--ohm-fg-strong);
font-family: inherit;
font-size: 15px;
font-weight: 500;
outline: none;
padding: 2px 0;
}
.ohm-cmdk-input::placeholder { color: var(--ohm-fg-soft); }
.ohm-cmdk-hint {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--ohm-fg-soft);
border: 1px solid var(--ohm-border);
border-radius: 4px;
padding: 2px 6px;
background: var(--ohm-bg-soft);
}
.ohm-cmdk-list {
flex: 1;
overflow-y: auto;
padding: 6px 0;
}
.ohm-cmdk-list::-webkit-scrollbar { width: 6px; }
.ohm-cmdk-list::-webkit-scrollbar-thumb { background: var(--ohm-tint-2); border-radius: 3px; }
.ohm-cmdk-group {
padding: 8px 18px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ohm-fg-soft);
}
.ohm-cmdk-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 18px;
cursor: pointer;
color: var(--ohm-fg-medium);
font-size: 13px;
transition: background 0.1s, color 0.1s;
border: none;
background: transparent;
width: 100%;
text-align: left;
font-family: inherit;
}
.ohm-cmdk-item:hover,
.ohm-cmdk-item.is-active {
background: var(--ohm-accent-dim);
color: var(--ohm-fg-strong);
}
.ohm-cmdk-item-icon {
font-size: 14px;
flex-shrink: 0;
color: var(--ohm-fg-soft);
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
}
.ohm-cmdk-item.is-active .ohm-cmdk-item-icon { color: var(--ohm-accent); }
.ohm-cmdk-item-label { flex: 1; }
.ohm-cmdk-item-meta { font-size: 11px; color: var(--ohm-fg-soft); }
/* Raccourci clavier à droite de l'item (Round 7 harden) */
.ohm-cmdk-item-kbd {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.ohm-cmdk-item-kbd kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--ohm-tint-2);
border: 1px solid var(--ohm-border);
border-radius: 4px;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--ohm-fg-soft);
line-height: 1;
box-shadow: 0 1px 0 var(--ohm-tint-1) inset, 0 1px 0 var(--ohm-border-soft);
}
.ohm-cmdk-item.is-active .ohm-cmdk-item-kbd kbd {
border-color: var(--ohm-accent);
color: var(--ohm-accent);
background: var(--ohm-accent-dim);
}
.ohm-cmdk-empty {
padding: 24px 18px;
text-align: center;
color: var(--ohm-fg-soft);
font-size: 13px;
}
.ohm-cmdk-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 18px;
border-top: 1px solid var(--ohm-border);
background: var(--ohm-bg-soft);
font-size: 11px;
color: var(--ohm-fg-soft);
}
.ohm-cmdk-footer kbd {
display: inline-block;
background: var(--ohm-surface-2);
border: 1px solid var(--ohm-border);
border-radius: 3px;
padding: 1px 5px;
font-family: inherit;
font-size: 10px;
margin: 0 2px;
color: var(--ohm-fg-medium);
}
/* Badge compteur dans le header — hauteur alignée sur le bouton INVENTAIRE
(padding 7px + border 1.5px, identique à .inventaire-header-btn). */
/* Badges compteurs — refactor 2026-05-23 (impeccable critique P1) :
Saturation réduite, fond neutre tinté. Les badges sont des
informations de statut, pas des actions — ils ne doivent pas
capter le regard avant les boutons outils. Le code couleur
sémantique (bleu sites, vert composants) reste lisible mais
est désaturé. */
.header-badge {
background: var(--ohm-surface-2);
border: 1px solid var(--ohm-border);
border-radius: 20px;
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
color: var(--ohm-text-soft);
letter-spacing: 0.5px;
line-height: 1;
}
/* Sites — bleu désaturé (correspond aux pins de localisation) */
.header-badge.header-badge-sites {
color: #7aa7d4;
border-color: rgba(122, 167, 212, 0.30);
}
/* Composants — vert désaturé (correspond au volume inventaire) */
.header-badge.header-badge-composants {
color: #6cb89a;
border-color: rgba(108, 184, 154, 0.30);
}
:root.theme-light .header-badge {
background: var(--ohm-surface-2);
color: var(--ohm-text-soft);
}
:root.theme-light .header-badge.header-badge-sites { color: #2563a8; border-color: rgba(37, 99, 168, 0.35); }
:root.theme-light .header-badge.header-badge-composants { color: #15803d; border-color: rgba(21, 128, 61, 0.30); }
/* ── Layout ─────────────────────────────────────────────── */
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.main-content {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}
/* ── Panneau Dossiers ─────────────────────────────────────── */
.folders-panel {
/* Largeur alignée approximativement sur le bord droit du logo INFRADESK
(text Airstrike 32px + letter-spacing 4px + padding header 28px). */
width: 300px;
min-width: 300px;
background: var(--ohm-bg-soft);
border-right: 1px solid var(--ohm-border);
display: flex;
flex-direction: column;
overflow: hidden;
transition: width 0.22s, min-width 0.22s, background 0.2s;
z-index: 100;
flex-shrink: 0;
}
.folders-panel.collapsed { width: 38px; min-width: 38px; }
.folders-panel.collapsed .folders-list,
.folders-panel.collapsed .folders-panel-footer,
.folders-panel.collapsed .folders-panel-title,
.folders-panel.collapsed .site-add-panel-btn { display: none; }
/* Bouton expand bien centré quand réduit */
.folders-panel.collapsed .folders-panel-header {
justify-content: center;
padding: 12px 0;
border-bottom: none;
}
.folders-panel.collapsed .folders-collapse-btn {
color: var(--ohm-fg-medium);
font-size: 22px;
padding: 6px 8px;
border-radius: 6px;
background: var(--ohm-tint-2);
width: 32px;
text-align: center;
}
.folders-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 8px;
border-bottom: 1px solid var(--ohm-border);
flex-shrink: 0;
}
.folders-panel-title {
font-size: 12px;
font-weight: 700;
color: var(--ohm-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.folders-collapse-btn {
background: none;
border: none;
color: var(--ohm-text-muted);
font-size: 18px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.folders-collapse-btn:hover { color: var(--ohm-accent); }
.folders-list {
flex: 1;
overflow-y: auto;
padding: 6px 0;
}
.folders-list::-webkit-scrollbar { width: 4px; }
.folders-list::-webkit-scrollbar-thumb { background: var(--ohm-tint-3); border-radius: 2px; }
.folder-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
cursor: pointer;
border-radius: 0;
transition: background 0.15s, color 0.15s;
position: relative;
border-left: 3px solid transparent;
color: var(--ohm-fg-medium);
}
.folder-item:hover { background: var(--ohm-tint-1); }
.folder-item.active {
background: var(--ohm-accent-dim);
border-left-color: var(--ohm-accent);
color: var(--ohm-fg-strong);
}
/* ── Sidebar Sites : overrides ciblés mode clair ────────────
Le gros du refactor R2 a déplacé tous les neutres dans des
tokens (--ohm-fg-*, --ohm-tint-*) qui basculent automatiquement
entre dark et light. Il ne reste ici que les couleurs SÉMANTIQUES
spécifiques au light (vert site, violet Potree, ambre rapports)
qui doivent être assombries pour garder le contraste sur fond blanc. */
:root.theme-light .site-folder-header.active .folder-item-name { color: #16803d; }
:root.theme-light .site-folder-header.active {
background: rgba(22,128,61,0.08);
}
:root.theme-light .site-folder-header.active .folder-item-count {
background: rgba(22,128,61,0.15); color: #16803d;
}
:root.theme-light .potree-row {
border-top-color: rgba(110,80,200,0.18);
}
:root.theme-light .potree-row-label { color: #6d28d9; }
:root.theme-light .potree-row:hover .potree-row-label { color: #5b21b6; }
:root.theme-light .potree-launch-btn {
background: rgba(110,80,200,0.12);
border-color: rgba(110,80,200,0.45);
color: #6d28d9;
}
:root.theme-light .potree-launch-btn:hover {
background: rgba(110,80,200,0.22); color: #5b21b6;
}
:root.theme-light .tour360-row-label { color: #15803d; }
:root.theme-light .tour360-row:hover .tour360-row-label { color: #166534; }
:root.theme-light .tour360-row .folder-item-tour360 {
background: rgba(22,128,61,0.12);
border-color: rgba(22,128,61,0.45);
color: #15803d;
}
:root.theme-light .tour360-row .folder-item-tour360:hover {
background: rgba(22,128,61,0.22); color: #166534;
}
:root.theme-light .reports-row-label { color: #b45309; }
:root.theme-light .reports-row:hover .reports-row-label { color: #92400e; }
:root.theme-light .reports-chevron { color: rgba(20,25,40,0.45); }
:root.theme-light .reports-row.is-open .reports-chevron { color: #b45309; }
:root.theme-light .reports-list {
background: rgba(0,0,0,0.03);
border-left-color: rgba(180,83,9,0.35);
}
.folder-item-icon { font-size: 14px; flex-shrink: 0; }
.folder-item-name {
flex: 1;
font-size: 12px;
color: var(--ohm-fg-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.folder-item.active .folder-item-name { color: var(--ohm-fg-strong); font-weight: 600; }
.folder-item-count {
font-size: 10px;
background: var(--ohm-tint-3);
color: var(--ohm-fg-soft);
border-radius: 10px;
padding: 1px 6px;
flex-shrink: 0;
}
.folder-item.active .folder-item-count { background: rgba(240,140,0,0.3); color: var(--ohm-accent); }
.folder-item-edit {
display: none;
background: none;
border: none;
color: var(--ohm-fg-faint);
cursor: pointer;
font-size: 13px;
padding: 0 2px;
flex-shrink: 0;
}
.folder-item:hover .folder-item-edit { display: block; }
.folder-item-edit:hover { color: var(--ohm-accent); }
.folder-item-dl {
display: none;
background: none;
border: none;
color: var(--ohm-fg-faint);
cursor: pointer;
font-size: 13px;
padding: 0 2px;
flex-shrink: 0;
}
.folder-item:hover .folder-item-dl { display: block; }
.folder-item-dl:hover { color: #22c55e; }
/* Bouton + dans le header du panneau Sites */
.site-add-panel-btn {
background: rgba(240,140,0,0.15);
border: 1px solid rgba(240,140,0,0.4);
color: #F08C00;
border-radius: 4px;
width: 22px;
height: 22px;
font-size: 16px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 2px;
}
.site-add-panel-btn:hover { background: rgba(240,140,0,0.3); }
/* Chevron accordéon */
.folder-item-chevron {
font-size: 12px;
color: var(--ohm-fg-faint);
transition: transform 0.2s;
flex-shrink: 0;
display: inline-block;
}
.folder-item-chevron.expanded { transform: rotate(90deg); }
/* Site header row dans la liste */
.site-folder-header {
margin-top: 6px;
background: var(--ohm-tint-1);
border-left-color: #4ade80 !important;
cursor: pointer;
}
.site-folder-header .folder-item-name {
font-weight: 600;
color: var(--ohm-fg-strong);
letter-spacing: 0.03em;
}
.site-folder-header.active {
background: rgba(74,222,128,0.12);
}
.site-folder-header.active .folder-item-name { color: #4ade80; }
.site-folder-header.active .folder-item-count { background: rgba(74,222,128,0.25); color: #4ade80; }
/* Bouton renommer site */
.folder-item-rename {
display: none;
background: none;
border: none;
color: var(--ohm-fg-faint);
cursor: pointer;
font-size: 12px;
padding: 0 2px;
flex-shrink: 0;
}
.site-folder-header:hover .folder-item-rename { display: block; }
.folder-item-rename:hover { color: var(--ohm-accent); }
/* Bouton « modifier le tracé de la route » (VRD) — même comportement que renommer */
.folder-item-edit-axis {
display: none;
background: none;
border: none;
color: var(--ohm-fg-faint);
cursor: pointer;
font-size: 12px;
padding: 0 2px;
flex-shrink: 0;
}
.site-folder-header:hover .folder-item-edit-axis { display: block; }
.folder-item-edit-axis:hover { color: var(--ohm-accent); }
/* Bouton Vue 360° par site */
/* styles .folder-item-tour360 gérés dans .tour360-row */
/* Sous-dossier indenté */
.site-subfolder-item {
padding-left: 28px;
}
.site-subfolder-item .folder-item-name { font-size: 11px; }
/* Boutons action sous-dossier (renommer / supprimer) */
.subfolder-action-btn {
display: none;
background: none;
border: none;
color: var(--ohm-fg-faint);
cursor: pointer;
font-size: 11px;
padding: 0 2px;
flex-shrink: 0;
line-height: 1;
}
.site-subfolder-item:hover .subfolder-action-btn { display: block; }
.subfolder-rename-btn:hover { color: var(--ohm-accent); }
.subfolder-delete-btn:hover { color: #f87171; }
/* Ligne Potree 3D (dans l'accordéon site) */
.potree-row {
padding-left: 28px;
border-top: 1px solid rgba(139,92,246,0.2);
margin-top: 2px;
cursor: pointer;
}
.potree-row-label {
font-size: 11px;
color: rgba(200,185,255,0.75);
}
.potree-row:hover .potree-row-label { color: #c4b5fd; }
.potree-launch-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(139,92,246,0.2);
border: 1px solid rgba(139,92,246,0.5);
color: #a78bfa;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
padding: 0 10px;
height: 26px;
min-width: 72px;
flex-shrink: 0;
white-space: nowrap;
}
.potree-launch-btn:hover { background: rgba(139,92,246,0.4); color: #c4b5fd; }
/* Mini-menu deroulant du bouton 3D : split / nouvel onglet */
.potree-launch-menu {
position: fixed;
z-index: 10000;
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,0.5);
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 240px;
animation: ohmPotreeMenuIn 0.14s cubic-bezier(0.2,0.9,0.3,1);
}
:root.theme-light .potree-launch-menu {
box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.potree-launch-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: transparent;
border: none;
color: var(--ohm-fg);
font-family: inherit;
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
border-radius: 5px;
transition: background 0.12s, color 0.12s;
width: 100%;
}
.potree-launch-menu-item:hover {
background: rgba(139,92,246,0.18);
color: #c4b5fd;
}
:root.theme-light .potree-launch-menu-item:hover {
background: rgba(110,80,200,0.14);
color: #5b21b6;
}
.potree-launch-menu-item svg {
flex-shrink: 0;
opacity: 0.85;
}
@keyframes ohmPotreeMenuIn {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Ligne Vue 360° (dans l'accordéon site) */
.tour360-row {
padding-left: 28px;
cursor: pointer;
}
.tour360-row-label {
font-size: 11px;
color: rgba(180,255,200,0.75);
}
.tour360-row:hover .tour360-row-label { color: #86efac; }
.tour360-row .folder-item-tour360 {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(74,222,128,0.15);
border: 1px solid rgba(74,222,128,0.45);
color: #4ade80;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
padding: 0 10px;
height: 26px;
min-width: 72px;
flex-shrink: 0;
white-space: nowrap;
}
.tour360-row .folder-item-tour360:hover { background: rgba(74,222,128,0.3); color: #86efac; }
/* Ligne Rapports (accordéon site → liste des rapports stockés) */
.reports-row {
padding-left: 28px;
cursor: pointer;
}
.reports-row-label {
font-size: 11px;
color: rgba(255, 214, 153, 0.78);
}
.reports-row:hover .reports-row-label { color: #fbbf24; }
.reports-chevron {
color: var(--ohm-fg-faint);
font-size: 10px;
margin-left: 4px;
transition: transform 0.15s;
}
.reports-row.is-open .reports-chevron { color: #fbbf24; }
.reports-list {
/* impeccable R5 polish : side-stripe ambre remplacée par fond tinté +
border-radius gauche pour conserver l'identification visuelle. */
background: rgba(251, 191, 36, 0.08);
border-radius: 4px;
margin: 2px 0 4px 28px;
padding-left: 6px;
}
.report-item {
padding-left: 12px;
gap: 6px;
cursor: pointer;
}
.report-name {
font-size: 10.5px;
color: var(--ohm-fg-strong);
word-break: break-all;
}
.report-item:hover .report-name { color: #fff; }
.report-download-btn,
.report-delete-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
font-size: 12px;
flex-shrink: 0;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.report-download-btn {
background: rgba(74, 222, 128, 0.15);
border: 1px solid rgba(74, 222, 128, 0.4);
color: #4ade80;
}
.report-download-btn:hover { background: rgba(74, 222, 128, 0.3); color: #86efac; }
.report-delete-btn {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #f87171;
padding: 0;
}
.report-delete-btn:hover { background: rgba(239, 68, 68, 0.3); color: #fca5a5; }
.report-empty {
padding: 8px 12px 8px 40px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
font-style: italic;
}
.folders-panel-footer {
padding: 8px;
border-top: 1px solid rgba(255,255,255,0.07);
flex-shrink: 0;
}
.folder-add-btn {
width: 100%;
background: rgba(240,140,0,0.1);
border: 1px dashed rgba(240,140,0,0.3);
color: #F08C00;
border-radius: 6px;
padding: 6px;
font-size: 11px;
cursor: pointer;
transition: background 0.15s;
}
.folder-add-btn:hover { background: rgba(240,140,0,0.2); }
/* ── Modal Déplacer vers dossier ──────────────────────────── */
.folder-move-overlay {
position: fixed;
inset: 0;
background: var(--ohm-overlay-soft);
z-index: 95000;
display: flex;
align-items: center;
justify-content: center;
}
.folder-move-overlay.hidden { display: none; }
.folder-move-box {
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 12px;
width: 320px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.folder-move-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.folder-move-header h3 { font-size: 14px; color: var(--ohm-text); margin: 0; }
.folder-move-close-btn {
background: none; border: none; color: var(--ohm-fg-soft);
font-size: 20px; cursor: pointer;
}
.folder-move-list { overflow-y: auto; padding: 8px; }
.fmove-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 7px;
cursor: pointer;
color: var(--ohm-fg-medium);
font-size: 13px;
border-left: 3px solid transparent;
transition: background 0.12s;
}
.fmove-item:hover { background: var(--ohm-tint-1); }
.fmove-item.active { background: rgba(240,140,0,0.12); border-left-color: var(--fcolor, #F08C00); }
/* ── Modal Créer/Modifier dossier ─────────────────────────── */
.folder-edit-overlay {
position: fixed;
inset: 0;
background: var(--ohm-overlay-soft);
z-index: 95000;
display: flex;
align-items: center;
justify-content: center;
}
.folder-edit-overlay.hidden { display: none; }
.folder-edit-box {
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 12px;
width: 300px;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
overflow: hidden;
}
.folder-edit-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.folder-edit-header h3 { font-size: 14px; color: var(--ohm-text); margin: 0; }
.folder-edit-close-btn { background: none; border: none; color: var(--ohm-fg-soft); font-size: 20px; cursor: pointer; }
.folder-edit-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.folder-edit-form input {
background: var(--ohm-tint-2);
border: 1px solid var(--ohm-border);
border-radius: 7px;
color: var(--ohm-text);
font-size: 13px;
padding: 8px 10px;
outline: none;
width: 100%;
}
.folder-edit-form input:focus { border-color: #F08C00; }
.folder-edit-colors { display: flex; gap: 7px; flex-wrap: wrap; }
.fe-color {
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
}
.fe-color.selected { border-color: var(--ohm-text); transform: scale(1.2); }
.folder-edit-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px 14px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.folder-edit-save-btn {
background: #F08C00; color: #fff; border: none; border-radius: 7px;
padding: 7px 18px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.folder-edit-save-btn:hover { background: #d97706; }
.folder-edit-delete-btn {
background: var(--ohm-danger-bg); color: var(--ohm-danger); border: 1px solid var(--ohm-danger-border);
border-radius: 7px; padding: 6px 12px; font-size: 12px; cursor: pointer;
transition: filter 0.15s;
}
.folder-edit-delete-btn:hover { background: var(--ohm-danger-bg); filter: brightness(1.2); }
.folder-edit-delete-btn.hidden { display: none; }
/* Bouton Dossier dans panel image */
/* ── OHM Switch (toggle ON/OFF physique) ──────────────────────────
Bouton toggle inspiré des switches physiques : track pilule + knob
blanc qui glisse, label ON/OFF intégré dans le track, label texte
externe pour le contexte (ex: "Cadres"). État pilote via la class
.is-active (vert success) / .is-inactive (rouge danger). */
.ohm-switch {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 4px 6px;
cursor: pointer;
font-family: inherit;
color: var(--ohm-text);
transition: filter 0.15s;
}
.ohm-switch:hover { filter: brightness(1.08); }
.ohm-switch:focus-visible {
outline: 2px solid var(--ohm-accent);
outline-offset: 2px;
border-radius: 6px;
}
.ohm-switch-track {
position: relative;
width: 46px;
height: 22px;
border-radius: 11px;
background: var(--ohm-success);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.25),
0 1px 1px rgba(0, 0, 0, 0.15);
transition: background 0.2s ease;
flex-shrink: 0;
}
.ohm-switch.is-inactive .ohm-switch-track {
background: var(--ohm-danger);
}
.ohm-switch-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.5px;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
line-height: 1;
pointer-events: none;
transition: opacity 0.2s ease;
}
.ohm-switch-text-on { left: 7px; opacity: 1; }
.ohm-switch-text-off { right: 6px; opacity: 0; }
.ohm-switch.is-inactive .ohm-switch-text-on { opacity: 0; }
.ohm-switch.is-inactive .ohm-switch-text-off { opacity: 1; }
.ohm-switch-knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.35),
0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
transform: translateX(24px);
}
.ohm-switch.is-inactive .ohm-switch-knob {
transform: translateX(0);
}
.ohm-switch-label {
font-size: 12px;
font-weight: 600;
color: var(--ohm-text);
user-select: none;
}
/* ── Carte ──────────────────────────────────────────────── */
#map {
flex: 1;
height: 100%;
z-index: 1;
}
/* ── Panneau d'images ───────────────────────────────────── */
/* Le panneau de détail d'image démarre PILE au bord droit de la grille
d'images, SANS aucun gap. Calcul : folders-panel (300px) + images-grid-panel
width = clamp(560, 50vw - 180, 820) → right_edge = clamp(860, 50vw+120, 1120).
Sur 1920p : démarre à 1080px (panneau ~840px de large)
Sur 1600p : démarre à 920px (panneau ~680px de large)
Sur 1366p : démarre à 860px (panneau ~506px de large)
Sur <1280p : 860px → panneau étroit, overlap léger sous min-width 400. */
#image-panel {
position: absolute;
right: 0;
top: 0;
left: clamp(860px, calc(50vw + 120px), 1120px);
width: auto;
min-width: 400px;
max-width: none;
height: 100%;
background: #FFFFFF;
/* Box-shadow porté vers la droite uniquement (pas vers la grille à gauche)
pour ne pas créer une zone d'ombre visible entre les deux panneaux. */
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.35);
z-index: 1000;
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#image-panel.hidden {
transform: translateX(100%);
}
/* ── Mode split : annotation gauche + Potree droite ──────── */
#image-panel.split-mode {
width: 100%;
left: 0;
right: 0;
max-width: none;
min-width: 0;
flex-direction: row;
transition: none;
}
.split-left {
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1; /* mode normal : prend toute la hauteur */
min-width: 0;
background: #FFFFFF;
}
#image-panel.split-mode .split-left {
flex: 0 0 50%; /* mode split : largeur (JS ajuste via style.flex) */
height: 100%;
min-width: 320px;
}
/* Poignée de redimensionnement */
.split-handle {
width: 0;
flex-shrink: 0;
cursor: col-resize;
background: rgba(240, 140, 0, 0.12);
position: relative;
transition: background 0.15s;
display: none;
z-index: 10;
}
.split-handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 48px;
border-radius: 3px;
background: rgba(240, 140, 0, 0.45);
transition: background 0.15s, height 0.15s;
}
.split-handle:hover { background: rgba(240, 140, 0, 0.25); }
.split-handle:hover::after { background: #F08C00; height: 64px; }
#image-panel.split-mode .split-handle {
display: block;
width: 6px;
}
/* Côté droit : Potree */
.split-right {
flex: 1;
min-width: 320px;
overflow: hidden;
background: var(--ohm-bg);
display: flex;
flex-direction: column;
position: relative; /* ancrage pour #potree-loader */
}
.split-right.hidden { display: none; }
#potree-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* Overlay de chargement du viewer Potree.
Affiché dès qu'on lance iframe.src, masqué quand le viewer signale
ohm-potree-ready via postMessage. Fallback timeout 30 s côté JS. */
#potree-loader {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 14, 26, 0.96) 0%, rgba(15, 23, 42, 0.92) 100%);
backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
color: #e2e8f0;
z-index: 10;
transition: opacity 0.4s ease;
pointer-events: none;
font-family: inherit;
}
#potree-loader.hidden { opacity: 0; visibility: hidden; }
.potree-loader-spinner {
width: 56px; height: 56px;
border: 3px solid rgba(241, 132, 31, 0.18);
border-top-color: #F1841F; /* orange OHM */
border-radius: 50%;
animation: potree-spin 0.9s linear infinite;
}
@keyframes potree-spin { to { transform: rotate(360deg); } }
.potree-loader-text {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
color: #f1f5f9;
}
.potree-loader-sub {
font-size: 11px;
color: #94a3b8;
font-variant-numeric: tabular-nums;
}
.potree-loader-bar {
width: 220px; height: 4px;
background: rgba(241, 132, 31, 0.12);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.potree-loader-bar-fill {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 0%;
background: #F1841F;
transition: width 0.3s ease;
border-radius: 2px;
}
/* Mode indéterminé : barre qui sweep */
.potree-loader-bar-fill.indeterminate {
width: 30%;
animation: potree-sweep 1.4s ease-in-out infinite;
}
@keyframes potree-sweep {
0% { left: -30%; }
100% { left: 100%; }
}
/* Bouton split */
.split-btn {
background: var(--ohm-tint-2);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--ohm-fg-medium);
font-size: 13px;
padding: 0 10px;
height: 34px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.15s;
flex-shrink: 0;
white-space: nowrap;
}
.split-btn:hover {
background: rgba(240, 140, 0, 0.2);
color: #F08C00;
border-color: rgba(240, 140, 0, 0.45);
}
.split-btn.active {
background: rgba(240, 140, 0, 0.22);
color: #F08C00;
border-color: #F08C00;
}
/* Header du panneau */
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: var(--ohm-header-bg);
color: white;
border-bottom: 2px solid #F08C00;
flex-shrink: 0;
gap: 10px;
}
/* Navigation prev/next */
.panel-nav {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.nav-arrow-btn {
background: rgba(240,140,0,0.12);
border: 1px solid rgba(240,140,0,0.35);
color: #F08C00;
font-size: 16px;
width: 32px; height: 32px;
border-radius: 6px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, transform 0.1s;
}
.nav-arrow-btn:hover { background: rgba(240,140,0,0.25); transform: scale(1.1); }
.nav-arrow-btn:active { transform: scale(0.95); }
.nav-counter {
font-size: 11px;
color: var(--ohm-fg-soft);
min-width: 40px;
text-align: center;
white-space: nowrap;
}
/* Flèches visibles en plein écran (côtés gauche/droit de l'écran) */
#image-panel.fullscreen-mode .panel-nav {
position: fixed;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 60;
pointer-events: none;
justify-content: space-between;
padding: 0 12px;
width: 100vw;
box-sizing: border-box;
}
#image-panel.fullscreen-mode .nav-arrow-btn {
pointer-events: auto;
width: 48px; height: 48px;
font-size: 22px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
border-radius: 50%;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
#image-panel.fullscreen-mode .nav-arrow-btn:hover {
background: rgba(240,140,0,0.6);
transform: scale(1.1);
}
#image-panel.fullscreen-mode .nav-counter {
display: none;
}
.panel-header h2 {
font-family: 'Rajdhani', 'Arial Black', sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
color: #FFFFFF;
margin: 0;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-actions {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
margin-left: 12px;
}
/* Bouton Supprimer */
.delete-btn {
background: rgba(220, 53, 69, 0.85);
border: 1px solid rgba(220, 53, 69, 0.5);
color: white;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 7px 14px;
border-radius: 5px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.5px;
}
.delete-btn:hover {
background: rgba(220, 53, 69, 1);
border-color: #dc3545;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.delete-btn:active {
transform: translateY(0);
}
/* Bouton 360° */
.pano-btn {
background: var(--ohm-tint-2);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--ohm-fg-medium);
font-size: 13px;
padding: 0 10px;
height: 34px;
border-radius: 8px;
cursor: pointer;
display: flex; align-items: center; gap: 4px;
transition: all 0.15s;
flex-shrink: 0;
white-space: nowrap;
}
.pano-btn:hover { background: rgba(56,189,248,0.2); color: #38bdf8; border-color: rgba(56,189,248,0.4); }
.pano-btn.active { background: rgba(56,189,248,0.25); color: #38bdf8; border-color: #38bdf8; }
/* Visionneuse 360° */
#pano-viewer {
display: none;
width: 100%;
height: 500px;
border-radius: 8px;
overflow: hidden;
background: #111;
}
#image-panel.panorama-mode #pano-viewer {
display: block;
}
#image-panel.panorama-mode #fs-zoom-wrapper {
display: none;
}
/* En mode 360° + annotation active : le canvas de dessin s'overlay au-dessus du pano */
#image-panel.panorama-mode #annotation-canvas.drawing {
pointer-events: auto;
cursor: crosshair;
z-index: 25;
}
#image-panel.panorama-mode #annotation-canvas {
z-index: 15;
pointer-events: none;
}
#image-panel.panorama-mode #annotation-list {
display: none !important;
}
/* Hotspots d'annotation dans la vue 360° */
.pano-hotspot {
--hs-color: #888;
display: flex;
align-items: center;
gap: 5px;
background: var(--hs-color);
border: 2px solid rgba(255,255,255,0.85);
border-radius: 20px;
padding: 3px 8px 3px 3px;
cursor: default;
box-shadow: 0 2px 8px rgba(0,0,0,0.55);
white-space: nowrap;
font-family: inherit;
transform: translateX(-50%) translateY(-50%);
pointer-events: auto;
transition: transform 0.15s;
}
.pano-hotspot:hover { transform: translateX(-50%) translateY(-50%) scale(1.12); }
.pano-hs-num {
background: rgba(0,0,0,0.35);
color: #fff;
border-radius: 50%;
width: 20px; height: 20px;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
.pano-hs-label {
color: #fff;
font-size: 11px;
font-weight: 600;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Fullscreen + panorama : le viewer remplit l'écran */
#image-panel.fullscreen-mode.panorama-mode #pano-viewer {
width: 100vw;
height: 100vh;
border-radius: 0;
}
#image-panel.fullscreen-mode.panorama-mode .image-annotation-container {
cursor: default;
}
/* Bouton Plein Ecran */
.fullscreen-btn {
background: var(--ohm-tint-2);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--ohm-fg-medium);
font-size: 17px;
width: 34px; height: 34px;
border-radius: 8px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
}
.fullscreen-btn:hover { background: rgba(240,140,0,0.2); color: #F08C00; border-color: rgba(240,140,0,0.4); }
/* Mode Plein Ecran du panneau image */
#image-panel.fullscreen-mode {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
z-index: 50000 !important;
border-radius: 0 !important;
border: none !important;
transform: none !important;
background: #000 !important;
overflow: hidden !important;
}
/* Barre flottante en haut (header + toolbar) */
#image-panel.fullscreen-mode .panel-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 10;
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
border: none;
padding: 10px 16px;
}
#image-panel.fullscreen-mode .annotation-toolbar {
position: absolute;
top: 56px; left: 16px;
z-index: 10;
margin: 0;
background: rgba(0,0,0,0.5);
border-radius: 8px;
padding: 4px 8px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* L'image remplit tout l'écran */
#image-panel.fullscreen-mode .panel-content {
position: absolute;
inset: 0;
padding: 0;
overflow: hidden;
background: #000;
}
#image-panel.fullscreen-mode .image-annotation-container {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
#image-panel.fullscreen-mode #drone-image {
max-width: 100vw !important;
max-height: 100vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block;
}
#image-panel.fullscreen-mode #annotation-canvas {
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform: none !important;
}
/* Liste et infos masquées en plein écran */
#image-panel.fullscreen-mode .annotation-list,
#image-panel.fullscreen-mode .image-info,
#image-panel.fullscreen-mode .central-point-info {
display: none !important;
}
/* Wrapper zoom/pan fullscreen */
#image-panel.fullscreen-mode #fs-zoom-wrapper {
display: inline-block;
width: auto;
will-change: transform;
}
#image-panel.fullscreen-mode .image-annotation-container {
cursor: grab;
overflow: hidden !important;
}
#image-panel.fullscreen-mode .image-annotation-container.fs-dragging {
cursor: grabbing;
}
/* Annotation mode overrides grab cursor */
#image-panel.fullscreen-mode #annotation-canvas.drawing,
#image-panel.fullscreen-mode #annotation-canvas.hoverable {
cursor: crosshair;
}
/* Bouton Fermer */
.close-btn {
background: var(--ohm-tint-3);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
font-size: 22px;
cursor: pointer;
width: 34px;
height: 34px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
line-height: 1;
padding: 0;
}
.close-btn:hover {
background: rgba(240, 140, 0, 0.3);
border-color: rgba(240, 140, 0, 0.5);
}
/* Contenu du panneau */
.panel-content {
flex: 1;
overflow-y: auto;
padding: 20px;
background: #F7F8FC;
}
/* Image drone */
#drone-image {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 6px 20px rgba(27, 31, 59, 0.15);
margin-bottom: 18px;
cursor: zoom-in;
display: block;
background: var(--ohm-surface);
}
#drone-image.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
max-height: 100vh;
object-fit: contain;
z-index: 10000;
background: rgba(14, 17, 34, 0.97);
padding: 20px;
border-radius: 0;
cursor: zoom-out;
}
/* Infos image */
.image-info {
background: #FFFFFF;
border-radius: 8px;
padding: 16px;
border: 1px solid #E8EAF0;
box-shadow: 0 2px 8px rgba(27, 31, 59, 0.06);
}
.image-info p {
margin-bottom: 10px;
line-height: 1.6;
font-size: 14px;
color: #444;
}
.image-info p:last-child {
margin-bottom: 0;
}
.image-info p strong {
color: #1B1F3B;
font-weight: 600;
}
/* ── Compteur sur la carte ───────────────────────────────── */
.marker-count {
position: absolute;
top: 10px;
left: 60px;
background: rgba(27, 31, 59, 0.92);
color: #F08C00;
padding: 8px 14px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
z-index: 1000;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
border: 1px solid rgba(240, 140, 0, 0.3);
pointer-events: none;
}
/* ── Chargement ─────────────────────────────────────────── */
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(27, 31, 59, 0.95);
color: white;
padding: 28px 36px;
border-radius: 10px;
z-index: 2000;
text-align: center;
border: 1px solid rgba(240, 140, 0, 0.4);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
#loading p {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.5px;
color: #F08C00;
}
/* ── Popups Leaflet ─────────────────────────────────────── */
.leaflet-popup-content-wrapper {
border-radius: 8px;
box-shadow: 0 4px 20px rgba(27, 31, 59, 0.25);
border: 1px solid #E8EAF0;
}
.leaflet-popup-content {
margin: 14px 16px;
font-size: 13px;
line-height: 1.6;
color: #1B1F3B;
}
.leaflet-popup-content strong {
color: #F08C00;
font-weight: 700;
}
.leaflet-popup-tip {
background: white;
}
/* Cluster markers */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
background-clip: padding-box;
}
.marker-cluster-small div {
background-color: rgba(240, 140, 0, 0.85);
}
.marker-cluster-medium div {
background-color: rgba(220, 110, 0, 0.9);
}
.marker-cluster-large div {
background-color: rgba(27, 31, 59, 0.9);
}
.marker-cluster div {
color: #fff;
font-weight: 700;
font-size: 13px;
}
/* ── Overlay Drag & Drop ───────────────────────────────── */
.drop-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(14, 17, 34, 0.85);
z-index: 50000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
}
.drop-overlay.hidden {
display: none;
}
.drop-overlay-content {
text-align: center;
color: white;
padding: 60px 80px;
border: 3px dashed #F08C00;
border-radius: 20px;
background: rgba(240, 140, 0, 0.08);
}
.drop-icon {
font-size: 64px;
color: #F08C00;
margin-bottom: 16px;
line-height: 1;
font-weight: 300;
}
.drop-overlay-content p {
font-family: 'Rajdhani', sans-serif;
font-size: 24px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 8px;
}
.drop-overlay-content small {
font-size: 14px;
color: var(--ohm-fg-soft);
}
/* ── Barre d'annulation (Undo) ─────────────────────────── */
.undo-bar {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--ohm-surface);
color: white;
padding: 10px 20px;
border-radius: 10px;
z-index: 60000;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(240, 140, 0, 0.3);
font-size: 14px;
animation: slideUp 0.3s ease;
}
.undo-bar.hidden {
display: none;
}
@keyframes slideUp {
from {
transform: translateX(-50%) translateY(20px);
opacity: 0;
}
to {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
}
.undo-btn {
background: #F08C00;
border: none;
color: white;
padding: 6px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.undo-btn:hover {
background: #d97a00;
}
.undo-close-btn {
background: none;
border: none;
color: var(--ohm-fg-soft);
font-size: 18px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color 0.2s;
}
.undo-close-btn:hover {
color: white;
}
/* ── Bandeau de placement ──────────────────────────────── */
.placement-info {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
background: var(--ohm-header-bg);
color: #F08C00;
padding: 12px 24px;
border-radius: 10px;
z-index: 5000;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(240, 140, 0, 0.4);
display: flex;
align-items: center;
gap: 16px;
animation: slideDown 0.3s ease;
}
.placement-info.hidden {
display: none;
}
/* Boutons popup cluster - déplacement de groupe */
.move-group-popup-btn {
display: inline-block;
margin-top: 4px;
padding: 6px 12px;
background: #F08C00;
color: #fff;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.move-group-popup-btn:hover { background: #d97b00; }
.move-group-popup-btn.secondary {
background: #3a4069;
}
.move-group-popup-btn.secondary:hover { background: #4a5080; }
@keyframes slideDown {
from {
transform: translateX(-50%) translateY(-20px);
opacity: 0;
}
to {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
}
.cancel-placement-btn {
background: rgba(220, 53, 69, 0.85);
border: none;
color: white;
padding: 5px 14px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.cancel-placement-btn:hover {
background: rgba(220, 53, 69, 1);
}
/* ── Annotation toolbar ────────────────────────────────── */
.annotation-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.annotation-toolbar .annotate-btn {
background: rgba(220, 53, 69, 0.85);
border: 1px solid rgba(220, 53, 69, 0.5);
color: white;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 7px 14px;
border-radius: 5px;
transition: all 0.2s;
letter-spacing: 0.5px;
}
.annotation-toolbar .annotate-btn:hover {
background: rgba(220, 53, 69, 1);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.annotation-toolbar .annotate-btn.active {
background: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
}
.annotation-toolbar .annotation-hint {
font-size: 12px;
color: #888;
font-style: italic;
}
/* ── Image annotation container ───────────────────────── */
.image-annotation-container {
position: relative;
display: inline-block;
width: 100%;
margin-bottom: 18px;
}
.image-annotation-container #drone-image {
margin-bottom: 0;
}
#fs-zoom-wrapper {
position: relative;
display: block;
width: 100%;
transform-origin: 0 0;
}
#annotation-canvas {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 10;
}
#annotation-canvas.drawing {
pointer-events: auto;
cursor: crosshair;
}
#annotation-canvas.hoverable {
pointer-events: auto;
cursor: default;
}
/* ── Annotation tooltip ───────────────────────────────── */
#annotation-tooltip {
position: fixed;
background: rgba(27, 31, 59, 0.95);
color: #F08C00;
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
z-index: 100000;
pointer-events: none;
max-width: 300px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(240, 140, 0, 0.3);
display: none;
}
/* ── Annotation list ─────────────────────────────────── */
.annotation-list {
margin-bottom: 12px;
}
.annotation-list-header {
font-size: 13px;
font-weight: 700;
color: #F08C00;
margin-bottom: 6px;
padding: 4px 0;
border-bottom: 1px solid rgba(240, 140, 0, 0.2);
}
.annotation-list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 8px;
margin-bottom: 3px;
background: rgba(27, 31, 59, 0.5);
border-radius: 4px;
border: 1px solid rgba(240, 140, 0, 0.15);
transition: background 0.15s, border-color 0.15s;
}
.annotation-list-item:hover {
background: rgba(240, 140, 0, 0.1);
border-color: rgba(240, 140, 0, 0.4);
}
.annotation-list-label {
font-size: 12px;
color: #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
margin-right: 8px;
}
.annotation-item-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
align-items: center;
}
.annotation-edit-btn {
background: rgba(96, 165, 250, 0.12);
color: #60a5fa;
border: 1px solid rgba(96, 165, 250, 0.3);
border-radius: 3px;
width: 24px;
height: 24px;
font-size: 13px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.annotation-edit-btn:hover {
background: rgba(96, 165, 250, 0.35);
color: #fff;
}
.annotation-delete-btn {
background: rgba(220, 53, 69, 0.15);
color: #dc3545;
border: 1px solid rgba(220, 53, 69, 0.3);
border-radius: 3px;
width: 24px;
height: 24px;
font-size: 16px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.annotation-delete-btn:hover {
background: rgba(220, 53, 69, 0.4);
color: #fff;
}
/* ── Grille latérale scrollable ───────────────────────── */
.images-grid-panel {
order: 1;
/* Élargi pour héberger 3 colonnes de thumbs confortablement.
Calc : 3 thumbs ~210 px + 2 gaps 8 px + padding 16 px = ~650 px.
Max-width 820 px = 3 thumbs jusqu'à ~260 px sur grand écran. */
width: calc(50vw - 180px);
min-width: 560px;
max-width: 820px;
flex-shrink: 0;
height: 100%;
background: var(--ohm-bg-soft);
border-right: 1px solid var(--ohm-border);
display: flex;
flex-direction: column;
box-shadow: var(--ohm-shadow);
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.images-grid-panel.hidden {
display: none;
}
#map { order: 2; }
.images-grid-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
background: var(--ohm-surface);
border-bottom: 1px solid var(--ohm-border);
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s;
}
.images-grid-title {
font-size: 12px;
font-weight: 700;
color: var(--ohm-text);
letter-spacing: 0.5px;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.images-grid-count {
font-size: 10px;
color: var(--ohm-fg-faint);
flex-shrink: 0;
}
.images-grid-close-btn {
background: none;
border: none;
color: var(--ohm-fg-faint);
cursor: pointer;
font-size: 14px;
padding: 2px 4px;
border-radius: 3px;
flex-shrink: 0;
line-height: 1;
transition: color 0.15s, background 0.15s;
}
.images-grid-close-btn:hover {
color: #fff;
background: var(--ohm-tint-3);
}
.images-grid-body {
overflow-y: auto;
flex: 1;
padding: 8px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
align-content: start;
}
.images-grid-body::-webkit-scrollbar { width: 4px; }
.images-grid-body::-webkit-scrollbar-track { background: transparent; }
.images-grid-body::-webkit-scrollbar-thumb { background: var(--ohm-tint-3); border-radius: 3px; }
.igp-cell {
border-radius: 4px;
cursor: pointer;
overflow: hidden;
transition: opacity 0.15s, transform 0.1s;
opacity: 0.85;
}
.igp-cell:hover {
opacity: 1;
transform: scale(1.04);
}
.igp-thumb-wrap {
position: relative;
aspect-ratio: 4 / 3;
background: var(--ohm-bg);
}
.igp-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Compteur — badge en bas à droite, visible uniquement si annoté */
.igp-count {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
background: rgba(240,140,0,0.95);
color: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
pointer-events: none;
}
/* Pagination */
.igp-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid var(--ohm-border);
background: var(--ohm-surface);
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s;
}
.igp-page-btn {
background: var(--ohm-tint-2);
border: none;
color: var(--ohm-text);
cursor: pointer;
font-size: 14px;
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.igp-page-btn:hover:not(:disabled) { background: var(--ohm-accent-dim); color: var(--ohm-accent); }
.igp-page-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.igp-page-info {
font-size: 11px;
color: var(--ohm-fg-faint);
min-width: 80px;
text-align: center;
}
/* ── Point name editable ──────────────────────────────── */
.point-name-display {
cursor: pointer;
border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
transition: border-color 0.2s;
}
.point-name-display:hover {
border-bottom-color: #F08C00;
}
.point-name-input {
background: var(--ohm-tint-3);
border: 1px solid #F08C00;
color: white;
font-family: 'Rajdhani', 'Arial Black', sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
padding: 2px 8px;
border-radius: 4px;
width: 100%;
outline: none;
}
/* ── Info point central (dans le panneau image) ──────── */
.central-point-info {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
background: linear-gradient(135deg, #1a1e36 0%, #20243d 100%);
border-bottom: 1px solid rgba(240, 140, 0, 0.15);
flex-shrink: 0;
}
.central-point-label {
font-size: 12px;
font-weight: 600;
color: var(--ohm-fg-soft);
letter-spacing: 0.5px;
}
.central-point-name {
font-size: 13px;
font-weight: 700;
color: #F08C00;
letter-spacing: 0.5px;
}
/* ── Points centraux sur la carte ────────────────────── */
.central-point-icon {
background: none;
border: none;
}
.central-marker-inner {
width: 20px;
height: 20px;
background: #F08C00;
border: 3px solid #1B1F3B;
border-radius: 50%;
box-shadow: 0 0 8px rgba(240, 140, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* ── Popup des points centraux ───────────────────────── */
.central-popup {
font-family: 'Inter', sans-serif;
}
.central-popup-name {
display: block;
font-size: 15px;
color: #F08C00;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.central-popup-row {
margin-bottom: 8px;
}
.central-popup-row label {
display: block;
font-size: 12px;
color: #555;
margin-bottom: 4px;
font-weight: 600;
}
.radius-slider {
width: 100%;
accent-color: #F08C00;
cursor: pointer;
}
.central-popup-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
.cp-btn {
flex: 1;
padding: 5px 10px;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.cp-rename-btn {
background: #3498db;
color: white;
}
.cp-rename-btn:hover {
background: #2980b9;
}
.cp-delete-btn {
background: #e74c3c;
color: white;
}
.cp-delete-btn:hover {
background: #c0392b;
}
/* ── Label Picker Modal ─────────────────────────────────── */
.label-picker-overlay {
position: fixed;
inset: 0;
background: rgba(14, 17, 34, 0.82);
z-index: 300000;
display: flex;
align-items: center;
justify-content: center;
}
.label-picker-overlay.hidden { display: none; }
.label-picker-box {
background: var(--ohm-surface);
border: 1px solid rgba(240, 140, 0, 0.4);
border-radius: 12px;
width: 640px;
max-width: 97vw;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65);
overflow: hidden;
}
.label-picker-head {
display: flex;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid rgba(240, 140, 0, 0.2);
flex-shrink: 0;
}
.label-picker-head h3 {
font-family: 'Rajdhani', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 2px;
color: #F08C00;
text-transform: uppercase;
margin: 0;
flex: 1;
}
.label-picker-search {
padding: 10px 16px 8px;
flex-shrink: 0;
}
.label-picker-search input {
width: 100%;
background: var(--ohm-tint-2);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
padding: 7px 12px;
color: white;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
.label-picker-search input:focus {
border-color: rgba(240, 140, 0, 0.5);
}
.label-picker-search input::placeholder { color: var(--ohm-fg-faint); }
.label-picker-tabs {
display: flex;
gap: 10px;
padding: 12px 16px;
flex-shrink: 0;
}
.label-cat-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 8px;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.1);
background: var(--ohm-tint-1);
color: var(--ohm-fg-soft);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.18s;
letter-spacing: 0.3px;
}
.label-cat-btn:hover:not(.active) {
background: var(--ohm-tint-2);
color: white;
border-color: rgba(255, 255, 255, 0.2);
}
.label-cat-icon {
font-size: 22px;
line-height: 1;
}
.label-cat-name {
font-size: 14px;
font-weight: 700;
}
.label-cat-count {
font-size: 11px;
opacity: 0.7;
font-weight: 400;
}
.label-picker-list {
flex: 1;
overflow-y: auto;
padding: 10px 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
align-content: start;
border-top: 1px solid rgba(240, 140, 0, 0.12);
}
.label-picker-list::-webkit-scrollbar { width: 5px; }
.label-picker-list::-webkit-scrollbar-track { background: transparent; }
.label-picker-list::-webkit-scrollbar-thumb { background: rgba(240,140,0,0.3); border-radius: 3px; }
.label-subgroup-header {
grid-column: 1 / -1;
font-size: 10px;
font-weight: 700;
color: rgba(240, 140, 0, 0.65);
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 8px 0 3px;
border-bottom: 1px solid rgba(240, 140, 0, 0.12);
margin-top: 2px;
}
.label-subgroup-header:first-child { margin-top: 0; padding-top: 2px; }
.label-item {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 9px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: var(--ohm-tint-1);
cursor: pointer;
transition: all 0.12s;
}
.label-item:hover {
background: var(--ohm-tint-2);
border-color: rgba(255, 255, 255, 0.18);
}
.label-item.selected {
background: rgba(240, 140, 0, 0.12);
border-color: rgba(240, 140, 0, 0.45);
}
.label-color-dot {
width: 11px;
height: 11px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.label-item-name {
font-size: 11.5px;
color: #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.label-item.selected .label-item-name { color: #F08C00; font-weight: 600; }
.label-picker-footer {
padding: 10px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
flex-direction: column;
gap: 7px;
flex-shrink: 0;
}
.label-picker-footer-inputs {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Champs inventaire DAF */
.daf-fields {
background: rgba(180, 83, 9, 0.1);
border: 1px solid rgba(217, 119, 6, 0.35);
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.daf-fields.hidden { display: none; }
.daf-fields-title {
font-size: 11px;
font-weight: 700;
color: #f59e0b;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.daf-fields-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
}
.daf-field-full { grid-column: 1 / -1; }
.daf-fields-grid label {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 11px;
color: var(--ohm-fg-soft);
}
.daf-fields-grid input,
.daf-fields-grid select {
background: var(--ohm-tint-2);
border: 1px solid var(--ohm-border);
border-radius: 5px;
color: #fff;
font-size: 12px;
padding: 4px 7px;
outline: none;
}
.daf-fields-grid select option { background: var(--ohm-surface); }
.daf-fields-grid input:focus,
.daf-fields-grid select:focus {
border-color: #f59e0b;
background: rgba(245,158,11,0.1);
}
.annotation-daf-data {
font-size: 11px;
color: #f59e0b;
margin-top: 2px;
padding: 2px 6px;
background: rgba(245,158,11,0.1);
border-radius: 4px;
display: inline-block;
}
/* Champs techniques aériens DT */
.aerial-fields {
background: rgba(14, 165, 233, 0.08);
border: 1px solid rgba(14, 165, 233, 0.3);
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.aerial-fields.hidden { display: none; }
.aerial-fields-title {
font-size: 11px;
font-weight: 700;
color: #0ea5e9;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.aerial-fields-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
}
.aerial-fields-grid label {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 11px;
color: var(--ohm-fg-soft);
}
.aerial-fields-grid input {
background: var(--ohm-tint-2);
border: 1px solid var(--ohm-border);
border-radius: 5px;
color: #fff;
font-size: 12px;
padding: 4px 7px;
outline: none;
}
.aerial-fields-grid input:focus {
border-color: #0ea5e9;
background: rgba(14,165,233,0.1);
}
/* Badge données aériennes dans la liste d'annotations */
.annotation-aerial-data {
font-size: 11px;
color: #0ea5e9;
margin-top: 2px;
padding: 2px 6px;
background: rgba(14,165,233,0.1);
border-radius: 4px;
display: inline-block;
}
/* Pastille mesures 3D Potree dans la liste d'annotations */
.annotation-potree3d-data {
font-size: 11px;
color: #fbcb9d;
margin-top: 2px;
padding: 2px 6px;
background: rgba(241, 132, 31, 0.10);
border: 1px solid rgba(241, 132, 31, 0.30);
border-radius: 4px;
display: inline-block;
}
.annotation-potree3d-icon {
margin-right: 2px;
}
.label-picker-footer input,
.label-picker-footer textarea {
width: 100%;
background: var(--ohm-tint-2);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
padding: 7px 12px;
color: white;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
box-sizing: border-box;
}
.label-picker-footer textarea {
resize: vertical;
min-height: 54px;
line-height: 1.4;
}
.label-picker-footer input:focus,
.label-picker-footer textarea:focus { border-color: rgba(240, 140, 0, 0.4); }
.label-picker-footer input::placeholder,
.label-picker-footer textarea::placeholder { color: var(--ohm-fg-faint); }
.label-picker-footer-btns {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.label-confirm-btn {
background: #F08C00;
border: none;
color: white;
padding: 8px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
letter-spacing: 0.5px;
white-space: nowrap;
}
.label-confirm-btn:hover:not(:disabled) { background: #d97a00; }
.label-confirm-btn:disabled { background: rgba(240, 140, 0, 0.25); cursor: not-allowed; }
.label-cancel-btn {
background: var(--ohm-tint-2);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--ohm-fg-soft);
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.label-cancel-btn:hover { background: rgba(255, 255, 255, 0.14); color: white; }
/* ── Label verrouillé (données pré-remplies) ─────────────────── */
.label-locked-notice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 6px;
padding: 7px 12px;
margin-bottom: 8px;
font-size: 12px;
color: #6ee7b7;
}
.label-locked-notice.hidden { display: none; }
.label-unlock-btn {
background: rgba(16, 185, 129, 0.2);
border: 1px solid rgba(16, 185, 129, 0.45);
color: #6ee7b7;
padding: 3px 10px;
border-radius: 5px;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.label-unlock-btn:hover { background: rgba(16, 185, 129, 0.35); }
/* Champs désactivés (verrouillés) */
.label-picker-footer input:disabled,
.label-picker-footer textarea:disabled,
.daf-fields-grid input:disabled,
.daf-fields-grid select:disabled,
.aerial-fields-grid input:disabled {
opacity: 0.55;
cursor: not-allowed;
border-color: rgba(255, 255, 255, 0.08);
background: var(--ohm-tint-1);
}
.sev-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Icône cadenas dans la liste des labels */
.label-item-lock {
margin-left: auto;
font-size: 11px;
opacity: 0.6;
flex-shrink: 0;
}
.label-picker-no-result {
grid-column: 1 / -1;
color: rgba(255, 255, 255, 0.35);
font-size: 13px;
padding: 16px 0;
text-align: center;
}
/* ── Annotation badge dans la liste ──────────────────────── */
.annotation-label-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px 2px 5px;
border-radius: 10px;
font-size: 11.5px;
font-weight: 600;
background: rgba(0, 0, 0, 0.25);
color: #eee;
max-width: 100%;
overflow: hidden;
vertical-align: middle;
}
.annotation-badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
/* Actions correctives dans la liste d'annotations
impeccable R5 polish : side-stripe orange remplacée par radius
uniforme + leading "·" via padding gauche un peu plus marqué. */
.annotation-actions-text {
font-size: 11px;
color: rgba(255, 200, 80, 0.85);
margin-top: 3px;
padding: 4px 8px 4px 10px;
background: rgba(240, 140, 0, 0.10);
border-radius: 4px;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
}
/* Identifiant unique de composant */
.annotation-cid {
display: inline-block;
font-family: monospace;
font-size: 10px;
font-weight: 600;
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.35);
border-radius: 4px;
padding: 1px 6px;
margin-top: 3px;
letter-spacing: 0.5px;
user-select: all;
cursor: default;
}
/* Variante dans les cartes ticket/inventaire */
.ticket-cid {
font-size: 10px;
margin-top: 0;
margin-left: 6px;
vertical-align: middle;
}
.annotation-list-content {
flex: 1;
min-width: 0;
margin-right: 8px;
}
.annotation-badge-comment {
font-size: 11px;
color: var(--ohm-fg-faint);
font-style: italic;
margin-left: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
display: inline-block;
vertical-align: middle;
}
/* ── Bouton Gérer dans le label picker ────────────────── */
.label-picker-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px 8px;
}
.label-picker-head h3 { margin: 0; font-size: 15px; color: var(--ohm-text); }
.label-manage-btn {
background: var(--ohm-tint-2); border: 1px solid rgba(255,255,255,0.18);
color: var(--ohm-fg-medium); padding: 4px 10px; border-radius: 6px;
font-size: 11px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.label-manage-btn:hover { background: var(--ohm-tint-3); color: #fff; }
/* ── Label Manager Modal ───────────────────────────────── */
.label-manager-overlay {
position: fixed; inset: 0;
background: rgba(8,10,24,0.85);
z-index: 80000;
display: flex; align-items: center; justify-content: center;
}
.label-manager-overlay.hidden { display: none; }
.label-manager-box {
background: var(--ohm-surface); border-radius: 14px;
border: 1px solid rgba(240,140,0,0.3);
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
width: min(680px, 96vw);
max-height: 85vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.label-manager-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
background: var(--ohm-bg);
}
.label-manager-head h3 { margin: 0; font-size: 15px; color: #F08C00; }
.label-manager-close {
background: none; border: none; color: var(--ohm-fg-soft);
font-size: 22px; cursor: pointer; line-height: 1;
}
.label-manager-close:hover { color: #fff; }
.label-manager-tabs {
display: flex; gap: 4px; padding: 10px 16px 0;
background: var(--ohm-bg); border-bottom: 1px solid rgba(255,255,255,0.07);
flex-wrap: wrap;
}
.lm-tab {
padding: 6px 14px; border-radius: 8px 8px 0 0;
border: 1px solid var(--ohm-border); border-bottom: none;
background: var(--ohm-tint-1); color: var(--ohm-fg-soft);
font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.lm-tab.active { background: var(--ohm-surface); color: #F08C00; border-color: rgba(240,140,0,0.35); }
.label-manager-list {
flex: 1; overflow-y: auto; padding: 8px 16px;
display: flex; flex-direction: column; gap: 2px;
}
.lm-subgroup-title {
font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.35);
letter-spacing: 1.5px; text-transform: uppercase;
padding: 8px 4px 3px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px;
}
.lm-subgroup-title:first-child { border-top: none; margin-top: 0; }
.lm-label-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: 6px;
transition: background 0.12s;
}
.lm-label-row:hover { background: var(--ohm-tint-1); }
.lm-color-dot {
width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.2);
}
.lm-label-name { flex: 1; font-size: 13px; color: var(--ohm-fg-strong); }
.lm-delete-btn {
background: none; border: none; color: rgba(239,68,68,0.5);
font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
transition: all 0.12s; opacity: 0;
}
.lm-label-row:hover .lm-delete-btn,
.lm-label-row:hover .lm-rename-btn { opacity: 1; }
.lm-delete-btn:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
.lm-rename-btn {
background: none; border: none; color: rgba(96,165,250,0.5);
font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
transition: all 0.12s; opacity: 0;
}
.lm-rename-btn:hover { background: rgba(96,165,250,0.15); color: #60a5fa; }
.lm-rename-input {
flex: 1; background: var(--ohm-tint-2); border: 1px solid rgba(96,165,250,0.5);
border-radius: 4px; color: white; padding: 2px 6px; font-size: 13px;
outline: none; width: 100%;
}
.lm-empty {
padding: 24px; text-align: center;
color: var(--ohm-fg-faint); font-size: 13px; font-style: italic;
}
.label-manager-add {
padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08);
background: var(--ohm-bg);
}
.lm-add-row {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.lm-add-row input[type="text"] {
background: var(--ohm-tint-2); border: 1px solid var(--ohm-border);
color: #fff; border-radius: 6px; padding: 7px 10px; font-size: 12px;
outline: none; flex: 1; min-width: 120px;
}
.lm-add-row input[type="text"]:focus { border-color: rgba(240,140,0,0.5); }
.lm-add-row input[type="color"] {
width: 34px; height: 32px; border-radius: 6px; border: 1px solid var(--ohm-border);
background: none; cursor: pointer; padding: 2px; flex-shrink: 0;
}
.lm-add-btn {
background: rgba(240,140,0,0.15); border: 1px solid rgba(240,140,0,0.4);
color: #F08C00; padding: 7px 14px; border-radius: 6px;
font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background 0.2s; flex-shrink: 0;
}
.lm-add-btn:hover { background: rgba(240,140,0,0.28); }
/* ── Boutons Inventaire, Intervention & Calcul de charge ────
Style : contour coloré transparent au repos, remplissage qui
monte du bas vers le haut au survol (gradient + background-position).
Couleur du texte inversée au survol pour contraster sur le fond rempli. */
/* ── Boutons module header ───────────────────────────────────
Refactor 2026-05-23 (impeccable critique P1 — Quieter direction) :
Le code couleur métier (vert Inventaire, ambre Intervention,
violet Charge) ne porte plus sur la bordure du bouton — il
migre sur les contenus (sidebar, inventaire, calculs). Les
boutons du header partagent un vocabulaire commun "outil
secondaire" : neutre tinté au repos, accent orange au hover
uniquement. L'orange reste réservé à l'action primaire
(Import/Export). Cf. shared design law "Restrained color
strategy". */
.inventaire-header-btn,
.intervention-header-btn,
.load-calc-header-btn {
padding: 7px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
background-color: transparent;
background-size: 100% 200%;
background-position: 0% 0%;
background-image: linear-gradient(to top, var(--ohm-accent) 50%, transparent 50%);
line-height: 1;
border: 1.5px solid var(--ohm-border);
color: var(--ohm-text-soft);
transition: background-position 0.35s ease, color 0.35s ease,
border-color 0.2s, box-shadow 0.2s;
}
.inventaire-header-btn:hover,
.intervention-header-btn:hover,
.load-calc-header-btn:hover {
background-position: 0% 100%;
color: #0c1322;
border-color: var(--ohm-accent);
box-shadow: 0 0 10px rgba(240, 140, 0, 0.28);
}
:root.theme-light .inventaire-header-btn,
:root.theme-light .intervention-header-btn,
:root.theme-light .load-calc-header-btn {
color: var(--ohm-text);
border-color: var(--ohm-border);
}
:root.theme-light .inventaire-header-btn:hover,
:root.theme-light .intervention-header-btn:hover,
:root.theme-light .load-calc-header-btn:hover {
color: #fff;
}
/* Intervention — visible UNIQUEMENT pour les rôles OHM (producer +
superadmin depuis 2026-05-23). admin/operator côté client ne voient
rien. Classe posée par app/00-auth.js après /api/whoami. */
.intervention-header-btn { display: none; }
body.role-producer .intervention-header-btn,
body.role-superadmin .intervention-header-btn {
display: inline-block;
}
.header-btn-count {
display: inline-block;
background: rgba(255,255,255,0.22);
border-radius: 10px;
padding: 1px 7px;
font-size: 10px;
font-weight: 700;
vertical-align: middle;
margin-left: 4px;
line-height: 16px;
}
/* ── Bouton Reset ──────────────────────────────────────── */
.reset-app-btn {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #f87171;
padding: 7px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
white-space: nowrap;
}
.reset-app-btn:hover {
background: rgba(239, 68, 68, 0.25);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}
/* ── Admin button (producer-only, masqué par défaut) ──────────
Refactor 2026-05-23 (impeccable critique P1) : aligné sur la
grammaire des boutons module (radius 4, uppercase, fill from
bottom hover orange). Plus de pill orange isolé, le bouton
est traité comme un outil secondaire comme Inventaire/Charge. */
.admin-btn {
display: none;
background-color: transparent;
background-image: linear-gradient(to top, var(--ohm-accent) 50%, transparent 50%);
background-size: 100% 200%;
background-position: 0% 0%;
border: 1.5px solid var(--ohm-border);
color: var(--ohm-text-soft);
padding: 7px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: background-position 0.35s ease, color 0.35s ease,
border-color 0.2s, box-shadow 0.2s;
white-space: nowrap;
text-decoration: none;
align-items: center;
gap: 5px;
}
/* Administration : exclusif superadmin (2026-05-23).
Le rôle producer perd l'accès à la gestion des utilisateurs ;
seul superadmin voit le bouton et peut atteindre /admin.html. */
body.role-superadmin .admin-btn {
display: inline-flex;
}
.admin-btn:hover {
background-position: 0% 100%;
color: #0c1322;
border-color: var(--ohm-accent);
box-shadow: 0 0 10px rgba(240, 140, 0, 0.28);
}
:root.theme-light .admin-btn {
color: var(--ohm-text);
}
:root.theme-light .admin-btn:hover {
color: #fff;
}
/* ── Modal Reset ───────────────────────────────────────── */
.reset-modal-overlay {
position: fixed;
inset: 0;
background: var(--ohm-overlay-hard);
z-index: 200000;
display: flex;
align-items: center;
justify-content: center;
}
.reset-modal-overlay.hidden { display: none; }
.reset-modal-box {
background: var(--ohm-surface);
border: 1px solid rgba(239,68,68,0.4);
border-radius: 14px;
padding: 36px 40px;
max-width: 440px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.reset-modal-icon {
font-size: 48px;
margin-bottom: 12px;
color: #f87171;
}
.reset-modal-title {
color: #f87171;
font-size: 20px;
font-weight: 700;
margin: 0 0 14px;
}
.reset-modal-body {
color: var(--ohm-fg-medium);
font-size: 13px;
line-height: 1.6;
margin: 0 0 24px;
}
.reset-modal-body strong { color: var(--ohm-text); }
.reset-modal-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.reset-cancel-btn {
background: var(--ohm-tint-2);
border: 1px solid rgba(255,255,255,0.2);
color: var(--ohm-fg-medium);
padding: 9px 22px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
}
.reset-cancel-btn:hover { background: var(--ohm-tint-3); }
.reset-confirm-btn {
background: rgba(239,68,68,0.2);
border: 1px solid rgba(239,68,68,0.5);
color: #f87171;
padding: 9px 22px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.reset-confirm-btn:hover { background: rgba(239,68,68,0.4); }
.reset-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Sévérité dans le label picker ────────────────────── */
.label-severity-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0 4px;
flex-wrap: wrap;
}
.label-severity-row.hidden { display: none; }
.severity-label-text {
font-size: 12px;
color: var(--ohm-fg-soft);
white-space: nowrap;
}
.sev-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid transparent;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* Sev buttons — fond tint + bordure colorée au repos, fill solide en .active.
Les tokens --ohm-sev-* s'adaptent automatiquement au thème (dark/light). */
.sev-btn[data-sev="1"] { background: var(--ohm-sev-1-bg); color: var(--ohm-sev-1); border-color: var(--ohm-sev-1-border); }
.sev-btn[data-sev="2"] { background: var(--ohm-sev-2-bg); color: var(--ohm-sev-2); border-color: var(--ohm-sev-2-border); }
.sev-btn[data-sev="3"] { background: var(--ohm-sev-3-bg); color: var(--ohm-sev-3); border-color: var(--ohm-sev-3-border); }
.sev-btn[data-sev="4"] { background: var(--ohm-sev-4-bg); color: var(--ohm-sev-4); border-color: var(--ohm-sev-4-border); }
.sev-btn[data-sev="1"].active { background: var(--ohm-sev-1); color: oklch(0.98 0.005 255); border-color: var(--ohm-sev-1); }
.sev-btn[data-sev="2"].active { background: var(--ohm-sev-2); color: oklch(0.20 0.020 90); border-color: var(--ohm-sev-2); }
.sev-btn[data-sev="3"].active { background: var(--ohm-sev-3); color: oklch(0.98 0.005 55); border-color: var(--ohm-sev-3); }
.sev-btn[data-sev="4"].active { background: var(--ohm-sev-4); color: oklch(0.98 0.005 27); border-color: var(--ohm-sev-4); }
.sev-btn:hover { transform: scale(1.12); }
.sev-btn:focus-visible { outline: 2px solid var(--ohm-accent); outline-offset: 2px; }
.sev-current-text {
font-size: 12px; font-weight: 600; margin-left: 4px;
transition: color 0.15s;
}
.annotation-sev-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
font-size: 10px; font-weight: 700; color: #fff;
flex-shrink: 0; margin-right: 4px;
}
/* ── Ticketing Overlay ─────────────────────────────────── */
.ticketing-overlay {
position: fixed; inset: 0;
background: rgba(8, 10, 24, 0.92);
z-index: 90000;
display: flex; align-items: stretch; justify-content: flex-end;
}
.ticketing-overlay.hidden { display: none; }
.ticketing-panel {
/* Pleine largeur d'écran — la grille interne profite de tout l'espace. */
width: 100vw;
height: 100vh;
background: var(--ohm-bg);
display: flex; flex-direction: column;
/* impeccable R5 polish : side-stripe violette remplacée par une ombre
interne très subtile qui marque la séparation sans le ban side-stripe. */
box-shadow: -4px 0 40px rgba(0,0,0,0.7),
inset 4px 0 0 rgba(240, 140, 0, 0.18);
overflow: hidden;
}
.ticketing-header-actions {
display: flex; align-items: center; gap: 10px;
}
.ticket-export-wrapper { position: relative; }
/* Bouton EXPORT — même pattern que IMPORT/EXPORT du header principal :
contour orange au repos, remplissage qui monte du bas vers le haut au survol. */
.ticket-export-btn {
background-color: transparent;
background-image: linear-gradient(to top, #F08C00 50%, transparent 50%);
background-size: 100% 200%;
background-position: 0% 0%;
border: 1.5px solid #F08C00;
color: #F08C00;
padding: 6px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background-position 0.35s ease, color 0.35s ease,
box-shadow 0.2s;
}
.ticket-export-btn:hover {
background-position: 0% 100%;
color: #0c1322;
box-shadow: 0 0 12px rgba(240, 140, 0, 0.35);
}
.ticket-export-dropdown {
position: absolute; top: calc(100% + 6px); left: 0;
background: var(--ohm-surface); border: 1px solid rgba(240,140,0,0.35);
border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 99999; min-width: 190px;
}
.ticket-export-dropdown.hidden { display: none; }
.ticket-export-item {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 10px 16px; background: none; border: none;
color: var(--ohm-fg-strong); font-size: 13px; cursor: pointer; text-align: left;
transition: background 0.15s;
}
.ticket-export-item:hover { background: rgba(240,140,0,0.12); color: #F08C00; }
#ticket-label-select {
background: var(--ohm-tint-1); border: 1px solid var(--ohm-border);
color: #fff; border-radius: 6px; padding: 5px 8px; font-size: 12px;
outline: none; max-width: 220px; cursor: pointer;
}
#ticket-label-select:focus { border-color: rgba(240,140,0,0.5); }
#ticket-label-select option { background: var(--ohm-surface); color: var(--ohm-text); }
.ticketing-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px;
background: var(--ohm-header-bg);
border-bottom: 2px solid rgba(240,140,0,0.35);
flex-shrink: 0;
}
/* Titre Inventaire — raccord visuel avec le bouton INVENTAIRE
du header principal (cadre rectangulaire vert, texte MAJUSCULE). */
.ticketing-title {
font-size: 12px;
font-weight: 700;
color: var(--ohm-success);
letter-spacing: 1px;
text-transform: uppercase;
padding: 7px 14px;
border: 1.5px solid var(--ohm-success);
border-radius: 4px;
background-color: transparent;
}
.ticketing-close-btn {
background: none; border: none; color: var(--ohm-fg-soft);
font-size: 24px; cursor: pointer; line-height: 1;
transition: color 0.2s;
}
.ticketing-close-btn:hover { color: #fff; }
.ticketing-filters {
display: flex; align-items: center; flex-wrap: wrap;
gap: 12px; padding: 12px 20px;
background: var(--ohm-bg-soft); border-bottom: 1px solid rgba(240,140,0,0.15);
flex-shrink: 0;
}
#ticket-label-select, #ticket-sort { display: none; }
.filter-group {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.filter-label {
font-size: 11px; color: var(--ohm-fg-faint);
text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
}
.sev-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sev-filter-btn {
padding: 4px 10px; border-radius: 14px; border: 1px solid var(--ohm-border);
background: var(--ohm-tint-1); color: var(--ohm-fg-soft);
font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
/* "Tout" = filtre neutre, garde l'accent OHM */
.sev-filter-btn[data-sev="all"].active,
.sev-filter-btn[data-sev="all"]:hover {
background: var(--ohm-accent-dim);
border-color: var(--ohm-accent);
color: var(--ohm-accent);
}
/* Filtres sévérité 1-4 — chaque bouton porte sa propre couleur,
l'utilisateur scanne le barème en un coup d'œil. */
.sev-filter-btn[data-sev="1"]:hover, .sev-filter-btn[data-sev="1"].active {
background: var(--ohm-sev-1-bg); border-color: var(--ohm-sev-1-border); color: var(--ohm-sev-1);
}
.sev-filter-btn[data-sev="2"]:hover, .sev-filter-btn[data-sev="2"].active {
background: var(--ohm-sev-2-bg); border-color: var(--ohm-sev-2-border); color: var(--ohm-sev-2);
}
.sev-filter-btn[data-sev="3"]:hover, .sev-filter-btn[data-sev="3"].active {
background: var(--ohm-sev-3-bg); border-color: var(--ohm-sev-3-border); color: var(--ohm-sev-3);
}
.sev-filter-btn[data-sev="4"]:hover, .sev-filter-btn[data-sev="4"].active {
background: var(--ohm-sev-4-bg); border-color: var(--ohm-sev-4-border); color: var(--ohm-sev-4);
}
.sev-filter-btn:focus-visible { outline: 2px solid var(--ohm-accent); outline-offset: 1px; }
#ticket-label-filter {
background: var(--ohm-tint-1); border: 1px solid var(--ohm-border);
color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 12px;
outline: none; width: 160px;
}
#ticket-label-filter:focus { border-color: rgba(240,140,0,0.5); }
#ticket-sort {
background: var(--ohm-tint-1); border: 1px solid var(--ohm-border);
color: #fff; border-radius: 6px; padding: 5px 8px; font-size: 12px; outline: none;
}
.ticket-stats {
margin-left: auto; font-size: 12px; font-weight: 600;
color: var(--ohm-accent-hi); background: var(--ohm-accent-dim);
border: 1px solid var(--ohm-accent); border-radius: 10px;
padding: 3px 12px; white-space: nowrap;
}
/* ── Filtres compacts du panel Inventaire ──────────────────
Dropdowns et barre de recherche harmonisés avec le reste du site
(cadres sombres, bordure subtile, focus violet). */
.inv-filter-group {
display: flex; align-items: center; gap: 6px;
}
.inv-filter-search { flex: 0 1 260px; min-width: 180px; }
.inv-select {
background: var(--ohm-tint-1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
outline: none;
cursor: pointer;
min-width: 200px;
max-width: 260px;
transition: border-color 0.2s, background 0.2s;
}
.inv-select:hover { background: var(--ohm-tint-2); }
.inv-select:focus { border-color: rgba(240, 140, 0, 0.55); }
.inv-select option { background: var(--ohm-surface); color: var(--ohm-text); }
.inv-search-input {
width: 100%;
background: var(--ohm-tint-1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 4px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.inv-search-input::placeholder { color: var(--ohm-fg-faint); }
.inv-search-input:focus {
border-color: rgba(240, 140, 0, 0.55);
background: var(--ohm-tint-2);
}
.ticketing-loading {
display: flex; align-items: center; justify-content: center;
gap: 12px; padding: 40px; color: var(--ohm-fg-soft); font-size: 14px;
}
.ticketing-loading.hidden { display: none; }
.ticketing-spinner {
width: 24px; height: 24px; border: 3px solid var(--ohm-accent-dim);
border-top-color: var(--ohm-accent); border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ticketing-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px; padding: 16px 20px;
overflow-y: auto; flex: 1;
}
@media (max-width: 1400px) { .ticketing-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .ticketing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 850px) { .ticketing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ticketing-grid { grid-template-columns: 1fr; } }
/* ── Inventaire : split view tableau / photos ─────────────────
Gauche = tableau de tous les composants avec leurs caractéristiques
(filtrable, scroll horizontal sur petits écrans).
Droite = panneau photos du composant cliqué (préchargeur sur 6 par 6).
Le split est resizable visuellement via flex-basis fixe (60/40). */
/* Wrap inventaire — tableau pleine largeur (modale photo gère l'aperçu) */
.inv-wrap {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* permet aux enfants overflow:auto de scroller */
overflow: hidden;
background: var(--ohm-tint-1);
}
.inv-table-scroll {
flex: 1;
overflow: auto;
min-width: 0; /* permet shrink + scroll horizontal interne */
}
.inv-table {
table-layout: fixed !important; /* largeurs fixes → ellipsis fiable + colonnes stables */
min-width: 100%; /* remplit le pane ; déborde + scroll si somme > pane */
border-collapse: separate;
border-spacing: 0;
font-size: 12.5px;
color: var(--ohm-fg-strong);
}
/* ── Largeurs des 16 colonnes (table-layout: fixed) ─────────────────────── */
.inv-table th:nth-child(1),
.inv-table td:nth-child(1) { width: 30px !important; max-width: 30px !important; } /* ● couleur */
.inv-table th:nth-child(2),
.inv-table td:nth-child(2) { width: 75px !important; max-width: 75px !important; } /* Site */
.inv-table th:nth-child(3),
.inv-table td:nth-child(3) { width: 65px !important; max-width: 65px !important; } /* Sous-groupe */
.inv-table th:nth-child(4),
.inv-table td:nth-child(4) { width: 80px !important; max-width: 80px !important; } /* ID */
.inv-table th:nth-child(5),
.inv-table td:nth-child(5) { width: 73px !important; max-width: 73px !important; } /* Composant */
.inv-table th:nth-child(6),
.inv-table td:nth-child(6) { width: 60px !important; max-width: 60px !important; } /* Photos */
.inv-table th:nth-child(7),
.inv-table td:nth-child(7) { width: 90px !important; max-width: 90px !important; } /* Date */
.inv-table th:nth-child(8),
.inv-table td:nth-child(8) { width: 65px !important; max-width: 65px !important; } /* Tilt */
.inv-table th:nth-child(9),
.inv-table td:nth-child(9) { width: 75px !important; max-width: 75px !important; } /* Azimuth */
.inv-table th:nth-child(10),
.inv-table td:nth-child(10) { width: 75px !important; max-width: 75px !important; } /* Altitude */
.inv-table th:nth-child(11),
.inv-table td:nth-child(11) { width: 75px !important; max-width: 75px !important; } /* Longueur */
.inv-table th:nth-child(12),
.inv-table td:nth-child(12) { width: 75px !important; max-width: 75px !important; } /* Largeur */
.inv-table th:nth-child(13),
.inv-table td:nth-child(13) { width: 82px !important; max-width: 82px !important; } /* Épaisseur */
.inv-table th:nth-child(14),
.inv-table td:nth-child(14) { width: 75px !important; max-width: 75px !important; } /* Diamètre */
.inv-table th:nth-child(15),
.inv-table td:nth-child(15) { width: 68px !important; max-width: 68px !important; } /* Qté DAF */
.inv-table th:nth-child(16),
.inv-table td:nth-child(16) { width: auto; } /* Observations — flexible */
.inv-table thead th {
position: sticky; top: 0;
background: var(--ohm-surface-2);
color: var(--ohm-fg-medium);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: left;
padding: 9px 8px;
border-bottom: 1px solid var(--ohm-accent-dim);
white-space: nowrap;
z-index: 2;
}
.inv-table thead th.sortable {
cursor: pointer;
user-select: none;
transition: background 0.12s, color 0.12s;
}
.inv-table thead th.sortable:hover {
background: rgba(241, 132, 31, 0.12);
color: var(--ohm-fg-strong);
}
.inv-table thead th.sort-asc,
.inv-table thead th.sort-desc {
color: #F1841F;
}
.inv-sort-icons {
display: inline-flex;
flex-direction: column;
line-height: 0.65;
font-size: 8px;
margin-left: 5px;
color: var(--ohm-fg-faint);
vertical-align: middle;
transition: color 0.12s;
}
.inv-sort-icons .asc,
.inv-sort-icons .desc {
display: block;
transition: color 0.12s;
}
.inv-table thead th.sort-asc .inv-sort-icons .asc { color: #F1841F; }
.inv-table thead th.sort-desc .inv-sort-icons .desc { color: #F1841F; }
.inv-table thead th.sortable:hover .inv-sort-icons { color: var(--ohm-fg-soft); }
.inv-table tbody tr {
cursor: pointer;
transition: background 0.12s;
border-bottom: 1px solid var(--ohm-border-soft);
}
.inv-table tbody tr:hover { background: rgba(241, 132, 31, 0.08); }
.inv-table tbody tr.selected {
background: rgba(241, 132, 31, 0.18) !important;
box-shadow: inset 4px 0 0 #F1841F;
}
.inv-table tbody td {
padding: 8px 8px;
vertical-align: middle;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
border-bottom: 1px solid var(--ohm-border-soft);
color: var(--ohm-text);
}
.inv-table .inv-cell-label {
font-weight: 600;
color: var(--ohm-text);
}
.inv-table .inv-cell-id {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 11px;
color: var(--ohm-fg-soft);
}
/* Cellule ID éditable : feedback visuel au hover (curseur + soulignement pointillé) */
.inv-table .inv-cell-id-editable {
cursor: text;
border-bottom: 1px dotted transparent;
transition: border-color 0.1s, color 0.1s;
}
.inv-table .inv-cell-id-editable:hover {
color: #F1841F;
border-bottom-color: rgba(241, 132, 31, 0.55);
}
/* Input d'édition inline du componentId */
.inv-cid-edit-input {
background: var(--ohm-surface);
border: 1px solid rgba(241, 132, 31, 0.6);
color: var(--ohm-text);
font-family: 'Consolas', 'Monaco', monospace;
font-size: 11px;
padding: 2px 5px;
border-radius: 3px;
width: 100%;
min-width: 180px;
box-sizing: border-box;
}
.inv-cid-edit-input:focus {
outline: none;
border-color: #F1841F;
background: var(--ohm-overlay-soft);
}
.inv-table .inv-cell-sev {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
}
/* Badge section (Aériens-radio, Aériens-transmission, Structure, etc.) */
.inv-table .inv-cell-section {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 600;
border: 1px solid;
white-space: nowrap;
letter-spacing: 0.02em;
}
.inv-table .inv-cell-num {
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--ohm-fg-medium);
}
.inv-table .inv-cell-3d {
background: rgba(241, 132, 31, 0.04);
}
.inv-table tbody tr.selected .inv-cell-3d {
background: rgba(241, 132, 31, 0.15);
}
.inv-table .inv-cell-color-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.inv-table .inv-empty-row td {
text-align: center;
padding: 40px 16px;
color: var(--ohm-fg-faint);
font-style: italic;
}
/* ── Preview au survol (r39 — hover image preview) ────────────────────── */
/* Petite carte flottante qui suit le curseur quand on survole une ligne.
Indépendante de la modale (qui s'ouvre au clic). */
.inv-hover-preview {
position: fixed;
z-index: 9000;
pointer-events: none;
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,0.30);
padding: 6px;
max-width: 340px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.12s, transform 0.12s;
}
.inv-hover-preview.visible {
opacity: 1;
transform: translateY(0);
}
.inv-hover-preview.hidden { display: none; }
.inv-hover-preview-img-wrap {
position: relative;
width: 320px;
height: 200px;
border-radius: 5px;
overflow: hidden;
background: var(--ohm-bg-soft);
display: flex;
align-items: center;
justify-content: center;
}
.inv-hover-preview-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
background: #000;
}
.inv-hover-preview-rect {
position: absolute;
border: 2px solid #F1841F;
pointer-events: none;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.inv-hover-preview-caption {
margin-top: 5px;
padding: 0 4px;
font-size: 11px;
color: var(--ohm-fg-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inv-hover-preview-empty {
width: 320px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ohm-fg-faint);
font-style: italic;
font-size: 12px;
}
/* ── Modale photo (s'ouvre au clic sur une ligne du tableau) ──────────── */
.inv-photo-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.inv-photo-modal.hidden { display: none; }
.inv-photo-modal-backdrop {
position: absolute;
inset: 0;
background: var(--ohm-overlay-hard);
backdrop-filter: blur(2px);
cursor: pointer;
}
.inv-photo-modal-shell {
position: relative;
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
max-width: min(2400px, 96vw); /* doublée (r40) */
max-height: 96vh;
width: auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
.inv-photo-modal-close {
position: absolute;
top: 10px;
right: 12px;
z-index: 2;
background: var(--ohm-surface-2);
border: 1px solid var(--ohm-border);
color: var(--ohm-fg-strong);
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
}
.inv-photo-modal-close:hover {
background: rgba(241, 132, 31, 0.18);
color: #F1841F;
}
.inv-photo-modal-header {
padding: 14px 56px 12px 18px;
border-bottom: 1px solid var(--ohm-border-soft);
}
.inv-photo-modal-title {
font-size: 16px;
font-weight: 700;
color: var(--ohm-fg-strong);
margin: 0 0 4px 0;
}
.inv-photo-modal-title .inv-photo-modal-id {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
font-weight: 500;
color: var(--ohm-fg-soft);
margin-left: 8px;
}
.inv-photo-modal-subtitle {
font-size: 12px;
color: var(--ohm-fg-soft);
}
.inv-photo-modal-body {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--ohm-bg-soft);
padding: 14px;
overflow: auto;
}
.inv-photo-modal-img-wrap {
position: relative;
max-width: 100%;
max-height: 82vh; /* doublée — laisse place au header/footer (r40) */
display: inline-block;
}
.inv-photo-modal-img {
display: block;
max-width: 100%;
max-height: 82vh;
width: auto;
height: auto;
border-radius: 6px;
background: #000;
object-fit: contain;
}
.inv-photo-modal-rect {
position: absolute;
border: 2px solid #F1841F;
pointer-events: none;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.inv-photo-modal-caption {
padding: 8px 18px;
font-size: 12px;
color: var(--ohm-fg-soft);
background: var(--ohm-bg-soft);
border-top: 1px solid var(--ohm-border-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inv-photo-modal-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 10px 18px 14px;
border-top: 1px solid var(--ohm-border-soft);
background: var(--ohm-surface);
user-select: none;
}
.inv-photo-modal-nav-btn {
background: rgba(241, 132, 31, 0.15);
color: #F1841F;
border: 1px solid rgba(241, 132, 31, 0.45);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, transform 0.12s, border-color 0.12s;
font-family: inherit;
}
.inv-photo-modal-nav-btn:hover {
background: rgba(241, 132, 31, 0.30);
border-color: #F1841F;
transform: scale(1.06);
}
.inv-photo-modal-nav-btn:active { transform: scale(0.95); }
.inv-photo-modal-nav-btn:disabled {
background: var(--ohm-tint-1);
color: var(--ohm-fg-faint);
border-color: var(--ohm-border-soft);
cursor: not-allowed;
transform: none;
}
.inv-photo-modal-counter {
font-size: 13px;
font-weight: 600;
color: var(--ohm-fg-strong);
font-variant-numeric: tabular-nums;
min-width: 80px;
text-align: center;
letter-spacing: 0.02em;
}
.inv-photo-modal-photo-nav {
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
border-left: 1px solid var(--ohm-border-soft);
border-right: 1px solid var(--ohm-border-soft);
}
.inv-photo-modal-photo-nav-btn {
background: transparent;
color: var(--ohm-fg-medium);
border: 1px solid var(--ohm-border);
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
}
.inv-photo-modal-photo-nav-btn:hover {
background: var(--ohm-tint-2);
color: var(--ohm-fg-strong);
}
.inv-photo-modal-photo-nav-btn:disabled {
color: var(--ohm-fg-faint);
cursor: not-allowed;
}
.inv-photo-modal-photo-counter {
font-size: 11.5px;
color: var(--ohm-fg-soft);
min-width: 32px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* ── Bouton "Colonnes" + dropdown sélecteur ────────────────────────────── */
.inv-columns-wrap { position: relative; }
.inv-columns-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--ohm-tint-1);
border: 1px solid var(--ohm-border);
color: var(--ohm-fg-medium);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.inv-columns-btn:hover {
background: var(--ohm-tint-2);
color: var(--ohm-fg-strong);
border-color: rgba(241, 132, 31, 0.45);
}
.inv-columns-btn.is-open {
background: rgba(241, 132, 31, 0.12);
color: #F1841F;
border-color: rgba(241, 132, 31, 0.45);
}
.inv-columns-btn-icon {
font-size: 14px;
line-height: 1;
}
.inv-columns-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 100;
min-width: 220px;
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
padding: 10px 6px;
max-height: 360px;
overflow-y: auto;
}
.inv-columns-dropdown.hidden { display: none; }
.inv-columns-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 10px 6px;
margin-bottom: 4px;
border-bottom: 1px solid var(--ohm-border-soft);
}
.inv-columns-dropdown-title {
font-size: 11px;
font-weight: 600;
color: var(--ohm-fg-soft);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.inv-columns-dropdown-reset {
background: transparent;
border: none;
color: var(--ohm-fg-medium);
font-size: 11px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: background 0.12s, color 0.12s;
}
.inv-columns-dropdown-reset:hover {
background: var(--ohm-tint-2);
color: #F1841F;
}
.inv-columns-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
transition: background 0.10s;
user-select: none;
}
.inv-columns-option:hover { background: var(--ohm-tint-2); }
.inv-columns-option input[type="checkbox"] {
accent-color: #F1841F;
cursor: pointer;
width: 14px;
height: 14px;
}
.inv-columns-option-label {
font-size: 12.5px;
color: var(--ohm-fg-strong);
flex: 1;
}
/* Colonnes masquées par sélecteur — class .inv-col-hide-N appliquée sur .inv-table */
.inv-table.inv-col-hide-1 th:nth-child(1), .inv-table.inv-col-hide-1 td:nth-child(1) { display: none !important; }
.inv-table.inv-col-hide-2 th:nth-child(2), .inv-table.inv-col-hide-2 td:nth-child(2) { display: none !important; }
.inv-table.inv-col-hide-3 th:nth-child(3), .inv-table.inv-col-hide-3 td:nth-child(3) { display: none !important; }
.inv-table.inv-col-hide-4 th:nth-child(4), .inv-table.inv-col-hide-4 td:nth-child(4) { display: none !important; }
.inv-table.inv-col-hide-5 th:nth-child(5), .inv-table.inv-col-hide-5 td:nth-child(5) { display: none !important; }
.inv-table.inv-col-hide-6 th:nth-child(6), .inv-table.inv-col-hide-6 td:nth-child(6) { display: none !important; }
.inv-table.inv-col-hide-7 th:nth-child(7), .inv-table.inv-col-hide-7 td:nth-child(7) { display: none !important; }
.inv-table.inv-col-hide-8 th:nth-child(8), .inv-table.inv-col-hide-8 td:nth-child(8) { display: none !important; }
.inv-table.inv-col-hide-9 th:nth-child(9), .inv-table.inv-col-hide-9 td:nth-child(9) { display: none !important; }
.inv-table.inv-col-hide-10 th:nth-child(10), .inv-table.inv-col-hide-10 td:nth-child(10) { display: none !important; }
.inv-table.inv-col-hide-11 th:nth-child(11), .inv-table.inv-col-hide-11 td:nth-child(11) { display: none !important; }
.inv-table.inv-col-hide-12 th:nth-child(12), .inv-table.inv-col-hide-12 td:nth-child(12) { display: none !important; }
.inv-table.inv-col-hide-13 th:nth-child(13), .inv-table.inv-col-hide-13 td:nth-child(13) { display: none !important; }
.inv-table.inv-col-hide-14 th:nth-child(14), .inv-table.inv-col-hide-14 td:nth-child(14) { display: none !important; }
.inv-table.inv-col-hide-15 th:nth-child(15), .inv-table.inv-col-hide-15 td:nth-child(15) { display: none !important; }
.inv-table.inv-col-hide-16 th:nth-child(16), .inv-table.inv-col-hide-16 td:nth-child(16) { display: none !important; }
.ticket-empty {
grid-column: 1/-1; text-align: center;
color: var(--ohm-fg-faint); padding: 60px 20px; font-size: 14px;
}
.ticket-card {
position: relative;
background: var(--ohm-surface); border-radius: 10px; overflow: hidden;
border: 1px solid var(--ohm-border-soft);
transition: transform 0.15s, box-shadow 0.15s;
display: flex; flex-direction: column;
}
.ticket-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.ticket-card.sev-4 { border-color: rgba(239,68,68,0.35); }
.ticket-card.sev-3 { border-color: rgba(249,115,22,0.35); }
.ticket-card.sev-2 { border-color: rgba(234,179,8,0.35); }
.ticket-card.sev-1 { border-color: rgba(59,130,246,0.35); }
/* Wrapper image : technique padding-bottom pour forcer un aspect-ratio
fiable même dans un parent flex/grid (où aspect-ratio CSS peut être
ignoré). 267/400 = 66.75% — la hauteur est calculée à partir de la
largeur du wrapper, qui elle-même hérite de la cellule de grille. */
.ticket-card-img-wrap {
position: relative;
background: var(--ohm-bg);
width: 100%;
height: 0;
padding-bottom: 66.75%;
overflow: hidden;
}
.ticket-canvas, .inv-canvas {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: block;
}
/* Image native (remplace le rendu canvas qui restait noir sous Firefox).
object-fit: cover pour préserver l'esthétique grille (crop léger). */
.inv-img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Rectangle d'annotation en overlay (positionné en % de l'image source). */
.inv-annot-rect {
position: absolute;
border: 2px solid;
box-sizing: border-box;
pointer-events: none;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* Info-bulle composant : overlay translucide qui couvre la card au survol.
Affiche les caractéristiques DAF + métadonnées (ID, site, état, etc.). */
.inv-tooltip {
position: absolute;
inset: 0;
background: rgba(14, 17, 34, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 14px 16px;
color: #fff;
font-size: 12px;
line-height: 1.55;
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
z-index: 5;
pointer-events: none;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.ticket-card:hover .inv-tooltip,
.ticket-card:focus-within .inv-tooltip {
opacity: 1;
visibility: visible;
}
.inv-tooltip-title {
font-size: 13px;
font-weight: 700;
color: #fff;
letter-spacing: 0.5px;
padding: 4px 10px 4px 14px;
margin-bottom: 6px;
/* impeccable R5 polish : side-stripe colorée remplacée par radius
asymétrique (pill côté gauche) + leading bullet en pseudo-element. */
border-radius: 12px 4px 4px 12px;
background: var(--ohm-tint-1);
position: relative;
align-self: flex-start;
max-width: 100%;
word-break: break-word;
}
.inv-tooltip-row {
display: flex;
gap: 8px;
align-items: flex-start;
}
.inv-tooltip-key {
color: var(--ohm-fg-faint);
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.6px;
min-width: 90px;
flex-shrink: 0;
padding-top: 2px;
}
.inv-tooltip-val {
color: rgba(255, 255, 255, 0.95);
flex: 1;
word-break: break-word;
}
.inv-tooltip-empty {
color: var(--ohm-fg-faint);
font-style: italic;
text-align: center;
padding: 20px 0;
}
/* En-tête section "Mesures 3D" dans le tooltip inventaire */
.inv-tooltip-section {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(241, 132, 31, 0.30);
color: #fbcb9d;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.inv-tooltip-row-3d .inv-tooltip-key {
color: rgba(241, 132, 31, 0.65);
}
.inv-tooltip-row-3d .inv-tooltip-val {
color: #fbcb9d;
font-family: 'Consolas','Menlo',monospace;
font-variant-numeric: tabular-nums;
}
.ticket-img-loading {
position: absolute; color: var(--ohm-fg-faint); font-size: 12px;
}
.ticket-sev-badge {
position: absolute; top: 8px; right: 8px;
padding: 3px 10px; border-radius: 12px;
font-size: 10px; font-weight: 700; color: #fff;
letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ticket-card-body {
padding: 10px 14px; display: flex; flex-direction: column; gap: 5px;
}
.ticket-label-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-label-badge {
display: inline-flex; align-items: center; padding: 3px 9px;
border-radius: 12px; font-size: 11px; font-weight: 600;
}
.ticket-filename {
font-family: monospace; font-size: 10px; color: rgba(255,255,255,0.35);
word-break: break-all;
}
.ticket-meta { font-size: 10px; color: var(--ohm-fg-faint); }
.ticket-obs { font-size: 11px; color: var(--ohm-fg-soft); }
.ticket-actions { font-size: 11px; color: #ffc84a; }
/* ── Pagination grille ─────────────────────────────────── */
.grid-pagination {
display: flex; align-items: center; justify-content: center;
gap: 12px; padding: 10px 20px; flex-shrink: 0;
border-top: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.15);
}
.grid-pagination button {
background: var(--ohm-tint-2); color: var(--ohm-fg-medium);
border: 1px solid var(--ohm-border); border-radius: 6px;
padding: 6px 16px; font-size: 13px; cursor: pointer;
transition: background 0.15s;
}
.grid-pagination button:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
.grid-pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
.grid-pagination-info { font-size: 12px; color: var(--ohm-fg-faint); min-width: 90px; text-align: center; }
/* ── Onglets Identification ────────────────────────────── */
.ident-tabs {
display: flex; gap: 4px;
padding: 0 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.2);
flex-shrink: 0;
}
.ident-tab {
background: none; border: none; border-bottom: 2px solid transparent;
color: var(--ohm-fg-faint); font-size: 13px; font-weight: 600;
padding: 10px 18px; cursor: pointer; margin-bottom: -1px;
transition: color 0.2s, border-color 0.2s;
letter-spacing: 0.3px;
}
.ident-tab:hover { color: var(--ohm-fg-medium); }
.ident-tab.active { color: var(--ohm-accent); border-bottom-color: var(--ohm-accent); }
.ident-tab-content { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.ident-tab-content.active { display: flex; }
/* ── Composantes GSM ────────────────────────────────────── */
.composantes-toolbar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.composantes-folder-row {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ohm-fg-medium);
}
#composantes-folder-select {
background: var(--ohm-tint-2); border: 1px solid var(--ohm-border);
color: #eee; border-radius: 6px; padding: 5px 10px; font-size: 13px;
min-width: 220px;
}
#composantes-folder-select:focus { border-color: rgba(240,140,0,0.5); outline: none; }
#composantes-folder-select option { background: var(--ohm-surface); }
.composantes-save-btn {
background: var(--ohm-accent-dim); border: 1px solid var(--ohm-accent);
color: var(--ohm-accent); font-size: 12px; font-weight: 700; padding: 6px 16px;
border-radius: 7px; cursor: pointer; transition: background 0.2s;
margin-left: auto;
}
.composantes-save-btn:hover:not(:disabled) { background: rgba(240,140,0,0.35); }
.composantes-save-btn:disabled { opacity: 0.4; cursor: default; }
.composantes-form {
flex: 1; overflow-y: auto; padding: 16px 20px; display: flex;
flex-direction: column; gap: 18px;
}
.composantes-placeholder {
color: rgba(255,255,255,0.35); font-size: 13px; text-align: center; margin-top: 40px;
}
.comp-category { background: rgba(255,255,255,0.03); border-radius: 10px; overflow: hidden; }
.comp-cat-header {
font-size: 13px; font-weight: 700; color: var(--ohm-accent-hi);
padding: 9px 14px; background: var(--ohm-accent-dim);
border-bottom: 1px solid var(--ohm-accent);
}
.comp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.comp-table th {
padding: 6px 10px; text-align: left; font-size: 11px; font-weight: 600;
color: var(--ohm-fg-faint); border-bottom: 1px solid rgba(255,255,255,0.07);
background: rgba(0,0,0,0.15);
}
.comp-table .th-label { width: 30%; }
.comp-table .th-present { width: 14%; }
.comp-table .th-etat { width: 22%; }
.comp-table .th-obs { width: 34%; }
.comp-row td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.comp-row:last-child td { border-bottom: none; }
.comp-row:hover td { background: rgba(255,255,255,0.02); }
.comp-label { color: var(--ohm-fg-medium); font-size: 12px; }
.comp-present, .comp-etat { display: flex; gap: 8px; flex-wrap: wrap; }
.comp-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
border: 1px solid var(--ohm-border); color: var(--ohm-fg-soft);
transition: background 0.15s; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.comp-radio input[type="radio"] { display: none; }
.comp-radio.radio-oui:has(input:checked) { background: rgba(34,197,94,0.2); border-color: #22c55e; color: #4ade80; }
.comp-radio.radio-non:has(input:checked) { background: rgba(239,68,68,0.2); border-color: #ef4444; color: #f87171; }
.comp-radio.radio-bon:has(input:checked) { background: rgba(34,197,94,0.18); border-color: #22c55e; color: #4ade80; }
.comp-radio.radio-degrade:has(input:checked) { background: rgba(245,158,11,0.2); border-color: #f59e0b; color: #fbbf24; }
.comp-radio.radio-hs:has(input:checked) { background: rgba(239,68,68,0.2); border-color: #ef4444; color: #f87171; }
.comp-radio:hover { background: var(--ohm-tint-2); }
.comp-obs-input {
width: 100%; background: var(--ohm-tint-1); border: 1px solid var(--ohm-border);
border-radius: 5px; color: #eee; font-size: 11px; padding: 4px 8px;
box-sizing: border-box;
}
.comp-obs-input:focus { border-color: rgba(240,140,0,0.5); outline: none; }
/* ── Bouton Export dans le header ─────────────────────── */
.export-btn-wrapper {
position: relative;
flex-shrink: 0;
margin-right: 8px;
}
/* Bouton IMPORTER / EXPORTER — même pattern que Inventaire :
contour orange au repos, remplissage qui monte du bas vers le haut au survol. */
.export-main-btn {
background-color: transparent;
background-image: linear-gradient(to top, #F08C00 50%, transparent 50%);
background-size: 100% 200%;
background-position: 0% 0%;
border: 1.5px solid #F08C00;
color: #F08C00;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
padding: 7px 14px;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
line-height: 1;
transition: background-position 0.35s ease, color 0.35s ease,
box-shadow 0.2s;
}
.export-main-btn:hover {
background-position: 0% 100%;
color: #0c1322;
box-shadow: 0 0 12px rgba(240, 140, 0, 0.35);
}
.export-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
background: var(--ohm-surface);
border: 1px solid rgba(240, 140, 0, 0.35);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
z-index: 50000;
min-width: 160px;
}
.export-dropdown.hidden { display: none; }
.export-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 16px;
background: none;
border: none;
color: #ccc;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: background 0.15s, color 0.15s;
letter-spacing: 0.5px;
}
.export-dropdown-item:hover {
background: rgba(240, 140, 0, 0.12);
color: #F08C00;
}
.export-dropdown-item + .export-dropdown-item {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.export-dropdown-item .export-icon {
font-size: 16px;
width: 20px;
text-align: center;
}
.export-dropdown hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin: 4px 0;
}
.export-3d-status {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(56, 189, 248, 0.07);
border-bottom: 1px solid rgba(56, 189, 248, 0.15);
font-size: 12px;
color: rgba(56, 189, 248, 0.85);
min-width: 0;
}
.export-3d-status .e3d-icon { font-size: 14px; flex-shrink: 0; }
.export-3d-status #e3d-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-3d-status #e3d-sync-btn {
flex-shrink: 0;
background: rgba(56, 189, 248, 0.15);
border: 1px solid rgba(56, 189, 248, 0.4);
color: #38bdf8;
border-radius: 4px;
padding: 2px 8px;
font-size: 11px;
cursor: pointer;
transition: background 0.15s;
}
.export-3d-status #e3d-sync-btn:hover { background: rgba(56, 189, 248, 0.28); }
.export-3d-status.synced { color: rgba(34, 197, 94, 0.9); background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.18); }
.export-3d-status.synced #e3d-sync-btn { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.1); }
.export-3d-status.none { color: rgba(255, 255, 255, 0.35); background: transparent; }
#import-annot-input {
display: none;
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
#image-panel {
width: 100%;
min-width: unset;
}
.header-title {
font-size: 16px;
}
.header-center {
display: none;
}
.drop-overlay-content {
padding: 40px 30px;
}
.placement-info {
font-size: 13px;
padding: 10px 16px;
}
}
/* ── Bouton Tour 360° dans le header ─────────────────────── */
.tour360-btn {
background: rgba(99, 179, 237, 0.15);
border: 1px solid rgba(99, 179, 237, 0.45);
color: #90cdf4;
padding: 7px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.5px;
transition: background 0.2s, box-shadow 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.tour360-btn:hover {
background: rgba(99, 179, 237, 0.28);
box-shadow: 0 0 10px rgba(99, 179, 237, 0.25);
}
/* ── Modal Tour 360° ────────────────────────────────────── */
.tour360-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 200001;
display: flex;
align-items: center;
justify-content: center;
}
.tour360-overlay.hidden {
display: none;
}
.tour360-modal {
width: 90vw;
height: 85vh;
background: var(--ohm-surface);
border-radius: 12px;
border: 1px solid rgba(99, 179, 237, 0.3);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Mode split tour 360 + nuage de points retiré 2026-05-26 :
le tour 360 s'ouvre désormais uniquement en overlay plein écran. */
.tour360-modal-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: rgba(99, 179, 237, 0.08);
border-bottom: 1px solid rgba(99, 179, 237, 0.2);
font-size: 14px;
font-weight: 600;
color: #90cdf4;
letter-spacing: 1px;
flex-shrink: 0;
}
/* Titre central "TOUR 360°" — positionné absolument pour ne pas
être influencé par la largeur des zones gauche/droite. */
.tour360-header-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
color: #FFFFFF;
text-transform: uppercase;
pointer-events: none;
white-space: nowrap;
}
.tour360-header-right {
display: flex;
align-items: center;
gap: 10px;
}
.tour360-close-btn {
background: var(--ohm-tint-3);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
font-size: 22px;
width: 34px;
height: 34px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.tour360-close-btn:hover {
background: rgba(99, 179, 237, 0.3);
border-color: rgba(99, 179, 237, 0.5);
}
.tour360-fs-btn {
background: var(--ohm-tint-3);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
font-size: 16px;
width: 34px;
height: 34px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
margin-right: 6px;
}
.tour360-fs-btn:hover {
background: rgba(99, 179, 237, 0.3);
border-color: rgba(99, 179, 237, 0.5);
}
.tour360-fs-btn.hidden {
display: none;
}
.tour360-folder-input {
display: none;
}
.tour360-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.tour360-back-btn {
background: rgba(99, 179, 237, 0.12);
border: 1px solid rgba(99, 179, 237, 0.35);
color: #90cdf4;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.tour360-back-btn:hover {
background: rgba(99, 179, 237, 0.28);
}
.tour360-gallery {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 20px;
overflow-y: auto;
align-content: start;
}
.tour360-gallery.hidden {
display: none;
}
.tour360-viewer-wrap {
flex: 1;
position: relative;
display: flex;
overflow: hidden;
}
.tour360-viewer-wrap.hidden {
display: none;
}
.tour360-viewer-wrap iframe {
flex: 1;
width: 100%;
border: none;
}
.tour360-fs-hint {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 8px;
color: white;
font-size: 13px;
padding: 8px 14px;
cursor: pointer;
transition: opacity 0.3s, background 0.2s;
pointer-events: auto;
-webkit-user-select: none;
user-select: none;
}
.tour360-fs-hint:hover {
background: rgba(99, 179, 237, 0.5);
border-color: rgba(99, 179, 237, 0.7);
}
.tour360-viewer-wrap:hover .tour360-fs-hint {
opacity: 1;
}
.tour360-viewer-wrap .tour360-fs-hint {
opacity: 0.5;
}
.tour360-link-card {
background: var(--ohm-tint-1);
border: 1px solid rgba(99,179,237,0.25);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 200px;
}
.tour360-link-title {
font-size: 12px;
font-weight: 600;
color: #90cdf4;
letter-spacing: 0.5px;
}
.tour360-link-input {
background: rgba(0,0,0,0.3);
border: 1px solid var(--ohm-border);
border-radius: 6px;
color: white;
font-size: 12px;
padding: 6px 10px;
outline: none;
width: 100%;
}
.tour360-link-input:focus {
border-color: rgba(99,179,237,0.6);
}
.tour360-link-btn {
background: rgba(99,179,237,0.2);
border: 1px solid rgba(99,179,237,0.4);
border-radius: 6px;
color: #90cdf4;
font-size: 12px;
font-weight: 600;
padding: 6px 0;
cursor: pointer;
transition: background 0.2s;
}
.tour360-link-btn:hover {
background: rgba(99,179,237,0.35);
}
.tour360-link-hint {
font-size: 10px;
color: rgba(255,255,255,0.35);
}
.tour360-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--ohm-fg-faint);
font-size: 14px;
padding: 24px 0 12px;
line-height: 1.6;
}
.tour360-loading {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
color: var(--ohm-fg-faint);
font-size: 14px;
}
.tour360-card {
background: var(--ohm-tint-1);
border: 1px solid rgba(99, 179, 237, 0.2);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
}
.tour360-card:hover {
border-color: rgba(99, 179, 237, 0.6);
background: rgba(99, 179, 237, 0.1);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(99, 179, 237, 0.2);
}
.tour360-card-thumb {
width: 100%;
height: 140px;
overflow: hidden;
position: relative;
}
.tour360-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tour360-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
background: rgba(99, 179, 237, 0.08);
color: #90cdf4;
}
.tour360-card-name {
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
color: #e2e8f0;
text-align: center;
letter-spacing: 0.3px;
}
/* iframe styles now handled by .tour360-viewer-wrap iframe */
.tour360-modal.tour-fullscreen {
width: 100vw;
height: 100vh;
border-radius: 0;
border: none;
max-width: 100vw;
max-height: 100vh;
}
/* Fullscreen overlay styles */
.tour360-overlay:fullscreen,
.tour360-overlay:-webkit-full-screen {
background: #000;
display: flex;
align-items: stretch;
justify-content: stretch;
}
/* ── Drop zone ──────────────────────────────────────────── */
.tour360-drop-zone {
border: 2px dashed rgba(99, 179, 237, 0.35);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px 12px;
cursor: pointer;
transition: all 0.2s;
background: rgba(99, 179, 237, 0.04);
min-height: 140px;
}
.tour360-drop-zone.drag-over {
border-color: #90cdf4;
background: rgba(99, 179, 237, 0.14);
transform: scale(1.02);
}
.tour360-drop-icon {
font-size: 32px;
}
.tour360-drop-text {
font-size: 13px;
font-weight: 600;
color: #90cdf4;
}
.tour360-drop-hint {
font-size: 11px;
color: rgba(255,255,255,0.35);
text-align: center;
}
/* ── Card footer (nom + supprimer) ─────────────────────── */
.tour360-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
gap: 6px;
}
.tour360-card-delete {
background: none;
border: none;
color: rgba(239, 68, 68, 0.6);
font-size: 15px;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
flex-shrink: 0;
transition: color 0.15s, background 0.15s;
}
.tour360-card-delete:hover {
color: #f87171;
background: rgba(239, 68, 68, 0.12);
}
/* ── Progress bar upload ────────────────────────────────── */
/* Masquée par défaut sur le viewer (la règle .hidden manquait, ce qui
laissait apparaître une barre 0% permanente). Réaffichée par
startTour360Upload() pendant l'import d'un dossier 360°. */
.tour360-progress-wrap.hidden { display: none !important; }
.tour360-progress-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: rgba(99, 179, 237, 0.06);
border-bottom: 1px solid rgba(99, 179, 237, 0.15);
flex-shrink: 0;
}
.tour360-progress-track {
flex: 1;
height: 6px;
background: var(--ohm-tint-3);
border-radius: 3px;
overflow: hidden;
}
.tour360-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #63b3ed, #90cdf4);
border-radius: 3px;
transition: width 0.2s;
}
.tour360-progress-text {
font-size: 11px;
color: #90cdf4;
white-space: nowrap;
min-width: 110px;
text-align: right;
}
/* ── Dialog nom du tour ─────────────────────────────────── */
.tour360-name-dialog {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 200002;
display: none;
align-items: center;
justify-content: center;
}
.tour360-name-dialog.visible {
display: flex;
}
.tour360-name-box {
background: var(--ohm-surface);
border: 1px solid rgba(99, 179, 237, 0.4);
border-radius: 12px;
padding: 24px 28px;
width: 340px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.tour360-name-title {
font-size: 15px;
font-weight: 700;
color: #90cdf4;
}
.tour360-name-input {
background: var(--ohm-tint-2);
border: 1px solid rgba(99, 179, 237, 0.35);
border-radius: 7px;
color: #fff;
font-size: 14px;
padding: 8px 12px;
outline: none;
transition: border-color 0.2s;
}
.tour360-name-input:focus {
border-color: #90cdf4;
}
.tour360-name-hint {
font-size: 11px;
color: rgba(255,255,255,0.35);
margin-top: -6px;
}
.tour360-name-hint-count {
font-size: 12px;
color: #90cdf4;
font-weight: 500;
margin-top: -4px;
}
.tour360-name-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.tour360-name-cancel-btn {
background: var(--ohm-tint-2);
border: 1px solid var(--ohm-border);
color: var(--ohm-fg-soft);
padding: 7px 16px;
border-radius: 7px;
font-size: 13px;
cursor: pointer;
transition: background 0.2s;
}
.tour360-name-cancel-btn:hover {
background: var(--ohm-tint-3);
}
.tour360-name-confirm-btn {
background: rgba(99, 179, 237, 0.2);
border: 1px solid rgba(99, 179, 237, 0.5);
color: #90cdf4;
padding: 7px 16px;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.tour360-name-confirm-btn:hover {
background: rgba(99, 179, 237, 0.35);
}
/* ============================================================
SITES — bouton header
============================================================ */
.sites-header-btn {
background: var(--ohm-success-bg);
border: 1px solid var(--ohm-success-border);
color: var(--ohm-success);
padding: 6px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.sites-header-btn:hover {
background: var(--ohm-success-bg);
filter: brightness(1.15);
}
/* ============================================================
SITES — icône marqueur carte
============================================================ */
.site-point-icon {
background: none;
border: none;
}
/* Site marker individuel = pin emoji 📍 (R7 revert). Le cluster
utilise l antenne SVG, on garde le pin pour les markers seuls. */
.site-marker-inner {
font-size: 26px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
cursor: pointer;
transition: transform 0.15s, filter 0.15s;
}
.site-point-icon:hover .site-marker-inner {
transform: scale(1.15);
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
/* ── Popup site enrichi (R7+) ────────────────────────────
Reprend la structure de l'entete du rapport HTML : nom, projet
(cloud / position / refZ), 4 cards GSM/FH/BLR/RRU, ligne totaux,
actions Modifier / Supprimer. */
.site-popup { font-size: 13px; min-width: 260px; max-width: 320px; }
.site-popup-title {
display: block;
font-size: 15px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ohm-fg-strong);
margin-bottom: 6px;
line-height: 1.2;
}
.site-popup-desc {
color: var(--ohm-fg-medium);
font-size: 12px;
margin-bottom: 4px;
line-height: 1.4;
}
.site-popup-coords {
font-family: 'Consolas', 'Menlo', monospace;
font-size: 11px;
color: var(--ohm-accent);
margin-bottom: 10px;
letter-spacing: -0.02em;
}
/* Bloc projet (Type de nuage, Position, RefZ) — table simple key/value */
.site-popup-project {
background: var(--ohm-tint-1);
border: 1px solid var(--ohm-border-soft);
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 10px;
font-size: 11.5px;
line-height: 1.5;
}
.site-popup-project .spp-row {
display: flex;
justify-content: space-between;
gap: 12px;
}
.site-popup-project .spp-row + .spp-row { margin-top: 2px; }
.site-popup-project .spp-k {
color: var(--ohm-fg-soft);
flex-shrink: 0;
}
.site-popup-project .spp-v {
color: var(--ohm-accent);
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Hero composants — total dominant + breakdown inline.
Meme hierarchie visuelle que l'entete rapport HTML : grand chiffre,
label en uppercase, breakdown GSM/FH/BLR/RRU en sous-info. */
.site-popup-hero {
background: var(--ohm-tint-1);
border: 1px solid var(--ohm-border-soft);
border-radius: 8px;
padding: 14px 12px 12px;
margin-bottom: 8px;
text-align: center;
}
.site-popup-hero .sph-num {
font-size: 42px;
font-weight: 800;
color: var(--ohm-accent);
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.site-popup-hero .sph-lbl {
margin-top: 3px;
color: var(--ohm-fg-strong);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
}
.site-popup-hero .sph-breakdown {
margin-top: 10px;
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 2px;
font-size: 11px;
color: var(--ohm-fg-soft);
line-height: 1.6;
}
.site-popup-hero .spb-cell {
display: inline-flex; align-items: baseline; gap: 3px;
padding: 0 3px;
}
.site-popup-hero .spb-n {
font-weight: 700;
color: var(--ohm-accent);
font-size: 13px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.site-popup-hero .spb-sep {
color: var(--ohm-fg-faint);
padding: 0 1px;
}
/* Ligne totaux (composants • images • mesures 3D) */
.site-popup-tot {
font-size: 11px;
color: var(--ohm-fg-soft);
text-align: center;
margin-bottom: 10px;
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
/* Etat vide (site sans annotation) */
.site-popup-empty {
font-size: 12px;
color: var(--ohm-fg-faint);
font-style: italic;
text-align: center;
padding: 8px 0 10px;
line-height: 1.4;
}
.site-popup-actions {
display: flex;
gap: 6px;
margin-top: 4px;
}
/* Conteneur Leaflet : agrandir un peu le padding pour aerer le popup riche */
.leaflet-popup-content-wrapper:has(.site-popup-rich) { padding: 0; }
.site-popup-wrap .leaflet-popup-content { margin: 14px 16px 12px; line-height: 1.4; }
.site-popup-wrap .leaflet-popup-content-wrapper {
background: var(--ohm-surface);
color: var(--ohm-fg-strong);
border: 1px solid var(--ohm-border);
border-radius: 10px;
box-shadow: 0 8px 24px var(--ohm-overlay-hard);
}
.site-popup-wrap .leaflet-popup-tip {
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-top: none;
border-left: none;
}
.site-popup-edit-btn, .site-popup-delete-btn {
border: none; border-radius: 5px; padding: 4px 10px;
font-size: 12px; cursor: pointer;
}
.site-popup-edit-btn { background: var(--ohm-info-bg); color: var(--ohm-info); }
.site-popup-delete-btn { background: var(--ohm-danger-bg); color: var(--ohm-danger); }
/* ============================================================
SITES — modal gestion
============================================================ */
.sites-overlay {
position: fixed; inset: 0;
background: var(--ohm-overlay-soft);
z-index: 3100;
display: flex; align-items: center; justify-content: center;
}
.sites-overlay.hidden { display: none; }
.sites-box {
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 14px;
width: min(900px, 96vw);
max-height: 85vh;
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.sites-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sites-header h3 { margin: 0; font-size: 17px; color: var(--ohm-text); }
.sites-close-btn {
background: none; border: none; color: var(--ohm-fg-soft);
font-size: 22px; cursor: pointer; line-height: 1;
}
.sites-body {
display: flex; flex: 1; overflow: hidden;
}
.sites-list-section {
flex: 1; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.08);
padding: 12px;
}
.sites-form-section {
width: 320px; flex-shrink: 0; padding: 16px; overflow-y: auto;
}
.sites-form-section h4 { margin: 0 0 14px; font-size: 15px; color: var(--ohm-success); }
.site-form { display: flex; flex-direction: column; gap: 10px; }
.site-form-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ohm-fg-soft); }
.site-form-label input {
background: var(--ohm-tint-2);
border: 1px solid var(--ohm-border);
border-radius: 7px;
color: var(--ohm-text);
padding: 7px 10px;
font-size: 13px;
}
.site-form-label input:focus { outline: none; border-color: var(--ohm-success); }
.site-form-coords-hint { font-size: 12px; color: var(--ohm-fg-faint); margin-top: 2px; }
.site-pick-map-btn {
background: none; border: none; color: var(--ohm-success);
text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0;
}
.site-form-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.site-form-cancel-btn {
background: var(--ohm-tint-2); border: 1px solid var(--ohm-border);
color: var(--ohm-fg-soft); padding: 8px 14px; border-radius: 8px;
font-size: 13px; cursor: pointer;
}
.site-form-cancel-btn.hidden { display: none; }
.site-form-save-btn {
background: var(--ohm-success-bg); border: 1px solid var(--ohm-success-border);
color: var(--ohm-success); padding: 8px 16px; border-radius: 8px;
font-size: 13px; font-weight: 600; cursor: pointer;
transition: filter 0.15s, background 0.15s;
}
.site-form-save-btn:hover { background: var(--ohm-success-bg); filter: brightness(1.18); }
/* liste sites */
.sites-empty { color: var(--ohm-fg-faint); font-size: 13px; padding: 20px; text-align: center; }
.site-list-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 10px;
border-radius: 8px;
margin-bottom: 6px;
background: var(--ohm-tint-1);
border: 1px solid rgba(255,255,255,0.07);
}
.site-list-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.site-list-item-name { font-size: 13px; color: var(--ohm-text); font-weight: 600; }
.site-list-item-coords { font-size: 11px; color: var(--ohm-success); font-family: monospace; }
.site-list-item-desc { font-size: 11px; color: var(--ohm-fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-list-item-actions { display: flex; gap: 4px; margin-left: 8px; flex-shrink: 0; }
.site-list-edit-btn, .site-list-zoom-btn, .site-list-delete-btn {
background: none; border: none; cursor: pointer;
font-size: 15px; padding: 4px 6px; border-radius: 6px;
transition: background 0.2s;
}
.site-list-edit-btn { color: var(--ohm-info); }
.site-list-edit-btn:hover { background: var(--ohm-info-bg); }
.site-list-zoom-btn { color: var(--ohm-fg-soft); }
.site-list-zoom-btn:hover { background: var(--ohm-tint-2); }
.site-list-delete-btn { color: var(--ohm-danger); }
.site-list-delete-btn:hover { background: var(--ohm-danger-bg); }
/* ============================================================
SITES — modal sélection site lors de l'upload
============================================================ */
.site-pick-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.65);
z-index: 3200;
display: flex; align-items: center; justify-content: center;
}
.site-pick-overlay.hidden { display: none; }
.site-pick-box {
background: var(--ohm-surface);
border: 1px solid var(--ohm-border);
border-radius: 14px;
width: min(460px, 94vw);
max-height: 70vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
overflow: hidden;
}
.site-pick-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-pick-header h3 { margin: 0; font-size: 16px; color: #e2e8f0; }
.site-pick-close-btn {
background: none; border: none; color: #a0aec0;
font-size: 22px; cursor: pointer; line-height: 1;
}
.site-pick-hint { margin: 10px 18px 4px; font-size: 13px; color: #a0aec0; }
.site-pick-list {
flex: 1; overflow-y: auto; padding: 6px 12px;
}
.site-pick-empty { color: #718096; font-size: 13px; padding: 16px; text-align: center; }
.site-pick-item {
display: flex; align-items: center; gap: 10px;
padding: 11px 12px;
border-radius: 9px;
margin-bottom: 6px;
background: var(--ohm-tint-1);
border: 1px solid rgba(255,255,255,0.09);
cursor: pointer;
transition: background 0.2s;
}
.site-pick-item:hover { background: var(--ohm-success-bg); border-color: var(--ohm-success-border); }
.site-pick-item-icon { font-size: 20px; }
.site-pick-item-name { font-size: 14px; color: #e2e8f0; font-weight: 600; flex: 1; }
.site-pick-item-coords { font-size: 11px; color: var(--ohm-success); font-family: monospace; }
.site-pick-footer {
padding: 12px 18px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex; justify-content: center;
}
.site-pick-no-site-btn {
background: var(--ohm-tint-1); border: 1px solid var(--ohm-border);
color: #718096; padding: 8px 18px; border-radius: 8px;
font-size: 13px; cursor: pointer;
transition: background 0.2s;
}
.site-pick-no-site-btn:hover { background: var(--ohm-tint-3); }
/* ── LAS Placeholder ────────────────────────────────────── */
#las-viewer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--ohm-bg);
}
#las-viewer.hidden { display: none; }
.las-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 30px 36px;
background: var(--ohm-tint-1);
border: 1px solid var(--ohm-border);
border-radius: 12px;
text-align: center;
max-width: 360px;
width: 90%;
}
.las-placeholder-icon { font-size: 36px; color: #63b3ed; }
.las-placeholder-name { font-size: 14px; font-weight: 600; color: #e2e8f0; word-break: break-all; }
.las-placeholder-info { font-size: 12px; color: rgba(160,174,192,0.6); }
/* ── Modal édition annotation (sync composant) ─────────────── */
.annot-edit-overlay {
position: fixed;
inset: 0;
background: var(--ohm-overlay-soft);
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
}
.annot-edit-overlay.hidden { display: none; }
.annot-edit-box {
background: var(--ohm-surface);
border: 1px solid rgba(240,140,0,0.35);
border-radius: 10px;
width: 480px;
max-width: 95vw;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.annot-edit-header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
flex-wrap: wrap;
}
.annot-edit-title {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.annot-edit-label-badge {
font-size: 13px;
font-weight: 700;
color: #fff;
}
.annot-edit-cid-badge {
font-family: monospace;
font-size: 11px;
background: rgba(240,140,0,0.15);
border: 1px solid rgba(240,140,0,0.4);
color: #F08C00;
border-radius: 4px;
padding: 2px 7px;
}
.annot-edit-occurrences {
font-size: 11px;
color: var(--ohm-fg-faint);
white-space: nowrap;
}
.annot-edit-close {
background: transparent;
border: none;
color: var(--ohm-fg-soft);
font-size: 20px;
cursor: pointer;
line-height: 1;
padding: 0 4px;
}
.annot-edit-close:hover { color: #fff; }
.annot-edit-body {
padding: 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.annot-edit-field-label {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 12px;
color: var(--ohm-fg-soft);
}
.annot-edit-field-label input,
.annot-edit-field-label select,
.annot-edit-field-label textarea {
background: var(--ohm-tint-1);
border: 1px solid var(--ohm-border);
border-radius: 5px;
color: #fff;
font-size: 13px;
padding: 6px 9px;
outline: none;
}
.annot-edit-field-label input:focus,
.annot-edit-field-label select:focus {
border-color: rgba(240,140,0,0.5);
}
.annot-edit-section-title {
font-size: 12px;
font-weight: 700;
color: #F08C00;
padding-top: 4px;
border-top: 1px solid rgba(240,140,0,0.15);
}
.annot-edit-daf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.annot-edit-daf-grid label {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 12px;
color: var(--ohm-fg-soft);
}
.annot-edit-daf-grid input,
.annot-edit-daf-grid select {
background: var(--ohm-tint-1);
border: 1px solid var(--ohm-border);
border-radius: 5px;
color: #fff;
font-size: 13px;
padding: 6px 9px;
outline: none;
}
.annot-edit-daf-grid input:focus,
.annot-edit-daf-grid select:focus {
border-color: rgba(240,140,0,0.5);
}
.annot-edit-field-full { grid-column: 1 / -1; }
.annot-edit-footer {
display: flex;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid rgba(255,255,255,0.08);
justify-content: flex-end;
}
.annot-edit-btn-single {
background: var(--ohm-tint-2);
color: var(--ohm-fg-medium);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 6px;
padding: 8px 16px;
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
}
.annot-edit-btn-single:hover { background: var(--ohm-tint-3); }
.annot-edit-btn-sync {
background: rgba(240,140,0,0.2);
color: #F08C00;
border: 1px solid rgba(240,140,0,0.45);
border-radius: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.annot-edit-btn-sync:hover { background: rgba(240,140,0,0.35); }
/* ── Panneau miniatures site ────────────────────────────────── */
.site-thumbs-panel {
width: 280px;
min-width: 280px;
background: var(--ohm-bg-soft);
border-right: 1px solid var(--ohm-border);
display: flex;
flex-direction: column;
overflow: hidden;
flex-shrink: 0;
z-index: 100;
transition: width 0.2s, min-width 0.2s;
}
.site-thumbs-panel.hidden {
width: 0;
min-width: 0;
}
.site-thumbs-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 10px 8px;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-shrink: 0;
}
.site-thumbs-title {
font-size: 12px;
font-weight: 700;
color: var(--ohm-fg-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-thumbs-count {
font-size: 11px;
color: rgba(255,255,255,0.35);
flex-shrink: 0;
}
.site-thumbs-close {
background: transparent;
border: none;
color: var(--ohm-fg-faint);
font-size: 18px;
cursor: pointer;
line-height: 1;
padding: 0 2px;
flex-shrink: 0;
}
.site-thumbs-close:hover { color: #fff; }
.site-thumbs-grid {
flex: 1;
overflow-y: auto;
padding: 8px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
align-content: start;
}
.site-thumb-item {
cursor: pointer;
border-radius: 5px;
overflow: hidden;
border: 2px solid transparent;
transition: border-color 0.15s, opacity 0.15s;
background: var(--ohm-tint-1);
display: flex;
flex-direction: column;
}
.site-thumb-item:hover {
border-color: rgba(240,140,0,0.7);
opacity: 0.95;
}
.site-thumb-item.active {
border-color: #F08C00;
}
.site-thumb-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
background: var(--ohm-tint-1);
}
.site-thumb-img.thumb-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: rgba(255,255,255,0.2);
aspect-ratio: 4/3;
}
.site-thumb-label {
font-size: 9px;
color: var(--ohm-fg-faint);
padding: 3px 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.site-thumb-annot-badge {
font-size: 9px;
background: rgba(240,140,0,0.2);
color: #F08C00;
border-radius: 3px;
padding: 1px 4px;
margin: 0 4px 3px;
display: inline-block;
width: fit-content;
}
/* Marqueur de site sur la carte */
.site-map-marker {
background: #F08C00;
border: 2px solid #fff;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
cursor: pointer;
}
.site-map-marker.active-site {
background: #fff;
color: #F08C00;
border-color: #F08C00;
}
/* ── Tour 360° — Bouton Annoter (style orange "cadre rempli au survol",
identique au bouton IMPORT/EXPORT du header principal) ─────────── */
.tour360-annot-btn {
background-color: transparent;
background-image: linear-gradient(to top, #F08C00 50%, transparent 50%);
background-size: 100% 200%;
background-position: 0% 0%;
border: 1.5px solid #F08C00;
color: #F08C00;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 4px;
cursor: pointer;
line-height: 1;
white-space: nowrap;
display: inline-flex;
align-items: center;
transition: background-position 0.35s ease, color 0.35s ease, box-shadow 0.2s;
}
.tour360-annot-btn:hover {
background-position: 0% 100%;
color: #0c1322;
box-shadow: 0 0 12px rgba(240, 140, 0, 0.35);
}
.tour360-annot-btn.active {
background-position: 0% 100%;
color: #0c1322;
box-shadow: 0 0 14px rgba(240, 140, 0, 0.55);
}
.tour360-annot-btn.hidden { display: none; }
.tour360-annot-canvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 10;
cursor: crosshair;
}
.tour360-annot-canvas.drawing {
pointer-events: all;
}
.tour360-annot-hint {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.7);
color: #fbbf24;
font-size: 12px;
padding: 5px 14px;
border-radius: 20px;
pointer-events: none;
z-index: 11;
white-space: nowrap;
display: none;
}
.tour360-annot-canvas.drawing ~ .tour360-annot-hint {
display: block;
}
/* ============================================================
Calcul de charge — bouton header (producer-only) + modal
============================================================ */
/* Calcul de charge — module réservé aux rôles OHM (producer + superadmin
depuis 2026-05-23). Style hérité du sélecteur partagé (neutre tinté +
hover orange, cf. impeccable critique R2). */
.load-calc-header-btn { display: none; }
body.role-producer .load-calc-header-btn,
body.role-superadmin .load-calc-header-btn {
display: inline-block;
}
/* ── Poignée de redimensionnement de colonnes (r41 — tableau Charge) ───── */
/* La poignée est attachée à droite de chaque | et permet de dragger pour
ajuster la largeur de la colonne. Largeur persistée en localStorage. */
#load-calc-table thead th { position: relative; padding-right: 14px; }
.lc-col-resizer {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
cursor: col-resize;
user-select: none;
z-index: 5;
/* Barre verticale subtile au centre */
background: transparent;
transition: background 0.12s;
}
.lc-col-resizer::before {
content: '';
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 50%;
background: var(--ohm-border);
transition: background 0.12s, width 0.12s, height 0.12s;
}
.lc-col-resizer:hover {
background: rgba(241, 132, 31, 0.10);
}
.lc-col-resizer:hover::before {
background: #F1841F;
width: 2px;
height: 70%;
}
.lc-col-resizer.dragging {
background: rgba(241, 132, 31, 0.20);
}
.lc-col-resizer.dragging::before {
background: #F1841F;
width: 2px;
height: 80%;
}
/* r43 (mai 2026) : alignement strict sur le pattern Inventaire (.ticketing-*).
Objectif : la page Charge doit se comporter exactement comme la page
Inventaire — pleine fenêtre, header cohérent (cadre vert "CHARGE" +
croix sobre en haut à droite), z-index au-dessus du header principal.
Avant : z-index 9999 = la modale passait DERRIÈRE le header principal. */
.load-calc-overlay {
position: fixed;
inset: 0;
background: rgba(8, 10, 24, 0.92);
z-index: 90000; /* identique à .ticketing-overlay */
display: flex;
align-items: stretch;
justify-content: flex-end;
}
.load-calc-overlay.hidden { display: none; }
.load-calc-modal {
/* Pleine fenêtre, pas de cap max-width — la grille interne profite de
tout l'espace. Pattern identique à .ticketing-panel. */
width: 100vw;
height: 100vh;
background: var(--ohm-bg);
display: flex;
flex-direction: column;
box-shadow: -4px 0 40px rgba(0,0,0,0.7),
inset 4px 0 0 rgba(240, 140, 0, 0.18);
overflow: hidden;
}
/* Header de la modale Charge — pattern identique à .ticketing-header :
fond header app, padding 16/24, soulignage orange. */
.load-calc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background: var(--ohm-header-bg);
border-bottom: 2px solid rgba(240, 140, 0, 0.35);
flex-shrink: 0;
}
/* Titre "CHARGE" — chip vert rectangulaire, raccord visuel avec le bouton
CHARGE du header principal (pattern identique à .ticketing-title). */
.load-calc-title {
font-size: 12px;
font-weight: 700;
color: var(--ohm-success);
letter-spacing: 1px;
text-transform: uppercase;
padding: 7px 14px;
border: 1.5px solid var(--ohm-success);
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.load-calc-header-actions { display: flex; align-items: center; gap: 10px; }
/* Bouton Excel — même contour que Rapport de l'Inventaire (orange montant). */
.load-calc-export-btn {
background-color: transparent;
background-image: linear-gradient(to top, #F08C00 50%, transparent 50%);
background-size: 100% 200%;
background-position: 0% 0%;
border: 1.5px solid #F08C00;
color: #F08C00;
padding: 6px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: background-position 0.3s ease, color 0.3s ease;
}
.load-calc-export-btn:hover {
background-position: 0% 100%;
color: #fff;
}
/* Croix de fermeture — sobre, alignée visuellement avec .ticketing-close-btn. */
.load-calc-close-btn {
background: none;
border: none;
color: var(--ohm-fg-soft);
font-size: 24px;
cursor: pointer;
line-height: 1;
padding: 0 4px;
transition: color 0.2s;
}
.load-calc-close-btn:hover { color: #fff; }
.load-calc-toolbar {
display: flex;
align-items: flex-end;
gap: 16px;
padding: 12px 22px;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-wrap: wrap;
}
.load-calc-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.load-calc-field label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ohm-fg-soft);
}
.load-calc-field select,
.load-calc-field input {
background: rgba(15, 23, 42, 0.7);
border: 1px solid var(--ohm-border);
color: #fff;
padding: 5px 9px;
border-radius: 5px;
font-size: 12.5px;
min-width: 140px;
font-variant-numeric: tabular-nums;
}
.load-calc-field select:focus,
.load-calc-field input:focus {
outline: none;
border-color: rgba(241, 132, 31, 0.6);
}
.load-calc-run-btn {
background: #F1841F;
border: none;
color: #0a0e1a;
padding: 7px 22px;
border-radius: 5px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.03em;
transition: background 0.15s;
}
.load-calc-run-btn:hover { background: #ff9536; }
.load-calc-info {
font-size: 11.5px;
color: var(--ohm-fg-soft);
margin-left: auto;
}
.load-calc-body {
flex: 1;
display: flex;
min-height: 0;
overflow: hidden;
}
.load-calc-table-pane {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.load-calc-table-pane .inv-table-scroll {
flex: 1 1 auto;
overflow: auto;
padding: 8px 14px 14px 14px;
}
.load-calc-viz-pane {
flex: 0 0 510px;
min-width: 480px;
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.18);
padding: 18px;
gap: 14px;
overflow-y: auto;
position: relative;
}
/* r43 : placeholder visuel quand le calcul n'a pas encore été lancé.
Sans ça, on voit un grand bloc noir à droite du tableau, ce qui donne
l'impression que la page « ne prend pas tout l'écran ». */
.load-calc-polar:empty,
.load-calc-synthese:empty {
min-height: 0;
}
.load-calc-polar:empty::before {
content: 'Diagramme polaire FPA';
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
color: var(--ohm-fg-faint);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px dashed rgba(240, 140, 0, 0.22);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}
.load-calc-synthese:empty::before {
content: 'Cliquez sur Calculer pour générer la synthèse des charges par secteur.';
display: block;
padding: 18px;
color: var(--ohm-fg-soft);
font-size: 12.5px;
line-height: 1.5;
text-align: center;
border: 1px dashed rgba(255, 255, 255, 0.10);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}
/* Clone du tableau d'inventaire dans la modale Calcul de charge.
On réutilise les styles .inv-table, on ajoute juste les colonnes
spécifiques au calcul : Type (select), FPA, EPA. */
#load-calc-table .lc-th-type,
#load-calc-table .lc-th-calc {
background: rgba(241, 132, 31, 0.08);
border-bottom-color: rgba(241, 132, 31, 0.55);
}
#load-calc-table .lc-cell-fpa,
#load-calc-table .lc-cell-epa {
font-variant-numeric: tabular-nums;
color: var(--ohm-fg-strong);
text-align: right;
white-space: nowrap;
background: rgba(241, 132, 31, 0.04);
}
#load-calc-table .lc-cell-epa { color: #F1841F; font-weight: 600; }
#load-calc-table .lc-empty {
text-align: center;
color: var(--ohm-fg-faint);
font-style: italic;
padding: 40px 20px;
}
.lc-badge-3d {
display: inline-block;
margin-left: 4px;
padding: 1px 5px;
border-radius: 8px;
background: rgba(167, 139, 250, 0.18);
color: #a78bfa;
border: 1px solid rgba(167, 139, 250, 0.4);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.03em;
vertical-align: middle;
}
/* Sélecteur de Type d'antenne (seul champ éditable dans le tableau) */
.lc-input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--ohm-border-soft);
color: #fff;
padding: 3px 6px;
border-radius: 4px;
font-size: 11.5px;
box-sizing: border-box;
font-variant-numeric: tabular-nums;
}
.lc-input:focus {
outline: none;
border-color: rgba(241, 132, 31, 0.6);
background: rgba(0, 0, 0, 0.5);
}
.lc-input.lc-type { min-width: 140px; width: 100%; }
/* Masquer les spinners up/down des inputs number — épure visuelle */
.load-calc-field input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.load-calc-field input[type="number"]::-webkit-inner-spin-button,
.load-calc-field input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
/* Bandeau d'avertissement (antennes ignorées car données manquantes).
impeccable R5 polish : side-stripe ambre remplacée par leading ⚠
en pseudo-element + radius uniforme. */
.lc-synth-warning {
background: rgba(245, 158, 11, 0.14);
color: #fbbf24;
padding: 8px 12px 8px 32px;
font-size: 12px;
line-height: 1.4;
border-radius: 6px;
position: relative;
margin-bottom: 10px;
}
.lc-synth-warning::before {
content: '⚠';
position: absolute;
left: 10px;
top: 7px;
font-size: 14px;
color: #f59e0b;
line-height: 1;
}
.load-calc-polar {
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 8px;
min-height: 480px;
}
.load-calc-polar svg { max-width: 100%; height: auto; }
.load-calc-synthese:empty { display: none; }
.lc-synth-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.lc-kpi {
background: rgba(15, 23, 42, 0.6);
border: 1px solid var(--ohm-border-soft);
border-radius: 6px;
padding: 8px 12px;
}
.lc-kpi span {
display: block;
font-size: 10px;
color: var(--ohm-fg-soft);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.lc-kpi b {
font-size: 14px;
color: #F1841F;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.lc-synth-text {
font-size: 12.5px;
color: var(--ohm-fg-strong);
line-height: 1.55;
padding: 10px 12px;
/* impeccable R5 polish : side-stripe orange remplacée par fond tinté
à la teinte de l'accent OHM, plus discret et cohérent. */
background: rgba(241, 132, 31, 0.10);
border-radius: 6px;
margin-bottom: 10px;
}
.lc-synth-disclaimer {
font-size: 10.5px;
color: var(--ohm-fg-faint);
font-style: italic;
line-height: 1.4;
padding: 6px 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 10px;
}
/* Responsive : vertical stack < 1100px */
@media (max-width: 1100px) {
.load-calc-body { flex-direction: column; }
.load-calc-table-pane { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
.load-calc-viz-pane { flex: 0 0 auto; min-width: 0; }
}
/* ============================================================
* 15-shortcuts-help — bouton FAB et modale "Raccourcis clavier"
* OHM 2026-05-29. Cf. app/15-shortcuts-help.js
* ============================================================ */
/* ── Bouton flottant rond, bas-gauche ───────────────────────── */
#ohm-shortcuts-fab {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 9000;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: var(--ohm-surface, #2a2f3a);
color: var(--ohm-fg-medium, #cbd5e1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
#ohm-shortcuts-fab:hover {
background: var(--ohm-accent-dim, rgba(240, 140, 0, 0.16));
color: var(--ohm-accent, #F08C00);
border-color: var(--ohm-accent, #F08C00);
transform: translateY(-1px);
}
#ohm-shortcuts-fab:active {
transform: translateY(0);
}
#ohm-shortcuts-fab svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ── Overlay modale ──────────────────────────────────────────── */
.ohm-shortcuts-overlay {
position: fixed;
inset: 0;
z-index: 12000;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
animation: ohm-shortcuts-fade 0.15s ease;
font-family: 'Segoe UI', Inter, system-ui, sans-serif;
}
.ohm-shortcuts-overlay.hidden {
display: none !important;
}
@keyframes ohm-shortcuts-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.ohm-shortcuts-box {
background: var(--ohm-bg-soft, #1e2228);
border: 1px solid var(--ohm-border, rgba(255,255,255,0.14));
border-radius: 10px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
color: var(--ohm-fg-strong, #dde0f5);
width: 600px;
max-width: 92vw;
max-height: 86vh;
display: flex;
flex-direction: column;
}
.ohm-shortcuts-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--ohm-border-soft, rgba(255,255,255,0.08));
}
.ohm-shortcuts-header h3 {
margin: 0;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--ohm-accent, #F08C00);
display: flex;
align-items: center;
}
.ohm-shortcuts-close {
background: transparent;
border: 1px solid transparent;
color: rgba(221, 224, 245, 0.5);
font-size: 22px;
line-height: 1;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ohm-shortcuts-close:hover {
background: rgba(255, 118, 118, 0.14);
color: #ff7676;
border-color: rgba(255, 118, 118, 0.5);
}
.ohm-shortcuts-body {
padding: 12px 20px 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.ohm-shortcuts-section-title {
margin: 8px 0 8px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ohm-accent, #F08C00);
opacity: 0.95;
}
.ohm-shortcuts-list {
margin: 0;
display: grid;
grid-template-columns: minmax(120px, auto) 1fr;
column-gap: 16px;
row-gap: 6px;
align-items: center;
}
.ohm-shortcuts-list dt {
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-start;
}
.ohm-shortcuts-list dd {
margin: 0;
font-size: 13px;
color: var(--ohm-fg-medium, #cbd5e1);
line-height: 1.4;
}
.ohm-shortcuts-list kbd {
display: inline-block;
min-width: 22px;
padding: 2px 8px;
font-family: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
font-size: 11px;
font-weight: 600;
color: var(--ohm-fg-strong, #dde0f5);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.18);
border-bottom-width: 2px;
border-radius: 4px;
text-align: center;
line-height: 1.4;
}
.ohm-shortcuts-plus {
color: var(--ohm-fg-faint, rgba(221, 224, 245, 0.4));
font-size: 10px;
margin: 0 2px;
}
.ohm-shortcuts-footer {
padding: 10px 20px 14px;
border-top: 1px solid var(--ohm-border-soft, rgba(255,255,255,0.08));
font-size: 11.5px;
color: var(--ohm-fg-soft, rgba(221, 224, 245, 0.6));
text-align: center;
}
.ohm-shortcuts-footer kbd {
display: inline-block;
padding: 1px 6px;
font-family: 'JetBrains Mono', 'Consolas', monospace;
font-size: 10.5px;
color: var(--ohm-fg-strong, #dde0f5);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 3px;
}
/* ── Thème clair : ajustements ──────────────────────────────── */
html.theme-light #ohm-shortcuts-fab {
background: #fff;
color: #4a5568;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
html.theme-light #ohm-shortcuts-fab:hover {
color: var(--ohm-accent, #F08C00);
background: rgba(240, 140, 0, 0.08);
}
html.theme-light .ohm-shortcuts-box {
background: var(--ohm-surface, #fdfbf7);
color: #2d3748;
}
html.theme-light .ohm-shortcuts-list dd {
color: #4a5568;
}
html.theme-light .ohm-shortcuts-list kbd,
html.theme-light .ohm-shortcuts-footer kbd {
color: #2d3748;
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.15);
}
|