/* AABDAAN — habillage du thème Astra. */

/* ==========================================================================
   1. Socle et typographie
   ========================================================================== */

/* Astra imprime ses propres couleurs dans une feuille en ligne, chargée après
   celle-ci. On monte donc d'un cran en spécificité plutôt que de compter sur
   l'ordre de chargement, qui dépend de réglages hors de notre contrôle. */
html body {
	background-color: var(--aabdaan-sand);
	color: var(--aabdaan-stone);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-base);
	line-height: var(--aabdaan-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Les conteneurs d'Astra tirent leur fond de ses variables globales, que
   tokens.css redéfinit aux couleurs AABDAAN. Rien à neutraliser ici. */

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--aabdaan-font-display);
	color: var(--aabdaan-ink);
	font-weight: 500;
	line-height: var(--aabdaan-leading-snug);
	font-feature-settings: "liga" 1, "kern" 1;
	text-wrap: balance;
}

/* Cormorant compose ses chiffres en elzéviriens par défaut : le 1 ressemble
   alors à un I et le 0 à un O. Sur un chiffre isolé — « 3 voix », un compteur,
   un prix — le lecteur croit lire des chiffres romains. On force donc les
   chiffres à hauteur de capitale partout où la police display sert. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.aabdaan-lede,
.price,
.woocommerce-Price-amount,
.aabdaan-hero__third-share,
.aabdaan-community__figure,
.aabdaan-third__share,
.aabdaan-invite-card__code,
.aabdaan-winners__votes,
.aabdaan-journey__step-brand {
	font-variant-numeric: lining-nums;
}

h1, .entry-title {
	font-size: var(--aabdaan-size-2xl);
	line-height: var(--aabdaan-leading-tight);
	letter-spacing: -0.01em;
}

h2 { font-size: var(--aabdaan-size-xl); }
h3 { font-size: var(--aabdaan-size-lg); }

h4 {
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-base);
	font-weight: 600;
	letter-spacing: 0.02em;
}

p, li {
	text-wrap: pretty;
}

strong { color: var(--aabdaan-ink); font-weight: 600; }

/* Les chiffres d'un prix ou d'un compteur doivent s'aligner en colonne. */
.price, .aabdaan-tabular, table td, table th {
	font-variant-numeric: tabular-nums;
}

a {
	color: var(--aabdaan-ink);
	text-decoration-thickness: 1px;
	text-decoration-color: var(--aabdaan-gold);
	text-underline-offset: 0.22em;
	transition: color var(--aabdaan-duration) var(--aabdaan-ease);
}

a:hover,
a:focus {
	color: var(--aabdaan-gold);
}

/* La navigation au clavier doit rester parfaitement visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--aabdaan-gold);
	outline-offset: 3px;
}

::selection {
	background-color: var(--aabdaan-gold-pale);
	color: var(--aabdaan-ink-deep);
}

/* ==========================================================================
   2. En-tête
   ========================================================================== */

/* L'en-tête est bleu nuit : le logo d'en-tête est la déclinaison or.
   Si l'en-tête devenait clair, il faudrait revenir au lettrage encre. */
html body .site-header,
html body .ast-primary-header-bar,
html body .ast-above-header-bar,
html body .main-header-bar,
html body .ast-header-break-point .site-header,
html body .ast-mobile-header-wrap .ast-primary-header-bar {
	background-color: var(--aabdaan-ink);
	border-bottom: var(--aabdaan-hairline-dark);
}

/* L'en-tête suit le défilement : sur une page longue, le panier et le parcours
   doivent rester à portée sans remonter. Astra ne propose l'en-tête collant
   que dans sa version payante ; deux lignes de CSS suffisent. */
html body .site-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* La barre d'administration occupe déjà le haut de la fenêtre. */
html body.admin-bar .site-header {
	top: 32px;
}

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

/* Astra colore ses liens de menu par une règle très spécifique. Sans lui
   répondre sur le même terrain, les entrées restent bleu foncé sur bleu nuit :
   le menu devient illisible, ce qui est un défaut d'accessibilité et pas
   seulement d'esthétique. */
