/* AABDAAN — sections éditoriales de la vitrine.
   Le balisage est produit par inc/sections.php. */

/* ==========================================================================
   1. Bandes pleine largeur
   ========================================================================== */

/* Les sections sont rendues à l'intérieur du conteneur d'Astra, qui borne la
   largeur du contenu. Une vitrine a besoin de bandes qui touchent les deux
   bords de la fenêtre : on sort du conteneur en reprenant la largeur de la
   fenêtre, puis on remet une gouttière à l'intérieur.

   Astra pose `max-width` et `margin-inline: auto` sur tous les enfants directs
   de .entry-content, pour appliquer sa largeur de contenu. Sans reprendre la
   main sur le même terrain de spécificité, chaque bande resterait centrée dans
   un cadre de 1200 px avec du sable de part et d'autre. On qualifie donc le
   sélecteur au lieu de compter sur l'ordre de chargement.

   `100vw` inclut la barre de défilement : le débordement latéral qui en
   résulte est neutralisé par `overflow-x: clip` sur le corps de page. */
.aabdaan-hero,
.aabdaan-section,
html body .entry-content > .aabdaan-hero,
html body .entry-content > .aabdaan-section {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--aabdaan-section-y) var(--aabdaan-gutter);
}

/* Empêche la barre de défilement de créer un débordement latéral. */
html body {
	overflow-x: clip;
}

/* Astra entoure le contenu d'une marge intérieure verticale, pensée pour un
   article. Sur une page composée de bandes pleine largeur, elle laisse une
   bande de sable entre l'en-tête et la première section, puis une autre avant
   le pied de page : deux accidents qui trahissent l'assemblage. */
html body.aabdaan-showcase .site-content > .ast-container,
html body.aabdaan-showcase .site-content #primary,
html body.aabdaan-showcase .site-content .site-main,
html body.aabdaan-showcase .site-content .ast-article-single,
html body.aabdaan-showcase .entry-content {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

html body.aabdaan-showcase .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
}

/* Le bandeau de titre est vide sur ces pages, mais il conserve sa marge basse,
   qui remonte par fusion de marges jusqu'au conteneur et redonne 26 px de
   sable sous l'en-tête. On le retire entièrement plutôt que d'en masquer le
   seul titre. */
html body.aabdaan-showcase .entry-header {
	display: none;
}

/* Une marge sous le dernier bloc rouvrirait la même bande juste au-dessus du
   pied de page. */
html body.aabdaan-showcase .entry-content > :last-child {
	margin-bottom: 0;
}

html body.aabdaan-showcase .entry-content > :first-child {
	margin-top: 0;
}

.aabdaan-section__inner {
	margin: 0 auto;
}

.aabdaan-section__inner--narrow { max-width: 46rem; }
.aabdaan-section__inner--normal { max-width: 68rem; }
.aabdaan-section__inner--wide   { max-width: var(--aabdaan-container); }

/* Teintes. L'alternance sable / crème / bleu nuit donne le rythme de la page :
   sans elle, une suite de sections sur le même fond se lit comme un seul bloc. */
.aabdaan-section--light { background-color: var(--aabdaan-sand); }
.aabdaan-section--cream { background-color: var(--aabdaan-sand-light); }

.aabdaan-section--ink {
	background-color: var(--aabdaan-ink);
	color: rgba(242, 236, 224, 0.78);
}

.aabdaan-section--ink h2,
.aabdaan-section--ink h3 {
	color: var(--aabdaan-sand);
}

.aabdaan-section--ink .aabdaan-lede {
	color: var(--aabdaan-sand);
}

.aabdaan-section--ink .aabdaan-eyebrow {
	color: var(--aabdaan-gold);
}

/* Un filet d'or sépare deux bandes de même teinte. */
.aabdaan-section--light + .aabdaan-section--light,
.aabdaan-section--cream + .aabdaan-section--cream {
	border-top: var(--aabdaan-hairline);
}

