/* =====================================================================
   Administration de l'affichage dynamique — feuille de style
   ---------------------------------------------------------------------
   Jetons repris tels quels de public/rates/index.php : même système,
   les deux outils internes n'ont pas de raison de diverger.
   ===================================================================== */

:root {
  --navy:#14304d; --navy-dark:#0d2138; --navy-mid:#102a44;
  --gold:#c9a063; --gold-text:#886732;
  --ink:#1c2b3a; --ink-title:#14304d; --ink-2:#5f6e80; --ink-3:#606f81;
  --bg:#eef1f4; --surface:#fff; --surface-2:#f4f7fa; --surface-3:#fbfcfd;
  --border:#dde3ea; --border-2:#e6ebf1; --border-3:#eef2f6;
  --ok:#46c08a; --ok-text:#0a7d4f; --error:#c0392b;
  --warn:#c8860d; --idle:#b9c4ce;
  --r-field:10px; --r-card:15px; --r-pill:999px;
  --shadow-card:0 10px 30px rgba(20,48,77,.06);
  --container:1180px; --gutter:22px;
  --font-body:'Roboto', system-ui, -apple-system, sans-serif;
  --font-cond:'Roboto Condensed', var(--font-body);
  --font-slab:'Roboto Slab', Georgia, serif;
  --font-mono:'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Barre de marque, reprise du site public ---------- */

.brandbar {
  background:var(--navy); color:#fff; padding:18px var(--gutter);
  position:sticky; top:0; z-index:10;
}
.brandbar-inner {
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; gap:16px;
}
.mark {
  width:46px; height:46px; flex:none;
  border:1.5px solid var(--gold); border-radius:9px;
  display:grid; place-content:center;
  font:700 13px/1.05 var(--font-cond); letter-spacing:.06em;
  color:var(--gold); text-align:center;
}
.brandname { font:500 21px/1.1 var(--font-slab); letter-spacing:-.01em; }
.brandsub {
  margin-top:3px; font:700 10px/1 var(--font-cond); letter-spacing:.22em;
  color:var(--gold); text-transform:uppercase;
}
.brandbar nav { margin-left:auto; display:flex; gap:6px; }
.brandbar nav a {
  color:#9db0c4; text-decoration:none;
  padding:9px 16px; border-radius:var(--r-field);
  font:500 14px/1 var(--font-body);
  transition:background .15s, color .15s;
}
.brandbar nav a:hover { background:var(--navy-mid); color:#fff; }
.brandbar nav a.on { background:#fff; color:var(--navy); font-weight:700; }

/* ---------- Structure ---------- */

main { max-width:var(--container); margin:0 auto; padding:36px var(--gutter) 64px; }

/* Le tableau des écrans porte huit colonnes : il respire mal à 1180 px.
   C'est la seule page qui déroge, et seulement sur grand écran. */
main.wide { max-width:1480px; }

.eyebrow {
  margin:0 0 8px; font:700 12px/1 var(--font-cond); letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-text);
}
h1 {
  margin:0 0 8px; font:500 34px/1.15 var(--font-slab);
  letter-spacing:-.02em; color:var(--ink-title);
}
.lede { margin:0 0 30px; color:var(--ink-2); }

.card {
  background:var(--surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); overflow:hidden;
  margin-bottom:20px;
}
.card-pad { padding:24px 30px; }

.section-title {
  margin:0 0 14px; font:700 12px/1 var(--font-cond);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- Bandeau de synthèse ---------- */

.tally { display:flex; gap:40px; flex-wrap:wrap; align-items:baseline; }
.tally .item { display:flex; align-items:baseline; gap:10px; }
.tally .num {
  font:500 30px/1 var(--font-slab); color:var(--ink-title);
  font-variant-numeric:tabular-nums;
}
.tally .lab { color:var(--ink-2); font-size:.94rem; }
.tally .item.alert .num { color:var(--error); }

/* ---------- Filtre boutique ---------- */

.choices { display:flex; gap:10px; flex-wrap:wrap; }
.choice-link {
  display:block; padding:12px 20px;
  border:1.5px solid var(--border); border-radius:var(--r-field);
  background:var(--surface); text-decoration:none;
  font:500 15px/1.2 var(--font-body); color:var(--ink);
  transition:border-color .15s, background .15s, color .15s;
}
.choice-link:hover { border-color:#c3cedb; }
.choice-link.on {
  border-color:var(--navy); background:var(--navy); color:#fff; font-weight:700;
}

/* ---------- Tableau ---------- */

.table-wrap { overflow-x:auto; }

table.grid { width:100%; border-collapse:collapse; font-size:.94rem; }

table.grid thead th {
  text-align:left; padding:0 12px 12px;
  font:700 11px/1 var(--font-cond); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.grid tbody td {
  padding:14px 12px; border-bottom:1px solid var(--border-3);
  vertical-align:middle;
}
table.grid tbody tr:last-child td { border-bottom:none; }
table.grid tbody tr:hover { background:var(--surface-3); }

/* Un écran muet se signale par une arête, pas par un fond coloré :
   la lecture du tableau reste calme. */
table.grid tbody tr.is-offline td:first-child {
  box-shadow:inset 3px 0 0 var(--error);
}

.screen-name {
  display:inline-block; font-weight:500; font-size:1rem; color:var(--ink-title);
}

/* Un libellé modifiable s'annonce par un pointillé discret, qui se
   colore au survol. Pas d'icône ni de lien séparé : le texte lui-même
   est la porte d'entrée. */
a.editable {
  text-decoration:none; color:inherit;
  border-bottom:1px dotted var(--border);
  transition:border-color .15s, color .15s;
}
a.editable:hover { color:var(--gold-text); border-bottom-color:var(--gold); }

/* Les descriptifs passent en italique : ils se distinguent des données
   (adresse IP, nom de machine) sans changer de couleur ni de taille. */
.screen-sub { color:var(--ink-2); font-size:.84rem; margin-top:2px; font-style:italic; }
.host-ip { color:var(--ink-2); font-size:.84rem; margin-top:2px; }

/* Le code agence ouvre la ligne : c'est par lui qu'on se repère quand
   toutes les boutiques sont affichées. */
.shop-code {
  font:700 15px/1 var(--font-cond); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-title); white-space:nowrap;
}

.url-cell .url-text { font-size:.88rem; word-break:break-all; }
.url-cell { min-width:300px; }
.url-cell .url-label {
  color:var(--ink-2); font-size:.84rem; margin-top:5px; font-style:italic;
}

/* Ligne visée par un lien « Modifier » venu du tableau des écrans :
   on la désigne, on ne la met pas en scène. */
table.grid tbody tr:target td { background:var(--surface-2); }
table.grid tbody tr:target td:first-child { box-shadow:inset 3px 0 0 var(--gold); }
.host { font:400 .87rem var(--font-mono); color:var(--navy); }
.hours { font-variant-numeric:tabular-nums; font-size:.9rem; }
.hours.closed { color:var(--idle); font-style:italic; }

/* ---------- Statut ---------- */

.status { display:flex; align-items:center; gap:10px; white-space:nowrap; }

.dot {
  flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--idle); transform:translateY(-1px);
}
.dot.en_ligne     { background:var(--ok); }
.dot.hors_ligne   { background:var(--error); }
.dot.jamais_vu    { background:var(--warn); }
.dot.sans_machine { background:var(--idle); }

/* Battement au rafraîchissement : discret, et il confirme que la page
   est vivante sans qu'on ait à la recharger. */
.dot.beat { animation:beat .9s ease-out; }
@keyframes beat {
  0%   { box-shadow:0 0 0 0 rgba(70,192,138,.55); }
  100% { box-shadow:0 0 0 9px rgba(70,192,138,0); }
}

.status .lab { display:block; font-weight:500; }
.status .age {
  display:block; font-size:.82rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* ---------- Contrôles ---------- */

select, input[type=text], input[type=time], input[type=number] {
  font:400 .92rem var(--font-body); color:var(--ink);
  padding:9px 11px;
  border:1.5px solid var(--border); border-radius:var(--r-field);
  background:var(--surface); max-width:100%;
}
select:focus, input:focus { border-color:var(--navy); outline:none; }
select:focus-visible, input:focus-visible, a:focus-visible, button:focus-visible {
  outline:2px solid var(--gold); outline-offset:2px;
}
select.url-pick { width:100%; }

.btn {
  padding:11px 20px; border:1.5px solid var(--navy);
  border-radius:var(--r-field); background:var(--navy); color:#fff;
  font:700 14px/1 var(--font-body); cursor:pointer;
  transition:background .15s;
}
.btn:hover { background:var(--navy-mid); }

.btn.ghost { background:var(--surface); color:var(--navy); border-color:var(--border); }
.btn.ghost:hover { background:var(--surface-2); border-color:#c3cedb; }

.btn.small { padding:8px 14px; font-size:13px; }

.linky {
  color:var(--ink-2); text-decoration:none; font-size:.87rem;
  border-bottom:1px solid var(--border);
}
.linky:hover { color:var(--navy); border-color:var(--gold); }

.add-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------- Barre d'actions groupées ---------- */

.bulk {
  position:sticky; bottom:20px; margin-top:18px;
  background:var(--navy); color:#fff;
  border-radius:var(--r-card); padding:16px 22px;
  display:none; align-items:center; gap:14px; flex-wrap:wrap;
  box-shadow:0 14px 34px rgba(13,33,56,.28);
}
.bulk.show { display:flex; }
.bulk .count { font-weight:500; }
.bulk .btn { background:#fff; color:var(--navy); border-color:#fff; }
.bulk .btn:hover { background:#e6ecf3; }
.bulk .btn.ghost { background:transparent; color:#fff; border-color:#456486; }
.bulk .btn.ghost:hover { background:var(--navy-mid); }

/* ---------- Messages et vide ---------- */

.flash {
  display:flex; align-items:center; gap:10px;
  margin:0 0 20px; padding:14px 18px;
  border-radius:var(--r-field); background:var(--surface-2);
  font-size:.92rem; color:var(--ok-text);
}
.flash.ko { color:var(--gold-text); }

.empty { text-align:center; padding:56px 20px; color:var(--ink-2); }
.empty .title {
  font:500 22px/1.2 var(--font-slab); color:var(--ink-title); margin-bottom:8px;
}

/* ---------- Écrans étroits ---------- */

@media (max-width:820px) {
  h1 { font-size:27px; }
  .card-pad { padding:20px; }
  .tally { gap:24px; }
  .brandbar-inner { flex-wrap:wrap; }
  .brandbar nav { margin-left:0; width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* =====================================================================
   Page de détail d'un écran
   ===================================================================== */

.crumb { color:var(--gold-text); text-decoration:none; border-bottom:1px solid transparent; }
.crumb:hover { border-bottom-color:var(--gold); }

.note { margin:0 0 18px; color:var(--ink-2); font-size:.9rem; }

/* Grille de champs : deux colonnes sur large, une sur étroit. */
.fields {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px 26px;
}
.fields .f { display:flex; flex-direction:column; gap:7px; min-width:0; }
.fields .f.wide { grid-column:1 / -1; }
.fields .f.check { flex-direction:row; align-items:center; gap:9px; }

.f-label {
  font:700 11px/1 var(--font-cond); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

textarea {
  font:400 .94rem/1.5 var(--font-body); color:var(--ink);
  padding:10px 12px; border:1.5px solid var(--border);
  border-radius:var(--r-field); background:var(--surface); resize:vertical;
}
textarea:focus { border-color:var(--navy); outline:none; }

.actions {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--border-3);
}
.actions .btn { text-decoration:none; display:inline-block; }

/* ---------- Créneaux horaires ---------- */

/* Les jours sont des lignes pleine largeur : en colonnes, chaque jour
   ne disposait que de 185 px pour deux heures et deux boutons. */
.days { display:flex; flex-direction:column; gap:10px; }

.day {
  border:1.5px solid var(--border); border-radius:var(--r-field);
  padding:14px 18px; background:var(--surface-3);
  display:grid; grid-template-columns:150px 1fr; gap:6px 22px;
  align-items:start;
}

.day-head {
  grid-row:1 / span 3;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.day-name {
  font:700 12px/1 var(--font-cond); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-title);
}
.copy-day { font-size:.8rem; padding:5px 7px; max-width:100%; }

/* ---------- Barre 24 h ---------- */

.track {
  position:relative; height:34px; margin:2px 0 10px;
  touch-action:none; user-select:none;
}

.track-rail {
  position:absolute; inset:0 0 14px 0;
  background:var(--navy); border-radius:5px; opacity:.10;
}

.track-ticks { position:absolute; left:0; right:0; bottom:0; height:12px; }
.track-ticks span {
  position:absolute; transform:translateX(-50%);
  font:400 10px/1 var(--font-cond); color:var(--ink-2);
}
.track-ticks span:first-child { transform:none; }
.track-ticks span:last-child { transform:translateX(-100%); }

.track-segs { position:absolute; inset:0 0 14px 0; }

.seg {
  position:absolute; top:0; bottom:0;
  background:var(--navy); border-radius:5px;
  cursor:grab; display:flex; align-items:center; justify-content:center;
  min-width:6px;
}
.seg:active { cursor:grabbing; }

.seg-label {
  font:500 11px/1 var(--font-body); color:#fff;
  white-space:nowrap; overflow:hidden; pointer-events:none;
  font-variant-numeric:tabular-nums;
}

.grip {
  position:absolute; top:50%; width:14px; height:14px;
  margin-top:-7px; border-radius:50%;
  background:var(--gold); border:2px solid #fff;
  box-shadow:0 1px 3px rgba(13,33,56,.35);
  cursor:ew-resize;
}
.grip.open  { left:-7px; }
.grip.close { right:-7px; }

/* ---------- Champs des créneaux ---------- */

.day-slots { display:flex; flex-wrap:wrap; gap:8px 16px; }

/* Un jour sans créneau reste visiblement vide plutôt que d'afficher
   des champs à zéro : l'absence de créneau EST l'information. */
.day-slots:empty::before {
  content:"fermé"; font-style:italic; color:var(--idle); font-size:.88rem;
}

.slot {
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:8px; padding:6px 8px;
}
.slot input[type=time] {
  width:110px; padding:8px 10px; font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.slot .dash { color:var(--ink-2); font-size:.9rem; }

.slot .drop {
  flex:none; width:26px; height:26px; padding:0;
  border:1px solid var(--border); border-radius:6px;
  background:var(--surface); color:var(--ink-2);
  font:400 16px/1 var(--font-body); cursor:pointer;
}
.slot .drop:hover { border-color:var(--error); color:var(--error); }

.add-slot {
  justify-self:start; margin-top:2px; padding:7px 12px;
  border:1px dashed var(--border); border-radius:6px;
  background:transparent; color:var(--ink-2);
  font:500 12px/1 var(--font-body); cursor:pointer;
}
.add-slot:hover { border-color:var(--gold); color:var(--gold-text); }

.copy-line {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:20px; padding-top:20px; border-top:1px solid var(--border-3);
}
.copy-line form { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.copy-line .note { margin:0; }

@media (max-width:720px) {
  .day { grid-template-columns:1fr; }
  .day-head { grid-row:auto; flex-direction:row; align-items:center;
              justify-content:space-between; width:100%; }
}


/* =====================================================================
   Journaux
   ===================================================================== */

.waiting {
  font-style:italic; color:var(--gold-text); font-size:.88rem;
}

/* Le journal garde sa mise en forme d'origine : c'est une sortie de
   terminal, la reformater la rendrait moins lisible, pas plus. */
.logview {
  margin:0; padding:18px 20px; max-height:60vh; overflow:auto;
  background:var(--navy-dark); color:#c8d4e0;
  border-radius:var(--r-field);
  font:400 12.5px/1.65 var(--font-mono);
  white-space:pre; tab-size:4;
}

/* =====================================================================
   Parc
   ===================================================================== */

/* Un objet réformé reste lisible mais s'efface : il est là pour
   consultation, pas pour l'exploitation courante. */
table.grid tbody tr.is-retired { opacity:.58; }
table.grid tbody tr.is-retired:hover { opacity:1; }

.tag {
  display:inline-block; padding:4px 10px; border-radius:var(--r-pill);
  font:700 10px/1.4 var(--font-cond); letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap;
}
.tag.on  { background:#e4f5ec; color:var(--ok-text); }
.tag.off { background:var(--surface-2); color:var(--ink-3); }
.tag.ret { background:#f3ece0; color:var(--gold-text); }

.ok-mark { color:var(--ok-text); font-size:.88rem; }

.dot.reforme, .dot.en_stock { background:var(--idle); }

/* La suppression définitive se distingue de la réforme, sans crier. */
.btn.ghost.danger { color:var(--error); }
.btn.ghost.danger:hover { border-color:var(--error); background:#fdf3f2; }

.hint-inline { font-size:.8rem; color:var(--ink-2); font-style:italic; }

/* Liste de cases à cocher, pour appliquer un gabarit à des écrans. */
.pick-list {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:10px 20px;
}
.pick-item {
  display:flex; align-items:baseline; gap:10px;
  padding:11px 14px; border:1.5px solid var(--border);
  border-radius:var(--r-field); background:var(--surface); cursor:pointer;
}
.pick-item:hover { border-color:#c3cedb; }
.pick-item em { display:block; color:var(--ink-2); font-size:.82rem; }