/*
 * Styles des vues écrites à la main dans l'admin (#221).
 *
 * Depuis Filament 4, la feuille de style de Filament ne contient plus les classes utilitaires de
 * Tailwind (elles sont passées dans ses propres classes `fi-*`) : une classe Tailwind écrite dans une
 * vue de l'admin n'a donc AUCUN effet. Pas de thème Tailwind ici, donc pas de build d'assets au
 * déploiement : ce fichier est du CSS ordinaire, publié tel quel par `php artisan filament:assets`
 * (deploy.sh le lance déjà) dans public/css/app/, et chargé sur toutes les pages du panel
 * (enregistré dans AdminPanelProvider).
 *
 * Règles du fichier :
 *  - une classe par rôle, préfixée `vm-`, jamais de classe utilitaire ;
 *  - les couleurs viennent des variables du panel (`--gray-500`, `--primary-600`, `--warning-600`…)
 *    pour suivre le thème, avec leur variante sombre sous `.dark` ;
 *  - quand un composant de Filament fait l'affaire (section, onglets, bouton, badge, lien, état vide,
 *    classes `fi-ta-*` d'un tableau), on s'en sert plutôt que d'écrire une règle ici.
 */

/* ─── Textes ─── */

.vm-muted {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-500);
}

.vm-note {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .vm-muted,
.dark .vm-note {
    color: var(--gray-400);
}

/* Contenu absent d'une variante (bannière ou vidéo manquante), contenu « script ». */
.vm-missing {
    color: var(--danger-500);
    font-style: italic;
}

.vm-script {
    color: var(--warning-600);
}

/* ─── Mise en page ─── */

/* Un champ seul au-dessus d'une liste (choix du tube, de la période) : pas sur toute la largeur. */
.vm-narrow {
    max-width: 28rem;
}

.vm-stack > * + * {
    margin-top: 1rem;
}

.vm-stack-sm > * + * {
    margin-top: 0.75rem;
}

/* Tableau d'un composant Livewire affiché dans une fenêtre (variantes d'une pub). */
.vm-pad {
    padding: 1rem;
}

/* Boutons sous un formulaire de page (Intégrations, Widget cams). */
.vm-form-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Carte : même fond, même arrondi et même liseré que les sections et les tableaux de Filament. */
.vm-card {
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent),
        0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.dark .vm-card {
    background-color: var(--gray-900);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.vm-scroll-x {
    overflow-x: auto;
}

/* ─── Zone de texte en lecture seule (contenu généré à copier) ─── */

.vm-code-area {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: #fff;
    color: var(--gray-950);
}

.dark .vm-code-area {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
    color: #fff;
}

/* ─── En-tête de la fiche d'un tube (#217) ─── */

.vm-tube-header-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.vm-tube-header-figures {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-600);
}

.vm-tube-header-figures strong {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .vm-tube-header-figures {
    color: var(--gray-400);
}

.dark .vm-tube-header-figures strong {
    color: #fff;
}

/* ─── Total sous le tableau des ventes ─── */

.vm-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.vm-totals-label {
    color: var(--gray-500);
}

.vm-totals-value {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .vm-totals-label {
    color: var(--gray-400);
}

.dark .vm-totals-value {
    color: #fff;
}

/* ─── Tableaux écrits à la main ───
   Le <table> porte `fi-ta-table` (traits entre les lignes, fond de l'en-tête et du pied) et ses <th>
   `fi-ta-header-cell` (+ `fi-align-end`) : ce sont les classes de Filament. Les cellules sont ici. */

/* Cadre arrondi d'un tableau posé dans une section (résumés de la rentabilité). */
.vm-table-frame {
    overflow-x: auto;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent);
}

.dark .vm-table-frame {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.vm-table td {
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-950);
}

.dark .vm-table td {
    color: #fff;
}

.vm-table .vm-end {
    text-align: end;
}

@media (min-width: 640px) {
    .vm-table td:first-of-type {
        padding-inline-start: 1.5rem;
    }

    .vm-table td:last-of-type {
        padding-inline-end: 1.5rem;
    }
}

/* Vues groupées de la rentabilité (#188) : lignes plus serrées, teinte par groupe, pied en gras.
   La teinte vient des variables `--color-*` posées sur chaque <tbody> (get_color_css_variables). */
.vm-grouped tbody td {
    padding-block: 0.5rem;
}

.vm-grouped tbody tr {
    background-color: var(--color-50);
}

.vm-grouped tbody tr.vm-level-top {
    background-color: var(--color-100);
}

.dark .vm-grouped tbody tr {
    background-color: color-mix(in oklab, var(--color-400) 10%, transparent);
}

.dark .vm-grouped tbody tr.vm-level-top {
    background-color: color-mix(in oklab, var(--color-500) 20%, transparent);
}

.vm-grouped tr.vm-group td,
.vm-grouped tfoot td {
    font-weight: 600;
}

.vm-grouped-label {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

/* Retrait d'un niveau, et place du chevron sur les lignes qui n'en ont pas. */
.vm-grouped-indent {
    width: 1.25rem;
    flex-shrink: 0;
}

.vm-grouped-toggle {
    display: flex;
    width: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
}

.vm-grouped-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 75ms;
}

.vm-grouped-toggle.vm-collapsed svg {
    transform: rotate(-180deg);
}

.dark .vm-grouped-toggle {
    color: var(--gray-500);
}

.vm-grouped-label a:hover,
.vm-grouped-label a:focus-visible {
    text-decoration: underline;
}

.vm-grouped-fallback {
    margin-inline-start: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    color: var(--warning-600);
}

.dark .vm-grouped-fallback {
    color: var(--warning-400);
}

/* Petit tableau sans cadre, dans une section (sites déjà vus). */
.vm-plain-table {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.vm-plain-table th,
.vm-plain-table td {
    padding: 0.25rem 1rem 0.25rem 0;
    text-align: left;
}

.vm-plain-table th:last-child,
.vm-plain-table td:last-child {
    padding-right: 0;
}

.vm-plain-table th {
    font-weight: 500;
    color: var(--gray-500);
}

.vm-plain-table .vm-end {
    text-align: right;
}

.vm-plain-table tbody tr {
    border-top: 1px solid var(--gray-100);
}

.dark .vm-plain-table th {
    color: var(--gray-400);
}

.dark .vm-plain-table tbody tr {
    border-top-color: rgb(255 255 255 / 0.05);
}

/* ─── Lecteur d'une fiche vidéo et « Utiliser cette image comme miniature » (#219) ─── */
/* Début du bloc #219 : vue components/video-player.blade.php. */

.vm-player {
    display: grid;
    gap: 0.75rem;
}

.vm-player-video {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    background: #000;
}

/* Dans la fenêtre « Modifier » d'une liste : le lecteur ne pousse pas le formulaire hors de l'écran. */
.vm-player-video-compact {
    max-height: 360px;
}

.vm-player-capture {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
}

.vm-player-help {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.vm-player-thumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vm-player-thumb img {
    width: 160px;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.375rem;
    background: var(--gray-100);
}

.vm-player-thumb figcaption {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .vm-player-help,
.dark .vm-player-thumb figcaption {
    color: var(--gray-400);
}

.dark .vm-player-thumb img {
    background: rgb(255 255 255 / 0.05);
}

/* Fin du bloc #219. */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   #218 — Fiche du tube : Apparence illustrée, Pubs dessinées, Contenu compact (début du bloc)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Cartes à cliquer (ChoiceCards, page « Apparence ») ───
   Un bouton radio par carte, masqué à l'œil mais pas au clavier : la carte qui le suit montre le
   choix coché (liseré et teinte de la couleur du panel) et le focus (contour). */

.vm-choices {
    display: grid;
    gap: 0.75rem;
}

.vm-choices-group-title {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--gray-500);
}

.vm-choices-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vm-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.vm-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.vm-choice-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 10rem;
    height: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent);
    transition:
        box-shadow 75ms,
        background-color 75ms;
}

.vm-choice:hover .vm-choice-body {
    box-shadow: 0 0 0 1px var(--gray-400);
}

.vm-choice-input:checked + .vm-choice-body {
    background-color: var(--primary-50);
    box-shadow: 0 0 0 2px var(--primary-600);
}

.vm-choice-input:focus-visible + .vm-choice-body {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.vm-choice-input:disabled + .vm-choice-body {
    cursor: not-allowed;
    opacity: 0.6;
}

.vm-choice-art {
    display: block;
}

.vm-choice-text {
    display: grid;
}

.vm-choice-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--gray-950);
}

.vm-choice-hint {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .vm-choices-group-title,
.dark .vm-choice-hint {
    color: var(--gray-400);
}

.dark .vm-choice-body {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.dark .vm-choice:hover .vm-choice-body {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3);
}

.dark .vm-choice-input:checked + .vm-choice-body {
    background-color: color-mix(in oklab, var(--primary-500) 15%, transparent);
    box-shadow: 0 0 0 2px var(--primary-500);
}

.dark .vm-choice-input:focus-visible + .vm-choice-body {
    outline-color: var(--primary-500);
}

.dark .vm-choice-name {
    color: #fff;
}

/* Pastilles (palettes) : les trois couleurs et le nom sur une ligne. */
.vm-choices-compact .vm-choices-list {
    gap: 0.5rem;
}

.vm-choices-compact .vm-choice-body {
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    border-radius: 9999px;
}

.vm-swatches {
    display: inline-flex;
    gap: 0.125rem;
}

.vm-swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    box-shadow: 0 0 0 1px rgb(128 128 128 / 0.5);
}

/* ─── Dessins des cartes (Forms\Drawings) ─── */

.vm-draw {
    display: block;
    width: auto;
    max-width: 100%;
    height: 4.5rem;
    margin-inline: auto;
}

.vm-draw-frame {
    fill: var(--gray-50);
    stroke: var(--gray-300);
    stroke-width: 1;
}

.vm-draw-bar {
    fill: var(--gray-400);
}

.vm-draw-thumb,
.vm-draw-line {
    fill: var(--gray-300);
}

.vm-draw-void {
    fill: var(--gray-200);
}

.vm-draw-box {
    fill: #fff;
}

.dark .vm-draw-frame {
    fill: var(--gray-900);
    stroke: var(--gray-600);
}

.dark .vm-draw-bar {
    fill: var(--gray-400);
}

.dark .vm-draw-thumb,
.dark .vm-draw-line {
    fill: var(--gray-600);
}

.dark .vm-draw-void {
    fill: var(--gray-950);
}

.dark .vm-draw-box {
    fill: var(--gray-800);
}

.vm-choice-input:checked + .vm-choice-body .vm-draw-frame {
    stroke: var(--primary-500);
}

.vm-choice-input:checked + .vm-choice-body .vm-draw-bar {
    fill: var(--primary-600);
}

.vm-choice-input:checked + .vm-choice-body .vm-draw-thumb {
    fill: var(--primary-400);
}

.dark .vm-choice-input:checked + .vm-choice-body .vm-draw-bar {
    fill: var(--primary-400);
}

.dark .vm-choice-input:checked + .vm-choice-body .vm-draw-thumb {
    fill: var(--primary-500);
}

/* ─── Page « Pubs » : les schémas et la liste des zones (Forms\AdsForm, vues ads-map*) ───
   Une zone est en pointillés gris tant qu'elle est vide, pleine et de la couleur du panel une fois
   reliée ; le préroll a sa couleur à lui (`--info-*`, bleu : la couleur du panel, ambre, est aussi
   celle des avertissements). `vm-ads-hot` / `vm-ads-row-hot` : la zone et la ligne que l'on survole
   (Alpine). */

.vm-ads-map {
    min-width: 0;
}

/* Sur grand écran, les schémas restent en vue pendant que l'on descend dans la liste : c'est la case de
   la grille de Filament qui contient le dessin qui colle, sous la barre du haut. En dessous de `2xl`, le
   dessin est au-dessus de la liste et ne doit pas la recouvrir. */
@media (min-width: 96rem) {
    .fi-grid-col:has(> .fi-sc-component > .vm-ads-map) {
        position: sticky;
        top: 5rem;
        align-self: start;
    }
}

.vm-ads-pages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.vm-ads-figure {
    margin: 0;
}

.vm-ads-svg {
    display: block;
    width: 100%;
    height: auto;
}

.vm-ads-caption {
    margin-top: 0.375rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--gray-600);
}

