/**
 * SPD Child — Éditorial (Phase 10, périmètre final)
 *
 * Styles des pages éditoriales, chargés UNIQUEMENT sur les contextes
 * éditoriaux (inc/enqueue.php → $is_editorial) : search, 404, pages WP
 * hors front page.
 *
 * Périmètre final : À propos, FAQ, Contact, légal, recherche, 404.
 * Les styles reproduisent exactement les classes Tailwind du design
 * React de référence (structure, tailles, espacements, couleurs,
 * radius, ombres, responsive).
 *
 * Les composants partagés (empty-state, product-card, shell, breadcrumb)
 * ont leurs propres feuilles — aucun doublon ici.
 *
 * @package SPD_Child
 * @since   1.0.0
 */

/* ==============================================================
 * 1. Scaffold — .spd-page (container + rythme vertical React)
 * ============================================================== */

/* Astra's #content > .ast-container is display:flex; on these custom
 * templates the bare <main id="main"> is the flex item and shrink-wraps
 * to its content width — so a narrow .spd-page shell (FAQ, 404, …) got
 * pinned to the left with an empty right side. Let it fill the
 * container so margin:auto can center (same fix as spd-tracking-page). */
.spd-main {
	width: 100%;
}

.spd-page {
	max-width: var(--spd-container-max);   /* max-w-7xl = 1280px */
	margin: 0 auto;
	padding: var(--spd-space-5) var(--spd-container-padding) var(--spd-space-7);
}
.spd-page--narrow { max-width: 56rem; }   /* max-w-4xl */
.spd-page--wide   { max-width: var(--spd-container-max); }
.spd-page--404    { max-width: 42rem; padding-top: var(--spd-space-7); padding-bottom: var(--spd-space-7); }

/* React : px-4 sm:px-6 (16px → 24px, jamais 32px) + py-6 + pb-16 */
#spd-about-page,
#spd-faq-page,
#spd-contact-page {
	display: flex;
	flex-direction: column;
	padding-top: var(--spd-space-5);     /* py-6 = 24px */
	padding-bottom: 4rem;                /* pb-16 = 64px */
}
#spd-about-page   { gap: var(--spd-space-7); }  /* space-y-12 */
#spd-faq-page     { gap: 2.5rem; }              /* space-y-10 */
#spd-contact-page { gap: var(--spd-space-7); }  /* space-y-12 */

@media (min-width: 640px) {
	.spd-page {
		padding-left: var(--spd-container-padding-sm);
		padding-right: var(--spd-container-padding-sm);
	}
	#spd-about-page { gap: 4rem; }            /* sm:space-y-16 */
}

.spd-page__article { display: flex; flex-direction: column; gap: var(--spd-space-4); }
.spd-page__title {
	font-size: var(--spd-font-size-3xl);
	font-weight: var(--spd-font-weight-extrabold);
	line-height: var(--spd-line-height-tight);
	letter-spacing: var(--spd-tracking-tight);
	color: var(--spd-text);
	margin: 0 0 var(--spd-space-4);
}
.spd-page__content { color: var(--spd-text); line-height: var(--spd-line-height-relaxed); }
.spd-page__content p { margin: 0 0 var(--spd-space-4); }
.spd-page__content h2,
.spd-page__content h3,
.spd-page__content h4 {
	color: var(--spd-text);
	font-weight: var(--spd-font-weight-bold);
	line-height: var(--spd-line-height-tight);
	margin: var(--spd-space-5) 0 var(--spd-space-3);
}
.spd-page__content h2 { font-size: var(--spd-font-size-2xl); }
.spd-page__content h3 { font-size: var(--spd-font-size-xl); }
.spd-page__content ul,
.spd-page__content ol { margin: 0 0 var(--spd-space-4); padding-left: var(--spd-space-5); }
.spd-page__content li { margin-bottom: var(--spd-space-2); }
.spd-page__content a { color: var(--spd-ui-blue); text-decoration: underline; }
.spd-page__content a:hover { color: var(--spd-ui-blue-dark); }
.spd-page__content img { max-width: 100%; height: auto; border-radius: var(--spd-radius-xl); }

/* Page header partagé — React : text-center + eyebrow bleu texte plein
   (jamais de pilule), title 3xl→4xl, desc xs→sm slate-500 */
.spd-page-header {
	text-align: center;
	max-width: 42rem;                       /* max-w-2xl */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-2);                /* space-y-2 (Contact) */
}
#spd-faq-page .spd-page-header { gap: var(--spd-space-3); } /* space-y-3 (FAQ) */
.spd-page-header__eyebrow {
	display: block;
	font-size: var(--spd-font-size-xs);     /* text-xs */
	font-weight: var(--spd-font-weight-black); /* font-black */
	letter-spacing: 0.1em;                  /* tracking-widest */
	text-transform: uppercase;
	color: var(--spd-ui-blue);              /* #0F5B94 */
	margin: 0;
}
.spd-page-header__title {
	font-size: var(--spd-font-size-3xl);    /* text-3xl */
	font-weight: var(--spd-font-weight-extrabold);
	line-height: var(--spd-line-height-tight);
	letter-spacing: var(--spd-tracking-tight);
	color: var(--spd-text);                 /* slate-900 */
	margin: 0;
}
.spd-page-header__desc {
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: var(--spd-text-muted);           /* slate-500 */
	line-height: var(--spd-line-height-relaxed);
	margin: 0;
}
@media (min-width: 640px) {
	.spd-page-header__title { font-size: var(--spd-font-size-4xl); } /* sm:text-4xl */
	.spd-page-header__desc  { font-size: var(--spd-font-size-sm); }  /* sm:text-sm */
}
/* FAQ : desc max-w-md mx-auto */
#spd-faq-page .spd-page-header__desc { max-width: 28rem; margin-left: auto; margin-right: auto; }

