/* =============================================
   PLANIFICATEUR DE SEMAINE - STYLES
   Dark Mode - Gray Theme
   Responsive Design (Desktop, Tablet, Mobile)
   ============================================= */

:root {
    /* Encre des voiles d'habillage.
     *
     * Toute l'interface pose des surfaces et des bordures en blanc très
     * transparent — rgba(var(--ink),0.06) pour un panneau, 0.1 pour une ligne
     * du calendrier. Sur fond sombre cela éclaircit légèrement ; sur fond clair
     * c'était du blanc sur du blanc, donc invisible. C'est ce qui faisait
     * disparaître les lignes du calendrier et les contours des boutons en thème
     * clair, et pourquoi le thème « explosait les yeux » : il ne restait que des
     * aplats sans structure.
     *
     * Ces 209 valeurs passent par cette variable : l'encre devient sombre en
     * thème clair, et chaque voile retrouve exactement le même rôle.
     */
    --ink: 255, 255, 255;

    /* Color Palette - Dark Theme */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #252525;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --accent: #4a90e2;
    --accent-rgb: 74, 144, 226;
    --accent-hover: #357abd;
    --border-color: #333333;
    --shadow: rgba(0, 0, 0, 0.7);

    /* Day Colors */
    --day-lundi: #e8100e;        /* Red */
    --day-mardi: #f39c12;        /* Orange */
    --day-mercredi: #f1c40f;     /* Yellow */
    --day-jeudi: #2ecc71;        /* Green */
    --day-vendredi: #1abc9c;     /* Cyan */
    --day-samedi: #3498db;       /* Blue */
    --day-dimanche: #9b59b6;     /* Purple */

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;

    /* Curseur de déplacement — 4 flèches larges, violet vif + contour blanc (lisible sur tout fond) */
    --cursor-grabbing:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M16 3L11 10h4v4h2v-4h4z'/%3E%3Cpath paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M16 29l5-7h-4v-4h-2v4h-4z'/%3E%3Cpath paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M3 16l7-5v4h4v2H10v4z'/%3E%3Cpath paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M29 16l-7-5v4h-4v2h4v4z'/%3E%3Ccircle cx='16' cy='16' r='2.5' paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E")
        16 16, grabbing;

    /* Curseur redimensionnement vertical — 2 flèches + double barre centrale */
    --cursor-ns-resize:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M16 2L12 8h3v4h2V8h3z'/%3E%3Cpath paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M16 30l4-6h-3v-4h-2v4h-3z'/%3E%3Crect x='10' y='13.5' width='12' height='1.5' rx='0.75' paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='0.8'/%3E%3Crect x='10' y='17' width='12' height='1.5' rx='0.75' paint-order='stroke fill' fill='%23a855f7' stroke='white' stroke-width='0.8'/%3E%3C/svg%3E")
        16 16, ns-resize;
}

/* =============================================
   LIGHT THEME OVERRIDES
   ============================================= */

/* ─── Palette blanc cassé chaud ─── */
[data-theme="light"] {
    /* L'encre s'inverse : les voiles qui éclaircissaient le fond sombre
     * l'assombrissent maintenant, et retrouvent leur rôle de séparation. */
    --ink: 24, 24, 42;

    --bg-primary:    #dfdfe4;
    --bg-secondary:  #eaeaef;
    --bg-tertiary:   #d2d2d8;
    --text-primary:  #18182a;
    --text-secondary:#58587a;
    /* Mesuré : #bcbcc6 ne donnait que 1,42:1 sur ce fond, très loin des 3:1
     * exigés pour une frontière d'interface. Les contours existaient sans se
     * voir — c'est une partie de ce qui donnait cette impression de flou. */
    --border-color:  #7c7c88;
    --shadow:        rgba(20, 20, 45, 0.12);

    /* Encre des icônes utilitaires — voir le bloc « langue commune » plus bas.
     * Mauve plutôt que gris : c'est la couleur de l'application, et elle tient
     * le contraste sur #dfdfe4. Ce qui comptait n'était pas de les rendre
     * neutres, mais de leur donner UNE couleur au lieu de sept. */
    --icon-ink:      #7c3aed;
    --icon-ink-hover:#5b21b6;
}

/* ── Textes qui passaient au blanc au survol ──
 *
 * Ces règles écrivent `color: #fff` sur des surfaces d'habillage. En thème
 * sombre le texte s'éclaircit au survol ; en thème clair il devenait blanc sur
 * blanc cassé, donc illisible le temps du survol. Les blancs posés sur un fond
 * coloré (avatars, boutons d'accent, poignées d'interrupteur, curseurs du
 * sélecteur de couleur) ne sont volontairement PAS touchés : ce sont des objets
 * blancs, pas du texte sur habillage.
 */
[data-theme="light"] .accdrop-btn:hover,
[data-theme="light"] .accsettings-btn-secondary:hover,
[data-theme="light"] .accsettings-phone-option:hover,
[data-theme="light"] .time-dropdown-option:hover,
[data-theme="light"] .color-add-btn:hover,
[data-theme="light"] .pc-color-hex {
    color: var(--text-primary);
}

/* ── Header ── */
[data-theme="light"] .header {
    background: linear-gradient(135deg, rgba(155,89,182,0.08) 0%, rgba(233,233,237,0.97) 100%);
    border-bottom: 1px solid rgba(0,0,0,0.09);
}

/* ── Barre de navigation semaine ── */
[data-theme="light"] .calendar-header {
    background: linear-gradient(135deg, rgba(155,89,182,0.06) 0%, rgba(233,233,237,0.95) 100%);
    border-color: rgba(0,0,0,0.09);
}

/* ── Barre objectif de la semaine ── */
[data-theme="light"] .week-objective-bar {
    background: rgba(0,0,0,0.025);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-theme="light"] .week-objective-input {
    color: var(--text-primary);
}
[data-theme="light"] .week-objective-input::placeholder {
    color: rgba(0,0,0,0.30);
}

