/* ============================================================================
   ILIADE OUTILS — design system. Mobile-first. Thème clair/sombre.
   Identité = palette d'iliadecreation.fr : vert #2B6A44 (variables :root du site).
   ============================================================================ */
:root{
  --ground:#F6F7F6; --surface:#FFFFFF; --surface-2:#EEF2EF; --surface-3:#E4EAE6;
  --ink:#0F172A; --muted:#64748B; --faint:#94A3B8;
  --line:#E5E7EB; --line-strong:#D1D5DB;
  --brand:#2B6A44; --brand-soft:#1F4D31; --brand-tint:#EAF5EE;
  --accent:#2B6A44; --accent-soft:#EAF5EE; --accent-ink:#1F4D31;
  --mark:#2B6A44;
  --logo-a:#143822; --logo-b:#2B6A44; --logo-la:#64A57B; --logo-lb:#2B6A44; --logo-g:#C49A3A; --logo-f:#F4FAF6; --logo-f2:#D3E8DA;
  --ok:#16A34A; --ok-soft:#DCFCE7;
  --warn:#B67C12; --warn-soft:#FEF3C7;
  --crit:#DC2626; --crit-soft:#FEE2E2;
  --shadow-sm:0 1px 2px rgba(20,24,31,.05);
  --shadow:0 2px 6px rgba(20,24,31,.06),0 12px 30px rgba(20,24,31,.07);
  --shadow-pop:0 8px 20px rgba(20,24,31,.12),0 24px 60px rgba(20,24,31,.18);
  --r-s:9px; --r:13px; --r-l:18px; --r-xl:24px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nav-h:64px; --top-h:56px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0E1512; --surface:#151D19; --surface-2:#1B2620; --surface-3:#23302A;
    --ink:#E7EEEA; --muted:#9DB0A6; --faint:#6B7D73;
    --line:#22302A; --line-strong:#31423A;
    --brand:#3A8A5C; --brand-soft:#8BC19D; --brand-tint:#18271F;
    --accent:#3A8A5C; --accent-soft:#18271F; --accent-ink:#8BC19D;
    --mark:#E7EEEA;
    --logo-a:#5E9C74; --logo-b:#A9D4B6; --logo-la:#5E9C74; --logo-lb:#64A57B; --logo-g:#E8C872; --logo-f:#25402F; --logo-f2:#15241B;
    --ok:#5CB98D; --ok-soft:#16241E;
    --warn:#E0AC55; --warn-soft:#2A2216;
    --crit:#F07167; --crit-soft:#2A1917;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 6px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.5);
    --shadow-pop:0 10px 30px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{ color-scheme:light;
  --ground:#F6F7F6; --surface:#FFFFFF; --surface-2:#EEF2EF; --surface-3:#E4EAE6;
  --ink:#0F172A; --muted:#64748B; --faint:#94A3B8; --line:#E5E7EB; --line-strong:#D1D5DB;
  --brand:#2B6A44; --brand-soft:#1F4D31; --brand-tint:#EAF5EE;
  --accent:#2B6A44; --accent-soft:#EAF5EE; --accent-ink:#1F4D31; --mark:#2B6A44;
  --logo-a:#143822; --logo-b:#2B6A44; --logo-la:#64A57B; --logo-lb:#2B6A44; --logo-g:#C49A3A; --logo-f:#F4FAF6; --logo-f2:#D3E8DA;
  --ok:#16A34A; --ok-soft:#DCFCE7; --warn:#B67C12; --warn-soft:#FEF3C7; --crit:#DC2626; --crit-soft:#FEE2E2;
}
:root[data-theme="dark"]{ color-scheme:dark;
  --ground:#0E1512; --surface:#151D19; --surface-2:#1B2620; --surface-3:#23302A;
  --ink:#E7EEEA; --muted:#9DB0A6; --faint:#6B7D73; --line:#22302A; --line-strong:#31423A;
  --brand:#3A8A5C; --brand-soft:#8BC19D; --brand-tint:#18271F;
  --accent:#3A8A5C; --accent-soft:#18271F; --accent-ink:#8BC19D; --mark:#E7EEEA;
  --logo-a:#5E9C74; --logo-b:#A9D4B6; --logo-la:#5E9C74; --logo-lb:#64A57B; --logo-g:#E8C872; --logo-f:#25402F; --logo-f2:#15241B;
  --ok:#5CB98D; --ok-soft:#16241E; --warn:#E0AC55; --warn-soft:#2A2216; --crit:#F07167; --crit-soft:#2A1917;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--ground); color:var(--ink);
  font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overscroll-behavior-y:none;
}
a{color:var(--brand-soft); text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent-soft); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ══ COQUILLE SAAS : sidebar · canvas · panneau contextuel ══════════════════*/
.iconbtn{
  width:38px; height:38px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; flex:none;
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn.badge{position:relative}
.iconbtn.badge[data-count]:not([data-count="0"])::after{
  content:attr(data-count); position:absolute; top:1px; right:1px; min-width:16px; height:16px;
  padding:0 4px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px;
  font-weight:700; display:grid; place-items:center; line-height:16px;
}

/* Logo ATLAS (helpers ia_wordmark / ia_mark — géométrie dans app/lib/brand.php) */
.ia-mark{display:block; flex:none; overflow:visible}
.ia-logo{display:inline-flex; align-items:center; gap:11px}
.ia-logo-txt{display:flex; flex-direction:column; line-height:1}
.ia-logo-txt b{font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:.16em; margin-right:-.16em; text-transform:uppercase; color:var(--brand-soft)}
.ia-logo-txt i{font-family:var(--serif); font-style:italic; font-size:12.5px; font-weight:500; letter-spacing:.03em; color:var(--brand); margin-top:5px}
:root[data-theme=dark] .ia-logo-txt b{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ia-logo-txt b{color:var(--ink)}}

/* Parties animées : chacune tourne ou grandit autour de son propre centre. */
.ia-k-titan,.ia-k-bar,.ia-k-world,.ia-k-mer,.ia-k-star,.ia-k-glow{transform-box:fill-box; transform-origin:center}
.ia-k-titan{transform-origin:50% 100%}
/* Le globe tourne : chaque méridien passe par toutes les largeurs (cos de l'angle), départ et arrivée à sa largeur de repos. */
@keyframes iak-m1{0.0%{transform:scaleX(0.4)}4.17%{transform:scaleX(0.149)}8.33%{transform:scaleX(-0.112)}12.5%{transform:scaleX(-0.365)}16.67%{transform:scaleX(-0.594)}20.83%{transform:scaleX(-0.782)}25.0%{transform:scaleX(-0.917)}29.17%{transform:scaleX(-0.989)}33.33%{transform:scaleX(-0.994)}37.5%{transform:scaleX(-0.931)}41.67%{transform:scaleX(-0.805)}45.83%{transform:scaleX(-0.624)}50.0%{transform:scaleX(-0.4)}54.17%{transform:scaleX(-0.149)}58.33%{transform:scaleX(0.112)}62.5%{transform:scaleX(0.365)}66.67%{transform:scaleX(0.594)}70.83%{transform:scaleX(0.782)}75.0%{transform:scaleX(0.917)}79.17%{transform:scaleX(0.989)}83.33%{transform:scaleX(0.994)}87.5%{transform:scaleX(0.931)}91.67%{transform:scaleX(0.805)}95.83%{transform:scaleX(0.624)}100.0%{transform:scaleX(0.4)}}
@keyframes iak-m2{0.0%{transform:scaleX(0.78)}4.17%{transform:scaleX(0.915)}8.33%{transform:scaleX(0.988)}12.5%{transform:scaleX(0.994)}16.67%{transform:scaleX(0.932)}20.83%{transform:scaleX(0.806)}25.0%{transform:scaleX(0.626)}29.17%{transform:scaleX(0.403)}33.33%{transform:scaleX(0.152)}37.5%{transform:scaleX(-0.109)}41.67%{transform:scaleX(-0.363)}45.83%{transform:scaleX(-0.591)}50.0%{transform:scaleX(-0.78)}54.17%{transform:scaleX(-0.915)}58.33%{transform:scaleX(-0.988)}62.5%{transform:scaleX(-0.994)}66.67%{transform:scaleX(-0.932)}70.83%{transform:scaleX(-0.806)}75.0%{transform:scaleX(-0.626)}79.17%{transform:scaleX(-0.403)}83.33%{transform:scaleX(-0.152)}87.5%{transform:scaleX(0.109)}91.67%{transform:scaleX(0.363)}95.83%{transform:scaleX(0.591)}100.0%{transform:scaleX(0.78)}}
/* Un tour visible (demi-tour réel) : au lancement et au survol, le globe tourne une seule fois. */
@keyframes iak-h1{0%{transform:scaleX(0.4)}8.33%{transform:scaleX(0.149)}16.67%{transform:scaleX(-0.112)}25%{transform:scaleX(-0.365)}33.33%{transform:scaleX(-0.594)}41.67%{transform:scaleX(-0.782)}50%{transform:scaleX(-0.917)}58.33%{transform:scaleX(-0.989)}66.67%{transform:scaleX(-0.994)}75%{transform:scaleX(-0.931)}83.33%{transform:scaleX(-0.805)}91.67%{transform:scaleX(-0.624)}100%{transform:scaleX(-0.4)}}
@keyframes iak-h2{0%{transform:scaleX(0.78)}8.33%{transform:scaleX(0.915)}16.67%{transform:scaleX(0.988)}25%{transform:scaleX(0.994)}33.33%{transform:scaleX(0.932)}41.67%{transform:scaleX(0.806)}50%{transform:scaleX(0.626)}58.33%{transform:scaleX(0.403)}66.67%{transform:scaleX(0.152)}75%{transform:scaleX(-0.109)}83.33%{transform:scaleX(-0.363)}91.67%{transform:scaleX(-0.591)}100%{transform:scaleX(-0.78)}}
@keyframes iak-twinkle{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.7) rotate(45deg)}70%{transform:scale(.85) rotate(60deg)}}
@keyframes iak-breathe{0%,100%{opacity:.18}50%{opacity:.55}}
.ia-k-m1{transform:scaleX(.4)} .ia-k-m2{transform:scaleX(.78)}

