/*
 * DOSAGE — feuille du thème.
 *
 * Ce fichier ne contient QUE ce que theme.json ne sait pas exprimer :
 * alias de jetons, rythme de section, styles de blocs, utilitaires
 * typographiques, schéma inverse, champs de formulaire.
 *
 * Règle : aucune valeur en dur ici. Tout vient de theme.json, pour qu'une
 * variation de style (Dosage, Complexion, Herbarium) suffise à repeindre le thème
 * sans toucher une ligne de CSS.
 */

/* ------------------------------------------------------------------
   1. Alias
   Les composants s'écrivent avec des noms courts. La correspondance
   avec les jetons WordPress se fait ici, une seule fois.
   ------------------------------------------------------------------ */
:root {
	--paper: var(--wp--preset--color--paper);
	--ink: var(--wp--preset--color--ink);
	--clay: var(--wp--preset--color--clay);
	--sand: var(--wp--preset--color--sand);
	--line: var(--wp--preset--color--line);
	--signal: var(--wp--preset--color--signal);
	--signal-ink: var(--wp--preset--color--signal-ink);
	--ochre: var(--wp--preset--color--ochre);
	--ochre-light: var(--wp--preset--color--ochre-light);
	--alert: var(--wp--preset--color--alert);
	--data: var(--wp--preset--color--data);
	--inverse-surface: var(--wp--preset--color--inverse-surface);
	--inverse-text: var(--wp--preset--color--inverse-text);
	--inverse-accent: var(--wp--preset--color--inverse-accent);

	--font-body: var(--wp--preset--font-family--body);
	--font-display: var(--wp--preset--font-family--display);
	--font-mono: var(--wp--preset--font-family--mono);

	--s1: var(--wp--preset--spacing--10);
	--s2: var(--wp--preset--spacing--20);
	--s3: var(--wp--preset--spacing--30);
	--s4: var(--wp--preset--spacing--40);
	--s5: var(--wp--preset--spacing--50);
	--s6: var(--wp--preset--spacing--60);
	--s7: var(--wp--custom--step--7);
	--s8: var(--wp--custom--step--8);
	--s9: var(--wp--custom--step--9);
	--s10: var(--wp--custom--step--10);

	--gutter: var(--wp--custom--layout--gutter);
	--radius: var(--wp--custom--radius);
	--tap: var(--wp--custom--tap);
	--dur: var(--wp--custom--duration);
	--ease: var(--wp--custom--ease);

	--rule: 1px solid var(--line);
	--rule-ink: 1px solid var(--ink);
	/* Une bordure qui délimite un champ doit tenir 3:1 (WCAG 1.4.11).
	   On s'appuie sur la couleur du texte second, qui tient déjà 4,5:1. */
	--rule-field: 1px solid var(--data);

	--header-h: 77px;
	--header-offset: 0px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur: 0.001ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------
   2. Socle
   ------------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

/* ------------------------------------------------------------------
   3. Accessibilité
   ------------------------------------------------------------------ */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--s4);
	z-index: 100;
	background: var(--paper);
	color: var(--ink);
	padding: var(--s3) var(--s4);
	border: var(--rule-ink);
}

.skip-link:focus {
	top: var(--s2);
}

/* ------------------------------------------------------------------
   4. Rythme
   Les crans de section ne sont pas dans theme.json : ils changent d'une
   variation à l'autre et s'appliquent à des groupes, pas à un bloc.
   ------------------------------------------------------------------ */
.dosage-section {
	padding-block: var(--s9);
}

.dosage-section--tight {
	padding-block: var(--s8);
}

.dosage-section--tall {
	padding-block: var(--s10);
}

.dosage-rule {
	border: 0;
	border-top: var(--rule);
	margin: 0;
}

/* Colonne de lecture : un texte long ne se lit pas sur 1320 px. */
.dosage-reading > :where(*) {
	max-width: var(--wp--custom--layout--reading);
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   5. Utilitaires typographiques
   Exposés comme styles de blocs (voir functions.php) : le marchand les
   applique depuis l'éditeur, il ne tape jamais une classe.
   ------------------------------------------------------------------ */
.is-style-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ochre);
}

.is-style-data {
	font-family: var(--font-mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--data);
}

.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--data);
	max-width: 46ch;
	/* Une mise en page contrainte centre tout enfant plus étroit qu'elle, et
	   elle le fait en « !important ». Une accroche se lit à gauche, sous son
	   titre, pas au milieu : c'est le seul endroit du thème où il faut passer
	   devant une règle du cœur, et ça se fait avec la même arme. */
	margin-inline-start: 0 !important;
}

/* Lien d'action autonome : cible d'au moins 24 px de haut, filet à 3 px
   sous la ligne, quel que soit le corps de texte. */
.is-style-link-rule a,
a.is-style-link-rule {
	display: inline-block;
	max-width: 100%;
	text-wrap: balance;
	font-family: var(--font-mono);
	font-size: 13.5px;
	line-height: 1.55;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-top: max(0px, calc(20px - 1.55em));
	padding-bottom: 3px;
}