/* ── Sidebar gauche ── */
[data-theme="light"] .task-templates {
    background: linear-gradient(180deg, #dcdce1 0%, #e2e2e6 100%);
    border-right: 1px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .sidebar-title,
[data-theme="light"] .sidebar-section-title {
    color: var(--text-secondary);
}

/* ── Colonne Heure ── */
[data-theme="light"] .time-column {
    background: #dfdfe4;
    border-right: 1px solid rgba(0,0,0,0.11);
}
[data-theme="light"] .time-slot-header {
    background-color: #dfdfe4;
    border-bottom: 1px solid rgba(0,0,0,0.09);
}
[data-theme="light"] .time-label {
    color: var(--text-secondary);
}

/* ── Grille calendrier ── */
[data-theme="light"] .calendar-wrapper {
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .day-header {
    border-bottom: 1px solid rgba(0,0,0,0.11);
}
[data-theme="light"] .day-slot {
    background-color: #dfdfe4;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .day-slot:hover {
    background-color: #d4d4dc;
    border-color: rgba(0,0,0,0.15);
}
/* Lignes d'heures visibles */
[data-theme="light"] .day-slot.hour-slot-bottom {
    border-top-color: rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .day-slot.quarter-slot-mid,
[data-theme="light"] .day-slot.quarter-slot-last {
    border-top-color: rgba(0,0,0,0.05) !important;
}

/* ── En-têtes de jours : garder les couleurs vives ── */
[data-theme="light"] .day-header[data-day="0"] { background-color: var(--day-dimanche); }
[data-theme="light"] .day-header[data-day="1"] { background-color: var(--day-lundi); }
[data-theme="light"] .day-header[data-day="2"] { background-color: var(--day-mardi); }
[data-theme="light"] .day-header[data-day="3"] { background-color: var(--day-mercredi); }
[data-theme="light"] .day-header[data-day="4"] { background-color: var(--day-jeudi); }
[data-theme="light"] .day-header[data-day="5"] { background-color: var(--day-vendredi); }
[data-theme="light"] .day-header[data-day="6"] { background-color: var(--day-samedi); }

/* ── Teintes par colonne de jour ── */
[data-theme="light"] .day-column[data-day="0"] .day-slot { border-color: color-mix(in srgb, var(--day-dimanche) 20%, transparent); }
[data-theme="light"] .day-column[data-day="1"] .day-slot { border-color: color-mix(in srgb, var(--day-lundi)    20%, transparent); }
[data-theme="light"] .day-column[data-day="2"] .day-slot { border-color: color-mix(in srgb, var(--day-mardi)    20%, transparent); }
[data-theme="light"] .day-column[data-day="3"] .day-slot { border-color: color-mix(in srgb, var(--day-mercredi) 20%, transparent); }
[data-theme="light"] .day-column[data-day="4"] .day-slot { border-color: color-mix(in srgb, var(--day-jeudi)    20%, transparent); }
[data-theme="light"] .day-column[data-day="5"] .day-slot { border-color: color-mix(in srgb, var(--day-vendredi) 20%, transparent); }
[data-theme="light"] .day-column[data-day="6"] .day-slot { border-color: color-mix(in srgb, var(--day-samedi)   20%, transparent); }

/* ── Modales ── */
[data-theme="light"] .modal-content {
    background-color: #f2f2f5;
    border-color: rgba(0,0,0,0.09);
    box-shadow: 0 12px 48px rgba(20,20,45,0.15);
}
[data-theme="light"] .modal-footer {
    background-color: #eaeaee;
    border-top-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .modal-header {
    border-bottom-color: rgba(0,0,0,0.09);
}

/* ── Séparateurs ── */
[data-theme="light"] hr {
    border-top-color: rgba(0,0,0,0.11) !important;
}
[data-theme="light"] .pie-chart-wrapper {
    border-top-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .task-separator {
    background-color: rgba(0,0,0,0.20);
}

/* ── Toggle rows : fond et bordure adaptés ── */
[data-theme="light"] .toggle-row {
    border: 1.5px solid rgba(0,0,0,0.09);
    background: rgba(0,0,0,0.022);
    color: var(--text-secondary);
}
[data-theme="light"] .toggle-row:hover {
    background: rgba(155,89,182,0.07);
    border-color: rgba(155,89,182,0.28);
    color: var(--text-primary);
}
[data-theme="light"] .toggle-row:has(.toggle-input:checked) {
    border-color: rgba(155,89,182,0.22);
    background: rgba(139,47,201,0.05);
}
/* Piste du toggle : fond visible sur fond clair */
[data-theme="light"] .toggle-track {
    background: rgba(0,0,0,0.18);
    border-color: rgba(0,0,0,0.13);
}

/* ── Sélecteurs horaires (dropdowns) ── */
[data-theme="light"] .time-dropdown-trigger {
    background: rgba(0,0,0,0.04);
    border: 1.5px solid rgba(0,0,0,0.12);
}
[data-theme="light"] .time-dropdown-trigger:hover {
    background: rgba(155,89,182,0.07);
    border-color: rgba(155,89,182,0.40);
}
[data-theme="light"] .time-select-wrapper.open .time-dropdown-trigger {
    background: rgba(155,89,182,0.08);
    border-color: #b44fc7;
    box-shadow: 0 0 0 3px rgba(180,79,199,0.15);
}
[data-theme="light"] .time-dropdown-list {
    background: #f2f2f5;
    border-color: rgba(155,89,182,0.45);
    box-shadow: 0 8px 28px rgba(20,20,45,0.16);
    scrollbar-color: rgba(155,89,182,0.35) transparent;
}
[data-theme="light"] .time-dropdown-option {
    color: var(--text-primary);
}
[data-theme="light"] .time-dropdown-option:hover {
    background: rgba(155,89,182,0.09);
    color: var(--text-primary);
}
[data-theme="light"] .time-dropdown-option.selected {
    background: rgba(155,89,182,0.13);
    color: #7c35b8;
}

/* ── Navigation semaine ── */
[data-theme="light"] .week-nav-group {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .nav-arrow-btn {
    color: var(--text-primary);
}
[data-theme="light"] .nav-arrow-btn:hover {
    background: rgba(0,0,0,0.08);
}

/* ── Vue mensuelle ── */
[data-theme="light"] .month-view-modal {
    background: #f2f2f5;
    border-color: var(--border-color);
}
[data-theme="light"] .month-view-title { color: var(--text-primary); }
[data-theme="light"] .week-card {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .week-card:hover  { background: rgba(155,89,182,0.08); }
[data-theme="light"] .week-card.current-week { background: rgba(155,89,182,0.07); }
[data-theme="light"] .week-card-label  { color: var(--text-secondary); }
[data-theme="light"] .week-day-name    { color: var(--text-secondary); }
[data-theme="light"] .month-view-close { color: var(--text-secondary); }

/* ── Scrollbars ── */
[data-theme="light"] ::-webkit-scrollbar-track { background-color: var(--bg-tertiary); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: var(--border-color); }

/* ── Sélecteur Thème ── */
[data-theme="light"] .theme-mode-switcher::before,
[data-theme="light"] .theme-mode-switcher::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12) 50%, transparent);
}
[data-theme="light"] .theme-mode-btn[data-mode="dark"] .theme-mode-icon-wrap,
[data-theme="light"] .theme-mode-btn[data-mode="light"] .theme-mode-icon-wrap {
    background: rgba(0,0,0,0.07);
}
[data-theme="light"] .theme-mode-btn[data-mode="dark"].active .theme-mode-icon-wrap {
    background: rgba(100,60,160,0.14);
    box-shadow: 0 0 20px rgba(140,70,190,0.28);
}
[data-theme="light"] .theme-mode-btn[data-mode="light"].active .theme-mode-icon-wrap {
    background: rgba(246,201,14,0.18);
    box-shadow: 0 0 22px rgba(246,180,10,0.38);
}
[data-theme="light"] .theme-mode-label          { color: rgba(0,0,0,0.35); }
[data-theme="light"] .theme-mode-btn.active .theme-mode-label { color: rgba(0,0,0,0.72); }
[data-theme="light"] .theme-slash               { color: rgba(0,0,0,0.20); }

/* ── Boutons icônes du header ──
 *
 * Ces quatre icônes étaient toutes aplaties sur --text-primary, c'est-à-dire le
 * même quasi-noir pour l'engrenage, le partage et le téléversement — alors
 * qu'en thème sombre chacune a sa teinte : cyan #7dd3fc pour les réglages,
 * violets clairs pour les deux autres. Elles perdaient leur identité et
 * l'ensemble paraissait étranger au reste de l'interface.
 *
 * On conserve donc la teinte, assombrie juste ce qu'il faut pour tenir sur le
 * blanc cassé.
 */
/* ── Une langue commune pour les icônes ──
 *
 * En thème sombre, le néon unifie la rangée : tout luit, donc tout appartient
 * au même système. Sur fond clair ce liant disparaît et il ne reste que sept
 * couleurs pour huit boutons — verrou violet, calendrier violet, partage
 * violet, statistiques rouge et bleu, engrenage cyan… L'œil lit un assemblage
 * d'autocollants, pas une barre d'outils.
 *
 * Les icônes utilitaires passent donc toutes sur la même encre. La couleur est
 * réservée à ce qui porte un sens et reste, lui, coloré :
 *   — la corbeille, parce qu'elle détruit ;
 *   — l'avatar, parce que le vert dit « connecté » ;
 *   — « Aujourd'hui », parce que c'est l'action principale.
 */
[data-theme="light"] .btn-settings,
[data-theme="light"] .btn-share,
[data-theme="light"] .btn-export-pdf,
[data-theme="light"] .btn-month-view,
[data-theme="light"] .btn-stats,
[data-theme="light"] .btn-lock-board {
    color: var(--icon-ink);
}
[data-theme="light"] .btn-settings:hover,
[data-theme="light"] .btn-share:hover,
[data-theme="light"] .btn-export-pdf:hover,
[data-theme="light"] .btn-month-view:hover,
[data-theme="light"] .btn-stats:hover,
[data-theme="light"] .btn-lock-board:hover {
    color: var(--icon-ink-hover);
}

/* Le calendrier est une petite illustration à trois violets écrits dans le SVG.
 * Maintenant que la rangée est mauve, il n'est plus l'intrus : on lui laisse
 * ses teintes, simplement assombries pour tenir sur le fond clair. */
[data-theme="light"] .btn-month-view svg [fill="#8e3fa8"] { fill: #6d28d9; }
[data-theme="light"] .btn-month-view svg [fill="#b44fc7"] { fill: #7c3aed; }
/* #a78bfa ne tenait que 2,05:1 : les attaches disparaissaient. */
[data-theme="light"] .btn-month-view svg [fill="#d87ee8"] { fill: #8b5cf6; }

/* Rouge et verts mesurés eux aussi sous le seuil sur ce fond : la corbeille
 * plafonnait à 2,83:1 et le vert « connecté » à 2,48:1. */
[data-theme="light"] .btn-reset-week {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}
[data-theme="light"] .btn-account.logged-in {
    border-color: rgba(21, 128, 61, 0.75);
    background: rgba(21, 128, 61, 0.08);
}
[data-theme="light"] .btn-add-task {
    color: #15803d;
}

/* Les trois barres des statistiques clignotent en rouge, bleu puis jaune, à
 * tour de rôle et en permanence. Sur fond sombre c'est une respiration
 * discrète ; sur fond clair ce sont trois éclats de couleur sans raison au
 * milieu d'une barre d'outils monochrome. */
[data-theme="light"] .btn-stats svg line {
    animation: none;
    stroke: currentColor;
}

/* Aucun halo sur les icônes utilitaires : la lumière est un idiome du sombre. */
[data-theme="light"] .btn-settings svg,
[data-theme="light"] .btn-share svg,
[data-theme="light"] .btn-export-pdf svg,
[data-theme="light"] .btn-stats svg,
[data-theme="light"] .btn-month-view svg {
    filter: none;
}

/* Les flèches de semaine sont blanches en thème sombre ; le noir pur est trop
 * dur en clair, on reste sur une encre adoucie. */
[data-theme="light"] .nav-arrow-btn { color: #3f3f52; }

/* ── Extinction des néons ──
 *
 * L'interface sombre fait luire ses icônes : halos colorés, pastilles teintées,
 * anneau vert pulsant autour de l'avatar quand on est connecté. Sur fond sombre
 * c'est l'effet recherché. Sur blanc cassé, un halo coloré devient une bavure
 * autour de l'icône — c'est ce qui donnait ce contraste « bizarre », bien plus
 * que la couleur des traits.
 *
 * On garde donc les teintes et on éteint la lumière : les icônes deviennent
 * plates, comme le veut une interface claire.
 */
[data-theme="light"] .btn-month-view {
    background: transparent;
    box-shadow: none;
}
[data-theme="light"] .btn-month-view:hover {
    background: rgba(124, 58, 237, 0.10);
    box-shadow: none;
}

/* L'anneau vert « connecté » ne pulse plus : un simple cerclage suffit à dire
 * la même chose sans attirer l'œil en permanence. */
[data-theme="light"] .btn-account.logged-in {
    animation: none;
    border-color: rgba(22, 163, 74, 0.55);
    background: rgba(22, 163, 74, 0.06);
    box-shadow: none;
}

/* La corbeille garde son rouge, mais pas son anneau qui pulse en continu :
 * sur fond clair il se lit comme une bavure autour du bouton. */
[data-theme="light"] .btn-reset-week::after {
    animation: none;
    opacity: 0.35;
    border-color: rgba(185, 28, 28, 0.35);
}

/* =============================================
   RESET & BASE STYLES
   ============================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body {
    overflow-x: hidden;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */

h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

/* =============================================
   BUTTONS & CONTROLS
   ============================================= */

button {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

button:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
}

button:active {
    transform: translateY(0);
}

.btn {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--accent);
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

.btn-ghost {
    background: none;
    color: var(--text-secondary);
    border: 1px solid rgba(var(--ink),0.08);
}
.btn-ghost:hover {
    background: rgba(var(--ink),0.05);
    color: var(--text-primary);
}
[data-theme="light"] .btn-ghost { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.04); }

.btn-purple {
    background: linear-gradient(135deg, #9b59b6, #7d3c98);
    color: white;
    border: none;
}
.btn-purple:hover { background: linear-gradient(135deg, #a569c0, #8e44ad); }

/* =============================================
   HEADER
   ============================================= */

.header {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(155, 89, 182, 0.1));
    padding: var(--spacing-lg);
    border-bottom: 1px solid rgba(var(--ink),0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.header h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.settings-btn {
    font-size: var(--font-size-md);
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 2px solid rgba(102, 126, 234, 0.6);
    border-radius: 8px;
    color: white;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-lg);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.settings-btn:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* =============================================
   CONTAINER & LAYOUT
   ============================================= */

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}

/* =============================================
   TASK TEMPLATES SIDEBAR
   ============================================= */

.task-templates {
    width: 200px;
    background: linear-gradient(180deg, rgba(var(--ink),0.05), rgba(var(--ink),0.02));
    border: 1px solid rgba(var(--ink),0.1);
    border-radius: 12px;
    padding: var(--spacing-md);
    overflow: hidden; /* sidebar itself does NOT scroll */
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: 10px;
}

.task-templates h3 {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.btn-add-task {
    background: transparent;
    border: none;
    color: #22c55e;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease;
    animation: addGlowPulse 2.2s ease-in-out infinite;
}

@keyframes addGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.9))
                       drop-shadow(0 0 8px rgba(34, 197, 94, 0.6)); }
    50%       { filter: drop-shadow(0 0 14px rgba(34, 197, 94, 1))
                       drop-shadow(0 0 28px rgba(34, 197, 94, 0.5)); }
}

/* Croix épaisse via deux barres SVG-like en CSS */
.btn-add-task span {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-add-task span::before,
.btn-add-task span::after {
    content: '';
    position: absolute;
    background: #22c55e;
    border-radius: 3px;
    transition: background 0.3s ease;
}

/* Barre horizontale */
.btn-add-task span::before {
    width: 100%;
    height: 5px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Barre verticale */
.btn-add-task span::after {
    width: 5px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* Hover : rotation 90° + glow plus intense */
@keyframes addBtnPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.btn-add-task:hover {
    background: transparent;
    animation: addBtnPop 0.25s ease-out forwards,
               addGlowPulse 0s forwards; /* stoppe le pulse, laisse le glow hover prendre le relais */
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.9))
            drop-shadow(0 0 20px rgba(34, 197, 94, 0.4));
}

.btn-add-task:hover span {
    transform: none;
}

/* Clic : écrasement + virage vers blanc */
.btn-add-task:active {
    transform: scale(0.85);
    transition: transform 0.08s ease, filter 0.08s ease;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}

.btn-add-task:active span {
    transform: rotate(135deg);
}

.btn-add-task:active span::before,
.btn-add-task:active span::after {
    background: #86efac;
}

.templates-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;             /* take available space */
    overflow-y: auto;    /* scroll if too many tasks */
    overflow-x: hidden;
    min-height: 0;       /* necessary for flex scroll */
    padding-right: 2px;  /* room for scrollbar */
    margin-bottom: var(--spacing-sm);
}

.task-template {
    padding: 6px var(--spacing-sm);
    border: 2px solid rgba(52, 152, 219, 0.8);
    border-radius: 9px;
    cursor: default;
    transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.2s ease,
                opacity 0.15s ease;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    user-select: none;
    color: white;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

/* L'élément en cours de glisser reste visible (le ghost navigateur le représente aussi) */
.task-template.dragging-template {
    opacity: 1 !important;
    pointer-events: none;
    transition: none !important; /* snap instantané, pas de fade visible */
}

/* Default gradient for task templates without custom colors */
.task-template:not([style*="background-color"]) {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.task-template:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

/* Only apply gradient on hover if no custom color is set via inline styles */
.task-template:not([style*="background-color"]):hover {
    background: linear-gradient(135deg, #5dade2, #2980b9);
}

.task-template:active {
    cursor: var(--cursor-grabbing);
    opacity: 0.9;
}


.task-template-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: rgba(244, 67, 54, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
}

.task-template:hover .task-template-delete {
    opacity: 1;
}

.task-template-delete:hover {
    background-color: rgba(211, 47, 47, 1);
    transform: scale(1.15);
}

/* Bouton d'édition des tâches prédéfinies (apparaît au survol, à gauche) */
.task-template-edit {
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: rgba(0, 0, 0, 0.45);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
}

.task-template:hover .task-template-edit {
    opacity: 1;
}

.task-template-edit:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.15);
}

/* =============================================
   CALENDAR SECTION
   ============================================= */

.calendar-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
    border-radius: 12px;
    border: 1px solid rgba(var(--ink),0.1);
    min-height: 70px;
}

.header-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.app-title {
    font-size: 12px;
    font-weight: 600;
    color: #b44fc7;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.header-center {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: translateY(-4px); /* remonte légèrement le titre + la date */
}

.header-center h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.01em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.calendar-header h2 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.live-datetime {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #ff4d4d;
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: 3px; /* descend très légèrement la date/heure rouge */
}

.live-date, .live-time {
    color: #ff4d4d;
}

.live-sep {
    display: inline-block;
    width: 1.5px;
    height: 14px;
    background: #ff4d4d;
    border-radius: 2px;
    opacity: 0.75;
    flex-shrink: 0;
}

.header-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.week-nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(var(--ink), 0.06);
    border: 1px solid rgba(var(--ink), 0.1);
    border-radius: 12px;
    padding: 4px;
}

/* Tâches hors de la plage horaire affichée.
   Ambre plutôt que rouge : c'est un avertissement, pas une erreur — rien n'est
   cassé, il manque juste de la place pour tout montrer. */
.out-of-range-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 5px 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.out-of-range-badge:hover  { background: rgba(245, 158, 11, 0.22); }
.out-of-range-badge:active { transform: scale(0.97); }
.out-of-range-badge[hidden] { display: none; }

.out-of-range-action {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.92);
    color: #1a1205;
    font-weight: 700;
}

.nav-arrow-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s ease;
}

.nav-arrow-btn:hover {
    background: rgba(var(--ink), 0.15);
}

.nav-arrow-btn:active {
    background: rgba(var(--ink), 0.08);
    transform: scale(0.93);
}

.nav-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 2px solid rgba(102, 126, 234, 0.6);
    border-radius: 8px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-btn:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-today {
    padding: 5px 11px;
    font-size: 0.78rem;
    background: linear-gradient(135deg, #b44fc7, #8b2fc9);
    border: 2px solid rgba(180, 79, 199, 0.7);
    border-radius: 8px;
    color: white;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(139, 47, 201, 0.35);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.btn-today:hover {
    background: linear-gradient(135deg, #c55fd8, #9b3fdc);
    box-shadow: 0 5px 14px rgba(139, 47, 201, 0.5);
    transform: translateY(-1px);
}

.btn-today:active {
    transform: translateY(0) scale(0.96);
}

@keyframes export-bounce {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-6px) scale(1.08); }
    70%  { transform: translateY(-3px) scale(1.04); }
    100% { transform: translateY(-4px) scale(1.06); }
}

@keyframes export-click {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}

@keyframes gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(180deg); }
}

@keyframes settings-click {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(0.85) rotate(-20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── Bouton télécharger ── */
.btn-export-pdf {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: none;
    background: transparent;
    color: #e0aaff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none;
    padding: 0;
}

.btn-export-pdf:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.btn-export-pdf svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 0px rgba(180, 79, 199, 0));
    transition: filter 0.25s ease, color 0.25s ease;
}

/* Charge rapide puis décharge — effet "énergie" */
.btn-export-pdf:hover svg {
    animation: download-charge 1.0s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes download-charge {
    0%   { color: #c084fc; filter: drop-shadow(0 0 1px rgba(180,79,199,0.3)); transform: scale(1);    }
    65%  { color: #ffffff; filter: drop-shadow(0 0 10px rgba(240,180,255,1))
                                   drop-shadow(0 0 20px rgba(180,79,199,0.8)); transform: scale(1.18); }
    75%  { color: #f0d0ff; filter: drop-shadow(0 0 4px rgba(200,100,230,0.5)); transform: scale(0.96); }
    100% { color: #c084fc; filter: drop-shadow(0 0 1px rgba(180,79,199,0.3)); transform: scale(1);    }
}

.btn-export-pdf:active svg {
    animation: none;
    transform: scale(0.85);
    transition: transform 0.1s ease;
    filter: drop-shadow(0 0 10px rgba(200, 100, 230, 1));
}

/* ── Bouton partager ── */
.share-download-group {
    display: flex;
    align-items: center;
    gap: 0;
}

.share-wrapper {
    position: relative;
    width: 40px;
    flex-shrink: 0;
}

.btn-share {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: none;
    background: transparent;
    color: #d8a0ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.btn-share:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.btn-share svg {
    width: 20px;
    height: 20px;
    transition: filter 0.25s ease;
    filter: drop-shadow(0 0 0px rgba(180, 79, 199, 0));
    overflow: visible;
}

.btn-share:hover svg {
    filter: drop-shadow(0 0 5px rgba(200, 100, 230, 0.5));
}

/* Les 3 nœuds gardent leur transform-origin pour l'animation hover */
.btn-share svg circle {
    transform-box: fill-box;
    transform-origin: center;
}

.btn-share:active svg {
    transform: scale(0.88);
    transition: transform 0.1s ease;
}
.btn-share:active svg circle {
    animation: none !important;
    fill: #f0c8ff;
}

.share-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #1e1b2e;
    border: 1px solid rgba(180, 79, 199, 0.4);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(180,79,199,0.1);
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 100;
}

.share-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.share-format-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(var(--ink),0.35);
    padding: 4px 14px 8px;
    border-bottom: 1px solid rgba(var(--ink),0.07);
    margin-bottom: 4px;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(var(--ink),0.75);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.share-option:hover {
    background: rgba(180, 79, 199, 0.2);
    color: #f0c8ff;
}

.share-option:active {
    background: rgba(180, 79, 199, 0.35);
    transform: scale(0.97);
}

/* ── Option partenaire dans le dropdown d'export ── */
.share-partner-row {
    display: flex;
    align-items: center;
    padding: 6px 14px 8px;
    border-bottom: 1px solid rgba(var(--ink),0.07);
    margin-bottom: 4px;
}

.share-partner-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: rgba(var(--ink),0.6);
    user-select: none;
    white-space: nowrap;
}

.share-partner-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #b44fc7;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Bouton compte utilisateur ── */
.btn-account {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(180,79,199,0.35);
    background: rgba(180,79,199,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    color: var(--text-secondary);
    padding: 0;
    flex-shrink: 0;
}

.btn-account:hover {
    background: transparent;
    border-color: rgba(180,79,199,0.8);
    box-shadow: none;
    transform: scale(1.12);
    color: #d8a0ff;
}

/* ── Connecté : halo vert pulsé en permanence ── */
.btn-account.logged-in {
    border-color: rgba(46, 204, 113, 0.7);
    background: rgba(46, 204, 113, 0.08);
    animation: logged-in-halo 2.4s ease-in-out infinite;
}

@keyframes logged-in-halo {
    0%, 100% {
        box-shadow: 0 0 0   2px rgba(46, 204, 113, 0.0),
                    0 0 0   4px rgba(46, 204, 113, 0.0);
    }
    50% {
        box-shadow: 0 0 8px  3px rgba(46, 204, 113, 0.5),
                    0 0 16px 5px rgba(46, 204, 113, 0.2);
    }
}

/* Hover connecté : vortex uniquement sur l'anneau du bord */
.btn-account.logged-in:hover {
    border-color: transparent; /* le vortex remplace le bord */
    background: rgba(46, 204, 113, 0.10);
    transform: scale(1.1);
}

.btn-account.logged-in:hover::before {
    content: '';
    position: absolute;
    inset: -3px;           /* 42 × 42 px sur un bouton 36 × 36 */
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #001a08,
        #005520,
        #00cc44,
        #002e0f,
        #00e85a,
        #004d1a,
        #001a08
    );
    /* Centre transparent → seule la couronne de ~3 px est visible */
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 18px, black 19px);
            mask: radial-gradient(circle at 50% 50%, transparent 18px, black 19px);
    animation: green-vortex 1.6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes green-vortex {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.account-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    color: inherit;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.account-avatar svg {
    width: 16px;
    height: 16px;
}

.account-sync-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid var(--bg-primary, #0d0d1a);
    animation: sync-pulse 2s ease infinite;
}

.account-sync-dot.syncing {
    background: #f39c12;
    animation: spin-dot 0.8s linear infinite;
}

.account-sync-dot.error {
    background: #e74c3c;
    animation: none;
}

@keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin-dot {
    to { transform: rotate(360deg); }
}

/* ── Wrapper bouton compte (pour dropdown positionné) ── */
.account-btn-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Dropdown profil ── */
.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: #1e1e2e;
    border: 1px solid rgba(180, 79, 199, 0.3);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--ink),0.04);
    padding: 12px;
    z-index: 9999;
    animation: accdrop-in 0.15s ease;
}

@keyframes accdrop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Flèche vers le haut */
.account-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: #1e1e2e;
    border-left: 1px solid rgba(180,79,199,0.3);
    border-top:  1px solid rgba(180,79,199,0.3);
    transform: rotate(45deg);
}

/* Ligne utilisateur / partenaire */
.accdrop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}

/* Avatar coloré */
.accdrop-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(180,79,199,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid transparent; /* surcharge via JS avec la couleur membre */
    overflow: hidden;
}
.accdrop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.accdrop-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.accdrop-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #e8e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accdrop-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(var(--ink),0.45);
}

/* Dot de sync dans le dropdown */
.accdrop-sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
}
.accdrop-sync-dot.syncing { background: #f39c12; animation: spin-dot 0.8s linear infinite; }
.accdrop-sync-dot.error   { background: #e74c3c; }

.accdrop-badge {
    background: rgba(180,79,199,0.2);
    color: #d8a0ff;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.accdrop-divider {
    height: 1px;
    background: rgba(var(--ink),0.07);
    margin: 8px 0;
}

/* ── Permissions partenaire dans le dropdown compte ── */
.accdrop-perms {
    padding: 4px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.accdrop-perm-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    padding: 4px 0;
}
.accdrop-perm-check { display: none; }
.accdrop-perm-track {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: rgba(var(--ink),0.14);
    border: 1px solid rgba(var(--ink),0.12);
    transition: background 0.25s, border-color 0.25s;
}
.accdrop-perm-track::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    top: 1px;
    left: 1px;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.accdrop-perm-check:checked + .accdrop-perm-track {
    background: linear-gradient(135deg, #b44fc7, #8b2fc9);
    border-color: transparent;
}
.accdrop-perm-check:checked + .accdrop-perm-track::after {
    transform: translateX(14px);
}
.accdrop-perm-text {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Boutons d'action */
.accdrop-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: rgba(var(--ink),0.04);
    border: 1px solid rgba(var(--ink),0.07);
    border-radius: 9px;
    color: #d0d0e8;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 6px;
}
.accdrop-btn:last-child { margin-bottom: 0; }
.accdrop-btn:hover {
    background: rgba(var(--ink),0.09);
    border-color: rgba(var(--ink),0.15);
    color: #fff;
}

.accdrop-btn-danger {
    color: #e57373;
    border-color: rgba(229,115,115,0.2);
}
.accdrop-btn-danger:hover {
    background: rgba(229,115,115,0.1);
    border-color: rgba(229,115,115,0.4);
    color: #ff6b6b;
}

/* ── Modal gestion du compte ── */
.accsettings-content {
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(180,79,199,0.25);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.accsettings-body {
    overflow-y: auto;
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Profil en haut */
/* ── Profil lecture seule ── */
.accsettings-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0 20px;
    border-bottom: 1px solid rgba(var(--ink),0.07);
    margin-bottom: 4px;
}
.accsettings-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(180,79,199,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid transparent;
}
.accsettings-profile-rows {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    min-width: 0;
}
.accsettings-profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}
.accsettings-profile-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(var(--ink),0.4);
    min-width: 92px;
    flex-shrink: 0;
}
.accsettings-profile-value {
    font-size: 15.5px;
    color: #ede8ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.accsettings-edit-btn {
    -webkit-appearance: none;
    appearance: none;
    margin-left: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid rgba(180,79,199,0.35);
    background: rgba(180,79,199,0.1);
    color: #d9aeee;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.accsettings-edit-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    pointer-events: none;
}
.accsettings-edit-btn:hover {
    background: rgba(180,79,199,0.22);
    border-color: rgba(180,79,199,0.6);
    color: #f1d9ff;
    transform: translateY(-1px);
}
.accsettings-edit-btn.active {
    background: rgba(180,79,199,0.32);
    border-color: rgba(180,79,199,0.75);
    color: #fff;
}
.accsettings-edit-panel {
    padding: 16px 0 0;
    border-top: 1px solid rgba(var(--ink),0.06);
    margin-top: 12px;
}
.accsettings-edit-panel .accsettings-field label {
    font-size: 13px;
}
.accsettings-edit-panel input {
    font-size: 14px;
}
.accsettings-premium-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(var(--ink),0.07);
    color: rgba(var(--ink),0.4);
    border: 1px solid rgba(var(--ink),0.12);
}
.accsettings-premium-badge--active {
    background: rgba(255,195,0,0.15);
    color: #ffd740;
    border-color: rgba(255,195,0,0.35);
}

/* ── Section premium ── */
.accsettings-premium-section {
    background: rgba(255,195,0,0.04);
    border-radius: 10px;
    padding: 14px !important;
    border: 1px solid rgba(255,195,0,0.15) !important;
    margin-top: 16px;
}
.accsettings-premium-title {
    color: #ffd740 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.accsettings-premium-features {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.accsettings-premium-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(var(--ink),0.65);
}
.accsettings-premium-features li svg {
    flex-shrink: 0;
    color: #ffd740;
    opacity: 0.85;
}
.accsettings-btn-premium {
    background: rgba(255,195,0,0.14) !important;
    border-color: rgba(255,195,0,0.4) !important;
    color: #ffd740 !important;
}
.accsettings-btn-premium:hover {
    background: rgba(255,195,0,0.26) !important;
    border-color: rgba(255,195,0,0.65) !important;
}

/* ── Section premium actif (vert) ── */
.accsettings-premium-active-section {
    background: rgba(46,213,115,0.05) !important;
    border-radius: 10px;
    padding: 14px !important;
    border: 1px solid rgba(46,213,115,0.25) !important;
    margin-top: 16px;
}
.accsettings-premium-active-title {
    color: #2ed573 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.accsettings-premium-active-features li {
    color: rgba(var(--ink),0.75) !important;
}
.accsettings-premium-active-features li svg {
    color: #2ed573 !important;
    opacity: 1 !important;
}
.accsettings-btn-cancel-premium {
    background: rgba(var(--ink),0.04) !important;
    border-color: rgba(var(--ink),0.12) !important;
    color: rgba(var(--ink),0.4) !important;
    font-size: 12px !important;
    margin-top: 6px;
}
.accsettings-btn-cancel-premium:hover {
    background: rgba(229,115,115,0.1) !important;
    border-color: rgba(229,115,115,0.3) !important;
    color: #e57373 !important;
}

.accsettings-username {
    font-size: 15px;
    font-weight: 600;
    color: #e8e8f0;
}
.accsettings-email-display {
    font-size: 12px;
    color: rgba(var(--ink),0.45);
    margin-top: 2px;
}

/* Sections */
.accsettings-section {
    padding: 18px 0 0;
    border-top: 1px solid rgba(var(--ink),0.06);
    margin-top: 16px;
}
.accsettings-section:first-of-type {
    border-top: none;
    margin-top: 0;
}
.accsettings-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(180,79,199,0.9);
    margin-bottom: 14px;
}
.accsettings-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}
.accsettings-field label {
    font-size: 11.5px;
    color: rgba(var(--ink),0.5);
    font-weight: 500;
}
.accsettings-field input {
    background: rgba(var(--ink),0.05);
    border: 1px solid rgba(var(--ink),0.1);
    border-radius: 8px;
    padding: 9px 12px;
    color: #e8e8f0;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.accsettings-field input:focus {
    border-color: rgba(180,79,199,0.55);
    background: rgba(180,79,199,0.06);
}
.accsettings-error {
    font-size: 12px;
    color: #e57373;
    background: rgba(229,115,115,0.1);
    border: 1px solid rgba(229,115,115,0.2);
    border-radius: 7px;
    padding: 7px 10px;
    margin-bottom: 8px;
}
.accsettings-btn {
    width: 100%;
    padding: 10px;
    border-radius: 9px;
    border: 1px solid rgba(180,79,199,0.4);
    background: rgba(180,79,199,0.15);
    color: #e0b8ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 4px;
}
.accsettings-btn:hover {
    background: rgba(180,79,199,0.28);
    border-color: rgba(180,79,199,0.65);
}
.accsettings-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.accsettings-btn-secondary {
    background: rgba(var(--ink),0.04);
    border-color: rgba(var(--ink),0.1);
    color: rgba(var(--ink),0.6);
}
.accsettings-btn-secondary:hover {
    background: rgba(var(--ink),0.09);
    border-color: rgba(var(--ink),0.2);
    color: #fff;
}
.accsettings-link-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    padding: 8px 0 2px;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(var(--ink),0.4);
    text-decoration: underline;
    cursor: pointer;
}
.accsettings-link-btn:hover {
    color: #e0b8ff;
}

