/*
Theme Name:        FAE Starter
Description:       Thème enfant GeneratePress — starter kit premium orienté SEO & affiliation. Design system complet : tokens, header, footer, composants réutilisables, patterns Gutenberg.
Author:            FAE
Template:          generatepress
Version:           1.1.0
Requires at least: 6.0
Tested up to:      6.9
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       fae-starter
*/

/* ==========================================================================
   1. TOKENS — source de vérité du design system
   Les couleurs sont alignées sur la palette theme.json (préfixe fae-).
   ========================================================================== */

:root {
	/* Couleurs */
	--fae-primary: #123c63;
	--fae-primary-dark: #0c2b49;
	--fae-accent: #c2410c;        /* CTA conversion — contraste 5:1 avec blanc */
	--fae-accent-dark: #9a3412;
	--fae-ink: #1f2933;
	--fae-muted: #52606d;
	--fae-soft: #f4f7fa;
	--fae-border: #e1e8f0;
	--fae-success: #1a7a4c;
	--fae-success-soft: #ecf8f1;
	--fae-warning: #b45309;
	--fae-warning-soft: #fdf3e7;
	--fae-info-soft: #eef4fb;
	--fae-danger: #b3261e;
	--fae-danger-soft: #fceeed;

	/* Typographie — pile système : zéro webfont, zéro layout shift */
	--fae-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Rayons, ombres, transitions */
	--fae-radius-s: 6px;
	--fae-radius: 12px;
	--fae-radius-l: 20px;
	--fae-shadow-s: 0 1px 3px rgba(16, 42, 67, 0.08);
	--fae-shadow: 0 6px 24px rgba(16, 42, 67, 0.1);
	--fae-shadow-l: 0 16px 48px rgba(16, 42, 67, 0.16);
	--fae-transition: 0.18s ease;

	/* Espacement de section */
	--fae-section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* ==========================================================================
   2. BASE — typographie et fondations
   ========================================================================== */

body {
	font-family: var(--fae-font-sans);
	color: var(--fae-ink);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fae-font-sans);
	color: var(--fae-primary-dark);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.6rem + 2vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

.entry-content a:not(.wp-block-button__link):not(.fae-btn) {
	color: var(--fae-primary);
	text-decoration: underline;
	text-decoration-color: var(--fae-border);
	text-underline-offset: 3px;
	transition: color var(--fae-transition), text-decoration-color var(--fae-transition);
}

.entry-content a:not(.wp-block-button__link):not(.fae-btn):hover {
	color: var(--fae-accent);
	text-decoration-color: currentColor;
}

/* Focus visible — accessibilité clavier sur tout le site */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--fae-accent);
	outline-offset: 2px;
	border-radius: var(--fae-radius-s);
}

/* Ancres : compenser le header sticky */
:target,
[id] {
	scroll-margin-top: 90px;
}

/* Images : jamais de débordement, ratio préservé (anti-CLS) */
img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   3. HEADER — sticky, épuré, CTA de conversion dans le menu
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--fae-border);
	box-shadow: var(--fae-shadow-s);
}

/* L'admin bar WP ne doit pas recouvrir le header sticky */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header .site-title a {
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fae-primary-dark);
}

.main-navigation {
	background: transparent;
}

.main-navigation .main-nav ul li a {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--fae-ink);
	transition: color var(--fae-transition);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--fae-accent);
}

/* CTA dans le menu : ajouter la classe CSS « fae-nav-cta » à l'élément
   de menu (Apparence → Menus → Classes CSS) */
.main-navigation .main-nav ul li.fae-nav-cta > a {
	background: var(--fae-accent);
	color: #fff;
	border-radius: 999px;
	padding-left: 22px;
	padding-right: 22px;
	margin-left: 10px;
	transition: background var(--fae-transition);
}

.main-navigation .main-nav ul li.fae-nav-cta > a:hover {
	background: var(--fae-accent-dark);
	color: #fff;
}

/* ==========================================================================
   4. FOOTER — sombre, premium
   ========================================================================== */

.site-footer {
	background: var(--fae-primary-dark);
	color: rgba(255, 255, 255, 0.82);
}

