/* ==========================================================================
   composants · réutilisés d'un écran à l'autre
   ========================================================================== */

/* ---------- surfaces ---------- */

.box  { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card { background: var(--grey); border-radius: var(--r-lg); }
.dot  { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: currentColor; }

/* ---------- pastille de statut (toujours dot + libellé) ---------- */

.pastille {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px 4px 8px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; line-height: 1.2;
}
.pastille--ok   { background: var(--ok-bg); color: var(--ok); }
.pastille--warn { background: var(--warn-bg); color: var(--warn); }
.pastille--ok .dot   { background: var(--ok); }
.pastille--warn .dot { background: var(--warn-dot); }

/* ---------- compteurs ---------- */

.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.counter { padding: 20px var(--gutter); border-right: 1px solid var(--line); }
.counter:last-child { border-right: 0; }
.counter .num { font-size: var(--fs-count); }
.counters--inline { border-top: 1px solid var(--ink); }
.counters--inline .counter { padding: 14px 0; border-right: 0; }

/* ---------- réassurance numérotée 01 02 03 ---------- */

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.point { border-top: 1px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.point p:last-child { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }

/* ---------- zone de dépôt ---------- */

.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 360px; padding: var(--s-7);
  border: 1.5px dashed var(--ink); border-radius: var(--r-xl);
  background: var(--paper); cursor: pointer; text-align: center;
  transition: background var(--dur-fast) var(--ease), outline-offset var(--dur-fast) var(--ease);
  outline: 3px solid transparent; outline-offset: 0;
}
.dropzone:hover, .dropzone.is-over { background: var(--drop-tint); outline-color: rgba(240, 59, 29, .18); outline-offset: 6px; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { box-shadow: var(--focus-ring); }
.dropzone__title { font-family: var(--font-display); font-size: 30px; letter-spacing: var(--ls-tight); }
.dropzone__hint { position: absolute; bottom: 20px; }
.dropzone--compact { min-height: 0; padding: var(--s-5); gap: var(--s-2); border-radius: var(--r-lg); }
.dropzone--compact .dropzone__title { font-size: 17px; }

/* le PDF « s'ouvre » et ses pages s'étalent */
.fan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.fan__page {
  position: absolute; width: 110px; height: 150px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 3px;
  transform: translate(0, 0) rotate(0); opacity: 0;
  animation: fan-out 520ms var(--ease-pop) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
.fan__page::before { content: ''; position: absolute; inset: 10px 10px auto; height: 56px; background: var(--ph, #2b2a33); }
@keyframes fan-out {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* ---------- visuel (placeholder en attendant les vraies images) ---------- */

.ph {
  display: flex; align-items: flex-end; padding: 10px;
  background: var(--ph, #2b2a33); color: rgba(255, 255, 255, .82);
  font-size: 11px; letter-spacing: .04em;
  background-size: cover; background-position: center;
}

/* ---------- vignettes de pages ---------- */

.thumbs { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 12px; }
.thumb { display: flex; flex-direction: column; gap: 4px; }
.thumb__page {
  position: relative; aspect-ratio: 1 / 1.41;
  background: var(--paper); border: 1px solid #d1d1d1; border-radius: 2px; overflow: hidden;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.thumb__page .ph { height: 42%; padding: 0; }
.thumb__lines { padding: 5px; }
.thumb__lines i { display: block; height: 3px; border-radius: 2px; background: #c9c9c9; margin-bottom: 4px; }
.thumb__cap { font-size: 10px; color: var(--ink-soft); }
.thumb.is-pending .thumb__page { opacity: .45; }
.thumb.is-read .thumb__page { border-color: var(--ink); }
.thumb.is-reading .thumb__page::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink);
  animation: scan 1.1s linear infinite;
}
.thumb.is-calendar .thumb__page { outline: 2px solid var(--ink); outline-offset: 3px; opacity: 1; }
.thumb.is-calendar .thumb__cap { color: var(--ink); font-weight: 500; }
@keyframes scan { from { top: 0; } to { top: 100%; } }

/* ---------- carte spectacle ---------- */

.show-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.show-card:hover { border-color: var(--ink); color: var(--ink); }
.show-card .ph { aspect-ratio: 4 / 3; }
.show-card__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.show-card__body .pastille { margin-top: auto; }

.show-row { display: flex; gap: 14px; padding: 12px; }
.show-row .ph { width: 64px; height: 64px; border-radius: var(--r-sm); flex: none; padding: 0; }
.show-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* ---------- page de plaquette (maquette de la page source) ---------- */

.pg {
  position: relative; width: 520px; max-width: 100%;
  padding: 20px 26px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--paper); border: 1px solid #d1d1d1;
  font-family: Arial, Helvetica, sans-serif; /* la plaquette a sa propre typo, pas celle de l'outil */
}
.pg__head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #555; }
.pg__genre { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.pg__title { font-size: 44px; font-weight: 900; letter-spacing: -.03em; line-height: .95; }
.pg__artist { font-size: 19px; }
.pg__cols { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.pg__dates { font-size: 11.5px; line-height: 1.45; font-weight: 700; }
.pg__chapo { font-family: Georgia, serif; font-style: italic; font-size: 13px; line-height: 1.4; }
.pg__small { font-size: 11px; }
.pg__distrib { font-size: 8.5px; line-height: 1.4; color: #333; }
.pg__infos { display: flex; gap: 14px; font-size: 11px; font-weight: 700; }
.pg__partner { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; padding-top: 6px; font-size: 9px; color: #666; }
.pg__partner > span:nth-child(2) { width: 60px; height: 16px; background: #e5e5e5; }
.pg__lines i { display: block; height: 5px; border-radius: 2px; background: #c9c9c9; margin-bottom: 5px; }
.pg__credit {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%) rotate(-90deg); transform-origin: right center;
  font-size: 8px; letter-spacing: .06em; white-space: nowrap; color: rgba(255, 255, 255, .85);
}

/* bloc repéré dans la page */
.blk {
  position: relative; border-radius: 2px;
  outline: 1.5px dashed var(--f-ink, var(--line-2)); outline-offset: 3px;
  transition: background var(--dur-fast) var(--ease), outline-offset var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.blk[data-state="validee"], .blk[data-state="corrigee"] {
  outline-style: solid;
  background: color-mix(in srgb, var(--f-bg) 70%, transparent);
}
.blk[data-state="barre"] { outline: 1.5px solid var(--line-2); opacity: .45; }
.blk[data-state="barre"]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) 50%, transparent calc(50% + 1px));
}
.blk.is-hl { background: var(--f-bg); outline: 2px solid var(--f-ink); outline-offset: 4px; }
.blk.is-target { outline-width: 2px; outline-style: solid; outline-offset: 7px; background: color-mix(in srgb, var(--f-bg, #eee) 45%, transparent); }
.blk:focus-visible { box-shadow: none; outline-width: 2.5px; outline-color: var(--ink); }
.blk--lasso { position: absolute; z-index: 2; }

/* ---------- étiquette posée sur un bloc ---------- */

.lab {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px 0 7px; border-radius: 5px;
  font: 500 12.5px/1 var(--font-text); white-space: nowrap;
  background: var(--f-bg); color: var(--f-ink); border: 1.5px solid var(--f-ink);
  cursor: pointer;
}
.lab__icon { width: 14px; text-align: center; }
.lab[data-state="proposee"] { background: var(--paper); border-style: dashed; }
.lab[data-state="corrigee"] { box-shadow: inset 0 -3px 0 var(--f-ink); }
.lab[data-state="manquante"] { background: var(--paper); color: var(--action); border: 1.5px dashed var(--action); }
.lab[data-state="barre"] { background: var(--paper); color: var(--ink-soft); border: 1.5px solid var(--line-2); text-decoration: line-through; }
.lab[data-state="vide"] { --f-ink: rgba(8, 8, 8, .55); --f-bg: var(--paper); border-style: dashed; }

/* position de l'étiquette dans la gouttière, avec un filet vers le bloc */
/* `translate` (et non `transform`) pour que les animations tampon / aimant ne cassent pas le centrage */
.lab--right { left: calc(100% + 40px); top: 50%; translate: 0 -50%; }
.lab--left  { right: calc(100% + 40px); top: 50%; translate: 0 -50%; }
.lab--top   { left: -4px; top: -31px; }
.lab--inset { left: 10px; top: 10px; }
.lab--right::before, .lab--left::before {
  content: ''; position: absolute; top: 50%; width: 36px;
  border-top: 1.5px dashed var(--f-ink);
}
.lab--right::before { right: 100%; }
.lab--left::before  { left: 100%; }
.lab:not([data-state="proposee"])::before { border-top-style: solid; }

/* ---------- étiquette du présentoir (étiquette de vestiaire) ---------- */

.tag {
  appearance: none; cursor: grab; position: relative; touch-action: none;
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 46px; padding: 0 10px 0 28px; border-radius: 8px;
  background: var(--f-bg); color: var(--f-ink); border: 1.5px solid var(--f-ink);
  box-shadow: 0 3px 0 var(--f-ink);
  font: 500 15px/1.05 var(--font-display); text-align: left;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast);
}
.tag::before {
  content: ''; position: absolute; left: 10px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--f-ink);
}
.tag:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--f-ink); }
.tag:active { cursor: grabbing; }
.tag__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tag__text > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag .req { position: absolute; top: -9px; right: 10px; }
.tag__state { font: 500 11px/1 var(--font-text); letter-spacing: .02em; }
.tag__key {
  margin-left: auto; min-width: 20px; height: 20px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--f-ink); font: 500 11px/1 var(--font-text);
}
.tag__key:empty { display: none; }
.tag.is-posed { background: var(--paper); box-shadow: 0 1px 0 var(--f-ink); }
.tag.is-armed { outline: 2px solid var(--ink); outline-offset: 3px; }
.tag.is-dragging { opacity: .45; border-style: dashed; background: var(--paper); box-shadow: none; }
.tag-ghost {
  position: fixed; z-index: 60; pointer-events: none; width: 180px;
  transform: translate(-30px, -26px) rotate(-4deg);
  box-shadow: 0 10px 0 -2px rgba(8, 8, 8, .12), 0 3px 0 var(--f-ink);
}

.req {
  font: 500 10px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 3px; background: var(--ink); color: var(--paper);
}

/* barre de progression en segments (une par étiquette) */
.segments { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.segments i { height: 6px; border-radius: 2px; border: 1px dashed var(--line-2); }
.segments i.is-on { background: var(--ink); border-color: var(--ink); }
.segments i.is-prop { background: var(--line-2); border-color: transparent; }

/* ---------- temps du matching ---------- */

.temps { display: flex; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; }
.temps li { font-size: 12.5px; padding: 7px 14px; color: var(--ink-soft); border-right: 1px solid var(--line); }
.temps li:last-child { border-right: 0; }
.temps li[aria-current="step"] { background: var(--ink); color: var(--paper); }
.temps li.is-done { color: var(--ink); }

/* ---------- formulaire de fiche ---------- */

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.field__label::before {
  content: ''; width: 10px; height: 10px; border-radius: 2px; flex: none;
  background: var(--f-bg); border: 1.5px solid var(--f-ink);
}
.field__source { margin-left: auto; font-weight: 400; color: var(--f-ink); opacity: 0; transition: opacity var(--dur-fast); }
.input {
  width: 100%; padding: 9px 11px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--paper); font-size: 15px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
textarea.input { resize: vertical; min-height: 64px; line-height: 1.4; }
.field.is-hot .input, .field:focus-within .input { border: 2px solid var(--f-ink); padding: 8px 10px; background: color-mix(in srgb, var(--f-bg) 35%, var(--paper)); }
.field.is-hot .field__source, .field:focus-within .field__source { opacity: 1; }
.field.is-alert .input { border: 2px solid var(--action); padding: 8px 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 13px; background: var(--paper); }
.chip button { appearance: none; border: 0; background: none; cursor: pointer; padding: 0; line-height: 1; }
.reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rep { background: var(--paper); border-radius: var(--r-sm); padding: 6px 10px; font-size: 14px; }

/* ---------- alerte ---------- */

.alert {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.4;
}
.alert svg { flex: none; margin-top: 1px; }
.alert b { font-weight: 500; }
.banner {
  display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: stretch;
  padding: 20px 24px; border-radius: 12px;
  border: 1.5px solid var(--action); background: var(--action-tint);
}

/* ---------- frise ---------- */

.frise { overflow-x: auto; }
.frise__row {
  display: grid; grid-template-columns: 180px repeat(31, minmax(30px, 1fr));
  min-width: 1100px; align-items: center;
}
.frise__row + .frise__row { border-top: 1px solid var(--line); min-height: 64px; row-gap: 6px; padding: 10px 0; }
.frise__day { display: flex; flex-direction: column; align-items: center; font-size: 11px; padding: 4px 0; }
.frise__day.is-weekend { color: rgba(8, 8, 8, .5); background: #f6f6f6; }
.frise__lane { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; }
.frise__rep {
  grid-row: 1; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px;
  border: 1.5px solid var(--ink); border-radius: var(--r-md); background: var(--paper);
  font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-decoration: none;
}
.frise__rep small { font-weight: 400; color: var(--ink-muted); font-size: 12px; }
.frise__rep .dot { background: var(--ok); }
.frise__rep.is-warn .dot { background: var(--warn-dot); }
.months { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; align-items: end; }
.month { display: flex; flex-direction: column; gap: 6px; }
.month i { display: block; border-radius: 3px; background: #d1d1d1; height: calc(var(--n) * 2px + 4px); }
.month.is-on i { background: var(--ink); }
.month div { display: flex; justify-content: space-between; font-size: 12px; }