/* 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; }
/* Importer › reprise d'une exportation complète : la carte sous les deux autres, pleine largeur ; ce qui se
   passe (le fichier, l'avertissement, l'erreur), puis le résultat et ses remarques. */
.restore-card { margin-bottom: 1.5rem; }
.restore-card input[type="file"] { max-width: 100%; font: inherit; }
.restore-card input[type="file"]:disabled { opacity: 0.45; }
.restore-card input[type="file"]::file-selector-button {
    min-height: 2.75rem;
    margin-right: 0.75rem;
    padding: 0.5em 0.9em;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.restore-card input[type="file"]:not(:disabled)::file-selector-button:hover { background: rgb(21 20 19 / 0.08); }
.restore-status { display: grid; gap: 0.5rem; justify-items: start; }
.restore-status:empty { display: none; }
.restore-summary { margin: 0; font-weight: 700; }
.restore-notes { margin: 0; padding-left: 1.3rem; color: var(--ink-soft); font-size: 0.88rem; }

.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; }
/* Un bouton bloqué (rien à chercher, aucune année cochée…) se voit éteint et ne réagit plus au survol. */
.atelier .button-ink:disabled, .atelier .button-quiet:disabled, .atelier .stamp:disabled { opacity: 0.45; }
.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; }
.segmented input:disabled + span { opacity: 0.5; cursor: not-allowed; }

/* ---------- 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; }
/* Morceaux › « Corriger des titres » : les lignes collées, l'avant/après, puis Enregistrer. */
.fix-card { margin-bottom: 1rem; }
.fix-card textarea { min-height: 6rem; font-family: inherit; }
.fix-list { display: grid; gap: 0.35rem; max-height: 22rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.fix-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border: 1.5px solid rgb(20 20 20 / 0.15); border-radius: var(--radius); }
.fix-row > input[type="checkbox"] { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--lagoon); color-scheme: light; }
.fix-row.is-error { grid-template-columns: auto minmax(0, 1fr); border-color: var(--alert); }
.fix-row.is-same { opacity: 0.6; }
.fix-new { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.fix-old { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.85rem; overflow-wrap: anywhere; }
.fix-line { font-size: 0.85rem; overflow-wrap: anywhere; }
.fix-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.fix-summary { flex: 1 1 12rem; font-weight: 700; }
/* Playlist d'un morceau, à changer sur place, et « Dupliquer » à côté. */
.table .cell-inline { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.atelier .table .track-playlist { width: auto; max-width: 12rem; min-height: 2.1rem; padding: 0.1rem 1.6rem 0.1rem 0.45rem; border-width: 1.5px; font-size: 0.88rem; }
.table .track-dup { width: 2.1rem; height: 2.1rem; border-width: 1.5px; }
.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); }
/* « Dupliquer » : les autres playlists de l'extrait, chacune avec sa croix. */
.cut-also { display: inline-flex; align-items: center; gap: 0.2rem; }
.cut-also .icon-button { width: 2rem; height: 2rem; border-width: 1.5px; }
/* Lecteur ouvert sur un écran moyen : les boutons de la ligne passent à la ligne plutôt que sous le lecteur. */
.cut .row-actions { flex-wrap: wrap; justify-content: flex-end; }