/* ==============================================================
 * 2. Boutons partagés — React: rounded-xl font-bold
 *    (.spd-btn existe déjà dans spd-order.css, scope order only —
 *    redéfini ici pour les contextes éditoriaux + variantes)
 * ============================================================== */

.spd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--spd-font-family);
	font-weight: var(--spd-font-weight-bold);
	font-size: var(--spd-font-size-xs);
	line-height: 1.25;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--spd-radius-lg);    /* rounded-xl = 12px */
	cursor: pointer;
	padding: 10px 20px;                     /* px-5 py-2.5 */
	transition: background var(--spd-transition-fast), color var(--spd-transition-fast), border-color var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}
.spd-btn--sm { padding: 8px 16px; font-size: var(--spd-font-size-xs); }
.spd-btn--lg { padding: 14px 32px; font-size: var(--spd-font-size-sm); }
.spd-btn--primary { background: var(--spd-ui-blue); color: #fff; }
.spd-btn--primary:hover,
.spd-btn--primary:focus-visible { background: var(--spd-ui-blue-dark); color: #fff; }
.spd-btn--ghost { background: var(--spd-surface); border-color: var(--spd-border); color: #334155; }
.spd-btn--ghost:hover,
.spd-btn--ghost:focus-visible { background: var(--spd-bg); color: #334155; }
.spd-btn--danger { background: var(--spd-ui-red); color: #fff; }
.spd-btn--danger:hover,
.spd-btn--danger:focus-visible { background: #B92C1F; color: #fff; }
/* React : bg-[#25D366] hover:bg-[#1EBE5D] */
.spd-btn--whatsapp { background: #25D366; color: #fff; }
.spd-btn--whatsapp:hover,
.spd-btn--whatsapp:focus-visible { background: #1EBE5D; color: #fff; }
.spd-btn .spd-icon { width: 16px; height: 16px; }
.spd-btn:focus-visible { outline: 2px solid var(--spd-ui-blue); outline-offset: 2px; }
@media (min-width: 640px) {
	.spd-btn { font-size: var(--spd-font-size-xs); } /* React garde text-xs sur les CTA éditoriaux */
}

/* ==============================================================
 * 3. Filter pills + champs + statuts + honeypot
 * ============================================================== */

/* React FAQ : flex justify-center gap-2 flex-wrap ; pill =
   px-4 py-2 rounded-xl text-xs font-bold, actif bg-[#0F5B94],
   inactif bg-white border-slate-200 text-slate-600 hover:bg-slate-50 */
.spd-filter-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spd-space-2);
}
.spd-filter-pills--center { justify-content: center; }
.spd-filter-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);      /* text-xs */
	font-weight: var(--spd-font-weight-bold);/* font-bold */
	color: #475569;                          /* slate-600 */
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);     /* border-slate-200 */
	border-radius: var(--spd-radius-lg);     /* rounded-xl = 12px */
	padding: 8px 16px;                       /* px-4 py-2 */
	cursor: pointer;
	text-decoration: none;
	transition: background var(--spd-transition-fast), color var(--spd-transition-fast), border-color var(--spd-transition-fast);
}
.spd-filter-pill:hover,
.spd-filter-pill:focus-visible { background: var(--spd-bg); color: #475569; }
.spd-filter-pill.is-active,
.spd-filter-pill.is-active:hover,
.spd-filter-pill.is-active:focus-visible { background: var(--spd-ui-blue); border-color: var(--spd-ui-blue); color: #fff; }
.spd-filter-pill .spd-icon { width: 14px; height: 14px; }

/* Champs — React Contact : label font-bold text-slate-700 text-xs
   block mb-1 ; input px-3.5 py-2.5 rounded-xl border-slate-200
   focus:ring-2 ring-[#0F5B94] */
.spd-field { display: flex; flex-direction: column; }
.spd-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-4);
}
@media (min-width: 640px) {
	.spd-field-row { grid-template-columns: 1fr 1fr; }
}
.spd-field__label {
	display: block;
	font-size: var(--spd-font-size-xs);      /* text-xs */
	font-weight: var(--spd-font-weight-bold);/* font-bold */
	color: #334155;                          /* slate-700 */
	margin-bottom: 4px;                      /* mb-1 */
}
.spd-field__input {
	width: 100%;
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-sm);
	color: var(--spd-text);
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);     /* border-slate-200 */
	border-radius: var(--spd-radius-lg);     /* rounded-xl = 12px */
	padding: 10px 14px;                      /* px-3.5 py-2.5 */
	transition: border-color var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}
.spd-field__input::placeholder { color: #94A3B8; }
.spd-field__input:focus {
	outline: none;
	border-color: var(--spd-ui-blue);
	box-shadow: 0 0 0 2px var(--spd-ui-blue); /* focus:ring-2 */
}
.spd-field__select { font-weight: var(--spd-font-weight-semibold); cursor: pointer; }
textarea.spd-field__input { resize: vertical; min-height: 96px; }

.spd-form-status {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-semibold);
	border-radius: var(--spd-radius-lg);
	padding: 10px 14px;
	margin: 0;
}
.spd-form-status.is-success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.spd-form-status.is-error   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* Honeypot — invisible pour les humains, visible pour les bots */
.spd-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
	visibility: hidden;
}

