/* ============ RIDEr STUDIO — style ============ */
:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #1a1c20;
  --muted: #5b616b;
  --line: #d8dce2;
  --accent: #2b5f9e;
  /* `--accent-bg` = l'accent employé comme FOND (sur lequel le texte est blanc).
     Distinct de `--accent` qui sert au TEXTE et aux BORDURES : en thème sombre
     l'accent doit être clair pour être lisible en texte, mais un fond clair avec
     du blanc dessus tombe à 3,2:1. Voir `html.dark` et le bloc d'impression. */
  --accent-bg: #2b5f9e;
  --accent2: #8a3b2e;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- header ---------- */
header {
  background: #1f2430;
  color: #fff;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
header h1 { margin: 0; font-size: 21px; letter-spacing: .5px; flex: 1; }
header .hint { margin: 0; color: #9aa3b2; font-size: 13px; }

/* ---------- Toggle slider thème ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #cfd4dd;
}
.theme-label { font-size: 13px; }
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #444b58;
  border-radius: 24px;
  transition: .25s;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .25s;
}
.toggle input:checked + .toggle-slider {
  background: var(--accent-bg);
}
.toggle input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
html.dark .toggle input:checked + .toggle-slider {
  background: var(--accent-bg);
}

.header-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Indicateur de sauvegarde (discret, dans le header) ---------- */
.sync-ind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #9aa3b2;
  background: rgba(255,255,255,0.06);
  border: 1px solid #3a4150;
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.sync-ind::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2b13d;
  flex: 0 0 auto;
}
.sync-ind[data-state="saving"]::before {
  background: #f2b13d;
  animation: sync-pulse 1s ease-in-out infinite;
}
.sync-ind[data-state="synced"]::before { background: #4caf6d; }
.sync-ind[data-state="offline"]::before { background: #e0563a; }
.sync-ind[data-state="synced"] { color: #8fd8a4; border-color: #2f5a3f; }
.sync-ind[data-state="offline"] { color: #f2a692; border-color: #7a3a2c; }
@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.header-controls label { font-size: 14px; color: #cfd4dd; display: flex; align-items: center; gap: 6px; }
.header-controls .txt {
  width: 140px; padding: 5px 8px; border: none; border-radius: 4px;
  font-size: 14px;
}
.header-controls .txt.date { width: 110px; }
.sep { width: 1px; height: 22px; background: #444b58; }
.sort-label { font-size: 14px; color: #9aa3b2; display: inline-flex; align-items: center; gap: 6px; }
.sort-label select { background: #1b202b; color: var(--txt); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 14px; cursor: pointer; }
/* Champ de date obligatoire : surligné tant qu'il est vide */
.req-label .txt.required-missing { border-color: #e0563a !important; background: rgba(224,86,58,0.12) !important; }
.btn-save { background: #2f8f4e; color: #fff; font-weight: 600; }
.btn-save:hover { background: #37a55c; }
.save-status {
  font-size: 13px; color: #6f7a8c; white-space: nowrap;
  /* à côté de « Exporter · Importer · Réinitialiser » : largeur figée, sinon
     chaque message de statut déplace les boutons voisins */
  margin: 0 12px 0 0; text-align: left; width: 22em; flex: 0 0 auto;
  overflow: hidden; text-overflow: ellipsis;
}
.save-status.ok { color: #4caf6d; }
button, .btn-like {
  background: #33415a; color: #fff; border: none; border-radius: 5px;
  padding: 6px 12px; font-size: 14px; cursor: pointer;
}
button:hover, .btn-like:hover { background: #40527a; }
#btn-print-salle { background: #a34a1f; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* Utilitaires. CSP stricte (`style-src 'self'`) : plus aucun attribut `style=`
   dans les pages ni dans les gabarits HTML construits par app.js — l'état
   masqué/visible passe par cette classe, togglée en JS via classList. */
.is-hidden { display: none !important; }
.req-star { color: #e0563a; }
.banner-retry { color: inherit; }
.empty-cell { color: var(--muted); }
header .hint { color: #9aa3b2; margin-top: 4px; }

/* ---------- accueil (multi-rider) ---------- */
body.home #view-rider, body.rider #view-home { display: none; }
.home-panel { max-width: 960px; margin: 0 auto; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.home-actions button, .home-actions .btn-like { background: var(--accent-bg); font-size: 14px; }
.search-wrap { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 220px; max-width: 340px; min-width: 180px; }
.search-wrap .txt { flex: 1; min-width: 0; }
.search-clear { padding: 4px 8px; line-height: 1; background: var(--accent-bg); font-size: 14px; }
/* Filtre de statut : segmenté Tous / En cours / Terminés.
   Les règles sont portées par `.home-actions .seg-btn` — et NON par `.seg-btn` :
   `.home-actions button { background: var(--accent) }` a une spécificité
   supérieure et peignait les boutons INACTIFS en bleu accent avec un texte gris
   (`--muted`), soit un contraste mesuré de **1,04:1** : « En cours » et
   « Terminés » étaient illisibles en thème clair (signalé par l'utilisateur).
   Un contraste de texte ≥ 4,5:1 est exigé sur ces libellés. */
.home-actions .seg-btn {
  background: #eef1f5; color: var(--ink);
  border: none; border-left: 1px solid var(--line);
}
.home-actions .seg-btn:hover { background: #e2e7ee; }
.home-actions .seg-btn.active { background: var(--accent-bg); color: #fff; font-weight: 600; }
/* Base du composant segmenté (taille, séparateurs, contour) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { padding: 6px 12px; font-size: 14px; background: transparent; border: none; border-left: 1px solid var(--line); color: var(--muted, #555); cursor: pointer; }
.seg-btn:first-child { border-left: none; }
.seg-btn.active { background: var(--accent-bg); color: #fff; font-weight: 600; }
.rider-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 14px;
  margin-bottom: 12px; background: #fafbfc; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 10px;
}
.rider-card .rc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0%; }
/* 2 lignes : titre + « modifié » aligné à droite, puis la ligne de détail */
.rider-card .rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Titre sur UNE ligne, tronqué par des points de suspension : un intitulé long
   (nom de prestation complet) ne doit pas déformer la carte ni casser
   l'alignement entre cartes. Le texte entier reste lisible au survol (title)
   et dans le rider (champ + en-tête du récap). */
.rider-card .rc-title { font-weight: 700; font-size: 16px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rider-card .rc-sub { font-size: 14px; color: var(--muted); }
/* Étiquette (type de prestation) sur la ligne de détail de la carte.
   Grosseur maîtrisée : `padding` vertical NUL + `line-height: 1` — mesuré, un
   padding vertical de 1 px fait passer la carte de 67 à 68 px et casse
   l'alignement entre cartes étiquetées et non étiquetées. */
.rider-card .rc-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; margin-right: 2px;
  border-radius: 9px; font-size: 11.5px; font-weight: 600; line-height: 1;
  background: #eef1f5; color: #4a5568; border: 1px solid var(--line);
}
/* Pictogramme du type dans la pastille. `inline-flex` + `align-items: center`
   sur la pastille garantit le centrage vertical de l'emoji ; `line-height: 1`
   et une taille légèrement inférieure évitent que l'emoji (dessiné plus haut
   que le latin) ne fasse grandir la ligne, donc la carte — mesurer la hauteur
   des cartes après toute retouche. */
.rider-card .rc-tag-ico { font-size: 11px; line-height: 1; }
html.dark .rider-card .rc-tag { background: #232b36; color: #c3cbd8; border-color: #2a3441; }
.rider-card .rc-meta { font-size: 13px; color: #8a9099; white-space: nowrap; flex: 0 0 auto; }
.rider-card .rc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rider-card .rc-actions button { font-size: 13px; padding: 5px 10px; }
.rider-card .rc-actions .primary { background: var(--accent-bg); }
.rider-card .rc-actions .danger { background: var(--accent2); }

/* ---------- Sections riders ---------- */
.rider-section { margin: 15px 0; }
.rider-section .section-title { 
  font-size: 15px; 
  font-weight: 600; 
  margin: 0 0 8px 0; 
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Vue rider : colonne compacte (940 px), même assise que l'accueil ---------- */
/* Corrige aussi l'absence d'écart vertical entre les panneaux (ils se touchaient). */
body.rider #view-rider {
  width: 100%; max-width: 940px; margin: 0 auto;
  display: grid; gap: 14px;
}

/* ---------- barre du rider : bandeau compact et collant ---------- */
.rider-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; position: sticky; top: 0; z-index: 30;
  box-shadow: 0 6px 18px rgba(20, 26, 40, .08);
}
html.dark .rider-toolbar { box-shadow: 0 6px 18px rgba(0, 0, 0, .38); }
.rt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.txt.wide-title { width: 100%; max-width: 560px; font-size: 20px; font-weight: 700; padding: 4px 8px; }
.rider-toolbar .rt-controls { gap: 8px 12px; }
.rider-toolbar .req-label { font-size: 13px; }
.rider-toolbar .save-status { font-size: 12.5px; }
.rider-toolbar > .hint { margin: 0; font-size: 12px; }
/* actions secondaires (export, import, réinitialisation) repliées */
.rt-more { border-top: 1px solid var(--line); padding-top: 6px; }
.rt-more > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none; }
.rt-more > summary::-webkit-details-marker { display: none; }
.rt-more > summary::marker { content: ""; }
.rt-more > summary:hover { color: var(--ink); }
.rt-more[open] > summary { margin-bottom: 8px; }
.rt-more .hint { flex: 1 1 240px; margin: 0; }

/* ---------- layout ---------- */
main { padding: 18px 20px; display: grid; gap: 18px; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px;
}
.panel h2 { margin: 0 0 12px; font-size: 18px; }
.panel h3 { font-size: 15px; margin: 14px 0 6px; }
.tag-sheet, .tag-screen {
  font-size: 12px; font-weight: normal; padding: 2px 8px; border-radius: 10px;
  vertical-align: middle;
}
.tag-sheet { background: #e2efe6; color: #235c38; }
.tag-screen { background: #f4e3d7; color: #8a4a1e; }

/* ---------- éditeur ---------- */
.scene-config { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.scene-config label { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.txt { border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font-size: 14px; }
.txt.num { width: 60px; }
.txt.wide { width: 420px; }
.add-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.add-buttons button { background: var(--accent-bg); font-size: 13px; }
.add-buttons button.danger { background: var(--accent2); }

/* ---------- Éléments : lignes denses + détail dépliable ---------- */
/* En-tête de colonnes de la liste */
/* Colonnes : le champ « Modèle » est le plus large — les références de
   sonorisation montent à ~300 px (mesuré : « Dante Netgear M4250-10G2XF-PoE+
   (AV Line) » = 287 px de texte + padding). */
.item-head {
  display: grid;
  grid-template-columns: 22px 10px minmax(110px, 0.75fr) 72px minmax(160px, 1.65fr) 46px minmax(180px, 1fr) 24px;
  gap: 6px; align-items: center; padding: 0 2px 4px;
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--line);
}
.item-list-wrap { margin-top: 4px; }
.item { border-bottom: 1px dashed var(--line); background: transparent; margin: 0; padding: 0; }
.item:last-child { border-bottom: none; }
.item-row {
  display: grid;
  grid-template-columns: 22px 10px minmax(110px, 0.75fr) 72px minmax(160px, 1.65fr) 46px minmax(180px, 1fr) 24px;
  gap: 6px; align-items: center; padding: 4px 2px; border-radius: 6px;
}
.item-row:hover { background: #fafbfc; }
html.dark .item-row:hover { background: #1b202a; }
.item-row label { display: block; margin: 0; }
/* cellule du nom : « nouveau » + champ sur la même ligne */
.item-row .fld-name { display: flex; align-items: center; gap: 6px; }
.item-row .fld-name input { flex: 1 1 auto; min-width: 0; }
.item-new {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; background: var(--accent-bg); color: #fff;
  border-radius: 999px; padding: 1.5px 8px; white-space: nowrap;
}
/* élément ajouté, pas encore sauvegardé : mis en valeur */
.item.is-new { background: #eef4fb; box-shadow: inset 3px 0 0 var(--accent); }
html.dark .item.is-new { background: #17233a; box-shadow: inset 3px 0 0 var(--accent); }
/* libellé masqué visuellement dans la ligne (repris en en-tête de colonne) */
.item-row .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.item-row input, .item-row select { width: 100%; padding: 3px 6px; font-size: 13.5px; }
.item-row .txt.num-in { width: 100%; }
.item-row .fld-mic { display: block; }
.item-row .item-del {
  padding: 2px 6px; font-size: 13px; line-height: 1.1;
  background: transparent; border: 1px solid transparent; color: var(--muted);
}
.item-row .item-del:hover { background: #b44; border-color: #b44; color: #fff; }
.item-toggle {
  width: 20px; height: 20px; padding: 0; font-size: 11px; line-height: 1;
  background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 4px;
}
.item-toggle:hover { background: var(--panel); color: var(--ink); }
.item.open .item-toggle { transform: rotate(90deg); }
.item-dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .22); }
.item-detail { display: none; }
.item.open .item-detail {
  display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 10px;
  padding: 9px 2px 12px 32px; background: #fafbfc; border-top: 1px solid var(--line);
}
html.dark .item.open .item-detail { background: #1b202a; }
.item-detail label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.item-detail input, .item-detail select { width: 100%; padding: 4px 6px; font-size: 13px; }
/* pastilles de type (mêmes teintes que les remplissages du plan 2D) */
.item-dot.t-musician { background: #e4ecf4; }
.item-dot.t-mic      { background: #f5e7c6; }
.item-dot.t-di       { background: #e3f0e1; }
.item-dot.t-amp      { background: #f2e0d6; }
.item-dot.t-head     { background: #efe6f5; }
.item-dot.t-wedge    { background: #e2f3ee; }
.item-dot.t-backline { background: #e6e9ee; }
.item-dot.t-sono     { background: #e7ded0; }
.item-dot.t-light    { background: #f7f0d2; }
.item-dot.t-drumkit  { background: #f4e4e4; }
html.dark .item-dot.t-musician { background: #22304a; }
html.dark .item-dot.t-mic      { background: #4a4326; }
html.dark .item-dot.t-di       { background: #23402a; }
html.dark .item-dot.t-amp      { background: #4a3226; }
html.dark .item-dot.t-head     { background: #33273d; }
html.dark .item-dot.t-wedge    { background: #1e3a33; }
html.dark .item-dot.t-backline { background: #2b313c; }
html.dark .item-dot.t-sono     { background: #3a3428; }
html.dark .item-dot.t-light    { background: #4a4426; }
html.dark .item-dot.t-drumkit  { background: #4a2626; }
/* Suggestions de modèles (micros, wedges) : dropdown custom de pleine
   largeur du champ (le datalist natif n'a pas une largeur fiable
   entre navigateurs) */
.item .fld-mic { position: relative; }
.mic-suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 40;
  max-height: 220px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(20, 26, 40, .14);
}
.mic-suggest div { padding: 7px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.mic-suggest div:hover, .mic-suggest div.sel { background: #e8eef6; }
html.dark .mic-suggest { background: #1b232b; border-color: #2a3441; }
html.dark .mic-suggest div { color: #e6eaf0; }
html.dark .mic-suggest div:hover, html.dark .mic-suggest div.sel { background: #232b36; }
/* Champ « Type de prestation » (étiquette du rider) — dans le bandeau, à côté
   des actions. Purement informatif pour le reste de l'app : il ne change que
   l'étiquette rangée sur le rider. */
.rt-type { font-size: 13px; font-weight: 600; color: var(--muted); }
#f-rider-type { font-size: 13.5px; font-weight: 600; color: var(--ink); max-width: 260px; }

/* ---------- plan 2D ---------- */
.svg-wrap { overflow-x: auto; }
#plan2d { width: 100%; max-width: 1080px; display: block; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
#plan2d .item-shape { cursor: grab; }
#plan2d .item-shape:active { cursor: grabbing; }
#plan2d text { pointer-events: none; }

/* ---------- Remplissages par type (monochrome-safe : gris dérivés de la teinte) ---------- */
.t-musician  { fill: #e4ecf4; }
.t-mic       { fill: #f5e7c6; }
.t-di        { fill: #e3f0e1; }
.t-amp       { fill: #f2e0d6; }
.t-head      { fill: #efe6f5; }
.t-wedge     { fill: #e2f3ee; }
.t-backline  { fill: #e6e9ee; }
.t-sono      { fill: #e7ded0; }
.t-light     { fill: #f7f0d2; }
.t-drumkit   { fill: #f4e4e4; }

.legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px;
  font-size: 13px; align-items: center;
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend svg { vertical-align: middle; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
th { background: #eef1f5; font-size: 13px; }
.notes-block { border: 1px solid var(--line); border-radius: 6px; padding: 10px; font-size: 14px; white-space: pre-wrap; }
footer { text-align: center; font-size: 13px; color: var(--muted); padding: 14px; }

/* ---------- Récapitulatif du matériel (section 4) ---------- */
/* En-tête du récap : nom de la prestation (+ groupe · événement · date) —
   visible à l'écran et repris à l'impression (document à emporter). */
.matrecap-head { border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 10px; }
.matrecap-presta-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.matrecap-presta { font-size: 19px; font-weight: 700; line-height: 1.25; }
/* Étiquette du type de prestation, à droite du nom (écran + impression) */
.matrecap-type {
  padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line);
  background: #eef1f5; color: #4a5568;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; white-space: nowrap;
}
html.dark .matrecap-type { background: #232b36; color: #c3cbd8; border-color: #2a3441; }
.matrecap-ident { font-size: 14px; margin-top: 3px; }
.matrecap-meta { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.matrecap-contact { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
#table-matrecap .mat-qty { text-align: right; white-space: nowrap; }
#table-matrecap tr.mat-type th { background: #eef1f5; text-align: left; font-size: 13.5px; border-top: 2px solid var(--line); }
#table-matrecap tr.mat-type th.mat-qty { text-align: right; }
#table-matrecap tfoot td { background: #eef1f5; font-weight: 700; }
#table-matrecap tfoot td.mat-qty { text-align: right; }

/* ---------- bandeau hors-ligne ---------- */
.server-banner {
  background: #fff4e0; border: 1px solid #e2a84a; color: #6b4a12;
  border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 0 0 12px;
}

/* ---------- Zone date unique (saisie libre + bouton calendrier) ---------- */
.date-wrap { display: inline-flex; align-items: stretch; gap: 0; }
.date-wrap .date-combo { border-radius: 4px 0 0 4px; }
.cal-btn {
  border: 1px solid var(--line); border-left: none; border-radius: 0 4px 4px 0;
  background: var(--panel); color: var(--ink); cursor: pointer;
  padding: 0 9px; font-size: 15px; line-height: 1.6;
}
.cal-btn:hover { background: var(--line); }
.picker-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.date-wrap.required-missing .date-combo,
.date-wrap.required-missing .cal-btn { border-color: #e0563a !important; }
.date-wrap.required-missing .date-combo { background: rgba(224,86,58,0.10); }

/* ---------- Plan 2D : couleurs SVG (écran, mode clair) ---------- */
#plan2d .svg-title  { fill: #111; }
#plan2d .svg-sub    { fill: #555; }
#plan2d .svg-ax     { fill: #666; }
#plan2d .grid-line  { stroke: #d4d9e0; }
#plan2d .stage-bg   { fill: #ffffff; }
#plan2d .svg-stroke { stroke: #111; }
#plan2d .item-line  { stroke: #111; }
#plan2d .item-dot   { fill: #111; }
#plan2d .item-label { fill: #111; }

/* ---------- Thème sombre ---------- */
html.dark {
  --bg: #101319;
  --panel: #171b23;
  --ink: #e6e9ee;
  --muted: #9aa2b0;
  --line: #2b323f;
  --accent: #5b93d6;
  /* accent de TEXTE/bordure : clair pour être lisible sur fond sombre */
  --accent-bg: #3067a8;
  /* accent de FOND (libellé par-dessus) : mesuré 4,75:1 avec le texte du thème
     sombre (#e6e9ee) et 5,78:1 avec du blanc, alors que #5b93d6 (ci-dessus) ne
     donne que 3,19:1 — trop juste pour un fond portant un libellé. */
  --accent2: #d0705a;
}
html.dark body { background: var(--bg); color: var(--ink); }
html.dark header { background: #0b0d12; }
html.dark .sort-label select { background: #1b202b; color: var(--ink); border-color: var(--line); }
html.dark .search-clear { background: #2a3547; color: var(--ink); }
html.dark .seg-btn { background: transparent; color: var(--muted, #9aa3b2); }
html.dark .seg-btn.active { background: var(--accent-bg); color: #fff; }
/* même affordance que la version claire, avec des teintes sombres.
   Fond actif volontairement plus sombre que `--accent` : l'accent sombre
   (#5b93d6) est calibré pour du TEXTE coloré, mais donne du blanc sur lui un
   contraste de **3,19:1** (mesuré), sous le seuil AA de 4,5:1. */
html.dark .home-actions .seg-btn { background: #232b36; color: #c3cbd8; }
html.dark .home-actions .seg-btn:hover { background: #2b343f; }
html.dark .home-actions .seg-btn.active { background: var(--accent-bg); color: #fff; }
html.dark .btn-save { background: #2f8f4e; color: #fff; }
html.dark .btn-save:hover { background: #37a55c; }
html.dark button, html.dark .btn-like { background: #2a3547; color: var(--ink); }
html.dark button:hover, html.dark .btn-like:hover { background: #34425a; }
html.dark #btn-print-salle { background: #a34a1f; color: #fff; }
html.dark .rider-card { background: #1b202a; border-color: var(--line); }
html.dark .rider-card .rc-meta { color: #7d8697; }
html.dark .rider-card .rc-actions button { color: var(--ink); }
html.dark .item-row .item-del { background: transparent; border-color: transparent; color: var(--muted); }
html.dark .item-row .item-del:hover { background: #b44; border-color: #b44; color: #fff; }
html.dark th { background: #1e242f; color: var(--ink); }
html.dark #table-matrecap tr.mat-type th { background: #1c212b; }
html.dark #table-matrecap tfoot td { background: #1e242f; }

/* ---- Blocs repliables (Alimentations, Backline & Moniteurs) ---- */
.collapsible .sec-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.sec-toggle { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1; }
.collapsible .sec-body { display: none; }
.collapsible.open .sec-body { display: block; }
.collapsible.open .sec-toggle { transform: rotate(90deg); }
html.dark .tag-sheet { background: #14351f; color: #6fc38a; }
html.dark .tag-screen { background: #3a2113; color: #e0a173; }
html.dark .server-banner { background: #2a2010; border-color: #8a6a2a; color: #e6c98a; }
html.dark .cal-btn { background: #1b202a; color: var(--ink); border-color: var(--line); }
html.dark .cal-btn:hover { background: #262d3a; }
html.dark .txt, html.dark .item input, html.dark .item select { background: #12161d; color: var(--ink); border-color: var(--line); }
html.dark .notes-block { background: #12161d; border-color: var(--line); }
html.dark .sep { background: #2b323f; }
html.dark .legend .sw { border-color: var(--ink); }
html.dark .req-label .txt.required-missing,
html.dark .req-label .date-wrap.required-missing .date-combo { background: rgba(224,86,58,0.18); }
html.dark .save-status { color: #8a94a6; }
html.dark .save-status.ok { color: #5fc37f; }
/* remplissages SVG plus foncés en sombre */
html.dark .t-musician  { fill: #22304a; }
html.dark .t-mic       { fill: #4a4326; }
html.dark .t-di        { fill: #23402a; }
html.dark .t-amp       { fill: #4a3226; }
html.dark .t-head      { fill: #33273d; }
html.dark .t-wedge     { fill: #1e3a33; }
html.dark .t-backline  { fill: #2b313c; }
html.dark .t-sono      { fill: #3a3428; }
html.dark .t-light     { fill: #4a4426; }
html.dark .t-drumkit   { fill: #4a2626; }
/* thème sombre : plan SVG lisible sur fond sombre */
html.dark #plan2d .svg-title { fill: #eef1f5; }
html.dark #plan2d .svg-sub { fill: #a8b1c0; }
html.dark #plan2d .svg-ax { fill: #8b94a4; }
html.dark #plan2d .grid-line { stroke: #262d3a; }
html.dark #plan2d .stage-bg { fill: #151922; }
html.dark #plan2d .svg-stroke { stroke: #e6e9ee; }
html.dark #plan2d .item-line { stroke: #dfe4ea; }
html.dark #plan2d .item-dot { fill: #e6e9ee; }
html.dark #plan2d .item-label { fill: #eef1f5; }

/* ============ RESPONSIVE — TABLETTE / PETITS ÉCRANS ============ */
@media (max-width: 900px) {
  /* Boutons suffisamment grands pour le tactile (cible ≥ 40px) */
  button, .btn-like { padding: 12px 14px; font-size: 15px; min-height: 44px; }
  .home-actions button, .home-actions .btn-like { font-size: 15px; }
  /* Champs : plus larges pour le clavier tablette */
  .header-controls .txt { width: 180px; }
  .header-controls .txt.date { width: 150px; }
  .txt.wide { width: 320px; }
  .txt.wide-title { width: 40vw; min-width: 220px; }
  /* Cartes riders : titre/actions sur 2 rangées, zones tactiles élargies */
  .rider-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
  .rider-card .rc-actions { justify-content: flex-start; }
  .rider-card .rc-actions button { font-size: 15px; padding: 10px 14px; }
  .sort-label select { font-size: 15px; padding: 8px 10px; }
  .search-wrap { flex: 1 1 100%; max-width: none; min-width: 0; }
  .search-wrap .txt { font-size: 15px; min-height: 44px; }
  .home-actions .seg-btn { font-size: 15px; padding: 10px 14px; min-height: 44px; }
  /* Tables : défilement horizontal au lieu de débordement */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 640px; }
  /* Éditeur : la ligne d'élément passe sur 2 rangées de 4 cellules
     (bascule, pastille, nom, entrée / modèle, canal, notes, ×) pour ne pas
     déborder sur un écran étroit */
  .item-row, .item-head { grid-template-columns: 22px 10px 1fr 1fr; }
  .item-head { display: none; }
  .item .num-in { width: 80px; }
  .item-detail { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  /* Plan 2D : pleine largeur, pas de max */
  #plan2d { max-width: 100%; }
  /* Barre du rider : rangées empilées, séparateurs inutiles */
  .rt-row { gap: 12px; }
  .sep { display: none; }
}

/* ---------- Bouton "Versions" + panneau de restauration ---------- */
#btn-versions { background: #fff; color: var(--ink); border: 1.5px solid var(--line);
  border-radius: 8px; font-size: 15px; padding: 8px 12px; cursor: pointer; }
#btn-versions:hover { border-color: var(--accent); color: var(--accent); }
#btn-versions.active { background: rgba(43,95,158,0.08); border-color: var(--accent); color: var(--accent); }
.btn-ver-count { font-size: 13px; color: var(--muted); margin-left: 6px; }
#btn-versions.active .btn-ver-count { color: inherit; }
.versions-panel { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fbfcfd; padding: 12px 16px 8px; }
.vp-title { font-size: 16px; margin-bottom: 4px; }
.vp-close { float: right; margin-left: auto; background: none; border: none;
  font-size: 17px; cursor: pointer; color: var(--muted); padding: 0 4px; }
.vp-close:hover { color: var(--danger, #e0563a); }
.versions-list { margin-top: 8px; max-height: 320px; overflow-y: auto; }
.ver-item { display: flex; align-items: center; gap: 12px; padding: 8px 4px;
  border-top: 1px solid var(--line); flex-wrap: wrap; }
.ver-item:first-child { border-top: none; }
.ver-when { font-weight: 600; min-width: 108px; }
.ver-label { color: var(--muted); flex: 1; }
.ver-meta { font-size: 13px; color: var(--muted); }
.ver-actions { display: flex; gap: 8px; }
.ver-actions button { background: #fff; border: 1.5px solid var(--line); border-radius: 7px;
  padding: 5px 10px; font-size: 14px; cursor: pointer; }
.ver-actions button[data-restore]:hover { border-color: #4caf6d; color: #4caf6d; }
.ver-actions button[data-vdel]:hover { border-color: #e0563a; color: #e0563a; }
@media (max-width: 860px) {
  .ver-item { gap: 6px; }
  .ver-actions { margin-left: auto; }
}
html.dark .versions-panel { background: #161c23; }
html.dark #btn-versions, html.dark .ver-actions button { background: #1b232b; }
html.dark .ver-item { border-top-color: #2a343d; }

/* ---------- Bouton de déconnexion (header) ---------- */
.logout-form { margin: 0; display: inline-flex; }
.btn-logout {
  background: #444b58; color: #e6eaf0; border: 1px solid #3a4150;
  border-radius: 6px; font-size: 14px; padding: 6px 12px; cursor: pointer;
}
.btn-logout:hover { background: var(--accent-bg); border-color: var(--accent-bg); color: #fff; }

/* ---------- Page de connexion ---------- */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.login-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 32px 28px; width: 100%; max-width: 380px;
  box-shadow: 0 8px 28px rgba(20,26,38,.10);
}
.login-box h1 { margin: 0 0 4px; font-size: 24px; }
.login-sub { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.login-box label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.login-box input[type="password"] {
  width: 100%; padding: 11px 12px; font-size: 17px;
  border: 1.5px solid var(--line); border-radius: 8px;
}
.login-box input[type="password"]:focus { outline: none; border-color: var(--accent); }
.login-box button {
  width: 100%; margin-top: 14px; padding: 11px 12px; font-size: 16px;
  background: var(--accent-bg); color: #fff; border: none; border-radius: 8px; cursor: pointer;
}
.login-box button:hover { background: #3571b8; }
.login-err {
  margin: 14px 0 0; padding: 9px 12px; font-size: 14px; color: #8a2f1d;
  background: #fdeceb; border: 1px solid #f3c1b8; border-radius: 8px;
}
.login-lastlogin {
  margin: 16px 0 0; padding: 0; font-size: 13px; color: var(--muted);
  text-align: center;
}

/* ---------- Journal des événements (panneau du header) ---------- */
#btn-journal {
  background: #2a3547; color: #e6eaf0; border: 1px solid #3a4150;
  border-radius: 6px; font-size: 14px; padding: 6px 12px; cursor: pointer;
}
#btn-journal:hover { background: #34425a; border-color: #5b93d6; color: #fff; }
#btn-journal.active { background: var(--accent-bg); border-color: var(--accent); color: #fff; }
.journal-panel {
  max-width: 960px; margin: 14px auto 0; padding: 14px 18px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.journal-panel h3 { font-size: 17px; margin: 0 0 8px; }
.journal-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.journal-filters select { width: 220px; padding: 6px 8px; font-size: 14px;
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.journal-filters input[type="search"] { flex: 1; min-width: 180px; padding: 6px 10px;
  font-size: 14px; border: 1.5px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); }
.journal-list { margin-top: 10px; max-height: 420px; overflow-y: auto; }
.journal-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 7px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.journal-item:first-child { border-top: none; }
.journal-ts { font-size: 13px; color: var(--muted); min-width: 118px; font-variant-numeric: tabular-nums; }
.journal-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; flex: 0 0 auto; }
.journal-msg { flex: 1; min-width: 160px; }
.journal-ip { font-size: 12px; color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* badges par type */
.jb-auth { background: #e8effc; color: #2b5f9e; }
.jb-riders { background: #eef4ea; color: #2e6e46; }
.jb-restore { background: #f4ecdb; color: #8a6a2a; }
.jb-reset { background: #fbe9e6; color: #a34a1f; }
.jb-import { background: #ece9f6; color: #5b4a8a; }
/* thème sombre */
html.dark #btn-journal { background: #2a3547; color: var(--ink); border-color: var(--line); }
html.dark #btn-journal.active { background: var(--accent-bg); color: #fff; }
html.dark .journal-panel { background: #161c23; border-color: var(--line); }
html.dark .journal-filters select, html.dark .journal-filters input[type="search"] { background: #12161d; color: var(--ink); }
html.dark .journal-item { border-top-color: #2a343d; }
html.dark .journal-ts, html.dark .journal-ip { color: #8a94a6; }
html.dark .jb-auth { background: #1b2a40; color: #8fb4e8; }
html.dark .jb-riders { background: #1d3324; color: #6fc38a; }
html.dark .jb-restore { background: #3a3120; color: #e0c28a; }
html.dark .jb-reset { background: #3a241d; color: #e0a173; }
html.dark .jb-import { background: #2b2540; color: #b3a4e6; }
@media (max-width: 860px) {
  .journal-ts { min-width: 0; }
  .journal-filters select, .journal-filters input[type="search"] { width: 100%; flex: 1 1 100%; }
}

/* ============ IMPRESSION ============ */
.print-mode-badge { display: none; }


/* ============ REFONTE « ATELIER » (branche refonte-atelier) ============
   Coquille à trois zones : liste des prestations repliable à gauche, contenu au
   centre, panneau de références à droite de l'éditeur. Les feuilles imprimables
   ne changent pas : sidebar et panneau de références sont masqués à l'impression. */

.shell { display: grid; grid-template-columns: 278px minmax(0, 1fr); min-height: 100vh; }
body.sidebar-collapsed .shell { grid-template-columns: 40px minmax(0, 1fr); }
.content { min-width: 0; }

/* En-tête : la marque vit dans la barre latérale, la barre du haut ne garde
   que les commandes (moins de chrome, plus de place pour le contenu). */
header { padding: 8px 18px; }
header h1 { font-size: 15px; letter-spacing: .2px; }
header .hint { display: none; }

/* ---------- barre latérale ---------- */
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 12px 10px;
  background: var(--panel); border-right: 1px solid var(--line);
}
.sb-head { display: flex; align-items: center; gap: 9px; }
.sb-logo {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: var(--accent-bg); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: -.02em;
}
.sb-brand { min-width: 0; }
.sb-brand b { display: block; font-size: 14px; line-height: 1.15; }
.sb-brand span { display: block; font-size: 11px; color: var(--muted); }
.sb-toggle {
  margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: transparent;
  color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.sb-toggle:hover { color: var(--ink); border-color: var(--accent); }
.sb-new {
  width: 100%; border: 0; border-radius: 9px; padding: 9px 10px;
  background: var(--accent-bg); color: #fff; font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer;
}
.sb-new:hover { filter: brightness(1.08); }
.sb-search { position: relative; }
.sb-search input { width: 100%; padding-right: 26px; }
.sb-filters { display: flex; align-items: center; gap: 6px; }
.sb-filters .seg { flex: 1 1 auto; min-width: 0; }
.sb-filters .seg-btn { flex: 1 1 0; padding: 4px 3px; font-size: 11px; white-space: nowrap; }
.sb-filters .sort-label { flex: 0 0 auto; font-size: 0; color: var(--muted); }   /* libellé masqué : title + aria-label portent l'info */
.sb-filters .sort-label select { font-size: 11px; padding: 3px 2px; max-width: 74px; }
.sb-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 3px; margin: 0 -4px; padding: 0 4px; }
.sb-foot { border-top: 1px solid var(--line); padding-top: 8px; font-size: 11.5px; color: var(--muted); }
.sb-foot .sync-ind { font-size: 11.5px; }

/* carte de prestation compacte (remplace la carte large de l'accueil) */
#sidebar .rider-section { margin: 0 0 6px; }
#sidebar .section-title { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 6px 2px 4px; }
#sidebar .rider-list { display: flex; flex-direction: column; gap: 3px; }
#sidebar .rider-card {
  display: block; padding: 7px 8px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
}
#sidebar .rider-card:hover { background: rgba(43, 95, 158, .07); }
#sidebar .rider-card.is-active { background: rgba(43, 95, 158, .12); border-color: rgba(43, 95, 158, .35); }
#sidebar .rc-main { display: block; }
#sidebar .rc-head { display: flex; align-items: baseline; gap: 6px; }
#sidebar .rc-title { font-size: 13px; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidebar .rc-meta { display: none; }
#sidebar .rc-sub { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#sidebar .rc-tag { font-size: 10px; padding: 0 5px; margin-right: 4px; }
#sidebar .rc-tag-ico { font-size: 9px; }
/* Actions masquées tant qu'on n'est pas sur la carte : sans ça les cartes
   inactives gardent la hauteur des boutons et la liste respire mal. */
#sidebar .rc-actions { display: none; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
#sidebar .rider-card:hover .rc-actions,
#sidebar .rider-card:focus-within .rc-actions { display: flex; }
#sidebar .rc-actions button { padding: 2px 6px; font-size: 10.5px; border-radius: 5px; line-height: 1.5; }
html.dark #sidebar .rider-card:hover { background: rgba(91, 147, 214, .12); }
html.dark #sidebar .rider-card.is-active { background: rgba(91, 147, 214, .18); border-color: rgba(91, 147, 214, .45); }

/* repli : il ne reste qu'un rail avec le bouton de dépliage */
body.sidebar-collapsed .sidebar { padding: 10px 6px; align-items: center; }
body.sidebar-collapsed .sb-brand,
body.sidebar-collapsed .sb-logo,
body.sidebar-collapsed .sb-new,
body.sidebar-collapsed .sb-search,
body.sidebar-collapsed .sb-filters,
body.sidebar-collapsed .sb-list,
body.sidebar-collapsed .sb-foot,
body.sidebar-collapsed #rider-empty,
body.sidebar-collapsed #rider-no-result { display: none; }
body.sidebar-collapsed .sb-head { justify-content: center; }
body.sidebar-collapsed .sb-toggle { margin: 0; }

/* élément actif (cible du panneau de références) */
#item-list .item.is-active { background: rgba(43, 95, 158, .07); border-radius: 8px; box-shadow: inset 3px 0 0 var(--accent); }
html.dark #item-list .item.is-active { background: rgba(91, 147, 214, .12); }

/* ---------- éditeur + panneau de références ---------- */
#editeur .ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 16px; align-items: start; }
#editeur .ed-main { min-width: 0; }
#editeur h2 .refs-open {
  float: right; font: inherit; font-size: 11.5px; font-weight: 500; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--accent); cursor: pointer;
}
body.refs-hidden #editeur .ed-grid { grid-template-columns: minmax(0, 1fr); }
body.refs-hidden .ed-side { display: none; }

.ed-side {
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  background: var(--panel); max-height: calc(100vh - 110px);
}
.refs-head { display: flex; align-items: center; gap: 8px; }
.refs-head h3 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.refs-close {
  margin-left: auto; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; line-height: 1;
}
.refs-close:hover { color: var(--ink); }
.refs-target { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); min-height: 2.4em; }
.refs-target strong { color: var(--ink); }
.refs-groups { display: flex; flex-direction: column; gap: 4px; overflow: auto; padding-right: 2px; }
.refs-group { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.refs-group.current { border-color: var(--accent); }
.rg-head {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px;
  background: transparent; border: 0; font: inherit; font-size: 12.5px; color: var(--ink);
  cursor: pointer; text-align: left;
}
.rg-head:hover { background: rgba(43, 95, 158, .06); }
.rg-caret { font-size: 10px; color: var(--muted); transition: transform .12s; }
.refs-group.open .rg-caret { transform: rotate(90deg); }
.rg-label { flex: 1 1 auto; }
.rg-n { font-size: 10.5px; color: var(--muted); }
.rg-body { border-top: 1px solid var(--line); padding: 3px; }
.rg-fam { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 6px 5px 2px; }
.ref-item {
  display: block; width: 100%; text-align: left; padding: 4px 6px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-item:hover { background: rgba(43, 95, 158, .1); }
.ref-item.on { background: var(--accent-bg); color: #fff; }
.refs-empty { margin: 4px 6px; font-size: 11.5px; color: var(--muted); }
.refs-hint { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--muted); }
html.dark .rg-head:hover { background: rgba(91, 147, 214, .12); }
html.dark .ref-item:hover { background: rgba(91, 147, 214, .16); }

/* la vue rider s'élargit pour loger l'éditeur et ses références */
body.rider #view-rider { max-width: 1280px; }

@media (max-width: 1180px) {
  #editeur .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-side { position: static; max-height: none; }
}
@media (max-width: 900px) {
  .shell, body.sidebar-collapsed .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--line); }
  body.sidebar-collapsed .sidebar { max-height: 44px; }
}


/* ============ DIRECTION « ATELIER » : barre de prestation, cartes, lignes ============ */

/* --- barre de prestation : titre large, identité, actions discrètes --- */
.rider-toolbar {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px 12px; box-shadow: 0 1px 2px rgba(20, 30, 25, .04);
}
.rt-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.rt-titles { flex: 1 1 320px; min-width: 0; }
.rt-title { display: block; }
.rt-title .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.txt.wide-title {
  width: 100%; max-width: none; border: 1px solid transparent; background: transparent;
  font-size: 25px; font-weight: 650; letter-spacing: -.022em; padding: 2px 6px; border-radius: 10px;
}
.txt.wide-title:hover { border-color: var(--line-2); }
.txt.wide-title:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px rgba(43, 95, 158, .15); }
.rt-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 6px 0; }
.rt-meta { font-size: 12.5px; color: var(--muted); }
.rt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.btn-quiet {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 9px; padding: 7px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.btn-quiet:hover { background: var(--bg); }
.print-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.print-seg .seg-btn {
  border: 0; background: var(--panel); color: var(--ink); font: inherit;
  font-size: 12.5px; padding: 7px 11px; cursor: pointer;
}
.print-seg .seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.print-seg .seg-btn:hover { background: var(--bg); }
.rider-toolbar .btn-save { border: 0; border-radius: 9px; padding: 8px 15px; font-size: 13px; }
.rt-sub {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2);
}
.rt-sub:empty { display: none; }
.rt-type { display: inline-flex; align-items: center; }
.rt-type .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rt-type select.txt {
  border: 1px solid #cfe0d5; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 550; background: rgba(43, 95, 158, .08); color: var(--accent);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.rt-more { margin-left: auto; font-size: 12px; }
html.dark .rider-toolbar { box-shadow: none; }

/* --- cartes de l'éditeur --- */
#editeur.ed-wrap { background: transparent; border: 0; box-shadow: none; padding: 0; }
.ed-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 30, 25, .04); margin-bottom: 18px; overflow: hidden;
}
.ed-h {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px 16px 12px;
  font-size: 13px; font-weight: 650; color: var(--ink); border-bottom: 1px solid var(--line-2);
}
.ed-h .step {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(43, 95, 158, .12); color: var(--accent);
  font-family: var(--mono, ui-monospace); font-size: 11px; font-weight: 700;
}
.ed-note { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ed-body { padding: 16px; }
.ed-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.ed-fields > label { display: flex; flex-direction: column; gap: 5px; }
.ed-fields .fl { font-size: 11.5px; font-weight: 550; color: var(--muted); }
.ed-fields .fh { font-size: 10.5px; color: var(--muted); }
.ed-fields input.txt {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  font-size: 14px; background: var(--panel); color: var(--ink);
}
.ed-fields input.txt:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 95, 158, .15); }
html.dark .ed-h .step { background: rgba(91, 147, 214, .18); }

/* --- boutons d'ajout : pastille de type, style chip pointillé --- */
.add-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.add-buttons button {
  display: inline-flex; align-items: center; gap: 7px; background: var(--panel);
  border: 1px dashed var(--line); color: var(--ink); border-radius: 9px;
  font: inherit; font-size: 12px; padding: 7px 10px; cursor: pointer;
}
.add-buttons button:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.add-btn::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--muted); flex: 0 0 auto; }
.add-btn[data-type="musician"]::before { background: #3c6188; }
.add-btn[data-type="mic"]::before { background: #b8862b; }
.add-btn[data-type="di"]::before { background: #517a52; }
.add-btn[data-type="amp"]::before { background: #a75a41; }
.add-btn[data-type="head"]::before { background: #71497f; }
.add-btn[data-type="wedge"]::before { background: #2a7a72; }
.add-btn[data-type="backline"]::before { background: #5a6570; }
.add-btn[data-type="sono"]::before { background: #77684c; }
.add-btn[data-type="light"]::before { background: #8a7a24; }
.add-btn[data-type="drumkit"]::before { background: #9c5454; }

/* --- lignes d'éléments : cartes, champs sans bordure --- */
#item-list { display: flex; flex-direction: column; gap: 6px; }
#item-list .item { border: 0; background: transparent; margin: 0; padding: 0; }
#item-list .item-row {
  display: grid; align-items: center; gap: 8px; min-height: 48px; padding: 5px 8px;
  grid-template-columns: 20px 10px minmax(0, 1.2fr) 68px minmax(0, 1.45fr) 54px minmax(0, 1.25fr) 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
}
#item-list .item-row:hover { border-color: #c7d2cb; }
html.dark #item-list .item-row:hover { border-color: #38414e; }
#item-list .item-row input, #item-list .item-row select {
  width: 100%; border: 1px solid transparent; background: transparent; color: var(--ink);
  border-radius: 7px; padding: 7px 6px; font-size: 13.5px;
}
#item-list .item-row input:hover, #item-list .item-row select:hover { border-color: var(--line-2); }
#item-list .item-row input:focus, #item-list .item-row select:focus {
  outline: none; border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 3px rgba(43, 95, 158, .14);
}
#item-list .item-row input::placeholder { color: #a9b2ac; }
#item-list .item-row .fld-name input { font-weight: 600; }
#item-list .item-row .txt.num-in { text-align: center; color: var(--muted); font-family: var(--mono, ui-monospace); }
#item-list .item-row .item-toggle { border: 0; background: transparent; color: var(--muted); }
#item-list .item-row .item-del { opacity: .5; border: 0; background: transparent; }
#item-list .item-row .item-del:hover { opacity: 1; background: var(--accent2); color: #fff; }
.ed-card .item-head {
  display: grid; align-items: center; gap: 8px; padding: 0 8px 6px;
  grid-template-columns: 20px 10px minmax(0, 1.2fr) 68px minmax(0, 1.45fr) 54px minmax(0, 1.25fr) 22px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
#item-list .item.open .item-detail { margin: 0 8px 4px; border-radius: 0 0 10px 10px; }
#item-list .item.is-active .item-row { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 95, 158, .12); }
#item-list .item.is-new .item-row { border-color: #9dc7ae; background: #f6faf7; }
html.dark #item-list .item.is-active .item-row { border-color: var(--accent); }
html.dark #item-list .item.is-new .item-row { background: #16211a; border-color: #2c5140; }

/* --- mini récapitulatif matériel dans la colonne de droite --- */
.side-sep { border-top: 1px solid var(--line-2); margin: 10px -10px 8px; }
.side-h {
  margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); display: flex; justify-content: space-between; align-items: baseline;
}
.side-h span { font-family: var(--mono, ui-monospace); font-size: 11px; }
.side-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 3px 0; }
.side-row-btn {
  width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit;
  font-size: 12.5px; text-align: left; cursor: pointer; border-radius: 6px; padding: 4px 5px; margin: 0 -5px;
}
.side-row-btn:hover { background: rgba(43, 95, 158, .08); }
.side-row-btn.open { background: rgba(43, 95, 158, .1); }
.side-caret { display: inline-block; margin-left: 6px; font-size: 9px; color: var(--muted); transition: transform .12s; }
.side-row-btn.open .side-caret { transform: rotate(90deg); }
.side-det-wrap { padding: 2px 0 4px 10px; border-left: 2px solid var(--line-2); margin: 2px 0 4px 2px; }
.side-det {
  display: flex; width: 100%; justify-content: space-between; gap: 8px; align-items: baseline;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px;
  text-align: left; cursor: pointer; border-radius: 5px; padding: 2px 5px;
}
.side-det:hover { color: var(--ink); background: rgba(43, 95, 158, .07); }
.side-det-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; color: var(--ink-2, var(--ink)); }
.side-det-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; color: var(--muted); }
.side-det-c { font-family: var(--mono, ui-monospace); font-size: 10.5px; flex: 0 0 auto; margin-left: auto; }
html.dark .side-row-btn:hover, html.dark .side-det:hover { background: rgba(91, 147, 214, .14); }
html.dark .side-row-btn.open { background: rgba(91, 147, 214, .16); }
.side-l { display: inline-flex; align-items: center; gap: 7px; }
.side-n { font-family: var(--mono, ui-monospace); font-size: 12px; color: var(--muted); }
.side-dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; background: var(--muted); }
.side-empty { margin: 2px 0; font-size: 11.5px; color: var(--muted); }
.side-dot.add-t-musician { background: #3c6188; }
.side-dot.add-t-mic { background: #b8862b; }
.side-dot.add-t-di { background: #517a52; }
.side-dot.add-t-amp { background: #a75a41; }
.side-dot.add-t-head { background: #71497f; }
.side-dot.add-t-wedge { background: #2a7a72; }
.side-dot.add-t-backline { background: #5a6570; }
.side-dot.add-t-sono { background: #77684c; }
.side-dot.add-t-light { background: #8a7a24; }
.side-dot.add-t-drumkit { background: #9c5454; }

@media (max-width: 1180px) {
  .ed-fields { grid-template-columns: 1fr; }
  #item-list .item-row, .ed-card .item-head { grid-template-columns: 20px 10px minmax(0, 1fr) 64px minmax(0, 1.3fr) 52px 22px; }
  .ed-card .item-head span:nth-child(7) { display: none; }
}

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; }
  /* ---- Impression TOUJOURS en clair, même si le thème sombre est actif ----
     Les règles `html.dark …` (variables de couleur, fonds, `fill`) ont une
     spécificité supérieure à celles d'impression : sans ce bloc, une
     impression lancée en mode sombre sort avec des fonds foncés et du texte
     quasi blanc, illisible. On remet donc la palette claire ici, et on
     neutralise explicitement les règles sombres qui posent une couleur. */
  html, :root, html.dark {
    --bg: #fff; --panel: #fff; --ink: #111; --muted: #333; --line: #000;
    --accent: #000; --accent-bg: #000; --accent2: #000; --soft: #fff; --th: #eee;
  }
  body, html.dark body { background: #fff !important; color: #111 !important; }
  .panel, html.dark .panel { background: #fff !important; }
  th, html.dark th { background: #eee !important; color: #111 !important; }
  td, html.dark td { color: #111 !important; }
  /* fonds sombres posés par le thème sombre sur certaines cellules (pied de
     tableau du récapitulatif notamment) */
  td, html.dark td { background: transparent !important; }
  #table-matrecap tfoot td, html.dark #table-matrecap tfoot td {
    background: #eee !important; color: #111 !important;
  }
  #table-matrecap tr.mat-type th, html.dark #table-matrecap tr.mat-type th {
    background: #eee !important; color: #111 !important;
  }
  .matrecap-presta, .matrecap-ident, .matrecap-meta, .matrecap-contact { color: #000 !important; }
  /* l'étiquette du type de prestation doit sortir en clair elle aussi :
     `!important` pour battre les règles `html.dark` (spécificité supérieure) */
  .matrecap-type, html.dark .matrecap-type {
    background: #fff !important; border: 1px solid #000 !important; color: #111 !important;
  }
  .notes-block, html.dark .notes-block {
    background: #fff !important; border-color: #000 !important; color: #111 !important;
  }
  .legend, .legend span, html.dark .legend, html.dark .legend span { color: #111 !important; }
  html.dark .legend .sw { border-color: #000 !important; }
  #plan2d .svg-title, #plan2d .svg-sub, #plan2d .svg-ax, #plan2d .item-label,
  html.dark #plan2d .svg-title, html.dark #plan2d .svg-sub,
  html.dark #plan2d .svg-ax, html.dark #plan2d .item-label { fill: #000 !important; }
  #plan2d .svg-stroke, #plan2d .item-line,
  html.dark #plan2d .svg-stroke, html.dark #plan2d .item-line { stroke: #000 !important; }
  #plan2d .item-dot, html.dark #plan2d .item-dot { fill: #000 !important; }
  #plan2d .stage-bg, html.dark #plan2d .stage-bg { fill: #fff !important; }
  #plan2d .grid-line, html.dark #plan2d .grid-line { stroke: #ccc !important; }
  header, footer, #view-home, .rider-toolbar, #editeur, .hint, .add-buttons, .server-banner, .logout-form, #journal-panel, #btn-journal, .sidebar, .ed-side { display: none !important; }
  .shell { display: block; }
  .content { min-width: 0; }
  main { display: block; padding: 0; }
  /* la vue rider reprend sa mise en page d'impression (pas de colonne 940, pas d'écart) */
  body.rider #view-rider { display: block; max-width: none; margin: 0; gap: 0; }
  .item-head { display: none; }
  .panel { border: none; padding: 0; margin: 0 0 18mm 0; break-inside: avoid; }
  .panel h2 { font-size: 16px; border-bottom: 2px solid #000; padding-bottom: 4px; margin-bottom: 8px; }
  .tag-sheet, .tag-screen { display: none; }
  table th, table td { border-color: #000; }
  th { background: #eee !important; }
  #plan2d { max-width: none; }
  /* plan SVG en noir & blanc */
  #plan2d .svg-title, #plan2d .svg-sub, #plan2d .svg-ax,
  #plan2d .item-label { fill: #000; }
  #plan2d .svg-stroke, #plan2d .item-line { stroke: #000; }
  #plan2d .item-dot { fill: #000; }
  #plan2d .stage-bg { fill: #fff; }
  #plan2d .grid-line { stroke: #ccc; }
  /* monochrome : gris dérivés de la teinte par type (lisible B/N, distinguable) */
  .t-musician  { fill: #ffffff !important; }
  .t-mic       { fill: #d9d9d9 !important; }
  .t-di        { fill: #efefef !important; }
  .t-amp       { fill: #cfcfcf !important; }
  .t-head      { fill: #e6e6e6 !important; }
  .t-wedge     { fill: #f4f4f4 !important; }
  .t-backline  { fill: #e2e2e2 !important; }
  .t-sono      { fill: #bbbbbb !important; }
  .t-light     { fill: #d5d5d5 !important; }
  .t-drumkit   { fill: #c5c5c5 !important; }
  .legend { font-size: 10px; }
  /* en-tête du récap matériel (prestation + date/réf. + groupe · événement) */
  .matrecap-head { border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
  .matrecap-presta { font-size: 17px; }
  .matrecap-presta-row { gap: 8px; }
  .matrecap-ident, .matrecap-meta, .matrecap-contact { color: #000; }
  .sheet { break-after: page; }
  /* mode RÉCAP : n'imprimer que le récapitulatif du matériel */
  body.print-matrecap .sheet:not(#sheet-matrecap) { display: none !important; }
  body.print-matrecap .sheet { break-after: auto; }
  /* les blocs repliables s'impriment dépliés */
  .collapsible .sec-body { display: block !important; }
  .sec-toggle { display: none; }
  /* mode SALLE : tout afficher (défaut) */
  .print-mode-badge { display: block; font-size: 10px; }
}