html body .site-header a,
html body .main-header-menu a,
html body .ast-builder-menu a,
html body .ast-builder-menu-1 .menu-item > .menu-link,
html body .ast-builder-menu-1 .main-header-menu .menu-item > .menu-link,
html body .ast-header-break-point .main-navigation a,
html body .ast-mobile-popup-drawer .menu-item > .menu-link {
	color: var(--aabdaan-sand);
}

html body .site-header a:hover,
html body .main-header-menu a:hover,
html body .ast-builder-menu-1 .menu-item > .menu-link:hover,
html body .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
	color: var(--aabdaan-gold);
}

/* Entrées de menu : capitales espacées, et un filet d'or qui se déploie au
   survol plutôt qu'un soulignement brutal. */
html body .main-header-menu .menu-item > .menu-link,
html body .ast-builder-menu-1 .menu-item > .menu-link {
	position: relative;
	font-size: var(--aabdaan-size-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

html body .main-header-menu .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.35em;
	height: 1px;
	background-color: var(--aabdaan-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--aabdaan-duration) var(--aabdaan-ease);
}

html body .main-header-menu .menu-item > .menu-link:hover::after,
html body .main-header-menu .current-menu-item > .menu-link::after {
	transform: scaleX(1);
}

/* Le nom de la marque est déjà dans le logo : l'écrire à côté fait doublon.
   Il reste dans le flux pour les lecteurs d'écran. */
html body .site-header .site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Icônes de l'en-tête : panier, compte, menu mobile.
 *
 * Le bouton d'ouverture du menu mobile était bleu nuit sur un en-tête bleu
 * nuit : présent, cliquable, et parfaitement invisible. Sur téléphone, c'est le
 * seul accès à la navigation. Astra colore ce bouton par une règle plus
 * spécifique que la nôtre, d'où la qualification des sélecteurs — même terrain
 * que pour les liens de menu, corrigés pour la même raison. */
html body .site-header .ast-icon svg {
	color: var(--aabdaan-sand);
	fill: var(--aabdaan-sand);
}

/* Astra ancre la couleur du bouton sur l'attribut de section de son
   constructeur d'en-tête, ce qui place sa règle au-dessus d'un simple
   « html body .classe ». On reprend donc son propre sélecteur : c'est la seule
   façon de l'emporter sans recourir à !important. */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-outline,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu {
	color: var(--aabdaan-sand);
	background: transparent;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-svg {
	fill: var(--aabdaan-sand);
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:hover {
	color: var(--aabdaan-gold);
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:hover .ast-mobile-svg {
	fill: var(--aabdaan-gold);
}

/* Le tiroir mobile s'ouvre sur fond sable, sous un en-tête bleu nuit. Les
   entrées y sont donc en encre, et non en sable comme dans l'en-tête : la même
   couleur aux deux endroits rendrait l'une des deux illisible. */
html body .ast-mobile-header-wrap .ast-mobile-header-content,
html body .ast-mobile-popup-drawer .ast-mobile-popup-content {
	background-color: var(--aabdaan-sand-light);
}

html body .ast-mobile-header-wrap .ast-mobile-header-content .menu-item > .menu-link,
html body .ast-mobile-popup-drawer .ast-mobile-popup-content .menu-item > .menu-link {
	border-bottom: 1px solid rgba(198, 151, 69, 0.22);
	color: var(--aabdaan-ink);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

html body .ast-mobile-header-wrap .ast-mobile-header-content .current-menu-item > .menu-link,
html body .ast-mobile-header-wrap .ast-mobile-header-content .menu-item > .menu-link:hover {
	color: var(--aabdaan-gold);
}

/* La page d'accueil ouvre sur sa propre bannière : le titre de la page
   ferait doublon avec la signature du hero. */
html body.home .ast-single-entry-banner,
html body.home .entry-header .entry-title,
html body.home .ast-container > .site-content > .ast-container > .entry-header {
	display: none;
}

/* Le hero occupe toute la largeur : le conteneur d'Astra ne doit pas le
   brider ni lui imposer sa marge intérieure. */
html body.home .site-content .ast-container,
html body.home .entry-content > .aabdaan-section:first-child {
	max-width: none;
}

/* ==========================================================================
   3. Logo
   ========================================================================== */

.aabdaan-logo {
	display: block;
	height: auto;
	max-width: 100%;
}

.aabdaan-logo-link,
.custom-logo-link {
	display: inline-block;
	line-height: 0;
	transition: opacity var(--aabdaan-duration) var(--aabdaan-ease);
}

.aabdaan-logo-link:hover,
.custom-logo-link:hover {
	opacity: 0.82;
}

/* Le lettrage est empilé — le nom latin, un filet, puis عَبْدً — donc presque carré.
   Dans l'en-tête il se dimensionne par la hauteur, sinon il écrase la navigation.
   Astra le dimensionne par la largeur depuis le personnalisateur : on reprend la main
   pour garder le même gabarit quelle que soit l'image versée dans la médiathèque.

   La borne basse est à 52 px : en dessous, le mot arabe et le filet se referment. Un
   logo empilé occupe forcément plus de hauteur qu'un logo sur une ligne, l'en-tête est
   donc plus haut que la moyenne. C'est assumé sur un positionnement luxe. */
.site-header .aabdaan-logo,
.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header .ast-site-identity img {
	height: clamp(52px, 6.5vw, 76px);
	width: auto;
	max-width: 100%;
}

/* Le logo porte déjà le nom de la marque : le répéter en texte juste à côté fait
   doublon, y compris à l'oral, puisque le lecteur d'écran annonce l'attribut alt. */
.site-header .custom-logo-link + .ast-site-title-wrap,
.site-header .aabdaan-logo-link + .ast-site-title-wrap {
	display: none;
}

/* ==========================================================================
   4. Pied de page
   ========================================================================== */

html body .site-footer,
html body .ast-small-footer {
	background-color: var(--aabdaan-ink-deep);
	color: var(--aabdaan-sand);
}

/* Astra place sa ligne de crédit dans une rangée distincte, dont le fond suit
   la variable de fond de page — donc sable. Sans la recaler, une bande claire
   de 60 px restait tout en bas de chaque page, sous notre pied de page bleu
   nuit, et le crédit s'y perdait. La règle d'Astra est ancrée sur l'attribut de
   section de son constructeur : on reprend son sélecteur. */
.site-below-footer-wrap[data-section="section-below-footer-builder"],
.site-above-footer-wrap[data-section="section-above-footer-builder"],
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
	background-color: var(--aabdaan-ink-deep);
	border-top-color: rgba(227, 203, 152, 0.16);
	color: var(--aabdaan-sand);
}

.site-footer a {
	color: var(--aabdaan-gold-pale);
}

html body .ast-footer-copyright,
html body .ast-footer-copyright.site-footer-focus-item {
	color: rgba(242, 236, 224, 0.62);
	font-size: var(--aabdaan-size-xs);
	letter-spacing: 0.06em;
}

/* Notre propre pied de page, rendu avant celui d'Astra. */
.aabdaan-footer {
	background-color: var(--aabdaan-ink-deep);
	color: var(--aabdaan-sand);
	padding: var(--aabdaan-space-8) var(--aabdaan-gutter) var(--aabdaan-space-6);
	border-top: var(--aabdaan-hairline-dark);
}

.aabdaan-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--aabdaan-space-6) var(--aabdaan-space-4);
	max-width: var(--aabdaan-container);
	margin: 0 auto;
}

.aabdaan-footer__brand p {
	max-width: 34ch;
	margin: var(--aabdaan-space-2) 0 0;
	color: rgba(242, 236, 224, 0.72);
	font-size: var(--aabdaan-size-sm);
}

.aabdaan-footer__logo img {
	height: 66px;
	width: auto;
}

.aabdaan-footer__title {
	margin: 0 0 var(--aabdaan-space-2);
	color: var(--aabdaan-gold);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: var(--aabdaan-tracking-eyebrow);
	text-transform: uppercase;
}

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

.aabdaan-footer__list li + li {
	margin-top: 0.6rem;
}

.aabdaan-footer__list a {
	color: rgba(242, 236, 224, 0.82);
	font-size: var(--aabdaan-size-sm);
	text-decoration: none;
}

.aabdaan-footer__list a:hover {
	color: var(--aabdaan-gold);
}

.aabdaan-footer__note {
	max-width: var(--aabdaan-container);
	margin: var(--aabdaan-space-6) auto 0;
	padding-top: var(--aabdaan-space-3);
	border-top: var(--aabdaan-hairline-dark);
	color: rgba(242, 236, 224, 0.55);
	font-size: var(--aabdaan-size-xs);
}

/* L'or plein sur bleu nuit passe sous le seuil de contraste pour un texte de
   cette taille : on éclaircit l'adresse de courriel plutôt que de la laisser
   se confondre avec le fond. */
.aabdaan-footer__note a {
	color: var(--aabdaan-gold-pale);
	text-decoration-color: rgba(227, 203, 152, 0.5);
}

.aabdaan-footer__note a:hover {
	color: var(--aabdaan-sand);
}

/* Retour en haut : Astra le livre en bloc blanc à angles droits. */
html body #ast-scroll-top {
	background-color: var(--aabdaan-ink);
	border: 1px solid var(--aabdaan-gold);
	border-radius: var(--aabdaan-radius);
	color: var(--aabdaan-gold);
	transition: background-color var(--aabdaan-duration) var(--aabdaan-ease);
}

html body #ast-scroll-top:hover {
	background-color: var(--aabdaan-gold);
	color: var(--aabdaan-ink-deep);
}

