/**
 * AG Certificate — Attestation de confiance v2
 * Styles de la page publique "avis" (content-certificate.php).
 * S'appuie sur les tokens et composants de ag-design-system.css (chargé en dépendance,
 * ne PAS redéclarer :root ici).
 *
 * Sommaire :
 *   1. Shell / page
 *   2. Header
 *   2bis. Colonnes (layout principal / latérale)
 *   3. Synthèse (score + étoiles + répartition)
 *   4. Identité marchand
 *   5. Résumé IA
 *   6. Liste des avis
 *   7. Pagination
 *   8. Panneau latéral (conformité + transparence)
 *   8bis. Panneau latéral (établissements)
 *   9. Compte suspendu
 *   10. Mode pop-in (iframe)
 *   11. Responsive
 *   12. Sticky bar
 */

/* ─── 1. Shell / page ───────────────────────────────────────────────── */
/* Titlebar du thème masquée en v2 (ce fichier n'est chargé que si ?v2) */
.thememount-titlebar-wrapper {
	display: none !important;
}

/* Layout pleine largeur en v2 : on neutralise les cadres centrés du thème
   (boxed / framed / rounded appliquent tous max-width 1200px + ombre + marge
   sur .main-holder). Ce fichier n'étant chargé que sur les pages ?v2,
   l'override reste sans effet sur le reste du site. Le contenu reste contraint
   par .agc-shell (max-width 1200px), donc header et corps gardent la même
   largeur. */
body.thememount-boxed .main-holder,
body.thememount-framed .main-holder,
body.thememount-rounded .main-holder {
	max-width: none;
	margin: 0;
	box-shadow: none;
}

.agc-shell {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 0 60px;
	background: var(--ag-bg);
}

/* Pas d'espace mort en haut de la page v2 (override du padding-top de .ag-dash) */
.ag-dash {
	padding-top: 0;
}

.agc-page {
	position: relative;
}

.agc-page.is-suspended {
	pointer-events: none;
	user-select: none;
}

.agc-blur {
	filter: blur(6px);
	pointer-events: none;
	user-select: none;
}

/* ─── 2. Header ──────────────────────────────────────────────────────── */
.agc-header {
	margin-bottom: 30px;
	justify-content: space-between;
	align-items: center;
}

.agc-header .ag-header-title {
	flex: 1 1 auto;
}

.agc-header .ag-header-title h1 {
	font-size: 28px;
}

.agc-header-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 8px;
	background: var(--ag-surface);
	border: 1px solid var(--ag-border);
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ag-text-muted);
	white-space: nowrap;
}

.agc-header-brand i {
	color: var(--ag-success);
	font-size: 17px;
}

/* ─── 2bis. Colonnes (layout principal / latérale) ────────────────────── */
/* Remplace les anciennes .ag-grid (12 col) : deux colonnes flex indépendantes.
   align-items:flex-start est essentiel — empêche la colonne latérale de
   s'étirer à la hauteur de la colonne principale. */
