/* ════════════════════════════════════════════════════════════════════
   Menu mobile 2026 — composant unique de www.jetroque.com (préfixe .jqm)
   Chargé par les 71 pages (FR, EN, accueils, 404). Ses propres couleurs
   clair / sombre : ne dépend d'aucune page. Une seule zone défile ; le bas
   fixe ne garde qu'un bouton ; sous 480 px de haut, tout défile ensemble.
   Le bouton du menu garde la classe .nav__burger : son affichage
   (caché sur ordinateur) reste géré par les styles de chaque page.
   ════════════════════════════════════════════════════════════════════ */

.jqm,.jqm-bar{--m-bg:#fefffe;--m-ink:#13201a;--m-gray:#5d6a63;--m-soft:#f2f6f3;--m-line:#e1e8e3;--m-tint:#e8f4ec;--m-green:#166534;--m-btn:#15803d;--m-btn-ink:#fff;--m-shadow:rgba(19,32,26,.16)}
[data-theme="dark"] .jqm,[data-theme="dark"] .jqm-bar{--m-bg:#0c130f;--m-ink:#eef3ef;--m-gray:#a7b3ab;--m-soft:#16201b;--m-line:#22302a;--m-tint:#13261b;--m-green:#4ade80;--m-btn:#22c55e;--m-btn-ink:#06210f;--m-shadow:rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .jqm,:root:not([data-theme]) .jqm-bar{--m-bg:#0c130f;--m-ink:#eef3ef;--m-gray:#a7b3ab;--m-soft:#16201b;--m-line:#22302a;--m-tint:#13261b;--m-green:#4ade80;--m-btn:#22c55e;--m-btn-ink:#06210f;--m-shadow:rgba(0,0,0,.6)}}

/* ── Bouton du menu (trois traits → croix) ; 46×44, marge négative : l'en-tête garde sa hauteur d'avant ── */
.jqm-burger{flex-direction:column;justify-content:center;align-items:center;gap:5px;width:46px;height:44px;margin:-2px 0;padding:0;border:0;border-radius:12px;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jqm-burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink,currentColor);transition:transform .25s cubic-bezier(.23,1,.32,1),opacity .2s ease}
.jqm-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.jqm-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.jqm-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.jqm-burger:focus-visible{outline:2px solid #16a34a;outline-offset:2px}
.jqm-burger.jqm-quiet:focus-visible{outline:none} /* fermé au toucher : focus rendu sans anneau */

/* ── Le panneau ── */
.jqm{position:fixed;top:var(--jqm-top,64px);right:0;bottom:0;left:0;z-index:130;display:flex;flex-direction:column;margin:0;background:var(--m-bg);color:var(--m-ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;text-align:left;transform:translateX(100%);visibility:hidden;
  transition:transform .3s cubic-bezier(.32,.72,0,1),visibility 0s linear .3s}
.jqm.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.32,.72,0,1),visibility 0s}
@media (min-width:600px){.jqm{left:auto;width:400px;border-left:1px solid var(--m-line);box-shadow:-24px 0 48px -24px var(--m-shadow)}}
.jqm:focus{outline:none}
.jqm *,.jqm *::before,.jqm *::after{box-sizing:border-box}
.jqm a{box-shadow:none;text-transform:none;letter-spacing:normal}

/* zone qui défile, ombres d'indice en haut et en bas (pur CSS) */
.jqm__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 12px 12px;
  background:linear-gradient(var(--m-bg) 40%,transparent) top/100% 40px no-repeat local,linear-gradient(transparent,var(--m-bg) 60%) bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0,var(--m-shadow),transparent) top/100% 14px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,var(--m-shadow),transparent) bottom/100% 14px no-repeat scroll;
  background-color:var(--m-bg)}

