/* ==========================================================================
   Lyra System 2026 — feuille de style unique (Terrain + Bureau)
   Identité : rouge BATINOV #CF2C30, noir chaud #121110, blanc cassé #F4F1EC.
   Typographie : Barlow (texte) et Barlow Condensed (titres, chiffres, boutons),
   polices libres (OFL) servies depuis /fonts : aucune ressource externe.
   ========================================================================== */

@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/barlow-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }

:root {
  --rouge: #CF2C30; --rouge-fonce: #A92125; --noir: #121110; --blanc: #F4F1EC;
  --f-texte: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titre: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --r-s: 6px; --r-m: 10px; --r-l: 14px;
  --t-rapide: .16s; --courbe: cubic-bezier(.2, .8, .2, 1);
  --sur: env(safe-area-inset-bottom, 0px);
  /* Thème sombre par défaut (terrain) */
  --fond: #121110; --surface: #1C1A18; --surface-2: #262320; --surface-3: #322E2A;
  --ligne: #36322E; --ligne-forte: #57514A;
  --texte: #F4F1EC; --texte-2: #C4BDB3; --texte-3: #978F85;
  --vert: #57BC83; --vert-fond: rgba(87, 188, 131, .14); --ambre: #F2B04A; --ambre-fond: rgba(242, 176, 74, .14);
  --rouge-txt: #FF7174; --rouge-fond: rgba(207, 44, 48, .16);
  --encre-g: #DCD5CA; --plan: #5D564F; --beton: #B9B1A5; --beton-2: #8D857A; --grille: #2C2926;
  --focus: #F4F1EC;
  color-scheme: dark;
}
[data-theme="clair"] {
  --fond: #F4F1EC; --surface: #FCFBF8; --surface-2: #EEEAE3; --surface-3: #E4DED4;
  --ligne: #DDD6CB; --ligne-forte: #B9AFA2;
  --texte: #121110; --texte-2: #48433D; --texte-3: #6F6861;
  --vert: #23724A; --vert-fond: rgba(35, 114, 74, .1); --ambre: #8F5400; --ambre-fond: rgba(196, 122, 0, .12);
  --rouge-txt: #B0232A; --rouge-fond: rgba(207, 44, 48, .09);
  --encre-g: #3A3531; --plan: #C3BAAD; --beton: #9A9287; --beton-2: #756E64; --grille: #E7E2DA;
  --focus: #121110;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--f-texte); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums lining-nums; }
[data-mode="bureau"] body { font-size: 15px; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: .005em; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visuel-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ico { width: 24px; height: 24px; flex: none; }
.mono { display: block; height: auto; }
.mono path { fill: var(--rouge) !important; stroke: var(--rouge) !important; }
#app { min-height: 100vh; min-height: 100dvh; }
.note { color: var(--texte-3); font-size: .85em; }
.lien { background: none; border: 0; padding: 0; color: var(--rouge-txt); text-decoration: underline; }

/* ---------- Entrée de l'interface après l'animation d'ouverture (un seul moment) ---------- */
html:not(.app-prete) #app { opacity: 0; }
/* « backwards » et non « both » : aucune transformation ne reste sur #app une fois l'entrée finie,
   sinon #app deviendrait le repère des éléments fixes et la barre d'onglets défilerait avec la page. */
html.app-prete #app { animation: entree .5s var(--courbe) backwards; }
@keyframes entree { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.1em; border-radius: var(--r-m); border: 2px solid transparent;
  font-family: var(--f-titre); font-weight: 600; font-size: 1.12em; letter-spacing: .01em; text-decoration: none; transition: background var(--t-rapide), border-color var(--t-rapide), transform var(--t-rapide); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--plein { background: var(--rouge); color: #fff; }
.btn--plein:hover:not([disabled]) { background: var(--rouge-fonce); }
.btn--plein[disabled] { background: var(--surface-3); color: var(--texte-2); opacity: 1; }
.btn--contour { border-color: var(--ligne-forte); background: transparent; }
.btn--contour:hover { border-color: var(--texte-2); }
.btn--fantome { background: transparent; color: var(--texte-2); }
.btn--danger { border-color: var(--rouge); color: var(--rouge-txt); background: transparent; }
.btn--large { min-height: 58px; width: 100%; }
.btn--geant { min-height: 72px; width: 100%; font-size: 1.35em; border-radius: var(--r-l); }
.btn--petit { min-height: 34px; padding: 0 .7em; font-size: .95em; border-width: 1.5px; }
.btn .ico { width: 1.25em; height: 1.25em; }
.btn-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-m); border: 0; background: transparent; color: inherit; }
.btn-ico:hover { background: var(--surface-2); }
.btn-ico[disabled] { opacity: .3; }
.btn-ico--grand { width: 56px; height: 56px; background: var(--surface-2); }
.btn-ico--petit { width: 30px; height: 30px; vertical-align: middle; }
.btn-ico--petit .ico { width: 18px; height: 18px; }

/* ---------- Champs ---------- */
.form { display: grid; gap: 16px; }
.champ { display: grid; gap: 6px; }
.champ > span { font-weight: 600; font-size: .92em; color: var(--texte-2); }
.champ input, .champ select, .champ textarea, .sel { min-height: 52px; padding: 10px 14px; border-radius: var(--r-m); border: 2px solid var(--ligne-forte); background: var(--surface); color: var(--texte); width: 100%; }
.champ textarea { resize: vertical; min-height: 96px; line-height: 1.4; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .sel:focus { border-color: var(--texte); outline: none; }
.champ--ligne { grid-auto-flow: column; align-items: center; gap: 10px; }
.sel { min-height: 40px; width: auto; padding: 6px 12px; border-width: 1.5px; font-size: .95em; }
.sel--recherche { min-width: 200px; }
.interrupteur { display: flex; gap: 12px; align-items: center; min-height: 52px; font-weight: 500; }
.interrupteur input { width: 28px; height: 28px; accent-color: var(--rouge); }

/* ---------- Segments, puces, étiquettes ---------- */
.segments { display: flex; padding: 4px; background: var(--surface-2); border-radius: var(--r-m); gap: 4px; }
.segment { flex: 1; min-height: 46px; border: 0; border-radius: 8px; background: transparent; font-weight: 600; color: var(--texte-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segment.is-actif, .segment:has(input:checked) { background: var(--surface); color: var(--texte); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.segments--choix .segment { position: relative; cursor: pointer; }
.segments--choix input { position: absolute; opacity: 0; }
.segments--petit .segment { min-height: 32px; padding: 0 10px; font-size: .92em; }
.segments--petit .ico { width: 18px; height: 18px; }
.puces { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.puce { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ligne-forte); background: transparent; font-weight: 600; white-space: nowrap; }
.puce.is-actif { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.puces--choix .puce { min-height: 38px; font-size: .92em; font-weight: 500; }
.puce--statique { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 4px 0 10px; margin: 2px 4px 2px 0; border-width: 1px; font-size: .9em; }
.puce__x { border: 0; background: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--texte-3); border-radius: 50%; }
.puce__x .ico { width: 14px; height: 14px; }
.etiq { display: inline-block; font-style: normal; font-size: .78em; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--surface-3); color: var(--texte-2); }
.etiq--u0 { background: var(--rouge); color: #fff; }
.etiq--u1 { background: var(--ambre-fond); color: var(--ambre); }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); font-family: var(--f-titre); font-weight: 600; font-size: 1.05em; flex: none; }
.avatar--petit { width: 24px; height: 24px; font-size: .72em; }
.statut { display: inline-block; font-size: .82em; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); white-space: nowrap; }
.statut--actif { background: var(--vert-fond); color: var(--vert); }
.statut--preparation, .statut--a_qualifier { background: var(--ambre-fond); color: var(--ambre); }
.statut--erreur { background: var(--rouge-fond); color: var(--rouge-txt); }
.bandeau { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface-2); color: var(--texte-2); font-weight: 500; margin: 0 0 14px; }
.bandeau--attention { background: var(--ambre-fond); color: var(--ambre); }

/* ---------- Pastille de synchronisation ---------- */
.pastille-sync { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; border-radius: 999px; border: 1.5px solid var(--ligne-forte); background: transparent; font-size: .82em; font-weight: 600; white-space: nowrap; color: var(--texte-2); }
.pastille-sync .ico { width: 18px; height: 18px; }
.pastille-sync__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #1A1305; color: var(--ambre); font-size: .95em; }
.pastille-sync.is-attente .pastille-sync__n { background: var(--texte); color: var(--fond); }
.pastille-sync.is-ok .ico { color: var(--vert); }
.pastille-sync.is-envoi .ico { animation: tourne 1s linear infinite; }
.pastille-sync.is-attente { border-color: var(--texte-3); color: var(--texte); }
.pastille-sync.is-horsligne { border-color: var(--ambre); background: var(--ambre); color: #1A1305; }
.pastille-sync.is-erreur { border-color: var(--rouge); color: var(--rouge-txt); }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ==========================================================================
   TERRAIN (mobile)
   ========================================================================== */
.t-app { min-height: 100dvh; padding-bottom: calc(88px + var(--sur)); }
.t-tete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--fond); border-bottom: 1px solid var(--ligne); }
.t-tete__marque { display: block; width: 46px; flex: none; }
.t-tete__marque .mono { width: 46px; }
.t-tete__jour { flex: 1; min-width: 96px; display: grid; line-height: 1.15; }
.t-tete__j { font-family: var(--f-titre); font-weight: 600; font-size: 1.15em; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-tete__j::first-letter { text-transform: uppercase; }
.t-tete__s { font-size: .78em; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-tete__moi { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface-3); font-family: var(--f-titre); font-weight: 700; font-size: 1.05em; flex: none; }
.t-vue { display: block; padding: 18px 16px 24px; max-width: 640px; margin: 0 auto; outline: none; }
.t-onglets { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--ligne); padding-bottom: var(--sur); }
.t-onglet { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 72px; text-decoration: none; color: var(--texte-3); font-size: .78em; font-weight: 600; position: relative; }
.t-onglet .ico { width: 28px; height: 28px; }
.t-onglet.is-actif { color: var(--texte); }
.t-onglet.is-actif::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--rouge); }

