/* style.css */

/* Réinitialisation de base */
html, body {
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #282c34; /* Fond sombre */
    font-family: sans-serif;
    justify-content: center;
    display: flex;
    user-select: none;
}

/* * Conteneur principal
 * Il utilise Flexbox pour organiser nos 2 grilles.
 * Par défaut (mode carré/paysage), les contrôles sont EN DESSOUS.
*/
#app-container {
    display: flex;
    flex-direction: column; /* La barre de contrôle est EN HAUT du contenu */
    width: 99vw; /* AJOUTE */
    height: 99dvh; /* AJOUTE */
    max-height: 99dvh; /* AJOUTE (sécurité) */
    padding: 1vw;
    /* box-sizing: border-box; */
    gap: 1%; /* Espace entre la barre et le contenu */
    box-sizing: border-box;
}

#master-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Espace les 3 groupes */
    align-items: center;
    width: 100%;
    flex-shrink: 0; /* Empêche la barre de rétrécir */
    background-color: #1a1a1a;
    padding: 8px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 2px solid #000;
    gap: 15px;
    color: #f0f0f0;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.preset-btn, #play-pause-btn, #record-btn {
    border-radius: 5px;
    border: 2px solid #555;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;
}
.preset-btn:hover, #play-pause-btn:hover, #record-btn:hover {
    filter: brightness(1.2);
}
.preset-btn.active {
    background-color: #40E0D0;
    border-color: #1a9c8c;
    box-shadow: 0 0 10px #40E0D0;
}

/* Le bouton Record */
#record-btn {
    font-size: 1.5em; /* Fait un gros point */
    padding: 0px 12px;
    background-color: #F44336; /* Rouge */
    border-color: #C62828;
    border-radius: 50%; /* Rond */
}

#record-btn.recording { /* Style quand on enregistre */
    animation: blink-pulse 1s infinite;
}

/* Le slider BPM */
.bpm-control {
    flex-grow: 1; /* Prend l'espace au milieu */
    justify-content: center;
}

#bpm-slider {
    width: 50%;
}

/* Style du bouton BPM (caché par défaut) */
#bpm-overlay-btn-mobile {
    display: none; /* CACHÉ sur bureau */
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 5px;
    border: 2px solid #555;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

#app-content-wrapper {
    display: flex;
    flex-grow: 1; /* TRÈS IMPORTANT : prend le reste de la place */
    min-height: 0; /* TRÈS IMPORTANT : autorise le shrink vertical */
    width: 100%;
    
    /* Le reste de tes styles (flex-direction: column, etc.) reste ici */
    flex-direction: column;
    justify-content: flex-start;
    gap: 1%;
}

.preset-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    /* Ton idée de style "mini-header" */
    background-color: #2c313a; /* Un peu plus clair que le fond */
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #111;
    margin: 7px 7px 0 7px;
}

/* Header pour les presets (ligne preset + étiquette) */
.component-header {
    display: flex;
    flex-direction: row;
    justify-content: center; /* POUSSE LES ENFANTS AUX EXTRÉMITÉS */
    align-items: center;
    /* On reprend le margin de l'ancienne barre */
}

/* Étiquette (Loop, Sampler, FX's) */
.component-label {
    font-family: monospace;
    font-weight: bold;
    font-size: 1.1em;
    color: #888; /* Gris clair */
    background-color: #2c313a;
    padding: 6px;
    border: 1px solid #111;
    border-radius: 6px;
    margin: 7px 7px 0 7px;
    cursor: default;
}
/* * Grille principale : 36 tuiles
*/
#drum-machine-wrapper {
    display: flex; 
    flex-direction: column; 
    flex: 1 1 auto; 
    min-height: 0;
    border: 4px solid #000;
    background-color: #444;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-radius: 15px;
}
#drum-machine {
    display: grid;
    
    
    gap: 8px;
    padding: 8px;
    
    box-sizing: border-box;
    
    /* Style par défaut : 6x6 */
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    /* Remplit de haut en bas (par colonne) au lieu de gauche à droite */
    grid-auto-flow: column;
}