.site-footer .footer-widgets {
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 3.5rem;
	padding-bottom: 2.5rem;
}

.site-footer .footer-widgets .widget-title,
.site-footer .footer-widgets h2,
.site-footer .footer-widgets h3 {
	color: #fff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.82);
	transition: color var(--fae-transition);
}

.site-footer a:hover {
	color: #fff;
}

.site-info {
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.875rem;
}

/* ==========================================================================
   5. BOUTONS
   Deux usages : classes utilitaires (.fae-btn…) dans du HTML libre, et
   variantes du bloc Bouton Gutenberg (classe additionnelle sur le bloc).
   ========================================================================== */

.fae-btn,
.wp-block-button .wp-block-button__link {
	display: inline-block;
	font-family: var(--fae-font-sans);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: 14px 28px;
	border-radius: 999px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background var(--fae-transition), color var(--fae-transition),
		border-color var(--fae-transition), transform var(--fae-transition),
		box-shadow var(--fae-transition);
}

/* Primaire (défaut) */
.fae-btn--primary,
.wp-block-button:not(.is-style-outline):not(.fae-btn--conversion):not(.fae-btn--ghost) .wp-block-button__link {
	background: var(--fae-primary);
	color: #fff;
}

.fae-btn--primary:hover,
.wp-block-button:not(.is-style-outline):not(.fae-btn--conversion):not(.fae-btn--ghost) .wp-block-button__link:hover {
	background: var(--fae-primary-dark);
	color: #fff;
}

/* Conversion (affiliation) — le bouton qui doit se voir */
.fae-btn--conversion,
.wp-block-button.fae-btn--conversion .wp-block-button__link {
	background: var(--fae-accent);
	color: #fff;
	box-shadow: 0 4px 14px rgba(194, 65, 12, 0.35);
}

.fae-btn--conversion:hover,
.wp-block-button.fae-btn--conversion .wp-block-button__link:hover {
	background: var(--fae-accent-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(194, 65, 12, 0.4);
}

/* Ghost / secondaire */
.fae-btn--ghost,
.wp-block-button.fae-btn--ghost .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--fae-primary);
	border-color: var(--fae-primary);
}

.fae-btn--ghost:hover,
.wp-block-button.fae-btn--ghost .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--fae-primary);
	color: #fff;
}

/* ==========================================================================
   6. CARTES — bloc Groupe + classe « fae-card »
   ========================================================================== */

.fae-card {
	background: #fff;
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1.75rem;
	box-shadow: var(--fae-shadow-s);
	transition: box-shadow var(--fae-transition), transform var(--fae-transition),
		border-color var(--fae-transition);
	height: 100%;
}

.fae-card:hover {
	box-shadow: var(--fae-shadow);
	transform: translateY(-3px);
	border-color: transparent;
}

.fae-card > :first-child { margin-top: 0; }
.fae-card > :last-child { margin-bottom: 0; }

.fae-card h3 {
	margin-bottom: 0.5rem;
}

/* Carte mise en avant (meilleur choix) */
.fae-card--featured {
	border: 2px solid var(--fae-accent);
	box-shadow: var(--fae-shadow);
	position: relative;
}

/* ==========================================================================
   7. TABLEAUX COMPARATIFS — bloc Tableau + classe « fae-table »
   ========================================================================== */

.fae-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fae-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	overflow: hidden;
	font-size: 0.95rem;
	box-shadow: var(--fae-shadow-s);
}

.fae-table thead th {
	background: var(--fae-primary);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: 14px 18px;
	border: 0;
}

.fae-table tbody td,
.fae-table tbody th {
	padding: 13px 18px;
	border: 0;
	border-top: 1px solid var(--fae-border);
	vertical-align: middle;
}

.fae-table tbody tr:nth-child(even) {
	background: var(--fae-soft);
}

.fae-table tfoot td {
	border-top: 2px solid var(--fae-border);
	font-weight: 700;
}

/* ==========================================================================
   8. ENCADRÉS (callouts) — bloc Groupe + classe « fae-callout fae-callout--… »
   ========================================================================== */

