/* ==========================================================================
   Bouaicha — feuille de styles principale
   --------------------------------------------------------------------------
   Règles d'écriture :
   - propriétés logiques uniquement (margin-inline-start, inset-inline-end…)
     pour que le même CSS fonctionne en LTR (FR/EN) et en RTL (AR) ;
   - couleurs, polices et tailles issues de theme.json (variables --wp--preset--*) ;
   - pas d'imbrication CSS native (prudence de compatibilité) ;
   - points de rupture en em : 30em (480px), 48em (768px), 64em (1024px),
     68.75em (1100px : navigation de bureau, à garder synchronisé avec navigation.js).

   Sommaire
   1. Jetons de design
   2. Langue arabe (polices, interlignage, RTL)
   3. Base
   4. Typographie
   5. Utilitaires
   6. Boutons
   7. Formulaires
   8. Barre supérieure
   9. En-tête et logo
   10. Navigation (bureau puis mobile)
   11. Sélecteur de langue
   12. En-tête de page et contenu
   13. Pied de page
   14. Coordonnées et placeholders
   15. Contact : formulaire de rendez-vous, boutons d'appel, carte, boutons flottants
   16. Animations (apparition au défilement)
   17. Accessibilité et préférences utilisateur
   ========================================================================== */


/* 1. Jetons de design
   ========================================================================== */

:root {
	--c-navy: var(--wp--preset--color--bleu-nuit, #14213d);
	--c-bordeaux: var(--wp--preset--color--bordeaux, #6b1e2b);
	--c-gold: var(--wp--preset--color--dore, #b8955a);
	--c-text: var(--wp--preset--color--anthracite, #2e3338);
	--c-muted: var(--wp--preset--color--gris, #6b7178);
	--c-line: var(--wp--preset--color--gris-clair, #e3e1dc);
	--c-bg-alt: var(--wp--preset--color--blanc-casse, #f7f5f1);
	--c-bg: var(--wp--preset--color--blanc, #fff);
	/* Sable chaud (haut de l'accueil) : dérivé du doré, réservé aux fonds.
	   Pas de texte gris moyen dessus (4,14:1, sous le seuil AA) ; bordeaux, bleu nuit, anthracite : > 9:1. */
	--c-sand: #f4eadc;

	/* Contrastes vérifiés (voir _brief/ANALYSE-phase-1.md § 8) :
	   le doré n'est jamais utilisé comme couleur de texte sur fond clair. */
	--focus-color: var(--c-bordeaux);

	--font-body: var(--wp--custom--font-stack--body);
	--font-heading: var(--wp--custom--font-stack--heading);

	--gutter: var(--wp--custom--gutter, clamp(1rem, 0.25rem + 3.5vw, 2.5rem));
	--container: var(--wp--style--global--wide-size, 77.5rem);
	--radius: var(--wp--custom--radius, 3px);
	--shadow: var(--wp--preset--shadow--discrete);
	--shadow-float: 0 0.75rem 2.5rem rgba(20, 33, 61, 0.1);
	--transition: var(--wp--custom--transition, 200ms ease);

	--header-height: 5rem;
	--topbar-height: 2.5rem;
}

/* Contextes sombres : le focus et les accents passent au doré (5,69:1 sur bleu nuit). */
.is-dark,
.topbar,
.site-footer,
.has-bleu-nuit-background-color,
.has-bordeaux-background-color {
	--focus-color: var(--c-gold);
}


/* 2. Langue arabe
   ========================================================================== */

/* Les piles de polices et l'interlignage sont des variables de theme.json :
   on les redéfinit pour l'arabe (sélecteurs plus spécifiques que :root et body). */
:root:lang(ar),
:root:lang(ar) body {
	--wp--custom--font-stack--body: var(--wp--preset--font-family--ibm-plex-sans-arabic);
	--wp--custom--font-stack--heading: var(--wp--preset--font-family--amiri);
	--wp--custom--line-height--body: 1.85;
	--wp--custom--line-height--heading: 1.5;
}

/* L'arabe se lit un peu plus grand à taille égale. */
:root:lang(ar) {
	font-size: 106.25%;
}

/* L'espacement des lettres casse la liaison des lettres arabes : neutralisé partout. */
:lang(ar) {
	letter-spacing: normal !important;
}

/* Pas d'italique en arabe : l'emphase passe par la graisse. */
:lang(ar) :is(em, i, cite, q, blockquote) {
	font-style: normal;
}

:lang(ar) :is(em, i) {
	font-weight: 600;
}

/* Icônes directionnelles (flèches) retournées en RTL. */
[dir="rtl"] .icon--directional {
	transform: scaleX(-1);
}


/* 3. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-block-start: calc(var(--header-height) + 1rem);
}

body {
	margin: 0;
	font-family: var(--font-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

img,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

.icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
}

::selection {
	background: var(--c-navy);
	color: var(--c-bg);
}

:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 3px;
}

/* La zone principale reçoit le focus du lien d'évitement : pas de contour sur le bloc entier. */
.site-main:focus {
	outline: none;
}


/* 4. Typographie
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0;
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
	text-decoration-color: var(--c-gold);
}

strong,
b {
	font-weight: 600;
}

small,
.text-small {
	font-size: var(--wp--preset--font-size--small);
}

.lead {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

/* Surtitre : petites capitales espacées, précédées d'un filet doré.
   .eyebrow dans les gabarits, .is-style-eyebrow pour le style de paragraphe « Surtitre ». */
.eyebrow,
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-bordeaux);
}

.eyebrow {
	margin: 0;
}

.eyebrow::before,
.is-style-eyebrow::before {
	content: "";
	flex-shrink: 0;
	inline-size: 2rem;
	block-size: 1px;
	background: var(--c-gold);
}

:lang(ar) :is(.eyebrow, .is-style-eyebrow) {
	font-size: 0.875rem;
}

/* Sur fond bleu nuit, le surtitre passe au doré (5,69:1).
   Sur bordeaux, le doré ne suffit pas pour un petit texte (4,06:1) : gris clair. */
:is(.is-dark, .site-footer, .has-bleu-nuit-background-color) :is(.eyebrow, .is-style-eyebrow) {
	color: var(--c-gold);
}

:is(.cta-band, .has-bordeaux-background-color) :is(.eyebrow, .is-style-eyebrow) {
	color: var(--c-line);
}

/* Listes : puces dorées (décoratives). */
:where(.entry-content) ul li::marker {
	color: var(--c-gold);
}

blockquote,
.wp-block-quote {
	margin-inline: 0;
	padding-inline-start: 1.5rem;
	border-inline-start: 2px solid var(--c-gold);
	color: var(--c-navy);
}

.wp-block-quote:not(:lang(ar)) {
	font-style: italic;
}

.wp-block-quote cite {
	display: block;
	margin-block-start: 0.75rem;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--c-muted);
}

hr,
.wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--c-gold);
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	inline-size: 4rem;
	margin-inline: 0;
}


/* 5. Utilitaires
   ========================================================================== */

.container {
	inline-size: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

/* Espacement vertical régulier entre éléments enfants. */
.flow > * + * {
	margin-block-start: var(--flow-space, 1.25rem);
}

/* Texte masqué visuellement mais lu par les lecteurs d'écran (classe standard WordPress). */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* Fragment en écriture gauche-droite dans un texte arabe (numéros, e-mails). */
.ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Section sur fond bleu nuit. */
.is-dark {
	background: var(--c-navy);
	color: var(--c-line);
}

.is-dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--c-bg);
}

.is-dark a:not(.wp-element-button) {
	color: var(--c-bg-alt);
}


/* 6. Boutons
   ========================================================================== */

/* Les couleurs, la typographie et les marges des boutons viennent de theme.json
   (.wp-element-button). On ajoute ici la mise en page, les transitions et les variantes. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.wp-element-button .icon,
.wp-block-button__link .icon {
	transition: transform var(--transition);
}

.wp-element-button:hover .icon--directional {
	transform: translateX(0.2em);
}

[dir="rtl"] .wp-element-button:hover .icon--directional {
	transform: scaleX(-1) translateX(0.2em);
}

/* Variante contour (équivaut au style « Contour » du bloc Bouton). */
.btn--outline,
.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--c-navy);
	color: var(--c-navy);
}

