/*
 * Drache d'Avril — CSS de présentation.
 *
 * Les tokens (couleurs, typo, espacements) sont exposés par theme.json sous
 * forme de custom properties WP : var(--wp--preset--color--brand),
 * var(--wp--preset--font-size--lg), var(--wp--preset--spacing--40), etc.
 * On consomme ces variables ici, on ne redéfinit pas de valeurs en dur.
 *
 * Le gros du style des templates arrive au jalon 5b. Ce fichier ne porte que
 * le strict nécessaire pour que le scaffold s'affiche proprement.
 */

/*
 * Reset box-sizing global. Sans lui, tout élément en width:100% + padding
 * (ex. .container, .site-header__inner) déborde du viewport et provoque un
 * scroll horizontal. border-box est le standard attendu par Gutenberg et Woo.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Espacement vertical des paragraphes.
 *
 * Le navigateur pose 1em par défaut, donc une valeur qui suit la taille du
 * texte : un paragraphe en 1,25rem s'écartait plus qu'un autre en 1rem, et le
 * rythme vertical variait d'un bloc à l'autre sans qu'on l'ait décidé. On fixe
 * un pas du système d'espacement, xl.
 *
 * Le premier et le dernier n'ont pas de marge extérieure. C'est au conteneur de
 * régler son propre espacement ; un paragraphe ne doit pas le pousser depuis
 * l'intérieur, sinon chaque bloc de texte arrive avec un blanc en trop en haut
 * et en bas que personne n'a demandé — et qu'on finit par annuler au cas par
 * cas, ce qui était déjà commencé sur le résumé de la fiche produit.
 *
 * Sélecteur d'élément nu, donc poids minimal : tout ce qui suit l'emporte, et
 * c'est voulu. C'est un socle, pas une règle qui arbitre.
 */
p {
	margin-block: var(--wp--preset--spacing--xl, 1.5rem);
}

p:first-child {
	margin-block-start: 0;
}

p:last-child {
	margin-block-end: 0;
}

/*
 * Easing "ressort" partagé (rebond du logo header, du badge Insta, etc.).
 * Source unique : header et footer le consomment via var(--dda-spring).
 */
:root {
	--dda-spring: linear(0, -0.04 3%, 0 7%, 0.290 12%, 0.696 16%, 1.069 20%, 1.312 23%, 1.394 27%, 1.340 31%, 1.206 35%, 1.052 39%, 0.929 42%, 0.863 46%, 0.855 50%, 0.891 54%, 0.947 58%, 1.002 62%, 1.040 66%, 1.055 69%, 1.051 73%, 1.033 77%, 1.011 81%, 0.992 85%, 0.982 88%, 0.979 92%, 0.983 96%, 1);

	/*
	 * Trou drache du footer. Partagé entre le footer (masque + remontée) et le
	 * <main> (padding du dernier bloc pour réserver la zone révélée).
	 * Hauteur = largeur / ratio du SVG (viewBox 245.87 × 137.36 ≈ 1.79).
	 */
	--footer-cloud-width: min(400px, 60vw);
	--footer-cloud-height: calc(var(--footer-cloud-width) / 1.79);
}

/*
 * En mobile le trou doit s'élargir. À 60vw il fait 236 px de large pour 132 de
 * haut, alors que le badge Instagram en fait 220 sur 183 : le badge est plus
 * HAUT que le trou, et le mot en arc retombait sur le bleu du footer. En bureau
 * le rapport est confortable (270 dans 400) parce que le plafond de 400 px fait
 * valoir la largeur 27,8vw là où le mobile est à 60.
 *
 * La variable est ici et non dans footer.css parce qu'elle est partagée : le
 * <main> s'en sert aussi pour la réserve du dernier bloc. Les deux valeurs
 * doivent se lire l'une sous l'autre.
 *
 * À 1024 le plafond de 400 mord de toute façon (80vw = 819), rien ne bouge en
 * haut du palier.
 */
@media (max-width: 1024px) {
	:root {
		--footer-cloud-width: min(400px, 80vw);
	}
}

.container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40, 1rem);
}

.skip-link {
	position: absolute;
	left: -9999px;
}