.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; }
/* Réglages › Playlists : une ligne par playlist (place, nom, genre, nombre de titres, suppression). */
.playlists-card { margin-top: 1.2rem; }
.playlists-card .check-group-title { margin: 0; }
.playlists-list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.playlist-row {
    display: grid;
    grid-template-columns: auto auto minmax(9rem, 1fr) minmax(12rem, 19rem) 10.5rem auto;
    grid-template-areas: "online moves name kind count actions";
    align-items: center;
    gap: 0.5rem;
}
.playlist-moves { grid-area: moves; display: inline-flex; gap: 0.2rem; }
.playlist-row .playlist-online { grid-area: online; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--lagoon); color-scheme: light; }
/* Hors ligne : la playlist reste réglable, mais son nom s'efface un peu. */
.playlist-row.is-offline .playlist-name { color: var(--ink-soft); font-style: italic; }
.playlist-row .playlist-name { grid-area: name; min-width: 0; }
.playlist-row .playlist-kind { grid-area: kind; min-width: 0; }
.playlist-row .playlist-count { grid-area: count; justify-self: start; }
.playlist-row .row-actions { grid-area: actions; justify-content: flex-end; }
.playlist-row input[type="text"], .playlist-row select, .playlist-add input[type="text"], .playlist-add select { min-height: 2.3rem; padding: 0.2rem 0.5rem; border-width: 1.5px; }
.playlist-row .confirm-delete { flex-wrap: wrap; justify-content: flex-end; }
/* Carte étroite (lecteur ouvert, tablette en portrait) : deux rangées, comme sur téléphone. */
@container (max-width: 48rem) {
    .playlist-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "online moves name actions" "online moves kind count"; }
}
.playlist-moves .icon-button, .playlist-row .row-actions .icon-button { width: 2.2rem; height: 2.2rem; border-width: 1.5px; }
.playlist-moves .icon-button[aria-disabled="true"] { opacity: 0.25; cursor: default; }
.playlist-row .playlist-delete:disabled { opacity: 0.3; cursor: not-allowed; }
.playlist-add { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; padding-top: 0.8rem; border-top: 1.5px dashed rgb(20 20 20 / 0.25); }
.playlist-add input { flex: 1 1 12rem; min-width: 0; }
.playlist-add select { flex: 0 1 17rem; min-width: 0; }
@media (max-width: 760px) {
    /* Sur téléphone : flèches à gauche, nom et suppression, puis genre et nombre de titres. */
    .playlist-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "online moves name actions" "online moves kind count"; padding-bottom: 0.45rem; border-bottom: 1px solid rgb(20 20 20 / 0.12); }
    .playlist-row .playlist-online { width: 1.6rem; height: 1.6rem; }
    .playlist-moves { flex-direction: column; }
    .playlist-moves .icon-button, .playlist-row .row-actions .icon-button { width: 2.75rem; height: 2.75rem; }
    .playlist-row input[type="text"], .playlist-row select, .playlist-add input[type="text"], .playlist-add select { font-size: 1rem; min-height: 2.75rem; }
    .playlist-add button { flex: 1 1 100%; justify-content: center; }
}
/* Calée sur le bas du menu, comme les barres d'outils : « Sans année / Tous » et le bouton restent à
   la hauteur du menu, pas de son nom au-dessus. */
.check-run { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; }
/* Vue « Vidéos » : le texte d'état reste au milieu du bouton. */
.check-run > .check-status { align-self: center; }
/* 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 ses actions (copier les introuvables, demander à l'IA) 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-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* « Tout cocher » : un petit lien juste après le titre et son compte. */
.check-group-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.9rem; }
.check-all {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0 0.15rem;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
}
.check-all:hover { color: var(--lagoon); }
.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; }
/* « Dupliquer » sous un morceau : la playlist où le copier. */
.table tr.dup-row > td { padding: 0.6rem 0.9rem 0.9rem; background: #fffaf2; }
.dup-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 700; }
.dup-form select { width: auto; max-width: 100%; min-height: 2.4rem; padding: 0.2rem 1.8rem 0.2rem 0.5rem; border-width: 1.5px; }
/* Comme la recherche : sur un tableau qui défile de côté, la ligne reste dans la partie visible. */
.table tr.dup-row .dup-form { position: sticky; left: 0.9rem; width: calc(100cqi - 1.8rem); }
.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;
    /* Juste sous le bandeau, dont la hauteur suit le nombre de ses rangées (--bar-h, posée
       par main.js). */
    top: calc(var(--bar-h, 4.1rem) + 1.4rem);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* Il tient dans la fenêtre : c'est la vidéo qui cède de la hauteur. Sur un écran trop bas
       pour tout montrer, il défile sans barre : rien ne se chevauche ni ne se perd. */
    max-height: calc(100vh - var(--bar-h, 4.1rem) - 2.9rem);
    /* Il empiète sur la marge du bas de la page : en fin de page, il ne remonte pas sous le
       bandeau, et la page garde sa hauteur (la liste ne saute pas à l'ouverture). */
    margin-bottom: -1.5rem;
    overflow: auto;
    scrollbar-width: none;
    /* Au clavier, un bouton ne s'arrête ni au bord, ni sous Enregistrer épinglé. */
    scroll-padding-block: 0.75rem 4.75rem;
    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);
}
.deck::-webkit-scrollbar { display: none; }
.deck > * { flex: none; }
.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; display: flex; flex: 0 1 auto; align-items: center; min-height: 3rem; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
/* Quand le cadre cède de la hauteur, le lecteur garde sa taille et son 16:9 : le cadre n'en montre
   que la bande du milieu (YouTube demande au moins 200 px de haut). */