.btn--outline:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-bg);
}

/* Variante pour fond sombre. */
.btn--light {
	background: transparent;
	border-color: var(--c-bg);
	color: var(--c-bg);
}

.btn--light:hover {
	background: var(--c-bg);
	border-color: var(--c-bg);
	color: var(--c-navy);
}

.btn--small {
	padding: 0.7rem 1.25rem;
}

/* Lien d'action avec flèche. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 500;
	text-decoration: none;
}

.link-arrow:hover {
	text-decoration: underline;
}


/* 7. Formulaires
   ========================================================================== */

/* Bordure gris moyen (4,93:1) et non gris clair : WCAG 1.4.11 exige 3:1 pour les champs. */
input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="number"], [type="date"], [type="password"]),
select,
textarea {
	inline-size: 100%;
	padding: 0.75rem 0.9rem;
	font: inherit;
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-muted);
	border-radius: 2px;
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="number"], [type="date"], [type="password"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 1px;
	border-color: var(--c-navy);
}

textarea {
	min-block-size: 9rem;
	resize: vertical;
}

label {
	display: inline-block;
	margin-block-end: 0.35rem;
	font-weight: 500;
	color: var(--c-navy);
}

input[type="checkbox"],
input[type="radio"] {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0;
	accent-color: var(--c-bordeaux);
	vertical-align: -0.15em;
}


/* 8. Barre supérieure
   ========================================================================== */

/* Visible à toutes les tailles : c'est l'accès le plus direct aux trois langues
   (un visiteur francophone arrivant sur l'accueil arabe doit trouver « Français » d'un coup d'œil). */
.topbar {
	background: var(--c-navy);
	color: var(--c-line);
	font-size: 0.8125rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-block-size: var(--topbar-height);
}

/* La liste des langues reste du côté « fin » même sans coordonnées. */
.topbar .lang-switcher {
	margin-inline-start: auto;
}

/* Coordonnées : à partir de la tablette (sur mobile, la barre de contact arrive en phase 7). */
.topbar .contact-details {
	display: none;
	flex-direction: row;
	gap: 1.5rem;
}

@media (min-width: 48em) {
	.topbar .contact-details {
		display: flex;
	}
}

.topbar a {
	color: var(--c-bg-alt);
	text-decoration: none;
}

.topbar a:hover {
	color: var(--c-bg);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
}


/* 9. En-tête et logo
   ========================================================================== */

.site-header {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--c-bg);
	border-block-end: 1px solid var(--c-line);
	transition: box-shadow var(--transition);
}

.site-header.is-stuck {
	box-shadow: var(--shadow);
}

/* Barre d'administration mobile : elle défile avec la page. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		inset-block-start: 0;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-block-size: var(--header-height);
	transition: min-block-size var(--transition);
}

.site-header.is-stuck .site-header__inner {
	min-block-size: 4.25rem;
}

/* Bureau : en-tête en carte flottante. La bande autour de la carte prend la couleur du haut
   de la page (sable sur l'accueil, blanc cassé ailleurs) ; une fois l'en-tête collé en haut
   de l'écran, elle devient transparente et la carte flotte au-dessus du contenu. */
@media (min-width: 68.75em) {
	.site-header {
		padding-block: 0.75rem;
		background: var(--header-band, var(--c-bg-alt));
		border-block-end: 0;
		transition: background-color var(--transition), padding var(--transition);
	}

	.home .site-header {
		--header-band: var(--c-sand);
	}

	.site-header.is-stuck {
		padding-block: 0.5rem;
		background: transparent;
		box-shadow: none;
	}

	.site-header__inner {
		padding-inline: 1.75rem;
		background: var(--c-bg);
		border-radius: var(--radius);
		box-shadow: var(--shadow-float);
	}
}

/* Logo — piste 1b « Le Fil » (template-parts/header/logo.php).
   Monogramme en tracés SVG ; noms latin et arabe en texte, servis par les micro-polices
   « Bouaicha Logo » (lettres du logo uniquement, déclarées ci-dessous). */
