/* ===== BOUTONS-SYMETRIQUES.CSS ===== */
/* 🎯 Gère les deux boutons symétriques : Switch Mode et Switch Altérations */

/* ========================================
   WRAPPER COMMUN
   ======================================== */

.control-zone-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem auto 0;
}

/* Dans les pages bibliothèque, le panneau à gauche et le switch proche à droite */
body[data-current-note] .control-zone-wrapper {
    justify-content: center;
    gap: 1rem;
    max-width: calc(100% - 0rem);
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* S'assurer que le control-zone n'a pas de margin qui décale */
.control-zone-wrapper > .control-zone {
    margin: 0;
}

/* Dans les pages bibliothèque, le panneau prend l'espace disponible */
body[data-current-note] .navigation-panel {
    flex: 1;
    margin: 0;
}

/* ========================================
   STYLES COMMUNS AUX DEUX SWITCHES
   ======================================== */

.mode-switch-vertical,
.alteration-switch-vertical {
    position: relative;
    width: 3.5rem;
    height: 8rem;
    background: #e0d5a0;
    border: 3px solid var(--bordure-principale);
    border-radius: 2rem;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    transition: all var(--transition-normale);
    flex-shrink: 0;
    box-shadow: var(--ombre-md);
}

.mode-switch-vertical:hover,
.alteration-switch-vertical:hover {
    box-shadow: var(--ombre-lg);
}

/* ========================================
   SWITCH MODE (à droite)
   ======================================== */

/* Ligne séparation */
.mode-switch-vertical::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: var(--bordure-principale);
    opacity: 0.3;
}

/* Indicateur qui glisse */
.mode-switch-vertical::before {
    content: '';
    position: absolute;
    width: calc(100% - 0.5rem);
    height: 3.2rem;
    background: var(--couleur-primaire);
    border-radius: 1.5rem 1.5rem 0.3rem 0.3rem;
    top: 0.25rem;
    left: 0.25rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(128, 128, 0, 0.3);
}

/* Position basse - avec inversion des côtés arrondis */
.mode-switch-vertical[data-active-mode="dictionary"]::before {
    transform: translateY(3.95rem);
    border-radius: 0.3rem 0.3rem 1.5rem 1.5rem;
}

/* Boutons du switch mode */
.mode-switch-btn {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    pointer-events: none;
}

.mode-switch-btn i {
    font-size: 1.25rem;
    color: #666;
    transition: color 0.3s ease;
}

.mode-switch-btn span {
    display: none;
}

/* Icône active = blanche */
.mode-switch-vertical[data-active-mode="generator"] .mode-switch-btn:first-child i,
.mode-switch-vertical[data-active-mode="dictionary"] .mode-switch-btn:last-child i {
    color: white;
}

/* Icône inactive = grisée */
.mode-switch-vertical[data-active-mode="generator"] .mode-switch-btn:last-child,
.mode-switch-vertical[data-active-mode="dictionary"] .mode-switch-btn:first-child {
    opacity: 0.5;
}

/* ========================================
   SWITCH ALTERATIONS (à gauche)
   ======================================== */

/* Indicateur de position glissant (3 positions) */
.alteration-switch-vertical::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: calc(100% - 0.5rem);
    height: 2.1rem;
    background: var(--couleur-primaire);
    border-radius: 1.5rem 1.5rem 0.3rem 0.3rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(128, 128, 0, 0.3);
    z-index: 1;
}

/* Positions de l'indicateur avec inversion des bords arrondis */
.alteration-switch-vertical[data-active-alteration="flat"]::before {
    transform: translateY(0);
    border-radius: 1.5rem 1.5rem 0.3rem 0.3rem;
}

.alteration-switch-vertical[data-active-alteration="natural"]::before {
    transform: translateY(2.55rem);
    border-radius: 0.3rem;
}

.alteration-switch-vertical[data-active-alteration="sharp"]::before {
    transform: translateY(5.07rem);
    border-radius: 0.3rem 0.3rem 1.5rem 1.5rem;
}

/* Deux lignes séparatrices horizontales (à 33% et 66%) */
.alteration-switch-vertical::after {
    content: '';
    position: absolute;
    top: 33.33%;
    left: 0.5rem;
    right: 0.5rem;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--bordure-principale) 20%,
        var(--bordure-principale) 80%,
        transparent
    );
    opacity: 0.5;
    pointer-events: none;
}

.alteration-separator {
    position: absolute;
    top: 66.66%;
    left: 0.5rem;
    right: 0.5rem;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--bordure-principale) 20%,
        var(--bordure-principale) 80%,
        transparent
    );
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* Boutons altérations */
.alteration-switch-btn {
    width: 100%;
    height: 2.33rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    pointer-events: none;
}

.alteration-symbol {
    font-size: 1.25rem;
    font-weight: var(--poids-bold);
    color: var(--texte-secondaire);
    transition: color 0.3s ease;
    line-height: 1;
}