.fae-callout {
	border-radius: var(--fae-radius);
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--fae-border);
	border-left-width: 5px;
	background: var(--fae-soft);
	border-left-color: var(--fae-primary);
}

.fae-callout > :first-child { margin-top: 0; }
.fae-callout > :last-child { margin-bottom: 0; }

.fae-callout--info {
	background: var(--fae-info-soft);
	border-left-color: var(--fae-primary);
}

.fae-callout--success {
	background: var(--fae-success-soft);
	border-left-color: var(--fae-success);
}

.fae-callout--warning {
	background: var(--fae-warning-soft);
	border-left-color: var(--fae-warning);
}

.fae-callout--promo {
	background: linear-gradient(135deg, #fff7ed, #ffedd5);
	border: 1px dashed var(--fae-accent);
	border-left: 5px solid var(--fae-accent);
}

/* Mention affiliation — transparence + conformité */
.fae-disclosure {
	font-size: 0.85rem;
	color: var(--fae-muted);
	background: var(--fae-soft);
	border-radius: var(--fae-radius-s);
	padding: 0.6rem 1rem;
}

/* ==========================================================================
   9. BADGES — <span class="fae-badge fae-badge--…">
   ========================================================================== */

.fae-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--fae-soft);
	color: var(--fae-primary);
}

.fae-badge--top {
	background: var(--fae-accent);
	color: #fff;
}

.fae-badge--success {
	background: var(--fae-success-soft);
	color: var(--fae-success);
}

.fae-badge--warning {
	background: var(--fae-warning-soft);
	color: var(--fae-warning);
}

.fae-badge--new {
	background: var(--fae-primary);
	color: #fff;
}

/* ==========================================================================
   10. AVANTAGES / INCONVÉNIENTS — bloc Liste + classe « fae-pros » / « fae-cons »
   ========================================================================== */

.fae-pros,
.fae-cons {
	list-style: none;
	margin: 0;
	padding: 1.25rem 1.5rem;
	border-radius: var(--fae-radius);
}

.fae-pros {
	background: var(--fae-success-soft);
	border: 1px solid rgba(26, 122, 76, 0.25);
}

.fae-cons {
	background: var(--fae-danger-soft);
	border: 1px solid rgba(179, 38, 30, 0.2);
}

.fae-pros li,
.fae-cons li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.5rem;
}

.fae-pros li:last-child,
.fae-cons li:last-child {
	margin-bottom: 0;
}

.fae-pros li::before,
.fae-cons li::before {
	position: absolute;
	left: 0;
	font-weight: 800;
}

.fae-pros li::before {
	content: "✓";
	color: var(--fae-success);
}

.fae-cons li::before {
	content: "✕";
	color: var(--fae-danger);
}

/* ==========================================================================
   11. HERO & SECTIONS
   ========================================================================== */

.fae-section {
	padding-top: var(--fae-section-y);
	padding-bottom: var(--fae-section-y);
}

.fae-hero {
	background:
		radial-gradient(1000px 400px at 85% -10%, rgba(18, 60, 99, 0.08), transparent),
		var(--fae-soft);
	border-bottom: 1px solid var(--fae-border);
}

.fae-hero .fae-kicker {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fae-accent);
	margin-bottom: 0.75rem;
}

.fae-hero p {
	color: var(--fae-muted);
	font-size: 1.15rem;
	max-width: 60ch;
}

/* Bande CTA finale */
.fae-cta-band {
	background: linear-gradient(120deg, var(--fae-primary-dark), var(--fae-primary));
	color: #fff;
	border-radius: var(--fae-radius-l);
}

.fae-cta-band.fae-section {
	padding: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
}

.fae-cta-band h2,
.fae-cta-band h3 {
	color: #fff;
}