/* Zone de glisser-déposer pour l'import JSON */
.accsettings-import-drop {
    margin-top: 8px;
    padding: 16px 12px;
    border: 1.5px dashed rgba(180,79,199,0.45);
    border-radius: 10px;
    background: rgba(180,79,199,0.06);
    color: #c79bdf;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.accsettings-import-drop svg { opacity: 0.8; flex-shrink: 0; }
.accsettings-import-drop strong { color: #e0b8ff; }
.accsettings-import-drop.dragover {
    background: rgba(180,79,199,0.18);
    border-color: rgba(180,79,199,0.85);
    color: #f0d6ff;
    transform: scale(1.01);
}
/* Case "supprimer aussi les tâches du partenaire" (modal de réinitialisation) */
.reset-partner-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
    padding: 10px 14px;
    border: 1px solid rgba(180,79,199,0.4);
    border-radius: 10px;
    background: rgba(180,79,199,0.08);
    color: #e0b8ff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.reset-partner-check:hover {
    background: rgba(180,79,199,0.16);
    border-color: rgba(180,79,199,0.7);
}
.reset-partner-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #b44fc7;
    cursor: pointer;
}
.accsettings-btn-danger {
    background: rgba(229,115,115,0.1);
    border-color: rgba(229,115,115,0.3);
    color: #e57373;
}
.accsettings-btn-danger:hover {
    background: rgba(229,115,115,0.2);
    border-color: rgba(229,115,115,0.55);
    color: #ff6b6b;
}
.accsettings-danger-zone {
    border-top: 1px solid rgba(229,115,115,0.15) !important;
}
.accsettings-danger-title {
    color: rgba(229,115,115,0.8) !important;
}
/* ── Ligne indicatif + numéro ── */
.accsettings-phone-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.accsettings-phone-row input {
    flex: 1;
    min-width: 0;
}

/* ── Custom dropdown indicatif ── */
.accsettings-phone-select {
    position: relative;
    flex-shrink: 0;
    width: 110px;
}
.accsettings-phone-select-btn {
    width: 100%;
    height: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 12px;
    background: rgba(var(--ink),0.05);
    border: 1px solid rgba(var(--ink),0.1);
    border-radius: 8px;
    color: #e8e8f0;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
}
.accsettings-phone-select-btn:hover,
.accsettings-phone-select-btn:focus {
    border-color: rgba(180,79,199,0.55);
    background: rgba(180,79,199,0.06);
    outline: none;
}
.accsettings-phone-select-btn svg {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.2s;
}
.accsettings-phone-select-btn.open svg {
    transform: rotate(180deg);
}
/* Panel (fixed pour éviter le clipping overflow) */
.accsettings-phone-select-panel {
    position: fixed;
    z-index: 99999;
    background: rgba(12,8,35,0.98);
    border: 1px solid rgba(180,79,199,0.35);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(180,79,199,0.08);
    display: none;
    flex-direction: column;
    min-width: 230px;
    max-height: 260px;
}
.accsettings-phone-select-panel.open {
    display: flex;
}
.accsettings-phone-search {
    background: rgba(var(--ink),0.04);
    border: none;
    border-bottom: 1px solid rgba(var(--ink),0.07);
    color: #e8e8f0;
    font-size: 12.5px;
    padding: 10px 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.accsettings-phone-search::placeholder { color: rgba(var(--ink),0.28); }
.accsettings-phone-options {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,79,199,0.3) transparent;
}
.accsettings-phone-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
    color: rgba(var(--ink),0.78);
    cursor: pointer;
    transition: background 0.1s;
}
.accsettings-phone-option:hover {
    background: rgba(180,79,199,0.14);
    color: #fff;
}
.accsettings-phone-option.selected {
    background: rgba(180,79,199,0.11);
    color: #e0b8ff;
}
.accsettings-phone-option-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.accsettings-phone-select-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; display: inline-block; vertical-align: middle; margin-right: 2px; }
.accsettings-phone-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accsettings-phone-option-code { color: rgba(var(--ink),0.38); font-size: 12px; flex-shrink: 0; }

/* ── Vérification SMS ── */
.accsettings-sms-hint {
    font-size: 12.5px;
    color: rgba(var(--ink),0.5);
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(180,79,199,0.07);
    border: 1px solid rgba(180,79,199,0.15);
    border-radius: 8px;
    line-height: 1.5;
}
.accsettings-sms-hint strong {
    color: #e0b8ff;
    font-weight: 600;
}
.accsettings-sms-input {
    font-size: 22px !important;
    letter-spacing: 6px !important;
    text-align: center;
    font-weight: 600 !important;
    padding: 12px !important;
}
.accsettings-btn svg {
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}

.accsettings-danger-desc {
    font-size: 11.5px;
    color: rgba(var(--ink),0.35);
    margin: 0 0 12px;
    line-height: 1.5;
}

/* ── Modal authentification ── */
.auth-modal-content {
    max-width: 420px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(180,79,199,0.25);
}

.auth-view {
    padding: 32px 28px 28px;
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.auth-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.auth-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.75;
    margin: 0;
    line-height: 1.5;
}

.auth-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(180,79,199,0.06);
    border-radius: 12px;
    border: 1px solid rgba(180,79,199,0.12);
}

.auth-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-benefit-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-btn:active { transform: scale(0.97); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-btn-primary {
    background: linear-gradient(135deg, #b44fc7, #8b2fc9);
    color: white;
    box-shadow: 0 4px 16px rgba(180,79,199,0.35);
}

.auth-btn-primary:hover { background: linear-gradient(135deg, #c260d8, #9b3fd9); }

.auth-btn-google {
    background: white;
    color: #3c4043;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}

.auth-btn-google:hover { background: #f8f8f8; }

.auth-btn-secondary {
    background: rgba(var(--ink),0.07);
    color: var(--text-primary);
    border: 1px solid rgba(var(--ink),0.12);
}

.auth-btn-secondary:hover { background: rgba(var(--ink),0.12); }

.auth-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    opacity: 0.7;
}

.auth-btn-ghost:hover { opacity: 1; text-decoration: underline; }

.auth-btn-link {
    background: transparent;
    color: #b44fc7;
    font-size: 13px;
    font-weight: 500;
    padding: 4px;
}

.auth-btn-link:hover { text-decoration: underline; }

.auth-btn-danger {
    background: rgba(231,76,60,0.12);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,0.25);
}

.auth-btn-danger:hover { background: rgba(231,76,60,0.2); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(var(--ink),0.1);
}

.auth-view-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.auth-view-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.auth-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(var(--ink),0.1);
    background: rgba(var(--ink),0.05);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.auth-back-btn:hover { background: rgba(var(--ink),0.12); }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    opacity: 0.8;
}

.auth-field input {
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--ink),0.12);
    background: rgba(var(--ink),0.05);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-field input:focus {
    border-color: rgba(180,79,199,0.6);
    background: rgba(180,79,199,0.07);
}

.auth-error {
    font-size: 13px;
    color: #e74c3c;
    background: rgba(231,76,60,0.1);
    border: 1px solid rgba(231,76,60,0.2);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0;
}

/* Vue vérification e-mail */
.auth-verify-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 12px;
    animation: float-icon 2s ease-in-out infinite;
}

@keyframes float-icon {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-6px); }
}

.auth-verify-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}

.auth-verify-desc {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
}

.auth-verify-desc strong {
    color: var(--text-primary);
    font-weight: 600;
}

.auth-verify-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(180,79,199,0.07);
    border: 1px solid rgba(180,79,199,0.15);
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-verify-status.verified {
    background: rgba(46,204,113,0.1);
    border-color: rgba(46,204,113,0.3);
    color: #2ecc71;
}

.auth-verify-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(180,79,199,0.3);
    border-top-color: #b44fc7;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.auth-verify-status.verified .auth-verify-spinner {
    border: none;
    animation: none;
    width: auto;
    height: auto;
    font-size: 16px;
}

.auth-verify-status.verified .auth-verify-spinner::before {
    content: '✅';
}

.auth-verify-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Profil connecté */
.auth-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(var(--ink),0.08);
}

.auth-profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b44fc7, #8b2fc9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.auth-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-profile-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.auth-profile-email {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: 2px;
}

.auth-profile-status {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.auth-status-dot.synced { background: #2ecc71; }
.auth-status-dot.syncing { background: #f39c12; animation: sync-pulse 0.6s ease infinite; }
.auth-status-dot.error { background: #e74c3c; }

.auth-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Bouton paramètres (engrenage nu) ── */
.btn-settings {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: none;
    background: transparent;
    color: #7dd3fc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none;
    padding: 0;
}

.btn-settings:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.btn-settings svg {
    width: 24px;
    height: 24px;
    transition: color 0.25s ease, filter 0.25s ease;
    filter: drop-shadow(0 0 0px rgba(56, 189, 248, 0));
}

.btn-settings:hover svg {
    color: #e0f2fe;
    filter: drop-shadow(0 0 7px rgba(56, 189, 248, 0.85));
    animation: gear-spin-infinite 2s linear infinite;
}

@keyframes gear-spin-infinite {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.btn-settings:active svg {
    animation: none;
    transform: scale(0.88);
    transition: transform 0.1s ease;
}

/* ── Layout corps calendrier ── */
.calendar-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Zoom + Undo/Redo sur la même ligne ── */
.zoom-undo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Barre de zoom horizontale (dans header-left) ── */
.zoom-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.zoom-icon {
    color: rgba(180, 79, 199, 0.7);
    flex-shrink: 0;
}

.zoom-percent {
    font-size: 11px;
    font-weight: 600;
    color: rgba(180, 79, 199, 0.9);
    min-width: 32px;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    user-select: none;
}

.zoom-percent:hover {
    color: #e0aaff;
    transform: scale(1.15);
}

.zoom-percent:active {
    transform: scale(0.95);
}

#zoomSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 110px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, #b44fc7 50%, rgba(180,79,199,0.25) 50%);
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

#zoomSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b44fc7;
    box-shadow: 0 0 0 3px rgba(180,79,199,0.25), 0 2px 6px rgba(0,0,0,0.4);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#zoomSlider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px rgba(180,79,199,0.3), 0 2px 8px rgba(0,0,0,0.5);
}

#zoomSlider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.calendar-wrapper {
    display: flex;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(var(--ink),0.1);
    border-radius: 12px;
    background-color: var(--bg-secondary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    align-items: flex-start;
}

.calendar-zoom-inner {
    display: flex;
    width: 100%;
    transform-origin: top left;
}

.calendar-zoom-inner.day-view-mode {
    max-width: 760px;
    margin: 0 auto;
}

.calendar-zoom-inner.day-view-mode .time-slot-header {
    display: none !important;
}

/* =============================================
   TIME COLUMN
   ============================================= */

.time-column {
    width: 80px;
    border-right: 1px solid rgba(var(--ink),0.1);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(var(--ink),0.05), rgba(var(--ink),0.02));
}

.time-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid rgba(var(--ink),0.1);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, rgba(var(--ink),0.05), rgba(var(--ink),0.02));
}

.time-slots {
    display: flex;
    flex-direction: column;
    position: relative;
}

.time-slot {
    height: 50px;
    border: none;
    border-top: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
    box-sizing: border-box;
    margin: 0;
    line-height: 1;
    flex-shrink: 0;
}

.time-slot-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg-secondary);
}

/* =============================================
   DAY VIEW NAV
   ============================================= */

.day-view-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
    flex-shrink: 0;
    z-index: 40;
    position: relative;
}

.day-view-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(155,89,182,0.15);
    color: #b57de8;
    border: 1px solid rgba(155,89,182,0.3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    position: relative;
    z-index: 1;
}
.day-view-back:hover {
    background: rgba(155,89,182,0.28);
    color: #d0a6f5;
}

/* Simple day view: colored title + discreet "Vue semaine" link */
.day-view-nav.day-simple {
    justify-content: center;
    border-bottom: none;
}
.day-view-nav.day-simple .day-view-back {
    position: absolute;
    left: 14px;
    z-index: 2;
    background: none;
    border: none;
    color: #c084fc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.18s, background 0.18s;
    white-space: nowrap;
    outline: none;
}
.day-view-nav.day-simple .day-view-back:hover {
    color: #d8a8ff;
    background: rgba(155,89,182,0.12);
}

/* Side chevron buttons for day navigation — position set by JS */
.day-side-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(155,89,182,0.18);
    border: 1.5px solid rgba(192,132,252,0.45);
    border-radius: 50%;
    color: #c084fc;
    cursor: pointer;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    outline: none;
    user-select: none;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.day-side-arrow svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.day-side-arrow:hover {
    background: rgba(155,89,182,0.40);
    border-color: rgba(192,132,252,0.80);
    transform: translateY(-50%) scale(1.12);
}
.day-side-arrow:focus {
    outline: none;
}

.day-view-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    letter-spacing: 0.01em;
}


.day-view-arrows {
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.day-view-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ink),0.06);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    line-height: 1;
}
.day-view-arrow:hover {
    background: rgba(155,89,182,0.2);
    border-color: rgba(155,89,182,0.4);
    color: #d0a6f5;
}


/* =============================================
   CALENDAR GRID
   ============================================= */

.calendar-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: visible;
    border-left: 1px solid var(--border-color);
    align-content: start;
}

.calendar-grid.day-view-mode {
    grid-template-columns: 1fr;
}

/* Vues 5j/3j : colonnes à largeur naturelle, centrées plutôt qu'étirées
   sur les 7 pistes par défaut (repeat(7, 1fr)). */
.calendar-grid.density-5 {
    grid-template-columns: repeat(5, minmax(140px, 220px));
    justify-content: center;
}
.calendar-grid.density-3 {
    grid-template-columns: repeat(3, minmax(180px, 320px));
    justify-content: center;
}

.calendar-grid.day-view-mode .day-header {
    display: none;
}

/* Day header clickable hint in week view */
.day-header.day-header-clickable {
    cursor: pointer;
}
.day-header.day-header-clickable:hover {
    filter: brightness(1.18);
}

.day-column {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
}

.day-column:last-child {
    border-right: none;
}

.day-header {
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding: var(--spacing-xs);
    font-weight: 700;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 30;
}

.day-header[data-day="0"] {
    background-color: var(--day-dimanche);
    color: white;
}

.day-header[data-day="1"] {
    background-color: var(--day-lundi);
    color: white;
}

.day-header[data-day="2"] {
    background-color: var(--day-mardi);
    color: white;
}

.day-header[data-day="3"] {
    background-color: var(--day-mercredi);
    color: #000;
}

.day-header[data-day="4"] {
    background-color: var(--day-jeudi);
    color: white;
}

.day-header[data-day="5"] {
    background-color: var(--day-vendredi);
    color: white;
}

.day-header[data-day="6"] {
    background-color: var(--day-samedi);
    color: white;
}

.day-name {
    font-weight: 700;
    font-size: var(--font-size-md);
}

.day-date {
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-top: 2px;
}

.day-slots {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    margin: 0;
}


.day-slot {
    flex: none;
    position: relative;
    height: 50px;
    background-color: var(--bg-secondary);
    transition: background-color 0.2s ease;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(var(--ink),0.1);
    border-radius: 12px;
    box-sizing: border-box;
}

/* 30-min mode: pair of slots forms one unified hour block */
.day-slot.hour-slot-top {
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    margin-bottom: 0;
}

.day-slot.hour-slot-bottom {
    border-radius: 0 0 12px 12px;
    border-top: 1px solid rgba(128, 128, 128, 0.05);
    margin-top: 0;
}

/* 15-min mode: four slots form one unified hour block */
.day-slot.quarter-slot-first {
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}

.day-slot.quarter-slot-mid {
    border-radius: 0;
    border-top: 1px solid rgba(128, 128, 128, 0.05);
    border-bottom: none;
}

.day-slot.quarter-slot-last {
    border-radius: 0 0 12px 12px;
    border-top: 1px solid rgba(128, 128, 128, 0.05);
}

.day-slot:hover {
    background-color: var(--bg-tertiary);
    border-color: rgba(var(--ink),0.2);
}

.day-slot.drag-over {
    border-color: var(--accent);
}

/* Highlight overlay — lives on ::after so tasks (children) are NEVER affected by opacity */
.day-slot::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(var(--accent-rgb), 0.38);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.day-slot.drag-over::after {
    opacity: 1;
}

.day-slot:last-child {
    border-bottom: 2px solid rgba(var(--ink),0.1);
}

/* Force subdivision borders to stay gray */
.day-slot.hour-slot-bottom,
.day-slot.quarter-slot-mid,
.day-slot.quarter-slot-last {
    border-top-color: rgba(128, 128, 128, 0.05) !important;
}

/* Day-specific slot colors — use color-mix so they follow the CSS variable */
.day-column[data-day="0"] .day-slot { border-color: color-mix(in srgb, var(--day-dimanche) 30%, transparent); }
.day-column[data-day="1"] .day-slot { border-color: color-mix(in srgb, var(--day-lundi)    30%, transparent); }
.day-column[data-day="2"] .day-slot { border-color: color-mix(in srgb, var(--day-mardi)    30%, transparent); }
.day-column[data-day="3"] .day-slot { border-color: color-mix(in srgb, var(--day-mercredi) 30%, transparent); }
.day-column[data-day="4"] .day-slot { border-color: color-mix(in srgb, var(--day-jeudi)    30%, transparent); }
.day-column[data-day="5"] .day-slot { border-color: color-mix(in srgb, var(--day-vendredi) 30%, transparent); }
.day-column[data-day="6"] .day-slot { border-color: color-mix(in srgb, var(--day-samedi)   30%, transparent); }

/* =============================================
   SCHEDULED TASKS (Placed in Calendar)
   ============================================= */

/* ---------------------------------------------------------------
   Tâche qui déborde de la plage horaire affichée.

   Le côté tronqué perd son arrondi ET sa bordure : c'est ce qui fait
   lire « la tâche continue hors de l'écran » au lieu de « elle commence
   ici ». Les heures affichées dans le bloc restent les vraies (voir
   renderScheduledTask dans script.js) — on ne tronque que le dessin.

   Le liseré translucide rappelle le sens du débordement sans ajouter
   de texte dans un bloc déjà étroit.
   --------------------------------------------------------------- */
.scheduled-task.task-overflow-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, 0.38);
}

.scheduled-task.task-overflow-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.38);
}

/* Débordement des deux côtés : la tâche traverse toute la journée visible. */
.scheduled-task.task-overflow-top.task-overflow-bottom {
    box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, 0.38),
                inset 0 -3px 0 0 rgba(255, 255, 255, 0.38);
}

.scheduled-task {
    position: absolute;
    left: 0;
    width: calc(100% - 4px);
    color: white;
    border: 2px solid;
    border-radius: 24px;
    padding: 0;
    cursor: default;
    user-select: none;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    transition: top 0.3s ease, height 0.3s ease, left 160ms ease-out, width 160ms ease-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    line-height: 1.2;
    word-wrap: break-word;
    z-index: 10;
    box-sizing: border-box;
}

.task-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.task-time {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    line-height: 1;
    flex-shrink: 0;
}

.task-time-start {
    padding-top: 0;
}

.task-time-end {
    padding-bottom: 0;
}

.task-name {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    writing-mode: horizontal-tb;
}
.task-name-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    vertical-align: middle;
}

.task-separator {
    width: 80%;
    height: 1px;
    flex-shrink: 0;
    background-color: rgba(var(--ink), 0.5);
    margin: 2px auto 0;
}

.task-group-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.task-group-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.task-group-bottom .task-separator {
    margin: 0 auto 2px;
}

.scheduled-task.resizing {
    z-index: 1000;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    transition: none !important;
}

/* Resize Handles - Modern drag indicator */
.resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    cursor: var(--cursor-ns-resize);
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.resize-handle::before {
    content: '';
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(var(--ink),0.6) 20%, rgba(var(--ink),0.6) 80%, transparent);
    border-radius: 2px;
}

.resize-handle-top {
    top: 0;
    height: 10px;
    z-index: 50;
}

.resize-handle-bottom {
    bottom: 0;
    height: 10px;
    z-index: 51;
}

.scheduled-task:hover .resize-handle {
    opacity: 1;
}

body.ctrl-held .scheduled-task {
    cursor: copy;
}

/* Default task colors - apply ONLY if NO inline style background-color exists */
.day-column[data-day="0"] .scheduled-task:not([style*="background-color"]) {
    background-color: var(--day-dimanche);
    border-color: color-mix(in srgb, var(--day-dimanche) 80%, white);
}
.day-column[data-day="1"] .scheduled-task:not([style*="background-color"]) {
    background-color: var(--day-lundi);
    border-color: color-mix(in srgb, var(--day-lundi) 80%, white);
}
.day-column[data-day="2"] .scheduled-task:not([style*="background-color"]) {
    background-color: var(--day-mardi);
    border-color: color-mix(in srgb, var(--day-mardi) 80%, white);
    color: #000;
}
.day-column[data-day="3"] .scheduled-task:not([style*="background-color"]) {
    background-color: var(--day-mercredi);
    border-color: color-mix(in srgb, var(--day-mercredi) 80%, white);
    color: #000;
}
.day-column[data-day="4"] .scheduled-task:not([style*="background-color"]) {
    background-color: var(--day-jeudi);
    border-color: color-mix(in srgb, var(--day-jeudi) 80%, white);
}
.day-column[data-day="5"] .scheduled-task:not([style*="background-color"]) {
    background-color: var(--day-vendredi);
    border-color: color-mix(in srgb, var(--day-vendredi) 80%, white);
}
.day-column[data-day="6"] .scheduled-task:not([style*="background-color"]) {
    background-color: var(--day-samedi);
    border-color: color-mix(in srgb, var(--day-samedi) 80%, white);
}