/* ==============================================================
 * 4. Recherche (search.php)
 * ============================================================== */

.spd-search__header { margin-bottom: var(--spd-space-5); }
.spd-search__title {
	font-size: var(--spd-font-size-2xl);
	font-weight: var(--spd-font-weight-extrabold);
	letter-spacing: var(--spd-tracking-tight);
	color: var(--spd-text);
	margin: 0 0 var(--spd-space-2);
}
.spd-search__count { font-size: var(--spd-font-size-sm); color: var(--spd-text-muted); margin: 0 0 var(--spd-space-4); }

.spd-search__form {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 36rem;
	margin-bottom: var(--spd-space-5);
}
.spd-search__form-icon {
	position: absolute;
	left: 14px;
	display: inline-flex;
	color: var(--spd-text-muted);
	pointer-events: none;
}
.spd-search__form-icon .spd-icon { width: 18px; height: 18px; }
.spd-search__input {
	flex: 1;
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-sm);
	color: var(--spd-text);
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-lg) 0 0 var(--spd-radius-lg);
	padding: 12px 14px 12px 42px;
}
.spd-search__input:focus { outline: none; border-color: var(--spd-ui-blue); box-shadow: 0 0 0 3px rgb(15 91 148 / 0.15); }
.spd-search__submit {
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	color: #fff;
	background: var(--spd-ui-blue);
	border: 1px solid var(--spd-ui-blue);
	border-radius: 0 var(--spd-radius-lg) var(--spd-radius-lg) 0;
	padding: 12px 20px;
	cursor: pointer;
	transition: background var(--spd-transition-fast);
}
.spd-search__submit:hover,
.spd-search__submit:focus-visible { background: var(--spd-ui-blue-dark); }

.spd-search__grid .spd-product-cards { margin-top: var(--spd-space-4); }

/* Résultats non-produits — liste d'articles/pages */
.spd-search-list { display: flex; flex-direction: column; gap: var(--spd-space-3); }
.spd-search-list__item {
	display: block;
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl);
	padding: var(--spd-space-4) var(--spd-space-5);
	transition: border-color var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}
.spd-search-list__item:hover { border-color: var(--spd-ui-blue); box-shadow: var(--spd-shadow-sm); }
.spd-search-list__title {
	font-size: var(--spd-font-size-lg);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	margin: 0 0 6px;
}
.spd-search-list__title a { color: inherit; text-decoration: none; }
.spd-search-list__title a:hover { color: var(--spd-ui-blue); }
.spd-search-list__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spd-space-3);
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	margin-bottom: 6px;
}
.spd-search-list__type {
	display: inline-block;
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	background: var(--spd-ui-blue-soft);
	border-radius: var(--spd-radius-full);
	padding: 2px 10px;
	text-transform: uppercase;
	letter-spacing: var(--spd-tracking-wide);
}
.spd-search-list__excerpt { font-size: var(--spd-font-size-sm); color: var(--spd-text-muted); margin: 0; }

/* Pagination (search, pages) */
.spd-page-pagination { margin-top: var(--spd-space-6); }
.spd-page-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spd-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.spd-page-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-semibold);
	color: #334155;
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-lg);
	text-decoration: none;
	transition: background var(--spd-transition-fast), color var(--spd-transition-fast), border-color var(--spd-transition-fast);
}
.spd-page-pagination .page-numbers:hover { border-color: var(--spd-ui-blue); color: var(--spd-ui-blue); }
.spd-page-pagination .page-numbers.current { background: var(--spd-ui-blue); border-color: var(--spd-ui-blue); color: #fff; }
.spd-page-pagination .page-numbers.dots { border: none; background: transparent; }

/* ==============================================================
 * 5. À propos (page-a-propos.php) — AboutPage.tsx
 * ============================================================== */

/* Hero : bg-gradient-to-r from-[#0F5B94] to-[#0A436D] text-white
   rounded-3xl p-6 sm:p-12 shadow-md ; contenu max-w-2xl space-y-4 */
.spd-about-hero {
	background: linear-gradient(to right, var(--spd-ui-blue), var(--spd-ui-blue-dark));
	color: #fff;
	border-radius: var(--spd-radius-2xl);   /* rounded-3xl = 24px */
	padding: var(--spd-space-5);            /* p-6 = 24px */
	box-shadow: var(--spd-shadow-md);
	position: relative;
	overflow: hidden;
}
.spd-about-hero__inner {
	max-width: 42rem;                       /* max-w-2xl */
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-4);                /* space-y-4 */
}
.spd-about-hero__badge {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	letter-spacing: 0.1em;                  /* tracking-widest */
	text-transform: uppercase;
	color: var(--spd-ui-gold);              /* #EAA21D */
}
.spd-about-hero__title {
	/* React : pas de couleur propre — hérite text-white de la section.
	   Sans déclaration explicite, le sélecteur h1 d'Astra gagne sur
	   l'héritage et rend le titre sombre sur fond bleu. */
	color: inherit;
	font-size: var(--spd-font-size-2xl);    /* text-2xl */
	font-weight: var(--spd-font-weight-extrabold);
	line-height: var(--spd-line-height-tight);
	letter-spacing: var(--spd-tracking-tight);
	margin: 0;
}
.spd-about-hero__desc {
	font-size: var(--spd-font-size-sm);     /* text-sm */
	color: #E0F2FE;                         /* sky-100 */
	line-height: var(--spd-line-height-relaxed);
	margin: 0;
}
@media (min-width: 640px) {
	.spd-about-hero { padding: var(--spd-space-7); }       /* sm:p-12 = 48px */
	.spd-about-hero__title { font-size: var(--spd-font-size-4xl); }  /* sm:text-4xl */
	.spd-about-hero__desc { font-size: var(--spd-font-size-base); }  /* sm:text-base */
}
@media (min-width: 768px) {
	.spd-about-hero__title { font-size: var(--spd-font-size-5xl); }  /* md:text-5xl */
}

