/* =====================================================================
   Round 27 (v0.50) : refonte graphique. Uniquement de l'apparence :
   aucune marge interne, taille de texte ou épaisseur de bordure n'a changé,
   pour que rien ne se décale (vérifié par une comparaison automatique de la
   position et de la taille de chaque élément, avant et après). Les contours
   ajoutés passent par box-shadow, qui ne prend pas de place.
   ===================================================================== */

/* ---------- Police : Figtree (licence OFL, assets/fonts/figtree-OFL.txt) ----------
   Hébergée sur le serveur (un seul fichier pour toutes les graisses).
   size-adjust et les trois overrides calent la largeur, l'interligne et la
   ligne de base exactement sur Segoe UI, l'ancienne police sous Windows
   (mesuré : 1772 px contre 1773 sur les textes de l'interface, interligne
   identique de 11 à 16 px). L'adresse doit rester identique à celle du
   préchargement dans includes/head_theme.php. */
@font-face {
  font-family: "JIT Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 98.1%;
  ascent-override: 109.9%;
  descent-override: 25.6%;
  line-gap-override: 0%;
}
/* Même fichier, calé cette fois sur Arial : avant le Round 27, les boutons et
   les champs n'héritaient pas de la police de la page et s'affichaient dans
   la police par défaut du navigateur pour les formulaires (Arial sous
   Windows, mesuré). Pour qu'aucun bouton ne change de taille, ils gardent
   l'encombrement exact d'Arial avec le dessin de Figtree (largeur au pixel
   près, interligne identique de 10 à 14 px). */
@font-face {
  font-family: "JIT Figtree UI";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 99.5%;
  ascent-override: 91%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

/* ---------- Palette claire ---------- */
:root {
  color-scheme: light;
  --font: "JIT Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: "JIT Figtree UI", Arial, sans-serif;  /* boutons et champs, voir plus haut */

  --bg: #f4f6fb;              /* fond de page */
  --surface: #ffffff;         /* panneaux, cartes, fenêtres */
  --surface-2: #eef1f7;       /* survol, champs secondaires, onglets */
  --surface-3: #e3e7f0;       /* état pressé, pistes de barres */
  --border: #e0e4ec;
  --border-strong: #c7cdd9;
  --text: #1c2130;
  --text-muted: #5b6273;
  --text-subtle: #6e7585;     /* heures du calendrier, aides (contraste 4,6) */

  --accent: #4157d4;          /* indigo "bleu nuit stellaire" */
  --accent-hover: #3446b6;
  --accent-soft: #e8ebfd;
  --accent-soft-text: #2f40a8;
  --on-accent: #ffffff;
  --focus-ring: 0 0 0 3px rgba(65, 87, 212, .22);

  --danger: #d4383d;   --danger-soft: #fde9ea;   --danger-text: #a8262b;   --danger-strong: #cc3439;
  --success: #1b9a58;  --success-soft: #e2f4ea;  --success-text: #146b3e;
  --warning: #c7820a;  --warning-soft: #fdf1da;  --warning-text: #8a5a04;
  --info-soft: #e3effd;  --info-text: #1d4fae;
  --neutral-soft: #e9ecf2;
  --status-neutral: #94a3b8;

  --now: #e5484d;
  --today-bg: rgba(65, 87, 212, .045);

  --shadow-1: 0 1px 2px rgba(20, 28, 48, .06), 0 1px 3px rgba(20, 28, 48, .07);
  --shadow-2: 0 2px 6px rgba(20, 28, 48, .07), 0 8px 24px rgba(20, 28, 48, .07);
  --shadow-3: 0 24px 56px -12px rgba(20, 28, 48, .28), 0 4px 12px rgba(20, 28, 48, .08);
  --overlay: rgba(20, 24, 36, .38);
  --toast-bg: #1c2130;
  --toast-text: #ffffff;
  --scrollbar: #c7cdd9;
  --scrollbar-hover: #a9b0be;
  --login-gradient: linear-gradient(135deg, #1c2130 0%, #26306a 55%, #4157d4 140%);


  /* Couleurs choisies par l'utilisateur : aucune retouche en clair */
  --event-filter: none;
  --card-hover-filter: brightness(0.97);

  --radius-s: 6px;
  --radius: 10px;
  --radius-l: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Anciens noms, gardés comme alias */
  --panel: var(--surface);
  --primary: var(--accent);
  --primary-dark: var(--accent-hover);
}

/* ---------- Palette sombre ----------
   data-theme est posé sur <html> par le script de includes/head_theme.php,
   avant tout affichage (choix mémorisé, sinon réglage du système). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12141a;
  --surface: #1b1e26;
  --surface-2: #242833;
  --surface-3: #2e3341;
  --border: #2c313d;
  --border-strong: #3f4555;
  --text: #e7e9ef;
  --text-muted: #a4aab7;
  --text-subtle: #8d93a1;

  --accent: #8d9cff;
  --accent-hover: #a6b2ff;
  --accent-soft: #272d52;
  --accent-soft-text: #c3cbff;
  --on-accent: #10132a;
  --focus-ring: 0 0 0 3px rgba(141, 156, 255, .28);

  --danger: #ff6b6f;   --danger-soft: #3b1f23;   --danger-text: #ffb3b5;   --danger-strong: #c93a3f;
  --success: #4cc38a;  --success-soft: #1a3226;  --success-text: #a8e8c6;
  --warning: #f0b445;  --warning-soft: #3a2e15;  --warning-text: #f7d999;
  --info-soft: #1f2d4a;  --info-text: #bcd2ff;
  --neutral-soft: #2a2f3b;
  --status-neutral: #6b7689;

  --now: #ff5a5f;
  --today-bg: rgba(141, 156, 255, .07);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-3: 0 24px 56px -12px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .05);
  --overlay: rgba(0, 0, 0, .55);
  --toast-bg: #e7e9ef;
  --toast-text: #12141a;
  --scrollbar: #3f4555;
  --scrollbar-hover: #565d70;
  --login-gradient: linear-gradient(135deg, #0b0d12 0%, #171c3a 60%, #2c3a8f 140%);


  /* Couleurs des événements très légèrement atténuées pour ne pas éblouir
     (affichage seulement : les couleurs enregistrées ne changent pas) */
  --event-filter: saturate(.92) brightness(.9);
  --card-hover-filter: brightness(1.08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
/* Les champs et boutons prennent Figtree (calée sur Arial) et les couleurs du thème */
button, input, select, textarea { font-family: var(--font-ui); }
input, select, textarea { background-color: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: var(--focus-ring); }
::placeholder { color: var(--text-subtle); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Bouton bascule clair / sombre (à gauche de "Réglages") : la lune en clair,
   le soleil en sombre. Même hauteur que les autres boutons de l'en-tête. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }  /* 17px : même hauteur que "Réglages" (31px) */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Connexion ---------- */
.login-body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--login-gradient);
}
.login-box {
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius-xl);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-3);
}
.login-box h1 { margin: 0 0 8px; font-size: 20px; text-align: center; }
.login-logo { display: block; width: 72px; height: 72px; border-radius: 16px; margin: 0 auto -4px; box-shadow: var(--shadow-2); }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.login-box input {
  padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 14px;
}
.login-box button {
  margin-top: 8px; padding: 10px; background: var(--accent); color: var(--on-accent); border: none;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-1);
}
.login-box button:hover { background: var(--accent-hover); }
.login-error { color: var(--danger); font-size: 13px; margin: 0; }

/* ---------- Layout général ---------- */
.topbar {
  height: 56px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.topbar-left { display: flex; align-items: center; gap: 24px; }
.topbar h1 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 10px; }
.brand-logo { display: block; width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; }   /* logo de Damien (Round 30) */
.topbar-actions { display: flex; gap: 8px; align-items: center; }

.toplevel-nav { display: flex; gap: 4px; }
.toplevel-btn {
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-pill); padding: 7px 14px;
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  transition: background-color .15s, color .15s;
}
.toplevel-btn:hover { background: var(--surface-2); color: var(--text); }
.toplevel-btn.active { background: var(--accent-soft); color: var(--accent-soft-text); border-color: var(--accent-soft); font-weight: 600; }

