/* SIREXE 2026 — styles. Polices système : aucune ressource externe.
 * Mobile d'abord : barre fixe en haut, navigation en bas, bouton « Signaler » toujours accessible.
 * À partir de 720 px : onglets dans la barre du haut, pas de navigation en bas. */
:root{color-scheme:light}
body{margin:0}
[hidden]{display:none!important}
:root{
  /* Charte SIREXE (relevée sur le logo officiel) : vert #007B39, orange #F18511, noir. */
  --brand-green:#007b39; --brand-orange:#f18511;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f7f9f6; --ink:#111614; --muted:#56635c; --line:#dfe5df;
  --accent:#007b39; --on-accent:#ffffff; --accent-soft:#e2f2e8;
  --ok:#0f7a43; --ok-soft:#dcf0e5; --warn:#8a5a00; --warn-soft:#fbecc8; --crit:#b3261e; --crit-soft:#fbe0dd; --wait:#56635c; --wait-soft:#e8ece7;
  --orange:#b35a00; --orange-soft:#fdeedd;
  --s1:#2a78d6; --s2:#eb6834; --s4:#eda100; --s8:#e34948;
  --shadow:0 1px 2px rgba(20,33,27,.06),0 2px 8px rgba(20,33,27,.05);
  --shadow-lg:0 10px 30px rgba(20,33,27,.16);
  --r:12px; --r-sm:8px;
  --bar-h:58px; --sess-h:46px; --bnav-h:64px;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --brand-green:#2fae6a; --brand-orange:#f18511; --bg:#0d1410; --surface:#151e19; --surface-2:#1a241f; --ink:#e9efeb; --muted:#9aaba2; --line:#27342d;
  --accent:#3cc37d; --on-accent:#06140c; --accent-soft:#123524;
  --ok:#5fd09b; --ok-soft:#173528; --warn:#efc15a; --warn-soft:#3a2d0e; --crit:#ff8a80; --crit-soft:#401a17; --wait:#9aaba2; --wait-soft:#222c26;
  --orange:#f6a04d; --orange-soft:#3b2412; --s1:#3987e5; --s2:#d95926; --s4:#c98500; --s8:#e66767;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 10px 30px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --brand-green:#2fae6a; --brand-orange:#f18511; --bg:#0d1410; --surface:#151e19; --surface-2:#1a241f; --ink:#e9efeb; --muted:#9aaba2; --line:#27342d;
  --accent:#3cc37d; --on-accent:#06140c; --accent-soft:#123524;
  --ok:#5fd09b; --ok-soft:#173528; --warn:#efc15a; --warn-soft:#3a2d0e; --crit:#ff8a80; --crit-soft:#401a17; --wait:#9aaba2; --wait-soft:#222c26;
  --orange:#f6a04d; --orange-soft:#3b2412; --s1:#3987e5; --s2:#d95926; --s4:#c98500; --s8:#e66767;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 10px 30px rgba(0,0,0,.5); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--font-body);-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;line-height:1.15;letter-spacing:-.01em}
h1{font-size:1.5rem}
h2{font-size:1.12rem}
.wrap{max-width:1040px;margin:0 auto;padding-block:14px calc(var(--bnav-h) + 96px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.note{font-size:.85rem;color:var(--muted)}
.eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}

/* ---------- barre du haut ---------- */
.appbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);box-shadow:var(--shadow)}
.appbar-in{max-width:1040px;margin:0 auto;height:var(--bar-h);display:flex;align-items:center;gap:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.appbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--brand-orange) 0 33.3%,transparent 33.3% 66.6%,var(--brand-green) 66.6%)}
.wordmark{height:26px;width:auto;flex:0 0 auto;display:block}
/* Logo noir : inversé en mode sombre (les pastilles orange et verte gardent leur teinte). */
:root[data-theme="dark"] .wordmark{filter:invert(1) hue-rotate(180deg) saturate(1.3)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wordmark{filter:invert(1) hue-rotate(180deg) saturate(1.3)}}
.brand{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.15;padding-left:10px;border-left:1px solid var(--line)}
.brand b{font-family:var(--font-display);font-size:1.02rem;font-weight:800;letter-spacing:.02em}
.brand span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd{flex:0 0 auto;font:600 .78rem/1 var(--font-mono);color:var(--orange);background:var(--orange-soft);border-radius:99px;padding:6px 9px;white-space:nowrap}
.cd:empty{display:none}
.net{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);white-space:nowrap}
.net::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wait);flex:0 0 auto}
.net.on::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.net.off::before{background:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.net.off{color:var(--crit);font-weight:600}

.acctmenu{position:relative;flex:0 0 auto}
.acctmenu>summary{list-style:none;cursor:pointer;border-radius:50%;display:block}
.acctmenu>summary::-webkit-details-marker{display:none}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:700 .85rem/1 var(--font-display);letter-spacing:.02em;border:2px solid transparent}
.acctmenu[open] .avatar{border-color:var(--accent)}
.menu{position:absolute;right:0;top:calc(100% + 10px);width:min(290px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:14px;display:grid;gap:12px;z-index:40}
.menu .who{font-weight:700;font-family:var(--font-display)}
.menu .role{font-size:.82rem;color:var(--muted)}
.menu .btn{width:100%}
.snd{display:flex;gap:10px;align-items:center;font-size:.88rem;color:var(--ink);font-weight:500;cursor:pointer}
.snd input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--accent)}

