/* ============================================================
   Stratfu — Mobile / responsive (≤ 1100px)
   À inclure APRÈS builder.css (et tous les autres CSS).

   Principe : au-dessus de 1100px, rien ne change (desktop scalé
   16:9 inchangé). En dessous, on neutralise le scaling et on
   remet la page en flux vertical natif, scrollable.

   Ce fichier est construit ONGLET PAR ONGLET. Brique 1 :
   socle + onglet « Récap du Build ».
   ============================================================ */

@media (max-width: 1100px) {

  /* ── SOCLE : neutralise le canevas 16:9 ── */
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
    /* Empêche le geste « page précédente/suivante » du navigateur (swipe bord)
       de sortir du build. La navigation horizontale est gérée par nous. */
    overscroll-behavior-x: none;
  }

  /* Le stage et la home-stage repassent en flux normal (plus de scale) */
  .stage,
  .home-stage {
    position: static !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* Conteneurs de vue : défilent, mais on respecte le display:none de la vue inactive */
  #viewBuilder, #viewHome {
    position: relative !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  /* La vue masquée par le routeur (style display:none inline) le reste */
  #viewBuilder[style*="display: none"], #viewBuilder[style*="display:none"],
  #viewHome[style*="display: none"], #viewHome[style*="display:none"] {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════════════
     (La barre d'onglets desktop est masquée en mobile — voir plus bas.
      La navigation se fait via .mob-tabnav + swipe.)
     ══════════════════════════════════════════════════════════ */

  /* ══════════════════════════════════════════════════════════
     ONGLET RÉCAP (#tab-equipement) — stats en haut repliables,
     puis le mannequin/build dessous.
     ══════════════════════════════════════════════════════════ */

  /* Les pages d'onglet : flux vertical pleine largeur */
  .tab-page { position: static !important; }
  .tab-page.active { display: block !important; }

  .tab-page .main {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px !important;
    box-sizing: border-box;
    gap: 12px;
  }

  /* Colonne de stats → barre repliable en haut */
  .stats-fixed-col {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    order: -1;                 /* toujours en premier */
  }

  /* Le stats-scroll n'a plus de hauteur fixe en mobile */
  .stats-scroll {
    max-height: none !important;
    height: auto !important;
  }

  /* Colonne centrale (mannequin / build) : pleine largeur */
  .center-col,
  .panel-center {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Colonne de droite éventuelle (récap) : pleine largeur, sous le centre */
  .panel-right-col {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Deux sous-colonnes du builder → empilées */
  .builder-col-left,
  .builder-col-right {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 1100px) {
  /* ── Header d'origine masqué : tout passe dans le burger ── */
  .tabs-bar .account { display: none !important; }

  /* Phrase légale masquée en mobile (gêne le scroll) */
  .legal-disclaimer { display: none !important; }

  /* La barre d'onglets desktop entière est masquée : remplacée par la
     barre de navigation mobile (flèches + nom d'onglet) injectée en JS. */
  .tabs-bar { display: none !important; }

  /* ── Barre de navigation d'onglets mobile (flèches ← nom →) ── */
  .mob-tabnav {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(10,12,16,0.96); backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .mob-tabnav-arrow {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
    color: #cbd5e1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: .12s;
  }
  .mob-tabnav-arrow:hover { background: rgba(255,255,255,0.10); color: #fff; }
  .mob-tabnav-arrow:disabled { opacity: .3; pointer-events: none; }
  .mob-tabnav-arrow svg { width: 20px; height: 20px; }
  .mob-tabnav-label {
    flex: 1; text-align: center; font-family: 'Uncial Antiqua', cursive;
    font-size: 17px; color: #f0c040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mob-tabnav-dots { display: flex; gap: 5px; justify-content: center; padding: 6px 0 2px; }
  .mob-tabnav-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: .15s; }
  .mob-tabnav-dot.on { background: #f0c040; width: 18px; border-radius: 3px; }
}

  /* ── Bouton burger flottant (bas-gauche) ── */
  .mob-burger-btn {
    position: fixed; left: 14px; bottom: 14px; z-index: 900;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(160deg, #1a1d26, #0e1014);
    border: 2px solid rgba(240,192,64,0.55);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 14px rgba(240,192,64,0.25);
    cursor: pointer; padding: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s;
  }
  .mob-burger-btn img { width: 74%; height: 74%; object-fit: contain; }
  .mob-burger-btn:active { transform: scale(0.94); }
  .mob-burger-btn.active { box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 20px rgba(240,192,64,0.5); }

  /* ── Fond sombre ── */
  .mob-burger-backdrop {
    position: fixed; inset: 0; z-index: 890;
    background: rgba(6,7,10,0.6); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .mob-burger-backdrop.open { opacity: 1; pointer-events: auto; }

  /* ── Panneau (glisse depuis le bas-gauche) ── */
  .mob-burger-panel {
    position: fixed; left: 14px; bottom: 80px; z-index: 901;
    width: min(260px, calc(100vw - 28px));
    background: linear-gradient(180deg, #14161d, #0e1014);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    overflow: hidden; transform-origin: bottom left;
    opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
    transition: opacity .18s, transform .18s;
    font-family: 'Rajdhani', sans-serif;
  }
  .mob-burger-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

  .mob-burger-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .mob-burger-logo { width: 30px; height: 30px; object-fit: contain; }
  .mob-burger-title {
    font-family: 'Uncial Antiqua', cursive; font-size: 16px; color: #f0c040;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .mob-burger-list { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
  .mob-burger-item {
    text-align: left; padding: 12px 14px; border-radius: 10px;
    background: transparent; border: none; color: #e8e8e0;
    font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px;
    cursor: pointer; transition: background .12s;
  }
  .mob-burger-item:hover, .mob-burger-item:active { background: rgba(255,255,255,0.07); }
  .mob-burger-item.danger { color: #ef6b6b; }
  .mob-burger-item.danger:hover { background: rgba(239,68,68,0.12); }
  .mob-burger-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 8px; }
}

/* Le burger n'existe jamais en desktop */
@media (min-width: 1101px) {
  .mob-burger-btn, .mob-burger-panel, .mob-burger-backdrop { display: none !important; }
}

@media (max-width: 1100px) {
  /* La colonne de stats inline dans chaque onglet est masquée :
     les stats s'affichent via la FICHE descendante (bouton flottant). */
  .stats-fixed-col { display: none !important; }

  /* ── Bouton flottant « Stats » (bas-droite) ── */
  .mob-stats-btn {
    position: fixed; right: 14px; bottom: 14px; z-index: 900;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 12px 16px; border-radius: 28px;
    background: linear-gradient(160deg, #1a1d26, #0e1014);
    border: 2px solid rgba(240,192,64,0.55);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 14px rgba(240,192,64,0.22);
    color: #f0c040; cursor: pointer;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: .4px;
    transition: transform .15s;
  }
  .mob-stats-btn svg { width: 18px; height: 18px; }
  .mob-stats-btn:active { transform: scale(0.95); }
  .mob-stats-btn.active { background: linear-gradient(160deg, #f0c85a, #d8a838); color: #2a1e05; border-color: #f0c040; }
  .mob-stats-btn.active svg { stroke: #2a1e05; }

  .mob-stats-backdrop {
    position: fixed; inset: 0; z-index: 940;
    background: rgba(6,7,10,0.6); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .mob-stats-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Fiche qui DESCEND depuis le haut */
  .mob-stats-sheet {
    position: fixed; top: 0; left: 0; right: 0; z-index: 941;
    max-height: 85vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #14161d, #0e1014);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    transform: translateY(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .mob-stats-sheet.open { transform: translateY(0); }
  .mob-stats-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
    font-family: 'Uncial Antiqua', cursive; font-size: 16px; color: #f0c040;
    flex-shrink: 0;
  }
  .mob-stats-close {
    width: 32px; height: 32px; border-radius: 8px; background: transparent;
    border: 1px solid rgba(255,255,255,0.12); color: rgba(200,200,190,0.6);
    font-size: 17px; cursor: pointer;
  }
  .mob-stats-close:active { background: rgba(255,255,255,0.08); }
  .mob-stats-sheet-body { overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
  /* Le panel-stats déplacé reprend toute la largeur dans la fiche */
  .mob-stats-sheet-body .panel-stats { max-height: none !important; height: auto !important; width: 100% !important; }
  .mob-stats-sheet-body .stats-scroll { max-height: none !important; height: auto !important; }
}

@media (min-width: 1101px) {
  .mob-stats-btn, .mob-stats-sheet, .mob-stats-backdrop,
  .mob-tabnav-wrap { display: none !important; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     FICHE STATS EN PORTRAIT — reformatage lisible
     Tout ce qui suit ne cible QUE le panneau stats déplacé dans
     la fiche mobile (.mob-stats-sheet-body). Le desktop est intact.
     ══════════════════════════════════════════════════════════ */
  .mob-stats-sheet-body { font-size: 14px; }

  /* Bloc héros (PV / PA PM PW) */
  .mob-stats-sheet-body .stats-hero { padding: 8px 4px; }
  .mob-stats-sheet-body .hero-vita { justify-content: center; margin-bottom: 8px; }
  .mob-stats-sheet-body .hero-row {
    display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%;
  }
  .mob-stats-sheet-body .stat-hero-item {
    flex: none !important; justify-content: center;
    background: rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 4px;
  }

  /* Totaux Maîtrises/Rés : passent sous le titre, sur une ligne à part, wrap */
  .mob-stats-sheet-body .mr-header {
    flex-direction: column !important; align-items: center !important; gap: 8px;
  }
  .mob-stats-sheet-body .mr-totals {
    display: flex !important; flex-wrap: wrap; justify-content: center !important;
    gap: 8px; width: 100%; margin-left: 0 !important; margin-right: 0 !important;
  }
  .mob-stats-sheet-body .elem-total {
    flex: 0 0 auto; background: rgba(255,255,255,0.05);
    border-radius: 8px; padding: 4px 10px;
  }

  /* Lignes d'éléments (Maîtrise / Résistance) : 4 en grille égale, valeurs non coupées */
  .mob-stats-sheet-body .elem-line {
    display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px;
  }
  .mob-stats-sheet-body .elem-float {
    flex-direction: column !important; align-items: center; gap: 2px;
    min-width: 0; padding: 6px 2px; text-align: center;
    background: rgba(255,255,255,0.03); border-radius: 8px;
  }
  .mob-stats-sheet-body .elem-float .ec-val { font-size: 15px; }
  .mob-stats-sheet-body .elem-float .res-raw { font-size: 11px; opacity: .8; }
  .mob-stats-sheet-body .elem-val-stack,
  .mob-stats-sheet-body .res-stack { align-items: center; }
  /* Les badges/bonus conditionnels passent dessous, petits */
  .mob-stats-sheet-body .cond-bonus { font-size: 10px; }

  /* Le titre d'ordre des maîtrises (les flèches ›) peut wrap */
  .mob-stats-sheet-body .elem-line-title { flex-wrap: wrap; gap: 6px; }
  .mob-stats-sheet-body .order-icons { flex-wrap: wrap; }

  /* Combat / Secondaire : UNE colonne (au lieu de 2 écrasées) */
  .mob-stats-sheet-body .stats-2col {
    display: flex !important; flex-direction: column;
    grid-template-columns: 1fr !important; gap: 4px 0 !important;
  }

  /* ── Réordonne UNIQUEMENT le bloc « Secondaire » sur mobile ──
     Ordre voulu : maîtrises → Do. Indirects → résistances → armure.
     Le bloc « Combat » (autre .stats-2col) n'est pas concerné : ses
     pills n'ont pas ces clés, donc order par défaut (0) = ordre HTML. */
  .mob-stats-sheet-body [data-mastpill="maitrise_critique"] { order: 1; }
  .mob-stats-sheet-body [data-mastpill="maitrise_dos"]      { order: 2; }
  .mob-stats-sheet-body [data-mastpill="maitrise_melee"]    { order: 3; }
  .mob-stats-sheet-body [data-mastpill="maitrise_distance"] { order: 4; }
  .mob-stats-sheet-body [data-mastpill="maitrise_soin"]     { order: 5; }
  .mob-stats-sheet-body [data-mastpill="maitrise_berserk"]  { order: 6; }
  .mob-stats-sheet-body .stat-pill:has(input[data-stat="di_indirect_pct"])    { order: 7; }
  .mob-stats-sheet-body .stat-pill:has(input[data-stat="resistance_critique"]){ order: 8; }
  .mob-stats-sheet-body .stat-pill:has(input[data-stat="resistance_dos"])     { order: 9; }
  .mob-stats-sheet-body .stat-pill:has(input[data-stat="armure_donnee_pct"])  { order: 10; }
  .mob-stats-sheet-body .stat-pill:has(input[data-stat="armure_recue_pct"])   { order: 11; }
  /* Chaque ligne stat : icône + label à gauche, valeur à droite, propre */
  .mob-stats-sheet-body .stat-pill {
    display: flex !important; align-items: center;
    gap: 8px; padding: 9px 12px;
    background: rgba(255,255,255,0.04); border-radius: 8px;
  }
  .mob-stats-sheet-body .stat-pill .stat-name { flex: 1; min-width: 0; }
  .mob-stats-sheet-body .stat-pill .stat-val { margin-left: auto; font-weight: 700; white-space: nowrap; }

  /* Titres de section centrés, un peu d'air */
  .mob-stats-sheet-body .stats-section-title-center,
  .mob-stats-sheet-body .mr-title { margin: 14px 0 8px; display: block; text-align: center; }

  /* Cartes de blocs élémentaires : padding réduit */
  .mob-stats-sheet-body .elem-block-card { padding: 10px 8px; margin-bottom: 8px; }

  /* Inputs manuels (±) plus compacts et ne débordent pas */
  .mob-stats-sheet-body .stat-manual { max-width: 42px; }
}

@media (max-width: 1100px) {
  /* ── Boutons nourriture / visibilité : sous la card héros (pas sur les PV) ── */
  .mob-stats-sheet-body .hero-controls {
    position: static !important;
    order: 99;                    /* après le contenu du héros */
    padding: 8px 4px 0 !important;
    justify-content: center;
    flex-wrap: wrap; gap: 8px;
  }
  /* Le hero doit empiler ses enfants pour que order fonctionne */
  .mob-stats-sheet-body .stats-hero {
    display: flex !important; flex-direction: column;
  }
  .mob-stats-sheet-body .hero-vita { order: 1; }
  .mob-stats-sheet-body .hero-row  { order: 2; }
  .mob-stats-sheet-body .hero-controls .food-buttons { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════
   TOOLTIPS MOBILE — centrés avec fond sombre léger
   ══════════════════════════════════════════════════════════ */
.mob-tip-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(6,7,10,0.35);   /* voile léger, sans flou : on veut voir le deck/stuff derrière */
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.mob-tip-overlay.open { opacity: 1; pointer-events: auto; }

/* Le tooltip centré (surcharge le positionnement inline en mobile) */
#drop-tooltip.mob-tip-centered,
.mob-tip-centered {
  position: fixed !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Croix de fermeture dans le tooltip centré */
.mob-tip-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #e8e8e0; font-size: 13px; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.mob-tip-close:active { background: rgba(255,255,255,0.18); }

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ONGLET RÉCAP — mannequin + slots réduits pour tenir en portrait
     ══════════════════════════════════════════════════════════ */

  /* Slots plus petits + gap réduit (variables réutilisées par la croix) */
  #tab-equipement {
    --slot-sz: 52px;
    --slot-gap: 7px;
  }

  /* Le panneau central prend toute la largeur et centre la croix */
  #tab-equipement .center-col,
  #tab-equipement .panel-center {
    width: 100% !important; max-width: 100% !important;
    display: flex; flex-direction: column; align-items: center;
    padding: 0 !important;
  }
  #tab-equipement .builder-zone {
    width: 100% !important; max-width: 100% !important;
    align-items: center;
  }
  #tab-equipement .builder-row {
    justify-content: center;
    width: 100%;
  }

  /* Perso central réduit pour laisser la place aux slots latéraux */
  #tab-equipement .builder-perso {
    width: 150px !important;
    height: calc(4 * var(--slot-sz) + 3 * var(--slot-gap)) !important;
    flex-shrink: 1; min-width: 0;
  }
  #tab-equipement .builder-perso img { max-width: 100%; height: auto; }

  /* Colonnes latérales : largeur auto, ne débordent plus */
  #tab-equipement .builder-col-left,
  #tab-equipement .builder-col-right {
    width: auto !important; flex-shrink: 0;
  }

  /* Slots : la taille suit --slot-sz */
  #tab-equipement .slot-item {
    width: var(--slot-sz) !important;
    height: var(--slot-sz) !important;
  }

  /* Ligne haut (coiffe / info / cape) et bas (armes) centrées et compactes */
  #tab-equipement .builder-row.row-top,
  #tab-equipement .builder-row.row-bottom {
    gap: var(--slot-gap);
  }
  #tab-equipement .build-info { flex: 0 1 auto; min-width: 0; }
  #tab-equipement .row-top .builder-spacer { width: 150px !important; }

  /* La zone builder ne force plus de largeur mini */
  #tab-equipement .panel-center { min-width: 0 !important; }
}

@media (max-width: 1100px) {
  /* Barre de variantes remontée au-dessus du mannequin */
  .variants-bar-mobile-top {
    display: flex !important; flex-wrap: wrap; justify-content: center;
    gap: 6px; width: 100%; padding: 4px 8px 10px; margin: 0 auto;
    order: -1;
  }
  .variants-bar-mobile-top .variant-pill,
  .variants-bar-mobile-top .variant-add {
    font-size: 12px; padding: 6px 12px;
  }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     RÉSISTANCES ALÉATOIRES — déclencheur repliable (mobile)
     ══════════════════════════════════════════════════════════ */

  /* Picker masqué par défaut (ne déborde plus). Le slot reste positionnable. */
  .slot-item { position: relative; }
  .slot-item .slot-res-picker {
    display: none !important;
  }
  /* Ouvert : réaffiché avec une petite animation */
  .slot-item .slot-res-picker.mob-res-open {
    display: flex !important;
    z-index: 60;
    animation: mobResPop .16s ease-out;
  }
  @keyframes mobResPop {
    from { opacity: 0; transform: translateY(-50%) scale(0.8); }
    to   { opacity: 1; }
  }
  /* Les variantes below/above utilisent translateX pour le centrage */
  .slot-item .slot-res-picker.rp-below.mob-res-open,
  .slot-item .slot-res-picker.rp-above.mob-res-open {
    animation: mobResPopX .16s ease-out;
  }
  @keyframes mobResPopX {
    from { opacity: 0; transform: translateX(-50%) scale(0.8); }
    to   { opacity: 1; }
  }

  /* ── Déclencheur (icône résistance élémentaire) ── */
  .mob-res-trigger {
    position: absolute; z-index: 55;
    width: 22px; height: 22px; padding: 2px;
    border-radius: 50%;
    background: linear-gradient(160deg, #1a1d26, #0e1014);
    border: 1.5px solid rgba(240,192,64,0.6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .mob-res-trigger img { width: 100%; height: 100%; object-fit: contain; }
  .mob-res-trigger:active { transform: scale(0.9); }

  /* Position du déclencheur : nettement à l'extérieur du slot */
  .mob-res-trigger.mt-rp-right { right: -30px; top: 50%; transform: translateY(-50%); }
  .mob-res-trigger.mt-rp-left  { left: -30px;  top: 50%; transform: translateY(-50%); }
  .mob-res-trigger.mt-rp-below { bottom: -30px; left: 50%; transform: translateX(-50%); }
  .mob-res-trigger.mt-rp-above { top: -30px;    left: 50%; transform: translateX(-50%); }
}

@media (min-width: 1101px) {
  .mob-res-trigger { display: none !important; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ONGLET ÉQUIPEMENT (#tab-recherche)
     ══════════════════════════════════════════════════════════ */

  /* Layout général : tout empilé, pleine largeur */
  #tab-recherche .recherche-wrap,
  #tab-recherche .recherche-top,
  #tab-recherche .recherche-cols {
    display: flex; flex-direction: column; width: 100% !important;
    max-width: 100% !important; gap: 12px;
  }

  /* Les onglets Statistique/Comparateur de gauche : masqués en mobile
     (le comparateur est ignoré, les stats sont dans l'onglet Stats). */
  #tab-recherche .equip-left-tabs,
  #tab-recherche .equip-left-col { display: none !important; }

  /* Rangée de slots : centrée, wrap, pleine largeur */
  #tab-recherche .recherche-slots {
    display: flex !important; flex-wrap: wrap; justify-content: center;
    gap: 8px; width: 100% !important; padding: 4px 0;
  }

  /* La card de recherche prend toute la largeur */
  #tab-recherche .item-modal-inline,
  #tab-recherche .item-modal-box,
  #tab-recherche .recherche-box {
    width: 100% !important; max-width: 100% !important;
  }

  /* Barre de niveau : contenue, ne déborde plus */
  #tab-recherche .modal-filters-row {
    flex-wrap: wrap; gap: 10px; justify-content: center;
  }
  #tab-recherche .level-range {
    width: 100%; justify-content: center; box-sizing: border-box;
  }
  #tab-recherche .level-sliders {
    width: auto !important; flex: 1; min-width: 0; max-width: 100%;
  }

  /* Corps : résultats + filtres empilés */
  #tab-recherche .modal-body {
    flex-direction: column !important; width: 100%;
  }
  #tab-recherche .results-area,
  #tab-recherche .stat-filter-col {
    width: 100% !important; max-width: 100% !important;
  }

  /* Comparateur masqué partout en mobile */
  #tab-recherche .compare-check,
  #tab-recherche #comparePanel,
  #tab-recherche .equip-left-pane#equipLeftCompare { display: none !important; }
}

@media (max-width: 1100px) {
  /* ── Switch Maîtrises / Filtre par statistique (mobile) ── */
  .sf-mobile-switch {
    display: flex; gap: 6px; width: 100%; margin-bottom: 12px;
  }
  .sf-sw-btn {
    flex: 1; padding: 10px 8px; border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
    color: rgba(200,200,190,0.6);
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .3px; transition: .15s;
  }
  .sf-sw-btn.active {
    background: rgba(240,192,64,0.15); border-color: rgba(240,192,64,0.5); color: #f0c040;
  }

  /* Sections masquées selon le mode.
     Maîtrises = titre "Maîtrises affichées" + rangées .sf-mast-* + groupe + dénouement.
     Stat = .sf-stat-head + .sf-stat-wrap. */
  #statFilterList .sf-section-title:not(.sf-stat-head),
  #statFilterList .sf-mast-top-row,
  #statFilterList .sf-mast-elem-row,
  #statFilterList .sf-mast-group,
  #statFilterList .sf-denou-row {
    display: none;
  }
  #statFilterList .sf-stat-head,
  #statFilterList .sf-stat-wrap { display: none; }

  /* Mode maîtrises affiché */
  #statFilterList.sf-show-mast .sf-section-title:not(.sf-stat-head),
  #statFilterList.sf-show-mast .sf-mast-top-row,
  #statFilterList.sf-show-mast .sf-mast-elem-row,
  #statFilterList.sf-show-mast .sf-mast-group,
  #statFilterList.sf-show-mast .sf-denou-row { display: ''; }
  #statFilterList.sf-show-mast .sf-mast-top-row,
  #statFilterList.sf-show-mast .sf-mast-elem-row { display: flex; }
  #statFilterList.sf-show-mast .sf-mast-group { display: grid; }
  #statFilterList.sf-show-mast .sf-section-title:not(.sf-stat-head),
  #statFilterList.sf-show-mast .sf-denou-row { display: block; }

  /* Mode filtre par statistique affiché */
  #statFilterList.sf-show-stat .sf-stat-head { display: flex; }
  #statFilterList.sf-show-stat .sf-stat-wrap { display: block; }

  /* Centrage du contenu filtre */
  #statFilterList { width: 100%; }
  #tab-recherche .sort-pills { justify-content: center; }
}

@media (max-width: 1100px) {
  /* ── Résultats sous les filtres, en grille, sans scroll horizontal ── */
  #tab-recherche .modal-body { display: flex; flex-direction: column; }
  /* Filtres (statFilterCol) au-dessus, résultats en dessous */
  #tab-recherche .stat-filter-col { order: 1; }
  #tab-recherche .results-area   { order: 2; }

  /* Grille compacte ADAPTATIVE : 3 colonnes si l'écran le permet, sinon 2
     automatiquement (auto-fill). Évite le débordement sur petits écrans. */
  #tab-recherche .results-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
    gap: 8px !important;
    overflow-x: hidden !important;
  }
  #tab-recherche .results-grid-detail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow-x: hidden !important;
  }
  /* Les cartes ne débordent pas */
  #tab-recherche .results-list .mc-card,
  #tab-recherche .results-list .mc-thumb,
  #tab-recherche .results-list .mc-thumb img {
    max-width: 100%; box-sizing: border-box;
  }
  #tab-recherche .results-grid-compact .mc-thumb img { width: 100%; height: auto; }
}

/* ── Boutons Équiper / Annuler dans le tooltip mobile ── */
.mob-tip-actions {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mob-tip-actions button {
  flex: 1; padding: 10px; border-radius: 9px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .3px; transition: .15s;
}
.mob-tip-cancel {
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(200,200,190,0.7);
}
.mob-tip-cancel:active { background: rgba(255,255,255,0.08); }
.mob-tip-equip {
  background: linear-gradient(180deg, #f0c85a, #e0a838); border: none; color: #2a1e05;
  box-shadow: 0 4px 14px rgba(240,192,64,0.3);
}
.mob-tip-equip:active { filter: brightness(1.08); }

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ONGLET ENCHANTEMENT (#tab-enchantement) — layout des lignes
     Icône objet + 4 châsses + nom sublimation (croppé, gemme visible)
     ══════════════════════════════════════════════════════════ */

  /* Layout général empilé — neutralise les hauteurs fixes desktop
     (.ench-right = 956px fixe, .ench-chasses-card = flex + overflow hidden)
     qui créaient un grand vide et écrasaient les lignes. */
  #tab-enchantement .ench-main {
    flex-direction: column !important; height: auto !important;
    padding: 10px !important; gap: 12px;
  }
  #tab-enchantement .ench-right {
    height: auto !important; min-height: 0 !important; width: 100% !important;
    gap: 12px;
  }
  #tab-enchantement .ench-chasses-card {
    flex: none !important; height: auto !important; min-height: 0 !important;
    overflow: visible !important; padding: 10px !important;
  }
  #tab-enchantement .ench-chasses-body {
    flex-direction: column !important; gap: 12px; height: auto !important;
  }
  #tab-enchantement .ench-objets-wrap,
  #tab-enchantement .ench-objets {
    width: 100% !important; height: auto !important;
  }

  /* La card de sélection des sublimations (recherche + grille) est masquée
     par défaut : elle deviendra une modale ouverte via le logo bas-droite. */
  #tab-enchantement .ench-fusion-card { display: none !important; }

  /* La colonne stats commune est gérée par le bouton Stats flottant */
  #tab-enchantement .ench-stats-col-wrap.stats-fixed-col { display: none !important; }

  /* Ligne d'objet compacte */
  #tab-enchantement .ench-objet-row {
    height: auto !important; gap: 6px; width: 100%;
  }

  /* Pill objet réduite : icône + petit nom */
  #tab-enchantement .ench-objet-pill {
    width: auto !important; flex-shrink: 0;
    height: 46px; padding: 0 6px; gap: 6px;
  }
  #tab-enchantement .ench-objet-slot { width: 34px !important; height: 34px !important; }
  /* Le nom du slot (Coiffe, Cape…) masqué en mobile pour gagner la place */
  #tab-enchantement .ench-objet-name { display: none !important; }

  /* Châsses réduites */
  #tab-enchantement .ench-chasses { gap: 3px; }
  #tab-enchantement .ench-chasse { width: 30px !important; height: 30px !important; }

  /* Nom de sublimation : prend le reste, croppé si trop long */
  #tab-enchantement .ench-objet-subli { flex: 1; min-width: 0; }
  #tab-enchantement .ench-osub {
    gap: 5px; padding: 4px 6px; min-width: 0;
  }
  #tab-enchantement .ench-osub-logo,
  #tab-enchantement .ench-osub-logowrap { width: 26px; height: 26px; flex-shrink: 0; }
  #tab-enchantement .ench-osub-nom {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px;
  }
  /* La séquence de couleurs (gemmes) reste visible juste après le nom */
  #tab-enchantement .ench-osub-seq { flex-shrink: 0; display: flex; gap: 2px; }
  #tab-enchantement .ench-osub-seq-ico { width: 14px; height: 14px; }
  /* Les pills de niveaux alternatifs masquées en mobile (gain de place) */
  #tab-enchantement .ench-osub-pills { display: none !important; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ENCHANTEMENT — bloc du bas : sélecteur de stats réorganisé
     Maîtrises + autres en 2 colonnes, résistances en 2×2.
     ══════════════════════════════════════════════════════════ */
  #tab-enchantement .ench-stats-col {
    width: 100% !important; height: auto !important;
    padding-bottom: 90px;   /* évite que le bouton Stats cache la dernière ligne */
  }
  #tab-enchantement .ench-stats-list,
  #tab-enchantement .ench-stats-scroll {
    height: auto !important; overflow: visible !important;
  }

  /* Les 3 groupes : maîtrises (col gauche) | autres + résistances (col droite) */
  #tab-enchantement .ench-stats-scroll {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    align-items: start;
  }
  /* Groupe 1 (maîtrises) : col gauche, occupe plusieurs rangées */
  #tab-enchantement .ench-stat-group:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  /* Groupe 2 (autres : tacle/esquive/vie/initiative) : col droite en haut */
  #tab-enchantement .ench-stat-group:nth-child(2) { grid-column: 2; grid-row: 1; }
  /* Groupe 3 (résistances) : col droite, sous le groupe 2, en 2×2 compact */
  #tab-enchantement .ench-stat-group:nth-child(3) {
    grid-column: 2; grid-row: 2;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 4px;
  }
  /* Lignes de résistance ultra-compactes pour tenir en 2×2 */
  #tab-enchantement .ench-stat-group:nth-child(3) .ench-stat-row {
    padding: 6px 6px; font-size: 11px;
  }
  #tab-enchantement .ench-stat-group:nth-child(3) .ench-stat-name { font-size: 10.5px; }
  #tab-enchantement .ench-stat-group:nth-child(3) .ench-stat-ico { width: 15px; height: 15px; }

  /* Lignes de stat compactes — SANS écraser le fond coloré actif/hover */
  #tab-enchantement .ench-stat-row {
    padding: 8px 10px; font-size: 13px; border-radius: 8px;
    gap: 6px;
  }
  #tab-enchantement .ench-stat-name { font-size: 12.5px; }
  /* On garde la couleur de châsse (.ench-stat-color), on masque seulement
     les slots doublés (.ench-stat-dbl) pour gagner de la largeur */
  #tab-enchantement .ench-stat-dbl { display: none !important; }
  /* Icône de gauche réduite */
  #tab-enchantement .ench-stat-ico { width: 18px; height: 18px; }
}