/* Au survol de la marque : le globe fait un tour, l'étoile scintille. */
.side-brand:hover .ia-k-m1,.canvas-brand:hover .ia-k-m1{animation:iak-h1 1.2s ease-in-out}
.side-brand:hover .ia-k-m2,.canvas-brand:hover .ia-k-m2{animation:iak-h2 1.2s ease-in-out}
.side-brand:hover .ia-k-star,.canvas-brand:hover .ia-k-star{animation:iak-twinkle .9s ease}

/* Atlas travaille (une page s'ouvre, des données arrivent) : le globe de la marque tourne. */
.ia-busy .side-brand .ia-k-m1,.ia-busy .canvas-brand .ia-k-m1{animation:iak-m1 1.6s linear infinite}
.ia-busy .side-brand .ia-k-m2,.ia-busy .canvas-brand .ia-k-m2{animation:iak-m2 1.6s linear infinite}
.ia-busy .side-brand .ia-k-star,.ia-busy .canvas-brand .ia-k-star{animation:iak-twinkle 1.6s ease infinite}

/* Lancement : le titan se dresse, le globe tombe dans ses bras (le titan encaisse), l'orbite se trace, l'étoile fait le tour. */
.ia-mark.is-launch .ia-k-titan{opacity:0; animation:iak-rise .7s cubic-bezier(.2,1.25,.35,1) .1s forwards, iak-squash .42s cubic-bezier(.3,0,.3,1) 1.22s}
.ia-mark.is-launch .ia-k-bar{transform:scaleX(0); animation:iak-in .4s cubic-bezier(.3,1.4,.5,1) .55s forwards}
.ia-mark.is-launch .ia-k-world{opacity:0; transform:translateY(-58px) scale(.82); animation:iak-drop .6s cubic-bezier(.5,0,.75,0) .62s forwards}
.ia-mark.is-launch .ia-k-glow{animation:iak-flash 1.3s ease-out 1.22s forwards}
.ia-mark.is-launch .ia-k-m1,.ia-mark.is-launch .ia-k-m2{animation:iak-h1 1.4s cubic-bezier(.3,0,.3,1) 1.15s}
.ia-mark.is-launch .ia-k-m2{animation-name:iak-h2}
/* L'orbite reste invisible avant de se tracer (sinon ses bouts arrondis laissent deux points d'or). */
.ia-mark.is-launch .ia-k-orb{opacity:0; stroke-dasharray:1; stroke-dashoffset:1; animation:iak-show .01s linear 1.3s forwards, iak-draw .7s cubic-bezier(.65,0,.35,1) 1.3s forwards}
.ia-mark.is-launch .ia-k-front{animation-delay:1.5s, 1.5s}
.ia-mark.is-launch .ia-k-sat{opacity:0; animation:iak-show .01s linear 1.75s forwards}
.ia-mark.is-launch .ia-k-star{animation:iak-twinkle .8s ease 3.05s}
@keyframes iak-rise{0%{opacity:0; transform:translateY(24px) scaleY(.35)}60%{opacity:1}100%{opacity:1; transform:none}}
@keyframes iak-squash{0%{transform:none}30%{transform:scaleY(.93) scaleX(1.02)}100%{transform:none}}
@keyframes iak-drop{0%{opacity:0; transform:translateY(-58px) scale(.82)}35%{opacity:1}100%{opacity:1; transform:none}}
@keyframes iak-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes iak-draw{to{stroke-dashoffset:0}}
@keyframes iak-in{to{opacity:1; transform:none}}
@keyframes iak-show{to{opacity:1}}