/* barre de session : qui est connecté, réseau, alertes, déconnexion — toujours visible */
.sessbar{background:var(--surface-2);border-top:1px solid var(--line)}
.sessbar-in{max-width:1040px;margin:0 auto;height:var(--sess-h);display:flex;align-items:center;gap:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.sessbar .avatar{width:30px;height:30px;font-size:.72rem;flex:0 0 auto}
.whob{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden}
.whob .lbl{font-size:.74rem;color:var(--ok);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.whob b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;min-width:0}
.whob .role{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.sessbar .snd{flex:0 0 auto;gap:6px;font-size:.84rem;padding:5px 8px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.sessbar .snd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sessbar .snd input{width:16px;height:16px}
.btn.logout{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--crit);border:1px solid var(--crit);min-height:34px}
.logout svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.logout:hover:not(:disabled){background:var(--crit);color:#fff;filter:none}
.btn.logout.armed{background:var(--crit);color:#fff}
@media (max-width:719px){
  .whob .lbl,.whob .role,.sessbar .snd span{display:none}
  .logout span{font-size:.84rem}
}
@media (max-width:380px){.logout span{display:none}.logout{padding:6px 9px}}

/* onglets (écran large) */
.tabs{display:none;max-width:1040px;margin:0 auto;gap:2px;overflow-x:auto;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));scrollbar-width:none}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px 9px;cursor:pointer;font-weight:600;font-size:.94rem;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}

.badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--crit);color:#fff;font:700 .7rem/1 var(--font-body)}

