/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ====================================================
   Tigrid — Design System
   ==================================================== */

/* Toute couleur passe par une variable : le thème sombre plus bas ne
   redéfinit que ces valeurs, jamais les règles elles-mêmes. */
:root {
  color-scheme: light;

  --sticky-offset: 0px;
  --filters-height: 0px;

  --bg: #f5f5f4;
  --surface: #ffffff;
  --surface-alt: #f0efed;
  --border: #e7e5e4;
  --text: #1c1917;
  --text-muted: #78716c;
  --radius: 6px;

  /* La bande du logo (public/icon.svg) : rouge, ambre, vert. Ce sont aussi,
     à la nuance près, les couleurs des états « en retard », « reportée » et
     « terminée ». Elle sert de liseré de marque partout où l'application a un
     bord haut : vitrine, barre de navigation, pages d'authentification. */
  --brand-stripe-1: #ef4444;
  --brand-stripe-2: #eab308;
  --brand-stripe-3: #4ade80;
  --brand-stripe: linear-gradient(
    90deg,
    var(--brand-stripe-1) 0 33.34%,
    var(--brand-stripe-2) 33.34% 66.67%,
    var(--brand-stripe-3) 66.67%
  );

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-contrast: #ffffff;
  --focus-ring: rgba(79, 70, 229, 0.12);

  /* Action principale (nav « Nouvelle tâche », soumission des modales) et
     pastille de filtre active : aplat en clair, teinte translucide en sombre
     où un aplat saturé serait le seul point lumineux de la page. */
  --primary-bg: var(--accent);
  --primary-border: var(--accent);
  --primary-text: var(--accent-contrast);
  --primary-bg-hover: var(--accent-hover);
  --primary-border-hover: var(--accent-hover);

  --pill-active-bg: var(--accent);
  --pill-active-border: var(--accent);
  --pill-active-text: var(--accent-contrast);

  --today: #6366f1;
  --success: #16a34a;

  /* « Terminé! » du menu rapide : le vert de la bande du logo, foncé juste
     assez pour porter un texte blanc lisible. Même logique aplat / teinte
     que --primary-* selon le thème. */
  --complete-bg: #15803d;
  --complete-border: #15803d;
  --complete-text: #ffffff;
  --complete-bg-hover: #166534;
  --complete-border-hover: #166534;
  --drop-outline: #818cf8;
  --drop-bg: #eef2ff;
  --drop-glow: rgba(124, 58, 237, 0.5);
  --drop-glow-soft: rgba(124, 58, 237, 0.35);
  --drop-glow-fade: rgba(124, 58, 237, 0);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.09);
  --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
  --backdrop: rgba(0, 0, 0, 0.35);

  --status-unplanned-border: #d1d5db;
  --status-planned-border: #7c3aed;
  --status-planned-bg: #faf5ff;
  --status-planned-text: #3b0764;
  --status-due-border: #d97706;
  --status-due-bg: #fffbeb;
  --status-due-text: #78350f;
  --status-overdue-border: #dc2626;
  --status-overdue-bg: #fef2f2;
  --status-overdue-text: #7f1d1d;
  --status-completed-border: #86efac;
  --status-completed-bg: #f0fdf4;
  --status-completed-text: #6b7280;
  --status-completed-strike: #9ca3af;
  --status-reported-border: #eab308;
  --status-reported-bg: #fefce8;
  --status-reported-text: #713f12;
  --status-cancelled-border: #6b7280;
  --status-cancelled-bg: #1f2937;
  --status-cancelled-text: #9ca3af;
  --status-cancelled-strike: #6b7280;
}

/* Thème sombre piloté par la préférence du navigateur */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #0d0d0d;
    --surface: #171717;
    --surface-alt: #1b1b1b;
    --border: #2f2f2f;
    --text: #ededed;
    --text-muted: #9a9a9a;

    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-contrast: #0d0d0d;
    --focus-ring: rgba(59, 130, 246, 0.25);

    --primary-bg: rgba(59, 130, 246, 0.16);
    --primary-border: #3b82f6;
    --primary-text: #93c5fd;
    --primary-bg-hover: rgba(59, 130, 246, 0.28);
    --primary-border-hover: #60a5fa;

    --pill-active-bg: rgba(59, 130, 246, 0.16);
    --pill-active-border: #3b82f6;
    --pill-active-text: #93c5fd;

    --today: #818cf8;
    --success: #4ade80;

    --complete-bg: rgba(74, 222, 128, 0.16);
    --complete-border: #4ade80;
    --complete-text: #86efac;
    --complete-bg-hover: rgba(74, 222, 128, 0.28);
    --complete-border-hover: #86efac;
    --drop-outline: #6366f1;
    --drop-bg: rgba(99, 102, 241, 0.12);
    --drop-glow: rgba(139, 92, 246, 0.55);
    --drop-glow-soft: rgba(139, 92, 246, 0.4);
    --drop-glow-fade: rgba(139, 92, 246, 0);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.6);
    --shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.65);
    --shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
    --backdrop: rgba(0, 0, 0, 0.6);

    /* Fonds pastels remplacés par des teintes sombres, texte éclairci */
    --status-unplanned-border: #4b5563;
    --status-planned-border: #a78bfa;
    --status-planned-bg: rgba(124, 58, 237, 0.16);
    --status-planned-text: #ddd6fe;
    --status-due-border: #f59e0b;
    --status-due-bg: rgba(217, 119, 6, 0.16);
    --status-due-text: #fde68a;
    --status-overdue-border: #ef4444;
    --status-overdue-bg: rgba(220, 38, 38, 0.18);
    --status-overdue-text: #fecaca;
    --status-completed-border: #4ade80;
    --status-completed-bg: rgba(34, 197, 94, 0.12);
    --status-completed-text: #8b8b8b;
    --status-completed-strike: #6b7280;
    --status-reported-border: #eab308;
    --status-reported-bg: rgba(234, 179, 8, 0.14);
    --status-reported-text: #fde68a;
    --status-cancelled-border: #6b7280;
    --status-cancelled-bg: rgba(107, 114, 128, 0.16);
    --status-cancelled-text: #9ca3af;
    --status-cancelled-strike: #6b7280;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ---- Nav ---- */

