/* ═════════════════════════════════════════════════════════════
   RESPONSIVE.CSS
   Points de rupture pour adapter la mise en page aux écrans plus
   petits : tablette (≤900px) et mobile (≤600px).
   ═════════════════════════════════════════════════════════════ */

/* ─ TABLETTE (≤ 900px) ─────────────────────────────────────── */
@media (max-width: 900px) {

  /* Neutralise les paddings du desktop pour mobile */
  body,
  body:has(.main-nav),
  body:has(.main-nav.collapsed) {
    padding-left: 0 !important; /* Pas de padding gauche */
    align-items: stretch !important; /* Contenu pleine largeur */
  }

  /* Blocs principaux : centrés et pleine largeur */
  header,
  main,
  footer,
  .credits-section,
  .contact-section {
    margin-left: auto !important; /* Centré */
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Padding réduit en tablette */
  main {
    padding: var(--spacing-md) var(--spacing-lg); /* 16px haut/bas, 24px côtés */
  }

  /* Galerie : colonnes plus petites */
  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 180px au lieu de 200px */
  }

  .credits-section {
    padding: var(--spacing-lg) var(--spacing-lg); /* 24px partout */
  }
}

/* ─ MOBILE (≤ 600px) ────────────────────────────────────────– */
@media (max-width: 600px) {

  /* ─ BODY ────────────────────────────────────────────────── */
  body {
    font-size: 0.97em; /* Très légèrement plus petit */
    overflow-x: hidden; /* Pas de scroll horizontal */
  }

  /* ─ HEADER ────────────────────────────────────────────────– */
  header {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); /* Réduit */
    text-align: center;
  }

  header h1 {
    font-size: 1.5em; /* 24px au lieu de 38px */
    text-align: center;
  }

  .site-logo img {
    max-width: 260px; /* Petit logo */
    margin: 0 auto;
  }

  /* ─ MARQUEE (DÉFILEMENT) ──────────────────────────────────– */
  .marquee-container {
    margin-top: var(--spacing-sm); /* Plus proche du header */
  }

  /* ─ MAIN ────────────────────────────────────────────────── */
  main {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl); /* 16px côtés, 40px bas */
    max-width: 100% !important; /* Force pleine largeur */
  }

  /* ─ TYPOGRAPHIE ─────────────────────────────────────────– */
  h2 {
    font-size: 1.25em; /* 20px */
    line-height: 1.35;
    margin-bottom: var(--spacing-md);
  }

  p {
    line-height: 1.75;
    margin: var(--spacing-sm) 0; /* 8px haut/bas */
  }

  .source {
    text-align: left; /* Pas aligné droite sur mobile */
  }

  .instruction,
  .description {
    padding: var(--spacing-md); /* 16px partout */
    font-size: 0.88em; /* Légèrement réduit */
  }

  /* ─ SECTIONS ────────────────────────────────────────────– */
  section {
    margin-bottom: var(--spacing-xl); /* 32px */
    padding-bottom: var(--spacing-lg); /* 24px */
  }

  /* ─ GALERIES D'IMAGES ───────────────────────────────────– */
  .image-gallery {
    grid-template-columns: 1fr 1fr; /* 2 colonnes uniquement */
    gap: var(--spacing-xs); /* 4px entre images (très serré) */
    margin: var(--spacing-md) 0;
  }

  .image-gallery img {
    height: 130px; /* Plus petit */
  }

  /* ─ IMAGE CENTRÉE ───────────────────────────────────────– */
  .image-center {
    margin: var(--spacing-lg) auto; /* 24px avant/après */
  }

  .image-center img {
    width: 100%; /* Pleine largeur */
    max-width: 100%;
    border-radius: var(--border-radius); /* Petits coins */
  }

  /* ─ LISTE DÉMOLITIONS ───────────────────────────────────– */
  .demolitions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); /* 8px entre liens */
  }

  .demolitions a {
    display: block;
    padding: var(--spacing-md); /* 16px */
    background: var(--color-bg-secondary); /* Fond visible */
    border: var(--border); /* Bordure visible */
    border-radius: var(--border-radius-lg); /* Coins arrondis (8px) */
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }

  .demolitions a:hover,
  .demolitions a:active {
    background: var(--color-bg-tertiary); /* Au survol/clic : surlighté */
    color: var(--color-accent); /* Texte bleu */
    border-color: var(--color-accent);
  }

  /* ─ CRÉDITS ─────────────────────────────────────────────– */
  .credits-section {
    padding: var(--spacing-lg) var(--spacing-md); /* 24px haut/bas, 16px côtés */
  }

  .credits-section ul li {
    padding-left: var(--spacing-sm); /* 8px d'indentation */
    font-size: var(--font-size-xs); /* Très petit */
  }

  /* ─ CONTACT ─────────────────────────────────────────────– */
  .contact-section {
    padding: var(--spacing-md); /* 16px */
    margin: var(--spacing-md);
  }

  .contact-section h2 {
    font-size: 1.1em; /* Petit titre */
  }

  /* ─ FOOTER ──────────────────────────────────────────────– */
  footer {
    padding: var(--spacing-lg) var(--spacing-md); /* 24px haut/bas, 16px côtés */
    gap: var(--spacing-md); /* 16px entre éléments */
  }

  .copyright {
    font-size: var(--font-size-xs);
    text-align: center;
    line-height: 1.7;
  }

  /* ─ BACK-TO-TOP ─────────────────────────────────────────– */
  #back-to-top {
    bottom: 16px; /* Plus proche du coin */
    right: 16px;
    padding: var(--spacing-sm) var(--spacing-sm); /* Petit bouton 8x8px */
    font-size: var(--font-size-xs); /* Petit texte */
  }

  /* ─ TABLEAU CHANGELOG ───────────────────────────────────– */
  .changelog table,
  .changelog th,
  .changelog td {
    display: block; /* Chaque élément sur sa propre ligne */
    width: 100%;
  }

  .changelog th {
    text-align: left;
    margin-bottom: var(--spacing-sm); /* Espace après header */
  }

  .changelog td {
    margin-bottom: var(--spacing-md); /* Espace entre lignes */
  }

  /* ─ HÉRITAGE DESKTOP À ADAPTER POUR MOBILE ─────────────– */
  .update-info {
    text-align: center;
    font-size: 0.65em; /* Très petit sur mobile */
  }

  .nav-button {
    width: 100%; /* Pleine largeur */
    text-align: center;
    padding: var(--spacing-sm) 0; /* Réduit */
  }

  .demolition-navigation {
    flex-direction: column; /* Empilation verticale */
    gap: var(--spacing-sm); /* 8px entre boutons */
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md); /* Moins d'espace */
  }
}