/* En-têtes de section : text-center max-w-xl mx-auto space-y-2 */
.spd-about-section-header {
	text-align: center;
	max-width: 36rem;                       /* max-w-xl */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-2);
}
.spd-about-section-header .spd-page-header__eyebrow { margin: 0; }
.spd-about-section-header__title {
	font-size: var(--spd-font-size-2xl);    /* text-2xl */
	font-weight: var(--spd-font-weight-extrabold);
	letter-spacing: var(--spd-tracking-tight);
	line-height: var(--spd-line-height-tight);
	color: var(--spd-text);
	margin: 0;
}
@media (min-width: 640px) {
	.spd-about-section-header__title { font-size: var(--spd-font-size-3xl); } /* sm:text-3xl */
}

/* Sections internes : space-y-6 (header + grille) */
.spd-about-poles,
.spd-about-values { display: flex; flex-direction: column; gap: var(--spd-space-5); }

/* Mission : grid md:grid-cols-2 gap-8 items-center ;
   texte space-y-4, badge rouge texte plein */
.spd-about-mission {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-6);                /* gap-8 = 32px */
	align-items: center;
}
@media (min-width: 768px) {
	.spd-about-mission { grid-template-columns: 1fr 1fr; }
}
.spd-about-mission__text {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-4);                /* space-y-4 */
}
.spd-about-mission__badge {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--spd-ui-red);               /* #D93829 */
}
.spd-about-mission__title {
	font-size: var(--spd-font-size-2xl);
	font-weight: var(--spd-font-weight-extrabold);
	letter-spacing: var(--spd-tracking-tight);
	line-height: var(--spd-line-height-tight);
	color: var(--spd-text);
	margin: 0;
}
@media (min-width: 640px) {
	.spd-about-mission__title { font-size: var(--spd-font-size-3xl); }
}
.spd-about-mission__text p {
	font-size: var(--spd-font-size-sm);     /* text-sm */
	color: #475569;                         /* slate-600 */
	line-height: var(--spd-line-height-relaxed);
	margin: 0;
}

/* Image : relative aspect-4/3 rounded-3xl overflow-hidden shadow-lg
   border-slate-200 + overlay dégradé bas + légende text-xs */
.spd-about-mission__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--spd-radius-2xl);
	overflow: hidden;
	box-shadow: var(--spd-shadow-lg);
	border: 1px solid var(--spd-border);
	margin: 0;
}
.spd-about-mission__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.spd-about-mission__caption {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(15 23 42 / 0.6), transparent 50%, transparent);
	display: flex;
	align-items: flex-end;
	padding: var(--spd-space-5);            /* p-6 */
	color: #fff;
	font-size: var(--spd-font-size-xs);     /* text-xs */
	font-weight: var(--spd-font-weight-semibold);
}

/* Deux pôles : grid md:grid-cols-2 gap-6 ; carte gradient +
   border colorée + p-6 sm:p-8 rounded-3xl space-y-4 shadow-xs */