/*
 * Texte réservé aux lecteurs d'écran.
 * WooCommerce et le CSS des blocs définissent chacun leur version de cette
 * classe, mais aucune des deux n'est garantie sur une page du thème. On la pose
 * ici pour ne pas dépendre du hasard des feuilles chargées.
 *
 * clip-path plutôt que display:none : masqué visuellement, mais toujours lu.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	left: var(--wp--preset--spacing--40, 1rem);
	top: var(--wp--preset--spacing--40, 1rem);
	z-index: 1000;
}

.site-header,
.site-footer {
	padding: 0;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50, 1.5rem);
}

/*
 * Quadrillage (extension core/group).
 * Le panneau "Quadrillage" pose sur le groupe la classe .has-quadrillage et les
 * variables --qg-grid-color / --qg-grid-opacity (cf. inc/quadrillage.php côté
 * front et le filtre editor.BlockListBlock côté éditeur).
 *
 * Le quadrillage est une COUCHE en ::before, au-dessus du fond du groupe et sous
 * son contenu. On ne touche pas au background du groupe : le fond (et son
 * opacité) se règlent nativement via Arrière-plan -> dégradé avec alpha.
 *
 * Empilement : isolation:isolate crée un contexte propre au groupe. Dans ce
 * contexte, l'ordre de peinture est fond du groupe, puis ::before (z-index:-1),
 * puis le contenu. Le quadrillage tombe donc pile entre les deux, sans avoir à
 * toucher au z-index des blocs enfants.
 *
 * --qg-cell : taille d'une case. Figée en token (à caler sur Figma), pas dans
 * le panneau. Les lignes = repeating-linear-gradient (1px) dans les deux axes.
 */

/*
 * Teinte de fond d'une section.
 * Réglée dans le panneau « Fond et quadrillage » du groupe, indépendamment
 * des lignes. Le PHP n'émet qu'une couleur validée et un pourcentage entier ;
 * c'est ici que la teinte est composée, pour que rien de composé n'atteigne
 * l'attribut style.
 */
.has-drache-fond {
	background-color: color-mix(
		in srgb,
		var(--qg-fond-color) var(--qg-fond-opacity, 10%),
		transparent
	);
}

.has-quadrillage {
	position: relative;
	isolation: isolate;
	--qg-cell: 64px;
}
.has-quadrillage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	--qg-line: color-mix(
		in srgb,
		var(--qg-grid-color, currentColor) var(--qg-grid-opacity, 100%),
		transparent
	);

	/*
	 * Un MOTIF TUILÉ, et non deux repeating-linear-gradient.
	 *
	 * Le gradient répétitif place chaque répétition à k fois la taille de case,
	 * puis arrondit au pixel d'appareil. Dès que l'échelle n'est pas entière —
	 * zoom du navigateur, écran à densité fractionnaire — l'arrondi tombe une
	 * fois d'un côté, une fois de l'autre, et les cases alternent entre deux
	 * largeurs. Mesuré à l'échelle 1,37 sur une surface de 1000 px : des écarts
	 * de 85 et 86 px là où on en attend 87,68. C'est ce qui faisait passer
	 * certains carrés pour des rectangles.
	 *
	 * Tuilé, le navigateur rastérise UNE case et la répète : elles sortent
	 * toutes identiques. Même mesure, même échelle : 86 px partout.
	 *
	 * Chaque calque dessine une seule ligne au bord de sa tuile, l'un à gauche
	 * et l'autre en haut ; c'est leur répétition qui fait la grille.
	 */
	background-image:
		linear-gradient(to right, var(--qg-line) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--qg-line) 0 1px, transparent 1px);
	background-size: var(--qg-cell) var(--qg-cell);
}

/*
 * Format inline "Taille réduite" (cf. src/formats/size-sub/).
 * Applique une taille plus petite à une sélection de texte sans changer la
 * taille du bloc. En em pour rester proportionnel au titre (ajuste --dda-size-sub
 * si besoin). Garde la fonte et la graisse du parent (Intro Rust bold sur un h1).
 */
.dda-size-sub {
	display: block;            /* sa propre ligne, sans <br> (qui hérite du leading du gros titre) */
	font-size: var(--dda-size-sub, 0.4em);
	line-height: 1.1;          /* ligne serrée, indépendante du titre */
	margin-top: var(--dda-size-sub-gap, 0.15em); /* écart contrôlé avec la ligne du dessus */
	letter-spacing: var(--wp--custom--typography--tracking--normal, 0);
}

/*
 * Interlignage automatique : pour chaque taille de police preset, le line-height
 * vaut la taille + 8px. theme.json ne sait pas calculer un line-height par preset
 * (les fontSizes ne portent que `size`), donc on le pose ici en consommant les
 * variables de taille : ça reste piloté par theme.json et synchro si une taille
 * change. S'applique dès qu'une taille nommée est choisie sur un bloc ; un
 * line-height explicite posé sur le bloc (style inline) reste prioritaire.
 * --dda-leading-extra = l'écart fixe (8px par défaut), ajustable.
 */