.agc-cols {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.agc-col-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.agc-col-side {
	flex: 0 0 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* .ag-card a "grid-column: span 12" par défaut (inerte hors grille) ;
   on force la largeur pleine de la colonne flex qui l'accueille. */
.agc-col-main > .ag-card,
.agc-col-side > .ag-card {
	width: 100%;
}

/* ─── 3. Synthèse (score + étoiles + filtre par note) ────────────────── */
.agc-summary {
	gap: 24px;
	padding: 24px;
}

.agc-summary-top {
	display: flex;
	align-items: stretch;
	gap: 36px;
}

.agc-score {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	flex: 0 0 auto;
}

.agc-score-main {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.agc-score-num {
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -1.2px;
	color: var(--ag-text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.agc-score-scale {
	font-size: 18px;
	font-weight: 500;
	color: var(--ag-text-muted);
}

/* Texte masqué visuellement mais présent dans le DOM (accessibilité + lisible
   par les crawlers / LLM). Ne pas utiliser display:none (retirerait le texte
   de l'arbre d'accessibilité et du contenu). */
.agc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.agc-stars {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.agc-stars i {
	color: var(--ag-border-strong);
}

.agc-stars i.bi-star-fill,
.agc-stars i.bi-star-half {
	color: var(--ag-warning);
}

.agc-stars-lg { font-size: 26px; }
.agc-stars-sm { font-size: 15px; }

.agc-count {
	font-size: 13px;
	color: var(--ag-text-muted);
}

.agc-ratingbars {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.agc-ratingbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 8px;
	border-radius: var(--ag-radius-sm);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.agc-ratingbar:hover {
	background: var(--ag-bg);
	text-decoration: none;
}

.agc-ratingbar.is-active {
	background: var(--ag-accent-soft);
}

.agc-ratingbar.is-active .agc-ratingbar-star,
.agc-ratingbar.is-active .agc-ratingbar-count {
	color: var(--ag-accent);
	font-weight: bold;
}

.agc-ratingbar-star {
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ag-text-muted);
}

.agc-ratingbar-star i {
	font-size: 10px;
	color: var(--ag-warning);
}

.agc-ratingbar-track {
	flex: 1 1 auto;
	height: 8px;
	background: var(--ag-border);
	border-radius: 999px;
	overflow: hidden;
}

.agc-ratingbar-fill {
	display: block;
	height: 100%;
	background: var(--ag-warning);
	border-radius: 999px;
	transition: width 0.5s ease;
}

.agc-ratingbar-count {
	position: relative;
	flex: 0 0 48px;
	text-align: right;
	font-size: 12.5px;
	color: var(--ag-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Au survol du bloc de barres : cross-fade doux nombre → pourcentage sur
   TOUTES les lignes en même temps (nombre et pourcentage superposés) */
.agc-ratingbar-num,
.agc-ratingbar-pct {
	display: block;
	transition: opacity 0.25s ease;
}

.agc-ratingbar-pct {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.agc-ratingbars:hover .agc-ratingbar-num {
	opacity: 0;
}

.agc-ratingbars:hover .agc-ratingbar-pct {
	opacity: 1;
}

/* ─── 4. Identité marchand ───────────────────────────────────────────── */
.agc-identity {
	align-items: flex-start;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Cocarde SAG décorative : filigrane dans le coin haut-droite, en fond de la
   box, rognée au bord de la carte (overflow: hidden ci-dessus), derrière le
   contenu (isolation: isolate → z-index négatif reste au-dessus du fond). */
.agc-identity-badge {
	position: absolute;
	top: -20px;
	right: -20px;
	width: 75px;
	height: auto;
	opacity: 0.1;
	z-index: -1;
	pointer-events: none;
	user-select: none;
}

.agc-identity-logo {
	max-width: 180px;
	max-height: 75px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-bottom: 14px;
}

.agc-identity-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--ag-text);
	margin-bottom: 6px;
}

.agc-identity-desc {
	font-size: 13px;
	color: var(--ag-text-muted);
	line-height: 1.5;
	margin-bottom: 16px;
}

.agc-identity-desc-text.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.agc-identity-desc-more {
	display: inline-block;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	font-weight: 600;
	color: var(--ag-accent);
	cursor: pointer;
}

.agc-identity-desc-more:hover,
.agc-identity-desc-more:focus {
	border: 0;
	background: none;
	box-shadow: none;
	text-decoration: underline;
}

.agc-identity-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--ag-text-muted);
	padding: 6px 0;
}

.agc-identity-row:last-child {
	padding-bottom: 0;
}

.agc-identity-row i {
	color: var(--ag-accent);
	font-size: 14px;
	line-height: 1.4;
	flex: 0 0 auto;
	margin-top: 1px;
}

.agc-identity-row span {
	line-height: 1.4;
	word-break: break-word;
}

.agc-identity-row a {
	color: var(--ag-accent);
	text-decoration: none;
}

.agc-identity-row a:hover {
	text-decoration: underline;
}

/* ─── 5. Résumé IA (panneau interne de .agc-summary) ─────────────────── */
.agc-ai-summary {
	padding-top: 20px;
	border-top: 1px solid var(--ag-border);
}

.agc-ai-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	margin-bottom: 12px;
}

.agc-ai-title {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ag-text);
	margin: 0;
	line-height: 1.2;
}

/* Icône "généré par IA" placée juste à droite du sous-titre, avec tooltip */
.agc-ai-icon {
	display: inline-flex;
	align-items: center;
	color: var(--ag-purple);
	font-size: 15px;
	line-height: 1;
	cursor: help;
}

/* ─── Tooltip générique (icônes d'info) ─────────────────────────────── */
.agc-tooltip {
	position: relative;
}

.agc-tooltip::after,
.agc-tooltip::before {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	pointer-events: none;
	z-index: 30;
}

/* Bulle : affichée sous l'icône pour rester dans la carte et ne pas être
   recouverte par l'élément précédent. */
.agc-tooltip::after {
	content: attr(data-tooltip);
	left: 0;
	top: calc(100% + 8px);
	width: 240px;
	max-width: 70vw;
	box-sizing: border-box;
	height: auto;
	background: var(--ag-text);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	padding: 8px 10px;
	border-radius: var(--ag-radius-sm);
	white-space: normal;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.agc-tooltip::before {
	/* Aucun chevron : les styles globaux du thème peuvent transformer ce
	   pseudo-élément en carré. */
	content: none;
}

.agc-tooltip:hover::after,
.agc-tooltip:hover::before,
.agc-tooltip:focus::after,
.agc-tooltip:focus::before,
.agc-tooltip:focus-visible::after,
.agc-tooltip:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

.agc-ai-text {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ag-text);
}

/* ─── 6. Liste des avis ──────────────────────────────────────────────── */
.agc-reviews {
	position: relative;
}

.agc-reviews-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 20px;
}

.agc-reviews-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ag-text);
	margin: 0;
}

.agc-reviews-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ag-text-muted);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--ag-border);
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.agc-reviews-reset:hover {
	color: var(--ag-accent);
	border-color: var(--ag-accent);
	text-decoration: none;
}