.spd-about-poles__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-5);                /* gap-6 */
}
@media (min-width: 768px) {
	.spd-about-poles__grid { grid-template-columns: 1fr 1fr; }
}
.spd-pole {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-4);                /* space-y-4 */
	padding: var(--spd-space-5);            /* p-6 */
	border-radius: var(--spd-radius-2xl);
	border: 1px solid;
	box-shadow: var(--spd-shadow-xs);
}
@media (min-width: 640px) {
	.spd-pole { padding: var(--spd-space-6); }             /* sm:p-8 */
}
.spd-pole--production {
	background: linear-gradient(to bottom right, var(--spd-ui-blue-soft), #fff);
	border-color: #BAE6FD;                  /* sky-200 */
}
.spd-pole--distribution {
	background: linear-gradient(to bottom right, rgb(255 251 235 / 0.6), #fff); /* amber-50/60 */
	border-color: #FDE68A;                  /* amber-200 */
}
.spd-pole__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.spd-pole__badge {
	display: inline-block;
	padding: 4px 12px;                      /* px-3 py-1 */
	background: var(--spd-ui-blue);
	color: #fff;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	border-radius: var(--spd-radius-md);    /* rounded-lg = 8px */
	text-transform: uppercase;
	letter-spacing: var(--spd-tracking-wider);
}
.spd-pole__badge--gold { background: var(--spd-ui-gold); }
.spd-pole__tag {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
}
.spd-pole__tag--gold { color: #92400E; }    /* amber-800 */
.spd-pole__title {
	font-size: var(--spd-font-size-xl);     /* text-xl */
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	margin: 0;
}
.spd-pole__desc {
	font-size: var(--spd-font-size-sm);
	color: #475569;
	line-height: var(--spd-line-height-relaxed);
	margin: 0;
}
.spd-pole__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);                /* space-y-3 */
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: #334155;                         /* slate-700 */
}
@media (min-width: 640px) {
	.spd-pole__list { font-size: var(--spd-font-size-sm); }
}
.spd-pole__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;                              /* gap-2.5 */
}
.spd-pole__item strong { font-weight: var(--spd-font-weight-bold); }
/* Cercle coloré w-5 h-5 rounded-full + check blanc 12px */
.spd-pole__check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: var(--spd-radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin-top: 2px;                        /* mt-0.5 */
}
.spd-pole__check .spd-icon { width: 12px; height: 12px; stroke-width: 3; }
.spd-pole__check--red  { background: var(--spd-ui-red); }
.spd-pole__check--gold { background: var(--spd-ui-gold); }
.spd-pole__check--blue { background: var(--spd-ui-blue); }
/* Lien texte : text-xs font-bold + arrow 14px, wrapper pt-2 */
.spd-pole__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;                               /* gap-1 */
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	text-decoration: none;
	margin-top: var(--spd-space-2);         /* pt-2 */
}
.spd-pole__cta:hover { text-decoration: underline; }
.spd-pole__cta .spd-icon { width: 14px; height: 14px; }
.spd-pole__cta--gold { color: #92400E; }    /* amber-800 */

/* Valeurs : grid sm:2 lg:4 gap-6 ; carte p-6 rounded-3xl bg-white
   border-slate-200 shadow-xs space-y-3, icône w-12 h-12 rounded-2xl */
.spd-about-values__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-5);                /* gap-6 */
}
@media (min-width: 640px) {
	.spd-about-values__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.spd-about-values__grid { grid-template-columns: repeat(4, 1fr); }
}
.spd-value-card {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);                /* space-y-3 */
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);            /* p-6 */
	box-shadow: var(--spd-shadow-xs);
}
.spd-value-card__icon {
	width: 48px;                            /* w-12 h-12 */
	height: 48px;
	border-radius: var(--spd-radius-xl);    /* rounded-2xl = 16px */
	display: flex;
	align-items: center;
	justify-content: center;
}
.spd-value-card__icon .spd-icon { width: 24px; height: 24px; }
.spd-value-card__icon--blue  { background: var(--spd-ui-blue-soft); color: var(--spd-ui-blue); }
.spd-value-card__icon--red   { background: #FDECEB; color: var(--spd-ui-red); }
.spd-value-card__icon--gold  { background: #FEF7E6; color: var(--spd-ui-gold); }
.spd-value-card__icon--green { background: #ECFDF5; color: #047857; } /* emerald-50/700 */
.spd-value-card__title {
	font-size: var(--spd-font-size-base);   /* text-base */
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	margin: 0;
}
.spd-value-card__desc {
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: var(--spd-text-muted);           /* slate-500 */
	line-height: var(--spd-line-height-relaxed);
	margin: 0;
}

/* Leadership : bg-slate-50 rounded-3xl p-6 sm:p-10 border
   space-y-6 ; header flex ; cartes rounded-2xl p-4 text-center */
.spd-about-team {
	background: var(--spd-bg);              /* slate-50 */
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);            /* p-6 */
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-5);                /* space-y-6 */
}
@media (min-width: 640px) {
	.spd-about-team { padding: 2.5rem; }    /* sm:p-10 = 40px */
}
.spd-about-team__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spd-space-4);
}
@media (min-width: 640px) {
	.spd-about-team__header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}
