/* ==================================================================
   Bijoux de Soie — pages éditoriales
   ------------------------------------------------------------------
   Notre histoire, Livraison, CGV, Contact : des pages de texte, pas
   des vitrines. Le parti pris est celui de la lecture — une colonne
   étroite, une interligne généreuse, et la Didone du logo réservée
   aux titres.

   Contrastes vérifiés (WCAG AA) :
     titre encre / crème         16,16:1
     chapeau texte / crème        8,94:1
     corps texte / blanc          9,60:1
     surtitre or-texte / crème    5,01:1
     signature encre / blush     14,84:1
     filet or-trait / crème       3,27:1  (seuil 3:1, règle 1.4.11)
     carte encre / or pâle       13,10:1
     bord carte or-texte / or pâle 4,06:1
   L'or de la marque (#B08D45) n'est jamais employé en texte : il tombe
   à 2,66:1 sur blush.
   ================================================================== */

.bds-page {
	--bds-mesure: 34rem;  /* ≈ 62 caractères en Jost : la mesure de lecture */
	background: var(--bds-blanc);
}

/* ------------------------------------------------------------------
   1. L'EN-TÊTE
   Une bande crème pleine largeur, comme les rubriques de l'accueil.
   ------------------------------------------------------------------ */

.bds-page__entete {
	background: var(--bds-creme);
	padding: clamp(3rem, 8vw, 6.5rem) var(--bds-marge, 1.5rem) clamp(2.5rem, 6vw, 5rem);
	text-align: center;
}

.bds-page__surtitre {
	font-family: var(--bds-sans);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--bds-or-texte);
	margin: 0 0 1.1rem;
}

.bds-page__titre {
	font-family: var(--bds-serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 5vw, 3.2rem);
	line-height: 1.12;
	letter-spacing: .03em;
	color: var(--bds-encre);
	margin: 0 auto;
	max-width: 20ch;
	text-wrap: balance;
}

/* Le filet sous le titre : un trait fin, la ponctuation du joaillier. */
.bds-page__filet {
	width: 3.5rem;
	height: 1px;
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
	background: var(--bds-or-trait); /* 3,27:1 sur crème */
	border: 0;
}

/* ------------------------------------------------------------------
   2. LE CORPS
   ------------------------------------------------------------------ */

.bds-page__corps {
	max-width: var(--bds-mesure);
	margin-inline: auto;
	padding: clamp(2.5rem, 7vw, 5rem) var(--bds-marge, 1.5rem) clamp(3rem, 8vw, 6rem);
	font-family: var(--bds-sans);
	color: var(--bds-texte);
}

.bds-page__corps p {
	font-size: 1.02rem;
	line-height: 1.85;
	margin: 0 0 1.6em;

	/* Une ligne isolée en bas de page casse le rythme d'une page de
	   texte : on demande au navigateur de l'éviter. */
	orphans: 2;
	widows: 2;
}

.bds-page__corps p:last-child {
	margin-bottom: 0;
}

/* Le chapeau : la première phrase, celle qui donne le ton. */
.bds-page__chapeau {
	font-size: clamp(1.12rem, 1.6vw, 1.28rem);
	line-height: 1.62;
	color: var(--bds-encre);
	margin-bottom: 2em;
	text-wrap: pretty;
}

/* ------------------------------------------------------------------
   3. LA SIGNATURE
   Le mot de la fin, détaché du corps par un fond et un filet.
   ------------------------------------------------------------------ */

.bds-page__signature {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem);
	background: var(--bds-blush);
	border-top: 1px solid var(--bds-or-trait); /* 3,00:1 sur blush */
	border-radius: var(--bds-rayon, 2px);
	text-align: center;
}

.bds-page__signature p {
	margin: 0;
	color: var(--bds-encre); /* 14,84:1 */
	line-height: 1.7;
}

.bds-page__signature p + p {
	margin-top: .5em;
	font-family: var(--bds-serif);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	letter-spacing: .02em;
}

