/* ==========================================================================
   SOMMAIRE
   1.  RESET & VARIABLES (:root)
   2.  BASE (Body, Liens, Typo)
   3.  UTILITAIRES (Container, Titres)
   4.  COMPOSANTS (Boutons, Cartes, Inputs)
   5.  HEADER & NAVIGATION (Fixe + Glassmorphism)
   6.  PAGES SPÉCIFIQUES (Accueil, Tutos, Quiz)
   7.  FOOTER (Préservé)
   8.  RESPONSIVE (Mobile)
   ========================================================================== */

/* ==========================================================================
   1. RESET & VARIABLES
   ========================================================================== */

/* INDISPENSABLE : Corrige le problème de décalage et d'écran coupé à droite */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* --- COULEURS --- */
    --primary: #0071e3;         /* Bleu Apple Principal */
    --secondary: #86868B;       /* Gris Texte */
    --dark: #1D1D1F;            /* Noir Apple (Utilisé pour le footer) */
    
    /* --- THEME JOUR --- */
    --bg-app: #F5F5F7;          /* Gris fond */
    --bg-card: #FFFFFF;         /* Blanc cartes */
    --bg-glass: rgba(255, 255, 255, 0.85); /* Flou Header */
    --text-main: #1D1D1F;
    --text-secondary: #86868B;
    --border: rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    
    /* --- DIMENSIONS --- */
    --header-height: 60px;
    --radius: 20px;
}

/* Empêche le contenu de descendre trop bas après le header */
main > *:first-child {
    padding-top: 30px !important; /* Petit espace de sécurité seulement */
}

/* Cas spécifique pour les conteneurs (Page Compte, etc.) */
.container {
    padding-top: 20px !important; /* Remplace les gros paddings par défaut */
}

/* Cas spécifique pour les titres de page s'ils sont en premier */
h1, h2, h3 {
    margin-top: 0 !important;
}

/* --- THEME NUIT --- */
[data-theme="dark"] {
    --bg-app: #000000;
    --bg-card: #1C1C1E;
    --bg-glass: rgba(28, 28, 30, 0.85);
    --text-main: #F5F5F7;
    --text-secondary: #A1A1A6;
    --border: rgba(255, 255, 255, 0.15);
    --shadow: none;
    --dark: #000000; /* Adaptation du footer en mode nuit */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
    width: 100%;
   /* padding-top: var(--header-height); /* Cale pour le header fixe */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Pousse le footer en bas si la page est vide */
    width: 100%;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
button { font-family: inherit; }

/* ==========================================================================
   3. UTILITAIRES
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;    /* Centre le bloc */
    padding: 0 20px;   /* Marges internes de sécurité */
}

/* Titres */
h1, h2, h3 {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-main);
}

.page-title { text-align: center; margin-bottom: 40px; }
.section-label {
    max-width: 1200px; margin: 30px auto 10px auto;
    padding: 0 20px;
    font-size: 1.2rem; font-weight: 700;
    color: var(--text-main);
}

/* ==========================================================================
   4. COMPOSANTS
   ========================================================================== */

/* Boutons */
.btn-primary {
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-block;
}
.btn-primary:active { transform: scale(0.98); opacity: 0.9; }

/* Inputs */
.form-input {
    width: 100%; padding: 12px 15px;
    background: var(--bg-app);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 1rem; color: var(--text-main);
    outline: none;
}
.form-input:focus { background: var(--bg-card); border-color: var(--primary); }