@font-face {
	font-family: "Bouaicha Logo Latin";
	src: url("../fonts/logo/bouaicha-logo-latin.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bouaicha Logo AR";
	src: url("../fonts/logo/bouaicha-logo-ar.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	max-inline-size: 100%;
	color: var(--c-navy);
	text-decoration: none;
}

.site-logo:hover {
	color: var(--c-navy);
}

.logo-mark {
	flex-shrink: 0;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	fill: none;
	stroke-width: 3;
}

.logo-mark__b {
	stroke: currentColor;
}

.logo-mark__fil {
	stroke: var(--c-gold);
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	min-inline-size: 0;
}

.site-logo__primary,
.site-logo__secondary {
	line-height: 1;
	/* Un nom de marque ne se coupe jamais (body autorise la césure des mots trop longs). */
	white-space: nowrap;
}

.site-logo__latin {
	font-family: "Bouaicha Logo Latin", var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 500;
	letter-spacing: 0.2em;
	/* Compense l'espace ajouté après la dernière lettre par letter-spacing. */
	margin-inline-end: -0.2em;
}

.site-logo__arabic {
	font-family: "Bouaicha Logo AR", var(--wp--preset--font-family--amiri);
	font-weight: 700;
	line-height: 1.15;
}

/* En-tête : l'écriture de la page en grand, l'autre en petit. */
.site-logo--header .site-logo__primary .site-logo__latin {
	font-size: 1.25rem;
}

.site-logo--header .site-logo__primary .site-logo__arabic {
	font-size: 1.5rem;
}

.site-logo--header .site-logo__secondary .site-logo__arabic {
	font-size: 0.9375rem;
}

.site-logo--header .site-logo__secondary .site-logo__latin {
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	margin-inline-end: -0.22em;
	color: var(--c-text);
}

@media (min-width: 30em) {
	.logo-mark {
		inline-size: 2.75rem;
		block-size: 2.75rem;
	}

	.site-logo--header .site-logo__primary .site-logo__latin {
		font-size: 1.4375rem;
	}

	.site-logo--header .site-logo__primary .site-logo__arabic {
		font-size: 1.625rem;
	}
}

/* Pied de page : version complète (nom, filet doré, mention et nom dans l'autre écriture). */
.site-logo--footer,
.site-logo--footer:hover {
	gap: 1.25rem;
	color: var(--c-bg-alt);
}

.site-logo--footer .logo-mark {
	inline-size: 3.5rem;
	block-size: 3.5rem;
}

.site-logo--footer .site-logo__text {
	align-items: stretch;
	gap: 0.6rem;
}

.site-logo--footer .site-logo__primary .site-logo__latin {
	font-size: 1.75rem;
}

.site-logo--footer .site-logo__primary .site-logo__arabic {
	font-size: 2.25rem;
}

.site-logo__rule {
	display: block;
	block-size: 1px;
	background: var(--c-gold);
}

.site-logo__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.site-logo__tagline {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 0.9375rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-line);
}

:lang(ar) .site-logo__tagline {
	font-family: var(--wp--preset--font-family--ibm-plex-sans-arabic);
	font-size: 0.875rem;
	font-style: normal; /* Pas d'italique en arabe. */
	font-weight: 400;
}

.site-logo--footer .site-logo__secondary .site-logo__arabic {
	font-size: 1.25rem;
}

.site-logo--footer .site-logo__secondary .site-logo__latin {
	font-size: 0.875rem;
}

/* Logo image choisi dans l'outil de personnalisation. */
.site-logo__image {
	display: block;
	max-block-size: 3.5rem;
	inline-size: auto;
}

/* Bouton « Prendre rendez-vous » du header : bureau uniquement. */
.site-header__cta {
	display: none;
}


/* 10. Navigation
   ========================================================================== */

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu a {
	text-decoration: none;
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}

.submenu-toggle .icon {
	transition: transform var(--transition);
}

.submenu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* Bouton « Menu » (mobile). */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--c-navy);
	background: none;
	border: 1px solid var(--c-line);
	border-radius: 2px;
	cursor: pointer;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: inline-block;
}

/* --- Mobile et tablette (< 1100px) : panneau plein écran sous l'en-tête --- */
@media (max-width: 68.74em) {
	.site-logo {
		margin-inline-end: auto;
	}

	.site-nav__panel {
		position: fixed;
		inset-block: var(--header-bottom, 5rem) 0;
		inset-inline: 0;
		z-index: 40;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 1rem var(--gutter) 2.5rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--c-bg);
		border-block-start: 1px solid var(--c-line);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		transition: opacity var(--transition), transform var(--transition), visibility 0s linear 200ms;
	}

	.has-nav-open .site-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity var(--transition), transform var(--transition), visibility 0s;
	}

	.has-nav-open {
		overflow: hidden;
	}

	.menu--primary > .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-block-end: 1px solid var(--c-line);
	}

	.menu--primary > .menu-item > a {
		flex: 1;
		padding-block: 1rem;
		font-family: var(--font-heading);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		color: var(--c-navy);
	}

	.menu--primary .current-menu-item > a,
	.menu--primary .current-menu-ancestor > a {
		color: var(--c-bordeaux);
	}

	.menu--primary > .menu-item > .submenu-toggle {
		inline-size: 2.75rem;
		block-size: 2.75rem;
		color: var(--c-navy);
	}

	.menu--primary .sub-menu {
		display: none;
		flex-basis: 100%;
		margin: 0;
		padding: 0 0 1rem;
		list-style: none;
	}

	.menu--primary .is-open > .sub-menu {
		display: block;
	}

	.menu--primary .sub-menu a {
		display: block;
		padding-block: 0.6rem;
		padding-inline-start: 1rem;
		color: var(--c-text);
		border-inline-start: 1px solid var(--c-gold);
	}

	.site-nav__extras {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.site-nav__cta {
		inline-size: 100%;
	}

	/* Sans JavaScript : menu affiché en clair, sous-menus dépliés. */
	.no-js .nav-toggle {
		display: none;
	}

	.no-js .site-header__inner {
		flex-wrap: wrap;
	}

	.no-js .site-nav {
		flex-basis: 100%;
	}

	.no-js .site-nav__panel {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		padding-inline: 0;
	}

	.no-js .menu--primary .sub-menu {
		display: block;
	}
}

