/* demo.css : la démo manipulable de veille réglementaire (#demo-veille), v4 du 14/10/2026.
   Famille de référence : outil SaaS sobre (filets fins, ombres légères, une seule couleur pour agir).
   Aucune couleur, aucun rayon, aucune durée en dur : tout vient des variables de style.css (:root),
   les quelques valeurs propres à la démo sont posées ci-dessous dans .veille.
   Mobile d'abord : en colonne, sans défilement imbriqué. À partir de 768 px : fenêtre d'outil à hauteur fixe,
   panneau de filtres à gauche, fiche en panneau à droite, défilement interne. */

.veille {
  --v-hauteur: min(820px, 88vh);
  --v-filtres-l: 264px;
  --v-fiche-l: min(580px, 58%);
  --v-cible: 44px;
  --v-t: .9375rem;
  --v-t-petit: .875rem;
  --v-propose: var(--violet-teinte);
  --v-propose-bord: var(--violet);
  --v-niv-0: var(--surface);
  --v-niv-1: color-mix(in srgb, var(--principale) 12%, var(--fond));
  --v-niv-2: color-mix(in srgb, var(--principale) 28%, var(--fond));
  --v-niv-3: color-mix(in srgb, var(--principale) 55%, var(--fond));
  --v-niv-4: var(--principale);
  --v-mouvement: var(--duree-apparition);
  font-family: var(--sans);
  font-size: var(--v-t);
  line-height: 1.45;
  color: var(--encre);
}
.veille p { max-width: none; margin: 0; }
.veille h3, .veille h4 { font-family: var(--sans); letter-spacing: 0; }
.veille button { font: inherit; color: inherit; }
.veille svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.veille [hidden] { display: none !important; }

/* Sans JavaScript : un mot dans le conteneur (le script le remplace) */
html:not(.js) .veille::before {
  content: "La démonstration interactive demande JavaScript. Activez-le pour manipuler l’outil de veille.";
  display: block; padding: var(--e-6); border: 1px solid var(--filet); border-radius: var(--r-4); background: var(--surface); color: var(--encre-2);
}

/* ---------- Squelette d'attente ---------- */
.v-squelette { border: 1px solid var(--filet); border-radius: var(--r-4); overflow: hidden; background: var(--fond); box-shadow: var(--ombre-2); }
.v-sq-barre { height: 56px; border-bottom: 1px solid var(--filet); background: var(--surface); }
.v-sq-corps { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 520px; }
.v-sq-cote { display: none; }
.v-sq-principal { padding: var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
.v-sq-principal > i, .v-sq-kpis i { display: block; height: 72px; border-radius: var(--r-2); background: var(--surface); }
.v-sq-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-3); }
.v-sq-kpis i { height: 64px; }
.v-chargement { padding: var(--e-6); border: 1px solid var(--filet); border-radius: var(--r-4); color: var(--encre-2); display: grid; gap: var(--e-4); justify-items: start; }

/* ---------- Fenêtre d'outil ---------- */
.v-app {
  position: relative; background: var(--fond); border: 1px solid var(--filet); border-radius: var(--r-3);
  box-shadow: var(--ombre-2); overflow: clip;
}
.v-app::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--degrade); z-index: 1; }

/* Barre de titre */
.v-barre {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque actions" "recherche recherche";
  gap: var(--e-3); align-items: center; padding: var(--e-4) var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--filet); background: var(--fond);
}
.v-marque { grid-area: marque; display: flex; align-items: center; gap: var(--e-2); min-width: 0; flex-wrap: wrap; }
.v-logo { width: 22px; height: 22px; border-radius: var(--r-1); background: var(--principale); position: relative; flex: none; }
.v-logo::after { content: ""; position: absolute; inset: 6px; border: 2px solid var(--principale-ink); border-top: 0; border-radius: 0 0 var(--r-1) var(--r-1); }
.v-nom { font-weight: 600; font-size: 1rem; white-space: nowrap; }
.v-fictif {
  font-size: var(--v-t-petit); font-weight: 500; color: var(--orange-texte); background: var(--orange-teinte);
  border-radius: var(--r-pastille); padding: 2px var(--e-2); white-space: nowrap;
}
.v-recherche { grid-area: recherche; position: relative; display: flex; align-items: center; }
.v-recherche svg { position: absolute; left: var(--e-3); color: var(--encre-3); pointer-events: none; }
.v-recherche input {
  width: 100%; min-height: var(--v-cible); padding: 0 var(--e-3) 0 40px; font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2);
  transition: border-color var(--duree-survol), background-color var(--duree-survol);
}
.v-recherche input::placeholder { color: var(--encre-3); }
.v-recherche input:focus { outline: none; border-color: var(--principale); background: var(--fond); box-shadow: 0 0 0 3px var(--principale-teinte); }
.v-actions { grid-area: actions; display: flex; align-items: center; gap: var(--e-2); }
.v-btn-barre {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--v-cible); min-width: var(--v-cible); justify-content: center;
  padding: 0 var(--e-3); border-radius: var(--r-2); border: 1px solid var(--filet-fort); background: var(--fond);
  font-weight: 600; font-size: var(--v-t-petit); cursor: pointer; transition: border-color var(--duree-survol), background-color var(--duree-survol);
}
.v-btn-barre:hover { border-color: var(--encre-3); }
.v-btn-assistant { color: var(--principale); }
.v-btn-assistant[aria-expanded="true"] { background: var(--principale-teinte); border-color: var(--principale-teinte); }
/* Sur téléphone, les libellés restent lus par les lecteurs d'écran mais ne prennent pas de place */
.v-btn-assistant span, .v-cloche-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-cloche-zone { position: relative; }
.v-cloche { position: relative; }
.v-badge {
  position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pastille);
  background: var(--alerte); color: var(--principale-ink); font-size: var(--v-t-petit); font-weight: 600; line-height: 22px; text-align: center;
}