/* Chargement : le globe tourne sans fin, l'étoile orbite (mouvement porté par le SVG), le halo respire. */
.ia-mark.is-loop .ia-k-m1{animation:iak-m1 2.8s linear infinite}
.ia-mark.is-loop .ia-k-m2{animation:iak-m2 2.8s linear infinite}
.ia-mark.is-loop .ia-k-glow{animation:iak-breathe 2.8s ease-in-out infinite}

/* Écran de lancement (une fois par session, touche pour passer). */
.ia-launch{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--ground);
  transition:opacity .35s ease}
.ia-launch.out{opacity:0; pointer-events:none}
.ia-launch-in{display:flex; flex-direction:column; align-items:center; gap:14px}
.ia-launch-wm{display:flex; flex-direction:column; align-items:center; line-height:1; margin-top:4px}
.ia-launch-wm b{font-family:var(--serif); font-size:52px; font-weight:600; letter-spacing:.2em; margin-right:-.2em; color:var(--brand-soft); display:flex}
.ia-launch-wm b span{display:inline-block; opacity:0; transform:translateY(16px); animation:iak-in .6s cubic-bezier(.2,1.3,.4,1) forwards}
.ia-launch-wm b span:nth-child(1){animation-delay:1.55s} .ia-launch-wm b span:nth-child(2){animation-delay:1.63s}
.ia-launch-wm b span:nth-child(3){animation-delay:1.71s} .ia-launch-wm b span:nth-child(4){animation-delay:1.79s}
.ia-launch-wm b span:nth-child(5){animation-delay:1.87s}
.ia-launch-wm em{font-family:var(--serif); font-style:italic; font-size:18px; font-weight:500; letter-spacing:.04em;
  color:var(--brand); margin-top:12px; opacity:0; animation:iak-in .8s ease 2.1s forwards}
.ia-launch-wm i{display:block; height:2px; width:0; margin-top:13px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--logo-g,#C49A3A),transparent); animation:iak-rule .7s cubic-bezier(.65,0,.35,1) 2.3s forwards}
@keyframes iak-rule{to{width:150px}}
:root[data-theme=dark] .ia-launch-wm b{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ia-launch-wm b{color:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .ia-mark *,.ia-launch-wm *{animation:none!important; transition:none!important}
  .ia-mark .ia-k-titan,.ia-mark .ia-k-world,.ia-mark .ia-k-sat,.ia-launch-wm b span,.ia-launch-wm em{opacity:1!important; transform:none!important}
  .ia-mark .ia-k-bar{transform:none!important} .ia-mark .ia-k-orb{stroke-dashoffset:0!important; opacity:1!important}
  .ia-launch-wm i{width:150px}
}

.shell{min-height:100dvh}

/* ── Sidebar gauche ─────────────────────────────────────────────────────────*/
.side{
  position:fixed; top:0; left:0; bottom:0; width:280px; z-index:70;
  display:flex; flex-direction:column; gap:6px; padding:16px 14px calc(16px + var(--safe-b));
  background:var(--surface); border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.22,1,.36,1);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;   /* menu plus haut que l'écran : il défile (thème, compte, déconnexion toujours atteignables) */
}
.side > *{flex-shrink:0}
.shell.nav-open .side{transform:none; box-shadow:var(--shadow-pop)}
.side-brand{display:block; padding:6px 8px 14px}
.side-new{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:12px; border:none; border-radius:var(--r); cursor:pointer;
  background:var(--accent); color:#fff; font-size:15px; font-weight:650;
  box-shadow:0 4px 14px rgba(43,106,68,.28); transition:filter .15s, transform .06s;
}
.side-new:hover{filter:brightness(1.05)} .side-new:active{transform:translateY(1px)}
.side-nav{display:flex; flex-direction:column; gap:2px; margin-top:12px}
.side-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r);
  color:var(--muted); font-weight:600; font-size:14.5px; position:relative;
}
.side-nav a:hover{background:var(--surface-2); color:var(--ink)}
.side-nav a[aria-current=page]{background:var(--brand-tint); color:var(--brand-soft)}
.side-nav a[aria-current=page] svg{color:var(--accent)}
.side-badge{margin-left:auto; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px; display:grid; place-items:center}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--line)}
.side-theme{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r); background:transparent; color:var(--muted); cursor:pointer; font-weight:600; font-size:13.5px;
}
.side-theme:hover{background:var(--surface-2); color:var(--ink)}
.side-theme .ic-dark{display:none}
:root[data-theme=dark] .side-theme .ic-light{display:none}
:root[data-theme=dark] .side-theme .ic-dark{display:inline-flex}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .side-theme .ic-light{display:none}
  :root:not([data-theme=light]) .side-theme .ic-dark{display:inline-flex}}
.side-user{display:flex; align-items:center; gap:10px; padding:4px 4px 0}
.avatar{width:34px; height:34px; border-radius:10px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:700; flex:none}
.side-user-name{flex:1; font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── Canvas central ─────────────────────────────────────────────────────────*/
.canvas{min-height:100dvh; display:flex; flex-direction:column; padding-bottom:calc(var(--nav-h) + var(--safe-b))}
.canvas-top{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; height:var(--top-h); padding:0 12px;
  background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.canvas-brand{display:flex; align-items:center; gap:8px; font-weight:750; letter-spacing:-.01em; font-size:15px}
.canvas-brand .cb-txt{display:flex; flex-direction:column; line-height:1}
.canvas-brand .cb-txt b{font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-soft)}
.canvas-brand .cb-txt i{font-family:var(--serif); font-style:italic; font-size:10.5px; font-weight:500; letter-spacing:.03em; color:var(--brand); margin-top:2px}
:root[data-theme=dark] .canvas-brand .cb-txt b{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .canvas-brand .cb-txt b{color:var(--ink)}}
.canvas-brand .ia-mark{width:26px; height:26px}
.canvas-title{display:none; font-weight:650; font-size:15px}
@media (min-width:760px){.canvas-title{display:block}}
.canvas-top .sp{flex:1}
.content{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:16px}

/* ── Panneau contextuel droit ───────────────────────────────────────────────*/
.context{
  position:fixed; top:0; right:0; bottom:0; width:330px; z-index:70;
  display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(102%); transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.shell.ctx-open .context{transform:none; box-shadow:var(--shadow-pop)}
.ctx-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)}
.ctx-head b{font-family:var(--serif); font-size:1.05rem; font-weight:600}
.ctx-scroll{flex:1; overflow-y:auto; padding:6px 12px calc(16px + var(--safe-b))}
.ctx-block{padding:12px 4px; border-bottom:1px solid var(--line)}
.ctx-block:last-child{border-bottom:none}
.ctx-label{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.ctx-label em{margin-left:auto; background:var(--accent-soft); color:var(--accent-ink); font-style:normal;
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px}
.ctx-item{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--r-s); color:inherit}
a.ctx-item:hover{background:var(--surface-2)}
.ctx-item.static{cursor:default}
.ctx-dot{width:8px; height:8px; border-radius:50%; background:var(--faint); flex:none}
.ctx-dot.accent{background:var(--accent)}
.ctx-ic{width:28px; height:28px; border-radius:8px; background:var(--surface-2); color:var(--muted);
  display:grid; place-items:center; flex:none}