.vm-ads-page {
    fill: #fff;
    stroke: var(--gray-300);
    stroke-width: 1;
}

.vm-ads-ink {
    fill: var(--gray-400);
}

.vm-ads-soft {
    fill: var(--gray-200);
}

.vm-ads-rule {
    fill: var(--gray-200);
}

/* Le lecteur est sombre dans les deux thèmes, comme sur le site. */
.vm-ads-player {
    fill: var(--gray-800);
}

.vm-ads-player-bar {
    fill: var(--gray-500);
}

.vm-ads-zone {
    cursor: default;
}

.vm-ads-zone-box {
    fill: transparent;
    stroke: var(--gray-400);
    stroke-width: 1;
    stroke-dasharray: 3 2;
    transition:
        fill 75ms,
        stroke-width 75ms;
}

.vm-ads-zone-dot {
    fill: #fff;
    stroke: var(--gray-400);
    stroke-width: 1;
}

.vm-ads-zone-number {
    fill: var(--gray-600);
    font-size: 9px;
    font-weight: 700;
}

.vm-ads-zone-play {
    fill: var(--gray-400);
}

.vm-ads-zone-empty.vm-ads-zone-dark .vm-ads-zone-box {
    stroke: var(--gray-400);
}

.vm-ads-zone-empty.vm-ads-zone-preroll .vm-ads-zone-number {
    fill: var(--gray-300);
}

