/* ============================================================
   chrome.css — design de l'application (v3, sobre et editorial).
   Blanc, bordures fines, une seule couleur d'accent, pas de dégradés
   ni d'ombres lumineuses, pas de theme sombre.
   N'affecte jamais le rendu des bulletins imprimes (voir bulletins.css).
   ============================================================ */

:root{
  --ink: #16202e;
  --ink-soft: #4b5567;
  --ink-faint: #93a0b3;
  --bg: #fbfbfa;
  --surface: #ffffff;
  --surface-alt: #f5f6f4;
  --border: #e2e4e0;
  --border-strong: #c7cbc5;
  --accent: #1C70B8;
  --accent-hover: #145a94;
  --accent-soft: #eaf2f9;
  --accent-ring: rgba(28,112,184,.24);
  --danger: #b3352f;
  --danger-soft: #f8ebea;
  --success: #2c7a49;
  --success-soft: #ecf5ee;
  --warn: #9a6b1a;
  --warn-soft: #f7f0e1;
  --radius-sm: 6px;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(22,32,46,.05);
  --font: Georgia, 'Iowan Old Style', 'Segoe UI', Arial, sans-serif;
  --font-ui: 'Segoe UI', Arial, sans-serif;
  --rail-w: 76px;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font-ui);color:var(--ink);background:var(--bg);}
button{font-family:inherit;}
svg{width:1em;height:1em;}

/* ---- rail de navigation (gauche) ---- */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:6px;z-index:30;
}
.rail-mark{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:22px;flex-shrink:0;background:#fff;box-shadow:0 0 0 1px var(--border);}
.rail-mark img{width:100%;height:100%;object-fit:cover;}
.rail-btn{width:56px;padding:10px 4px 8px;border:none;background:transparent;color:var(--ink-faint);cursor:pointer;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.02em;transition:background .12s,color .12s;}
.rail-btn svg{width:19px;height:19px;}
.rail-btn:hover{background:var(--surface-alt);color:var(--ink);}
.rail-btn.active{color:var(--accent);background:var(--accent-soft);}
.rail-btn.active::before{content:'';position:absolute;}
.topbar-status{position:fixed;bottom:16px;left:0;width:var(--rail-w);text-align:center;font-size:10px;color:var(--ink-faint);}
.topbar-status.ok{color:var(--success);}
.topbar-status.err{color:var(--danger);}

.shell{margin-left:var(--rail-w);max-width:1320px;padding:34px clamp(16px,3vw,44px) 80px;}

/* ---- boutons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s,color .12s;white-space:nowrap;}
.btn svg{width:14px;height:14px;flex-shrink:0;}
.btn:hover{border-color:var(--accent);color:var(--accent-hover);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;}
.btn.danger{border-color:var(--border-strong);color:var(--danger);}
.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger);}
.btn.ghost{border-color:transparent;background:transparent;}
.btn.ghost:hover{background:var(--surface-alt);border-color:transparent;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-sm{padding:6px 10px;font-size:11.5px;}
.icon-btn{width:28px;height:28px;padding:0;justify-content:center;border-radius:var(--radius-sm);}

/* ---- cartes ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.card-pad{padding:20px 22px;}
.section-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.page-title{font-family:var(--font);font-size:28px;font-weight:400;letter-spacing:-.01em;margin:0 0 5px;color:var(--ink);}
.page-subtitle{font-size:13px;color:var(--ink-soft);margin:0 0 26px;max-width:680px;line-height:1.55;}

/* ---- champs ---- */
.field{margin-bottom:12px;}
.field label{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);margin-bottom:5px;}
.field input[type=text],.field input[type=number],.field input[type=date],.field select,.field textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:13px;font-family:inherit;color:var(--ink);background:var(--surface);transition:border-color .12s,box-shadow .12s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);}
.field textarea{min-height:56px;resize:vertical;}
.field-row{display:flex;gap:12px;}
.field-row>.field{flex:1;}