.titre-vue { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.titre-vue h1 { font-size: 2.1em; font-weight: 700; }
.titre-vue__s { color: var(--texte-3); font-weight: 500; width: 100%; margin-top: -8px; }
.titre-vue__s::first-letter { text-transform: uppercase; }
.retour { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--texte-2); font-weight: 600; min-height: 44px; width: 100%; }

/* Journée */
.j-salut { margin-bottom: 14px; }
.j-salut h1 { font-size: 2.3em; font-weight: 700; }
.j-salut p { color: var(--texte-3); margin-top: 2px; }
.carte-ch { margin: 10px 0 14px; padding: 16px 16px 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--ligne); }
.carte-ch__tete h2 { font-size: 1.75em; font-weight: 700; }
.carte-ch__tete p { color: var(--texte-3); font-size: .9em; }
.carte-ch__bat { margin: 4px -6px 0; }
.carte-ch__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--ligne); padding-top: 12px; }
.kpi-t { display: grid; gap: 0; }
.kpi-t b { font-family: var(--f-titre); font-weight: 700; font-size: 1.8em; line-height: 1; display: flex; align-items: center; gap: 2px; }
.kpi-t span { font-size: .78em; color: var(--texte-3); line-height: 1.2; margin-top: 3px; }
.ico--serie { color: var(--ambre); width: 26px; height: 26px; }
.carte-ch__astuce { margin-top: 12px; font-size: .9em; color: var(--texte-3); }
.badges { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge-ch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 999px; background: var(--surface-2); font-size: .82em; font-weight: 600; }
.badge-ch .ico { width: 18px; height: 18px; color: var(--ambre); }
.meteo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.meteo__j { display: grid; justify-items: center; gap: 1px; padding: 10px 6px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--ligne); text-align: center; }
.meteo__j .ico { width: 30px; height: 30px; color: var(--texte-2); }
.meteo__j b { font-size: .85em; }
.meteo__j b::first-letter { text-transform: uppercase; }
.meteo__j span { font-size: .8em; color: var(--texte-3); }
.meteo__j.is-alerte { border-color: var(--ambre); }
.meteo__j.is-alerte .ico { color: var(--ambre); }
.meteo__src { grid-column: 1 / -1; font-size: .72em; color: var(--texte-3); text-align: right; }
.meteo--off { display: flex; align-items: center; gap: 8px; color: var(--texte-3); font-size: .88em; padding: 4px 2px; }
.meteo--off .ico { width: 20px; height: 20px; }
.cta { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r-l); background: var(--rouge); color: #fff; text-decoration: none; }
.cta > .ico:first-child { width: 36px; height: 36px; }
.cta span { flex: 1; display: grid; }
.cta b { font-family: var(--f-titre); font-weight: 700; font-size: 1.55em; line-height: 1.05; }
.cta small { font-size: .88em; opacity: .9; }
.cta--fait { background: var(--surface); color: var(--texte); border: 2px solid var(--vert); }
.cta--fait > .ico:first-child { color: var(--vert); }
.cta--calme { background: var(--surface); color: var(--texte-2); border: 1px solid var(--ligne); }
.bloc { margin-bottom: 18px; }
.bloc__tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bloc__tete h2 { font-size: 1.45em; }
.bloc__tete a { color: var(--texte-2); font-weight: 600; font-size: .92em; }
.bloc__vide { color: var(--texte-3); }
.btn--signal { margin-bottom: 8px; }

/* Tâches */
.taches { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tache { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--ligne-forte); }
.tache.u-0 { border-left-color: var(--rouge); }
.tache.u-1 { border-left-color: var(--ambre); }
.tache__ok { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 2.5px solid var(--ligne-forte); background: transparent; color: transparent; display: grid; place-items: center; transition: background var(--t-rapide), border-color var(--t-rapide); }
.tache__ok .ico { width: 28px; height: 28px; }
.tache__ok:hover { border-color: var(--vert); color: var(--vert); }
.tache.is-faite .tache__ok { background: var(--vert); border-color: var(--vert); color: #fff; }
.tache.is-faite .tache__t { text-decoration: line-through; color: var(--texte-3); }
.tache__c { flex: 1; min-width: 0; }
.tache__t { font-weight: 600; line-height: 1.3; }
.tache__m { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: .84em; color: var(--texte-3); align-items: center; }
.tache.is-retard .tache__e { color: var(--rouge-txt); font-weight: 600; }
.is-attente { position: relative; }
.tache.is-attente .tache__m::after { content: "En attente d’envoi"; font-weight: 600; color: var(--ambre); }

/* Pointage */
.jour-nav { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.jour-nav__d { flex: 1; text-align: center; display: grid; }
.jour-nav__d b { font-family: var(--f-titre); font-size: 1.4em; }
.jour-nav__d b::first-letter { text-transform: uppercase; }
.jour-nav__d small { color: var(--texte-3); }
.compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.cpt { display: grid; padding: 8px 10px; border-radius: var(--r-m); background: var(--surface); font-size: .85em; color: var(--texte-3); border-top: 3px solid; }
.cpt b { font-family: var(--f-titre); font-size: 1.9em; line-height: 1; color: var(--texte); }
.cpt--p { border-color: var(--vert); } .cpt--d { border-color: var(--ambre); } .cpt--a { border-color: var(--texte-3); }
.equipe { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.pers { padding: 12px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--ligne); }
.pers__id { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pers__id > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.pers__id b { font-size: 1.12em; }
.pers__id small { color: var(--texte-3); font-size: .82em; }
.heures { display: inline-flex; align-items: center; gap: 2px; }
.heures b { font-family: var(--f-titre); font-size: 1.45em; min-width: 3.1ch; text-align: center; }
.heures b i { font-style: normal; font-size: .6em; color: var(--texte-3); }
.heures__b { width: 44px; height: 44px; border-radius: var(--r-m); border: 0; background: var(--surface-2); display: grid; place-items: center; }
.heures__b[disabled] { opacity: .35; }
.tri { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.tri__b { min-height: 62px; border-radius: var(--r-m); border: 2px solid var(--ligne-forte); background: transparent; display: grid; justify-items: center; align-content: center; gap: 2px; font-weight: 700; font-size: .92em; color: var(--texte-2); }
.tri__b .ico { width: 26px; height: 26px; }
.tri__b--present.is-on { background: var(--vert); border-color: var(--vert); color: #fff; }
.tri__b--demi.is-on { background: var(--ambre); border-color: var(--ambre); color: #1A1305; }
.tri__b--absent.is-on { background: var(--texte-2); border-color: var(--texte-2); color: var(--fond); }
.tri__b[disabled] { cursor: default; }
.equipe.is-verrou .tri__b:not(.is-on) { opacity: .35; }
.barre-action { position: sticky; bottom: calc(84px + var(--sur)); z-index: 5; padding: 12px 0 4px; background: linear-gradient(to top, var(--fond) 70%, transparent); display: grid; gap: 8px; }
.barre-action > p { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--vert); }
.barre-action .ico { width: 26px; height: 26px; }

/* Avancement */
.av-tete { display: grid; grid-template-columns: 1fr; margin-bottom: 14px; padding: 12px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--ligne); }
.av-tete__c { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 6px; }
.av-tete__c b { font-family: var(--f-titre); font-weight: 700; font-size: 2.6em; line-height: 1; }
.av-tete__c span { color: var(--texte-3); font-size: .9em; text-align: right; }
.lot { margin-bottom: 18px; }
.lot__t { font-size: 1.35em; display: flex; justify-content: space-between; padding: 0 2px 8px; border-bottom: 2px solid var(--ligne); margin-bottom: 8px; }
.lot__t span { color: var(--texte-3); }
.lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ligne { padding: 12px 14px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--ligne); }
.ligne.is-modif { border-color: var(--texte-2); }
.ligne--titre { background: none; border: 0; padding: 10px 2px 0; font-family: var(--f-titre); font-weight: 600; font-size: 1.1em; color: var(--texte-2); }
.ligne__t { display: flex; gap: 8px; align-items: baseline; }
.ligne__code { color: var(--texte-3); font-size: .82em; font-weight: 600; flex: none; }
.ligne__d { flex: 1; font-weight: 600; line-height: 1.25; }
.ligne__v { font-family: var(--f-titre); font-weight: 700; font-size: 1.55em; flex: none; }
.ligne.is-fini .ligne__v { color: var(--vert); }
.ligne__m { font-size: .8em; color: var(--texte-3); margin: 2px 0 10px; }
.curseur { position: relative; height: 48px; --prec: 0%; --val: 0%; }
.curseur::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px;
  background: linear-gradient(to right, var(--beton-2) 0 var(--prec), var(--texte) var(--prec) var(--val), var(--surface-3) var(--val)); }
.curseur__prec { position: absolute; top: 8px; bottom: 8px; left: var(--prec); width: 2px; margin-left: -1px; background: var(--rouge); pointer-events: none; }
.curseur input { position: absolute; inset: 0; width: 100%; height: 48px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.curseur input::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fond); border: 4px solid var(--texte); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.curseur input::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--fond); border: 4px solid var(--texte); }
.curseur input::-webkit-slider-runnable-track { background: transparent; height: 48px; }
.curseur input:focus-visible { outline: none; }
.curseur input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--rouge); }
.jauge { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--texte-2); }

