/* ============================================================
   TULIPE PALETTES - PAGE AVIS (pages/avis/)
   Les cartes (.testimonial-card*) et leurs variables viennent de css/home/carrousel-avis.css (chargée avant ce fichier,
   variables scopées à .testimonials : <main> porte aussi cette classe). Ici : en-tête, grille 3 / 2 / 1 colonnes,
   « Voir plus » et conteneur du futur formulaire. Variables locales scopées à .avis-page.
   ============================================================ */
.avis-page {
  --av-gap: clamp(16px, 2vw + 6px, 32px);
  --av-section-gap: clamp(40px, 5vw, 72px);
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding: var(--page-top-gap) var(--container-padding-x) var(--section-padding-y);
  background: transparent;
}
.avis-page__breadcrumb { margin-bottom: clamp(24px, 3.5vw, 48px); }

/* ---------- En-tête ---------- */
.avis-header { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: var(--av-section-gap); }
.avis-header__title { font-size: var(--fs-page-title); font-weight: 600; line-height: 1.1; color: var(--color-forest); }
.avis-header__intro { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-ink); }
.avis-header__transparency { margin-bottom: 0; }
.avis-header__rating { justify-content: flex-start; }
.avis-header__cta { margin-top: 8px; }

/* ---------- « Comment ça marche » ---------- */
.avis-how { max-width: 720px; margin: calc(-1 * var(--av-section-gap) + 24px) 0 var(--av-section-gap); }
.avis-how__details { border: 1px solid var(--color-border); border-radius: var(--r-card); background: var(--color-paper); }
.avis-how__summary { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 52px 0 20px; list-style: none; font-size: var(--fs-base); font-weight: 600; color: var(--color-forest); cursor: pointer; }
.avis-how__summary::-webkit-details-marker { display: none; }
.avis-how__summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4A34' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .2s ease; }
.avis-how__details[open] > .avis-how__summary::after { transform: rotate(180deg); }
.avis-how__summary:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 2px; border-radius: var(--r-card); }
.avis-how__text { padding: 0 20px 20px; font-size: var(--fs-base); line-height: 1.6; color: var(--color-ink); }

/* ---------- Grille : 3 colonnes, 2 sous 1024 px, 1 sous 768 px ---------- */
.avis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--av-gap); }
.avis-grid__item { display: flex; min-width: 0; } /* l'article prend toute la hauteur de la rangée */
.avis-grid__item .testimonial-card { width: 100%; }
.testimonial-card:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 2px; }
.testimonial-card:focus:not(:focus-visible) { outline: none; }

.avis-more { display: flex; justify-content: center; margin-top: var(--av-section-gap); }
.avis-more[hidden] { display: none; }

/* ---------- Formulaire : une colonne centrée (720 px) ---------- */
.avis-form { max-width: 720px; margin: var(--av-section-gap) auto 0; padding-top: var(--av-section-gap); border-top: 1px solid var(--color-border); scroll-margin-top: 96px; }
.avis-form__title { margin-bottom: 20px; font-size: var(--fs-section-title); font-weight: 600; line-height: 1.2; color: var(--color-forest); }

.review-help { margin-bottom: 24px; border: 1px solid var(--color-border); border-radius: var(--r-card); background: var(--color-paper); }
.review-help__summary { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 52px 0 20px; list-style: none; font-size: var(--fs-base); font-weight: 600; color: var(--color-forest); cursor: pointer; }
.review-help__summary::-webkit-details-marker { display: none; }
.review-help__summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4A34' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .2s ease; }
.review-help[open] > .review-help__summary::after { transform: rotate(180deg); }
.review-help__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--r-card); }
.review-help__list { padding: 0 20px 20px 40px; list-style: disc; font-size: var(--fs-base); line-height: 1.6; color: var(--color-ink); }
.review-help__list li + li { margin-top: 6px; }
.form-summary { margin-bottom: 24px; }

.review-form { display: flex; flex-direction: column; gap: var(--av-section-gap); }
.review-form__section { display: flex; flex-direction: column; gap: 24px; }
.review-form__heading { font-size: var(--fs-card-title); font-weight: 600; line-height: 1.3; color: var(--color-forest); padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.review-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.review-form__meta { display: flex; justify-content: space-between; gap: 16px; }
.review-form__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.form-field__error:empty { display: none; }

/* Case à cocher (dessin CSS pur, même rendu que le tunnel de commande) */
.review-form__consent { flex-direction: row; align-items: flex-start; gap: 12px; }
.review-form__consent + .form-field__error { margin-top: -16px; }
.review-form__consent .form-field__label { display: block; min-height: 44px; padding-top: 10px; font-weight: 500; line-height: 1.5; }
.form-field__checkbox {
  --rv-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FCF9F2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 24px; height: 24px; margin: 10px 0 0;
  border: 1.5px solid var(--color-border-field); border-radius: var(--r-badge); background: var(--color-paper); cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.form-field__checkbox:hover { border-color: var(--color-wood); }
.form-field__checkbox:checked { background: var(--color-forest) var(--rv-icon-check) center / 14px 14px no-repeat; border-color: var(--color-forest); }
.form-field__checkbox:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form-field__checkbox[aria-invalid="true"] { border-color: var(--color-alert); }
.review-form__link { color: var(--color-forest); text-decoration: underline; text-underline-offset: 3px; }
.review-form__link:hover, .review-form__link:focus-visible { color: var(--color-ember-dark); }
.review-form__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Piège anti-spam : hors écran (jamais display:none, certains robots l'ignoreraient) */
.review-form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.review-form__submit { align-self: flex-start; min-width: 240px; }

@media (max-width: 1023px) {
  .avis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .avis-grid { grid-template-columns: minmax(0, 1fr); }
  .avis-header__cta { align-self: stretch; }
  .avis-more .btn { width: 100%; }
}
@media (max-width: 575px) {
  .review-form__row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .review-form__submit { align-self: stretch; min-width: 0; }
}

/* ---------- Bandeaux, erreur serveur, succès (7.c4) ---------- */
.review-banner { margin-bottom: 16px; padding: 12px 16px; border: 1.5px solid var(--color-forest); border-radius: var(--r-control); background: var(--color-paper); font-size: var(--fs-sm); font-weight: 600; color: var(--color-forest); }
.review-banner[hidden] { display: none; }
.review-form__server-error { padding: 12px 16px; border: 1.5px solid var(--color-alert); border-radius: var(--r-control); background: var(--color-ember-tint); }
.review-form__server-error[hidden] { display: none; }
.review-form__submit[aria-disabled="true"] { cursor: progress; opacity: 0.8; }
.review-success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--color-border); border-radius: var(--r-card); background: var(--color-paper); }
.review-success[hidden] { display: none; }
.review-success:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.review-success__icon { width: 40px; height: 40px; fill: none; stroke: var(--color-forest); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.review-success__title { font-size: var(--fs-card-title); font-weight: 600; color: var(--color-forest); }
.review-success__text { font-size: var(--fs-base); line-height: 1.6; color: var(--color-ink); }
.review-form[hidden], .review-help[hidden], .form-summary[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .avis-how__summary::after, .review-help__summary::after { transition: none; } }