/* ══════════════════════════════════════════
   THÈME SOMBRE (défaut)
══════════════════════════════════════════ */
:root {
  --bg-main: #1a2540;
  --bg-bar: #04091a;
  --bg-bar2: #080f24;
  --bg-section: #1e2a48;
  --bg-btn: #263554;
  --bg-depth: #202d4a;
  --border: #304060;
  --border2: #3a4c72;
  --border3: #445880;
  --text: #eee;
  --text-muted: #aaa;
  --text-dim: #888;
}

/* ══════════════════════════════════════════
   THÈME CLAIR
══════════════════════════════════════════ */
body.light-mode {
  --bg-main: #f0f2f5;
  --bg-bar: #e0e0e0;
  --bg-bar2: #d0d0d0;
  --bg-section: #fff;
  --bg-btn: #e8e8e8;
  --bg-depth: #e0e0e0;
  --border: #ccc;
  --border2: #bbb;
  --border3: #aaa;
  --text: #111;
  --text-muted: #555;
  --text-dim: #777;
}

html {
  overflow: hidden;
  background: #0d1117;
}

body {
  font-family: "Segoe UI", Arial;
  background: linear-gradient(170deg, #1f3050 0%, #131e38 40%, #0c1422 100%);
  background-attachment: fixed;
  color: var(--text);
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, color 0.3s;
}

/* --- Header --- */
#top-bar {
  background: linear-gradient(180deg, #0c1526 0%, #111e36 60%, #162140 100%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  padding-top: max(10px, env(safe-area-inset-top, 10px));
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  flex-shrink: 0;
  transition: background 0.3s;
}
#tabs { justify-content: center; }
#top-bar h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(180, 0, 122, 0.6);
  color: var(--text);
}

/* --- Onglets principaux --- */
#tabs {
  display: flex;
  gap: 6px;
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1.5px solid #1e3050;
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Trebuchet MS', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all .2s;
  white-space: nowrap;
}
.tab-btn svg { flex-shrink: 0; transition: filter .2s; }
.tab-btn:hover { color: #e2e8f0; transform: translateY(-2px); }

/* couleurs par onglet */
#tab-ranges:hover, #tab-ranges.active  { border-color:#06b6d4; box-shadow:0 0 14px rgba(6,182,212,.25); background:rgba(6,182,212,.08); }
#tab-trainer:hover, #tab-trainer.active { border-color:#3b82f6; box-shadow:0 0 14px rgba(59,130,246,.25); background:rgba(59,130,246,.08); }
#tab-editor:hover, #tab-editor.active  { border-color:#f59e0b; box-shadow:0 0 14px rgba(245,158,11,.25); background:rgba(245,158,11,.08); }
#tab-theorie:hover, #tab-theorie.active { border-color:#a855f7; box-shadow:0 0 14px rgba(168,85,247,.25); background:rgba(168,85,247,.08); }
#tab-simulation:hover, #tab-simulation.active { border-color:#f97316; box-shadow:0 0 14px rgba(249,115,22,.25); background:rgba(249,115,22,.08); }

#tab-ranges.active svg    { filter: drop-shadow(0 0 4px #06b6d4); }
#tab-trainer.active svg   { filter: drop-shadow(0 0 4px #3b82f6); }
#tab-editor.active svg    { filter: drop-shadow(0 0 4px #f59e0b); }
#tab-theorie.active svg   { filter: drop-shadow(0 0 4px #a855f7); }
#tab-simulation.active svg{ filter: drop-shadow(0 0 4px #f97316); }

#tab-ranges.active    { color:#06b6d4; }
#tab-trainer.active   { color:#3b82f6; }
#tab-editor.active    { color:#f59e0b; }
#tab-theorie.active   { color:#a855f7; }
#tab-simulation.active{ color:#f97316; }
#tab-hh.active         { color:#22d3ee; }
#tab-hh:hover, #tab-hh.active { border-color:#22d3ee; box-shadow:0 0 14px rgba(34,211,238,.25); background:rgba(34,211,238,.08); }
#tab-hh.active svg     { filter: drop-shadow(0 0 4px #22d3ee); }

/* --- Boutons header droite --- */
#voiceBtn:hover      { border-color:#38bdf8; box-shadow:0 0 14px rgba(56,189,248,.25); background:rgba(56,189,248,.08); color:#38bdf8; }
#colorblindBtn:hover { border-color:#22c55e; box-shadow:0 0 14px rgba(34,197,94,.25);  background:rgba(34,197,94,.08);  color:#22c55e; }
#themeBtn:hover      { border-color:#fbbf24; box-shadow:0 0 14px rgba(251,191,36,.25); background:rgba(251,191,36,.08); color:#fbbf24; }
#fullscreenBtn:hover { border-color:#94a3b8; box-shadow:0 0 14px rgba(148,163,184,.2); background:rgba(148,163,184,.08); color:#94a3b8; }
#voiceBtn svg      { filter: none; } #voiceBtn:hover svg      { filter: drop-shadow(0 0 4px #38bdf8); }
#colorblindBtn svg { filter: none; } #colorblindBtn:hover svg { filter: drop-shadow(0 0 4px #22c55e); }
#themeBtn svg      { filter: none; } #themeBtn:hover svg      { filter: drop-shadow(0 0 4px #fbbf24); }
#fullscreenBtn svg { filter: none; } #fullscreenBtn:hover svg { filter: drop-shadow(0 0 4px #94a3b8); }

/* --- Panel ranges — fond dégradé unifié, sans démarcations --- */
#panel-ranges {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  /* Gradient radial : légèrement plus lumineux au centre-haut, s'assombrit en périphérie */
  background: linear-gradient(170deg,
    #1f3050 0%,
    #131e38 40%,
    #0c1422 100%
  );
}