.agc-reviews-reset i {
	font-size: 12px;
	display: flex;
	align-items: center;
	line-height: 1;
}

.agc-review-list {
	display: flex;
	flex-direction: column;
}

.agc-review {
	padding: 22px 0;
	border-top: 1px solid var(--ag-border);
}

.agc-review-list .agc-review:first-child {
	border-top: none;
	padding-top: 4px;
}

.agc-review-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

/* Regroupe avatar + nom/étoiles ; occupe l'espace et pousse la meta à droite.
   Sert aussi d'ancrage pour la réorganisation mobile (cf. media 600px). */
.agc-review-ident {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.agc-avatar {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ag-accent-soft);
	color: var(--ag-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.agc-review-id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.agc-review-author {
	font-size: 14px;
	font-weight: 600;
	color: var(--ag-text);
}

.agc-review-meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	text-align: right;
}

.agc-review-date {
	font-size: 12px;
	color: var(--ag-text-soft);
	white-space: nowrap;
}

.agc-review-order {
	font-size: 12px;
	color: var(--ag-text-soft);
	white-space: nowrap;
}

.agc-review-body {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ag-text);
	margin-left: 50px;
}

.agc-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 50px;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
}

.agc-badge.is-translated {
	background: #f4f4f4;
	color: #7d7d7d;
}

.agc-answer {
	margin: 14px 0 0 50px;
	padding: 12px 16px;
	background: var(--ag-bg);
	border-left: 3px solid var(--ag-accent);
	border-radius: 0 var(--ag-radius-sm) var(--ag-radius-sm) 0;
}

.agc-answer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.agc-answer-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ag-accent);
}

.agc-answer-date {
	font-size: 11px;
	color: var(--ag-text-soft);
}

.agc-answer-body {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ag-text-muted);
}

/* Message "aucun avis" */
.agc-review-list:empty::after,
.agc-reviews-empty {
	display: block;
	text-align: center;
	padding: 40px 20px;
	color: var(--ag-text-soft);
	font-size: 14px;
}

/* ─── 7. Pagination ──────────────────────────────────────────────────── */
.agc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--ag-border);
}

.agc-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid var(--ag-border);
	background: var(--ag-surface);
	color: var(--ag-text-muted);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.15s ease;
}

.agc-page-link:hover {
	border-color: var(--ag-border-strong);
	/* !important pour battre la règle globale du thème a:hover{color:#175298!important}
	   (dynamic-style.min.css) qui recolorait les liens en bleu au survol. */
	color: var(--ag-text) !important;
	text-decoration: none;
}

