/* ------------------------------------------------------------------
     Thèmes de couleurs.

     Toutes les couleurs de l'interface passent par les variables
     ci-dessous : un thème ne fait que les redéfinir. Le thème actif est
     posé sur <html data-theme="…"> par l'interface (app.js) et retenu
     dans le navigateur ; sans choix enregistré l'attribut est absent et
     le navigateur suit sa préférence clair/sombre.

     « clair » et « sombre » sont les deux thèmes d'origine.
     « nb » est le thème noir et blanc : aucune teinte, uniquement des
     niveaux de gris — les signaux (en retard, terminé, alerte) y sont
     portés par le contraste et le trait, pas par la couleur.
     ------------------------------------------------------------------ */
  :root, :root[data-theme="clair"] {
    color-scheme: light;
    --ground: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F3F4F6;
    --survol: #FAFBFC;
    --ink: #1F2328;
    --ink-soft: #5B6168;
    --ink-faint: #8A9097;
    --hairline: #E3E6EA;
    --hairline-soft: #EDEFF2;
    --accent: #2F6FB3;
    --accent-hover: #255C96;
    --accent-wash: #EAF1FA;
    --sur-accent: #FFFFFF;
    --retard: #C8372D;
    --retard-wash: #FBEDEC;
    --fait: #3E8E50;
    --fait-wash: #EAF4EC;
    --pointage: #E8762B;
    --pointage-hover: #CF6620;
    --pointage-wash: #FDF0E3;
    --sur-pointage: #FFFFFF;
    --shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    --shadow-2: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380868B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #4A6FA5; --p2: #5B8C6B; --p3: #A8646C; --p4: #8C7355;
    --p5: #7C6A9C; --p6: #A88A4F; --p7: #4F8A93; --p8: #9A6B55;
    --g1: #6F8FB8; --g2: #7FA38A; --g3: #9A8AB5; --g4: #C2A06B;
    --g5: #7FA7B0; --g6: #B88A78; --g7: #8E9AA8;

    --f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --f-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  }

  :root[data-theme="sombre"] {
    color-scheme: dark;
    --ground: #202124;
    --surface: #2D2E30;
    --surface-2: #35363A;
    --survol: #33363A;
    --ink: #E8EAED;
    --ink-soft: #9AA0A6;
    --ink-faint: #80868B;
    --hairline: #3C4043;
    --hairline-soft: #35363A;
    --accent: #93AFCF;
    --accent-hover: #AFC4DD;
    --accent-wash: #2A3441;
    --sur-accent: #1B2026;
    --retard: #D59A8E;
    --retard-wash: #3A2C29;
    --fait: #95BB9F;
    --fait-wash: #26312A;
    --pointage: #E8762B;
    --pointage-hover: #F08A46;
    --pointage-wash: #3A2E22;
    --sur-pointage: #1B2026;
    --shadow: 0 1px 2px 0 rgba(0, 0, 0, .55), 0 1px 3px 1px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, .55), 0 4px 8px 3px rgba(0, 0, 0, .35);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #6E93C8; --p2: #7FAF8F; --p3: #C4868E; --p4: #B09272;
    --p5: #9C8ABF; --p6: #C4A468; --p7: #6FAAB4; --p8: #BC876F;
    --g1: #6F8FB8; --g2: #7FA38A; --g3: #9A8AB5; --g4: #C2A06B;
    --g5: #7FA7B0; --g6: #B88A78; --g7: #8E9AA8;
  }

  /* Avant tout choix de l'utilisateur : on suit le système. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --ground: #202124;
      --surface: #2D2E30;
      --surface-2: #35363A;
      --survol: #33363A;
      --ink: #E8EAED;
      --ink-soft: #9AA0A6;
      --ink-faint: #80868B;
      --hairline: #3C4043;
      --hairline-soft: #35363A;
      --accent: #93AFCF;
      --accent-hover: #AFC4DD;
      --accent-wash: #2A3441;
      --sur-accent: #1B2026;
      --retard: #D59A8E;
      --retard-wash: #3A2C29;
      --fait: #95BB9F;
      --fait-wash: #26312A;
      --pointage: #E8762B;
      --pointage-hover: #F08A46;
      --pointage-wash: #3A2E22;
      --sur-pointage: #1B2026;
      --shadow: 0 1px 2px 0 rgba(0, 0, 0, .55), 0 1px 3px 1px rgba(0, 0, 0, .35);
      --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, .55), 0 4px 8px 3px rgba(0, 0, 0, .35);
      --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
      --p1: #6E93C8; --p2: #7FAF8F; --p3: #C4868E; --p4: #B09272;
      --p5: #9C8ABF; --p6: #C4A468; --p7: #6FAAB4; --p8: #BC876F;
    }
  }

  /* Noir et blanc : zéro teinte, des gris. */
  :root[data-theme="nb"] {
    color-scheme: light;
    --ground: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F1F1F1;
    --survol: #F7F7F7;
    --ink: #0B0B0B;
    --ink-soft: #4A4A4A;
    --ink-faint: #878787;
    --hairline: #D6D6D6;
    --hairline-soft: #E8E8E8;
    --accent: #141414;
    --accent-hover: #000000;
    --accent-wash: #EFEFEF;
    --sur-accent: #FFFFFF;
    --retard: #0B0B0B;
    --retard-wash: #E6E6E6;
    --fait: #767676;
    --fait-wash: #F4F4F4;
    --pointage: #1F1F1F;
    --pointage-hover: #000000;
    --pointage-wash: #EDEDED;
    --sur-pointage: #FFFFFF;
    --shadow: 0 1px 2px 0 rgba(0, 0, 0, .22), 0 1px 3px 1px rgba(0, 0, 0, .12);
    --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, .22), 0 4px 8px 3px rgba(0, 0, 0, .12);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878787' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #111111; --p2: #3F3F3F; --p3: #5F5F5F; --p4: #7D7D7D;
    --p5: #9B9B9B; --p6: #2B2B2B; --p7: #4E4E4E; --p8: #8C8C8C;
    --g1: #111111; --g2: #4A4A4A; --g3: #6E6E6E; --g4: #8E8E8E;
    --g5: #2E2E2E; --g6: #5A5A5A; --g7: #353535;
  }

  /* Encre : bleu nuit sur papier chaud. */
  :root[data-theme="encre"] {
    color-scheme: light;
    --ground: #FBF9F6;
    --surface: #FFFFFF;
    --surface-2: #F2EEE7;
    --survol: #F7F3EC;
    --ink: #1A2233;
    --ink-soft: #4E586B;
    --ink-faint: #868D9C;
    --hairline: #E0D9CE;
    --hairline-soft: #EDE8E0;
    --accent: #1F3A6E;
    --accent-hover: #16294F;
    --accent-wash: #E9EDF7;
    --sur-accent: #FFFFFF;
    --retard: #A63428;
    --retard-wash: #F7E8E5;
    --fait: #2F7A4F;
    --fait-wash: #E8F2EC;
    --pointage: #C25E1E;
    --pointage-hover: #A44C15;
    --pointage-wash: #F9EDE2;
    --sur-pointage: #FFFFFF;
    --shadow: 0 1px 2px 0 rgba(58, 50, 38, .18), 0 1px 3px 1px rgba(58, 50, 38, .10);
    --shadow-2: 0 1px 3px 0 rgba(58, 50, 38, .20), 0 4px 8px 3px rgba(58, 50, 38, .12);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868D9C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #1F3A6E; --p2: #3F6B5C; --p3: #8E4A52; --p4: #7A5C36;
    --p5: #5C4A82; --p6: #8A6B24; --p7: #2F6A78; --p8: #7E4B3A;
    --g1: #3E5C8C; --g2: #5C8A76; --g3: #9C6A76; --g4: #8A7050;
    --g5: #6E5C94; --g6: #A08040; --g7: #4E8494;
  }

  /* Océan : turquoise. */
  :root[data-theme="ocean"] {
    color-scheme: light;
    --ground: #F6FAFB;
    --surface: #FFFFFF;
    --surface-2: #E9F1F3;
    --survol: #F1F8F9;
    --ink: #10262C;
    --ink-soft: #456069;
    --ink-faint: #7C9299;
    --hairline: #D6E3E7;
    --hairline-soft: #E6EFF1;
    --accent: #0E7C86;
    --accent-hover: #0A616A;
    --accent-wash: #E1F1F2;
    --sur-accent: #FFFFFF;
    --retard: #C4453A;
    --retard-wash: #FBE9E6;
    --fait: #1E8A63;
    --fait-wash: #E4F4EC;
    --pointage: #E8762B;
    --pointage-hover: #CF6620;
    --pointage-wash: #FDF0E3;
    --sur-pointage: #FFFFFF;
    --shadow: 0 1px 2px 0 rgba(16, 45, 52, .18), 0 1px 3px 1px rgba(16, 45, 52, .10);
    --shadow-2: 0 1px 3px 0 rgba(16, 45, 52, .20), 0 4px 8px 3px rgba(16, 45, 52, .12);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9299' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #0E7C86; --p2: #2F8F6B; --p3: #B0526A; --p4: #8A6E45;
    --p5: #5B6FB0; --p6: #A07E2A; --p7: #3C93A8; --p8: #A5664B;
    --g1: #2F8F94; --g2: #4FA383; --g3: #C0758A; --g4: #A08860;
    --g5: #6E82C0; --g6: #B89448; --g7: #55A8B8;
  }

  /* Forêt : verts sourds. */
  :root[data-theme="foret"] {
    color-scheme: light;
    --ground: #F7F8F4;
    --surface: #FFFFFF;
    --surface-2: #ECF0E5;
    --survol: #F3F6EE;
    --ink: #1A2317;
    --ink-soft: #4C5847;
    --ink-faint: #828B7B;
    --hairline: #DBE1D1;
    --hairline-soft: #E8ECE1;
    --accent: #3F6B3A;
    --accent-hover: #32562E;
    --accent-wash: #E7F0E3;
    --sur-accent: #FFFFFF;
    --retard: #B4452F;
    --retard-wash: #F9E9E4;
    --fait: #2F7A46;
    --fait-wash: #E5F3E9;
    --pointage: #D2731F;
    --pointage-hover: #B3611A;
    --pointage-wash: #FAEEDD;
    --sur-pointage: #FFFFFF;
    --shadow: 0 1px 2px 0 rgba(26, 40, 22, .18), 0 1px 3px 1px rgba(26, 40, 22, .10);
    --shadow-2: 0 1px 3px 0 rgba(26, 40, 22, .20), 0 4px 8px 3px rgba(26, 40, 22, .12);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828B7B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #3F6B3A; --p2: #6B7A32; --p3: #A05546; --p4: #7A5F3A;
    --p5: #4E6E7A; --p6: #8C7A2E; --p7: #527A63; --p8: #8A5A4A;
    --g1: #5C8452; --g2: #849251; --g3: #B06E5C; --g4: #94805A;
    --g5: #6A8A94; --g6: #A89648; --g7: #6E9478;
  }

  /* Ambre : sable et pierre chaude. */
  :root[data-theme="ambre"] {
    color-scheme: light;
    --ground: #FDFAF5;
    --surface: #FFFFFF;
    --surface-2: #F5EEE2;
    --survol: #FAF4EA;
    --ink: #2A2118;
    --ink-soft: #5E5342;
    --ink-faint: #92897A;
    --hairline: #E8DCC8;
    --hairline-soft: #F1E9DB;
    --accent: #A9660F;
    --accent-hover: #8A5209;
    --accent-wash: #FBEEDB;
    --sur-accent: #FFFFFF;
    --retard: #B23A2C;
    --retard-wash: #F8E7E3;
    --fait: #4E7A3A;
    --fait-wash: #EDF3E4;
    --pointage: #C4620F;
    --pointage-hover: #A65209;
    --pointage-wash: #FAE9D6;
    --sur-pointage: #FFFFFF;
    --shadow: 0 1px 2px 0 rgba(60, 46, 28, .18), 0 1px 3px 1px rgba(60, 46, 28, .10);
    --shadow-2: 0 1px 3px 0 rgba(60, 46, 28, .20), 0 4px 8px 3px rgba(60, 46, 28, .12);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392897A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #A9660F; --p2: #6E7A34; --p3: #A54A4A; --p4: #7A5B36;
    --p5: #5D6A8C; --p6: #8A6B24; --p7: #4F7A78; --p8: #8C5A3A;
    --g1: #C08028; --g2: #86944C; --g3: #B86464; --g4: #94754E;
    --g5: #7482A0; --g6: #A4833C; --g7: #6A9492;
  }

  /* Prune : violet. */
  :root[data-theme="prune"] {
    color-scheme: light;
    --ground: #FAF8FC;
    --surface: #FFFFFF;
    --surface-2: #F0ECF6;
    --survol: #F7F4FB;
    --ink: #221A2C;
    --ink-soft: #57496B;
    --ink-faint: #8D82A0;
    --hairline: #E1D9EB;
    --hairline-soft: #EDE8F3;
    --accent: #6A4A9C;
    --accent-hover: #56397F;
    --accent-wash: #EFE8F8;
    --sur-accent: #FFFFFF;
    --retard: #B03A55;
    --retard-wash: #F9E7EB;
    --fait: #3E7A5E;
    --fait-wash: #E6F2EC;
    --pointage: #D2601F;
    --pointage-hover: #B35017;
    --pointage-wash: #FAE9DE;
    --sur-pointage: #FFFFFF;
    --shadow: 0 1px 2px 0 rgba(46, 34, 58, .18), 0 1px 3px 1px rgba(46, 34, 58, .10);
    --shadow-2: 0 1px 3px 0 rgba(46, 34, 58, .20), 0 4px 8px 3px rgba(46, 34, 58, .12);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D82A0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    --p1: #6A4A9C; --p2: #3F7A6B; --p3: #A34A63; --p4: #8A6435;
    --p5: #4A5FA5; --p6: #96773A; --p7: #4E8A9C; --p8: #8A5340;
    --g1: #8266AE; --g2: #5C9484; --g3: #B4687C; --g4: #A47C50;
    --g5: #6478B4; --g6: #AC8F54; --g7: #689EB0;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: none; margin: 0 auto; padding: 28px 28px 80px; }

  /* ---------- header ---------- */
  header.top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin-bottom: 22px; }
  h1 {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(22px, 5.4vw, 28px);
    letter-spacing: 0;
    margin: 0;
    text-wrap: balance;
  }
  .subtitle {
    color: var(--ink-soft); font-size: 12.5px; margin: 4px 0 0;
  }
  .sync {
    margin-left: auto;
    font-size: 12px;
    color: var(--ink-faint);
    display: flex; align-items: center; gap: 7px;
    white-space: nowrap;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
  .sync[data-state="ok"] .dot { background: var(--fait); }
  .sync[data-state="local"] .dot { background: var(--retard); }

  /* ---------- metrics ---------- */
  .metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
  }
  .metric { background: var(--surface); padding: 16px 20px; border-radius: 8px; box-shadow: var(--shadow); }
  .metric .k {
    font-size: 12px; color: var(--ink-soft); display: block; margin-bottom: 6px;
  }
  .metric .v {
    font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  .metric.alarme .v { color: var(--retard); }

  /* ---------- toolbar ---------- */
  .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
  .views { display: flex; gap: 6px; }
  .views.mini { width: fit-content; margin-bottom: 16px; }
  .views button {
    font-family: var(--f-body); font-size: 13px; font-weight: 500;
    padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft);
    cursor: pointer;
  }
  .views button:hover { background: var(--surface-2); }
  .views button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }
  .views button[aria-pressed="true"]:hover { background: var(--accent-wash); filter: brightness(.97); }
  .views button .onglet-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
  }

  input[type="search"], input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="url"], select, textarea {
    font-family: var(--f-body); font-size: 13.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 8px; padding: 8px 12px;
  }
  input[type="search"] {
    flex: 0 1 170px; min-width: 110px; background: var(--surface-2);
    border-color: transparent; border-radius: 24px; padding: 9px 16px;
  }
  input[type="search"]:focus { background: var(--surface); border-color: var(--accent); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .btn {
    font-family: var(--f-body); font-size: 13.5px; font-weight: 500;
    padding: 9px 22px; border-radius: 999px; cursor: pointer; text-decoration: none;
    border: 1px solid transparent; background: var(--accent); color: var(--sur-accent);
    display: inline-flex; align-items: center; justify-content: center;
    transition: box-shadow .15s, background-color .15s;
  }
  .btn:hover { background: var(--accent-hover); box-shadow: var(--shadow); }
  .btn.ghost { background: transparent; color: var(--accent); border-color: var(--hairline); }
  .btn.ghost:hover { background: var(--accent-wash); box-shadow: none; }
  .btn.danger { background: transparent; color: var(--retard); border-color: var(--hairline); }
  .btn.danger:hover { background: var(--retard-wash); box-shadow: none; }
  .btn:disabled, .btn.desactive { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
  label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .titre { display: block; overflow-wrap: anywhere; line-height: 1.4; }
  .client {
    font-size: 11px; font-weight: 500; letter-spacing: .01em;
    color: var(--accent); background: var(--accent-wash);
    display: inline-block; padding: 1px 8px; border-radius: 999px; margin-bottom: 3px;
  }
  .quand {
    font-size: 12px; color: var(--ink-soft);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  /* ---------- indicateur agenda ---------- */
  .rdv {
    font-size: 10.5px; font-weight: 500;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  }
  .rdv.ok { background: var(--fait-wash); color: var(--fait); }
  .rdv.partiel { background: transparent; color: var(--ink-faint); border: 1px solid var(--hairline); }
  .rdv.absent { background: transparent; color: var(--retard); border: 1px dashed var(--retard); opacity: .8; }
  .rdv.inconnu { visibility: hidden; }
  a.rdv:hover { filter: brightness(1.15); }

  .banniere {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
    padding: 11px 16px; margin-bottom: 18px;
    border-radius: 8px; background: var(--accent-wash); font-size: 13px; color: var(--ink);
  }
  .banniere.souci { background: var(--retard-wash); }
  .banniere strong { color: var(--ink); font-weight: 500; }
  .banniere .quand-maj { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
  .banniere .lien-flash { margin-left: auto; color: var(--accent); font-weight: 500; text-decoration: none; white-space: nowrap; }
  .banniere .lien-flash:hover { text-decoration: underline; }

  .lien { color: var(--ink-faint); text-decoration: none; font-size: 13px; text-align: center; }
  .lien:hover { color: var(--accent); }
  .lien.off { visibility: hidden; }

  .lab { font-size: 11.5px; color: var(--ink-soft); display: block; margin-bottom: 4px; }

  .vide-msg { padding: 16px 12px; color: var(--ink-faint); font-size: 13px; font-style: normal; }

  .note-bas {
    margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hairline);
    color: var(--ink-faint); font-size: 12px; max-width: 62ch;
  }

  /* ---------- vue agenda : grille ---------- */
  .agenda-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
  .agenda-outils .plage { font-family: var(--f-display); font-weight: 500; font-size: 14.5px; min-width: 15ch; text-align: center; }
  .agenda-outils .sp { margin-left: auto; }

  .agenda-corps { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: start; }
  @media (max-width: 1000px) { .agenda-corps { grid-template-columns: 1fr; } }

  .a-planifier {
    background: var(--surface); border-radius: 8px; padding: 12px;
    overflow-y: auto; box-shadow: var(--shadow);
  }
  .a-planifier h3 {
    font-size: 13px; font-weight: 500; color: var(--ink-soft); margin: 0 0 8px;
  }
  .puce-tache {
    background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: 8px;
    padding: 9px 11px; margin-bottom: 8px; cursor: grab; font-size: 13px;
  }
  .puce-tache:hover { box-shadow: var(--shadow); }
  .puce-tache:active { cursor: grabbing; }
  .puce-tache .client {
    display: inline-block; font-size: 11px; font-weight: 500;
    color: var(--accent); background: var(--accent-wash); padding: 1px 8px;
    border-radius: 999px; margin-bottom: 4px;
  }
  .puce-tache .titre { display: block; overflow-wrap: anywhere; }
  .puce-tache .quand { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 11.5px; }
  .puce-tache.glisse { opacity: .35; }
  .a-planifier .vide-msg { padding: 4px 2px; }

  .grille-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
  .grille-agenda {
    display: grid; background: var(--surface); border-radius: 8px;
    overflow: hidden; -webkit-user-select: none; user-select: none; box-shadow: var(--shadow);
  }
  .g-entete {
    padding: 8px 4px; text-align: center; font-size: 12px;
    color: var(--ink-soft); border-left: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline);
    background: var(--surface-2);
  }
  /* Colonne « aujourd'hui » mise en évidence comme dans Google Agenda. */
  .g-entete.today { color: var(--accent); font-weight: 500; background: var(--accent-wash); }
  .g-heure {
    font-size: 11px; color: var(--ink-faint); text-align: right;
    padding-right: 8px; transform: translateY(-6px);
  }
  .g-jour { position: relative; border-left: 1px solid var(--hairline-soft); }
  .g-creneau { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--hairline-soft); box-sizing: border-box; }
  .g-creneau:nth-child(2n) { border-bottom-style: dotted; }
  .g-creneau.survole { background: var(--accent-wash); }
  .g-bloc {
    position: absolute; left: 3px; right: 3px; border-radius: 4px; overflow: hidden;
    font-size: 11.5px; line-height: 1.3; padding: 3px 7px; box-sizing: border-box; cursor: pointer;
    display: block; text-decoration: none;
  }
  .g-bloc .b-titre { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-bloc .b-heure { display: block; font-size: 10px; opacity: .85; }
  /* Rendez-vous confirmés dans Exchange : bloc plein, comme dans Google Agenda. */
  .g-bloc.rdv-existant { background: var(--accent-wash); color: var(--ink); border-left: 3px solid var(--accent); }
  .g-bloc.tache-a-confirmer {
    background: var(--surface); color: var(--ink); border: 1.5px dashed var(--ink-faint); cursor: grab;
  }
  .g-bloc.tache-a-confirmer:active { cursor: grabbing; }
  .g-bloc.tache-a-confirmer.glisse { opacity: .35; }

  @media (max-width: 620px) {
    .wrap { padding: 20px 14px 64px; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metrics > *:last-child:nth-child(odd) { grid-column: span 2; }
    input[type="search"] { flex-basis: 100%; }

    .grille-scroll .grille-agenda { min-width: 560px; }

    /* Les onglets ne tiennent pas toujours sur un écran de téléphone : on
       défile plutôt que de couper « Agenda » hors champ. */
    .views { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .views button { flex: none; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* ---------- tableau façon Monday (colonnes, groupes colorés) ---------- */
  .board { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.mtable { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; min-width: 1180px; }
  table.mtable thead th {
    position: sticky; top: 0; z-index: 1;
    text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-faint);
    padding: 10px 12px; border-bottom: 2px solid var(--hairline); background: var(--surface-2); white-space: nowrap;
  }
  table.mtable th.th-check { width: 96px; }
  table.mtable th.th-suppr { width: 34px; }
  table.mtable td { padding: 6px 10px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; }
  table.mtable tr.trow { cursor: default; }
  table.mtable tr.trow:hover td { background: var(--surface-2); }
  table.mtable tr.est-fait .titre-input { text-decoration: line-through; color: var(--ink-faint); }
  table.mtable td.td-check, table.mtable td.td-fact, table.mtable td.td-suppr { text-align: center; }
  table.mtable .cell-titre { min-width: 210px; }
  table.mtable .cell-titre input.titre-input {
    width: 100%; font-size: 13px; font-weight: 500; border: none; background: transparent; padding: 4px 2px; color: var(--ink);
  }
  table.mtable .cell-titre input.titre-input:hover, table.mtable .cell-titre input.titre-input:focus { background: var(--surface-2); border-radius: 6px; }
  table.mtable td select { font-size: 12px; padding: 5px 8px; min-width: 0; }
  table.mtable td input[type="date"], table.mtable td input[type="time"] {
    font-size: 12px; padding: 4px 6px; min-width: 0; border: none; background: transparent; color: var(--ink-soft);
  }
  table.mtable td input[type="date"]:hover, table.mtable td input[type="date"]:focus,
  table.mtable td input[type="time"]:hover, table.mtable td input[type="time"]:focus { background: var(--surface-2); border-radius: 6px; }
  table.mtable td.td-duree select { width: 84px; }
  table.mtable .ticket-cell { display: flex; align-items: center; gap: 4px; }
  table.mtable .ticket-cell input[type="url"] {
    width: 130px; font-size: 12px; padding: 4px 6px; border: none; background: transparent; color: var(--ink-soft);
  }
  table.mtable .ticket-cell input[type="url"]:hover, table.mtable .ticket-cell input[type="url"]:focus { background: var(--surface-2); border-radius: 6px; }
  table.mtable td.td-note input[type="text"] {
    width: 150px; font-size: 12.5px; padding: 4px 6px; border: none; background: transparent; color: var(--ink-soft);
  }
  table.mtable td.td-note input[type="text"]:hover, table.mtable td.td-note input[type="text"]:focus { background: var(--surface-2); border-radius: 6px; }
  table.mtable td.td-rdv { white-space: nowrap; }
  .btn.mini { padding: 3px 10px; font-size: 11px; border-radius: 999px; }
  button.icone-suppr {
    border: none; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px;
  }
  button.icone-suppr:hover { background: var(--retard-wash); color: var(--retard); }
  button.icone-suppr.confirme { background: var(--retard); color: var(--sur-accent); font-size: 10.5px; font-weight: 600; white-space: nowrap; padding: 4px 8px; border-radius: 999px; }

  /* Personne assignée : select stylé en pastille de couleur, comme les
     avatars colorés de Monday — une couleur fixe par personne. */
  select.qui-select {
    appearance: none; -webkit-appearance: none;
    border: none; border-radius: 999px; padding: 5px 24px 5px 12px; font-weight: 500;
    cursor: pointer; min-width: 92px;
    background-color: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface));
    color: color-mix(in srgb, var(--c, var(--accent)) 70%, var(--ink));
    background-image: var(--chevron);
    background-repeat: no-repeat; background-position: right 6px center; background-size: 12px;
  }

  /* Statut : un bouton-pastille qu'on bascule d'un clic, comme la colonne
     Statut de Monday, plutôt qu'une case à cocher discrète. */
  button.statut-pill {
    border: none; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap; font-family: var(--f-body);
    background: var(--surface-2); color: var(--ink-soft);
  }
  button.statut-pill.est-fait { background: var(--fait-wash); color: var(--fait); }
  button.statut-pill:hover { filter: brightness(.96); }
  tr.est-retard button.statut-pill:not(.est-fait) { background: var(--retard-wash); color: var(--retard); }

  /* Groupes : bandeau coloré façon "swimlane" Monday, une couleur par
     groupe (cyclique), en retard toujours signalé en rouge. */
  tr.grp-bar td {
    font-weight: 500; padding: 8px 12px; color: var(--ink);
    background: var(--surface-2); border-left: 4px solid var(--grp, var(--accent));
  }
  tr.grp-bar .grp-nom { margin-right: 8px; }
  tr.grp-bar .grp-n {
    font-variant-numeric: tabular-nums; font-weight: 500;
    background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: 1px 8px; font-size: 11px;
  }
  tr.grp-bar.grp-retard td { background: var(--retard-wash) !important; color: var(--retard); border-left-color: var(--retard); }

  /* ---------- onglets de vues (dont vues personnalisées) ---------- */
  .onglet-perso { display: inline-flex; align-items: center; gap: 2px; }
  .onglet-edit { padding: 6px 9px !important; font-size: 12px !important; color: var(--ink-faint); }
  .onglet-plus { border: 1px dashed var(--hairline); color: var(--ink-soft); }

  /* ---------- constructeur de filtres ---------- */
  #panneauFiltre { background: var(--surface); border-radius: 8px; padding: 16px 16px 14px; margin-bottom: 18px; box-shadow: var(--shadow); }
  #panneauFiltre[hidden] { display: none; }
  .panneau-entete { margin-bottom: 12px; font-size: 14.5px; font-family: var(--f-display); }
  .panneau-champ { display: block; margin-bottom: 12px; max-width: 420px; }
  .regles-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .regle-filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .regle-filtre .valeur-filtre input, .regle-filtre .valeur-filtre select { min-width: 0; }
  .regle-suppr { padding: 4px 10px !important; color: var(--ink-faint); font-size: 15px !important; }
  .panneau-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

  /* ---------- fenêtre : nouvelle tâche ---------- */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(32, 33, 36, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 60;
  }
  .modal-overlay[hidden] { display: none; }
  .modal-boite {
    background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-2);
    width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 20px 22px 22px;
  }
  .modal-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .modal-entete h2 { font-family: var(--f-display); font-size: 16px; margin: 0; color: var(--ink); }
  .modal-fermer {
    background: transparent; border: 0; font-size: 20px; line-height: 1;
    color: var(--ink-soft); cursor: pointer; padding: 4px 8px; border-radius: 6px;
  }
  .modal-fermer:hover { background: var(--surface-2); }
  .modal-champ { display: block; margin-bottom: 13px; }
  .modal-champ input, .modal-champ select { width: 100%; box-sizing: border-box; }
  .modal-ligne { display: flex; gap: 10px; }
  .modal-ligne > .modal-champ { flex: 1; min-width: 0; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
  @media (max-width: 480px) {
    .modal-ligne { flex-direction: column; gap: 0; }
  }

  /* ---------- ajouts version web ---------- */
  header.top .compte { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
  header.top a.btn { text-decoration: none; display: inline-flex; align-items: center; }
  header.top .compte a { color: var(--ink-soft); }
  .sync { margin-left: auto; }
  .rdv.erreur { background: var(--retard-wash); color: var(--retard); }
  .rdv.attente { background: transparent; color: var(--ink-faint); border: 1px solid var(--hairline); }
  .agenda-outils select { font-size: 13px; }
  .g-bloc.rdv-existant.lie { cursor: grab; box-shadow: inset 3px 0 0 rgba(255,255,255,.55); }
  .g-bloc.tache-a-confirmer { cursor: grab; }

  .page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
  .carte-connexion { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-2); padding: 32px 28px; max-width: 420px; width: 100%; }
  .carte-connexion h1 { margin-bottom: 4px; }
  .carte-connexion h2 { font-size: 15px; font-weight: 500; color: var(--ink-soft); margin: 0 0 14px; }
  .carte-connexion p { color: var(--ink-soft); margin: 0 0 22px; }

  /* ---------- réglages (administrateurs) ---------- */
  .modal-boite.reglages { max-width: 520px; }
  .rg-titre { font-size: 13.5px; font-weight: 500; margin: 18px 0 8px; color: var(--ink); }
  .rg-titre:first-of-type { margin-top: 0; }
  .rg-etat { margin: 0 0 10px; color: var(--ink-soft); }
  .rg-etat.alerte { color: var(--retard); font-weight: 500; }
  .rg-etapes { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); font-size: 13px; }
  .rg-etapes li { margin-bottom: 4px; }
  .rg-etapes a { color: var(--accent); }
  .reglages .banniere { margin: 12px 0 0; }
  .rg-agendas { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; }
  .rg-agendas li { padding: 6px 0; border-bottom: 1px solid var(--hairline-soft); color: var(--ink-soft); overflow-wrap: anywhere; }
  .rg-agendas li.ok strong { color: var(--fait); }
  .rg-agendas li.ko strong { color: var(--retard); }
  .views { flex-wrap: wrap; }
  .views button { white-space: nowrap; }

  /* ---------- ligne dépliable ---------- */
  table.mtable th.th-check { width: 122px; }
  table.mtable td.td-check { white-space: nowrap; }
  button.deplier {
    border: none; background: transparent; color: var(--ink-faint); cursor: pointer;
    width: 24px; height: 24px; border-radius: 6px; font-size: 12px; margin-right: 4px; vertical-align: middle;
  }
  button.deplier:hover { background: var(--surface-2); color: var(--ink); }
  button.note-apercu {
    border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px;
    color: var(--ink-soft); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 4px 6px; border-radius: 6px; display: block;
  }
  button.note-apercu.vide { color: var(--ink-faint); }
  button.note-apercu:hover { background: var(--surface-2); color: var(--ink); }
  tr.trow-detail td { background: var(--surface-2); padding: 12px 0 16px; border-bottom: 1px solid var(--hairline); }
  .detail-boite {
    position: sticky; left: 0; box-sizing: border-box;
    width: var(--vis-w, 100%); padding: 0 16px 0 48px;
    display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
  .detail-note textarea {
    width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; line-height: 1.5; background: var(--surface);
  }
  .detail-meta { font-size: 12.5px; }
  .meta-ligne { margin-bottom: 8px; }
  .meta-ligne .lab { margin-bottom: 1px; }
  .meta-ligne a { color: var(--accent); }
  .modal-champ textarea { width: 100%; box-sizing: border-box; resize: vertical; }
  textarea {
    font-family: var(--f-body); font-size: 13.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 12px;
  }
  @media (max-width: 760px) {
    .detail-boite { padding-left: 14px; }
    .detail-boite { grid-template-columns: 1fr; gap: 12px; }
  }
  table.mtable td select.qui-select { min-width: 92px; padding-right: 24px; }
  table.mtable tr.verrouillee td { opacity: .72; }
  table.mtable tr.verrouillee td.td-check, table.mtable tr.verrouillee td.td-note { opacity: 1; }
  /* ---------- champs Client et Tâche ---------- */
  table.mtable .cell-client { width: 150px; }
  table.mtable input.client-input {
    width: 140px; font-size: 12.5px; font-weight: 500; border: none; padding: 4px 8px; border-radius: 999px;
    background: var(--accent-wash); color: var(--accent);
  }
  table.mtable input.client-input::placeholder { color: var(--ink-faint); font-weight: 400; }
  table.mtable input.client-input:placeholder-shown { background: transparent; }
  table.mtable input.client-input:hover, table.mtable input.client-input:focus { background: var(--surface-2); color: var(--ink); }
  .modal-ligne > .modal-champ.modal-client { flex: 0 0 38%; }
  table.mtable input.client-input.hors-ioi { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); }
  .rg-details { margin-top: 10px; }
  .rg-details summary { cursor: pointer; color: var(--accent); font-size: 13px; margin-bottom: 8px; }
  .reglages input[type="url"] { width: 100%; box-sizing: border-box; }


  /* ================================================================
     Design épuré (inspiré de la liste To-Do fournie par Jordan) :
     page blanche, pas d'ombres, puces à contour, tableau aéré.
     ================================================================ */
  body { font-size: 14px; }
  header.top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
    margin: 0; padding: 14px 28px; border-bottom: 1px solid var(--hairline); background: var(--surface);
  }
  header.top h1 { font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
  .top-droite { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .top-droite .sync { margin-left: 0; }
  .wrap { padding: 18px 28px 80px; }

  .btn { border-radius: 6px; padding: 8px 16px; font-size: 14px; box-shadow: none !important; }
  .btn .plus { font-size: 17px; line-height: 1; margin-right: 6px; font-weight: 400; }
  .btn.contour { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 6px 14px; }
  .btn.contour:hover { background: var(--accent-wash); }

  .barre { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
  .ajout-rapide {
    flex: 0 1 230px; display: flex; align-items: center; gap: 6px; margin: 0;
    background: var(--surface-2); border-radius: 6px; padding: 0 10px; border: 1px solid transparent;
  }
  .ajout-rapide:focus-within { border-color: var(--accent); background: var(--surface); }
  .ajout-rapide .ar-icone { color: var(--fait); font-size: 17px; }
  .ajout-rapide input { border: none !important; background: transparent !important; box-shadow: none !important; padding: 8px 0; width: 100%; font-size: 14px; }
  .recherche { flex: 1 1 320px; min-width: 200px; }
  .recherche input[type="search"] {
    width: 100%; box-sizing: border-box; flex: none; font-size: 15px;
    background: var(--surface-2); border: 1px solid transparent; border-radius: 8px; padding: 9px 14px;
  }
  .compteurs { display: flex; gap: 22px; color: var(--accent); font-size: 13.5px; white-space: nowrap; padding: 0 4px; }
  .compteur { cursor: default; font-variant-numeric: tabular-nums; }

  .puces { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 20px; }
  .views, .puces-droite { display: flex; flex-wrap: wrap; gap: 8px; }
  .views .puce, .puces-droite .puce {
    border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
    border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 400; cursor: pointer; white-space: nowrap;
  }
  .views .puce:hover, .puces-droite .puce:hover { background: var(--surface-2); }
  .puce-n {
    display: inline-block; margin-left: 8px; background: var(--surface-2); color: var(--ink-soft);
    border-radius: 999px; padding: 0 7px; font-size: 11.5px; line-height: 18px; font-variant-numeric: tabular-nums;
  }
  .views .puce[aria-pressed="true"], .puces-droite .puce[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
  .views .puce[aria-pressed="true"] .puce-n, .puces-droite .puce[aria-pressed="true"] .puce-n { background: var(--accent); color: var(--sur-accent); }
  .puces-droite .puce.alerte { border-color: var(--retard); color: var(--retard); }
  .puces-droite .puce.alerte .puce-n { background: var(--retard); color: var(--sur-accent); }
  .views .onglet-plus { border-style: dashed; color: var(--ink-soft); }
  .views .onglet-edit { border: none; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 12px; }
  .views .onglet-edit:hover { background: var(--surface-2); color: var(--ink); }
  .onglet-perso { gap: 0; }

  /* tableau */
  .board { box-shadow: none; border-radius: 0; background: transparent; }
  table.mtable { background: transparent; font-size: 14px; }
  table.mtable thead th {
    background: var(--surface); text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500;
    color: var(--ink-soft); padding: 12px 10px; border-bottom: 1px solid var(--hairline);
  }
  table.mtable td { padding: 11px 10px; border-bottom: 1px solid var(--hairline-soft); }
  table.mtable tr.trow:hover td { background: var(--survol); }
  table.mtable .cell-titre input.titre-input {
    color: var(--accent); font-weight: 400; font-size: 14px;
    text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px;
  }
  table.mtable tr.est-fait .titre-input { color: var(--ink-faint); text-decoration: line-through; }
  table.mtable input.client-input { background: transparent; color: var(--accent); font-weight: 400; font-size: 14px; border-radius: 4px; padding: 4px 4px; }
  table.mtable input.client-input:placeholder-shown { background: transparent; }
  table.mtable input.client-input.hors-ioi { color: var(--ink-soft); box-shadow: none; font-style: italic; }
  button.statut-pill {
    background: transparent; border: 1px solid var(--hairline); color: var(--ink-soft);
    border-radius: 999px; padding: 3px 14px; font-weight: 400; font-size: 13px; min-width: 84px;
  }
  button.statut-pill.est-fait { background: transparent; border-color: var(--fait); color: var(--fait); }
  tr.est-retard button.statut-pill:not(.est-fait) { background: transparent; border-color: var(--retard); color: var(--retard); }
  table.mtable td select.qui-select {
    background-color: transparent !important; color: var(--ink-soft); font-weight: 400; font-size: 14px;
    padding: 4px 20px 4px 2px; min-width: 0; border-radius: 4px;
  }
  table.mtable td select.qui-select:hover { background-color: var(--surface-2) !important; }
  table.mtable td input[type="date"].depasse { color: var(--retard); }
  table.mtable th.th-suppr { width: 64px; }
  table.mtable td.td-suppr { white-space: nowrap; text-align: right; }
  button.icone-action, button.icone-suppr {
    border: none; background: transparent; cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; line-height: 1;
  }
  button.icone-action { color: var(--ink-soft); }
  button.icone-action:hover { background: var(--surface-2); color: var(--ink); }
  button.icone-suppr { color: var(--retard); }
  button.icone-suppr:hover { background: var(--retard-wash); color: var(--retard); }

  /* groupes : simple intertitre gris */
  tr.grp-bar td {
    background: transparent; border-left: none; color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
    padding: 18px 10px 6px; border-bottom: 1px solid var(--hairline);
  }
  tr.grp-bar td::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grp, var(--accent)); margin-right: 8px; }
  tr.grp-bar.grp-retard td { background: transparent !important; color: var(--retard); }
  tr.grp-bar.grp-retard td::before { background: var(--retard); }
  tr.grp-bar .grp-n { background: var(--surface-2); }
  tr.trow-detail td { background: var(--survol); }
  .banniere { border-radius: 6px; }

  @media (max-width: 760px) {
    header.top, .wrap { padding-left: 16px; padding-right: 16px; }
    .ajout-rapide { flex-basis: 100%; }
    .compteurs { width: 100%; justify-content: flex-start; }
  }
  table.mtable .cell-titre { min-width: 300px; width: 30%; }
  table.mtable .ticket-cell input[type="url"] { width: 110px; }
  table.mtable td.td-duree select { width: 92px; }
  table.mtable { min-width: 1080px; }
  table.mtable .cell-titre { min-width: 250px; width: auto; }
  table.mtable .cell-client { width: 130px; }
  table.mtable input.client-input { width: 124px; }
  table.mtable th.th-check { width: 112px; }
  button.statut-pill { min-width: 74px; padding: 3px 10px; }
  table.mtable td, table.mtable thead th { padding-left: 8px; padding-right: 8px; }
  /* colonne Client plus large */
  table.mtable .cell-client { width: 210px; }
  table.mtable input.client-input { width: 200px; }
  .meta-fact { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; margin-bottom: 12px; }
  /* place gagnée sur Ticket, Durée, Heure et Échéance pour élargir Client */
  table.mtable .cell-client { width: 240px; }
  table.mtable input.client-input { width: 230px; }
  table.mtable .ticket-cell input[type="url"] { width: 78px; }
  table.mtable td.td-duree select { width: 78px; }
  table.mtable td input[type="time"] { width: 70px; }
  table.mtable td input[type="date"] { width: 112px; }
  table.mtable td, table.mtable thead th { padding-left: 6px; padding-right: 6px; }
  table.mtable .cell-titre { min-width: 220px; }
  table.mtable tr.trow-detail td { padding-left: 0; padding-right: 0; }

  /* ---------- Encoder pointage ---------- */
  .btn.btn-pointage { background: var(--pointage); color: var(--sur-pointage); }
  .btn.btn-pointage:hover { background: var(--pointage-hover); }
  .detail-meta .btn-pointage { margin-bottom: 12px; padding: 6px 14px; font-size: 13px; }
  .modal-boite.pointage { max-width: 1100px; }
  .ptg-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border: 1px solid var(--hairline); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
  .ptg-client { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
  .ptg-client strong { font-size: 16px; }
  .ptg-client .ptg-tache { color: var(--ink-soft); font-size: 13px; }
  .ptg-champs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
  .ptg-champ { display: flex; flex-direction: column; }
  .ptg-champ select { min-width: 180px; }
  .ptg-aide { padding: 4px 0 8px; }
  .ptg-grille { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 8px; }
  .ptg-grille table { width: 100%; border-collapse: collapse; min-width: 640px; table-layout: fixed; }
  .ptg-grille th { text-align: left; font-weight: 500; font-size: 13px; color: var(--ink-soft); padding: 9px 12px; border-bottom: 1px solid var(--hairline); }
  .ptg-grille th:nth-child(1) { width: 20%; } .ptg-grille th:nth-child(2) { width: 14%; }
  .ptg-grille td { padding: 6px 10px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; }
  .ptg-grille tr.ptg-section td { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); padding: 6px 12px; }
  .ptg-grille td.ptg-wc { font-weight: 500; }
  .ptg-grille input.ptg-duree { width: 110px; text-align: center; }
  .ptg-grille textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 36px; }
  .ptg-grille textarea[readonly] { background: var(--surface-2); color: var(--ink-faint); cursor: not-allowed; }
  .ptg-grille tr.ptg-note td { background: var(--pointage-wash); }
  .ptg-grille tr.ptg-note td.ptg-wc { box-shadow: inset 3px 0 0 var(--pointage); }
  .ptg-resultat { margin: 8px 0 0; padding-left: 18px; width: 100%; }
  .ptg-resultat li.ko { color: var(--retard); }
  @media (max-width: 640px) { .ptg-tete { grid-template-columns: 1fr; } }

  /* ---------- choix du thème ---------- */
  .theme-box { position: relative; }
  .btn.theme-btn { gap: 8px; padding: 6px 12px 6px 10px; }
  .theme-pastilles {
    display: inline-flex; border-radius: 999px; overflow: hidden; flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  }
  .theme-pastilles i { width: 10px; height: 10px; display: block; }
  .theme-panneau {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
    box-shadow: var(--shadow-2); padding: 6px; min-width: 236px; max-width: calc(100vw - 32px);
  }
  .theme-panneau[hidden] { display: none; }
  .theme-option {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: transparent; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer;
    font-family: var(--f-body); font-size: 13.5px; color: var(--ink);
  }
  .theme-option:hover { background: var(--surface-2); }
  .theme-option[aria-selected="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 500; }
  .theme-option .t-apercu {
    display: inline-flex; border-radius: 5px; overflow: hidden; flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  }
  .theme-option .t-apercu i { width: 15px; height: 18px; display: block; }
  .theme-option .t-nom { flex: 1; }
  .theme-option .t-coche { color: var(--accent); font-size: 13px; }
  .theme-sep { height: 1px; background: var(--hairline-soft); margin: 5px 7px; }
  .theme-note { padding: 4px 9px 6px; font-size: 11.5px; color: var(--ink-faint); }

  /* Noir et blanc : aucune teinte pour porter l'information, donc on
     l'appuie sur le contraste et le trait. */
  :root[data-theme="nb"] .puces-droite .puce.alerte { border-color: var(--ink); border-width: 1.5px; }
  :root[data-theme="nb"] tr.est-retard button.statut-pill:not(.est-fait) { border-width: 1.5px; font-weight: 600; }
  :root[data-theme="nb"] tr.est-retard .quand { font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
  :root[data-theme="nb"] tr.grp-bar.grp-retard td { font-weight: 700; }
  :root[data-theme="nb"] .rdv.absent { border-style: solid; border-width: 1.5px; opacity: 1; }
  :root[data-theme="nb"] table.mtable td input[type="date"].depasse { font-weight: 600; }

  /* ================================================================
     Lisibilité, volume et usage mobile.
     1. Largeurs de colonnes ajustées (Note resserrée, Heure/Durée et
        description élargies).
     2. Séparation nette des lignes et du tableau (volume).
     3. Sous 980 px : une carte par tâche, pensée pour le doigt.
     ================================================================ */

  /* --- 1. largeurs de colonnes --- */
  table.mtable { min-width: 900px; width: 100%; }
  table.mtable .cell-client { width: 180px; }
  table.mtable input.client-input { width: 170px; }
  table.mtable .cell-titre { min-width: 280px; width: 32%; }
  table.mtable .cell-titre input.titre-input { font-size: 14.5px; padding: 6px 6px; }
  table.mtable td.td-heure input[type="time"] { width: 102px; font-size: 13.5px; padding: 6px 8px; }
  table.mtable td.td-duree select { width: 112px; font-size: 13.5px; padding: 6px 10px; }
  table.mtable td.td-note input[type="text"] { width: 116px; }
  button.note-apercu { max-width: 124px; }
  table.mtable th.th-note { width: 132px; }

  /* --- 2. volume : séparations franches, tableau posé sur une carte --- */
  .board {
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
    box-shadow: var(--shadow); overflow: hidden; padding: 0 0 4px;
  }
  table.mtable thead th {
    background: var(--surface-2); padding-top: 12px; padding-bottom: 12px;
    border-bottom: 2px solid var(--hairline);
  }
  table.mtable tbody tr.trow > td {
    padding-top: 12px; padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
  }
  table.mtable tbody tr.trow:hover > td { background: var(--accent-wash); }
  table.mtable tbody tr.trow:last-of-type > td { border-bottom: none; }
  table.mtable tr.grp-bar > td {
    background: var(--surface-2); border-left: 3px solid var(--grp, var(--accent));
    border-radius: 0 8px 8px 0; padding: 9px 12px; border-bottom: 1px solid var(--hairline);
  }
  table.mtable tr.grp-bar.grp-retard > td { background: var(--retard-wash) !important; }
  tr.trow-detail > td { border-bottom: 1px solid var(--hairline); background: var(--surface-2); }
  .detail-boite { padding-top: 4px; padding-bottom: 4px; }
  /* Le lien du ticket se saisit dans le déroulant (plus de colonne Ticket). */
  .detail-meta .meta-ticket { margin-top: 10px; }
  .detail-meta .meta-ticket-ligne { display: flex; gap: 8px; align-items: center; }
  .detail-meta .meta-ticket-ligne input { flex: 1 1 auto; min-width: 0; width: 100%; font-size: 12.5px; }
  .detail-meta .meta-ticket-ligne a { flex: 0 0 auto; white-space: nowrap; }

  /* --- 3. téléphone et tablette --- */

  /* Tablette en paysage : la colonne Statut reste visible quand on fait
     défiler le tableau horizontalement. */
  @media (min-width: 981px) and (max-width: 1280px) {
    table.mtable th.th-check, table.mtable td.td-check {
      position: sticky; left: 0; z-index: 2; background: var(--surface);
      box-shadow: 1px 0 0 var(--hairline);
    }
    table.mtable thead th.th-check { z-index: 3; background: var(--surface-2); }
    table.mtable tbody tr.trow:hover > td.td-check { background: var(--accent-wash); }
  }

  /* Tablette et téléphone : une carte par tâche, champs confortables. */
  @media (max-width: 980px) {
    .table-scroll { overflow-x: visible; }
    table.mtable { display: block; width: 100%; min-width: 0; }
    table.mtable thead { display: none; }
    table.mtable tbody { display: block; }
    table.mtable tbody tr { display: block; }

    table.mtable tr.grp-bar { margin: 16px 0 10px; }
    table.mtable tr.grp-bar > td { border-radius: 8px; padding: 9px 12px; }

    table.mtable tr.trow {
      display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
      margin: 0 0 12px; padding: 14px; background: var(--surface);
      border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow);
    }
    table.mtable tr.trow > td {
      display: block; width: auto !important; min-width: 0; padding: 0;
      border: none; box-shadow: none; background: transparent;
    }
    table.mtable tr.trow > td::before {
      content: attr(data-label); display: block; margin-bottom: 3px;
      font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
    }
    table.mtable tr.trow > td:not([data-label])::before { display: none; }

    /* Ordre : statut · actions sur la première ligne, client et tâche
       sur toute la largeur, puis les champs. */
    table.mtable tr.trow > td.td-check { order: 1; }
    table.mtable tr.trow > td.td-suppr { order: 2; margin-left: auto; }
    table.mtable tr.trow > td.cell-client { order: 3; flex: 1 1 100%; }
    table.mtable tr.trow > td.cell-titre { order: 4; flex: 1 1 100%; }
    table.mtable tr.trow > td.cell-qui { order: 5; }
    table.mtable tr.trow > td.td-echeance { order: 6; }
    table.mtable tr.trow > td.td-heure { order: 7; }
    table.mtable tr.trow > td.td-duree { order: 8; }
    table.mtable tr.trow > td.td-rdv { order: 9; }
    table.mtable tr.trow > td.td-note { order: 10; flex: 1 1 100%; }
    table.mtable tr.trow > td.cell-titre::before,
    table.mtable tr.trow > td.td-note::before { display: none; }

    /* Champs au doigt (16 px évite aussi le zoom automatique sur iOS). */
    table.mtable tr.trow input, table.mtable tr.trow select { font-size: 16px; min-height: 40px; }
    table.mtable .cell-titre input.titre-input { font-size: 16px; font-weight: 500; }
    table.mtable input.client-input { width: 100%; max-width: 100%; font-size: 16px; }
    table.mtable td input[type="date"], table.mtable td input[type="time"],
    table.mtable td select.qui-select, table.mtable td.td-duree select { width: auto; font-size: 16px; }
    table.mtable td select.qui-select { padding-right: 22px; }
    button.note-apercu { max-width: none; font-size: 14.5px; padding: 6px 0; }
    button.statut-pill { font-size: 14px; padding: 6px 14px; min-width: 0; }
    button.deplier { width: 34px; height: 34px; font-size: 15px; margin-right: 6px; }
    button.icone-suppr, button.icone-action { font-size: 17px; padding: 8px; }

    /* Ligne dépliée : bloc plein, plus de largeur « collante ». */
    table.mtable tr.trow-detail { margin: 0 0 12px; }
    table.mtable tr.trow-detail > td {
      display: block; padding: 14px; border: 1px solid var(--hairline);
      border-radius: 12px; background: var(--surface-2);
    }
    .detail-boite { position: static; width: auto; padding: 0; display: block; }
    .detail-note { display: block; margin-bottom: 14px; }
    .detail-note textarea { min-height: 120px; }
  }

  /* Téléphone : barre d'outils et en-tête empilés, tout au doigt. */
  @media (max-width: 720px) {
    header.top { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
    header.top h1 { font-size: 20px; }
    .top-droite { justify-content: space-between; gap: 10px; }
    .top-droite .compte { order: 3; flex: 1 1 100%; }
    .wrap { padding: 14px 14px 90px; }
    .barre { gap: 8px; }
    .barre #nouvelle { flex: 1 1 100%; justify-content: center; }
    .recherche { flex: 1 1 100%; }
    .recherche input[type="search"] { font-size: 16px; }
    .compteurs { flex: 1 1 100%; gap: 16px; }
    .puces { margin-bottom: 14px; gap: 8px 12px; }
    .views, .puces-droite { gap: 6px; }
    .views .puce, .puces-droite .puce { padding: 7px 12px; }
    table.mtable tr.trow { padding: 12px; gap: 10px 14px; }
    .modal-overlay { padding: 10px; align-items: flex-start; }
    .modal-boite { max-width: 100%; }
  }