/* Numéro de la tuile */
.tile-number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.7em;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4); /* Discret */
    pointer-events: none;
}
/* Quand la tuile est sombre/active, on éclaire le numéro */
.power-off .tile-number, .tile.active .tile-number {
    color: rgba(255, 255, 255, 0.6);
}

/* Conteneur VU-mètre */
#vu-meter-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligne la barre à gauche */
    
    /* En paysage, c'est une barre horizontale fine */
    width: 100%; 
    height: 20px; 
    
    background-color: #222;
    border: 2px solid #000;
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
    /* Pas de marge latérale en paysage, on remplit la largeur */
}

#vu-meter {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    opacity: 0.9;
}

#controls-grid-wrapper {
    display: flex; /* AJOUTE */
    flex-direction: column; /* AJOUTE */
    flex-shrink: 0; /* AJOUTE (ne grandit pas) */
    gap: 8px;
}

.control-tile {
    aspect-ratio: 4/1;
        
    display: flex;
    align-items: center;     /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    
    /* AJOUTS IMPORTANTS : */
    flex-direction: column; /* Empile le texte et le slider */
    gap: 8px; /* Un peu d'espace entre les deux */

    /* Style du texte */
    color: rgba(255, 255, 255, 0.9); /* Blanc légèrement transparent */
    font-family: monospace; /* Police "tech" */
    font-weight: bold;
    font-size: 1em;       /* Pas trop gros pour que ça rentre */
    text-align: center;     /* Sécurité si le texte est sur 2 lignes */
    user-select: none;      /* Empêche de sélectionner le texte à la souris */
}

.tile-label {
    font-size: 0.9em; /* Un peu plus petit */
    pointer-events: none; /* Empêche de cliquer sur le texte */
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* Lisibilité */
}

#sampler-grid-wrapper, #fx-grid-wrapper {
    display: flex;
    flex-direction: column; /* La barre de preset est au-dessus de la grille */
    gap: 8px; /* Espace entre preset et grille */
    border: 4px solid #000;
    background-color: #444;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-radius: 15px;
}
#sampler-grid, #fx-grid {
    display: grid;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    
    /* Chaque grille est en 6x1 */
    grid-template-columns: repeat(6, 1fr); 

    /* Styles visuels (repris de l'ancienne #controls-grid) */
}
/* * Style de TOUTES les tuiles (principales et contrôles)
*/
.tile, .control-tile {
    /* NOUVEAU : Nécessaire pour contenir la vague */
    position: relative;
    overflow: hidden; 

    border-radius: 8px;
    cursor: pointer;
    
    transition: background-color 0.1s ease-out, 
                transform 0.1s ease-out,
                box-shadow 0.1s ease-out;
}


/* Effet au clic (enfoncé) */
.tile:active, .control-tile:active {
    transform: scale(0.95); /* Effet "bouncy" */
}

/* * Style des 4 catégories de la grille principale
*/
.tile.category-1 { 
    background-color: #EF5350; /* Un rouge plus vif (ancien: #F44336) */
    border: 2px solid #E53935;  /* Une bordure assortie (ancien: #C62828) */
}

.tile.category-2 { 
    background-color: #FFC107; /* Un jaune "Or" / "Ambre" (ancien: #FFF176) */
    border: 2px solid #FFA000;  /* Une bordure assortie, plus foncée */
}