.agc-page-link.is-current {
	background: var(--ag-text);
	border-color: var(--ag-text);
	color: #fff;
}

.agc-page-link.is-current:hover {
	color: #fff !important;
}

/* ─── 8. Panneau latéral (conformité + transparence) ─────────────────── */
/* Conformité et Transparence sont deux cartes .ag-card distinctes, empilées
   comme .agc-identity dans .agc-col-side : le gap entre elles est déjà porté
   par .agc-col-side (gap: 18px), pas de règle d'espacement dédiée ici. */

.agc-card-heading {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--ag-text);
	margin: 0 0 8px;
}

.agc-transparency {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Titre + sous-titre du bloc, seuls éléments alignés à gauche (donut/légende
   restent centrés en dessous). */
.agc-transparency-head {
	width: 100%;
	text-align: left;
}

.agc-transparency-sub {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ag-text-muted);
	text-align: justify;
}

.agc-donut-wrap {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 18px;
}

.agc-donut-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.agc-donut-seg {
	/* Rayon (cf. $agc_donut_r en PHP) calé pour que le hover (22px) reste dans
	   le viewBox 120x120 sans rogner le trait aux bords. */
	stroke-width: 18;
	cursor: pointer;
	transition: stroke-width 0.15s ease, opacity 0.15s ease;
}

.agc-donut-svg:hover .agc-donut-seg:not(:hover) {
	opacity: 0.55;
}

.agc-donut-seg:hover {
	stroke-width: 22;
}

/* Couleurs reprises du donut v1 (transparencyWidget.php) */
.agc-donut-seg.is-approved { stroke: #175298; }
.agc-donut-seg.is-awaiting { stroke: #ff9900; }
.agc-donut-seg.is-refused { stroke: #DCDCDC; }

.agc-donut-seg.is-empty {
	stroke: var(--ag-border-strong);
	cursor: default;
	pointer-events: none;
}

.agc-donut-hole {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--ag-surface);
	box-shadow: 0 0 0 1px var(--ag-border) inset;
	pointer-events: none;
}

/* Tooltip du donut : suit le curseur, positionné en JS (cf. script inline
   dans content-certificate.php). */
.agc-donut-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	max-width: 220px;
	background: var(--ag-text);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: var(--ag-radius-sm);
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.agc-donut-tooltip[hidden] {
	display: none;
}

.agc-donut-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.agc-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ag-text-muted);
}

.agc-legend-item b {
	margin-left: auto;
	color: var(--ag-text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.agc-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ag-text-soft);
}

/* Couleurs reprises du donut v1 (transparencyWidget.php) */
.agc-legend-item.is-approved .agc-dot { background: #175298; }
.agc-legend-item.is-awaiting .agc-dot { background: #ff9900; }
.agc-legend-item.is-refused .agc-dot { background: #DCDCDC; }

/* Titre "Conformité" : libellé à gauche, icône bouclier à droite */
.agc-compliance-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.agc-compliance-heading i {
	color: #175298;
	flex: 0 0 auto;
	font-size: 16px;
}

/* ─── 8bis. Panneau latéral (établissements) ─────────────────────────── */
.agc-establishments-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ag-surface);
	border: 1px solid var(--ag-border);
	border-radius: 10px;
	padding: 0px 12px;
	margin-bottom: 10px;
}

.agc-establishments-search i {
	color: var(--ag-text-muted);
	font-size: 13px;
	flex: 0 0 auto;
}

.agc-establishments-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font-size: 13px;
	color: var(--ag-text);
	padding: 10px;
}

.agc-establishments-input::placeholder {
	color: var(--ag-text-muted);
}

.agc-establishments-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
	scrollbar-width: none;
}

.agc-establishments-list::-webkit-scrollbar {
	display: none;
}

.agc-establishments-item {
	list-style: none;
}

.agc-establishments-item a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 6px;
	text-decoration: none;
	color: var(--ag-text-muted);
	border-radius: 8px;
	font-size: 13px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.agc-establishments-item a:hover {
	background: var(--ag-bg);
	color: var(--ag-text);
	text-decoration: none;
}

.agc-establishments-item.is-active a {
	font-weight: 600;
	color: var(--ag-text);
	background: var(--ag-accent-soft);
}

