/* Page « Déposer un avis » (DeposerAvisPage.jsx). Chargée par les widgets de widgets/avis.php (handle vlbh-avis).
   Les valeurs viennent des composants du kit : DepotAvis, Avis, SectionHead, SourceNote.
   Corps de la maquette (18 px / 1.65) hérité par tout ce qui n'a pas de taille propre. */
.vlbh-av-hero, .vlbh-av-regle, .vlbh-depot, .vlbh-avis, .vlbh-av-vide, .vlbh-av-fin { font-size: 18px; line-height: 1.65; }

/* ——— Bandeau fendu (même famille que Contact) ——— */
.vlbh-av-hero { min-height: min(56vh, 520px); }
/* Le bandeau des avis respire de 80 px (space-20) au lieu des 64 de Contact — seulement tant qu'il est en deux colonnes. */
@media (min-width: 901px) { .vlbh-av-hero .vlbh-ct-hero-text { padding-top: 80px; padding-bottom: 80px; } }
.elementor .vlbh-av-hero h1, .vlbh-av-h1 { text-wrap: balance; margin: 16px 0 0; font: 600 clamp(36px, 4.6vw, 58px)/1.06 var(--font-serif); color: var(--cream-100); letter-spacing: 0; }
.vlbh-av-h1 em { font-style: italic; color: var(--gold-200); }
.vlbh-av-hero__filet { margin-top: 16px; max-width: 220px; }
.vlbh-av-hero__phrase { margin: 18px 0 0; font: 400 17.5px/1.62 var(--font-body); color: var(--cream-200); max-width: 44ch; }
.vlbh-av-hero__en { margin: 8px 0 0; font: italic 400 14.5px/1.65 var(--font-body); color: var(--gold-200); max-width: 44ch; }

/* ——— Grille règle / dépôt ——— */
.vlbh-av-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.vlbh-av-col { min-width: 0; }

/* ——— La règle, avant le premier champ ——— */
.vlbh-av-regle { display: grid; gap: 14px; }
.vlbh-av-regle__ligne { display: flex; gap: 12px; align-items: flex-start; }
.vlbh-av-regle__ico { width: 32px; height: 32px; border-radius: 50%; flex: none; border: 1px solid var(--border-gold); display: grid; place-items: center; color: var(--gold-900); }
.vlbh-av-regle__txt { font: 400 16px/1.55 var(--font-body); color: var(--text-secondary); padding-top: 5px; }
.vlbh-av-notes { margin-top: 32px; display: grid; gap: 16px; }

/* ——— Formulaire de dépôt (DepotAvis) ——— */
.vlbh-depot { background: var(--cream-050); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); display: grid; gap: 24px; }
.vlbh-depot__tete { display: grid; gap: 3px; }
.elementor .vlbh-depot__titre, .vlbh-depot__titre { margin: 0; font: 600 26px/1.18 var(--font-serif); color: var(--text-primary); letter-spacing: 0; }
.vlbh-depot__en { font: italic 400 15px/1.65 var(--font-body); color: var(--text-accent); }
.vlbh-depot__regle { margin: 0; font: 400 15.5px/1.62 var(--font-body); color: var(--text-secondary); max-width: 62ch; }
.vlbh-depot__note { display: grid; gap: 7px; }
.vlbh-depot__note-fr { font: 600 11px/1.65 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); }
.vlbh-depot__etoiles { display: flex; gap: 6px; }
button.vlbh-depot__etoile.vlbh-depot__etoile { min-width: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-color); color: var(--gold-900); box-shadow: none; }
button.vlbh-depot__etoile.vlbh-depot__etoile.is-pleine { border-color: var(--border-gold); }
.vlbh-depot__etoile svg { display: block; }
.vlbh-depot__etoile.is-pleine svg { fill: var(--gold-900); }
.vlbh-depot__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.vlbh-depot__accord { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.vlbh-depot__accord input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--forest-800); flex: none; }
.vlbh-depot__accord span { font: 400 14.5px/1.55 var(--font-body); color: var(--text-secondary); }
.vlbh-depot__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.vlbh-depot__mention { font: italic 400 13.5px/1.65 var(--font-body); color: var(--text-muted); }
.vlbh-depot__merci { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-050); border: 1px solid var(--border-gold); border-radius: var(--radius-md); padding: 24px; }
.vlbh-depot__merci[hidden] { display: none; }
.vlbh-depot__merci svg { margin-top: 2px; color: var(--forest-800); flex: none; }
.vlbh-depot__merci span { font: 400 15.5px/1.6 var(--font-body); color: var(--text-primary); }
/* Les rangées gardent l'écart du formulaire (24) : dans la maquette elles en sont les enfants directs. */
.vlbh-depot__corps { display: grid; gap: 24px; }
.vlbh-depot__corps[hidden] { display: none; }