/* ==========================================================================
   2. Surtitre
   ========================================================================== */

.aabdaan-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9em;
	margin: 0 0 var(--aabdaan-space-2);
	color: var(--aabdaan-stone);
	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-eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 1px;
	background-color: var(--aabdaan-gold);
	flex: none;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.aabdaan-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(86vh, 54rem);
	padding-block: clamp(4rem, 12vh, 9rem) 0;
	background-color: var(--aabdaan-ink);
	color: var(--aabdaan-sand);
	overflow: hidden;
	text-align: center;
}

/* Deux couches de fond, sans image : un halo doré très diffus qui donne de la
   profondeur, et le lettrage de la marque en filigrane. C'est ce qui remplace
   la photographie d'ambiance tant que la série n'est pas livrée. */
.aabdaan-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 55% at 50% 8%, rgba(198, 151, 69, 0.2), transparent 70%),
		linear-gradient(to bottom, var(--aabdaan-ink) 0%, var(--aabdaan-ink-deep) 100%);
}

.aabdaan-hero::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(42rem, 78vw);
	aspect-ratio: 1 / 1.2864;
	transform: translate(-50%, -50%);
	background-image: var(--aabdaan-hero-mark);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.05;
	pointer-events: none;
}

.aabdaan-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin: 0 auto;
	padding-bottom: var(--aabdaan-space-8);
}

.aabdaan-hero__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	margin: 0 0 var(--aabdaan-space-4);
	color: var(--aabdaan-gold);
	font-size: var(--aabdaan-size-sm);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.aabdaan-hero__eyebrow [lang="ar"] {
	font-size: 1.5em;
	letter-spacing: 0;
	text-transform: none;
}

.aabdaan-hero__eyebrow-sep {
	opacity: 0.6;
}

.aabdaan-hero__title {
	margin: 0;
	color: var(--aabdaan-sand);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-4xl);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.02em;
}

/* L'italique de Cormorant est la plus belle partie de la fonte : elle porte la
   fin de la phrase, en or. */
.aabdaan-hero__title em {
	display: block;
	color: var(--aabdaan-gold);
	font-style: italic;
	font-weight: 400;
}

.aabdaan-hero__lede {
	max-width: 40rem;
	margin: var(--aabdaan-space-4) auto 0;
	color: rgba(242, 236, 224, 0.84);
	font-size: var(--aabdaan-size-md);
	line-height: 1.62;
}

.aabdaan-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aabdaan-space-2);
	justify-content: center;
	margin-top: var(--aabdaan-space-6);
}

/* La règle des trois tiers, posée au pied du hero comme une frise. */
.aabdaan-hero__thirds {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	max-width: var(--aabdaan-container);
	width: 100%;
	margin: auto auto 0;
	padding: 0;
	border-top: var(--aabdaan-hairline-dark);
}

.aabdaan-hero__third {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: var(--aabdaan-space-3) var(--aabdaan-space-1);
	border-top: 2px solid transparent;
	margin-top: -1px;
}

.aabdaan-hero__third--ard  { border-top-color: var(--aabdaan-ard); }
.aabdaan-hero__third--bina { border-top-color: var(--aabdaan-bina); }
.aabdaan-hero__third--dar  { border-top-color: var(--aabdaan-dar); }

.aabdaan-hero__third-share {
	color: var(--aabdaan-gold);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-lg);
}

