@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Nunito:wght@400;600;700;800&display=swap');

/* ═══════════════════════════════════════
   GOLD THEME — touches dorées subtiles
   ═══════════════════════════════════════ */
:root {
    --gold:       #D4AF37;
    --gold-light: #F0D060;
    --gold-glow:  rgba(212, 175, 55, .35);
}

@keyframes gold-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes gold-pulse {
    0%, 100% { box-shadow: 0 0 6px var(--gold-glow); }
    50%       { box-shadow: 0 0 16px var(--gold-glow), 0 0 32px rgba(212,175,55,.15); }
}

/* Texte doré animé — shimmer qui parcourt le titre */
.gold-title {
    background: linear-gradient(90deg, var(--gold-light) 0%, #FFF8DC 40%, var(--gold-light) 50%, var(--gold) 60%, var(--gold-light) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gold-shimmer 4s linear infinite;
}

/* Bordure dorée pulsante — pour les badges et succès */
.gold-border {
    border-color: var(--gold) !important;
    animation: gold-pulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════ */

/* SCROLLBAR CUSTOM */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent, #888) 40%, #333);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold, #D4AF37);
}
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent, #888) 40%, #333) transparent; }

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

body {
    background-color: var(--bg, #0d0d0d);
    color: #e8e8e8;
    font-family: 'Nunito', sans-serif;
    min-height: 100vh;
}

body.parent-grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--accent, #888) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--accent, #888) 5%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Nao grid : backgrounds opaques sur toutes les cartes pour éviter que le cadrier transparaisse */
body.parent-grid .family-today,
body.parent-grid .child-overview-card,
body.parent-grid .homeschool-section {
    background: #0f0f1c;
}

body.child-wave {
    /* demi-lunes constantes : 80px large × 40px haut, deux couches décalées pour l'effet écailles */
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 80 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 A40 40 0 0 1 80 0' stroke='rgba(255,255,255,.05)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 80 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 A40 40 0 0 1 80 0' stroke='rgba(255,255,255,.08)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: 80px 40px, 80px 40px;
    background-position: 40px 20px, 0px 0px;
}

/* mode apprentissage bilingue : partie anglaise plus discrète */
.t-en {
    opacity: .55;
    font-size: .85em;
}

body.parent-dunes header { border-bottom-color: rgba(130,88,35,.25); }
body.parent-dunes .header-right { color: #5a3a10; }
body.parent-dunes .header-right a { color: #5a3a10; border-color: rgba(130,88,35,.35); }
body.parent-dunes .header-right a:hover { color: var(--accent); border-color: var(--accent); }

/* Bill dunes : chat/messages sur fond blanc/beige clair */
body.parent-dunes .msg-container {
    background: rgba(255,252,245,.92);
    border-color: rgba(160,118,58,.2);
}
body.parent-dunes .msg-view-header { border-bottom-color: rgba(160,118,58,.18); }
body.parent-dunes .msg-view-title { color: var(--accent); }
body.parent-dunes .project-header { color: var(--accent); }
body.parent-dunes .project-header:hover { background: rgba(160,118,58,.07); }
body.parent-dunes .conversation-list { border-left-color: rgba(160,118,58,.2); }
body.parent-dunes .conversation-item { color: #5a3a10; }
body.parent-dunes .conversation-item:hover { background: rgba(160,118,58,.07); }
body.parent-dunes .conversation-item:hover span { color: #2d1a05; }
body.parent-dunes .msg-claude {
    background: rgba(160,118,58,.08);
    border-color: rgba(160,118,58,.2);
    color: #2d1a05;
}
body.parent-dunes .avatar-claude {
    background: rgba(160,118,58,.12);
    border-color: rgba(160,118,58,.25);
    color: #5a3a10;
}
body.parent-dunes .chat-input-row { border-top-color: rgba(160,118,58,.18); }
body.parent-dunes .chat-input {
    background: rgba(255,255,255,.8);
    border-color: rgba(160,118,58,.25);
    color: #2d1a05;
}
body.parent-dunes .chat-input::placeholder { color: #a08060; }
body.parent-dunes .chat-input:focus { border-color: var(--accent); }
body.parent-dunes .btn-back-hub { border-color: rgba(160,118,58,.3); color: #5a3a10; }
body.parent-dunes .btn-back-hub:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
body.parent-dunes .btn-new-project { border-color: rgba(160,118,58,.3); }
body.parent-dunes .msg-tab { border-color: rgba(160,118,58,.3); color: #8a6040; }
body.parent-dunes .modal { background: #fdf8f0; border-color: rgba(160,118,58,.25); }
body.parent-dunes .modal-title { color: var(--accent); }
body.parent-dunes .modal p { color: #5a3a10; }
body.parent-dunes .btn-cancel { background: #f5ede0; border-color: rgba(160,118,58,.25); color: #5a3a10; }
body.parent-dunes .modal-overlay { background: rgba(90,50,10,.35); }

/* Bill dunes : accueil — choice cards */
body.parent-dunes .choice-card,
body.parent-dunes .parent-choice-card {
    background: rgba(255,252,245,.88);
    border-color: rgba(160,118,58,.22);
}
body.parent-dunes .choice-card:hover,
body.parent-dunes .parent-choice-card:hover { border-color: var(--accent); background: rgba(255,252,245,.95); }
body.parent-dunes .choice-label { color: #5a3a10; }
body.parent-dunes .parent-choice-label { color: #5a3a10; }
body.parent-dunes .parent-choice-sub { color: #9a7040; }
body.parent-dunes .parent-choice-arrow { color: var(--accent); }

/* Bill dunes : calendrier — navigation & grille */
body.parent-dunes .schedule-container,
body.parent-dunes .todo-section {
    background: rgba(255,252,245,.75);
    border-color: rgba(160,118,58,.2);
}

body.parent-dunes .role-badge.parent {
    background: rgba(217,119,6,.1);
    color: var(--accent);
    border-color: rgba(217,119,6,.3);
}
body.parent-dunes .day-btn {
    background: rgba(255,252,245,.88);
    border-color: rgba(160,118,58,.25);
    color: #5a3a10;
}
body.parent-dunes .day-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,252,245,.95); }
body.parent-dunes .day-title { color: #2d1a05; }
body.parent-dunes .time-label { color: rgba(90,58,16,.45); }
body.parent-dunes .time-row { border-bottom-color: rgba(160,118,58,.12); }
body.parent-dunes .event-chip {
    background: rgba(255,252,245,.85);
    border-left-color: var(--accent);
}
body.parent-dunes .event-title { color: #2d1a05; }
body.parent-dunes .event-time { color: #9a7040; }

/* Bill dunes : todos & épicerie */
body.parent-dunes .section-title { color: #9a7040; }
body.parent-dunes .todo-item { border-bottom-color: rgba(160,118,58,.12); }
body.parent-dunes .todo-item.todo-done .todo-text { color: rgba(45,26,5,.35); }
body.parent-dunes .btn-add-todo {
    background: transparent;
    border-color: rgba(160,118,58,.3);
    color: #8a6040;
}
body.parent-dunes .btn-add-todo:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
body.parent-dunes .btn-add-event {
    background: transparent;
    border-color: rgba(160,118,58,.3);
    color: #8a6040;
}
body.parent-dunes .btn-add-event:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
body.parent-dunes .grocery-list {
    background: rgba(255,252,245,.85);
    border-color: rgba(160,118,58,.2);
}
body.parent-dunes .grocery-list-header { border-bottom-color: rgba(160,118,58,.15); }
body.parent-dunes .btn-type-choice {
    background: rgba(255,252,245,.88);
    border-color: rgba(160,118,58,.25);
    color: #5a3a10;
}
body.parent-dunes .btn-type-choice:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,252,245,.95); }
body.parent-dunes select.modal-input,
body.parent-dunes input.modal-input {
    background: rgba(255,255,255,.8);
    border-color: rgba(160,118,58,.25);
    color: #2d1a05;
}
body.parent-dunes select.modal-input:focus,
body.parent-dunes input.modal-input:focus { border-color: var(--accent); }

body.parent-dunes .gold-title {
    background: linear-gradient(90deg, #1a0800 0%, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, #1a0800 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gold-shimmer 4s linear infinite;
}

body.parent-dunes {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,115 C150,80 300,135 450,90 S560,75 600,115 L600,200 L0,200 Z' fill='rgba(190,155,90,.32)'/%3E%3Cpath d='M0,145 C120,115 250,158 380,125 S515,108 600,145 L600,200 L0,200 Z' fill='rgba(160,118,58,.42)'/%3E%3Cpath d='M0,168 C100,148 220,178 350,155 S492,142 600,168 L600,200 L0,200 Z' fill='rgba(130,88,35,.52)'/%3E%3C/svg%3E");
    background-size: 600px 200px;
    background-position: bottom center;
    background-repeat: repeat-x;
    color: #2d1a05;
}

/* Bill dunes : overrides overview + homeschool */
body.parent-dunes .stat-card {
    background: rgba(255,252,245,.7);
    border-color: rgba(160,118,58,.2);
}
body.parent-dunes .stat-num { color: var(--accent); }
body.parent-dunes .stat-label { color: #9a7040; }
body.parent-dunes .stat-card.stat-warn { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.3); }

body.parent-dunes .family-today,
body.parent-dunes .child-overview-card,
body.parent-dunes .homeschool-section {
    background: rgba(255,252,245,.65);
    border-color: rgba(160,118,58,.2);
}
body.parent-dunes .family-today-header { color: #9a7040; }
body.parent-dunes .family-person-name { font-weight: 700; }
body.parent-dunes .child-overview-name { font-weight: 800; }
body.parent-dunes .child-overview-stats { color: #5a3a10; }
body.parent-dunes .hs-week-nav { color: #9a7040; }
body.parent-dunes .hs-child-header { border-bottom-color: rgba(160,118,58,.2); }
body.parent-dunes .hs-progress { color: #9a7040; }
body.parent-dunes .hs-subject { color: #2d1a05; }
body.parent-dunes .hs-desc { color: #7a5530; }
body.parent-dunes .hs-due { color: #b09060; }
body.parent-dunes .hs-task:hover { background: rgba(160,118,58,.06); }
body.parent-dunes .hs-task.hs-done { opacity: .5; }

body.parent-dunes .hs-form select,
body.parent-dunes .hs-form input {
    background: rgba(255,252,245,.9);
    border-color: rgba(160,118,58,.35);
    color: #2d1a05;
}
body.parent-dunes .hs-form select:focus,
body.parent-dunes .hs-form input:focus { border-color: var(--accent); outline: none; }

body.parent-dunes .hs-check {
    border-color: rgba(160,118,58,.4);
    color: rgba(160,118,58,.5);
}
body.parent-dunes .hs-task.hs-done .hs-check { border-color: var(--accent); background: var(--accent); color: #000; text-decoration: none; }

body.parent-dunes .hs-modal {
    background: #fdf8f0;
    border-color: rgba(160,118,58,.25);
    color: #2d1a05;
}
body.parent-dunes .hs-modal-overlay { background: rgba(90,50,10,.4); }
body.parent-dunes .hs-modal-btns button:last-child {
    border-color: rgba(160,118,58,.3);
    color: #5a3a10;
}

body.parent-dunes .family-points-card {
    background: rgba(255,252,245,.88);
    border-color: rgba(160,118,58,.22);
}

body.parent-dunes .family-points-name {
    color: #5a3a10;
}

body.parent-dunes .hub-card {
    background: rgba(255,252,245,.88);
    border-color: rgba(160,118,58,.22);
}

body.parent-dunes .hub-card:hover:not(.hub-soon) {
    background: rgba(255,252,245,.97);
    border-color: var(--accent);
}

body.parent-dunes .hub-label { color: var(--accent); }
body.parent-dunes .hub-desc  { color: #9a7040; }
body.parent-dunes .hub-category-title { color: #9a7040; }
body.parent-dunes .hub-title { color: #9a7040; }

body.child-stars {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 240' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23' cy='18' r='1.2' fill='rgba(255,255,255,.7)'/%3E%3Ccircle cx='87' cy='54' r='0.8' fill='rgba(255,255,255,.4)'/%3E%3Ccircle cx='142' cy='11' r='1.5' fill='rgba(255,255,255,.9)'/%3E%3Ccircle cx='201' cy='37' r='0.7' fill='rgba(255,255,255,.5)'/%3E%3Ccircle cx='263' cy='8' r='1.1' fill='rgba(255,255,255,.6)'/%3E%3Ccircle cx='48' cy='88' r='1.0' fill='rgba(255,255,255,.5)'/%3E%3Ccircle cx='119' cy='72' r='1.8' fill='rgba(255,255,255,.8)'/%3E%3Ccircle cx='178' cy='95' r='0.9' fill='rgba(255,255,255,.4)'/%3E%3Ccircle cx='237' cy='61' r='1.3' fill='rgba(255,255,255,.7)'/%3E%3Ccircle cx='289' cy='79' r='0.6' fill='rgba(255,255,255,.35)'/%3E%3Ccircle cx='12' cy='142' r='1.4' fill='rgba(255,255,255,.65)'/%3E%3Ccircle cx='67' cy='160' r='0.8' fill='rgba(255,255,255,.45)'/%3E%3Ccircle cx='155' cy='133' r='1.1' fill='rgba(255,255,255,.75)'/%3E%3Ccircle cx='214' cy='148' r='1.6' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='271' cy='122' r='0.9' fill='rgba(255,255,255,.5)'/%3E%3Ccircle cx='34' cy='208' r='1.3' fill='rgba(255,255,255,.6)'/%3E%3Ccircle cx='98' cy='192' r='0.7' fill='rgba(255,255,255,.4)'/%3E%3Ccircle cx='163' cy='221' r='1.0' fill='rgba(255,255,255,.7)'/%3E%3Ccircle cx='229' cy='199' r='1.5' fill='rgba(255,255,255,.85)'/%3E%3Ccircle cx='282' cy='215' r='0.8' fill='rgba(255,255,255,.45)'/%3E%3C/svg%3E");
    background-size: 300px 240px;
}

body.child-hibiscus {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 290 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(35,35) rotate(20)'%3E%3Ccircle cx='0' cy='-9' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='5.3' cy='7.3' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(251,191,36,.25)'/%3E%3C/g%3E%3Cg transform='translate(140,25) rotate(-15)'%3E%3Ccircle cx='0' cy='-9' r='6' fill='rgba(244,114,182,.15)'/%3E%3Ccircle cx='8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.15)'/%3E%3Ccircle cx='5.3' cy='7.3' r='6' fill='rgba(244,114,182,.15)'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6' fill='rgba(244,114,182,.15)'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.15)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(251,191,36,.22)'/%3E%3C/g%3E%3Cg transform='translate(245,45) rotate(35)'%3E%3Ccircle cx='0' cy='-9' r='6' fill='rgba(244,114,182,.2)'/%3E%3Ccircle cx='8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.2)'/%3E%3Ccircle cx='5.3' cy='7.3' r='6' fill='rgba(244,114,182,.2)'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6' fill='rgba(244,114,182,.2)'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.2)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(251,191,36,.28)'/%3E%3C/g%3E%3Cg transform='translate(80,120) rotate(-30)'%3E%3Ccircle cx='0' cy='-9' r='6' fill='rgba(244,114,182,.17)'/%3E%3Ccircle cx='8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.17)'/%3E%3Ccircle cx='5.3' cy='7.3' r='6' fill='rgba(244,114,182,.17)'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6' fill='rgba(244,114,182,.17)'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.17)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(251,191,36,.24)'/%3E%3C/g%3E%3Cg transform='translate(205,110) rotate(10)'%3E%3Ccircle cx='0' cy='-9' r='6' fill='rgba(244,114,182,.19)'/%3E%3Ccircle cx='8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.19)'/%3E%3Ccircle cx='5.3' cy='7.3' r='6' fill='rgba(244,114,182,.19)'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6' fill='rgba(244,114,182,.19)'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.19)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(251,191,36,.26)'/%3E%3C/g%3E%3Cg transform='translate(30,205) rotate(50)'%3E%3Ccircle cx='0' cy='-9' r='6' fill='rgba(244,114,182,.16)'/%3E%3Ccircle cx='8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.16)'/%3E%3Ccircle cx='5.3' cy='7.3' r='6' fill='rgba(244,114,182,.16)'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6' fill='rgba(244,114,182,.16)'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.16)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(251,191,36,.23)'/%3E%3C/g%3E%3Cg transform='translate(165,205) rotate(-20)'%3E%3Ccircle cx='0' cy='-9' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='5.3' cy='7.3' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='-5.3' cy='7.3' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='-8.5' cy='-2.8' r='6' fill='rgba(244,114,182,.18)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='rgba(251,191,36,.25)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 290px 250px;
}

/* FUN ZONE */
.fun-page { display: flex; flex-direction: column; align-items: center; }

.fun-wrap { width: 100%; max-width: 1440px; padding: 2rem; }

.game-card {
    background: color-mix(in srgb, var(--accent) 4%, #111);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, #222);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.game-title {
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: .05em;
}

.game-score { font-size: .75rem; color: #555; }

.game-objects {
    font-size: 2.5rem;
    letter-spacing: .2em;
    line-height: 1.6;
    text-align: center;
    min-height: 5rem;
}

.game-feedback {
    font-size: 1.2rem;
    font-weight: 700;
    min-height: 2rem;
    text-align: center;
}
.game-feedback.correct { color: #34d399; }
.game-feedback.wrong { color: #f87171; }

.game-answers {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-answer {
    background: #1a1a1a;
    border: 2px solid #333;
    color: #e8e8e8;
    border-radius: 12px;
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s;
}
.btn-answer:hover:not(:disabled) { border-color: var(--accent); }
.btn-answer.correct { border-color: #34d399; color: #34d399; background: rgba(52,211,153,.1); }
.btn-answer.wrong { border-color: #f87171; color: #f87171; background: rgba(248,113,113,.1); }
.btn-answer:disabled { cursor: default; }

.btn-next {
    background: var(--accent);
    border: none;
    color: #0d0d0d;
    border-radius: 10px;
    padding: .6rem 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.btn-next:hover { opacity: .85; background: var(--accent); }

/* GAME HUB */
.hub-title {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #555;
    margin: 1.5rem 0 1rem;
}

.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hub-card {
    background: color-mix(in srgb, var(--accent) 5%, #111);
    border: 2px solid color-mix(in srgb, var(--accent) 18%, #222);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: border-color .2s, transform .15s, background .2s;
}

.hub-card:hover:not(.hub-soon) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, #111);
    transform: translateY(-3px);
}

.hub-card.hub-soon { opacity: .35; cursor: default; }

.hub-icon { font-size: 2.2rem; }
.hub-label { font-size: .85rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, #e8e8e8); }
.hub-desc { font-size: .65rem; color: #555; }

.hub-category { margin-bottom: 1.5rem; }

.hub-category-title {
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 60%, #888);
    margin-bottom: .6rem;
}

/* TRADUCTEUR NAO */
.translator-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    gap: 1rem;
    background: var(--bg, #0d0d14);
}

.translator-wrap header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .8rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, #222);
    background: var(--bg, #0d0d14);
}

.translator-direction {
    display: flex;
    gap: .5rem;
}

.dir-btn {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, #333);
    color: #888;
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .75rem;
    cursor: pointer;
    transition: all .2s;
}

.dir-btn.active,
.dir-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
    background: rgba(212, 175, 55, .08);
}

.translator-chat {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: .5rem 0;
}

.translator-welcome {
    text-align: center;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    color: #999;
    font-size: .85rem;
    background: #0f0f18;
    border-radius: 14px;
    border: 1px solid #1e1e2e;
}

.translator-msg {
    max-width: 90%;
    padding: .75rem 1rem;
    border-radius: 12px;
    font-size: .85rem;
    line-height: 1.6;
}

.translator-msg-user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--accent) 18%, #0d0d18);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, #1a1a2e);
    color: #e8e8e8;
}

.translator-msg-assistant {
    align-self: flex-start;
    background: #0f0f1c;
    border: 1px solid rgba(212, 175, 55, .25);
    color: #e8e8e8;
}

.translator-input-area {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    padding-top: .5rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 15%, #222);
}

.translator-textarea {
    flex: 1;
    background: #0f0f1c;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, #2a2a3e);
    border-radius: 10px;
    color: #e8e8e8;
    font-family: inherit;
    font-size: .85rem;
    padding: .6rem .8rem;
    resize: none;
    outline: none;
    transition: border-color .2s;
}

.translator-textarea:focus { border-color: var(--gold); }

.translator-send-btn {
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .4);
    color: var(--gold-light);
    border-radius: 10px;
    padding: .6rem 1.2rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}

.translator-send-btn:hover {
    background: rgba(212, 175, 55, .2);
    box-shadow: 0 0 12px var(--gold-glow);
}

/* Markdown rendu dans les bulles assistant */
.translator-msg-assistant h1,
.translator-msg-assistant h2,
.translator-msg-assistant h3 {
    color: var(--gold-light);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: .8rem 0 .3rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid rgba(212,175,55,.2);
}

.translator-msg-assistant h1:first-child,
.translator-msg-assistant h2:first-child { margin-top: 0; }

.translator-msg-assistant strong { color: var(--gold-light); }

.translator-msg-assistant p { margin: .3rem 0; }

.translator-msg-assistant table {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0;
    font-size: .8rem;
}

.translator-msg-assistant th {
    background: rgba(212,175,55,.12);
    color: var(--gold-light);
    padding: .35rem .6rem;
    text-align: left;
    border: 1px solid rgba(212,175,55,.2);
}

.translator-msg-assistant td {
    padding: .35rem .6rem;
    border: 1px solid rgba(255,255,255,.06);
    color: #ccc;
}

.translator-msg-assistant tr:nth-child(even) td {
    background: rgba(255,255,255,.03);
}

.translator-msg-assistant code {
    background: rgba(212,175,55,.1);
    color: var(--gold-light);
    padding: .1rem .3rem;
    border-radius: 4px;
    font-size: .8rem;
}

/* ANGLAIS — exercices */

.vocab-word-fr {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--accent);
    text-align: center;
    letter-spacing: .03em;
}

.vocab-input {
    width: 100%;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 12px;
    color: #e8e8e8;
    font-size: 1.1rem;
    font-family: inherit;
    padding: .7rem 1.2rem;
    text-align: center;
    outline: none;
    transition: border-color .2s;
}
.vocab-input:focus  { border-color: var(--accent); }
.vocab-input.correct { border-color: #34d399; }
.vocab-input.wrong   { border-color: #f87171; }
.vocab-input:disabled { opacity: .75; }

.phrase-container {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-align: center;
    width: 100%;
}

.phrase-fr {
    font-size: .9rem;
    color: #888;
    font-style: italic;
}

.phrase-en {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.8;
    color: #e8e8e8;
}

.phrase-blank {
    display: inline-block;
    min-width: 80px;
    border-bottom: 2px solid var(--accent);
    padding: 0 .4rem;
    color: var(--accent);
}

.eng-score-final {
    align-items: center;
    gap: 1rem;
}

.eng-score-big {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
}

.eng-chat-wrap {
    display: flex;
    flex-direction: column;
    height: 65vh;
    gap: .8rem;
}

.eng-chat-wrap .translator-chat {
    flex: 1;
}

/* ANGLAIS — setup modal */
.eng-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.eng-setup-modal {
    background: #111;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, #333);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    max-width: 340px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.eng-setup-emoji { font-size: 3rem; }

.eng-setup-modal h2 {
    font-size: 1.1rem;
    color: var(--accent);
    margin: 0;
}

.eng-setup-modal p {
    font-size: .8rem;
    color: #888;
    margin: 0;
}

.eng-setup-input {
    background: #1a1a1a;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, #333);
    border-radius: 8px;
    color: #e8e8e8;
    font-size: 1rem;
    padding: .6rem .8rem;
    text-align: center;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.eng-setup-input:focus { border-color: var(--accent); }

.eng-setup-error { font-size: .75rem; color: #f87171; min-height: 1rem; }

/* ANGLAIS — barre compagnon */
.eng-companion-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: color-mix(in srgb, var(--accent) 6%, #111);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, #222);
    border-radius: 12px;
    padding: .6rem 1rem;
    margin-bottom: 1.5rem;
}

.eng-companion-avatar { font-size: 1.4rem; }

.eng-companion-name {
    font-weight: 700;
    color: var(--accent);
    font-size: .95rem;
    flex: 1;
}

.eng-level-badge {
    font-size: .7rem;
    letter-spacing: .08em;
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .4);
    border-radius: 999px;
    padding: .2rem .6rem;
    color: var(--gold-light);
    animation: gold-pulse 2.5s ease-in-out infinite;
}

/* POINTS FAMILLE — section parent */
.family-points-section {
    margin: 1.5rem 0;
}

.family-points-title {
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 60%, #888);
    margin-bottom: .8rem;
}

.family-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .5rem;
}

.family-points-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: color-mix(in srgb, var(--accent) 4%, #111);
    border: 1px solid color-mix(in srgb, var(--accent) 12%, #222);
    border-radius: 10px;
    padding: .5rem .8rem;
}

.family-points-name {
    font-size: .85rem;
    font-weight: 700;
    min-width: 60px;
}

/* POINTS PILLS */
.user-info { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.points-pills { display: flex; gap: .35rem; }

.pill {
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 999px;
    letter-spacing: .04em;
}

.pill-jeux    { background: rgba(232,121,249,.15); color: #e879f9; border: 1px solid rgba(232,121,249,.3); }
.pill-devoirs { background: rgba( 56,189,248,.15); color: #38bdf8; border: 1px solid rgba( 56,189,248,.3); }
.pill-taches  { background: rgba( 74,222,128,.15); color: #4ade80; border: 1px solid rgba( 74,222,128,.3); }
.pill-anglais { background: rgba(251,191, 36,.15); color: #fbbf24; border: 1px solid rgba(251,191, 36,.3); }

/* JEUX — MÉMOIRE */
.memory-score {
    font-size: .8rem;
    letter-spacing: .08em;
    color: #888;
    margin-bottom: 1rem;
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 1rem;
}

.mem-card {
    aspect-ratio: 1;
    cursor: pointer;
    perspective: 600px;
}

.mem-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .35s ease;
    border-radius: 8px;
}

.mem-card.flipped .mem-card-inner,
.mem-card.matched .mem-card-inner {
    transform: rotateY(180deg);
}

.mem-card-front,
.mem-card-back {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

.mem-card-front {
    background: color-mix(in srgb, var(--accent) 10%, #1a1a1a);
    border: 2px solid color-mix(in srgb, var(--accent) 25%, #333);
    font-size: 1.4rem;
}

.mem-card-back {
    background: color-mix(in srgb, var(--accent) 8%, #111);
    border: 2px solid color-mix(in srgb, var(--accent) 40%, #333);
    font-size: 1.8rem;
    transform: rotateY(180deg);
}

.mem-card.matched .mem-card-back {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, #111);
}

.btn-back-hub {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    border-radius: 8px;
    padding: .4rem .9rem;
    font-size: .72rem;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: .5rem;
}
.btn-back-hub:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

.game-selector {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
    justify-content: center;
}

.btn-game-select {
    background: #111;
    border: 2px solid #333;
    color: #888;
    border-radius: 10px;
    padding: .5rem 1.2rem;
    font-size: .8rem;
    cursor: pointer;
    font-family: inherit;
}
.btn-game-select.active { border-color: var(--accent); color: var(--accent); background: #111; }
.btn-game-select:hover { border-color: var(--accent); color: var(--accent); background: #111; }

/* CHILD HOME */
body.child-home-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.child-home-wrap {
    width: 100%;
    max-width: 1440px;
    padding: 2rem;
}

.child-home-choices {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
    justify-content: center;
}

.choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 180px;
    height: 180px;
    border-radius: 20px;
    border: 2px solid color-mix(in srgb, var(--accent) 22%, #222);
    background: color-mix(in srgb, var(--accent) 5%, #111);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, transform .15s, background .2s;
}

.choice-card:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, #111);
    transform: translateY(-4px);
}

.choice-icon { font-size: 3rem; }

.choice-label {
    font-size: .85rem;
    color: color-mix(in srgb, var(--accent) 60%, #aaa);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}

/* PARENT HOME */
body.parent-home-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.parent-home-wrap {
    width: 100%;
    max-width: 1440px;
    padding: 2rem;
}

.parent-home-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .85rem;
    margin-top: 2rem;
}

.parent-choice-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, #222);
    background: color-mix(in srgb, var(--accent) 4%, #111);
    text-decoration: none;
    transition: border-color .2s, background .2s, transform .15s;
}

.parent-choice-card:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, #111);
    transform: translateY(-2px);
}

.parent-choice-icon { font-size: 1.8rem; flex-shrink: 0; }

.parent-choice-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}

.parent-choice-label {
    font-size: .95rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--accent) 55%, #e8e8e8);
}

.parent-choice-sub {
    font-size: .72rem;
    color: #555;
}

.parent-choice-arrow {
    font-size: 1rem;
    color: color-mix(in srgb, var(--accent) 40%, #444);
    flex-shrink: 0;
}

/* TODAY BRIEF — parent home */
.today-brief {
    margin-top: 2.5rem;
    background: var(--bg, #0d0d0d);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 1.1rem 1.4rem 1.4rem;
}

.today-brief-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.today-brief-date {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #555;
}

.today-brief-link {
    font-size: .7rem;
    color: var(--accent);
    text-decoration: none;
    border: none;
    padding: 0;
    opacity: .7;
    transition: opacity .15s;
}
.today-brief-link:hover { opacity: 1; border: none; }

.brief-event {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .78rem;
}
.brief-event:last-child { border-bottom: none; }

.brief-time {
    width: 2.8rem;
    flex-shrink: 0;
    font-size: .7rem;
    color: #444;
}

.brief-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.brief-who {
    font-size: .7rem;
    font-weight: 600;
    width: 4rem;
    flex-shrink: 0;
}

.brief-title {
    color: #c8c8c8;
    flex: 1;
}

.today-empty {
    font-size: .78rem;
    color: #444;
    text-align: center;
    padding: .75rem 0;
}

.child-todo-count {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: .75rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* MESSAGES / ASSISTANT PAGE */
body.messages-page {
    display: flex;
    flex-direction: column;
}

.messages-wrap {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.msg-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.msg-tab {
    background: none;
    border: 1px solid #333;
    color: #888;
    padding: .4rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: .8rem;
    transition: all .2s;
}

.msg-tab.active {
    border-color: var(--accent);
    color: var(--accent);
}

.msg-tab:hover { border-color: var(--accent); color: var(--accent); }

.msg-container {
    flex: 1;
    min-height: 520px;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}

.msg-view {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.msg-view.active { display: flex; }

.msg-view-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #222;
    flex-shrink: 0;
}

.msg-view-title {
    flex: 1;
    font-size: 0.82rem;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.btn-new-project {
    background: transparent;
    border: 1px solid #333;
    color: var(--accent);
    border-radius: 6px;
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
}
.btn-new-project:hover { border-color: var(--accent); background: transparent; }

.project-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem 0;
}

.project-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--accent);
}
.project-header:hover { background: #1a1a1a; }
.project-arrow { font-size: 0.6rem; }
.project-name { flex: 1; }

.btn-new-conv {
    background: none;
    border: 1px solid rgba(255,255,255,.15);
    color: #aaa;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    font-size: .7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-new-conv:hover { border-color: var(--accent); color: var(--accent); background: none; }

.conversation-list {
    border-left: 1px solid #222;
    margin-left: 2rem;
}

.conversation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    color: #aaa;
}
.conversation-item span { flex: 1; cursor: pointer; }
.conversation-item:hover { background: #1a1a1a; }
.conversation-item:hover span { color: #e8e8e8; }

.btn-delete-conv, .btn-delete-proj {
    background: none;
    border: none;
    color: #555;
    font-size: .6rem;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity .15s;
}
.conversation-item:hover .btn-delete-conv,
.project-header:hover .btn-delete-proj { opacity: 1; }
.btn-delete-conv:hover, .btn-delete-proj:hover { color: #f87171; background: none; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.msg-row { display: flex; align-items: flex-end; gap: 0.5rem; }
.msg-row-user { flex-direction: row-reverse; }

.msg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
}
.avatar-user { background: var(--accent); color: #0d0d0d; }
.avatar-claude { background: #1a1a1a; border: 1px solid #333; color: #888; }

.msg {
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    max-width: 75%;
    font-size: 0.78rem;
    line-height: 1.6;
}
.msg-user {
    background: var(--accent);
    color: #0d0d0d;
    border-bottom-right-radius: 3px;
}
.msg-claude {
    background: #1a1a1a;
    color: #e8e8e8;
    border: 1px solid #222;
    border-bottom-left-radius: 3px;
}
.msg-claude p { margin: 0; }
.msg-claude p + p { margin-top: 0.4rem; }
.msg-claude code { background: #0d0d0d; padding: .1em .3em; border-radius: 3px; font-size: .88em; }
.msg-claude pre { background: #0d0d0d; padding: .65rem; border-radius: 8px; overflow-x: auto; margin: .4rem 0; }

.chat-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #222;
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: #e8e8e8;
    font-size: 0.8rem;
    outline: none;
    font-family: 'Nunito', sans-serif;
}
.chat-input:focus { border-color: var(--accent); }

.btn-send {
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #0d0d0d;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}
.btn-send:hover { opacity: .85; background: var(--accent); }
.btn-send:disabled { opacity: .4; cursor: default; }

/* LOGIN */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d0d0d;
    background-image:
        linear-gradient(rgba(217,79,189,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217,79,189,.07) 1px, transparent 1px);
    background-size: 32px 32px;
}

.login-wrap {
    background: #111118;
    border: 1px solid rgba(217,79,189,.25);
    border-radius: 20px;
    padding: 2.75rem 2.5rem;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: 0 0 40px rgba(217,79,189,.08);
}

.login-logo {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    color: #d94fbd;
    text-align: center;
    letter-spacing: .1em;
}

.login-tagline {
    font-size: .75rem;
    color: #555;
    text-align: center;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: -.5rem;
}

.error {
    background: rgba(201,57,44,.15);
    border: 1px solid rgba(201,57,44,.3);
    color: #f87171;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .75rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

input {
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 8px;
    color: #e8e8e8;
    padding: .6rem .9rem;
    font-size: .8rem;
    font-family: inherit;
    outline: none;
}

input:focus { border-color: var(--accent); }

button {
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #0d0d0d;
    padding: .65rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

button:hover { background: var(--accent); }

/* DASHBOARD */
.dashboard-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
    margin-bottom: 1.5rem;
}

header h1 {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: .08em;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: .8rem;
    color: #aaa;
}

.header-right a {
    color: #888;
    text-decoration: none;
    border: 1px solid #333;
    padding: .3rem .7rem;
    border-radius: 6px;
    font-size: .72rem;
}

.header-right a:hover { border-color: var(--accent); color: var(--accent); }

.role-badge {
    display: inline-block;
    font-size: .65rem;
    padding: .3rem .8rem;
    border-radius: 20px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.role-badge.parent { background: rgba(192,132,252,.15); color: var(--accent); border: 1px solid rgba(192,132,252,.3); }
.role-badge.child { background: rgba(52,211,153,.1); color: #34d399; border: 1px solid rgba(52,211,153,.25); }

/* SCHEDULE */
.day-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.day-title {
    font-size: 0.9rem;
    color: #e8e8e8;
    flex: 1;
    text-align: center;
    text-transform: capitalize;
}

.day-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    padding: .4rem .8rem;
    border-radius: 6px;
    font-size: .75rem;
    cursor: pointer;
}

.day-btn:hover { border-color: var(--accent); color: var(--accent); background: #1a1a1a; }

.schedule-container {
    background: var(--bg, #0d0d0d);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    overflow: hidden;
    padding: .75rem 1rem 1rem;
}

.schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: .78rem;
    color: #444;
    letter-spacing: .06em;
}

.time-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: 2.5rem;
    padding: .3rem 0;
    border-bottom: 1px solid #1a1a1a;
}

.time-label {
    width: 3.5rem;
    font-size: .75rem;
    color: #444;
    padding-top: .2rem;
    flex-shrink: 0;
}

.events-in-slot {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 1;
}

.event-chip {
    background: #1a1a1a;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: .3rem .6rem;
    font-size: .72rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.event-who { font-weight: 600; font-size: .65rem; }
.event-title { color: #e8e8e8; }
.event-time { color: #555; font-size: .65rem; }

.btn-edit-event {
    background: none;
    border: none;
    color: #555;
    font-size: .65rem;
    cursor: pointer;
    padding: 0 .2rem;
    margin-left: .3rem;
}
.btn-edit-event:hover { color: var(--accent); background: none; }

.btn-del-event {
    background: none;
    border: none;
    color: #555;
    font-size: .65rem;
    cursor: pointer;
    padding: 0 .2rem;
    margin-left: .3rem;
}
.btn-del-event:hover { color: #f87171; background: none; }

/* TODOS */
.todo-section {
    margin-top: 2rem;
    background: var(--bg, #0d0d0d);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 1rem 1.25rem 1.25rem;
}

.todo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.section-title {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #555;
}

.btn-add-todo {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    border-radius: 6px;
    padding: .25rem .7rem;
    font-size: .7rem;
    cursor: pointer;
    font-family: inherit;
}
.btn-add-todo:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

.todo-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .4rem;
    border-bottom: 1px solid #1a1a1a;
    font-size: .78rem;
}

.todo-item.todo-done .todo-text {
    text-decoration: line-through;
    color: #444;
}

.todo-check { width: auto; cursor: pointer; accent-color: var(--accent); }
.todo-text { flex: 1; }
.todo-who { font-size: .65rem; font-weight: 600; }

.btn-del-todo {
    background: none;
    border: none;
    color: #333;
    font-size: .65rem;
    cursor: pointer;
    padding: 0 .2rem;
}
.btn-del-todo:hover { color: #f87171; background: none; }

/* GROCERY */
.grocery-list {
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
    margin-bottom: .75rem;
    overflow: hidden;
}

.grocery-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid #1a1a1a;
}

.grocery-list-title { font-size: .78rem; font-weight: 600; }

.grocery-items { padding: .25rem .75rem .5rem; }

.type-choice-btns {
    display: flex;
    gap: .75rem;
}

.btn-type-choice {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    color: #aaa;
    border-radius: 8px;
    padding: .7rem;
    font-size: .78rem;
    cursor: pointer;
    font-family: inherit;
}
.btn-type-choice:hover { border-color: var(--accent); color: var(--accent); background: #111; }

.btn-add-event {
    margin-top: 1.5rem;
    background: transparent;
    border: 1px dashed #333;
    color: #555;
    border-radius: 8px;
    padding: .6rem 1rem;
    font-size: .75rem;
    width: 100%;
    cursor: pointer;
}
.btn-add-event:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 2rem;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.modal-title { font-size: .9rem; color: var(--accent); }

.modal-row { display: flex; gap: .5rem; }

.modal-check { font-size: .75rem; color: #888; display: flex; align-items: center; gap: .5rem; }
.modal-check input { width: auto; }

.modal-buttons { display: flex; gap: .5rem; justify-content: flex-end; }

.btn-cancel { background: #111; border: 1px solid #333; color: #888; border-radius: 8px; padding: .5rem 1rem; font-size: .8rem; cursor: pointer; }
.btn-cancel:hover { background: #111; border-color: #555; color: #aaa; }

.btn-confirm { background: var(--accent); border: none; color: #0d0d0d; border-radius: 8px; padding: .5rem 1rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
.btn-confirm:hover { background: var(--accent); }

select.modal-input {
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 8px;
    color: #e8e8e8;
    padding: .6rem .9rem;
    font-size: .8rem;
    font-family: inherit;
    outline: none;
}
select.modal-input:focus { border-color: var(--accent); }

/* === OVERVIEW STATS === */

.overview-stats {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 80px;
    background: #0f0f1c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.stat-card.stat-warn {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.08);
}

.stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.stat-card.stat-warn .stat-num { color: #ef4444; }

.stat-label {
    font-size: 0.7rem;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* === FAMILY TODAY === */

.family-today {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.family-today-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#familyTodayGrid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.family-person { flex: 1; min-width: 130px; }

.family-person-name {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
    letter-spacing: 0.03em;
}

/* === CHILDREN OVERVIEW === */

.children-overview {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.child-overview-card {
    flex: 1;
    min-width: 150px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.9rem;
    padding: 1rem 1.25rem;
}

.child-overview-name {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 0.6rem;
}

.child-overview-stats {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    opacity: 0.8;
}

.overdue-alert {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: #ef4444;
    background: rgba(239,68,68,0.1);
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
}

/* === CHILD HOME — PROCHAIN ÉVÉNEMENT === */

#nextEventCard { margin-bottom: 1rem; }

.next-event-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--accent);
    border-radius: 0.75rem;
    padding: 0.85rem 1.2rem;
    font-size: 0.9rem;
}

.next-event-empty {
    text-align: center;
    opacity: 0.5;
    font-size: 0.88rem;
    padding: 0.5rem 0 1rem;
}

.next-event-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.45;
    white-space: nowrap;
}

.next-event-time {
    font-weight: 800;
    color: var(--accent);
    font-size: 1.05rem;
    white-space: nowrap;
}

.next-event-title {
    flex: 1;
    font-weight: 600;
}

.next-event-soon {
    font-size: 0.75rem;
    opacity: 0.6;
    white-space: nowrap;
    background: rgba(255,255,255,0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

/* === CHILD HOME — PROGRESS BAR + XP === */

.child-progress-wrap {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.9rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}

.child-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.65rem;
}

.child-progress-msg {
    font-size: 0.9rem;
    font-weight: 600;
}

.child-xp {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(255,255,255,0.07);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.child-progress-track {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    overflow: hidden;
}

.child-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* === HOMESCHOOL === */

.homeschool-section {
    margin-top: 2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1.5rem;
}

.homeschool-double-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
.homeschool-double-grid .homeschool-section { margin-top: 0; }
@media (min-width: 1100px) {
    .homeschool-double-grid { grid-template-columns: 1fr 1fr; }
}

.homeschool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.homeschool-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-week-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
}

.hs-toggle-form-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 0.5rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.hs-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,0.04);
    border-radius: 0.75rem;
}

.hs-form.hidden { display: none; }

.hs-form select,
.hs-form input {
    padding: 0.45rem 0.7rem;
    height: 2.2rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(255,255,255,0.2);
    background: #1a1a2e;
    color: inherit;
    font-size: 0.88rem;
    box-sizing: border-box;
}

.hs-form button[type="submit"] {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 0.4rem;
    padding: 0.4rem 1rem;
    font-weight: 700;
    cursor: pointer;
}

.hs-form button[type="button"] {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.4rem;
    padding: 0.4rem 1rem;
    color: inherit;
    cursor: pointer;
}

.hs-child-group {
    margin-bottom: 1.2rem;
}

.hs-child-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hs-progress {
    font-size: 0.8rem;
    opacity: 0.6;
}

.hs-task {
    display: grid;
    grid-template-columns: 2rem 1fr 2fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.88rem;
    transition: opacity 0.2s;
}

.hs-task:hover { background: rgba(255,255,255,0.04); }

.hs-task.hs-done { opacity: 0.45; text-decoration: line-through; }

.hs-check {
    background: none;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.hs-task.hs-done .hs-check {
    border-color: var(--accent);
    background: var(--accent);
    color: #000;
    text-decoration: none;
}

.hs-subject { font-weight: 600; }
.hs-desc    { opacity: 0.75; }
.hs-due     { font-size: 0.78rem; opacity: 0.5; white-space: nowrap; }

.hs-del {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.5;
    padding: 0.2rem 0.4rem;
}

.hs-del:hover { opacity: 1; }

.hs-empty {
    opacity: 0.5;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.hs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.hs-modal-overlay.hidden { display: none; }

.hs-modal {
    background: #12122a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.hs-modal p {
    margin-bottom: 1.4rem;
    font-size: 1rem;
    opacity: 0.9;
}

.hs-modal-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.hs-modal-btns button:first-child {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.4rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.hs-modal-btns button:first-child:hover { background: #dc2626; }

.hs-modal-btns button:last-child {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.5rem;
    padding: 0.5rem 1.4rem;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.hs-modal-btns button:last-child:hover { border-color: rgba(255,255,255,0.4); }

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

/* --- 768px : tablette --- */
@media (max-width: 768px) {
    .parent-home-wrap,
    .child-home-wrap { padding: 1.5rem; }

    .dashboard-wrap { padding: 1.25rem; }

    #familyTodayGrid { flex-direction: column; gap: 1rem; }

    .children-overview { flex-direction: column; }

    .overview-stats { gap: 0.5rem; }

    .hs-task {
        grid-template-columns: 2rem 1fr auto auto;
    }
    .hs-desc { display: none; }
}

/* --- 540px : mobile --- */
@media (max-width: 540px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
    }

    header h1 { font-size: 1.4rem; }

    .header-right { gap: 0.5rem; font-size: 0.8rem; }

    .parent-home-wrap,
    .child-home-wrap { padding: 1rem; }

    .dashboard-wrap { padding: 1rem; }

    /* Child home : cards côte à côte mais plus petites */
    .child-home-choices {
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .choice-card {
        width: calc(50% - 0.375rem);
        height: 140px;
    }
    .choice-icon { font-size: 2rem; }
    .choice-label { font-size: 0.78rem; }

    /* Parent home : cards nav */
    .parent-home-choices { gap: 0.6rem; }
    .parent-choice-card { padding: 0.85rem 1rem; }
    .parent-choice-icon { font-size: 1.5rem; }

    /* Stat cards : 2×2 */
    .overview-stats { display: grid; grid-template-columns: 1fr 1fr; }

    /* Family today : 1 colonne */
    #familyTodayGrid { flex-direction: column; gap: 0.75rem; }
    .family-person { min-width: unset; }

    /* Children overview : 1 colonne */
    .children-overview { flex-direction: column; }
    .child-overview-card { min-width: unset; }

    /* Homeschool form : 1 colonne */
    .hs-form { grid-template-columns: 1fr; }
    .hs-form button[type="submit"],
    .hs-form button[type="button"] { width: 100%; }

    /* Homeschool task : simplifié */
    .hs-task { grid-template-columns: 2rem 1fr auto; }
    .hs-desc { display: none; }
    .hs-due  { display: none; }

    /* Next event card */
    .next-event-card { flex-wrap: wrap; gap: 0.4rem; }
    .next-event-title { width: 100%; order: 2; }
    .next-event-soon  { order: 3; }

    /* Dashboard */
    .day-nav { gap: 0.5rem; }
    .day-title { font-size: 0.9rem; }
    .role-badge { font-size: 0.7rem; padding: 0.25rem 0.75rem; }

    /* Login */
    .login-wrap { padding: 2rem 1.25rem; margin: 1rem; }
}

/* --- 380px : très petit --- */
@media (max-width: 380px) {
    header h1 { font-size: 1.1rem; }

    .parent-home-wrap,
    .child-home-wrap,
    .dashboard-wrap { padding: 0.75rem; }

    .stat-num { font-size: 1.3rem; }

    .choice-card { padding: 0.75rem 1rem; }

    .hs-toggle-form-btn { font-size: 0.78rem; padding: 0.3rem 0.7rem; }

    .child-xp { font-size: 0.75rem; }
    .child-progress-msg { font-size: 0.82rem; }
}

/* ── MAGASIN DE RÉCOMPENSES ─────────────────────────────────────────────── */

.card-section {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.section-title-hub {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
}

.empty-hub {
    color: rgba(255,255,255,.35);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.btn-hub {
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s;
}
.btn-hub-primary { background: var(--accent); color: #fff; }
.btn-hub-primary:hover { filter: brightness(1.15); }
.btn-hub-ghost { background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.12); }
.btn-hub-ghost:hover { background: rgba(255,255,255,.12); }
.btn-small { padding: 0.3rem 0.65rem; font-size: 0.78rem; }

/* Formulaire ajout item (parent) */
.shop-add-form {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.shop-add-form input {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: #fff;
    font-size: 0.88rem;
    font-family: 'Nunito', sans-serif;
}
.shop-add-form input:focus { outline: none; border-color: var(--accent); }

/* Ligne item (vue parent) */
.shop-item-row, .claim-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.shop-item-row:last-child, .claim-row:last-child { border-bottom: none; }
.shop-item-emoji { font-size: 1.5rem; flex-shrink: 0; }
.shop-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.shop-item-info strong { font-size: 0.9rem; }
.shop-item-desc { font-size: 0.75rem; color: rgba(255,255,255,.45); }
.shop-item-cost { font-family: 'Orbitron', sans-serif; font-size: 0.78rem; color: var(--gold); flex-shrink: 0; }

/* Grille items (vue enfant) */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.shop-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    transition: all 0.2s;
}
.shop-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.shop-card-emoji { font-size: 2.5rem; }
.shop-card-titre { font-weight: 700; font-size: 0.88rem; }
.shop-card-desc { font-size: 0.75rem; color: rgba(255,255,255,.45); }
.shop-card-cost { font-family: 'Orbitron', sans-serif; font-size: 0.78rem; color: var(--gold); }
.shop-card-btn { width: 100%; margin-top: 0.25rem; }

/* Badges statut claim */
.badge-statut { font-size: 0.72rem; padding: 0.18rem 0.55rem; border-radius: 20px; font-weight: 700; }
.badge-en-attente { background: rgba(251,191,36,.15); color: #fbbf24; }
.badge-approuvé   { background: rgba(52,211,153,.15);  color: #34d399; }
.badge-refusé     { background: rgba(248,113,113,.15); color: #f87171; }

/* Toast */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.7rem 1.4rem;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    z-index: 999;
    animation: fadeIn 0.2s ease;
}
.toast-ok  { background: rgba(52,211,153,.9);  color: #064e3b; }
.toast-err { background: rgba(248,113,113,.9); color: #7f1d1d; }

/* ── ANGLAIS — hub 4 cartes ──────────────────────────────────────────────── */
.hub-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hub-card { position: relative; }

.hub-card-level {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: .6rem;
    font-weight: 800;
    color: var(--accent);
    opacity: .75;
    letter-spacing: .05em;
    font-family: 'Orbitron', sans-serif;
}

/* ── ANGLAIS — loading spinner ───────────────────────────────────────────── */
.eng-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid color-mix(in srgb, var(--accent) 20%, #222);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: eng-spin .8s linear infinite;
}

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

/* ── ANGLAIS — dictée ────────────────────────────────────────────────────── */
.dictee-flash {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
    padding: 1.1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, #333);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 6%, #111);
    line-height: 1.5;
}

.dictee-countdown {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--accent);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    opacity: .8;
}

.dictee-hint {
    font-size: 2rem;
    text-align: center;
}

.dictee-instructions {
    font-size: .82rem;
    color: #888;
    text-align: center;
}

/* ── ANGLAIS — level-up toast ────────────────────────────────────────────── */
.level-up-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--accent) 15%, #111);
    border: 2px solid var(--accent);
    border-radius: 20px;
    padding: 1.5rem 2.5rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent);
    text-align: center;
    z-index: 9999;
    animation: gold-pulse 1.5s ease-in-out infinite;
}

/* ── PARENT HOME — progrès anglais ──────────────────────────────────────── */
.eng-progress-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.eng-progress-row:last-child { border-bottom: none; }

.eng-progress-name {
    font-weight: 700;
    font-size: .88rem;
    min-width: 4.5rem;
}

.eng-progress-levels {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.eng-progress-pill {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    background: color-mix(in srgb, var(--accent) 8%, #111);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, #222);
    border-radius: 20px;
    padding: .18rem .5rem;
    font-size: .72rem;
    color: #e8e8ee;
}

.eng-lvl-num {
    font-weight: 800;
    font-size: .68rem;
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
}

/* ══════════════════════════════════════
   STREAM CURSOR
   ══════════════════════════════════════ */
@keyframes blink { 50% { opacity: 0; } }
.stream-cursor { animation: blink 0.8s step-end infinite; }

/* ══════════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════════ */
@keyframes sk-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.sk {
    border-radius: 6px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--surface, #1e1e2e) 100%, transparent) 25%,
        color-mix(in srgb, var(--accent, #888) 12%, var(--surface, #1e1e2e)) 50%,
        color-mix(in srgb, var(--surface, #1e1e2e) 100%, transparent) 75%
    );
    background-size: 1200px 100%;
    animation: sk-shimmer 1.6s ease-in-out infinite;
    display: block;
}

.sk-line       { height: 14px; margin-bottom: 8px; width: 100%; }
.sk-line-short { height: 14px; margin-bottom: 8px; width: 55%; }
.sk-line-xs    { height: 10px; margin-bottom: 6px; width: 35%; }
.sk-block      { height: 56px; width: 100%; }
.sk-card       { padding: 1rem; border: 1px solid var(--border, #333); border-radius: var(--radius, 10px); display: flex; flex-direction: column; gap: 0.5rem; }

/* ══════════════════════════════════════
   ZONE ZEN — LECTEUR AUDIO
   ══════════════════════════════════════ */
.zen-player-card {
    border: 1px solid #4a9aba;
    border-radius: var(--radius, 10px);
    background: linear-gradient(135deg, rgba(74,154,186,.08) 0%, rgba(135,206,235,.04) 100%);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.zen-player-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.zen-player-icon  { font-size: 1.3rem; }
.zen-player-title { font-weight: 700; color: #87ceeb; font-size: 1rem; flex: 1; }

@keyframes zen-bar-anim {
    0%, 100% { transform: scaleY(0.3); }
    50%       { transform: scaleY(1); }
}
.zen-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
    opacity: 0;
    transition: opacity 0.3s;
}
.zen-visualizer.playing { opacity: 1; }
.zen-bar {
    display: block;
    width: 4px;
    height: 100%;
    background: #87ceeb;
    border-radius: 2px;
    transform-origin: bottom;
    transform: scaleY(0.3);
}
.zen-visualizer.playing .zen-bar:nth-child(1) { animation: zen-bar-anim 0.9s ease-in-out infinite; }
.zen-visualizer.playing .zen-bar:nth-child(2) { animation: zen-bar-anim 0.7s ease-in-out infinite 0.15s; }
.zen-visualizer.playing .zen-bar:nth-child(3) { animation: zen-bar-anim 1.1s ease-in-out infinite 0.05s; }
.zen-visualizer.playing .zen-bar:nth-child(4) { animation: zen-bar-anim 0.8s ease-in-out infinite 0.25s; }
.zen-visualizer.playing .zen-bar:nth-child(5) { animation: zen-bar-anim 0.95s ease-in-out infinite 0.1s; }

.zen-track-display {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    padding: 0.4rem 0.6rem;
    background: rgba(0,0,0,.2);
    border-radius: 6px;
}
.zen-controls-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.zen-btn {
    background: rgba(74,154,186,.15);
    border: 1px solid rgba(74,154,186,.35);
    border-radius: 8px;
    color: #87ceeb;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.35rem 0.65rem;
    transition: background 0.2s;
}
.zen-btn:hover { background: rgba(74,154,186,.3); }
.zen-btn-play  {
    background: rgba(74,154,186,.25);
    font-size: 1.1rem;
    padding: 0.4rem 0.9rem;
}
.zen-vol-wrap  { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.zen-vol-icon  { font-size: 0.85rem; color: var(--muted); }
.zen-vol-slider {
    width: 80px;
    accent-color: #87ceeb;
    cursor: pointer;
}

/* ══════════════════════════════════════
   DRAG & DROP
   ══════════════════════════════════════ */
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.dragging  { opacity: 0.35; }
.drag-over { border-top: 2px solid var(--accent, #888) !important; }

/* ══════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════ */
body.dark-mode {
    --bg:       #050508;
    --surface:  #0e0e12;
    --surface2: #16161c;
    --text:     #e8e8ee;
    --muted:    #666;
    --border:   #2a2a35;
}

/* === DUNES (Bill) DARK MODE — neutralise les couleurs hardcodées du thème === */
body.parent-dunes.dark-mode {
    background-image: none;
    color: var(--text);
}
body.parent-dunes.dark-mode .parent-choice-card,
body.parent-dunes.dark-mode .choice-card,
body.parent-dunes.dark-mode .hub-card {
    background: var(--surface);
    border-color: var(--border);
}
body.parent-dunes.dark-mode .parent-choice-card:hover,
body.parent-dunes.dark-mode .choice-card:hover {
    background: color-mix(in srgb, var(--accent) 9%, #111);
}
body.parent-dunes.dark-mode .parent-choice-label,
body.parent-dunes.dark-mode .choice-label { color: color-mix(in srgb, var(--accent) 55%, #e8e8e8); }
body.parent-dunes.dark-mode .parent-choice-sub { color: var(--muted); }
body.parent-dunes.dark-mode .parent-choice-arrow { color: color-mix(in srgb, var(--accent) 40%, #444); }
body.parent-dunes.dark-mode .family-today,
body.parent-dunes.dark-mode .child-overview-card,
body.parent-dunes.dark-mode .homeschool-section {
    background: var(--surface);
    border-color: var(--border);
}
body.parent-dunes.dark-mode .family-points-card {
    background: var(--surface);
    border-color: var(--border);
}
body.parent-dunes.dark-mode .family-points-name { color: var(--text); }
body.parent-dunes.dark-mode .stat-card {
    background: var(--surface);
    border-color: var(--border);
}
body.parent-dunes.dark-mode .stat-card.stat-warn { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.3); }
body.parent-dunes.dark-mode .stat-num { color: var(--accent); }
body.parent-dunes.dark-mode .stat-label,
body.parent-dunes.dark-mode .family-today-header,
body.parent-dunes.dark-mode .hs-week-nav,
body.parent-dunes.dark-mode .hs-progress,
body.parent-dunes.dark-mode .hs-due,
body.parent-dunes.dark-mode .hs-desc,
body.parent-dunes.dark-mode .section-title,
body.parent-dunes.dark-mode .child-overview-stats { color: var(--muted); }
body.parent-dunes.dark-mode .family-person-name,
body.parent-dunes.dark-mode .child-overview-name,
body.parent-dunes.dark-mode .hs-subject,
body.parent-dunes.dark-mode .day-title { color: var(--text); }
body.parent-dunes.dark-mode .day-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
body.parent-dunes.dark-mode .hs-check { border-color: var(--border); color: var(--muted); }
body.parent-dunes.dark-mode .hs-form select,
body.parent-dunes.dark-mode .hs-form input {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}
body.parent-dunes.dark-mode .modal,
body.parent-dunes.dark-mode .hs-modal {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
body.parent-dunes.dark-mode .hs-modal p { color: var(--text); }
body.parent-dunes.dark-mode .modal-overlay,
body.parent-dunes.dark-mode .hs-modal-overlay { background: rgba(0,0,0,.6); }
body.parent-dunes.dark-mode .btn-cancel,
body.parent-dunes.dark-mode .hs-modal-btns button:last-child {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}
body.parent-dunes.dark-mode .schedule-container,
body.parent-dunes.dark-mode .todo-section {
    background: var(--surface);
    border-color: var(--border);
}
body.parent-dunes.dark-mode .event-chip { background: var(--surface); }
body.parent-dunes.dark-mode .event-title { color: var(--text); }
body.parent-dunes.dark-mode .event-time,
body.parent-dunes.dark-mode .time-label { color: var(--muted); }
body.parent-dunes.dark-mode .todo-item { border-bottom-color: var(--border); }
body.parent-dunes.dark-mode .todo-item.todo-done .todo-text { color: var(--muted); }
body.parent-dunes.dark-mode .btn-add-todo,
body.parent-dunes.dark-mode .btn-add-event,
body.parent-dunes.dark-mode .btn-type-choice { border-color: var(--border); color: var(--muted); }
body.parent-dunes.dark-mode select.modal-input,
body.parent-dunes.dark-mode input.modal-input {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}
body.parent-dunes.dark-mode .grocery-list { background: var(--surface); border-color: var(--border); }
body.parent-dunes.dark-mode .msg-view-header { border-bottom-color: var(--border); }
body.parent-dunes.dark-mode .msg-view-title { color: var(--accent); }
body.parent-dunes.dark-mode .msg-tab { border-color: var(--border); color: var(--muted); }
body.parent-dunes.dark-mode .project-header { color: var(--text); }
body.parent-dunes.dark-mode .conversation-list { border-left-color: var(--border); }
body.parent-dunes.dark-mode .conversation-item { color: var(--text); }
body.parent-dunes.dark-mode .msg-claude {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}
body.parent-dunes.dark-mode .chat-input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
body.parent-dunes.dark-mode .chat-input::placeholder { color: var(--muted); }
body.parent-dunes.dark-mode .btn-back-hub { border-color: var(--border); color: var(--muted); }
body.parent-dunes.dark-mode .btn-new-project { border-color: var(--border); }

.dark-toggle {
    background: none;
    border: 1px solid var(--border, #333);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    color: var(--text, #e8e8e8);
    transition: border-color 0.2s;
}
.dark-toggle:hover { border-color: var(--accent, #888); }

/* ══════════════════════════════════════
   LIGHT MODE — profils sombres par défaut (Nao / Zakary / Alya)
   Activé via body.light-mode ; toggle géré par dark-mode.js
   ══════════════════════════════════════ */

/* Variables communes à tous les light-mode */
.light-mode {
    --surface:  #ffffff;
    --surface2: #f0f2f8;
    --text:     #1a1a2e;
    --muted:    #8888aa;
    --border:   rgba(0, 0, 0, 0.12);
}

/* Cartes de navigation avec fond hardcodé #111 → fond clair */
.light-mode .parent-choice-card,
.light-mode .choice-card,
.light-mode .game-card,
.light-mode .family-points-card {
    background: color-mix(in srgb, var(--accent) 6%, #fff);
    border-color: color-mix(in srgb, var(--accent) 22%, #ddd);
}
.light-mode .parent-choice-card:hover,
.light-mode .choice-card:hover,
.light-mode .game-card:hover {
    background: color-mix(in srgb, var(--accent) 14%, #fff);
}
.light-mode .parent-choice-label,
.light-mode .choice-label { color: color-mix(in srgb, var(--accent) 65%, #222); }
.light-mode .parent-choice-sub { color: var(--muted); }
.light-mode .parent-choice-arrow { color: var(--accent); }
.light-mode .family-points-name { color: var(--text); }
.light-mode .choice-icon { filter: none; }

/* Sections semi-transparentes → fond opaque */
.light-mode .homeschool-section,
.light-mode .family-today,
.light-mode .child-overview-card,
.light-mode .zen-player-card,
.light-mode .stat-card {
    background: var(--surface);
    border-color: var(--border);
}
.light-mode .stat-label { color: var(--muted); }

/* Textes sombres héritant du thème dark → override */
.light-mode .family-today-header,
.light-mode .hs-week-nav,
.light-mode .hs-progress,
.light-mode .hs-due,
.light-mode .hs-desc,
.light-mode .section-title,
.light-mode .child-overview-stats { color: var(--muted); }
.light-mode .hs-subject,
.light-mode .day-title,
.light-mode .family-person-name,
.light-mode .child-overview-name { color: var(--text); }

/* Formulaires */
.light-mode .hs-form select,
.light-mode .hs-form input,
.light-mode select.modal-input,
.light-mode input.modal-input {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}
.light-mode .day-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

/* Pills progrès anglais */
.light-mode .eng-progress-pill {
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    border-color: color-mix(in srgb, var(--accent) 22%, #ddd);
    color: var(--text);
}
.light-mode .eng-lvl-num { color: var(--accent); }

/* Modales */
.light-mode .hs-modal,
.light-mode .modal {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.light-mode .hs-modal p { color: var(--text); }
.light-mode .hs-modal-overlay,
.light-mode .modal-overlay { background: rgba(0, 0, 0, 0.25); }

/* Inputs chat */
.light-mode .chat-input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.light-mode .chat-input::placeholder { color: var(--muted); }

/* ── Parent-Grid (Nao) ── */
body.parent-grid.light-mode {
    --bg:       #f0f2ff;
    --surface2: #e4eaff;
    background-color: var(--bg);
    color: var(--text);
}
/* Override des #0f0f1c hardcodés spécifiques au grid */
body.parent-grid.light-mode .family-today,
body.parent-grid.light-mode .child-overview-card,
body.parent-grid.light-mode .homeschool-section {
    background: var(--surface);
    border-color: var(--border);
}
body.parent-grid.light-mode .msg-claude {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}

/* ── Child-Stars (Zakary) ── */
body.child-stars.light-mode {
    --bg:       #f4f0ff;
    --surface2: #ebe6ff;
    background-color: var(--bg);
    background-image: none; /* étoiles blanches invisibles sur fond clair */
    color: var(--text);
}

/* ── Child-Hibiscus (Alya) ── */
body.child-hibiscus.light-mode {
    --bg:       #fff0f7;
    --surface2: #ffe4f0;
    background-color: var(--bg);
    color: var(--text);
    /* hibiscus semi-transparent fonctionne bien sur fond clair ✓ */
}