/* ==========================================================================
     DESIGN TOKENS
     Single source of truth for every color, size, radius, shadow, spacing,
     timing and z-index value used in this file. Nothing below this block
     should contain a raw color or a magic number outside this list.
     ========================================================================== */
  :root{
    /* --- Colors: neutrals --- */
    --color-bg:            #F2F2F7; /* page background */
    --color-surface:       #FFFFFF; /* card / elevated surface */
    --color-surface-2:     #F5F5F7; /* recessed surface (inputs, rows, pills) */
    --color-border:        #E5E5EA; /* hairline borders */
    --color-white:         #FFFFFF;

    /* --- Colors: text --- */
    --color-text:          #1C1C1E; /* primary text */
    --color-text-2:        #6E6E73; /* secondary text */
    --color-text-3:        #AEAEB2; /* tertiary / placeholder text */

    /* --- Colors: system accents (iOS palette) --- */
    --color-blue:          #007AFF; /* primary action / info */
    --color-red:           #FF3B30; /* urgent / destructive / late */
    --color-orange:        #FF9500; /* importante / warning */
    --color-orange-text:   #B36200; /* orange tint readable on light bg */
    --color-green:         #34C759; /* facile / success / done */
    --color-green-text:    #1F8A3D; /* green tint readable on light bg */
    --color-yellow:        #FFCC00; /* reserved accent / avatar palette */
    --color-purple:        #AF52DE; /* reserved accent / avatar palette */
    --color-indigo:        #5856D6; /* avatar palette */
    --color-pink:          #FF2D55; /* avatar palette */

    /* --- Colors: tinted backgrounds (derived, used by badges/chips/states) --- */
    --tint-blue-05:         rgba(0,122,255,.05);
    --tint-blue-12:         rgba(0,122,255,.12);
    --tint-red-10:          rgba(255,59,48,.10);
    --tint-red-12:          rgba(255,59,48,.12);
    --tint-red-15:          rgba(255,59,48,.15);
    --tint-red-18:          rgba(255,59,48,.18);
    --tint-orange-12:       rgba(255,149,0,.12);
    --tint-orange-15:       rgba(255,149,0,.15);
    --tint-green-12:        rgba(52,199,89,.12);
    --tint-green-15:        rgba(52,199,89,.15);
    --tint-gray-14:         rgba(142,142,147,.14);
    --tint-gray-15:         rgba(142,142,147,.15);
    --tint-purple-12:       rgba(175,82,222,.12);
    --tint-black-35:        rgba(0,0,0,.35); /* modal overlay scrim */
    --tint-white-00:        rgba(255,255,255,0); /* fade gradient start */

    /* --- Typography --- */
    --font-display: -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
    --font-body:    -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
    --font-mono:    "SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

    /* --- Radius --- */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   20px;  /* modal */
    --radius-pill: 999px; /* buttons, badges, segmented control */

    /* --- Shadows (elevation scale) --- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --shadow-lg: 0 24px 48px rgba(0,0,0,.18);

    /* --- Spacing scale ---
         Built from every value actually used in this UI (audited), not an
         idealized scale, so the visual output stays pixel-identical while
         still being centralized in one place. */
    --space-2:  2px;
    --space-3:  3px;
    --space-4:  4px;
    --space-6:  6px;
    --space-8:  8px;
    --space-9:  9px;
    --space-10: 10px;
    --space-12: 12px;
    --space-13: 13px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-22: 22px;
    --space-24: 24px;
    --space-26: 26px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-60: 60px;
    --space-80: 80px;

    /* --- Motion --- */
    --ease-spring:   cubic-bezier(.36,.66,.04,1);
    --duration-fast: .15s;
    --duration-base: .2s;
    --duration-slow: .4s;

    /* --- Z-index scale --- */
    --z-overlay:  50;
    --z-confirm:  70; /* confirm dialogs stack above other open modals */
    --z-confetti: 100;
    --z-toast:    101;

    /* --- Layout --- */
    --container-max-width: 1100px;

    /* --- Breakpoints (reference only — CSS custom properties can't be
         read inside @media conditions, kept here for documentation) ---
         --bp-tablet: 860px;
         --bp-today-stack: 760px;
         --bp-mobile: 520px;
    */
  }

  /* ==========================================================================
     RESET & BASE
     ========================================================================== */
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-body);
    min-height:100vh; /* fallback for browsers without dvh support */
    min-height:100dvh; /* iOS/WebKit: tracks the real visible viewport as the toolbar collapses, unlike 100vh */
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:var(--font-mono);}
  .display{font-family:var(--font-display); font-weight:700;}

  #app{max-width:var(--container-max-width); margin:0 auto; padding:var(--space-28) var(--space-20) var(--space-80);}
  @media(max-width:480px){
    #app{padding:var(--space-16) var(--space-12) var(--space-60);}
  }

  /* ==========================================================================
     ACCESSIBILITY — visible keyboard focus
     Applies to every native interactive element without altering their
     default (mouse) appearance.
     ========================================================================== */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible{
    outline:2px solid var(--color-blue);
    outline-offset:2px;
    border-radius:var(--radius-sm);
  }

  /* ==========================================================================
     SPACING & LAYOUT UTILITIES
     Small, composable overrides pulled out of inline styles. Since the CSP
     refactor (app.js no longer carries any style="..." attributes at all —
     see the "EVENT DELEGATION"/"DYNAMIC INLINE STYLES" comments near the
     top of app.js), even one-off values need a class or a data-style-*
     CSSOM attribute instead of an inline style: these are that home for the
     static, non-reused-elsewhere values that used to just be inlined.
     ========================================================================== */
  .u-mt-0{margin-top:0 !important;}
  .u-m-0{margin:0 !important;}
  .modal-sm{max-width:min(360px, calc(100vw - 40px));}
  .modal-md{max-width:min(480px, calc(100vw - 40px));}
  .modal-lg{max-width:min(520px, calc(100vw - 40px));}
  .modal-xl{max-width:min(560px, calc(100vw - 40px));}
  .overlay-confirm{z-index:var(--z-confirm);}

  .u-hidden{display:none !important;}
  .u-flex{display:flex;}
  .u-flex-col{display:flex; flex-direction:column;}
  .u-items-center{align-items:center;}
  .u-items-start{align-items:flex-start;}
  .u-justify-between{justify-content:space-between;}
  .u-flex-wrap{flex-wrap:wrap;}
  .u-gap-4{gap:4px;} .u-gap-6{gap:6px;} .u-gap-8{gap:8px;} .u-gap-10{gap:10px;} .u-gap-12{gap:12px;} .u-gap-16{gap:16px;}
  .u-mb-4{margin-bottom:4px !important;} .u-mb-6{margin-bottom:6px !important;} .u-mb-8{margin-bottom:8px !important;}
  .u-mb-10{margin-bottom:10px !important;} .u-mb-12{margin-bottom:12px !important;} .u-mb-14{margin-bottom:14px !important;} .u-mb-16{margin-bottom:16px !important;} .u-mb-20{margin-bottom:20px !important;}
  .u-mt-4{margin-top:4px !important;} .u-mt-8{margin-top:8px !important;} .u-mt-12{margin-top:12px !important;} .u-mt-18{margin-top:18px !important;}
  .u-flex-fill{flex:1; min-width:0;}
  .u-p-2-4{padding:2px 4px;}
  .field-invalid-container{border:1px solid transparent; border-radius:12px; padding:4px;}
  .desc-text{white-space:pre-wrap; font-size:14px; color:var(--color-text); line-height:1.5; margin:0;}
  .u-fs-14{font-size:14px;}
  .u-fs-16{font-size:16px;}
  .u-w-auto{width:auto;}
  .u-max-w-340{max-width:340px;}
  .u-max-w-380{max-width:380px;}
  .u-text-center{text-align:center;}
  .pin-input-field{font-size:22px; letter-spacing:10px;}
  .board-search-input{width:200px; padding:9px 30px 9px 12px; border-radius:var(--radius-sm); border:1px solid var(--color-border); font-family:var(--font-body); font-size:13px; background:var(--color-surface-2); color:var(--color-text);}
  .filter-checkbox-label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--color-text); cursor:pointer;}
  .parent-link-chip{cursor:pointer; background:var(--tint-purple-12); color:var(--color-purple); border-color:transparent;}
  .file-link-chip{text-decoration:none; display:inline-flex; align-items:center; gap:3px;}
  .status-chip-late{background:var(--tint-red-15); color:var(--color-red); font-weight:700;}
  .u-mt-6-0{margin:6px 0 0 !important;}
  .perso-toggle-label{display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600;}
  .u-w-100{width:100%;}
  .u-gap-2{gap:2px;}
  .u-flex-shrink-0{flex-shrink:0;}
  .notes-scroll{max-height:320px; overflow-y:auto; margin-bottom:16px;}
  .note-author-name{font-weight:700; font-size:12px; color:var(--color-text);}
  .note-text{margin:0; font-size:13px; color:var(--color-text); white-space:pre-wrap;}
  .note-link-btn{font-size:11px; color:var(--color-text-2); font-weight:600; background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;}
  .note-link-btn-danger{font-size:11px; color:var(--color-red); font-weight:600; background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;}
  .month-label{font-weight:700; font-family:var(--font-display); font-size:13px;}
  .cal-grid-7col{grid-template-columns:repeat(7,1fr);}
  .today-title{font-size:18px; color:var(--color-text); margin:0 0 14px;}
  .u-mt-neg-10{margin-top:-10px !important;}
  .u-flex-nowrap{flex-wrap:nowrap;}
  .today-btn-pad{padding:11px 18px; font-size:13px;}
  .cal-nav-label{font-weight:700; font-family:var(--font-display); min-width:160px; text-align:center; display:inline-block;}
  .cal-dot-red{background:var(--color-red);}
  .cal-dot-orange{background:var(--color-orange);}
  .cal-dot-green{background:var(--color-green);}
  .day-view-head{margin-bottom:16px; font-size:15px;}
  .u-mt-24{margin-top:24px;}
  .u-fw-400{font-weight:400;}
  .u-mt-6-mb-0{margin-top:6px !important; margin-bottom:0 !important;}
  .u-cursor-pointer{cursor:pointer;}
  .warning-text{color:var(--color-red); font-weight:600;}
  .orphan-title{font-size:14px; color:var(--color-red);}
  .u-pr-34{padding-right:34px;}
  .u-fs-13{font-size:13px;} .u-fs-17{font-size:17px;} .u-fs-20{font-size:20px;}
  .u-fw-600{font-weight:600;} .u-fw-700{font-weight:700;}
  .u-relative{position:relative;} .u-lh-1{line-height:1;} .u-whitespace-nowrap{white-space:nowrap;}
  .u-text-blue{color:var(--color-blue);} .u-text-green{color:var(--color-green-text);}
  .u-text-orange{color:var(--color-orange-text);} .u-text-2{color:var(--color-text-2);} .u-text-3{color:var(--color-text-3);}
  .u-font-display{font-family:var(--font-display);}
  .stat-label-strong{font-weight:600; color:var(--color-text);}
  .donut-empty{border-radius:50%; background:var(--tint-gray-15); display:flex; align-items:center; justify-content:center; color:var(--color-text-3); font-size:10px; flex-shrink:0; text-align:center; padding:8px;}
  .donut-wrap{position:relative; flex-shrink:0;}
  .donut-ring{width:100%; height:100%; border-radius:50%;}
  .donut-hole{position:absolute; border-radius:50%; background:var(--color-surface); display:flex; align-items:center; justify-content:center; flex-direction:column;}
  .donut-total{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--color-text); line-height:1;}
  .donut-total-label{font-size:8px; color:var(--color-text-2);}
  .legend-row{display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 0;}
  .legend-swatch{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
  .legend-label{flex:1; color:var(--color-text); min-width:0;}
  .legend-pct{color:var(--color-text-2); font-weight:600; white-space:nowrap;}
  .streak-badge-inline{background:var(--tint-blue-12); color:var(--color-blue); align-self:flex-start;}
  .progress-marker{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--color-text-3); transform:translateX(-1px);}
  .kpi-num-lg{font-size:20px; font-family:var(--font-display); font-weight:700;}
  .stat-score-label{font-family:var(--font-display); font-weight:700; font-size:14px;}
  .low-sample-note{font-weight:400;}
  .u-mt-8-mb-0{margin-top:8px !important; margin-bottom:0 !important;}
  .u-items-baseline{align-items:baseline;}
  .u-self-start{align-self:flex-start;}
  .u-fs-12{font-size:12px;}
  .u-mt-14-mb-6{margin-top:14px !important; margin-bottom:6px !important;}
  .u-max-h-70vh{max-height:70vh;}
  .meta-chip-noborder{border:none;}
  .u-mb-0{margin-bottom:0;}
  .avatar-sm{width:26px; height:26px; font-size:11px;}
  .profile-name{font-weight:600; font-size:13px;}
  .u-text-danger{color:var(--color-red);}
  .u-scroll-60vh{max-height:60vh; overflow-y:auto;}
  .u-stat-number{font-weight:700; font-family:var(--font-display);}
  .u-btn-solid-danger{background:var(--color-red); color:var(--color-white);}
  .u-icon-inline{vertical-align:-2px; margin-right:3px;}

  /* ==========================================================================
     COMPONENTS / UTILITIES
     Shared primitives. Reused below via grouped selectors so each visual
     property is declared once, not once per component.
     ========================================================================== */
  .surface{background:var(--color-surface);}
  .shadow-sm{box-shadow:var(--shadow-sm);}
  .shadow-md{box-shadow:var(--shadow-md);}
  .shadow-lg{box-shadow:var(--shadow-lg);}

  /* Card: elevated container used by columns, today panels, kpi cards,
     panel boxes and member picks. */
  .card,
  .column,
  .today-col,
  .kpi-card,
  .panel-box,
  .member-pick{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-sm);
  }
  .card-header{display:flex; align-items:center; gap:var(--space-8);}
  .card-body{flex:1; overflow-y:auto;}

  /* Panel: same primitive as card, semantic alias for content sections. */
  .panel{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:var(--space-18);
  }

  /* Row: recessed list rows used by team & recurring panels. */
  .row-surface,
  .team-row,
  .recur-row{
    background:var(--color-surface-2);
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
  }

  /* ==========================================================================
     HEADER
     ========================================================================== */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--color-border);
    padding-bottom:var(--space-16); margin-bottom:var(--space-16);
    flex-wrap:wrap; gap:var(--space-12);
  }
  .brand{display:flex; align-items:baseline; gap:var(--space-10); flex-wrap:wrap;}
  .online-menu-wrap{position:relative;}
  .online-badge{
    display:flex; align-items:center; gap:6px; font-size:12px; color:var(--color-text-2); font-weight:500;
    background:none; border:none; cursor:pointer; padding:var(--space-4) var(--space-8); border-radius:var(--radius-pill);
    transition:background var(--duration-fast) ease;
  }
  .online-badge:hover{background:var(--color-surface-2);}
  .online-dot{width:6px; height:6px; border-radius:50%; background:var(--color-green-text); display:inline-block; flex-shrink:0;}
  .online-menu{
    position:absolute; top:calc(100% + 6px); left:0; z-index:var(--z-overlay);
    background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg); padding:var(--space-10); min-width:160px;
  }
  .online-menu-title{font-size:11px; font-weight:700; color:var(--color-text-3); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px;}
  .online-menu-item{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--color-text); padding:4px 0;}
  .sync-btn{
    font-family:var(--font-body); font-size:12px; color:var(--color-text-2); font-weight:500;
    background:none; border:none; cursor:pointer; padding:0; text-decoration:underline;
  }
  .sync-btn:hover{color:var(--color-text);}
  .sync-btn:disabled{cursor:default; text-decoration:none; opacity:0.7;}
  .brand h1{font-size:28px; margin:0; font-weight:700; color:var(--color-text); letter-spacing:-0.02em;}
  @media(max-width:480px){.brand h1{font-size:22px;}}
  .brand span{font-size:12px; color:var(--color-text-2); font-family:var(--font-mono);}
  .who{display:flex; align-items:center; gap:var(--space-10); flex-wrap:wrap;}
  .profile-menu-wrap{position:relative;}
  .profile-trigger{
    display:flex; align-items:center; gap:var(--space-10);
    background:none; border:none; cursor:pointer; padding:var(--space-6); border-radius:var(--radius-md);
    font-family:var(--font-body); text-align:left; transition:background var(--duration-fast) ease;
  }
  .profile-trigger:hover{background:var(--color-surface-2);}
  .profile-chevron{font-size:11px; color:var(--color-text-3); margin-left:2px;}
  .profile-menu{
    position:absolute; top:calc(100% + 6px); left: 12px; right:auto; z-index:var(--z-overlay);
    background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg); padding:var(--space-6); display:flex; flex-direction:column; gap:2px;
    min-width:180px;
  }
  .profile-menu-item{
    background:none; border:none; text-align:left; padding:var(--space-9) var(--space-10);
    border-radius:var(--radius-sm); font-family:var(--font-body); font-size:14px; color:var(--color-text);
    cursor:pointer; transition:background var(--duration-fast) ease;
  }
  .profile-menu-item:hover{background:var(--color-surface-2);}
  .badge{
    font-family:var(--font-body); font-size:11px; font-weight:600; padding:var(--space-3) var(--space-10);
    border-radius:var(--radius-pill); letter-spacing:0;
  }
  .badge.manager{background:var(--tint-blue-12); color:var(--color-blue);}
  .badge.collaborateur{background:var(--tint-gray-14); color:var(--color-text-2);}

  /* ==========================================================================
     BUTTONS
     ========================================================================== */
  .btn{
    font-family:var(--font-body); font-weight:600; font-size:13px;
    border:none; border-radius:var(--radius-pill); padding:var(--space-9) var(--space-18); cursor:pointer;
    transition:transform var(--duration-fast) var(--ease-spring), opacity var(--duration-fast) ease, background var(--duration-fast) ease;
  }
  .btn:hover{opacity:.85;}
  .btn:active{transform:scale(.96);}
  .btn:disabled{opacity:.4; cursor:not-allowed;}
  .btn-primary{background:var(--color-blue); color:var(--color-white);}
  .btn-ghost{background:var(--color-surface-2); color:var(--color-text); border:1px solid var(--color-border);}
  .btn-ghost:hover{background:var(--color-border); opacity:1;}
  .btn-danger{background:var(--tint-red-10); color:var(--color-red);}
  .btn-planned{background:var(--tint-blue-12); color:var(--color-blue); font-weight:600;}
  .btn-planned:hover{background:var(--tint-blue-12); filter:brightness(0.95);}
  .btn-danger:hover{background:var(--tint-red-18); opacity:1;}
  .btn-small{padding:var(--space-6) var(--space-13); font-size:12px;}
  .btn-success{background:var(--color-green); color:var(--color-white);}

  /* ==========================================================================
     TABS (segmented control)
     ========================================================================== */
  .tabs{display:inline-flex; background:var(--color-surface-2); border-radius:var(--radius-pill); padding:var(--space-3); gap:2px; margin-bottom:var(--space-20);}
  .tab-btn{
    font-family:var(--font-body); font-weight:600; font-size:13px; padding:var(--space-8) var(--space-18);
    border-radius:var(--radius-pill); border:none; background:transparent; color:var(--color-text-2); cursor:pointer;
    transition:background var(--duration-base) ease, color var(--duration-base) ease;
  }
  .tab-btn.active{background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-sm);}
  .tab-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:16px; height:16px; padding:0 4px; border-radius:999px;
    background:var(--color-red); color:var(--color-white);
    font-family:var(--font-mono); font-size:10px; font-weight:700;
    margin-left:2px; vertical-align:middle;
  }

  /* Secondary nav (underline style) — visually subordinate to the primary
     pill-shaped .tabs above, used for sub-sections within a main tab (e.g.
     the Vue d'ensemble / Classement / Journal d'activité split inside
     Statistiques) so the hierarchy between the two levels reads clearly
     instead of looking like one long row of equally-weighted tabs. */
  .subtabs{display:flex; gap:var(--space-22); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-20); flex-wrap:wrap;}
  .subtab-btn{
    font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--color-text-2);
    background:none; border:none; cursor:pointer; padding:var(--space-8) var(--space-2) var(--space-10);
    border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:color var(--duration-base) ease, border-color var(--duration-base) ease;
  }
  .subtab-btn:hover{color:var(--color-text);}
  .subtab-btn.active{color:var(--color-blue); border-bottom-color:var(--color-blue);}

  /* Tertiary, in-panel scope toggle (e.g. Semaine/Mois/Total inside the
     Classement panel) — a smaller pill than .tabs, so it reads as a filter
     local to that one panel rather than another navigation level. */
  .scope-toggle{display:inline-flex; background:var(--color-surface-2); border-radius:var(--radius-pill); padding:2px; gap:2px;}
  .scope-btn{
    font-family:var(--font-body); font-weight:600; font-size:11px; padding:4px var(--space-10);
    border-radius:var(--radius-pill); border:none; background:transparent; color:var(--color-text-2); cursor:pointer;
    transition:background var(--duration-base) ease, color var(--duration-base) ease;
  }
  .scope-btn.active{background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-sm);}

  /* ==========================================================================
     FILTERS / ACTIONS ROW
     ========================================================================== */
  .actions-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-20); gap:var(--space-10); flex-wrap:wrap;}
  .filters-panel{
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10);
    background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
    padding:var(--space-14); margin-top:calc(var(--space-10) * -1); margin-bottom:var(--space-20);
  }
  .actions-row .left{display:flex; gap:var(--space-10); flex-wrap:wrap; align-items:center;}
  .filter-select{
    font-family:var(--font-body); font-size:13px; padding:var(--space-8) var(--space-14);
    border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface);
    color:var(--color-text);
  }
  .search-wrap{position:relative; display:inline-block;}
  .search-wrap input{width:100%;}
  .search-clear-btn{
    position:absolute; top:50%; right:8px; transform:translateY(-50%);
    width:18px; height:18px; border:none; border-radius:50%; padding:0;
    background:var(--tint-gray-15); color:var(--color-text-2); font-size:10px; line-height:1;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .search-clear-btn:hover{background:var(--color-border); color:var(--color-text);}

  /* ==========================================================================
     BOARD & COLUMNS
     ========================================================================== */
  .board{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-16); align-items:start;}
  @media(max-width:860px){.board{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.board{grid-template-columns:1fr;}}

  .column{
    border-radius:var(--radius-lg);
    padding:var(--space-16); min-height:200px; min-width:0;
    transition:box-shadow var(--duration-fast) ease;
    display:flex; flex-direction:column;
    position:relative;
  }
  .column::after,
  .today-col::after{
    content:'';
    position:absolute; left:1px; right:1px; bottom:1px; height:var(--space-32);
    background:linear-gradient(to bottom, var(--tint-white-00), var(--color-surface));
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    pointer-events:none;
  }
  .column.drag-over{box-shadow:0 0 0 2px var(--color-blue);}
  .column-head{
    display:flex; align-items:center; gap:var(--space-8);
    margin-bottom:var(--space-14);
    cursor:pointer; user-select:none; border-radius:var(--radius-sm);
    margin-left:calc(var(--space-8) * -1); margin-right:calc(var(--space-8) * -1);
    padding:var(--space-4) var(--space-8);
    transition:background var(--duration-fast) ease;
  }
  .column-head:hover{background:var(--color-surface-2);}
  .collapse-chevron{color:var(--color-text-3); font-size:11px; flex-shrink:0;}
  .column.collapsed{min-height:0;}
  .column.collapsed::after{display:none;}
  .column.collapsed .column-head{margin-bottom:0;}
  .prio-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
  .col-urgente .prio-dot{background:var(--color-red);}
  .col-importante .prio-dot{background:var(--color-orange);}
  .col-facile .prio-dot{background:var(--color-green);}
  .column-head h3{
    font-size:15px; margin:0; font-family:var(--font-display); font-weight:700; color:var(--color-text);
    display:flex; align-items:center; gap:var(--space-8); flex:1;
  }
  .count{font-family:var(--font-mono); font-size:12px; color:var(--color-text-2); background:var(--color-surface-2); padding:var(--space-2) var(--space-9); border-radius:var(--radius-pill);}
  .column-body,
  .today-col-body,
  .recur-list,
  .activity-list{
    overflow-y:auto; flex:1;
    scrollbar-width:thin; scrollbar-color:var(--color-border) transparent;
  }
  .column-body::-webkit-scrollbar,
  .today-col-body::-webkit-scrollbar,
  .recur-list::-webkit-scrollbar,
  .activity-list::-webkit-scrollbar{width:6px;}
  .column-body::-webkit-scrollbar-thumb,
  .today-col-body::-webkit-scrollbar-thumb,
  .recur-list::-webkit-scrollbar-thumb,
  .activity-list::-webkit-scrollbar-thumb{background:var(--color-border); border-radius:3px;}
  .column-body::-webkit-scrollbar-track,
  .today-col-body::-webkit-scrollbar-track,
  .recur-list::-webkit-scrollbar-track,
  .activity-list::-webkit-scrollbar-track{background:transparent;}

  /* ==========================================================================
     TICKETS
     ========================================================================== */
  .ticket{
    background:var(--color-surface); color:var(--color-text); border-radius:var(--radius-md);
    padding:var(--space-14); margin-bottom:var(--space-10); position:relative;
    border:1px solid var(--color-border); overflow:hidden;
    transition:box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
    cursor:grab; overflow-wrap:break-word; word-break:break-word;
  }
  .ticket:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
  .ticket:active{cursor:grabbing;}
  .ticket.mine{border-left:3px solid var(--color-blue);}
  .ticket.dragging{opacity:.4;}
  /* Live "drop here" indicator while dragging to reorder a day's tickets —
     a thin line right at the edge the cursor is currently closest to. Kept
     inside the ticket's own box (not the margin gap) since .ticket has
     overflow:hidden, which would otherwise clip anything positioned
     outside its bounds. */
  .day-orderable.day-order-drop-before::before,
  .day-orderable.day-order-drop-after::after{
    content:''; position:absolute; left:2px; right:2px; height:3px;
    background:var(--color-blue); border-radius:2px; z-index:2;
    box-shadow:0 0 0 2px var(--color-surface);
  }
  .day-orderable.day-order-drop-before::before{top:0;}
  .day-orderable.day-order-drop-after::after{bottom:0;}
  .ticket.done{opacity:.55;}
  .ticket.has-pole{padding-bottom:calc(var(--space-14) + 22px);}
  .ticket-pole-footer{
    position:absolute; left:0; right:0; bottom:0;
    background:var(--color-surface-2); border-top:1px solid var(--color-border);
    padding:5px var(--space-14); font-size:10px; font-weight:700; color:var(--color-text-2);
    text-align:center; letter-spacing:0.01em;
  }
  .ticket-id{font-family:var(--font-mono); font-size:11px; color:var(--color-text-3); margin-bottom:var(--space-6); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;}

  /* Status / priority chips — tinted pill badges, shared shape */
  .status-chip,
  .prio-chip{
    font-family:var(--font-body); font-size:10px; font-weight:700;
    padding:var(--space-3) var(--space-9); border-radius:var(--radius-pill); letter-spacing:0;
  }
  .prio-chip{margin-bottom:var(--space-6); display:inline-block;}
  .status-afaire{background:var(--tint-gray-15); color:var(--color-text-2);}
  .status-encours{background:var(--tint-orange-15); color:var(--color-orange-text);}
  .status-attente,
  .prio-urgente{background:var(--tint-red-12); color:var(--color-red);}
  .status-termine,
  .prio-facile{background:var(--tint-green-15); color:var(--color-green-text);}
  .prio-importante{background:var(--tint-orange-15); color:var(--color-orange-text);}
  .status-select-chip{
    font-family:var(--font-body); font-size:10px; font-weight:700;
    padding:var(--space-3) 20px var(--space-3) var(--space-9); border-radius:var(--radius-pill);
    border:none; cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 6px center; background-size:11px;
  }
  .status-select-chip:hover{filter:brightness(0.96);}
  .status-select-chip.status-afaire{background-color:var(--tint-gray-15); color:var(--color-text-2);}
  .status-select-chip.status-encours{background-color:var(--tint-orange-15); color:var(--color-orange-text);}
  .status-select-chip.status-attente{background-color:var(--tint-red-12); color:var(--color-red);}
  .status-select-chip.status-termine{background-color:var(--tint-green-15); color:var(--color-green-text);}

  .ticket-title{font-weight:600; font-size:15px; margin-bottom:var(--space-3); line-height:1.35; color:var(--color-text);}
  .ticket-desc{
    font-size:13px; color:var(--color-text-2); margin-bottom:var(--space-8); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    cursor:pointer; border-radius:var(--radius-sm); margin-left:-4px; margin-right:-4px; padding:0 4px;
    transition:background var(--duration-fast) ease;
  }
  .ticket-desc:hover{background:var(--color-surface-2);}
  .ticket-meta{display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); flex-wrap:wrap; margin-top:var(--space-8);}
  .assignee{
    display:flex; align-items:center; gap:var(--space-6); font-size:12px; font-weight:500; color:var(--color-text-2); flex-wrap:wrap;
  }
  .avatar-stack{display:flex; align-items:center;}
  .avatar-stack .avatar{margin-left:-6px; border:2px solid var(--color-surface);}
  .avatar-stack .avatar:first-child{margin-left:0;}
  .avatar{
    width:22px; height:22px; border-radius:50%; background:var(--color-text-2);
    color:var(--color-white); display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; font-family:var(--font-display); flex-shrink:0;
  }
  .check-list{
    display:flex; flex-direction:column; gap:2px; max-height:200px; overflow-y:auto;
    border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:var(--space-4); background:var(--color-surface);
  }
  .check-item{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-10); font-size:13px; font-weight:500; color:var(--color-text);
    padding:var(--space-8) var(--space-8); border-radius:var(--radius-sm); cursor:pointer;
    transition:background var(--duration-fast) ease;
    border-bottom:1px solid var(--color-border);
  }
  .check-item:last-child{border-bottom:none;}
  .check-item-info{display:flex; align-items:center; gap:var(--space-10); min-width:0;}
  .check-item:hover{background:var(--color-surface-2);}
  .check-item:has(input:checked){background:var(--tint-blue-05);}
  .check-item input{
    width:17px; height:17px; margin:0; flex-shrink:0; accent-color:var(--color-blue); cursor:pointer;
  }
  .ticket-controls{display:flex; gap:var(--space-6); margin-top:var(--space-8); flex-wrap:wrap; align-items:center;}
  /* Non-drag alternative to same-day reordering (moveTaskInDayUp/Down in
     app.js): native HTML5 drag-and-drop, used everywhere else in the app
     for reordering, has no touch equivalent in any mobile browser. Hidden
     on wider screens, where dragging already works and a spare pair of
     buttons per ticket would just be clutter. */
  .reorder-btn-touch{display:none;}
  @media(max-width:760px){ .reorder-btn-touch{display:inline-flex;} }
  select.status-select{
    font-family:var(--font-body); font-size:11px; font-weight:600; padding:5px var(--space-8);
    border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text);
  }
  .icon-btn{
    background:none; border:none; cursor:pointer; color:var(--color-text-3); font-size:13px; padding:var(--space-2) var(--space-4);
  }
  .icon-btn:hover{color:var(--color-red);}
  .empty-col{font-size:13px; color:var(--color-text-3); font-style:italic; padding:var(--space-10) var(--space-4);}
  .recur-flag{font-size:11px;}
  .recur-date{font-size:11px; color:var(--color-text-3); margin-bottom:var(--space-6);}
  .deadline-info{font-size:11px; font-weight:600; color:var(--color-text-2); margin-bottom:var(--space-6);}
  .deadline-overdue{font-size:11px; font-weight:700; color:var(--color-red); margin-bottom:var(--space-6);}
  .note-preview{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
    font-size:12px; color:var(--color-text-2); background:var(--tint-blue-05);
    border-radius:var(--radius-sm); padding:var(--space-6) var(--space-9);
    margin-bottom:var(--space-8); cursor:pointer;
  }
  .note-preview:hover{background:var(--tint-blue-12);}
  .note-preview span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .note-preview .who{flex-shrink:0; font-size:11px;}
  .recur-group{cursor:pointer; border-left:3px solid var(--color-orange);}
  .recur-group:hover{box-shadow:var(--shadow-md);}

  /* the satisfying "done" button */
  .done-btn{
    width:22px; height:22px; border-radius:50%; border:2px solid var(--color-text-3);
    background:transparent; cursor:pointer; position:relative; flex-shrink:0;
    transition:transform .12s var(--ease-spring), background var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }
  .done-btn:hover{transform:scale(1.12); border-color:var(--color-green); background:var(--tint-green-12);}
  .done-btn:active{transform:scale(0.9);}

  /* Round selection toggle for "Sélectionner plusieurs" — same rounded,
     satisfying-click language as .done-btn above, just in blue (not
     green) to read as "select" rather than "mark done". */
  .select-check{
    width:22px; height:22px; border-radius:50%; border:2px solid var(--color-text-3);
    background:var(--color-surface); cursor:pointer; flex-shrink:0; position:relative;
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s var(--ease-spring), background var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }
  .select-check:hover{transform:scale(1.12); border-color:var(--color-blue); background:var(--tint-blue-12);}
  .select-check:active{transform:scale(0.9);}
  .select-check.checked{background:var(--color-blue); border-color:var(--color-blue);}
  .select-check.checked::after{
    content:''; width:6px; height:11px; border:solid var(--color-white);
    border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px);
  }

  /* ==========================================================================
     MODALS & FORMS
     ========================================================================== */
  .overlay{
    position:fixed; inset:0; background:var(--tint-black-35); display:flex;
    align-items:center; justify-content:center; z-index:var(--z-overlay); padding:var(--space-20);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  }
  .modal{
    background:var(--color-surface); color:var(--color-text); border-radius:var(--radius-xl);
    padding:var(--space-26); width:100%; max-width:min(440px, calc(100vw - 40px)); max-height:86vh; overflow-y:auto;
    box-shadow:var(--shadow-lg);
  }
  @media(max-width:480px){
    .modal{padding:var(--space-20); border-radius:var(--radius-lg);}
  }
  .modal h2{font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 var(--space-16); color:var(--color-text);}
  .modal-title-row{
    display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-12);
    margin-bottom:var(--space-16); padding-bottom:var(--space-8);
  }
  .modal-title-row h2{margin:0;}
  .modal-close-btn{
    background:var(--color-surface-2); border:none; border-radius:50%;
    width:28px; height:28px; flex-shrink:0; cursor:pointer;
    font-size:13px; color:var(--color-text-2); line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--duration-fast) ease, color var(--duration-fast) ease;
  }
  .modal-close-btn:hover{background:var(--color-border); color:var(--color-text);}
  .field{margin-bottom:var(--space-14);}
  .field > label{display:block; font-size:12px; font-weight:600; color:var(--color-text-2); margin-bottom:var(--space-6);}
  .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select{
    width:100%; padding:10px var(--space-12); border-radius:var(--radius-sm); border:1px solid var(--color-border);
    font-family:var(--font-body); font-size:14px; background:var(--color-surface-2); color:var(--color-text);
  }
  .field input:focus:not([type="checkbox"]):not([type="radio"]), .field textarea:focus, .field select:focus{
    outline:2px solid var(--color-blue); outline-offset:1px; background:var(--color-surface);
  }
  .field textarea{resize:vertical; min-height:60px;}
  /* Applied via JS when a required field is submitted empty/invalid —
     removed again as soon as the person changes the value. */
  .field-invalid{border-color:var(--color-red) !important; box-shadow:0 0 0 1px var(--color-red);}
  .field input[type="checkbox"], .field input[type="radio"]{width:auto; flex-shrink:0;}
  .modal-actions{display:flex; justify-content:flex-end; gap:var(--space-10); margin-top:var(--space-18);}
  .radio-row{display:flex; gap:var(--space-8); flex-wrap:wrap;}
  .radio-row label{
    display:flex; align-items:center; gap:var(--space-6); font-size:13px; font-weight:500;
    border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:7px var(--space-14); cursor:pointer;
    background:var(--color-surface-2);
  }
  .radio-row input{width:auto;}

  /* ==========================================================================
     IDENTIFY SCREEN
     ========================================================================== */
  .identify-wrap{
    max-width:480px; margin:var(--space-60) auto; text-align:center;
  }
  .identify-wrap h1{color:var(--color-text); font-size:34px; margin-bottom:var(--space-6); font-weight:700; letter-spacing:-0.02em;}
  .identify-wrap p{color:var(--color-text-2); margin-bottom:var(--space-28); font-size:15px;}
  .member-list{display:flex; flex-direction:column; gap:var(--space-8); margin-bottom:var(--space-20);}
  .member-pick{
    display:flex; align-items:center; justify-content:space-between;
    border-radius:var(--radius-md);
    padding:var(--space-14) var(--space-18); cursor:pointer; transition:box-shadow var(--duration-fast) ease, transform .1s ease;
  }
  .member-pick:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
  .member-pick .name{font-weight:600; display:flex; align-items:center; gap:var(--space-10); color:var(--color-text);}

  /* ==========================================================================
     TEAM & RECURRING PANELS
     ========================================================================== */
  .team-list{display:flex; flex-direction:column; gap:var(--space-8); margin-bottom:var(--space-16);}
  .team-row{padding:var(--space-9) var(--space-14);}
  .team-row .name{font-weight:600; font-size:13px; display:flex; align-items:center; gap:var(--space-8); color:var(--color-text);}
  .role-toggle select{width:auto; padding:5px var(--space-8); font-size:12px;}
  .row-actions{display:flex; gap:var(--space-6); align-items:center; flex-wrap:wrap;}
  .recur-row{padding:var(--space-12) var(--space-14); margin-bottom:var(--space-8); display:flex; flex-direction:column; gap:var(--space-8);}
  .recur-row-header{display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); flex-wrap:wrap;}
  .recur-row-header .title{font-weight:700; font-size:14px; color:var(--color-text); line-height:1.3;}
  .recur-row-meta{display:flex; flex-wrap:wrap; gap:var(--space-6);}
  .meta-chip{
    font-family:var(--font-body); font-size:11px; font-weight:600; padding:3px var(--space-9);
    border-radius:999px; background:var(--color-surface); color:var(--color-text-2); border:1px solid var(--color-border);
    white-space:nowrap;
  }
  .meta-chip-muted{background:var(--tint-gray-15); color:var(--color-text-2); border-color:transparent;}
  .recur-row-actions{display:flex; flex-wrap:wrap; gap:var(--space-6);}

  .loading-msg{text-align:center; color:var(--color-text-2); margin-top:var(--space-60); font-family:var(--font-mono); font-size:13px;}
  .hint{font-size:12px; color:var(--color-text-2); margin-top:-6px; margin-bottom:var(--space-14);}

  /* Per-field collapsible sections inside the new/edit task forms — each
     optional group (description, équipe, planification, pôle, drive) can
     fold independently, rather than one single "Plus d'options" block. */
  .form-section{margin-bottom:var(--space-14);}
  .form-section-head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
    cursor:pointer; user-select:none; padding:var(--space-8) 0;
    border-top:1px solid var(--color-border);
    font-size:12px; font-weight:600; color:var(--color-text-2);
  }
  .form-section:first-of-type .form-section-head{border-top:none; padding-top:0;}
  .form-section-chevron{font-size:11px; color:var(--color-text-3); flex-shrink:0;}
  .form-section-body{padding-top:var(--space-4);}

  /* ==========================================================================
     TODAY / FOCUS SECTION
     ========================================================================== */
  .today-wrap{margin-top:var(--space-36); padding-top:var(--space-24); border-top:1px solid var(--color-border);}
  .today-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:start;}
  @media(max-width:760px){.today-grid{grid-template-columns:1fr;}}
  .today-col{
    border-radius:var(--radius-lg); padding:var(--space-16);
    display:flex; flex-direction:column;
    position:relative;
  }
  .today-col h3{margin:0; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--color-text);}
  .today-col-head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
    cursor:pointer; user-select:none; border-radius:var(--radius-sm);
    margin:calc(var(--space-4) * -1) calc(var(--space-8) * -1) var(--space-4);
    padding:var(--space-4) var(--space-8);
    transition:background var(--duration-fast) ease;
  }
  .today-col-head:hover{background:var(--color-surface-2);}
  .today-col.collapsed{min-height:0;}
  .today-col.collapsed::after{display:none;}
  .today-col.collapsed .today-col-head{margin-bottom:-4px;}
  .today-col.drop-target{border:2px dashed var(--color-border); transition:border-color var(--duration-fast) ease, background var(--duration-fast) ease;}
  .today-col.drop-target.drag-over{border-color:var(--color-blue); background:var(--tint-blue-05);}

  /* ==========================================================================
     CALENDAR
     ========================================================================== */
  .cal-grid{
    display:grid; grid-template-columns:36px repeat(7,1fr); gap:var(--space-8); align-items:stretch;
  }
  .cal-week-btn{
    background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-sm);
    cursor:pointer; font-size:14px; color:var(--color-text-2);
    display:flex; align-items:center; justify-content:center;
    transition:background var(--duration-fast) ease, color var(--duration-fast) ease;
  }
  .cal-week-btn:hover{background:var(--color-border); color:var(--color-text);}
  @media(max-width:640px){
    .cal-grid{grid-template-columns:24px repeat(7,1fr);}
    .cal-week-btn{font-size:11px;}
  }
  .cal-weekday{
    text-align:center; font-size:11px; font-weight:700; color:var(--color-text-2);
    text-transform:uppercase; letter-spacing:0.04em; padding-bottom:var(--space-6);
  }
  .cal-cell{
    background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm);
    min-height:80px; padding:var(--space-8); cursor:pointer; position:relative;
    transition:box-shadow var(--duration-fast) ease, background var(--duration-fast) ease;
    display:flex; flex-direction:column; gap:var(--space-4);
  }
  .cal-cell:hover{box-shadow:var(--shadow-sm); background:var(--color-surface-2);}
  .cal-cell-outside{opacity:0.35;}
  .cal-cell-today{border:2px solid var(--color-blue);}
  .cal-cell-mini{min-height:auto; aspect-ratio:1; align-items:center; justify-content:center; padding:0;}
  .cal-cell-selected{background:var(--color-blue); border-color:var(--color-blue);}
  .cal-cell-selected .cal-cell-num{color:var(--color-white);}
  .cal-cell-num{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--color-text);}
  .cal-dots{display:flex; gap:4px;}
  .cal-dot{width:7px; height:7px; border-radius:50%;}
  .cal-count{
    position:absolute; bottom:var(--space-6); right:var(--space-8);
    font-family:var(--font-mono); font-size:10px; color:var(--color-text-2);
    background:var(--color-surface-2); border-radius:999px; padding:1px 6px;
  }
  @media(max-width:640px){
    .cal-cell{min-height:52px; padding:var(--space-4);}
    .cal-cell-num{font-size:11px;}
  }

  .cal-week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-8);}
  @media(max-width:760px){
    .cal-week{
      display:flex; overflow-x:auto; gap:var(--space-8);
      scrollbar-width:thin; scrollbar-color:var(--color-border) transparent;
    }
    .cal-week-day{min-width:140px; flex:0 0 140px;}
  }
  .cal-week-day{
    background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
    padding:var(--space-10); min-height:120px; min-width:0;
  }
  .cal-week-day.cal-cell-today{border:2px solid var(--color-blue);}
  .cal-week-day-head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
    font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--color-text);
    margin-bottom:var(--space-8); padding-bottom:var(--space-6); border-bottom:1px solid var(--color-border);
    white-space:nowrap;
  }
  .cal-week-day-body{display:flex; flex-direction:column; gap:var(--space-4); max-height:420px; overflow-y:auto;}
  .cal-mini-ticket{
    display:flex; align-items:center; gap:var(--space-6); padding:var(--space-6) var(--space-8);
    background:var(--color-surface-2); border-radius:var(--radius-sm); cursor:pointer; min-width:0;
    transition:background var(--duration-fast) ease; position:relative;
  }
  .cal-mini-ticket:hover{background:var(--color-border);}
  .cal-mini-ticket.cal-mini-done{opacity:0.5;}
  .cal-mini-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
  .cal-mini-title{
    font-size:12px; font-weight:500; color:var(--color-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }

  /* ==========================================================================
     DASHBOARD
     ========================================================================== */
  .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-12); margin-bottom:var(--space-22);}
  @media(max-width:760px){.kpi-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:400px){.kpi-grid{grid-template-columns:1fr;}}
  .kpi-card{border-radius:var(--radius-md); padding:var(--space-16);}
  .kpi-card .num{font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--color-blue);}
  .kpi-card .lbl{font-size:12px; color:var(--color-text-2); font-weight:500;}
  .kpi-card-clickable{cursor:pointer; transition:box-shadow var(--duration-fast) ease;}
  .kpi-card-clickable:hover{box-shadow:var(--shadow-sm);}

  .panel-box{border-radius:var(--radius-lg); padding:var(--space-18); margin-bottom:var(--space-20);}
  .panel-box h3{margin:0 0 var(--space-14); font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--color-text);}

  /* Pairs two .panel-box side by side on wide screens (Statistiques
     overview), stacking on narrow ones so nothing gets cramped. */
  .stats-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:start; margin-bottom:var(--space-20);}
  .stats-row > .panel-box{margin-bottom:0;}
  @media(max-width:760px){ .stats-row{grid-template-columns:1fr;} }
  .stats-row-3{grid-template-columns:1fr 1fr 1fr;}
  @media(max-width:900px){ .stats-row-3{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .stats-row-3{grid-template-columns:1fr;} }
  /* Sub-split inside a single panel (e.g. the two donuts in "Ressenti à la
     clôture"). */
  .stats-subgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-20);}
  @media(max-width:640px){ .stats-subgrid{grid-template-columns:1fr;} }

  .streak-row{display:flex; align-items:center; gap:var(--space-20); flex-wrap:wrap;}
  .streak-badge{
    display:flex; align-items:center; gap:var(--space-8); background:var(--tint-orange-12); border-radius:var(--radius-pill); padding:var(--space-8) var(--space-16);
    font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--color-orange-text);
  }
  .progress-track{flex:1; min-width:160px; height:8px; background:var(--color-surface-2); border-radius:var(--radius-pill); overflow:hidden;}
  .progress-fill{height:100%; background:var(--color-blue); transition:width var(--duration-slow) ease; border-radius:var(--radius-pill);}

  .lb-row{display:grid; grid-template-columns:28px 1fr auto auto; align-items:center; gap:var(--space-10); padding:var(--space-9) 0; border-bottom:1px solid var(--color-border);}
  @media(max-width:480px){
    .lb-row{grid-template-columns:28px 1fr auto;}
    .lb-count{grid-column:2/3; justify-self:start; margin-top:2px;}
  }
  .lb-row:last-child{border-bottom:none;}
  .lb-rank{font-family:var(--font-display); font-weight:700; color:var(--color-text-2); text-align:center;}
  .lb-name{display:flex; align-items:center; gap:var(--space-8); font-weight:600; font-size:13px; color:var(--color-text);}
  .lb-bar-wrap{grid-column:1/-1; height:5px; background:var(--color-surface-2); border-radius:var(--radius-pill); overflow:hidden; margin-top:var(--space-2);}
  .lb-bar{height:100%; background:linear-gradient(90deg, var(--color-blue), var(--color-green-text)); border-radius:var(--radius-pill);}
  .lb-points{font-family:var(--font-display); font-size:15px; color:var(--color-blue); font-weight:700; text-align:right;}
  .lb-count{font-family:var(--font-mono); font-size:11px; color:var(--color-text-2); text-align:right;}

  .recent-row{display:flex; justify-content:space-between; align-items:center; padding:var(--space-9) 0; border-bottom:1px solid var(--color-border); font-size:13px; gap:var(--space-10);}
  .recent-row-clickable{cursor:pointer; margin:0 calc(var(--space-9) * -1); padding-left:var(--space-9); padding-right:var(--space-9); border-radius:var(--radius-sm); transition:background var(--duration-fast) ease;}
  .recent-row-clickable:hover{background:var(--color-surface-2);}
  .new-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--color-red); margin-right:6px; vertical-align:middle;}
  .recent-row:last-child{border-bottom:none;}
  .recent-row .who{color:var(--color-text-2);}

  /* ==========================================================================
     TOAST & CELEBRATION
     ========================================================================== */
  .confetti-burst{position:fixed; inset:0; pointer-events:none; z-index:var(--z-confetti); overflow:hidden;}
  .confetti-piece{position:absolute; top:-5%; font-size:22px; animation:confetti-fall 1.3s ease-in forwards;}
  @keyframes confetti-fall{
    0%{transform:translateY(0) rotate(0deg); opacity:1;}
    100%{transform:translateY(100vh) rotate(360deg); opacity:0;}
  }
  .toast{
    position:fixed; bottom:var(--space-24); left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--color-text); color:var(--color-white); padding:var(--space-12) var(--space-22); border-radius:var(--radius-pill);
    font-weight:600; font-size:14px; z-index:var(--z-toast); opacity:0; transition:opacity .25s ease, transform .25s ease;
    box-shadow:var(--shadow-lg);
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast.error{background:var(--color-red);}
  .toast.toast-center{
    top:50%; bottom:auto; left:50%; transform:translate(-50%, -50%) translateY(10px);
  }
  .toast.toast-center.show{transform:translate(-50%, -50%) translateY(0);}

  .celebration-overlay{
    position:fixed; inset:0; z-index:var(--z-toast);
    background:rgba(20,20,25,0.45);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; padding:var(--space-20);
    opacity:0; transition:opacity .3s ease; cursor:pointer;
  }
  .celebration-overlay.show{opacity:1;}
  .celebration-card{
    background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
    padding:var(--space-32) var(--space-28); max-width:560px; width:100%; text-align:center;
    transform:scale(0.92) translateY(8px); transition:transform .35s cubic-bezier(0.34,1.56,0.64,1);
    cursor:default;
  }
  .celebration-overlay.show .celebration-card{transform:scale(1) translateY(0);}
  .celebration-badge{
    display:inline-flex; align-items:center; gap:6px; padding:5px 16px; border-radius:999px;
    background:var(--tint-green-15); color:var(--color-green-text); font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.03em; margin-bottom:22px;
  }
  .celebration-main{
    font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--color-text);
    margin-bottom:20px; line-height:1.4;
  }
  .celebration-quote-box{
    position:relative; text-align:center; padding:0 var(--space-8);
  }
  .celebration-quote-mark{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-family:Georgia, serif; font-size:56px; font-weight:700;
    color:var(--tint-green-15); line-height:1; user-select:none;
  }
  .celebration-quote{
    position:relative; font-family:var(--font-display); font-size:19px; font-weight:600; font-style:normal;
    color:var(--color-text); line-height:1.5; margin-bottom:14px;
  }
  .celebration-source{font-size:12px; font-weight:700; color:var(--color-green-text); margin-bottom:22px;}
  .celebration-divider{height:1px; background:var(--color-border); margin-bottom:18px;}
  .celebration-encourage{font-size:14px; font-weight:600; color:var(--color-text-2); line-height:1.4;}
  .celebration-emoji-big{font-size:44px; line-height:1; margin-bottom:14px; display:block;}
  .celebration-main-humor{font-size:16px !important; line-height:1.45;}