.tile.category-3 { background-color: #2196F3; border: 2px solid #1565C0; } /* Bleu */
.tile.category-4 { background-color: #4CAF50; border: 2px solid #2E7D32; } /* Vert */

/* * Style des tuiles de contrôle
*/
.control-tile.effect-tile   { background-color: #9C27B0; border: 2px solid #6A1B9A; } /* Violet */
.control-tile.sampler-tile { background-color: #795548; border: 2px solid #4E342E; } /* Marron */

/* * STYLE ACTIF (quand la boucle joue)
 * On éclaircit la tuile et on ajoute une ombre "glow"
*/
.tile.active {
    /* On enlève les anciens styles statiques (filter et transform) */
    
    /* NOUVEAU : On applique notre animation ! */
    animation-name: blink-pulse;
    animation-duration: 0.5s;       /* 120 BPM (60 / 120) */
    animation-iteration-count: infinite; /* Tourne en boucle */
    animation-timing-function: ease-in-out;
}

.tile.category-1.active { 
    box-shadow: 0 0 15px #EF5350; /* Assorti au nouveau rouge */
}
.tile.category-2.active { 
    box-shadow: 0 0 15px #FFC107; /* Assorti au nouveau jaune */
}

.tile.category-3.active { box-shadow: 0 0 15px #2196F3; }
.tile.category-4.active { box-shadow: 0 0 15px #4CAF50; }

/* * ========================================
 * STYLE ACTIF POUR LES CONTRÔLES (Sans clignotement)
 * ======================================== */

/* État général d'une tuile de contrôle active */
.control-tile.active {
    /* On éclaire la tuile (plus lumineux) */
    filter: brightness(1.3); 
    
    /* On la garde légèrement enfoncée pour montrer qu'elle est enclenchée */
    transform: scale(0.96); 
}

/* Glow spécifique pour les EFFETS (Violet) */
.control-tile.effect-tile.active {
    /* Lueur violette */
    box-shadow: 0 0 15px #BA68C8; 
    /* Bordure plus claire pour renforcer l'effet "allumé" */
    border-color: #E1BEE7; 
}

/* (Anticipation) Glow spécifique pour les SAMPLERS (Brun) */
.control-tile.sampler-tile.active {
    /* Lueur brune/orange */
    box-shadow: 0 0 15px #A1887F; 
    border-color: #D7CCC8;
}
/*  * ---------------------
    * MEDIA QUERIES
    * ---------------------
*/

@media (max-aspect-ratio: 1) {
    /* 2. Met les deux wrappers de grille côte à côte */
    #app-content-wrapper {
        flex-direction: row;
    }

    .component-header {
        flex-direction: column;
        gap: 7px;
    }

    .preset-bar {
        margin: unset;
    }

    /* 3. Passe la grille principale en 3x12 */
    #drum-machine {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(12, 1fr);
        grid-auto-flow: row;
    }
    #sampler-grid, #fx-grid {
        /* Passe les deux grilles en 1x6 */
        grid-template-columns: repeat(1, 1fr);
    }
    
    /* Dit aux wrappers de s'étirer */
    #sampler-grid-wrapper, #fx-grid-wrapper {
        flex-grow: 1;
    }
    /* 4. Passe la grille de contrôle en 1x12 */
    .control-tile {
        aspect-ratio: unset;
    }
    #sampler-grid, #fx-grid {
        flex-grow: 1;
    }
    /* 5. Gère le slider BPM */
    #bpm-slider-group-desktop {
        display: none; /* Cache le slider de bureau */
    }
    #bpm-overlay-btn-mobile {
        display: block; /* Montre le bouton mobile */
    } 
    /* Le VU-mètre devient une colonne verticale */
    #vu-meter-container {
        width: 20px;      /* Largeur fixe */
        height: auto;     /* Prend toute la hauteur disponible */
        min-height: 0;    /* Important pour Flexbox */
        align-self: stretch; /* S'étire de haut en bas */
        
        align-items: flex-end; /* Le dessin part du bas */
        margin: 0 8px;    /* Un peu d'espace entre les grilles */
    }      
}

/* * ========================================
 * EFFET "RIPPLE" (VAGUELETTE)
 * ======================================== */

.ripple {
    position: absolute;
    border-radius: 50%; /* C'est un cercle */
    
    /* La couleur : un blanc semi-transparent
       qui va s'additionner à la couleur de la tuile 
       pour donner un effet "plus clair" */
    background-color: rgba(255, 255, 255, 0.3);

    /* Commence tout petit (invisible) */
    transform: scale(0);
    
    /* L'animation qui va durer 1 seconde */
    animation: ripple-effect 1s ease-out;
}

