/* ==========================================================================
   AVIS CLIENTS : l'habillage maison
   --------------------------------------------------------------------------
   Aucune couleur en dur. La page vendre.html bascule entre un theme sombre
   (noir, or) et un theme clair (creme, sarcelle) en changeant ses variables :
   si on ecrit #d4af37 quelque part, la carte reste doree sur fond creme et
   devient illisible. Tout passe donc par var(--...).
   ========================================================================== */

.avis-bandeau {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
}

.avis-note {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.avis-compte {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding-left: 14px;
    border-left: 1px solid var(--border-subtle);
}

.avis-etoiles {
    display: inline-flex;
    gap: 3px;
}

.avis-etoile {
    width: 18px;
    height: 18px;
    fill: var(--accent-gold);
    flex-shrink: 0;
}

.avis-etoile-vide { fill: var(--border-subtle); }

/* Deux colonnes, jamais trois. Une grille qui s'adapte toute seule mettait
   trois cartes en haut et la quatrieme seule en bas, ce qui se voit. Deux
   colonnes tombent juste avec un nombre pair d'avis, et laissent chaque
   carte assez large pour que le texte replie montre cinq vraies lignes. */
.avis-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 760px) {
    .avis-grille { grid-template-columns: repeat(2, 1fr); }
}

.avis-carte {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.avis-carte:hover {
    border-color: var(--accent-gold);
    background: var(--bg-card-hover);
}

.avis-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.avis-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.avis-titre {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.avis-corps p {
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.avis-corps p:last-child { margin-bottom: 0; }

.avis-corps { margin-bottom: 20px; }

/* ==========================================================================
   LE REPLI, SANS UNE LIGNE DE JAVASCRIPT
   --------------------------------------------------------------------------
   Une case a cocher invisible porte l'etat ouvert ou ferme, et le libelle
   qui la suit sert de bouton. Deux consequences qui comptent : le texte
   complet reste ecrit dans la page, donc les moteurs le lisent en entier ;
   et le pliage fonctionne meme si le visiteur bloque le JavaScript.
   La case reste atteignable au clavier, elle est masquee, pas supprimee.
   ========================================================================== */

.avis-bascule {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* LE FONDU DU BAS : ON ESTOMPE LE TEXTE, PAS LE FOND.
   Premiere version : un degrade vers var(--bg-primary) pose par dessus. En
   theme clair, ca sautait aux yeux, parce que la carte n'a pas la couleur de
   la page : elle porte un voile noir a 3 pour cent par dessus. Le degrade
   tirait donc vers un creme plus clair que la carte, et laissait une bande.
   Un masque, lui, ignore completement la couleur du fond : il rend le texte
   progressivement transparent. Il tombe juste dans les deux themes, et meme
   au survol quand la carte s'eclaircit. Le noir ci-dessous n'est pas une
   couleur affichee, c'est le canal qui dit "opaque ici". */
.avis-repliable .avis-corps {
    max-height: 9.2em;
    overflow: hidden;
    margin-bottom: 8px;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.avis-bascule:checked ~ .avis-corps {
    max-height: none;
    margin-bottom: 8px;
    -webkit-mask-image: none;
    mask-image: none;
}

.avis-plus {
    align-self: flex-start;
    display: inline-block;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.avis-plus:hover { opacity: 0.7; }

.avis-plus-fermer { display: none; }
.avis-bascule:checked ~ .avis-plus .avis-plus-ouvrir { display: none; }
.avis-bascule:checked ~ .avis-plus .avis-plus-fermer { display: inline; }

/* Au clavier, on doit voir ou on se trouve. */
.avis-bascule:focus-visible ~ .avis-plus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

.avis-pied {
    display: flex;
    align-items: center;
    gap: 12px;
    /* auto, et pas une valeur fixe : quand un avis est plus court que son
       voisin, sa signature descend quand meme en bas de carte. Deux cartes
       cote a cote dont les pieds ne s'alignent pas, ca se voit tout de suite. */
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.avis-initiale {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--accent-gold);
    font-weight: 700;
}

.avis-identite {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.avis-nom {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.avis-source {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.avis-garantie {
    margin: 30px 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.avis-garantie a {
    color: var(--accent-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.avis-garantie a:hover { color: var(--accent-gold-hover); }

@media (max-width: 600px) {
    .avis-carte { padding: 20px; }
    .avis-compte { padding-left: 0; border-left: none; }
}