/* ==========================================================================
   Interface v2 — briques MOBILES (maquettes 3-6 validées le 25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-mobile.js. Tout est scopé html.ui-v2 : sans le drapeau
   "sobria-ui-v2", ce fichier ne change RIEN. Les éléments qui remplacent une
   partie d'écran existante (grille des six gestes, bascule de la rangée
   v2f-actions, feuille plein écran) ne s'activent QUE sous 768 px — en
   desktop, la fiche et l'agenda restent au pixel près ce qu'ils étaient.

   Jetons : --fond-surface / --texte / --texte-attenue / --sobria-cuivre /
   --sobria-nuit / --v2-bordure-douce (posée par ui-v2.css). Cartes blanches
   radius 12, boutons radius 8, cibles tactiles ≥ 48 px sur mobile.
   ========================================================================== */

/* ------------------------------------------------------------- communs */
html.ui-v2 .v2mob-ic { width: 24px; height: 24px; flex: none; }
html.ui-v2 .v2mob-ic-16 { width: 16px; height: 16px; }

html.ui-v2 .v2mob-ecran { max-width: 760px; }

html.ui-v2 .v2mob-carte {
  background: var(--fond-surface);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
html.ui-v2 .v2mob-carte h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--texte);
}
html.ui-v2 .v2mob-carte h2 .v2mob-ic-16 { color: var(--sobria-cuivre); }

html.ui-v2 .v2mob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  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;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
html.ui-v2 .v2mob-btn:hover { background: var(--fond-survol); }
html.ui-v2 .v2mob-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Pastilles — délais d'échéance et « Nouveau » (jamais « badge » : le
   garde-fou des assets versionnés surveille ce nom-là). */
html.ui-v2 .v2mob-pastille {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
html.ui-v2 .v2mob-pastille-nouveau { background: var(--sobria-cuivre); color: #fff; }
/* Couleurs mesurées sur fond blanc (même famille que v2f-chip-retard) :
   texte ≥ 4,5:1 sur son fond pastel. */
html.ui-v2 .v2mob-pastille-rouge { background: #f8e9e6; color: #a03328; }
html.ui-v2 .v2mob-pastille-ambre { background: #f6ecd9; color: #7a4f13; }
html.ui-v2 .v2mob-pastille-verte { background: #e6f1e9; color: #2e6b45; }

/* ---------------------------------------- brique 1 : les six gestes */
/* Inertes par défaut : la grille n'existe visuellement QUE sous 768 px.
   Le nœud est bien injecté par le JS à toutes les largeurs (c'est le CSS
   qui décide), donc une rotation d'écran bascule sans re-rendu. */
html.ui-v2 .v2mob-gestes { display: none; }

@media (max-width: 767px) {
  html.ui-v2 .v2mob-gestes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  html.ui-v2 .v2mob-geste {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 8px 4px;
    border: 1px solid var(--v2-bordure-douce);
    border-radius: 12px;
    background: var(--fond-surface);
    color: var(--texte);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  html.ui-v2 .v2mob-geste .v2mob-ic { width: 22px; height: 22px; }
  html.ui-v2 .v2mob-geste:active { background: var(--fond-survol); }
  html.ui-v2 .v2mob-geste[disabled] { opacity: .45; cursor: not-allowed; }

  /* Le bouton « Compte rendu d'appel » — LA primaire cuivre de la fiche
     mobile, pleine largeur, apparue après un appel. */
  html.ui-v2 .v2mob-cr-zone { grid-column: 1 / -1; }
  html.ui-v2 .v2mob-cr-zone:empty { display: none; }
  html.ui-v2 .v2mob-cr-barre {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: var(--sobria-cuivre);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  html.ui-v2 .v2mob-cr-barre:active { background: #b06c33; }

  /* La rangée v2 d'origine s'efface derrière la grille — SAUF son bouton
     « Plus » (tout le menu de la fiche vit derrière lui : devis, mandat,
     espace client, clôture…). Rien n'est retiré du DOM : au-dessus de
     768 px, la rangée complète revient telle quelle. */
  html.ui-v2 .v2mob-prete .v2f-actions > :not(.v2f-ancre-plus) { display: none; }
}

/* ----------------------------- brique 2 : feuille de compte rendu */
html.ui-v2 .v2mob-libelle {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-attenue);
}

html.ui-v2 .v2mob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui-v2 .v2mob-chip {
  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;
  font-family: inherit;
  cursor: pointer;
}
html.ui-v2 .v2mob-chip.actif {
  background: var(--sobria-cuivre);
  border-color: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}

html.ui-v2 .v2mob-dictee-barre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  flex-wrap: wrap;
}
html.ui-v2 .v2mob-dictee-etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #a03328;
}
html.ui-v2 .v2mob-dictee-point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c0392b;
  animation: v2mob-pulsation 1.1s ease-in-out infinite;
}
@keyframes v2mob-pulsation {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}
html.ui-v2 .v2mob-dictee-interim {
  min-height: 18px;
  font-size: 13px;
  font-style: italic;
  color: var(--texte-attenue);
}

/* Feuille plein écran sous 768 px (la modale reste une modale au-dessus). */
@media (max-width: 767px) {
  html.ui-v2 .v2mob-feuille-back { padding: 0; align-items: stretch; }
  html.ui-v2 .v2mob-feuille-back .modal {
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  }
  html.ui-v2 .v2mob-chip { min-height: 48px; }
  html.ui-v2 .v2mob-btn { min-height: 48px; }
}

/* --------------------------------------- brique 3 : écran QR scannés */
html.ui-v2 .v2mob-qr-totaux { display: flex; gap: 12px; align-items: flex-start; }
html.ui-v2 .v2mob-qr-totaux > .v2mob-ic {
  width: 28px;
  height: 28px;
  color: var(--sobria-cuivre);
  margin-top: 2px;
}
html.ui-v2 .v2mob-qr-chiffres { font-weight: 600; font-size: 14.5px; color: var(--texte); }

html.ui-v2 .v2mob-scan {
  background: var(--fond-surface);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
html.ui-v2 .v2mob-scan-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
html.ui-v2 .v2mob-scan-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--texte);
}
html.ui-v2 .v2mob-scan-date {
  font-size: 12px;
  color: var(--texte-attenue);
  white-space: nowrap;
}
html.ui-v2 .v2mob-scan-sous {
  font-size: 13px;
  color: var(--texte-attenue);
  margin: 4px 0 10px;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2mob-scan-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) {
  html.ui-v2 .v2mob-scan-actions .v2mob-btn { flex: 1 1 auto; }
}

/* ------------------------------- brique 4 : agenda mobile en cartes */
html.ui-v2 .v2mob-notif {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 48px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-bordure-douce);
  color: var(--texte);
  text-decoration: none;
  font-size: 13.5px;
}
html.ui-v2 .v2mob-notif:first-of-type { border-top: 0; }
html.ui-v2 .v2mob-notif-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  margin-top: 6px;
  flex: none;
}
html.ui-v2 .v2mob-notif-non-lue .v2mob-notif-point { background: var(--sobria-cuivre); }
html.ui-v2 .v2mob-notif-non-lue .v2mob-notif-corps { font-weight: 600; }
html.ui-v2 .v2mob-notif-date {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--texte-attenue);
}