/* navigation du bas (mobile) */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.bnav button{position:relative;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0;font-size:.68rem;font-weight:600;color:var(--muted);cursor:pointer;min-width:0;letter-spacing:-.01em}
.bnav svg{width:44px;height:28px;padding:3px 11px;border-radius:99px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bnav button[aria-current=page]{color:var(--accent)}
.bnav button[aria-current=page] svg{background:var(--accent-soft)}
.bnav .badge{position:absolute;top:-2px;left:calc(50% + 6px);min-width:17px;height:17px;font-size:.64rem;box-shadow:0 0 0 2px var(--surface)}

/* bouton Signaler */
.fab{position:fixed;z-index:29;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--bnav-h) + 14px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;background:var(--crit);color:#fff;border:0;border-radius:99px;padding:0 20px 0 16px;height:52px;font:700 .98rem/1 var(--font-body);box-shadow:0 6px 20px rgba(179,38,30,.35);cursor:pointer}
.fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .fab{color:#2a0b08}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fab{color:#2a0b08}}

@media (min-width:720px){
  .tabs{display:flex}
  .bnav{display:none}
  .fab{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .wrap{padding-block:18px 110px}
}
@media (max-width:719px){
  .brand span{display:none}
  .net.on,.net:not(.off){font-size:0;gap:0}
}

/* ---------- formulaires et boutons ---------- */
label,.lab{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
select,input,textarea,button{font:inherit;color:inherit}
select,input[type=number],input[type=time],input[type=date],input[type=tel],input[type=text],input[type=password],textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;min-height:46px}
select:focus,input:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:96px}
textarea.mono{font-family:var(--font-mono);font-size:.88rem}
form{display:grid;gap:16px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.fixed{padding:10px 12px;min-height:46px;border-radius:var(--r-sm);display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-weight:500}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;cursor:pointer;background:var(--surface);color:var(--ink);font-size:.92rem;letter-spacing:0}
.seg input:checked+label{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.seg.crit input:checked+label{border-color:var(--crit);background:var(--crit-soft);box-shadow:inset 0 0 0 1px var(--crit)}
.btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r-sm);padding:10px 18px;font-weight:600;cursor:pointer;min-height:46px}
.btn:hover:not(:disabled){filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:transparent;color:var(--crit);border:1px solid var(--crit)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:6px 12px;min-height:36px;font-size:.88rem}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.msg{font-size:.9rem}.msg.ok{color:var(--ok)}.msg.err{color:var(--crit)}

/* ---------- blocs ---------- */
.banner{border:1px solid var(--warn);background:var(--warn-soft);color:var(--warn);padding:10px 14px;border-radius:var(--r-sm);margin-bottom:12px;font-size:.9rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
details.panel>summary{list-style:none;display:flex;align-items:center;gap:10px}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;margin-right:2px}
details.panel[open]>summary::before{transform:rotate(45deg)}
.sesTitle{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1.08rem}
#incNew{border-color:var(--crit-soft)}
#incNew>summary{color:var(--crit)}
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:26px 0 10px}
.list{display:flex;flex-direction:column;gap:8px}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:20px;color:var(--muted);text-align:center;font-size:.92rem;background:var(--surface-2)}

/* jours */
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px 8px;scrollbar-width:thin;scroll-snap-type:x proximity}
.day{flex:0 0 auto;min-width:76px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;cursor:pointer;position:relative;scroll-snap-align:start}
.day b{display:block;font-family:var(--font-display);font-size:1rem}
.day span{font-size:.72rem;color:var(--muted)}
.day[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 4px 12px rgba(0,123,57,.28)}
.day[aria-pressed=true] span{color:var(--on-accent);opacity:.85}
.day i{position:absolute;top:-5px;right:-5px;font-style:normal;font-size:.68rem;font-weight:700;background:var(--crit);color:#fff;border-radius:99px;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--surface)}

/* repères */
.repere{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.repere span{background:var(--surface);padding:9px 12px;display:flex;flex-direction:column;gap:1px}
.repere small{font-size:.72rem;color:var(--muted)}
.repere b{font-family:var(--font-display);font-weight:700;font-size:.98rem}
.repere .hot b{color:var(--orange)}
@media (max-width:719px){
  .repere{grid-template-columns:repeat(2,minmax(0,1fr))}
  .repere span:last-child:nth-child(odd){grid-column:1/-1}
  .days{scrollbar-width:none}
  .days::-webkit-scrollbar{display:none}
}

/* indicateurs */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:8px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .v{font-family:var(--font-display);font-size:1.9rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;order:-1}
.kpi .v small{font-size:1.05rem;color:var(--muted);font-weight:600}
.kpi .l{font-size:.8rem;color:var(--muted)}
.kpi.alert{border-color:var(--crit-soft);background:linear-gradient(var(--crit-soft),var(--crit-soft)) top/100% 4px no-repeat,var(--surface)}
.kpi.alert .v{color:var(--crit)}
.kpi.main{grid-column:1/-1}
.kpi.main .l:first-child{order:-2;font-weight:600;color:var(--ink);font-size:.86rem}
.kpi .bar{height:8px;border-radius:99px;background:var(--wait-soft);overflow:hidden}
.kpi .bar span{display:block;height:100%;background:var(--accent);border-radius:99px;min-width:4px;transition:width .4s}
@media (min-width:720px){
  .kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
  .kpi.main{grid-column:span 2}
}

/* rapports, flux, chips */
details.row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
details.row>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 14px;cursor:pointer}
details.row>summary::-webkit-details-marker{display:none}
details.row[open]{box-shadow:var(--shadow)}
.row .who{font-weight:600}
.row .names{font-size:.8rem;color:var(--muted)}
.row .body{padding:0 14px 14px;display:grid;gap:8px;font-size:.93rem;border-top:1px solid var(--line);padding-top:12px;margin-top:-2px}
.row .body p{margin:0;white-space:pre-wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;border-radius:99px;padding:3px 10px;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.c-ok{background:var(--ok-soft);color:var(--ok)}.c-warn{background:var(--warn-soft);color:var(--warn)}.c-crit{background:var(--crit-soft);color:var(--crit)}.c-wait{background:var(--wait-soft);color:var(--wait)}
.time{font-family:var(--font-mono);font-size:.8rem;color:var(--muted)}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;box-shadow:0 0 0 3px var(--ok-soft)}
@media (prefers-reduced-motion:no-preference){.live{animation:pulse 2s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 0 6px transparent}}
.ev{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.9rem}
.ev>span:last-child{flex:1 1 240px;min-width:0}

/* incidents */
.inc{background:var(--surface);border:1px solid var(--line);border-left-width:5px;border-radius:var(--r);padding:14px;display:grid;gap:8px;box-shadow:var(--shadow)}
.inc.s-critique{border-left-color:var(--crit)}.inc.s-moyen{border-left-color:var(--orange)}.inc.s-faible{border-left-color:var(--wait)}
.inc.done{opacity:.7;box-shadow:none}
.inc.prio{box-shadow:0 0 0 2px var(--crit)}
.inc .head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.inc p{margin:0;white-space:pre-wrap}
.inc .meta{font-size:.83rem;color:var(--muted)}
.inc .ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.inc .ctl .field{flex:1 1 220px}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:18px 0 10px}
.filters select{width:auto}

