/* =========================================================
   BEN'S LINE DANCE
   BIBLIOTHÈQUE
   THÈME VERT SAUGE / CRÈME / BOIS USÉ

   VERSION NETTOYÉE
   ---------------------------------------------------------
   • Desktop
   • Tablette
   • Mobile
   • Très petits écrans
   • Modal moderne
   • Badges de collections
   • Rubans
   • Favoris + J'aime
   • Feuille de pas PDF
   • Aucun changement volontaire du design
========================================================= */


/* =========================================================
   CONTENEUR PRINCIPAL
========================================================= */

.library {

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 35px 25px 80px;

    box-sizing: border-box;
}


/* =========================================================
   INTRODUCTION — EN-TÊTE BIBLIOTHÈQUE
========================================================= */

.library-intro {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    width: 100%;

    margin: 0 0 20px;

    padding: 28px 30px;

    background:
        linear-gradient(
            135deg,
            #4f624b 0%,
            #66785f 45%,
            #80694f 100%
        );

    color: #fffaf0;

    border: 0;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    box-sizing: border-box;
}


.library-intro-text {

    min-width: 0;
}


.library-intro .eyebrow {

    display: inline-block;

    margin-bottom: 6px;

    color: #e8dcc4;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.library-intro h1 {

    margin: 0;

    color: #fffaf0;

    font-size: 30px;

    font-weight: 800;

    letter-spacing: -.02em;
}


.library-intro p {

    margin: 6px 0 0;

    color: rgba(255, 250, 240, .85);

    font-size: 14px;

    line-height: 1.5;
}

/* =========================================================
   BOUTON AJOUTER
========================================================= */

