/*body {*/
/*    background-color: skyblue;*/
/*}*/

.autocomplete-list {
    cursor: pointer;
}
.search-wrapper {
    position: relative;
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 10px;
    color: #6c757d;
    z-index: 10;
    pointer-events: none;
}

.search-input {
    width: 250px; /* Ajustez selon vos besoins */
    padding-left: 30px; /* Espace pour l'icône à gauche */
}

/* Styles pour rendre le tableau responsive */
#words-container {
    overflow-x: auto; /* Permet le défilement horizontal si nécessaire */
    max-width: 100%; /* S'assure que le conteneur ne dépasse pas sa div parente */
}

table {
    width: 100%; /* Le tableau prend toute la largeur disponible */
    table-layout: fixed; /* Aide à contrôler la largeur des colonnes */
}

/* Sur les petits écrans */
@media (max-width: 768px) {
    table {
        font-size: 0.9rem; /* Réduit légèrement la taille de police sur mobile */
    }

    /* Si nécessaire, vous pouvez ajuster la largeur des colonnes spécifiques */
    table th, table td {
        word-break: break-word; /* Permet aux mots longs de se couper */
        white-space: normal; /* Permet le retour à la ligne du texte */
    }
}
/* Dans votre fichier CSS */
.tooltip {
    opacity: 1 !important;
}

.tooltip .tooltip-inner {
    /*background-color: #FF6F0F;*/
    background-color: #FFF0E6;
    color: #FF6F0F;
    border-radius: 10px;
    padding: 10px 15px;
    max-width: 300px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.tooltip .tooltip-arrow::before {
    border-top-color: #FF6F0F;
}

/* Flèche du haut (pour les tooltips positionnés en bas) */
.tooltip .tooltip-arrow::before {
    border-top-color: #FF6F0F;
}

/* Flèche du bas (pour les tooltips positionnés en haut) */
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #FF6F0F !important;
}

/* Flèche de gauche (pour les tooltips positionnés à droite) */
.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #FF6F0F !important;
}

/* Flèche de droite (pour les tooltips positionnés à gauche) */
.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #FF6F0F !important;
}

/* Réduction de la hauteur du carrousel */
#header-carousel .carousel-item {
    height: 500px; /* ajuste à la hauteur souhaitée */
}

#header-carousel .carousel-item img {
    height: 100%;
    object-fit: cover;
}

/* Réduction des marges internes des textes */
.carousel-caption .col-lg-7 {
    padding-top: 2rem; /* réduit le padding vertical */
}

.carousel-caption h1 {
    font-size: 2.5rem; /* réduit la taille du titre */
    margin-bottom: 1rem;
}

.carousel-caption p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
/* NOUVEAU CODE (solution) : */
.card-img-top {
    width: 100%;
    height: 250px; /* Hauteur fixe plus appropriée */
    object-fit: cover;
    object-position: center center; /* Centre l'image */
}

/* Version responsive améliorée : */
@media (max-width: 1200px) {
    .card-img-top {
        height: 220px;
    }
}

@media (max-width: 992px) {
    .card-img-top {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .card-img-top {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .card-img-top {
        height: 150px;
    }
}

/* Si vous voulez différencier les types d'images : */

/* Pour l'illustration vectorielle */
.card-img-top.illustration {
    height: auto; /* Préserve les proportions */
    max-height: 250px;
    object-fit: contain; /* Évite la compression */
    background-color: var(--light); /* Fond si nécessaire */
    padding: 20px; /* Espace autour de l'illustration */
}

/* Pour les photos réelles */
.card-img-top.photo {
    height: 250px;
    object-fit: cover;
    object-position: center center;
}

/* Alternative : hauteur basée sur le ratio d'aspect */
.card-img-aspect {
    width: 100%;
    aspect-ratio: 16/9; /* Ou 4/3 selon vos besoins */
    object-fit: cover;
    object-position: center center;
}
/* Image theme responsive */
.theme-image-responsive {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center center;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .theme-image-responsive {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 576px) {
    .theme-image-responsive {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .theme-image-responsive {
        width: 100px;
        height: 100px;
    }
}

/* Amélioration des cards existantes */
#cards-container .card {
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--primary) !important;
    transition: all 0.3s ease;
}

#cards-container .card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 5px 15px rgba(255, 111, 15, 0.2); /* Ombre couleur primary */
    transform: translateY(-3px);
}

/* ===== SYSTÈME DE FAVORIS - À ajouter à la fin de app.css ===== */

/* États visuels des cartes */
.card.word-available {
    opacity: 1;
    transition: all 0.3s ease;
}

.card.word-available:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 111, 15, 0.3);
}