/* ---- Saisie : grille de cartes (une par ville) ---- */
.saisie-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;}
.modebtn-group{display:flex;gap:4px;background:var(--surface-alt);border:1px solid var(--border);border-radius:9px;padding:3px;}
.modebtn-group .modebtn{padding:8px 16px;}
.saisie-toolbar .grow{flex:1;}
.saisie-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;}
.city-card{border:1px solid var(--border);border-radius:14px;padding:20px 20px 18px;background:var(--surface);transition:border-color .12s,box-shadow .12s;}
.city-card:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);}
.city-card .cc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.city-card .cc-name{font-family:var(--font);font-weight:400;font-size:17px;color:var(--ink);}
.city-card .cc-icon{width:42px;height:42px;flex-shrink:0;}
.city-card .cc-icon svg{width:100%;height:100%;}
.city-card select.cc-icon-select{width:100%;font-size:12px;padding:8px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-alt);color:var(--ink-soft);margin-bottom:14px;}
.city-card select.cc-icon-select:focus{outline:none;border-color:var(--accent);}
.cc-temps{display:flex;gap:10px;margin-bottom:14px;}
.cc-temp-box{flex:1;text-align:center;border:1px solid var(--border);border-radius:10px;padding:9px 4px 10px;}
.cc-temp-box label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:4px;}
.cc-temp-box input{width:100%;border:none;background:transparent;text-align:center;font-size:22px;font-weight:700;color:var(--ink);padding:0;}
.cc-temp-box input:focus{outline:none;}
.cc-temp-box.max{border-color:#e3c9c7;background:#fdf8f7;}
.cc-temp-box.min{border-color:#c9d7e3;background:#f7fafd;}
.cc-wind{display:flex;align-items:center;gap:8px;}
.cc-wind svg{width:22px;height:22px;flex-shrink:0;color:var(--ink-faint);}
.cc-wind select{flex:0 0 58px;font-size:12px;padding:7px 4px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.cc-wind input{flex:1;min-width:0;font-size:12.5px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.cc-wind select:focus,.cc-wind input:focus{outline:none;border-color:var(--accent);}

/* ---- Conception : dashboard ---- */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.dash-card{background:var(--surface);border:none;padding:20px;cursor:pointer;text-align:left;transition:background .12s;}
.dash-card:hover{background:var(--accent-soft);}
.dash-card .dc-icon{width:20px;height:20px;color:var(--accent);margin-bottom:12px;}
.dash-card .dc-title{font-size:13.5px;font-weight:700;margin-bottom:5px;color:var(--ink);}
.dash-card .dc-desc{font-size:11.8px;color:var(--ink-faint);line-height:1.5;}

/* ---- Conception : mise en page editeur + apercu ---- */
.conception-layout{display:flex;flex-direction:column;gap:20px;}
.conception-nav{display:flex;align-items:center;gap:14px;margin-bottom:6px;padding-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.conception-nav .current-label{font-family:var(--font);font-size:19px;color:var(--ink);white-space:nowrap;flex-shrink:0;}
.conception-nav #backBtn{flex-shrink:0;}
@media screen and (min-width:1150px){
  .conception-layout{display:grid;grid-template-columns:minmax(330px,420px) 1fr;align-items:start;gap:26px;}
  .conception-editor{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;}
  .conception-preview{overflow-x:auto;}
}
.conception-editor h3{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin:22px 0 11px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.conception-editor h3:first-child{margin-top:0;}
/* la page A4 (794px, bulletins.css) est mise a l'echelle pour tenir dans
   l'espace disponible - elle ne deborde/ne se coupe plus jamais. */
.preview-scale-outer{width:100%;overflow:hidden;position:relative;}
.preview-scale-inner{transform-origin:top left;width:794px;}
.preview-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:10px 14px;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);}
.preview-toolbar .grow{flex:1;}

/* ---- vigilance : la carte est le composant principal ---- */
.vigi-editor-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.paint-toolbar{margin-bottom:14px;}
.paint-group-label{font-size:10px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;display:block;}
.paint-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.paint-swatch{width:26px;height:26px;border-radius:6px;cursor:pointer;border:1px solid var(--border-strong);flex-shrink:0;}
.paint-swatch.active{box-shadow:0 0 0 2px #fff inset,0 0 0 3px var(--ink);}
.alea-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:16px;border:1px solid var(--border-strong);background:var(--surface);font-size:11px;font-weight:600;cursor:pointer;color:var(--ink-soft);}
.alea-chip svg{width:16px;height:16px;flex-shrink:0;}
.alea-chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-hover);}
.eraser-note{font-size:11.5px;color:var(--ink-soft);margin-top:9px;line-height:1.5;}
.eraser-note b{color:var(--ink);}
.clearall-btn{margin-top:10px;}
.map-editor-wrap{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--surface-alt);margin-top:6px;}
.map-editor-wrap .mapsvg path.region{cursor:pointer;}
.map-editor-wrap .mapsvg path.region:hover{opacity:.85;stroke:var(--ink);stroke-width:2.2;}
.vigi-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.vigi-legend-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-soft);}
.vigi-legend-chip i{width:10px;height:10px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.08);}