.aabdaan-hero__third-tier {
	color: rgba(242, 236, 224, 0.7);
	font-size: var(--aabdaan-size-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ==========================================================================
   4. Manifeste
   ========================================================================== */

.aabdaan-manifesto .aabdaan-section__inner,
.aabdaan-manifesto.aabdaan-section > .aabdaan-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
	gap: var(--aabdaan-space-6);
	align-items: start;
}

/* Le mot arabe en très grand, coupé par la marge : il fonctionne comme une
   lettrine à l'échelle de la page. */
.aabdaan-manifesto__aside {
	color: var(--aabdaan-gold-pale);
	font-size: clamp(5rem, 11vw, 11rem);
	line-height: 0.9;
	opacity: 0.55;
	text-align: center;
	user-select: none;
}

.aabdaan-manifesto__body > * + * {
	margin-top: var(--aabdaan-space-3);
}

.aabdaan-manifesto__body h2 {
	max-width: 28ch;
}

.aabdaan-manifesto__body p {
	max-width: var(--aabdaan-measure);
}

.aabdaan-manifesto__signature {
	margin-top: var(--aabdaan-space-4);
	padding-top: var(--aabdaan-space-3);
	border-top: var(--aabdaan-hairline);
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-lg);
	font-style: italic;
}

/* ==========================================================================
   5. Triptyque
   ========================================================================== */

.aabdaan-triptych__header {
	max-width: 44rem;
	margin-bottom: var(--aabdaan-space-8);
}

.aabdaan-triptych__header h2 {
	margin: 0 0 var(--aabdaan-space-2);
	font-size: var(--aabdaan-size-2xl);
}

.aabdaan-triptych__header p {
	max-width: var(--aabdaan-measure);
	margin: 0;
}

.aabdaan-triptych__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--aabdaan-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.aabdaan-triptych__item {
	position: relative;
	padding: var(--aabdaan-space-4) 0 0;
	border-top: 2px solid var(--aabdaan-gold);
}

/* Chaque étape porte la couleur de sa sous-marque : c'est le repère qui
   indique au client à quel tiers il participe. */
.aabdaan-triptych__item--dar  { border-top-color: var(--aabdaan-dar); }
.aabdaan-triptych__item--bina { border-top-color: var(--aabdaan-bina); }
.aabdaan-triptych__item--ard  { border-top-color: var(--aabdaan-ard); }

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

.aabdaan-triptych__brand {
	margin: 0 0 var(--aabdaan-space-2);
	color: var(--aabdaan-sand);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-lg);
}

.aabdaan-triptych__brand span {
	display: block;
	color: rgba(242, 236, 224, 0.55);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.aabdaan-triptych__role {
	margin: 0 0 var(--aabdaan-space-2);
	font-size: var(--aabdaan-size-md);
	font-style: italic;
}

.aabdaan-triptych__text {
	margin: 0;
	font-size: var(--aabdaan-size-sm);
	line-height: 1.68;
}

.aabdaan-triptych__footer {
	margin: var(--aabdaan-space-8) 0 0;
}

/* ==========================================================================
   6. Le pack
   ========================================================================== */

.aabdaan-pack .aabdaan-section__inner,
.aabdaan-pack.aabdaan-section > .aabdaan-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

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

/* Emplacement de la photographie. Traité comme un parti pris — un aplat sable
   frappé du monogramme — et non comme une image manquante. */
.aabdaan-pack__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--aabdaan-space-2);
	aspect-ratio: 4 / 5;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.7), transparent 65%),
		var(--aabdaan-sand-deep);
	border: var(--aabdaan-hairline);
}

.aabdaan-pack__placeholder [lang="ar"] {
	color: var(--aabdaan-gold);
	font-size: clamp(3.5rem, 9vw, 6rem);
	line-height: 1;
	opacity: 0.65;
}

.aabdaan-pack__placeholder em {
	color: var(--aabdaan-stone-light);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.aabdaan-pack__body h2 {
	margin: 0 0 var(--aabdaan-space-2);
	font-size: var(--aabdaan-size-2xl);
}

.aabdaan-pack__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aabdaan-space-2) var(--aabdaan-space-3);
	margin: var(--aabdaan-space-4) 0;
	padding: var(--aabdaan-space-3) 0;
	border-top: var(--aabdaan-hairline);
	border-bottom: var(--aabdaan-hairline);
}

