/**
 * RIGIDWAVE — finitions.
 *
 * Tout ce qui peut être exprimé dans theme.json y est déjà : couleurs, polices,
 * tailles, espacements, styles de boutons et de liens. Ce fichier ne traite que
 * ce que theme.json ne sait pas faire — positionnements, pictogrammes, halos,
 * et l'habillage des blocs WooCommerce en thème sombre.
 *
 * Les variables --wp--preset--* et --wp--custom--* proviennent de theme.json.
 */

/* -------------------------------------------------------------------------
 * 1. Base
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Les ancres ne doivent pas passer sous l'en-tête collant. */
	scroll-padding-top: 6rem;
}

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
 * 2. Pictogrammes
 *
 * Les icônes sont des masques CSS : une seule règle, la couleur suit le thème,
 * aucune requête réseau et aucun balisage supplémentaire dans l'éditeur.
 * Les tracés (--picto) sont définis tout en bas de ce fichier.
 * ---------------------------------------------------------------------- */

.picto {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.picto::before,
.picto-carte::before,
.picto-bloc::before {
	content: "";
	flex: none;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--picto) center / contain no-repeat;
	mask: var(--picto) center / contain no-repeat;
}

.picto::before {
	inline-size: 1.15em;
	block-size: 1.15em;
}

/* Icône posée au-dessus du titre, dans les cartes d'arguments. */
.picto-carte::before {
	display: block;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	margin-block-end: 1.25rem;
}

/* Icône à gauche d'un bloc de deux lignes (garanties). */
.picto-bloc {
	position: relative;
	padding-inline-start: 2rem;
}

.picto-bloc::before {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15rem;
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

/* --- Bandeau d'annonce ------------------------------------------------

   Un paragraphe en display:inline-flex reste un élément de ligne : la classe
   has-text-align-center de WordPress n'a alors aucune prise sur lui, et le
   texte restait collé à gauche. On repasse en flex pour pouvoir le centrer.
   Les valeurs reprennent celles de la maquette : 11 px, interlettrage 0,2em,
   icône de 14 px, espace de 8 px. */
.rigidwave-annonce .picto.has-text-align-center {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.rigidwave-annonce .picto::before {
	background-color: currentColor;
	inline-size: 0.875rem;
	block-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * 3. Styles de blocs enregistrés dans functions.php
 * ---------------------------------------------------------------------- */

/* Surtitre : petit filet horizontal puis le libellé en capitales espacées. */
.is-style-surtitre {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--lettrage--eyebrow);
}

.is-style-surtitre::before {
	content: "";
	flex: none;
	inline-size: 1.5rem;
	block-size: 1px;
	background-color: currentColor;
	opacity: 0.6;
}

.is-style-surtitre.has-text-align-center {
	justify-content: center;
}

.is-style-mono {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--lettrage--label);
}

.rigidwave-mono {
	font-family: var(--wp--preset--font-family--mono);
}

.is-style-carte {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rayon--bloc);
}

.is-style-carte-active {
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}

.is-style-verre {
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* Halo cyan diffus dans un angle du bloc. */
.is-style-lueur {
	position: relative;
	overflow: hidden;
}

.is-style-lueur::after {
	content: "";
	position: absolute;
	inset-block-start: -6rem;
	inset-inline-end: -6rem;
	inline-size: 18rem;
	block-size: 18rem;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
	filter: blur(100px);
	pointer-events: none;
}

.is-style-lueur > * {
	position: relative;
	z-index: 1;
}

.is-style-compact .wp-block-button__link {
	padding-block: 0.55rem;
	padding-inline: 1.25rem;
	font-size: 0.875rem;
}

/* Bouton secondaire : contour cyan discret, plein au survol. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	border-color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * 4. En-tête et pied de page
 * ---------------------------------------------------------------------- */

.rigidwave-entete {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
}

.rigidwave-marque .wp-block-site-title {
	margin: 0;
	white-space: nowrap;
}

.rigidwave-nav .wp-block-navigation-item__content {
	transition: color 0.2s ease;
}

.rigidwave-liens li {
	list-style: none;
}

.rigidwave-liens a,
.rigidwave-liens-legaux a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.rigidwave-liens a:hover,
.rigidwave-liens-legaux a:hover {
	color: var(--wp--preset--color--contrast);
}

.rigidwave-pied .rigidwave-liens {
	padding-inline-start: 0;
}

/* -------------------------------------------------------------------------
 * 5. Hero
 * ---------------------------------------------------------------------- */

.rigidwave-hero {
	position: relative;
	isolation: isolate;
}

/* Halo cyan flouté derrière l'accroche. */
.rigidwave-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: -10rem;
	inset-inline-end: 15%;
	inline-size: 24rem;
	block-size: 24rem;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	filter: blur(120px);
	pointer-events: none;
}

