/* =============================================================================
   NS DIGITAL SERVICES — Section « Avis Google » (page /avis uniquement)
   -----------------------------------------------------------------------------
   Toutes les classes sont prefixees `ag-`. Aucune classe existante du site
   n'est redefinie : ni `.v2-avis-card`, ni `.v2-avis-form`, ni `.v2-stars`.
   Cette feuille peut donc etre retiree sans toucher au reste de la page.

   Les couleurs viennent des jetons de la maquette (bleu, orange, noir, blanc)
   avec une valeur de repli, au cas ou la feuille soit chargee seule.
   ============================================================================= */

.ag-section {
  background: var(--v2-paper-alt, #F7F8FA);
  border-top: 1px solid var(--v2-line, #E7E8EC);
  border-bottom: 1px solid var(--v2-line, #E7E8EC);
}

/* ── En-tete ───────────────────────────────────────────────────────────────── */

.ag-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 30px;
}

.ag-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  padding: 6px 12px 6px 7px;
  background: #FFFFFF;
  border: 1px solid var(--v2-line, #E7E8EC);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--v2-ink-soft, #4B5563);
}

/* Le « G » : une lettre, pas une reproduction du logo de Google. */
.ag-g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 12px; line-height: 1; color: #4285F4;
  letter-spacing: 0;
}
.ag-g--btn { background: #FFFFFF; border-color: transparent; }

.ag-title {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(21px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--v2-blue, #1878F8);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.ag-sub {
  margin: 0; max-width: 62ch;
  font-size: 14.5px; line-height: 1.6;
  color: var(--v2-ink-soft, #4B5563);
  text-wrap: pretty;
}
.ag-sub__sync { display: block; margin-top: 4px; font-size: 13px; color: var(--v2-ink-mute, #8A93A3); }

.ag-score {
  background: #FFFFFF;
  border: 1px solid var(--v2-line, #E7E8EC);
  border-radius: 18px;
  padding: 18px 24px;
  text-align: center;
  min-width: 170px;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .05);
}
.ag-score__n {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 38px; line-height: 1; letter-spacing: -.03em;
  color: var(--v2-ink, #111827);
  margin: 0 0 8px;
}
.ag-score__d { font-size: 17px; font-weight: 700; color: var(--v2-ink-mute, #8A93A3); }
.ag-score__c {
  margin: 8px 0 0;
  font-size: 12.5px; font-weight: 600;
  color: var(--v2-ink-soft, #4B5563);
}

/* ── Etoiles ───────────────────────────────────────────────────────────────── */

.ag-stars { display: inline-flex; gap: 2px; align-items: center; }
.ag-star { width: 16px; height: 16px; flex: 0 0 auto; fill: #DEE1E7; }
.ag-star.is-on { fill: #F2A100; }
.ag-stars--lg .ag-star { width: 19px; height: 19px; }

/* ── Carrousel ─────────────────────────────────────────────────────────────── */

.ag-carousel { position: relative; }

.ag-track {
  display: flex;
  gap: 20px;
  /* Un seul axe defile. L'autre est explicitement `hidden` : `auto` sur les
     deux axes fait apparaitre une barre horizontale fantome qui vole de la
     hauteur et declenche a son tour la barre verticale. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 2px;
  padding: 4px 2px 10px;
  /* La barre est masquee : la navigation passe par les fleches, les puces, le
     clavier et le doigt. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.ag-track::-webkit-scrollbar { display: none; }
.ag-track:focus-visible { outline: 2px solid var(--v2-blue, #1878F8); outline-offset: 4px; border-radius: 18px; }

.ag-card {
  flex: 0 0 auto;
  width: min(88vw, 344px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 13px;
  background: #FFFFFF;
  border: 1px solid var(--v2-line, #E7E8EC);
  border-radius: 18px;
  padding: 22px;
  transition: border-color .2s, box-shadow .2s;
}
.ag-card:hover { border-color: #D3D6DD; box-shadow: 0 14px 32px rgba(17, 24, 39, .07); }

.ag-card__who { display: flex; align-items: center; gap: 12px; }

.ag-card__av { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.ag-card__ini {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--v2-blue-pale, #E8F2FE);
  color: var(--v2-blue-dark, #1156B3);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px;
}
.ag-card__ph {
  position: absolute; inset: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--v2-blue-pale, #E8F2FE);
}

.ag-card__id { min-width: 0; flex: 1; }
.ag-card__nom {
  margin: 0;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--v2-ink, #111827);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-card__meta { margin: 2px 0 0; font-size: 12.5px; color: var(--v2-ink-mute, #8A93A3); }
.ag-card__edit { color: var(--v2-ink-mute, #8A93A3); }

.ag-card__g {
  flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #FFFFFF; border: 1px solid #DADCE0;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; color: #4285F4;
}

.ag-card__q {
  margin: 0;
  font-size: 14.5px; line-height: 1.62;
  color: var(--v2-ink-soft, #4B5563);
  text-wrap: pretty;
}
/* Replie par defaut, deplie au clic. Sans JavaScript, le bouton n'existe pas
   et le texte reste entier : rien n'est jamais tronque definitivement. */
.ag-card__q.is-long:not(.is-open) {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ag-more {
  align-self: flex-start;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--v2-blue-dark, #1156B3);
  cursor: pointer;
}
.ag-more:hover { color: var(--v2-flame, #F84000); }

.ag-reply {
  background: var(--v2-paper-alt, #F7F8FA);
  border: 1px solid var(--v2-line-soft, #F0F1F4);
  border-radius: 12px;
  padding: 13px 15px;
}
.ag-reply__t {
  margin: 0 0 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--v2-flame-dark, #B32E00);
}
.ag-reply__t time { font-weight: 600; color: var(--v2-ink-mute, #8A93A3); text-transform: none; letter-spacing: 0; }
.ag-reply__c { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--v2-ink-soft, #4B5563); }

.ag-card__src {
  margin: auto 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--v2-line-soft, #F0F1F4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--v2-ink-mute, #8A93A3);
}

/* ── Commandes ─────────────────────────────────────────────────────────────── */

.ag-controls {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  margin-top: 18px;
}
.ag-nav {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--v2-line, #E7E8EC);
  border-radius: 50%;
  color: var(--v2-ink, #111827);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.ag-nav svg { width: 20px; height: 20px; }
.ag-nav:hover:not([disabled]) { border-color: var(--v2-blue, #1878F8); color: var(--v2-blue, #1878F8); }
.ag-nav[disabled] { opacity: .35; cursor: default; }

.ag-dots { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.ag-dot {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ag-dot::before {
  content: ''; display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #C9CDD5;
  transition: background .18s, transform .18s;
}
.ag-dot[aria-selected="true"]::before { background: var(--v2-blue, #1878F8); transform: scale(1.4); }

.ag-pause {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px;
  margin-left: 6px;
  background: #FFFFFF;
  border: 1px solid var(--v2-line, #E7E8EC);
  border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--v2-ink-soft, #4B5563);
  cursor: pointer;
}
.ag-pause:hover { border-color: var(--v2-blue, #1878F8); color: var(--v2-blue-dark, #1156B3); }
/* Deux barres = « en lecture, cliquez pour mettre en pause ». */
.ag-pause__i {
  width: 9px; height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.ag-pause[aria-pressed="true"] .ag-pause__i {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 9px solid currentColor;
  border-right: 0;
}

/* ── Pied ──────────────────────────────────────────────────────────────────── */

.ag-foot {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-line, #E7E8EC);
}
.ag-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: 12px;
  background: var(--v2-blue, #1878F8);
  color: #FFFFFF; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 26px rgba(24, 120, 248, .3);
  transition: background .18s, transform .18s;
}
.ag-cta:hover { background: var(--v2-blue-dark, #1156B3); color: #FFFFFF; transform: translateY(-2px); }
.ag-foot__note {
  margin: 0; flex: 1; min-width: 240px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--v2-ink-mute, #8A93A3);
  text-wrap: pretty;
}

/* ── Ecrans etroits ────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
  .ag-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ag-score { min-width: 0; text-align: left; padding: 16px 18px; }
  .ag-score__n { font-size: 32px; }
  .ag-card { width: min(90vw, 330px); padding: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-track { scroll-behavior: auto; }
  .ag-card, .ag-cta, .ag-nav { transition: none; }
  .ag-cta:hover { transform: none; }
}