/* ═══ Page Avis (Gosset) ═══ */

.avis-hero { background: var(--navy); color: #fff; padding: clamp(118px, 15vw, 150px) 0 clamp(40px, 5vw, 58px); }
.avis-hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.avis-hero .kicker { color: var(--ciel); }
.avis-hero .kicker::before { background: var(--ciel); }
.avis-hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); margin-top: 6px; max-width: 18ch; }
.avis-hero-lead { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.6; max-width: 56ch; margin-top: 18px; }

.avis-body { background: var(--cream); padding: clamp(48px, 7vw, 84px) var(--gut) clamp(56px, 8vw, 96px); }
.avis-grid { max-width: var(--wrap); margin: 0 auto; columns: 3; column-gap: 24px; }
.avis-card {
  break-inside: avoid; margin: 0 0 24px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 26px 26px 22px;
  position: relative; box-shadow: 0 2px 14px rgba(2,54,75,.04);
}
.avis-quote { position: absolute; top: 22px; right: 22px; width: 34px; color: var(--sage); opacity: .6; }
.avis-card blockquote { margin: 0 0 18px; color: var(--text); font-size: 15.5px; line-height: 1.68; position: relative; z-index: 1; }
.avis-card figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 14px; }
.avis-card figcaption b { color: var(--navy); font-weight: 500; font-size: 15.5px; }
.avis-card figcaption span { color: var(--pourpre); font-size: 13px; letter-spacing: .02em; }

.avis-cta { background: var(--navy); color: #fff; text-align: center; padding: clamp(64px, 9vw, 110px) var(--gut); }
.avis-cta .kicker { color: var(--ciel); justify-content: center; display: inline-flex; }
.avis-cta .kicker::before { background: var(--ciel); }
.avis-cta h2 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); margin: 8px auto 14px; max-width: 20ch; }
.avis-cta p { color: rgba(255,255,255,.72); max-width: 46ch; margin: 0 auto 28px; line-height: 1.7; }

@media (max-width: 900px) { .avis-grid { columns: 2; } }
@media (max-width: 600px) {
  .avis-grid { columns: 1; }
  .avis-hero { padding-top: 96px; }
}