/* ---------------------------------------------------------------------------
   ae-theme.css — la charte, en un seul endroit.

   POURQUOI CE FICHIER

     La palette était recopiée dans quatre fichiers (l'accueil et les trois
     outils) et elle avait déjà divergé : --radius valait 12 px ici et 10 px
     là, la même couleur rouge s'appelait --danger d'un côté et --urgent de
     l'autre, les ombres n'étaient pas les mêmes. Aucun changement d'apparence
     ne pouvait donc se faire une seule fois.

     Ce fichier est désormais la source. _worker.js l'injecte dans chaque
     outil, présent ou futur, exactement comme il injecte ae-mobile.css : on
     corrige une fois, pour tous. L'accueil le charge directement.

   IL EST INJECTÉ APRÈS le <style> de l'outil : à spécificité égale, c'est lui
   qui tranche. C'est ce qui permet d'unifier sans rouvrir chaque outil — mais
   c'est aussi pourquoi tout ce qui suit les jetons reste volontairement étroit
   et nommé : on ne veut pas casser une mise en page qu'on ne voit pas.

   Chaque outil garde une copie de secours des jetons dans son propre <style>,
   pour rester lisible si on l'ouvre seul, hors du site. Cette copie ne fait
   plus autorité : elle est écrasée par ce fichier.
   --------------------------------------------------------------------------- */

/* =========================================================================
   1. Les jetons
   ========================================================================= */

:root {
  /* --- fonds et traits ------------------------------------------------- */
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface2: #efece4;
  --surface3: #e6e1d5;      /* survol d'un élément déjà posé sur --surface2 */
  --border: #ddd7c9;
  --border-fort: #c9c1ae;

  /* --- encre ------------------------------------------------------------ */
  --text: #262420;
  --muted: #7a7268;
  --accent: #4a463d;
  --accent-light: #f1e9c8;

  /* --- couleurs de sens -------------------------------------------------
     judiciaire / amiable / administratif sont le vocabulaire du cabinet ;
     warn / danger / ok celui de l'interface. --urgent est l'ancien nom de
     --danger, conservé parce que deux outils l'emploient. */
  --judicial: #7c2c2c;  --judicial-light: #f5e8e8;
  --amiable:  #2c6b4a;  --amiable-light:  #e8f5ee;
  --admin:    #5a3e7c;  --admin-light:    #f0ecf7;
  --warn:     #b85c00;  --warn-light:     #fdf0e6;
  --danger:   #c0392b;  --danger-light:   #f9e9e7;
  --urgent:   #c0392b;
  --ok:       #2c6b4a;  --ok-light:       #e8f5ee;
  --done-bg:  #e8f5ee;
  --gold:     #cdb26a;  --gold-light:     #f7f1de;

  /* --- marque ------------------------------------------------------------ */
  --lh-gray: #5c5b59;
  --lh-cream: #f2ebce;
  --lh-ink: #3a3835;        /* encre lisible sur --lh-cream */

  /* --- reliefs ----------------------------------------------------------- */
  --shadow: 0 2px 14px rgba(30, 26, 20, .08);
  --shadow-lift: 0 6px 26px rgba(30, 26, 20, .13);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, .25);
  --radius: 12px;
  --radius-sm: 9px;
  --radius-xs: 7px;
  --radius-pill: 999px;

  /* --- divers ------------------------------------------------------------ */
  --filigrane: .017;        /* le logo de fond : présent, jamais lisible */
  --barre-h: 52px;          /* hauteur de la barre d'application */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- couleurs d'impression ---------------------------------------------
     Reprises du modèle de facture d'origine. Elles ne changent JAMAIS avec le
     thème : le document imprimé sort sur du papier blanc. */
  --print-band: #f2ebce;
  --print-ink: #595959;
  --print-divider: #5a5a5a;
  --print-tablehead: #a6a6a6;
  --print-bank: #dae9f7;
  --print-bank-border: #9fb9d6;
}