/* La barre d'application, seule enfant directe de <body> : le sélecteur est
   ancré là pour qu'un <nav> imbriqué — la pagination de l'administration, par
   exemple — n'hérite ni de la hauteur fixe, ni du collant, ni du liseré. */
body > nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Liseré de marque, posé en absolu à l'intérieur des 48 px du nav plutôt
   qu'en bordure haute : la hauteur ne bouge pas, et les barres calées dessus
   (.tag-filters à 48px, #unaffected_tasks juste en dessous) ne se décalent
   pas. Le nav étant collant, le liseré reste visible au défilement — c'est
   tout l'intérêt de le porter là plutôt qu'en tête de page. */
body > nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-stripe);
}

body > nav span {
  color: var(--text-muted);
  margin-right: auto;
}

body > nav button,
body > nav [type="submit"] {
  padding: 5px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
}

body > nav button:hover,
body > nav [type="submit"]:hover,
body > nav .today-btn:hover {
  background: var(--bg);
}

body > nav .today-btn {
  padding: 5px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
}

body > nav [data-controller="modal"] > button {
  background: var(--primary-bg);
  color: var(--primary-text);
  border-color: var(--primary-border);
}

body > nav [data-controller="modal"] > button:hover {
  background: var(--primary-bg-hover);
  border-color: var(--primary-border-hover);
}

/* Le bloc compte (e-mail, administration, compte, déconnexion) n'est un menu
   que sur téléphone. Ici, display: contents le fond dans la barre — ce qui
   passe aussi outre le masquage d'un [popover] fermé — et l'e-mail reprend
   sa place en tête, poussant le reste à droite. */
body > nav .nav-account {
  display: contents;
}

body > nav .nav-email {
  order: -1;
}

body > nav .nav-menu-toggle {
  display: none;
}

/* ---- Unaffected tasks ---- */

#unaffected_tasks {
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(48px + var(--filters-height, 0px));
  z-index: 50;
}

#unaffected_tasks h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 10px 0;
}

/* ---- Calendar ---- */

.calendar_view {
  list-style: none;
  margin: 0;
  padding: 8px 24px;

  > li {
    padding: 10px 12px 10px 88px;
    min-height: 44px;
    position: relative;
    border-radius: var(--radius);
    scroll-margin-top: var(--sticky-offset);

    &:nth-child(even) {
      background: var(--surface-alt);
    }

    &.today {
      box-shadow: inset 3px 0 0 0 var(--today);

      .day_tag {
        color: var(--today);
      }
    }

    .day_tag {
      display: block;
      position: absolute;
      left: 4px;
      width: 76px;
      top: 12px;
      text-align: right;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .day_progress {
      position: absolute;
      left: 4px;
      width: 76px;
      top: 28px;
      text-align: right;
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
      letter-spacing: 0.02em;

      .day_progress_done {
        color: var(--success);
      }
    }
  }
}

/* ---- Task cards ---- */

.task {
  border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-left-width: 3px;
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s;

  p.title {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
  }

  form.inline-edit {
    margin: 0 0 4px 0;

    input {
      width: 100%;
      box-sizing: border-box;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.4;
      padding: 0 2px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--surface);
      color: inherit;
    }
  }

  button {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid currentColor;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    opacity: 0.65;
    transition: opacity 0.1s;
  }

  button:hover {
    opacity: 1;
  }

  ul.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 4px 0;
    padding: 0;

    li.tag {
      font-size: 11px;
      font-weight: 500;
      line-height: normal;
      padding: 2px 8px;
      border-radius: 99px;
      border: 1px solid currentColor;
      background: transparent;
      opacity: 0.65;
    }
  }
}

.task:last-child {
  margin-bottom: 0;
}

.task:hover {
  box-shadow: var(--shadow-hover);
}

.task.dragging {
  opacity: 0.35;
  cursor: grabbing;
}

/* Glissé au doigt : la carte fantôme suit le pointeur. Elle est déplacée par
   `transform` depuis le contrôleur et ne porte aucune transition, elle doit
   coller au doigt au pixel près — c'est de la manipulation directe, elle est
   donc conservée telle quelle en mouvement réduit. */

.task-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  margin: 0;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: var(--shadow-hover);
  will-change: transform;
}

body.dragging-touch {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
}

@keyframes task-drop-glow {
  0%   { box-shadow: 0 0 0 0 var(--drop-glow); }
  40%  { box-shadow: 0 0 10px 4px var(--drop-glow-soft); }
  100% { box-shadow: 0 0 0 0 var(--drop-glow-fade); }
}

.task.dropped {
  animation: task-drop-glow 1.5s ease-out forwards;
}

/* Status variants */

.task.unplanned {
  border-left-color: var(--status-unplanned-border);
  color: var(--text-muted);
}

.task.planned {
  border-left-color: var(--status-planned-border);
  background: var(--status-planned-bg);
  color: var(--status-planned-text);
}

.task.still_due {
  border-left-color: var(--status-due-border);
  background: var(--status-due-bg);
  color: var(--status-due-text);
}

.task.overdue {
  border-left-color: var(--status-overdue-border);
  background: var(--status-overdue-bg);
  color: var(--status-overdue-text);
}

.task.completed {
  border-left-color: var(--status-completed-border);
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
  cursor: default;

  p.title {
    text-decoration: line-through;
    text-decoration-color: var(--status-completed-strike);
  }
}

.task.reported {
  border-left-color: var(--status-reported-border);
  background: var(--status-reported-bg);
  color: var(--status-reported-text);
  cursor: default;
}

