/* ===== 6-DIAGRAMMES.CSS ===== */
/* 🎸 Tout le contenu INTÉRIEUR pour guitare/ukulélé/charango */
/* 📦 Compatible mode générateur ET mode dictionnaire */

/* ========================================
   GRILLE DE POSITIONNEMENT
   La grille qui organise les cartes
   ======================================== */

.positions-container,
.diagrams-grid,
.diagrams-container {
    display: grid;
    width: fit-content;
    margin: 0 auto;
    gap: var(--guitare-grid-gap, var(--gap-lg));
    grid-template-columns: repeat(auto-fit, minmax(var(--guitare-card-width, 18rem), max-content));
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* Adaptation par instrument */
.content-display-area-ukulele .positions-container,
body[data-current-instrument="ukulele"] .diagrams-grid,
body[data-current-instrument="ukulele"] .diagrams-container {
    grid-template-columns: repeat(auto-fit, minmax(var(--ukulele-card-width, 16rem), max-content));
    gap: var(--ukulele-grid-gap, var(--gap-lg));
}

.content-display-area-charango .positions-container,
body[data-current-instrument="charango"] .diagrams-grid,
body[data-current-instrument="charango"] .diagrams-container {
    grid-template-columns: repeat(auto-fit, minmax(var(--charango-card-width, 16rem), max-content));
    gap: var(--charango-grid-gap, var(--gap-lg));
}

/* ========================================
   CARTES DIAGRAMMES
   ======================================== */

.diagram-card {
    /* Apparence */
    background: var(--fond-creme);
    border: var(--bordure-normale) solid var(--bordure-claire);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-md);
    overflow: hidden;
    
    /* Dimensions par défaut (guitare) */
    width: var(--guitare-card-width, clamp(17rem, 28vw, 20rem));
    height: auto;
    aspect-ratio: 3.9 / 4.2;
    padding: var(--guitare-card-padding, var(--padding-lg));
    max-width: 100%;
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    position: relative;
    
    /* Interactions */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    
    /* Performance */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Dimensions par instrument */
.content-display-area-ukulele .diagram-card,
body[data-current-instrument="ukulele"] .diagram-card {
    width: var(--ukulele-card-width, clamp(16rem, 24vw, 18rem));
    aspect-ratio: 3 / 3.9;
    padding: var(--ukulele-card-padding, var(--padding-md));
}

.content-display-area-charango .diagram-card,
body[data-current-instrument="charango"] .diagram-card {
    width: var(--charango-card-width, clamp(16rem, 24vw, 18rem));
    aspect-ratio: 3 / 3.9;
    padding: var(--charango-card-padding, var(--padding-md));
}

/* ========================================
   EFFETS HOVER
   ======================================== */

.diagram-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--ombre-lg);
    border-color: var(--bordure-principale);
    will-change: auto;
}

.diagram-card:active {
    transform: translateY(0);
}

/* ========================================
   IMAGES DIAGRAMMES
   ======================================== */

.diagram-card img,
.diagram-image {
    display: block;
    width: 130%;
    height: 130%;
    object-fit: contain;
    margin: 0 auto;
    vertical-align: middle;
}

/* ========================================
   LABELS POSITIONS
   ======================================== */

.position-label {
    text-align: center;
    font-weight: var(--poids-bold);
    color: var(--couleur-primaire-foncee);
    margin-top: var(--margin-xs);
    margin-bottom: 0;
    font-size: var(--texte-lg);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    background: transparent;
    padding: 0;
    display: block;
    line-height: var(--hauteur-ligne-serree);
}

/* ========================================
   TOOLTIP HOVER (DESKTOP)
   ======================================== */

.diagram-card::after {
    content: '🔍 Cliquer pour agrandir';
    position: absolute;
    bottom: 0.9375rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(107, 107, 0, 0.95);
    color: var(--texte-blanc);
    padding: var(--padding-xs) 0.875rem;
    border-radius: var(--rayon-md);
    font-size: 0.6875rem;
    font-weight: var(--poids-semi-bold);
    opacity: 0;
    transition: opacity var(--transition-normale);
    pointer-events: none;
    white-space: nowrap;
    z-index: var(--z-normal);
}

.diagram-card:hover::after {
    opacity: 1;
}