/* Liste des alertes (la cloche) */
.v-popover {
  position: absolute; right: 0; top: calc(100% + var(--e-2)); z-index: 5; width: min(360px, calc(100vw - 32px));
  background: var(--fond); border: 1px solid var(--filet); border-radius: var(--r-3); box-shadow: var(--ombre-3); padding: var(--e-4);
}
.v-pop-titre { font-weight: 600; margin-bottom: var(--e-3) !important; }
.v-alertes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.v-alertes-liste li { display: flex; gap: var(--e-3); align-items: center; justify-content: space-between; padding: var(--e-3); border: 1px solid var(--filet); border-radius: var(--r-2); }
.v-alerte-nom { font-weight: 600; }
.v-alerte-meta { color: var(--encre-3); font-size: var(--v-t-petit); }
.v-pop-mention { margin-top: var(--e-3) !important; color: var(--encre-3); font-size: var(--v-t-petit); }

/* Boutons icônes et liens */
.v-icone {
  display: inline-grid; place-items: center; width: var(--v-cible); height: var(--v-cible); flex: none;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--encre-2); cursor: pointer; transition: background-color var(--duree-survol);
}
.v-icone:hover { background: var(--surface-2); color: var(--encre); }
.v-lien {
  border: 0; background: none; padding: 0 var(--e-1); min-height: var(--v-cible); cursor: pointer; color: var(--principale) !important;
  font-weight: 600; font-size: var(--v-t-petit); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--duree-survol);
}
.v-lien:hover { text-decoration-color: currentColor; }
.veille .btn { gap: var(--e-2); }
.veille .btn:disabled { opacity: .55; cursor: default; }

/* ---------- Corps ---------- */
.v-corps { position: relative; }
.v-principal { padding: var(--e-4); display: grid; gap: var(--e-4); align-content: start; min-width: 0; }

/* Panneau de filtres : tiroir plein écran sur téléphone */
.v-filtres { display: none; }
.v-filtres.ouvert {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: var(--z-modal); background: var(--fond);
  animation: v-monte var(--v-mouvement) var(--courbe);
}
@keyframes v-monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.v-filtres-tete { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-bottom: 1px solid var(--filet); }
.v-filtres-tete h3 { font-size: 1.0625rem; font-weight: 600; margin-right: auto; }
.v-filtres-tete .v-lien { display: none; }
.v-filtres-corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-2) var(--e-4) var(--e-5); }
.v-filtres-pied { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--filet); background: var(--fond); }
.v-groupe { border: 0; margin: 0; padding: var(--e-4) 0 var(--e-2); border-bottom: 1px solid var(--filet); min-width: 0; }
.v-groupe:last-child { border-bottom: 0; }
.v-groupe legend { padding: 0; font-weight: 600; font-size: var(--v-t-petit); color: var(--encre-2); margin-bottom: var(--e-2); }
.v-options { display: grid; gap: 2px; }
.v-option {
  display: flex; align-items: center; gap: var(--e-3); min-height: var(--v-cible); padding: 0 var(--e-2); border-radius: var(--r-1);
  cursor: pointer; transition: background-color var(--duree-survol);
}
.v-option:hover { background: var(--surface-2); }
.v-option input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--principale); cursor: pointer; }
.v-option-nom { flex: 1; min-width: 0; }
.v-code { color: var(--encre-3); font-size: var(--v-t-petit); }
.v-option-n { color: var(--encre-3); font-size: var(--v-t-petit); font-variant-numeric: tabular-nums; }
.v-option.vide { color: var(--encre-3); }
.v-option.propose { background: var(--v-propose); box-shadow: inset 2px 0 0 var(--v-propose-bord); }