.page-view { padding: 24px 32px; height: calc(100vh - 56px); overflow-y: auto; }
.page-view .empty-state { max-width: 480px; margin: 60px auto 0; text-align: center; }
.page-view .empty-state h2 { color: var(--text); margin-bottom: 10px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-header h2 { margin: 0; font-size: 20px; }
.page-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.icon-btn {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 10px;
  cursor: pointer; color: var(--text); text-decoration: none; font-size: 13px;
  transition: background-color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }

.layout { display: flex; height: calc(100vh - 56px); }

.sidebar {
  width: 320px; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.tabs { display: flex; border-bottom: 1px solid var(--border); flex-wrap: nowrap; }
.tab-btn {
  flex: 1 1 0; min-width: 0; padding: 10px 2px; border: none; background: none; cursor: pointer;
  font-size: 11px; color: var(--text-muted); border-bottom: 2px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.tab-panel { display: none; flex: 1; overflow-y: auto; padding: 12px; flex-direction: column; }
.tab-panel.active { display: flex; }
/* Ascenseur de la sidebar plus discret et plus fin que le rendu par défaut du
   navigateur (Round 16), qui détonne sur une colonne aussi étroite dès que
   la liste des projets s'allonge. */
.tab-panel { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.tab-panel::-webkit-scrollbar { width: 6px; }
.tab-panel::-webkit-scrollbar-track { background: transparent; }
.tab-panel::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
.tab-panel::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.panel-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.visibility-toggle { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.sub-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.sub-tab-btn, .ev-subtab-btn {
  flex: 1; padding: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill);
  cursor: pointer; font-size: 12px; color: var(--text-muted);
  transition: background-color .15s, color .15s, border-color .15s;
}
.sub-tab-btn:hover, .ev-subtab-btn:hover { background: var(--surface-2); color: var(--text); }
.sub-tab-btn.active, .ev-subtab-btn.active { background: var(--accent-soft); color: var(--accent-soft-text); border-color: var(--accent-soft); }

/* Pastille de comptage discrète sur les onglets "En cours"/"En attente"
   (Round 18) : simple repère textuel discret à l'origine, transformé en
   Round 21 en petite pastille ronde façon notification (fond coloré, texte
   blanc), plus lisible d'un coup d'œil. Masquée tant qu'aucun projet n'est
   présent dans l'onglet (classe .tab-count-visible ajoutée en JS), pour ne
   pas afficher un "0" inutile. */
.tab-count {
  display: none;
  min-width: 18px; height: 18px; padding: 0 5px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.tab-count.tab-count-visible { display: inline-flex; }

/* Filtre Tout/Travail/Perso des Rendez-vous (Round 18) : même principe que
   .sub-tabs/.sub-tab-btn ci dessus mais un cran plus discret (marge réduite,
   texte plus petit), pour bien le distinguer visuellement du sous-onglet
   À venir/Passés au dessus, dont il dépend sans jamais s'y substituer. */
.ev-cat-filters { margin-top: -2px; }
.ev-catfilter-btn {
  flex: 1; padding: 4px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill);
  cursor: pointer; font-size: 11px; color: var(--text-muted);
}
.ev-catfilter-btn:hover { background: var(--surface-2); }
.ev-catfilter-btn.active { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }

.btn-primary {
  background: var(--accent); color: var(--on-accent); border: none; padding: 8px 12px; border-radius: var(--radius-pill);
  cursor: pointer; font-size: 13px; box-shadow: var(--shadow-1);
  transition: background-color .15s, box-shadow .15s;
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-2); }
.btn-secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); padding: 8px 12px;
  border-radius: var(--radius-pill); cursor: pointer; font-size: 13px;
  transition: background-color .15s;
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger-strong); color: #fff; border: none; padding: 8px 12px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13px; }
.btn-danger:hover { filter: brightness(.94); }

.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-card {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); padding: 8px 10px;
  background: var(--surface); cursor: pointer; position: relative; box-shadow: var(--shadow-1);
  transition: box-shadow .15s;
}
.item-card:hover { box-shadow: var(--shadow-2); }
.item-card h4 { margin: 0 0 4px; font-size: 13px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title-row h4 { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.priority-bars { display: flex; align-items: flex-end; gap: 1.5px; flex-shrink: 0; height: 12px; }
.priority-bars .bar { width: 3px; height: 100%; background: var(--surface-3); border-radius: 1px; }
.priority-bars .bar.filled.low { background: var(--success); }
.priority-bars .bar.filled.mid { background: var(--warning); }
.priority-bars .bar.filled.high { background: var(--danger); }
.item-card .meta { font-size: 11px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.item-card .progress-bar { height: 5px; background: var(--surface-3); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.item-card .progress-bar > div { height: 100%; background: var(--accent); border-radius: inherit; }
.badge {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 10px; background: var(--neutral-soft); color: var(--text-muted);
}
.badge.priority-1, .badge.priority-2 { background: var(--danger-soft); color: var(--danger-text); }
.badge.priority-3, .badge.priority-4 { background: var(--warning-soft); color: var(--warning-text); }

.empty-state { color: var(--text-muted); font-size: 13px; text-align: center; padding: 30px 10px; }

.reminder-check { display: flex; align-items: center; flex-shrink: 0; }
.reminder-check input { margin: 0; cursor: pointer; }
.reminder-done h4 { text-decoration: line-through; color: var(--text-muted); }

/* Recherche et filtres de l'onglet Historique (sous-tab "Historique" de la
   sidebar Projets) : cachés par défaut, affichés uniquement sur cet onglet.
   La recherche par nom tient sur une seule ligne avec le bouton qui déplie les
   filtres (client / catégorie / période), repliés par défaut pour rester discrets. */
.history-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.history-filters[hidden] { display: none; }
.history-search-row { display: flex; align-items: center; gap: 6px; }
.history-search-row input[type=text] {
  flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 12px;
  color: var(--text); background: var(--surface);
}
.history-search-row .icon-btn {
  flex-shrink: 0; padding: 5px 8px; font-size: 13px; line-height: 1;
}
.history-search-row .icon-btn.active { background: var(--accent-soft); border-color: var(--accent); }
/* Sous-onglet "En attente" (Round 16) : pas de recherche ni de filtre par
   client/catégorie/période comme pour "En cours" et l'Historique, seulement
   le tri (déplacé dans les filtres pour tous les sous-onglets, voir plus
   bas) : le bouton se retrouve donc seul sur sa ligne, poussé à droite. */
.history-search-row.sort-only { justify-content: flex-end; }
.history-filters-panel { display: flex; flex-direction: column; gap: 6px; }
.history-filters-panel[hidden] { display: none; }
.history-filters-row { display: flex; align-items: center; gap: 8px; }
.history-filters-row select {
  flex: 1; padding: 5px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 12px;
  color: var(--text); background: var(--surface); min-width: 0;
}
.history-filters-row label {
  flex: 1; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); min-width: 0;
}
.history-filters-row input[type=date] {
  flex: 1; min-width: 0; padding: 4px 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 12px;
  color: var(--text); background: var(--surface);
}
.btn-load-more { width: 100%; margin-top: 4px; text-align: center; }

.calendar-area { flex: 1; padding: 12px; overflow: auto; }
#calendar {
  background: var(--surface); border-radius: var(--radius-l); padding: 10px; height: 100%;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border);
}

/* ---------- Calendrier : apparence de FullCalendar 6.1.21 ----------
   FullCalendar déclare ses variables --fc-* sur :root (mesuré au Round 27) ;
   les redéfinir sur .fc l'emporte quel que soit l'ordre des feuilles. Pour
   les autres règles, on garde au moins la spécificité de FullCalendar
   (".fc .fc-xxx"). Ne JAMAIS toucher ici à l'espacement vertical des
   événements ni à la taille de texte du calendrier : 2px de plus coupent les
   créneaux de 15 minutes (vérifié sur maquette). La hauteur des créneaux reste
   gérée plus bas par --jit-slot-height. */
.fc {
  --fc-page-bg-color: var(--surface);
  --fc-border-color: var(--border);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-neutral-text-color: var(--text-muted);
  --fc-today-bg-color: var(--today-bg);
  --fc-now-indicator-color: var(--now);
  --fc-highlight-color: var(--accent-soft);
  --fc-more-link-bg-color: var(--surface-3);
  --fc-list-event-hover-bg-color: var(--surface-2);
  --fc-button-text-color: var(--text);
  --fc-button-bg-color: var(--surface);
  --fc-button-border-color: var(--border-strong);
  --fc-button-hover-bg-color: var(--surface-2);
  --fc-button-hover-border-color: var(--border-strong);
  --fc-button-active-bg-color: var(--accent-soft);
  --fc-button-active-border-color: var(--accent-soft);
}
.fc .fc-button { box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { color: var(--accent-soft-text); }
.fc .fc-button-group > .fc-button:first-child,
.fc .fc-toolbar > * > .fc-button { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
.fc .fc-button-group > .fc-button:last-child,
.fc .fc-toolbar > * > .fc-button { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
.fc .fc-button-primary:disabled { color: var(--text-subtle); }
.fc .fc-col-header-cell-cushion { color: var(--text-muted); }
/* Date du jour dans une pastille d'accent : seulement le texte de la date
   (pas la roue des réglages du jour juste en dessous). Les deux ombres
   décalées élargissent la pastille sans marge interne, donc sans rien
   décaler. */
.fc .fc-day-today .fc-col-header-cell-cushion > div > div:not(.fc-day-header-tools) {
  color: var(--on-accent); background: var(--accent); border-radius: var(--radius-pill);
  box-shadow: -6px 0 0 0 var(--accent), 6px 0 0 0 var(--accent);
}
.fc .fc-day-today .fc-col-header-cell-cushion { color: var(--accent); }
.fc .fc-daygrid-day-number { color: var(--text-muted); }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: var(--text-subtle); }
/* Vues Jour et Semaine, à la manière de Google Agenda (demande de Damien) :
   l'en-tête des jours et la colonne des heures sortent du quadrillage. Les
   bordures deviennent transparentes plutôt que supprimées, pour ne changer
   aucune dimension (les événements restent exactement à leur place). Les
   heures sont posées sur leur ligne, à la hauteur exacte de l'heure ; la
   première (6 h), qui serait coupée à moitié par le haut de la grille, est
   masquée, comme Google Agenda le fait pour minuit. Le jour reste sur une
   seule ligne ("lun. 12/10") pour ne pas perdre de place en hauteur. */
.fc-theme-standard .fc-scrollgrid { border-top-color: transparent; border-left-color: transparent; }
.fc-theme-standard .fc-scrollgrid-section-header > th,
.fc-theme-standard .fc-scrollgrid-section-body > td { border-right-color: transparent; border-bottom-color: transparent; }
.fc-theme-standard .fc-col-header th { border-color: transparent; }
.fc .fc-col-header-cell-cushion { font-weight: 500; }
.fc .fc-day-today .fc-col-header-cell-cushion { font-weight: 600; }
.fc-theme-standard td.fc-timegrid-slot-label,
.fc-theme-standard td.fc-timegrid-axis { border-color: transparent; }
.fc .fc-timegrid-slot-label { vertical-align: top; }
.fc .fc-timegrid-slot-label-cushion { transform: translateY(-50%); }
.fc .fc-timegrid-slots tr:first-child .fc-timegrid-slot-label-cushion { visibility: hidden; }

/* Repère de l'heure actuelle à la manière de Google Agenda : une boule rouge
   au début de la ligne (dans la colonne du jour), plus de flèche dans la
   colonne des heures. Le conteneur de la ligne coupe ce qui dépasse : on
   l'autorise à déborder pour que la boule s'affiche en entier. */
.fc .fc-timegrid-now-indicator-line { border-top-width: 2px; }
.fc .fc-timegrid-now-indicator-arrow { display: none; }
.fc .fc-timegrid-col .fc-timegrid-now-indicator-container { overflow: visible; }
.fc .fc-timegrid-now-indicator-line::before {
  content: ""; position: absolute; left: -6px; top: -7px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--fc-now-indicator-color);
}
/* Événements : arrondis et ombre légère ; la couleur reste celle choisie par
   l'utilisateur (seulement un peu atténuée en sombre, voir --event-filter) */
.fc .fc-event { border-radius: var(--radius-s); filter: var(--event-filter); }
.fc .fc-timegrid-event { box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.fc .fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: 0 0 0 1px var(--fc-page-bg-color), 0 1px 2px rgba(0, 0, 0, .14); }

.fc-day-header-tools { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 2px; }
.fc-gear-btn {
  border: none; background: transparent; color: var(--text-subtle); border-radius: var(--radius-pill);
  font-size: 10px; padding: 2px 5px; cursor: pointer; line-height: 1;
  transition: background-color .15s, color .15s;
}
.fc-gear-btn:hover { background: var(--surface-2); color: var(--text); }
.fc-week-number-badge { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--text-muted); vertical-align: middle; }
/* Les pastilles client/catégorie (et le reste du contenu d'un événement) ne
   doivent jamais déborder visuellement du bloc de l'événement sur le calendrier :
   ça se produisait pile sur un créneau d'1h (juste assez de place pour l'heure et
   le titre, plus assez pour les pastilles). Tout ce qui ne rentre pas est
   maintenant proprement masqué plutôt que de déborder par dessus les créneaux
   voisins, comme c'était déjà le cas naturellement sur un créneau très court. */
.fc-event-main { overflow: hidden; }

/* flex-wrap: nowrap + min-width: 0 sur les pastilles : si les deux ne tiennent pas
   côte à côte, elles rétrécissent ensemble (avec "…") plutôt que la deuxième
   passant sur une ligne en dessous, invisible dès qu'un créneau est un peu court
   (voir le correctif de débordement plus haut). */
.fc-event-badges { display: flex; gap: 4px; margin-top: 1px; flex-wrap: nowrap; align-items: center; line-height: 1; }
.fc-event-badge {
  font-size: 10px; line-height: 1.3; padding: 0 6px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1;
}
.fc-event-badge-client { background: rgba(0, 0, 0, .35); color: #fff; }
.fc-event-badge-category { background: rgba(255, 255, 255, .85); color: #1f2430; }

/* Vues jour/semaine : ligne commune à l'heure et aux pastilles, heure alignée
   à gauche et pastilles à droite (à l'opposé), plutôt que les pastilles
   empilées sous le titre. .fc-event-time garde sa largeur naturelle, les
   pastilles se poussent à l'extrémité opposée via justify-content. */
.fc-event-toprow { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.fc-event-toprow .fc-event-time { flex-shrink: 0; }
.fc-event-toprow .fc-event-badges { margin-top: 0; min-width: 0; }

/* Titre de l'événement (nom du projet) : un peu plus affirmé que le rendu par
   défaut de FullCalendar (qui ne le mettait pas en gras sur les vues jour/
   semaine), sans non plus l'agrandir de façon exagérée. */
.fc-event-title { font-weight: 600; font-size: 1.05em; }

/* Note propre à une seule occurrence d'un récurrent (Round 17), affichée
   sous le titre. Aucune mesure d'espace disponible n'est nécessaire : le
   conteneur de l'événement est déjà en overflow: hidden (voir .fc-event-main
   ci dessus), donc la note disparaît naturellement dès qu'il n'y a plus la
   place pour l'afficher, sans jamais déborder du bloc. */
.fc-event-occurrence-note {
  font-size: .85em; font-style: italic; opacity: .9; margin-top: 1px;
  white-space: normal; line-height: 1.2;
}


/* Hauteur des créneaux du calendrier (Round 18bis, ajustée au Round 20) : par
   défaut FullCalendar donne à chaque demi heure une hauteur fixe d'1,5em
   (~21px), quelle que soit la taille de la fenêtre de Damien, ce qui ne
   laissait qu'une dizaine de pixels à un quart d'heure une fois affiché :
   illisible, et impossible à "attraper" à la souris pour le déplacer ou le
   redimensionner (retour de Damien après le correctif du chevauchement du
   Round 17bis). Plutôt que de réduire la plage horaire affichée (6h à 22h
   reste accessible en entier), on agrandit la hauteur naturelle de chaque
   créneau : la plage entière dépasse alors la hauteur disponible à l'écran,
   et FullCalendar fait apparaître de lui même un ascenseur interne au
   calendrier (le reste de la page ne bouge pas). Voir aussi le calcul du
   défilement initial (scrollTime) dans app.js, qui positionne la vue sur une
   plage réduite et confortable à l'ouverture plutôt que de partir tout en
   haut à 6h.
   Round 20 : un premier réglage fixe à 3em (42px) s'est révélé trop grand à
   l'usage (plus assez de créneaux visibles d'un coup d'œil). La hauteur est
   donc maintenant pilotée par une variable CSS (--jit-slot-height), avec une
   valeur par défaut de 30px (un compromis entre les 21px d'origine et les
   42px du premier essai), ajustable en direct par Damien via le curseur "Taille
   des créneaux" (Round 25 : dans les Réglages, onglet Général, section
   "Affichage du calendrier" ; au Round 20 il était au dessus du calendrier).
   Le réglage choisi est mémorisé dans le navigateur (localStorage), pas en
   base de données : purement une préférence d'affichage locale à l'ordinateur
   utilisé. */
:root { --jit-slot-height: 30px; }
.fc-timegrid-slot, .fc-timegrid-slot-lane { height: var(--jit-slot-height) !important; }
/* Contour des heures de travail effectives du jour (réglage par défaut ou
   surcharge du jour via l'icône ⚙️), en vues jour/semaine, pour les repérer
   d'un coup d'œil sans que ce soit trop appuyé. Un contour par plage (matin et
   après midi séparés s'il y a une pause), directement dans la colonne du jour. */
.fc-work-hours-box {
  position: absolute; left: 2px; right: 2px;
  border: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: var(--radius-s);
  box-sizing: border-box;
  pointer-events: none;
}


/* ---------- Modales ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center;
  justify-content: center; z-index: 1000; padding: 20px;
}
.modal-box {
  background: var(--surface); border-radius: var(--radius-xl); width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto; padding: 20px; box-shadow: var(--shadow-3);
  position: relative;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
}
.modal-box.modal-box-wide { max-width: 920px; }
.modal-box h2 { margin-top: 0; margin-right: 30px; font-size: 17px; }
.modal-title-row { display: flex; align-items: center; gap: 10px; margin-right: 30px; flex-wrap: wrap; }
.modal-title-row h2 { margin: 0; }
.icon-btn-edit {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-pill); padding: 3px 9px;
  display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 11px; color: var(--text-muted);
  flex-shrink: 0; white-space: nowrap;
}
.icon-btn-edit:hover { background: var(--surface-3); color: var(--text); }
.modal-close-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s, color .15s;
}
.modal-close-x:hover { background: var(--surface-2); color: var(--text); }
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row.inline { flex-direction: row; align-items: center; gap: 8px; }
.form-row label { font-size: 12px; color: var(--text-muted); }
.form-row input[type=text], .form-row input[type=number], .form-row input[type=date], .form-row input[type=password],
.form-row input[type=time], .form-row select, .form-row textarea {
  padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 13px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.form-row input[type=text]:hover, .form-row input[type=number]:hover, .form-row input[type=date]:hover, .form-row input[type=password]:hover,
.form-row input[type=time]:hover, .form-row select:hover, .form-row textarea:hover { border-color: var(--text-subtle); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* Pareil que .history-filters[hidden] plus haut : un sélecteur de classe (ici
   .form-grid, display:grid) l'emporterait sinon sur la règle [hidden] du
   navigateur à spécificité égale, laissant les champs de pause visibles même
   une fois la case "Prévoir une pause" décochée. */
#d-break-fields[hidden] { display: none; }
.modal-actions { display: flex; justify-content: space-between; margin-top: 16px; gap: 8px; flex-wrap: wrap; }
.modal-actions .right { display: flex; gap: 8px; margin-left: auto; }

.weekday-toggles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.weekday-toggle { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text); }

/* Curseur de taille des créneaux dans les Réglages (Round 25) */
.slot-height-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slot-height-control input[type="range"] { flex: 0 1 220px; min-width: 120px; }
.slot-height-value { min-width: 44px; font-size: 13px; font-variant-numeric: tabular-nums; }
.slot-height-hint { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }

.steps-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.step-row { display: flex; align-items: center; gap: 8px; }
.step-row.dragging { opacity: .4; }
.step-drag-handle { cursor: grab; color: var(--text-muted); font-size: 14px; flex-shrink: 0; user-select: none; touch-action: none; }
.step-drag-handle:active { cursor: grabbing; }
.step-row input[type=text] { flex: 1; }
.step-row input[type=range] { width: 100px; }
.step-row .step-pct { width: 34px; font-size: 12px; text-align: right; }
.step-row .step-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 14px; }

.notes-list { display: flex; flex-direction: column; gap: 10px; }
.note-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; background: var(--surface); }
.note-block.note-block-tabbed { display: none; }
.note-block.note-block-tabbed.active { display: block; }
.note-title-input {
  width: 100%; border: 1px solid transparent; background: none; font-size: 14px; font-weight: 600;
  padding: 4px 2px; margin-bottom: 6px; border-radius: 4px;
}
.note-title-input:hover, .note-title-input:focus { border-color: var(--border); background: var(--surface-2); outline: none; }
.note-subtabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.note-subtab-btn {
  padding: 6px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill);
  cursor: pointer; font-size: 12px; color: var(--text-muted); max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.note-subtab-btn.active { background: var(--accent-soft); color: var(--accent-soft-text); border-color: var(--accent-soft); }
.note-toolbar { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.note-toolbar button {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: var(--radius-s); padding: 4px 8px; cursor: pointer; font-size: 12px;
}
.note-editable {
  min-height: 260px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); padding: 8px; font-size: 13px; background: var(--surface); color: var(--text);
  outline: none; resize: vertical; overflow-y: auto;
}
.note-editable img { max-width: 100%; border-radius: 4px; cursor: pointer; }
.note-editable img.selected-media { outline: 3px solid var(--primary); }
.note-editable.drag-over { border: 2px dashed var(--accent); background: var(--accent-soft); }
.note-block-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

.color-swatch {
  width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); cursor: pointer; display: inline-block;
}

