/* ============================================================
   CARROUSEL D'AVIS — page d'accueil (15/10/2026)
   Se charge APRÈS charpente-bnbe-v2-4.css : utilise ses tokens (--bnbe-*) et ses règles .avis
   (cartes, étoiles, auteur). Script associé : carousel-avis.js. Documentation : CLAUDE.md (ce dossier).
   ============================================================ */

/* Avis en carrousels (15/10) : un carrousel par logement, la photo au centre et les avis qui en font le tour
   (devant de droite à gauche, derrière de gauche à droite) ; les flèches passent au carrousel voisin, en boucle.
   Script en fin d'accueil. Desktop (≥ 992 px) avec script ; sinon tout s'empile (mobile à traiter).
   Animations désactivées : cartes fixes, changement de carrousel sans glissement. Réglages : variables ci-dessous. */
.avis-scene { --avis-scene-h: 720px;        /* hauteur d'un carrousel */
  --avis-photo-w: 75%;                       /* largeur de la photo (16:9) */
  --avis-carte-w: 25%;                       /* largeur d'une carte au premier plan */
  --avis-orbite-x: 44%;                      /* demi-largeur du circuit, en % du carrousel */
  --avis-orbite-y: 28%;                      /* demi-hauteur du circuit, en % du carrousel */
  --avis-marge-ecran: var(--bnbe-espace-2);  /* écart minimal entre une carte et le bord de l'écran */
  --avis-tour: 40;                           /* durée d'un tour, en secondes */
  --avis-echelle-fond: .6;                   /* taille d'une carte derrière la photo */
  --avis-opacite-fond: .5;                   /* opacité d'une carte derrière la photo */
  --avis-fondu: .3;                          /* sur les côtés, durée de l'effacement de la partie posée sur la photo (0 à 1) */
  --avis-glisse: .5s;                        /* durée du glissement d'un carrousel à l'autre */
  --avis-lignes: 5;                          /* lignes visibles avant « lire la suite » */
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--bnbe-espace-3); }
.avis-scene + .avis-scene { margin-top: var(--bnbe-espace-5); }
.avis-photo { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bnbe-rayon); }
.avis .avis-carte { height: auto; margin: 0; padding: var(--bnbe-espace-3); background: var(--bnbe-blanc); }
.avis-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--bnbe-espace-1); margin-bottom: var(--bnbe-espace-2); }   /* étoiles à gauche, « Hôte » / « Voyageur » à droite */
.avis-carte .note { gap: calc(var(--bnbe-espace-1) / 2); }
.avis-carte .note i { width: auto; height: auto; font-size: var(--bnbe-corps); }
.avis-texte { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--avis-lignes); line-clamp: var(--avis-lignes); overflow: hidden; }
.avis .avis-texte { margin-bottom: var(--bnbe-espace-1); }
.avis-carte.ouvert .avis-texte { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.avis-suite { align-self: flex-start; padding: 0; border: 0; background: none; font-family: var(--bnbe-police-zilla); font-weight: 700;
  font-size: var(--bnbe-petit); text-transform: lowercase; color: var(--bnbe-gris-bord); }
.avis-suite:hover, .avis-suite:focus-visible { color: var(--bnbe-gris-texte); }
.avis .avis-carte .auteur { gap: var(--bnbe-espace-1); margin-top: var(--bnbe-espace-2); }
.avis-carte .auteur .h4 { margin-left: auto; }   /* prénom à droite, même si « lire la suite » est masqué */
.avis-role { font-family: var(--bnbe-police-zilla); font-weight: 700; font-size: var(--bnbe-petit); color: var(--bnbe-gris-texte); }   /* « Hôte » / « Voyageur » */
/* Couleur par auteur : hôte en vert, voyageur en accent */
.avis-carte--hote .note i, .avis-carte--hote .auteur .h4 { color: var(--bnbe-vert); }
.avis-carte--voyageur .auteur .h4 { color: var(--bnbe-accent); }
/* Flèches : simples chevrons blancs posés sur les bords de l'écran, par-dessus les cartes */
.avis-fleche { position: absolute; top: 50%; z-index: 6; transform: translateY(-50%); padding: var(--bnbe-espace-1); border: 0; background: none; }
.avis-fleche--prec { left: var(--bnbe-espace-2); }
.avis-fleche--suiv { right: var(--bnbe-espace-2); }
.avis .avis-fleche i { width: auto; height: auto; background: transparent; color: var(--bnbe-blanc); font-size: var(--bnbe-chiffre-xl); }
.avis .avis-fleche:hover i, .avis .avis-fleche:focus-visible i { color: var(--bnbe-accent); }
@media (min-width: 992px) {
  /* le script pose .avis-js : carrousels superposés, cartes placées sur le circuit (transform, opacité, .derriere) */
  .avis-defile { position: relative; overflow-x: clip; }   /* le glissement traverse tout l'écran sans barre de défilement */
  .avis-js .avis-piste { display: grid; }
  .avis-js .avis-scene { display: block; grid-area: 1 / 1; height: var(--avis-scene-h); margin: 0; visibility: hidden; }
  .avis-js .avis-scene.actif, .avis-js .avis-scene.entre { visibility: visible; }
  .avis-js .avis-scene.glisse { transition: transform var(--avis-glisse) ease-in-out; }
  .avis-js .avis-photo { position: absolute; top: 50%; left: 50%; z-index: 2; width: var(--avis-photo-w); transform: translate(-50%, -50%); }
  .avis-js .avis-carte { position: absolute; top: 0; left: 0; z-index: 3; width: var(--avis-carte-w); transform-origin: center; will-change: transform, opacity; }
  .avis-js .avis-carte.derriere { z-index: 1; }
  .avis-js .avis-carte.ouvert { z-index: 5; opacity: 1 !important; } }   /* !important : bat l'opacité posée par le script */