/* Carte déjà dans les favoris */
.card.word-favorited {
    opacity: 0.6;
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #6c757d !important;
    pointer-events: none;
}

.card.word-favorited:hover {
    transform: none;
    box-shadow: none;
}

/* Badge "Dans mes favoris" */
.card.word-favorited::before {
    content: "✓ Dans mes favoris";
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* Désactiver les éléments dans les cartes favorisées */
.card.word-favorited .btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.card.word-favorited .accordion-button {
    opacity: 0.7;
    pointer-events: none;
}

/* Boutons favoris */
.word-favorite {
    transition: all 0.3s ease;
}

.word-favorite[data-favorited="false"] {
    background-color: transparent;
    border-color: #dc3545;
    color: #dc3545;
}

.word-favorite[data-favorited="false"]:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    transform: scale(1.05);
}

.word-favorite[data-favorited="true"] {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Animation d'ajout aux favoris */
.card.adding-to-favorites {
    animation: addingFavorite 1s ease-in-out;
}

@keyframes addingFavorite {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); box-shadow: 0 0 20px rgba(40, 167, 69, 0.5); }
    100% { opacity: 0.6; transform: scale(1); }
}

/* Toasts */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1055;
}

.toast {
    min-width: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.bg-success { background-color: #28a745 !important; }
.toast.bg-danger { background-color: #dc3545 !important; }
.toast.bg-info { background-color: var(--primary) !important; }

.toast-body {
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Responsive */
@media (max-width: 576px) {
    #toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }

    .toast {
        min-width: auto;
        width: 100%;
    }

    .card.word-favorited::before {
        font-size: 10px;
        padding: 3px 6px;
        top: 8px;
        right: 8px;
    }
}

/* À ajouter dans le CSS de _cards_list.html.twig ou dans style.css */

/* État de chargement pour le bouton favori */
.btn-action.loading {
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}

.btn-action.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles pour les toasts (notifications) */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1055;
    max-width: 350px;
}

.toast {
    min-width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
}

.toast.bg-success {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
}

.toast.bg-danger {
    background: linear-gradient(135deg, #dc3545, #fd7e14) !important;
}

.toast.bg-primary {
    background: linear-gradient(135deg, var(--primary), #fd7e14) !important;
}

.toast-body {
    font-weight: 500;
    padding: 12px 16px;
}

/* Modal de connexion requise */
#loginRequiredModal .modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#loginRequiredModal .modal-header {
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px 15px 0 0;
}

/* Responsive pour les toasts */
@media (max-width: 576px) {
    #toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .toast {
        min-width: auto;
        width: 100%;
    }
}

/* Animation de pulsation pour indiquer qu'un élément est cliquable */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 111, 15, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 111, 15, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 111, 15, 0); }
}

.btn-action.btn-favorite:not(.favorited):hover {
    animation: pulse 1.5s infinite;
}

/* États des éléments dans la liste selon leur statut de favori */
.word-list-item.favorited .word-name h5 {
    color: #6c757d;
}

.word-list-item.favorited .word-definition p {
    color: #999;
}

.word-list-item.favorited .badge {
    opacity: 0.7;
}


/* Styles pour les statistiques dans la modal */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stat-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border-left: 4px solid var(--primary);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.popularity-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 5px;
}