.rigidwave-hero-media {
	position: relative;
}

.rigidwave-hero-visuel {
	position: relative;
	margin: 0;
}

.rigidwave-hero-visuel img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--rayon--large);
}

/* Voile bas pour asseoir l'image sur le fond. */
.rigidwave-hero-visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--rayon--large);
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent), transparent 60%);
	pointer-events: none;
}

.rigidwave-fiche-flottante {
	position: absolute;
	inset-block-end: 2rem;
	inset-inline-start: -1rem;
	max-inline-size: 14rem;
	box-shadow: var(--wp--preset--shadow--flottant);
}

.rigidwave-etoiles {
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.08em;
}

/* Les trois chiffres clés restent alignés, même sur petit écran. */
.rigidwave-chiffres {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
}

.rigidwave-chiffres > .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

/* -------------------------------------------------------------------------
 * 6. Cartes de contenu
 * ---------------------------------------------------------------------- */

.rigidwave-cartes-tech > .wp-block-column > .wp-block-group,
.rigidwave-cartes-tailles > .wp-block-column > .wp-block-group {
	block-size: 100%;
}

.rigidwave-carte-taille {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* La disposition « contenu contraint » de WordPress pose margin-inline:auto sur
   les enfants. Sur un conteneur flex vertical, ces marges automatiques centrent
   chaque enfant au lieu de l'étirer : le contenu de la carte partait au centre.
   On les neutralise pour retrouver l'alignement à gauche de la maquette. */
.rigidwave-carte-taille > * {
	margin-inline: 0;
	max-inline-size: none;
	inline-size: 100%;
}

.rigidwave-carte-taille .wp-block-buttons {
	justify-content: stretch;
}

.rigidwave-carte-taille .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
}

.rigidwave-carte-taille.est-populaire {
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
}

/* Pastille « Populaire » sur le format le plus vendu. */
.rigidwave-carte-taille.est-populaire::after {
	content: "Populaire";
	position: absolute;
	inset-block-start: -0.6rem;
	inset-inline-end: 1.25rem;
	padding: 0.15rem 0.6rem;
	border-radius: var(--wp--custom--rayon--pilule);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rigidwave-prix-carte {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.rigidwave-prix-carte s {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.rigidwave-panneau-tech {
	overflow: hidden;
}

.rigidwave-panneau-visuel {
	position: relative;
	min-block-size: 16rem;
}

.rigidwave-panneau-visuel figure,
.rigidwave-panneau-visuel img {
	block-size: 100%;
	inline-size: 100%;
	margin: 0;
	object-fit: cover;
}

/* Tableaux de spécifications : un filet par ligne, valeurs en chasse fixe. */
.rigidwave-specs table {
	inline-size: 100%;
	border-collapse: collapse;
}

.rigidwave-specs td {
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding: 0.85rem 0;
	vertical-align: baseline;
}

.rigidwave-specs tr:last-child td {
	border-block-end: 0;
}

.rigidwave-specs td:first-child {
	color: var(--wp--preset--color--muted);
}

.rigidwave-specs td:last-child {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
}


/* Garanties : grille souple plutôt que colonnes fixes. Dans le bloc d'achat
   la zone est étroite (2 par ligne), pleine largeur elle en tient 4.
   Le calcul se fait sur la largeur du conteneur, pas sur celle de l'écran. */
.rigidwave-garanties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.rigidwave-garanties > .wp-block-column {
	flex-basis: auto;
	inline-size: auto;
}

/* -------------------------------------------------------------------------
 * 7. FAQ — bloc Détails du cœur de WordPress
 * ---------------------------------------------------------------------- */

.is-style-faq {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.is-style-faq:first-of-type {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.is-style-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 600;
	list-style: none;
	transition: color 0.2s ease;
}

.is-style-faq summary::-webkit-details-marker {
	display: none;
}

.is-style-faq summary:hover {
	color: var(--wp--preset--color--primary);
}

.is-style-faq summary::after {
	content: "";
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--picto-chevron) center / contain no-repeat;
	mask: var(--picto-chevron) center / contain no-repeat;
	transition: transform 0.3s ease;
}

.is-style-faq[open] summary::after {
	transform: rotate(180deg);
}

.is-style-faq > :not(summary) {
	padding-block-end: 1.25rem;
	padding-inline-end: 2rem;
}

/* -------------------------------------------------------------------------
 * 8. Blocs WooCommerce — page produit
 * ---------------------------------------------------------------------- */

/* Galerie classique de WooCommerce (page produit) : grand packshot sur fond
   clair, vignettes alignées dessous, comme dans la maquette.

   Les !important ne sont pas de confort : flexslider écrit des largeurs en
   ligne sur les vignettes au chargement, et la feuille de WooCommerce est
   enfilée après celle du thème. Sans eux, les vignettes retombent à 100 px. */
.rigidwave-galerie .flex-viewport,
.rigidwave-galerie .woocommerce-product-gallery__wrapper {
	background: var(--wp--preset--gradient--packshot);
	border-radius: var(--wp--custom--rayon--bloc);
	margin: 0;
}

.rigidwave-galerie .woocommerce-product-gallery__image img {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	display: block;
	padding: var(--wp--preset--spacing--40);
}

.rigidwave-galerie ol.flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
}

.rigidwave-galerie ol.flex-control-thumbs li {
	inline-size: auto !important;
	margin: 0 !important;
	float: none !important;
	list-style: none;
}

.rigidwave-galerie ol.flex-control-thumbs li img {
	inline-size: 100% !important;
	block-size: auto !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--rayon--carte);
	background-color: var(--wp--preset--color--surface);
	opacity: 0.5;
	transition: opacity 0.2s ease;
	cursor: pointer;
}

.rigidwave-galerie ol.flex-control-thumbs li img.flex-active,
.rigidwave-galerie ol.flex-control-thumbs li img:hover {
	opacity: 1;
}

/* Loupe de zoom : la puce ronde par défaut jure sur fond sombre. */
.rigidwave-galerie .woocommerce-product-gallery__trigger {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--rayon--pilule);
}