/* --- Bureau (≥ 1100px) : menu horizontal, sous-menus en liste déroulante --- */
@media (min-width: 68.75em) {
	.nav-toggle,
	.site-nav__extras {
		display: none;
	}

	.site-nav {
		margin-inline-start: auto;
	}

	.menu--primary {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.menu--primary > .menu-item {
		position: relative;
		display: flex;
		align-items: center;
	}

	.menu--primary > .menu-item > a {
		position: relative;
		display: block;
		padding: 0.75rem 0.85rem;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--c-navy);
	}

	/* Filet doré qui se dessine au survol et sous la page courante. */
	.menu--primary > .menu-item > a::after {
		content: "";
		position: absolute;
		inset-inline: 0.85rem;
		inset-block-end: 0.4rem;
		block-size: 1px;
		background: var(--c-gold);
		transform: scaleX(0);
		transform-origin: var(--origin-start, left);
		transition: transform var(--transition);
	}

	[dir="rtl"] .menu--primary > .menu-item > a::after {
		--origin-start: right;
	}

	.menu--primary > .menu-item > a:hover::after,
	.menu--primary > .current-menu-item > a::after,
	.menu--primary > .current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	.menu--primary > .current-menu-item > a,
	.menu--primary > .current-menu-ancestor > a {
		color: var(--c-bordeaux);
	}

	.menu--primary > .menu-item-has-children > a {
		padding-inline-end: 0.25rem;
	}

	.menu--primary > .menu-item-has-children > a::after {
		inset-inline-end: 0.25rem;
	}

	.menu--primary > .menu-item > .submenu-toggle {
		inline-size: 1.75rem;
		block-size: 1.75rem;
		color: var(--c-navy);
	}

	.menu--primary > .menu-item > .submenu-toggle .icon {
		inline-size: 1rem;
		block-size: 1rem;
	}

	.menu--primary .sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: 60;
		inline-size: max-content;
		min-inline-size: 16rem;
		max-inline-size: 24rem;
		margin: 0;
		padding: 0.5rem 0;
		list-style: none;
		background: var(--c-bg);
		border-block-start: 2px solid var(--c-gold);
		box-shadow: var(--shadow);
		visibility: hidden;
		opacity: 0;
		transform: translateY(0.25rem);
		transition: opacity var(--transition), transform var(--transition), visibility 0s linear 200ms;
	}

	.menu--primary .is-open > .sub-menu,
	.no-js .menu--primary .menu-item-has-children:hover > .sub-menu,
	.no-js .menu--primary .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity var(--transition), transform var(--transition), visibility 0s;
	}

	.menu--primary .sub-menu a {
		display: block;
		padding: 0.6rem 1.25rem;
		font-size: 0.9375rem;
		color: var(--c-text);
	}

	.menu--primary .sub-menu a:hover,
	.menu--primary .sub-menu .current-menu-item > a {
		color: var(--c-bordeaux);
		background: var(--c-bg-alt);
	}

	.site-header__cta {
		display: inline-flex;
		margin-inline-start: 1rem;
	}
}


/* 11. Sélecteur de langue
   ========================================================================== */

.lang-switcher__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Noms séparés par un filet vertical ; zone cliquable d'au moins 36px de haut. */
.lang-switcher__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.25rem;
	padding-inline: 0.75rem;
	text-decoration: none;
}

.lang-switcher__item + .lang-switcher__item {
	border-inline-start: 1px solid rgba(227, 225, 220, 0.35);
}

.lang-switcher__item:first-child .lang-switcher__link {
	padding-inline-start: 0;
}

.lang-switcher__item:last-child .lang-switcher__link {
	padding-inline-end: 0;
}

.lang-switcher .is-current .lang-switcher__link {
	color: var(--c-gold);
	font-weight: 600;
}

/* Dans le menu mobile (fond blanc) : le doré n'est pas lisible, la langue active passe en bordeaux. */
.site-nav__extras .lang-switcher__item + .lang-switcher__item {
	border-inline-start-color: var(--c-line);
}

.site-nav__extras .lang-switcher__link {
	min-block-size: 2.75rem;
	color: var(--c-navy);
}

.site-nav__extras .is-current .lang-switcher__link {
	color: var(--c-bordeaux);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
}


/* 12. En-tête de page, contenu et sections
   ========================================================================== */

/* En-tête de page (template-parts/components/page-header.php) */
.page-header {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	background: var(--c-bg-alt);
	border-block-end: 1px solid var(--c-line);
}

.page-header__inner > * {
	margin-block: 0;
}

.page-header__inner > * + * {
	margin-block-start: 1rem;
}

.page-header__eyebrow,
.page-header__inner > .breadcrumbs + .page-header__title {
	margin-block-start: var(--wp--preset--spacing--50);
}

.page-header__title {
	max-inline-size: 22ch;
	font-size: var(--wp--preset--font-size--huge);
}

.page-header__lead {
	max-inline-size: 44rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.page-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-block-start: 1.5rem;
}

.page-header__date,
.page-header__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-muted);
}

/* Fil d'Ariane */
.breadcrumbs {
	font-size: 0.8125rem;
	color: var(--c-muted);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	color: var(--c-gold);
}

.breadcrumbs a {
	color: var(--c-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--c-navy);
	text-decoration: underline;
}

.breadcrumbs [aria-current] {
	color: var(--c-text);
}

/* Étiquettes (secteurs d'une expertise) */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag {
	padding: 0.3rem 0.85rem;
	font-size: 0.8125rem;
	color: var(--c-navy);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: 999px;
}

/* Contenu Gutenberg */
.entry-content {
	padding-block: var(--wp--preset--spacing--60);
}

.entry-content--full {
	padding-block: 0;
}

.entry-content > :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Les sections pleine largeur se touchent et touchent l'en-tête et le pied de page. */
.entry-content > .alignfull:first-child {
	margin-block-start: calc(-1 * var(--wp--preset--spacing--60));
}

.entry-content > .alignfull:last-child {
	margin-block-end: calc(-1 * var(--wp--preset--spacing--60));
}

.entry-content--full > .alignfull:first-child,
.entry-content--full > .alignfull:last-child {
	margin-block: 0;
}

.entry-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Introduction de section : surtitre, titre, chapeau, alignés sur la grille large. */
.section-intro {
	margin-block-end: var(--wp--preset--spacing--50);
}

.section-intro > * {
	max-inline-size: 46rem;
	margin-block: 0;
}

.section-intro > * + * {
	margin-block-start: 1rem;
}

/* Double filet doré sous le titre d'une section (deux traits en fondu, décalés). */
.section-intro h2::after {
	content: "";
	display: block;
	inline-size: min(12rem, 60%);
	block-size: 5px;
	margin-block-start: 1rem;
	background:
		linear-gradient(90deg, transparent, var(--c-gold)) left top / 70% 1px no-repeat,
		linear-gradient(90deg, transparent, var(--c-gold)) right bottom / 85% 2px no-repeat;
}

[dir="rtl"] .section-intro h2::after {
	background:
		linear-gradient(270deg, transparent, var(--c-gold)) right top / 70% 1px no-repeat,
		linear-gradient(270deg, transparent, var(--c-gold)) left bottom / 85% 2px no-repeat;
}

