/* ===== SECTION AVIS CLIENTS — portage vanilla du composant React « profile-card-testimonial-carousel »
   (21st.dev). Le site n'a ni React, ni Next, ni TypeScript, ni shadcn : tout est réécrit
   en CSS/JS simple. Différences volontaires avec l'original :
     · palette sombre du site au lieu de la carte blanche ;
     · pas d'icônes GitHub/Twitter/YouTube/LinkedIn (sans objet pour des restaurateurs) —
       remplacées par le logo Google + 5 étoiles, qui est LE signal de confiance ici ;
     · framer-motion remplacé par des transitions CSS sur opacity/transform UNIQUEMENT
       (tout le reste fait repeindre — leçon des titres chromés et du néon) ;
     · les flèches et les points se cachent tout seuls s'il n'y a qu'un avis, sinon
       le carrousel a l'air cassé.
   ⚠️ Le contenu vit dans avis.js. Ne JAMAIS y écrire d'avis inventé : c'est interdit
   (directive Omnibus / DGCCRF) et la page reviews.html vend justement l'inverse. */

/* lot D (19/10) : haut et bas seulement. « padding:… 0 » (sélecteur d'id) écrasait les marges
   latérales px-margin-mobile / md:px-margin-desktop : titre collé au bord de l'écran sur téléphone. */
#avis{ padding-top:clamp(64px,9vw,128px); padding-bottom:clamp(64px,9vw,128px); }
.av-wrap{ max-width:1024px; margin:0 auto; }   /* max-w-5xl de l'original */

/* ---- Bloc principal : photo à gauche, carte qui chevauche (comme l'original) ---- */
.av-duo{ display:flex; align-items:center; }
/* Dimensions de l'ORIGINAL : w-[470px] h-[470px], rounded-3xl (24px). Fixe, jamais
   rétrécie — c'est ce qui garde la photo visible malgré le chevauchement de la carte. */
.av-photo{ position:relative; flex:0 0 auto; width:470px; height:470px;
  border-radius:24px; overflow:hidden; background:#141414; }
.av-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ⚠️ `max-width:576px` (max-w-xl de l'original) — SANS ÇA la carte s'étire en flex:1
   et recouvre la photo : c'est le défaut signalé par David le 5 sept.
   ⚠️ Fond OPAQUE, pas de backdrop-filter : l'original est `bg-card` plein. Le flou
   par-dessus le bord de la photo créait une bande claire verticale. */
.av-carte{ position:relative; z-index:2; flex:1 1 auto; max-width:576px; margin-left:-80px;
  border-radius:24px; padding:32px;              /* p-8 de l'original */
  background:#131316;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.9); }

/* ---- Bandeau Google : c'est lui qui fait la confiance ---- */
/* Rangée du bas — remplace les icônes réseaux de l'original (space-x-4). */
.av-source{ display:flex; align-items:center; gap:12px; }
.av-source svg{ width:18px; height:18px; flex:none; }
.av-etoiles{ display:flex; gap:2px; }
.av-etoiles svg{ width:15px; height:15px; fill:#FBBC05; }
.av-verifie{ font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }

.av-nom{ font-size:24px; font-weight:700; color:#fff; line-height:1.2; }          /* text-2xl */
.av-role{ margin-top:8px; font-size:14px; font-weight:500; color:rgba(255,255,255,.55); }  /* text-sm */
.av-texte{ margin-top:24px; margin-bottom:32px; font-size:16px; line-height:1.625;         /* text-base + leading-relaxed */
  color:#fff; }

/* ---- Fondu entre deux avis : opacity + transform seuls ---- */
.av-photo img, .av-contenu{ transition:opacity .38s ease, transform .38s ease; }
.av-duo.is-swap .av-photo img,
.av-duo.is-swap .av-contenu{ opacity:0; transform:translateY(6px); }

/* ---- Navigation (masquée s'il n'y a qu'un avis, voir avis.js) ---- */
.av-nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:34px; }
.av-fleche{ width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .25s ease, transform .25s ease; }
.av-fleche:hover{ background:rgba(255,255,255,.12); transform:scale(1.05); }
.av-fleche:active{ transform:scale(.95); }
.av-fleche svg{ width:20px; height:20px; }
.av-points{ display:flex; gap:8px; }
.av-point{ width:9px; height:9px; border-radius:50%; cursor:pointer; border:0;
  background:rgba(255,255,255,.28); transition:background-color .25s ease, transform .25s ease; }
.av-point.actif{ background:#fff; transform:scale(1.15); }

/* Palier intermediaire : entre 768 et 1024 px, 470 + 576 - 80 = 966 px ne tient plus
   avec les marges de page. On reduit les deux, sans changer la composition. */
@media (max-width:1060px) and (min-width:821px){
  .av-photo{ width:min(400px,38vw); height:min(400px,38vw); }
  .av-carte{ max-width:none; margin-left:-64px; }
}

/* ---- Mobile : photo au-dessus, carte dessous, centré ---- */
@media (max-width:820px){
  .av-duo{ flex-direction:column; }
  .av-photo{ width:100%; max-width:420px; margin:0 auto; }
  .av-carte{ margin:-40px auto 0; width:calc(100% - 24px); text-align:center; }
  .av-source{ justify-content:center; }
  .av-nom{ font-size:20px; }                    /* text-xl */
  .av-texte{ font-size:14px; margin-bottom:24px; }   /* text-sm */
  .av-nav{ margin-top:26px; }
}
@media (prefers-reduced-motion: reduce){
  .av-photo img, .av-contenu{ transition:none; }
}