.spd-about-team__header .spd-page-header__eyebrow { margin: 0; }
.spd-about-team__header .spd-about-section-header__title {
	font-size: var(--spd-font-size-xl);     /* text-xl */
}
@media (min-width: 640px) {
	.spd-about-team__header .spd-about-section-header__title { font-size: var(--spd-font-size-2xl); }
}
.spd-about-team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-5);
}
@media (min-width: 640px) {
	.spd-about-team__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.spd-about-team__grid { grid-template-columns: repeat(4, 1fr); }
}
.spd-about-team__card {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);                /* space-y-3 */
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl);    /* rounded-2xl = 16px */
	padding: var(--spd-space-4);            /* p-4 */
	box-shadow: var(--spd-shadow-2xs);
	text-align: center;
}
.spd-about-team__photo {
	width: 96px;                            /* w-24 h-24 */
	height: 96px;
	border-radius: var(--spd-radius-full);
	object-fit: cover;
	margin: 0 auto;
	border: 2px solid var(--spd-surface-muted); /* border-slate-100 */
}
.spd-about-team__name {
	font-size: var(--spd-font-size-sm);     /* text-sm */
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	margin: 0;
}
.spd-about-team__role {
	font-size: var(--spd-font-size-xs);     /* text-xs */
	font-weight: var(--spd-font-weight-semibold);
	color: var(--spd-ui-blue);
}
.spd-about-team__bio {
	font-size: 11px;                        /* text-[11px] */
	color: var(--spd-text-muted);
	line-height: var(--spd-line-height-normal);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;                  /* line-clamp-2 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==============================================================
 * 6. FAQ (page-faq.php) — FaqPage.tsx
 * ============================================================== */

/* Recherche : relative max-w-xl mx-auto ; icône 20px left-4 ;
   input pl-12 pr-4 py-3 bg-white border-slate-200 rounded-2xl
   text-sm shadow-xs focus:ring-2 ring-[#0F5B94] */
.spd-faq-search {
	position: relative;
	max-width: 36rem;                       /* max-w-xl */
	margin: 0 auto;
	width: 100%;
}
.spd-faq-search__icon {
	position: absolute;
	left: 16px;                             /* left-4 */
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: #94A3B8;                         /* slate-400 */
	pointer-events: none;
}
.spd-faq-search__icon .spd-icon { width: 20px; height: 20px; }
/* La double classe est requise : la règle globale Astra
   `input[type="search"]{padding:12px 16px;border-radius:4px;height:40px;…}`
   (spécificité 0,1,1) écrase la classe seule et l'icône chevauchait le
   placeholder. React : pl-12 pr-4 py-3 rounded-2xl, hauteur auto. */
.spd-faq-search .spd-faq-search__input {
	width: 100%;
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-sm);     /* text-sm = 14px */
	line-height: 20px;                      /* text-sm leading */
	color: var(--spd-text);
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);    /* border-slate-200 */
	border-radius: var(--spd-radius-xl);    /* rounded-2xl = 16px */
	padding: 12px 16px 12px 48px;           /* pl-12 pr-4 py-3 */
	height: auto;
	box-shadow: var(--spd-shadow-xs);
	transition: border-color var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}
.spd-faq-search .spd-faq-search__input::placeholder { color: #94A3B8; }
.spd-faq-search .spd-faq-search__input:focus {
	outline: none;
	border-color: var(--spd-ui-blue);
	box-shadow: 0 0 0 2px var(--spd-ui-blue);
}
.spd-faq-search .spd-faq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Liste accordéons : space-y-3 */
.spd-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);
}

/* Item : bg-white rounded-2xl border-slate-200 overflow-hidden
   shadow-2xs transition-all */
.spd-faq-item {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl);    /* rounded-2xl = 16px */
	overflow: hidden;
	box-shadow: var(--spd-shadow-2xs);
	transition: all var(--spd-transition-normal);
}
.spd-faq-item__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spd-space-4);                /* gap-4 */
	text-align: left;
	font-family: var(--spd-font-family);
	background: transparent;
	border: none;
	padding: var(--spd-space-4);            /* p-4 */
	cursor: pointer;
	transition: background var(--spd-transition-fast);
}
@media (min-width: 640px) {
	.spd-faq-item__toggle { padding: 20px; }               /* sm:p-5 */
}
.spd-faq-item__toggle:hover { background: var(--spd-bg); } /* hover:bg-slate-50 */
.spd-faq-item__question {
	font-size: var(--spd-font-size-sm);     /* text-sm */
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);                 /* slate-900 */
}
@media (min-width: 640px) {
	.spd-faq-item__question { font-size: var(--spd-font-size-base); } /* sm:text-base */
}
.spd-faq-item__chevron {
	flex-shrink: 0;
	display: inline-flex;
	color: #94A3B8;                         /* slate-400 */
	transition: transform 200ms ease, color 200ms ease;
}
.spd-faq-item__chevron .spd-icon { width: 18px; height: 18px; }
.spd-faq-item.is-open .spd-faq-item__chevron {
	transform: rotate(180deg);
	color: var(--spd-ui-blue);              /* text-[#0F5B94] quand ouvert */
}
/* Réponse : px-5 pb-5 pt-1 text-xs sm:text-sm slate-600
   leading-relaxed border-t border-slate-100 */
.spd-faq-item__answer {
	padding: 4px 20px 20px;                 /* px-5 pb-5 pt-1 */
	border-top: 1px solid var(--spd-surface-muted); /* border-slate-100 */
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: #475569;                         /* slate-600 */
	line-height: var(--spd-line-height-relaxed);
}
@media (min-width: 640px) {
	.spd-faq-item__answer { font-size: var(--spd-font-size-sm); }
}
.spd-faq-item__answer p { margin: 0 0 var(--spd-space-2); }
.spd-faq-item__answer p:last-child { margin-bottom: 0; }

/* Empty state filtré — React : bg-white rounded-3xl p-8 text-center
   border-slate-200 */
.spd-faq-empty {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-6);            /* p-8 = 32px */
	text-align: center;
}
.spd-faq-empty__title {
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	color: #334155;                         /* slate-700 */
	margin: 0;
}
.spd-faq-empty__desc {
	font-size: var(--spd-font-size-xs);
	color: #94A3B8;                         /* slate-400 */
	margin: 4px 0 0;
}

/* Carte aide : bg-[#EBF3F9] rounded-3xl p-6 sm:p-8 text-center
   space-y-3 border-sky-100 */