.wp-block-buttons.alignwide {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* En-tête de l'accueil (modèle « hero ») : lumière chaude en haut, qui se fond dans le blanc cassé. */
.hero {
	background-image: linear-gradient(180deg, var(--c-sand) 0%, var(--c-bg-alt) 75%);
}

.hero h1 {
	max-inline-size: 16ch;
}

.hero .is-style-lead {
	max-inline-size: 36rem;
}

.hero .wp-block-buttons {
	margin-block-start: 2rem;
}

/* Colonnes empilées (WordPress les empile sous 782 px, tablette comprise) : le portrait reste
   présent sans repousser trop loin la suite de la page. */
@media (max-width: 48.8125em) {
	.hero .wp-block-image.is-style-portrait {
		max-inline-size: 20rem;
	}
}


/* 12 bis. Styles de blocs (panneau « Styles » de l'éditeur)
   ========================================================================== */

/* Chapeau */
.is-style-lead {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

/* Titre précédé d'un filet doré */
:is(h1, h2, h3, h4, h5, h6).is-style-rule::before {
	content: "";
	display: block;
	inline-size: 2.5rem;
	block-size: 1px;
	margin-block-end: 1rem;
	background: var(--c-gold);
}

/* Carte */
.wp-block-group.is-style-card {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-block-start: 2px solid var(--c-gold);
	border-radius: var(--radius);
}

.wp-block-group.is-style-card > * {
	margin-block: 0;
}

.wp-block-group.is-style-card > * + * {
	margin-block-start: 0.75rem;
}

/* Titres de cartes étroites : un mot long (« Personnalisation ») se coupe avec un trait d'union. */
.wp-block-group.is-style-card :is(h2, h3, h4) {
	hyphens: auto;
}

.is-dark .wp-block-group.is-style-card {
	background: rgba(247, 245, 241, 0.04);
	border-color: rgba(227, 225, 220, 0.2);
	border-block-start-color: var(--c-gold);
}

/* Étapes numérotées : 01, 02, 03… en bordeaux (contraste suffisant, contrairement au doré). */
.is-style-steps {
	counter-reset: step;
}

.is-style-steps > * {
	counter-increment: step;
}

.is-style-steps > *::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-block-end: 1rem;
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
	color: var(--c-bordeaux);
}

/* Image avec cadre doré décalé (portrait) : en forme d'arche, rappel des arcs de la médina.
   L'image et son cadre ont les mêmes proportions (4/5) : rayon vertical = 40 % (0,5 × 4/5). */
.wp-block-image.is-style-portrait {
	--arch: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
	position: relative;
	padding-block-end: 1rem;
	padding-inline-end: 1rem;
}

.wp-block-image.is-style-portrait::before {
	content: "";
	position: absolute;
	inset-block: 1rem 0;
	inset-inline: 1rem 0;
	border: 1px solid var(--c-gold);
	border-radius: var(--arch);
}

.wp-block-image.is-style-portrait img {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Recadrage vers le haut : le visage reste dans le cadre quelle que soit la photo. */
	object-position: 50% 20%;
	border-radius: var(--arch);
}

/* Section en diagonale (style « Diagonale » du bloc Groupe) : bords haut et bas inclinés.
   La section remonte sous la précédente (marge négative) : la partie coupée laisse voir la section
   d'avant. Le découpage crée un contexte d'empilement : le biseau du bas passe devant la section suivante. */
.wp-block-group.is-style-diagonal {
	--slant: clamp(1.5rem, 4vw, 4.5rem);
	clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
	/* Les marges intérieures du bloc sont écrites dans la page (style en ligne) : on y ajoute la pente. */
	padding-block: calc(var(--diagonal-pad, var(--wp--preset--spacing--70)) + var(--slant)) !important;
}

/* Bandeau de rendez-vous : marges d'origine plus serrées. */
.cta-band.is-style-diagonal {
	--diagonal-pad: var(--wp--preset--spacing--60);
}

[dir="rtl"] .wp-block-group.is-style-diagonal {
	clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
}

/* Chevauchement seulement entre deux sections pleine largeur (elles ont des marges intérieures) :
   après un simple paragraphe, la section ne remonte pas dessus. */
.entry-content > .alignfull + .alignfull.is-style-diagonal {
	margin-block-start: calc(-1 * var(--slant));
}

.entry-content > .alignfull.is-style-diagonal:has(+ .alignfull) {
	margin-block-end: calc(-1 * var(--slant));
}

/* Première ou dernière section de la page : seul le bord tourné vers le contenu est incliné
   (pas de triangle vide contre l'en-tête ou le pied de page). */
.entry-content > .alignfull.is-style-diagonal:first-child {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.entry-content > .alignfull.is-style-diagonal:last-child {
	clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}

[dir="rtl"] .entry-content > .alignfull.is-style-diagonal:first-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant)));
}

[dir="rtl"] .entry-content > .alignfull.is-style-diagonal:last-child {
	clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
}

/* Bouton clair, pour les fonds sombres */
.wp-block-button.is-style-light .wp-block-button__link {
	background: transparent;
	border-color: var(--c-bg);
	color: var(--c-bg);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background: var(--c-bg);
	border-color: var(--c-bg);
	color: var(--c-navy);
}

/* Liste à filets dorés */
.wp-block-list.is-style-lines {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--c-line);
}

.wp-block-list.is-style-lines > li {
	position: relative;
	padding-block: 0.9rem;
	padding-inline-start: 2rem;
	font-weight: 500;
	color: var(--c-navy);
	border-block-end: 1px solid var(--c-line);
}

.wp-block-list.is-style-lines > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1.75em;
	inline-size: 1rem;
	block-size: 1px;
	background: var(--c-gold);
}

/* Frise chronologique : chaque élément commence par l'année en gras (bordeaux, pas doré : contraste),
   reliée aux autres par un filet doré vertical. */
.wp-block-list.is-style-timeline {
	--timeline-year: var(--wp--preset--font-size--large);
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: 1px solid var(--c-gold);
}

.wp-block-list.is-style-timeline > li {
	position: relative;
	padding-inline-start: 1.5rem;
	padding-block-end: 1.25rem;
}

.wp-block-list.is-style-timeline > li:last-child {
	padding-block-end: 0;
}

.wp-block-list.is-style-timeline > li::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-0.3125rem - 0.5px);
	inset-block-start: calc(var(--timeline-year) * 0.6 - 0.3125rem);
	inline-size: 0.625rem;
	block-size: 0.625rem;
	background: var(--c-bg);
	border: 1px solid var(--c-gold);
	border-radius: 50%;
}

.wp-block-list.is-style-timeline > li > strong:first-child {
	display: block;
	margin-block-end: 0.25rem;
	font-family: var(--font-heading);
	font-size: var(--timeline-year);
	font-weight: 600;
	font-variant-numeric: lining-nums;
	line-height: 1.2;
	color: var(--c-bordeaux);
}

/* Grande citation */
.wp-block-quote.is-style-large {
	max-inline-size: 48rem;
	margin-inline: auto;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.3;
	text-align: center;
}

.wp-block-quote.is-style-large::before {
	content: "";
	display: block;
	inline-size: 3rem;
	block-size: 1px;
	margin: 0 auto 2rem;
	background: var(--c-gold);
}

.wp-block-quote.is-style-large cite {
	margin-block-start: 1.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-bordeaux);
}