.task.cancelled {
  border-left-color: var(--status-cancelled-border);
  background: var(--status-cancelled-bg);
  color: var(--status-cancelled-text);
  cursor: default;

  p.title {
    text-decoration: line-through;
    text-decoration-color: var(--status-cancelled-strike);
  }
}

/* Drop zone highlight */

[data-drop-zone].drag-over {
  outline: 2px dashed var(--drop-outline);
  outline-offset: 2px;
  border-radius: var(--radius);
  background-color: var(--drop-bg);
}

/* ---- Modals ---- */

dialog {
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-dialog);
  padding: 24px;
  min-width: 320px;
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}

dialog .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

dialog .close-btn:hover {
  color: var(--text);
  background: var(--bg);
}

dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(2px);
}

dialog p {
  margin: 0 0 16px 0;
  font-weight: 500;
}

dialog label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

dialog input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

dialog input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

dialog menu {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 20px 0 0 0;
  padding: 0;
}

dialog [type="submit"],
dialog button[type="button"] {
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
}

dialog [type="submit"] {
  background: var(--primary-bg);
  color: var(--primary-text);
  border-color: var(--primary-border);
}

dialog [type="submit"]:hover {
  background: var(--primary-bg-hover);
  border-color: var(--primary-border-hover);
}

dialog button[type="button"]:hover {
  background: var(--bg);
}

dialog.tag-migration .bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px 0;
}

dialog.tag-migration button.secondary {
  background: var(--surface);
  color: inherit;
  border-color: var(--border);
}

dialog.tag-migration button.secondary:hover {
  background: var(--bg);
}

dialog.tag-migration .capitalize-option {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  font-size: 13px;
}

dialog.tag-migration .tag-migration-row {
  border-top: 1px solid var(--border);
  padding: 10px 0;
  transition: opacity 0.25s ease;

  &.leaving {
    opacity: 0;
  }

  p.current-title {
    margin: 0 0 4px 0;
    font-size: 13px;
    opacity: 0.6;
    text-decoration: line-through;
  }

  .proposal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    .new-title {
      font-size: 13px;
      font-weight: 500;
    }

    ul.tags {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin: 0;
      padding: 0;

      li.tag {
        font-size: 11px;
        font-weight: 500;
        line-height: normal;
        padding: 2px 8px;
        border-radius: 99px;
        border: 1px solid currentColor;
        opacity: 0.65;
      }
    }
  }

  menu {
    margin-top: 8px;
  }
}

/* ---- Task quick actions (menu rapide d'une tâche) ---- */

/* La modale vit dans la carte .task : on neutralise ce qu'elle en hérite
   (couleur de statut, curseur de glisser, boutons en pastille). */
dialog.task-actions {
  width: min(360px, calc(100vw - 32px));
  min-width: 0;
  padding: 20px;
  color: var(--text);
  cursor: default;

  .close-btn {
    border-radius: var(--radius);
    opacity: 1;
  }

  header {
    padding-right: 28px;
    margin-bottom: 16px;
  }

  .task-actions-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
  }

  .task-actions-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--status-unplanned-border);
  }

  .task-actions-status[data-status="planned"]::before { background: var(--status-planned-border); }
  .task-actions-status[data-status="still_due"]::before { background: var(--status-due-border); }
  .task-actions-status[data-status="overdue"]::before { background: var(--status-overdue-border); }

  p.task-actions-title {
    margin: 4px 0 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  form {
    margin: 0;
  }

  button[type="submit"],
  input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    opacity: 1;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
  }

  button[type="submit"]:hover,
  input[type="submit"]:hover {
    background: var(--bg);
  }

  button[type="submit"]:focus-visible,
  input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  button.task-actions-complete {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    background: var(--complete-bg);
    border-color: var(--complete-border);
    color: var(--complete-text);
  }

  button.task-actions-complete:hover {
    background: var(--complete-bg-hover);
    border-color: var(--complete-border-hover);
  }

  .task-actions-secondary {
    display: grid;
    gap: 8px;
    margin-top: 8px;
  }

  .task-actions-secondary:not(:has(form)) {
    display: none;
  }

  /* Actions sans retour : discrètes, séparées du reste, le rouge n'apparaît
     qu'au survol pour ne pas concurrencer « Terminé! ». */
  .task-actions-danger {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);

    form {
      flex: 1;
    }

    input[type="submit"] {
      border-color: transparent;
      background: transparent;
      color: var(--text-muted);
    }

    input[type="submit"]:hover {
      background: var(--bg);
      color: var(--text);
    }

    input[type="submit"].destructive:hover {
      background: var(--status-overdue-bg);
      color: var(--status-overdue-text);
    }
  }
}

/* ---- New task (modale de création) ---- */

/* Même grammaire que le menu rapide : en-tête discret, champ en vedette,
   une action qui domine et son alternative dessous. La modale vit dans la
   nav : les sélecteurs sont assez précis pour passer devant les règles
   « body > nav button » et « body > nav span » qu'elle en hérite. */