.spd-faq-help {
	background: var(--spd-ui-blue-soft);    /* #EBF3F9 */
	border: 1px solid #E0F2FE;              /* sky-100 */
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);            /* p-6 */
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);                /* space-y-3 */
}
@media (min-width: 640px) {
	.spd-faq-help { padding: var(--spd-space-6); }         /* sm:p-8 */
}
.spd-faq-help__title {
	font-size: var(--spd-font-size-base);   /* text-base */
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0;
}
@media (min-width: 640px) {
	.spd-faq-help__title { font-size: var(--spd-font-size-lg); }
}
.spd-faq-help__desc {
	font-size: var(--spd-font-size-xs);
	color: #475569;
	max-width: 28rem;                       /* max-w-md */
	margin: 0 auto;
}
@media (min-width: 640px) {
	.spd-faq-help__desc { font-size: var(--spd-font-size-sm); }
}
.spd-faq-help__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spd-space-3);                /* gap-3 */
	padding-top: var(--spd-space-2);        /* pt-2 */
}

/* ==============================================================
 * 7. Contact (page-contact.php) — ContactPage.tsx
 * ============================================================== */

/* Grid : grid-cols-1 lg:grid-cols-12 gap-8 items-start ;
   gauche lg:col-span-5 space-y-6 ; droite lg:col-span-7 */
.spd-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-6);                /* gap-8 */
	align-items: start;
}
@media (min-width: 1024px) {
	.spd-contact-grid { grid-template-columns: repeat(12, 1fr); }
	.spd-contact-side { grid-column: span 5; }
	.spd-contact-form-card { grid-column: span 7; }
}
.spd-contact-side {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-5);                /* space-y-6 */
}

/* WhatsApp box : bg-[#25D366]/10 border-2 border-[#25D366]/30
   rounded-3xl p-6 space-y-3 */
.spd-whatsapp-box {
	background: rgb(37 211 102 / 0.1);
	border: 2px solid rgb(37 211 102 / 0.3);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);            /* p-6 */
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);                /* space-y-3 */
}
.spd-whatsapp-box__head {
	display: flex;
	align-items: center;
	gap: var(--spd-space-3);                /* gap-3 */
}
.spd-whatsapp-box__icon {
	width: 48px;                            /* w-12 h-12 */
	height: 48px;
	border-radius: var(--spd-radius-xl);    /* rounded-2xl */
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--spd-shadow-xs);
	flex-shrink: 0;
}
.spd-whatsapp-box__icon .spd-icon { width: 26px; height: 26px; }
.spd-whatsapp-box__title {
	font-size: var(--spd-font-size-base);   /* text-base */
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);                 /* slate-900 */
	margin: 0;
}
.spd-whatsapp-box__speed {
	display: flex;
	align-items: center;
	gap: 4px;                               /* gap-1 */
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-semibold);
	color: #047857;                         /* emerald-700 */
}
.spd-whatsapp-box__pulse {
	width: 8px;                             /* w-2 h-2 */
	height: 8px;
	border-radius: var(--spd-radius-full);
	background: #10B981;                    /* emerald-500 */
	animation: spd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spd-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
.spd-whatsapp-box__desc {
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: #475569;                         /* slate-600 */
	line-height: var(--spd-line-height-relaxed);
	margin: 0;
}
/* Bouton : w-full py-3 bg-[#25D366] hover:#1EBE5D text-xs
   rounded-xl gap-2 shadow-xs */
.spd-whatsapp-box__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;                               /* gap-2 */
	width: 100%;
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: #fff;
	background: #25D366;
	border: none;
	border-radius: var(--spd-radius-lg);
	padding: 12px;                          /* py-3 */
	text-decoration: none;
	box-shadow: var(--spd-shadow-xs);
	cursor: pointer;
	transition: background var(--spd-transition-fast);
}
.spd-whatsapp-box__btn:hover,
.spd-whatsapp-box__btn:focus-visible { background: #1EBE5D; color: #fff; }
.spd-whatsapp-box__btn .spd-icon { width: 16px; height: 16px; }

/* Coordonnées : bg-white rounded-3xl border-slate-200 p-6
   space-y-5 shadow-xs text-xs sm:text-sm slate-600 */
.spd-contact-card {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);            /* p-6 */
	display: flex;
	flex-direction: column;
	gap: 20px;                              /* space-y-5 */
	box-shadow: var(--spd-shadow-xs);
	font-size: var(--spd-font-size-xs);
	color: #475569;
}
@media (min-width: 640px) {
	.spd-contact-card { font-size: var(--spd-font-size-sm); }
}
.spd-contact-card__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;                              /* gap-3.5 */
}
.spd-contact-card__row--bordered {
	padding-top: var(--spd-space-2);        /* pt-2 */
	border-top: 1px solid var(--spd-surface-muted); /* border-slate-100 */
}
/* Icône : w-9 h-9 rounded-xl + couleur par type, icône 18px */
.spd-contact-card__icon {
	width: 36px;                            /* w-9 h-9 */
	height: 36px;
	border-radius: var(--spd-radius-lg);    /* rounded-xl = 12px */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.spd-contact-card__icon .spd-icon { width: 18px; height: 18px; }
.spd-contact-card__icon--blue  { background: var(--spd-ui-blue-soft); color: var(--spd-ui-blue); }
.spd-contact-card__icon--gold  { background: #FEF7E6; color: var(--spd-ui-gold); }
.spd-contact-card__icon--red   { background: #FDECEB; color: var(--spd-ui-red); }
.spd-contact-card__icon--green { background: #ECFDF5; color: #059669; } /* emerald-50/600 */
.spd-contact-card__title {
	font-size: var(--spd-font-size-sm);     /* text-sm */
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);                 /* slate-900 */
	margin: 0;
}
.spd-contact-card__text {
	color: var(--spd-text-muted);           /* slate-500 */
	margin: 2px 0 0;                        /* mt-0.5 */
	line-height: var(--spd-line-height-normal);
}
.spd-contact-card__text a { color: inherit; text-decoration: none; }
.spd-contact-card__text a:hover { color: var(--spd-ui-blue); }

/* Formulaire : bg-white rounded-3xl border-slate-200 p-6 sm:p-10
   shadow-xs space-y-6 */
.spd-contact-form-card {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);            /* p-6 */
	box-shadow: var(--spd-shadow-xs);
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-5);                /* space-y-6 */
}
@media (min-width: 640px) {
	.spd-contact-form-card { padding: 2.5rem; }            /* sm:p-10 */
}
.spd-contact-form-card__title {
	font-size: var(--spd-font-size-xl);     /* text-xl */
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0;
}
.spd-contact-form-card__desc {
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: var(--spd-text-muted);
	margin: 4px 0 0;                        /* mt-1 */
}
@media (min-width: 640px) {
	.spd-contact-form-card__desc { font-size: var(--spd-font-size-sm); }
}
/* form : space-y-4 text-xs */
.spd-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-4);                /* space-y-4 */
	font-size: var(--spd-font-size-xs);
}
/* Submit : w-full sm:w-auto px-8 py-3.5 bg-[#0F5B94] rounded-xl
   text-sm font-bold gap-2 shadow-md */