/* Bâtiment */
.bat { display: block; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.bat__plan rect, .bat__plan path { fill: none; stroke: var(--plan); stroke-width: 1.5; stroke-dasharray: 5 5; }
.bat__plan .bat__plan-baie { stroke-dasharray: 3 4; stroke-width: 1; }
.bat__sol { stroke: var(--ligne-forte); stroke-width: 2; }
.bat__beton { fill: var(--beton); }
.bat__beton--fond, .bat__plancher { fill: var(--beton-2); }
.bat__joint { stroke: var(--fond); stroke-width: 1; opacity: .3; fill: none; }
.bat__baies rect { fill: var(--surface-3); stroke: var(--beton-2); stroke-width: 1.5; }
.bat__e { transform-box: fill-box; transition: transform .9s var(--courbe), opacity .6s ease; }
[data-e="fond"], [data-e^="n"] { transform-origin: 50% 100%; }
[data-e="dalle"], [data-e^="p"] { transform-origin: 0 50%; }
.sans-transition .bat__e, .sans-transition .bat__toit, .sans-transition .bat__grue { transition: none !important; animation: none !important; }
.bat__grue { transition: opacity .6s ease, transform .6s ease; }
.bat__grue path, .bat__grue rect { fill: none; stroke: var(--texte-3); stroke-width: 2.5; stroke-linecap: round; }
.bat__grue.is-partie { opacity: 0; transform: translateX(-24px); }
.bat__toit path { fill: none; stroke: var(--rouge); stroke-width: 9; stroke-dasharray: 30 30; }
.bat__toit { opacity: .55; transform-box: fill-box; transition: opacity .3s; }
.bat__toit.is-pose path { fill: var(--rouge); stroke-dasharray: none; stroke-width: 6; }
.bat__toit.is-pose { opacity: 1; animation: toit-pose 1s cubic-bezier(.3, 1.35, .5, 1) both; }
@keyframes toit-pose { 0% { transform: translateY(-46px); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.bat--mini { max-height: 90px; }

/* Photos */
.capture { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; border-radius: var(--r-l); border: 2.5px dashed var(--ligne-forte); background: var(--surface); text-align: center; cursor: pointer; margin-bottom: 18px; }
.capture:focus-within { border-color: var(--texte); }
.capture__ico { width: 54px; height: 54px; color: var(--rouge); }
.capture b { font-family: var(--f-titre); font-size: 1.6em; }
.capture small { color: var(--texte-3); font-size: .85em; }
.galerie__j { font-size: 1.2em; margin: 16px 0 8px; color: var(--texte-2); }
.galerie__j::first-letter { text-transform: uppercase; }
.galerie { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.is-indispo img { opacity: 0; }
.photo.is-indispo::before { content: "Photo dans le Drive"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8em; color: var(--texte-3); }
.photo__l { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(18, 17, 16, .85)); color: #F4F1EC; display: grid; line-height: 1.2; }
.photo__l b { font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo__l small { font-size: .7em; opacity: .8; }
.photo__att { position: absolute; top: 6px; left: 6px; display: inline-flex; gap: 4px; align-items: center; background: var(--ambre); color: #1A1305; font-size: .7em; font-weight: 700; padding: 2px 7px 2px 4px; border-radius: 999px; }
.photo__att .ico { width: 14px; height: 14px; }
.apercu { width: 100%; border-radius: var(--r-m); display: block; max-height: 38vh; object-fit: contain; background: var(--surface-2); }

/* Signaler */
.tuiles { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tuiles legend { font-weight: 600; color: var(--texte-2); margin-bottom: 8px; padding: 0; font-size: .92em; }
.tuile { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 6px; border-radius: var(--r-m); border: 2px solid var(--ligne-forte); cursor: pointer; }
.tuile input { position: absolute; opacity: 0; }
.tuile .ico { width: 34px; height: 34px; }
.tuile b { font-family: var(--f-titre); font-size: 1.25em; }
.tuile small { font-size: .72em; color: var(--texte-3); line-height: 1.2; }
.tuile:has(input:checked) { border-color: var(--texte); background: var(--surface-2); }
.tuile--securite:has(input:checked) { border-color: var(--rouge); }
.tuile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Vides */
.vide { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 36px 16px; color: var(--texte-2); }
.vide__ico { width: 48px; height: 48px; color: var(--texte-3); }
.vide h2 { font-size: 1.5em; color: var(--texte); }
.vide p { max-width: 34ch; }
.vide--petit { padding: 18px; }

/* Célébration et messages */
#toasts { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--sur)); display: grid; gap: 8px; width: min(92vw, 460px); pointer-events: none; }
[data-mode="bureau"] #toasts { bottom: 24px; left: auto; right: 24px; transform: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: var(--r-m); background: var(--texte); color: var(--fond); font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); animation: toast-in .22s var(--courbe); }
.toast span { flex: 1; }
.toast--erreur { background: var(--rouge); color: #fff; }
.toast__btn { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; min-height: 36px; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: .22s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.bravo { position: fixed; z-index: 95; left: 0; right: 0; bottom: calc(150px + var(--sur)); display: grid; place-items: center; pointer-events: none; }
[data-mode="bureau"] .bravo { bottom: 40px; }
.bravo__c { display: grid; justify-items: center; gap: 4px; padding: 16px 26px; border-radius: var(--r-l); background: var(--noir); color: var(--blanc); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); animation: bravo 0.5s cubic-bezier(.3, 1.4, .5, 1); max-width: 86vw; border-top: 4px solid var(--rouge); }
.bravo__c b { font-family: var(--f-titre); font-size: 1.7em; line-height: 1.1; }
.bravo__c small { opacity: .75; }
.bravo__ico { width: 40px; height: 40px; color: var(--ambre); }
.bravo.is-out .bravo__c { opacity: 0; transform: scale(.96); transition: .35s; }
@keyframes bravo { from { opacity: 0; transform: scale(.85); } }

/* Feuille (panneau modal) */
#feuille { position: fixed; inset: 0; z-index: 80; }
.feuille__fond { position: absolute; inset: 0; background: rgba(10, 9, 8, .6); opacity: 0; transition: opacity .2s; }
.feuille__panneau { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow: auto; padding: 22px 18px calc(22px + var(--sur)); border-radius: 18px 18px 0 0; background: var(--fond); border-top: 1px solid var(--ligne); transform: translateY(30px); opacity: 0; transition: transform .22s var(--courbe), opacity .2s; }
#feuille.is-ouverte .feuille__fond { opacity: 1; }
#feuille.is-ouverte .feuille__panneau { transform: none; opacity: 1; }
.feuille__fermer { position: absolute; right: 10px; top: 10px; }
.feuille__titre { font-size: 1.8em; padding-right: 44px; margin-bottom: 6px; }
.feuille__intro { color: var(--texte-2); margin-bottom: 14px; }
.feuille__meta { color: var(--texte-3); font-size: .82em; margin: 10px 0 14px; }
html.feuille-ouverte { overflow: hidden; }
@media (min-width: 720px) {
  .feuille__panneau { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 92vw); border-radius: var(--r-l); transform: translate(-50%, -46%); border: 1px solid var(--ligne); }
  .feuille__panneau--large { width: min(760px, 94vw); }
  #feuille.is-ouverte .feuille__panneau { transform: translate(-50%, -50%); }
}
.file { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.file__l { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface); }
.file__l span { flex: 1; min-width: 0; font-size: .92em; }
.file__l small { color: var(--texte-3); }
.menu-l { display: grid; gap: 6px; margin-bottom: 10px; }
.menu-i { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 14px; border-radius: var(--r-m); border: 0; background: var(--surface); text-align: left; font-weight: 600; font-size: 1.02em; }
.menu-i--danger { color: var(--rouge-txt); }
.detail { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; }
.detail dt { color: var(--texte-3); font-size: .9em; }
.detail dd { margin: 0; }
.detail__notes { white-space: pre-wrap; font-size: .9em; color: var(--texte-2); max-height: 160px; overflow: auto; }

/* Infobulle */
.infobulle { position: fixed; z-index: 100; max-width: 280px; padding: 6px 10px; border-radius: 6px; background: var(--noir); color: var(--blanc); font-size: 13px; font-weight: 500; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }

/* ==========================================================================
   CONNEXION
   ========================================================================== */
.cx { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: max(36px, env(safe-area-inset-top)) 20px calc(24px + var(--sur)); background: var(--noir); color: var(--blanc);
  --texte: #F4F1EC; --texte-2: #C4BDB3; --texte-3: #978F85; --surface: #1C1A18; --surface-2: #262320; --surface-3: #322E2A; --ligne-forte: #57514A; --fond: #121110; --focus: #F4F1EC; }
.cx__haut { display: grid; justify-items: center; gap: 2px; margin: 4vh 0 3vh; }
.cx__mono { width: 132px; }
.cx__titre { font-size: 3.2em; font-weight: 700; margin-top: 8px; }
.cx__sous { color: var(--texte-3); font-weight: 500; }
.cx__corps { width: min(100%, 420px); display: grid; gap: 12px; align-content: start; }
.cx__aide { color: var(--texte-2); text-align: center; }
.cx__note { color: var(--texte-3); font-size: .85em; text-align: center; margin-top: 8px; }
.cx__err { min-height: 1.4em; text-align: center; color: #FF8A8C; font-weight: 600; }
.cx__qui { text-align: center; font-family: var(--f-titre); font-size: 1.8em; font-weight: 600; }
.cx__profils { display: grid; gap: 8px; }
.cx__profil { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 14px; border-radius: var(--r-l); border: 1.5px solid var(--ligne-forte); background: var(--surface); color: var(--texte); text-align: left; }
.cx__profil > span:nth-child(2) { flex: 1; display: grid; }
.cx__profil small { color: var(--texte-3); }
.cx__profil:hover { border-color: var(--texte-2); }
.cx__points { display: flex; justify-content: center; gap: 16px; margin: 6px 0 2px; }
.cx__points i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--texte-2); }
.cx__points i.is-plein { background: var(--blanc); border-color: var(--blanc); }
.cx__points.is-erreur { animation: secoue .35s; }
.cx__points.is-erreur i { border-color: var(--rouge); }
@keyframes secoue { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pave__t { min-height: 72px; border-radius: var(--r-l); border: 0; background: var(--surface-2); color: var(--texte); font-family: var(--f-titre); font-size: 2em; font-weight: 600; display: grid; place-items: center; }
.pave__t:active { background: var(--surface-3); }
.pave__t--txt { background: transparent; font-size: 1.05em; color: var(--texte-2); }
.cx__video { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 1; background: #000; }
.cx__video video { width: 100%; height: 100%; object-fit: cover; }
.cx__viseur { position: absolute; inset: 18%; border: 3px solid var(--rouge); border-radius: 12px; }
.code-brut { display: block; word-break: break-all; font-size: .75em; padding: 8px; background: var(--surface-2); border-radius: 6px; }

/* ==========================================================================
   BUREAU (tableau de bord PC)
   ========================================================================== */
.b-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: linear-gradient(to right, var(--noir) 248px, transparent 248px); }
.b-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--noir); color: var(--blanc); padding: 18px 12px 14px;
  --texte: #F4F1EC; --texte-2: #C4BDB3; --texte-3: #8E867C; --surface-2: #262320; --surface-3: #322E2A; --ligne: #2E2A27; --ligne-forte: #4A443E; --focus: #F4F1EC; --vert: #57BC83; --ambre: #F2B04A; --rouge-txt: #FF7174; }
.b-side__marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; }
.b-side__marque .mono { width: 54px; }
.b-side__marque span { display: grid; line-height: 1.1; }
.b-side__marque b { font-family: var(--f-titre); font-size: 1.55em; font-weight: 700; }
.b-side__marque small { color: var(--texte-3); font-size: .82em; }
.b-nav { display: grid; gap: 2px; }
.b-nav__i { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--texte-2); font-weight: 500; position: relative; }
.b-nav__i .ico { width: 20px; height: 20px; }
.b-nav__i:hover { background: var(--surface-2); color: var(--texte); }
.b-nav__i.is-actif { background: var(--surface-2); color: var(--texte); font-weight: 600; }
.b-nav__i.is-actif::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 3px 3px 0; background: var(--rouge); }
.b-nav__i.is-bientot { opacity: .45; cursor: not-allowed; }
.b-nav__i em { margin-left: auto; font-style: normal; font-size: .7em; font-weight: 600; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--ligne-forte); }
.b-nav__n { margin-left: auto; font-style: normal; font-size: .75em; font-weight: 700; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rouge); color: #fff; display: grid; place-items: center; }
.b-side__pied { margin-top: auto; display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.pastille-sync--large { width: 100%; justify-content: flex-start; height: 38px; }
.b-moi { display: flex; align-items: center; gap: 10px; }
.b-moi > span:last-child { display: grid; line-height: 1.2; min-width: 0; }
.b-moi b { font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-moi small { color: var(--texte-3); font-size: .8em; }
.b-moi .avatar { width: 36px; height: 36px; font-size: .95em; }
.b-side__actions { display: flex; gap: 4px; }
.b-side .btn-ico:hover { background: var(--surface-2); }
.b-main { min-width: 0; }
.b-vue { display: block; padding: 26px 32px 48px; max-width: 1440px; outline: none; }
.b-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.b-tete h1 { font-size: 2.3em; font-weight: 700; }
.b-tete p { color: var(--texte-3); margin-top: 4px; }
.b-tete p::first-letter { text-transform: uppercase; }
.b-tete__a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fil { display: flex; align-items: center; gap: 4px; font-size: .9em; color: var(--texte-3); margin-bottom: 6px; }
.fil .ico { width: 14px; height: 14px; }
.fil a { color: var(--texte-2); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); }
.kpi { display: grid; align-content: start; gap: 2px; padding: 16px 18px; border-left: 1px solid var(--ligne); }
.kpi:first-child { border-left: 0; }
.kpi b { font-family: var(--f-titre); font-weight: 700; font-size: 2.2em; line-height: 1; }
.kpi b small { font-size: .55em; color: var(--texte-3); font-weight: 600; }
.kpi span { font-weight: 600; color: var(--texte-2); font-size: .92em; }
.kpi small { color: var(--texte-3); font-size: .8em; }
.kpi--attention b { color: var(--ambre); }
.kpi--critique b { color: var(--rouge-txt); }
.kpis--fiche { grid-template-columns: repeat(2, 1fr); margin: 0; align-content: start; }
.kpis--fiche .kpi { border-left: 0; border-top: 1px solid var(--ligne); }
.kpis--fiche .kpi:nth-child(-n+2) { border-top: 0; }
.kpis--fiche .kpi:nth-child(2n) { border-left: 1px solid var(--ligne); }
.grille { display: grid; gap: 16px; margin-bottom: 16px; }
.grille--2 { grid-template-columns: 1fr 1fr; }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2-1 { grid-template-columns: 1.6fr 1fr; }
.grille--fiche { grid-template-columns: minmax(300px, 1fr) 1.2fr; }
.grille > .b-carte { margin: 0; }
.b-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.b-carte__t { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.b-carte__t h2 { font-size: 1.4em; }
.b-carte__t a { color: var(--texte-2); font-weight: 600; font-size: .92em; }
.b-carte--tab { padding: 0; overflow: auto; }
.b-carte--tab > .b-carte__t { padding: 16px 20px 0; }
.b-carte__barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.vide-txt { color: var(--texte-3); display: flex; gap: 8px; align-items: center; padding: 8px 0; }
.vide-txt .ico { color: var(--vert); }
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .82em; color: var(--texte-3); margin-top: 10px; }
.legende__barre { display: inline-block; width: 16px; height: 8px; border-radius: 2px; background: var(--encre-g); }
.legende__repere { display: inline-block; width: 2px; height: 12px; background: var(--rouge); margin-left: 8px; }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtres .segments { margin-left: auto; }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--ligne); margin-bottom: 18px; overflow-x: auto; }
.onglet { padding: 10px 14px; border: 0; background: none; color: var(--texte-3); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglet:hover { color: var(--texte); }
.onglet.is-actif { color: var(--texte); border-bottom-color: var(--rouge); }

/* Graphiques */
.gbh { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gbh__l { display: grid; grid-template-columns: minmax(130px, 200px) 1fr 64px; align-items: center; gap: 14px; }
.gbh__t { display: grid; line-height: 1.2; min-width: 0; }
.gbh__t a { font-weight: 600; text-decoration: none; }
.gbh__t a:hover { text-decoration: underline; }
.gbh__s { font-size: .8em; color: var(--texte-3); }
.gbh__piste { position: relative; height: 14px; border-radius: 4px; background: var(--grille); }
.gbh__barre { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--encre-g); min-width: 2px; }
.gbh__repere { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--rouge); }
.gbh__v { font-family: var(--f-titre); font-weight: 700; font-size: 1.3em; text-align: right; }
.gcol, .gcourbe { width: 100%; height: auto; display: block; overflow: visible; }
.g__grille { stroke: var(--grille); stroke-width: 1; }
.g__base { stroke: var(--ligne-forte); stroke-width: 1; }
.g__axe { fill: var(--texte-3); font-size: 12px; font-family: var(--f-texte); }
.g__etiq { fill: var(--texte); font-size: 14px; font-weight: 700; font-family: var(--f-titre); }
.g__cible { fill: transparent; }
.gcol__b { fill: var(--encre-g); transition: opacity .15s; }
.gcol__g:hover .gcol__b, .gcol__g:focus .gcol__b { opacity: .75; }
.gcol__g:focus { outline: none; }
.gcourbe__l { fill: none; stroke: var(--encre-g); stroke-width: 2; stroke-linejoin: round; }
.gcourbe__aire { fill: var(--encre-g); opacity: .07; }
.gcourbe__p { fill: var(--surface); stroke: var(--encre-g); stroke-width: 2; }
g:focus .gcourbe__p, g:hover .gcourbe__p { fill: var(--rouge); stroke: var(--rouge); }
g:focus { outline: none; }
.ganneau__fond { fill: none; stroke: var(--grille); stroke-width: 7; }
.ganneau__v { fill: none; stroke: var(--encre-g); stroke-width: 7; stroke-linecap: round; }

/* Tables */
.tab { width: 100%; border-collapse: collapse; font-size: .95em; }
.tab caption { text-align: left; font-weight: 600; padding: 0 0 8px; color: var(--texte-2); }
.tab th { text-align: left; font-weight: 600; font-size: .85em; color: var(--texte-3); padding: 10px 12px; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.tab td { padding: 10px 12px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.tab tbody tr:hover { background: var(--surface-2); }
.tab tbody tr:last-child td { border-bottom: 0; }
.b-carte--tab .tab th:first-child, .b-carte--tab .tab td:first-child { padding-left: 20px; }
.tab .n { text-align: right; white-space: nowrap; }
.tab .c { text-align: center; }
.tab__lien { display: grid; text-decoration: none; }
.tab__lien small, .bloc-s { color: var(--texte-3); font-size: .85em; display: block; }
.tab__lien:hover b { text-decoration: underline; }
.tab__barre { min-width: 180px; }
.tab__barre .mini-barre { display: inline-block; vertical-align: middle; width: calc(100% - 60px); }
.tab__barre b { display: inline-block; width: 52px; text-align: right; font-family: var(--f-titre); font-size: 1.1em; }
.mini-barre { height: 8px; border-radius: 3px; background: var(--grille); overflow: hidden; }
.mini-barre span { display: block; height: 100%; background: var(--encre-g); }
.tab__lot td { background: var(--surface-2); font-weight: 700; font-family: var(--f-titre); font-size: 1.05em; }
.tab__titre td { font-weight: 600; color: var(--texte-2); }
.tab--compact td, .tab--compact th { padding: 7px 10px; }
.tab--dpgf td { padding: 8px 12px; }
.tab--grille td.c, .tab--grille th.c { text-align: center; }
.tab--grille td:first-child { width: 240px; }
.tab--grille th small { display: block; font-size: 1em; color: var(--texte); }
.tab--grille th.is-auj { color: var(--rouge-txt); }
.tab--taches td { vertical-align: top; }
.tab__case { width: 52px; }
.tab__tache { display: grid; border: 0; background: none; text-align: left; padding: 0; }
.tab__tache small { color: var(--texte-3); font-size: .82em; }
.tab__tache:hover b { text-decoration: underline; }
.tab tr.is-faite b { color: var(--texte-3); text-decoration: line-through; }
.tab__actions { display: flex; gap: 6px; justify-content: flex-end; }
.case { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ligne-forte); background: transparent; color: transparent; display: grid; place-items: center; }
.case .ico { width: 18px; height: 18px; }
.case:hover { border-color: var(--vert); color: var(--vert); }
.case.is-on { background: var(--vert); border-color: var(--vert); color: #fff; }
.txt-retard { color: var(--rouge-txt); font-weight: 600; }
.pc { font-weight: 600; }
.pc--fini { color: var(--vert); }
.pt { display: inline-grid; place-items: center; min-width: 32px; height: 28px; border-radius: 6px; font-weight: 700; font-size: .85em; }
.pt--present { background: var(--vert-fond); color: var(--vert); }
.pt--demi { background: var(--ambre-fond); color: var(--ambre); }
.pt--absent { background: var(--surface-3); color: var(--texte-2); }
.pt--autre { background: var(--surface-2); color: var(--texte-3); }
.pt--vide { color: var(--texte-3); }
.pt.is-attente { outline: 2px dashed var(--ambre); }
.legende--pt { padding: 12px 20px 16px; margin: 0; }

/* Alertes */
.als { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.al { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface-2); border-left: 4px solid var(--texte-3); }
.al > div { flex: 1; min-width: 0; }
.al p { font-weight: 500; line-height: 1.3; }
.al small { color: var(--texte-3); font-size: .82em; }
.al .ico { width: 20px; height: 20px; margin-top: 1px; }
.al--critique { border-left-color: var(--rouge); } .al--critique > .ico { color: var(--rouge-txt); }
.al--attention { border-left-color: var(--ambre); } .al--attention > .ico { color: var(--ambre); }
.al--succes { border-left-color: var(--vert); } .al--succes > .ico { color: var(--vert); }
.al.is-lue { opacity: .65; }
.auj { list-style: none; padding: 0; margin: 0; display: grid; }
.auj li { display: grid; grid-template-columns: 1fr auto auto 84px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.auj li:last-child { border-bottom: 0; }
.auj a { text-decoration: none; }
.auj span { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; font-size: .92em; }
.auj .ico { width: 18px; height: 18px; color: var(--texte-3); }
.auj__serie .ico { color: var(--ambre); }
.auj__eq.is-manque { color: var(--ambre); }
.auj__met.is-pluie, .auj__met.is-pluie .ico { color: var(--ambre); }

/* Kanban */
.kanban { display: grid; gap: 14px; align-items: start; }
.kanban--2 { grid-template-columns: repeat(2, 1fr); }
.kanban--4 { grid-template-columns: repeat(4, 1fr); }
.kb-col { background: var(--surface-2); border-radius: var(--r-l); padding: 12px; min-height: 160px; border: 2px solid transparent; }
.kb-col.is-survol { border-color: var(--texte-3); border-style: dashed; }
.kb-col h2 { font-size: 1.25em; display: flex; justify-content: space-between; padding: 2px 4px 10px; }
.kb-col h2 span { color: var(--texte-3); }
.kb-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kb-c { background: var(--surface); border-radius: var(--r-m); padding: 10px 12px; border: 1px solid var(--ligne); border-left: 4px solid var(--ligne-forte); cursor: grab; }
.kb-c.u-0 { border-left-color: var(--rouge); }
.kb-c.u-1 { border-left-color: var(--ambre); }
.kb-c.is-glisse { opacity: .5; }
.kb-c__b { border: 0; background: none; padding: 0; text-align: left; line-height: 1.3; }
.kb-c__b:hover b { text-decoration: underline; }
.kb-c__m { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 7px; font-size: .82em; color: var(--texte-2); }

/* Fiche chantier */
.fiche-bat { display: grid; align-content: start; }
.fiche-bat .bat { max-height: 240px; }
.fiche-bat__c { display: flex; align-items: baseline; gap: 10px; padding: 6px 4px 0; }
.fiche-bat__c b { font-family: var(--f-titre); font-size: 2.6em; font-weight: 700; line-height: 1; }
.fiche-bat__c span { color: var(--texte-3); }
.badges--pc { margin-top: 10px; }
.meteo--pc { list-style: none; padding: 0; margin: 0; }
.galerie--pc { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.horaires { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.form--param { gap: 12px; }
.form--param h2 { font-size: 1.3em; margin-top: 8px; }
.form__pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--ligne); padding-top: 14px; }
.details summary { cursor: pointer; color: var(--texte-2); margin: 10px 0; }

/* Situation (écran et impression) */
.situation { background: #fff; color: #121110; border-radius: var(--r-l); padding: 28px 30px; border: 1px solid var(--ligne); font-size: 13px;
  --texte: #121110; --texte-2: #48433D; --texte-3: #6F6861; --surface-2: #F1EEE8; --ligne: #DDD6CB; --ligne-forte: #121110; }
.situation__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 3px solid var(--rouge); margin-bottom: 14px; }
.situation__marque { display: flex; gap: 12px; align-items: center; }
.situation__marque .mono { width: 70px; }
.situation__marque b { font-family: var(--f-titre); font-size: 1.6em; letter-spacing: .02em; }
.situation__marque small { display: block; color: #6F6861; font-size: .82em; }
.situation__ref { text-align: right; }
.situation__ref h2 { font-size: 1.5em; }
.situation__ref p { color: #48433D; font-weight: 600; }
.situation__ref p::first-letter { text-transform: uppercase; }
.situation__ch { margin-bottom: 12px; }
.tab--situation th { background: #121110; color: #F4F1EC; font-size: .82em; }
.tab--situation td { padding: 5px 8px; font-size: .95em; }
.tab--situation th { padding: 6px 8px; }
.tab--situation tbody tr:hover { background: none; }
.tab--situation tfoot td { font-weight: 700; border-top: 2px solid #121110; padding: 8px; }
.situation__pied { margin-top: 16px; font-size: .85em; color: #6F6861; }

/* Carte Lyra (QR + PIN) */
.carte-lyra { width: 320px; margin: 0 auto 14px; padding: 18px; border-radius: 16px; background: #121110; color: #F4F1EC; display: grid; justify-items: center; gap: 8px; text-align: center; }
.carte-lyra__t { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.carte-lyra__t .mono { width: 46px; }
.carte-lyra__t b { font-family: var(--f-titre); font-size: 1.5em; }
.carte-lyra__t span { margin-left: auto; color: #978F85; font-size: .85em; font-weight: 600; }
.carte-lyra .qr { border-radius: 8px; }
.carte-lyra__nom { font-family: var(--f-titre); font-size: 1.5em; font-weight: 700; }
.carte-lyra__pin { font-size: 1.1em; } .carte-lyra__pin b { font-family: var(--f-titre); font-size: 1.5em; letter-spacing: .25em; }
.carte-lyra__exp { color: #978F85; font-size: .8em; }

/* Mode hors ligne : signal visible en haut */
html.hors-ligne .t-tete { box-shadow: inset 0 -3px 0 var(--ambre); }

/* ---------- Adaptations écran ---------- */
@media (max-width: 1180px) {
  .grille--2-1, .grille--fiche { grid-template-columns: 1fr; }
  .kanban--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .b-app { grid-template-columns: 1fr; background: none; }
  .b-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
  .b-side__marque { padding: 0 8px 0 0; }
  .b-nav { grid-auto-flow: column; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .b-nav__i { white-space: nowrap; }
  .b-nav__i.is-actif::before { display: none; }
  .b-side__pied { margin: 0 0 0 auto; border: 0; padding: 0; grid-auto-flow: column; align-items: center; }
  .b-moi > span:last-child, .pastille-sync--large span { display: none; }
  .pastille-sync--large { width: auto; }
  .b-vue { padding: 18px 16px 40px; }
  .grille--2, .grille--3, .kanban--2, .kanban--4 { grid-template-columns: 1fr; }
  .gbh__l { grid-template-columns: 1fr 56px; } .gbh__t { grid-column: 1 / -1; }
  .horaires { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) { .t-vue { padding-top: 24px; } .galerie { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) { .gbh__barre, .mini-barre span, .gcol__b { forced-color-adjust: none; background: CanvasText; fill: CanvasText; } }

/* ==========================================================================
   V1.1 — barre d'onglets, aide, glisser-déposer, équipes, logistique,
   facturation, validation de l'avancement, réglages, logiciels internes
   ========================================================================== */

/* ---------- Barre d'onglets mobile : 6 onglets, toujours fixée en bas ---------- */
.t-onglets { transform: translateZ(0); }
.t-onglet { min-height: 68px; }
.t-onglets--6 .t-onglet { font-size: .7em; padding: 0 2px; letter-spacing: -.005em; }
.t-onglets--6 .t-onglet .ico { width: 25px; height: 25px; }
.t-onglets--6 .t-onglet span { white-space: nowrap; }
.barre-action { bottom: calc(68px + var(--sur)); }

/* ---------- Bouton Aide (en-tête mobile, barre latérale PC) ---------- */
.aide-pastille { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; font-family: var(--f-titre); font-weight: 700; font-size: 15px; line-height: 1; flex: none; }
.t-aide { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--surface-3); display: grid; place-items: center; color: var(--texte); }
.t-aide__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t-aide[aria-pressed="true"], .b-aide[aria-pressed="true"] { background: var(--rouge); color: #fff; }
.b-aide { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-right: auto; border-radius: 8px; border: 1px solid var(--ligne-forte); background: transparent; color: var(--texte-2); font-weight: 600; }
.b-aide:hover { color: var(--texte); border-color: var(--texte-3); }
.b-aide .aide-pastille { width: 20px; height: 20px; font-size: 13px; border-width: 1.5px; }
@media (max-width: 400px) {
  .t-tete { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .t-tete__marque, .t-tete__marque .mono { width: 38px; }
  .pastille-sync.is-ok span { display: none; }
  .pastille-sync.is-ok { padding: 0 9px; }
}

/* Le « i » posé à côté des fonctions en mode aide */
.aide-i { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 0 0 6px; padding: 0; border-radius: 50%; border: 0; background: var(--rouge); color: #fff;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 14px; line-height: 1; vertical-align: middle; flex: none; box-shadow: 0 0 0 3px var(--fond); z-index: 3; }
.aide-i::after { content: ""; position: absolute; inset: -11px; }
.aide-i[aria-expanded="true"] { background: var(--texte); color: var(--fond); }
.b-side .aide-i { box-shadow: 0 0 0 3px var(--noir); }
.b-nav__i .aide-i, .b-carte__t .aide-i { margin-left: 8px; }
.b-nav__i[data-aide-pose] em, .b-nav__i[data-aide-pose] .b-nav__n { margin-left: 6px; }
.b-nav__i[data-aide-pose] > span:not(.aide-i) { flex: 1; }
.t-onglet .aide-i { position: absolute; top: 4px; right: 6px; width: 18px; height: 18px; font-size: 12px; margin: 0; }
.tuile .aide-i, .plus-tuile .aide-i { position: absolute; top: 6px; right: 6px; margin: 0; }
.lg-plan > .aide-i, .eq-tableau > .aide-i { position: absolute; top: -10px; left: -6px; margin: 0; }
.bulle-aide { position: fixed; z-index: 260; padding: 12px 34px 12px 14px; border-radius: var(--r-m); background: var(--texte); color: var(--fond); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: 15px; line-height: 1.4; animation: bulle .16s var(--courbe); }
.bulle-aide::before { content: ""; position: absolute; top: -6px; left: var(--fleche, 20px); width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.bulle-aide.is-dessus::before { top: auto; bottom: -6px; }
.bulle-aide__t { display: block; font-family: var(--f-titre); font-size: 1.15em; margin-bottom: 2px; }
.bulle-aide__x { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; }
@keyframes bulle { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Boîte de confirmation ---------- */
.dlg { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 16px; }
.dlg__fond { position: absolute; inset: 0; background: rgba(18, 17, 16, .62); opacity: 0; transition: opacity .16s; }
.dlg__boite { position: relative; width: min(440px, 100%); padding: 22px 20px 18px; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne-forte); box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  transform: translateY(10px) scale(.98); opacity: 0; transition: transform .18s var(--courbe), opacity .16s; }
.dlg.is-ouvert .dlg__fond { opacity: 1; }
.dlg.is-ouvert .dlg__boite { transform: none; opacity: 1; }
.dlg__titre { font-size: 1.55em; font-weight: 700; margin-bottom: 8px; }
.dlg__texte { color: var(--texte-2); font-size: 1.02em; text-wrap: pretty; }
.dlg__champ { margin-top: 14px; }
.dlg__saisie { display: flex; align-items: center; gap: 8px; }
.dlg__saisie em { font-style: normal; color: var(--texte-3); }
.dlg__saisie input.is-erreur { border-color: var(--rouge); }
.dlg__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

/* ---------- Glisser-déposer (souris et appui long) ---------- */
[data-glisse] { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
[data-glisse].is-appui { box-shadow: inset 0 0 0 2px var(--rouge); transform: scale(.985); transition: box-shadow .38s linear, transform .38s; }
[data-glisse].is-souleve { opacity: .35; outline: 2px dashed var(--ligne-forte); outline-offset: -2px; }
.glisse-fantome { position: fixed; z-index: 230; margin: 0; list-style: none; pointer-events: none; transform: rotate(-2deg) scale(1.04); box-shadow: 0 18px 36px rgba(0, 0, 0, .38); opacity: .97; background: var(--surface-3) !important; border-color: var(--rouge) !important; }
html.glisse-en-cours, html.glisse-en-cours * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
html.glisse-en-cours [data-zone] { transition: background .12s, outline-color .12s; }
html.glisse-en-cours [data-zone].is-cible { outline: 2px dashed var(--ligne-forte); outline-offset: -2px; }
html.glisse-en-cours [data-zone].is-survol { outline: 3px solid var(--rouge); background: var(--rouge-fond); }
/* Téléphone : pendant le glisser, les colonnes se replient pour que toutes les destinations tiennent à l'écran */
@media (max-width: 700px) {
  html.glisse-en-cours .eq-tableau--terrain [data-zone] .eq-carte:not(.is-souleve),
  html.glisse-en-cours .lg-plan [data-zone] .lg-carte:not(.is-souleve),
  html.glisse-en-cours [data-zone] .eq-zone__vide, html.glisse-en-cours [data-zone] .lg-vide { display: none; }
  html.glisse-en-cours [data-zone] { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
}

/* ---------- Équipes (affectations) ---------- */
.eq-tableau { position: relative; display: grid; gap: 10px; }
.eq-tableau--bureau { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.eq-zone, .lg-zone { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 10px; min-width: 0; }
.eq-tableau--bureau .eq-zone { background: var(--surface-2); border-color: transparent; }
.eq-zone--libre { border: 2px dashed var(--ligne-forte); background: transparent !important; }
.eq-zone__t, .lg-zone__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 4px 8px; }
.eq-zone__t b, .lg-zone__t b { font-family: var(--f-titre); font-size: 1.22em; font-weight: 700; }
.eq-zone__t small, .lg-zone__t small { flex: 1 1 100%; color: var(--texte-3); font-size: .8em; }
.eq-zone__n { font-family: var(--f-titre); font-weight: 700; font-size: .9em; min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); text-align: center; margin-left: auto; }
.eq-cartes, .lg-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eq-carte { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 6px 7px 8px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--ligne); }
.eq-tableau--bureau .eq-carte { background: var(--surface); min-height: 50px; }
.eq-tableau--bureau .eq-carte .avatar { width: 34px; height: 34px; font-size: .9em; }
.eq-carte__n { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.eq-carte__n b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-carte__n small { color: var(--texte-3); font-size: .8em; }
.eq-carte__dep { width: 36px; height: 36px; color: var(--texte-2); }
.eq-carte__poignee { width: 10px; height: 26px; flex: none; opacity: .5; background: radial-gradient(circle, var(--texte-2) 1.4px, transparent 1.6px) 0 0 / 5px 6px; }
.eq-zone__vide, .lg-vide { list-style: none; color: var(--texte-3); font-size: .88em; text-align: center; padding: 12px 8px; border: 1px dashed var(--ligne); border-radius: var(--r-m); }
.eq-consigne { margin: -6px 0 14px; }
.eq-bascule { margin-left: auto; }

/* ---------- Écran « Plus » (mobile) ---------- */
.plus-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plus-tuile { position: relative; display: grid; gap: 4px; align-content: start; min-height: 112px; padding: 16px 14px 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--ligne); text-decoration: none; }
.plus-tuile .ico { width: 30px; height: 30px; color: var(--rouge-txt); margin-bottom: 4px; }
.plus-tuile b { font-family: var(--f-titre); font-size: 1.3em; font-weight: 700; line-height: 1.05; }
.plus-tuile small { color: var(--texte-3); font-size: .8em; line-height: 1.25; }
.plus-tuile:active { background: var(--surface-2); }
.plus-tuile--bientot { border-style: dashed; background: transparent; }
.plus-tuile--bientot .ico { color: var(--texte-3); }
.plus-tuile--bientot small { color: var(--texte-2); font-weight: 600; }
.plus-menu { margin-top: 16px; }

/* ---------- Signaler : 4 types, exemples et suggestions propres à chacun ---------- */
.tuiles--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 600px) { .tuiles--4 { grid-template-columns: repeat(4, 1fr); } }
.tuile--probleme:has(input:checked) { border-color: var(--ambre); }
.puces--wrap { flex-wrap: wrap; overflow: visible; }
.sig-sugg { display: grid; gap: 6px; }
.sig-sugg .puce { min-height: 36px; padding: 0 12px; font-size: .88em; white-space: normal; text-align: left; line-height: 1.2; }

/* ---------- Logistique ---------- */
.onglets--log .onglet { display: inline-flex; align-items: center; gap: 6px; }
.onglets--log .onglet .ico { width: 18px; height: 18px; }
.lg-recherche { margin: -4px 0 12px; }
.lg-recherche .sel { width: 100%; }
.lg-plan { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; align-items: start; }
.lg-zone--large { grid-column: 1 / -1; }
.lg-zone--large .lg-cartes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lg-zone--depot { background: var(--surface-2); border-color: var(--ligne-forte); }
.lg-zone--depot > .lg-zone__t b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; background: var(--rouge); vertical-align: 1px; }
.lg-zone--personne { border-style: dashed; }
.lg-carte { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 7px 6px 7px 10px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--ligne); }
.lg-zone--depot .lg-carte { background: var(--surface); }
.lg-carte__c { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.2; }
.lg-carte__c b { font-weight: 600; }
.lg-carte__c small { color: var(--texte-3); font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-carte__m { display: flex; flex-wrap: wrap; gap: 4px; }
.lg-carte__m:empty { display: none; }
.lg-carte__a { display: flex; gap: 0; flex: none; }
.lg-qte { font-family: var(--f-titre); font-size: 1.45em; font-weight: 700; text-align: right; line-height: 1; flex: none; }
.lg-qte small { display: block; font-family: var(--f-texte); font-size: .48em; font-weight: 500; color: var(--texte-3); margin-top: 2px; }
.lg-carte.is-bas { border-color: var(--ambre); }
.lg-carte.is-bas .lg-qte { color: var(--ambre); }
.lg-niveau { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--grille); overflow: hidden; }
.lg-niveau i { display: block; height: 100%; background: var(--encre-g); }
.lg-niveau.is-bas i { background: var(--ambre); }
.lg-cle__ico { width: 22px; height: 22px; color: var(--ambre); }
.etiq--ok { background: var(--vert-fond); color: var(--vert); }
.etiq--attention { background: var(--ambre-fond); color: var(--ambre); }
.etiq--critique { background: var(--rouge-fond); color: var(--rouge-txt); }
.src-jc { display: inline-flex; align-items: center; gap: 3px; font-size: .72em; font-weight: 600; padding: 1px 6px 1px 4px; border-radius: 4px; background: var(--surface-3); color: var(--texte-2); white-space: nowrap; }
.src-jc .ico { width: 13px; height: 13px; }
.histo { list-style: none; margin: 8px 0 0; padding: 0; }
.histo li { position: relative; padding: 2px 0 12px 18px; border-left: 2px solid var(--ligne); margin-left: 5px; }
.histo li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--fond); border: 2px solid var(--texte-2); }
.histo li:first-child::before { background: var(--rouge); border-color: var(--rouge); }
.histo li:last-child { border-left-color: transparent; }
.histo b { display: block; font-weight: 600; }
.histo p { color: var(--texte-2); font-size: .92em; }
.histo small { display: block; color: var(--texte-3); font-size: .8em; }
.histo li.is-attente { opacity: .6; }
.histo--compact li { padding-bottom: 8px; font-size: .92em; }
.vh-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.vh-carte { background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--vert); border-radius: var(--r-l); padding: 14px; display: grid; gap: 10px; }
.vh-carte--attention { border-left-color: var(--ambre); }
.vh-carte--critique { border-left-color: var(--rouge); }
.vh-carte__t { display: flex; align-items: center; gap: 10px; }
.vh-carte__t > span:nth-child(2) { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
.vh-carte__t b { font-family: var(--f-titre); font-size: 1.3em; font-weight: 700; }
.vh-carte__t small { color: var(--texte-3); font-size: .82em; }
.vh-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); flex: none; }
.vh-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.vh-chiffres div { background: var(--surface-2); border-radius: var(--r-s); padding: 6px 9px; }
.vh-chiffres dt { font-size: .74em; color: var(--texte-3); }
.vh-chiffres dd { margin: 0; font-family: var(--f-titre); font-size: 1.12em; font-weight: 600; }
.vh-chiffres dd small { font-family: var(--f-texte); font-size: .72em; color: var(--texte-3); font-weight: 500; }
.vh-chiffres .is-attention dd { color: var(--ambre); }
.vh-chiffres .is-critique dd { color: var(--rouge-txt); }
.vh-carte__n { font-size: .86em; color: var(--texte-2); }
.vh-carte__n:empty { display: none; }
.vh-carte__a { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Avancement PC : curseurs, validation, journal ---------- */
.grille--sa { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.sa-cote { display: grid; gap: 16px; }
.sa-cote > .b-carte { margin: 0; }
.sa-global { font-family: var(--f-titre); font-size: 1.15em; color: var(--texte-2); }
.sa-global b { font-size: 1.35em; color: var(--texte); }
.b-carte__barre .btn { margin-left: auto; }
.tab--saisie td { padding-top: 6px; padding-bottom: 6px; }
.tab--saisie .sa-col { width: 34%; min-width: 220px; }
.tab--saisie tr.is-modif td { background: var(--ambre-fond); }
.sa-v { font-family: var(--f-titre); font-size: 1.2em; }
.sa-note { padding: 10px 20px 14px; }
.curseur--pc { height: 34px; }
.curseur--pc::before { height: 10px; margin-top: -5px; }
.curseur--pc .curseur__prec { top: 5px; bottom: 5px; }
.curseur--pc input { height: 34px; touch-action: auto; }
.curseur--pc input::-webkit-slider-thumb { width: 24px; height: 24px; border-width: 3px; }
.curseur--pc input::-moz-range-thumb { width: 20px; height: 20px; border-width: 3px; }
.curseur--pc input::-webkit-slider-runnable-track { height: 34px; }
.va-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.va-etapes li { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r-m); background: var(--surface-2); }
.va-etapes li > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--ligne-forte); font-family: var(--f-titre); font-weight: 700; }
.va-etapes li > span .ico { width: 18px; height: 18px; }
.va-etapes li.is-fait > span { background: var(--vert); border-color: var(--vert); color: var(--fond); }
.va-etapes div { display: grid; line-height: 1.25; min-width: 0; }
.va-etapes small { color: var(--texte-3); font-size: .8em; }
.va-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; }
.va-note .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.va-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.va--mobile { margin: 18px 0 8px; padding: 14px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); }
.va--mobile .b-carte__t { flex-wrap: wrap; margin-bottom: 10px; }
.va--mobile .b-carte__t h2 { font-size: 1.35em; }
.va--mobile .va-etapes { grid-template-columns: 1fr; }
.va--mobile .va-actions { display: grid; }
.va-chg { margin-top: 10px; }
.va.is-attente { opacity: .75; }
.statut--reception { background: var(--surface-3); color: var(--texte); }
.statut .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.bandeau--erreur { background: var(--rouge-fond); color: var(--rouge-txt); }

/* ---------- Facturation ---------- */
.fa-params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; margin: 0; }
.fa-params div { padding: 8px 0; border-bottom: 1px solid var(--ligne); min-width: 0; }
.fa-params dt { font-size: .78em; color: var(--texte-3); }
.fa-params dd { margin: 0; font-weight: 500; }
.fa-resume h2 { font-size: 1.4em; margin-bottom: 6px; }
.fa-resume__n { font-family: var(--f-titre); font-size: 2.6em; font-weight: 700; line-height: 1; margin-bottom: 10px; }
.fa-resume__n small { font-size: .4em; font-weight: 500; color: var(--texte-3); }
.fa-resume .note { margin-top: 8px; }
.mini-barre--large { height: 12px; border-radius: 4px; }
.fa-note { padding: 0 20px 16px; }
.fa-alerte .als { margin: 0; }
.fa-sans { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fa-sans li { display: flex; align-items: center; gap: 12px; }
.onglet--plus { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-3); font: inherit; font-weight: 600; cursor: pointer; }
.onglet--plus .ico { width: 16px; height: 16px; }
.kpis--fa { grid-template-columns: repeat(4, 1fr); }
.tab--fa, .tab--dec { font-size: .9em; }
.tab--fa td, .tab--dec td { padding-top: 7px; padding-bottom: 7px; }
.tab__total td { font-weight: 700; border-top: 1.5px solid var(--texte-3); }
.tab__total--fort td { background: var(--surface-2); font-family: var(--f-titre); font-size: 1.05em; }
.tab tr.is-erreur td { color: var(--rouge-txt); }
.tab tr.is-attention td { color: var(--ambre); }
.sel--pct { width: 72px; min-height: 32px; padding: 3px 8px; text-align: right; }
.fa-saisies h2 { font-size: 1.4em; margin-bottom: 12px; }
.fa-saisies .tab--compact .sel { width: 110px; min-height: 34px; padding: 3px 8px; }
.fa-lettres { margin-top: 10px; font-size: .88em; }
.fa-controles { margin-bottom: 8px; }
.form__t { font-size: 1.2em; margin: 16px 0 2px; }
.apercu-dossier { display: block; width: 100%; height: 62vh; margin: 4px 0 14px; border: 1px solid var(--ligne-forte); border-radius: var(--r-m); background: #fff; }
.imp-cadre { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.sel--petit { min-height: 32px; padding: 3px 8px; font-size: .85em; }
.code-brut--ligne { display: inline; white-space: nowrap; word-break: normal; padding: 2px 6px; }
.sortie-consigne { font-size: .86em; color: var(--texte-2); max-width: 46ch; }

/* ---------- Réglages : personne × fonction ---------- */
.rg-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-left: auto; }
.rg-legende .rg-t { pointer-events: none; margin-left: 8px; }
.rg-cadre { max-height: calc(100vh - 230px); }
.rg-tab { font-size: .9em; border-collapse: separate; border-spacing: 0; }
.rg-tab thead th { position: sticky; background: var(--surface); z-index: 2; }
.rg-tab thead tr:first-child th { top: 0; }
.rg-tab thead tr:nth-child(2) th { top: 37px; }
.rg-tab .rg-gt { text-align: center; color: var(--texte-2); border-left: 1px solid var(--ligne); }
.rg-tab .rg-f { height: 168px; vertical-align: bottom; padding: 8px 4px; white-space: nowrap; }
.rg-tab .rg-f span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; color: var(--texte-2); }
.rg-tab .rg-nom { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 200px; text-align: left; border-right: 1px solid var(--ligne); }
.rg-tab thead .rg-nom { z-index: 3; vertical-align: bottom; }
.rg-tab tbody th.rg-nom { font-weight: 400; display: table-cell; }
.rg-tab tbody th.rg-nom b { display: block; font-weight: 600; }
.rg-tab tbody th.rg-nom small { color: var(--texte-3); font-size: .82em; }
.rg-tab tbody tr:hover th.rg-nom { background: var(--surface-2); }
.rg-tab .rg-c { padding: 6px 4px; text-align: center; }
.rg-tab .rg-deb { border-left: 1px solid var(--ligne); }
.rg-tab .rg-act { min-width: 190px; padding-right: 16px; }
.rg-t { position: relative; display: inline-block; width: 36px; height: 22px; border-radius: 999px; border: 0; padding: 0; background: var(--surface-3); vertical-align: middle; transition: background var(--t-rapide); }
.rg-t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--texte-3); transition: transform var(--t-rapide), background var(--t-rapide); }
.rg-t.is-on { background: var(--vert); }
.rg-t.is-on::after { transform: translateX(14px); background: #fff; }
.rg-t.is-perso { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ambre); }
.rg-t[disabled] { opacity: .5; }
.rg-mod .rg-t { margin: 2px 0; }
.rg-intro { margin: -6px 0 14px; }
.rg-pied { margin-top: 4px; }

/* ---------- Logiciels internes : page d'attente ---------- */
.bientot { max-width: 620px; margin: 24px auto; padding: 36px 24px; text-align: center; display: grid; justify-items: center; gap: 12px; border: 2px dashed var(--ligne-forte); border-radius: 22px; }
.bientot__mono { width: 128px; }
.bientot__badge { font-family: var(--f-titre); font-weight: 700; font-size: 1.05em; padding: 3px 14px; border-radius: 999px; background: var(--rouge); color: #fff; }
.bientot h2 { font-size: 2em; font-weight: 700; max-width: 18ch; }
.bientot p { color: var(--texte-2); max-width: 46ch; }
.bientot__l { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.bientot__l li { display: flex; align-items: center; gap: 10px; }
.bientot__l .ico { color: var(--rouge-txt); }

/* ---------- Barre latérale PC : plus d'entrées ---------- */
.b-nav { overflow-y: auto; min-height: 0; flex: 1 1 auto; align-content: start; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.b-nav__i { min-height: 35px; }
.b-nav__i > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.b-nav { grid-template-columns: minmax(0, 1fr); }
.b-nav__i .aide-i { flex: none; }
.b-nav__i em { font-size: .62em; }
.b-nav__g { display: block; padding: 12px 12px 3px; font-size: .74em; font-weight: 600; color: var(--texte-3); }
.b-nav__i.is-bientot { opacity: .72; cursor: pointer; }
.b-side__pied { margin-top: 10px; gap: 10px; }
.b-nav__g { padding-top: 10px; }

@media (max-width: 1180px) {
  .grille--sa { grid-template-columns: 1fr; }
  .fa-params { grid-template-columns: 1fr 1fr; }
  .kpis--fa { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .b-nav { overflow-y: visible; flex: 1 1 100%; }
  .b-nav__g { display: none; }
  .b-aide .b-aide__t { display: none; }
}

/* ---------- Impression ---------- */
@page { margin: 12mm; }
@page situation { size: A4 landscape; margin: 10mm; }
@media print {
  html, body { background: #fff !important; color: #121110; }
  #toasts, .infobulle, .bravo { display: none !important; }
  html.impression-situation body * { visibility: hidden; }
  html.impression-situation #zone-impression, html.impression-situation #zone-impression * { visibility: visible; }
  html.impression-situation #zone-impression { position: absolute; left: 0; top: 0; width: 100%; border: 0; border-radius: 0; padding: 0; page: situation; }
  html.impression-situation .b-app { display: block; }
  html.impression-carte body * { visibility: hidden; }
  html.impression-carte #zone-carte, html.impression-carte #zone-carte * { visibility: visible; }
  html.impression-carte #zone-carte { position: absolute; left: 0; top: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tab--situation th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tab--situation tr { break-inside: avoid; }
}

/* ===================== V1.2 : facturation calquée sur le logiciel d'origine ===================== */
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fa-h2 { font-size: 1.05em; margin: 4px 0 8px; color: var(--texte-2); }
.fa-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.etiq-fa { display: inline-block; font-size: .82em; padding: 4px 11px; border: 1px solid var(--ligne-forte); border-radius: 20px; background: var(--surface); color: var(--texte); }
.fa-deja .fa-deja__l, .fa-annee .fa-deja__l { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.fa-deja .fa-deja__l b { color: var(--rouge-txt); font-family: var(--f-titre); font-size: 1.2em; }
.fa-deja .note { margin-top: 8px; }
.fa-annee { margin: 10px 0; }
.fa-sous { font-family: var(--f-texte); font-size: .5em; font-weight: 500; color: var(--texte-3); }
.fa-sous b { color: var(--texte); }
.fa-liens { white-space: nowrap; }
.fa-liens .lien { font-weight: 600; }
.fa-champs { margin: 4px 0 14px; }
.tab--fa tr.grp td { background: var(--surface-2); font-weight: 700; font-size: .86em; letter-spacing: .02em; }
.tab--fa tr.grp--titre td { background: var(--surface-3); font-weight: 600; letter-spacing: 0; }
.tab--fa tr.strong td { font-weight: 700; border-top: 1px solid var(--ligne-forte); }
.tab--fa tr.strong--fort td { border-top: 2px solid var(--texte-2); }
.fa-recap h2 { font-size: 1.4em; margin-bottom: 8px; }
.tot { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ligne); }
.tot b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tot--fort { font-weight: 700; }
.tot--grand { font-family: var(--f-titre); font-weight: 700; font-size: 1.25em; border-top: 2px solid var(--texte); border-bottom: 0; margin-top: 4px; padding-top: 10px; }
.tot--grand b { color: var(--rouge-txt); }
.fa-ca { font-family: var(--f-titre); font-size: 1.1em; }
.fa-graph { width: 100%; height: auto; display: block; margin-top: 8px; }
.fa-graph .g-grille { stroke: var(--ligne); stroke-width: 1; }
.fa-graph .g-axe { fill: var(--texte-3); font-size: 10px; font-family: var(--f-texte); }
.fa-graph .g-objectif { fill: none; stroke: var(--texte-3); stroke-width: 2; stroke-dasharray: 6 5; }
.fa-graph .g-ca { fill: none; stroke: var(--rouge); stroke-width: 3; stroke-linejoin: round; }
.fa-graph .g-point { fill: var(--rouge); stroke: var(--surface); stroke-width: 1.5; }
.leg { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 4px; }
.leg--ca { background: var(--rouge); }
.leg--obj { border-top: 2px dashed var(--texte-3); height: 0; }
.ico--petit { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 1100px) { .grille--4 { grid-template-columns: 1fr 1fr; } }
.fa-sit .tab--compact .sel { width: 140px; min-height: 34px; padding: 3px 8px; }