/* Police Inter HÉBERGÉE EN LOCAL (fichier variable : couvre les graisses 100→900 en un seul .woff2). Aucune dépendance réseau ; repli system-ui si le fichier manque. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2"); } /* Sous-ensemble GREC (α, β, γ…) — sinon ces caractères basculent sur une police système (rendu plus petit / plus fin que le latin). unicode-range = bascule auto par caractère. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } :root { /* Surfaces & neutres */ --bg: #eaeef4; --card: #ffffff; --surface-2: #f4f6fa; --border: #dde3ec; --line: #e7ebf1; --readonly-bg: #eff2f7; /* Encre / texte (encre légèrement marine pour coller à la marque) */ --text: #14283a; --muted: #79818f; /* ── IDENTITÉ UNIVEIRA — couleurs OFFICIELLES du Cahier des normes graphiques (éd. 2018, v3.83) : marine Pantone 2955C #00395f + bleu clair Pantone 7689C #5795c5 (les valeurs approchées historiques #01395f / #83a4cb sont alignées sur la charte). ── */ --brand-navy: #00395f; /* marine du logotype (Pantone 2955C) */ --brand-steel: #5795c5; /* bleu clair du logotype (Pantone 7689C) */ --brand-gradient: linear-gradient(135deg, #5795c5 0%, #00395f 100%); /* rappel du logomark */ /* Accent = bleu de marque + variantes */ --accent: #15567f; /* bleu marine moyen (interactions, liens, étapes) */ --accent-strong: #00395f; /* marine de marque (états forts — Pantone 2955C, v3.83) */ --accent-soft: #e9f0f6; /* fond bleu très clair */ --accent-line: #b9d0e4; /* bord bleu acier clair */ /* Sémantiques */ --ok: #15803d; --warn: #c2410c; --err: #dc2626; /* Rayons & ombres — (v3.72) échelle RESSERRÉE (revue design « pro ») : cartes 10, contrôles 6. La pilule (999px) est RÉSERVÉE aux statuts/badges — quand tout est pilule, rien n'est un statut. */ --r-sm: 6px; --r: 10px; --shadow-sm: 0 1px 2px rgba(20,30,50,.06); --shadow: 0 1px 2px rgba(20,30,50,.04), 0 8px 24px rgba(20,30,50,.06); /* ── ÉCHELLE TYPOGRAPHIQUE (v3.92, revue design « pro » — point 3) : 12 PALIERS, consolidés depuis ~25 valeurs ad hoc (fusions ≤ 0,05 rem, sans changement de densité perceptible). ⚠️ Toute NOUVELLE font-size doit prendre un de ces paliers — ne pas en inventer : 0.64 badges / chips (« estimé », dyn., n° d'étape) 0.72 aides, notes, mentions, effets de paramètre 0.78 petits libellés, dividers de section, méta 0.82 libellés secondaires, petits boutons, corps dense admin 0.85 boutons standard, libellés de champ, tableaux 0.9 corps courant (notes de devis, cartes, saisies) 0.95 corps appuyé (champs, selects, valeurs de réglage) 1 base (aide contact, texte long) 1.05 titres de carte (bandeau), champ A mis en avant 1.14 grands titres internes (nom de tuile inclus → 1.25) 1.25 titres de scène / d'écran (tuiles, pickers en mobile) 1.5 titre de page (bandeau) et marque (connexion) */ } * { box-sizing: border-box; } body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* (v3.76) FOND D'IMAGE fourni par l'utilisateur (Fond.pdf → PNGs/fond.png, Ghostscript) : motif géométrique clair, posé en COVER FIXE sous un VOILE blanc translucide — le motif reste perceptible sans nuire à la lisibilité des cartes blanches. Repli : la couleur de fond bleu-gris si l'image manque. (À l'impression : fond blanc, cf. @media print.) */ background-color: #e9eff3; background-image: linear-gradient(180deg, rgba(247, 250, 252, 0.75) 0%, rgba(233, 241, 245, 0.82) 100%), url("../PNGs/fond.png"); background-size: auto, cover; background-position: center; background-attachment: fixed; color: var(--text); margin: 0; padding: 38px 20px 64px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container { max-width: 1160px; margin: 0 auto; } /* ── Bandeau d'en-tête (identité + titre + version) ── */ .app-header { display: flex; align-items: center; gap: 18px; /* (v3.89, corrigé v3.90) Couleur PANTONE 7689 C officielle (#5795c5, --brand-steel), pas de teinte inventée. (v3.90 — retour utilisateur : « toujours trop clair ») Le dégradé 0%→100% de la v3.89 étalait le mélange clair/foncé sur TOUTE la largeur → la majeure partie du bandeau restait plus claire que le Pantone. Le point de couleur PURE est avancé à 22% : l'éclaircissement ne reste visible que dans le coin gauche, tout le reste du bandeau affiche la couleur officielle telle quelle. */ background: linear-gradient(90deg, #83b1d4 0%, #5795c5 22%); color: var(--brand-navy); border-bottom: 1px solid var(--border); padding: 15px 30px; /* Full-bleed : on compense le padding du body (38px haut, 20px gauche/droite) → bannière bord à bord. */ margin: -38px -20px 18px; box-shadow: var(--shadow); } /* Bannière PLEINE LARGEUR (v1.88) : le header est hors du .container (1160px) → il s'étend bord à bord. */ /* (v3.85) LOGO BICOLORE D'ORIGINE, fluide (filtres « blanc » v3.84 et plaque v3.83 retirés) : sur la bannière claire, le logotype officiel ressort naturellement. */ .app-brand { display: flex; align-items: center; gap: 11px; padding-right: 18px; border-right: 1px solid rgba(0, 57, 95, 0.18); white-space: nowrap; } .app-logo { height: 42px; width: auto; display: block; } /* Wordmark = vraie typo officielle (découpée du logo) — marine d'origine sur fond clair. */ .app-wordmark-img { height: 21px; width: auto; display: block; } .app-title { font-size: 1.5rem; /* titre de page DOMINANT (échelle typo claire, v2.77) */ font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; } /* (v3.23) .app-subtitle, .app-version et .client-test-btn : éléments retirés du bandeau (revue dirigeants) — styles supprimés. */ /* ── (v3.80/v3.82) SOUS-BARRE D'EN-TÊTE (vue client) : barre blanche pleine largeur COLLÉE au bandeau marine (marges négatives : -18px = le margin-bottom du header, -20px = le padding latéral du body). Depuis la v3.82 elle ne porte QUE le fil d'avancement, CENTRÉ (retour utilisateur — les repères de confiance sont montés dans le bandeau, sous le titre). ── */ .header-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 28px; margin: -18px -20px 24px; padding: 7px 28px; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } @media print { .header-sub, .trust-bar { display: none !important; } } /* Repères de confiance (v2.80) : DANS le bandeau depuis la v3.82, sous le titre — (v3.85) petits liens bleu accent sur la bannière CLAIRE. */ .app-title-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .trust-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; font-size: 0.72rem; color: var(--muted); } .trust-item { font-weight: 600; } .trust-flag { margin-right: 5px; } .trust-sep { color: var(--muted); } /* (v3.88) Marine PLEIN (au lieu de --accent, plus clair) — la bannière assombrie réduisait trop le contraste de l'ancien bleu accent (~2,4:1). Hover : encre la plus sombre du site. */ .trust-link { color: var(--brand-navy); text-decoration: none; } .trust-link:hover, .trust-link:focus-visible { text-decoration: underline; color: var(--text); } /* ── FIL D'AVANCEMENT client (v3.64, #clientSteps) : 4 étapes numérotées — étape courante en accent plein, étapes passées cochées (✓), à venir grisées. Purement indicatif (non cliquable). (v3.80) Groupe de la sous-barre, plus une bande à part. ── */ .client-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: 0.78rem; font-weight: 600; color: var(--muted); } .client-steps li { display: inline-flex; align-items: center; gap: 7px; } .client-steps li::before { content: attr(data-step); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--surface-2); font-size: 0.72rem; font-weight: 700; color: var(--muted); } .client-steps li.is-current { color: var(--accent-strong); } .client-steps li.is-current::before { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .client-steps li.is-done { color: var(--accent); } .client-steps li.is-done::before { content: "✓"; background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } /* (Phase 2c) L'étape « Type d'outil » franchie est cliquable → retour aux tuiles (app.js). */ .client-steps li[data-step="1"].is-done { cursor: pointer; } .client-steps li[data-step="1"].is-done:hover { text-decoration: underline; } @media print { .client-steps { display: none; } } /* ── CONNEXION PROTOTYPE (v3.69) : écran plein + badge de profil + déconnexion ── ⚠️ Cosmétique, pas une sécurité (comme client-only/admin-only) — vraie identification serveur à la mise en ligne. */ .login-screen { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--brand-gradient); } .login-screen[hidden] { display: none; } .login-card { background: #fff; border-radius: 16px; padding: 36px 40px; max-width: 430px; width: 100%; box-shadow: 0 24px 70px rgba(1,32,56,.45); text-align: center; } .login-brand { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.14em; color: var(--brand-navy); } .login-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; } .login-ask { margin: 26px 0 4px; font-weight: 600; color: var(--text); font-size: 0.95rem; } .login-btn { display: block; width: 100%; margin-top: 12px; padding: 13px 16px; font: inherit; font-size: 0.95rem; font-weight: 700; border-radius: var(--r-sm); cursor: pointer; transition: filter .15s, background .15s; } .login-btn--client { border: none; background: var(--brand-gradient); color: #fff; } .login-btn--client:hover { filter: brightness(1.12); } /* .login-btn--admin : couleurs héritées du SYSTÈME DE BOUTONS niveau 2 (fin de feuille, v3.91). */ .login-note { margin: 20px 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.5; } /* Connecté : la vue découle du profil → commutateur Client/Admin masqué ; badge à sa place. */ body.auth-client .view-switch, body.auth-admin .view-switch { display: none; } .role-badge { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--brand-navy); white-space: nowrap; } /* (v3.85, opacité retirée v3.88 : bannière assombrie) */ .role-badge[hidden] { display: none; } @media print { .login-screen, .role-badge, #btnLogout { display: none !important; } } /* ── Commutateur de vue CLIENT / ADMIN (bandeau) ── */ /* (v3.85) Bannière CLAIRE : le commutateur passe en marine-sur-clair (actif = pilule marine). */ .view-switch { margin-left: auto; display: flex; gap: 2px; background: rgba(0, 57, 95, 0.08); border-radius: 999px; padding: 3px; } .view-btn { border: none; background: transparent; color: rgba(0, 57, 95, 0.88); /* (v3.88) 0.7 → 0.88 : bannière assombrie, il fallait plus de contraste */ font-size: 0.82rem; font-family: inherit; padding: 4px 16px; border-radius: 999px; cursor: pointer; } .view-btn.active { background: var(--brand-navy); color: #fff; font-weight: 600; } /* (v5.06) La case « Voir les formules » du bandeau a été retirée : en vue admin, chaque champ à formule porte sa flèche ▸ qui déplie/édite SA formule (styles .formula-toggle plus bas). */ /* (v3.23) Le FIL D'ÉTAPES (stepper horizontal v1.0 + rail vertical v1.87) est SUPPRIMÉ (revue dirigeants). On conserve la largeur de contenu élargie des écrans larges (le layout client à 3 colonnes — schéma | cotes | devis compact — en profite). */ @media (min-width: 1200px) { body.view-client .container { max-width: 1380px; } } /* ── VUE CLIENT : ne garder que l'essentiel (sélection, schémas, dimensions, couple + alerte, prix). Le « moteur » (formules, encombrement, usinage, variables, détail du devis) est réservé à la vue ADMIN. ⚠️ Masquage PUREMENT VISUEL (aperçu de la future séparation client/serveur) : le vrai cloisonnement se fera côté serveur — ce n'est PAS de la sécurité. ── */ body.view-client .admin-only { display: none !important; } body.view-client .formula-edit { display: none !important; } /* Notes techniques masquées, SAUF la note de couple max et l'état du devis (les deux informations que le client doit voir). */ body.view-client .auto-note:not(#coupleMaxNote):not(#devisNote) { display: none !important; } /* ── VUE ADMIN : mode COMPACT (v0.80, refondu v0.81) ── L'admin voit les MÊMES champs que le client (source de vérité unique : la valeur retenue est rappelée en NOIR à côté du libellé — .label-val), mais en densité maximale : FORMULES masquées par défaut (case « Voir les formules » du bandeau pour tout afficher, flèche ▸ d'un champ pour les siennes), cartes Dimensions + Options FUSIONNÉES en une liste dense sans titres (déplacement par setView). ── */ /* (v5.06) Formules masquées par défaut ; affichées CHAMP PAR CHAMP via la flèche ▸ du champ (bascule .formula-open sur le champ → SA formule seulement). Plus de case globale « Voir les formules ». L'attribut [hidden] — formule inapplicable au contexte (ex. B hors fourche) — garde toujours la priorité. */ body.view-admin .formula-edit { display: none; } body.view-admin .field.formula-open .formula-edit:not([hidden]) { display: flex; } /* (v5.28) Panneau tuyauter ALIGNÉ sur le régime « par champ » (demande utilisateur — les formules et provenances s'affichaient d'office, sans flèche). La flèche ▸ de la RANGÉE (.tuy-cote-label, câblée par buildTuyPanel) pose .tuy-open sur les deux cellules ; la FORMULE ne se montre en plus que si c'est ELLE qui a fixé la valeur (.tuy-formula-used — MIN(palier voisin, formule) gagné par la formule : « Plafonnée / Estimée par formule »). */ body.view-admin .tuy-admin.tuy-open.tuy-formula-used .formula-edit:not([hidden]) { display: flex; } body.view-admin .tuy-cote-label .formula-toggle { display: inline-block; } /* ── MODULE COUPLE (RdM) lisible en vue admin (v1.43) : les 3 modes de ruine sont TOUJOURS affichés en lignes claires [mode · formule éditable · résultat]. Le mode qui GOUVERNE le couple max (le min des 3 = maillon faible) est DÉMARQUÉ en bleu (informatif). Il ne passe en ROUGE (alarmant) que si le couple CIBLE saisi DÉPASSE cette capacité (.mode-danger). (Le client, lui, ne voit aucune formule.) ── */ /* (v5.10) Les 3 modes de ruine se DÉPLIENT via la flèche ▸ du champ Couple (comme tous les champs à formule — demande utilisateur : la flèche ne « faisait rien ») : masqués par défaut, affichés quand le champ porte .formula-open. */ body.view-admin .couple-field.formula-open .formula-edit:not([hidden]) { display: flex !important; align-items: center; gap: 8px; margin: 5px 0; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; } body.view-admin .couple-field .formula-label { flex: 0 0 96px; margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; } body.view-admin .couple-field .formula-input { flex: 1 1 auto; min-width: 0; } /* (v5.10) taille = base commune */ body.view-admin .couple-field .formula-result { flex: 0 0 auto; font-size: 0.82rem; font-weight: 700; font-style: normal; color: var(--text); white-space: nowrap; } /* Maillon faible DÉMARQUÉ (bleu, informatif — pas d'alarme). */ body.view-admin .couple-field .formula-edit.mode-governs { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; } body.view-admin .couple-field .formula-edit.mode-governs .formula-label, body.view-admin .couple-field .formula-edit.mode-governs .formula-result { color: var(--accent-strong); } /* ALARME (rouge) : posée par refreshCoupleDisplay UNIQUEMENT quand le couple cible saisi dépasse la capacité (le plus faible couple calculé). */ body.view-admin .couple-field .formula-edit.mode-governs.mode-danger { background: #fdecec; border-color: var(--err); box-shadow: 0 0 0 2px var(--err) inset; } body.view-admin .couple-field .formula-edit.mode-governs.mode-danger .formula-label, body.view-admin .couple-field .formula-edit.mode-governs.mode-danger .formula-result { color: var(--err); } /* (v5.10) La flèche ▸ du champ Couple est RÉACTIVÉE : elle déplie/replie les 3 modes de ruine (câblage générique des flèches — .formula-open sur le champ — déjà en place). */ /* ── Bannière COUPLE (vue admin, v1.45) : le module RdM séparé des cotes, SOUS les cotes + options. Le couple cible CLIENT y est en LECTURE SEULE (pas de champ d'ajustement). ── */ body.view-admin #cardCouple .label-val { display: none; } /* valeur déjà lisible dans le champ */ body.view-admin #cardCouple #couple { background: var(--surface-2); cursor: default; } body.view-admin #cardCouple #couple:focus { outline: none; box-shadow: none; } /* ── CATALOGUE RÉALISÉ (Phase 4, v1.46) : tableau éditable des pièces réalisées. ── */ #cardCatalogue .cat-sub { color: var(--muted); font-size: 0.85rem; margin: 0 0 14px; } .cat-table-wrap { overflow-x: auto; } .cat-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .cat-table th { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--border); } /* pas d'uppercase : garde α/β/γ minuscules (v2.87) */ .cat-table td { padding: 3px 6px; border-bottom: 1px solid var(--line); } .cat-table tbody tr:hover { background: var(--surface-2); } .cat-table .cat-ref { color: var(--muted); font-size: 0.78rem; white-space: nowrap; } .cat-cell { width: 54px; padding: 5px 7px; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 0; font-variant-numeric: tabular-nums; background: #fff; } .cat-cell:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .cat-del { border: none; background: none; color: var(--muted); font-size: 1.14rem; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: var(--r-sm); } .cat-del:hover { color: var(--err); background: #fdecec; } /* ── Catalogue admin — TABLEAU ÉDITABLE « grille » (comme prix acier, v2.90) : réfs en lignes, cotes + options en colonnes. En-tête + 1re colonne (réf) COLLANTS pour parcourir un large tableau ; cases VIDES grisées, valeurs renseignées en évidence (blanches + semi-grasses). ── */ .cat-table-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); } .cat-table--grid { border-collapse: separate; border-spacing: 0; min-width: 100%; } .cat-table--grid thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-bottom: 2px solid var(--border); padding: 8px 9px; text-align: center; white-space: nowrap; } .cat-table--grid td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; } /* Zébrure douce + surlignage de ligne au survol. */ .cat-table--grid tbody tr:nth-child(even) { background: var(--surface-2); } .cat-table--grid tbody tr:hover { background: var(--accent-soft); } /* Colonne RÉFÉRENCE : collante à gauche (fond opaque suivant la zébrure/survol). */ .cat-table--grid th.cat-ref-col, .cat-table--grid td.cat-ref-col { position: sticky; left: 0; z-index: 2; text-align: left; white-space: nowrap; } .cat-table--grid thead th.cat-ref-col { z-index: 4; } .cat-table--grid tbody td.cat-ref-col { background: #fff; font-weight: 600; color: var(--text); font-size: 0.82rem; box-shadow: 1px 0 0 var(--line); } .cat-table--grid tbody tr:nth-child(even) td.cat-ref-col { background: var(--surface-2); } .cat-table--grid tbody tr:hover td.cat-ref-col { background: var(--accent-soft); } /* Cases : remplie = blanche + semi-grasse (ressort) ; VIDE = grisée + placeholder discret. */ .cat-table--grid .cat-cell { margin: 0 auto; text-align: center; } .cat-table--grid .cat-cell:not(.cat-cell--empty) { background: #fff; font-weight: 600; color: var(--text); } .cat-table--grid .cat-cell--empty { background: var(--surface-2); border-color: var(--line); color: var(--muted); } .cat-table--grid .cat-cell--empty::placeholder { color: var(--border); } .cat-table--grid .cat-cell--empty:focus { background: #fff; color: var(--text); border-color: var(--accent); } .cat-table--grid .cat-cell--emp { width: 92px; text-align: left; } /* Plan / validation / suppression : centrés, compacts. */ .cat-table--grid .cat-plan-cell { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .cat-table--grid .cat-val-cell { text-align: center; } .cat-empty { color: var(--muted); font-size: 0.85rem; margin: 0 0 10px; } /* (v4.11 → v4.15) LIGNES STANDARD STAHLWILLE — RÉFÉRENCE intégrée au tableau, intercalée par A. (v4.15, demande utilisateur) HARMONISÉES avec les lignes UNIVEIRA : plus de fond teinté ni de réf accentuée — elles s'affichent à l'identique (mêmes cases, éditables si « Éditer les valeurs »), seule la réf « Stahlwille … » les distingue. La réf reste sur une ligne. */ .cat-table--grid tbody tr.cat-std-row td.cat-ref-col { white-space: nowrap; } .cat-actions { margin-top: 14px; } /* (v4.10) Barre au-dessus du tableau : sous-titre à gauche, case « Éditer les valeurs » à DROITE. Les cases sont NON éditables par défaut ; cliquer une case verrouillée remonte à cette case (défilement fluide) et l'ENCADRE (animation). */ .cat-editbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } #cardCatalogue .cat-editbar .cat-sub { margin: 0; } .cat-editlab { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); transition: border-color .12s, box-shadow .12s, background .12s; } .cat-editlab:hover { border-color: var(--accent); background: var(--accent-soft); } .cat-editlab input { accent-color: var(--accent); cursor: pointer; margin: 0; } .cat-editlab--flash { animation: catEditFlash 1.6s ease-out; } @keyframes catEditFlash { 0%, 45% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--accent-soft); } 100% { border-color: var(--border); box-shadow: 0 0 0 3px rgba(1,57,95,0); background: var(--card); } } /* Tableau VERROUILLÉ : les cases invitent au clic (curseur), la suppression est masquée (édition indisponible tant que « Éditer les valeurs » n'est pas coché). (v4.14) Les cases VERROUILLÉES s'affichent comme des VALEURS, pas des champs (retour utilisateur : distinguer visiblement l'éditable du non-éditable) — pas de bordure/fond de champ, pas de liseré au focus. L'aspect « champ » (bordure + fond blanc) est réservé au mode ÉDITION. */ .cat-table--locked .cat-cell[readonly] { cursor: pointer; /* clic → rappel « Éditer les valeurs » */ border-color: transparent; background: transparent; box-shadow: none; } .cat-table--locked .cat-cell[readonly]:focus { border-color: transparent; box-shadow: none; } .cat-table--locked .cat-cell--empty[readonly] { background: transparent; } /* vide : pas la trame grise du champ */ .cat-table--locked .cat-del { display: none; } /* (v4.17) Bouton « Changer » / « + Plan » du plan client : visible SEULEMENT en mode ÉDITION (demande utilisateur) — masqué tant que « Éditer les valeurs » n'est pas coché. La miniature (.cat-thumb) reste, pour consulter/agrandir le plan. */ .cat-table--locked .cat-plan { display: none; } /* (v4.60) RÉFÉRENCE ÉDITABLE (input) : rendue quand la ligne est éditable — « Éditer les valeurs » coché, OU pièce « en attente » (nouvellement ajoutée). Aspect champ, comme .cat-cell. */ .cat-ref-input { width: 120px; max-width: 120px; padding: 5px 7px; font-size: 0.82rem; font-weight: 600; color: var(--text); border: 1px solid var(--border); border-radius: 0; background: #fff; font-family: inherit; } .cat-ref-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .cat-lastcell { white-space: nowrap; } /* (v4.60) Bouton « Valider » temporaire d'une pièce en attente : finalise la ligne (retire l'édition forcée → elle rejoint le tri par A et repasse en lecture seule sauf « Éditer les valeurs »). */ .cat-valider { border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; padding: 4px 11px; border-radius: var(--r-sm); margin-right: 4px; } .cat-valider:hover { background: var(--accent-strong); border-color: var(--accent-strong); } /* Ligne « en attente » : léger repère ambré + contrôles rétablis même quand la table est verrouillée. */ .cat-table--grid tbody tr.cat-row-pending td, .cat-table--grid tbody tr.cat-row-pending td.cat-ref-col { background: #fffdf2; } .cat-table--locked .cat-row-pending .cat-del, .cat-table--locked .cat-row-pending .cat-plan { display: inline-block; } /* (v4.13) PRIX ACIER verrouillé (même système que le catalogue) : barre d'édition à droite (le sous-titre est un paragraphe à part), suppression masquée, cases en VALEURS (v4.14). */ .cat-editbar--end { justify-content: flex-end; } .prix-locked .prix-del-table { display: none; } .prix-locked .prix-cell[readonly], .prix-locked .prix-ref[readonly], .prix-locked .prix-fourn[readonly], .prix-locked .prix-lb[readonly] { cursor: pointer; border-color: transparent; background: transparent; box-shadow: none; } .prix-locked .prix-cell[readonly]:focus, .prix-locked .prix-ref[readonly]:focus, .prix-locked .prix-fourn[readonly]:focus, .prix-locked .prix-lb[readonly]:focus { border-color: transparent; box-shadow: none; } /* (v4.09) INFOBULLE MAISON (.has-tip + data-tip) — apparition IMMÉDIATE (le `title` natif était lent ~1 s + style OS incohérent, retour utilisateur) et aux couleurs du site (marine). Ancrée SOUS l'élément et à DROITE (croît vers la gauche) pour ne pas être rognée par le conteneur scrollable du catalogue (#catalogueTable, overflow:auto). Réutilisable partout. */ .has-tip { cursor: help; } .has-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; max-width: 240px; white-space: normal; text-align: left; background: var(--brand-navy); color: #fff; font-size: 0.72rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; padding: 7px 10px; border-radius: var(--r-sm); box-shadow: var(--shadow); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; } .has-tip:hover::after, .has-tip:focus-visible::after { opacity: 1; transform: translateY(0); } /* La cellule d'en-tête « valid. » est déjà `position: sticky` (donc positionnée → ancre de l'infobulle) ; ailleurs, .has-tip fournit lui-même le contexte de positionnement. */ .has-tip:not(th):not(td) { position: relative; } /* Sélecteur de PAGE du catalogue (type + attachement, v1.87). */ .cat-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 12px; } .cat-nav label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--text); } .cat-nav select { font: inherit; font-size: 0.82rem; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--text); cursor: pointer; } .cat-nav select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } /* Vue catalogue (v1.72) : barre d'outils + vue COMPACTE (réf + A, cotes dépliables au chevron). */ .cat-toolbar { margin: 0 0 8px; } .btn-mini { font: inherit; font-size: 0.78rem; padding: 4px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; cursor: pointer; color: var(--text); } .btn-mini:hover { background: var(--accent-soft); border-color: var(--accent-line); } .cat-table--compact .cat-ref { font-size: 0.82rem; color: var(--text); font-weight: 600; } .cat-table th.cat-exp, .cat-table td.cat-exp { width: 26px; padding-left: 4px; padding-right: 0; } .cat-expand { background: none; border: none; cursor: pointer; font-size: 0.72rem; color: var(--accent); padding: 2px 4px; line-height: 1; } .cat-expand:hover { color: var(--accent-strong); } .cat-detail > td { padding: 2px 8px 10px 22px; background: var(--surface-2); border-bottom: 1px solid var(--line); } /* 22px = largeur colonne ▶ : aligne les cotes sous la référence (v2.88) */ /* Champs (inputs/selects) des onglets Catalogue & Prix acier : coins DROITS, pour cohérence avec les cellules du tableau (lecture dense). Les BOUTONS gardent leurs coins arrondis — distinction claire champ/action (v2.88). */ #cardCatalogue input, #cardCatalogue select, #cardPrixAcier input, #cardPrixAcier select { border-radius: 0; } .cat-detail-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .cat-detail-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; } /* Pas de text-transform:uppercase : les cotes sont déjà en majuscules (A/B/H/S…) et l'uppercase transformerait les options grecques α/β/γ en Α/Β/Γ (≡ A/B/Γ latins) → faux doublons (v2.87). */ .cat-detail-field > span { color: var(--muted); letter-spacing: 0.03em; font-size: 0.64rem; font-weight: 700; } .cat-detail-actions { margin-left: auto; align-self: center; } /* Vue compacte v1.93 : cotes/options VISIBLES en lecture seule par défaut ; la flèche passe la ligne en édition. Une cellule readonly s'affiche comme une VALEUR (sans bordure ni fond) ; en édition elle reprend l'aspect d'un champ (la règle de base input[type=...] redonne bordure/fond). */ .cat-cell[readonly] { border-color: transparent; background: transparent; box-shadow: none; cursor: default; padding-left: 2px; } .cat-detail-emp .cat-cell--emp[readonly] { white-space: nowrap; } .cat-detail .cat-detail-actions { display: none; } /* suppression cachée hors édition */ .cat-detail.cat-editing .cat-detail-actions { display: block; } .cat-expand.is-editing { color: var(--accent-strong); font-weight: 700; } .cat-detail.cat-editing > td { background: var(--accent-soft); } /* ligne en cours d'édition mise en avant */ /* Ligne NON éditée (réf repliée) : cotes + libellés plus petits → lecture rapide (v2.05). */ .cat-detail:not(.cat-editing) .cat-detail-grid { gap: 5px 12px; } .cat-detail:not(.cat-editing) .cat-detail-field { font-size: 0.64rem; gap: 0; } .cat-detail:not(.cat-editing) .cat-detail-field > span { font-size: 0.64rem; } .cat-detail:not(.cat-editing) .cat-cell[readonly] { font-size: 0.72rem; } .cat-detail:not(.cat-editing) .cat-cell:not(.cat-cell--emp)[readonly] { width: 40px; } /* Options à zéro / empreinte vide : masquées en lecture seule, réaffichées à l'édition (v2.05). */ .cat-detail:not(.cat-editing) .cat-detail-field.cat-opt-zero { display: none; } /* Recherche par référence (v2.05) : champ + table de résultats. */ .cat-search-lab input { font: inherit; font-size: 0.82rem; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--text); min-width: 150px; } .cat-search-lab input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .cat-table--search .cat-search-meta { color: var(--muted); font-size: 0.78rem; white-space: nowrap; } .cat-table--search .cat-search-cotes { color: var(--muted); font-size: 0.78rem; } .cat-table--search td { padding: 6px 8px; vertical-align: middle; } .cat-goto { white-space: nowrap; } .cat-search-count { color: var(--muted); font-size: 0.78rem; margin: 8px 0 0; } .cat-table--search .cat-ref mark { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; padding: 0 1px; border-radius: 2px; } /* (v4.16) RÉSULTATS DE RECHERCHE au MÊME FORMAT que le tableau normal : un groupe par (type × attachement), chacun rendu par le tableau `detailed()` (mêmes cases, éditables si « Éditer les valeurs »). Titre de groupe accentué au-dessus de chaque tableau. */ .cat-search-group { margin-bottom: 20px; } .cat-search-h { margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--accent-strong); } /* Boutons d'action du CATALOGUE (v1.87) : style UNIFORME = celui de « Ajouter la pièce courante ». */ /* Barre de boutons du bas — catalogue ET prix acier partagent le MÊME style uniforme (v2.88). */ #catalogueActions, #prixAcierActions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Couleurs/survol : SYSTÈME DE BOUTONS niveau 2 (fin de feuille, v3.91) — ici : tailles seules. */ #catalogueActions button, #catalogueActions .prix-import-label, #prixAcierActions button, #prixAcierActions .prix-import-label { font: inherit; font-size: 0.85rem; padding: 8px 14px; margin: 0; } .cat-mem-note { color: var(--warn); font-size: 0.78rem; margin: 12px 0 0; } /* (v5.11) Variante « enregistré » (mode SERVEUR : gamme + prix acier persistés en base v5.07) — la note passe d'avertissement à CONFIRMATION (posée par updatePersistNotes, app.js). */ .cat-mem-note--ok { color: #15803d; } /* (v5.16) TOAST D'ENREGISTREMENT (mode serveur) : « ✓ Enregistré » discret en bas à droite après chaque sauvegarde gamme/prix ; l'ÉCHEC (session expirée, réseau) s'affiche en rouge et RESTE visible 10 s — avant, il était silencieux. Créé par showSaveToast (app.js). */ #saveToast { position: fixed; right: 18px; bottom: 18px; z-index: 1000; padding: 9px 16px; border-radius: 8px; background: #15803d; color: #fff; font-size: 0.85rem; font-weight: 600; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.18); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.18s, transform 0.18s; } #saveToast.save-toast--on { opacity: 1; transform: none; } #saveToast.save-toast--err { background: #b91c1c; max-width: 380px; line-height: 1.4; } /* Grilles tarifaires acier (Phase 4b, v1.47) : largeur (lignes) × épaisseur (colonnes). */ .prix-table-block { margin-bottom: 26px; } /* En-tête d'un tableau : prioritaire · nom · longueur de barre · supprimer. */ .prix-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 8px; } .prix-prio { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--accent-strong); white-space: nowrap; } .prix-ref { flex: 1 1 240px; min-width: 180px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text); padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); } .prix-ref:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .prix-lb-wrap { font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .prix-lb { width: 64px; font: inherit; font-size: 0.82rem; padding: 5px 7px; border: 1px solid var(--border); border-radius: 0; text-align: right; } .prix-del-table { border: 1px solid var(--border); background: #fff; color: var(--muted); font: inherit; font-size: 0.78rem; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; } .prix-del-table:hover { color: var(--err); border-color: var(--err); background: #fdecec; } .prix-table { width: auto; } /* largeur-contenu : les colonnes gardent leur taille, scroll horizontal */ .prix-table th { white-space: nowrap; } .prix-table td { padding: 3px 4px; } .prix-table .prix-corner { text-align: right; color: var(--muted); font-size: 0.64rem; position: sticky; left: 0; background: var(--card); z-index: 2; } .prix-table .prix-rowhead { text-align: right; font-weight: 700; color: var(--text); font-size: 0.85rem; position: sticky; left: 0; background: var(--card); padding-right: 10px; } .prix-table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; font-size: 0.78rem; color: var(--text); padding: 6px 8px; } .prix-cell { width: 72px; padding: 7px 9px; font-size: 0.9rem; border: 1px solid var(--border); border-radius: 0; font-variant-numeric: tabular-nums; background: #fff; } .prix-cell:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .prix-table .cat-table-wrap, #prixAcierTables .cat-table-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); } /* Bouton « Importer un Excel » (label enrobant un input file caché). */ /* Couleurs/survol : SYSTÈME DE BOUTONS niveau 2 (fin de feuille, v3.91) — ici : tailles seules. */ .prix-import-label { display: inline-block; font-size: 0.85rem; padding: 8px 14px; } /* (v3.91) La règle « neutre » historique de #btnPrixExport était du code MORT (la règle scopée #prixAcierActions button la battait en spécificité) : supprimée — l'uniformité v2.88 est le comportement réel, désormais porté par le SYSTÈME DE BOUTONS (fin de feuille). */ #btnPrixAddTable { font: inherit; font-size: 0.85rem; padding: 8px 14px; } /* Panneau de choix à l'import (mettre à jour un tableau / ajouter un nouveau). */ .prix-import-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-sm); font-size: 0.85rem; } .prix-import-choice select { font: inherit; font-size: 0.85rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; } .prix-import-choice button { font: inherit; font-size: 0.82rem; font-weight: 600; padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--border); background: #fff; } #prixImportConfirm { background: var(--accent); color: #fff; border-color: var(--accent); } #prixImportConfirm:hover { background: var(--accent-strong); } /* Panneau d'erreurs d'import (valeurs illisibles) — rouge, pleine largeur, liste lisible. */ .prix-import-errors { flex-direction: column; align-items: stretch; background: #fdecec; border-color: #e3b0b0; } .prix-import-errlist { margin: 4px 0 2px; padding-left: 20px; max-height: 240px; overflow: auto; } .prix-import-errlist li { margin: 2px 0; line-height: 1.4; } .prix-import-errlist .muted { color: #7a6a6a; } #prixImportErrClose { align-self: flex-start; } /* Panneau « Sauvegardes » (5 derniers états téléchargeables) — v1.72. */ .cat-backups { flex-direction: column; align-items: stretch; } .cat-backups .bk-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; } .bk-dl, .bk-close { font: inherit; font-size: 0.82rem; padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; cursor: pointer; } .bk-dl { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; } .bk-dl:hover { filter: brightness(0.97); } .bk-close { align-self: flex-start; } .bk-close:hover { background: var(--accent-soft); } #btnCatBackups, #btnPrixBackups { font: inherit; font-size: 0.85rem; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; cursor: pointer; } #btnCatBackups:hover, #btnPrixBackups:hover { background: var(--accent-soft); border-color: var(--accent-line); } /* La carte Prix acier prend TOUTE la largeur disponible (pas le plafond 720px des autres onglets) → un maximum de colonnes visibles avant défilement horizontal. */ body.view-admin #cardPrixAcier { max-width: none; } /* Largeurs FORCÉES via #id (bat la règle globale `input[type=number]{width:100%}`, qui sinon écrasait les cellules à la largeur du tableau → valeurs illisibles) + min-width anti-écrasement. */ #cardPrixAcier .prix-table { width: auto; } #cardPrixAcier .prix-cell { width: 76px; min-width: 76px; padding: 6px 8px; box-sizing: border-box; font-size: 0.9rem; } /* étroit, calé sur « 9999,99 » (v1.92) */ #cardPrixAcier .prix-lb { width: 72px; box-sizing: border-box; padding: 5px 7px; text-align: right; } #cardPrixAcier .prix-ref { width: auto; } #cardPrixAcier .prix-fourn { width: 130px; box-sizing: border-box; padding: 6px 9px; font-size: 0.85rem; font-weight: 600; color: var(--text); } .prix-fourn-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); white-space: nowrap; } /* Effet/impact de chaque paramètre, affiché sous la valeur (carte Paramètres, v1.43). */ .param-eff { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; line-height: 1.3; } /* ── (v3.72) Onglet VARIABLES en LIGNES TABULAIRES (revue design « pro ») : fini la grille de champs flottants — chaque paramètre = une LIGNE « libellé + effet (gauche) · champ étroit aligné à droite », séparée par un filet fin (style page de réglages). Les champs restent ÉDITABLES tels quels (mêmes inputs, mêmes ids, valeur auto grise / saisie noire intactes) ; minmax(0,1fr) = pas de débordement sur téléphone. ── */ /* (v3.73-74, retours utilisateur) DEUX COLONNES **PAR SECTION** : gauche = RdM, droite = Encombrement & usinage + Devis (le remplissage ligne à ligne v3.73 mélangeait les sections — structure .var-col dans index.html). Chaque paire libellé·champ reste compacte (écart 16 px) ; sous 760 px les colonnes s'empilent. */ body.view-admin #cardVariables .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; /* la colonne la plus courte ne s'étire pas */ } body.view-admin #cardVariables .var-col > .field { display: grid; grid-template-columns: minmax(0, 1fr) 130px; column-gap: 16px; row-gap: 1px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); } body.view-admin #cardVariables .var-col > .field:last-child { border-bottom: none; } body.view-admin #cardVariables .var-col > .field > label { grid-column: 1; grid-row: 1; margin: 0; font-weight: 500; } body.view-admin #cardVariables .var-col > .field > .param-eff { grid-column: 1; grid-row: 2; margin: 0; } body.view-admin #cardVariables .var-col > .field > input { grid-column: 2; grid-row: 1 / span 2; width: 130px; justify-self: end; text-align: right; font-variant-numeric: tabular-nums; /* (v3.73) Valeurs plus AFFIRMÉES (retour utilisateur : elles se perdaient) : graisse et taille montées — la COULEUR reste le code de provenance (gris #4b5563 = autocomplétée, noir = saisie manuelle), inchangée. */ font-weight: 600; font-size: 0.95rem; } body.view-admin #cardVariables .section-divider { padding-top: 14px; margin-top: 6px; border-top: none; } body.view-admin #cardVariables .section-divider--first { padding-top: 4px; margin-top: 0; } @media (max-width: 760px) { body.view-admin #cardVariables .grid { grid-template-columns: minmax(0, 1fr); } } /* ── (v3.72) Finitions transverses (revue design « pro ») ── Chiffres TABULAIRES sur tout ce qui affiche valeurs et prix (colonnes qui s'alignent au pixel) + transitions hover/focus uniformes sur les contrôles qui n'en avaient pas. */ input[type="number"], .cart-card-price, .cop-prix, .cart-order-meta, .cart-modal-total, .order-card-meta, .pieces-total, .piece-card-prix, .deg-pu, .deg-tot, .devis-cout, input.price-badge, #cardDevisCompact .dc-price, .recap-v { font-variant-numeric: tabular-nums; } .btn-validate, .admin-tab, .orders-tab, .type-tile, .btn-mini, .picker-back, .orders-sort-lab select { transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s; } /* En-tête de CATÉGORIE dans le détail du devis (admin), v1.43 : pleine largeur (interrompt les colonnes), les postes de la catégorie s'écoulent dessous. */ .devis-cat { -webkit-column-span: all; column-span: all; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-strong); margin: 9px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--accent-line); } .devis-cat:first-child { margin-top: 0; } /* ════════════════════════════════════════════════════════════════════════════ ONGLETS ADMIN (v1.43, phase 3) — une section à la fois, mise en page 1 colonne ════════════════════════════════════════════════════════════════════════════ */ /* (Phase 2) Fil d'Ariane admin — reflète la route courante (#/…), au-dessus des onglets. */ .admin-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.82rem; } /* (v4.65) Le contenu du fil (retour + maillons) est « transparent » au flex → ses enfants sont des items directs du