/* Badge « Promo » classique : la pastille jaune de WooCommerce devient cyan. */
.onsale,
.woocommerce span.onsale {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-radius: var(--wp--custom--rayon--pilule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	min-block-size: 0;
	min-inline-size: 0;
	line-height: 1;
	padding: 0.4rem 0.8rem;
}

/* Dans la maquette la galerie reste en place pendant qu'on parcourt le
   bloc d'achat. Uniquement au-delà du point de bascule des colonnes, sans
   quoi elle se collerait au-dessus du texte sur mobile. */
@media (min-width: 782px) {
	.rigidwave-galerie {
		position: sticky;
		inset-block-start: 7rem;
		align-self: flex-start;
	}
}

.rigidwave-fiche-achat .wp-block-post-title {
	margin-block: 0.5rem 0;
}

.rigidwave-ligne-prix {
	align-items: baseline;
}

.rigidwave-ligne-prix .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

.wc-block-components-product-price del,
.woocommerce-Price-amount del {
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	font-weight: 400;
	margin-inline-end: 0.35rem;
}

.wc-block-components-product-price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* Badge de remise : pastille cyan translucide. */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: var(--wp--custom--rayon--pilule);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: none;
}

/* --- Sélecteur de taille : les pastilles natives, habillées en cartes ---- */

.wc-block-product-filter-chips__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.75rem;
}

.wc-block-product-filter-chips__item {
	display: block;
	inline-size: 100%;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rayon--carte);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wc-block-product-filter-chips__item:hover:not([disabled]) {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}

.wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

.wc-block-product-filter-chips__item[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.wc-block-product-filter-chips__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* --- Quantité et bouton d'ajout --------------------------------------- */

.wc-block-add-to-cart-with-options__quantity-selector,
.wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rayon--pilule);
	background-color: var(--wp--preset--color--surface);
	overflow: hidden;
}

.wc-block-components-quantity-selector input,
.wc-block-add-to-cart-with-options__quantity-selector input {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	border: 0;
}

.wc-block-add-to-cart-with-options .wp-block-button__link,
.wc-block-components-button:not(.is-link) {
	border-radius: var(--wp--custom--rayon--pilule);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-weight: 600;
}

