/* =========================================================================
Hot Milk Boutique — feuille de style du thème (v1.1, passe design)
Mobile d'abord. Jetons en tête, composants ensuite.
!important réservé à deux règles : animations coupées (prefers-reduced-motion)
et masquage visuel (.hm-visually-hidden, qui doit gagner contre WooCommerce).
========================================================================= */
/* -------------------------------------------------------------------------
1. Jetons
---------------------------------------------------------------------- */
:root {
--hm-bg: #fbf8f3;
--hm-surface: #ffffff;
--hm-surface-2: #f6efe6;
--hm-peach: #fbe3d0;
--hm-peach-strong: #f3c9a6;
--hm-caramel: #c98a5b;
/* Encre caramel : #a96f44 ne donnait que 3,9:1 sur le crème et 3,4:1 sur la pêche du bloc Mission.
#8b5a34 passe partout (5,5:1 sur crème, 4,7:1 sur pêche, 5,8:1 sur blanc et pour le blanc des boutons).
Le caramel clair reste réservé aux traits, icônes, soulignés et au halo de focus. */
--hm-caramel-dark: #8b5a34;
--hm-brown: #3f2f25;
--hm-brown-soft: #6b5a4b;
--hm-muted: #76665a;
--hm-border: rgba(63, 47, 37, 0.10);
--hm-border-strong: rgba(63, 47, 37, 0.18);
/* Vert des confirmations : #7a9e7e ne faisait que 3:1 sur blanc pour « En stock », le message
de la lettre d'information et la page de remerciement. #4f7a55 monte à 4,9:1 (et le blanc
du bouton « Ajouté » à 4,9:1 également). Le fond vert pâle ne change pas. */
--hm-sage: #4f7a55;
--hm-sage-bg: #eaf2eb;
/* Framboise : #c94f5c ne faisait que 4,4:1 sur blanc et 4,2:1 sur le crème — juste sous le seuil
pour le prix promotionnel, le badge « Promo » et la pastille « -5 % » de la fenêtre de bienvenue.
#b8414e, même famille à peine plus foncée, monte à 5,4:1 sur blanc et 4,6:1 sur le rose pâle. */
--hm-rasp: #b8414e;
--hm-rasp-bg: #fbe9eb;
/* Rouges de WooCommerce (#a00 par défaut) : erreur de code promo, libellé d'un champ invalide,
croix de suppression. theme.css est chargé après la feuille de WooCommerce, la valeur du thème
l'emporte donc partout, y compris derrière un !important. La croix du panier garde son gris :
elle redéfinit le jeton pour elle seule (voir « .woocommerce a.remove »). */
--wc-red: var(--hm-rasp);
--hm-gold: #b8860b;
/* Nunito n'est chargée qu'en 400, 600 et 700 ; Fraunces en 500 et 700 (assets/fonts/fonts.css).
Ne jamais demander 800 : le navigateur retombe sur la 700 et le code laisse croire au contraire. */
--hm-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--hm-font-title: "Fraunces", Georgia, "Times New Roman", serif;
--hm-radius: 18px;
--hm-radius-sm: 12px;
--hm-radius-xs: 8px;
--hm-radius-pill: 999px;
/* Élévation : 1 posé, 2 survolé, 3 flottant (volets, fenêtres) */
--hm-shadow-1: 0 1px 2px rgba(63, 47, 37, 0.05), 0 2px 6px rgba(63, 47, 37, 0.04);
--hm-shadow-2: 0 14px 34px -10px rgba(63, 47, 37, 0.18);
--hm-shadow-3: 0 30px 80px -20px rgba(63, 47, 37, 0.35);
--hm-glass: rgba(251, 248, 243, 0.82);
--hm-glass-strong: rgba(255, 255, 255, 0.9);
--hm-veil: rgba(63, 47, 37, 0.38);
--hm-container: 1200px;
--hm-gutter: 20px;
--hm-header-h: 64px;
/* Hauteur réelle du bandeau d'annonces collant, publiée par theme.js. Zéro tant qu'il n'y
en a pas, ou dès que la visiteuse le ferme. */
--hm-annonces-h: 0px;
/* Ce sous quoi tout élément collant doit se ranger : le bandeau, puis l'en-tête. Un seul
jeton pour la colonne d'achat, le récapitulatif de commande, les totaux du panier et le
sommaire des pages éditoriales — sinon chacun oublie le bandeau à sa façon. */
--hm-sticky-top: calc(var(--hm-annonces-h, 0px) + var(--hm-header-h));
--hm-bottombar-h: 64px;
/* Hauteur réelle de la barre d'achat rapide des fiches produits, publiée par theme.js. */
--hm-buybar-h: 0px;
--hm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--hm-dur: 0.32s;
}
@media (min-width: 900px) {
:root { --hm-gutter: 32px; --hm-header-h: 84px; --hm-bottombar-h: 0px; }
}
/* -------------------------------------------------------------------------
2. Base
---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hm-sticky-top) + 12px); }
body {
margin: 0;
background: var(--hm-bg);
color: var(--hm-brown);
font-family: var(--hm-font);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Réserve du bas : barre du bas + barre d'achat rapide (mesurée par theme.js), sinon la fin du pied de page passe dessous. */
padding-bottom: calc(var(--hm-bottombar-h) + var(--hm-buybar-h, 0px) + env(safe-area-inset-bottom, 0px));
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--hm-caramel-dark); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--hm-brown); }
h1, h2, h3, h4 { font-family: var(--hm-font-title); font-optical-sizing: auto; font-weight: 500; line-height: 1.12; margin: 0 0 0.5em; color: var(--hm-brown); letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--hm-caramel); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; background: var(--hm-brown); color: #fff; padding: 10px 16px; border-radius: var(--hm-radius-xs); }
.hm-container { width: 100%; max-width: var(--hm-container); margin-inline: auto; padding-inline: var(--hm-gutter); }
.hm-main { min-height: 50vh; }
.hm-icon { flex: none; }
.hm-eyebrow { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hm-caramel-dark); font-weight: 700; margin-bottom: 0.7em; }
.hm-link { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--hm-brown); }
.hm-link .hm-icon { transition: transform 0.2s var(--hm-ease); }
.hm-link:hover .hm-icon { transform: translateX(4px); }
/* Mouvement : animations d'entrée, désactivées si l'utilisateur le demande */
@keyframes hm-rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes hm-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes hm-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes hm-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hm-js .hm-reveal { opacity: 0; transform: translateY(14px); }
.hm-js .hm-reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s var(--hm-ease), transform 0.6s var(--hm-ease); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
.hm-js .hm-reveal { opacity: 1; transform: none; }
.hm-btn--primary::after { display: none; }
}
/* Boutons */
.hm-btn, .button, button.button, input[type="submit"].button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 22px; min-height: 46px;
border-radius: var(--hm-radius-pill); border: 1.5px solid transparent;
font-weight: 700; font-size: 0.98rem; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none;
/* Caramel foncé et non caramel clair : blanc sur #c98a5b ne donnait que 2,89:1, contre 5,82:1 ici. */
background: var(--hm-caramel-dark); color: #fff;
box-shadow: var(--hm-shadow-1);
transition: transform 0.18s var(--hm-ease), background 0.18s, box-shadow 0.18s, color 0.18s;
cursor: pointer;
}
.hm-btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--hm-brown); color: #fff; transform: translateY(-1px); box-shadow: var(--hm-shadow-2); }
.hm-btn:active, .button:active, .woocommerce button.button:active { transform: translateY(0) scale(0.98); box-shadow: var(--hm-shadow-1); }
/* Boutons WooCommerce « alt » (achat, commande) : jamais le violet par défaut, même désactivés.
Aucun sélecteur de survol dans cette liste : à spécificité égale et placé plus bas, il annulerait
l'assombrissement de la règle suivante et le bouton d'achat ne réagirait plus au survol.
Les variantes désactivées, elles, pèsent (0,4,1) et gardent le brun même sous le curseur. */
.hm-btn--primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled[disabled] { background: var(--hm-brown); color: #fff; }
.hm-btn--primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: #2b1f18; }
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Reflet discret au survol des boutons principaux (coupé si l'utilisateur limite les animations). */
.hm-btn--primary { position: relative; overflow: hidden; }
.hm-btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%); transform: translateX(-110%); transition: transform 0.7s var(--hm-ease); pointer-events: none; }
.hm-btn--primary:hover::after { transform: translateX(110%); }
.hm-btn--ghost { background: transparent; color: var(--hm-brown); border-color: var(--hm-border-strong); box-shadow: none; }
.hm-btn--ghost:hover { background: var(--hm-brown); color: #fff; border-color: var(--hm-brown); }
.hm-btn--small { padding: 8px 14px; min-height: 38px; font-size: 0.88rem; }
/* Sous 700 px, les petits boutons remontent à la cible tactile de 44 px du reste du site : ce sont
eux qui forment les puces de filtre des pages de catégorie (.hm-chips), coincées à 38 px.
Les lignes de catégorie de la recherche instantanée (module « recherche ») avaient la même
hauteur courte : elles suivent ici, « align-items » gardant leur texte centré. */
@media (max-width: 699px) {
.hm-btn--small { min-height: 44px; }
.hmb-results__cat a { min-height: 44px; align-items: center; }
}
.hm-btn--block, .woocommerce button.button.alt.single_add_to_cart_button { width: 100%; }
.woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce a.button:disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.hm-btn.loading, .button.loading { color: transparent; position: relative; pointer-events: none; }
.hm-btn.loading::after, .button.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: hm-spin 0.7s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--hm-brown);
position: relative; transition: background 0.15s, transform 0.15s var(--hm-ease);
}
.hm-iconbtn:hover { background: rgba(63, 47, 37, 0.06); }
.hm-iconbtn:active { transform: scale(0.94); }
/* Champs */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="date"], textarea, select, .woocommerce .select2-container--default .select2-selection--single {
width: 100%; padding: 12px 14px; min-height: 46px;
border: 1.5px solid var(--hm-border-strong); border-radius: var(--hm-radius-sm);
background: var(--hm-surface); color: var(--hm-brown);
transition: border-color 0.15s, box-shadow 0.15s;
}
/* Focus d'un champ : le caramel clair sur bordure de 1,5 px ne donnait que 2,9:1 contre le blanc,
et le halo à 16 % était presque invisible. Le caramel foncé monte la bordure à 5,8:1 (4,1:1
contre la bordure au repos) et le halo passe à 3 px bien marqués. */
input:focus, textarea:focus, select:focus { border-color: var(--hm-caramel-dark); box-shadow: 0 0 0 3px rgba(201, 138, 91, 0.45); outline: none; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
textarea { min-height: 120px; }
label { font-weight: 600; }
/* Cases à cocher (CGV, création de compte, adresse de livraison) : le rendu natif de 13 px détonnait avec le reste du design. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--hm-caramel-dark); cursor: pointer; flex: none; }
.woocommerce-form__label-for-checkbox, .woocommerce form .form-row label.checkbox { padding: 8px 0; cursor: pointer; }
/* Badges */
.hm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--hm-radius-pill); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--hm-brown); color: #fff; box-shadow: var(--hm-shadow-1); }
.hm-badge--sale { background: var(--hm-rasp); }
.hm-badge--fav { background: var(--hm-peach-strong); color: var(--hm-brown); }
.hm-badge--out { background: var(--hm-muted); }
/* Badges : libellé court sur mobile. */
.hm-badge__short { display: none; }
@media (max-width: 699px) { .hm-badge__long { display: none; } .hm-badge__short { display: inline; } }
/* -------------------------------------------------------------------------
3. En-tête
---------------------------------------------------------------------- */
/* L'en-tête colle SOUS le bandeau d'annonces, jamais par-dessus : sa position de blocage suit
donc la hauteur réelle de celui-ci (theme.js). Zéro quand il n'y a pas de bandeau. */
.hm-header { position: sticky; top: var(--hm-annonces-h, 0px); z-index: 60; background: var(--hm-glass); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--hm-border); transition: box-shadow 0.25s, background 0.25s; }
.hm-header.is-scrolled { box-shadow: var(--hm-shadow-1); background: var(--hm-glass-strong); }
.hm-header__inner { display: flex; align-items: center; gap: 4px; min-height: var(--hm-header-h); transition: min-height 0.25s var(--hm-ease); }
/* « min-height » et non « height » : le logo mesure 42 px sur mobile, la cible tactile en réclame 44. */
.hm-logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; flex: none; }
/* Le bouton du menu passe à DROITE des outils (demande de Simon, 14/09) : le logo ouvre la ligne
à gauche, et le tiroir qu'il commande glisse depuis la droite. L'ordre du DOM ne change pas,
le bouton reste le premier élément atteint au clavier. */
.hm-burger { order: 1; margin-left: 4px; }
/* Le logo Hot Milk est un lettrage large et fin : à 42 px de haut, le sous-titre n'était plus
lisible et la marque pesait moins que les icônes voisines. 52 px sur mobile, 72 sur ordinateur
(l'en-tête en réserve 84), 58 une fois l'en-tête compacté. */
.hm-logo__img { height: 52px; width: auto; transition: height 0.25s var(--hm-ease); }
.hm-logo--text { flex-direction: column; line-height: 1; }
.hm-logo__name { font-family: var(--hm-font-title); font-size: 1.5rem; color: var(--hm-brown); }
.hm-logo__sub { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hm-muted); }
.hm-header__tools { display: flex; align-items: center; }
.hm-header__account { display: none; }
/* Pastille du panier : 10,9 px de blanc sur caramel clair ne donnaient que 2,89:1, d'où le caramel foncé. */
.hm-cart-count { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hm-caramel-dark); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; display: none; box-shadow: 0 0 0 2px var(--hm-glass-strong); }
.hm-cart-count.is-visible { display: block; }
.hm-cart-count.is-pop { animation: hm-pop 0.5s var(--hm-ease); }
.hm-nav { display: none; }
.hm-header__search { border-top: 1px solid var(--hm-border); background: var(--hm-surface); padding: 12px 0; animation: hm-fade-in 0.25s var(--hm-ease); }
.hm-header__search[hidden] { display: none; }
.hm-search { display: flex; gap: 8px; }
.hm-search__input { flex: 1; }
/* min-height plutôt que height : le conteneur est en flex (align-items stretch), le bouton suit donc
la hauteur réelle du champ (51 px) au lieu de laisser 5 px de vide sous lui. */
.hm-search__btn { width: 46px; min-height: 46px; flex: none; border-radius: var(--hm-radius-sm); border: 0; background: var(--hm-brown); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 900px) {
.hm-burger { display: none; }
.hm-logo__img { height: 72px; }
.hm-header.is-compact .hm-logo__img { height: 58px; }
/* La hauteur réduite est publiée sur (theme.js pose la classe sur les deux) : posée sur
.hm-header seule, elle restait invisible du reste de la page et la colonne d'achat collante
comme scroll-padding-top continuaient de réserver 84 px, soit 32 px de vide au défilement.
« is-compact » et non « is-scrolled » : seule cette classe-ci change une hauteur, et elle a
ses propres seuils d'entrée et de sortie (theme.js) pour ne plus faire vibrer l'en-tête. */
html.is-compact { --hm-header-h: 68px; }
.hm-header__account { display: inline-flex; }
.hm-header__inner { gap: 24px; }
.hm-nav { display: block; margin-left: 8px; }
.hm-nav__list, .hm-nav__list ul { list-style: none; margin: 0; padding: 0; }
.hm-nav__list { display: flex; gap: 2px; }
.hm-nav__list > li { position: relative; }
/* « nowrap » : le menu principal ne se coupe jamais en deux lignes. */
.hm-nav__list > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: var(--hm-radius-pill); color: var(--hm-brown); font-weight: 600; font-size: 0.95rem; position: relative; white-space: nowrap; }
.hm-nav__list > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--hm-caramel); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--hm-ease); }
.hm-nav__list > li:hover > a::after, .hm-nav__list > li.current-menu-item > a::after, .hm-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.hm-nav__list > li.menu-item-has-children > a .hm-nav__chev { display: inline-flex; opacity: 0.6; transition: transform 0.2s; }
.hm-nav__list > li.menu-item-has-children:hover > a .hm-nav__chev { transform: rotate(180deg); }
.hm-nav__list .sub-menu { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow-3); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s, transform 0.18s var(--hm-ease), visibility 0.18s; z-index: 5; }
.hm-nav__list > li:hover > .sub-menu, .hm-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.hm-nav__list .sub-menu a { display: block; padding: 10px 12px; border-radius: var(--hm-radius-xs); color: var(--hm-brown); }
.hm-nav__list .sub-menu a:hover { background: var(--hm-surface-2); }
}
/* Menu principal plus compact entre 900 et 1180 px (doit rester après la règle ci-dessus : même poids). */
@media (min-width: 900px) and (max-width: 1180px) { .hm-nav__list { gap: 4px; } .hm-nav__list > li > a { font-size: 0.88rem; padding-left: 8px; padding-right: 8px; } }
/* Entre 900 et 999 px : espacements resserrés et icône compte masquée (elle reste dans le pied de page et dans Mon compte), pour que le logo garde ses 109 px au lieu d'être écrasé. */
@media (min-width: 900px) and (max-width: 999px) { .hm-header__inner { gap: 16px; } .hm-header__account { display: none; } }
/* -------------------------------------------------------------------------
4. Barre du bas + tiroir (mobile)
---------------------------------------------------------------------- */
.hm-bottombar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
height: calc(var(--hm-bottombar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--hm-glass-strong); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-top: 1px solid var(--hm-border); box-shadow: 0 -8px 30px -12px rgba(63, 47, 37, 0.18);
}
.hm-bottombar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--hm-brown-soft); font-size: 0.66rem; font-weight: 700; position: relative; text-decoration: none; transition: color 0.15s; }
.hm-bottombar__item .hm-icon { transition: transform 0.2s var(--hm-ease); }
.hm-bottombar__item:active .hm-icon { transform: scale(0.9); }
.hm-bottombar__item.is-active, .hm-bottombar__item:hover { color: var(--hm-caramel-dark); }
.hm-bottombar__item.is-active::before { content: ""; position: absolute; top: 0; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--hm-caramel); }
.hm-bottombar__item .hm-cart-count { top: 6px; right: calc(50% - 22px); }
@media (min-width: 900px) { .hm-bottombar { display: none; } }
.hm-drawer { position: fixed; inset: 0; z-index: 90; }
.hm-drawer[hidden] { display: none; }
.hm-drawer__backdrop { position: absolute; inset: 0; background: var(--hm-veil); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s; }
.hm-drawer.is-open .hm-drawer__backdrop { opacity: 1; }
.hm-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 420px); background: var(--hm-bg); border-radius: 24px 0 0 24px; box-shadow: var(--hm-shadow-3); overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(100%); transition: transform 0.36s var(--hm-ease); }
.hm-drawer.is-open .hm-drawer__panel { transform: none; }
.hm-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hm-drawer__title { margin: 0; font-size: 1.5rem; }
.hm-drawer__search { margin-bottom: 18px; }
.hm-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Pleine largeur pour les entrées de premier niveau (« Toute la boutique » et les quatre pages) :
sur deux colonnes il ne restait que 81 px de libellé, « Hot Milk Magazine » passait sur deux lignes
et les rangées n'avaient pas la même hauteur. Les catégories (--sub) restent sur deux colonnes. */
.hm-tiles__item--wide, .hm-tiles__item:not(.hm-tiles__item--sub) { grid-column: 1 / -1; }
.hm-tile--sub { min-height: 54px; background: var(--hm-surface); box-shadow: none; font-weight: 600; font-size: 0.92rem; line-height: 1.25; gap: 10px; padding: 10px 12px; }
.hm-tile--sub .hm-tile__icon { width: 28px; height: 28px; border-radius: 8px; background: var(--hm-surface-2); color: var(--hm-muted); }
.hm-tile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 12px 14px; border: 1px solid var(--hm-border); border-radius: var(--hm-radius); background: var(--hm-surface); color: var(--hm-brown); font-weight: 700; text-align: left; text-decoration: none; box-shadow: var(--hm-shadow-1); transition: transform 0.15s var(--hm-ease), box-shadow 0.15s, background 0.15s; }
.hm-tile:hover, .hm-tile:active { background: var(--hm-peach); transform: translateY(-1px); }
.hm-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--hm-peach); color: var(--hm-caramel-dark); flex: none; }
/* « anywhere » hachait les mots en plein milieu : on ne coupe que les mots trop longs, avec une césure propre (html lang="fr-FR"). */
.hm-tile__label { flex: 1; min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Le tiroir aplatit les sous-menus (Hotmilk_Tiles_Walker) : chaque catégorie est une tuile
secondaire, atteignable en un clic. Il n'y a donc ni liste dépliable ni chevron qui pivote —
ce chevron-ci n'est qu'un repère sur une tuile qui mène elle-même à d'autres pages. */
.hm-tile .hm-icon--chevron { color: var(--hm-muted); }
.hm-drawer__links { margin-top: 20px; display: grid; gap: 4px; }
.hm-drawer__links a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: var(--hm-radius-xs); color: var(--hm-brown); font-weight: 600; }
.hm-drawer__links a:hover { background: var(--hm-surface-2); }
body.hm-drawer-open { overflow: hidden; }
/* Tuiles sur petits écrans : rendre de la place au libellé (icône, gouttière et retraits resserrés),
puis une seule colonne sous 360 px, où deux colonnes ne laissaient que 56 px de texte. */
@media (max-width: 399px) {
.hm-tiles { gap: 6px; }
.hm-tile { gap: 6px; padding: 10px 8px; }
.hm-tile__icon { width: 26px; height: 26px; border-radius: 9px; }
.hm-tile--sub .hm-tile__icon { width: 24px; height: 24px; }
.hm-tile__label { font-size: 0.92rem; }
}
@media (max-width: 359px) {
.hm-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* -------------------------------------------------------------------------
5. Accueil
---------------------------------------------------------------------- */
.hm-hero { position: relative; display: grid; min-height: 64vh; align-items: end; background: var(--hm-peach); overflow: hidden; border-radius: 0 0 var(--hm-radius) var(--hm-radius); isolation: isolate; }
.hm-hero--plain { min-height: 0; padding: 48px 0 40px; align-items: center; }
.hm-hero__media { position: absolute; inset: 0; }
/* Parallaxe : le visuel du héros dépasse de son cadre pour ne jamais laisser de vide en glissant. */
.hm-hero__media[data-hm-parallax] { top: -14%; bottom: -14%; will-change: transform; }
.hm-hero__img { width: 100%; height: 100%; object-fit: cover; animation: hm-kenburns 22s ease-out both; }
/* Voile du héros : allégé en bas (0,45 puis 0,7 au lieu de 0,55 et 0,82) pour garder la chaleur de la photo.
Le texte blanc reste très au-dessus du seuil AA (mesuré à 8,9:1) et le bouton pêche à 7,4:1. */
.hm-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(63,47,37,0.08) 10%, rgba(63,47,37,0.45) 62%, rgba(63,47,37,0.7) 100%), linear-gradient(100deg, rgba(63,47,37,0.55) 0%, rgba(63,47,37,0.15) 45%, rgba(63,47,37,0) 70%); }
.hm-hero__content { position: relative; padding-top: 40px; padding-bottom: 36px; max-width: 760px; margin-left: 0; }
.hm-hero__content > * { animation: hm-rise 0.7s var(--hm-ease) both; }
.hm-hero__content > :nth-child(2) { animation-delay: 0.1s; }
.hm-hero__content > :nth-child(3) { animation-delay: 0.2s; }
.hm-hero__content > :nth-child(4) { animation-delay: 0.3s; }
.hm-hero:not(.hm-hero--plain) .hm-hero__content, .hm-hero:not(.hm-hero--plain) .hm-hero__content h1 { color: #fff; }
/* Sur-titre du héros : la pêche soutenue tombait à 3,4:1 sur les zones claires de la photo,
là où le voile n'est encore qu'à 0,25 d'opacité. La pêche claire et la même ombre portée
que le paragraphe remontent le contraste sans changer la teinte ni la taille. */
.hm-hero:not(.hm-hero--plain) .hm-eyebrow { color: var(--hm-peach); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }
.hm-hero__title { font-size: clamp(2.1rem, 6vw, 3.8rem); margin-bottom: 0.3em; text-shadow: 0 2px 24px rgba(0,0,0,0.18); }
.hm-hero__text { font-size: 1.05rem; max-width: 560px; text-shadow: 0 1px 12px rgba(0,0,0,0.25); }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-hero:not(.hm-hero--plain) .hm-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.hm-hero:not(.hm-hero--plain) .hm-btn--ghost:hover { background: #fff; color: var(--hm-brown); border-color: #fff; }
/* Sur la photo du héros, le brun du bouton principal se noyait dans le voile brun (1,4:1) : on passe en pêche sur brun (environ 7:1). */
.hm-hero:not(.hm-hero--plain) .hm-btn--primary { background: var(--hm-peach); color: var(--hm-brown); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35); }
.hm-hero:not(.hm-hero--plain) .hm-btn--primary:hover { background: #fff; color: var(--hm-brown); }
@media (min-width: 900px) { .hm-hero { min-height: 72vh; margin: 0 var(--hm-gutter); border-radius: var(--hm-radius); } .hm-hero__content { padding: 64px 40px 56px; } }
.hm-reassurance { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-reassurance__item { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius-sm); color: var(--hm-caramel-dark); box-shadow: var(--hm-shadow-1); }
.hm-reassurance__item span { display: flex; flex-direction: column; color: var(--hm-brown); font-size: 0.85rem; line-height: 1.3; }
.hm-reassurance__item em { font-style: normal; color: var(--hm-muted); font-size: 0.78rem; }
.hm-reassurance--compact { grid-template-columns: 1fr 1fr; margin-top: 16px; }
.hm-reassurance--compact .hm-reassurance__item { padding: 8px 10px; border: 0; background: var(--hm-surface-2); box-shadow: none; }
/* Quatre colonnes seulement pour le bandeau pleine largeur : la variante compacte (colonne d'achat, récapitulatif de commande) reste sur deux colonnes, même sur ordinateur. */
@media (min-width: 900px) { .hm-reassurance { margin-top: 24px; } .hm-reassurance:not(.hm-reassurance--compact) { grid-template-columns: repeat(4, 1fr); } }
.hm-section { padding: 44px 0; }
.hm-section--soft { background: var(--hm-surface-2); }
.hm-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.hm-section__head--center { justify-content: center; text-align: center; }
/* Coups de cœur : titre centré au-dessus des cartes, « Tout voir » dessous (demande de Simon, 13/09). */
.hm-section__head--stack { flex-direction: column; align-items: center; gap: 6px; }
.hm-section__title { margin: 0; }
@media (min-width: 900px) { .hm-section { padding: 72px 0; } }
.hm-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hm-cat__link { display: block; text-decoration: none; color: var(--hm-brown); }
/* Fond crème plutôt que pêche : cinq vignettes sur huit sont des packshots sur blanc studio
(mesuré : coins à 255,255,255) posés à côté de deux photos d'ambiance, soit des boîtes
blanches disparates sur le crème de la page. « isolation: isolate » enferme le mélange dans
la vignette, pour qu'il ne descende jamais jusqu'au fond de page ni sous l'ombre portée. */
.hm-cat__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--hm-radius); overflow: hidden; isolation: isolate; background: var(--hm-surface-2); margin-bottom: 10px; box-shadow: var(--hm-shadow-1); transition: box-shadow 0.25s; }
.hm-cat__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(63,47,37,0) 55%, rgba(63,47,37,0.28) 100%); opacity: 0; transition: opacity 0.3s; }
/* « multiply » sur le fond crème : le blanc multiplié par le crème redonne exactement le crème,
le produit se pose donc sur la vignette au lieu de flotter dans un cadre blanc. Les photos
d'ambiance n'y perdent qu'un voile chaud de quelques pour cent, qui les accorde aux autres. */
.hm-cat__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 0.7s var(--hm-ease); }
.hm-cat__link:hover img { transform: scale(1.06); }
.hm-cat__link:hover .hm-cat__media { box-shadow: var(--hm-shadow-2); }
.hm-cat__link:hover .hm-cat__media::after { opacity: 1; }
.hm-cat__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--hm-caramel); }
.hm-cat__name { display: block; font-family: var(--hm-font-title); font-size: 1.2rem; }
.hm-cat__count { font-size: 0.8rem; color: var(--hm-muted); }
@media (min-width: 700px) { .hm-cats { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .hm-cats { grid-template-columns: repeat(4, 1fr); } }
.hm-pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.hm-pillar { padding: 26px 24px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow-1); transition: transform 0.25s var(--hm-ease), box-shadow 0.25s; }
.hm-pillar:hover { transform: translateY(-3px); box-shadow: var(--hm-shadow-2); }
.hm-pillar p { margin: 0; color: var(--hm-brown-soft); }
.hm-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: var(--hm-peach); color: var(--hm-caramel-dark); margin-bottom: 14px; }
.hm-pillar__title { font-size: 1.25rem; margin-bottom: 6px; }
/* 700 px comme les catégories et les produits : à 768 px les piliers restaient trois cartes plates
l'une sous l'autre alors que la place existait pour trois colonnes. */
@media (min-width: 700px) { .hm-pillars { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
/* Le bloc est un .hm-container à fond pêche : à 100 % de large, son fond allait de bord à bord sur
mobile et ses arrondis se cognaient au bord de l'écran. La gouttière est retirée de sa largeur
(et de son plafond) pour qu'il reste centré et en retrait à toutes les tailles (14/09). */
.hm-mission { display: grid; gap: 24px; align-items: center; background: var(--hm-peach); border-radius: var(--hm-radius); padding: 28px 22px; width: calc(100% - 2 * var(--hm-gutter)); max-width: calc(var(--hm-container) - 2 * var(--hm-gutter)); }
.hm-mission__media[data-hm-parallax] { will-change: transform; }
.hm-mission__media img, .hm-mission__placeholder { border-radius: var(--hm-radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--hm-shadow-2); }
.hm-mission__placeholder { display: flex; align-items: center; justify-content: center; background: var(--hm-peach-strong); color: var(--hm-caramel-dark); box-shadow: none; }
@media (min-width: 900px) { .hm-mission { grid-template-columns: 5fr 7fr; gap: 48px; padding: 48px; } }
/* -------------------------------------------------------------------------
6. Grille produits et cartes
---------------------------------------------------------------------- */
/* Espacement vertical seul : le padding-inline de .hm-container (gouttière) doit rester actif. */
.hm-page { padding-block: 20px 48px; }
/* Pages éditoriales (FAQ, contact, mission, mentions, précommandes, 404) : 780 px donnaient
environ 104 caractères par ligne en Nunito 16,5 px. 680 px et un corps légèrement plus grand
ramènent la ligne autour de 86 caractères. Le panier, la commande et Mon compte passent par
« .hm-page--shop » et ne sont pas concernés. */
.hm-page--narrow .hm-article { max-width: 680px; }
.hm-page--narrow .hm-prose { font-size: 1.08rem; }
/* Adresses e-mail et URL des pages légales : insécables, elles poussaient la ligne hors d'un
écran de 320 px et la page dézoomait. Coupure autorisée n'importe où, en dernier recours. */
.hm-prose { overflow-wrap: anywhere; }
.hm-page__head { margin-bottom: 20px; }
.hm-page__title { margin-bottom: 0.3em; }
.hm-page__intro { max-width: 720px; color: var(--hm-brown-soft); }
.hm-shop-wrap { padding-block: 16px 48px; }
.hm-breadcrumb { font-size: 0.82rem; color: var(--hm-muted); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hm-breadcrumb a { color: var(--hm-muted); }
.hm-breadcrumb a:hover { color: var(--hm-brown); }
.hm-breadcrumb__sep { opacity: 0.5; }
/* -------------------------------------------------------------------------
Pages de liste : en-tête centré, panneau de filtres, grille aérée
----------------------------------------------------------------------
La boutique ouvrait sur un titre à gauche, une description à gauche, trois rangées de
commandes à gauche, puis un mur de vingt-six cartes. Rien n'annonçait rien, et sur un écran
large tout était tassé contre le bord gauche d'un conteneur de 1 200 px.
Trois gestes : l'en-tête est centré et respire, les commandes sont réunies sur une surface
à part (hm-archive__barre, ouverte dans inc/woocommerce.php), et la grille reprend de l'air
au-delà de 1 000 px. Sur mobile, tout redevient aligné à gauche : centrer un paragraphe de
six lignes sur 360 px le rend illisible.
---------------------------------------------------------------------- */
@media (min-width: 700px) {
.hm-archive__sur { text-align: center; margin-bottom: 0.4em; }
.woocommerce-products-header { text-align: center; margin-bottom: 26px; }
.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description { margin-inline: auto; }
/* Un filet court sous le titre : il ferme l'en-tête sans peser comme une bordure pleine. */
.woocommerce-products-header__title { position: relative; padding-bottom: 18px; margin-bottom: 14px; }
.woocommerce-products-header__title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--hm-caramel); transform: translateX(-50%); }
}
.hm-archive__barre { margin: 0 0 28px; }
@media (min-width: 700px) {
.hm-archive__barre {
padding: 20px 22px 16px;
background: var(--hm-surface);
border: 1px solid var(--hm-border);
border-radius: var(--hm-radius);
box-shadow: var(--hm-shadow-1);
}
/* Les puces d'univers, centrées elles aussi : c'est la première décision de la page. */
.hm-archive__barre .hm-chips { justify-content: center; margin-bottom: 14px; }
.hm-archive__barre .hmb-filtres__rang { justify-content: center; }
.hm-archive__barre .hmb-filtres__etat { text-align: center; }
/* La barre de tri se détache du reste par un filet, et non par un blanc de plus. */
.hm-archive__barre .hm-toolbar { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hm-border); }
}
/* Grille : plus d'air à partir de 1 000 px, où quatre colonnes de 260 px se touchaient presque. */
@media (min-width: 1000px) {
ul.products.hm-grid:not(.hm-carousel__piste) { gap: 30px 26px; }
}
/* Entrée décalée des cartes : la vague se lit de gauche à droite, une colonne après l'autre.
theme.js pose déjà « hm-reveal » et un retard par groupe de quatre ; on l'allonge un peu ici
pour que la vague soit perceptible sur une grille large sans ralentir la lecture. */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
.hm-js ul.products.hm-grid > .hm-card.hm-reveal { transform: translateY(20px); }
}
.hm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 18px; flex-wrap: wrap; }
.hm-toolbar .woocommerce-result-count { margin: 0; color: var(--hm-muted); font-size: 0.88rem; }
.hm-toolbar .woocommerce-ordering { margin: 0; min-width: 0; max-width: 100%; }
/* 16 px pleins : sous ce seuil, iOS zoome la page au focus du champ et la laisse agrandie. */
.hm-toolbar .woocommerce-ordering select { min-height: 44px; padding: 8px 36px 8px 12px; width: auto; max-width: 100%; font-size: 1rem; border-radius: var(--hm-radius-pill); }
.woocommerce-products-header__title { margin-bottom: 0.2em; }
/* WooCommerce rend la description de la page Boutique dans « .page-description » et celle des
catégories dans « .term-description » : les deux suivent la même mesure de lecture. */
.term-description, .page-description { max-width: 680px; color: var(--hm-brown-soft); margin-bottom: 8px; font-size: 1.05rem; }
/* Seul le dernier paragraphe perd sa marge : les 16 px de WooCommerce s'ajoutaient aux 8 px du bloc. */
.term-description p:last-child, .page-description p:last-child { margin-bottom: 0; }
ul.products.hm-grid, .hm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
ul.products.hm-grid::before, ul.products.hm-grid::after, .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
@media (min-width: 700px) { ul.products.hm-grid, .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
/* Quatre colonnes : le sélecteur doit rester au moins aussi spécifique que « ul.products.hm-grid » (0,2,1) sinon la règle 3 colonnes gagne. */
@media (min-width: 1000px) { ul.products.hm-grid.columns-4, ul.products.hm-grid.hm-grid--4, .hm-grid.hm-grid--4, .hm-grid--4, .related ul.products, .up-sells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* -------------------------------------------------------------------------
Carrousel (sélection de l'accueil)
----------------------------------------------------------------------
La piste est la grille de produits elle-même, repassée en rangée qui défile sans fin
(theme.js duplique la série de part et d'autre). Les cartes gardent la largeur qu'elles
auraient eue dans la grille, pour que la rangée ne change pas d'allure d'une section à
l'autre : deux par écran sur téléphone, trois à partir de 700 px, quatre à partir de 1000 px.
Deux choses disent que la rangée continue au-delà du cadre : les bords s'estompent, et la
carte suivante est toujours amorcée à droite. Sans elles, une rangée qui boucle ressemble
à une rangée qui saute.
---------------------------------------------------------------------- */
.hm-carousel { position: relative; }
ul.products.hm-carousel__piste, .hm-carousel__piste {
display: flex; gap: 12px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
padding-block: 4px 8px;
cursor: grab;
}
.hm-carousel__piste:active { cursor: grabbing; }
.hm-carousel__piste::-webkit-scrollbar { display: none; }
.hm-carousel__piste > li { flex: 0 0 calc((100% - 12px) / 2); scroll-snap-align: start; }
/* Les bords s'estompent : la rangée n'a pas de fin, elle ne doit pas non plus avoir de bout
franc. Le fondu est plus large sur ordinateur, où les flèches vivent dans cette marge.
Réserve verticale dans le masque : sans elle, l'ombre portée des cartes serait coupée net. */
@media (min-width: 700px) {
ul.products.hm-carousel__piste, .hm-carousel__piste { gap: 22px; }
.hm-carousel__piste > li { flex-basis: calc((100% - 44px) / 3); }
.hm-carousel.is-ready .hm-carousel__piste {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}
}
@media (min-width: 1000px) {
.hm-carousel__piste > li { flex-basis: calc((100% - 66px) / 4); }
}
@media (prefers-reduced-motion: reduce) { .hm-carousel__piste { scroll-behavior: auto; } }
/* Flèches : posées par theme.js, donc jamais rendues à vide. Elles chevauchent la rangée sur
grand écran et passent sous elle en dessous de 1100 px, où la place manque sur les côtés.
Aucune n'est jamais désactivée : la rangée boucle, il y a toujours un avant et un après. */
.hm-carousel__nav { display: none; }
.hm-carousel.is-ready .hm-carousel__nav { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.hm-carousel__fleche {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 50%;
border: 0; background: var(--hm-surface); color: var(--hm-brown);
box-shadow: 0 8px 24px -8px rgba(63, 47, 37, 0.35), 0 0 0 1px var(--hm-border);
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s var(--hm-ease), box-shadow 0.2s;
}
.hm-carousel__fleche:hover { background: var(--hm-brown); color: #fff; transform: scale(1.08); box-shadow: 0 14px 30px -10px rgba(63, 47, 37, 0.45); }
.hm-carousel__fleche:active { transform: scale(0.96); }
@media (min-width: 1100px) {
/* « display: contents » : les deux boutons se placent eux-mêmes dans le cadre du carrousel,
la boîte de navigation ne réserve plus de rangée sous la piste. */
.hm-carousel.is-ready .hm-carousel__nav { display: contents; }
.hm-carousel__fleche { position: absolute; top: calc(50% - 23px); z-index: 2; opacity: 0; transform: scale(0.9); }
.hm-carousel__fleche--prev { left: -8px; }
.hm-carousel__fleche--next { right: -8px; }
/* Elles n'apparaissent qu'à l'approche : au repos, la rangée reste une rangée de produits.
Le focus clavier les révèle aussi, sinon elles seraient inatteignables au clavier. */
.hm-carousel:hover .hm-carousel__fleche,
.hm-carousel:focus-within .hm-carousel__fleche { opacity: 1; transform: none; }
.hm-carousel__fleche:focus-visible { opacity: 1; transform: none; }
}
/* Pastilles de position : une par vue, pas une par carte — sinon huit points pour deux gestes.
Elles reposent sur un rail discret, qui donne la longueur totale de la rangée. */
.hm-carousel__points { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 18px; padding: 6px 12px; border-radius: var(--hm-radius-pill); background: rgba(63, 47, 37, 0.045); width: fit-content; margin-inline: auto; }
.hm-carousel__points:empty { display: none; }
.hm-carousel__point { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--hm-border-strong); cursor: pointer; transition: width 0.3s var(--hm-ease), background 0.3s; }
.hm-carousel__point:hover { background: var(--hm-caramel); }
.hm-carousel__point.is-on { width: 26px; border-radius: 4px; background: var(--hm-caramel-dark); }
/* Cible tactile de 44 px sans grossir le dessin : la boîte cliquable déborde en transparence. */
.hm-carousel__point::before { content: ""; position: absolute; inset: -18px -8px; }
/* « min-width: 0 » : sans lui, à 320 px, la carte refusait de descendre sous la largeur de son
contenu et faisait déborder la grille horizontalement. */
.hm-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); overflow: hidden; box-shadow: var(--hm-shadow-1); transition: transform 0.3s var(--hm-ease), box-shadow 0.3s, border-color 0.3s; }
.hm-card:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow-2); border-color: transparent; }
.hm-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--hm-surface-2); overflow: hidden; }
.hm-card__img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s, transform 0.8s var(--hm-ease); }
.hm-card:hover .hm-card__img { transform: scale(1.05); }
.hm-card__img--hover { position: absolute; inset: 0; opacity: 0; }
.hm-card:hover .hm-card__img--hover { opacity: 1; }
.hm-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 1; }
.hm-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
/* Une seule ligne, toujours : deux rayons cumulés (« Recommandé Hot Milk, Vêtements et Accessoires »)
passaient sur deux lignes et faisaient grandir toute la rangée de cartes de 18 px. */
.hm-card__cat { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hm-muted); margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card__title { font-family: var(--hm-font-title); font-size: 1.12rem; font-weight: 500; line-height: 1.25; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 0; }
.hm-card__title a { color: var(--hm-brown); }
.hm-card__title a::before { content: ""; position: absolute; inset: 0; }
.hm-card__rating .star-rating { margin: 2px 0; }
.hm-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; }
.hm-card__foot .hm-btn { position: relative; z-index: 1; }
.hm-card__price { font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.hm-card__price del { color: var(--hm-muted); font-weight: 400; font-size: 0.85em; margin-right: 4px; }
.hm-card__price ins { text-decoration: none; color: var(--hm-rasp); }
.hm-card .added_to_cart { display: none; }
.hm-card .hm-btn.added { background: var(--hm-sage); }
@media (hover: hover) and (min-width: 700px) {
.hm-card__foot .hm-btn { opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s var(--hm-ease), background 0.18s; }
.hm-card:hover .hm-card__foot .hm-btn, .hm-card:focus-within .hm-card__foot .hm-btn { opacity: 1; transform: none; }
}
/* Cartes sur mobile : corps resserré, catégorie masquée, titre plus court. */
@media (max-width: 699px) {
.hm-card__body { padding: 10px 12px 12px; }
.hm-card__cat { display: none; }
.hm-card__title { font-size: 1rem; }
}
/* Pied de carte sur mobile ET tablette : jusqu'à 899 px la grille tient trois colonnes de moins de 240 px,
où le prix par fourchette et le libellé « Ajouter au panier » se cassaient en deux lignes côte à côte.
Le prix garde sa ligne, le bouton passe dessous en pleine largeur, avec la cible tactile de 44 px. */
@media (max-width: 899px) {
.hm-card__price { font-size: 0.95rem; }
.hm-card__foot { flex-wrap: wrap; }
.hm-card__foot .hm-btn { flex: 1 1 100%; justify-content: center; max-width: 100%; min-height: 44px; padding: 8px 10px; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Sous 400 px la boîte de contenu tombe sous la largeur du libellé : mieux vaut deux lignes qu'une ellipse. */
@media (max-width: 399px) {
.hm-card__foot .hm-btn { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
}
/* À 320 px, deux lignes de 1 rem ne montraient que « Affiche / numérique… » : les huit affiches
devenaient indiscernables. 0,9 rem sur trois lignes fait tenir le prénom de l'héroïne. */
@media (max-width: 359px) { .hm-card__body { padding: 8px 10px 10px; } .hm-card__title { font-size: 0.9rem; -webkit-line-clamp: 3; } }
/* -------------------------------------------------------------------------
7. Fiche produit
---------------------------------------------------------------------- */
.hm-product { display: grid; gap: 24px; }
.hm-product__gallery, .hm-product__summary { min-width: 0; }
/* Repère du badge « Promo » : il est posé avant la galerie, hors de son cadre relatif. */
.hm-product__gallery { position: relative; }
.hm-product__gallery .woocommerce-product-gallery { position: relative; margin: 0; }
.hm-product__gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.hm-product__gallery .woocommerce-product-gallery__image img { border-radius: var(--hm-radius); width: 100%; box-shadow: var(--hm-shadow-1); }
/* Bande de vignettes : jusqu'à 18 images. Sans barre de défilement ni fondu, la moitié restait
invisible et rien ne disait qu'on pouvait faire défiler. On rend donc la barre discrète mais visible,
et le bord droit s'estompe tant que la bande défile (sous 900 px). */
.hm-product__gallery .flex-control-thumbs, .woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs { list-style: none; margin: 12px 0 0; padding: 4px 2px 8px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--hm-border-strong) transparent; }
.hm-product__gallery .flex-control-thumbs::-webkit-scrollbar { height: 6px; }
.hm-product__gallery .flex-control-thumbs::-webkit-scrollbar-track { background: transparent; }
.hm-product__gallery .flex-control-thumbs::-webkit-scrollbar-thumb { background: var(--hm-border-strong); border-radius: 3px; }
@media (max-width: 899px) {
.hm-product__gallery .flex-control-thumbs, .woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs { padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}
/* Une seule rangée, sur tous les écrans : au-delà de ce qui tient, la bande défile (molette, doigt, ou
la vignette active qui est ramenée dans le champ par theme.js). Deux rangées prenaient trop de
place sous la grande image (retour de Simon, 13/09). */
.hm-product__gallery .flex-control-thumbs, .woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs { flex-wrap: nowrap; padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs li { flex: 0 0 68px; width: 68px; height: 68px; float: none; margin: 0; scroll-snap-align: start; }
@media (max-width: 699px) { .woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs li { flex-basis: 56px; width: 56px; height: 56px; } }
.woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: var(--hm-radius-xs); cursor: pointer; opacity: 0.55; border: 2px solid transparent; transition: opacity 0.15s, border-color 0.15s; }
.woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs img.flex-active, .woocommerce div.product .hm-product__gallery div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--hm-caramel); }
/* Loupe de zoom de la galerie. WooCommerce écrit ses règles en (0,3,2) — taille, fond blanc, dessin
noir et surtout « top: 19px ; left: 22px » sur le manche — et battait le thème sur tout sauf la
marge, qui s'ajoutait alors au positionnement de WooCommerce et détachait le manche du cercle.
On repasse devant en (0,4,2), la marge tombe à zéro et le manche est ancré au centre du disque.
La boîte fait 44 px, la cible tactile demandée.
Note : « wc-product-gallery-zoom » n'est pas déclaré aujourd'hui (functions.php), le bouton n'est
donc pas rendu ; ces règles restent justes si le zoom est réactivé. */
.woocommerce div.product .hm-product__gallery div.images .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: var(--hm-glass-strong); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; box-shadow: var(--hm-shadow-1); font-size: 0; }
.woocommerce div.product .hm-product__gallery div.images .woocommerce-product-gallery__trigger::before { content: ""; position: static; width: 12px; height: 12px; margin: 0; border: 2px solid var(--hm-brown); border-radius: 50%; background: none; }
/* Le manche part du centre du disque puis glisse de 11 px le long de sa propre diagonale : il reste
soudé au cercle quelle que soit la taille du bouton. */
.woocommerce div.product .hm-product__gallery div.images .woocommerce-product-gallery__trigger::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 8px; margin: 0; border-radius: 1px; background: var(--hm-brown); transform: translate(-50%, -50%) rotate(-45deg) translateY(11px); }
/* Le filtre du thème rend « hm-badge hm-badge--sale » et non « onsale » (inc/woocommerce.php) :
sans ce sélecteur, le badge d'une fiche en promotion sortait en bloc au-dessus de l'image. */
.hm-product__gallery > .hm-badge--sale { position: absolute; top: 12px; left: 12px; z-index: 5; }
.hm-product__summary .product_title { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: 0.35em; }
.hm-product__summary .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* Prix : WooCommerce impose son vert olive en 0,2,2 ; on reprend la main en 0,3,2 pour garder le brun du thème. */
.woocommerce div.product .hm-product__summary p.price, .woocommerce div.product .hm-product__summary span.price { font-size: 1.55rem; font-weight: 700; color: var(--hm-brown); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.hm-product__summary .price del { color: var(--hm-muted); font-weight: 400; font-size: 0.7em; }
.hm-product__summary .price ins { text-decoration: none; color: var(--hm-rasp); }
.hm-product__summary .woocommerce-product-details__short-description { color: var(--hm-brown-soft); margin-bottom: 18px; font-size: 1.03rem; }
.hm-product__summary form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.hm-product__summary form.cart .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--hm-border-strong); border-radius: var(--hm-radius-pill); overflow: hidden; background: var(--hm-surface); }
.hm-product__summary form.cart .quantity .qty { width: 60px; min-height: 46px; border: 0; text-align: center; border-radius: 0; -moz-appearance: textfield; font-weight: 700; }
.hm-product__summary form.cart .quantity .qty::-webkit-outer-spin-button, .hm-product__summary form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.hm-qty-btn { width: 40px; height: 46px; border: 0; background: transparent; color: var(--hm-brown); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background 0.15s; }
.hm-qty-btn:hover { background: var(--hm-surface-2); }
/* Quantité dans le tableau du panier : même pastille que sur la fiche, en un peu plus compact. */
.woocommerce-cart table.cart .quantity { display: inline-flex; align-items: center; max-width: 100%; border: 1.5px solid var(--hm-border-strong); border-radius: var(--hm-radius-pill); overflow: hidden; background: var(--hm-surface); }
.woocommerce-cart table.cart .quantity .qty { width: 48px; min-width: 32px; min-height: 40px; padding: 6px 4px; border: 0; text-align: center; border-radius: 0; -moz-appearance: textfield; font-weight: 700; }
.woocommerce-cart table.cart .quantity .qty::-webkit-outer-spin-button, .woocommerce-cart table.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.woocommerce-cart table.cart .hm-qty-btn { width: 36px; min-width: 28px; height: 40px; }
.hm-product__summary form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; font-size: 1.02rem; }
.hm-product__summary form.cart.variations_form { flex-direction: column; }
.hm-product__summary .variations { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.hm-product__summary .variations th, .hm-product__summary .variations td { display: block; padding: 0; text-align: left; }
.hm-product__summary .variations th { padding: 8px 0 6px; font-size: 0.9rem; }
.hm-product__summary .variations tr + tr th { padding-top: 12px; }
/* Le select de variation : WooCommerce lui pose margin-right 1em, min-width 75 % et un chevron noir ; on reprend la main (spécificité 0,5,3) pour éviter les 16 px de débordement horizontal. */
.woocommerce div.product .hm-product__summary form.cart .variations select { display: block; width: 100%; max-width: 100%; min-width: 0; margin-right: 0; padding-right: 40px; background-color: var(--hm-surface); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 20px; background-position: right 12px center; }
.hm-product__summary .reset_variations { font-size: 0.85rem; color: var(--hm-muted); display: inline-block; margin-top: 6px; }
/* Cible tactile du lien « Effacer » : 44 px au doigt, sans grossir le texte. Réservé au mobile pour
ne pas ajouter 12 px de vide sous les listes de variations sur ordinateur. */
@media (max-width: 699px) { .hm-product__summary .reset_variations { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; } }
.woocommerce div.product .hm-product__summary .woocommerce-variation-price .price { font-size: 1.3rem; margin: 8px 0; }
.hm-product__summary .woocommerce-variation-add-to-cart { display: flex; gap: 10px; flex-wrap: wrap; }
.hm-product__summary .stock { font-weight: 700; margin: 4px 0; font-size: 0.92rem; }
.hm-product__summary .stock.in-stock { color: var(--hm-sage); }
.hm-product__summary .stock.out-of-stock { color: var(--hm-rasp); }
.hm-product__summary .product_meta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hm-border); font-size: 0.82rem; color: var(--hm-muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hm-product__more { min-width: 0; }
.hm-product__related { margin-top: 48px; }
.hm-product-sections { max-width: 860px; margin: 8px 0 32px; }
.hm-acc__title { transition: color 0.15s, letter-spacing 0.25s; }
.hm-acc__title:hover .hm-icon--down { transform: translateY(2px); }
.hm-acc[open] .hm-acc__title:hover .hm-icon { transform: rotate(180deg) translateY(2px); }
.hm-acc { border-top: 1px solid var(--hm-border); }
.hm-acc:last-child { border-bottom: 1px solid var(--hm-border); }
.hm-acc__title { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-family: var(--hm-font-title); font-size: 1.3rem; cursor: pointer; list-style: none; transition: color 0.15s; }
.hm-acc__title:hover { color: var(--hm-caramel-dark); }
.hm-acc__title::-webkit-details-marker { display: none; }
.hm-acc__title .hm-icon { transition: transform 0.25s var(--hm-ease); color: var(--hm-caramel-dark); }
.hm-acc[open] .hm-acc__title .hm-icon--down { transform: rotate(180deg); }
.hm-acc__body { padding: 0 4px 22px; color: var(--hm-brown-soft); animation: hm-fade-in 0.3s var(--hm-ease); }
.hm-acc__body h2 { display: none; }
.hm-acc__body table { width: 100%; border-collapse: collapse; }
.hm-acc__body th, .hm-acc__body td { padding: 8px 6px; border-bottom: 1px solid var(--hm-border); text-align: left; }
.related > h2, .up-sells > h2, .cross-sells > h2, .cart-collaterals h2 { margin: 16px 0 18px; }
/* Tablette portrait (700 à 899 px) : deux colonnes égales. En une seule colonne, l'image carrée occupait
toute la largeur et rejetait le titre, le prix et le bouton d'achat à plus de 1 000 px du haut. */
@media (min-width: 700px) and (max-width: 899px) {
.hm-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } .hm-product__more { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
.hm-product { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; } .hm-product__gallery { grid-column: 1; grid-row: 1; } .hm-product__summary { grid-column: 2; grid-row: 1; align-self: start; } .hm-product__more { grid-column: 1 / -1; grid-row: 2; }
}
/* Colonne d'achat : collante seulement quand la fenêtre est assez haute pour la montrer en entier (même règle que le récapitulatif de commande), sinon la réassurance reste sous le bord de l'écran.
La transition adoucit les 16 px repris au moment où l'en-tête se réduit. */
@media (min-width: 900px) and (min-height: 1000px) { .hm-product__summary { position: sticky; top: calc(var(--hm-sticky-top) + 16px); transition: top 0.25s var(--hm-ease); } }
/* -------------------------------------------------------------------------
8. Panier, commande, compte (surcharges WooCommerce)
---------------------------------------------------------------------- */
.hm-page--shop .hm-page__title { margin-bottom: 20px; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { border: 0; border-left: 4px solid var(--hm-sage); background: var(--hm-surface); color: var(--hm-brown); border-radius: var(--hm-radius-sm); box-shadow: var(--hm-shadow-1); padding: 14px 18px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top: 0; padding-left: 18px; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-info { border-left-color: var(--hm-caramel); }
.woocommerce-error { border-left-color: var(--hm-rasp); }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { order: 2; margin-left: auto; }
.woocommerce table.shop_table { border: 1px solid var(--hm-border); border-radius: var(--hm-radius); border-collapse: separate; background: var(--hm-surface); overflow: hidden; box-shadow: var(--hm-shadow-1); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--hm-border); padding: 12px; }
.woocommerce table.shop_table thead th { background: var(--hm-surface-2); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hm-brown-soft); }
.woocommerce-cart table.cart img { width: 72px; border-radius: var(--hm-radius-xs); }
.woocommerce-cart table.cart td.product-name a { color: var(--hm-brown); font-weight: 700; }
/* La croix de suppression : WooCommerce impose « color: var(--wc-red) !important », qu'aucune couleur
ne peut battre. On redéfinit la variable sur cet élément seul — le rouge d'erreur du reste du site
(champs invalides, messages) garde sa valeur d'origine.
La boîte passe à 44 px — la cible tactile demandée — sans grossir le glyphe : « inline-flex » le
recentre, là où WooCommerce le calait sur une hauteur de ligne de 1 em. */
.woocommerce a.remove { --wc-red: var(--hm-muted); width: 44px; height: 44px; min-width: 44px; min-height: 44px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--hm-muted); font-weight: 400; transition: background 0.15s, color 0.15s; }
.woocommerce a.remove:hover { --wc-red: var(--hm-rasp); background: var(--hm-rasp); color: #fff; }
/* « flex-wrap » : l'erreur de code promo affichée par WooCommerce passe sous le champ et le bouton. */
.woocommerce-cart .coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-cart .coupon #coupon_code { width: 180px; }
/* Sur ordinateur, la cellule « .actions » reste en display: table-cell : le bloc mobile plus bas,
qui aère ces deux lignes en colonne, ne s'y applique pas et le bouton « Mettre à jour le panier »
démarrait au pixel exact où finissait le champ du code promo. Ce retrait n'est posé qu'au-dessus
de 700 px pour ne pas s'ajouter au gap: 10px de la version mobile. */
@media (min-width: 700px) { .woocommerce-cart table.cart td.actions .coupon { margin-bottom: 12px; } }
/* WooCommerce cible ce message en (0,5,2) avec son rouge et 0.75em : on repasse devant avec le préfixe body (0,5,3) pour garder le framboise de la charte. */
body.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice,
body.woocommerce-checkout table.cart td.actions .coupon .coupon-error-notice,
body.woocommerce-checkout .woocommerce form.checkout_coupon .coupon-error-notice,
.woocommerce-cart .coupon .coupon-error-notice, .woocommerce-checkout .coupon-error-notice { flex-basis: 100%; display: block; color: var(--hm-rasp); font-size: 0.85rem; margin: 4px 0 0; }
.woocommerce-cart .coupon input.has-error, .woocommerce-checkout input.has-error { border-color: var(--hm-rasp); }
/* Page de paiement : « Cliquez ici pour saisir votre code » est la seule porte d'entrée du code
promo et de la carte cadeau. Rendu en lien de texte nu dans son encadré, il ne faisait que
26 px de haut ; « inline-flex » lui donne la boîte tactile de 44 px sans changer la typographie.
Même gabarit, même traitement pour « Cliquez ici pour vous connecter » vu par les visiteurs. */
.woocommerce-form-coupon-toggle a.showcoupon,
.woocommerce-form-login-toggle a.showlogin { display: inline-flex; align-items: center; min-height: 44px; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce .cart-collaterals { display: grid; gap: 24px; }
.hm-continue { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-weight: 700; }
/* -------------------------------------------------------------------------
Panier : les articles à gauche, le récapitulatif à droite
----------------------------------------------------------------------
Les totaux étaient sous le tableau, poussés vers la droite : le bouton « Valider la commande »
tombait sous la ligne de flottaison et flottait, décentré, dans une bande vide. Ils forment
maintenant une carte à part entière, alignée en haut du tableau et collante au défilement.
Le sélecteur porte sur le div.woocommerce, seul parent commun du formulaire et des totaux ;
les notices et le bandeau d'offre gardent la pleine largeur. */
.woocommerce-cart .cart_totals { padding: 22px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow-1); }
.woocommerce-cart .cart_totals > h2 { margin: 0 0 14px; font-size: 1.3rem; }
.woocommerce-cart .cart_totals table { width: 100%; margin: 0; border: 0; background: transparent; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--hm-border); font-size: 0.95rem; }
.woocommerce-cart .cart_totals table th { text-align: left; font-weight: 600; }
.woocommerce-cart .cart_totals table td { text-align: right; }
.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td { border-bottom: 0; padding-top: 14px; font-size: 1.1rem; font-weight: 700; }
.woocommerce-cart .cart_totals .hmb-codes { margin: 16px 0 4px; padding-top: 16px; border-top: 1px dashed var(--hm-border-strong); }
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; margin-top: 18px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; font-size: 1.05rem; margin: 0; }
@media (min-width: 900px) {
.woocommerce-cart .hm-prose > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 40px; align-items: start; }
/* Notices, bandeau d'offre et ventes croisées : toute la largeur, au-dessus des deux colonnes. */
.woocommerce-cart .hm-prose > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .hm-prose > .woocommerce > .hmb-lot-wrap { grid-column: 1 / -1; }
.woocommerce-cart .hm-prose > .woocommerce > .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .hm-prose > .woocommerce > .cart-collaterals { grid-column: 2; position: sticky; top: calc(var(--hm-sticky-top) + 16px); transition: top 0.25s var(--hm-ease); }
/* Les pseudo-éléments de clearfix de WooCommerce deviendraient des cases de grille. */
.woocommerce-cart .hm-prose > .woocommerce::before,
.woocommerce-cart .hm-prose > .woocommerce::after { display: none; }
/* Les ventes croisées repassent sous le tableau, dans la colonne de gauche. */
.woocommerce-cart .cart-collaterals .cross-sells { display: none; }
}
/* Le bouton « Mettre à jour le panier » est cliqué par le thème après chaque − / + (theme.js) :
le montrer laisserait croire qu'il faut y penser. Il reste dans le document, et redevient
visible sans JavaScript, seul cas où il faut vraiment l'actionner à la main. */
.hm-js .woocommerce-cart-form td.actions button[name="update_cart"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.hm-js .woocommerce-cart-form td.actions { padding-block: 0; border: 0; }
/* Panier sur mobile : chaque ligne devient une carte (vignette, nom, prix, quantité, sous-total). */
@media (max-width: 699px) {
.woocommerce-cart table.shop_table.cart thead { display: none; }
.woocommerce-cart table.shop_table.cart, .woocommerce-cart table.shop_table.cart tbody, .woocommerce-cart table.shop_table.cart tr { display: block; }
.woocommerce-cart table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb name remove" "thumb price price" "thumb qty subtotal"; gap: 6px 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--hm-border); }
.woocommerce-cart table.shop_table.cart tr.cart_item td { display: block; padding: 0; border: 0; text-align: left; }
.woocommerce-cart table.shop_table.cart td.product-remove { grid-area: remove; text-align: right; }
.woocommerce-cart table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--hm-radius-xs); }
.woocommerce-cart table.shop_table.cart td.product-name { grid-area: name; font-weight: 700; }
.woocommerce-cart table.shop_table.cart td.product-price { grid-area: price; color: var(--hm-muted); font-size: 0.9rem; }
.woocommerce-cart table.shop_table.cart td.product-quantity { grid-area: qty; }
.woocommerce-cart table.shop_table.cart td.product-subtotal { grid-area: subtotal; text-align: right; font-weight: 700; }
.woocommerce-cart table.shop_table.cart td.actions { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 0; }
.woocommerce-cart table.shop_table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; }
/* Le libellé « Appliquer le code promo » réclame 229 px : chacun sur sa ligne, sinon le champ tombait à 83 px. */
.woocommerce-cart table.shop_table.cart td.actions .coupon input { flex: 1 1 100%; min-width: 0; }
.woocommerce-cart table.shop_table.cart td.actions .coupon button { flex: 1 1 100%; white-space: nowrap; }
/* Quantité dans le panier : cible tactile de 44 px. Le min-width reste bas pour que la pastille
se resserre au lieu de rogner le bouton « + » quand la colonne tombe à 96 px (320 px de large). */
.woocommerce-cart table.cart .hm-qty-btn { width: 44px; min-width: 30px; height: 44px; }
.woocommerce-cart table.cart .quantity .qty { min-height: 44px; }
/* Les deux liens de bas de page du panier — « Modifier l'adresse » sous les totaux et
« Continuer mes achats » — tenaient sur 25 et 26 px de haut : on leur donne la boîte de 44 px
demandée sans toucher à la taille du texte. */
.woocommerce-cart .cart_totals .shipping-calculator-button, .hm-continue { display: inline-flex; align-items: center; min-height: 44px; }
}
.woocommerce form .form-row { padding: 0; margin-bottom: 14px; }
.woocommerce form .form-row label { display: block; margin-bottom: 4px; font-size: 0.88rem; }
/* L'acceptation des conditions générales est le seul texte que le client doit lire avant de payer :
il n'est pas une étiquette de champ et revient à la taille du corps (16 px), le lien qu'il
contient avec lui. Poids (0,3,2) contre (0,2,2) pour la règle ci-dessus. */
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.checkbox a { font-size: 1rem; }
.woocommerce form .form-row .required { color: var(--hm-rasp); text-decoration: none; }
/* Champs de la commande : WooCommerce les rhabille en (0,3,1) — bordure rgba(32,7,7,.8) et rayon de 4 px —
et gagnait contre le sélecteur générique du thème (0,1,1). On reprend la main pour retrouver
les champs doux du panier, du contact et de la lettre d'information.
« .input-text » est une classe : il faut la reprendre sur le textarea, sinon on repasse dessous. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea.input-text {
width: 100%; padding: 12px 14px; min-height: 46px;
border: 1.5px solid var(--hm-border-strong); border-radius: var(--hm-radius-sm);
background: var(--hm-surface); color: var(--hm-brown); line-height: 1.3;
}
.woocommerce form .form-row select {
width: 100%; padding: 12px 40px 12px 14px; min-height: 46px;
border: 1.5px solid var(--hm-border-strong); border-radius: var(--hm-radius-sm);
background-color: var(--hm-surface); color: var(--hm-brown); line-height: 1.3;
}
.woocommerce form .form-row textarea.input-text { min-height: 120px; height: auto; }
/* Sélecteur de pays (select2) : le double rembourrage (cadre + libellé) le portait à 65 px
quand tous les autres champs du formulaire en font 46. */
.woocommerce .select2-container--default .select2-selection--single { padding: 0; height: 46px; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 40px 0 14px; line-height: 43px; color: var(--hm-brown); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 10px; height: 43px; }
/* Le rouge d'erreur de WooCommerce cible ces champs en (0,4,2) : même poids ici pour garder le framboise. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--hm-rasp); }
.woocommerce-checkout .col2-set { display: grid; gap: 24px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout h3 { font-size: 1.35rem; margin: 8px 0 14px; }
#order_review_heading { margin-top: 24px; }
.woocommerce-checkout #payment { background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow-1); }
.woocommerce-checkout #payment ul.payment_methods { padding: 16px; border-bottom: 1px solid var(--hm-border); }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 8px; }
.woocommerce-checkout #payment div.payment_box { background: var(--hm-surface-2); color: var(--hm-brown); border-radius: var(--hm-radius-xs); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--hm-surface-2); }
.woocommerce-checkout #payment div.form-row.place-order { padding: 16px; }
.woocommerce-checkout #payment #place_order { width: 100%; font-size: 1.05rem; }
.woocommerce-checkout .woocommerce-checkout-review-order-table { background: var(--hm-surface); }
.hm-checkout-trust { margin: 14px 0 0; }
/* La mise en page de la commande — trois étapes et récapitulatif collant — vit désormais dans la
feuille du module « commande » de l'extension (assets/front/commande.css), avec le gabarit qui
la produit (woocommerce/checkout/form-checkout.php). Ne restent ici que les règles communes aux
formulaires WooCommerce (champs, paiement, notices), utilisées aussi ailleurs.
Les erreurs de saisie doivent rester en tête du formulaire, au-dessus des étapes. */
.woocommerce-checkout form.checkout .woocommerce-NoticeGroup { margin-bottom: 20px; }
/* Compte : pas de cadre dans le cadre autour des formulaires de connexion et d'inscription. */
.woocommerce form.login, .woocommerce form.register, .woocommerce form.woocommerce-ResetPassword { border: 0; padding: 0; margin: 0; }
/* Connexion : « Mot de passe perdu ? » sous le bouton, jamais à côté. */
.woocommerce form.login p.woocommerce-LostPassword { display: block; width: 100%; margin: 12px 0 0; }
.woocommerce form.login .form-row:has(button[type="submit"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* Bascule « voir le mot de passe » de WooCommerce : un œil discret dans le champ. */
.woocommerce form .password-input { position: relative; display: block; }
.woocommerce form .password-input input { padding-right: 44px; }
.woocommerce form .show-password-input { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--hm-muted); }
.woocommerce form .show-password-input::after { content: ""; position: absolute; inset: 4px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.woocommerce form .show-password-input.display-password { color: var(--hm-caramel); }
/* L'œil « afficher le mot de passe » est dessiné sur 20 px : sur mobile, seule la zone cliquable
passe à 44 px, l'inset de 12 px (44 - 2 x 12 = 20) conservant exactement le même dessin.
Le champ recule son rembourrage à droite pour que le texte saisi ne passe pas sous l'œil :
la règle générique des champs de formulaire (0,3,2) le ramenait sinon à 14 px. */
@media (max-width: 699px) {
.woocommerce form .show-password-input { width: 44px; height: 44px; right: 4px; }
.woocommerce form .show-password-input::after { inset: 12px; }
.woocommerce form .password-input input,
.woocommerce form .form-row .password-input input.input-text { padding-right: 52px; }
}
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Chaque entrée porte une icône, son libellé et son compte (gabarit myaccount/navigation.php) :
« inline-flex » plutôt que « inline-block », sinon les trois se posaient les uns sous les autres. */
.woocommerce-account .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--hm-radius-pill); background: var(--hm-surface); border: 1px solid var(--hm-border); color: var(--hm-brown); font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { transform: translateY(-1px); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--hm-brown); color: #fff; border-color: var(--hm-brown); }
.hm-account-nav__icon { display: inline-flex; color: var(--hm-caramel-dark); flex: none; transition: color 0.15s; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active .hm-account-nav__icon, .woocommerce-account .woocommerce-MyAccount-navigation a:hover .hm-account-nav__icon { color: var(--hm-peach-strong); }
.hm-account-nav__label { min-width: 0; }
/* Le compte : une pastille discrète, jamais un zéro nu — « — » se lit « rien pour l'instant »,
« 0 » se lit comme une erreur de calcul. */
.hm-account-nav__count { margin-left: auto; min-width: 24px; padding: 2px 7px; border-radius: var(--hm-radius-pill); background: var(--hm-surface-2); color: var(--hm-brown-soft); font-size: 0.78rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; flex: none; }
.hm-account-nav__count.is-empty { background: transparent; color: var(--hm-muted); opacity: 0.7; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active .hm-account-nav__count, .woocommerce-account .woocommerce-MyAccount-navigation a:hover .hm-account-nav__count { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* Sur mobile, le menu est une rangée qui défile : empilées, les six entrées repoussaient le
contenu de la page de 300 px et il fallait faire défiler pour voir ses commandes. */
@media (max-width: 899px) {
.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--hm-gutter) * -1); padding-inline: var(--hm-gutter); scroll-snap-type: x proximity; }
.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; scroll-snap-align: start; }
.hm-account-nav__count { margin-left: 2px; }
}
/* Adresses : « Modifier » / « Ajouter » est la seule commande de chaque carte, et WooCommerce la
laisse en lien de texte nu (26 px de haut). On lui donne la boîte tactile de 44 px demandée,
sur ordinateur comme sur mobile, sans toucher à la taille du texte : le lien est flottant à
droite, « inline-flex » se recalcule donc en boîte souple qui reste ajustée à son contenu. */
.woocommerce-account .woocommerce-Address-title a.edit { display: inline-flex; align-items: center; min-height: 44px; }
/* Mon compte sur ordinateur : la grille doit porter sur le div.woocommerce, seul parent commun du menu et du contenu (.hm-prose n'a que cet enfant unique). Les pseudo-éléments de clearfix de WooCommerce deviendraient sinon des cases de grille et pousseraient le menu à droite. */
@media (min-width: 900px) {
.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; }
.woocommerce-account .hm-article .hm-prose > .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 40px; align-items: start; }
.woocommerce-account .hm-article .hm-prose > .woocommerce:has(.woocommerce-MyAccount-navigation)::before, .woocommerce-account .hm-article .hm-prose > .woocommerce:has(.woocommerce-MyAccount-navigation)::after { display: none; }
}
.woocommerce .woocommerce-form-login, .woocommerce .woocommerce-form-register, .woocommerce-form-coupon, .woocommerce .u-columns .col-1, .woocommerce .u-columns .col-2 { background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); padding: 24px; box-shadow: var(--hm-shadow-1); }
/* Connexion, inscription et adresses : côte à côte sur grand écran, l'une sous l'autre sur mobile.
Un seul point de rupture (800 px) : le second, à 900 px, portait sur un sélecteur moins précis
et n'a jamais rien produit — toutes les « .u-columns » du site portent aussi « col2-set ». */
.woocommerce .u-columns, .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.woocommerce .u-columns .col-1, .woocommerce .u-columns .col-2 { width: 100%; float: none; }
.woocommerce-account .u-columns.col2-set .col-1, .woocommerce-account .u-columns.col2-set .col-2 { width: 100%; float: none; max-width: none; }
@media (min-width: 800px) { .woocommerce .u-columns, .woocommerce-account .u-columns.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.woocommerce-order .woocommerce-order-overview { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); list-style: none; margin: 0 0 24px; padding: 0; }
.woocommerce-order .woocommerce-order-overview li { border: 1px solid var(--hm-border); border-radius: var(--hm-radius-sm); padding: 12px; margin: 0; background: var(--hm-surface); float: none; }
.woocommerce-thankyou-order-received { font-family: var(--hm-font-title); font-size: 1.6rem; color: var(--hm-sage); }
.woocommerce .star-rating { color: var(--hm-gold); }
.woocommerce p.stars a { color: var(--hm-gold); }
/* -------------------------------------------------------------------------
9. Contenu éditorial
---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
Pages éditoriales : sommaire, rythme, mise en avant
----------------------------------------------------------------------
« Notre mission » était sept sections de deux paragraphes à la file, en 680 px de large : de
la lecture d'un seul tenant, sans repère, sans respiration et sans rien qui accroche l'œil.
Trois gestes y répondent : un sommaire qui suit la lecture, une phrase d'entrée détachée du
corps, et des titres numérotés qui donnent la mesure de ce qui reste.
---------------------------------------------------------------------- */
.hm-page__layout { display: block; }
.hm-page__aside { display: none; }
.hm-page__aside.is-ready { display: block; }
@media (min-width: 1040px) {
/* Le sommaire prend sa colonne à lui : superposé au texte, il aurait rogné la mesure de
lecture que la page vient justement de fixer à 680 px. L'article s'élargit d'autant —
sinon les 240 px du sommaire seraient pris SUR le texte, pas à côté. */
.hm-page--narrow .hm-article:has(.hm-page__aside.is-ready) { max-width: 1000px; }
.hm-page--narrow .hm-page__layout:has(.hm-page__aside.is-ready) { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 56px; align-items: start; }
.hm-page--narrow .hm-page__layout:has(.hm-page__aside.is-ready) .hm-prose { max-width: 680px; }
.hm-page__aside.is-ready { position: sticky; top: calc(var(--hm-sticky-top) + 24px); transition: top 0.25s var(--hm-ease); }
}
/* Le sommaire n'occupe pas la place qu'il faudrait sous 1040 px : il y devient un bloc replié
en tête d'article, plus court qu'une seule section. */
@media (max-width: 1039px) {
.hm-page__aside.is-ready { margin-bottom: 28px; padding: 16px 18px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); }
}
.hm-toc__titre { margin: 0 0 10px; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--hm-caramel-dark); }
.hm-toc { list-style: none; margin: 0; padding: 0; counter-reset: hm-toc; display: grid; gap: 2px; }
.hm-toc li { counter-increment: hm-toc; margin: 0; }
.hm-toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: var(--hm-radius-xs); color: var(--hm-brown-soft); font-size: 0.9rem; line-height: 1.35; border-left: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.hm-toc a::before { content: counter(hm-toc); flex: none; width: 1.2em; color: var(--hm-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.hm-toc a:hover { background: var(--hm-surface-2); color: var(--hm-brown); }
.hm-toc a.is-on { color: var(--hm-brown); font-weight: 700; border-left-color: var(--hm-caramel); background: var(--hm-surface-2); }
.hm-toc a.is-on::before { color: var(--hm-caramel-dark); }
/* Phrase d'entrée : c'est elle qui décide si la page se lit. Elle est déjà mise en forme par
« .hm-page__intro » quand elle est saisie dans le champ prévu ; ici, on habille le premier
paragraphe du contenu, qui joue ce rôle sur les pages écrites d'un bloc. */
.hm-page--narrow .hm-prose > p:first-child { font-size: 1.2rem; line-height: 1.55; color: var(--hm-brown); padding-left: 18px; border-left: 3px solid var(--hm-peach-strong); }
/* Titres numérotés : le compteur dit combien de sections restent, sans mot en plus. */
.hm-page--narrow .hm-prose { counter-reset: hm-sec; }
.hm-page--narrow .hm-prose h2 { counter-increment: hm-sec; display: flex; align-items: baseline; gap: 14px; margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid var(--hm-border); }
.hm-page--narrow .hm-prose h2::before { content: counter(hm-sec, decimal-leading-zero); flex: none; font-family: var(--hm-font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--hm-caramel-dark); }
.hm-page--narrow .hm-prose > h2:first-of-type { border-top: 0; padding-top: 0; }
/* Les listes de la prose deviennent des cartes à coche : « À quoi servent vos achats »,
c'est la promesse la plus concrète de la page, et c'était trois puces grises. */
.hm-page--narrow .hm-prose ul:not(.hm-toc) { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.hm-page--narrow .hm-prose ul:not(.hm-toc) > li { position: relative; margin: 0; padding: 14px 18px 14px 48px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius-sm); box-shadow: var(--hm-shadow-1); }
.hm-page--narrow .hm-prose ul:not(.hm-toc) > li::before {
content: ""; position: absolute; left: 16px; top: 18px; width: 18px; height: 18px;
background: var(--hm-caramel-dark);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Le dernier paragraphe d'une page de mission est un appel : on le détache du reste. */
.hm-page--narrow .hm-prose > p:last-child:has(a) { margin-top: 2em; padding: 20px 22px; background: var(--hm-peach); border-radius: var(--hm-radius); font-weight: 600; }
.hm-prose { font-size: 1.03rem; }
.hm-prose > * + * { margin-top: 1em; }
.hm-prose h2 { margin-top: 1.6em; }
.hm-prose h3 { margin-top: 1.4em; }
.hm-prose img { border-radius: var(--hm-radius); }
.hm-prose ul, .hm-prose ol { padding-left: 1.3em; }
.hm-prose li::marker { color: var(--hm-caramel); }
.hm-prose blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--hm-peach-strong); background: var(--hm-surface); border-radius: 0 var(--hm-radius-sm) var(--hm-radius-sm) 0; }
.hm-prose table { width: 100%; border-collapse: collapse; }
.hm-prose th, .hm-prose td { padding: 8px 10px; border-bottom: 1px solid var(--hm-border); text-align: left; }
.hm-empty { text-align: center; max-width: 560px; margin: 48px auto; }
.hm-empty .hm-search { margin: 20px auto; max-width: 420px; }
/* FAQ dépliable (elle réutilise le dépliant .hm-acc de la fiche produit). */
.hm-faq__theme { margin: 36px 0 12px; font-size: 1.35rem; }
.hm-faq__item { border-bottom: 1px solid var(--hm-border); }
/* Le jeton s'appelle --hm-font (il n'y a pas de --hm-font-body) : sans cela la déclaration était
invalide et Nunito n'arrivait que par héritage. */
.hm-faq__item .hm-acc__title { font-family: var(--hm-font); font-size: 1.02rem; font-weight: 700; }
.hm-posts { display: grid; gap: 20px; }
.hm-post-card { background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); overflow: hidden; box-shadow: var(--hm-shadow-1); }
.hm-post-card__body { padding: 16px; }
.hm-post-card__title { font-size: 1.2rem; }
.hm-post-card__title a { color: var(--hm-brown); }
@media (min-width: 700px) { .hm-posts { grid-template-columns: repeat(3, 1fr); } }
.hm-pagination, .woocommerce nav.woocommerce-pagination { margin: 32px 0 0; text-align: center; }
.hm-pagination .nav-links, .woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 6px; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.hm-pagination .page-numbers, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--hm-radius-pill); background: var(--hm-surface); border: 1px solid var(--hm-border); color: var(--hm-brown); font-weight: 600; }
.hm-pagination .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--hm-brown); color: #fff; border-color: var(--hm-brown); }
/* -------------------------------------------------------------------------
10. Pied de page
---------------------------------------------------------------------- */
.hm-footer { margin-top: 56px; background: var(--hm-surface); border-top: 1px solid var(--hm-border); }
.hm-footer__grid { display: grid; gap: 28px; padding-top: 44px; padding-bottom: 32px; }
.hm-footer__brand .hm-logo__img { height: 44px; margin-bottom: 12px; }
.hm-footer__mission { color: var(--hm-brown-soft); font-size: 0.95rem; max-width: 320px; }
.hm-footer__title { font-family: var(--hm-font); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-muted); margin-bottom: 14px; font-weight: 700; }
.hm-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hm-footer__list a { color: var(--hm-brown); }
.hm-footer__list a:hover { color: var(--hm-caramel-dark); }
.hm-social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 8px; }
.hm-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hm-border); color: var(--hm-brown); transition: background 0.15s, color 0.15s, transform 0.15s var(--hm-ease); }
.hm-social a:hover { background: var(--hm-brown); color: #fff; transform: translateY(-2px); }
/* La réserve du bas laisse passer la pastille « -5 % de bienvenue », qui flotte à 12 px du bord et mordait sur la ligne de copyright. */
.hm-footer__legal { border-top: 1px solid var(--hm-border); padding: 16px 0 68px; font-size: 0.8rem; color: var(--hm-muted); }
/* Ligne légale : trois zones stables — copyright, liens, moyens de paiement. En flex, les badges
étaient poussés sur une seconde rangée collée à droite, détachée du reste, et sur mobile ils
restaient seuls contre le bord droit. Une seule colonne sous 900 px, trois au-dessus. */
.hm-footer__legal-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; align-items: center; }
.hm-footer__copy { margin: 0; }
.hm-footer__legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
/* Le libellé garde sa taille, seule la zone de clic grandit (« Gérer les cookies » est un contrôle RGPD obligatoire). */
.hm-footer__legal-list a, .hm-footer__legal-list button { color: var(--hm-muted); display: inline-flex; align-items: center; min-height: 44px; padding: 12px 0; }
.hm-payments { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hm-payments li { padding: 3px 9px; border: 1px solid var(--hm-border); border-radius: 6px; font-weight: 700; font-size: 0.7rem; color: var(--hm-brown-soft); background: var(--hm-surface-2); }
@media (min-width: 900px) {
.hm-footer__legal-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.hm-footer__copy { grid-column: 1; }
.hm-footer__legal-list { grid-column: 2; }
.hm-payments { grid-column: 3; justify-content: flex-end; }
}
/* Colonne « Boutique » : neuf liens l'un sous l'autre allongeaient le pied de page de 145 px. */
@media (max-width: 699px) {
.hm-footer__col:nth-child(2) .hm-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
}
/* Tablette (700 à 899 px) : deux colonnes plutôt que quatre blocs empilés sur 1 100 px de haut.
minmax(0, 1fr) et non 1fr, pour que le champ de la lettre d'information ne force jamais de débordement. */
@media (min-width: 700px) and (max-width: 899px) { .hm-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
/* Quatrième colonne élargie : à 281 px, le champ de la lettre d'information (170 px au minimum)
et le bouton « Je m'inscris » (130 px) ne tenaient pas côte à côte et le bouton se repliait. */
@media (min-width: 900px) { .hm-footer__grid { grid-template-columns: 1.25fr 1fr 1fr 1.55fr; gap: 40px; padding-top: 60px; padding-bottom: 48px; } }
/* -------------------------------------------------------------------------
11. Lettre d'information, toast, utilitaires
---------------------------------------------------------------------- */
.hm-newsletter { display: flex; flex-direction: column; gap: 8px; }
/* Le bouton passe sous le champ quand la place manque (colonne du pied de page à 281 px). */
.hm-newsletter__row { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-newsletter__row input[type="email"] { flex: 1 1 170px; min-width: 0; }
.hm-newsletter__row button, .hm-newsletter__row .hm-btn { flex: 0 0 auto; }
.hm-newsletter__note { font-size: 0.78rem; color: var(--hm-muted); margin: 0; }
.hm-newsletter__msg { font-size: 0.9rem; font-weight: 600; }
.hm-newsletter__msg.is-ok { color: var(--hm-sage); }
.hm-newsletter__msg.is-error { color: var(--hm-rasp); }
/* Inscription déjà faite : plus de champ, la confirmation et le code de bienvenue à la place.
Le code est lisible et sélectionnable — il se recopie dans le panier. */
.hmb-newsletter--faite { gap: 6px; }
.hmb-newsletter__code { margin: 0; }
.hmb-newsletter__code strong { display: inline-block; padding: 8px 16px; border: 2px dashed var(--hm-caramel); border-radius: var(--hm-radius-sm); background: var(--hm-surface); font-size: 1.05rem; letter-spacing: 0.14em; user-select: all; }
.hm-newsletter__compte { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hm-toast { position: fixed; left: 50%; bottom: calc(var(--hm-bottombar-h) + 20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 80; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--hm-radius-pill); background: var(--hm-brown); color: #fff; font-weight: 700; font-size: 0.92rem; box-shadow: var(--hm-shadow-3); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--hm-ease); }
.hm-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.hm-toast .hm-icon { color: var(--hm-peach-strong); }
/* Champs masqués (pot de miel, libellés) : vraiment hors flux, sans élargir la page.
Les !important sont nécessaires face aux règles de champ ci-dessus et à celles de WooCommerce. */
.hm-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.alignwide { max-width: var(--hm-container); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
@media print { .hm-header, .hm-bottombar, .hm-footer, .hm-drawer { display: none; } }
/* Fiche produit, ordinateur : les dépliants (description, envoi) restent sous les images mais
sont centrés dans leur colonne, titre et texte compris (demande de Simon, 13/09). */
@media (min-width: 900px) {
.hm-product__more { width: 100%; padding-top: 8px; }
.hm-product__more .hm-acc__title { justify-content: center; gap: 10px; text-align: center; }
.hm-product__more .hm-acc__body { text-align: center; }
.hm-product__more .hm-acc__body ul, .hm-product__more .hm-acc__body ol { display: inline-block; text-align: left; }
}
/* Fiche produit enrichie (inc/fiche-produit.php) : bulle ronde, accroche, points forts, « Pour aller avec ». */
.hm-fiche { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 16px 0 44px; }
.hm-fiche__bulle { width: 184px; height: 184px; border-radius: 50%; overflow: hidden; background: var(--hm-cream); border: 4px solid var(--hm-surface); box-shadow: var(--hm-shadow-2); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 1.1s; }
.hm-fiche__bulle:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 44px -14px rgba(63, 47, 37, 0.35); }
.hm-fiche__bulle img { transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s; }
.hm-fiche__bulle:hover img { transform: scale(1.08); }
.hm-fiche__bulle img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s; }
.hm-fiche__bulle.is-changing img { opacity: 0.4; }
.hm-fiche__nom { margin: 0; font-family: var(--hm-font-title); font-size: 1.3rem; line-height: 1.2; }
.hm-fiche__variante { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--hm-radius-pill); background: var(--hm-peach); color: var(--hm-brown); font-size: 0.85rem; font-weight: 700; }
.hm-fiche__variante[hidden] { display: none; }
.hm-fiche__prix { margin: 8px 0 0; font-size: 1.15rem; font-weight: 700; }
.hm-fiche__prix del { opacity: 0.55; font-weight: 400; margin-right: 6px; }
.hm-fiche__prix ins { text-decoration: none; color: var(--hm-rasp); }
.hm-fiche__accroche { margin: 24px 0 0; max-width: 520px; font-family: var(--hm-font-title); font-size: 1.25rem; line-height: 1.35; color: var(--hm-brown); }
.hm-fiche__points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hm-fiche__points li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--hm-radius-pill); background: var(--hm-surface); border: 1px solid var(--hm-border); font-size: 0.85rem; color: var(--hm-brown-soft); transition: transform 0.25s var(--hm-ease), border-color 0.25s, background 0.25s; }
.hm-fiche__points li:hover { transform: translateY(-2px); border-color: var(--hm-peach-strong); background: var(--hm-peach); }
.hm-fiche__points .hm-icon { color: var(--hm-caramel-dark); flex: none; }
.hm-fiche-avec { margin: 40px 0 40px; text-align: center; }
.hm-fiche-avec .hm-eyebrow { margin-bottom: 4px; }
.hm-fiche-avec__titre { margin: 0 0 22px; font-size: 1.3rem; }
.hm-fiche-avec__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-fiche-avec__lien { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 14px; border-radius: var(--hm-radius); background: var(--hm-surface); border: 1px solid var(--hm-border); color: inherit; text-decoration: none; transition: transform 0.25s var(--hm-ease), box-shadow 0.25s; }
.hm-fiche-avec__lien:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow-2); border-color: transparent; color: inherit; }
.hm-fiche-avec__media img { transition: transform 0.6s var(--hm-ease); }
.hm-fiche-avec__lien:hover .hm-fiche-avec__media img { transform: scale(1.05); }
.hm-fiche-avec__media { width: 100%; aspect-ratio: 1; border-radius: var(--hm-radius-sm); overflow: hidden; background: var(--hm-cream); }
.hm-fiche-avec__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-fiche-avec__nom { font-family: var(--hm-font-title); font-size: 0.98rem; line-height: 1.25; }
.hm-fiche-avec__prix { font-size: 0.9rem; font-weight: 700; color: var(--hm-brown-soft); }
.hm-fiche-avec__prix del { opacity: 0.55; font-weight: 400; margin-right: 4px; }
.hm-fiche-avec__prix ins { text-decoration: none; color: var(--hm-rasp); }
@media (max-width: 699px) { .hm-fiche__bulle { width: 136px; height: 136px; } .hm-fiche-avec__liste { gap: 8px; } .hm-fiche-avec__nom { font-size: 0.88rem; } }
/* Galerie une colonne : flèches, compteur, rappel « Faites défiler » (inc/fiche-produit.php + theme.js). */
/* Miniatures conservées sous la grande image (retour de Simon). */
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 6; }
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav a { pointer-events: auto; position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: var(--hm-glass-strong, rgba(255,255,255,0.92)); backdrop-filter: blur(8px); box-shadow: var(--hm-shadow-1); color: var(--hm-brown); display: flex; align-items: center; justify-content: center; text-decoration: none; opacity: 0.92; transition: transform 0.25s var(--hm-ease), background 0.2s, color 0.2s, opacity 0.2s; }
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav a::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: -3px; }
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav a.flex-prev { left: 14px; }
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav a.flex-prev::before { transform: rotate(135deg); margin-left: 3px; }
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav a.flex-next { right: 14px; }
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav a:hover { background: var(--hm-brown); color: #fff; transform: scale(1.08); opacity: 1; }
.woocommerce div.product .hm-product__gallery div.images .flex-direction-nav a.flex-disabled { opacity: 0; pointer-events: none; }
/* Au chargement, les flèches respirent trois fois : on voit qu'il y a d'autres images. */
@keyframes hm-fleche-pulse { 0%, 100% { transform: scale(1); box-shadow: var(--hm-shadow-1); } 50% { transform: scale(1.14); box-shadow: 0 0 0 10px rgba(201, 138, 91, 0.18), var(--hm-shadow-1); } }
.hm-galerie--multi.is-hint .flex-direction-nav a { animation: hm-fleche-pulse 1.4s ease-in-out 3; }
.hm-galerie--multi.is-hint .flex-direction-nav a.flex-next { animation-delay: 0.2s; }
.hm-galerie__compteur { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; padding: 4px 12px; border-radius: var(--hm-radius-pill); background: rgba(63, 47, 37, 0.72); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; pointer-events: none; }
.hm-galerie__indice { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--hm-radius-pill); background: var(--hm-glass-strong, rgba(255,255,255,0.92)); backdrop-filter: blur(8px); box-shadow: var(--hm-shadow-1); color: var(--hm-brown); font-size: 0.8rem; font-weight: 700; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.hm-galerie--multi.is-hint .hm-galerie__indice { opacity: 1; }
.hm-galerie__indice .hm-icon { animation: hm-indice-va 1.2s ease-in-out infinite; }
@keyframes hm-indice-va { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.hm-product__gallery > .hm-badge--sale { top: 12px; left: 12px; }
.hm-galerie--multi .hm-product__gallery > .hm-badge--sale, .hm-galerie--multi + .hm-badge--sale { z-index: 7; }
@media (prefers-reduced-motion: reduce) { .hm-galerie--multi.is-hint .flex-direction-nav a, .hm-galerie__indice .hm-icon { animation: none; } }
/* Histoire de la maison sur la fiche (trois blocs). */
.hm-fiche-histoire { display: grid; gap: 14px; margin: 36px 0 8px; }
@media (min-width: 700px) { .hm-fiche-histoire { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.hm-fiche-histoire__bloc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 18px; border-radius: var(--hm-radius); background: var(--hm-peach); color: var(--hm-brown); transition: transform 0.3s var(--hm-ease), box-shadow 0.3s; }
.hm-fiche-histoire__bloc:nth-of-type(2) { background: var(--hm-brown); color: #fff; }
.hm-fiche-histoire__bloc:nth-of-type(3) { background: var(--hm-surface); border: 1px solid var(--hm-border); }
.hm-fiche-histoire__bloc:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow-2); }
.hm-fiche-histoire__icone { display: inline-flex; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.55); color: var(--hm-caramel-dark); }
.hm-fiche-histoire__bloc:nth-of-type(2) .hm-fiche-histoire__icone { background: rgba(255, 255, 255, 0.14); color: var(--hm-peach-strong); }
.hm-fiche-histoire__titre { margin: 0; font-size: 1.05rem; color: inherit; }
.hm-fiche-histoire__texte { margin: 0; font-size: 0.9rem; line-height: 1.55; opacity: 0.9; }
.hm-acc__libelle { display: inline-flex; align-items: center; gap: 10px; }
.hm-acc__icone { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--hm-peach); color: var(--hm-caramel-dark); flex: none; }
.hm-fiche-section p, .hm-fiche-section ul { margin: 0 0 12px; }
.hm-fiche-section ul { padding-left: 0; list-style: none; display: inline-block; text-align: left; max-width: 560px; }
.hm-fiche-section li { position: relative; padding-left: 22px; margin: 6px 0; line-height: 1.5; }
.hm-fiche-section li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--hm-caramel); }
.hm-fiche-section strong { color: var(--hm-brown); }
/* Fiche enrichie, pleine largeur : plus de cartes ni de bordures. Chaque bloc est une BANDE qui
s'étend d'un bord à l'autre de l'écran, avec sa couleur ; le contenu reste centré et lisible.
Retour de Simon du 13/09 : « pas assez étendu, pas de conteneur, retire ces bordures ». */
/* --hm-sb = largeur de la barre de défilement (theme.js) : sans elle, 100vw déborde de 8 px et la page défile de côté. */
.hm-bande { position: relative; width: calc(100vw - var(--hm-sb, 0px)); margin-left: calc(50% - 50vw + var(--hm-sb, 0px) / 2); margin-right: calc(50% - 50vw + var(--hm-sb, 0px) / 2); padding: 56px max(var(--hm-gutter, 20px), calc(50vw - 560px)); }
.hm-bande + .hm-bande { margin-top: 0; }
.hm-product__more > * + * { margin-top: 0; }
.hm-fiche { margin-top: 0; margin-bottom: 0; padding-top: 64px; padding-bottom: 56px; border: 0; border-radius: 0; background: linear-gradient(180deg, var(--hm-peach) 0, var(--hm-cream) 100%); overflow: visible; }
.hm-fiche::before { display: none; }
.hm-fiche__bulle { width: 220px; height: 220px; border: 6px solid var(--hm-surface); }
.hm-fiche__nom { font-size: 1.6rem; }
.hm-fiche__accroche { max-width: 720px; font-size: 1.45rem; margin-top: 28px; }
.hm-fiche__points { margin-top: 26px; gap: 12px; }
.hm-fiche__points li { padding: 9px 16px; font-size: 0.92rem; background: var(--hm-surface); border: 0; box-shadow: var(--hm-shadow-1); }
.hm-product-sections { max-width: none; margin-top: 0; margin-bottom: 0; padding-top: 48px; padding-bottom: 56px; border: 0; border-radius: 0; background: var(--hm-surface); }
.hm-product-sections .hm-fiche-etiquette { margin: 0 0 12px; }
.hm-product-sections .hm-acc { max-width: 840px; margin-inline: auto; }
.hm-product-sections .hm-acc:first-of-type { border-top: 1px solid var(--hm-border); }
.hm-product-sections .hm-acc:last-of-type { border-bottom: 1px solid var(--hm-border); }
.hm-product-sections .hm-acc[open] { background: transparent; margin-inline: auto; padding: 0; }
.hm-product-sections .hm-acc[open] .hm-acc__title { color: var(--hm-caramel-dark); }
.hm-product-sections .hm-acc__title { padding: 20px 4px; }
.hm-product-sections .hm-acc__body { padding-bottom: 28px; max-width: 680px; margin-inline: auto; }
.hm-fiche-histoire { margin-top: 0; margin-bottom: 0; padding-top: 56px; padding-bottom: 64px; background: var(--hm-brown); color: #fff; row-gap: 20px; }
.hm-fiche-histoire .hm-fiche-etiquette { color: var(--hm-peach-strong); }
.hm-fiche-histoire .hm-fiche-etiquette::before, .hm-fiche-histoire .hm-fiche-etiquette::after { background: var(--hm-peach-strong); }
.hm-fiche-histoire__bloc, .hm-fiche-histoire__bloc:nth-of-type(2), .hm-fiche-histoire__bloc:nth-of-type(3) { background: transparent; border: 0; color: #fff; padding: 12px 20px; box-shadow: none; }
.hm-fiche-histoire__bloc:hover { transform: none; box-shadow: none; }
.hm-fiche-histoire__icone, .hm-fiche-histoire__bloc:nth-of-type(2) .hm-fiche-histoire__icone { width: 52px; height: 52px; background: rgba(255, 255, 255, 0.12); color: var(--hm-peach-strong); margin-bottom: 4px; }
.hm-fiche-histoire__titre { font-size: 1.2rem; color: #fff; }
.hm-fiche-histoire__texte { font-size: 0.98rem; line-height: 1.65; opacity: 0.88; max-width: 34ch; }
@media (min-width: 700px) { .hm-fiche-histoire { column-gap: 48px; } }
.hm-fiche-avec { margin-top: 0; margin-bottom: 0; padding-top: 56px; padding-bottom: 64px; border: 0; border-radius: 0; background: var(--hm-cream); }
.hm-fiche-avec__titre { font-size: 1.6rem; margin-bottom: 28px; }
.hm-fiche-avec__liste { gap: 24px; max-width: 900px; margin-inline: auto; }
.hm-fiche-avec__lien { border: 0; padding: 16px 14px 18px; box-shadow: var(--hm-shadow-1); }
.hm-fiche-avec__nom { font-size: 1.05rem; }
@media (max-width: 699px) {
.hm-bande { padding-top: 40px; padding-bottom: 40px; }
.hm-fiche { padding-top: 44px; }
.hm-fiche__bulle { width: 150px; height: 150px; }
.hm-fiche__nom { font-size: 1.3rem; }
.hm-fiche__accroche { font-size: 1.15rem; }
.hm-fiche-histoire, .hm-fiche-avec, .hm-product-sections { padding-top: 40px; padding-bottom: 44px; }
.hm-fiche-histoire__texte { max-width: none; }
.hm-fiche-avec__liste { gap: 12px; }
}
/* Les bandes pleine largeur mesurent 100vw, barre de défilement comprise : on coupe le débordement horizontal. */
/* (plus de overflow clip sur html : il bloquait le défilement vertical à 63 px dans Chrome ; les bandes ne débordent plus grâce à --hm-sb.) */
/* Étiquette au-dessus de chaque bande (retirée par erreur avec l'ancien bloc à cartes). */
.hm-fiche-etiquette { display: block; grid-column: 1 / -1; text-align: center; margin: 0 0 14px; color: var(--hm-caramel-dark); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.hm-fiche-etiquette::before, .hm-fiche-etiquette::after { content: ""; display: inline-block; width: 32px; height: 1px; background: var(--hm-caramel); vertical-align: middle; margin: 0 12px; opacity: 0.6; }
.hm-fiche-histoire .hm-fiche-etiquette { color: var(--hm-peach-strong); margin-bottom: 8px; }
.hm-fiche-histoire .hm-fiche-etiquette::before, .hm-fiche-histoire .hm-fiche-etiquette::after { background: var(--hm-peach-strong); }
/* Dépliants « En détail » : chacun est une carte encadrée, resserrée ; déplié, il s'élargit. */
.hm-product-sections .hm-acc, .hm-product-sections .hm-acc:first-of-type, .hm-product-sections .hm-acc:last-of-type { max-width: 640px; margin: 10px auto; border: 1px solid var(--hm-border); border-radius: var(--hm-radius); background: var(--hm-cream); transition: max-width 0.45s var(--hm-ease), background 0.3s, box-shadow 0.3s; }
.hm-product-sections .hm-acc:hover { box-shadow: var(--hm-shadow-1); }
.hm-product-sections .hm-acc[open] { max-width: 1040px; background: var(--hm-surface); box-shadow: var(--hm-shadow-2); border-color: var(--hm-peach-strong); }
.hm-product-sections .hm-acc__title { padding: 18px 24px; }
.hm-product-sections .hm-acc__body { padding: 0 32px 28px; max-width: none; }
.hm-product-sections .hm-acc__body .hm-fiche-section { max-width: 760px; margin-inline: auto; }
.hm-acc__icone .hm-icon { transform: none !important; }
/* Encarts ouverts sous les dépliants. */
.hm-fiche-encarts { display: grid; gap: 16px; max-width: 1040px; margin: 28px auto 0; }
@media (min-width: 800px) { .hm-fiche-encarts { grid-template-columns: 1fr 1fr; } .hm-fiche-encarts > :only-child { grid-column: 1 / -1; } }
.hm-fiche-encart { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--hm-radius); text-align: left; }
.hm-fiche-encart--savoir { background: var(--hm-peach); color: var(--hm-brown); }
.hm-fiche-encart--livraison { background: var(--hm-cream); color: var(--hm-brown); }
.hm-fiche-encart__icone { flex: none; display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: var(--hm-surface); color: var(--hm-caramel-dark); }
.hm-fiche-encart__titre { margin: 0 0 6px; font-size: 1.05rem; }
.hm-fiche-encart__corps p { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.55; }
.hm-fiche-encart__corps p:last-child { margin-bottom: 0; }
/* Bande Compagnon. */
.hm-fiche-compagnon { padding-top: 56px; padding-bottom: 64px; background: var(--hm-peach); }
.hm-fiche-compagnon__inner { max-width: 1040px; margin-inline: auto; }
.hm-fiche-compagnon__tete { display: flex; gap: 24px; align-items: center; margin-bottom: 28px; text-align: left; }
.hm-fiche-compagnon__tete .hm-fiche-etiquette { text-align: left; margin-bottom: 6px; }
.hm-fiche-compagnon__tete .hm-fiche-etiquette::before { display: none; }
.hm-fiche-compagnon__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 24px; background: var(--hm-surface); box-shadow: var(--hm-shadow-1); padding: 12px; }
.hm-fiche-compagnon__logo img { max-width: 100%; height: auto; }
.hm-fiche-compagnon__titre { margin: 0 0 8px; font-size: 1.5rem; }
.hm-fiche-compagnon__texte { margin: 0; color: var(--hm-brown-soft); max-width: 60ch; }
.hm-fiche-compagnon__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .hm-fiche-compagnon__liste { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.hm-fiche-compagnon__lien { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border-radius: var(--hm-radius); background: var(--hm-surface); box-shadow: var(--hm-shadow-1); color: var(--hm-brown); text-decoration: none; position: relative; transition: transform 0.3s var(--hm-ease), box-shadow 0.3s, background 0.3s; }
.hm-fiche-compagnon__lien:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow-2); background: var(--hm-surface); color: var(--hm-brown); }
.hm-fiche-compagnon__type { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hm-caramel-dark); }
.hm-fiche-compagnon__q { font-family: var(--hm-font-title); font-size: 1.15rem; line-height: 1.3; padding-right: 28px; }
.hm-fiche-compagnon__fleche { position: absolute; right: 16px; bottom: 16px; color: var(--hm-caramel-dark); transition: transform 0.3s var(--hm-ease); }
.hm-fiche-compagnon__lien:hover .hm-fiche-compagnon__fleche { transform: translateX(4px); }
.hm-fiche-compagnon__cta { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.hm-fiche-compagnon__gratuit { color: var(--hm-brown-soft); font-size: 0.9rem; }
@media (max-width: 699px) { .hm-fiche-compagnon__tete { flex-direction: column; align-items: flex-start; } .hm-fiche-compagnon__logo { width: 72px; height: 72px; } .hm-product-sections .hm-acc__title { padding: 16px 16px; } .hm-product-sections .hm-acc__body { padding: 0 16px 22px; } }
/* Bulle du produit en bas de « En détail », après les encarts ; dépliants avec une vraie animation. */
.hm-fiche__bulle-zone { display: flex; justify-content: center; padding: 48px 0 8px; }
.hm-fiche__bulle-zone .hm-fiche__bulle { margin-bottom: 0; }
.hm-product-sections .hm-acc, .hm-product-sections .hm-acc:first-of-type, .hm-product-sections .hm-acc:last-of-type { transition: max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s, box-shadow 0.35s, border-color 0.35s, transform 0.35s var(--hm-ease); transition-delay: 0s !important; }
.hm-product-sections .hm-acc__body { animation: hm-acc-ouvre 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes hm-acc-ouvre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hm-product-sections .hm-acc__body { animation: none; } }
/* Logo Compagnon, format large. */
.hm-fiche-compagnon__logo { width: 200px; height: auto; border-radius: 20px; padding: 14px 18px; }
.hm-fiche-compagnon__logo img { width: 100%; height: auto; display: block; }
@media (max-width: 699px) { .hm-fiche-compagnon__logo { width: 160px; height: auto; } }