/* Cartes d'avis des maquettes de Phil (03/10/2026). Neutres : elles prennent la couleur du texte de la page,
   donc elles marchent sur le fond noir de l'exemple 1 comme sur le fond clair de l'exemple 2. */
.avis-bloc { margin-top: clamp(40px, 6vw, 70px); }
.avis-bloc .avis-titre { margin: 0 0 6px; font: 500 clamp(26px, 3vw, 36px)/1.15 var(--f-titre); }
.avis-mention { display: inline-block; margin: 0 0 22px; padding: 4px 10px; border-radius: 10px; font-size: 12px; letter-spacing: .04em; opacity: .7; border: 1px dashed currentColor; }
.avis-note { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 15px; }
.avis-note b { font-size: 22px; }
.avis-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.avis-carte { padding: 20px; border-radius: 16px; background: rgba(128,128,128,.09); border: 1px solid rgba(128,128,128,.28); display: grid; gap: 10px; align-content: start; }
.avis-tete { display: flex; align-items: center; gap: 12px; }
.avis-rond { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff; background: var(--teinte, #8a6d3b); }
.avis-qui { display: grid; line-height: 1.25; }
.avis-qui b { font-size: 15.5px; }
.avis-qui span { font-size: 12.5px; opacity: .7; }
.etoiles { color: #f5b301; letter-spacing: 2px; font-size: 16px; }
.etoiles .vide { color: rgba(128,128,128,.45); }
.avis-carte p { margin: 0; font-size: 15.5px; line-height: 1.55; }