/*
 * Styles de blocs — Souffle du Népal
 * ---------------------------------------------------------------------------
 * RÈGLE : aucune couleur ni aucune taille en dur. Tout dérive des jetons
 * déclarés dans theme.json, via --wp--preset--* et --wp--custom--*.
 *
 * Deux valeurs demandées ne tombent pas sur un jeton existant ; elles sont
 * DÉRIVÉES, jamais écrites en dur :
 *   - padding horizontal des boutons, 32px  → calc(spacing--20 * 2)  (16 × 2)
 *   - chevron de l'accordéon                → em, donc relatif au corps de texte
 *
 * Une seule valeur littérale subsiste dans tout le fichier : le point de
 * rupture 782px de la barre CTA. Les media queries CSS n'acceptent pas les
 * propriétés personnalisées — c'est une limite du langage, pas un choix.
 * 782px est le seuil « mobile » de WordPress, réutilisé ici tel quel.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   1. Bouton primaire
   fond ink · texte blanc · rayon 2px · padding 16/32 · survol brass-deep
   =========================================================================== */

.wp-block-button.is-style-souffle-primary > .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--20) * 2);
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	text-decoration: none;
	transition: background-color 150ms ease;
}

.wp-block-button.is-style-souffle-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-souffle-primary > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--brass-deep);
	color: var(--wp--preset--color--white);
}

/*
 * Au clavier, le fond RESTE ink : l'anneau brass-deep sur un bouton déjà
 * brass-deep donnerait 1.00:1, soit un focus invisible. Fond ink conservé,
 * l'anneau se détache sur la page paper à 5.39:1 (WCAG 1.4.11 exige 3:1).
 */
.wp-block-button.is-style-souffle-primary > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ===========================================================================
   2. Bouton secondaire
   transparent · bordure 1px ink · texte ink
   =========================================================================== */

.wp-block-button.is-style-souffle-secondary > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--20) * 2);
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.wp-block-button.is-style-souffle-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-souffle-secondary > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-souffle-secondary > .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ===========================================================================
   3. Filet décoratif
   trait 1px brass · largeur 64px · séparateur entre sections
   =========================================================================== */

.wp-block-separator.is-style-souffle-rule {
	width: var(--wp--preset--spacing--50);
	max-width: var(--wp--preset--spacing--50);
	height: 0;
	border: 0;
	border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--brass);
	background: none;
	opacity: 1;
	margin-block: var(--wp--preset--spacing--50);
	margin-inline: auto;
}

/* Sur fond sauge, le laiton tombe à 1.81:1 : le filet passe en blanc. */
.has-sage-background-color .wp-block-separator.is-style-souffle-rule,
.is-style-souffle-section-alt .wp-block-separator.is-style-souffle-rule {
	border-top-color: var(--wp--preset--color--white);
}

/* Aligné à gauche quand le bloc porte l'alignement correspondant. */
.wp-block-separator.is-style-souffle-rule.alignleft {
	margin-inline: 0 auto;
}

/* ===========================================================================
   4. Carte
   fond paper · bordure 1px line · padding 40px · aucune ombre portée
   =========================================================================== */

.wp-block-group.is-style-souffle-card {
	background-color: var(--wp--preset--color--paper);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--40);
	box-shadow: none;
}

/* Sur fond sauge, la bordure « line » reste lisible (5.38:1). */
.is-style-souffle-section-alt .wp-block-group.is-style-souffle-card {
	color: var(--wp--preset--color--ink);
}

/* ===========================================================================
   5. Section
   Respiration verticale du site : 56 px en mobile, 96 px en desktop.
   Aucune des deux valeurs n'est écrite ici — elles vivent dans le jeton
   `custom.rhythm.section` de theme.json, interpolé en clamp() entre les
   viewports 360 et 1280 px, comme l'échelle typographique.

   L'échelle d'espacement 8pt ne contient pas 56 px (elle saute de 40 à 64) :
   c'est pour cela que le rythme est un jeton `custom` et non un preset
   d'espacement — un preset apparaîtrait dans le sélecteur de l'éditeur et
   laisserait croire qu'il s'agit d'un cran de l'échelle.
   =========================================================================== */

