/* ============================================
   BASE.CSS – Variables, reset, structure, navigation
   ============================================ */

/* --- Variables de couleur (mode clair par défaut) --- */
:root {
  --vert:        #1a1a1a;
  --vert-clair:  #f0f0f0;
  --vert-texte:  #ffffff;
  --vert-moyen:  #444444;

  --accent:      #CC5533;   /* Couleur d'accentuation — modifiable chaque année */

  --texte:       #1a1a1a;
  --texte-sec:   #666666;
  --texte-ter:   #999999;

  --surface:     #ffffff;
  --fond:        #f7f4f0;   /* Fond légèrement chaud */
  --bordure:     rgba(0,0,0,0.08);
  --bordure-med: rgba(0,0,0,0.14);

  --rayon:       16px;
  --rayon-sm:    10px;
  --rayon-pill:  20px;

  --ombre:       0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.07);
  --ombre-sm:    0 1px 3px rgba(0,0,0,0.08);
}

/* Mode sombre automatique (quand aucune préférence manuelle n'est définie) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vert:        #ffffff;
    --vert-clair:  #2a2a2a;
    --vert-texte:  #000000;
    --vert-moyen:  #bbbbbb;

    --accent:      #E07050;

    --texte:       #f0f0f0;
    --texte-sec:   #aaaaaa;
    --texte-ter:   #777777;

    --surface:     #1e1e1e;
    --fond:        #111111;
    --bordure:     rgba(255,255,255,0.08);
    --bordure-med: rgba(255,255,255,0.15);

    --ombre:       0 1px 4px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.35);
    --ombre-sm:    0 1px 3px rgba(0,0,0,0.25);
  }
}

/* Mode sombre forcé manuellement */
html[data-theme="dark"] {
  --vert:        #ffffff;
  --vert-clair:  #2a2a2a;
  --vert-texte:  #000000;
  --vert-moyen:  #bbbbbb;

  --accent:      #E07050;

  --texte:       #f0f0f0;
  --texte-sec:   #aaaaaa;
  --texte-ter:   #777777;

  --surface:     #1e1e1e;
  --fond:        #111111;
  --bordure:     rgba(255,255,255,0.08);
  --bordure-med: rgba(255,255,255,0.15);

  --ombre:       0 1px 4px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.35);
  --ombre-sm:    0 1px 3px rgba(0,0,0,0.25);
}

/* --- Reset de base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100dvh; /* dvh = dynamic viewport height, parfait pour mobile */
}

/* --- Structure principale --- */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--fond);
  position: relative;
}

/* --- En-tête --- */
#header {
  background: #1a1a1a;
  padding: 12px 16px 14px;
  border-radius: 0 0 20px 20px;
  box-shadow: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#header-info { flex: 1; min-width: 0; }
#header-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
#header-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  font-style: italic;
}
#btn-recherche {
  background: rgba(255,255,255,0.1);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: var(--rayon-sm);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(255,255,255,0.7);
  transition: background 0.15s;
}
#btn-recherche:hover { background: rgba(255,255,255,0.2); color: #ffffff; }

/* --- Contenu principal --- */
#contenu {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  position: relative;
}

/* Dégradé en bas : masque le bord des cartes avant la nav flottante */
#contenu::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: linear-gradient(transparent, var(--fond));
  pointer-events: none;
  z-index: 10;
}

/* --- Vues (Programme, Carte, Favoris, Infos) --- */
.vue { display: none; flex: 1; flex-direction: column; overflow: hidden; }
@keyframes apparitionVue {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vue.active {
  display: flex;
  animation: apparitionVue 0.3s ease-out forwards;
}

/* --- Barre de navigation flottante --- */
#nav-bar {
  display: flex;
  background: var(--surface);
  flex-shrink: 0;
  margin: 0 12px calc(12px + env(safe-area-inset-bottom));
  border-radius: 24px;
  box-shadow: none;
  overflow: hidden;
}

/* Renfort de l'ombre en mode sombre */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #nav-bar {
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
    border: 0.5px solid rgba(255,255,255,0.07);
  }
}
html[data-theme="dark"] #nav-bar {
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  border: 0.5px solid rgba(255,255,255,0.07);
}

.btn-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  color: var(--texte-ter);
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 0;
}

/* Pilule de fond derrière l'icône + label de l'item actif */
.btn-nav.actif::before {
  content: '';
  position: absolute;
  inset: 5px 8px;
  background: var(--vert);
  border-radius: 20px;
  z-index: -1;
  opacity: 0.08;
}

.btn-nav.actif {
  color: var(--vert);
  font-weight: 600;
}
.btn-nav svg { position: relative; flex-shrink: 0; }

/* Icônes remplies pour l'onglet actif */
.btn-nav.actif[data-vue="programme"] svg rect,
.btn-nav.actif[data-vue="programme"] svg path { fill: currentColor; stroke: none; }
.btn-nav.actif[data-vue="programme"] svg line { stroke: var(--surface); stroke-width: 2; }

.btn-nav.actif[data-vue="carte"] svg > path { fill: currentColor; stroke: none; }
.btn-nav.actif[data-vue="carte"] svg circle  { fill: var(--surface); stroke: none; }

.btn-nav.actif[data-vue="favoris"] svg path { fill: currentColor; stroke: none; }

.btn-nav.actif[data-vue="infos"] svg circle:first-of-type { fill: currentColor; stroke: none; }
.btn-nav.actif[data-vue="infos"] svg line                { stroke: var(--surface); }
.btn-nav.actif[data-vue="infos"] svg circle:last-of-type  { fill: var(--surface); stroke: none; }

/* Badge numérique sur le bouton de navigation (ex: favoris) */
.btn-nav[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: 5px;
  left: calc(50% + 4px);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  padding: 0 3px;
  pointer-events: none;
}

/* --- Utilitaires --- */
.cache { display: none !important; }

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