/* ------------------------------------------------------------------
   6. Boutons
   theme.json pose le bouton primaire. Les variantes sont des styles de
   blocs, pour qu'elles existent dans l'éditeur.
   ------------------------------------------------------------------ */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: var(--tap);
	text-align: center;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.wp-block-button.is-style-signal .wp-block-button__link {
	background: var(--signal);
	color: var(--signal-ink);
	border-color: var(--signal);
}

.wp-block-button.is-style-signal .wp-block-button__link:hover {
	background: var(--ink);
	border-color: var(--ink);
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--ink);
	color: var(--paper);
}

.wp-block-button .wp-block-button__link[disabled],
.wp-block-button .wp-block-button__link[aria-disabled="true"] {
	background: var(--clay);
	color: var(--data);
	border-color: var(--clay);
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
   7. Schéma inverse
   Une seule classe redéfinit les rôles en local : rien à repeindre à
   l'intérieur du groupe.
   ------------------------------------------------------------------ */
.dosage-inverse {
	--paper: var(--inverse-surface);
	--ink: var(--inverse-text);
	--sand: var(--inverse-surface);
	--clay: var(--wp--custom--on-dark--14);
	--line: var(--wp--custom--on-dark--24);
	--data: var(--wp--custom--on-dark--72);
	--ochre: var(--inverse-accent);
	--ochre-light: var(--inverse-accent);
	background: var(--inverse-surface);
	color: var(--inverse-text);
}

.dosage-inverse :is(h1, h2, h3, h4, h5, h6),
.dosage-inverse a {
	color: var(--inverse-text);
}

.dosage-inverse :is(a, button, [tabindex]):focus-visible {
	outline-color: var(--inverse-text);
}

/* ------------------------------------------------------------------
   8. Contenu riche
   Le même HTML se rend à l'identique dans une description produit, une
   page, un article. Échelle de titres réduite et strictement décroissante :
   on est dans un texte, pas en tête de section.

   La classe est « dosage-prose », et surtout PAS « entry-content » :
   WordPress pose lui-meme « entry-content » sur le bloc Contenu, donc sur
   TOUTE page, y compris une page composee de sections. S'y accrocher revient
   a rendre les titres de section a la taille d'un sous-titre de paragraphe.
   Le gabarit qui veut l'echelle de lecture la demande explicitement.
   ------------------------------------------------------------------ */
.dosage-prose :is(h1, h2, h3) {
	line-height: 1.15;
}

.dosage-prose h1 {
	font-size: calc(30px * var(--wp--custom--scale--display));
}

.dosage-prose h2 {
	font-size: calc(26px * var(--wp--custom--scale--display));
}

.dosage-prose h3 {
	font-size: calc(22px * var(--wp--custom--scale--display));
}

.dosage-prose :is(ul, ol) {
	padding-left: 1.2em;
}

.dosage-prose li + li {
	margin-top: var(--s2);
}

.dosage-prose a {
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------
   9. Champs de formulaire
   ------------------------------------------------------------------ */
input:where([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="search"], [type="password"], [type="date"]),
textarea,
select {
	min-height: 48px;
	padding: 14px 15px;
	background: var(--paper);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	border: var(--rule-field);
	border-radius: var(--radius);
	width: 100%;
}

input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--ink);
	outline-offset: -1px;
	border-color: var(--ink);
}

input::placeholder,
textarea::placeholder {
	color: var(--data);
	opacity: 1;
}

/*
 * Les libellés de champ, et RIEN d'autre.
 *
 * La règle visait « label » tout court. Un label n'est pas forcement un
 * libellé de champ : c'est aussi l'enveloppe cliquable d'une case, d'un bouton
 * radio, d'une pastille de teinte. Styler l'élément nu faisait sortir les noms
 * de teintes en capitales monospace, et aurait deborde de la meme facon sur
 * n'importe quelle extension tierce. On nomme donc les endroits.
 */
.dosage-prose label,
.wp-block-search__label,
.comment-form label,
.woocommerce-form-row > label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
	font-family: var(--font-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

/* ------------------------------------------------------------------
   10. En-tête
   --header-offset porte la hauteur réelle quand l'en-tête colle, zéro
   sinon : ce qui se cale dessous n'a pas à supposer un en-tête fixe.
   ------------------------------------------------------------------ */
.wp-site-blocks > header {
	position: relative;
	z-index: 20;
	border-bottom: var(--rule);
}

.dosage-header--sticky {
	position: sticky;
	top: 0;
	background: var(--wp--custom--veil--header);
	backdrop-filter: blur(12px);
}

body:has(.dosage-header--sticky) {
	--header-offset: var(--header-h);
}

@supports not (backdrop-filter: blur(12px)) {
	.dosage-header--sticky {
		background: var(--paper);
	}
}

/* Sur téléphone, le flou d'une barre collante se recompose à chaque image
   de défilement, pour un voile à 88 % qui ne le montre presque pas. */
@media (max-width: 989px) {
	.dosage-header--sticky {
		background: var(--paper);
		backdrop-filter: none;
	}
}

.wp-site-blocks > footer {
	border-top: var(--rule);
}

/* ------------------------------------------------------------------
   11. Navigation
   ------------------------------------------------------------------ */
.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: currentColor;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-submenu__toggle {
	min-height: var(--tap);
}