/* =========================================
   OUTILS PAGE STYLES - KOMIT
   ========================================= */

/* --- GLOBAL --- */
.tools-container { max-width: 1300px; margin: 0 auto; padding: 150px 2% 60px; }
.tools-hero { text-align: center; margin-bottom: 3rem; }
.tools-title { font-family: 'Lilita One', sans-serif; font-size: 3rem; color: var(--black); }
.tools-title .highlight { color: var(--komit-orange); }
.tools-subtitle { color: var(--gray-dark); font-size: 1.2rem; margin-top: 0.5rem; }

/* --- NAVIGATION --- */
/* --- NAVIGATION --- */
.tools-nav { 
    display: flex; 
    justify-content: center; 
    gap: 1.5rem; 
    margin-bottom: 4rem; 
    flex-wrap: wrap; 
}

.tool-tab { 
    padding: 1rem 2.5rem; 
    border: 2px solid #eee; 
    background: white; 
    border-radius: 20px; /* Arrondi moderne mais pas "pillule" totale */
    font-family: 'Lilita One', sans-serif; /* Police titre Komit */
    font-size: 1.4rem; 
    color: var(--gray-medium); 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    min-width: 120px; /* Largeur minimale pour l'uniformité */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}


.tool-tab:hover { 
    transform: translateY(-4px); 
    border-color: var(--komit-orange); 
    color: var(--komit-orange); 
    box-shadow: 0 10px 25px rgba(255, 92, 0, 0.15);
}

.tool-tab.active { 
    background: linear-gradient(135deg, var(--komit-orange) 0%, #FF8540 100%); 
    border-color: transparent; 
    color: white; 
    box-shadow: 0 10px 30px rgba(255, 92, 0, 0.4); 
    transform: scale(1.05); /* Petit effet de "pop" */
}

/* --- PANELS --- */
.tool-panel { display: none; animation: fadeIn 0.5s ease-out; }
.tool-panel.active { display: block; }

/* =========================================
   1. IMMERSIVE TIMER
   ========================================= */
.immersive-timer-card {
    position: relative; width: 100%; max-width: 800px; height: 500px; margin: 0 auto; border-radius: 40px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; background: #222; transition: background 0.5s ease;
}
.timer-bg { position: absolute; inset: 0; background-image: url('../assets/timer.png'); background-size: cover; background-position: center; z-index: 1; transition: filter 0.5s ease; }
.timer-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)); z-index: 2; }
.timer-content { position: relative; z-index: 10; text-align: center; color: white; width: 100%; }

/* Display & Pills */
.timer-header-pills { display: flex; justify-content: center; gap: 10px; margin-bottom: 2rem; }
.pill-btn { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 0.6rem 1.2rem; border-radius: 30px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(5px); }
.pill-btn:hover { background: rgba(255, 255, 255, 0.3); }
.pill-btn.active { background: white; color: var(--komit-orange); font-weight: 800; border-color: white; }

.timer-center-stage { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2rem; }
.big-time-display { font-family: 'Lilita One', sans-serif; font-size: 7rem; line-height: 1; text-shadow: 0 10px 30px rgba(0,0,0,0.4); margin-bottom: 0.5rem; transition: color 0.5s ease; }
.timer-state-label { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; opacity: 0.9; transition: color 0.3s; }
.cycle-counter { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 600; background: rgba(255,255,255,0.1); padding: 6px 16px; border-radius: 20px; margin-top: 1rem; backdrop-filter: blur(5px); }

