/* ==========================
   RESPONSIVE.CSS — Ajustements transverses (chargé en dernier)
   Complète les media queries des composants pour un rendu 100% responsive.
   ========================== */

/* ---- Sécurité médias (en plus du reset) ---- */
img, svg, canvas, video, iframe, table { max-width: 100%; }

/* ---- Conteneur : marges réduites sur petits écrans ---- */
@media (max-width: 600px) {
  :root { --container-pad: 18px; }
}
@media (max-width: 400px) {
  :root { --container-pad: 14px; }
}

/* ---- Header : barre + logo adaptés (barre plus fine sur mobile) ---- */
@media (max-width: 992px) {
  :root { --header-height: 96px; }
  .logo-img { height: 88px; width: 88px; border-radius: 18px; }
  .site-header .site-logo { transform: translateY(18px); }
}
@media (max-width: 768px) {
  :root { --header-height: 78px; }
  .logo-img { height: 64px; width: 64px; border-radius: 16px; }
  .site-header .site-logo { transform: translateY(12px); }
}
@media (max-width: 480px) {
  :root { --header-height: 70px; }
  .logo-img { height: 52px; width: 52px; border-radius: 14px; }
  .site-header .site-logo { transform: translateY(8px); }
  .header-actions { gap: 6px; }
  .header-inner { gap: var(--space-sm); }
}

/* ---- Tableaux horaires : plus compacts sur petits écrans ---- */
/* (sélecteur table.* pour passer devant les règles de base de main.css) */
@media (max-width: 600px) {
  table.daily-schedule-table th,
  table.daily-schedule-table td {
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--font-size-xs);
  }
}
/* Tables d'article larges : défilement horizontal sur petits écrans seulement
   (display:block génère une table anonyme → l'alignement des colonnes est préservé) */
@media (max-width: 768px) {
  .article-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Lecteur : s'adapte aux écrans courts (téléphone en paysage) ---- */
@media (max-height: 680px) {
  .player-modal { max-height: 90vh; overflow-y: auto; }
  .search-overlay { padding-top: 6vh; }
}

/* ---- Mini-player : très petits écrans ---- */
@media (max-width: 380px) {
  .mini-player { padding: 0 var(--space-sm); gap: var(--space-sm); }
  .mini-player-show { font-size: var(--font-size-xs); }
  .mini-vu { display: none; }
}

/* ---- Hero accueil : photo dans le flux et centrée sur mobile ---- */
@media (max-width: 768px) {
  .hero--home .hero-visual {
    min-height: 0;
    padding: 0 var(--container-pad) var(--space-xl);
  }
  .hero--home .hero-visual img.hero-photo {
    position: relative;
    height: auto;
    max-height: 360px;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-lg);
  }
  .hero-circle { display: none; }
}

/* ---- Bannières de section : titre et hauteur adaptés ---- */
@media (max-width: 600px) {
  .scene-banner { min-height: 200px; }
}

/* ---- Hero d'article : padding réduit ---- */
@media (max-width: 600px) {
  .page-hero { padding-left: 0; padding-right: 0; }
  .page-hero .container { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}

/* ---- Articles liés "à la une" : la colonne passe sous le featured ---- */
@media (max-width: 900px) {
  .secondary-articles { height: auto; }
}

/* ---- Boutons hero : pleine largeur sur très petit écran ---- */
@media (max-width: 420px) {
  .hero-actions { width: 100%; }
  .hero-actions .btn--primary,
  .hero-actions .btn--ghost { flex: 1; justify-content: center; }
}

/* ---- Formulaires : confort tactile ---- */
@media (max-width: 600px) {
  .newsletter-form input[type="email"],
  .review-form-card input,
  .review-form-card textarea,
  .contact-form input,
  .contact-form textarea,
  .contact-form select { font-size: 16px; } /* évite le zoom auto iOS */
}

/* ---- Pop-up recherche : marges latérales sur mobile ---- */
@media (max-width: 480px) {
  .search-overlay { padding-left: var(--space-md); padding-right: var(--space-md); }
  .search-form button[type="submit"] span,
  .search-form button[type="submit"] { white-space: nowrap; }
}

/* ---- Page contact : descend le texte du hero pour ne pas chevaucher
       le grand logo du header (qui déborde sous l'en-tête) ---- */
body[data-page="contact"] .page-hero {
  padding-top: 7rem;
}
@media (max-width: 768px) {
  body[data-page="contact"] .page-hero {
    padding-top: 5.5rem;
  }
}