/* Avis Google — habillage du parc Altitude.
 * Chargé automatiquement par widget.js et par le mu-plugin WordPress.
 * Pour styler soi-même :
 *   <div data-avis-google="slug" data-avis-no-css></div>
 *
 * ⚠️ TROIS PRINCIPES À RESPECTER EN MODIFIANT CE FICHIER :
 *
 * 1. Bumper la version dans altitude-avis-google.php ET widget.js, sinon les
 *    navigateurs resservent l'ancienne feuille depuis leur cache.
 *
 * 2. Le widget est déposé dans des thèmes clients quelconques, qui stylent
 *    agressivement `button`, `a` et `p`. Sans défense, les flèches héritent du
 *    bouton du thème (vécu : carrés verts pleine largeur sur pierre-o-jardin).
 *    D'où le sélecteur doublé `.avis-google .avis-google__x` + `!important` sur
 *    les seules propriétés visuelles qui doivent être identiques partout.
 *    Ne pas « nettoyer » ces !important : ils sont la fonctionnalité.
 *
 * 3. Les couleurs passent TOUTES par une variable (--avis-*). Un `!important`
 *    avec une couleur en dur casserait le thème sombre. Aucune exception.
 *
 * Variantes : --rail (défaut, historique) --centre --cote --barre --solo
 * Thèmes    : (clair par défaut) --sombre --auto
 */

/* ============================ Thème clair ============================ */
.avis-google {
  --avis-or: #fbbc04;
  --avis-texte: #202124;
  --avis-corps: #3c4043;
  --avis-gris: #70757a;
  --avis-carte: #f5f5f5;
  --avis-nav-fond: #fff;
  --avis-nav-bord: #e8eaed;
  --avis-nav-icone: #5f6368;
  --avis-nav-ombre: rgba(60, 64, 67, 0.25);
  --avis-nav-ombre-fort: rgba(60, 64, 67, 0.32);
  --avis-cta-bord: rgba(32, 33, 36, 0.24);
  --avis-cta-fond: transparent;
  --avis-cta-fond-survol: rgba(32, 33, 36, 0.06);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--avis-texte);
  line-height: 1.5;
}

/* ============================ Thème sombre ============================
 * Les cartes passent en voile translucide : elles se posent sur n'importe
 * quel fond sombre (uni, dégradé, image) sans jurer avec sa teinte.        */
.avis-google--sombre {
  --avis-texte: #fff;
  --avis-corps: #e8eaed;
  --avis-gris: #bdc1c6;
  --avis-carte: rgba(255, 255, 255, 0.08);
  --avis-nav-fond: rgba(255, 255, 255, 0.14);
  --avis-nav-bord: rgba(255, 255, 255, 0.24);
  --avis-nav-icone: #fff;
  --avis-nav-ombre: rgba(0, 0, 0, 0.4);
  --avis-nav-ombre-fort: rgba(0, 0, 0, 0.55);
  --avis-cta-bord: rgba(255, 255, 255, 0.4);
  --avis-cta-fond: transparent;
  --avis-cta-fond-survol: rgba(255, 255, 255, 0.12);
}

/* --auto : suit le réglage système du visiteur. À ne poser que sur un site
   qui bascule lui aussi, sinon le widget peut virer au blanc sur fond blanc. */
@media (prefers-color-scheme: dark) {
  .avis-google--auto {
    --avis-texte: #fff;
    --avis-corps: #e8eaed;
    --avis-gris: #bdc1c6;
    --avis-carte: rgba(255, 255, 255, 0.08);
    --avis-nav-fond: rgba(255, 255, 255, 0.14);
    --avis-nav-bord: rgba(255, 255, 255, 0.24);
    --avis-nav-icone: #fff;
    --avis-nav-ombre: rgba(0, 0, 0, 0.4);
    --avis-nav-ombre-fort: rgba(0, 0, 0, 0.55);
    --avis-cta-bord: rgba(255, 255, 255, 0.4);
    --avis-cta-fond-survol: rgba(255, 255, 255, 0.12);
  }
}

/* ---- Entête : note globale + lien vers la fiche ---- */
.avis-google__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.avis-google__logo { flex: 0 0 auto; width: 22px; height: 22px; }
.avis-google__wordmark { display: none; width: 92px; height: auto; }
.avis-google .avis-google__mention {
  display: none;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--avis-texte) !important;
}
.avis-google .avis-google__note {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--avis-texte) !important;
}
.avis-google .avis-google__count {
  font-size: 14px !important;
  color: var(--avis-gris) !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
}
.avis-google .avis-google__count:hover { text-decoration: underline !important; }

