/* =========================================================
   Aubergistes Avis Google — widget styles
   ========================================================= */

.aag-widget {
	--aag-brand: #E5C800;
	--aag-brand-text: #1a1a1a;
	--aag-bg: #F0EEE9;
	--aag-card-bg: #ffffff;
	--aag-text: #1a1a1a;
	--aag-muted: #6b6b6b;
	--aag-radius: 18px;
	--aag-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.04);
	--aag-gap: 24px;
	color: var(--aag-text);
	font-family: inherit;
	box-sizing: border-box;
	padding: 56px 24px;
	background: var(--aag-bg);
}

.aag-widget *,
.aag-widget *::before,
.aag-widget *::after { box-sizing: border-box; }

/* ---------- Header ---------- */
.aag-widget__header {
	text-align: center;
	margin: 0 0 40px;
}
.aag-widget__title {
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 400;
	letter-spacing: .01em;
	margin: 0 0 10px;
	font-family: Georgia, "Times New Roman", serif;
}
.aag-widget__subtitle {
	color: var(--aag-muted);
	margin: 0;
	font-size: 16px;
}

/* ---------- Sort controls (grille frontend) ---------- */
.aag-grid-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 auto 28px;
	max-width: 1280px;
	font-family: inherit;
}
.aag-grid-controls__label {
	font-size: 13.5px;
	color: var(--aag-muted);
	margin-right: 4px;
	letter-spacing: .02em;
}
.aag-grid-controls__btn {
	background: #fff;
	border: 1px solid #d8d4c7;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13.5px;
	color: #2a2a2a;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	font-family: inherit;
	letter-spacing: .01em;
}
.aag-grid-controls__btn:hover {
	border-color: #1a1a1a;
	background: #fafaf5;
}
.aag-grid-controls__btn.is-active {
	background: var(--aag-brand);
	border-color: var(--aag-brand);
	color: var(--aag-brand-text);
	font-weight: 600;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--aag-brand) 30%, transparent);
}
.aag-grid-controls__btn:focus-visible {
	outline: 2px solid var(--aag-brand);
	outline-offset: 2px;
}

/* ---------- Layout (grille avec côté Google) ---------- */
.aag-widget__layout {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: var(--aag-gap);
	max-width: 1280px;
	margin: 0 auto;
	align-items: start;
}

@media (max-width: 900px) {
	.aag-widget__layout { grid-template-columns: 1fr; }
}

/* ---------- Bloc Google (résumé latéral grille) ---------- */
.aag-summary {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.aag-summary__brand {
	background: var(--aag-card-bg);
	border-radius: var(--aag-radius);
	padding: 22px 20px;
	box-shadow: var(--aag-shadow);
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	position: relative;
}
.aag-summary__brand--link {
	cursor: pointer;
	transition: box-shadow .2s, transform .15s;
}
.aag-summary__brand--link:hover {
	box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.06);
	transform: translateY(-2px);
}
.aag-summary__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	overflow: hidden;
	text-indent: -9999px;
}
.aag-summary__overlay-link:focus-visible {
	outline: 2px solid var(--aag-brand);
	outline-offset: 3px;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}
