/* ==========================================================================
   Agenda — design « éphéméride coloré »
   Fond rose poudré, encre prune, couleurs franches pour les actions et les repères.
   L'audace est réservée au bloc-date et au bouton « Créer » (ombre « sticker »).
   ========================================================================== */

:root {
    --bg: #fbf2f5;          /* rose poudré */
    --surface: #ffffff;
    --surface-2: #f6ecf3;
    --line: #ead9e4;
    --ink: #2a1a3e;         /* prune */
    --ink-soft: #6b5a7e;
    --primary: #5b4bdb;     /* myrtille : actions */
    --primary-ink: #ffffff;
    --primary-soft: #ebe8fc;
    --coral: #ff5d73;       /* aujourd'hui */
    --sun: #ffc233;         /* repères */
    --sun-soft: #fff6dc;
    --lagoon: #14a89b;      /* Google connecté */
    --danger: #d6264a;
    --danger-soft: #ffe5ea;
    --warn-soft: #fff1d1;
    --sticker: 3px 3px 0 var(--ink);
    --shadow: 0 10px 30px -12px rgb(42 26 62 / 0.25);
    --radius-lg: 22px;
    --radius: 14px;
    --radius-sm: 10px;
    --font: "Bricolage Grotesque", ui-rounded, system-ui, sans-serif;
    --topbar-h: 68px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b1326;
        --surface: #261b34;
        --surface-2: #2f2340;
        --line: #3f3152;
        --ink: #f6eefb;
        --ink-soft: #b8a8c9;
        --primary: #9d92ff;
        --primary-ink: #1b1326;
        --primary-soft: #332b5c;
        --sun-soft: #3a3020;
        --danger: #ff8099;
        --danger-soft: #45202c;
        --warn-soft: #3c3121;
        --sticker: 3px 3px 0 #000;
        --shadow: 0 12px 32px -12px rgb(0 0 0 / 0.6);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    font-optical-sizing: auto;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
h1, h2 { font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.75rem; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.35rem; }
p { margin: 0 0 1rem; max-width: 65ch; }
code { background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 6px; font-size: 0.9em; }
.muted { color: var(--ink-soft); }
.spacer { flex: 1; }
.show-sm { display: none; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* ----- Bloc-date (éphéméride) : l'élément signature --------------------- */

.date-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 46px;
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: var(--sticker);
    overflow: hidden;
    color: var(--ink);
    line-height: 1;
    flex-shrink: 0;
}
.date-tile__band {
    width: 100%;
    padding: 3px 0 2px;
    background: var(--coral);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
}
.date-tile__day { padding: 4px 0 6px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; }

.date-tile--lg {
    width: 150px;
    border-width: 3px;
    border-radius: 20px;
    box-shadow: 6px 6px 0 var(--ink);
    transform: rotate(-4deg);
}
.date-tile--lg .date-tile__band { padding: 12px 0 10px; font-size: 1.15rem; position: relative; }
/* les anneaux de reliure */
.date-tile--lg .date-tile__band::before,
.date-tile--lg .date-tile__band::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 12px;
    height: 16px;
    border-radius: 6px;
    background: var(--sun);
    border: 2px solid var(--ink);
}
.date-tile--lg .date-tile__band::before { left: 32px; }
.date-tile--lg .date-tile__band::after { right: 32px; }
.date-tile--lg .date-tile__day { font-size: 4.5rem; padding: 10px 0 2px; }
.date-tile--lg .date-tile__weekday { padding-bottom: 14px; font-weight: 600; color: var(--ink-soft); }

/* ----- Barre du haut ----------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    height: var(--topbar-h);
    padding: 0 1.25rem;
    background: var(--bg);
}

.brand { display: flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; }
.brand-name { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; }

.topnav { display: flex; gap: 0.25rem; }
.topnav a {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    color: var(--ink-soft);
    font-weight: 600;
    text-decoration: none;
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }
.topnav a.active { color: var(--ink); background: var(--sun); }

.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.topbar-name { font-weight: 600; color: var(--ink-soft); }

/* ----- Mise en page ------------------------------------------------------ */