.wc-block-add-to-cart-with-options {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --- Onglets de détails produit --------------------------------------- */

.wp-block-woocommerce-product-details .wc-tabs,
.wp-block-woocommerce-product-details .wc-tabs li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-product-details .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	margin-block-end: var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-product-details .wc-tabs a {
	display: inline-block;
	padding-block: 0.75rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: var(--wp--custom--lettrage--label);
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-woocommerce-product-details .wc-tabs .active a {
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--primary);
}

.woocommerce-product-attributes {
	inline-size: 100%;
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding: 0.85rem 0;
	text-align: start;
}

.woocommerce-product-attributes th {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.woocommerce-product-attributes td {
	font-family: var(--wp--preset--font-family--mono);
}

.woocommerce-product-attributes td p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 9. Avis clients
 * ---------------------------------------------------------------------- */

.rigidwave-avis .wc-block-review-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.rigidwave-avis .wc-block-review-list-item__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rayon--bloc);
	background-color: var(--wp--preset--color--surface);
}

/* Le bloc imbrique note et auteur dans deux conteneurs, tous deux placés
   avant le texte. display:contents les efface de la mise en page pour que
   note, citation et signature deviennent frères : on peut alors les ordonner
   comme la maquette — étoiles en haut, signature détachée en bas. */
.rigidwave-avis .wc-block-review-list-item__info,
.rigidwave-avis .wc-block-review-list-item__meta {
	display: contents;
}

.rigidwave-avis .wc-block-review-list-item__rating {
	order: 1;
}

.rigidwave-avis .wc-block-review-list-item__text {
	order: 2;
	flex: 1;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.rigidwave-avis .wc-block-review-list-item__text p {
	margin: 0;
}

.rigidwave-avis .wc-block-review-list-item__author {
	order: 3;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: 0.875rem;
	font-weight: 500;
}

/* Les étoiles de WooCommerce sont orange par défaut : on les passe au cyan. */
.rigidwave-avis .wc-block-review-list-item__rating__stars,
.rigidwave-avis .wc-block-review-list-item__rating__stars::before,
.rigidwave-avis .wc-block-review-list-item__rating__stars span,
.rigidwave-avis .wc-block-review-list-item__rating__stars span::before {
	color: var(--wp--preset--color--primary);
}

/* Même traitement pour les étoiles de la fiche produit. */
.wc-block-components-product-rating__stars,
.wc-block-components-product-rating__stars span,
.woocommerce .star-rating,
.woocommerce .star-rating span {
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * 10. Newsletter
 * ---------------------------------------------------------------------- */

.rigidwave-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

.rigidwave-newsletter input[type="email"] {
	flex: 1 1 16rem;
	min-inline-size: 0;
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rayon--pilule);
	background-color: var(--wp--preset--color--field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	transition: border-color 0.2s ease;
}

.rigidwave-newsletter input[type="email"]::placeholder {
	color: var(--wp--preset--color--muted);
}

.rigidwave-newsletter input[type="email"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.rigidwave-newsletter button {
	border: 0;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 11. Barre d'achat flottante
 * ---------------------------------------------------------------------- */

.rigidwave-barre-achat {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.rigidwave-barre-achat.est-visible {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rigidwave-barre-achat {
		transition: none;
	}
}

.rigidwave-barre-produit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* Vignette du produit, comme dans la maquette. */
.rigidwave-barre-vignette {
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	margin: 0;
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--wp--preset--gradient--packshot);
}

.rigidwave-barre-vignette img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: 0.15rem;
}

@media (max-width: 480px) {
	.rigidwave-barre-vignette {
		display: none;
	}
}

.rigidwave-barre-produit .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

.rigidwave-barre-produit .wc-block-components-product-price {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
}

/* Dans l'éditeur, la barre doit rester dans le flux pour être modifiable. */
.editor-styles-wrapper .rigidwave-barre-achat {
	position: static;
	transform: none;
}

/* -------------------------------------------------------------------------
 * 12. Panier, commande et compte client
 *
 * WooCommerce embarque un mode sombre pour ses formulaires : le réglage
 * « Champs sombres » des blocs Panier et Commande, activé par le script de
 * peuplement. Il couvre les champs de saisie ; il reste à traiter ce qu'il
 * ne prend pas en charge — encadrés, totaux, notifications — et les pages
 * de compte, qui reposent encore sur les gabarits classiques.
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--line);
}

.wc-block-cart-items th,
.wc-block-cart-items td,
.wc-block-cart-items tr {
	border-color: var(--wp--preset--color--line);
	color: inherit;
}

/* Encadré du récapitulatif de commande. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rayon--bloc);
	padding: var(--wp--preset--spacing--30);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-checkout-step__description,
.wc-block-components-totals-item__label,
.wc-block-components-order-summary-item__description {
	color: var(--wp--preset--color--muted);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-panel__button,
.wc-block-components-checkbox__label {
	color: var(--wp--preset--color--contrast);
}

/* --- Notifications ----------------------------------------------------

   Les bandeaux de WooCommerce sont pensés pour un fond clair : texte pâle
   sur pastel, donc illisibles ici. On garde le code couleur sémantique
   (vert, rouge, cyan) mais en fond sombre teinté. */
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--rayon--carte);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-notice-banner.is-success {
	border-color: #3fb984;
	background-color: color-mix(in srgb, #3fb984 14%, var(--wp--preset--color--base));
}

.wc-block-components-notice-banner.is-error {
	border-color: var(--wp--preset--color--danger);
	background-color: color-mix(in srgb, var(--wp--preset--color--danger) 14%, var(--wp--preset--color--base));
}

.wc-block-components-notice-banner.is-warning {
	border-color: #e0a63a;
	background-color: color-mix(in srgb, #e0a63a 14%, var(--wp--preset--color--base));
}

.wc-block-components-notice-banner.is-info {
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--base));
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a,
.wc-block-components-notice-banner a {
	color: var(--wp--preset--color--contrast);
}

/* Liens des bandeaux.

   WooCommerce y glisse aussi des boutons « wc-forward » (« Voir le panier »)
   placés hors du conteneur de contenu, avec une couleur pensée pour un fond
   clair. Le !important est ici un correctif de lisibilité : sans lui le lien
   reste illisible sur le fond teinté. */
.wc-block-components-notice-banner a,
.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner__content a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: underline;
	background: none;
	font-weight: 500;
}

/* Notifications des gabarits classiques (pages de compte). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-block-start: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--rayon--carte);
	list-style: none;
}

.woocommerce-error {
	border-block-start-color: var(--wp--preset--color--danger);
}

/* --- Pages de compte --------------------------------------------------

   Connexion, inscription et tableau de bord passent encore par les
   gabarits PHP de WooCommerce : leurs champs ne bénéficient pas du mode
   sombre des blocs et doivent être habillés ici. */
.woocommerce-account .woocommerce {
	color: var(--wp--preset--color--contrast);
}

.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce-EditAccountForm {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rayon--bloc);
	background-color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--40);
}