@media (max-width: 1100px) {
  /* La card fusion réapparaît quand elle est dans la modale */
  .ench-fusion-card.ench-fusion-in-modal {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; height: auto !important; padding: 0 !important;
    background: transparent !important; border: none !important;
  }
  .ench-fusion-in-modal .ench-fusion-left,
  .ench-fusion-in-modal .ench-fusion-right { width: 100% !important; }
  .ench-fusion-in-modal .ench-card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── Bouton logo Sublimations (bas-droite, à gauche du bouton Stats) ── */
  .mob-subli-btn {
    position: fixed; right: 14px; bottom: 70px; z-index: 900;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(160deg, #1a1d26, #0e1014);
    border: 2px solid rgba(168,110,200,0.6);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 14px rgba(168,110,200,0.25);
    cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
  }
  .mob-subli-btn img { width: 100%; height: 100%; object-fit: contain; }
  .mob-subli-btn:active { transform: scale(0.94); }
  .mob-subli-btn.active { border-color: #a86ec8; box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 20px rgba(168,110,200,0.5); }

  .mob-subli-backdrop {
    position: fixed; inset: 0; z-index: 940;
    background: rgba(6,7,10,0.6); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .mob-subli-backdrop.open { opacity: 1; pointer-events: auto; }

  .mob-subli-sheet {
    position: fixed; top: 0; left: 0; right: 0; z-index: 941;
    max-height: 88vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #14161d, #0e1014);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    transform: translateY(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .mob-subli-sheet.open { transform: translateY(0); }
  .mob-subli-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
    font-family: 'Uncial Antiqua', cursive; font-size: 16px; color: #a86ec8;
    flex-shrink: 0;
  }
  .mob-subli-close {
    width: 32px; height: 32px; border-radius: 8px; background: transparent;
    border: 1px solid rgba(255,255,255,0.12); color: rgba(200,200,190,0.6);
    font-size: 17px; cursor: pointer;
  }
  .mob-subli-sheet-body { overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
}

@media (min-width: 1101px) {
  .mob-subli-btn, .mob-subli-sheet, .mob-subli-backdrop { display: none !important; }
}

@media (max-width: 1100px) {
  /* ── Barre de sublimations spéciales équipées : DANS la card, sous les stats ── */
  .mob-ench-specials {
    display: flex; gap: 8px; align-items: center; justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .mob-ench-spec {
    width: 44px; height: 44px; border-radius: 50%; padding: 0;
    background: linear-gradient(160deg, #1a1d26, #0e1014);
    border: 2px solid rgba(255,255,255,0.25);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .mob-ench-spec.epique  { border-color: #c37ca7; }
  .mob-ench-spec.relique { border-color: #b194d2; }
  .mob-ench-spec img {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px; object-fit: contain;
  }
  .mob-ench-spec:active { transform: scale(0.92); }
}

@media (min-width: 1101px) {
  .mob-ench-specials { display: none !important; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     MODALE SÉLECTION SUBLIS (bottom-sheet) — brique modale
     1) Les gemmes de niveau disparaissent des cartes : le choix se
        fait dans le tooltip. La rareté globale suffit sur la carte.
     2) & 3) Tooltip centré : rangée de gemmes en haut + boutons.
     ══════════════════════════════════════════════════════════ */

  /* (1) Cartes de la sheet : plus de gemmes de niveau ni de séquence-pills */
  .mob-subli-sheet .ench-card-gem,
  .mob-subli-sheet .ench-subli-pills { display: none !important; }

  /* (3) Rangée de gemmes DANS le tooltip (au-dessus) */
  #ench-subli-tooltip .mob-subli-gems {
    display: flex; gap: 8px; justify-content: center;
    margin: 0 0 10px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  #ench-subli-tooltip .mob-subli-gem {
    width: 40px; height: 40px; border-radius: 9px; padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.15);
    cursor: pointer; transition: .12s;
    display: flex; align-items: center; justify-content: center;
  }
  #ench-subli-tooltip .mob-subli-gem img { width: 100%; height: 100%; object-fit: contain; }
  #ench-subli-tooltip .mob-subli-gem.sel {
    border-color: #f0c040; box-shadow: 0 0 0 2px rgba(240,192,64,0.25);
    background: rgba(240,192,64,0.10);
  }

  /* (2) Boutons Annuler / Sélectionner (en bas du tooltip) */
  #ench-subli-tooltip .mob-subli-actions {
    display: flex; gap: 10px; margin-top: 12px;
    padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12);
  }
  #ench-subli-tooltip .mob-subli-cancel,
  #ench-subli-tooltip .mob-subli-pick {
    flex: 1; padding: 11px; border-radius: 10px; cursor: pointer;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
  }
  #ench-subli-tooltip .mob-subli-cancel {
    flex: 1; background: transparent; color: rgba(220,220,220,0.7);
    border: 1px solid rgba(255,255,255,0.18);
  }
  #ench-subli-tooltip .mob-subli-pick {
    flex: 2; border: none; color: #2a1e05;
    background: linear-gradient(180deg, #f0c85a, #e0a838);
    box-shadow: 0 4px 16px rgba(240,192,64,0.28);
  }
  /* Le tooltip centré doit accepter les taps sur ses boutons */
  #ench-subli-tooltip.mob-tip-centered { pointer-events: auto; }
}

