/* ==========================================================================
   Interface v2 — espace Activités : Agenda & échéances, Calendrier
   (refonte UX, 25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-activites.js. Tout est scopé html.ui-v2 et préfixé v2t-
   (t comme temps) : sans la coquille 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, un seul bouton primaire cuivre par écran, H1 PT Serif.
   Sous 768 px, #/agenda est recouvert par le module mobile ; le calendrier,
   lui, reste servi ici — d'où ses réglages étroits en fin de fichier.
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2t-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2t-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 .v2t-surtitre {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}
html.ui-v2 .v2t-entete-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ----------------------------------------------------------------- boutons */
/* Un seul primaire cuivre par écran ; les autres restent blancs bordés. */
html.ui-v2 .v2t-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 .v2t-btn:hover { background: #faf8f3; }
html.ui-v2 .v2t-btn svg { width: 18px; height: 18px; flex: none; }
html.ui-v2 .v2t-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2t-btn-primaire:hover { background: #b06c33; }
html.ui-v2 .v2t-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* Boutons-icônes : 36 px dans les lignes, 44 px dans l'en-tête (◀ ▶). */
html.ui-v2 .v2t-btn-icone {
  width: 36px;
  height: 36px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte-attenue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
html.ui-v2 .v2t-btn-icone:hover { background: #faf8f3; color: var(--texte); }
html.ui-v2 .v2t-btn-icone svg { width: 16px; height: 16px; }
html.ui-v2 .v2t-btn-icone-44 { width: 44px; height: 44px; }
html.ui-v2 .v2t-btn-icone-44 svg { width: 20px; height: 20px; }
/* #a3392b : rouge assombri lisible sur blanc (mesure du 07/08 — le jeton
   --erreur est calibré pour les fonds sombres). */
html.ui-v2 .v2t-btn-icone.v2t-danger:hover { color: #a3392b; border-color: #a3392b; }

/* ---------------------------------------------------------------- cartes */
html.ui-v2 .v2t-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));
  overflow: hidden;
  padding-bottom: 4px;
}
html.ui-v2 .v2t-carte-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px 6px;
}
html.ui-v2 .v2t-carte-tete h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--sobria-nuit);
  flex: 1;
}
/* Compteur en tête de carte — neutre à zéro, rouge quand ça presse. */
html.ui-v2 .v2t-compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  background: #efeeec;
  color: #676d7c;
  font-size: 13px;
  font-weight: 700;
}
html.ui-v2 .v2t-compte-rouge { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2t-note { padding: 0 16px 8px; margin: 0; }

/* ------------------------------------------------- grille des deux écrans */
/* Agenda : 2 colonnes (liste de travail | échéances), empilées sous 1024. */
html.ui-v2 .v2t-grille {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}
html.ui-v2 .v2t-colonne { display: grid; gap: 16px; }
@media (max-width: 1023px) {
  html.ui-v2 .v2t-grille { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- lignes */
html.ui-v2 .v2t-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2t-ligne[data-nav] { cursor: pointer; }
html.ui-v2 .v2t-ligne[data-nav]:hover { background: #faf8f3; }
html.ui-v2 .v2t-ligne[data-nav]:hover .v2t-titre { color: var(--cuivre-clair, #a05f27); }
html.ui-v2 .v2t-ligne:focus-visible {
  outline: 2px solid var(--sobria-cuivre);
  outline-offset: -2px;
}
html.ui-v2 .v2t-grandit { flex: 1; min-width: 0; }
html.ui-v2 .v2t-titre {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sobria-nuit);
  overflow-wrap: anywhere;
}
html.ui-v2 .v2t-meta { font-size: 12.5px; color: var(--texte-attenue); }
html.ui-v2 .v2t-rouge { color: #a3392b; }
html.ui-v2 .v2t-lien-fiche {
  color: var(--cuivre-clair, #a05f27);
  font-weight: 600;
  text-decoration: none;
}
html.ui-v2 .v2t-lien-fiche:hover { text-decoration: underline; }
html.ui-v2 .v2t-chevron { color: var(--texte-attenue); display: inline-flex; flex: none; }
html.ui-v2 .v2t-chevron svg { width: 14px; height: 14px; }
html.ui-v2 .v2t-date-retard {
  flex: none;
  min-width: 84px;
  font-size: 13px;
  font-weight: 700;
  color: #a3392b;
  font-variant-numeric: tabular-nums;
}

/* Jeton de type en tête de ligne (icône dans un carré pastel, jamais seule :
   le title la nomme, la ligne la répète en toutes lettres). */
html.ui-v2 .v2t-type {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f3f0e8;
  color: var(--texte-attenue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.ui-v2 .v2t-type svg { width: 18px; height: 18px; }
html.ui-v2 .v2t-type-tache { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2t-type-rdv,
html.ui-v2 .v2t-type-todo { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 .v2t-type-deal_end { background: #f6ede4; color: #a05f27; }
html.ui-v2 .v2t-type-perso { background: #efeeec; color: #48506a; }

/* La case « fait » : cible 44 px, coche qui se révèle au survol. */
html.ui-v2 .v2t-cocher {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--v2-bordure-douce);
  border-radius: 50%;
  background: var(--fond-surface, #fff);
  color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.ui-v2 .v2t-cocher svg { width: 20px; height: 20px; }
html.ui-v2 .v2t-cocher:hover,
html.ui-v2 .v2t-cocher:focus-visible {
  border-color: #3f8f5f;
  background: #eaf5ee;
  color: #3f8f5f;
}
html.ui-v2 .v2t-cocher:focus-visible { outline: 2px solid var(--sobria-cuivre); outline-offset: 2px; }

/* -------------------------------------------------------------- pastilles */
/* Radius 4, pastel — jamais un pictogramme seul, toujours un mot. */
html.ui-v2 .v2t-pastille {
  flex: none;
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
html.ui-v2 .v2t-pastille-vert   { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2t-pastille-ambre  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2t-pastille-bleu   { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 .v2t-pastille-rouge  { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2t-pastille-neutre { background: #efeeec; color: #676d7c; }
html.ui-v2 .v2t-pastille-borde {
  background: transparent;
  border: 1px solid var(--v2-bordure-douce);
  color: var(--texte-attenue);
  font-weight: 500;
}

/* ------------------------------------------------------------ états vides */
html.ui-v2 .v2t-vide {
  padding: 32px 24px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}
html.ui-v2 .v2t-vide-compact { padding: 18px 16px; }
html.ui-v2 .v2t-vide-action { margin-top: 12px; }

/* ------------------------------------------------------- filtres en pilules */
html.ui-v2 .v2t-pilules {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
html.ui-v2 .v2t-pilule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 20px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
html.ui-v2 .v2t-pilule:hover { background: #faf8f3; }
html.ui-v2 .v2t-pilule-active {
  background: var(--sobria-nuit);
  border-color: var(--sobria-nuit);
  color: #fff;
}

/* ------------------------------------------------------------- calendrier */
html.ui-v2 .v2t-carte-cal { padding: 12px; }
html.ui-v2 .v2t-cal-tete {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 2px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  text-align: center;
}
html.ui-v2 .v2t-cal-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
/* Chaque jour est un bouton-carte clair — clavier et clic pour le même prix. */
html.ui-v2 .v2t-jour {
  min-height: 76px;
  padding: 6px 8px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
html.ui-v2 .v2t-jour:hover { border-color: var(--sobria-cuivre); }
html.ui-v2 .v2t-jour:focus-visible { outline: 2px solid var(--sobria-cuivre); outline-offset: 2px; }
html.ui-v2 .v2t-jour-vide {
  background: transparent;
  border: 0;
  cursor: default;
  min-height: 76px;
}
html.ui-v2 .v2t-jour-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-attenue);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
/* Aujourd'hui : le numéro cerclé cuivre. Le jour CHOISI, lui, s'entoure —
   deux marques distinctes, cumulables sans se confondre. */
html.ui-v2 .v2t-jour-aujourdhui .v2t-jour-num {
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 700;
}
html.ui-v2 .v2t-jour-choisi {
  border-color: var(--sobria-cuivre);
  box-shadow: 0 0 0 2px var(--sobria-cuivre) inset;
  background: #fdf9f3;
}
html.ui-v2 .v2t-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
html.ui-v2 .v2t-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
/* Mêmes correspondances de genre que la v1 (style.css .cal-dot), portées au
   thème clair : contrat cuivre, compteur bleu, tâche vert, perso nuit —
   l'urgence (dépassée/urgente) prime en rouge. */
html.ui-v2 .v2t-point-deal_end { background: #b4652f; }
html.ui-v2 .v2t-point-meter_renewal { background: #2f5fa8; }
html.ui-v2 .v2t-point-todo { background: #3f8f5f; }
html.ui-v2 .v2t-point-perso { background: #48506a; }
html.ui-v2 .v2t-point-urgent { background: #a3392b; }
html.ui-v2 .v2t-point-plus,
html.ui-v2 .v2t-pilule .v2t-point { flex: none; }
html.ui-v2 .v2t-point-plus {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--texte-attenue);
}
/* Dans une pilule active (fond nuit), les points restent visibles. */
html.ui-v2 .v2t-pilule-active .v2t-point-perso { background: #c9cfdd; }
html.ui-v2 .v2t-carte-jour { margin-top: 16px; }

/* Étroit : le calendrier reste servi ici sous 768 px (le module mobile ne
   recouvre que #/agenda) — cases plus basses, points plus petits. */
@media (max-width: 760px) {
  html.ui-v2 .v2t-jour,
  html.ui-v2 .v2t-jour-vide { min-height: 52px; padding: 4px 5px; }
  html.ui-v2 .v2t-point { width: 6px; height: 6px; }
  html.ui-v2 .v2t-entete h1 { font-size: 24px; }
}

/* L'heure d'un événement dans la carte du jour (02/09/2026) : chiffres
   tabulaires, cuivre, avant le titre — se lit d'un coup d'œil dans la liste. */
html.ui-v2 .v2t-heure {
  display: inline-block; min-width: 3.4em; margin-right: 6px;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sobria-cuivre);
}