@media (max-width: 860px) {
	.aabdaan-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aabdaan-footer__brand {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   5. Rythme des pages courantes
   ========================================================================== */

/* Une page de contenu qui court sur toute la largeur du conteneur se lit mal :
   au-delà d'environ 70 caractères, l'œil perd la ligne suivante. On borne la
   mesure sans toucher aux blocs qui doivent rester larges. */
/* Astra centre les enfants directs du contenu en leur posant
   margin-inline: auto. Sur un bloc plus étroit que le conteneur — un encart,
   un tableau — cela le décale vers le milieu et le désaligne du texte qui
   l'entoure. On remet donc l'alignement à gauche en même temps que la mesure. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > .wp-block-details,
.entry-content > .wp-block-table,
.entry-content > .aabdaan-notice {
	max-width: var(--aabdaan-measure);
	margin-left: 0;
	margin-right: 0;
}

.entry-content > h2 {
	margin-top: var(--aabdaan-space-8);
	padding-top: var(--aabdaan-space-3);
	border-top: var(--aabdaan-hairline);
}

.entry-content > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.entry-content > h3 {
	margin-top: var(--aabdaan-space-4);
}

/* Le titre d'une page intérieure : capitales espacées au-dessus, filet d'or
   en dessous. C'est la même grammaire que les surtitres de la vitrine. */
html body:not(.home) .entry-header .entry-title,
html body .page-title {
	margin-bottom: var(--aabdaan-space-4);
	padding-bottom: var(--aabdaan-space-3);
	border-bottom: var(--aabdaan-hairline);
}

/* Chapeau : la phrase d'ouverture d'une page, en display, plus grande. */
.aabdaan-lede {
	max-width: var(--aabdaan-measure-narrow);
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-lg);
	line-height: 1.4;
}

/* Encart d'avertissement : conditions provisoires, texte en relecture. */
.aabdaan-notice {
	margin: var(--aabdaan-space-4) 0;
	padding: var(--aabdaan-space-3);
	background-color: var(--aabdaan-sand-light);
	border-left: 2px solid var(--aabdaan-gold);
}

.aabdaan-notice p {
	margin: 0;
	color: var(--aabdaan-stone);
	font-size: var(--aabdaan-size-sm);
}

.aabdaan-notice p + p {
	margin-top: var(--aabdaan-space-1);
}

.aabdaan-notice--legal {
	border-left-color: var(--aabdaan-terracotta);
}

/* Information que l'équipe doit encore fournir. Voir
   aabdaan_mark_pending_mentions() : rien n'a été inventé, et ces blancs doivent
   se voir comme tels. */
.aabdaan-pending {
	padding: 0.05em 0.4em;
	background-color: rgba(164, 85, 58, 0.08);
	border-bottom: 1px dashed var(--aabdaan-terracotta);
	color: var(--aabdaan-terracotta);
	font-size: 0.94em;
	font-style: italic;
}

/* Filet de séparation. */
.wp-block-separator.aabdaan-rule,
hr.aabdaan-rule {
	max-width: var(--aabdaan-measure);
	height: 1px;
	margin: var(--aabdaan-space-8) 0;
	border: 0;
	background: linear-gradient(
		to right,
		var(--aabdaan-gold) 0,
		var(--aabdaan-gold-pale) 18%,
		transparent 100%
	);
}

/* Tableaux : pas de grille lourde, seulement des filets horizontaux. */
.aabdaan-table table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--aabdaan-size-sm);
}