/* ---------- Assistant de filtres ---------- */
.v-assistant { border: 1px solid var(--filet); border-radius: var(--r-3); padding: var(--e-4); background: var(--surface); display: grid; gap: var(--e-3); }
.v-assistant-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) 0 0; }
.v-assistant-tete h3 { display: flex; align-items: center; gap: var(--e-2); font-size: 1rem; font-weight: 600; }
.v-assistant-tete h3 svg { color: var(--principale); }
.v-assistant-intro { color: var(--encre-2); }
.v-assistant-form { display: grid; gap: var(--e-2); }
.v-assistant-form textarea {
  width: 100%; min-height: 64px; resize: vertical; padding: var(--e-3); font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--fond); border: 1px solid var(--filet-fort); border-radius: var(--r-2); transition: border-color var(--duree-survol);
}
.v-assistant-form textarea:focus { outline: none; border-color: var(--principale); box-shadow: 0 0 0 3px var(--principale-teinte); }
.v-exemples { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.v-exemples > span { font-size: var(--v-t-petit); color: var(--encre-3); font-weight: 600; }
.v-exemple {
  text-align: left; min-height: var(--v-cible); padding: var(--e-2) var(--e-3); border: 1px solid var(--filet); border-radius: var(--r-2);
  background: var(--fond); font-size: var(--v-t-petit) !important; color: var(--encre-2) !important; cursor: pointer;
  transition: border-color var(--duree-survol), color var(--duree-survol);
}
.v-exemple:hover { border-color: var(--principale); color: var(--encre) !important; }
.v-prop { border: 1px solid var(--v-propose-bord); border-radius: var(--r-2); background: var(--v-propose); padding: var(--e-4); display: grid; gap: var(--e-3); animation: v-apparait var(--v-mouvement) var(--courbe); }
@keyframes v-apparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v-prop-expl { color: var(--encre); }
.v-prop-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.v-prop-puce {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--v-cible); padding: 0 var(--e-3);
  border: 1px dashed var(--v-propose-bord); border-radius: var(--r-pastille); background: var(--fond); cursor: pointer;
  font-size: var(--v-t-petit) !important; transition: background-color var(--duree-survol), border-color var(--duree-survol);
}
.v-prop-puce svg { width: 16px; height: 16px; color: var(--violet); }
.v-prop-puce:hover { border-style: solid; }
.v-prop-puce.accepte { border-style: solid; border-color: var(--principale); background: var(--principale-teinte); }
.v-prop-puce.accepte svg { color: var(--principale); }
.v-prop-n { font-size: var(--v-t-petit); color: var(--encre-2); }
.v-prop-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.v-source { font-size: var(--v-t-petit); color: var(--encre-3); }
.v-source:empty { display: none; }
.v-source[data-source="assistant"] { color: var(--principale); }
.v-source[data-source="plafond"] { color: var(--orange-texte); }
.v-puce-groupe { color: var(--encre-3); font-weight: 500; }
.v-puce-groupe::after { content: " ·"; }
.v-note { color: var(--encre-2); font-size: var(--v-t-petit); }
.v-attente { color: var(--encre-3); }