/* ------------------------------------------------------------------
   4. LA CARTE D'INFORMATION
   Un fait qu'on doit pouvoir lire sans lire la page — le délai de
   livraison, un numéro, une adresse.
   ------------------------------------------------------------------ */

.bds-page__carte {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 1.5rem);
	margin: clamp(2rem, 5vw, 3rem) 0;
	padding: clamp(1.4rem, 3.5vw, 1.9rem) clamp(1.25rem, 3.5vw, 1.75rem);
	background: var(--bds-or-pale, #E9DFC8);
	border-inline-start: 3px solid var(--bds-or-texte); /* 4,06:1 */
	border-radius: var(--bds-rayon, 2px);
}

.bds-page__carte-icone {
	flex: 0 0 auto;
	font-size: 1.75rem;
	line-height: 1;
}

.bds-page__carte-texte {
	min-width: 0;
}

.bds-page__carte-titre {
	display: block;
	font-family: var(--bds-sans);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bds-or-encre, #6B5220);
	margin-bottom: .35rem;
}

.bds-page__carte-valeur {
	display: block;
	font-family: var(--bds-serif);
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	line-height: 1.3;
	color: var(--bds-encre); /* 13,10:1 sur or pâle */
}

.bds-page__carte-note {
	display: block;
	margin-top: .4rem;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--bds-texte); /* 7,25:1 sur or pâle */
}

/* ------------------------------------------------------------------
   5. AJUSTEMENTS
   ------------------------------------------------------------------ */

/* Astra pose ses propres marges sur le titre de la page : le nôtre est
   dans le contenu, on masque celui du thème pour éviter le doublon. */
.bds-page-editoriale .entry-header,
.bds-page-editoriale .ast-single-post-order,
.bds-page-editoriale .entry-title {
	display: none;
}

/*
 * Le bandeau déborde de la colonne pour occuper toute la largeur.
 *
 * `100vw` compte la barre de défilement : sur un bureau qui l'affiche en
 * permanence, la page gagnerait une barre HORIZONTALE de la largeur de
 * la verticale. On coupe donc le débordement en amont — `clip` et non
 * `hidden`, qui créerait un conteneur de défilement et casserait le
 * `position: sticky` de l'en-tête.
 */
.bds-page-editoriale .site-content,
.bds-page-editoriale .entry-content {
	overflow-x: clip;
}