dialog.task-new {
  width: min(420px, calc(100vw - 32px));
  min-width: 0;
  padding: 20px;

  form {
    display: grid;
  }

  .close-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    font-size: 18px;
  }

  .close-btn:hover {
    background: var(--bg);
  }

  label.task-new-heading {
    margin: 0 0 12px 0;
    padding-right: 32px;
  }

  input[type="text"] {
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 8px;
  }

  input[type="text"]::placeholder {
    color: var(--text-muted);
  }

  .task-new-preview {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin: 8px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
  }

  p.task-new-hint {
    margin: 0;
    font-weight: 400;
  }

  .task-new-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .task-new-tags[hidden] {
    display: none;
  }

  span.task-new-tags-label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
  }

  .task-new-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .task-new-tags li {
    padding: 2px 10px;
    border: 1px solid var(--pill-active-border);
    border-radius: 99px;
    background: var(--pill-active-bg);
    color: var(--pill-active-text);
    font-size: 12px;
    font-weight: 500;
  }

  .task-new-errors:not(:empty) {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--status-overdue-bg);
    color: var(--status-overdue-text);
    font-size: 13px;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .task-new-actions {
    display: grid;
    gap: 8px;
    margin-top: 16px;
  }

  button.task-new-create,
  button.task-new-plan-today {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-radius: var(--radius);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, opacity 0.1s;
  }

  button.task-new-create {
    padding: 12px 16px;
    border: 1px solid var(--primary-border);
    background: var(--primary-bg);
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 600;
  }

  button.task-new-create:hover:not(:disabled) {
    background: var(--primary-bg-hover);
    border-color: var(--primary-border-hover);
  }

  button.task-new-plan-today {
    padding: 9px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
  }

  button.task-new-plan-today:hover:not(:disabled) {
    background: var(--bg);
  }

  button.task-new-create:disabled,
  button.task-new-plan-today:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  button.task-new-create:focus-visible,
  button.task-new-plan-today:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  p.task-new-shortcuts {
    margin: 16px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    text-align: center;
  }

  kbd {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
  }
}

/* Pas de clavier physique au doigt : les raccourcis n'ont rien à y faire. */
@media (pointer: coarse) {
  dialog.task-new p.task-new-shortcuts {
    display: none;
  }
}

/* ---- Tag quick filters ---- */

/* Pile sticky : nav (z 100) > filtres (z 60) > sans date (z 50).
   La hauteur de la barre est variable (les pastilles passent à la ligne),
   d'où --filters-height, recalculé en JS à chaque rendu. */
.tag-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 48px;
  z-index: 60;
}

/* [hidden] ne suffit pas face au display: flex ci-dessus */
.tag-filters[hidden] {
  display: none;
}

.tag-filters-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.tag-filter-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.1s;
}

.tag-filter-pill:hover {
  background: var(--bg);
  color: var(--text);
}

.tag-filter-pill.active {
  background: var(--pill-active-bg);
  border-color: var(--pill-active-border);
  color: var(--pill-active-text);
}

.tag-filter-popover-wrapper {
  position: relative;
}

.tag-filter-more {
  font-size: 12px;
  line-height: 1;
  padding: 3px 12px 5px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}

.tag-filter-more:hover {
  background: var(--bg);
  color: var(--text);
}

.tag-filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 90;
  min-width: 260px;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-popover);
}

.tag-filter-hint {
  margin: 10px 2px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.tag-filter-popover input[type="search"] {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}

.tag-filter-popover input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.tag-filter-popover ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.tag-filter-popover li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}

.tag-filter-popover li:last-child {
  border-bottom: none;
}

.tag-filter-row-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--radius);
}

.tag-filter-row-name:hover {
  background: var(--bg);
}

.tag-filter-row-name.active {
  color: var(--accent);
  font-weight: 600;
}

/* button_to enveloppe le bouton dans un <form> : il doit rester un simple
   élément de la ligne flex. */
.tag-filter-popover form.button_to {
  display: flex;
  margin: 0;
}

.tag-filter-pin-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 99px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}

.tag-filter-pin-toggle.pinned {
  color: var(--accent);
}

.tag-filter-pin-toggle:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.tag-filter-pin-toggle.pinned:hover:not(:disabled) {
  color: var(--accent);
}

.tag-filter-pin-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pin-icon {
  display: block;
}

/* ====================================================
   Homepage (vitrine publique servie sur « / »)
   ==================================================== */

/* Parti pris : une page d'almanach réglée, pas une page d'atterrissage.
   Des filets à la place des cartes, une colonne monospace pour tout ce qui
   sert de repère (dates, numéros, compteurs), et pour seule couleur la bande
   rouge/ambre/vert du logo — qui se trouve être la palette des états de
   tâche. L'indigo reste à l'application : l'aperçu est le seul endroit de la
   page qui a le droit d'être coloré, et il gagne à ne rien avoir en face. */

.home {
  --home-gutter: 24px;
  --home-max: 1180px;
  --home-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Bouton principal : de l'encre, pas de l'indigo. Les deux variables
     s'échangent d'elles-mêmes entre thème clair et thème sombre. */
  --home-btn-bg: var(--text);
  --home-btn-fg: var(--bg);

  /* Grain : un peu plus présent en sombre, où l'aplat se voit davantage. */
  --home-grain: 0.04;

  position: relative;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  .home {
    --home-grain: 0.055;
  }
}

/* Bandeau de marque : la seule couleur franche de la page. */
.home::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--brand-stripe);
}

/* Grain fixe sur toute la fenêtre : casse la platitude des aplats sans
   charger une seule image. */
.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--home-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Un même anneau de focus pour toute la page, au clavier seulement. */
.home a:focus-visible,
.home button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

.home-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}

.home-skip-link:focus {
  left: var(--home-gutter);
  top: 10px;
}

/* ---- Bandeau de titre ---- */

.home-masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 20px var(--home-gutter) 18px;
  border-bottom: 1px solid var(--border);
}

.home-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.home-wordmark-mark {
  display: block;
  width: 28px;
  height: 28px;
}

/* Le quantième du jour, en chiffres à chasse fixe : un agenda affiche la
   date, c'est le moins qu'il puisse faire. */
.home-datestamp {
  justify-self: end;
  font-family: var(--home-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.home-nav-link {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.18s ease;
}

.home-nav-link:hover {
  border-bottom-color: var(--text);
}

/* ---- Hero ---- */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 76px);
  max-width: var(--home-max);
  margin: 0 auto;
  /* Bas plus généreux que le haut : l'œil compense la masse du titre. */
  padding: clamp(44px, 7vw, 84px) var(--home-gutter) clamp(56px, 9vw, 108px);
}

