/* =========================================
   1. STRUCTURE GÉNÉRALE ET SURCHARGES
   ========================================= */

/* Fond beige de la page (Style Inscription) */
.profile-body {
    background-color: var(--beige-bg, #FCF9F2);
}

.main-header {
    background-color: var(--bg-color, #ffffff);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.nav-link-main:hover,
.nav-item-dropdown:hover .nav-link-main {
    background-color: var(--purple-light, #F8F2FB);
    color: var(--purple-text, #8A4BAF);
}

.search-wrapper:hover .search-input,
.search-input:focus {
    width: 200px;
    opacity: 1;
    padding: 8px 18px; 
    margin-right: 10px;
    background-color: var(--purple-light); 
}

/* =========================================
   2. AVATARS ET ONGLETS (SIDEBAR)
   ========================================= */

/* Avatar Principal Sidebar */
.profile-avatar-large {
    width: 100px; height: 100px;
    border-radius: 50%;
    background-color: var(--purple-light);
    border: 3px solid var(--purple-light);
}
.profile-avatar-large img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.edit-avatar-btn {
    position: absolute; bottom: 0; right: 0;
    background-color: var(--purple-mid); color: white;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer;
    border: 2px solid white; transition: all 0.2s ease;
}
.edit-avatar-btn:hover { background-color: var(--purple-text); transform: scale(1.1); }
.edit-avatar-btn.disabled { pointer-events: none; opacity: 0.6; }

/* Onglets de navigation (Tabs) */
.custom-profile-tabs .nav-link {
    color: var(--text-main); font-weight: 600;
    padding: 12px 20px; border-radius: 50px;
    margin-bottom: 8px; transition: all 0.2s ease;
}
/* Effet au survol pour les onglets classiques (hors bouton déconnexion) */
.custom-profile-tabs .nav-link:not(.text-danger):hover {
    background-color: #f3f2f2; /* Fond violet clair */
    color: var(--purple-text, #8A4BAF); /* Texte et icône en violet */
}
.custom-profile-tabs .nav-link.active { background-color: var(--purple-light); color: var(--purple-text); }

.custom-profile-tabs .nav-link.text-danger:hover {
    background-color: #FDEAEA !important;
    color: #E74C3C !important;
}

/* =========================================
   3. CHAMPS DE FORMULAIRE & TITRES
   ========================================= */

.form-label {
    font-weight: 800; font-size: 13px; color: var(--text-title);
    margin-left: 15px; margin-bottom: 6px; display: inline-block;
}

.custom-input {
    border-radius: 25px; border: 2px solid var(--border-color);
    padding: 12px 20px; font-size: 14px; font-weight: 500;
    color: var(--text-main); background-color: #FAFAFA;
    transition: all 0.3s ease; box-shadow: none !important;
}
.custom-input:focus {
    border-color: var(--purple-mid); background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(211, 184, 232, 0.3) !important; 
}
.custom-input::placeholder { color: #B0B0B0; font-weight: 400; }

/* Bouton Retour (Vue Quiz) */
.btn-back-view {
    width: 40px; height: 40px; border-radius: 50%;
    background-color: var(--purple-light); color: var(--purple-text);
    border: none; font-size: 18px; display: flex;
    align-items: center; justify-content: center; transition: all 0.2s ease;
}
.btn-back-view:hover { background-color: var(--purple-text); color: white; transform: translateX(-3px); }

.custom-hover-link:hover { color: var(--purple-mid) !important; }

/* =========================================
   4. PALETTE DE COULEURS PASTEL GLOBAUX
   ========================================= */

/* Violet */
.bg-purple-light { background-color: var(--purple-light, #F8F2FB); }
.text-purple { color: var(--purple-text, #8A4BAF); }
.bg-purple { background-color: var(--purple-text, #8A4BAF) !important; }

/* Rose */
.bg-pink-light { background-color: #FFF0F5; }
.text-pink { color: #D87093; }

/* Jaune */
.bg-yellow-light { background-color: #FFF9E6; }
.text-yellow { color: #DAA520; }

/* Bleu */
.bg-blue-light { background-color: #E8F4FA; }
.text-blue { color: #5B9BD5; }

/* Vert */
.bg-green-light { background-color: #EAF4E8; }
.text-green { color: #6EBD64; }

/* Pêche */
.bg-peach-light { background-color: #FDF0E6; }
.text-peach { color: #F19253; }

/* Couleurs Scores (Succès/Warning/Erreur) */
.bg-success-soft { background-color: #E8F5E9; }
.text-success { color: #2E7D32 !important; }
.bg-warning-soft { background-color: #FFF8E1; }
.text-warning { color: #F57F17 !important; }
.bg-danger-soft { background-color: #FDEAEA; }
.text-danger { color: #E74C3C !important; }

/* =========================================
   5. DOSSIERS (MES FAVORIS)
   ========================================= */

.folder-card {
    border: 2px solid var(--border-color); border-radius: 30px;
    background-color: #ffffff; transition: all 0.3s ease; cursor: pointer;
}
.folder-icon {
    width: 45px; height: 45px; border-radius: 50px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}

/* Survol des cartes selon leur couleur */
.folder-purple:hover { border-color: var(--purple-text); background-color: var(--purple-light); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(138, 75, 175, 0.15); }
.folder-pink:hover { border-color: #D87093; background-color: #FFF0F5; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(216, 112, 147, 0.15); }
.folder-yellow:hover { border-color: #DAA520; background-color: #FFF9E6; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(218, 165, 32, 0.15); }
.folder-blue:hover { border-color: #5B9BD5; background-color: #E8F4FA; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(91, 155, 213, 0.15); }
.folder-green:hover { border-color: #6EBD64; background-color: #EAF4E8; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(110, 189, 100, 0.15); }
.folder-peach:hover { border-color: #F19253; background-color: #FDF0E6; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(241, 146, 83, 0.15); }

/* Menu 3 petits points */
.folder-options-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #999; font-size: 18px; cursor: pointer; transition: all 0.2s ease;
}
.folder-options-btn:hover, .dropdown.show .folder-options-btn { background-color: rgba(0,0,0,0.05); color: var(--text-title); }

.dropdown-custom-folder {
    border-radius: 25px; padding: 10px; min-width: 180px;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    background-color: var(--bg-color);
}
.dropdown-custom-folder .dropdown-item {
    border-radius: 25px; padding: 10px 15px; font-size: 13px; font-weight: 600;
    color: var(--text-main); margin-bottom: 5px;
}
.dropdown-custom-folder .dropdown-item:last-child { margin-bottom: 0; }
.dropdown-custom-folder .dropdown-item:hover { background-color: var(--purple-light); color: var(--purple-text); }
.dropdown-custom-folder .dropdown-item-danger { color: #e74c3c !important; }
.dropdown-custom-folder .dropdown-item-danger:hover { background-color: #fdeaea !important; color: #c0392b !important; }

/* =========================================
   6. LISTE DE COURSES
   ========================================= */

.shopping-item {
    background-color: #fafafa; border-radius: 25px;
    border: 2px solid transparent; transition: all 0.3s ease;
}
.shopping-item:hover { border-color: var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }

.custom-checkbox { width: 22px; height: 22px; accent-color: var(--purple-text); cursor: pointer; }
.custom-checkbox:checked + .item-text { text-decoration: line-through; color: #b0b0b0 !important; transition: all 0.2s ease; }

.btn-delete-item {
    background: transparent; border: none; color: #d1d1d1;
    width: 32px; height: 32px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s ease;
}
.shopping-list-card {
    border: 2px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #ffffff;
}
.shopping-list-toggle {
    flex: 1;
    border-radius: 0 !important;
    color: var(--text-main);
    font-weight: 700;
    background-color: #ffffff;
    box-shadow: none !important;
}
.shopping-list-toggle:not(.collapsed) {
    color: var(--purple-text);
    background-color: var(--purple-light);
}
.shopping-list-delete {
    width: 48px;
    align-self: stretch;
    border: 0;
    border-left: 1px solid var(--border-color);
    background: transparent;
    color: #d1d1d1;
}
.shopping-list-delete:hover {
    color: #e74c3c;
    background-color: #fdeaea;
}
.shopping-list-card .accordion-body {
    padding: 16px;
    background-color: #fffdfb;
}
/* Zone d'ajout manuel */
.add-item-wrapper .custom-input { border-radius: 25px 0 0 25px; border-right: none; }
.add-item-wrapper .btn-filled { border-radius: 0 25px 25px 0; padding: 12px 25px; }

.custom-btn.btn-outline.text-danger:hover {
    background-color: #f9d0d0 !important; 
    color: #E74C3C !important;
    border-color: #E74C3C !important;
}

/* =========================================
   7. TABLEAU DE BORD QUIZ ET BADGES
   ========================================= */

/* Jauge XP */
.quiz-stats-card { border-radius: 25px; background-color: #fafafa; border: 2px solid var(--border-color); }
.level-badge {
    width: 65px; height: 65px; border-radius: 50%; background-color: var(--purple-text); color: white;
    display: flex; align-items: center; justify-content: center; font-family: 'Paytone One', sans-serif;
}

/* Tableau Historique Quiz */
.custom-table { border-collapse: separate; border-spacing: 0 10px; }
.custom-table td { border-top: 2px solid var(--border-color); border-bottom: 2px solid var(--border-color); padding: 15px; background-color: #ffffff; }
.custom-table td:first-child { border-left: 2px solid var(--border-color); border-radius: 25px 0 0 25px; }
.custom-table td:last-child { border-right: 2px solid var(--border-color); border-radius: 0 25px 25px 0; }

.quiz-icon { width: 40px; height: 40px; border-radius: 25px; display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* Badges Débloqués / Verrouillés */
.badge-card { border: 2px solid var(--border-color); border-radius: 25px; transition: all 0.3s ease; position: relative; background-color: #ffffff; height: 100%; }
.badge-card.unlocked { cursor: pointer; }
.badge-card.unlocked:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(138, 75, 175, 0.15); border-color: var(--purple-text); }
.badge-card.locked { background-color: #f9f9f9; border: 2px dashed #d1d1d1; opacity: 0.7; cursor: not-allowed; }

.badge-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.badge-card.locked .lock-icon {
    position: absolute; top: -12px; right: -12px; background-color: #d1d1d1; color: white;
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; border: 3px solid #ffffff; box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* =========================================
   PAGINATION (HISTORIQUE DES QUIZ)
   ========================================= */
.custom-pagination .page-link {
    color: var(--text-main, #222);
    border: none;
    margin: 0 5px;
    border-radius: 50% !important; 
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    background-color: #ffffff; 
}

/* Effet au survol */
.custom-pagination .page-link:hover {
    background-color: var(--purple-light, #F8F2FB);
    color: var(--purple-text, #8A4BAF);
    transform: translateY(-2px);
}

/* Page active (Celle où l'on se trouve) */
.custom-pagination .page-item.active .page-link {
    background-color: var(--purple-text, #8A4BAF);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(138, 75, 175, 0.3) !important;
}

/* Boutons Précédent/Suivant désactivés */
.custom-pagination .page-item.disabled .page-link {
    color: #d1d1d1;
    background-color: #fafafa;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* =========================================
   8. MODALES (CARNET ET RÈGLES)
   ========================================= */

.custom-modal-backdrop { backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.4); }
.custom-modal { background-color: var(--bg-color); border-radius: 40px; border: none; padding: 40px 30px; box-shadow: 0 15px 30px rgba(0,0,0,0.2); }

.custom-close-btn {
    position: absolute; top: 20px; right: 25px; background: transparent; border: none;
    font-size: 32px; line-height: 1; color: #B0B0B0; cursor: pointer; transition: color 0.2s ease; z-index: 10;
}
.custom-close-btn:hover { color: var(--purple-text); }

/* SÉLECTEUR DE COULEURS MODALE (RESPONSIVE)*/
.folder-color-picker input { display: none; }

/* Taille pour Mobile (Plus petits pour tenir sur une ligne) */
.color-swatch {
    width: 45px; 
    height: 45px; 
    border-radius: 25px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 20px; 
    cursor: pointer; 
    border: 3px solid transparent; 
    transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1); 
    position: relative;
}

/* Taille pour Ordinateur et Tablette (Reprend une taille normale) */
@media (min-width: 576px) {
    .color-swatch { 
        width: 55px; 
        height: 55px; 
        border-radius: 25px; 
        font-size: 24px; 
    }
}

.color-swatch:hover { transform: scale(1.1) translateY(-3px); }

/* Effet au survol du sélecteur */
.color-swatch.bg-purple-light:hover { border-color: var(--purple-text); box-shadow: 0 5px 15px rgba(138,75,175,0.2); }
.color-swatch.bg-pink-light:hover { border-color: #D87093; box-shadow: 0 5px 15px rgba(216,112,147,0.2); }
.color-swatch.bg-yellow-light:hover { border-color: #DAA520; box-shadow: 0 5px 15px rgba(218,165,32,0.2); }
.color-swatch.bg-blue-light:hover { border-color: #5B9BD5; box-shadow: 0 5px 15px rgba(91,155,213,0.2); }
.color-swatch.bg-green-light:hover { border-color: #6EBD64; box-shadow: 0 5px 15px rgba(110,189,100,0.2); }
.color-swatch.bg-peach-light:hover { border-color: #F19253; box-shadow: 0 5px 15px rgba(241,146,83,0.2); }

/* Validation (Encoche) */
.folder-color-picker input:checked + label { transform: scale(1.15); }
#colorPurple:checked + label { border-color: var(--purple-text); }
#colorPink:checked + label { border-color: #D87093; }
#colorYellow:checked + label { border-color: #DAA520; }
#colorBlue:checked + label { border-color: #5B9BD5; }
#colorGreen:checked + label { border-color: #6EBD64; }
#colorPeach:checked + label { border-color: #F19253; }

.folder-color-picker input:checked + label::after {
    content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; bottom: -5px; right: -5px; background-color: var(--text-title);
    color: #ffffff; font-size: 10px; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}