.ctx-item-body{flex:1; min-width:0; display:flex; flex-direction:column}
.ctx-item-body b{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctx-item-body small{color:var(--faint); font-size:12px}
.ctx-time{color:var(--faint); font-size:11px; font-family:var(--mono); flex:none}
.ctx-empty{color:var(--faint); font-size:13px; padding:4px 8px 8px}
.ctx-all{display:flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--accent); padding:8px}
.ctx-tools{background:var(--brand-tint); border-radius:var(--r); border-bottom:none; margin-bottom:6px; padding:12px}

/* ── Bottom nav (mobile) ────────────────────────────────────────────────────*/
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:55; height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-top:1px solid var(--line);
}
.bottomnav a,.bottomnav button{
  display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--faint);
  font-size:10.5px; font-weight:600; padding:6px 0; position:relative; background:none; border:none; cursor:pointer;
}
.bottomnav a.active{color:var(--accent)}
.bottomnav a.badge[data-count]:not([data-count="0"])::after{
  content:attr(data-count); position:absolute; top:2px; right:calc(50% - 22px); min-width:15px; height:15px;
  padding:0 4px; border-radius:999px; background:var(--accent); color:#fff; font-size:9px; font-weight:700;
  display:grid; place-items:center; line-height:15px;
}
.bottomnav .fab{
  width:54px; height:54px; padding:0; justify-self:center; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; margin-top:-22px; box-shadow:0 6px 18px rgba(43,106,68,.36);
  border:3px solid var(--surface);
}
.bottomnav .fab svg{width:26px;height:26px;stroke-width:2.2}

/* ── Menu créer (popover) ───────────────────────────────────────────────────*/
.create-menu{
  position:fixed; z-index:75; min-width:210px; padding:6px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-pop);
  display:flex; flex-direction:column; gap:2px;
}
.create-menu[hidden]{display:none}
.create-menu button,.create-menu a{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border:none; border-radius:var(--r-s);
  background:none; color:var(--ink); font-size:14.5px; font-weight:600; cursor:pointer; text-align:left; width:100%;
}
.create-menu button:hover,.create-menu a:hover{background:var(--surface-2)}
.create-menu button svg,.create-menu a svg{color:var(--accent)}
.create-menu a{text-decoration:none; box-sizing:border-box}

/* ── Backdrop des drawers ───────────────────────────────────────────────────*/
.drawer-backdrop{position:fixed; inset:0; z-index:65; background:rgba(10,13,18,.5);
  opacity:0; pointer-events:none; transition:opacity .2s ease}
.shell.nav-open .drawer-backdrop,.shell.ctx-open .drawer-backdrop{opacity:1; pointer-events:auto}

/* ── Responsive : rails fixes en desktop ────────────────────────────────────*/
@media (min-width:760px){
  .only-mobile{display:none!important}
  .bottomnav{display:none}
  .shell{display:grid; grid-template-columns:240px 1fr}
  .side{position:sticky; top:0; width:auto; height:100dvh; transform:none!important; box-shadow:none; z-index:30}   /* la largeur de sa colonne (280 px débordait sur le contenu) */
  .canvas{padding-bottom:0}
  .drawer-backdrop{display:none}
}
@media (min-width:1180px){
  .shell{grid-template-columns:248px minmax(0,1fr) 340px}
  .context{position:sticky; top:0; height:100dvh; transform:none!important; box-shadow:none; z-index:30}
  .canvas-top{display:none}
}

/* ── Titres ─────────────────────────────────────────────────────────────────*/
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:6px 2px 14px}
.page-head h1{font-family:var(--serif); font-weight:600; font-size:1.5rem; margin:0; letter-spacing:-.01em}
.page-head p{margin:2px 0 0; color:var(--muted); font-size:.9rem}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}

/* ── Cartes ─────────────────────────────────────────────────────────────────*/
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-sm)}
.card.pad{padding:16px}

/* ── Boutons ────────────────────────────────────────────────────────────────*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:var(--r); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-size:14.5px; font-weight:600; cursor:pointer;
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(43,106,68,.28)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.brand{background:var(--brand); border-color:transparent; color:#fff}
.btn.sm{padding:7px 11px; font-size:13px; border-radius:var(--r-s)}
.btn.block{width:100%}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* ── Formulaires ────────────────────────────────────────────────────────────*/
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:12.5px; font-weight:600; color:var(--muted)}
.field .hint{font-size:12px; color:var(--faint)}
input,select,textarea{
  width:100%; padding:12px 13px; border-radius:var(--r); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-size:15px; font-family:inherit; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:96px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); cursor:pointer}
.check input{width:auto; margin-top:2px}

/* ── Chips / badges ─────────────────────────────────────────────────────────*/
/* Interrupteur d'affichage partagé (Agenda | Liste, Stock Liste | Cartes). */
.mode-switch{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:3px; gap:2px}
.mode-switch button{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--muted);
  font:700 13.5px/1 var(--sans); padding:8px 13px; border-radius:9px; cursor:pointer}
.mode-switch button.on{background:var(--brand); color:#fff; box-shadow:var(--shadow-sm)}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.chip .dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
  padding:3px 9px; border-radius:999px}
.pill.nouveau{background:var(--accent-soft); color:var(--accent-ink)}
.pill.contacte{background:var(--brand-tint); color:var(--brand-soft)}
.pill.devis_envoye{background:var(--warn-soft); color:var(--warn)}
.pill.signe{background:var(--ok-soft); color:var(--ok)}
.pill.realise{background:var(--ok-soft); color:var(--ok)}
.pill.archive,.pill.perdu{background:var(--surface-2); color:var(--faint)}

/* ── Modale / feuille ───────────────────────────────────────────────────────*/
/* Panneau latéral droit (remplace les popups) — plein écran sur mobile. */
.sheet-backdrop{position:fixed; inset:0; z-index:60; background:rgba(10,13,18,.32);
  opacity:0; pointer-events:none; transition:opacity .2s ease}
.sheet-backdrop.open{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; z-index:61; top:0; right:0; bottom:0; width:100vw;
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); box-shadow:var(--shadow-pop);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.22,1,.36,1);
  padding:0 16px calc(24px + var(--safe-b));
}
.sheet.open{transform:none}
.sheet:not(.open){box-shadow:none}           /* fermée, hors écran : son ombre ne doit pas déborder sur le bord droit */
.sheet .grab{display:none}
.sheet-head{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px;
  padding:16px 0 12px; margin-bottom:10px; background:var(--surface); border-bottom:1px solid var(--line)}