.has-xxs-font-size  { line-height: calc(var(--wp--preset--font-size--xxs)  + var(--dda-leading-extra, 8px)); }
.has-xs-font-size   { line-height: calc(var(--wp--preset--font-size--xs)   + var(--dda-leading-extra, 8px)); }
.has-sm-font-size   { line-height: calc(var(--wp--preset--font-size--sm)   + var(--dda-leading-extra, 8px)); }
.has-md-font-size   { line-height: calc(var(--wp--preset--font-size--md)   + var(--dda-leading-extra, 8px)); }
.has-lg-font-size   { line-height: calc(var(--wp--preset--font-size--lg)   + var(--dda-leading-extra, 8px)); }
.has-xl-font-size   { line-height: calc(var(--wp--preset--font-size--xl)   + var(--dda-leading-extra, 8px)); }
.has-2-xl-font-size { line-height: calc(var(--wp--preset--font-size--2-xl) + var(--dda-leading-extra, 8px)); }
.has-3-xl-font-size { line-height: calc(var(--wp--preset--font-size--3-xl) + var(--dda-leading-extra, 8px)); }
.has-4-xl-font-size { line-height: calc(var(--wp--preset--font-size--4-xl) + var(--dda-leading-extra, 8px)); }
.has-5-xl-font-size { line-height: calc(var(--wp--preset--font-size--5-xl) + var(--dda-leading-extra, 8px)); }
.has-6-xl-font-size { line-height: calc(var(--wp--preset--font-size--6-xl) + var(--dda-leading-extra, 8px)); }
.has-7-xl-font-size { line-height: calc(var(--wp--preset--font-size--7-xl) + var(--dda-leading-extra, 8px)); }
.has-8-xl-font-size { line-height: calc(var(--wp--preset--font-size--8-xl) + var(--dda-leading-extra, 8px)); }
.has-9-xl-font-size { line-height: calc(var(--wp--preset--font-size--9-xl) + var(--dda-leading-extra, 8px)); }

/*
 * WordPress applique un padding par défaut (1.25em 2.375em) à tout groupe ayant
 * un fond : :where(.wp-block-group.has-background). Dans ce thème chaque section
 * définit son propre padding, donc ce défaut crée des espaces parasites. On le
 * neutralise. Spécificité 0,2,0 > le :where() de core, et un padding explicite
 * posé sur le bloc (style inline) reste prioritaire sur cette règle.
 */
.wp-block-group.has-background {
	padding: 0;
}

/*
 * Éditeur uniquement : l'éditeur enveloppe le contenu dans .is-root-container
 * .is-layout-flow, ce qui ajoute 24px (block-gap par défaut) entre les blocs de
 * premier niveau, donc entre les sections. En front, the_content() ne pose pas ce
 * wrapper : les sections se touchent déjà. On aligne l'éditeur sur le front en
 * supprimant ce gap inter-sections. Sélecteur sous .editor-styles-wrapper => sans
 * effet en front. N'affecte QUE le 1er niveau : les espacements de blocs internes
 * (gap par conteneur) restent intacts.
 */
.editor-styles-wrapper .is-root-container.is-layout-flow > * {
	margin-block-start: 0;
}

/* Coupe le débord HORIZONTAL au niveau de la page (décors de sections qui
   saignent vers les bords, cercle de la section univers, etc.) pour éviter le
   scroll horizontal, SANS rogner verticalement : overflow-x:clip n'agit que sur
   l'axe X et ne crée pas de conteneur de défilement (contrairement à hidden). */
.site-main {
	overflow-x: clip;
	/*
	 * La gouttière de page n'est PAS posée ici. Elle vient de la classe
	 * has-global-padding, ajoutée sur le <main> dans front-page.php : c'est elle
	 * qui, en plus du padding, donne aux sections align=full la marge négative
	 * qui les ramène bord à bord. Poser le padding à la main ici, sans cette
	 * marge, encadrait chaque section de blanc.
	 */
}

/*
 * Bande de réassurance (« Imaginé à Lille », « Imprimé en France », « Papier de
 * qualité »).
 *
 * Le groupe est en flex avec un blockGap de 5rem, réglé pour une seule ligne en
 * bureau. Dès que les trois mentions passent à la ligne, ces 80 px deviennent
 * l'espacement VERTICAL et la bande s'étire démesurément. On dissocie donc les
 * deux axes sous 1024 : l'écart horizontal reste confortable, le vertical se
 * resserre.
 *
 * Ciblé sur l'ancre #reassurance, qui est posée dans le contenu de la page. Si
 * elle disparaît de l'éditeur, ce style tombe.
 */
@media (max-width: 1024px) {
	#reassurance > .wp-block-group {
		padding: 16px;
		gap: 24px;
		row-gap: 16px;
	}
}

/*
 * Colonnes pleine largeur, une fois empilées.
 *
 * Un core/columns en align=full sort de la gouttière de sa section par une marge
 * négative, ce qui est le comportement voulu en bureau : les deux colonnes
 * occupent toute la largeur. Empilées en mobile, elles n'ont plus rien à gagner
 * à déborder, et leur texte se retrouvait collé au bord, voire coupé.
 *
 * On annule donc la marge et on redonne la gouttière. La règle est volontairement
 * générale : un bloc colonnes empilé veut cette gouttière dans tous les cas.
 */