.deck-screen iframe, #deck-player { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; 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 {
    align-self: flex-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-listen, .deck-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.deck-listen .button-quiet { flex: 1 1 auto; color: var(--bone); border-color: rgb(244 235 221 / 0.6); }
.deck-listen .button-quiet:where(:not(:disabled)):hover { background: rgb(244 235 221 / 0.1); }
/* Sans Enregistrer (onglet Caler, où le calage se garde tout seul), la rangée ne laisse pas de vide. */
.deck-actions:has(> [hidden]) { display: none; }
/* Si le lecteur défile quand même, Enregistrer reste à l'écran. */
.deck-actions { position: sticky; bottom: -0.4rem; margin-block: -0.4rem; padding-block: 0.4rem; background: var(--ink); }
/* Le contour du focus passe devant cette rangée. */
.deck-listen :focus-visible, .deck-marks :focus-visible { position: relative; z-index: 1; }
.deck-actions .button-ink { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.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; margin-bottom: 0; }
}

/* Le lecteur entier ne tient pas dans la place laissée (classes posées par main.js, d'après la
   hauteur de la fenêtre et du bandeau) : IN et OUT passent sur une seule rangée et le rappel des
   touches s'efface, pour garder de la vidéo sans avoir à défiler. Encore moins de place : Début
   et Fin perdent leur libellé visible, ils sont à côté de IN et OUT. */
@media (min-width: 761px) {
    .deck.is-compact { gap: 0.5rem; padding-block: 0.7rem 0.8rem; }
    .deck.is-compact .deck-meta { margin-top: -0.25rem; }
    .deck.is-compact .deck-marks { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.5rem; }
    .deck.is-compact .mark-button { padding-inline: 0.5rem; }
    .deck.is-compact .deck-help { display: none; }
    .deck.is-tight .deck-marks .field-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Téléphone, ou fenêtre vraiment trop basse : tout ne peut pas tenir, la vidéo garde donc sa
   taille et le lecteur défile, sans barre. */
@media (max-width: 760px), (max-height: 500px) {
    .deck-screen { flex: none; }
}

@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-also { order: 1; flex: 1 0 100%; display: flex; gap: 0.4rem; }
    .atelier .cut-also .cut-playlist { order: 0; flex: 1 1 auto; width: auto; min-width: 0; }
    .cut-also .icon-button { width: 2.75rem; height: 2.75rem; flex: none; }
    .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; }
}

/* ---------- Stats : combien, comment et quoi on joue ---------- */
.stats-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.stats-body[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s; }
.stats-figures { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 1rem; }
.stats-figure {
    display: grid;
    align-content: space-between;
    gap: 0.3rem;
    padding: 0.9rem 1.1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fffaf2;
}
.stats-figure-label { margin: 0; color: var(--ink-soft); font-size: 0.88rem; font-weight: 700; }
.stats-figure-value { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1.05; }
.stats-hero { background: var(--ink); color: var(--bone); }
.stats-hero .stats-figure-label { color: var(--bone-soft); }
.stats-hero .stats-figure-value { font-size: clamp(3rem, 6vw, 4.2rem); }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.stats-wide { margin-top: 1rem; }
.stats-card-title { margin: 0; font-size: 1rem; font-weight: 800; }
.stats-empty p { margin: 0; }
.stats-note { margin-top: 1.4rem; max-width: 70ch; }