.sheet-head h2{font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:0; flex:1}
@media (min-width:620px){
  .sheet{width:min(468px,100vw); border-left:1px solid var(--line)}
}
/* Actions de bas de formulaire : collées en bas du panneau */
.sheet .ed-actions{display:flex; gap:10px; position:sticky; bottom:0; background:var(--surface);
  padding:12px 0 calc(4px + var(--safe-b)); margin-top:8px; border-top:1px solid var(--line)}
.sheet .ed-actions .btn{flex:1}

/* ── Skeleton « reflet métallique » ─────────────────────────────────────────*/
.skeleton{position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r)}
.skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}}

/* ── Empty state ────────────────────────────────────────────────────────────*/
.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty .ic{width:56px; height:56px; border-radius:16px; background:var(--surface-2);
  display:grid; place-items:center; margin:0 auto 14px; color:var(--faint)}
.empty h3{margin:0 0 4px; color:var(--ink); font-family:var(--serif); font-weight:600}

/* ── Toast ──────────────────────────────────────────────────────────────────*/
.toast-wrap{position:fixed; left:0; right:0; bottom:calc(var(--nav-h) + 16px + var(--safe-b)); z-index:80;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{background:var(--brand); color:#fff; padding:11px 16px; border-radius:var(--r); font-size:14px;
  font-weight:600; box-shadow:var(--shadow-pop); transform:translateY(12px); opacity:0;
  transition:all .22s ease; max-width:calc(100vw - 32px)}
.toast.show{transform:translateY(0); opacity:1}
.toast.ok{background:var(--ok)} .toast.err{background:var(--crit)}
.toast.has-act{display:flex; align-items:center; gap:14px; pointer-events:auto; padding:8px 8px 8px 16px}
.toast-act{border:0; background:rgba(255,255,255,.18); color:#fff; font:inherit; font-weight:700;
  padding:7px 12px; border-radius:9px; cursor:pointer}
.toast-act:hover{background:rgba(255,255,255,.28)}

/* Utilitaires */
.muted{color:var(--muted)} .faint{color:var(--faint)}
.mono{font-family:var(--mono)}
.hidden{display:none!important}
.stack{display:flex; flex-direction:column; gap:10px}
.rowflex{display:flex; align-items:center; gap:10px}
.tnum{font-variant-numeric:tabular-nums}

/* ── Sélecteur segmenté (thème, statuts…) — global ──────────────────────────*/
.ed-seg{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:2px; gap:2px}
.ed-seg button{flex:1; border:none; background:transparent; color:var(--muted); padding:8px 12px; border-radius:8px;
  font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap}
.ed-seg button.on{background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm)}
.ed-seg button:hover:not(.on){color:var(--ink)}

