/* ============================================================
   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-bande { display: contents; }   /* enveloppe des 5 cartes : transparente en desktop, bande à faire glisser sous 992 px (27/10) */
.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 */

/* Smartphone et tablette (< 992 px, 27/10) : la photo, puis les 5 cartes en bande à faire glisser du doigt
   (une carte à la fois, le bord de la suivante dépasse), des points sous la bande ; un logement à la fois,
   flèches posées sur la photo. Sans script : les logements s'empilent, chacun avec sa bande. */
@media (max-width: 991.98px) {
  .avis-scene { display: block; }
  .avis-photo { margin-bottom: var(--bnbe-espace-3); }
  .avis-bande { display: flex; align-items: flex-start; gap: var(--bnbe-espace-2); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; }
  .avis-bande::-webkit-scrollbar { display: none; }
  .avis-bande .avis-carte { flex: 0 0 85%; scroll-snap-align: start; }
  /* points : un par carte, celui de la carte affichée en orange (accent sur fond marine) */
  .avis-points { display: flex; justify-content: center; margin-top: var(--bnbe-espace-2); }
  .avis-point { padding: var(--bnbe-espace-1); border: 0; background: none; line-height: 0; }
  .avis-point::before { content: ""; display: block; width: var(--bnbe-espace-1); height: var(--bnbe-espace-1); border-radius: 50%;
    border: var(--bnbe-bordure) solid var(--bnbe-blanc); }
  .avis-point[aria-current="true"]::before { border-color: var(--bnbe-accent); background: var(--bnbe-accent); }
  /* le script pose .avis-mobile : logements superposés, un seul visible, glissement d'un logement à l'autre */
  .avis-defile { position: relative; overflow-x: clip; }
  .avis-mobile .avis-piste { display: grid; grid-template-columns: minmax(0, 1fr); }   /* minmax : la bande ne doit pas élargir la grille */
  .avis-mobile .avis-scene { grid-area: 1 / 1; margin: 0; visibility: hidden; }
  .avis-mobile .avis-scene.actif, .avis-mobile .avis-scene.entre { visibility: visible; }
  .avis-mobile .avis-scene.glisse { transition: transform var(--avis-glisse) ease-in-out; }
  /* flèches : carré marine sur les bords de la photo (les photos sont claires : un chevron blanc seul ne se lirait pas) */
  .avis-mobile .avis-fleche { top: var(--avis-fleche-haut, 50%); background: var(--bnbe-marine); border-radius: var(--bnbe-rayon); line-height: 0; }
  .avis-mobile .avis-fleche--prec { left: calc(var(--avis-fleche-bord, 0px) + var(--bnbe-espace-1)); }    /* --avis-fleche-haut / -bord : */
  .avis-mobile .avis-fleche--suiv { right: calc(var(--avis-fleche-bord, 0px) + var(--bnbe-espace-1)); }   /* milieu et bord de la photo, mesurés par le script */
  .avis .avis-mobile .avis-fleche i { font-size: var(--bnbe-t3); } }