@import url("/static/components.css");

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--void); color: var(--ink-dim);
  font-family: var(--font-ui); font-size: 15px;
}
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; flex-shrink: 0; background: var(--hull);
  border-right: 1px solid var(--seam); padding: var(--s-5) 0;
}
.sidebar__brand {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  line-height: 1.2; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); padding: 0 var(--s-5) var(--s-5);
  border-bottom: 1px solid var(--seam);
}
.sidebar__brand span { color: var(--rust); }
.sidebar__section {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-faint); padding: var(--s-5) var(--s-5) var(--s-2);
}
.sidebar__nav a {
  display: block; padding: var(--s-2) var(--s-5);
  color: var(--ink-dim); text-decoration: none;
  border-left: 2px solid transparent;
}
.sidebar__nav a:hover { color: var(--ink); background: var(--plate); }
.sidebar__nav a:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }

.content { flex: 1; padding: var(--s-7); }
.page-title {
  font-family: var(--font-display); font-weight: 800; font-size: 44px;
  text-transform: uppercase; letter-spacing: -.015em; line-height: .95;
  color: var(--ink); margin: 0 0 var(--s-3);
}
.page-title em { font-style: normal; color: var(--cobalt); }
.lede { font-size: 15px; color: var(--ink-dim); margin: 0 0 var(--s-5); }
.muted { color: var(--ink-faint); font-size: 13px; }
.section-title {
  color: var(--ink); font: 800 14px var(--font-ui); text-transform: uppercase;
  letter-spacing: .08em; margin: var(--s-6) 0 var(--s-3);
}

/* ═══ TABLEAUX DE CONSULTATION (tournois, invaincus, ingestion) ═══ */
.data-table { width: 100%; border-collapse: collapse; margin-top: var(--s-3); }
.data-table th {
  text-align: left; padding: var(--s-2) var(--s-3); color: var(--ink-faint);
  font: 800 11px var(--font-ui); text-transform: uppercase; border-bottom: 1px solid var(--seam);
}
.data-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--seam); }
.data-table tr:hover td { background: var(--plate); }

.army-list {
  background: var(--hull); border: 1px solid var(--seam); border-radius: var(--radius);
  padding: var(--s-4); font: 500 13px var(--font-data); color: var(--ink-dim);
  white-space: pre-wrap; margin: var(--s-2) 0;
}

/* ═══ FORMULAIRE D'INGESTION ═══ */
.upload-form { display: flex; flex-direction: column; gap: var(--s-4); max-width: 480px; margin-bottom: var(--s-6); }
.upload-form label { display: flex; flex-direction: column; gap: var(--s-1); font-size: 13px; color: var(--ink-dim); }
.upload-form input[type="file"] {
  background: var(--plate); border: 1px solid var(--seam); border-radius: var(--radius);
  padding: var(--s-2); color: var(--ink-dim); font-size: 13px;
}
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.badge--active { background: var(--verdigris); color: var(--void); }

/* ═══ ONGLETS DE DISPOSITION ═══ */
.tab-row { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   MODE RESPONSIVE (MOBILES ET TABLETTES)
   ========================================================= */

/* Par défaut, s'assurer que le contenu principal ne dépasse jamais l'écran */
.content {
    max-width: 100%;
    box-sizing: border-box;
}

/* Règle de protection pour les très grands tableaux de données */
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* Crée une barre de défilement horizontale juste pour le tableau */
    -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
    margin-bottom: 20px;
    box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.2); /* Petit effet visuel */
}

/* Dès que l'écran fait 900px ou moins (Tablettes et Téléphones) */
@media screen and (max-width: 900px) {
    /* 1. On passe l'affichage de horizontal (côte à côte) à vertical (empilé) */
    .shell {
        flex-direction: column !important;
        display: flex;
    }

    /* 2. La barre latérale prend toute la largeur et se met en haut */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        border-right: none !important;
        border-bottom: 1px solid var(--seam);
        padding: 15px !important;
    }

    /* 3. On ajuste le menu de navigation pour qu'il soit plus compact sur mobile */
    .sidebar__nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
    }

    .sidebar__section {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .tes-anciennes-classes, .sidebar__nav a {
        flex: 1 1 auto;
        text-align: center;
        padding: 8px !important;
    }

    /* 4. Le contenu principal prend toute la largeur restante */
    .content {
        padding: 15px !important;
        width: 100% !important;
        overflow-x: hidden;
    }
}