/* ── Prestations (catalogue + picker) ───────────────────────────────────────*/
.presta-list{display:flex; flex-direction:column; gap:6px}
.presta-row{display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.presta-row b{flex:1; font-weight:600; font-size:14.5px}
.presta-ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none}
.icon-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:8px}
.icon-opt{display:grid; place-items:center; height:46px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--muted); cursor:pointer}
.icon-opt:hover{background:var(--surface-2); color:var(--ink)}
.icon-opt.sel{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.color-row{display:flex; gap:8px; flex-wrap:wrap}
.color-opt{width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer}
.color-opt.sel{border-color:var(--ink); box-shadow:0 0 0 2px var(--surface) inset}

/* ── Prestations dans l'éditeur d'événement ─────────────────────────────────*/
.presta-phase{margin-bottom:10px}
.presta-phase-h{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:650; color:var(--muted); margin-bottom:7px}
.presta-phase-h .day{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}
.presta-chips{display:flex; flex-wrap:wrap; gap:7px}
.presta-chip{display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); cursor:pointer; font-size:13px; font-weight:600}
.presta-chip:hover{background:var(--surface-2)}
.presta-chip.on{color:#fff; border-color:transparent}
.presta-chip svg{width:15px; height:15px}

/* ── Prestations affichées dans la liste agenda ─────────────────────────────*/
.agenda-presta{display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px}
.agenda-presta .pp{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  padding:2px 7px; border-radius:999px}
.agenda-presta .pp svg{width:13px; height:13px}
.agenda-phase-tag{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; background:var(--surface-2); color:var(--muted); align-self:center}

/* ── Message de demande (texte intégral du formulaire) ──────────────────────*/
.req-msg{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; margin:0 0 10px}
.req-msg-lbl{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.req-msg p{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink)}

/* ── Contenu (articles) dans l'éditeur ──────────────────────────────────────*/
.art-quick{display:flex; flex-direction:column; gap:10px; margin-bottom:10px}
.art-fam{display:flex; flex-wrap:wrap; gap:6px}
.art-fam-lbl{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); width:100%; margin-bottom:2px}
.art-add-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; font-size:12.5px; font-weight:600}
.art-add-chip:hover{background:var(--c,var(--brand)); color:#fff; border-color:transparent}
.art-add-chip svg{width:14px; height:14px; color:var(--c)}
.art-add-chip:hover svg{color:#fff}
.art-lines{display:flex; flex-direction:column; gap:8px; margin-bottom:8px}
.art-line{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.art-ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none}
.art-line input{width:auto; padding:8px 10px; margin:0}
.art-line .art-label{flex:1 1 140px; min-width:110px; font-weight:600}
.art-line .art-qty{width:58px; flex:none; text-align:center}
.art-line .art-unit{width:66px; flex:none}
.art-line .art-del{flex:none}
.art-line .art-note{flex:1 1 100%; font-size:13px; color:var(--muted)}

/* Résumé du contenu dans la liste agenda */
.agenda-articles{margin-top:5px; display:flex; flex-wrap:wrap; gap:4px 6px; font-size:12px; color:var(--muted)}
.agenda-articles .aa{display:inline-flex; align-items:center; gap:4px}
.agenda-articles .aa b{color:var(--ink); font-weight:600}

/* ── Anti-double-booking : alertes de disponibilité ─────────────────────────*/
.art-avail{display:flex; flex-direction:column; gap:6px; margin:2px 0 10px}
.art-avail[hidden]{display:none}
.avail-warn{display:flex; gap:8px; align-items:flex-start; padding:9px 11px; border-radius:var(--r);
  background:var(--crit-soft); color:var(--crit); font-size:12.5px; line-height:1.45}
.avail-warn svg{flex:none; margin-top:1px}
.avail-warn b{color:var(--crit)}
.avail-warn .muted{color:var(--crit); opacity:.85}
.art-line.conflict{border-color:var(--crit); background:var(--crit-soft)}
.art-line.conflict .art-ic{outline:2px solid var(--crit); outline-offset:1px}

/* ── Feuille de tournée ─────────────────────────────────────────────────────*/
.tournee-nav{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.tournee-date{font-family:var(--serif); font-weight:600; font-size:1.05rem; text-transform:capitalize}
.tournee-h{font-family:var(--serif); font-weight:600; margin:22px 2px 10px; display:flex; align-items:center; gap:8px}
.tournee-h svg{color:var(--accent)}
.tournee-load{margin-bottom:16px; background:var(--brand-tint)}
.load-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.load-item{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px}
.load-item b{flex:1; font-size:13.5px; font-weight:600}
.load-qty{font-family:var(--mono); font-weight:700; color:var(--accent); font-size:13px; white-space:nowrap}

/* Badge de disponibilité par ligne (matériel loué) */
.art-avail-badge{font-family:var(--mono); font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; flex:none; margin-left:auto; white-space:nowrap}
.art-avail-badge.ok{background:var(--ok-soft); color:var(--ok)}
.art-avail-badge.bad{background:var(--crit-soft); color:var(--crit)}

/* ── Onglets Réglages ───────────────────────────────────────────────────────*/
.settings-tabs{display:flex; gap:2px; overflow-x:auto; margin-bottom:18px; border-bottom:1px solid var(--line)}
.stab{display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border:none; background:none; color:var(--muted);
  font-weight:600; font-size:14px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; margin-bottom:-1px}
.stab:hover{color:var(--ink)}
.stab.active{color:var(--accent); border-bottom-color:var(--accent)}
.stab svg{opacity:.9}
.tab-panel{display:none}
.tab-panel.active{display:block; animation:tabIn .18s ease}
@keyframes tabIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.tab-panel.active{animation:none}}

/* ── Recherche globale ──────────────────────────────────────────────────────*/
.side-search{display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); color:var(--faint);
  font-size:13.5px; cursor:pointer; text-align:left}
.side-search:hover{background:var(--surface-3); color:var(--muted)}
.side-search span{flex:1}
.search-overlay{position:fixed; inset:0; z-index:90; background:rgba(10,13,18,.42);
  display:flex; justify-content:center; align-items:flex-start; padding:8vh 16px 16px}
.search-overlay[hidden]{display:none}
.search-box{width:100%; max-width:600px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--shadow-pop); overflow:hidden; max-height:80vh; display:flex; flex-direction:column}
.search-input{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--faint)}
.search-input input{border:none; background:none; padding:4px 0; font-size:16px; flex:1; color:var(--ink); outline:none}
.search-input input:focus{box-shadow:none}
.search-results{overflow-y:auto; padding:6px}
.sr-group{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:8px 10px 4px}
.sr-item{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-s); color:inherit; text-decoration:none}
.sr-item:hover,.sr-item.sel{background:var(--surface-2)}
.sr-ic{width:32px; height:32px; border-radius:9px; background:var(--brand-tint); color:var(--brand-soft); display:grid; place-items:center; flex:none}
.sr-body{display:flex; flex-direction:column; min-width:0}
.sr-body b{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr-body small{color:var(--faint); font-size:12px}
.sr-empty{padding:20px; text-align:center; color:var(--faint); font-size:14px}

/* ── Stock · onglet Inventaire ──────────────────────────────────────────────*/
.inv-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-bottom:16px}
.inv-kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; box-shadow:var(--shadow-sm)}
.inv-kpi b{display:block; font-family:var(--mono); font-size:22px; font-weight:700; line-height:1.15}
.inv-kpi small{display:block; margin-top:2px; font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em}
.inv-kpi.alert{background:var(--crit-soft); border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.inv-kpi.alert b{color:var(--crit)}

.inv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:12px}
.inv-grid:empty{display:none}
.inv-card{display:flex; flex-direction:column; gap:11px; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-sm)}
.inv-card.over{border-color:var(--crit)}
.inv-top{display:flex; align-items:center; gap:10px}
.inv-top .art-ic{width:34px; height:34px}
.inv-top .art-ic svg{width:18px; height:18px}
.inv-top .iconbtn{width:32px; height:32px}
.inv-name{flex:1; min-width:0}
.inv-name b{display:block; font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inv-name small{color:var(--faint); font-size:11.5px}
.inv-big{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.inv-big b{font-family:var(--mono); font-size:30px; font-weight:700; line-height:1; color:var(--ok)}
.inv-big span{color:var(--muted); font-size:12.5px}
.inv-card.full .inv-big b{color:var(--warn)}
.inv-card.over .inv-big b{color:var(--crit)}
.inv-bar{height:7px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.inv-bar i{display:block; height:100%; border-radius:999px; background:var(--brand-soft); transition:width .25s ease}
.inv-card.full .inv-bar i{background:var(--warn)}
.inv-card.over .inv-bar i{background:var(--crit)}
.inv-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center}
.inv-stats > div{background:var(--surface-2); border-radius:var(--r-s); padding:6px 4px}
.inv-stats b{display:block; font-family:var(--mono); font-size:15px; font-weight:700}
.inv-stats small{font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.inv-stats > div.bad{background:var(--crit-soft)}
.inv-stats > div.bad b{color:var(--crit)}
.inv-step{display:flex; align-items:center; gap:6px}
.inv-step button{width:36px; height:36px; flex:none; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); color:var(--ink); font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center}
.inv-step button:hover{background:var(--surface-3)}
.inv-step input{flex:1; min-width:0; width:100%; margin:0; padding:8px 6px; text-align:center;
  font-family:var(--mono); font-weight:700; font-size:15px}
.inv-next{display:flex; align-items:center; gap:6px; padding-top:9px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inv-next svg{flex:none}
.inv-next b{font-family:var(--mono); color:var(--accent)}
a.inv-next:hover{color:var(--ink)}
.inv-next.bad{color:var(--crit)}
.inv-h{margin:24px 2px 4px; font-family:var(--serif); font-weight:600}

/* ── Planning du stock (heat-calendar) ──────────────────────────────────────*/
.stock-legend{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; font-size:12.5px; color:var(--muted)}
.stock-legend span{display:inline-flex; align-items:center; gap:6px}
.stock-legend .lg{width:12px; height:12px; border-radius:4px; display:inline-block}
.lg.free{background:var(--surface-3); border:1px solid var(--line)}
.lg.part{background:var(--warn-soft); border:1px solid var(--warn)}
.lg.full{background:var(--ok-soft); border:1px solid var(--ok)}
.lg.over{background:var(--crit); border:1px solid var(--crit)}
.stock-card{margin-bottom:14px}
.stock-head{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.heat-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:5px}
.heat-dow span{text-align:center; font-family:var(--mono); font-size:10px; color:var(--faint)}
.heat-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.heat-cell{aspect-ratio:1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--muted); background:var(--surface-3); border:1px solid var(--line); position:relative; min-height:34px}
.heat-cell .hm{font-size:8.5px; font-family:var(--mono); text-transform:uppercase; color:var(--faint); line-height:1}
.heat-cell.part{background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 40%,transparent); color:var(--warn)}
.heat-cell.full{background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 45%,transparent); color:var(--ok)}
.heat-cell.over{background:var(--crit); border-color:var(--crit); color:#fff}
.heat-cell.today{outline:2px solid var(--accent); outline-offset:1px}
.stock-sorties{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
.sortie{display:flex; align-items:center; gap:11px; padding:8px 6px; border-radius:var(--r-s); color:inherit}
.sortie:hover{background:var(--surface-2)}
.sortie-qty{font-family:var(--mono); font-weight:700; color:var(--accent); font-size:13px; min-width:64px}
.sortie-body{flex:1; min-width:0; display:flex; flex-direction:column}
.sortie-body b{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sortie-body small{color:var(--faint); font-size:12px}

/* Filet de sécurité : aucun débordement horizontal du contenu */
.content{overflow-x:clip}
.content > *{max-width:100%}

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — tableau de bord (KPI · accès rapide · récap)
   L'agenda vit sur /agenda ; cette page est la porte d'entrée du SaaS.
   ══════════════════════════════════════════════════════════════════════════ */
.dash-hero{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:4px 0 20px;
}
.dash-eyebrow{
  margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint);
}
.dash-hero h1{margin:0; font-size:26px; line-height:1.15; letter-spacing:-.02em}
.dash-sub{margin:6px 0 0; color:var(--muted); font-size:14px}
.dash-sub b{color:var(--ink)}
.dash-hero-act{display:flex; gap:8px; flex-wrap:wrap}

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.kpi-grid{
  display:grid; gap:12px; margin-bottom:24px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.kpi{
  position:relative; display:block; padding:14px 15px 13px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  color:inherit; text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.kpi:hover{border-color:var(--line-strong); transform:translateY(-1px); box-shadow:var(--shadow)}
.kpi-ic{
  position:absolute; top:13px; right:13px; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; background:var(--surface-2); color:var(--muted);
}
.kpi-lbl{display:block; font-size:12.5px; font-weight:600; color:var(--muted); padding-right:38px}
.kpi-val{display:block; margin:6px 0 2px; font-size:30px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kpi-foot{display:block; font-size:11.5px; color:var(--faint)}
.kpi.accent .kpi-ic{background:var(--accent-soft); color:var(--accent-ink)}
.kpi.accent .kpi-val{color:var(--accent-ink)}
.kpi.warn .kpi-ic{background:var(--warn-soft); color:var(--warn)}
.kpi.warn .kpi-val{color:var(--warn)}
.trend{font-weight:600}
.trend.up{color:var(--ok)} .trend.down{color:var(--crit)} .trend.flat{color:var(--faint)}

/* ── Blocs ───────────────────────────────────────────────────────────────── */
.dash-block{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:16px 16px 14px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.dash-h{
  display:flex; align-items:center; gap:7px; margin-bottom:12px;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.dash-h svg{color:var(--faint); flex:none}
.dash-more{
  margin-left:auto; display:inline-flex; align-items:center; gap:3px;
  font-size:11.5px; font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--accent-ink); text-decoration:none;
}
.dash-cols{display:grid; gap:16px; grid-template-columns:1.15fr .85fr; align-items:start}

/* ── Grille d'outils ─────────────────────────────────────────────────────── */
.tool-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tool{
  display:block; padding:13px 13px 12px; border-radius:var(--r); text-decoration:none; color:inherit;
  background:var(--surface-2); border:1px solid transparent; transition:background .15s, border-color .15s, transform .15s;
}
.tool:hover{background:var(--surface); border-color:var(--line-strong); transform:translateY(-1px)}
.tool-ic{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--brand-tint); color:var(--brand); margin-bottom:8px;
}
.tool b{display:block; font-size:14px}
.tool small{display:block; margin-top:1px; color:var(--faint); font-size:11.5px}

/* ── Prochains événements ────────────────────────────────────────────────── */
.dash-ev,.dash-tour{
  display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:var(--r-s);
  text-decoration:none; color:inherit; transition:background .12s;
}
.dash-ev:hover,.dash-tour:hover{background:var(--surface-2)}
.dash-ev + .dash-ev{border-top:1px solid var(--line)}
.dash-ev-date{
  flex:none; width:44px; text-align:center; padding:5px 0; border-radius:9px;
  background:color-mix(in srgb, var(--c) 12%, transparent);
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.dash-ev-date b{display:block; font-size:17px; line-height:1; font-variant-numeric:tabular-nums}
.dash-ev-date small{display:block; font-size:9.5px; font-weight:700; letter-spacing:.04em; opacity:.85}
.dash-ev-body{min-width:0; flex:1}
.dash-ev-body b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dash-ev-body small{display:block; color:var(--faint); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dash-ev-ok{flex:none; color:var(--ok)}
.dash-tour{background:var(--surface-2); margin-top:2px}
.dash-tour svg:last-child{color:var(--faint); flex:none}

/* ── Charge de la semaine ────────────────────────────────────────────────── */
.dash-week{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end}
.dash-day{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0 5px;
  border-radius:var(--r-s); text-decoration:none; color:var(--faint); transition:background .12s;
}
.dash-day:hover{background:var(--surface-2)}
.dash-day em{
  display:block; width:16px; border-radius:5px; background:var(--surface-3);
  transition:background .15s;
}
.dash-day.has em{background:var(--accent)}
.dash-day b{font-size:11.5px; color:var(--ink); min-height:14px; font-variant-numeric:tabular-nums}
.dash-day small{font-size:10px; letter-spacing:.02em}

@media (max-width:900px){
  .dash-cols{grid-template-columns:1fr}
  .dash-hero{padding-bottom:16px}
  .dash-hero h1{font-size:22px}
  .dash-hero-act{width:100%}
  .dash-hero-act .btn{flex:1; justify-content:center}
  .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .kpi-val{font-size:25px}
}


/* ── Panneau d'installation (même principe que l'Atelier) ───────────────────*/
.ig{position:fixed; inset:0; z-index:1000; overflow-y:auto; overscroll-behavior:contain; color:var(--ink);
  background:radial-gradient(120% 70% at 50% 0%, var(--brand-tint), var(--ground) 70%);
  padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));
  display:grid; place-items:start center}
.ig-in{width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center}
.ig-icon{width:76px; height:76px; border-radius:20px; box-shadow:0 10px 30px rgba(20,50,35,.25)}
.ig h1{font-family:var(--serif); font-weight:600; font-size:26px; margin:0; display:inline-flex; align-items:center; gap:8px}
.ig-ok{color:var(--ok); display:inline-grid}
.ig-sub{color:var(--muted); font-size:15px; line-height:1.45; max-width:36ch; margin:0}
.ig-why{list-style:none; margin:4px 0 0; padding:0; width:100%; display:flex; flex-direction:column; gap:8px; text-align:left}
.ig-why li{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); font-size:14px; line-height:1.35}
.ig-ic{flex:none; width:34px; height:34px; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center}
.ig-act{width:100%; display:flex; flex-direction:column; gap:10px}
.ig-big{width:100%; min-height:54px; font-size:16.5px; font-weight:700; border-radius:14px; justify-content:center; gap:8px}
.ig-steps{list-style:none; margin:0; padding:14px; width:100%; display:flex; flex-direction:column; gap:12px; text-align:left;
  border:1.5px solid color-mix(in srgb,var(--brand) 35%,transparent); border-radius:14px; background:var(--surface)}
.ig-steps li{display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.45}
.ig-steps .n{flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center;
  font:700 13px var(--mono); margin-top:1px}
.ig kbd{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 5px;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--surface-2); vertical-align:-6px;
  font:600 12px var(--mono); color:var(--brand)}
.ig-note{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; background:var(--surface);
  border:1px solid var(--line); text-align:left; font-size:14.5px; line-height:1.45; width:100%; margin:0}
.ig-note > svg{flex:none; color:var(--brand); margin-top:2px}
.ig-later{margin-top:4px; border:0; background:none; color:var(--muted); font:inherit; font-size:13.5px; text-decoration:underline;
  text-underline-offset:3px; padding:12px; cursor:pointer}
.ig-later:hover{color:var(--ink)}
@media (min-height:760px){ .ig{place-items:center} }

/* ── Équipe : qui a fait quoi ───────────────────────────────────────────────*/
.tm-av{flex:none; width:34px; height:34px; border-radius:50%; background:var(--c,var(--brand)); color:#fff;
  display:inline-grid; place-items:center; font:700 12.5px/1 var(--sans); letter-spacing:.02em}
.tm-av.lg{width:44px; height:44px; border-radius:14px; font-size:15px}
.tm-av.xs{width:20px; height:20px; font-size:9px}
.tm-profile{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.tm-colors{display:flex; gap:8px; flex-wrap:wrap}
.tm-sw{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer}
.tm-sw.sel{border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--surface)}
.tm-list{display:flex; flex-direction:column; gap:4px}
.tm-row{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tm-row:last-child{border-bottom:none}
.tm-row.off{opacity:.55}
.tm-who{flex:1; min-width:160px; display:flex; flex-direction:column}
.tm-who b{font-size:14.5px}
.tm-who small{color:var(--muted); font-size:12.5px}
.tm-me{font:600 11px/1 var(--sans); color:var(--brand); background:var(--brand-tint); padding:3px 6px; border-radius:99px; margin-left:4px}
.tm-act{display:flex; gap:6px; flex-wrap:wrap}
.tm-linkbox p{font-size:14px; color:var(--muted); line-height:1.45}
.tm-linkbox input{width:100%; font-family:var(--mono); font-size:12.5px}
.tm-linkact{display:flex; gap:8px; margin-top:12px}
.tm-linkact .btn{flex:1}
.tm-toggle{gap:12px; cursor:pointer}
input.switch{appearance:none; -webkit-appearance:none; flex:none; width:46px; height:28px; border-radius:99px; background:var(--line-strong);
  position:relative; cursor:pointer; transition:background .18s; margin:0}
input.switch::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s}
input.switch:checked{background:var(--brand)}
input.switch:checked::after{transform:translateX(18px)}
/* Historique d'un événement (éditeur) */
.ed-trace{margin-top:14px; padding:10px 12px; border-radius:12px; background:var(--surface-2); font-size:13px; color:var(--muted)}
.ed-trace .tr-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ed-trace .tr-toggle{border:0; background:none; color:var(--brand); font:700 13px/1 var(--sans); padding:4px 0; cursor:pointer; margin-left:auto}
.ed-trace ul{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.ed-trace li{display:flex; align-items:flex-start; gap:8px; line-height:1.35}
.ed-trace li b{color:var(--ink)}
.ed-trace li time{display:block; font-size:11.5px; color:var(--faint)}

/* ── Bandeau « rappels non actifs sur cet appareil » ────────────────────────*/
.push-nudge{display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px; margin:0 0 12px;
  border-radius:14px; background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.push-nudge[hidden]{display:none}
.pn-ic{flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--surface); color:var(--warn)}
.pn-txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.pn-txt b{font-size:14px; color:var(--ink)}
.pn-txt small{font-size:12.5px; color:var(--muted)}
.pn-go{flex:none; border:0; border-radius:10px; background:var(--brand); color:#fff; font:700 13.5px/1 var(--sans); padding:10px 13px; cursor:pointer}
.pn-x{flex:none; border:0; background:transparent; color:var(--muted); width:32px; height:32px; border-radius:9px; display:grid; place-items:center; cursor:pointer}

/* ── Réglages › Notifications : santé des rappels ───────────────────────────*/
.nh-status{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--surface-2); font-size:13.5px}
.nh-status .nh-dot{flex:none; width:10px; height:10px; border-radius:50%; background:var(--faint)}
.nh-status.ok{background:var(--ok-soft)} .nh-status.ok .nh-dot{background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent)}
.nh-status.bad{background:var(--crit-soft); color:var(--crit)} .nh-status.bad .nh-dot{background:var(--crit)}
.nh-sub{font-size:11.5px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; margin:14px 2px 6px}
.nh-devices{display:flex; flex-direction:column; gap:6px}
.nh-dev{position:relative; display:flex; flex-direction:column; padding:9px 44px 9px 12px; border:1px solid var(--line); border-radius:12px}
.nh-dev b{font-size:14px} .nh-dev small{font-size:12px; color:var(--muted)}
.nh-dev.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:var(--warn-soft)}
.nh-forget{position:absolute; top:6px; right:6px; width:32px; height:32px; color:var(--muted)}
.nh-none{font-size:13px; color:var(--muted); margin:4px 2px}
.nh-log{margin-top:14px} .nh-log summary{cursor:pointer; font-weight:700; font-size:13.5px; color:var(--brand)}
.nh-l{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.nh-l:last-child{border-bottom:none}
.nh-l .k{flex:none; width:64px; font-size:11px; font-weight:700; color:var(--faint); text-transform:uppercase; padding-top:2px}
.nh-l .t{flex:1; min-width:0; display:flex; flex-direction:column} .nh-l small{color:var(--muted); font-size:12px}

/* Suggestions d'adresses (addr.js, Base Adresse Nationale) */
.ia-addr{position:relative}
.ia-addr-sug{position:absolute; z-index:80; left:0; right:0; top:calc(100% + 4px); max-height:260px; overflow-y:auto; padding:4px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); box-shadow:var(--shadow-pop)}
.ia-addr-sug[hidden]{display:none}
.ia-addr-it{padding:9px 10px; border-radius:9px; font-size:14px; line-height:1.3; cursor:pointer}
.ia-addr-it small{display:block; color:var(--muted); font-size:12px}
.ia-addr-it:hover,.ia-addr-it.on{background:var(--surface-2)}

/* ── Gérants : les rappels ne partent plus (tâche planifiée arrêtée) ─────────────*/
.ia-stale{display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; padding:12px 14px; border-radius:var(--r); background:var(--crit-soft); color:var(--crit); font-size:14px; line-height:1.45; text-decoration:none}
.ia-stale svg{flex:none; margin-top:1px}