/* L'animation elle-même */
@keyframes ripple-effect {
    /* À la fin de l'animation... */
    to {
        /* ...la vague s'est agrandie (pour couvrir la tuile) */
        transform: scale(3); 
        /* ...et est devenue totalement transparente */
        opacity: 0;
    }
}

/* * ========================================
 * ANIMATION DE CLIGNOTEMENT (BPM)
 * ======================================== */

@keyframes blink-pulse {
    /* "ON" - La tuile est normale */
    0% {
        filter: brightness(1);
        transform: scale(1);
    }
    
    /* "OFF" - Le milieu du battement */
    50% {
        filter: brightness(0.7); /* Plus sombre */
        transform: scale(0.97); /* Légèrement plus petite */
    }
    
    /* Retour à "ON" */
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

/* * ========================================
 * NOUVEAU: Overlay BPM
 * ======================================== */
#bpm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.bpm-overlay-content {
    background-color: #282c34;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 20px 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 70%; /* Prend 70% de la largeur du mobile */
}
.bpm-overlay-content label {
    font-size: 1.2em;
    color: #fff;
    text-align: center;
}
#bpm-slider-overlay {
    width: 100%; /* Le slider prend toute la place */
}
#close-bpm-overlay-btn {
    /* Style simple pour le bouton OK */
    padding: 10px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    border: 2px solid #555;
    background-color: #4CAF50; /* Vert */
    color: #fff;
    cursor: pointer;
}

/* Classe pour cacher/montrer l'overlay */
#bpm-overlay.overlay-hidden {
    display: none;
}

/* Ajout d'un style pour le nouveau bouton volume */
#volume-overlay-btn {
    font-size: 1.5em; /* Assorti au bouton REC */
    padding: 0px 10px;
    border-radius: 5px;
    border: 2px solid #555;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    transition: all 0.1s ease;
}
#volume-overlay-btn:hover {
    filter: brightness(1.2);
}

/* * ========================================
 * Overlay Volume
 * ======================================== */
#volume-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* On utilise la même classe "hidden" que l'overlay BPM */
#volume-overlay.overlay-hidden {
    display: none;
}

.volume-overlay-content {
    background-color: #282c34;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 80%; /* Prend 80% de la largeur du mobile */
    max-width: 400px; /* Mais pas plus de 400px de large */
    color: #fff;
}
.volume-overlay-content h3 {
    text-align: center;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.volume-slider-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.volume-slider-group label {
    flex-basis: 80px; /* Donne une largeur fixe au label */
    text-align: right;
    font-weight: bold;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.volume-slider-group input[type="range"] {
    flex-grow: 1; /* Le slider prend le reste de la place */
}

/* Style spécial pour le Master */
.master-volume label {
    font-size: 1.1em;
    color: #40E0D0; /* Turquoise */
}

#individual-volume-sliders-container {
    max-height: 250px; /* Limite la hauteur si bcp de tuiles */
    overflow-y: auto;  /* Ajoute un scroll si besoin */
    padding-right: 10px; /* Espace pour le scroll */
}

/* Bouton OK (copié de l'overlay BPM) */
#close-volume-overlay-btn {
    padding: 10px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    border: 2px solid #555;
    background-color: #4CAF50;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
}
/* Style pour le nouveau bouton Info */
#info-overlay-btn {
    font-size: 1.5em; /* Assorti aux autres */
    padding: 0px 10px;
    border-radius: 5px;
    border: 2px solid #555;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    transition: all 0.1s ease;
    align-self: center;
}
#info-overlay-btn:hover {
    filter: brightness(1.2);
}

/* * ========================================
 * Overlay Info
 * ======================================== */
#info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* On utilise la même classe "hidden" */
#info-overlay.overlay-hidden {
    display: none;
}

.info-overlay-content {
    background-color: #282c34;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 80%;
    max-width: 500px;
    color: #fff;
}
.info-overlay-content h3 {
    text-align: center;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

/* Style pour le conteneur <pre> du texte */
#info-content-container {
    background-color: #1a1a1a;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 15px;
    max-height: 40vh; /* Limite la hauteur */
    overflow-y: auto;  /* Ajoute un scroll */
    
    /* Garde le formatage du .txt */
    white-space: pre-wrap; 
    word-wrap: break-word;
    font-family: monospace; /* Police classique pour du code/texte */
    font-size: 0.9em;
}