.vm-ads-zone-linked .vm-ads-zone-box {
    fill: color-mix(in oklab, var(--primary-500) 30%, transparent);
    stroke: var(--primary-600);
    stroke-dasharray: none;
}

.vm-ads-zone-linked .vm-ads-zone-dot {
    fill: var(--primary-600);
    stroke: var(--primary-600);
}

.vm-ads-zone-linked .vm-ads-zone-number {
    fill: #fff;
}

.vm-ads-zone-linked.vm-ads-zone-dark .vm-ads-zone-box {
    fill: color-mix(in oklab, var(--primary-500) 55%, transparent);
    stroke: var(--primary-400);
}

.vm-ads-zone-preroll.vm-ads-zone-linked .vm-ads-zone-box {
    fill: var(--info-500);
    stroke: var(--info-500);
}

.vm-ads-zone-preroll.vm-ads-zone-linked .vm-ads-zone-play {
    fill: #fff;
}

.vm-ads-hot .vm-ads-zone-box {
    fill: color-mix(in oklab, var(--gray-500) 25%, transparent);
    stroke-width: 2;
}

.vm-ads-hot.vm-ads-zone-linked .vm-ads-zone-box {
    fill: color-mix(in oklab, var(--primary-500) 60%, transparent);
}

.vm-ads-hot.vm-ads-zone-preroll.vm-ads-zone-linked .vm-ads-zone-box {
    fill: var(--info-400);
}

.vm-ads-status {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-600);
}

.vm-ads-status strong {
    font-weight: 600;
    color: var(--gray-950);
}

