/* ============================================================
   Concorda - surcouche UI v2 (refonte progressive)
   Chargee uniquement quand CONCORDA_UI=v2 (via templates_v2/base.html).
   Tout est scope sous body[data-ui="v2"] : aucune fuite possible
   vers l'interface par defaut. On raffine l'existant, on ne le
   reecrit pas. Conventions du projet respectees (pas de cadratin).
   ============================================================ */

body[data-ui="v2"]{
  /* Palette affinee : navy un peu plus profond, papier plus chaud,
     lignes plus douces. Les noms de variables restent compatibles. */
  --navy:#1c3257; --navy-d:#132341; --taupe:#a9977c; --taupe-d:#8a7858;
  --ink:#1f2730; --muted:#62707f; --line:#e4e7ec; --line-2:#eef1f5;
  --bg:#f4f4f0; --card:#ffffff;
  --green:#2e8b57; --red:#bd382a; --amber:#bf7016; --blue:#2c66ad;
  --shadow:0 1px 2px rgba(18,28,48,.05), 0 10px 28px rgba(18,28,48,.06);
  --radius:14px;
  background:
    radial-gradient(1200px 360px at 50% -120px, rgba(28,50,87,.05), transparent 70%),
    var(--bg);
}

/* ---------- En-tete ---------- */
body[data-ui="v2"] .topbar{
  padding:13px 30px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
body[data-ui="v2"] .brand .word{letter-spacing:5px;font-size:18px}
body[data-ui="v2"] .navlink{
  font-size:13.5px;padding:6px 2px;border-radius:8px;transition:color .15s ease;
}
body[data-ui="v2"] .navlink.who{
  background:#f1f4f9;padding:5px 11px;border-radius:999px;
}

/* ---------- Cartes ---------- */
body[data-ui="v2"] .card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:var(--shadow);
  transition:box-shadow .18s ease, border-color .18s ease;
}
body[data-ui="v2"] .card:hover{
  border-color:#d7dce4;
  box-shadow:0 2px 4px rgba(18,28,48,.06), 0 16px 40px rgba(18,28,48,.08);
}

/* ---------- Titres ---------- */
body[data-ui="v2"] h1{font-size:27px;letter-spacing:.2px}
body[data-ui="v2"] h2{font-size:19.5px}
body[data-ui="v2"] h2::after{
  content:"";display:block;width:34px;height:2px;margin-top:7px;
  background:linear-gradient(90deg, var(--taupe), transparent);
}

/* ---------- Boutons ---------- */
body[data-ui="v2"] .btn{
  border-radius:10px;font-weight:600;
  transition:transform .04s ease, background .15s ease, box-shadow .15s ease;
}
body[data-ui="v2"] .btn:active{transform:translateY(1px)}
body[data-ui="v2"] .btn-primary{
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px rgba(28,50,87,.18);
}

/* ---------- Pastilles de phase (frise de procedure) ----------
   Primitives reutilisables pour la console arbitre. Le HTML de
   dossier.html v2 pourra s'appuyer dessus (chip + etat). */
body[data-ui="v2"] .phase-rail{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 2px;
}
body[data-ui="v2"] .phase-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--muted);
  background:#f1f3f7;border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
body[data-ui="v2"] .phase-chip .dot{
  width:7px;height:7px;border-radius:50%;background:#c2cad6;
}
body[data-ui="v2"] .phase-chip.is-done{color:var(--navy);background:#eef2f8}
body[data-ui="v2"] .phase-chip.is-done .dot{background:var(--green)}
body[data-ui="v2"] .phase-chip.is-current{
  color:#fff;background:var(--navy);border-color:var(--navy-d);
}
body[data-ui="v2"] .phase-chip.is-current .dot{background:var(--taupe)}

/* ---------- Coquille deux colonnes (console arbitre) ----------
   Volontairement opt-in : ne s'applique qu'aux ecrans v2 qui
   adoptent la classe .console-grid. */
/* La page console respire plus large que le gabarit standard (1060px). */
body[data-ui="v2"] .wrap:has(.console-grid){max-width:1300px}
body[data-ui="v2"] .console-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;
}
body[data-ui="v2"] .console-main{min-width:0}
body[data-ui="v2"] .console-aside{position:sticky;top:78px;min-width:0}
@media (max-width:1000px){
  body[data-ui="v2"] .console-grid{grid-template-columns:1fr}
  body[data-ui="v2"] .console-aside{position:static}
}

/* Tableaux du rail (pieces, ecritures, journal) : tenir dans la colonne,
   les contenus longs (horodatages, details) passent a la ligne. */
body[data-ui="v2"] .console-aside table,
body[data-ui="v2"] .fold table{width:100%;table-layout:fixed}
body[data-ui="v2"] .console-aside table th,
body[data-ui="v2"] .console-aside table td,
body[data-ui="v2"] .fold table th,
body[data-ui="v2"] .fold table td{
  white-space:normal;word-break:break-word;overflow-wrap:anywhere;vertical-align:top;
}
body[data-ui="v2"] .console-aside .just,
body[data-ui="v2"] .fold .just{font-size:11.5px;margin-top:2px}