.woocommerce form .form-row label,
.woocommerce-form__label,
.woocommerce-form-login__rememberme {
	display: block;
	margin-block-end: 0.35rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-Input--text,
.woocommerce-Input--email,
.woocommerce-Input--password {
	inline-size: 100%;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit,
.woocommerce-Button,
.woocommerce button.button,
.woocommerce a.button {
	border: 0;
	border-radius: var(--wp--custom--rayon--pilule);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	padding: 0.8rem 1.75rem;
	cursor: pointer;
}

/* Menu latéral du compte. */
.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding-block: 0.75rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--primary);
}

/* --- Tiroir du panier -------------------------------------------------

   Le mini-panier est réglé sur « ouvrir le tiroir à l'ajout » (réglage natif
   addToCartBehaviour du bloc) : après un ajout, le client voit son panier et
   les deux suites possibles — « Voir mon panier » et « Valider la commande » —
   sans quitter la page.

   Attention au sélecteur : wc-block-mini-cart__drawer et
   wc-block-components-drawer sont portées par le même élément, pas imbriquées. */
.wc-block-mini-cart__drawer.wc-block-components-drawer,
.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wc-block-mini-cart__title,
.wc-block-mini-cart__title h2 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--contrast);
}

.wc-block-mini-cart__footer {
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

/* Les deux boutons du pied reprennent la forme du thème : plein cyan pour la
   commande, contour discret pour le panier. On cible le bouton générique de
   WooCommerce plutôt que ses classes de position, plus stables d'une version
   à l'autre. */
.wc-block-mini-cart__drawer .wc-block-components-button {
	border-radius: var(--wp--custom--rayon--pilule);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

.wc-block-mini-cart__drawer .wc-block-components-button.contained {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.wc-block-mini-cart__drawer .wc-block-components-button.outlined {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
}

.wc-block-mini-cart__drawer .wc-block-components-button.outlined:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

.wc-block-mini-cart-items,
.wc-block-mini-cart__items,
.wc-block-cart-item__wrap {
	color: var(--wp--preset--color--contrast);
}

/* Icône de compte dans l'en-tête, alignée sur celle du panier. */
.rigidwave-compte a {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--contrast);
}

.rigidwave-compte svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

/* -------------------------------------------------------------------------
 * 13. Apparitions au défilement
 *
 * Animations pilotées par la position dans le viewport : aucun JavaScript,
 * aucun observateur. Les navigateurs sans support affichent le contenu tel quel.
 * ---------------------------------------------------------------------- */

@keyframes rigidwave-apparition {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.rigidwave-cartes-tech > .wp-block-column,
		.rigidwave-cartes-tailles > .wp-block-column,
		.rigidwave-panneau-tech,
		.rigidwave-avis .wc-block-review-list-item__item {
			animation: rigidwave-apparition linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 28%;
		}
	}
}

/* -------------------------------------------------------------------------
 * 14. Adaptations petits écrans
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.rigidwave-fiche-flottante {
		position: static;
		max-inline-size: none;
		margin-block-start: var(--wp--preset--spacing--20);
	}

	.rigidwave-hero::before {
		inline-size: 14rem;
		block-size: 14rem;
	}

	.rigidwave-entete .wp-block-navigation {
		order: 3;
	}

	/* Le sélecteur .wp-block-buttons > .wp-block-button du cœur est plus
	   spécifique qu'une simple classe : il faut au moins trois niveaux
	   pour masquer ce bouton sur mobile. */
	.rigidwave-entete .wp-block-buttons > .wp-block-button.rigidwave-cta-entete {
		display: none;
	}

	.rigidwave-annonce p {
		letter-spacing: 0.12em;
		font-size: 0.625rem;
	}

	.rigidwave-panneau-visuel {
		min-block-size: 12rem;
	}

	.rigidwave-panneau-visuel img {
		max-block-size: 14rem;
	}
}