/* Cartes Widgets (Swipe Carrés) */
.widget-card {
    flex: 0 0 140px; height: 140px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 15px;
    display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    scroll-snap-align: center;
    position: relative;
    overflow: hidden;
}
.w-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem;
}
/* Couleurs Gradients */
.g-blue { background: linear-gradient(135deg, #0071e3, #4c9eff); }
.g-orange { background: linear-gradient(135deg, #ff9500, #ffb340); }
.g-green { background: linear-gradient(135deg, #34c759, #6dd485); }
.g-purple { background: linear-gradient(135deg, #af52de, #c881eb); }

.w-title { font-size: 0.9rem; font-weight: 600; color: var(--text-main); margin-bottom: 2px;}
.w-sub { font-size: 0.75rem; color: var(--text-secondary); }

/* Cartes Rectangulaires (Cours) */
.rect-card {
    flex: 0 0 280px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 15px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    scroll-snap-align: center;
}
.rect-content h3 { font-size: 1rem; color: var(--text-main); margin-bottom: 4px; }
.rect-content p { font-size: 0.85rem; color: var(--text-secondary); }

/* ==========================================================================
   5. HEADER & NAVIGATION (CORRIGÉ & ALIGNÉ)
   ========================================================================== */


/* ==========================================================================
   21. HEADER SCROLL EFFECT (GLASSMORPHISM)
   ========================================================================== */

/* ÉTAT PAR DÉFAUT (En haut de page) : Solide */
#main-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 60px; /* Ou var(--header-height) */
    z-index: 9000;
    
    /* Fond solide par défaut (Blanc jour / Gris nuit) */
    background-color: var(--bg-card); 
    border-bottom: 1px solid var(--border);
    
    /* Transition douce */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ÉTAT SCROLLÉ : Transparent + Flou (Effet "Fondu") */
#main-header.scrolled {
    /* Fond semi-transparent */
    background-color: rgba(255, 255, 255, 0.7); 
    
    /* LE FLOU MAGIQUE (Glassmorphism) */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Bordure plus subtile */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    
    /* Optionnel : réduire un peu la hauteur au scroll pour gagner de la place */
    height: 60px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

/* Ajustement spécifique MODE NUIT pour l'effet verre */
[data-theme="dark"] #main-header.scrolled {
    background-color: rgba(28, 28, 30, 0.7); /* Gris foncé transparent */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Conteneur interne pour aligner le contenu avec le reste du site */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
}

/* LOGO */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 38px; width: auto; transition: filter 0.4s ease;}
.logo-text { font-size: 1.3rem; font-weight: 600; color: var(--text-main); letter-spacing: -0.5px; }

/* === L'ASTUCE DARK MODE === */
/* Quand le corps a l'attribut data-theme="dark", on inverse les couleurs de l'image */
[data-theme="dark"] .logo-img {
    /* filter: invert(1); -> Transforme le noir en blanc */
    /* brightness(2); -> Rend le blanc bien éclatant */
    filter: invert(1) brightness(2);
}

/* DROITE (Menu + Boutons) */
.header-right { display: flex; align-items: center; gap: 10px; }

/* Navigation Desktop */
.nav-desktop { display: flex; gap: 20px; margin-right: 15px; }
.nav-desktop a {
    font-weight: 600; font-size: 0.95rem; color: var(--text-secondary);
}
.nav-desktop a:hover, .nav-desktop a.active { color: var(--primary); }

/* Boutons Actions (Lune / Burger) */
.icon-btn {
    background: transparent;
    border: none;
    width: 44px; height: 44px; /* Zone tactile Apple */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.2s;
}
.icon-btn i { font-size: 1.2rem; }
.icon-btn:active { background: rgba(128,128,128,0.1); }

.hamburger { display: none; } /* Caché sur PC */

/* Menu Mobile Déroulant */
.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0; width: 100%;
    background: var(--bg-card);
    padding: 20px;
    display: none; /* JS bascule en flex */
    flex-direction: column;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    z-index: 999;
}
.mobile-menu.active { display: flex; animation: slideDown 0.3s; }
.mobile-menu a {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    font-weight: 600; color: var(--text-main);
}

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

/* ==========================================================================
   6. PAGES SPÉCIFIQUES
   ========================================================================== */

/* Hero Accueil (Style Apple) */
.ios-hero {
    text-align: center;
    padding: 0px 20px 30px 20px;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .ios-hero {
margin-top:5rem;
    }
}

/* ✅ NOUVEAU : Classe de surcharge pour la page cours */
.ios-hero.compact {
    padding-bottom: 10px; /* Réduit l'espace sous le sous-titre */
    margin-bottom: 0;
}

.ios-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800; margin-bottom: 10px;
}
.ios-hero p {
    font-size: 1.1rem; color: var(--text-secondary);
    margin-bottom: 25px;
}


/* ==========================================================================
   6. FICHE TUTO "GLASSY PREMIUM"
   ========================================================================== */

/* --- BODY & ANIMATIONS --- */
.tuto-body {
    background-color: #f2f2f7; /* Gris iOS très clair */
    color: #1c1c1e;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Animation d'entrée fluide */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modifiez ou ajoutez ceci dans votre section 6 */
.tuto-container {
    max-width: 700px;
    margin: 0 auto;
    /* On met 100px pour que le contenu commence bien en dessous du Header fixe */
    padding: 0px 20px 60px 20px; 
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 1. NAV FLOTTANTE (Fixe & Visible) --- */
.glass-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: rgba(255, 255, 255, 0.85); /* Fond laiteux */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    z-index: 99999; /* Toujours au-dessus de tout */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.nav-content {
    width: 100%; max-width: 700px; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
}

.nav-btn-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,0.05); border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #007AFF; cursor: pointer;
    transition: background 0.2s;
}
.nav-btn-circle:hover { background: rgba(0,0,0,0.1); }

.nav-title {
    font-weight: 600; font-size: 1rem; color: #1c1c1e;
    opacity: 0.9;
}

/* --- 2. HEADER ARTICLE --- */
.course-header { text-align: center; margin-bottom: 30px; }

.badge-pill {
    display: inline-block; padding: 6px 14px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    background: #e5e5ea; color: #8e8e93; margin-bottom: 15px;
}
.badge-pill.blue { background: #E3F2FD; color: #007AFF; }

#tuto-title {
    font-size: 2.2rem; font-weight: 800; line-height: 1.1;
    margin-bottom: 15px; letter-spacing: -0.5px;
}

.meta-info {
    display: flex; justify-content: center; gap: 20px;
    color: #8e8e93; font-size: 0.9rem; font-weight: 500;
}
.xp-pill { color: #FF9500; background: #FFF4D6; padding: 2px 8px; border-radius: 6px; font-weight: 700; }

/* --- 3. BLOCS & CARTES (Glassy) --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

/* Image Hero */
.hero-img-container {
    width: 100%; border-radius: 24px; overflow: hidden;
    margin-bottom: 30px; aspect-ratio: 16/9;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.hero-img-container img { width: 100%; height: 100%; object-fit: cover; }

/* --- 4. ÉTAPES NUMÉROTÉES --- */
.step-item {
    display: flex; gap: 20px; margin-bottom: 0px;
    position: relative;
}
.step-item:last-child { margin-bottom: 0; }

/* Le numéro iOS style */
.step-num {
    flex: 0 0 36px; height: 36px;
    background: linear-gradient(135deg, #007AFF, #00C7BE);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0,122,255,0.3);
    z-index: 2;
}


.step-content h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.step-content p { font-size: 1rem; line-height: 1.6; color: #3a3a3c; }
.step-img {
    margin-top: 15px; border-radius: 16px; width: 100%; max-width: 300px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- 5. QUIZ (Boutons & Validation) --- */
.quiz-section { margin-top: 50px; }

.quiz-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px;
}
/* Style des boutons manquant précédemment */
.quiz-btn {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 16px;
    border-radius: 16px;
    font-size: 1rem; font-weight: 600; color: #1c1c1e;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.quiz-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.quiz-btn:active { transform: scale(0.96); }

/* États Validation */
.quiz-btn.success { background: #34C759; color: white; border-color: #34C759; }
.quiz-btn.error { background: #FF3B30; color: white; border-color: #FF3B30; animation: shake 0.4s; }

/* Message "Déjà Validé" */
.quiz-done-msg {
    text-align: center; padding: 40px;
    background: #F2FCF5; border: 1px solid #34C759;
    border-radius: 24px; color: #15803d;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Responsive */
@media (max-width: 600px) {
    .quiz-grid { grid-template-columns: 1fr; }
    .tuto-container { padding: 0px 20px 40px 20px; }
}

/* --- ACHIEVEMENT BAR (La Notification en bas) --- */
#achievement-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Caché en bas par défaut */
    
    background: #1e1e1e; /* Fond sombre "Gaming" */
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 9999;
    opacity: 0;
    min-width: 300px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Le contenu de la notif */
.ach-icon-box {
    width: 40px; height: 40px; background: linear-gradient(135deg, #fbbf24, #d97706);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem; box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}
.ach-text { display: flex; flex-direction: column; line-height: 1.2; }
.ach-title { font-weight: 700; font-size: 0.95rem; color: #f3f4f6; }
.ach-points { font-size: 0.8rem; color: #fbbf24; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

/* L'ANIMATION COMPLEXE DEMANDÉE */
/* 1. Monte 2. Reste 3. Part à gauche à toute vitesse */
.achievement-slide {
    animation: achievementSequence 4s forwards ease-in-out;
}

@keyframes achievementSequence {
    0% { transform: translateX(-50%) translateY(100px); opacity: 0; }
    10% { transform: translateX(-50%) translateY(0); opacity: 1; } /* Arrivée */
    80% { transform: translateX(-50%) translateY(0); opacity: 1; } /* Pause lecture */
    100% { transform: translateX(-200%) translateY(0); opacity: 0; } /* Départ gauche */
}

/* POP-UP MODALE */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
    z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
    background: var(--bg-card); width: 100%; max-width: 320px;
    border-radius: 20px; padding: 30px 20px; text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from {transform: scale(0.8); opacity: 0;} to {transform: scale(1); opacity: 1;} }

.modal-icon { font-size: 3rem; margin-bottom: 15px; color: #f59e0b; }
.btn-full-black {
    background: var(--text-main); color: var(--bg-card); width: 100%;
    padding: 12px; border-radius: 12px; border: none; font-weight: 700; margin-top: 20px; cursor: pointer;
}
.btn-text-gray { background: none; border: none; color: var(--text-secondary); margin-top: 10px; cursor: pointer; }

/* Responsive adjustments */
@media (max-width: 400px) {
    .compact-list { grid-template-columns: 1fr; } /* Liste verticale sur petits écrans */
    .quiz-options-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTAINERS HORIZONTAUX (Correction Finale)
   ============================================================ */

.h-scroll-container {
    display: flex;
    overflow-x: auto;       /* Le scroll est actif */
    gap: 15px;              /* Espace entre les cartes */
    
    /* On garde le padding en haut/bas pour l'ombre, mais 0 sur les côtés */
    padding: 10px 0 30px 0; 
    
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    
    max-width: 1200px;
    margin: 0 auto;
}

.h-scroll-container::-webkit-scrollbar { display: none; }

/* === L'ASTUCE UNIVERSELLE === */
/* Peu importe si c'est "Accès rapide" ou "À la une", on force : */

/* 1. Le tout premier élément à avoir une marge à gauche */
.h-scroll-container > *:first-child {
    margin-left: 20px !important; /* Force l'écart au démarrage */
}

/* 2. Le tout dernier élément à avoir une marge à droite */
.h-scroll-container > *:last-child {
    margin-right: 20px !important; /* Force l'écart à la fin */
}


/* Alignement du titre pour qu'il matche parfaitement le début des cartes */
.section-label {
    max-width: 1200px;
    margin: 30px auto 10px auto;
    padding: 0 20px; /* Doit être IDENTIQUE au padding-left du container ci-dessus */
    font-size: 1.2rem; 
    font-weight: 700;
    color: var(--text-main);
}
/* Page Tuto Détail */
.tuto-page { padding-top: 20px; }
.content-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
}
.step-card {
    background: var(--bg-card); border-radius: 12px;
    box-shadow: var(--shadow); margin-bottom: 30px; overflow: hidden;
    border: 1px solid var(--border);
}
.step-content { padding: 25px; }
.step-img { width: 100%; height: auto; display: block; }
.step-number {
    background: var(--primary); color: white;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.9rem; margin-right: 10px;
}

/* Sidebar Outils */
.tools-card {
    background: var(--bg-card); padding: 25px;
    border-radius: 12px; box-shadow: var(--shadow);
    border: 1px solid var(--border);
    position: sticky; top: 90px;
}

/* ==========================================================================
   7. FOOTER (VOTRE DESIGN PRÉSERVÉ)
   ========================================================================== */
footer {
    background: var(--dark); /* Utilise la variable définie au début */
    color: white;
    padding: 50px 0;
    margin-top: 60px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.footer-col h4 { margin-bottom: 20px; color: #fff; font-weight: 600;}
.footer-col a { color: #94a3b8; display: block; margin-bottom: 10px; font-size: 0.95rem; }
.footer-col a:hover { color: white; }

/* ==========================================================================
   8. RESPONSIVE (MOBILE)
   ========================================================================== */
@media (max-width: 900px) {
    /* Header Mobile */
    .nav-desktop { display: none; }
    .hamburger { display: flex; }
    
    /* Layout */
    .container { padding: 0 20px; }
    .content-grid { grid-template-columns: 1fr; }
    .tuto-sidebar { margin-top: 30px; }
    
    /* Grilles Listes */
    #tutorials-list, #quiz-list, #calculators-list {
        display: grid; grid-template-columns: 1fr; gap: 20px;
    }
}


/* ==========================================================================
   9. PAGE COMPTE & AUTHENTIFICATION (Refonte Clean & Centrée)
   ========================================================================== */

/* --- CONTENEUR GLOBAL (Centrage PC & Mobile) --- */
.auth-container {
    width: 100%;
    /* Prend toute la hauteur de l'écran moins le header pour centrer verticalement */
    min-height: calc(100vh - 150px); 
    display: flex;
    align-items: center;      /* Centre verticalement */
    justify-content: center;  /* Centre horizontalement */
    padding: 20px;
}

/* --- LA CARTE DE CONNEXION (Design Card) --- */
.auth-card {
    background-color: var(--bg-card); /* Blanc le jour, Gris foncé la nuit */
    border: 1px solid var(--border);
    border-radius: 24px;      /* Arrondis modernes */
    padding: 40px 30px;
    width: 100%;
    max-width: 400px;         /* Empêche d'être trop large sur PC */
    text-align: center;
    box-shadow: var(--shadow);
}

/* Textes de la carte */
.auth-card h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main); /* Noir le jour, Blanc la nuit */
    margin-bottom: 10px;
}
.auth-card p {
    color: var(--text-secondary); /* Gris lisible sur les deux modes */
    margin-bottom: 30px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Icône Avatar au dessus du titre */
.auth-icon {
    font-size: 4rem;
    color: var(--primary); /* Bleu Apple */
    margin-bottom: 20px;
}

/* --- BOUTON iOS (Noir/Blanc adaptatif) --- */
/* C'est lui qui posait problème "Noir sur Noir" ? Voici la correction : */
.btn-ios-black {
    background-color: #1D1D1F; /* Noir presque pur par défaut */
    color: #FFFFFF !important; /* Force le texte en blanc */
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform 0.2s, background-color 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-ios-black:active { transform: scale(0.97); }

/* MODE NUIT : Le bouton devient blanc, le texte devient noir */
[data-theme="dark"] .btn-ios-black {
    background-color: #FFFFFF;
    color: #000000 !important; /* Texte noir sur bouton blanc */
}

/* --- VUE PROFIL (Une fois connecté) --- */
/* Pour éviter que le profil soit aussi centré bizarrement, on garde un alignement haut */
#profile-view {
    width: 100%;
    max-width: 800px;
    margin: 0 auto; /* Centré horizontalement sur PC */
    padding-top: 20px;
}

/* En-tête Profil */
.profile-header-card {
    background: var(--bg-card);
    padding: 30px;
    border-radius: var(--radius);
    display: flex; align-items: center; gap: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 25px;
    border: 1px solid var(--border);
}

.profile-avatar { 
    width: 80px; height: 80px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid var(--bg-app); 
}

/* Listes et Stats (Déjà vu précédemment) */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 30px; }
.stat-card { background: var(--bg-card); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center;}
.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-main); display:block; }
.stat-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;}

.ios-list { background: var(--bg-card); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.ios-item { padding: 18px 20px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s;}
.ios-item:hover { background: var(--bg-app); }
.ios-item:last-child { border-bottom: none; }

/* --- BOUTON PROFIL BLEU (iOS Style) --- */
.btn-ios-blue {
    background-color: #007AFF; /* Bleu Apple */
    color: white !important;
    padding: 16px;
    border-radius: 14px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}
.btn-ios-blue:active { transform: scale(0.97); background-color: #0062cc; }

/* Ajustement pour le conteneur des deux boutons */
.auth-buttons-row {
    display: flex; gap: 10px; width: 100%;
}
.auth-buttons-row > * { flex: 1; } /* Les boutons prennent 50% chacun */


/* --- SÉLECTEUR D'AVATAR --- */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 par ligne */
    gap: 15px;
    padding: 10px;
}

.avatar-option {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s;
    position: relative;
    background: #f1f5f9;
}

.avatar-option img { width: 100%; height: 100%; object-fit: cover; }

/* Effet Hover */
.avatar-option:hover { transform: scale(1.1); }
.avatar-option.selected { border-color: #007AFF; }

/* Avatar Verrouillé */
.avatar-option.locked {
    filter: grayscale(1);
    opacity: 0.6;
    cursor: not-allowed;
}
.avatar-option.locked::after {
    content: '\f023'; /* Icone Cadenas FontAwesome */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #333; font-size: 1.2rem;
}

/* Badge "Modifier" sur la photo de profil */
.edit-badge {
    position: absolute; bottom: 0; right: 0;
    background: #007AFF; color: white;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


/* ==========================================================================
   10. MODALES & SÉLECTEUR AVATAR (Le Design Clean)
   ========================================================================== */

/* Fond flouté derrière la modale */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px); /* Effet flou iOS */
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* La carte blanche (Avatar Selector) */
.modal-sheet {
    background: var(--bg-card);
    width: 100%;
    max-width: 400px;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    position: relative;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Petite barre déco en haut (optionnel) */
.sheet-handle {
    width: 40px; height: 5px;
    background: var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Grille d'avatars */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
}

.avatar-option {
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
    background: var(--bg-app);
}

.avatar-option img { width: 100%; height: 100%; object-fit: cover; }

/* États */
.avatar-option:hover { transform: scale(1.1); }
.avatar-option.selected { border-color: #007AFF; transform: scale(1.05); }
.avatar-option.locked { filter: grayscale(1); opacity: 0.5; cursor: not-allowed; }


/* ==========================================================================
   11. NOUVEAU DESIGN LISTE COURS (GRILLE PRO)
   ========================================================================== */
/* ==========================================================================
   11. DESIGN LISTE COURS (TEXTURE & MODERNE)
   ========================================================================== */

.tutorials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; /* Plus d'espace pour respirer */
    padding-bottom: 40px;
}

/* La Carte */
.course-card {
    position: relative; /* Pour le positionnement du fond */
    background: var(--bg-card);
    border-radius: 24px; /* Arrondis plus prononcés */
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height: 100%;
    isolation: isolate; /* Crée un contexte d'empilement pour le z-index */
}

/* EFFET TEXTURE LOGO EN FOND */
.course-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('assets/logo.png'); /* Chemin relatif à index.html */
    background-repeat: repeat;
    background-size: 80px; /* Taille du logo répété */
    opacity: 0.03; /* Très subtil (3%) */
    z-index: -1; /* Derrière le contenu */
    filter: grayscale(1); /* Logo en noir et blanc pour ne pas gêner */
}

/* Animation au survol */
.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: rgba(0, 122, 255, 0.3);
}

/* Zone Image */
.card-thumb {
    width: 100%;
    height: 170px;
    background-color: #f0f0f2;
    position: relative;
    overflow: hidden;
}

.card-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.course-card:hover .card-thumb img { transform: scale(1.08); }

/* Badge XP (Sur l'image) */
.card-xp-badge {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #b45309; /* Doré foncé */
    font-weight: 800;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 5px;
    z-index: 2;
}
.card-xp-badge i { color: #fbbf24; /* Icône éclair jaune vif */ }

/* Contenu Texte */
.card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: transparent; /* Pour voir la texture derrière */
}

/* Ligne Métadonnées (Alignement corrigé) */
.card-meta-header {
    display: flex;
    align-items: center; /* Centre verticalement badge et durée */
    gap: 12px; /* Espace entre les deux */
    margin-bottom: 12px;
}

.badge-pill {
    background: #007AFF; color: white;
    padding: 5px 12px; border-radius: 6px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    line-height: 1; /* Fixe la hauteur de ligne */
}

.card-duration {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex; align-items: center; gap: 5px;
    opacity: 0.8;
}
.card-duration i { font-size: 0.9rem; margin-top: -1px; }

/* Titre */
.card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 15px 0;
    line-height: 1.35;
    flex-grow: 1;
}

/* Lien bas de carte */
.card-action {
    margin-top: auto;
    display: flex; align-items: center;
    font-size: 0.9rem; font-weight: 700;
    color: var(--primary);
    transition: 0.2s;
}
.card-action span { border-bottom: 2px solid transparent; transition: 0.2s; }
.course-card:hover .card-action span { border-bottom-color: var(--primary); }
.course-card:hover .card-action i { transform: translateX(5px); transition: 0.2s; margin-left: 5px; }

/* --- MOBILE LIST VIEW (Conservation de votre demande précédente) --- */
@media (max-width: 600px) {
    .tutorials-grid { grid-template-columns: 1fr; gap: 15px; }
    
    .course-card {
        flex-direction: row; padding: 12px;
        align-items: center; height: auto;
        border-radius: 16px;
    }
    .card-thumb {
        width: 90px; height: 90px;
        border-radius: 12px; margin-right: 15px; flex-shrink: 0;
    }
    .card-content { padding: 0; }
    .card-xp-badge {
        top: auto; bottom: 0; right: 0;
        background: rgba(0,0,0,0.6); color: white;
        padding: 3px 8px; font-size: 0.6rem; border-radius: 8px 0 12px 0;
    }
    .card-title { font-size: 1rem; margin-bottom: 5px; }
    .card-meta-header { margin-bottom: 5px; }
    .card-action { display: none; } /* On épure sur mobile */
}

/* ==========================================================================
   12. SEARCH BAR & MOBILE LIST VIEW
   ========================================================================== */

/* --- BARRE DE RECHERCHE --- */
.search-wrapper {
    display: flex; justify-content: center;
    padding: 0 20px 30px 20px;
}

.search-box {
    position: relative;
    width: 100%; max-width: 400px; /* Pas toute la largeur */
}

.search-box input {
    width: 100%;
    padding: 12px 15px 12px 45px; /* Espace pour l'icône */
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: 0.3s;
    outline: none;
}

.search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(0,113,227,0.15);
}

.search-icon {
    position: absolute; left: 18px; top: 50%;
    transform: translateY(-50%);
    color: var(--secondary);
    pointer-events: none;
}

/* --- TRANSFORMATION MOBILE (LISTE COMPACTE) --- */
@media (max-width: 600px) {
    
    /* 1. On passe en 1 colonne */
    .tutorials-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* 2. La carte devient horizontale (Flex Row) */
    .course-card {
        flex-direction: row; /* Image gauche / Texte droite */
        height: auto; /* Hauteur adaptative */
        align-items: center;
        padding: 10px; /* Petit padding global */
    }

    /* 3. L'image devient une miniature carrée */
    .card-thumb {
        width: 100px; 
        height: 80px; /* Format 4:3 compact */
        flex-shrink: 0; /* Ne rétrécit pas */
        border-radius: 12px;
        margin-right: 15px;
        background: transparent;
    }

    .card-thumb img {
        border-radius: 12px;
        /* Contain pour voir tout le schéma, ou Cover pour joli */
        object-fit: cover; 
    }

    /* 4. Le contenu texte prend le reste de la place */
    .card-content {
        padding: 0; /* On enlève le padding interne */
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        align-items: flex-start;
    }

    /* 5. Ajustement des textes pour la lisibilité */
    .card-meta { margin-bottom: 6px; }
    
    .badge-pill {
        padding: 3px 8px; 
        font-size: 0.65rem; /* Plus discret */
    }

    .card-title {
        font-size: 1rem; /* Titre bien lisible */
        margin: 0 0 6px 0;
        line-height: 1.3;
    }

    /* Le lien "Lire" devient plus discret ou disparaît pour laisser le clic global */
    .card-link {
        font-size: 0.8rem;
        color: var(--secondary);
    }
    
    /* Optionnel : cacher l'icône flèche sur mobile pour épurer */
    .card-link i { display: none; }
}


/* --- CSS SPECIFIQUE OUTILS --- */

/* Style des inputs dans la modale */
.modal-inp {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    font-size: 1rem;
    background: #f9f9f9;
    transition: 0.2s;
    font-family: inherit;
}
.modal-inp:focus {
    background: #fff;
    border-color: #007AFF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

/* Grille Outils plus serrée */
#tools-list .course-card {
    min-height: 180px; /* Cartes plus petites que les tutos */
}


/* ==========================================================================
   13. DESIGN OUTILS (GRID APP STYLE)
   ========================================================================== */

/* Sur PC : Grille classique aérée */
#tools-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.tool-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: var(--primary);
}

.tool-icon-circle {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0284c7;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.tool-title {
    font-size: 1rem; font-weight: 700; margin-bottom: 5px;
    color: var(--text-main);
}

.tool-desc {
    font-size: 0.8rem; color: var(--text-secondary);
}

/* --- MOBILE : MODE GRILLE APP (2 colonnes compactes) --- */
@media (max-width: 600px) {
    #tools-dashboard {
        grid-template-columns: 1fr 1fr; /* 2 colonnes forcées */
        gap: 12px;
    }

    .tool-card {
        padding: 15px 10px;
        border-radius: 16px;
        min-height: 130px; /* Hauteur fixe pour uniformité */
        justify-content: center;
    }

    .tool-icon-circle {
        width: 45px; height: 45px; /* Plus petit */
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .tool-title { font-size: 0.9rem; line-height: 1.2; }
    .tool-desc { display: none; } /* On cache la description sur mobile pour épurér */
}


/* ==========================================================================
   14. FIX MODALE OUTILS (POP-UP)
   ========================================================================== */

/* Le fond gris transparent qui couvre tout l'écran */
/* SÉCURITÉ : LE FOND DE LA MODALE */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    padding: 20px;
}

/* La fenêtre blanche */
.modal-content {
    background: var(--bg-card);
    width: 90%; 
    max-width: 450px;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    position: relative;
    animation: popInTool 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animation d'apparition */
@keyframes popInTool { 
    from { transform: scale(0.9); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}

/* La croix de fermeture */
.close-cross {
    position: absolute;
    top: 15px; 
    right: 15px;
    width: 32px; 
    height: 32px;
    border-radius: 50%;
    background: var(--bg-app);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: 0.2s;
}
.close-cross:hover { background: #e5e5ea; color: #000; }



/* ==========================================================================
   14. QUIZ GAME SPECIFIC STYLES
   ========================================================================== */

/* The Modal Structure is reused from previous steps (.modal) */

/* Quiz Buttons in Modal */
#qm-body .quiz-btn {
    width: 100%;
    text-align: left;
    padding: 18px 25px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

/* --- CORRECTION MOBILE : HOVER UNIQUEMENT SUR PC --- */
@media (hover: hover) {
    #qm-body .quiz-btn:hover:not([disabled]) {
        border-color: #007AFF;
        background: #f0f9ff;
        transform: translateX(5px);
    }
}

/* On garde l'état "Active" (clic maintenu) pour le mobile */
#qm-body .quiz-btn:active:not([disabled]) {
    background: #f2f2f7;
    border-color: #d1d1d6;
    transform: scale(0.98);
}

#qm-body .quiz-btn.success {
    background: #dcfce7;
    border-color: #22c55e;
    color: #14532d;
}
#qm-body .quiz-btn.success::after {
    content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: 20px;
}

#qm-body .quiz-btn.error {
    background: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
    opacity: 0.7;
}

#qm-body .quiz-btn[disabled] { cursor: default; }

/* Responsive adjustments for quiz modal */
@media (max-width: 600px) {
    #qm-header { padding: 10px 15px; font-size: 0.9rem; }
    #qm-body { padding: 20px; }
    #qm-body h2 { font-size: 1.1rem; }
    #qm-body .quiz-btn { padding: 15px; font-size: 0.9rem; }
}


/* ==========================================================================
   15. SECTION NEWSLETTER (REFONTE iOS CLEAN)
   ========================================================================== */

.newsletter-card {
    background: var(--bg-card); /* Blanc pur */
    border-radius: 24px;
    padding: 25px;
    position: relative;
    /* Ombre douce et diffuse style Apple */
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

/* Disposition horizontale (Icône à gauche, texte à droite) */
.news-header-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* L'icône Enveloppe dans un cercle bleu */
.news-icon-circle {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, #007AFF, #5AC8FA); /* Dégradé Bleu iOS */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,122,255,0.25);
}

.news-content-text {
    flex: 1;
    display: flex; flex-direction: column; align-items: flex-start;
}

/* Badge XP (Doré mais sur fond clair) */
.news-badge-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 215, 0, 0.15); /* Fond Or très pâle */
    color: #b45309; /* Texte Or/Bronze foncé pour lisibilité */
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem; font-weight: 800;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.news-content-text h3 {
    margin: 0 0 4px 0;
    font-size: 1.2rem; font-weight: 800;
    color: var(--text-main);
}

.news-content-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Zone du Formulaire */
.news-form-wrapper {
    display: flex; gap: 10px;
    width: 100%;
    margin-top: 5px;
}

/* Input gris clair (Style iOS Input) */
.news-input {
    flex: 1;
    background: var(--bg-app); /* Gris #F2F2F7 */
    border: 1px solid transparent;
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 0.95rem;
    outline: none; transition: 0.3s;
}

.news-input::placeholder { color: #98989d; }

.news-input:focus {
    background: #fff;
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

/* Bouton Envoyer (Carré arrondi bleu) */
.news-btn {
    width: 48px; height: 46px; /* Ajusté à la hauteur de l'input */
    background: #1c1c1e; /* Noir doux pour contraster avec le blanc */
    color: white; border: none;
    border-radius: 14px;
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
}
.news-btn:active { transform: scale(0.95); }

/* Message de retour */
.news-feedback {
    font-size: 0.8rem;
    margin: 0; min-height: 1em;
    font-weight: 600;
}

/* Mode Sombre : Adaptation automatique */
[data-theme="dark"] .newsletter-card {
    background: #1C1C1E; /* Carte gris foncé */
    border-color: #2c2c2e;
}
[data-theme="dark"] .news-input {
    background: #2c2c2e; /* Input plus foncé */
}
[data-theme="dark"] .news-btn {
    background: #007AFF; /* Bouton devient bleu en mode sombre pour ressortir */
}


/* ==========================================================================
   17. BADGE DE RANG (DESIGN SOBRE & UNE LIGNE)
   ========================================================================== */

.rank-badge {
    /* Maintien sur une ligne (CRUCIAL) */
    white-space: nowrap; 
    display: inline-flex;
    align-items: center;
    gap: 6px;

    /* Design Sobre (Style iOS) */
    background-color: rgba(255, 179, 0, 0.12); /* Fond jaune très pâle */
    color: #b45309; /* Texte couleur Ambre/Bronze foncé (lisible) */
    border: 1px solid rgba(180, 83, 9, 0.1); /* Bordure subtile */
    
    /* Dimensions & Typo */
    padding: 5px 12px;
    border-radius: 50px; /* Forme pilule */
    font-size: 0.75rem; /* Taille idéale mobile */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Suppression des ombres lourdes */
    box-shadow: none; 
    
    /* Marge */
    margin-top: 5px;
    width: fit-content;
    max-width: 100%; /* Sécurité */
}

.rank-badge i {
    font-size: 0.9rem;
    color: #d97706; /* Icône légèrement plus vive */
}

/* Ajustement spécifique pour les très petits écrans si le titre est très long */
@media (max-width: 360px) {
    .rank-badge {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
}

/* ==========================================================================
   18. NOTIFICATIONS & SUCCÈS (ANIMATIONS)
   ========================================================================== */

/* --- A. NOTIFICATION "ACHIEVEMENT" (Toast) --- */
.achievement-toast {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%) translateY(-150%); /* Caché en haut */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px 25px 8px 8px; /* Padding asymétrique pour l'icône */
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 11000; /* Très haut */
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 300px;
}

.achievement-toast.show {
    transform: translateX(-50%) translateY(0); /* Visible */
}

.ach-icon-circle {
    width: 45px; height: 45px;
    background: linear-gradient(135deg, #FFD700, #FFA500); /* Or */
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.4);
}

.ach-text h4 { margin: 0; font-size: 0.95rem; font-weight: 800; color: #1c1c1e; }
.ach-text p { margin: 2px 0 0 0; font-size: 0.8rem; color: #8e8e93; }


/* --- B. SUCCÈS QUIZ DYNAMIQUE (Dans la page tuto) --- */
.quiz-success-view {
    text-align: center;
    padding: 20px;
    animation: zoomInSuccess 0.5s ease forwards;
}

.quiz-success-icon {
    font-size: 4rem;
    color: #34C759;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 15px rgba(52, 199, 89, 0.4));
    animation: bounceIcon 0.8s infinite alternate;
}

@keyframes zoomInSuccess {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes bounceIcon {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}




/* Style pour la pilule XP dans l'historique */
.xp-pill { 
    color: #b45309; 
    background: #fffbeb; 
    padding: 4px 10px; 
    border-radius: 12px; 
    font-weight: 700; 
    font-size: 0.8rem;
    white-space: nowrap;
}
[data-theme="dark"] .xp-pill {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}


/* ==========================================================================
   23. ICÔNES HISTORIQUE PREMIUM (STYLE iOS)
   ========================================================================== */

.h-icon-badge {
    width: 42px; height: 42px;       /* Taille confortable */
    border-radius: 12px;             /* Arrondi style Apple */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;               /* Icône plus grande */
    color: white;                    /* Icône blanche pour le contraste */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Légère ombre portée */
    flex-shrink: 0;                  /* Empêche l'écrasement */
}

/* --- DÉGRADÉS --- */
.h-grad-gold   { background: linear-gradient(135deg, #FFD700, #F59E0b); } /* Rangs / Or */
.h-grad-blue   { background: linear-gradient(135deg, #007AFF, #00C7BE); } /* Quiz / Tutos */
.h-grad-green  { background: linear-gradient(135deg, #34C759, #30B0C7); } /* Newsletter / Succès */
.h-grad-purple { background: linear-gradient(135deg, #AF52DE, #5856D6); } /* Avatars */
.h-grad-red    { background: linear-gradient(135deg, #FF3B30, #FF9500); } /* Erreur / Important */
.h-grad-silver { background: linear-gradient(135deg, #8E8E93, #636366); } /* Archives / Ancien */

/* Ajustement de l'icône à l'intérieur */
.h-icon-badge i {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Petite ombre sur l'icône elle-même */
}




/* ==========================================================================
   24. ROUE DE LA FORTUNE (GAMIFICATION)
   ========================================================================== */

/* ==========================================================================
   24. ROUE DE LA FORTUNE (DESIGN PREMIUM)
   ========================================================================== */

/* LIEN MENU PREMIUM (Style Or Élégant) */
.premium-gold-link {
    /* Typographie alignée avec le reste du menu */
    font-size: 0.85rem;      /* Taille standard du menu */
    font-weight: 600;        /* Un peu de gras mais pas trop */
    letter-spacing: 0.2px;   /* Légère espacement pro */
    text-transform: none;    /* On enlève le majuscule forcé pour faire plus classe */
    
    -webkit-background-clip: text;
    background-clip: text;
    color: black;
    background-size: 100% auto;
    
    /* Animation de brillance lente et fluide */
    display: flex;
    align-items: center;
}

/* L'icône cadeau reste dorée mais visible */
.premium-gold-link i {
    color: black !important; /* Force la couleur or sur l'icône */
    -webkit-text-fill-color: #FFD700;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

@keyframes rainbowAnim { 
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Modale Spécifique Roue */
.wheel-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fond sombre */
    backdrop-filter: blur(15px);     /* ✅ EFFET FLOU DEMANDÉ */
    -webkit-backdrop-filter: blur(15px);
    z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}

.wheel-modal-overlay.active { opacity: 1; visibility: visible; }

.wheel-wrapper {
    position: relative;
    width: 350px; height: 350px;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
    transform: scale(0.8); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wheel-modal-overlay.active .wheel-wrapper { transform: scale(1); }

/* Le Canvas (La roue elle-même) */
#wheel-canvas {
    width: 100%; height: 100%;
    border-radius: 50%;
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Spin easing */
    border: 8px solid white;
    box-sizing: content-box; /* Pour que la bordure soit externe */
}

/* Le Pointeur (Flèche) */
.wheel-pointer {
    position: absolute; top: -20px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 50px;
    background: #FF3B30;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    z-index: 300 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Bouton Central (Jouer) */
.wheel-center-btn {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90px; height: 90px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-weight: 800; font-size: 0.85rem; color: #1c1c1e;
    border: 4px solid #f2f2f7;
    cursor: pointer; z-index: 4;
    transition: 0.2s;
    user-select: none;
}
.wheel-center-btn:active { transform: translate(-50%, -50%) scale(0.95); }

.wheel-cost {
    display: block; font-size: 0.7rem; color: #FF9500; margin-top: 2px;
}

/* Bouton Fermer */
.wheel-close {
    position: absolute; bottom: -60px; left: 50%;
    transform: translateX(-50%);
    background: white; color: black;
    border: none; padding: 10px 20px; border-radius: 20px;
    font-weight: 600; cursor: pointer;
}



/* ==========================================================================
   25. CORRECTIFS & iOS ALERTS
   ========================================================================== */

/* 1. CORRECTION DU Z-INDEX (Le toast passe DEVANT la roue) */
.achievement-toast {
    z-index: 13000 !important; /* Supérieur au z-index 12000 de la roue */
}

/* 2. BOÎTE DE DIALOGUE STYLE iOS (Custom Confirm) */
.ios-alert-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Fond sombre léger */
    backdrop-filter: blur(5px);
    z-index: 14000; /* Le plus haut niveau */
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.2s;
}
.ios-alert-overlay.active { opacity: 1; visibility: visible; }

.ios-alert-box {
    width: 270px; /* Largeur standard iOS */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    text-align: center;
    transform: scale(1.1); transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden; /* Pour couper les coins des boutons */
}
.ios-alert-overlay.active .ios-alert-box { transform: scale(1); }

.ios-alert-content { padding: 20px 15px 15px 15px; }

.ios-alert-title {
    font-size: 1.1rem; font-weight: 700; color: #000;
    margin-bottom: 5px;
}
.ios-alert-msg {
    font-size: 0.85rem; color: #000; line-height: 1.4;
}

.ios-alert-btns {
    display: flex; border-top: 1px solid rgba(60, 60, 67, 0.20);
}

.ios-btn {
    flex: 1; padding: 12px;
    background: transparent; border: none;
    font-size: 1rem; cursor: pointer;
    color: #007AFF; /* Bleu Apple */
    border-right: 1px solid rgba(60, 60, 67, 0.20);
    transition: background 0.1s;
}
.ios-btn:last-child { border-right: none; font-weight: 700; } /* Bouton Confirm en gras */
.ios-btn:active { background: rgba(0,0,0,0.05); }
.ios-btn.cancel { font-weight: 400; }


/* ==========================================================================
   26. POP-UP HUD iOS (Connexion Requise)
   ========================================================================== */

.ios-hud-popup {
    position: fixed;
    top: 50%; left: 50%;
    /* Départ légèrement plus petit et invisible */
    transform: translate(-50%, -50%) scale(0.9); 
    
    /* Style iOS HUD sombre et flouté */
    background: rgba(35, 35, 35, 0.85); 
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    padding: 30px 20px;
    border-radius: 24px;
    text-align: center;
    color: white;
    z-index: 15000; /* Très haut, devant la roue */
    
    opacity: 0;
    visibility: hidden;
    /* Transition fluide style Apple */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    width: 240px; /* Carré arrondi */
    display: flex; flex-direction: column; align-items: center;
}

.ios-hud-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1); /* Taille normale */
}

.hud-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    /* Dégradé Or/Orange sur l'icône */
    background: linear-gradient(135deg, #FFD700, #FF9500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 10px rgba(255, 215, 0, 0.3));
}

.hud-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.hud-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.4;
    font-weight: 500;
}
.hud-highlight { color: #FFD700; font-weight: 700; }

/* ==========================================================================
   27. BANNIÈRE PROMO "LANDSCAPE" (Format Compact)
   ========================================================================== */

.promo-feature-card {
    position: relative;
    width: 100%; /* S'adapte au container parent (et son padding) */
    
    /* ✅ HAUTEUR RÉDUITE : Format 2:1 (Bannière rectangulaire) */
    aspect-ratio: 2 / 1; 
    
    border-radius: 20px; /* Arrondis légèrement réduits pour s'adapter à la taille */
    overflow: hidden;
    margin: 15px 0 25px 0; /* Espacement vertical propre */
    cursor: pointer;
    
    /* Ombre plus discrète car l'élément est plus petit */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.1);
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-feature-card:active {
    transform: scale(0.98);
}

.promo-img {
    width: 100%;
    height: 100%;
    
    /* ✅ CADRAGE OPTIMAL : On remplit le bloc */
    object-fit: cover; 
    
    /* On centre l'image pour bien voir les étapes 1-2-3 */
    object-position: center center; 
    
    display: block;
}

/* LE DÉGRADÉ "WOOSH" (Adapté pour une hauteur plus faible) */
.promo-footer {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    
    /* Dégradé plus compact */
    background: linear-gradient(
        to top, 
        rgba(0,0,0, 0.9) 0%, 
        rgba(0,0,0, 0.6) 60%, 
        transparent 100%
    );
    
    /* Padding réduit pour ne pas manger l'image */
    padding: 40px 20px 15px 20px; 
    
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 2;
}

/* TEXTES AJUSTÉS (Plus petits pour le format compact) */
.promo-text {
    flex: 1;
    padding-right: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.promo-text h3 {
    margin: 0 0 4px 0;
    font-size: 1.1rem; /* Titre plus petit */
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.3px;
}

.promo-text p {
    margin: 0;
    font-size: 0.8rem; /* Sous-titre plus discret */
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    line-height: 1.2;
}

/* BOUTON PLAY (Taille réduite) */
.promo-btn-icon {
    width: 38px; height: 38px; /* Plus petit */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    animation: pulseGlow 3s infinite;
}

/* BADGE (Plus discret) */
.promo-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: #FFD700;
    color: #000;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 3;
}

/* ==========================================================================
   28. HUD GAMER PRO (SOLDE & PUB)
   ========================================================================== */

/* CONTENEUR DU HAUT (Remonté pour ne pas gêner la flèche) */
.wheel-header-stats {
    position: absolute;
    /* On remonte bien plus haut */
    top: -130px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Espace entre Solde et Bouton Pub */
    z-index: 20;
    width: 260px;
}

/* 1. BOÎTE XP (Style Compteur Tactique) */
.hud-xp-box {
    background: rgba(15, 15, 20, 0.85); /* Noir profond */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 20px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    
    /* Ombre portée lumineuse discrète */
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,1);
    min-width: 140px;
}

.hud-xp-icon {
    color: #FFD700;
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6)); /* Glow doré */
}

.hud-xp-value {
    color: #fff;
    font-family: 'Courier New', monospace; /* Touche technique */
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.hud-xp-label {
    color: #888;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 4px;
    text-transform: uppercase;
}

/* 2. BOUTON PUB (Style "Reward" Gamer) */
.btn-watch-ad-pro {
    background: linear-gradient(90deg, #1c1c1e 0%, #2c2c2e 100%);
    border: 1px solid rgba(52, 199, 89, 0.3); /* Bordure verte subtile */
    color: #34C759; /* Texte Vert Apple */
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-watch-ad-pro:hover {
    background: rgba(52, 199, 89, 0.1);
    border-color: #34C759;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(52, 199, 89, 0.2);
}

.btn-watch-ad-pro i { font-size: 1rem; }

/* 3. BOUTON FERMER (Style "Ghost" en bas) */
.wheel-close-pro {
    position: absolute; 
    bottom: -70px; /* Bien en dessous de la roue */
    left: 50%;
    transform: translateX(-50%);
    
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

.wheel-close-pro:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
}



/* ==========================================================================
   29. STATS PROFIL (HYBRIDE : APPLE JOUR / GAMER NUIT)
   ========================================================================== */

.hud-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

/* --- BASE (MODE JOUR - CARTE BLANCHE) --- */
.hud-card {
    background: #FFFFFF;            /* Fond Blanc pur */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;            /* Arrondi iOS */
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    
    /* Ombre douce et diffuse pour le jour */
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); 
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

.hud-card:active { transform: scale(0.98); }

/* Icône : Reste colorée jour et nuit */
.hud-card-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
    /* Pas de lueur en mode jour pour rester propre */
    filter: none; 
}

/* Valeur : Foncée le jour, Blanche la nuit */
.hud-card-value {
    font-family: 'Courier New', monospace; /* Touche Tech conservée */
    font-weight: 700;
    font-size: 1.8rem;
    color: #1C1C1E; /* Noir profond */
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 4px;
}

/* Label : Gris le jour */
.hud-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8E8E93;
}

/* --- OVERRIDE (MODE NUIT - STYLE GAMER HUD) --- */
[data-theme="dark"] .hud-card {
    background: rgba(20, 20, 25, 0.85); /* Noir Gamer */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); /* Ombre plus sombre */
}

[data-theme="dark"] .hud-card-icon {
    filter: drop-shadow(0 0 8px currentColor); /* Réactive la lueur */
}

[data-theme="dark"] .hud-card-value {
    color: #FFFFFF; /* Texte blanc */
}

[data-theme="dark"] .hud-card-label {
    color: rgba(255, 255, 255, 0.6);
}


/* --- VARIANTES DE COULEURS (Gestion Barre Haut) --- */
/* La barre du haut est subtile le jour, brillante la nuit */

/* 1. XP (Or) */
.hud-variant-gold .hud-card-icon { color: #FFD700; }
[data-theme="dark"] .hud-variant-gold { border-color: rgba(255, 215, 0, 0.2); }

.hud-variant-gold::before {
    content:""; position: absolute; top:0; left:0; width:100%; height:3px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    opacity: 0.6; /* Visible mais discret le jour */
}

/* 2. TUTOS (Bleu) */
.hud-variant-blue .hud-card-icon { color: #007AFF; }
[data-theme="dark"] .hud-variant-blue { border-color: rgba(0, 122, 255, 0.2); }

.hud-variant-blue::before {
    content:""; position: absolute; top:0; left:0; width:100%; height:3px;
    background: linear-gradient(90deg, transparent, #007AFF, transparent);
    opacity: 0.6;
}

/* 3. GRADE (Violet) */
.hud-variant-purple { grid-column: span 2; }
.hud-variant-purple .hud-card-icon { color: #AF52DE; }
[data-theme="dark"] .hud-variant-purple { border-color: rgba(175, 82, 222, 0.2); }

.hud-variant-purple::before {
    content:""; position: absolute; top:0; left:0; width:100%; height:3px;
    background: linear-gradient(90deg, transparent, #AF52DE, transparent);
    opacity: 0.6;
}



/* ==========================================================================
   30. EFFETS VISUELS JEU (BUZZER & CONFETTIS)
   ========================================================================== */

/* --- 1. LE BUZZER (DÉFAITE) --- */
.buzzer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(80, 0, 0, 0.6); /* Fond rouge sombre */
    backdrop-filter: blur(4px);
    z-index: 20000; /* Devant tout */
    display: flex; align-items: center; justify-content: center;
    
    /* Animation : Apparition brutale, disparition douce */
    opacity: 0;
    pointer-events: none; /* On peut cliquer au travers une fois fini */
}

.buzzer-overlay.active {
    animation: buzzerAnim 1.5s ease-out forwards;
}

/* La Croix Rouge Géante */
.buzzer-cross {
    position: relative;
    width: 200px; height: 200px;
    transform: scale(0); /* Départ zoomé */
}

.buzzer-overlay.active .buzzer-cross {
    animation: crossPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.buzzer-cross::before, .buzzer-cross::after {
    content: ''; position: absolute;
    background: #FF3B30; /* Rouge vif Apple */
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(255, 59, 48, 0.8); /* Glow radioactif */
}

.buzzer-cross::before {
    width: 100%; height: 30px; top: 50%; left: 0;
    transform: translateY(-50%) rotate(45deg);
}
.buzzer-cross::after {
    width: 30px; height: 100%; top: 0; left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

@keyframes buzzerAnim {
    0% { opacity: 0; }
    10% { opacity: 1; background: rgba(150, 0, 0, 0.8); } /* Flash rouge fort */
    80% { opacity: 1; background: rgba(80, 0, 0, 0.6); }
    100% { opacity: 0; }
}

@keyframes crossPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- 2. CONFETTIS (VICTOIRE) --- */
#confetti-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Ne bloque pas les clics */
    z-index: 21000;
}


/* ==========================================================================
   25. WIDGET ACCUEIL (GAMIFICATION)
   ========================================================================== */

.ios-widget-card {
    background: rgba(255, 255, 255, 0.85); /* Fond blanc semi-transparent */
    backdrop-filter: blur(20px);           /* Effet verre iOS */
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;                   /* Arrondi prononcé */
    padding: 15px 20px;
    margin: 20px 0;                        /* Espace autour */
    box-shadow: 0 8px 30px rgba(0,0,0,0.06); /* Ombre douce et large */
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.ios-widget-card:active { transform: scale(0.97); }

/* Mode Sombre */
[data-theme="dark"] .ios-widget-card {
    background: rgba(28, 28, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Contenu Gauche (Icône) */
.widget-icon-box {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Styles d'icônes */
.w-icon-locked { background: #F2F2F7; color: #8E8E93; }
.w-icon-active { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3); }

/* Contenu Central (Texte) */
.widget-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.widget-title {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    margin: 0; line-height: 1.2;
}

.widget-subtitle {
    font-size: 0.8rem; 
    color: var(--text-secondary); 
    margin: 0;
    display: flex; 
    align-items: center; 
    gap: 6px;

    /* --- AJOUTS : GESTION LIGNE UNIQUE --- */
    white-space: nowrap;       /* Interdit le retour à la ligne */
    overflow: hidden;          /* Cache ce qui dépasse */
    text-overflow: ellipsis;   /* Ajoute "..." si c'est trop long */
    max-width: 100%;           /* Prend la place dispo sans pousser */
}

/* Barre de progression miniature */
.mini-progress-track {
    width: 100%; height: 6px; background: #E5E5EA;
    border-radius: 10px; overflow: hidden; margin-top: 4px;
}
[data-theme="dark"] .mini-progress-track { background: #3A3A3C; }

.mini-progress-fill {
    height: 100%; background: #007AFF; border-radius: 10px;
    width: 0%; transition: width 1s ease;
}

/* Flèche droite style iOS */
.widget-arrow { color: #C7C7CC; font-size: 0.9rem; }

/* Animation du texte "XP" pour attirer l'oeil */
.xp-highlight {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; font-weight: 800;
}



/* ==========================================================================
   31. MODALE LOGIN (ULTRA COMPACTE & LOGO BLEU)
   ========================================================================== */

/* Carte principale réduite */
.auth-card-compact {
    background: var(--bg-card);
    width: 85%; 
    max-width: 320px; /* Plus étroit */
    padding: 20px 20px 25px 20px; /* Marges internes réduites */
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    position: relative;
    animation: zoomIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* En-tête minimaliste */
.auth-header-compact {
    margin-bottom: 15px;
    display: flex; flex-direction: column; align-items: center;
}

/* Logo PNG transformé en Bleu Papyelec (#007AFF) via filtre CSS */
.auth-logo-blue {
    height: 40px; /* Taille réduite */
    width: auto;
    margin-bottom: 5px;
    /* Ce filtre transforme une image noire/grise en Bleu Apple exact */
    filter: invert(32%) sepia(99%) saturate(1860%) hue-rotate(204deg) brightness(101%) contrast(106%);
}

.auth-header-compact h3 { 
    margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text-main); 
}

/* Bouton Google Fin */
.btn-auth-google-slim {
    width: 100%;
    background: white; color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: 12px;
    padding: 8px 10px; /* Padding vertical très réduit */
    font-size: 0.9rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: 0.2s;
    margin-bottom: 12px;
}
.btn-auth-google-slim img { width: 18px; height: 18px; }
.btn-auth-google-slim:active { background: #f1f3f4; transform: scale(0.98); }
[data-theme="dark"] .btn-auth-google-slim { background: #2c2c2e; color: white; border-color: #3a3a3c; }

/* Séparateur Fin */
.auth-divider-slim {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px; position: relative;
}
.auth-divider-slim::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: var(--border); z-index: 0;
}
.auth-divider-slim span {
    background: var(--bg-card); padding: 0 8px;
    font-size: 0.7rem; font-weight: 700; color: var(--text-secondary);
    position: relative; z-index: 1;
}

/* Stack d'inputs serrés */
.auth-inputs-stack.compact { gap: 8px; margin-bottom: 15px; }

.auth-input-slim {
    width: 100%;
    padding: 10px 12px; /* Inputs moins hauts */
    background: var(--bg-app);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem; color: var(--text-main);
    outline: none; transition: 0.2s;
	margin-bottom:7px;
}
.auth-input-slim:focus {
    background: var(--bg-card);
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

/* Bouton Valider Compact */
.btn-auth-submit-slim {
    width: 100%;
    background: #007AFF; color: white;
    border: none;
    padding: 10px; /* Moins haut */
    border-radius: 12px;
    font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: transform 0.2s;
}
.btn-auth-submit-slim:active { transform: scale(0.97); background: #0062cc; }

/* Croix Fermeture */
.close-cross {
    position: absolute; top: 12px; right: 12px;
    width: 26px; height: 26px; /* Plus petite */
    background: var(--bg-app); color: var(--text-secondary);
    border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
}


/* ==========================================================================
   32. PAGE CONNEXION (STATIC VIEW)
   ========================================================================== */

/* Conteneur principal qui centre la carte */
.auth-container {
    width: 100%;
    min-height: 60vh; /* Prend de la hauteur mais pas tout l'écran */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* La Carte Statique (Même look que la modale mais sans l'ombre portée lourde) */
.auth-card-static {
    background: var(--bg-card);
    width: 100%; 
    max-width: 320px; /* Largeur contenue pour rester élégant */
    padding: 25px 20px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--border);
    /* Une ombre plus douce car c'est intégré à la page */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

/* L'écart spécifique de 7px demandé */
.gap-7 {
    display: flex; 
    flex-direction: column;
    gap: 7px !important; /* Force la marge de 7px entre les inputs */
    margin-bottom: 15px;
}

/* Réutilisation des classes "Slim" créées précédemment (Rappel pour cohérence) */
/* Si vous ne les avez pas mises avant, assurez-vous qu'elles sont présentes : */

/* Logo Bleu (Filtre CSS) */
.auth-logo-blue {
    height: 40px; 
    width: auto;
    margin-bottom: 5px;
    filter: invert(32%) sepia(99%) saturate(1860%) hue-rotate(204deg) brightness(101%) contrast(106%);
}

/* Input Fin */
.auth-input-slim {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-app);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem; color: var(--text-main);
    outline: none; transition: 0.2s;
}
.auth-input-slim:focus {
    background: var(--bg-card);
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

/* Bouton Soumettre */
.btn-auth-submit-slim {
    width: 100%;
    background: #007AFF; color: white;
    border: none;
    padding: 10px;
    border-radius: 12px;
    font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: transform 0.2s;
}
.btn-auth-submit-slim:active { transform: scale(0.97); }

/* Mode Sombre */
[data-theme="dark"] .auth-card-static {
    background: #1c1c1e;
    border-color: #2c2c2e;
}


/* ==========================================================================
   33. DESIGN SYSTEM "GLASS APPLE MODERNE"
   ========================================================================== */

/* --- 1. BLOC CONNEXION (COMPTE) --- */

.auth-card-glass {
    /* L'effet Verre */
    background: rgba(255, 255, 255, 0.65); /* Blanc translucide */
    backdrop-filter: blur(25px) saturate(180%); /* Flou puissant + Saturation */
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    width: 100%; max-width: 320px;
    padding: 25px 20px;
    border-radius: 24px;
    text-align: center;
    
    /* Bordure subtile blanche pour définir la carte */
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Ombre diffuse et colorée (très léger bleu) */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255,255,255,0.3);
    
    position: relative;
    overflow: hidden;
}

/* Inputs Style Verre (Écart 7px) */
.gap-7 {
    display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px;
}

.input-glass {
    width: 100%;
    padding: 12px 14px;
    /* Fond légèrement plus sombre que la carte pour le contraste */
    background: rgba(255, 255, 255, 0.5); 
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    font-size: 0.9rem; color: var(--text-main);
    outline: none; transition: 0.2s;
}

.input-glass:focus {
    background: #fff;
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0,122,255,0.1);
}

/* Boutons */
.btn-glass-google {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 10px;
    font-size: 0.9rem; font-weight: 600; color: #1c1c1e;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: 0.2s;
    margin-bottom: 15px;
}
.btn-glass-google:active { transform: scale(0.98); background: #fff; }

.btn-glass-submit {
    width: 100%;
    background: #007AFF; /* Bleu pur Apple */
    color: white; border: none;
    padding: 12px; border-radius: 14px;
    font-size: 0.95rem; font-weight: 600;
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    transition: transform 0.2s;
}
.btn-glass-submit:active { transform: scale(0.97); }

/* Séparateur Subtil */
.glass-divider {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 15px; position: relative; opacity: 0.6;
}
.glass-divider::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: rgba(0,0,0,0.1);
}
.glass-divider span {
    background: transparent; padding: 0 10px;
    font-size: 0.7rem; font-weight: 700; color: var(--text-secondary);
    position: relative; z-index: 1;
}


/* --- 2. NEWSLETTER GLASS --- */

.news-card-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.6); /* Très transparent */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 26px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Lueur d'arrière plan (Dégradé bleu flou) */
.glass-glow {
    position: absolute;
    top: -50%; right: -20%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,122,255,0.15) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none; z-index: 0;
}

.news-glass-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* Badge XP Style "Bijou" */
.glass-badge-xp {
    background: rgba(255, 215, 0, 0.2); /* Or translucide */
    color: #b45309;
    padding: 6px 14px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 800;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(5px);
}

.news-text-group h3 { font-size: 1.4rem; font-weight: 800; margin: 0 0 5px 0; color: var(--text-main); }
.news-text-group p { font-size: 0.95rem; color: var(--text-secondary); margin: 0 0 20px 0; }

/* Formulaire Newsletter */
.glass-form-row {
    display: flex; gap: 8px; width: 100%; max-width: 350px;
}

.input-glass-news {
    flex: 1;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 50px; /* Forme pilule */
    padding: 12px 20px;
    font-size: 0.9rem; color: var(--text-main);
    outline: none; transition: 0.3s;
}
.input-glass-news:focus { background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

/* Bouton Rond Flottant */
.btn-icon-glass {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #1c1c1e; /* Noir pour le contraste fort */
    color: white; border: none;
    font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-icon-glass:hover { transform: scale(1.1); }
.btn-icon-glass:active { transform: scale(0.9); }


/* --- MODE SOMBRE (ADAPTATION GLASS) --- */
[data-theme="dark"] .auth-card-glass,
[data-theme="dark"] .news-card-glass {
    background: rgba(30, 30, 35, 0.6); /* Noir translucide */
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .input-glass,
[data-theme="dark"] .input-glass-news {
    background: rgba(0, 0, 0, 0.3);
    color: white;
}
[data-theme="dark"] .btn-glass-google {
    background: rgba(255, 255, 255, 0.1);
    color: white; border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .btn-icon-glass {
    background: #fff; color: #000; /* Inversement */
}


/* ==========================================================================
   33. DESIGN SYSTEM "GLASS APPLE MODERNE" (CORRIGÉ)
   ========================================================================== */

/* --- 1. MODALE CONNEXION (LOGO & BOUTON FIX) --- */

.auth-card-glass {
    background: rgba(255, 255, 255, 0.75); /* Un peu plus opaque pour la lisibilité */
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    width: 100%; max-width: 320px;
    padding: 25px 25px;
    border-radius: 28px; /* Arrondi plus doux */
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}

/* LOGO : Fond blanc interne style "Icône iOS" */
.auth-logo-icon {
    height: 60px; width: 60px; /* Taille icône */
    object-fit: contain;
    
    /* Le fond blanc qui remplit la transparence */
    background: white; 
    padding: 8px; /* Espace entre le bord blanc et le logo */
    border-radius: 16px; /* Squircle Apple */
    
    /* Ombre portée pour le détacher du verre */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 10px;
    
    /* Optionnel : Si vous voulez le logo en bleu par dessus le blanc */
    /* filter: invert(32%) sepia(99%) saturate(1860%) hue-rotate(204deg) brightness(101%) contrast(106%); */
}

.auth-header-compact h3 { margin: 5px 0 2px 0; font-size: 1.2rem; font-weight: 800; color: #1c1c1e; }
.auth-header-compact p { margin: 0 0 20px 0; font-size: 0.9rem; color: #8e8e93; font-weight: 500; }


/* BOUTON GOOGLE : Version Slim / Fine */
.btn-glass-google-slim {
    width: 100%;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 8px 12px; /* Padding réduit = Bouton moins haut */
    font-size: 0.85rem; font-weight: 600; color: #1c1c1e;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: 0.2s;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.btn-glass-google-slim img { width: 16px; height: 16px; }
.btn-glass-google-slim:active { transform: scale(0.98); background: #fff; }


/* INPUTS : Style Verre */
.gap-7 { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }

.input-glass {
    width: 100%; padding: 12px;
    background: white; 
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    font-size: 0.9rem; color: #1c1c1e; outline: none; transition: 0.2s;
}
.input-glass:focus { background: #fff; border-color: #007AFF; box-shadow: 0 0 0 3px rgba(0,122,255,0.15); }

/* BOUTON ACTION PRINCIPAL */
.btn-glass-submit {
    width: 100%;
    background: #007AFF; color: white; border: none;
    padding: 12px; border-radius: 14px;
    font-size: 0.95rem; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0, 122, 255, 0.25);
    transition: transform 0.2s;
}
.btn-glass-submit:active { transform: scale(0.97); }
.glass-divider { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; opacity: 0.5; }
.glass-divider span { font-size: 0.7rem; font-weight: 700; color: #8e8e93; }


/* --- 2. NEWSLETTER BUTTON (BEAU BOUTON BLEU) --- */

.news-card-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border-radius: 26px; padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    overflow: hidden;
}

.glass-form-row { display: flex; gap: 8px; width: 100%; max-width: 350px; align-items: center; }

/* Input Newsletter */
.input-glass-news {
    flex: 1;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px; /* Arrondi Squircle */
    padding: 12px 16px;
    font-size: 0.95rem; color: #1c1c1e; outline: none; transition: 0.3s;
}
.input-glass-news:focus { background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-color: #007AFF; }

/* LE BOUTON ENVOYER (Refonte Complète) */
.btn-news-glass {
    width: 48px; height: 48px;
    /* Dégradé Bleu Subtil + Glass */
    background: rgba(0, 122, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px; /* Squircle (Carré arrondi) */
    
    color: white; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.25); /* Belle ombre bleue */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-shrink: 0;
}

.btn-news-glass:hover {
    transform: translateY(-2px) scale(1.05);
    background: #007AFF; /* Bleu pur au survol */
    box-shadow: 0 12px 25px rgba(0, 122, 255, 0.35);
}

.btn-news-glass:active { transform: scale(0.95); }

/* (Reste du style Newsletter : Badge, Glow... inchangé, inclus via classes précédentes) */


/* ==========================================================================
   34. AJUSTEMENTS PC / DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {

    /* 1. WIDGET ACCUEIL (Gamification) */
    .ios-widget-card {
        width: 50% !important;      /* Largeur réduite */
		margin:0 auto;
        
        /* Petit plus : on l'aligne visuellement avec le titre Hero si besoin */
        transform: none; 
    }

    /* 2. BLOC PUB (Roue) - Trop grand sur PC */
    .ad-content-wrapper {
        /* On force une taille max de lecteur vidéo */
        max-width: 640px !important; 
        width: 100%;
        
        /* On centre la fenêtre de pub au milieu de l'écran */
        margin: 0 auto; 
        
        /* On donne un ratio vidéo cinéma (16/9) pour que ce soit moins haut */
        aspect-ratio: 16 / 9; 
        height: auto !important;
        
        /* Ombre plus prononcée sur PC pour l'effet "Flottant" */
        box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    }

    /* On s'assure que le contenu s'adapte à ce nouveau ratio */
    .ad-video-mockup {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px; /* Arrondi propre */
    }

    /* Réduire la taille des icônes/textes qui sont énormes sur mobile */
    .ad-video-mockup i { font-size: 3rem !important; } /* Icône film plus petite */
    .ad-video-mockup h2 { font-size: 1.5rem !important; }
}


/* ==========================================================================
   35. ALERTE ROUGE IMMERSIVE (ANIMATION DOUCE)
   ========================================================================== */

.red-alert-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 59, 48, 0.3); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex; align-items: center; justify-content: center;
    
    /* DÉPART : Invisible */
    opacity: 0; 
    visibility: hidden;
    
    /* ANIMATION : 0.5 secondes pour un fondu très doux */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}

.red-alert-overlay.active {
    opacity: 1; visibility: visible;
}

.red-alert-card {
    background: rgba(255, 59, 48, 0.95);
    padding: 30px 50px;
    border-radius: 32px;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    box-shadow: 0 20px 60px rgba(255, 59, 48, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Zoom Arrière au départ */
    transform: scale(0.9);
    
    /* Animation du zoom synchronisée avec l'opacité (0.5s) */
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.red-alert-overlay.active .red-alert-card {
    transform: scale(1); /* Zoom Normal à l'arrivée */
}

/* (Le reste ne change pas) */
.alert-logo-white {
    width: 65px; height: auto;
    filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,0.2));
    margin-bottom: 5px;
}
.alert-text {
    color: white; font-size: 1.2rem; font-weight: 800;
    text-align: center; white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}



/* ==========================================================================
   36. HUD ROUE (DESIGN iOS GLASSY)
   ========================================================================== */

/* Conteneur flottant au-dessus de la roue */
.wheel-header-glass {
    position: absolute;
    top: -100px; /* Positionnement au-dessus */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px; /* Espace entre les pilules */
    z-index: 20;
    width: max-content;
}

/* La pilule de verre de base */
.glass-pill {
    background: rgba(255, 255, 255, 0.25); /* Très transparent */
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 20px;
    border-radius: 50px;
    display: flex; align-items: center; gap: 10px;
    color: white;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: transform 0.2s, background 0.2s;
}

/* Pilule XP (Gauche) */
.glass-pill.xp-display {
    cursor: default;
}
.glass-pill.xp-display i { color: #FFD700; filter: drop-shadow(0 0 5px rgba(255,215,0,0.8)); }

/* Pilule PUB (Droite - Bouton) */
.glass-pill.ad-btn {
    cursor: pointer;
    background: rgba(52, 199, 89, 0.25); /* Teinte verte légère */
    border-color: rgba(52, 199, 89, 0.4);
}
.glass-pill.ad-btn:hover {
    transform: translateY(-2px);
    background: rgba(52, 199, 89, 0.4);
}
.glass-pill.ad-btn i { color: #34C759; filter: drop-shadow(0 0 5px rgba(52,199,89,0.8)); }


/* ==========================================================================
   37. ÉCRAN VICTOIRE GOLD (FULLSCREEN)
   ========================================================================== */

.win-gold-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    
    /* Fond Doré Radiant */
    background: radial-gradient(circle at center, #FFD700 0%, #F59E0B 100%);
    
    z-index: 25000; /* Au-dessus de tout, même des alertes */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    
    opacity: 0; visibility: hidden;
    transition: opacity 0.8s ease-in-out;
}

.win-gold-overlay.active { opacity: 1; visibility: visible; }

/* Motif de fond (Logos scintillants) */
.win-pattern-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/logo.png'); /* Votre logo */
    background-size: 80px; /* Taille des mini logos */
    background-repeat: repeat;
    opacity: 0.15;
    mix-blend-mode: overlay; /* Incrustation lumineuse */
    
    /* Animation de scintillement (Zoom lent + Fade) */
    animation: goldShimmer 4s infinite alternate ease-in-out;
}

@keyframes goldShimmer {
    0% { transform: scale(1); opacity: 0.1; }
    100% { transform: scale(1.05); opacity: 0.2; }
}

/* Contenu Central */
.win-content {
    position: relative; z-index: 2;
    text-align: center;
    padding: 20px;
    animation: popUpWin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.win-icon-trophy {
    font-size: 5rem; color: white;
    margin-bottom: 20px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
    animation: bounceWin 2s infinite;
}

.win-title-huge {
    font-size: 2.5rem; font-weight: 900; color: white;
    margin: 0 0 10px 0;
    text-transform: uppercase; letter-spacing: 1px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.win-subtitle {
    font-size: 1.1rem; color: rgba(255, 255, 255, 0.9);
    font-weight: 600; max-width: 80%; margin: 0 auto;
    line-height: 1.4;
}

.btn-win-close {
    margin-top: 40px;
    background: white; color: #F59E0B;
    border: none; padding: 15px 40px; border-radius: 50px;
    font-size: 1.1rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.btn-win-close:active { transform: scale(0.95); }

@keyframes popUpWin {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes bounceWin {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

/* ==========================================================================
   38. CORRECTIF URGENT (ROUE & HUD)
   ========================================================================== */

/* 1. On autorise le HUD à dépasser du cadre de la roue */
.wheel-wrapper {
    overflow: visible !important; 
    position: relative;
    /* Correction : On s'assure qu'aucun autre style ne le coupe */
    contain: none; 
}

/* 2. On remonte le HUD bien plus haut pour ne pas toucher la flèche */
.wheel-header-glass {
    /* REMONTÉE IMPORTANTE : De -60px à -130px */
    top: -130px !important; 
    
    /* Centrage et Z-Index */
    left: 50%;
    transform: translateX(-50%);
    z-index: 150 !important; /* Au-dessus de tout, même du bouton central */
    
    /* Sécurité visuelle */
    width: max-content;
    max-width: 90vw;
    display: flex; gap: 12px; justify-content: center;
}

/* 3. Le Bouton Central "JOUEZ" doit rester cliquable */
.wheel-center-btn {
    z-index: 100 !important; 
    cursor: pointer;
    pointer-events: auto;
}

/* 4. Le Canvas ne doit pas gêner */
#wheel-canvas {
    position: relative;
    z-index: 10;
    pointer-events: none;
}



/* ==========================================================================
   39. HERO GAMIFIÉ (STYLE APPLE FITNESS)
   ========================================================================== */

.ios-hero-gamified {
    padding: 20px 20px 10px 20px;
    max-width: 800px;
    margin: 0 auto;
    /* Marge top gérée par le padding du body/main */
}

@media (min-width: 900px) {
    .ios-hero-gamified { margin-top: 4rem; }
}

/* CARTE PRINCIPALE */
.hero-card-glass {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); /* Ombre très douce */
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    text-align: left; /* Alignement gauche plus pro */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* L'EN-TÊTE : Avatar + Textes */
.hero-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-avatar-circle {
    width: 50px; height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-app);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hero-texts {
    flex: 1;
}

.hero-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 2px;
}

.hero-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;

    line-height: 1.1;
}

/* BARRE DE PROGRESSION (Style iOS) */
.hero-progress-wrapper {
    width: 100%;
}

.hero-progress-labels {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: var(--text-secondary);
    margin-bottom: 6px; font-weight: 500;
}

.hero-track {
    width: 100%; height: 8px;
    background: var(--bg-app); /* Gris clair */
    border-radius: 10px;
    overflow: hidden;
}

.hero-fill {
    height: 100%;
    background: linear-gradient(90deg, #007AFF, #5AC8FA); /* Bleu Apple */
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.3); /* Glow léger */
}

/* BOUTON D'ACTION DISCRET */
.hero-action-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer;
    margin-top: 5px;
}
.hero-action-link:hover { opacity: 0.8; }

/* ==========================================================================
   39. HERO GAMIFIÉ (STYLE "GAME CENTER" BENTO)
   ========================================================================== */

.ios-hero-gamified {
    padding: 15px 20px;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 0px;
	margin-bottom:10px;
}

@media (min-width: 900px) {
    .ios-hero-gamified { margin-top: 5rem; }
}

/* CARTE PRINCIPALE */
.hero-game-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 24px;
    /* Ombre très douce et diffuse pour l'effet "Lévitation" */
    box-shadow: 0 20px 40px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

/* Dégradé d'ambiance en arrière-plan (très subtil) */
.hero-game-card::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,122,255,0.06) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}

/* --- LAYOUT : HEADER (Avatar + Infos) --- */
.game-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    position: relative; z-index: 2;
}

/* Avatar avec Badge de Niveau */
.avatar-wrapper {
    position: relative;
    width: 64px; height: 64px;
}

.game-avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    object-fit: cover;
}

.level-badge {
    position: absolute;
    bottom: -2px; right: -2px;
    background: linear-gradient(135deg, #007AFF, #0055b3);
    color: white;
    font-size: 0.75rem; font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.game-identity h1 {
    font-size: 1.3rem; font-weight: 800; color: #1C1C1E;
    margin: 0 0 4px 0; line-height: 1.1;
}
.game-rank-text {
    font-size: 0.9rem; color: #8E8E93; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.game-rank-text i { color: #FFD700; } /* Icône Or */

/* --- LAYOUT : GRILLE BENTO (Stats) --- */
.game-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 12px;
    margin-bottom: 20px;
    position: relative; z-index: 2;
}

.stat-box {
    background: #F2F2F7;
    border-radius: 16px;
    padding: 12px 15px;
    display: flex; flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s;
}
.stat-box:active { transform: scale(0.98); }

.stat-label {
    font-size: 0.75rem; font-weight: 600; color: #8E8E93; text-transform: uppercase;
    margin-bottom: 4px; display: flex; align-items: center; gap: 5px;
}
.stat-value {
    font-size: 1.1rem; font-weight: 800; color: #1C1C1E;
}

/* Couleurs spécifiques des stats */
.stat-xp .stat-value { color: #007AFF; }
.stat-trophy .stat-value { color: #FF9500; }

/* --- BARRE DE PROGRESSION --- */
.game-progress-wrapper {
    position: relative; z-index: 2;
}
.progress-labels {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; font-weight: 600; color: #3A3A3C; margin-bottom: 6px;
}
.game-track {
    height: 10px; background: #F2F2F7; border-radius: 10px; overflow: hidden;
}
.game-fill {
    height: 100%; background: linear-gradient(90deg, #007AFF, #5AC8FA);
    border-radius: 10px; transition: width 1s ease;
}

/* --- MODE INVITÉ (Call to Action) --- */
.guest-cta-box {
    text-align: center; padding: 10px 0;
}
.guest-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
.guest-desc { font-size: 0.95rem; color: #636366; margin-bottom: 20px; line-height: 1.4; }
.guest-btn {
    background: #1C1C1E; color: white; border: none;
    padding: 14px 24px; border-radius: 16px;
    font-weight: 700; font-size: 1rem; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Mode Sombre */
[data-theme="dark"] .hero-game-card { background: #1C1C1E; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .game-identity h1, [data-theme="dark"] .stat-value, [data-theme="dark"] .guest-title { color: white; }
[data-theme="dark"] .stat-box { background: #2C2C2E; }
[data-theme="dark"] .game-avatar { border-color: #2C2C2E; }
[data-theme="dark"] .guest-btn { background: #fff; color: #000; }