/* ==========================================================================
   Interface v2 — espace éditorial : Presse, Contenus du site, Newsroom
   (refonte UX, 25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-editorial.js. Tout est scopé html.ui-v2 et préfixé
   v2ed- (ed comme éditorial) : sans la v2, ce fichier ne change RIEN.
   Jetons de design-tokens.css (thème clair posé par la coquille) et
   variables de ui-v2.css (--v2-bordure-douce). Règles du cahier : cartes
   blanches radius 12, boutons/champs radius 8, pastilles radius 4, grille
   8 pt, cibles 44 px (36 px pour les boutons de ligne, précédent v2ap), un
   seul bouton primaire cuivre par écran (« Nouveau communiqué », « Nouveau
   contact », « Ajouter une retombée » — le Calendrier n'en a pas), H1
   PT Serif. La peau v2ed-v1 en fin de fichier éclaircit les écrans restés
   en logique v1 (Contenus du site, Newsroom, et le repli presse) — patron :
   v2ap-v1 (appels) et v2fa-v1 (facturation).
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2ed-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2ed-entete h1 {
  margin: 0;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2ed-entete-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* L'en-tête v1 seulement HABILLÉ (Newsroom) : le .page-head garde ses nœuds
   — badges de statut, liens, boutons — et prend le dessin de l'en-tête v2. */
html.ui-v2 .v2ed-entete-v1 {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}
html.ui-v2 .v2ed-entete-v1 h1 {
  margin: 0;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--sobria-nuit);
}