.priority-slider-row { display: flex; align-items: center; gap: 10px; }
.priority-slider-row input[type=range] { flex: 1; }

/* Curseur de priorité (vert -> orange -> rouge selon le niveau) et curseur
   d'avancement manuel ou d'étape (jaune -> vert selon le pourcentage) : la
   couleur est calculée et appliquée en JS (voir bindLiveRangeColor) pour
   refléter la position du curseur en temps réel. */

/* ---------- Onglets à l'intérieur d'une fenêtre modale (réglages, fiche projet...) ---------- */
.modal-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.modal-tab-btn {
  padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 13px;
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.modal-tab-btn:hover { color: var(--text); }
.modal-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; }

.blocks-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.block-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.block-row input[type=date] { flex: 1 1 130px; padding: 7px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 12px; }
.block-row input[type=time] { flex: 1 1 90px; padding: 7px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 12px; }
.block-row .step-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 14px; }

.categories-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.category-row { display: flex; align-items: center; gap: 8px; }
.category-row input[type=text] { flex: 1; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 13px; }
.category-row .step-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 14px; }

#toast {
  position: fixed; bottom: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px;
}
.toast-msg {
  background: var(--toast-bg); color: var(--toast-text); padding: 10px 14px; border-radius: var(--radius); font-size: 13px; box-shadow: var(--shadow-2);
}
.toast-msg.error { background: var(--danger-strong); color: #fff; }

.delays-table { display: grid; grid-template-columns: 1fr 80px; gap: 6px; align-items: center; margin-bottom: 10px; }
.delays-table span { font-size: 12px; }
.delays-table input { padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); }