/* ---------- Chiffres clés ---------- */
.v-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.v-kpi { border: 1px solid var(--filet); border-radius: var(--r-2); padding: var(--e-3); display: grid; gap: 2px; background: var(--fond); }
.v-kpi-valeur { font-size: 1.5rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.v-kpi-lib { font-size: var(--v-t-petit); color: var(--encre-2); }
.v-kpi.principale .v-kpi-valeur { color: var(--principale); }
.v-kpi.alerte .v-kpi-valeur { color: var(--alerte); }

/* ---------- Outils : vues, filtres, tri, alerte ---------- */
.v-outils { display: grid; gap: var(--e-3); }
.v-onglets { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--filet); overflow-x: auto; scrollbar-width: none; }
.v-onglets [role="tab"] {
  position: relative; flex: 1 0 auto; min-height: var(--v-cible); padding: 0 var(--e-3); border: 0; background: none; cursor: pointer;
  color: var(--encre-2); font-weight: 600; white-space: nowrap; transition: color var(--duree-survol);
}
.v-onglets [role="tab"]::after {
  content: ""; position: absolute; left: var(--e-2); right: var(--e-2); bottom: -1px; height: 2px; border-radius: var(--r-pastille); background: var(--principale);
  transform: scaleX(0); transition: transform var(--duree-survol) var(--courbe);
}
.v-onglets [role="tab"]:hover { color: var(--encre); }
.v-onglets [role="tab"][aria-selected="true"] { color: var(--encre); }
.v-onglets [role="tab"][aria-selected="true"]::after { transform: none; }
.v-nb { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: var(--r-pastille); background: var(--surface-2); color: var(--encre-2); font-size: var(--v-t-petit); text-align: center; }
.v-outils-droite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); align-items: center; }
.v-btn-filtres {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--v-cible); padding: 0 var(--e-4);
  border: 1px solid var(--filet-fort); border-radius: var(--r-2); background: var(--fond); font-weight: 600; cursor: pointer;
}
.v-tri { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--encre-2); font-size: var(--v-t-petit); }
.v-tri select {
  min-height: var(--v-cible); padding: 0 var(--e-3); font: inherit; font-size: var(--v-t); color: var(--encre); background: var(--fond);
  border: 1px solid var(--filet-fort); border-radius: var(--r-2); cursor: pointer;
}
.v-btn-alerte { width: 100%; grid-column: 1 / -1; }
.v-tri select { flex: 1; min-width: 0; }
.v-tri { min-width: 0; }
.v-actifs { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.v-compte { font-weight: 600; margin-right: var(--e-2) !important; font-variant-numeric: tabular-nums; }
.v-puces { list-style: none; margin: 0; padding: 0; display: contents; }
.v-puce {
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--v-cible); padding: 0 var(--e-2) 0 var(--e-3);
  border: 1px solid var(--filet); border-radius: var(--r-pastille); background: var(--surface); cursor: pointer; font-size: var(--v-t-petit) !important;
  transition: border-color var(--duree-survol);
}
.v-puce svg { width: 16px; height: 16px; color: var(--encre-3); }
.v-puce:hover { border-color: var(--encre-3); }

/* ---------- Pastilles ---------- */
.v-pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--e-2); border-radius: var(--r-pastille);
  font-size: var(--v-t-petit); font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--encre-2);
}
.v-pastille.ouverte { background: var(--principale-teinte); color: var(--principale); }
.v-point { width: 7px; height: 7px; border-radius: var(--r-pastille); background: currentColor; }
.v-pastille.impact.eleve { background: var(--alerte-teinte); color: var(--alerte); }
.v-pastille.impact.moyen { background: var(--orange-teinte); color: var(--orange-texte); }
.v-pastille.impact.faible { background: var(--surface); color: var(--encre-3); }
.v-jur {
  display: inline-grid; place-items: center; min-width: 32px; padding: 1px 6px; border-radius: var(--r-1);
  border: 1px solid var(--filet-fort); font-size: var(--v-t-petit); font-weight: 600; color: var(--encre); background: var(--fond);
}

