/* =================================================================
   Composants : boutons, badges PDP, fiche outil, disclosure,
   bandeau conformité, hero.
   ================================================================= */

/* ---------- Boutons ---------- */
.gf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gf-space-2);
	font-family: var(--gf-font-text);
	font-weight: 600;
	font-size: var(--gf-fs-base);
	line-height: 1;
	padding: 0.85em 1.4em;
	border-radius: var(--gf-r-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--gf-dur) var(--gf-ease),
		background-color var(--gf-dur) var(--gf-ease),
		color var(--gf-dur) var(--gf-ease);
}
.gf-btn--primary {
	background: var(--gf-cta);
	color: #fff;
}
.gf-btn--primary:hover {
	background: var(--gf-cta-hover);
	color: #fff;
	transform: translateY(-2px);
}
.gf-btn--ghost {
	background: transparent;
	color: var(--gf-ink);
	border-color: var(--gf-line-strong);
}
.gf-btn--ghost:hover { border-color: var(--gf-ink); }

.gf-btn--cta {
	background: var(--gf-accent);
	color: #fff;
}
.gf-btn--cta:hover { background: var(--gf-accent-ink); color: #fff; transform: translateY(-2px); }

.gf-btn--sm {
	font-size: var(--gf-fs-sm);
	padding: 0.65em 1.1em;
}

/* ---------- Badge PDP (élément signature) ---------- */
.gf-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding: 0.4em 0.7em;
	border-radius: var(--gf-r-pill);
	border: 1px solid transparent;
}
.gf-badge .gf-badge__dot {
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	flex: 0 0 auto;
}
.gf-badge--immatriculee {
	background: var(--gf-brand-soft);
	color: var(--gf-brand-ink);
	border-color: color-mix(in srgb, var(--gf-brand) 25%, transparent);
}
.gf-badge--immatriculee .gf-badge__dot { background: var(--gf-brand); }

.gf-badge--agreee {
	background: var(--gf-accent-soft);
	color: var(--gf-accent-ink);
	border-color: color-mix(in srgb, var(--gf-accent) 25%, transparent);
}
.gf-badge--agreee .gf-badge__dot { background: var(--gf-accent); }

.gf-badge--non_agreee {
	background: var(--gf-warn-soft);
	color: var(--gf-warn-ink);
	border-color: color-mix(in srgb, var(--gf-warn) 25%, transparent);
}
.gf-badge--non_agreee .gf-badge__dot { background: var(--gf-warn); }

.gf-badge--inconnu {
	background: var(--gf-muted-soft);
	color: var(--gf-muted);
	border-color: var(--gf-line-strong);
}
.gf-badge--inconnu .gf-badge__dot { background: var(--gf-muted); }

/* Date de vérification PDP */
.gf-pdp-verif {
	display: block;
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-xs);
	color: var(--gf-muted);
	margin-top: var(--gf-space-1);
}

/* ---------- Fiche outil ---------- */
.gf-fiche {
	background: var(--gf-surface);
	border: 1px solid var(--gf-line);
	border-radius: var(--gf-r-lg);
	padding: var(--gf-space-6);
	box-shadow: var(--gf-shadow-sm);
	transition: box-shadow var(--gf-dur) var(--gf-ease), transform var(--gf-dur) var(--gf-ease);
}
.gf-fiche:hover {
	box-shadow: var(--gf-shadow-md);
	transform: translateY(-3px);
}
.gf-fiche__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--gf-space-4);
	margin-bottom: var(--gf-space-4);
}
.gf-fiche__logo {
	width: 64px;
	height: 64px;
	border-radius: var(--gf-r-md);
	object-fit: contain;
	background: var(--gf-bg-tint);
	border: 1px solid var(--gf-line);
	flex: 0 0 auto;
}
.gf-fiche__titles {
	flex: 1 1 8rem;
	min-width: 6rem;
}
.gf-fiche__name {
	font-size: var(--gf-fs-h3);
	margin: 0 0 var(--gf-space-2);
}
.gf-fiche__best {
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-xs);
	color: var(--gf-accent-ink);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.gf-fiche__price {
	flex: 0 1 auto;
	margin-left: auto;
	max-width: min(100%, 14rem);
	text-align: right;
	font-family: var(--gf-font-display);
	font-size: var(--gf-fs-h3);
	line-height: 1.2;
}
.gf-fiche__price-amount {
	display: block;
	white-space: nowrap;
}
.gf-fiche__price small {
	display: block;
	margin-top: var(--gf-space-1);
	font-family: var(--gf-font-text);
	font-size: var(--gf-fs-sm);
	color: var(--gf-muted);
	font-weight: 400;
	line-height: 1.35;
}

.gf-fiche__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-space-3);
	align-items: center;
	margin-bottom: var(--gf-space-4);
}

