/* =========================================
   Sirius V2 — Deep Galaxy (clean)
   Dépend de: assets/css/tokens.css
   ========================================= */

/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

body.dg-body{
  color:var(--dg-text,#e9ecf8);
  background:var(--dg-bg,#0b0f19);
  font:0.8rem/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body.dg-body::after{
  content:"";position:fixed;inset:-2px;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(1600px 1100px at 50% 120%,#0a1030 0%,transparent 70%),
    radial-gradient(1400px 900px at 15% -10%,#0f1b4a 0%,transparent 60%),
    radial-gradient(1100px 850px at 120% 0%,#1a0f3a 0%,transparent 65%),
    linear-gradient(180deg,var(--dg-bg-2,#0a0e1c),var(--dg-bg,#0b0f19));
  background-repeat:no-repeat;background-size:cover;background-position:50% 50%;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.text-muted{color:var(--dg-muted,#9aa3c7)}

/* Header minimal (collant) */
.dg-header{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(180deg,rgba(6,10,28,.7),rgba(6,10,28,.35));
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--dg-stroke,rgba(255,255,255,.16));
}
.header-row{min-height:64px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#eaf2ff}
.brand .brand-mark{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:conic-gradient(from 210deg,#6b5bff,#5b7cff,#2f6df6);box-shadow:0 0 28px #7b5cff33;
}
.brand .v2{opacity:.85;margin-left:6px;font-weight:700;letter-spacing:.4px}
.dg-nav ul{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.nav-link{
  display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  color:#eaf2ff;border:1px solid transparent;transition:.2s background,.06s transform,.2s border-color
}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link:active{transform:translateY(1px)}
.nav-link.active{
  background:linear-gradient(180deg,rgba(91,124,255,.22),rgba(107,44,245,.18));
  border-color:rgba(91,124,255,.35)
}
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:#eaf2ff;border:1px solid var(--dg-stroke);background:rgba(255,255,255,.06)}
.dg-main{padding:28px 0 48px}
.dg-footer{background:var(--dg-panel-2,#0f1430);border-top:1px solid var(--dg-stroke);color:color-mix(in oklab,#e9ecf8 90%,#000)}
.dg-footer .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
@media (max-width:920px){
  .nav-toggle{display:inline-flex}
  .dg-nav{background:color-mix(in oklab,var(--dg-bg) 96%,#105);
    border:1px solid var(--dg-stroke);border-radius:14px;box-shadow:0 10px 30px -16px #000a;padding:8px;display:none}
  .dg-nav.open{display:block}
  .dg-nav ul{flex-direction:column;align-items:stretch}
  .nav-link{padding:12px}
}

/* Panels / tiles */
.panel,.tile{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
  border:1px solid var(--dg-stroke,rgba(255,255,255,.16));
  border-radius:var(--dg-radius,20px);padding:1rem;position:relative;overflow:hidden;
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--dg-shadow,0 18px 60px -30px #000000ee),inset 0 1px 0 rgba(255,255,255,.08);
}
.panel+.panel,.tile+.tile{margin-top:16px}
.panel>h2,.tile-title{margin:.25rem 0 1rem;font-size:1.12rem;font-weight:800;display:flex;align-items:center;gap:.55rem;color:#eaf2ff}
.panel>h2::after{content:"";flex:1;height:1px;margin-left:.75rem;background:linear-gradient(90deg,rgba(159,176,255,.35),transparent)}

/* Cap-left (départements) */
.dept--redaction{--cap:var(--dept-redaction,#2aa0ff)}
.dept--antenne{--cap:var(--dept-antenne,#8b5cf6)}
.dept--studios{--cap:var(--dept-studios,#ef4444)}
.dept--magazines{--cap:var(--dept-magazines,#facc15)}
.dept--direction{--cap:var(--dept-direction,#d4af37)}
.dept--web{--cap:var(--dept-web,#7c43ff)}
.dept--general{--cap:var(--dept-general,#c0c7d1)}
.cap-left{position:relative;border-left:3px solid var(--cap);padding-left:18px;border-radius:12px}
.cap-left[data-dept]::after{
  content:attr(data-dept);position:absolute;left:10px;top:-10px;transform:translateY(-6px);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);padding:.12rem .4rem;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;
  backdrop-filter:blur(6px) saturate(140%);color:#dbe6ff
}
.cap-left:hover[data-dept]::after{opacity:1;transform:translateY(-10px)}

/* Buttons */
/*.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;
  border:1px solid var(--dg-stroke);background:rgba(255,255,255,.06);color:#eaf2ff;cursor:pointer;
  transition:.25s transform,.25s box-shadow,.25s background,.25s border-color;
  box-shadow:0 8px 24px -16px #000a,inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(160%)
}
.btn:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);box-shadow:0 10px 28px -16px #000c,0 0 0 2px #ffffff12 inset}
.btn:active{transform:translateY(0)}
.btn-save{background:linear-gradient(180deg,color-mix(in oklab,var(--dg-primary) 24%,transparent),transparent);border-color:color-mix(in oklab,var(--dg-primary) 45%,transparent);color:#fff}
.btn-validate{background:linear-gradient(180deg,color-mix(in oklab,var(--dg-success) 24%,transparent),transparent);border-color:color-mix(in oklab,var(--dg-success) 45%,transparent);color:#fff}
.btn-cancel{background:linear-gradient(180deg,#ffffff12,#ffffff08);border-color:var(--dg-stroke)}
.btn-delete{background:linear-gradient(180deg,color-mix(in oklab,var(--dg-danger) 24%,transparent),transparent);border-color:color-mix(in oklab,var(--dg-danger) 50%,transparent);color:#fff}
.btn-icon{width:42px;height:42px;padding:0;border-radius:14px;display:inline-grid;place-items:center;border:1px solid var(--dg-stroke);background:rgba(255,255,255,.06);font-size:0}
.btn-icon i{font-size:1.1rem}
.btn-icon:hover{background:rgba(255,255,255,.15);transform:translateY(-2px);box-shadow:0 10px 28px -16px #000c,0 0 0 2px #ffffff12 inset}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap}*/

/* --- PATCH: btn-icon contour & état --- */
.btn-icon{
  --_r: 12px;
  --_b: 1.5px;
  display:inline-grid; place-items:center;
  width:auto; min-width:36px; height:36px;
  padding:.35rem; border-radius:var(--_r);
  border:var(--_b) solid var(--ui-stroke);
  color:#eaf2ff; background: var(--ui-glass);
  backdrop-filter:saturate(120%) blur(var(--ui-blur));
  -webkit-backdrop-filter:saturate(120%) blur(var(--ui-blur));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  transition:transform .12s ease, box-shadow .15s ease, border-color .2s ease, background .2s ease;
}
.btn-icon:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.28); }
.btn-icon:active{ transform:none; box-shadow:0 4px 10px rgba(0,0,0,.22); }

/* Bouton – base affinée */
.btn{
  font-weight:600;
  font-size:.98rem;
  line-height:1;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  border:var(--btn-stroke) solid var(--ui-stroke);
  color:#eef3ff;
  background:
    linear-gradient(180deg, var(--ui-inset), rgba(255,255,255,.02)),
    rgba(8,12,28,.35);
  backdrop-filter:saturate(120%) blur(var(--ui-blur));
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--ui-shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .2s ease, background .2s ease;
}
.btn i{ margin-right:.55rem; font-size:1.05em; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.32); }
.btn:active{ transform:translateY(0); box-shadow:0 5px 12px rgba(0,0,0,.28); }

/* Variantes plus “verre” et moins massives */
.btn-save{
  --edge: color-mix(in oklab, var(--pri-2) 55%, transparent);
  border-color: color-mix(in oklab, var(--pri-2) 35%, var(--ui-stroke));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--pri-1) 18%, transparent),
                            color-mix(in oklab, var(--pri-2) 10%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.btn-validate{
  border-color: color-mix(in oklab, var(--ok-2) 35%, var(--ui-stroke));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ok-1) 16%, transparent),
                            color-mix(in oklab, var(--ok-2) 10%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.btn-cancel{
  border-color: rgba(255,255,255,.16);
  color:#e6ecff;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.btn-delete{
  border-color: color-mix(in oklab, var(--err-2) 35%, var(--ui-stroke));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--err-1) 14%, transparent),
                            color-mix(in oklab, var(--err-2) 8%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

/* Taille compacte optionnelle (si tu veux certains boutons encore plus fins) */
.btn--slim{ padding:.45rem .8rem; font-size:.95rem; border-radius:12px; }

/* --- Accordéon description tâche --- */
.item .item-actions{ display:flex; gap:8px; align-items:center; }
.item .btn-toggle-desc i{ transition: transform .18s ease; }
.item .btn-toggle-desc[aria-expanded="true"] i{ transform: rotate(180deg); }

/* garde la bordure couleur, enlève juste le padding supplémentaire */
.listy .item.cap-left { border-left-width:3px; padding-left: 6px; }

/* état masqué → aucun espace résiduel */
.task-desc[hidden]{ display:none !important; }

/* (optionnel) petite transition d’apparition */
.task-desc{ transition: opacity .18s ease; }
.task-desc.reveal{ opacity:1; }
.task-desc.fade{ opacity:.4; }

/* --- Tiroir description (smooth) --- */
.task-desc{
  overflow: hidden;
  margin:.25rem 0 .4rem;   /* marge normale quand ouvert */
}
.task-desc.is-animating{
  transition: height .22s ease, opacity .18s ease, margin .18s ease, padding .18s ease;
}
.task-desc.is-collapsed{
  height:0 !important;
  opacity:0;
  margin:0 !important;
  padding-top:0 !important;
}
/* Chevron qui pivote quand ouvert */
button[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); transition: transform .2s ease; }
button[aria-expanded="false"] .fa-chevron-down { transform: rotate(0deg);    transition: transform .2s ease; }

/* Tabs */
.views-tabs{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:.8rem 0 1.6rem}
.tab-pill{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.08);color:#eaf2ff;font-weight:800;transition:.2s
}
.tab-pill:hover{transform:translateY(-1px);box-shadow:0 8px 20px -12px #000c,0 0 0 2px #ffffff18 inset}
.tab-pill[aria-selected="true"]{background:linear-gradient(180deg,rgba(91,124,255,.28),rgba(107,44,245,.22));box-shadow:0 0 0 2px #ffffff33 inset,0 0 16px #5b7cff55;color:#fff}
.tab-badge{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;
  font-size:.72rem;font-weight:800;color:#0a0f1e;background:linear-gradient(180deg,#ffd29c,#ffb25a);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 6px 14px -8px #0009,inset 0 1px 0 rgba(255,255,255,.35)
}
.view{display:none}.view.active{display:block;animation:fadeIn .24s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.view[hidden] { display: none !important; }
.view.is-visible { display: block; }   /* ou grid/flex selon ta maquette */

/* Agenda — day-cards */
.days{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
@media(max-width:1200px){.days{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.days{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.days{grid-template-columns:repeat(2,1fr)}}
.day-card{
  border:1px solid var(--dg-stroke);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));
  padding:.9rem;display:flex;flex-direction:column;gap:.6rem;backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 12px 36px -24px #000c,inset 0 1px 0 rgba(255,255,255,.07)
}
.day-card .head{display:flex;align-items:center;justify-content:space-between;font-weight:800}
.day-card .list{display:flex;flex-direction:column;gap:.45rem}
.day-card.weekend{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));opacity:.65}
.day-card.weekend .head{color:var(--dg-muted)}

/* Pills (+ arc gauche suivant le rayon) */
/*.pill{
  display:inline-flex;align-items:center;gap:.55rem;padding:.38rem .8rem;border-radius:999px;font-size:.9rem;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.08);backdrop-filter:blur(8px) saturate(150%);
  position:relative;overflow:hidden
}
.pill.arc{padding-left:1rem;border-left:4px solid var(--arc-color,#7c43ff);border-radius:999px}
.dot-mini{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;background:var(--dot,#5b7cff)}
.pill-soft--ok{background:rgba(25,214,143,.12);border-color:rgba(25,214,143,.35)}
.pill-soft--warn{background:rgba(255,183,3,.12);border-color:rgba(255,183,3,.35)}
.pill-soft--danger{background:rgba(255,90,90,.12);border-color:rgba(255,90,90,.35)}*/

/* Pill – base affinée */
.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.95rem; line-height:1;
  padding:var(--pill-pad-y) var(--pill-pad-x);
  border-radius:var(--pill-radius);
  border:var(--pill-stroke) solid var(--ui-stroke);
  background: var(--ui-glass);
  backdrop-filter:saturate(120%) blur(var(--ui-blur));
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}

/* Dot mini plus discrète */
.pill .dot-mini{
  width:8px; height:8px; border-radius:50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 25%, transparent);
}

/* “Soft statuses” plus raffinés */
.pill-soft--ok{
  --t1: color-mix(in oklab, var(--ok-1) 22%, transparent);
  --t2: color-mix(in oklab, var(--ok-2) 16%, transparent);
  border-color: color-mix(in oklab, var(--ok-2) 45%, var(--ui-stroke));
  background: linear-gradient(180deg, var(--t1), var(--t2));
}
.pill-soft--warn{
  --t1: color-mix(in oklab, var(--warn-1) 25%, transparent);
  --t2: color-mix(in oklab, var(--warn-2) 18%, transparent);
  border-color: color-mix(in oklab, var(--warn-2) 45%, var(--ui-stroke));
  background: linear-gradient(180deg, var(--t1), var(--t2));
}
.pill-soft--danger{
  --t1: color-mix(in oklab, var(--err-1) 25%, transparent);
  --t2: color-mix(in oklab, var(--err-2) 18%, transparent);
  border-color: color-mix(in oklab, var(--err-2) 45%, var(--ui-stroke));
  background: linear-gradient(180deg, var(--t1), var(--t2));
}

/* Variante taille mini au besoin */
.pill--slim{ padding:.22rem .55rem; font-size:.9rem; }

/* Progress */
.progress{width:100%;height:10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);overflow:hidden}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--from,#5b7cff),var(--to,#7c43ff));transition:width .35s ease;border-right:1px solid rgba(255,255,255,.35)}
.progress-label{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--dg-muted);margin:.45rem 2px 0}

/* Dots & sectors */
.dot{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.dot.ok{background:#19d68f}.dot.warn{background:#ffb703}.dot.late{background:#ff5a5a}.dot.info{background:#5b7cff}.dot.low { background:#9aa3c7; }
.sector{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:999px;font-size:.75rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.08)}
.sector--redaction{border-left:4px solid var(--dept-redaction)}
.sector--antenne{border-left:4px solid var(--dept-antenne)}
.sector--studios{border-left:4px solid var(--dept-studios)}
.sector--web{border-left:4px solid var(--dept-web)}

/* Avatars */
.avatar{--bg:#3b82f6;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;font-size:.78rem;font-weight:800;color:#0b0f19;background:var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.35)}

/* Listes & table */
.listy{display:flex;flex-direction:column;gap:.6rem}
.item{display:grid;grid-template-columns:22px 1fr auto;gap:.6rem;align-items:center;padding:.6rem .7rem;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
.table{width:100%;border-collapse:collapse;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));border:1px solid var(--dg-stroke);border-radius:14px;overflow:hidden}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
.table tr:last-child td{border-bottom:0}
.table th{color:var(--dg-muted);font-weight:600;font-size:13px}

/* Forms */
.field{display:grid;gap:6px}
.label{font-size:.9rem;color:var(--dg-muted)}
.input,.textarea{
  width:100%;padding:.7rem .9rem;border-radius:12px;border:1px solid var(--dg-stroke,rgba(255,255,255,.16));
  background:linear-gradient(180deg,#0f1533,#121a3a);color:#eaf2ff;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 40px -30px #000a;
}
.input::placeholder,.textarea::placeholder{color:#cfd8ff88}
.input:focus,.textarea:focus{
  border-color:color-mix(in oklab,#5b7cff 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in oklab,#5b7cff 25%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
}
.textarea{min-height:110px;resize:vertical}

/* Toggle ON/OFF */
.toggle{display:inline-flex;align-items:center;gap:.6rem;user-select:none;cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .track{
  position:relative;width:56px;height:32px;border-radius:999px;background:linear-gradient(90deg,#6a1e1e,#923a3a);
  border:1px solid rgba(255,90,90,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:.25s
}
.toggle .thumb{
  position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#eaf2ff,#d8e3ff);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:left .25s ease
}
.toggle.on .track{background:linear-gradient(90deg,#19d68f,#28e6bb);border-color:rgba(25,214,143,.55)}
.toggle.on .thumb{left:27px}

/* Modal (opaque) */
.modal-overlay{position:fixed;inset:0;background:rgba(5,8,18,.62);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:2000}
.modal-overlay.open{display:flex}
.modal{
  width:min(760px,92vw);background:linear-gradient(180deg,rgba(18,24,49,.95),rgba(18,24,49,.92));
  border:1px solid rgba(255,255,255,.2);border-radius:22px;box-shadow:0 28px 120px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;backdrop-filter:blur(6px) saturate(140%);
}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.modal__title{margin:0;font-size:1.05rem}
.modal__body{padding:18px;display:grid;gap:12px}
.modal__actions{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:flex-end;gap:10px}

/* Autocomplete */
.autocomplete{position:relative}
.ac-input{width:100%}
.ac-menu{
  position:absolute;left:0;right:0;bottom:calc(100% + 6px);display:none;max-height:240px;overflow:auto;
  padding:.35rem;background:linear-gradient(180deg,rgba(20,26,56,.98),rgba(18,24,49,.96));
  border:1px solid var(--dg-stroke,rgba(255,255,255,.16));border-radius:12px;box-shadow:0 16px 50px -24px #000d;z-index:1200;
}
.autocomplete.open .ac-menu{display:block}
.ac-item{display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;border-radius:10px;cursor:pointer}
.ac-item:hover,.ac-item[aria-selected="true"]{background:rgba(255,255,255,.09)}
.ac-empty{padding:.6rem .7rem;color:var(--dg-muted);font-size:.9rem}
.autocomplete .avatar{--bg:#9de1ff;width:24px;height:24px;font-size:.72rem}

/* Toast (haut centre) */
.toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:3000;
  display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:14px;min-width:260px;max-width:420px;
  background:linear-gradient(180deg,rgba(18,24,49,.96),rgba(18,24,49,.94));border:1px solid var(--dg-stroke,rgba(255,255,255,.16));
  box-shadow:0 18px 60px -24px #000d,inset 0 1px 0 rgba(255,255,255,.06);color:#eaf2ff;opacity:0;pointer-events:none;transition:.3s
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.toast .dot{width:12px;height:12px;border-radius:50%}
.toast--ok .dot{background:#19d68f}.toast--warn .dot{background:#ffb703}.toast--error .dot{background:#ff5a5a}

/* Badges / tags / KPI / banner */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .55rem;border-radius:999px;font-size:.78rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.08)}
.badge--new{border-color:#8aa0ff66;background:#8aa0ff22}
.badge--ok{border-color:#19d68f66;background:#19d68f22}
.badge--warn{border-color:#ffb70366;background:#ffb70322}
.badge--urgent{border-color:#ff5a5a66;background:#ff5a5a22}
.tag{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .5rem;border-radius:10px;font-size:.78rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
.tag--primary{background:#5b7cff22;border-color:#5b7cff55}
.tag--neutral{background:#ffffff12}
.tag--ghost{background:transparent;border-style:dashed}
.kpi{display:grid;gap:.25rem;padding:1rem;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));border:1px solid var(--dg-stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.kpi .kpi-label{color:var(--dg-muted);font-size:.9rem}.kpi .kpi-value{font-size:1.6rem;font-weight:800}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.banner{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:12px;border:1px solid var(--dg-stroke);background:linear-gradient(180deg,rgba(20,26,56,.9),rgba(18,24,49,.88))}
.banner--ok{border-color:#19d68f55}.banner--warn{border-color:#ffb70355}.banner--danger{border-color:#ff5a5a55}

/* Stepper */
.stepper{display:flex;gap:1.2rem;align-items:flex-start}
.step{display:grid;gap:.35rem;min-width:120px}
.step .dot{width:14px;height:14px;border-radius:50%}
.step .line{width:100%;height:4px;border-radius:999px;background:rgba(255,255,255,.10)}
.step.is-done .dot{background:#19d68f}.step.is-done .line{background:linear-gradient(90deg,#19d68f,#28e6bb)}
.step.is-now .dot{background:#5b7cff}.step.is-now .line{background:linear-gradient(90deg,#5b7cff,#7c43ff)}

/* Subtabs */
.subtabs{display:flex;gap:.4rem;margin:.2rem 0 .8rem}
.subtab{padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);font-weight:700}
.subtab[aria-selected="true"]{background:#5b7cff22;border-color:#5b7cff55}

/* Accordion */
.accordion{border:1px solid var(--dg-stroke);border-radius:14px;overflow:hidden}
.acc-row + .acc-row{border-top:1px solid rgba(255,255,255,.10)}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem .9rem;cursor:pointer;background:rgba(255,255,255,.06)}
.acc-body{display:none;padding:.9rem}
.acc-row.open .acc-body{display:block}

/* Loader */
.loader-galaxy{width:48px;height:48px;position:relative;margin:.4rem auto;filter:drop-shadow(0 0 10px rgba(91,124,255,.35))}
.loader-galaxy::before,.loader-galaxy::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#5b7cff;border-right-color:#27e6c8;animation:galSpin 1.2s linear infinite
}
.loader-galaxy::after{inset:6px;border-top-color:#27e6c8;border-left-color:#5b7cff;animation-duration:1.8s;opacity:.8}
@keyframes galSpin{to{transform:rotate(360deg)}}

/* Handle */
.handle{display:inline-flex;align-items:center;gap:2px;padding:.25rem .35rem;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);cursor:grab}
.handle i{opacity:.8}

/* Popover (viewport-fixed + portal) */
#storybook{overflow:visible}
.popover{
  position:fixed;min-width:160px;background:linear-gradient(180deg,rgba(20,26,56,.98),rgba(18,24,49,.96));
  border:1px solid var(--dg-stroke,rgba(255,255,255,.16));border-radius:12px;box-shadow:0 16px 50px -24px #000d;padding:.35rem;z-index:2200;display:none;transform:translateX(-50%)
}
.popover.open{display:block}
.popover .item{padding:.55rem .65rem;border-radius:10px;display:flex;gap:.55rem;align-items:center;cursor:pointer}
.popover .item:hover{background:rgba(255,255,255,.09)}

/* Checkbox Deep-Galaxy */
.dg-check{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}
.dg-check input{position:absolute;opacity:0;pointer-events:none}
.dg-check .box{
  width:20px;height:20px;border-radius:6px;background:linear-gradient(180deg,#0f1533,#121a3a);
  border:1px solid var(--dg-stroke,rgba(255,255,255,.16));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);display:grid;place-items:center;transition:.2s
}
.dg-check .box i{font-size:.9rem;opacity:0;transform:scale(.6);transition:.18s}
.dg-check input:focus-visible + .box{outline:3px solid color-mix(in oklab,#5b7cff 30%,transparent);outline-offset:2px}
.dg-check input:checked + .box{border-color:rgba(25,214,143,.55);background:linear-gradient(180deg,#19d68f,#28e6bb);box-shadow:0 0 0 2px #0b0f19 inset,0 4px 16px -6px #061}
.dg-check input:checked + .box i{opacity:1;transform:scale(1)}
.dg-check.danger input:checked + .box{border-color:rgba(255,90,90,.6);background:linear-gradient(180deg,#ff6a6a,#ff5a5a);box-shadow:0 0 0 2px #0b0f19 inset,0 4px 16px -6px #600}

/* ListSelect */
.listselect{position:relative}
.ls-control{
  display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .75rem;border-radius:12px;
  background:linear-gradient(180deg,#0f1533,#121a3a);border:1px solid var(--dg-stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);cursor:pointer
}
.ls-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.ls-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:999px;font-size:.78rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}
.ls-chip .x{opacity:.8;cursor:pointer}
.ls-menu{
  position:fixed;display:none;max-height:260px;overflow:auto;z-index:2200;padding:.4rem;
  background:linear-gradient(180deg,rgba(20,26,56,.98),rgba(18,24,49,.96));border:1px solid var(--dg-stroke);border-radius:12px;box-shadow:0 16px 50px -24px #000d
}
.ls-menu.open{display:block}
.ls-item{display:flex;align-items:center;justify-content:space-between;padding:.45rem .55rem;border-radius:10px}
.ls-item:hover{background:rgba(255,255,255,.08)}
.ls-item .meta{color:var(--dg-muted);font-size:.8rem}

/* Datepicker */
.dg-datewrap{position:relative}
.dg-date{cursor:pointer}
.dg-cal{
  position:fixed;display:none;z-index:5000;width:280px;padding:.5rem;color:#eaf2ff;
  background:linear-gradient(180deg,rgba(20,26,56,.98),rgba(18,24,49,.96));border:1px solid var(--dg-stroke,rgba(255,255,255,.16));
  border-radius:12px;box-shadow:0 16px 50px -24px #000d
}
.dg-cal.open{display:block}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:.25rem .35rem;font-weight:800}
.cal-nav{display:flex;gap:.35rem}
.cal-btn{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--dg-stroke,rgba(255,255,255,.16));background:rgba(255,255,255,.06)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-top:.35rem}
.dow{text-align:center;opacity:.65;font-size:.78rem;padding:.25rem 0}
.day{text-align:center;padding:.45rem 0;border-radius:10px;cursor:pointer;border:1px solid transparent}
.day:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.day.muted{opacity:.45}
.day.disabled{opacity:.35;pointer-events:none}
.day.today{outline:2px solid #5b7cff55;outline-offset:2px}
.day.sel{background:linear-gradient(180deg,#5b7cff33,#7c43ff22);border-color:#8aa0ff66}

/* Card */
.card{display:grid;grid-template-columns:80px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(180deg,rgba(20,26,56,.55),rgba(20,26,56,.85))}
.card .cover{width:80px;height:80px;border-radius:10px;overflow:hidden;background:radial-gradient(120% 140% at 30% 10%,#5b7cff44,#27e6c822);display:grid;place-items:center;font-size:28px;color:#eaf2ff;border:1px solid rgba(255,255,255,.12)}
.card .title{font-weight:800;letter-spacing:.2px}
.card .meta{color:#9aa3c7;font-size:.9rem;margin-top:2px}
.card .actions{display:flex;gap:8px}
.card .actions .btn-icon{border:1px solid rgba(255,255,255,.12)}

/* Timeline */
.timeline{--tl-col:20px;--tl-line:calc(var(--tl-col)/2);position:relative;margin:.4rem 0 0 .3rem}
.timeline::before{content:"";position:absolute;left:var(--tl-line);top:0;bottom:0;width:2px;background:linear-gradient(#5b7cff55,#27e6c866);border-radius:2px}
.tl-item{display:grid;grid-template-columns:var(--tl-col) 1fr;align-items:start;gap:8px;padding:8px 8px}
.tl-item .dot{position:relative;margin-top:4px;justify-self:center;width:14px;height:14px;border-radius:50%;background:#0b1020;border:2px solid #5b7cff;box-shadow:0 0 0 3px rgba(91,124,255,.15)}
.tl-item.warn .dot{border-color:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.2)}
.tl-item.error .dot{border-color:#ff5a5a;box-shadow:0 0 0 3px rgba(255,90,90,.22)}
.tl-item .when{grid-column:2;color:#9aa3c7;font-size:.9rem}
.tl-item .what{grid-column:2;font-weight:600}

/* Empty state */
.empty{display:grid;place-items:center;gap:.6rem;text-align:center;padding:28px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;background:linear-gradient(180deg,rgba(20,26,56,.35),rgba(20,26,56,.15))}
.empty .icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(120% 140% at 30% 10%,#5b7cff33,#27e6c822);border:1px solid rgba(255,255,255,.12);font-size:22px;color:#eaf2ff}
.empty .hint{color:#9aa3c7}
.empty.pulse{animation:emptyPulse .6s ease}
@keyframes emptyPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* Modal tabs */
.modal-tabs{display:flex;gap:6px;padding:6px;border-bottom:1px solid rgba(255,255,255,.12)}
.modal-tab{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:10px;padding:6px 10px;font-weight:700;cursor:pointer}
.modal-tab[aria-selected="true"]{background:linear-gradient(180deg,#5b7cff33,#27e6c820);border-color:#7aa2ff88}
.modal-pane[hidden]{display:none}

/* --- PATCH: Safari tweaks pour lisibilité --- */
@supports (-webkit-backdrop-filter: blur(0)) {
  .btn{
    /* fond un peu plus dense côté Safari */
    background:
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
      rgba(10,14,32,.55);
    -webkit-backdrop-filter:saturate(115%) blur(12px);
            backdrop-filter:saturate(115%) blur(12px);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 18px rgba(0,0,0,.28);
  }
  /* variantes colorées légèrement atténuées pour Safari */
  .btn-save{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--pri-1) 90%, transparent),
                              color-mix(in srgb, var(--pri-2) 50%, transparent)),
      rgba(10,14,32,.55);
    border-color: color-mix(in srgb, var(--pri-2) 90%, rgba(255,255,255,.18));
  }
  .btn-validate{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--ok-1) 90%, transparent),
                              color-mix(in srgb, var(--ok-2) 50%, transparent)),
      rgba(10,14,32,.55);
    border-color: color-mix(in srgb, var(--ok-2) 90%, rgba(255,255,255,.18));
  }
  .btn-delete{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--err-1) 90%, transparent),
                              color-mix(in srgb, var(--err-2) 50%, transparent)),
      rgba(10,14,32,.55);
    border-color: color-mix(in srgb, var(--err-2) 90%, rgba(255,255,255,.18));
  }
  .btn-cancel{
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
                rgba(10,14,32,.55);
    border-color: rgba(255,255,255,.2);
  }
}

/* --- PATCH: Pills “arc” avec bordure teinte département --- */
.pill.arc{
  /* si --arc-color-2 existe on la mélange sinon on reste sur --arc-color */
  --_edge: color-mix(in srgb,
            var(--arc-color-2, var(--arc-color)) 90%,
            var(--ui-stroke));
  border-color: var(--_edge);
}

/* --- FIX Safari: small action buttons look too white --- */
.toolbar .btn-icon{
  /* solid deep-galaxy glass (no “milky white”) */
  background-color: rgba(24,30,56,.88) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #eaf2ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.35);
}

.toolbar .btn-icon i{ color: inherit; opacity:.95; }

/* Hover/active – subtle, still readable */
.toolbar .btn-icon:hover{
  background-color: rgba(30,38,76,.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.toolbar .btn-icon:active{ transform: translateY(0); }

/* Extra nudge for iOS/Safari rendering */
@supports (-webkit-touch-callout: none) {
  .toolbar .btn-icon{
    background-color: rgba(22,28,60,.92) !important;
    border-color: rgba(255,255,255,.18) !important;
  }
}

/* ---- Cap-left & Kanban, version tokens ---- */
.task-card{position:relative;border-radius:var(--dg-radius);padding:14px;background:var(--ui-glass);backdrop-filter:blur(var(--ui-blur));box-shadow:var(--ui-shadow);border:1px solid var(--ui-stroke);}
.task-card .cap-left{position:absolute;left:0;top:0;bottom:0;width:6px;border-top-left-radius:var(--dg-radius);border-bottom-left-radius:var(--dg-radius);opacity:.95;}

.dept-redac   { background: linear-gradient(180deg,var(--dept-redaction), var(--pri-2)); }
.dept-ant     { background: linear-gradient(180deg,var(--dept-antenne),  var(--warn-1)); }
.dept-techregie{background: linear-gradient(180deg,var(--err-2),        var(--err-1)); }
.dept-mag     { background: linear-gradient(180deg,var(--warn-2),       #ffd98a); }
.dept-web     { background: linear-gradient(180deg,var(--dept-web),     var(--pri-1)); }
.dept-dir     { background: linear-gradient(180deg,var(--dept-direction),#e6d9a2); }
.dept-gen     { background: linear-gradient(180deg,var(--dept-general), #d8dee9); }

/* Colonnes */
.kanban{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px;}
.kanban-col{background:var(--dg-panel-2);border:1px solid var(--dg-stroke-soft);border-radius:var(--dg-radius);padding:10px;min-height:60vh}
.kanban-col-header{display:flex;justify-content:space-between;align-items:center;margin:6px 6px 10px 6px;color:var(--dg-text);}
.kanban-list{display:flex;flex-direction:column;gap:10px;min-height:40vh}

.task-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.task-title{margin:0;font-size:1rem;color:var(--dg-text);outline:none}
/*.task-desc{color:var(--dg-muted);margin:.25rem 0 .4rem;white-space:pre-wrap;outline:none}*/
.task-desc{
  color:var(--dg-muted);
  margin:.25rem 0 .4rem;
  white-space: pre-line;         /* garde les sauts de ligne, pas les espaces multiples */
  overflow-wrap: anywhere;       /* casse proprement les mots très longs */
  word-break: break-word;        /* sécurité legacy */
}

.pill select,.pill input{background:transparent;border:none;color:inherit;outline:none}
.pill{display:inline-flex;align-items:center;gap:.5rem;border:var(--pill-stroke) solid var(--dg-stroke);border-radius:var(--pill-radius);padding:var(--pill-pad-y) var(--pill-pad-x);color:var(--dg-text);}

.chips.tags{min-height:32px;border:1px dashed var(--dg-stroke);border-radius:12px;padding:.35rem .6rem;color:var(--dg-text)}

.mini-actions{display:flex;gap:8px;}
.mini-btn{border:1px solid var(--dg-stroke);background:var(--dg-panel);padding:6px 8px;border-radius:10px;color:var(--dg-text)}
.mini-btn:hover{background:var(--dg-panel-2)}

.dragging{opacity:.85;transform:scale(.98)}
.toast{position:fixed;bottom:18px;right:18px;background:rgba(20,22,40,.9);padding:.6rem .9rem;border-radius:12px;border:1px solid var(--dg-stroke)}
.toast.error{background:rgba(80,20,20,.9);}

@media (max-width: 980px){ .kanban{grid-template-columns:1fr} }

.panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: stretch; /* 🔥 garantit la même hauteur */
}

.panels-row .panel {
  margin-top: 0; /* enlève la marge verticale qui casse l’alignement */
}

/* Row of two panels */
.panel-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top: 20px;
  align-items:stretch;
}

/* Kill the vertical margin that misaligns the second column */
.panel-row > .panel{ margin-top:0 !important; }

/* Mobile: stack nicely */
@media (max-width:1100px){
  .panel-row{ grid-template-columns:1fr; }
}

/* Pills Département (utilisent les tokens de couleur) */
.pill-dept {
  display: inline-block;
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: var(--pill-radius);
  border: var(--pill-stroke) solid var(--ui-stroke);
  background: var(--ui-glass);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--dg-text);
  margin-right: .4rem;
  //margin-top: .3rem;
}

/* Variantes par département */
.pill-redaction { border-color: var(--dept-redaction); color: var(--dept-redaction); }
.pill-antenne   { border-color: var(--dept-antenne);   color: var(--dept-antenne); }
.pill-studios   { border-color: var(--dept-studios);   color: var(--dept-studios); }
.pill-magazines { border-color: var(--dept-magazines); color: var(--dept-magazines); }
.pill-direction { border-color: var(--dept-direction); color: var(--dept-direction); }
.pill-web       { border-color: var(--dept-web);       color: var(--dept-web); }
.pill-pub       { border-color: var(--dept-pub);   color: var(--dept-pub); }
.pill-general   { border-color: var(--dept-general);   color: var(--dept-general); }

/* Effet validation (halo vert) */
.fx-validate {
  animation: fxValidate .7s ease forwards;
}
@keyframes fxValidate {
  0%   { box-shadow: 0 0 0 0 rgba(25,214,143,.55); opacity:1; transform:scale(1); }
  60%  { box-shadow: 0 0 0 16px rgba(25,214,143,.15); transform:scale(1.01); }
  100% { box-shadow: 0 0 0 0 rgba(25,214,143,0); opacity:0; transform:scale(.98); }
}

/* Head metrics (badges titre panel) */
.panel h2 {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.panel h2 .head-metrics { display:flex; gap:.5rem; align-items:center; }
.metric-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .5rem;
  font-size:.85rem; line-height:1; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  user-select:none;
}
.metric-badge.is-overdue { outline: 2px solid rgba(255, 76, 76, .35); }
.metric-badge.is-today   { outline: 2px solid rgba(255, 196, 77, .35); }
.metric-badge.is-total   { opacity:.8; }

/* Portail calendrier — forcer l’ancrage viewport */
.calendar-portal {
  position: fixed !important;   /* clé : fixe au viewport */
  left: 0; top: 0;              /* valeurs réelles injectées par le JS */
  right: auto !important;
  bottom: auto !important;
  z-index: 9999;                /* au-dessus des panels */
  transform: translateZ(0);     /* anti-glitch iOS */
}

/* Évite que l'état "open" réintroduise bottom/right via un autre sélecteur */
.calendar-portal.open {
  right: auto !important;
  bottom: auto !important;
}

/* Le datepicker est parfois rendu avec .dg-cal, parfois .calendar-portal */
.dg-cal,
.calendar-portal{
  position: fixed;
  display: none;
  z-index: 2200;           /* au-dessus de .modal-overlay (2000), mais pas délirant */
  width: 280px;
  padding: .5rem;
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(20,26,56,.98), rgba(18,24,49,.96));
  border: 1px solid var(--dg-stroke, rgba(255,255,255,.16));
  border-radius: 12px;
  box-shadow: 0 16px 50px -24px #000d;
}
.dg-cal.open,
.calendar-portal.open{
  display: block;
}

/* Bottom-sheet (mobile) */
@media (max-width: 480px){
  .sheet { position: fixed; inset: 0; display: none; z-index: 9999; }
  .sheet[aria-hidden="false"]{ display:block; }
  .sheet__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
  .sheet__panel{
    position:absolute; left:0; right:0; bottom:0;
    background:rgba(18,18,28,.98);
    border-top-left-radius:16px; border-top-right-radius:16px;
    padding:12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -10px 30px rgba(0,0,0,.45); backdrop-filter: blur(10px);
    max-height: 70vh; overflow:auto;
  }
  .sheet__grab{ width:44px; height:5px; border-radius:3px; margin:6px auto 10px; background:#666; }
  .sheet .vstack{ display:flex; flex-direction:column; gap:.5rem; }
  .sheet .muted{ opacity:.8; }
  .sheet .notes{ white-space:pre-wrap; line-height:1.35; opacity:.95; }

  /* Cibles tactiles mini-actions / icônes */
  .btn-icon, .wg-handle, .note-flag { min-width:40px; min-height:40px; }
}

/* Petites améliorations accessibilité tactile */
.item.appt-card .line1 .start { font-variant-numeric: tabular-nums; }

/* Mobile nav fermée par défaut */
/*@media (max-width: 1024px) {
  .dg-nav { display: none; }
  .dg-nav.is-open {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;   /* laisse le header visible si besoin */
   /* background: var(--dg-bg, #0b1020);
    padding: 16px;
    z-index: 1000;
  }
  .no-scroll { overflow: hidden; }
}*/

/* --- Burger drawer mobile --- */
@media (max-width: 1024px) {
  /* overlay derrière le menu */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 1000;
  }
  .nav-overlay.visible { opacity: 1; pointer-events: auto; }

  /* panneau de navigation */
  .dg-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 86vw;              /* largeur du drawer */
    max-width: 380px;
    height: 100dvh;
    background: #0b1020;      /* assure le contraste (Deep Galaxy) */
    padding: calc(16px + env(safe-area-inset-top)) 16px 24px 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1001;            /* au-dessus du header, sous les modales */
    display: block;           /* toujours présent, mais hors-écran par défaut */
  }
  .dg-nav.is-open { transform: translateX(0); }

  /* évite le scroll du body quand le menu est ouvert */
  .no-scroll { overflow: hidden; touch-action: none; }
}

/* ============== Off-canvas nav ============== */
.dg-header { position: sticky; top: 0; z-index: 50; }

/* conteneur nav (drawer) */
#dg-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;              /* iOS friendly */
  width: min(82vw, 360px);
  background: rgba(12,16,32,.98);
  backdrop-filter: blur(8px);
  border-left: 1px solid rgba(255,255,255,.06);
  padding: max(16px, env(safe-area-inset-top)) 16px 16px 16px;

  transform: translateX(100%); /* ← caché par défaut */
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s ease, visibility 0s linear .28s;
  z-index: 80;                 /* sous l’overlay */
}

/* contenu liste */
#dg-nav ul { display: flex; flex-direction: column; gap: 10px; }

/* état ouvert */
#dg-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .28s ease;
}

/* overlay plein écran */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 70;
}
.nav-overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }

/* empêcher le scroll quand le menu est ouvert */
.no-scroll { overflow: hidden; height: 100dvh; }

/* Desktop : on repasse en nav horizontale et on masque le burger */
@media (min-width: 1024px) {
  //.nav-toggle { display: none; }
  #dg-nav {
    position: static; height: auto; width: auto; transform: none;
    visibility: visible; pointer-events: auto; background: transparent;
    border: 0; padding: 0; transition: none; z-index: auto;
  }
  .nav-overlay { display: none; }
  
  /* rétablit la nav horizontale en desktop */
  #dg-nav ul{
    display:flex;
    flex-direction: row;   /* clé */
    align-items: center;
    gap: 6px;
  }
  
  /* par sécurité, on force aussi l’aspect ‘barre’ */
  #dg-nav {
    position: static;
    height: auto;
    width: auto;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: 0;
    padding: 0;
  }
}

:root{
  --drawer-w: 320px;
  --header-h: 64px;                 /* sera recalé par JS */
  //--drawer-bg: rgba(30, 40, 85, .88);/* plus clair qu’avant */
  //--drawer-border: rgba(255,255,255,.10);
  //--overlay-bg: rgba(6, 8, 16, .35); /* voile léger */
  --drawer-bg: rgba(20, 26, 56, .90);
  --drawer-border: rgba(255,255,255,.10);
  --overlay-bg: rgba(6, 8, 16, .30); /* voile plus léger */
}

@media (max-width: 1024px){

  /* L’en-tête reste visible */
  .dg-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(120%) blur(8px);
  }

  /* Drawer NAV à droite, sous l’en-tête */
  #dg-nav{
    position: fixed;
    top: var(--header-h);
    right: 0;
    height: calc(100dvh - var(--header-h));
    width: var(--drawer-w);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s, visibility .18s;
    z-index: 999;
    background: var(--drawer-bg);
    border-left: 1px solid var(--drawer-border);
    box-shadow: -20px 0 40px rgba(0,0,0,.25);
    backdrop-filter: saturate(120%) blur(10px);
  }

  /* contenu du menu en colonne */
  #dg-nav ul{
    display:flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }
  
  /* Menu en colonne + logout en bas à droite */
  #dg-nav{
    display: flex;
    flex-direction: column;
  }
  
  .nav-extra{
    margin-top: auto;                 /* colle le bloc tout en bas */
    display: flex;
    justify-content: flex-end;        /* icône à droite */
    padding: 12px 16px 10px;          /* un peu d’air bas/droite */
  }

  /* État ouvert */
  #dg-nav.is-open{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* Overlay cliquable sous l’en-tête */
  .nav-overlay{
    position: fixed;
    inset: var(--header-h) 0 0 0;   /* laisse l’en-tête visible */
    background: var(--overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, visibility .18s;
    z-index: 998;
  }
  .nav-overlay.visible{
    opacity: 1;
    visibility: visible;
  }

  /* Le bouton burger reste au-dessus de tout */
  .nav-toggle{ position: relative; z-index: 1001; }
}


/* Icône logout – style commun */
.nav-extra .nav-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  color: var(--dg-text-muted, #ced7ff);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.nav-extra .nav-icon-only i {
  font-size: 0.95rem;
}

.nav-extra .nav-icon-only:hover {
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20);
  transform: translateY(-1px);
}

/* Desktop : menu horizontal + logout à la suite */
@media (min-width: 1025px) {

  #dg-nav{
    position: static;
    height: auto;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;

    display: flex;
    align-items: center;
    gap: 1.25rem;          /* espace entre le menu et l’icône logout */
  }

  #dg-nav ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  .nav-extra{
    display: flex;
    align-items: center;
    margin-top: 0;         /* plus de “pousser en bas” en desktop */
    padding: 0;
  }
}

/* === Accent Lyria (étoile + turquoise) === */
.field-label-lyria{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #27e6c8;
  font-weight: 600;
  letter-spacing: .02em;
}

.field-label-lyria::before{
  content: "✦";
  font-size: .8em;
  line-height: 1;
  color: #27e6c8;
  opacity: .95;
  text-shadow: 0 0 8px rgba(39,230,200,.6);
}

/* Bouton Email Lyria */
.btn-lyria-mail{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  border:none;
  font-weight:600;
  font-size:.9rem;
  background: linear-gradient(90deg, #2dd4bf, #60a5fa);
  color:#020617;
  box-shadow:
    0 10px 26px rgba(41,225,210,.35),
    inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;
  transition: transform .16s ease, box-shadow .18s ease, filter .16s ease;
}

.btn-lyria-mail:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 14px 32px rgba(41,225,210,.42),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.btn-lyria-mail:active{
  transform: translateY(0);
  filter: brightness(.97);
}

.btn-lyria-mail .icon{
  font-size: 1.1rem;
}

/* État "J'écris le mail…" */
.btn-lyria-mail.is-loading{
  opacity:.8;
  cursor: default;
  pointer-events:none;
}
.btn-lyria-mail.is-loading .dots{
  display:inline-flex;
  gap:3px;
}
.btn-lyria-mail .dots{
  display:none;
}
.btn-lyria-mail .dots span{
  width:4px; height:4px; border-radius:999px;
  background:#0f172a;
  opacity:.45;
  animation: lyriaDotMail 1s ease-in-out infinite;
}
.btn-lyria-mail .dots span:nth-child(2){ animation-delay:.12s; }
.btn-lyria-mail .dots span:nth-child(3){ animation-delay:.24s; }

@keyframes lyriaDotMail{
  0%,80%,100%{ transform:translateY(0); opacity:.45; }
  40%{ transform:translateY(-3px); opacity:1; }
}

/* Aligner les boutons dans l’entête du panel */
.panel-head-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Variante de modale pour Email Lyria */
.modal-email-lyria{
  max-width: 900px;
}

.modal-email-lyria .modal__title{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.modal-email-lyria .modal__title::before{
  content:"✦";
  font-size:.9rem;
  color:#27e6c8;
  text-shadow:0 0 8px rgba(39,230,200,.6);
}