.jqm__nav{display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.jqm__nav a,.jqm__row{display:flex;align-items:center;gap:14px;min-height:52px;margin:0;padding:8px 12px;border:0;border-radius:14px;background:transparent;color:var(--m-ink);
  font-size:1.05rem;font-weight:500;line-height:1.3;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease-out}
.jqm__nav a:active,.jqm__row:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.jqm__nav a:hover,.jqm__row:hover{background:var(--m-soft);color:var(--m-ink)}}
.jqm a:focus-visible,.jqm button:focus-visible{outline:2px solid var(--m-btn);outline-offset:2px}
.jqm__ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--m-tint);color:var(--m-green)}
.jqm__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jqm__ic--plain{background:var(--m-soft);color:var(--m-gray)}
.jqm__t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow-wrap:break-word;word-break:normal;hyphens:manual}
.jqm__t small{font-size:.8rem;font-weight:400;line-height:1.3;color:var(--m-gray)}
.jqm__chev{flex:none;font-size:1.4rem;line-height:1;color:var(--m-gray);opacity:.6}
.jqm__nav a[aria-current]{background:var(--m-tint);color:var(--m-green);font-weight:600}
.jqm__nav a[aria-current] .jqm__ic{background:var(--m-btn);color:var(--m-btn-ink)}
.jqm__more{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--m-line)}
.jqm__foot{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--m-line)}
.jqm__social{display:flex;gap:10px}
.jqm__social a{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:12px;background:var(--m-soft);color:var(--m-gray)}
.jqm__social svg{width:20px;height:20px;fill:currentColor}
.jqm__legal{display:flex;flex-wrap:wrap;justify-content:center}
.jqm__legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;background:transparent;color:var(--m-gray);font-size:.85rem;font-weight:400;text-decoration:none}

/* écran très étroit (texte agrandi) : la langue et le thème quittent l'en-tête et entrent dans le menu */
.jqm__prefs{display:none;gap:10px;align-items:center}
.jqm__prefs a,.jqm__prefs button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--m-line);background:transparent;color:var(--m-ink);font:600 .9rem Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer}
.jqm__prefs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:300px){.jqm__prefs{display:flex}.jqm-hide-narrow{display:none!important}
  .jqm__scroll{padding:8px 8px 12px}.jqm__nav a,.jqm__row{gap:10px;padding:8px}.jqm__ic{width:30px;height:30px}.jqm__ic svg{width:18px;height:18px}.jqm__chev{display:none}}

/* bas fixe : un seul bouton */
.jqm__cta{flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--m-line);background:var(--m-bg)}
.jqm__btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin:0;padding:12px 18px;border-radius:14px;background:var(--m-btn);color:var(--m-btn-ink);
  font-size:1.02rem;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.jqm__btn:hover,.jqm__btn:focus{background:var(--m-btn);color:var(--m-btn-ink)}
.jqm__btn:active{transform:scale(.97)}
.jqm__btn-ic svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* écran très court (paysage, texte agrandi) : tout défile ensemble, rien de fixe */
@media (max-height:480px){.jqm{overflow-y:auto;overscroll-behavior:contain}.jqm__scroll{flex:none;overflow:visible;background:none}.jqm__cta{border-top:0;padding-top:4px}}

.jqm-backdrop{position:fixed;top:var(--jqm-top,64px);right:0;bottom:0;left:0;z-index:129;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s ease}
.jqm-backdrop.open{opacity:1;pointer-events:auto}
@media (max-width:599px){.jqm-backdrop{display:none}}

/* barre minimale des pages sans en-tête (404) */
.jqm-bar{position:fixed;top:0;left:0;right:0;z-index:140;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:var(--m-bg);border-bottom:1px solid var(--m-line);color:var(--m-ink)}
.jqm-bar a.jqm-bar__brand{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;background:transparent;box-shadow:none;border-radius:0}
.jqm-bar__brand img{display:block;height:30px;width:auto}
.jqm-bar .jqm-burger{display:inline-flex}
.jqm-bar .jqm-burger span{background:var(--m-ink)}
.jqm-bar .logo-dark{display:none}
[data-theme="dark"] .jqm-bar .logo-light{display:none}[data-theme="dark"] .jqm-bar .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .jqm-bar .logo-light{display:none}:root:not([data-theme]) .jqm-bar .logo-dark{display:block}}

@media (prefers-reduced-motion:reduce){.jqm,.jqm.open{transition:visibility 0s}.jqm-burger span,.jqm__btn,.jqm__nav a,.jqm__row,.jqm-backdrop{transition:none}}