.avis-google .avis-google__stars {
  color: var(--avis-or) !important;
  letter-spacing: 2px;
  font-size: 16px;
  white-space: nowrap;
}

/* ---- Rail : les flèches occupent les gouttières latérales ---- */
.avis-google__rail {
  position: relative;
  padding: 0 52px;
}

/* Flèches : réinitialisation complète du bouton hérité du thème, puis notre skin. */
.avis-google .avis-google__nav,
.avis-google .avis-google__nav:hover,
.avis-google .avis-google__nav:focus,
.avis-google .avis-google__nav:active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--avis-nav-bord) !important;
  border-radius: 50% !important;
  background: var(--avis-nav-fond) !important;
  background-image: none !important;
  color: var(--avis-nav-icone) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: 0 1px 4px var(--avis-nav-ombre) !important;
  cursor: pointer !important;
  outline: none;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.avis-google .avis-google__nav:hover { box-shadow: 0 2px 8px var(--avis-nav-ombre-fort) !important; }
.avis-google .avis-google__nav--prev { left: 0; }
.avis-google .avis-google__nav--next { right: 0; }
/* Bout de course : la flèche s'efface sans décaler la mise en page. */
.avis-google .avis-google__nav[disabled] { opacity: 0; pointer-events: none; }
.avis-google .avis-google__nav svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  display: block !important;
}

/* ---- Liste ---- */
.avis-google__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 20px;
  overflow-x: auto;
  padding: 4px;
  margin: 0;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Navigation aux flèches : aucune barre de scroll visible. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.avis-google__list::-webkit-scrollbar { width: 0; height: 0; display: none; }

.avis-google .avis-google__item {
  scroll-snap-align: start;
  background: var(--avis-carte) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin: 0 !important;
  list-style: none !important;
}
.avis-google .avis-google__item::before,
.avis-google .avis-google__item::marker { content: none !important; }

/* ---- Carte : avatar à gauche, nom au-dessus de la date ---- */
.avis-google__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.avis-google .avis-google__avatar {
  border-radius: 50% !important;
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  margin: 0 !important;
}
.avis-google__ident { display: flex; flex-direction: column; min-width: 0; }
.avis-google .avis-google__author {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--avis-texte) !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
}
.avis-google .avis-google__author:hover { text-decoration: underline !important; }
.avis-google .avis-google__date {
  font-size: 14px !important;
  color: var(--avis-gris) !important;
}