/*
 * Seul l'axe vertical est touché. Écrire ici `padding-inline: 0` écraserait
 * la gouttière horizontale que WordPress pose via `has-global-padding`
 * (deux classes contre une), et le texte collerait aux bords à 320 px.
 */
.wp-block-group.is-style-souffle-section {
	padding-block: var(--wp--custom--rhythm--section);
}

/* ===========================================================================
   6. Section alternée
   fond sage · texte blanc · liens soulignés
   =========================================================================== */

.wp-block-group.is-style-souffle-section-alt {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--custom--rhythm--section);
	padding-inline: var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-souffle-section-alt :where(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-souffle-section-alt :where(p, li, dt, dd, figcaption, cite) {
	color: var(--wp--preset--color--white);
}

.wp-block-group.is-style-souffle-section-alt :where(a):not(.wp-block-button__link) {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-group.is-style-souffle-section-alt :where(a):not(.wp-block-button__link):hover {
	text-decoration-thickness: var(--wp--custom--rule--width);
}

/*
 * L'anneau brass-deep sur sauge donne 1.22:1. Tout ce qui reçoit le focus
 * dans une section sauge passe donc au blanc (7.04:1).
 */
.wp-block-group.is-style-souffle-section-alt
	:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Un bouton primaire sur sauge : fond ink conservé, anneau blanc. */
.wp-block-group.is-style-souffle-section-alt
	.wp-block-button.is-style-souffle-primary > .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Un bouton secondaire sur sauge s'inverse pour rester lisible. */
.wp-block-group.is-style-souffle-section-alt
	.wp-block-button.is-style-souffle-secondary > .wp-block-button__link {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.wp-block-group.is-style-souffle-section-alt
	.wp-block-button.is-style-souffle-secondary > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--sage);
}

/* ===========================================================================
   7. Accordéon
   <details>/<summary> natifs · aucun JavaScript · chevron SVG inline
   séparateur 1px line · état ouvert visible au clavier
   =========================================================================== */

.wp-block-details.is-style-souffle-accordion {
	border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	margin-block: 0;
	padding: 0;
	background: none;
}

/* Empilés, les accordéons ne doublent pas leur filet de séparation. */
.wp-block-details.is-style-souffle-accordion + .wp-block-details.is-style-souffle-accordion {
	border-top: 0;
}

.wp-block-details.is-style-souffle-accordion > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
	transition: color 150ms ease;
}

/* Le marqueur natif est remplacé par le chevron ci-dessous. */
.wp-block-details.is-style-souffle-accordion > summary::marker {
	content: "";
}

.wp-block-details.is-style-souffle-accordion > summary::-webkit-details-marker {
	display: none;
}

/*
 * Chevron : SVG inline appliqué en masque. La forme vient du SVG, la COULEUR
 * vient du jeton — un masque n'utilise que le canal alpha, donc le « black »
 * du tracé ne peint jamais rien. Aucune couleur en dur n'entre dans le rendu.
 */
.wp-block-details.is-style-souffle-accordion > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.75em;
	height: 0.75em;
	align-self: center;
	background-color: var(--wp--preset--color--brass);
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l7 7 7-7"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l7 7 7-7"/></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transform: rotate(0deg);
	transition: transform 200ms ease;
}

.wp-block-details.is-style-souffle-accordion[open] > summary::after {
	transform: rotate(180deg);
}

/*
 * État ouvert : le chevron pivote, mais la rotation seule ne suffit pas si
 * l'animation est désactivée ou si l'utilisateur ne perçoit pas la forme.
 * Le titre change aussi de couleur et un filet laiton marque le bloc ouvert.
 */
.wp-block-details.is-style-souffle-accordion[open] > summary {
	color: var(--wp--preset--color--brass-deep);
}

.wp-block-details.is-style-souffle-accordion[open] {
	border-left: var(--wp--custom--rule--width) solid var(--wp--preset--color--brass);
	padding-left: var(--wp--preset--spacing--30);
}

.wp-block-details.is-style-souffle-accordion > summary:hover {
	color: var(--wp--preset--color--brass-deep);
}