@media (max-width: 1024px) {
	.wp-block-columns.alignfull {
		margin-inline: 0;
		padding-inline: var(--wp--style--root--padding-left, 1rem);
	}
}

/*
 * Blocs de section en align=full, à l'intérieur d'une section elle-même
 * pleine largeur.
 *
 * La section est déjà ressortie de la gouttière du <main> par une marge
 * négative. WordPress en donne une SECONDE à ses enfants align=full, si bien que
 * ces blocs débordaient de 16 px de chaque côté de l'écran. Leur gouttière
 * interne de 24 px se retrouvait amputée d'autant et ne valait plus que 8 px à
 * l'écran, mesuré dans le navigateur.
 *
 * On annule cette seconde sortie : la section ne porte aucun padding, le bloc
 * occupe donc déjà toute la largeur sans avoir à en ressortir, et sa gouttière
 * interne vaut ce qu'elle annonce.
 *
 * Règle GÉNÉRALE, et non une liste de blocs nommés. Elle a d'abord été écrite
 * cas par cas, en réservant la section univers dont on croyait qu'elle avait
 * besoin de sa marge négative en bureau. Mesure faite : la marge ne lui vaut
 * que 16 px de largeur en plus, soit un déplacement de 10 px du cercle qui, lui,
 * est posé en absolu et déborde de toute façon. L'exception n'avait pas lieu
 * d'être, et la règle vaut donc pour tout le monde.
 */
.site-main .alignfull > .alignfull {
	margin-inline: 0;
}

/*
 * Gouttière des sections plafonnées.
 * -------------------------------------------------------------------------
 * Une section pleine largeur dont le contenu est plafonné à 1280 et centré
 * n'a plus AUCUNE marge une fois sous ce plafond : les marges automatiques
 * tombent à zéro et le texte touche le bord de l'écran. 1328 = 1280 + les
 * deux fois 24 qu'on veut voir.
 *
 * La règle était recopiée mot pour mot dans boutiques.css, marque.css et
 * product-carousel.css, chacune sur son propre sélecteur. La fiche produit en
 * aurait fait une quatrième : elle vit désormais ici, une fois.
 */
/*
 * Mention d'un produit (« Dès 4 ans », « À colorier », « Imprimé en France ») :
 * étiquette blanche, liseré léger, ombre rose décalée.
 * -------------------------------------------------------------------------
 * Le composant « tag » secondaire du Figma. Il servait d'abord au hero de la
 * fiche, le bloc vedette des listings le reprend : la règle vit donc ici, une
 * fois, et non dans product-single.css qui ne se charge que sur les fiches.
 */
.mention {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.75rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid rgb(27 28 80 / 0.1);
	border-radius: 9999px;
	background-color: var(--wp--preset--color--blanc, #fff);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--pink, #f8c9de);
	font-family: var(--wp--preset--font-family--headings);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.2;
	color: var(--wp--preset--color--noir, #1f2937);
}

@media (max-width: 1328px) {
	.u-gouttiere {
		padding-inline: var(--wp--preset--spacing--xl, 1.5rem);
	}
}

/*
 * En mobile, la gouttière revient à la marge globale du site (16, padding
 * racine de theme.json), celle des pages faites de blocs. Sans ce palier, les
 * pages qui s'appuient sur .u-gouttiere (listings, repli de la fiche) gardaient
 * 24 là où tout le reste est à 16.
 */
@media (max-width: 781px) {
	.u-gouttiere {
		padding-inline: var(--wp--style--root--padding-left, 1rem);
	}
}

/*
 * Écart média / texte du bloc natif core/media-text.
 * -------------------------------------------------------------------------
 * Le bloc n'a pas de gouttière : sa grille est en `50% 1fr` et l'espace
 * qu'on croit voir vient d'un `padding: 0 8%` sur la colonne de texte. Un
 * pourcentage, donc un écart qui change avec la largeur de la page.
 *
 * Quand un écart est réglé (cf. inc/media-text.php), on pose une vraie
 * gouttière et on retire ce padding — sinon les deux s'additionnent et le
 * réglage semble ne rien faire à petite valeur.
 *
 * `gap` et non `column-gap` : sous 600 px WordPress empile les deux colonnes,
 * et c'est alors l'écart vertical qui doit valoir le réglage.
 */
.wp-block-media-text.has-drache-gap {
	gap: var(--dda-media-gap, 0);
}

.wp-block-media-text.has-drache-gap > .wp-block-media-text__content {
	padding-inline: 0;
}