#positions {
  background: transparent;
  padding: 10px 12px 10px calc(12px + 210px); /* +210px = largeur sidebar depth-buttons → centre sur la zone range */
  flex-shrink: 0;
  border-bottom: none;
  box-shadow: none;
  transition: none;
  display: flex;
  justify-content: center;
}

/* ── Navigation Option 2 : onglets en haut, sous-menu centré en dessous ── */
#cat-blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.cat-tabs-row {
  display: flex;
  gap: 8px;
}

.cat-tab {
  width: 110px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  background: transparent;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}
.cat-tab:hover {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
}

/* Onglet actif — subtil */
.btn-BTN-tab.active { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); color: #fff; }
.btn-SB-tab.active  { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); color: #fff; }
.btn-BB-tab.active  { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); color: #fff; }
.btn-BVB-tab.active { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); color: #fff; }
.btn-HU-tab.active  { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); color: #fff; }

/* Sous-panel centré sous toute la rangée d'onglets */
.cat-subpanel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-top: 10px;
  margin-top: -4px;
}
.sit-btn {
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 700;
  cursor: pointer;
  color: rgba(255,255,255,0.75);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s, color 0.2s, border-color 0.2s;
  font-size: 15px;
  box-shadow: none;
  background: transparent;
}
.sit-btn:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.sit-btn.active {
  color: #fff;
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.28);
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.sit-btn.active::after { display: none; }

@keyframes shimmer-slide {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* couleurs spécifiques — translucides pour se fondre dans le gradient */
.btn-BTN { background: transparent; }
.btn-BTN:hover { background: rgba(255,255,255,0.07); }
.btn-BTN.active { background: rgba(255,255,255,0.11); }

.btn-SB  { background: transparent; }
.btn-SB:hover  { background: rgba(255,255,255,0.07); }
.btn-SB.active  { background: rgba(255,255,255,0.11); }

.btn-BB  { background: transparent; }
.btn-BB:hover  { background: rgba(255,255,255,0.07); }
.btn-BB.active  { background: rgba(255,255,255,0.11); }

.btn-BVB { background: transparent; }
.btn-BVB:hover { background: rgba(255,255,255,0.07); }
.btn-BVB.active { background: rgba(255,255,255,0.11); }

.btn-HU  { background: transparent; }
.btn-HU:hover  { background: rgba(255,255,255,0.07); }
.btn-HU.active  { background: rgba(255,255,255,0.11); }

/* --- Zone principale ranges --- */
#content {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  align-items: center;
}