/* État actif : texte blanc */
.alteration-switch-vertical[data-active-alteration="flat"] .alteration-switch-btn[data-alteration="flat"] .alteration-symbol,
.alteration-switch-vertical[data-active-alteration="natural"] .alteration-switch-btn[data-alteration="natural"] .alteration-symbol,
.alteration-switch-vertical[data-active-alteration="sharp"] .alteration-switch-btn[data-alteration="sharp"] .alteration-symbol {
    color: var(--texte-blanc);
}

/* ========================================
   VISIBILITÉ MODES - AVEC ANIMATIONS
   ======================================== */

.generator-controls,
.dictionary-controls {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.generator-controls.active,
.dictionary-controls.active {
    display: block;
    animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   📱 MOBILE - SWITCHES HORIZONTAUX
   ======================================== */

@media (max-width: 47.9375rem) {
    /* 🎯 Wrapper : switches en ligne, panneau en dessous */
    .control-zone-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0 auto;
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* 📏 Container des switches horizontaux */
    .switches-horizontal-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.5rem 0;
    }
    
    /* 🔄 TRANSFORMATION : Switches verticaux → horizontaux */
    .mode-switch-vertical,
    .alteration-switch-vertical {
        /* Dimensions horizontales réduites */
        width: auto;
        min-width: 120px;
        height: 2.5rem;
        
        /* Layout horizontal */
        flex-direction: row;
        gap: 0.2rem;
        
        /* Bordure arrondie latérale */
        border-radius: 1.25rem;
        padding: 0.2rem;
    }
    
    /* 🎨 SWITCH ALTÉRATIONS (à gauche) */
    .alteration-switch-vertical {
        order: 1;
    }
    
    /* Indicateur glissant horizontal (3 positions) - CORRIGÉ */
    .alteration-switch-vertical::before {
        width: 1.8rem;
        height: calc(100% - 0.4rem);
        top: 0.2rem;
        left: 0.2rem;
        border-radius: 1rem 0.25rem 0.25rem 1rem;
    }
    
    .alteration-switch-vertical[data-active-alteration="flat"]::before {
        transform: translateX(0);
        border-radius: 1rem 0.25rem 0.25rem 1rem;
    }
    
    .alteration-switch-vertical[data-active-alteration="natural"]::before {
        transform: translateX(2.5rem);
        border-radius: 0.25rem;
    }
    
    .alteration-switch-vertical[data-active-alteration="sharp"]::before {
        transform: translateX(4.8rem);
        border-radius: 0.25rem 1rem 1rem 0.25rem;
    }
    
    /* Lignes séparatrices verticales */
    .alteration-switch-vertical::after,
    .alteration-separator {
        width: 1px;
        height: 60%;
        top: 20%;
        left: auto;
        right: auto;
        background: linear-gradient(
            to bottom,
            transparent,
            var(--bordure-principale) 20%,
            var(--bordure-principale) 80%,
            transparent
        );
    }
    
    .alteration-switch-vertical::after {
        left: 33.33%;
    }
    
    .alteration-separator {
        left: 66.66%;
    }
    
    /* Boutons altérations horizontaux */
    .alteration-switch-btn {
        width: 2rem;
        height: 100%;
    }
    
    .alteration-symbol {
        font-size: 1rem;
    }
    
    /* 🎨 SWITCH MODE (à droite) */
    .mode-switch-vertical {
        order: 2;
    }
    
    /* Indicateur glissant horizontal (2 positions) - CORRIGÉ */
    .mode-switch-vertical::before {
        width: 2.9rem;
        height: calc(100% - 0.4rem);
        top: 0.2rem;
        left: 0.2rem;
        border-radius: 1rem 0.25rem 0.25rem 1rem;
    }
    
    .mode-switch-vertical[data-active-mode="dictionary"]::before {
        transform: translateX(3.8rem);
        border-radius: 0.25rem 1rem 1rem 0.25rem;
    }
    
    /* Ligne séparatrice verticale */
    .mode-switch-vertical::after {
        width: 1px;
        height: 60%;
        top: 20%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        background: linear-gradient(
            to bottom,
            transparent,
            var(--bordure-principale) 20%,
            var(--bordure-principale) 80%,
            transparent
        );
    }
    
    /* Boutons mode horizontaux */
    .mode-switch-btn {
        width: 3rem;
        height: 100%;
    }
    
    .mode-switch-btn i {
        font-size: 1rem;
    }
    
    /* 📦 Panneau de contrôle en dessous */
    .control-zone,
    .navigation-panel {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* ✅ AJOUTE ICI - Correction alignement icônes */
    /* Décaler UNIQUEMENT le bécarre (position centrale) */
    .alteration-switch-btn[data-alteration="natural"] .alteration-symbol {
        transform: translateX(0.2rem);
    }
    
    /* Décaler UNIQUEMENT le dièse (position droite) */
    .alteration-switch-btn[data-alteration="sharp"] .alteration-symbol {
        transform: translateX(0.22rem);
    }
    
    /* Décaler UNIQUEMENT l'icône dictionnaire (position droite) */
    .mode-switch-btn[data-mode="dictionary"] i {
        transform: translateX(0.4rem);
    }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    .mode-switch-vertical,
    .alteration-switch-vertical {
        display: none;
    }
}