.wp-block-details.is-style-souffle-accordion > summary:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--custom--radius--sm);
}

.wp-block-details.is-style-souffle-accordion > :not(summary) {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	margin-block: 0 var(--wp--preset--spacing--30);
	max-width: none;
}

/* ===========================================================================
   8. Barre CTA collante mobile
   hauteur 64px · fond ink · un seul bouton · masquée au-dessus de 782px
   =========================================================================== */

.wp-block-group.is-style-souffle-cta-bar {
	display: none;
}

@media (max-width: 782px) {
	.wp-block-group.is-style-souffle-cta-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 100;
		/*
		 * min-height, pas height : un libellé français plus long doit pouvoir
		 * agrandir la barre vers le haut plutôt que déborder.
		 */
		min-height: var(--wp--preset--spacing--50);
		margin: 0;
		/*
		 * Aucun padding vertical : le bouton mesure déjà 55px (16 + 16 de
		 * padding + l'interligne). En ajouter ferait dépasser les 64px voulus.
		 * min-height gouverne, le centrage flex répartit le reste.
		 */
		padding-block: 0;
		padding-inline: var(--wp--preset--spacing--30);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background-color: var(--wp--preset--color--ink);
		border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--brass);
	}

	.wp-block-group.is-style-souffle-cta-bar > * {
		margin-block: 0;
		width: 100%;
		max-width: var(--wp--style--global--content-size);
	}

	.wp-block-group.is-style-souffle-cta-bar .wp-block-button {
		width: 100%;
	}

	.wp-block-group.is-style-souffle-cta-bar .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	/*
	 * L'anneau brass-deep sur ink donne 2.55:1, sous le seuil de 3:1 de
	 * WCAG 1.4.11. Dans la barre, le focus passe donc au blanc (14.70:1).
	 *
	 * La spécificité est délibérément alignée sur celle des règles de bouton
	 * ci-dessus : une version courte en :where() pesait moins lourd que
	 * `.wp-block-button.is-style-souffle-primary > .wp-block-button__link
	 * :focus-visible` et se faisait écraser — l'anneau restait brass-deep.
	 */
	.wp-block-group.is-style-souffle-cta-bar
		.wp-block-button.is-style-souffle-primary > .wp-block-button__link:focus-visible,
	.wp-block-group.is-style-souffle-cta-bar
		.wp-block-button.is-style-souffle-secondary > .wp-block-button__link:focus-visible,
	.wp-block-group.is-style-souffle-cta-bar
		:where(a, button):focus-visible {
		outline-color: var(--wp--preset--color--white);
	}

	/* Un bouton secondaire sur fond encre s'inverse pour rester lisible. */
	.wp-block-group.is-style-souffle-cta-bar
		.wp-block-button.is-style-souffle-secondary > .wp-block-button__link {
		border-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--white);
	}

	/*
	 * La barre est fixe : sans cette réserve, elle recouvrirait la fin du
	 * contenu et le pied de page.
	 */
	body:has(.wp-block-group.is-style-souffle-cta-bar) .wp-site-blocks {
		padding-bottom: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--30));
	}
}

/* ===========================================================================
   9. Mouvement réduit
   Doublon volontaire de la règle globale de style.css : ce fichier doit
   rester correct même chargé seul (éditeur de blocs).
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-souffle-primary > .wp-block-button__link,
	.wp-block-button.is-style-souffle-secondary > .wp-block-button__link,
	.wp-block-details.is-style-souffle-accordion > summary,
	.wp-block-details.is-style-souffle-accordion > summary::after {
		transition: none;
	}
}

/* ===========================================================================
   10. Contraste forcé
   En mode contraste forcé, les fonds sont remplacés par le système : les
   repères qui reposent sur la couleur doivent être doublés d'une bordure.
   =========================================================================== */

@media (forced-colors: active) {
	.wp-block-button.is-style-souffle-primary > .wp-block-button__link,
	.wp-block-button.is-style-souffle-secondary > .wp-block-button__link {
		border: var(--wp--custom--rule--width) solid ButtonBorder;
	}

	.wp-block-details.is-style-souffle-accordion > summary::after {
		background-color: CanvasText;
	}
}