/* ═══════════════════════════════════════════════════════════════════════
   QG — les composants propres aux pages du QG, écrits avec les jetons de design.css.
   Règle : jamais une couleur en dur, toujours une variable de design.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── l'en-tête de page : grand titre, sous-titre, actions (façon iOS « Large Title ») ── */
.page-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-entete .titre-page, .page-entete h1 { margin: 0; }
.page-entete .sous-titre { margin: 4px 0 0; }
.page-entete .barre-actions { margin-left: auto; }
.page-entete .lien-retour { margin-bottom: 6px; }

/* ── petits objets ── */
.badge { font-size: .7rem; }
.liste-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; }
.liste-points li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.liste-points li.erreur { color: var(--alerte); }
.mini-stats { display: flex; gap: 16px; margin-top: 12px; font-size: .85rem; color: var(--encre-pale); flex-wrap: wrap; }
.mini-stats b { color: var(--encre); font-size: 1rem; margin-left: 3px; font-variant-numeric: tabular-nums; }
.route { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.route li { display: flex; align-items: center; gap: 10px; }
.etat { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.etat.fait { background: var(--vert); color: #fff; }
.etat.avenir { background: transparent; border: 1.5px dashed var(--bordure-forte); }

/* ── formulaires en ligne des modules ── */
.form-mission { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; align-items: center; }
.form-mission .champ { flex: 1 1 190px; width: auto; }
.form-mission .champ-petit { flex: 0 1 150px; }
.form-mission .champ-mdp { flex: 0 1 320px; }
.champ-recherche { flex: 0 1 260px; max-width: 280px; margin-left: auto; min-height: 38px; }
.details-grille { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .details-grille { grid-template-columns: 1fr 1fr; } }
.details-grille-3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.details-grille label, .bloc-notes { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--encre-douce); }
.details-grille .champ, .bloc-notes .champ { width: 100%; font-weight: 400; }
.bloc-notes { margin-top: 12px; }
.case-detail { align-self: center; padding-bottom: 8px; }
.champ-fichier { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.champ-fichier input { max-width: 60%; font-size: .85rem; }

/* ── la vigie et les listes de l'accueil ── */
.vigie { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vigie li a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-s); text-decoration: none;
  color: inherit; background: var(--voile); min-width: 0; transition: background .14s ease, transform .12s var(--ease);
}
.vigie li a:hover { background: var(--accent-fond); text-decoration: none; }
.vigie li a:active { transform: scale(.995); }
.vigie li a b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.012em; }
.vigie li a .note { margin: 0 0 0 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.vigie li a .badge-date { flex: none; min-width: 78px; justify-content: center; }
.vigie-fronts li a { background: transparent; padding: 6px 0; }
.vigie-fronts li a:hover { background: transparent; text-decoration: underline; }
.vigie-fronts .note { margin-left: auto; }
.semaine { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.semaine li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 8px 10px; border-radius: var(--r-s); font-size: .95rem; transition: background .12s; }
.semaine li:hover { background: var(--voile); }
.semaine li b { font-weight: 600; }
@media (max-width: 640px) {
  .vigie li a { flex-wrap: wrap; }
  .vigie li a .note { margin-left: 0; width: 100%; text-align: left; max-width: none; white-space: normal; }
}

/* ── l'accueil en blocs (widgets) et son mode « Personnaliser » ── */
.accueil-pied { margin: 18px 0 0; text-align: right; }
.accueil-pied .lien-discret { background: none; border: 0; cursor: pointer; font: inherit; font-size: .88rem; }
.accueil-outil { position: absolute; top: 4px; right: 0; width: 36px; height: 36px; font-size: 1rem; background: var(--piste); }
.widget-mode { position: sticky; top: calc(var(--hauteur-entete) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 12px 16px; background: var(--encre); color: var(--fond); border-radius: var(--r-m); box-shadow: var(--ombre-m); }
html[data-mode="sombre"] .widget-mode { background: #f5f5f7; color: #111; }
.widget-mode .aide { color: inherit; opacity: .8; margin: 0; }
.widget-mode-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.widget-mode .bouton-petit { background: rgba(255, 255, 255, .16); color: inherit; }
html[data-mode="sombre"] .widget-mode .bouton-petit { background: rgba(0, 0, 0, .08); }
.widget-mode .bouton-petit.bouton-principal { background: var(--fond); color: var(--encre); }
html[data-mode="sombre"] .widget-mode .bouton-petit.bouton-principal { background: #111; color: #f5f5f7; }
.widgets-edition .widget-edition { position: relative; margin: 0 0 14px; border: 1.5px dashed var(--bordure-forte); border-radius: var(--r-m); background: var(--voile); transition: box-shadow .15s, border-color .15s; }
.widgets-edition .widget-edition:hover { border-color: var(--accent); }
.widget-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px dashed var(--bordure); cursor: grab; }
.widget-barre:active { cursor: grabbing; }
.widget-poignee { color: var(--encre-pale); font-weight: 700; letter-spacing: -2px; user-select: none; }
.widget-nom { font-size: .92rem; font-weight: 600; }
.widget-options { display: flex; flex-wrap: wrap; gap: 6px; }
.widget-options .puce { font-size: .78rem; padding: 4px 10px; min-height: 28px; cursor: pointer; background: var(--carte); border: 1px solid var(--bordure); }
.widget-options .puce.actif { background: var(--accent); color: var(--accent-contraste); border-color: var(--accent); box-shadow: none; }
.widget-boutons { margin-left: auto; display: flex; gap: 6px; }
.widget-boutons .bouton[disabled] { opacity: .35; cursor: default; }
.widget-corps { padding: 12px 12px 2px; pointer-events: none; opacity: .92; }
.widget-corps .tuiles, .widget-corps .actions-rapides { margin-bottom: 12px; }
.widget-corps .accueil-entete { margin-bottom: 8px; }
.widget-vide { margin: 0 0 12px; font-style: italic; }
.widget-glisse { opacity: .45; }
.widget-cible-haut { box-shadow: 0 -3px 0 0 var(--accent); }
.widget-cible-bas { box-shadow: 0 3px 0 0 var(--accent); }
.widget-ajout { border-style: dashed; }
.widget-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.widget-liste li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--separateur); }
.widget-liste li:last-child { border-bottom: 0; }
.widget-liste li > span { display: grid; gap: 2px; }
.widget-liste li .bouton { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .widget-boutons { margin-left: 0; width: 100%; }
  .widget-boutons .bouton { flex: 1; }
  .widget-mode { position: static; }
}

/* ── les missions (chantiers) ── */
.liste-missions { display: flex; flex-direction: column; gap: 14px; }
.mission.terminee { opacity: .7; }
.mission.surbrillance { box-shadow: 0 0 0 3px var(--accent-voile), var(--ombre-m); }
.mission-haut { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mission-montant { font-size: 1.2rem; font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mission-montant small { display: block; font-size: .78rem; font-weight: 500; color: var(--encre-pale); letter-spacing: 0; }
.mission-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mission-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.mission-statut { width: auto; min-height: 36px; padding: 6px 32px 6px 14px; font-size: .875rem; border-radius: 999px; }
.mission-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--separateur); }
.taches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tache { display: grid; align-items: center; }
.tache-texte { min-height: 38px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; font: inherit; font-size: .95rem; color: var(--encre); min-width: 0; }
.tache-texte:hover, .tache-texte:focus { border-color: var(--bordure); background: var(--carte); outline: none; }
.tache.faite .tache-texte { text-decoration: line-through; color: var(--encre-pale); }
.tache-date { min-height: 36px; padding: 4px 10px; font-size: .8125rem; color: var(--encre-douce); width: 150px; }
.tache-ajout { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tache-ajout .champ { flex: 1 1 220px; width: auto; }
.details-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; flex-wrap: wrap; }
.barre-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.carte-crm .mission-haut { align-items: center; gap: 14px; }
.carte-crm .bouton-vert { white-space: nowrap; }
.liste-signes { list-style: none; margin: 0; padding: 0; }
.liste-signes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--separateur); font-size: .95rem; }
.liste-signes li .note { flex: 1 1 160px; margin: 0; }
.liste-signes li.inactif { opacity: .55; }
.liens-mission { margin: 6px 0 0; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Argent : période, graphiques, tableaux, factures, dépenses ── */
.periode-barre { align-items: center; gap: 8px; }
.periode-barre .puce { white-space: nowrap; }
.periode-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.periode-nav b { min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; }
.periode-libelle { margin-left: auto; color: var(--encre-douce); font-weight: 600; }
.periode-barre > label.bouton { white-space: nowrap; }
.graph-libelles { display: grid; }
@media (max-width: 640px) { .graph-libelles span:nth-child(even) { visibility: hidden; } }
.budget-barres .repartition-ligne { grid-template-columns: 1fr 2fr auto auto; }
.budget-barres .barre-depasse { background: var(--rouge) !important; }
.fiche-facture .fiche-entete { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.fiche-facture .fiche-numero { font-weight: 700; display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.fiche-facture h3 { margin: 0 0 4px; font-size: 1.2rem; letter-spacing: -0.02em; }
.fiche-facture .fiche-total { text-align: right; }
.fiche-facture .fiche-total b { display: block; font-size: 1.7rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-family: var(--police-titres); }
.fiche-facture .donnees { margin: 10px 0 14px; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lignes-facture { margin: 14px 0; border: 1px solid var(--bordure); border-radius: var(--r-s); padding: 10px; background: var(--voile); }
.ligne-facture { display: grid; grid-template-columns: 1fr 64px 100px 92px 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.ligne-facture .champ { min-height: 38px; padding: 6px 10px; }
.ligne-facture .num { text-align: right; }
.ligne-entete { margin-bottom: 4px; padding: 0 4px; }
.ligne-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ligne-total { font-variant-numeric: tabular-nums; font-size: .92rem; }
@media (max-width: 640px) { .ligne-facture { grid-template-columns: 1fr 52px 80px 28px; } .ligne-facture .ligne-total, .ligne-entete span:nth-child(4) { display: none; } }
.liste-depenses { list-style: none; margin: 0; padding: 0; }
.liste-depenses li { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--separateur); cursor: pointer; border-radius: var(--r-xs); transition: background .12s; }
.liste-depenses li:last-child { border-bottom: 0; }
.liste-depenses li:hover { background: var(--voile); }
.depense-date { color: var(--encre-douce); font-size: .85rem; font-variant-numeric: tabular-nums; }
.depense-corps { display: grid; min-width: 0; }
.depense-corps b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depense-badges { display: flex; gap: 4px; }
.depense-montant { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
/* téléphone : la liste des factures devient des cartes */
@media (max-width: 640px) {
  .tableau-factures thead { display: none; }
  .tableau-factures tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--separateur); }
  .tableau-factures td { display: block; padding: 0; border: 0; }
  .tableau-factures td:nth-child(1) { order: 1; font-size: .8rem; color: var(--encre-douce); }
  .tableau-factures td:nth-child(2) { order: 2; font-size: .8rem; color: var(--encre-douce); text-align: right; }
  .tableau-factures td:nth-child(3) { order: 3; grid-column: 1 / -1; }
  .tableau-factures td:nth-child(5) { order: 4; }
  .tableau-factures td:nth-child(4) { order: 5; text-align: right; }
  .panneau-tableau .tableau-defile { overflow-x: visible; }
  .periode-barre { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .periode-nav { margin-left: 0; }
}

/* ── Projets, feuille de route, chantiers précis ── */
.liste-route { list-style: none; margin: 0; padding: 0; }
.route-item-qg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 8px; border-bottom: 1px solid var(--separateur); cursor: pointer; border-radius: var(--r-xs); transition: background .12s; }
.route-item-qg:last-child { border-bottom: 0; }
.route-item-qg:hover { background: var(--voile); }
.route-item-qg > b { flex: 1 1 200px; min-width: 0; font-weight: 600; }
.route-item-qg.statut-fait > b, .route-item-qg.statut-abandonne > b { color: var(--encre-douce); text-decoration: line-through; }
.route-actions { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.route-detail { flex-basis: 100%; }
.prio { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-size: .74rem; font-weight: 800; background: var(--attention-fond); color: var(--attention); }
.prio-1 { background: var(--alerte-fond); color: var(--alerte); }
.prio-3 { background: var(--piste); color: var(--encre-pale); }
.jalon-date { font-variant-numeric: tabular-nums; color: var(--encre-douce); min-width: 84px; font-size: .9rem; }
.journal-produit li, .journal-chantier li { grid-template-columns: max-content 1fr auto; cursor: pointer; }
.journal-chantier li { cursor: default; }
.liste-front { margin-bottom: 12px; list-style: none; padding: 0; }
.liste-front li { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; font-size: .93rem; padding: 4px 0; }
.panneau-front { border-top: 4px solid var(--front, var(--bordure)); }
.liste-chantiers .ligne-chantier { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: center; text-decoration: none; color: inherit; width: 100%; }
.liste-chantiers .ligne-chantier .note { grid-column: 1; }
.liste-chantiers .ligne-chantier b { grid-column: 1; }
.liste-chantiers .ligne-chantier .progression-mini { grid-column: 2; grid-row: 1 / span 2; width: 70px; height: 6px; background: var(--piste); border-radius: 999px; overflow: hidden; display: block; }
.liste-chantiers .ligne-chantier .progression-mini i { display: block; height: 100%; background: var(--accent-vif); border-radius: 999px; }
.liste-chantiers .ligne-chantier .badge-date { grid-column: 3; grid-row: 1 / span 2; }
.temps-barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 8px; }
.temps-manuel { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 240px; }
.temps-manuel .champ { min-height: 36px; }
.temps-manuel .champ-petit { width: 80px; }
.temps-manuel .champ:not(.champ-petit) { flex: 1; min-width: 140px; }
.liste-temps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; font-size: .88rem; }
.liste-temps li { display: grid; grid-template-columns: max-content max-content 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--separateur); }
.chrono-badge { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .liste-front li { grid-template-columns: 1fr; gap: 2px; } .grille-fronts { grid-template-columns: 1fr; } }

/* ── l'agenda unique ── */
.barre-agenda { align-items: center; }
.barre-agenda .barre-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.barre-agenda .periode-nav { margin-left: 0; }
.legende-agenda { margin-left: auto; display: inline-flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; align-items: center; color: var(--encre-douce); }
.legende-agenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.agenda {
  background: var(--carte); border: 1px solid var(--bordure-carte); border-radius: var(--r-m);
  overflow: hidden; box-shadow: var(--ombre-s);
}
.agenda-entetes { display: grid; grid-template-columns: 52px repeat(var(--colonnes, 7), 1fr); border-bottom: 1px solid var(--separateur); }
.agenda-entete {
  padding: 10px 4px 8px; text-align: center; font-size: .68rem; color: var(--encre-pale);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.agenda-entete b { font-size: 1.15rem; letter-spacing: 0; color: var(--encre); font-weight: 600; }
.agenda-entete-auj b {
  background: var(--accent-vif); color: #fff; border-radius: 999px;
  min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
}
.agenda-corps { display: grid; grid-template-columns: 52px repeat(var(--colonnes, 7), 1fr); position: relative; }
.agenda-vue-jour .agenda-corps { grid-template-columns: 52px 1fr; }
.agenda-heures { position: relative; }
.agenda-heures span { position: absolute; right: 9px; transform: translateY(-.6em); font-size: .66rem; color: var(--encre-pale); font-variant-numeric: tabular-nums; }
.agenda-jour {
  position: relative; border-left: 1px solid var(--separateur); cursor: pointer;
  background: repeating-linear-gradient(to bottom, transparent 0 55px, var(--separateur) 55px 56px);
}
.agenda-jour .rdv { min-width: 0; }
.agenda-aujourdhui { background-color: var(--accent-fond); }
.agenda-toute-journee { display: grid; grid-template-columns: 52px repeat(var(--colonnes, 7), 1fr); border-bottom: 1px solid var(--separateur); min-height: 30px; background: var(--voile); }
.agenda-vue-jour .agenda-toute-journee { grid-template-columns: 52px 1fr; }
.agenda-toute-journee .agenda-entete { padding: 6px 4px; font-size: .58rem; justify-content: center; }
.toute-journee-jour { border-left: 1px solid var(--separateur); padding: 3px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.rdv {
  position: absolute; left: 3px; right: 3px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 4px 8px; border: 0; border-left: 3px solid var(--rdv-couleur, var(--accent-vif)); border-radius: 8px;
  background: var(--rdv-fond, var(--accent-fond)); color: inherit; font: inherit; text-align: left;
  cursor: pointer; overflow: hidden; transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.rdv:hover { transform: translateY(-1px); box-shadow: var(--ombre-m); z-index: 3; }
.rdv-heure { font-size: .66rem; font-weight: 700; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.rdv-nom { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rdv-fait { background: var(--succes-fond); border-left-color: var(--vert); }
.rdv-annule { background: var(--voile); border-left-color: var(--encre-pale); opacity: .55; }
.rdv-annule .rdv-nom { text-decoration: line-through; }
.rdv-coche { position: absolute; top: 4px; right: 7px; color: var(--succes); font-weight: 700; font-size: .8rem; }
.rdv-court .rdv-heure { display: none; }
.trait-maintenant { position: absolute; left: 0; right: 0; height: 2px; background: var(--rouge); z-index: 4; pointer-events: none; }
.trait-maintenant::before { content: ''; position: absolute; left: -1px; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: var(--rouge); }
.rang-statut { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rang-statut .puce.actif { font-weight: 600; }
.bande-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; }
.bande-jour {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 8px 2px 9px; border: 0; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--encre-pale); font: inherit;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.bande-jour b { font-size: 1.15rem; letter-spacing: 0; color: var(--encre); font-weight: 600; }
.bande-jour:hover { background: var(--voile); }
.bande-jour.actif { background: var(--accent-vif); color: #fff; }
.bande-jour.actif b { color: #fff; }
.bande-auj:not(.actif) b { color: var(--accent); font-weight: 700; }
.agenda-mois {
  background: var(--carte); border: 1px solid var(--bordure-carte); border-radius: var(--r-m);
  overflow: hidden; box-shadow: var(--ombre-s); margin-bottom: 16px;
}
.mois-entetes { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--separateur); }
.mois-entetes span { padding: 9px 4px; text-align: center; font-size: .66rem; font-weight: 650; color: var(--encre-pale); text-transform: uppercase; letter-spacing: .08em; }
.mois-grille { display: grid; grid-template-columns: repeat(7, 1fr); }
.mois-jour {
  min-height: 98px; padding: 6px; cursor: pointer; position: relative;
  border-left: 1px solid var(--separateur); border-top: 1px solid var(--separateur);
  display: flex; flex-direction: column; gap: 3px; align-items: stretch;
  transition: background .15s var(--ease);
}
.mois-jour:nth-child(7n+1) { border-left: 0; }
.mois-jour:nth-child(-n+7) { border-top: 0; }
.mois-jour:hover { background: var(--voile); }
.mois-hors { background: var(--fond); }
.mois-hors .mois-num { color: var(--encre-tres-pale); }
.mois-choisi { box-shadow: inset 0 0 0 2px var(--accent-vif); }
.mois-num {
  font-size: .82rem; font-weight: 600; color: var(--encre-douce);
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.mois-auj { background: var(--accent-vif); color: #fff; font-weight: 700; }
.mois-evt {
  display: flex; gap: 5px; align-items: baseline; width: 100%; max-width: 100%;
  border: 0; border-radius: 6px; padding: 2px 6px; cursor: pointer;
  background: var(--rdv-fond, var(--accent-fond)); color: inherit; font: inherit; font-size: .7rem;
  overflow: hidden; white-space: nowrap; text-align: left;
}
.mois-evt b { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.mois-evt span { overflow: hidden; text-overflow: ellipsis; }
.mois-evt:hover { filter: brightness(.96); }
.mois-evt-fait { background: var(--succes-fond); }
.mois-evt-annule { opacity: .5; text-decoration: line-through; }
.mois-plus { font-size: .68rem; color: var(--encre-pale); padding-left: 6px; }
.mois-points { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
.mois-points i { width: 5px; height: 5px; border-radius: 999px; background: var(--accent-vif); }
.panneau-jour-choisi { margin-top: 2px; }
.mois-journal { margin: 18px 0 8px; font-size: .95rem; color: var(--encre-pale); text-transform: capitalize; }
.liste-jour { list-style: none; margin: 0; padding: 0; }
.liste-jour li { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--separateur); flex-wrap: wrap; }
.liste-jour li:last-child { border-bottom: 0; }
.liste-jour li b { flex: 1 1 200px; min-width: 0; }
.liste-jour .ligne-rdv { cursor: pointer; border-radius: var(--r-xs); transition: background .12s ease; }
.liste-jour .ligne-rdv:hover { background: var(--accent-fond); }
.rdv-l-heure { font-variant-numeric: tabular-nums; min-width: 48px; }
.ligne-rdv-fait { opacity: .55; }
.ligne-rdv-avenir .rdv-l-heure { color: var(--accent); }
@media (max-width: 720px) {
  .agenda-entete { font-size: .62rem; }
  .rdv-heure { display: none; }
  .mois-jour { min-height: 54px; padding: 4px; align-items: center; }
  .mois-num { width: 32px; height: 32px; font-size: .95rem; }
  .mois-hors { background: transparent; }
  .agenda-mois, .agenda { border-left: 0; border-right: 0; border-radius: 0; margin-left: -16px; margin-right: -16px; }
  .legende-agenda { display: none; }
  .mois-jour .mois-evt { display: none; }
  .agenda-page .filtres { flex-wrap: wrap; }
  .agenda-toute-journee .agenda-entete { font-size: .55rem; }
}

/* ── la forme ── */
.graphique-forme { position: relative; }
.graph-y { position: absolute; left: 0; top: 0; height: 170px; width: 40px; font-size: .72rem; color: var(--encre-pale); }
.graph-y span { position: absolute; left: 0; transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.graphique-poids .ligne-lisse { fill: none; stroke: var(--accent-vif); vector-effect: non-scaling-stroke; stroke-width: 2.5px; stroke-linejoin: round; stroke-linecap: round; }
.graphique-poids .pt-poids { fill: var(--encre-douce); }
.ligne-cible { stroke: var(--orange); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 5 4; }
.graphique-pas .barre-pas { fill: var(--encre-tres-pale); }
.graphique-pas .barre-ok { fill: var(--vert); }
.legende-lisse { background: var(--accent-vif); }
.legende-point { background: var(--encre-douce); }
.legende-cible { background: var(--orange); }
@media (max-width: 640px) { .graphique-poids .graph-libelles span:nth-child(even) { visibility: hidden; } }

/* ── Banque : l'onglet accueille les écrans de pointage ── */
#zone-banque .page-etroite { max-width: none; }
#zone-banque .barre-ecran { margin: 0 0 10px; }
#zone-banque h1 { font-size: 1.4rem; margin: 6px 0 8px; }
#zone-banque .intro { color: var(--encre-douce); }
#zone-banque .zone-depot { cursor: pointer; }
.liste-ops { display: flex; flex-direction: column; gap: 10px; }
.op-banque { background: var(--carte); border: 1px solid var(--bordure-carte); border-radius: var(--r-m); padding: 12px 16px; box-shadow: var(--ombre-s); }
.op-famille { border-left: 4px solid var(--accent-vif); }
.op-famille .famille-detail { margin-top: 10px; border-top: 1px dashed var(--separateur); padding-top: 10px; display: grid; gap: 8px; }
.op-famille .op-lien { font-weight: 500; }
.op-tete { display: flex; align-items: baseline; gap: 10px; }
.op-date { font-size: .8rem; color: var(--encre-pale); white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-libelle { flex: 1; font-size: .92rem; overflow-wrap: anywhere; font-weight: 500; }
.op-montant { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.op-credit { color: var(--succes); }
.op-corps { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--separateur); flex-wrap: wrap; }
.op-lien { font-size: .85rem; color: var(--encre-douce); flex: 1 1 260px; }
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .84rem; font-weight: 550; color: var(--encre-douce);
  background: var(--voile); border: 1px solid var(--bordure);
  border-radius: 999px; padding: 7px 14px; min-height: 36px; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s var(--ease);
}
.chip:hover { color: var(--encre); border-color: var(--bordure-forte); }
.chip:active { transform: scale(.97); }
.chip[data-agir] { border-style: dashed; }
.chip-actif, .chip-actif:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.chip-ok.chip-actif, .chip-ok.chip-actif:hover { background: var(--vert); border-color: var(--vert); color: #fff; }
.chip-non.chip-actif, .chip-non.chip-actif:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.chip button { border: 0; background: none; color: var(--encre-pale); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.chip button:hover { background: var(--alerte-fond); color: var(--alerte); }
.deja-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--separateur); font-size: .85rem; flex-wrap: wrap; }
.deja-ligne:last-child { border-bottom: 0; }
.deja-etat { display: inline-flex; align-items: center; gap: 8px; color: var(--encre-pale); white-space: nowrap; }
.barre-appliquer {
  position: sticky; bottom: 12px; z-index: 5;
  flex-direction: column; align-items: stretch; gap: 6px;
  background: var(--entete-fond);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--bordure); border-radius: var(--r-m);
  padding: 12px 14px; box-shadow: var(--ombre-m);
}
.barre-appliquer .aide { text-align: center; margin: 0; }
@media (max-width: 780px) { .barre-appliquer { bottom: calc(var(--hauteur-barre-mobile) + 10px + env(safe-area-inset-bottom)); } }
.bilan-import { margin: 8px 0 12px; padding-left: 20px; }
.bilan-import li { margin: 5px 0; }
.bilan-import .bilan-alerte { background: var(--alerte-fond); border-radius: var(--r-s); padding: 8px 10px; list-style: none; margin-left: -18px; }
.bilan-import .bilan-alerte .bouton { margin-left: 8px; vertical-align: middle; }
.op-regle { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .82rem; color: var(--encre-douce); cursor: pointer; }
.op-regle input { accent-color: var(--accent); }
.op-regle-cachee { display: none; }
.liste-pointages { display: flex; flex-direction: column; gap: 8px; }
.ligne-pointage { display: flex; align-items: center; gap: 10px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--r-m); padding: 10px 14px; box-shadow: var(--ombre-s); }
.lp-icone { flex: 0 0 auto; }
.lp-date { flex: 0 0 auto; font-size: .8rem; color: var(--encre-pale); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-libelle { font-size: .88rem; overflow-wrap: anywhere; }
.lp-cible { font-size: .8rem; color: var(--encre-pale); overflow-wrap: anywhere; }
.lp-montant { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.liste-regles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.regle-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--r-m); padding: 9px 14px; font-size: .88rem; }
.surveiller-liste { margin: 8px 0 4px; }
.surveiller-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--separateur); font-size: .85rem; }
.surveiller-ligne:last-child { border-bottom: 0; }
.pastille-banque { display: inline-block; color: var(--succes); font-size: .72rem; font-weight: 700; margin-right: 4px; cursor: default; vertical-align: middle; }
.certif { border-radius: var(--r-s); padding: 11px 15px; margin: 4px 0 14px; font-size: .88rem; }
.certif-ok { background: var(--succes-fond); }
.certif-doute { background: var(--attention-fond); }
.libelle-doute { color: var(--attention); cursor: help; }
.certif-doute .bouton-petit { margin-top: 8px; }
.flux-synthese { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; margin: 4px 0 6px; font-size: .95rem; }
.flux-entre b { color: var(--succes); }
.flux-sort b { color: var(--encre); }
.edition-resume { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: var(--r-s); background: var(--accent-fond); font-size: .85rem; flex-wrap: wrap; }
.apercu-lu { max-height: 55vh; overflow: auto; font-size: .72rem; line-height: 1.5; background: var(--voile); border-radius: var(--r-s); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); }
.liste-lots { display: flex; flex-direction: column; gap: 10px; }
.liste-lots .bouton { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; border-radius: var(--r-s); }
.liste-lots .aide { margin: 0; font-weight: 400; }
.a-traiter-lignes { display: grid; gap: 10px; }
.a-traiter-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filtres-tri { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.filtres-tri .champ { width: auto; flex: 1 1 220px; max-width: 360px; }
.filtres-tri select.champ { flex: 0 1 auto; }
.barre-plus { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px 0 4px; }
@media (max-width: 780px) { .ligne-pointage { flex-wrap: wrap; } .ligne-pointage .bouton-petit { margin-left: auto; } }

/* ── Mon argent (budget) ── */
.budget-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.comptes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.compte-carte { background: var(--carte); border: 1px solid var(--bordure-carte); border-radius: var(--r-m); padding: 16px 18px; box-shadow: var(--ombre-s); position: relative; overflow: hidden; }
.compte-carte::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--compte-couleur, var(--accent-vif)); }
.compte-carte.compte-total { background: var(--encre); color: #fff; border-color: var(--encre); }
html[data-mode="sombre"] .compte-carte.compte-total { background: #f5f5f7; color: #111; }
.compte-carte.compte-total::before { background: var(--accent-vif); }
.compte-carte .compte-nom { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.compte-carte .compte-nom .note { font-weight: 400; }
.compte-carte .compte-solde { font-family: var(--police-titres); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.035em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.compte-carte .compte-connu { font-size: .8rem; color: var(--encre-douce); }
.compte-total .compte-connu, .compte-total .note { color: rgba(255, 255, 255, .72); }
html[data-mode="sombre"] .compte-total .compte-connu, html[data-mode="sombre"] .compte-total .note { color: rgba(0, 0, 0, .6); }
.compte-carte .compte-actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.compte-carte.compte-inconnu .compte-solde { color: var(--encre-pale); font-size: 1.1rem; }
.solde-negatif { color: var(--alerte); }
.compte-total .solde-negatif { color: #ff8a80; }
.reste-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.reste-carte { border: 1px solid var(--bordure-carte); border-radius: var(--r-m); padding: 16px 18px; background: var(--carte); box-shadow: var(--ombre-s); }
.reste-carte .tuile-libelle { display: block; }
.reste-carte .reste-valeur { display: block; font-family: var(--police-titres); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.035em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.reste-carte .tuile-detail { display: block; }
.courbe-solde { width: 100%; height: 200px; display: block; overflow: visible; }
.courbe-solde .courbe-attendu { fill: none; stroke: var(--accent-vif); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.courbe-solde .courbe-prudent { fill: none; stroke: var(--encre-pale); stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.courbe-solde .courbe-aire { fill: var(--accent-vif); opacity: .08; }
.courbe-solde .courbe-zero { stroke: var(--rouge); stroke-width: .8; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.courbe-solde .courbe-min { fill: var(--rouge); }
.courbe-solde .courbe-grille { stroke: var(--bordure); stroke-width: .5; vector-effect: non-scaling-stroke; }
.courbe-solde .courbe-texte { font-size: 9px; fill: var(--encre-douce); }
.echeancier { list-style: none; margin: 0; padding: 0; }
.echeancier li { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--separateur); }
.echeancier li:first-child { border-top: 0; }
.echeancier .ech-date { font-variant-numeric: tabular-nums; color: var(--encre-douce); font-size: .85rem; }
.echeancier .ech-date b { display: block; color: var(--encre); font-size: .95rem; }
.echeancier .ech-corps { min-width: 0; }
.echeancier .ech-corps b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.echeancier .ech-montant { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.echeancier .ech-montant.entree { color: var(--succes); }
.echeancier .ech-montant.attendu { color: var(--encre-douce); font-weight: 600; }
.echeancier .ech-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.echeancier-jour { margin: 16px 0 4px; }
.bilan-mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.bilan-mois .mini { border: 1px solid var(--bordure); border-radius: var(--r-s); padding: 12px 14px; background: var(--carte); }
.bilan-mois .mini b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.encaisse-recap { background: var(--voile); border-radius: var(--r-s); padding: 12px 14px; font-size: .9rem; margin-top: 8px; }
.encaisse-recap b { font-variant-numeric: tabular-nums; }
.compte-releve select { display: inline-block; width: auto; min-width: 140px; margin: 0 4px; vertical-align: middle; }
@media (max-width: 640px) { .echeancier li { grid-template-columns: 62px 1fr auto; } .compte-carte .compte-solde { font-size: 1.5rem; } }

/* Pour être à jour */
.etapes-ajour { border-color: var(--accent-voile); }
.liste-etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.liste-etapes li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--separateur); }
.liste-etapes li:first-child { border-top: 0; }
.liste-etapes li.etape-premiere { background: var(--accent-fond); border-radius: var(--r-s); padding: 12px 10px; }
.liste-etapes .etape-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-contraste); font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.liste-etapes li:not(.etape-premiere) .etape-num { background: var(--piste); color: var(--encre-douce); }
.liste-etapes .etape-corps { min-width: 0; }
.liste-etapes .etape-corps b { display: block; letter-spacing: -0.012em; }
.liste-etapes .etape-corps .note { display: block; }
.ajour-ok { margin-bottom: 14px; }
@media (max-width: 640px) { .liste-etapes li { grid-template-columns: 26px 1fr; } .liste-etapes li > .bouton, .liste-etapes li > a.bouton { grid-column: 2; justify-self: start; } }

/* tiers, dettes */
.liste-dettes li { align-items: center; }


/* ═══════════ ajouts de la vague du 6 septembre (modules) ═══════════ */

/* ── accueil ── */
/* ── accueil (refonte 2026-09-06) : vigie actionnable, pastilles, tuile Journée, barre empilée, synchro, feuille de choix, mobile ── */
.vigie li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vigie li > a { flex: 1 1 auto; min-width: 0; }
.vigie-actions { display: flex; gap: 4px; flex: none; }
.vigie-actions .bouton { white-space: nowrap; }
.vigie .pastille-front { width: 24px; height: 24px; font-size: .68rem; border-radius: 7px; }
.pastille-type .icone { width: 13px; height: 13px; }
.vigie-type { color: var(--encre-pale); flex: none; }
.vigie-groupe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 10px 4px 2px; font-size: .85rem; font-weight: 600; color: var(--encre-douce); }
.vigie-groupe .note { font-weight: 400; margin: 0; }
.vigie-groupe-retard { color: var(--alerte); }
.vigie-sommeil { margin: 10px 4px 0; }
/* la tuile « Aujourd'hui » : anneau + lignes */
.tuile-journee { cursor: pointer; }
.journee-corps { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.journee-lignes { display: grid; gap: 2px; min-width: 0; }
.journee-titre { font-family: var(--police-titres); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.journee-reste { font-size: 1.25rem; }
.tuile .tuile-lien + .tuile-detail { display: block; }
.tuile-valeur small { font-size: .8rem; font-weight: 600; color: var(--encre-pale); letter-spacing: 0; }
/* la barre empilée (encaissé / attendu / en retard) */
.barre-empilee { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--piste); margin: 8px 0 6px; }
.barre-empilee i { display: block; height: 100%; }
.barre-empilee .seg-ok { background: var(--vert); }
.barre-empilee .seg-attente { background: var(--accent-vif); }
.barre-empilee .seg-alerte { background: var(--rouge); }
/* l'état de la sauvegarde en ligne en une pastille */
.etat-synchro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; font-size: .875rem; color: var(--encre-douce); }
.synchro-point { width: 9px; height: 9px; border-radius: 50%; background: var(--vert); flex: none; box-shadow: 0 0 0 3px var(--succes-fond); }
.etat-synchro-attente .synchro-point { background: var(--orange); box-shadow: 0 0 0 3px var(--attention-fond); }
.etat-synchro-erreur .synchro-point { background: var(--rouge); box-shadow: 0 0 0 3px var(--alerte-fond); }
.etat-synchro-erreur { color: var(--alerte); }
/* la feuille de choix (Facturer, Appeler, Plus tard) */
.menu-actions .choix { flex-direction: row; align-items: center; gap: 12px; }
.menu-actions .choix .choix-corps { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: inherit; color: inherit; }
.menu-actions .choix .choix-corps b { font-weight: 600; }
.menu-actions .choix .choix-corps span { font-size: .84rem; color: var(--encre-douce); }
.menu-actions .choix .choix-droite { font-weight: 600; white-space: nowrap; color: var(--encre); font-size: .95rem; }
/* mode Personnaliser : pas de titre en double, bloc déplacé surligné, poignée en icône, outil à pleine opacité */
.widget-edition .widget-corps .panneau-entete h2 { display: none; }
.widget-surbrillance { box-shadow: 0 0 0 3px var(--accent-voile); transition: box-shadow .5s var(--ease); }
.widget-poignee .icone { width: 18px; height: 18px; }
.accueil-outil { opacity: 1; width: 40px; height: 40px; }
/* iPhone : « Aujourd'hui » juste sous l'en-tête, gestes en rangée d'icônes, tuiles 2×2, cibles ≥ 44 px, textes sur deux lignes */
@media (max-width: 640px) {
  .widgets:not(.widgets-edition) { display: flex; flex-direction: column; }
  .widgets:not(.widgets-edition) > .widget { order: 2; }
  .widgets:not(.widgets-edition) > .widget-mobile-entete { order: 0; }
  .widgets:not(.widgets-edition) > .widget-mobile-haut { order: 1; }
  .widget .tuiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .widget .tuile { padding: 14px 14px; }
  .widget .tuile-valeur { font-size: 1.5rem; }
  .widget .tuile-journee { grid-column: 1 / -1; }
  .widget .actions-rapides { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .widget .action-rapide { align-items: center; text-align: center; padding: 12px 6px; gap: 2px; }
  .widget .action-rapide span:last-child { display: none; }
  .widget .action-rapide b { font-size: .78rem; }
  .widget .action-icone { margin-bottom: 4px; }
  .vigie li { flex-wrap: wrap; }
  .vigie li > a { flex-basis: 100%; }
  .vigie li a b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vigie-actions { width: 100%; justify-content: flex-end; }
  .widget-poignee { display: none; }
  .widget-options .puce { min-height: 40px; }
  .bouton-icone-petit { width: 40px; height: 40px; }
  .accueil-outil { width: 44px; height: 44px; }
}
@media (pointer: coarse) { .vigie-actions .bouton, .accueil-pied .lien-discret, .etat-synchro .lien-discret { min-height: 44px; } }

/* ── agenda ── */
/* ── Agenda (refonte 2026-09-06) — à intégrer dans qg.css, après le bloc « l'agenda unique » ── */
.agenda-page .titre-page .barre-titre { display: inline-flex; align-items: baseline; gap: 10px; }
.agenda-page .agenda-titre.compteur { display: inline; background: transparent; color: var(--encre); padding: 0; border-radius: 0; font: inherit; line-height: inherit; min-width: 0; height: auto; letter-spacing: inherit; }
.agenda-annee { color: var(--encre-pale); font-weight: 400; }
.agenda-page .page-entete { margin-bottom: 14px; }
.agenda-page .page-entete .sous-titre { margin-bottom: 0; }
.agenda-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.legende-front { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--encre-douce); font: inherit; font-size: .8125rem; padding: 6px 8px; border-radius: 999px; cursor: pointer; min-height: 32px; transition: background .15s var(--ease), opacity .15s var(--ease); }
.legende-front:hover { background: var(--voile); }
.legende-front i { margin-right: 0; }
.legende-front.legende-off { opacity: .45; text-decoration: line-through; }
.legende-nb { font-size: .75rem; color: var(--encre-pale); font-variant-numeric: tabular-nums; }
.agenda-page .bandeau-attention { margin-bottom: 14px; }
/* plancher de lisibilité : 12 px partout */
.agenda-heures span, .agenda-entete, .mois-entetes span, .rdv-heure, .agenda-toute-journee .agenda-entete, .mois-plus, .bande-jour { font-size: .75rem; }
.mois-evt { font-size: .78rem; padding: 3px 7px; line-height: 1.3; }
.mois-evt-groupe { font-weight: 600; }
.mois-evt-retard { box-shadow: inset 0 0 0 1px var(--attention); }
.mois-evt-ferie { cursor: default; color: var(--encre-pale); font-style: italic; }
.mois-plus { border: 0; background: transparent; color: var(--accent); font-weight: 600; cursor: pointer; text-align: left; padding: 2px 6px; border-radius: 6px; }
.mois-plus:hover { background: var(--accent-fond); }
.mois-ferie .mois-num:not(.mois-auj) { color: var(--encre-pale); }
.mois-ferie-nom { font-size: .72rem; color: var(--encre-pale); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mois-points em { font-style: normal; font-size: .7rem; color: var(--encre-pale); margin-left: 2px; font-variant-numeric: tabular-nums; line-height: 1; }
.mois-jour:focus-visible, .rdv:focus-visible, .ligne-rdv:focus-visible, .toute-journee-jour:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* la liste d'un jour */
.liste-jour .ligne-rdv { align-items: center; }
.rdv-l-heure { display: flex; flex-direction: column; line-height: 1.15; min-width: 52px; }
.rdv-l-heure b, .rdv-l-corps b { flex: 0 0 auto; }
.rdv-l-heure small { font-size: .75rem; color: var(--encre-pale); }
.rdv-l-icone { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; background: var(--rdv-fond, var(--voile)); color: var(--rdv-couleur, var(--encre-douce)); flex: 0 0 auto; }
.rdv-l-icone .icone { width: 16px; height: 16px; }
.rdv-l-corps { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rdv-l-corps .note { font-size: .8125rem; }
.ligne-rdv-annule .rdv-l-corps b { text-decoration: line-through; color: var(--encre-pale); }
.panneau-jour-choisi .vide { padding: 28px 12px; }
/* la coche « Fait » (un tap, annulable) */
.rdv-check { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--bordure-forte); background: var(--carte); color: transparent; cursor: pointer; padding: 0; flex: 0 0 auto; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.rdv-check .icone { width: 14px; height: 14px; }
.rdv-check:hover { border-color: var(--vert); color: var(--vert); }
.rdv-check-on { background: var(--vert); border-color: var(--vert); color: var(--accent-contraste); }
.rdv-check-fixe { cursor: default; }
.rdv .rdv-check { position: absolute; top: 4px; right: 5px; width: 20px; height: 20px; }
.rdv .rdv-check .icone { width: 11px; height: 11px; }
@media (hover: hover) { .rdv .rdv-check:not(.rdv-check-on) { opacity: 0; } .rdv:hover .rdv-check, .rdv:focus-within .rdv-check { opacity: 1; } }
.rdv-couloir { padding-left: 6px; padding-right: 6px; }
.rdv-nouveau { animation: rdv-apparait .9s var(--ease); }
@keyframes rdv-apparait { 0% { box-shadow: 0 0 0 0 var(--accent-voile); } 60% { box-shadow: 0 0 0 8px var(--accent-voile); } 100% { box-shadow: 0 0 0 0 transparent; } }
.trait-maintenant::after { content: attr(data-heure); position: absolute; right: 4px; top: -9px; font-size: .7rem; font-weight: 700; color: var(--accent-contraste); background: var(--rouge); padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; line-height: 1.4; }
/* le planning (semaine sur iPhone) */
.agenda-planning { display: flex; flex-direction: column; gap: 12px; }
.planning-jour { background: var(--carte); border: 1px solid var(--bordure-carte); border-radius: var(--r-m); box-shadow: var(--ombre-s); padding: 6px 10px; }
.planning-entete { display: flex; align-items: center; gap: 10px; padding: 6px 2px; position: sticky; top: 0; background: var(--carte); z-index: 1; }
.planning-num { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; background: var(--voile); color: var(--encre); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.planning-nom { flex: 1; min-width: 0; text-transform: capitalize; }
.planning-nom b { font-weight: 650; }
.planning-vide { opacity: .75; cursor: pointer; }
.planning-rien { margin: 2px 0 8px 46px; color: var(--encre-pale); font-size: .875rem; }
.planning-auj { border-color: var(--accent-voile); box-shadow: 0 0 0 2px var(--accent-fond); }
/* l'aperçu d'un événement */
.apercu-titre { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.apercu-titre b { display: block; font-size: 1.1rem; letter-spacing: -.01em; }
.apercu-details .rangee-valeur { text-align: right; margin-left: auto; }
/* le formulaire du rendez-vous */
.rangee-interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 2px 0; margin-bottom: 8px; }
.rv-compris { color: var(--succes); font-weight: 600; margin: -6px 0 10px; }
.rv-durees { margin-bottom: 8px; }
.rv-duree-ligne { display: flex; align-items: center; gap: 8px; }
.rv-duree-ligne .champ { width: 96px; }
.champ.champ-erreur, .champ[aria-invalid="true"] { border-color: var(--rouge); box-shadow: 0 0 0 3px var(--alerte-fond); }
/* iPhone : cibles 44 px, légende visible et défilable */
@media (max-width: 720px) {
  .agenda-controles .legende-agenda { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-left: 0; width: 100%; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .agenda-controles .legende-agenda::-webkit-scrollbar { display: none; }
  .legende-front { min-height: 44px; white-space: nowrap; }
  .agenda-page .bouton-icone { width: 44px; height: 44px; }
  .agenda-page .filtres .puce { min-height: 44px; }
  .agenda-page .periode-nav .bouton { min-height: 44px; }
  .mois-plus { min-height: 44px; }
  .rdv-check { width: 32px; height: 32px; }
  .mois-jour[role="button"] { min-height: 58px; }
  .agenda-toute-journee .agenda-entete { font-size: .7rem; }
  .agenda-page .page-entete { margin-bottom: 10px; }
}

/* ── projets ── */
/* ═══ Projets & feuille de route — refonte 2026-09-06 (agent « projets ») ═══ */
.icone-xs { width: .8em; height: .8em; }
.centre { text-align: center; }
/* la barre-titre à l'intérieur d'un grand titre (feuille de route : vignette + nom + compteur) */
.titre-page .barre-titre { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ── cartes des fronts (page Projets) ── */
.carte-front { display: flex; flex-direction: column; gap: 12px; }
.carte-front-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.carte-front-titre { display: flex; align-items: center; gap: 12px; min-width: 0; }
.carte-front-titre h2 { margin: 0; font-size: 1.0625rem; letter-spacing: -0.012em; }
.carte-front-titre .note { display: block; margin-top: 2px; }
.carte-front-chiffre { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.carte-front-chiffre .note { display: block; margin-top: 2px; }
.chiffre-grand { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--encre); }
.chiffre-grand.texte-alerte { color: var(--alerte); }
.chiffre-grand.texte-attention { color: var(--attention); }
.carte-front-courbe { display: inline-block; width: 120px; height: 30px; flex: none; }
.carte-front-courbe .mini-courbe { width: 100%; height: 100%; }
.carte-front-bloque { list-style: none; margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--alerte-fond); color: var(--alerte); font-size: .9rem; display: grid; gap: 6px; }
.carte-front-bloque li { display: flex; align-items: flex-start; gap: 8px; }
.carte-front-bloque .icone { flex: none; margin-top: 2px; }
.carte-front-bloque a { color: inherit; font-weight: 650; }
.carte-front-chrono { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-s); background: var(--attention-fond); color: var(--attention); font-size: .9rem; }
.carte-front-chrono .icone { flex: none; animation: chrono-bat 1.6s ease-in-out infinite; }
.carte-front-chrono .bouton { margin-left: auto; }
@keyframes chrono-bat { 50% { opacity: .45; } }
.liste-front { margin: 0; }
/* les lignes de chantier : initiales à gauche, nom + note, barre d'étapes, badge à droite */
.liste-chantiers .ligne-chantier { grid-template-columns: auto 1fr auto auto; gap: 2px 10px; padding: 6px 0; }
.liste-chantiers .ligne-chantier .avatar { grid-column: 1; grid-row: 1 / span 2; }
.liste-chantiers .ligne-chantier b { grid-column: 2; }
.liste-chantiers .ligne-chantier .note { grid-column: 2; }
.liste-chantiers .ligne-chantier .progression-mini { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.liste-chantiers .ligne-chantier .badge-date, .liste-chantiers .ligne-chantier .etiquette { grid-column: 4; grid-row: 1 / span 2; }
.progression-mini { margin: 0; }
/* ── feuille de route ── */
.seg-produits { margin: -8px 0 18px; }
.reprise-fil .liste-reprise li { align-items: center; gap: 10px; }
.reprise-fil .liste-reprise li > .icone { flex: none; color: var(--encre-pale); }
.reprise-fil .liste-reprise li > span { flex: 1 1 200px; min-width: 0; }
.form-produit { display: block; }
.form-produit-ligne { display: flex; gap: 9px; align-items: center; }
.form-produit-ligne .champ { flex: 1 1 auto; min-width: 0; }
.form-apercu { margin: 8px 0 0; color: var(--accent); font-weight: 500; }
.form-options { margin-top: 10px; }
.form-options > summary { cursor: pointer; color: var(--accent); font-size: .9rem; font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.form-options > summary::-webkit-details-marker { display: none; }
.form-options > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.form-options[open] > summary::before { transform: rotate(45deg); }
.form-options-corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-top: 8px; }
.form-options-corps .champ { width: 100%; }
.rangee-filtre .champ-filtre { flex: 0 1 220px; width: auto; min-height: 36px; }
/* les lignes façon Rappels : case ronde, titre, étiquettes, actions, focus visible */
.route-item-qg { position: relative; }
.route-item-qg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.route-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.case-ronde { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.8px solid var(--encre-tres-pale); background: transparent; display: inline-grid; place-items: center; padding: 0; cursor: pointer; color: transparent; position: relative; transition: border-color .15s, background .15s, color .15s; }
.case-ronde:hover { border-color: var(--accent); color: var(--accent); }
.case-ronde:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.case-ronde::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.case-ronde .icone { width: 14px; height: 14px; stroke-width: 2.4; }
.case-cochee { background: var(--vert); border-color: var(--vert); color: #fff; color: var(--accent-contraste); }
.case-abandonnee { background: var(--piste); border-color: var(--piste); color: var(--encre-pale); }
.statut-en_cours .case-ronde { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-fond); }
.route-item-qg.statut-abandonne > b { text-decoration: none; color: var(--encre-pale); }
.route-item-qg.route-retard { background: var(--alerte-fond); }
.route-item-qg.route-retard:hover { background: var(--alerte-fond); }
.route-item-qg.ligne-neuve, .journal-produit li.ligne-neuve { animation: ligne-neuve 1.6s var(--ease); }
@keyframes ligne-neuve { from { background: var(--accent-fond); } }
.route-actions .route-menu { width: 32px; height: 32px; }
.etiquette-fonctionnalite { background: var(--accent-fond); color: var(--accent); }
.etiquette-journal { background: var(--voile); color: var(--encre-douce); }
.etiquette-abandonne { background: var(--piste); color: var(--encre-pale); }
.etiquette-prio.prio-haute { background: var(--alerte-fond); color: var(--alerte); }
.etiquette-prio.prio-basse { background: var(--piste); color: var(--encre-pale); }
.liste-jalons .jalon-date { min-width: 84px; }
.liste-decisions .route-detail { color: var(--encre-douce); }
.journal-produit li.journal-auto { color: var(--encre-pale); }
.journal-produit li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
/* menu « … » d'une ligne et lignes de liens du produit */
.liste-menu .rangee-danger b { color: var(--alerte); }
.liste-menu > li > .icone { flex: none; color: var(--encre-douce); }
.lien-ligne { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
#cf-liens + .bouton { margin-top: 2px; }
/* mobile : cibles de 44 px et une seule colonne */
@media (pointer: coarse) {
  .route-actions .bouton, .panneau-pied .bouton, .reprise-fil .bouton, .carte-front-chrono .bouton { min-height: 44px; }
  .route-actions .route-menu { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .carte-front-entete .anneau { width: 44px !important; height: 44px !important; }
  .chiffre-grand { font-size: 1.8rem; }
  .liste-chantiers .ligne-chantier { grid-template-columns: auto 1fr auto; }
  .liste-chantiers .ligne-chantier .progression-mini { grid-column: 2; grid-row: 3; width: 100%; margin-top: 4px; }
  .liste-chantiers .ligne-chantier .badge-date, .liste-chantiers .ligne-chantier .etiquette { grid-column: 3; }
  .form-produit-ligne { flex-wrap: wrap; }
  .form-produit-ligne .bouton { flex: 1 1 100%; }
  .rangee-filtre .champ-filtre { flex: 1 1 100%; }
  .lien-ligne { grid-template-columns: 1fr auto; }
  .lien-ligne input[type="url"] { grid-column: 1 / span 2; }
}

/* ── missions ── */
/* ── Missions (chantiers) — refonte 2026-09-06 : à intégrer dans qg.css (bloc « les missions ») ── */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.champ-recherche-bloc { display: block; flex: 0 1 280px; max-width: 280px; margin-left: auto; }
.champ-recherche-bloc .champ-recherche { margin-left: 0; max-width: none; width: 100%; }

/* la feuille de création */
.carte-nouveau .panneau-entete { margin-bottom: 4px; }
.form-mission.form-feuille { display: block; margin-top: 8px; }
.form-mission.form-feuille .bloc-champ { margin-bottom: 12px; }
.form-mission.form-feuille .champ { width: 100%; flex: none; }
.form-mission.form-feuille .details-grille { margin-bottom: 2px; }
.form-mission.form-feuille .panneau-pied { margin-top: 6px; }

/* le bandeau « chrono en cours » */
.bandeau-chrono { align-items: center; }
.bandeau-chrono > div { flex: 1; min-width: 0; }
.bandeau-chrono .chrono-texte { font-variant-numeric: tabular-nums; font-weight: 600; }

/* aujourd'hui sur mes chantiers */
.carte-semaine .sous-section { margin-top: 14px; }
.carte-semaine .sous-section:first-of-type { margin-top: 6px; }
.carte-semaine .compteur.etiquette-alerte { background: var(--alerte-fond); color: var(--alerte); }
.carte-semaine .compteur.etiquette-attention { background: var(--attention-fond); color: var(--attention); }
.semaine li.semaine-ligne { padding: 2px 4px 2px 0; gap: 8px; flex-wrap: nowrap; cursor: default; min-height: 44px; }
.semaine li.semaine-ligne .avatar { margin: 0 6px; }
.semaine-bouton { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 6px 10px; border: 0; border-radius: var(--r-s); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.semaine-bouton:hover { background: var(--voile); }
.semaine-bouton b { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semaine-bouton .note { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semaine li.semaine-ligne .badge-date { flex: none; }

/* la case à cocher d'une étape : 44 px de cible partout (carte, fiche, semaine) */
.tache-case { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer; border-radius: 50%; margin: -6px 0; }
.tache-case:hover { background: var(--accent-fond); }
.tache-case input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); cursor: pointer; margin: 0; }

/* la carte d'un chantier */
.mission { transition: box-shadow .25s var(--ease); }
.mission-identite { display: flex; gap: 14px; align-items: flex-start; min-width: 0; flex: 1; }
.mission-identite .avatar { width: 44px; height: 44px; font-size: 1rem; margin-top: 2px; }
.mission-titres { min-width: 0; flex: 1; }
.mission-titres h2 { margin: 0; font-size: 1.125rem; letter-spacing: -0.02em; }
.mission-titres > .note { margin-top: 2px; }
.mission-montant .num { font-size: 1.45rem; }
.mission-jauge { height: 5px; width: 120px; margin: 8px 0 0 auto; border-radius: 999px; background: var(--piste); overflow: hidden; }
.mission-jauge i { display: block; height: 100%; background: var(--vert); border-radius: 999px; }
.mission-avancement { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mission-avancement-corps { flex: 1; min-width: 0; }
.mission-avancement-corps .progression { margin-top: 0; }
.mission-prochaine { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 10px 6px 6px; border-radius: var(--r-s); background: var(--voile); cursor: pointer; min-height: 44px; }
.mission-prochaine:hover { background: var(--accent-fond); }
.mission-prochaine-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mission-prochaine-texte b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-prochaine .badge-date { flex: none; }
.mission-bas { align-items: center; }
.mission-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.mission-actions .bouton { min-height: 36px; }
.mission.terminee .mission-montant .num { color: var(--succes); }
.badge-date.badge-fait { background: var(--succes-fond); color: var(--succes); }

/* le chrono qui bat */
.chrono-badge.bat .icone { animation: chrono-bat 1.6s ease-in-out infinite; }
@keyframes chrono-bat { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chrono-badge.bat .icone { animation: none; } }

/* la fiche en plis */
.mission-details .mission-pli .pli { margin: 8px 0; box-shadow: none; border: 1px solid var(--separateur); }
.mission-details .mission-pli .pli > summary { padding: 12px 16px; min-height: 48px; }
.mission-details .mission-pli .pli-corps { padding: 0 16px 16px; }
.mission-details .mission-pli .pli-resume { font-variant-numeric: tabular-nums; }
.mission-details .sous-section { margin-top: 16px; }
.tache { min-height: 44px; grid-template-columns: 44px 1fr auto 44px; gap: 4px; }
.tache-suppr { width: 44px; height: 44px; }
.tache-suppr .icone { width: 16px; height: 16px; }
.liste-temps li .tache-suppr, .journal-chantier li .tache-suppr { width: 36px; height: 36px; }
.liens-rapides { margin: 0 0 12px; }
.liens-rapides .bouton { min-height: 36px; }
.hebergement-vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hebergement-vignette { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--voile); }
.hebergement-vignette .note { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.details-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.encart-vide { padding: 8px; }
.missions-page .tuile-libelle { padding-right: 44px; }

@media (max-width: 640px) {
  .mission-haut { flex-direction: column; }
  .mission-montant { text-align: left; }
  .mission-jauge { margin-left: 0; }
  .mission-bas { flex-direction: column; align-items: stretch; }
  .mission-statut { width: 100%; }
  .mission-actions { margin-left: 0; }
  .mission-actions .bouton { flex: 1 1 auto; min-height: 44px; }
  .tache { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 0 4px; }
  .tache-date { grid-column: 2; width: 150px; min-height: 32px; padding: 3px 8px; font-size: .78rem; margin-bottom: 4px; }
  .tache.faite .tache-date { display: none; }
  .tache-suppr { width: 40px; }
  .semaine-bouton b, .semaine-bouton .note, .mission-prochaine-texte b { white-space: normal; }
  .champ-recherche-bloc { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .semaine li.semaine-ligne { flex-wrap: wrap; }
  .semaine li.semaine-ligne .badge-date { margin-left: 52px; }
  .mission-details .mission-pli .pli-titre { white-space: nowrap; flex: none; }
  .mission-details .mission-pli .pli-resume { font-size: .8rem; }
}

/* ── forme ── */
/* ── Forme (refonte Apple Santé, 2026-09-06) — à intégrer dans qg.css, après le bloc « la forme » ── */
/* les trois grandes tuiles : vignette en ligne dans le libellé, anneau d'objectif en haut à droite, mini-courbe */
.tuile-forme .tuile-libelle .vignette { position: static; width: 26px; height: 26px; border-radius: 8px; }
.tuile-forme .tuile-libelle .vignette .icone { width: 15px; height: 15px; }
.tuile-forme .tuile-libelle, .tuile-forme .tuile-valeur { padding-right: 68px; }
.tuile-forme .tuile-detail .icone { width: 14px; height: 14px; vertical-align: -2px; }
.tuile-forme .mini-courbe { height: 30px; margin-top: 8px; }
.tuile-valeur small { font-size: .95rem; color: var(--encre-pale); font-weight: 600; letter-spacing: 0; }
.tuile-forme .anneau-objectif { position: absolute; top: 14px; right: 14px; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; line-height: 0; transition: transform .2s var(--ease); }
.tuile-forme .anneau-objectif:hover { transform: scale(1.05); }
.tuile-forme .anneau-objectif:active { transform: scale(.96); }
.anneau-objectif:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tuile-forme .anneau-objectif .anneau-texte { font-size: 12px; color: var(--encre); }
/* les trois boutons de saisie et le rappel de la palette */
.actions-forme { margin-bottom: 8px; }
.note-palette { margin: 0 0 22px; }
@media (max-width: 640px) { .note-palette { display: none; } }
/* la carte « Cette semaine » */
.panneau-semaine .semaine-phrase { margin: 0; font-size: 1.02rem; line-height: 1.55; letter-spacing: -0.01em; }
/* le formulaire complet (replié) : vrais libellés au-dessus des champs */
.form-forme { align-items: flex-end; gap: 12px 14px; }
.form-forme .bloc-champ { flex: 1 1 150px; margin: 0; }
.form-forme .bloc-champ[for="ff-note"] { flex: 2 1 260px; }
.form-forme .champ { width: 100%; }
.form-forme-pied { flex: 1 1 100%; display: flex; justify-content: flex-end; }
/* les graphiques : sous-onglets de plage, zone positionnée (étiquette de fin, pastille au doigt), courbe rose avec son aire */
.sous-onglets-graphe { margin-bottom: 12px; }
.graphique-forme[data-graphe] { touch-action: pan-y; }
.graph-zone { position: relative; }
.graphique-forme.avec-axe .graph-zone, .graphique-forme.avec-axe .graph-libelles { margin-left: 44px; }
.graph-zone .graphique-poids, .graph-zone .graphique-pas { margin-left: 0; width: 100%; }
.graphique-poids .ligne-lisse { stroke: var(--rose); }
.graphique-poids .aire-lisse { fill: var(--rose); opacity: .12; stroke: none; }
.graphique-poids .pt-poids { fill: var(--encre-douce); opacity: .8; }
.legende-lisse { background: var(--rose); }
.graphique-pas .ligne-moyenne { stroke: var(--encre-pale); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.legende-moyenne { background: var(--encre-pale); }
.graph-dernier { position: absolute; right: 0; transform: translateY(-115%); font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--rose); background: var(--carte); padding: 1px 6px; border-radius: 999px; box-shadow: var(--ombre-s); pointer-events: none; white-space: nowrap; }
.graphique-forme[data-graphe="pas"] .graph-dernier { color: var(--encre); }
.graph-dernier-barre { right: auto; transform: translate(-50%, -115%); }
.graph-pastille { position: absolute; top: 0; transform: translate(-50%, -110%); background: var(--encre); color: var(--carte); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 5px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 2; box-shadow: var(--ombre-m); }
.graph-pastille.a-droite { transform: translate(-92%, -110%); }
.graph-pastille.a-gauche { transform: translate(-8%, -110%); }
.graph-y span { width: 40px; text-align: right; padding-right: 6px; box-sizing: border-box; }
@media (max-width: 640px) { .graph-jours span:nth-child(even) { visibility: visible; } }
/* l'historique : lignes de 48 px, façon Réglages iOS */
.jours-forme > li { display: grid; grid-template-columns: 104px 92px 104px 1fr auto 12px; grid-template-areas: "date poids pas seances source chevron"; align-items: center; gap: 6px 14px; min-height: 48px; padding: 8px 16px 8px 18px; }
.jours-forme > li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-xs); }
.jours-forme .jour-date { grid-area: date; font-weight: 600; letter-spacing: -0.012em; }
.jours-forme .jour-poids { grid-area: poids; font-variant-numeric: tabular-nums; }
.jours-forme .jour-pas { grid-area: pas; font-variant-numeric: tabular-nums; color: var(--encre-douce); }
.jours-forme .jour-seances { grid-area: seances; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jours-forme .etiquette { grid-area: source; }
.jours-forme .chevron { grid-area: chevron; }
@media (max-width: 640px) {
  .jours-forme > li { grid-template-columns: 1fr auto auto 12px; grid-template-areas: "date poids pas chevron" "seances seances source chevron"; gap: 4px 10px; padding: 10px 14px 10px 16px; }
  .jours-forme .jour-seances { white-space: normal; }
  .jours-forme .jour-seances:empty { display: none; }
}
.historique-pied { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
/* le pli « Brancher l'iPhone » : trois étapes lisibles */
.etapes-iphone { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.etapes-iphone > li > b { display: block; margin-bottom: 4px; }
.etapes-iphone .note { display: block; }
.etapes-iphone code { word-break: break-all; }
.etape-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etape-ligne code { flex: 1 1 220px; }
/* les feuilles de saisie : puces de date, un seul grand champ, types de séance */
.feuille-forme .filtres-date, .feuille-forme .filtres-duree { margin-bottom: 14px; }
.feuille-forme .champ-date { margin-bottom: 14px; }
.champ-central { text-align: center; }
.champ-grand { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; text-align: center; min-height: 64px; font-variant-numeric: tabular-nums; }
.types-seance { flex-wrap: wrap; width: 100%; margin-bottom: 14px; }
.types-seance button { flex: 1 1 auto; min-height: 40px; }
/* la feuille des objectifs : liste groupée avec le champ à droite */
.liste-objectifs .rangee-corps { cursor: pointer; }
.liste-objectifs .champ-objectif { width: 110px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.liste-objectifs .action-icone { flex: none; line-height: 0; }
/* la fenêtre d'un jour : séances retirables au doigt, ajout en ligne, reprise de la valeur iPhone */
.liste-seances > li { justify-content: space-between; flex-wrap: nowrap; padding: 6px 0; }
.liste-seances .seance-libelle { flex: 1; min-width: 0; }
.bouton-suppr-44 { width: 44px; height: 44px; }
.ajout-seance { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 16px; }
.ajout-seance select.champ { flex: 1 1 160px; width: auto; }
.ajout-seance input.champ { flex: 0 1 130px; width: auto; }
.fenetre-jour .aide .icone { width: 13px; height: 13px; vertical-align: -2px; }
button.lien-discret { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
button.lien-discret:hover { text-decoration: underline; }
/* sur iPhone : les trois tuiles défilent à l'horizontale, le geste principal reste au-dessus du pli */
@media (max-width: 640px) {
  .tuiles-forme { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px 16px; padding: 2px 16px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tuiles-forme::-webkit-scrollbar { display: none; }
  .tuiles-forme .tuile-forme { flex: 0 0 84%; scroll-snap-align: start; }
  .grille-forme { grid-template-columns: 1fr; }
}

/* ── reglages ── */
/* ═══ Réglages (refonte 2026-09-06) — liste iOS sur mobile, onglets sur PC ═══ */
.reglages-liste { display: none; margin-bottom: 18px; }
.reglages-liste > li.actif { background: var(--accent-fond); }
.reglages-liste > li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reglages-liste .rangee-valeur { max-width: 45%; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
@media (max-width: 760px) { .reglages-liste { display: block; } #reglages-onglets { display: none; } }
#reglages-onglets .sous-onglet .icone { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.reglages-actions { margin-left: 0; margin-top: 14px; }
.enregistre-marque { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .8rem; font-weight: 500; color: var(--succes); }
.enregistre-marque .icone { width: 14px; height: 14px; }
.champ-surligne { box-shadow: 0 0 0 3px var(--accent-voile); transition: box-shadow .3s var(--ease); }
/* Ma micro-entreprise */
.entreprise-carte { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.entreprise-identite { flex: 1 1 220px; min-width: 0; display: flex; gap: 12px; align-items: center; }
.entreprise-identite b { display: block; font-size: 1.1rem; letter-spacing: -0.015em; }
.entreprise-identite .note { display: block; margin: 2px 0 0; }
.entreprise-jauges { display: flex; gap: 18px; flex-wrap: wrap; }
.entreprise-jauge { display: flex; gap: 10px; align-items: center; font-size: .8125rem; color: var(--encre-douce); line-height: 1.35; max-width: 240px; }
.entreprise-jauge b { display: block; color: var(--encre); font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
#carte-entreprise .bandeau-attention, #carte-entreprise .bandeau-info { margin: 16px 0 0; }
/* Comptes en fiches */
.comptes-fiches { display: grid; gap: 12px; margin-bottom: 14px; }
.compte-fiche { border: 1px solid var(--bordure); border-radius: var(--r-s); padding: 12px 14px; background: var(--voile); }
.compte-fiche-tete { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.compte-fiche-tete .champ { flex: 1; min-width: 0; margin: 0; }
.compte-fiche-tete .case { flex: none; }
.compte-couleur { width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer; }
.compte-couleur input { width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.compte-couleur input::-webkit-color-swatch-wrapper { padding: 0; }
.compte-couleur input::-webkit-color-swatch { border-radius: 50%; border: 2px solid var(--carte); box-shadow: var(--ombre-s); }
.compte-fiche-champs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.compte-fiche-champs .bloc-champ { margin: 0; }
.compte-fiche-champs .champ { width: 100%; }
@media (max-width: 760px) { .compte-fiche-champs { grid-template-columns: 1fr 1fr; } .compte-fiche-tete { flex-wrap: wrap; } .compte-fiche-tete .champ { flex-basis: 100%; order: -1; } }
.comptes-etat { display: inline-flex; align-items: center; gap: 5px; color: var(--attention); font-size: .8125rem; font-weight: 500; }
.comptes-etat .icone { width: 14px; height: 14px; }
/* Objectifs du mois */
.objectifs { display: grid; gap: 12px; }
.objectif-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 12px; align-items: center; }
.objectif-ligne .libelle { display: block; }
.objectif-ligne .note { display: block; margin: 2px 0 0; }
.objectif-ligne .progression { margin-top: 6px; }
.objectif-ligne .champ { margin: 0; }
.progression-barre.proche { background: var(--orange); }
.progression-barre.depasse { background: var(--rouge); }
@media (max-width: 760px) { .objectif-ligne { grid-template-columns: minmax(0, 1fr) 96px auto; gap: 8px; } }
/* Documents : variables du message */
.variables { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.variables .puce { font-family: var(--mono, monospace); font-size: .8rem; }
/* Apparence : nuancier nommé + aperçu vivant */
.teinte-choix { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; font-size: .75rem; color: var(--encre-douce); text-align: center; }
.apercu-apparence { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-s); background: var(--fond); }
.apercu-apparence .note { margin: 0 0 0 auto; }
/* Sauvegardes : où sont les données, liste des sauvegardes */
.liste-donnees { margin: 12px 0 16px; }
.liste-donnees .rangee-corps b { display: block; }
.liste-donnees .rangee-corps .note { display: block; margin: 2px 0 0; }
.liste-donnees li.erreur b { color: var(--alerte); }
.liste-sauvegardes > li { align-items: flex-start; }
.liste-sauvegardes .vignette { flex: none; margin-top: 2px; }
.sauvegarde-corps { flex: 1 1 200px; min-width: 0; }
.sauvegarde-corps b { display: block; }
.sauvegarde-corps .note { display: block; margin: 2px 0 0; }
.sauvegarde-diff { color: var(--attention); }
.sauvegarde-diff.identique { color: var(--succes); }
.zero-total { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
/* État : tuiles de santé, corbeille, journal daté */
.tuiles-etat .tuile-valeur-texte { font-size: 1.15rem; }
.tuiles-etat .tuile-detail .bouton { margin-left: 6px; }
.liste-signes .bouton-suppr .icone { width: 16px; height: 16px; }
.journal li.journal-jour { grid-template-columns: 1fr; padding: 14px 0 4px; border-bottom: 0; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-pale); }
.journal-type { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.journal-type .icone { width: 14px; height: 14px; }
/* Cibles tactiles ≥ 44 px sur écran tactile */
@media (pointer: coarse) { .bouton-suppr, .tache-suppr { width: 44px; height: 44px; } .bouton-petit { min-height: 44px; } .sous-onglet { min-height: 44px; } }

/* ── documents ── */
/* Aperçu d'un PDF avant partage (QGDocuments.partager sur PC) */
.apercu-pdf { display: flex; flex-direction: column; gap: 10px; }
.apercu-pdf-cadre { width: 100%; height: min(70vh, 820px); border: 0; border-radius: var(--r-s); background: var(--voile); box-shadow: inset 0 0 0 1px var(--separateur); }
.apercu-pdf-nom { margin: 0; font-size: 0.8125rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .apercu-pdf-cadre { height: 60vh; } }


/* ═══════════ ajouts de la vague 2 (7 septembre 2026) ═══════════ */

/* ── argent-banque ── */
/* ═══════════════════════════════════════════════════════════ Banque : les écrans du tri (modules/argent-banque.js) */

/* un seul titre par écran (la page « Argent » garde son h1) */
#zone-banque .titre-ecran { font-size: 1.4rem; font-weight: 650; letter-spacing: -0.022em; margin: 6px 0 10px; }
#zone-banque .panneau-entete .titre-ecran { font-size: 1.25rem; margin: 0; }

/* l'avancée du tri : l'anneau + « 23 sur 61 décidées » */
.tri-avancee { display: flex; align-items: center; gap: 14px; background: var(--carte); border: 1px solid var(--bordure-carte); border-radius: var(--r-m); padding: 12px 16px; box-shadow: var(--ombre-s); margin: 10px 0 14px; }
.tri-avancee > div { min-width: 0; }
.tri-avancee b { display: block; font-size: 1.05rem; letter-spacing: -0.014em; font-variant-numeric: tabular-nums; }
.tri-avancee .aide { display: block; margin: 2px 0 0; }
.tri-progression { margin-top: 10px; }

/* le compte des résultats vit HORS du bloc des filtres : le champ de recherche n'est jamais redessiné pendant la frappe */
.filtre-resume { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }

/* trois pastilles sous les yeux, le reste derrière « Autre choix » */
.chip-plus { border-style: dashed; }
.op-chips-plus { display: none; margin-top: 6px; }
.op-chips-plus.ouvert { display: flex; }
.libelle-doute { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--attention-fond); color: var(--attention); font-size: .74rem; font-weight: 650; vertical-align: middle; }
.op-doute { margin: 6px 0 0; color: var(--attention); }
.edition-resume > span:first-child { flex: 1 1 200px; min-width: 0; }
.edition-boutons { display: flex; gap: 6px; flex-wrap: wrap; }

/* le suivi : une ligne par compte (« connu jusqu'au … ») */
.liste-comptes-connus { margin: 10px 0 4px; }
.compte-connu .compte-point { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.carte-resume-attention { border-color: var(--orange); }
.bilan-tuiles { margin: 14px 0 18px; }

/* barres et listes reprises d'App-Elo qui n'avaient plus de style dans la nouvelle feuille */
.barre-ajout { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }
.barre-ajout .bouton-large { flex: 1 1 240px; }
.chips-mois { margin-bottom: 12px; }
.formulaire { display: grid; gap: 6px; }
.formulaire > .liste-choix { margin-top: 8px; }

/* cibles tactiles : 44 px partout dans la banque (les « Défaire », « ✕ » d'une règle, pastilles) */
@media (pointer: coarse) {
  #zone-banque .bouton-petit, #zone-banque .chip, #zone-banque .puce { min-height: 44px; }
  #zone-banque .bouton-suppr { width: 44px; height: 44px; }
  #zone-banque .op-regle { min-height: 44px; }
  .fenetre .choix { min-height: 52px; }
}
@media (max-width: 780px) {
  .op-chips .chip { flex: 1 1 auto; justify-content: center; }
  .tri-avancee { padding: 12px; gap: 10px; }
  .surveiller-ligne { flex-direction: column; align-items: flex-start; gap: 4px; }
  .edition-resume { flex-direction: column; align-items: flex-start; }
  .compte-releve { line-height: 1.7; }
}

/* ── argent ── */
/* ═══════════════ Argent — refonte du 2026-09-06 (à ajouter à app/qg.css) ═══════════════ */

/* ── barre de période : les puces d'un côté, les actions de l'autre (jamais une action dans une zone qui défile) ── */
.barre-periode { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.barre-periode > .periode-barre { margin: 0; flex: 1 1 auto; min-width: 0; }
.barre-actions-periode { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.aide-sphere { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; }
.aide-sphere .icone { flex: none; color: var(--accent); }
@media (max-width: 640px) {
  .barre-periode { flex-direction: column; align-items: stretch; }
  .barre-actions-periode { margin-left: 0; }
  .barre-actions-periode .bouton { flex: 1 1 auto; justify-content: center; }
}

/* ── graphique « mois par mois » en HTML : plus de SVG étiré qui écrase les arrondis ── */
.graph-mensuel { margin-top: 6px; }
.gm-cols { display: flex; align-items: flex-end; gap: 4px; height: 168px; }
.gm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; background: none; border: 0; padding: 0 0 2px; cursor: pointer; border-radius: var(--r-xs); font: inherit; color: inherit; transition: background .12s var(--ease); }
.gm-col:hover { background: var(--voile); }
.gm-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-barres { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.gm-barres i { width: 42%; max-width: 14px; min-height: 2px; border-radius: 4px 4px 0 0; display: block; transition: height .3s var(--ease); }
.gm-recettes { background: var(--accent-vif); }
.gm-depenses { background: var(--encre-tres-pale); }
.gm-mois { font-size: .68rem; color: var(--encre-pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 640px) { .gm-cols { height: 132px; } .gm-col:nth-child(even) .gm-mois { visibility: hidden; } }

/* ── courbe : le point bas est un repère HTML (un cercle SVG étiré devenait une ellipse) ── */
.courbe-cadre { position: relative; }
.courbe-point { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.courbe-point i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-vif); box-shadow: 0 0 0 3px var(--carte); flex: none; }
.courbe-point span { font-size: .72rem; font-weight: 700; color: var(--encre-douce); background: var(--carte); border-radius: 999px; padding: 1px 7px; box-shadow: var(--ombre-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.courbe-point-alerte i { background: var(--rouge); }
.courbe-point-alerte span { color: var(--alerte); }

/* ── échéancier : le solde qui court après chaque mouvement ── */
.echeancier .ech-fin { text-align: right; display: grid; gap: 2px; justify-items: end; }
.echeancier .ech-apres { font-size: .72rem; color: var(--encre-pale); font-variant-numeric: tabular-nums; white-space: nowrap; }
.echeancier .ech-apres.solde-negatif { color: var(--alerte); font-weight: 600; }
.echeancier li.ech-retard { background: var(--alerte-fond); border-radius: var(--r-s); }
.echeancier .ech-corps > b .icone { width: 15px; height: 15px; vertical-align: -2px; color: var(--encre-pale); margin-right: 2px; }

/* ── cartes de période : la version téléphone des tableaux URSSAF, Tiers et Bilan ── */
.cartes-periodes { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
.cartes-periodes > li { background: var(--carte); border: 1px solid var(--bordure-carte); border-radius: var(--r-m); padding: 14px 16px; box-shadow: var(--ombre-s); display: grid; gap: 10px; }
.cartes-periodes > li.ligne-alerte { border-color: var(--alerte); }
.cartes-periodes > li.ligne-inactive { opacity: .55; }
.cartes-periodes .cp-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cartes-periodes .cp-tete b { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cartes-periodes .cp-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.cartes-periodes .cp-chiffres > span { display: grid; gap: 1px; }
.cartes-periodes .cp-chiffres b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.cartes-periodes .cp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cartes-periodes .cp-actions .bouton { flex: 1 1 auto; justify-content: center; }
.cartes-periodes .cp-barres { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.cartes-periodes .cp-barre { display: block; height: 8px; border-radius: 999px; background: var(--piste); overflow: hidden; }
.cartes-periodes .cp-barre i { display: block; height: 100%; border-radius: 999px; }
.cartes-periodes .cp-recettes { background: var(--accent-vif); }
.cartes-periodes .cp-depenses { background: var(--encre-tres-pale); }
.cartes-periodes li[role="button"] { cursor: pointer; }
.cartes-periodes li[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .cartes-periodes { display: grid; }
  .urssaf-table, .bilan-table { display: none; }
  .tiers-table .tableau-defile { display: none; }
  .tiers-table { padding: 0; background: none; border: 0; box-shadow: none; }
}
/* les tableaux qui restent (URSSAF et Tiers sur grand écran) défilent bien : la règle mobile de
   .panneau-tableau était faite pour les factures, qui deviennent des cartes */
@media (max-width: 640px) { .urssaf-table .tableau-defile, .tiers-table .tableau-defile { overflow-x: auto; } }

/* ── URSSAF : la carte « prochaine déclaration » ── */
.carte-urssaf .urssaf-tete { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.carte-urssaf .urssaf-corps { flex: 1 1 220px; min-width: 0; }
.carte-urssaf .urssaf-corps h2 { margin: 2px 0 6px; }
.carte-urssaf .urssaf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 640px) { .carte-urssaf .urssaf-actions { margin-left: 0; width: 100%; } .carte-urssaf .urssaf-actions .bouton { flex: 1 1 auto; justify-content: center; } }

/* ── anneaux d'objectifs (« Ce mois-ci ») ── */
.anneaux-objectifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-bottom: 14px; }
.anneau-objectif { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: none; border: 1px solid var(--bordure); border-radius: var(--r-m); cursor: pointer; font: inherit; color: inherit; text-align: center; transition: background .12s var(--ease); }
.anneau-objectif:hover { background: var(--voile); }
.anneau-objectif:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anneau-objectif b { font-size: .88rem; }
.anneau-objectif .note { font-size: .74rem; }

/* ── comptes hors du filtre Pro / Perso : estompés, jamais cachés (le solde reste vrai) ── */
.compte-carte.compte-hors-sphere { opacity: .5; }
.compte-carte .compte-nom .avatar { margin-right: 4px; }

/* ── pastilles ── */
.pill-front { display: inline-flex; align-items: center; gap: 5px; }
.pill-front .point { margin: 0; }
.etiquette.pastille-banque { font-size: .7rem; margin-right: 0; display: inline-flex; align-items: center; gap: 4px; }
.etiquette.pastille-banque .icone { width: 12px; height: 12px; }
.fac-client { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fac-client b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── factures : le pied « Total HT » de la fiche ── */
.tableau-lignes tfoot .ligne-total-general td { border-top: 2px solid var(--bordure-forte); font-weight: 650; padding-top: 10px; }
.tableau-lignes tfoot .ligne-total-general b { font-size: 1.05rem; }
.carte-relances .liste-signes li { gap: 10px; }
.carte-relances .avatar { flex: none; }

/* ── feuille de choix « Nouvelle facture » ── */
.liste-candidats .vignette { flex: none; }
.liste-candidats .rangee-valeur { font-variant-numeric: tabular-nums; font-weight: 650; }
.liste-candidats > li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── dépense : saisie express + pli des détails ── */
.saisie-express .champ-grand { text-align: left; }
.boutons-piece { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.boutons-piece .bouton { flex: 1 1 auto; justify-content: center; }
.pli-details-depense { margin: 8px 0 4px; }
.apercu-piece { max-width: 100%; border-radius: var(--r-s); display: block; }
.apercu-piece-pdf { width: 100%; height: 70vh; border: 0; border-radius: var(--r-s); }
.encaisse-recap-alerte { background: var(--alerte-fond); color: var(--alerte); }
.encaisse-recap-alerte .icone { width: 15px; height: 15px; vertical-align: -3px; }

/* ── éditeur : l'indicateur « Enregistré » ── */
.enregistre-marque { opacity: .55; transition: opacity .2s var(--ease); }
.enregistre-marque.vu { opacity: 1; }

/* ── mouvements du mois + surbrillance d'une dépense ouverte par un lien ── */
.liste-mouvements li { cursor: pointer; }
.liste-depenses li.surbrillance { box-shadow: 0 0 0 3px var(--accent-voile); background: var(--accent-fond); }
.depense-badges { flex-wrap: wrap; align-items: center; }

/* ── recherche des tiers ── */
.budget-entete .champ-recherche { max-width: 340px; }
@media (max-width: 640px) { .budget-entete .champ-recherche { max-width: none; width: 100%; } }

/* ── sous-onglets d'Argent : l'icône devant le mot ── */
#argent-onglets .sous-onglet { display: inline-flex; align-items: center; gap: 6px; }
#argent-onglets .sous-onglet .icone { width: 15px; height: 15px; }
@media (max-width: 640px) { #argent-onglets .sous-onglet .icone { display: none; } }

/* ── cibles tactiles : 44 px sur tout ce qui se touche dans Argent ── */
@media (pointer: coarse) {
  .compte-actions .bouton, .ech-actions .bouton, .liste-signes .bouton, .cartes-periodes .bouton,
  .barre-actions-periode .bouton, .fiche-actions .bouton, .boutons-piece .bouton { min-height: 44px; }
  .periode-nav .bouton-icone-petit, .bouton-suppr { width: 44px; height: 44px; }
  .sphere-choix button, .filtres .puce, .segment .puce { min-height: 44px; }
  .liste-mouvements li, .tableau-factures tr { min-height: 52px; }
}

/* ── banque-releves ── */
/* ─── Banque : ce que le moteur rend maintenant et que l'écran peut montrer (à ajouter à app/qg.css) ─── */

/* un montant ne se coupe jamais en fin de ligne (l'espace avant le € est déjà insécable côté moteur) */
.op-montant, .compte-solde, .carte-resume b, .flux-entre b, .flux-sort b { white-space: nowrap; }

/* pastilles : l'icône est monochrome et à côté du mot, jamais un emoji dans le texte */
.chip .icone { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; opacity: .75; }
.chip.chip-ok .icone, .chip.chip-non .icone { opacity: 1; }

/* le menu complet replié derrière « Autre… » : les pastilles marquées `menu` restent accessibles sans encombrer */
.op-chips[data-replie="1"] .chip[data-menu] { display: none; }
.chip-plus { background: var(--voile-2); color: var(--encre-douce); }
.chip-plus[aria-expanded="true"] { background: var(--accent-fond); color: var(--accent); }

/* confiance d'une proposition : une coche verte discrète, un point orange à vérifier */
.op-verif { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 999px; margin-left: 6px; }
.op-verif-sur { background: var(--vert-fond); color: var(--succes); }
.op-verif-doute { background: var(--orange-fond); color: var(--attention); }
.op-verif-doute::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* aperçu « ce que l'app a lu », coloré par rôle de ligne (apercuPages) */
.apercu-lu { max-height: 60vh; overflow: auto; font-size: .8125rem; line-height: 1.5; }
.apercu-page { margin-bottom: 14px; }
.apercu-page > .eyebrow { position: sticky; top: 0; background: var(--carte); padding: 4px 0; }
.apercu-lu .lu { display: block; padding: 2px 8px; border-radius: var(--r-xs); border-left: 3px solid transparent; }
.apercu-lu .lu-operation { border-left-color: var(--vert); background: var(--vert-fond); }
.apercu-lu .lu-solde { border-left-color: var(--bleu); background: var(--bleu-fond); }
.apercu-lu .lu-total { border-left-color: var(--indigo); background: var(--indigo-fond); }
.apercu-lu .lu-detail { border-left-color: var(--separateur); color: var(--encre-douce); }
.apercu-lu .lu-entete { color: var(--encre-pale); }
.apercu-lu .lu-rejet { border-left-color: var(--rouge); background: var(--rouge-fond); }
.apercu-lu .lu-ignore { color: var(--encre-tres-pale); }

/* une ligne dont le montant lu ne colle pas avec le solde du relevé */
.op-banque.op-doute { box-shadow: inset 3px 0 0 var(--attention); }
.op-doute-detail { color: var(--attention); font-size: .8125rem; }

/* ── base ── */
/* ── État du coffre : le cas « à relier » (erreur DÉFINITIVE) et l'envoi en cours ──
   Aujourd'hui une erreur définitive (mot de passe changé, coffre recréé, copie trop grosse)
   se peint comme un simple « envoi raté », avec un bouton « Réessayer » qui ne servira à rien.
   `QGCoffre.resume().aRelier` permet de la distinguer : voici sa peau, sur les jetons. */

/* la pastille de Réglages (.etat-coffre) */
.etat-coffre.coffre-relier::before { background: var(--rouge); }
.etat-coffre.coffre-relier { color: var(--alerte); }
.etat-coffre.coffre-envoi::before { background: var(--orange); animation: pulse-etat 1.2s ease-in-out infinite; }

/* le point sur le carré QG de l'en-tête */
.marque-qg[data-etat="relier"]::after { display: block; background: var(--rouge); animation: pulse-etat 1.6s ease-in-out infinite; }
.marque-qg[data-etat="envoi"]::after { display: block; background: var(--orange); animation: pulse-etat 1.2s ease-in-out infinite; }

/* la ligne d'état de l'accueil (.etat-synchro) */
.etat-synchro-relier .synchro-point { background: var(--rouge); box-shadow: 0 0 0 3px var(--alerte-fond); }
.etat-synchro-relier { color: var(--alerte); }
.etat-synchro-envoi .synchro-point { background: var(--orange); box-shadow: 0 0 0 3px var(--attention-fond); animation: pulse-etat 1.2s ease-in-out infinite; }

/* « Vos modifications ne sont pas encore dans le coffre » : la carte d'alerte de l'accueil */
.carte-non-envoye { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--alerte-fond); color: var(--encre); }
.carte-non-envoye b { display: block; color: var(--alerte); }
.carte-non-envoye .note { display: block; margin-top: 2px; color: var(--encre-douce); font-size: .85rem; }
.carte-non-envoye .bandeau-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (pointer: coarse) { .carte-non-envoye .bouton { min-height: 44px; } }

/* Réglages → Sauvegardes : dire quand les sauvegardes internes ne tiennent qu'en mémoire */
.sauvegardes-fragiles { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .82rem; color: var(--attention); }

@media (prefers-reduced-motion: reduce) {
  .etat-coffre.coffre-envoi::before,
  .marque-qg[data-etat="relier"]::after,
  .marque-qg[data-etat="envoi"]::after,
  .etat-synchro-envoi .synchro-point { animation: none; }
}

/* ── palette ── */
/* ═══════════════════════════════════════ la palette (Ctrl+K) — compléments de la refonte
   À placer JUSTE APRÈS le bloc « la palette » existant de design.css : quelques règles l'affinent
   (opacité des lignes d'aide, hauteur de la liste sur iPhone) et doivent donc passer après lui. */

/* en-tête de groupe : le même petit libellé gris capitalisé que partout ailleurs, avec son compteur */
#qg-palette .pal-groupe {
  display: flex; align-items: baseline; gap: 8px;
  text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 650; color: var(--encre-pale);
}
#qg-palette .pal-compte { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--encre-tres-pale); }

/* le champ est un type=search : on retire les décorations natives du navigateur */
#qg-palette input[type="search"] { -webkit-appearance: none; appearance: none; }
#qg-palette input[type="search"]::-webkit-search-cancel-button,
#qg-palette input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* une icône (ou les initiales du client) par type de résultat, à la place du point de 8 px */
#qg-palette .pal-item .vignette { width: 30px; height: 30px; border-radius: 8px; }
#qg-palette .pal-item .vignette .icone { width: 17px; height: 17px; }
#qg-palette .pal-item .avatar { width: 30px; height: 30px; font-size: .72rem; }

/* le montant à droite, en chiffres tabulaires ; le raccourci clavier, discret */
#qg-palette .pal-montant { flex: none; margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
#qg-palette .pal-raccourci { flex: none; font-size: 11px; letter-spacing: .04em; color: var(--encre-tres-pale); }

/* une ligne « il manque quelque chose » doit se LIRE : plus d'opacité, plus de survol trompeur */
#qg-palette .pal-item.impossible { opacity: 1; cursor: default; }
#qg-palette .pal-item.impossible b { color: var(--encre-douce); }
#qg-palette .pal-item.impossible:hover { background: transparent; }

/* « rien trouvé » : le mot cherché en gras, puis trois phrases prêtes à écrire */
#qg-palette .pal-vide b { display: block; color: var(--encre); font-weight: 650; margin-bottom: 8px; }
#qg-palette .pal-vide p { margin: 0; line-height: 1.8; }
#qg-palette .pal-vide code { background: var(--piste); border-radius: 5px; padding: 2px 6px; color: var(--encre); white-space: nowrap; }

/* le pied : les verbes qu'on peut écrire, en pastilles cliquables */
#qg-palette .pal-aide { flex-direction: column; align-items: stretch; gap: 8px; }
#qg-palette .pal-aide-titre { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 650; color: var(--encre-pale); }
#qg-palette .pal-verbes { display: flex; flex-wrap: wrap; gap: 6px; }
#qg-palette .pal-verbe {
  font: inherit; font-size: 12.5px; color: var(--encre-douce); background: var(--voile-2);
  border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
#qg-palette .pal-verbe:hover, #qg-palette .pal-verbe:focus-visible { background: var(--accent-fond); color: var(--accent); }
#qg-palette .pal-touches { display: flex; align-items: center; gap: 4px; color: var(--encre-tres-pale); }

/* le bouton « Annuler » ne sert que là où il n'y a pas de clavier physique */
#qg-palette .pal-annuler { display: none; }

@media (max-width: 640px) {
  #qg-palette .pal-champ kbd { display: none; }
  #qg-palette .pal-annuler {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-height: 44px; padding: 0 10px; margin-right: -6px;
    font: inherit; font-size: 15px; color: var(--accent); background: transparent; border: 0; cursor: pointer;
  }
  #qg-palette .pal-liste { max-height: calc(100dvh - 190px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #qg-palette .pal-item { min-height: 44px; }
  #qg-palette .pal-verbe { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; }
  #qg-palette .pal-aide { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  #qg-palette.ouverte { animation: none; }
  #qg-palette .pal-boite { animation: none; }
}

/* ── tests-outillage ── */
Aucun. Les pages de test n'émettent que #rapport et l'iframe#f, dont le style n'a pas bougé.


/* ═══════════ raccords du 7 septembre 2026 ═══════════ */

/* ── raccords : raccords-argent ── */
/* ── raccords-argent : échéancier, tri des relevés ── */
.ech-retard-detail { display: block; margin-top: 2px; color: var(--attention); font-size: .78rem; font-weight: 600; }
.tri-confiance .aide { font-variant-numeric: tabular-nums; }
.rejets-lecture summary { cursor: pointer; font-weight: 600; color: var(--encre-douce); min-height: 44px; display: flex; align-items: center; }
.liste-rejets { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.liste-rejets li { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: var(--fond); border-radius: var(--r-s); }
.rejet-extrait { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; word-break: break-word; }
.op-doute-montant { display: flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .liste-rejets { max-height: 240px; } }

/* ── raccords : raccords-qg ── */
/* palette : la version du QG, discrète en pied de la feuille d'aide */
#qg-palette .pal-version { margin-left: auto; color: var(--encre-tres-pale); font-size: .72rem; letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 480px) { #qg-palette .pal-version { display: none; } }

/* chantier : le bouton « Renouvelé → +1 an » à droite de la vignette d'hébergement / de domaine */
.hebergement-vignette .rangee-corps { flex: 1 1 auto; min-width: 0; }
.hebergement-vignette > .bouton { flex: 0 0 auto; margin-left: auto; }
@media (pointer: coarse) { .hebergement-vignette > .bouton { min-height: 44px; } }
@media (max-width: 480px) { .hebergement-vignette { flex-wrap: wrap; } .hebergement-vignette > .bouton { margin-left: 0; width: 100%; } }

/* accueil : le coffre qui ne reconnaît plus l'appareil réutilise la carte « pas encore envoyé », en plus net */
.carte-a-relier { background: var(--alerte-fond); }
.carte-a-relier .bandeau-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* réglages : la liste des soldes connus, un bouton d'effacement par compte */
#carte-soldes-connus .liste-groupee li { display: flex; align-items: center; gap: 12px; }
#carte-soldes-connus .rangee-corps { flex: 1 1 auto; min-width: 0; }
#carte-soldes-connus .bouton { flex: 0 0 auto; margin-left: auto; }
@media (pointer: coarse) { #carte-soldes-connus .bouton { min-height: 44px; } }