.app-loading{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--ink-soft);font-size:14px;}

/* ---- editeur "situation generale" ---- */
.sitgen-toolbar{display:flex;gap:5px;margin-bottom:9px;align-items:center;}
.sitgen-toolbar button{width:28px;height:28px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sitgen-toolbar button svg{width:13px;height:13px;}
.sitgen-toolbar button:hover{border-color:var(--accent);color:var(--accent);}
.sitgen-toolbar .hint{font-size:11px;color:var(--ink-faint);align-self:center;margin-left:4px;margin-bottom:0;}
.sitgen-editable-all{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 10px;font-size:12.5px;min-height:80px;background:var(--surface);line-height:1.55;}
.sitgen-editable-all:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);}
.sitgen-editable-all .sitgen-line{padding:3px 0;border-bottom:1px dashed var(--border);}
.sitgen-editable-all .sitgen-line:last-child{border-bottom:none;}

/* ---- listes editables (lever/coucher, bamako72h) ---- */
.edit-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.edit-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);padding:0 6px 7px;font-weight:700;}
.edit-table td{padding:3px 6px;}
.edit-table input{width:100%;padding:6px 8px;border:1px solid var(--border-strong);border-radius:6px;font-size:12.5px;font-family:inherit;background:var(--surface);}
.edit-table input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ring);}

.hint{font-size:11.8px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px;}
.empty-note{text-align:center;color:var(--ink-soft);font-size:13px;padding:26px;background:var(--surface-alt);border-radius:var(--radius);}

/* ---- icon-picker (bamako72h) ---- */
.icon-picker{display:flex;gap:7px;flex-wrap:wrap;}
/* Libelle ("Nuageux", "Très nuageux"...) ajoute sous chaque picto
   (2026-08-10) : avant, seul un attribut title="" (infobulle au survol,
   jamais visible sans passer la souris dessus) identifiait chaque choix --
   impossible de confirmer au premier coup d'oeil lequel correspond a quel
   nom, exactement le repere qui manquait pour verifier "cloud_dark" contre
   la planche du pack source. */
.icon-pick{width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;padding:6px;}
.icon-pick:hover{border-color:var(--accent);}
.icon-pick svg{width:50px;height:50px;}
.icon-pick .icon-pick-label{font-size:9.5px;line-height:1.15;text-align:center;color:var(--ink-soft);}
.icon-pick.active{border-color:var(--accent);background:var(--accent-soft);}
.icon-pick.active .icon-pick-label{color:var(--ink);}

/* ---- feedback ---- */
.spinner{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;}
.btn:not(.primary) .spinner{border-color:var(--border-strong);border-top-color:var(--accent);}
@keyframes spin{to{transform:rotate(360deg);}}

/* Confirmation visible de la sauvegarde automatique (voir app.js,
   renderSaveStatus) : sans ca, rien n'indiquait si une modification avait
   vraiment ete enregistree cote serveur. */
.save-status{position:fixed;right:16px;bottom:14px;z-index:50;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;align-items:center;gap:6px;transition:opacity .2s;}
.save-status:empty{display:none;}
.save-status.pending{background:var(--surface-alt);color:var(--ink-soft);border:1px solid var(--border);}
.save-status.pending .spinner{border-color:var(--border-strong);border-top-color:var(--accent);}
.save-status.error{background:var(--danger-soft);color:var(--danger);border:1px solid transparent;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:11px 16px;border-radius:var(--radius-sm);font-size:12.5px;z-index:100;max-width:360px;line-height:1.45;}
.toast.err{background:var(--danger);}
.toast.ok{background:var(--success);}

/* ---- impression ---- */
#printRoot{display:none;}
@media print{
  html,body{background:#fff;margin:0;padding:0;}
  #appShell{display:none !important;}
  #printRoot{display:block !important;margin:0 !important;padding:0 !important;}
  /* .save-status et .toast sont position:fixed en dehors de #appShell/#printRoot
     (voir app.js) : masques par #appShell{display:none} pendant l'impression a
     l'ecran seulement par coincidence visuelle. S'ils sont visibles au moment de
     l'impression (ex. badge "Enregistre a..." pas encore efface), ils flottent
     par-dessus la page imprimee/le PDF. Masques explicitement ici. */
  .save-status,.toast{display:none !important;}
}