/* ============================================================================
   Primitives d'écran partagées (UIV2-FINAL).

   Ce fichier ne contient QUE ce que `components/v2/screen.js` produit et qui
   n'existait nulle part. Les classes déjà définies ailleurs — `.v2-panel`,
   `.v2-table`, `.v2-badge`, `.v2-rep-metrics`, `.v2-inline-state`, `.v2-skel` —
   ne sont pas redéfinies : deux définitions, c'est une divergence en attente.
   ============================================================================ */

/* Le piège de grille rencontré en DESIGN-09 : une piste implicite `auto` est
   plancherée par la largeur min-content de son contenu, si bien qu'un tableau
   large fait déborder la PAGE ENTIÈRE et non le panneau. */
.v2-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* Texte libre venu du domaine. Aucune mise en forme qui suggérerait une
   catégorie qu'il n'a pas. */
.v2-free { color: var(--text-primary); overflow-wrap: anywhere; }

/* Capacité désactivée par décision de plateforme — PAS une panne. Le gris
   neutre le dit sans alarmer ; le texte le dit explicitement. */
.v2-inline-state.is-disabled {
  border-left: 2px solid var(--border-default);
  padding-left: var(--space-3);
}

/* ── Drapeaux de plateforme ───────────────────────────────────────────────
   Un drapeau porte SON LIBELLÉ et SON ÉTAT ÉCRIT. Jamais une pastille de
   couleur seule : « fermé » et « inconnu » se ressemblent trop en gris pour
   qu'on les distingue à l'œil, et l'accessibilité l'interdit de toute façon. */
.v2-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-2);
}
.v2-flag {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--border-default);
  background: var(--bg-canvas);
}
.v2-flag.is-on { border-left-color: var(--accent); }
.v2-flag.is-off { border-left-color: var(--border-default); }
.v2-flag.is-unknown { border-left-color: var(--warning); }
.v2-flag-label { font-size: var(--text-sm); color: var(--text-primary); }
.v2-flag-state { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.v2-flag.is-off .v2-flag-state { color: var(--text-muted); }
.v2-flag.is-unknown .v2-flag-state { color: var(--warning); }
.v2-flag-note { font-size: var(--text-xs); color: var(--text-muted); }

.v2-provider { margin-bottom: var(--space-4); }
.v2-provider:last-of-type { margin-bottom: 0; }
.v2-provider-head {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.v2-provider-name {
  margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--text-primary);
}
.v2-provider-impl {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
}

.v2-readonly { margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }

/* ── En-tête de page en très petite largeur ───────────────────────────────
   Un élément flex ne rétrécit pas sous la largeur min-content de son contenu :
   le titre « Centre de communications », composé en 34 px, imposait donc 309 px
   dans une colonne qui n'en offre que 290 à 390 px de viewport. Le débordement
   était de 3 px — assez peu pour passer inaperçu à l'œil, assez pour faire
   défiler la PAGE entière latéralement, ce que le §50 interdit.

   Deux corrections, pas une : autoriser le rétrécissement (`min-width: 0`) ne
   suffit pas si le mot le plus long reste insécable ; réduire le corps du titre
   ne suffit pas si un jour un mot plus long apparaît. */
.v2-page-head > * { min-width: 0; }
.v2-page-title-lg { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .v2-page-title-lg { font-size: 26px; line-height: 1.15; }
}

/* ── Primitives de la fabrique (UIV2-FINAL) ──────────────────────────────── */
.v2-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.v2-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-primary); text-align: left;
}
.v2-linkbtn:hover { text-decoration: underline; }
.v2-linkbtn:focus-visible, .v2-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.v2-link { color: var(--text-primary); text-decoration: underline; }

/* Zone d'actions : SÉPARÉE de la lecture. Mélanger les deux dans un même
   panneau fabrique des clics accidentels — la règle posée en DESIGN-10. */
.v2-actions {
  padding: var(--space-4); margin-bottom: var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.v2-actions-title {
  margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: 600;
  color: var(--text-primary);
}
.v2-actions-note { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.v2-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.v2-confirm {
  margin-top: var(--space-3); padding: var(--space-3);
  border-left: 2px solid var(--warning); background: var(--bg-canvas);
}
.v2-confirm-title { margin: 0 0 2px; font-size: var(--text-sm); font-weight: 600; }
.v2-confirm-body { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }

/* Listes simples et étapes numérotées. */
.v2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.v2-list-item { display: grid; gap: 2px; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle, var(--border-default)); }
.v2-list-note { font-size: var(--text-xs); color: var(--text-muted); }
.v2-steps { margin: 0 0 var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-3); }
.v2-steps li { display: grid; gap: 2px; }
.v2-step-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }

/* Détail technique replié : disponible pour le support, invisible sinon. */
.v2-details { margin-top: 4px; }
.v2-details summary { font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; }
.v2-pre {
  margin: var(--space-2) 0 0; padding: var(--space-2);
  background: var(--bg-surface-sunken); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs);
  overflow-x: auto; max-width: 100%;
}

/* Réponse d'un modèle : marquée comme telle, jamais confondue avec de la
   documentation vérifiée. */
.v2-answer {
  padding: var(--space-3); border-left: 2px solid var(--accent);
  background: var(--bg-canvas); margin-bottom: var(--space-3);
}
.v2-answer-tag {
  margin: 0 0 var(--space-2); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}

.v2-btn-quiet, .v2-btn-ghost, .v2-btn-danger {
  padding: 6px var(--space-3); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-primary);
}
.v2-btn-ghost { background: transparent; color: var(--text-secondary); }
.v2-btn-danger { border-color: var(--warning); color: var(--warning); }
.v2-btn-quiet:hover, .v2-btn-ghost:hover, .v2-btn-danger:hover { opacity: .82; }
.v2-btn-quiet[disabled], .v2-btn-ghost[disabled], .v2-btn-danger[disabled] {
  opacity: .5; cursor: default;
}

.v2-form-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.v2-report { margin-top: var(--space-3); }

/* Une zone d'action à EFFET EXTERNE se distingue visuellement d'une zone de
   décision interne : ce n'est pas la même conséquence, et l'écran hérité les
   posait côte à côte, à la même taille. */
.v2-actions.is-external { border-left: 3px solid var(--warning); }