.agc-establishments-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agc-establishments-rating {
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.agc-establishments-rating i {
	font-size: 11px;
	color: var(--ag-border-strong);
}

.agc-establishments-rating i.bi-star-fill {
	color: var(--ag-warning);
}

.agc-establishments-count {
	font-size: 11px;
	color: var(--ag-text-muted);
}

.agc-compliance-body {
	text-align: justify;
}

.agc-signature {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 16px 0 0;
}

/* Badge SAG (logo langue) à gauche de la signature */
.agc-compliance-logo {
	flex: 0 0 auto;
	width: 85px;
	height: auto;
}

.agc-signature-sign {
	flex: 0 1 auto;
	min-width: 0;
	text-align: center;
}

.agc-signature-img {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 2px;
}

.agc-signature-name {
	font-size: 11px;
	color: var(--ag-text-soft);
	line-height: 1.4;
	margin: 0;
}

.agc-legal {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ag-text-soft);
	margin: 0;
}

/* ─── 9. Compte suspendu ─────────────────────────────────────────────── */
/* La modale est elle-même la carte centrée ; ::before fournit le fond assombri
   plein écran (pas de wrapper enfant requis par le contrat DOM). */
.agc-suspended-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 200;
	width: calc(100% - 40px);
	max-width: 420px;
	background: var(--ag-surface);
	border-radius: var(--ag-radius);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
	padding: 32px 28px;
	text-align: center;
	color: var(--ag-text);
}

.agc-suspended-modal::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
}

/* ─── 10. Mode pop-in (iframe) ───────────────────────────────────────── */
html.agc-popin #masthead,
html.agc-popin #ag-header,
html.agc-popin #colophon,
html.agc-popin .grc-cookie-consent,
html.agc-popin .grc-cookie-consent-toggle {
	display: none !important;
}

html.agc-popin .main-holder,
html.agc-popin #page {
	margin: 0 !important;
}

/* Header masqué en pop-in : on retire le margin-top de compensation du spacer
   (règle framed, 80px) sinon il subsiste une bande blanche en haut. */
html.agc-popin body.thememount-framed .ag-site-header-spacer {
	margin-top: 0;
}

html.agc-popin #main.site-main {
	padding-top: 0 !important;
}

.agc-page.is-popin {
	margin-top: 0;
}

html.agc-popin .agc-shell {
	padding-top: 30px;
}

/* Pas de header fixe en mode pop-in (#ag-header masqué ci-dessus) : la sticky
   bar n'a pas de repère de "bas de header" sous lequel s'accrocher, on la
   masque entièrement dans ce contexte. */
html.agc-popin .agc-stickybar {
	display: none !important;
}

/* ─── 11. Responsive ─────────────────────────────────────────────────── */
/* En dessous de 1200px le container touche les bords : on réintroduit le même
   padding horizontal (16px) que le menu (.ag-container en mode framed), pour
   garder l'alignement. */
