/* ════════════════════════════════════════════════════════════════════
   HINNOMARKET · interface 2026
   Couleurs tirées du logo officiel : nuit #051a47, cuivre #fe9900.
   Typo : Bricolage Grotesque (titres, prix) + Golos Text (texte).
   Thème sombre : classe « theme--dark » sur <body>.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ───────────────────────────────────────────────────── */
:root {
    --nuit: #051a47;
    --nuit-2: #0b2a63;
    --nuit-3: #03122f;
    --cuivre: #fe9900;
    --cuivre-fonce: #ec8d00;
    --cuivre-texte: #a35600;
    --malachite: #0e7c66;
    --rouge: #c8243b;
    --ambre: #b45309;

    --bg: #f2f4f9;
    --surface: #ffffff;
    --surface-2: #f6f7fb;
    --surface-3: #eceff6;
    --ligne: #e1e5ef;
    --ligne-forte: #cbd2e2;
    --encre: #0f1a3a;
    --encre-2: #39436a;
    --muet: #5d6688;
    --focus: #1f5bd8;

    --succes-fond: #e6f6f0; --succes-texte: #0b6b52; --succes-bord: #a9dcc9;
    --erreur-fond: #fdecee; --erreur-texte: #a3162c; --erreur-bord: #f3b9c2;
    --attention-fond: #fff5e1; --attention-texte: #8a4b00; --attention-bord: #f5d193;
    --info-fond: #e8effd; --info-texte: #1b48a8; --info-bord: #b9ccf5;

    --f-titre: 'Bricolage Grotesque', 'Golos Text', system-ui, sans-serif;
    --f-texte: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --conteneur: 1920px;
    --gouttiere: 28px;
    --r-carte: 20px;
    --r-panneau: 25px;
    --r-btn: 16px;
    --r-champ: 14px;
    --ombre-1: 0 1px 2px rgba(5, 26, 71, .06);
    --ombre-2: 0 18px 44px -14px rgba(5, 26, 71, .35);
    --entete-h: 96px;
}
.theme--dark {
    --bg: #030c24;
    --surface: #0a1838;
    --surface-2: #0e1f47;
    --surface-3: #13275a;
    --ligne: #1b2d59;
    --ligne-forte: #2a3f75;
    --encre: #eef2fb;
    --encre-2: #c1cae3;
    --muet: #8f9bbb;
    --cuivre-texte: #ffb547;
    --malachite: #3cc6a0;
    --rouge: #ff6b81;
    --ambre: #ffb547;
    --focus: #ffb84d;
    --succes-fond: rgba(60, 198, 160, .12); --succes-texte: #7fe0c2; --succes-bord: rgba(60, 198, 160, .35);
    --erreur-fond: rgba(255, 107, 129, .12); --erreur-texte: #ff9fb0; --erreur-bord: rgba(255, 107, 129, .35);
    --attention-fond: rgba(255, 181, 71, .12); --attention-texte: #ffc978; --attention-bord: rgba(255, 181, 71, .35);
    --info-fond: rgba(111, 158, 255, .12); --info-texte: #a9c4ff; --info-bord: rgba(111, 158, 255, .35);
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
}
html:has(> body.theme--dark) { background: #030c24; }

/* ── 2. Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.hm {
    margin: 0;
    background: var(--bg);
    color: var(--encre);
    font: 400 18.5px/1.55 var(--f-texte);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
:where(.hm) img { max-width: 100%; }
:where(.hm) a { color: inherit; text-decoration: none; }
:where(.hm) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.hm) button { cursor: pointer; }
:where(.hm) :is(h1, h2, h3, h4) { margin: 0; font-family: var(--f-titre); font-optical-sizing: auto; letter-spacing: -.01em; line-height: 1.2; }
:where(.hm) p { margin: 0; }
.hm :focus-visible { outline: 3.4px solid var(--focus); outline-offset: 2px; border-radius: 6.9px; }
.hm-sombre { --focus: #ffb84d; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hm-conteneur, .hm .container { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--gouttiere); }
.hm-conteneur--etroit { max-width: 1400px; }
.hm-conteneur--form { max-width: 560px; }
.hm-evitement {
    position: absolute; left: 14px; top: -80px; z-index: 300;
    background: var(--cuivre); color: var(--nuit) !important; font-weight: 700;
    padding: 11.5px 18.5px; border-radius: 11.5px;
}
.hm-evitement:focus { top: 14px; }
.hm-muet { color: var(--muet); }
.hm-centre { text-align: center; }
.hm-pile { display: flex; flex-direction: column; gap: 18.5px; }
.hm-rangee { display: flex; align-items: center; gap: 11.5px; flex-wrap: wrap; }
.hm-espace { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
[hidden] { display: none !important; }

/* ── 3. Bandeau du haut (paiement sécurisé, contacts) ────────────── */
.hm-annonce { background: var(--nuit-3); color: rgba(255, 255, 255, .82); font-size: 14.5px; }
.hm-annonce .hm-conteneur { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 24px; }
.hm-annonce i { color: var(--cuivre); }
.hm-annonce__info { display: flex; align-items: center; gap: 9px; }
.hm-annonce nav { display: flex; gap: 28px; flex-shrink: 0; }
.hm-annonce nav a { display: inline-flex; align-items: center; gap: 8px; }
.hm-annonce a:hover { color: #fff; }

/* ── 4. En-tête ──────────────────────────────────────────────────── */
.hm-entete { background: var(--nuit); color: #fff; position: sticky; top: 0; z-index: 60; }
.hm-entete__ligne { display: flex; align-items: center; gap: 22px; height: var(--entete-h); }
.hm-logo { flex-shrink: 0; display: block; }
.hm-logo img { height: 68px; width: auto; display: block; }
.hm-livrer {
    flex-shrink: 0; display: flex; align-items: center; gap: 11px;
    background: none; border: 0; padding: 8px 10px; border-radius: 12px; text-align: left; color: #fff;
}
.hm-livrer:hover { background: rgba(255, 255, 255, .08); }
.hm-livrer > i { color: var(--cuivre); font-size: 21px; }
.hm-livrer small { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .7); line-height: 1.2; }
.hm-livrer strong { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.25; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-recherche { flex: 1; position: relative; max-width: 1000px; margin: 0; }
.hm-recherche input {
    width: 100%; height: 58px; border: 0; border-radius: 16px;
    padding: 0 160px 0 56px; background: #fff; color: #0f1a3a; font: 400 17px var(--f-texte);
}
.hm-recherche input::placeholder { color: #6a7394; }
.hm-recherche input::-webkit-search-cancel-button { cursor: pointer; }
.hm-recherche > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #5d6688; font-size: 19px; pointer-events: none; }
.hm-recherche button {
    position: absolute; right: 6px; top: 6px; bottom: 6px;
    border: 0; border-radius: 12px; padding: 0 26px;
    background: var(--cuivre); color: var(--nuit); font-weight: 700; font-size: 16.5px;
}
.hm-recherche button:hover { background: var(--cuivre-fonce); }
.hm-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.hm-icone {
    position: relative; width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; border: 0; background: transparent; color: #fff; font-size: 22px;
}
.hm-icone:hover { background: rgba(255, 255, 255, .1); }
.hm-pastille {
    position: absolute; top: 2px; right: -2px; min-width: 23px; height: 23px; padding: 0 6px;
    border-radius: 12px; background: var(--cuivre); color: var(--nuit);
    font: 700 12.5px/19px var(--f-texte); text-align: center; border: 2px solid var(--nuit);
}
.hm-pastille:empty, .hm-pastille[data-vide] { display: none; }
.hm-pastille--alerte { background: #ff4d4f; color: #fff; }
.pop { animation: hm-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hm-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

/* Menu du compte */
.hm-compte { position: relative; margin-left: 8px; }
.hm-compte__bouton {
    display: flex; align-items: center; gap: 10px; height: 52px;
    padding: 0 14px 0 7px; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff;
    font-weight: 600; font-size: 16px;
}
.hm-compte__bouton:hover { background: rgba(255, 255, 255, .12); }
.hm-compte__avatar {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; overflow: hidden;
    background: var(--cuivre); color: var(--nuit); font-size: 16px; font-weight: 700;
}
.hm-compte__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hm-compte__nom { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-compte__bouton .fa-chevron-down { font-size: 12px; opacity: .7; }
.hm-menu-compte {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
    width: 300px; padding: 8px; border-radius: 18px;
    background: var(--surface); color: var(--encre); border: 1px solid var(--ligne);
    box-shadow: var(--ombre-2);
}
.hm-menu-compte__tete { padding: 12px 14px 14px; border-bottom: 1px solid var(--ligne); margin-bottom: 6px; }
.hm-menu-compte__tete strong { display: block; font-size: 16.5px; }
.hm-menu-compte__tete span { font-size: 14px; color: var(--muet); }
.hm-menu-compte a, .hm-menu-compte button {
    display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border-radius: 11px;
    border: 0; background: none; text-align: left; font-size: 15.5px; font-weight: 500; color: var(--encre);
}
.hm-menu-compte a:hover, .hm-menu-compte button:hover { background: var(--surface-2); }
.hm-menu-compte i { width: 20px; text-align: center; color: var(--muet); font-size: 16px; }
.hm-menu-compte hr { border: 0; border-top: 1px solid var(--ligne); margin: 6px 0; }
.hm-menu-compte .hm-deconnexion, .hm-menu-compte .hm-deconnexion i { color: var(--rouge); }

/* Menu principal */
.hm-menu { background: var(--nuit); border-top: 1px solid rgba(255, 255, 255, .09); color: #fff; }
.hm-menu .hm-conteneur { display: flex; align-items: center; gap: 6px; height: 58px; overflow-x: auto; scrollbar-width: none; }
.hm-menu .hm-conteneur::-webkit-scrollbar { display: none; }
.hm-menu a {
    position: relative; display: flex; align-items: center; gap: 9px; flex-shrink: 0;
    padding: 0 14px; height: 58px; font-size: 16.5px; font-weight: 500; color: rgba(255, 255, 255, .8); white-space: nowrap;
}
.hm-menu a i { font-size: 17px; }
.hm-menu a:hover { color: #fff; }
.hm-menu a[aria-current="page"] { color: #fff; }
.hm-menu a[aria-current="page"]::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--cuivre);
}
.hm-menu__sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .16); margin: 0 10px; flex-shrink: 0; }
.hm-menu__vendre { margin-left: auto; color: var(--cuivre) !important; font-weight: 700 !important; }

/* ── 5. Messages (flash, alertes) ────────────────────────────────── */
.hm-flash {
    position: fixed; z-index: 66; top: calc(var(--entete-h) + 16px); left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100% - 37px)); padding: 0; display: flex; flex-direction: column; gap: 11.5px;
}
.hm-flash:not(:has(.hm-alerte)) { display: none; }
.hm-flash .hm-alerte { background: var(--surface); border-left-width: 5.8px; box-shadow: var(--ombre-2); animation: hm-descend .35s ease; }
@keyframes hm-descend { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.hm-alerte, .hm .alert {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px 18.5px; border-radius: 16px;
    border: 1px solid var(--info-bord); background: var(--info-fond); color: var(--info-texte);
    font-size: 17px; line-height: 1.5;
}
.hm-alerte > i:first-child, .hm .alert > i:first-child { margin-top: 3.4px; }
.hm-alerte a, .hm .alert a { text-decoration: underline; font-weight: 600; }
.hm-alerte--succes, .hm .alert--success { border-color: var(--succes-bord); background: var(--succes-fond); color: var(--succes-texte); }
.hm-alerte--erreur, .hm .alert--error, .hm .alert--danger { border-color: var(--erreur-bord); background: var(--erreur-fond); color: var(--erreur-texte); }
.hm-alerte--attention, .hm .alert--warning { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention-texte); }
.hm-alerte__texte { flex: 1; min-width: 0; }
.hm-alerte__fermer, .hm .alert__close {
    margin-left: auto; flex-shrink: 0; border: 0; background: none; color: inherit; opacity: .7;
    font-size: 23px; line-height: 1; padding: 0 2px;
}
.hm-alerte__fermer:hover, .hm .alert__close:hover { opacity: 1; }

/* ── 6. Boutons ──────────────────────────────────────────────────── */
.hm-btn, .hm .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 11.5px;
    min-height: 55px; padding: 0 23px; border-radius: var(--r-btn); border: 1px solid transparent;
    font: 600 17px/1.2 var(--f-texte); white-space: nowrap; text-align: center;
    background: var(--surface-2); color: var(--encre); border-color: var(--ligne-forte);
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.hm-btn:hover, .hm .btn:hover { border-color: var(--encre-2); }
.hm-btn:active, .hm .btn:active { transform: scale(.97); }
.hm-btn:disabled, .hm .btn:disabled, .hm-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.hm-btn--cuivre, .hm .btn--primary, .hm .btn--accent { background: var(--cuivre); border-color: var(--cuivre); color: var(--nuit); }
.hm-btn--cuivre:hover, .hm .btn--primary:hover, .hm .btn--accent:hover { background: var(--cuivre-fonce); border-color: var(--cuivre-fonce); }
.hm-btn--cuivre:disabled, .hm .btn--primary:disabled { background: var(--surface-3); border-color: var(--ligne-forte); color: var(--muet); opacity: 1; }
.hm-btn--nuit, .hm .btn--dark { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.hm-btn--nuit:hover, .hm .btn--dark:hover { background: var(--nuit-2); border-color: var(--nuit-2); }
.theme--dark .hm-btn--nuit, .theme--dark .btn--dark { background: var(--surface-3); border-color: var(--ligne-forte); }
.hm-btn--ligne { background: transparent; border: 1.5px solid rgba(255, 255, 255, .34); color: #fff; }
.hm-btn--ligne:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); }
.hm-btn--contour, .hm .btn--outline, .hm .btn--secondary { background: transparent; border: 1.5px solid var(--ligne-forte); color: var(--encre); }
.hm-btn--contour:hover, .hm .btn--outline:hover, .hm .btn--secondary:hover { border-color: var(--encre); background: var(--surface-2); }
.hm-btn--danger, .hm .btn--danger { background: var(--erreur-fond); border-color: var(--erreur-bord); color: var(--erreur-texte); }
.hm-btn--danger:hover, .hm .btn--danger:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.hm-btn--succes, .hm .btn--success { background: var(--malachite); border-color: var(--malachite); color: #fff; }
.theme--dark .hm-btn--succes, .theme--dark .btn--success { color: #04221a; }
.hm .btn--warning { background: var(--attention-fond); border-color: var(--attention-bord); color: var(--attention-texte); }
.hm-btn--whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; }
.hm-btn--whatsapp:hover { background: #178f47; border-color: #178f47; }
.hm-btn--texte { background: none; border-color: transparent; color: var(--cuivre-texte); padding: 0 6.9px; min-height: 46px; }
.hm-btn--texte:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 3.4px; }
.hm-btn--petit, .hm .btn--sm { min-height: 43.5px; padding: 0 16px; font-size: 16px; border-radius: 12.5px; gap: 9.2px; }
.hm-btn--grand, .hm .btn--lg { min-height: 62px; padding: 0 30px; font-size: 18.5px; }
.hm-btn--plein, .hm .btn--full, .hm .btn--block { width: 100%; }
.hm-btn--icone { width: 50.5px; padding: 0; }

/* ── 7. Formulaires ──────────────────────────────────────────────── */
.hm-form, .hm .form { display: flex; flex-direction: column; gap: 20.5px; }
.hm-champ, .hm .form__group, .hm .form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hm-label, .hm .form__label, .hm .form-label { font-size: 16.5px; font-weight: 600; color: var(--encre); }
.hm-label i, .hm .form__label i { color: var(--muet); margin-right: 4.6px; }
.hm-label .req, .hm .form__label .req { color: var(--rouge); }
.hm-input, .hm .form__input, .hm .form-control,
.hm-champ input[type="text"], .hm-champ input[type="email"], .hm-champ input[type="tel"], .hm-champ input[type="number"],
.hm-champ input[type="password"], .hm-champ input[type="url"], .hm-champ input[type="date"], .hm-champ input[type="search"],
.hm-champ input[type="datetime-local"], .hm-champ select, .hm-champ textarea {
    width: 100%; min-height: 55px; padding: 12.5px 16px; border-radius: var(--r-champ);
    border: 1.5px solid var(--ligne-forte); background: var(--surface); color: var(--encre);
    font: 400 18.5px/1.4 var(--f-texte); transition: border-color .15s, box-shadow .15s;
}
.hm-champ textarea, .hm textarea.form__input, .hm textarea.hm-input { min-height: 119.5px; resize: vertical; }
.hm-champ select, .hm select.form__input, .hm select.hm-input {
    appearance: none; -webkit-appearance: none; padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.hm-input:hover, .hm .form__input:hover, .hm-champ input:hover, .hm-champ select:hover, .hm-champ textarea:hover { border-color: var(--muet); }
.hm-input:focus, .hm .form__input:focus, .hm-champ input:focus, .hm-champ select:focus, .hm-champ textarea:focus {
    outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3.4px rgba(31, 91, 216, .18);
}
.theme--dark .hm-input:focus, .theme--dark .form__input:focus, .theme--dark .hm-champ input:focus,
.theme--dark .hm-champ select:focus, .theme--dark .hm-champ textarea:focus { border-color: var(--cuivre); box-shadow: 0 0 0 3.4px rgba(254, 153, 0, .2); }
.hm-input::placeholder, .hm .form__input::placeholder, .hm-champ input::placeholder, .hm-champ textarea::placeholder { color: var(--muet); opacity: .85; }
.hm-champ input[type="checkbox"], .hm-champ input[type="radio"], .hm input[type="checkbox"], .hm input[type="radio"] { accent-color: var(--nuit); width: 20.5px; height: 20.5px; }
.theme--dark input[type="checkbox"], .theme--dark input[type="radio"] { accent-color: var(--cuivre); }
.hm-aide, .hm .form__help, .hm small.form__hint { font-size: 15.5px; color: var(--muet); line-height: 1.45; }
.hm-erreur-champ { font-size: 15.5px; color: var(--erreur-texte); }
.hm-grille-form, .hm .form__grid, .hm .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18.5px; }
.hm .form__group--full, .hm-champ--plein { grid-column: 1 / -1; }
.hm-actions-form, .hm .form__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hm .form__footer { text-align: center; font-size: 17px; color: var(--muet); }
.hm .form__footer a { color: var(--cuivre-texte); font-weight: 600; }
.hm-mdp, .hm .form__password-wrapper { position: relative; }
.hm-mdp input, .hm .form__password-wrapper input { padding-right: 60px; }
.hm-mdp__oeil, .hm .form__toggle-password {
    position: absolute; right: 6.9px; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border: 0; border-radius: 11.5px; background: none; color: var(--muet);
}
.hm-mdp__oeil:hover, .hm .form__toggle-password:hover { background: var(--surface-2); color: var(--encre); }
.hm-fichier, .hm .form__file-upload { position: relative; }
.hm-fichier input[type="file"], .hm .form__file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.hm-fichier__zone, .hm .form__file-label {
    display: flex; align-items: center; gap: 16px; padding: 18.5px; border-radius: 16px;
    border: 1.5px dashed var(--ligne-forte); background: var(--surface-2); color: var(--encre-2); font-size: 16.5px;
}
.hm-fichier__zone i, .hm .form__file-label i { font-size: 25.5px; color: var(--cuivre-texte); }
.hm-fichier:hover .hm-fichier__zone, .hm .form__file-upload:hover .form__file-label { border-color: var(--nuit); }
.hm .form__file-name { font-size: 15.5px; color: var(--muet); }
.hm-case { display: flex; align-items: flex-start; gap: 11.5px; font-size: 16.5px; color: var(--encre-2); cursor: pointer; }
.hm-case input { margin-top: 2px; flex-shrink: 0; }

/* ── 8. Panneaux, en-têtes de page ───────────────────────────────── */
.hm-panneau {
    background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-panneau);
    padding: 27.5px;
}
.hm-panneau--serre { padding: 20.5px; }
.hm-panneau__tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20.5px; }
.hm-panneau__tete h2, .hm-panneau__tete h3 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 11.5px; }
.hm-panneau__tete h2 i, .hm-panneau__tete h3 i { color: var(--cuivre); font-size: .9em; }
.hm-panneau__tete p { color: var(--muet); font-size: 16.5px; margin-top: 3.4px; }

.hm-bandeau { position: relative; background: var(--nuit); color: #fff; padding: 34.5px 0 73.5px; overflow: hidden; }
.hm-bandeau--simple { padding-bottom: 41.5px; }
.hm-bandeau h1 { font-weight: 800; font-size: clamp(2.07rem, 1.38rem + 2.3vw, 3.105rem); line-height: 1.06; letter-spacing: -.02em; }
.hm-bandeau p { color: rgba(255, 255, 255, .78); margin-top: 11.5px; font-size: 19px; max-width: 60ch; }
.hm-bandeau__ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 27.5px; flex-wrap: wrap; }
.hm-bandeau__actions { display: flex; gap: 11.5px; flex-wrap: wrap; }
.hm-fil { display: flex; align-items: center; flex-wrap: wrap; gap: 9.2px; font-size: 15.5px; color: rgba(255, 255, 255, .6); margin-bottom: 16px; }
.hm-fil a:hover { color: #fff; }
.hm-fil i { font-size: 11.5px; opacity: .6; }
.hm-fil span[aria-current] { color: rgba(255, 255, 255, .9); }
.hm-courbe { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 64.5px; display: block; pointer-events: none; }

.hm-page { padding: 32px 0 64.5px; }
.hm-page--serree { padding-top: 9.2px; }
.hm-titre-page { font-weight: 800; font-size: clamp(1.84rem, 1.38rem + 1.61vw, 2.53rem); letter-spacing: -.02em; line-height: 1.1; }
.hm-sous-titre { color: var(--muet); font-size: 18px; margin-top: 6.9px; }

/* ── 9. Blocs d'accueil / sections ───────────────────────────────── */
.hm-bloc { padding: 64.5px 0; }
.hm-bloc--serre { padding-top: 9.2px; }
.hm-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 18.5px; margin-bottom: 25.5px; }
.hm-tete h2 { font-weight: 800; font-size: clamp(1.782rem, 1.322rem + 1.265vw, 2.415rem); letter-spacing: -.02em; line-height: 1.1; }
.hm-tete p { color: var(--muet); margin-top: 6.9px; font-size: 17px; }
.hm-lien { color: var(--cuivre-texte); font-weight: 600; font-size: 17px; white-space: nowrap; }
.hm-lien:hover { text-decoration: underline; text-underline-offset: 3.4px; }

/* Scène (accueil) */
.hm-scene { position: relative; background: var(--nuit); color: #fff; padding: 60px 0 147px; overflow: hidden; }
.hm-scene__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 64.5px; align-items: center; }
@media (min-width: 1400px) { .hm-scene__grille { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }
.hm-scene h1 { font-weight: 800; font-size: clamp(2.472rem, 1.38rem + 3.565vw, 4.197rem); line-height: 1.02; letter-spacing: -.02em; }
.hm-scene__sous { margin: 23px 0 34.5px; font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 46ch; }
.hm-scene__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hm-scene .hm-btn { min-height: 60px; font-size: 18px; }
.hm-preuves { list-style: none; margin: 39px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 11.5px 30px; font-size: 16.5px; color: rgba(255, 255, 255, .8); }
.hm-preuves li { display: flex; align-items: center; gap: 10.5px; }
.hm-preuves i { color: var(--cuivre); }
.hm-scene__courbe { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 115px; display: block; }

/* Portant d'articles avec étiquettes */
.hm-portant { position: relative; }
.hm-portant__piste { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; padding: 16px 6.9px 34.5px; }
.hm-portant__barre {
    position: absolute; top: 16px; left: -12px; right: -12px; height: 6.9px; border-radius: 3.4px;
    background: rgba(255, 255, 255, .88); box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.hm-portant__barre::before, .hm-portant__barre::after { content: ""; position: absolute; top: -5px; width: 6.9px; height: 18.5px; border-radius: 3.4px; background: rgba(255, 255, 255, .88); }
.hm-portant__barre::before { left: 0; }
.hm-portant__barre::after { right: 0; }
.hm-cintre { position: relative; display: block; margin-top: calc(var(--h) + 30px); }
.hm-cintre__crochet { position: absolute; left: 50%; bottom: 100%; width: 18.5px; height: calc(var(--h) + 23px); transform: translateX(-50%); }
.hm-cintre__crochet::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .72); }
.hm-cintre__crochet::after {
    content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -7px;
    border: 2px solid rgba(255, 255, 255, .85); border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%;
    transform: rotate(-45deg);
}
.hm-cintre__photo {
    display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
    border: 3.4px solid #fff; background: var(--nuit-2); box-shadow: 0 25.5px 46px -14px rgba(0, 0, 0, .6);
}
.hm-cintre__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.hm-cintre:hover .hm-cintre__photo img { transform: scale(1.05); }
.hm-etiquette {
    position: absolute; right: -10px; bottom: -18px; display: grid; gap: 1px; padding: 9.2px 14px 10.5px 27.5px;
    background: var(--cuivre); color: var(--nuit);
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
    -webkit-mask: radial-gradient(circle at 14px 50%, transparent 4px, #000 4.6px);
            mask: radial-gradient(circle at 14px 50%, transparent 4px, #000 4.6px);
    transform-origin: 9.2px 50%; transform: rotate(var(--r));
    filter: drop-shadow(0 6.9px 11.5px rgba(0, 0, 0, .35)); white-space: nowrap; max-width: 218.5px;
}
.hm-etiquette strong { font: 800 18.5px/1.1 var(--f-titre); letter-spacing: -.01em; }
.hm-etiquette span { font-size: 13px; font-weight: 600; opacity: .82; overflow: hidden; text-overflow: ellipsis; }
.hm-cintre:hover .hm-etiquette { transform: rotate(calc(var(--r) - 5deg)); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
@media (prefers-reduced-motion: no-preference) {
    .hm-etiquette { animation: hm-balance 1.5s cubic-bezier(.25, 1.4, .45, 1) both; animation-delay: calc(var(--i) * 110ms + 250ms); }
    @keyframes hm-balance {
        0% { transform: rotate(calc(var(--r) - 28deg)); opacity: 0; }
        18% { opacity: 1; }
        100% { transform: rotate(var(--r)); opacity: 1; }
    }
}

@media (min-width: 768px) { .hm-portant__piste > .hm-cintre:nth-child(n+6) { display: none; } }

/* Portant qui défile : hm.js ajoute « hm-portant--defile » (sans script ou avec
   les animations réduites, le portant reste fixe). Un article avance toutes les 2 s. */
.hm-portant__barre--fixe, .hm-portant__pause { display: none; }
.hm-portant.hm-portant--defile { overflow: visible; scroll-snap-type: none; min-width: 0; }   /* min-width : la grille du bandeau ne doit pas s'élargir à la piste */
.hm-portant--defile > .hm-portant__barre--fixe { display: block; }
.hm-portant--defile .hm-portant__piste > .hm-portant__barre { display: none; }
.hm-portant--defile .hm-portant__fenetre {
    overflow: clip; min-width: 0; margin: 0 -12px; padding: 0 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.hm-portant--defile .hm-portant__piste { display: flex; width: max-content; gap: var(--ecart, 23px); will-change: transform; }
.hm-portant--defile .hm-portant__piste > .hm-cintre:nth-child(n) { display: block; flex: 0 0 var(--largeur, 180px); }
.hm-portant--defile > .hm-portant__pause {
    display: grid; place-items: center; position: absolute; right: 6.9px; bottom: -34px; z-index: 3;
    width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(5, 26, 71, .55); color: rgba(255, 255, 255, .9); font-size: 13px; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s, color .2s, border-color .2s;
}
.hm-portant--defile > .hm-portant__pause:hover { background: var(--cuivre); border-color: var(--cuivre); color: var(--nuit); }
@media (prefers-reduced-motion: no-preference) {
    .hm-cintre--balance { animation: hm-cintre-balance 1.7s cubic-bezier(.3, .6, .3, 1); transform-origin: 50% calc(-23px - var(--h)); }
    @keyframes hm-cintre-balance {
        0% { transform: rotate(0); }
        22% { transform: rotate(4.5deg); }
        46% { transform: rotate(-3deg); }
        66% { transform: rotate(1.6deg); }
        84% { transform: rotate(-.6deg); }
        100% { transform: rotate(0); }
    }
}
@media (max-width: 767px) {
    .hm-portant--defile .hm-portant__fenetre {
        margin: 0; padding: 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
                mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
    }
    .hm-portant--defile > .hm-portant__pause { right: var(--gouttiere); bottom: -30px; }
}

/* Rayons (catégories) */
.hm-rayons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hm-rayon {
    --ton: color-mix(in srgb, var(--c) 13%, var(--surface));
    --encre-c: var(--c);
    display: grid; grid-template-columns: 55px 1fr; grid-template-rows: auto auto; column-gap: 15px; align-items: center;
    padding: 16px 18.5px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 20.5px;
    text-align: left; transition: border-color .15s;
}
.theme--dark .hm-rayon { --ton: color-mix(in srgb, var(--c) 26%, var(--surface)); --encre-c: color-mix(in srgb, var(--c) 45%, #fff); }
.hm-rayon:hover { border-color: var(--c); }
.hm-rayon__icone {
    grid-row: span 2; width: 55px; height: 55px; border-radius: 16px; display: grid; place-items: center; overflow: hidden;
    background: var(--ton); color: var(--encre-c); font-size: 22px; transition: background-color .15s, color .15s;
}
.hm-rayon__icone img { width: 100%; height: 100%; object-fit: cover; }
.hm-rayon:hover .hm-rayon__icone { background: var(--c); color: #fff; }
.hm-rayon__nom { font-weight: 600; font-size: 17px; line-height: 1.25; align-self: end; }
.hm-rayon__nb { font-size: 15px; color: var(--muet); align-self: start; }
.hm-rayon--vide .hm-rayon__nb { font-style: italic; }

/* Puces de filtre */
.hm-puces { display: flex; gap: 9.2px; margin: 0 0 20.5px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.hm-puces::-webkit-scrollbar { display: none; }
.hm-puce {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18.5px; border-radius: 999px;
    border: 1px solid var(--ligne-forte); background: var(--surface); color: var(--encre-2);
    font-size: 16.5px; font-weight: 500; white-space: nowrap;
}
.hm-puce:hover { border-color: var(--encre-2); }
.hm-puce[aria-pressed="true"], .hm-puce[aria-current="page"], .hm-puce.actif { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.theme--dark .hm-puce[aria-pressed="true"], .theme--dark .hm-puce[aria-current="page"], .theme--dark .hm-puce.actif { background: var(--cuivre); border-color: var(--cuivre); color: var(--nuit); }
.hm-puce small { font-size: 14.5px; opacity: .7; }
.hm-sombre .hm-puce { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .85); }
.hm-sombre .hm-puce:hover { border-color: rgba(255, 255, 255, .5); }
.hm-sombre .hm-puce[aria-current="page"], .hm-sombre .hm-puce.actif { background: var(--cuivre); border-color: var(--cuivre); color: var(--nuit); }

.hm-puces--bandeau { margin: 25.5px 0 0; }
.hm-sombre .hm-puce i { color: var(--cuivre); }
.hm-sombre .hm-puce[aria-current="page"] i, .hm-sombre .hm-puce.actif i { color: var(--nuit); }

/* Barre d'outils de liste (nombre + tri) */
.hm-barre-outils { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18.5px; }
.hm-barre-outils--droite { justify-content: flex-end; }
.hm-tri { display: flex; align-items: center; gap: 11.5px; margin: 0; }
.hm-tri label { font-size: 16.5px; color: var(--muet); white-space: nowrap; }
.hm-tri select {
    min-height: 48.5px; padding: 9.2px 43.5px 9.2px 14px; border-radius: 12.5px; border: 1.5px solid var(--ligne-forte);
    background: var(--surface); color: var(--encre); font: 500 16.5px var(--f-texte); appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}

/* ── 10. Cartes produit ──────────────────────────────────────────── */
.hm-produits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18.5px; }
.hm-produits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-produits--5 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.hm-produits--accueil > .hm-carte:nth-child(n+13) { display: none; }
.hm-carte {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); overflow: hidden;
}
.hm-carte__visuel { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.hm-carte__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; display: block; }
.hm-carte:hover .hm-carte__visuel img { transform: scale(1.045); }
.hm-carte__sans-image { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ligne-forte); font-size: 39px; }
.hm-carte__badges { position: absolute; left: 10.5px; top: 10.5px; display: flex; flex-direction: column; align-items: flex-start; gap: 6.9px; }
.hm-niveau {
    display: inline-flex; align-items: center; gap: 5.8px; white-space: nowrap;
    font-size: 13px; font-weight: 600; line-height: 1; padding: 5.8px 10.5px; border-radius: 999px;
}
.hm-carte .hm-niveau { background: rgba(5, 26, 71, .8); color: #fff; -webkit-backdrop-filter: blur(6.9px); backdrop-filter: blur(6.9px); }
.hm-carte .hm-niveau--pro i { color: #ffb84d; }
.hm-carte .hm-niveau--verifiee i { color: #c4b5fd; }
.hm-carte .hm-niveau--standard i { color: #93c5fd; }
.hm-stock { display: inline-flex; align-items: center; gap: 5.8px; font-size: 13px; font-weight: 700; line-height: 1; padding: 5.8px 10.5px; border-radius: 999px; }
.hm-stock--bas { background: #fff1d6; color: #8a4b00; }
.hm-stock--rupture { background: #c8243b; color: #fff; }
.hm-coeur {
    position: absolute; right: 9.2px; top: 9.2px; width: 41.5px; height: 41.5px; border-radius: 50%;
    display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .94); color: var(--nuit); font-size: 17px;
    box-shadow: 0 2px 9.2px rgba(5, 26, 71, .18);
}
.hm-coeur:hover { color: #e11d48; }
.hm-coeur.wishlist--active, .hm-coeur[aria-pressed="true"] { color: #e11d48; }
.hm-coeur.wishlist--active i, .hm-coeur[aria-pressed="true"] i { animation: hm-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.hm-carte__corps { display: flex; flex-direction: column; flex: 1; padding: 12.5px 14px 14px; min-width: 0; }
.hm-carte__boutique { font-size: 14.5px; color: var(--muet); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-carte__boutique:hover { color: var(--encre); }
.hm-carte__nom {
    margin-top: 2px; font-size: 16.5px; font-weight: 600; line-height: 1.3; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-carte__nom:hover { text-decoration: underline; text-underline-offset: 2px; }
.hm-carte__bas { display: flex; align-items: center; justify-content: space-between; gap: 9.2px; margin-top: auto; padding-top: 11.5px; }
.hm-prix { font: 700 19.5px/1.1 var(--f-titre); letter-spacing: -.01em; white-space: nowrap; }
.hm-prix small { font: 600 14px var(--f-texte); color: var(--muet); margin-left: 3.4px; letter-spacing: 0; }
.hm-ajout {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; border: 0;
    display: grid; place-items: center; background: var(--cuivre); color: var(--nuit); font-size: 17px;
    transition: background-color .15s, transform .15s;
}
.hm-ajout:hover { background: var(--cuivre-fonce); }
.hm-ajout:active { transform: scale(.92); }
.hm-ajout.btn--success, .hm-ajout.ok { background: var(--malachite); color: #fff; }
.hm-ajout.btn--warning, .hm-ajout:disabled { background: var(--surface-3); color: var(--muet); cursor: not-allowed; }
.hm-ajout--lien { background: var(--surface-2); color: var(--encre); border: 1px solid var(--ligne-forte); }
.hm-ajout--lien:hover { background: var(--surface-3); }
.hm-carte__note { font-size: 14.5px; color: var(--muet); margin-top: 9.2px; display: flex; align-items: center; gap: 6.9px; }
.hm-carte__note--alerte { color: var(--attention-texte); }
.hm-vide-filtre { grid-column: 1 / -1; text-align: center; padding: 46px 23px; color: var(--muet); border: 1px dashed var(--ligne-forte); border-radius: 20.5px; }

/* ── 11. Cartes boutique ─────────────────────────────────────────── */
.hm-boutiques { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 18.5px; }
.hm-boutiques--defile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-boutique { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--ligne); border-radius: 23px; overflow: hidden; transition: border-color .15s; min-width: 0; }
.hm-boutique:hover { border-color: var(--ligne-forte); }
.hm-boutique__vitrine { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 3.4px; height: 179.5px; background: var(--surface-2); }
.hm-boutique__vitrine img { width: 100%; height: 100%; object-fit: cover; min-height: 0; display: block; }
.hm-boutique__vitrine img:first-child { grid-row: span 2; }
.hm-boutique__vitrine--1 img:first-child { grid-column: span 2; }
.hm-boutique__vitrine--2 { grid-template-rows: 1fr; }
.hm-boutique__vitrine--logo { background: #fff; }
.hm-boutique__vitrine--logo img { object-fit: contain; padding: 16px 16px 34.5px; }
.hm-boutique__vitrine--2 img:first-child { grid-row: auto; }
.hm-boutique__vitrine--vide { display: grid; place-items: center; grid-template-columns: 1fr; background: var(--surface-3); color: var(--ligne-forte); font-size: 34.5px; }
.hm-boutique__logo { position: absolute; left: 18.5px; top: 145px; width: 66.5px; height: 66.5px; border-radius: 50%; border: 3.4px solid var(--surface); background: #fff; overflow: hidden; }
.hm-boutique__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-boutique__corps { display: flex; flex-direction: column; gap: 6.9px; padding: 46px 18.5px 18.5px; flex: 1; }
.hm-boutique__nom { display: flex; align-items: center; flex-wrap: wrap; gap: 6.9px 10.5px; }
.hm-boutique__nom strong { font: 700 21.5px/1.2 var(--f-titre); letter-spacing: -.01em; }
.hm-niveau--pro { background: #fdf0da; color: #8a4700; }
.hm-niveau--pro i { color: #d97706; }
.hm-niveau--verifiee { background: #efe9ff; color: #5b21b6; }
.hm-niveau--verifiee i { color: #7c3aed; }
.hm-niveau--standard { background: #e7efff; color: #1b48a8; }
.hm-niveau--standard i { color: #2563eb; }
.hm-niveau--simple { background: var(--surface-3); color: var(--muet); }
.theme--dark .hm-niveau--pro { background: rgba(217, 119, 6, .18); color: #ffc46b; }
.theme--dark .hm-niveau--verifiee { background: rgba(124, 58, 237, .22); color: #cdb8ff; }
.theme--dark .hm-niveau--verifiee i { color: #cdb8ff; }
.theme--dark .hm-niveau--standard { background: rgba(37, 99, 235, .2); color: #9cc0ff; }
.theme--dark .hm-niveau--standard i { color: #9cc0ff; }
.hm-boutique__devise { font-size: 16px; color: var(--muet); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-boutique__infos { display: flex; flex-wrap: wrap; gap: 4.6px 16px; margin-top: auto; padding-top: 11.5px; border-top: 1px solid var(--ligne); font-size: 15.5px; color: var(--encre-2); }
.hm-boutique__infos span { display: inline-flex; align-items: center; gap: 6.9px; }
.hm-boutique__infos .fa-star { color: #f59e0b; }
.hm-boutique__infos em { font-style: normal; color: var(--muet); }
.hm-boutique__infos .fa-location-dot { color: var(--muet); }
.hm-etoiles { color: #f59e0b; letter-spacing: 1px; white-space: nowrap; }
.hm-etoiles .vide { color: var(--ligne-forte); }

.hm-boutique-cellule { display: flex; min-width: 0; }
.hm-boutique-cellule > .hm-boutique { flex: 1; }

/* ── 12. Étapes, tarifs, vendre ──────────────────────────────────── */
.hm-commander { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 46px; align-items: start; }
.hm-etapes { list-style: none; margin: 30px 0 0; padding: 0; }
.hm-etapes li { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 20.5px; padding-bottom: 32px; }
.hm-etapes li:not(:last-child)::before { content: ""; position: absolute; left: 28.5px; top: 69px; bottom: 6.9px; border-left: 2px dashed var(--ligne-forte); }
.hm-etapes li:last-child { padding-bottom: 0; }
.hm-etape__num { width: 60px; height: 60px; border-radius: 18.5px; display: grid; place-items: center; background: var(--nuit); color: #fff; font: 800 25.5px var(--f-titre); }
.theme--dark .hm-etape__num { background: var(--cuivre); color: var(--nuit); }
.hm-etapes h3 { font-size: 20.5px; font-weight: 700; margin: 3.4px 0 5.8px; }
.hm-etapes p { color: var(--encre-2); font-size: 18px; max-width: 52ch; }
.hm-mm { display: flex; flex-wrap: wrap; gap: 6.9px; margin-top: 11.5px; }
.hm-mm span { font-size: 14.5px; font-weight: 600; padding: 5.8px 11.5px; border-radius: 9.2px; background: var(--surface); border: 1px solid var(--ligne); color: var(--encre-2); }
.hm-tarifs { background: var(--surface); border: 1px solid var(--ligne); border-radius: 25.5px; padding: 27.5px 27.5px 23px; }
.hm-tarifs h3 { display: flex; align-items: center; gap: 11.5px; font-size: 22px; font-weight: 700; }
.hm-tarifs h3 i { color: var(--cuivre); }
.hm-tarifs > p { color: var(--muet); font-size: 16.5px; margin-top: 4.6px; }
.hm-tarifs dl { margin: 16px 0 0; }
.hm-tarifs dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 18.5px; padding: 14px 0; border-bottom: 1px dashed var(--ligne-forte); }
.hm-tarifs dt { color: var(--encre-2); font-size: 17px; }
.hm-tarifs dd { margin: 0; font: 700 19.5px var(--f-titre); white-space: nowrap; }
.hm-tarifs dd small { font: 600 14px var(--f-texte); color: var(--muet); margin-left: 3.4px; }
.hm-tarifs dd.hm-tarifs__valider { font: 600 16px var(--f-texte); color: var(--malachite); }
.hm-tarifs__note { display: flex; gap: 11.5px; margin-top: 18.5px; font-size: 15.5px; color: var(--muet); line-height: 1.5; }
.hm-tarifs__note i { color: var(--malachite); margin-top: 3.4px; }
.hm-tarifs .hm-btn { width: 100%; margin-top: 18.5px; }
.hm-vendre {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 50.5px; align-items: end;
    padding: 55px; border-radius: 32px; color: #fff; background-color: var(--nuit);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.04' stroke-width='2'%3E%3Cpath d='M0 14h14V0M42 0v14h14M0 42h14v14M56 42H42v14'/%3E%3Cpath d='M14 28h7v-7h14v7h7M14 28h7v7h14v-7h7'/%3E%3C/g%3E%3C/svg%3E");
}
.hm-vendre h2 { font-weight: 800; font-size: clamp(1.955rem, 1.38rem + 1.725vw, 2.817rem); line-height: 1.08; letter-spacing: -.02em; max-width: 16ch; }
.hm-vendre p { margin: 18.5px 0 30px; color: rgba(255, 255, 255, .8); font-size: 19px; max-width: 44ch; }
.hm-vendre__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hm-vendre--compact { grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; padding: 41.5px 46px; }
.hm-vendre--compact p { margin-bottom: 0; }
.hm-escalier { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11.5px; align-items: end; }
.hm-escalier li {
    display: flex; flex-direction: column; gap: 3.4px; min-height: calc(147px + (var(--n) - 1) * 39px);
    padding: 18.5px 16px 16px; border-radius: 16px 16px 9.2px 9.2px;
    background: rgba(255, 255, 255, .065); border: 1px solid rgba(255, 255, 255, .13); border-top: 3.4px solid var(--lc);
}
.hm-escalier i { color: var(--lc); font-size: 20.5px; margin-bottom: 9.2px; }
.hm-escalier strong { font-size: 17px; font-weight: 700; }
.hm-escalier__prix { font: 700 23px/1.2 var(--f-titre); letter-spacing: -.01em; }
.hm-escalier__prix small { font: 500 14.5px var(--f-texte); opacity: .75; }
.hm-escalier li > span:last-child { margin-top: auto; padding-top: 9.2px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .72); }

/* ── 13. Pied de page ────────────────────────────────────────────── */
.hm-pied { background: var(--nuit); color: rgba(255, 255, 255, .74); padding: 64.5px 0 32px; margin-top: 27.5px; font-size: 16.5px; }
.hm-pied__grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 41.5px; }
.hm-pied__logo img { height: 64.5px; width: auto; display: block; }
.hm-pied__desc { margin: 18.5px 0 20.5px; max-width: 34ch; line-height: 1.6; }
.hm-pied h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.hm-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11.5px; }
.hm-pied ul i { width: 20.5px; margin-right: 6.9px; }
.hm-pied a:hover { color: #fff; }
.hm-reseaux { display: flex; gap: 9.2px; }
.hm-reseaux a { width: 46px; height: 46px; border-radius: 12.5px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; font-size: 19.5px; }
.hm-reseaux a:hover { background: rgba(255, 255, 255, .16); }
.hm-paiements { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-paiements span { font-size: 15px; font-weight: 600; color: #fff; padding: 6.9px 11.5px; border-radius: 10.5px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.hm-pied__flexpay { margin-top: 14px; font-size: 15.5px; display: flex; align-items: center; gap: 9.2px; }
.hm-pied__flexpay i { color: var(--cuivre); }
.hm-pied__bas { display: flex; justify-content: space-between; gap: 18.5px; flex-wrap: wrap; margin-top: 46px; padding-top: 23px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15.5px; }

/* ── 14. Barre mobile, WhatsApp, toasts ──────────────────────────── */
.hm-barre { display: none; }
.hm-whatsapp {
    position: fixed; right: 20.5px; bottom: 27.5px; z-index: 55; width: 62px; height: 62px; border-radius: 50%;
    display: grid; place-items: center; background: #1fa855; color: #fff !important; font-size: 31px;
    box-shadow: 0 11.5px 27.5px -6px rgba(31, 168, 85, .6);
}
.hm-whatsapp:hover { background: #178f47; }
.hm-toasts { position: fixed; right: 27.5px; bottom: 27.5px; z-index: 120; display: flex; flex-direction: column; gap: 11.5px; align-items: flex-end; pointer-events: none; }
.hm-toast, .hm .toast {
    display: flex; align-items: center; gap: 14px; max-width: min(483px, calc(115vw - 37px));
    padding: 14px 14px 14px 16px; border-radius: 18.5px; background: var(--nuit); color: #fff;
    box-shadow: 0 20.5px 50.5px -12px rgba(3, 12, 36, .55); pointer-events: auto;
    transform: translateY(18.5px); opacity: 0; transition: transform .25s, opacity .25s;
}
.theme--dark .hm-toast, .theme--dark .toast { background: #16295a; }
.hm-toast.visible, .hm .toast.toast--visible { transform: none; opacity: 1; }
.hm-toast__icone { width: 37px; height: 37px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: #19a67f; color: #fff; font-size: 16px; }
.hm-toast--erreur .hm-toast__icone { background: #d9344d; }
.hm-toast--info .hm-toast__icone { background: rgba(255, 255, 255, .16); }
.hm-toast p { font-size: 16.5px; line-height: 1.4; }
.hm-toast__action, .hm .toast__close { flex-shrink: 0; border: 0; background: rgba(255, 255, 255, .1); color: var(--cuivre); font-weight: 600; font-size: 16px; padding: 9.2px 14px; border-radius: 11.5px; }
.hm .toast { position: fixed; right: 27.5px; bottom: 27.5px; z-index: 120; }

/* ── 15. États vides, statuts, tableaux, onglets ─────────────────── */
.hm-vide, .hm .empty-state {
    text-align: center; padding: 64.5px 23px; border: 1px dashed var(--ligne-forte); border-radius: var(--r-panneau);
    background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 11.5px;
}
.hm-vide > i, .hm .empty-state__icon { font-size: 43.5px; color: var(--ligne-forte); margin-bottom: 6.9px; }
.hm-vide h3 { font-size: 23px; }
.hm-vide p, .hm .empty-state__text { color: var(--muet); max-width: 46ch; margin: 0 auto 9.2px; }
.hm-statut {
    display: inline-flex; align-items: center; gap: 6.9px; padding: 4.6px 11.5px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
    background: var(--surface-3); color: var(--encre-2);
}
.hm-statut--succes { background: var(--succes-fond); color: var(--succes-texte); }
.hm-statut--attente { background: var(--attention-fond); color: var(--attention-texte); }
.hm-statut--erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.hm-statut--info { background: var(--info-fond); color: var(--info-texte); }
.hm-table-wrap, .hm .table-responsive { width: 100%; overflow-x: auto; border: 1px solid var(--ligne); border-radius: 18.5px; background: var(--surface); }
.hm-table, .hm .admin-table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.hm-table th, .hm .admin-table th {
    text-align: left; font-weight: 600; font-size: 15px; color: var(--muet); background: var(--surface-2);
    padding: 12.5px 16px; border-bottom: 1px solid var(--ligne); white-space: nowrap;
}
.hm-table td, .hm .admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.hm-table tr:last-child td, .hm .admin-table tr:last-child td { border-bottom: 0; }
.hm-table tbody tr:hover, .hm .admin-table tbody tr:hover { background: var(--surface-2); }
.hm-table img { border-radius: 9.2px; object-fit: cover; }
.hm-onglets { display: flex; gap: 4.6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ligne); margin-bottom: 25.5px; }
.hm-onglets::-webkit-scrollbar { display: none; }
.hm-onglets a, .hm-onglets button {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 9.2px;
    padding: 14px 16px; border: 0; background: none; font-size: 17px; font-weight: 500; color: var(--muet); white-space: nowrap;
}
.hm-onglets a:hover, .hm-onglets button:hover { color: var(--encre); }
.hm-onglets [aria-current="page"], .hm-onglets [aria-selected="true"] { color: var(--encre); font-weight: 600; }
.hm-onglets [aria-current="page"]::after, .hm-onglets [aria-selected="true"]::after { content: ""; position: absolute; left: 11.5px; right: 11.5px; bottom: -1px; height: 3.4px; border-radius: 3.4px 3.4px 0 0; background: var(--cuivre); }
.hm-onglets .hm-pastille { position: static; border: 0; }

/* Tuiles de chiffres (tableaux de bord) */
.hm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(218.5px, 1fr)); gap: 16px; }
.hm-stat { background: var(--surface); border: 1px solid var(--ligne); border-radius: 20.5px; padding: 20.5px; display: flex; flex-direction: column; gap: 6.9px; min-width: 0; }
.hm-stat__label { font-size: 15.5px; color: var(--muet); display: flex; align-items: center; gap: 9.2px; }
.hm-stat__label i { color: var(--cuivre); }
.hm-stat__valeur { font: 800 30px/1.1 var(--f-titre); letter-spacing: -.02em; overflow-wrap: anywhere; }
.hm-stat__valeur small { font: 600 15px var(--f-texte); color: var(--muet); margin-left: 4.6px; letter-spacing: 0; }
.hm-stat__note { font-size: 15px; color: var(--muet); }

/* Quantité */
.hm-qte, .hm .qty-control { display: inline-flex; align-items: center; border: 1px solid var(--ligne-forte); border-radius: 12.5px; overflow: hidden; background: var(--surface); }
.hm-qte button, .hm .qty-control__btn { width: 43.5px; height: 43.5px; border: 0; background: transparent; font-size: 14px; color: var(--encre); }
.hm-qte button:hover:not(:disabled), .hm .qty-control__btn:hover:not(:disabled) { background: var(--surface-2); }
.hm-qte button:disabled, .hm .qty-control__btn:disabled { opacity: .35; cursor: not-allowed; }
.hm-qte output, .hm-qte span, .hm .qty-control__value { min-width: 34.5px; text-align: center; font-weight: 600; font-size: 17px; }

/* Dialogues */
.hm dialog { border: 0; padding: 0; color: var(--encre); background: var(--surface); }
.hm dialog::backdrop { background: rgba(3, 12, 36, .58); }
.hm-dialogue { width: min(529px, calc(100% - 37px)); max-height: calc(100% - 55px); border-radius: 25.5px; box-shadow: 0 34.5px 92px rgba(3, 12, 36, .4); }
.hm-dialogue form { display: flex; flex-direction: column; max-height: inherit; }
.hm-dialogue header { padding: 25.5px 25.5px 6.9px; }
.hm-dialogue h2 { font-size: 25.5px; font-weight: 800; }
.hm-dialogue header p { color: var(--muet); margin-top: 4.6px; font-size: 17px; }
.hm-dialogue footer { display: flex; justify-content: flex-end; gap: 11.5px; padding: 16px 25.5px 23px; border-top: 1px solid var(--ligne); }
.hm-communes { overflow-y: auto; padding: 14px 25.5px; display: grid; gap: 9.2px; }
.hm-communes h3 { font: 600 15.5px var(--f-texte); color: var(--muet); margin: 4.6px 2px -2px; }
.hm-communes h3:not(:first-child) { margin-top: 14px; }
.hm-communes label { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--ligne); cursor: pointer; }
.hm-communes label:hover { border-color: var(--ligne-forte); }
.hm-communes label:has(input:checked) { border-color: var(--nuit); box-shadow: inset 0 0 0 1px var(--nuit); background: var(--surface-2); }
.theme--dark .hm-communes label:has(input:checked) { border-color: var(--cuivre); box-shadow: inset 0 0 0 1px var(--cuivre); }
.hm-communes input { margin: 0; }
.hm-communes span { flex: 1; font-weight: 500; }
.hm-communes b { font: 700 18px var(--f-titre); white-space: nowrap; }
.hm-communes b.valider { font: 600 15.5px var(--f-texte); color: var(--malachite); }

/* ── Fiche produit ───────────────────────────────────────────────── */
.hm-fiche-fil { padding-top: 20.5px; }
.hm-fil--clair { color: var(--muet); margin-bottom: 0; }
.hm-fil--clair a:hover { color: var(--encre); }
.hm-fil--clair span[aria-current] { color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.hm-fiche { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 46px; align-items: start; padding-top: 20.5px; padding-bottom: 37px; }
/* Galerie : chaque photo sur un fond flouté tiré d'elle-même ; défilement, loupe, plein écran (hm.js) */
.hm-galerie { position: sticky; top: calc(var(--entete-h) + 18.5px); display: grid; gap: 14px; min-width: 0; }
.hm-galerie__scene {
    position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 1 / 1; max-height: 78vh;
    border-radius: 25.5px; background: var(--surface-3); touch-action: pan-y; -webkit-user-select: none; user-select: none;
    box-shadow: 0 34px 60px -40px rgba(5, 26, 71, .55);
}
.hm-galerie__scene--vide { display: grid; place-items: center; border: 1px solid var(--ligne); background: var(--surface); box-shadow: none; }
.hm-galerie__scene--vide .hm-carte__sans-image { font-size: 69px; }
.hm-galerie__piste { display: flex; height: 100%; transition: transform .6s cubic-bezier(.22, .8, .24, 1); }
.hm-galerie__diapo { position: relative; flex: 0 0 100%; height: 100%; margin: 0; overflow: hidden; }
.hm-galerie__fond {
    position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; pointer-events: none;
    filter: blur(34px) saturate(1.4); opacity: .62;
}
.hm-galerie__diapo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(5, 26, 71, .18)); }
.hm-galerie__photo {
    position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
    cursor: zoom-in; transition: transform .35s ease; -webkit-user-drag: none;
}
.hm-galerie__photo--loupe { transform: scale(1.9); transition: transform .2s ease-out; }
.hm-galerie__segments { position: absolute; z-index: 2; top: 16px; left: 18.5px; right: 18.5px; display: flex; gap: 6.9px; pointer-events: none; }
.hm-galerie__segments span { flex: 1; height: 3.4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .45); box-shadow: 0 0 0 .5px rgba(5, 26, 71, .15); }
.hm-galerie__segments i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.hm-galerie__segments .vu i { width: 100%; }
.hm-galerie__segments .en-cours i { animation: hm-segment var(--delai, 4.5s) linear forwards; }
.hm-galerie--arret .hm-galerie__segments .en-cours i { animation: none; width: 100%; }
.hm-galerie--pause .hm-galerie__segments .en-cours i { animation-play-state: paused; }
@keyframes hm-segment { from { width: 0; } to { width: 100%; } }
.hm-galerie__fleche {
    position: absolute; z-index: 2; top: 50%; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: 17px; color: var(--nuit); background: rgba(255, 255, 255, .9); cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(5, 26, 71, .55); opacity: 0; transition: opacity .2s, transform .2s, background-color .2s;
}
.hm-galerie__fleche--prec { left: 16px; transform: translateX(-8px); }
.hm-galerie__fleche--suiv { right: 16px; transform: translateX(8px); }
.hm-galerie__scene:hover .hm-galerie__fleche, .hm-galerie__fleche:focus-visible { opacity: 1; transform: none; }
.hm-galerie__fleche:hover { background: var(--cuivre); }
.hm-galerie__outils { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.hm-galerie__compteur, .hm-galerie__outil {
    height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 999px;
    background: rgba(5, 26, 71, .6); color: #fff; font-size: 14.5px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hm-galerie__compteur { padding: 0 14px; font-variant-numeric: tabular-nums; }
.hm-galerie__outil { width: 40px; padding: 0; border: 0; cursor: pointer; transition: background-color .2s, color .2s; }
.hm-galerie__outil:hover { background: var(--cuivre); color: var(--nuit); }
.hm-galerie__vignettes { position: relative; display: flex; gap: 11.5px; overflow: auto; scrollbar-width: none; padding: 3px; }
.hm-galerie__vignettes::-webkit-scrollbar { display: none; }
.hm-galerie__vignette {
    position: relative; flex-shrink: 0; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
    background: var(--surface-3); cursor: pointer; opacity: .6; box-shadow: 0 0 0 1px var(--ligne); transition: opacity .2s, box-shadow .2s;
}
.hm-galerie__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hm-galerie__vignette:hover { opacity: .9; }
.hm-galerie__vignette.actif { opacity: 1; box-shadow: 0 0 0 2.5px var(--cuivre), 0 10px 20px -12px rgba(5, 26, 71, .6); }
@media (min-width: 1200px) {
    /* Grand écran : vignettes en colonne à gauche de la photo */
    .hm-galerie--multi { grid-template-columns: 86px minmax(0, 1fr); align-items: stretch; }
    .hm-galerie--multi .hm-galerie__vignettes { order: -1; flex-direction: column; height: 0; min-height: 100%; }
}
@media (hover: none) { .hm-galerie__fleche { display: none; } .hm-galerie__photo { cursor: pointer; } }

/* Plein écran */
.hm dialog.hm-visionneuse {
    width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: rgba(3, 12, 36, .97); color: #fff; overscroll-behavior: contain;
}
.hm-visionneuse[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.hm dialog.hm-visionneuse::backdrop { background: rgba(3, 12, 36, .6); }
@media (prefers-reduced-motion: no-preference) {
    .hm-visionneuse[open] { animation: hm-visionneuse .25s ease; }
    @keyframes hm-visionneuse { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
}
.hm-visionneuse__haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18.5px; }
.hm-visionneuse__compteur { font-size: 16px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.hm-visionneuse__bouton {
    width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); color: #fff; font-size: 20px; cursor: pointer; transition: background-color .2s, color .2s;
}
.hm-visionneuse__bouton:hover { background: var(--cuivre); color: var(--nuit); }
.hm-visionneuse__scene { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; overflow: hidden; padding: 0 90px; touch-action: pan-y; }
.hm-visionneuse__scene img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .3s ease; -webkit-user-select: none; user-select: none; }
.hm-visionneuse__scene img.zoom { transform: scale(2.2); cursor: zoom-out; }
.hm-visionneuse__fleche { position: absolute; top: 50%; margin-top: -26px; }
.hm-visionneuse__fleche--prec { left: 20px; }
.hm-visionneuse__fleche--suiv { right: 20px; }
.hm-visionneuse__vignettes { display: flex; justify-content: center; gap: 10.5px; padding: 16px 18.5px 22px; overflow-x: auto; scrollbar-width: none; }
.hm-visionneuse__vignettes:empty { display: none; }
.hm-visionneuse__vignettes button { flex-shrink: 0; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 12.5px; overflow: hidden; opacity: .5; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); background: none; }
.hm-visionneuse__vignettes button.actif { opacity: 1; box-shadow: 0 0 0 2.5px var(--cuivre); }
.hm-visionneuse__vignettes img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-fiche__infos { display: flex; flex-direction: column; gap: 18.5px; min-width: 0; }
.hm-fiche__boutique { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; align-self: flex-start; padding: 9.2px 16px 9.2px 9.2px; border-radius: 18.5px; background: var(--surface); border: 1px solid var(--ligne); }
.hm-fiche__boutique:hover { border-color: var(--ligne-forte); }
.hm-fiche__boutique img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #fff; }
.hm-fiche__boutique strong { display: block; font-size: 17px; }
.hm-fiche__boutique small { display: block; font-size: 14.5px; color: var(--cuivre-texte); font-weight: 600; }
.hm-fiche__titre { font-weight: 800; font-size: clamp(1.955rem, 1.38rem + 1.84vw, 2.875rem); line-height: 1.08; letter-spacing: -.02em; overflow-wrap: anywhere; }
.hm-fiche__note { display: flex; align-items: center; gap: 9.2px; font-size: 16.5px; font-weight: 600; }
.hm-fiche__nb { color: var(--muet); font-weight: 400; }
.hm-fiche__prix { font: 800 clamp(2.185rem, 1.725rem + 1.38vw, 2.875rem)/1 var(--f-titre); letter-spacing: -.02em; color: var(--encre); }
.hm-fiche__etat { gap: 9.2px; }
.hm-statut i { font-size: .9em; }
.hm-variantes { display: flex; flex-direction: column; gap: 11.5px; padding: 18.5px; border-radius: 18.5px; background: var(--surface); border: 1px solid var(--ligne); }
.hm-variantes__liste { display: flex; flex-wrap: wrap; gap: 9.2px; }
.hm-variante { min-height: 50.5px; padding: 0 18.5px; border-radius: 14px; border: 1.5px solid var(--ligne-forte); background: var(--surface); color: var(--encre); font-weight: 600; font-size: 16.5px; }
.hm-variante:hover:not(:disabled) { border-color: var(--encre-2); }
.hm-variante[aria-pressed="true"] { border-color: var(--cuivre); background: color-mix(in srgb, var(--cuivre) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--cuivre); }
.hm-variante:disabled { color: var(--muet); text-decoration: line-through; opacity: .6; cursor: not-allowed; }
.hm-achat { display: flex; flex-direction: column; gap: 16px; }
.hm-achat__qte { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hm-qte input[type="number"] { width: 64.5px; height: 48.5px; border: 0; background: transparent; text-align: center; font: 600 18.5px var(--f-texte); color: var(--encre); -moz-appearance: textfield; }
.hm-qte input[type="number"]::-webkit-outer-spin-button, .hm-qte input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hm-qte button { height: 48.5px; width: 48.5px; }
.hm-fiche__actions { gap: 11.5px; }
.hm-fiche__actions .hm-btn { min-height: 50.5px; }
.js-like-toggle.like--active, .js-like-toggle[aria-pressed="true"] { border-color: var(--nuit); color: var(--nuit); }
.theme--dark .js-like-toggle.like--active { border-color: var(--cuivre); color: var(--cuivre); }
.hm-fiche__actions .js-wishlist-toggle.wishlist--active { border-color: #e11d48; color: #e11d48; }
.hm-garanties { list-style: none; margin: 4.6px 0 0; padding: 18.5px; border-radius: 18.5px; background: var(--surface-2); border: 1px solid var(--ligne); display: grid; gap: 14px; font-size: 16.5px; color: var(--encre-2); }
.hm-garanties li { display: grid; grid-template-columns: 20.5px 1fr; gap: 11.5px; align-items: baseline; }
.hm-garanties i { color: var(--cuivre-texte); width: 20.5px; text-align: center; flex-shrink: 0; }
.hm-garanties strong { color: var(--encre); }
.hm-garanties .hm-btn--texte { min-height: 0; padding: 0; font-weight: 600; }
.hm-fiche-section { padding-bottom: 37px; }
.hm-fiche-section__titre { font-size: 25.5px; font-weight: 800; margin-bottom: 14px; }
.hm-fiche__description { color: var(--encre-2); line-height: 1.7; max-width: 75ch; }
.hm-avis { display: grid; grid-template-columns: minmax(0, 391px) minmax(0, 1fr); gap: 37px; align-items: start; }
.hm-avis__resume { position: sticky; top: calc(var(--entete-h) + 18.5px); display: flex; flex-direction: column; gap: 9.2px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 25.5px; padding: 25.5px; }
.hm-avis__resume .hm-etoiles { font-size: 23px; }
.hm-avis__moyenne { font: 800 50.5px/1 var(--f-titre); letter-spacing: -.02em; }
.hm-avis__moyenne small { font: 600 18.5px var(--f-texte); color: var(--muet); margin-left: 2px; }
.hm-avis__form { margin-top: 16px; padding-top: 18.5px; border-top: 1px solid var(--ligne); gap: 16px; }
.hm-notation { border: 0; padding: 0; margin: 0; }
.star-rating-input { display: flex; gap: 2px; }
.star-rating-input label { cursor: pointer; }
.star-btn { display: block; font-size: 37px; line-height: 1; color: var(--ligne-forte); padding: 2px; transition: color .1s, transform .1s; }
.star-btn.on { color: #f59e0b; }
.star-rating-input label:hover .star-btn { transform: scale(1.1); }
.star-rating-input input:focus-visible + .star-btn { outline: 3.4px solid var(--focus); border-radius: 6.9px; }
.hm-avis__liste { display: flex; flex-direction: column; gap: 14px; }
.hm-avis__item { background: var(--surface); border: 1px solid var(--ligne); border-radius: 20.5px; padding: 18.5px 20.5px; display: flex; flex-direction: column; gap: 9.2px; }
.hm-avis__item header { display: flex; align-items: center; gap: 14px; }
.hm-avis__item header > div { flex: 1; min-width: 0; }
.hm-avis__item header strong { display: block; font-size: 17px; }
.hm-avis__item time { font-size: 15px; color: var(--muet); }
.hm-avis__item p { color: var(--encre-2); line-height: 1.6; overflow-wrap: anywhere; }
.hm-avis__avatar { width: 43.5px; height: 43.5px; border-radius: 50%; display: grid; place-items: center; background: var(--nuit); color: #fff; font-weight: 700; flex-shrink: 0; }
.theme--dark .hm-avis__avatar { background: var(--surface-3); }
.hm-avis__fiabilite { font-size: 14.5px; color: var(--muet); }
.hm-avis__supprimer { color: var(--rouge) !important; font-size: 15.5px; }

/* ── Panier ──────────────────────────────────────────────────────── */
.hm-page__tete { margin-bottom: 25.5px; }
.hm-panier { display: grid; grid-template-columns: minmax(0, 1fr) 414px; gap: 32px; align-items: start; }
.hm-panier__lignes { display: flex; flex-direction: column; gap: 14px; }
.hm-ligne-panier { display: grid; grid-template-columns: 119.5px minmax(0, 1fr); gap: 18.5px; padding: 16px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 20.5px; }
.hm-ligne-panier__image { display: block; width: 119.5px; height: 142.5px; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.hm-ligne-panier__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-ligne-panier__corps { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; }
.hm-ligne-panier__haut { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.hm-ligne-panier__nom { font: 600 18.5px/1.35 var(--f-texte); letter-spacing: 0; overflow-wrap: anywhere; }
.hm-ligne-panier__nom a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hm-ligne-panier__unite { font-size: 15.5px; color: var(--muet); margin-top: 3.4px; }
.hm-ligne-panier__retirer { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12.5px; border: 1px solid var(--ligne); background: var(--surface); color: var(--muet); display: grid; place-items: center; }
.hm-ligne-panier__retirer:hover { color: var(--rouge); border-color: var(--erreur-bord); background: var(--erreur-fond); }
.hm-ligne-panier__bas { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hm-ligne-panier__total { font-size: 20.5px; }
.hm-panier__resume { position: sticky; top: calc(var(--entete-h) + 18.5px); display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 25.5px; padding: 25.5px; }
.hm-panier__resume h2 { font-size: 23px; font-weight: 800; }
.hm-resume__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--ligne-forte); }
.hm-resume__ligne span { font-weight: 600; }
.hm-resume__total { font: 800 30px/1.1 var(--f-titre); letter-spacing: -.02em; }
.hm-resume__livraison, .hm-resume__securite { display: grid; grid-template-columns: 20.5px 1fr; gap: 11.5px; font-size: 16px; color: var(--muet); align-items: baseline; }
.hm-resume__livraison i { color: var(--cuivre-texte); }
.hm-resume__securite i { color: var(--malachite); }
.hm-resume__livraison strong { color: var(--encre); }
.hm-resume__continuer { align-self: center; }

/* ── Paiement ────────────────────────────────────────────────────── */
.hm-parcours { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6.9px 25.5px; font-size: 16px; color: var(--muet); }
.hm-parcours li { display: flex; align-items: center; gap: 9.2px; }
.hm-parcours li a { display: flex; align-items: center; gap: 9.2px; }
.hm-parcours li span, .hm-parcours li i { width: 27.5px; height: 27.5px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--surface-3); color: var(--muet); font-style: normal; }
.hm-parcours li.fait i { background: var(--malachite); color: #fff; }
.hm-parcours li.fait a:hover { color: var(--encre); text-decoration: underline; }
.hm-parcours li[aria-current] { color: var(--encre); font-weight: 600; }
.hm-parcours li[aria-current] span { background: var(--nuit); color: #fff; }
.theme--dark .hm-parcours li[aria-current] span { background: var(--cuivre); color: var(--nuit); }
.hm-paiement { display: grid; grid-template-columns: minmax(0, 1fr) 437px; gap: 32px; align-items: start; }
.hm-paiement__form { display: flex; flex-direction: column; gap: 18.5px; min-width: 0; }
.hm-paiement__form fieldset { margin: 0; min-width: 0; }
.hm-paiement__legende { display: flex; align-items: center; gap: 11.5px; font: 700 22px var(--f-titre); padding: 0; margin-bottom: 18.5px; float: left; width: 100%; }
.hm-paiement__legende + * { clear: both; }
.hm-paiement__legende span { width: 34.5px; height: 34.5px; border-radius: 11.5px; display: grid; place-items: center; background: var(--nuit); color: #fff; font-size: 17px; }
.theme--dark .hm-paiement__legende span { background: var(--cuivre); color: var(--nuit); }
.hm-gps { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18.5px; padding-top: 18.5px; border-top: 1px dashed var(--ligne-forte); }
.hm-gps .hm-aide { flex: 1; min-width: 253px; }
.hm-gps__ok { color: var(--succes-texte); }
.hm-gps__alerte { color: var(--attention-texte); }
.hm-paiement__autre { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--info-fond); color: var(--info-texte); }
.hm-champ--inactif { opacity: .45; pointer-events: none; }
.hm-paiement__validations { margin-bottom: 23px; }
.hm-paiement__validations p { margin-top: 4.6px; }
.hm-paiement__reprendre { margin-top: 14px; }
.hm-recap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hm-recap li { display: grid; grid-template-columns: 55px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.hm-recap img, .hm-recap__vide { width: 55px; height: 55px; border-radius: 11.5px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--ligne-forte); }
.hm-recap__nom { font-size: 16.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.hm-recap__nom small { display: block; font-weight: 400; color: var(--muet); font-size: 15px; margin-top: 2px; }
.hm-recap li > strong { font: 700 17px var(--f-titre); white-space: nowrap; }
.hm-recap__totaux { margin: 0; display: flex; flex-direction: column; gap: 11.5px; padding-top: 16px; border-top: 1px dashed var(--ligne-forte); }
.hm-recap__totaux div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.hm-recap__totaux dt { color: var(--encre-2); font-size: 17px; display: flex; align-items: center; gap: 9.2px; }
.hm-recap__totaux dd { margin: 0; font: 700 18.5px var(--f-titre); white-space: nowrap; }
.hm-recap__total { padding-top: 11.5px; border-top: 1px solid var(--ligne); }
.hm-recap__total dt { font-weight: 700; color: var(--encre); }
.hm-recap__total dd { font-size: 27.5px; font-weight: 800; letter-spacing: -.02em; }
.hm-zone:not(:empty) { font: 700 13px var(--f-texte); padding: 3.4px 8px; border-radius: 6.9px; background: var(--info-fond); color: var(--info-texte); }
.hm-commandes { margin-top: 41.5px; display: flex; flex-direction: column; gap: 14px; }
.hm-commandes__date { display: flex; align-items: center; gap: 9.2px; font-weight: 600; color: var(--succes-texte); margin-bottom: 14px; }
.hm-commandes__total { text-align: right; margin-top: 14px; padding-top: 11.5px; border-top: 1px solid var(--ligne); color: var(--encre-2); }
.hm-commandes__total strong { font: 800 20.5px var(--f-titre); color: var(--encre); }

/* Attente de confirmation du paiement */
.hm-attente { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 41.5px 32px; }
.hm-attente__icone { position: relative; width: 101px; height: 101px; border-radius: 50%; display: grid; place-items: center; background: var(--info-fond); color: var(--info-texte); font-size: 39px; }
.hm-attente__icone--ok { background: var(--succes-fond); color: var(--succes-texte); }
.hm-attente__icone--echec { background: var(--erreur-fond); color: var(--erreur-texte); }
.hm-attente__anneau { position: absolute; inset: -4px; border-radius: 50%; border: 4.6px solid transparent; border-top-color: var(--cuivre); animation: hm-tourne 1s linear infinite; }
@keyframes hm-tourne { to { transform: rotate(360deg); } }
.hm-attente__titre { font-size: clamp(1.61rem, 1.265rem + 1.15vw, 2.07rem); font-weight: 800; }
.hm-attente__texte { color: var(--encre-2); max-width: 44ch; }
.hm-attente__progression { width: 100%; height: 6.9px; border-radius: 114px; background: var(--surface-3); overflow: hidden; }
.hm-attente__progression div { height: 100%; width: 0; border-radius: 114px; background: var(--cuivre); transition: width .5s ease; }
.hm-attente__commande { font-size: 16px; color: var(--muet); }
.hm-attente__actions { display: flex; flex-wrap: wrap; gap: 11.5px; justify-content: center; }

/* Notifications */
.hm-notifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11.5px; }
.hm-notif { display: grid; grid-template-columns: 50.5px minmax(0, 1fr); gap: 16px; padding: 18.5px; border-radius: 20.5px; background: var(--surface); border: 1px solid var(--ligne); }
.hm-notif--nouvelle { background: color-mix(in srgb, var(--info-fond) 70%, var(--surface)); border-color: var(--info-bord); }
.hm-notif__icone { width: 50.5px; height: 50.5px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); font-size: 19.5px; }
.theme--dark .hm-notif__icone { background: color-mix(in srgb, var(--c) 26%, var(--surface)); color: color-mix(in srgb, var(--c) 45%, #fff); }
.hm-notif__titre { display: flex; align-items: center; gap: 9.2px; flex-wrap: wrap; font-weight: 600; font-size: 18px; }
.hm-notif__point { width: 10.5px; height: 10.5px; border-radius: 50%; background: var(--focus); }
.hm-notif__message { margin-top: 4.6px; color: var(--encre-2); font-size: 16.5px; line-height: 1.5; overflow-wrap: anywhere; }
.hm-notif__pied { display: flex; align-items: center; gap: 18.5px; flex-wrap: wrap; margin-top: 9.2px; font-size: 15px; color: var(--muet); }
.hm-notif__pied .hm-lien { font-size: 15.5px; }

/* Connexion, inscription */
.hm-auth { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 1500px; margin: 0 auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: 32px; overflow: hidden; }
.hm-auth__cote {
    display: flex; flex-direction: column; justify-content: center; gap: 20.5px; padding: 50.5px 46px; color: #fff; background-color: var(--nuit);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.04' stroke-width='2'%3E%3Cpath d='M0 14h14V0M42 0v14h14M0 42h14v14M56 42H42v14'/%3E%3Cpath d='M14 28h7v-7h14v7h7M14 28h7v7h14v-7h7'/%3E%3C/g%3E%3C/svg%3E");
}
.hm-auth__logo { height: 69px; width: auto; align-self: flex-start; }
.hm-auth__accroche { font: 800 clamp(1.955rem, 1.38rem + 1.61vw, 2.645rem)/1.08 var(--f-titre); letter-spacing: -.02em; max-width: 14ch; }
.hm-auth__preuves { flex-direction: column; margin-top: 4.6px; gap: 14px; }
.hm-auth__form { padding: 46px 50.5px; display: flex; flex-direction: column; gap: 20.5px; min-width: 0; }
.hm-auth__form .hm-sous-titre { margin-top: -10px; }
.hm-auth__liens { display: flex; flex-direction: column; gap: 6.9px; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 16.5px; color: var(--muet); }
.hm-auth__liens a { color: var(--cuivre-texte); font-weight: 600; }
.hm-auth__liens a:hover { text-decoration: underline; text-underline-offset: 3.4px; }
.hm-ok-champ { color: var(--succes-texte); }
.hm-champ [aria-invalid="true"] { border-color: var(--rouge); }

/* Pages d'erreur */
.hm-erreur { text-align: center; padding: 64.5px 0 83px; }
.hm-erreur .hm-conteneur { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hm-erreur__code { font: 800 clamp(5.75rem, 3.45rem + 9.2vw, 9.2rem)/.9 var(--f-titre); letter-spacing: -.04em; color: var(--cuivre); }
.hm-erreur .hm-sous-titre { max-width: 46ch; }
.hm-erreur__actions { display: flex; flex-wrap: wrap; gap: 11.5px; justify-content: center; margin-top: 9.2px; }
.hm-erreur__recherche { width: 100%; margin-top: 20.5px; }
.hm-erreur__recherche input { border: 1.5px solid var(--ligne-forte); }

/* ── En-tête de boutique ─────────────────────────────────────────── */
.hm-vitrine-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 27.5px; align-items: start; }
.hm-vitrine-tete__logo { width: 119.5px; height: 119.5px; border-radius: 27.5px; object-fit: cover; background: #fff; border: 4.6px solid rgba(255, 255, 255, .95); box-shadow: 0 18.5px 39px -12px rgba(0, 0, 0, .55); }
.hm-vitrine-tete__texte h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 9.2px 14px; font-size: clamp(1.955rem, 1.38rem + 2.07vw, 2.875rem); }
.hm-vitrine-tete__texte h1 .hm-niveau { font-family: var(--f-texte); font-size: 15px; letter-spacing: 0; }
.hm-vitrine-tete__texte > p { margin-top: 9.2px; }
.hm-vitrine-tete__infos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9.2px 20.5px; font-size: 16.5px; color: rgba(255, 255, 255, .82); }
.hm-vitrine-tete__infos li { display: inline-flex; align-items: center; gap: 8px; }
.hm-vitrine-tete__infos i { color: var(--cuivre); }
.hm-vitrine-tete__infos strong { color: #fff; }
.hm-vitrine-tete__infos a:hover { color: #fff; text-decoration: underline; }
.hm-vitrine-tete__abo { margin-top: 16px; }
.hm-sombre .hm-statut--succes { background: rgba(60, 198, 160, .16); color: #8ee6c8; }
.hm-sombre .hm-statut--erreur { background: rgba(255, 107, 129, .16); color: #ffb3c0; }
.hm-vitrine-tete__actions { display: flex; flex-direction: column; gap: 11.5px; min-width: 253px; }

/* Feuille « Mon compte » (téléphone) */
.hm-feuille { margin: auto auto 0; width: 100%; max-width: 598px; border-radius: 25.5px 25.5px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.hm-menu-compte--feuille { position: static; width: auto; border: 0; box-shadow: none; border-radius: 0; padding: 14px 12px 12px; }
.hm-menu-compte--feuille a, .hm-menu-compte--feuille button { padding: 13px 12px; font-size: 16px; }
.hm-menu-compte--feuille > button[data-ferme-dialogue] { justify-content: center; margin-top: 6px; background: var(--surface-2); }

/* Publicités flottantes */
.hm-pub { position: fixed; bottom: 110.5px; z-index: 54; width: min(322px, calc(115vw - 37px)); border-radius: 16px; overflow: hidden; box-shadow: 0 18.5px 46px -10px rgba(3, 12, 36, .5); background: var(--surface); animation: hm-monte .4s ease; }
.hm-pub--droite { right: 20.5px; }
.hm-pub--gauche { left: 20.5px; }
.hm-pub--centre { left: 50%; transform: translateX(-50%); }
.hm-pub img { display: block; width: 100%; max-height: 207px; object-fit: cover; }
.hm-pub__fermer { position: absolute; top: 9.2px; right: 9.2px; width: 34.5px; height: 34.5px; border-radius: 50%; border: 0; background: rgba(3, 12, 36, .6); color: #fff; font-size: 16px; display: grid; place-items: center; }
@keyframes hm-monte { from { opacity: 0; transform: translateY(27.5px); } to { opacity: 1; transform: none; } }
.hm-pub--centre { animation: none; }

/* ── 16. Responsive ──────────────────────────────────────────────── */
@media (max-width: 1699px) {
    .hm-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
    .hm-menu a { font-size: 15px; padding: 0 10px; }
    .hm-menu a[aria-current="page"]::after { left: 10px; right: 10px; }
}
@media (max-width: 1199px) {
    .hm-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-produits--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-livrer { display: none; }
}
@media (max-width: 1023px) {
    .hm-scene__grille { grid-template-columns: 1fr; gap: 41.5px; }
    .hm-rayons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-boutiques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-commander { grid-template-columns: 1fr; }
    .hm-vendre { grid-template-columns: 1fr; padding: 46px 37px; }
    .hm-pied__grille { grid-template-columns: 1fr 1fr; }
    .hm-compte__nom { display: none; }
    .hm-fiche { gap: 32px; }
    .hm-vitrine-tete { grid-template-columns: auto minmax(0, 1fr); }
    .hm-panier { grid-template-columns: 1fr; }
    .hm-panier__resume { position: static; }
    .hm-paiement { grid-template-columns: 1fr; }
    .hm-auth { grid-template-columns: 1fr; }
    .hm-auth__cote { display: none; }
    .hm-vitrine-tete__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .hm-avis { grid-template-columns: 1fr; }
    .hm-avis__resume { position: static; }
}
@media (max-width: 899px) {
    .hm-produits, .hm-produits--4, .hm-produits--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-annonce nav, .hm-menu, .hm-annonce--info { display: none; }
}
@media (max-width: 767px) {
    :root { --gouttiere: 12px; }
    body.hm { padding-bottom: calc(80.5px + env(safe-area-inset-bottom)); }
    .hm-annonce .hm-conteneur { min-height: 40px; }
    .hm-flash { top: 14px; }
    .hm-annonce__info { display: none; }

    .hm-entete__ligne { flex-wrap: wrap; height: auto; gap: 0; padding-top: 12px; padding-bottom: 14px; }
    .hm-logo img { height: 52px; }
    .hm-icone { width: 50px; height: 50px; font-size: 23px; }
    .hm-actions { order: 2; }
    .hm-actions .hm-icone--bureau, .hm-compte { display: none; }
    .hm-recherche { order: 3; flex-basis: 100%; max-width: none; margin-top: 10px; }
    .hm-recherche input { height: 54px; padding-left: 50px; padding-right: 64px; font-size: 17px; }
    .hm-recherche > i { left: 18px; font-size: 18px; }
    .hm-recherche button { width: 50px; padding: 0; font-size: 0; }
    .hm-recherche button::before { content: "\f002"; font: 900 19px "Font Awesome 6 Free"; }
    .hm-livrer-mobile {
        order: 4; flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 10px;
        border: 0; background: none; color: rgba(255, 255, 255, .85); padding: 2px 0; font-size: 15.5px; text-align: left;
    }
    .hm-livrer-mobile > i:first-child { color: var(--cuivre); }
    .hm-livrer-mobile strong { color: #fff; font-weight: 600; }
    .hm-livrer-mobile > i:last-child { font-size: 11px; opacity: .7; }

    .hm-scene { padding: 30px 0 73.5px; }
    .hm-scene h1 { font-size: 2.645rem; }
    .hm-scene__sous { font-size: 18.5px; margin: 16px 0 25.5px; }
    .hm-scene__cta .hm-btn { flex: 1 1 100%; min-height: 57.5px; }
    .hm-scene__cta .hm-btn--ligne { display: none; }
    .hm-preuves { margin-top: 23px; gap: 9.2px 18.5px; font-size: 15.5px; }
    .hm-portant { margin: 0 calc(var(--gouttiere) * -1); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gouttiere); }
    .hm-portant::-webkit-scrollbar { display: none; }
    .hm-portant__piste { grid-template-columns: repeat(var(--nb, 4), 163.5px); width: max-content; gap: 20.5px; padding: 16px var(--gouttiere) 37px; }
    .hm-portant__barre { left: 6.9px; right: 6.9px; }
    .hm-cintre { scroll-snap-align: start; }
    .hm-etiquette strong { font-size: 17px; }
    .hm-scene__courbe { height: 64.5px; }
    .hm-courbe { height: 41.5px; }

    .hm-bandeau { padding: 25.5px 0 55px; }
    .hm-bandeau--simple { padding-bottom: 32px; }
    .hm-bandeau p { font-size: 18px; }
    .hm-page { padding: 23px 0 46px; }
    .hm-panneau { padding: 20.5px; border-radius: 20.5px; }

    .hm-bloc { padding: 46px 0; }
    .hm-bloc--serre { padding-top: 4.6px; }
    .hm-tete { margin-bottom: 18.5px; }
    .hm-tete p { display: none; }

    .hm-rayons {
        grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 129px;
        overflow-x: auto; scrollbar-width: none; gap: 11.5px; margin: 0 calc(var(--gouttiere) * -1); padding: 2px var(--gouttiere);
        scroll-padding: 0 var(--gouttiere);
    }
    .hm-rayons::-webkit-scrollbar { display: none; }
    .hm-rayons .hm-rayon { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; row-gap: 3.4px; padding: 16px 9.2px 14px; }
    .hm-rayons .hm-rayon__icone { grid-row: auto; margin-bottom: 5.8px; }
    .hm-rayon__nom { font-size: 15.5px; }
    .hm-rayon__nb { font-size: 14px; }

    .hm-produits, .hm-produits--4, .hm-produits--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9.2px; }
    .hm-carte { border-radius: 16px; }
    .hm-carte__corps { padding: 11.5px 11.5px 12.5px; }
    .hm-carte__nom { font-size: 16px; }
    .hm-prix { font-size: 18.5px; }
    .hm-ajout { width: 43.5px; height: 43.5px; }
    .hm-coeur { width: 39px; height: 39px; }

    .hm-boutiques--defile {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
        overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
        margin: 0 calc(var(--gouttiere) * -1); padding: 2px var(--gouttiere); scroll-padding: 0 var(--gouttiere);
    }
    .hm-boutiques--defile::-webkit-scrollbar { display: none; }
    .hm-boutiques--defile .hm-boutique { scroll-snap-align: start; }
    .hm-boutiques:not(.hm-boutiques--defile) { grid-template-columns: 1fr; }

    .hm-vendre { padding: 37px 25.5px 25.5px; border-radius: 27.5px; gap: 32px; }
    .hm-vendre__actions .hm-btn { flex: 1 1 100%; }
    .hm-escalier { grid-template-columns: 1fr; gap: 9.2px; }
    .hm-escalier li {
        min-height: 0; display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
        padding: 14px 16px; border-top-width: 1px; border-left: 3.4px solid var(--lc); border-radius: 14px;
    }
    .hm-escalier i { grid-row: span 2; margin: 0; }
    .hm-escalier strong { grid-column: 2; }
    .hm-escalier__prix { grid-column: 3; grid-row: 1 / span 2; font-size: 19.5px; text-align: right; }
    .hm-escalier li > span:last-child { grid-column: 2; margin: 0; padding: 0; font-size: 14.5px; }

    .hm-pied { padding-top: 46px; }
    .hm-pied__grille { grid-template-columns: 1fr 1fr; gap: 32px 23px; }
    .hm-pied__marque, .hm-pied__payer { grid-column: 1 / -1; }

    .hm-grille-form, .hm .form__grid, .hm .form__row { grid-template-columns: 1fr; }
    .hm-fiche { grid-template-columns: 1fr; gap: 23px; padding-top: 14px; }
    .hm-galerie { position: static; margin: 0 calc(var(--gouttiere) * -1); gap: 10.5px; }
    .hm-galerie__scene { border-radius: 0; aspect-ratio: 4 / 5; max-height: 74vh; box-shadow: none; }
    .hm-galerie__scene--vide { border-left: 0; border-right: 0; }
    .hm-galerie__segments { top: 12px; left: var(--gouttiere); right: var(--gouttiere); }
    .hm-galerie__outils { right: var(--gouttiere); bottom: 12px; }
    .hm-galerie__vignettes { padding: 3px var(--gouttiere); }
    .hm-galerie__vignette { width: 64px; height: 64px; border-radius: 12.5px; }
    .hm-visionneuse__scene { padding: 0 6px; }
    .hm-visionneuse__fleche { display: none; }
    .hm-fil--clair span[aria-current] { max-width: 22ch; }
    .hm-avis { grid-template-columns: 1fr; gap: 18.5px; }
    .hm-vitrine-tete { grid-template-columns: 1fr; gap: 16px; }
    .hm-auth { border-radius: 25.5px; }
    .hm-auth__form { padding: 27.5px 20.5px; }
    .hm-ligne-panier { grid-template-columns: 96.5px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .hm-ligne-panier__image { width: 96.5px; height: 115px; }
    .hm-ligne-panier__nom { font-size: 17px; }
    .hm-vitrine-tete__logo { width: 87.5px; height: 87.5px; border-radius: 20.5px; }
    .hm-vitrine-tete__actions .hm-btn { flex: 1 1 40%; white-space: normal; }
    .hm-vitrine-tete__actions .hm-btn--ligne { display: none; }
    .hm-avis__resume { position: static; padding: 20.5px; }
    .hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11.5px; }
    .hm-stat { padding: 16px; }
    .hm-stat__valeur { font-size: 24px; }

    .hm-barre {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
        height: calc(76px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface); border-top: 1px solid var(--ligne); box-shadow: 0 -8px 27.5px rgba(5, 26, 71, .08);
    }
    .hm-barre a {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.6px;
        height: 76px; color: var(--muet); font-size: 13px; font-weight: 600;
    }
    .hm-barre i { font-size: 24px; }
    .hm-barre__icone { position: relative; }
    .hm-barre [aria-current="page"] { color: var(--encre); }
    .hm-barre [aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 32px; height: 3.4px; border-radius: 0 0 3.4px 3.4px; background: var(--cuivre); }
    .hm-barre .hm-pastille { top: -8px; right: -12px; border-color: var(--surface); }
    .hm-barre__panier .hm-barre__icone {
        width: 62px; height: 62px; margin-top: -26px; border-radius: 20.5px; display: grid; place-items: center;
        background: var(--cuivre); color: var(--nuit); box-shadow: 0 11.5px 23px -6px rgba(254, 153, 0, .6); border: 4.6px solid var(--surface);
    }
    .hm-barre__panier .hm-pastille { top: -7px; right: -9px; background: var(--nuit); color: #fff; }
    .theme--dark .hm-barre__panier .hm-pastille { background: #fff; color: var(--nuit); }
    .hm-barre__panier[aria-current="page"]::before { display: none; }

    .hm-whatsapp { bottom: calc(96.5px + env(safe-area-inset-bottom)); right: 16px; width: 57.5px; height: 57.5px; font-size: 28.5px; }
    .hm-pub { bottom: calc(168px + env(safe-area-inset-bottom)); width: min(276px, calc(115vw - 37px)); }
    .hm-pub--droite { right: 16px; }
    .hm-pub--gauche { left: 16px; }
    .hm-toasts { left: 18.5px; right: 18.5px; bottom: calc(96.5px + env(safe-area-inset-bottom)); align-items: stretch; }
    .hm-toast, .hm .toast { max-width: none; }
    .hm .toast { left: 18.5px; right: 18.5px; bottom: calc(96.5px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { .hm-livrer-mobile { display: none; } }
@media (max-width: 380px) { .hm-scene h1 { font-size: 2.3rem; } }
@media (prefers-reduced-motion: reduce) {
    .hm *, .hm *::before, .hm *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    .hm-annonce, .hm-entete, .hm-menu, .hm-pied, .hm-barre, .hm-whatsapp, .hm-toasts { display: none !important; }
    body.hm { background: #fff; padding: 0; }
}

/* État d'une commande payée côté client : confirmation par Hinnomarket puis livraison */
.hm-recap__etats { display: flex; flex-direction: column; align-items: flex-end; gap: 6.9px; }
@media (max-width: 767px) { .hm-recap__etats { grid-column: 2 / -1; align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }

/* Téléphone : toute l'interface réduite (demande du 27/09 : « trop zoomé »).
   Les tailles de base ont été agrandies ×1,15 pour l'ordinateur ; ici on les ramène d'un coup. */
@media (max-width: 767px) {
    html { zoom: .82; }
    /* 16 px réels minimum dans les champs : sinon l'iPhone zoome tout seul quand on tape */
    input, select, textarea { font-size: max(19.5px, 1em); }
}