.spd-contact-form__submit {
	width: 100%;
	padding: 14px 32px;                     /* px-8 py-3.5 */
	font-size: var(--spd-font-size-sm);
	border-radius: var(--spd-radius-lg);
	box-shadow: var(--spd-shadow-md);
}
@media (min-width: 640px) {
	.spd-contact-form__submit { width: auto; }
}
.spd-contact-form__submit .spd-icon { width: 15px; height: 15px; }

/* Succès : bg-emerald-50 border-emerald-200 rounded-2xl p-6
   text-center space-y-3 */
.spd-contact-success {
	background: #ECFDF5;                    /* emerald-50 */
	border: 1px solid #A7F3D0;              /* emerald-200 */
	border-radius: var(--spd-radius-xl);    /* rounded-2xl */
	padding: var(--spd-space-5);            /* p-6 */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spd-space-3);                /* space-y-3 */
}
.spd-contact-success .spd-icon { width: 36px; height: 36px; color: #059669; } /* emerald-600 */
.spd-contact-success h4 {
	font-size: var(--spd-font-size-base);   /* text-base */
	font-weight: var(--spd-font-weight-bold);
	color: #064E3B;                         /* emerald-900 */
	margin: 0;
}
.spd-contact-success p {
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: #047857;                         /* emerald-700 */
	margin: 0;
}
.spd-contact-success__again {
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: #065F46;                         /* emerald-800 */
	text-decoration: underline;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* L'attribut HTML `hidden` est piloté par le JS (succès après AJAX,
   formulaire masqué une fois le message envoyé). display:flex ci-dessus
   gagne sur la règle UA [hidden]{display:none} — il faut réaffirmer
   l'état masqué sinon le succès s'affiche dès le chargement initial. */
.spd-contact-success[hidden],
.spd-contact-form[hidden] {
	display: none;
}

/* ==============================================================
 * 8. Légal (page.php → spd-page--legal)
 * ============================================================== */

.spd-legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spd-space-2);
	margin-bottom: var(--spd-space-5);
}
.spd-legal-nav__tab {
	display: inline-flex;
	align-items: center;
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-semibold);
	color: #334155;
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-full);
	padding: 8px 16px;
	text-decoration: none;
	transition: background var(--spd-transition-fast), color var(--spd-transition-fast), border-color var(--spd-transition-fast);
}
.spd-legal-nav__tab:hover,
.spd-legal-nav__tab:focus-visible { border-color: var(--spd-ui-blue); color: var(--spd-ui-blue); }
.spd-legal-nav__tab.is-active { background: var(--spd-ui-blue); border-color: var(--spd-ui-blue); color: #fff; }

.spd-legal-card {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-6);
}
.spd-legal-card__title {
	font-size: var(--spd-font-size-2xl);
	font-weight: var(--spd-font-weight-extrabold);
	letter-spacing: var(--spd-tracking-tight);
	color: var(--spd-text);
	margin: 0 0 var(--spd-space-4);
}

/* ==============================================================
 * 9. États & utilitaires éditoriaux
 * ============================================================== */

.spd-page--legal .spd-legal-card__content h2:first-child { margin-top: 0; }

/* Overline de l'empty-state partagé (ex. « 404 ») — React NotFoundPage */
.spd-empty-state__overline {
	font-size: var(--spd-font-size-5xl);
	font-weight: var(--spd-font-weight-black);
	line-height: 1;
	letter-spacing: var(--spd-tracking-tight);
	color: var(--spd-ui-blue-soft);
	-webkit-text-stroke: 2px var(--spd-ui-blue);
	margin: 0 0 var(--spd-space-3);
}
.spd-page--404 .spd-empty-state__title { font-size: var(--spd-font-size-2xl); }

/* Focus visible global éditorial */
.spd-page a:focus-visible,
.spd-page button:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.spd-whatsapp-box__pulse { animation: none; }
	.spd-faq-item__chevron { transition: none; }
}