/* Onglets soulignés cuivre — le même dessin que les appels (v2ap). */
html.ui-v2 .v2ed-onglets {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--v2-bordure-douce);
  flex-wrap: wrap;
}
html.ui-v2 .v2ed-onglets a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 14px;
  color: var(--texte-attenue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
html.ui-v2 .v2ed-onglets a:hover { color: var(--sobria-nuit); }
html.ui-v2 .v2ed-onglets a.v2ed-onglet-actif {
  color: var(--sobria-nuit);
  font-weight: 600;
  border-bottom-color: var(--sobria-cuivre);
}

/* ---------------------------------------------------------------- cartes */
html.ui-v2 .v2ed-carte {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
  padding: 16px;
}
html.ui-v2 .v2ed-carte h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2ed-meta {
  font-size: 12.5px;
  color: var(--texte-attenue);
  margin: 4px 0;
}
html.ui-v2 .v2ed-meta-inline {
  font-size: 13px;
  font-weight: 400;
  color: var(--texte-attenue);
}
html.ui-v2 .v2ed-chapo { margin: 0 0 12px; }
/* Encre rouge lisible sur blanc (mesure du 07/08, reprise de v2ap) : le
   jeton --erreur est calibré pour les fonds sombres. */
html.ui-v2 .v2ed-alerte { color: #a3392b; }
html.ui-v2 .v2ed-vide {
  padding: 32px 24px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}
html.ui-v2 .v2ed-charge {
  padding: 40px;
  text-align: center;
  color: var(--texte-attenue);
}

/* ------------------------------------------------------------------ KPI */
html.ui-v2 .v2ed-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
html.ui-v2 .v2ed-kpi {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
  padding: 14px 16px;
}
html.ui-v2 .v2ed-kpi-num {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 26px;
  line-height: 1.1;
  color: var(--sobria-nuit);
}
/* Cuivre assombri lisible sur blanc — le cuivre nominal ne tient pas 4,5:1. */
html.ui-v2 .v2ed-kpi-accent .v2ed-kpi-num { color: #a05f27; }
html.ui-v2 .v2ed-kpi-lbl {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--texte-attenue);
}

/* -------------------------------------------------------------- pastilles */
html.ui-v2 .v2ed-pastille {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
html.ui-v2 .v2ed-pastille-vert   { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2ed-pastille-ambre  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2ed-pastille-bleu   { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 .v2ed-pastille-rouge  { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2ed-pastille-neutre { background: #efeeec; color: #676d7c; }

/* ----------------------------------------------------------------- boutons */
/* Un seul primaire cuivre par écran — les autres restent blancs bordés, le
   danger ne se colore qu'au survol. */
html.ui-v2 .v2ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
html.ui-v2 .v2ed-btn:hover { background: #faf8f3; }
html.ui-v2 .v2ed-btn svg { width: 16px; height: 16px; flex: none; }
html.ui-v2 .v2ed-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
html.ui-v2 .v2ed-btn-icone { padding: 0 9px; }
html.ui-v2 .v2ed-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2ed-btn-primaire:hover { background: #b06c33; }
html.ui-v2 .v2ed-btn-danger:hover {
  color: #a3392b;
  border-color: #a3392b;
  background: #fbeeec;
}
html.ui-v2 .v2ed-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ----------------------------------------------------------------- champs */
html.ui-v2 .v2ed-filtres {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
html.ui-v2 .v2ed-champ,
html.ui-v2 .v2ed-select {
  min-height: var(--cible-tactile, 44px);
  padding: 8px 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
  font-family: inherit;
}
/* La règle générique v1 (style.css) impose width:100% aux champs : dans la
   barre de filtres, chacun reprend sa largeur naturelle. */
html.ui-v2 .v2ed-filtres .v2ed-select { width: auto; }
html.ui-v2 .v2ed-filtres .v2ed-champ { width: auto; flex: 1; max-width: 280px; }

/* ----------------------------------------------------------------- listes */
/* Une carte-liste : padding 0, les lignes portent l'espacement. */
html.ui-v2 .v2ed-liste { padding: 0; }
html.ui-v2 .v2ed-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
}
html.ui-v2 .v2ed-liste > .v2ed-ligne + .v2ed-ligne {
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2ed-ligne-corps { flex: 1; min-width: 220px; }
html.ui-v2 .v2ed-ligne-titre {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2ed-ligne-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Liste NUE : les mêmes lignes à l'intérieur d'une carte déjà rembourrée
   (veille, calendrier) — l'espacement horizontal vient de la carte. */
html.ui-v2 .v2ed-liste-nue .v2ed-ligne { padding: 12px 0; }
html.ui-v2 .v2ed-liste-nue .v2ed-ligne + .v2ed-ligne {
  border-top: 1px solid var(--v2-bordure-douce);
}

/* ------------------------------------------- rendez-vous éditorial (tease) */
html.ui-v2 .v2ed-rdv {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  box-shadow: inset 3px 0 0 var(--sobria-cuivre),
              var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
}
html.ui-v2 .v2ed-rdv-corps { flex: 1; min-width: 240px; }

/* Zone de la veille : espacée de la liste des retombées. */
html.ui-v2 .v2ed-veille { margin-bottom: 16px; }

/* ---------------------------------------------------- calendrier éditorial */
html.ui-v2 .v2ed-mois {
  flex: none;
  width: 86px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--sobria-nuit);
  text-transform: capitalize;
}
html.ui-v2 .v2ed-mois span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--texte-attenue);
}
/* Le mois en cours : filet cuivre à gauche, en plus de sa pastille — la
   couleur seule ne suffit pas à porter l'information. */
html.ui-v2 .v2ed-marronnier-actuel {
  box-shadow: inset 3px 0 0 var(--sobria-cuivre);
  padding-left: 12px;
}

/* ==========================================================================
   Peau v2ed-v1 — restyle LÉGER des écrans restés en logique v1 (Contenus du
   site, les trois écrans Newsroom, et le repli presse). Les variables
   inversées du thème clair rendent déjà les cartes claires ; ici on aligne
   titres, cartes, lignes, champs et badges sur le dessin v2 — la logique et
   la structure v1 ne bougent pas. Patron : v2ap-v1 (appels), v2fa-v1
   (facturation).
   ========================================================================== */
html.ui-v2 #main.v2ed-v1 .page-head h1 {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  color: var(--sobria-nuit);
}
html.ui-v2 #main.v2ed-v1 .card {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
}
html.ui-v2 #main.v2ed-v1 .card h2 { color: var(--sobria-nuit); font-size: 16px; }
/* Le survol v1 (blanc translucide) est invisible sur fond blanc. */
html.ui-v2 #main.v2ed-v1 .list-row:hover { background: rgba(20, 33, 59, .04); }
html.ui-v2 #main.v2ed-v1 .empty,
html.ui-v2 #main.v2ed-v1 .loading { color: var(--texte-attenue); }

/* Champs v1 : la règle générique (style.css) les peint en nuit quelle que
   soit la version du thème — sur les écrans enveloppés, ils passent en
   blanc bordé. Cases et radios exclues : elles se dessinent elles-mêmes. */
html.ui-v2 #main.v2ed-v1 input:not([type="checkbox"]):not([type="radio"]),
html.ui-v2 #main.v2ed-v1 select,
html.ui-v2 #main.v2ed-v1 textarea {
  background: var(--fond-surface, #fff);
  color: var(--texte);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
}
html.ui-v2 #main.v2ed-v1 input[type="checkbox"] { accent-color: var(--sobria-cuivre); }

/* Boutons v1 → dessin v2 : blancs bordés, le primaire reste LE cuivre. */
html.ui-v2 #main.v2ed-v1 .btn {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--v2-bordure-douce);
  background: var(--fond-surface, #fff);
  color: var(--texte);
}
html.ui-v2 #main.v2ed-v1 .btn:hover { background: #faf8f3; filter: none; }
html.ui-v2 #main.v2ed-v1 .btn-primary {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 #main.v2ed-v1 .btn-primary:hover { background: #b06c33; }
html.ui-v2 #main.v2ed-v1 .btn-danger {
  background: transparent;
  border-color: #d8b6b0;
  color: #a3392b;
}
html.ui-v2 #main.v2ed-v1 .btn-danger:hover { background: #fbeeec; }

/* Badges v1 → pastilles pastel. Sélecteurs d'attribut à dessein : la
   sous-chaîne interdite (voir l'en-tête de ui-v2-editorial.js) ne doit pas
   s'écrire ici, et ces classes appartiennent au balisage v1, qu'on ne
   modifie pas. Newsroom emploie veille (info), warn et urgente. */
html.ui-v2 #main.v2ed-v1 .badge {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  background: #efeeec;
  color: #676d7c;
}
html.ui-v2 #main.v2ed-v1 .badge[class*="veille"],
html.ui-v2 #main.v2ed-v1 .badge[class*="info"] { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 #main.v2ed-v1 .badge[class*="warn"] { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 #main.v2ed-v1 .badge[class*="urgente"],
html.ui-v2 #main.v2ed-v1 .badge[class*="danger"] { background: #fbeeec; color: #a3392b; }
html.ui-v2 #main.v2ed-v1 .badge[class*="-ok"] { background: #eaf5ee; color: #3f8f5f; }

/* Contenus du site : jauge d'avancement sur rail clair, compteurs de groupe
   pastel, avertissement GitHub (.callout, sans style en v1) en carte ambre. */
html.ui-v2 #main.v2ed-v1 .client-progress {
  background: #efeade;
  border: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 #main.v2ed-v1 .contenus-compte { background: #efeeec; color: #676d7c; }
html.ui-v2 #main.v2ed-v1 .contenus-groupe > h2 { color: var(--sobria-nuit); }
html.ui-v2 #main.v2ed-v1 .callout {
  background: #fdf3e3;
  border: 1px solid #ecd9b0;
  border-radius: 12px;
  padding: 12px 16px;
  color: #6b4d12;
  font-size: 13.5px;
}

/* Newsroom : les styles nr- injectés par newsroom.js posent des bordures du
   thème sombre (--nuit-3) — adoucies ici, sans toucher au fichier v1. */
html.ui-v2 #main.v2ed-v1 .nr-ligne {
  background: var(--fond-surface, #fff);
  border-color: var(--v2-bordure-douce);
}
html.ui-v2 #main.v2ed-v1 .nr-ligne:hover { border-color: var(--sobria-cuivre); }
html.ui-v2 #main.v2ed-v1 .nr-decision,
html.ui-v2 #main.v2ed-v1 .nr-plafond,
html.ui-v2 #main.v2ed-v1 .nr-brouillon { border-color: var(--v2-bordure-douce); }
html.ui-v2 #main.v2ed-v1 .nr-commentaires .item { border-top-color: var(--v2-bordure-douce); }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  html.ui-v2 .v2ed-entete,
  html.ui-v2 .v2ed-entete-v1 { align-items: flex-start; flex-direction: column; }
  html.ui-v2 .v2ed-entete h1,
  html.ui-v2 .v2ed-entete-v1 h1 { font-size: 24px; }
  html.ui-v2 .v2ed-onglets { gap: 16px; }
  html.ui-v2 .v2ed-kpis { grid-template-columns: repeat(2, 1fr); }
  /* Sur téléphone, les boutons de ligne reprennent la cible pleine. */
  html.ui-v2 .v2ed-ligne-actions .v2ed-btn-sm { min-height: 44px; }
  html.ui-v2 .v2ed-mois { width: 64px; }
}