.aabdaan-pack__specs dt {
	color: var(--aabdaan-stone-light);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.aabdaan-pack__specs dd {
	margin: 0.3rem 0 0;
	color: var(--aabdaan-ink);
	font-size: var(--aabdaan-size-sm);
}

.aabdaan-pack__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.7em;
	margin: 0 0 var(--aabdaan-space-4);
	color: var(--aabdaan-ink);
}

/* WooCommerce rend le montant dans ses propres balises, que le thème coiffe
   d'une taille de texte courant. Sans reprendre la main ici, le prix du pack
   s'affichait en petit gris à côté de son propre libellé. */
.aabdaan-pack__price .woocommerce-Price-amount,
.aabdaan-pack__price .price,
.aabdaan-pack__price bdi {
	color: var(--aabdaan-ink);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-xl);
	font-weight: 500;
	line-height: 1;
}

.aabdaan-pack__price .woocommerce-Price-currencySymbol {
	font-size: 0.62em;
	vertical-align: 0.35em;
}

.aabdaan-pack__price span {
	color: var(--aabdaan-stone-light);
	font-family: var(--aabdaan-font-body);
	font-size: var(--aabdaan-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

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

/* ==========================================================================
   7. La communauté
   ========================================================================== */

.aabdaan-community__header {
	max-width: 46rem;
	margin-bottom: var(--aabdaan-space-8);
}

.aabdaan-community__header h2 {
	margin: 0 0 var(--aabdaan-space-2);
}

.aabdaan-community__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--aabdaan-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aabdaan-community__figures li {
	padding-top: var(--aabdaan-space-3);
	border-top: var(--aabdaan-hairline);
}

.aabdaan-community__figure {
	display: block;
	color: var(--aabdaan-gold);
	font-family: var(--aabdaan-font-display);
	font-size: var(--aabdaan-size-3xl);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.aabdaan-community__label {
	display: block;
	margin: var(--aabdaan-space-1) 0 var(--aabdaan-space-2);
	color: var(--aabdaan-ink);
	font-size: var(--aabdaan-size-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.aabdaan-community__note {
	display: block;
	color: var(--aabdaan-stone);
	font-size: var(--aabdaan-size-sm);
	line-height: 1.66;
}

/* ==========================================================================
   8. Invitation
   ========================================================================== */

.aabdaan-join {
	text-align: center;
}

.aabdaan-join .aabdaan-eyebrow {
	justify-content: center;
}

.aabdaan-join h2 {
	margin: 0 0 var(--aabdaan-space-3);
	font-size: var(--aabdaan-size-2xl);
}

.aabdaan-join p {
	margin: 0 auto;
	max-width: 42rem;
}

.aabdaan-join__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aabdaan-space-2);
	justify-content: center;
	margin-top: var(--aabdaan-space-6);
}

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

@media (max-width: 860px) {
	.aabdaan-manifesto .aabdaan-section__inner,
	.aabdaan-manifesto.aabdaan-section > .aabdaan-section__inner,
	.aabdaan-pack .aabdaan-section__inner,
	.aabdaan-pack.aabdaan-section > .aabdaan-section__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Le mot arabe passe au-dessus du texte et se réduit : à pleine taille il
	   occuperait tout l'écran d'un téléphone. */
	.aabdaan-manifesto__aside {
		font-size: clamp(4rem, 22vw, 7rem);
		text-align: left;
	}

	.aabdaan-hero__thirds {
		grid-template-columns: repeat(3, 1fr);
	}

	.aabdaan-hero__third-tier {
		font-size: 0.625rem;
		letter-spacing: 0.1em;
	}
}

@media (max-width: 520px) {
	.aabdaan-hero__actions .aabdaan-button,
	.aabdaan-join__actions .aabdaan-button {
		width: 100%;
	}

	.aabdaan-pack__specs {
		grid-template-columns: minmax(0, 1fr);
	}
}