/* ============================================================
   Cartogrid — Shell partagé (design tokens, rail, panneau, fondu).
   Le CSS spécifique à chaque module reste dans la balise <style> de sa page.
   ============================================================ */

/* Typographie : Helvetica Neue (style Promolead) — police système, aucun chargement. */

:root{
  /* Palette Back to Grid : neutres froids + bleu de marque (remplace l'ancien teal/crème). */
  --ink:#2C3E50;        /* Body Text BTG          */
  --muted:#8A9BAD;      /* Muted BTG              */
  --line:#dde4ea;       /* bordures (froid clair) */
  --paper:#F5F7F9;      /* Background BTG         */
  --accent:#038d98;     /* Couleur de base (teal Promolead) */
  --accent-soft:#d9eff1;/* teal très pâle        */
  --grid-head:#e9eef3;  /* en-têtes de tableaux  */
  --dim:#e8edf1;        /* gris froid neutre     */
  --danger:#b91c1c; --danger-soft:#fde8e8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink); font-size:14px;}
/* Titres & marque : même police (Helvetica Neue) */
h1,h2,h3,.nav-brand,.cg-login-app{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
#app{display:flex; flex-direction:column; height:100%;}

/* ---------- FONDU ENTRE MODULES ---------- */
@keyframes cg-fade-in{from{opacity:0}to{opacity:1}}
body{animation:cg-fade-in .22s ease both;}
body.cg-leaving{opacity:0; transition:opacity .18s ease;}
@media (prefers-reduced-motion: reduce){
  body{animation:none;} body.cg-leaving{transition:none;}
}

/* ---------- BARRE DE NAVIGATION (haut, style Promolead) ----------
   Le #navrail (présent sur chaque page) est rendu comme barre horizontale. */
.navrail{display:flex; align-items:center; gap:4px; height:54px; flex-shrink:0;
  background:var(--accent); padding:0 14px; box-shadow:0 1px 5px rgba(0,0,0,.18);
  position:relative; z-index:50;}
.tn-menu{display:flex; align-items:center; gap:2px;
  position:absolute; left:50%; transform:translateX(-50%);}   /* menus centrés */
.tn-group{position:relative;}
.tn-top{display:flex; align-items:center; gap:6px; padding:8px 12px; border:none; border-radius:7px;
  background:transparent; color:rgba(255,255,255,.85); font-family:inherit; font-size:13px;
  font-weight:600; cursor:pointer; user-select:none;}
.tn-group.open .tn-top, .tn-group.active .tn-top{background:rgba(255,255,255,.14); color:#fff;}
/* groupe à 1 seul item : le top devient un lien direct (pas de déroulant) */
.tn-top-link{text-decoration:none;}
.tn-top-link:hover{background:rgba(255,255,255,.14); color:#fff;}
.tn-caret{font-size:9px; opacity:.7;}
/* déroulant : ouverture au clic uniquement, angles carrés, compact */
.tn-drop{position:absolute; top:100%; left:0; min-width:172px; background:#fff;
  border:1px solid var(--line); border-radius:2px; box-shadow:0 4px 14px rgba(20,24,29,.16);
  padding:3px; display:none; z-index:60;}
.tn-group.open .tn-drop{display:block;}
.tn-drop-right{left:auto; right:0;}            /* déroulant compte aligné à droite */
.tn-item{display:flex; align-items:center; gap:8px; padding:5px 9px; border-radius:2px;
  font-size:12.5px; color:#000; text-decoration:none; white-space:nowrap;}
.tn-item .ic{width:15px; text-align:center; flex-shrink:0;}
.tn-item:hover{background:var(--accent); color:#fff;}
.tn-item.active{background:var(--accent-soft); color:#000; font-weight:700;}
.tn-drop span.tn-item{cursor:pointer;}

/* ---- Zone utilisateur (droite) : compte / informations / déconnexion ---- */
.tn-user{display:flex; align-items:center; gap:10px; margin-left:auto;}
.tn-user-menu{position:relative;}
.tn-user-name{padding:6px 9px 7px; font-size:12px; font-weight:700; color:#000;
  border-bottom:1px solid var(--line); margin-bottom:3px; white-space:nowrap;}
.tn-icon-btn{display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:none; background:transparent; color:#fff; cursor:pointer; border-radius:6px;}
.tn-icon-btn:hover{background:rgba(255,255,255,.16);}
.tn-icon-btn svg{width:20px; height:20px;}
#navLogout:hover{background:rgba(239,68,68,.30);}

/* ---------- PANNEAU FLOTTANT (sur la carte) ---------- */
.float-panel{position:absolute; top:16px; left:16px; z-index:3; width:300px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 6px 24px rgba(20,24,29,.12); display:flex; flex-direction:column;
  max-height:calc(100% - 32px); overflow:hidden;}
.float-panel.collapsed{width:auto; max-width:260px;}
.float-panel.collapsed .panel-body,
.float-panel.collapsed .panel-foot,
.float-panel.collapsed .panel-head .sub{display:none;}
.panel-head{padding:16px 16px 14px; border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; gap:10px;}
.float-panel.collapsed .panel-head{border-bottom:none; padding:12px 14px;}
.panel-head .titles{flex:1; min-width:0;}
.panel-head h1{font-size:16px; font-weight:700; letter-spacing:-.01em;}
.panel-head .sub{font-size:12px; color:var(--muted); margin-top:2px;}
.collapse-btn{flex-shrink:0; width:26px; height:26px; border-radius:7px; border:1px solid var(--line);
  background:#fff; color:var(--muted); cursor:pointer; font-size:13px; line-height:1; display:flex;
  align-items:center; justify-content:center;}
.collapse-btn:hover{border-color:var(--accent); color:var(--accent);}
.panel-body{overflow-y:auto; padding:16px;}

/* ---------- LABELS & CHAMPS COMMUNS ---------- */
.filter-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#9ca3af;
  margin:18px 0 8px; font-weight:700; display:flex; align-items:center; justify-content:space-between;}
.filter-label:first-child{margin-top:0;}
.filter-label .mini{font-size:10px; font-weight:600; color:var(--accent); cursor:pointer; text-transform:none; letter-spacing:0;}
.filter-label .mini:hover{text-decoration:underline;}
input[type=text],input[type=number]{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; background:#fff;}
input[type=text]:focus,input[type=number]:focus{outline:none; border-color:var(--accent);}

/* ---------- ZONE PRINCIPALE ---------- */
.main{flex:1; position:relative; min-width:0;}
#map{position:absolute; inset:0;}

/* ---------- STATUT ---------- */
.status{font-size:11px; padding:5px 9px; border-radius:6px; display:inline-block; margin-top:10px;}
.status.ok{background:var(--accent-soft); color:var(--accent);}
.status.err{background:var(--danger-soft); color:var(--danger);}
.status.idle{background:#f0ede5; color:var(--muted);}

/* ---------- POPUP (base) ---------- */
.maplibregl-popup-content{border-radius:8px; padding:11px 13px; font-size:13px;}

/* ---------- ÉCRAN DE CONFIG ---------- */
.setup{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:20px 26px;
  border-radius:10px; font-size:14px; max-width:440px; line-height:1.6; box-shadow:0 4px 24px rgba(0,0,0,.12);}
.setup code{background:#fef3c7; padding:1px 5px; border-radius:4px; font-family:ui-monospace,monospace; font-size:12px;}

.hide{display:none;}

/* ---- Overlay de login (cartogrid-auth.js) — base teal ---- */
#cg-login{position:fixed; inset:0; z-index:9999; display:none; align-items:center;
  justify-content:center; padding:20px;
  background:linear-gradient(140deg,#02646e 0%,var(--accent) 100%);}
.cg-login-card{display:flex; flex-direction:column; gap:13px; width:330px; padding:32px 30px;
  background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(0,16,30,.35); text-align:center;}
.cg-login-logo{width:190px; max-width:80%; height:auto; margin:2px auto 4px; display:block;}
.cg-login-app{font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);}
.cg-login-sub{margin:0 0 8px; font-size:12px; color:#8A9BAD;}
.cg-login-card input{width:100%; padding:11px 13px; border:1px solid #d9e0e6; border-radius:9px;
  font-size:14px; text-align:left; background:#F5F7F9;}
.cg-login-card input:focus{outline:none; border-color:var(--accent); background:#fff;}
.cg-login-card button{padding:11px; border:none; border-radius:9px; margin-top:2px;
  background:var(--accent); color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; cursor:pointer;}
.cg-login-card button:hover{background:#02646e;}
.cg-login-err{color:#b91c1c; font-size:12px; min-height:14px;}