/* ---------- Vue liste ---------- */
.v-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.v-ligne {
  width: 100%; text-align: left; display: grid; gap: var(--e-2); padding: var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-2);
  background: var(--fond); cursor: pointer; transition: border-color var(--duree-survol), background-color var(--duree-survol);
}
.v-ligne:hover { border-color: var(--filet-fort); background: var(--surface); }
.v-ligne.active { border-color: var(--principale); box-shadow: inset 3px 0 0 var(--principale); }
.v-ligne-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); color: var(--encre-3); font-size: var(--v-t-petit); }
.v-inst { color: var(--encre-2); font-weight: 500; }
.v-type::before { content: "·"; margin-right: var(--e-2); }
.v-suivi-marque { margin-left: auto; color: var(--principale); display: inline-flex; }
.v-suivi-marque svg { fill: currentColor; width: 16px; height: 16px; }
.v-ligne-titre { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.v-ligne-resume { color: var(--encre-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-ligne-pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.v-echeance { font-size: var(--v-t-petit); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.v-echeance.proche { color: var(--alerte); font-weight: 600; }
.v-rel { color: var(--encre-3); font-weight: 400; }
.v-plus { width: 100%; margin-top: var(--e-3); }
.v-vide { padding: var(--e-6) var(--e-4); text-align: center; border: 1px dashed var(--filet-fort); border-radius: var(--r-3); display: grid; gap: var(--e-2); justify-items: center; }
.v-vue:focus { outline: none; }
.v-avertissement { font-size: var(--v-t-petit); color: var(--encre-3); }

/* ---------- Vue carte (tuiles) ---------- */
.v-carte { display: grid; gap: var(--e-5); }
.v-carte-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.v-carte-titre { font-size: var(--v-t-petit); font-weight: 600; color: var(--encre-3); margin-bottom: var(--e-2) !important; }
.v-grille-tuiles { display: grid; gap: 6px; grid-auto-rows: 64px; }
.v-grille-tuiles.am { grid-template-columns: 64px; }
.v-grille-tuiles.eu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-tuile {
  position: relative; display: grid; align-content: space-between; padding: 6px var(--e-2); text-align: left; min-width: 0;
  border: 1px solid var(--filet); border-radius: var(--r-2); cursor: pointer; background: var(--v-niv-0); color: var(--encre);
  transition: border-color var(--duree-survol), transform var(--duree-survol) var(--courbe);
}
.v-tuile:hover { border-color: var(--encre-3); transform: translateY(-1px); }
.v-tuile.n1 { background: var(--v-niv-1); }
.v-tuile.n2 { background: var(--v-niv-2); }
.v-tuile.n3 { background: var(--v-niv-3); color: var(--principale-ink); }
.v-tuile.n4 { background: var(--v-niv-4); color: var(--principale-ink); }
.v-tuile.ue { border-style: dashed; border-color: var(--filet-fort); }
.v-tuile.choisie { border: 2px solid var(--encre); box-shadow: 0 0 0 2px var(--fond) inset; }
.v-tuile-code { font-weight: 600; font-size: 1rem; line-height: 1; }
.v-tuile-nom { display: none; font-size: var(--v-t-petit); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tuile-n { font-size: var(--v-t-petit); font-weight: 600; font-variant-numeric: tabular-nums; justify-self: end; }
.v-legende { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-2); font-size: var(--v-t-petit); color: var(--encre-3); }
.v-echelle { display: inline-flex; gap: 2px; }
.v-echelle i { width: 22px; height: 10px; border-radius: var(--r-pastille); }
.v-echelle .n1 { background: var(--v-niv-1); } .v-echelle .n2 { background: var(--v-niv-2); } .v-echelle .n3 { background: var(--v-niv-3); } .v-echelle .n4 { background: var(--v-niv-4); }
.v-aide { grid-column: 1 / -1; font-size: var(--v-t-petit); color: var(--encre-3); }
.v-classement ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v-barre-jur {
  width: 100%; display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2.5em; gap: var(--e-3); align-items: center;
  min-height: var(--v-cible); padding: 0 var(--e-2); border: 0; border-radius: var(--r-1); background: none; cursor: pointer; text-align: left;
  transition: background-color var(--duree-survol);
}
.v-barre-jur:hover { background: var(--surface); }
.v-barre-jur.choisie { background: var(--principale-teinte); }
.v-barre-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-barre-piste { height: 8px; border-radius: var(--r-pastille); background: var(--surface-2); overflow: hidden; }
.v-barre-piste span { display: block; height: 100%; background: var(--principale); border-radius: inherit; }
.v-barre-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Vue échéancier ---------- */
.v-frise { display: none; }
.v-mois-liste { display: grid; gap: var(--e-5); }
.v-mois h4 { display: flex; align-items: baseline; gap: var(--e-2); font-size: 1rem; font-weight: 600; text-transform: capitalize; padding-bottom: var(--e-2); border-bottom: 1px solid var(--filet); margin-bottom: var(--e-2); }
.v-mois h4 span { text-transform: none; font-weight: 400; font-size: var(--v-t-petit); color: var(--encre-3); }
.v-mois ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v-ech {
  width: 100%; display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--e-3); text-align: left; align-items: start;
  padding: var(--e-3) var(--e-2); border: 0; border-radius: var(--r-2); background: none; cursor: pointer; transition: background-color var(--duree-survol);
}
.v-ech:hover { background: var(--surface); }
.v-ech-date { color: var(--encre-3); font-size: var(--v-t-petit); line-height: 1.2; }
.v-ech-date strong { display: block; font-size: 1.25rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.v-ech-texte { display: grid; gap: 6px; min-width: 0; }
.v-ech-titre { font-weight: 600; line-height: 1.35; }
.v-ech-meta { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; font-size: var(--v-t-petit); }

/* ---------- Fiche d'un texte : feuille plein écran sur téléphone ---------- */
.v-fiche {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--fond); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(16px); transition: opacity var(--v-mouvement) var(--courbe), transform var(--v-mouvement) var(--courbe);
}
.v-fiche.ouverte { opacity: 1; transform: none; }
.v-fiche-barre {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-1) var(--e-2) var(--e-1) var(--e-4); background: var(--fond); border-bottom: 1px solid var(--filet);
}
.v-fiche-id { font-size: var(--v-t-petit); color: var(--encre-3); font-variant-numeric: tabular-nums; }
.v-fiche-tete { padding: var(--e-4); display: grid; gap: var(--e-3); }
.v-fiche-inst { font-size: var(--v-t-petit); color: var(--encre-2); font-weight: 500; }
.v-fiche-tete h3 { font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; font-weight: 600; }
.v-fiche-tete h3:focus { outline: none; }
.v-fiche-tete h3:focus-visible { outline: 2px solid var(--principale); outline-offset: 3px; }
.v-fiche-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.v-fiche-dates { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); padding: var(--e-3); background: var(--surface); border-radius: var(--r-2); }
.v-fiche-dates div:last-child { grid-column: 1 / -1; }
.v-fiche-dates dt { font-size: var(--v-t-petit); color: var(--encre-3); }
.v-fiche-dates dd { margin: 0; font-weight: 500; }
.v-suivre { justify-self: start; }
.v-suivre[aria-pressed="true"] { border-color: var(--principale); color: var(--principale); background: var(--principale-teinte); }
.v-suivre[aria-pressed="true"] svg { fill: currentColor; }
.v-onglets-fiche { padding: 0 var(--e-2); position: sticky; top: 53px; z-index: 1; background: var(--fond); }
.v-onglets-fiche [role="tab"] { flex: 0 0 auto; padding: 0 var(--e-2); }
.v-fiche-corps { padding: var(--e-4) var(--e-4) var(--e-7); }
.v-fiche-corps [role="tabpanel"]:focus { outline: none; }
.v-fiche-corps [role="tabpanel"]:focus-visible { outline: 2px solid var(--principale); outline-offset: 4px; border-radius: var(--r-1); }
.v-chapo { color: var(--encre); font-size: 1rem; padding-left: var(--e-3); border-left: 2px solid var(--principale); margin-bottom: var(--e-4) !important; }
.v-synthese { display: grid; gap: var(--e-4); }
.v-synthese:not(:empty) { margin-bottom: var(--e-4); padding: var(--e-4); border-radius: var(--r-2); background: var(--principale-teinte); }
.v-synth-bloc h4 { font-size: var(--v-t-petit); font-weight: 600; color: var(--principale); margin-bottom: var(--e-1); }
.v-synth-bloc ul, .v-synth-bloc ol, .v-obligations, .v-jalons { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-1); }
.v-synth-ech { list-style: none; padding-left: 0 !important; }
.v-synth-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.v-texte-integral { display: grid; gap: var(--e-3); font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--encre); max-width: 68ch; }
.v-mots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--e-5) !important; }
.v-mots > span:first-child { font-size: var(--v-t-petit); font-weight: 600; color: var(--encre-3); margin-right: var(--e-1); }
.v-mot { font-size: var(--v-t-petit); padding: 2px var(--e-2); border: 1px solid var(--filet); border-radius: var(--r-pastille); color: var(--encre-2); }
.v-obligations { gap: var(--e-3); }
.v-obligations li { padding-left: var(--e-1); }
.v-jalons { list-style: none; padding: 0; gap: 0; }
.v-jalons li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--filet); }
.v-jalons li.passe { color: var(--encre-3); }
.v-jalon-date { font-weight: 600; display: grid; font-variant-numeric: tabular-nums; }
.v-jalon-date .v-rel { font-size: var(--v-t-petit); }

/* ---------- Modale d'alerte ---------- */
.v-modale-fond {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--voile-modal); display: grid; place-items: end center;
  opacity: 0; transition: opacity var(--v-mouvement) var(--courbe);
}
.v-modale-fond.ouverte { opacity: 1; }
.v-modale {
  width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--fond);
  border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: var(--ombre-3);
  transform: translateY(16px); transition: transform var(--v-mouvement) var(--courbe);
}
.v-modale-fond.ouverte .v-modale { transform: none; }
.v-modale-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-5); border-bottom: 1px solid var(--filet); background: var(--fond); }
.v-modale-tete h3 { font-size: 1.125rem; font-weight: 600; }
.v-modale-tete h3:focus { outline: none; }
.v-modale-corps { padding: var(--e-5); display: grid; gap: var(--e-5); }
.v-champ { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e-2); min-width: 0; }
.v-champ legend, .v-champ > label { font-weight: 600; padding: 0; margin-bottom: var(--e-2); }
.v-champ input[type="email"] {
  width: 100%; min-height: 48px; padding: 0 var(--e-3); font: inherit; font-size: 1rem; color: var(--encre);
  border: 1px solid var(--filet-fort); border-radius: var(--r-2); background: var(--fond); transition: border-color var(--duree-survol);
}
.v-champ input[type="email"]:focus { outline: none; border-color: var(--principale); box-shadow: 0 0 0 3px var(--principale-teinte); }
.v-champ input[aria-invalid="true"] { border-color: var(--alerte); }
.v-erreur { color: var(--alerte); font-size: var(--v-t-petit); font-weight: 500; }
.v-cases { display: grid; gap: 2px; }
.v-case { display: flex; align-items: center; gap: var(--e-3); min-height: var(--v-cible); padding: 0 var(--e-2); border-radius: var(--r-1); cursor: pointer; }
.v-case:hover { background: var(--surface); }
.v-case input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--principale); }
.v-choix { grid-template-columns: minmax(0, 1fr); }
.v-modale-compte { font-size: var(--v-t-petit); color: var(--encre-2); }
.v-mention { font-size: var(--v-t-petit); color: var(--orange-texte); background: var(--orange-teinte); border-radius: var(--r-2); padding: var(--e-3); }
.v-modale-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
.v-mail { border: 1px solid var(--filet); border-radius: var(--r-2); overflow: hidden; }
.v-mail-tete { margin: 0; padding: var(--e-3) var(--e-4); background: var(--surface); display: grid; gap: var(--e-1); border-bottom: 1px solid var(--filet); }
.v-mail-tete div { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--e-2); }
.v-mail-tete dt { color: var(--encre-3); font-size: var(--v-t-petit); }
.v-mail-tete dd { margin: 0; overflow-wrap: anywhere; }
.v-mail-corps { padding: var(--e-4); display: grid; gap: var(--e-3); }
.v-mail-corps ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--e-2); }
.v-mail-corps li span { display: block; color: var(--encre-3); font-size: var(--v-t-petit); }
.v-lien-fictif { color: var(--principale); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v-note-fictif { color: var(--encre-3); font-size: var(--v-t-petit); }

html.veille-verrou, html.veille-verrou body { overflow: hidden; }

/* ---------- Tablette et ordinateur : fenêtre d'outil à hauteur fixe, défilement interne ---------- */
@media (min-width: 768px) {
  .veille { --v-cible: 36px; }
  .v-sq-corps { grid-template-columns: var(--v-filtres-l) minmax(0, 1fr); min-height: calc(var(--v-hauteur) - 58px); }
  .v-sq-cote { display: block; background: var(--surface); border-right: 1px solid var(--filet); }
  .v-sq-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .v-app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: var(--v-hauteur); border-radius: var(--r-4); }
  .v-barre { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marque recherche actions"; gap: var(--e-5); padding: var(--e-3) var(--e-4); }
  .v-recherche { max-width: 520px; justify-self: center; width: 100%; }
  .v-btn-assistant span, .v-cloche-mot { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .v-btn-barre { padding: 0 var(--e-3); }

  .v-corps { display: grid; grid-template-columns: var(--v-filtres-l) minmax(0, 1fr); min-height: 0; overflow: hidden; }
  .v-filtres, .v-filtres.ouvert {
    display: flex; flex-direction: column; position: static; min-height: 0; animation: none;
    background: var(--surface); border-right: 1px solid var(--filet);
  }
  .v-filtres-tete { padding: var(--e-3) var(--e-3) var(--e-2) var(--e-4); border-bottom: 0; }
  .v-filtres-tete h3 { font-size: var(--v-t); }
  .v-filtres-tete .v-lien { display: inline-block; }
  .v-fermer-tiroir, .v-filtres-pied { display: none !important; }
  .v-filtres-corps { padding: 0 var(--e-3) var(--e-5) var(--e-4); }
  .v-groupe { padding: var(--e-3) 0 var(--e-2); }
  .v-option { min-height: 32px; }
  .v-principal { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: var(--e-5); }
  .v-btn-filtres { display: none; }
  .v-btn-alerte { width: auto; }
  .v-outils { grid-template-columns: auto minmax(0, 1fr); align-items: end; border-bottom: 1px solid var(--filet); }
  .v-outils .v-onglets { border-bottom: 0; }
  .v-onglets-vues [role="tab"] { flex: 0 0 auto; }
  .v-outils-droite { display: flex; flex-wrap: wrap; justify-content: flex-end; padding-bottom: var(--e-2); }
  .v-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v-assistant-form { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .v-assistant-form .btn { min-height: 64px; }
  .v-puce, .v-prop-puce, .v-exemple { min-height: 32px; }
  .v-ligne { padding: var(--e-3) var(--e-4); }

  /* La carte : tuiles plus grandes, nom du pays visible, classement à côté sur grand écran */
  .v-grille-tuiles { grid-auto-rows: 76px; gap: var(--e-2); }
  .v-grille-tuiles.am { grid-template-columns: 96px; }
  .v-grille-tuiles.eu { grid-template-columns: repeat(4, minmax(0, 104px)); }
  .v-tuile-nom { display: block; }
  .v-carte-plan { gap: var(--e-6); justify-content: start; }

  /* La frise : 12 mois, un point par échéance, placé à sa date */
  .v-frise { display: block; margin-bottom: var(--e-5); padding: var(--e-3) var(--e-4) var(--e-6); border: 1px solid var(--filet); border-radius: var(--r-3); }
  .v-frise-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: var(--v-t-petit); color: var(--encre-3); text-transform: capitalize; }
  .v-frise-mois span { padding-left: 4px; border-left: 1px solid var(--filet); white-space: nowrap; overflow: hidden; }
  .v-frise-piste {
    position: relative; height: calc(var(--rangs) * 16px + 16px); margin-top: var(--e-2);
    background: repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px calc(100% / 12));
  }
  .v-frise-auj { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--principale); }
  .v-frise-auj span { position: absolute; top: calc(100% + 2px); left: 4px; font-size: var(--v-t-petit); color: var(--principale); font-weight: 600; white-space: nowrap; display: none; }
  .v-frise-point {
    position: absolute; top: calc(var(--r) * 16px + 4px); width: 12px; height: 12px; margin-left: -6px; padding: 0; border-radius: var(--r-pastille);
    border: 2px solid var(--fond); background: var(--encre-3); cursor: pointer; transition: transform var(--duree-survol) var(--courbe);
  }
  .v-frise-point.eleve { background: var(--alerte); }
  .v-frise-point.moyen { background: var(--orange); }
  .v-frise-point:hover, .v-frise-point:focus-visible { transform: scale(1.5); }

  /* La fiche : panneau à droite, par-dessus la liste */
  .v-fiche {
    position: absolute; inset: 0 0 0 auto; z-index: 4; width: var(--v-fiche-l); border-left: 1px solid var(--filet); box-shadow: var(--ombre-3);
    transform: translateX(16px);
  }
  .v-fiche-tete { padding: var(--e-5); }
  .v-fiche-tete h3 { font-size: 1.5rem; }
  .v-fiche-dates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-fiche-dates div:last-child { grid-column: auto; }
  .v-onglets-fiche { padding: 0 var(--e-3); top: 45px; }
  .v-fiche-corps { padding: var(--e-5); }

  .v-modale-fond { place-items: center; padding: var(--e-5); }
  .v-modale { max-width: 600px; max-height: min(90vh, 860px); border-radius: var(--r-4); transform: translateY(8px) scale(.99); }
  .v-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-choix legend { grid-column: 1 / -1; }
  html.veille-verrou, html.veille-verrou body { overflow: visible; }
  html.veille-verrou:has(.v-modale-fond:not([hidden])), html.veille-verrou:has(.v-modale-fond:not([hidden])) body { overflow: hidden; }
}

/* Grand écran : la liste en tableau, la carte et son classement côte à côte */
@media (min-width: 1100px) {
  .veille { --v-filtres-l: 280px; }
  .v-ligne {
    grid-template-columns: minmax(0, 1fr) 10.5em; grid-template-areas: "tete pied" "titre pied" "resume pied"; column-gap: var(--e-5); row-gap: var(--e-1);
  }
  .v-ligne-tete { grid-area: tete; }
  .v-ligne-titre { grid-area: titre; }
  .v-ligne-resume { grid-area: resume; -webkit-line-clamp: 1; }
  .v-ligne-pied { grid-area: pied; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; text-align: right; }
  .v-carte { grid-template-columns: auto minmax(260px, 360px); gap: var(--e-7); align-items: start; }
  .v-frise-auj span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .veille *, .veille *::before, .veille *::after { transition-duration: 0ms !important; animation: none !important; }
  .v-fiche, .v-modale { transform: none !important; }
}

/* Retouches du 14/10 : nom de l'UE sur deux lignes ; sur ordinateur, un voile léger sous la fiche ouverte */
.v-tuile.ue .v-tuile-nom { white-space: normal; }
@media (min-width: 1024px) {
  .v-fiche.ouverte { box-shadow: var(--ombre-3), 0 0 0 200vmax var(--voile-fiche); }
}