/* Sombre par réglage du système, sauf si « Clair » a été choisi
   explicitement (ae-sync.js pose alors data-theme="light"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1a17;
    --surface: #26231f;
    --surface2: #302c26;
    --surface3: #3b362e;
    --border: #433d34;
    --border-fort: #524a3e;

    --text: #ece7dd;
    --muted: #a89e8f;
    --accent: #d8c98a;
    --accent-light: #332f22;

    --judicial: #e08b8b;  --judicial-light: #3a2426;
    --amiable:  #7fcba0;  --amiable-light:  #1f3327;
    --admin:    #b79fd8;  --admin-light:    #2b2436;
    --warn:     #e2a15c;  --warn-light:     #3a2c18;
    --danger:   #e2776b;  --danger-light:   #3a201d;
    --urgent:   #e2776b;
    --ok:       #7fcba0;  --ok-light:       #1f3327;
    --done-bg:  #1f3327;
    --gold:     #cdb26a;  --gold-light:     #3a3423;

    --lh-gray: #45433f;
    --lh-cream: #e8dfb0;
    --lh-ink: #26231f;

    --shadow: 0 2px 14px rgba(0, 0, 0, .34);
    --shadow-lift: 0 6px 26px rgba(0, 0, 0, .46);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, .55);

    --filigrane: .035;
  }
}

/* Sombre choisi explicitement : gagne aussi sur un système en clair. */
:root[data-theme="dark"] {
  --bg: #1c1a17;
  --surface: #26231f;
  --surface2: #302c26;
  --surface3: #3b362e;
  --border: #433d34;
  --border-fort: #524a3e;

  --text: #ece7dd;
  --muted: #a89e8f;
  --accent: #d8c98a;
  --accent-light: #332f22;

  --judicial: #e08b8b;  --judicial-light: #3a2426;
  --amiable:  #7fcba0;  --amiable-light:  #1f3327;
  --admin:    #b79fd8;  --admin-light:    #2b2436;
  --warn:     #e2a15c;  --warn-light:     #3a2c18;
  --danger:   #e2776b;  --danger-light:   #3a201d;
  --urgent:   #e2776b;
  --ok:       #7fcba0;  --ok-light:       #1f3327;
  --done-bg:  #1f3327;
  --gold:     #cdb26a;  --gold-light:     #3a3423;

  --lh-gray: #45433f;
  --lh-cream: #e8dfb0;
  --lh-ink: #26231f;

  --shadow: 0 2px 14px rgba(0, 0, 0, .34);
  --shadow-lift: 0 6px 26px rgba(0, 0, 0, .46);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, .55);

  --filigrane: .035;
}

/* =========================================================================
   2. Les fondations communes
   ========================================================================= */

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Un anneau de focus visible partout, y compris dans les outils qui n'en
   avaient pas : on doit pouvoir se servir du logiciel au clavier. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================================
   3. La barre d'application des outils

   Les trois outils avaient trois en-têtes différents : bandeau crème avec
   logo pour le Devis, bandeau plein accent pour la Facture et les Tâches.
   Une seule barre, la même partout, celle de l'accueil.

   Le nom de classe est repris tel quel dans les trois outils (header.app),
   pour que les règles locales qui la visaient continuent de s'appliquer là où
   elles servent encore.
   ========================================================================= */

header.app {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--barre-h);
  padding: 0 18px;
  background: var(--lh-gray);
  color: var(--lh-cream);
  box-shadow: none;
  border: 0;
}

header.app .hdr-logo-zone {
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  flex: none;
}
header.app .hdr-logo {
  width: auto;
  height: 26px;
  display: block;
}

header.app .hdr-info-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
}

header.app h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lh-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le sous-titre du cabinet est déjà dans la barre de retour et sur le
   document imprimé : dans la barre, il ne fait qu'occuper la place. */
header.app .subtitle,
header.app #clock {
  display: none;
}

header.app .settings-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(242, 235, 206, .22);
  background: rgba(242, 235, 206, .1);
  color: var(--lh-cream);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
header.app .settings-btn:hover {
  background: rgba(242, 235, 206, .2);
  border-color: rgba(242, 235, 206, .38);
}

/* Un outil ouvert dans le site a déjà la barre « ← Espace Atelier » :
   deux bandeaux sombres collés font lourd, un filet les sépare. */
#ae-nav + header.app {
  border-top: 1px solid rgba(242, 235, 206, .14);
}

@media print {
  header.app { display: none !important; }
}

@media (max-width: 700px) {
  header.app { padding: 0 12px; gap: 10px; }
  header.app .hdr-logo { height: 22px; }
  header.app h1 { font-size: 14.5px; }
  header.app .settings-btn { padding: 0 10px; }
}

/* =========================================================================
   4. Les pièces communes aux trois outils

   Uniquement ce qui existait déjà sous le même nom dans les trois fichiers :
   on harmonise, on n'invente pas.
   ========================================================================= */

