@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Inter:wght@300;400;600&display=swap');

:root {
    --accent: #bc13fe; 
    --neon-red: #ff3131;
    --neon-cyan: #00f2ff;
    --neon-purple: #bc13fe;
    --neon-yellow: #E2E66D;
    --bg-dark: #080808;
    --bg-panel: #121212;
    --font-title: 'Syncopate', sans-serif; /* Ta police "Horizon" */
    --font-body: 'Inter', sans-serif;
}

body {
    background: #080808;
    color: white;
    font-family: var(--font-body);
    margin: 0;
}

h1, h2, h3, .section-title {
    font-family: var(--font-title);
    text-transform: uppercase;
}

.main-cover, .prod-card img, #mini-cover {
    height: auto;
    aspect-ratio: 1 / 1; /* Force le format carré même si l'image charge lentement */
    object-fit: cover;
}

/* --- CONFIGURATION DU HEADER --- */
.main-header {
    width: 100%;
    min-height: 500px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.hero-container {
    display: flex;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background-image: url(./images/header-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 3px;

}

/* Partie Gauche : L'image prend 50% ou s'adapte */
.hero-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.main-cover {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Partie Droite : Le contenu texte */
.hero-content {
    flex: 1.2;
    display: flex;
    align-items: center;
    position: relative;
    /* Dégradé pour la lisibilité : sombre à gauche vers transparent (ou inversement selon besoin) */
    background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
    padding: 40px;
    color: #fff;
}

/* Wrapper pour limiter la largeur du texte et rester élégant */
.content-wrapper {
    max-width: 600px;
}

.logo-text-img {
    margin-top: -40px;
    margin-bottom: -40px;
    margin-left: 10px;
    max-width: 350px;
    height: auto;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 16px;
    opacity: 0.9;
}

/* Badges plateformes */
.platform-badges {
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    background-color: rgb(0 0 0 / 0.5);
    border-radius: 50px;
}

.badge img {
    width: 40px;
    height: 40px;
    transition: transform 0.2s;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.badge:hover img {
    transform: scale(1.1);
}

/* --- VERSION MOBILE (Responsive) --- */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column; /* Empile l'image et le texte */
    }

    .main-header {
        min-height: auto;
    }

    .hero-visual {
        display: none;
    }

    .main-cover {
        max-width: 250px; /* Plus petit sur mobile */
    }

    .hero-content {
        padding: 0px;
        background: #000; /* Fond plein sur mobile pour lisibilité max */
        text-align: center;
        background-image: url(./images/header-background.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .content-wrapper {
        margin: 0 auto;
        background-color: rgba(0,0,0,0.3);
        padding: 30px;
    }

    .logo-text-img {
        max-width: 80%;
    }

    .platform-badges {
        max-width: 450px;
        margin: auto;
    }
}


/* --- GRILLE --- */
#grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}


.cover-item:hover { transform: scale(1.05); filter: brightness(1.1); }
.cover-item img { width: 100%; display: block; }

/* --- LECTEUR (MODAL) --- */
#reader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.96);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.jewel-case {
  max-width: 820px;
  max-height: 510px;
  max-width: 860px;
  display: flex;
  background: var(--bg-dark);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.9);
  height: 76dvh;
  width: 96vw;
}

.case-panel {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left { border-right: 1px solid #000; }
.panel-content { padding: 30px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
#view-title { margin: 0 0 5px 0; font-size: 1.4rem; }
.meta { color: #888; font-size: 0.8rem; margin-bottom: 15px; }
hr { border: none; border-bottom: 1px solid #333; margin-bottom: 15px; }

.description-scroll {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #ddd;
    padding-right: 12px;
    /* Pour Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

/* Ascenseur stylisé */
.description-scroll::-webkit-scrollbar { width: 5px; }
.description-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

/* Style des liens dans la description */
.description-scroll a {
    color: var(--accent); /* Utilise la couleur extraite par ColorThief */
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.description-scroll a:hover {
    border-bottom: 1px solid var(--accent);
    filter: brightness(1.2);
}

/* Optionnel : ajout d'une petite icône "lien externe" après le lien */
.description-scroll a::after {
    content: ' ↗';
    font-size: 0.7rem;
    vertical-align: super;
    opacity: 0.7;
}

/* CD */
.right { background: radial-gradient(circle at center, #1a1a1a, #080808); }
.cd-tray { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.cd-disc {
    width: 350px;
    height: 350px;
    margin-top: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    position: relative;
    box-shadow: 0 0 25px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    border-style: solid;
    border-color: var(--accent);
}

.cd-disc:active { transform: scale(0.97); }

.cd-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at center, #1a1a1a, #080808);
    border: 3px solid #222;
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.cd-rim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}



.rotating {
    animation: rotateDisc 12s linear infinite;
}
.paused-anim {
    animation-play-state: paused;
}
@keyframes rotateDisc {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
/* PROGRESS BAR */
.progress-area { width: 80%; margin-top: 50px; }
#progress-slider { width: 100%; accent-color: var(--accent); cursor: pointer; height: 12px; }
.timecodes { display: flex; justify-content: space-between; font-size: 0.7rem; color: #666; margin-top: 5px; }

#close-btn {
    margin-top: 30px;
    background: transparent;
    border: 1px solid #444;
    color: #888;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 0.75rem;
    letter-spacing: 1px;
}
#close-btn:hover { color: white; border-color: white; }

.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    display: none !important; /* Force la disparition sur Firefox qui peut ignorer visibility dans certains contextes de grid */ 
}



/* Animation de rotation du flux électrique */
@keyframes led-chase {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cover-item {
    position: relative;
    padding: 3px; /* Épaisseur du ruban LED */
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden; /* Important pour garder le ruban sur les bords */
    transition: transform 0.3s ease;
}

/* 2. Le ruban LED (le trait qui tourne) */
.cover-item.is-playing::before {
    content: '';
    position: absolute;
    /* On le fait très grand pour qu'il couvre largement les coins en tournant */
    width: 200%; 
    height: 200%;
    top: 50%;
    left: 50%;
    /* On utilise les variables du :root */
    background: conic-gradient(
        transparent,
        /* Départ Froid : Le Violet de "déjà-vu" */
        var(--neon-purple),  /* Remplace par la variable de ton violet */
        
        /* Transition : Le Cyan est indispensable ici pour éviter un gris terne */
        var(--neon-cyan),         /* Utilise ton cyan ici */
        
        /* Centre Chaud : Le Jaune de "DE" */
        var(--neon-yellow),  /* Remplace par la variable de ton jaune */
        
        /* Fin Chaude : Le Rouge-Orangé de "UN AIR" */
        var(--neon-red),     /* Remplace par la variable de ton rouge */
        transparent 30%
    );
    will-change: transform; /* Aide Safari à optimiser l'animation */
    -webkit-animation: led-chase 3s linear infinite; /* Préfixe Safari */
    /* L'astuce est ici : on centre avec translate ET on anime la rotation */
    animation: led-chase 3s linear infinite;
    z-index: 1;
}
@-webkit-keyframes led-chase {
    from { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
    to { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
/* 4. Animation corrigée */
@keyframes led-chase {
    from {
        /* On garde le translate(-50%, -50%) pour maintenir le centrage parfait */
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* L'éclat néon (glow) autour de la pochette */
.cover-item.is-playing::after {
    content: '';
    position: absolute;
    inset: 3px; /* Doit correspondre au padding du parent */
    background: #080808;
    border-radius: 5px;
    z-index: 2;
}

/* On s'assure que l'image est au-dessus de tout */
.cover-item img {
    position: relative;
    width: 100%;
    display: block;
    z-index: 3;
    border-radius: 3px;
}

/* Optionnel : ajout d'une ombre portée lumineuse sur la grille */
.cover-item.is-playing {
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
    transform: scale(1.02);
}

/* --- ANIMATIONS D'OUVERTURE --- */

/* 1. Le fond noir s'affiche en fondu rapide */
@keyframes overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

#reader-overlay:not(.hidden) {
    animation: overlay-fade 0.2s ease-out forwards;
}

/* 2. Le boîtier "pop" avec un effet ressort */
@keyframes jewel-pop {
    0% {
        opacity: 0;
        /* On part d'un peu plus petit et légèrement incliné en 3D */
        transform: scale(0.8) perspective(500px) rotateX(10deg);
    }
    /* Le "rebond" : on dépasse légèrement la taille finale (1.02) */
    70% {
        transform: scale(1.02);
    }
    /* On se stabilise à la taille normale */
    100% {
        opacity: 1;
        transform: scale(1) perspective(500px) rotateX(0deg);
    }
}

/* L'animation ne se lance que quand l'overlay n'est PAS caché */
#reader-overlay:not(.hidden) .jewel-case {
    /* Durée : 0.35s (très rapide)
       Easing : Une courbe qui crée un effet de rebond élastique
    */
    animation: jewel-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center center;
}

/* --- PETIT BONUS : Amélioration de la fermeture --- */
/* Quand on ajoute la classe .hidden, on veut que ça disparaisse vite */
#reader-overlay.hidden {
    display: flex !important; /* Empêche le display:none de casser l'animation */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in, visibility 0s linear 0.2s;
}

/* Pour que le bonus de fermeture fonctionne, il faut modifier légèrement
   la règle .hidden originale dans ton CSS : */

/* REMPLACE TA RÈGLE .hidden ACTUELLE PAR CELLE-CI : */
.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* L'astuce pour animer la disparition */
    transition: visibility 0s linear 0.2s, opacity 0.2s ease-in;
}


/* --- PRODUCTIONS GRID --- */
.label-section { text-align: center; padding: 30px; max-width: 1110px; margin: auto; background-color: #121212; border-radius: 3px;}
.section-title { font-weight: 900; letter-spacing: 3px; margin-bottom: 40px; }

.productions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.prod-card img { width: 100%; transition: 0.3s; margin-bottom: 15px; }
.prod-card:hover img { filter: grayscale(0%) brightness(1.2);transform: scale(1.05); }
.prod-card p { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 15px; min-height: 60px; }

.btn-metro {
    background: #333;
    color: white;
    padding: 10px;
    font-size: 0.7rem;
    text-decoration: none;
    display: block;
    margin: auto;
}

#control-popup {
    position: fixed;
    bottom: 76px;
    right: 90px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px); /* Effet de flou moderne */
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    font-family: sans-serif;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#control-popup.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#control-popup b {
    color: var(--accent, #00aaff); /* Utilise ta couleur dynamique */
}

/* ==========================================================================
   MINI-PLAYER GLOBAL (Commun)
   ========================================================================== */
.mini-player {
    position: fixed;
    z-index: 1000;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); /* Pour Safari */
    color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

.mini-player.hidden { 
    display: none !important; 
}

.mini-player-content {
    display: flex;
    align-items: center;
    padding: 10px;
}

/* --- TEXTES --- */
.mini-info {
    cursor: pointer;
    overflow: hidden;
}

#mini-title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mini-time {
    font-size: 0.8em;
    opacity: 0.6;
    margin-top: 4px;
}

/* --- ANIMATION DE ROTATION --- */
.rotating {
    animation: rotateDisc 12s linear infinite;
}

/* Animation de "saut" du disque */
@keyframes disc-skip {
    0% { transform: rotate(0deg) }
    30% { transform: rotate(-360deg) } 
    100% { transform: rotate(0deg) }
}


.skip-animation {
    animation: disc-skip 0.3s ease-out !important;
}

.paused-anim {
    animation-play-state: paused; /* Fige la rotation là où elle est */
}

@keyframes rotateDisc {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   VERSION DESKTOP (Bordure circulaire)
   ========================================================================== */
@media (min-width: 768px) {
    .mini-player {
        height: 54px;
        bottom: 12px;
        right: 30px;
        width: 410px;
        border-radius: 10px; /* Bord arrondi à gauche pour le CD */
        box-shadow: 0 0 25px rgba(0,0,0,0.8);
    }
    .mini-player-content {
        margin: -36px;
        margin-top: -64px;
    }

    .mini-cover-container {
        position: absolute;
        bottom: -10px;
        right: -26px;
        width: 120px;
        height: 120px;
        margin-left: 0px; /* Effet de sortie du cadre */
        flex-shrink: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px; /* Épaisseur de la bordure de progression */
        cursor: pointer;
        
        /* Bordure de progression circulaire */
        background: conic-gradient(
            #333 0%, 
            #333 calc(var(--progress, 0%) + 0.1%), /* Petit lissage */
            var(--accent) var(--progress, 0%), 
            var(--accent) 100%
        );
        
        /* Optionnel : Adoucir le rendu sur Safari */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    #mini-cover {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        background-color: #000;
        /* Supprime la boîte grise/bleue au clic */
    -webkit-tap-highlight-color: transparent;
    
    /* Optionnel : évite aussi le menu contextuel au clic long sur certains navigateurs */
    -webkit-touch-callout: none;
    }

    .mini-cd-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 22px; /* Proportionnel aux 120px du disque */
        height: 22px;
        background: radial-gradient(circle at center, #1a1a1a, #080808);
        border: 2px solid #222;
        border-radius: 50%;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
        z-index: 5; /* Par-dessus l'image */
    }

    .mini-cd-rim {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        z-index: 4; /* Juste sous le centre */
    }

    .mini-info {
        margin-left: 36px;
        margin-right: 0px;
        margin-top: 61px;
        width: 300px;
    }

    /* On cache la barre de progression plate sur Desktop */
    #mini-progress-container {
        display: none;
    }
}

/* ==========================================================================
   VERSION MOBILE (Barre plate)
   ========================================================================== */
@media (max-width: 767px) {
    .mini-player {
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mini-cover-container {
        width: 60px;
        height: 60px;
        position: relative; /* Indispensable pour positionner le centre */
        background: none !important;
        padding: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #mini-cover {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: 0 0 12px rgba(0,0,0,0.8);
        object-fit: cover;
        /* Supprime la boîte grise/bleue au clic */
    -webkit-tap-highlight-color: transparent;
    
    /* Optionnel : évite aussi le menu contextuel au clic long sur certains navigateurs */
    -webkit-touch-callout: none;
    }

    .mini-cd-center {
        display: block !important; /* On force l'affichage */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px; /* Taille réduite pour mobile (60px de disque) */
        height: 12px;
        background: radial-gradient(circle at center, #1a1a1a, #080808);
        border: 1.5px solid #222;
        border-radius: 50%;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
        z-index: 5;
    }

    .mini-cd-rim {
        display: block !important; /* On force l'affichage */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25px; /* Taille réduite pour mobile */
        height: 25px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        z-index: 4;
    }

    .mini-info {
        margin-left: 10px;
        flex-grow: 1;
    }

    #mini-title {
        font-size: 1.1em;
    }

    #mini-time {
        font-size: 0.9em;
    }

    /* Barre de progression plate tout en haut du mini-player */
    #mini-progress-container {
        width: 100%;
        height: 4px; /* Hauteur visible */
        background: rgba(255, 255, 255, 0.1);
        position: relative;
        cursor: pointer;
        order: -1;
    }

    /* ZONE DE CLIC AGRANDIE : Invisible mais capte le doigt */
    #mini-progress-container::after {
        content: '';
        position: absolute;
        top: -15px;    /* Étend la zone de clic de 15px vers le haut */
        bottom: -15px; /* Étend la zone de clic de 15px vers le bas */
        left: 0;
        right: 0;
        z-index: 10;
    }

    #mini-progress-bar {
        height: 100%;
        background: var(--accent);
        
        width: 0%; /* Piloté par le JS via style.width */
        transition: width 0.1s linear;
    }
}

/* Animation de balayage lumineux */
@keyframes skeleton-loading {
    0% { background-color: #1a1a1a; }
    50% { background-color: #252525; }
    100% { background-color: #1a1a1a; }
}

.cover-item.is-loading {
    background-color: #1a1a1a;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: 8px;
    aspect-ratio: 1/1;
}

/* État initial de l'image (cachée et réduite) */
.cover-item img {
    opacity: 0;
    transform: scale(0.1); /* L'image commence plus petite */
    transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    /* Le cubic-bezier ajoute un léger effet de rebond dynamique */
}

/* État quand l'image est chargée (zoom et fondu) */
.cover-item.loaded img {
    opacity: 1;
    transform: scale(1); /* L'image reprend sa taille normale */
}

/* On nettoie le skeleton une fois chargé */
.cover-item.loaded {
    animation: none;
    background: transparent;
}

/* --- ADAPTATION MOBILE --- */

@media (max-width: 768px) and (orientation: portrait) {
    
    /* Grille à 2 colonnes */
    #grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    header {
        padding: 20px 0;
    }

    /* Ajustement du Lecteur (Modal) */
    .jewel-case {
        flex-direction: column; /* Empilement vertical */
        width: 90vw;
        height: 85vh; /* Presque toute la hauteur */
        max-height: 800px;
    }

    /* Le CD en haut */
    .case-panel.right {
        order: 1; /* Place le CD en premier en haut */
        flex: 0 0 45%; /* Prend environ 45% de la hauteur */
        border-bottom: 1px solid #333;
    }

    /* Le contenu texte en bas */
    .case-panel.left {
        order: 2; /* Place le texte en dessous */
        flex: 0 0 55%;
        border-right: none;
    }

    /* Redimensionnement du CD pour mobile */
    .cd-disc {
        width: 190px;
        height: 190px;
        margin-top: 10px;
    }

    .cd-center {
        width: 35px;
        height: 35px;
    }

    .cd-rim {
        width: 70px;
        height: 70px;
    }

    /* Ajustement de la barre de progression */
    .progress-area {
        width: 90%;
        margin-top: 15px;
    }

    /* Ajustement des textes */
    .panel-content {
        padding: 20px;
    }

    #view-title {
        font-size: 1.2rem;
    }

    .description-scroll {
        font-size: 0.8rem;
    }

    /* Bouton fermer en bas du modal */
    #close-btn {
        margin-top: 15px;
        width: 100%;
        padding: 15px;
    }
}