/*
  Styles réorganisés pour lisibilité
  Sections :
  1) Variables
  2) Reset / Base
  3) Layout
  4) Header
  5) Controls & Buttons
  6) Viewer / Card
  7) Utilities
  8) Responsive
*/

/* ----------------------
  1) Variables
   ---------------------- */

:root {
  --bg-1: #f6f8ff;
  --bg-2: #eef2ff;
  --text: #0f1724;
  --muted: #6b7280;
  --accent-1: #6366f1; /* indigo */
  --accent-2: #8b5cf6;
  --card: #ffffff;
}


/* ----------------------
  2) Reset / Base
   ---------------------- */

* { 
  box-sizing: border-box; 
}

html, body { 
  height: 100%; 
  margin: 0; 
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}


/* ----------------------
  3) Layout
   ---------------------- */

.container { 
  max-width: 1600px; 
  margin: 15px auto; 
  padding: 20px; 
}


/* ----------------------
  4) Header
   ---------------------- */

.site-header { 
  padding: 8px 0; 
  text-align: center; 
}

.app-title { 
  margin: 0; 
  font-weight: 600; 
  font-size: 2.2rem; 
}


/* ----------------------
  5) Controls & Buttons
   ---------------------- */

.controls { 
  display: flex; 
  gap: 12px; 
  align-items: center; 
  flex-wrap: wrap; 
  margin-bottom: 18px; }

.select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e6e9f2;
  background: var(--card);
  font-size: 1rem;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}

.select:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.3);
}

.select option {
  padding: 8px;
}

.btn {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #fff;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(99,102,241,0.14);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 12px 30px rgba(99,102,241,0.2); 
}


/* ----------------------
  6) Viewer / Card
   ---------------------- */

.card { 
  background: var(--card); 
  border-radius: 14px; 
  padding: 12px; 
  box-shadow: 0 6px 30px rgba(15,23,42,0.06); 
}

.viewer { 
  overflow: hidden;
}

.viewer iframe { 
  max-width: 1600px; 
  height: auto; 
  aspect-ratio: 16 / 9;
  border-radius: 8px; 
  border: 0; 
  display: block; 
}


/* ----------------------
  7) Utilities
   ---------------------- */

.sr-only { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  white-space: nowrap; 
  border: 0; 
}


/* ----------------------
  8) Responsive
   ---------------------- */

@media (max-width: 600px) {
  .controls { 
    flex-direction: column; 
    align-items: stretch; 
  }

  .viewer iframe { 
    height: auto; 
    aspect-ratio: 16 / 9;
  }

  .app-title { 
    font-size: 1.6rem; 
  }
} 

/* Notes:
  - Anciennes règles dupliquées et styles obsolètes supprimés.
  - Garder ce fichier organisé en sections facilite la maintenance.
*/