.aabdaan-table th,
.entry-content table th {
	padding: var(--aabdaan-space-1) var(--aabdaan-space-2);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--aabdaan-gold);
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

.aabdaan-table td,
.entry-content table td {
	padding: var(--aabdaan-space-2);
	border: 0;
	border-bottom: 1px solid rgba(198, 151, 69, 0.18);
	vertical-align: top;
}

.aabdaan-table tr:last-child td {
	border-bottom: 0;
}

/* Questions fréquentes : le bloc « détails » de WordPress, habillé. */
.wp-block-details.aabdaan-faq__item {
	margin: 0;
	padding: var(--aabdaan-space-2) 0;
	border: 0;
	border-bottom: 1px solid rgba(198, 151, 69, 0.22);
}

.wp-block-details.aabdaan-faq__item summary {
	position: relative;
	padding-right: var(--aabdaan-space-4);
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-md);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	transition: color var(--aabdaan-duration) var(--aabdaan-ease);
}

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

.wp-block-details.aabdaan-faq__item summary:hover {
	color: var(--aabdaan-gold);
}

/* Un signe « plus » qui devient « moins » : deux traits, dont l'un pivote. */
.wp-block-details.aabdaan-faq__item summary::after,
.wp-block-details.aabdaan-faq__item summary::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0.62em;
	width: 13px;
	height: 1px;
	background-color: var(--aabdaan-gold);
	transition: transform var(--aabdaan-duration) var(--aabdaan-ease);
}

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

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

