/*
 * Ajustements que theme.json ne sait pas exprimer.
 * Tout ce qui peut vivre dans theme.json y vit. Ce fichier reste court.
 */

/* Seuil de cible tactile (WCAG 2.5.8 renforcé, 44 px). Une seule valeur, pour
   que chaque rembourrage calculé à partir d'elle atteigne réellement le seuil :
   mesuré avant, 0,7 rem de rembourrage et 1,3 de hauteur de ligne donnaient
   43 px, un pixel sous la barre, sur le courriel du pied de page et du contenu.
   Le rembourrage calculé donne 44 px en théorie et 43,97 en pratique (taille
   de police fluide, arrondi sous-pixel) : min-height garantit le seuil. */
:root { --uf-tap-size: 44px; }

/* Accessibilité : texte réservé aux lecteurs d'écran, et lien de saut au contenu.
   WordPress ne fournit plus ces classes par défaut dans un thème de blocs. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important;
	top: 0.5rem; left: 0.5rem;
	z-index: 100000;
	width: auto; height: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--burgundy);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
}

/* Accessibilité : un focus visible et cohérent partout, y compris sur les
   éléments WooCommerce qui ne passent pas par le système de blocs. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--burgundy);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Pied de page sur fond bordeaux profond.
   Les liens héritent sinon du bordeaux de marque, illisible sur ce fond :
   contraste mesuré à 1,3:1 là où il en faut 4,5:1. On les passe en blanc,
   distingués du texte courant par le soulignement. */
.wp-block-template-part footer a,
footer.wp-block-group a,
footer.wp-block-template-part a {
	color: var(--wp--preset--color--surface);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.wp-block-template-part footer a:hover,
footer.wp-block-group a:hover,
footer.wp-block-template-part a:hover {
	color: var(--wp--preset--color--burgundy-soft);
}

/* --- Mise en page d'ensemble ------------------------------------------- */

/* Les bandes de section vont d'un bord à l'autre, mais leur contenu reste
   dans la mesure de lecture. Sans ça, un fond coloré s'arrête à 44rem et la
   bande ressemble à une boîte posée au milieu de la page. */
.uf-section > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}
.uf-section > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* --- En-tête ------------------------------------------------------------ */

.uf-header {
	position: relative;
	z-index: 10;
}
/* Le logo est une image large et basse : on la contraint par la hauteur,
   sinon une largeur en pixels l'écrase à quelques pixels de haut. */
.uf-header .wp-block-site-logo img {
	width: auto;
	max-height: 34px;
	height: auto;
}
/* Le lien du logo mesure 168×22 px sur ordinateur et descend à 119×16 px sur
   téléphone : sous le seuil tactile de 44 px sans que la marque en pâtisse.
   On agrandit la zone cliquable par un pseudo-élément invisible plutôt que
   par du remplissage, pour ne pas déplacer le logo ni changer sa taille
   visible. */
.uf-header .wp-block-site-logo a {
	position: relative;
}
.uf-header .wp-block-site-logo a::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 44px;
	min-width: 44px;
}
.uf-header-right {
	gap: clamp(0.75rem, 3vw, 2rem);
	align-items: center;
}