.fae-cta-band p {
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   12. FAQ — bloc Détails (SEO : contenu indexable, natif, sans JS)
   ========================================================================== */

.entry-content .wp-block-details {
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1rem 1.25rem;
	background: #fff;
	margin-bottom: 0.75rem;
}

.entry-content .wp-block-details summary {
	font-weight: 700;
	color: var(--fae-primary-dark);
	cursor: pointer;
	list-style-position: outside;
}

.entry-content .wp-block-details[open] summary {
	margin-bottom: 0.6rem;
}

/* ==========================================================================
   13. UTILITAIRES & ACCESSIBILITÉ
   ========================================================================== */

.fae-text-muted { color: var(--fae-muted); }
.fae-text-center { text-align: center; }

/* Étoiles de notation (texte, accessible) */
.fae-rating {
	color: #e8a013;
	letter-spacing: 2px;
	font-size: 1.05rem;
}

/* Respect de prefers-reduced-motion : on neutralise les animations */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.fae-card:hover,
	.fae-btn--conversion:hover {
		transform: none;
	}
}

/* ==========================================================================
   14. CARTE LOGICIEL — fiche produit riche (bloc Groupe « fae-soft-card »)
   ========================================================================== */

.fae-soft-card {
	background: #fff;
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1.75rem;
	box-shadow: var(--fae-shadow-s);
	height: 100%;
}

.fae-soft-card--featured {
	border: 2px solid var(--fae-accent);
	box-shadow: var(--fae-shadow);
}

.fae-soft-card > :first-child { margin-top: 0; }
.fae-soft-card > :last-child { margin-bottom: 0; }

/* Ligne prix */
.fae-price {
	font-size: 1.05rem;
	color: var(--fae-muted);
}

.fae-price strong {
	font-size: 1.5rem;
	color: var(--fae-primary-dark);
}

/* Liste de fonctionnalités (coche discrète, sans fond) */
.fae-features {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.fae-features li {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.45rem;
}

.fae-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 800;
	color: var(--fae-success);
}

/* ==========================================================================
   15. CTA AFFILIATION — box de conversion (bloc Groupe « fae-cta-box »)
   ========================================================================== */

.fae-cta-box {
	background: linear-gradient(135deg, #fff7ed, #ffedd5);
	border: 1px solid rgba(194, 65, 12, 0.3);
	border-radius: var(--fae-radius);
	padding: 1.75rem 2rem;
	box-shadow: var(--fae-shadow-s);
}

.fae-cta-box > :first-child { margin-top: 0; }
.fae-cta-box > :last-child { margin-bottom: 0; }

.fae-cta-box .fae-cta-note {
	font-size: 0.85rem;
	color: var(--fae-muted);
}

/* ==========================================================================
   16. ARTICLES SEO — sommaire, méta, lisibilité
   ========================================================================== */

/* Sommaire (bloc Groupe « fae-toc ») */
.fae-toc {
	background: var(--fae-soft);
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1.25rem 1.5rem;
	font-size: 0.95rem;
}

.fae-toc > :first-child { margin-top: 0; }
.fae-toc > :last-child { margin-bottom: 0; }

.fae-toc ul {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.fae-toc li {
	margin-bottom: 0.4rem;
	padding-left: 1.4rem;
	position: relative;
}

.fae-toc li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--fae-accent);
	font-weight: 700;
}

.fae-toc a {
	text-decoration: none;
	color: var(--fae-primary);
}

.fae-toc a:hover {
	color: var(--fae-accent);
	text-decoration: underline;
}

/* Confort de lecture des articles */
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol {
	max-width: 72ch;
}

.single .entry-content h2 {
	margin-top: 2.5rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--fae-border);
}

/* Méta d'article (date, temps de lecture) */
.entry-meta,
.fae-article-meta {
	font-size: 0.875rem;
	color: var(--fae-muted);
}

/* ==========================================================================
   17. FOOTER ENRICHI (rendu par le hook fae_starter_footer)
   ========================================================================== */

.fae-footer-cols {
	background: var(--fae-primary-dark);
	color: rgba(255, 255, 255, 0.82);
	padding: 3.5rem 30px 2.5rem;
}

.fae-footer-cols .fae-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 3rem;
}

