/* ============================================================
   Composants HTML/CSS légers, sans dépendance JS externe.
   S'appuie sur les couleurs générées dans theme.css (variables
   --md-sys-color-*) pour rester cohérent avec les 4 thèmes.
   ============================================================ */

/* Indique au navigateur le mode clair/sombre du thème actif, pour que
   les composants natifs (select, checkbox, sélecteur de date...) se
   rendent correctement même là où notre CSS ne peut pas tout styler
   (ex. le popup déroulant d'un <select> reste souvent géré par l'OS). */
[data-theme="clair"], [data-theme="clair-contraste"] { color-scheme: light; }
[data-theme="sombre"], [data-theme="sombre-contraste"] { color-scheme: dark; }

* { box-sizing: border-box; }

/* La taille de police globale (html { font-size }) est désormais gérée
   dynamiquement en JS sur chaque page (3 tailles au choix, "moyenne"
   par défaut) -- voir le bouton à gauche du sélecteur de thème. */
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  transition: background 0.2s, color 0.2s;
}

/* ---------- Boutons ---------- */

.bouton {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter 0.15s, background 0.15s;
}
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

.bouton-plein {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.bouton-plein:hover:not(:disabled) { filter: brightness(0.93); }

.bouton-contour {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}
.bouton-contour:hover:not(:disabled) { background: var(--md-sys-color-surface-variant); }

.bouton-texte {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 8px 12px;
}
.bouton-texte:hover:not(:disabled) { background: var(--md-sys-color-surface-variant); }

.bouton-icone {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bouton-icone:hover { background: var(--md-sys-color-surface-variant); }

/* ---------- Champs (texte, date, heure, select) ---------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--md-sys-color-on-surface-variant);
}
.champ input,
.champ select,
.champ textarea,
.champ-libre {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.champ-libre:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
}

/* Remarque : color-scheme (déclaré plus haut) suffit à rendre l'icône
   du sélecteur de date/heure claire sur fond sombre -- inutile (et
   contre-productif) d'y ajouter un filtre d'inversion en plus. */
.champ-case {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface);
  cursor: pointer;
  user-select: none;
  width: fit-content;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.champ-case input[type="checkbox"],
.champ-case input[type="radio"] {
  /* Case native cachée -- l'apparence du bouton est portée par le label */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.champ-case:has(input:checked) {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

/* ---------- Listes (navigation) ---------- */

.liste { display: flex; flex-direction: column; padding: 8px 0; margin: 0; }
.liste-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface);
  width: 100%;
}
.liste-item:hover { background: var(--md-sys-color-surface-variant); }
.liste-item.actif {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 600;
}

/* ---------- Divers ---------- */

.diviseur { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 12px 0; }

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--md-sys-color-outline-variant);
  border-top-color: var(--md-sys-color-primary);
  animation: tourner 0.8s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

.badge {
  display: inline-block;
  font-size: 0.75rem;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 2px 10px;
  border-radius: 999px;
}

/* ---------- Modale légère ---------- */
.modal-fond {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-carte {
  background: var(--md-sys-color-surface);
  border-radius: 18px;
  padding: 24px;
  width: min(92vw, 460px);
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-carte h3 { margin: 0 0 4px 0; }