.popularity-very-popular { background: #d4edda; color: #155724; }
.popularity-popular { background: #d1ecf1; color: #0c5460; }
.popularity-moderate { background: #fff3cd; color: #856404; }
.popularity-low { background: #f8d7da; color: #721c24; }
.popularity-new { background: #e2e3e5; color: #495057; }

.difficulty-easy { background: #d4edda; color: #155724; }
.difficulty-medium { background: #fff3cd; color: #856404; }
.difficulty-hard { background: #ffeaa7; color: #6c5ce7; }
.difficulty-very-hard { background: #f8d7da; color: #721c24; }

.progress-comparison {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.comparison-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0;
    position: relative;
}

.comparison-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #28a745);
    transition: width 0.8s ease;
}

.comparison-marker {
    position: absolute;
    top: -5px;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.recommendations-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.recommendation-item {
    background: white;
    border-left: 4px solid;
    padding: 15px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.recommendation-high { border-left-color: #dc3545; }
.recommendation-medium { border-left-color: #ffc107; }
.recommendation-low { border-left-color: #28a745; }

.similar-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.similar-word-tag {
    background: var(--primary);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.similar-word-tag:hover {
    background: #e67c3a;
    transform: translateY(-2px);
}

.progress-chart {
    height: 200px;
    margin: 20px 0;
    position: relative;
}

.chart-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%),
    linear-gradient(-45deg, #f8f9fa 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f8f9fa 75%),
    linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
}

.tab-stats {
    display: flex;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
}

.tab-stats button {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.tab-stats button.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-stats button:hover {
    background: rgba(255, 111, 15, 0.05);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Styles responsifs */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card {
        padding: 10px;
    }

    .stat-value {
        font-size: 1.2rem;
    }
}

/* Badges sur les boutons - positionnement forcé */
.btn-card.position-relative {
    overflow: visible !important; /* Force l'overflow visible */
    position: relative;
}

.btn-card .badge.position-absolute {
    position: absolute !important;
    top: -10px !important;  /* Plus négatif pour sortir davantage */
    right: -10px !important; /* Plus négatif pour sortir davantage */
    left: auto !important;
    transform: none !important;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25em 0.5em;
    z-index: 100; /* Z-index plus élevé */
    border: 2px solid white; /* Bordure blanche pour le détacher visuellement */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Ombre pour le relief */
}

/* Badge vert pour "connu" */
.btn-card .badge.bg-success {
    background-color: #28a745 !important;
}

/* Badge orange pour "inconnu" */
.btn-card .badge.bg-warning {
    background-color: #ffc107 !important;
}

/* Responsive */
@media (max-width: 767.98px) {
    .btn-card .badge.position-absolute {
        top: -8px !important;
        right: -8px !important;
        min-width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
}

/* CORRECTION : Permettre aux badges de sortir complètement */
.card-footer {
    background-color: #FFFFFF;
    overflow: visible !important; /* Permettre le débordement */
}

.card-footer .container,
.card-footer .row,
.card-footer .col-12 {
    overflow: visible !important; /* Tous les conteneurs doivent permettre le débordement */
}

/* Badges sur les boutons - positionnement amélioré */
.btn-card.position-relative {
    overflow: visible !important;
    position: relative;
    z-index: 1; /* Pour que le badge soit au-dessus */
}

.btn-card .badge.position-absolute {
    position: absolute !important;
    top: -12px !important;  /* Encore plus négatif */
    right: -12px !important; /* Encore plus négatif */
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35em 0.6em;
    z-index: 1000 !important; /* Z-index très élevé */
    border: 2px solid white;
    border-radius: 50%; /* Circulaire au lieu de pill */
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Badge vert pour "connu" */
.btn-card .badge.bg-success {
    background-color: #28a745 !important;
    color: white !important;
}

/* Badge orange pour "inconnu" */
.btn-card .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* S'assurer que le groupe de boutons n'interfère pas */
.btn-group-responsive {
    overflow: visible !important;
    position: relative;
}

/* Responsive */
@media (max-width: 767.98px) {
    .btn-card .badge.position-absolute {
        top: -10px !important;
        right: -10px !important;
        min-width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
}