/* ——— Avis publié (composant Avis) ——— */
.vlbh-avis { background: var(--cream-050); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: var(--shadow-sm); display: grid; gap: 16px; }
.vlbh-avis__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vlbh-avis__qui { display: grid; gap: 2px; }
.vlbh-avis__prenom { font: 600 19px/1.65 var(--font-serif); color: var(--text-primary); }
.vlbh-avis__meta { font: 500 10px/1.65 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-accent); }
.vlbh-avis__etoiles { display: inline-flex; gap: 3px; flex: none; color: var(--gold-900); }
.vlbh-avis__etoiles svg { display: block; }
.vlbh-avis__etoiles .is-pleine { fill: var(--gold-900); }
.vlbh-avis__corps { font: 400 16.5px/1.68 var(--font-body); color: var(--text-secondary); max-width: 62ch; }
.vlbh-avis__reponse { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--rule-aveu); display: grid; gap: 6px; }
.vlbh-avis__reponse-tit { font: 600 9.5px/1.65 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-aveu); }
.vlbh-avis__reponse-txt { font: 400 15.5px/1.62 var(--font-body); color: var(--text-secondary); max-width: 62ch; }
.vlbh-av-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ——— Tête de la section des avis et état « aucun avis » ——— */
.vlbh-av-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.vlbh-av-tete__titre { margin-top: 12px; font: 600 clamp(26px, 2.8vw, 36px)/1.1 var(--font-serif); color: var(--forest-800); }
.vlbh-av-vide { max-width: 820px; margin: 0 auto; background: var(--cream-050); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); text-align: center; display: grid; justify-items: center; gap: 14px; }
.vlbh-av-vide__titre { font: 600 24px/1.65 var(--font-serif); color: var(--forest-800); }
.vlbh-av-vide__texte { margin: 0; font: 400 16.5px/1.65 var(--font-body); color: var(--text-secondary); max-width: 52ch; }
.vlbh-av-vide__texte strong { font-weight: 600; color: var(--forest-800); }
.vlbh-av-vide__en { margin: 0; font: italic 400 14px/1.65 var(--font-body); color: var(--text-faint); }
.vlbh-av-exemples[hidden], .vlbh-av-vide[hidden] { display: none; }

/* ——— Pied « Merci » ——— */
.vlbh-av-fin { text-align: center; }
.vlbh-av-fin__script { font: 400 48px/1.25 var(--font-script); color: var(--gold-200); display: inline-block; }
.vlbh-av-fin__phrase { margin: 10px auto 0; font: 400 21px/1.65 var(--font-serif); color: var(--cream-100); max-width: 40ch; }
.vlbh-av-fin__en { margin: 6px 0 0; font: italic 400 14.5px/1.65 var(--font-body); color: var(--gold-200); }

/* ——— Tablette et mobile (règles de la maquette) ——— */
@media (max-width: 900px) {
  .vlbh-av-grille, .vlbh-av-deux { grid-template-columns: 1fr; gap: 32px; }
  .vlbh-av-hero { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 640px) {
  .elementor .vlbh-av-hero h1, .vlbh-av-h1 { font-size: 36px; }
  .vlbh-depot, .vlbh-av-vide { padding: 32px 15px; }
  .vlbh-avis { padding: 28px 15px; }
  .vlbh-av-fin__script { font-size: 34px; }
}