/* ==========================================================================
   Interface v2 — écran « Aujourd'hui » (refonte UX 25/08/2026)
   ==========================================================================
   Tout est scopé sous html.ui-v2 et préfixé v2a- : sans le drapeau
   "sobria-ui-v2" (ui-v2.js), ce fichier ne change rien à l'interface.

   Règles communes v2 (cahier §8) : cartes blanches radius 12, bordure
   var(--v2-bordure-douce), ombre 0 1px 2px rgba(20,33,59,.04), padding 24 ;
   grille de 8 points ; cibles tactiles 44 px ; badges radius 4 ; un seul
   bouton primaire cuivre par écran ; rouge du retard #b3352b.
   ========================================================================== */

/* ------------------------------------------------------------- en-tête */
html.ui-v2 .v2a-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
html.ui-v2 .v2a-titre {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--sobria-nuit);
  margin: 0 0 4px;
  line-height: 1.2;
}
html.ui-v2 .v2a-sous-titre {
  font-size: 15px;
  color: var(--texte-attenue);
  margin: 0;
}
html.ui-v2 .v2a-date {
  font-size: 14px;
  color: var(--texte-attenue);
  white-space: nowrap;
  padding-top: 10px;
}

/* ----------------------------------------------------------------- KPI */
html.ui-v2 .v2a-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
html.ui-v2 .v2a-kpi {
  background: var(--fond-surface);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 33, 59, .04);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
html.ui-v2 .v2a-kpi-pastille {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f7ede2;
  color: var(--sobria-cuivre);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
html.ui-v2 .v2a-kpi-pastille svg { width: 22px; height: 22px; }
html.ui-v2 .v2a-kpi-num {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--sobria-nuit);
  line-height: 1.15;
}
html.ui-v2 .v2a-kpi-lbl {
  font-size: 13px;
  color: var(--texte-attenue);
  margin-top: 2px;
}