@media (max-width: 1100px) {
  /* Croix « désélectionner la subli armée » — au-dessus du bouton logo */
  .mob-subli-clear {
    position: fixed; right: 14px; bottom: 128px; z-index: 901;
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(160deg, #2a1416, #1a0e10);
    border: 2px solid rgba(239,68,68,0.65);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 12px rgba(239,68,68,0.25);
    color: #ef6b6b; font-size: 18px; font-weight: 700; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
  }
  .mob-subli-clear:active { transform: scale(0.9); }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ONGLET CARACTÉRISTIQUES — barre d'icônes + 1 carte à la fois
     ══════════════════════════════════════════════════════════ */

  /* Le layout desktop (2 colonnes) est neutralisé : on empile */
  #tab-caracteristiques .carac-layout { display: block !important; padding: 8px; }
  #tab-caracteristiques .carac-col-left,
  #tab-caracteristiques .carac-col-center { display: none !important; }

  .mob-carac-wrap { display: flex; flex-direction: column; gap: 12px; }

  /* Barre d'icônes alignées en haut */
  .mob-carac-nav {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    padding: 6px 4px 10px; position: sticky; top: 0; z-index: 5;
  }
  .mob-carac-tab {
    width: 54px; height: 54px; border-radius: 14px; padding: 7px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.12);
    cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s;
    display: flex; align-items: center; justify-content: center;
  }
  .mob-carac-tab img { width: 100%; height: 100%; object-fit: contain; }
  .mob-carac-tab:active { transform: scale(0.93); }
  /* Aura autour de l'icône active */
  .mob-carac-tab.active {
    border-color: #f0c040;
    box-shadow: 0 0 0 2px rgba(240,192,64,0.25), 0 0 16px rgba(240,192,64,0.55);
    background: rgba(240,192,64,0.10);
  }

  /* Zone des cartes : une seule visible, fondu au changement.
     Le display est piloté en inline par mobile.js ; ici on ne gère que
     l'opacité pour la transition. */
  .mob-carac-cards { position: relative; }
  .mob-carac-card {
    opacity: 0; transition: opacity .25s ease;
    width: 100% !important; margin: 0 !important;
  }
  .mob-carac-card.active { opacity: 1; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ONGLET DECK DE SORT — mannequin masqué, breed passive recalé,
     pool déplacé dans une bottom-sheet ouverte par le bouton « Sorts ».
     ══════════════════════════════════════════════════════════ */

  /* Layout : une seule colonne (le pool part dans la sheet) */
  #tab-deck .sp-layout { flex-direction: column !important; padding: 10px !important; }
  #tab-deck .sp-left { flex: 1 1 auto !important; }

  /* Mannequin supprimé */
  #tab-deck .sp-illus { display: none !important; }

  /* Breed passive (passif de classe) : petit, en haut dans la barre de
     titre (à gauche de « Deck de Sort »). position:fixed pour le sortir
     visuellement du deck. Visible seulement sur l'onglet deck. */
  #tab-deck .sp-breed-card {
    position: fixed !important;
    top: 6px !important; left: 84px !important; right: auto !important;
    width: 40px !important; height: 40px !important;
    z-index: 62;
  }
  #tab-deck .sp-breed-btn {
    width: 40px !important; height: 40px !important;
    border-width: 2px !important;
  }
  #tab-deck .sp-breed-btn img { border-radius: 7px; }

  /* Pool masqué dans le flux (il vit dans la sheet) */
  #tab-deck .sp-right { display: none !important; }
  /* …mais visible quand il est déplacé dans la sheet */
  .mob-deck-sheet .sp-right.sp-right-in-sheet {
    display: flex !important; width: 100% !important;
  }

  /* Bouton flottant « Sorts » — centré en bas, entre logo et Stats */
  .mob-deck-btn {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 900;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 12px 20px; border-radius: 28px;
    background: linear-gradient(160deg, #1a1d26, #0e1014);
    border: 2px solid rgba(168,110,200,0.6);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 14px rgba(168,110,200,0.25);
    color: #c79ce0; cursor: pointer;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: .4px;
    transition: transform .15s;
  }
  .mob-deck-btn svg { width: 18px; height: 18px; }
  .mob-deck-btn:active { transform: translateX(-50%) scale(0.95); }
  .mob-deck-btn.active {
    background: linear-gradient(160deg, #a86ec8, #8a4ea8); color: #fff; border-color: #c79ce0;
  }

  /* Bottom-sheet (monte DU BAS) */
  .mob-deck-backdrop {
    position: fixed; inset: 0; z-index: 940;
    background: rgba(6,7,10,0.25);   /* léger voile, PAS de flou : on veut voir le deck */
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .mob-deck-backdrop.open { opacity: 1; pointer-events: auto; }

  .mob-deck-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 941;
    max-height: 55vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #14161d, #0e1014);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 48px rgba(0,0,0,0.6);
    transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .mob-deck-sheet.open { transform: translateY(0); }
  .mob-deck-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
    font-family: 'Uncial Antiqua', cursive; font-size: 16px; color: #c79ce0;
    flex-shrink: 0;
  }
  .mob-deck-close {
    width: 32px; height: 32px; border-radius: 8px; background: transparent;
    border: 1px solid rgba(255,255,255,0.12); color: rgba(200,200,190,0.6);
    font-size: 17px; cursor: pointer;
  }
  .mob-deck-sheet-body {
    overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch;
  }
  /* Le pool dans la sheet : onglets Sorts/Passifs en haut, grille dessous */
  .mob-deck-sheet .sp-right { gap: 10px; }
  .mob-deck-sheet .sp-tabs { position: sticky; top: 0; z-index: 2; }

  /* Icônes du pool réduites dans la sheet (voir plus de sorts d'un coup) */
  .mob-deck-sheet #spPool .sp-pool-ico-btn {
    width: 48px !important; height: 48px !important;
  }
  .mob-deck-sheet #spPool .sp-pool-grid,
  .mob-deck-sheet #spPool .sp-pool-row { gap: 6px !important; }
  .mob-deck-sheet #spPool .sp-pool-row { margin-bottom: 6px; }
  .mob-deck-sheet #spPool .sp-pool-section { margin-bottom: 10px; }
  .mob-deck-sheet #spPool .sp-pool-ico-lvl {
    font-size: 9px; padding: 1px 3px; bottom: 2px; right: 2px;
  }
  .mob-deck-sheet #spPool .sp-pool-section-title { font-size: 11px; margin-bottom: 5px; }
}

