/* Quizz Master V3 — l'atelier (administration).
   Même monde que l'affiche, registre de la planche d'épreuves : papier os, encre noire,
   bandeau lagon, l'orange réservé à l'action principale de chaque écran. */

html { scrollbar-color: var(--ink-soft) #e6dccb; }

body.atelier {
    margin: 0;
    min-height: 100vh;
    background: var(--bone);
    color: var(--ink);
    font-family: var(--face-ui);
    font-size: 0.95rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--sunset-deep);
}

body.atelier :focus-visible { outline-color: var(--lagoon); }
/* Sur la barre (fond lagon), le contour de focus reste flamant pour être vu. */
body.atelier .bar :focus-visible { outline-color: var(--flamingo); }
body.atelier ::selection { background: var(--flamingo); color: var(--ink); }

.atelier .wordmark {
    margin: 0;
    font-family: var(--face-wordmark);
    color: var(--bone);
    text-shadow: 0.05em 0.05em 0 var(--flamingo);
    transform: rotate(-3deg);
    display: inline-block;
}

/* ---------- Bandeau ---------- */

.bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    padding: 0.7rem clamp(1rem, 3vw, 2rem);
    background: var(--lagoon);
    color: var(--bone);
    box-shadow: 0 6px 18px rgb(7 58 66 / 0.25);
}
.bar-brand { display: flex; align-items: center; gap: 0.7rem; margin: 0; }
/* Le logo du site, version texte crème pour le fond lagon de la barre. */
.bar-logo { display: block; flex: none; width: auto; height: 2.5rem; }
.bar-title { font-family: var(--face-display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.9rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--bone);
    font-weight: 700;
}
.tab:hover { border-color: rgb(244 235 221 / 0.45); }
.tab[aria-selected="true"] { background: var(--bone); color: var(--ink); }
.tab:focus-visible { outline: 3px solid var(--flamingo); outline-offset: 2px; }

.badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 1rem;
    background: var(--ink);
    color: var(--bone);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .badge { background: var(--lagoon); }
.badge-alert { background: var(--alert); }
.tab[aria-selected="true"] .badge-alert { background: var(--alert); }

.bar-links { display: flex; gap: 1.1rem; margin-left: auto; }
/* « Se déconnecter » est un bouton de formulaire (POST avec jeton) habillé comme les liens. */
.bar-links form { display: contents; }
.bar-links a, .bar-links button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bone);
    font-weight: 600;
    text-decoration: none;
}
.bar-links button { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.bar-links a:hover, .bar-links button:hover { color: var(--flamingo); }
.bar-links .icon { width: 1.05rem; height: 1.05rem; }

/* ---------- Bannières d'état ---------- */

.banners { display: grid; gap: 0.5rem; padding: 0 clamp(1rem, 3vw, 2rem); }
.banners:not(:empty) { padding-top: 1rem; }
.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fffaf2;
    font-weight: 600;
}
.notice code { font-size: 0.9em; background: rgb(21 20 19 / 0.08); padding: 0.05em 0.35em; border-radius: 3px; }
.notice-alert { background: var(--alert); border-color: var(--alert); color: var(--bone); }
.notice-alert code { background: rgb(255 255 255 / 0.18); }

/* Migration à faire : les étapes, puis le SQL à copier dans phpMyAdmin. */
.notice-migration { margin-bottom: 1rem; }
.notice-migration > .icon { flex: none; margin-top: 0.2rem; }
.notice-body { display: grid; gap: 0.55rem; justify-items: start; min-width: 0; }
.notice-body p { margin: 0; }
.notice-steps { margin: 0; padding-left: 1.3rem; font-weight: 500; }
.sql-block {
    max-width: 100%;
    margin: 0;
    padding: 0.6rem 0.8rem;
    overflow-x: auto;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: #fff;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: pre;
}
.notice .sql-block code { padding: 0; background: none; font-size: inherit; }

/* ---------- Plan de travail ---------- */

.workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1680px;
    margin: 0 auto;
    padding: 1.4rem clamp(1rem, 3vw, 2rem) 3rem;
}
.workbench.has-deck { grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem); }

