/* ============================================================
SMG Devis — Dark theme
Conforme au cahier des charges § 10 (charte graphique)
============================================================ */
:root {
/* surfaces */
--bg: #0b1220;
--sf: #131a2c;
--sf2: #1a2238;
--sf3: #232c46;
--bd: #2a3552;
--bd2: #3a4670;
/* textes */
--t: #e6e9f2;
--t2: #a4adc4;
--t3: #6b7592;
/* accents */
--blue: #06b6d4;
--blue2: #0891b2;
--blue3: #155e75;
--green: #10b981;
--green2: #059669;
--orange: #f59e0b;
--red: #ef4444;
--red2: #c00000;
--red3: #7f1d1d;
--rose: #f43f5e;
--yellow: #facc15;
--hl: #fff59d; /* surlignage cases grille */
--rad: 8px;
--rad-s: 4px;
--sh: 0 2px 8px rgba(0,0,0,.4);
--sh2: 0 8px 28px rgba(0,0,0,.6);
}
/* ── Thème CLAIR : override des surfaces/textes uniquement.
Les accents (blue/green/red/orange/yellow) sont conservés pour garder
la même identité visuelle entre les deux modes. ────────────────── */
body.theme-light {
--bg: #f5f7fa;
--sf: #ffffff;
--sf2: #f0f3f8;
--sf3: #e6ebf2;
--bd: #d0d7e3;
--bd2: #b5bfd0;
--t: #1a2238;
--t2: #4a5670;
--t3: #7a8295;
--hl: #fff59d; /* surlignage jaune identique (déjà clair) */
--sh: 0 2px 8px rgba(0,0,0,.08);
--sh2: 0 8px 28px rgba(0,0,0,.15);
}
/* Bouton thème (toujours visible en topbar, à droite) */
.topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.theme-btn {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--bd);
background: var(--sf2);
color: var(--t);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background 0.15s, transform 0.15s;
flex-shrink: 0;
}
.theme-btn:hover { background: var(--sf3); transform: rotate(15deg); }
.theme-btn:active { transform: rotate(0deg) scale(0.95); }
.theme-btn .theme-icon { line-height: 1; }
/* Icônes SVG (cloche / soleil-lune) : trait fin, taille contenue, couleur du texte */
.theme-btn .theme-icon, .theme-btn .notif-icon { display: flex; align-items: center; justify-content: center; }
.theme-btn svg { display: block; width: 17px; height: 17px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--t);
background: var(--bg);
display: flex;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
code { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 12.5px; color: var(--blue); background: rgba(6,182,212,.08); padding: 1px 5px; border-radius: 3px; }
.hidden { display: none !important; }
/* Inputs ---------------------------------------------------- */
input, select, textarea, .fi {
font: inherit;
padding: 7px 9px;
border: 1px solid var(--bd);
border-radius: var(--rad-s);
background: var(--sf2);
color: var(--t);
width: 100%;
}
input:focus, select:focus, textarea:focus, .fi:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(6,182,212,.18);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input::placeholder, textarea::placeholder { color: var(--t3); }
select { appearance: none; -webkit-appearance: none; padding-right: 22px;
background-image: linear-gradient(45deg, transparent 50%, var(--t2) 50%),
linear-gradient(135deg, var(--t2) 50%, transparent 50%);
background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
label { font-size: 12px; color: var(--t2); display: block; margin-bottom: 4px; font-weight: 500; }
/* Tableaux -------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--bd); vertical-align: middle; }
th { font-size: 11px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .03em; background: var(--sf2); }
tbody tr:hover { background: rgba(255,255,255,.02); }
td .small { font-size: 11.5px; color: var(--t2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Sidebar --------------------------------------------------- */
#sidebar {
width: 220px;
background: var(--sf);
border-right: 1px solid var(--bd);
display: flex;
flex-direction: column;
flex-shrink: 0;
min-height: 100vh;
overflow: hidden; /* clippe le contenu quand on replie */
transition: width .18s ease;
}
/* Repliée : largeur nulle → #main (flex:1) prend toute la place. Le bouton
à cheval sur le bord devient un petit onglet collé à gauche pour redéployer.
État persistant (localStorage). */
body.sidebar-collapsed #sidebar { width: 0; border-right: none; }
/* Bouton replier/déployer : pastille à cheval sur le bord droit de la sidebar
(fixed → échappe à l'overflow:hidden de la sidebar quand elle est repliée). */
#sidebar-toggle {
position: fixed;
left: 220px; top: 44px;
transform: translateX(-50%);
z-index: 150; /* sous les bannières espion/groupe (200) */
width: 24px; height: 24px;
padding: 0;
border: 1px solid var(--bd);
border-radius: 50%;
background: var(--sf2);
color: var(--t2);
cursor: pointer;
font-size: 13px; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: left .18s ease, background .15s;
}
#sidebar-toggle:hover { background: var(--sf3); color: var(--t); }
body.sidebar-collapsed #sidebar-toggle {
left: 0; transform: none;
border-left: none;
border-radius: 0 12px 12px 0;
}
body.logged-out #sidebar-toggle { display: none; }
/* Flèche retour (topbar) : centrée sur la ligne du titre */
#back-btn { align-self: center; width: 30px; height: 30px; font-size: 15px; }
/* Les bannières fixes (espion / groupe) calées sur la sidebar suivent le repli. */
#spy-banner, #groupe-banner { transition: left .18s ease; }
body.sidebar-collapsed #spy-banner,
body.sidebar-collapsed #groupe-banner { left: 0; }
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 16px;
border-bottom: 1px solid var(--bd);
color: inherit;
text-decoration: none;
transition: background 0.15s;
}
.brand:hover { background: var(--sf2); }
.brand:active { background: var(--sf3); }
.brand-logo-img {
height: 40px;
max-width: 130px;
object-fit: contain;
display: block;
}
.brand-text strong { display: block; font-size: 14px; }
.brand-text small { color: var(--t3); font-size: 11px; }
#nav { padding: 6px 8px; flex: 1; overflow-y: auto; }
.nav-section { margin: 10px 0 8px; }
.nav-section-title, .nav-group-title {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--t3);
padding: 6px 10px;
font-weight: 600;
cursor: pointer;
user-select: none;
display: flex; align-items: center; gap: 10px;
border-radius: var(--rad-s);
}
.nav-section-title:hover, .nav-group-title:hover { color: var(--t); background: var(--sf2); }
/* Icône optionnelle devant un titre (sous-sections Devis/Suivi/Achats) */
#nav .nav-section-title .ic, #nav .nav-group-title .ic { display: inline-block; width: 18px; text-align: center; opacity: .9; font-size: 12px; }
/* Chevron à droite (poussé par margin-left:auto) : ouvre l'espace en vignettes */
.nav-section-title::after, .nav-group-title::after { content: '▸'; margin-left: auto; font-size: 9px; opacity: .55; }
/* Navigation par vignettes : la sidebar n'affiche QUE les grands menus. Les
liens restent dans le DOM (source de vérité des vignettes + filtrage par
droits) mais ne s'affichent jamais ici. */
#nav .nav-section > a { display: none !important; }
/* Grand menu actif (l'écran courant appartient à cette section / ce groupe) */
#nav .nav-section.active-sec > .nav-section-title,
#nav .nav-group.active-sec > .nav-group-title { color: #fff; background: var(--blue3); }
/* ── Groupe « Commercial » (premier niveau contenant des sous-sections) ── */
.nav-group { margin: 10px 0 8px; }
/* Sous-sections jamais listées dans la sidebar (elles vivent en vignettes) */
#nav .nav-group > .nav-section { display: none !important; }
/* Idem pour un lien direct du groupe (ex. Chantier : liens à plat + une
sous-section « Générateur de documents ») — jamais listé ici non plus. */
#nav .nav-group > a { display: none !important; }
/* Sous-section dans un groupe : indentée, casse normale (≠ titres de 1er niveau) */
.nav-group > .nav-section { margin: 2px 0; }
.nav-group > .nav-section > .nav-section-title {
text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--t2);
padding-left: 20px;
}
.nav-group > .nav-section > a { padding-left: 28px; }
#nav a {
display: flex; align-items: center; gap: 10px;
padding: 6px 10px;
border-radius: var(--rad-s);
font-size: 12px;
color: var(--t2);
margin-bottom: 1px;
}
/* Accueil : entrée directe en tête de sidebar, hors sections/accordéon —
toujours visible, légèrement mise en avant. */
#nav > a.nav-home {
margin: 2px 0 8px;
padding: 8px 10px;
font-size: 12.5px;
font-weight: 600;
color: var(--t);
border: 1px solid var(--bd);
background: var(--sf2);
}
#nav > a.nav-home:hover { background: var(--sf3); }
#nav > a.nav-home.active { background: var(--blue3); border-color: var(--blue3); color: #fff; }
#nav a .ic { display: inline-block; width: 18px; text-align: center; opacity: .9; }
.nav-badge {
margin-left: auto;
min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
line-height: 16px; text-align: center; border-radius: 9px; flex: none;
}
.nav-badge.hidden { display: none; }
#nav a:hover { background: var(--sf2); color: var(--t); }
#nav a.active {
background: var(--blue3);
color: #fff;
font-weight: 500;
}
#sidebar footer {
padding: 10px 12px;
border-top: 1px solid var(--bd);
font-size: 11.5px;
display: flex; flex-direction: column; gap: 8px;
color: var(--t3);
}
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#sidebar footer a:hover { color: var(--t); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.dot.online { background: var(--green); }
/* Pastille présence — écran Utilisateurs, réservée au compte mpercet (cf. app.js
_renderUsersRows) : même `.dot`/`.dot.online` que le statut API du pied de
sidebar, juste réaligné pour un usage inline devant un nom. */
td .dot { vertical-align: middle; margin-right: 1px; }
/* Multi-agences : sélecteur d'agence visuel (bouton + menu déroulant) ───── */
.agence-switch { position: relative; width: 100%; }
/* Bouton déclencheur : badge (code) + nom + sous-titre + chevron. */
.ag-trigger {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 9px; cursor: pointer; text-align: left;
background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px;
color: var(--t); transition: border-color .12s, background .12s;
}
.ag-trigger:hover { border-color: var(--bd2); background: var(--sf3); }
.ag-trigger.is-groupe { border-color: #0f766e; background: rgba(15, 118, 110, .12); }
/* Pastille du code agence : largeur adaptée au texte (le code peut faire
jusqu'à 8 caractères — un carré fixe le faisait déborder), bornée avec
ellipse au-delà, hauteur constante pour rester alignée avec le nom. */
.ag-badge {
flex: 0 0 auto; min-width: 26px; max-width: 76px; height: 26px;
padding: 0 7px; border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
background: var(--blue3); color: #fff; text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-trigger.is-groupe .ag-badge, .ag-item.groupe .ag-badge { background: #0f766e; }
.ag-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ag-name { font-size: 12.5px; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sub { font-size: 10.5px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-caret { flex: 0 0 auto; color: var(--t3); font-size: 10px; transition: transform .15s; }
.ag-trigger[aria-expanded="true"] .ag-caret { transform: rotate(180deg); }
/* Menu déroulant : s'ouvre AU-DESSUS du bouton (footer en bas de sidebar). */
.ag-menu {
position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
background: var(--sf); border: 1px solid var(--bd2); border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, .35); padding: 6px; z-index: 300;
display: flex; flex-direction: column; gap: 2px;
max-height: 320px; overflow: auto;
}
.ag-item {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 8px; cursor: pointer; text-align: left;
background: transparent; border: 1px solid transparent; border-radius: 7px;
color: var(--t); transition: background .12s;
}
.ag-item:hover { background: var(--sf2); }
.ag-item.active { background: var(--sf2); }
.ag-item .ag-check { flex: 0 0 14px; color: var(--blue); font-weight: 700; font-size: 12px; text-align: center; }
.ag-item.groupe .ag-name { color: #14b8a6; }
.ag-divider { height: 1px; background: var(--bd); margin: 4px 2px; }
/* Affectation users↔agences (modale utilisateur) */
.ag-assign { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; border: 1px solid var(--bd); border-radius: 8px; padding: 8px; }
.ag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ag-row .ck { margin: 0; }
.ag-row select { max-width: 200px; }
/* Lignes d'agence cliquables (écran Agences) */
#tb-agences tr.ag-rowclick { cursor: pointer; }
#tb-agences tr.ag-rowclick:hover td { background: var(--sf2); }
/* Main / topbar --------------------------------------------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar {
background: var(--sf);
border-bottom: 1px solid var(--bd);
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.topbar-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#topbar h1 { font-size: 18px; font-weight: 600; }
#page-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#view { padding: 18px 24px; flex: 1; overflow-x: auto; }
/* Boutons --------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 12px;
border-radius: var(--rad-s);
font-size: 13px;
font-weight: 500;
background: var(--sf2);
border: 1px solid var(--bd);
color: var(--t);
transition: all .12s;
white-space: nowrap;
}
.btn:hover { background: var(--sf3); border-color: var(--bd2); }
.btn.bp { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.bp:hover { background: var(--blue2); border-color: var(--blue2); }
.btn.bs { background: var(--sf3); border-color: var(--bd2); }
.btn.bg { background: transparent; border-color: transparent; color: var(--t2); }
.btn.bg:hover { background: var(--sf2); color: var(--t); }
.btn.bd { background: var(--red); border-color: var(--red); color: #fff; }
.btn.bd:hover { background: #dc2626; border-color: #dc2626; }
.btn.bv { background: var(--green); border-color: var(--green); color: #fff; }
.btn.bv:hover { background: var(--green2); border-color: var(--green2); }
.btn.bsm { padding: 3px 8px; font-size: 11.5px; }
/* Groupe de boutons d'action en bout de ligne (tables) : espacement régulier
pour éviter qu'ils se touchent (et limiter les clics par erreur sur 🗑). */
.row-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
.row-actions .btn.bd { margin-left: 4px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* LG verrouillée (forcée par la sous-réf) : non éditable en édition de devis. */
input.lg-locked { background: var(--sf2); color: var(--t2); cursor: not-allowed; }
/* Ss-réf surlignée de sa couleur de repérage dans le récap du devis. */
code.recap-coul { padding: 1px 7px; border-radius: 4px; font-weight: 600; }
/* Saisie groupée des budgets (dep) — catalogue sous-réf + modale dépenses devis. */
.dep-groups { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.dep-group { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--rad); padding: 9px 11px; }
.dep-group-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--t2); margin-bottom: 8px; }
.dep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.dep-field { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.dep-label { font-size: 12px; color: var(--t2); }
.dep-input { display: flex; align-items: center; gap: 4px; }
.dep-input input { border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right; }
.dep-input input[readonly] { background: var(--sf3); color: var(--t2); }
.dep-unit { display: inline-flex; align-items: center; padding: 0 9px; font-size: 12px; color: var(--t2);
background: var(--sf3); border: 1px solid var(--bd); border-left: 0;
border-radius: 0 var(--rad-s) var(--rad-s) 0; white-space: nowrap; }
/* Détail multi-lignes d'un budget (ROADMAP « DEPENSES CATALOGUE SS-REF ») :
petit bouton pictogramme à côté du champ, flex:none pour ne pas s'étirer. */
.dep-detail-btn { flex: none; padding: 0 8px; }
.ic-btn {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--rad-s);
color: var(--t2);
}
.ic-btn:hover { background: var(--sf3); color: var(--t); }
/* Variante compacte : ⊕ « créer une ss-réf » logé DANS la cellule Ss-réf de
l'édition de devis (gain de place dans la colonne actions). */
.ic-mini { width: 18px; height: 18px; font-size: 12px; vertical-align: middle; }
/* ── Communication & Ordre de Service (chat d'entreprise) ─────── */
.comm-card { display: flex; flex-direction: column; padding: 0; }
.comm-msgs { overflow-y: auto; max-height: calc(100vh - 320px); min-height: 220px;
padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.comm-msg { background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; padding: 8px 12px; }
.comm-msg.mine { border-color: var(--blue); }
.comm-head { display: flex; align-items: center; gap: 8px; }
.comm-body { white-space: pre-wrap; margin-top: 4px; }
.comm-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--bd);
background: var(--sf2); border-radius: 0 0 var(--rad) var(--rad); }
.comm-compose textarea { flex: 1; resize: vertical; }
/* Cards ----------------------------------------------------- */
.card {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
padding: 16px;
box-shadow: var(--sh);
}
.card h3 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--t3);
margin-bottom: 8px;
font-weight: 600;
}
/* Grid utils */
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }
/* KPI cards ------------------------------------------------- */
.kpi {
background: var(--sf);
border: 1px solid var(--bd);
border-left: 3px solid var(--blue);
border-radius: var(--rad);
padding: 14px 16px;
}
.kpi.kv { border-left-color: var(--green); }
.kpi.ka { border-left-color: var(--orange); }
.kpi.kr { border-left-color: var(--red); }
/* Cartes de synthèse du tableau de bord commercial */
.synth-env { border-left: 4px solid #0ea5e9; }
.synth-val { border-left: 4px solid var(--green); }
.kpi.kp { border-left-color: var(--rose); }
.kpi .lbl { font-size: 11.5px; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; }
.kpi .val { font-size: 22px; font-weight: 700; margin-top: 4px; }
.kpi .sub { font-size: 11.5px; color: var(--t2); margin-top: 4px; }
/* Santé des chantiers en cours (dashboard) : 2 jauges épurées ----- */
/* Barre fine ; la piste est une version claire de la MÊME teinte que le
remplissage (l'état se lit sur toute la barre). Textes en tokens texte,
jamais dans la couleur de la donnée. */
.sante-body { display: flex; flex-direction: column; gap: 18px; padding: 16px; }
.sante-meter .sm-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.sante-meter .sm-lbl { font-size: 12px; color: var(--t2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.sante-meter .sm-pct { font-size: 26px; font-weight: 700; color: var(--t); line-height: 1; }
.sante-meter .sm-bar { height: 10px; border-radius: 5px; overflow: hidden; }
.sante-meter .sm-fill { height: 100%; border-radius: 0 4px 4px 0; transition: width .4s ease; }
.sante-meter .sm-foot { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; font-size: 12px; flex-wrap: wrap; }
.sante-meter .sm-val { font-weight: 600; color: var(--t); }
.sante-meter .sm-tot { color: var(--t2); }
.sante-meter .sm-over { color: var(--red); font-weight: 600; }
/* Teintes : dépenses = bleu (orange ≥ 90 %, rouge > 100 %), facturé = vert. */
.sante-meter.sev-dep .sm-bar { background: rgba(6,182,212,.16); }
.sante-meter.sev-dep .sm-fill { background: var(--blue); }
.sante-meter.sev-warn .sm-bar { background: rgba(245,158,11,.18); }
.sante-meter.sev-warn .sm-fill { background: var(--orange); }
.sante-meter.sev-danger .sm-bar { background: rgba(239,68,68,.18); }
.sante-meter.sev-danger .sm-fill { background: var(--red); }
.sante-meter.sev-fact .sm-bar { background: rgba(16,185,129,.16); }
.sante-meter.sev-fact .sm-fill { background: var(--green); }
/* Recherche globale (onglet Recherche) ----------------------- */
.gs-input { font-size: 16px; padding: 12px 14px; }
.gs-list .gs-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; color: inherit; text-decoration: none;
border-top: 1px solid var(--bd);
}
.gs-list .gs-row:hover { background: var(--sf2); }
.gs-row .gs-main { flex: 1; min-width: 0; }
.gs-row .gs-titre { font-weight: 600; font-size: 13px; }
.gs-row .gs-arrow { color: var(--t3); font-size: 18px; }
/* Raccourcis vers les TB détaillés (depuis le dashboard général) */
.dash-shortcut {
position: relative;
display: grid;
grid-template-columns: 60px 1fr 28px;
align-items: center;
gap: 16px;
padding: 18px 20px 18px 24px;
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-shortcut::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: var(--blue);
}
.dash-shortcut.sc-comm::before { background: linear-gradient(180deg, #06b6d4, #0891b2); }
.dash-shortcut.sc-chan::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.dash-shortcut:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.dash-shortcut.sc-comm:hover { border-color: var(--blue); }
.dash-shortcut.sc-chan:hover { border-color: var(--orange); }
.dash-shortcut .ic {
width: 56px; height: 56px;
display: grid; place-items: center;
font-size: 28px;
border-radius: 12px;
background: rgba(6,182,212,.10);
}
.dash-shortcut.sc-chan .ic { background: rgba(245,158,11,.12); }
.dash-shortcut .bd h3 {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--t);
}
.dash-shortcut .bd p {
margin: 0;
font-size: 12.5px;
color: var(--t2);
line-height: 1.45;
}
.dash-shortcut .ar {
font-size: 24px;
font-weight: 600;
color: var(--t3);
transition: transform .15s ease, color .15s ease;
}
.dash-shortcut:hover .ar { transform: translateX(4px); }
.dash-shortcut.sc-comm:hover .ar { color: var(--blue); }
.dash-shortcut.sc-chan:hover .ar { color: var(--orange); }
/* Tableau card ---------------------------------------------- */
.tc {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
overflow: hidden;
}
.tc > header {
padding: 12px 16px;
border-bottom: 1px solid var(--bd);
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.tc > header h2 { font-size: 14px; font-weight: 600; }
/* Lien « Détail des données » dans l'en-tête d'un graphique (remplace l'ancienne
légende « survole une barre… ») : discret, accentué au survol. */
.lnk-detail { font-size: 12px; color: var(--t3); text-decoration: none; white-space: nowrap; }
.lnk-detail:hover { color: var(--blue); text-decoration: underline; }
.tc .toolbar {
padding: 8px 16px;
border-bottom: 1px solid var(--bd);
background: var(--sf2);
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.tc .toolbar input, .tc .toolbar select { max-width: 260px; }
.tc .empty {
padding: 36px 18px;
text-align: center;
color: var(--t3);
font-size: 13px;
}
/* Tableaux avec leur propre sous-fenêtre de défilement (conteneur à
max-height + overflow:auto, cf. classe `tc-scroll` posée en JS) : en-tête
de colonnes figé pendant le défilement des lignes. */
.tc-scroll thead th {
position: sticky;
top: 0;
background: var(--sf2);
z-index: 2;
}
/* Badges statuts -------------------------------------------- */
.b {
display: inline-block;
padding: 1px 7px;
font-size: 10.5px;
border-radius: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
border: 1px solid transparent;
white-space: nowrap;
}
.b-br { background: #2a3552; color: #cbd5e1; }
.b-en { background: #082f49; color: #7dd3fc; border-color: #155e75; }
.b-neg { background: #2e1065; color: #c4b5fd; border-color: #5b21b6; }
.b-re { background: #451a03; color: #fdba74; border-color: #9a3412; }
.b-va { background: #052e1f; color: #6ee7b7; border-color: #065f46; }
.b-ar { background: #1e293b; color: #cbd5e1; border-color: #475569; }
.b-pe { background: #450a0a; color: #fca5a5; border-color: #991b1b; }
.b-tse { background: #083344; color: #67e8f9; border-color: #155e75; }
.b-tsv { background: #052e1f; color: #6ee7b7; border-color: #065f46; }
.b-tsr { background: #450a0a; color: #fca5a5; border-color: #991b1b; }
.b-fa { background: #052e1f; color: #6ee7b7; border-color: #065f46; }
.b-sdef { background: #082f49; color: #7dd3fc; border-color: #155e75; }
.b-sct { background: #422006; color: #fde68a; border-color: #92400e; }
.b-sem { background: #082f49; color: #7dd3fc; border-color: #155e75; }
/* Type de demande (Demandes BE — badge board). */
.b-ty { background: #3730a3; color: #c7d2fe; border-color: #4338ca; }
/* Pills */
.pill {
display: inline-block;
padding: 1px 7px;
border-radius: 3px;
font-size: 10.5px;
font-weight: 500;
background: var(--sf3);
color: var(--t2);
margin-right: 4px;
}
.pill.ts { background: #155e75; color: #7dd3fc; }
/* Modal ----------------------------------------------------- */
.ov {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 100;
}
.ov.hidden { display: none; }
.ov-bg { position: absolute; inset: 0; background: rgba(2,6,23,.7); backdrop-filter: blur(2px); }
.modal {
position: relative;
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
width: 92%;
max-width: 620px;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: var(--sh2);
overflow: hidden;
}
.modal.lg { max-width: 900px; }
.modal.xl { max-width: 1180px; }
.modal.full { max-width: calc(100vw - 60px); max-height: calc(100vh - 60px); }
.modal.sm { max-width: 380px; }
.mh {
padding: 12px 16px;
border-bottom: 1px solid var(--bd);
display: flex; align-items: center; justify-content: space-between;
}
.mh h2 { font-size: 15px; font-weight: 600; }
.mb2 { padding: 16px; overflow-y: auto; flex: 1; }
.mf {
padding: 10px 16px;
border-top: 1px solid var(--bd);
display: flex; justify-content: flex-end; gap: 8px;
background: var(--sf2);
}
/* Forms ----------------------------------------------------- */
.fr { margin-bottom: 10px; }
.fg { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.fg.c1 { grid-template-columns: 1fr; }
.fg.c3 { grid-template-columns: repeat(3, 1fr); }
.fg.c4 { grid-template-columns: repeat(4, 1fr); }
.fg .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .fg, .fg.c3, .fg.c4 { grid-template-columns: 1fr; } }
/* Toasts ---------------------------------------------------- */
#toasts {
position: fixed;
bottom: 92px; right: 18px; /* au-dessus du bouton flottant « + » */
display: flex; flex-direction: column; gap: 8px;
z-index: 200;
}
.toast {
background: var(--sf3);
color: var(--t);
padding: 10px 14px;
border-radius: var(--rad-s);
font-size: 12.5px;
min-width: 220px;
border-left: 3px solid var(--blue);
box-shadow: var(--sh2);
animation: slide-in .22s ease;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--orange);}
@keyframes slide-in {
from { transform: translateX(40px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ── Verrouillage pessimiste (bandeau de blocage, sprint SS2) ──── */
.verrou-bandeau {
display: flex; align-items: flex-start; gap: 12px;
background: var(--sf3);
border-left: 3px solid var(--orange);
border-radius: var(--rad-s);
padding: 10px 14px;
margin-bottom: 12px;
font-size: 13px;
color: var(--t);
box-shadow: var(--sh2);
}
.verrou-bandeau .vb-ico { font-size: 16px; line-height: 1.4; flex: none; }
.verrou-bandeau .vb-txt { flex: 1 1 auto; line-height: 1.4; }
.verrou-bandeau .vb-txt b { display: block; color: var(--t); }
.verrou-bandeau .vb-txt small { display: block; color: var(--t2); margin-top: 2px; }
.verrou-bandeau .vb-actions { flex: none; display: flex; gap: 8px; align-items: center; }
/* ── Bouton flottant « + » (raccourcis de création) ────────────── */
#fab-create {
/* Sous la modale (.ov = 100) pour ne pas flotter par-dessus une création en
cours ; au-dessus du contenu normal de la page. */
position: fixed; bottom: 24px; right: 24px; z-index: 90;
display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
body.logged-out #fab-create { display: none; }
body.spying #fab-create { bottom: 44px; } /* au-dessus de la barre « mode espion » */
#fab-btn {
width: 46px; height: 46px; border-radius: 50%; position: relative;
background: linear-gradient(135deg, var(--blue), var(--blue2));
box-shadow: 0 6px 18px rgba(6, 182, 212, .42), 0 2px 6px rgba(0, 0, 0, .3);
transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, filter .15s;
}
/* Le « + » est dessiné en deux barres parfaitement centrées (top/left 50% +
marges négatives) → il reste centré quand le bouton tourne pour faire la croix. */
#fab-btn::before, #fab-btn::after {
content: ''; position: absolute; top: 50%; left: 50%;
background: #fff; border-radius: 2px;
}
#fab-btn::before { width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; }
#fab-btn::after { width: 2.5px; height: 16px; margin: -8px 0 0 -1.25px; }
#fab-btn:hover { filter: brightness(1.08); box-shadow: 0 9px 24px rgba(6, 182, 212, .55), 0 2px 6px rgba(0, 0, 0, .35); }
#fab-btn:active { transform: scale(.94); }
#fab-create.open #fab-btn { transform: rotate(135deg); } /* + → × (barres centrées) */
.fab-menu { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.fab-menu.hidden { display: none; }
.fab-item {
display: flex; align-items: center; gap: 11px;
background: var(--sf); color: var(--t);
border: 1px solid var(--bd); border-radius: 12px;
padding: 7px 15px 7px 7px; font-size: 13px; font-weight: 500;
box-shadow: var(--sh2); white-space: nowrap; cursor: pointer;
animation: fab-pop .2s cubic-bezier(.34, 1.56, .64, 1) backwards;
transition: transform .12s ease, border-color .12s, box-shadow .12s;
}
.fab-item:hover { border-color: var(--blue); transform: translateX(-3px); box-shadow: var(--sh2), 0 0 0 1px var(--blue) inset; }
.fab-item .fab-ic {
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--sf3); font-size: 16px; line-height: 1;
}
.fab-item .fab-lbl { padding-right: 2px; }
.fab-item:nth-child(1) { animation-delay: .02s; }
.fab-item:nth-child(2) { animation-delay: .05s; }
.fab-item:nth-child(3) { animation-delay: .08s; }
.fab-item:nth-child(4) { animation-delay: .11s; }
.fab-item:nth-child(5) { animation-delay: .14s; }
@keyframes fab-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
/* ============================================================
Wizard (devis 3 étapes)
============================================================ */
.wiz-steps {
display: flex; gap: 4px; margin-bottom: 16px;
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
padding: 6px;
}
.wiz-steps button {
flex: 1;
padding: 9px 12px;
border-radius: var(--rad-s);
font-size: 13px;
font-weight: 500;
color: var(--t2);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.wiz-steps button .n {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--sf3);
color: var(--t2);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 12px;
}
.wiz-steps button.active { background: var(--sf2); color: var(--t); }
.wiz-steps button.active .n { background: var(--blue); color: #fff; }
.wiz-steps button.done .n { background: var(--green); color: #fff; }
/* Bâtiments chips */
.bats-chips {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.bat-chip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--sf3);
border: 1px solid var(--bd);
padding: 4px 4px 4px 9px;
border-radius: 14px;
font-size: 12px;
}
.bat-chip input { background: transparent; border: none; padding: 0; width: 70px; }
.bat-chip input:focus { box-shadow: none; }
.bat-chip button { color: var(--t3); padding: 0 5px; font-size: 14px; }
.bat-chip button:hover { color: var(--red); }
/* ============================================================
Devis : table de lignes (étape 2)
============================================================ */
.dv-lignes {
border: 1px solid var(--bd);
border-radius: var(--rad);
background: var(--sf);
overflow-x: auto;
}
/* Édition devis (étape Lignes) : le tableau défile DANS son cadre (hauteur
bornée à l'écran) → la ligne des titres, déjà sticky top, reste visible en
descendant dans le devis ; la barre d'actions (+ Titre, + Ouvrage…) colle en
bas. NB : le sticky ne peut pas s'appuyer sur le scroll de la page — #view
et .dv-lignes sont des conteneurs overflow qui l'en empêchent. */
.dv-sticky { overflow: auto; max-height: max(320px, calc(100vh - 180px)); }
.dv-sticky .lignes-actions { position: sticky; bottom: 0; left: 0; z-index: 2; }
.dv-lignes table { font-size: 12.5px; min-width: 1000px; }
.dv-lignes th { background: var(--sf2); position: sticky; top: 0; z-index: 1; }
.dv-lignes td { padding: 6px 8px; border-bottom: 1px solid var(--bd); }
.dv-lignes td input,
.dv-lignes td select,
.dv-lignes td textarea {
padding: 4px 6px;
font-size: 12px;
background: transparent;
border: 1px solid transparent;
}
.dv-lignes td input:hover,
.dv-lignes td select:hover,
.dv-lignes td textarea:hover { border-color: var(--bd); background: var(--sf2); }
.dv-lignes td input:focus,
.dv-lignes td select:focus,
.dv-lignes td textarea:focus { border-color: var(--blue); background: var(--sf2); }
/* Combos datalist (ref / ssref) — apparence légèrement marquée */
.dv-lignes td input[list] {
border-color: var(--bd);
background: var(--sf2);
cursor: text;
}
.dv-lignes td input[list]:hover { background: var(--sf3); }
.dv-lignes tr.t-titre td { background: var(--red3); color: #fff; font-weight: 600; }
.dv-lignes tr.t-titre td input { color: #fff; font-weight: 600; }
.dv-lignes tr.t-soustitre td { background: #7c2d12; color: #fed7aa; font-weight: 500; }
.dv-lignes tr.t-soustitre td input { color: #fed7aa; }
.dv-lignes tr.t-sst td { background: #422006; color: #fde68a; font-weight: 500; }
.dv-lignes tr.t-sst td input { color: #fde68a; }
.dv-lignes tr.t-fd td { background: #1e3a5f; color: #cbd5e1; font-style: italic; }
.dv-lignes tr.t-fd td input,
.dv-lignes tr.t-fd td textarea { color: #cbd5e1; font-style: italic; }
/* Notes : pas de surlignement (pour ne plus confondre avec les ss-ss-titres) —
simplement en gras italique. */
.dv-lignes tr.t-note td { font-style: italic; font-weight: 600; color: var(--t); }
.dv-lignes tr.t-note td input { font-style: italic; font-weight: 600; color: var(--t); }
.dv-lignes tr.t-ouvrage:hover td { background: rgba(255,255,255,.03); }
.dv-lignes .row-drag { cursor: grab; color: var(--t3); user-select: none; text-align: center; width: 16px; }
.dv-lignes .row-drag:hover { color: var(--t); }
.dv-lignes tr.dragging { opacity: 0.4; }
.dv-lignes tr.drag-over td { border-top: 2px solid var(--blue); }
/* Flash de repérage de la ligne fraîchement ajoutée (auto-scroll des boutons
d'ajout de l'édition de devis). */
@keyframes dv-row-flash { 0%, 60% { background: rgba(37, 99, 235, .22); } 100% { background: transparent; } }
.dv-lignes tr.row-flash td { animation: dv-row-flash 1.6s ease; }
/* Même repérage, générique pour les autres tableaux (ex. arrivée depuis un
résultat de la Recherche globale, ROADMAP « ONGLET RECHERCHE »). */
.tc table tr.row-flash td { animation: dv-row-flash 1.6s ease; }
.lignes-actions {
display: flex; gap: 6px; flex-wrap: wrap;
padding: 10px;
background: var(--sf2);
border-top: 1px solid var(--bd);
}
/* ============================================================
Devis détail header
============================================================ */
.dv-head {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
padding: 14px 16px;
margin-bottom: 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
}
.dv-head h2 { font-size: 17px; margin-bottom: 3px; }
.dv-head .meta { color: var(--t2); font-size: 12.5px; }
.dv-head .tot { text-align: right; }
.dv-head .tot .ht { font-size: 22px; font-weight: 700; }
.dv-head .tot .mn { font-size: 12px; color: var(--green); margin-top: 4px; }
/* Barre d'action rapide pour changer le statut d'un devis */
/* ── Carte de statut d'un devis : pipeline du cycle de vie + actions ─── */
.dv-status-card {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad-s);
padding: 12px 14px;
margin-bottom: 12px;
}
/* Pipeline visuel : étapes Brouillon → Envoyé → Négociation → Validé → Archivé,
reliées par un trait. État : done (✓ vert), current (numéro bleu, surligné),
todo (gris). 'perdu'/'ts_refuse' = étape « lost » rouge en bout de chaîne. */
.dv-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.dv-step {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600; color: var(--t3);
white-space: nowrap;
}
.dv-step .dot {
width: 18px; height: 18px; flex: 0 0 18px;
border-radius: 50%; display: grid; place-items: center;
font-size: 10.5px; line-height: 1;
background: var(--sf3); color: var(--t3); border: 1px solid var(--bd2);
}
.dv-step.done { color: var(--t2); }
.dv-step.done .dot { background: var(--green); color: #fff; border-color: var(--green); }
.dv-step.current { color: var(--t); background: var(--sf2); }
.dv-step.current .dot { background: var(--blue); color: #fff; border-color: var(--blue); }
.dv-step.lost { color: var(--red); background: rgba(239, 68, 68, .10); }
.dv-step.lost .dot { background: var(--red); color: #fff; border-color: var(--red); }
.dv-sep { flex: 0 0 16px; height: 2px; background: var(--bd2); margin: 0 1px; border-radius: 2px; }
/* Séparateur vertical dans la barre d'actions d'en-tête (isole Supprimer). */
.act-sep { width: 1px; align-self: stretch; background: var(--bd); margin: 0 5px; }
/* Statut en lecture seule dans le formulaire infos (se change via la carte). */
.dv-statut-ro { display: flex; align-items: center; gap: 8px; min-height: 34px; }
/* Zone d'actions : libellé + boutons groupés, séparée du pipeline par un trait. */
.dv-actions {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--bd);
}
.dv-actions-lbl {
font-size: 11px; color: var(--t3);
text-transform: uppercase; letter-spacing: .04em;
}
.dv-actions-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.dv-mini {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.dv-mini .m {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad-s);
padding: 9px 11px;
}
.dv-mini .m .lbl { font-size: 10.5px; color: var(--t3); text-transform: uppercase; }
.dv-mini .m .val { font-size: 15px; font-weight: 600; margin-top: 2px; }
@media (max-width: 900px) { .dv-mini { grid-template-columns: repeat(2, 1fr); } }
/* ── Rentabilité chantier — bandeau « OBJECTIF vs RÉSULTAT » ──────── */
.ovr { display: flex; flex-direction: column; gap: 10px; }
.ovr-titre {
font-size: 12px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--t3);
}
/* En-tête du bandeau : titre à gauche, puces d'années (N / N-1 / N-2…) à droite. */
.ovr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ovr-annees { margin: 0; }
.ovr-annees .pl-tab { padding: 3px 10px; font-size: 12px; }
.ovr-row {
display: flex; align-items: center; gap: 16px;
background: var(--sf); border: 1px solid var(--bd);
border-radius: var(--rad); box-shadow: var(--sh);
padding: 12px 18px;
}
.ovr-lbl { flex: 1; font-weight: 700; font-size: 15px; min-width: 0; }
.ovr-sub { font-weight: 400; font-size: 11px; color: var(--t3); margin-top: 2px; }
.ovr-obj { color: var(--t3); font-size: 13px; white-space: nowrap; }
.ovr-obj b { font-size: 16px; font-weight: 700; color: var(--t2); margin-left: 4px; }
.ovr-val { font-size: 20px; font-weight: 800; text-align: right; white-space: nowrap; min-width: 120px; }
.ovr-val-sub { display: block; font-size: 11px; font-weight: 600; color: var(--t3); }
.ovr-row.ok .ovr-val { color: var(--green); }
.ovr-row.warn .ovr-val { color: var(--orange); }
.ovr-row.bad .ovr-val { color: var(--red); }
.ovr-row.off .ovr-val { color: var(--t3); }
.ovr-ico {
flex: none; width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 16px; background: var(--t3);
}
.ovr-row.ok .ovr-ico { background: var(--green); }
.ovr-row.warn .ovr-ico, .ovr-row.bad .ovr-ico {
border-radius: 0; clip-path: polygon(50% 4%, 100% 96%, 0 96%);
align-items: flex-end; padding-bottom: 3px; font-size: 14px;
}
.ovr-row.warn .ovr-ico { background: var(--orange); }
.ovr-row.bad .ovr-ico { background: var(--red); }
.ovr-row.off .ovr-ico { font-size: 11px; }
@media (max-width: 640px) {
.ovr-row { flex-wrap: wrap; }
.ovr-lbl { flex: 1 1 100%; }
.ovr-obj { margin-left: auto; }
}
/* ── Facturation — liste des chantiers (niveau 1) ─────────────────── */
.ch-totals { display: flex; gap: 12px; flex-wrap: wrap; }
.ch-total {
background: var(--sf); border: 1px solid var(--bd); border-radius: var(--rad);
padding: 10px 16px; min-width: 160px;
}
.ch-total .num { font-size: 17px; margin-top: 2px; }
.ch-list { display: flex; flex-direction: column; gap: 10px; }
.ch-row {
display: grid;
grid-template-columns: 1fr 150px 110px 230px 24px;
gap: 16px;
align-items: center;
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
padding: 14px 18px;
cursor: pointer;
transition: border-color .12s, background .12s, transform .06s;
}
.ch-row:hover { background: var(--sf2); border-color: var(--bd2); }
.ch-row:active { transform: scale(.997); }
.ch-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ch-title { font-size: 14.5px; font-weight: 600; color: var(--t); }
.ch-sub { margin-top: 2px; }
.ch-metric .num { font-size: 14px; margin-top: 2px; }
.ch-arrow { font-size: 26px; color: var(--t3); text-align: center; line-height: 1; }
@media (max-width: 820px) {
.ch-row { grid-template-columns: 1fr auto; }
.ch-row .ch-prog, .ch-row .ch-metric:nth-child(3) { display: none; }
}
/* ── Fiches chantiers — liste (niveau 1) : avancement global P.D.C/Pose ── */
.fch-row {
display: flex; align-items: center; gap: 18px;
background: var(--sf); border: 1px solid var(--bd); border-radius: var(--rad);
padding: 14px 18px; cursor: pointer;
transition: border-color .12s, background .12s, transform .06s;
}
.fch-row:hover { background: var(--sf2); border-color: var(--bd2); }
.fch-row:active { transform: scale(.997); }
.fch-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fch-main { flex: 1 1 auto; min-width: 0; }
.fch-bars { display: flex; flex-direction: column; gap: 6px; width: 230px; flex: 0 0 auto; }
.fch-bar-item { display: flex; align-items: center; gap: 8px; }
.fch-bar-lbl {
font-size: 10.5px; font-weight: 700; color: var(--t3);
text-transform: uppercase; letter-spacing: .03em; width: 36px; flex: 0 0 auto;
}
.fch-bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: var(--sf3); overflow: hidden; }
.fch-bar-fill { height: 100%; border-radius: 999px; background: var(--orange); transition: width .2s; }
.fch-bar-fill.ok { background: var(--green); }
.fch-bar-pct { font-size: 11px; font-weight: 600; color: var(--t2); width: 32px; text-align: right; flex: 0 0 auto; }
@media (max-width: 820px) {
.fch-row { flex-wrap: wrap; }
.fch-bars { width: 100%; order: 3; flex-direction: row; gap: 16px; }
.fch-bar-item { flex: 1 1 0; }
}
/* Pastilles d'état de facturation sur une situation */
.ftag {
display: inline-block; font-size: 10px; font-weight: 600; line-height: 1;
padding: 3px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle;
}
.ftag-fact { background: rgba(16,185,129,.16); color: var(--green); }
.ftag-avoir { background: rgba(239,68,68,.16); color: var(--red); }
.ftag-corr { background: rgba(6,182,212,.16); color: var(--blue); }
/* ── Section Envoyés : sous-groupes par nombre de relances ────────── */
.env-group + .env-group { margin-top: 6px; }
.env-group-hd {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px 6px;
font-size: 12.5px; font-weight: 600; color: var(--t2);
text-transform: uppercase; letter-spacing: .03em;
}
.env-count {
font-size: 11px; font-weight: 600; color: var(--t3);
background: var(--sf2); border: 1px solid var(--bd);
border-radius: 999px; padding: 1px 8px; text-transform: none; letter-spacing: 0;
}
/* ── Page d'actions d'une situation (niveau 3) ────────────────────── */
.act-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
}
.act-card {
display: flex; flex-direction: column; gap: 3px;
text-align: left; align-items: flex-start;
background: var(--sf);
border: 1px solid var(--bd);
border-left: 3px solid var(--bd2);
border-radius: var(--rad);
padding: 16px 16px;
cursor: pointer; color: var(--t);
transition: border-color .12s, background .12s, transform .06s;
}
.act-card:hover { background: var(--sf2); border-color: var(--bd2); }
.act-card:active { transform: scale(.99); }
.act-card.bp { border-left-color: var(--blue); }
.act-card.bd { border-left-color: var(--red); }
.act-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.act-label { font-size: 14px; font-weight: 600; }
.act-desc { font-size: 11.5px; color: var(--t3); }
/* ── Formulaire d'édition d'un devis (étape Informations) ─────────── */
/* Deux colonnes : le devis lui-même à gauche, sa vie commerciale à droite. */
.dform-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.dform-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1080px) { .dform-grid { grid-template-columns: 1fr; } }
/* Cartes-sections : en-tête icône + titre + sous-titre explicatif */
.dsec-hd { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.dsec-ic {
width: 36px; height: 36px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 17px; border-radius: 9px;
background: rgba(6,182,212,.13);
border: 1px solid rgba(6,182,212,.25);
}
.dsec-title { font-size: 13.5px; font-weight: 700; color: var(--t); line-height: 1.2; }
.dsec-sub { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
/* Aide contextuelle sous un champ + marqueur champ requis */
.fhelp { display: block; font-size: 11px; color: var(--t3); margin-top: 4px; line-height: 1.4; }
label .req { color: var(--rose); font-weight: 700; }
/* Interrupteurs (checkbox stylée en switch) */
.tgl-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px; margin-bottom: 10px;
background: var(--sf2); border: 1px solid var(--bd); border-radius: var(--rad-s);
cursor: pointer;
}
.tgl-row:hover { border-color: var(--bd2); }
.tgl-row input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 34px; min-width: 34px; height: 20px; padding: 0; margin: 1px 0 0;
border-radius: 999px; border: none;
background: var(--bd2);
position: relative; cursor: pointer;
transition: background .15s;
}
.tgl-row input[type="checkbox"]::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; transition: left .15s;
}
.tgl-row input[type="checkbox"]:checked { background: var(--blue); }
.tgl-row input[type="checkbox"]:checked::after { left: 16px; }
.tgl-row input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
.tgl-txt { font-size: 13px; line-height: 1.4; }
.tgl-txt strong { font-weight: 600; }
.tgl-txt .fhelp { margin-top: 2px; }
.tgl-txt em { font-style: normal; color: var(--orange); }
/* Barre d'actions sticky : Enregistrer / Lignes → toujours visibles */
.dform-save {
position: sticky; bottom: 10px; z-index: 5;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
margin-top: 14px; padding: 10px 14px;
background: var(--sf); border: 1px solid var(--bd2);
border-radius: var(--rad); box-shadow: var(--sh2);
}
.dform-save .fhelp { margin: 0; }
/* Bandeau timeline (durées clés : demandé / envoyé / négo / versions) */
.dv-timeline {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 14px;
}
.dv-timeline .tl-pill {
display: inline-flex;
align-items: baseline;
gap: 6px;
background: var(--sf);
border: 1px solid var(--bd);
border-radius: 999px;
padding: 5px 12px;
font-size: 12.5px;
}
.dv-timeline .tl-pill .ic { font-size: 13px; }
.dv-timeline .tl-pill .tl-lbl { color: var(--t3); }
.dv-timeline .tl-pill .tl-val { font-weight: 600; }
/* Historique des négociations (étape 1) : liste chronologique */
.nego-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.nego-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 9px 11px;
background: var(--sf2); border: 1px solid var(--bd); border-radius: var(--rad-s);
}
.nego-date { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--t2); padding-top: 1px; }
.nego-rem { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.nego-item > button { color: var(--t3); font-size: 13px; padding: 0 2px; flex-shrink: 0; line-height: 1.4; }
.nego-item > button:hover { color: var(--red); }
.nego-add { display: flex; flex-direction: column; gap: 2px; }
.nego-add .fr { margin-bottom: 8px; }
/* Versions du devis (étape 1) : liste compacte V1, V2… */
.ver-list { display: flex; flex-direction: column; gap: 8px; }
.ver-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px;
background: var(--sf2); border: 1px solid var(--bd); border-radius: var(--rad-s);
}
.ver-num {
flex-shrink: 0; min-width: 36px; text-align: center;
font-size: 12px; font-weight: 700; color: var(--blue);
background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.25);
border-radius: 6px; padding: 4px 6px;
}
.ver-body { flex: 1; min-width: 0; }
.ver-line1 { font-size: 12.5px; font-weight: 600; }
.ver-line2 { font-size: 11.5px; color: var(--t3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.ver-item .btn { flex-shrink: 0; }
/* Récap par famille (étape 3) */
.recap-fam table { font-size: 12.5px; }
.recap-fam tfoot td { background: var(--sf2); font-weight: 600; }
/* Sliders simulation */
.simul {
background: var(--sf2);
border: 1px solid var(--bd);
border-radius: var(--rad);
padding: 14px;
margin-top: 12px;
}
.simul label { display: flex; justify-content: space-between; align-items: center; }
.simul input[type=range] {
width: 100%; padding: 0; background: transparent; border: none;
-webkit-appearance: none; appearance: none;
}
.simul input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--bd); border-radius: 2px; }
.simul input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); margin-top: -5px; }
/* ============================================================
Catalogue
============================================================ */
.fam-desc {
padding: 8px 16px;
border-bottom: 1px solid var(--bd);
background: var(--sf2);
font-size: 12.5px;
}
.fam-desc summary { cursor: pointer; font-weight: 500; color: var(--t2); padding: 4px 0; }
.fam-desc summary:hover { color: var(--t); }
.fam-desc pre { font-family: inherit; white-space: pre-wrap; margin-top: 6px; color: var(--t2); line-height: 1.45; font-size: 12px; }
/* ============================================================
Facturation : grille d'avancement
============================================================ */
.grille-av {
background: var(--sf);
border: 1px solid var(--bd);
border-radius: var(--rad);
overflow-x: auto;
}
.grille-av table { min-width: 900px; font-size: 12.5px; }
.grille-av th.bat-head { background: var(--sf3); text-align: center; border-left: 1px solid var(--bd); }
.grille-av th.sub { font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.grille-av td.mche { color: var(--t2); }
.grille-av td.real { color: var(--green); font-weight: 500; }
.grille-av td.pct { background: var(--sf2); min-width: 72px; }
.grille-av th.sub { min-width: 72px; }
/* Input transparent pour que le fond du | traverse (sinon le bg gris foncé
par défaut de l'input cache la couleur de surlignage jaune et masque le texte
foncé une fois has-val activé). Largeur 100 % + spinners masqués pour que la
valeur (ex. « 100 ») s'affiche entièrement. */
.grille-av td.pct input {
width: 100%; box-sizing: border-box;
text-align: right; padding: 4px 8px; background: transparent; color: var(--t);
-moz-appearance: textfield; appearance: textfield;
}
.grille-av td.pct input::-webkit-outer-spin-button,
.grille-av td.pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.grille-av td.pct.has-val { background: var(--hl); color: #1f2937; font-weight: 600; }
.grille-av td.has-val input { color: #1f2937; }
.grille-av tr.av-row td { background: rgba(245,158,11,.07); font-style: italic; }
/* Séparation visuelle avant le bloc des avenants (1ʳᵉ ligne av-row qui suit
une ligne non-avenant — l'ordre est familles → prorata → avenants). */
.grille-av tr:not(.av-row) + tr.av-row td { border-top: 3px double var(--bd2); }
/* Fiches d'appro : TOUTE la ligne surlignée avec la couleur du statut
(ROADMAP « FICHE APPRO » 11/08/2026) — même couleur que la pastille
(--ap-bg posée en inline sur le | , cf. rowHtml/dotHtml), en transparence
pour rester lisible. Ciblage sur les | (pas le |
) : cohérent avec le
reste du tableau (survol, alternance) qui repose sur le fond des cellules. */
tr[data-row-open] td { background: color-mix(in srgb, var(--ap-bg, transparent) 16%, transparent); }
/* Liste des fiches d'appro : pastille de statut en début de ligne + aperçu du
contenu (réf · désignation · qté à commander) à la place de la colonne Statut. */
.ap-dot {
display: inline-block; width: 12px; height: 12px; border-radius: 50%;
box-shadow: 0 0 0 2px rgba(127, 127, 127, .18); vertical-align: middle;
}
.ap-dot-cell { width: 26px; text-align: center; }
/* N° de fiche : discret (petite police grise, colonne resserrée). */
td.ap-num, th.ap-num { width: 110px; max-width: 110px; }
td.ap-num {
font-size: 11px; color: var(--t3);
font-family: ui-monospace, Consolas, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-contenu { max-width: 420px; }
.ap-lg {
display: flex; align-items: baseline; gap: 6px;
font-size: 12px; line-height: 1.5; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.ap-lg-ref { font-weight: 700; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.ap-lg-des { color: var(--t2); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.ap-lg-qte { color: var(--t3); font-weight: 600; flex: none; }
.ap-lg-plus { color: var(--t3); font-style: italic; }
.ap-leg {
display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px;
font-size: 11.5px; color: var(--t3);
}
.ap-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ap-leg .ap-dot { width: 10px; height: 10px; }
/* Ligne Prorata : auto-calculée, en lecture seule */
.grille-av tr.pro-row td { background: rgba(99, 102, 241, .08); font-style: italic; }
.grille-av tr.pro-row td.pct.has-val { background: rgba(99, 102, 241, .25); color: #312e81; }
.grille-av tr.pro-row input[readonly] { cursor: not-allowed; opacity: .85; }
.grille-av tfoot td { background: var(--sf2); font-weight: 700; }
.grille-av .border-left { border-left: 1px solid var(--bd); }
/* Colonnes finales : cumul + facturer (séparées du bloc bâtiments par un trait) */
.grille-av th.col-cumul, .grille-av td.col-cumul {
border-left: 1px solid var(--bd);
background: rgba(8, 145, 178, .06);
}
.grille-av th.col-fact, .grille-av td.col-fact {
border-left: 2px solid var(--green);
background: rgba(16, 185, 129, .10);
color: var(--green);
}
.grille-av tfoot td.col-fact { color: #fff; background: var(--green2); }
/* Situation récap */
.sit-recap {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
margin-top: 14px;
}
.sit-recap .card .lbl { color: var(--t3); font-size: 11.5px; text-transform: uppercase; }
.sit-recap .card .val { font-size: 18px; font-weight: 700; margin-top: 4px; }
.sit-recap .card.hl { border-color: var(--green); }
.sit-recap .card.hl .val { color: var(--green); }
@media (max-width: 800px) { .sit-recap { grid-template-columns: 1fr; } }
/* Progress bar */
.pb {
position: relative;
height: 7px;
background: var(--sf3);
border-radius: 4px;
overflow: hidden;
margin-top: 4px;
}
.pb > div {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, var(--blue), var(--green));
transition: width .2s;
}
.pb-label { font-size: 11px; color: var(--t2); }
/* Util ------------------------------------------------------ */
.muted { color: var(--t3); }
.right { text-align: right; }
.center { text-align: center; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 14px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 14px; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 14px; }
.flex { display: flex; align-items: center; }
.space-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.f-12 { font-size: 12px; }
.f-grow { flex: 1; min-width: 0; }
.loading {
padding: 40px;
text-align: center;
color: var(--t3);
}
.loading::after {
content: '';
display: inline-block;
width: 13px; height: 13px;
border: 2px solid var(--bd);
border-top-color: var(--blue);
border-radius: 50%;
animation: spin .8s linear infinite;
margin-left: 8px;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Donut + bars (canvas-less, SVG) */
.chart-wrap {
display: flex; align-items: center; gap: 14px;
}
.donut-legend { font-size: 12px; }
.donut-legend > div { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.donut-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.bars-row { display: flex; align-items: end; gap: 6px; height: 120px; padding: 6px 0; }
.bars-row .bar {
flex: 1;
background: linear-gradient(180deg, var(--blue), var(--blue3));
border-radius: 3px 3px 0 0;
position: relative;
min-height: 2px;
}
.bars-row .bar:hover { background: linear-gradient(180deg, var(--blue), var(--blue2)); }
.bars-row .bar .v {
position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
font-size: 10px; color: var(--t2);
}
.bars-row .bar .l {
position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
font-size: 10px; color: var(--t3);
}
/* ── Auth : login overlay + sidebar logout ─────────────────────── */
/* Quand non connecté, on masque l'app pour ne laisser que le login. */
body.logged-out #sidebar,
body.logged-out #main { display: none; }
body.logged-out { background: var(--bg); }
.login-screen {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
/* Fond travaillé : halos rouge (logo SMG) + cyan (accent app) sur dégradé sombre */
background:
radial-gradient(ellipse 55% 45% at 12% 88%, rgba(192, 0, 0, 0.16), transparent 65%),
radial-gradient(ellipse 45% 40% at 88% 12%, rgba(6, 182, 212, 0.13), transparent 65%),
radial-gradient(ellipse 90% 70% at 50% 45%, #121a30, var(--bg));
z-index: 9999;
overflow: hidden;
}
/* Grille en filigrane (clin d'œil plans / métré) qui s'estompe vers les bords */
.login-screen::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 25%, transparent 75%);
mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 25%, transparent 75%);
pointer-events: none;
}
body.theme-light .login-screen {
background:
radial-gradient(ellipse 55% 45% at 12% 88%, rgba(192, 0, 0, 0.07), transparent 65%),
radial-gradient(ellipse 45% 40% at 88% 12%, rgba(6, 182, 212, 0.09), transparent 65%),
var(--bg);
}
body.theme-light .login-screen::before {
background-image:
linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
}
.login-card {
position: relative;
background: var(--sf);
border: 1px solid var(--bd);
border-radius: 14px;
padding: 36px 32px 24px;
width: min(400px, calc(100% - 32px));
box-shadow: var(--sh2), 0 0 90px rgba(192, 0, 0, 0.08);
display: flex; flex-direction: column; gap: 15px;
animation: login-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes login-pop {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Liseré dégradé rouge → cyan en haut de la card */
.login-card::before {
content: '';
position: absolute; top: 0; left: 20px; right: 20px; height: 2px;
background: linear-gradient(90deg, transparent, var(--red2), var(--blue), transparent);
border-radius: 2px;
opacity: 0.85;
}
/* En-tête de card : logo rond + titre + sous-titre */
.login-brand {
display: flex; flex-direction: column; align-items: center;
gap: 12px;
margin-bottom: 6px;
text-align: center;
}
.login-logo {
width: 96px; height: 96px;
border-radius: 50%;
object-fit: contain;
/* Le logo PNG a un fond noir intégré → on l'assume dans une pastille sombre,
identique dans les deux thèmes. */
background: radial-gradient(circle at 50% 42%, #2b2b2b, #000 78%);
border: 2px solid var(--bd2);
box-shadow: 0 0 0 5px rgba(192, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.5);
padding: 5px;
}
.login-brand h2 {
margin: 0;
color: var(--t);
font-size: 25px;
font-weight: 700;
letter-spacing: 0.5px;
}
.login-brand h2 .accent { color: var(--red); }
.login-sub {
margin: 0;
font-size: 11.5px;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 2.5px;
}
.login-card label { display: flex; flex-direction: column; gap: 5px; }
.login-card label span {
font-size: 11px;
font-weight: 600;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.login-card input {
padding: 11px 12px;
background: var(--sf2);
border: 1px solid var(--bd);
border-radius: 8px;
color: var(--t);
font-size: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.login-card input:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}
.login-card button[type="submit"] {
margin-top: 8px;
padding: 12px;
border: 0;
border-radius: 8px;
background: linear-gradient(135deg, var(--blue), var(--blue2));
color: white;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.3px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(6, 182, 212, 0.22);
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.login-card button[type="submit"]:hover {
filter: brightness(1.12);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(6, 182, 212, 0.32);
}
.login-card button[type="submit"]:active { transform: translateY(0); }
.login-card button[type="submit"][disabled] {
opacity: 0.6;
cursor: progress;
transform: none;
filter: none;
}
.login-error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid var(--red);
color: var(--red);
padding: 9px 11px;
border-radius: 8px;
font-size: 13px;
}
/* Pied de card : raison sociale */
.login-foot {
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--bd);
text-align: center;
font-size: 11px;
color: var(--t3);
letter-spacing: 0.5px;
}
/* Mot de passe oublié : lien sous le bouton + message de confirmation */
.forgot-link {
text-align: center;
font-size: 12.5px;
color: var(--t2);
text-decoration: none;
transition: color 0.15s;
}
.forgot-link:hover { color: var(--blue); text-decoration: underline; }
.forgot-help {
margin: 0;
font-size: 12.5px;
color: var(--t2);
line-height: 1.55;
text-align: center;
}
.forgot-success {
background: rgba(34, 197, 94, 0.12);
border: 1px solid var(--green, #22c55e);
color: var(--green, #22c55e);
padding: 9px 11px;
border-radius: 8px;
font-size: 13px;
}
/* Footer sidebar : user chip + bouton logout */
.user-chip {
font-size: 12px; color: var(--t2);
background: var(--sf2); border: 1px solid var(--bd);
padding: 2px 8px; border-radius: 999px;
max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout-btn {
background: transparent; border: 1px solid var(--bd);
color: var(--t2); cursor: pointer;
padding: 2px 8px; border-radius: var(--rad-s);
font-size: 14px; line-height: 1;
}
.logout-btn:hover { background: var(--sf3); color: var(--red); border-color: var(--red); }
/* Inputs désactivés (mode lecture seule pour les rôles sans write) :
styling cohérent avec le reste du design system. */
#view input:disabled,
#view textarea:disabled,
#view select:disabled {
opacity: 0.7;
cursor: not-allowed;
background: var(--sf2);
color: var(--t2);
}
/* ── Fiches chantiers (suivi conducteurs : P.D.C / Pose) ─────────── */
.fiche-table { width: 100%; border-collapse: collapse; }
.fiche-table th, .fiche-table td { padding: 7px 10px; border-bottom: 1px solid var(--bd); }
.fiche-table thead th { font-size: 12px; color: var(--t2); text-transform: uppercase; letter-spacing: .5px; }
/* Lignes de structure (titre / sous-titre) */
.fiche-sec td { background: var(--sf2); font-weight: 700; letter-spacing: .3px; }
.fiche-sec.lvl-titre td { color: var(--t); text-transform: uppercase; }
.fiche-sec.lvl-soustitre td { color: var(--t2); padding-left: 22px; }
.fiche-sec.lvl-sst td { color: var(--t3); padding-left: 34px; font-weight: 600; }
/* Lignes d'ouvrage colorées selon l'avancement agrégé */
.fiche-ouv td:first-child { padding-left: 22px; }
.fiche-ouv.fe-ok { background: rgba(16, 185, 129, 0.16); }
.fiche-ouv.fe-wip { background: rgba(245, 158, 11, 0.16); }
.fiche-ouv.fe-ko { background: rgba(239, 68, 68, 0.14); }
.fiche-ssref { font-size: 11px; color: var(--t3); }
/* Pastille de couleur de repérage (DEVIS ETUDES) dans la fiche chantier */
.fiche-coul { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.35); }
/* Cellule d'avancement P.D.C / Pose : barre de progression (ROADMAP « FICHES
CHANTIER » 30/07/2026, remplace les 3 boutons ✓ ≈ ✗). P.D.C = lecture seule
(automatique) ; Pose = cliquable (fc-clic), fait défiler non_traite → en_cours
→ traite au clic. */
.fc-cell { white-space: nowrap; text-align: center; min-width: 110px; }
.fc-cell.fc-clic { cursor: pointer; }
.fc-bar {
display: inline-block; width: 72px; height: 8px; border-radius: 999px;
background: var(--sf2); border: 1px solid var(--bd); overflow: hidden;
vertical-align: middle;
}
.fc-bar-fill { height: 100%; background: var(--orange); border-radius: 999px; transition: width .2s; }
.fc-bar-fill.ok { background: var(--green); }
.fc-cell[data-etat="non_traite"] .fc-bar-fill { background: var(--red); }
.fc-bar-pct { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--t2); vertical-align: middle; width: 32px; text-align: left; }
.fc-cell.fc-clic:hover .fc-bar { border-color: var(--bd2); }
/* Carte chantier (liste) */
.fiche-chantiers { display: flex; flex-direction: column; gap: 8px; }
/* ── Barre de filtres Tableau achats ────────────────────────────── */
.achats-filters { padding: 16px 18px; }
.achats-filters .af-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.achats-filters .af-title {
font-size: 13px; font-weight: 700; color: var(--t2);
text-transform: uppercase; letter-spacing: 1px;
}
.achats-filters .af-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
}
.achats-filters .af-search { grid-column: 1 / -1; } /* la recherche prend toute la largeur */
.achats-filters .fr { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.achats-filters .fr label {
font-size: 11px; font-weight: 600; color: var(--t2);
text-transform: uppercase; letter-spacing: .6px;
}
.achats-filters input,
.achats-filters select {
width: 100%;
padding: 11px 12px;
background: var(--sf2);
border: 1px solid var(--bd);
border-radius: 8px;
color: var(--t);
font-size: 14px;
}
.achats-filters input:focus,
.achats-filters select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}
/* ── Mon compte — éditeur d'ordre des sections ──────────────────── */
.me-sections { display: flex; flex-direction: column; gap: 6px; }
.me-sec-row {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px; background: var(--sf2);
border: 1px solid var(--bd); border-radius: 8px;
}
.me-sec-lbl { font-weight: 600; }
.me-sec-act { display: flex; gap: 4px; }
/* ── Notifications (cloche en-tête) ─────────────────────────────── */
.notif-wrap { position: relative; }
.notif-badge {
position: absolute; top: -3px; right: -3px;
min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
line-height: 16px; text-align: center; border-radius: 9px; pointer-events: none;
}
/* Rappel visuel : le badge sursaute (toutes les 5 s via JS) tant que la cloche n'a pas été ouverte. */
@keyframes notif-shake {
0%, 60%, 100% { transform: translateY(0) scale(1); }
10% { transform: translateY(-5px) scale(1.3); }
25% { transform: translateY(0) scale(1); }
40% { transform: translateY(-3px) scale(1.2); }
}
.notif-badge.notif-shake { animation: notif-shake .7s ease; }
.notif-panel {
position: absolute; top: calc(100% + 8px); right: 0;
width: 340px; max-height: 420px; overflow-y: auto;
background: var(--sf); border: 1px solid var(--bd); border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); z-index: 60; padding: 6px;
}
.notif-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 6px 8px 8px; border-bottom: 1px solid var(--bd); margin-bottom: 4px;
}
.notif-head strong { font-size: 13px; }
.notif-item {
display: flex; align-items: flex-start; gap: 6px;
width: 100%; text-align: left; padding: 8px 10px; box-sizing: border-box;
border: none; background: transparent; color: inherit; font: inherit;
border-radius: 8px; cursor: pointer;
}
.notif-item:hover { background: var(--sf2); }
.notif-txt { flex: 1; min-width: 0; }
.notif-head-actions { display: flex; gap: 6px; }
/* Bouton archiver (par notification) : discret, visible au survol. */
.notif-arch {
flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
font-size: 13px; padding: 2px 4px; border-radius: 6px; opacity: 0;
transition: opacity .12s;
}
.notif-item:hover .notif-arch { opacity: .7; }
.notif-arch:hover { opacity: 1 !important; background: var(--bd); }
/* Bloc repliable « Archives » en bas du panneau. */
.notif-archives { border-top: 1px solid var(--bd); margin-top: 6px; }
.notif-archives summary {
cursor: pointer; padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--t2);
}
.notif-archives .notif-item { opacity: .8; }
.notif-item.unread { background: var(--sf2); }
.notif-item.unread .notif-msg { font-weight: 600; }
.notif-msg { display: block; font-size: 13px; }
.notif-time { display: block; font-size: 11px; color: var(--t2); margin-top: 2px; }
.notif-empty { padding: 18px; text-align: center; color: var(--t2); font-size: 13px; }
/* ── « 📦 Docs prod à importer » (Tableau achats) ────────────────── */
.dp-count {
display: inline-block; min-width: 17px; padding: 0 5px;
border-radius: 999px; background: #dc2626; color: #fff;
font-size: 10.5px; font-weight: 800; text-align: center;
}
.dp-fourn { margin-bottom: 18px; }
.dp-fourn-titre {
font-size: 14px; font-weight: 800; margin-bottom: 8px;
padding-bottom: 4px; border-bottom: 2px solid var(--bd2);
}
.dp-doc {
border: 1px solid var(--bd); border-radius: 10px; background: var(--sf2);
padding: 10px 12px; margin-bottom: 10px;
}
.dp-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dp-doc-actions { display: flex; align-items: center; gap: 6px; }
.dp-switch { display: flex; gap: 6px; }
.dp-doc-archive { opacity: .85; }
.dp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dp-table th {
text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
color: var(--t2); padding: 3px 8px; border-bottom: 1px solid var(--bd);
}
.dp-table td { padding: 5px 8px; border-bottom: 1px solid var(--bd); }
.dp-table tbody tr:last-child td { border-bottom: none; }
.dp-table td.num { text-align: right; }
/* Duos affaire - ouvrage empilés dans la liste des commandes. */
.cmd-duo { line-height: 1.45; white-space: nowrap; }
.cmd-duo + .cmd-duo { margin-top: 1px; }
/* Sélecteur discret des modes de référence (quincaillerie) :
Catalogue / Saisie manuelle / + Nouvelle réf. */
.cmd-refmode {
display: inline-flex; flex-wrap: wrap; margin-top: 3px;
border: 1px solid var(--bd); border-radius: 10px; overflow: hidden;
background: var(--sf);
}
.cmd-refmode button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 10px; font-weight: 600; color: var(--t2);
padding: 2px 9px; line-height: 1.4; white-space: nowrap;
transition: background .12s, color .12s;
}
.cmd-refmode button + button { border-left: 1px solid var(--bd); }
.cmd-refmode button:hover { color: var(--t); background: var(--sf2); }
.cmd-refmode button.on { background: var(--bd2); color: var(--sf); font-weight: 800; }
.cmd-refmode button[data-mode="nouvelle"].on { background: #16a34a; color: #fff; }
/* ── Liste des commandes (Tableau achats) ───────────────────────── */
.ctr { text-align: center; }
.pastille {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
font-size: 12px; font-weight: 700;
}
.pa-ok { background: rgba(16, 185, 129, 0.18); color: var(--green); }
.pa-wait { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.pa-ko { background: rgba(239, 68, 68, 0.18); color: var(--red); }
.cmd-actions { display: inline-flex; gap: 4px; }
/* ── Tableau achats : barre de recherche + filtres ──────────────── */
.cmd-filters { padding: 14px 16px; }
.cmd-filters .cmd-q { width: 100%; margin-bottom: 12px; }
.cmd-filter-grid {
display: grid; gap: 10px 12px; align-items: end;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cmd-fl { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cmd-fl > span {
font-size: 11px; font-weight: 600; color: var(--t2);
text-transform: uppercase; letter-spacing: .5px;
}
.cmd-fl select { width: 100%; }
#cmd-f-reset { align-self: end; white-space: nowrap; }
.cmd-lines td { padding: 9px 8px; vertical-align: top; }
.cmd-lines th { padding-bottom: 8px; }
.cmd-lines [data-f="designation"], .cmd-lines select[data-f] { width: 100%; min-width: 120px; }
.cmd-lines .ck { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
/* Colonne « Réf. » visible seulement en mode quincaillerie. */
.cmd-lines.quinc-off .q-ref { display: none; }
/* ── Formulaire « Nouvelle commande » : en-tête de section + respiration ── */
.cmd-form { padding: 18px 20px; }
.af-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--bd);
}
.af-title {
font-size: 13px; font-weight: 700; color: var(--t2);
text-transform: uppercase; letter-spacing: 1px;
}
.cmd-subtotal {
margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--bd); font-size: 14px;
}
.cmd-actions-bar { display: flex; gap: 10px; margin-top: 18px; }
/* ── Mode espion (impersonation) ────────────────────────────────── */
#spy-banner {
/* Commence après la sidebar (220px) pour ne pas masquer son pied (sélecteur
d'agence, chip utilisateur). Barre fine et discrète. */
position: fixed; left: 220px; right: 0; bottom: 0; z-index: 200;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 4px 12px; background: #7c3aed; color: #fff;
font-size: 11.5px; font-weight: 500; opacity: 0.95;
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.25);
}
#spy-banner button { padding: 1px 8px; font-size: 11px; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
#spy-banner button:hover { background: rgba(255, 255, 255, 0.3); }
body.spying #main { padding-bottom: 30px; }
/* Bannière « SMG GROUPE » (vue consolidée lecture seule) */
#groupe-banner {
/* Commence après la sidebar (220px) pour ne pas empiéter sur le logo /
le nom « SMG Pilot » en haut de la barre latérale. */
position: fixed; left: 220px; right: 0; top: 0; z-index: 200;
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 7px 14px; background: #0f766e; color: #fff;
font-size: 13px; font-weight: 600; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
body.groupe-view #main { padding-top: 40px; }
/* Comparatif agences (vue GROUPE) : cartes KPI + total */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--t3); }
.kpi-val { font-size: 22px; font-weight: 700; color: var(--t); margin-top: 4px; }
.kpi-sub { font-size: 12px; color: var(--t2); margin-top: 2px; }
tr.row-total td { border-top: 2px solid var(--bd); background: var(--sf2); }
/* Bannière « devis en lecture seule » (verrou par statut) */
.lock-banner { background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 8px; padding: 9px 13px; margin-bottom: 12px; font-size: 13px; color: var(--t); }
/* ── Module Planification (FullCalendar) ─────────────────────────── */
/* Menu contextuel (clic droit sur une mission) */
.pl-ctxmenu { position: fixed; z-index: 9999; background: var(--sf); border: 1px solid var(--bd2);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 4px; min-width: 190px; }
.pl-ctxmenu-item { display: block; width: 100%; text-align: left; background: none; border: none;
color: var(--t); padding: 8px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
.pl-ctxmenu-item:hover { background: var(--sf3); }
.pl-ctxmenu-danger { color: var(--red); }
.pl-ctxmenu-danger:hover { background: rgba(239,68,68,.12); }
/* Palette de couleurs de repérage (DEVIS ETUDES) — popover 30 pastilles */
.repcoul-pop { position: fixed; z-index: 9999; background: var(--sf); border: 1px solid var(--bd2);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 8px;
display: grid; grid-template-columns: repeat(6, 22px); gap: 5px; }
.repcoul-sw { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--bd2); cursor: pointer; padding: 0; }
.repcoul-sw.active { outline: 2px solid var(--t); outline-offset: 1px; }
.repcoul-btn { width: 30px; height: 22px; padding: 0; border: 1px solid var(--bd); border-radius: 4px; cursor: pointer; }
.pl-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px; }
.pl-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--t2); }
.pl-filters select, .pl-filters input { min-width: 180px; }
/* Filtres planning multi-sélection (ROADMAP « PLANNING FILTRE » 05/08/2026) :
bouton compact ouvrant un panneau flottant de cases à cocher. */
.pl-f-multi-btn { min-width: 160px; text-align: left; display: flex; justify-content: space-between;
align-items: center; gap: 6px; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--rad-s);
padding: 6px 10px; font-size: 13px; color: var(--t); cursor: pointer; }
.pl-f-multi-btn:hover { background: var(--sf2); }
.pl-f-panel { position: fixed; z-index: 9999; background: var(--sf); border: 1px solid var(--bd2);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 6px; max-height: 280px; overflow: auto;
min-width: 220px; display: flex; flex-direction: column; gap: 1px; }
.pl-f-panel label { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 6px;
border-radius: 4px; cursor: pointer; white-space: nowrap; }
.pl-f-panel label:hover { background: var(--sf3); }
.pl-f-panel input { width: auto; margin: 0; }
.pl-f-panel .pl-f-clear { font-size: 12px; color: var(--blue); cursor: pointer; padding: 6px; margin-top: 4px;
border-top: 1px solid var(--bd); }
.pl-f-panel .pl-f-clear:hover { text-decoration: underline; }
/* Intégration au thème : FullCalendar v6 expose des variables --fc-*. */
#pl-calendar {
--fc-border-color: var(--bd);
--fc-page-bg-color: var(--sf);
--fc-neutral-bg-color: var(--sf2);
--fc-today-bg-color: rgba(6, 182, 212, .10);
--fc-now-indicator-color: var(--red);
--fc-list-event-hover-bg-color: var(--sf3);
color: var(--t);
}
#pl-calendar .fc .fc-col-header-cell-cushion,
#pl-calendar .fc .fc-daygrid-day-number,
#pl-calendar .fc .fc-timegrid-axis-cushion,
#pl-calendar .fc .fc-list-day-text,
#pl-calendar .fc .fc-list-day-side-text { color: var(--t); text-decoration: none; }
#pl-calendar .fc .fc-toolbar-title { font-size: 1.05rem; color: var(--t); }
#pl-calendar .fc .fc-button {
background: var(--sf2); border-color: var(--bd); color: var(--t2);
text-transform: capitalize; box-shadow: none;
}
#pl-calendar .fc .fc-button:hover { background: var(--sf3); color: var(--t); }
#pl-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
#pl-calendar .fc .fc-button-primary:not(:disabled):active {
background: var(--blue); border-color: var(--blue); color: #fff;
}
#pl-calendar .fc-event { cursor: pointer; font-size: 11.5px; }
#pl-calendar .fc-event.pl-pending { opacity: .85; border-style: dashed !important; border-width: 2px !important; }
#pl-calendar .fc-event.pl-refused { opacity: .5; text-decoration: line-through; }
/* Pastilles plus lisibles, notamment en vue Mois (events en bloc plein). */
#pl-calendar .fc-daygrid-event { padding: 2px 6px; margin-top: 2px; font-size: 12px; font-weight: 600; }
#pl-calendar .fc-event-title, #pl-calendar .fc-event-time { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
#pl-calendar .fc-daygrid-block-event .fc-event-title { white-space: normal; }
#pl-calendar .fc-daygrid-event-harness { margin-bottom: 1px; }
/* Sélecteur d'ouvrages repliable (modale de mission). */
.pl-ouv-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pl-ouv-summary { color: var(--t2); font-size: 13px; line-height: 1.3; }
.pl-ouv-picker { margin-top: 6px; border: 1px solid var(--bd); border-radius: var(--rad-s); padding: 6px; background: var(--sf2); }
.pl-ouv-list { max-height: 170px; overflow: auto; display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.pl-ouv-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; padding: 3px 4px; border-radius: 3px; }
.pl-ouv-item:hover { background: var(--sf3); }
.pl-ouv-item input { width: auto; margin: 0; }
/* Badge « N en attente » (validation des missions) dans le header. */
.pl-pending-btn { background: var(--orange); border-color: var(--orange); color: #1a1200; font-weight: 600; }
.pl-pending-btn:hover { filter: brightness(1.08); }
/* Filtre « en attente » actif : bouton enfoncé, re-cliquer ré-affiche tout. */
.pl-pending-btn.pl-pending-on { box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); filter: brightness(.92); }
/* Types de tâche non-mission : motif rayé pour les distinguer des missions. */
#pl-calendar .pl-type-conge, #pl-calendar .pl-type-formation,
#pl-calendar .pl-type-reunion, #pl-calendar .pl-type-absence {
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 5px, transparent 5px 11px);
}
#pl-calendar .pl-type-absence { opacity: .82; }
/* Chevauchement (même personne, créneaux qui se recoupent) : liseré rouge. */
#pl-calendar .pl-overlap { box-shadow: 0 0 0 2px var(--red), var(--sh); }
/* Responsive : planning lisible sur mobile. */
@media (max-width: 640px) {
.pl-filters { gap: 8px; }
.pl-filters select, .pl-filters input, .pl-f { min-width: 0; width: 100%; }
.pl-f { flex: 1 1 45%; }
#pl-calendar .fc-toolbar { flex-direction: column; gap: 6px; }
#pl-calendar .fc-toolbar-title { font-size: .95rem; }
#pl-calendar .fc-header-toolbar { margin-bottom: 8px; }
#pl-calendar .fc-button { padding: 3px 6px; font-size: 12px; }
}
/* ── Module Saisie des heures ───────────────────────────────────── */
.empty { color: var(--t3); text-align: center; padding: 18px 8px; }
.h-nav {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px; flex-wrap: wrap;
}
.h-nav-date { flex: 1 1 auto; text-align: center; min-width: 180px; }
.h-nav-date strong { text-transform: capitalize; }
.h-card { display: flex; flex-direction: column; gap: 12px; }
.h-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.h-counter { font-size: 14px; color: var(--t2); }
.h-counter strong { color: var(--t); }
.h-counter.ok { color: var(--green); }
.h-counter.ok strong { color: var(--green); }
.h-counter.under { color: var(--t2); }
.h-counter.over { color: var(--orange); }
.h-counter.over strong { color: var(--orange); }
.h-refus {
background: rgba(239,68,68,.12); border: 1px solid var(--red3);
color: var(--red); border-radius: var(--rad-s); padding: 8px 12px; font-size: 13px;
}
.h-ok {
background: rgba(16,185,129,.12); border: 1px solid var(--green2);
color: var(--green); border-radius: var(--rad-s); padding: 8px 12px; font-size: 13px;
}
.hl-list { display: flex; flex-direction: column; gap: 8px; }
.hl-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px; border: 1px solid var(--bd); border-radius: var(--rad-s);
background: var(--sf2);
}
.hl-row.hl-bad { border-color: var(--orange); }
.hl-fields { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.hl-fields select, .hl-fields input { min-width: 120px; flex: 1 1 auto; }
.hl-right { display: flex; align-items: center; gap: 8px; }
.hl-step { display: flex; align-items: center; gap: 6px; }
.hl-step .btn { min-width: 34px; font-size: 16px; line-height: 1; padding: 4px 8px; }
.hl-h { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.hl-warn { color: var(--orange); font-size: 16px; }
.hl-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Filtres de l'écran « Heures à valider » (vue globale, ROADMAP 11/08/2026). */
.hv-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.hv-role-pill.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.hv-filters #hv-q { min-width: 220px; flex: 1 1 220px; }
.hv-group { margin-bottom: 12px; }
.hv-person { font-weight: 600; margin-bottom: 8px; }
.hv-row {
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
padding: 8px 0; border-top: 1px solid var(--bd);
}
.hv-row-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hv-clickable { cursor: pointer; border-radius: var(--rad-s); transition: background .12s; }
.hv-clickable:hover { background: var(--sf2); }
/* Détail par chantier/ouvrage affiché directement sur la ligne « à valider »
(ROADMAP « HEURES A VALIDER » 11/08/2026) — le responsable voit le détail
AVANT de décider, sans clic supplémentaire. */
.hv-lignes { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; }
.hv-ligne { font-size: 12.5px; color: var(--t2); }
.hv-ligne-h { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--t); margin-right: 6px; }
/* Écran « Toutes les feuilles d'heures » (managers). */
.hh-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hh-bar select { min-width: 170px; }
.hh-bar #hh-user { margin-left: auto; }
.hh-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
padding-bottom: 8px; border-bottom: 1px solid var(--bd); }
.hh-person { font-weight: 600; font-size: 14px; }
.hh-tot { display: flex; align-items: center; gap: 8px; }
.hh-print { margin-left: auto; }
.hh-row { padding: 7px 8px; }
.hh-row .hh-date { min-width: 96px; text-transform: capitalize; }
.hh-row .hh-st { min-width: 92px; }
.hh-row .hh-hrs { font-variant-numeric: tabular-nums; }
.hh-row .hh-meta { margin-left: auto; text-align: right; }
/* Vue liste « Mes feuilles » (salarié). */
.mf-row { padding: 9px 10px; gap: 14px; }
.mf-date { min-width: 170px; text-transform: capitalize; }
.mf-st { min-width: 96px; }
.mf-hrs { margin-left: auto; font-variant-numeric: tabular-nums; }
.mf-hrs.under { color: var(--orange); }
/* Vue globale mensuelle (ROADMAP « HEURES » 11/08/2026) : jour ouvré sans
feuille encore créée — même rythme visuel que .mf-row (colonne, même
padding/bordure), en