/* Accordéon (bloc « Détails ») : questions des guides et de la FAQ */
.wp-block-details {
	border-block-start: 1px solid var(--c-line);
}

.wp-block-details:not(:has(+ .wp-block-details)) {
	border-block-end: 1px solid var(--c-line);
}

.entry-content > .wp-block-details + .wp-block-details,
.wp-block-group > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.wp-block-details summary {
	position: relative;
	display: block;
	padding-block: 1.25rem;
	padding-inline-end: 2.5rem;
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-navy);
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Signe plus / moins (bordeaux : indicateur d'état lisible). */
.wp-block-details summary::before,
.wp-block-details summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.25rem;
	inset-block-start: 50%;
	inline-size: 1rem;
	block-size: 1.5px;
	background: var(--c-bordeaux);
	transition: transform var(--transition);
}

.wp-block-details summary::after {
	transform: rotate(90deg);
}

.wp-block-details[open] summary::after {
	transform: rotate(0deg);
}

.wp-block-details summary:hover {
	color: var(--c-bordeaux);
}

.wp-block-details > :not(summary) {
	margin-block: 0 1rem;
}

.wp-block-details > :last-child:not(summary) {
	padding-block-end: 0.5rem;
}


/* 12 ter. Cartes, grilles et filtres (blocs du plugin, listes d'articles)
   ========================================================================== */

[hidden] {
	display: none !important;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.card > * {
	margin: 0;
}

.card:hover {
	border-color: var(--c-gold);
	box-shadow: var(--shadow);
}

/* Toute la carte est cliquable ; le contour de focus entoure la carte entière. */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Navigateurs sans :has() : le contour reste sur le lien (règle :focus-visible générale). */
@supports selector(:has(*)) {
	.card__link:focus-visible {
		outline: none;
	}

	.card:has(.card__link:focus-visible) {
		outline: 2px solid var(--focus-color);
		outline-offset: 2px;
	}
}

.card__media {
	margin: -1.75rem -1.75rem 0.5rem;
	overflow: hidden;
	border-radius: var(--radius) var(--radius) 0 0;
}

.card__media img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 600ms ease;
}

.card:hover .card__media img {
	transform: scale(1.03);
}

/* Retour d'expérience sans image : motif sable avec une arche dorée et le monogramme du logo. */
.card__media--placeholder {
	position: relative;
	aspect-ratio: 3 / 2;
	background:
		radial-gradient(120% 90% at 50% 100%, var(--c-bg-alt) 0%, transparent 70%),
		linear-gradient(180deg, var(--c-sand) 0%, var(--c-bg-alt) 100%);
}

.card__media--placeholder::before {
	content: "";
	position: absolute;
	inset-block: 18% 0;
	inset-inline: 32%;
	border: 1px solid var(--c-gold);
	border-block-end: 0;
	border-radius: 999px 999px 0 0;
}

.card__media--placeholder::after {
	content: "";
	position: absolute;
	inset-block: 38% 16%;
	inset-inline: 40%;
	background: var(--c-navy);
	opacity: 0.18;
	-webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
	mask: url("../img/logo-mark.svg") center / contain no-repeat;
}

/* Retours d'expérience : secteurs en étiquette. */
.card--dossier .card__eyebrow {
	align-self: flex-start;
	padding: 0.3rem 0.6rem;
	letter-spacing: 0.08em;
	color: var(--c-bordeaux);
	background: var(--c-bg-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}

/* Image d'un retour d'expérience, en tête du récit. */
.dossier-figure {
	margin-block: 0 var(--wp--preset--spacing--50);
}

.dossier-figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius);
}

/* Mention d'anonymat et de prudence (retours d'expérience). */
.case-note {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block: 0.75rem;
	padding-inline: 1rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--c-muted);
	background: var(--c-bg-alt);
	border-inline-start: 3px solid var(--c-gold);
}

.card__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-bordeaux);
}

:lang(ar) .card__eyebrow {
	font-size: 0.875rem;
}

.card__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.card__link {
	color: var(--c-navy);
	text-decoration: none;
}

.card__excerpt {
	font-size: 0.9375rem;
	color: var(--c-text);
}

.card__date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-muted);
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: auto;
	padding-block-start: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--c-bordeaux);
}

.card__more .icon {
	transition: transform var(--transition);
}

.card:hover .card__more .icon--directional {
	transform: translateX(0.25rem);
}

[dir="rtl"] .card:hover .card__more .icon--directional {
	transform: scaleX(-1) translateX(0.25rem);
}

/* Boutons de filtre (secteurs, thèmes) */
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 1.75rem;
}

/* Sans JavaScript, les boutons ne serviraient à rien : toutes les cartes restent affichées. */
.no-js .filter-chips {
	display: none;
}

.filter-chip {
	min-block-size: 2.5rem;
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--c-navy);
	background: var(--c-bg);
	border: 1px solid var(--c-muted);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.filter-chip:hover {
	border-color: var(--c-navy);
}

.filter-chip[aria-pressed="true"] {
	color: var(--c-bg);
	background: var(--c-navy);
	border-color: var(--c-navy);
}

/* Message des blocs vides (visible dans l'éditeur uniquement) */
.bouaicha-empty {
	padding: 1.5rem;
	color: var(--c-muted);
	background: var(--c-bg-alt);
	border: 1px dashed var(--c-muted);
}


/* 12 quater. Fiches, bandeau de rendez-vous, listes, recherche, 404
   ========================================================================== */

/* Bandeau « Prendre rendez-vous » (gabarits et modèle de blocs) */
.cta-band {
	padding-block: var(--wp--preset--spacing--60);
	color: var(--c-bg-alt);
	background: var(--c-bordeaux);
}

.cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
}

.cta-band :is(h2, .cta-band__title) {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--c-bg);
}

.cta-band p {
	margin: 0.5rem 0 0;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.cta-band__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	color: var(--c-bg);
	text-decoration: none;
}

.cta-band__phone:hover {
	text-decoration: underline;
}

/* Guides liés, autres expertises */
.related,
.other-links {
	padding-block: var(--wp--preset--spacing--60);
}

.related__title,
.other-links__title {
	margin-block-end: 1.5rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.other-links__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 0.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.other-links__list a {
	padding-block: 0.5rem;
	color: var(--c-navy);
}

/* Image à la une d'un article */
.single-article__media {
	margin-block: var(--wp--preset--spacing--50) 0;
}

.single-article__media img {
	display: block;
	inline-size: 100%;
	border-radius: var(--radius);
}

/* Article précédent / suivant */
.post-nav .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.5rem;
	padding-block: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--c-line);
}

