/* Vetossimo — styles propres aux vues.
   Chaque vue possède son fichier dans css/views/ et l'importe ici.
   Les jetons, la base, les composants et la coquille restent dans tokens.css,
   base.css, components.css et layout.css : ne rien y ajouter depuis une vue.

   Note : en CSS, les règles @import doivent précéder toute autre règle. */

/* Vues publiques */
@import url('views/accueil.css');
@import url('views/connexion.css');
@import url('views/inscription.css');
@import url('views/a-propos.css');
@import url('views/legal.css');

/* Espace propriétaire */
@import url('views/mes-animaux.css');
@import url('views/animal.css');
@import url('views/qr.css');
@import url('views/rappels.css');
@import url('views/notifications.css');
@import url('views/compte.css');

/* Espace vétérinaire */
@import url('views/veto-accueil.css');
@import url('views/veto-ouvrir.css');
@import url('views/veto-patients.css');
@import url('views/veto-nouveau.css');

/* Observatoire et administration */
@import url('views/statistiques.css');
@import url('views/admin.css');

/* Classes partagées par plusieurs vues */
@import url('views/divers.css');

/* ───────── Écran de démarrage, avant le premier rendu du routeur ───────── */
.boot {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-6); text-align: center;
}
/* Logo Vetossimo sur sa pastille (ivoire en thème sombre, comme .logo-mark). */
.boot__logo {
  width: 78px; height: auto; box-sizing: content-box; padding: 6px;
  border-radius: var(--r-lg); background: var(--logo-plate);
  animation: boot-breathe 2s ease-in-out infinite;
}
.boot__text { color: var(--text-muted); font-size: var(--text-sm); }
@keyframes boot-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ───────── Transition d'une vue à l'autre ───────── */
.view-loading { padding: var(--sp-4) 0; }
.view { animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }

/* ───────── Socle des graphiques (js/lib/charts.js) ─────────
   Partagé par l'Observatoire et par la courbe de croissance du carnet. */
/* Vetossimo — Observatoire public (js/views/statistiques.js).

   Ce fichier contient deux parties :
   1) le SOCLE DES GRAPHIQUES — les classes émises par js/lib/charts.js (figure, chart-*, gauge,
      chart-tip). Elles ne sont définies ni dans components.css ni ailleurs, et servent à toutes
      les vues qui utilisent la bibliothèque (observatoire, courbe de croissance d'un animal) ;
   2) les classes propres à la vue, préfixées .view-statistiques__.

   Règle d'or respectée : l'or de marque n'est jamais une couleur de texte sur fond clair.
   Les étiquettes « or » utilisent --text-accent (bronze), les filets --gold-ui. */

/* ───────────────────────── 1. Socle des graphiques ───────────────────────── */

.figure {
  margin: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}


.figure + .figure { margin-top: var(--sp-4); }


.figure__caption { margin-bottom: var(--sp-4); }


.figure__title { font-size: var(--text-lg); }


.figure__subtitle { margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--text-muted); max-width: 78ch; }


.figure__chart { min-width: 0; }


.figure__masked {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--text-muted);
}


/* Filet et icône dorés : signe non textuel, --gold-ui est prévu pour cet usage (3,88:1). */
.figure__masked .icon { flex: none; color: var(--gold-ui); margin-top: 2px; }


.figure__note { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--text-muted); max-width: 78ch; }


.figure__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}


.figure__source { font-size: var(--text-xs); color: var(--text-faint); max-width: 70ch; }


.figure__toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  min-height: var(--tap); padding: 0 var(--sp-3);
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--primary); font-size: var(--text-sm); font-weight: 600;
}


.figure__toggle:hover { background: var(--surface-sunken); border-color: var(--primary); }
.figure__toggle > .icon { width: var(--icon-md); height: var(--icon-md); }


.figure__table { margin-top: var(--sp-3); }



.chart { width: 100%; height: auto; }


.chart-block { display: flex; flex-direction: column; gap: var(--sp-3); }



/* Étiquettes dans les SVG : on peint le texte avec fill, pas color. */
.chart-axis-label,
.chart-tick,
.chart-value-label,
.chart-legend-label,
.chart-ref-label,
.chart-masked-label,
.gauge__value {
  font-family: var(--font-body);
}


.chart-axis-label { fill: var(--text); font-size: 12px; }


.chart-tick { fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums slashed-zero; }


.chart-value-label { fill: var(--text); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums slashed-zero; }


.chart-legend-label { fill: var(--text-muted); font-size: 12px; font-weight: 650; }


.chart-ref-label { fill: var(--text-accent); font-size: 11px; font-weight: 650; }


.chart-masked-label { fill: var(--text-faint); font-size: 11px; font-style: italic; }



/* Les barres sont focalisables au clavier : l'anneau de focus doit rester visible dans le SVG. */
.chart [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }



.chart-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs); color: var(--text-muted);
}


.chart-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }


.chart-legend__swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--border); flex: none; }


.chart-legend__swatch--rule { width: 4px; height: 16px; border-radius: 2px; background: var(--gold-ui); }


.chart-legend__swatch--band { background: var(--chart-ref); }


.chart-legend__swatch--masked { background: var(--surface-sunken); border: 1px dashed var(--border-strong); }


.chart-legend__ramp {
  width: 96px; height: 10px; border-radius: var(--r-pill); flex: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ramp-color, var(--primary)) 12%, var(--surface)),
    var(--ramp-color, var(--primary)));
  border: 1px solid var(--border);
}



.chart-tip {
  position: fixed; top: 0; left: 0; z-index: 160;
  max-width: 260px; padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  font-size: var(--text-xs); pointer-events: none;
}


.chart-tip[hidden] { display: none; }


.chart-tip__title { font-weight: 650; }


.chart-tip__line { color: var(--text-muted); font-variant-numeric: tabular-nums slashed-zero; }



.gauge { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }


.gauge__value { fill: var(--text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums slashed-zero; }


.gauge__label { font-size: var(--text-sm); color: var(--text-muted); text-align: center; }


  .figure { padding: var(--sp-5); }