.btn-add {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 11px 18px;

    border-radius: 999px;

    background: var(--red);

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 750;

    white-space: nowrap;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.btn-add:hover {

    background: var(--red-dark);

    transform: translateY(-2px);

    box-shadow: var(--shadow);
}


/* =========================================================
   BARRE DE RECHERCHE
========================================================= */

.library-toolbar {

    margin-bottom: 25px;

    padding: 20px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 20px;

    box-shadow: var(--shadow);
}


.library-search {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px
        170px;

    gap: 12px;

    align-items: center;
}


.library-search input,
.library-search select {

    width: 100%;

    height: 50px;

    box-sizing: border-box;

    padding: 0 17px;

    border: 1px solid var(--border);

    background: var(--background);

    color: var(--text);

    font-size: 15px;
}


.library-search input {

    border-radius: 50px;
}


.library-search select {

    border-radius: 14px;

    cursor: pointer;
}


.library-search input::placeholder {

    color: var(--muted);
}


.library-search input:focus,
.library-search select:focus {

    outline: none;

    border-color: var(--red);

    box-shadow:
        0 0 0 3px rgba(102,122,98,.15);
}


/* =========================================================
   BOUTON RECHERCHE
========================================================= */

.btn-search {

    background: #4B3F35;

    border: 1px solid #6b4f3a;

    color: #fff;

    padding: 12px 24px;

    border-radius: 10px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.btn-search:hover {

    background: #543c2d;

    border-color: #543c2d;

    transform: translateY(-2px);

    box-shadow: var(--shadow);
}


/* =========================================================
   EXPLORER AUTREMENT
========================================================= */

.explorer-autrement {

    text-align: center;

    margin-bottom: 22px;
}


.explorer-autrement h3 {

    text-align: center;

    margin-left: auto;

    margin-right: auto;
}


/* =========================================================
   BOUTONS DE COLLECTION
========================================================= */

.collection-buttons {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
}


.collection-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 10px 18px;

    border: 1px solid #CFC4B8;

    border-radius: 10px;

    background: #F3EEE8;

    color: #4B3F35;

    font-size: .9rem;

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 2px 5px rgba(75, 63, 53, .08);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.collection-btn:hover {

    background: #D8CABC;

    border-color: #B9A999;

    color: #4B3F35;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(75, 63, 53, .12);
}


.collection-btn.active {

    background: #4B3F35;

    border-color: #4B3F35;

    color: #FFFFFF;

    box-shadow:
        0 4px 10px rgba(75, 63, 53, .20);
}


/* =========================================================
   GRILLE PRINCIPALE
========================================================= */

.library-grid {

    width: 100%;

    max-width: 100%;

    margin: 0 auto;

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


/* =========================================================
   GRILLE DESKTOP
========================================================= */

.grid-header,
.grid-row {

    display: grid;

    grid-template-columns:
        minmax(180px, 1.5fr)
        minmax(110px, .8fr)
        70px
        minmax(150px, 1fr)
        minmax(140px, 1fr)
        minmax(150px, 1fr)
        minmax(120px, .9fr)
        85px
        75px;

    align-items: center;

    column-gap: 12px;
}


/* =========================================================
   HEADER DU TABLEAU
========================================================= */

.grid-header {

    padding: 13px 15px;

    background:
        linear-gradient(
            135deg,
            var(--red-dark),
            var(--red)
        );

    color: white;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .45px;
}


/* =========================================================
   ITEM
========================================================= */

.dance-item {

    width: 100%;
}


/* =========================================================
   LIGNE DESKTOP
========================================================= */

.grid-row {

    position: relative;

    width: 100%;

    min-height: 62px;

    padding: 10px 15px;

    box-sizing: border-box;

    background: var(--white);

    border-top: 1px solid var(--border);

    color: var(--text);

    font-size: 14px;

    cursor: pointer;

    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.grid-row:hover {

    background: var(--red-light);
}


.grid-row:focus-visible {

    outline: 3px solid rgba(102,122,98,.35);

    outline-offset: -3px;
}


/* =========================================================
   CELLULES DESKTOP
========================================================= */

.grid-header > div,
.grid-row > div {

    min-width: 0;

    box-sizing: border-box;
}


.grid-row > div {

    display: flex;

    align-items: center;
}


/* =========================================================
   NOM DE LA DANSE
========================================================= */

.dance-name {

    width: 100%;

    min-width: 0;

    padding-left: 0;

    padding-right: 12px;

    color: var(--dark);

    font-weight: 800;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   NIVEAU
========================================================= */

.dance-level {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    text-align: center;
}


/* =========================================================
   BADGES DE NIVEAU
========================================================= */

.niveau-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: max-content;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .4px;

    white-space: nowrap;
}


.badge-debutant {

    background: #eaf5ea;

    color: #388e3c;

    border: 1px solid #c9e2c9;
}


.badge-novice {

    background: #fff6dd;

    color: #a87800;

    border: 1px solid #ead59b;
}


.badge-intermediaire {

    background: #fff0e6;

    color: #c9651b;

    border: 1px solid #ebc5a7;
}


.badge-avance {

    background: #8b4b45;

    color: white;

    border: 1px solid #6d3732;
}


.badge-partenaire {

    background: #eee9f7;

    color: #6d4ca5;

    border: 1px solid #d4c9e9;
}


/* =========================================================
   CHORÉGRAPHE / ARTISTE / MUSIQUE
========================================================= */

.dance-choregraphe,
.dance-artist,
.dance-music {

    min-width: 0;

    padding-right: 8px;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.dance-choregraphe {

    justify-content: flex-start;

    padding-left: 0;
}


.dance-artist {

    justify-content: flex-start;
}


.dance-music {

    justify-content: flex-start;
}


/* =========================================================
   COMPTEURS
========================================================= */

.dance-counts {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    font-weight: 700;

    text-align: center;
}


.dance-walls {

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   BADGE DE COLLECTION
========================================================= */

.dance-collection-badge {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    overflow: visible;

}


.collection-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    max-width: 120px;

    padding: 5px 10px;

    box-sizing: border-box;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    box-shadow:
        0 2px 6px rgba(0,0,0,.12);
}


/* =========================================================
   COULEURS DES BADGES DE COLLECTION
========================================================= */

.collection-badge.ribbon-new {

    background:
        linear-gradient(
            135deg,
            #2f8f5b,
            #52b879
        );

    color: #fff;
}


.collection-badge.ribbon-top50 {

    background:
        linear-gradient(
            135deg,
            #d89b21,
            #f1c75b
        );

    color: #fff;
}


.collection-badge.ribbon-top100 {

    background:
        linear-gradient(
            135deg,
            #a53a3a,
            #d45b5b
        );

    color: #fff;
}


.collection-badge.ribbon-populaire {

    background:
        linear-gradient(
            135deg,
            #d65a32,
            #ef865b
        );

    color: #fff;
}


.collection-badge.ribbon-classique {

    background:
        linear-gradient(
            135deg,
            #756b61,
            #a59a8d
        );

    color: #fff;
}


.collection-badge.ribbon-retro {

    background:
        linear-gradient(
            135deg,
            #75605c,
            #a88c83
        );

    color: #fff;
}


.collection-badge.ribbon-default {

    background: #777;

    color: #fff;
}


/* =========================================================
   FAVORIS + J'AIME
========================================================= */

.dance-favorites,
.dance-likes {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-width: 0;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}


.dance-favorites i,
.dance-likes i {

    font-size: 14px;

    line-height: 1;
}


.dance-favorites span,
.dance-likes span {

    min-width: 18px;

    text-align: center;
}


/* =========================================================
   RUBANS DANS LES CARTES
========================================================= */

.corner-ribbon {

    position: absolute;

    top: 15px;

    left: -43px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 145px;

    height: 28px;

    padding: 0 5px;

    box-sizing: border-box;

    overflow: hidden;

    transform: rotate(-45deg);

    color: white;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.ribbon-new {

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );
}


.ribbon-populaire {

    background: #b84a3d;
}


.ribbon-classique {

    background: var(--dark-soft);
}


.ribbon-retro {

    background: #54718a;
}


.ribbon-top50 {

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #9b773f
        );
}


.ribbon-top100 {

    background: #4779aa;
}


.ribbon-favorite {

    background: #b85a78;
}


.ribbon-default {

    background: var(--red);
}


/* =========================================================
   BADGES SUPPLÉMENTAIRES DES DANSES
========================================================= */

.dance-badges {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 7px;
}


.dance-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 28px;

    min-width: 90px;

    padding: 7px 12px;

    box-sizing: border-box;

    border-radius: 999px;

    font-size: .78rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .25px;

    text-transform: uppercase;

    white-space: nowrap;

    border: 1px solid rgba(0,0,0,.08);

    box-shadow:
        0 2px 5px rgba(0,0,0,.12);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.dance-badge:hover {

    transform: translateY(-1px);

    box-shadow:
        0 4px 8px rgba(0,0,0,.15);
}


.dance-badge-icon,
.dance-badge .badge-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 17px;

    height: 17px;

    font-size: 12px;

    line-height: 1;
}


.dance-badge-text,
.dance-badge .badge-text {

    display: inline-block;

    line-height: 1;
}


/* =========================================================
   COULEURS DES BADGES
========================================================= */

.dance-badge.badge-nouveaute {

    background:
        linear-gradient(
            135deg,
            #dff3e3,
            #b9dfc1
        );

    color: #245c35;

    border-color: #9fcba9;
}


.dance-badge.badge-top50 {

    background:
        linear-gradient(
            135deg,
            #fff1b8,
            #e8c85a
        );

    color: #654d00;

    border-color: #d6b63d;
}


.dance-badge.badge-top100 {

    background:
        linear-gradient(
            135deg,
            #e5e7eb,
            #c5c9cf
        );

    color: #34383d;

    border-color: #adb2b8;
}


.dance-badge.badge-populaire {

    background:
        linear-gradient(
            135deg,
            #ffe0b2,
            #f4a261
        );

    color: #713b12;

    border-color: #df8c4c;
}


.dance-badge.badge-classique {

    background:
        linear-gradient(
            135deg,
            #f0e4cf,
            #d2b48c
        );

    color: #5b4025;

    border-color: #b99568;
}


.dance-badge.badge-retro {

    background:
        linear-gradient(
            135deg,
            #eadcf4,
            #c5a7d9
        );

    color: #54376b;

    border-color: #aa88c1;
}


.dance-badge.badge-default {

    background: #edf0ea;

    color: var(--dark);

    border-color: var(--border);
}


/* =========================================================
   COLONNE BADGE
========================================================= */

.badge-column {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 130px;
}


/* =========================================================
   AUCUN RÉSULTAT
========================================================= */

.no-results {

    padding: 50px 25px;

    text-align: center;

    color: var(--muted);
}


.no-results strong {

    display: block;

    margin-bottom: 8px;

    color: var(--dark);

    font-size: 18px;
}


.no-results p {

    margin: 0;
}


/* =========================================================
   MODAL
========================================================= */

.dance-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;
}


.dance-modal.open {

    display: block;
}


.dance-modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(63,53,43,.72);

    backdrop-filter: blur(5px);
}


.dance-modal-content {

    position: relative;

    z-index: 2;

    width: min(
        1100px,
        calc(100% - 40px)
    );

    max-height: calc(100vh - 50px);

    margin: 25px auto;

    padding: 30px;

    box-sizing: border-box;

    overflow-y: auto;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 24px;

    box-shadow:
        0 25px 70px rgba(63,53,43,.30);
}


body.dance-modal-open {

    overflow: hidden;
}


/* =========================================================
   FERMER LE MODAL
========================================================= */

.dance-modal-close {

    position: sticky;

    top: 0;

    float: right;

    z-index: 20;

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 50%;

    background: var(--red-light);

    color: var(--dark);

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.dance-modal-close:hover {

    background: var(--red);

    color: white;

    transform: rotate(90deg);
}


/* =========================================================
   HEADER MODAL
========================================================= */

.modal-header {

    padding-right: 55px;

    margin-bottom: 25px;
}


.modal-eyebrow {

    display: block;

    margin-bottom: 7px;

    color: var(--red);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.modal-header h2 {

    margin: 0 0 12px;

    color: var(--dark);

    font-size: 30px;

    line-height: 1.15;
}


/* =========================================================
   DÉTAILS DU MODAL
========================================================= */

.modal-details {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 20px;
}


.modal-detail-card {

    padding: 20px;

    background: var(--background);

    border: 1px solid var(--border);

    border-radius: 16px;
}


.modal-detail-card h3 {

    margin: 0 0 15px;

    color: var(--red-dark);

    font-size: 18px;

    font-weight: 800;
}


.modal-detail-line {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 9px 0;

    border-bottom: 1px solid var(--border);
}


.modal-detail-line:last-child {

    border-bottom: none;
}


.modal-detail-line strong {

    color: var(--red-dark);
}


.modal-detail-line span {

    color: var(--text);

    text-align: right;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.modal-description-box {

    margin-bottom: 20px;

    padding: 20px;

    background: var(--background);

    border: 1px solid var(--border);

    border-radius: 16px;
}


.modal-description-box h3 {

    margin: 0 0 10px;

    color: var(--red-dark);
}


.modal-description-box p {

    margin: 0;

    color: var(--text);

    line-height: 1.7;
}


.modal-description {

    margin-top: 15px;
}


.modal-description strong {

    display: block;

    margin-bottom: 5px;

    color: var(--red-dark);
}


.modal-description p {

    margin: 0;

    color: var(--text);
}


/* =========================================================
   SECTIONS DU MODAL
========================================================= */

.modal-section {

    margin-top: 20px;
}


.modal-section h3 {

    margin: 0 0 14px;

    color: var(--red-dark);

    font-size: 18px;

    font-weight: 800;
}


/* =========================================================
   VIDÉO
========================================================= */

.modal-video {

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 16px;

    background: #000;

    box-shadow:
        0 8px 25px rgba(63,53,43,.15);
}


.modal-video iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: none;
}


/* =========================================================
   CONTENU VIDE
========================================================= */

.modal-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 90px;

    padding: 20px;

    box-sizing: border-box;

    border: 2px dashed var(--gold);

    border-radius: 14px;

    background: var(--gold-light);

    color: var(--muted);

    text-align: center;

    font-weight: 600;
}


/* =========================================================
   BOUTON PDF / FEUILLE DE PAS
========================================================= */

.modal-pdf-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 11px 20px;

    border-radius: 999px;

    background: var(--red);

    color: white;

    text-decoration: none;

    font-weight: 750;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.modal-pdf-button:hover {

    background: var(--red-dark);

    transform: translateY(-2px);

    box-shadow: var(--shadow);
}


/* =========================================================
   LIGNES MOBILES
========================================================= */

.mobile-line {

    display: none;
}


/* =========================================================
   DESKTOP — STRUCTURE FINALE
========================================================= */

@media (min-width: 769px) {

    .library-grid {

        width: 100%;

        max-width: 100%;

        margin: 0 auto;
    }


    .library-grid .mobile-line {

        display: none !important;
    }


    .library-grid .grid-header,
    .library-grid .grid-row {

        display: grid;

        grid-template-columns:
            minmax(180px, 1.5fr)
            minmax(110px, .8fr)
            70px
            minmax(150px, 1fr)
            minmax(140px, 1fr)
            minmax(150px, 1fr)
            minmax(120px, .9fr)
            85px
            75px;

        align-items: center;

        column-gap: 12px;
    }


    .library-grid .grid-header > div,
    .library-grid .grid-row > .desktop-cell,
    .library-grid .grid-row > .dance-counts {

        min-width: 0;

        box-sizing: border-box;
    }


    .library-grid .grid-row > .desktop-cell,
    .library-grid .grid-row > .dance-counts {

        display: flex;

        align-items: center;

        min-height: 60px;
    }


    /* Niveau */

    .library-grid .grid-header > div:nth-child(2) {

        text-align: center;
    }


    .library-grid .grid-row > .dance-level {

        justify-content: center;

        text-align: center;
    }


    /* Comptes */

    .library-grid .grid-row > .dance-counts {

        justify-content: center;

        font-weight: 700;

        text-align: center;
    }


    /* Chorégraphe */

    .library-grid .grid-row > .dance-choregraphe {

        justify-content: flex-start;

        justify-self: stretch;

        padding-left: 0;

        padding-right: 8px;

        text-align: left;

        overflow: visible;

        text-overflow: clip;

        white-space: normal;
    }


    .library-grid .grid-header > div:nth-child(4) {

        text-align: left;
    }


    /* Artiste */

    .library-grid .grid-row > .dance-artist {

        justify-content: flex-start;

        text-align: left;

        overflow: hidden;
    }


    /* Musique */

    .library-grid .grid-row > .dance-music {

        justify-content: flex-start;

        text-align: left;

        overflow: hidden;
    }


    /* Badge */

    .library-grid .grid-header > div:nth-child(7) {

        text-align: center;
    }


    .library-grid .grid-row > .dance-collection-badge {

        justify-content: center;

        text-align: center;

        overflow: visible;
    }


    /* Favoris */

    .library-grid .grid-row > .dance-favorites {

        justify-content: center;

        gap: 6px;

        text-align: center;
    }


    /* J'aime */

    .library-grid .grid-row > .dance-likes {

        justify-content: center;

        gap: 6px;

        text-align: center;
    }


    /* Textes longs */

    .library-grid .dance-name,
    .library-grid .dance-choregraphe,
    .library-grid .dance-artist,
    .library-grid .dance-music {

        min-width: 0;
    }

}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1100px) {

    .library {

        padding-left: 20px;

        padding-right: 20px;
    }


    .grid-header {

        display: none;
    }


    .grid-row {

        grid-template-columns:
            minmax(200px, 2fr)
            120px
            70px
            60px
            1fr
            1fr
            1.2fr;

        column-gap: 10px;
    }

}


/* =========================================================
   MOBILE — 768PX
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       CONTENEUR
    ----------------------------------------------------- */

    .library {

        width: 100%;

        padding:
            22px 14px 110px;
    }


    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .library-intro {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

        padding: 18px;

        gap: 15px;
    }


    .library-intro h1 {

        font-size: 25px;
    }


    .btn-add {

        width: 100%;
    }


    /* -----------------------------------------------------
       RECHERCHE
    ----------------------------------------------------- */

    .library-toolbar {

        padding: 15px;

        border-radius: 18px;
    }


    .library-search {

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .library-search input,
    .library-search select,
    .btn-search {

        width: 100%;

        height: 50px;
    }


    /* -----------------------------------------------------
       COLLECTIONS
    ----------------------------------------------------- */

    .explorer-autrement {

        margin-bottom: 22px;
    }


    .explorer-autrement h3 {

        text-align: center;

        font-size: 18px;

        margin-bottom: 14px;
    }


    .collection-buttons {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 8px;
    }


    .collection-btn {

        width: 100%;

        min-height: 44px;

        padding:
            8px 7px;

        box-sizing: border-box;

        font-size: 13px;

        text-align: center;
    }


    /* -----------------------------------------------------
       GRILLE
    ----------------------------------------------------- */

    .library-grid {

        display: block;

        background: transparent;

        border: none;

        box-shadow: none;

        overflow: visible;
    }


    .library-grid .grid-header {

        display: none !important;

        visibility: hidden;

        height: 0;

        overflow: hidden;
    }


    .library-grid .desktop-cell,
    .library-grid .dance-counts,
    .library-grid .dance-walls {

        display: none !important;
    }


    /* -----------------------------------------------------
       CARTE
    ----------------------------------------------------- */

    .dance-item {

        width: 100%;

        margin-bottom: 10px;
    }


    .library-grid .grid-row {

        display: block !important;

        position: relative;

        width: 100%;

        min-height: 0;

        padding: 14px 15px !important;

        box-sizing: border-box;

        background: var(--white);

        border: 1px solid var(--border);

        border-radius: 18px;

        box-shadow: var(--shadow);

        cursor: pointer;

        transition:
            transform .2s ease,
            box-shadow .2s ease;
    }


    .library-grid .grid-row:hover {

        transform: translateY(-2px);

        background: var(--white);
    }


    /* -----------------------------------------------------
       RUBAN
    ----------------------------------------------------- */

    .corner-ribbon {

        top: 17px;

        left: -43px;
    }


    /* -----------------------------------------------------
       LIGNES MOBILES
    ----------------------------------------------------- */

    .library-grid .mobile-line {

        width: 100%;

        box-sizing: border-box;
    }


    .library-grid .mobile-line-1 {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        margin-bottom: 7px;
    }


    .library-grid .mobile-line-2 {

        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        gap: 12px;

        width: 100%;

        margin-bottom: 7px;
    }


    .library-grid .mobile-line-3 {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        width: 100%;
    }


    /* -----------------------------------------------------
       NOM
    ----------------------------------------------------- */

    .library-grid .mobile-line-1 .dance-name {

        flex: 1 1 auto;

        min-width: 0;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        color: var(--dark);

        text-align: left;

        font-size: 15px;

        font-weight: 800;

        line-height: 1.25;

        white-space: normal;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       NIVEAU
    ----------------------------------------------------- */

    .library-grid .mobile-line-1 .dance-level {

        flex: 0 0 auto;

        margin-left: auto;

        justify-content: flex-end;

        text-align: right;
    }


    .library-grid .dance-level .niveau-badge {

        white-space: nowrap;

        font-size: 10px;

        padding: 4px 9px;
    }


    /* -----------------------------------------------------
       CHORÉGRAPHE
    ----------------------------------------------------- */

    .library-grid .mobile-line-2 .dance-choregraphe {

        flex: 1 1 auto;

        min-width: 0;

        width: auto !important;

        margin: 0 !important;

        padding: 4px 0 0 !important;

        text-align: left;

        font-size: 12px;

        line-height: 1.25;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       BADGE COLLECTION
    ----------------------------------------------------- */

    .library-grid .mobile-line-2 .dance-collection-badge {

        flex: 0 0 auto;

        margin-left: auto;

        padding: 0 !important;

        text-align: right;
    }


    .library-grid .collection-badge {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        min-width: auto;

        max-width: 120px;

        padding: 5px 9px;

        font-size: 10px;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       CONTENEUR BADGE + ACTIONS
    ----------------------------------------------------- */

    .library-grid .mobile-badge-actions {

        display: flex;

        flex-direction: column;

        align-items: flex-end;

        flex-shrink: 0;

        gap: 5px;
    }


    .library-grid .mobile-badge-actions
    .dance-collection-badge {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        width: 100%;
    }


    /* -----------------------------------------------------
       ARTISTE
    ----------------------------------------------------- */

    .library-grid .mobile-line-3 .dance-artist {

        flex: 1;

        min-width: 0;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left;

        font-size: 11px;

        line-height: 1.25;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       MUSIQUE
    ----------------------------------------------------- */

    .library-grid .mobile-line-3 .dance-music {

        flex: 1;

        min-width: 0;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left;

        font-size: 11px;

        line-height: 1.25;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       SÉPARATEUR ARTISTE / MUSIQUE
    ----------------------------------------------------- */

    .mobile-line-3 .dance-music::before {

        content: "•";

        margin-right: 10px;

        opacity: .5;
    }


    /* -----------------------------------------------------
       ACTIONS SOCIALES
    ----------------------------------------------------- */

    .library-grid .mobile-social-actions {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 10px;

        flex-shrink: 0;

        margin-left: auto;
    }


    .library-grid .mobile-favorite,
    .library-grid .mobile-like {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 4px;

        font-size: 12px;

        line-height: 1;

        white-space: nowrap;
    }


    .library-grid .mobile-favorite i,
    .library-grid .mobile-like i {

        font-size: 14px;

        line-height: 1;
    }


    .library-grid .mobile-favorite span,
    .library-grid .mobile-like span {

        font-size: 11px;

        font-weight: 700;
    }


    /* -----------------------------------------------------
       FAVORIS / J'AIME DIRECTS
       Compatibilité avec la structure actuelle
    ----------------------------------------------------- */

    .library-grid .grid-row .dance-favorites,
    .library-grid .grid-row .dance-likes {

        display: flex !important;

        align-items: center;

        gap: 5px;

        min-width: 0;

        margin: 0 !important;

        padding: 2px 0 !important;

        font-size: 12px;

        visibility: visible !important;

        opacity: 1 !important;

        white-space: nowrap;
    }


    .library-grid .grid-row .dance-favorites {

        justify-content: flex-start;
    }


    .library-grid .grid-row .dance-likes {

        justify-content: flex-end;
    }


    .library-grid .grid-row .dance-favorites i,
    .library-grid .grid-row .dance-likes i {

        display: inline-block !important;

        visibility: visible !important;

        opacity: 1 !important;

        font-size: 14px;
    }


    .library-grid .grid-row .dance-favorites span,
    .library-grid .grid-row .dance-likes span {

        display: inline-block !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /* -----------------------------------------------------
       MODAL MOBILE
    ----------------------------------------------------- */

    .dance-modal-content {

        width: calc(100% - 20px);

        max-height: calc(100vh - 20px);

        margin: 10px auto;

        padding:
            20px 16px 35px;

        box-sizing: border-box;

        overflow-y: auto;

        overflow-x: hidden;

        border-radius: 20px;
    }


    .dance-modal-close {

        width: 40px;

        height: 40px;
    }


    .modal-header {

        padding-right: 45px;
    }


    .modal-header h2 {

        font-size: 24px;
    }


    .modal-details {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .modal-detail-card {

        padding: 16px;
    }


    .modal-detail-line {

        flex-direction: column;

        gap: 3px;
    }


    .modal-detail-line span {

        text-align: left;
    }


    /* -----------------------------------------------------
       SECTION MODAL
    ----------------------------------------------------- */

    .modal-section {

        width: 100%;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       FEUILLE DE PAS
    ----------------------------------------------------- */

    .modal-pdf-button {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        max-width: 100% !important;

        min-height: 48px !important;

        height: auto !important;

        margin: 12px 0 20px !important;

        padding: 12px 16px !important;

        box-sizing: border-box !important;

        border-radius: 12px !important;

        white-space: normal !important;

        text-align: center !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* -----------------------------------------------------
       BADGES DES DANSES
    ----------------------------------------------------- */

    .dance-badges {

        grid-column: 1;

        grid-row: 2;

        margin-top: 2px;

        gap: 5px;
    }


    .dance-badge {

        min-width: auto;

        min-height: 24px;

        padding: 4px 8px;

        font-size: 9px;
    }


    .dance-badge-icon,
    .dance-badge .badge-icon {

        width: 16px;

        height: 16px;

        font-size: 11px;
    }

}


/* =========================================================
   PETITS TÉLÉPHONES — 480PX
========================================================= */

@media (max-width: 480px) {

    .library {

        padding-left: 10px;

        padding-right: 10px;
    }


    .library-toolbar {

        padding: 12px;
    }


    .collection-buttons {

        grid-template-columns:
            1fr 1fr;
    }


    .collection-btn {

        font-size: 12px;

        padding-left: 5px;

        padding-right: 5px;
    }


    .grid-row {

        padding-left: 12px !important;

        padding-right: 12px !important;
    }


    .dance-name {

        font-size: 17px;
    }


    .modal-header h2 {

        font-size: 21px;
    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS — 420PX
========================================================= */

@media (max-width: 420px) {

    .library-grid .grid-row {

        padding:
            13px 12px !important;

        column-gap: 8px;

        row-gap: 6px;
    }


    .library-grid .mobile-line-1,
    .library-grid .mobile-line-2 {

        gap: 8px;
    }


    .library-grid .mobile-line-3 {

        gap: 7px;
    }


    .library-grid .mobile-line-3 .dance-music::before {

        margin-right: 7px;
    }


    .library-grid .dance-favorites,
    .library-grid .dance-likes {

        font-size: 11px;
    }


    .library-grid .dance-favorites i,
    .library-grid .dance-likes i {

        font-size: 13px;
    }

}


/* =========================================================
   TRÈS PETITS ÉCRANS — 360PX
========================================================= */

@media (max-width: 360px) {

    .collection-buttons {

        grid-template-columns: 1fr;
    }


    .collection-btn {

        min-height: 42px;
    }


    .grid-row {

        padding-left: 10px !important;

        padding-right: 10px !important;
    }


    .dance-name {

        font-size: 16px;
    }

}

.dance-choregraphe {
    min-width: 0;
    padding-right: 8px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-grid .grid-row > .dance-choregraphe {
    justify-content: flex-start;

    min-width: 0;

    padding-left: 0;
    padding-right: 8px;

    text-align: left;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   MOBILE
   LIGNE 3
   ARTISTE + MUSIQUE + J'AIME + FAVORIS
========================================================= */

@media (max-width: 768px) {

    .library-grid .mobile-line-3 {

        display: grid;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        align-items: center;

        width: 100%;

        gap: 8px;

        margin-top: 3px;

        min-width: 0;
    }


    /* =====================================================
       ARTISTE
    ===================================================== */

    .library-grid .mobile-line-3 .dance-artist {

        min-width: 0;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        color: var(--text);

        font-size: 11px;

        line-height: 1.35;

        text-align: left;

        white-space: normal;

        overflow: visible;

        text-overflow: clip;
    }


    /* =====================================================
       MUSIQUE
    ===================================================== */

.library-grid .mobile-line-3 .dance-music {
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--text);
    font-size: 11px;
    line-height: 1.35;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    min-width: 0;
}


    /* =====================================================
       SÉPARATEUR
    ===================================================== */

    .library-grid .mobile-line-3 .dance-music::before {

        content: "•";

        display: inline-block;

        margin-right: 7px;

        color: var(--muted);

        opacity: .65;
    }


    /* =====================================================
       J'AIME + FAVORIS
    ===================================================== */

    .library-grid .mobile-line-3 .mobile-social-actions {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 9px;

        min-width: max-content;

        margin: 0;

        white-space: nowrap;
    }


    .library-grid .mobile-line-3 .mobile-like,
    .library-grid .mobile-line-3 .mobile-favorite {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 4px;

        flex: 0 0 auto;

        margin: 0;

        padding: 0;

        font-size: 11px;

        line-height: 1;

        white-space: nowrap;
    }


    .library-grid .mobile-line-3 .mobile-like i {

        color: var(--red);

        font-size: 13px;
    }


    .library-grid .mobile-line-3 .mobile-favorite i {

        color: var(--red);

        font-size: 13px;
    }


    .library-grid .mobile-line-3 .mobile-like span,
    .library-grid .mobile-line-3 .mobile-favorite span {

        color: var(--text);

        font-size: 10px;

        font-weight: 700;

        line-height: 1;
    }

}

@media (max-width: 768px) {

    /* ==========================================================
       MOBILE — CACHER COMPLÈTEMENT LES ACTIONS DESKTOP
       ========================================================== */

    .library-grid .grid-row > .dance-favorites,
    .library-grid .grid-row > .dance-likes,
    .library-grid .grid-row > .desktop-cell.dance-favorites,
    .library-grid .grid-row > .desktop-cell.dance-likes {
        display: none !important;
        visibility: hidden !important;
    }

    /* ==========================================================
       MOBILE — SEULEMENT LES ACTIONS DE mobile-line-3
       ========================================================== */

    .library-grid .mobile-line-3 .mobile-social-actions {
        display: flex !important;
        visibility: visible !important;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        margin: 0;
        padding: 0;
        min-width: max-content;
    }

    .library-grid .mobile-line-3 .mobile-like,
    .library-grid .mobile-line-3 .mobile-favorite {
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

}



/* =========================================================
   BIBLIOTHÈQUE — TOP / HERO
========================================================= */

.bib-top {

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #4f624b 0%,
            #66785f 45%,
            #80694f 100%
        );

    color: #fffaf0;

    box-shadow: var(--shadow);

    box-sizing: border-box;
}


/* =========================================================
   CONTENU
========================================================= */

.bib-top-inner {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 45px 25px;

    box-sizing: border-box;
}


/* =========================================================
   TEXTE
========================================================= */

.bib-top-text {

    min-width: 0;

    max-width: 900px;
}


/* =========================================================
   EYEBROW
========================================================= */

.bib-top .eyebrow {

    display: inline-block;

    margin-bottom: 7px;

    color: #e8dcc4;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* =========================================================
   TITRE
========================================================= */

.bib-top h1 {

    margin: 0;

    color: #fffaf0;

    font-size: 32px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.02em;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.bib-top p {

    margin: 8px 0 0;

    color: rgba(255, 250, 240, .85);

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 992px) {

    .bib-top-inner {

        padding: 38px 22px;
    }

    .bib-top h1 {

        font-size: 29px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .bib-top-inner {

        padding: 30px 18px;
    }

    .bib-top h1 {

        font-size: 25px;
    }

    .bib-top p {

        font-size: 13px;

        line-height: 1.45;
    }
}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width: 480px) {

    .bib-top-inner {

        padding: 25px 16px;
    }

    .bib-top h1 {

        font-size: 23px;
    }
}

/* =========================================================
   J'AIME / FAVORIS — DESKTOP
========================================================= */

@media (min-width: 769px) {

    .library-grid .dance-likes i,
    .library-grid .dance-favorites i {

        color: #66785f !important;

        font-size: 15px;
    }

    .library-grid .dance-likes,
    .library-grid .dance-favorites {

        color: #66785f !important;
    }

    .library-grid .dance-likes span,
    .library-grid .dance-favorites span {

        color: #66785f !important;
    }

}

/* =========================================================
   BADGES DE COLLECTION — FORMAT COMPACT
========================================================= */

.library-grid .collection-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 22px;

    padding: 3px 8px;

    font-size: 9px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;

    border-radius: 999px;

    box-sizing: border-box;
}


/* =========================================================
   MOBILE — ENCORE PLUS COMPACT
========================================================= */

@media (max-width: 768px) {

    .library-grid .collection-badge {

        min-height: 20px;

        padding: 3px 7px;

        font-size: 8px;

        line-height: 1;
    }

}

/* =========================================================
   BADGES DE COLLECTION — MAJUSCULES
========================================================= */

.library-grid .collection-badge {
    text-transform: uppercase !important;
}

/* =========================================================
   BADGES — NIVEAUX + COLLECTIONS
   MÊME FORME / MÊME TAILLE / MÊME STYLE
========================================================= */

.library-grid .niveau-badge,
.library-grid .collection-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 22px;

    min-width: 0;

    padding: 0 9px;

    box-sizing: border-box;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .3px;

    white-space: nowrap;

    text-transform: uppercase;
}

/* =========================================================
   BADGES — MODAL
   MÊME STYLE QUE LA BIBLIOTHÈQUE
========================================================= */

.dance-modal .niveau-badge,
.dance-modal .collection-badge,
.dance-modal .modal-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 22px;

    min-width: 0;

    padding: 0 9px;

    box-sizing: border-box;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .3px;

    white-space: nowrap;

    text-transform: uppercase;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .dance-modal .niveau-badge,
    .dance-modal .collection-badge,
    .dance-modal .modal-badge {

        height: 20px;

        padding: 0 8px;

        font-size: 8px;
    }

}

/* =========================================================
   ACTIONS SOCIALES
   Retire l'apparence de petits carrés autour des boutons
   ========================================================= */

.library-grid .mobile-like,
.library-grid .mobile-favorite,
.library-grid .dance-likes,
.library-grid .dance-favorites {

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    outline: 0;

    background: transparent;

    box-shadow: none;

    padding: 0;
    margin: 0;

    cursor: pointer;

    font: inherit;

}


/* =========================================================
   ICÔNES
   ========================================================= */

.library-grid .mobile-like i,
.library-grid .mobile-favorite i,
.library-grid .dance-likes i,
.library-grid .dance-favorites i {

    background: transparent;

    border: 0;

    box-shadow: none;

}


/* =========================================================
   FOCUS CLAVIER
   On enlève le carré du navigateur tout en gardant
   une indication discrète lorsqu'on navigue au clavier.
   ========================================================= */

.library-grid .mobile-like:focus,
.library-grid .mobile-favorite:focus,
.library-grid .dance-likes:focus,
.library-grid .dance-favorites:focus {

    outline: none;

    box-shadow: none;

}


/* =========================================================
   FOCUS VISIBLE
   Petite indication seulement avec la navigation clavier
   ========================================================= */

.library-grid .mobile-like:focus-visible,
.library-grid .mobile-favorite:focus-visible,
.library-grid .dance-likes:focus-visible,
.library-grid .dance-favorites:focus-visible {

    outline: 2px solid rgba(102, 120, 95, 0.35);

    outline-offset: 3px;

    border-radius: 50%;

}


/* =========================================================
   ÉTAT ACTIF
   ========================================================= */

.library-grid .mobile-like.active,
.library-grid .mobile-favorite.active,
.library-grid .dance-likes.active,
.library-grid .dance-favorites.active {

    background: transparent;

    box-shadow: none;

}