@media (max-width: 781px) {
	.uf-header .wp-block-site-logo img { max-height: 26px; }
	.uf-header-right { gap: 0.75rem; }
	/* Cibles tactiles confortables sur les icônes du panier et du compte. */
	.uf-header-right a,
	.uf-header-right button {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* --- Texte posé sur une image ------------------------------------------- */

/* Règle unique du site : tout texte posé sur une photo (bannière d'accueil,
   bandeau de titre des pages) repose sur un voile papier à 88 %. Le contraste
   ne dépend alors pas de l'image. Calculé sur le pire cas, un pixel noir pur :
   papier à 88 % donne sRGB(220,217,215), soit 13,1:1 pour l'encre, 7,2:1 pour
   le bordeaux et 5,5:1 pour le texte secondaire, tous au-dessus de 4,5:1.
   Alex peut donc remplacer l'image dans l'éditeur sans casser la lisibilité,
   et une page à l'image sombre (Devis) suit la même règle qu'une page à
   l'image claire (À propos). Pas de flou d'arrière-plan : il coûte au rendu
   et n'apporte rien au contraste. */
.uf-voile {
	background: var(--wp--preset--color--paper);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	max-width: 38rem;
	border-radius: 3px;
	padding: var(--wp--preset--spacing--40);
}
.uf-page-tete .uf-voile { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
/* Sur téléphone, 40 px de rembourrage laissaient 247 px au texte : l'accroche
   tenait sur cinq lignes et les boutons de la bannière passaient sous le
   premier écran (mesuré : bas des boutons à 714 px sur un écran de 667). */
@media (max-width: 781px) {
	.uf-voile { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); }
	.uf-page-tete .uf-voile { padding: var(--wp--preset--spacing--20); }
}
/* WordPress espace les blocs racine de 24 px : entre l'en-tête et une bannière
   pleine largeur, cet écart devient une bande papier visible au-dessus de la
   photo. On le retire quand la page s'ouvre sur une bannière. */
.wp-site-blocks > main:has(> .uf-hero:first-child, > .uf-page-tete.wp-block-cover:first-child) {
	margin-block-start: 0;
}
.uf-voile > :first-child { margin-top: 0; }
.uf-voile > :last-child { margin-bottom: 0; }

/* Le bloc Bannière impose 430 px de hauteur minimale : ici la hauteur suit le
   contenu, ni plus (pas de 100vh) ni moins. Le rembourrage vertical vient de
   cette feuille plutôt que du bloc, pour pouvoir le resserrer sur téléphone :
   un style en ligne l'emporterait sur la requête média. */
.uf-hero.wp-block-cover,
.uf-page-tete.wp-block-cover {
	min-height: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
/* Sans image mise en avant, la bande de titre reste une bande, bordeaux pâle. */
.uf-page-tete.wp-block-cover { background-color: var(--wp--preset--color--burgundy-soft); }
@media (max-width: 781px) {
	.uf-hero.wp-block-cover { padding-block: var(--wp--preset--spacing--30); }
	.uf-page-tete.wp-block-cover { padding-block: var(--wp--preset--spacing--40); }
}

/* --- Accueil ------------------------------------------------------------ */

.uf-hero h1 { text-wrap: balance; }
.uf-lede { max-width: 34ch; }

/* Bandeau texture entre les produits et les étapes : une bande fine, jamais
   un pavé. L'image fait 5:1, on borne sa hauteur et on recadre. */
/* Spécificité : WordPress pose `.wp-block-image.alignfull img { height: auto }`,
   mesuré à 288 px de haut à 1440 avant ce renfort. */
.uf-bandeau-texture { margin-block: 0; }
.wp-block-image.uf-bandeau-texture.alignfull img {
	display: block;
	width: 100%;
	height: clamp(88px, 12vw, 200px);
	object-fit: cover;
}

/* Section entreprises : le texte garde une mesure de lecture même quand la
   colonne est plus large que 44rem. */
.uf-b2b .wp-block-column p { max-width: 56ch; }
.uf-b2b-illustration img { display: block; width: 100%; height: auto; }

/* Les étapes sont une séquence réelle, la numérotation dit quelque chose de
   vrai sur le contenu. Les cartes gardent la même hauteur pour que les
   numéros s'alignent. */
/* WordPress empile toutes les colonnes sous 782 px. Ces trois cartes portent
   peu de texte et tiennent très bien côte à côte dès la tablette : les laisser
   s'empiler y donnait une page d'un tiers plus longue pour rien. */
.uf-etapes { align-items: stretch; }
@media (min-width: 720px) {
	.uf-etapes.wp-block-columns:not(.is-not-stacked-on-mobile) {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}
	.uf-etapes .wp-block-column { flex-basis: auto !important; }
}
.uf-etape { display: flex; flex-direction: column; gap: 0.5rem; }
.uf-num {
	margin: 0 0 0.25rem;
	font-variant-numeric: tabular-nums;
}
.uf-etape h3 { margin: 0; }
.uf-etape p:last-child { margin-bottom: 0; }

/* État vide de la boutique : une invitation, pas un trou. */
.uf-vide { background: color-mix(in srgb, var(--wp--preset--color--paper) 70%, transparent); }
.uf-vide p { max-width: 46ch; margin-inline: auto; }

@media (max-width: 781px) {
	.uf-lede { max-width: none; }
	/* L'illustration entreprises est un décor de grand écran : sous 782 px elle
	   pousserait le bouton de devis hors de vue pour rien. */
	.uf-b2b-illustration { display: none; }
	/* Les boutons pleine largeur au doigt, plutôt que deux boutons étroits
	   côte à côte qu'on rate une fois sur deux. */
	.uf-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.uf-hero .wp-block-button__link { display: block; text-align: center; }
}

/* --- Pages de contenu --------------------------------------------------- */

.uf-page-tete h1 { text-wrap: balance; margin: 0; }

/* Mesure de lecture. Mesuré avant : 87 caractères sur la première ligne à
   1440 px (colonne de 704 px), au-dessus des 45 à 75 confortables. L'ancienne
   règle `.entry-content p { max-width: 68ch }` était silencieusement battue par
   la règle de mise en page générée par WordPress (spécificité 0,1,0 contre
   0,0,1) et n'a jamais rien fait. Celle-ci passe devant (0,2,0). La valeur vit
   dans theme.json, settings.custom.measure. Les blocs alignés « large » et
   « pleine largeur » gardent leur largeur : c'est ainsi qu'une image sort de
   la colonne de texte. Le sélecteur `.is-root-container` donne la même mesure
   dans l'éditeur, pour qu'Alex voie ce que verra le client. */
:is(.uf-lecture .entry-content, .editor-styles-wrapper .is-root-container)
	> :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
	max-width: var(--wp--custom--measure);
}

/* Accroche : le premier paragraphe est le point d'entrée du lecteur. Plus
   grand, en Newsreader (déjà chargée pour les titres : aucune police en plus),
   détaché de ce qui suit. Si la page s'ouvre sur une image, le paragraphe qui
   la suit joue ce rôle. Un groupe en tête (l'avis « À rédiger » des pages
   légales) n'est pas une accroche et n'en reçoit pas. */
:is(.uf-page-corps .entry-content, .editor-styles-wrapper .is-root-container)
	> :is(p:first-child, figure:first-child + p, .wp-block-image:first-child + p) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	letter-spacing: -0.005em;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Rythme du texte long. Sans ça, titres et paragraphes se suivent au même
   intervalle et la page se lit comme un bloc compact. Chaque h2 ouvre une
   section : il porte une barre bordeaux courte au-dessus de lui, ce qui donne
   une coupure visible là où un simple blanc ne se voit pas. La barre est un
   pseudo-élément vide, invisible aux lecteurs d'écran. */
.uf-page-corps :where(h2) { margin-top: 3em; margin-bottom: 0.7em; }
.uf-page-corps :where(h2)::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--burgundy);
}
.uf-page-corps :where(h3) { margin-top: 2em;   margin-bottom: 0.4em; }
.uf-page-corps :where(h2, h3):first-child { margin-top: 0; }
.uf-page-corps :where(p, ul, ol) { margin-block: 0 1.1em; }
.uf-page-corps :where(ol) { padding-left: 1.3em; }
.uf-page-corps :where(li) { margin-block: 0.35em; }
.uf-page-corps :where(li)::marker { color: var(--wp--preset--color--burgundy); }
.uf-page-corps :where(hr) { margin-block: 3rem; }