/* ------------------------------------------------------------ colonnes */
html.ui-v2 .v2a-colonnes {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
html.ui-v2 .v2a-col-droite {
  display: grid;
  gap: 24px;
  min-width: 0;
}
html.ui-v2 .v2a-col-gauche { min-width: 0; }

/* -------------------------------------------------------------- cartes */
html.ui-v2 .v2a-carte {
  background: var(--fond-surface);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 33, 59, .04);
  padding: 24px;
  min-width: 0;
}
html.ui-v2 .v2a-carte h2 {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--sobria-nuit);
  margin: 0 0 16px;
}
html.ui-v2 .v2a-carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2a-carte-tete h2 { margin: 0; }
html.ui-v2 .v2a-carte-tete-droite {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
html.ui-v2 .v2a-carte-pied {
  border-top: 1px solid var(--v2-bordure-douce);
  margin-top: 16px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html.ui-v2 .v2a-carte-pied .v2a-lien { margin-left: auto; }

/* ------------------------------------------------------------- boutons */
/* LE primaire de l'écran — un seul cuivre visible dans le contenu. */
html.ui-v2 .v2a-btn-prim {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--sobria-cuivre);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.ui-v2 .v2a-btn-prim:hover { background: #b06c33; }
html.ui-v2 .v2a-court { display: none; }

html.ui-v2 .v2a-btn {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface);
  color: var(--texte);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
html.ui-v2 .v2a-btn:hover { background: var(--fond-survol); }
html.ui-v2 .v2a-btn-danger { color: #b3352b; }
html.ui-v2 .v2a-btn-danger:hover { background: #f9ece9; border-color: #e4c7c2; }

html.ui-v2 .v2a-lien {
  color: var(--cuivre-clair, #a05f27);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  /* Cible tactile ≥ 44 px sans gonfler la ligne. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
html.ui-v2 .v2a-lien:hover { text-decoration: underline; }

html.ui-v2 .v2a-note { font-size: 12.5px; color: var(--texte-attenue); }

/* --------------------------------------------------- priorités du jour */
html.ui-v2 .v2a-prio-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Lignes resserrées (06/09/2026, demande d'Adrien : « ça permet de mettre
   plus de choses sur une page »). 12 → 8 px de respiration verticale, et les
   éléments alignés sur le milieu plutôt que sur le haut : une ligne à deux
   niveaux de texte ne pousse plus ses boutons vers le bas. */
html.ui-v2 .v2a-prio-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2a-prio-ligne:first-child { border-top: 0; padding-top: 0; }
html.ui-v2 .v2a-prio-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sobria-cuivre);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
}
html.ui-v2 .v2a-prio-corps { min-width: 0; }
html.ui-v2 .v2a-prio-titre {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--texte);
  overflow-wrap: anywhere;
}
html.ui-v2 .v2a-prio-sous {
  font-size: 13px;
  color: var(--texte-attenue);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2a-prio-sous a { color: var(--cuivre-clair, #a05f27); }
html.ui-v2 .v2a-prio-droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
html.ui-v2 .v2a-echeance {
  font-size: 13px;
  color: var(--texte-attenue);
  white-space: nowrap;
  text-align: right;
}
html.ui-v2 .v2a-retard { color: #b3352b; font-weight: 600; }
html.ui-v2 .v2a-echeance-detail { font-weight: 400; opacity: .85; }
/* « Ouvrir » : discret, il ne concurrence pas le primaire. */
html.ui-v2 .v2a-ouvrir {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

/* ------------------------------- supprimer en maintenant (06/09/2026) */
/* Demande d'Adrien : « genre tu restes appuyé deux secondes ça se supprime ».
   La jauge N'EST PAS DÉCORATIVE : sans elle, un maintien ne se distingue pas
   d'un bouton mort, et on relâche au bout d'une demi-seconde en croyant qu'il
   ne répond pas. C'est elle qui enseigne le geste. */
html.ui-v2 .v2a-prio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
html.ui-v2 .v2a-suppr {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  color: #b3352b;
  border-color: rgba(179, 53, 43, .35);
  /* Le doigt qui maintient ne doit pas faire défiler la page sous lui, ni
     déclencher la loupe de sélection de texte du téléphone. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
html.ui-v2 .v2a-suppr-texte { position: relative; z-index: 1; }
html.ui-v2 .v2a-suppr-jauge {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(179, 53, 43, .16);
  pointer-events: none;
}
/* Deux secondes, la MÊME valeur que MAINTIEN_MS dans ui-v2-aujourdhui.js —
   un test compare les deux, une jauge qui finit avant l'effacement (ou
   après) mentirait sur ce qui est en train de se passer. */
html.ui-v2 .v2a-suppr-encours .v2a-suppr-jauge {
  width: 100%;
  transition: width 2000ms linear;
}
/* Le mouvement en moins, l'information en plus : qui refuse les animations
   voit la teinte s'installer d'un coup plutôt que rien du tout. */
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .v2a-suppr-encours .v2a-suppr-jauge { transition: none; }
}
html.ui-v2 .v2a-prio-supprimee { opacity: .75; }
html.ui-v2 .v2a-prio-supprimee .v2a-prio-titre { font-weight: 400; }

/* ------------------------------------------------------------ état vide */
html.ui-v2 .v2a-vide {
  text-align: center;
  padding: 32px 16px;
}
html.ui-v2 .v2a-vide-titre {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--sobria-nuit);
  margin: 0 0 4px;
}
html.ui-v2 .v2a-vide-texte {
  font-size: 13.5px;
  color: var(--texte-attenue);
  margin: 0 0 16px;
}

/* -------------------------------------------------- barres (pipeline…) */
html.ui-v2 .v2a-barre {
  height: 6px;
  border-radius: 3px;
  background: var(--fond-survol);
  overflow: hidden;
  flex: 1;
  min-width: 60px;
}
html.ui-v2 .v2a-barre-rempli {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sobria-nuit), var(--sobria-cuivre));
}
html.ui-v2 .v2a-pipe-ligne { margin-bottom: 14px; }
html.ui-v2 .v2a-pipe-ligne:last-of-type { margin-bottom: 0; }
html.ui-v2 .v2a-pipe-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--texte);
  margin-bottom: 6px;
}

/* ----------------------------------------------------- activité récente */
html.ui-v2 .v2a-act-ligne {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2a-act-ligne:first-of-type { border-top: 0; padding-top: 0; }
html.ui-v2 .v2a-act-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f7ede2;
  color: var(--sobria-cuivre);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}
html.ui-v2 .v2a-act-ico svg { width: 15px; height: 15px; }
html.ui-v2 .v2a-act-corps { min-width: 0; }
html.ui-v2 .v2a-act-texte {
  font-size: 13.5px;
  color: var(--texte);
  overflow-wrap: anywhere;
  /* Trois lignes, puis « Voir plus » : un e-mail collé dans une activité
     ne fait plus quatre écrans. La coupe est visuelle seulement — le texte
     entier reste dans le document et se déplie sur place. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2a-act-texte-ouvert { -webkit-line-clamp: unset; display: block; }
html.ui-v2 .v2a-act-plus {
  border: 0;
  background: none;
  padding: 2px 0;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sobria-cuivre);
  cursor: pointer;
}
html.ui-v2 .v2a-act-plus[hidden] { display: none; }
html.ui-v2 .v2a-act-meta {
  font-size: 12.5px;
  color: var(--texte-attenue);
  margin-top: 2px;
}

/* ----------------------------------------------- liste complète des tâches */
html.ui-v2 .v2a-callout {
  border-left: 3px solid #b3352b;
  background: #fdf4f2;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--texte);
  margin-bottom: 16px;
}
html.ui-v2 .v2a-filtres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2a-filtre.active {
  border-color: var(--sobria-cuivre);
  color: var(--cuivre-clair, #a05f27);
  background: #f7ede2;
}
html.ui-v2 .v2a-tache {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2a-taches-liste > .v2a-tache:first-child { border-top: 0; }
/* Case « terminé » : cible 44 px autour d'une case de 20 px. */
html.ui-v2 .v2a-fait {
  width: 44px;
  height: 44px;
  margin: -10px 0 0 -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}
html.ui-v2 .v2a-fait input {
  width: 20px;
  height: 20px;
  accent-color: var(--sobria-cuivre);
  cursor: pointer;
}
html.ui-v2 .v2a-tache-corps { flex: 1; min-width: 0; }
html.ui-v2 .v2a-tache-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
html.ui-v2 .v2a-fait-texte { text-decoration: line-through; opacity: .6; }
html.ui-v2 .v2a-tache-desc {
  font-size: 13px;
  color: var(--texte);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 6px;
}
html.ui-v2 .v2a-tache-desc a { color: var(--cuivre-clair, #a05f27); }
html.ui-v2 .v2a-tache-avancement {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
html.ui-v2 .v2a-tache-avancement input[type="range"] {
  width: 140px;
  margin: 0;
  accent-color: var(--sobria-cuivre);
}
html.ui-v2 .v2a-tache-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}
html.ui-v2 .v2a-tache-actions .v2a-btn {
  min-height: 36px;
  font-size: 12.5px;
  padding: 0 12px;
}

/* -------------------------------------------------------------- badges */
html.ui-v2 .v2a-pastille {
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  white-space: nowrap;
}
html.ui-v2 .v2a-pastille-retard { background: #f7e2df; color: #b3352b; }
html.ui-v2 .v2a-pastille-proche { background: #f5ead8; color: #8a5a14; }
html.ui-v2 .v2a-pastille-fait   { background: #e2efe6; color: #2e6b4a; }

/* ------------------------------------------------- Marchés énergie (Lot 2) */
/* Bloc ajouté le 09/09/2026, après les 4 cartes KPI. Mêmes jetons de carte
   que le reste de l'écran (v2a-carte) ; variation de prix en --succes
   (baisse, favorable à l'achat) / --erreur (hausse) — teintes sobres du
   design system, jamais un rouge/vert « feu tricolore » générique. */
html.ui-v2 .v2a-marches .v2a-carte-tete h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
html.ui-v2 .v2a-marches .v2a-carte-tete h2 svg { width: 20px; height: 20px; flex: none; }
html.ui-v2 .v2a-marches-demo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--avertissement, #ca8522);
  background: var(--avertissement-fond, #33230a1a);
  border: 1px solid var(--avertissement, #ca8522);
  border-radius: 4px;
  padding: 2px 8px;
}
html.ui-v2 .v2a-marches-onglets {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
html.ui-v2 .v2a-marches-onglet { min-height: 36px; padding: 0 14px; font-size: 13px; }
html.ui-v2 .v2a-marches-onglet.active {
  background: var(--sobria-nuit);
  color: #fff;
  border-color: var(--sobria-nuit);
}
html.ui-v2 .v2a-marches-tuiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
html.ui-v2 .v2a-marches-tuile {
  background: var(--fond-surface-2);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}
html.ui-v2 .v2a-marches-tuile-lbl {
  font-size: 12px;
  color: var(--texte-attenue);
  margin-bottom: 4px;
}
/* 10/09/2026 — mention de source des séries non quotidiennes (gaz Eurostat). */
html.ui-v2 .v2a-marches-tuile-source {
  font-size: 10.5px;
  color: var(--texte-attenue);
  margin-top: 3px;
  line-height: 1.3;
}
html.ui-v2 .v2a-marches-tuile-val {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--sobria-nuit);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2a-marches-var { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
html.ui-v2 .v2a-marches-var-nulle { font-size: 12.5px; color: var(--texte-attenue); font-weight: 400; }
html.ui-v2 .v2a-marches-hausse { color: var(--erreur, #d37d72); }
html.ui-v2 .v2a-marches-baisse { color: var(--succes, #49a578); }
html.ui-v2 .v2a-marches-stable { color: var(--texte-attenue); }
html.ui-v2 .v2a-marches-canvas-wrap { position: relative; height: 110px; width: 100%; }
html.ui-v2 .v2a-marches-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

/* -------------------------------------------------------------- mobile */
@media (max-width: 1023px) {
  html.ui-v2 .v2a-colonnes { grid-template-columns: 1fr; }
  /* Mesuré à 768 px le 25/08 : quatre tuiles + la sidebar débordaient de
     8 px — le seul défilement horizontal de toute la recette. Le passage
     en 2×2 se fait donc dès cette largeur, pas seulement sous 768. */
  html.ui-v2 .v2a-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  /* Maquette d'Adrien pour l'accueil (06/09/2026) : « Priorités du jour » et
     le bouton SUR LA MÊME LIGNE. « Vos priorités du jour » + « + Nouvelle
     tâche » ne tenaient pas en 390 px et le bouton passait dessous, pleine
     largeur, cuivre — trois lignes avant la première priorité. Libellés
     raccourcis des deux côtés, bouton nuit comme sur la maquette. */
  html.ui-v2 .v2a-carte-tete { flex-wrap: nowrap; }
  html.ui-v2 .v2a-long { display: none; }
  html.ui-v2 .v2a-court { display: inline; }
  html.ui-v2 .v2a-btn-prim { background: var(--sobria-nuit); min-height: 40px; padding: 0 14px; flex: none; }
  html.ui-v2 .v2a-btn-prim:hover { background: #22304f; }
  html.ui-v2 .v2a-kpis { grid-template-columns: repeat(2, 1fr); }
  html.ui-v2 .v2a-kpi { padding: 16px; gap: 12px; }
  html.ui-v2 .v2a-tete { flex-direction: column; gap: 4px; }
  html.ui-v2 .v2a-date { padding-top: 0; }
  /* Sur téléphone, l'échéance et les boutons restent SUR LA MÊME LIGNE :
     empilés, ils faisaient trois niveaux par priorité. Le titre passe à la
     ligne au besoin, la colonne de droite ne bouge plus. */
  html.ui-v2 .v2a-prio-droite { flex-direction: column; align-items: flex-end; gap: 4px; }
  html.ui-v2 .v2a-prio-num { width: 24px; height: 24px; font-size: 12px; }
  html.ui-v2 .v2a-prio-actions .v2a-btn { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
  html.ui-v2 .v2a-echeance { font-size: 12.5px; }
  html.ui-v2 .v2a-tache { flex-wrap: wrap; }
  html.ui-v2 .v2a-tache-actions { flex-direction: row; width: 100%; margin-left: 34px; }
  /* Marchés énergie : 4 tuiles en 2×2 comme les KPI, et un mini-graphe plus
     bas — la place gagnée sert à garder le prix lisible plutôt qu'écrasé. */
  html.ui-v2 .v2a-marches-tuiles { grid-template-columns: repeat(2, 1fr); }
  html.ui-v2 .v2a-marches-canvas-wrap { height: 90px; }
}