/* Colonnes : une par jour, mois ou heure ; la hauteur donne les parties. */
.stats-chart { position: relative; display: grid; gap: 0.7rem; margin: 0; }
.stats-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.55rem; row-gap: 0.3rem; }
.stats-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 10rem; color: var(--ink-soft); font-size: 0.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.stats-cols {
    touch-action: pan-y;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 10rem;
    border-top: 1px solid rgb(21 20 19 / 0.12);
    border-bottom: 1px solid rgb(21 20 19 / 0.35);
}
.stats-col { display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; min-width: 0; height: 100%; }
.stats-col > span { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--lagoon); }
.stats-col.is-zero > span { height: 0 !important; }
.stats-col.is-active > span { background: var(--lagoon-deep); }
.stats-col.is-active.is-zero { box-shadow: inset 0 -3px 0 var(--lagoon-deep); }
.stats-xaxis { position: relative; height: 1.1rem; color: var(--ink-soft); font-size: 0.75rem; }
.stats-xaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.stats-xaxis span:first-child:not(:only-child) { transform: translateX(-0.6rem); }
.stats-xaxis span:last-child:not(:only-child) { transform: translateX(calc(-100% + 0.6rem)); }
.stats-tip {
    position: absolute;
    top: 1.6rem;
    z-index: 3;
    transform: translateX(-50%);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--bone);
    font-size: 0.82rem;
    white-space: nowrap;
    pointer-events: none;
}

/* Barres : longueur relative au plus grand ; valeur et part du total à droite. */
.stats-bars { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.stats-bars li { display: grid; grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.stats-bars-label { font-weight: 700; overflow-wrap: anywhere; }
.stats-track { height: 0.85rem; border-radius: 0 4px 4px 0; background: rgb(11 85 96 / 0.1); }
.stats-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--lagoon); }
.stats-value { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.stats-value small { color: var(--ink-soft); font-size: 0.82rem; font-weight: 600; }
.stats-meta { grid-column: 1 / -1; margin-top: -0.25rem; color: var(--ink-soft); font-size: 0.82rem; }
/* Toutes les barres d'une carte partent et finissent au même endroit, quelle que soit la largeur des chiffres. */
@supports (grid-template-columns: subgrid) {
    .stats-bars { grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) auto; column-gap: 0.75rem; }
    .stats-bars li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

@media (max-width: 760px) {
    .stats-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .stats-hero, .stats-figure:last-child { grid-column: 1 / -1; }
    .stats-figure-value { font-size: 1.5rem; }
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
    .stats-bars, .stats-bars li { grid-template-columns: minmax(0, 1fr) auto; }
    .stats-bars li { row-gap: 0.25rem; }
    .stats-track { grid-column: 1 / -1; grid-row: 2; }
    .stats-yaxis, .stats-cols { height: 8rem; }
}

/* ---------- Boîte à idées ---------- */
.ideas-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.ideas-toolbar .segmented { flex-wrap: wrap; }
.idea-filter-count:not(:empty) { margin-left: 0.4rem; font-variant-numeric: tabular-nums; opacity: 0.75; }
.ideas-list:focus { outline: none; }
.idea-body { display: grid; gap: 0.35rem; min-width: 0; }
.idea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; }
.idea-meta small { color: var(--ink-soft); font-weight: 600; }
.idea-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 1rem; }
.idea-actions { flex-wrap: wrap; justify-content: flex-end; }
.idea-status[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); }
#ideas-summary.is-alert { color: var(--alert); font-weight: 700; }