.wp-block-details.aabdaan-faq__item p {
	max-width: var(--aabdaan-measure);
	margin: var(--aabdaan-space-2) 0 var(--aabdaan-space-1);
	font-size: var(--aabdaan-size-sm);
}

/* ==========================================================================
   6. Boutons et formulaires
   ========================================================================== */

.ast-button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.aabdaan-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	background-color: var(--aabdaan-ink);
	color: var(--aabdaan-sand);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: var(--aabdaan-tracking-button);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--aabdaan-ink);
	border-radius: var(--aabdaan-radius);
	padding: 1.05em 2.1em;
	cursor: pointer;
	/* Astra souligne tous les liens de contenu. Sur un bouton, le soulignement
	   traverse le libellé en capitales et donne un rendu de lien brut. */
	text-decoration-line: none;
	transition:
		background-color var(--aabdaan-duration) var(--aabdaan-ease),
		color var(--aabdaan-duration) var(--aabdaan-ease),
		border-color var(--aabdaan-duration) var(--aabdaan-ease),
		transform var(--aabdaan-duration) var(--aabdaan-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
button:hover,
.aabdaan-button:hover {
	background-color: var(--aabdaan-gold);
	border-color: var(--aabdaan-gold);
	color: var(--aabdaan-ink-deep);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.aabdaan-button--gold {
	background-color: var(--aabdaan-gold);
	border-color: var(--aabdaan-gold);
	color: var(--aabdaan-ink-deep);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.aabdaan-button--gold:hover {
	background-color: var(--aabdaan-gold-bright);
	border-color: var(--aabdaan-gold-bright);
	color: var(--aabdaan-ink-deep);
}

/* Astra qualifie ses règles de liens de contenu ; on lui répond sur le même
   terrain plutôt que de compter sur l'ordre de chargement. */
html body a.aabdaan-button,
html body .entry-content a.aabdaan-button,
html body .woocommerce a.button,
html body .entry-content a.button {
	text-decoration: none;
}

/* Bouton fantôme, pour l'action secondaire d'un hero sombre. */
.aabdaan-button--ghost {
	background-color: transparent;
	border-color: rgba(227, 203, 152, 0.55);
	color: var(--aabdaan-sand);
}

.aabdaan-button--ghost:hover {
	background-color: rgba(242, 236, 224, 0.08);
	border-color: var(--aabdaan-gold);
	color: var(--aabdaan-gold);
}

/* Lien-flèche : la troisième forme d'appel à l'action, la plus discrète. */
.aabdaan-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: var(--aabdaan-tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--aabdaan-gold);
	padding-bottom: 0.35em;
}

.aabdaan-link::after {
	content: "→";
	transition: transform var(--aabdaan-duration) var(--aabdaan-ease);
}

.aabdaan-link:hover::after {
	transform: translateX(4px);
}

.aabdaan-link--light {
	color: var(--aabdaan-sand);
}

.aabdaan-link--light:hover {
	color: var(--aabdaan-gold);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
	background-color: var(--aabdaan-white);
	border: 1px solid rgba(14, 31, 60, 0.18);
	border-radius: var(--aabdaan-radius);
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-base);
	padding: 0.85em 1em;
	transition: border-color var(--aabdaan-duration) var(--aabdaan-ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
	border-color: var(--aabdaan-gold);
}

label {
	color: var(--aabdaan-ink);
	font-size: var(--aabdaan-size-sm);
	font-weight: 500;
}

/* ==========================================================================
   7. WooCommerce
   ========================================================================== */

/* Le catalogue : des cartes sur crème, séparées par un filet d'or, qui se
   soulèvent à peine au survol. */
.woocommerce ul.products {
	gap: var(--aabdaan-space-4);
}

.woocommerce ul.products li.product {
	background-color: var(--aabdaan-sand-light);
	border: var(--aabdaan-hairline);
	border-radius: var(--aabdaan-radius);
	padding: var(--aabdaan-space-2);
	transition:
		transform var(--aabdaan-duration-slow) var(--aabdaan-ease-out),
		box-shadow var(--aabdaan-duration-slow) var(--aabdaan-ease-out),
		border-color var(--aabdaan-duration) var(--aabdaan-ease);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--aabdaan-shadow-lift);
	border-color: var(--aabdaan-gold);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-md);
	color: var(--aabdaan-ink);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-md);
	font-weight: 600;
}