@media (max-width: 1100px) {
  /* ── Sélecteur d'emplacement dans le tooltip du pool (deck de sort) ── */
  #spPoolTip.mob-tip-centered { pointer-events: auto; }
  #spPoolTip .mob-deck-pick {
    margin: 0 0 10px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .mob-slot-grid {
    display: grid; gap: 5px; justify-content: center; margin-bottom: 8px;
  }
  .mob-slot-active  { grid-template-columns: repeat(6, 1fr); }
  .mob-slot-passive { grid-template-columns: repeat(6, 1fr); }
  .mob-slot-cell {
    width: 38px; height: 38px; border-radius: 8px; padding: 2px;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.15);
    cursor: pointer; transition: .12s;
    display: flex; align-items: center; justify-content: center;
  }
  .mob-slot-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
  .mob-slot-cell:not(.locked):active { transform: scale(0.9); }
  .mob-slot-cell:not(.locked):hover { border-color: rgba(240,192,64,0.6); box-shadow: 0 0 8px rgba(240,192,64,0.4); }
  .mob-slot-cell.filled { border-color: rgba(240,192,64,0.35); }
  .mob-slot-cell.locked { opacity: 0.4; cursor: not-allowed; }
  .mob-slot-plus { color: rgba(240,192,64,0.7); font-size: 20px; font-weight: 300; line-height: 1; }
  .mob-slot-lock { font-size: 8px; color: rgba(200,200,190,0.6); text-align: center; line-height: 1.1; }
  .mob-slot-hint {
    text-align: center; font-size: 12px; font-weight: 600;
    color: #f0c040; letter-spacing: .2px;
  }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     FILET ANTI-RÉSIDU : sur mobile, AUCUN tooltip ne s'affiche s'il
     n'est pas centré-au-clic (classe .mob-tip-centered posée par
     mobile-tooltip.js). Couvre les tooltips au survol positionnés au
     curseur qui laissaient des résidus au tap.
     ══════════════════════════════════════════════════════════ */
  #drop-tooltip:not(.mob-tip-centered),
  #ench-subli-tooltip:not(.mob-tip-centered),
  #spPoolTip:not(.mob-tip-centered),
  #ench-warn-tooltip,
  .ench-warn-tooltip,
  .sp-pool-tip {
    opacity: 0 !important;
    display: none !important;
    pointer-events: none !important;
  }
  /* Les tooltips réellement centrés restent visibles */
  #drop-tooltip.mob-tip-centered,
  #ench-subli-tooltip.mob-tip-centered,
  #spPoolTip.mob-tip-centered {
    opacity: 1 !important;
    display: block !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 1100px) {
  /* ── Badge d'avertissement enchantement (bas-centre) + panneau déployable ── */
  .mob-warn-badge {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 902;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(160deg, #2a2410, #1a1408);
    border: 2px solid rgba(240,180,64,0.7);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 14px rgba(240,180,64,0.35);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
  }
  .mob-warn-badge:active { transform: translateX(-50%) scale(0.9); }
  .mob-warn-ico { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 4px rgba(240,180,64,0.6)); }

  .mob-warn-panel {
    position: fixed; left: 12px; right: 12px; bottom: 72px; z-index: 903;
    max-height: 50vh; overflow-y: auto;
    background: linear-gradient(180deg, #1a1810, #14110a);
    border: 1px solid rgba(240,180,64,0.4); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    padding: 14px 16px; font-family: 'Rajdhani', sans-serif; color: #e8e0d0;
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .2s, transform .2s;
  }
  .mob-warn-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mob-warn-panel-head {
    font-family: 'Uncial Antiqua', cursive; font-size: 15px; color: #f0c040;
    margin-bottom: 10px;
  }
  .mob-warn-panel .ench-warn-tip-title {
    font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
    color: #f0b040; margin: 4px 0 6px;
  }
  .mob-warn-panel .ench-warn-tip-title-sep { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
  .mob-warn-panel .ench-warn-tip-row { font-size: 13px; line-height: 1.5; margin-bottom: 5px; color: #d8d0c0; }
  .mob-warn-panel .ench-warn-slot { color: rgba(200,200,190,0.55); }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     HOME — cartes de build : image à gauche, items en 2×5,
     sublimations spéciales à droite.
     ══════════════════════════════════════════════════════════ */
  .ms-card {
    gap: 8px; padding: 10px;
    align-items: center;
  }
  .ms-card-illus { width: 68px; }
  .ms-card-illus img { max-height: 96px; }

  /* Items : 2 lignes de 5 (au lieu d'une de 10) */
  .ms-card-items {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px;
  }
  .ms-card .ms-item {
    width: 100%; height: auto; aspect-ratio: 1;
    max-width: 44px;
  }
  .ms-card-body { flex: 1 1 auto; }
  .ms-card-name { font-size: 14px; }

  /* Sublis spéciales à droite (déjà en colonne) : compactées */
  .ms-card-specials { padding-left: 10px; }
  .ms-card-specials .ms-special-name { display: none; }   /* icône seule pour gagner la place */
  .ms-card-specials .ms-special-ico { width: 34px; height: 34px; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     HOME MOBILE — layout général
     ══════════════════════════════════════════════════════════ */
  /* La topbar desktop (onglets clic + titre + compte) est masquée :
     navigation par swipe + menu flottant à la place */
  .home-topbar { display: none !important; }
  .home-divider { display: none !important; }
  .home-body { display: block !important; padding: 0 !important; }
  #homeRight { display: none !important; }          /* zone création/profil : overlay au besoin */
  #homeLeft { display: block !important; width: 100% !important; padding: 8px !important;
    padding-bottom: 80px !important; box-sizing: border-box; }

  /* Barre de navigation swipe (← label →) + dots, en tête */
  .mob-home-nav-wrap {
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(180deg, rgba(10,12,16,0.96), rgba(10,12,16,0.85));
    padding: 8px 10px 6px;
  }
  .mob-home-nav { display: flex; align-items: center; gap: 10px; justify-content: center; }
  .mob-home-arrow {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    color: #f0c040; cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .mob-home-arrow:disabled { opacity: 0.3; }
  .mob-home-arrow svg { width: 20px; height: 20px; }
  .mob-home-label {
    flex: 1; text-align: center; font-family: 'Uncial Antiqua', cursive;
    font-size: 17px; color: #f0c040; text-shadow: 0 0 14px rgba(240,192,64,0.25);
  }
  .mob-home-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
  .mob-home-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.2); }
  .mob-home-dot.on { background: #f0c040; box-shadow: 0 0 6px rgba(240,192,64,0.6); }

  /* Menu bas-gauche (burger) */
  .mob-home-menu-btn {
    position: fixed; left: 14px; bottom: 14px; z-index: 900;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(160deg, #1a1d26, #0e1014);
    border: 2px solid rgba(240,192,64,0.55);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 14px rgba(240,192,64,0.22);
    color: #f0c040; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .mob-home-menu-btn svg { width: 24px; height: 24px; }
  .mob-home-menu {
    position: fixed; left: 14px; bottom: 76px; z-index: 901;
    min-width: 180px;
    background: linear-gradient(180deg, #14161d, #0e1014);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6); overflow: hidden;
    opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s;
  }
  .mob-home-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mob-home-menu-item {
    display: block; width: 100%; text-align: left;
    padding: 13px 16px; background: transparent; border: none;
    color: #e8e8e0; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px;
    cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .mob-home-menu-item:last-child { border-bottom: none; }
  .mob-home-menu-item:active { background: rgba(240,192,64,0.12); }

  /* Bouton création bas-droite (comme Stats) */
  .mob-home-create-btn {
    position: fixed; right: 14px; bottom: 14px; z-index: 900;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 12px 18px; border-radius: 28px;
    background: linear-gradient(160deg, #f0c85a, #d8a838);
    border: 2px solid #f0c040; color: #2a1e05; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 16px rgba(240,192,64,0.35);
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: .4px;
  }
  .mob-home-create-btn svg { width: 18px; height: 18px; }

  /* Overlay Mon compte / Création (rendu dans homeRight) */
  #homeRight.mob-compte-open {
    display: block !important;
    position: fixed; inset: 0; z-index: 920;
    background: var(--bg-body, #0b0d11);
    overflow-y: auto; padding: 16px; padding-bottom: 40px;
  }

  /* Grille de cartes : une seule colonne sur mobile */
  #homeLeft .ms-cards-grid { grid-template-columns: 1fr !important; }
  .mob-certif-wrap { padding: 4px; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     HOME — adaptation « Mes builds » (filtres) et « Mon compte » (profil)
     ══════════════════════════════════════════════════════════ */

  /* Mes builds : filtres empilés au lieu de côte à côte */
  #homeLeft .ms-filters { flex-direction: column; gap: 12px; }
  #homeLeft .ms-class-grid { grid-template-columns: repeat(9, 1fr); gap: 3px; }
  #homeLeft .ms-cards-scroll { overflow: visible; }

  /* Mon compte / profil (dans l'overlay homeRight) */
  #homeRight.mob-compte-open .profile-back { display: none !important; }
  #homeRight.mob-compte-open .profile-head {
    flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
  }
  #homeRight.mob-compte-open .profile-avatar { width: 60px; height: 60px; }
  #homeRight.mob-compte-open .profile-name { font-size: 22px; }
  #homeRight.mob-compte-open .profile-socials {
    margin-left: 0; width: 100%; order: 5; justify-content: flex-start;
  }
  #homeRight.mob-compte-open .profile-viewtoggle,
  #homeRight.mob-compte-open .profile-edit-btn {
    margin-left: 0;
  }
  #homeRight.mob-compte-open .ms-cards-grid { grid-template-columns: 1fr !important; }
  #homeRight.mob-compte-open .fv-folders-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* La zone de builds/dossiers coule dans le scroll de l'overlay (pas de
     hauteur flex contrainte qui la couperait ou la rendrait invisible). */
  #homeRight.mob-compte-open .profile-builds {
    flex: none !important; min-height: 0; overflow: visible !important;
  }

  /* Création (même overlay) : grille de classes plus dense */
  #homeRight.mob-compte-open .create-faces { grid-template-columns: repeat(5, 1fr) !important; }
  #homeRight.mob-compte-open .certif-list { max-height: none; }
  /* Le bouton « Créer » ne doit montrer QUE la création, pas le bloc
     « Buildeur Certifié » de la zone droite desktop. */
  #homeRight.mob-compte-open .certif-zone { display: none !important; }
}

@media (max-width: 1100px) {
  /* Croix de fermeture des overlays home (compte / création) */
  .mob-overlay-close {
    position: fixed; top: 12px; right: 12px; z-index: 930;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(20,22,28,0.9); border: 1px solid rgba(255,255,255,0.18);
    color: #e8e8e0; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     Empêche le scroll d'un overlay/sheet de faire défiler la page
     derrière (scroll chaining). overscroll-behavior: contain isole
     le défilement ; sur les overlays plein écran on fige aussi la page.
     ══════════════════════════════════════════════════════════ */
  .mob-subli-sheet-body,
  .mob-deck-sheet-body,
  .mob-warn-panel,
  #homeRight.mob-compte-open {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Overlay plein écran ouvert → la page dessous ne bouge pas */
  body.mob-overlay-lock {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

@media (max-width: 1100px) {
  /* Les modales qui s'ouvrent PAR-DESSUS l'overlay compte (z-index 920)
     doivent passer au-dessus, sinon elles s'affichent "derrière" et il faut
     fermer le compte pour les voir. */
  .fv-modal-overlay { z-index: 1000 !important; }      /* contenu d'un dossier */
  .folder-modal-overlay { z-index: 1001 !important; }  /* créer/éditer un dossier */
  .dc-modal-overlay { z-index: 1001 !important; }      /* import/export code */
  .ui-modal-overlay { z-index: 1002 !important; }      /* confirm/prompt au-dessus de tout */
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     BOUTON « Installer l'appli » (PWA) — dans le header home
     ══════════════════════════════════════════════════════════ */
  .pwa-install-slot { display: flex; justify-content: center; margin-top: 6px; }
  .pwa-install-slot:empty { display: none; }

  .pwa-install-wrap {
    display: flex; align-items: center; gap: 6px;
    justify-content: center;
  }
  /* Version dans le header (slotted) : compacte, discrète */
  #pwaInstallSlot .pwa-install-wrap { margin: 0; }
  #pwaInstallSlot .pwa-install-btn {
    padding: 6px 12px; font-size: 11px; border-radius: 16px;
    box-shadow: 0 2px 10px rgba(240,192,64,0.28);
  }
  #pwaInstallSlot .pwa-install-btn svg { width: 14px; height: 14px; }
  #pwaInstallSlot .pwa-install-dismiss { width: 24px; height: 24px; font-size: 12px; }

  /* Fallback flottant (si le header n'est pas dispo) */
  #pwaInstallWrap.pwa-install-wrap:not([data-slotted]) {
    position: fixed; left: 50%; transform: translateX(-50%);
    top: 8px; z-index: 950;
  }
  .pwa-install-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 22px; cursor: pointer;
    background: linear-gradient(160deg, #f0c85a, #d8a838);
    border: none; color: #2a1e05;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .3px;
    box-shadow: 0 4px 16px rgba(240,192,64,0.35); white-space: nowrap;
  }
  .pwa-install-btn:active { transform: scale(0.96); }
  .pwa-install-dismiss {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(220,220,220,0.7); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }

  /* Pop-up d'instructions iOS */
  .pwa-ios-hint {
    position: fixed; inset: 0; z-index: 1010;
    background: rgba(6,7,10,0.8); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  .pwa-ios-card {
    width: 100%; max-width: 340px;
    background: linear-gradient(180deg, #14161d, #0e1014);
    border: 1px solid rgba(240,192,64,0.4); border-radius: 16px;
    padding: 22px; font-family: 'Rajdhani', sans-serif; color: #e8e8e0;
  }
  .pwa-ios-title {
    font-family: 'Uncial Antiqua', cursive; font-size: 19px; color: #f0c040;
    margin-bottom: 14px; text-align: center;
  }
  .pwa-ios-steps p { font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
  .pwa-ios-steps b { color: #f0c040; }
  .pwa-ios-share { font-size: 17px; }
  .pwa-ios-close {
    width: 100%; margin-top: 8px; padding: 12px; border-radius: 10px; cursor: pointer;
    background: linear-gradient(180deg, #f0c85a, #e0a838); border: none; color: #2a1e05;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
  }
}

@media (max-width: 1100px) {
  /* Sheet des sorts : on masque le toggle « Normal / Coup critique » du
     tooltip (il réécrit le tooltip au clic et casse la grille d'emplacements).
     On garde toutes les infos du sort pour savoir ce qu'on équipe. */
  #spPoolTip button[data-cc] { display: none !important; }
  /* Masque le conteneur flex qui n'abrite que ces boutons (évite l'espace vide) */
  #spPoolTip div:has(> button[data-cc]) { display: none !important; }
}

@media (max-width: 1100px) {
  /* Masquage réversible posé par la barrière anti-effet-de-bord.
     (Ne pas confondre avec display inline : ici c'est une classe qu'on
     retire au retour dans la bonne vue, donc non destructif.) */
  .mob-force-hidden { display: none !important; }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ANTI-DÉBORDEMENT (crop) — sur petits écrans, rien ne dépasse la
     largeur réelle. Corrige le contenu coupé à droite (recherche,
     création) constaté sur certains téléphones plus étroits.
     ══════════════════════════════════════════════════════════ */
  html, body { max-width: 100vw; overflow-x: hidden; }
  #viewBuilder, #viewHome, .stage, .home-stage,
  .tab-page, #homeLeft, #homeRight {
    max-width: 100vw; box-sizing: border-box;
  }

  /* Config de création : une seule colonne (évite le crop du champ Nom
     et du 3e type de build sur écran étroit) */
  .create-config { grid-template-columns: 1fr !important; }
  .create-config .create-name-input { width: 100% !important; box-sizing: border-box; }
  /* Type de build : les 3 pills doivent tenir et wrapper au besoin */
  .create-pills { flex-wrap: wrap !important; }
  .create-pills .cpill { flex: 1 1 auto; min-width: 0; }

  /* Onglet Recherche : la liste de résultats reste dans l'écran */
  #tab-recherche .results-list,
  .results-area .results-list {
    max-width: 100%; box-sizing: border-box;
  }
  /* Les cartes de résultat ne forcent pas une largeur qui déborde */
  #tab-recherche .mc-card,
  .results-list .mc-card {
    max-width: 100%;
  }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     FLUIDIFICATION — les panneaux/colonnes du builder ont des largeurs
     fixes en px (conçues pour le desktop). Sur mobile on les force en
     pleine largeur fluide pour éviter tout débordement (crop) selon la
     taille d'écran. (Bloc STRICTEMENT mobile.)
     ══════════════════════════════════════════════════════════ */
  .panel-stats, .panel-center, .panel-right, .panel-right-col,
  .ench-left, .ench-stats-col, .center-col, .equip-left-tabs,
  .stat-filter-col, .level-sliders, .welcome-box,
  .row-top .builder-spacer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Sécurité générale : aucun conteneur d'onglet ne dépasse l'écran */
  .tab-page > *, .panel-center > *, .ench-left > * {
    max-width: 100%;
  }

  /* Config de création : une seule colonne (déjà posé plus haut, on
     s'assure que le champ nom ne déborde pas) */
  .create-config { grid-template-columns: 1fr !important; }
  .create-name-input { width: 100% !important; box-sizing: border-box; }
}

@media (max-width: 1100px) {
  /* La grille de recherche est déjà gérée plus haut (3 colonnes fluides) :
     on n'y touche pas pour ne pas casser ce layout. */
}

/* ══════════════════════════════════════════════════════════════════
   FILET DESKTOP — les éléments d'UI mobile (sheets, boutons flottants,
   barres) ne doivent JAMAIS apparaître au-dessus de 1100px. Sans style
   mobile, ils s'afficheraient avec le rendu par défaut du navigateur
   (bug constaté : sheets visibles en haut à gauche sur desktop).
   Cette règle est HORS média mobile : elle ne s'applique qu'en desktop.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1101px) {
  .mob-stats-sheet, .mob-stats-backdrop, .mob-stats-btn,
  .mob-subli-sheet, .mob-subli-backdrop, .mob-subli-btn, .mob-subli-clear,
  .mob-deck-sheet, .mob-deck-backdrop, .mob-deck-btn,
  .mob-tabnav, .mob-tab-nav, .mob-home-nav-wrap,
  .mob-home-menu-btn, .mob-home-menu, .mob-home-create-btn, .mob-overlay-close,
  .mob-warn-badge, .mob-warn-panel, .mob-tip-overlay,
  .mob-ench-colorbar, .mob-ench-statpanel,
  .pwa-install-wrap, .pwa-install-slot,
  #mobHomeNav, #mobHomeMenu, #mobHomeMenuBtn, #mobHomeCreateBtn,
  #mobStatsBtn, #mobSubliBtn, #mobDeckBtn, #mobEnchWarn, #mobEnchWarnPanel,
  #mobSubliClear, #mobOverlayClose, #mobTabNav {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     ENCHANTEMENT — sélecteur de maîtrises par couleur R/V/B en haut
     ══════════════════════════════════════════════════════════ */
  /* Ancien grand panneau de stats du bas : masqué sur mobile */
  #tab-enchantement #enchStatsList { display: none !important; }

  /* Barre des 3 couleurs de châsse */
  .mob-ench-colorbar {
    display: flex; gap: 8px; justify-content: center;
    padding: 8px 6px; position: sticky; top: 0; z-index: 6;
    background: linear-gradient(180deg, rgba(10,12,16,0.96), rgba(10,12,16,0.85));
  }
  .mob-ench-color {
    flex: 1 1 0; max-width: 120px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 6px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.14);
    color: #e8e8e0; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
    transition: .15s;
  }
  .mob-ench-color img { width: 22px; height: 22px; object-fit: contain; }
  .mob-ench-color:active { transform: scale(0.95); }
  .mob-ench-color.active {
    border-color: #f0c040;
    box-shadow: 0 0 0 2px rgba(240,192,64,0.2), 0 0 14px rgba(240,192,64,0.4);
    background: rgba(240,192,64,0.08);
  }

  /* Panneau déployable des stats de la couleur choisie */
  .mob-ench-statpanel {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
    padding: 8px 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mob-ench-stat {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 4px solid var(--stat-c, #888);   /* couleur R/V/B de la stat */
    color: #e0e0d8; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 13px;
    text-align: left;
  }
  .mob-ench-stat-ico { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
  .mob-ench-stat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-ench-stat-right { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
  .mob-ench-stat-color { width: 20px; height: 20px; object-fit: contain; }
  .mob-ench-dbl { width: 18px; height: 18px; object-fit: contain; opacity: 0.9; }
  .mob-ench-stat:active { transform: scale(0.97); }
  .mob-ench-stat.sel {
    border-color: #f0c040; border-left-color: var(--stat-c, #f0c040);
    background: rgba(240,192,64,0.12);
    box-shadow: 0 0 8px rgba(240,192,64,0.3);
  }
}

@media (max-width: 1100px) {
  /* ══════════════════════════════════════════════════════════
     CARACTÉRISTIQUES — lignes compactées pour tenir sur écran étroit
     (les contrôles MIN/-/val/+/MAX étaient en largeur fixe non
     compressible → écrasaient le libellé et débordaient sur petits tel).
     ══════════════════════════════════════════════════════════ */
  .apt-row { gap: 6px !important; padding-left: 2px; padding-right: 2px; }
  .apt-row-icon { width: 20px !important; height: 20px !important; }
  .apt-row-label {
    font-size: 12px !important;
    min-width: 44px;            /* garantit un libellé lisible, pas écrasé à 0 */
    flex: 1 1 auto !important;
  }
  .apt-ctrl { gap: 3px !important; }
  /* Contrôles réduits pour libérer de la place */
  .apt-ctrl .apt-btn[data-dir="min"],
  .apt-ctrl .apt-btn[data-dir="max"] { width: 34px !important; font-size: 10px !important; }
  .apt-ctrl .apt-btn[data-dir="+"],
  .apt-ctrl .apt-btn[data-dir="-"] { width: 24px !important; }
  .apt-btn { width: 24px !important; height: 26px !important; }
  .apt-ctrl .apt-val { min-width: 22px !important; width: 22px !important; font-size: 13px !important; }
  /* "max XX" à droite : plus petit, ne pousse pas la ligne */
  .apt-row .apt-max-hint, .apt-row .apt-cap-hint { font-size: 10px !important; }
}