/* =====================================================================
   Jean-Michel — fil, planches, tiroir, zoom : mise en forme « magazine » (04/11/2026).
   Tout est préfixé jm- (classes, identifiants, variables) et vit sous #jm-racine : aucun style du thème ne
   traverse dans un sens ni dans l'autre. Les polices du site (Inter, Red Hat Text) sont auto-hébergées sous des noms propres
   ('JM Inter', 'JM Red Hat') pour ne jamais se mélanger aux @font-face du thème, dans fonts/ (chemins relatifs à ce fichier : valable sur le banc et sous /jm/static/).
   Réactivité du fil : container query sur #jm-fil (≤ 640 px de fil pour les planches, pas de fenêtre), pour que le même CSS
   serve la page pleine et le volet. Les règles de l'en-tête et du zoom restent sur la fenêtre.
   ===================================================================== */
@font-face{font-family:'JM Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1DC0-1DFF, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JM Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JM Red Hat';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/redhat-text-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1DC0-1DFF, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JM Red Hat';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/redhat-text-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JM Red Hat';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/redhat-text-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1DC0-1DFF, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JM Red Hat';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/redhat-text-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- Racine : remise à zéro puis charte ---------- */
#jm-racine{ all:initial; display:block; min-height:100vh;
  --jm-lin:#ece8e0; --jm-papier:#fffdf9; --jm-ardoise:#2a2d31; --jm-ardoise-2:#5d6168; --jm-sapin:#2f5a45; --jm-mousse:#5e8c61; --jm-brique:#a2452e; --jm-trait:#d8d2c6; --jm-ambre:#b07d2a;
  background:var(--jm-lin); color:var(--jm-ardoise); font:400 17px/1.5 'JM Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-wrap:pretty }
@media (max-width:560px){ #jm-racine{ font-size:16px } }
#jm-racine *,#jm-racine *::before,#jm-racine *::after{ box-sizing:border-box }
:where(#jm-racine) a{ color:var(--jm-sapin) } :where(#jm-racine) a:hover{ color:var(--jm-ardoise) }
:where(#jm-racine) button{ font-family:inherit }
:where(#jm-racine) :focus-visible{ outline:2px solid var(--jm-sapin); outline-offset:3px }
:where(#jm-racine) img{ max-width:100% }
body.jm-gele{ overflow:hidden }

/* ---------- En-tête ---------- */
.jm-entete{ position:sticky; top:0; z-index:5; background:var(--jm-lin); border-bottom:1px solid var(--jm-trait) }
.jm-entete-ligne{ max-width:760px; margin:0 auto; padding:14px 22px 12px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap }
.jm-entete h1{ margin:0; font:500 20px/1.2 'JM Red Hat',sans-serif; letter-spacing:-.01em }
.jm-entete .jm-role{ font-size:12.5px; color:var(--jm-ardoise-2) }
.jm-etat{ font-size:12.5px; color:var(--jm-ardoise-2); display:inline-flex; align-items:center; gap:6px }
.jm-etat::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--jm-mousse) }
.jm-etat.jm-hors::before{ background:var(--jm-brique) }
.jm-etat.jm-vide::before{ display:none }
.jm-entete-actions{ margin-left:auto; display:flex; gap:18px; align-items:center }
.jm-lien-bouton{ background:none; border:0; padding:0 0 1px; font-size:13px; color:var(--jm-sapin); border-bottom:1px solid currentColor; cursor:pointer; white-space:nowrap }
.jm-lien-bouton:hover{ color:var(--jm-ardoise) }
select.jm-lien-bouton{ font-family:inherit; max-width:260px; text-overflow:ellipsis; overflow:hidden; border-radius:0 }
select.jm-lien-bouton[hidden]{ display:none }
.jm-dev-switch{ font-size:12px; color:var(--jm-ardoise-2); display:inline-flex; gap:5px; align-items:center; cursor:pointer }
.jm-dev-switch input{ accent-color:var(--jm-sapin); margin:0 }

/* ---------- Tiroir de sélection (sous l'en-tête, collant) ---------- */
.jm-selection{ max-width:760px; margin:0 auto; padding:0 22px }
.jm-selection:not(.jm-pleine){ display:none }
.jm-selection-barre{ display:flex; align-items:center; gap:14px; padding:8px 0 9px; border-top:1px solid var(--jm-trait) }
.jm-selection-ouvrir{ background:none; border:0; padding:0; font:500 13px/1.4 'JM Inter',sans-serif; color:var(--jm-ardoise); cursor:pointer; display:inline-flex; gap:8px; align-items:center; white-space:nowrap }
.jm-selection-ouvrir svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.4 }
.jm-selection-ouvrir .jm-chevron{ transition:transform .2s } .jm-selection.jm-ouverte .jm-chevron{ transform:rotate(180deg) }
.jm-selection-total{ font-size:13px; color:var(--jm-ardoise-2); font-variant-numeric:tabular-nums }
.jm-selection-liste{ display:grid; gap:10px; padding:4px 0 14px; max-height:40vh; overflow:auto }
.jm-selection:not(.jm-ouverte) .jm-selection-liste{ display:none }
.jm-selection-piece{ display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:12px; align-items:center; font-size:13px }
.jm-selection-piece img,.jm-selection-piece .jm-mini-mono{ width:44px; height:44px; object-fit:contain; background:#fff; border:1px solid var(--jm-trait) }
.jm-selection-piece .jm-mini-mono{ display:grid; place-content:center; font:italic 22px 'JM Red Hat',serif; color:var(--jm-trait); background:var(--jm-papier) }
.jm-selection-piece .jm-nom{ font:italic 500 15px/1.3 'JM Red Hat',sans-serif; color:inherit; text-decoration:none; display:block }
.jm-selection-piece .jm-var{ color:var(--jm-ardoise-2); font-size:12.5px }
.jm-selection-piece .jm-prix{ margin:0; white-space:nowrap }
.jm-retirer{ background:none; border:0; width:28px; height:28px; color:var(--jm-ardoise-2); cursor:pointer; font-size:18px; line-height:1 } .jm-retirer:hover{ color:var(--jm-brique) }

/* ---------- Fil ---------- */
#jm-centre{ display:flex; align-items:flex-start }
#jm-fil{ container:jm-fil / inline-size; flex:1; min-width:0; padding:22px 22px 45vh }
.jm-tour{ max-width:760px; margin:0 auto; display:flex; flex-direction:column }
.jm-tour.jm-visiteur{ align-items:flex-end; margin:36px auto }
.jm-ligne-client{ display:flex; gap:10px; align-items:stretch; justify-content:flex-end; max-width:100%; width:100% }
.jm-client{ max-width:80%; margin-left:auto; background:var(--jm-ardoise); color:var(--jm-papier); padding:12px 18px; border-radius:18px 18px 4px 18px; white-space:pre-wrap }
@container jm-fil (max-width:560px){ .jm-client{ max-width:88% } }
.jm-bot{ max-width:760px }
.jm-meta{ margin:14px 0 0; font-size:12px; color:var(--jm-ardoise-2) }
.jm-appels{ margin:4px 0 0; font-size:12px; color:var(--jm-ardoise-2) }
.jm-appels span{ border-bottom:1px dotted currentColor; cursor:help }

/* Mode développeur : jauge, sous-mentions et panneau (le serveur n'envoie rien de tout cela en prod) */
.jm-jauge,.jm-sous-meta,#jm-garde{ display:none }
.jm-dev .jm-jauge{ display:flex; width:6px; background:var(--jm-trait); align-items:flex-end; flex:none }
.jm-dev .jm-jauge i{ display:block; width:100%; background:var(--jm-mousse) }
.jm-dev .jm-jauge i.jm-moyen{ background:var(--jm-ambre) } .jm-dev .jm-jauge i.jm-haut{ background:var(--jm-brique) }
.jm-dev .jm-sous-meta{ display:block; margin:6px 0 0; font-size:12px; color:var(--jm-ardoise-2); font-variant-numeric:tabular-nums; text-align:right }
.jm-dev .jm-sous-meta .jm-r{ color:var(--jm-brique); font-weight:500 }
/* --jm-entete-h : hauteur réelle de l'en-tête, mesurée par jm.js (elle varie avec la sélection ouverte, le retour à la ligne) : la colonne reste toujours dessous. */
.jm-dev #jm-garde{ display:block; position:sticky; top:var(--jm-entete-h,62px); width:230px; padding:18px; border-left:1px solid var(--jm-trait); font-size:12.5px; color:var(--jm-ardoise-2); max-height:calc(100vh - var(--jm-entete-h,62px)); overflow:auto }
#jm-garde h2{ margin:0 0 10px; font:500 14px 'JM Red Hat',sans-serif; color:var(--jm-ardoise) }
#jm-garde dl{ margin:0; display:grid; grid-template-columns:1fr auto; gap:4px 10px } #jm-garde dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--jm-ardoise) }
#jm-garde .jm-total{ font:500 32px/1.1 'JM Red Hat',sans-serif; color:var(--jm-sapin); margin:2px 0 2px }
#jm-garde .jm-total.jm-moyen{ color:var(--jm-ambre) } #jm-garde .jm-total.jm-haut{ color:var(--jm-brique) }
#jm-garde .jm-sous{ font-size:12px; margin-bottom:10px }
#jm-garde .jm-barre{ grid-column:1 / -1; height:3px; background:var(--jm-lin); overflow:hidden; margin-bottom:4px }
#jm-garde .jm-barre i{ display:block; height:100%; background:var(--jm-mousse) }
#jm-garde .jm-barre i.jm-moyen{ background:var(--jm-ambre) } #jm-garde .jm-barre i.jm-haut{ background:var(--jm-brique) }
#jm-garde .jm-dernier{ margin-top:14px; padding-top:10px; border-top:1px solid var(--jm-trait) }
#jm-garde .jm-fermee{ color:var(--jm-brique); margin:8px 0 0 }
#jm-garde .jm-vide{ font-style:italic }
#jm-graphe{ margin:6px 0 2px; display:block; width:100%; height:auto }
#jm-graphe .jm-ligne{ fill:none; stroke:var(--jm-sapin); stroke-width:2; stroke-linejoin:round }
#jm-graphe .jm-seuil{ stroke:var(--jm-ardoise-2); stroke-width:1; stroke-dasharray:3 3; opacity:.6 }
#jm-graphe .jm-pt{ fill:var(--jm-sapin); stroke:var(--jm-papier); stroke-width:2 } #jm-graphe .jm-pt.jm-rec{ fill:var(--jm-brique) }
#jm-graphe text{ font:10px 'JM Inter',sans-serif; fill:var(--jm-ardoise-2) }
#jm-graphe-legende{ font-size:11px; color:var(--jm-ardoise-2); margin-bottom:10px }
#jm-graphe-legende i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--jm-brique); margin-right:4px; vertical-align:middle }
#jm-debloquer{ display:block; margin:12px 0 0; font:500 13px 'JM Inter',sans-serif; background:var(--jm-brique); color:#fff; border:0; padding:7px 12px; cursor:pointer }
#jm-debloquer[hidden]{ display:none }
#jm-copier-id{ display:block; width:100%; margin:0 0 10px; font:12px 'JM Inter',sans-serif; font-variant-numeric:tabular-nums; text-align:left; background:none; color:var(--jm-ardoise-2); border:1px dashed var(--jm-trait); padding:4px 8px; cursor:pointer; overflow-wrap:anywhere }
#jm-copier-id:hover{ color:var(--jm-sapin); border-color:var(--jm-sapin) } #jm-copier-id:disabled{ cursor:default; font-style:italic; color:var(--jm-ardoise-2); border-color:var(--jm-trait) }
#jm-copier-id[data-copie]{ color:var(--jm-sapin); border-style:solid; border-color:var(--jm-sapin) }
#jm-remise{ display:block; width:100%; margin:0 0 12px; font:500 13px 'JM Inter',sans-serif; background:none; color:var(--jm-sapin); border:1px solid var(--jm-sapin); padding:6px 10px; cursor:pointer }
.jm-revenir{ margin:4px 0 0; background:none; border:0; padding:0; font:12px 'JM Inter',sans-serif; color:var(--jm-ardoise-2); cursor:pointer; opacity:.5 }
.jm-revenir:hover,.jm-revenir:focus-visible{ opacity:1; text-decoration:underline }

/* ---------- Prose de la réponse (une seule taille de corps) ---------- */
.jm-accroche,.jm-prose,.jm-chute{ margin:0; font:400 21px/1.4 'JM Red Hat',sans-serif; white-space:pre-wrap; max-width:36em }
.jm-erreur{ margin:0; max-width:64ch; white-space:pre-wrap }
.jm-accroche + .jm-planche{ margin-top:28px }
.jm-accroche + .jm-prose,.jm-prose + .jm-prose{ margin-top:14px }
.jm-prose + .jm-planche{ margin-top:24px }
.jm-planche + .jm-planche{ margin-top:44px }
.jm-planche + .jm-chute,.jm-planche + .jm-prose{ margin-top:32px }
.jm-chute + .jm-chute{ margin-top:12px }

/* ---------- Planche ---------- */
.jm-planche{ display:grid; grid-template-columns:220px minmax(0,1fr); column-gap:36px; align-items:start }
.jm-planche.jm-maitresse{ grid-template-columns:min(420px,50%) minmax(0,1fr) }
.jm-planche.jm-droite{ grid-template-columns:minmax(0,1fr) 220px }
.jm-planche.jm-maitresse.jm-droite{ grid-template-columns:minmax(0,1fr) min(420px,50%) }
.jm-planche.jm-droite .jm-visuel{ order:2 }
.jm-planche[data-equilibre="court"]{ align-items:center }
.jm-planche[data-equilibre="long"]{ align-items:start }
@container jm-fil (max-width:640px){ .jm-planche[data-equilibre]{ align-items:start } }
.jm-visuel{ margin:0; min-width:0 }

/* Cartouche blanc : la photo PrestaShop (carrée, fond blanc) est montrée entière, jamais rognée */
.jm-photo{ display:block; aspect-ratio:1; background:#fff; border:1px solid var(--jm-trait); cursor:zoom-in; overflow:hidden }
.jm-photo img{ display:block; width:100%; height:100%; object-fit:contain }
.jm-photo:hover{ border-color:var(--jm-ardoise-2) }
.jm-legende-visuel{ margin:6px 0 0; font-size:12px; color:var(--jm-ardoise-2) }

/* Pièce sans photo : monogramme + catégorie, même emprise qu'une photo */
.jm-monogramme{ aspect-ratio:1; border:1px solid var(--jm-trait); background:var(--jm-papier); display:grid; place-content:center; text-align:center; padding:16px }
.jm-monogramme .jm-lettre{ font:italic 400 96px/1 'JM Red Hat',serif; color:var(--jm-trait) }
.jm-monogramme .jm-categorie{ display:block; margin-top:14px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--jm-ardoise-2) }

.jm-texte{ min-width:0 }
.jm-prose-piece{ margin:0; max-width:58ch; white-space:pre-wrap }

/* Légende de la pièce : filet, titre, prix en légende, disponibilité */
.jm-fiche{ margin-top:16px; padding-top:12px; border-top:1px solid var(--jm-trait) }
.jm-titre{ margin:0; font:italic 500 19px/1.3 'JM Red Hat',sans-serif; text-wrap:balance }
.jm-titre a{ color:inherit; text-decoration:none } .jm-titre a:hover{ text-decoration:underline; text-decoration-color:var(--jm-trait); text-underline-offset:4px }
.jm-prix{ margin:4px 0 0; font-size:13px; color:var(--jm-ardoise) }
.jm-prix .jm-montant{ font-variant-numeric:tabular-nums }
.jm-prix .jm-ttc{ font-size:12px; letter-spacing:.06em; margin-left:3px }
.jm-prix .jm-eco,.jm-prix .jm-supplement{ color:var(--jm-ardoise-2); white-space:pre }
.jm-dispo{ margin:0; font-size:13px; color:var(--jm-ardoise-2); display:inline }
.jm-dispo::before{ content:' · '; white-space:pre }
.jm-dispo .jm-pastille{ margin-right:6px; vertical-align:middle; position:relative; top:-1px }
/* Délais par déclinaison (comme le tableau lcm_tablecombz) : bouton souligné, tableau sous la ligne de prix, au survol ou au toucher */
.jm-prix{ position:relative }
button.jm-dispo{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
button.jm-dispo span:last-child,a.jm-dispo span:last-child{ text-decoration:underline dotted; text-underline-offset:3px }
a.jm-dispo{ color:inherit }
.jm-delais{ display:none; position:absolute; z-index:4; left:0; right:0; top:100%; padding:6px 10px; background:var(--jm-papier); border:1px solid var(--jm-trait); box-shadow:0 8px 24px rgba(0,0,0,.12); font-size:12.5px; color:var(--jm-ardoise); white-space:normal }
@media (hover:hover){ .jm-dispo-zone:hover .jm-delais{ display:block } }
.jm-dispo[aria-expanded="true"] + .jm-delais{ display:block }
.jm-delais table{ width:100%; border-collapse:collapse }
.jm-delais td{ padding:5px 8px 5px 0; vertical-align:top; border-top:1px solid var(--jm-trait) }
.jm-delais tr:first-child td{ border-top:0 }
.jm-delais td:last-child{ padding-right:0 }
.jm-delais-prix{ white-space:nowrap; font-variant-numeric:tabular-nums }
.jm-delais .jm-pastille{ margin-right:6px; vertical-align:middle; position:relative; top:-1px }
.jm-delais small{ display:block; color:var(--jm-ardoise-2); font-size:11.5px }
.jm-pastille{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--jm-mousse) }
.jm-pastille.jm-commande{ background:var(--jm-ambre) }
.jm-pastille.jm-non{ background:var(--jm-brique) }
.jm-pastille.jm-inconnu{ background:transparent; box-shadow:inset 0 0 0 1px var(--jm-ardoise-2) }

/* Nuancier */
.jm-nuancier{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0 }
.jm-decli{ position:relative; width:36px; height:36px; padding:0; border:1px solid var(--jm-trait); background:#fff; cursor:pointer; display:block }
.jm-decli img{ display:block; width:100%; height:100%; object-fit:contain }
.jm-decli:hover{ border-color:var(--jm-ardoise-2) }
.jm-decli[aria-pressed="true"]{ border-color:var(--jm-sapin); box-shadow:0 0 0 1px var(--jm-sapin) }
.jm-decli .jm-pastille{ position:absolute; right:-3px; bottom:-3px; width:8px; height:8px; box-shadow:0 0 0 1.5px #fff }
.jm-decli.jm-epuise img{ opacity:.35 }
.jm-decli.jm-epuise::after{ content:''; position:absolute; left:50%; top:50%; width:42px; height:1px; background:var(--jm-brique); transform:translate(-50%,-50%) rotate(-45deg) }
.jm-decli[hidden]{ display:none }
.jm-decli-plus{ height:36px; min-width:36px; padding:0 8px; border:1px dashed var(--jm-trait); background:none; font-size:12px; color:var(--jm-ardoise-2); cursor:pointer }
.jm-decli-plus:hover{ border-color:var(--jm-ardoise-2); color:var(--jm-ardoise) }
.jm-coloris{ margin:8px 0 0; font-size:12.5px; color:var(--jm-ardoise-2); max-width:58ch }
.jm-nom-coloris{ background:none; border:0; padding:0; font:inherit; color:var(--jm-sapin); text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer }
.jm-nom-coloris:hover{ color:var(--jm-ardoise) }

/* Gestes : mettre de côté, panier (cosmétiques, aucun appel) */
.jm-gestes{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 0; align-items:center }
.jm-geste{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; font-size:13px; color:var(--jm-sapin); cursor:pointer; white-space:nowrap }
.jm-geste svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round }
.jm-geste:hover{ text-decoration:underline; text-underline-offset:3px }
.jm-geste[data-fait="true"]{ font-weight:500 }
.jm-geste[data-fait="true"] svg{ stroke-width:1.6 }
.jm-panier-geste{ display:inline-flex; gap:10px; align-items:center }
.jm-ajouter[disabled]{ opacity:.6; cursor:progress }
.jm-panier-erreur{ margin:8px 0 0; font-size:13px; color:#9a3a22 }
.jm-panier-erreur[hidden]{ display:none }
.jm-quantite{ display:inline-flex; align-items:center; border:1px solid var(--jm-trait); height:26px }
.jm-quantite button{ width:26px; height:24px; background:none; border:0; color:var(--jm-ardoise-2); cursor:pointer; font-size:15px; line-height:1 }
.jm-quantite button:hover{ color:var(--jm-ardoise) }
.jm-quantite output{ min-width:22px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums }

/* ---------- Carte contact ---------- */
.jm-contact{ margin:24px 0 0; padding:18px 0; border-top:1px solid var(--jm-trait); border-bottom:1px solid var(--jm-trait); display:grid; grid-template-columns:max-content max-content; gap:6px 16px; align-items:start; max-width:58ch }
.jm-contact .jm-tel{ grid-row:1; display:inline-flex; justify-content:center; align-items:center; gap:10px; min-width:220px; padding:11px 18px; white-space:nowrap; background:var(--jm-ardoise); color:var(--jm-papier); font:500 20px/1.1 'JM Red Hat',sans-serif; text-decoration:none; letter-spacing:.01em }
.jm-contact .jm-tel svg,.jm-contact .jm-ecrire svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.jm-contact .jm-tel:hover{ background:#000; color:var(--jm-papier) }
.jm-contact .jm-note{ margin:0; font-size:13px; color:var(--jm-ardoise-2); grid-row:2 }
.jm-contact .jm-note a{ color:var(--jm-sapin) }
.jm-contact .jm-ecrire{ grid-row:1; grid-column:2; display:inline-flex; justify-content:center; align-items:center; gap:10px; min-width:220px; padding:11px 18px; white-space:nowrap; background:none; border:1px solid var(--jm-ardoise); color:var(--jm-ardoise); font:500 20px/1.1 'JM Red Hat',sans-serif; cursor:pointer }
.jm-contact .jm-ecrire:hover{ background:var(--jm-ardoise); color:var(--jm-papier) }

/* ---------- Attente / erreur ---------- */
.jm-attente{ margin:0; min-height:1.5em; font:italic 400 17px/1.5 'JM Red Hat',sans-serif; color:var(--jm-ardoise-2); text-align:right }
@container jm-fil (max-width:560px){ .jm-attente{ font-size:16px } }
.jm-attente .jm-phrase{ transition:opacity .4s } .jm-attente .jm-phrase.jm-fondu{ opacity:0 }
.jm-attente .jm-points i{ display:inline-block; font-style:normal; animation:jm-saut 1.2s infinite }
.jm-attente .jm-points i:nth-child(2){ animation-delay:.15s } .jm-attente .jm-points i:nth-child(3){ animation-delay:.3s }
@keyframes jm-saut{ 0%,60%,100%{ transform:translateY(0) } 30%{ transform:translateY(-3px) } }
@media (prefers-reduced-motion:reduce){ .jm-attente .jm-points i{ animation:none } .jm-attente .jm-phrase,.jm-selection-ouvrir .jm-chevron{ transition:none } }
.jm-erreur{ color:var(--jm-brique) }
.jm-erreur .jm-geste{ margin-left:10px; color:var(--jm-sapin) }

/* ---------- Saisie ---------- */
.jm-saisie{ position:fixed; left:0; right:0; bottom:0; z-index:4; padding:24px 22px 18px; background:linear-gradient(to bottom,transparent,var(--jm-lin) 36%) }
.jm-saisie form{ max-width:760px; margin:0 auto; display:flex; align-items:flex-end; gap:10px; background:var(--jm-papier); border:1px solid var(--jm-trait); padding:10px 10px 10px 16px }
.jm-saisie textarea{ flex:1; border:0; background:none; resize:none; font:inherit; color:inherit; padding:6px 0; min-height:36px; max-height:40vh; outline:none; overflow:hidden }
.jm-saisie textarea::placeholder{ color:var(--jm-ardoise-2) }
.jm-envoyer{ background:var(--jm-ardoise); color:var(--jm-papier); border:0; padding:9px 16px; font-size:13px; font-weight:500; cursor:pointer } .jm-envoyer:hover{ background:#000 }
.jm-envoyer:disabled{ opacity:.5; cursor:wait }
.jm-saisie .jm-indice{ max-width:760px; margin:6px auto 0; font-size:12px; color:var(--jm-ardoise-2); text-align:right }

/* ---------- Zoom plein écran ---------- */
.jm-zoom{ position:fixed; inset:0; z-index:20; background:rgba(42,45,49,.97); color:var(--jm-papier); display:grid; grid-template-rows:minmax(0,1fr) auto }
.jm-zoom:not(.jm-ouvert){ display:none }
.jm-zoom-scene{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:36px; align-items:center; padding:64px 80px 20px; min-height:0 }
.jm-zoom-cadre{ background:#fff; aspect-ratio:1; width:min(100%,calc(100vh - 200px)); justify-self:center; align-self:center; touch-action:pan-y }
.jm-zoom-cadre img{ display:block; width:100%; height:100%; object-fit:contain }
.jm-zoom-legende h3{ margin:0; font:italic 500 22px/1.3 'JM Red Hat',sans-serif }
.jm-zoom-legende p{ margin:8px 0 0; font-size:13px; color:var(--jm-trait) }
.jm-zoom-legende .jm-zoom-prix{ color:var(--jm-papier) }
.jm-zoom-legende .jm-zoom-actions{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px; align-items:center }
.jm-zoom-legende a,.jm-zoom-legende .jm-geste{ color:var(--jm-papier); font-size:13px }
.jm-zoom-bouton{ position:absolute; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,253,249,.35); background:none; color:var(--jm-papier); font-size:22px; line-height:1; cursor:pointer }
.jm-zoom-bouton:hover{ background:rgba(255,253,249,.12) }
.jm-zoom-fermer{ top:14px; right:16px } .jm-zoom-prec{ left:16px; top:50% } .jm-zoom-suiv{ right:16px; top:50% }
.jm-zoom-compteur{ position:absolute; top:24px; left:24px; font-size:12.5px; color:var(--jm-trait); font-variant-numeric:tabular-nums }
.jm-zoom-vignettes{ display:flex; gap:8px; justify-content:center; padding:0 80px 20px; overflow-x:auto }
.jm-zoom-vignettes button{ flex:none; width:56px; height:56px; padding:0; border:1px solid transparent; background:#fff; opacity:.55; cursor:pointer }
.jm-zoom-vignettes button img{ display:block; width:100%; height:100%; object-fit:contain }
.jm-zoom-vignettes button[aria-current="true"]{ opacity:1; border-color:var(--jm-papier) }
@media (max-width:760px){
  .jm-zoom-scene{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:16px; padding:60px 16px 10px; align-content:center }
  .jm-zoom-cadre{ width:min(100%,calc(100vh - 260px)) }
  .jm-zoom-prec,.jm-zoom-suiv{ display:none }
  .jm-zoom-vignettes{ padding:0 16px 18px }
  .jm-zoom-vignettes button{ width:8px; height:8px; border-radius:50%; background:rgba(255,253,249,.4); border:0; opacity:1 }
  .jm-zoom-vignettes button img{ display:none }
  .jm-zoom-vignettes button[aria-current="true"]{ background:var(--jm-papier) }
}

/* ---------- Modale du formulaire ---------- */
.jm-modale{ position:fixed; inset:0; z-index:30; background:rgba(42,45,49,.6); display:grid; place-items:center; padding:20px }
.jm-modale:not(.jm-ouvert){ display:none }
.jm-modale-panneau{ background:var(--jm-papier); width:min(640px,100%); padding:28px; position:relative; border:1px solid var(--jm-trait) }
.jm-modale-panneau h2{ margin:0 0 6px; font:500 22px/1.2 'JM Red Hat',sans-serif }
.jm-modale-panneau p{ margin:0 0 16px; font-size:13px; color:var(--jm-ardoise-2) }
.jm-modale-panneau iframe{ display:block; width:100%; height:min(70vh,560px); border:1px solid var(--jm-trait); background:#fff }
.jm-confirmation .jm-modale-panneau{ width:min(420px,100%) }
.jm-confirmation-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px 22px }
.jm-modale-fermer{ position:absolute; top:10px; right:12px; background:none; border:0; font-size:22px; color:var(--jm-ardoise-2); cursor:pointer }

/* ---------- Fil étroit : planches en bloc (container query sur le fil, ≤ 640 px, même seuil que SEUIL_BLOC de jm.js) ---------- */
@container jm-fil (max-width:640px){
  .jm-planche,.jm-planche.jm-maitresse,.jm-planche.jm-droite,.jm-planche.jm-maitresse.jm-droite{ grid-template-columns:1fr; row-gap:14px }
  .jm-planche.jm-droite .jm-visuel{ order:0 }
  .jm-planche .jm-visuel{ width:100%; max-width:464px; justify-self:center }   /* toutes les photos traitées pareil, quelle que soit leur place dans la réponse */
  .jm-planche.jm-sans-photo .jm-visuel{ max-width:220px }
  .jm-nuancier{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin }
  .jm-decli,.jm-decli-plus{ flex:none }
  .jm-contact{ grid-template-columns:1fr; gap:6px }
  .jm-contact .jm-tel,.jm-contact .jm-ecrire,.jm-contact .jm-note{ grid-row:auto; grid-column:1 } .jm-contact .jm-tel+.jm-note{ margin-bottom:10px }
}
/* En-tête et tiroir : sur la fenêtre */
@media (max-width:560px){
  .jm-entete-ligne{ gap:8px 12px }
  .jm-entete .jm-role{ display:none }
  .jm-selection-piece{ grid-template-columns:44px minmax(0,1fr) auto }
  .jm-selection-piece .jm-prix{ grid-column:2 }
}

/* =====================================================================
   Volet de la boutique (mode « boutique ») — d'après docs/design/volet/jm.css, mobile first.
   Le volet est superposé (position:fixed), jamais inséré dans le flux de la page. Les règles ci-dessus (fil,
   planches, zoom, sélection) servent telles quelles ; ici : coque, accès, menu, contexte, saisie du volet.
   ===================================================================== */
#jm-racine[hidden]{ display:none }
#jm-racine.jm-boutique{ min-height:0; background:none; font-size:16px }
@media (min-width:561px){ #jm-racine.jm-boutique{ font-size:17px } }
.jm-boutique .jm-zoom{ z-index:1100 } .jm-boutique .jm-modale{ z-index:1110 }

/* ---------- Accès : bulle (bureau) et badge ----------
   Mobile : l'icône d'en-tête (.jm-acces, posée par le module dans le hook d'en-tête) est la porte d'entrée ;
   pas de bulle flottante. Bureau : la même icône, plus la bulle en bas à droite. */
.jm-acces{ position:relative }
.jm-bulle{ display:none; position:fixed; right:24px; bottom:24px; z-index:1030; align-items:center; gap:9px; min-height:52px; padding:0 20px 0 16px; border:0; border-radius:999px; white-space:nowrap;
  background:var(--jm-ardoise); color:var(--jm-papier); font:500 15px/1 'JM Red Hat',sans-serif; letter-spacing:.005em; cursor:pointer; box-shadow:0 6px 24px rgba(42,45,49,.28) }
@media (min-width:761px){ .jm-bulle{ display:inline-flex } }
/* Invitation sur une recherche non simple (mobile seulement, posée par jm.js) */
.jm-invite{ position:fixed; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:1030; display:flex; align-items:flex-start; gap:4px; padding:12px 6px 12px 16px; border-radius:16px;
  background:var(--jm-ardoise); color:var(--jm-papier); font:400 15px/1.4 'JM Red Hat',sans-serif; box-shadow:0 6px 24px rgba(42,45,49,.28) }
.jm-invite button{ border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:0 }
.jm-invite-texte{ flex:1; white-space:pre-line }
.jm-invite-fermer{ font-size:22px !important; line-height:1 !important; padding:0 8px !important }
.jm-bulle:hover{ background:#000; transform:translateY(-1px) }
.jm-bulle .jm-etoile{ position:relative; width:22px; height:22px; display:inline-block; color:var(--jm-papier) }
.jm-bulle .jm-etoile svg{ position:absolute; inset:0; width:100%; height:100%; fill:currentColor; overflow:visible }
.jm-bulle .jm-etoile svg path{ transform-origin:center; transform-box:fill-box; animation:jm-scintille 3.6s ease-in-out infinite }
.jm-bulle .jm-etoile svg path:nth-child(2){ animation-delay:-1.2s } .jm-bulle .jm-etoile svg path:nth-child(3){ animation-delay:-2.4s }
@keyframes jm-scintille{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.7) } }
@media (prefers-reduced-motion:reduce){ .jm-bulle .jm-etoile svg path{ animation:none } .jm-boutique .jm-volet #jm-fil{ scroll-behavior:auto } }
.jm-bulle .jm-libelle-court{ display:none }
/* Badge « réponse arrivée » : sur la bulle (dans la racine) et sur l'icône d'en-tête (dans la page) — couleurs en dur,
   car l'icône est hors de #jm-racine et ne voit pas ses variables */
.jm-badge{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#2f5a45; color:#fffdf9;
  font:500 11px/18px 'JM Inter',system-ui,sans-serif; text-align:center; box-shadow:0 0 0 2px #fffdf9 }
.jm-acces .jm-badge{ top:2px; right:0 }
.jm-badge:empty,.jm-badge[data-vide="oui"]{ display:none }
#jm-racine.jm-ouvert .jm-bulle{ display:none }
/* Tablette, volet fermé : la poignée noire du mobile, au milieu du bord droit, rappelle le volet. Pas sur le bureau tant que la bulle
   en bas à droite y est (Rémi, 06/11) : à étendre (min-width:761px seul) le jour où la bulle disparaît. */
.jm-rappel-cote{ display:none }
@media (min-width:761px) and (max-width:1199.98px){
  .jm-rappel-cote{ display:grid; place-content:center; position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:1030; width:24px; height:64px; padding:0; border:0;
    border-radius:10px 0 0 10px; background:var(--jm-ardoise); color:var(--jm-papier); cursor:pointer; box-shadow:-6px 0 18px rgba(42,45,49,.12) }
  .jm-rappel-cote::before,.jm-rappel-cote::after{ content:''; position:absolute; right:0; width:10px; height:10px; pointer-events:none }
  .jm-rappel-cote::before{ bottom:100%; background:radial-gradient(circle at 0 0, transparent 9.5px, var(--jm-ardoise) 10px) }
  .jm-rappel-cote::after{ top:100%; background:radial-gradient(circle at 0 100%, transparent 9.5px, var(--jm-ardoise) 10px) }
  .jm-rappel-cote svg{ width:18px; height:18px; fill:currentColor; overflow:visible }
  #jm-racine.jm-ouvert .jm-rappel-cote{ display:none }
}

/* ---------- Volet ----------
   Mobile : plein écran, la page reste derrière et son défilement est gelé (body.jm-gele, posé par jm.js).
   Bureau : colonne à droite, largeur --jm-colonne (posée par jm.js, 460 px par défaut (420 coupait « décorateur-conseil » dans l'accueil), 820 px en mode large) ; la page se décale d'autant (html.jm-colonne). */
.jm-volet{ position:fixed; inset:0; z-index:1031; display:flex; flex-direction:column; background:var(--jm-lin); height:100dvh }
#jm-racine:not(.jm-ouvert) .jm-volet{ display:none }
@media (min-width:761px){ .jm-volet{ left:auto; width:var(--jm-colonne,460px); height:auto; padding-left:12px } }

/* En-tête du volet */
.jm-volet .jm-entete{ position:static; flex:none; padding:10px 10px 10px 16px; padding-top:max(10px, env(safe-area-inset-top)); border-bottom:1px solid var(--jm-trait); background:var(--jm-lin) }
.jm-volet .jm-entete-ligne{ max-width:none; margin:0; padding:0; display:flex; align-items:center; flex-wrap:nowrap; gap:8px }
.jm-volet .jm-entete h2{ margin:0; font:500 18px/1.2 'JM Red Hat',sans-serif; letter-spacing:-.01em; white-space:nowrap }
.jm-volet .jm-entete .jm-role{ display:block; font-size:12px; color:var(--jm-ardoise-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.jm-volet .jm-entete-actions{ margin-left:auto; gap:2px; flex:none }
.jm-icone{ width:44px; height:44px; display:inline-grid; place-content:center; padding:0; background:none; border:0; border-radius:50%; color:var(--jm-ardoise-2); cursor:pointer }
.jm-icone:hover{ background:var(--jm-trait); color:var(--jm-ardoise) }
.jm-icone svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.jm-icone.jm-large-btn{ display:none }
@media (min-width:1200px){ .jm-icone.jm-large-btn{ display:inline-grid } }
@media (min-width:761px){ .jm-volet .jm-entete{ padding:12px 12px 10px 18px } .jm-icone{ width:36px; height:36px } }
.jm-mention{ margin:4px 0 0; font-size:12px; color:var(--jm-ardoise-2) }
.jm-mention a{ color:var(--jm-ardoise-2); text-decoration:underline; text-underline-offset:2px } .jm-mention a:hover{ color:var(--jm-ardoise) }

/* Menu des 10 dernières conversations : feuille basse sur mobile, déroulant sur bureau */
.jm-menu{ position:static }
.jm-liste-conv{ position:fixed; left:0; right:0; bottom:0; z-index:3; max-height:70dvh; overflow:auto; background:var(--jm-papier); border-top:1px solid var(--jm-trait); box-shadow:0 -12px 32px rgba(42,45,49,.14); padding:8px 0 max(8px, env(safe-area-inset-bottom)); margin:0; list-style:none }
.jm-menu:not(.jm-ouvert) .jm-liste-conv{ display:none }
.jm-liste-conv li{ display:block; margin:0; padding:0 }
.jm-liste-conv button{ width:100%; min-height:48px; text-align:left; background:none; border:0; padding:10px 18px; cursor:pointer; display:grid; gap:2px; font-size:14px; color:var(--jm-ardoise) }
.jm-liste-conv button:hover{ background:var(--jm-lin) }
.jm-liste-conv button[aria-current="true"]{ box-shadow:inset 3px 0 0 var(--jm-sapin) }
.jm-liste-conv .jm-date{ font-size:12px; color:var(--jm-ardoise-2) }
.jm-liste-conv .jm-extrait{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.jm-liste-conv .jm-nouvelle{ color:var(--jm-sapin); font-weight:500; border-top:1px solid var(--jm-trait); margin-top:4px; padding-top:12px }
@media (min-width:761px){
  .jm-menu{ position:relative }
  .jm-liste-conv{ position:absolute; left:auto; right:0; top:40px; bottom:auto; width:300px; max-height:none; border:1px solid var(--jm-trait); box-shadow:0 12px 32px rgba(42,45,49,.14); padding:6px 0 }
  .jm-liste-conv button{ min-height:0; padding:8px 14px; font-size:13px }
}

/* Sélection : la bande vit sous l'en-tête, même composant que le banc */
.jm-volet .jm-selection{ padding:0 16px; max-width:none; margin:0; background:var(--jm-lin); flex:none }

/* Fil : seul élément qui défile dans le volet (pas la page) */
.jm-volet #jm-fil{ flex:1 1 auto; min-height:0; max-width:none; margin:0; overflow-y:auto; overflow-x:hidden; padding:16px 16px 24px; scroll-behavior:smooth; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.jm-volet .jm-tour{ max-width:none }
.jm-volet .jm-accroche,.jm-volet .jm-prose,.jm-volet .jm-chute{ font-size:19px }
.jm-volet .jm-meta{ display:none }
.jm-dev .jm-volet .jm-meta{ display:block }   /* durée : mode dev seulement en boutique */
@media (min-width:761px){ .jm-volet #jm-fil{ padding:18px 18px 24px } }

/* État du service : une ligne seulement quand quelque chose ne va pas */
.jm-volet .jm-etat{ flex:none; margin:0; padding:6px 16px; border-top:1px solid var(--jm-trait); font-size:12.5px; color:var(--jm-brique) }
.jm-volet .jm-etat::before{ display:none }
.jm-volet .jm-etat:not(.jm-hors){ display:none }

/* Contexte de page : ce que Jean-Michel voit, et une amorce */

/* Saisie : en bas du volet, pas fixée à la fenêtre ; zone pouce respectée */
.jm-volet .jm-saisie{ position:static; flex:none; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--jm-lin); border-top:1px solid var(--jm-trait) }
.jm-volet .jm-saisie form{ max-width:none }
.jm-volet .jm-saisie textarea{ font-size:16px }           /* ≥ 16 px : iOS ne zoome pas au focus */
.jm-volet .jm-envoyer{ min-height:44px }
@media (min-width:761px){ .jm-volet .jm-saisie{ padding:10px 18px 12px } .jm-volet .jm-saisie textarea{ font-size:inherit } .jm-volet .jm-envoyer{ min-height:0 } }

/* 04/11 (itération) : gestes de la planche en vrais boutons d'action, comme la fiche produit du thème (38 px, rayon 6) ;
   « Ajouter au panier » plein ardoise (sapin une fois fait), « Mettre de côté » filet ardoise ; quantité à la même hauteur. */
.jm-gestes{ gap:10px 12px; margin-top:16px }
.jm-gestes .jm-garder,.jm-panier-geste .jm-ajouter{ height:38px; padding:0 14px; border-radius:6px; font:500 13.5px/1 'JM Inter',sans-serif; gap:8px; transition:background-color .15s,color .15s,border-color .15s }
.jm-gestes .jm-geste:hover{ text-decoration:none }
.jm-gestes .jm-geste svg{ width:17px; height:17px; stroke-width:1.5 }
.jm-panier-geste{ gap:8px }
.jm-panier-geste .jm-ajouter{ background:var(--jm-ardoise); color:var(--jm-papier); border:1px solid var(--jm-ardoise) }
.jm-panier-geste .jm-ajouter:hover{ background:#000; border-color:#000 }
.jm-panier-geste .jm-ajouter[data-fait="true"]{ background:var(--jm-sapin); border-color:var(--jm-sapin) }
.jm-gestes .jm-garder{ background:var(--jm-papier); color:var(--jm-ardoise); border:1px solid var(--jm-ardoise) }
.jm-gestes .jm-garder:hover{ background:var(--jm-ardoise); color:var(--jm-papier) }
.jm-gestes .jm-garder[data-fait="true"]{ background:var(--jm-lin); color:var(--jm-sapin); border-color:var(--jm-sapin) }
.jm-quantite{ height:38px; border-radius:6px; background:var(--jm-papier); border-color:var(--jm-ardoise-2) }
.jm-quantite button{ width:34px; height:36px; font-size:18px; color:var(--jm-ardoise) }
.jm-quantite button:hover{ background:var(--jm-lin); color:var(--jm-ardoise) }
.jm-quantite button:first-child{ border-radius:5px 0 0 5px } .jm-quantite button:last-child{ border-radius:0 5px 5px 0 }
.jm-quantite output{ min-width:30px; font-size:14px; font-weight:500 }
@container jm-fil (max-width:560px){ .jm-panier-geste{ flex:1 1 100% } .jm-panier-geste .jm-ajouter{ flex:1; justify-content:center } .jm-gestes .jm-garder{ flex:1 1 100%; justify-content:center; order:2 } }

/* 04/11 (itération) : la page derrière le volet navigue (vraie navigation) et le volet ne bouge pas : fondu de la page, volet maintenu tel quel.
   La transition est annulée par jm.js (pageswap) quand le volet est replié ou sur mobile. Le fantôme est la copie figée du volet au chargement suivant. */
.jm-fantome{ display:contents }
@media (prefers-reduced-motion:no-preference){ @view-transition{ navigation:auto } }
::view-transition-old(jm-volet){ display:none }
::view-transition-new(jm-volet){ animation:none }

/* 04/11 (itération) : Jean-Michel en colonne, séparé de la page par une double ligne qui se déplace ; au milieu, poignée et croix de repli.
   La page se décale ; les éléments fixes du site, que ce décalage n'atteint pas, sont repoussés à la main. Mobile : plein écran, rien de tout cela. */
.jm-separateur{ display:none }
@media (min-width:761px){
  html.jm-colonne body{ margin-right:var(--jm-colonne,460px) }
  html.jm-colonne .lcm-to-top{ right:calc(var(--jm-colonne,460px) + clamp(1rem, 2.5vw, 1.75rem)) }
  html.jm-colonne #lcm-consent-banner{ right:var(--jm-colonne,460px) }
  .jm-separateur{ display:block; position:absolute; left:0; top:0; bottom:0; width:12px; z-index:6; cursor:col-resize; touch-action:none; background:var(--jm-lin) }
  .jm-separateur::before{ content:''; position:absolute; left:4px; top:0; bottom:0; width:4px; border-left:1px solid var(--jm-ardoise-2); border-right:1px solid var(--jm-ardoise-2) }
  .jm-separateur:hover::before,html.jm-glisse .jm-separateur::before{ border-color:var(--jm-ardoise) }
  .jm-separateur:focus-visible{ outline:none } .jm-separateur:focus-visible .jm-poignee{ outline:2px solid var(--jm-sapin); outline-offset:2px }
  .jm-separateur-outils{ position:absolute; top:50%; left:6px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px }
  .jm-outil{ width:22px; height:34px; display:grid; place-content:center; padding:0; background:var(--jm-papier); border:1px solid var(--jm-ardoise-2); border-radius:6px; color:var(--jm-ardoise) }
  .jm-outil svg{ width:12px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round }
  .jm-poignee{ cursor:col-resize }
  .jm-replier{ cursor:pointer } .jm-replier:hover{ background:var(--jm-ardoise); border-color:var(--jm-ardoise); color:var(--jm-papier) }
  html.jm-glisse,html.jm-glisse *{ cursor:col-resize !important; user-select:none !important }
}

/* Bootstrap mesure la barre de défilement par window.innerWidth - clientWidth, or amorce.js retire la colonne de innerWidth : sa compensation est annulée.
   Modales et menus latéraux restent du côté du site. Tablette : largeur imposée, donc ni poignée ni glissement, la croix reste. */
@media (min-width:761px){
  html.jm-colonne body{ padding-right:0 !important }
  html.jm-colonne .sticky-top,html.jm-colonne .fixed-top,html.jm-colonne .fixed-bottom,html.jm-colonne .is-fixed{ padding-right:0 !important; margin-right:0 !important }
  html.jm-colonne .modal,html.jm-colonne .modal-backdrop,html.jm-colonne .offcanvas-backdrop{ width:calc(100% - var(--jm-colonne,460px)); padding-right:0 !important }
  html.jm-colonne .offcanvas-end{ right:var(--jm-colonne,460px) }
}
@media (min-width:761px) and (max-width:1199.98px){
  .jm-separateur{ cursor:default }
  .jm-poignee{ display:none }
}
/* Mobile : volet à droite sur 95 % de l'écran ; les 5 % de gauche portent la languette étincelle, accrochée au bord du volet (elle bouge avec lui).
   La languette ou un glissement vers la droite range le volet (il n'en reste que la languette, au bord droit) ; glisser vers la gauche le ressort.
   Au moins 24 px pour la languette : en dessous, elle ne se touche plus du doigt. */
.jm-rappel{ display:none }
@media (max-width:760px){
  .jm-boutique{ --jm-languette:max(5vw, 24px) }
  .jm-boutique .jm-volet{ left:var(--jm-languette); transition:transform .3s cubic-bezier(.2,.8,.2,1); touch-action:pan-y }
  .jm-boutique .jm-volet #jm-fil{ touch-action:pan-y }   /* le fil défile en hauteur ; en largeur, c'est le volet qui glisse */
  .jm-boutique .jm-volet.jm-tire{ transition:none }   /* pendant le glissement, le volet suit le doigt */
  @starting-style{ #jm-racine.jm-boutique.jm-ouvert .jm-volet{ transform:translateX(100%) } }   /* ouverture : il arrive de la droite */
  .jm-boutique .jm-separateur{ display:block; position:absolute; top:0; bottom:0; right:100%; width:var(--jm-languette); pointer-events:none }
  .jm-boutique .jm-separateur-outils{ display:none }
  /* 50svh et non 50 % : la hauteur du volet (100dvh) change quand la barre d'adresse se montre ou se cache, la languette ne doit pas sauter */
  .jm-boutique .jm-rappel{ display:grid; place-content:center; position:absolute; top:50%; top:50svh; right:0; transform:translateY(-50%); width:100%; height:64px; padding:0; border:0; border-radius:10px 0 0 10px; background:var(--jm-ardoise); color:var(--jm-papier); cursor:pointer; pointer-events:auto; touch-action:none; box-shadow:-6px 0 18px rgba(42,45,49,.12) }
  /* Raccord languette / volet : un dégradé de 3 px, noir côté languette, blanc côté volet, tout le long du bord du volet, et deux congés creux
     au-dessus et au-dessous de la languette, qui s'évase dans ce filet au lieu de buter contre le volet. Rien d'animé ici. */
  .jm-boutique .jm-volet{ box-shadow:-6px 0 18px rgba(42,45,49,.12) }
  .jm-boutique .jm-volet::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:7; pointer-events:none; background:linear-gradient(to right, var(--jm-ardoise), #fff) }
  .jm-boutique .jm-rappel::before,.jm-boutique .jm-rappel::after{ content:''; position:absolute; right:0; width:10px; height:10px; pointer-events:none }
  .jm-boutique .jm-rappel::before{ bottom:100%; background:radial-gradient(circle at 0 0, transparent 9.5px, var(--jm-ardoise) 10px) }
  .jm-boutique .jm-rappel::after{ top:100%; background:radial-gradient(circle at 0 100%, transparent 9.5px, var(--jm-ardoise) 10px) }
  .jm-rappel svg{ width:18px; height:18px; fill:currentColor; overflow:visible }
  #jm-racine.jm-lisiere .jm-volet{ transform:translateX(100%) }
}
@media (prefers-reduced-motion:reduce){ .jm-boutique .jm-volet{ transition:none } }

/* 04/11 (itération) : une fiche sur deux porte une légère nuance, pour distinguer d'un coup d'œil les produits qui se suivent. La fiche déborde un peu sur la marge du fil : son contenu reste aligné sur la prose. */
.jm-planche{ margin-inline:-14px; padding:24px 14px }
.jm-planche + .jm-planche{ margin-top:0 }
.jm-bot > .jm-planche:nth-of-type(even){ background:rgba(255,253,249,.6) }
.jm-accroche + .jm-planche,.jm-prose + .jm-planche{ margin-top:6px }
.jm-planche + .jm-chute,.jm-planche + .jm-prose{ margin-top:12px }

/* 04/11 (itération) : « Ajouter au panier » suit la séquence du bouton de la fiche article (.btn-primary de custom.css) :
   noir au repos, brun foncé au survol et à l'appui, gris pendant l'ajout, puis retour au noir. Valeurs en dur, le banc n'a pas les variables du thème. */
.jm-panier-geste .jm-ajouter{ background:#1a1a1a; border-color:#1a1a1a; color:#fff }
.jm-panier-geste .jm-ajouter:hover,.jm-panier-geste .jm-ajouter:active{ background:#5c4a32; border-color:#5c4a32; color:#fff }
.jm-panier-geste .jm-ajouter[data-fait="true"]{ background:#1a1a1a; border-color:#1a1a1a }
.jm-panier-geste .jm-ajouter[data-fait="true"]:hover,.jm-panier-geste .jm-ajouter[data-fait="true"]:active{ background:#5c4a32; border-color:#5c4a32 }
.jm-panier-geste .jm-ajouter[disabled],.jm-panier-geste .jm-ajouter[disabled]:hover{ background:#706b63; border-color:#706b63; color:#fff; opacity:0.65 }
.jm-panier-geste .jm-ajouter{ transition:none }

/* 04/11 (itération) : signet qui glisse du bouton « Mettre de côté » vers « Votre sélection » (animé par jm.js). */
.jm-envol{ position:fixed; z-index:1040; width:17px; height:17px; pointer-events:none; color:var(--jm-sapin) }
.jm-envol svg{ display:block; width:100%; height:100%; fill:currentColor; stroke:currentColor; stroke-width:1.3; stroke-linejoin:round }

/* 04/11 (itération) : colonne étroite : le nom passe sur deux lignes plutôt que de pousser les boutons de l'en-tête hors de l'écran. */
.jm-volet .jm-entete h2{ flex:0 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere }

/* 04/11 (itération) : galerie. « Voir ce produit » devient un vrai bouton sous l'image ; fond opaque pour la lisibilité ; sur mobile, textes agrandis et bouton pleine largeur. */
.jm-zoom{ background:#2a2d31 }
.jm-zoom-scene{ grid-template-rows:minmax(0,1fr) auto; row-gap:14px }
.jm-zoom-cadre{ grid-column:1; grid-row:1; width:min(100%,calc(100vh - 262px)) }
.jm-zoom-legende{ grid-column:2; grid-row:1 / span 2; align-self:center }
.jm-zoom-actions{ grid-column:1; grid-row:2; justify-self:center; display:flex }
#jm-racine a.jm-zoom-fiche{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 26px; border-radius:6px; background:var(--jm-papier); color:var(--jm-ardoise); font:500 15px/1 'JM Inter',sans-serif; text-decoration:none }
#jm-racine a.jm-zoom-fiche:hover{ background:#fff; color:#000 }
@media (max-width:760px){
  .jm-zoom-scene{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto; gap:14px; align-content:stretch }
  .jm-zoom-cadre{ width:min(100%,calc(100vh - 340px)) }
  .jm-zoom-legende{ grid-column:1; grid-row:2; align-self:auto }
  .jm-zoom-legende h3{ font-size:24px }
  .jm-zoom-legende p{ margin-top:6px; font-size:16px }
  .jm-zoom-legende .jm-zoom-prix{ font-size:19px; font-weight:500 }
  .jm-zoom-compteur{ font-size:16px }
  .jm-zoom-actions{ grid-column:1; grid-row:3; justify-self:stretch }
  #jm-racine a.jm-zoom-fiche{ width:100%; min-height:50px; font-size:17px }
  .jm-zoom-vignettes button{ width:10px; height:10px }
}

/* 04/11 (itération) : galerie mobile. Image, titre, prix et bouton groupés ; dernière ligne de l'écran en deux moitiés : « Photo 1 sur 2 » à gauche, points à droite, chacun centré. */
@media (max-width:760px){
  .jm-zoom-scene{ grid-template-rows:auto auto auto; align-content:center; padding-bottom:14px }
  .jm-zoom-cadre{ width:min(100%,calc(100vh - 300px)) }
  .jm-zoom-vignettes{ width:50%; margin-left:50%; padding:0 8px 22px; justify-content:center; align-items:center }
  .jm-zoom-legende .jm-zoom-coloris{ position:absolute; left:0; bottom:22px; width:50%; height:10px; margin:0; padding:0 8px; display:flex; align-items:center; justify-content:center; white-space:nowrap; font-size:15px }
}

/* 04/11 (itération) : gestes de la planche en grille régulière : mettre de côté et voir le produit, puis quantité et panier, tous de même largeur. Colonne étroite : une seule colonne. */
.jm-gestes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; align-items:stretch }
.jm-panier-geste{ display:contents }
.jm-gestes .jm-geste{ min-width:0; width:100%; justify-content:center }
.jm-gestes .jm-geste span{ min-width:0; overflow:hidden; text-overflow:ellipsis }
.jm-gestes .jm-voir{ height:38px; padding:0 14px; border-radius:6px; font:500 13.5px/1 'JM Inter',sans-serif; gap:8px; text-decoration:none; background:var(--jm-papier); color:var(--jm-ardoise); border:1px solid var(--jm-ardoise); transition:background-color .15s,color .15s,border-color .15s }
#jm-racine .jm-gestes a.jm-voir{ color:var(--jm-ardoise) }
#jm-racine .jm-gestes a.jm-voir:hover{ background:var(--jm-ardoise); color:var(--jm-papier) }
.jm-quantite{ display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; width:100% }
@container jm-fil (max-width:560px){ .jm-gestes .jm-garder{ order:0 } }

/* Carte d'un rayon (outil show_category) */
.jm-rayon{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:16px 0 0; padding:14px 0; border-top:1px solid var(--jm-trait); border-bottom:1px solid var(--jm-trait); color:var(--jm-ardoise); text-decoration:none }
.jm-rayon + .jm-rayon{ margin-top:0; border-top:0 }
/* Webcams (marqueur [webcams]) : panoramas à faire défiler du doigt, hauteur fixe */
.jm-webcams{ margin:16px 0 0 }
.jm-webcam{ margin:0 0 10px }
.jm-webcam-cadre{ overflow-x:auto; border-radius:6px; background:var(--jm-trait) }
.jm-webcam img{ display:block; height:180px; width:auto; max-width:none }
.jm-webcam-pleine img{ width:100%; height:auto }   /* La Salle-les-Alpes (640×480) : toute la largeur du fil */
.jm-webcam figcaption{ margin-top:4px; font-size:13px; color:var(--jm-ardoise-2) }
.jm-webcams-credits{ margin:12px 0 0; font-size:12px; color:var(--jm-ardoise-2) }
.jm-rayon-nom{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.jm-rayon-nom strong{ font:500 18px/1.25 'JM Red Hat',sans-serif }
.jm-rayon-n{ font-size:13px; color:var(--jm-ardoise-2) }
.jm-rayon-voir{ flex:none; padding:9px 16px; background:var(--jm-ardoise); color:var(--jm-papier); font:500 14px/1.1 'JM Red Hat',sans-serif; white-space:nowrap }
.jm-rayon:hover .jm-rayon-voir{ background:#000 }

/* Micro de la saisie (dictée) */
.jm-micro{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; background:none; border:0; color:var(--jm-ardoise-2); cursor:pointer }
.jm-micro svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round }
.jm-micro:hover{ color:var(--jm-ardoise) }
.jm-micro.jm-ecoute{ color:#b3261e; animation:jm-micro-pouls 1.4s ease-in-out infinite }
@keyframes jm-micro-pouls{ 50%{ opacity:.45 } }
@media (prefers-reduced-motion:reduce){ .jm-micro.jm-ecoute{ animation:none } }
.jm-volet .jm-micro{ width:44px; height:44px }
@media (min-width:761px){ .jm-volet .jm-micro{ width:36px; height:36px } }

/* Suite probable : texte fantôme derrière la case de saisie (Tab l'accepte) */
.jm-champ{ flex:1; min-width:0; display:grid }
.jm-champ > *{ grid-area:1/1; min-width:0 }
.jm-champ textarea{ width:100%; position:relative; z-index:1 }
.jm-suggestion{ padding:6px 0; font:inherit; color:var(--jm-ardoise-2); opacity:.7; white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none }
.jm-suggestion:empty{ display:none }
.jm-suggestion-tape{ visibility:hidden }
.jm-suggestion kbd{ margin-left:8px; padding:0 5px; border:1px solid var(--jm-trait); font:500 11px/1.5 'JM Red Hat',sans-serif; vertical-align:1px }
.jm-suggere textarea::placeholder{ color:transparent }
.jm-volet .jm-suggestion{ font-size:16px }
@media (min-width:761px){ .jm-volet .jm-suggestion{ font-size:inherit } }
/* Ajout direct au panier (« mets au panier »), confirmation sous la réponse */
.jm-ajout-direct{ display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:14px; color:#2f5d3a }
.jm-ajout-direct svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4 }
.jm-ajout-direct.jm-refuse{ color:#9a3a22 }
.jm-ajout-direct.jm-renvoi{ color:inherit }
/* Choix de la déclinaison pour l'ajout direct */
.jm-variantes{ margin:12px 0 0; font-size:13px }
.jm-variantes-titre{ margin:0 0 6px; font-size:14px }
.jm-variantes table{ width:100%; border-collapse:collapse }
.jm-variantes tr{ border-top:1px solid rgba(0,0,0,.12) }
.jm-variantes td{ padding:5px 6px 5px 0; vertical-align:middle }
.jm-variantes td:last-child{ padding-right:0; text-align:right; white-space:nowrap }
.jm-variantes img{ display:block; width:28px; height:28px; object-fit:cover; border-radius:2px }
.jm-variantes-dispo{ color:#6b665e; white-space:nowrap }
.jm-variantes-prix{ white-space:nowrap }
.jm-variantes .jm-geste svg{ width:13px; height:13px; margin-right:4px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.4 }
@media (max-width:480px){ .jm-variantes-dispo{ display:none } }