@media (max-width: 1199px) {
	.agc-shell {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 992px) {
	.agc-summary {
		gap: 20px;
	}

	.agc-summary-top {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.agc-score {
		flex: 0 0 auto;
		align-items: center;
		text-align: center;
	}

	.agc-cols {
		flex-direction: column;
	}

	.agc-col-side {
		flex-basis: auto;
		width: 100%;
	}
}

@media (max-width: 600px) {
	/* L'icône est au milieu du titre : ancrer la bulle à son centre évite
	   qu'elle sorte à droite des petits écrans. */
	.agc-ai-icon.agc-tooltip::after {
		left: 50%;
		width: min(240px, calc(100vw - 32px));
		max-width: calc(100vw - 32px);
		transform: translateX(-50%);
	}

	.agc-shell {
		padding: 10px 16px 40px;
	}

	/* Le design-system remet .ag-header en flex-direction:column /
	   align-items:flex-start sous 600px : le titre passe au-dessus et le
	   badge en dessous, alignés à gauche. On garde juste le wrap + un gap
	   raisonnable entre les deux. */
	.agc-header {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Mobile : le badge "Attestation de confiance" passe AU-DESSUS du titre
	   (eyebrow/label de contexte). Réagencement purement visuel via order —
	   le <h1> reste premier dans la source, donc sans impact SEO. */
	.agc-header-brand {
		order: -1;
		font-size: 13px;
	}

	.agc-header-brand i {
		font-size: 16px;
	}

	.agc-header .ag-header-title h1 {
		font-size: 24px;
	}

	.agc-score-num {
		font-size: 38px;
	}

	.agc-review-body,
	.agc-badge,
	.agc-answer {
		margin-left: 0;
	}

	/* Sous 600px : la meta (date + "suite à un achat") passe SOUS le corps de
	   l'avis. On dissout .agc-review-head (display:contents) pour réordonner
	   avatar/nom (1), corps (2), puis meta (3), badge/réponse ensuite. */
	.agc-review {
		display: flex;
		flex-direction: column;
	}

	.agc-review-head {
		display: contents;
	}

	.agc-review-ident {
		order: 1;
		margin-bottom: 12px;
	}

	.agc-review-body {
		order: 2;
	}

	/* Meta sous le corps : les deux dates empilées (2 lignes), 12px, sans gap. */
	.agc-review-meta {
		order: 3;
		width: 100%;
		margin-top: 10px;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		text-align: left;
	}

	.agc-review .agc-badge {
		order: 4;
		align-self: flex-start;
	}

	.agc-review .agc-answer,
	.agc-review .agc-ai-response {
		order: 4;
	}

	.agc-review-date,
	.agc-review-order {
		font-size: 12px;
	}
}

/* ─── 12. Sticky bar ──────────────────────────────────────────────────── */
/* Barre flottante fixée sous le header du site, alignée sur .agc-shell.
   Apparaît au scroll dès que le haut de .agc-reviews atteint le bas du
   header fixe (cf. script inline dans content-certificate.php). */
.agc-stickybar {
	position: fixed;
	top: 70px;
	left: 0;
	right: 0;
	/* Sous le header fixe (calée via top) et sous le drawer mobile
	   (.ag-nav ~110-120), tout en restant au-dessus du contenu de page. */
	z-index: 90;
	/* Bandeau pleine largeur collé sous le menu. Fond translucide + flou pour
	   un effet moderne. */
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ag-border);
	box-shadow: var(--ag-shadow-hover);
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.agc-stickybar.is-stuck {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.agc-stickybar-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
}

.agc-stickybar-logolink {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
}

.agc-stickybar-logo {
	max-height: 45px;
	max-width: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	flex: 0 0 auto;
}

.agc-stickybar-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.agc-stickybar-name {
	font-weight: 700;
	font-size: 16px;
	color: var(--ag-text);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agc-stickybar-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ag-text-muted);
}

.agc-stickybar-score {
	font-weight: 600;
	color: var(--ag-text);
}

.agc-stickybar-count {
	white-space: nowrap;
}

@media (max-width: 1199px) {
	.agc-stickybar-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 767px) {
	.agc-stickybar {
		top: 60px;
	}
}

@media (max-width: 600px) {
	.agc-stickybar-inner {
		gap: 10px;
		padding: 14px 16px;
	}

	.agc-stickybar-logo {
		max-height: 30px;
		max-width: 80px;
	}

	.agc-stickybar-name {
		max-width: 45vw;
	}

	.agc-stickybar-count {
		display: none;
	}
}

/* Décalage sous la WP admin bar quand elle est affichée (admin connecté).
   Miroir de body.admin-bar .ag-site-header (ag-header.css l.103-111) :
   top sticky = top du header (offset admin bar) + hauteur du header.
   Ordonné du plus large au plus étroit pour que la bonne valeur l'emporte.
   Sous 600px l'admin bar scrolle avec la page → le header revient à top:0,
   donc la barre reprend son offset de base (60px). */
body.admin-bar .agc-stickybar { top: 102px; }          /* 32 (adminbar) + 70 (header) */
@media (max-width: 782px) {
	body.admin-bar .agc-stickybar { top: 116px; }       /* 46 + 70 */
}
@media (max-width: 767px) {
	body.admin-bar .agc-stickybar { top: 106px; }       /* 46 + 60 */
}
@media (max-width: 600px) {
	body.admin-bar .agc-stickybar { top: 60px; }        /* admin bar non fixe : pas d'offset */
}