.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 20px 72px;
}

/* --- compteurs -----------------------------------------------------------
   Le Devis était le seul des trois à ne pas empiler le nombre et son
   libellé : ils s'affichaient collés, « 1Devis établis ». La règle est
   désormais la même pour tous. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-fort);
  border-radius: var(--radius-sm);
  box-shadow: none;
  text-align: left;
  font: inherit;
  color: inherit;
}
.stat-card .num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-card .lbl {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.stat-card.muted  { border-left-color: var(--border-fort); }
.stat-card.warn   { border-left-color: var(--warn); }
.stat-card.ok     { border-left-color: var(--ok); }
.stat-card.danger,
.stat-card.urgent { border-left-color: var(--danger); }

/* Un compteur qui filtre la liste est un bouton : il doit se comporter
   comme tel — main au survol, état visible quand il est actif. */
.stat-card[data-filtre] {
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.stat-card[data-filtre]:hover {
  background: var(--surface2);
  transform: translateY(-1px);
}
.stat-card[data-filtre][aria-pressed="true"] {
  background: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.stat-card[data-filtre][aria-pressed="true"] .lbl { color: var(--accent); }

/* --- boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, opacity .16s;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover { opacity: .88; }
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface2); border-color: var(--border-fort); }
.btn-ghost.active {
  background: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}
.btn-danger:hover { border-color: var(--danger); background: var(--danger-light); }
.btn-sm { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }

/* --- barres de commandes -------------------------------------------------
   Les actions d'un côté, les filtres de l'autre : les deux ne se lisaient
   plus, mêlés dans une même rangée de boutons identiques. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.toolbar .filter-sep {
  flex: 1;
  min-width: 0;
  height: 0;
  border: 0;
  background: none;
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-bar label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.filter-bar select,
.filter-bar input[type="date"] {
  min-height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.filter-bar .bilan {
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.search {
  min-height: 36px;
  min-width: 180px;
  padding: 0 13px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.search:focus { outline: 0; border-color: var(--accent); }

/* --- tableaux ------------------------------------------------------------ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.table-wrap table { border-collapse: collapse; width: 100%; }
.table-wrap thead th {
  background: var(--surface2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table-wrap tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover { background: var(--surface2); }

/* --- pictogrammes d'action ----------------------------------------------
   Ils étaient six par ligne, tous du même gris, « supprimer » à un pixel
   d'« envoyer ». Les outils n'en laissent plus que deux en clair ; ceux qui
   restent gagnent une cible tactile correcte et un rouge franc pour la
   suppression. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--border);
}
.icon-btn.del:hover {
  color: var(--danger);
  background: var(--danger-light);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

/* --- pastilles d'état ---------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- fenêtres ------------------------------------------------------------ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: 20px;
  background: rgba(10, 10, 10, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-modal);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-footer,
.modal-pied {
  border-top: 1px solid var(--border);
}

/* =========================================================================
   5. Le menu déroulant partagé

   Utilisé par l'accueil (le bouton « ⋯ » de la barre) et par les outils
   (les actions secondaires d'une ligne). Une seule définition, un seul
   comportement.
   ========================================================================= */

.ae-menu-fond {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: transparent;
}
.ae-menu {
  position: fixed;
  z-index: 401;
  min-width: 208px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.ae-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.ae-menu button:hover { background: var(--surface2); }
.ae-menu button[disabled] { opacity: .45; cursor: default; }
.ae-menu button.danger { color: var(--danger); }
.ae-menu button.danger:hover { background: var(--danger-light); }
.ae-menu button svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.ae-menu .ae-menu-sep {
  height: 1px;
  margin: 5px 7px;
  background: var(--border);
}
.ae-menu .ae-menu-titre {
  padding: 8px 11px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Une pastille sur le bouton qui ouvre le menu, quand une entrée réclame
   l'attention (la sauvegarde en retard, par exemple). */
.ae-pastille {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--lh-gray);
}

@media (max-width: 700px) {
  /* Sur téléphone, un menu se prend par le bas : c'est là que sont les
     pouces, et la liste peut alors être plus lisible. */
  .ae-menu {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0;
    max-width: 100%;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }
  .ae-menu button { min-height: 46px; font-size: 15px; }
  .ae-menu-fond { background: rgba(10, 10, 10, .3); }
}