/* Ambiances */
.immersive-timer-card.mode-work .timer-state-label { color: white; }
.immersive-timer-card.mode-work .big-time-display { color: white; }
.immersive-timer-card.mode-break .timer-bg { filter: hue-rotate(45deg); }
.immersive-timer-card.mode-break .timer-state-label { color: white; }
.immersive-timer-card.mode-break .big-time-display { color: #A5D6A7; }

/* Actions */
.timer-actions { display: flex; justify-content: center; gap: 2rem; align-items: center; }
.icon-action-btn { border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.icon-action-btn.secondary { width: 55px; height: 55px; background: rgba(255, 255, 255, 0.15); color: white; backdrop-filter: blur(5px); }
.icon-action-btn.secondary:hover { background: rgba(255, 255, 255, 0.3); }
.icon-action-btn.finish:hover { background: #FF6B6B; }
.icon-action-btn.primary { width: 80px; height: 80px; background: var(--komit-orange); color: white; box-shadow: 0 10px 30px rgba(255, 92, 0, 0.4); }
.icon-action-btn.primary:hover { transform: scale(1.1); background: #ff7b33; }

/* =========================================
   2. PLANNER (3 COLONNES)
   ========================================= */
.planner-layout-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.planner-card { background: white; padding: 2rem; border-radius: 24px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; display: flex; flex-direction: column; }
.step-number { position: absolute; top: -15px; left: 20px; width: 40px; height: 40px; background: var(--komit-violet); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-family: 'Lilita One', sans-serif; font-size: 1.2rem; border: 4px solid var(--bg-soft); }
.card-header { margin-bottom: 1.5rem; border-bottom: 2px solid #f5f5f5; padding-bottom: 1rem; }
.card-header h3 { font-family: 'Lilita One', sans-serif; font-size: 1.6rem; color: var(--black); margin-bottom: 0.2rem; }
.step-explainer { font-size: 0.9rem; color: #888; line-height: 1.4; }

/* Formulaire */
.chunky-form .input-group { margin-bottom: 1.2rem; }
.chunky-form label { display: block; font-weight: 700; margin-bottom: 0.5rem; color: var(--gray-dark); font-size: 0.9rem; }
.chunky-form input[type="text"], .big-input { width: 100%; padding: 1rem; border: 2px solid #eee; border-radius: 16px; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 700; background: #fafafa; transition: all 0.3s; }
.chunky-form input:focus, .big-input:focus, .big-select:focus { border-color: var(--komit-orange); background: white; outline: none; }
.custom-select-wrapper { position: relative; }
.big-select { width: 100%; padding: 1rem; border: 2px solid #eee; border-radius: 16px; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 700; background: #fafafa; appearance: none; cursor: pointer; }
.custom-arrow { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--komit-orange); font-size: 0.8rem; pointer-events: none; }

/* BOUTONS D'ACTION */
.big-action-btn { width: 100%; padding: 1rem; background: linear-gradient(135deg, #FF5C00 0%, #ff8540 100%); color: white; border: none; border-radius: 16px; font-weight: 800; font-size: 1.1rem; font-family: 'Nunito', sans-serif; cursor: pointer; box-shadow: 0 10px 25px rgba(255, 92, 0, 0.25); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; margin-top: auto; }
.big-action-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255, 92, 0, 0.35); }
.big-action-btn:disabled { background: #ccc !important; cursor: default !important; box-shadow: none !important; transform: none !important; }

.big-action-btn.add { background: #F3E5F5; color: var(--komit-violet); box-shadow: none; margin-top: 1.2rem; }
.big-action-btn.add:hover { background: var(--komit-violet); color: white; }
.big-action-btn.validate { background: #10b981; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25); }
.big-action-btn.export { background: var(--komit-violet); box-shadow: 0 10px 25px rgba(102, 46, 155, 0.25); }

/* BOUTON EFFACER (ROUGE) */
.big-action-btn.delete { background: linear-gradient(135deg, #FF5252 0%, #D32F2F 100%); color: white; box-shadow: 0 10px 25px rgba(211, 47, 47, 0.25); margin-top: 1rem; }
.big-action-btn.delete:hover { background: linear-gradient(135deg, #FF1744 0%, #B71C1C 100%); transform: translateY(-2px); box-shadow: 0 15px 35px rgba(211, 47, 47, 0.35); }
.big-action-btn.delete.agenda-delete { width: auto; padding: 0.8rem 2.5rem; margin: 0 auto; display: block; font-size: 1rem; }

.final-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: auto; }
.mini-list { margin-top: 1.5rem; max-height: 250px; overflow-y: auto; flex-grow: 1; border-top: 1px solid #f5f5f5; padding-top: 1rem; }
.course-item { background: #fff; border-left: 4px solid var(--komit-violet); padding: 10px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-radius: 0 8px 8px 0; display: flex; justify-content: space-between; align-items: center; }
.empty-state { text-align: center; color: #ccc; font-style: italic; padding: 2rem 0; }
.delete-course { color: #ff6b6b; cursor: pointer; font-weight: bold; padding: 5px; }
.strategy-box { text-align: center; margin: 2rem 0; }
.hours-display { font-size: 3rem; font-weight: 900; color: var(--komit-orange); font-family: 'Lilita One', sans-serif; }
.big-slider { width: 100%; margin: 1.5rem 0; accent-color: var(--komit-orange); height: 8px; cursor: pointer; }
.schedule-list { flex-grow: 1; margin-bottom: 1rem; max-height: 300px; overflow-y: auto; }
.empty-result { text-align: center; color: #ccc; margin-top: 3rem; }
.schedule-row { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid #f5f5f5; }
.schedule-row strong { color: var(--komit-violet); font-size: 1.1rem; background: #F3E5F5; padding: 4px 10px; border-radius: 8px; }

/* =========================================
   3. AGENDA
   ========================================= */
#my-calendar { background: white; padding: 2rem; border-radius: 30px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); position: relative; min-height: 600px; display: flex; flex-direction: column; }
.calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #f5f5f5; }
.calendar-title h3 { font-family: 'Lilita One', sans-serif; font-size: 2rem; color: var(--black); margin: 0; }
.nav-cal-btn { width: 45px; height: 45px; border-radius: 50%; background: white; border: 2px solid #eee; color: var(--gray-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.nav-cal-btn:hover { border-color: var(--komit-orange); color: var(--komit-orange); }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; flex-grow: 1; }
.day-column-wrapper { display: flex; flex-direction: column; height: 500px; background: #fff; border-radius: 16px; border: 1px solid #eee; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.day-col-header { text-align: center; padding: 12px 5px; background: #F9FAFB; border-bottom: 1px solid #eee; }
.day-name { display: block; font-size: 0.8rem; font-weight: 800; color: #999; text-transform: uppercase; }
.day-date { display: block; font-size: 1.5rem; font-weight: 900; color: var(--black); font-family: 'Nunito', sans-serif; line-height: 1; }
.day-col-header.today { background: #FFF3E0; }
.day-col-header.today .day-name, .day-col-header.today .day-date { color: var(--komit-orange); }
.day-col-body { flex-grow: 1; background: white; padding: 8px; position: relative; background-image: linear-gradient(#fcfcfc 1px, transparent 1px); background-size: 100% 30px; overflow-y: auto; transition: background-color 0.2s; }
.day-col-body.drag-over { background-color: #F3E5F5; box-shadow: inset 0 0 0 2px var(--komit-violet); }
.cal-event { background: white; border-left: 4px solid var(--komit-orange); padding: 8px 10px; margin-bottom: 8px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); font-size: 0.85rem; cursor: grab; transition: transform 0.2s; position: relative; border: 1px solid #f0f0f0; }
.cal-event:hover { transform: scale(1.02); z-index: 10; }
.cal-event:active { cursor: grabbing; }
.cal-event.dragging { opacity: 0.5; }
.cal-event time { display: block; font-weight: 800; color: var(--komit-orange); margin-bottom: 2px; font-size: 0.7rem; }
.cal-event span { display: block; line-height: 1.3; color: #333; font-weight: 700; }
.duration-badge { display: inline-block; background: rgba(255, 92, 0, 0.1); color: var(--komit-orange); font-weight: 800; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; margin-bottom: 4px; }
.cal-event.auto { border-left-color: var(--komit-violet); }
.cal-event.auto .duration-badge { background: rgba(102, 46, 155, 0.1); color: var(--komit-violet); }
.cal-event.auto time { color: var(--komit-violet); }
.cal-event.cat-cours { border-left-color: var(--komit-orange); }
.cal-event.cat-exam { border-left-color: #E91E63; }
.cal-event.cat-sport { border-left-color: #4CAF50; }
.cal-event.cat-perso { border-left-color: #2196F3; }
.delete-event-btn { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; background: #f0f0f0; color: #888; border: none; cursor: pointer; font-size: 12px; line-height: 1; display: none; align-items: center; justify-content: center; border-radius: 50%; z-index: 15; }
.delete-event-btn:hover { background: #FF6B6B; color: white; }
.cal-event:hover .delete-event-btn { display: flex; }
.calendar-footer-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #f5f5f5; display: flex; justify-content: center; }
.fab-add-event { position: fixed; bottom: 30px; right: 30px; width: 65px; height: 65px; background: var(--komit-orange); color: white; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 10px 25px rgba(102, 46, 155, 0.4); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; z-index: 999; }
.fab-add-event:hover { transform: scale(1.1) rotate(90deg); }
/* =========================================
   4. FLASHCARDS
   ========================================= */
.library-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.library-header h2 { font-family: 'Lilita One', sans-serif; font-size: 2rem; color: var(--black); }
.decks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.deck-card { background: white; border-radius: 24px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 2px solid #f0f0f0; cursor: pointer; transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 200px; }
.deck-card:hover { transform: translateY(-5px); border-color: var(--komit-orange); box-shadow: 0 15px 40px rgba(255, 92, 0, 0.15); }
.deck-delete-btn { position: absolute; top: 15px; right: 15px; background: #FFEBEE; color: #D32F2F; border: none; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s; font-size: 1.2rem; line-height: 1; opacity: 0; }
.deck-card:hover .deck-delete-btn { opacity: 1; }
.deck-delete-btn:hover { background: #FFCDD2; transform: scale(1.1); }
.deck-title { font-family: 'Lilita One', sans-serif; font-size: 1.6rem; margin-bottom: 0.8rem; color: var(--black); }
.deck-count { color: var(--gray-dark); font-weight: 800; background: #f5f5f5; padding: 6px 14px; border-radius: 20px; font-size: 0.9rem; }
.review-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 2rem; }
.komit-back-btn { background: white; border: 2px solid #eee; color: var(--gray-dark); padding: 8px 20px; border-radius: 50px; font-weight: 800; cursor: pointer; font-size: 1rem; display: flex; align-items: center; gap: 8px; width: fit-content; transition: all 0.2s; }
.komit-back-btn:hover { border-color: var(--komit-orange); color: var(--komit-orange); }
.deck-info-center { text-align: center; }
.deck-review-title { font-size: 1.8rem; margin: 0; color: var(--black); font-family: 'Lilita One', sans-serif; line-height: 1.2; }
.card-counter-badge { display: inline-block; background: #f0f0f0; padding: 4px 12px; border-radius: 12px; font-weight: 800; font-size: 0.9rem; color: #666; margin-top: 5px; }
.score-display { display: flex; gap: 10px; justify-content: flex-end; }
.score-pill { font-weight: 900; font-family: 'Nunito', sans-serif; padding: 8px 16px; border-radius: 30px; font-size: 1rem; border: 2px solid transparent; }
.score-pill.good { background: #E8F5E9; color: #2E7D32; border-color: #C8E6C9; }
.score-pill.bad { background: #FFEBEE; color: #C62828; border-color: #FFCDD2; }
.flashcard-container { perspective: 1000px; width: 100%; max-width: 600px; height: 350px; margin: 0 auto 1.5rem; }
.flashcard { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer; box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-radius: 30px; }
.flashcard.flipped { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 3px solid rgba(0,0,0,0.05); }
.card-front { background: linear-gradient(135deg, #FF5C00 0%, #FF8540 100%); color: white; }
.card-front .face-label { color: rgba(255,255,255,0.8); }
.card-front .card-content p { color: white; }
.card-front .click-instruction { color: rgba(255,255,255,0.6); }
.card-back { background: var(--komit-violet); transform: rotateY(180deg); border: none; border-bottom: 8px solid #4a1d75; color: white; }
.card-back .face-label { color: rgba(255,255,255,0.7); }
.card-back .card-content p { color: white; }
.face-label { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-weight: 900; font-size: 0.9rem; letter-spacing: 2px; }
.card-content p { font-size: 2rem; font-weight: 800; font-family: 'Nunito', sans-serif; line-height: 1.4; padding: 0 1rem; }
.click-instruction { position: absolute; bottom: 25px; font-size: 0.85rem; font-weight: 700; }

/* --- 4 BOUTONS FLASHCARDS REDESIGNÉS --- */

/* Conteneur bouton supprimer (centré) */
.card-actions-row { display: flex; justify-content: center; margin-bottom: 2rem; }

/* 1. Bouton SUPPRIMER CETTE FICHE */
.trash-action-btn { 
    background: white; 
    border: 2px solid #FFCDD2; 
    color: #D32F2F; 
    padding: 0.7rem 1.8rem; 
    border-radius: 50px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    font-size: 0.95rem; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.1);
}
.trash-action-btn:hover { 
    background: #D32F2F; 
    color: white; 
    border-color: #D32F2F;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.2);
}

/* Conteneur boutons vote */
.review-controls { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap;}

/* Base commune boutons vote */
.control-btn { 
    padding: 1rem 2rem; 
    border-radius: 50px; 
    font-weight: 900; 
    font-size: 1.1rem; 
    border: none; 
    cursor: pointer; 
    transition: all 0.2s; 
    min-width: 160px; 
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.control-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }

/* 2. Bouton À REVOIR (Rouge Komit style) */
.control-btn.missed { 
    border: 3px solid #FF5252; 
    background: #FF5252; 
    color: white; 
}
.control-btn.missed:hover { 
    background: #ff2323; 
    color: white; 
}

/* 3. Bouton COMPRIS (Vert Komit style) */
.control-btn.got-it { 
    background: #10B981; 
    color: white; 
    border: 3px solid #10B981; 
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}
.control-btn.got-it:hover { 
    background: #059669; 
    border-color: #059669;
}

/* 4. Bouton AJOUTER UNE FICHE (Lien bas de page) */
.deck-actions-footer { text-align: center; margin-top: 1rem; }

.text-action-btn { 
    background: var(--komit-violet); 
    border: 2px solid var(--komit-violet); 
    color: white; 
    font-weight: 800; 
    cursor: pointer; 
    font-size: 1rem; 
    padding: 0.8rem 2rem;
    border-radius: 50px;
    transition: all 0.2s; 
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 5px 15px rgba(255, 92, 0, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none; /* Enlève soulignement */
}
.text-action-btn:hover { 
    background: var(--komit-violet); 
    color: white; 
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 92, 0, 0.3);
}

/* Fin de session */
.final-score-box { background: #fff; padding: 2rem; border-radius: 24px; margin: 2rem auto; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 2px solid #f0f0f0; }
.big-score { font-size: 3rem; font-family: 'Lilita One', sans-serif; margin-top: 1rem; }
#endSessionContainer #restartDeckBtn, #endSessionContainer #backLibEndBtn { background: white; color: var(--komit-orange); border: 2px solid var(--komit-orange); border-radius: 50px; padding: 0.9rem 2rem; font-weight: 800; font-size: 1.1rem; font-family: 'Nunito', sans-serif; cursor: pointer; transition: all 0.2s; text-decoration: none; box-shadow: none; width: 100%; max-width: 320px; margin: 10px auto; display: block; }
#endSessionContainer #restartDeckBtn:hover, #endSessionContainer #backLibEndBtn:hover { background: var(--komit-orange); color: white; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 92, 0, 0.2); }
/* =========================================
   5. TO-DO LIST (DESIGN KOMIT)
   ========================================= */
.todo-layout {
    display: flex; justify-content: center; width: 100%;
}

.todo-card {
    background: white; border-radius: 30px; padding: 2.5rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05); border: 2px solid #f0f0f0;
    width: 100%; max-width: 600px;
    min-height: 500px; display: flex; flex-direction: column;
}

/* Header */
.todo-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #f5f5f5;
}

.todo-header h2 {
    font-family: 'Lilita One', sans-serif; font-size: 2.2rem; color: var(--black); margin: 0;
    text-transform: capitalize; letter-spacing: 0.5px;
}

/* Input */
.todo-input-group {
    display: flex; gap: 15px; margin-bottom: 2rem; position: relative;
}

.todo-input-group input {
    flex: 1; padding: 1.1rem 1.5rem; border: 2px solid #eee; border-radius: 50px;
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1rem;
    background: #FAFAFA; transition: all 0.3s;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.todo-input-group input:focus {
    background: white; border-color: var(--komit-orange); outline: none;
    box-shadow: 0 5px 15px rgba(255, 92, 0, 0.15);
}

/* Dans outils.css, remplacez le bloc .todo-add-btn par celui-ci */

.todo-add-btn {
    width: 60px; 
    height: 60px; 
    
    /* --- MODIFICATIONS RESPONSIVE --- */
    min-width: 60px; /* Empêche la largeur de descendre sous 60px */
    min-height: 60px; /* Empêche la hauteur de descendre sous 60px */
    flex-shrink: 0;   /* Interdit au bouton de s'écraser si l'écran est petit */
    /* -------------------------------- */

    border-radius: 50%; 
    border: none;
    background: linear-gradient(135deg, #FF5C00 0%, #FF8540 100%);
    color: white; 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 20px rgba(255, 92, 0, 0.3);
}

.todo-add-btn:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 12px 25px rgba(255, 92, 0, 0.4);
}

/* Liste */
.todo-list {
    list-style: none; padding: 0; margin: 0; flex-grow: 1;
}

.todo-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.2rem; margin-bottom: 1rem;
    background: white; border: 2px solid #f5f5f5; border-radius: 20px;
    transition: all 0.2s ease; cursor: pointer;
    animation: slideUp 0.3s ease;
}

.todo-item:hover {
    border-color: #eee; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

/* Checkbox "Bubble" */
.todo-check {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid #eee; background: white;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;
}

.todo-check::after {
    content: '✓'; color: white; font-weight: 900; font-size: 0.9rem;
    display: none; transform: scale(0); transition: transform 0.2s;
}

.todo-item.completed {
    background: #F9FAFB; border-color: transparent; opacity: 0.6;
}

.todo-item.completed .todo-check {
    background: var(--komit-orange); border-color: var(--komit-orange);
    transform: scale(1.1);
}

.todo-item.completed .todo-check::after {
    display: block; transform: scale(1);
}

.todo-text {
    flex: 1; font-weight: 700; color: #333; font-size: 1.1rem;
    transition: color 0.2s; font-family: 'Nunito', sans-serif;
}

.todo-item.completed .todo-text {
    text-decoration: line-through; color: #aaa;
}

.todo-delete-btn {
    background: none; border: none; color: #ddd; cursor: pointer;
    font-size: 1.5rem; line-height: 1; transition: color 0.2s; padding: 0 5px;
}

.todo-delete-btn:hover { color: #FF5252; }

.empty-todo {
    text-align: center; color: #aaa; font-style: italic; margin-top: 4rem;
    font-size: 1.1rem;
}

/* MODALES */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index: 9999; display: none; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; animation: fadeIn 0.3s ease; }
.modal-card { background: white; width: 90%; max-width: 400px; border-radius: 24px; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative; animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.modal-header h4 { font-family: 'Lilita One', sans-serif; font-size: 1.5rem; margin: 0; color: var(--komit-violet); }
.close-icon { background: none; border: none; font-size: 2rem; cursor: pointer; color: #999; line-height: 1; }
.modal-body .input-group { margin-bottom: 1rem; }
.modal-body label { display: block; font-weight: 700; margin-bottom: 0.5rem; font-size: 0.9rem; }
.modal-body input, .modal-body select { width: 100%; padding: 1rem; border: 2px solid #eee; border-radius: 12px; font-family: 'Nunito', sans-serif; font-weight: 600; }
.row-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.extended-modal { max-width: 600px; width: 95%; }
.chips-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.chip-btn { padding: 8px 16px; border-radius: 50px; border: 2px solid #eee; background: white; color: var(--gray-dark); font-family: 'Nunito', sans-serif; font-weight: 700; cursor: pointer; transition: all 0.2s; font-size: 0.9rem; }
.chip-btn:hover { border-color: var(--komit-orange); }
.chip-btn.active { background: var(--komit-orange); color: white; border-color: var(--komit-orange); box-shadow: 0 4px 10px rgba(255, 92, 0, 0.3); }
.chip-btn[data-type="exam"].active { background: #E91E63; border-color: #E91E63; box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3); }
.chip-btn[data-type="sport"].active { background: #4CAF50; border-color: #4CAF50; box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3); }
.chip-btn[data-type="perso"].active { background: #2196F3; border-color: #2196F3; box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3); }
.big-textarea { width: 100%; padding: 1rem; border: 2px solid #eee; border-radius: 16px; font-family: 'Nunito', sans-serif; font-size: 0.95rem; resize: none; background: #fafafa; }
.big-textarea:focus { border-color: var(--komit-orange); background: white; outline: none; }

/* RESPONSIVE */
@media (max-width: 992px) {
    .planner-layout-tri { grid-template-columns: 1fr; }
    .week-grid { grid-template-columns: 1fr; gap: 1rem; }
    .day-column-wrapper { height: auto; min-height: 150px; }
    .immersive-timer-card { height: auto; padding: 4rem 1rem; }
    .big-time-display { font-size: 5rem; }
    .row-group { grid-template-columns: 1fr; }
    .review-header { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
    .komit-back-btn { margin: 0 auto; }
    .score-display { justify-content: center; }
}
@keyframes fadeIn { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} }
@keyframes slideUp { from {opacity:0; transform:translateY(50px);} to {opacity:1; transform:translateY(0);} }


/* Ajoutez ceci dans la section PANELS */
.tool-panel {
    display: none !important;
    animation: fadeIn 0.5s ease-out;
}
.tool-panel.active {
    display: block !important;
}

/* =========================================
   LOGIN GATE MODAL (Pop-up de redirection)
   ========================================= */
.gate-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 26, 26, 0.6); /* Fond sombre flou */
    backdrop-filter: blur(5px);
    z-index: 2000; /* Au-dessus de tout */
    display: none; /* Caché par défaut */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gate-modal.active {
    display: flex;
    opacity: 1;
}

.gate-content {
    background: white;
    width: 90%;
    max-width: 450px;
    padding: 2.5rem;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border: 2px solid #FFF3E0;
}

.gate-modal.active .gate-content {
    transform: scale(1);
}

.gate-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    animation: bounce 2s infinite;
}

.gate-title {
    font-family: 'Lilita One', cursive;
    font-size: 2rem;
    color: var(--komit-violet); /* Ou #662E9B */
    margin-bottom: 1rem;
    line-height: 1.1;
}

.gate-text {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.gate-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gate-btn-login {
    background: var(--komit-orange); /* Ou #FF5C00 */
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    padding: 1rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 5px 15px rgba(255, 92, 0, 0.3);
}

.gate-btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 92, 0, 0.4);
}

.gate-btn-cancel {
    background: transparent;
    border: none;
    color: #999;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* Style de la croix de fermeture */
.gate-close-x {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.gate-close-x:hover {
    color: var(--komit-orange); /* ou #FF5C00 */
    transform: scale(1.1);
}