@media (max-width: 860px) {
  .layout { flex-direction: column; height: auto; }
  .sidebar { width: 100%; max-height: 45vh; }
  .calendar-area { height: 70vh; }
}

/* Section Clients (Round 21) : remplace l'ancienne page plein écran par une
   sidebar (recherche + liste des noms) et une fiche affichée dans le
   contenu, sur le même principe .layout/.sidebar que le calendrier. */
.client-sidebar { padding: 12px; }
.client-sidebar .panel-header { margin-bottom: 0; }
.client-search-row { margin: 10px 0; }
.client-search-row input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 13px;
}
.client-list { flex: 1; overflow-y: auto; }
.client-list-item.active { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }

.client-content { flex: 1; padding: 24px 32px; overflow-y: auto; }
.client-empty-state { max-width: 480px; margin: 60px auto 0; text-align: center; }

.fiche-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fiche-header h2 { margin: 0; }

.client-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.client-tab-btn {
  padding: 8px 14px; border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--text-muted); border-bottom: 2px solid transparent;
}
.client-tab-btn:hover { color: var(--text); }
.client-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.client-tab-panel { display: none; }
.client-tab-panel.active { display: block; }

.client-fiche .form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; margin-bottom: 14px;
}
.client-fiche .form-grid label { grid-column: span 2; }
.client-fiche .form-grid label.form-col-1 { grid-column: span 1; }
.client-fiche label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.client-fiche input[type="text"], .client-fiche input[type="email"], .client-fiche input[type="tel"],
.client-fiche input[type="date"], .client-fiche textarea, .client-fiche select {
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 13px; font-family: inherit;
}