.page { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.page-title { font-size: 2.6rem; margin: 0.5rem 0 1.5rem; }

.page-calendar {
    max-width: none;
    min-height: calc(100dvh - var(--topbar-h));
    display: flex;
    flex-direction: column;
    padding: 0.25rem 1.25rem 2rem;
}

.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}
.card-google { box-shadow: inset 0 6px 0 var(--lagoon); }

/* ----- Connexion --------------------------------------------------------- */

.page-auth { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.25rem; max-width: none; }

.auth {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    width: min(920px, 100%);
}
.auth-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 2.25rem 0 1rem; }
.auth-hero p { font-size: 1.15rem; color: var(--ink-soft); max-width: 34ch; }
.auth-card { box-shadow: var(--shadow); margin: 0; }
.auth-card form { margin-top: 1.25rem; }

/* ----- Boutons ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.2rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    color: var(--ink);
    background: transparent;
    transition: background-color 0.15s, transform 0.1s, box-shadow 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost { border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-quiet { color: var(--ink-soft); }
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn-danger-ghost { color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); }

.btn-icon {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
}
.btn-icon:hover { background: var(--line); }

/* « Créer » : le second élément « sticker » */
.btn-create {
    padding: 0.65rem 1.4rem 0.65rem 0.75rem;
    background: var(--sun);
    color: #2a1a3e;
    border: 2px solid var(--ink);
    box-shadow: var(--sticker);
    font-size: 1.05rem;
}
.btn-create:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-create:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-create-plus {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--sun);
    font-size: 1.3rem;
    line-height: 1;
}

/* ----- Formulaires ------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }
.field > label { display: block; margin-bottom: 0.35rem; font-size: 0.92rem; font-weight: 650; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="datetime-local"], select, textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    transition: border-color 0.15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
textarea { resize: vertical; }

.field-title input {
    border-width: 0 0 3px;
    border-radius: 0;
    border-color: var(--accent, var(--line));
    background: transparent;
    padding: 0.3rem 0;
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.field-title input::placeholder { color: var(--ink-soft); opacity: 0.6; }
.field-title > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.field-checkbox { display: flex; align-items: center; gap: 0.55rem; }
.field-checkbox label { margin: 0; font-weight: 500; }
.field-checkbox input { width: 20px; height: 20px; accent-color: var(--primary); }

.field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.85rem; }

.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.field-errors { list-style: none; margin: 0.35rem 0 0; padding: 0; color: var(--danger); font-size: 0.9rem; font-weight: 600; }

/* Pastilles de couleur (palette Google Agenda) */
.color-picker > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.color-picker > div > label { display: none; }
.color-picker input[type="radio"] {
    appearance: none;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    background: var(--swatch);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s;
}
.color-picker input[type="radio"]:hover { transform: scale(1.12); }
.color-picker input[type="radio"]:checked { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--surface); }

.form-meta { font-size: 0.88rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.form-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.actions form { margin: 0; }

/* ----- Alertes, badges --------------------------------------------------- */

.alert { padding: 0.8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.95rem; }
.alert-error { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.alert-warn { background: var(--warn-soft); }
.alert-info { background: var(--sun-soft); }

.badge {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lagoon) 18%, transparent);
    color: var(--lagoon);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ----- Statut Google ----------------------------------------------------- */

.google-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 600; }
.google-status .muted { font-weight: 400; }
.google-status .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--line); }
.google-status--on .dot { background: var(--lagoon); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lagoon) 22%, transparent); }
.google-status--warn .dot { background: var(--sun); }
.google-status--error .dot { background: var(--danger); }

/* ----- Calendrier -------------------------------------------------------- */

.calendar-page { flex: 1; display: flex; flex-direction: column; }

