/* Page avis clients — complète styles.css (CSP self, aucun style inline). */

.av-hero { position: relative; min-height: 38svh; display: flex; align-items: center; overflow: hidden; color: #fff; background: #0d0d10; }
.av-hero-bg { position: absolute; inset: -10%; z-index: 0; background-image: url("assets/img/gen-dark.jpg"); background-size: cover; background-position: center; }
.av-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,13,.5) 0%, rgba(10,10,13,.42) 40%, rgba(10,10,13,.78) 100%); }
.av-hero-inner { position: relative; z-index: 2; padding: clamp(76px,10vh,110px) 22px clamp(40px,6vh,64px); }
.av-hero-inner h1 { font-size: clamp(2rem,5vw,3.2rem); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 .4em; text-shadow: 0 4px 36px rgba(0,0,0,.4); max-width: 820px; }
.av-hero-inner .accent { color: #ff8a92; }
.av-badge { display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--red); padding: 6px 14px; border-radius: 999px; margin: 0 0 1.1em; }
.av-lead { max-width: 600px; font-size: clamp(1.05rem,1.7vw,1.25rem); color: rgba(255,255,255,.93); margin: 0 0 1.5em; }
.av-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Deux colonnes : formulaire à gauche, avis à droite (empilées en mobile) */
.av-columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 30px; align-items: start; }
@media (max-width: 900px) { .av-columns { grid-template-columns: 1fr; } }

/* Formulaire */
.av-formcard { max-width: none; margin: 0; }

/* Colonne des avis */
.av-side-title { font-size: 1.15rem; margin: 4px 0 4px; }
.av-side .av-agg { margin: 0 0 12px; }
.av-side .av-list { max-width: none; margin: 0; max-height: 720px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }

/* Widget étoiles : radios en row-reverse pour colorer « jusqu'à » l'étoile survolée/cochée. */
.av-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.av-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.av-stars label { font-size: 2.6rem; line-height: 1; color: #d8d2ca; cursor: pointer; transition: color .12s ease, transform .12s ease; padding: 2px 4px; user-select: none; }
.av-stars label:hover { transform: scale(1.12); }
.av-stars label:hover, .av-stars label:hover ~ label,
.av-stars input:checked ~ label { color: #f5a623; }
.av-stars input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 8px; }
.av-stars-hint { min-height: 1.2em; margin: 4px 0 0; font-size: .9rem; font-weight: 700; color: var(--ink-2); }

/* Écran de remerciement 5 étoiles → Google */
.av-done-google .btn { margin-top: 14px; }
.av-google-hint { font-size: .85rem; color: var(--ink-2); margin: 10px 0 0; }
#av-copy-comment { margin-top: 8px; color: var(--ink); border: 1px solid var(--line); background: var(--paper); }
#av-copy-status { min-height: 1.1em; margin-top: 6px; font-weight: 700; }

/* Agrégat + liste des avis */
.av-agg { font-size: 1.05rem; color: var(--ink-2); margin: 10px 0 0; }
.av-agg-stars { color: #f5a623; letter-spacing: 2px; }
.av-list { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.av-empty { text-align: center; color: var(--ink-2); }
.av-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.av-item-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.av-item-stars { color: #f5a623; letter-spacing: 2px; font-size: 1.05rem; }
.av-item-name { font-weight: 700; }
.av-item-date { font-size: .82rem; color: var(--ink-2); margin-left: auto; }
.av-item-body { color: var(--ink-2); margin: 0; white-space: pre-line; }
.av-item-reply { margin: 12px 0 0; padding: 10px 14px; background: #faf6f2; border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; font-size: .92rem; color: var(--ink-2); }
.av-item-reply strong { color: var(--red); display: block; margin-bottom: 2px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

/* Section « avis » de la page d'accueil (3 derniers avis + CTA) */
.hav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 860px) { .hav-grid { grid-template-columns: 1fr; } }
.hav-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }