/* =========================================================================
   Suite QVCT — résiduel spécifique à cette démo, non couvert par le kit de
   style (docs/Kit_Style_QVCT/, copié ici en theme.css/theme.js et lié en
   premier dans index.html). Ne contient plus aucune couleur, ombre, rayon
   ou composant déjà fourni par le kit — uniquement la fleur à six pétales
   (SVG propre à cette démo) et quelques classes de mise en page pures.
   ========================================================================= */

/* =========================== Fleur QVCT (six pétales) =========================== */

/* align-items: stretch : les deux colonnes (fleur / constats) prennent la
   même hauteur, calée sur la plus grande des deux. */
.central-zone { align-items: stretch; margin-bottom: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 980px) { .central-zone { grid-template-columns: 1fr; } }

.flower-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.flower-card .card-flag { width: 100%; text-align: left; margin-bottom: 8px; }
/* Le sélecteur d'année vient juste après l'en-tête : pas d'espace vertical
   propre à lui, sinon il s'ajoute à celui de la fleur juste en dessous. */
.flower-card > .chips { margin-bottom: 0; }
.flower-wrap { width: 100%; margin: 0 auto; }
.flower-card > p.text-fine { margin-top: 2px; }
.flower-wrap svg { width: 100%; height: auto; display: block; }
.flower-ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.flower-scale { font-size: 11px; fill: var(--text-tertiary); font-family: var(--font-body); }
.flower-petal { cursor: pointer; transition: filter 0.15s ease, fill-opacity 0.15s ease, opacity 0.18s ease; }
.flower-petal:hover, .flower-petal:focus-visible { filter: brightness(1.08) saturate(1.12); fill-opacity: 1 !important; }
/* Même effet que l'anneau du kit (theme.css §info-bulle et survol) : les autres pétales s'estompent */
.flower:has(.flower-petal:hover) .flower-petal:not(:hover) { opacity: 0.5; }
.flower-petal:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }
.flower-petal.is-unavailable { cursor: pointer; }
.flower-value-bg { fill: var(--surface-raised); filter: drop-shadow(0 1px 2px rgba(22,35,47,0.18)); }
.flower-value { font-size: 14px; font-weight: 700; fill: var(--text-primary); font-family: var(--font-body); }
.flower-label { font-size: 12.5px; font-weight: 500; fill: var(--text-secondary); font-family: var(--font-body); }
.flower-center { fill: var(--surface-raised); stroke: var(--hairline); stroke-width: 1; }
.flower-center-year { font-size: 15px; font-weight: 700; fill: var(--text-primary); font-family: var(--font-body); }
/* La fleur suit la largeur de sa carte, et le texte du SVG suit l'échelle du
   viewBox — à 375 px les libellés tombaient à 7 px. Masqués sous ~560 px ;
   seuls les scores restent dans les pétales, agrandis d'autant. */
@media (max-width: 560px) {
  .flower-label, .flower-scale { display: none; }
  .flower-wrap { overflow: hidden; margin: -18px auto -14px; }
  .flower-wrap svg { transform: scale(1.5); }
  .flower-value { font-size: 13.5px; }
  .flower-center-year { font-size: 15px; }
}

/* =========================== Évolution par année =========================== */

.trend-card { margin-bottom: 30px; }
.trend-chart-wrap { width: 100%; margin-top: 14px; }
.trend-chart-wrap svg { width: 100%; height: auto; display: block; }
.trend-legend { justify-content: flex-start; margin: 10px 0 0; }

/* Quand la colonne est étirée pour égaler la hauteur de la fleur, l'espace
   libre se répartit dans les écarts entre les cartes plutôt que de
   s'accumuler après la dernière. */
.insights-col { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }

/* =========================== Échéances compactes =========================== */

.deadlines-card { max-width: none; margin-top: 30px; }
.deadline-row-list { display: flex; flex-direction: column; margin-top: 4px; }

/* =========================== Formulaire de mesure =========================== */

.form-card { margin-top: 4px; }

/* =========================== Divers =========================== */

.local-tag { color: var(--text-accent); }
.quote-card .source { font-size: 0.76rem; color: var(--text-tertiary); }