.vm-ads-legend {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.vm-ads-legend li {
    display: flex;
    align-items: center;
    column-gap: 0.375rem;
}

.vm-ads-key {
    width: 1rem;
    height: 0.625rem;
    border-radius: 0.125rem;
    border: 1px dashed var(--gray-400);
}

.vm-ads-key-linked {
    border: 1px solid var(--primary-600);
    background-color: color-mix(in oklab, var(--primary-500) 30%, transparent);
}

.vm-ads-key-preroll {
    border: 1px solid var(--info-500);
    border-radius: 9999px;
    background-color: var(--info-500);
}

/* La liste : une ligne par zone (pastille, nom, choix). */
.vm-ads-row {
    margin-inline: -0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 75ms;
}

.vm-ads-row-hot {
    background-color: var(--gray-100);
}

.vm-ads-row .fi-fo-field-label-ctn {
    align-items: center;
}

/* Le nom prend la moitié de la ligne (un tiers dans Filament : trop peu pour la pastille, le nom et l'aide). */
@media (min-width: 40rem) {
    .vm-ads-row.fi-fo-field-has-inline-label {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .vm-ads-row.fi-fo-field-has-inline-label .fi-fo-field-content-col {
        grid-column: auto;
    }
}

.vm-ads-pin {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px dashed var(--gray-400);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    color: var(--gray-600);
}

.vm-ads-pin-linked {
    border: 1px solid var(--primary-600);
    background-color: var(--primary-600);
    color: #fff;
}

.vm-ads-pin-preroll.vm-ads-pin-linked {
    border-color: var(--info-500);
    background-color: var(--info-500);
}

.dark .vm-ads-caption,
.dark .vm-ads-status {
    color: var(--gray-400);
}

.dark .vm-ads-status strong {
    color: #fff;
}

.dark .vm-ads-legend {
    color: var(--gray-400);
}

.dark .vm-ads-page {
    fill: var(--gray-900);
    stroke: var(--gray-600);
}

.dark .vm-ads-ink {
    fill: var(--gray-500);
}

.dark .vm-ads-soft,
.dark .vm-ads-rule {
    fill: var(--gray-700);
}

.dark .vm-ads-player {
    fill: var(--gray-950);
}

.dark .vm-ads-zone-box,
.dark .vm-ads-key {
    stroke: var(--gray-500);
    border-color: var(--gray-500);
}

.dark .vm-ads-zone-dot {
    fill: var(--gray-800);
    stroke: var(--gray-500);
}

.dark .vm-ads-zone-number {
    fill: var(--gray-300);
}

.dark .vm-ads-zone-linked .vm-ads-zone-box {
    stroke: var(--primary-400);
}

.dark .vm-ads-zone-linked .vm-ads-zone-dot {
    fill: var(--primary-500);
    stroke: var(--primary-500);
}

.dark .vm-ads-zone-linked .vm-ads-zone-number {
    fill: #fff;
}

.dark .vm-ads-zone-preroll.vm-ads-zone-linked .vm-ads-zone-box {
    stroke: var(--info-500);
}

.dark .vm-ads-key-linked {
    border-color: var(--primary-400);
}

.dark .vm-ads-key-preroll {
    border-color: var(--info-500);
}

.dark .vm-ads-row-hot {
    background-color: rgb(255 255 255 / 0.05);
}

.dark .vm-ads-pin {
    border-color: var(--gray-500);
    color: var(--gray-300);
}

.dark .vm-ads-pin-linked {
    border-color: var(--primary-500);
    background-color: var(--primary-500);
    color: #fff;
}

.dark .vm-ads-pin-preroll.vm-ads-pin-linked {
    border-color: var(--info-500);
    background-color: var(--info-500);
}

/* ─── Page « Contenu » : listes de blocs compactes (TubeSettingsForm::blocks) ───
   Le Repeater est celui de Filament ; ces règles en font une ligne par bloc. Chaque bloc (`li`) devient
   une grille à trois colonnes : son en-tête (poignée, nom, bouton de suppression), l'interrupteur, le
   nombre. Le contenu du bloc et la grille de son formulaire s'effacent (`display: contents`) pour que
   leurs champs se rangent dans la grille du bloc, à côté du nom. La seconde ligne d'un bloc
   « Catégorie ou tag » (`vm-block-target`) occupe toute sa largeur. La légende (`vm-blocks-head`) a les
   mêmes colonnes que les blocs. */

.vm-blocks-head,
.vm-blocks .fi-fo-repeater-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.75rem 5rem;
    align-items: center;
    column-gap: 0.75rem;
    padding-inline-end: 0.75rem;
}

.vm-blocks-head {
    /* Aligné sur le nom des blocs : 0,5rem de marge, la poignée (1,25rem), 0,5rem d'espace. */
    padding-inline-start: 2.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--gray-500);
}

.vm-blocks .fi-fo-repeater-items {
    gap: 0.375rem;
}

.vm-blocks .fi-fo-repeater-item {
    border-radius: 0.5rem;
    /* Même hauteur pour toutes les lignes, avec ou sans nombre, et le champ ne touche pas le bord. */
    min-height: 2.75rem;
    padding-block: 0.125rem;
}

.vm-blocks .fi-fo-repeater-item-header {
    min-width: 0;
    column-gap: 0.5rem;
    padding: 0.375rem 0 0.375rem 0.5rem;
    /* Laisse voir en entier le contour de focus de la poignée et du bouton de suppression. */
    overflow: visible;
}

.vm-blocks .fi-fo-repeater-item-header-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.vm-blocks .fi-fo-repeater-item-content,
.vm-blocks .fi-fo-repeater-item-content > .fi-sc {
    display: contents;
}

.vm-blocks .fi-fo-repeater-item-content > .fi-sc > .fi-grid-col {
    min-width: 0;
}

/* Un bloc masqué : son nom s'efface un peu. */
.vm-blocks .fi-fo-repeater-item:has(button[role='switch'][aria-checked='false']) .fi-fo-repeater-item-header-label {
    color: var(--gray-400);
}

/* Le message d'erreur d'un nombre s'étend vers la gauche, au lieu de s'écrire dans une colonne de 5rem. */
.vm-block-count .fi-fo-field-wrp-error-message {
    justify-self: end;
    width: max-content;
    max-width: 16rem;
    text-align: end;
}

.vm-block-target {
    padding: 0.125rem 0 0.75rem 2.25rem;
}

.vm-block-target > .fi-sc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
}

.vm-block-target > .fi-sc > .fi-grid-col {
    flex: 1 1 9rem;
    min-width: 0;
}

.dark .vm-blocks-head {
    color: var(--gray-400);
}

.dark .vm-blocks .fi-fo-repeater-item:has(button[role='switch'][aria-checked='false']) .fi-fo-repeater-item-header-label {
    color: var(--gray-500);
}

/* Menu de la fiche du tube : dix entrées. Elles passent à la ligne au lieu de défiler, sinon la
   dernière (« Friends ») sort de l'écran sur un portable. */