.scheduled-task:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.scheduled-task:active {
    cursor: var(--cursor-grabbing);
    opacity: 0.95;
}


.scheduled-task.conflict {
    background-color: #f44336;
    border-color: #d32f2f;
}

/* =============================================
   MODAL DIALOG
   ============================================= */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px var(--shadow);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-secondary);
}

.modal-header h2 {
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: var(--text-primary);
}

#editTaskBtn:hover {
    color: #b44fc7 !important;
    background: rgba(180,79,199,0.12) !important;
}

.char-counter {
    text-align: right;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    transition: color 0.2s;
    letter-spacing: 0.2px;
}
.char-counter.warn  { color: #f39c12; }
.char-counter.limit { color: #e74c3c; font-weight: 700; }

.objective-viewdensity-row {
    display: flex;
    align-items: stretch;
}
.objective-viewdensity-row .week-objective-bar {
    flex: 1;
    min-width: 0;
}

.view-density-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
    background: rgba(var(--ink),0.04);
    border: 1px solid rgba(180,79,199,0.25);
    border-radius: 999px;
    flex-shrink: 0;
    align-self: center;
}
[data-theme="light"] .view-density-bar {
    background: rgba(0,0,0,0.035);
    border-color: rgba(155,89,182,0.3);
}
.view-density-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
}
.vd-bars {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 12px;
}
.vd-bars i {
    display: block;
    width: 3px;
    border-radius: 2px;
    opacity: 0.9;
}
.vd-bars i:nth-child(1) { height: 60%; }
.vd-bars i:nth-child(2) { height: 100%; }
.vd-bars i:nth-child(3) { height: 75%; }
.vd-bars i:nth-child(4) { height: 45%; }
.vd-bars i:nth-child(5) { height: 90%; }
.vd-bars i:nth-child(6) { height: 65%; }
.vd-bars i:nth-child(7) { height: 100%; }
.view-density-btn.active .vd-bars i {
    opacity: 1;
    box-shadow: 0 0 4px currentColor;
}
.view-density-btn:hover:not(.active) {
    background: rgba(180,79,199,0.14);
    color: var(--text-primary);
}
.view-density-btn.active {
    background: linear-gradient(135deg, #b44fc7, #8b2fc9);
    color: #fff;
    box-shadow: 0 0 12px rgba(180,79,199,0.5);
}
.view-density-btn:active {
    transform: scale(0.94);
}

.task-name-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.task-name-suggestion-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(180,79,199,0.35);
    background: rgba(180,79,199,0.08);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    user-select: none;
}
.task-name-suggestion-chip:hover {
    background: linear-gradient(135deg, rgba(180,79,199,0.35), rgba(139,47,201,0.3));
    border-color: #b44fc7;
    color: #f0d0ff;
}
.task-name-suggestion-chip:active {
    transform: scale(0.94);
}

#saveTaskNotesBtn:hover,
#createTaskBtn:hover,
#createQuickTaskBtn:hover {
    box-shadow: 0 0 28px rgba(155,89,182,0.85), 0 6px 16px rgba(0,0,0,0.35) !important;
    transform: translateY(-1px);
}

#closeTaskNotesBtnCancel:hover,
#cancelTaskBtn:hover,
#cancelQuickTaskBtn:hover {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ── Modal prévisualisation PDF ── */
.pdf-preview-modal-content {
    width: 92vw;
    max-width: 1200px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.pdf-preview-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background: var(--bg-secondary);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pdf-preview-page-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pdf-preview-label {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.6;
}

.pdf-preview-page {
    /* Ratio A4 paysage : 297/210 */
    width: 100%;
    max-width: 960px;
    background: #1a1a2e;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 1px solid rgba(var(--ink),0.08);
    aspect-ratio: 297 / 210;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-preview-page img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Toast notifications ── */
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: none;
    white-space: nowrap;
}

.toast.success { background: linear-gradient(135deg, #27ae60, #1e8449); }
.toast.error   { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.toast.info    { background: linear-gradient(135deg, #8b2fc9, #b44fc7); }

/* Tooltip nom de tâche tronqué */
#taskNameTooltip {
    background: rgba(18, 6, 36, 0.96);
    color: #f0e0ff;
    padding: 5px 11px 6px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 0 1px rgba(180,79,199,0.35);
    border: 1px solid rgba(180,79,199,0.3);
    pointer-events: none;
    transition: opacity 0.12s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.toast.hiding {
    animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-16px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0)    scale(1);   }
    to   { opacity: 0; transform: translateY(-10px) scale(0.9); }
}

/* ── Modal format export (sous-modal) ── */
.export-format-modal-content {
    max-width: 400px;
}

.export-format-body {
    padding: 12px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.export-format-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(var(--ink),0.08);
    background: rgba(var(--ink),0.03);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    width: 100%;
}

.export-format-option:hover {
    background: rgba(180,79,199,0.10);
    border-color: rgba(180,79,199,0.35);
}

.export-format-option:active {
    transform: scale(0.98);
}

.export-format-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(180,79,199,0.14);
    border: 1px solid rgba(180,79,199,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d8a0ff;
    flex-shrink: 0;
}

.export-format-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.export-format-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.export-format-desc {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.75;
}

.export-format-arrow {
    color: rgba(var(--ink),0.3);
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.export-format-option:hover .export-format-arrow {
    color: #d8a0ff;
    transform: translateX(2px);
}

/* ── Modal export PDF ── */
.export-modal-content {
    max-width: 480px;
}

/* ── Barre options export (format + partenaire) ── */
.export-options-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px 12px;
    border-bottom: 1px solid rgba(var(--ink),0.07);
    flex-wrap: wrap;
}

.export-fmt-group {
    display: flex;
    gap: 4px;
    background: rgba(var(--ink),0.05);
    border-radius: 10px;
    padding: 3px;
}

.export-fmt-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(var(--ink),0.45);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.export-fmt-btn.active {
    background: rgba(180, 79, 199, 0.3);
    color: #f0c8ff;
    font-weight: 600;
}

.export-fmt-btn:hover:not(.active) {
    background: rgba(var(--ink),0.08);
    color: rgba(var(--ink),0.75);
}

.export-partner-toggle {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.export-partner-label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 12px;
    color: rgba(var(--ink),0.55);
    user-select: none;
    white-space: nowrap;
}

.export-partner-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #b44fc7;
    cursor: pointer;
    flex-shrink: 0;
}

.export-modal-body {
    padding: 20px;
    gap: 0;
}

.export-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    border-radius: 14px;
    background: rgba(var(--ink),0.04);
    border: 1px solid rgba(var(--ink),0.07);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.export-card:hover {
    background: rgba(180,79,199,0.08);
    border-color: rgba(180,79,199,0.25);
}

.export-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(180,79,199,0.15);
    border: 1px solid rgba(180,79,199,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d8a0ff;
    flex-shrink: 0;
}

.export-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.export-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.export-card-week {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.export-week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-nav-arrow {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(var(--ink),0.12);
    background: rgba(var(--ink),0.06);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.export-nav-arrow:hover {
    background: rgba(180,79,199,0.25);
    border-color: rgba(180,79,199,0.5);
}

.export-download-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #b44fc7, #8b2fc9);
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(139,47,201,0.4);
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.export-download-btn:hover {
    background: linear-gradient(135deg, #c55fd8, #9b3fdc);
    box-shadow: 0 5px 16px rgba(139,47,201,0.55);
    transform: translateY(-1px);
}

.export-download-btn:active {
    transform: translateY(0) scale(0.97);
}

.export-divider {
    height: 1px;
    background: rgba(var(--ink),0.06);
    margin: 12px 0;
}

/* ── Multi-sélection de semaines ── */
.export-card-multi {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.export-multi-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.export-selected-count {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #b44fc7;
    margin-top: 2px;
}

.export-weeks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.export-week-chip {
    padding: 8px 6px;
    border-radius: 10px;
    border: 1.5px solid rgba(var(--ink),0.1);
    background: rgba(var(--ink),0.04);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    line-height: 1.4;
    user-select: none;
}

.export-week-chip:hover {
    background: rgba(180,79,199,0.15);
    border-color: rgba(180,79,199,0.4);
    color: var(--text-primary);
}

.export-week-chip.current-week {
    border-color: rgba(180,79,199,0.4);
    color: var(--text-primary);
}

.export-week-chip.selected {
    background: linear-gradient(135deg, rgba(180,79,199,0.35), rgba(139,47,201,0.3));
    border-color: #b44fc7;
    color: #f0d0ff;
    box-shadow: 0 2px 10px rgba(139,47,201,0.3);
}

.export-week-chip.selected::after {
    content: ' ✓';
}

.export-week-chip:active {
    transform: scale(0.96);
}

.export-multi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.export-grid-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-nav-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.export-download-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--bg-secondary);
}

/* =============================================
   SETTINGS GROUPS
   ============================================= */

.settings-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ── Regroupement de plusieurs settings-group sous un même titre ── */
.settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(var(--ink),0.08);
}
.settings-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(180,79,199,0.9);
    margin: 0;
}

/* ── Theme Mode Switcher ── */
.theme-mode-switcher {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

/* Lignes fines en haut et en bas */
.theme-mode-switcher::before,
.theme-mode-switcher::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%, rgba(180,79,199,0.35) 20%,
        rgba(180,79,199,0.35) 80%, transparent 100%);
}
.theme-mode-switcher::before { top: 0; }
.theme-mode-switcher::after  { bottom: 0; }

/* Séparateur diagonal — masqué */
.theme-mode-sep {
    display: none;
}

.theme-mode-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    outline: none;
    background: transparent;
    cursor: default;
    border-radius: 0;
    transition: transform 0.18s ease;
    user-select: none;
    pointer-events: none;
}

.theme-mode-btn:hover,
.theme-mode-btn:focus,
.theme-mode-btn:focus-visible,
.theme-mode-btn:active,
.theme-mode-btn.active {
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.theme-mode-btn:disabled {
    cursor: not-allowed;
}
.theme-mode-btn:disabled .theme-mode-icon-wrap {
    filter: grayscale(1) brightness(0.4) !important;
    opacity: 0.5;
}

.theme-mode-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    position: relative;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.25s ease, background 0.25s ease;
}

.theme-mode-icon-wrap span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    line-height: 1;
    display: block;
    user-select: none;
}

.theme-slash {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1px;
    background: rgba(var(--ink),0.15);
    margin: 0 12px;
    pointer-events: none;
    user-select: none;
    font-size: 0;
}

/* Sombre — inactif */
.theme-mode-btn[data-mode="dark"] .theme-mode-icon-wrap {
    background: rgba(var(--ink),0.06);
    box-shadow: none;
    filter: grayscale(0.3) brightness(0.65);
}
/* Sombre — actif */
.theme-mode-btn[data-mode="dark"].active .theme-mode-icon-wrap {
    background: rgba(120,60,180,0.28);
    box-shadow: 0 0 20px rgba(180,79,199,0.5);
    filter: none;
    transform: scale(1.12);
}

/* Lumineux — inactif */
.theme-mode-btn[data-mode="light"] .theme-mode-icon-wrap {
    background: rgba(var(--ink),0.06);
    box-shadow: none;
    filter: grayscale(0.5) brightness(0.55);
}
/* Lumineux — actif */
.theme-mode-btn[data-mode="light"].active .theme-mode-icon-wrap {
    background: rgba(246,201,14,0.18);
    box-shadow: 0 0 22px rgba(246,180,10,0.55);
    filter: none;
    transform: scale(1.12);
}

.theme-mode-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.22s ease;
    color: rgba(var(--ink),0.3);
}
.theme-mode-btn.active .theme-mode-label {
    color: rgba(var(--ink),0.85);
}

.settings-group label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* ── Granularité : cartes radio modernes ── */
.radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    margin-left: 0;
    padding: 4px 0;
}

/* Masquer le bouton radio natif */
.radio-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.radio-group label {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: 14px;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: border-color 0.18s ease, background 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    user-select: none;
    text-align: center;
    white-space: normal;
    margin: 0;
}

.radio-group label .gran-icon {
    font-size: 28px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.15s;
}

@keyframes gran-icon-tick {
    0%   { transform: scale(1)    rotate(0deg); }
    25%  { transform: scale(1.35) rotate(-18deg); }
    55%  { transform: scale(1.2)  rotate(12deg); }
    75%  { transform: scale(1.08) rotate(-6deg); }
    100% { transform: scale(1)    rotate(0deg); }
}

.radio-group input[type="radio"]:checked + label .gran-icon {
    animation: gran-icon-tick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radio-group label .gran-label {
    line-height: 1.3;
}

.radio-group label:hover {
    border-color: rgba(102, 126, 234, 0.55);
    color: var(--text-primary);
    background: rgba(102, 126, 234, 0.08);
    transform: translateY(-2px);
}

.radio-group input[type="radio"]:checked + label {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.22), rgba(102, 126, 234, 0.07));
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(102, 126, 234, 0.22);
    transform: translateY(-1px);
}

input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

/* Les radios de la granularité sont cachés — annuler les règles globales */
.radio-group input[type="radio"] {
    width: 0;
    height: 0;
    cursor: default;
}

/* Les toggle-inputs annulent aussi les règles globales checkbox */
.toggle-input {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════
   TOGGLE SWITCH MODERNE
   ══════════════════════════════════════════ */

.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(var(--ink),0.07);
    background: rgba(var(--ink),0.03);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    font-weight: 500;
    color: var(--text-secondary);
}

.toggle-row:hover {
    background: rgba(180,79,199,0.08);
    border-color: rgba(180,79,199,0.3);
    color: var(--text-primary);
}

.toggle-row:active {
    transform: scale(0.985);
}

/* Piste du toggle */
.toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: rgba(var(--ink),0.12);
    border: 1.5px solid rgba(var(--ink),0.12);
    transition: background 0.3s cubic-bezier(0.4,0,0.2,1),
                border-color 0.3s,
                box-shadow 0.3s;
}

/* Bouton blanc glissant */
.toggle-track::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
                background 0.3s;
}

/* État activé */
.toggle-input:checked + .toggle-track {
    background: linear-gradient(135deg, #b44fc7, #8b2fc9);
    border-color: transparent;
    box-shadow: 0 0 14px rgba(139,47,201,0.45);
}

.toggle-input:checked + .toggle-track::after {
    transform: translateX(20px);
    background: #fff;
}

/* Texte du toggle */
.toggle-text {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    transition: color 0.2s;
}

.toggle-icon {
    font-size: 17px;
    line-height: 1;
}

/* Quand actif → texte en blanc */
.toggle-row:has(.toggle-input:checked) {
    border-color: rgba(180,79,199,0.25);
    background: rgba(139,47,201,0.07);
    color: var(--text-primary);
}

/* ══════════════════════════════════════════
   SELECT PLAGE HORAIRE
   ══════════════════════════════════════════ */

.settings-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.time-range-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.time-select-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.time-select-sublabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(180,79,199,0.85);
    padding-left: 2px;
}

.time-range-sep {
    font-size: 18px;
    color: var(--text-secondary);
    padding-bottom: 10px;
    opacity: 0.5;
}

.time-select-wrapper {
    position: relative;
}

/* ── Trigger (bouton visible) ── */
.time-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: rgba(var(--ink),0.05);
    border: 1.5px solid rgba(var(--ink),0.1);
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}

.time-dropdown-trigger:hover {
    border-color: rgba(180,79,199,0.5);
    background: rgba(180,79,199,0.07);
}

.time-select-wrapper.open .time-dropdown-trigger {
    border-color: #b44fc7;
    box-shadow: 0 0 0 3px rgba(180,79,199,0.2);
    background: rgba(180,79,199,0.09);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.time-dropdown-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Flèche SVG */
.time-select-arrow {
    width: 12px;
    height: 8px;
    color: rgba(180,79,199,0.8);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), color 0.2s;
}

.time-select-wrapper.open .time-select-arrow {
    transform: rotate(180deg);
    color: #b44fc7;
}

/* Dropup : flèche pointe vers le haut par défaut */
.dropup .time-select-arrow {
    transform: rotate(180deg);
}
.dropup.open .time-select-arrow {
    transform: rotate(0deg);
}

/* ── Liste déroulante ── */
.time-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1e1e2e;
    border: 1.5px solid #b44fc7;
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    scrollbar-width: thin;
    scrollbar-color: rgba(180,79,199,0.4) transparent;
}

.time-select-wrapper.open .time-dropdown-list {
    display: block;
    animation: dropdownOpen 0.18s cubic-bezier(0.4,0,0.2,1);
}

@keyframes dropdownOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.time-dropdown-list::-webkit-scrollbar { width: 4px; }
.time-dropdown-list::-webkit-scrollbar-track { background: transparent; }
.time-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(180,79,199,0.4);
    border-radius: 2px;
}

/* ── Dropup : liste s'ouvre vers le haut ── */
.dropup.open .time-dropdown-list {
    animation: dropupOpen 0.18s cubic-bezier(0.4,0,0.2,1);
}

@keyframes dropupOpen {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropup .time-dropdown-list {
    top: auto;
    bottom: 100%;
    border-top: 1.5px solid #b44fc7;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,0.5);
}
.dropup.open .time-dropdown-trigger {
    border-radius: 0 0 12px 12px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.dropup.open .time-dropdown-list {
    animation: dropupOpen 0.18s cubic-bezier(0.4,0,0.2,1);
}
@keyframes dropupOpen {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Options ── */
.time-dropdown-option {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(var(--ink),0.65);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.lang-flag-icon { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; display: inline-block; vertical-align: middle; margin-right: 7px; }

.time-dropdown-option:hover {
    background: rgba(180,79,199,0.15);
    color: #fff;
}

.time-dropdown-option.selected {
    background: rgba(139,47,201,0.25);
    color: #e0aaff;
}

.time-dropdown-option--premium {
    color: #f0c040;
    font-size: 12px;
    opacity: 0.8;
    border-top: 1px solid rgba(155,89,182,0.25);
}
.time-dropdown-option--premium:hover {
    background: rgba(240,192,64,0.12);
    color: #f5d060;
    opacity: 1;
}

/* ── Reminder pill buttons ── */
.reminder-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.reminder-row:first-of-type { margin-top: 0; }

.reminder-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    line-height: 1;
}
.reminder-pill:hover {
    border-color: rgba(155, 89, 182, 0.6);
    color: var(--text-primary);
}
.reminder-pill--active {
    background: rgba(139, 47, 201, 0.22);
    border-color: rgba(155, 89, 182, 0.8);
    color: #e0aaff;
    font-weight: 600;
}
.reminder-pill-x {
    font-size: 13px;
    line-height: 1;
    opacity: 0.5;
    margin-left: 1px;
    transition: opacity 0.12s;
}
.reminder-pill-x:hover { opacity: 1; color: #e74c3c; }

.reminder-pill--add {
    padding: 5px 10px;
    border-style: dashed;
    opacity: 0.7;
}
.reminder-pill--add:hover { opacity: 1; border-style: solid; }


.repeat-premium-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ffc107;
    background: rgba(255,193,7,0.12);
    border: 1px solid rgba(255,193,7,0.3);
    border-radius: 5px;
    padding: 1px 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.reminder-pill--ok {
    padding: 5px 12px;
    background: rgba(139, 47, 201, 0.18);
    border-color: rgba(155, 89, 182, 0.6);
    color: #e0aaff;
    font-weight: 700;
}
.reminder-pill--ok:hover {
    background: rgba(139, 47, 201, 0.35);
    border-color: rgba(155, 89, 182, 0.9);
}

.reminder-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(155, 89, 182, 0.06);
    border: 1px dashed rgba(155, 89, 182, 0.25);
    border-radius: 10px;
}
.reminder-csel-wrap {
    position: relative;
    display: inline-block;
}
.reminder-csel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s;
    white-space: nowrap;
}
.reminder-csel:hover,
.reminder-csel-panel.open ~ .reminder-csel {
    border-color: rgba(155, 89, 182, 0.7);
}
.reminder-csel svg { opacity: 0.6; flex-shrink: 0; }

.reminder-csel-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    background: var(--bg-secondary);
    border: 1.5px solid rgba(155, 89, 182, 0.45);
    border-radius: 10px;
    padding: 4px;
    min-width: 80px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    scrollbar-width: thin;
    scrollbar-color: rgba(155,89,182,0.3) transparent;
}
.reminder-csel-panel.open { display: block; }

.reminder-csel-opt {
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}
.reminder-csel-opt:hover {
    background: rgba(155, 89, 182, 0.15);
    color: var(--text-primary);
}
.reminder-csel-opt--on {
    background: rgba(139, 47, 201, 0.22);
    color: #e0aaff;
    font-weight: 600;
}
[data-theme="light"] .reminder-csel-panel {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    border-color: rgba(155, 89, 182, 0.3);
}
[data-theme="light"] .reminder-csel-opt--on {
    background: rgba(155, 89, 182, 0.13);
    color: #7c35b8;
}

.reminder-upsell {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    opacity: 0.85;
}
[data-theme="light"] .reminder-pill--active {
    background: rgba(155, 89, 182, 0.13);
    border-color: rgba(155, 89, 182, 0.6);
    color: #7c35b8;
}
[data-theme="light"] .reminder-pill--ok {
    background: rgba(155, 89, 182, 0.12);
    color: #7c35b8;
}

/* ── Recurrence modal ── */
.recur-modal-box {
    max-width: 380px;
    width: 90%;
    background: var(--bg-primary);
    border: 1.5px solid rgba(155, 89, 182, 0.5);
    box-shadow: 0 0 40px rgba(155, 89, 182, 0.3);
    border-radius: 18px;
    overflow: hidden;
}
.recur-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(155, 89, 182, 0.2);
}
.recur-modal-title {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
}
.recur-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.recur-modal-close:hover { background: rgba(155, 89, 182, 0.15); color: var(--text-primary); }
.recur-modal-body { padding: 20px; }
.recur-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid rgba(155, 89, 182, 0.2);
}

