/* ============================================================
   Descendant of Heroes — styles.css
   ============================================================ */

/* ── Variables globales — THÈME SOMBRE (par défaut) ──────────
   Le thème clair est défini juste après dans html[data-theme="light"].
   Bascule gérée par theme.js (bouton en bas à gauche, choix mémorisé). */
:root {
    --p:          #771a1b;          /* primaire (boutons/accents) */
    --s:          #5a1314;          /* secondaire */
    --grad:       linear-gradient(135deg, #1a0000, #771a1b);   /* fond de page */
    --grad-45:    linear-gradient(45deg,  #1a0000, #771a1b);
    --grad-light: linear-gradient(135deg, #2a2a2a, #1e1e1e);
    --bg:         #161616;          /* surface secondaire (sous les cartes) */
    --bg-hover:   #2a1416;
    --border:     #3a3a3a;
    --text:       #e8e8e8;
    --muted:      #a0a0a0;
    --faint:      #7a7a7a;
    --shadow-sm:  0 4px 6px  rgba(0,0,0,.35);
    --shadow-md:  0 8px 16px rgba(0,0,0,.45);
    --shadow-lg:  0 10px 30px rgba(0,0,0,.55);
    --r-sm: 0;
    --r-md: 0;
    --r-lg: 0;
    --t:    0.3s ease;
    --max:  1200px;
    --card:           #1e1e1e;      /* bloc de contenu (était blanc) */
    --card-2:         #262626;      /* variante légèrement plus claire */
    --text-secondary: #b5b5b5;
    --dark:           #111111;
    /* Fondu carte ↔ fond : halo doux teinté de la couleur d'accent du thème. */
    --card-glow:  0 0 0 1px rgba(119,26,27,.30), 0 14px 44px rgba(119,26,27,.20);
    --on-accent:  #ffffff;          /* texte sur les surfaces colorées (boutons) */
    /* Chrome (navbar / footer / menus) */
    --chrome-bg:    rgba(8,2,2,.92);
    --chrome-text:  #ffffff;
    --chrome-hover: rgba(119,26,27,.45);
    --chrome-menu:  rgba(12,4,4,.97);
    /* Barres « chrome » des pages de JEU (onglets + topbar teambuilder).
       Valeurs SOMBRES = identiques à l'ancien codé en dur (mode sombre inchangé) ;
       le clair est défini dans html[data-theme="light"]. */
    --bar-bg:         #160808;
    --bar-bg-2:       #1f0a0a;
    --bar-text:       #ffffff;
    --bar-muted:      rgba(255,255,255,0.55);
    --bar-line:       rgba(255,255,255,0.15);
    --bar-soft:       rgba(255,255,255,0.12);
    --bar-soft-hover: rgba(255,255,255,0.25);
    --field-grad:     linear-gradient(135deg, #1f0a0a, #2a0d0d);   /* terrain de combat */
    --play-bg:        #1a0808;                                     /* fond des pages plein écran (jeu) */

    /* ── Sémantique (succès / danger / avertissement / info) ── */
    --success:        #51cf66;
    --success-strong: #2f9e44;
    --success-bg:     rgba(47,158,68,.18);
    --success-text:   #69db7c;
    --success-border: #2f9e44;

    --danger:         #ff6b6b;
    --danger-strong:  #c92a2a;
    --danger-bg:      rgba(201,42,42,.20);
    --danger-text:    #ff8787;
    --danger-border:  #c92a2a;
    --danger-grad:    linear-gradient(135deg, #c92a2a, #ff6b6b);

    --warning:        #ffd43b;
    --warning-strong: #e67700;
    --warning-bg:     rgba(217,119,6,.18);
    --warning-text:   #fbbf24;
    --warning-border: #d97706;
    --warning-grad:   linear-gradient(135deg, #e67700, #ffd43b);

    --info:           #339af0;
    --info-strong:    #1864ab;
    --info-bg:        rgba(24,100,171,.18);
    --info-text:      #74c0fc;
    --info-grad:      linear-gradient(135deg, #1971c2, #339af0);

    /* ── Échelle de gris théma­tisée (s'inverse en clair) ── */
    --neutral-100:    #2a2a2a;   /* le plus sombre en sombre = le plus clair en clair */
    --neutral-200:    #353535;
    --neutral-300:    #4a4a4a;
    --neutral-400:    #6a6a6a;
    --neutral-500:    #8a8a8a;
    --neutral-600:    #adb5bd;
    --neutral-700:    #ced4da;
    --neutral-800:    #dee2e6;
    --neutral-900:    #e9ecef;

    /* ── Surfaces génériques pour outils (damage-calc, type-coverage) ── */
    --panel:          #1a1f2e;
    --tool-card:      #242938;
    --tool-border:    #2d3348;
    --tool-text:      #e2e8f0;
    --tool-muted:     #8892a4;
    --tool-accent:    #771a1b;
    --tool-header-grad: linear-gradient(135deg, #1a1f2e, #242938);
    --tool-title-grad:  linear-gradient(135deg, #771a1b, #5a1314);

    /* ── Overlays / scrims ── */
    --overlay-strong: rgba(0,0,0,.65);
    --overlay:        rgba(0,0,0,.55);
    --overlay-soft:   rgba(0,0,0,.35);

    /* ── Variants supplémentaires pour le combat ── */
    --combat-hp-high-grad: linear-gradient(90deg, #2f9e44, #51cf66);
    --combat-hp-mid-grad:  linear-gradient(90deg, #f59f00, #ffd43b);
    --combat-hp-low-grad:  linear-gradient(90deg, #c92a2a, #ff6b6b);

    /* Couleur utile pour le texte sur les barres de chrome / hero pages */
    --on-image:       #111;     /* texte foncé sur splash art */
    --on-image-shadow: rgba(255,255,255,.75);

    /* ── Cartes de héros en combat ──
       Le fond est neutre. L'overlay est un voile FONCÉ semi-transparent
       qui assombrit le splash art (l'image du héros, en background-image)
       pour garantir la lisibilité du nom et des PV. */
    --combat-card-bg:        #1c1c1c;
    --combat-card-overlay:   rgba(0, 0, 0, 0.35);
    --combat-empty-bg:       rgba(30,30,30,0.7);
    --combat-empty-border:   rgba(180,180,180,0.4);
    --switch-pip-hp-track:   rgba(255,255,255,0.15);
}

/* ── THÈME CLAIR (bleu ciel pastel → rose bonbon) ──────────── */
html[data-theme="light"] {
    --p:          #c248cd;          /* rose bonbon (primaire) */
    --s:          #9c3aa6;
    --grad:       linear-gradient(135deg, #82c8e5, #c248cd);   /* fond de page */
    --grad-45:    linear-gradient(45deg,  #82c8e5, #c248cd);
    --grad-light: linear-gradient(135deg, #ffffff, #f3eef7);
    --bg:         #f5f0f8;
    --bg-hover:   #fbeefc;
    --border:     #e3d4ea;
    --text:       #2a2a2a;
    --muted:      #6a6a6a;
    --faint:      #9a9a9a;
    --shadow-sm:  0 4px 6px  rgba(90,40,100,.10);
    --shadow-md:  0 8px 16px rgba(90,40,100,.18);
    --shadow-lg:  0 10px 30px rgba(90,40,100,.22);
    --card:           #ffffff;      /* bloc de contenu blanc */
    --card-2:         #faf5fc;
    --text-secondary: #666666;
    --card-glow:  0 0 0 1px rgba(194,72,205,.18), 0 14px 44px rgba(130,200,229,.35);
    --on-accent:  #ffffff;
    --chrome-bg:    rgba(255,255,255,.90);
    --chrome-text:  #2a2a2a;
    --chrome-hover: rgba(194,72,205,.18);
    --chrome-menu:  rgba(255,255,255,.98);
    /* Barres « chrome » des pages de jeu — version CLAIRE (texte foncé sur barre claire). */
    --bar-bg:         #ece3f2;
    --bar-bg-2:       #e4d6ef;
    --bar-text:       #2a2a2a;
    --bar-muted:      rgba(0,0,0,0.55);
    --bar-line:       rgba(0,0,0,0.12);
    --bar-soft:       rgba(0,0,0,0.05);
    --bar-soft-hover: rgba(0,0,0,0.11);
    --field-grad:     linear-gradient(135deg, #dff0f7, #f3e3f6);   /* terrain clair (bleu→rose doux) */
    --play-bg:        linear-gradient(135deg, #82c8e5, #c248cd);   /* fond jeu clair = dégradé du thème */

    /* ── Sémantique en clair (fonds clairs + texte foncé pour la lisibilité) ── */
    --success:        #2f9e44;
    --success-strong: #2f9e44;
    --success-bg:     #d3f9d8;
    --success-text:   #2b8a3e;
    --success-border: #51cf66;

    --danger:         #c92a2a;
    --danger-strong:  #c92a2a;
    --danger-bg:      #ffe3e3;
    --danger-text:    #c92a2a;
    --danger-border:  #ff6b6b;
    --danger-grad:    linear-gradient(135deg, #c92a2a, #ff6b6b);

    --warning:        #e67700;
    --warning-strong: #e67700;
    --warning-bg:     #fff3cd;
    --warning-text:   #856404;
    --warning-border: #ffd43b;
    --warning-grad:   linear-gradient(135deg, #e67700, #ffd43b);

    --info:           #1971c2;
    --info-strong:    #1864ab;
    --info-bg:        #d0ebff;
    --info-text:      #1864ab;
    --info-grad:      linear-gradient(135deg, #1971c2, #339af0);

    /* Échelle de gris s'inverse : neutral-100 = le plus clair en clair */
    --neutral-100:    #f8f9fa;
    --neutral-200:    #f1f3f5;
    --neutral-300:    #e9ecef;
    --neutral-400:    #dee2e6;
    --neutral-500:    #ced4da;
    --neutral-600:    #adb5bd;
    --neutral-700:    #868e96;
    --neutral-800:    #495057;
    --neutral-900:    #212529;

    /* Surfaces des outils (damage-calc / type-coverage) en CLAIR */
    --panel:          #ffffff;
    --tool-card:      #faf5fc;
    --tool-border:    #e3d4ea;
    --tool-text:      #2a2a2a;
    --tool-muted:     #6a6a6a;
    --tool-accent:    #c248cd;
    --tool-header-grad: linear-gradient(135deg, #ffffff, #f3eef7);
    --tool-title-grad:  linear-gradient(135deg, #c248cd, #9c3aa6);

    --overlay-strong: rgba(0,0,0,.45);
    --overlay:        rgba(0,0,0,.35);
    --overlay-soft:   rgba(90,40,100,.18);

    --combat-hp-high-grad: linear-gradient(90deg, #2f9e44, #51cf66);
    --combat-hp-mid-grad:  linear-gradient(90deg, #f59f00, #ffd43b);
    --combat-hp-low-grad:  linear-gradient(90deg, #c92a2a, #ff6b6b);

    --on-image:       #111;
    --on-image-shadow: rgba(255,255,255,.85);

    /* Cartes de héros en combat — en CLAIR : fond blanc, voile clair sur splash */
    --combat-card-bg:        #ffffff;
    --combat-card-overlay:   rgba(255, 255, 255, 0.35);
    --combat-empty-bg:       rgba(245, 240, 250, 0.85);
    --combat-empty-border:   rgba(120,120,120,0.35);
    --switch-pip-hp-track:   rgba(0,0,0,0.10);
}

/* Transition douce lors du changement de thème. */
body, .view-card, .card, .hero-card,
.navbar, footer, table, input, textarea, select {
    transition: background-color var(--t), color var(--t), border-color var(--t);
}

/* ── Bouton bascule de thème (bas à gauche) ─────────────────
   Affiche le dégradé du thème actif (rouge/noir en sombre, bleu/rose en clair). */
#themeToggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 3000;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .2s ease;
}
#themeToggle:hover { transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow-lg); }

/* En mode jeu, le bouton de thème ne s'affiche QUE sur l'accueil (mainView) :
   il chevauchait le choix de trait et d'autres éléments dans le teambuilder
   et en combat. */
body.play-mode #themeToggle { display: none; }
body.play-mode:has(#mainView.active) #themeToggle { display: flex; }

/* ── Lien Discord discret (footer, au-dessus du copyright) ── */
.footer-discord { margin-bottom: .35rem; font-size: .85rem; }
.footer-discord a { color: var(--text-secondary); text-decoration: none; opacity: .85; }
.footer-discord a:hover { opacity: 1; text-decoration: underline; }

/* ── Reset & base ─────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--grad);
    color: var(--text);
    line-height: 1.6;
}

.container { max-width: var(--max); margin: 0 auto; padding: 20px; }

/* ── Navigation ───────────────────────────────────────────── */
.navbar {
    background: var(--chrome-bg);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    background: var(--grad-45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.85));
}

.nav-menu { display: flex; list-style: none; gap: 2rem; }

.nav-menu a {
    color: var(--chrome-text);
    text-decoration: none;
    font-weight: 500;
    padding: .5rem 1rem;
    border-radius: var(--r-sm);
    transition: all var(--t);
}
.nav-menu a:hover,
.nav-menu a.active { background: var(--chrome-hover); transform: translateY(-2px); }

/* Dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: var(--chrome-menu);
    border-radius: 0;
    padding: .5rem 0;
    list-style: none;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,.3);
    z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu li a { display: block; padding: .6rem 1.2rem; white-space: nowrap; }
.nav-dropdown-toggle { cursor: default; }
.nav-hamburger { display: none; }

/* ── Boutons ──────────────────────────────────────────────── */
.btn {
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 0;
    font-weight: bold;
    transition: all var(--t);
    display: inline-block;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: var(--card);
    color: var(--p);
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }

.btn-secondary { background: rgba(255,255,255,.1); color: #fff; border: 2px solid #fff; }
.btn-secondary:hover { background: var(--card); color: var(--p); }


/* ── Hero section (bandeau du haut) ───────────────────────── */
.hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
}
.hero-content { max-width: 800px; }
.hero-title { font-size: 4rem; color: #fff; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,.3); }
.hero-subtitle { font-size: 1.5rem; color: rgba(255,255,255,.9); margin-bottom: 2rem; }
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Grille des types (regles.html) ───────────────────────── */
.types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; }

/* Badge de type dans la grille des types — grand format */
.types-grid .type-badge {
    padding: 1rem;
    border-radius: var(--r-md);
    text-align: center;
    font-weight: bold;
    color: #fff;
    transition: transform var(--t);
    font-size: inherit;
    min-width: unset;
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}
.types-grid .type-badge:hover { transform: scale(1.1); }

/* ── Couleurs des types (partagées) ───────────────────────── */
/* Utilisées par : .types-grid .type-badge, .hero-card-header,
   et toutes les pages via les classes anglaises               */
.fire     { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); }
.plant    { background: linear-gradient(135deg, #51cf66, #37b24d); }
.water    { background: linear-gradient(135deg, #339af0, #1971c2); }
.earth    { background: linear-gradient(135deg, #a0522d, #8b4513); }
.metal    { background: linear-gradient(135deg, #868e96, #495057); }
.electric { background: linear-gradient(135deg, #ffd43b, #fab005); }
.air      { background: linear-gradient(135deg, #74c0fc, #4dabf7); }
.ice      { background: linear-gradient(135deg, #a5d8ff, #74c0fc); }
.plasma   { background: linear-gradient(135deg, #e599f7, #cc5de8); }
.warrior  { background: linear-gradient(135deg, #feab6e, #fd8c3a); }
.mage     { background: linear-gradient(135deg, #b197fc, #9775fa); }
.toxic    { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.light    { background: linear-gradient(135deg, #ffe066, #ffd43b); }
.dark     { background: linear-gradient(135deg, #495057, #212529); }

/* ── Panthéon — Barre de recherche ────────────────────────── */
.pantheon-search-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 680px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}
.pantheon-search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border, #e0e0e0);
    border-radius: var(--r-md, 10px);
    font-size: 1rem;
    background: var(--card);
    transition: border-color 0.2s;
}
.pantheon-search-input:focus {
    outline: none;
    border-color: var(--primary, #771a1b);
}
.pantheon-count {
    font-size: 0.88rem;
    color: var(--muted, #888);
    white-space: nowrap;
}

/* ── Panthéon — Grille des héros ──────────────────────────── */
.herodex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.hero-card {
    background: var(--card);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.hero-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); }
.hero-card-header { padding: 1.5rem; color: #fff; text-align: center; }
.hero-card-splash {
    position: relative;
    min-height: 200px;
    background: var(--grad-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faint);
    font-style: italic;
    flex-grow: 1;
    overflow: hidden;
}
/* Splash art : remplit tout le cadre (recadrage centré). Au-dessus du repli. */
.hero-card-splash img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-card-body { padding: 1.5rem; }
.hero-card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.hero-type {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 0;
    font-size: .9rem;
    margin-top: .5rem;
    background: rgba(255,255,255,.2);
}

/* ── Pages "fond dégradé + carte blanche" ─────────────────── */
/* .rules-page sert à : regles.html, competences.html, objets.html, jouer.html */
.rules-page { background: var(--grad); min-height: 100vh; min-height: 100dvh; }
/* .hero-detail sert à : pages héros individuelles */
.hero-detail { background: var(--grad); min-height: 100vh; min-height: 100dvh; }

.rules-content {
    background: var(--card);
    padding: 3rem;
    border-radius: var(--r-lg);
    margin: 2rem auto;
    max-width: 1100px;
    box-shadow: var(--shadow-lg);
}

/* ── Typographie rules-content ────────────────────────────── */
.rules-content h1 {
    color: var(--p);
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--p);
}
.rules-content h2 {
    color: var(--p);
    margin: 3rem 0 1rem;
    font-size: 2rem;
    padding-left: 1rem;
    border-left: 5px solid var(--p);
}
.rules-content h3 { color: var(--s); margin: 1.5rem 0 1rem; font-size: 1.5rem; }
.rules-content h4 { color: var(--p); margin: 1.5rem 0 .75rem; font-size: 1.2rem; }
.rules-content p,
.rules-content ul  { margin-bottom: 1rem; line-height: 1.8; color: var(--text); }
.rules-content ul  { padding-left: 2rem; }
.rules-content li  { margin-bottom: .5rem; }
.rules-content em  { color: var(--muted); font-style: italic; }

/* ── Sommaire (TOC) ───────────────────────────────────────── */
.toc-container {
    background: var(--card);
    border: 2px solid var(--p);
    border-radius: 0;
    padding: 1.5rem 2rem;
    max-width: 400px;
    margin: 0 auto 2rem;
    box-shadow: 0 4px 12px rgba(119,26,27,.15);
}
.toc-title {
    font-weight: bold;
    font-size: 1rem;
    color: var(--p);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--neutral-300);
    padding-bottom: .5rem;
}
.toc-list { padding-left: 1.5rem; margin: 0; }
.toc-list li { margin-bottom: .4rem; }
.toc-list a { color: var(--p); text-decoration: none; font-size: .95rem; transition: color .2s; }
.toc-list a:hover { color: var(--s); text-decoration: underline; }

/* ── Table des stats (page Règles) ────────────────────────── */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
    border-radius: var(--r-md);
    overflow: hidden;
}
.stats-table th,
.stats-table td   { border: 1px solid var(--border); padding: 1rem; text-align: center; }
.stats-table th   { background: var(--grad); color: #fff; font-weight: bold; }
.stats-table tr:nth-child(even) { background: var(--bg); }
.stats-table tr:hover { background: var(--neutral-300); transition: background var(--t); }
.stats-table td   { font-weight: 500; }
.stats-table tr td:nth-child(n+2) { position: relative; }

.stats-table .type-strong { background: #ffcccb; font-weight: bold; color: #c82333; }
.stats-table .type-weak   { background: #d4edda; font-weight: bold; color: #155724; }
.stats-table .type-immune { background: #e2e3e5; font-weight: bold; color: #383d41; }

/* ── Page Héros individuelle ──────────────────────────────── */
.hero-detail-container {
    max-width: 1000px;
    margin: 2rem auto;
    background: var(--card);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.hero-detail-header {
    position: relative;
    overflow: visible;
    padding: 3rem;
    color: #fff;
    text-align: center;
}
.hero-detail-splash {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-detail-splash img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-detail-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
}

.hero-detail-header > *:not(.hero-detail-splash) {
    position: relative;
    z-index: 2;
}
.hero-detail-header h1 { font-size: 3rem; margin-bottom: 1rem; }
.hero-detail-body { padding: 3rem; }
.hero-detail-body h2 {
    color: var(--p);
    margin: 2rem 0 1rem;
    font-size: 1.8rem;
    border-bottom: 2px solid var(--p);
    padding-bottom: .5rem;
}

/* Headers colorés par type */
.hero-detail-header.Feu        { background: linear-gradient(135deg, #ff4757, #ff6b6b); }
.hero-detail-header.Plante     { background: linear-gradient(135deg, #2f9e44, #51cf66); }
.hero-detail-header.Eau        { background: linear-gradient(135deg, #1971c2, #339af0); }
.hero-detail-header.Terre      { background: linear-gradient(135deg, #7c3e12, #a0522d); }
.hero-detail-header.Acier      { background: linear-gradient(135deg, #495057, #868e96); }
.hero-detail-header.Électrique { background: linear-gradient(135deg, #e67700, #ffd43b); color: #2a2a2a; }
.hero-detail-header.Air        { background: linear-gradient(135deg, #1c7ed6, #74c0fc); }
.hero-detail-header.Glace      { background: linear-gradient(135deg, #1098ad, #a5d8ff); color: #2a2a2a; }
.hero-detail-header.Plasma     { background: linear-gradient(135deg, #862e9c, #e599f7); }
.hero-detail-header.Guerrier   { background: linear-gradient(135deg, #fd8c3a, #feab6e); }
.hero-detail-header.Mage       { background: linear-gradient(135deg, #5f3dc4, #b197fc); }
.hero-detail-header.Toxique    { background: linear-gradient(135deg, #5c2d91, #9b59b6); }
.hero-detail-header.Ténèbres   { background: linear-gradient(135deg, #212529, #495057); }

/* Double type : le background est calculé en inline style (gradient 50/50 entre les deux types) */
.hero-detail-header--dual { position: relative; }

.hero-description { background: var(--bg); padding: 1.5rem; border-radius: var(--r-md); margin-bottom: 2rem; font-style: italic; color: var(--muted); }

.lore-section {
    background: var(--grad-light);
    padding: 2rem;
    border-radius: var(--r-md);
    margin-bottom: 2rem;
    border-left: 4px solid var(--p);
    line-height: 1.8;
}
.lore-section p { margin-bottom: 1rem; }

.gameplay-section { background: var(--card); padding: 2rem; border-radius: var(--r-md); margin-bottom: 2rem; border: 2px solid var(--p); }
.gameplay-section p      { margin-bottom: 1rem; line-height: 1.8; }
.gameplay-section strong { color: var(--p); }

/* Stats radar + barres */
.stats-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    align-items: center;
}
.stats-radar  { max-width: 600px; width: 100%; margin: 0 auto; padding: 3rem; }
.stats-values { display: flex; flex-direction: column; gap: .75rem; }

/* stat-item version grille (hero-template dynamique) */
.stat-item { display: grid; grid-template-columns: 90px 40px 1fr; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.stat-name { font-weight: 700; color: #495057; font-size: .9rem; }
.stat-val  { font-family: 'Courier New', monospace; font-weight: bold; color: var(--text); text-align: right; }
.stat-bar-wrap { background: var(--neutral-300); border-radius: 0; height: 8px; overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 0; transition: width .6s ease; }


/* Passive & abilities sur pages héros */
.passive-section { margin: 2rem 0; }
.passive-card { background: var(--bg); border-left: 5px solid var(--p); border-radius: 0; padding: 1.2rem 1.5rem; }
.passive-card h3 { margin: 0 0 .5rem; color: var(--text); }
.passive-card p  { margin: 0; color: var(--text-secondary); line-height: 1.6; }

.placeholder-block {
    background: repeating-linear-gradient(-45deg, #f8f9fa, #f8f9fa 10px, #f1f3f5 10px, #f1f3f5 20px);
    border: 2px dashed var(--border);
    border-radius: 0;
    padding: 1.2rem 1.5rem;
    color: var(--faint);
    font-style: italic;
    text-align: center;
}

.hero-not-found { max-width: 500px; margin: 5rem auto; text-align: center; color: var(--muted); }
.hero-not-found h2 { color: #c92a2a; }

/* ── Badges inline (partagés par toutes les pages) ────────── */

/* Badge de type — petite pilule */
.type-badge {
    padding: .2rem .4rem;
    border-radius: 0;
    font-size: .75rem;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    white-space: nowrap;
    /* Toutes les bulles de type ont la même largeur (calée sur le plus long
       nom, « Électrique »), quel que soit le nombre de lettres. min-width en em
       → reste proportionnel quand la police change selon le contexte. */
    min-width: 6.8em;
    text-align: center;
    box-sizing: border-box;
}

/* Badge de catégorie de compétence */
.cat-badge       { font-size: .75rem; padding: .15rem .5rem; border-radius: 0; font-weight: bold; }
.cat-Physique    { background: #fff3bf; color: #7c4d00; }
.cat-Spéciale    { background: #d0ebff; color: #1864ab; }
.cat-Effet       { background: #e9fac8; color: #2b8a3e; }

/* Badge de sous-catégorie */
.subcategory-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: bold;
    padding: .15rem .5rem;
    border-radius: 0;
    background: var(--neutral-300);
    color: var(--neutral-800);
    border: 1px solid var(--neutral-500);
    vertical-align: middle;
    margin-left: .3rem;
}
.subcategory-label { font-size: .7rem; color: var(--faint); font-style: italic; display: block; }

/* Badge de priorité */
.priority-badge { font-size: .75rem; padding: .15rem .45rem; border-radius: 0; font-weight: bold; white-space: nowrap; }
.priority-plus  { background: #d3f9d8; color: #2f9e44; }
.priority-minus { background: #ffe3e3; color: #c92a2a; }
.priority-zero  { background: var(--neutral-200); color: #868e96; }

/* Valeur de ratio */
.ratio-val { font-family: 'Courier New', monospace; font-weight: bold; color: var(--s); }

/* ── Compétences & Objets — éléments partagés ─────────────── */

/* Titre de section avec fond (actives / passives) */
h2.abilities-section-title {
    font-size: 2rem;
    color: var(--text);
    margin: 2.5rem 0 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-hover);
    border-left: 6px solid var(--p);
    border-radius: 0;
    scroll-margin-top: 100px;
}

/* Carte compétence / objet */
.ability-card {
    background: var(--bg);
    padding: 1.2rem 1.4rem;
    border-radius: var(--r-md);
    border-left: 4px solid var(--p);
    transition: all .25s ease;
    margin-bottom: .75rem;
}
.ability-card:hover { background: var(--bg-hover); transform: translateX(4px); border-left-width: 6px; }
.ability-card h4 { color: var(--text); margin: 0 0 .5rem; font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ability-card p  { margin: .75rem 0 .5rem; line-height: 1.6; }
.ability-card .meta-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .88rem; color: var(--text-secondary); margin-bottom: .6rem; }
.ability-card .meta-row span strong { color: var(--text); }
.ability-card .effect-text { font-size: .95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: .5rem; }
.ability-card .learned-by  { font-size: .82rem; color: var(--muted); font-style: italic; }
.ability-card .learned-by strong { color: var(--p); font-style: normal; }

/* Filtres de recherche */
.moves-filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.moves-filters input,
.moves-filters select,
.items-toolbar input {
    padding: .6rem 1rem;
    border: 2px solid var(--p);
    border-radius: 0;
    font-size: .95rem;
    font-family: inherit;
    background: var(--card);
    /* Sans couleur explicite, un <select> retombe sur le noir par défaut du
       navigateur → illisible sur fond sombre. On force la couleur du thème. */
    color: var(--text);
}
/* Les options du menu déroulant suivent aussi le thème (fond + texte). */
.moves-filters select option { background: var(--card); color: var(--text); }
.moves-filters input { flex-grow: 1; min-width: 180px; }

.items-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.items-toolbar input { flex-grow: 1; min-width: 200px; }

/* Compteurs de résultats */
.moves-count,
.items-count { font-size: .85rem; color: var(--faint); margin-bottom: 1rem; text-align: right; }

/* Contrôles de tri */
.sort-controls {
    background: var(--card-2);
    padding: .5rem 1rem;
    border-radius: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    flex-wrap: wrap;
}
.sortable-btn { cursor: pointer; user-select: none; padding: .5rem 1rem; border-radius: var(--r-sm); font-size: .95rem; display: inline-flex; align-items: center; color: var(--text); transition: background .15s; }
.sortable-btn:hover       { background: var(--bg-hover); }
.sortable-btn.sort-active { background: var(--bg-hover); color: var(--text); font-weight: bold; }
.sort-arrow { margin-left: 6px; font-size: .8rem; color: var(--p); min-width: 12px; display: inline-block; text-align: center; }

/* Table learnset */
.learnset-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: .5rem; }
.learnset-table th { background: var(--card-2); padding: .7rem 1rem; text-align: left; border-bottom: 2px solid var(--border); font-weight: 700; color: var(--text-secondary); }
.learnset-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--neutral-200); vertical-align: middle; }
.learnset-table tbody tr:hover { background: var(--bg-hover); }

/* Pas de résultat */
.no-results { grid-column: 1 / -1; text-align: center; padding: 3rem; color: var(--faint); font-style: italic; font-size: 1rem; }

/* Grille objets */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .85rem; }
.item-card { background: var(--bg); padding: 1.1rem 1.3rem; border-radius: var(--r-md); border-left: 4px solid var(--p); transition: all .2s ease; }
.item-card:hover { background: var(--bg-hover); transform: translateX(3px); border-left-width: 6px; }
.item-card h4 { margin: 0 0 .45rem; font-size: 1.05rem; color: var(--text); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.item-card p  { margin: 0; font-size: .92rem; color: var(--text-secondary); line-height: 1.6; }

/* ── Teambuilder (jouer.html) ─────────────────────────────── */
.roster-container { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

.roster-slot {
    width: 130px; height: 150px;
    border: 2px dashed var(--border);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer;
    background: var(--bg);
    transition: all .2s ease;
    position: relative;
    text-align: center;
    padding: .5rem;
}
.roster-slot:hover { border-color: var(--p); background: var(--bg-hover); }
.roster-slot.active {
    border: 3px solid var(--p);
    background: var(--bg-hover);
    box-shadow: 0 0 15px rgba(119,26,27,.4);
    transform: translateY(-2px);
}
.roster-slot.filled { border: 2px solid var(--border); border-bottom: 4px solid var(--p); background: var(--card); }

.slot-empty { font-size: 2.5rem; color: var(--faint); font-weight: bold; }
.hero-mini-name { font-weight: bold; font-size: 1rem; margin-bottom: .3rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

.remove-hero-btn {
    position: absolute; top: 5px; right: 5px;
    background: #ff6b6b; color: #fff;
    border: none; border-radius: 50%;
    width: 22px; height: 22px;
    font-size: .8rem; font-weight: bold;
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    transition: background .2s; z-index: 2;
}
.remove-hero-btn:hover { background: #c92a2a; }

.edit-hero-btn {
    position: absolute; top: 5px; left: 5px;
    background: var(--p); color: #fff;
    border: none; border-radius: 50%;
    width: 22px; height: 22px;
    font-size: .65rem;
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    transition: background .2s; z-index: 2;
}
.edit-hero-btn:hover { background: #5a1314; }

.roster-slot.filled:hover .remove-hero-btn,
.roster-slot.filled:hover .edit-hero-btn { display: flex; }


/* Table héros dans le teambuilder */
.hero-db-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .95rem; }
.hero-db-table tbody tr { transition: background .2s ease; cursor: pointer; }
.hero-db-table tbody tr:hover:not(.hero-already-picked) { background: var(--bg-hover); }
.hero-db-table tbody tr.hero-already-picked { opacity: .4; cursor: not-allowed; background: var(--card-2); }

.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; padding: 1rem !important; border-bottom: 2px solid var(--border); transition: background .15s; }
.sortable-th:hover       { background: var(--bg-hover); }
.sortable-th.sort-active { background: var(--bg-hover); color: var(--p); }

.stat-col { text-align: center; padding: .8rem; font-family: 'Courier New', monospace; font-weight: 600; }

/* Badge "déjà sélectionné" */
.picked-badge { display: inline-block; background: var(--p); color: #fff; font-size: .7rem; font-weight: bold; padding: .1rem .4rem; border-radius: 0; margin-left: .4rem; vertical-align: middle; }

/* Scrollbar table */
.table-container::-webkit-scrollbar       { width: 8px; }
.table-container::-webkit-scrollbar-track { background: var(--neutral-200); }
.table-container::-webkit-scrollbar-thumb { background: var(--neutral-500); border-radius: 0; }
.table-container::-webkit-scrollbar-thumb:hover { background: var(--p); }

/* Modal éditeur de héros */
#heroEditorOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 3000; overflow-y: auto; padding: 2rem 1rem; }
.hero-editor-modal { max-width: 680px; margin: 0 auto; background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.hero-editor-header { padding: 1.5rem 2rem; background: var(--grad); color: #fff; display: flex; justify-content: space-between; align-items: center; }
.hero-editor-body   { padding: 1.5rem 2rem; }
.hero-editor-footer { padding: 1rem 2rem; background: var(--bg); display: flex; justify-content: flex-end; gap: 1rem; }
.hero-editor-section-title { color: var(--p); font-size: 1.1rem; font-weight: bold; margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--p); }

.modal-close-btn { background: rgba(255,255,255,.2); border: none; color: #fff; font-size: 1.4rem; cursor: pointer; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.modal-close-btn:hover { background: rgba(255,255,255,.4); }

/* Spread */
.spread-row { display: grid; grid-template-columns: 55px 1fr 55px 40px; align-items: center; gap: .75rem; background: var(--bg); padding: .6rem 1rem; border-radius: 0; margin-bottom: .5rem; }
.spread-label { font-weight: bold; color: var(--p); font-size: .95rem; }
.spread-base  { font-size: .75rem; color: var(--faint); }
.spread-controls { display: flex; align-items: center; gap: .5rem; }

.spread-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--p); background: var(--p); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.spread-btn:disabled { border-color: var(--faint); background: var(--neutral-200); color: var(--faint); cursor: default; }

.spread-bar-wrap { flex-grow: 1; background: var(--neutral-300); border-radius: 0; height: 6px; overflow: hidden; }
.spread-bar-fill { background: linear-gradient(90deg, var(--p), var(--s)); height: 100%; transition: width .2s; }
.spread-bonus-val { font-family: monospace; font-weight: bold; font-size: .9rem; min-width: 28px; text-align: center; }
.spread-effective { font-size: 1.2rem; font-weight: bold; color: var(--text); text-align: right; white-space: nowrap; }
.ev-input {
    width: 100%; padding: 0.2rem 0.25rem;
    border: 1px solid var(--neutral-500); border-radius: 0;
    font-size: 0.82rem; text-align: center;
    font-family: monospace; color: var(--text);
    background: var(--card);
}
.ev-input:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 2px rgba(119,26,27,.2); }
.ev-input.ev-plus  { border-color: #51cf66; color: #2f9e44; background: #f4fbe8; font-weight: bold; }
.ev-input.ev-minus { border-color: #fa5252; color: #c92a2a; background: #fff5f5; font-weight: bold; }
.tb-col-stats .ev-input { font-size: 0.72rem; padding: 0.15rem 0.2rem; }
.spread-pool-display { background: var(--bg-hover); border: 1px solid var(--p); border-radius: 0; padding: .5rem 1rem; font-size: .95rem; color: var(--text); margin-bottom: .75rem; text-align: center; }


/* ── Tooltips ─────────────────────────────────────────────── */
.tooltip-container { position: relative; }
.tooltip {
    position: absolute;
    bottom: 110%; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.95);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--r-md);
    width: 350px; max-width: 90vw;
    opacity: 0; visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
    z-index: 1000;
    box-shadow: var(--shadow-md);
    font-size: .9rem;
    line-height: 1.6;
}
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: rgba(0,0,0,.95); }
.tooltip-container:hover .tooltip { opacity: 1; visibility: visible; }
.tooltip p              { margin: .5rem 0; }
.tooltip p:first-child  { margin-top: 0; }
.tooltip p:last-child   { margin-bottom: 0; }
.tooltip strong         { color: #ffd43b; }

/* ── Footer ───────────────────────────────────────────────── */
footer { background: var(--chrome-bg); color: var(--chrome-text); text-align: center; padding: 2rem; margin-top: 4rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {

    /* === Général === */
    body { overflow-x: hidden; }

    /* === Navbar — hamburger === */
    .nav-hamburger {
        display: flex;
        align-items: center; justify-content: center;
        background: none; border: none; color: #fff;
        font-size: 1.6rem; cursor: pointer;
        width: 44px; height: 44px;
        border-radius: var(--r-sm);
        flex-shrink: 0;
    }
    .nav-hamburger:hover { background: rgba(255,255,255,.1); }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: rgba(0,0,0,.97);
        padding: .5rem 0;
        gap: 0;
        z-index: 1001;
    }
    .nav-menu.nav-open { display: flex; }
    .nav-menu li { width: 100%; }
    .nav-menu > li > a {
        display: flex; align-items: center;
        padding: .75rem 1.5rem;
        border-radius: 0;
        min-height: 44px;
    }

    /* Dropdown mobile : statique, indenté */
    .nav-dropdown { position: static; }
    .nav-dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,.05);
        border-radius: 0;
        padding: 0;
        min-width: unset;
    }
    .nav-dropdown.nav-dropdown-open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu li a { padding: .65rem 1.5rem .65rem 2.5rem; min-height: 44px; display: flex; align-items: center; }

    /* Logo plus compact */
    .logo { font-size: 1.3rem; }

    /* nav-container relatif pour le menu absolu */
    .nav-container { position: relative; }

    /* === Index — hero section === */
    .hero-title    { font-size: 2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .hero-buttons  { flex-direction: column; align-items: stretch; gap: .75rem; }
    .hero-section  { padding: 2.5rem 1rem; min-height: 50vh; }

    /* === Types grid === */
    .types-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .6rem; }

    /* === Panthéon === */
    .herodex-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; padding: 1rem 0; }

    /* === Compétences / Objets === */
    .rules-content { padding: 1.5rem 1rem; }
    .items-grid { grid-template-columns: 1fr; }

    /* === Pages héros individuelles === */
    .hero-detail-container { margin: 0; border-radius: 0; }
    .hero-detail-header { padding: 1.5rem 1rem; }
    .hero-detail-header h1 { font-size: 1.8rem; margin-bottom: .5rem; }
    .hero-detail-body { padding: 1.5rem 1rem; }
    .hero-detail-body h2 { font-size: 1.4rem; }
    .stats-container { grid-template-columns: 1fr; gap: 1rem; }
    .stats-radar { padding: .5rem; max-width: 100%; }
    .hero-nav-btn { max-width: 120px; font-size: .75rem; padding: .4rem .65rem; }

    /* === Teambuilder === */
    .roster-container { gap: .6rem; justify-content: center; }
    .roster-slot { width: 105px; height: 125px; }
    /* edit/remove toujours visibles sur mobile (pas de hover) */
    .roster-slot.filled .remove-hero-btn,
    .roster-slot.filled .edit-hero-btn  { display: flex; }
    .remove-hero-btn { width: 26px; height: 26px; }
    .edit-hero-btn   { width: 26px; height: 26px; }

    /* Modal éditeur — pleine largeur */
    #heroEditorOverlay { padding: 0; }
    .hero-editor-modal { max-width: 100%; margin: 0; border-radius: 0; min-height: 100vh; min-height: 100dvh; }
    .hero-editor-header { padding: 1rem 1.25rem; }
    .hero-editor-body   { padding: 1rem 1.25rem; }
    .hero-editor-footer { padding: .75rem 1.25rem; flex-direction: column; align-items: stretch; }
    .hero-editor-footer .btn { width: 100%; text-align: center; }

    /* Spread PC */
    .spread-row { grid-template-columns: 42px 1fr 52px; gap: .5rem; padding: .5rem .75rem; }
    .spread-btn { width: 32px; height: 32px; font-size: 1.2rem; }
    .spread-effective { font-size: 1rem; }

    /* Table héros en scroll horizontal */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hero-db-table { min-width: 600px; }

    /* Options dropdown compétences — plus hautes pour le doigt.
       Sélecteurs à 2 classes pour primer sur les règles desktop compactées
       (min-height réduit), quel que soit l'ordre dans le fichier. */
    .tb-col-moves .custom-option { min-height: 44px; }
    .tb-col-moves .custom-select-trigger { min-height: 44px; }

    /* === Lead Pick === */
    .lead-pick-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
    .lead-pick-card { padding: .75rem .5rem; }

    /* === Team Preview === */
    .team-preview-container { flex-direction: column; gap: 1rem; }
    .team-preview-column { max-width: 100%; min-width: unset; }

    /* === Combat — empilement vertical ===
       NB : pour le combat, le bloc mobile FAISANT FOI est plus bas dans le
       fichier (« Ce bloc est placé APRÈS les règles desktop ») : à
       spécificité égale il écrase ce qui suit. On garde ces règles pour
       les propriétés qu'il ne redéfinit pas (log, switch, noms). */
    .combat-field {
        grid-template-columns: 1fr;
        padding: 1rem .75rem;
        gap: .75rem;
    }
    .combat-p1,
    .combat-p2 { align-items: center; }
    .combat-hero-card { min-width: unset; width: 100%; padding: .75rem 1rem; }
    /* Sur mobile, pas d'asymétrie de LARGEUR (les deux cartes pleine largeur) :
       la distinction passe par l'accent (p1) et l'atténuation (p2). Sélecteur
       volontairement plus spécifique que la règle desktop (.combat-field …). */
    .combat-field .combat-p1 .combat-hero-card,
    .combat-field .combat-p2 .combat-hero-card { width: 100%; }
    .combat-hero-name { font-size: 1rem; }

    /* Pile centrale en ligne (terrain + hazards côte à côte) */
    .combat-center-stack { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .4rem; }

    /* Log de combat moins haut */
    .combat-log { max-height: 150px; font-size: .85rem; }

    /* Boutons compétences */
    .combat-move-btn { padding: .65rem .75rem; min-height: 44px; }
    .combat-move-name { font-size: .9rem; }
    .combat-move-stats { font-size: .75rem; }

    /* Switch cards */
    .combat-switch-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .combat-switch-card { min-height: 44px; }

    /* Skip — en bas de l'écran */
    #skipBtn { right: .75rem; bottom: 1rem; top: auto; transform: none; }

    /* Bandeau 2 joueurs — taille augmentée (utile car on se passe le téléphone) */
    .combat-player-banner { font-size: 1.1rem; padding: .75rem 1rem; }

    /* === Tooltips — support tap (classe .tooltip-open ajoutée par JS) === */
    .tooltip-container .tooltip.tooltip-open { opacity: 1; visibility: visible; }

    /* === Cibles tactiles min 44px === */
    .nav-menu a,
    .combat-move-btn,
    .combat-switch-card,
    .lead-pick-card,
    .spread-btn,
    .modal-close-btn { min-height: 44px; }

    /* === Anti-zoom iOS ===
       Safari iPhone zoome automatiquement dès qu'on touche un champ dont la
       police fait moins de 16px. On force 16px sur tous les champs de saisie
       pour empêcher ce zoom parasite (la taille visuelle change à peine). */
    input, select, textarea { font-size: 16px; }

}

/* Sur écran sans hover (tactile), désactiver le :hover CSS des tooltips
   pour éviter qu'ils restent bloqués ouverts après un tap. */
@media (hover: none) {
    .tooltip-container:hover .tooltip { opacity: 0; visibility: hidden; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.5rem; }
    .roster-slot { width: 90px; height: 110px; }
    .hero-mini-name { font-size: .85rem; max-width: 78px; }
    .hero-detail-header h1 { font-size: 1.5rem; }
    .combat-arena { padding: .5rem; }
}

/* Navigation prev/next dans le header héros */
.hero-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
.hero-nav-center {
    text-align: center;
    flex-grow: 1;
}
.hero-nav-btn {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-nav-btn:hover        { background: rgba(255,255,255,0.35); transform: translateY(-2px); }
.hero-nav-disabled         { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); cursor: default; }
.hero-nav-disabled:hover   { transform: none; }

/* ── Bouton flottant retour liste héros ── */
.btn-back-floating {
    position: fixed;
    top: 5.5rem;
    left: 1rem;
    z-index: 500;
    background: var(--p);
    color: #fff;
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: var(--r-sm);
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.btn-back-floating:hover {
    background: #5a1314;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,.35);
}

/* ── Barre de recherche inter-héros ── */
.hero-search-wrap {
    position: relative;
    display: inline-block;
    margin-top: 0.9rem;
    width: 100%;
    max-width: 280px;
}
.hero-search-input {
    width: 100%;
    padding: 0.4rem 0.85rem;
    border-radius: 0;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: background 0.2s, border-color 0.2s;
    box-sizing: border-box;
}
.hero-search-input::placeholder { color: rgba(255,255,255,0.65); }
.hero-search-input:focus {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.75);
}
/* Texte du placeholder lisible sur fond clair (Électrique, Glace, Lumière) */
.hero-detail-header.Électrique .hero-search-input,
.hero-detail-header.Glace      .hero-search-input,
.hero-detail-header.Lumière    .hero-search-input {
    color: var(--text);
    border-color: rgba(0,0,0,0.25);
    background: rgba(0,0,0,0.08);
}
.hero-detail-header.Électrique .hero-search-input::placeholder,
.hero-detail-header.Glace      .hero-search-input::placeholder,
.hero-detail-header.Lumière    .hero-search-input::placeholder { color: rgba(0,0,0,0.45); }

.hero-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card);
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 200;
    text-align: left;
    scrollbar-width: thin;
}
.hero-search-dropdown::-webkit-scrollbar { width: 5px; }
.hero-search-dropdown::-webkit-scrollbar-thumb { background: var(--neutral-500); border-radius: 0; }
.hero-search-dropdown.open { display: block; }

.hero-search-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    text-decoration: none;
    color: var(--text);
    font-size: 0.88rem;
    transition: background 0.12s;
    border-bottom: 1px solid var(--neutral-200);
}
.hero-search-item:last-child { border-bottom: none; }
.hero-search-item:hover,
.hero-search-item.active { background: #fdf0f0; }
.hero-search-item mark {
    background: none;
    color: var(--p);
    font-weight: 700;
}
.hero-search-name { flex: 1; font-weight: 600; }

/* Bouton haut de page */
#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: linear-gradient(135deg, #771a1b, #5a1314);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
    z-index: 999;
}
#backToTop.visible { opacity: 1; visibility: visible; }
#backToTop:hover   { transform: translateY(-4px); }

/* Styles temporaires pour le composant "Dropdown" des attaques */
.custom-move-slot {
    margin-bottom: 0.4rem;
    position: relative;
}
.custom-select {
    width: 100%;
}
.custom-select-trigger {
    width: 100%;
    padding: 0.32rem 0.7rem;
    border: 2px solid var(--p);
    border-radius: 0;
    background: var(--card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.custom-select-trigger:hover {
    box-shadow: 0 0 0 3px rgba(119, 26, 27, 0.1);
}
.custom-select-trigger::after {
    content: "▼";
    font-size: 0.8em;
    color: var(--p);
    margin-left: 10px;
}
.custom-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--neutral-500);
    border-radius: 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    max-height: 380px;
    overflow-y: auto;
    margin-top: 4px;
}
.custom-select-dropdown.show {
    display: block;
    z-index: 400;
}
.custom-option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.18rem 0.7rem;
    border-bottom: 1px solid var(--neutral-200);
    cursor: pointer;
    gap: 0;
    transition: background 0.15s;
}
.opt-row-1 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.opt-row-2 {
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1.2;
    white-space: normal;
}
/* Badges compacts UNIQUEMENT dans le dropdown des compétences (les badges
   globaux restent à leur taille normale ailleurs). Réduit la hauteur de la
   1re ligne de chaque option. */
.custom-option .type-badge,
.custom-option .cat-badge {
    font-size: 0.6rem;
    padding: 0.04rem 0.3rem;
}
.custom-option:last-child {
    border-bottom: none;
}
.custom-option:hover {
    background: var(--bg-hover);
}
.custom-option.empty-option {
    justify-content: center;
    font-style: italic;
    color: var(--faint);
}
.move-trigger-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    overflow: hidden;
}
.move-trigger-name {
    flex: 1;
    min-width: 0;
    font-weight: bold;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.move-trigger-badges {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.opt-col-name {
    flex: 1;
    min-width: 0;
    font-weight: normal;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 0.82rem;
}
.opt-col-badges {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    align-items: center;
}
.opt-col-ut {
    width: 50px;
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
    flex-shrink: 0;
}
.opt-col-effect {
    flex-grow: 1;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: left;
    line-height: 1.3;
}

/* ── Sélecteur d'objet style Showdown ── */
.item-search-input {
    width: 100%; padding: 0.6rem 1rem;
    border: 2px solid var(--p); border-radius: 0;
    background: var(--card); color: var(--text);
    font-size: 0.95rem; font-family: inherit;
    margin-bottom: 0.6rem; box-sizing: border-box;
}
.item-list-container {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 0;
}
.item-list-container::-webkit-scrollbar { width: 6px; }
.item-list-container::-webkit-scrollbar-thumb { background: var(--neutral-500); border-radius: 0; }
.item-list-container::-webkit-scrollbar-thumb:hover { background: #771a1b; }

.item-option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.32rem 0.7rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.12s;
}
.item-option:last-child { border-bottom: none; }
.item-option:hover      { background: var(--bg-hover); }
.item-option.item-selected {
    background: var(--bg-hover);
    border-left: 3px solid var(--p);
    padding-left: calc(1rem - 3px);
}
.item-option-none {
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer; color: var(--muted);
    font-style: italic; font-size: 0.82rem;
    transition: background 0.12s;
}
.item-option-none:hover         { background: var(--bg-hover); }
.item-option-none.item-selected { background: var(--bg-hover); border-left: 3px solid var(--p); padding-left: calc(1rem - 3px); }

.item-opt-name   { font-weight: 700; font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-opt-effect { font-size: 0.72rem; color: var(--muted); line-height: 1.25; word-break: break-word; }

/* Indicateur objet sur le slot */
.slot-item-indicator {
    font-size: 0.68rem; color: #51cf66; font-weight: bold;
    margin-top: 2px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}

/* ============================================================
   JOUER.HTML — vues et composants propres à la page de jeu
   ============================================================ */

/* ── Vues principales ── */
.view { display: none; padding: 2rem; }
.view.active { display: block; }

.view-card {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}

/* (#mainView .view-card : voir la section « jouer.html » plus bas) */

.mode-select,
.team-select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: var(--r-sm);
    border: 2px solid var(--p);
    margin-bottom: 1.5rem;
    background: var(--card);
    color: var(--text);
}
.mode-select::placeholder,
.team-select::placeholder { color: var(--muted); opacity: 1; }
.mode-select option,
.team-select option { background: var(--card); color: var(--text); }

.team-select-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text);
}

#teamSelector { display: none; }

.main-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.main-actions .btn { font-size: 1.1rem; padding: 1rem 2rem; }
.main-actions .btn-secondary { border-color: var(--p); color: var(--p); }

/* ── Bouton « Jouer » en cours de recherche d'adversaire ── */
.searching-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.searching-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--p);
    padding: 1rem 1.4rem;
}
.searching-spinner {
    width: 1.05em;
    height: 1.05em;
    border: 2px solid color-mix(in srgb, var(--p) 35%, transparent);
    border-top-color: var(--p);
    border-radius: 50%;
    animation: searching-spin 0.7s linear infinite;
}
@keyframes searching-spin { to { transform: rotate(360deg); } }

/* Sélecteurs verrouillés pendant la recherche */
.mode-select:disabled,
.team-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Vue liste équipes ── */
#teamBuilderView .back-btn {
    position: fixed;
    top: 52px;
    left: 10px;
    z-index: 500;
    margin-bottom: 0;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 0;
    transition: background 0.15s;
    white-space: nowrap;
}
#teamBuilderView .back-btn:hover { background: rgba(255,255,255,0.25); }
#teamBuilderView .view-card { max-width: 1000px; margin: 0 auto; }

.teams-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.teams-header h2 { margin: 0; }

.team-list-item {
    background: var(--bg);
    padding: 1.5rem;
    border-radius: var(--r-md);
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.team-list-item h3 { margin: 0 0 0.5rem; }
.team-list-item p  { color: var(--muted); margin: 0; font-size: 0.9rem; }
.team-list-item-actions { display: flex; gap: 0.5rem; }
.team-list-item-actions .btn { padding: 0.5rem 1rem; }
.team-list-item-actions .btn-delete { border-color: #dc3545; color: #dc3545; }

/* ── Vue teambuilder ── */
#teamEditorView .view-card {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.editor-header {
    background: var(--grad);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.editor-header-left {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-grow: 1;
}
.editor-header h2 { color: #fff; margin: 0; font-size: 1.5rem; }
.editor-header-actions { display: flex; gap: 1rem; }

#teamNameInput {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    font-weight: bold;
    width: 250px;
    background: rgba(255,255,255,0.9);
}
.btn-editor-cancel {
    padding: 0.5rem 1.5rem;
    background: rgba(0,0,0,0.2);
    border: none;
    color: #fff;
}
.btn-editor-save {
    padding: 0.5rem 1.5rem;
    background: var(--card);
    color: var(--s);
    border: none;
    box-shadow: none;
}

.editor-body { padding: 2rem; }

.roster-section { margin-bottom: 2rem; }
.roster-section-header {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#teamCountDisplay { color: var(--p); }
.roster-hint { font-size: 0.85rem; color: var(--faint); margin-top: 0.5rem; }

.hero-db-wrapper {
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}
.hero-db-filters {
    background: var(--bg);
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
#heroSearchInput {
    flex-grow: 1;
    min-width: 200px;
    padding: 0.75rem;
    border: 1px solid var(--neutral-500);
    border-radius: var(--r-sm);
    font-size: 1rem;
}
/* Barre des filtres actifs (sous la recherche) */
.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: #fdf0f0;
    border-bottom: 1px solid #dde;
    flex-shrink: 0;
}
.filter-clear-all {
    margin-left: auto;
    background: none;
    border: 1px solid var(--neutral-500);
    border-radius: 0;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
}
.filter-clear-all:hover { background: var(--neutral-200); color: var(--text); }

/* Coche sur les éléments déjà filtrés */
.search-filter-active { background: #eef0ff !important; }
.filter-check { font-size: 0.8rem; color: #5a6acf; font-weight: 700; }
.active-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: default;
}
.active-move-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    background: #fde8e8;
    color: #3a3a6a;
    border: 1px solid #c5c8f0;
    border-radius: 0;
    padding: 0.15rem 0.55rem;
    cursor: default;
}
.type-filter-clear {
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.1rem;
    cursor: pointer;
    opacity: 0.75;
}
.type-filter-clear:hover { opacity: 1; }

/* Conteneur résultats de recherche */
.search-results-container {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

/* En-tête de section (Types / Héros / Compétences / Passifs) */
.search-section-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted, #888);
    padding: 0.6rem 0.75rem 0.3rem;
    border-bottom: 1px solid var(--border, #e0e0e0);
    background: var(--bg, #fff);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Ligne de types cliquables */
.search-types-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
}
.search-type-clickable {
    cursor: pointer;
    transition: transform 0.1s, filter 0.1s;
}
.search-type-clickable:hover {
    transform: scale(1.08);
    filter: brightness(1.1);
}

/* Ligne générique de résultat */
.search-result-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--neutral-200);
}
.search-result-row:hover:not(.hero-already-picked) { background: var(--bg-hover, #eef0ff); }
.search-result-row.hero-already-picked { opacity: 0.45; cursor: not-allowed; }

.search-result-name   { font-weight: 600; min-width: 0; }
.search-result-types  { display: flex; gap: 0.25rem; }
.search-result-passive-name { color: var(--muted, #888); font-size: 0.83rem; }

/* Lignes compétence / passif cliquables */
.search-filterable { cursor: pointer; }
.search-filterable:hover { background: var(--bg-hover, #eef0ff); }
.search-result-cat    { font-size: 0.8rem; color: var(--muted, #888); }
.search-result-power  { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-left: auto; }

/* Hint dans l'en-tête de section */
.search-section-hint {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--muted, #aaa);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.4rem;
}
.search-result-effect {
    font-size: 0.82rem;
    color: var(--muted, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

/* Aucun résultat */
.search-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--muted, #888);
    font-style: italic;
}

/* Indicateur "et N autres" */
.search-more {
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    color: var(--muted, #888);
    font-style: italic;
}

/* ── Modal validation ── */
/* ── Modal Import/Export ──────────────────────────────────────────── */
#importExportOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#importExportOverlay.open { display: flex; }

.ie-modal {
    background: var(--card);
    border-radius: 0;
    width: min(680px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ie-modal-header {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1f0a0a, #771a1b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ie-modal-header h3 { margin: 0; font-size: 1.05rem; }
.ie-modal-body {
    padding: 1rem 1.5rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ie-hint {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}
.ie-textarea {
    flex: 1;
    min-height: 360px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    border: 1.5px solid var(--neutral-400);
    border-radius: 0;
    padding: 0.75rem 1rem;
    resize: vertical;
    line-height: 1.7;
    outline: none;
    transition: border-color 0.2s;
    color: var(--text);
}
.ie-textarea:focus { border-color: #771a1b; }
.ie-modal-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--neutral-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
}

#validationOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 4000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#validationOverlay.open { display: flex; }

.validation-modal {
    background: var(--card);
    border-radius: 0;
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.validation-header {
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.validation-header.ok    { background: linear-gradient(135deg, #2f9e44, #51cf66); }
.validation-header.warn  { background: linear-gradient(135deg, #e67700, #ffd43b); }
.validation-header.error { background: linear-gradient(135deg, #c92a2a, #ff6b6b); }
.validation-header h3    { color: #fff; margin: 0; font-size: 1.2rem; }

.validation-body { padding: 1.25rem 1.75rem; }

.validation-section-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1rem 0 0.5rem;
}
.validation-section-title.errors   { color: #c92a2a; }
.validation-section-title.warnings { color: #e67700; }

.validation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    font-size: 0.92rem;
    margin-bottom: 0.35rem;
    line-height: 1.45;
}
.validation-item.error   { background: #fff5f5; color: #c92a2a; }
.validation-item.warning { background: #fff8e1; color: #7c4d00; }
.validation-item.info    { background: #e8f4fd; color: #1864ab; }
.validation-icon { flex-shrink: 0; font-size: 1rem; }

.validation-footer {
    padding: 1rem 1.75rem;
    background: var(--bg);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
.btn-val-cancel { border-color: var(--faint); color: var(--muted); padding: 0.6rem 1.4rem; }
.btn-val-launch { padding: 0.6rem 1.4rem; }

.hero-editor-name {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.4rem;
}
.hero-editor-ability {
    margin-left: 0.75rem;
    font-size: 0.85rem;
    opacity: 0.85;
}
.btn-editor-footer-cancel { border-color: var(--faint); color: var(--muted); }

.slot-total   { font-size: 0.75rem; color: var(--muted); }
.slot-spread  { font-size: 0.7rem; color: #51cf66; margin-top: 2px; }

.td-name   { padding: 0.8rem; font-weight: bold; font-size: 1rem; color: var(--text); }
.td-type   { padding: 0.8rem; }
.td-abil   { padding: 0.8rem; color: var(--text-secondary); font-style: italic; }
.td-total  { font-weight: bold; color: var(--p); }

/* Menu de tri mobile : caché par défaut (desktop trie via les en-têtes). */
.mobile-sort-select, .mobile-sort-dir { display: none; }

/* ── Tableau des héros (teambuilder) → cartes empilées sur mobile ──
   Sur téléphone, le tableau à 10 colonnes scrollait horizontalement. On
   transforme chaque ligne en carte : nom + types en haut, passif en dessous,
   puis une bande de stats avec libellés (PV/ATQ/…) — le tri par stat reste
   donc utile. Placé APRÈS les styles de base (.td-name, etc.) pour primer à
   spécificité égale, et après .hero-db-table{min-width:600px} plus haut. */
@media (max-width: 768px) {
    .tb-hero-db-scroll { overflow-x: hidden; }
    .tb-hero-db-scroll .hero-db-table { min-width: 0; width: 100%; }
    .tb-hero-db-scroll .hero-db-table thead { display: none; }
    .tb-hero-db-scroll .hero-db-table tbody { display: block; }

    .tb-hero-db-scroll .hero-db-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem 0.5rem;
        padding: 0.6rem 0.7rem;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        margin-bottom: 0.45rem;
        background: var(--card);
    }
    .tb-hero-db-scroll .hero-db-table td { padding: 0; border: none; }

    .tb-hero-db-scroll .td-name { flex: 1 1 55%; order: 1; font-size: 1rem; }
    .tb-hero-db-scroll .td-type { flex: 0 0 auto; order: 2; text-align: right; }
    .tb-hero-db-scroll .td-abil { flex: 1 1 100%; order: 3; font-size: 0.82rem; }

    /* Bande de stats : 7 cellules égales sur une ligne, libellé au-dessus */
    .tb-hero-db-scroll .stat-col {
        flex: 1 1 0;
        min-width: 0;
        order: 4;
        text-align: center;
        padding: 0.22rem 0.1rem;
        font-size: 0.8rem;
        background: var(--bg);
        border-radius: 4px;
    }
    .tb-hero-db-scroll .hero-db-table td.stat-col::before {
        display: block;
        font-weight: 700;
        font-size: 0.58rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    .tb-hero-db-scroll tr td.stat-col:nth-of-type(4)::before  { content: "PV"; }
    .tb-hero-db-scroll tr td.stat-col:nth-of-type(5)::before  { content: "ATQ"; }
    .tb-hero-db-scroll tr td.stat-col:nth-of-type(6)::before  { content: "DEF"; }
    .tb-hero-db-scroll tr td.stat-col:nth-of-type(7)::before  { content: "SPA"; }
    .tb-hero-db-scroll tr td.stat-col:nth-of-type(8)::before  { content: "SPD"; }
    .tb-hero-db-scroll tr td.stat-col:nth-of-type(9)::before  { content: "VIT"; }
    .tb-hero-db-scroll tr td.stat-col:nth-of-type(10)::before { content: "TOT"; }

    /* Menu de tri mobile : barre de filtres sur deux lignes (recherche pleine
       largeur, puis le menu de tri + le bouton d'inversion). */
    #heroListPanel .hero-db-filters { flex-wrap: wrap; }
    #heroListPanel .hero-db-filters #heroSearchInput { flex: 1 1 100%; }
    .mobile-sort-select {
        display: block;
        flex: 1 1 auto;
        padding: 0.4rem 0.5rem;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: var(--card);
        color: var(--text);
    }
    .mobile-sort-dir {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        min-height: 40px;
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: var(--card);
        color: var(--text);
        font-size: 1.1rem;
        cursor: pointer;
    }
}

/* ── Loader pendant le chargement des données ── */
.data-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    font-style: italic;
}

/* ── Recherche dans la liste de compétences ── */
.move-search-wrap {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card);
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.move-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
}
.move-search-input:focus {
    outline: none;
    border-color: var(--p);
}
.move-no-result {
    padding: 1rem;
    text-align: center;
    color: var(--faint);
    font-style: italic;
    font-size: 0.9rem;
}

/* ── Ratio inline dans les options de compétence ── */
.opt-col-ratio {
    font-weight: 700;
    color: var(--p);
    min-width: 50px;
    text-align: center;
}
/* padding:0 neutralise la règle générique « .empty » (état vide des pages
   outils, padding 2.5rem) qui « fuyait » sur ce span et le gonflait en hauteur. */
.opt-col-ratio.empty { color: var(--faint); font-weight: normal; padding: 0; }

/* ── Slider de spread de PC ── */
.spread-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 100px;
    height: 6px;
    border-radius: 0;
    background: var(--neutral-300);
    outline: none;
    cursor: pointer;
    margin: 0 0.5rem;
}
.spread-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--p);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}
.spread-slider::-webkit-slider-thumb:hover  { transform: scale(1.15); }
.spread-slider::-webkit-slider-thumb:active { transform: scale(1.25); }
.spread-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--p);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.spread-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
   VUE PICK DE LEAD
   ════════════════════════════════════════════════════════════ */

.lead-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.lead-pick-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.lead-pick-card:hover {
    border-color: var(--p);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.lead-pick-card .name {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0.5rem 0 0.3rem;
}
.lead-pick-card .hp-info {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════════════════
   VUE COMBAT
   ════════════════════════════════════════════════════════════ */

/* combatView remplit toute la hauteur disponible */
#combatView {
    padding: 0;
    display: none;
    flex-direction: column;
    height: calc(100vh - 38px);     /* repli */
    height: calc(100dvh - 38px);    /* hauteur réelle visible */
    overflow: hidden;
}
#combatView.active {
    display: flex;
}

/* Arena = ligne entière : colonne gauche + colonne log droite */
.combat-arena {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* Colonne gauche : terrain + contrôles */
.combat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    gap: 0.5rem;
}

/* Colonne droite : log */
.combat-log-col {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid var(--border);
    background: var(--bg);
}

.combat-field {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: stretch;
    background: var(--field-grad);
    padding: 1.25rem 1rem;
    border-radius: var(--r-md);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.combat-side { display: flex; flex-direction: column; gap: 0.5rem; }
/* Joueur (p1) à GAUCHE, adversaire (p2) à DROITE */
.combat-p1 { align-items: flex-start; }
.combat-p2 { align-items: flex-end; }

.combat-team-strip {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.8rem;
    opacity: 0.85;
}
.team-pip {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #51cf66;
    display: inline-block;
    cursor: pointer;   /* cliquable : ouvre l'infobulle du héros */
}
.team-pip.dead { background: #495057; }
.team-pip.active-pip { box-shadow: 0 0 0 2px #fff; }
.combat-team-count { margin-left: 0.5rem; font-weight: 600; }

.combat-hero-card {
    position: relative;
    cursor: pointer;   /* cliquable : ouvre l'infobulle du héros */
    aspect-ratio: 3/4;
    width: 210px;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    background-color: var(--combat-card-bg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    color: var(--on-image);
}

/* ── Asymétrie joueur / adversaire (pistes C + F) ──
   TOI (p1) : carte plus grande + cadre/halo à l'accent du thème (halo renforcé
   par un liseré interne clair pour le contraste). ADVERSAIRE (p2) : carte plus
   petite + atténuée (désaturée/assombrie), sans accent. Aucune info supprimée. */
.combat-p1 .combat-hero-card {
    width: 230px;
    border: 2px solid var(--p);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5),
                0 0 16px 1px var(--p),
                0 2px 10px rgba(0,0,0,0.35);
}
.combat-p2 .combat-hero-card {
    width: 165px;
    filter: saturate(0.8) brightness(0.92);
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
/* Adversaire : nom plus petit + badges/équipe plus discrets (hiérarchisation) */
.combat-p2 .combat-hero-name { font-size: 0.9rem; }
.combat-p2 .boost-row       { transform: scale(0.85); transform-origin: top right; opacity: 0.9; }
.combat-p2 .combat-team-strip { transform: scale(0.9); transform-origin: top right; opacity: 0.85; }

/* Overlay de grisage sur le splash art : adoucit l'image pour le texte */
.combat-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--combat-card-overlay);
    pointer-events: none;
    z-index: 0;
}
/* Tout le contenu au-dessus de l'overlay */
.combat-hero-card > * { position: relative; z-index: 1; }

/* Slot vide — héros K.O., remplaçant pas encore entré */
.combat-hero-card.combat-hero-empty {
    background-image: none !important;
    background-color: var(--combat-empty-bg);
    border: 2px dashed var(--combat-empty-border);
    box-shadow: none;
    align-items: center;
    justify-content: center;
}
.combat-hero-card.combat-hero-empty::before { display: none; }

.combat-empty-label {
    color: rgba(255,255,255,0.6);
    font-style: italic;
    font-weight: 600;
    font-size: 1rem;
    position: relative; z-index: 1;
}

/* ── Ombre blanche sur textes noirs ── */
.combat-hero-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Type badges dans la carte héros : contour noir + ombre blanche */
.combat-hero-card .type-badge {
    border: 1px solid rgba(0,0,0,0.55) !important;
    box-shadow: 0 0 5px rgba(255,255,255,0.75) !important;
    font-size: 0.65rem;
}
.combat-hero-name {
    font-weight: 800;
    font-size: 1rem;
    color: #111;
    text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px rgba(255,255,255,0.7);
}

/* ── Contour noir + ombre blanche sur éléments colorés ── */
.combat-status {
    padding: 0.15rem 0.5rem;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.6);
    box-shadow: 0 0 5px rgba(255,255,255,0.7);
}
.combat-status-poison { background: #862e9c; }
.combat-status-burn   { background: #e67700; }

.combat-hp-bar-wrap {
    background: rgba(0,0,0,0.25);
    height: 10px;
    border-radius: 0;
    overflow: visible;
    margin: 0.3rem 0 0.15rem;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
.combat-hp-bar-wrap.small { height: 5px; }
.combat-hp-bar {
    height: 100%;
    transition: width 0.5s ease, background 0.3s;
}
.combat-hp-bar.hp-high { background: linear-gradient(90deg, #2f9e44, #51cf66); }
.combat-hp-bar.hp-mid  { background: linear-gradient(90deg, #f59f00, #ffd43b); }
.combat-hp-bar.hp-low  { background: linear-gradient(90deg, #c92a2a, #ff6b6b); }
.combat-hp-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #111;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px #fff, 0 0 8px #fff;
}
.combat-hp-text.small { font-size: 0.68rem; }

.combat-item-badge {
    font-size: 0.7rem;
    color: #5a1ca0;
    background: rgba(243,240,255,0.92);
    border: 1px solid rgba(0,0,0,0.45);
    border-radius: 0;
    padding: 1px 6px;
    margin-top: 2px;
    display: inline-block;
    box-shadow: 0 0 4px rgba(255,255,255,0.7);
}

.combat-vs {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    opacity: 0.6;
    letter-spacing: 0.1em;
}

/* ── Pile centrale du plateau (sprites + terrain + hazards) ── */
.combat-center-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: visible;
}

/* ── Zone des sprites ── */
.sprite-arena {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    position: relative;
    overflow: visible;
    min-height: 80px;
}

.sprite-slot {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
}

.sprite-placeholder {
    width: 90px;
    height: 90px;
    background: rgba(255,255,255,0.10);
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0;
    transition: filter 0.1s, transform 0.15s;
    will-change: transform, filter;
}

.sprite-placeholder.sprite-dead {
    opacity: 0;
    pointer-events: none;
}

.sprite-img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    image-rendering: pixelated;
    transition: filter 0.1s, transform 0.15s;
    will-change: transform, filter;
}

/* Le sprite de p1 (toi, gauche) fait face à droite, p2 (droite) face à gauche */
.sprite-slot-p1 .sprite-placeholder,
.sprite-slot-p1 .sprite-img { transform-origin: left center; }
.sprite-slot-p2 .sprite-placeholder,
.sprite-slot-p2 .sprite-img { transform-origin: right center; }

/* ── Respiration subtile sur TON héros actif (p1) — piste H ──
   Animation idle : remplacée par les anim-* d'action (définies plus bas, donc
   prioritaires à spécificité égale). Coupée si l'OS demande des animations réduites. */
@keyframes kf-breathe {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 2px transparent); }
    50%      { transform: scale(1.03); filter: drop-shadow(0 0 8px var(--p)); }
}
@media (prefers-reduced-motion: no-preference) {
    .sprite-slot-p1 .sprite-img,
    .sprite-slot-p1 .sprite-placeholder {
        animation: kf-breathe 3s ease-in-out infinite;
    }
}
/* Sprite K.O. (opacity 0) : la respiration reste invisible, rien à faire. */

/* ── Projectile de combat ── */
.combat-projectile {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--proj-color, #fff);
    box-shadow: 0 0 12px 4px var(--proj-color, #fff);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

/* ── Badges terrain/hazards sous les sprites ── */
.center-badges {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}
/* Mines/pièges alignés sur le camp concerné : joueur (p1) à gauche,
   adversaire (p2) à droite — lève l'ambiguïté de l'empilement vertical. */
.center-badges-p1  { justify-self: start; }
.center-badges-mid { justify-self: center; }
.center-badges-p2  { justify-self: end; }

/* ── Keyframes d'animation ── */
@keyframes kf-attack {
    0%   { transform: translateX(0) scale(1); }
    35%  { transform: translateX(var(--atk-dir, 40px)) scale(1.08); }
    65%  { transform: translateX(var(--atk-dir, 40px)) scale(1.08); }
    100% { transform: translateX(0) scale(1); }
}
@keyframes kf-hit {
    0%         { filter: brightness(1); transform: translateX(0); }
    20%        { filter: brightness(5) saturate(0); transform: translateX(-6px); }
    45%        { filter: brightness(1); transform: translateX(5px); }
    70%        { filter: brightness(3) saturate(0); transform: translateX(-3px); }
    100%       { filter: brightness(1); transform: translateX(0); }
}
@keyframes kf-aura {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0px var(--aura-color, #fff)); }
    50%      { filter: brightness(1.3) drop-shadow(0 0 16px var(--aura-color, #fff)); }
}
@keyframes kf-faint {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(80px) rotate(8deg); opacity: 0; }
}
@keyframes kf-enter {
    0%   { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* ── Classes d'animation appliquées par JS ── */
.sprite-placeholder.anim-attack,
.sprite-img.anim-attack {
    animation: kf-attack var(--anim-dur, 0.7s) ease-in-out forwards;
}
.sprite-placeholder.anim-hit,
.sprite-img.anim-hit {
    animation: kf-hit 0.4s ease forwards;
}
.sprite-placeholder.anim-aura,
.sprite-img.anim-aura {
    animation: kf-aura var(--anim-dur, 0.7s) ease-in-out forwards;
}
.sprite-placeholder.anim-faint,
.sprite-img.anim-faint {
    animation: kf-faint 0.6s ease-in forwards;
}
.sprite-placeholder.anim-enter,
.sprite-img.anim-enter {
    animation: kf-enter 0.5s ease-out forwards;
}

/* ── Badges de changement de stat sous la barre de PV ── */
.boost-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.boost-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 0;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 0 4px rgba(255,255,255,0.7);
}
.boost-badge.boost-up   { background: #d3f9d8; color: #2b8a3e; border: 1px solid rgba(0,0,0,0.4); }
.boost-badge.boost-down { background: #ffe3e3; color: #c92a2a; border: 1px solid rgba(0,0,0,0.4); }

/* ── Hazards (mines / champ de mines) ── */
.hazards-stack {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    min-height: 1.5rem;
}
.hazard-icon {
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Bandeau d'effet de terrain ── */
.terrain-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 0;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    min-width: 140px;
    text-align: center;
}
.terrain-badge .terrain-name {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.terrain-badge .terrain-turns {
    font-size: 0.7rem;
    opacity: 0.85;
    margin-top: 0.1rem;
}

/* Couleurs par type pour le bandeau de terrain */
.type-bg-fire     { background: linear-gradient(135deg, #ff4757, #ff6b6b); }
.type-bg-plant    { background: linear-gradient(135deg, #2f9e44, #51cf66); }
.type-bg-water    { background: linear-gradient(135deg, #1971c2, #339af0); }
.type-bg-earth    { background: linear-gradient(135deg, #7c3e12, #a0522d); }
.type-bg-metal    { background: linear-gradient(135deg, #495057, #868e96); }
.type-bg-electric { background: linear-gradient(135deg, #e67700, #ffd43b); color: #5c4400; text-shadow: none; }
.type-bg-air      { background: linear-gradient(135deg, #1c7ed6, #74c0fc); }
.type-bg-ice      { background: linear-gradient(135deg, #1098ad, #a5d8ff); color: #0b3a47; }
.type-bg-plasma   { background: linear-gradient(135deg, #862e9c, #e599f7); }
.type-bg-warrior  { background: linear-gradient(135deg, #fd8c3a, #feab6e); }
.type-bg-mage     { background: linear-gradient(135deg, #5f3dc4, #b197fc); }
.type-bg-toxic    { background: linear-gradient(135deg, #5c2d91, #9b59b6); }
.type-bg-dark     { background: linear-gradient(135deg, #212529, #495057); }

/* ── Log de combat ── */
.combat-log {
    flex: 1;
    background: transparent;
    color: var(--text);
    border: none;
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow-x: hidden;
}
.combat-log-entry { margin: 0.15rem 0; }
.log-turn-marker {
    text-align: center;
    font-weight: 800;
    color: var(--p);
    margin: 0.5rem 0 !important;
    border-top: 1px dashed var(--border);
    padding-top: 0.4rem;
}
.log-faint   { color: #c92a2a; }
.log-status  { color: #862e9c; font-weight: 600; }
.log-victory {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 900;
    background: linear-gradient(90deg, #ffd43b, #fab005);
    color: #5c4400;
    padding: 0.6rem;
    border-radius: 0;
    margin: 0.5rem 0;
}

/* ── Bouton Skip ── */
#skipBtn {
    position: fixed;
    bottom: 1rem;
    right: 260px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    padding: 0.5rem 0.9rem;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.85rem;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
#skipBtn.visible { opacity: 1; pointer-events: auto; }
#skipBtn:hover   { background: rgba(0,0,0,0.9); }

/* ── Contrôles de combat — collés en bas, pleine largeur ── */
.combat-controls {
    background: var(--card);
    color: var(--text);
    border-radius: var(--r-md);
    padding: 0.5rem 0.75rem 0.5rem;
    /* Marge de sécurité en bas : les boutons d'action restent au-dessus de la
       barre gestuelle / bord arrondi du téléphone. */
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    box-shadow: var(--shadow-sm);
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}
.combat-action-title {
    font-weight: 700;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    text-align: center;
}
.combat-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}
.combat-move-btn {
    background: var(--card);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.1s;
    font: inherit;
}
.combat-move-btn:hover:not(:disabled) { border-color: var(--p); background: var(--bg); }
.combat-move-btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--neutral-200); }
.combat-move-btn.empty:disabled { opacity: 0.7; }
.combat-move-name  { font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.combat-move-meta  { display: flex; gap: 0.4rem; margin-bottom: 0.3rem; }
.combat-move-stats { font-size: 0.8rem; color: var(--text-secondary); }

/* ── Bouton compact (nom + type + UT sur une ligne) ── */
.combat-move-btn.compact {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    white-space: nowrap;
    overflow: hidden;
}
.move-btn-name {
    font-weight: 700;
    font-size: 0.88rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.move-btn-ut {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.move-btn-ut-empty { color: #c92a2a; font-weight: 700; }

/* ── Tooltip compétence ── */
#moveTooltip {
    display: none;
    position: fixed;
    z-index: 9000;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 0.65rem 0.8rem;
    min-width: 220px;
    max-width: 320px;
    pointer-events: none;
}
.mt-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.mt-name {
    font-weight: 800;
    font-size: 0.95rem;
    margin-right: 0.2rem;
}
.mt-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}
.mt-effect {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.45;
}

.combat-switch-bar  { text-align: center; margin-top: 0.5rem; }
.combat-switch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.combat-switch-card {
    background: var(--card);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.combat-switch-card:hover:not(:disabled) { border-color: var(--p); background: var(--bg); }
.combat-switch-card:disabled { opacity: 0.4; cursor: not-allowed; }
.combat-switch-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.combat-switch-name  { font-weight: 700; font-size: 0.95rem; }
.switch-state-label  { font-size: 0.75rem; color: var(--p); font-style: italic; }
.switch-state-label.dead { color: #c92a2a; }

.combat-wait {
    text-align: center;
    color: var(--muted);
    font-style: italic;
    padding: 1rem;
}

/* ── Chrono de tour (en ligne) ── */
.combat-timer {
    display: flex;
    justify-content: center;
    margin: 0.4rem 0;
}
.combat-timer-btn {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 8px);
    padding: 0.4rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.combat-timer-btn:hover:not(:disabled) {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}
.combat-timer-btn:disabled { opacity: 0.6; cursor: default; }
.combat-timer-count {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.9rem;
    border-radius: var(--r-md, 8px);
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}
.combat-timer-count.waiting { color: var(--muted); font-weight: 700; }
.combat-timer-count.low {
    color: var(--danger-text);
    border-color: var(--danger-border);
    background: var(--danger-bg);
    animation: timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse { 50% { opacity: 0.55; } }

/* ── Écran « action verrouillée » + fenêtre de correction (anti-misclick) ── */
.combat-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    padding: 1rem;
}
.combat-locked-title { font-size: 1rem; }
.combat-locked-info {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.combat-cancel-btn { min-width: 9rem; }

/* Bandeau "À toi de jouer" — mode test 2 joueurs */
.combat-player-banner {
    text-align: center;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--r-md);
    margin-bottom: 0.75rem;
    color: #fff;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}
.combat-player-banner.banner-p1 { background: linear-gradient(135deg, #1971c2, #339af0); }
.combat-player-banner.banner-p2 { background: linear-gradient(135deg, #c92a2a, #ff6b6b); }

.combat-gameover { text-align: center; padding: 1rem; }
.combat-gameover h2 { margin: 0 0 1rem; }
.combat-gameover.win h2  { color: #2f9e44; }
.combat-gameover.lose h2 { color: #c92a2a; }

/* ════════════════════════════════════════════════════════════
   VUE TEAM PREVIEW
   ════════════════════════════════════════════════════════════ */

.team-preview-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.team-preview-column {
    flex: 1;
    min-width: 260px;
    max-width: 380px;
}

.team-preview-column h3 {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
    font-size: 1rem;
    color: var(--text);
}

.team-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.team-preview-card {
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.75rem 0.5rem;
    text-align: center;
    background: var(--card);
    transition: all 0.15s;
    cursor: default;
}
.team-preview-card.clickable { cursor: pointer; }
.team-preview-card.clickable:hover {
    border-color: var(--p);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.team-preview-card .tp-name {
    font-weight: 700;
    margin: 0.4rem 0 0.3rem;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.2;
}

/* Portrait coloré (placeholder image) */
.team-preview-portrait {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 900;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ════════════════════════════════════════════════════
   INFOBULLES HÉROS COMBAT
   ════════════════════════════════════════════════════ */

#heroTooltip {
    position: fixed;
    z-index: 9000;
    pointer-events: none;
    animation: ht-fadein .1s ease;
}
@keyframes ht-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.hero-tooltip {
    background: var(--card);
    border: 1px solid var(--neutral-400);
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    padding: .75rem 1rem;
    width: 290px;
    font-size: .83rem;
    color: var(--text);
    line-height: 1.4;
}
.ht-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.ht-name { font-weight: 800; font-size: .95rem; }
.ht-divider {
    border: none;
    border-top: 1px solid var(--neutral-300);
    margin: .45rem 0;
}
.ht-hp { font-weight: 600; margin-bottom: .25rem; }
.ht-hp-bar-wrap {
    background: var(--neutral-300);
    height: 6px;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: .4rem;
}
.ht-hp-bar { height: 100%; transition: width .3s; }
.ht-hp-bar.hp-high { background: #51cf66; }
.ht-hp-bar.hp-mid  { background: #ffd43b; }
.ht-hp-bar.hp-low  { background: #ff6b6b; }

.ht-row { display: flex; justify-content: space-between; gap: .5rem; }
.ht-row span:first-child { color: #868e96; }
.ht-row span:last-child  { font-weight: 600; }

.ht-stats-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .15rem .5rem;
    margin: .3rem 0;
    font-size: .78rem;
}
.ht-stat { display: flex; justify-content: space-between; }
.ht-stat-label { color: #868e96; }
.ht-stat-val   { font-weight: 700; }

.ht-moves { margin-top: .3rem; }
.ht-move  {
    display: flex;
    justify-content: space-between;
    padding: .15rem 0;
    border-bottom: 1px solid var(--neutral-200);
    font-size: .8rem;
}
.ht-move:last-child { border-bottom: none; }
.ht-move-name { font-weight: 600; }
.ht-move-ut   { color: #868e96; white-space: nowrap; }
.ht-move-hidden { color: #adb5bd; font-style: italic; }

.ht-item {
    margin-top: .35rem;
    font-size: .8rem;
    color: #7950f2;
    font-weight: 600;
}
.ht-item-unknown { color: #adb5bd; font-style: italic; font-weight: normal; }
.ht-sabotaged    { color: #c92a2a; }

.ht-passive {
    margin-top: 0.2rem;
}
.ht-passive-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--p);
}
.ht-passive-effect {
    font-size: 0.78rem;
    color: var(--text);
    line-height: 1.4;
    margin-top: 0.15rem;
}
.ht-passive-unknown .ht-passive-name { color: var(--faint); }
.ht-passive-unknown .ht-passive-effect { color: var(--faint); font-style: italic; }

.ht-boosts { margin: .2rem 0; display: flex; flex-wrap: wrap; gap: .2rem; }
.ht-boost-badge {
    font-size: .72rem;
    padding: 1px 6px;
    border-radius: 0;
    font-weight: 700;
}
.ht-boost-pos { background: #d3f9d8; color: #2f9e44; }
.ht-boost-neg { background: #ffe3e3; color: #c92a2a; }

/* ── Modale mobile ─────────────────────────────── */
#heroTooltipModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0,0,0,.55);
    align-items: flex-end;
    justify-content: center;
}
#heroTooltipModal.open { display: flex; }
.htm-content {
    background: var(--card);
    border-radius: 0;
    padding: 1.25rem 1.25rem 2rem;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    animation: htm-slidein .2s ease;
}
@keyframes htm-slidein { from { transform: translateY(100%); } to { transform: none; } }
.htm-close {
    float: right;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    color: #495057;
    padding: 0 .25rem;
}
.htm-content .hero-tooltip {
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 768px) {
    #heroTooltip { display: none !important; }
}

@media (max-width: 768px) {
    /* ════════════════════════════════════════════════════════════
       COMBAT — DISPOSITION MOBILE (héros côte à côte)
       Ce bloc est placé APRÈS les règles desktop du combat : à
       spécificité égale, c'est la dernière règle qui gagne. C'est
       indispensable ici (les anciennes règles mobiles plus haut dans
       le fichier étaient écrasées par le desktop et restaient sans effet).
       ════════════════════════════════════════════════════════════ */

    /* Le log passe sous le terrain + les contrôles */
    .combat-arena { flex-direction: column; }
    .combat-log-col {
        width: 100%;
        height: 150px;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    /* Terrain : les deux héros côte à côte en haut,
       la scène animée (sprites) juste en dessous, pleine largeur. */
    .combat-field {
        grid-template-columns: 1fr 1fr;
        /* Joueur (p1) à GAUCHE, adversaire (p2) à DROITE — cohérent avec le desktop. */
        grid-template-areas:
            "p1 p2"
            "center center";
        gap: 0.5rem;
        padding: 0.6rem;
        align-items: start;
    }
    .combat-p2 { grid-area: p2; align-items: stretch; }
    .combat-p1 { grid-area: p1; align-items: stretch; }
    .combat-center-stack { grid-area: center; flex-direction: column; }

    /* Cartes héros compactes : un bandeau d'infos (nom + PV + statut),
       plus le grand portrait 3/4 qui prenait tout l'écran. */
    .combat-hero-card {
        width: 100%;
        aspect-ratio: auto;
        min-height: 92px;
        padding: 0.5rem 0.6rem;
        gap: 0.25rem;
    }
    .combat-hero-name { font-size: 0.9rem; }
    .combat-hero-card .type-badge { font-size: 0.6rem; }

    /* Sprites un peu plus compacts pour économiser la hauteur */
    .sprite-arena { min-height: 70px; }
    .sprite-img { max-width: 92px; max-height: 92px; }
    .sprite-placeholder { width: 64px; height: 64px; font-size: 1.6rem; }

    /* Compétences en grille 2×2 (au lieu de 4 côte à côte, illisibles) */
    .combat-actions-grid { grid-template-columns: 1fr 1fr; }
    .combat-move-btn { min-height: 48px; }
    /* Nom de la compétence sur sa propre ligne (lisible en entier) ;
       le type et les UT passent sur la ligne du dessous. */
    .combat-move-btn.compact {
        flex-wrap: wrap;
        white-space: normal;
        padding: 0.45rem 0.6rem;
        row-gap: 0.2rem;
    }
    .combat-move-btn.compact .move-btn-name { flex: 1 0 100%; }

    /* Bouton Skip placé au-dessus du log, dégagé de la barre gestuelle */
    #skipBtn {
        right: 1rem;
        bottom: calc(160px + env(safe-area-inset-bottom));
        top: auto;
        transform: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   OUTIL D'ÉQUILIBRAGE (equilibrage.html)
   ══════════════════════════════════════════════════════════════ */

.balance-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    background: var(--bg, #f8f9fa);
    min-height: calc(100vh - 50px);
    min-height: calc(100dvh - 50px);
}

#loadingBanner  { text-align:center; padding: 3rem 1rem; color: var(--text, #333); }
#loadingError   { display:none; color: #c92a2a; font-weight:bold; text-align:center; padding:1rem; }
#appBody        { display:none; }

.eq-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Sur mobile, on réduit les marges de la page d'équilibrage pour laisser plus
   de largeur aux tableaux denses (qui restent scrollables horizontalement). */
@media (max-width: 768px) {
    .balance-page { padding: 1rem 0.5rem; }
    .eq-card { padding: 1rem 0.75rem; margin-bottom: 1rem; }
    .eq-card h2 { font-size: 1.15rem; margin-bottom: 0.8rem; }
    .balance-table { font-size: 0.82rem; }
    .balance-table th, .balance-table td { padding: 0.4rem 0.5rem; }
}
.eq-card h2 {
    margin: 0 0 1.2rem;
    font-size: 1.3rem;
    color: var(--p);
}

.eq-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 2rem;
    align-items: start;
}
@media (max-width: 640px) { .eq-config-grid { grid-template-columns: 1fr; } }

.eq-field label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
    font-size: .9rem;
    color: var(--text-secondary);
}
.eq-field input[type="range"] { width: 100%; }
.eq-field select, .eq-field input[type="number"] {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: .95rem;
    background: var(--bg);
    color: var(--text);
}
.eq-count-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.eq-count-row input[type="range"] { flex:1; min-width:120px; }
.eq-count-display {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--p);
    min-width: 60px;
    text-align: right;
}

#targetedSection {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 0;
    border: 1px solid var(--border);
}
#targetedSection h3 { margin: 0 0 .75rem; font-size: 1rem; }
.targeted-teams-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 520px) { .targeted-teams-grid { grid-template-columns: 1fr; } }
.targeted-lead-row {
    display: flex; align-items: center; gap: .5rem; margin-top: .75rem; flex-wrap: wrap;
}
.targeted-lead-row label { font-size: .88rem; }
.targeted-lead-row input[type="checkbox"] { width:auto; }

.eq-btn-row { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:1.2rem; }
#startBtn {
    background: var(--p);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: .65rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
#startBtn:disabled { opacity: .5; cursor: not-allowed; }
#stopBtn {
    display: none;
    background: #c92a2a;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: .65rem 1.2rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}

/* #progressSection : propre à equilibrage.html. Masqué par défaut plus bas
   (display:none), révélé en 'block' par equilibrage.js au lancement d'une run. */
#progressSection { margin-top: 1rem; }
#progressText { font-size: .9rem; margin-bottom: .4rem; color: var(--text-secondary); }
.eq-progress-track {
    height: 8px;
    background: var(--border);
    border-radius: 0;
    overflow: hidden;
}
#progressBar {
    height: 100%;
    background: var(--p);
    border-radius: 0;
    transition: width .2s;
    width: 0%;
}

#resultsSection { display: none; }

#timeoutWarning {
    display: none;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 0;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.balance-stat-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.bsg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .75rem 1rem;
}
.bsg-val { font-size: 1.5rem; font-weight: 700; color: var(--p); }
.bsg-lbl { font-size: .78rem; color: var(--text-secondary); margin-top: .2rem; }

.balance-margin-bar { font-size: .85rem; color: var(--text-secondary); }

.balance-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .6rem;
}
.balance-table-header h3 { margin: 0; font-size: 1.1rem; }
.btn-csv {
    background: none;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .35rem .85rem;
    font-size: .85rem;
    cursor: pointer;
    color: var(--text);
    transition: background .15s;
}
.btn-csv:hover { background: var(--bg-hover, #f0f0f0); }

/* ============================================================
   JOUER.HTML — Mode plein écran + Teambuilder style Showdown
   ============================================================ */

/* ── Corps de page sans navbar ── */
body.play-mode {
    background: var(--play-bg);
    overflow: hidden;
    height: 100vh;        /* repli navigateurs anciens */
    height: 100dvh;       /* hauteur réelle visible (tient compte de la barre d'adresse mobile) */
    display: flex;
    flex-direction: column;
}

/* Barre d'onglets */
#tabBar {
    display: flex;
    align-items: stretch;
    height: 38px;
    background: var(--bar-bg);
    border-bottom: 1px solid var(--bar-line);
    flex-shrink: 0;
    /* Marges de sécurité : la barre descend sous l'encoche (haut) et reste
       dégagée des bords arrondis en mode paysage (gauche/droite). */
    padding-top: env(safe-area-inset-top);
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
    box-sizing: content-box;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
#tabBar::-webkit-scrollbar { display: none; }

.tab-home-link {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: var(--bar-muted);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s;
    border-bottom: 2px solid transparent;
}
.tab-home-link:hover { color: var(--bar-text); }

.tab-bar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--bar-line);
    margin: 5px 2px;
    flex-shrink: 0;
}

#tabList {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 1;
}

.game-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    background: transparent;
    border: none;
    color: var(--bar-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.game-tab:hover {
    color: var(--bar-text);
    background: var(--bar-soft);
}
.game-tab.active {
    color: var(--bar-text);
    border-bottom-color: var(--p);
    background: var(--bar-soft);
}

.tab-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 0;
    font-size: 0.88rem;
    color: var(--bar-muted);
    line-height: 1;
    transition: color 0.1s, background 0.1s;
    margin-left: 3px;
}
.tab-close-btn:hover {
    color: #fff;
    background: rgba(200,0,0,0.5);
}

/* Zone de contenu principale */
#appContent {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Modal de forfait */
#forfeitConfirmModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 8000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#forfeitConfirmModal.open { display: flex; }
.forfeit-modal {
    background: var(--card);
    border-radius: 0;
    max-width: 420px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.forfeit-modal-header {
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, #c92a2a, #ff6b6b);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.forfeit-modal-header h3 { color: #fff; margin: 0; font-size: 1.05rem; }
.forfeit-modal-body { padding: 1.25rem 1.75rem; color: var(--text); line-height: 1.55; }
.forfeit-modal-footer {
    padding: 0.9rem 1.5rem;
    background: var(--neutral-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

/* Bouton retour fixe en haut à gauche */
.tb-page-back-btn {
    background: var(--bar-soft);
    color: var(--bar-text);
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--bar-line);
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.tb-page-back-btn:hover { background: var(--bar-soft-hover); }

/* Version fixée (toutes les vues sauf teamEditor) */
.tb-doh-fixed {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 500;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
}
/* Masqué quand le teamEditor est actif — il a son propre bouton dans la topbar */
body.play-mode:has(#teamEditorView.active) .tb-doh-fixed {
    display: none;
}

.tb-topbar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--bar-line);
    margin: 0 0.2rem;
    flex-shrink: 0;
}

/* Les vues classiques sur play-mode — fond transparent, texte clair */
body.play-mode .view { background: transparent; color: #fff; }
/* Les cards dans les vues gardent leur texte foncé */
body.play-mode .view-card,
body.play-mode .view-card * { color: var(--text); }
body.play-mode #loadingView { color: #fff; }

/* ── Teambuilder fullscreen ── */
#teamEditorView.tb-view { display: none; }
#teamEditorView.tb-view.active {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    padding: 0;
    color: var(--text);
    overflow: hidden;
    background: var(--card);
}

/* Barre du haut */
.tb-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: var(--bar-bg-2);
    color: var(--bar-text);
    flex-shrink: 0;
    min-height: 46px;
}

.tb-back-teams-btn {
    background: var(--bar-soft) !important;
    border: 1px solid var(--bar-line) !important;
    color: var(--bar-text) !important;
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 0.3rem 0.7rem;
}
.tb-back-teams-btn:hover { background: var(--bar-soft-hover) !important; }

.tb-name-input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.65rem;
    border-radius: 0;
    border: 1px solid var(--bar-line);
    background: var(--bar-soft);
    color: var(--bar-text);
    font-size: 0.95rem;
}
.tb-name-input::placeholder { color: var(--bar-muted); }

.tb-save-btn { font-size: 0.85rem; padding: 0.3rem 0.8rem; }

/* Sélecteur de format d'équipe (6v6 / 3v3) dans la barre du teambuilder */
.tb-format-select {
    background: var(--bar-soft);
    border: 1px solid var(--bar-line);
    color: var(--bar-text);
    font-size: 0.82rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}

.tb-ie-btn {
    background: var(--bar-soft) !important;
    border: 1px solid var(--bar-line) !important;
    color: var(--bar-text) !important;
    font-size: 0.82rem;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}
.tb-ie-btn:hover { background: var(--bar-soft-hover) !important; }

.tb-hero-ie-btn { margin-left: auto; font-size: 0.8rem; padding: 0.25rem 0.65rem; }

/* Corps : gauche + droite */
.tb-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Bande d'équipe : 6 cases en ligne, pleine largeur ── */
.tb-team-panel {
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.tb-team-panel .roster-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
    flex: 1;
    justify-content: center;
}

/* Cartes façon « hero-card » du panthéon : en-tête (nom + types) en haut,
   splash art en bas. Grandes cases pour mettre les splash arts en avant. */
.tb-team-panel .roster-slot {
    flex: 1 1 160px !important;
    min-width: 150px !important;
    max-width: 230px !important;
    width: auto !important;
    height: 240px !important;
    aspect-ratio: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.tb-team-panel .roster-slot .tb-hero-card-header {
    flex-shrink: 0;
    padding: 0.5rem 0.5rem 0.55rem;
    color: #fff;
    text-align: center;
}
.tb-team-panel .roster-slot .tb-hero-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.15;
    margin-bottom: 0.3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.tb-team-panel .roster-slot .tb-hero-card-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
}
.tb-team-panel .roster-slot .tb-hero-card-types .type-badge {
    font-size: 0.6rem;
}

.tb-team-panel .roster-slot .tb-hero-card-splash {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--grad-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tb-team-panel .roster-slot .tb-hero-card-splash img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tb-team-panel .roster-slot .tb-splash-ph {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--faint);
    opacity: 0.45;
}

.tb-team-panel .roster-slot.tb-hero-card-empty {
    align-items: center !important;
    justify-content: center !important;
}
.tb-team-panel .roster-slot .slot-empty {
    font-size: 2.6rem;
    margin: 0 auto;
}

.tb-team-panel .roster-slot .slot-spread,
.tb-team-panel .roster-slot .slot-total,
.tb-team-panel .roster-slot .slot-item-indicator,
.tb-team-panel .roster-slot .edit-hero-btn { display: none !important; }

.tb-team-panel .remove-hero-btn {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    display: none !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
    padding: 0 !important;
    background: #dc3545 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
}
.tb-team-panel .roster-slot.filled:hover .remove-hero-btn {
    display: flex !important;
}

.tb-count-display {
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
    padding: 0.25rem 0.5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Panneau droit (liste ou édition) ── */
.tb-main-panel {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Liste des héros */
#heroListPanel .hero-db-filters {
    display: flex;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
#heroListPanel .hero-db-filters input {
    flex: 1;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.76rem;
}
#heroListPanel .hero-db-filters .active-type-filter-wrap {
    flex-shrink: 0;
}

#heroListPanel .search-results-container {
    flex: 1;
    overflow-y: auto;
}

.tb-hero-db-scroll {
    flex: 1;
    overflow: auto;
}

/* Tableau du teambuilder compacté : cellules + police réduites pour afficher
   plus de héros à l'écran. Cadré sur .tb-hero-db-scroll → n'affecte PAS la
   page équilibrage qui réutilise .hero-db-table. Limité à l'ordinateur
   (≥769px) pour ne pas perturber la mise en carte mobile du tableau (≤768px). */
@media (min-width: 769px) {
    .tb-hero-db-scroll .hero-db-table { font-size: 0.8rem; }
    .tb-hero-db-scroll .hero-db-table th,
    .tb-hero-db-scroll .hero-db-table td { padding: 0.3rem 0.5rem; }
    .tb-hero-db-scroll .hero-db-table .td-name { font-size: 0.82rem; padding: 0.3rem 0.5rem; }
    .tb-hero-db-scroll .hero-db-table .td-type,
    .tb-hero-db-scroll .hero-db-table .td-abil { padding: 0.3rem 0.5rem; }
    .tb-hero-db-scroll .hero-db-table .stat-col { padding: 0.3rem 0.4rem; }
    .tb-hero-db-scroll .hero-db-table .type-badge { font-size: 0.62rem; }
}

/* Barre du haut du panneau édition */
.tb-edit-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    background: var(--card-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
/* Le btn-secondary global est blanc sur fond sombre — on le corrige ici */
.tb-edit-topbar .btn-secondary {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1.5px solid var(--border) !important;
}
.tb-edit-topbar .btn-secondary:hover {
    background: #e9ecef !important;
    color: #222 !important;
}
.tb-edit-name {
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--text);
}

/* Grille d'édition horizontale */
.tb-edit-grid {
    display: grid;
    grid-template-columns: 30vw 15vw 1fr;
    flex: 1;
    min-height: 0;
    /* Pas d'overflow:hidden ici pour ne pas clipper les dropdowns */
}

.tb-edit-grid > div {
    border-right: 1px solid var(--neutral-300);
    padding: 0.5rem 0.6rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tb-edit-grid > div:last-child { border-right: none; }

/* La colonne compétences/passifs défile verticalement si le contenu dépasse
   (héros à plusieurs passifs sur petit écran, sinon le bas était coupé).
   overflow-x masqué : le dropdown tient désormais dans la largeur de la
   colonne (.custom-select-dropdown : right:0). */
.tb-col-moves { overflow-x: hidden; overflow-y: auto; }

.tb-col-title {
    font-weight: 700;
    color: var(--p);
    border-bottom: 2px solid var(--p);
    padding-bottom: 0.2rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Sous-titre passif dans la colonne compétences */
.tb-passive-subtitle {
    margin-top: 0.5rem;
    border-top: 1px solid var(--neutral-300);
    padding-top: 0.4rem;
}

/* ── Format 3v3 Simplifié : panneau d'édition réduit ──────────────────
   On masque les colonnes Objet et PC/Stats, et on affiche Compétences et
   Passif côte à côte dans la (seule) colonne restante. */
.tb-edit-grid--simplifie { grid-template-columns: 1fr; }
.tb-edit-grid--simplifie .tb-col-item,
.tb-edit-grid--simplifie .tb-col-stats { display: none; }
.tb-edit-grid--simplifie .tb-col-moves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
/* Côte à côte : le passif n'est plus « sous » les compétences, on retire le
   filet de séparation supérieur prévu pour l'empilement vertical. */
.tb-edit-grid--simplifie .tb-passive-subtitle {
    margin-top: 0;
    border-top: none;
    padding-top: 0.2rem;
}
@media (max-width: 768px) {
    /* Sur téléphone, on réempile Compétences puis Passif (cohérent avec le
       reste du teambuilder qui passe en colonne unique). */
    .tb-edit-grid--simplifie .tb-col-moves { grid-template-columns: 1fr; }
}

/* Passif */
.tb-passive-option {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: 0.3rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.tb-passive-option.clickable { cursor: pointer; }
.tb-passive-option.clickable:hover { background: var(--bg-hover); border-color: var(--p); }
.tb-passive-option.selected { border-color: var(--p); background: var(--bg-hover); border-left: 3px solid var(--p); padding-left: calc(0.6rem - 2px); }
.tb-passive-name { font-weight: 600; font-size: 0.82rem; color: var(--text); }
.tb-passive-desc { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.3; }

/* Objet */
.tb-col-item .item-search-input { flex-shrink: 0; margin-bottom: 0.4rem; }
.tb-col-item .item-list-container { flex: 1; overflow-y: auto; min-height: 0; }

/* Stats/PC */
.tb-col-stats .spread-pool-display { flex-shrink: 0; font-size: 0.82rem; padding: 0.25rem 0.5rem; margin-bottom: 0.35rem; }
.tb-col-stats #spreadContainer { flex-shrink: 0; }

/* Spread-row compact pour la colonne PC étroite */
.tb-col-stats .spread-row {
    grid-template-columns: 38px 1fr 52px 36px;
    gap: 0.4rem;
    padding: 0.28rem 0.5rem;
    margin-bottom: 0.22rem;
}
.tb-col-stats .spread-label { font-size: 0.78rem; }
.tb-col-stats .spread-base  { font-size: 0.68rem; }
.tb-col-stats .spread-btn { width: 22px; height: 22px; font-size: 0.9rem; }
.tb-col-stats .spread-bonus-val { min-width: 22px; font-size: 0.78rem; }
.tb-col-stats .spread-effective { font-size: 0.95rem; }

/* Trait */
.tb-trait-section { margin-top: 0.75rem; flex-shrink: 0; }
.tb-trait-label {
    font-weight: 700;
    color: var(--p);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: 1px solid var(--neutral-300);
    padding-top: 0.5rem;
    margin-bottom: 0.3rem;
}
.tb-trait-select {
    width: 100%;
    padding: 0.28rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.8rem;
    background: var(--card);
    color: var(--text);
}

/* Indicateurs de trait dans l'affichage des stats */
.stat-trait-up   { color: #51cf66; font-size: 0.65rem; margin-left: 2px; }
.stat-trait-down { color: #fa5252; font-size: 0.65rem; margin-left: 2px; }

/* ── Responsive mobile (≤ 900px) ── */
@media (max-width: 900px) {
    .tb-body { flex-direction: column; }

    .tb-team-panel {
        width: 100%;
        height: 78px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: hidden;
        flex-direction: row;
        padding: 0.3rem;
        gap: 0.3rem;
    }

    .tb-team-panel .roster-container {
        flex-direction: row !important;
        flex: none !important;
        align-items: stretch;
    }

    .tb-team-panel .roster-slot {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        min-height: auto !important;
        height: 58px !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        justify-content: center !important;
        align-items: stretch !important;
    }

    /* Bandeau d'équipe compact sur téléphone : faute de place, on n'affiche
       que l'en-tête (nom), le splash art et les bulles de type sont masqués.
       (Les types restent visibles dans l'éditeur du héros.) */
    .tb-team-panel .roster-slot .tb-hero-card-splash { display: none !important; }
    .tb-team-panel .roster-slot .tb-hero-card-types  { display: none !important; }
    .tb-team-panel .roster-slot .tb-hero-card-header {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.2rem 0.3rem !important;
    }
    .tb-team-panel .roster-slot .tb-hero-card-name {
        font-size: 0.76rem;
        margin-bottom: 0;
        -webkit-line-clamp: 2;
    }
    .tb-team-panel .roster-slot .slot-empty { font-size: 1.6rem; }

    /* Barre du haut du teambuilder : passe sur plusieurs lignes au lieu d'être
       écrasée. Le champ de nom d'équipe occupe sa propre ligne. */
    .tb-topbar {
        flex-wrap: wrap;
        min-height: 0;
        row-gap: 0.4rem;
    }
    .tb-topbar-sep { display: none; }
    .tb-name-input { flex: 1 1 100%; order: 5; }

    .tb-count-display { display: none; }

    .tb-edit-grid {
        /* On abandonne la grille sur mobile : un simple empilement vertical
           (block) où chaque section prend sa hauteur réelle de contenu. La
           grille étirait les 3 sections à hauteur égale et ignorait la hauteur
           de la liste d'objets, ce qui provoquait un chevauchement. */
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
    }

    .tb-edit-grid > div {
        border-right: none;
        border-bottom: 1px solid var(--neutral-300);
        overflow-y: visible;
        flex-shrink: 0;
    }

    /* La liste d'objets occupe presque toute la hauteur de l'écran (au lieu
       d'un petit bloc écrasé), pour faire défiler confortablement les objets. */
    .tb-col-item .item-list-container {
        flex: none;
        height: 70vh;       /* repli */
        height: 70dvh;      /* hauteur réelle visible */
        max-height: none;
    }
}

.balance-table th { position: sticky; top: 0; z-index: 2; background: var(--bg, #fff); }
.balance-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 420px; }
.balance-table td:not(:first-child):not(:nth-child(2)) { text-align: right; }
.balance-table th:not(:first-child):not(:nth-child(2)) { text-align: right; }

.eq-header {
    background: var(--dark);
    color: #fff;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.eq-header-title { font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; }
.eq-header-note  { font-size: .8rem; opacity: .6; margin-left: auto; }

/* ── Barre de switch permanente ──────────────────────────────── */
.combat-team-quickswitch {
    display: flex;
    gap: 4px;
    width: 100%;
    padding: 4px 0 0;
}

.switch-pip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    flex: 1;
    min-width: 0;
    height: 30px;
    border: 2px solid transparent;
    border-radius: 0;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-size: 0.72rem;
    transition: border-color 0.15s, opacity 0.15s, background 0.15s;
}

.switch-pip:not(:disabled):hover {
    border-color: var(--p);
    background: var(--bg-hover);
}

.switch-pip.active {
    border-color: var(--success);
    background: var(--success-bg);
}

.switch-pip.dead,
.switch-pip.trapped {
    opacity: 0.38;
    cursor: not-allowed;
}

.switch-pip .switch-pip-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.switch-pip .pip-type { display: none; }

.switch-pip-hp-wrap {
    flex: 1;
    min-width: 20px;
    height: 5px;
    background: var(--switch-pip-hp-track);
    border-radius: 0;
    overflow: hidden;
}

.switch-pip-hp {
    height: 100%;
    border-radius: 0;
}

/* Badge K.O. dans le tooltip simplifié */
.ht-ko {
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary, #888);
    text-align: center;
}

/* Fin de partie — boutons côte à côte */
.combat-gameover-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

@media (max-width: 480px) {
    .switch-pip {
        width: 52px;
        min-width: 48px;
        font-size: 0.63rem;
        padding: 4px 3px;
    }
    .switch-pip .switch-pip-name { max-width: 48px; }
}

/* === Bulles de sets façon Smogon === */
.gameplay-section .gameplay-overview {
    background: var(--card);
    border-left: 4px solid #495057;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.gameplay-section .gameplay-overview h3 {
    margin: 0 0 0.5rem 0;
    color: #495057;
    font-size: 1.15rem;
}

.gameplay-section .gameplay-overview p {
    margin: 0;
    line-height: 1.5;
}

.gameplay-section .set-block {
    background: var(--neutral-200);
    border: 1px solid var(--neutral-400);
    border-radius: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.gameplay-section .set-header {
    background: linear-gradient(to right, #495057, #343a40);
    color: white;
    padding: 0.75rem 1rem;
}

.gameplay-section .set-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: white;
}

.gameplay-section .set-body {
    padding: 1rem;
    border-bottom: 1px solid var(--neutral-400);
}

.gameplay-section .set-body p {
    margin: 0.4rem 0;
}

.gameplay-section .set-body ul {
    margin: 0.4rem 0 0.4rem 1.5rem;
    padding: 0;
}

.gameplay-section .set-body ul li {
    margin: 0.2rem 0;
}

.gameplay-section .set-analysis {
    padding: 1rem;
    background: var(--card-2);
    font-size: 0.95rem;
    line-height: 1.5;
}

.gameplay-section .set-analysis p {
    margin: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE STYLES CONSOLIDÉS — depuis les fichiers HTML
   ═══════════════════════════════════════════════════════════════ */

/* Bandeau héros compact (compétences.html, objets.html) */
.hero-section-sm  { min-height: 30vh; padding: 2rem; }
.hero-title-sm    { font-size: 2.5rem; }

/* Icônes d'objets (objets.html — JS) */
.item-icon-img         { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.item-icon-placeholder { width: 32px; height: 32px; background: var(--neutral-300); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; color: var(--faint); }

/* Label "Trier par" (objets.html) */
.sort-label { font-weight: 600; color: var(--muted); font-size: 0.95rem; }

/* regles.html */
.stats-table-sm  { font-size: 0.85rem; }
.overflow-x-auto { overflow-x: auto; }
.text-center-mt  { text-align: center; margin-top: 3rem; }
/* En mode clair seulement : contour + texte noirs pour la lisibilité.
   En mode sombre, le .btn-secondary global (blanc) est conservé tel quel. */
html[data-theme="light"] .text-center-mt .btn-secondary {
    color: #000;
    border: 2px solid #000;
}
html[data-theme="light"] .text-center-mt .btn-secondary:hover {
    color: #000;
    background: rgba(0,0,0,.08);
}
#rulesTypesGrid  {
    margin: 2rem auto;
    max-width: 720px;
    grid-template-columns: repeat(5, 1fr);
    justify-items: stretch;
}
@media (max-width: 600px) {
    #rulesTypesGrid { grid-template-columns: repeat(3, 1fr); max-width: 420px; }
}

/* Table des types « justifiée » : occupe toute la largeur du texte, colonnes
   égales réparties, plus aucune barre de défilement horizontale. Pour faire
   tenir les 13 types, les en-têtes d'attaquants sont écrits à la verticale. */
#typeChartTable {
    width: 100%;
    table-layout: fixed;
    font-size: 0.62rem;
    /* Ratio global 5:4 (largeur:hauteur). La hauteur dépassant le contenu
       naturel est répartie entre les lignes → cases plus hautes et aérées. */
    aspect-ratio: 5 / 4;
}
#typeChartTable th,
#typeChartTable td {
    padding: 1px;
    line-height: 1.1;
    /* Texte centré horizontalement ET verticalement dans chaque case. */
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}
/* 1ʳᵉ colonne = noms des défenseurs + coin (centrés aussi) */
#typeChartTable th:first-child {
    width: 58px;
    font-size: 0.55rem;
    white-space: nowrap;
    text-align: center;
    line-height: 1.15;
}
/* En-têtes d'attaquants (1ʳᵉ ligne, hors 1ʳᵉ cellule) : texte vertical centré */
#typeChartTable tr:first-child th:not(:first-child) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    vertical-align: middle;
    padding: 4px 0;
    height: 5.2em;
}

/* jouer.html */
#loadingView.active      { padding: 3rem; text-align: center; }
#mainView .view-card     { max-width: 600px; margin: 4rem auto; }
#mainView .view-card h2  { text-align: center; margin-bottom: 1.5rem; }
#randomModeDesc          { margin-top: 0.6rem; font-style: italic; color: var(--muted); font-size: 0.9rem; text-align: center; }
.btn-forfeit             { background: linear-gradient(135deg, #c92a2a, #ff6b6b); }
.forfeit-note            { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
.modal-icon-lg           { font-size: 1.4rem; }
#validationHeaderIcon    { font-size: 1.5rem; }

/* États cachés par défaut (togglés par JS) */
#teamSelector2           { display: none; }
#activeFiltersBar        { display: none; }
#searchResultsContainer  { display: none; }
#heroEditPanel           { display: none; }
#progressSection         { display: none; }

/* Éléments spécifiques jouer.html */
#heroEditTypeBadge       { margin-left: 0.4rem; }
.th-passive              { padding: 0.75rem; border-bottom: 2px solid var(--border); }
#teamPreviewView .view-card              { max-width: 860px; margin: 0 auto; }
#teamPreviewView .view-card h2           { text-align: center; margin-bottom: 0.5rem; }
#teamPreviewView .view-card > p          { text-align: center; color: var(--muted); margin-bottom: 1.5rem; }
#leadPickView .view-card                 { max-width: 900px; margin: 0 auto; }
#leadPickView .view-card h2              { text-align: center; margin-bottom: 1rem; }
#leadPickView .view-card > p             { text-align: center; color: var(--muted); margin-bottom: 2rem; }
.view-centered-action    { text-align: center; margin-top: 2rem; }

/* Panthéon */
.hero-section--pantheon  { min-height: 40vh; padding: 3rem 2rem; }
.hero-title-md           { font-size: 3rem; }

/* Règles */
.formula-paragraph       { font-size: 1.2em; text-align: center; }
.list-mt                 { margin-top: 0.5rem; }

/* Compétences (classes utilisées dans les templates JS) */
.passive-heroes-hint     { font-size: 0.8rem; color: var(--faint); font-weight: normal; }
.learned-undef           { color: var(--faint); }
.effect-placeholder      { color: var(--faint); font-style: italic; }

/* Équilibrage */
#matchCountCustom        { width: 110px; flex-shrink: 0; }
.eq-matches-label        { font-size: .8rem; color: var(--text-secondary, #666); }
.eq-preset-row           { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.eq-lead-label           { font-size: .85rem; margin-left: .5rem; }
#fixedLead1, #fixedLead2 { width: 60px; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 5px; }


/* ── Styles body scopés pour les pages outils (thème sombre par défaut) ── */
body.damage-calc,
body.type-coverage {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.5;
}
/* ╔══════════════════════════════════════════════════════════════════
   CALCULATEUR DE DÉGÂTS (damage-calc.html)
   Les variables --panel, --tool-card, --tool-border, etc. proviennent
   de :root ou html[data-theme="light"] (déclarations en tête de fichier) :
   elles basculent automatiquement clair/sombre. La page ne redéfinit que
   ses propres tokens (--card → --tool-card) pour ne pas écraser le thème.
   ══════════════════════════════════════════════════════════════════╗ */
body.damage-calc {
            --card:   var(--tool-card);
            --border: var(--tool-border);
            --muted:  var(--tool-muted);
            --accent: var(--tool-accent);
            --r-sm: 0; --r-md: 0; --r-lg: 0;
        }
.tool-header {
            background: var(--tool-header-grad);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2rem;
        }
        .tool-header h1 {
            font-size:1.3rem; font-weight:800;
            background: var(--tool-title-grad);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
        }
        .tool-header p { color:var(--muted); font-size:.82rem; margin-top:.1rem; }

        .calc-outer { padding:1rem; max-width:1440px; margin:0 auto; }

        /* ── Résultats (haut de page) ── */
        .results-panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:1rem; overflow:hidden; }
        .results-head { background:var(--card); border-bottom:1px solid var(--border); padding:.65rem 1rem; font-weight:700; font-size:.88rem; }
        .results-body { padding:1rem; }
        .results-empty { text-align:center; padding:1.5rem; color:var(--muted); font-size:.88rem; }

        /* ── Grille principale 3 colonnes ── */
        .panels-main { display:grid; grid-template-columns:1fr 230px 1fr; gap:1rem; align-items:start; }
        @media(max-width:1100px){ .panels-main{ grid-template-columns:1fr 200px 1fr; } }
        @media(max-width:800px){  .panels-main{ grid-template-columns:1fr; } }

        /* ── Panels héros ── */
        .hero-panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); }
        .panel-head { background:var(--card); border-bottom:1px solid var(--border); padding:.6rem 1rem; display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; border-radius:var(--r-lg) var(--r-lg) 0 0; }
        .side-label { color:var(--accent); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
        .panel-body { padding:.9rem 1rem; display:flex; flex-direction:column; gap:.75rem; }

        /* ── Colonne terrain ── */
        .terrain-col { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:.9rem .85rem; display:flex; flex-direction:column; gap:.7rem; }
        .tc-section-title { font-size:.65rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.3rem; }
        .terrain-btns { display:flex; flex-direction:column; gap:.3rem; }
        .t-btn { padding:.3rem .6rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card); color:var(--muted); font-size:.76rem; font-weight:600; transition:all .13s; text-align:left; }
        .t-btn:hover { color:var(--text); border-color:var(--muted); }
        .t-btn.t-on { border-color:var(--accent); background:rgba(119,26,27,.14); color:var(--text); }
        .terrain-note { font-size:.73rem; color:var(--muted); line-height:1.6; }
        .tc-sep { border:none; border-top:1px solid var(--border); margin:.05rem 0; }
        .tc-haz-row { display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:.28rem; }
        .haz-btn { padding:.24rem .5rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card); color:var(--muted); font-size:.7rem; font-weight:600; transition:all .13s; }
        .haz-btn:hover { border-color:var(--muted); color:var(--text); }
        .haz-btn.haz-on   { border-color:#ef4444; background:rgba(239,68,68,.1);  color:#f87171; }
        .haz-btn.wall-on  { border-color:#60a5fa; background:rgba(96,165,250,.1); color:#93c5fd; }
        .haz-note { font-size:.68rem; color:var(--muted); text-align:right; }
        .mines-ctrl { display:flex; align-items:center; gap:.3rem; }
        .mines-num  { font-family:'Courier New',monospace; font-weight:700; min-width:14px; text-align:center; color:var(--text); font-size:.82rem; }
        .field-summary { font-size:.72rem; color:var(--muted); line-height:1.65; }
        .swap-btn { width:100%; padding:.45rem .5rem; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--muted); font-size:.76rem; font-weight:600; transition:all .13s; }
        .swap-btn:hover { border-color:var(--accent); color:var(--text); }

        /* ── Search héros / objets ── */
        .search-wrap { position:relative; }
        .search-input {
            width:100%; padding:.5rem .8rem;
            background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm);
            color:var(--text); font-size:.88rem; transition:border-color .15s;
        }
        .search-input:focus { outline:none; border-color:var(--accent); }
        .search-input::placeholder { color:var(--muted); }
        .search-drop {
            display:none; position:absolute; top:100%; left:0; right:0;
            background:var(--card); border:1px solid var(--accent); border-top:none;
            border-radius:0 0 var(--r-sm) var(--r-sm);
            max-height:200px; overflow-y:auto; z-index:60;
        }
        .search-drop.open { display:block; }
        .search-drop::-webkit-scrollbar{ width:4px; }
        .search-drop::-webkit-scrollbar-thumb{ background:var(--border); border-radius: 0; }
        .drop-opt { padding:.4rem .8rem; cursor:pointer; font-size:.83rem; display:flex; align-items:center; gap:.45rem; transition:background .1s; }
        .drop-opt:hover { background:rgba(119,26,27,.15); }

        /* ── Field row ── */
        .field-row { display:flex; align-items:center; gap:.5rem; }
        .field-lbl { color:var(--muted); font-size:.78rem; min-width:78px; flex-shrink:0; }
        .compact-select {
            flex:1; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm);
            color:var(--text); font-size:.82rem; padding:.25rem .5rem;
        }
        .compact-select:focus { outline:none; border-color:var(--accent); }

        /* ── Séparateur ── */
        .sep { border:none; border-top:1px solid var(--border); margin:.1rem 0; }

        /* ── Stats ── */
        .section-title { font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.35rem; }
        .stat-table { width:100%; border-collapse:collapse; font-size:.8rem; }
        .stat-table th { background:var(--card); color:var(--muted); font-weight:600; padding:.28rem .4rem; text-align:center; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; }
        .stat-table td { padding:.22rem .4rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.03); }
        .stat-table td:first-child { text-align:left; color:var(--muted); font-weight:600; font-size:.78rem; }
        .stat-base { color:var(--text); font-weight:700; }
        .stat-ev { width:44px; background:var(--card); border:1px solid var(--border); border-radius: 0; color:var(--text); font-size:.77rem; padding:.13rem .25rem; text-align:center; }
        .stat-ev:focus { outline:none; border-color:var(--accent); }
        .stat-eff { color:#a5f3fc; font-weight:700; }
        .stat-eff.t-up { color:#86efac; }
        .stat-eff.t-dn { color:#fca5a5; }
        .boost-cell { display:flex; align-items:center; gap:.18rem; justify-content:center; }
        .boost-btn { width:17px; height:17px; background:var(--border); border:none; border-radius: 0; color:var(--text); font-size:.8rem; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; transition:background .1s; cursor:pointer; }
        .boost-btn:hover { background:var(--accent); }
        .boost-val { min-width:22px; text-align:center; font-size:.76rem; font-weight:700; font-family:'Courier New',monospace; }
        .bv-pos { color:#86efac; }
        .bv-neg { color:#fca5a5; }
        .bv-zer { color:var(--muted); }
        .ev-total { display:flex; justify-content:flex-end; font-size:.7rem; color:var(--muted); padding:.15rem 0; gap:.3rem; }
        .ev-total b { color:var(--text); }
        .ev-over b { color:#fca5a5 !important; }

        /* ── Status ── */
        .status-row { display:flex; gap:.35rem; flex:1; }
        .st-btn { flex:1; padding:.28rem .3rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card); color:var(--muted); font-size:.72rem; font-weight:600; transition:all .12s; text-align:center; }
        .st-btn:hover { border-color:var(--muted); color:var(--text); }
        .st-btn.st-ok    { border-color:#22c55e; background:rgba(34,197,94,.1);   color:#86efac; }
        .st-btn.st-burn  { border-color:#f97316; background:rgba(249,115,22,.1);  color:#f97316; }
        .st-btn.st-poi   { border-color:#a855f7; background:rgba(168,85,247,.1);  color:#c084fc; }

        /* ── HP ── */
        .hp-bar-track { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; height:7px; margin:.3rem 0; }
        .hp-bar-fill  { height:100%; border-radius:var(--r-sm); transition:width .2s, background .2s; }
        .hp-row { display:flex; align-items:center; gap:.5rem; font-size:.8rem; }
        .hp-inp { width:58px; background:var(--card); border:1px solid var(--border); border-radius: 0; color:var(--text); font-size:.81rem; padding:.18rem .35rem; text-align:center; }
        .hp-inp:focus { outline:none; border-color:var(--accent); }
        .hp-pct-lbl { color:var(--muted); font-size:.76rem; }

        /* ── Slots de compétences ── */
        .mv-slots { display:flex; flex-direction:column; gap:.28rem; }
        .mv-auto-btn { display:flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border:1px dashed var(--border); border-radius:var(--r-sm); background:var(--card); cursor:pointer; font-size:.82rem; transition:all .1s; user-select:none; color:var(--muted); font-weight:600; }
        .mv-auto-btn:hover { border-color:rgba(119,26,27,.4); color:var(--text); }
        .mv-auto-btn.mv-sel { border-style:solid; border-color:var(--accent); background:rgba(119,26,27,.15); color:var(--text); }
        .mv-slot-filled { display:flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card); font-size:.82rem; transition:all .1s; user-select:none; }
        .mv-slot-filled.mv-sel { border-color:var(--accent); background:rgba(119,26,27,.15); }
        .mv-slot-atk { cursor:pointer; }
        .mv-slot-atk:hover:not(.mv-sel) { border-color:rgba(119,26,27,.4); background:rgba(119,26,27,.07); }
        .mv-name { flex:1; font-weight:600; }
        .mv-cat  { font-size:.68rem; color:var(--muted); }
        .mv-pow  { font-family:'Courier New',monospace; font-size:.74rem; color:var(--muted); min-width:26px; text-align:right; }
        .mv-clear { background:none; border:none; color:var(--muted); font-size:1rem; line-height:1; padding:0 .1rem; cursor:pointer; flex-shrink:0; }
        .mv-clear:hover { color:#fca5a5; }
        .mv-slot-search .search-input { font-size:.8rem; padding:.35rem .7rem; }

        /* ── Affichage dégâts ── */
        .dmg-block { display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
        .dmg-info { flex:1; min-width:180px; }
        .dmg-move-name { font-size:1rem; font-weight:800; margin-bottom:.3rem; }
        .dmg-meta { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; font-size:.74rem; color:var(--muted); }
        .dmg-direction { font-size:.73rem; color:var(--muted); margin-top:.25rem; }
        .dmg-numbers { text-align:right; flex-shrink:0; }
        .dmg-val { font-size:2rem; font-weight:900; font-family:'Courier New',monospace; line-height:1; }
        .dmg-pct { font-size:.83rem; color:var(--muted); margin-top:.12rem; }
        .dmg-ko  { color:#ef4444; font-weight:700; font-size:.78rem; margin-top:.18rem; }
        .dmg-detail { font-size:.72rem; color:var(--muted); margin-top:.35rem; }
        .dmg-bar-track { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; height:12px; margin:.5rem 0 .8rem; }
        .dmg-bar-fill  { height:100%; background:linear-gradient(90deg,#ef4444,#f97316); border-radius:var(--r-sm); transition:width .35s; }

        /* ── Vitesse ── */
        .speed-row { font-size:.77rem; color:var(--muted); margin-bottom:.75rem; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
        .spd-faster { color:#86efac; font-weight:700; }

        /* ── Efficacité ── */
        .eff-badge { display:inline-block; padding:.12rem .48rem; border-radius: 0; font-size:.7rem; font-weight:700; }
        .eff-x0  { background:rgba(201,42,42,.2);  color:#ff8787; border:1px solid #c92a2a; }
        .eff-half{ background:rgba(217,119,6,.15); color:#fbbf24; border:1px solid #d97706; }
        .eff-x1  { background:rgba(74,85,104,.2);  color:#a0aec0; border:1px solid #4a5568; }
        .eff-x2  { background:rgba(47,158,68,.2);  color:#69db7c; border:1px solid #2f9e44; }
        .eff-x4  { background:rgba(47,158,68,.3);  color:#40c057; border:1px solid #2f9e44; }

        /* ── Résiduels / hazards ── */
        .res-section { margin-top:.9rem; }
        .res-title { font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; }
        .res-row { display:flex; align-items:center; justify-content:space-between; padding:.28rem .6rem; border-radius:var(--r-sm); background:var(--card); font-size:.81rem; margin-bottom:.22rem; }
        .res-dmg { font-family:'Courier New',monospace; font-weight:700; }
        .res-neg { color:#fca5a5; }
        .res-pos { color:#86efac; }

        /* (#loader / .spin / @keyframes spin : définis une seule fois dans la
           section type-coverage plus bas — partagés par les deux pages outils) */
        #main-wrap { display:none; }


/* ╔══════════════════════════════════════════════════════════════════
   COUVERTURE DE TYPE (type-coverage.html)
   Les variables tool-* basculent automatiquement clair/sombre via
   :root et html[data-theme="light"] (haut du fichier).
   ══════════════════════════════════════════════════════════════════╗ */
        body.type-coverage {
            --card:     var(--tool-card);
            --border:   var(--tool-border);
            --muted:    var(--tool-muted);
            --accent:   var(--tool-accent);
            --r-sm: 0; --r-md: 0; --r-lg: 0;
            /* palettes de catégories (sombre par défaut) */
            --c-eff-bg: #0d2818; --c-eff-border: #2f9e44; --c-eff-text: #69db7c;
            --c-neu-bg: #1c2030; --c-neu-border: #4a5568; --c-neu-text: #a0aec0;
            --c-res-bg: #2a1e09; --c-res-border: #d97706; --c-res-text: #fbbf24;
            --c-imm-bg: #2a0d0d; --c-imm-border: #c92a2a; --c-imm-text: #ff8787;
        }
        /* Palettes catégories en CLAIR (fonds clairs lisibles) */
        html[data-theme="light"] body.type-coverage {
            --c-eff-bg: #e8f8ee; --c-eff-border: #51cf66; --c-eff-text: #2b8a3e;
            --c-neu-bg: #f1f3f5; --c-neu-border: #adb5bd; --c-neu-text: #495057;
            --c-res-bg: #fff4d6; --c-res-border: #fab005; --c-res-text: #b46500;
            --c-imm-bg: #ffe3e3; --c-imm-border: #ff6b6b; --c-imm-text: #c92a2a;
        }

        /* ── Reset & base ────────────────────────────────────────────────── */
/* ── Header ──────────────────────────────────────────────────────── */
        body.type-coverage header {
            background: var(--tool-header-grad);
            border-bottom: 1px solid var(--border);
            padding: 1.1rem 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        body.type-coverage header .title-block h1 {
            font-size: 1.35rem;
            font-weight: 800;
            background: var(--tool-title-grad);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        body.type-coverage header .title-block p { color: var(--muted); font-size: 0.82rem; margin-top: 0.1rem; }
        .dev-badge {
            background: rgba(119,26,27,.15);
            border: 1px solid rgba(119,26,27,.3);
            color: #771a1b;
            font-size: 0.68rem;
            font-weight: 800;
            padding: 0.2rem 0.65rem;
            border-radius: 0;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        /* ── Layout ──────────────────────────────────────────────────────── */
        .tool-wrap {
            display: grid;
            grid-template-columns: 340px 1fr;
            gap: 1.25rem;
            padding: 1.25rem;
            max-width: 1440px;
            margin: 0 auto;
            align-items: start;
        }
        @media (max-width: 860px) {
            .tool-wrap { grid-template-columns: 1fr; }
        }

        /* ── Generic panel ───────────────────────────────────────────────── */
        .panel {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--r-lg);
            overflow: hidden;
        }

        /* ── Tab bar ─────────────────────────────────────────────────────── */
        .tab-bar { display: flex; background: var(--card); border-bottom: 1px solid var(--border); }
        .tab-btn {
            flex: 1;
            padding: 0.7rem 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            border: none;
            background: none;
            color: var(--muted);
            transition: color .15s, border-color .15s, background .15s;
            border-bottom: 2px solid transparent;
        }
        .tab-btn:hover { color: var(--text); }
        .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(119,26,27,.06); }

        .tab-content { display: none; padding: 1.1rem; }
        .tab-content.active { display: block; }
        .tab-hint { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.9rem; line-height: 1.5; }

        /* ── Type grid ───────────────────────────────────────────────────── */
        .type-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.4rem;
            margin-bottom: 0.9rem;
        }
        .type-toggle {
            padding: 0.5rem 0.35rem;
            border-radius: var(--r-sm);
            border: 2px solid transparent;
            font-size: 0.8rem;
            font-weight: 700;
            color: #fff;
            text-align: center;
            opacity: .38;
            transition: opacity .15s, transform .15s, border-color .15s, box-shadow .15s;
            letter-spacing: 0.02em;
            text-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
        .type-toggle:hover { opacity: .65; transform: translateY(-1px); }
        .type-toggle.sel {
            opacity: 1;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(0,0,0,.45);
            border-color: rgba(255,255,255,.45);
        }

        .selector-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border);
            font-size: 0.82rem;
        }
        .selector-footer .info { color: var(--muted); }
        .selector-footer .info strong { color: var(--text); }
        .ghost-btn {
            background: none;
            border: 1px solid var(--border);
            color: var(--muted);
            font-size: 0.78rem;
            padding: 0.28rem 0.7rem;
            border-radius: var(--r-sm);
            transition: border-color .15s, color .15s;
        }
        .ghost-btn:hover { color: var(--text); border-color: var(--muted); }

        /* ── Move list ───────────────────────────────────────────────────── */
        .move-search {
            width: 100%;
            padding: 0.55rem 0.85rem;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            color: var(--text);
            font-size: 0.88rem;
            font-family: inherit;
            margin-bottom: 0.6rem;
            transition: border-color .15s;
        }
        .move-search:focus { outline: none; border-color: var(--accent); }
        .move-search::placeholder { color: var(--muted); }

        .moves-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.65rem;
            font-size: 0.8rem;
            color: var(--muted);
            gap: 0.5rem;
        }
        .moves-meta-row .slots {
            display: flex;
            gap: 0.3rem;
        }
        .slot-pip {
            width: 10px; height: 10px;
            border-radius: 50%;
            border: 2px solid var(--border);
            background: transparent;
            transition: background .2s, border-color .2s;
        }
        .slot-pip.filled { background: var(--accent); border-color: var(--accent); }
        .max-label { display: flex; align-items: center; gap: 0.35rem; }
        .max-input {
            width: 38px;
            padding: 0.15rem 0.3rem;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 0;
            color: var(--text);
            font-size: 0.8rem;
            text-align: center;
        }

        .moves-list { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.28rem; }
        .moves-list::-webkit-scrollbar { width: 4px; }
        .moves-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }

        .move-row {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.5rem 0.7rem;
            border-radius: var(--r-sm);
            border: 1px solid var(--border);
            background: var(--card);
            cursor: pointer;
            transition: border-color .12s, background .12s;
            user-select: none;
        }
        .move-row:hover:not(.locked) { border-color: rgba(119,26,27,.5); background: rgba(119,26,27,.07); }
        .move-row.sel { border-color: var(--accent); background: rgba(119,26,27,.14); }
        .move-row.locked:not(.sel) { opacity: .3; cursor: not-allowed; }
        .move-name { font-weight: 600; font-size: 0.86rem; flex-grow: 1; }
        .move-ratio { font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.78rem; color: var(--muted); min-width: 24px; text-align: right; }
        .move-cat { font-size: 0.7rem; color: var(--muted); }
        .move-learners { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
        .no-result { text-align: center; padding: 1.5rem; color: var(--muted); font-size: 0.85rem; font-style: italic; }

        /* ── Results ─────────────────────────────────────────────────────── */
        .results-col { display: flex; flex-direction: column; gap: 0.9rem; }

        /* Score card */
        .score-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--r-lg);
            padding: 1.1rem 1.25rem;
        }
        .score-grid {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            flex-wrap: wrap;
        }
        .score-item { text-align: center; }
        .score-val { display: block; font-size: 2rem; font-weight: 900; line-height: 1; }
        .score-lbl { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; display: block; }
        .s-eff { color: var(--c-eff-text); }
        .s-neu { color: var(--c-neu-text); }
        .s-res { color: var(--c-res-text); }
        .s-imm { color: var(--c-imm-text); }

        .bar-wrap { flex: 1; min-width: 160px; }
        .bar-top { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.35rem; }
        .cov-bar {
            height: 9px;
            background: var(--card);
            border-radius: 0;
            overflow: hidden;
            display: flex;
        }
        .bar-seg { height: 100%; transition: width .4s ease; }
        .bs-eff { background: #2f9e44; }
        .bs-neu { background: #4a5568; }
        .bs-res { background: #d97706; }
        .bs-imm { background: #c92a2a; }

        .tip-box {
            margin-top: 0.75rem;
            padding: 0.55rem 0.9rem;
            border-radius: var(--r-sm);
            background: rgba(119,26,27,.08);
            border: 1px solid rgba(119,26,27,.22);
            font-size: 0.82rem;
            color: var(--muted);
        }
        .tip-box strong { color: #771a1b; }

        /* Empty state */
        .empty {
            text-align: center;
            padding: 2.5rem 1.5rem;
            color: var(--muted);
        }
        .empty .ico { font-size: 2.2rem; margin-bottom: 0.6rem; }
        .empty p { font-size: 0.88rem; line-height: 1.6; }

        /* Category cards */
        .cat-card {
            border-radius: var(--r-lg);
            border: 1px solid;
            overflow: hidden;
        }
        .cat-card.eff { background: var(--c-eff-bg); border-color: var(--c-eff-border); }
        .cat-card.neu { background: var(--c-neu-bg); border-color: var(--c-neu-border); }
        .cat-card.res { background: var(--c-res-bg); border-color: var(--c-res-border); }
        .cat-card.imm { background: var(--c-imm-bg); border-color: var(--c-imm-border); }

        .cat-head {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.65rem 1rem;
            border-bottom: 1px solid;
        }
        .cat-card.eff .cat-head { border-color: var(--c-eff-border); }
        .cat-card.neu .cat-head { border-color: var(--c-neu-border); }
        .cat-card.res .cat-head { border-color: var(--c-res-border); }
        .cat-card.imm .cat-head { border-color: var(--c-imm-border); }

        .cat-mult { font-size: 0.95rem; font-weight: 900; font-family: 'Courier New', monospace; min-width: 26px; }
        .eff .cat-mult { color: var(--c-eff-text); }
        .neu .cat-mult { color: var(--c-neu-text); }
        .res .cat-mult { color: var(--c-res-text); }
        .imm .cat-mult { color: var(--c-imm-text); }

        .cat-label { font-weight: 700; font-size: 0.88rem; }
        .eff .cat-label { color: var(--c-eff-text); }
        .neu .cat-label { color: var(--c-neu-text); }
        .res .cat-label { color: var(--c-res-text); }
        .imm .cat-label { color: var(--c-imm-text); }

        .cat-stats { margin-left: auto; font-size: 0.75rem; opacity: .6; font-weight: 600; text-align: right; }
        .cat-
.def-types { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.55rem; }
        .heroes-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
        .hero-chip {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.12rem 0.5rem;
            border-radius: 0;
            border: 1px solid;
            color: rgba(255,255,255,.85);
        }
        .cat-empty { font-size: 0.8rem; color: var(--muted); font-style: italic; }

        /* ── Matrix section ──────────────────────────────────────────────── */
        .matrix-wrap {
            padding: 0 1.25rem 2rem;
            max-width: 1440px;
            margin: 0 auto;
        }
        .matrix-toggle {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.65rem 1.1rem;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            color: var(--muted);
            font-size: 0.85rem;
            font-weight: 600;
            transition: color .15s, border-color .15s;
        }
        .matrix-toggle:hover { color: var(--text); border-color: var(--accent); }
        .matrix-arrow { font-size: 0.7rem; transition: transform .2s; }
        .matrix-
.matrix-body.open { display: block; }
        .matrix-note {
            padding: 0.65rem 1.1rem;
            border-bottom: 1px solid var(--border);
            font-size: 0.78rem;
            color: var(--muted);
        }
        .matrix-scroll { overflow-x: auto; }
        .matrix-scroll::-webkit-scrollbar { height: 6px; }
        .matrix-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }

        table.mxt {
            border-collapse: collapse;
            font-size: 0.78rem;
        }
        table.mxt th, table.mxt td {
            padding: 0.38rem 0.55rem;
            text-align: center;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid rgba(255,255,255,.04);
        }
        table.mxt thead th {
            background: var(--card);
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        table.mxt .rh {
            position: sticky; left: 0; z-index: 1;
            background: var(--card);
            text-align: left;
            padding-left: 0.75rem;
            border-right: 1px solid var(--border);
            white-space: nowrap;
        }
        table.mxt thead th:first-child {
            position: sticky; left: 0; z-index: 3;
            background: var(--card);
            text-align: left;
            padding-left: 0.75rem;
        }
        table.mxt .row-hi .rh {
            background: rgba(119,26,27,.18);
            border-left: 3px solid var(--accent);
        }
        table.mxt .col-hi { background: rgba(119,26,27,.06); }
        table.mxt .m-eff { color: var(--c-eff-text); background: rgba(47,158,68,.14); font-weight: 700; }
        table.mxt .m-res { color: var(--c-res-text); background: rgba(217,119,6,.09); }
        table.mxt .m-imm { color: var(--c-imm-text); background: rgba(201,42,42,.14); font-weight: 700; }
        table.mxt .m-neu { color: var(--muted); }

        /* ── Loader (partagé : type-coverage ET damage-calc) ─────────────── */
        #loader { text-align: center; padding: 4rem 2rem; color: var(--muted); font-size: 0.9rem; }
        #loader .spin {
            display: inline-block;
            width: 28px; height: 28px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin .8s linear infinite;
            margin-bottom: 1rem;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        #root { display: none; }

/* ── Fondu carte ↔ fond (placé en fin de fichier pour primer sur les ombres
   propres des composants ; le survol, plus spécifique, reste prioritaire) ──
   Halo doux teinté de l'accent du thème → harmonise le bloc avec le dégradé. */
.view-card, .card, .hero-card, .gameplay-section,
.hero-detail-card, .results-panel {
    box-shadow: var(--card-glow);
}

/* ═══════════════════════════════════════════════════════════════
   CLASSES UTILITAIRES MIGRÉES DEPUIS LES STYLES INLINE
   ═══════════════════════════════════════════════════════════════ */

/* ── jouer.html : section compte ─────────────────────────────── */
.account-hint        { opacity: .8; font-size: .9rem; }
.account-form-row    { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.account-input       { max-width: 180px; }
.account-msg         { font-size: .85rem; margin-top: .5rem; min-height: 1.1em; }
.account-msg.msg-error   { color: var(--danger-strong); }
.account-msg.msg-info    { color: var(--muted); }
.account-msg.msg-success { color: var(--success-strong); }
.account-hidden      { display: none; }
.account-wl          { opacity: .8; }

/* ── Bouton compte (coin haut-droite) ──
   Caché par défaut ; visible uniquement sur l'écran d'accueil (comme le
   bouton thème) via la règle body.play-mode:has(...) ci-dessous. */
.account-corner-btn {
    position: fixed;
    top: env(safe-area-inset-top);
    right: max(6px, env(safe-area-inset-right));
    height: 38px;
    z-index: 60;
    display: none;
    align-items: center;
    padding: 0 12px;
    background: transparent;
    border: none;
    color: var(--bar-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}
.account-corner-btn:hover { color: var(--bar-text); }
body.play-mode:has(#mainView.active) .account-corner-btn { display: flex; }

/* ── Pop-up compte (réutilise le style .ie-modal) ── */
#accountOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#accountOverlay.open { display: flex; }
.account-modal { width: min(440px, 96vw); }

/* ── jouer-developpeur.html : bandeau d'avertissement ────────── */
.dev-warning-banner {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    padding: .6rem .9rem;
    border-radius: 0;
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.4;
}

/* ── damage-calc.html : remplacements de styles inline ────────── */
.dc-types-row        { display: flex; gap: .3rem; flex-wrap: wrap; }
.dc-types-empty      { color: var(--muted); font-size: .76rem; }
.dc-search-wrap-flex { flex: 1; }
.field-row-tight     { margin-bottom: .25rem; }
.tc-haz-row-spaced   { margin-top: .3rem; }
.tc-haz-label        { font-size: .75rem; color: var(--text); }

/* Remplit la barre de PV à 100 % (couleur via var(--success)) */
.hp-bar-fill.hp-fill-high { width: 100%; background: var(--success); }
.hp-bar-fill.hp-fill-mid  { background: var(--warning); }
.hp-bar-fill.hp-fill-low  { background: var(--danger); }

/* ── type-coverage.html : remplacements de styles inline ─────── */
.tc-mxt-header  { min-width: 105px; }
.tc-cat-spaced  { margin-bottom: 0.7rem; }
.tc-loader-error { color: var(--danger-text); }

/* ── damage-calc.html / type-coverage.html : éléments génériques ── */
.dc-muted        { color: var(--muted); font-size: .76rem; }
.dc-muted-sm     { color: var(--muted); font-size: .7rem; }
.dc-muted-xs     { color: var(--muted); font-size: .68rem; }
.dc-muted-inline { color: var(--muted); }
.dc-bold-flex    { font-weight: 600; flex: 1; }
.dc-bold-min     { font-weight: 600; min-width: 100px; }
.dc-cat-pow      { color: var(--muted); font-size: .72rem; }
.dc-no-move      { color: var(--muted); font-size: .84rem; }
.dc-stab-mark {
    color: var(--warning-text);
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border: 1px solid var(--warning-text);
    border-radius: 0;
}

/* ── hero-page.js : éléments des cartes héros ────────────────── */
.hp-stat-total-row {
    margin-top: 0.8rem;
    border-top: 1px solid var(--neutral-400);
    padding-top: 0.6rem;
}
.hp-stat-total-name { color: var(--info-strong); font-weight: 800; }
.hp-stat-total-val  { color: var(--info-strong); }
.hp-placeholder-set {
    text-align: left;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
}
.hp-table-wrap { overflow-x: auto; }
.hp-th-center  { text-align: center; }
.hp-td-name {
    font-weight: 700;
    color: var(--text);
}
.hp-td-center { text-align: center; }
.hp-td-meta {
    text-align: center;
    color: var(--muted);
}
.hp-td-effect {
    color: var(--muted);
    font-size: 0.85rem;
    max-width: 300px;
}
.hp-undef-cell { color: var(--faint); }
.btn-back-pantheon { margin-top: 1.5rem; }

/* ── combat-ui.js : éléments combat ──────────────────────────── */
.combat-hp-text-waiting { color: var(--text-secondary); }
.move-btn-empty { color: var(--faint); }
.ht-row-mb { margin-bottom: .3rem; }

/* ── teambuilder.js : éléments du teambuilder ────────────────── */
.tb-empty-list {
    color: var(--muted);
    text-align: center;
    padding: 2rem;
    background: var(--bg);
    border-radius: var(--r-md);
}
.tb-validation-info-mt-1   { margin-top: 1rem; }
.tb-validation-info-mt-0   { margin-top: 0; }
.tb-validation-info-mt-half{ margin-top: 0.5rem; }
.tb-passive-meta {
    font-size: 0.8rem;
    color: var(--muted);
}
.tb-trigger-empty {
    color: var(--faint);
    cursor: not-allowed;
}
.tb-trigger-empty-text {
    color: var(--faint);
    font-style: italic;
}
.tb-empty-result {
    padding: 1rem;
    color: var(--faint);
    text-align: center;
    font-style: italic;
}
.tb-points-remaining {
    font-size: 1.1em;
}
.tb-points-ok       { color: var(--p); }
.tb-points-over     { color: var(--danger-strong); }
.tb-points-warn     { color: var(--warning-strong); }
.spread-bonus-active { color: var(--p); }
.spread-bonus-zero   { color: var(--faint); }
.tb-trait-bonus {
    font-size: 0.7rem;
    color: var(--success-strong);
    margin-left: 2px;
}
.tb-bonus-span {
    min-width: 32px;
    text-align: right;
}

/* ── equilibrage.js : éléments de l'outil d'équilibrage ──────── */
.eq-section-mt { margin-top: 1rem; }
.eq-empty-cell {
    text-align: center;
    color: var(--faint);
}

/* ── data.js : bandeau d'erreur de chargement ────────────────── */
.data-error-banner {
    background: var(--danger-strong);
    color: var(--on-accent);
    padding: 1rem 2rem;
    text-align: center;
    font-weight: bold;
}

/* ════════════════════════════════════════════════════════════
   MODE SURVIE (survie.js)
   Réutilise les variables de thème (--card, --bg, --p, etc.) et des
   classes existantes (.btn, .type-badge, .cat-badge, .spread-btn,
   .type-bg-*, .view-centered-action).
   ════════════════════════════════════════════════════════════ */

/* Page Survie dédiée : éléments hérités du teambuilder gardés masqués. */
.survie-tb-hidden { display: none !important; }
.survie-page #mainView { display: none !important; }

.survie-card { max-width: 1000px; margin: 0 auto; }
.survie-intro { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; }
.survie-step-hint { color: var(--text-secondary); margin-bottom: 1.2rem; }
.survie-empty { color: var(--muted); font-style: italic; padding: 1rem 0; }

.survie-highscore {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .9rem 1.2rem;
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    color: var(--text);
}
.survie-home-actions { display: flex; flex-direction: column; gap: .7rem; align-items: stretch; max-width: 360px; }
.survie-resume-info { color: var(--text-secondary); margin-bottom: .3rem; }

/* ── Recherche (réutilise le système de filtres du teambuilder) ── */
.survie-search {
    width: 100%;
    padding: .6rem .9rem;
    margin-bottom: .6rem;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 1rem;
}
/* Barre des puces de filtre : fond transparent pour s'intégrer à la carte sombre. */
#survieFiltersBar.active-filters-bar {
    background: transparent;
    border-bottom: none;
    padding: 0 0 .5rem;
}
/* Panneau de résultats : encadré et défilable plutôt que d'allonger la page. */
#survieSearchResults {
    max-height: 60vh;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card-2);
}

/* ── Grille de héros (choix de départ / récompense) ── */
.survie-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .8rem;
    max-height: 60vh;
    overflow-y: auto;
}
.survie-hero-card {
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s, border-color .12s;
    display: flex;
    flex-direction: column;
}
.survie-hero-card:hover { transform: translateY(-3px); border-color: var(--p); }
/* En-tête à hauteur fixe : 1 ou 2 types occupent la même place → l'icône et le
   total restent alignés d'une carte à l'autre (cf. cartes du panthéon). */
.survie-hero-card-header {
    padding: .5rem .6rem;
    height: 6rem;            /* hauteur FIXE : accueille nom + jusqu'à 2 types */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    text-align: center;
    overflow: hidden;
}
.survie-hero-card-name { font-weight: 700; color: #fff; line-height: 1.15; }
.survie-hero-card-types { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.survie-hero-card-splash { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.survie-hero-card-splash img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.survie-hero-card-splash .tb-splash-ph { font-size: 2.2rem; font-weight: 800; color: var(--muted); }
.survie-hero-card-stats { padding: .4rem .6rem; font-size: .85rem; color: var(--text-secondary); text-align: center; }

/* ── Choix des attaques ── */
.survie-move-pick { margin-top: .5rem; }
.survie-movepick-header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.survie-movepick-hero { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.survie-movepick-count { margin-left: auto; color: var(--text-secondary); }
.survie-move-list { display: flex; flex-direction: column; gap: .5rem; max-height: 52vh; overflow-y: auto; }
.survie-move-opt {
    background: var(--card-2);
    border: 1px solid var(--border);
    border-left: 4px solid transparent;
    border-radius: var(--r-sm);
    padding: .6rem .8rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.survie-move-opt:hover { background: var(--bg-hover); }
.survie-move-opt.selected { border-left-color: var(--p); background: var(--bg-hover); }
.survie-move-opt-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.survie-move-opt-name { font-weight: 600; color: var(--text); }
.survie-move-opt-ratio { color: var(--text-secondary); }
.survie-move-opt-ut { color: var(--muted); font-size: .85rem; }
.survie-move-opt-eff { color: var(--text-secondary); font-size: .85rem; margin-top: .3rem; }

/* ── Étape A : récompense ── */
.survie-reward-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.survie-reward-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; }
.survie-reward-col h3 { margin: 0 0 .4rem; color: var(--text); }
.survie-reward-sub { color: var(--text-secondary); font-size: .9rem; margin-bottom: .8rem; }
.survie-reward-heroes, .survie-reward-items { display: flex; flex-direction: column; gap: .6rem; }
.survie-reward-hero {
    padding: .7rem .9rem; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    border: 1px solid var(--border); transition: transform .12s;
}
.survie-reward-hero:hover { transform: translateX(4px); }
.survie-rh-name { font-weight: 700; color: #fff; }
.survie-reward-item {
    background: var(--card-2); border: 1px solid var(--border);
    border-left: 4px solid var(--p); border-radius: var(--r-sm);
    padding: .7rem .9rem; cursor: pointer; transition: background .12s;
}
.survie-reward-item:hover { background: var(--bg-hover); }
.survie-ri-name { font-weight: 700; color: var(--text); }
.survie-ri-effect { color: var(--text-secondary); font-size: .88rem; margin-top: .2rem; }

/* ── Lignes de stats (étapes B et C) ── */
.survie-stat-rows { display: flex; flex-direction: column; gap: .35rem; }
.survie-stat-row { display: grid; grid-template-columns: 3.2rem 2rem 3rem 2rem 3rem; align-items: center; gap: .4rem; }
.survie-stat-label { color: var(--text-secondary); font-weight: 600; }
.survie-stat-bonus { text-align: center; color: var(--muted); }
.survie-stat-bonus.spread-bonus-active { color: var(--p); font-weight: 700; }
.survie-stat-eff { text-align: right; font-family: 'Courier New', monospace; font-weight: 700; color: var(--text); }

/* ── Étape B : placement des PC ── */
.survie-pc-pool { font-size: 1.15rem; margin-bottom: 1rem; color: var(--text); }
/* ⚠ Redéfinition de classes du teambuilder (couleurs différentes) : placée
   APRÈS, elle gagne PARTOUT (teambuilder compris). Comportement actuel
   conservé en l'état — à harmoniser un jour si les couleurs surprennent. */
.tb-points-ok { color: #4caf50; }
.tb-points-over { color: var(--muted); }
.survie-pc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.survie-pc-hero { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: .9rem; }
.survie-pc-hero-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; font-weight: 700; color: var(--text); }
.survie-pc-invested { color: var(--text-secondary); font-weight: 500; font-size: .85rem; }

/* ── Étape C : éditeur ── */
.survie-editor-card { max-width: 1100px; }
.survie-editor-heroes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.survie-editor-hero {
    padding: .5rem .8rem; border-radius: var(--r-sm); cursor: pointer;
    border: 2px solid transparent; opacity: .8; transition: opacity .12s, border-color .12s;
    display: flex; flex-direction: column;
}
.survie-editor-hero:hover { opacity: 1; }
.survie-editor-hero.active { opacity: 1; border-color: var(--p); }
.survie-eh-name { font-weight: 700; color: #fff; }
.survie-eh-item { font-size: .75rem; color: rgba(255,255,255,.85); }
.survie-editor-panel { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.survie-edit-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: .9rem; }
.survie-edit-title { font-weight: 700; color: var(--text); margin-bottom: .7rem; display: flex; justify-content: space-between; align-items: center; }
.survie-edit-count { font-weight: 500; font-size: .82rem; color: var(--text-secondary); }
.survie-inv-list { display: flex; flex-direction: column; gap: .5rem; max-height: 40vh; overflow-y: auto; }
.survie-inv-opt {
    background: var(--card-2); border: 1px solid var(--border);
    border-left: 4px solid transparent; border-radius: var(--r-sm);
    padding: .55rem .75rem; cursor: pointer; transition: background .12s;
}
.survie-inv-opt:hover { background: var(--bg-hover); }
.survie-inv-opt.selected { border-left-color: var(--p); background: var(--bg-hover); }
.survie-inv-opt.disabled { opacity: .45; cursor: not-allowed; }
.survie-inv-name { font-weight: 600; color: var(--text); }
.survie-inv-effect { font-size: .82rem; color: var(--text-secondary); margin-top: .2rem; }
.survie-inv-copies { color: var(--p); font-weight: 700; }
.survie-inv-used { font-size: .75rem; color: var(--muted); font-style: italic; }

/* ── Écran de fin ── */
.survie-end-card { text-align: center; max-width: 560px; }
.survie-end-score { font-size: 1.3rem; margin: 1rem 0; color: var(--text); }
.survie-end-best { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 1.2rem; }
.survie-end-record { color: var(--p); font-weight: 700; }

/* ── Responsive mobile ── */
@media (max-width: 768px) {
    .survie-reward-cols { grid-template-columns: 1fr; }
    .survie-editor-panel { grid-template-columns: 1fr; }
    .survie-pc-list { grid-template-columns: 1fr; }
}

/* ── pantheon.html : gradient inline pour double type ──────────
   Le gradient est défini en inline style pour combiner deux types.
   Pas de classe utilitaire nécessaire — laissé en var pour permettre
   au JS de calculer la couleur dynamique. */

/* ════════════════════════════════════════════════════════════
   PAGE RÈGLES — refonte (regles.html)
   Sommaire fixe (suit le défilement) + contenu, deux niveaux de
   lecture (essentiel + blocs « Avancé » repliables) + cartes de
   référence rapides. N'affecte QUE regles.html : classes .rules-layout
   et .rules-toc / .rules-* propres à cette page. Réutilise les variables
   de thème et les classes existantes (.stats-table, .type-badge…).
   ════════════════════════════════════════════════════════════ */

/* Mise en page 2 colonnes : sommaire à gauche, contenu à droite */
.rules-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.rules-layout .rules-content {
    flex: 1 1 auto;
    min-width: 0;          /* autorise le contenu à rétrécir (tables larges) */
    margin: 0;             /* la marge est gérée par .rules-layout */
    max-width: none;
}

/* Sommaire qui suit le défilement (sous la navbar sticky) */
.rules-toc {
    flex: 0 0 240px;
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    background: var(--card);
    border: 2px solid var(--p);
    border-radius: var(--r-lg);
    padding: 1.25rem 1rem;
    box-shadow: var(--shadow-sm);
    font-size: .9rem;
}
.rules-toc-title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--p);
    font-size: .8rem;
    margin: 0 0 .6rem .25rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--border);
}
.rules-toc-list,
.rules-toc-list ul { list-style: none; margin: 0; padding: 0; }
.rules-toc-list li { margin: .12rem 0; }
.rules-toc-list a {
    display: block;
    padding: .25rem .5rem;
    color: var(--text);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
    transition: color .15s, background .15s, border-color .15s;
}
.rules-toc-list a:hover { color: var(--p); background: var(--bg); }
.rules-toc-list ul a { padding-left: 1.25rem; font-size: .85rem; color: var(--muted); }
.rules-toc-list a.toc-current {
    color: var(--p);
    border-left-color: var(--p);
    background: var(--bg);
    font-weight: 600;
}

/* Décalage des ancres pour qu'un titre ne passe pas sous la navbar */
.rules-content h2,
.rules-content h3 { scroll-margin-top: 5.5rem; }

.rules-content h5 { color: var(--p); margin: 0 0 .35rem; font-size: 1.02rem; }
.rules-intro { color: var(--muted); font-style: italic; }
.rules-h-hint { color: var(--muted); font-weight: 400; font-size: .8em; }

/* Encadré « l'essentiel » + rappel STAB en ligne */
.rules-callout,
.rules-callout-inline {
    background: var(--grad-light);
    border-left: 5px solid var(--p);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.rules-callout { padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.rules-callout ul { margin: 0; padding-left: 1.25rem; }
.rules-callout li { margin-bottom: .5rem; }
.rules-callout li:last-child { margin-bottom: 0; }
.rules-callout-inline { display: block; padding: 1rem 1.25rem; margin: 1.25rem 0; }

.rules-steps { padding-left: 1.5rem; }
.rules-steps li { margin-bottom: .6rem; }

/* Cartes de référence rapides (statuts, terrains, pièges, murs) */
.rules-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}
.rules-ref-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--p);
    border-radius: var(--r-lg);
    padding: .9rem 1.1rem;
}
.rules-ref-card p { margin: 0; font-size: .92rem; line-height: 1.6; }

/* Blocs « Avancé » repliables */
details.rules-advanced {
    border: 1px solid var(--border);
    border-left: 4px solid var(--s);
    border-radius: var(--r-lg);
    background: var(--bg);
    margin: 1.25rem 0;
    padding: 0 1.25rem;
}
details.rules-advanced > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--s);
    padding: .85rem 0;
    list-style: none;
    user-select: none;
}
details.rules-advanced > summary::-webkit-details-marker { display: none; }
details.rules-advanced > summary::before {
    content: '▶';
    display: inline-block;
    margin-right: .5rem;
    font-size: .8em;
    transition: transform .15s;
}
details.rules-advanced[open] > summary::before { transform: rotate(90deg); }
details.rules-advanced[open] { padding-bottom: .75rem; }

/* Renvois contextuels « → … » */
.rules-seealso { font-size: .95rem; margin: .5rem 0 1.5rem; }
.rules-seealso a { color: var(--p); font-weight: 600; text-decoration: none; }
.rules-seealso a:hover { color: var(--s); text-decoration: underline; }
.rules-seealso a::before { content: '→ '; color: var(--s); }

/* Glossaire */
.rules-glossary { margin: 1rem 0; }
.rules-glossary dt { font-weight: 700; color: var(--p); margin-top: .75rem; }
.rules-glossary dd { margin: .1rem 0 0; padding-left: 1rem; color: var(--text); line-height: 1.6; }

/* Mobile : le sommaire passe au-dessus du contenu, compact et scrollable */
@media (max-width: 980px) {
    .rules-layout { flex-direction: column; gap: 1rem; padding: 0 .75rem; }
    .rules-toc {
        position: static;
        flex: none;
        width: 100%;
        top: auto;
        max-height: 45vh;
    }
}

/* ════════════════════════════════════════════════════════════
   TOOLTIP D'AFFINITÉS DE TYPE (regles.html + pages héros)
   Réutilise .tooltip-container / .tooltip (tap-toggle géré par layout.js).
   Contenu compact : Offensif (Fort/Peu/Aucun) + Défensif (Faible à/Résiste/Immunisé).
   Construit par typeTooltipHTML() dans data.js. Gère 1 ou 2 types (×4 / ×¼ annotés).
   ════════════════════════════════════════════════════════════ */
.type-tooltip { width: 300px; text-align: left; padding: .75rem .9rem; }
.type-tooltip .tt-sec + .tt-sec {
    margin-top: .55rem; padding-top: .55rem;
    border-top: 1px solid rgba(255,255,255,.15);
}
.type-tooltip .tt-sec-title {
    font-weight: 700; font-size: .8rem; color: #fff;
    margin-bottom: .35rem; letter-spacing: .02em;
}
.type-tooltip .tt-row { display: flex; align-items: flex-start; gap: .4rem; margin: .22rem 0; }
.type-tooltip .tt-lbl {
    flex: 0 0 5rem;
    font-size: .72rem; font-weight: 600;
    padding-top: .18rem; line-height: 1.2;
}
/* Vert = favorable, rouge = défavorable, bleu = immunité, gris = sans effet */
.type-tooltip .tt-strong, .type-tooltip .tt-resist { color: #8ce99a; }
.type-tooltip .tt-weak,   .type-tooltip .tt-weakto { color: #ff8787; }
.type-tooltip .tt-none                              { color: #ced4da; }
.type-tooltip .tt-immune                            { color: #74c0fc; }
.type-tooltip .tt-badges { display: flex; flex-wrap: wrap; gap: .2rem; }
.type-tooltip .type-badge {
    font-size: .68rem; padding: .08rem .35rem;
    border-radius: 4px; line-height: 1.35; font-weight: 600;
}
.type-tooltip .type-badge sup { font-size: .78em; margin-left: 1px; }
.type-tooltip .tt-muted { color: #adb5bd; font-style: italic; font-size: .78rem; }

/* Variante positionnée SOUS le déclencheur (en-tête des pages héros) */
.type-tooltip--below { bottom: auto; top: 115%; }
.type-tooltip--below::after {
    top: auto; bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(0,0,0,.95);
}

/* Grille de types (regles.html) : le conteneur de tooltip devient l'item de grille */
.types-grid .tooltip-container { display: block; }
.types-grid .tooltip-container > .type-badge { display: block; }