/**
 * USINE - Responsive
 * Ajustements pour les differentes tailles d'ecran.
 * Approche mobile-first : les styles de base ciblent le mobile,
 * les media queries ajoutent les styles tablette/desktop.
 */

/* === Tablette (>= 600px) === */
@media (min-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
  }

  .poi-list {
    gap: var(--space-md);
  }

  .quiz-question {
    padding: var(--space-xl);
  }

  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-event {
    width: 50%;
    padding-left: 0;
  }

  /* Alterner les evenements gauche/droite */
  .timeline-event:nth-child(odd) {
    padding-right: var(--space-xl);
    text-align: right;
  }

  .timeline-event:nth-child(even) {
    margin-left: 50%;
    padding-left: var(--space-xl);
  }

  .timeline-event:nth-child(odd) .timeline-event__dot {
    left: auto;
    right: -9px;
  }

  .timeline-event:nth-child(even) .timeline-event__dot {
    left: -9px;
  }

  .timeline__filters {
    justify-content: center;
    padding-left: 0;
  }

  .chatbot-panel {
    top: auto;
    left: auto;
    right: var(--space-md);
    bottom: calc(var(--nav-height) + var(--safe-area-bottom) + var(--space-md));
    width: 380px;
    height: 560px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }

  .chatbot-panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  body.has-mini-player .chatbot-panel {
    bottom: calc(var(--nav-height) + var(--mini-player-height) + var(--safe-area-bottom) + var(--space-md));
  }
}

/* === Desktop : cadre "telephone" centre (>= 768px) === */
@media (min-width: 768px) {
  /* Fond sombre autour du cadre, teinté de la couleur primaire du monument */
  body {
    background: #0f0f14;
    background-image: radial-gradient(
      ellipse at 50% 0%,
      color-mix(in srgb, var(--color-primary) 20%, transparent) 0%,
      transparent 55%
    );
  }

  /* Coque telephone : conteneur fixe centre */
  #app-shell {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, 100vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 24px 80px rgba(0, 0, 0, 0.55);
  }

  /* Contenu principal : zone defilante dans la coque */
  .app-content {
    flex: 1;
    min-height: 0; /* fix flexbox shrink */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: none;
    padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom));
  }

  body.has-mini-player .app-content {
    padding-bottom: calc(var(--nav-height) + var(--mini-player-height) + var(--safe-area-bottom));
  }

  /* Re-ancrer dans la coque tous les elements normalement fixes a la viewport */
  .offline-banner,
  .mini-player,
  .app-nav,
  .app-drawer,
  .drawer-overlay,
  .chatbot-bubble,
  .chatbot-panel,
  .lightbox {
    position: absolute;
  }

  /* Navigation basse : retablir le layout mobile */
  .app-nav {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + var(--safe-area-bottom));
    background: var(--color-bg-card);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding-bottom: var(--safe-area-bottom);
  }

  /* Mini-player : au-dessus de la nav */
  .mini-player {
    bottom: calc(var(--nav-height) + var(--safe-area-bottom));
    left: 0;
    right: 0;
    max-width: none;
    transform: none;
    border-radius: 0;
  }

  /* Chatbot panel : plein ecran dans la coque */
  .chatbot-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transform: translateY(100%);
    opacity: 1;
  }

  .chatbot-panel.is-open {
    transform: translateY(0);
    opacity: 1;
  }

  body.has-mini-player .chatbot-panel {
    bottom: 0;
  }

  /* Chatbot bubble : re-ancree en bas a droite dans la coque */
  .chatbot-bubble {
    bottom: calc(var(--nav-height) + var(--safe-area-bottom) + var(--space-md));
    right: var(--space-md);
  }

  body.has-mini-player .chatbot-bubble {
    bottom: calc(var(--nav-height) + var(--mini-player-height) + var(--safe-area-bottom) + var(--space-md));
  }

  /* Lightbox : plein ecran dans la coque */
  .lightbox {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* === Desktop (>= 900px) : ajustements galerie et lightbox === */
@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .lightbox__nav {
    width: 56px;
    height: 56px;
  }
}

/* === Grand ecran (>= 1200px) === */
@media (min-width: 1200px) {
  :root {
    --content-max-width: 960px;
  }
}

/* === Mode paysage mobile === */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header {
    height: 44px;
  }

  .app-nav {
    height: 48px;
  }

  .audio-player {
    padding: var(--space-md);
  }

  .audio-player__cover {
    aspect-ratio: 16 / 9;
  }

  .audio-player__controls {
    gap: var(--space-md);
  }

  .audio-player__btn--play {
    width: 48px;
    height: 48px;
  }
}

/* === Reduction du mouvement (WCAG 2.3.3 + confort utilisateur) === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Mode sombre (si le systeme le demande) === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121218;
    --color-bg-card: #1e1e2a;
    --color-text: #e8e8ec;
    --color-text-secondary: #a0a0b0;
    --color-text-light: #8888a0;

    /* Inverser les variables de bordures/surfaces pour le fond sombre */
    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-input: rgba(255, 255, 255, 0.18);
    --color-surface-hover: rgba(255, 255, 255, 0.06);
  }

  .app-nav {
    background: #1a1a24;
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  .poi-item:hover {
    background: #24243a;
  }

  /* Chip : bordure visible sur fond sombre */
  .chip {
    border-color: rgba(255, 255, 255, 0.25);
  }
  .chip:hover {
    background: var(--color-surface-hover);
    border-color: rgba(255, 255, 255, 0.4);
  }

  .quiz-option {
    background: #1a1a2e;
  }

  .quiz-option:hover {
    background: rgba(196, 163, 90, 0.1);
  }

  .chatbot-input {
    background: #1a1a24;
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  .chatbot-input__field {
    background: #121218;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
  }

  /* RGAA 1.4.3 : le fond des info-alerts reste clair (--color-bg override via JS theme)
     → forcer le texte en sombre pour garantir le contraste (#1a1a2e sur ~#ecdec0 ≈ 15:1) */
  .info-alert--info,
  .info-alert--warning {
    color: #1a1a2e;
  }

  /* WCAG 1.4.3 : en dark mode fond carte #1e1e2a → or clair #c4a35a = 6.8:1 ✅
     (en mode clair, .info-block__icon utilise #7a6120 = 5.9:1 sur blanc) */
  .info-block__icon {
    color: var(--color-secondary);
  }
}