.contact-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center;
  max-width: 640px; margin-bottom: 8px;
}
.contact-row input { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 13px; }
.contact-row .icon-btn { flex-shrink: 0; }

.client-files-list { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin-top: 12px; }
.client-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); font-size: 13px; box-shadow: var(--shadow-1);
}
.client-file-row .file-meta { color: var(--text-muted); font-size: 11px; }

.time-period-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.time-period-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.time-period-controls input, .time-period-controls select {
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: 13px;
}
.time-results { display: flex; gap: 14px; flex-wrap: wrap; }
.time-result-card {
  flex: 1; min-width: 180px; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow-1);
}
.time-result-card .time-value { font-size: 22px; font-weight: 700; color: var(--text); }
.time-result-card .time-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.time-result-card.realise { border-left: 4px solid var(--success); }
.time-result-card.a-venir { border-left: 4px solid var(--accent); }
.time-result-card.total { border-left: 4px solid var(--text-muted); }

/* ---------------- Facturation (Round 22) ---------------- */

/* Sous-onglets de statut (à venir / en attente / payées) : même principe que
   .sub-tabs/.sub-tab-btn de la sidebar Projets, mais en version pleine
   largeur (texte plus lisible, boutons non étirés en flex:1) puisque la
   page Facturation occupe toute la largeur de l'écran plutôt qu'une sidebar
   étroite. Classe dédiée pour ne jamais interférer avec .sub-tab-btn. */
.inv-subtabs { display: flex; gap: 8px; margin-bottom: 16px; }
.inv-subtab-btn {
  padding: 9px 16px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill);
  cursor: pointer; font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px;
}
.inv-subtab-btn:hover { background: var(--surface-2); color: var(--text); }
.inv-subtab-btn.active { background: var(--accent-soft); color: var(--accent-soft-text); border-color: var(--accent-soft); }

/* Pastille de comptage rouge (factures en retard sur l'onglet "En attente"),
   variante "danger" de .tab-count (Round 18/21, fond var(--primary) par
   défaut) : signal plus urgent, pour ne jamais la confondre avec un simple
   compteur neutre. */
.tab-count.tab-count-danger { background: var(--danger-strong); color: #fff; }

/* Mise en page à trois colonnes (Round 22bis : colonne résumé + liste ;
   Round 23 : ajout d'une colonne filtre à droite, suite au retour de Damien
   trouvant la liste trop étroite dans une seule colonne pleine largeur
   plafonnée à 900px, puis demandant un moyen de filtrer par client) : une
   colonne de gauche à 30% pour le résumé global, une colonne de droite à
   30% pour les filtres (client en particulier) et leur propre petit résumé
   filtré, et la colonne centrale prend le reste de la largeur pour la
   liste. Mise en page flex plutôt que la grille fixe sidebar/contenu du
   Calendrier ou des Clients (pas besoin ici d'une largeur fixe en pixels,
   les zones doivent plutôt suivre la largeur disponible). Sur l'onglet
   "Payées" (pas de résumé global, voir renderInvoiceSummary()), seule la
   colonne de gauche est masquée via la classe .no-summary ; la colonne
   filtre reste affichée sur les trois onglets. */
.invoice-layout { display: flex; gap: 20px; align-items: flex-start; }
.invoice-summary-col { flex: 0 0 30%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.invoice-layout.no-summary .invoice-summary-col { display: none; }
.invoice-list-col { flex: 1 1 0%; min-width: 0; }
.invoice-filter-col { flex: 0 0 30%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }

.invoice-summary-col:empty { display: none; }

/* Colonne filtre (Round 23) : filtres (client en particulier, recherche
   libre sur le libellé) au dessus, petit résumé propre à la sélection en
   dessous (nombre de factures filtrées, total TTC, total net), vide par
   défaut tant qu'aucun filtre n'est choisi plutôt que de dupliquer le
   résumé global déjà affiché à gauche. */
.invoice-filter-box {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  background: var(--surface); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-1);
}
.invoice-filter-box h3 { margin: 0; font-size: 14px; }
.invoice-filter-summary { display: flex; flex-direction: column; gap: 12px; }
.invoice-filter-summary .meta { margin: 0; }
.invoice-filter-summary-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.invoice-summary-card {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius);
  padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow-1);
}
.invoice-summary-card .summary-value { font-size: 22px; font-weight: 700; color: var(--text); }
.invoice-summary-card .summary-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.invoice-summary-card.ttc { border-left-color: var(--text-muted); }
.invoice-summary-card.ht { border-left-color: var(--accent); }
.invoice-summary-card.net { border-left-color: var(--success); }

.invoice-list { display: flex; flex-direction: column; gap: 10px; }
/* Alignement des montants (corrigé au Round 23, retour de Damien sur un
   alignement "bizarre") : avec justify-content: space-between, les trois
   blocs de la carte (texte, montants, boutons) étaient répartis à distance
   égale les uns des autres, ce qui pouvait laisser un grand vide entre les
   montants et les boutons d'action selon la largeur du libellé. Corrigé en
   laissant .invoice-main grandir seul (flex-grow) pour occuper tout
   l'espace disponible, les montants et les boutons restant alors collés
   l'un à l'autre à droite, séparés seulement par le gap normal de la carte
   (14px, un écart visible mais pas accolé). */
.invoice-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); padding: 12px 14px;
  /* Round 24 : --card-bg est posée en style inline par invoiceCardHtml()
     quand une des 6 couleurs prédéfinies est choisie ; sans couleur (le
     blanc par défaut), on retombe sur le fond normal des cartes. */
  background: var(--card-bg, var(--surface)); cursor: pointer; box-shadow: var(--shadow-1);
}
.invoice-card .invoice-main { flex: 1 1 220px; min-width: 0; }
.invoice-card .invoice-amounts { flex: 0 0 auto; }
.invoice-card .invoice-actions { flex: 0 0 auto; }
/* filter plutôt que background au survol (Round 24) : fonctionne aussi bien
   sur le fond par défaut que sur une des 6 couleurs de carte, sans avoir à
   prévoir une teinte de survol différente pour chacune. */
.invoice-card:hover { filter: var(--card-hover-filter); }
/* Mode sombre (Round 27) : les 6 couleurs pastel (pensées pour un fond clair)
   éblouiraient. On garde leur teinte, mais foncée et un peu plus saturée,
   pour que chaque couleur reste reconnaissable sous un texte clair. Repli
   pour un navigateur sans couleurs relatives : un léger mélange avec le fond. */