/* Note en étoiles (CSS, pas d'image) */
.gf-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-sm);
	color: var(--gf-ink);
}
.gf-rating__stars {
	--pct: 0%;
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	background: linear-gradient(90deg, var(--gf-warn) var(--pct), var(--gf-line-strong) var(--pct));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.gf-rating__stars::before { content: "★★★★★"; }

/* Listes pros / cons */
.gf-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gf-space-4);
	margin: var(--gf-space-4) 0;
}
.gf-proscons ul { list-style: none; padding: 0; margin: 0; }
.gf-proscons li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: var(--gf-space-2);
	font-size: var(--gf-fs-sm);
}
.gf-pros li::before { content: "+"; position: absolute; left: 0; color: var(--gf-accent); font-weight: 700; }
.gf-cons li::before { content: "–"; position: absolute; left: 0; color: var(--gf-warn); font-weight: 700; }
.gf-proscons h4 {
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 var(--gf-space-2);
}

.gf-fiche__features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--gf-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gf-space-2);
}
.gf-fiche__features li {
	font-size: var(--gf-fs-xs);
	background: var(--gf-bg-tint);
	border: 1px solid var(--gf-line);
	border-radius: var(--gf-r-pill);
	padding: 0.3em 0.7em;
}

.gf-fiche__cta { display: flex; flex-wrap: wrap; gap: var(--gf-space-3); align-items: center; }

/* ---------- Disclosure d'affiliation ---------- */
.gf-disclosure {
	font-size: var(--gf-fs-sm);
	color: var(--gf-muted);
	background: var(--gf-bg-tint);
	border-left: 3px solid var(--gf-line-strong);
	padding: var(--gf-space-3) var(--gf-space-4);
	border-radius: 0 var(--gf-r-sm) var(--gf-r-sm) 0;
	margin: var(--gf-space-4) 0;
}

/* ---------- Bandeau conformité (countdown) ---------- */
.gf-countdown {
	background: var(--gf-ink);
	color: var(--gf-bg);
	border-radius: var(--gf-r-lg);
	padding: var(--gf-space-6);
	display: grid;
	gap: var(--gf-space-5);
	grid-template-columns: 1fr;
	position: relative;
	overflow: hidden;
}
.gf-countdown::after { /* motif grille discret */
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}
.gf-countdown__items {
	display: grid;
	gap: var(--gf-space-4);
	grid-template-columns: repeat(2, 1fr);
	position: relative;
	z-index: 1;
}
.gf-countdown__item {
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: var(--gf-r-md);
	padding: var(--gf-space-4);
}
.gf-countdown__date {
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-h3);
	color: #fff;
	display: block;
}
.gf-countdown__label { font-size: var(--gf-fs-sm); opacity: 0.85; }

/* ---------- Hero ---------- */
.gf-hero {
	display: grid;
	gap: var(--gf-space-8);
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
}
.gf-hero__title {
	font-size: var(--gf-fs-display);
	margin: var(--gf-space-4) 0;
}
.gf-hero__lead {
	font-size: var(--gf-fs-lead);
	color: var(--gf-muted);
	margin-bottom: var(--gf-space-6);
}
.gf-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gf-space-3); }
.gf-hero__media {
	border-radius: var(--gf-r-lg);
	overflow: hidden;
	border: 1px solid var(--gf-line);
	box-shadow: var(--gf-shadow-md);
}
.gf-hero__media img { display: block; width: 100%; height: auto; }

/* ---------- Grille de fiches ---------- */
.gf-grid {
	display: grid;
	gap: var(--gf-space-5);
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ---------- Contenu éditorial (prose) ---------- */
.gf-prose { max-width: var(--gf-maxw-text); }
.gf-prose h2 { margin: var(--gf-space-8) 0 var(--gf-space-3); }
.gf-prose h3 { margin: var(--gf-space-6) 0 var(--gf-space-2); }
.gf-prose p,
.gf-prose ul,
.gf-prose ol { margin-bottom: var(--gf-space-4); }
.gf-prose ul,
.gf-prose ol { padding-left: 1.4em; }
.gf-prose li { margin-bottom: var(--gf-space-2); }

/* ---------- Fil d'Ariane ---------- */
.gf-breadcrumb {
	font-family: var(--gf-font-mono);
	font-size: var(--gf-fs-xs);
	color: var(--gf-muted);
	margin-bottom: var(--gf-space-5);
}

/* ---------- En-tête de fiche single ---------- */
.gf-single__head { margin-bottom: var(--gf-space-5); }
.gf-single__head h1 { margin: var(--gf-space-2) 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.gf-hero { grid-template-columns: 1fr; }
	.gf-proscons { grid-template-columns: 1fr; }
	.gf-countdown__items { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.gf-fiche__price {
		margin-left: 0;
		text-align: left;
		max-width: 100%;
	}
}