/**
 * Styles pour l'affichage des avis (étoiles, notes, nombre)
 * Utilisé sur les fiches et les listes d'activités
 * Annuaire Tourisme France - 2025
 */

/* === BLOC D'AFFICHAGE DES AVIS === */
.bloc-avis-fiche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-height: 30px;
}

/* Hexagones (remplace les étoiles) */
.avis-etoiles {
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
}

/* Hexagone avec pointe vers le haut */
.hexagone-complet,
.hexagone-demi,
.hexagone-vide {
    display: inline-block;
    width: 20px;
    height: 23px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.2s ease;
}

.hexagone-complet:hover,
.hexagone-demi:hover,
.hexagone-vide:hover {
    transform: scale(1.1);
}

/* Hexagone complet - bleu clair */
.hexagone-complet {
    background: linear-gradient(135deg, #64B5F6 0%, #42A5F5 100%);
    box-shadow: 0 2px 4px rgba(66, 165, 245, 0.3);
}

/* Demi-hexagone - moitié bleu, moitié gris */
.hexagone-demi {
    background: linear-gradient(90deg, #64B5F6 50%, #CCC 50%);
    box-shadow: 0 2px 4px rgba(66, 165, 245, 0.2);
}

/* Hexagone vide - gris clair */
.hexagone-vide {
    background: #CCC;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Note et nombre d'avis */
.avis-note {
    font-size: 18px;
    font-weight: 500;
    color: #fff; /* Blanc par défaut pour les cards classiques avec fond sombre */
}

.avis-nombre {
    font-size: 14px;
    color: #fff; /* Blanc par défaut pour les cards classiques avec fond sombre */
}

/* Sur les modern-cards, adapter les couleurs */
.modern-card .avis-note {
    color: #333; /* Texte foncé sur fond clair */
}

.modern-card .avis-nombre {
    color: #666; /* Texte gris sur fond clair */
}

.lien-vers-avis {
    color: #2196F3;
    text-decoration: none;
    transition: all 0.2s ease;
}

.lien-vers-avis:hover {
    color: #1976D2;
    text-decoration: underline;
}

/* Support du thème sombre */
@media (prefers-color-scheme: dark) {
    .lien-vers-avis {
        color: #64B5F6;
    }
    
    .lien-vers-avis:hover {
        color: #90CAF9;
    }
    
    /* Hexagones en mode sombre - plus lumineux */
    .hexagone-complet {
        background: linear-gradient(135deg, #90CAF9 0%, #64B5F6 100%);
        box-shadow: 0 2px 6px rgba(144, 202, 249, 0.4);
    }
    
    .hexagone-demi {
        background: linear-gradient(90deg, #90CAF9 50%, #555 50%);
        box-shadow: 0 2px 4px rgba(144, 202, 249, 0.3);
    }
    
    .hexagone-vide {
        background: #555;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    /* Modern-cards en mode sombre */
    .modern-card .avis-note {
        color: #fff; /* Texte blanc sur fond sombre */
    }
    
    .modern-card .avis-nombre {
        color: #bbb; /* Texte gris clair sur fond sombre */
    }
}

/* Responsive */
@media only screen and (max-width: 600px) {
    .bloc-avis-fiche {
        gap: 6px;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 5px 0;
    }
    
    .avis-etoiles {
        font-size: 16px;
        gap: 2px;
    }
    
    /* Hexagones plus petits sur mobile */
    .hexagone-complet,
    .hexagone-demi,
    .hexagone-vide {
        width: 16px;
        height: 18px;
    }
    
    .avis-note {
        font-size: 14px;
    }
    
    .avis-nombre {
        font-size: 11px;
    }
    
    /* Fix spécifique pour les cards horizontales sur mobile */
    .card.horizontal .card-stacked .card-ligne .bloc-avis-fiche,
    .card-ligne .bloc-avis-fiche {
        width: 100%;
        clear: both;
        position: relative;
        z-index: 1;
    }
    
    /* Assurer que le conteneur parent ne masque pas les avis */
    .card-ligne {
        overflow: visible !important;
    }
    
    .card.horizontal .card-stacked {
        overflow: visible !important;
    }
}