.fi-page-sub-navigation-tabs {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    overflow-x: visible;
}

/* ═══ #218 (fin du bloc) ═══ */

/* ═══ Listes : colonnes de pastilles (tags d'une vidéo) ═══
   Les pastilles passent à la ligne (->wrap()). Sans largeur minimale, le tableau réduit la colonne à
   une pastille par ligne. */
.vm-col-badges {
    min-width: 14rem;
}

/* ═══ #236 — Signalements : tableaux et fiche d'un visiteur (début du bloc) ═══ */

/* Ses comptes et ses pastilles (« peu fiable », « ignoré ») sur une ligne. */
.vm-reporter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-950);
}

.dark .vm-reporter-summary {
    color: #fff;
}

/* Tableaux des signalements : aucun défilement horizontal à 1440 px avec le menu ouvert. Les colonnes de texte
   passent à la ligne ; sans largeur minimale, le tableau les réduit à un mot par ligne. `overflow-wrap: anywhere`
   coupe aussi un mot sans espace (slug encodé, adresse collée dans un commentaire). */
.vm-col-video {
    min-width: 11rem;
    overflow-wrap: anywhere;
}

.vm-col-reasons {
    min-width: 9rem;
}

.vm-col-comment {
    min-width: 10rem;
    overflow-wrap: anywhere;
}

.vm-col-decision {
    min-width: 10rem;
}

/* ═══ #236 (fin du bloc) ═══ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   #238 — Fiche du tube : mise en page (barre latérale, tailles par page) et blocs de la page vidéo
   (début du bloc)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Page « Contenu » : la colonne « Taille » des listes de blocs (accueil, page vidéo) ───
   Une quatrième colonne après le nombre. Filament rend un champ caché comme une case vide masquée
   (`fi-grid-col fi-hidden`) : sans placement explicite, la taille glisserait dans la colonne du nombre
   sur un bloc qui n'en a pas (les vidéos des amis de la page vidéo). Le nombre (ou ce qui le remplace)
   va donc toujours en colonne 3, la taille en colonne 4. Sur un téléphone, quatre colonnes ne tiennent
   pas : la taille passe sur une seconde ligne, sous le nom, et la légende n'annonce que trois colonnes. */

.vm-blocks .fi-grid-col:has(> .fi-sc-component > .vm-block-count),
.vm-blocks .fi-grid-col:has(> .fi-sc-component > .vm-block-note) {
    grid-column: 3;
}

.vm-blocks-sized .fi-grid-col:has(> .fi-sc-component > .vm-block-size) {
    grid-column: 1 / -1;
    padding: 0 0 0.5rem 2.25rem;
}

.vm-blocks-head-sized > span:nth-child(4) {
    display: none;
}

@media (min-width: 40rem) {
    .vm-blocks-head-sized,
    .vm-blocks-sized .fi-fo-repeater-item {
        grid-template-columns: minmax(0, 1fr) 3.75rem 5rem 9.75rem;
    }

    .vm-blocks-sized .fi-grid-col:has(> .fi-sc-component > .vm-block-size) {
        grid-column: 4;
        padding: 0;
    }

    .vm-blocks-head-sized > span:nth-child(4) {
        display: inline;
    }
}

