/* theme.css — Couleur du type, valeurs dynamiques des gabarits, accessibilité */

/* =============================================
   COULEUR DU TYPE ET VALEURS DYNAMIQUES
   =============================================
   Les gabarits ne portent plus de style : la couleur vient de --type-color
   (conteneur [data-type], voir js/core/theme.js), les valeurs calculées
   (hauteur de barre, position…) de variables posées dans l'attribut style. */
.type-text { color: var(--type-color); }
.type-fill { background: var(--type-color); }

.section-stats-banner { border-bottom: 3px solid color-mix(in srgb, var(--type-color) 13%, transparent); }
.ssb-title, .ssb-stat-value, .sheet-card-count { color: var(--type-color); }
.sheet-card-bar, .selector-item-bar, .add-outing-btn { background: var(--type-color); }
.detail-hero-badge {
  background: color-mix(in srgb, var(--type-color) 13%, transparent);
  color: var(--type-color);
  border: 1px solid color-mix(in srgb, var(--type-color) 27%, transparent);
}
.detail-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.detail-hero-main { flex: 1; min-width: 0; }
.detail-count-badge, .voie-group-count {
  background: color-mix(in srgb, var(--type-color) 9%, transparent);
  color: var(--type-color);
}
.detail-count-badge { font-size: .7rem; padding: 2px 8px; border-radius: 10px; font-weight: 700; }
#modal .form-section-title { color: var(--type-color, var(--color-muted)); }
.form-danger-zone { margin-top: 16px; }

.outing-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.outing-card-meteo { font-size: .95rem; }
.empty-state { text-align: center; color: var(--color-light); font-size: .88rem; padding: 20px 0; }
.empty-state--large { padding: 30px; }
.skeleton-card--inset { margin: 0 12px 12px; }
.detail-error { padding: 20px; color: var(--color-danger); }

/* Ordre mobile des blocs (fiche, formulaires) */
.detail-block, .form-section { order: var(--order, 0); }

/* Bassin versant */
.bv { border-radius: 10px; font-weight: 700; }
.bv-petit { background: var(--green-100); color: var(--green-700); }
.bv-moyen { background: var(--amber-100); color: var(--amber-700); }
.bv-grand { background: var(--orange-100); color: var(--orange-700); }
.bv-tres-grand { background: var(--red-100); color: var(--red-600); }
.bv-inline { padding: 1px 7px; font-size: .72rem; margin-left: 4px; }

/* Graphiques et jauges : valeurs calculées */
.st-dot, .st-legend i, .st-split-legend i, .st-legend-line { background: var(--c, var(--color-muted)); }
.st-seg, .st-split-seg { flex: var(--flex, 1); background: var(--c, var(--color-muted)); }
.st-grid-line { bottom: var(--y, 0); }
.st-col-stack, .st-comp-year-bar > div, .bl-month-bar > div { height: var(--h, 0); }
.st-hbar-fill { width: calc((100% - 34px) * var(--w, 0)); }
.st-svg-line { stroke: var(--c, var(--color-muted)); }
.st-svg-dot { fill: var(--c, var(--color-muted)); }
.og-fill { width: var(--w, 0); }
.og-mark { left: var(--x, 0); }
.map-popup-type { color: var(--c, var(--color-muted)); }
.cond-gauge-range { left: var(--from, 0); width: var(--width, 0); }
.cond-gauge-dot, .cond-gauge-now { left: var(--at, 0); }

/* Service indisponible (bloc commun, js/core/errors.js) */
.unavailable { font-size: .82rem; color: var(--color-muted); }
.unavailable-retry {
  background: none; border: none; color: var(--color-primary); font-weight: 600;
  text-decoration: underline; cursor: pointer; font-size: .78rem; margin-left: 4px;
}

/* Journal des incidents (panneau Drive) */
.error-log summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.error-log-list { list-style: none; margin: 8px 0; max-height: 220px; overflow: auto; font-size: .74rem; }
.error-log-list li { padding: 4px 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.error-log-error strong { color: var(--color-danger); }
.error-log-warn strong { color: var(--color-warning); }
.error-log-at { display: block; color: var(--color-light); }

/* =============================================
   ACCESSIBILITÉ
   ============================================= */
/* Focus visible au clavier sur tout élément interactif */
:where(button, a, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* Coordonnées GPS : bouton présenté comme un lien */
button.gps-coords { background: none; border: none; padding: 0; cursor: pointer; text-align: right; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}