/* --- Sidebar profondeurs — fondue dans le gradient --- */
.depth-group {
  background: transparent;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 210px;
  min-width: 210px;
  flex-shrink: 0;
  box-shadow: none;
  border-right: none;
  transition: none;
  overflow-y: auto;
}

.depth-sit-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 6px;
  border-right: none;
  flex: 1;
  justify-content: center;
}

.depth-depths-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 10px 6px;
  justify-content: center;
}

.depth-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  border-radius: 8px;
  font-weight: 700;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s, border-color 0.2s;
  box-shadow: none;
  letter-spacing: 0.5px;
}
.depth-btn:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
}
.depth-btn.active {
  background: rgba(180,0,122,0.2);
  border-color: rgba(255,78,203,0.3);
  color: #fff;
  transform: translateX(2px);
}

.depth-btn.active::after { display: none; }

/* --- Zone image — fondue dans le gradient --- */
#range-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 8px;
  overflow: hidden;
  position: relative;
  transition: none;
}
#range-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 6px;
}

/* --- Breadcrumb --- */
#breadcrumb {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Trebuchet MS', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
}
#breadcrumb span { font-weight: 900; }

#range-img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease;
  cursor: grab;
}
#range-img.loading { opacity: 0; }

/* --- Loader --- */
#img-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  z-index: 10;
}
#img-loader.visible { display: flex; }
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border2);
  border-top: 3px solid #b4007a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ─── Compact layout sur petits écrans (laptop 13-14") ─── */
@media (max-height: 820px) {
  #top-bar {
    padding: 5px 14px;
  }
  #top-bar h1 {
    font-size: 14px;
  }
  .tab-btn {
    padding: 3px 12px;
    font-size: 12px;
  }
  #fullscreenBtn, #themeBtn {
    padding: 3px 10px;
    font-size: 12px;
  }
  #positions {
    padding: 6px 10px 6px calc(10px + 210px);
  }
  .cat-tab {
    padding: 7px 10px;
    font-size: 11px;
  }
  .sit-btn {
    padding: 6px 14px;
    font-size: 13px;
  }
  #cat-blocks {
    gap: 6px;
  }
  .cat-subpanel {
    gap: 4px;
  }
}

/* ─── Ultra-compact pour très petits écrans (768px hauteur) ─── */
@media (max-height: 700px) {
  #top-bar {
    padding: 3px 10px;
  }
  .tab-btn {
    padding: 2px 9px;
    font-size: 11px;
  }
  #fullscreenBtn, #themeBtn, #voiceBtn, #colorblindBtn {
    padding: 2px 8px;
    font-size: 11px;
  }
  #voiceBtn {
    width: 26px;
    height: 26px;
  }
  #positions {
    padding: 4px 8px 4px calc(8px + 210px);
  }
  .cat-tab {
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
  }
  .sit-btn {
    padding: 5px 12px;
    font-size: 12px;
  }
  #cat-blocks {
    gap: 4px;
  }
  .cat-subpanel {
    gap: 3px;
  }
  #ranges-group-bar {
    padding: 3px 10px;
  }
  .depth-btn {
    padding: 6px 0;
    font-size: 12px;
  }
}