/* « page Friends » à la place du nombre des vidéos des amis (page vidéo). */
.vm-block-note {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.vm-block-note-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vm-block-note-link:hover,
.vm-block-note-link:focus-visible {
    color: var(--primary-600);
}

.dark .vm-block-note {
    color: var(--gray-400);
}

.dark .vm-block-note-link:hover,
.dark .vm-block-note-link:focus-visible {
    color: var(--primary-400);
}

/* ─── Page « Apparence » : surcharges par page en lignes compactes (AppearanceForm::overrides) ───
   Le nom de la page à gauche, la liste à droite, à moitié chacun (un tiers pour le nom dans Filament :
   trop peu pour « Espace membre et connexion » et l'icône d'aide). */

.vm-override-row .fi-fo-field-label-ctn {
    align-items: center;
}

@media (min-width: 40rem) {
    .vm-override-row.fi-fo-field-has-inline-label {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .vm-override-row.fi-fo-field-has-inline-label .fi-fo-field-content-col {
        grid-column: auto;
    }
}

/* ─── Dessin de la barre latérale (Forms\Drawings::sidebar) : la barre et ses lignes ─── */

.vm-draw-side {
    fill: var(--gray-200);
    stroke: var(--gray-300);
    stroke-width: 0.75;
}

.vm-draw-side-line {
    fill: var(--gray-400);
}

.dark .vm-draw-side {
    fill: var(--gray-800);
    stroke: var(--gray-600);
}

.dark .vm-draw-side-line {
    fill: var(--gray-500);
}

.vm-choice-input:checked + .vm-choice-body .vm-draw-side {
    fill: var(--primary-100);
    stroke: var(--primary-400);
}

.vm-choice-input:checked + .vm-choice-body .vm-draw-side-line {
    fill: var(--primary-500);
}

.dark .vm-choice-input:checked + .vm-choice-body .vm-draw-side {
    fill: color-mix(in oklab, var(--primary-500) 25%, transparent);
    stroke: var(--primary-400);
}

.dark .vm-choice-input:checked + .vm-choice-body .vm-draw-side-line {
    fill: var(--primary-400);
}

/* ═══ #238 (fin du bloc) ═══ */

/* ═══ #239 — Formulaire d'une catégorie : compteur de caractères (début du bloc) ═══ */

/* Compteur des champs limités (titre et meta description, vue tube-category/char-count) : à droite du libellé,
   chiffres à largeur fixe pour qu'il ne bouge pas pendant la saisie, en rouge au-delà de la limite. */
.vm-char-count {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vm-char-count--over {
    color: var(--danger-600);
    font-weight: 600;
}

.dark .vm-char-count--over {
    color: var(--danger-400);
}

/* ═══ #239 (fin du bloc) ═══ */

/* ═══ #242 — Commentaires : liste et fiche (début du bloc) ═══
   Liste à 1280 px avec le menu ouvert : environ 880 px pour le tableau. Largeurs minimales des colonnes, marges
   comprises : case à cocher 52 px, vidéo 136, auteur 120, commentaire 144, origine 88, statut et date ~96, quatre
   actions en icônes ~160, soit ~800 px : rien ne défile, la place qui reste va surtout au texte. Les textes passent
   à la ligne ; `overflow-wrap: anywhere` coupe aussi un mot sans espace (titre, pseudo, adresse collée). */

/* Cellule « Vidéo » (vue tube-video-comment/video-cell) : miniature et titre côte à côte, l'un sous l'autre quand
   la colonne est étroite. La vue remplace le contenu d'une cellule de Filament : elle pose sa marge intérieure. */
.vm-comment-video {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-950);
}

.dark .vm-comment-video {
    color: #fff;
}

.vm-comment-thumb {
    display: block;
    flex: none;
}

.vm-comment-thumb img {
    display: block;
    width: 4rem;
    height: 2.25rem;
    object-fit: cover;
    border-radius: 0.25rem;
}

.vm-comment-video-text {
    display: block;
    flex: 1 1 7rem;
    min-width: 7rem;
    overflow-wrap: anywhere;
}

.vm-comment-video-text a:hover,
.vm-comment-video-text a:focus-visible {
    text-decoration: underline;
}

.vm-comment-meta {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .vm-comment-meta {
    color: var(--gray-400);
}

/* Pastilles de l'auteur (« Bot », « Membre », e-mail) sous son nom. */
.vm-comment-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.vm-col-comment-author {
    min-width: 7.5rem;
    overflow-wrap: anywhere;
}

.vm-col-comment-text {
    min-width: 9rem;
    overflow-wrap: anywhere;
}

.vm-col-comment-origin {
    min-width: 5.5rem;
}

/* Fiche : texte d'un commentaire en entier, titre de la vidéo, nom de l'auteur (adresse collée, mot très long). */
.vm-comment-wrap {
    overflow-wrap: anywhere;
}

/* Fiche : miniature de la vidéo sur la largeur de sa carte (colonne étroite de 1024 à 1300 px environ), sans
   jamais en déborder ; au plus 20rem sur grand écran. */
.vm-comment-poster {
    display: block;
    max-width: 20rem;
}

.vm-comment-poster img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* ═══ #242 (fin du bloc) ═══ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   #243 — Fiche du tube : pages « Identité » et « Menus » ; « Lien texte » de l'ad server (début du bloc)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Page « Menus » : listes sans nombre (TubeSettingsForm::blocks, `vm-blocks-uncounted`) ───
   Une entrée de menu n'a ni nombre ni taille : deux colonnes, son nom et « Afficher ». */

.vm-blocks-head-uncounted,
.vm-blocks-uncounted .fi-fo-repeater-item {
    grid-template-columns: minmax(0, 1fr) 3.75rem;
}

/* La seconde ligne d'un lien saisi : l'adresse prend la place, le type de lien et « Nouvel onglet »
   restent étroits. Les champs passent à la ligne au lieu de faire défiler la page. */
.vm-block-target > .fi-sc > .fi-grid-col:has(> .fi-sc-component > .vm-link-url) {
    flex: 3 1 16rem;
}

/* ─── AdsServer : aperçu d'un « Lien texte » dans les listes de publicités et de variantes ───
   Le texte souligné, comme le lien que le loader écrit sur le site. */

.vm-ad-link {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ═══ #243 (fin du bloc) ═══ */

/* ═══ #244 — Page « Apparence » : aperçu d'une vignette (début du bloc) ═══
   Forms\Drawings::card dans la vue tube/card-preview (AppearanceForm::cardLook) : une vignette du front en
   petit, avec ce qui est coché. Le dessin prend la largeur de sa colonne, 16rem au plus : rien ne dépasse,
   même à 1280 px menu ouvert. Les badges restent sombres dans les deux thèmes, comme sur une image. */

.vm-card-preview {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
}

.vm-draw.vm-draw-card-svg {
    width: 100%;
    max-width: 16rem;
    height: auto;
}

.vm-card-preview-caption {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.vm-draw-card {
    fill: #fff;
}

.vm-draw-card-edge {
    fill: none;
    stroke: var(--gray-300);
    stroke-width: 1;
}

.vm-draw-card-image {
    fill: var(--gray-200);
}

.vm-draw-card-scene {
    fill: var(--gray-300);
}

.vm-draw-badge {
    fill: rgb(0 0 0 / 0.65);
}

.vm-draw-badge-text {
    fill: #fff;
    font-size: 6.5px;
    font-weight: 600;
}

.vm-draw-card-title {
    fill: var(--gray-400);
}

.vm-draw-card-meta {
    fill: var(--gray-500);
    font-size: 7px;
}

.vm-draw-card-sep {
    fill: var(--gray-400);
}

.dark .vm-card-preview-caption,
.dark .vm-draw-card-meta {
    color: var(--gray-400);
    fill: var(--gray-400);
}

.dark .vm-draw-card {
    fill: var(--gray-900);
}

.dark .vm-draw-card-edge {
    stroke: var(--gray-600);
}

.dark .vm-draw-card-image {
    fill: var(--gray-700);
}

.dark .vm-draw-card-scene,
.dark .vm-draw-card-sep {
    fill: var(--gray-600);
}

.dark .vm-draw-card-title {
    fill: var(--gray-500);
}

/* ═══ #244 (fin du bloc) ═══ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   #247 — Fiche du tube : pages à la carte (accordéons de Contenu et de Barre latérale, pubs des pages)
   (début du bloc)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Le titre d'un accordéon suivi de son résumé (« Accueil · 2 blocs masqués · … ») passe à la ligne au lieu de
   pousser la page sur le côté. */
.vm-page-accordion .fi-section-header-heading {
    overflow-wrap: anywhere;
}

/* La seconde ligne d'un bloc « Pub » : son nom, puis sa clé et sa liaison avec l'ad server, qui prennent la place
   restante ; l'un sous l'autre sur un écran étroit. */
.vm-block-target > .fi-sc > .fi-grid-col:has(> .fi-sc-component > .vm-ad-slot-status) {
    flex: 2 1 16rem;
    align-self: center;
}

/* Une pub placée deux fois sur une même page (deux impressions) : l'avertissement, avant sa liaison. */
.vm-ad-slot-duplicate {
    font-weight: 600;
    color: var(--warning-600);
}

.dark .vm-ad-slot-duplicate {
    color: var(--warning-400);
}

/* Page Barre latérale : le conseil d'une barre personnalisée vide (choisir la position Masquée). */
.vm-empty-sidebar {
    font-weight: 500;
}

/* ═══ #247 (fin du bloc) ═══ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   #252 — Fiche du tube : retours de design (dessins des pubs, pubs des pages numérotées, nombre et
   taille dans la ligne des vidéos, listes compactes) (début du bloc)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Page « Pubs » : les dessins (Forms\AdsMap) ───
   Retour du 2026-10-05 : les dessins prennent toute la largeur de leur colonne, trois par ligne au plus, deux
   quand la colonne est étroite, un sur un téléphone ; un quatrième passe à la ligne. Les colonnes suivent la
   largeur de la colonne du dessin (requête de conteneur), pas celle de l'écran : à côté de la liste sur grand
   écran, au-dessus d'elle en dessous de `2xl`. La barre latérale a un fond léger, pour qu'on voie de quel côté
   elle est ; une page sans barre le dit sous son dessin. */

.vm-ads-map {
    container-type: inline-size;
}

.vm-ads-pages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container (max-width: 36rem) {
    .vm-ads-pages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 22rem) {
    .vm-ads-pages {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vm-ads-side {
    fill: var(--gray-100);
}

.dark .vm-ads-side {
    fill: rgb(255 255 255 / 0.04);
}

.vm-ads-caption-note {
    font-weight: 400;
    color: var(--warning-600);
}

.dark .vm-ads-caption-note {
    color: var(--warning-400);
}

/* ─── Page « Pubs » : les pubs des pages dans la liste des zones (PageAdSlots) ───
   Les éléments du Repeater perdent leur carte : chaque pub est une ligne comme celle d'une zone (pastille, nom,
   choix), au même écart. Où elle est placée s'écrit sous son nom, aligné sur lui. Dans la colonne du nom, le
   bouton « Créer dans l'ad server » et les avertissements passent à la ligne plutôt que de déborder. */

/* Le nom garde au moins 8rem à côté de sa pastille (sinon il passerait seul sous elle) ; ce qui suit (aide, avertissement,
   bouton) reste sur la ligne s'il y a la place, sinon passe dessous, à droite. */
.vm-ads-row .fi-fo-field-label-ctn {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.vm-ads-row .fi-fo-field-label {
    flex: 1 1 8rem;
    min-width: 0;
}

.vm-ads-row .fi-fo-field-label-ctn > .fi-sc:last-child {
    flex-grow: 0;
    margin-inline-start: auto;
}

.vm-ad-slots .fi-fo-repeater-items {
    gap: 0.75rem;
}

.vm-ad-slots .fi-fo-repeater-item {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.vm-ad-slots .fi-fo-repeater-item-content {
    padding: 0;
}

.vm-ads-row-where {
    display: block;
    padding-inline-start: 2.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
    overflow-wrap: anywhere;
}

.dark .vm-ads-row-where {
    color: var(--gray-400);
}

/* ─── Listes de blocs : largeur de lecture (Contenu, Barre latérale, Menus ; TubeSettingsForm::blocks) ───
   Sur un grand écran, une liste prenait toute la largeur : l'interrupteur et les champs partaient loin du nom.
   Chaque liste (sa légende, ses blocs, ses boutons et son aide) est bornée selon ses colonnes : 2 (menus, pages
   sans nombre), 3 (barre latérale), 4 (accueil, page vidéo), et celles des pages dont la ligne des vidéos porte le
   nombre et la taille. Le nom garde environ 20rem ; rien ne défile à 1280 px menu ouvert (la colonne du nom peut
   rétrécir jusqu'à rien, les autres font au plus 25rem). */

.vm-blocks-field {
    max-width: 34rem;
}

.vm-blocks-field-2 {
    max-width: 30rem;
}

.vm-blocks-field-4 {
    max-width: 44rem;
}

.vm-blocks-field-page {
    max-width: 50rem;
}

.vm-blocks-field-page.vm-blocks-field-3 {
    max-width: 40rem;
}

/* Page « Barre latérale » : la ligne « Position » d'un type de page a la largeur de la liste de blocs dessous. */
.vm-page-accordion .vm-override-row {
    max-width: 34rem;
}

/* ─── Page « Contenu » : nombre et taille d'une page dans la ligne de son bloc de vidéos (ContentForm::ROW_SETTINGS) ───
   Une colonne « Nombre » plus large que celle des blocs (« Comme les listes (48) » doit se lire en entier), puis
   « Taille » ; le profil n'a que « Taille », en troisième colonne. Sur un téléphone, le nombre et la taille passent
   chacun sur une ligne sous le nom, et la légende n'annonce que « Bloc » et « Afficher ». */

.vm-blocks-page .fi-grid-col:has(> .fi-sc-component > .vm-block-count) {
    grid-column: 1 / -1;
    padding: 0 0 0.5rem 2.25rem;
}

.vm-blocks-head-page > span:nth-child(3) {
    display: none;
}

@media (min-width: 40rem) {
    .vm-blocks-head-page,
    .vm-blocks-page .fi-fo-repeater-item {
        grid-template-columns: minmax(0, 1fr) 3.75rem 11.5rem 9.75rem;
    }

    .vm-blocks-head-page.vm-blocks-head-uncounted,
    .vm-blocks-page.vm-blocks-uncounted .fi-fo-repeater-item {
        grid-template-columns: minmax(0, 1fr) 3.75rem 9.75rem;
    }

    .vm-blocks-page .fi-grid-col:has(> .fi-sc-component > .vm-block-count) {
        grid-column: 3;
        padding: 0;
    }

    .vm-blocks-page.vm-blocks-uncounted .fi-grid-col:has(> .fi-sc-component > .vm-block-size) {
        grid-column: 3;
    }

    .vm-blocks-head-page > span:nth-child(3) {
        display: inline;
    }
}

/* ═══ #252 (fin du bloc) ═══ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   #255 — AdsServer : format « Cams en direct » (début du bloc)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Listes des publicités et des variantes : la plateforme, le look. */
.vm-ad-cams {
    font-weight: 500;
}

/* ─── Aperçu de la grille (vue publicite/cams-preview, CamsForm::preview) ───
   La grille telle que le loader l'écrit sur les sites : vignettes 4:3 sombres, pastille « LIVE », nom et bouton.
   Elle reste sombre dans les deux thèmes, comme sur le site ; elle prend la largeur de la fenêtre, la grille
   téléphone 22rem au plus : rien ne dépasse, même à 1280 px. */

.vm-cams-preview {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.vm-cams-status {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-600);
}

.dark .vm-cams-status {
    color: var(--gray-300);
}

.vm-cams-error {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--danger-600);
}

.dark .vm-cams-error {
    color: var(--danger-400);
}

.vm-cams-look {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.dark .vm-cams-look {
    border-top-color: var(--gray-700);
}

.vm-cams-look-title {
    font-weight: 600;
}

/* Ordinateur à gauche, téléphone à droite ; l'un sous l'autre sur un écran étroit. */
.vm-cams-devices {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.vm-cams-device {
    flex: 3 1 28rem;
    min-width: 0;
}

.vm-cams-device-phone {
    flex: 1 1 16rem;
    max-width: 22rem;
}

.vm-cams-device-label {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

.vm-cams-grid {
    display: grid;
    grid-template-columns: repeat(var(--vm-cams-cols, 4), minmax(0, 1fr));
    gap: 6px;
}

.vm-cams-cell {
    overflow: hidden;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
}

.vm-cams-media {
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    background: #000;
}

.vm-cams-media img,
.vm-cams-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.vm-cams-media img {
    object-fit: cover;
}

/* L'aperçu ne capte aucun clic, comme sur le site. */
.vm-cams-media iframe {
    pointer-events: none;
}

.vm-cams-live {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 1px 5px;
    border-radius: 3px;
    background: #e11d48;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.vm-cams-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 6px;
    padding: 5px 6px;
}

.vm-cams-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.vm-cams-cta {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e11d48;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ─── « Tester un lien » (vue publicite/cams-test-link, CamsForm::testLink) ─── */

.vm-cams-test {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    min-width: 0;
}

.vm-cams-test-model {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vm-cams-test-thumb {
    width: 8rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.vm-cams-test-name {
    font-weight: 600;
}

/* Le lien final en entier, coupé où il faut plutôt que de pousser la fenêtre sur le côté. */
.vm-cams-link {
    display: block;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.dark .vm-cams-link {
    background: var(--gray-800);
}

/* ═══ #255 (fin du bloc) ═══ */

/* ═══ Mises en ligne : journal d'un passage (tube_provisioning_runs) ═══ */
.vm-prov {
    display: grid;
    gap: 1rem;
}

.vm-prov-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.vm-prov-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
    font-size: 0.875rem;
}

.vm-prov-facts dt {
    color: var(--gray-500);
}

.vm-prov-facts dd {
    margin: 0;
    font-weight: 600;
}

.vm-prov-error {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--danger-50);
    color: var(--danger-700);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.dark .vm-prov-error {
    background: color-mix(in oklab, var(--danger-500) 15%, transparent);
    color: var(--danger-300);
}

.vm-prov-step-off {
    opacity: 0.6;
}

.vm-prov-lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.vm-prov-lines td,
.vm-prov-lines th {
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--gray-200);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.dark .vm-prov-lines td,
.dark .vm-prov-lines th {
    border-top-color: var(--gray-700);
}

.vm-prov-lines tr:first-child td,
.vm-prov-lines tr:first-child th {
    border-top: 0;
}

.vm-prov-state {
    width: 1%;
    white-space: nowrap;
}

.vm-prov-label {
    width: 22%;
    font-weight: 600;
}

.vm-prov-last {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gray-200);
}

.dark .vm-prov-last {
    border-top-color: var(--gray-700);
}

.vm-prov-muted {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.875rem;
}
/* ═══ Mises en ligne (fin du bloc) ═══ */