/* Calendrier carré à gauche, listes à droite (sous le calendrier sur petit écran) */
.workspace {
    display: grid;
    grid-template-columns: minmax(0, min(46rem, calc(100dvh - var(--topbar-h) - 6rem))) minmax(18rem, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.calendar-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.calendar-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.85rem; }
.calendar-toolbar-right form { margin: 0; }

.calendar {
    aspect-ratio: 1 / 1;
    min-height: 0;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1rem 1rem 0.5rem;
    box-shadow: var(--shadow);
    transition: opacity 0.2s;
}
.calendar > div { height: 100%; }
.is-loading .calendar { opacity: 0.8; }

.calendar .fc {
    --fc-border-color: var(--line);
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--surface-2);
    --fc-list-event-hover-bg-color: var(--surface-2);
    --fc-today-bg-color: var(--sun-soft);
    --fc-now-indicator-color: var(--coral);
    --fc-event-border-color: transparent;
    --fc-highlight-color: color-mix(in srgb, var(--primary) 16%, transparent);
    --fc-button-bg-color: var(--surface-2);
    --fc-button-border-color: transparent;
    --fc-button-text-color: var(--ink);
    --fc-button-hover-bg-color: var(--line);
    --fc-button-hover-border-color: transparent;
    --fc-button-active-bg-color: var(--ink);
    --fc-button-active-border-color: transparent;
    font-size: 0.9rem;
}

.calendar .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; }
.calendar .fc .fc-toolbar-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.calendar .fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.calendar .fc .fc-button { border-radius: 999px; padding: 0.4rem 0.95rem; font-weight: 700; box-shadow: none !important; }
.calendar .fc .fc-button-group { gap: 4px; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.calendar .fc .fc-button-group > .fc-button { border-radius: 999px !important; background: transparent; }
.calendar .fc .fc-button-group > .fc-button:hover { background: var(--line); }
.calendar .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--ink); color: var(--surface); }
.calendar .fc .fc-prev-button, .calendar .fc .fc-next-button { width: 38px; height: 38px; padding: 0; }
.calendar .fc .fc-today-button { margin-left: 0.5rem !important; }
.calendar .fc .fc-today-button:disabled { opacity: 0.45; }

.calendar .fc-theme-standard .fc-scrollgrid { border: 0; }
.calendar .fc-theme-standard th { border-color: transparent; }
.calendar .fc .fc-col-header-cell-cushion { padding: 0.45rem 0.25rem; color: var(--ink-soft); font-weight: 650; text-decoration: none; }
.calendar .fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion { color: var(--coral); }
.calendar .fc .fc-timegrid-slot-label-cushion, .calendar .fc .fc-timegrid-axis-cushion { color: var(--ink-soft); font-size: 0.8rem; }
.calendar .fc .fc-day-sat, .calendar .fc .fc-day-sun { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.calendar .fc .fc-day-today { background: var(--sun-soft) !important; }

.calendar .fc .fc-daygrid-day-number { color: var(--ink); font-weight: 650; text-decoration: none; padding: 6px 8px; }
.calendar .fc .fc-day-today .fc-daygrid-day-number {
    background: var(--coral);
    color: #fff;
    border-radius: 999px;
    min-width: 28px;
    text-align: center;
    margin: 4px;
    padding: 3px 7px;
}
.calendar .fc .fc-day-other .fc-daygrid-day-number { color: var(--ink-soft); opacity: 0.6; }
.calendar .fc .fc-week-number, .calendar .fc .fc-timegrid-axis .fc-timegrid-axis-cushion { color: var(--ink-soft); }

.calendar .fc-event { border-radius: 8px; padding: 2px 4px; cursor: pointer; font-weight: 650; box-shadow: inset 4px 0 0 rgb(0 0 0 / 0.18); }
.calendar .fc-timegrid-event { box-shadow: inset 4px 0 0 rgb(0 0 0 / 0.18), 0 0 0 2px var(--surface); }
.calendar .fc-daygrid-dot-event { box-shadow: none; color: var(--ink); }
.calendar .fc-daygrid-dot-event .fc-event-time { font-weight: 600; color: var(--ink-soft); }
.calendar .fc .fc-daygrid-week-number { background: transparent; color: var(--ink-soft); font-size: 0.75rem; padding: 6px 8px; }
.calendar .fc .fc-timeGridDay-view .fc-day-today { background: transparent !important; }
.calendar .fc .fc-timeGridDay-view .fc-col-header-cell.fc-day-today { background: var(--sun-soft) !important; }
.calendar .fc-daygrid-dot-event:hover { background: var(--surface-2); }
.calendar .fc-event-recurring .fc-event-title::after { content: " ↻"; opacity: 0.85; }
.calendar .fc-event-readonly { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / 0.16) 6px 12px); }
.calendar .fc .fc-list { border: 0; }
.calendar .fc-list-event { cursor: pointer; }
.calendar .fc .fc-list-day-cushion { background: var(--surface-2); font-weight: 700; }
.calendar .fc a { text-decoration: none; }