@media (max-width: 480px) {
	.rigidwave-chiffres {
		gap: var(--wp--preset--spacing--20);
	}

	.rigidwave-barre-achat .rigidwave-barre-produit .wp-block-post-title {
		font-size: 0.8125rem;
	}
}


/* --- Galerie : grand packshot, vignettes en dessous ------------------- */

/* WooCommerce dispose vignettes et grande image côte à côte. La maquette
   veut l'inverse : image pleine largeur, vignettes en ligne dessous.
   Les sélecteurs sont portés par .rigidwave-galerie pour passer devant
   la feuille de WooCommerce, chargée après celle du thème. */
.rigidwave-galerie .wp-block-woocommerce-product-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.rigidwave-galerie .wc-block-product-gallery-large-image {
	inline-size: 100%;
	max-inline-size: none;
	background: var(--wp--preset--gradient--packshot);
	border-radius: var(--wp--custom--rayon--bloc);
	overflow: hidden;
}

.rigidwave-galerie .wc-block-product-gallery-large-image__container {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rigidwave-galerie .wc-block-product-gallery-large-image img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: var(--wp--preset--spacing--40);
}

.rigidwave-galerie .wc-block-product-gallery-thumbnails {
	inline-size: 100%;
	max-inline-size: none;
}

.rigidwave-galerie .wc-block-product-gallery-thumbnails__scrollable {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--20);
	overflow: visible;
}

.rigidwave-galerie .wc-block-product-gallery-thumbnails__thumbnail img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--rayon--carte);
	background-color: var(--wp--preset--color--surface);
}

.rigidwave-galerie .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* --- Sélecteur de taille : trois cartes côte à côte ------------------- */

/* WooCommerce empile ses pastilles en colonne et n'affiche que le nom de
   l'option. La maquette veut une carte par format. Le contenu (accroche,
   tarif, badge « Populaire ») est ajouté au rendu par functions.php ; ici on
   ne fait que la mise en forme.
   Les !important passent devant la feuille de WooCommerce, chargée après. */
/* Le sélecteur ne s'étirait pas : ses conteneurs restent en largeur
   automatique tant qu'on ne l'impose pas, et les cartes se retrouvaient
   trop étroites pour loger le nom à côté de la coche. */