/* Bouton OK */
#close-info-overlay-btn {
    padding: 10px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    border: 2px solid #555;
    background-color: #4CAF50;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
}

/* * ========================================
 * SLIDER DANS LA TUILE (DJ FILTER)
 * ======================================== */

/* Le slider lui-même (La barre) */
.tile-slider {
    /* Ces deux lignes sont OBLIGATOIRES pour customiser un slider */
    -webkit-appearance: none; 
    appearance: none; 
    
    width: 85%; 
    height: 6px; /* Un peu plus épais pour être plus visible */
    background: rgba(0, 0, 0, 0.5); /* Plus sombre pour le contraste */
    border-radius: 3px;
    outline: none;
    margin: 0; /* Évite les décalages */
    cursor: pointer;
    
    /* Astuce pour Safari/iOS : */
    opacity: 0.9; 
}

/* Le "bouton" du slider (Chrome, Safari, Edge, iOS) */
.tile-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Obligatoire ici aussi */
    appearance: none;
    
    width: 18px; /* Plus gros pour le doigt */
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333;
    cursor: pointer;
    margin-top: -1px; /* Micro-ajustement vertical si besoin */
    box-shadow: 0 2px 4px rgba(0,0,0,0.4); /* Petite ombre pour le relief */
}

/* Le "bouton" du slider (Firefox) */
.tile-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* * ========================================
 * SYSTÈME D'ALIMENTATION (POWER & STARTUP)
 * ======================================== */

/* --- 1. STYLE DU BOUTON POWER --- */
#power-btn {
    /* Dimensions et Police */
    font-size: 1rem;
    font-weight: bold;
    font-family: sans-serif;
    
    /* Forme de base */
    
    padding: 10px 20px;
    border-radius: 5px; /* CORRECTION : Carré arrondi comme les autres */
    border: 2px solid #333;
    
    /* Alignement */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.power-icon {
    width: 20px;
    height: 20px;
    display: block;
    margin: 0;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* --- ETAT ALLUMÉ (ON) --- */
body:not(.power-off) #power-btn {
    color: #fff;
    background-color: #4CAF50; /* Vert */
    border-color: #2E7D32;
    box-shadow: 0 0 15px #4CAF50; /* Glow vert */
    transform: translateY(-1px);
}
body:not(.power-off) .power-icon {
    filter: invert(1) brightness(100%); /* Blanc */
}

/* --- ETAT ÉTEINT (OFF / STANDBY) --- */
.power-off #power-btn {
    /* Style "Standby" */
    background-color: #3a0b0b; /* Fond Rouge très sombre */
    color: #ff5252; /* Texte Rouge vif */
    border-color: #ff5252;
    
    /* Glow rouge initial */
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.3);
    
    /* Animation de respiration */
    animation: standby-breath 2s infinite ease-in-out;
}

.power-off .power-icon {
    /* Filtre pour rendre l'icône noire -> Rouge vif (#ff5252) */
    filter: invert(49%) sepia(66%) saturate(2332%) hue-rotate(331deg) brightness(103%) contrast(101%);
}

/* Animation de "Respiration" (Standby) */
@keyframes standby-breath {
    0% {
        box-shadow: 0 0 5px rgba(255, 82, 82, 0.2);
        transform: scale(1);
        filter: brightness(0.8);
    }
    50% {
        /* Pic de lumière */
        box-shadow: 0 0 20px rgba(255, 82, 82, 0.6);
        transform: scale(1.02);
        filter: brightness(1.2);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 82, 82, 0.2);
        transform: scale(1);
        filter: brightness(0.8);
    }
}

/* --- 2. ÉTAT "ÉTEINT" GLOBAL (.power-off) --- */

