/* Chantier Studio — identité propre (distincte du Convertisseur), esprit "chantier/sécurité" */ :root { --dark: #2A2118; --darker: #1C160F; --accent: #E8971C; --accent-h: #C97D0F; --bg: #FAF7F2; --card: #F0ECE4; --card2: #F7F4EE; --sep: #DDD5C7; --text: #23201B; --text-dim: #6B6558; --white: #FFFFFF; --ok: #1A7A4C; --err: #A32E1F; --accent-tint: #F4E6CE; --radius: 12px; /* Echelle d'espacement documentee (audit UX) : consolide les valeurs deja dominantes dans ce fichier (verifie par comptage, pas devinees) plutot que d'en introduire de nouvelles. --text-dim n'a PAS ete change malgre une premiere estimation d'audit : verification par calcul du ratio de contraste WCAG (formule croisee avec la reference connue #767676/blanc = 4.54) donne #6B6558 a 5.42:1 sur --bg et 4.91:1 sur --card, donc deja conforme AA (>=4.5:1) sur les deux — rien a corriger ici. */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 18px; --space-9: 20px; --space-10: 22px; --radius-sm: 8px; --shadow-card: 0 1px 3px rgba(28,22,15,0.06); /* --surface est la couleur de "carte/bloc" (chart-card, stat-box, dash-table, formulaires...) — separee de --white (qui reste litteralement blanc, utilise pour du TEXTE sur fond deja sombre : sidebar, bandeaux hero, hover de bouton colore — ces fonds ne changent pas entre les themes, donc --white ne doit jamais etre remplace par le mode sombre, seul --surface l'est). */ --surface: #FFFFFF; } /* Mode sombre (audit UX) : bascule via l'attribut data-theme sur , applique au chargement AVANT le premier paint (cf. le script inline dans index.html) pour eviter un flash de theme clair. Seuls les tokens de couleur sont redefinis ; --accent reste le meme ambre dans les deux themes (identite de marque), --white n'est jamais touche (cf. commentaire ci-dessus). */ :root[data-theme="dark"] { --dark: #17130E; --darker: #0F0C08; --bg: #1A1611; --card: #241F18; --card2: #211C16; --sep: #3A322A; --text: #EFE9DD; --text-dim: #B3A895; --surface: #241F18; --accent-tint: #3A2E14; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); } .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 280px; flex-shrink: 0; background: var(--dark); color: #E3DCCF; padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; padding: 6px 10px 18px; color: var(--white); letter-spacing: 0.3px; } .brand-icon { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; } /* Recherche globale (audit UX : aucune recherche n'existait nulle part). */ .global-search { position: relative; margin-bottom: 14px; } .global-search input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm); color: var(--white); padding: 8px 10px; font-size: 0.84rem; } .global-search input::placeholder { color: #9C9384; } .global-search input:focus { outline: none; border-color: var(--accent); } #global-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 400; background: var(--card2); border: 1px solid var(--sep); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,0.28); max-height: 60vh; overflow-y: auto; padding: 6px; } .global-search-group-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 6px 8px 2px; } .global-search-result { display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: 6px; border: none; background: none; cursor: pointer; font-size: 0.84rem; color: var(--text); } .global-search-result:hover { background: var(--card); } .global-search-result .gsr-sub { display: block; color: var(--text-dim); font-size: 0.76rem; } .global-search-empty { padding: 10px 8px; color: var(--text-dim); font-size: 0.82rem; } .alert-section + .alert-section { margin-top: 14px; } .alert-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.92rem; } .alert-list { display: flex; flex-direction: column; gap: 2px; } .alert-row { display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: 6px; border: none; background: none; cursor: pointer; font-size: 0.84rem; color: var(--text); } .alert-row:hover { background: var(--card); } .sidebar-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .sidebar .btn-secondary { background: rgba(255,255,255,0.05); color: #E3DCCF; border: 1px solid rgba(255,255,255,0.16); } .sidebar .btn-secondary:hover { background: rgba(255,255,255,0.09); border-color: var(--accent); color: var(--accent); } /* "Charger un chantier de demo" demote a une action d'onboarding discrete (audit UX) : le texte clair de base (--text-dim) serait illisible sur le fond sombre de la sidebar, d'ou cette variante. */ .sidebar .btn-tertiary { color: #9C9384; } .sidebar .btn-tertiary:hover { color: var(--accent); text-decoration: underline; } .nav-group-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9C9384; padding: 10px 10px 4px; font-weight: 600; } .site-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; overflow-y: auto; max-height: 26vh; } .site-list:empty::after { content: "—"; color: #6B6558; font-size: 0.8rem; padding: 4px 10px; display: block; } .site-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); cursor: pointer; font-size: 0.88rem; } .site-item:hover { border-color: var(--accent); } .site-item.active { background: var(--accent); border-color: var(--accent); color: var(--darker); font-weight: 700; } .site-item .site-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-item .del-btn { background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 0.95rem; padding: 2px 4px; } .site-item .del-btn:hover { opacity: 1; color: var(--err); } .sidebar-account { margin-top: auto; padding: 12px 10px; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); } .sidebar-account-name { font-size: 0.82rem; color: #E3DCCF; font-weight: 600; margin-bottom: 8px; } .sidebar-footer { font-size: 0.72rem; color: #9C9384; padding: 10px; line-height: 1.5; } /* ---- Connexion ---- */ /* Photo de chantier en fond (choix delibere du proprietaire du produit — sa touche personnelle, plus chaleureuse qu'un simple degrade uni) + voile sombre pour la lisibilite du texte blanc par-dessus. */ .login-view { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(28,22,15,0.6), rgba(28,22,15,0.72)), url('assets/backgrounds/login-bg.jpg') center/cover no-repeat; } .login-card { width: 100%; max-width: 360px; background: var(--card2); border: 1px solid var(--sep); border-radius: var(--radius); padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .login-brand { padding: 0; color: var(--dark); } .login-error { color: var(--err); font-size: 0.85rem; margin: 0; } .main { flex: 1; padding: 36px 42px; max-width: 980px; } /* Bandeau "hero" en tete de page (photo de chantier + voile de lisibilite, cf. remarque ci-dessus sur le login) — chaque vue garde sa hauteur propre plutot qu'une taille uniforme forcee. */ .view-hero { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; background-size: cover; background-position: center; display: flex; align-items: flex-end; } .view-hero-overlay { width: 100%; padding: var(--space-8) var(--space-10); background: linear-gradient(to top, rgba(28,22,15,0.78), rgba(28,22,15,0.1)); } .view-hero-overlay h2 { color: var(--white); margin: 0 0 4px; } .view-hero-overlay p.hint { color: rgba(255,255,255,0.88); margin: 0; } .view-hero-dashboard { height: 200px; background-image: url('assets/backgrounds/dashboard-bg.jpg'); } .view-hero-settings { height: 170px; background-image: url('assets/backgrounds/settings-bg.jpg'); } .view-hero-chantier { height: 150px; background-image: url('assets/backgrounds/chantier-bg.jpg'); } .view-hero-sm { height: 110px; margin-bottom: 16px; } .view-hero-stocks { background-image: url('assets/backgrounds/stocks-bg.jpg'); } #no-site-selected { color: var(--text-dim); text-align: center; padding: 80px 20px; } #no-site-selected h2 { color: var(--text); } .hidden { display: none !important; } h2 { margin: 0 0 6px; font-size: 1.5rem; color: var(--dark); } h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--dark); } h4 { margin: 14px 0 8px; font-size: 0.92rem; color: var(--accent-h); text-transform: uppercase; letter-spacing: 0.04em; } .hint { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 18px; line-height: 1.5; } .hint.hidden { display: none; } .subtool { margin-bottom: 20px; background: var(--card2); border: 1px solid var(--sep); border-radius: var(--radius); padding: 22px; } /* ---- Onglets d'un chantier (ruban horizontal) ---- */ /* overflow-x:auto + boutons non-retrecissables : defile horizontalement sur petit ecran au lieu de casser la mise en page (jamais de retour a la ligne qui ferait sauter la hauteur du ruban). */ .site-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px; border-bottom: 2px solid var(--sep); } .site-tab { flex: 0 0 auto; white-space: nowrap; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 18px; font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .site-tab svg { flex-shrink: 0; } .site-tab:hover { color: var(--accent-h); } .site-tab.active { color: var(--accent-h); border-bottom-color: var(--accent); } /* Bouton d'enrichissement IA place juste sous un champ de saisie (formulaire d'entree) : petit et discret, pas au meme niveau visuel que les actions principales (Enregistrer, etc.) — mais toujours accessible d'un coup d'oeil juste apres le champ concerne. */ .ai-enrich-btn { display: inline-block; margin: -10px 0 14px; font-size: 0.76rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--sep); background: var(--surface); color: var(--accent-h); cursor: pointer; font-family: inherit; } .ai-enrich-btn:hover { border-color: var(--accent); background: var(--accent-tint); } .ai-enrich-btn:disabled { opacity: 0.6; cursor: default; } /* Tables larges (Gantt, catalogue/solde stocks, membres, tableau de bord, utilisateurs, etc.) : rien n'empechait un debordement horizontal sur petit ecran ou fenetre etroite. Regle GENERIQUE plutot qu'une liste d'ID maintenue a la main (constate a plusieurs reprises : un nouveau tableau oublie dans la liste deborde silencieusement) — n'importe quel conteneur direct d'un .dash-table devient scrollable automatiquement, y compris pour les tableaux ajoutes plus tard sans y repenser. */ div:has(> table.dash-table) { overflow-x: auto; } /* Le Gantt (8-9 colonnes editables : nom, 4 dates, %, budget, statut, action) et le catalogue de stocks sont trop denses pour la taille standard des champs de formulaire (pensee pour un champ isole, pas une cellule de tableau) — deborde meme sur un ecran de bureau normal. Champs retrecis et largeur plafonnee par colonne (au lieu de laisser chaque input a sa largeur navigateur par defaut) pour que tout tienne sans defiler, le overflow-x ci-dessus ne servant plus que de filet de securite sur fenetre etroite. */ #gantt-table .dash-table th, #gantt-table .dash-table td, #stocks-catalog-table .dash-table th, #stocks-catalog-table .dash-table td { padding: 5px 4px; font-size: 0.78rem; } #gantt-table .dash-table input, #stocks-catalog-table .dash-table input { font-size: 0.76rem; padding: 4px 3px; } #gantt-table .dash-table input[type="text"] { width: 92px; } #gantt-table .dash-table input[type="date"] { width: 104px; } #gantt-table .dash-table input[type="number"] { width: 44px; } /* Budget (F CFA) cible par classe, pas par position de colonne : le nombre de colonnes varie selon que le chantier est VRD (Composant/Segment en plus), une regle basee sur nth-child se serait retrouvee a cibler la mauvaise colonne selon le type de chantier — deja constate (le champ Budget affichait un nombre tronque, illisible, pour un montant a 9 chiffres). */ #gantt-table .dash-table .gantt-budget-input { width: 128px; } /* Les fleches de spinner d'un input number (~18-20px, fixes, non retrecissables) mangeaient une part disproportionnee d'une colonne deja etroite — retirees sur les champs Budget/Segment (VRD), ou seule la valeur importe, jamais incrementee au clic ici. */ #gantt-table .dash-table .gantt-budget-input::-webkit-inner-spin-button, #gantt-table .dash-table .gantt-budget-input::-webkit-outer-spin-button, #gantt-table .dash-table .segment-range-picker input::-webkit-inner-spin-button, #gantt-table .dash-table .segment-range-picker input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #gantt-table .dash-table .gantt-budget-input, #gantt-table .dash-table .segment-range-picker input { -moz-appearance: textfield; } #gantt-table .dash-table .remove-btn { width: 24px; height: 24px; font-size: 0.72rem; } #stocks-catalog-table .dash-table input[type="text"] { width: 100px; } #stocks-catalog-table .dash-table input[type="number"] { width: 78px; } /* Table des situations (module Sous-traitance) : meme compacite que Gantt/Stocks ci-dessus, mais avec une colonne Notes en texte libre qui doit pouvoir s'etendre (width:100%) plutot que d'etre coupee a une largeur fixe. */ #subcontractors-list .dash-table th, #subcontractors-list .dash-table td { padding: 5px 4px; font-size: 0.78rem; } #subcontractors-list .dash-table input, #subcontractors-list .dash-table select { font-size: 0.76rem; padding: 4px 3px; box-sizing: border-box; } #subcontractors-list .dash-table input[type="date"] { width: 108px; } #subcontractors-list .dash-table input[type="number"] { width: 100px; } #subcontractors-list .dash-table select { width: 100px; } #subcontractors-list .dash-table input[type="text"] { width: 100%; min-width: 120px; } /* Formulaires de creation compacts (nouvelle tache / nouveau materiau suivi) : 4 champs sur une meme ligne avec une largeur non contrainte (min-width:auto par defaut sur un item flex) peuvent forcer un defilement horizontal plutot que de passer a la ligne proprement. Base plus etroite + min-width:0 (autorise un item flex a retrecir sous la largeur naturelle de son contenu) pour que tout tienne sans avoir a scroller. */ #gantt-add-form .form-row label, #stocks-catalog-add-form .form-row label { flex: 1 1 140px; min-width: 0; } #gantt-add-form .form-row input, #stocks-catalog-add-form .form-row input { width: 100%; } /* Formulaires de creation repliables (natif
, comme .pmbok-help) : replies par defaut pour ne pas encombrer la place quand on n'a rien a ajouter, un clic sur le "+" les deplie. */ .add-form-details { margin-bottom: 14px; } .add-form-details summary { cursor: pointer; font-weight: 700; color: var(--accent-h); font-size: 0.88rem; list-style: none; display: inline-block; padding: 6px 0; } .add-form-details summary::-webkit-details-marker { display: none; } .add-form-details summary:hover { text-decoration: underline; } .add-form-details[open] summary { margin-bottom: 10px; } /* ---- Aide PMBOK (formules/interpretation, panneau repliable) ---- */ .pmbok-help { margin-top: 16px; border: 1px solid var(--sep); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-7); background: var(--surface); } .pmbok-help summary { cursor: pointer; font-weight: 700; color: var(--accent-h); font-size: 0.86rem; } .pmbok-help dl { margin: 12px 0 0; } .pmbok-help dt { font-weight: 700; color: var(--text); font-size: 0.86rem; margin-top: 10px; } .pmbok-help dt:first-child { margin-top: 0; } .pmbok-help dd { margin: 3px 0 0; color: var(--text-dim); font-size: 0.84rem; line-height: 1.5; } hr { border: none; border-top: 1px solid var(--sep); margin: 24px 0; } .dropzone { border: 2px dashed #D8BE8E; border-radius: var(--radius); padding: 28px 20px; text-align: center; cursor: pointer; color: var(--text-dim); background: var(--surface); transition: border-color .15s, background .15s; margin-bottom: 16px; } .dropzone:hover { border-color: var(--accent); } .dropzone.drag { border-color: var(--accent); background: #FDF0DA; } .dropzone p { margin: 0; font-size: 0.9rem; } .dropzone-sm { padding: 16px; margin-bottom: 8px; } .form-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 14px; } .form-row label, label { font-size: 0.88rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 5px; } .checkbox-inline { flex-direction: row !important; align-items: center; gap: 6px !important; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { font-family: inherit; font-size: 0.92rem; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--sep); background: var(--surface); color: var(--text); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } /* Navigation clavier (audit UX) : aucun focus visible n'existait au-dela des champs de formulaire — boutons, onglets, lignes cliquables et boutons de suppression en etaient totalement depourvus. */ button:focus-visible, .site-tab:focus-visible, .dash-table tr.clickable:focus-visible, .remove-btn:focus-visible, a:focus-visible, .site-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } textarea { width: 100%; resize: vertical; margin-bottom: 4px; } /* .btn-danger fusionne dans la base commune (audit UX) : avant, il n'avait ni padding/radius/font-size/poids propres et lisait comme un bouton secondaire discret plutot qu'une action destructive clairement identifiee. */ .btn-primary, .btn-secondary, .btn-danger, .btn-tertiary { font-family: inherit; font-size: 0.92rem; font-weight: 700; padding: 10px 20px; border-radius: var(--radius-sm); border: none; cursor: pointer; margin-right: 8px; margin-top: 4px; transition: background .15s, color .15s, border-color .15s; } .btn-primary { background: var(--accent); color: var(--darker); } .btn-primary:hover { background: var(--accent-h); color: var(--white); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--sep); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent-h); } .btn-danger { background: transparent; color: var(--err); border: 1px solid var(--err); } .btn-danger:hover { background: var(--err); color: var(--white); } .btn-danger:disabled { opacity: 0.55; cursor: not-allowed; } /* Action ponctuelle/onboarding (ex: "Charger un chantier de demo") : discrete par defaut, jamais au meme poids visuel qu'une action de navigation courante (.btn-secondary) ou primaire (.btn-primary). */ .btn-tertiary { background: transparent; color: var(--text-dim); border: 1px solid transparent; padding-left: 8px; padding-right: 8px; } .btn-tertiary:hover { color: var(--accent-h); text-decoration: underline; } .dyn-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .dyn-row input[type="text"], .dyn-row input[type="number"], .dyn-row select { flex: 1; min-width: 90px; } .remove-btn { background: none; border: 1px solid var(--sep); border-radius: 6px; color: var(--text-dim); width: 30px; height: 30px; cursor: pointer; flex-shrink: 0; font-size: 0.9rem; } .remove-btn:hover { border-color: var(--err); color: var(--err); } /* Dependances du Gantt (colonne "Dependances" du tableau des taches) : puces + select d'ajout, reste dans le flux normal (hauteur = nombre de puces), pas un