.post-nav .nav-next {
	text-align: end;
}

.post-nav a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: var(--c-navy);
	text-decoration: none;
}

.post-nav__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.post-nav__title {
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

/* Listes (actualités, archives, recherche) et pagination */
.listing {
	padding-block: var(--wp--preset--spacing--60);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: 0.75rem;
	color: var(--c-navy);
	text-decoration: none;
	border: 1px solid var(--c-line);
	border-radius: 2px;
}

.page-numbers:hover:not(.current, .dots) {
	border-color: var(--c-navy);
}

.page-numbers.current {
	color: var(--c-bg);
	background: var(--c-navy);
	border-color: var(--c-navy);
}

.page-numbers.dots {
	border: 0;
}

/* Flèche « précédent » : vers la gauche en LTR, vers la droite en RTL. */
.icon--prev {
	transform: scaleX(-1);
}

[dir="rtl"] .icon--prev {
	transform: none;
}

.empty-state {
	max-inline-size: 40rem;
	padding: 2rem 2.5rem;
	background: var(--c-bg-alt);
	border-inline-start: 2px solid var(--c-gold);
}

.empty-state > * {
	margin: 0;
}

.empty-state > * + * {
	margin-block-start: 0.75rem;
}

.empty-state__title {
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--c-navy);
}

/* Formulaire de recherche */
.search-form {
	display: flex;
	gap: 0.5rem;
	inline-size: 100%;
	max-inline-size: 34rem;
}

.search-form__field {
	flex: 1;
	min-inline-size: 0;
}

.search-form__submit {
	flex-shrink: 0;
}

/* Page 404 */
.error-404 {
	padding-block: var(--wp--preset--spacing--70);
	background: var(--c-bg-alt);
}

.error-404__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.error-404__inner > * {
	margin: 0;
}

.error-404 .error-404__mark {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	color: var(--c-navy);
}

.error-404__title {
	font-size: var(--wp--preset--font-size--huge);
}

.error-404__text {
	max-inline-size: 36rem;
	font-size: var(--wp--preset--font-size--medium);
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}


/* 13. Pied de page
   ========================================================================== */

.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-line);
	font-size: var(--wp--preset--font-size--small);
}

/* Monogramme du logo en filigrane, très discret, dans l'angle du pied de page.
   Contraste vérifié à la main (les outils automatiques ne lisent pas le fond sous un pseudo-élément) :
   le filigrane éclaircit à peine le bleu nuit ; titres dorés ≈ 5:1, textes clairs > 10:1. */
.site-footer::before {
	content: "";
	position: absolute;
	inset-block-end: -5rem;
	inset-inline-end: -4rem;
	inline-size: 28rem;
	block-size: 28rem;
	background: var(--c-gold);
	opacity: 0.07;
	-webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
	mask: url("../img/logo-mark.svg") center / contain no-repeat;
	pointer-events: none;
}

.site-footer > * {
	position: relative;
}

.site-footer a {
	color: var(--c-bg-alt);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--c-bg);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
}

/* Colonnes souples : 1 par ligne sur mobile, 2 sur tablette, 4 sur bureau.
   Si une colonne est absente (ex. pas encore d'expertises), les autres se répartissent la place. */
.site-footer__main {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 3rem;
	padding-block: var(--wp--preset--spacing--60);
}

.site-footer__col {
	flex: 1 1 14rem;
}

.site-footer__col--brand {
	flex: 1.5 1 18rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.site-footer__slogan {
	margin: 0;
	max-inline-size: 22rem;
	font-family: var(--font-heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--c-bg-alt);
}

.site-footer__title {
	margin-block-end: 1.25rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-gold);
}

:lang(ar) .site-footer__title {
	font-size: 0.875rem;
}

.footer-menu {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__bottom {
	border-block-start: 1px solid rgba(227, 225, 220, 0.15);
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 1.25rem;
	font-size: 0.8125rem;
}

.site-footer__copyright {
	margin: 0;
}

.legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* 14. Coordonnées et placeholders
   ========================================================================== */

.contact-details {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-details__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.contact-details__item .icon {
	margin-block-start: 0.15em;
	color: var(--c-gold);
}

/* Marqueur de contenu manquant : bien visible, listé dans _brief/TODO-contenu.md. */
.placeholder {
	display: inline-block;
	padding: 0.1em 0.4em;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875em;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: #5c4300;
	background: #fff3cd;
	border: 1px dashed #b88a00;
	border-radius: 2px;
}


/* 15. Contact : formulaire de rendez-vous, boutons d'appel, carte, boutons flottants
   ========================================================================== */

/* --- Formulaire (Fluent Forms) ---
   Seule la feuille de base de Fluent Forms est chargée (mise en page, champs conditionnels) ;
   les styles visuels sont ceux du site. Les champs reprennent les règles de la section 7. */
.fluentform {
	--fluentform-primary: var(--c-bordeaux);
	--fluentform-secondary: var(--c-muted);
	/* Rouge des erreurs : 6,4:1 sur blanc ; le message reste écrit (la couleur n'est pas le seul signal). */
	--fluentform-danger: #b42318;
	--fluentform-border-color: var(--c-muted);
	--fluentform-border-radius: 2px;
}

.fluentform .ff-el-group {
	margin-block-end: 1.5rem;
}

.fluentform .ff-el-input--label {
	margin-block-end: 0.35rem;
}

.fluentform .ff-el-input--label label {
	margin: 0;
	font-weight: 500;
	color: var(--c-navy);
}

.fluentform .ff-el-is-required.asterisk-right label::after {
	margin: 0;
	margin-inline-start: 0.2em;
	color: var(--fluentform-danger);
}

.fluentform .ff-el-form-control {
	display: block;
}

.fluentform .ff-el-help-message {
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-style: normal;
	color: var(--c-muted);
}

/* Téléphone et e-mail s'écrivent de gauche à droite, même en arabe. */
[dir="rtl"] .fluentform :is(input[type="tel"], input[type="email"]) {
	direction: ltr;
	text-align: right;
}

.fluentform .form-note {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--c-muted);
}

/* Choix (boutons radio, consentement). */
.fluentform .ff-el-form-check {
	margin-block-end: 0.5rem;
}

.fluentform .ff_list_inline .ff-el-form-check {
	display: inline-block;
	margin: 0 0 0.5rem;
	margin-inline-end: 1.75rem;
}

.fluentform .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-weight: 400;
	color: var(--c-text);
	cursor: pointer;
}

.fluentform .ff-el-form-check-label .ff-el-form-check-input {
	flex-shrink: 0;
	top: 0;
}