.home-kicker {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 26px;
  max-width: 42ch;
  font-family: var(--home-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.home-kicker::before {
  content: "";
  flex: none;
  width: 27px;
  height: 9px;
  margin-top: 5px;
  background: var(--brand-stripe);
}

.home-hero-copy h1 {
  margin: 0 0 24px;
  font-size: clamp(2.35rem, 5.4vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

/* Pas de dégradé sur le texte : la hiérarchie se fait à l'encre, la première
   ligne en retrait, la seconde en pleine valeur. */
.home-hero-lead,
.home-hero-highlight {
  display: block;
}

.home-hero-lead {
  color: var(--text-muted);
}

.home-lede {
  margin: 0 0 34px;
  max-width: 52ch;
  font-size: 17px;
  color: var(--text-muted);
  text-wrap: pretty;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.home-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
}

.home-btn-primary {
  background: var(--home-btn-bg);
  border-color: var(--home-btn-bg);
  color: var(--home-btn-fg);
}

/* S'évide au survol plutôt que de changer de teinte : la marque n'a qu'une
   couleur d'encre, autant s'en servir. */
.home-btn-primary:hover {
  background: transparent;
  color: var(--text);
}

.home-btn-primary:active {
  transform: translateY(1px);
}

/* Seconde action : un lien, pas un bouton fantôme. */
.home-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.18s ease;
}

.home-textlink::after {
  content: "→";
  font-family: var(--home-mono);
  transition: transform 0.18s ease;
}

.home-textlink:hover {
  border-bottom-color: var(--text);
}

.home-textlink:hover::after {
  transform: translateX(3px);
}

/* Sceau : la promesse de chiffrement dès le premier écran, en petit, et une
   ancre vers la section qui l'explique en entier. */
.home-seal {
  margin: 30px 0 0;
  font-family: var(--home-mono);
  font-size: 12px;
  line-height: 1.6;
  text-wrap: pretty;
}

.home-seal a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.home-seal a::after {
  content: " ↓";
}

.home-seal a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ---- Aperçu de l'application ---- */

/* L'aperçu déborde un peu du conteneur sur la droite : la grille se rompt,
   et l'application donne l'impression de continuer hors du cadre. */
.home-hero-visual {
  min-width: 0;
  margin-right: calc(-1 * clamp(0px, 5vw, 72px));
}

.home-mock {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}

/* Filet de marque en tête de fenêtre, à la place de l'ombre portée. */
.home-mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border-top: 2px solid transparent;
  border-bottom: 1px solid var(--border);
  border-image: var(--brand-stripe) 2 / 2px 0 0 0;
}

.home-mock-wordmark {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.home-mock-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius);
  background: var(--primary-bg);
  border: 1px solid var(--primary-border);
  color: var(--primary-text);
}

.home-mock-body {
  font-size: 14px;
}

.home-mock-unaffected {
  padding: 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.home-mock-unaffected h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-family: var(--home-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.home-mock-badge {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* La maquette réutilise les classes réelles du calendrier : on neutralise
   seulement ce qui n'a pas de sens hors application. */
.home-mock .calendar_view {
  padding: 8px 12px;
  /* Les derniers jours se perdent vers le bas : le calendrier ne s'arrête
     pas au bord de l'aperçu. */
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.home-mock .calendar_view > li {
  padding-left: 70px;
}

.home-mock .calendar_view > li .day_tag,
.home-mock .calendar_view > li .day_progress {
  width: 58px;
  font-family: var(--home-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.home-mock .task,
.home-legend .task,
.home-entry-visual .task,
.home-mock .tag-filters,
.home-entry-visual .tag-filters {
  cursor: default;
  pointer-events: none;
}

/* La barre de filtres reprend les classes réelles ; il suffit de lui retirer
   son ancrage collant, qui n'a aucun sens hors de l'application. */
.home-mock .tag-filters,
.home-entry-visual .tag-filters {
  position: static;
  padding: 9px 14px;
}

/* Dans le registre, la barre est seule : elle a besoin d'un cadre entier
   plutôt que du seul filet qui la sépare du calendrier. */
.home-entry-visual .tag-filters {
  border: 1px solid var(--border);
  border-radius: 4px;
}

.home-mock-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid currentColor;
  opacity: 0.65;
}

/* Emplacement d'accueil de la tâche déposée : la silhouette de la carte,
   pour que le glisser-déposer se lise sur une image fixe. */
.home-mock-drop-ghost {
  border: 1px dashed var(--drop-outline);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--text-muted);
  opacity: 0.7;
}

.home-mock-drop-ghost .title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

/* ---- Sections ---- */

.home-section {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) var(--home-gutter) clamp(56px, 8vw, 92px);
  border-top: 1px solid var(--border);
}

.home-section-title {
  margin: 0 0 14px;
  max-width: 22ch;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.home-section-lede {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---- Registre des trois idées ---- */

/* Trois lignes réglées plutôt que trois cartes de même taille : chaque idée
   prend toute la largeur, et le texte change de côté d'une ligne à l'autre. */
.home-register {
  margin-top: clamp(32px, 4vw, 48px);
}

.home-entry {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(32px, 4.5vw, 52px) 0 clamp(36px, 5vw, 58px);
  border-top: 1px solid var(--border);
}

.home-entry:first-child {
  border-top: 0;
  padding-top: 0;
}

.home-entry-ordinal {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding-top: 7px;
  font-family: var(--home-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Un cran de la bande par entrée : rouge, puis ambre, puis vert. */
.home-entry-ordinal::after {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--home-entry-tick, var(--border));
}

.home-entry:nth-of-type(3n+1) { --home-entry-tick: var(--brand-stripe-1); }
.home-entry:nth-of-type(3n+2) { --home-entry-tick: var(--brand-stripe-2); }
.home-entry:nth-of-type(3n+3) { --home-entry-tick: var(--brand-stripe-3); }

.home-entry-body {
  grid-column: 2;
  grid-row: 1;
}

.home-entry-body h3 {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.home-entry-body p {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* La démonstration ne prend pas toute sa colonne : elle se cale contre le
   bord extérieur, ce qui donne au registre son balancement d'une ligne à
   l'autre. */
.home-entry-visual {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  justify-self: end;
  justify-items: stretch;
  width: min(100%, 25rem);
  gap: 8px;
  min-width: 0;
}

/* Une ligne sur deux, la démonstration passe à gauche et le texte à droite. */
.home-entry:nth-of-type(even) .home-entry-body {
  grid-column: 3;
}

.home-entry:nth-of-type(even) .home-entry-visual {
  grid-column: 2;
  justify-self: start;
}

.home-entry-visual .task,
.home-entry-visual .home-mock-drop-ghost,
.home-entry-visual .home-tag-input {
  width: 100%;
  margin: 0;
}

/* Pas de cadre ici : il serait mangé par le fondu ci-dessous, qui est
   justement ce qui raconte le défilement sans fin. */
.home-days-strip {
  gap: 0;
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}

.home-day-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 3px;
  font-family: var(--home-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.home-day-row:nth-child(even) {
  background: var(--surface-alt);
}

.home-day-row.today {
  box-shadow: inset 3px 0 0 0 var(--today);
  color: var(--today);
}

.home-demo-arrow {
  justify-self: center;
  font-family: var(--home-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
}

.home-tag-input {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-family: var(--home-mono);
  font-size: 12.5px;
}

/* ---- Légende des états ---- */

/* Une rangée de pastilles ne dit rien : chaque état est ici en face de sa
   définition, sur une ligne réglée. */
.home-legend {
  margin: clamp(32px, 4vw, 44px) 0 0;
}

.home-legend-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 6px clamp(20px, 3.5vw, 52px);
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.home-legend-row:last-child {
  border-bottom: 1px solid var(--border);
}

.home-legend dt {
  min-width: 0;
}

.home-legend .task {
  margin: 0;
}

.home-legend .task .title {
  margin: 0;
}

.home-legend dd {
  margin: 0;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---- Confidentialité ---- */

/* Deux colonnes séparées d'un simple filet vertical : ni cartes, ni tours de
   grille tarifaire. L'écart de part et d'autre du filet est le même que la
   gouttière, le trait tombe donc au milieu. */
.home-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(36px, 4.5vw, 52px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--border);
}

/* Colonne flex : la contrepartie est chassée en bas, les deux traits de
   couleur tombent donc à la même hauteur quel que soit le nombre de lignes
   au-dessus. */
.home-mode {
  display: flex;
  flex-direction: column;
}

.home-mode + .home-mode {
  padding-left: clamp(28px, 4vw, 60px);
  border-left: 1px solid var(--border);
}

.home-mode-kicker {
  margin: 0 0 12px;
  font-family: var(--home-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.home-mode h3 {
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.home-mode-body {
  margin: 0 0 24px;
  max-width: 46ch;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* La couleur marque ce qu'on risque, pas la qualité du mode : ambre quand
   l'administrateur garde les moyens de lire, rouge quand la perte des codes
   est sans retour. */
.home-mode-tradeoff {
  margin: auto 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--home-tradeoff, var(--border));
  font-size: 14px;
  color: var(--text-muted);
  text-wrap: pretty;
}

.home-mode:nth-of-type(1) { --home-tradeoff: var(--brand-stripe-2); }
.home-mode:nth-of-type(2) { --home-tradeoff: var(--brand-stripe-1); }

/* ---- Clôture et pied de page ---- */

/* Alignée à gauche comme le reste : un bloc centré en fin de page est le
   réflexe qu'on cherchait justement à éviter. */
.home-closing {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--home-gutter) clamp(64px, 9vw, 108px);
  border-top: 1px solid var(--border);
}

.home-closing h2 {
  margin: 0 0 12px;
  max-width: 16ch;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.home-closing p {
  margin: 0 0 32px;
  max-width: 46ch;
  color: var(--text-muted);
}

.home-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 22px var(--home-gutter) 40px;
  border-top: 1px solid var(--border);
  font-family: var(--home-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.home-footer p {
  margin: 0;
}

.home-footer a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.home-footer a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ---- Apparition ---- */

/* Entrée décalée : le titre, puis l'aperçu. Neutralisée en bas de feuille
   quand l'utilisateur demande une réduction des mouvements. */
@keyframes home-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.home-hero-copy {
  animation: home-rise 0.6s ease-out both;
}

.home-hero-visual {
  animation: home-rise 0.6s ease-out 0.14s both;
}

/* ---- Responsive ---- */

@media (max-width: 980px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .home-hero-visual {
    margin-right: 0;
  }
}

/* En dessous, le registre repasse en une colonne : le numéro reste collé au
   titre, la démonstration passe dessous sur toute la largeur. */
@media (max-width: 880px) {
  .home-entry {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 20px clamp(16px, 3vw, 28px);
  }

  .home-entry-body,
  .home-entry:nth-of-type(even) .home-entry-body {
    grid-column: 2;
    grid-row: 1;
  }

  .home-entry-visual,
  .home-entry:nth-of-type(even) .home-entry-visual {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .home-modes {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-mode + .home-mode {
    padding-left: 0;
    padding-top: clamp(24px, 5vw, 32px);
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 680px) {
  .home-legend-row {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }

  .home-legend dt {
    max-width: 14rem;
  }
}

@media (max-width: 640px) {
  .home {
    --home-gutter: 20px;
  }

  /* Le quantième cède la place sur les petites largeurs ; la grille repasse
     à deux colonnes pour que le lien reste bien calé à droite. */
  .home-masthead {
    grid-template-columns: 1fr auto;
    padding: 14px var(--home-gutter);
  }

  .home-datestamp {
    display: none;
  }

  .home-hero {
    padding-top: 32px;
    padding-bottom: 52px;
  }

  .home-lede {
    font-size: 16px;
  }

  /* Bouton pleine largeur, lien en dessous : plus facile à viser au pouce. */
  .home-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .home-btn {
    padding: 14px 24px;
    text-align: center;
  }

  .home-textlink {
    align-self: flex-start;
  }

  .home-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-entry-ordinal {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }

  .home-entry-ordinal::after {
    height: 2px;
  }

  .home-entry-body,
  .home-entry:nth-of-type(even) .home-entry-body {
    grid-column: 1;
    grid-row: 2;
  }

  .home-entry-visual,
  .home-entry:nth-of-type(even) .home-entry-visual {
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;
    width: 100%;
  }
}

/* L'aperçu reste affiché sur téléphone — c'est le principal argument visuel —
   mais allégé de ce qui ne tient plus à cette largeur. */
@media (max-width: 560px) {
  .home-mock-unaffected {
    display: none;
  }

  .home-mock-nav {
    height: 40px;
    padding: 0 10px;
  }

  .home-mock .calendar_view {
    padding: 6px 8px;
  }

  .home-mock .calendar_view > li {
    padding: 8px 8px 8px 58px;
  }

  .home-mock .calendar_view > li .day_tag,
  .home-mock .calendar_view > li .day_progress {
    width: 48px;
    font-size: 10px;
  }
}

/* ====================================================
   Pages d'authentification
   ==================================================== */

/* Sans barre de navigation, le liseré se pose sur le haut de la fenêtre :
   la continuité est gardée depuis l'accueil, d'où l'on arrive. */
.auth-page::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-stripe);
  z-index: 1;
}

.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 100dvh;
  padding: 48px 24px;
}

.auth-wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-hover);
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.auth-form [type="submit"] {
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--primary-border);
  background: var(--primary-bg);
  color: var(--primary-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.auth-form [type="submit"]:hover {
  background: var(--primary-bg-hover);
  border-color: var(--primary-border-hover);
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
}

.auth-links a {
  color: var(--text-muted);
}

.auth-links a:hover {
  color: var(--accent);
}

@media (max-width: 640px) {
  .auth-page {
    gap: 20px;
    padding: 32px 20px;
  }

  .auth-card {
    padding: 22px;
  }

  /* Sous 16px, Safari iOS zoome sur le champ au moment de la saisie. */
  .auth-form input {
    padding: 12px;
    font-size: 16px;
  }

  .auth-form [type="submit"] {
    padding: 13px 16px;
    font-size: 15px;
  }
}

.flash {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
}

.flash.alert {
  border-color: var(--status-overdue-border);
  background: var(--status-overdue-bg);
  color: var(--status-overdue-text);
}

.flash.notice {
  border-color: var(--status-completed-border);
  background: var(--status-completed-bg);
  color: var(--text);
}

/* ====================================================
   Coffre : choix du mode, code de récupération, compte
   ==================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.auth-card--wide {
  max-width: 520px;
}

.vault-modes {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.vault-mode {
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
}

.vault-mode:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Les boutons radio vivent dans .auth-form, dont la règle générale étire les
   champs sur toute la largeur : on la neutralise ici. */
.vault-mode input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--accent);
}

.vault-mode-text {
  display: grid;
  gap: 6px;
}

.vault-mode-text strong {
  font-size: 14px;
}

.vault-mode-body,
.vault-mode-warning {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.vault-mode-warning {
  font-weight: 600;
  color: var(--status-overdue-text);
}

.recovery-code {
  margin: 4px 0 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
}

.recovery-code-value {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  word-break: break-all;
}

.recovery-code-hint {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.account-section {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.account-section h2 {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.account-status,
.account-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.account-subheading {
  margin: 22px 0 8px;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* Même teinte que les alertes : ce qui suit engage des données, en clair ou
   en destruction. */
.account-warning {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--status-overdue-border);
  border-radius: var(--radius);
  background: var(--status-overdue-bg);
  color: var(--status-overdue-text);
  font-size: 13px;
  line-height: 1.45;
}

.account-action {
  display: inline-block;
  font-size: 14px;
}

.account-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.account-modes {
  margin: 14px 0 4px;
  padding: 0;
  border: 0;
}

.account-modes legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.account-modes label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.account-modes input[type="radio"] {
  margin-top: 3px;
  width: auto;
  flex: none;
}

/* ====================================================
   Console d'administration
   ==================================================== */

/* Plus large que les autres cartes : il y a un tableau à huit colonnes
   dedans. Au-delà de la largeur de la fenêtre, c'est le tableau qui défile,
   pas la page (voir .admin-table-scroll). */
.admin-card {
  max-width: 960px;
}

.admin-stat-group + .admin-stat-group {
  margin-top: 18px;
}

.admin-stat-group h2 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.admin-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.admin-stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-table-scroll {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.admin-users {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.admin-users th,
.admin-users td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.admin-users thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-alt);
}

.admin-users tbody tr:last-child th,
.admin-users tbody tr:last-child td {
  border-bottom: 0;
}

.admin-user-email {
  font-weight: 500;
  color: var(--text);
}

/* Plus spécifique que la règle générale des cellules, qui aligne à gauche. */
.admin-users .admin-numeric {
  text-align: right;
}

.admin-badge {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.admin-status {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 11px;
}

.admin-status--active {
  border-color: var(--status-completed-border);
  background: var(--status-completed-bg);
  color: var(--text);
}

.admin-status--deactivated {
  border-color: var(--status-overdue-border);
  background: var(--status-overdue-bg);
  color: var(--status-overdue-text);
}

/* Signalé, sans en faire une pastille de plus : un compte en super-privacy n'a
   pas d'enveloppe de secours, personne ne peut le dépanner. */
.admin-privacy-super {
  font-weight: 500;
  color: var(--status-reported-text);
}

.admin-row-action form {
  margin: 0;
}

.admin-row-action button {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.admin-row-action button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-empty {
  color: var(--text-muted);
  text-align: center;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ====================================================
   Application sur téléphone
   ==================================================== */

/* Sur un écran de poche, trois bandeaux collants (nav, filtres, « À
   planifier ») mangeaient plus d'un quart de la hauteur. Seule la nav reste
   collante ; l'action principale descend sous le pouce ; les jours rendent
   leur colonne de dates pour donner toute la largeur aux tâches. */
@media (max-width: 640px) {
  /* ---- Nav ---- */

  body > nav {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
  }

  /* Premier niveau seulement : les modales ouvertes depuis la barre y sont
     imbriquées et gardent leurs propres boutons. */
  body > nav > button,
  body > nav > div > button,
  body > nav > .today-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }

  body > nav .nav-menu-toggle {
    display: inline-flex;
    justify-content: center;
    width: 40px;
    padding: 0;
    margin-left: auto;
  }

  body > nav .nav-account {
    display: none;
  }

  body > nav .nav-account:popover-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 64px 16px auto auto;
    width: min(280px, calc(100vw - 32px));
    margin: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-popover);
  }

  body > nav .nav-account .nav-email {
    order: 0;
    margin: 0;
    padding: 8px 12px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  body > nav .nav-account a,
  body > nav .nav-account [type="submit"] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-size: 15px;
    text-decoration: none;
  }

  body > nav .nav-account a:hover,
  body > nav .nav-account [type="submit"]:hover {
    background: var(--bg);
  }

  body > nav .nav-account form {
    margin: 0;
  }

  /* « Nouvelle tâche » quitte la barre pour un bouton flottant en bas à
     droite, là où le pouce tombe. */
  body > nav [data-controller="modal"] > button {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    min-height: 56px;
    padding: 0 24px 0 20px;
    border-radius: 99px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--shadow-dialog);
  }

  /* En sombre, --primary-bg est une teinte translucide : posée sur la
     surface, elle garde sa couleur sans laisser voir les tâches dessous. */
  body > nav [data-controller="modal"] > button,
  body > nav [data-controller="modal"] > button:hover {
    background:
      linear-gradient(var(--primary-bg), var(--primary-bg)),
      var(--surface);
  }

  body > nav [data-controller="modal"] > button:hover {
    background:
      linear-gradient(var(--primary-bg-hover), var(--primary-bg-hover)),
      var(--surface);
  }

  body > nav [data-controller="modal"] > button::before {
    content: "+";
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  /* ---- Filtres : dans le flux, plus collants ---- */

  .tag-filters {
    position: relative;
    top: auto;
    padding: 12px 16px;
  }

  .tag-filter-pill,
  .tag-filter-more {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }

  /* La liste de tous les tags s'ancre à la barre entière, pas au bouton
     « … » : sinon, poussée à droite, elle déborderait de l'écran. */
  .tag-filter-popover-wrapper {
    position: static;
  }

  .tag-filter-popover {
    top: calc(100% - 4px);
    left: 16px;
    right: 16px;
    min-width: 0;
    max-height: 60dvh;
  }

  .tag-filter-popover input[type="search"] {
    font-size: 16px;
  }

  /* La zone reste collante : c'est d'elle qu'on tire une tâche vers un jour,
     et vers elle qu'on la ramène. Elle se cale sous la nav, dont la hauteur
     varie (la barre passe à la ligne s'il y a des tâches dépassées). */
  #unaffected_tasks {
    top: var(--nav-height, 57px);
    padding: 12px 16px;
  }

  #unaffected_tasks h3 {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #unaffected_tasks h3 button {
    margin-left: auto;
    min-height: 32px;
  }

  /* ---- Jours : la date passe en en-tête ---- */

  .calendar_view {
    padding: 8px 8px 96px;

    > li {
      padding: 8px 8px 8px 12px;
      min-height: 0;

      .day_tag,
      .day_progress {
        display: inline-block;
        position: static;
        width: auto;
        text-align: left;
      }

      .day_tag {
        font-size: 12px;
      }

      .day_progress {
        margin-left: 8px;
        font-size: 12px;
      }

      > .task:first-of-type {
        margin-top: 8px;
      }
    }
  }

  /* ---- Cartes de tâche ---- */

  /* Titre et statut sur une ligne, tags dessous : une carte d'une ligne
     de haut, ce qui garde la zone collante « À planifier » compacte. */
  .task {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 8px 8px 8px 12px;
    margin-bottom: 8px;

    > p.title,
    > form.inline-edit {
      grid-column: 1;
      grid-row: 1;
      margin: 0;
      font-size: 15px;
      overflow-wrap: anywhere;
    }

    > button {
      grid-column: 2;
      grid-row: 1;
      min-height: 36px;
      padding: 0 12px;
      font-size: 12px;
    }

    > ul.tags {
      grid-column: 1 / -1;
      grid-row: 2;
      margin: 4px 0 0;
    }

    form.inline-edit input {
      font-size: 16px;
    }
  }

  /* ---- Modales en feuille basse ---- */

  dialog,
  dialog.task-actions,
  dialog.task-new {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 85dvh;
    margin: auto 0 0;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
  }

  dialog input[type="text"] {
    font-size: 16px;
  }

  dialog menu {
    flex-direction: column;
    align-items: stretch;
  }

  dialog [type="submit"],
  dialog button[type="button"]:not(.close-btn) {
    min-height: 44px;
    font-size: 15px;
  }

  dialog.task-actions button.task-actions-complete,
  dialog.task-new button.task-new-create {
    min-height: 52px;
  }

  dialog.task-new button.task-new-plan-today {
    min-height: 44px;
    font-size: 15px;
  }

  dialog .close-btn {
    width: 40px;
    height: 40px;
  }
}

/* ====================================================
   Reduced motion
   ==================================================== */

/* Neutralise toute animation ou transition de l'UI quand l'utilisateur
   demande une réduction des mouvements. Déclaré en fin de feuille pour
   couvrir aussi les effets ajoutés plus haut par la suite. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}