/* Quand le body est éteint, on cible TOUT ce qui doit être gris */
.power-off .tile, 
.power-off .control-tile,
.power-off .preset-btn,       /* Les boutons 1, 2, 3... */
.power-off .component-label,  /* Les étiquettes Loop, FX... */
.power-off .bpm-control,
.power-off #volume-overlay-btn, /* Le bouton volume */
.power-off #record-btn,         /* Le bouton record */
.power-off #info-overlay-btn    /* Le bouton info */ {
    opacity: 0.3; 
    filter: grayscale(100%); 
    pointer-events: none; 
    transition: opacity 0.5s ease;
}

/* EXCEPTION : Le bouton Power doit rester visible et coloré ! */
.power-off #power-btn {
    opacity: 1;     /* Force la visibilité */
    filter: none;   /* Pas de gris */
    pointer-events: auto; /* Cliquable */
    cursor: pointer;
    border-color: #F44336;
    color: #F44336;
}

/* --- NOUVEAU : CLASSE POUR "RÉVEILLER" UN ÉLÉMENT --- */
/* Cette classe sera ajoutée par le JS pendant l'animation de démarrage
   pour rendre la couleur à un groupe spécifique avant la fin du chargement */
.element-on {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.1s ease-in;
}

/* --- MAINTIEN DE LA COULEUR --- */
/* Ces règles forcent la couleur (sans !important) pour ne pas bloquer l'animation */

/* Pour les grilles principales */
.power-off #drum-machine.element-on, 
.power-off #sampler-grid.element-on,
.power-off #fx-grid.element-on {
    filter: grayscale(0%);
}

/* Pour les headers et contrôles */
.power-off .preset-header.element-on,
.power-off .bpm-control.element-on,
.power-off #volume-overlay-btn.element-on,
.power-off #record-btn.element-on,
.power-off #info-overlay-btn.element-on {
    filter: grayscale(0%);
}

/* --- 3. SÉQUENCE DE DÉMARRAGE (ANIMATION) --- */

/* Cette classe sera ajoutée temporairement aux tuiles pendant le boot */
.startup-anim {
    animation: power-up-flash 0.4s ease-out forwards;
}

@keyframes power-up-flash {
    0% { 
        filter: grayscale(0%) brightness(0.5); 
        transform: scale(1); 
    }
    50% { 
        /* Le Flash : Coloré, Brillant, Saturé */
        filter: grayscale(0%) brightness(2) saturate(1.5); 
        transform: scale(1.05); 
        background-color: #fff; 
    } 
    100% { 
        filter: grayscale(0%) brightness(1); 
        transform: scale(1); 
    }
}

/* Séquençage par délai (L'effet "Vague") */
/* On cible les catégories pour les allumer groupe par groupe */

/* Groupe 1 : Rouge (Immédiat) */
.tile.category-1.startup-anim { animation-delay: 0.1s; }

/* Groupe 2 : Jaune (+0.1s) */
.tile.category-2.startup-anim { animation-delay: 0.2s; }

/* Groupe 3 : Bleu (+0.2s) */
.tile.category-3.startup-anim { animation-delay: 0.3s; }

/* Groupe 4 : Vert (+0.3s) */
.tile.category-4.startup-anim { animation-delay: 0.4s; }

/* Contrôles : Effets & Samplers (À la fin) */
.control-tile.startup-anim { animation-delay: 0.6s; }

/* * ========================================
 * BARRE DE PROGRESSION (LEDs)
 * ======================================== */

.progress-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: rotate(-90deg);
    z-index: 5;
}

/* Le cercle de progression (Barre Rouge) */
.progress-bar {
    fill: none;
    stroke: #FF1744; /* ROUGE NÉON */
    stroke-width: 4;
    stroke-linecap: round;
    
    /* SUPPRIME la ligne "transition: stroke-dashoffset..." */
    /* La transition CSS empêche le JS de faire une animation fluide frame par frame */
    
    filter: drop-shadow(0 0 2px #FF1744);
    
    /* On tourne la barre pour qu'elle commence en haut */
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

/* Ajout pour le fond */
.progress-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.3);
    stroke-width: 4;
    /* On tourne aussi le fond pour que les espaces soient alignés */
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}