/* Case de consentement : texte sur plusieurs lignes, case alignée sur la première. */
.fluentform .ff-el-tc label.ff_tc_label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.fluentform .ff-el-tc label.ff_tc_label > span,
.fluentform .ff-el-tc label.ff_tc_label > div {
	display: block;
}

/* Case centrée sur la première ligne du texte (1lh = une hauteur de ligne). */
.fluentform .ff-el-tc label.ff_tc_label > span {
	display: flex;
	align-items: center;
	inline-size: auto;
	block-size: 1lh;
	padding-top: 0 !important; /* Fluent Forms impose 8px en !important. */
}

.fluentform .ff_t_c a {
	color: var(--c-bordeaux);
}

/* Erreurs (sélecteurs renforcés : Fluent Forms impose 12 px). */
.fluentform .text-danger,
.fluentform .error,
.fluentform .ff-el-is-error .text-danger,
.fluentform .ff-el-is-error .error {
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--fluentform-danger);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--fluentform-danger);
	box-shadow: inset 0 0 0 1px var(--fluentform-danger);
}

/* Bouton d'envoi : bouton principal du site. */
.fluentform .ff_submit_btn_wrapper {
	margin-block: 0.5rem 0;
	text-align: start;
}

.fluentform .ff-btn-submit[disabled],
.fluentform .ff-btn-submit.disabled {
	cursor: progress;
	opacity: 0.7;
}

/* Message de confirmation. */
.ff-message-success {
	margin-block-start: 0;
	padding: 1.5rem;
	color: var(--c-text);
	background: var(--c-bg-alt);
	border: 0;
	border-inline-start: 3px solid var(--c-gold);
	border-radius: var(--radius);
	box-shadow: none;
}

.ff-message-success p {
	margin: 0;
}

/* Aperçu du bloc dans l'éditeur. */
.bouaicha-form-preview {
	padding: 1.5rem;
	background: var(--c-bg-alt);
	border: 1px dashed var(--c-muted);
	border-radius: var(--radius);
}

.bouaicha-form-preview p {
	margin: 0 0 0.5rem;
}

/* --- Boutons « Appeler » / « WhatsApp » --- */
.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 1.75rem;
}

.contact-actions__button .icon {
	inline-size: 1.25em;
	block-size: 1.25em;
}

/* --- Carte chargée au clic --- */
.map-consent {
	margin-block-start: 2rem;
}

.map-consent__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	min-block-size: 16rem;
	padding: 2rem 1.5rem;
	text-align: center;
	/* Quadrillage léger évoquant un plan, sans image ni requête. */
	background-color: var(--c-bg-alt);
	background-image:
		linear-gradient(var(--c-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}

.map-consent__icon {
	inline-size: 2rem;
	block-size: 2rem;
	color: var(--c-bordeaux);
}

.map-consent__text {
	max-inline-size: 34ch;
	margin: 0;
	padding: 0.25rem 0.5rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--c-text);
	background: var(--c-bg-alt);
}

.map-consent__button {
	background: var(--c-bg);
}

.map-consent__link {
	padding: 0.25rem 0.5rem;
	background: var(--c-bg-alt);
}

.map-consent__frame {
	display: block;
	inline-size: 100%;
	block-size: 22rem;
	border: 0;
	border-radius: var(--radius);
}

.map-consent.is-loaded .map-consent__link {
	display: inline-block;
	margin-block-start: 0.75rem;
	padding: 0;
	background: none;
}

/* --- Onglet « Prendre rendez-vous » sur le bord de l'écran (bureau) --- */
.rdv-tab {
	display: none;
}

@media (min-width: 68.75em) {
	/* Positions physiques : en écriture verticale, les propriétés logiques (inset-inline…)
	   suivraient l'axe vertical du texte. Bord droit en LTR, bord gauche en RTL. */
	.rdv-tab {
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 30;
		display: block;
		padding: 1.25rem 0.7rem;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		font-weight: 600;
		line-height: 1;
		color: var(--c-bg);
		text-decoration: none;
		background: var(--c-bordeaux);
		border-radius: var(--radius);
		box-shadow: var(--shadow-float);
		/* Texte vertical, lu de bas en haut. */
		writing-mode: vertical-rl;
		transform: translateY(-50%) rotate(180deg);
		transition: background-color var(--transition);
		--focus-color: var(--c-gold);
	}

	[dir="rtl"] .rdv-tab {
		right: auto;
		left: 0;
	}

	.rdv-tab:hover {
		color: var(--c-bg);
		background: var(--c-navy);
	}
}

/* --- Boutons flottants (mobile) --- */
.contact-fab {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
	z-index: 30;
	display: flex;
	gap: 0.6rem;
}

.contact-fab__link {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	color: var(--c-bg);
	background: var(--c-navy);
	border: 1px solid var(--c-gold);
	border-radius: 50%;
	box-shadow: 0 0.35rem 1rem rgba(20, 33, 61, 0.25);
	transition: background-color var(--transition);
	--focus-color: var(--c-bordeaux);
}

.contact-fab__link:hover {
	color: var(--c-bg);
	background: var(--c-bordeaux);
}

.contact-fab__link .icon {
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

/* Menu mobile ouvert : les boutons s'effacent. */
.has-nav-open .contact-fab {
	display: none;
}

/* Le bas du pied de page reste lisible au-dessus des boutons. */
.has-contact-fab .site-footer__bottom {
	padding-block-end: 4.5rem;
}

@media (min-width: 48em) {
	.contact-fab {
		display: none;
	}

	.has-contact-fab .site-footer__bottom {
		padding-block-end: 0;
	}
}


/* 16. Animations
   ==========================================================================
   Apparition au défilement (assets/js/reveal.js) : seulement si le visiteur n'a pas demandé
   à réduire les animations ; le script ne marque que ce qui est sous la ligne de flottaison. */
@media (prefers-reduced-motion: no-preference) {
	/* Masqué sans transition (hors écran), puis apparition animée. */
	.reveal {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	.reveal.is-revealed {
		opacity: 1;
		transform: none;
		transition:
			opacity 700ms ease var(--reveal-delay, 0ms),
			transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
	}
}


/* 17. Accessibilité et préférences utilisateur
   ========================================================================== */

/* Lien d'évitement : invisible jusqu'à ce qu'il reçoive le focus clavier. */
.skip-link {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	color: var(--c-bg);
	background: var(--c-navy);
	border-radius: 2px;
	transform: translateY(-200%);
	transition: transform var(--transition);
}

.skip-link:focus {
	transform: none;
	--focus-color: var(--c-gold);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.topbar,
	.site-header,
	.site-footer,
	.contact-fab,
	.rdv-tab,
	.skip-link {
		display: none;
	}
}