/*
 * Médiathèque audio / vidéo — conception MOBILE FIRST (règles G et H).
 *
 * Les règles de base visent le petit écran ; les media queries n'ajoutent que le confort du
 * grand écran. La priorité absolue, énoncée au §15 du cahier des charges, est la LISIBILITÉ DES
 * NOMS : le titre d'un fichier peut occuper toute la largeur disponible, le bouton « Action »
 * ne se comprime jamais (flex-shrink:0) et rien ne déborde horizontalement.
 */
/*
 * GARDE [hidden] — à laisser en tête, et à étendre à tout composant qui reçoit un `display`.
 *
 * L'attribut HTML `hidden` ne masque que par la feuille de l'agent utilisateur, `[hidden]{display:none}`,
 * dont la spécificité est nulle. La MOINDRE règle d'auteur posant un `display` sur le même élément
 * la bat : `.ecla-media{display:block}` ré-affichait l'arborescence par-dessus le catalogue, et
 * `.ecla-media-sheet{position:fixed;inset:0;z-index:10001;display:flex}` laissait un calque noir
 * plein écran sur TOUTES les pages, bloquant chaque clic du site. Les sélecteurs ci-dessous
 * portent la classe ET l'attribut : ils l'emportent sur la règle de composant sans `!important`.
 * Même parade que `announcements.css`, pour la même raison.
 */