.bds-page-editoriale .entry-content > .bds-page {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/* Là où `dvw` est reconnu, on prend la largeur réelle du contenu : plus
   de calcul approché, la barre de défilement est déjà déduite. */
@supports (width: 100dvw) {
	.bds-page-editoriale .entry-content > .bds-page {
		margin-inline: calc(50% - 50dvw);
		width: 100dvw;
		max-width: 100dvw;
	}
}

/* En arabe, le filet et la carte suivent le sens de lecture : les
   propriétés logiques s'en chargent, sauf pour ce qui est centré. */
[dir="rtl"] .bds-page__corps {
	text-align: right;
}

[dir="rtl"] .bds-page__entete,
[dir="rtl"] .bds-page__signature {
	text-align: center;
}

@media (max-width: 480px) {
	.bds-page__carte {
		flex-direction: column;
		align-items: flex-start;
		text-align: start;
	}
}

/* Impression : une cliente peut vouloir garder les délais sous la main. */
@media print {
	.bds-page__entete,
	.bds-page__signature,
	.bds-page__carte {
		background: transparent;
		border-color: #000;
	}

	.bds-page__corps {
		max-width: none;
	}
}

/* ==================================================================
   6. FORMULAIRE DE CONTACT
   ------------------------------------------------------------------
   Contrastes vérifiés (WCAG AA) :
     étiquette et saisie : encre / blanc      17,35:1
     bord de champ : or-trait / blanc          3,51:1  (règle 1.4.11)
     bord au focus : or-texte / blanc          5,38:1
     bouton : encre / or de marque             5,57:1
     bouton survolé : encre / or clair         6,80:1
     confirmation : succès / blush             5,24:1
     erreur : rouge / blanc                    7,53:1

   Le bouton porte de l'ENCRE sur l'or, pas du blanc : le blanc sur l'or
   de marque tombe à 3,11:1. C'est la convention du site, posée dans
   style.css.
   ================================================================== */

.bds-contact {
	margin-top: clamp(2rem, 5vw, 3rem);
}

/* --- Les retours --- */

.bds-contact__ok {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.15rem;
	background: var(--bds-blush);
	border-inline-start: 3px solid var(--bds-succes);
	border-radius: var(--bds-rayon, 2px);
	color: var(--bds-encre);
	line-height: 1.6;
}

.bds-contact__coche {
	flex: 0 0 auto;
	color: var(--bds-succes); /* 5,24:1 sur blush */
	font-weight: 700;
}

.bds-contact__erreur {
	margin: 0 0 1.75rem;
	padding: 1rem 1.15rem;
	background: #FDF4F4;
	border-inline-start: 3px solid var(--bds-erreur);
	border-radius: var(--bds-rayon, 2px);
}

.bds-contact__erreur p {
	margin: 0;
	color: var(--bds-erreur); /* 7,53:1 */
	font-size: .95rem;
	line-height: 1.6;
}

.bds-contact__erreur p + p {
	margin-top: .5em;
}

/* --- Les champs --- */

.bds-contact__form {
	display: grid;
	gap: 1.15rem;
}

.bds-contact__duo {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.bds-contact__champ {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0;
}

.bds-contact__champ label {
	font-family: var(--bds-sans);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bds-encre);
}

.bds-contact__champ input,
.bds-contact__champ textarea {
	width: 100%;
	padding: .8rem .9rem;
	font-family: var(--bds-sans);

	/* Jamais sous 16 px : en dessous, iOS zoome automatiquement quand le
	   champ prend le focus, et la page saute sous le doigt. */
	font-size: 1rem;

	line-height: 1.5;
	color: var(--bds-encre);
	background: var(--bds-blanc);

	/* 3,51:1 — la bordure de marque (#E3D5CB) tombe à 1,43:1 et ne
	   satisferait pas la règle 1.4.11 sur un contour de champ. */
	border: 1px solid var(--bds-or-trait);
	border-radius: var(--bds-rayon, 2px);

	transition: border-color var(--bds-transition), box-shadow var(--bds-transition);
}

.bds-contact__champ textarea {
	resize: vertical;
	min-height: 9rem;
}

.bds-contact__champ input:focus-visible,
.bds-contact__champ textarea:focus-visible {
	outline: 2px solid var(--bds-or-texte); /* 5,38:1 */
	outline-offset: 2px;
	border-color: var(--bds-or-texte);
}

.bds-contact__champ input[aria-invalid="true"],
.bds-contact__champ textarea[aria-invalid="true"] {
	border-color: var(--bds-erreur);
	border-width: 2px;
}

/* --- Le pot de miel : invisible, mais pas display:none ---
   Certains robots ignorent les champs en display:none. On le sort de
   l'écran : il reste « affiché » pour eux, invisible pour tout le monde. */

.bds-contact__piege {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Le bouton --- */

.bds-contact__envoi {
	margin: .5rem 0 0;
}

.bds-contact__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: .85rem 2.25rem;
	font-family: var(--bds-sans);
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bds-encre); /* 5,57:1 sur l'or */
	background: var(--bds-or-marque);
	border: 1px solid var(--bds-or-marque);
	border-radius: var(--bds-rayon, 2px);
	cursor: pointer;
	transition: background var(--bds-transition), border-color var(--bds-transition);
}

.bds-contact__bouton:hover,
.bds-contact__bouton:focus-visible {
	background: var(--bds-or-survol); /* 6,80:1 */
	border-color: var(--bds-or-survol);
}

.bds-contact__bouton:focus-visible {
	outline: 2px solid var(--bds-encre);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.bds-contact__bouton {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bds-contact__champ input,
	.bds-contact__champ textarea,
	.bds-contact__bouton {
		transition: none;
	}
}

@media (forced-colors: active) {
	.bds-contact__bouton {
		border: 1px solid ButtonText;
	}
}