/* Rail droit : cartes compactes, hierarchie visuelle attenuee. */
body[data-ui="v2"] .console-aside .card{
  padding:14px 15px;margin:0 0 14px;font-size:13.5px;box-shadow:none;
  border-color:var(--line);background:#fcfcfb;
}
body[data-ui="v2"] .console-aside .card:hover{box-shadow:none;border-color:#d7dce4}
body[data-ui="v2"] .console-aside h2{font-size:14px;margin:.1em 0 .5em}
body[data-ui="v2"] .console-aside h2::after{display:none}
body[data-ui="v2"] .console-aside .grid.small{font-size:12.5px}

/* Sections repliables (Termine, Journal) dans le rail. */
body[data-ui="v2"] .fold{
  border:1px solid var(--line);border-radius:12px;background:#fcfcfb;margin:0 0 14px;
}
body[data-ui="v2"] .fold>summary{
  cursor:pointer;list-style:none;padding:11px 14px;font-weight:600;color:var(--navy);
  font-size:13.5px;display:flex;align-items:center;justify-content:space-between;
}
body[data-ui="v2"] .fold>summary::-webkit-details-marker{display:none}
body[data-ui="v2"] .fold>summary::after{content:"\25be";color:var(--muted);transition:transform .15s ease}
body[data-ui="v2"] .fold[open]>summary::after{transform:rotate(180deg)}
body[data-ui="v2"] .fold>summary .count{margin-left:6px}
body[data-ui="v2"] .fold .fold-body{padding:0 14px 12px}
body[data-ui="v2"] .fold .grid.small{font-size:12px}

/* Zone d'alertes pleine largeur : seules les actions requises s'y trouvent. */
body[data-ui="v2"] .alerts{margin:4px 0 18px;display:flex;flex-direction:column;gap:12px}
body[data-ui="v2"] .alert-card{
  border:1px solid #e2c9a8;background:#fbf6ee;border-left:4px solid var(--amber);
  border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);
}
body[data-ui="v2"] .alert-card.urgent{border-color:#e6bdb6;background:#fbf0ee;border-left-color:var(--red)}
body[data-ui="v2"] .alert-card h2{font-size:16px;margin:0 0 6px}
body[data-ui="v2"] .alert-card h2::after{display:none}

/* ---------- Tableau de bord : grille de cartes ---------- */
body[data-ui="v2"] .dossier-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin:20px 0;
}
body[data-ui="v2"] .dossier-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 17px;box-shadow:var(--shadow);
  transition:box-shadow .18s ease, border-color .18s ease, transform .06s ease;
  display:flex;flex-direction:column;gap:2px;
}
body[data-ui="v2"] .dossier-card:hover{
  border-color:#d3dae4;box-shadow:0 2px 4px rgba(18,28,48,.06), 0 16px 40px rgba(18,28,48,.09);
}
body[data-ui="v2"] .dc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
body[data-ui="v2"] .dc-id{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.2px}
body[data-ui="v2"] .dossier-card h3{margin:.35em 0 .15em;font-size:16px}
body[data-ui="v2"] .dossier-card h3 .dc-link{color:var(--navy);text-decoration:none}
/* Lien etire : toute la carte est cliquable. */
body[data-ui="v2"] .dc-link::after{content:"";position:absolute;inset:0;border-radius:14px}
body[data-ui="v2"] .dc-parties{font-size:13px;margin:.1em 0 0}
body[data-ui="v2"] .dc-vs{color:var(--taupe-d);font-style:italic;margin:0 2px}
body[data-ui="v2"] .dc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);
}
body[data-ui="v2"] .dc-val{font-weight:700;color:var(--navy);font-size:13.5px}
/* Le bouton supprimer passe au-dessus du lien etire. */
body[data-ui="v2"] .dc-del{position:relative;z-index:2}

/* Boutons flottants (FAB). */
body[data-ui="v2"] .fab{
  position:fixed;z-index:60;border:none;cursor:pointer;border-radius:999px;
  font-weight:600;font-family:var(--sans);box-shadow:0 6px 22px rgba(20,30,50,.22);
  display:inline-flex;align-items:center;gap:8px;transition:transform .06s ease, box-shadow .15s ease;
}
body[data-ui="v2"] .fab:active{transform:translateY(1px)}
body[data-ui="v2"] .fab-chat{
  right:22px;bottom:22px;width:58px;height:58px;justify-content:center;
  background:var(--navy);color:#fff;font-size:23px;
}
body[data-ui="v2"] .fab-chat .badge-n{
  position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff;
}
body[data-ui="v2"] .fab-actions{
  right:92px;bottom:28px;padding:11px 18px;background:#fff;color:var(--navy);
  border:1px solid var(--line);font-size:13.5px;
}
body[data-ui="v2"] .fab-actions:hover{border-color:#cfd6e1}

/* Tiroirs coulissants + voile. */
body[data-ui="v2"] .drawer-overlay{
  position:fixed;inset:0;background:rgba(20,28,45,.42);z-index:70;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
}
body[data-ui="v2"] .drawer-overlay.show{opacity:1;visibility:visible}
body[data-ui="v2"] .drawer{
  position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);z-index:80;
  background:var(--bg);box-shadow:-10px 0 40px rgba(20,30,50,.18);
  transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
body[data-ui="v2"] .drawer.left{right:auto;left:0;transform:translateX(-100%);box-shadow:10px 0 40px rgba(20,30,50,.18)}
body[data-ui="v2"] .drawer.open{transform:translateX(0)}
body[data-ui="v2"] .drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 18px;border-bottom:1px solid var(--line);background:#fff;
}
body[data-ui="v2"] .drawer-head h2{margin:0;font-size:17px}
body[data-ui="v2"] .drawer-head h2::after{display:none}
body[data-ui="v2"] .drawer-close{
  border:none;background:#eef1f5;color:var(--navy);width:32px;height:32px;border-radius:8px;
  cursor:pointer;font-size:18px;line-height:1;
}
body[data-ui="v2"] .drawer-body{overflow-y:auto;padding:16px 18px;flex:1}
/* Dans le tiroir, la carte de communications redevient nue (pas de double cadre). */
body[data-ui="v2"] .drawer-body .card{border:none;box-shadow:none;padding:0;margin:0;background:transparent}
body[data-ui="v2"] .drawer-body .card h2{display:none}