:root[data-theme="dark"] .invoice-card[style*="--card-bg"] {
  background: color-mix(in srgb, var(--card-bg) 18%, var(--surface));
}
@supports (background: oklch(from red l c h)) {
  :root[data-theme="dark"] .invoice-card[style*="--card-bg"] {
    background: oklch(from var(--card-bg) .30 calc(c * 1.5) h);
    border-top-color: oklch(from var(--card-bg) .38 calc(c * 1.5) h);
    border-right-color: oklch(from var(--card-bg) .38 calc(c * 1.5) h);
    border-bottom-color: oklch(from var(--card-bg) .38 calc(c * 1.5) h);
  }
}
.invoice-card.dragging { opacity: .4; }
/* Poignée de glissé déposé du tri personnalisé (Round 24), même principe
   visuel que .step-drag-handle (fiche projet). */
.invoice-drag-handle { cursor: grab; color: var(--text-muted); font-size: 16px; flex-shrink: 0; user-select: none; touch-action: none; }
.invoice-drag-handle:active { cursor: grabbing; }
.invoice-card.status-a_venir { border-left-color: var(--status-neutral); }
.invoice-card.status-en_attente { border-left-color: var(--warning); }
.invoice-card.status-payee { border-left-color: var(--success); }
.invoice-card.overdue { border-left-color: var(--danger); }
/* Nom du client mis en avant au dessus du libellé (Round 22bis, retour de
   Damien : le libellé seul ne suffit pas à se repérer vite dans la liste),
   le libellé repassant en second plan, plus petit et plus discret. */