.woocommerce span.onsale {
	background-color: var(--aabdaan-gold);
	color: var(--aabdaan-ink-deep);
	border-radius: var(--aabdaan-radius);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Un produit sans photographie ne doit pas afficher le cadre gris de
   WordPress. On le remplace par un aplat sable frappé du monogramme, qui
   ressemble à un choix et non à une image manquante. */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img {
	border-radius: var(--aabdaan-radius);
}

/* La plaque est déjà composée dans le fichier : elle porte son fond, son
   lettrage et sa mention. Il ne reste qu'à la faire remplir son cadre sans
   déformation. */
.woocommerce ul.products li.product img.aabdaan-placeholder,
.woocommerce div.product div.images img.aabdaan-placeholder {
	width: 100%;
	height: auto;
	object-fit: cover;
	background-color: var(--aabdaan-sand-deep);
}

/* Fiche produit */
.woocommerce div.product .product_title {
	font-size: var(--aabdaan-size-2xl);
	line-height: var(--aabdaan-leading-tight);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: var(--aabdaan-measure-narrow);
	color: var(--aabdaan-stone);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-md);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: var(--aabdaan-hairline);
	padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 var(--aabdaan-space-3) 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--aabdaan-stone);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: var(--aabdaan-space-2) 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--aabdaan-gold);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--aabdaan-ink);
}

