/* ============================================================ Plan de plateau — feuille unique (sommaire) 1. Tokens & base (charte INVprod v9 : noir/blanc/gris, coins droits) 2. Topbar (menus déroulants) · Palette (matériel du plan) 3. Canevas (outils, bannière outil actif, aide) 4. Sidebar en onglets (propriétés, calques, 💬, légende) 5. Modales (Mes plans, catalogue + aperçus, fiche, checklist) 6. Compte/connexion · Partage · Commentaires · Checklist 7. Modes partagés (share-view/share-edit) · Impression (@media print) 8. Ajouts juillet 2026 (gels, DMX, élec, outils cadrage/coupe) NB : [hidden]{display:none !important} garantit l'attribut hidden contre tout display de classe — ne pas retirer. COMMENT LIRE CETTE FEUILLE : les sections suivent l'ordre du sommaire ci-dessus et sont repérées par des bannières de commentaires « ===== ». Le HTML (index.php) ne contient presque pas de style : tout l'aspect visuel de l'éditeur se règle ici. ============================================================ */ /* ============================================================ Plan de plateau — éditeur de plans lumière / plans au sol Charte INVprod v9 : noir/blanc/gris, Montserrat, coins droits, pas d'ombre ni de dégradé, cadres blancs fins. ============================================================ */ /* ============================================================ 1. TOKENS & BASE ------------------------------------------------------------ La charte graphique INVprod v9 en une phrase : uniquement du noir, du blanc et des gris (AUCUNE couleur d'accent), des coins parfaitement droits (aucun border-radius nulle part), aucune ombre ni dégradé, des cadres blancs fins, et la police Montserrat. Si un élément semble « plat et sévère », c'est voulu. ------------------------------------------------------------ Les variables ci-dessous (« tokens ») sont les seules couleurs autorisées ; le reste de la feuille dit var(--nom) au lieu d'un code hexadécimal en dur. Pour retoucher toute l'ambiance, on ne modifie donc QUE ce bloc. ============================================================ */ :root { --black: #000000; --dark: #1a1a1a; --panel: #0d0d0d; --mid: #707070; --light: #d9d9d9; --white: #ffffff; --border: rgba(255, 255, 255, 0.16); --muted: #9b9b9b; } /* box-sizing: border-box partout : la largeur annoncée d'une boîte INCLUT ses bordures et son padding — fini les calculs surprises. */ * { box-sizing: border-box; } /* L'attribut hidden gagne TOUJOURS, même contre un display:flex de classe */ /* RÈGLE VITALE — ne jamais retirer. Le JS cache les menus, modales et bandeaux en posant l'attribut HTML « hidden ». Or hidden, seul, perd contre n'importe quel « display:flex » venu d'une classe (.modal-back est en display:flex, par exemple) : sans cette règle et son !important, toutes les modales resteraient affichées en permanence. C'est LA ligne qui fait tenir tout le jeu montrer/cacher. */ [hidden] { display: none !important; } html, body { height: 100%; } /* Le est une application plein écran, pas une page qui défile : colonne flex (topbar en haut, workspace qui prend le reste) et overflow:hidden — seuls les panneaux internes (palette, sidebar) ont leur propre ascenseur. */ body { margin: 0; background: var(--black); color: var(--white); font-family: Montserrat, Arial, sans-serif; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; overflow: hidden; } /* Style de base de TOUS les boutons : « fantôme » (fond transparent, fin cadre gris), texte en capitales espacées — la signature de la charte. Les variantes plus bas ne font qu'inverser les couleurs. */ button { font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: transparent; border: 1px solid var(--border); padding: 8px 12px; cursor: pointer; } button:hover { border-color: var(--white); } /* Au clic : inversion complète noir ↔ blanc (le « flash » charte). */ button:active { background: var(--white); color: var(--black); border-color: var(--white); } /* .primary = l'action principale d'un écran (Enregistrer, Envoyer…) : bouton plein blanc, déjà « inversé » en permanence. */ button.primary { background: var(--white); color: var(--black); border-color: var(--white); } /* Accessibilité clavier : :focus-visible ne s'affiche que lors d'une navigation au clavier (Tab), pas au clic souris — liseré blanc net. */ button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } /* Champs de saisie : fond gris foncé, cadre fin, pleine largeur — même famille visuelle que les boutons. */ input, select, textarea { font-family: inherit; font-size: 13px; color: var(--white); background: var(--dark); border: 1px solid var(--border); padding: 6px 8px; width: 100%; } /* ============================================================ 2. TOPBAR & PALETTE ============================================================ */ /* ===== Barre du haut ===== */ /* flex: 0 0 auto → la topbar garde sa hauteur naturelle, c'est le workspace en dessous qui absorbe tout l'espace restant. */ .topbar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--black); flex: 0 0 auto; } /* Le « logo » cliquable à gauche (flèche ← + Plan de plateau) qui ramène au bac à sable. */ .brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 0.1em; white-space: nowrap; } .brand-arrow { color: var(--muted); } /* Le nom du plan, éditable directement dans la barre. */ .name-input { max-width: 320px; font-weight: 700; } /* Le petit texte d'état (« Enregistré à 14 h 02 », « Conflit… »). */ .status { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } /* margin-left:auto = l'astuce flexbox qui pousse ce groupe de boutons tout à droite de la barre. */ .top-actions { margin-left: auto; display: flex; gap: 8px; } /* ===== Espace de travail ===== */ /* La rangée qui occupe tout l'écran sous la topbar : palette | canevas | sidebar. min-height:0 est indispensable en flexbox : sans lui, les enfants qui défilent (palette, sidebar) refuseraient de rétrécir et déborderaient de l'écran. */ .workspace { flex: 1 1 auto; display: flex; min-height: 0; } /* ===== Palette d'outils ===== */ /* Colonne gauche, largeur fixe de 200 px (flex: 0 0 200px = ne grandit pas, ne rétrécit pas), avec son propre ascenseur. Son CONTENU est généré par js/60-palette-catalogue.js. */ .palette { flex: 0 0 200px; overflow-y: auto; border-right: 1px solid var(--border); background: var(--panel); padding: 12px; } /* Titres de catégories dans la palette (LUMIÈRE, CAMÉRA…). */ .palette h3 { margin: 16px 0 8px; font-size: 10px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .palette h3:first-child { margin-top: 0; } /* Grille 2 colonnes des boutons d'outils. */ .tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } /* Boutons d'outil : plus petits que les boutons standard, sans capitales (les noms de matériel restent lisibles tels quels). */ .tool-btn { padding: 8px 6px; font-size: 10px; letter-spacing: 0.04em; text-transform: none; font-weight: 600; text-align: center; line-height: 1.25; } /* .wide : bouton qui occupe les 2 colonnes de la grille. */ .tool-btn.wide { grid-column: 1 / -1; } /* Outil actuellement sélectionné : inversé blanc sur noir. */ .tool-btn.active { background: var(--white); color: var(--black); border-color: var(--white); } /* ============================================================ 3. CANEVAS ============================================================ */ /* ===== Canevas ===== */ /* Colonne centrale : flex 1 1 auto = prend TOUT l'espace restant. position:relative sert d'ancrage aux éléments flottants (outils, bannière, aide) positionnés en absolute par-dessus le dessin. */ .canvas-wrap { flex: 1 1 auto; position: relative; min-width: 0; background: #050505; } /* Le SVG remplit exactement son conteneur (inset:0 = collé aux 4 bords). C'est js/30-rendu-optique.js qui dessine dedans. */ #svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Pendant le placement d'un objet, le curseur devient une croix. */ #svg.placing { cursor: crosshair; } /* La petite barre flottante en haut à gauche du canevas : Aimant (grille 25 cm) · Ajuster · pourcentage de zoom. */ .canvas-tools { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; align-items: center; gap: 8px; background: var(--black); border: 1px solid var(--border); padding: 6px; } /* .on = option enclenchée (l'aimant actif s'affiche inversé). */ .canvas-tools button.on { background: var(--white); color: var(--black); border-color: var(--white); } /* min-width fixe pour que « 100% » → « 45% » ne fasse pas bouger la barre. */ #zoomLabel { font-size: 11px; color: var(--muted); min-width: 44px; text-align: center; } /* Ligne d'aide en bas du canevas. pointer-events:none : la souris « passe au travers » pour atteindre le plan situé dessous — seul le bouton « ? Raccourcis » redevient cliquable (voir .hint-help plus bas). */ .hint { position: absolute; bottom: 8px; left: 12px; right: 12px; margin: 0; font-size: 10px; letter-spacing: 0.04em; color: var(--mid); pointer-events: none; } /* ============================================================ 4. SIDEBAR EN ONGLETS ============================================================ */ /* ===== Barre latérale droite ===== */ /* Colonne droite, largeur fixe 280 px, ascenseur interne. */ .sidebar { flex: 0 0 280px; overflow-y: auto; border-left: 1px solid var(--border); background: var(--panel); } .panel { padding: 14px; border-bottom: 1px solid var(--border); } .panel h2 { margin: 0 0 12px; font-size: 12px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; } /* .field = une ligne étiquette + contrôle du panneau Propriétés (généré par js/40-proprietes.js). */ .field { margin-bottom: 10px; } .field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } /* .val = la valeur affichée à côté d'un curseur (« 3,50 m », « 45° »). */ .field .val { font-size: 11px; color: var(--light); } /* Curseurs (sliders) : accent-color blanc = la charte jusque dans le composant natif du navigateur ; la largeur laisse 62 px pour la valeur. */ .field input[type="range"] { padding: 0; height: 24px; width: calc(100% - 62px); vertical-align: middle; accent-color: #ffffff; background: transparent; border: none; } .field input[type="range"] + .val { display: inline-block; width: 56px; text-align: right; vertical-align: middle; white-space: nowrap; } /* Sélecteur de couleur natif (gélatines, flèches…). */ .field input[type="color"] { padding: 2px; height: 34px; cursor: pointer; } /* Deux champs côte à côte (ex. largeur / profondeur du plateau). */ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* La « zone dangereuse » du panneau : Dupliquer / Supprimer. */ .danger-zone { margin-top: 14px; display: flex; gap: 8px; } /* Grilles de petits boutons d'action rapide (alignement, flip…). */ .btn-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; } .btn-grid button { padding: 7px 4px; font-size: 9px; letter-spacing: 0.03em; } .btn-grid button.on { background: var(--white); color: var(--black); border-color: var(--white); } /* Variante 4 colonnes pour les boutons de rotation. */ .rot-grid { grid-template-columns: repeat(4, 1fr); } .rot-grid button[data-act] { grid-column: span 2; } .danger-zone button:hover { border-color: var(--white); background: var(--white); color: var(--black); } /* Message affiché quand rien n'est sélectionné. */ .prop-empty { font-size: 12px; color: var(--muted); line-height: 1.5; } /* ===== Calques ===== */ /* Onglet Calques : cases à cocher pour montrer/cacher chaque famille d'éléments (lumière, caméras, câbles…), en 2 colonnes. */ .layers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; } .layer-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--light); cursor: pointer; padding: 3px 0; } .layer-row input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: #ffffff; } /* ============================================================ 5. MODALES (Mes plans, catalogue, fiche, checklist…) ============================================================ */ /* ===== Fiche matériel (dans la modale) ===== */ /* La fiche récapitulative du matériel du plan, affichée dans la modale générique (mêmes classes .plan-list réutilisées). */ .plan-list h3 { margin: 16px 0 6px; font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .plan-list ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--light); } .fiche-actions { margin-top: 18px; display: flex; justify-content: flex-end; } /* ===== Légende ===== */ /* Onglet Légende : liste numérotée des éléments posés ; cliquer une ligne sélectionne l'élément correspondant sur le plan. */ .legend { font-size: 11px; line-height: 1.5; } .legend .leg-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; } .legend .leg-row:hover { color: var(--white); background: var(--dark); } /* Le numéro de repère (L1, C2…), en gras, colonne fixe. */ .legend .leg-id { flex: 0 0 28px; font-weight: 900; } .legend .leg-txt { color: var(--light); } .legend .leg-sub { color: var(--muted); } .legend .leg-empty { color: var(--mid); } /* ===== Modale « Mes plans » ===== */ /* .modal-back = le voile sombre qui recouvre TOUTE la page (position:fixed + inset:0) et centre la boîte ; z-index 50 le place au-dessus de tout le reste de l'interface. */ .modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 50; } /* Redondant avec la règle [hidden] globale, mais gardé en ceinture de sécurité : ce display:flex est exactement le cas qu'un hidden sans !important perdrait. */ .modal-back[hidden] { display: none; } /* La boîte elle-même : min(560px, 92vw) = 560 px sur grand écran, 92 % de la largeur sur petit écran. Cadre BLANC (pas gris) : dans la charte, le blanc pur signale l'élément au premier plan. */ .modal { width: min(560px, 92vw); max-height: 80vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--white); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .modal-head h2 { margin: 0; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; } /* Le « × » de fermeture : sans cadre, juste le signe. */ .modal-head button { border: none; font-size: 20px; padding: 0 6px; } .plan-list { padding: 8px 16px 16px; } /* Une ligne de la liste « Mes plans » : nom + version + date + actions. */ .plan-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .plan-row .plan-name { flex: 1 1 auto; font-weight: 700; font-size: 13px; } /* La petite étiquette de version (V1, V2…) à côté du nom. */ .plan-row .plan-ver { font-weight: 400; font-size: 10px; color: var(--muted); border: 1px solid var(--border); padding: 1px 5px; margin-left: 6px; } /* Champ fichier (import d'image de fond). */ .field input[type="file"] { font-size: 11px; padding: 8px; } .plan-row .plan-date { font-size: 11px; color: var(--muted); white-space: nowrap; } .plan-row button { padding: 6px 10px; font-size: 10px; } /* Message « aucun plan » de la liste vide. */ .plan-list .empty { padding: 18px 0; color: var(--muted); font-size: 12px; } /* ===== Palette v2 : accordéons + favoris + ajout matériel ===== */ /* Le grand bouton blanc « + Ajouter du matériel » de la palette. */ .add-material { display: block; width: 100%; margin: 14px 0 4px; padding: 11px 8px; background: var(--white); color: var(--black); border-color: var(--white); font-size: 11px; } /* Texte d'accueil quand la palette n'a encore aucun favori. */ .palette-empty { font-size: 11px; line-height: 1.55; color: var(--muted); padding: 4px 2px; } /* .acc-head = l'en-tête cliquable d'un accordéon de catégorie ; .open quand la catégorie est dépliée. */ .acc-head { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 9px 4px; font-size: 11px; letter-spacing: 0.04em; text-transform: none; font-weight: 600; color: var(--light); } .acc-head:hover { color: var(--white); background: var(--dark); } .acc-head.open { color: var(--white); font-weight: 900; } /* Le contenu déplié de l'accordéon. */ .acc-body { padding: 8px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* ===== Recherche matériel ===== */ /* Le catalogue complet s'ouvre dans la modale : champ de recherche en tête, puis grille de matériel 2 colonnes. */ .cat-search { width: 100%; margin-bottom: 6px; padding: 10px; font-size: 13px; } .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } /* Une entrée du catalogue = bouton principal (.cat-place) accolé au bouton favori (.cat-fav), sans espace entre les deux (gap: 0). */ .cat-row { display: flex; gap: 0; } .cat-place { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; text-align: left; font-size: 10.5px; text-transform: none; letter-spacing: 0.02em; font-weight: 600; padding: 5px 8px; border-right: none; } /* La vignette 30×30 contenant le pictogramme SVG du matériel. */ .cat-icon { flex: 0 0 30px; width: 30px; height: 30px; background: #060606; border: 1px solid rgba(255, 255, 255, 0.1); } /* ===== Carte d'aperçu au survol du catalogue ===== */ /* La carte flottante (#catPreview) qui suit la souris : grand pictogramme + nom + infos. position:fixed car elle se place en coordonnées écran ; pointer-events:none pour qu'elle ne bloque jamais le clic sur l'élément survolé en dessous. */ .cat-preview { position: fixed; z-index: 80; width: 190px; padding: 10px; background: var(--panel); border: 1px solid var(--white); pointer-events: none; } .cat-big { display: block; width: 168px; height: 168px; background: #060606; border: 1px solid rgba(255, 255, 255, 0.12); } .cat-prev-name { margin-top: 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; } .cat-prev-info { margin-top: 3px; font-size: 10.5px; color: var(--muted); line-height: 1.45; } /* L'étoile de favori ; .on = favori actif. Le jaune #e8d44d est l'une des deux seules entorses assumées au noir/blanc/gris de la charte (l'autre : l'épingle des commentaires) — un repère fonctionnel doit se voir. */ .cat-fav { flex: 0 0 28px; padding: 0; font-size: 12px; color: var(--mid); } .cat-fav.on { color: #e8d44d; } /* ===== Menus barre du haut ===== */ /* Les menus déroulants « Exporter » et « ⋯ ». Le principe : .menu-wrap est en position:relative, le .menu en absolute juste en dessous (top: 100% + 4px). L'ouverture/fermeture se fait par l'attribut hidden (cf. la règle [hidden] vitale tout en haut). */ .menu-wrap { position: relative; } .menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 190px; background: var(--panel); border: 1px solid var(--white); display: flex; flex-direction: column; } /* menu-right : aligné sur le bord droit du bouton (pour le « ⋯ », dernier bouton de la barre — sinon le menu sortirait de l'écran). */ .menu.menu-right { left: auto; right: 0; } .menu button { border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; padding: 10px 14px; font-size: 11px; text-transform: none; letter-spacing: 0.03em; font-weight: 600; } .menu button:hover { background: var(--white); color: var(--black); } /* ===== Bannière outil actif ===== */ /* Le bandeau blanc centré en haut du canevas pendant un tracé (« Mur : cliquez le point de départ… ») avec son bouton Annuler. Blanc sur noir = impossible à rater. */ .tool-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 12px; background: var(--white); color: var(--black); padding: 8px 14px; font-size: 11px; font-weight: 700; max-width: 70%; } .tool-banner button { background: transparent; color: var(--black); border-color: var(--black); padding: 4px 10px; font-size: 10px; } /* Le bouton « ? Raccourcis » dans la ligne d'aide : il réactive les clics (pointer-events:auto) alors que son parent .hint les laisse passer au travers. */ .hint-help { pointer-events: auto; border: none; padding: 0 4px; font-size: 10px; color: var(--light); text-decoration: underline; text-transform: none; } /* ===== Onglets barre latérale ===== */ /* La rangée d'onglets de la sidebar (Propriétés / Calques / 💬 / Légende). Un seul panneau .tabpane porte .active à la fois : les autres sont en display:none — mécanique d'onglets minimale. */ .tabbar { display: flex; border-bottom: 1px solid var(--border); background: var(--black); } .tabbar button { flex: 1 1 auto; border: none; border-right: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 4px; font-size: 9.5px; letter-spacing: 0.06em; color: var(--muted); } /* Onglet courant : inversé blanc sur noir, comme partout. */ .tabbar button.active { color: var(--black); background: var(--white); font-weight: 900; } .tabpane { display: none; } .tabpane.active { display: block; } /* ===== Résumé client & raccourcis ===== */ /* .c-sum : lignes « étiquette / valeur » du résumé (nb de projecteurs, puissance totale…) ; .sc-table : le tableau des raccourcis clavier dans sa modale. */ .c-sum { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: var(--light); } .c-sum span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; } .sc-table { width: 100%; border-collapse: collapse; font-size: 12px; } .sc-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sc-table td:first-child { font-weight: 700; white-space: nowrap; } .onboard p { font-size: 13px; line-height: 1.6; color: var(--light); } /* ============================================================ 6. COMPTE / PARTAGE / COMMENTAIRES / CHECKLIST ============================================================ */ /* ===== Compte / connexion ===== */ /* La pastille du compte connecté (initiales) tout à droite de la topbar. */ .user-chip { border-color: var(--white); font-weight: 900; } /* Le voile de la modale de connexion est plus opaque (0.92) que les autres : tant qu'on n'est pas connecté, l'application derrière doit rester illisible. */ .auth-back { background: rgba(0, 0, 0, 0.92); } .auth-modal { width: min(380px, 92vw); } .auth-form { padding: 16px; } .auth-intro { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.5; } /* Rouge adouci pour les erreurs de connexion : entorse tolérée à la charte, une erreur DOIT se distinguer au premier regard. */ .auth-error { color: #ff8080; font-size: 12px; margin: 0 0 10px; } .auth-form button[type="submit"] { width: 100%; padding: 10px; } /* ===== Partage ===== */ /* Contenu de la modale Partager : description + lignes « champ URL en lecture + bouton Copier » pour le lien lecture et le lien édition. */ .share-desc { margin: 4px 0 8px; font-size: 11px; color: var(--muted); line-height: 1.5; } .share-row { display: flex; gap: 6px; margin-bottom: 12px; } .share-row input[type="text"], .share-row input[type="password"] { flex: 1 1 auto; font-size: 11px; } .share-row select { width: auto; } /* ===== Commentaires ===== */ /* L'onglet 💬 de la sidebar. La liste défile dans sa propre zone (max-height) pour laisser le formulaire d'envoi toujours visible. */ .comments { max-height: 260px; overflow-y: auto; margin-bottom: 10px; } /* Une ligne de commentaire : épingle | texte | petits boutons. */ .c-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 11px; line-height: 1.45; } /* Commentaire marqué « traité » : estompé mais toujours lisible. */ .c-row.done { opacity: 0.45; } /* .flash : surbrillance brève quand on clique l'épingle sur le plan pour retrouver le commentaire correspondant dans la liste. */ .c-row.flash { background: var(--dark); outline: 1px solid var(--white); } /* L'épingle numérotée, jaune (même jaune fonctionnel que l'étoile des favoris) : cliquer dessus recentre le plan sur l'endroit visé. */ .c-pin { flex: 0 0 22px; height: 22px; padding: 0; font-size: 10px; font-weight: 900; background: #e8d44d; color: #000; border: none; } /* Variante pour un commentaire SANS épingle : case neutre. */ .c-nopin { background: transparent; color: var(--mid); text-align: center; } .c-main { flex: 1 1 auto; color: var(--light); } .c-author { font-weight: 700; color: var(--white); } .c-when { color: var(--mid); font-size: 10px; } /* Boutons ✓ (traité) et 🗑 (supprimer) d'une ligne. */ .c-btns { display: flex; gap: 4px; align-items: center; } .c-btns button { padding: 0 6px; font-size: 12px; border: none; color: var(--muted); } /* resize:vertical : on peut agrandir la zone de saisie vers le bas, mais pas en largeur (ce qui casserait la colonne). */ .comment-form textarea { resize: vertical; } .comment-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; } /* Bouton 📍 Épingler en mode « armé » (on attend le clic sur le plan). */ .comment-actions button.on { background: var(--white); color: var(--black); } /* ===== Checklist ===== */ /* La checklist de préparation du tournage (dans la modale). Une ligne = case + texte + bouton supprimer. */ .ck-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; } /* Tâche cochée : barrée et grisée. */ .ck-row.done .ck-text { text-decoration: line-through; color: var(--mid); } .ck-row input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: #fff; } .ck-text { flex: 1 1 auto; } .ck-row button { border: none; padding: 0 6px; color: var(--muted); } /* La ligne d'ajout : champ texte + bouton. */ .ck-add { display: flex; gap: 6px; margin: 8px 0 4px; } .ck-add button { flex: 0 0 auto; } /* ============================================================ 7. MODES PARTAGÉS & IMPRESSION ============================================================ */ /* ===== Modes partagés ===== */ /* Quand on ouvre un LIEN de partage, js/90-collaboration.js pose la classe share-view (lecture seule) ou share-edit (édition invitée) sur le . Ces règles CACHENT alors tout ce que l'invité n'a pas le droit de faire — c'est un confort d'interface ; la vraie interdiction, elle, est appliquée côté serveur par api.php. */ /* Lecture seule : ni palette, ni sauvegarde, ni gestion de plans… */ body.share-view .palette, body.share-view .hint, body.share-view #btnSave, body.share-view #btnVersion, body.share-view #btnNew, body.share-view #btnList, body.share-view #btnShare, body.share-view #btnCheck, body.share-view #btnSnap { display: none; } /* Édition invitée : on peut modifier et enregistrer, mais pas créer d'autres plans, lister « Mes plans », versionner ni re-partager. */ body.share-edit #btnNew, body.share-edit #btnList, body.share-edit #btnVersion, body.share-edit #btnShare { display: none; } /* En lecture seule, le nom du plan devient un simple texte figé. */ body.share-view .name-input { border-color: transparent; pointer-events: none; } /* ===== Impression / PDF ===== */ /* Principe de la sortie papier : la
est INVISIBLE à l'écran ; quand on lance Imprimer / PDF, js/80-sorties.js la remplit (plan, légende, fiche, notes) puis, sous @media print, on masque TOUTE la page SAUF elle. Le document imprimé est donc composé ici, en noir sur blanc, en unités d'imprimerie (pt, mm). */ #printView { display: none; } /* Format de page imposé au navigateur : A4 vertical, marges 12 mm. */ @page { size: A4 portrait; margin: 12mm; } @media print { /* On rétablit un document qui défile normalement (l'écran est en overflow:hidden) et on inverse les couleurs : noir sur blanc. */ html, body { display: block; overflow: visible; background: #ffffff; color: #000000; height: auto; } /* La bascule clef : tout enfant direct du body SAUF #printView disparaît du papier. */ body > *:not(#printView) { display: none !important; } #printView { display: block !important; font-family: Montserrat, Arial, sans-serif; color: #000000; } #printView h1 { margin: 0 0 8px; font-size: 22pt; font-weight: 900; text-transform: uppercase; line-height: 1; } #printView h2 { margin: 14pt 0 6pt; font-size: 12pt; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid #000; padding-bottom: 2pt; } #printView h3 { margin: 8pt 0 3pt; font-size: 10pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* .p-meta : le cartouche d'en-tête (projet, version, date, auteur). */ #printView .p-meta { border-collapse: collapse; font-size: 9pt; margin-bottom: 8pt; } #printView .p-meta td { border: 1px solid #000; padding: 3pt 8pt; } #printView .p-meta td:nth-child(odd) { font-weight: 700; text-transform: uppercase; font-size: 8pt; background: #f0f0f0; } /* Mention des calques masqués à l'impression. */ #printView .p-hidden { font-size: 8pt; color: #555; margin: 0 0 4pt; } /* Le plan lui-même : SVG pleine largeur dans un cadre noir. */ #printView .p-plan svg { width: 100%; height: auto; border: 1px solid #000; } /* page-break-inside:avoid : interdit de couper un bloc (légende, fiche…) à cheval sur deux pages. */ #printView .p-block { page-break-inside: avoid; } /* Le tableau de légende imprimé. */ #printView .p-legend { width: 100%; border-collapse: collapse; font-size: 9pt; } #printView .p-legend td { border: 1px solid #999; padding: 2pt 6pt; vertical-align: top; } #printView .p-legend td:first-child { font-weight: 900; width: 32pt; } #printView ul { margin: 0 0 6pt; padding-left: 14pt; font-size: 9pt; line-height: 1.5; } #printView .p-notes { font-size: 9pt; line-height: 1.5; margin: 0; } /* Pied de page discret (« généré par Plan de plateau… »). */ #printView .p-footer { margin-top: 10pt; font-size: 7pt; color: #777; text-align: right; } } /* ===== Responsive minimal (outil pensé pour desktop) ===== */ /* Sous 900 px on resserre juste les colonnes latérales et on retire la ligne d'aide — dessiner un plan de plateau au téléphone n'est pas un cas d'usage visé. */ @media (max-width: 900px) { .palette { flex-basis: 150px; } .sidebar { flex-basis: 220px; } .hint { display: none; } } /* ============================================================ 8. Ajouts juillet 2026 — gels, DMX, élec, outils cadrage/coupe (styles des nouveaux blocs du panneau propriétés et des deux modales « Outil focales / cadre » et « Coupe verticale ») ============================================================ */ /* Avertissement rouge (conflit DMX, surcharge circuit) dans les propriétés */ .prop-warn { color: #e05555; font-size: 12px; font-weight: 600; margin: 6px 0; } /* Pastille montrant la couleur résultante d'une gélatine de correction */ .gel-swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--border); vertical-align: -2px; margin-right: 4px; } /* Ligne à case à cocher (ombre projetée, face active des panneaux) */ .check-row { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--light); margin: 8px 0; cursor: pointer; } /* Outil focales / cadre : schéma silhouette + valeurs côte à côte */ .cad-out { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; } .cad-schema svg { color: var(--light); /* la silhouette et le cadre héritent via currentColor */ } .cad-vals { flex: 1; min-width: 0; } /* Coupe verticale : le SVG de la coupe dans un cadre fin */ .coupe-wrap { border: 1px solid var(--border); background: #0b0b0b; } .coupe-axes { margin-bottom: 10px; }