/* ----- Modale ------------------------------------------------------------ */

.modal {
    width: min(580px, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 30px 60px -20px rgb(42 26 62 / 0.45);
}
.modal::backdrop { background: rgb(42 26 62 / 0.35); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in 0.18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

.modal turbo-frame { display: block; }
.modal-loading { padding: 3rem; text-align: center; color: var(--ink-soft); }

/* La modale prend la couleur de l'événement (bande en haut, soulignement du titre) */
.event-form { --accent: var(--primary); border-top: 10px solid var(--accent); padding: 1.25rem 1.75rem 1.5rem; transition: border-color 0.2s; }
.event-form.card { border-radius: var(--radius-lg); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.modal-header h2 { margin: 0; font-size: 1.05rem; color: var(--ink-soft); font-weight: 650; letter-spacing: 0; }

/* ----- Notifications ----------------------------------------------------- */

.toasts {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    max-width: min(520px, calc(100vw - 2rem));
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-weight: 650;
    box-shadow: var(--shadow);
    cursor: pointer;
    animation: toast-in 0.2s ease-out;
    transition: opacity 0.25s, transform 0.25s;
}
.toast-success::before { content: "✓ "; color: var(--sun); }
.toast-error { background: var(--danger); color: #fff; border-radius: var(--radius); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ----- Listes de tâches -------------------------------------------------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tasks-panel { min-width: 0; }
.tasks-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tasks-panel__head h2 { font-size: 1.6rem; margin: 0; letter-spacing: -0.03em; }
.new-list { display: flex; gap: 0.5rem; margin: 0; }
.new-list input, .add-task input {
    font: inherit; color: var(--ink); background: var(--surface);
    border: 2px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; min-width: 0;
}
.new-list input:focus, .add-task input:focus { outline: none; border-color: var(--primary); }

.task-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.tasks-empty { grid-column: 1 / -1; background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius-lg); padding: 1.25rem; color: var(--ink-soft); }
.tasks-empty p { margin: 0; }

.task-list {
    --list: var(--sun);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1rem 1rem;
    box-shadow: var(--shadow), inset 0 6px 0 var(--list);
    padding-top: 1.2rem;
}
.task-list__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.task-list__head h3 { font-size: 1.1rem; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task-list__count { background: var(--list); color: #2a1a3e; font-weight: 800; font-size: 0.8rem; border-radius: 999px; padding: 0.05rem 0.55rem; }
.task-list__menu { position: relative; }
.task-list__menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.task-list__menu summary::-webkit-details-marker { display: none; }
.task-list__menu summary:hover { background: var(--surface-2); }
.task-list__menu-panel {
    position: absolute; right: 0; top: 100%; z-index: 5; min-width: 14rem;
    background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--sticker); padding: 0.3rem;
}
.task-list__menu-panel form { margin: 0; }
.task-list__menu-panel button { width: 100%; text-align: left; font: inherit; background: none; border: 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
.task-list__menu-panel button:hover { background: var(--surface-2); }
.task-list__menu-panel .danger { color: var(--danger); }

.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.3rem 0; }
.task form { margin: 0; display: flex; }
.task__title { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-top: 0.1rem; }
.task.is-done .task__title { text-decoration: line-through; color: var(--ink-soft); }
.task__check {
    width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 7px; cursor: pointer;
    border: 2px solid var(--ink); background: var(--surface); position: relative;
}
.task__check:hover { background: var(--list, var(--sun)); }
.is-done .task__check { background: var(--list); }
.is-done .task__check::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; color: #2a1a3e; }
.task__delete { background: none; border: 0; color: var(--ink-soft); cursor: pointer; opacity: 0; padding: 0 0.25rem; font-size: 0.85rem; }
.task:hover .task__delete, .task__delete:focus-visible { opacity: 1; }
@media (hover: none) { .task__delete { opacity: 0.6; } }

.add-task { display: flex; gap: 0.4rem; margin: 0.5rem 0 0; }
.add-task input { flex: 1; width: 100%; padding: 0.35rem 0.8rem; font-size: 0.92rem; }
.add-task__btn { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--list); color: #2a1a3e; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.tasks-done { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.9rem; }
.tasks-done summary { cursor: pointer; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----- Mobile ------------------------------------------------------------ */

@media (max-width: 760px) {
    .auth { grid-template-columns: 1fr; gap: 2rem; }
    .auth-hero { text-align: center; }
    .auth-hero p { margin-inline: auto; }
    .date-tile--lg { width: 120px; }
    .date-tile--lg .date-tile__day { font-size: 3.5rem; }
    .date-tile--lg .date-tile__band::before { left: 22px; }
    .date-tile--lg .date-tile__band::after { right: 22px; }
}

@media (max-width: 640px) {
    :root { --topbar-h: 60px; }
    .hide-sm { display: none !important; }
    .show-sm { display: block; }
    .topbar { gap: 0.75rem; padding: 0 0.75rem; }
    .brand-name { display: none; }
    .topnav a { padding: 0.4rem 0.7rem; }
    .topbar-user { display: none; }
    .page-calendar { padding: 0 0.5rem 0.5rem; }
    .calendar { padding: 0.6rem 0.4rem 0.3rem; border-radius: var(--radius); }
    .calendar .fc .fc-toolbar-title { font-size: 1.15rem; }
    .calendar .fc .fc-toolbar.fc-footer-toolbar { margin-top: 0.5rem; }
    .field-group { grid-template-columns: 1fr; }
    .modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
    .event-form { padding: 1rem 1.1rem 1.25rem; }
    .page-title { font-size: 2rem; }
}

/* Planification : même parcours au clic, au clavier et au toucher. */
#tasks_panel { display: block; min-width: 0; }
.task__body { flex: 1; min-width: 0; }
.task__title { display: block; }
.task__schedule { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.85rem; color: var(--primary); font-weight: 650; text-underline-offset: 3px; }
.task[data-task-url] { cursor: grab; }
.task[data-task-url]:active { cursor: grabbing; }
.occurrence-scope { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.workspace-switch { display: none; }
.task:focus-within .task__delete { opacity: 1; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

@media (max-width: 640px) {
    .workspace-switch { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
    .workspace-switch button { flex: 1; }
    .workspace-switch [aria-pressed="true"] { background: var(--ink); color: var(--surface); }
    [data-mobile-panel="calendar"] #tasks_panel { display: none; }
    [data-mobile-panel="tasks"] .calendar { display: none; }
    .calendar { aspect-ratio: auto; height: clamp(420px, 68dvh, 640px); }
    .calendar-toolbar { flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }
    .calendar-toolbar-right { min-width: 0; }
    .calendar-toolbar-right .btn { white-space: normal; text-align: center; max-width: 12rem; }
    .calendar .fc .fc-header-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .calendar .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    .calendar .fc .fc-header-toolbar .fc-toolbar-chunk:last-child { justify-self: end; }
    .calendar .fc .fc-button { min-height: 44px; padding: 0.35rem 0.65rem; }
    .calendar .fc .fc-prev-button, .calendar .fc .fc-next-button { width: 44px; height: 44px; }
    .btn, .btn-icon, .task-list__menu summary, .add-task__btn, .task__delete, .task__check { min-width: 44px; min-height: 44px; }
    .task__check { width: 44px; height: 44px; border: 0; background: transparent; margin: 0; }
    .task__check::before { content: ''; position: absolute; inset: 10px; border: 2px solid var(--ink); border-radius: 7px; }
    .is-done .task__check::before { background: var(--list); }
    .task__delete { opacity: 1; }
    .task__schedule { min-height: 44px; }
    .task { gap: 0.25rem; }
    .task-lists { grid-template-columns: minmax(0, 1fr); }
    .new-list { width: 100%; }
    .new-list input { flex: 1; }
    .add-task input, .new-list input, input, textarea, select { font-size: 16px; }
    .form-actions { position: sticky; bottom: -1px; background: var(--surface); padding: 0.75rem 0; flex-wrap: wrap; }
    .event-form { padding-inline: 0.85rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .color-picker input[type="radio"] { width: 36px; height: 36px; }
}

/* Le nom du compte peut être long, sans repousser la navigation hors de l’écran. */
.topbar-user { min-width: 0; }
.topbar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user > a { flex-shrink: 0; }
@media (min-width: 641px) and (max-width: 1000px) {
    .topbar-name { display: none; }
    .topbar { gap: 1rem; }
}
@media (max-width: 360px) {
    .calendar .fc .fc-footer-toolbar .fc-button { padding-inline: 0.35rem; }
    .calendar .fc .fc-footer-toolbar .fc-button-group { gap: 2px; }
}

/* Badges personnels : couleur choisie, texte noir/blanc à contraste calculé. */
.tag-chip {
    display: inline-block; max-width: 100%; border-radius: 999px;
    padding: 0.15rem 0.65rem; background: var(--badge-color); color: var(--badge-ink);
    font-size: 0.8rem; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere;
}
.item-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.task__links { display: flex; flex-wrap: wrap; gap: 0 0.85rem; }
.badge-page-heading, .badge-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.badge-list-heading h2 { margin: 0; }
.badge-editor { margin-top: 1.5rem; }
.badge-editor__fields { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 1rem; }
.badge-editor input[type="color"] { display: block; width: 100%; height: 48px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 4px; cursor: pointer; }
.badge-editor .actions { margin-top: 0; }
.badge-catalog { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.badge-catalog__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.badge-catalog__item:last-child { border-bottom: 0; padding-bottom: 0; }
.badge-catalog__actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.badge-catalog__actions form { margin: 0; }
.badges-empty { padding-top: 1.25rem; }
.badge-local-note { font-size: 0.9rem; }
.badge-picker { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.badge-picker legend { font-size: 0.92rem; font-weight: 650; margin-bottom: 0.35rem; }
.badge-picker__hint { font-size: 0.85rem; margin-bottom: 0.6rem; }
.badge-options { display: flex; flex-wrap: wrap; gap: 0.5rem; max-height: 15rem; overflow: auto; padding: 4px; }
.badge-option { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.25rem 0.5rem; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; max-width: 100%; }
.badge-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.badge-option input { width: 18px; height: 18px; flex-shrink: 0; margin: 0; accent-color: var(--primary); }
.badge-option:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.task-badges-title { font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; margin-top: 1rem; }
.agenda-event-content { min-width: 0; max-width: 100%; overflow: hidden; }
.agenda-event-heading { display: flex; gap: 0.25rem; min-width: 0; }
.agenda-event-heading .fc-event-title { overflow: hidden; text-overflow: ellipsis; }
.calendar .event-badges { display: flex; gap: 0.2rem; align-items: center; overflow: hidden; margin: 0.15rem 0; }
.calendar .event-badges .tag-chip { font-size: 0.75rem; padding: 0.05rem 0.4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 1; }
.calendar .event-badges__more { font-size: 0.75rem; flex-shrink: 0; }
.calendar .fc-timegrid-event .agenda-event-heading { flex-wrap: wrap; }
.calendar .fc-timegrid-event .fc-event-title { white-space: normal; }
@media (max-width: 640px) {
    .topbar { gap: 0.5rem; }
    .topnav { min-width: 0; }
    .topnav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.5rem; font-size: 0.9rem; }
    .badge-page-heading { align-items: flex-start; gap: 0.5rem; }
    .badge-catalog__item { flex-wrap: wrap; gap: 0.6rem; }
    .badge-catalog__actions { width: 100%; justify-content: flex-end; }
    .badge-editor__fields { grid-template-columns: minmax(0, 1fr) 4rem; gap: 0.6rem; }
    .badge-picker .tag-chip { font-size: 0.85rem; }
}

/* Task details and the daily overview share the existing colour tokens. */
.task__edit { color: var(--ink); text-decoration: none; display: inline-block; }
.task__edit:hover { text-decoration: underline; color: var(--primary); }
.task-meta { display: flex; flex-wrap: wrap; gap: .4rem .75rem; font-size: .85rem; margin-top: .35rem; color: var(--ink-soft); }
.task-meta--late { color: var(--danger); }
.priority { border-radius: 6px; padding: 0 .35rem; background: var(--surface-2); }
.priority--high { background: var(--warn-soft); color: var(--ink); }
.task-editor { max-width: 680px; margin-inline: auto; }
.day-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1rem 1.5rem; }
.day-heading h1 { margin-bottom: .5rem; }
.day-heading p { margin-bottom: .5rem; }
.day-summary { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.day-summary a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1.2rem; text-decoration: none; color: var(--ink); }
.day-summary a.task-meta--late { color: var(--danger); }
.day-summary strong { font-size: 1.4rem; margin-right: .35rem; }
.day-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.day-grid .card { margin: 0; min-width: 0; }
.day-task-sections { display: grid; gap: 1.5rem; }
.day-events, .day-tasks { list-style: none; margin: 0; padding: 0; }
.day-events li { border-left: 3px solid var(--primary); padding: .75rem 1rem; margin-top: 1rem; background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; overflow-wrap: anywhere; }
.day-events a { font-weight: 700; }
.day-events p { margin: .3rem 0; }
.day-event-time { color: var(--ink-soft); font-size: .9rem; margin-bottom: .4rem; }
.day-tasks .task { padding-block: .8rem; border-bottom: 1px solid var(--line); }
.day-tasks { margin-bottom: 1rem; }
.day-count { font-size: 1rem; color: var(--ink-soft); margin-left: .5rem; }
.day-empty { color: var(--ink-soft); padding-block: .75rem; margin: 0; }
@media (max-width: 700px) {
    .day-grid { grid-template-columns: 1fr; }
    .day-heading { align-items: flex-start; flex-direction: column; }
    .day-summary { gap: .5rem; }
    .day-summary a { flex: 1 1 120px; padding: .65rem; }
    .topbar { flex-wrap: wrap; height: auto; }
    .topnav { flex-wrap: wrap; flex: 1; min-width: 0; }
    .topnav a { min-height: 44px; display: inline-flex; align-items: center; }
    .task__edit { padding-block: .35rem; }
}

.page-day { max-width: 1200px; }
@media (max-width: 700px) {
    .topnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .35rem; }
    .topnav a { justify-content: center; }
}
/* Coloured navigation and date labels retain contrast in both themes. */
.topnav a.active { color: #2a1a3e; }
.date-tile--sm .date-tile__band { color: #2a1a3e; font-size: 11px; }

/* Private file space */
.page-files { max-width: 1240px; }
.files-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin: 1rem 0 1.5rem; }
.files-eyebrow { font-size: .75rem; letter-spacing: .12em; font-weight: 700; color: var(--primary); margin-bottom: .65rem; }
.files-heading h1 { margin-bottom: .65rem; }
.files-heading p { margin-bottom: 0; }
.files-storage { min-width: 210px; display: grid; gap: .35rem; font-size: .85rem; color: var(--ink-soft); }
.files-storage strong { color: var(--ink); font-size: 1.3rem; }
.files-storage progress { width: 100%; height: 8px; accent-color: var(--primary); }
.files-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.files-breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; overflow-wrap: anywhere; }
.files-tools { display: flex; gap: 1.5rem; align-items: flex-end; margin-bottom: 1.25rem; }
.files-search { flex: 1; }
.files-search > div { display: flex; gap: .5rem; }
.files-search input { min-width: 0; flex: 1; }
.files-create { position: relative; }
.files-create > form { z-index: 5; position: absolute; right: 0; top: 100%; width: 320px; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.files-create input { margin-bottom: .75rem; }
.files-upload { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 1.25rem; background: var(--primary-soft); border: 1px dashed var(--primary); border-radius: var(--radius); margin-bottom: 1.75rem; }
.files-upload > div { flex: 1 1 330px; }
.files-upload label { font-weight: 700; }
.files-upload p { margin: .35rem 0 0; font-size: .85rem; }
.files-upload input[type=file] { width: auto; max-width: 100%; flex: 1 1 260px; padding: .5rem; }
.files-upload-status:empty { display: none; }
.files-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.files-content-heading { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); align-items: center; }
.files-content-heading h2 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.files-content-heading > span { white-space: nowrap; font-size: .9rem; }
.files-list { list-style: none; padding: 0; margin: 0; }
.file-row { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-kind { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; font-size: 1.6rem; color: var(--primary); background: var(--primary-soft); }
.file-kind--folder { background: var(--sun-soft); color: var(--ink); }
.file-description { flex: 1; min-width: 0; }
.file-name { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.file-info { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: var(--ink-soft); margin-top: .4rem; }
.file-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.files-empty { text-align: center; padding: 3rem 1rem; }
.files-empty > span { font-size: 3rem; color: var(--primary); }
.files-empty h3 { margin: .5rem 0; font-size: 1.15rem; }
.files-empty p { margin-inline: auto; }
.files-footnote { margin-top: 1rem; font-size: .9rem; }
.file-editor { margin-top: 1.5rem; }
.file-editor h1 { font-size: 1.6rem; }
.file-editor .form-row { margin-block: 1rem; }
@media (max-width: 700px) {
    .files-heading { flex-direction: column; align-items: stretch; gap: 1rem; }
    .files-storage { max-width: 100%; }
    .files-tools { flex-direction: column; align-items: stretch; gap: 1rem; }
    .files-search > div { flex-wrap: wrap; }
    .files-create > form { position: static; width: 100%; margin-top: .5rem; }
    .files-content-heading, .file-row { padding: 1rem; }
    .file-row { flex-wrap: wrap; gap: .75rem; }
    .file-actions { width: 100%; justify-content: flex-end; }
    .files-upload > div { flex-basis: 100%; }
    .files-upload > button { width: 100%; }
    .file-actions .btn { min-height: 44px; }
}

.files-search label, .files-create label, .file-editor label { display: block; font-size: .92rem; font-weight: 650; margin-bottom: .35rem; }
.files-upload input[type=file] { font-family: inherit; font-size: .9rem; }
.files-upload input::file-selector-button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .8rem; margin-right: .75rem; cursor: pointer; }
.files-storage progress { appearance: none; border: 0; border-radius: 10px; overflow: hidden; background: var(--line); }
.files-storage progress::-webkit-progress-bar { background: var(--line); }
.files-storage progress::-webkit-progress-value { background: var(--primary); }
@media (min-width: 380px) and (max-width: 700px) {
    .topnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .topnav a { padding-inline: .35rem; }
}