.invoice-card .invoice-main .invoice-client-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.invoice-card .invoice-main h4 { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.invoice-card .invoice-main .meta { font-size: 11px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Montants à droite (Round 22bis) : le TTC en gros (ce qui arrive réellement
   sur le compte de Damien, donc le plus facile à pointer contre son relevé
   bancaire), le HT puis l'achat éventuel juste en dessous en gras mais plus
   petits, et le bénéfice net (HTHC ou HTHCHA s'il y a achat) dans une
   pastille à part, visible mais moins proéminente que le TTC. */
.invoice-card .invoice-amounts { text-align: right; }
.invoice-card .invoice-amounts .ttc-amount { font-size: 20px; font-weight: 700; color: var(--text); display: block; }
.invoice-card .invoice-amounts .sub-amount { font-size: 13px; font-weight: 700; color: var(--text-muted); display: block; }
.invoice-card .invoice-amounts .net-benefit-pill {
  display: inline-block; margin-top: 5px; padding: 3px 10px; border-radius: 999px;
  background: var(--success-soft); color: var(--success-text); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.badge.badge-overdue { background: var(--danger-soft); color: var(--danger-text); }
.badge.badge-service { background: var(--info-soft); color: var(--info-text); }
.badge.badge-achat_vente { background: var(--warning-soft); color: var(--warning-text); }
.badge.badge-custom { background: var(--neutral-soft); color: var(--text-muted); }
.invoice-card .invoice-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.invoice-card .btn-mark-paid, .invoice-card .btn-duplicate-invoice { flex-shrink: 0; white-space: nowrap; }

/* Fiche facture (fenêtre modale) : aperçu en direct des montants calculés,
   mis à jour en JavaScript (updateInvoicePreview()) à chaque changement du
   TTC, du pourcentage de charge ou du montant d'achat, avant même
   l'enregistrement (qui recalcule et stocke ces mêmes montants côté PHP,
   seule source de vérité réelle — voir api/invoices.php). */
#inv-preview { margin: -4px 0 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-s); font-size: 13px; }

/* Pastilles de couleur de la fiche facture (Round 24) : 6 choix prédéfinis
   cliquables, la sélection active ressortant par un contour épais de la
   couleur du site plutôt qu'une coche (plus simple et tout aussi lisible à
   cette taille). */
.invoice-color-picker { display: flex; gap: 8px; }
.invoice-color-swatch {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; padding: 0;
}
.invoice-color-swatch.selected { border: 2px solid var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#inv-purchase-row[hidden], #inv-pending-fields[hidden], #inv-paid-field[hidden] { display: none; }

/* ---------- Icônes des boutons (Round 27) ----------
   Pictogrammes au trait (style Lucide, licence ISC), posés en CSS sur les
   boutons concernés : un masque teinté avec la couleur du texte, donc juste
   en clair comme en sombre, sans aucune image à charger. Pour en ajouter une,
   compléter la liste des sélecteurs ci dessous et sa variable --ico. */
[id$="-save"]::before,
#cf-save-general::before,
.note-save::before,
.btn-danger::before,
.btn-duplicate-invoice::before,
#inv-duplicate::before,
.btn-mark-paid::before,
a.btn-secondary[href="api/backup.php"]::before,
#blk-edit::before,
#btn-settings::before,
.fc-gear-btn::before,
.topbar-actions a[href="logout.php"]::before,
#actif-filter-toggle::before,
#attente-filter-toggle::before,
#hist-filter-toggle::before,
#inv-filter-reset::before,
#d-reset::before,
#s-slot-height-reset::before,
#s-pwd-change::before,
.toplevel-btn[data-view="calendrier"]::before,
#nc-evenement::before,
.toplevel-btn[data-view="clients"]::before,
.toplevel-btn[data-view="facturation"]::before,
.toplevel-btn[data-view="temps"]::before,
#nc-projet::before,
#nc-recurrent::before,
#nc-maintenance::before,
#nc-rappel::before {
  content: ""; display: inline-block; flex-shrink: 0;
  width: 1.1em; height: 1.1em; margin-right: .45em; vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;
}
[id$="-save"], #cf-save-general, .note-save { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E"); }
.btn-danger { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.btn-duplicate-invoice, #inv-duplicate { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
.btn-mark-paid { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
a.btn-secondary[href="api/backup.php"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
#blk-edit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.17 6.81a2.83 2.83 0 0 0-4-4L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
#btn-settings, .fc-gear-btn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.topbar-actions a[href="logout.php"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
#actif-filter-toggle, #attente-filter-toggle, #hist-filter-toggle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); }
#inv-filter-reset, #d-reset, #s-slot-height-reset { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
#s-pwd-change { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E"); }
.toplevel-btn[data-view="calendrier"], #nc-evenement { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.toplevel-btn[data-view="clients"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.toplevel-btn[data-view="facturation"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8M12 17.5v-11'/%3E%3C/svg%3E"); }
.toplevel-btn[data-view="temps"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
#nc-projet { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
#nc-recurrent { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
#nc-maintenance { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
#nc-rappel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
/* Boutons réduits à leur icône : pas de marge à droite de l'icône */
#actif-filter-toggle::before, #attente-filter-toggle::before, #hist-filter-toggle::before { margin-right: 0; }
/* Roue des réglages du jour (en-tête du calendrier) : icône seule, un peu plus grande que le texte */
.fc-gear-btn::before { margin-right: 0; width: 1.3em; height: 1.3em; vertical-align: middle; }

/* Fiche client, onglet Notes : un peu d'air entre le bouton "+ Ajouter une
   note" et les notes en dessous (dans les fenêtres projet, maintenance et
   facture, le bouton est placé après les notes et n'est pas concerné). */
#cf-notes-container { margin-top: 12px; }

/* =====================================================================
   Version téléphone (Round 28, v0.52)
   Règle d'or : rien ici ne s'applique au dessus de 767px de large. Sur
   ordinateur (et tablette), les éléments propres au téléphone sont masqués
   par la ligne ci dessous, et tout le reste vit dans la media query. Les
   classes posées sur <body> (m-listes, m-client-open, m-inv-filters-open)
   n'ont d'effet que dans cette media query. Vérifié par une comparaison de
   la mise en page de l'ordinateur avant et après (0 écart).
   ===================================================================== */
.mobile-nav, .m-only { display: none; }

@media (max-width: 767px) {
  :root { --m-nav-h: calc(64px + env(safe-area-inset-bottom)); }

  /* ----- Socle : plus d'en-tête, barre du bas, hauteurs ----- */
  .topbar { display: none; }
  body { padding-bottom: var(--m-nav-h); overscroll-behavior-y: none; }
  .layout, .page-view { height: calc(100dvh - var(--m-nav-h)); }
  .page-view { padding: 16px 14px 24px; }
  .m-only { display: inline-flex; }

  .mobile-nav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: var(--m-nav-h); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .mobile-nav button {
    border: none; background: transparent; color: var(--text-muted); font-size: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav .m-pill { width: min(56px, 100%); height: 30px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; transition: background-color .15s; }
  .mobile-nav .m-pill::before {
    content: ""; width: 24px; height: 24px; background-color: currentColor;
    -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;
  }
  .mobile-nav button.active { color: var(--accent-soft-text); font-weight: 600; }
  .mobile-nav button.active .m-pill { background: var(--accent-soft); }
  .mobile-nav [data-mnav="calendrier"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
  .mobile-nav [data-mnav="listes"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h.01M3 18h.01M3 6h.01M8 12h13M8 18h13M8 6h13'/%3E%3C/svg%3E"); }
  .mobile-nav [data-mnav="clients"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
  .mobile-nav [data-mnav="facturation"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8M12 17.5v-11'/%3E%3C/svg%3E"); }
  .mobile-nav [data-mnav="plus"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E"); }

  /* ----- Champs à 16px (lisibles, sans zoom automatique) et zones de 44px ----- */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, .note-editable { font-size: 16px !important; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select { min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  input[type=color] { min-height: 44px; min-width: 56px; }
  button, .btn-primary, .btn-secondary, .btn-danger, a.icon-btn, a.btn-secondary { min-height: 44px; }
  .btn-primary, .btn-secondary, .btn-danger { font-size: 15px; padding-left: 16px; padding-right: 16px; }
  .icon-btn { min-width: 44px; justify-content: center; }
  .fc-gear-btn, .step-del, .note-toolbar button { min-height: 36px; min-width: 36px; }

  /* ----- Agenda et Listes : la barre latérale devient l'onglet "Listes" ----- */
  #view-calendrier { flex-direction: column; }
  #view-calendrier .sidebar { display: none; }
  #view-calendrier .calendar-area { display: block; height: 100%; padding: 8px; }
  body.m-listes #view-calendrier .sidebar { display: flex; width: 100%; height: 100%; max-height: none; border-right: none; }
  body.m-listes #view-calendrier .calendar-area { display: none; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tab-btn { flex: 0 0 auto; padding: 12px 14px; font-size: 14px; min-height: 48px; }
  .tab-panel { padding: 14px; }
  .sub-tab-btn, .ev-subtab-btn { font-size: 14px; }
  .ev-catfilter-btn { font-size: 13px; }
  .visibility-toggle { font-size: 14px; min-height: 44px; }
  .item-card { padding: 12px 14px; }
  .item-card h4 { font-size: 15px; }
  .item-card .meta { font-size: 13px; }
  .history-search-row .icon-btn { min-height: 44px; }

  /* Calendrier : barre d'outils de FullCalendar compacte (le Round 29
     apportera un en-tête propre au téléphone) */
  #calendar { padding: 8px; border-radius: var(--radius); }
  .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 6px; }
  .fc .fc-toolbar-chunk:nth-child(2) { order: -1; width: 100%; justify-content: center; text-align: center; }
  .fc .fc-toolbar-title { font-size: 18px; }
  .fc-week-number-badge { display: none; }
  .fc .fc-button { padding: 0 12px; min-height: 44px; }

  /* ----- Clients : la liste, puis la fiche en plein écran ----- */
  #view-clients { flex-direction: column; }
  #view-clients .client-sidebar { width: 100%; height: 100%; max-height: none; border-right: none; }
  #view-clients .client-content { display: none; padding: 12px 14px 24px; }
  body.m-client-open #view-clients .client-sidebar { display: none; }
  body.m-client-open #view-clients .client-content { display: block; height: 100%; }
  .m-back {
    align-items: center; gap: 4px; border: none; background: transparent; color: var(--accent);
    font-size: 16px; font-weight: 600; padding: 0 8px 0 2px; margin: 0 0 6px -4px; cursor: pointer;
  }
  .m-back::before { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; }
  .client-empty-state { display: none !important; }
  .fiche-header { flex-wrap: wrap; }
  .client-tabs { overflow-x: auto; scrollbar-width: none; }
  .client-tab-btn { flex: 0 0 auto; font-size: 15px; min-height: 48px; }
  .client-fiche .form-grid { grid-template-columns: 1fr; }
  .client-fiche .form-grid label, .client-fiche .form-grid label.form-col-1 { grid-column: span 1; }
  .contact-row { grid-template-columns: 1fr 1fr; }
  .client-file-row { flex-wrap: wrap; }

  /* ----- Facturation : une colonne, totaux en bandeau, tri et filtres en feuille ----- */
  .page-header { gap: 8px; flex-wrap: wrap; }
  .page-header h2 { flex: 1 0 100%; }
  .inv-subtabs { overflow-x: auto; scrollbar-width: none; }
  .inv-subtab-btn { flex: 0 0 auto; font-size: 14px; }
  .invoice-layout { flex-direction: column; gap: 12px; }
  .invoice-summary-col { flex: none; max-width: none; width: 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .invoice-summary-card { flex: 0 0 auto; padding: 10px 14px; }
  .invoice-summary-card .summary-value { font-size: 18px; }
  .invoice-list-col { width: 100%; }
  .invoice-card { gap: 10px; }
  .invoice-card .invoice-amounts { text-align: left; }
  .invoice-card .invoice-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .invoice-drag-handle { display: none; }   /* le tri personnalisé reste sur l'ordinateur */
  #inv-sort-custom-hint { display: none !important; }  /* son aide parle de la poignée, masquée ici */
  #m-inv-filters { align-items: center; }
  #m-inv-filters::before { content: ""; width: 18px; height: 18px; margin-right: 6px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E") no-repeat center / contain; }
  .invoice-filter-col { display: none; }
  body.m-inv-filters-open .invoice-filter-col {
    display: flex; position: fixed; left: 0; right: 0; bottom: var(--m-nav-h); z-index: 950;
    max-width: none; max-height: 75dvh; overflow-y: auto; padding: 18px 16px 20px;
    background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-3);
  }
  body.m-inv-filters-open::after { content: ""; position: fixed; inset: 0 0 var(--m-nav-h) 0; background: var(--overlay); z-index: 940; }

  /* ----- Fenêtres : plein écran, une colonne, actions toujours visibles ----- */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-box, .modal-box.modal-box-wide {
    max-width: none; width: 100%; height: 100dvh; max-height: none; border-radius: 0;
    padding: 14px 16px 0;
  }
  .modal-box h2 { font-size: 19px; margin-right: 52px; min-height: 30px; }
  .modal-close-x { width: 44px; height: 44px; top: 8px; right: 8px; font-size: 18px; }
  .modal-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .modal-tab-btn { flex: 0 0 auto; font-size: 15px; min-height: 48px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-row label { font-size: 14px; }
  .modal-box .modal-actions {
    position: sticky; bottom: 0; z-index: 2; background: var(--surface);
    margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }
  .block-row input[type=date], .block-row input[type=time] { flex-basis: 100%; }
  .step-row { flex-wrap: wrap; }
  .step-drag-handle { display: none; }      /* l'ordre des étapes reste sur l'ordinateur */
  .slot-height-control input[type="range"] { flex-basis: 100%; }

  /* Menu "Plus" : feuille en bas d'écran (classe ajoutée par openMobileMoreMenu) */
  .modal-overlay:has(.m-sheet-box) { align-items: flex-end; }
  .modal-box.m-sheet-box { height: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 18px 12px calc(84px + env(safe-area-inset-bottom)); }
  .m-menu { list-style: none; margin: 0; padding: 0; }
  .m-menu button {
    width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 12px;
    border: none; background: none; color: var(--text); font-size: 16px; text-align: left; border-radius: var(--radius); cursor: pointer;
  }
  .m-menu button:active { background: var(--surface-2); }
  .m-menu button::before { content: ""; width: 22px; height: 22px; background-color: var(--text-muted); -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }
  .m-menu .m-menu-state { margin-left: auto; color: var(--text-muted); font-size: 14px; }
  .m-menu [data-mmenu="temps"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
  .m-menu [data-mmenu="reglages"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
  .m-menu [data-mmenu="theme"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); }
  .m-menu [data-mmenu="logout"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); color: var(--danger); }
  .m-menu [data-mmenu="logout"]::before { background-color: var(--danger); }

  /* Message passager au dessus de la barre du bas */
  #toast { left: 12px; right: 12px; bottom: calc(var(--m-nav-h) + 12px); }

  /* Page de connexion */
  .login-box { width: calc(100% - 32px); max-width: 380px; }
}

/* =====================================================================
   Calendrier tactile du téléphone (Round 29, v0.54) : toujours dans la
   media query, rien ne change sur ordinateur.
   ===================================================================== */
@media (max-width: 767px) {
  /* En-tête propre au téléphone, au dessus du calendrier */
  #view-calendrier .calendar-area { display: flex; flex-direction: column; }
  body.m-listes #view-calendrier .calendar-area { display: none; }
  #calendar { flex: 1 1 0; min-height: 0; height: auto !important; border-radius: 0 0 var(--radius) var(--radius); padding-top: 4px; }
  .m-cal-head { display: block; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; padding: 4px 4px 2px; }
  .m-cal-row { display: flex; align-items: center; gap: 2px; }
  .m-cal-title { flex: 1; min-width: 0; text-align: left; border: none; background: none; color: var(--text); font-size: 20px; font-weight: 700; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .m-cal-title small { font-size: 13px; font-weight: 500; color: var(--text-muted); }
  .m-icon-btn { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: none; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .m-icon-btn:active { background: var(--surface-2); }
  .m-icon-btn::before { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }
  .m-cal-today { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
  .m-cal-today span { position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 700; }
  .m-cal-daygear { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
  .m-seg { display: flex; flex: 0 0 auto; background: var(--surface-2); border-radius: var(--radius-pill); gap: 2px; }
  .m-seg button { border: none; background: transparent; color: var(--text-muted); font-size: 14px; padding: 0 11px; border-radius: var(--radius-pill); cursor: pointer; }
  .m-seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border); }
  .m-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 2px; }
  .m-strip-day { border: none; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--text-muted); min-height: 56px; padding: 2px 0; cursor: pointer; }
  .m-strip-day b { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; color: var(--text); }
  .m-strip-day.sel b { background: var(--accent); color: var(--on-accent); font-weight: 700; }
  .m-strip-day.today:not(.sel) b { box-shadow: inset 0 0 0 2px var(--accent); }
  /* Vue Jour : l'en-tête du jour de FullCalendar ferait doublon avec la bande */
  .fc-timeGridDay-view .fc-scrollgrid-section-header { display: none; }

  /* Bouton + */
  .m-fab { position: fixed; right: 16px; bottom: calc(var(--m-nav-h) + 16px); z-index: 800; width: 56px; height: 56px; border-radius: 18px; border: none; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .m-fab::before { content: ""; width: 26px; height: 26px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") no-repeat center / contain; }
  body.m-listes .m-fab, body.m-picking .m-fab { display: none; }

  /* Bandeau Déplacer / Planifier */
  .m-pick-banner { display: flex; align-items: center; gap: 10px; background: var(--accent); color: var(--on-accent); border-radius: 16px; padding: 8px 8px 8px 14px; margin-bottom: 8px; font-size: 14px; box-shadow: var(--shadow-2); }
  .m-pick-banner[hidden] { display: none; }
  .m-pick-banner b { display: block; font-size: 15px; }
  .m-pick-banner button { margin-left: auto; flex: 0 0 auto; padding: 0 14px; border-radius: var(--radius-pill); border: none; background: rgba(255, 255, 255, .22); color: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  :root[data-theme="dark"] .m-pick-banner button { background: rgba(0, 0, 0, .18); }

  /* Feuille d'actions d'un élément */
  .modal-box.m-action-sheet { padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); }
  .m-sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 0 auto 12px; }
  .m-sheet-title { margin: 0 44px 4px 0; font-size: 18px; display: flex; gap: 8px; align-items: center; }
  .m-sheet-title i { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 12px; }
  .m-sheet-when { margin: 0; font-size: 15px; }
  .m-sheet-sub { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; }
  .m-step { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; margin-top: 10px; border-top: 1px solid var(--border); }
  .m-step > span { color: var(--text-muted); font-size: 15px; }
  .m-step > div { display: flex; align-items: center; gap: 8px; }
  .m-step button { min-width: 64px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
  .m-step button:disabled { opacity: .4; }
  .m-step b { min-width: 76px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
  .m-sheet-actions { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; margin-top: 14px; }
  .m-sheet-actions button { width: 100%; padding-left: 8px; padding-right: 8px; }

  /* Message passager avec un bouton "Annuler" */
  .toast-action { display: flex; align-items: center; gap: 12px; }
  .toast-action button { margin-left: auto; flex: 0 0 auto; border: none; background: none; color: var(--accent-soft); font-size: 15px; font-weight: 700; padding: 0 4px; cursor: pointer; }
  :root[data-theme="dark"] .toast-action button { color: var(--accent); }

  /* Planifier, sur les cartes de projet des Listes */
  .m-plan-btn { width: 44px; height: 44px; flex: 0 0 44px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
  .m-plan-btn::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M16 2v4M8 2v4M3 10h18M19 16v6M16 19h6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M16 2v4M8 2v4M3 10h18M19 16v6M16 19h6'/%3E%3C/svg%3E") no-repeat center / contain; }

  /* Vue Mois : des points de couleur à la place des éléments */
  .fc-dayGridMonth-view .fc-daygrid-day-events, .fc-dayGridMonth-view .fc-daygrid-day-bottom { display: none; }
  .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 58px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
  .fc-dayGridMonth-view .fc-daygrid-day-top { justify-content: center; }
  .fc-dayGridMonth-view .fc-daygrid-day-number { font-size: 14px; padding: 6px 4px 2px; }
  .fc .fc-dayGridMonth-view .fc-col-header-cell-cushion { font-size: 12px; }
  .m-dots { display: flex; gap: 3px; align-items: center; justify-content: center; margin-top: 2px; }
  .m-dots i { width: 7px; height: 7px; border-radius: 50%; filter: var(--event-filter); }
  .m-dots b { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-left: 1px; }
}

/* =====================================================================
   Finitions du téléphone (Round 30, v0.55) : toujours dans la media query,
   rien ne change sur ordinateur.
   ===================================================================== */
@media (max-width: 767px) {
  /* Clavier ouvert : la page se resserre au dessus du clavier (réglage
     interactive-widget=resizes-content du viewport, dans index.php) ; on y
     masque la barre du bas pour laisser la place à la saisie. Les listes
     déroulantes, dates et heures n'ouvrent pas de clavier : pas concernées.
     Pas sur la page de connexion (pas de barre du bas) : sa boîte, centrée,
     sauterait au moment de toucher "Se connecter" et le bouton serait manqué. */
  body:not(.login-body):has(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=date]):not([type=time]):not([type=file]):focus, textarea:focus, [contenteditable="true"]:focus) { --m-nav-h: 0px; }
  body:not(.login-body):has(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=date]):not([type=time]):not([type=file]):focus, textarea:focus, [contenteditable="true"]:focus) .mobile-nav,
  body:not(.login-body):has(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=date]):not([type=time]):not([type=file]):focus, textarea:focus, [contenteditable="true"]:focus) .m-fab { display: none; }

  /* Notes : barre d'outils sur une seule ligne qui défile, collée en haut
     pendant qu'on écrit une longue note */
  .note-toolbar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 0; z-index: 3; background: var(--surface);
    margin: 0 -8px 6px; padding: 6px 8px;
  }
  .modal-box .note-toolbar { top: -14px; }       /* collée au bord, par dessus la marge intérieure de la fenêtre */
  .client-content .note-toolbar { top: -12px; }
  .note-toolbar button { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .note-editable { min-height: 200px; }
  .note-block-actions { flex-wrap: wrap; }

  /* Photo directe (notes et fichiers joints d'un client) */
  .note-photo-btn, #cf-take-photo { align-items: center; justify-content: center; gap: 6px; }
  .note-photo-btn::before, #cf-take-photo::before {
    content: ""; width: 18px; height: 18px; flex: 0 0 18px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  #cf-add-file, #cf-take-photo { vertical-align: top; }
  #cf-take-photo { margin-left: 8px; }
}