.recur-section { margin-bottom: 20px; }
.recur-section:last-child { margin-bottom: 0; }

.recur-section-label {
    color: rgba(155, 89, 182, 0.9);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.recur-interval-row { display: flex; gap: 10px; align-items: center; }

.recur-number-input {
    padding: 8px 10px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1.5px solid rgba(155, 89, 182, 0.35);
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    width: 68px;
    transition: border-color 0.15s;
}
.recur-number-input:focus { outline: none; border-color: rgba(155, 89, 182, 0.8); }
.recur-number-input--sm { width: 56px; font-size: 13px; padding: 6px 8px; }

/* Custom unit select */
.recur-unit-wrap { position: relative; flex: 1; }
.recur-unit-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1.5px solid rgba(155, 89, 182, 0.35);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s;
}
.recur-unit-btn:hover { border-color: rgba(155, 89, 182, 0.7); }
.recur-unit-btn svg { opacity: 0.55; flex-shrink: 0; }
.recur-unit-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 9999;
    background: var(--bg-secondary);
    border: 1.5px solid rgba(155, 89, 182, 0.45);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.recur-unit-panel.open { display: block; }
.recur-unit-opt {
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.recur-unit-opt:hover { background: rgba(155, 89, 182, 0.15); color: var(--text-primary); }
.recur-unit-opt--on { background: rgba(139, 47, 201, 0.22); color: #e0aaff; font-weight: 600; }

/* Weekday buttons */
.recur-wd-row { display: flex; gap: 8px; flex-wrap: wrap; }
.recur-wd-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(155, 89, 182, 0.4);
    background: transparent;
    color: rgba(155, 89, 182, 0.8);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.recur-wd-btn:hover { border-color: rgba(155, 89, 182, 0.7); color: var(--text-primary); }
.recur-wd-btn[data-on="1"] {
    background: rgba(139, 47, 201, 0.3);
    border-color: rgba(155, 89, 182, 0.9);
    color: #e0aaff;
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}

/* Stepper */
.recur-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1.5px solid rgba(155, 89, 182, 0.35);
    border-radius: 10px;
    overflow: hidden;
}
.recur-stepper--sm .recur-stepper-val { min-width: 32px; }
.recur-stepper-btn {
    width: 32px;
    height: 36px;
    background: none;
    border: none;
    color: rgba(155, 89, 182, 0.8);
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}
.recur-stepper-btn:hover { background: rgba(155, 89, 182, 0.15); color: #e0aaff; }
.recur-stepper-val {
    min-width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-left: 1px solid rgba(155, 89, 182, 0.2);
    border-right: 1px solid rgba(155, 89, 182, 0.2);
    padding: 0 4px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Date parts */
.recur-date-parts { display: flex; align-items: center; gap: 5px; }
.recur-date-sep { color: rgba(155, 89, 182, 0.5); font-size: 13px; font-weight: 600; }

/* Date dropdown selectors */
.recur-date-sel-wrap { position: relative; }
.recur-date-sel-btn {
    display: flex; align-items: center; gap: 5px;
    background: var(--bg-tertiary);
    border: 1.5px solid rgba(155, 89, 182, 0.35);
    border-radius: 8px;
    padding: 5px 9px;
    color: var(--text-primary);
    font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: border-color 0.15s;
    min-width: 48px; justify-content: space-between;
}
.recur-date-sel-btn:hover { border-color: rgba(155, 89, 182, 0.75); }
.recur-date-sel-btn svg { opacity: 0.5; flex-shrink: 0; }
.recur-date-sel-panel {
    display: none; position: absolute;
    top: calc(100% + 4px); left: 0;
    background: var(--bg-secondary);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 10px; padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 500; min-width: 68px;
    max-height: 196px; overflow-y: auto;
}
.recur-date-sel-panel.open { display: block; }
.recur-date-sel-opt {
    padding: 5px 10px; border-radius: 6px;
    cursor: pointer; font-size: 13px;
    color: var(--text-secondary); white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.recur-date-sel-opt:hover { background: rgba(155, 89, 182, 0.15); color: var(--text-primary); }
.recur-date-sel-opt--on { background: rgba(139, 47, 201, 0.22); color: #e0aaff; font-weight: 600; }

/* End options */
.recur-end-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 10px;
    cursor: pointer;
}
.recur-end-row:last-child { margin-bottom: 0; }

/* Custom radio */
.recur-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid rgba(155, 89, 182, 0.45);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.recur-radio:checked {
    border-color: #9b59b6;
    background: radial-gradient(circle, #9b59b6 38%, transparent 42%);
}
.recur-radio:hover { border-color: rgba(155, 89, 182, 0.75); }

/* Buttons */
.recur-btn {
    padding: 9px 22px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
}
.recur-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.recur-btn--cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid rgba(155, 89, 182, 0.3);
}
.recur-btn--ok {
    background: linear-gradient(135deg, #9b59b6, #764ba2);
    color: #fff;
    border: none;
    box-shadow: 0 0 16px rgba(155, 89, 182, 0.45);
}

/* Recurrence info badge (task edit modal) */
.recur-info-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(155, 89, 182, 0.12);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 10px;
    margin-top: 2px;
}
.recur-info-icon { font-size: 14px; flex-shrink: 0; }
.recur-info-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.recur-info-remove {
    background: none;
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.recur-info-remove:hover { background: rgba(231, 76, 60, 0.12); border-color: #e74c3c; }

/* Light theme */
[data-theme="light"] .recur-unit-opt--on { background: rgba(155, 89, 182, 0.13); color: #7c35b8; }
[data-theme="light"] .recur-wd-btn[data-on="1"] { background: rgba(155, 89, 182, 0.15); color: #7c35b8; box-shadow: none; }
[data-theme="light"] .recur-info-badge { background: rgba(155, 89, 182, 0.07); }
[data-theme="light"] .recur-date-input { color-scheme: light; }

/* ── Task context menu (right-click) ── */
.task-context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg-secondary);
    border: 1px solid rgba(155, 89, 182, 0.35);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(155,89,182,0.08);
    min-width: 210px;
    display: none;
    flex-direction: column;
    gap: 2px;
    transform-origin: top left;
    animation: ctxFadeIn 0.13s ease;
}
.task-context-menu.visible { display: flex; }
@keyframes ctxFadeIn {
    from { opacity: 0; transform: scale(0.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.ctx-menu-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 11px;
    border: none; border-radius: 8px;
    background: none;
    font-size: 13px; font-weight: 500;
    cursor: pointer; text-align: left; width: 100%;
    transition: background 0.1s, color 0.1s;
    color: var(--text-primary);
}
.ctx-menu-btn.danger  { color: #e74c3c; }
.ctx-menu-btn.danger:hover  { background: rgba(231,76,60,0.13); }
.ctx-menu-btn.warning { color: #e67e22; }
.ctx-menu-btn.warning:hover { background: rgba(230,126,34,0.11); }
.ctx-menu-btn.edit    { color: #9b59b6; }
.ctx-menu-btn.edit:hover    { background: rgba(155,89,182,0.13); }
.ctx-menu-btn.cancel  { color: var(--text-secondary); }
.ctx-menu-btn.cancel:hover  { background: var(--bg-tertiary); }
.ctx-menu-divider { height: 1px; background: var(--border-color); margin: 3px 4px; }
[data-theme="light"] .task-context-menu { box-shadow: 0 6px 24px rgba(0,0,0,0.18); }

/* ── Premium lock overlay (day colors section) ── */
.premium-lock-overlay {
    position: absolute;
    inset: -6px;
    background: rgba(10, 10, 10, 0.72);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0c040;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(2px);
    z-index: 2;
    letter-spacing: 0.2px;
    transition: background 0.15s;
    user-select: none;
}
.premium-lock-overlay:hover {
    background: rgba(10, 10, 10, 0.85);
}
[data-theme="light"] .premium-lock-overlay {
    background: rgba(220, 220, 225, 0.82);
    color: #7c35b8;
}
[data-theme="light"] .premium-lock-overlay:hover {
    background: rgba(200, 200, 210, 0.92);
}

input[type="time"] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm);
    border-radius: 4px;
    font-size: var(--font-size-sm);
}

.info-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    text-align: center;
}

/* =============================================
   CUSTOM TASKS EDITOR
   ============================================= */

.custom-tasks-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.custom-task-item {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr auto;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.custom-task-item input[type="text"] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm);
    border-radius: 4px;
    font-size: var(--font-size-sm);
}

.custom-task-item input[type="color"] {
    width: 100%;
    height: 35px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.custom-task-item input[type="number"] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm);
    border-radius: 4px;
    font-size: var(--font-size-sm);
}

.custom-task-delete {
    background-color: var(--danger);
    border: none;
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.custom-task-delete:hover {
    background-color: #d32f2f;
}

/* =============================================
   COLOR PALETTE SECTIONS
   ============================================= */

.color-palette-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.color-section-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--spacing-xs) 0;
}

.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

.color-circle-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    padding: 0;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.color-circle-wrapper:hover .color-delete-btn {
    opacity: 1;
}

.color-delete-btn:hover {
    background-color: #d32f2f;
    transform: scale(1.1);
}

/* =============================================
   CONFLICT WARNING
   ============================================= */

.conflict-warning {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--danger);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: 0 4px 12px var(--shadow);
    animation: slideIn 0.3s ease;
    max-width: 400px;
}

@keyframes slideIn {
    from {
        transform: translateX(500px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* =============================================
   UNDO / REDO BUTTONS
   ============================================= */

.undo-redo-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.undo-redo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid rgba(180, 79, 199, 0.35);
    border-radius: 7px;
    color: rgba(180, 79, 199, 0.85);
    cursor: pointer;
    padding: 4px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.undo-redo-btn:hover:not(:disabled) {
    background: rgba(180, 79, 199, 0.14);
    border-color: rgba(180, 79, 199, 0.65);
    color: #b44fc7;
}

.undo-redo-btn:active:not(:disabled) {
    background: rgba(180, 79, 199, 0.22);
    transform: scale(0.93);
}

.undo-redo-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.undo-redo-btn svg {
    width: 14px;
    height: 14px;
}

/* =============================================
   CACHER TÂCHES PARTENAIRE
   ============================================= */
.hide-partner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid rgba(180, 79, 199, 0.35);
    border-radius: 50%;
    color: rgba(180, 79, 199, 0.85);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hide-partner-btn:hover {
    background: rgba(180, 79, 199, 0.14);
    border-color: rgba(180, 79, 199, 0.65);
    color: #e0aaff;
    transform: scale(1.1);
}

.hide-partner-btn:active {
    transform: scale(0.92);
}

.hide-partner-btn.active {
    background: rgba(180, 79, 199, 0.22);
    border-color: rgba(180, 79, 199, 0.8);
    color: #e0aaff;
}

/* Gestion des icônes œil via CSS — plus de class-toggling JS */
.hide-partner-btn .icon-eye-slash { display: none; }
.hide-partner-btn.active .icon-eye-open  { display: none; }
.hide-partner-btn.active .icon-eye-slash { display: block; }

/* ── Animation passive : clignement toutes les 6 secondes (pas de regard) ── */
@keyframes eyeBlink {
    0%, 90%, 100%      { transform: scaleY(1); }
    94%                { transform: scaleY(0.06); }
    97%                { transform: scaleY(1); }
}

.hide-partner-btn .icon-eye-open {
    transform-box: fill-box;
    transform-origin: center center;
    animation: eyeBlink 6s ease-in-out infinite;
}
.hide-partner-btn:hover .icon-eye-open {
    animation-play-state: paused;
}

/* =============================================
   AIDE & RACCOURCIS  (bouton "?" du header)
   ============================================= */
.help-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid rgba(180, 79, 199, 0.35);
    border-radius: 50%;
    color: rgba(180, 79, 199, 0.85);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.help-btn:hover {
    background: rgba(180, 79, 199, 0.14);
    border-color: rgba(180, 79, 199, 0.65);
    color: #e0aaff;
    transform: scale(1.1);
}

.help-btn:active {
    transform: scale(0.92);
}

.help-btn.active {
    background: rgba(180, 79, 199, 0.22);
    border-color: rgba(180, 79, 199, 0.8);
    color: #e0aaff;
}

/* ── Animations du bouton "?" ── */

/* 1. PASSIF : halo respirant + arc tournant lentement */
.help-btn {
    animation: help-breathe 6s ease-in-out infinite;
}
@keyframes help-breathe {
    0%, 100% { box-shadow: 0 0 3px rgba(180,79,199,0.12), 0 0 0 0 rgba(180,79,199,0); }
    50%      { box-shadow: 0 0 10px rgba(180,79,199,0.38), 0 0 16px rgba(180,79,199,0.10); }
}

/* Arc tournant : courte traîne qui fait le tour du cercle en 8 s */
.help-arc {
    stroke: rgba(220, 160, 255, 0.75);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-dasharray: 16 47;   /* arc ≈ 16/62.8 ≈ 25% du cercle */
    stroke-dashoffset: 0;
    animation: help-arc-spin 8s linear infinite;
    pointer-events: none;
}
@keyframes help-arc-spin {
    to { stroke-dashoffset: -63; }   /* -circumference ≈ -2π×10 */
}

/* 2. SURVOL : arc plus rapide + "?" qui se dandine */
.help-btn:hover {
    animation: none;   /* stop le breathing, la transition CSS prend le relais */
}
.help-btn:hover .help-arc {
    stroke: rgba(240, 200, 255, 0.95);
    animation: help-arc-spin 1.8s linear infinite;
}
.help-btn:hover .help-qmark {
    transform-box: fill-box;
    transform-origin: 50% 80%;   /* pivot bas du ? */
    animation: help-wobble 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes help-wobble {
    0%   { transform: rotate(0deg)    scale(1);    }
    25%  { transform: rotate(-18deg)  scale(1.1);  }
    55%  { transform: rotate(13deg)   scale(1.08); }
    78%  { transform: rotate(-7deg)   scale(1.04); }
    100% { transform: rotate(0deg)    scale(1);    }
}

/* 3. CLIC : micro-pop + ondulation */
.help-btn.help-clicked {
    animation: help-pop 0.28s cubic-bezier(0.34, 1.6, 0.64, 1) forwards;
}
@keyframes help-pop {
    0%   { transform: scale(1);    }
    35%  { transform: scale(0.82); }
    70%  { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(200,130,255,0.9)); }
    100% { transform: scale(1);    filter: none; }
}

/* ── Popover ── */
.help-popover {
    position: absolute;
    top: calc(100% + 11px);
    left: 50%;
    transform: translateX(-30%);
    width: 310px;
    background: linear-gradient(160deg, #1c1430, #150e24);
    border: 1px solid rgba(180, 79, 199, 0.4);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.55), 0 0 18px rgba(180,79,199,0.22);
    padding: 13px 14px 14px;
    z-index: 1500;
    animation: helpPopIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.help-popover[hidden] { display: none; }

@keyframes helpPopIn {
    from { opacity: 0; transform: translateX(-30%) translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateX(-30%) translateY(0) scale(1); }
}

/* petite flèche pointant vers le bouton "?" */
.help-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 30%;
    width: 11px;
    height: 11px;
    background: #1c1430;
    border-left: 1px solid rgba(180, 79, 199, 0.4);
    border-top: 1px solid rgba(180, 79, 199, 0.4);
    transform: translateX(-50%) rotate(45deg);
}

.help-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
}

.help-popover-title {
    font-size: 13px;
    font-weight: 700;
    color: #e0aaff;
    letter-spacing: 0.2px;
}

.help-popover-close {
    background: transparent;
    border: none;
    color: rgba(201, 160, 255, 0.55);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.help-popover-close:hover {
    color: #e0aaff;
    background: rgba(180, 79, 199, 0.18);
}

.help-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    background: rgba(180, 79, 199, 0.06);
    border: 1px solid rgba(180, 79, 199, 0.16);
    border-radius: 10px;
}

.help-keys {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.help-plus {
    color: rgba(201, 160, 255, 0.65);
    font-size: 11px;
    font-weight: 700;
}

.kbd {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(180, 79, 199, 0.16);
    border: 1px solid rgba(180, 79, 199, 0.42);
    border-bottom-width: 2px;
    border-radius: 6px;
    color: #e6c2ff;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.help-desc {
    font-size: 12px;
    color: #ece3f7;
    line-height: 1.4;
}

.help-desc strong {
    color: #d8a8ff;
    font-weight: 700;
}

/* =============================================
   VERROU DU TABLEAU (cadenas header)
   ============================================= */
.btn-lock-board {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: rgba(180, 79, 199, 0.85);
    cursor: pointer;
    transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    outline: none;
}

.lock-svg {
    width: 26px;
    height: 30px;
    overflow: visible;
}

/* L'anse est un groupe SVG animable indépendamment du corps */
.lock-shackle {
    transform-box: fill-box;
    transform-origin: bottom center;
}

/* ── Survol (déverrouillé) ── */
.btn-lock-board:not(.locked):hover {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #e0aaff;
    transform: scale(1.07);
    box-shadow: 0 0 14px rgba(180, 79, 199, 0.35);
}

/* L'anse se soulève au survol pour inviter au clic */
.btn-lock-board:not(.locked):hover .lock-shackle {
    animation: shackleLift 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Survol (verrouillé) — glow pulsé ── */
.btn-lock-board.locked:hover {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: 0 0 24px rgba(180, 79, 199, 0.8),
                0 0 8px rgba(220, 130, 255, 0.5) inset;
    transform: scale(1.06);
}

.btn-lock-board:active {
    transform: scale(0.91) !important;
    transition-duration: 0.07s;
}

/* ── État verrouillé ── */
.btn-lock-board.locked {
    background: transparent;
    border: none;
    color: #df80ff;
    box-shadow: none;
    filter: drop-shadow(0 0 6px rgba(180, 79, 199, 0.9));
}

/* ── Animation : fermeture (snap vers le bas) ── */
.btn-lock-board.lock-snapping .lock-shackle {
    animation: shackleSnap 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Animation : ouverture (envol vers le haut) ── */
.btn-lock-board.lock-opening .lock-shackle {
    animation: shackleOpen 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes shackleLift {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-3.5px); }
    65%  { transform: translateY(0.5px); }
    85%  { transform: translateY(-1.5px); }
    100% { transform: translateY(0); }
}

@keyframes shackleSnap {
    0%   { transform: translateY(-4px); }
    50%  { transform: translateY(2px); }
    75%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

@keyframes shackleOpen {
    0%   { transform: translateY(2px) rotate(1deg); }
    45%  { transform: translateY(-4px) rotate(-6deg); }
    75%  { transform: translateY(-1.5px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Curseur "interdit" sur les tâches quand le tableau est verrouillé */
body.board-locked .scheduled-task,
body.board-locked .scheduled-task * {
    cursor: not-allowed !important;
}

/* =============================================
   ANIMATIONS PERMANENTES — BOUTONS EN-TÊTE
   ============================================= */

/* ── 1. Verrou : ligne blanche qui trace le contour du cadenas ── */

/* Anse du cadenas : stroke-dasharray dashoffset animation */
.lock-trace {
    stroke-dasharray: 6 16;   /* période = 22 ≈ longueur de l'anse */
    stroke-dashoffset: 0;
    animation: lock-trace-run 5.6s linear infinite;  /* x2 plus lent */
    opacity: 0.75;
    pointer-events: none;
}
.btn-lock-board.locked .lock-trace {
    opacity: 1;
    stroke: rgba(255, 240, 255, 0.95);
    animation-duration: 4.0s;
}

/* Corps du cadenas (rect arrondi, périmètre ≈ 55 SVG units) */
.lock-body-trace {
    stroke-dasharray: 9 46;   /* période = 55 ≈ périmètre du rect rx=3.5 */
    stroke-dashoffset: 0;
    animation: lock-body-run 12.0s linear infinite;  /* x2 plus lent */
    opacity: 0.45;
    pointer-events: none;
}
.btn-lock-board.locked .lock-body-trace {
    opacity: 0.75;
    stroke: rgba(255, 240, 255, 0.95);
    animation-duration: 8.0s;
}

@keyframes lock-trace-run {
    to { stroke-dashoffset: -22; }
}
@keyframes lock-body-run {
    to { stroke-dashoffset: -55; }
}

/* ── 2. Calendrier mensuel : case blanche qui parcourt les 6 cellules ── */

/* La case blanche saute de cellule en cellule en séquence (x2 plus lent) */
.btn-month-view svg rect:nth-child(n+6) {
    animation: calendar-cell-sweep 4.8s ease-in-out infinite;
}
.btn-month-view svg rect:nth-child(6)  { animation-delay: 0s; }
.btn-month-view svg rect:nth-child(7)  { animation-delay: 0.8s; }
.btn-month-view svg rect:nth-child(8)  { animation-delay: 1.6s; }
.btn-month-view svg rect:nth-child(9)  { animation-delay: 2.4s; }
.btn-month-view svg rect:nth-child(10) { animation-delay: 3.2s; }
.btn-month-view svg rect:nth-child(11) { animation-delay: 4.0s; }

@keyframes calendar-cell-sweep {
    0%    { fill: rgba(255,255,255,0.22); }
    5%    { fill: rgba(255,255,255,0.97); filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
    18%   { fill: rgba(255,255,255,0.22); filter: none; }
    100%  { fill: rgba(255,255,255,0.22); filter: none; }
}

/* Le vortex reste actif en permanence, discret, plus lumineux au survol */
.btn-month-view::before {
    opacity: 0.25;
    animation: time-vortex 8s linear infinite;  /* x2 plus lent */
}
.btn-month-view:hover::before {
    opacity: 0.72;
    animation: time-vortex 1.6s linear infinite;
}

/* ── 3. Partage : ligne lumineuse qui parcourt le logo en permanence ── */

.share-glow-path {
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 5 82;
    stroke-dashoffset: 7;
    animation: share-glow-travel 6s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px rgba(220, 160, 255, 1));
}
@keyframes share-glow-travel {
    from { stroke-dashoffset: 7; }
    to   { stroke-dashoffset: 87; }
}
.btn-share:active .share-glow-path {
    animation: none;
    stroke: rgba(var(--ink), 0.6);
}
.btn-share:hover .share-glow-path {
    animation-duration: 3s;
    stroke: #ffffff;
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px rgba(220, 160, 255, 1));
}

/* Survol : légèrement plus vif, mais sans grossièreté */
.btn-share:hover svg circle:nth-child(1) {
    animation: share-node-hover 1.4s ease-in-out 0s infinite;
}
.btn-share:hover svg circle:nth-child(2) {
    animation: share-node-hover 1.4s ease-in-out 0.46s infinite;
}
.btn-share:hover svg circle:nth-child(3) {
    animation: share-node-hover 1.4s ease-in-out 0.92s infinite;
}
/* Légère lueur sur les lignes au survol */
.btn-share:hover svg line {
    animation: share-line-pulse 1.4s ease-in-out infinite alternate;
}

/* Hover : scale modéré, couleur douce plutôt que blanc pur */
@keyframes share-node-hover {
    0%, 12%   { fill: none;          transform: scale(1);    }
    35%, 60%  { fill: #f0c8ff;       transform: scale(1.45);
                filter: drop-shadow(0 0 4px #e0a0ff); }
    88%, 100% { fill: none;          transform: scale(1);    }
}
@keyframes share-line-pulse {
    from { opacity: 0.6; stroke-width: 2.2; }
    to   { opacity: 1;   stroke-width: 2.8; stroke: rgba(230,190,255,0.8); }
}

/* ── 4. Téléchargement : douce pulsation "chargement" permanente ── */

.btn-export-pdf svg {
    animation: download-idle 5.6s ease-in-out infinite;  /* x2 plus lent */
}
.btn-export-pdf:hover svg {
    animation: download-charge 1.0s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes download-idle {
    0%, 100% { transform: translateY(0);   filter: drop-shadow(0 0 2px rgba(180,79,199,0.35)); }
    45%, 55% { transform: translateY(2px); filter: drop-shadow(0 0 7px rgba(200,120,240,0.65)); }
}


/* =============================================
   DRAG ACTION BAR (delete + postpone zones)
   ============================================= */

.drag-action-bar {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 2000;
    pointer-events: none;
    transition: bottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drag-action-bar.visible {
    bottom: 30px;
    pointer-events: all;
}


/* Postpone zone */
.postpone-zone {
    pointer-events: all;
}

.postpone-zone-inner {
    background: rgba(108, 92, 231, 0.88);
    border: 2px solid rgba(108, 92, 231, 0.9);
    border-radius: 50px;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 700;
    font-size: 15px;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px rgba(108, 92, 231, 0.45);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.postpone-zone-icon {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.postpone-zone-text {
    letter-spacing: 0.5px;
}

.postpone-zone.drag-over .postpone-zone-inner {
    background: rgba(90, 70, 210, 1);
    box-shadow: 0 6px 40px rgba(108, 92, 231, 0.8);
    transform: scale(1.15);
}

/* =============================================
   MONTH VIEW BUTTON
   ============================================= */

.btn-month-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(180, 79, 199, 0.12);
    border: 1.5px solid rgba(180, 79, 199, 0.5);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.14s ease;
    box-shadow: 0 0 10px rgba(180,79,199,0.15);
}

/* Vortex de temps : dégradé conique qui tourne derrière l'icône */
.btn-month-view::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background: conic-gradient(
        from 0deg at 50% 50%,
        #1a003a  0deg,
        #9b2fcc  55deg,
        #e080ff  90deg,
        #5b10a8 140deg,
        #f0b8ff 180deg,
        #7020b0 230deg,
        #c050e8 275deg,
        #300060 320deg,
        #1a003a 360deg
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.btn-month-view:hover::before {
    opacity: 0.72;
    animation: time-vortex 1.6s linear infinite;
}

@keyframes time-vortex {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* L'icône flotte au-dessus du vortex */
.btn-month-view svg {
    width: 26px;
    height: 26px;
    display: block;
    position: relative;
    z-index: 1;
}

.btn-month-view:hover {
    background: rgba(180, 79, 199, 0.22);
    border-color: rgba(180, 79, 199, 0.9);
    box-shadow: 0 0 18px rgba(180,79,199,0.4);
    transform: translateY(-1px);
}

/* =============================================
   MONTHLY VIEW MODAL
   ============================================= */

.month-view-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
}

.month-view-modal {
    max-width: 1080px;
    width: 92%;
    background: #1e1e3a;
    border: 1px solid rgba(180, 79, 199, 0.25);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    max-height: 90vh;
    overflow-y: auto;
}

.month-view-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.month-view-title {
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex: 1;
    text-align: center;
    margin: 0;
}

.month-nav-btn {
    background: transparent;
    border: 1px solid rgba(180, 79, 199, 0.4);
    color: rgba(var(--ink), 0.8);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.month-nav-btn:hover {
    background: rgba(180, 79, 199, 0.18);
    border-color: rgba(180, 79, 199, 0.7);
}

.month-view-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(var(--ink), 0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.month-view-close:hover {
    color: white;
    background: rgba(var(--ink), 0.1);
}

/* 2×2 grid */
.month-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Mini weekly card */
.mini-week-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(var(--ink), 0.08);
    background: rgba(var(--ink), 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mini-week-card:hover {
    border-color: rgba(180, 79, 199, 0.55);
    box-shadow: 0 0 20px rgba(180, 79, 199, 0.18);
}

.mini-week-card.current-week {
    border-color: rgba(180, 79, 199, 0.85);
    border-style: dashed;
    box-shadow: 0 0 16px rgba(180, 79, 199, 0.15);
}

/* Label above headers */
.mini-week-label {
    padding: 7px 10px 5px;
    font-size: 11px;
    color: rgba(var(--ink), 0.45);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-week-card.current-week .mini-week-label {
    color: rgba(180, 79, 199, 0.9);
    font-weight: 600;
}

.mini-week-label .current-badge {
    font-size: 9px;
    background: rgba(180, 79, 199, 0.22);
    color: #c47fd4;
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 700;
}

/* Colored day header row */
.mini-week-header {
    display: flex;
}

.mini-day-head {
    flex: 1;
    padding: 5px 2px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Body: columns + tasks */
.mini-week-body {
    display: flex;
    height: 160px;
    position: relative;
    background: rgba(0, 0, 0, 0.25);
}

.mini-day-col {
    flex: 1;
    position: relative;
    border-right: 1px solid rgba(var(--ink), 0.04);
}

.mini-day-col:last-child {
    border-right: none;
}

.mini-hour-line {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: rgba(var(--ink), 0.06);
    pointer-events: none;
}

.mini-task-block {
    position: absolute;
    left: 1px;
    right: 1px;
    border-radius: 2px;
    min-height: 3px;
    opacity: 0.88;
}

/* =============================================
   PIE CHART SIDEBAR
   ============================================= */

/* Handles de redimensionnement sidebar */
.sidebar-resize-handle {
    height: 10px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 3px;
    transition: background 0.15s;
    margin: 1px 4px;
}
.sidebar-resize-handle:hover { background: rgba(168,85,247,0.15); }
.sidebar-resize-handle.dragging { background: rgba(168,85,247,0.25); }
.resize-grip {
    width: 36px;
    height: 3px;
    background: rgba(var(--ink),0.13);
    border-radius: 2px;
    transition: background 0.15s;
}
.sidebar-resize-handle:hover .resize-grip,
.sidebar-resize-handle.dragging .resize-grip {
    background: rgba(168,85,247,0.75);
}

.pie-chart-wrapper {
    flex-shrink: 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(var(--ink), 0.08);
    margin-top: 0;
    /* Scrollable verticalement — la section est autonome */
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pie-chart-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-align: center;
    flex-shrink: 0;
}

/* Camembert centré en haut */
.pie-chart-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 12px;
}

#weekPieChart {
    display: block;
}

.pie-chart-empty {
    position: absolute;
    color: var(--text-secondary);
    font-size: 9px;
    text-align: center;
    pointer-events: none;
    opacity: 0.6;
    width: 110px;
}

/* Légende sous le camembert — noms non tronqués */
.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.pie-legend-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Nom de tâche sur plusieurs lignes si nécessaire — jamais coupé */
.pie-legend-item span:last-child {
    word-break: break-word;
    white-space: normal;
    min-width: 0;
    flex: 1;
}

.pie-color {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* =============================================
   BOUTON RESET SEMAINE
   ============================================= */

.btn-reset-week {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    position: relative;
    outline: none;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(239, 68, 68, 0.45);
    transition: transform  0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background  0.22s ease;
}

/* Halo rouge pulsé circulaire */
.btn-reset-week::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.45);
    animation: resetPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes resetPulse {
    0%, 100% { opacity: 0.6; transform: scale(1);    }
    50%       { opacity: 0;   transform: scale(1.18); }
}

.btn-reset-week svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    overflow: visible;
}

/* Couvercle : pivot sur le coin gauche de la barre */
.btn-reset-week .trash-lid {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-reset-week .trash-body {
    transition: transform 0.35s ease;
}

/* Hover : légère élévation + glow + couvercle qui s'ouvre */
.btn-reset-week:hover {
    background: linear-gradient(135deg, #f87171, #dc2626);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.65),
                0 0 0 3px rgba(239, 68, 68, 0.18);
}

.btn-reset-week:hover .trash-lid {
    transform: rotate(-40deg);
}

/* Clic : écrasement net */
.btn-reset-week:active {
    transform: translateY(0) scale(0.93);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-reset-week:active .trash-lid {
    transform: rotate(-50deg);
}

/* =============================================
   BUTTON DANGER & MODAL CONFIRM
   ============================================= */

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 16, 14, 0.4);
}

/* ── Footer paramètres ── */
.settings-footer {
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

/* ── Couleurs des jours ── */
.day-colors-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.day-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.day-color-swatch-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: block;
}

.day-color-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    padding: 0;
}

.day-color-swatch {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2.5px solid rgba(var(--ink),0.18);
    pointer-events: none;
    transition: transform 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.day-color-swatch-wrap:hover .day-color-swatch {
    transform: scale(1.1);
    border-color: rgba(var(--ink),0.45);
    box-shadow: 0 0 10px rgba(var(--ink),0.15);
}

.day-color-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.8;
    font-weight: 500;
    letter-spacing: 0.02em;
    user-select: none;
}

/* ── Dropdown langue ── */
.lang-dropdown-wrapper {
    max-width: 200px;
}

.btn-reset-day-colors {
    margin-top: 10px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    background: transparent;
    border: 1px solid rgba(var(--ink),0.10);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-reset-day-colors svg {
    opacity: 0.7;
    transition: transform 0.35s ease, opacity 0.15s;
}

.btn-reset-day-colors:hover {
    border-color: rgba(var(--ink),0.22);
    color: var(--text-primary);
    background: rgba(var(--ink),0.04);
    opacity: 1;
    box-shadow: none;
    transform: none;
}

.btn-reset-day-colors:hover svg {
    transform: rotate(-180deg);
    opacity: 1;
}

/* ── Wrapper reset rond + label ── */
.btn-default-settings-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.btn-default-settings-label {
    font-size: 0.62rem;
    color: var(--text-secondary);
    opacity: 0.65;
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
}

.btn-default-settings-wrap:hover .btn-default-settings-label {
    opacity: 0.9;
}

/* ── Bouton reset rond ── */
.btn-default-settings {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ink),0.15);
    background: rgba(var(--ink),0.06);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.3s ease;
}

.btn-default-settings:hover {
    background: rgba(var(--ink),0.12);
    border-color: rgba(var(--ink),0.3);
    color: var(--text-primary);
    transform: rotate(-180deg);
    box-shadow: none;
}

/* ── Bouton Retour (paramètres) ── */
.btn-back-settings {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(var(--ink),0.12);
    background: rgba(var(--ink),0.05);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-back-settings:hover {
    background: rgba(var(--ink),0.10);
    border-color: rgba(var(--ink),0.22);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

/* ── Bouton Enregistrer (paramètres) ── */
.btn-save-settings {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a855f7, #7c3aed);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: white;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(139, 92, 246, 0.45),
                0 0 0 1px rgba(168, 85, 247, 0.3);
    transition: background-position 0.4s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.btn-save-settings::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--ink),0.18), transparent);
    transform: skewX(-15deg);
    transition: left 0.4s ease;
}

.btn-save-settings:hover {
    background-position: 100% 0%;
    box-shadow: 0 5px 18px rgba(139, 92, 246, 0.65),
                0 0 0 1px rgba(168, 85, 247, 0.5);
    transform: translateY(-1px);
}

.btn-save-settings:hover::before {
    left: 160%;
}

.btn-save-settings:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.modal-confirm {
    max-width: 380px !important;
}

.modal-header-danger {
    background: linear-gradient(135deg, rgba(231,76,60,0.15), rgba(192,57,43,0.1));
    justify-content: center !important;
}

.modal-header-danger h2 {
    margin: 0;
    text-align: center;
    font-size: var(--font-size-md);
}

.modal-header-warning {
    background: linear-gradient(135deg, rgba(52,152,219,0.15), rgba(41,128,185,0.1));
    justify-content: center !important;
}

.modal-header-warning h2 {
    margin: 0;
    text-align: center;
    font-size: var(--font-size-md);
}

.btn-warning {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #2980b9, #1f6fa3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52,152,219,0.4);
}

/* =============================================
   SCROLLBAR STYLING
   ============================================= */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent);
}

/* =============================================
   RESPONSIVE DESIGN - TABLET
   ============================================= */

@media (max-width: 1024px) {
    .task-templates {
        width: 150px;
        padding: var(--spacing-sm);
    }

    .templates-list {
        gap: var(--spacing-xs);
    }

    .task-template {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .time-column {
        width: 70px;
    }

    .time-slot {
        height: 50px;
        font-size: var(--font-size-xs);
    }

    .day-slot {
        min-height: 50px;
    }

    .day-header {
        height: 50px;
    }

    .day-name {
        font-size: var(--font-size-sm);
    }

    .day-date {
        font-size: var(--font-size-xs);
    }
}

/* =============================================
   RESPONSIVE DESIGN - MOBILE
   ============================================= */

@media (max-width: 768px) {
    .container {
        height: 100%;
        min-height: 100vh;
    }

    .header {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .header h1 {
        font-size: var(--font-size-lg);
        flex-basis: 100%;
    }

    .settings-btn {
        flex: 1;
    }

    .main-content {
        flex-direction: column;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .task-templates {
        width: 100%;
        max-height: 150px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .task-templates h3 {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .templates-list {
        display: contents;
    }

    .task-template {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .calendar-section {
        flex: 1;
    }

    .calendar-header {
        flex-direction: row;
        gap: var(--spacing-sm);
    }

    .calendar-header h2 {
        margin: 0;
        font-size: var(--font-size-md);
    }

    .nav-btn {
        width: 100%;
        padding: var(--spacing-md);
    }

    .calendar-wrapper {
        flex-direction: column;
        border-radius: 4px;
    }

    .time-column {
        width: 100%;
        height: 40px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        flex-direction: row;
    }

    .time-header {
        height: 40px;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        flex: 0 0 60px;
    }

    .time-slots {
        flex-direction: row;
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .time-slot {
        height: 40px;
        width: 100%;
        min-width: 60px;
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        font-size: var(--font-size-xs);
    }

    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
        height: auto;
    }

    .day-column {
        min-width: 80px;
    }

    .day-header {
        height: 50px;
        padding: var(--spacing-xs);
    }

    .day-name {
        font-size: var(--font-size-sm);
    }

    .day-date {
        font-size: var(--font-size-xs);
    }

    .day-slots {
        min-height: 400px;
    }

    .day-slot {
        min-height: 60px;
    }

    .scheduled-task {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }

    .modal-content {
        width: 95%;
        max-height: 80vh;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-md);
    }

    .conflict-warning {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .header h1 {
        font-size: var(--font-size-md);
    }

    .header {
        padding: var(--spacing-sm);
    }

    .day-column {
        min-width: 70px;
    }

    .task-templates {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .calendar-header h2 {
        font-size: var(--font-size-sm);
    }

    .day-header {
        height: 45px;
    }

    .day-name {
        font-size: var(--font-size-xs);
    }

    .day-date {
        display: none;
    }

    .time-header {
        flex: 0 0 50px;
    }

    .time-slot {
        min-width: 50px;
        font-size: 0.65rem;
    }
}

/* =============================================
   COLOR PALETTE STYLES
   ============================================= */

.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.color-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.color-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.color-circle.selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 20px rgba(var(--ink), 0.4);
}

.color-circle.custom-color {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 2px dashed var(--border-color);
}

.color-circle.custom-color:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* =============================================
   IMPRESSION / EXPORT PDF
   ============================================= */

@media print {

    @page {
        size: A4 landscape;
        margin: 8mm 10mm;
    }

    /* Forcer l'impression des couleurs de fond */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Masquer tout ce qui n'est pas le calendrier */
    .task-templates,
    .header,
    #prevWeek,
    #nextWeek,
    #resetWeekBtn,
    #exportPdfBtn,
    #settingsBtn,
    #shareBtn,
    .share-wrapper,
    .zoom-bar,
    .zoom-sidebar,
    .header-controls,
    .header-left,
    .resize-handle,
    .modal,
    .delete-zone,
    .drag-action-bar,
    .month-view-overlay,
    .conflict-warning {
        display: none !important;
    }

    html, body {
        height: auto !important;
        /* overflow: hidden coupe les pages supplémentaires liées au fond sombre */
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container {
        height: auto !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .main-content {
        height: auto !important;
        overflow: hidden !important;
        display: block !important;
        padding: 0 !important;
    }

    .calendar-section {
        overflow: visible !important;
        display: block !important;
    }

    /* En-tête semaine centré */
    .calendar-header {
        display: flex !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        margin-bottom: 6px !important;
        border-radius: 8px !important;
        page-break-inside: avoid !important;
    }

    .calendar-header h2 {
        font-size: 15pt !important;
        text-align: center !important;
    }

    /* Le zoom print est injecté dynamiquement par JS via une balise <style> */

    /* Grille sans scroll */
    .calendar-wrapper {
        overflow: visible !important;
        height: auto !important;
        border-radius: 8px !important;
        display: flex !important;
        box-shadow: none !important;
    }

    .calendar-grid {
        overflow: visible !important;
    }

    .day-slots {
        overflow: visible !important;
        min-height: auto !important;
    }

    /* Désactiver le sticky pour l'impression */
    .day-header,
    .time-slot-header,
    .time-header {
        position: static !important;
    }

    /* Une seule page — pas de coupure */
    .scheduled-task {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .calendar-wrapper,
    .calendar-grid,
    .day-column {
        break-inside: avoid !important;
    }
}

/* =============================================
   SEMAINES TYPES
   ============================================= */

.week-templates-section {
    border-top: 1px solid var(--border-color);
    padding: 12px 8px 8px;
    margin-top: 8px;
}

.week-templates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.week-templates-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0;
}

.btn-save-week-tpl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 7px;
    color: #c084fc;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-save-week-tpl span { display: none; }
.btn-save-week-tpl:hover {
    background: rgba(168, 85, 247, 0.28);
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.week-tpl-empty {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    padding: 12px 8px;
    line-height: 1.5;
    opacity: 0.7;
}

#weekTemplatesList {
    max-height: 115px; /* ~1 carte visible */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(168,85,247,0.35) transparent;
}
#weekTemplatesList::-webkit-scrollbar {
    width: 4px;
}
#weekTemplatesList::-webkit-scrollbar-track {
    background: transparent;
}
#weekTemplatesList::-webkit-scrollbar-thumb {
    background: rgba(168,85,247,0.35);
    border-radius: 2px;
}
#weekTemplatesList::-webkit-scrollbar-thumb:hover {
    background: rgba(168,85,247,0.6);
}

.week-tpl-card {
    display: flex;
    align-items: stretch;
    padding: 0;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    margin-bottom: 6px;
    cursor: default;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
}
.week-tpl-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.06);
}

.week-tpl-color-bar {
    width: 4px;
    flex-shrink: 0;
    border-radius: 0;
}

.week-tpl-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 8px;
}

.week-tpl-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.week-tpl-icon {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1.3;
}

.week-tpl-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.35;
    flex: 1;
    min-width: 44px; /* évite que le flex item s'écrase à une largeur quasi nulle et force une coupure lettre par lettre */
}

.week-tpl-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
}

.week-tpl-count {
    display: none;
}

.week-tpl-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.week-tpl-apply-btn,
.week-tpl-edit-btn,
.week-tpl-delete-btn {
    width: 28px;
    height: 22px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.week-tpl-apply-btn {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
}
.week-tpl-apply-btn:hover { background: rgba(46, 204, 113, 0.35); }

.week-tpl-edit-btn {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    font-size: 12px;
}
.week-tpl-edit-btn:hover { background: rgba(52, 152, 219, 0.3); }

.week-tpl-delete-btn {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}
.week-tpl-delete-btn:hover { background: rgba(231, 76, 60, 0.3); }

/* Miniature canvas dans les cartes semaine type — logo haut-droit */
.week-tpl-minimap {
    display: block;
    width: 36px;
    height: 28px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
    cursor: default;
    overflow: hidden;
}

/* Popup d'aperçu au survol — canvas seul, pas de texte */
.tpl-preview-popup {
    position: fixed;
    z-index: 9997;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 14px 50px rgba(0,0,0,0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    overflow: hidden;
    line-height: 0;
}
.tpl-preview-popup.visible { opacity: 1; }

/* Icon & Color pickers inside save modal */
.week-tpl-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.week-tpl-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}
.week-tpl-icon-btn:hover { background: var(--bg-secondary); }
.week-tpl-icon-btn.selected {
    border-color: #a855f7;
    background: rgba(168,85,247,0.15);
}

.week-tpl-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.week-tpl-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
}
.week-tpl-color-dot:hover { transform: scale(1.1); }
.week-tpl-color-dot.selected { border-color: white; transform: scale(1.15); }

/* =============================================
   MARQUEUR TEMPOREL (NOW LINE)
   ============================================= */

.now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1.5px solid rgba(239, 68, 68, 0.5);
    pointer-events: none;
    z-index: 15;
}

/* Zone de survol élargie (invisible, 16px de hauteur centrée sur la ligne) */
.now-line::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 17px;
    pointer-events: auto;
    cursor: default;
}

.now-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 0 3px rgba(239,68,68,0.4);
}

.now-line-time {
    position: absolute;
    left: 55px;
    top: -9px;
    font-size: 10px;
    font-weight: 700;
    color: #ef4444;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0.05em;
    user-select: none;
    white-space: nowrap;
    background: rgba(15, 15, 15, 0.82);
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    /* Caché par défaut, visible au survol */
    opacity: 0;
    transition: opacity 0.18s ease;
}

.now-line:hover .now-line-time {
    opacity: 1;
}

/* =============================================
   NOTES DE TÂCHE
   ============================================= */

.task-notes-textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-family);
    resize: vertical;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.task-notes-textarea:focus { border-color: rgba(168,85,247,0.6); }

.task-note-indicator {
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: default;
    z-index: 5;
    flex-shrink: 0;
    filter: drop-shadow(0 0 1.5px rgba(0,0,0,1)) drop-shadow(0 0 1px rgba(0,0,0,1));
    transition: transform 0.15s;
}

.task-note-indicator:hover {
    transform: scale(1.1);
}


.task-note-indicator svg {
    display: block;
    pointer-events: none;
}

.task-note-indicator.large-task-indicator {
    width: 34px;
    height: 34px;
}

/* =============================================
   PREMIUM SECTION — SETTINGS
   ============================================= */

.settings-premium-section {
    margin-bottom: 6px;
}

/* Carte non-abonné */
.premium-upgrade-card {
    background: linear-gradient(135deg, rgba(255,193,7,0.12) 0%, rgba(255,152,0,0.08) 50%, rgba(255,87,34,0.06) 100%);
    border: 1px solid rgba(255,193,7,0.3);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.premium-upgrade-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-crown-icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(255,193,7,0.4));
}

.premium-upgrade-text {
    flex: 1;
}

.premium-upgrade-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.premium-upgrade-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.premium-price-badge {
    background: rgba(255,193,7,0.15);
    border: 1px solid rgba(255,193,7,0.35);
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #ffc107;
    white-space: nowrap;
}

.premium-price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.premium-price-annual-hint {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.premium-price-annual-hint b {
    color: #ffc107;
    font-weight: 800;
}

.premium-price-badge span {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.8;
}

.premium-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pf-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(var(--ink),0.04);
    border-radius: 7px;
    padding: 5px 9px;
}

.pf-icon {
    font-size: 13px;
}

.btn-go-premium {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #111;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.3px;
}

.btn-go-premium:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* Carte abonné actif */
.premium-active-card {
    background: linear-gradient(135deg, rgba(76,175,80,0.1), rgba(56,142,60,0.07));
    border: 1px solid rgba(76,175,80,0.45);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.premium-active-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-active-crown {
    font-size: 26px;
    filter: drop-shadow(0 2px 4px rgba(255,193,7,0.4));
}

.premium-active-label {
    font-size: 14px;
    font-weight: 700;
    color: #4caf50;
}

.premium-active-since {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.btn-manage-premium {
    background: rgba(255,193,7,0.12);
    border: 1px solid rgba(255,193,7,0.3);
    color: #ffc107;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-manage-premium:hover {
    background: rgba(255,193,7,0.2);
}

/* =============================================
   MOBILE — Caché par défaut, visible sur mobile
   ============================================= */

.mobile-fab,
.mobile-sheet-overlay,
.mobile-place-hint,
.mobile-menu-btn { display: none; }

.mobile-sheet-handle { display: none; }

/* =============================================
   MOBILE RESPONSIVE ≤ 768px
   ============================================= */

@media (max-width: 768px) {

    * { -webkit-tap-highlight-color: transparent; }

    html, body {
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* ── Layout global ── */
    .container { height: 100dvh; overflow: hidden; }

    .main-content {
        height: 100dvh;
        overflow: hidden;
        padding: 0;
        gap: 0;
    }

    /* ── Safe area (encoche Android / iOS) ── */
    .calendar-section {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    /* ── Sidebar → Volet gauche ── */
    .task-templates {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: 270px !important;
        max-width: 88vw !important;
        height: 100dvh !important;
        max-height: none !important;
        z-index: 500;
        border-radius: 0 16px 16px 0 !important;
        border: none !important;
        border-right: 1px solid rgba(168, 85, 247, 0.4) !important;
        transform: translateX(-110%);
        transition: transform 0.32s cubic-bezier(0.32, 1.1, 0.64, 1);
        padding: 56px 14px 30px !important;
        box-shadow: 10px 0 50px rgba(0, 0, 0, 0.75) !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        display: flex !important;
    }
    .task-templates.mobile-open {
        transform: translateX(0) !important;
    }

    /* Poignée : cachée pour le volet gauche */
    .mobile-sheet-handle { display: none !important; }

    /* ── Section Calendrier : plein écran ── */
    .calendar-section {
        width: 100% !important;
        flex: 1 !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* ── Bouton hamburger ☰ : visible uniquement mobile ── */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        background: none !important;
        border: none !important;
        color: rgba(var(--ink),0.85) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        touch-action: manipulation !important;
    }

    /* ── Header compact — hauteur fixe 50px, une seule ligne ── */
    .calendar-header {
        flex-direction: row !important;
        padding: 0 6px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        overflow: hidden !important;
        align-items: center !important;
    }

    /* Gauche : juste le ☰ */
    .header-left {
        flex-direction: row !important;
        gap: 0 !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    .app-title { display: none !important; }
    .zoom-undo-row { display: none !important; }

    /* Centre : date de la semaine */
    .header-center {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: center !important;
    }
    #weekDisplay {
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1 !important;
    }
    .live-datetime { display: none !important; }

    /* Droite : ⚙ + PDF + ◄ Aujourd'hui ► */
    .header-controls {
        gap: 4px !important;
        flex-shrink: 0 !important;
        align-items: center !important;
    }
    /* Cacher les boutons inutiles sur mobile */
    .btn-account,
    .btn-stats,
    .btn-share,
    .btn-month-view,
    .btn-reset-week,
    .partner-indicator,
    .share-wrapper,
    .account-btn-wrapper { display: none !important; }

    /* Garder ⚙ et PDF, taille réduite */
    .btn-settings {
        display: flex !important;
        width: 30px !important; height: 30px !important;
        padding: 0 !important;
        align-items: center !important; justify-content: center !important;
    }
    .btn-settings svg { width: 18px !important; height: 18px !important; }
    .btn-export-pdf {
        display: flex !important;
        width: 30px !important; height: 30px !important;
        padding: 0 !important;
        align-items: center !important; justify-content: center !important;
    }
    .btn-export-pdf svg { width: 18px !important; height: 18px !important; }

    .week-nav-group { gap: 2px !important; }
    .nav-btn.btn-today { padding: 4px 8px !important; font-size: 11px !important; }
    .nav-arrow-btn { width: 26px !important; height: 26px !important; font-size: 10px !important; }

    /* ── Barre objectif — cachée sur mobile (gagne de la place) ── */
    .week-objective-bar { display: none !important; }

    /* ── Corps calendrier : scroll vertical autorisé ── */
    .calendar-body {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
    }
    .calendar-wrapper {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    .calendar-zoom-inner {
        height: 100% !important;
        zoom: 1 !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }

    /* ── Grille : 7 colonnes égales, pas de débordement ── */
    .calendar-grid {
        min-width: 0 !important;
        overflow: hidden !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
    .day-column {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .day-name,
    .day-date {
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .day-slots {
        overflow: hidden !important;
    }
    .day-slot {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* ── Colonne temps ── */
    .time-column {
        min-width: 28px !important;
        width: 28px !important;
        border-right: 1px solid rgba(var(--ink),0.1) !important;
    }
    .time-slot {
        font-size: 8px !important;
        padding: 0 2px 0 0 !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        color: rgba(var(--ink),0.7) !important;
        font-weight: 600 !important;
    }

    /* ── En-têtes jours compacts — plats, sans coins arrondis ── */
    .day-header,
    .day-header[data-day="0"],
    .day-header[data-day="1"],
    .day-header[data-day="2"],
    .day-header[data-day="3"],
    .day-header[data-day="4"],
    .day-header[data-day="5"],
    .day-header[data-day="6"] {
        border-radius: 0 !important;
        padding: 2px 1px !important;
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        border-bottom: 2px solid rgba(255,255,255,0.15) !important;
    }
    .day-name {
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }
    .day-date {
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    /* ── Tâches compactes ── */
    .scheduled-task { font-size: 8px !important; border-radius: 3px !important; }
    .task-name { font-size: 8px !important; line-height: 1.1 !important; }
    .task-time-start,
    .task-time-end { font-size: 7px !important; }

    /* Handles de resize : plus larges pour les doigts ── */
    .resize-handle-top,
    .resize-handle-bottom {
        height: 14px !important;
        min-height: 14px !important;
        opacity: 0.6;
    }

    /* ── FAB Button ── */
    .mobile-fab {
        display: flex !important;
        position: fixed;
        bottom: 20px;
        right: 16px;
        z-index: 450;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, #9b59b6, #7c3aed);
        border: none;
        color: white;
        box-shadow: 0 4px 24px rgba(155, 89, 182, 0.7),
                    0 0 0 1px rgba(168, 85, 247, 0.5);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.22s ease;
        touch-action: manipulation;
    }
    .mobile-fab:active {
        transform: scale(0.88);
        box-shadow: 0 2px 12px rgba(155, 89, 182, 0.5);
    }
    .mobile-fab.panel-open { transform: rotate(45deg); }
    .mobile-fab.panel-open:active { transform: rotate(45deg) scale(0.88); }

    /* ── Overlay ── */
    .mobile-sheet-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 490;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        touch-action: none;
    }
    .mobile-sheet-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Barre de placement ── */
    .mobile-place-hint {
        display: flex !important;
        position: fixed;
        top: -70px;
        left: 0;
        right: 0;
        z-index: 460;
        background: linear-gradient(135deg,
            rgba(124, 58, 237, 0.97),
            rgba(155, 89, 182, 0.97));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 11px 16px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(168, 85, 247, 0.5);
        transition: top 0.3s cubic-bezier(0.34, 1.1, 0.64, 1);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }
    .mobile-place-hint.visible { top: 0; }

    .mobile-place-hint-text {
        font-size: 12px;
        font-weight: 600;
        color: rgba(var(--ink), 0.95);
        flex: 1;
        line-height: 1.3;
    }
    .mobile-place-hint-cancel {
        background: rgba(var(--ink), 0.18);
        border: 1px solid rgba(var(--ink), 0.25);
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        touch-action: manipulation;
        line-height: 1;
    }

    /* ── Template sélectionné sur mobile ── */
    .task-template.mobile-selected {
        outline: 2px solid rgba(var(--ink), 0.9) !important;
        box-shadow: 0 0 18px rgba(168, 85, 247, 0.7) !important;
        transform: scale(1.03) !important;
    }

    /* ── SLOTS : 14px chacun, fusionnés par groupe de 4 = 1 bloc/heure ──
       Résultat visuel : 16 blocs (1 par heure) de 56px, comme Replit    ── */

    /* Base commune : toutes les cases */
    .day-slot {
        height:     14px !important;
        min-height: 14px !important;
        max-height: 14px !important;
        background: rgba(0,0,0,0.2) !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 1px !important;
    }

    /* 1ère case de l'heure : bord haut + coins haut arrondis */
    .day-slot.quarter-slot-first,
    .day-slot.hour-slot-top {
        border-radius: 4px 4px 0 0 !important;
        border-top:   1.5px solid rgba(var(--ink),0.2) !important;
        border-left:  1.5px solid rgba(var(--ink),0.2) !important;
        border-right: 1.5px solid rgba(var(--ink),0.2) !important;
        border-bottom: none !important;
        margin-top: 2px !important;
    }

    /* Cases du milieu : côtés seulement */
    .day-slot.quarter-slot-mid {
        border-radius: 0 !important;
        border-top:    none !important;
        border-bottom: none !important;
        border-left:  1.5px solid rgba(var(--ink),0.2) !important;
        border-right: 1.5px solid rgba(var(--ink),0.2) !important;
    }

    /* Dernière case de l'heure : bord bas + coins bas arrondis */
    .day-slot.quarter-slot-last,
    .day-slot.hour-slot-bottom {
        border-radius: 0 0 4px 4px !important;
        border-bottom: 1.5px solid rgba(var(--ink),0.2) !important;
        border-left:   1.5px solid rgba(var(--ink),0.2) !important;
        border-right:  1.5px solid rgba(var(--ink),0.2) !important;
        border-top:    none !important;
        margin-bottom: 0 !important;
    }

    /* Couleurs par jour */
    .day-column[data-day="0"] .day-slot.quarter-slot-first,
    .day-column[data-day="0"] .day-slot.quarter-slot-mid,
    .day-column[data-day="0"] .day-slot.quarter-slot-last,
    .day-column[data-day="0"] .day-slot.hour-slot-top,
    .day-column[data-day="0"] .day-slot.hour-slot-bottom
        { border-color: rgba(155, 89,182,0.65) !important; }

    .day-column[data-day="1"] .day-slot.quarter-slot-first,
    .day-column[data-day="1"] .day-slot.quarter-slot-mid,
    .day-column[data-day="1"] .day-slot.quarter-slot-last,
    .day-column[data-day="1"] .day-slot.hour-slot-top,
    .day-column[data-day="1"] .day-slot.hour-slot-bottom
        { border-color: rgba(232, 16, 14,0.65) !important; }

    .day-column[data-day="2"] .day-slot.quarter-slot-first,
    .day-column[data-day="2"] .day-slot.quarter-slot-mid,
    .day-column[data-day="2"] .day-slot.quarter-slot-last,
    .day-column[data-day="2"] .day-slot.hour-slot-top,
    .day-column[data-day="2"] .day-slot.hour-slot-bottom
        { border-color: rgba(243,156, 18,0.65) !important; }

    .day-column[data-day="3"] .day-slot.quarter-slot-first,
    .day-column[data-day="3"] .day-slot.quarter-slot-mid,
    .day-column[data-day="3"] .day-slot.quarter-slot-last,
    .day-column[data-day="3"] .day-slot.hour-slot-top,
    .day-column[data-day="3"] .day-slot.hour-slot-bottom
        { border-color: rgba(241,196, 15,0.65) !important; }

    .day-column[data-day="4"] .day-slot.quarter-slot-first,
    .day-column[data-day="4"] .day-slot.quarter-slot-mid,
    .day-column[data-day="4"] .day-slot.quarter-slot-last,
    .day-column[data-day="4"] .day-slot.hour-slot-top,
    .day-column[data-day="4"] .day-slot.hour-slot-bottom
        { border-color: rgba( 46,204,113,0.65) !important; }

    .day-column[data-day="5"] .day-slot.quarter-slot-first,
    .day-column[data-day="5"] .day-slot.quarter-slot-mid,
    .day-column[data-day="5"] .day-slot.quarter-slot-last,
    .day-column[data-day="5"] .day-slot.hour-slot-top,
    .day-column[data-day="5"] .day-slot.hour-slot-bottom
        { border-color: rgba( 26,188,156,0.65) !important; }

    .day-column[data-day="6"] .day-slot.quarter-slot-first,
    .day-column[data-day="6"] .day-slot.quarter-slot-mid,
    .day-column[data-day="6"] .day-slot.quarter-slot-last,
    .day-column[data-day="6"] .day-slot.hour-slot-top,
    .day-column[data-day="6"] .day-slot.hour-slot-bottom
        { border-color: rgba( 52,152,219,0.65) !important; }

    /* Time slot hauteur identique */
    .time-slot:not(.time-slot-header) {
        height:     14px !important;
        min-height: 14px !important;
    }

    /* Colonnes : pas de bordure verticale */
    .day-column { border-right: none !important; padding: 0 !important; }

    /* Scroll vertical sur le calendrier */
    .calendar-body { overflow-y: auto !important; overflow-x: hidden !important; }
    .calendar-wrapper { overflow: visible !important; }
    .calendar-zoom-inner { overflow: visible !important; height: auto !important; }
    .day-slots { overflow: visible !important; }

    /* ── Handles de redimensionnement sidebar cachés ── */
    .sidebar-resize-handle { display: none !important; }

    /* ── Modales ── */
    .modal-content {
        max-width: calc(100vw - 20px) !important;
        width: calc(100vw - 20px) !important;
        margin: auto 10px !important;
        max-height: 88vh !important;
    }
    .auth-modal-content {
        max-width: calc(100vw - 20px) !important;
    }
    .account-dropdown {
        right: 0 !important;
        min-width: 200px !important;
    }
}

/* =============================================
   BOUTON STATS (HEADER)
   ============================================= */
.btn-stats {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}
.btn-stats:hover,
.btn-stats:focus,
.btn-stats:active,
.btn-stats:focus-visible {
    color: var(--text-primary);
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Animation passive : vague de couleur lente (gauche→milieu→droite) ──
   Les barres ne bougent plus : une couleur apparaît doucement sur chacune,
   en séquence (gauche=rouge, puis milieu=jaune pendant que le rouge s'efface,
   puis droite=vert). Cycle lent et permanent. */
@keyframes statLeftRed {
    0%, 30%, 100% { stroke: currentColor; }
    13%           { stroke: #ff5252; }
}
@keyframes statMidBlue {
    0%, 28%, 62%, 100% { stroke: currentColor; }
    45%                { stroke: #4aa3ff; }
}
@keyframes statRightYellow {
    0%, 58%, 92%, 100% { stroke: currentColor; }
    75%                { stroke: #ffd23f; }
}

/* Barre droite (x=18) → jaune */
.btn-stats svg line:nth-child(1) {
    animation: statRightYellow 7s ease-in-out infinite;
}
/* Barre centrale (x=12) → bleu */
.btn-stats svg line:nth-child(2) {
    animation: statMidBlue 7s ease-in-out infinite;
}
/* Barre gauche (x=6) → rouge */
.btn-stats svg line:nth-child(3) {
    animation: statLeftRed 7s ease-in-out infinite;
}
/* Au survol : même vague de couleur, à peine plus rapide */
.btn-stats:hover svg line { animation-duration: 2.8s; }

/* =============================================
   STATS MODAL
   ============================================= */
.stats-modal-content {
    max-width: 560px;
    width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stats-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stats-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-header-left h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.stats-premium-badge {
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255,193,7,0.2), rgba(255,152,0,0.15));
    border: 1px solid rgba(255,193,7,0.35);
    color: #ffc107;
    border-radius: 6px;
    padding: 2px 7px;
}

/* Tabs */
.stats-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stats-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.stats-tab:hover { color: var(--text-primary); }

.stats-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Period selector (4 / 8 / 12 semaines) */
.stats-period-selector {
    display: flex;
    gap: 4px;
    margin-left: auto;
    align-self: center;
    padding-bottom: 8px;
}

.stats-period-btn {
    background: rgba(var(--ink),0.04);
    border: 1px solid rgba(var(--ink),0.08);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.stats-period-btn:hover {
    color: var(--text-primary);
    border-color: rgba(155,89,182,0.4);
}

.stats-period-btn.active {
    background: rgba(155,89,182,0.18);
    border-color: #9b59b6;
    color: var(--text-primary);
}

/* Body */
.stats-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.stats-panel { display: none; }
.stats-panel.active { display: block; }

/* Chart wrap (shared) */
.stats-chart-wrap {
    position: relative;
    background: rgba(var(--ink),0.02);
    border: 1px solid rgba(var(--ink),0.06);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

#statsTrendChart    { width: 100% !important; height: 180px !important; display: block; }
#statsBreakdownChart { width: 100% !important; height: 160px !important; display: block; }

.stats-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 40px 0;
}

/* KPI cards */
.stats-kpi-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.stats-kpi-card {
    flex: 1;
    background: rgba(155,89,182,0.08);
    border: 1px solid rgba(155,89,182,0.2);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stats-kpi-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.stats-kpi-label {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.stats-kpi-trend {
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}
.stats-kpi-trend.up      { color: #4ade80; }
.stats-kpi-trend.down    { color: #f87171; }
.stats-kpi-trend.neutral { color: var(--text-secondary); font-size: 15px; }

/* Insight */
.stats-insight {
    background: rgba(var(--ink),0.03);
    border: 1px solid rgba(var(--ink),0.07);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    line-height: 1.55;
}

.stats-insight:empty { display: none; margin-bottom: 0; }

.stats-insight-line + .stats-insight-line {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--ink),0.06);
}

.stats-insight-line strong { color: var(--text-primary); }

/* Streaks */
.stats-streaks-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stats-streaks-row:not(:empty) { margin-bottom: 14px; }

.stats-streak-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,152,0,0.1);
    border: 1px solid rgba(255,152,0,0.3);
    border-radius: 20px;
    padding: 5px 10px 5px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.stats-streak-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Breakdown ranked list */
.stats-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stats-breakdown-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-breakdown-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.stats-breakdown-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-breakdown-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.stats-breakdown-pct {
    font-size: 11px;
    color: var(--text-secondary);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.stats-breakdown-bar-bg {
    height: 5px;
    background: rgba(var(--ink),0.06);
    border-radius: 3px;
    overflow: hidden;
}

.stats-breakdown-bar-fill {
    height: 100%;
    border-radius: 3px;
    opacity: 0.85;
    transition: width 0.5s ease;
}

/* Duo tab */
.stats-duo-balance {
    background: rgba(var(--ink),0.02);
    border: 1px solid rgba(var(--ink),0.07);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

.stats-duo-balance-msg {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 12px;
}
.stats-duo-balance-msg strong { color: var(--text-primary); }
.stats-duo-balance-msg.equal  { color: #4ade80; font-weight: 600; }

.stats-duo-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-duo-bar-label-left,
.stats-duo-bar-label-right {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 46px;
}
.stats-duo-bar-label-right { text-align: right; }

.stats-duo-bar {
    flex: 1;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
}

.stats-duo-bar-left,
.stats-duo-bar-right { height: 100%; transition: width 0.5s ease; }

.stats-duo-bar-pcts {
    display: flex;
    justify-content: space-between;
    padding: 6px 56px 0;
    font-size: 11px;
    font-weight: 600;
}

.stats-duo-grid {
    display: flex;
    gap: 12px;
}

.stats-duo-col {
    flex: 1;
    background: rgba(var(--ink),0.03);
    border: 1px solid rgba(var(--ink),0.07);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.stats-duo-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.stats-duo-col-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stats-duo-col-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-duo-col-total {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.stats-duo-col-avg {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Duo — comparaison par catégorie */
.stats-duo-compare {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.stats-duo-compare-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.stats-duo-compare-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-duo-compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.stats-duo-compare-name {
    flex: 1;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-duo-compare-vals {
    display: flex;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.stats-duo-compare-bar {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    background: rgba(var(--ink),0.06);
}

.stats-duo-compare-bar-my,
.stats-duo-compare-bar-partner {
    height: 100%;
    transition: width 0.5s ease;
}

.stats-empty-sm {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 10px 0;
}

/* Tooltip survol graphique Tendance */
.stats-trend-tooltip {
    position: fixed;
    display: none;
    flex-direction: column;
    gap: 2px;
    background: rgba(18, 12, 28, 0.96);
    border: 1px solid rgba(192, 132, 252, 0.45);
    border-radius: 9px;
    padding: 8px 13px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    min-width: 155px;
}

.stats-tooltip-range {
    font-size: 11px;
    color: rgba(192, 132, 252, 0.9);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.stats-tooltip-time {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Badge premium inline (à côté des labels) */
.premium-badge-inline {
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255,193,7,0.2), rgba(255,152,0,0.15));
    border: 1px solid rgba(255,193,7,0.35);
    color: #ffc107;
    border-radius: 6px;
    padding: 2px 7px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}

/* Badge 👑 sur "Semaines types" dans la sidebar */
.week-tpl-premium-badge {
    font-size: 12px;
    cursor: pointer;
}

/* Modal "Premium requis" */
.premium-required-header {
    background: linear-gradient(135deg, rgba(255,193,7,0.18), rgba(255,152,0,0.12));
}

.premium-required-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.premium-required-feature-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.premium-required-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    line-height: 1.5;
}

.premium-required-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 12px;
}

.prp-item {
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(var(--ink),0.04);
    border-radius: 7px;
    padding: 5px 9px;
}

.btn-go-premium-modal {
    background: linear-gradient(135deg, #ffc107, #ff9800) !important;
    color: #111 !important;
    font-weight: 700 !important;
    border: none !important;
    width: 100%;
    padding: 11px !important;
    font-size: 14px !important;
    transition: opacity 0.2s, transform 0.15s !important;
}

.btn-go-premium-modal:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* Modal "Choisis ta formule" (sélection de plan Stripe mensuel/annuel) */
.stripe-plan-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(var(--ink),0.04);
    border: 1.5px solid rgba(var(--ink),0.1);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    color: var(--text-primary);
}

.stripe-plan-option:hover {
    border-color: #b44fc7;
    background: rgba(180,79,199,0.09);
    transform: translateY(-1px);
}

.stripe-plan-option:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.stripe-plan-name {
    font-size: 15px;
    font-weight: 700;
}

.stripe-plan-price {
    font-size: 16px;
    font-weight: 800;
    color: #e0aaff;
}

.stripe-plan-price span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.stripe-plan-option-yearly {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.stripe-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.stripe-plan-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stripe-plan-price-old {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: line-through;
    opacity: 0.7;
}

.stripe-plan-savings-inline {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: #ffc107;
}

.stripe-plan-badge {
    position: absolute;
    top: -9px;
    right: 14px;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #111;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
}

.stripe-plan-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    min-height: 16px;
}

/* Modal gérer abonnement */
.premium-active-header {
    background: linear-gradient(135deg, rgba(76,175,80,0.15), rgba(56,142,60,0.1));
}

.manage-premium-status {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(76,175,80,0.08);
    border: 1px solid rgba(255,193,7,0.2);
    border-radius: 12px;
    padding: 14px 18px;
}

.manage-premium-crown {
    font-size: 32px;
}

.manage-premium-label {
    font-size: 15px;
    font-weight: 700;
    color: #4caf50;
}

.manage-premium-since {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
}

/* =============================================
   COLLABORATION SECTION
   ============================================= */

.settings-collab-group {
    border: 1px solid rgba(var(--ink),0.06);
    border-radius: 12px;
    padding: 14px 16px;
    background: rgba(var(--ink),0.02);
}

.collab-label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px !important;
}

.collab-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.collab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collab-row-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.collab-invite-hint {
    font-size: 11.5px;
    color: var(--text-secondary);
    opacity: 0.75;
    margin: 4px 0 10px;
    line-height: 1.4;
}

.collab-color-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: block;
}

.collab-color-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border-radius: 50%;
}

.collab-color-swatch {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ink),0.25);
    pointer-events: none;
    transition: transform 0.15s;
}

.collab-color-wrap:hover .collab-color-swatch {
    transform: scale(1.1);
}

.collab-invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.collab-code-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--ink),0.06);
    border: 1px solid rgba(var(--ink),0.12);
    border-radius: 8px;
    padding: 5px 10px;
}

.collab-code-value {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.btn-copy-code {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.btn-copy-code:hover { color: var(--text-primary); }

.collab-join-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.collab-code-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    transition: border-color 0.2s;
}

.collab-code-input:focus {
    border-color: rgba(74,144,226,0.5);
}

.btn-join-collab {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-join-collab:hover { background: var(--accent-hover); }

.collab-members-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(var(--ink),0.03);
    border: 1px solid rgba(var(--ink),0.07);
    border-radius: 10px;
    padding: 10px 12px;
}

.collab-member-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.collab-member-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(var(--ink),0.2);
}

.collab-member-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.collab-member-tag {
    font-size: 10px;
    color: var(--text-secondary);
    background: rgba(var(--ink),0.06);
    border-radius: 5px;
    padding: 2px 7px;
    font-weight: 500;
}

.collab-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(46,204,113,0.6);
}

.btn-leave-collab {
    background: rgba(231,76,60,0.12);
    border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-leave-collab:hover { background: rgba(231,76,60,0.2); }

.collab-permission-toggle {
    margin-top: 2px;
}

/* Verrou non-premium */
.collab-locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px 2px;
}

.collab-locked-text {
    font-size: 12px;
    color: var(--text-secondary);
}

.btn-collab-unlock {
    background: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(255,152,0,0.1));
    border: 1px solid rgba(255,193,7,0.3);
    color: #ffc107;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-collab-unlock:hover {
    background: linear-gradient(135deg, rgba(255,193,7,0.25), rgba(255,152,0,0.18));
}

.note-tooltip {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 12px;
    max-width: 220px;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    transition: opacity 0.12s ease;
    color: var(--text-primary);
    line-height: 1.45;
}
.note-tooltip.visible { opacity: 1; }

/* ── Tooltip personnalisé (remplace les title natifs) ── */
.custom-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(139,47,201,0.92), rgba(100,30,160,0.88));
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(180,79,199,0.55);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(200,120,255,0.18);
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.14s ease;
    transform: translateX(-50%) translateY(-100%) translateY(-8px);
}
.custom-tooltip.visible { opacity: 1; }

/* =============================================
   OBJECTIF DE LA SEMAINE
   ============================================= */

.week-objective-bar {
    display: flex;
    align-items: stretch;
    padding: 0;
    background: linear-gradient(90deg, rgba(168,85,247,0.08), rgba(168,85,247,0.04));
    border-bottom: 1px solid rgba(168,85,247,0.18);
    min-height: 36px;
    overflow: hidden;
}

/* ── Moitié gauche/droite ── */
.week-obj-half {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    min-width: 0;
}

/* ── Pastille couleur membre (couleur brute, fond neutre) ── */
.week-obj-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Label pseudo (couleur de texte fixe, toujours lisible) ── */
.week-obj-label {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.85;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

/* ── Séparateur vertical ── */
.week-obj-divider {
    width: 1px;
    background: rgba(168,85,247,0.25);
    flex-shrink: 0;
    align-self: stretch;
    margin: 4px 0;
}

.week-objective-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(168,85,247,0.18);
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    padding: 2px 0;
    min-width: 0;
    transition: border-color 0.2s;
}
.week-objective-input:focus {
    border-bottom-color: rgba(168,85,247,0.65);
}
.week-objective-input--readonly {
    cursor: default;
    opacity: 0.85;
}

.week-objective-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.55;
}

/* =============================================
   PRÉFÉRENCES D'ANIMATIONS (réglages)
   - "Animations passives" : coupe les animations décoratives permanentes
     des icônes d'en-tête (elles restent statiques au repos).
   - "Animations au survol" : coupe toute animation déclenchée par :hover,
     partout dans l'app (règle générale + cas particuliers ci-dessous).
   ============================================= */

/* ── Survol : coupe-circuit général, ne touche pas aux transitions de
   couleur/ombre habituelles (juste les "animation" à proprement parler) ── */
body.no-hover-anim *:hover {
    animation: none !important;
}

/* ── Passif : chaque icône d'en-tête listée individuellement, avec
   :not(:hover) quand une variante "survol" existe pour ne pas l'écraser
   quand les animations au survol restent activées. ── */
body.no-passive-anim .btn-add-task,
body.no-passive-anim .btn-account.logged-in,
body.no-passive-anim .auth-verify-icon,
body.no-passive-anim .hide-partner-btn .icon-eye-open,
body.no-passive-anim .help-btn,
body.no-passive-anim .lock-trace,
body.no-passive-anim .lock-body-trace,
body.no-passive-anim .btn-month-view svg rect:nth-child(n+6),
body.no-passive-anim .btn-reset-week::after {
    animation: none !important;
}
body.no-passive-anim .account-sync-dot:not(.syncing) {
    animation: none !important;
}
body.no-passive-anim .help-btn:not(:hover) .help-arc,
body.no-passive-anim .btn-month-view:not(:hover)::before,
body.no-passive-anim .btn-share:not(:hover) .share-glow-path,
body.no-passive-anim .btn-export-pdf:not(:hover) svg,
body.no-passive-anim .btn-stats:not(:hover) svg line {
    animation: none !important;
}

/* =========================================================================
   Sélecteur de couleur maison (remplace <input type="color">)
   Le natif ouvrait la boîte du système : hors charte, et différente sur
   chaque OS. Reprend la présentation de la version mobile.
   ========================================================================= */
.pc-color-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
    padding: 20px;
}
.pc-color-modal.active { display: flex; }

.pc-color-sheet {
    width: 100%;
    max-width: 420px;
    background: #14141c;
    border: 1px solid rgba(157, 61, 201, 0.45);
    border-radius: 18px;
    box-shadow: 0 0 34px rgba(157, 61, 201, 0.30), 0 18px 50px rgba(0, 0, 0, 0.6);
    padding: 18px 18px 16px;
    animation: pcColorIn 170ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes pcColorIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.pc-color-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.pc-color-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #fff; }
.pc-color-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 17px; cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 8px;
}
.pc-color-close:hover { background: rgba(var(--ink), 0.08); color: #fff; }

/* Flex plutôt que grille : en `repeat(10, 1fr)`, les pastilles gardent leur
   `min-width: auto` implicite et, combinées à `aspect-ratio`, refusent de
   descendre sous leur taille intrinsèque — la rangée débordait alors de la
   fenêtre. Ici la taille est fixe et le retour à la ligne automatique. */
.pc-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.pc-color-swatch {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 120ms ease, border-color 120ms ease;
}
.pc-color-swatch:hover { transform: scale(1.14); }
.pc-color-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 10px currentColor;
}

.pc-color-slider-row { margin-bottom: 12px; }
.pc-color-slider-head {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--text-secondary); margin-bottom: 6px;
}
.pc-color-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 12px; border-radius: 999px; outline: none;
    cursor: pointer; padding: 0; border: 1px solid rgba(var(--ink), 0.12);
}
.pc-color-hue {
    background: linear-gradient(90deg,
        #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
        #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.pc-color-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer;
}
.pc-color-slider::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer;
}

.pc-color-foot { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; }
.pc-color-preview {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    border: 1px solid rgba(var(--ink), 0.18);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
}
.pc-color-hex {
    flex: 1; min-width: 0; height: 46px;
    background: rgba(var(--ink), 0.05);
    border: 1px solid rgba(var(--ink), 0.14);
    border-radius: 12px; color: #fff;
    font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
    padding: 0 14px; outline: none; text-transform: uppercase;
}
.pc-color-hex:focus { border-color: var(--neon-2, #9d3dc9); }

.pc-color-ok {
    width: 100%; height: 46px; border: none; border-radius: 12px;
    background: linear-gradient(180deg, #b45cf0, #9d3dc9);
    color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
    box-shadow: 0 0 18px rgba(157, 61, 201, 0.55);
    transition: filter 130ms ease, transform 110ms ease;
}
.pc-color-ok:hover { filter: brightness(1.1); }
.pc-color-ok:active { transform: scale(0.98); }

/* Pastille arc-en-ciel qui ouvre le sélecteur — même repère visuel que sur
   mobile, avec l'anneau gris foncé permanent. */
.pc-color-trigger {
    width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
    cursor: pointer; padding: 0;
    border: 3px solid #4a4a55;
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0%, rgba(var(--ink),0.75) 8%, rgba(var(--ink),0) 55%),
        conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00,
                       #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    transition: transform 130ms ease;
}
.pc-color-trigger:hover { transform: scale(1.08); }

/* Engrenage des paramètres — quart de tour intermittent.
   Le cycle de 9 s laisse ~8 s d'immobilité : le mouvement se remarque au
   coin de l'œil sans devenir une animation permanente qui fatigue.
   Respecte le réglage "animations passives" (classe no-passive-anim). */
@keyframes settings-gear-turn {
    0%, 78%   { transform: rotate(0deg); }
    92%, 100% { transform: rotate(90deg); }
}
.btn-settings svg,
.btn-settings .icon-gear {
    animation: settings-gear-turn 9s ease-in-out infinite;
    transform-origin: center;
}
body.no-passive-anim .btn-settings svg,
body.no-passive-anim .btn-settings .icon-gear {
    animation: none;
}

/* Palette de couleurs — rangée unique (les deux sections "prédéfinies" /
   "sauvegardées" ont été fusionnées, comme sur mobile).
   `auto-fill` : la rangée se remplit selon la largeur disponible et les
   couleurs ajoutées passent naturellement à la ligne suivante, au lieu de
   déborder d'une grille figée à 5 colonnes. */
.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: var(--spacing-sm);
}

/* Bouton "+" en fin de rangée : même gabarit qu'une pastille, mais en
   contour pointillé pour se lire comme une action et non comme une couleur. */
.color-add-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    border: 2px dashed rgba(var(--ink), 0.28);
    color: rgba(var(--ink), 0.65);
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}
.color-add-btn:hover {
    transform: scale(1.1);
    border-color: var(--neon-2, #9d3dc9);
    color: #fff;
    box-shadow: 0 0 14px rgba(157, 61, 201, 0.45);
}