/* Listes de premier niveau : des rangées séparées d'un filet plutôt que des
   puces. Une liste qui décrit quatre machines et leurs matières n'est pas une
   énumération, chaque entrée est une petite fiche. Les listes imbriquées
   gardent leurs puces. */
.uf-page-corps .entry-content > :where(ul:not([class*="is-style-"])) {
	list-style: none;
	padding-left: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.uf-page-corps .entry-content > :where(ul:not([class*="is-style-"])) > li {
	margin: 0;
	padding-block: 0.8em;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Style de bloc « Fiches » (enregistré dans functions.php) : la liste devient
   une grille de cartes, deux par rangée dès la tablette. Elle s'élargit à la
   largeur de contenu standard, sinon deux cartes dans la mesure de lecture
   seraient trop étroites pour une phrase. Alex choisit ce style dans le
   panneau « Styles » du bloc Liste. */
.uf-page-corps .entry-content > ul.is-style-uf-fiches,
.editor-styles-wrapper ul.is-style-uf-fiches {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	max-width: var(--wp--style--global--content-size);
}
ul.is-style-uf-fiches > li {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--burgundy);
	border-radius: 3px;
}
@media (min-width: 720px) {
	ul.is-style-uf-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Images dans le texte. Les blocs Image posés par Alex au fil du contenu :
   coins doux, respiration au-dessus et au-dessous, légende en retrait. Une
   image en pleine largeur perd ses coins (elle touche les bords de l'écran) et
   respire davantage. Une image flottante ne prend jamais plus de la moitié de
   la mesure et s'empile sous 782 px : à cette largeur, un texte qui contourne
   une image donne des lignes de trois mots. */
.uf-page-corps :where(figure.wp-block-image) { margin-block: var(--wp--preset--spacing--40); }
.uf-page-corps :where(figure.wp-block-image) img { border-radius: 3px; }
.uf-page-corps :where(figure.wp-block-image.alignfull) { margin-block: var(--wp--preset--spacing--50); }
.uf-page-corps :where(figure.wp-block-image.alignfull) img { border-radius: 0; }
.uf-page-corps :where(figure.wp-block-image) figcaption {
	margin-top: var(--wp--preset--spacing--10);
	text-align: left;
}
.uf-page-corps :where(figure.wp-block-image.alignleft, figure.wp-block-image.alignright) {
	max-width: 50%;
	margin-block: 0.4em var(--wp--preset--spacing--20);
}
.uf-page-corps :where(figure.wp-block-image.alignleft)  { margin-right: var(--wp--preset--spacing--30); }
.uf-page-corps :where(figure.wp-block-image.alignright) { margin-left:  var(--wp--preset--spacing--30); }
@media (max-width: 781px) {
	.uf-page-corps :where(figure.wp-block-image.alignleft, figure.wp-block-image.alignright) {
		float: none;
		max-width: none;
		margin: var(--wp--preset--spacing--40) 0;
	}
}
/* Un titre qui suit une image n'a pas besoin de ses 3 em de marge : l'image
   fait déjà la coupure, la marge de la figure suffit. */
.uf-page-corps :where(figure.wp-block-image) + :where(h2) { margin-top: 0; }

/* Avis en tête de page : un groupe sur fond bordeaux pâle placé en premier
   (le bandeau « À rédiger » des politiques légales). Il doit se lire comme un
   avertissement voulu, pas comme un défaut d'affichage : bord gauche bordeaux
   épais, texte au-dessus de la mesure. Contraste mesuré : encre sur bordeaux
   pâle 15,6:1, bordeaux sur bordeaux pâle 8,6:1. */
.uf-page-corps .entry-content > :where(.wp-block-group.has-burgundy-soft-background-color:first-child) {
	border-left: 4px solid var(--wp--preset--color--burgundy);
	border-radius: 0 4px 4px 0;
	margin-bottom: var(--wp--preset--spacing--40);
}
.uf-page-corps .entry-content > :where(.wp-block-group.has-burgundy-soft-background-color:first-child) > :first-child { margin-top: 0; }
.uf-page-corps .entry-content > :where(.wp-block-group.has-burgundy-soft-background-color:first-child) > :last-child { margin-bottom: 0; }
.uf-page-corps .entry-content > :where(.wp-block-group.has-burgundy-soft-background-color:first-child) strong {
	color: var(--wp--preset--color--burgundy);
	letter-spacing: 0.02em;
}

/* Un lien courriel dans le contenu est un moyen de contact, pas un lien au fil
   d'une phrase : il se voit (graisse) et, au doigt, il atteint la hauteur
   tactile. Mesuré avant : 123 × 20 px sur téléphone pour info@uniqfab.ca sur
   la page Contact. Pas de changement de taille : CSS ne distingue pas un lien
   seul dans son paragraphe d'un lien inséré dans une phrase (Devis
   entreprise), et une taille différente en pleine phrase casserait la ligne. */
.uf-page-corps .entry-content a[href^="mailto:"] {
	font-weight: 600;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
@media (pointer: coarse) {
	.uf-page-corps .entry-content a[href^="mailto:"],
	.uf-page-corps .entry-content a[href^="tel:"] {
		display: inline-block;
		box-sizing: border-box;
		min-height: var(--uf-tap-size);
		padding-block: calc((var(--uf-tap-size) - 1.3em) / 2);
		line-height: 1.3;
	}
}

/* Tableaux : jamais de débordement horizontal de la page entière. */
.uf-page-corps :where(figure.wp-block-table) { overflow-x: auto; }
.uf-page-corps :where(table) { min-width: 32rem; }

/* --- Boutique et fiches produits ---------------------------------------- */

/* Grille produits : 4 colonnes en grand, 3 en tablette, 2 en mobile.
   Une seule colonne sur téléphone donne une page interminable à faire défiler.

   WooCommerce pose `display: flex` via sa classe `is-flex-container` et pilote
   la largeur par `columns-N`. Mesuré en production : une règle de grille à
   spécificité égale perdait, et les trois produits s'empilaient en pleine
   largeur. On préfixe par la balise `ul` pour passer devant, plutôt que
   d'employer `!important` qui rendrait la règle impossible à surcharger. */
ul.wc-block-product-template,
ul.wp-block-woocommerce-product-template,
ul.wc-block-product-template.is-flex-container,
ul.wp-block-woocommerce-product-template.is-flex-container {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) {
	ul.wc-block-product-template,
	ul.wp-block-woocommerce-product-template,
	ul.wc-block-product-template.is-flex-container,
	ul.wp-block-woocommerce-product-template.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 781px) {
	ul.wc-block-product-template,
	ul.wp-block-woocommerce-product-template,
	ul.wc-block-product-template.is-flex-container,
	ul.wp-block-woocommerce-product-template.is-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* La largeur des fiches vient de la grille, pas de `columns-N`. */
ul.wc-block-product-template > li,
ul.wp-block-woocommerce-product-template > li {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0;
}

/* Une fiche de la grille se tient comme un objet : image carrée, titre,
   prix, bouton alignés d'une carte à l'autre. */
.wc-block-product,
.wp-block-woocommerce-product-template li {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.wc-block-product img,
.wp-block-woocommerce-product-template img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	border-radius: 3px;
	background: var(--wp--preset--color--surface);
}
.wc-block-product .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title { margin: 0.4rem 0 0; }
.wc-block-product .wp-block-woocommerce-product-price { margin: 0; }
.wc-block-product .wp-block-woocommerce-product-button { margin-top: auto; padding-top: 0.6rem; }

/* Le titre d'une fiche de grille est un lien vers le produit. Mesuré au doigt :
   26 px de haut à 768, 40 px à 375, sous le seuil. L'image au-dessus est aussi
   un lien, mais le titre est ce que le pouce vise. */
@media (pointer: coarse) {
	.wc-block-product .wp-block-post-title a,
	.wp-block-woocommerce-product-template .wp-block-post-title a {
		display: inline-block;
		box-sizing: border-box;
		min-height: var(--uf-tap-size);
		padding-block: calc((var(--uf-tap-size) - 1.3em) / 2);
		line-height: 1.3;
	}
}

/* Fiche produit : les deux colonnes s'empilent avant d'être illisibles. */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) { gap: var(--wp--preset--spacing--40); }
	.woocommerce-product-gallery { margin-bottom: 1.5rem; }
}

/* Bouton de zoom de la galerie produit (bloc natif WooCommerce) : mesuré à
   36×36 px, sous le seuil tactile de 44 px alors qu'il flotte seul au-dessus
   de la photo, à portée du pouce sur une fiche produit consultée au doigt. */
.woocommerce-product-gallery__trigger {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Onglets de fiche produit (Description, Information complémentaire, Avis) :
   mesurés à 43 px de haut, sous le seuil de 44 px. */
.woocommerce-tabs ul.tabs li a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* --- Confort tactile ---------------------------------------------------- */

@media (pointer: coarse) {
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-height: 44px;
	}
	/* Les liens de listes serrées sont trop proches pour le doigt. */
	.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		padding-block: 0.5rem;
	}
}

/* --- Respiration entre le contenu et le pied de page -------------------- */

/* Mesuré en production : sur la boutique, le contenu principal se terminait à
   24 px du pied de page, qui lui rentrait dedans. Les marges déclarées dans
   les gabarits ne s'appliquaient pas partout. Une règle globale vaut mieux
   qu'un réglage par gabarit qu'un futur modèle oubliera. */
.wp-site-blocks > main,
main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--60);
}
.wp-site-blocks > footer,
footer.wp-block-group,
footer.wp-block-template-part > .wp-block-group {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

/* --- Le tiroir du panier ne doit pas élargir la page -------------------- */

/* Mesuré : le tiroir hors écran se garait à 750 px sur un écran de 375, soit
   le double de la largeur. `overflow-x: hidden` sur le corps masquait le
   symptôme sans régler la cause, et certains navigateurs mobiles dézooment
   quand même la page pour la faire tenir. On le sort du flux du document. */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-drawer__screen-overlay {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	max-width: 100vw;
}
.wc-block-components-drawer__screen-overlay {
	inset-inline-start: 0;
}

/* --- Listes de liens : cibles tactiles ---------------------------------- */

/* L'exception WCAG 2.5.8 vaut pour un lien au fil d'une phrase, pas pour une
   liste de liens empilés qu'on vise au doigt. Les politiques du pied de page
   mesuraient 20 px de haut, soit moins de la moitié du seuil, et ce sont
   précisément les pages que Google exige accessibles. */
@media (pointer: coarse) {
	footer li > a,
	.wp-block-list li > a,
	.woocommerce-breadcrumb a {
		display: inline-block;
		box-sizing: border-box;
		min-height: var(--uf-tap-size);
		padding-block: calc((var(--uf-tap-size) - 1.3em) / 2);
		line-height: 1.3;
	}
	/* L'adresse courriel du pied de page est seule sur sa ligne et sert de
	   moyen de contact, pas de lien au fil d'une phrase. Google exige qu'un
	   moyen de contact soit joignable : autant qu'il soit cliquable au doigt. */
	footer p > a[href^="mailto:"],
	footer p > a[href^="tel:"] {
		display: inline-block;
		box-sizing: border-box;
		min-height: var(--uf-tap-size);
		padding-block: calc((var(--uf-tap-size) - 1.3em) / 2);
		line-height: 1.3;
	}
	footer ul,
	footer ol {
		display: flex;
		flex-direction: column;
	}
	/* Le soulignement reste collé au texte et ne descend pas avec le
	   remplissage, sinon le lien paraît flotter. */
	footer li > a { text-underline-offset: 0.2em; }
}

/* --- Rien ne déborde ----------------------------------------------------- */

:where(img, video, iframe, svg) { max-width: 100%; height: auto; }
:where(pre, code) { overflow-x: auto; max-width: 100%; }
/* Volontairement PAS d'`overflow-x: hidden` sur le corps : il masque un
   débordement au lieu de le corriger, et le rend invisible aux mesures.
   Un débordement doit se voir pour être réparé. */

/* Un titre généré à partir d'une saisie cliente (recherche, titre de produit
   long) peut être un seul « mot » insécable, espace insécable comprise entre
   les guillemets français. Sans ce filet, "Résultats de recherche pour :
   « untermotexagérémentlong »" pousse la page hors de l'écran à 375 px au
   lieu de casser la ligne. Mesuré : 71 px de débordement horizontal avant ce
   correctif, sur une recherche avec un terme de 22 caractères. */
:where(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }

/* --- WooCommerce --------------------------------------------------------- */

/* Les champs de formulaire de WooCommerce n'héritent pas de theme.json. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input[type="number"] {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* Les boutons de WooCommerce alignés sur le bouton du thème. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.85rem 1.75rem;
	border-radius: 2px;
	background: var(--wp--preset--color--burgundy);
	color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--burgundy);
	transition: background-color 120ms ease, border-color 120ms ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--wp--preset--color--burgundy-deep);
	border-color: var(--wp--preset--color--burgundy-deep);
	color: var(--wp--preset--color--surface);
}

/* Messages WooCommerce : on remplace le vert par défaut par la couleur de marque. */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--burgundy);
	background: var(--wp--preset--color--burgundy-soft);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--burgundy);
}

/* Prix : chiffres tabulaires, pour que les colonnes s'alignent. */
.woocommerce .price,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* --- Mouvement ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}