/* programme */
.ses{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px}
.ses.run{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--shadow)}
.ses .head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}
.ses .meta{font-size:.83rem;color:var(--muted)}
.ses .tm{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* synthèse, bilan */
pre.syn{white-space:pre-wrap;word-break:break-word;font:400 .9rem/1.55 var(--font-mono);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0}
.charts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));margin-bottom:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0;box-shadow:var(--shadow)}
.card h3{font-size:1rem;margin-bottom:8px}
.leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--muted);margin-bottom:6px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.card svg{display:block;width:100%;height:auto}
svg .gl{stroke:var(--line);stroke-width:1}
svg .ax{fill:var(--muted);font:11px var(--font-body)}
svg .tot{fill:var(--ink);font:600 11px var(--font-mono)}
.hb{display:grid;grid-template-columns:minmax(0,9.5rem) 1fr 2rem;gap:8px;align-items:center;margin:6px 0;font-size:.85rem}
.hb .hl{overflow-wrap:anywhere}
.hb .ht{height:14px;background:var(--wait-soft);border-radius:0 4px 4px 0}
.hb .hf{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0}
.hb .hv{font-family:var(--font-mono);text-align:right}
details.tbl{margin-top:8px;font-size:.85rem}
details.tbl summary{cursor:pointer;color:var(--muted)}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
th{color:var(--muted);font-weight:600}

/* alertes en direct : sous la barre du haut, loin des pouces et du bouton Signaler */
.toasts{position:fixed;top:calc(var(--bar-h) + var(--sess-h) + 10px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));left:max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;z-index:35}
@media (min-width:720px){.toasts{top:calc(var(--bar-h) + var(--sess-h) + 56px + env(safe-area-inset-top,0px))}}
.toast{pointer-events:auto;max-width:420px;width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r);padding:11px 14px;box-shadow:var(--shadow-lg);cursor:pointer;font-size:.9rem}
.toast.crit{border-left-color:var(--crit)}
.toast b{display:block}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:tin .25s ease-out}
  .day,.btn,.tab{transition:background .15s,border-color .15s,color .15s}
}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}