.wc-block-add-to-cart-with-options .wc-block-product-filter-chips,
.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__fieldset,
.wc-block-add-to-cart-with-options .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute > .wp-block-group {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__items {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	overflow: visible;
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item {
	position: relative;
	display: block !important;
	inline-size: 100% !important;
	max-inline-size: none !important;
	padding: 1rem;
	/* Place réservée pour la coche, sur toutes les cartes : sans cela la
	   largeur du texte changerait au moment de la sélection. */
	padding-inline-end: 2.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.75rem;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	text-align: start;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__label,
.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__text {
	display: block;
	color: var(--wp--preset--color--contrast);
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Accroche et tarif arrivent par pseudo-éléments : functions.php génère
   leur contenu, ils survivent au re-rendu du bloc côté client. */
.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__label::after {
	display: block;
	margin-block-start: 0.15rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item::after {
	display: block;
	margin-block-start: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

/* Badge « Populaire », débordant du coin supérieur de la carte. */
.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item::before {
	position: absolute;
	inset-block-start: -0.55rem;
	inset-inline-end: 0.75rem;
	padding: 0.1rem 0.5rem;
	border-radius: var(--wp--custom--rayon--pilule);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item:hover:not([disabled]) {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item[aria-checked=true] {
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

/* Pastille de validation sur le format choisi. Elle passe par une image de
   fond, et non un pseudo-élément : les deux sont déjà pris par l'accroche,
   le tarif et le badge. */
.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item[aria-checked=true] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22%2334e0e6%22%2F%3E%3Cpath%20d%3D%22M5.5%2010.2l3%203%206-6%22%20fill%3D%22none%22%20stroke%3D%22%23032027%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem top 0.7rem;
	background-size: 1.25rem 1.25rem;
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Sous 640 px la maquette repasse les formats les uns sous les autres. */
@media (max-width: 639px) {
	.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__items {
		grid-template-columns: 1fr;
	}
}

/* Intitulé « Taille » au-dessus des pastilles. */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: var(--wp--custom--lettrage--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Description de la variation choisie. */
.wp-block-woocommerce-add-to-cart-with-options-variation-description {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}
/* -------------------------------------------------------------------------
 * 15. Tracés des pictogrammes (icônes Lucide, licence ISC)
 * ---------------------------------------------------------------------- */
.picto--truck  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2018H9%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%20%2F%3E%20%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.picto--shield  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%20%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.picto--timer  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cline%20x1%3D%2210%22%20x2%3D%2214%22%20y1%3D%222%22%20y2%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2215%22%20y1%3D%2214%22%20y2%3D%2211%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%228%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.picto--layers  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83z%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2012%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2017a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2017%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.picto--ruler  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M21.3%2015.3a2.4%202.4%200%200%201%200%203.4l-2.6%202.6a2.4%202.4%200%200%201-3.4%200L2.7%208.7a2.41%202.41%200%200%201%200-3.4l2.6-2.6a2.41%202.41%200%200%201%203.4%200Z%22%20%2F%3E%20%3Cpath%20d%3D%22m14.5%2012.5%202-2%22%20%2F%3E%20%3Cpath%20d%3D%22m11.5%209.5%202-2%22%20%2F%3E%20%3Cpath%20d%3D%22m8.5%206.5%202-2%22%20%2F%3E%20%3Cpath%20d%3D%22m17.5%2015.5%202-2%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.picto--star  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.525%202.295a.53.53%200%200%201%20.95%200l2.31%204.679a2.123%202.123%200%200%200%201.595%201.16l5.166.756a.53.53%200%200%201%20.294.904l-3.736%203.638a2.123%202.123%200%200%200-.611%201.878l.882%205.14a.53.53%200%200%201-.771.56l-4.618-2.428a2.122%202.122%200%200%200-1.973%200L6.396%2021.01a.53.53%200%200%201-.77-.56l.881-5.139a2.122%202.122%200%200%200-.611-1.879L2.16%209.795a.53.53%200%200%201%20.294-.906l5.165-.755a2.122%202.122%200%200%200%201.597-1.16z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.picto--waves  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M2%2012q2.5%202%205%200t5%200%205%200%205%200%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2019q2.5%202%205%200t5%200%205%200%205%200%22%20%2F%3E%20%3Cpath%20d%3D%22M2%205q2.5%202%205%200t5%200%205%200%205%200%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.picto--check  { --picto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20%2F%3E%20%3C%2Fsvg%3E"); }

.is-style-faq { --picto-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m6%209%206%206%206-6%22%20%2F%3E%20%3C%2Fsvg%3E"); }