.woocommerce .quantity .qty {
	border: 1px solid rgba(14, 31, 60, 0.18);
	border-radius: var(--aabdaan-radius);
	background: var(--aabdaan-white);
	padding: 0.7em 0.5em;
}

/* Sélecteurs de variation : la grille de tailles et de couleurs. */
.woocommerce div.product form.cart .variations {
	border-collapse: collapse;
	margin-bottom: var(--aabdaan-space-3);
}

.woocommerce div.product form.cart .variations th.label {
	color: var(--aabdaan-ink);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	padding-right: var(--aabdaan-space-2);
	text-transform: uppercase;
	vertical-align: middle;
}

/* Panier et commande */
.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	border: 0;
	border-bottom: 1px solid var(--aabdaan-gold);
	color: var(--aabdaan-ink);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid rgba(198, 151, 69, 0.18);
	padding: var(--aabdaan-space-2);
}

.woocommerce table.shop_table_responsive tr td::before {
	color: var(--aabdaan-stone);
	font-size: var(--aabdaan-size-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
	background-color: var(--aabdaan-sand-light);
	border: var(--aabdaan-hairline);
	padding: var(--aabdaan-space-3);
}

.woocommerce-checkout h3,
.woocommerce .cart_totals h2 {
	font-size: var(--aabdaan-size-lg);
	margin-bottom: var(--aabdaan-space-3);
	padding-bottom: var(--aabdaan-space-1);
	border-bottom: var(--aabdaan-hairline);
}

/* Messages : WooCommerce livre un bandeau gris à filet bleu. On le recale sur
   la charte, sinon la seule zone du site qui parle au client en cas d'erreur
   est aussi la seule à ne pas ressembler à la marque. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
	background-color: var(--aabdaan-sand-light);
	border-top: 0;
	border-left: 2px solid var(--aabdaan-gold);
	border-radius: var(--aabdaan-radius);
	color: var(--aabdaan-ink);
	font-size: var(--aabdaan-size-sm);
	padding: var(--aabdaan-space-2) var(--aabdaan-space-3);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--aabdaan-gold);
}

.woocommerce-error {
	border-left-color: var(--aabdaan-terracotta);
}

.woocommerce-error::before {
	color: var(--aabdaan-terracotta);
}

/* Espace client : la colonne de navigation. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--aabdaan-hairline);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(198, 151, 69, 0.18);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--aabdaan-space-2) 0;
	color: var(--aabdaan-stone);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--aabdaan-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
	border-left: 2px solid var(--aabdaan-gold);
	padding-left: var(--aabdaan-space-2);
}

/* ==========================================================================
   8. Apparition douce
   ========================================================================== */

/* Le contenu est visible par défaut, et l'apparition n'est ajoutée que là où
 * le navigateur sait l'animer au défilement, sans JavaScript.
 *
 * La version précédente masquait les blocs en CSS puis comptait sur un script
 * pour les révéler. Le risque n'est pas théorique : si le script ne s'exécute
 * pas — erreur en amont, bloqueur, réseau coupé en cours de chargement — le
 * contenu reste invisible pour de bon.
 *
 * L'animation ne touche donc que la position, jamais l'opacité. Une chronologie
 * de défilement peut s'arrêter avant son terme : un bloc situé tout en bas
 * d'une page qu'on ne peut plus faire défiler n'atteint jamais 100 %. Sur une
 * translation, cela donne un décalage de quelques pixels que personne ne
 * remarque ; sur une opacité, cela donne du texte à demi effacé.
 */
@keyframes aabdaan-reveal {
	from {
		transform: translateY(20px);
	}

	to {
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.aabdaan-reveal {
			animation: aabdaan-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

/* ==========================================================================
   9. Petit écran
   ========================================================================== */

@media (max-width: 768px) {
	/* L'en-tête collant mange trop d'un écran de téléphone, où le logo empilé
	   occupe déjà 52 px. */
	html body .site-header {
		position: static;
	}

	.woocommerce ul.products li.product:hover {
		transform: none;
		box-shadow: none;
	}
}