.panel-heading {
    margin: 0 0 1rem;
    font-family: var(--face-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.card {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: 1rem 1.1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fffaf2;
}

.import-forms { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }

.field { display: grid; gap: 0.3rem; }
.field-label { font-weight: 800; font-size: 0.85rem; }
.field-inline { display: inline-grid; }
.field-grow { flex: 1; min-width: 14rem; }
.hint { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }

.atelier input[type="text"],
.atelier input[type="search"],
.atelier input[type="number"],
.atelier input[type="password"],
.atelier input[type="email"],
.atelier select,
.atelier textarea {
    min-height: 2.75rem;
    padding: 0.45rem 0.7rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    width: 100%;
}
.atelier textarea { resize: vertical; min-height: 6rem; font-family: var(--face-ui); }
.atelier input::placeholder, .atelier textarea::placeholder { color: #75695c; }
.atelier input[type="number"] { font-variant-numeric: tabular-nums; }
.input-row { display: flex; gap: 0.5rem; }
.input-row input { flex: 1; }

.search { position: relative; display: block; }
.search .icon { position: absolute; left: 0.7rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); }
.search input { padding-left: 2.3rem; }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.toolbar-spacer { flex: 1; }

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid currentColor;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
}
.icon-button:hover { background: rgb(21 20 19 / 0.08); }
.icon-button:disabled { opacity: 0.4; }
.icon-button-main { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.segmented { display: inline-flex; padding: 3px; border: 2px solid var(--ink); border-radius: calc(var(--radius) + 3px); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: flex; align-items: center; min-height: 2.4rem; padding: 0.3rem 0.9rem; border-radius: var(--radius); font-weight: 700; }
.segmented input:checked + span { background: var(--ink); color: var(--bone); }
.segmented input:focus-visible + span { outline: 3px solid var(--lagoon); outline-offset: 2px; }

/* ---------- Marques d'état (poinçons, drapeaux) ---------- */

.marks { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mark {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem 0.1rem 0.35rem;
    border: 1.5px solid var(--ink);
    border-radius: 1rem;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mark .icon { width: 0.95rem; height: 0.95rem; }
.mark-alert { background: var(--alert); border-color: var(--alert); color: var(--bone); }
.mark-warn { background: #ffd3e4; border-color: #a3124f; color: #7a0d3b; }
.mark-love { border-color: var(--flamingo); color: #a3124f; }
.mark-info { background: var(--lagoon); border-color: var(--lagoon); color: var(--bone); }
.mark-ready { background: var(--lagoon); border-color: var(--lagoon); color: var(--bone); }
.mark-quiet { opacity: 0.7; }
/* Marque à phrase longue (code d'une panne, date) : elle passe à la ligne au lieu de déborder. */
.mark-long { white-space: normal; border-radius: 0.8rem; }
.mark-long .icon { flex: none; }

/* ---------- Résultats d'import ---------- */

.import-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0 0 0.75rem; font-weight: 700; }
.import-summary .import-clear { margin-left: auto; min-height: 2.2rem; padding: 0.25rem 0.75rem; }
.import-aside { max-width: 62rem; margin: 0 0 0.6rem; }

.table-wrap {
    /* Positionné : les textes réservés aux lecteurs d'écran restent dans le cadre qui défile.
       Mesuré : la recherche ouverte sous un morceau prend la largeur visible, pas celle du tableau. */
    position: relative;
    container-type: inline-size;
    overflow-x: auto;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fffaf2;
}
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th {
    position: sticky;
    top: 0;
    padding: 0.6rem 0.7rem;
    background: #efe4d2;
    border-bottom: 2px solid var(--ink);
    text-align: left;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.table td { padding: 0.45rem 0.7rem; border-bottom: 1px solid #ddd0bc; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgb(11 85 96 / 0.06); }
.table .col-num { text-align: right; font-variant-numeric: tabular-nums; width: 4.5rem; }
.table .col-check { width: 2.5rem; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
/* Ordre de lecture : le rang dans la playlist, puis tout en haut, monter, descendre, tout en bas. */
.table .col-order { width: 1%; white-space: nowrap; }
.order-rank { display: inline-block; min-width: 2.2rem; margin-right: 0.35rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; vertical-align: middle; }
.order-moves { display: inline-flex; gap: 0.2rem; vertical-align: middle; }
.order-moves .icon-button { width: 2.1rem; height: 2.1rem; border-width: 1.5px; }
.order-moves .icon-button[aria-disabled="true"] { opacity: 0.25; cursor: default; }
.table .col-order:focus-visible { outline-offset: -3px; }
.tracks-notice:not(:empty) { margin: -0.3rem 0 0.9rem; }
.table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--lagoon); }
.table .cell-title { min-width: 16rem; }
.table .cell-title input { min-height: 2.3rem; padding: 0.25rem 0.5rem; border-width: 1.5px; }
.table .cell-sub { display: block; color: var(--ink-soft); font-size: 0.8rem; }
.table tr.is-excluded td { opacity: 0.55; }
.table tr.is-editing { background: #fffaf2; box-shadow: inset 0 0 0 3px var(--lagoon); }
.table tr.is-editing td { vertical-align: top; }
.table .edit-grid { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) minmax(8rem, 1fr) 5rem 5rem; gap: 0.4rem; }
.table .edit-grid.has-year { grid-template-columns: minmax(12rem, 2fr) 5.2rem minmax(8rem, 1fr) minmax(8rem, 1fr) 5rem 5rem; }
/* L'année à côté du titre, en petit, comme un tampon discret. */
.track-year { margin-left: 0.45rem; padding: 0 0.35rem; border: 1.5px solid var(--lagoon); border-radius: 3px; color: var(--lagoon); font-size: 0.82em; font-weight: 800; font-variant-numeric: tabular-nums; }
.table .edit-grid input, .table .edit-grid select { min-height: 2.3rem; padding: 0.25rem 0.5rem; border-width: 1.5px; }
.thumb { display: block; width: 4.5rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #ddd0bc; }

.row-actions { display: inline-flex; gap: 0.3rem; }
.row-actions .icon-button { width: 2.4rem; height: 2.4rem; border-width: 1.5px; }
.row-actions .icon-button.is-danger:hover { background: var(--alert); border-color: var(--alert); color: var(--bone); }
.confirm-delete { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; }
.confirm-delete .button-danger {
    min-height: 2.4rem;
    padding: 0.2rem 0.7rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--alert);
    color: var(--bone);
    font-weight: 800;
}

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 1rem; }
.pager button {
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0 0.6rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: transparent;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pager button[aria-current="page"] { background: var(--ink); color: var(--bone); }
.pager .pager-info { margin: 0 0.75rem; font-weight: 600; color: var(--ink-soft); }

.empty {
    padding: 2.2rem 1.5rem;
    border: 2px dashed #b9ab95;
    border-radius: var(--radius);
    text-align: center;
    color: var(--ink-soft);
    font-weight: 600;
}
.empty strong { display: block; margin-bottom: 0.3rem; font-family: var(--face-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; color: var(--ink); }

/* ---------- Calage ---------- */

.calage-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.cut {
    position: relative;
    /* Ramenée à l'écran, la ligne ne passe ni sous le bandeau du haut ni sous la barre « Ajouter ». */
    scroll-margin: 6rem 0 6rem;
    display: grid;
    grid-template-columns: auto 6.5rem minmax(12rem, 1fr) 5.5rem 5.5rem auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fffaf2;
}
.cut.is-active { border-color: var(--lagoon); box-shadow: 0 0 0 3px var(--lagoon); }
/* Drapeau plié sur l'extrait chargé dans le lecteur. */
.cut.is-active::before {
    content: '';
    position: absolute;
    left: -0.55rem;
    top: 50%;
    width: 0.6rem;
    height: 1.9rem;
    margin-top: -0.95rem;
    background: var(--lagoon);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
/* Extrait coché, prêt à partir au catalogue : sa marque « Prêt ». Un décoché n'est pas grisé : c'est
   du travail à faire, pas un rebut. Case bloquée sur une vidéo en panne. La case suit le papier clair
   de l'Atelier (sinon le thème sombre de la page la dessine pleine, comme si elle était cochée) et,
   cochée, prend le lagon de la marque « Prêt ». */
.cut > input[type="checkbox"] { color-scheme: light; accent-color: var(--lagoon); }
.cut > input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; }
.cut-thumb { position: relative; padding: 0; border: 0; background: none; border-radius: 3px; overflow: hidden; }
.cut-thumb .thumb { width: 6.5rem; }
.cut-thumb .icon {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0.35rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bone);
    transform: translate(-50%, -50%);
}
.cut-main { display: grid; gap: 0.25rem; min-width: 0; }
.cut-main input { min-height: 2.3rem; padding: 0.25rem 0.5rem; border-width: 1.5px; }
/* Le titre, puis son année dans un petit champ à part. */
.cut-name { display: flex; gap: 0.4rem; min-width: 0; }
.cut-name input[type="text"] { flex: 1; min-width: 0; }
.atelier .cut-name .cut-year { flex: none; width: 5.4rem; text-align: center; }
.cut-time input { min-height: 2.3rem; padding: 0.25rem 0.45rem; border-width: 1.5px; }
.cut-time .field-label { font-size: 0.72rem; }
/* Playlist du morceau, sous le titre : « comme en haut » par défaut, marquée quand elle diffère. */
.cut .marks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
/* « Trouver une vidéo » sous un extrait qui ne se lance pas : à la taille des marques. */
.cut .cut-find { min-height: 2rem; padding: 0.15rem 0.75rem; font-size: 0.85rem; }
.atelier .cut-playlist { width: auto; min-height: 2rem; max-width: 100%; padding: 0.1rem 1.8rem 0.1rem 0.5rem; border-width: 1.5px; font-size: 0.85rem; }
.atelier .cut-playlist.is-other { border-color: var(--lagoon); box-shadow: inset 0 0 0 1px var(--lagoon); font-weight: 800; color: var(--lagoon); }

.action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--bone);
    border-top: 2px solid var(--ink);
    box-shadow: 0 -10px 20px rgb(244 235 221 / 0.9);
}
.action-summary { margin: 0; flex: 1; font-weight: 700; }
.action-bar .stamp { font-size: 1.15rem; }

/* ---------- Signalements ---------- */

.report-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pannes-hint { max-width: 62rem; margin: -0.4rem 0 1rem; }
/* Signalements, Pannes et Vérifier : jusqu'à cinq actions (« Trouver une vidéo » compris). Quand la
   liste se resserre (lecteur ouvert, petit écran), les actions passent sous le texte au lieu de l'écraser. */
.report-list { container-type: inline-size; }
@container (max-width: 62rem) {
    .report-list .report-row { grid-template-columns: minmax(0, 1fr); }
    .report-list .report-row .row-actions { justify-content: flex-start; }
}

/* Vérification des vidéos : une carte de lancement, puis les morceaux à revoir par gravité. */
.check-card { max-width: 62rem; }
.check-card p { margin: 0; }

/* Réglages du site : une case par option, son explication et, s'il y a lieu, sa mise en garde. */
.settings-card { display: grid; gap: 1rem; }
.setting { display: flex; align-items: flex-start; gap: 0.9rem; cursor: pointer; }
.setting input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; accent-color: var(--lagoon); }
.setting-text { display: grid; gap: 0.35rem; }
.setting-text strong { font-size: 1.05rem; }
.setting-warn { color: var(--alert); font-weight: 700; }
/* Une valeur à saisir sous sa case : le champ à droite du texte, aligné sur le haut. */
.setting-field { cursor: default; padding-left: 2.4rem; }
.setting-field .setting-text { flex: 1; cursor: pointer; }
.setting-input { display: flex; align-items: center; gap: 0.4rem; flex: none; margin: 0; font-weight: 700; }
.setting-input input { width: 5.2rem; text-align: right; }
.setting-input input:disabled { opacity: 0.5; }
.check-run { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
/* Vue « Années » : la carte de lancement porte la barre d'avancement de la recherche. */
.years-card { display: grid; gap: 1rem; }
.years-progress { display: grid; gap: 0.35rem; }
.years-progress progress { width: 100%; height: 0.9rem; accent-color: var(--lagoon); }
/* Case, morceau, année : la ligne garde ses trois colonnes même quand la liste se resserre. */
.report-list .report-row.year-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.year-row > input[type="checkbox"] { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--lagoon); }
.atelier .year-row .year-input { width: 6.5rem; min-height: 2.4rem; text-align: center; font-weight: 700; }
.year-row .marks a { color: inherit; }
/* Sur téléphone, une marque longue (deux sources, « Prendre ») passe à la ligne au lieu de glisser sous l'année. */
.year-row .mark { flex-wrap: wrap; white-space: normal; border-radius: 0.8rem; }
/* MusicBrainz et Discogs en désaccord : « Prendre » met l'année de la source dans la case. */
.mark-pick {
    margin-left: 0.15rem;
    padding: 0 0.5rem;
    min-height: 1.35rem;
    border: 1.5px solid currentColor;
    border-radius: 1rem;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.mark-pick:hover { background: #fff0f6; }
.mark-pick[aria-pressed="true"] { background: #7a0d3b; border-color: #7a0d3b; color: #ffd3e4; }
.check-status { color: var(--ink-soft); font-weight: 600; }
.check-toolbar { margin-top: 1.2rem; }
.check-group { margin-top: 1.8rem; }
.check-group-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.25rem;
    font-family: var(--face-display);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.1;
    text-transform: uppercase;
}
.check-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--face-ui);
    font-weight: 800;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.check-group .hint { margin-bottom: 0.7rem; }
/* Titre du groupe et son action (exporter les introuvables) sur la même ligne. */
.check-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin: 0 0 0.25rem; }
.check-group-head .check-group-title { margin: 0; }
.check-group a.button-quiet { text-decoration: none; }

/* Recherche d'une vidéo de remplacement, ouverte sous le morceau. */
.finder {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.55rem;
    padding-top: 0.7rem;
    border-top: 1.5px dashed rgb(21 20 19 / 0.3);
}
.finder-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.atelier .finder-form input[type="search"] { flex: 1 1 18rem; width: auto; min-width: 0; }
.finder-cost { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.finder-status { margin: 0; font-weight: 700; }
.finder-status:empty { display: none; }
.finder-list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.candidate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding: 0.45rem 0.6rem 0.45rem 0.45rem;
    border: 1.5px solid rgb(21 20 19 / 0.25);
    border-radius: var(--radius);
    background: #fffaf2;
}
.candidate { position: relative; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.candidate .thumb { width: 7.5rem; }
/* Le candidat chargé dans le lecteur : cadre et drapeau lagon, comme l'extrait en cours dans « Caler ». */
.candidate.is-active { border-color: var(--lagoon); box-shadow: 0 0 0 2px var(--lagoon); background: #e6f1ef; }
.candidate.is-active::before {
    content: '';
    position: absolute;
    left: -0.55rem;
    top: 50%;
    width: 0.6rem;
    height: 1.9rem;
    margin-top: -0.95rem;
    background: var(--lagoon);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.candidate-live { display: none; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--lagoon); }
.candidate.is-active .candidate-live { display: inline-flex; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.95rem; }
.eq i { display: block; width: 3px; height: 35%; border-radius: 1px; background: currentColor; }
.candidate.is-playing .eq i { animation: eq-bounce 0.9s ease-in-out infinite; }
.candidate.is-playing .eq i:nth-child(2) { animation-delay: -0.3s; }
.candidate.is-playing .eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq-bounce {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .candidate.is-playing .eq i { animation: none; height: 75%; }
    .is-playing .listen-badge .eq i { animation: none; height: 75%; }
}

/* « En écoute » : le morceau chargé dans le lecteur, marqué de la même façon partout (Caler,
   Morceaux, Signalements, Pannes, Vérifier, et la recherche de vidéos ci-dessus). */
.listen-badge { display: none; align-items: center; gap: 0.4rem; margin-left: 0.5rem; font-size: 0.85rem; font-weight: 800; color: var(--lagoon); white-space: nowrap; vertical-align: middle; }
.is-listening .listen-badge, .cut.is-active .listen-badge { display: inline-flex; }
.cut .listen-badge { margin-left: 0; }
.is-playing .listen-badge .eq i { animation: eq-bounce 0.9s ease-in-out infinite; }
.is-playing .listen-badge .eq i:nth-child(2) { animation-delay: -0.3s; }
.is-playing .listen-badge .eq i:nth-child(3) { animation-delay: -0.6s; }
.report-row.is-listening { border-color: var(--lagoon); box-shadow: 0 0 0 3px var(--lagoon); }
.report-row.is-listening::before {
    content: '';
    position: absolute;
    left: -0.55rem;
    top: 50%;
    width: 0.6rem;
    height: 1.9rem;
    margin-top: -0.95rem;
    background: var(--lagoon);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.table tr.is-listening td { background: #e6f1ef; }
.table tr.is-listening td:first-child { box-shadow: inset 4px 0 0 var(--lagoon); }

/* « Trouver une vidéo » sous un morceau HS ou en panne du tableau « Morceaux » : la recherche
   s'ouvre dans une ligne pleine largeur, cachée tant qu'elle est vide. */
.table .track-find { display: flex; width: fit-content; min-height: 2rem; margin-top: 0.35rem; padding: 0.15rem 0.7rem; font-size: 0.85rem; }
.table tr.finder-row:not(:has(.finder)) { display: none; }
.table tr.finder-row > td { padding: 0 0.9rem 0.9rem; background: #fffaf2; }
.table tr.finder-row .finder { position: sticky; left: 0.9rem; width: calc(100cqi - 1.8rem); }
/* La dernière ligne visible n'a pas de trait sous elle, même suivie d'une ligne de recherche cachée. */
.table tbody tr:has(+ tr.finder-row:last-child) td { border-bottom: 0; }
/* Ligne grave (rouge) en écoute : la bordure passe au lagon, comme partout ailleurs. */
.report-row.is-severe.is-listening { border-color: var(--lagoon); }
/* Recherche ouverte dans la ligne : le drapeau reste en face du titre, pas au milieu des résultats. */
.report-row.is-listening:has(> .finder)::before,
.cut.is-active:has(> .finder)::before { top: 1.1rem; margin-top: 0; }
.candidate-title { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.candidate-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.7rem; margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.candidate .row-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
    /* Modifier un morceau sur téléphone : le titre sur toute la largeur, les autres champs deux par deux. */
    .table .edit-grid, .table .edit-grid.has-year { grid-template-columns: 1fr 1fr; }
    .table .edit-grid > :first-child { grid-column: 1 / -1; }
    .candidate { grid-template-columns: auto minmax(0, 1fr); }
    .candidate .thumb { width: 5.5rem; }
    .candidate .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
#check-results[aria-busy="true"] { opacity: 0.5; }
#check-run:disabled { opacity: 0.6; cursor: progress; }
.report-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fffaf2;
}
.report-row.is-severe { background: #f8ddd7; border-color: var(--alert); }
.alert-plate {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.15rem 0.55rem 0.1rem;
    background: var(--alert);
    color: var(--bone);
    border-radius: 3px;
    font-family: var(--face-display);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
    vertical-align: 0.1em;
}
.mark-label { font-weight: 700; }
.report-title { margin: 0 0 0.3rem; font-weight: 800; font-size: 1.02rem; }
.report-title small { font-weight: 600; color: var(--ink-soft); }
.report-row .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.report-row .button-quiet { min-height: 2.4rem; padding: 0.3rem 0.7rem; border-width: 1.5px; }

/* ---------- Lecteur de calage ---------- */

.deck {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    display: grid;
    /* Chaque rangée garde sa hauteur : si le lecteur dépasse l'écran, il défile au lieu de
       faire chevaucher la vidéo et les boutons. */
    grid-auto-rows: max-content;
    gap: 0.8rem;
    max-height: calc(100vh - 7rem);
    overflow: auto;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--ink);
    color: var(--bone);
    border-radius: var(--radius);
    box-shadow: 0 20px 44px rgb(21 20 19 / 0.35);
    scrollbar-color: var(--ink-soft) transparent;
}
.deck-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.deck-title { margin: 0; font-family: var(--face-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; text-transform: uppercase; }
.deck-meta { margin: -0.4rem 0 0; color: var(--bone-soft); font-size: 0.85rem; }
.deck .icon-button { color: var(--bone); }
.deck .icon-button:hover { background: rgb(244 235 221 / 0.12); }
.deck .icon-button-main { color: var(--ink); background: var(--bone); }
.deck-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.deck-screen iframe, #deck-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.deck-transport { display: flex; align-items: center; gap: 0.45rem; }
.deck-clock { margin: 0 0 0 auto; font-family: var(--face-display); font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.deck-clock span { margin-left: 0.35rem; font-family: var(--face-ui); font-size: 0.85rem; font-weight: 700; color: var(--bone-soft); }
/* La frise : position de lecture, extrait entre IN et OUT, marques IN (os) et OUT (flamant). */
.deck-scrub { --thumb: 1.15rem; position: relative; height: 2.5rem; }
.deck-scrub-track {
    position: absolute;
    top: 50%;
    left: calc(var(--thumb) / 2);
    right: calc(var(--thumb) / 2);
    height: 6px;
    margin-top: -3px;
    border-radius: 3px;
    background: rgb(244 235 221 / 0.22);
    pointer-events: none;
}
.deck-scrub-zone { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: rgb(255 92 158 / 0.6); }
.deck-scrub-mark { position: absolute; top: -7px; width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: var(--bone); }
.deck-scrub-mark.is-out { background: var(--flamingo); }
.deck-scrub input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-appearance: none;
            appearance: none;
    background: transparent;
    cursor: pointer;
}
.deck-scrub input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.deck-scrub input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--thumb);
    height: var(--thumb);
    margin-top: calc((2.5rem - var(--thumb)) / 2);
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--bone);
    box-shadow: 0 0 0 2px var(--bone);
}
.deck-scrub input[type="range"]::-moz-range-track { height: 100%; background: transparent; }
.deck-scrub input[type="range"]::-moz-range-thumb {
    width: var(--thumb);
    height: var(--thumb);
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--bone);
    box-shadow: 0 0 0 2px var(--bone);
}
.deck-scrub input[type="range"]:focus-visible { outline: 3px solid var(--flamingo); outline-offset: 2px; border-radius: 4px; }
.deck-scrub input[type="range"]:disabled { cursor: default; opacity: 0.35; }

.deck-marks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* Extrait plus court qu'une manche : marque d'avertissement sous IN/OUT, sur plusieurs lignes. */
.deck-short {
    justify-self: start;
    align-items: flex-start;
    gap: 0.4rem;
    margin: -0.2rem 0 0;
    padding: 0.35rem 0.65rem 0.35rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: normal;
}
.deck-short .icon { flex: none; margin-top: 0.05rem; }
.deck-marks .field-label { color: var(--bone-soft); }
.deck input[type="number"] { background: var(--bone); border-color: var(--bone); font-size: 1.15rem; font-weight: 700; }
.mark-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 3rem;
    border: 2px solid var(--bone);
    border-radius: var(--radius);
    background: transparent;
    color: var(--bone);
    font-family: var(--face-display);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}
.mark-button:hover { background: var(--bone); color: var(--ink); }
.mark-button kbd { font-size: 0.7rem; }
.mark-button.is-marked { animation: stamp 0.4s var(--ease-stamp); }
.deck-actions, .deck-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.deck-actions .button-quiet, .deck-nav .button-quiet { color: var(--bone); border-color: rgb(244 235 221 / 0.6); }
.deck-actions .button-quiet:hover, .deck-nav .button-quiet:hover { background: rgb(244 235 221 / 0.1); }
.deck-actions .button-ink { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.deck-nav { justify-content: space-between; }
.deck-help { margin: 0; color: var(--bone-soft); font-size: 0.8rem; }

/* ---------- Connexion ---------- */

body.atelier-login { background: var(--lagoon); }
.login { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.login-card {
    display: grid;
    gap: 1rem;
    width: min(24rem, 100%);
    padding: 1.8rem 1.8rem 1.6rem;
    background: var(--bone);
    color: var(--ink);
    border-radius: 3px;
    box-shadow: 0 28px 60px rgb(0 0 0 / 0.38);
    transform: rotate(-0.8deg);
}
.login-brand { margin: 0; line-height: 0; }
.login-brand img { display: block; width: auto; max-width: 100%; height: 3rem; }
.login-title { margin: -0.4rem 0 0.2rem; font-family: var(--face-display); font-weight: 400; font-size: 3.4rem; line-height: 0.95; text-transform: uppercase; }
.login-submit { width: 100%; }
.login-back { justify-self: center; color: var(--ink); font-weight: 700; text-underline-offset: 0.2em; }

/* ---------- Petits écrans ---------- */

@media (max-width: 1180px) {
    .workbench.has-deck { grid-template-columns: minmax(0, 1fr); }
    .deck { position: fixed; z-index: 30; top: auto; right: 0.75rem; bottom: 0.75rem; left: auto; width: min(26rem, calc(100vw - 1.5rem)); max-height: 78vh; }
}

@media (max-width: 760px) {
    /* Bandeau compact : la marque et deux icônes sur une rangée qui part avec la page, les
       onglets sur une seule ligne qui défile de côté. Le haut négatif (marge, rangée de la
       marque, écart) ne laisse collée que la ligne d'onglets ; main.js y ramène l'onglet ouvert.
       Ce que le code fait défiler en haut de l'écran s'arrête sous cette ligne (une marge sur la
       page entière ferait aussi défiler la page au focus d'un onglet collé). */
    #import-results, #panel-tracks { scroll-margin-top: 4rem; }
    .bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 2.75rem auto;
        gap: 0.3rem 0.5rem;
        padding: 0.4rem 1rem 0;
        top: -3.45rem;
    }
    /* Au clavier, la rangée de la marque redescend tant qu'un de ses liens a le focus. */
    .bar:has(.bar-links :focus) { top: 0; }
    .bar-brand { grid-row: 1; grid-column: 1; align-self: center; gap: 0.45rem; min-width: 0; }
    .bar-logo { height: clamp(1.15rem, 6vw, 1.6rem); }
    .bar-title { font-size: clamp(0.95rem, 4.6vw, 1.3rem); }
    .bar-links { grid-row: 1; grid-column: 2; gap: 0.35rem; margin-left: 0; }
    .bar-links a, .bar-links button {
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 2px solid rgb(244 235 221 / 0.45);
        border-radius: var(--radius);
    }
    .bar-links .icon { width: 1.25rem; height: 1.25rem; }
    .bar-link-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    /* La ligne d'onglets va d'un bord à l'autre et s'estompe sur 3rem du côté où d'autres onglets
       sont cachés (classes posées par main.js) ; l'onglet ouvert est ramené hors de ce fondu.
       Elle garde de quoi dessiner l'anneau de focus, que le défilement rognerait. */
    .tabs {
        --fade-start: 0rem;
        --fade-end: 0rem;
        grid-row: 2;
        grid-column: 1 / -1;
        flex-wrap: nowrap;
        gap: 0.25rem;
        margin: 0 -1rem;
        padding: 0.35rem 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 3rem;
        scrollbar-width: none;
        --fade: linear-gradient(to right, transparent calc(var(--fade-start) / 4), #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent calc(100% - var(--fade-end) / 4));
        -webkit-mask-image: var(--fade);
                mask-image: var(--fade);
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs.has-more-start { --fade-start: 3rem; }
    .tabs.has-more-end { --fade-end: 3rem; }
    .tab { flex: none; gap: 0.4rem; padding-inline: 0.75rem; white-space: nowrap; }

    .import-forms { grid-template-columns: minmax(0, 1fr); }
    /* Caler : chaque extrait devient une fiche en trois étages, dans l'ordre de la page (et du
       clavier). Case, vignette et durée ; le titre sur toute la largeur, l'erreur en bandeau
       dessous ; début, fin et actions sous le pouce. Les champs passent à 1rem pour que
       Safari n'agrandisse pas la page quand on les touche. */
    .cut { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
    .cut-main, .cut .marks { display: contents; }
    .cut > input[type="checkbox"] { flex: none; width: 2.4rem; height: 2.4rem; margin: 0; color-scheme: light; }
    .cut-name { order: 1; flex: 1 0 100%; }
    .cut-name input[type="text"] { flex: 1 1 auto; }
    .cut .mark-long { order: 1; flex: 1 0 100%; }
    .cut .cut-find { order: 1; flex: 1 0 100%; justify-content: center; min-height: 2.75rem; font-size: 1rem; }
    /* Badge « En écoute » réduit à l'égaliseur (le texte reste pour les lecteurs d'écran) : la
       fiche ne saute pas quand l'extrait devient actif. */
    .cut .listen-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cut > .finder { order: 3; flex: 1 0 100%; min-width: 0; }
    .atelier .cut-playlist { order: 1; flex: 1 0 100%; width: 100%; min-height: 2.75rem; font-size: 1rem; }
    .cut-time { order: 2; flex: 1 1 0; min-width: 0; }
    .cut .row-actions { order: 2; align-self: flex-end; }
    .cut .row-actions .icon-button { width: 2.75rem; height: 2.75rem; }
    /* Sur téléphone, les flèches d'ordre en carré, au doigt : les crans d'un côté, les extrêmes de l'autre. */
    .order-rank { display: block; min-width: 0; margin: 0 0 0.3rem; text-align: left; }
    .order-moves { display: inline-grid; grid-template-columns: repeat(2, 2.6rem); grid-template-areas: "up top" "down bottom"; gap: 0.45rem; }
    .order-moves .icon-button { width: 2.6rem; height: 2.6rem; }
    .order-moves [data-move="top"] { grid-area: top; }
    .order-moves [data-move="up"] { grid-area: up; }
    .order-moves [data-move="down"] { grid-area: down; }
    .order-moves [data-move="bottom"] { grid-area: bottom; }
    .cut input[type="text"], .cut input[type="number"] { font-size: 1rem; }
    /* Le résumé ne se laisse pas écraser par le tampon : faute de place, le tampon passe dessous. */
    .action-summary { flex: 1 1 14rem; }
    .report-row { grid-template-columns: minmax(0, 1fr); }
    .report-row .row-actions { justify-content: flex-start; }
    .deck { left: 0.5rem; right: 0.5rem; width: auto; }
}

@keyframes stamp {
    0% { transform: scale(1.18) rotate(-2deg); }
    100% { transform: none; }
}