/* ============================================================================
   H12, page produit : WooCommerce + Barn2 Product Options, habillés H12.
   Barn2 rend ses champs en .wpo-* ; on les stylise pour coller au design.
   ========================================================================== */

/* ---- Fil d'Ariane / titre ---- */
.h12-product__bar { padding: 26px 40px 4px; }
.h12-product__crumbs { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--h12-text-3); }
.h12-product__crumbs a { color: var(--h12-text-2); }
.h12-product__crumbs a:hover { color: var(--h12-red); }

/* ---- Notices Woo (ex. « ajouté au panier ») en bannière H12 ---- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce div.product > .woocommerce-notices-wrapper,
.h12-product .woocommerce-notices-wrapper { margin: 0 0 26px; }
.h12-product .woocommerce-message,
.h12-product .woocommerce-info,
.h12-product .woocommerce-error {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
	background: var(--h12-ok-bg); border: var(--h12-bd); border-left: 4px solid var(--h12-ok-text);
	border-radius: var(--h12-radius); padding: 15px 20px; margin: 0 0 26px;
	font-size: 14px; font-weight: 600; color: var(--h12-ink); list-style: none;
}
.h12-product .woocommerce-info { border-left-color: var(--h12-red); background: #fff; }
.h12-product .woocommerce-error { border-left-color: var(--h12-red); background: #FDECEC; }
.h12-product .woocommerce-message::before,
.h12-product .woocommerce-info::before {
	content: "\2713"; flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--h12-ok-text); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700;
}
.h12-product .woocommerce-info::before { content: "\2139"; background: var(--h12-red); }
.h12-product .woocommerce-message .button,
.h12-product .woocommerce-message a.wc-forward {
	margin-left: auto; order: 3; font-family: var(--h12-font-body); font-weight: 800; font-size: 12px;
	text-transform: uppercase; letter-spacing: .04em; background: var(--h12-ink); color: #fff;
	border: none; border-radius: var(--h12-radius-sm); padding: 10px 18px; text-decoration: none;
	transition: background var(--h12-t-fast); line-height: 1.2;
}
.h12-product .woocommerce-message .button:hover,
.h12-product .woocommerce-message a.wc-forward:hover { background: #000; }

/* ---- Mise en page 2 colonnes (aperçu | options) ---- */
.woocommerce div.product {
	display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 44px; align-items: start; margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery {
	width: 100%; margin: 0; position: static; align-self: start; float: none;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--h12-radius-lg); }
/* Placeholder sombre à la H12 quand aucune image (avant vraies photos) */
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder {
	aspect-ratio: 1 / 1; background: var(--h12-ink);
	background-image: repeating-linear-gradient(45deg, #1f1f1f 0 12px, #171717 12px 24px);
	border-radius: var(--h12-radius-lg); display: flex; align-items: center; justify-content: center;
}
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder img { display: none; }
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder::after {
	content: 'aperçu du visuel'; font-family: var(--h12-font-mono); font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--h12-text-2);
}

.woocommerce div.product .summary { margin: 0; }

/* ---- Titre & prix ---- */
.woocommerce div.product .product_title {
	font-family: var(--h12-font-display); font-weight: 400; text-transform: uppercase;
	letter-spacing: .01em; line-height: .95; font-size: var(--h12-h-product); margin: 0 0 12px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--h12-ink); font-size: 0; margin: 0 0 18px;
}
.woocommerce div.product p.price .amount, .woocommerce div.product span.price .amount {
	font-family: var(--h12-font-display); font-size: 34px; color: var(--h12-red); line-height: 1;
}
/* Le prix suit les options (product-price.js) : petit battement à chaque
   changement, pour qu'on voie que le chiffre a bougé. */
.woocommerce div.product p.price.h12-price--bump .amount,
.woocommerce div.product span.price.h12-price--bump .amount {
	/* transform n'agit pas sur un élément inline non remplacé */
	display: inline-block;
	animation: h12-price-bump .28s ease-out;
}
@keyframes h12-price-bump {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.07); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product p.price.h12-price--bump .amount,
	.woocommerce div.product span.price.h12-price--bump .amount { animation: none; }
}

/* Prix promo : ancien prix barré discret, nouveau prix rouge inchangé. */
.woocommerce div.product p.price del, .woocommerce div.product span.price del,
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {
	text-decoration: none;
}
.woocommerce div.product p.price del .amount, .woocommerce div.product span.price del .amount {
	font-family: var(--h12-font-body); font-weight: 700; font-size: 17px;
	color: var(--h12-text-3); text-decoration: line-through;
}
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {
	margin-left: 8px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--h12-text-2); font-size: 15px; line-height: 1.6; margin-bottom: 24px;
	padding-bottom: 22px; border-bottom: var(--h12-bd);
}

/* ============================================================================
   BARN2 PRODUCT OPTIONS (.wpo-*)
   ========================================================================== */
.wpo-options-container { display: flex; flex-direction: column; gap: 26px; margin: 8px 0 24px; }

/* Titre de groupe → style « étape » du design */
.wpo-group-title {
	font-family: var(--h12-font-body); font-weight: 800; font-size: 13px; text-transform: uppercase;
	letter-spacing: .04em; color: var(--h12-ink); margin: 0 0 14px; padding-left: 14px; position: relative;
}
.wpo-group-title::before {
	content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: var(--h12-red); border-radius: 2px;
}