.avis-google .avis-google__text {
  margin: 10px 0 0 !important;
  font-size: 15px !important;
  color: var(--avis-corps) !important;
  /* Les avis longs sont tronqués : sans ça les cartes ont des hauteurs incohérentes. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Une seule carte (fiche peu commentée) : pas de rail, elle prend la largeur utile. */
.avis-google__list:has(> :only-child) { grid-auto-columns: minmax(280px, 480px); }

/* ---- Pied : bouton « Voir tous nos avis » (opt-in) ---- */
.avis-google__pied {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.avis-google .avis-google__cta,
.avis-google .avis-google__cta:hover,
.avis-google .avis-google__cta:focus,
.avis-google .avis-google__cta:active {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 11px 24px !important;
  margin: 0 !important;
  border: 1px solid var(--avis-cta-bord) !important;
  border-radius: 999px !important;
  background: var(--avis-cta-fond) !important;
  background-image: none !important;
  color: var(--avis-texte) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.avis-google .avis-google__cta:hover {
  background: var(--avis-cta-fond-survol) !important;
  border-color: var(--avis-texte) !important;
}
.avis-google .avis-google__cta svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
  display: block !important;
}

/* ============================ Variante --centre ============================
 * Entête empilée et centrée au-dessus du rail. C'est la variante « vitrine »,
 * celle qui donne le plus de poids à la note globale.                        */
.avis-google--centre .avis-google__head {
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
  text-align: center;
}
.avis-google--centre .avis-google__logo { display: none; }
.avis-google--centre .avis-google__wordmark { display: block; order: 4; margin-top: 6px; }
.avis-google--centre .avis-google__mention { display: block; order: 1; }
.avis-google--centre .avis-google__head .avis-google__stars { order: 2; }
.avis-google--centre .avis-google__count { order: 3; }
.avis-google--centre .avis-google__note { display: none; }
.avis-google--centre .avis-google__head .avis-google__stars { font-size: 30px; letter-spacing: 3px; }
.avis-google--centre .avis-google__head .avis-google__count { font-size: 15px !important; }

/* ============================ Variante --cote ============================
 * Bloc note à gauche, rail à droite. Compacte en hauteur : bandeau de page.  */
@media (min-width: 861px) {
  .avis-google--cote {
    display: grid;
    grid-template-columns: minmax(150px, 190px) 1fr;
    align-items: center;
    gap: 28px;
  }
  .avis-google--cote .avis-google__head {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
    text-align: center;
  }
  .avis-google--cote .avis-google__pied { grid-column: 1 / -1; }
}
.avis-google--cote .avis-google__logo { display: none; }
.avis-google--cote .avis-google__wordmark { display: block; order: 4; width: 84px; margin-top: 4px; }
.avis-google--cote .avis-google__mention { display: block; order: 1; font-size: 18px !important; }
.avis-google--cote .avis-google__head .avis-google__stars { order: 2; }
.avis-google--cote .avis-google__count { order: 3; }
.avis-google--cote .avis-google__note { display: none; }
.avis-google--cote .avis-google__head .avis-google__stars { font-size: 26px; letter-spacing: 2px; }

/* ============================ Variante --barre ============================
 * Bandeau horizontal type « en-tête d'avis » : logo, note, et l'action de
 * dépôt d'avis poussée à droite.                                            */
.avis-google--barre .avis-google__head {
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--avis-carte);
}
.avis-google--barre .avis-google__logo { display: none; }
.avis-google--barre .avis-google__wordmark { display: block; width: 78px; }
.avis-google--barre .avis-google__mention { display: block; font-size: 15px !important; letter-spacing: 0; }
.avis-google--barre .avis-google__note { font-size: 16px !important; font-weight: 700 !important; }
.avis-google--barre .avis-google__count::before {
  content: "|";
  margin-right: 8px;
  color: var(--avis-gris);
}
/* Pousse le bouton d'action à l'extrémité droite du bandeau. */
.avis-google--barre .avis-google__ecrire { margin-left: auto !important; }
.avis-google .avis-google__ecrire,
.avis-google .avis-google__ecrire:hover,
.avis-google .avis-google__ecrire:focus {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  padding: 9px 18px !important;
  margin: 0;
  border: 1px solid var(--avis-cta-bord) !important;
  border-radius: 8px !important;
  background: var(--avis-nav-fond) !important;
  background-image: none !important;
  color: var(--avis-texte) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.avis-google .avis-google__ecrire:hover { border-color: var(--avis-texte) !important; }

/* ============================ Variante --solo ============================
 * Une carte à la fois, en pleine largeur et centrée ; la note passe dessous.
 * Pour une page « Avis » où le témoignage doit se lire en entier.            */
.avis-google--solo { display: flex; flex-direction: column; }
.avis-google--solo .avis-google__rail { order: 1; width: 100%; max-width: 860px; margin: 0 auto; }
.avis-google--solo .avis-google__head {
  order: 2;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 15px;
}
.avis-google--solo .avis-google__pied { order: 3; }
.avis-google--solo .avis-google__mention { display: none; }
.avis-google--solo .avis-google__note { font-size: 16px !important; font-weight: 700 !important; }
.avis-google--solo .avis-google__head .avis-google__stars { font-size: 15px; }
.avis-google--solo .avis-google__list { grid-auto-columns: 100%; }
.avis-google--solo .avis-google__item { padding: 28px 32px !important; text-align: center; }
.avis-google--solo .avis-google__meta { flex-direction: column; gap: 2px; }
.avis-google--solo .avis-google__ident { align-items: center; }
.avis-google--solo .avis-google__item .avis-google__stars { display: block; margin-top: 6px; }
.avis-google--solo .avis-google__text { -webkit-line-clamp: 6; }

@media (max-width: 860px) {
  .avis-google--cote .avis-google__head { justify-content: center; margin-bottom: 18px; }
}
@media (max-width: 640px) {
  .avis-google__rail { padding: 0; }
  .avis-google__list { grid-auto-columns: minmax(260px, 85%); }
  .avis-google .avis-google__nav { width: 36px !important; height: 36px !important; }
  .avis-google .avis-google__nav--prev { left: 4px; }
  .avis-google .avis-google__nav--next { right: 4px; }
  .avis-google--solo .avis-google__list { grid-auto-columns: 100%; }
  .avis-google--solo .avis-google__item { padding: 22px 18px !important; }
  /* Le bandeau se replie : l'action passe sous la note plutôt que de la comprimer. */
  .avis-google--barre .avis-google__ecrire { margin-left: 0 !important; }
}