.ecla-media[hidden],
.ecla-media-filters[hidden],
.ecla-media-count[hidden],
.ecla-media-empty[hidden],
.ecla-media-fav-count[hidden],
.ecla-media-player[hidden],
.ecla-media-video-modal[hidden],
.ecla-media-advice[hidden],
.ecla-media-sheet[hidden] {
    display : none;
}
.ecla-media {
    --media-radius : 10px;
    --media-gap : 8px;
    display : block;
    width : 100%;
    max-width : 100%;
    box-sizing : border-box;
    color : var(--text-color);
}
.ecla-media *,
.ecla-media *::before,
.ecla-media *::after {
    box-sizing : border-box;
}
.ecla-media-toolbar {
    display : flex;
    flex-direction : column;
    gap : var(--media-gap);
    margin-bottom : 10px;
}
.ecla-media-search {
    position : relative;
    display : flex;
    align-items : center;
}
.ecla-media-search-icon {
    position : absolute;
    left : 10px;
    color : #888;
    pointer-events : none;
}
#ecla-media-search {
    width : 100%;
    padding : 9px 12px 9px 32px;
    font-size : 14px;
    border : 1px solid var(--border-color);
    border-radius : var(--media-radius);
    background : var(--card-bg);
    color : var(--text-color);
}
#ecla-media-search:focus {
    outline : 2px solid var(--primary-color);
    outline-offset : 1px;
}
.ecla-media-toolbar-row {
    display : flex;
    flex-wrap : wrap;
    align-items : center;
    justify-content : space-between;
    gap : var(--media-gap);
}
.ecla-media-types {
    display : inline-flex;
    border : 1px solid var(--border-color);
    border-radius : var(--media-radius);
    overflow : hidden;
    background : var(--card-bg);
}
.ecla-media-type {
    padding : 7px 14px;
    font-size : 13px;
    border : 0;
    background : transparent;
    color : var(--text-color);
    cursor : pointer;
    min-height : 38px;
}
.ecla-media-type.is-active {
    background : var(--primary-color-strong, #b35f00);
    color : #fff;
    font-weight : 600;
}
.ecla-media-toolbar-actions {
    display : flex;
    flex-wrap : wrap;
    gap : 6px;
}
.ecla-media-chip {
    display : inline-flex;
    align-items : center;
    gap : 5px;
    min-height : 38px;
    padding : 6px 11px;
    font-size : 13px;
    border : 1px solid var(--border-color);
    border-radius : var(--media-radius);
    background : var(--card-bg);
    color : var(--text-color);
    cursor : pointer;
}
.ecla-media-chip.is-active {
    border-color : var(--primary-color);
    background : var(--primary-color-strong, #b35f00);
    color : #fff;
}
.ecla-media-fav-count {
    display : inline-block;
    min-width : 18px;
    padding : 0 5px;
    font-size : 11px;
    line-height : 18px;
    text-align : center;
    border-radius : 9px;
    background : var(--secondary-color);
    color : #fff;
}
.ecla-media-filters {
    display : flex;
    flex-wrap : nowrap;
    gap : 6px;
    overflow-x : auto;
    -webkit-overflow-scrolling : touch;
    scrollbar-width : thin;
    padding-bottom : 6px;
    margin-bottom : 8px;
}
.ecla-media-filter {
    flex : 0 0 auto;
    padding : 5px 12px;
    font-size : 12.5px;
    white-space : nowrap;
    border : 1px solid var(--border-color);
    border-radius : 999px;
    background : var(--card-bg);
    color : var(--text-color);
    cursor : pointer;
    min-height : 32px;
}
.ecla-media-filter.is-active {
    border-color : var(--primary-color);
    background : var(--primary-color-strong, #b35f00);
    color : #fff;
    font-weight : 600;
}
.ecla-media-count {
    margin : 0 0 8px;
    font-size : 12.5px;
    color : #777;
}
.ecla-media-empty {
    margin : 24px 0;
    padding : 18px;
    text-align : center;
    font-size : 14px;
    color : #777;
    background : var(--card-bg);
    border : 1px dashed var(--border-color);
    border-radius : var(--media-radius);
}
.ecla-media-owner {
    margin-bottom : 12px;
    background : var(--card-bg);
    border : 1px solid var(--border-color);
    border-radius : var(--media-radius);
    overflow : hidden;
}
.ecla-media-owner-head {
    display : flex;
    align-items : center;
    gap : 8px;
    padding : 10px 12px;
    background : linear-gradient( to right, rgba(0,0,0,.03), transparent );
}
.ecla-media-owner-name {
    flex : 1 1 auto;
    min-width : 0;
    margin : 0;
    font-size : 15px;
    font-weight : 700;
    line-height : 1.3;
    overflow-wrap : anywhere;
}
.ecla-media-owner-count {
    flex : 0 0 auto;
    min-width : 22px;
    padding : 1px 7px;
    font-size : 11.5px;
    text-align : center;
    border-radius : 999px;
    background : var(--secondary-color);
    color : #fff;
}
.ecla-media-toggle {
    flex : 0 0 auto;
    display : inline-flex;
    align-items : center;
    justify-content : center;
    width : 30px;
    height : 30px;
    padding : 0;
    border : 0;
    border-radius : 50%;
    background : transparent;
    color : var(--text-color);
    cursor : pointer;
    transition : transform .18s ease;
    transform : rotate( 90deg );
}
.ecla-media-owner.is-collapsed > .ecla-media-owner-head .ecla-media-toggle,
.ecla-media-album.is-collapsed > .ecla-media-album-head .ecla-media-toggle {
    transform : rotate( 0deg );
}
.ecla-media-owner.is-collapsed > .ecla-media-owner-body,
.ecla-media-album.is-collapsed > .ecla-media-album-body {
    display : none;
}
.ecla-media-owner-body {
    padding : 0 8px 8px;
}
.ecla-media-album {
    margin-top : 8px;
    border : 1px solid var(--border-color);
    border-radius : 8px;
    background : var(--bg-color);
    overflow : hidden;
}
.ecla-media-album.is-archived {
    border-style : dashed;
    opacity : .92;
}
.ecla-media-album-head {
    display : flex;
    align-items : flex-start;
    gap : 6px;
    padding : 8px 9px;
}
.ecla-media-album-titlewrap {
    flex : 1 1 auto;
    min-width : 0;
}
.ecla-media-album-title {
    margin : 0;
    font-size : 14px;
    font-weight : 600;
    line-height : 1.3;
    overflow-wrap : anywhere;
}
.ecla-media-album-meta {
    display : flex;
    flex-wrap : wrap;
    align-items : center;
    gap : 6px;
    margin-top : 3px;
    font-size : 11.5px;
    color : #777;
}
.ecla-media-flag,
.ecla-media-item-flag {
    display : inline-block;
    padding : 1px 7px;
    font-size : 10.5px;
    font-weight : 600;
    letter-spacing : .02em;
    border-radius : 999px;
    background : #8a6d3b;
    color : #fff;
}
.ecla-media-item-flag {
    margin-top : 3px;
}
.ecla-media-action-btn {
    flex : 0 0 auto;
    display : inline-flex;
    align-items : center;
    gap : 4px;
    min-height : 34px;
    padding : 5px 10px;
    font-size : 12.5px;
    font-weight : 600;
    white-space : nowrap;
    border : 1px solid var(--primary-color);
    border-radius : 8px;
    background : var(--primary-color-strong, #b35f00);
    color : #fff;
    cursor : pointer;
}
.ecla-media-action-btn:active {
    transform : translateY( 1px );
}
.ecla-media-album-body {
    padding : 0 9px 9px;
}
.ecla-media-description {
    margin : 0 0 8px;
    padding : 8px 10px;
    font-size : 12.5px;
    line-height : 1.5;
    background : var(--card-bg);
    border-left : 3px solid var(--primary-color);
    border-radius : 0 6px 6px 0;
}
.ecla-media-description-label {
    display : block;
    margin-bottom : 3px;
    font-weight : 700;
    font-size : 11.5px;
    text-transform : uppercase;
    letter-spacing : .04em;
    color : #777;
}
.ecla-media-description-text {
    margin : 0;
    overflow-wrap : anywhere;
    display : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow : hidden;
}
.ecla-media-description.is-expanded .ecla-media-description-text,
.ecla-media-description.is-short .ecla-media-description-text {
    display : block;
    overflow : visible;
}
.ecla-media-description-more {
    margin-top : 4px;
    padding : 0;
    font-size : 12px;
    font-weight : 600;
    border : 0;
    background : none;
    color : var(--primary-color);
    cursor : pointer;
    text-decoration : underline;
}
.ecla-media-items {
    margin : 0;
    padding : 0;
    list-style : none;
}
.ecla-media-item {
    padding : 7px 0;
    border-top : 1px solid var(--border-color);
}
.ecla-media-item:first-child {
    border-top : 0;
}
.ecla-media-item.is-archived .ecla-media-item-title {
    color : #8a6d3b;
}
.ecla-media-item-row {
    display : flex;
    align-items : center;
    gap : 6px;
    min-width : 0;
}
.ecla-media-item-kind {
    flex : 0 0 auto;
    display : inline-flex;
    color : var(--secondary-color);
}
.ecla-media-item-title {
    flex : 1 1 auto;
    min-width : 0;
    font-size : 13.5px;
    line-height : 1.35;
    overflow-wrap : anywhere;
}
.ecla-media-item-lang {
    flex : 0 0 auto;
    padding : 1px 5px;
    font-size : 10px;
    font-weight : 700;
    border : 1px solid var(--border-color);
    border-radius : 4px;
    color : #777;
}
.ecla-media-item-fav {
    flex : 0 0 auto;
    display : inline-flex;
    color : #d64550;
}
.ecla-media-counters {
    display : flex;
    flex-wrap : wrap;
    gap : 10px;
    margin-top : 3px;
    padding-left : 22px;
    font-size : 11.5px;
    color : #777;
}
.ecla-media-counter {
    display : inline-flex;
    align-items : center;
    gap : 3px;
}
.ecla-media-counter strong {
    font-weight : 700;
    color : var(--text-color);
}
.ecla-media-counter-label {
    color : #999;
}
.ecla-media-player {
    position : fixed;
    left : 0;
    right : 0;
    bottom : 0;
    z-index : 9998;
    padding : 8px 10px calc( 8px + env( safe-area-inset-bottom, 0px ) );
    background : var(--card-bg);
    border-top : 1px solid var(--border-color);
    box-shadow : 0 -3px 12px rgba(0,0,0,.14);
}
.ecla-media-player-inner {
    display : flex;
    flex-direction : column;
    gap : 6px;
    max-width : 1200px;
    margin : 0 auto;
    position : relative;
    padding-right : 30px;
}
.ecla-media-player-meta {
    display : flex;
    flex-direction : column;
    min-width : 0;
}
.ecla-media-player-title {
    font-size : 13px;
    font-weight : 700;
    overflow-wrap : anywhere;
}
.ecla-media-player-sub {
    font-size : 11.5px;
    color : #777;
    overflow-wrap : anywhere;
}
/*
 * §51 — L'ÉLÉMENT AUDIO N'EST PLUS AFFICHÉ. Il n'a plus l'attribut `controls` : le navigateur ne
 * dessine donc plus rien, et lui laisser une hauteur réserverait une bande vide sous la barre de
 * commandes. `display:none` sur un média EN COURS DE LECTURE ne l'arrête pas — le son continue,
 * seule la boîte disparaît.
 */
.ecla-media-audio {
    display : none;
}
.ecla-media-controls {
    display : flex;
    align-items : center;
    gap : 8px;
    width : 100%;
    min-width : 0;
}
.ecla-media-ctl {
    display : inline-flex;
    align-items : center;
    justify-content : center;
    flex : 0 0 auto;
    width : 32px;
    height : 32px;
    padding : 0;
    border : 0;
    border-radius : 50%;
    background : transparent;
    color : var(--text-color);
    cursor : pointer;
}
.ecla-media-ctl:hover {
    background : rgba(0,0,0,.07);
}
.ecla-media-ctl--play {
    background : var(--primary-color-strong, #b35f00);
    color : #fff;
}
.ecla-media-ctl--ask {
    color : #1faa53;
}
.ecla-media-ctl-time {
    flex : 0 0 auto;
    font-size : 11.5px;
    font-variant-numeric : tabular-nums;
    color : #777;
}
.ecla-media-ctl-seek {
    flex : 1 1 auto;
    min-width : 60px;
    height : 18px;
    accent-color : var(--primary-color, #a4600a);
    cursor : pointer;
}
.ecla-media-ctl-seek:disabled {
    cursor : default;
    opacity : .5;
}
/* Le volume ne sert à rien sur téléphone — iOS ignore `volume`, Android a ses touches. */
.ecla-media-ctl-volume {
    display : none;
    flex : 0 0 80px;
    height : 18px;
    accent-color : var(--primary-color, #a4600a);
    cursor : pointer;
}
.ecla-media-controls--video {
    margin-top : 6px;
    padding : 6px 8px;
    border-radius : 8px;
    background : rgba(0,0,0,.55);
}
.ecla-media-controls--video .ecla-media-ctl {
    color : #fff;
}
.ecla-media-controls--video .ecla-media-ctl:hover {
    background : rgba(255,255,255,.16);
}
.ecla-media-controls--video .ecla-media-ctl-time {
    color : #ddd;
}
.ecla-media-player-close {
    position : absolute;
    top : 0;
    right : 0;
    width : 28px;
    height : 28px;
    font-size : 20px;
    line-height : 1;
    border : 0;
    border-radius : 50%;
    background : transparent;
    color : var(--text-color);
    cursor : pointer;
}
.ecla-media-video-modal {
    position : fixed;
    inset : 0;
    z-index : 10000;
    display : flex;
    align-items : center;
    justify-content : center;
    padding : 12px;
    background : rgba(0,0,0,.86);
}
.ecla-media-video-content {
    position : relative;
    width : 100%;
    max-width : 900px;
}
.ecla-media-video-title {
    margin : 0 0 6px;
    padding-right : 38px;
    font-size : 14px;
    color : #fff;
    overflow-wrap : anywhere;
}
.ecla-media-video {
    width : 100%;
    max-height : 72vh;
    background : #000;
    border-radius : 8px;
}
/*
 * Le plein écran cadre le CONTENEUR, pas l'élément `<video>` : c'est ce qui garde la barre de
 * commandes du §51 visible une fois en plein écran. Sans ces deux règles, le conteneur y garderait
 * sa largeur maximale de 900px, centrée sur un fond noir plein écran.
 */
.ecla-media-video-content:fullscreen {
    display : flex;
    flex-direction : column;
    justify-content : center;
    width : 100%;
    max-width : none;
    height : 100%;
    padding : 12px;
    background : #000;
}
.ecla-media-video-content:fullscreen .ecla-media-video {
    max-height : calc( 100vh - 110px );
}
.ecla-media-video-content:-webkit-full-screen {
    display : flex;
    flex-direction : column;
    justify-content : center;
    width : 100%;
    max-width : none;
    height : 100%;
    padding : 12px;
    background : #000;
}
.ecla-media-video-close {
    position : absolute;
    top : -4px;
    right : 0;
    width : 34px;
    height : 34px;
    font-size : 24px;
    line-height : 1;
    border : 0;
    border-radius : 50%;
    background : rgba(255,255,255,.16);
    color : #fff;
    cursor : pointer;
}
.ecla-media-sheet {
    position : fixed;
    inset : 0;
    z-index : 10001;
    display : flex;
    align-items : flex-end;
    justify-content : center;
    background : rgba(0,0,0,.5);
}
.ecla-media-sheet-panel {
    width : 100%;
    max-width : 520px;
    max-height : 82vh;
    overflow-y : auto;
    padding : 14px 14px calc( 14px + env( safe-area-inset-bottom, 0px ) );
    background : var(--card-bg);
    border-radius : 16px 16px 0 0;
    box-shadow : 0 -4px 20px rgba(0,0,0,.28);
}
.ecla-media-sheet-header {
    display : flex;
    align-items : flex-start;
    gap : 8px;
}
.ecla-media-sheet-title {
    flex : 1 1 auto;
    min-width : 0;
    margin : 0;
    font-size : 15px;
    font-weight : 700;
    overflow-wrap : anywhere;
}
.ecla-media-sheet-close {
    flex : 0 0 auto;
    width : 30px;
    height : 30px;
    font-size : 22px;
    line-height : 1;
    border : 0;
    background : transparent;
    color : var(--text-color);
    cursor : pointer;
}
.ecla-media-sheet-sub {
    margin : 2px 0 10px;
    font-size : 12px;
    color : #777;
    overflow-wrap : anywhere;
}
.ecla-media-sheet-actions {
    display : flex;
    flex-direction : column;
    gap : 6px;
}
.ecla-media-sheet-action {
    display : flex;
    align-items : center;
    gap : 10px;
    width : 100%;
    min-height : 46px;
    padding : 9px 12px;
    text-align : left;
    font-size : 14px;
    border : 1px solid var(--border-color);
    border-radius : 10px;
    background : var(--bg-color);
    color : var(--text-color);
    cursor : pointer;
}
.ecla-media-sheet-action.is-disabled {
    opacity : .45;
    cursor : not-allowed;
    filter : grayscale( 1 );
}
.ecla-media-sheet-action-text {
    display : flex;
    flex-direction : column;
    min-width : 0;
}
.ecla-media-sheet-action-label {
    font-weight : 600;
    overflow-wrap : anywhere;
}
.ecla-media-sheet-action-hint {
    font-size : 11.5px;
    color : #888;
    overflow-wrap : anywhere;
}
body.ecla-media-sheet-open,
body.ecla-media-video-open {
    overflow : hidden;
}
.ecla-sidebar.ecla-hidden-by-media {
    display : none !important;
}
/*
 * LA COLONNE RENDUE AU CONTENU — le défaut d'affichage de l'onglet « Médias » sur ordinateur.
 *
 * `.ecla-main-content` est une grille à deux pistes : `280px 1fr` au-delà de 992px, `240px 1fr`
 * entre 769 et 992px. La règle ci-dessus retire la barre latérale, mais `display:none` la retire
 * aussi de la GRILLE : `<main>`, devenu seul enfant, était alors placé dans la PREMIÈRE piste —
 * celle de 280px. Toute la médiathèque tenait donc dans une colonne de 280 pixels, avec plus de
 * mille pixels vides à sa droite, tandis que le téléphone, lui, restait correct : sous 768px
 * `.ecla-main-content` passe en `display:block` et il n'y a plus de piste où tomber.
 *
 * La classe est posée par media.js au moment exact où la barre latérale disparaît, et retirée à
 * son retour. Elle ne touche QUE la définition des pistes : gouttière, fond et rembourrage du
 * conteneur restent ceux du catalogue, pour que le passage d'un onglet à l'autre ne déplace rien
 * d'autre.
 */
.ecla-main-content.ecla-main-content--media {
    grid-template-columns : 1fr;
}
.ecla-medias-page {
    max-width : 1000px;
    margin : 0 auto;
    padding : 14px;
    box-sizing : border-box;
}
.ecla-medias-page-header {
    margin-bottom : 12px;
}
.ecla-medias-back {
    display : inline-block;
    margin-bottom : 6px;
    font-size : 13px;
    font-weight : 600;
    text-decoration : none;
    color : var(--primary-color, #e07800);
}
.ecla-medias-title {
    margin : 0;
    font-size : 20px;
    line-height : 1.25;
}
.ecla-medias-intro {
    margin : 4px 0 0;
    font-size : 13px;
    color : #777;
}
@media ( min-width : 600px ) {
    .ecla-media-toolbar {
        flex-direction : row;
        align-items : center;
    }
    .ecla-media-search {
        flex : 1 1 260px;
    }
    .ecla-media-toolbar-row {
        flex : 0 0 auto;
        justify-content : flex-end;
    }
    .ecla-media-owner-name {
        font-size : 16px;
    }
    .ecla-media-item-title {
        font-size : 14px;
    }
    .ecla-media-player-inner {
        flex-direction : row;
        align-items : center;
        gap : 12px;
    }
    .ecla-media-player-meta {
        flex : 0 0 240px;
    }
    .ecla-media-controls {
        flex : 1 1 auto;
    }
    .ecla-media-ctl-volume {
        display : inline-block;
    }
    .ecla-media-player-close {
        position : static;
    }
    .ecla-media-sheet {
        align-items : center;
    }
    .ecla-media-sheet-panel {
        border-radius : 14px;
        padding-bottom : 14px;
    }
    .ecla-medias-title {
        font-size : 24px;
    }
}
@media ( min-width : 992px ) {
    .ecla-media-owner-body {
        padding : 0 12px 12px;
    }
    .ecla-media-album-head,
    .ecla-media-album-body {
        padding-left : 12px;
        padding-right : 12px;
    }
    /*
     * LARGEUR DE LECTURE. Une fois la colonne rendue au contenu (voir
     * `.ecla-main-content--media`), l'onglet occupe toute la largeur du navigateur — près de
     * 1900 pixels sur un grand écran. Un champ de recherche et un titre de piste étirés sur
     * cette largeur ne sont pas « adaptés » non plus : le bouton « Action » se retrouve à une
     * largeur d'écran du titre auquel il appartient.
     *
     * La borne ne vise QUE le contexte marketplace : la page autonome /medias/ a déjà la
     * sienne, posée par `.ecla-medias-page`, et la toucher déplacerait un écran qui n'est pas
     * en cause.
     */
    .ecla-media[data-context="marketplace"] {
        max-width : 1400px;
        margin-left : auto;
        margin-right : auto;
    }
}
/*
 * LISTE DES PISTES SUR DEUX COLONNES.
 *
 * L'arborescence est une pile de lignes : sur téléphone c'est la seule forme possible, sur
 * ordinateur elle laissait la moitié de la largeur vide tout en doublant le défilement. Le
 * multi-colonnes convient ici mieux qu'une grille — les pistes d'un album n'ont pas toutes la
 * même hauteur (compteurs, mention « Archivé »), et une grille laisserait des trous entre les
 * rangées là où les colonnes coulent naturellement.
 *
 * `break-inside : avoid` est indispensable : sans lui, une piste se couperait en deux au bas
 * d'une colonne, séparant son titre de son bouton « Action ». Le préfixe WebKit couvre les
 * versions de Safari qui ne connaissent que lui.
 *
 * Le seuil est à 1100px et non à 992px : en dessous, deux colonnes ramèneraient chaque ligne
 * sous 480px, où le titre d'une piste et son bouton commencent à se disputer la place.
 */
@media ( min-width : 1100px ) {
    .ecla-media-items {
        columns : 2;
        column-gap : 24px;
    }
    .ecla-media-item {
        break-inside : avoid;
        -webkit-column-break-inside : avoid;
    }
}
@media ( prefers-reduced-motion : reduce ) {
    .ecla-media-toggle {
        transition : none;
    }
}
/*
 * CONSEIL D'ÉCOUTE — la modale qui a remplacé le compteur et le mur du quota d'écoute.
 *
 * Mobile first (règles G et H) : les règles de base visent le petit écran, où la modale occupe le
 * bas de l'écran comme la feuille du menu « Action » — le pouce y arrive sans traverser la page.
 * La media query ne fait que la recentrer sur grand écran.
 *
 * Sa règle `[hidden]` est déclarée EN TÊTE DE FICHIER avec les autres, et non ici : `display:flex`
 * ci-dessous bat `[hidden]{display:none}` de la feuille de l'agent utilisateur, dont la
 * spécificité est nulle. Sans elle, un voile noir plein écran resterait posé sur toutes les pages
 * du site et bloquerait chaque clic — le défaut exact décrit en tête de ce fichier.
 */
.ecla-media-advice {
    position : fixed;
    inset : 0;
    z-index : 10002;
    display : flex;
    align-items : flex-end;
    justify-content : center;
    background : rgba(0,0,0,.55);
}
.ecla-media-advice-panel {
    width : 100%;
    max-width : 540px;
    max-height : 88vh;
    overflow-y : auto;
    padding : 14px 14px calc( 14px + env( safe-area-inset-bottom, 0px ) );
    background : var(--card-bg, #fff);
    color : var(--text-color, #222);
    border-radius : 16px 16px 0 0;
    box-shadow : 0 -4px 22px rgba(0,0,0,.32);
}
.ecla-media-advice-header {
    display : flex;
    align-items : flex-start;
    gap : 8px;
}
.ecla-media-advice-title {
    flex : 1 1 auto;
    min-width : 0;
    margin : 0;
    font-size : 16px;
    font-weight : 700;
    overflow-wrap : anywhere;
}
.ecla-media-advice-close {
    flex : 0 0 auto;
    width : 34px;
    height : 34px;
    font-size : 24px;
    line-height : 1;
    border : 0;
    background : transparent;
    color : var(--text-color, #222);
    cursor : pointer;
}
/*
 * Le nombre de personnes est la première chose lue, et la seule mise en avant : c'est lui qui
 * fait comprendre, avant toute explication, que le serveur est sollicité par beaucoup de monde.
 */
.ecla-media-advice-crowd {
    margin : 6px 0 8px;
    padding : 8px 10px;
    border-left : 3px solid var(--primary-color, #f97316);
    border-radius : 8px;
    background : var(--bg-color, #faf7f2);
    font-size : 14px;
    font-weight : 700;
    line-height : 1.4;
    overflow-wrap : anywhere;
}
.ecla-media-advice-track {
    margin : 0 0 10px;
    font-size : 12px;
    color : #777;
    overflow-wrap : anywhere;
}
.ecla-media-advice-points {
    margin : 0 0 10px;
    padding : 0 0 0 18px;
    font-size : 13px;
    line-height : 1.5;
}
.ecla-media-advice-point {
    margin : 0 0 6px;
    overflow-wrap : anywhere;
}
.ecla-media-advice-best {
    margin : 0 0 12px;
    padding : 9px 11px;
    border-radius : 10px;
    background : #ecfdf5;
    color : #065f46;
    font-size : 13px;
    line-height : 1.5;
    overflow-wrap : anywhere;
}
.ecla-media-advice-actions {
    display : flex;
    flex-direction : column;
    gap : 6px;
}
body.ecla-media-advice-open {
    overflow : hidden;
}
@media ( min-width : 768px ) {
    .ecla-media-advice {
        align-items : center;
    }
    .ecla-media-advice-panel {
        border-radius : 14px;
        padding-bottom : 14px;
    }
    .ecla-media-advice-title {
        font-size : 17px;
    }
    .ecla-media-advice-crowd {
        font-size : 15px;
    }
    .ecla-media-advice-points,
    .ecla-media-advice-best {
        font-size : 13.5px;
    }
}

/* -----------------------------------------------------------------------------------------
   T-B-1 — Bandeau « Mes favoris », en tête de la médiathèque.
   Le bandeau défile horizontalement plutôt que de se replier sur plusieurs lignes : sur un
   téléphone, une liste de favoris qui grandit repousserait l'arborescence hors de l'écran, et
   c'est elle que la page est venue montrer. La bande garde donc une hauteur constante quel que
   soit le nombre de favoris.
   ----------------------------------------------------------------------------------------- */
.ecla-media-fav-band {
    margin : 0 0 12px;
    padding : 10px 12px;
    border : 1px solid var(--border-color);
    border-left : 3px solid var(--primary-color, #f97316);
    border-radius : 10px;
    background : var(--card-bg, #fff);
}
.ecla-media-fav-band-head {
    display : flex;
    align-items : center;
    gap : 8px;
    margin-bottom : 8px;
}
.ecla-media-fav-band-title {
    font-size : 13.5px;
    font-weight : 700;
    color : var(--text-color);
}
.ecla-media-fav-band-count {
    display : inline-flex;
    align-items : center;
    justify-content : center;
    min-width : 20px;
    height : 20px;
    padding : 0 6px;
    border-radius : 10px;
    background : var(--primary-color-strong, #b35f00);
    color : #fff;
    font-size : 11.5px;
    font-weight : 700;
}
.ecla-media-fav-band-strip {
    display : flex;
    gap : 8px;
    overflow-x : auto;
    padding-bottom : 4px;
    scrollbar-width : thin;
    -webkit-overflow-scrolling : touch;
}
.ecla-media-fav-chip {
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    gap : 2px;
    flex : 0 0 auto;
    max-width : 190px;
    padding : 7px 11px;
    border : 1px solid var(--border-color);
    border-radius : var(--media-radius);
    background : var(--body-bg, #fafafa);
    color : var(--text-color);
    cursor : pointer;
    text-align : left;
}
.ecla-media-fav-chip:hover,
.ecla-media-fav-chip:focus-visible {
    border-color : var(--primary-color);
}
.ecla-media-fav-chip-label {
    font-size : 13px;
    font-weight : 600;
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
    max-width : 100%;
}
.ecla-media-fav-chip-sub {
    font-size : 11.5px;
    opacity : .7;
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
    max-width : 100%;
}
/* Repère visuel après un saut depuis le bandeau : sans lui, la cible atteinte au milieu d'une
   longue liste ne se distingue de ses voisines par rien du tout. */
.ecla-media-item.is-flash,
.ecla-media-album.is-flash {
    animation : ecla-media-flash 1.6s ease-out 1;
}
@keyframes ecla-media-flash {
    0%   { background : var(--primary-color-soft, #fff3e6); }
    100% { background : transparent; }
}
@media ( prefers-reduced-motion : reduce ) {
    .ecla-media-item.is-flash,
    .ecla-media-album.is-flash {
        animation : none;
        outline : 2px solid var(--primary-color, #f97316);
    }
}

@media ( max-width : 600px ) {
    .ecla-media-fav-chip {
        max-width : 160px;
    }
}