/* =====================================================================
   responsive.css — Adaptation mobile & tablette
   Ajouté en 2026. Chargé APRÈS les autres CSS pour surcharger le layout
   plein écran d'origine (conçu uniquement pour desktop 1200px).
   ===================================================================== */

/* ---------- Tablette & mobile (<= 820px) ---------- */
@media screen and (max-width: 820px) {

  /* Réactiver le défilement vertical (le desktop bloque la page en plein écran) */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
  }
  html {
    background-attachment: scroll !important;
    background-position: top center !important;
  }

  /* Barre du haut : logo + accroche */
  .container { min-width: 0 !important; padding: 12px 16px 4px !important; }
  .logo { right: 0 !important; }
  #base-line-container { height: auto !important; clear: both; }
  #base-line { font-size: 24px !important; margin: 12px 0 0 2px !important; line-height: 1.15; }
  #base-line span { display: block; margin: 2px 0 0 0 !important; font-size: 17px; font-weight: normal; }

  /* Conteneur principal : pleine largeur, hauteur automatique */
  #main-container {
    width: 100% !important;
    height: auto !important;
    padding: 14px 12px 40px !important;
  }

  /* Les 3 panneaux flottants -> empilés verticalement, pleine largeur */
  #floating-edito-container,
  #floating-news-container,
  #floating-actions-container {
    position: static !important;
    float: none !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 540px;
    height: auto !important;
    margin: 0 auto 18px !important;
    display: block !important;   /* force l'affichage même sans le JS desktop */
  }
  #floating-edito-container { padding: 20px !important; }
  #floating-edito-container .body { margin-top: 14px !important; }
  #floating-edito-container p { line-height: 20px; }

  /* Grille des années : tuiles empilées, pleine largeur */
  .floating-news,
  .floating-news:first-child {
    float: none !important;
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    margin: 0 0 12px 0 !important;
    top: 0 !important;
  }
  .floating-news .title,
  .floating-news:first-child .title {
    position: absolute !important;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
  .play {
    left: calc(50% - 20px) !important;
    top: 44px !important;
  }

  /* Boutons ronds "actions" : centrés */
  #floating-actions-container { right: 0 !important; }
  .floating-action {
    float: none !important;
    margin: 0 auto 16px !important;
  }
  #action1, #action2 { top: 0 !important; }
  .floating-action .title {
    float: none !important;
    left: 0 !important;
    width: 100% !important;
  }

  /* Pied de page vide -> masqué (évite la barre noire fixe sur mobile) */
  #footer { display: none !important; }
}

/* ---------- Petit mobile (<= 480px) : ajustements fins ---------- */
@media screen and (max-width: 480px) {
  #base-line { font-size: 21px !important; }
  #base-line span { font-size: 15px; }
  #floating-edito-container { padding: 16px !important; font-size: 13px !important; }
  .floating-news, .floating-news:first-child { height: 130px !important; }
}