/* 🚫 MASQUER TOOLTIP EN MODE DICTIONNAIRE (pas de zoom disponible) */
/* Cible uniquement les pages avec data-current-note ET data-current-quality */
body[data-current-note][data-current-quality] .diagram-card::after {
    display: none;
}

/* Ou alternativement : masquer dans .diagrams-section (mode dictionnaire uniquement) */
.diagrams-section .diagram-card::after {
    display: none;
}

/* ========================================
   MESSAGE POSITION INDISPONIBLE
   ======================================== */

.position-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--texte-tertiaire);
    text-align: center;
    padding: var(--padding-xl);
    min-height: var(--min-hauteur-diagramme);
}

.position-unavailable i {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: var(--margin-sm);
    opacity: 0.5;
}

.position-unavailable p {
    margin: 0;
    font-size: var(--texte-md);
    font-weight: var(--poids-medium);
}

/* ========================================
   MESSAGE "AUCUN DIAGRAMME" (MODE DICTIONNAIRE)
   ======================================== */

.diagrams-container .no-diagrams {
    color: var(--texte-tertiaire);
    font-style: italic;
    text-align: center;
    padding: 3rem 1rem;
    width: 100%;
    font-size: var(--texte-lg);
}

/* ========================================
   📱 RESPONSIVE - MOBILE : CARTES RÉDUITES
   ======================================== */

@media (max-width: 47.9375rem) {
    /* 📊 Grille mobile : 1 colonne */
    .positions-container,
    .diagrams-grid,
    .diagrams-container {
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: var(--gap-md);
        justify-items: center;
    }
    
    /* 📉 CARTES RÉDUITES pour mobile */
    .diagram-card {
        /* 🎯 Taille réduite : 14-18rem au lieu de 16-28rem */
        width: clamp(14rem, 80vw, 18rem);
        max-width: 100%;
        padding: var(--padding-sm);
        
        /* Aspect ratio légèrement ajusté */
        aspect-ratio: 3.8 / 4.1;
    }
    
    /* Ukulélé mobile */
    .content-display-area-ukulele .diagram-card,
    body[data-current-instrument="ukulele"] .diagram-card {
        width: clamp(13rem, 75vw, 16rem);
        aspect-ratio: 2.9 / 3.8;
        padding: var(--padding-xs);
    }
    
    /* Charango mobile */
    .content-display-area-charango .diagram-card,
    body[data-current-instrument="charango"] .diagram-card {
        width: clamp(13rem, 75vw, 16rem);
        aspect-ratio: 2.9 / 3.8;
        padding: var(--padding-xs);
    }
    
    /* 🖼️ Images adaptées */
    .diagram-card img,
    .diagram-image {
        width: 125%;
        height: 125%;
    }
    
    /* 📝 Labels plus petits */
    .position-label {
        font-size: var(--texte-base);
        margin-top: 0.25rem;
    }
    
    /* 🚫 Tooltip caché en mobile (touch device) */
    .diagram-card::after {
        display: none;
    }
}

/* ========================================
   RESPONSIVE - TABLETTE
   ======================================== */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .positions-container,
    .diagrams-grid,
    .diagrams-container {
        grid-template-columns: repeat(auto-fit, minmax(16rem, max-content));
        gap: 1.75rem;
    }
}

/* ========================================
   RESPONSIVE - DESKTOP LARGE
   ======================================== */

@media (min-width: 80rem) {
    .positions-container,
    .diagrams-grid,
    .diagrams-container {
        max-width: 1600px;
    }
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

.diagram-card:focus-within {
    outline: 3px solid var(--couleur-primaire);
    outline-offset: 2px;
}

/* ========================================
   PRÉFÉRENCE MOUVEMENT RÉDUIT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .diagram-card,
    .diagram-card::after {
        transition: none;
    }
    
    .diagram-card:hover {
        transform: none;
    }
}

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

@media print {
    .diagram-card {
        border: var(--bordure-fine) solid #ccc;
        box-shadow: none;
        page-break-inside: avoid;
        width: 100%;
        height: auto;
        max-width: none;
        padding: var(--padding-sm);
    }
    
    .diagram-card::after {
        display: none;
    }
    
    .diagram-card:hover {
        transform: none;
        box-shadow: none;
    }
    
    .positions-container,
    .diagrams-grid,
    .diagrams-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ========================================
   TOUCH DEVICES (CACHE TOOLTIP)
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    .diagram-card::after {
        display: none;
    }
}