/* style.css - Version Finale avec Police Uthmanic Hafs */

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

/* Ajout de la police officielle du Coran (KFGQPC Uthmanic Hafs) */
@font-face {
    font-family: 'UthmanicHafs';
    src: url('https://fonts.quran.com/fonts/quran/hafs/v1/woff2/KFGQPC_Uthmanic_Script_HAFS_Regular.woff2') format('woff2'),
         url('https://fonts.quran.com/fonts/quran/hafs/v1/woff/KFGQPC_Uthmanic_Script_HAFS_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- RÉGLAGES GÉNÉRAUX --- */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- TYPOGRAPHIE --- */
.quran-text {
    font-family: 'UthmanicHafs', serif;
    line-height: 2.5; /* Augmenté pour éviter que les diacritiques ne se touchent */
    word-spacing: 0.15em; /* Aère la lecture entre chaque mot */
}

/* --- GESTION DES TAILLES DE TEXTE --- */

/* 1. TAILLE NORMALE (Légèrement augmentée pour compenser la police Hafs) */
html[data-size="normal"] .quran-text { font-size: 2rem; }
html[data-size="normal"] .translation-text { font-size: 1.125rem; line-height: 1.75rem; }

/* 2. TAILLE GRANDE */
html[data-size="large"] .quran-text { font-size: 2.6rem; }
html[data-size="large"] .translation-text { font-size: 1.5rem; line-height: 2rem; }

/* 3. TAILLE TRÈS GRANDE */
html[data-size="xl"] .quran-text { font-size: 3.2rem; }
html[data-size="xl"] .translation-text { font-size: 2rem; line-height: 2.5rem; }

/* Ajustement Mobile */
@media (max-width: 640px) {
    html[data-size="normal"] .quran-text { font-size: 1.7rem; }
    html[data-size="large"] .quran-text { font-size: 2.2rem; }
    html[data-size="xl"] .quran-text { font-size: 2.7rem; }
}

/* --- VERSET EN COURS DE LECTURE --- */
.playing-verse {
    /* IMPORTANT : On ne met PAS de background-color ici.
       Les couleurs sont gérées par les classes Tailwind (bg-emerald-100 / dark:bg-emerald-900)
       ajoutées via le JavaScript pour éviter le flash blanc en mode sombre.
    */
    transform: scale(1.01);
    transition: transform 0.3s ease-in-out; /* On anime seulement la taille */
}

/* Force le background vert à avoir la priorité sur le hover */
.verse-container.playing-verse {
    background-color: rgb(209 250 229) !important; /* bg-emerald-100 */
}

.dark .verse-container.playing-verse {
    background-color: rgb(6 78 59) !important; /* dark:bg-emerald-900 */
}

/* Transition au survol des boutons */
button i {
    transition: transform 0.2s ease, color 0.2s ease;
}

button:hover i {
    transform: scale(1.1);
}

/* --- STYLES POUR LES FAVORIS --- */
.favorite-btn {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.favorite-btn:hover {
    transform: scale(1.2);
}

.favorite-btn:active {
    transform: scale(0.9);
}

/* --- STYLES POUR L'ACCORDÉON --- */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}