/* ─── Bouton micro ─── */
/* voiceBtn et colorblindBtn héritent du style .tab-btn */
#voiceBtn { width:auto; height:auto; border-radius:7px; border-width:1.5px; background:rgba(255,255,255,0.04); }
#voiceBtn.active { border-color:#38bdf8; box-shadow:0 0 16px rgba(56,189,248,.5); color:#38bdf8; animation:mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse {
  0%,100%{ box-shadow:0 0 10px rgba(56,189,248,.4); }
  50%    { box-shadow:0 0 22px rgba(56,189,248,.8); }
}
#colorblindBtn { border-radius:7px; border-width:1.5px; background:rgba(255,255,255,0.04); }
#colorblindBtn::before { content:''; }
#colorblindBtn.active { border-color:#22c55e; box-shadow:0 0 16px rgba(34,197,94,.5); color:#22c55e; }

@media (max-height: 820px) {
  #breadcrumb { font-size: 13px; padding: 3px 0 2px; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE / TABLETTE  (≤ 768px)
   Principe : bottom-nav, top-bar slim, panels scrollables
   Desktop : aucun changement
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Top bar allégé ── */
  #top-bar {
    padding: max(6px, env(safe-area-inset-top, 6px)) 10px 6px !important;
    grid-template-columns: auto auto;   /* back + group-sel seulement */
    gap: 8px;
  }
  /* Cacher les boutons utilitaires (micro, plein écran, daltonien) */
  #top-bar > div:last-child { display: none !important; }
  /* Cacher le nav (il passe en bas) */
  #top-bar #tabs { display: none !important; }
  /* Haut gauche : cacher l'ancien lien Accueil, afficher le bouton contextuel */
  #top-bar > a { display: none !important; }
  #mob-hdr-btn { display: flex !important; }
  /* Builder dev : toujours masqué sur mobile (CSS prioritaire sur JS) */
  #builder-entry-card { display: none !important; }

  /* ── Bottom navigation bar ── */
  #mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9990;
    background: linear-gradient(180deg, #07101e 0%, #040c18 100%);
    border-top: 1px solid #1e3050;
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5);
  }
  .mnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 10px;
    margin: 2px;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    color: #475569;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
  }
  .mnav-btn.active { background: rgba(255,255,255,.07); }
  .mnav-btn svg { flex-shrink: 0; }

  /* Couleurs actives bottom nav */
  .mnav-btn[data-tab="ranges"].active  { color: #06b6d4; }
  .mnav-btn[data-tab="trainer"].active { color: #3b82f6; }
  .mnav-btn[data-tab="theorie"].active { color: #a855f7; }
  .mnav-btn[data-tab="simulation"].active { color: #f97316; }
  .mnav-btn[data-tab="editor"].active  { color: #f59e0b; }
  .mnav-btn[data-tab="hh"].active      { color: #22d3ee; }
  .mnav-btn[data-tab="ranges"].active svg  { filter: drop-shadow(0 0 4px #06b6d4); }
  .mnav-btn[data-tab="trainer"].active svg { filter: drop-shadow(0 0 4px #3b82f6); }
  .mnav-btn[data-tab="theorie"].active svg { filter: drop-shadow(0 0 4px #a855f7); }
  .mnav-btn[data-tab="simulation"].active svg { filter: drop-shadow(0 0 4px #f97316); }
  .mnav-btn[data-tab="editor"].active svg  { filter: drop-shadow(0 0 4px #f59e0b); }
  .mnav-btn[data-tab="hh"].active svg      { filter: drop-shadow(0 0 4px #22d3ee); }

  /* ── PANELS : overflow-y auto pour permettre le scroll ── */
  #panel-ranges,
  #panel-theorie,
  #panel-simulation,
  #panel-hh {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Trainer garde son layout flex interne (iframe) */
  #panel-trainer {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  /* ── RANGES : catégories sticky + depth horizontal ── */
  #positions {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-bar2);
    padding: 6px 8px;
  }
  #cat-blocks {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 5px;
  }
  .cat-section { flex-shrink: 0; }
  .cat-tab { min-width: 70px; font-size: 11px; padding: 7px 8px; }
  .sit-btn { padding: 5px 10px; font-size: 12px; touch-action: manipulation; }

  #content { flex-direction: column !important; flex: none !important; height: auto !important; }

  #depth-buttons.depth-group {
    position: sticky;
    top: 0;
    z-index: 9;
    background: var(--bg-bar2);
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-right: none !important;
    border-bottom: 1px solid var(--border2);
    padding: 6px 8px !important;
    gap: 6px;
    max-height: none !important;
    height: auto !important;
    align-items: center;
  }
  .depth-sit-wrap {
    flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 4px !important; padding: 0 4px 0 0 !important;
    border-right: 1px solid var(--border2);
    flex-shrink: 0; justify-content: flex-start !important;
  }
  .depth-depths-wrap {
    flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 4px !important; padding: 0 !important;
    flex-shrink: 0; justify-content: flex-start !important;
  }
  .depth-btn {
    flex-shrink: 0;
    padding: 6px 12px !important; font-size: 12px !important;
    touch-action: manipulation; transform: none !important;
  }
  .depth-btn:hover, .depth-btn.active { transform: none !important; }

  #range-area { flex: none !important; height: auto !important; padding: 8px !important; overflow: visible !important; }
  #range-img { max-width: 100%; height: auto; touch-action: pinch-zoom; display: block; }
  #range-content { width: 100%; height: auto !important; overflow: visible !important; }
  #dynamic-range-container { width: 100% !important; height: auto !important; overflow: visible !important; }

  /* ── SIMULATION + THÉORIE : layout colonne, panel scrolle ── */
  /* Les sections sont déjà flex-direction:column dans le HTML */
  #sim-content,
  #theorie-tips { flex-direction: column !important; }
  /* body-row (dernier enfant) remplit la hauteur avec scroll interne */
  #sim-content > div:last-child,
  #theorie-tips > div:last-child {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Zone contenu (dernier enfant du body-row) : scroll interne */
  #sim-content > div:last-child > div:last-child,
  #theorie-tips > div:last-child > div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
  }
  /* Mini-sidebar sans éléments visibles → cachée sur mobile */
  #theorie-thematiques .mini-sidebar,
  #theorie-tips .mini-sidebar,
  #sim-content .mini-sidebar { display: none !important; }

  /* mini-sidebar → barre horizontale compacte */
  .mini-sidebar {
    width: 100% !important; min-width: 0 !important;
    flex-direction: row !important; align-items: center !important;
    gap: 8px !important; padding: 8px 12px !important;
    border-right: none !important; border-bottom: 1px solid #1e293b;
    height: auto !important; flex-shrink: 0 !important;
  }
  .mini-sidebar .mini-side-card { display: none !important; }

  /* Trainer : iframe prend la hauteur restante */
  #trainer-content {
    flex-direction: column !important;
    flex: 1 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  #trainer-iframe { min-width: 0 !important; width: 100% !important; flex: 1; }
  /* Bouton "← Retour" du trainer : largeur auto + aligné à gauche (au lieu de pleine largeur) */
  #trainer-sidebar { justify-content: flex-start !important; }
  #trainer-sidebar > button { width: auto !important; }

  /* ── SIMULATION formulaires ── */
  .sim-outer { padding: 10px !important; gap: 12px !important; flex-direction: column !important; }
  .sim-module { min-width: 0 !important; width: 100% !important; max-width: 100% !important; flex: none !important; }
  .sim-row { grid-template-columns: 1fr 100px 26px !important; gap: 4px !important; margin-bottom: 8px !important; }
  .sim-row label { font-size: 12px !important; }
  .sim-input, .sim-select { font-size: 13px !important; padding: 6px !important; }

  /* ── PANELS : overflow hidden pour nav fixe ── */
  #panel-home, #panel-trainer, #panel-theorie, #panel-ranges {
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  /* Simulation : scrollable pour que le 3ème module reste accessible sur petit écran */
  #panel-simulation {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* ── THÉORIE contenu ── */
  #theorie-probe > div > div { padding: 14px !important; }
  #theorie-probe table { font-size: 12px !important; }
  #theorie-probe h2 { font-size: 16px !important; }

  /* Thématiques : layout colonne (déjà en HTML) + body-row wrapper */
  #theorie-thematiques { flex-direction: column !important; }
  /* body-row (last-child) remplit la hauteur */
  #theorie-thematiques > div:last-child {
    flex: 1 !important; min-height: 0 !important; overflow: hidden !important;
  }
  /* Contenu (last-child du body-row) : scroll */
  #theorie-thematiques > div:last-child > div:last-child { overflow-y: auto; }
  /* div padding intérieur */
  #theorie-thematiques > div:last-child > div:last-child > div { padding: 14px 12px !important; }
  /* Grille des cartes */
  #theorie-thematiques > div:last-child > div:last-child > div > div {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 12px !important;
  }

  /* Bannière "PC uniquement" + masquage du contenu tracker : voir le bloc dédié
     plus bas (pointer: coarse) — on ne veut cibler QUE les vrais appareils tactiles
     (téléphone/tablette), PAS une fenêtre PC simplement réduite à la souris. */

  /* ══ GRILLE HOME : 6 cartes égales ══ */
  .home-menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
  }
  #panel-home > div {
    padding: 12px 12px calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  .menu-card {
    min-height: 0 !important;
    height: 100% !important;
    padding: 14px 10px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  .menu-card > svg { width: 28px !important; height: 28px !important; }
  .menu-card > div:first-of-type { font-size: 12px !important; letter-spacing: 1px !important; }
  .menu-card > div:nth-of-type(2) { font-size: 10px !important; line-height: 1.3; }
  .mobile-unavail-badge {
    display: block !important;
    font-size: 9px;
    color: #64748b;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 2px 8px;
    text-align: center;
    margin-top: 2px;
  }
  .menu-card-mobile-disabled { opacity: 0.4 !important; pointer-events: none !important; }

  /* ══ iOS Safari : dvh réel pour éviter le débordement ══ */
  body {
    height: 100dvh !important;
  }

  /* ══ SOUS-MENUS : cartes en 2 colonnes façon "petits carrés" (comme le menu principal) ══
     Avant : les cartes étaient en flex:1 et remplissaient tout l'écran (gros carrés).
     Maintenant : grille 2 colonnes, cartes carrées (aspect-ratio 1), alignées en haut. */
  #trainer-menu,
  #theorie-menu,
  #sim-menu,
  #ranges-menu {
    /* PAS de display:flex !important ici → le JS pilote display (flex pour afficher,
       none pour cacher quand on entre dans une section). On ne fait qu'ajouter le layout. */
    flex-direction: column !important;
    flex: 1 !important;
    padding: 12px 12px calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;     /* centre horizontalement la grille (max-width 440) */
    justify-content: center !important;  /* centre verticalement (milieu de la hauteur dispo) */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* Wrapper interne → grille 2 colonnes, alignée en haut (ne remplit plus la hauteur) */
  #trainer-menu > div,
  #theorie-menu > div:not(#builder-entry-card),
  #sim-menu > div,
  #ranges-menu > div {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 440px !important;     /* plafonne + centre la grille sur écran large */
    flex: 0 0 auto !important;
    align-self: center !important;   /* centre horizontalement dans le menu (flex column) */
    align-content: start !important;
    overflow: visible !important;
  }
  /* Cartes → petits carrés, top-alignées, ne s'étirent plus sur toute la hauteur */
  #trainer-menu > div > div,
  #theorie-menu > div > div,
  #sim-menu > div > div,
  #ranges-menu > div > div:not(#ranges-group-banner) {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    align-self: start !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Texte compact pour tenir dans les petits carrés */
  #trainer-menu > div > div > div,
  #theorie-menu > div > div > div,
  #sim-menu > div > div > div,
  #ranges-menu > div > div:not(#ranges-group-banner) > div {
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: .5px !important;
    margin: 0 !important;
  }
  #trainer-menu svg, #theorie-menu svg, #sim-menu svg, #ranges-menu svg {
    width: 28px !important; height: 28px !important;
  }
  /* Bannière Ranges : pleine largeur au-dessus de la grille (pas un carré) */
  #ranges-group-banner {
    grid-column: 1 / -1 !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;  /* padding inclus → ne déborde plus à droite */
    padding: 10px 14px !important;
  }
  #ranges-group-banner svg { width: 22px !important; height: 22px !important; }

  /* ── Bottom nav disabled ── */
  .mnav-btn-disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: default !important;
  }

  /* ══ RANGES VERSION ICÔNES : cartes de sélection en petits carrés (2 par ligne) ══
     La vue était en flex-row (desktop). Sur mobile : layout vertical, et les rangées
     de cartes (position / profil / situation) passent en 2 colonnes de carrés, même
     taille que les cartes du menu principal. On garde le display géré par le JS
     (le flux affiche/cache les rangées) → on n'utilise PAS display:grid, mais flex-wrap. */
  #ranges-icons-content {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* Masquer la mini-sidebar (barre "← Retour" redondante) : on remonte tout le contenu.
     Le retour se fait via "RANGES" en bas, "Menu principal" en haut, et le "← Retour" du fil d'Ariane. */
  #ranges-icons-content .mini-sidebar { display: none !important; }
  #ri-group-banner { display: flex !important; }
  #ri-scroll-container {
    padding: 12px 12px calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 16px !important;
    justify-content: flex-start !important;
  }
  #ri-selection {
    gap: 14px !important;
    width: 100% !important;
    max-width: 340px !important;   /* ↓ carrés plus petits (≈165px) — knob principal de la taille */
    margin: 0 auto !important;
  }
  /* Rangées : flex conservé (le JS togglle display none/flex) + retour à la ligne en 2 colonnes */
  #ri-row-pos,
  #ri-row-prof,
  #ri-row-sit {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    width: 100% !important;
  }
  /* Cartes → 2 par ligne, carrées, taille menu (au lieu de 180px fixe) */
  .ri-pos, .ri-prof, .ri-sit {
    flex: 0 0 calc(50% - 5px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
  }
  .ri-pos svg, .ri-prof svg, .ri-sit svg { width: 30px !important; height: 30px !important; }
  .ri-pos .ri-label, .ri-prof .ri-label, .ri-sit .ri-label { font-size: 12px !important; letter-spacing: .8px !important; }
  .ri-pos > div:last-child, .ri-prof > div:last-child, .ri-sit > div:last-child { font-size: 10px !important; line-height: 1.2 !important; }

  /* ── Niveau 2 (situations) : carrés PLUS PETITS (les choix), 2+ par ligne ── */
  #ri-row-sit .ri-sit { flex: 0 0 110px !important; }
  #ri-row-sit .ri-sit svg { width: 24px !important; height: 24px !important; }
  #ri-row-sit .ri-sit .ri-label { font-size: 10px !important; letter-spacing: .3px !important; }

  /* ── Après clic sur une position (niveau 1) ──
     Sélecteurs avec #ri-row-pos pour battre en spécificité les règles .ri-card-sel /
     .ri-card-out définies dans le <style> de app.html (chargé après style.css). */
  #ri-row-pos .ri-pos.ri-card-out { display: none !important; }   /* cacher les non-choisies */
  #ri-row-pos .ri-pos.ri-card-sel {                                /* choisie (parent) : PLUS GROSSE, centrée en haut */
    flex: 0 0 150px !important;
    width: 150px !important;
    transform: none !important;     /* annule le scale(1.07) desktop */
    opacity: 1 !important;
    margin: 0 auto !important;
  }
  #ri-row-pos .ri-pos.ri-card-sel svg { width: 34px !important; height: 34px !important; }
  #ri-row-pos .ri-pos.ri-card-sel .ri-label { font-size: 13px !important; }
  #ri-row-pos .ri-pos.ri-card-sel > div:last-child { display: none !important; }  /* masque le sous-titre */

  /* ── Range finale : boutons de profondeur compacts (prenaient trop de place) ── */
  #ri-depth-cards { gap: 5px !important; }
  .ri-depth-card {
    width: 44px !important;
    height: 31px !important;
    border-radius: 7px !important;
    gap: 0 !important;
  }
  .ri-depth-card > div:first-child { font-size: 11px !important; letter-spacing: .3px !important; }
  .ri-depth-card > div:last-child  { font-size: 7px !important; }
  /* Bouton "← Retour" (retour à la sélection) plus petit */
  #ri-stacks button { padding: 4px 10px !important; font-size: 11px !important; }
  /* Réduire les marges verticales pour gagner de la place */
  #ri-stacks { gap: 4px !important; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
  #ri-stacks > div:first-child { margin-bottom: 0 !important; gap: 10px !important; }
  #ri-range-display { width: 100% !important; }
  /* Légende des actions (FOLD / MR-x / ALLIN) compacte sous la range */
  #ri-range-display [data-legend-action] {
    width: 50px !important;
    height: 27px !important;
    font-size: 9px !important;
  }
}

/* Sur desktop : cacher les éléments mobile-only */
#mobile-nav { display: none; }
.mobile-pc-only { display: none; }
#mob-hdr-btn { outline: none !important; box-shadow: none !important; border: none !important; }
@media (min-width: 769px) { #mob-hdr-btn { display: none !important; } } /* desktop only */

/* ── Tracker "PC uniquement" : UNIQUEMENT sur vrais appareils tactiles ──────────
   On combine largeur ≤768px ET pointer:coarse (= écran tactile sans souris précise :
   smartphone / tablette). Ainsi une fenêtre PC réduite à la souris (pointer:fine)
   garde le tracker affiché, alors qu'un vrai téléphone voit la bannière. */
@media (max-width: 768px) and (pointer: coarse) {
  .mobile-pc-only { display: flex !important; }
  #tracker-menu,
  #tracker-betclic,
  #tracker-winamax,
  #tracker-fixed-sidebar { display: none !important; }
}

/* ── Tracker : éviter que la sidebar de filtres flottante (position:fixed, left:16px,
   largeur ~140px) chevauche le contenu centré (max-width:1280px).
   Au-delà de ~1620px il y a assez de marge à gauche → contenu centré normalement.
   En dessous, on décale le contenu vers la droite via un padding-left pour libérer
   la place de la sidebar. S'applique jusqu'aux fenêtres étroites sur PC (le tracker y
   reste affiché) ; sur vrai téléphone le contenu est masqué (bloc pointer:coarse). */
@media (max-width: 1620px) {
  #tracker-betclic,
  #tracker-winamax {
    padding-left: 172px;
    box-sizing: border-box;
  }
}

/* ── Landscape phone : trainer plein écran ── */
@media (max-width: 900px) and (orientation: landscape) {
  #top-bar { padding: max(3px, env(safe-area-inset-top, 3px)) max(10px, calc(env(safe-area-inset-right, 0px) + 6px)) 3px max(10px, calc(env(safe-area-inset-left, 0px) + 6px)); }
  #mobile-nav { padding: 2px max(6px, env(safe-area-inset-right, 0px)) calc(2px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  #panel-ranges, #panel-theorie, #panel-simulation, #panel-hh {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mnav-btn { padding: 3px 2px; font-size: 8px; }
}

/* --- Light mode : gradient clair pour le panel ranges --- */
body.light-mode #panel-ranges {
  background: radial-gradient(ellipse 130% 90% at 60% 10%,
    #e8edf5 0%,
    #dce3ee 45%,
    #d0d9e8 100%
  );
}
body.light-mode .cat-tab {
  color: rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}
body.light-mode .cat-tab:hover {
  color: rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.10);
}