.wpo-field { margin: 0 0 18px; }
.wpo-option-name, .wpo-option-name__text {
	font-family: var(--h12-font-body); font-weight: 700; font-size: 14px; color: var(--h12-ink);
}
.wpo-field-required-symbol { color: var(--h12-red); margin-left: 3px; }
.wpo-field-description { color: var(--h12-text-2); font-size: 13px; line-height: 1.5; margin-top: 4px; }
.wpo-currency, .wpo-price { font-family: var(--h12-font-mono); font-size: 12px; color: var(--h12-red); }

/* Choix radio / checkbox → disposés en ligne (comme FORTEE), pilules qui s'allument */
.wpo-options-container .wpo-choice-list { display: flex !important; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.wpo-options-container .wpo-choice-item { margin: 0; width: auto; float: none; }
/* on masque le point radio par défaut : la pastille/pilule active suffit */
.wpo-options-container .wpo-radio-dot { display: none; }
.wpo-choice-item input[type="radio"], .wpo-choice-item input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.wpo-choice-label {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	padding: 11px 16px; font-family: var(--h12-font-body); font-weight: 700; font-size: 14px;
	color: var(--h12-ink); background: #fff; transition: all var(--h12-t-fast); user-select: none;
}
.wpo-choice-label:hover { border-color: var(--h12-red); }
/* Sélectionné (radio = fond noir ; checkbox = fond rouge pâle bordé rouge) */
.wpo-choice-item:has(input[type="radio"]:checked) .wpo-choice-label {
	background: var(--h12-ink); color: #fff; border-color: var(--h12-ink);
}
.wpo-choice-item:has(input[type="checkbox"]:checked) .wpo-choice-label {
	background: #FFF6F6; color: var(--h12-ink); border-color: var(--h12-red);
}
.wpo-choice-item:has(input:checked) .wpo-currency { color: var(--h12-red); }
/* Accessibilité clavier */
.wpo-choice-item input:focus-visible + .wpo-choice-label { outline: 2px solid var(--h12-red); outline-offset: 3px; }

/* Cases à cocher « inner » (liste verticale) */
.wpo-checkboxes-one-col { flex-direction: column; }
.wpo-checkboxes-one-col .wpo-choice-label { width: 100%; justify-content: space-between; }

/* Dropdown */
.wpo-field-dropdown select, .wpo-options-container select {
	width: 100%; border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	padding: 12px 14px; font-family: var(--h12-font-body); font-size: 15px; background: #fff; margin-top: 10px; cursor: pointer;
}

/* Zone de texte / notes */
.wpo-options-container textarea {
	width: 100%; border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	padding: 12px 14px; font-family: var(--h12-font-body); font-size: 15px; min-height: 90px; margin-top: 10px; resize: vertical;
}

/* Upload de fichier → zone pointillée */
.wpo-field-file_upload .wpo-file-upload-wrapper, .wpo-field-file_upload input[type="file"] {
	border: 2px dashed #C4C4C4; border-radius: var(--h12-radius); padding: 22px; width: 100%;
	background: #fff; margin-top: 10px; cursor: pointer; font-family: var(--h12-font-mono); font-size: 12px; color: var(--h12-text-2);
}

/* Total dynamique Barn2 */
.wpo-price-container, .wpo-totals {
	margin: 8px 0 4px; font-family: var(--h12-font-body); font-weight: 700;
}
.wpo-price-container .amount, .wpo-totals .amount {
	font-family: var(--h12-font-display); font-size: 30px; color: var(--h12-red);
}

/* ============================================================================
   OPTION « COULEUR » EN SWATCHES (ronds) : champ Barn2 option-13
   Scopé au champ Couleur uniquement (name="wpo-option[option-13]").
   Chaque couleur ciblée par data-formula-value.
   ========================================================================== */
/* Le champ Couleur : chaque label devient un ROND de couleur. */
.wpo-field:has(input[name="wpo-option[option-13]"]) .wpo-choice-list { gap: 12px; }
.wpo-field:has(input[name="wpo-option[option-13]"]) .wpo-radio {
	display: inline-block; width: 40px; height: 40px; border-radius: 50%; padding: 0; margin: 0;
	border: 1.5px solid rgba(0, 0, 0, .2); cursor: pointer; position: relative;
	transition: box-shadow var(--h12-t-fast), transform var(--h12-t-fast); box-shadow: none;
}
.wpo-field:has(input[name="wpo-option[option-13]"]) .wpo-radio:hover { transform: scale(1.08); }
/* on cache tout le contenu interne (dot + texte) */
.wpo-field:has(input[name="wpo-option[option-13]"]) .wpo-radio-inner,
.wpo-field:has(input[name="wpo-option[option-13]"]) .wpo-radio-dot,
.wpo-field:has(input[name="wpo-option[option-13]"]) .wpo-choice-label { display: none !important; }
/* couleurs : ciblées par aria-label (hook stable) */
.wpo-radio[aria-label="Noir"]       { background: #141414 !important; }
.wpo-radio[aria-label="Blanc"]      { background: #ffffff !important; border-color: #C4C4C4 !important; }
.wpo-radio[aria-label="Rouge H12"]  { background: #C4161C !important; }
.wpo-radio[aria-label="Gris chiné"] { background: #9a9a9a !important; }
.wpo-radio[aria-label="Marine"]     { background: #1F2A44 !important; }
.wpo-radio[aria-label="Forêt"]      { background: #22402F !important; }
/* sélectionné : anneau rouge (comme le design) */
.wpo-field:has(input[name="wpo-option[option-13]"]) .wpo-radio:has(input:checked) {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C4161C;
}

/* ---- Quantité + Ajouter au panier ---- */
.woocommerce div.product form.cart { margin-top: 8px; display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity input.qty {
	width: 72px; height: 100%; min-height: 52px; border: 1.5px solid var(--h12-border);
	border-radius: var(--h12-radius-sm); text-align: center; font-family: var(--h12-font-body); font-weight: 700; font-size: 16px;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1; min-width: 220px; background: var(--h12-red); color: #fff; border: none;
	border-radius: var(--h12-radius-sm); font-family: var(--h12-font-body); font-weight: 800;
	text-transform: uppercase; letter-spacing: .04em; font-size: 16px; padding: 18px 28px; cursor: pointer;
	transition: background var(--h12-t-fast);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--h12-red-hover); }

/* Réassurance sous le bouton */
.woocommerce div.product .product_meta {
	margin-top: 18px; font-family: var(--h12-font-mono); font-size: 11px; letter-spacing: .04em;
	color: var(--h12-text-3); text-transform: uppercase;
}

/* ---- Sections pleine largeur sous la grille (onglets, ventes liées) ---- */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .upsells,
.woocommerce div.product .related {
	grid-column: 1 / -1; clear: both;
}

/* ---- Onglets bas ---- */
.woocommerce-tabs { margin-top: 56px; padding-top: 32px; border-top: var(--h12-bd); }
.woocommerce-tabs ul.tabs { display: flex; gap: 4px; border-bottom: var(--h12-bd); padding: 0; margin: 0 0 22px; list-style: none; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block; font-family: var(--h12-font-body); font-weight: 800; font-size: 13px; text-transform: uppercase;
	letter-spacing: .03em; padding: 14px 18px; color: var(--h12-text-3); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover { color: var(--h12-ink); border-bottom-color: var(--h12-red); }
.woocommerce-tabs .panel { color: var(--h12-text-2); font-size: 14px; line-height: 1.7; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
	.woocommerce div.product .woocommerce-product-gallery { position: relative; top: 0; }
}
@media (max-width: 760px) {
	.h12-product__bar { padding: 18px 20px 4px; }
}

/* ============================================================
   Galerie produit (flexslider Woo) : vignettes propres,
   fini la liste numérotée brute sous l'image.
   ============================================================ */
.woocommerce-product-gallery { overflow: hidden; }
.woocommerce-product-gallery .flex-viewport { border-radius: var(--h12-radius-lg); }
.woocommerce-product-gallery ol,
.woocommerce-product-gallery .flex-control-nav {
	list-style: none; margin: 12px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px;
}
.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; width: 84px; }
.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%; display: block; cursor: pointer; opacity: .55;
	border: 2px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	transition: opacity var(--h12-t-fast), border-color var(--h12-t-fast);
	background: #fff;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1; border-color: var(--h12-red);
}
/* flèches flexslider : discrètes */
.woocommerce-product-gallery .flex-direction-nav { display: none; }

/* ============================================================
   Étapes numérotées façon FORTEE : « 1. Couleur », « 2. Taille »...
   ============================================================ */
.wpo-options-container { counter-reset: h12step; }
.wpo-options-container > .wpo-field .wpo-option-name__text::before {
	counter-increment: h12step;
	content: counter(h12step) ". ";
	color: var(--h12-red);
	font-family: var(--h12-font-mono);
	font-weight: 700;
}

/* ============================================================
   Champs de téléversement par zone + bouton Personnaliser
   ============================================================ */
.wpo-field-file_upload { border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm); padding: 14px 16px; background: #fff; }
.wpo-field-file_upload .wpo-field-description { margin-top: 6px; }

/* ============================================================
   Note d'expédition sous le bouton d'achat
   ============================================================ */
.h12-ship-note {
	flex-basis: 100%; margin: 10px 0 0; font-size: 13px;
	color: var(--h12-text-2, #555);
}
.h12-ship-note strong { color: var(--h12-ink); }

/* Sans les CSS WooCommerce par défaut, l'image garde son attribut height=600
   quand la colonne est plus étroite : elle s'étire verticalement. On force
   le ratio naturel. */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img {
	width: 100%;
	height: auto !important;
}

/* ============================================================
   Boîte design unique + cartes de zones (façon FORTEE)
   ============================================================ */
.h12-designer {
	border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	padding: 18px; background: #fff;
}
.h12-designer__title {
	margin: 0 0 4px; font-family: var(--h12-font-body); font-weight: 700;
	font-size: 15px; color: var(--h12-ink);
}
.h12-designer__note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--h12-text-2, #555); }
.h12-designer__cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.h12-zone-card {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
	min-width: 108px; padding: 14px 12px; cursor: pointer;
	border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	background: #fff; font-family: var(--h12-font-body); transition: all var(--h12-t-fast);
}
.h12-zone-card:hover { border-color: var(--h12-red); }
.h12-zone-card.is-active { border-color: var(--h12-red); box-shadow: 0 0 0 1px var(--h12-red); background: #FFF6F6; }
.h12-zone-card__name { font-weight: 700; font-size: 13px; color: var(--h12-ink); }
.h12-zone-card__price { font-family: var(--h12-font-mono); font-size: 11px; color: var(--h12-red); }
.h12-zone-card__check {
	position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
	display: none; align-items: center; justify-content: center;
	background: #12813c; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700;
}
.h12-zone-card.has-file .h12-zone-card__check { display: inline-flex; }

/* un seul champ de zone visible à la fois, sans son titre ni sa bordure */
.h12-designer .h12-zone-field { display: none; border: 0; padding: 0; margin: 0; }
.h12-designer .h12-zone-field.is-active { display: block; }
.h12-designer .h12-zone-field .wpo-option-name__text,
.h12-designer .h12-zone-field .wpo-field-description { display: none; }
/* Le prix de la zone est deja sur sa carte, et la carte sait dire
   « incluse » quand c'est la 1re zone remplie. Le laisser aussi sous les
   cartes affichait « + 5,00 $ » juste en dessous d'une carte marquee
   « incluse » : deux messages contraires a 20 px d'ecart. */
.h12-designer .h12-zone-field .wpo-price-container { display: none; }
.h12-designer a.wlp-customize-preview {
	display: inline-block; margin-top: 10px; padding: 10px 16px; cursor: pointer;
	background: var(--h12-ink); color: #fff; border-radius: var(--h12-radius-sm);
	font-weight: 700; font-size: 13px; text-decoration: none;
}
.h12-designer a.wlp-customize-preview:hover { background: var(--h12-red); }

/* ============================================================
   Grille tailles x quantités
   ============================================================ */
.h12-hidden-native { display: none !important; }
.h12-sizes { flex-basis: 100%; margin: 6px 0 14px; }
.h12-sizes__title { margin: 0 0 10px; font-weight: 700; font-size: 14px; color: var(--h12-ink); }
.h12-sizes__rows {
	border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	overflow: hidden; background: #fff;
}
.h12-sizes__row {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px;
}
.h12-sizes__row + .h12-sizes__row { border-top: 1px solid var(--h12-border); }
.h12-sizes__size { min-width: 46px; font-weight: 700; font-size: 14px; color: var(--h12-ink); }
.h12-sizes__extra { flex: 1; font-family: var(--h12-font-mono); font-size: 11px; color: var(--h12-red); }
.h12-sizes__stepper { display: inline-flex; align-items: center; gap: 6px; }
.h12-sizes__stepper input {
	width: 58px; text-align: center; padding: 7px 4px;
	border: 1.5px solid var(--h12-border); border-radius: var(--h12-radius-sm);
	font-family: var(--h12-font-mono); font-size: 14px;
}
.h12-sizes__stepper input::-webkit-outer-spin-button,
.h12-sizes__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.h12-step {
	width: 34px; height: 34px; border: 1.5px solid var(--h12-border); border-radius: 50%;
	background: #fff; font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1;
	color: var(--h12-ink); transition: all var(--h12-t-fast);
}
.h12-step:hover { border-color: var(--h12-red); color: var(--h12-red); }
.h12-sizes__msg { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--h12-radius-sm);
	background: #FFF3F3; color: #8f1425; font-size: 13px; font-weight: 600; }

/* étapes numérotées : la boîte design et la grille suivent la même séquence */
.h12-designer__title::before,
.h12-sizes__title::before {
	counter-increment: h12step;
	content: counter(h12step) ". ";
	color: var(--h12-red); font-family: var(--h12-font-mono); font-weight: 700;
}

/* ============================================================
   Promesse d'épreuve sous le bouton d'achat
   ============================================================ */
.h12-approbation {
	flex-basis: 100%;
	margin: 14px 0 0;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	border: 1.5px solid var(--h12-border);
	border-left: 4px solid var(--h12-red);
	border-radius: var(--h12-radius-sm);
	background: #fff;
}
.h12-approbation__coche {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--h12-red);
	color: #fff;
	font-size: 13px; line-height: 1;
}
.h12-approbation__titre {
	display: block;
	font-family: var(--h12-font-mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--h12-ink);
}
.h12-approbation__note {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--h12-text-2, #555);
}

/* ============================================================================
   REFONTE DES BOÎTES D'OPTIONS (2026-08-24)
   ---------------------------------------------------------------------------
   Barn2 empile ses champs à plat : un libellé, des pilules, un paragraphe.
   Rien ne dit où commence et où finit une étape, ni ce qu'on a déjà choisi.
   On en fait une fiche d'atelier : une carte par étape, un numéro qui passe
   au rouge quand c'est répondu, et le choix courant rappelé à droite du titre.
   Bloc volontairement placé en fin de fichier : il surcharge ce qui précède
   et se retire d'un seul tenant.
   ========================================================================== */

/* ---- La pile d'étapes ---------------------------------------------------- */
.wpo-options-container {
	gap: 12px;
	margin: 18px 0 20px;
}
.wpo-options-container .wpo-layout-default {
	display: flex; flex-direction: column; gap: 12px;
}

/* Le titre de groupe reprend la barre rouge, mais en plus discret : les
   cartes portent maintenant la hiérarchie. */
.wpo-group-title {
	margin: 0 0 2px;
	font-size: 11px; letter-spacing: .12em;
	font-family: var(--h12-font-mono); font-weight: 700;
	color: var(--h12-text-3);
	padding-left: 0;
}
.wpo-group-title::before { display: none; }

/* ---- Une étape = une carte ---------------------------------------------- */
.wpo-options-container > .wpo-field,
.wpo-layout-default > .wpo-field {
	position: relative;
	margin: 0;
	padding: 15px 17px 16px;
	background: #fff;
	border: 1.5px solid var(--h12-border);
	border-radius: var(--h12-radius);
	transition: border-color var(--h12-t-card), box-shadow var(--h12-t-card);
}
/* le rail de gauche : gris tant que l'étape n'a rien, rouge dès qu'elle a
   une réponse (classe posée par product-designer.js) */
.wpo-options-container > .wpo-field::before,
.wpo-layout-default > .wpo-field::before {
	content: '';
	position: absolute; left: -1.5px; top: -1.5px; bottom: -1.5px;
	width: 3px;
	background: var(--h12-border);
	border-radius: var(--h12-radius) 0 0 var(--h12-radius);
	transition: background var(--h12-t-card);
}
.wpo-options-container > .wpo-field.h12-repondu::before,
.wpo-layout-default > .wpo-field.h12-repondu::before { background: var(--h12-red); }

.wpo-options-container > .wpo-field:hover,
.wpo-layout-default > .wpo-field:hover { border-color: #CFCFCF; }
.wpo-options-container > .wpo-field:focus-within,
.wpo-layout-default > .wpo-field:focus-within {
	border-color: var(--h12-ink);
	box-shadow: 0 0 0 3px rgba(20, 20, 20, .06);
}
/* le champ Taille est masqué au profit de la grille tailles x quantités :
   il ne doit pas laisser une carte vide derrière lui */
.wpo-field.h12-hidden-native { display: none !important; }

/* ---- En-tête de carte : numéro, nom, choix courant ---------------------- */
.wpo-options-container .wpo-option-name,
.wpo-layout-default .wpo-option-name {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 2px;
	font-size: 14px;
}
.wpo-options-container .wpo-option-name__text,
.wpo-layout-default .wpo-option-name__text {
	font-weight: 800; font-size: 14px; letter-spacing: -.005em;
	color: var(--h12-ink);
	display: inline-flex; align-items: center;
}
/* le numéro d'étape devient une puce carrée plutôt qu'un « 1. » perdu */
.wpo-options-container > .wpo-field .wpo-option-name__text::before,
.wpo-layout-default > .wpo-field .wpo-option-name__text::before {
	counter-increment: h12step;
	content: counter(h12step);
	display: inline-grid; place-items: center;
	flex: none;
	width: 21px; height: 21px; margin-right: 10px;
	background: var(--h12-ink); color: #fff;
	font-family: var(--h12-font-mono); font-weight: 700; font-size: 11px;
	line-height: 1; border-radius: 2px;
	transition: background var(--h12-t-card);
}
.wpo-options-container > .wpo-field.h12-repondu .wpo-option-name__text::before,
.wpo-layout-default > .wpo-field.h12-repondu .wpo-option-name__text::before {
	background: var(--h12-red);
}

/* Rappel du choix courant, posé par product-designer.js. */
.h12-choix {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 6px;
	max-width: 48%;
	font-family: var(--h12-font-mono);
	font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--h12-text-2);
	background: var(--h12-bg-gray);
	border-radius: 2px;
	padding: 4px 8px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h12-choix::before {
	content: ''; flex: none;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--h12-red);
}
.h12-choix--vide { color: var(--h12-text-4); background: transparent; }
.h12-choix--vide::before { background: var(--h12-border); }

.wpo-options-container .wpo-field-description,
.wpo-layout-default .wpo-field-description {
	margin-top: 6px; font-size: 12.5px; line-height: 1.5;
}

/* ---- Pilules : c'est l'étiquette entière qui devient la pastille -------- */
.wpo-options-container .wpo-choice-list { gap: 8px; margin-top: 12px; }

.wpo-options-container .wpo-radio,
.wpo-options-container .wpo-checkbox {
	display: inline-flex; align-items: baseline; gap: 8px;
	margin: 0; padding: 10px 15px;
	border: 1.5px solid var(--h12-border);
	border-radius: var(--h12-radius-sm);
	background: #fff; cursor: pointer; user-select: none;
	transition: border-color var(--h12-t-fast), background var(--h12-t-fast), color var(--h12-t-fast);
}
/* on neutralise l'ancienne pilule posée sur le seul libellé */
.wpo-options-container .wpo-radio .wpo-choice-label,
.wpo-options-container .wpo-checkbox .wpo-choice-label {
	border: none; background: none; padding: 0; border-radius: 0;
	font-weight: 700; font-size: 14px; color: inherit;
}
.wpo-options-container .wpo-radio .wpo-price-container,
.wpo-options-container .wpo-checkbox .wpo-price-container {
	font-family: var(--h12-font-mono); font-size: 11px; color: var(--h12-red);
	white-space: nowrap;
}
.wpo-options-container .wpo-radio:hover,
.wpo-options-container .wpo-checkbox:hover { border-color: var(--h12-ink); }

.wpo-options-container .wpo-choice-item:has(input[type="radio"]:checked) .wpo-radio {
	background: var(--h12-ink); border-color: var(--h12-ink); color: #fff;
}
.wpo-options-container .wpo-choice-item:has(input[type="radio"]:checked) .wpo-radio .wpo-price-container,
.wpo-options-container .wpo-choice-item:has(input[type="radio"]:checked) .wpo-radio .wpo-currency,
.wpo-options-container .wpo-choice-item:has(input[type="radio"]:checked) .wpo-radio .wpo-price { color: #fff; }

.wpo-options-container .wpo-choice-item:has(input[type="checkbox"]:checked) .wpo-checkbox {
	background: #FFF5F5; border-color: var(--h12-red); color: var(--h12-ink);
}
.wpo-options-container .wpo-choice-item:has(input:focus-visible) .wpo-radio,
.wpo-options-container .wpo-choice-item:has(input:focus-visible) .wpo-checkbox {
	outline: 2px solid var(--h12-red); outline-offset: 3px;
}
/* Le point radio et la case à cocher natifs de Barn2 doublent l'information :
   la pastille pleine (ou son fond rouge pâle) dit déjà si c'est sélectionné.
   Deux contrôles côte à côte pour un seul choix, ça se lit mal. */
.wpo-options-container .wpo-radio-inner,
.wpo-options-container .wpo-radio-dot,
.wpo-options-container .wpo-checkbox-inner { display: none !important; }
.wpo-options-container .wpo-choice-item > label > input[type="radio"],
.wpo-options-container .wpo-choice-item > label > input[type="checkbox"],
.wpo-options-container .wpo-choice-item > input[type="radio"],
.wpo-options-container .wpo-choice-item > input[type="checkbox"] {
	position: absolute; width: 1px; height: 1px;
	opacity: 0; pointer-events: none;
}
/* La case à cocher, elle, doit rester VISIBLE même décochée : sans repère,
   rien ne dit que la pilule est un interrupteur. On la redessine dans la
   pilule, au gabarit H12. */
.wpo-options-container .wpo-checkbox::before {
	content: '';
	flex: none; align-self: center;
	width: 17px; height: 17px;
	border: 1.5px solid var(--h12-border);
	border-radius: 2px;
	background: #fff;
	transition: background var(--h12-t-fast), border-color var(--h12-t-fast);
}
.wpo-options-container .wpo-choice-item:has(input[type="checkbox"]:checked) .wpo-checkbox::before {
	background: var(--h12-red) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' fill='none'%3E%3Cpath fill='%23fff' d='M4.2 8.6.3 4.7l1.4-1.4 2.5 2.5L9.3.4l1.4 1.4z'/%3E%3C/svg%3E") center / 11px 9px no-repeat;
	border-color: var(--h12-red);
}
.wpo-options-container .wpo-checkbox:hover::before { border-color: var(--h12-ink); }

/* ---- Pastilles de couleur ---------------------------------------------- */
.wpo-options-container .wpo-color-checkboxes { gap: 9px; margin-top: 12px; }
.wpo-options-container .wpo-color-checkbox label {
	position: relative;
	padding: 3px; margin: 0;
	border: 1.5px solid transparent;
	border-radius: 50%;
	transition: border-color var(--h12-t-fast), transform var(--h12-t-fast);
}
/* La maquette (Site Web/Page produit.dc.html) spécifie des ronds de 42 px
   avec un anneau sur le choix courant. Barn2 impose 30 px et un rayon de 4 px
   avec une règle de MÊME spécificité que la nôtre, chargée après : on remonte
   d'un cran (.wpo-color-checkboxes en plus) plutôt que de sortir !important. */
.wpo-options-container .wpo-color-checkboxes .wpo-color-checkbox span.wpo-swatch-inner {
	width: 42px; height: 42px; margin: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .16);
	background-size: 16px;
	box-shadow: inset 0 -8px 12px -8px rgba(0, 0, 0, .35);
}
.wpo-options-container .wpo-color-checkbox:hover label { transform: scale(1.08); }
.wpo-options-container .wpo-color-checkbox:has(input:checked) label { border-color: var(--h12-red); }
.wpo-options-container .wpo-color-checkbox:has(input:focus-visible) label {
	outline: 2px solid var(--h12-ink); outline-offset: 2px;
}

/* Nom de la couleur au survol : l'infobulle native met une seconde à sortir
   et n'a aucun style. product-designer.js déplace le title dans data-nom.

   ⚠️ `display: none` au repos, et pas seulement `opacity: 0`. Un pseudo-élément
   transparent occupe quand même sa place dans la ZONE DE DÉFILEMENT de ses
   ancêtres. Avec `white-space: nowrap`, l'infobulle d'un nom long (« Multicam
   tropical / Vert », « Marine / Blanc / Marine ») dépassait de sa pastille de
   50 px jusqu'à 96 px, et la dernière pastille de chaque rangée poussait la
   page entière : sur un téléphone de 390 px, la fiche des casquettes mesurait
   397 px de large et glissait de côté au doigt. Mesuré sur la 6606 ET sur la
   casquette Acier Ouellette; les t-shirts, aux noms de couleur plus courts,
   passaient tout juste. Le fondu est sacrifié : une infobulle de survol
   n'existe de toute façon pas sur un écran tactile. */
.wpo-options-container .wpo-color-checkbox label[data-nom]::after {
	content: attr(data-nom);
	display: none;
	position: absolute; bottom: calc(100% + 7px); left: 50%;
	transform: translateX(-50%) translateY(3px);
	padding: 4px 8px;
	background: var(--h12-ink); color: #fff;
	font-family: var(--h12-font-mono); font-size: 10px; letter-spacing: .05em;
	white-space: nowrap; border-radius: 2px;
	opacity: 0; pointer-events: none;
	transition: opacity var(--h12-t-fast), transform var(--h12-t-fast);
	z-index: 5;
}
.wpo-options-container .wpo-color-checkbox label[data-nom]:hover::after,
.wpo-options-container .wpo-color-checkbox:has(input:focus-visible) label[data-nom]::after {
	display: block;
	opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ---- Listes déroulantes et zones de texte, au même gabarit -------------- */
.wpo-options-container select,
.wpo-options-container textarea {
	margin-top: 12px;
	border-color: var(--h12-border);
	border-radius: var(--h12-radius-sm);
	font-size: 14px;
	transition: border-color var(--h12-t-fast);
}
.wpo-options-container select:focus,
.wpo-options-container textarea:focus {
	border-color: var(--h12-ink); outline: none;
}

/* ---- La boîte design prend le dessus ----------------------------------- */
.h12-designer {
	padding: 0; overflow: hidden;
	border-color: var(--h12-border);
	border-radius: var(--h12-radius);
}
.h12-designer__title {
	display: flex; align-items: center;
	margin: 0; padding: 13px 17px;
	background: var(--h12-ink); color: #fff;
	font-size: 14px; font-weight: 800;
}
.h12-designer__title::before {
	counter-increment: h12step;
	content: counter(h12step);
	display: inline-grid; place-items: center;
	flex: none;
	width: 21px; height: 21px; margin-right: 10px;
	background: var(--h12-red); color: #fff;
	font-family: var(--h12-font-mono); font-weight: 700; font-size: 11px;
	line-height: 1; border-radius: 2px;
}
.h12-designer__note {
	margin: 0; padding: 12px 17px;
	background: #FAFAFA; border-bottom: 1px solid var(--h12-border);
	font-size: 12.5px; line-height: 1.55;
}
/* Rappel « la 1re impression est incluse ». Il vit sous la note, dans le meme
   bandeau gris, mais en vert : c'est une bonne nouvelle, pas une consigne. */
.h12-designer__free {
	margin: 0; padding: 10px 17px;
	background: #F2FAF4; border-bottom: 1px solid var(--h12-border);
	color: #1F6B36; font-size: 12.5px; line-height: 1.5; font-weight: 600;
}
.h12-designer__cards { margin: 0; padding: 15px 17px 0; gap: 9px; }
.h12-designer__fields { padding: 0 17px 16px; }
.h12-designer__fields:empty { padding: 0; }

/* Cartes de zones : format constant, coche verte plus lisible */
.h12-zone-card {
	min-width: 96px; padding: 12px 13px; gap: 3px;
	border-radius: var(--h12-radius-sm);
}
.h12-zone-card:hover { border-color: var(--h12-ink); }
.h12-zone-card.is-active {
	background: var(--h12-ink); border-color: var(--h12-ink); box-shadow: none;
}
.h12-zone-card.is-active .h12-zone-card__name { color: #fff; }
.h12-zone-card.is-active .h12-zone-card__price { color: #fff; opacity: .75; }
/* La zone offerte : son prix devient « incluse », en vert. Sur la carte active
   (fond noir) le vert clair reste lisible. */
.h12-zone-card.is-incluse .h12-zone-card__price { color: #1F6B36; }
.h12-zone-card.is-incluse.is-active .h12-zone-card__price { color: #8FE0A6; opacity: 1; }
.h12-zone-card__check {
	top: -7px; right: -7px; width: 18px; height: 18px;
	font-size: 11px; box-shadow: 0 0 0 2px #fff;
}

/* Zone de dépôt : plus haute, et qui réagit */
.h12-designer .h12-zone-field .wpo-file-dropzone,
.wpo-field-file_upload .wpo-file-dropzone {
	margin-top: 14px;
	border: 2px dashed #CFCFCF;
	border-radius: var(--h12-radius-sm);
	background: #FCFCFC;
	transition: border-color var(--h12-t-fast), background var(--h12-t-fast);
}
.wpo-field-file_upload .wpo-file-dropzone:hover,
.wpo-field-file_upload .wpo-file-dropzone.dz-drag-hover {
	border-color: var(--h12-red); background: #FFF8F8;
}
.wpo-field-file_upload .dz-button-label {
	font-family: var(--h12-font-body); font-weight: 700; font-size: 13px;
	color: var(--h12-text-2);
}
.wpo-field-file_upload .dz-button-icon svg { fill: var(--h12-text-3); }

/* ---- Le total de Barn2 devient un vrai sommaire ------------------------ */
.woocommerce div.product form.cart .wpo-totals-container {
	flex-basis: 100%;
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin: 4px 0 12px; padding: 14px 17px;
	background: var(--h12-ink);
	border-radius: var(--h12-radius);
	color: #fff;
}
.woocommerce div.product form.cart .wpo-totals-container.wpo-totals-hidden { display: none; }
.wpo-totals-container .wpo-totals-label {
	font-family: var(--h12-font-mono);
	font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--h12-hero-sub);
}
.wpo-totals-container .wpo-price {
	font-family: var(--h12-font-display); font-size: 30px; line-height: 1; color: #fff;
}
.wpo-totals-container .wpo-currency { font-family: var(--h12-font-display); font-size: 22px; color: #fff; }

/* ---- Ajustements fins -------------------------------------------------- */
/* le crayon « modifier cette option » ne s'adresse qu'aux gestionnaires :
   il ne doit pas voler l'attention devant le nom de l'étape */
.wpo-field-edit { order: 9; margin-left: 4px; opacity: .25; transition: opacity var(--h12-t-fast); }
.wpo-field-edit:hover { opacity: 1; }
.wpo-field-edit svg { width: 13px; height: 13px; }

@media (max-width: 560px) {
	.wpo-options-container > .wpo-field,
	.wpo-layout-default > .wpo-field { padding: 13px 14px 14px; }
	.h12-choix { max-width: 42%; }
	.h12-designer__title, .h12-designer__note, .h12-designer__free { padding-left: 14px; padding-right: 14px; }
	.h12-designer__cards, .h12-designer__fields { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
   PRIX PAR QUANTITÉ (2026-08-25)

   Une colonne de prix, pas une rangée de pastilles : cinq pastilles
   réparties sur trois lignes à 390 px ne se comparent pas, alors qu'une
   colonne de prix alignés à droite se lit d'un trait. C'est tout l'intérêt
   du bloc, donc c'est la contrainte qui décide de la forme.

   La rangée où le client se trouve est remplie d'encre plutôt que teintée
   de rouge : sur cette fiche, le rouge pâle est déjà la couleur d'un
   message d'erreur (.h12-sizes__msg). Une seule rangée sombre au milieu de
   cinq claires ne se confond avec rien.
   ============================================================ */
.h12-paliers {
	margin: 0 0 12px;
	border: 1.5px solid var(--h12-border);
	border-radius: var(--h12-radius-sm);
	background: #fff;
	overflow: hidden;
}

.h12-paliers__tete {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 7px 14px;
	background: var(--h12-bg-gray);
	border-bottom: 1px solid var(--h12-border);
}
.h12-paliers__titre {
	font-family: var(--h12-font-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--h12-ink);
}
/* Nomme l'unité une seule fois, en tête : aucune rangée n'a alors à répéter
   « / morceau » à côté de son prix. */
.h12-paliers__unite {
	font-family: var(--h12-font-mono); font-size: 11px;
	text-transform: uppercase; color: var(--h12-text-3);
}

.h12-paliers__liste { margin: 0; padding: 4px; list-style: none; }

.h12-palier {
	display: grid;
	grid-template-columns: 5.2em 1fr auto;
	align-items: baseline;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--h12-radius-sm);
	font-size: 13px;
	color: var(--h12-text-2);
}
.h12-palier + .h12-palier { box-shadow: 0 -1px 0 var(--h12-border); }
.h12-palier.is-actif + .h12-palier,
.h12-palier.is-actif { box-shadow: none; }

.h12-palier__qte {
	font-family: var(--h12-font-mono); font-size: 12px;
	color: var(--h12-text-3); white-space: nowrap;
}
/* Le prix est le nombre qu'on compare : il garde un cran d'avance sur sa
   rangée, et des chiffres tabulaires pour que les virgules tombent les unes
   sous les autres d'une ligne à l'autre. */
.h12-palier__prix {
	font-size: 15px; font-weight: 700; color: var(--h12-ink);
	font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.h12-palier__eco {
	font-size: 11px; font-weight: 700; color: var(--h12-ok-text); white-space: nowrap;
}

/* « Tu es ici ». Trois signaux, jamais la couleur seule : le remplissage, la
   graisse, et aria-current pour les lecteurs d'écran. */
.h12-palier.is-actif {
	background: var(--h12-ink);
	color: #fff;
}
.h12-palier.is-actif .h12-palier__qte { color: #fff; font-weight: 700; }
.h12-palier.is-actif .h12-palier__prix { color: #fff; font-weight: 800; }
.h12-palier.is-actif .h12-palier__eco { color: #7BD8A0; }

.h12-paliers__mot {
	margin: 0; padding: 8px 14px;
	border-top: 1px solid var(--h12-border);
	background: #FAFAFA;
	font-size: 12px; line-height: 1.45; color: var(--h12-text-2);
}
.h12-paliers__mot--gagne { color: var(--h12-ok-text); font-weight: 600; background: var(--h12-ok-bg); }

@media (max-width: 480px) {
	.h12-palier { grid-template-columns: 4.4em 1fr auto; gap: 8px; padding: 7px 8px; }
	.h12-palier__qte { font-size: 11px; }
	.h12-palier__prix { font-size: 14px; }
	.h12-paliers__tete { padding: 7px 10px; }
	.h12-paliers__mot { padding: 8px 10px; }
}

/* -------------------------------------------------------------------------
   Le total de la fiche (assets/js/product-total.js)

   Il reprend l'habillage du sommaire de Barn2 : liste claire sur fond blanc,
   somme sur la barre sombre, chiffre en Anton. C'est le seul endroit de la
   page où les frais uniques (infographie, matrice, détourage) se voient;
   le prix sous le titre, lui, est un prix unitaire.
   ---------------------------------------------------------------------- */
.h12-total {
	flex-basis: 100%;
	margin: 6px 0 14px;
	border: 1.5px solid var(--h12-border);
	border-radius: var(--h12-radius-sm);
	background: #fff;
	overflow: hidden;
}
.h12-total__titre {
	margin: 0; padding: 9px 14px;
	border-bottom: 1px solid var(--h12-border);
	font-family: var(--h12-font-mono);
	font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--h12-text-2);
}
.h12-total__lignes { margin: 0; padding: 6px 0; list-style: none; }
.h12-total__ligne {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 5px 14px;
	font-size: 13px; color: var(--h12-text-2);
}
.h12-total__montant {
	font-weight: 700; color: var(--h12-ink); white-space: nowrap;
	font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
/* Les frais uniques sont la raison d'être du bloc : ils portent la couleur
   de la marque pour qu'on voie la ligne apparaître au moment du clic. */
.h12-total__ligne--frais .h12-total__montant { color: var(--h12-red); }
.h12-total__ligne--rabais .h12-total__libelle,
.h12-total__ligne--rabais .h12-total__montant,
.h12-total__ligne--offert .h12-total__montant { color: var(--h12-ok-text); }
.h12-total__ligne--vide { color: var(--h12-text-3); font-style: italic; }
.h12-total__somme {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin: 0; padding: 12px 15px;
	background: var(--h12-ink); color: #fff;
}
/* Tant qu'aucune quantite n'est entree, il n'y a pas de total a annoncer :
   product-total.js pose l'attribut, et « display:flex » gagnerait sans ceci. */
.h12-total__somme[hidden] { display: none; }
.h12-total__somme-mot {
	font-family: var(--h12-font-mono);
	font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--h12-hero-sub);
}
.h12-total__somme-nombre {
	font-family: var(--h12-font-display); font-weight: 400;
	font-size: 26px; line-height: 1; color: #fff;
}
.h12-total__note {
	margin: 0; padding: 8px 14px;
	border-top: 1px solid var(--h12-border);
	background: #FAFAFA;
	font-size: 11.5px; line-height: 1.45; color: var(--h12-text-2);
}

@media (max-width: 480px) {
	.h12-total__ligne { padding: 5px 10px; font-size: 12.5px; }
	.h12-total__somme { padding: 11px 11px; }
	.h12-total__somme-nombre { font-size: 23px; }
	.h12-total__note { padding: 8px 10px; }
}