@media (max-width: 768px) {
	.fae-footer-cols .fae-footer-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.fae-footer-cols h2 {
	color: #fff;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 1rem;
}

.fae-footer-cols p {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

.fae-footer-cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fae-footer-cols li {
	margin-bottom: 0.55rem;
}

.fae-footer-cols a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.fae-footer-cols a:hover {
	color: #fff;
	text-decoration: underline;
}

.fae-footer-cols .fae-footer-disclosure {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
}

/* Gouttière latérale des sections pleine largeur (mobile inclus) :
   un groupe alignfull n'hérite d'aucun padding de conteneur. */
.entry-content .wp-block-group.alignfull {
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
}

/* ==========================================================================
   18. COMPOSANTS ÉDITORIAUX — portail média
   ========================================================================== */

/* Timeline calendrier (bloc Liste « fae-timeline ») */
.fae-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.75rem;
	border-left: 3px solid var(--fae-border);
}

.fae-timeline li {
	position: relative;
	padding-bottom: 1.5rem;
}

.fae-timeline li::before {
	content: "";
	position: absolute;
	left: calc(-1.75rem - 8.5px);
	top: 0.35em;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--fae-accent);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--fae-accent);
}

.fae-timeline li strong:first-child {
	display: block;
	color: var(--fae-primary-dark);
	font-size: 1.05rem;
}

/* Carte article (groupe « fae-article-card ») */
.fae-article-card {
	background: #fff;
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1.5rem;
	box-shadow: var(--fae-shadow-s);
	height: 100%;
	transition: box-shadow var(--fae-transition), transform var(--fae-transition);
}

.fae-article-card:hover {
	box-shadow: var(--fae-shadow);
	transform: translateY(-2px);
}

.fae-article-card > :first-child { margin-top: 0; }
.fae-article-card > :last-child { margin-bottom: 0; }

.fae-article-card .fae-card-tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fae-accent);
	margin-bottom: 0.4rem;
}

.fae-article-card h3 {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}

.fae-article-card h3 a {
	text-decoration: none;
	color: var(--fae-primary-dark);
}

.fae-article-card h3 a:hover {
	color: var(--fae-accent);
}

.fae-article-card p {
	font-size: 0.95rem;
	color: var(--fae-muted);
}

.fae-article-card .fae-read-more {
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--fae-primary);
}

.fae-article-card .fae-read-more:hover {
	color: var(--fae-accent);
}

/* Carte guide (groupe « fae-guide-card ») : icône + titre + description */
.fae-guide-card {
	background: var(--fae-soft);
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1.5rem;
	height: 100%;
	transition: border-color var(--fae-transition), box-shadow var(--fae-transition);
}

.fae-guide-card:hover {
	border-color: var(--fae-primary);
	box-shadow: var(--fae-shadow-s);
}

.fae-guide-card > :first-child { margin-top: 0; }
.fae-guide-card > :last-child { margin-bottom: 0; }

.fae-guide-card .fae-guide-icon {
	font-size: 1.9rem;
	line-height: 1;
	margin-bottom: 0.6rem;
}

.fae-guide-card h3 {
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
}

.fae-guide-card h3 a {
	text-decoration: none;
	color: var(--fae-primary-dark);
}

.fae-guide-card h3 a:hover { color: var(--fae-accent); }

.fae-guide-card p {
	font-size: 0.92rem;
	color: var(--fae-muted);
	margin: 0;
}

/* Carte situation « Suis-je concerné ? » (groupe « fae-situation-card ») */
.fae-situation-card {
	background: #fff;
	border: 1px solid var(--fae-border);
	border-left: 5px solid var(--fae-primary);
	border-radius: var(--fae-radius);
	padding: 1.25rem 1.5rem;
	height: 100%;
}

.fae-situation-card > :first-child { margin-top: 0; }
.fae-situation-card > :last-child { margin-bottom: 0; }

.fae-situation-card h3 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
}

.fae-situation-card p {
	font-size: 0.92rem;
	margin: 0;
	color: var(--fae-muted);
}

/* Encadré « À retenir » */
.fae-callout--key {
	background: var(--fae-info-soft);
	border: 1px solid var(--fae-border);
	border-left: 5px solid var(--fae-primary);
	border-radius: var(--fae-radius);
	padding: 1.25rem 1.5rem;
}

.fae-callout--key > :first-child { margin-top: 0; }
.fae-callout--key > :last-child { margin-bottom: 0; }

/* Encadré « Prochaine étape » */
.fae-next-step {
	background: #fff;
	border: 1px dashed var(--fae-primary);
	border-radius: var(--fae-radius);
	padding: 1.1rem 1.4rem;
}

