/* ═══════════════════════════════════════════════════════════════
   responsive.css — Correctifs responsive pour tout le projet
   À inclure EN DERNIER, après tous les autres <link> CSS
   ═══════════════════════════════════════════════════════════════

   STRUCTURE :
   1. Tokens responsive
   2. Layout de base (main, sections)
   3. Navbar + hamburger
   4. Grilles de cartes (jeux, projets)
   5. Tables de score
   6. Page de jeu (game-detail)
   7. Login
   8. About / Contact
   9. Jeux individuels (qwirkle, smilelife, triomino, tresFute)
  10. Utilitaires
═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   1. TOKENS RESPONSIVE
─────────────────────────────────────────────────────────── */
:root {
  --page-px: clamp(16px, 4vw, 48px);   /* padding horizontal universel */
  --section-gap: clamp(40px, 6vw, 80px);
}


/* ───────────────────────────────────────────────────────────
   2. LAYOUT DE BASE
─────────────────────────────────────────────────────────── */

/* main standard (base.css + score pages) */
main {
  padding-left: var(--page-px);
  padding-right: var(--page-px);
}

/* Sections génériques */
.section {
  padding-left: var(--page-px);
  padding-right: var(--page-px);
}

/* Conteneurs de page de projet */
.project-body {
  padding-left: var(--page-px);
  padding-right: var(--page-px);
}


/* ───────────────────────────────────────────────────────────
   3. NAVBAR + HAMBURGER MENU
   Remplace le comportement overflow de navbar.css
─────────────────────────────────────────────────────────── */

/* Bouton hamburger (masqué par défaut) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 110;
}

.nav-hamburger span {
  display: block;
  height: 1.5px;
  background: var(--muted);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

/* État ouvert */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile ≤ 640px : menu plein écran via hamburger ── */
@media (max-width: 640px) {
  nav {
    padding: 0 16px;
  }

  /* Affiche le hamburger */
  .nav-hamburger {
    display: flex;
  }

  /* Cache le bouton ··· et son dropdown — inutiles sur mobile */
  .nav-more-btn  { display: none !important; }
  .nav-dropdown  { display: none !important; }

  /* Le wrapper devient un panneau plein écran masqué par défaut */
  .nav-links-wrapper {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - var(--nav-h));
    background: rgba(245, 242, 238, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 8px 0 40px;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 105;
  }

  .nav-links-wrapper.open {
    transform: translateX(0);
  }

  /* Liens en colonne, tap-friendly */
  .nav-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 18px 24px;
    font-size: 1rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }

  /* Supprime le soulignement doré animé sur mobile */
  .nav-links a::after {
    display: none;
  }

  /* Lien actif : trait gauche doré */
  .nav-links a.active {
    border-left: 3px solid var(--gold);
    padding-left: 21px;
    color: var(--accent);
  }

  /* Section utilisateur */
  .nav-user {
    margin-top: 16px;
    padding: 0 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .nav-username { font-size: 0.85rem; }
  .nav-user a   { font-size: 0.85rem; padding: 8px 0; }
}

/* ── Tablette 641–900px : liens visibles, espacement réduit ── */
@media (min-width: 641px) and (max-width: 900px) {
  nav { padding: 0 24px; }

  .nav-links { gap: 18px; }

  .nav-links a {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
  }
}


/* ───────────────────────────────────────────────────────────
   4. GRILLES DE CARTES — jeux.css / mesprojets.css
─────────────────────────────────────────────────────────── */

/* ── Desktop ≥ 1200px : 3+ colonnes ── */
@media (min-width: 1200px) {
  .games-grid,
  .project-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
  }
}

/* ── Desktop standard 900–1199px : 2-3 colonnes (déjà ok par auto-fill) ── */
@media (min-width: 900px) and (max-width: 1199px) {
  .games-grid,
  .project-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* ── Tablette 600–899px : 2 colonnes fixes ── */
@media (min-width: 600px) and (max-width: 899px) {
  .games-grid,
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ── Mobile < 600px : 1 colonne ── */
@media (max-width: 599px) {
  .games-grid,
  .project-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .game-card,
  .project-card {
    padding: 24px 20px;
  }
}


/* ───────────────────────────────────────────────────────────
   5. TABLES DE SCORE (base.css / oanami.css / trainMexicain.css)
─────────────────────────────────────────────────────────── */

/* Wrapper toujours scrollable horizontalement */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar discrète */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--line);
}

.table-wrapper::-webkit-scrollbar { height: 4px; }
.table-wrapper::-webkit-scrollbar-track { background: var(--line); }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* La table ne se réduit jamais en dessous d'un minimum lisible */
#score-table {
  min-width: 480px;
}

/* ── Sur grand écran : plusieurs tableaux côte à côte ── */
@media (min-width: 1100px) {
  /* Si le HTML contient plusieurs .table-wrapper dans un .tables-row */
  .tables-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  .tables-row .table-wrapper {
    flex: 1;
    min-width: 0;
  }

  /* Expand main pour accueillir les tableaux côte à côte */
  main.multi-table {
    max-width: 1400px;
  }
}

/* Controls bar : wrap propre */
@media (max-width: 640px) {
  .controls-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .control-group {
    width: 100%;
    flex-wrap: wrap;
  }

  .btn-send {
    width: 100%;
    text-align: center;
  }

  .submit-section {
    flex-direction: column;
  }
}

/* Page header sur mobile */
@media (max-width: 640px) {
  .page-header {
    padding: 32px 0 20px;
  }

  .page-header h1 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }
}