html.ui-v2 .v2mob-echeance,
html.ui-v2 .v2mob-todo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2mob-echeance:first-of-type,
html.ui-v2 .v2mob-todo:first-of-type { border-top: 0; }
html.ui-v2 .v2mob-echeance { cursor: pointer; }
html.ui-v2 .v2mob-echeance-ic {
  display: inline-flex;
  color: var(--texte-attenue);
  flex: none;
}
html.ui-v2 .v2mob-echeance-corps { flex: 1; min-width: 0; }
html.ui-v2 .v2mob-echeance-titre { font-weight: 600; font-size: 14px; color: var(--texte); }
html.ui-v2 .v2mob-echeance-sous {
  font-size: 12.5px;
  color: var(--texte-attenue);
  overflow-wrap: anywhere;
}

/* Entrée « Terrain » ajoutée à la feuille « Plus » (le lien hérite du style
   .v2-feuille-plus de ui-v2.css — seule l'icône a besoin d'une taille). */
html.ui-v2 .v2-feuille-plus a .v2mob-ic-16 { color: var(--sobria-cuivre); }

/* « Qui s'en charge » sur un rendez-vous (06/09/2026) — des cases, pas un
   menu : Adrien pose des rendez-vous « à deux ou à trois, groupés ». Une
   ligne par nom, 44 px de haut (la règle tactile du dépôt, l.151), libellé
   compris dans la cible : sur un trottoir, on ne vise pas une case de 13 px.
   Aucune media query : la feuille RDV sert aussi sur le Mac. */
html.ui-v2 .v2mob-resp {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 8px 10px 10px;
  margin: 12px 0 0;
}
html.ui-v2 .v2mob-resp legend {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texte-attenue);
  padding: 0 4px;
}
html.ui-v2 .v2mob-resp-case {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  color: var(--texte);
  cursor: pointer;
  /* La règle générale des formulaires met les <label> en CAPITALES
     (style.css:38) — bon pour « OBJET », faux pour un nom : mesuré au
     navigateur, les cases affichaient « ADRIEN » et « BARNABÉ ». Un nom
     s'écrit comme son porteur l'écrit ; le dépôt a déjà payé « adrien » au
     lieu d'« Adrien » dans une signature. */
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}
html.ui-v2 .v2mob-resp-case input { width: 20px; height: 20px; flex: none; }
html.ui-v2 .v2mob-resp .hint { margin: 4px 0 0; font-size: 12.5px; }