.fae-next-step > :first-child { margin-top: 0; }
.fae-next-step > :last-child { margin-bottom: 0; }

/* Bloc « outil recommandé » discret — volontairement sobre */
.fae-tool-hint {
	background: var(--fae-soft);
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius-s);
	padding: 0.9rem 1.2rem;
	font-size: 0.92rem;
	color: var(--fae-muted);
}

.fae-tool-hint > :first-child { margin-top: 0; }
.fae-tool-hint > :last-child { margin-bottom: 0; }

.fae-tool-hint a {
	font-weight: 700;
}

/* Checklist « que faire maintenant » (bloc Liste « fae-checklist ») */
.fae-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: fae-step;
}

.fae-checklist li {
	position: relative;
	counter-increment: fae-step;
	padding: 0 0 1.1rem 3rem;
}

.fae-checklist li::before {
	content: counter(fae-step);
	position: absolute;
	left: 0;
	top: -0.1em;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--fae-primary);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
}

/* Glossaire (groupe « fae-glossary ») */
.fae-glossary {
	background: #fff;
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1.4rem 1.5rem;
	height: 100%;
}

.fae-glossary > :first-child { margin-top: 0; }
.fae-glossary > :last-child { margin-bottom: 0; }

.fae-glossary h3 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
	color: var(--fae-primary);
}

.fae-glossary p {
	font-size: 0.92rem;
	color: var(--fae-muted);
	margin: 0;
}

/* ==========================================================================
   19. PAGES CATÉGORIE — archives en grille de cartes
   ========================================================================== */

.archive .page-header,
.blog .page-header {
	max-width: 760px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.archive .page-header .page-title {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.archive .taxonomy-description p {
	color: var(--fae-muted);
	font-size: 1.05rem;
}

.archive .site-main,
.blog .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.75rem;
}

.archive .site-main > .page-header,
.archive .site-main > nav,
.blog .site-main > .page-header,
.blog .site-main > nav {
	grid-column: 1 / -1;
}

.archive .site-main article,
.blog .site-main article {
	background: #fff;
	border: 1px solid var(--fae-border);
	border-radius: var(--fae-radius);
	padding: 1.5rem;
	box-shadow: var(--fae-shadow-s);
	transition: box-shadow var(--fae-transition), transform var(--fae-transition);
}

.archive .site-main article:hover,
.blog .site-main article:hover {
	box-shadow: var(--fae-shadow);
	transform: translateY(-2px);
}

.archive .site-main article .entry-title,
.blog .site-main article .entry-title {
	font-size: 1.15rem;
}

.archive .site-main article .entry-title a,
.blog .site-main article .entry-title a {
	text-decoration: none;
	color: var(--fae-primary-dark);
}

.archive .site-main article .entry-title a:hover,
.blog .site-main article .entry-title a:hover {
	color: var(--fae-accent);
}

.archive .site-main article .entry-summary,
.blog .site-main article .entry-summary {
	font-size: 0.95rem;
	color: var(--fae-muted);
}

/* Neutralisation du CSS legacy GeneratePress (titre 45px, pavés sombres
   sur les items de menu actifs/survolés) au profit de notre header. */
.site-header .main-title {
	font-size: 1.35rem;
	margin: 0;
	line-height: 1.2;
}

.site-header .main-title a {
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fae-primary-dark);
}

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background-color: transparent;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--fae-accent);
}

.main-navigation .main-nav ul li.fae-nav-cta > a,
.main-navigation .main-nav ul li.fae-nav-cta:hover > a,
.main-navigation .main-nav ul li.fae-nav-cta[class*="current-menu-"] > a {
	background-color: var(--fae-accent);
	color: #fff;
}

/* Navigation compacte : 5 hubs aux libellés longs doivent tenir sur une
   ligne à 1280px. */
.main-navigation .main-nav ul li a {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 0.9rem;
}

.main-navigation .main-nav ul li.fae-nav-cta > a {
	padding-left: 18px;
	padding-right: 18px;
	margin-left: 6px;
}

.site-header .main-title {
	white-space: nowrap;
}