/* Badges de manche Train Mexicain sur mobile */
@media (max-width: 480px) {
  [class^="badge-d"] {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
  }

  .tour-display {
    font-size: 0.85rem;
    min-width: 90px;
  }

  .ordre-container {
    padding: 0.75rem 1rem;
  }
}


/* ───────────────────────────────────────────────────────────
   6. PAGE DÉTAIL JEU (jeux.css)
─────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .game-detail {
    padding: 32px 16px;
  }

  .game-detail h2 {
    font-size: clamp(28px, 8vw, 42px);
  }

  .game-meta {
    gap: 12px;
  }
}


/* ───────────────────────────────────────────────────────────
   7. PAGE LOGIN (login.css)
─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .login-wrap {
    padding: 40px 16px;
  }

  .login-card {
    padding: 32px 20px;
  }
}


/* ───────────────────────────────────────────────────────────
   8. ABOUT / CONTACT
─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-photo {
    max-width: 340px;
    margin: 0 auto;
  }
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 480px) {
  .contact-form {
    gap: 14px;
  }
}


/* ───────────────────────────────────────────────────────────
   9A. QWIRKLE (qwirkle.css)
─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .qw-intro {
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px;
  }

  .qw-score-grid {
    grid-template-columns: 1fr;
  }

  .qw-examples {
    font-size: 0.78rem;
  }

  .qw-examples th,
  .qw-examples td {
    padding: 6px 8px;
  }

  .qw-tile { width: 28px; height: 28px; font-size: 0.9rem; }
  .qw-tile-sm { width: 24px; height: 24px; font-size: 0.8rem; }
}


/* ───────────────────────────────────────────────────────────
   9B. SMILE LIFE (smilelife.css)
─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sl-intro {
    padding: 20px 18px;
  }

  .sl-cards-grid {
    grid-template-columns: 1fr;
  }

  .sl-memo-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sl-pros-list {
    grid-template-columns: 1fr;
  }

  .sl-salary-scale {
    gap: 6px;
  }
}


/* ───────────────────────────────────────────────────────────
   9C. TRIOMINO (triomino.css)
─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tr-intro {
    flex-direction: column;
    gap: 16px;
  }

  .tr-setup-grid {
    grid-template-columns: 1fr;
  }

  .tr-bonus-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tr-fig-row {
    flex-direction: column;
  }

  .tr-penalty-row {
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (max-width: 380px) {
  .tr-bonus-grid {
    grid-template-columns: 1fr;
  }
}


/* ───────────────────────────────────────────────────────────
   9D. TRÈS FUTÉ (tresFute.css)
   Fiche de score : 1 colonne sur mobile, 2 col sur tablette,
   layout large sur grand écran
─────────────────────────────────────────────────────────── */

/* ── Mobile < 480px : ultra compact ── */
@media (max-width: 479px) {
  .tf-main {
    padding: 4px;
  }

  .tf-sheet {
    grid-template-columns: 1fr;  /* tout en colonne */
    max-width: 100%;
    gap: 4px;
  }

  /* Les sections jaune & bleue passent pleine largeur */
  .tf-yellow-section,
  .tf-blue-section {
    grid-column: 1 / -1;
  }

  :root {
    --cell: 30px;
    --gap: 3px;
  }

  .page-header h1 { font-size: 1.2rem; }
}

/* ── Tablette 480–767px : 2 colonnes (défaut) ── */
@media (min-width: 480px) and (max-width: 767px) {
  .tf-sheet {
    max-width: 100%;
  }
}

/* ── Grand écran ≥ 1024px : fiche centrée mais plus large ── */
@media (min-width: 1024px) {
  .tf-sheet {
    max-width: 760px;  /* plus d'espace, plus aéré */
    gap: 10px;
  }

  :root {
    --cell: 44px;
  }

  .tf-section { padding: 12px 14px; }
}

/* ── Très grand écran ≥ 1400px : layout 2 fiches côte à côte ── */
@media (min-width: 1400px) {
  /* Wrappez deux .tf-main dans un .tf-dual si vous voulez afficher
     deux fiches côte à côte (ex: 2 joueurs) */
  .tf-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1300px;
    margin: 0 auto;
  }
}


/* ───────────────────────────────────────────────────────────
   9E. PROJET HERO (projet.css)
─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .project-hero {
    padding: 40px 0 32px;
  }

  .project-hero__title {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }

  .project-hero__tagline {
    font-size: 0.95rem;
  }

  .project-hero__meta {
    gap: 16px;
  }

  .project-meta-divider {
    display: none;
  }

  .project-features {
    grid-template-columns: 1fr;
  }

  .project-carousel__btn--prev { left: -10px; }
  .project-carousel__btn--next { right: -10px; }
}


/* ───────────────────────────────────────────────────────────
   10. UTILITAIRES RESPONSIVE
─────────────────────────────────────────────────────────── */

/* Masquer/afficher par breakpoint */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 641px) {
  .hide-desktop { display: none !important; }
}

/* Textes adaptatifs */
@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(38px, 10vw, 64px);
  }

  .hero {
    padding: 48px 16px;
  }

  .hero-desc {
    font-size: 0.95rem;
  }

  .hero-actions {
    flex-direction: column;
  }
}

/* Footer mobile */
@media (max-width: 480px) {
  footer {
    padding: 24px 16px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* Dés (dice.css) sur petit écran */
@media (max-width: 380px) {
  .dice-face {
    width: 56px;
    height: 56px;
  }

  .dice-value { font-size: 1.3rem; }
}