/* ---------- connexion ---------- */
.login{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:#ffffff}
/* Fond : carte animée des itinéraires (hôtels → Parc des Expositions) */
.lmap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%;pointer-events:none}
.login::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.65) 30%,rgba(255,255,255,0) 55%)}
@media (min-width:960px){
  .login{place-items:center start;padding-left:max(3vw,24px,env(safe-area-inset-left,0px))}
}
/* Téléphone : la carte en haut (centrée sur les itinéraires), le formulaire en dessous */
@media (max-width:959px){
  .login{place-items:end center;padding-top:49vh}
  .lmap{inset:auto;top:0;left:50%;height:70vh;width:auto;max-width:none;aspect-ratio:1600/880;transform:translate(-64%,-13%)}
  .login::before{background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 42vh,#ffffff 53vh)}
}
.lstage{position:relative;z-index:1;width:min(100%,440px);display:grid;justify-items:center}
@media (min-width:960px){.lstage{width:400px;justify-items:stretch}}
/* Le formulaire glisse en place pendant que les itinéraires se dessinent */
@media (prefers-reduced-motion:no-preference){
  .lcard{animation:lfly .85s cubic-bezier(.2,.8,.2,1) .5s both}
  .lcard .stripe{transform-origin:left;animation:lgrow .9s ease-out 1.2s both}
}
@keyframes lfly{from{opacity:0;transform:translateY(30px) scale(.98)}}
@media (min-width:960px){@keyframes lfly{from{opacity:0;transform:translateX(50px)}}}
@keyframes lgrow{from{transform:scaleX(0)}}
.lcard{position:relative;width:min(100%,440px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;gap:0}
/* Le logo officiel est sur fond blanc : la zone reste blanche, même en mode sombre. */
.lhead{background:#fff;padding:18px 18px 14px}
.lhead img{display:block;width:100%;height:auto}
.stripe{height:5px;background:linear-gradient(90deg,var(--brand-orange) 0 33.3%,#fff 33.3% 66.6%,var(--brand-green) 66.6%)}
.lbody{display:grid;gap:16px;padding:20px 22px 22px}
.lbody h1{font-size:1.3rem}
.lbody .sub{margin:2px 0 0;color:var(--accent);font-weight:600;font-size:.92rem}
.lbody .note{margin:0}
.lbody input{font-size:1.05rem;min-height:50px}
.lbody .btn{width:100%;min-height:50px;font-size:1rem}
.lbody .msg:empty{display:none}
.lfoot{margin:0;padding:12px 22px;border-top:1px solid var(--line);background:var(--surface-2);font-size:.78rem;color:var(--muted);text-align:center}

/* pied de page */
.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:.78rem;color:var(--muted);line-height:1.5}
.foot img{height:56px;width:auto;background:#fff;border-radius:8px;padding:4px 8px}
.foot b{color:var(--ink)}

@media (max-width:400px){.wordmark{height:22px}h1{font-size:1.3rem}.kpi .v{font-size:1.65rem}.cd{padding:5px 7px}}

/* ---------- point du jour / rapport final ---------- */
.supbox{margin-bottom:14px;border-color:var(--accent);background:var(--surface)}
.supbox .actions{margin-top:10px}
#pointDoc,#bilanBody{margin-top:4px}
/* Impression : seul le document est imprimé (pas l'application autour). */
#printArea{display:none}
@media print{
  body.printing>*:not(#printArea){display:none!important}
  body.printing #printArea{display:block}
  body.printing{background:#fff!important}
  :root{padding:0!important}
}
/* ---------- photos des incidents ---------- */
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.photopick{position:relative;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:1px dashed var(--accent);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;color:var(--accent);font-weight:600;font-size:.92rem;background:var(--accent-soft);letter-spacing:0}
.photopick input,.addph input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photopick:focus-within,.addph:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.phprev{display:flex;gap:10px;flex-wrap:wrap}
.phprev:not(:empty){margin-top:6px}
.phprev span{position:relative}
.phprev img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.phprev button{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;border:2px solid var(--surface);background:var(--crit);color:#fff;font-weight:700;line-height:1;cursor:pointer;padding:0}
.addph{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.addph.busy{opacity:.6;pointer-events:none}
.phs{display:flex;gap:8px;flex-wrap:wrap}
.ph{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:86px;height:86px;background:var(--surface-2);cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));cursor:zoom-out}
.lightbox img{max-width:100%;max-height:calc(100dvh - 40px);border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lightbox button{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.tab .badge[data-badge-rep]{background:var(--orange)}
/* ---------- officiels ---------- */
.bnav{grid-template-columns:repeat(7,1fr)}
.bnav button{font-size:.62rem}
.bnav svg{width:40px;padding:3px 9px}
.impbox{display:grid;gap:12px;margin-top:12px}
.impmap summary{cursor:pointer;font-weight:600;margin-bottom:8px}
.impbox table td,.impbox table th{white-space:nowrap}
.warn-t{color:var(--warn)}
.offkpis{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important}
.offkpis .kpi{grid-column:auto!important}
.off{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--wait);border-radius:var(--r);padding:14px;display:grid;gap:8px;box-shadow:var(--shadow)}
.off.st-accueilli{border-left-color:var(--brand-orange)}
.off.st-hotel{border-left-color:var(--brand-green)}
.off.st-reparti{opacity:.72;box-shadow:none}
.off .head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}
.off .head strong{font-size:1.02rem}
.off .meta{font-size:.85rem;color:var(--muted);margin:0}
.offgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 16px;font-size:.9rem}
.offgrid .lab{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.offgrid a{color:var(--accent);font-weight:600}
.off .ctl{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.grid2{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
input.saved{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok-soft)}
/* =========================================================================
   Design « drapeau ivoirien » : fond blanc, orange · blanc · vert, animations douces.
   Toutes les animations s'arrêtent si l'appareil demande moins de mouvement.
   ========================================================================= */
:root{--fo:#F77F00;--fg:#009E60}
#app{position:relative;isolation:isolate}
#app>.wrap{position:relative;z-index:1}
/* Décor de fond : deux halos (orange, vert) qui dérivent + vague tricolore en bas de l'écran */
.decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.13}
.blob.o{width:46vmax;height:46vmax;top:-18vmax;right:-14vmax;background:radial-gradient(circle,var(--fo),transparent 65%)}
.blob.g{width:52vmax;height:52vmax;bottom:-22vmax;left:-18vmax;background:radial-gradient(circle,var(--fg),transparent 65%)}
.flagwave{position:absolute;left:0;bottom:0;width:200%;height:90px;opacity:.16}
.flagwave .wo{fill:var(--fo)}.flagwave .ww{fill:#ffffff}.flagwave .wg{fill:var(--fg)}
@media (max-width:719px){.flagwave{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));height:60px}}
:root[data-theme="dark"] .blob{opacity:.08}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .blob{opacity:.08}}
/* Ruban tricolore sous la barre du haut, avec un reflet qui passe */
.appbar::after{height:4px;background:linear-gradient(90deg,var(--fo) 0 33.33%,#fff 33.33% 66.66%,var(--fg) 66.66%)}
.appbar::before{content:"";position:absolute;left:0;bottom:-1px;height:4px;width:22%;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);transform:translateX(-120%);pointer-events:none}
/* Onglet actif : soulignement orange → vert */
.tab[aria-selected=true]{border-bottom-color:transparent;background:linear-gradient(90deg,var(--fo),var(--fg)) bottom/100% 3px no-repeat}
.bnav button[aria-current=page] svg{background:linear-gradient(135deg,rgba(247,127,0,.16),rgba(0,158,96,.18))}
/* Titres de section : petite barre aux couleurs du drapeau */
.sec h2::before{content:"";display:inline-block;width:20px;height:5px;border-radius:3px;margin-right:9px;vertical-align:middle;background:linear-gradient(90deg,var(--fo) 0 33%,#e7e7e7 33% 66%,var(--fg) 66%)}
/* Jour choisi : dégradé vert ivoirien */
.day[aria-pressed=true]{background:linear-gradient(135deg,var(--fg),#007b39);border-color:transparent}
/* Indicateur principal : liseré tricolore en haut */
.kpi.main{position:relative;overflow:hidden}
.kpi.main::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--fo) 0 33.33%,#fff 33.33% 66.66%,var(--fg) 66.66%)}
.kpi .bar span{background:linear-gradient(90deg,var(--fo),var(--fg))}
/* Cartes : légère élévation au survol (ordinateur) */
@media (hover:hover){.kpi,.off,.inc,.ses,details.row{transition:transform .18s ease,box-shadow .18s ease}.kpi:hover,.off:hover,.inc:hover,.ses:hover,details.row:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}}

@media (prefers-reduced-motion:no-preference){
  .blob.o{animation:drift1 26s ease-in-out infinite alternate}
  .blob.g{animation:drift2 30s ease-in-out infinite alternate}
  .flagwave{animation:wave 22s linear infinite}
  .appbar::before{animation:shine 6s ease-in-out 1s infinite}
  /* entrée en douceur de chaque onglet affiché */
  #app section:not([hidden]){animation:rise .38s cubic-bezier(.2,.8,.2,1)}
  .day[aria-pressed=true]{animation:pop .35s ease-out}
  .tab[aria-selected=true]{animation:underline .35s ease-out}
  .fab::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(179,38,30,.45);animation:ring 2.8s ease-out infinite}
  .live{animation:pulse 2s ease-in-out infinite}
}
@keyframes drift1{to{transform:translate(-8vmax,10vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(10vmax,-8vmax) scale(1.1)}}
@keyframes wave{to{transform:translateX(-50%)}}
@keyframes shine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(560%)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.03)}}
@keyframes underline{from{background-size:0 3px}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(179,38,30,.45)}70%,100%{box-shadow:0 0 0 14px rgba(179,38,30,0)}}
/* le reflet du ruban et le décor ne doivent jamais élargir la page */
html,body{overflow-x:clip}
.appbar{overflow-x:clip}

/* ---------- boutons des jours : animations ---------- */
.day{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .25s,border-color .25s,color .25s}
/* liseré tricolore qui se trace sous le bouton (survol, focus, jour choisi) */
.day::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--fo) 0 33.33%,#fff 33.33% 66.66%,var(--fg) 66.66%);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.day:hover::after,.day:focus-visible::after,.day[aria-pressed=true]::after{transform:scaleX(1)}
.day[aria-pressed=true]::after{background:linear-gradient(90deg,var(--fo) 0 33.33%,#fff 33.33% 66.66%,#8de3bd 66.66%)}
.day:active{transform:scale(.95)}
@media (hover:hover){.day:not([aria-pressed=true]):hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.09);border-color:#d3dad4}}
/* reflet lumineux sur le jour choisi */
.day[aria-pressed=true]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0}
/* aujourd'hui : point orange */
.day.today b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--fo);vertical-align:middle;box-shadow:0 0 0 0 rgba(247,127,0,.55)}
.day.today[aria-pressed=true] b::after{background:#fff}
@media (prefers-reduced-motion:no-preference){
  .days.enter .day{animation:dayin .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
  .day[aria-pressed=true]::before{animation:dayshine 3.6s ease-in-out .6s infinite}
  .day.today b::after{animation:todaypulse 2s ease-out infinite}
  .day i.bump{animation:bump .55s cubic-bezier(.2,.8,.2,1)}
}
@keyframes dayin{from{opacity:0;transform:translateY(16px) scale(.9)}}
@keyframes dayshine{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}
@keyframes todaypulse{0%{box-shadow:0 0 0 0 rgba(247,127,0,.55)}70%,100%{box-shadow:0 0 0 7px rgba(247,127,0,0)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
/* Tableau de bord sur fond blanc pur : thème clair imposé (data-theme="light" sur <html>), pas de halos colorés. */
.blob{display:none}

/* ---------- « blanc glacé » : fond blanc froid légèrement bleuté, barres en verre dépoli ---------- */
:root{--bg:#f1f6f9;--surface:#ffffff;--surface-2:#f6f9fb;--line:#dde6ec;--shadow:0 1px 2px rgba(30,60,80,.05),0 4px 14px rgba(30,60,80,.06)}
body{background:linear-gradient(180deg,#f7fafc 0,#eef4f8 100%) fixed;background-color:var(--bg)}
.appbar{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 20px rgba(30,60,80,.06)}
.sessbar{background:rgba(240,246,250,.6);border-top-color:rgba(221,230,236,.8)}
.bnav{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-top-color:rgba(221,230,236,.9)}
.day:not([aria-pressed=true]),.kpi,.panel,.card,details.row,.inc,.ses,.off,.ev,.repere span{background:#fff}
.repere{background:var(--line)}
.empty{background:rgba(255,255,255,.55);border-color:#d3dee6}
.foot img{box-shadow:0 1px 4px rgba(30,60,80,.08)}

/* ---------- vague tricolore du pied de page : bien visible ----------
   Trois couches pleines (orange, blanc, vert) qui défilent à des vitesses différentes (effet de profondeur).
   Chaque tracé couvre 2 400 unités = 8 périodes : un décalage de -50 % retombe exactement sur le motif. */
.flagwave{height:150px;opacity:1;filter:drop-shadow(0 -3px 10px rgba(30,60,80,.10))}
.flagwave path{transform-box:fill-box}
.flagwave .wo{fill:var(--fo);opacity:.9}
.flagwave .ww{fill:#fff;stroke:rgba(30,60,80,.08);stroke-width:1}
.flagwave .wg{fill:var(--fg);opacity:.92}
@media (max-width:719px){.flagwave{height:90px}}
@media (prefers-reduced-motion:no-preference){
  .flagwave{animation:none}
  .flagwave .wo{animation:wave 14s linear infinite}
  .flagwave .ww{animation:wave 10s linear infinite reverse}
  .flagwave .wg{animation:wave 7s linear infinite}
}
/* le contenu laisse la place à la vague pour que le pied de page reste lisible */
.wrap{padding-bottom:calc(var(--bnav-h) + 170px + env(safe-area-inset-bottom,0px))}
@media (min-width:720px){.wrap{padding-bottom:180px}}

/* ---------- rapports des hôtels : couleur de leur trajet de navette (comme sur la carte) ---------- */
.rt-ivoire{--rt:#F77F00;--rt-bg:#fff6ec}
.rt-marcory{--rt:#009E60;--rt-bg:#eefaf4}
.rt-aero{--rt:#1d1d1b;--rt-bg:#f2f3f4}
details.row.rt{border-left:5px solid var(--rt);background:linear-gradient(90deg,var(--rt-bg),#fff 70%)}
details.row.rt .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.rtag{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--rt);background:var(--rt-bg);border:1px solid color-mix(in srgb,var(--rt) 35%,transparent);border-radius:999px;padding:1px 8px}
.rtag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rt)}

/* ---------- animations des cartes (rapports, incidents, sessions, officiels, activité, chiffres) ---------- */
details.row.rt{position:relative}
details.row.rt::before{content:"";position:absolute;left:-5px;top:10px;bottom:10px;width:5px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 6px,transparent 6px 16px)}
@media (prefers-reduced-motion:no-preference){
  /* entrée en cascade à l'ouverture d'un onglet */
  .enter>*{animation:cardin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
  /* pointillés blancs qui défilent dans la bande colorée : la navette roule, comme sur la carte */
  details.row.rt::before{animation:navette 1.4s linear infinite}
  details.row.rt:hover .rtag::before{animation:todaypulse 1.2s ease-out infinite}
  /* ouverture fluide d'un rapport */
  details.row[open]>.body{animation:rise .32s cubic-bezier(.2,.8,.2,1)}
  details.row>summary{transition:background .2s}
  details.row>summary:hover{background:rgba(0,0,0,.025)}
  /* un rapport qui vient d'arriver ou d'être modifié : halo + statut qui rebondit */
  details.row.fresh{animation:fresh 2.4s ease-out}
  details.row.fresh .chip{animation:pop .5s ease-out .2s}
  /* poste en attente : le point du statut respire */
  #postes .chip.c-wait::before{animation:wait 1.8s ease-in-out infinite}
}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes navette{to{background-position:0 16px}}
@keyframes fresh{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rt,var(--ok)) 60%,transparent);transform:scale(1.01)}
  30%{box-shadow:0 0 0 8px color-mix(in srgb,var(--rt,var(--ok)) 0%,transparent);transform:none}
  100%{box-shadow:var(--shadow)}}
@keyframes wait{50%{opacity:.25}}