.aag-summary__count--link {
	color: var(--aag-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s, color .15s;
}
.aag-summary__count--link:hover,
.aag-summary__count--link:focus-visible {
	border-bottom-color: currentColor;
	color: #1a1a1a;
}
.aag-summary__google-logo {
	height: 26px;
	width: auto;
	margin-bottom: 4px;
}
.aag-summary__rating-value {
	display: inline-block;
	background: #f3f3f0;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
}
.aag-summary__count {
	font-weight: 600;
	font-size: 15px;
	color: var(--aag-text);
	margin-top: 2px;
}
.aag-summary__name {
	display: block;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 4px;
}
/* Variante carousel : bloc aplati. `.aag-carousel__summary` fournissait deja une
   carte (fond, arrondi, ombre) et ce bloc en empilait une seconde par-dessus —
   deux cartes blanches imbriquees, dont seule l'ombre interne se voyait, d'ou
   l'impression de contour. Ici on neutralise le visuel de carte, le contenu se
   pose directement sur le fond du widget.
   Ne touche pas la variante grille, qui garde sa carte. */
.aag-summary__brand--carousel {
	align-items: center;
	text-align: center;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}
.aag-summary__rating-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.aag-summary__brand--carousel .aag-summary__rating-value {
	background: transparent;
	padding: 0;
	font-size: 15px;
}

/* ---------- Grille de cartes ---------- */
.aag-grid {
	display: grid;
	grid-template-columns: repeat(var(--aag-columns, 3), minmax(0, 1fr));
	gap: var(--aag-gap);
}
@media (max-width: 1100px) {
	.aag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.aag-grid { grid-template-columns: 1fr; }
}

/* ---------- Carte d'avis ---------- */
.aag-card {
	background: var(--aag-card-bg);
	border-radius: var(--aag-radius);
	padding: 22px 24px 26px;
	box-shadow: var(--aag-shadow);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 100%;
}
.aag-card__head {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 12px;
	align-items: center;
}
.aag-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}
.aag-card__avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	font-size: 22px;
	text-transform: uppercase;
}
.aag-card__author { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aag-card__name-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.aag-card__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--aag-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aag-card__name--link {
	text-decoration: none;
}
.aag-card__name--link:hover,
.aag-card__name--link:focus-visible {
	color: #2a2a8c;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.aag-card__name-row .aag-card__verified {
	flex-shrink: 0;
}
.aag-card__date {
	font-size: 13px;
	color: var(--aag-muted);
}
.aag-card__source { flex-shrink: 0; }

/* ---------- Étoiles + badge ---------- */
.aag-stars {
	display: inline-flex;
	gap: 2px;
	align-items: center;
}
.aag-star {
	width: 18px;
	height: 18px;
	display: inline-block;
	flex-shrink: 0;
}
.aag-star--full { fill: #FBBC04; }
.aag-star--empty { fill: #E0E0E0; }
.aag-sprite { width: 0; height: 0; overflow: hidden; }
.aag-card__rating {
	display: flex;
	gap: 8px;
	align-items: center;
}
.aag-card__rating-value {
	font-weight: 700;
	font-size: 14px;
	color: var(--aag-text);
	letter-spacing: .01em;
}
.aag-card__rating-max,
.aag-summary__rating-max {
	color: var(--aag-muted);
	font-weight: 500;
	font-size: .85em;
}
.aag-card__verified {
	flex-shrink: 0;
}

/* ---------- Texte de l'avis ---------- */
.aag-card__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: #2a2a2a;
}
.aag-card__more {
	display: block;
	margin-top: 6px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--aag-muted);
	cursor: pointer;
	text-decoration: underline;
	font-size: 14px;
}

/* =========================================================
   Variante CAROUSEL
   ========================================================= */
.aag-widget--carousel { padding: 40px 24px 60px; }

.aag-carousel-wrap {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 220px 40px 1fr 40px;
	gap: 16px;
	align-items: center;
	position: relative;
}
/* Mobile / tablette : les flèches disparaissent au profit des puces, et le
   carrousel récupère toute la largeur. Elles coûtaient 2×36px + 32px de gouttière,
   soit 104px pris sur une zone déjà étroite — c'est ce qui rognait les cartes.
   `display:none` retire bien l'élément du flux de la grille, d'où le passage
   direct à une colonne unique. */
@media (max-width: 900px) {
	.aag-carousel-wrap {
		grid-template-columns: 1fr;
	}
	.aag-carousel__summary { grid-column: 1 / -1; margin-bottom: 0; }
}

.aag-carousel__summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	/* Aplati : ni fond, ni arrondi, ni ombre. L'espacement avec le carrousel est
	   assure par la gouttière de la grille parente, plus par un padding de carte. */
	padding: 0;
}
.aag-write-review {
	display: inline-block;
	margin-top: 6px;
	padding: 10px 18px;
	border: 1.5px solid #1a1a1a;
	border-radius: 999px;
	color: #1a1a1a;
	background: transparent;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.aag-write-review:hover {
	background: var(--aag-brand);
	border-color: var(--aag-brand);
	color: var(--aag-brand-text);
}

.aag-carousel {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Compense le padding horizontal du track pour que la carte se cale net. */
	scroll-padding-inline-start: 4px;
}
.aag-carousel::-webkit-scrollbar { display: none; }
.aag-carousel__track {
	display: flex;
	gap: var(--aag-gap);
	padding: 6px 4px;
}
/* Slider aplati : les cartes perdent leur ombre. Elle est remplacée par un filet
   à 8 % de noir, et ce n'est pas un ornement — 4 des 7 sites du réseau utilisent
   l'option de fond blanc. Sans ombre NI filet, des cartes blanches sur fond blanc
   n'auraient plus aucune séparation visible. `box-sizing: border-box` étant déjà
   posé sur tout le widget, le filet ne modifie pas la largeur des cartes.
   Pour un rendu vraiment sans contour : supprimer la ligne `border`. */
.aag-card--compact {
	flex: 0 0 280px;
	scroll-snap-align: start;
	box-shadow: none;
	border: 1px solid rgba(0, 0, 0, .08);
}
/* `80vw` se calculait sur la fenêtre entière, en ignorant le padding du widget
   et les colonnes voisines : la carte débordait de son viewport et se retrouvait
   coupée. Un pourcentage, lui, se résout sur la largeur du conteneur flex —
   donc sur la zone réellement visible. 85% laissent dépasser la carte suivante,
   ce qui signale qu'on peut faire défiler. */
@media (max-width: 600px) {
	.aag-widget--carousel { padding: 32px 16px 44px; }
	.aag-card--compact { flex: 0 0 85%; }
}

/* ---------- Pagination à puces (mobile) ---------- */
.aag-carousel-dots {
	--aag-dot-window: 5; /* puces visibles simultanément — relu par view.js */
	display: none;
	/* `fit-content` + marges auto : le conteneur se réduit aux puces et se centre
	   de lui-même. Indispensable pour que le strip démarre à l'abscisse 0 — c'est
	   l'origine sur laquelle repose la translation de la fenêtre glissante. */
	width: fit-content;
	margin: 22px auto 0;
	overflow: hidden;
	max-width: 100%;
}
@media (max-width: 900px) {
	.aag-carousel-dots:not(:empty) { display: block; }
}
/* Surtout pas de `justify-content: center` ici : dès que le contenu dépasse la
   fenêtre, le centrage répartit le débordement des deux côtés et décale la
   première puce dans le négatif (-180px avec 20 puces), si bien que la puce
   active se retrouve hors cadre. Le centrage est porté par le conteneur. */
.aag-carousel-dots__strip {
	display: flex;
	align-items: center;
	transition: transform .3s ease;
}
/* Cible tactile de 24px (WCAG 2.5.8) autour d'une pastille de 8px : le bouton
   porte la surface cliquable, le ::before porte le visuel. */
.aag-dot {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.aag-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #b0b0b0;
	transition: background .2s, transform .3s ease;
}
.aag-dot[aria-current="true"]::before {
	background: var(--aag-brand);
	transform: scale(1.4);
}
/* Puces de bord : réduites pour signaler qu'il en reste au-delà de la fenêtre. */
.aag-dot--edge::before { transform: scale(.55); }
.aag-dot--edge[aria-current="true"]::before { transform: scale(1.4); }
.aag-dot:focus-visible {
	outline: 2px solid var(--aag-brand);
	outline-offset: -2px;
	border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
	.aag-carousel { scroll-behavior: auto; }
	.aag-carousel-dots__strip,
	.aag-dot::before { transition: none; }
}

.aag-carousel__btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: #b8b8b8;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s;
	padding: 0;
}
.aag-carousel__btn svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: #fff;
	fill: none;
}
.aag-carousel__btn svg * {
	stroke: #fff;
}
.aag-carousel__btn:hover { background: #888; }
.aag-carousel__btn:disabled {
	opacity: .35;
	cursor: default;
}
.aag-carousel__btn:focus-visible {
	outline: 2px solid var(--aag-brand);
	outline-offset: 2px;
}

/* Masquage des flèches en mobile. Cette règle doit impérativement rester APRÈS
   le bloc `.aag-carousel__btn` ci-dessus : une media query n'ajoute aucune
   spécificité, donc à sélecteurs équivalents c'est l'ordre dans le fichier qui
   tranche. Placée plus haut, elle était écrasée par le `display: inline-flex`
   de base. */
@media (max-width: 900px) {
	.aag-carousel__btn { display: none; }
}

/* ---------- Load more (grille) ---------- */
.aag-card--hidden { display: none !important; }

.aag-load-more-wrap {
	display: flex;
	justify-content: center;
	margin: 36px auto 0;
	max-width: 1280px;
}
.aag-load-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--aag-brand);
	border: 1.5px solid var(--aag-brand);
	border-radius: 999px;
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 600;
	color: var(--aag-brand-text);
	cursor: pointer;
	font-family: inherit;
	letter-spacing: .02em;
	transition: filter .15s, box-shadow .2s, transform .1s;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--aag-brand) 32%, transparent);
}
.aag-load-more:hover {
	filter: brightness(.93);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--aag-brand) 42%, transparent);
}
.aag-load-more:active {
	transform: translateY(1px);
}
.aag-load-more:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 3px;
}
.aag-load-more__count {
	font-weight: 500;
	opacity: .7;
	font-size: 13.5px;
}

/* ---------- Empty / editor states ---------- */
.aag-empty {
	padding: 24px;
	background: #fff7d6;
	border: 1px dashed #c4a000;
	border-radius: 12px;
	color: #6b5900;
	font-size: 14px;
}

.aag-editor-empty {
	padding: 40px;
	text-align: center;
	background: #fafafa;
	border: 1px dashed #ccc;
	border-radius: 12px;
}
.aag-editor-empty strong { display: block; font-size: 18px; margin-bottom: 8px; }
.aag-editor-empty p { color: #666; margin: 0; }