/* =========================================================================
   MA SCOLARITÉ — Le carnet de bord
   Design : papier crème, accents pop, typo Fraunces (display) + Plus Jakarta Sans (UI)
   ========================================================================= */

/* ---------- Variables ---------- */
:root {
    --paper:        #FFF8EC;
    --paper-2:      #FBEFD7;
    --ink:          #2A2438;
    --ink-soft:     #5A5170;
    --ink-mute:     #918AA8;
    --line:         #E8DEC4;

    --primary:      #7C5CFF;
    --primary-dark: #5B3FE0;
    --primary-soft: #EDE7FF;

    --accent:       #FFB347;
    --accent-soft:  #FFE9C7;

    --mint:         #5DD4A8;
    --mint-soft:    #D4F4E5;
    --coral:        #FF6B9D;
    --coral-soft:   #FFE0EC;
    --sky:          #6BB8FF;
    --sky-soft:     #DCEEFF;

    --danger:       #E64A4A;
    --danger-soft:  #FFE0E0;

    --shadow-sm: 0 2px 6px rgba(42, 36, 56, 0.06);
    --shadow-md: 0 8px 24px rgba(42, 36, 56, 0.10);
    --shadow-lg: 0 24px 48px rgba(42, 36, 56, 0.14);
    --shadow-paper: 0 1px 0 rgba(42,36,56,.05), 0 8px 18px rgba(42,36,56,.08), 0 16px 40px rgba(42,36,56,.06);

    --radius-sm: 10px;
    --radius:    18px;
    --radius-lg: 28px;
    --radius-xl: 36px;

    --font-display: "Fraunces", Georgia, serif;
    --font-ui:      "Plus Jakarta Sans", -apple-system, sans-serif;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--paper);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(124, 92, 255, 0.10), transparent 38%),
        radial-gradient(circle at 88% 8%, rgba(255, 179, 71, 0.14), transparent 42%),
        radial-gradient(circle at 78% 92%, rgba(93, 212, 168, 0.10), transparent 40%),
        radial-gradient(circle at 8% 88%, rgba(255, 107, 157, 0.10), transparent 38%);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(42,36,56,.15); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(42,36,56,.25); }

/* ---------- Boot screen ---------- */
.boot-screen {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 18px;
}
.boot-logo { font-size: 64px; animation: bounce 1.2s ease-in-out infinite; }
.boot-text { font-family: var(--font-display); font-size: 22px; color: var(--ink-soft); }
@keyframes bounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-12px) rotate(5deg); }
}

/* =========================================================================
   LOGIN
   ========================================================================= */
.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 900px) { .login-page { grid-template-columns: 1fr; } }

.login-hero {
    position: relative; overflow: hidden;
    padding: 56px 64px;
    display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 50%),
        linear-gradient(140deg, var(--primary) 0%, var(--coral) 100%);
    color: #fff;
}
@media (max-width: 900px) { .login-hero { padding: 36px 28px; min-height: 240px; } }

.login-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 12% 78%, rgba(255,255,255,.18) 0, transparent 22%),
        radial-gradient(circle at 88% 28%, rgba(255,255,255,.14) 0, transparent 25%);
    pointer-events: none;
}
.login-brand {
    position: relative; display: flex; align-items: center; gap: 14px;
    font-family: var(--font-display); font-size: 26px; font-weight: 800;
}
.login-brand .star {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.22); border-radius: 14px;
    backdrop-filter: blur(12px); font-size: 24px;
}

.login-headline {
    position: relative; max-width: 480px;
}
.login-headline h1 {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(36px, 5vw, 64px); line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}
.login-headline h1 em {
    font-style: italic; font-weight: 600;
    background: linear-gradient(120deg, #FFE9C7, #fff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-headline p { font-size: 18px; opacity: .92; line-height: 1.55; max-width: 440px; }

.login-cards {
    position: relative; display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 24px;
}
.login-cards .mini-card {
    background: rgba(255,255,255,.16); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px; padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 500;
}
.mini-card .emoji { font-size: 20px; }

.login-form-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 56px 32px;
}
.login-card {
    width: 100%; max-width: 420px;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    box-shadow: var(--shadow-paper);
    border: 1px solid rgba(232, 222, 196, .6);
}
@media (max-width: 540px) { .login-card { padding: 28px 22px; } }
.login-card h2 {
    font-family: var(--font-display); font-size: 32px;
    margin-bottom: 6px; letter-spacing: -0.02em;
}
.login-card .subtitle {
    color: var(--ink-mute); font-size: 14px; margin-bottom: 28px;
}

/* =========================================================================
   FORM ELEMENTS
   ========================================================================= */
.field { margin-bottom: 16px; }
/* `.field-label` accompagne `label` : les contenus non étiquetables (sélecteur
   de couleur, choix d'emoji) n'ont pas de champ à désigner et portent leur nom
   sur le groupe — ils doivent malgré tout se présenter à l'identique. */
.field label, .field .field-label {
    display: block; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-soft); margin-bottom: 6px;
}
.field-aide { display: block; margin-top: 6px; line-height: 1.5; }
.input, .select, .textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.textarea { min-height: 90px; resize: vertical; font-family: inherit; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 14px;
    font-weight: 700; font-size: 15px;
    transition: transform .15s, box-shadow .15s, background .15s;
    border: 2px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--ink); color: #fff;
    box-shadow: 0 6px 0 var(--ink-soft), 0 12px 24px rgba(42, 36, 56, .25);
}
.btn-primary:hover { box-shadow: 0 8px 0 var(--ink-soft), 0 14px 28px rgba(42,36,56,.30); background: var(--ink); }
.btn-primary:active { box-shadow: 0 2px 0 var(--ink-soft); transform: translateY(4px); }

.btn-accent {
    background: var(--accent); color: var(--ink);
    box-shadow: 0 6px 0 #d8902c, 0 12px 24px rgba(255,179,71,.30);
}
.btn-accent:hover { box-shadow: 0 8px 0 #d8902c, 0 14px 28px rgba(255,179,71,.36); background: var(--accent); }
.btn-accent:active { box-shadow: 0 2px 0 #d8902c; transform: translateY(4px); }

.btn-coral {
    background: var(--coral); color: #fff;
    box-shadow: 0 6px 0 #d44e7c, 0 12px 24px rgba(255,107,157,.30);
}
.btn-coral:hover { background: var(--coral); }

.btn-mint {
    background: var(--mint); color: var(--ink);
    box-shadow: 0 6px 0 #3eb088, 0 12px 24px rgba(93,212,168,.25);
}
.btn-mint:hover { background: var(--mint); }

.btn-ghost {
    background: transparent;
    border: 2px solid var(--line);
    color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }

.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 6px 0 #b03333; }
.btn-danger:hover { background: var(--danger); }

.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* =========================================================================
   APP SHELL (parent / admin / child)
   ========================================================================= */
.shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }

/* Le menu du parent compte une quinzaine d'entrées : sur un écran court, il
   dépassait les 100vh et les derniers items débordaient hors du panneau blanc,
   posés à même le fond de page. Le panneau défile donc sur lui-même, avec la
   marque et la carte du compte qui restent collées en haut et en bas — on ne
   perd jamais de vue qui est connecté ni comment se déconnecter.
   Le rembourrage vertical est porté par ces deux blocs collants : s'il restait
   sur .sidebar, le contenu défilerait dans une bande visible au-dessus et
   au-dessous d'eux. */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 0 18px;
    display: flex; flex-direction: column; gap: 6px;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }
@media (max-width: 900px) {
    .sidebar { position: static; height: auto; flex-direction: row;
        overflow-x: auto; overflow-y: visible; padding: 14px; gap: 8px; }
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 24px 8px 12px;
    position: sticky; top: 0; z-index: 2;
    background: #fff;
}
.sidebar-brand .logo {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--coral));
    display: grid; place-items: center; color: #fff; font-size: 22px;
}
.sidebar-brand .name {
    font-family: var(--font-display); font-weight: 800; font-size: 18px;
    line-height: 1; letter-spacing: -0.01em;
}
.sidebar-brand .tagline {
    font-size: 11px; color: var(--ink-mute); margin-top: 3px;
}

.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    font-weight: 600; font-size: 14px;
    color: var(--ink-soft); cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.nav-item:hover { background: var(--paper-2); color: var(--ink); }
.nav-item.active { background: var(--ink); color: #fff; }
.nav-item .icon { font-size: 18px; line-height: 1; }

/* Écran de portable peu haut : on resserre le menu pour qu'il tienne d'un
   seul tenant plutôt que d'obliger à faire défiler pour atteindre « Mon foyer ».
   Placé APRÈS les règles ci-dessus : à spécificité égale, c'est la dernière
   déclaration qui gagne, media query ou pas. */
@media (min-width: 901px) and (max-height: 900px) {
    .sidebar { gap: 3px; }
    .sidebar-brand { padding: 16px 8px 8px; }
    .nav-item { padding: 9px 12px; font-size: 13.5px; }
    .nav-item .icon { font-size: 16px; }
}

.sidebar-footer {
    margin: auto 0 18px;
    padding: 14px;
    border-radius: 16px;
    background: var(--paper-2);
    display: flex; align-items: center; gap: 12px;
    position: sticky; bottom: 18px; z-index: 2;
    /* L'anneau blanc masque le menu qui défile derrière la carte : sans lui,
       on le verrait passer dans ses coins arrondis et sous elle. */
    box-shadow: 0 0 0 18px #fff;
}
.sidebar-footer .avatar { flex-shrink: 0; }
.sidebar-footer .who { font-size: 13px; line-height: 1.3; min-width: 0; }
.sidebar-footer .who .name { font-weight: 700; truncate: ellipsis; overflow: hidden; }
.sidebar-footer .who .role { color: var(--ink-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.sidebar-footer .logout {
    margin-left: auto; padding: 6px 10px; border-radius: 8px;
    background: #fff; font-size: 18px;
}
.sidebar-footer .logout:hover { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 900px) { .sidebar-footer { display: none; } }

/* Main content */
.main {
    padding: 32px 40px 80px;
    max-width: 1320px;
}
@media (max-width: 700px) { .main { padding: 20px 18px 60px; } }

.page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.page-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.02em;
    line-height: 1.1;
}
.page-title em { font-style: italic; font-weight: 600; color: var(--primary); }
.page-subtitle { color: var(--ink-mute); font-size: 15px; margin-top: 4px; }

/* =========================================================================
   AVATARS
   ========================================================================= */
.avatar {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: grid; place-items: center;
    font-size: 22px;
    color: #fff;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.avatar.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
.avatar.xl { width: 88px; height: 88px; border-radius: 24px; font-size: 44px; }
.avatar.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }

/* =========================================================================
   CARDS
   ========================================================================= */
.card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-paper);
    border: 1px solid rgba(232, 222, 196, .5);
}
.card-title {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    margin-bottom: 14px; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 10px;
}
.card-title .badge-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary);
}

.grid {
    display: grid; gap: 18px;
}
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Stat card */
.stat-card {
    background: #fff; border-radius: var(--radius);
    padding: 20px; border: 1px solid rgba(232,222,196,.6);
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.stat-card .stat-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: grid; place-items: center; font-size: 22px;
    margin-bottom: 14px;
}
.stat-card .stat-value {
    font-family: var(--font-display); font-weight: 800;
    font-size: 36px; line-height: 1; letter-spacing: -0.02em;
}
.stat-card .stat-label {
    color: var(--ink-mute); font-size: 13px; margin-top: 6px;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}

/* =========================================================================
   TABLES
   ========================================================================= */
.table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #fff; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.table th, .table td {
    padding: 12px 16px; text-align: left; font-size: 14px;
    border-bottom: 1px solid var(--line);
}
.table th {
    background: var(--paper-2);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-soft); font-weight: 700;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--paper); }

/* =========================================================================
   BADGES / TAGS
   ========================================================================= */
.tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: var(--paper-2); color: var(--ink-soft);
}
.tag.primary { background: var(--primary-soft); color: var(--primary-dark); }
.tag.accent  { background: var(--accent-soft); color: #b06a1a; }
.tag.mint    { background: var(--mint-soft); color: #2c8061; }
.tag.coral   { background: var(--coral-soft); color: #b8336d; }
.tag.sky     { background: var(--sky-soft); color: #2872c1; }
.tag.danger  { background: var(--danger-soft); color: var(--danger); }

.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.status-pill.a_faire   { background: var(--paper-2); color: var(--ink-soft); }
.status-pill.en_cours  { background: var(--sky-soft); color: #2872c1; }
.status-pill.termine   { background: var(--mint-soft); color: #2c8061; }
.status-pill.corrige   { background: var(--primary-soft); color: var(--primary-dark); }

/* =========================================================================
   PLANNING / GRILLE HEBDOMADAIRE
   ========================================================================= */
.week-nav {
    display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.week-nav .week-label {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    letter-spacing: -0.01em;
}
.week-arrow {
    width: 38px; height: 38px; border-radius: 12px;
    background: #fff; border: 1.5px solid var(--line);
    display: grid; place-items: center;
    font-size: 18px; color: var(--ink);
    transition: all .15s;
}
.week-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.planning-grid {
    display: grid;
    grid-template-columns: 70px repeat(7, 1fr);
    background: #fff; border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-paper);
    border: 1px solid var(--line);
    min-width: 760px;
}
.planning-wrap { overflow-x: auto; padding-bottom: 8px; }

.planning-grid .day-header {
    padding: 14px 8px; text-align: center;
    background: var(--paper-2);
    font-weight: 700; font-size: 13px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.planning-grid .day-header:last-child { border-right: none; }
.planning-grid .day-header .day-num {
    font-family: var(--font-display); font-size: 20px; display: block;
    margin-top: 2px;
}
.planning-grid .day-header.today { background: var(--primary); color: #fff; }
.planning-grid .corner { background: var(--paper-2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }

.planning-grid .hour-label {
    padding: 8px 6px; font-size: 11px; color: var(--ink-mute);
    text-align: right; border-right: 1px solid var(--line);
    border-bottom: 1px dashed var(--line);
    height: 56px;
    display: flex; align-items: flex-start; justify-content: flex-end;
}
.planning-grid .day-cell {
    border-right: 1px solid var(--line);
    border-bottom: 1px dashed var(--line);
    height: 56px;
    position: relative;
    cursor: pointer;
    transition: background .12s;
}
.planning-grid .day-cell:hover { background: var(--paper); }
.planning-grid .day-cell:last-child { border-right: none; }

.event {
    position: absolute; left: 4px; right: 4px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .12s;
    z-index: 2;
}
.event:hover { transform: scale(1.02); z-index: 5; }
.event .event-title { font-weight: 700; line-height: 1.2; }
.event .event-meta { font-size: 10px; color: var(--ink-soft); margin-top: 2px; }
.event .travel-bar {
    position: absolute; left: -4px; top: 0; bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(
        45deg, var(--accent) 0 4px, transparent 4px 8px
    );
}
.event.is-homework { background: var(--mint-soft); border-left-color: var(--mint); }
.event.is-homework.priority-3 { background: var(--coral-soft); border-left-color: var(--coral); }

/* =========================================================================
   HOMEWORK LIST
   ========================================================================= */
.hw-list { display: flex; flex-direction: column; gap: 12px; }
.hw-item {
    background: #fff;
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .12s, box-shadow .12s;
}
.hw-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hw-checkbox {
    width: 28px; height: 28px; border-radius: 9px;
    border: 2px solid var(--line); flex-shrink: 0;
    display: grid; place-items: center;
    transition: all .12s;
    background: #fff;
}
.hw-checkbox.checked {
    background: var(--mint); border-color: var(--mint);
    color: #fff;
}
.hw-checkbox:hover { border-color: var(--primary); }
.hw-body { flex: 1; min-width: 0; }
.hw-title { font-weight: 700; font-size: 15px; }
.hw-title.done { text-decoration: line-through; color: var(--ink-mute); }
.hw-meta {
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
    font-size: 12px; color: var(--ink-mute);
}
.hw-actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--paper-2); display: grid; place-items: center;
    font-size: 16px; transition: all .12s;
}
.icon-btn:hover { background: var(--ink); color: #fff; }
.icon-btn.danger:hover { background: var(--danger); color: #fff; }

/* =========================================================================
   DOCUMENTS GRID
   ========================================================================= */
.docs-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.doc-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 18px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.doc-card .doc-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--primary-soft); color: var(--primary);
    display: grid; place-items: center; font-size: 26px;
    margin-bottom: 14px;
}
.doc-card .doc-title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.doc-card .doc-meta {
    margin-top: 6px; font-size: 12px; color: var(--ink-mute);
    display: flex; gap: 8px; flex-wrap: wrap;
}
.doc-card .corner-tag {
    position: absolute; top: 12px; right: 12px;
    font-size: 10px; padding: 3px 8px;
}
.doc-card .doc-comments {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-size: 12px; color: var(--ink-soft);
    display: flex; gap: 12px; align-items: center;
}

/* =========================================================================
   COMMENTS
   ========================================================================= */
.comments-list { display: flex; flex-direction: column; gap: 12px; }
.comment {
    display: flex; gap: 12px;
    padding: 14px;
    background: var(--paper);
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.comment .body { flex: 1; }
.comment .author {
    font-weight: 700; font-size: 14px;
    display: flex; align-items: center; gap: 8px;
}
.comment .author .relation {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--accent-soft); color: #b06a1a; font-weight: 600;
    text-transform: lowercase;
}
.comment .author time {
    color: var(--ink-mute); font-weight: 500; font-size: 12px;
}
.comment .text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.comment .rating { margin-top: 6px; font-size: 16px; }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(42, 36, 56, 0.45);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fadein .15s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: #fff;
    border-radius: var(--radius-lg);
    width: 100%; max-width: 540px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: pop .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.modal-header {
    padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--line);
}
.modal-header h3 { font-family: var(--font-display); font-size: 22px; }
.modal-close {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--paper-2); display: grid; place-items: center;
    font-size: 18px;
}
.modal-close:hover { background: var(--ink); color: #fff; }
.modal-body { padding: 24px 26px; }
.modal-footer {
    padding: 18px 26px;
    border-top: 1px solid var(--line);
    display: flex; gap: 10px; justify-content: flex-end;
}

/* =========================================================================
   TOASTS
   ========================================================================= */
#toasts {
    position: fixed; top: 20px; right: 20px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: #fff;
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    min-width: 240px; max-width: 380px;
    animation: slidein .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slidein {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.toast.success { border-left-color: var(--mint); }
.toast.error   { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--sky); }
.toast .icon { font-size: 20px; }

/* =========================================================================
   CHILD MODE — variation joyeuse pour l'espace enfant
   ========================================================================= */
.child-mode {
    --primary: #FF6B9D;
    --primary-dark: #d44e7c;
    --primary-soft: #FFE0EC;
}
.child-mode body { background-color: #FFF8F0; }

.child-hero {
    position: relative;
    background: linear-gradient(135deg, var(--coral) 0%, var(--accent) 100%);
    border-radius: var(--radius-xl);
    padding: 32px 36px;
    color: #fff;
    margin-bottom: 28px;
    overflow: hidden;
}
.child-hero::before {
    content: ""; position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
}
.child-hero::after {
    content: ""; position: absolute;
    bottom: -60px; left: 30%;
    width: 150px; height: 150px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
}
.child-hero .hello {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em;
    margin-bottom: 8px;
    position: relative; z-index: 1;
}
.child-hero .hello em {
    background: linear-gradient(120deg, #fff, #FFE9C7);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-style: italic; font-weight: 600;
}
.child-hero .vibe { font-size: 16px; opacity: .92; max-width: 540px; position: relative; z-index: 1; }

.streaks {
    display: flex; gap: 12px; margin-top: 18px; position: relative; z-index: 1; flex-wrap: wrap;
}
.streak-pill {
    background: rgba(255,255,255,0.22); backdrop-filter: blur(8px);
    border-radius: 999px; padding: 8px 16px;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}

/* Today panel (child) */
.today-panel {
    background: #fff; border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-paper);
    border: 1px solid var(--line);
    margin-bottom: 24px;
}
.today-panel h3 {
    font-family: var(--font-display); font-size: 22px;
    margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.today-list { display: flex; flex-direction: column; gap: 10px; }
.today-line {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 14px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    transition: all .15s;
}
.today-line:hover { background: var(--paper-2); border-color: var(--ink-soft); }
.today-line .time {
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
    flex-shrink: 0; width: 80px;
}
.today-line .what { flex: 1; min-width: 0; }
.today-line .what .title { font-weight: 700; }
.today-line .what .where { font-size: 12px; color: var(--ink-mute); }
.today-line .pip {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--primary); flex-shrink: 0;
}

/* Reward badges */
.rewards-strip {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 16px;
}
.reward-badge {
    background: #fff; border: 2px solid var(--accent);
    border-radius: 16px; padding: 12px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-sm);
    animation: badge-pop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badge-pop {
    0%   { transform: scale(0) rotate(-30deg); }
    100% { transform: scale(1) rotate(0); }
}
.reward-badge .emoji { font-size: 24px; }

/* =========================================================================
   EMPTY STATES
   ========================================================================= */
.empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--ink-mute);
}
.empty .emoji { font-size: 56px; margin-bottom: 12px; opacity: 0.7; }
.empty h4 { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.empty p { font-size: 14px; max-width: 360px; margin: 0 auto; line-height: 1.5; }

/* =========================================================================
   HELPERS
   ========================================================================= */
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.gap-sm { gap: 8px; }
.gap-lg { gap: 20px; }
.flex-1 { flex: 1; }
.text-mute { color: var(--ink-mute); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.fw-700 { font-weight: 700; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.center { text-align: center; }
.hidden { display: none !important; }

.divider {
    height: 1px;
    background: var(--line);
    margin: 16px 0;
}

/* Color picker */
.color-picker {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.color-dot {
    width: 36px; height: 36px; border-radius: 12px;
    border: 3px solid #fff; cursor: pointer;
    box-shadow: 0 0 0 2px var(--line);
    transition: all .12s;
}
.color-dot.selected { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.1); }

.emoji-picker {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
    max-height: 180px; overflow-y: auto;
    padding: 8px; border: 1.5px solid var(--line); border-radius: 12px;
    background: var(--paper);
}
.emoji-option {
    aspect-ratio: 1; border-radius: 8px;
    display: grid; place-items: center;
    font-size: 22px; cursor: pointer;
    transition: all .12s;
}
.emoji-option:hover { background: var(--paper-2); }
.emoji-option.selected { background: var(--ink); }

/* Pretty hr (cahier-style) */
.notebook-line {
    height: 1px;
    background: repeating-linear-gradient(to right,
        var(--line) 0 8px, transparent 8px 14px);
    margin: 20px 0;
}

/* =========================================================================
   COMPLÉMENTS — homework rows, rewards wall, planning wrap, preview, mobile
   ========================================================================= */

/* Homework row (compact list item) */
.hw-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.hw-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--ink-soft);
}

/* Rewards wall (full-page grid of trophies) */
.rewards-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.reward-card {
    background: linear-gradient(160deg, #fff, var(--accent-soft) 200%);
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    transition: transform .15s;
    box-shadow: var(--shadow-paper);
}
.reward-card:hover { transform: translateY(-4px) rotate(-1deg); }
.reward-emoji {
    font-size: 64px; line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 8px rgba(255, 179, 71, .35));
    animation: trophy-bounce 3.5s ease-in-out infinite;
}
@keyframes trophy-bounce {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(3deg) translateY(-4px); }
}
.reward-label {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 700; color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.reward-msg {
    font-style: italic;
    font-size: 13px; color: var(--ink-soft);
    line-height: 1.4;
    margin: 6px 0;
}
.reward-from {
    font-size: 11px; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .06em;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

/* Planning wrap (overflow on small screens) */
.planning-wrap {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    overflow: auto;
    box-shadow: var(--shadow-sm);
}

/* Preview wrap (image / pdf preview inside modals) */
.preview-wrap {
    margin: 12px 0;
    padding: 12px;
    background: var(--paper);
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    text-align: center;
    min-height: 80px;
    display: flex; align-items: center; justify-content: center;
}
.preview-wrap img, .preview-wrap iframe { max-width: 100%; }

/* ── Aperçu d'un document (window.UI.apercuDocument) ────────────────────────
   Les documents texte étaient les seuls à n'avoir aucun aperçu : ouvrir un
   cours en Markdown donnait un volet vide. Le rendu texte est aligné à gauche
   et défile dans le cadre — un cours fait plusieurs écrans, la fenêtre modale
   non. */
.doc-apercu-image { max-height: 380px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.doc-apercu-pdf {
    width: 100%; height: 440px;
    border: 1px solid var(--line); border-radius: 12px;
}
.doc-apercu-texte {
    width: 100%;
    max-height: 380px;
    overflow-y: auto;
    text-align: left;
    padding: 4px 8px;
    font-size: 14px;
}
.doc-apercu-brut {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
}
.doc-apercu-vide { padding: 32px 16px; text-align: center; }

/* Tableaux Markdown — fiches, cours et leçons en contiennent souvent
   (tableau de variations, frise, comparatif). Sans mise en forme, ils
   s'affichaient en lignes de barres verticales. */
.md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.95em;
}
.md-table th, .md-table td {
    border: 1px solid var(--line);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.md-table th { background: var(--paper-2); font-weight: 700; }
.md-table tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }

/* Doc card variants */
.doc-card.sm {
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: auto;
}
.doc-card.sm .doc-icon { font-size: 28px; margin: 0; }

/* Comment block tweaks (overrides if needed) */
.comment-body { flex: 1; min-width: 0; }
.comment-meta { font-size: 13px; margin-bottom: 4px; }
.comment-content { font-size: 14px; line-height: 1.5; color: var(--ink); }

/* ============ MOBILE FIXES ============ */
@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static; height: auto;
        flex-direction: row; flex-wrap: wrap;
        padding: 12px;
        gap: 4px;
    }
    .sidebar-brand {
        width: 100%; margin-bottom: 8px;
        position: static; padding: 10px 8px;
    }
    .sidebar .nav-item {
        flex: 1; min-width: 110px;
        justify-content: center;
        padding: 10px 8px;
        font-size: 13px;
    }
    .sidebar-footer {
        width: 100%; margin: 8px 0 0;
        position: static; box-shadow: none;
    }
    .main { padding: 18px; }
    .page-header {
        flex-direction: column; align-items: flex-start;
        gap: 12px;
    }
    .page-title { font-size: 28px; }
    .stat-card { padding: 16px; }
    .planning-grid { min-width: 720px; } /* horizontal scroll on mobile */
}

@media (max-width: 540px) {
    .child-hero { padding: 28px 22px; }
    .child-hero .hello { font-size: 28px; }
    .login-card { padding: 28px 22px; }
}

/* =========================================================================
   IA & PLANNING — bouton génération, panneau résultat, badges
   ========================================================================= */

/* Bouton "Génère mon planning" — gros, accent magique */
.ai-cta {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #7C5CFF, #FF6B9D);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(124, 92, 255, .35);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border: none;
    font-family: var(--font-ui);
    text-align: left;
    width: 100%;
}
.ai-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(124, 92, 255, .45); }
.ai-cta:active { transform: translateY(-1px); }
.ai-cta .icon {
    font-size: 32px;
    width: 56px; height: 56px;
    background: rgba(255,255,255,.22);
    border-radius: 16px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.ai-cta .body { flex: 1; }
.ai-cta .title { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.ai-cta .sub { font-size: 13px; opacity: .9; margin-top: 2px; }
.ai-cta .arrow { font-size: 24px; opacity: .85; }

.ai-cta:disabled,
.ai-cta.disabled {
    background: #ddd; color: #888;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}

/* Panneau résultat IA */
.ai-plan {
    margin-top: 20px;
    background: #fff;
    border: 2px dashed var(--primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-paper);
}
/* ── Choix de la période à planifier ─────────────────────────────────────
   Des boutons-cartes plutôt qu'un menu déroulant : chaque période porte ses
   DATES, et un menu les cacherait derrière un libellé. Un élève doit voir
   « du jeudi 10 au dimanche 13 » sans avoir à ouvrir quoi que ce soit. */
.periode-choix {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.periode-choix:hover { border-color: var(--primary); }
.periode-choix.active {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.periode-choix .emoji { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.periode-choix .corps { display: flex; flex-direction: column; min-width: 0; }
.periode-choix .titre { font-weight: 700; font-size: 14px; }
.periode-choix .detail { font-size: 12px; color: var(--ink-mute); }
.periode-choix.active .detail { color: var(--ink-soft); }

.ai-plan-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--line);
}
.ai-plan-header .ai-emoji {
    font-size: 36px;
    animation: sparkle 2.5s ease-in-out infinite;
}
@keyframes sparkle {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50%      { transform: rotate(5deg) scale(1.1); }
}
.ai-plan-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
}
.ai-plan-meta {
    font-size: 13px; color: var(--ink-mute);
    margin-top: 2px;
}

.ai-advice {
    background: linear-gradient(135deg, var(--mint-soft), var(--paper-2));
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-style: italic;
    line-height: 1.5;
    border-left: 4px solid var(--mint);
}

.ai-violations {
    background: var(--danger-soft);
    border: 1.5px solid var(--danger);
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    color: var(--danger);
    font-size: 14px;
}
.ai-violations strong { display: block; margin-bottom: 4px; }

/* Liste sessions du plan */
.ai-sessions {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 18px;
}
.ai-session {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: var(--paper);
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    transition: transform .12s;
}
.ai-session:hover { transform: translateX(2px); }
.ai-session .day-pill {
    background: var(--primary);
    color: #fff;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.ai-session .time {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-soft);
    min-width: 110px;
}
.ai-session .what { flex: 1; min-width: 0; }
.ai-session .what .title { font-weight: 700; }
.ai-session .what .rationale { font-size: 12px; color: var(--ink-mute); margin-top: 2px; font-style: italic; }

.ai-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* Badge "généré par IA" sur les devoirs */
.ai-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, #7C5CFF20, #FF6B9D20);
    color: var(--primary-dark);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Loading IA */
.ai-loading {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: var(--radius);
    border: 2px dashed var(--primary);
}
.ai-loading-icon {
    font-size: 48px;
    animation: thinking 1.6s ease-in-out infinite;
    margin-bottom: 14px;
}
@keyframes thinking {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.15) rotate(-8deg); }
    50%  { transform: scale(1) rotate(8deg); }
    75%  { transform: scale(1.15) rotate(-4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.ai-loading-text {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--ink);
}
.ai-loading-sub {
    font-size: 13px; color: var(--ink-mute);
    margin-top: 6px;
}

/* Indicateur d'heure de coucher */
.bedtime-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #2A2438, #5A5170);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.bedtime-indicator .moon { font-size: 14px; }

/* Hobby card (loisir) */
.hobby-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--paper);
    border-radius: 14px;
    border-left: 4px solid var(--mint);
    transition: transform .12s;
}
.hobby-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.hobby-card .emoji {
    font-size: 28px;
    width: 44px; height: 44px;
    background: #fff;
    border-radius: 12px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.hobby-card .info { flex: 1; min-width: 0; }
.hobby-card .info .name { font-weight: 700; }
.hobby-card .info .meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* Quota IA */
.quota-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--paper-2);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-soft);
}
.quota-bar .dots {
    display: flex; gap: 4px;
}
.quota-bar .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
}
.quota-bar .dot.used {
    background: var(--primary);
}

/* =========================================================================
   PROVIDERS IA — table + form admin
   ========================================================================= */
.provider-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    transition: border-color .15s, transform .15s;
}
.provider-card:hover { transform: translateY(-1px); border-color: var(--ink-soft); }
.provider-card.is-default {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 60%);
}
.provider-card.disabled { opacity: 0.55; }
.provider-icon {
    width: 48px; height: 48px;
    background: var(--paper-2);
    border-radius: 12px;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-size: 22px;
}
.provider-info { flex: 1; min-width: 0; }
.provider-info .name { font-weight: 700; font-size: 15px; }
.provider-info .meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.provider-actions { display: flex; gap: 6px; }
.provider-default-badge {
    background: var(--primary); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: .04em;
}

/* Test result */
.provider-test-result {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.provider-test-result.ok    { background: var(--mint-soft); color: #2c8061; border-left: 3px solid var(--mint); }
.provider-test-result.error { background: var(--danger-soft); color: var(--danger); border-left: 3px solid var(--danger); }

/* =========================================================================
   VUES PLANNING — Jour / Semaine / Mois (toggle)
   ========================================================================= */
.view-switch {
    display: inline-flex;
    background: var(--paper-2);
    padding: 4px;
    border-radius: 12px;
    gap: 2px;
}
.view-switch button {
    padding: 7px 14px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-soft);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all .15s;
}
.view-switch button:hover { color: var(--ink); }
.view-switch button.active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 2px 6px rgba(42,36,56,.08);
}

/* Vue JOUR : timeline verticale détaillée */
.day-view {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    background: #fff;
    border-radius: var(--radius);
    border: 1.5px solid var(--line);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.day-view .hour-row {
    display: contents;
}
.day-view .hour-label {
    text-align: right;
    color: var(--ink-mute);
    font-size: 12px;
    font-family: var(--font-display);
    padding: 8px 0;
    border-top: 1px dashed var(--line);
}
.day-view .hour-content {
    border-top: 1px dashed var(--line);
    min-height: 56px;
    padding: 4px 0;
    position: relative;
}
.day-event {
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: transform .12s;
}
.day-event:hover { transform: translateX(2px); }
.day-event.is-hobby   { background: var(--mint-soft); border-left-color: var(--mint); }
.day-event.is-homework { background: var(--coral-soft); border-left-color: var(--coral); }
.day-event .title { font-weight: 700; font-size: 14px; }
.day-event .meta  { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* Vue MOIS : calendrier 7 colonnes */
.month-view {
    background: #fff;
    border-radius: var(--radius);
    border: 1.5px solid var(--line);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.month-grid .month-day-header {
    padding: 10px 8px;
    background: var(--paper-2);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink-soft);
    letter-spacing: .04em;
}
.month-grid .month-day-header:last-child { border-right: none; }
.month-grid .month-cell {
    min-height: 92px;
    padding: 6px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    transition: background .12s;
    display: flex; flex-direction: column; gap: 3px;
}
.month-grid .month-cell:hover { background: var(--paper); }
.month-grid .month-cell.other-month { background: var(--paper-2); opacity: 0.5; }
.month-grid .month-cell.today { background: var(--accent-soft); }
.month-grid .month-cell .num {
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}
.month-grid .month-cell.today .num { color: #b06a1a; }
.month-grid .month-cell .pill {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.month-grid .month-cell .pill.cours { background: var(--primary); }
.month-grid .month-cell .pill.devoir { background: var(--coral); }
.month-grid .month-cell .pill.loisir { background: var(--mint); }
.month-grid .month-cell .more {
    font-size: 10px;
    color: var(--ink-mute);
    text-align: center;
}

/* =========================================================================
   CORRECTION IA — affichage de la correction
   ========================================================================= */
.correction-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 16px;
    border: 2px dashed var(--mint);
    box-shadow: var(--shadow-paper);
}
.correction-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line);
}
.correction-header .ai-icon {
    font-size: 32px;
    animation: sparkle 3s ease-in-out infinite;
}
.correction-header .info { flex: 1; }
.correction-header .info .title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.correction-header .info .meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.correction-header .score {
    background: var(--accent);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}

.correction-section {
    margin-bottom: 16px;
}
.correction-section .label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-mute);
    margin-bottom: 6px;
}
.correction-feedback {
    background: var(--paper-2);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}

.correction-strengths {
    background: var(--mint-soft);
    border-left: 4px solid var(--mint);
    padding: 12px 14px;
    border-radius: 10px;
}
.correction-strengths .item {
    display: flex; gap: 8px;
    align-items: flex-start;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
}
.correction-strengths .item:last-child { margin-bottom: 0; }
.correction-strengths .item::before {
    content: '✓';
    color: var(--mint);
    font-weight: 700;
    flex-shrink: 0;
}

.correction-issues {
    display: flex; flex-direction: column; gap: 10px;
}
.correction-issue {
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    padding: 12px 14px;
    border-radius: 10px;
}
.correction-issue .where {
    font-weight: 700;
    font-size: 13px;
    color: #b06a1a;
    margin-bottom: 4px;
}
.correction-issue .what {
    font-size: 13px;
    margin-bottom: 4px;
}
.correction-issue .why {
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 4px;
    font-style: italic;
}
.correction-issue .suggestion {
    font-size: 12px;
    background: rgba(255,255,255,.6);
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 6px;
}
.correction-issue .suggestion::before { content: '💡 '; }

.correction-child-summary {
    background: linear-gradient(135deg, var(--coral-soft), var(--accent-soft));
    border: 2px dashed var(--coral);
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 14px;
}

.correction-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}
.correction-shared-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mint);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Mobile : vues réduites */
@media (max-width: 540px) {
    .month-grid .month-cell { min-height: 60px; padding: 3px; }
    .month-grid .month-cell .pill { font-size: 9px; padding: 1px 4px; }
    .day-view { grid-template-columns: 60px 1fr; }
}

/* =========================================================================
   KANBAN — colonnes drag-and-drop
   ========================================================================= */
.kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
@media (max-width: 900px) {
    .kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .kanban { grid-template-columns: 1fr; }
}

.kanban-col {
    background: var(--paper-2);
    border-radius: var(--radius);
    padding: 12px;
    min-height: 200px;
    display: flex; flex-direction: column;
    transition: background .15s, outline .15s;
    outline: 2px dashed transparent;
}
.kanban-col.drop-target {
    background: var(--primary-soft);
    outline-color: var(--primary);
}
.kanban-col-header {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px 12px 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    border-bottom: 2px solid var(--line);
    margin-bottom: 10px;
}
.kanban-col-header .count {
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    margin-left: auto;
}
.kanban-col[data-status="termine"] .kanban-col-header { color: var(--mint); }
.kanban-col[data-status="termine"] .kanban-col-header .count { background: var(--mint); }
.kanban-col[data-status="en_cours"] .kanban-col-header { color: var(--primary); }
.kanban-col[data-status="en_cours"] .kanban-col-header .count { background: var(--primary); }
.kanban-col[data-status="a_verifier"] .kanban-col-header { color: var(--accent); }
.kanban-col[data-status="a_verifier"] .kanban-col-header .count { background: var(--accent); color: var(--ink); }

.kanban-cards { display: flex; flex-direction: column; gap: 8px; }

.kanban-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 4px solid var(--primary);
    cursor: grab;
    transition: transform .12s, box-shadow .12s;
    user-select: none;
    touch-action: none;
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.5; transform: rotate(2deg) scale(0.98); }
.kanban-card .title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 6px;
}
.kanban-card .meta {
    font-size: 11px;
    color: var(--ink-mute);
    display: flex; gap: 8px; flex-wrap: wrap;
}
.kanban-card .meta .tag-small {
    background: var(--paper-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.kanban-card .actions {
    display: flex; gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    justify-content: flex-end;
}
.kanban-card .actions button {
    background: var(--paper-2);
    border: none;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: background .12s;
}
.kanban-card .actions button:hover { background: var(--primary-soft); }

.kanban-card.priority-3 { border-left-color: var(--coral); }
.kanban-card.priority-1 { border-left-color: var(--ink-mute); }
.kanban-card.is-task { border-left-color: var(--mint); }

.kanban-empty {
    color: var(--ink-mute);
    font-size: 12px;
    text-align: center;
    padding: 12px 8px;
    font-style: italic;
}

/* =========================================================================
   FAMILY TASKS — cartes liste
   ========================================================================= */
.task-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    transition: transform .12s, box-shadow .12s;
}
.task-card:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.task-card.is-done { opacity: 0.6; }
.task-card.is-done .title { text-decoration: line-through; }
.task-card .icon-emoji {
    font-size: 26px;
    width: 44px; height: 44px;
    background: var(--paper-2);
    border-radius: 10px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.task-card .info { flex: 1; min-width: 0; }
.task-card .info .title { font-weight: 700; font-size: 14px; }
.task-card .info .meta { font-size: 11px; color: var(--ink-mute); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.task-card .status-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--paper-2);
    color: var(--ink-soft);
}
.task-card .status-pill.a_faire    { background: #f3f1ed; color: var(--ink-soft); }
.task-card .status-pill.en_cours   { background: var(--primary-soft); color: var(--primary-dark); }
.task-card .status-pill.a_verifier { background: var(--accent-soft); color: #b06a1a; }
.task-card .status-pill.termine    { background: var(--mint-soft); color: #2c8061; }

/* =========================================================================
   AVATAR — upload de photo
   ========================================================================= */
.avatar-uploader {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.avatar-uploader .overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .15s;
    text-align: center;
    padding: 6px;
}
.avatar-uploader:hover .overlay { opacity: 1; }
.avatar-uploader input[type="file"] { display: none; }

/* L'avatar avec photo réelle au lieu de l'emoji */
.avatar.has-photo {
    background-image: var(--avatar-photo, none) !important;
    background-size: cover;
    background-position: center;
    color: transparent !important;
}

/* =========================================================================
   ONBOARDING / TOOLTIP — aide pour les enfants
   ========================================================================= */
.helpbox {
    background: linear-gradient(135deg, var(--accent-soft), var(--paper-2));
    border-left: 4px solid var(--accent);
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 18px;
    display: flex; align-items: flex-start; gap: 12px;
}
.helpbox .icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.helpbox .content { flex: 1; line-height: 1.5; font-size: 14px; }
.helpbox .content strong { font-family: var(--font-display); font-size: 16px; display: block; margin-bottom: 4px; }
.helpbox .close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink-mute);
    font-size: 18px;
    padding: 0 4px;
}
.helpbox .close-btn:hover { color: var(--ink); }

/* Petit tooltip ✨ pour les boutons importants */
[data-help] {
    position: relative;
}
[data-help]:hover::after {
    content: attr(data-help);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    animation: tooltipIn 0.18s;
}
@keyframes tooltipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =========================================================================
   PLANNING — Distinction visuelle nette entre 4 catégories d'événements
   - 📚 Scolaire (cours)        : violet (primary)  — cadre plein
   - ✏️ Travail (devoirs)        : corail            — cadre hachuré
   - ⚽ Loisirs                  : vert mint        — cadre arrondi
   - 🏠 Tâches familiales        : ambre (accent)   — cadre pointillé
   - 🚌 Transport                : gris/translucide — petit, en marge
   ========================================================================= */

/* Légende du planning */
.planning-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 10px 14px;
    background: var(--paper);
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--ink-soft);
}
.planning-legend .item {
    display: inline-flex; align-items: center; gap: 6px;
}
.planning-legend .swatch {
    width: 14px; height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}
.planning-legend .swatch.scolaire {
    background: var(--primary);
}
.planning-legend .swatch.travail {
    background: var(--coral);
    background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.4) 0 2px, transparent 2px 5px);
}
.planning-legend .swatch.loisir { background: var(--mint); }
.planning-legend .swatch.tache {
    background: transparent;
    border: 2px dotted var(--accent);
}
.planning-legend .swatch.transport {
    background: linear-gradient(90deg, transparent, #94a3b8, transparent);
}

/* Vue Jour — événements stylés selon le type */
.day-event {
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
    position: relative;
    border-left: 4px solid var(--primary);
}
.day-event:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }

/* 📚 Scolaire — violet plein, fond légèrement teinté */
.day-event.is-scolaire {
    background: linear-gradient(90deg, var(--primary-soft) 0%, #fff 70%);
    border-left: 4px solid var(--primary);
}
.day-event.is-scolaire .pin { background: var(--primary); }

/* ✏️ Travail (devoirs) — corail avec hachures pour signaler "à faire" */
.day-event.is-travail {
    background: var(--coral-soft);
    border-left: 4px solid var(--coral);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 8px, rgba(255,107,157,.05) 8px 12px);
}
.day-event.is-travail .pin { background: var(--coral); }

/* ⚽ Loisirs — vert mint, plus arrondi (côté ludique) */
.day-event.is-loisir {
    background: var(--mint-soft);
    border-left: 4px solid var(--mint);
    border-radius: 16px;
}
.day-event.is-loisir .pin { background: var(--mint); }

/* 🏠 Tâche familiale — ambre, pointillé (style "checklist") */
.day-event.is-tache {
    background: var(--accent-soft);
    border: 1.5px dotted var(--accent);
    border-left: 4px solid var(--accent);
}
.day-event.is-tache .pin { background: var(--accent); }

/* 🚌 Transport — petit, fin, peu intrusif (c'est juste un marqueur de temps) */
.day-event.is-transport {
    background: linear-gradient(90deg, #f8fafc, transparent);
    border-left: 3px dashed #cbd5e1;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--ink-mute);
    margin-bottom: 2px;
}
.day-event.is-transport .title {
    font-weight: 500;
    font-size: 12px;
}
.day-event.is-transport .meta { display: none; }

.day-event .title { font-weight: 700; font-size: 14px; }
.day-event .meta {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
    display: flex; gap: 8px;
}
.day-event .pin {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
}

/* Vue Semaine — pills par jour stylées par type */
.today-list .today-line.evt-scolaire {
    border-left: 3px solid var(--primary);
    background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 60%);
}
.today-list .today-line.evt-travail {
    border-left: 3px solid var(--coral);
    background: var(--coral-soft);
}
.today-list .today-line.evt-loisir {
    border-left: 3px solid var(--mint);
    background: var(--mint-soft);
    border-radius: 10px;
}
.today-list .today-line.evt-tache {
    border-left: 3px dotted var(--accent);
    background: var(--accent-soft);
}
.today-list .today-line.evt-transport {
    border-left: 2px dashed #cbd5e1;
    background: #f8fafc;
    font-size: 12px;
    color: var(--ink-mute);
    padding: 4px 10px;
}
.today-list .today-line.evt-transport .title { font-size: 12px; font-weight: 500; }

/* Vue Mois — pills compactes différenciées */
.month-grid .month-cell .pill.scolaire { background: var(--primary); }
.month-grid .month-cell .pill.travail {
    background: var(--coral);
    background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.3) 0 1px, transparent 1px 3px);
}
.month-grid .month-cell .pill.loisir { background: var(--mint); }
.month-grid .month-cell .pill.tache {
    background: transparent;
    color: #b06a1a;
    border: 1.5px dotted var(--accent);
}

/* Toggle des couches affichées dans le planning */
.layer-toggles {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 8px 12px;
    background: var(--paper);
    border-radius: 12px;
    margin-bottom: 12px;
    align-items: center;
}
.layer-toggles .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-mute);
    font-weight: 700;
    margin-right: 4px;
}
.layer-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s;
    user-select: none;
}
.layer-toggle:hover { border-color: var(--ink-soft); }
.layer-toggle.active.scolaire {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.layer-toggle.active.travail {
    background: var(--coral);
    color: #fff;
    border-color: var(--coral);
}
.layer-toggle.active.loisir {
    background: var(--mint);
    color: #fff;
    border-color: var(--mint);
}
.layer-toggle.active.tache {
    background: var(--accent);
    color: var(--ink);
    border-color: var(--accent);
}
.layer-toggle.active.transport {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.layer-toggle.inactive { opacity: 0.45; }

/* =========================================================================
   QUIZZES — cartes et joueur
   ========================================================================= */
.quiz-card {
    background: #fff;
    border-radius: 14px;
    border-left: 4px solid var(--primary);
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.quiz-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quiz-card .title { font-weight: 700; font-size: 15px; }
.quiz-card .meta {
    font-size: 12px; color: var(--ink-mute); margin-top: 4px;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.quiz-card .meta .badge-pct {
    background: var(--mint-soft);
    color: #2c8061;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}
.quiz-question {
    background: var(--paper);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    border-left: 4px solid var(--primary);
}
.quiz-question .num {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-mute);
}
.quiz-question .label {
    font-weight: 700; font-size: 15px;
    margin: 6px 0 12px;
    line-height: 1.4;
}
.quiz-question .choices { display: flex; flex-direction: column; gap: 6px; }
.quiz-question .choice {
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid var(--line);
    cursor: pointer;
    transition: all .12s;
    user-select: none;
}
.quiz-question .choice:hover { border-color: var(--primary); }
.quiz-question .choice.selected {
    background: var(--primary-soft);
    border-color: var(--primary);
    font-weight: 600;
}
.quiz-question .choice.correct {
    background: var(--mint-soft);
    border-color: var(--mint);
}
.quiz-question .choice.wrong {
    background: var(--danger-soft);
    border-color: var(--danger);
}
.quiz-question .explanation {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    font-style: italic;
}
.quiz-question .explanation::before { content: '💡 '; }

.quiz-result {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--mint-soft), var(--accent-soft));
    border-radius: 18px;
}
.quiz-result .score-big {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 800;
    color: var(--mint);
}
.quiz-result .score-pct {
    font-size: 22px;
    color: var(--ink-soft);
}

/* Calendrier admin — vacances et jours fériés */
.calendar-event {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid var(--primary);
    margin-bottom: 8px;
}
.calendar-event.kind-vacances { border-left-color: var(--coral); }
.calendar-event.kind-ferie    { border-left-color: var(--accent); }
.calendar-event.kind-pont     { border-left-color: var(--mint); }
.calendar-event .dates {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    min-width: 200px;
    color: var(--ink-soft);
}
.calendar-event .label-text { flex: 1; font-weight: 700; }
.calendar-event .badge-zone {
    background: var(--paper-2);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

/* =========================================================================
   PLANNING — RENFORCEMENT VISUEL : SCOLAIRE vs TRAVAIL DE RÉVISION
   ========================================================================= */

/* Bandeau de séparation visuelle entre les 2 univers */
.planning-section-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    margin: 18px 0 10px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
}
.planning-section-header.scolaire {
    background: var(--primary-soft);
    color: var(--primary);
    border-left: 5px solid var(--primary);
}
.planning-section-header.travail {
    background: var(--coral-soft);
    color: var(--coral);
    border-left: 5px solid var(--coral);
}
.planning-section-header .icon-big { font-size: 22px; }
.planning-section-header .info {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-mute);
    font-weight: 500;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
}

/* SCOLAIRE — fond uni, lettres claires, "épinglé" */
.day-event.is-scolaire {
    background: linear-gradient(135deg, var(--primary), #6648dd);
    color: #fff;
    border-left: none;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 2px 6px rgba(124, 92, 255, 0.25);
    position: relative;
}
.day-event.is-scolaire::before {
    content: '🔒';
    position: absolute; top: 6px; right: 8px;
    font-size: 11px;
    opacity: 0.7;
}
.day-event.is-scolaire .title { color: #fff; font-weight: 700; }
.day-event.is-scolaire .meta { color: rgba(255,255,255,0.85); }
.day-event.is-scolaire .pin { display: none; }

/* TRAVAIL/RÉVISION — visuellement très différent : carnet avec hachures */
.day-event.is-travail {
    background: #fff;
    border: 2px dashed var(--coral);
    border-radius: 14px;
    padding: 10px 14px;
    color: var(--ink);
    position: relative;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 14px,
        rgba(255, 107, 107, 0.05) 14px 16px
    );
}
.day-event.is-travail::before {
    content: '✏️';
    position: absolute; top: 6px; right: 8px;
    font-size: 13px;
}
.day-event.is-travail .title { color: var(--coral); font-weight: 700; }

/* Spécifique : RÉVISION GÉNÉRÉE PAR L'IA — encore plus distinctif */
.day-event.is-travail.is-ai-generated {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 2px solid var(--accent);
    background-image:
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 179, 71, 0.12) 12px 14px);
}
.day-event.is-travail.is-ai-generated::before { content: '🪄'; }
.day-event.is-travail.is-ai-generated .title { color: #b06a1a; }

/* Pills mois — distinction renforcée */
.month-grid .pill.scolaire {
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(124, 92, 255, 0.2);
}
.month-grid .pill.travail {
    background: #fff;
    color: var(--coral);
    border: 1.5px dashed var(--coral);
    border-radius: 14px;
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 107, 107, 0.08) 6px 8px);
}

/* Cards Kanban — révisions IA distinctives */
.kanban-card.is-revision {
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    border-left-color: var(--accent);
    border-left-width: 5px;
    position: relative;
}
.kanban-card.is-revision::after {
    content: '🪄';
    position: absolute; top: 8px; right: 10px;
    font-size: 14px;
    opacity: 0.8;
}
.kanban-card.is-ds {
    background: linear-gradient(135deg, #fee2e2, #ffffff);
    border-left-color: var(--danger);
    border-left-width: 5px;
    position: relative;
}
.kanban-card.is-ds::after {
    content: '🔥';
    position: absolute; top: 8px; right: 10px;
    font-size: 14px;
}
.kanban-card.is-lecon {
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    border-left-color: var(--mint);
    border-left-width: 5px;
}
.kanban-card.is-lecon::before {
    content: '📖 ';
}

/* Today line — distinction "scolaire = imposé" vs "travail = à faire" */
.today-list .today-line.evt-scolaire {
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 0 10px 10px 0;
}
.today-list .today-line.evt-scolaire .title {
    color: var(--primary);
    font-weight: 700;
}
.today-list .today-line.evt-scolaire::after {
    content: '🔒 imposé';
    margin-left: auto;
    font-size: 10px;
    color: var(--primary);
    background: rgba(124, 92, 255, 0.15);
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.today-list .today-line.evt-travail {
    background: #fff;
    border: 2px dashed var(--coral);
    background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 107, 107, 0.05) 12px 14px);
}
.today-list .today-line.evt-travail .title { color: var(--coral); font-weight: 700; }
.today-list .today-line.evt-travail::after {
    content: '✏️ à faire';
    margin-left: auto;
    font-size: 10px;
    color: var(--coral);
    background: var(--coral-soft);
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}

/* Bandeau "violations IA" — afficher si l'IA a proposé des sessions invalides */
.ai-violations {
    padding: 12px 16px;
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}
.ai-violations .title-row {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
    margin-bottom: 6px;
}
.ai-violations ul { margin: 4px 0 0 24px; padding: 0; }
.ai-violations li { margin-bottom: 4px; }

/* =========================================================================
   SESSIONS DE RÉVISION IA — distinction visuelle marquée vs cours scolaires
   ========================================================================= */

/* Sur les vues de planning, les sessions de révision IA sont des "post-it" colorés */
.day-event.is-travail.is-ai-generated {
    background: repeating-linear-gradient(
        45deg,
        #fff7ed 0 8px,
        #fef3c7 8px 16px
    );
    border: 2px solid var(--accent);
    border-left-width: 5px;
    border-radius: 4px 14px 4px 14px; /* coins asymétriques = "post-it" */
    box-shadow: 2px 2px 0 rgba(255,179,71,0.25);
    transform: rotate(-0.3deg);
    transition: transform 0.15s;
}
.day-event.is-travail.is-ai-generated:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 4px 4px 0 rgba(255,179,71,0.35);
}
.day-event.is-travail.is-ai-generated::before {
    content: '🪄 RÉVISION';
    position: absolute;
    top: -8px;
    left: 10px;
    background: var(--accent);
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}
.day-event.is-travail.is-ai-generated .title {
    color: #92400e;
    margin-top: 4px;
}

/* Cours scolaires — encore plus "officiels", monolithes */
.day-event.is-scolaire {
    border-radius: 10px !important;
    border-left: 6px solid #5b3fc4 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Bandeau introductif au-dessus du planning quand des sessions IA existent */
.ai-revision-banner {
    margin: 14px 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 2px dashed var(--accent);
    border-radius: 14px;
    display: flex; align-items: center; gap: 12px;
    font-size: 13px;
}
.ai-revision-banner { flex-wrap: wrap; }
.ai-revision-banner .icon { font-size: 24px; flex-shrink: 0; }
.ai-revision-banner .content { flex: 1; min-width: 220px; line-height: 1.45; }
.ai-revision-banner strong { color: #92400e; }
.ai-revision-banner .btn { flex-shrink: 0; }

/* Légende renforcée — clarifier les 2 univers */
.planning-legend .item.scolaire-legend strong { color: var(--primary); }
.planning-legend .item.travail-legend strong  { color: var(--coral); }
.planning-legend .item.ai-legend       strong { color: #92400e; }

/* =========================================================================
   PWA — bandeau d'installation
   ========================================================================= */
.pwa-install-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(124, 92, 255, 0.4);
    display: flex; align-items: center; gap: 12px;
    z-index: 100;
    animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.pwa-install-banner .icon-big { font-size: 32px; flex-shrink: 0; }
.pwa-install-banner .content { flex: 1; line-height: 1.4; font-size: 13px; }
.pwa-install-banner .content strong { display: block; font-size: 14px; }
.pwa-install-banner button {
    background: #fff;
    color: var(--primary);
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}
.pwa-install-banner .close-btn {
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
}

/* Indicateur "hors-ligne" en haut */
.offline-badge {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    z-index: 90;
    box-shadow: var(--shadow-md);
}

/* =========================================================================
   STATS — page progrès
   ========================================================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    border-left: 4px solid var(--primary);
}
.stat-card .label {
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 4px;
}
.stat-card .value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}
.stat-card .sub {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 4px;
}
.stat-card.streak { border-left-color: var(--coral); }
.stat-card.streak .value { color: var(--coral); }
.stat-card.minutes { border-left-color: var(--mint); }
.stat-card.minutes .value { color: var(--mint); }
.stat-card.completed { border-left-color: var(--accent); }
.stat-card.completed .value { color: #b06a1a; }

/* Heatmap */
.heatmap {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 3px;
    margin-bottom: 16px;
    background: var(--paper);
    padding: 12px;
    border-radius: 12px;
}
.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--paper-2);
    transition: transform 0.1s;
    cursor: help;
    min-height: 14px;
}
.heatmap-cell:hover { transform: scale(1.4); z-index: 1; position: relative; }
.heatmap-cell.lvl-0 { background: var(--paper-2); }
.heatmap-cell.lvl-1 { background: #d8f5e8; }
.heatmap-cell.lvl-2 { background: #87e5b8; }
.heatmap-cell.lvl-3 { background: #5DD4A8; }
.heatmap-cell.lvl-4 { background: #2c8061; }

/* Barres de matières */
.subject-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 6px;
}
.subject-bar .name { font-weight: 700; min-width: 100px; }
.subject-bar .bar-track {
    flex: 1;
    background: var(--paper-2);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}
.subject-bar .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 999px;
    transition: width 0.4s;
}
.subject-bar.mastery-high .bar-fill { background: linear-gradient(90deg, var(--mint), #2c8061); }
.subject-bar.mastery-low .bar-fill { background: linear-gradient(90deg, var(--coral), #c92a4f); }
.subject-bar .badge { font-size: 12px; font-weight: 700; min-width: 60px; text-align: right; }

/* Progression : une courbe par matière, plus l'écart début/fin de période.
   Même gabarit que .subject-bar pour que les deux listes se lisent ensemble. */
.progression-list { display: flex; flex-direction: column; }
.progression-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 14px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 6px;
}
.progression-row .name { font-weight: 700; min-width: 100px; flex: 1; }
.progression-row .spark-wrap { display: flex; align-items: center; }
.progression-row .sparkline { display: block; }
.progression-row .trend {
    font-size: 12px; font-weight: 700;
    min-width: 78px; text-align: right;
    white-space: nowrap;
}
.progression-row .trend-up   { color: #2c8061; }
.progression-row .trend-down { color: #c92a4f; }
.progression-row .trend-flat { color: var(--ink-mute); }
/* Pas assez de tentatives pour une tendance : on montre le dernier score,
   en retrait, pour ne pas le faire passer pour une évolution. */
.progression-row .trend-none { color: var(--ink-mute); font-weight: 600; }

@media (max-width: 560px) {
    .progression-row { flex-wrap: wrap; }
    .progression-row .name { min-width: 0; }
}

/* Le point hebdomadaire du parent */
.digest-card { margin-bottom: 14px; border-left: 5px solid var(--primary); }
.digest-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.digest-block { flex: 1; min-width: 220px; }
.digest-title {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-mute); margin-bottom: 6px;
}
.digest-list { margin: 0; padding-left: 0; list-style: none; }
.digest-list li { font-size: 14px; line-height: 1.6; }
.digest-suggestion {
    margin-top: 12px; padding: 10px 12px;
    background: var(--accent-soft);
    border-radius: 10px;
}
.digest-suggestion-title { font-weight: 800; margin-bottom: 2px; }

/* Alertes parent */
.alert-card {
    padding: 12px 14px;
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 10px;
}
.alert-card .icon { font-size: 20px; flex-shrink: 0; }
.alert-card .text { flex: 1; font-size: 13px; line-height: 1.4; }
.alert-card.severity-warning { border-left-color: var(--coral); background: var(--coral-soft); }

/* =========================================================================
   POMODORO — Mode Maintenant
   ========================================================================= */
.now-launcher {
    background: linear-gradient(135deg, #5DD4A8, #2c8061);
    color: #fff;
    padding: 22px 24px;
    border-radius: 18px;
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    display: flex; align-items: center; gap: 16px;
    font-family: var(--font-body);
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 6px 16px rgba(93, 212, 168, 0.3);
    margin-bottom: 16px;
}
.now-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(93, 212, 168, 0.4); }
.now-launcher .play-icon {
    font-size: 36px;
    background: rgba(255,255,255,0.2);
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.now-launcher .body { flex: 1; }
.now-launcher .title { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.now-launcher .sub { font-size: 13px; opacity: 0.9; margin-top: 4px; }

.pomodoro {
    text-align: center;
    padding: 32px 20px;
}
.pomodoro .timer {
    font-family: var(--font-display);
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    margin: 20px 0;
    letter-spacing: -0.02em;
}
.pomodoro .timer.break { color: var(--mint); }
.pomodoro .phase {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    font-weight: 700;
}
.pomodoro .progress-ring {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    position: relative;
}
.pomodoro .progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pomodoro .progress-ring circle { fill: none; stroke-width: 8; }
.pomodoro .progress-ring .bg { stroke: var(--paper-2); }
.pomodoro .progress-ring .fg { stroke: var(--primary); transition: stroke-dashoffset 1s linear; stroke-linecap: round; }
.pomodoro .progress-ring.break .fg { stroke: var(--mint); }
.pomodoro .progress-ring .center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.pomodoro .controls {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 24px;
}
.pomodoro .session-info {
    background: var(--paper);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 18px auto;
    max-width: 360px;
    text-align: left;
}
.pomodoro .session-info .label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.pomodoro .session-info .value { font-weight: 700; font-size: 16px; margin-top: 2px; }

/* =========================================================================
   CAPTURE AGENDA — modal
   ========================================================================= */
.capture-modal-tabs {
    display: flex; gap: 4px;
    background: var(--paper-2);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.capture-modal-tabs button {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.capture-modal-tabs button.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.capture-result-item {
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    border-left: 3px solid var(--primary);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 10px;
}
.capture-result-item input[type="checkbox"] { transform: scale(1.3); flex-shrink: 0; }
.capture-result-item .info { flex: 1; }
.capture-result-item .title { font-weight: 700; font-size: 14px; }
.capture-result-item .meta {
    font-size: 11px; color: var(--ink-mute);
    margin-top: 2px;
    display: flex; gap: 8px; flex-wrap: wrap;
}

/* =========================================================================
   NOTIFICATIONS — settings
   ========================================================================= */
.notif-toggle {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: var(--paper);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
}
.notif-toggle input { transform: scale(1.3); flex-shrink: 0; }
.notif-toggle .info { flex: 1; }
.notif-toggle .title { font-weight: 700; font-size: 14px; }
.notif-toggle .desc { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* =========================================================================
   AI plan : sélection granulaire de sessions
   ========================================================================= */
.ai-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--paper);
    border-radius: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ai-toolbar-hint {
    font-size: 12px;
    color: var(--ink-mute);
    line-height: 1.4;
    flex: 1;
    min-width: 200px;
}
.ai-toolbar-actions {
    display: flex;
    gap: 6px;
}
.btn-xs {
    padding: 4px 10px !important;
    font-size: 11px !important;
}

.ai-day-header {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 14px;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--paper-2);
}

.ai-session {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--paper-2);
    border-radius: 10px;
    margin-bottom: 6px;
    transition: opacity 0.2s, background 0.2s;
}
.ai-session:hover { background: var(--paper); }
.ai-session.excluded { background: var(--paper-2); }
.ai-session input[type="checkbox"] {
    transform: scale(1.2);
    flex-shrink: 0;
    cursor: pointer;
}
.ai-session .time {
    font-weight: 700;
    font-size: 12px;
    min-width: 90px;
    flex-shrink: 0;
    color: var(--ink);
}
.ai-session .what { flex: 1; min-width: 0; }
.ai-session .what .title { font-weight: 600; font-size: 13px; line-height: 1.3; }
.ai-session .what .rationale {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 2px;
    line-height: 1.3;
}
.ai-session-remove,
.ai-session-undo {
    background: transparent;
    border: 1px solid var(--paper-2);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s;
}
.ai-session-remove:hover {
    background: var(--coral-soft);
    border-color: var(--coral);
}
.ai-session-undo:hover {
    background: var(--mint-soft);
    border-color: var(--mint);
}

/* =========================================================================
   PANNEAU D'AIDE — drawer latéral
   ========================================================================= */
.help-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(900px, 100vw);
    background: #fff;
    box-shadow: -8px 0 32px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.help-drawer.open {
    transform: translateX(0);
}

.help-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--paper-2);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    flex-shrink: 0;
}
.help-drawer-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
}
.help-drawer-header .help-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.help-drawer-header .help-close:hover {
    background: rgba(255,255,255,0.3);
}

.help-drawer-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--paper-2);
    background: var(--paper);
    flex-shrink: 0;
}
.help-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--paper-2);
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}
.help-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.help-drawer-body {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    overflow: hidden;
    min-height: 0;
}
@media (max-width: 700px) {
    .help-drawer-body { grid-template-columns: 1fr; }
    .help-nav { display: none; }
    .help-drawer-body.show-nav .help-nav { display: block; }
    .help-drawer-body.show-nav .help-content { display: none; }
}

.help-nav {
    background: var(--paper);
    border-right: 1px solid var(--paper-2);
    overflow-y: auto;
    padding: 12px 0;
}
.help-nav-section {
    margin-bottom: 18px;
}
.help-nav-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ink-mute);
    padding: 4px 16px 6px;
}
.help-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.help-nav li a {
    display: block;
    padding: 8px 16px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.help-nav li a:hover {
    background: #fff;
    border-left-color: var(--primary-soft);
}
.help-nav li a.active {
    background: #fff;
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}

.help-content {
    overflow-y: auto;
    padding: 24px 32px;
    line-height: 1.65;
    color: var(--ink);
}
.help-content h1 {
    font-family: var(--font-display);
    color: var(--primary);
    margin-top: 0;
    border-bottom: 2px solid var(--paper-2);
    padding-bottom: 8px;
}
.help-content h2 {
    font-family: var(--font-display);
    color: var(--ink);
    margin-top: 28px;
}
.help-content h3 {
    color: var(--primary-dark);
    margin-top: 22px;
}
.help-content p { margin: 10px 0; }
.help-content ul, .help-content ol {
    padding-left: 24px;
    margin: 10px 0;
}
.help-content li {
    margin-bottom: 4px;
}
.help-content a {
    color: var(--primary);
    text-decoration: underline;
}
.help-content code {
    background: var(--paper);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: monospace;
}
.help-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 8px 14px;
    margin: 12px 0;
    background: var(--accent-soft);
    border-radius: 4px;
    font-size: 14px;
}
.help-content table.md-table {
    border-collapse: collapse;
    width: 100%;
    margin: 14px 0;
    font-size: 13px;
}
.help-content table.md-table th,
.help-content table.md-table td {
    border: 1px solid var(--paper-2);
    padding: 8px 10px;
    text-align: left;
}
.help-content table.md-table th {
    background: var(--paper);
    font-weight: 700;
}
.help-content hr {
    border: none;
    border-top: 1px solid var(--paper-2);
    margin: 24px 0;
}

/* Bouton d'aide dans la barre du haut */
.btn-help {
    background: transparent;
    border: 1px solid var(--paper-2);
    width: 36px; height: 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    display: grid;
    place-items: center;
    transition: background 0.15s, transform 0.1s;
}
.btn-help:hover {
    background: var(--paper);
    transform: scale(1.05);
}

/* =========================================================================
   DOCUMENTS — vue par matière + filtres
   ========================================================================= */
.docs-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 8px;
    background: var(--paper);
    border-radius: 12px;
}
.docs-filter-chip {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
}
.docs-filter-chip:hover {
    background: #fff;
}
.docs-filter-chip.active {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(124, 92, 255, 0.15);
}

.docs-subject-group {
    margin-bottom: 28px;
}
.docs-subject-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px dashed var(--paper-2);
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.docs-subject-count {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.docs-notion-group {
    margin-bottom: 18px;
}
.docs-notion-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.docs-notion-title:hover {
    text-decoration: underline;
}
.docs-notion-title.unclassified {
    color: var(--ink-mute);
    cursor: default;
}
.docs-notion-title.unclassified:hover {
    text-decoration: none;
}

.docs-empty-filter {
    text-align: center;
    padding: 40px 20px;
    background: var(--paper);
    border-radius: 14px;
}

/* ============================================================
   MA MÉTHODE — la boussole d'apprentissage en 7 étapes
   ============================================================ */
.methode-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.methode-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--paper);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--primary);
}
.methode-step-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--primary);
    opacity: 0.45;
    min-width: 18px;
}
.methode-step-icon { font-size: 20px; line-height: 1.2; }
.methode-step-label { font-weight: 700; font-size: 14px; }
.methode-step-short { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.methode-step-why {
    font-size: 11px;
    color: var(--ink-mute);
    font-style: italic;
    margin-top: 5px;
}

.methode-callout {
    background: var(--mint-soft);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    border-left: 4px solid var(--mint);
}
.methode-callout-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}
.methode-callout p { margin: 0; font-size: 14px; line-height: 1.55; }

.methode-pieges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.methode-piege {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--danger-soft);
    border-radius: 10px;
    padding: 10px 12px;
}
.methode-piege-icon { font-size: 18px; }
.methode-piege-title { font-weight: 700; font-size: 13px; }
.methode-regle-or {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: var(--accent-soft);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.methode-subject {
    font-family: var(--font-display);
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--ink);
}
.methode-notions { display: flex; flex-direction: column; gap: 6px; }
.methode-notion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--paper);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.methode-notion-row:hover { background: var(--paper-2); }
.methode-notion-title { font-weight: 600; font-size: 14px; }
.methode-next {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    margin-top: 4px;
}

/* =========================================================================
   LE GUIDE PAS À PAS — la méthode démontrée sur une vraie notion.

   Hiérarchie visuelle volontaire, elle porte le message pédagogique :
     .guide-paper  → le geste sur le cahier. Le plus gros, le plus contrasté,
                     texture papier ligné. C'est LUI le travail.
     .guide-sample → ce que ça donne écrit, en monospace, comme un brouillon.
     .guide-app    → l'appui de l'application. Petit, gris, en dernier.
   Inverser ces poids reviendrait à dire que l'écran fait le travail.
   ========================================================================= */

.guide-cycles { display: flex; gap: 6px; flex-wrap: wrap; }
.guide-cycle {
    border: 1.5px solid var(--line);
    background: var(--paper);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 6px 13px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.guide-cycle:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.guide-cycle.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
/* Les cycles qui ne sont pas celui de l'élève : visibles (il se situe), mais
   hors de portée — pas de leurre de clic. */
.guide-cycle.is-locked {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* Le rappel « c'est sur le papier que ça se passe » */
.guide-manifesto {
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--accent-soft);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius);
}
.guide-manifesto-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 5px;
}
.guide-manifesto p { margin: 0; font-size: 13.5px; line-height: 1.6; }

/* Choix de la matière */
.guide-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.guide-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px 8px 10px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-ui);
    transition: all .15s ease;
}
.guide-chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.guide-chip.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: var(--shadow-sm);
}
.guide-chip-icon { font-size: 19px; }
.guide-chip-subject { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.guide-chip-notion { display: block; font-size: 11.5px; color: var(--ink-mute); }

/* La carte de l'exemple */
.guide-card {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}
.guide-head { display: flex; gap: 13px; align-items: flex-start; }
.guide-head-icon { font-size: 30px; line-height: 1; }
.guide-head-notion {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}
.guide-head-meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.guide-head-intro { font-size: 13.5px; color: var(--ink-soft); margin: 7px 0 0; line-height: 1.55; }

.guide-setup {
    margin: 13px 0;
    padding: 10px 13px;
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    line-height: 1.5;
}

/* La barre des 7 étapes */
.guide-rail {
    display: flex;
    gap: 5px;
    margin: 16px 0 14px;
    flex-wrap: wrap;
}
.guide-rail-step {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: all .15s ease;
    flex: 0 0 auto;
}
.guide-rail-step:hover { border-color: var(--primary); transform: translateY(-2px); }
.guide-rail-step.passed { background: var(--mint-soft); border-color: var(--mint); }
.guide-rail-step.current {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 3px 10px rgba(124, 92, 255, .32);
    transform: translateY(-2px);
}
.guide-rail-num {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--paper);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}
.guide-rail-step.current .guide-rail-num { background: var(--accent); color: var(--ink); }

/* L'étape courante */
.guide-step { border-top: 1px dashed var(--line); padding-top: 14px; }
.guide-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    margin-bottom: 6px;
}
.guide-step-counter {
    background: var(--ink);
    color: var(--paper);
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
}
.guide-step-generic { color: var(--ink-mute); font-weight: 600; }
.guide-step-time { margin-left: auto; color: var(--ink-mute); }

/* Vignette de l'étape + titre. L'image est décorative : elle donne le ton,
   elle ne porte aucune information absente du texte. */
.guide-step-illus {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.guide-step-illus img {
    width: 116px;
    height: auto;
    flex: 0 0 auto;
}
.guide-step-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
}

/* LE bloc important : le geste sur le cahier. */
.guide-paper {
    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 25px,
            rgba(107, 184, 255, .18) 25px,
            rgba(107, 184, 255, .18) 26px
        ),
        #FFFDF7;
    border: 2px solid var(--sky);
    border-left: 5px solid var(--coral);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.guide-paper-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 6px;
}
.guide-paper-text {
    margin: 0;
    font-size: 15px;
    line-height: 26px;
    color: var(--ink);
}

/* Ce que ça donne, écrit — présenté comme un brouillon */
.guide-sample { margin-top: 12px; }
.guide-sample-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-mute);
    margin-bottom: 5px;
}
.guide-sample-body { display: flex; flex-direction: column; gap: 10px; }
.guide-sample-body.with-croquis { flex-direction: row; align-items: stretch; }
.guide-sample-body.with-croquis .guide-sample-text { flex: 1 1 55%; min-width: 0; }
.guide-sample-text {
    margin: 0;
    padding: 12px 14px;
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--line);
    font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Le croquis : le schéma que l'élève doit REPRODUIRE. La légende le dit
   explicitement — sans elle, on pourrait croire qu'il suffit de le regarder. */
.guide-croquis {
    flex: 1 1 45%;
    min-width: 0;
    margin: 0;
    padding: 10px;
    background: var(--paper);
    border: 1.5px solid var(--sky);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.guide-croquis img { width: 100%; max-width: 300px; height: auto; }
.guide-croquis figcaption {
    font-size: 11px;
    font-weight: 600;
    color: var(--sky);
    text-align: center;
}

.guide-trap {
    margin-top: 12px;
    padding: 10px 13px;
    background: var(--danger-soft);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.55;
}
.guide-trap-label { font-weight: 800; color: var(--danger); }

/* L'appui de l'app : discret, en dernier. */
.guide-app {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-mute);
}
.guide-app-label { font-weight: 700; color: var(--ink-soft); }

.guide-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.guide-done { font-size: 13px; font-weight: 700; color: var(--mint); }

/* Le planning : l'étalement rendu concret */
.guide-planning {
    margin-top: 16px;
    border-top: 1px dashed var(--line);
    padding-top: 12px;
}
.guide-planning summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--primary);
}
.guide-timeline { display: flex; flex-direction: column; gap: 0; }
.guide-timeline-row {
    display: flex;
    gap: 12px;
    padding: 9px 0 9px 16px;
    border-left: 2px solid var(--primary-soft);
    position: relative;
    font-size: 13px;
    line-height: 1.5;
}
.guide-timeline-row::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--paper);
}
.guide-timeline-when {
    flex: 0 0 150px;
    font-weight: 700;
    color: var(--primary-dark);
}
.guide-timeline-what { flex: 1; color: var(--ink-soft); }

.guide-footnote {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
}

@media (max-width: 640px) {
    .guide-timeline-row { flex-direction: column; gap: 2px; }
    .guide-timeline-when { flex: none; }
    .guide-rail-step { width: 38px; height: 38px; font-size: 15px; }
    .guide-paper-text { font-size: 14px; line-height: 24px; }
    /* Sur téléphone, croquis et texte se superposent au lieu de se serrer. */
    .guide-sample-body.with-croquis { flex-direction: column; }
    .guide-step-illus { gap: 10px; }
    .guide-step-illus img { width: 84px; }
}

/* Les 7 pastilles de la boussole */
.compass-dots { display: flex; gap: 4px; }
.compass-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--paper-2);
    filter: grayscale(1);
    opacity: 0.4;
    transition: all 0.2s ease;
}
.compass-dot.done {
    filter: none;
    opacity: 1;
    background: var(--mint-soft);
    box-shadow: 0 0 0 2px var(--mint) inset;
}

/* ============================================================
   ACCUEIL D'UN FOYER SANS ENFANT — les premiers pas
   ============================================================ */
.onboarding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.onboarding-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.onboarding-emoji {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px;
}

/* Un lien au fil du texte, mais qui est un vrai <button> : la destination est
   une vue JS, pas une URL — un <a href> mentirait sur ce qui va se passer. */
.link-inline {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-inline:hover { color: var(--ink); }

/* ============================================================
   MA CURIOSITÉ — les deux volets
   ============================================================ */

/* Bascule entre « Mes découvertes » et « Le tour du monde ». Deux onglets et
   pas davantage : au-delà, une barre d'onglets devient un menu. */
.culture-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.culture-tab {
    border: 1.5px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-soft);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.culture-tab:hover { border-color: var(--primary); }
.culture-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}


/* ============================================================
   MA CURIOSITÉ — La Gazette du jour

   L'aspect vise le JOURNAL, pas la carte de jeu : une manchette
   en capitales espacées, un filet sous l'ours, des brèves en
   colonne. Ce n'est pas de la nostalgie typographique — c'est ce
   qui signale à l'enfant qu'il change de registre en passant de
   « je joue avec les continents » à « je lis l'actualité ».
   ============================================================ */
.gazette {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 24px 18px;
    max-width: 760px;
}
@media (max-width: 640px) { .gazette { padding: 16px 14px 14px; } }

/* L'ours : le nom du journal et ses mentions. */
.gazette-ours {
    text-align: center;
    border-bottom: 2.5px solid var(--ink);
    padding-bottom: 10px;
    margin-bottom: 18px;
}
.gazette-nom {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.05;
}
@media (max-width: 640px) { .gazette-nom { font-size: 26px; } }
.gazette-ours-meta {
    font-size: 12px;
    color: var(--ink-mute);
    margin-top: 5px;
    font-style: italic;
}

/* Édition de la veille : visible sans être alarmante. */
.gazette-avis {
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #8a5a00;
    margin-bottom: 16px;
}

.gazette-une {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--ink);
}
.gazette-intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 16px;
}

/* Le rappel du planisphère : les continents dont on parle aujourd'hui. */
.gazette-boussole {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 0 16px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}
.gazette-region {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--teinte);
    background: color-mix(in srgb, var(--teinte) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--teinte) 35%, transparent);
}

/* Une brève. Le filet de gauche porte la couleur du continent : le lien
   avec la carte se lit sans qu'on ait à l'expliquer. */
.gazette-breve {
    border-top: 1px solid var(--line);
    border-left: 3px solid var(--teinte);
    padding: 14px 0 14px 14px;
    margin-left: -2px;
}
.gazette-breve:first-of-type { border-top: none; }
.gazette-breve-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.gazette-domaine {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    background: var(--paper-2);
    border-radius: 999px;
    padding: 2px 9px;
}
.gazette-source {
    font-size: 11px;
    color: var(--ink-mute);
    font-style: italic;
}
.gazette-breve-titre {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--ink);
}
.gazette-breve-texte {
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    color: var(--ink);
}
.gazette-pourquoi {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 8px 0 0;
    color: var(--ink-soft);
    background: var(--paper-2);
    border-radius: 10px;
    padding: 8px 12px;
}

/* Le lien vers la source. Discret mais toujours présent : c'est lui qui
   distingue une information d'une affirmation. */
.gazette-lien {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.gazette-lien:hover { text-decoration: underline; }

/* Le mot du jour — l'encart qu'on lit même quand on saute le reste. */
.gazette-mot {
    margin-top: 18px;
    background: var(--primary-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.gazette-mot-etiquette {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}
.gazette-mot-mot {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    margin: 4px 0 2px;
    color: var(--ink);
}
.gazette-mot-def {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Le pied : ce que le filtre a fait. Montrer le travail plutôt que
   l'affirmer — un enfant qui voit « 4 écartées » comprend qu'on trie
   pour lui, et un parent le vérifie d'un coup d'œil. */
.gazette-pied {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-mute);
    line-height: 1.6;
}
.gazette-ecartees { color: var(--ink-soft); }

/* Attente et panne. */
.gazette-chargement,
.gazette-panne {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-soft);
    max-width: 520px;
    margin: 0 auto;
}
.gazette-chargement-icone { font-size: 40px; margin-bottom: 10px; }
.gazette-panne h3 {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 8px;
    color: var(--ink);
}


/* Aperçu des quatre niveaux de lecture, dans les réglages du foyer.
   Un parent qui allume la Gazette doit voir ce que son enfant recevra —
   « adapté au niveau » ne veut rien dire tant qu'on ne le montre pas. */
.gazette-niveaux-apercu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--paper);
    border-radius: 12px;
    padding: 12px 14px;
}
.gazette-niveau-ligne {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}
.gazette-niveau-nom {
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    min-width: 78px;
}

/* ============================================================
   MA CURIOSITÉ — le planisphère des découvertes
   ============================================================ */
.culture-counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--ink-soft);
}
.culture-counter-big {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--primary);
}

/* Bandeau du temps restant — discret tant qu'il en reste, visible ensuite. */
.culture-time {
    font-size: 13px;
    color: var(--ink-mute);
    margin-bottom: 12px;
}
.culture-time.low {
    color: #8a5a00;
    background: var(--accent-soft);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
}

/* Fin du temps quotidien : on félicite, on ne réprimande pas. */
.culture-timeup {
    text-align: center;
    padding: 34px 24px;
    background: linear-gradient(160deg, var(--primary-soft), var(--paper));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.culture-timeup h3 {
    font-family: var(--font-display);
    font-size: 22px;
}
.culture-timeup p { margin: 6px 0; line-height: 1.55; }

/* Explorer un thème libre */
.culture-explore {
    background: var(--paper);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.culture-explore-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}
.culture-explore .input { flex: 1; min-width: 200px; }
.culture-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.culture-map-wrap {
    background: linear-gradient(160deg, #F3F8FF, var(--paper));
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.culture-map {
    width: 100%;
    height: auto;
    display: block;
    max-height: 60vh;
}
.culture-region { cursor: pointer; }
.culture-region ellipse { transition: stroke-width 0.15s ease, filter 0.15s ease; }
.culture-region:hover ellipse { stroke-width: 1.4; filter: brightness(1.05); }
.culture-region.selected ellipse { stroke-width: 1.8; }
/* Les tailles sont en unités du viewBox (0-100) : elles s'adaptent donc
   automatiquement à la largeur réelle de la carte. */
.culture-region-icon { font-size: 5px; }
.culture-region-count {
    font-size: 2.6px;
    font-weight: 700;
    fill: var(--ink);
    font-family: var(--font-ui);
}
.culture-region-name {
    font-size: 2.8px;
    fill: var(--ink-soft);
    font-family: var(--font-ui);
    font-weight: 600;
}

/* ---- Vignettes de découverte ---- */
.culture-card {
    background: var(--paper);
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.15s ease;
    /* Non découverte : la vignette reste discrète, pour donner envie de
       l'ouvrir sans révéler son contenu. */
    opacity: 0.75;
}
.culture-card:hover { transform: translateY(-3px); opacity: 1; }
.culture-card.discovered {
    opacity: 1;
    background: linear-gradient(135deg, var(--mint-soft), var(--paper));
}
.culture-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.culture-card-domain {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.culture-card-check {
    color: var(--mint);
    font-weight: 800;
    font-size: 15px;
}
.culture-card-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
}

/* ---- La carte ouverte ---- */
.culture-fact { font-size: 15px; line-height: 1.6; }
.culture-wow {
    background: var(--accent-soft);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
}
.culture-question { margin-top: 18px; }
.culture-question-label {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}
.culture-answer-ok {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--mint-soft);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.culture-answer-retry {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--accent-soft);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Documents liés (« Sur le même sujet ») ---- */
.related-docs { display: flex; flex-direction: column; gap: 5px; }
.related-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--paper-2);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}
.related-doc:hover { background: var(--primary-soft); }
.related-doc-title { flex: 1; font-weight: 600; }

/* ---- Examen blanc : choix des chapitres + chronomètre ---- */
.exam-chapters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
    padding: 8px;
    background: var(--paper-2);
    border-radius: 10px;
}
.exam-chapter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.exam-timer {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    padding: 8px;
    border-radius: 10px;
    margin-bottom: 12px;
}
.exam-timer.warning { background: var(--accent-soft); color: #8a5a00; }
.exam-timer.over { background: var(--danger-soft); color: var(--danger); font-size: 13px; }

/* ---- Origine d'un quizz (créé par l'élève vs par les parents) ---- */
.quiz-origin {
    font-size: 11px;
    font-weight: 600;
    background: var(--sky-soft);
    color: var(--ink-soft);
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: 8px;
    white-space: nowrap;
}
.quiz-origin.mine {
    background: var(--coral-soft);
}
.quiz-delete, .quiz-pdf-link {
    cursor: pointer;
    opacity: 0.65;
}
.quiz-delete:hover, .quiz-pdf-link:hover { opacity: 1; }
.quiz-pdf-link { font-weight: 600; color: var(--primary); }

/* ---- Carnet d'erreurs ---- */
.error-list { display: flex; flex-direction: column; gap: 10px; }
.error-card {
    background: var(--paper);
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--danger);
}
.error-card.understood {
    border-left-color: var(--mint);
    opacity: 0.7;
}
.error-question { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.error-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 6px;
}
.error-yours {
    background: var(--danger-soft);
    padding: 3px 10px;
    border-radius: 999px;
}
.error-expected {
    background: var(--mint-soft);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
}
.error-why {
    font-size: 12px;
    color: var(--ink-soft);
    background: var(--paper-2);
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.45;
}

/* La boussole telle qu'affichée dans une Capsule de notion */
.compass-widget {
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 12px 0;
}
.compass-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.compass-title { font-weight: 700; font-size: 14px; }
.compass-score {
    font-size: 12px;
    color: var(--ink-mute);
    font-weight: 600;
}
.compass-express {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    background: var(--mint-soft);
    color: var(--ink);
    padding: 2px 8px;
    border-radius: 999px;
}
.compass-widget .compass-dot { cursor: pointer; }
.compass-dot.manual { box-shadow: 0 0 0 2px var(--accent) inset; }
.compass-next {
    margin-top: 8px;
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}
.compass-next.done { color: var(--mint); }

/* Grille compacte utilisée dans le modal d'accueil */
.methode-onboarding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 16px 0;
}
.methode-onboarding-step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--paper-2);
    border-radius: 10px;
    padding: 8px 10px;
}
.methode-onboarding-icon { font-size: 17px; }
.methode-onboarding-label { font-size: 13px; font-weight: 600; }

.library-view-switch {
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* ---- Vue Étagère vivante ---- */
.shelf-subject {
    margin-bottom: 28px;
}
.shelf {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 16px 14px 10px;
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 -6px 0 rgba(42, 36, 56, 0.08);
    min-height: 120px;
    flex-wrap: wrap;
}
.shelf-books {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.book-spine {
    height: 96px;
    border-radius: 6px 6px 3px 3px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    transition: transform 0.15s ease;
}
.book-spine:hover {
    transform: translateY(-6px);
}
.book-spine span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    max-height: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shelf-loose-pile {
    align-self: flex-end;
    font-size: 12px;
    color: var(--ink-mute);
    padding: 6px 10px;
    background: var(--paper);
    border-radius: 8px;
    margin-left: 8px;
}

/* ---- Vue Constellation ---- */
.constellation-wrap {
    background: var(--paper);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-sm);
}
.constellation-svg {
    width: 100%;
    height: auto;
    display: block;
}
.const-subject-label {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}
.const-star-label {
    font-family: var(--font-ui);
    font-size: 10px;
    fill: var(--ink-mute);
}
.const-star {
    transition: r 0.15s ease;
}
.const-star:hover {
    filter: brightness(1.15);
}

/* ---- Vue Frise chronologique ---- */
.timeline {
    position: relative;
    padding-left: 22px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--line);
}
.timeline-month {
    position: relative;
    margin-bottom: 26px;
}
.timeline-dot {
    position: absolute;
    left: -22px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--paper);
}
.timeline-month-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--ink);
    margin-bottom: 10px;
}

/* ---- Vue Par date ----
   Rangée du dépôt le plus récent au plus ancien, les sept derniers jours
   détaillés au jour. La Frise raconte l'année dans l'autre sens ; celle-ci
   répond à « où est ce que je viens de déposer ? ». */

.docs-date-barre {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.docs-date-sens { display: flex; gap: 6px; margin-left: auto; }
.docs-date-sens-btn {
    padding: 5px 12px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.docs-date-sens-btn:hover { border-color: var(--primary); }
.docs-date-sens-btn.active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--ink);
    font-weight: 700;
}

/* L'en-tête de tranche : la date porte le regard, le compte et les pastilles
   de matière disent en un coup d'œil ce que la journée contient. */
.docs-date-entete {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
}
.docs-date-entete:first-child { margin-top: 4px; }
.docs-date-puce {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    flex: 0 0 auto;
}
.docs-date-libelle {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    text-transform: capitalize;
}
.docs-date-compte { font-size: 12px; color: var(--ink-mute); }
.docs-date-matieres { display: flex; gap: 4px; margin-left: auto; }
.docs-date-point {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

/* La matière, sur la carte — uniquement dans cette vue : ailleurs, elle est
   déjà le titre de la section qui contient la vignette. */
.doc-tag-matiere {
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--doc-matiere, var(--primary));
    background: color-mix(in srgb, var(--doc-matiere, var(--primary)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--doc-matiere, var(--primary)) 35%, transparent);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 720px) {
    .docs-date-sens { margin-left: 0; width: 100%; }
    .docs-date-sens-btn { flex: 1; text-align: center; }
    .docs-date-matieres { margin-left: 0; }
}

/* ---- Vue Pile à réviser ---- */
.revision-pile {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 6px 0;
}
.pile-card {
    background: var(--paper);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    min-width: 160px;
    border: 1px solid var(--line);
    transition: transform 0.15s ease;
}
.pile-card:hover {
    transform: translateY(-4px) rotate(0deg) !important;
}

/* ---- Vue Liste détaillée ---- */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.docs-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-mute);
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}
.docs-table th:hover {
    color: var(--primary);
}
.docs-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.docs-table tbody tr {
    cursor: pointer;
}
.docs-table tbody tr:hover {
    background: var(--paper-2);
}

/* Cartes de documents enrichies */
.doc-card {
    position: relative;
}
.doc-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 1;
}
.doc-badges .doc-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--paper-2);
    display: grid;
    place-items: center;
    font-size: 13px;
    cursor: help;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.doc-badges .doc-badge.ai-corrected {
    background: var(--mint-soft);
    border-color: var(--mint);
}
.doc-badges .doc-badge.linked {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.doc-tag-row {
    margin-top: 4px;
    margin-bottom: 4px;
}
.doc-tag-kind {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-mute);
    background: var(--paper-2);
    padding: 2px 8px;
    border-radius: 999px;
}

.doc-linked-hw {
    font-size: 11px;
    color: var(--primary);
    margin: 4px 0 6px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   LE TOUR DU MONDE — carte satellite (Leaflet) et jeu des drapeaux
   ========================================================================= */

.atlas-modes {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.atlas-mode {
    border: 1.5px solid var(--line);
    background: #fff;
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.atlas-mode:hover { border-color: var(--accent); }
.atlas-mode.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--ink);
}

/* Sans réseau, les tuiles ne descendent pas. On le dit, on ne bloque rien. */
.atlas-offline {
    background: var(--accent-soft);
    color: #8a5a00;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 13px;
    margin-bottom: 10px;
}

/* La carte a besoin d'une hauteur explicite : Leaflet mesure son conteneur,
   et un conteneur sans hauteur donne une carte invisible sans erreur. */
.atlas-map {
    height: 420px;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-paper);
    border: 1.5px solid var(--line);
    background: #0d1b2a;   /* le bleu nuit d'un océan sans tuiles */
    z-index: 0;            /* garde la carte sous les modales et les toasts */
}
.atlas-panel { margin-top: 16px; }

/* Les épingles numérotées des quatre propositions. */
.atlas-pin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--coral, #FF6B9D);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    cursor: pointer;
}
.atlas-pin.correct { background: var(--mint, #3DBE8B); }

/* ---- Drapeaux ---- */
.flag {
    display: block;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .18);
    background: var(--paper-2);
}
.flag-sm { width: 28px; height: 19px; }
.flag-md { width: 46px; height: 31px; }
.flag-xl {
    width: min(280px, 70vw);
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
}
/* Image absente : le code ISO plutôt qu'un cadre vide. */
.flag-absent {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-mute);
    letter-spacing: .04em;
}

/* ---- Liste des pays ---- */
.atlas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.atlas-country {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, transform .12s;
}
.atlas-country:hover { border-color: var(--primary); transform: translateY(-1px); }
.atlas-country-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atlas-country-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--coral, #FF6B9D);
}

/* ---- Bulle d'un pays ---- */
.atlas-popup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.atlas-popup-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.atlas-popup-sub { font-size: 12px; color: var(--ink-mute); }
.atlas-popup-line { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* ---- Réglages de la partie ---- */
.atlas-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin: 12px 0;
}
.atlas-level {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.atlas-level.active { border-color: var(--primary); background: var(--primary-soft); }
.atlas-level-name { font-weight: 700; font-size: 14px; }
.atlas-level-detail { font-size: 12px; color: var(--ink-mute); }

/* ---- La manche en cours ---- */
.atlas-progress { margin-bottom: 12px; }
.atlas-progress-bar {
    height: 7px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.atlas-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width .3s;
}
.atlas-progress-text { font-size: 12px; color: var(--ink-mute); margin-top: 5px; }

.atlas-flag-stage {
    display: flex;
    justify-content: center;
    padding: 14px 0 18px;
}

.atlas-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.atlas-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.atlas-choice:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.atlas-choice:disabled { cursor: default; opacity: .85; }
.atlas-choice-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink-mute);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.atlas-choice.correct {
    border-color: var(--mint, #3DBE8B);
    background: var(--mint-soft, #E8F7F0);
    opacity: 1;
}
.atlas-choice.correct .atlas-choice-num { background: var(--mint, #3DBE8B); color: #fff; }
.atlas-choice.wrong { border-color: #E08E8E; background: #FBEDED; }

.atlas-verdict {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    display: none;
}
.atlas-verdict.ok { display: block; background: var(--mint-soft, #E8F7F0); color: #17864B; }
.atlas-verdict.ko { display: block; background: var(--accent-soft); color: #8a5a00; }

/* ---- Fin de partie ---- */
.atlas-result {
    text-align: center;
    padding: 26px 20px;
    background: linear-gradient(160deg, var(--primary-soft), var(--paper));
    border-radius: var(--radius-lg);
}
.atlas-result-score {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}
.atlas-result-word { font-size: 16px; font-weight: 600; margin: 6px 0 4px; }

/* ---- Scores ---- */
.atlas-scores { margin-top: 22px; }
.atlas-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.atlas-stat {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}
.atlas-stat-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}
.atlas-stat-label {
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.atlas-history { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.atlas-history-item {
    font-size: 12px;
    background: var(--paper-2);
    border-radius: 999px;
    padding: 3px 10px;
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .atlas-map { height: 320px; }
    .atlas-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* =========================================================================
   BOUSSOLE — Emploi du temps (grille peignable) + Organiseur + Matrice
   ========================================================================= */

/* ---- Grille emploi du temps ---- */
.edt-wrap { overflow-x: auto; padding-bottom: 8px; }
.edt-grid {
    display: grid; grid-template-columns: 52px repeat(7, 1fr);
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-paper); border: 1px solid var(--line); min-width: 820px;
}
.edt-grid.painting .edt-half { cursor: crosshair; }
.edt-corner, .edt-dayhead {
    background: var(--paper-2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.edt-corner { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-mute); font-weight: 700; }
.edt-dayhead { text-align: center; padding: 8px 4px; font-weight: 700; font-size: 12px; position: relative; }
.edt-dayhead:last-child { border-right: none; }
.edt-dayhead .num { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 17px; }
.edt-dayhead.today { background: var(--primary); color: #fff; }
.edt-dayhead.holiday { background: repeating-linear-gradient(45deg, var(--paper-2) 0 6px, #efe6cf 6px 12px); }
.edt-dayhead .holtag { position: absolute; top: 2px; right: 4px; font-size: 11px; }
.edt-hour { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 10px; color: var(--ink-mute); text-align: right; padding: 2px 6px 0 0; height: 48px; }
/* Une case de la grille qui porte un objet : révision, devoir, bloc
   d'organiseur. Le curseur et le liseré au survol disent qu'il y a quelque
   chose derrière — sans quoi l'élève ne devine pas qu'on peut cliquer. */
.edt-half-actionnable { cursor: pointer; }
.edt-half-actionnable:hover,
.edt-half-actionnable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    filter: brightness(0.96);
}

.edt-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 48px; display: flex; flex-direction: column; }
.edt-grid > .edt-cell:nth-child(8n) { border-right: none; }
.edt-cell.holiday { opacity: .55; }
.edt-half { flex: 1; display: flex; align-items: center; gap: 3px; padding: 0 4px; font-size: 9px; line-height: 1.05; overflow: hidden; border-bottom: 1px dotted rgba(255,255,255,.45); }
.edt-half:last-child { border-bottom: none; }
.edt-half .e { font-size: 10px; flex: none; }
.edt-half .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edt-half.cat-sommeil, .edt-half.cat-transport, .edt-half.cat-repas, .edt-half.cat-extra, .edt-half.cat-cours, .edt-half.cat-ds { color: rgba(255,255,255,.96); }
.edt-half.cat-libre, .edt-half.cat-travail, .edt-half.cat-plan { color: rgba(20,16,40,.92); }
.edt-half.painted { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.edt-half.isplan { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }

/* ---- Barre "Peindre" ---- */
.edt-paintbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.edt-paintbar .lbl { font-weight: 700; font-size: 13px; margin-right: 4px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.pchip .sw { width: 13px; height: 13px; border-radius: 3px; background: var(--c); }
.pchip:hover { border-color: var(--ink-soft); }
.pchip.active { border-color: var(--c, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--primary)) 22%, transparent); }
.pchip.view.active, .pchip.erase.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---- Bandeau équilibre ---- */
.bal-band { margin-top: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.bal-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 12px; }
.bal-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.bal-stat { flex: 1 1 110px; background: var(--paper-2); border-radius: 12px; padding: 10px 12px; text-align: center; }
.bal-stat .v { font-family: var(--font-display); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.bal-stat .v .em { font-size: 16px; }
.bal-stat .l { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.bal-msgs { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.bal-msg { font-size: 13px; color: var(--ink-soft); background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; }

.edt-legend, .org-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.edt-legend .item, .org-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.edt-legend .sw, .org-legend .sw { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* ---- Organiseur (plan du soir) ---- */
.org-board { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.org-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.org-col.today { border-color: var(--primary); border-width: 2px; }
.org-col-head { background: var(--paper-2); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.org-col-head .d { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.org-col-head .sub { font-size: 11px; color: var(--ink-mute); }
.org-col-head .count { font-size: 11px; font-weight: 700; color: var(--mint); background: var(--mint-soft); padding: 2px 8px; border-radius: 20px; }
.org-col-actions { display: flex; gap: 6px; padding: 8px 10px 0; flex-wrap: wrap; }
.org-col-actions .mini { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-dark); border: none; cursor: pointer; }
.org-col-actions .mini:hover { filter: brightness(.97); }
.org-col-actions .mini.ia { background: #ede9ff; color: #5b3fe0; }
.org-col-actions .mini.ghost { background: var(--paper-2); color: var(--ink-soft); }
.org-slots { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.org-slot { display: flex; align-items: center; gap: 7px; border-radius: 9px; min-height: 34px; padding: 3px 7px; font-size: 12px; }
.org-slot .time { font-size: 10px; color: var(--ink-mute); font-weight: 700; width: 32px; flex: none; }
.org-slot.empty { border: 1px dashed var(--line); cursor: pointer; transition: all .12s; color: var(--ink-mute); }
.org-slot.empty:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.org-slot.empty .add { font-size: 11px; font-weight: 600; }
.org-slot.filled { background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 4px solid var(--c); }
.org-slot.filled .check { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--c); background: #fff; font-size: 12px; font-weight: 800; color: var(--c); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.org-slot.filled .task { flex: 1; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.org-slot.filled .task .emoji { flex: none; }
.org-slot.filled .task .lbl { font-weight: 600; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.org-slot.filled .task .aitag { flex: none; font-size: 11px; opacity: .8; }
.org-slot.filled .rm { flex: none; color: var(--ink-mute); font-size: 13px; opacity: .5; cursor: pointer; background: none; border: none; }
.org-slot.filled .rm:hover { opacity: 1; color: var(--danger); }
.org-slot.filled.done { opacity: .62; }
.org-slot.filled.done .check { background: var(--c); color: #fff; }
.org-slot.filled.done .task .lbl { text-decoration: line-through; }
.org-slot.filled.ai { border-left-style: dashed; }
.org-empty { padding: 24px 12px; text-align: center; color: var(--ink-mute); font-size: 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; }

.org-cat-grid { display: flex; flex-direction: column; gap: 16px; }
.org-fam-title { font-family: var(--font-display); font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.org-fam-items { display: flex; flex-wrap: wrap; gap: 7px; }
.org-pick { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; text-align: left; }
.org-pick:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.org-pick.sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.org-pick .e { font-size: 15px; }
.org-duration-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.org-duration-row .lbl { font-weight: 700; font-size: 13px; }
.org-duration { display: inline-flex; gap: 6px; }
.org-duration .dur { padding: 6px 12px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink-soft); }
.org-duration .dur.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }

/* ---- Matrice (fiche fidèle) ---- */
.matrix-wrap { overflow-x: auto; padding-bottom: 8px; }
.matrix-grid { display: grid; grid-template-columns: 150px repeat(7, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-paper); min-width: 900px; }
.mx-corner { background: var(--paper-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px; font-size: 11px; font-style: italic; color: var(--ink-mute); display: flex; align-items: center; }
.mx-dayhead { background: var(--paper-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: 10px 4px; font-weight: 700; font-size: 12px; }
.mx-dayhead:last-child { border-right: none; }
.mx-dayhead .num { display: block; font-family: var(--font-display); font-size: 16px; margin-top: 2px; }
.mx-dayhead.today { background: var(--primary); color: #fff; }
.mx-rowhead { background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px; font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 7px; }
.mx-rowhead .em { font-size: 16px; }
.mx-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px; min-height: 60px; display: flex; flex-direction: column; gap: 4px; }
.mx-cell:nth-child(8n+1) { border-right: none; }
.mx-item { display: flex; align-items: flex-start; gap: 4px; font-size: 11px; line-height: 1.2; background: var(--coral-soft); border-radius: 7px; padding: 4px 6px; }
.mx-item.clickable { cursor: pointer; transition: filter .12s; }
.mx-item.clickable:hover { filter: brightness(.96); }
.mx-item .e { flex: none; }
.mx-item .l { font-weight: 600; }

@media (max-width: 900px) {
    .edt-grid { min-width: 760px; }
    .org-board { grid-template-columns: repeat(7, minmax(140px, 1fr)); }
}

/* ── Formules mathématiques des fiches ──────────────────────────────────────
   Rendu maison (js/formules.js) plutôt qu'une bibliothèque de composition :
   ces fiches sont faites pour être imprimées puis recopiées à la main, elles
   demandent d'être lisibles, pas parfaitement typographiées. */
.math {
    font-family: "Cambria Math", "Latin Modern Math", Georgia, serif;
    font-style: italic;
    white-space: nowrap;
    font-size: 1.05em;
}
.math-bloc {
    display: block;
    text-align: center;
    margin: 10px 0;
    font-size: 1.15em;
}
/* Fonctions et texte se composent DROIT : c'est ce qui distingue « ln » de
   trois variables l, n multipliées. */
.math .math-fn,
.math .math-txt { font-style: normal; }
.math .math-fn { padding-right: 0.12em; }

/* Fraction empilée : deux étages séparés d'un filet. Sur ln(x)/x^n, la barre
   lève l'ambiguïté que la notation en ligne laisse planer. */
.math .frac {
    display: inline-flex;
    flex-direction: column;
    vertical-align: -0.5em;
    text-align: center;
    margin: 0 0.15em;
}
.math .frac-num { padding: 0 0.3em; }
.math .frac-den {
    padding: 0 0.3em;
    border-top: 1px solid currentColor;
}
.math sup, .math sub { font-size: 0.72em; font-style: normal; }
.math .rac { border-top: 1px solid currentColor; padding: 0 0.15em; }
.math .rac-ind { font-size: 0.6em; }

/* Le corps d'une fiche rendue. */
.fiche-rendue { line-height: 1.7; }
.fiche-rendue h2, .fiche-rendue h3, .fiche-rendue h4 {
    font-family: var(--font-display);
    margin: 18px 0 6px;
}
.fiche-rendue h4 { font-size: 16px; color: var(--primary); }
.fiche-rendue ul, .fiche-rendue ol { margin: 6px 0 6px 20px; }
.fiche-rendue li { margin-bottom: 6px; }
.fiche-rendue hr { border: none; border-top: 1px dashed var(--ink-mute); margin: 16px 0; }
.fiche-rendue code {
    background: var(--paper-2);
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 0.92em;
}

/* ── Ma curiosité : la carte du monde ───────────────────────────────────────
   Contours réels (assets/geo/monde.geo.json) rendus par Leaflet SANS fond de
   tuiles. Le fond reste celui de la page : la carte flotte, et la couleur des
   continents — dont l'intensité suit l'avancement — porte seule le message. */
.culture-map-wrap {
    margin: 8px 0 18px;
}
.culture-leaflet {
    /* La carte occupe la largeur disponible et une bonne moitié de la hauteur
       de fenêtre : c'est un planisphère, pas une vignette. Le monde y tient
       d'un bord à l'autre grâce au zoom fractionnaire (voir culture.js). */
    height: clamp(360px, 58vh, 720px);
    border-radius: 20px;
    overflow: hidden;
    background: #dfe7ef;   /* couleur des mers, visible avant les tuiles */
    border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Leaflet pose son propre fond gris : on le neutralise, sinon la carte
   ressemble à un cadre vide posé sur la page. */
.culture-leaflet .leaflet-container {
    background: transparent;
    font-family: inherit;
    cursor: default;
}
.culture-leaflet .leaflet-interactive {
    cursor: pointer;
    transition: fill-opacity 0.18s ease;
}
.culture-map-repli {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ink-mute);
    font-size: 14px;
}
.culture-tooltip {
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.culture-tooltip::before { display: none; }

/* La légende : le nom de chaque continent, son compte, sa jauge — et la seule
   porte d'entrée de « Partout dans le monde », qui n'a pas de géographie. */
.culture-legende {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.culture-pastille {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icone nom compte" "jauge jauge jauge";
    align-items: center;
    gap: 4px 8px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 2px solid transparent;
    background: var(--paper-2);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.culture-pastille:hover {
    transform: translateY(-2px);
    background: var(--paper);
    border-color: var(--teinte);
}
.culture-pastille.active {
    border-color: var(--teinte);
    background: var(--paper);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.culture-pastille-icone { grid-area: icone; font-size: 19px; }
.culture-pastille-nom {
    grid-area: nom;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}
.culture-pastille-compte {
    grid-area: compte;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-mute);
    white-space: nowrap;
}
.culture-pastille-jauge {
    grid-area: jauge;
    display: block;
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-top: 3px;
}
.culture-pastille-jauge > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.culture-legende-note {
    font-size: 12.5px;
    color: var(--ink-mute);
    margin: 10px 2px 0;
    line-height: 1.5;
}
/* Attribution OpenStreetMap — obligatoire, donc lisible : discrète mais pas
   dissimulée. */
.culture-leaflet .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink-mute);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 6px 0 0 0;
}
.culture-leaflet .leaflet-control-attribution a { color: var(--primary); }


/* ── Jeu des drapeaux : les énoncés textuels ────────────────────────────────
   Trois des quatre modes posent une question écrite (un nom de pays, une
   capitale) là où le mode d'origine montrait un drapeau. L'énoncé occupe la
   même place et le même poids visuel, pour que le jeu reste le même jeu. */
.atlas-enonce-texte {
    text-align: center;
    padding: 18px 12px;
}
.atlas-enonce-sur {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 4px;
}
.atlas-enonce-mot {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.15;
    color: var(--primary);
}

/* Quand la RÉPONSE est un drapeau, les quatre boutons deviennent une grille
   d'images : un drapeau se compare à l'œil, en les voyant côte à côte. */
.atlas-choices:has(.atlas-choice-drapeau) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.atlas-choice-drapeau {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
}
.atlas-choice-drapeau .flag {
    width: 100%;
    max-width: 130px;
    height: auto;
}

/* Numéro d'un quizz de culture — stable d'une session à l'autre, pour qu'on
   puisse en parler à deux. */
.culture-numero {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
}
.culture-numero-ia {
    background: var(--accent-soft);
    color: var(--accent);
}


/* ── Plages du foyer dans le planning de l'enfant ───────────────────────────
   Déclarées par les parents, elles bornent la semaine. Elles s'affichent chez
   l'enfant pour qu'un créneau sans révision ne paraisse pas arbitraire : une
   contrainte nommée « Chez Mamie » se comprend, un trou ne se comprend pas.
   Trame diagonale douce : présent, mais clairement pas un cours. */
.event.foyer,
.timetable-slot.foyer {
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 179, 71, 0.16),
        rgba(255, 179, 71, 0.16) 8px,
        rgba(255, 179, 71, 0.08) 8px,
        rgba(255, 179, 71, 0.08) 16px
    );
    border-left: 3px solid #FFB347;
    color: var(--ink-soft);
}
.layer-toggle.foyer.active {
    background: rgba(255, 179, 71, 0.18);
    border-color: #FFB347;
}
.planning-legend .swatch.foyer {
    background: #FFB347;
}


/* ── Vue « jour » : une frise à l'échelle du temps ──────────────────────────
   Remplace une grille où chaque heure prenait la hauteur de son contenu — un
   trajet de 20 min et un cours de 2 h y avaient la même taille, et 08h30 se
   collait en haut de la case « 8h ». Ici la POSITION dit l'heure et la
   HAUTEUR dit la durée. Voir buildFriseDuJour() dans js/views/child.js. */
.jour-frise-cadre {
    position: relative;
    padding: 10px 10px 10px 52px;   /* la gouttière des heures, à gauche */
    background: var(--paper);
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.jour-frise {
    position: relative;
    width: 100%;
}

/* Repères horaires. Le trait traverse toute la largeur : c'est lui qui permet
   de lire à quelle heure commence un bloc situé loin de la gouttière. */
.jour-heure {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
    pointer-events: none;
}
.jour-heure-label {
    position: absolute;
    left: -46px;
    top: -9px;
    width: 40px;
    text-align: right;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--ink-mute);
}
/* La demi-heure : assez visible pour situer un 08h30, assez discrète pour ne
   pas doubler la grille. */
.jour-demi {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--line);
    opacity: 0.4;
    pointer-events: none;
}

/* Les blocs. Position et hauteur viennent du JavaScript : elles sont
   calculées, pas décoratives. */
.day-event.jour-bloc {
    position: absolute;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
.day-event.jour-bloc .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.day-event.jour-bloc .meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Un bloc court n'a pas la place de deux lignes : on garde le titre, qui est
   la seule information indispensable — l'horaire reste dans l'infobulle. */
.day-event.jour-bloc-court {
    padding-top: 2px;
    padding-bottom: 2px;
    justify-content: center;
}
.day-event.jour-bloc-court .meta { display: none; }
.day-event.jour-bloc-court .title { font-size: 12px; }

/* L'heure qu'il est, sur la journée en cours seulement. */
.jour-maintenant {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--coral, #FF6B9D);
    z-index: 5;
    pointer-events: none;
}
.jour-maintenant::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--coral, #FF6B9D);
}

@media (max-width: 640px) {
    .jour-frise-cadre { padding-left: 42px; }
    .jour-heure-label { left: -38px; font-size: 11px; }
}

/* ── Accessibilité au clavier ───────────────────────────────────────────────
   Trois manques comblés d'un bloc, et qui ne se voient que si l'on pose la
   souris : où suis-je, comment atteindre le contenu, et qu'annonce-t-on. */

/* Le lien d'évitement : hors écran tant qu'il n'a pas le focus, bien visible
   dès qu'on l'atteint par la tabulation. Sans lui, une navigation au clavier
   retraverse les quinze entrées du menu à chaque page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--ink);
    color: #fff;
    border-radius: 0 0 12px 0;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Le contour de focus. `:focus-visible` et non `:focus` : le navigateur ne le
   montre qu'à qui navigue au clavier, et l'utilisateur à la souris ne voit
   aucun cerne bleu autour des boutons qu'il vient de cliquer. Sans cette règle,
   plus rien n'indiquait où l'on se trouvait — le `outline: none` des styles de
   boutons l'avait effacé. */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}
.btn:focus-visible, .nav-item:focus-visible, .modal-close:focus-visible,
.guide-cycle:focus-visible, .week-arrow:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

/* Réservé aux lecteurs d'écran : visible pour eux, absent de l'écran. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mouvement réduit : l'animation des fenêtres et des toasts peut gêner, voire
   déclencher des malaises. Le système d'exploitation le signale, on l'écoute. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Liste bornée par le serveur : dire ce qui n'est pas montré, sans alarmer. */
.liste-bornee {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--paper-2);
    border-left: 3px solid var(--ink-mute);
    border-radius: 8px;
    color: var(--ink-soft);
}

/* =========================================================================
   CONSOLE D'EXPLOITATION — IA LOCALES & PARALLÉLISME
   =========================================================================

   Un écran qui sert à prendre UNE décision : combien d'appels locaux en même
   temps. Tout y est donc rangé de haut en bas dans l'ordre où on en a besoin
   pour décider — les moteurs, la machine, la file, puis le curseur. La
   hiérarchie visuelle suit : les blocs d'information sont sobres, le bloc de
   réglage est le seul qui porte une couleur de fond.
   ========================================================================= */

.ia-bloc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin-bottom: 16px;
}
.ia-bloc-titre {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 700;
    margin: 0 0 12px;
}
.ia-bloc-soustitre {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-mute);
    margin-bottom: 10px;
}

/* ── Les moteurs sondés ───────────────────────────────────────────────────── */
.ia-moteurs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.ia-moteur {
    border: 1.5px solid var(--line);
    border-left: 4px solid var(--mint);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--paper);
}
/* Un moteur injoignable n'est pas une nuance : c'est une panne, et elle doit
   se voir depuis l'autre bout de la pièce. */
.ia-moteur.hors-service {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}
.ia-moteur-tete {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.ia-moteur-nom { font-weight: 700; font-size: 16px; }
.ia-moteur-url {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11.5px; color: var(--ink-mute);
    margin-bottom: 10px;
    word-break: break-all;
}
.ia-moteur-ligne {
    display: flex; gap: 8px; align-items: baseline;
    font-size: 13px; line-height: 1.5;
    padding: 3px 0;
}
.ia-moteur-ligne .cle {
    flex: 0 0 92px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-mute);
}
.ia-moteur-ligne .val { flex: 1; min-width: 0; }

.ia-inscrit {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: var(--mint-soft); color: #147553;
}
.ia-inscrit.manquant { background: var(--danger-soft); color: #A5241F; }

/* ── Ce qui mérite qu'on s'arrête ─────────────────────────────────────────── */
.ia-alerte {
    margin-top: 10px;
    padding: 9px 12px;
    border-left: 3px solid var(--danger);
    background: var(--danger-soft);
    border-radius: 0 10px 10px 0;
    font-size: 12.5px; line-height: 1.55;
}
.ia-alerte code {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(0, 0, 0, .07);
    font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
}

.ia-vide {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    background: var(--paper);
}

/* ── L'état de la file, en une ligne qui change de couleur ────────────────── */
.ia-etat {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    font-size: 13.5px;
    transition: background .3s, border-color .3s;
}
/* Une file qui s'allonge est le signal qui dit « la capacité est trop basse »
   AVANT que quiconque ne se plaigne. Il faut qu'il se voie sans être lu. */
.ia-etat-attente { background: var(--accent-soft); border-color: var(--accent); }
.ia-etat-tendue  { background: var(--danger-soft); border-color: var(--danger); }
.ia-etat-item { display: flex; align-items: baseline; gap: 4px; }

/* ── Les caractéristiques de la machine ───────────────────────────────────── */
.ia-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.ia-carte {
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--paper);
}
.ia-carte-titre {
    font-size: 11px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ia-carte-ligne {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13.5px; line-height: 1.9;
}
.ia-carte-ligne .cle { color: var(--ink-soft); }

/* ── Le bloc de réglage — le seul coloré ──────────────────────────────────── */
.ia-bloc-reglage {
    background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 60%);
    border-color: var(--primary);
}

.ia-reglage { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ia-valeur {
    flex: 0 0 auto;
    min-width: 78px; height: 66px;
    display: grid; place-items: center;
    border: 2px solid var(--primary);
    border-radius: 16px;
    background: #fff;
    font-family: var(--font-display);
    font-size: 32px; font-weight: 800; color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.ia-reperes { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

.ia-curseur {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 8px;
    margin: 18px 0 4px;
    border-radius: 999px;
    background: var(--line);
    outline: none;
}
.ia-curseur::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(124, 92, 255, .5);
    cursor: pointer;
}
.ia-curseur::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(124, 92, 255, .5);
    cursor: pointer;
}
.ia-curseur:focus-visible { box-shadow: 0 0 0 3px var(--primary-soft); }

/*
 * L'avis sur la valeur choisie.
 *
 * Il change de ton AVANT l'enregistrement, pas après : un réglage dangereux
 * doit se dire pendant qu'on le règle, tant qu'il ne coûte rien de reculer.
 */
.ia-avis {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px; line-height: 1.55;
}
.ia-avis-ok        { background: var(--mint-soft);   color: #14664A; }
.ia-avis-attention { background: var(--accent-soft); color: #7A4E06; }
.ia-avis-danger    { background: var(--danger-soft); color: #9B2019; font-weight: 600; }

.ia-note {
    margin: 14px 0 0;
    font-size: 12px; line-height: 1.6; font-style: italic;
    color: var(--ink-mute);
}

/* ============================================================
   LES DEVOIRS SURVEILLÉS DANS LE PLANNING

   Un DS n'a qu'une DATE en base (`homework.exam_date`), jamais
   d'heure. Il ne se dessine donc pas dans une grille horaire :
   il se pose en tête de journée, ou dans l'en-tête du jour.

   Le rouge est réservé à ça dans tout le module. Il ne sert ni
   aux devoirs, ni aux révisions, ni aux échéances : rien d'autre
   ne doit porter cette couleur, sans quoi elle cesse de vouloir
   dire « celui-là, tu ne peux pas le manquer ».
   ============================================================ */

/* Bandeau en tête de la vue Jour. */
.ds-bandeau {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.ds-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--danger-soft, #FDE8E8);
    border-left: 4px solid var(--danger, #E4322B);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.ds-ligne:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
}
.ds-flamme { font-size: 24px; line-height: 1; flex: none; }
.ds-corps { flex: 1; min-width: 0; }
.ds-titre {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--danger, #E4322B);
    line-height: 1.25;
}
.ds-sujet {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Le compte à rebours : c'est lui qu'on cherche des yeux. */
.ds-quand {
    flex: none;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--danger, #E4322B);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .ds-ligne { flex-wrap: wrap; }
    .ds-quand { order: 3; }
}

/* La même flamme dans les vues Semaine et Mois, où le DS passe par
   la liste ordinaire des événements. */
.today-line.evt-ds {
    background: var(--danger-soft, #FFE0E0);
    border-left: 3px solid var(--danger, #E4322B);
    font-weight: 700;
}
/* Les pastilles de la vue Mois sont visées par `.month-grid .month-cell .pill.X` :
   une règle moins spécifique serait écrasée par la couleur de base. */
.month-grid .month-cell .pill.ds {
    background: var(--danger, #E4322B);
    font-weight: 800;
}
.today-line.evt-ds .title { color: var(--danger, #E4322B); }

/* Pastille dans l'en-tête d'un jour — grille du parent et emploi du temps.
   Un fait qui vaut pour toute la journée n'appartient à aucune de ses
   cases horaires : sa place est au-dessus d'elles. */
.day-ds,
.edt-ds {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--danger, #E4322B);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    vertical-align: middle;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edt-ds { padding: 0 5px; margin-left: 4px; }
.day-ds:hover,
.edt-ds:hover { filter: brightness(1.1); }

/* Un DS dans la grille horaire du parent. Il recouvre le cours dont il
   occupe le créneau — un devoir surveillé de maths REMPLACE l'heure de
   maths, il ne s'y ajoute pas. */
.event.is-ds {
    background: var(--danger, #E4322B);
    border-left-color: #8f1410;
    color: #fff;
    z-index: 2;
    font-weight: 700;
}
.event.is-ds .event-meta { color: rgba(255,255,255,.85); }
/* Créneau DÉDUIT de l'emploi du temps : le liseré pointillé dit que
   l'heure est probable, pas certaine. Le « ? » qui suit l'horaire le
   répète en toutes lettres pour qui ne lit pas les bordures. */
.event.is-ds-deduit { border-left-style: dashed; }
.edt-half.cat-ds { font-weight: 700; }

/* L'heure dans le bandeau du jour. */
.ds-heure {
    margin-left: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-soft);
}
.ds-indice {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 3px;
    font-style: italic;
}

/* ============================================================
   CONSOLE D'EXPLOITATION — données de démonstration

   Des NOMBRES, jamais des contenus : le compte d'exploitation
   n'accède pas aux contenus pédagogiques (ADM-11).
   ============================================================ */
.demo-comptes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}
.demo-compte {
    background: var(--paper);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
}
.demo-nombre {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}
/* Le journal du seed : une trace d'exploitation, lisible sans SSH. */
.demo-journal {
    margin-top: 14px;
    max-height: 260px;
    overflow: auto;
    background: var(--paper-2);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--ink-soft);
}

/* ═══════════════════════════════════════════ LE FILM DE LA MÉTHODE
   Un explicatif animé, rendu par le navigateur (frontend/js/film-methode.js).

   Les animations vivent ICI et pas en JavaScript, pour une raison précise :
   c'est ce qui permet au bloc `prefers-reduced-motion` déjà présent plus haut
   dans cette feuille de les neutraliser toutes, sans que le module ait à le
   savoir. Une boucle d'animation en JS aurait dû réimplémenter ce respect à la
   main — et l'aurait oublié. */

.film-carte {
    margin-top: 20px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
}

/* ── L'affiche : le film est REPLIÉ par défaut ─────────────────────────── */
.film-affiche {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--primary-soft), var(--paper-2));
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.film-affiche:hover { background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); }

.film-affiche-play {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    padding-left: 4px;                 /* le triangle ▶ n'est pas centré optiquement */
    box-shadow: var(--shadow-sm);
}
.film-affiche[aria-expanded="true"] .film-affiche-play { background: var(--ink); }

.film-affiche-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.film-affiche-titre {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
}
.film-affiche-pitch { font-size: 13.5px; color: var(--ink-soft); }
.film-affiche-meta  { font-size: 12px; color: var(--ink-mute); }

/* ── Le lecteur ────────────────────────────────────────────────────────── */
.film-lecteur { padding: 16px 18px 18px; }
.film-lecteur:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }

.film-plateau {
    background: var(--paper-2);
    border-radius: 14px;
    overflow: hidden;
}
.film-scene { display: block; width: 100%; height: auto; }

.film-progress {
    height: 6px;
    border-radius: 99px;
    background: var(--line);
    margin: 12px 0 10px;
    overflow: hidden;
}
.film-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--primary);
    transition: width .12s linear;
}

/* Le sous-titre EST le contenu : il ne se cache pas, et il garde une hauteur
   fixe — sinon la page saute à chaque changement de scène. */
.film-legende {
    min-height: 4.6em;
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
}

.film-commandes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.film-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    color: inherit;
}
.film-btn:hover { border-color: var(--primary); }
.film-btn-play {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    min-width: 46px;
    justify-content: center;
}
.film-btn-voix.actif { background: var(--mint-soft); border-color: var(--mint); }
.film-compteur { font-size: 13px; color: var(--ink-mute); margin-left: 4px; }

.film-chapitres {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.film-chapitre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1.5px solid var(--line);
    border-radius: 99px;
    background: var(--paper);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.film-chapitre:hover { border-color: var(--primary); }
.film-chapitre.actif {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--ink);
    font-weight: 700;
}
.film-chapitre-num {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--line);
    font-size: 11px;
    font-weight: 700;
}
.film-chapitre.actif .film-chapitre-num { background: var(--primary); color: #fff; }

.film-pied { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; }

/* ── La typographie des scènes ─────────────────────────────────────────── */
.fm-titre  { font-family: var(--font-display); font-size: 26px; font-weight: 700; fill: var(--ink); }
.fm-sous   { font-size: 14px; fill: var(--ink-mute); }
.fm-label  { font-size: 14px; font-weight: 700; fill: var(--ink); }
.fm-valeur { font-size: 14px; font-weight: 700; fill: var(--ink-soft); opacity: 0; }
.fm-axe    { font-size: 12px; fill: var(--ink-mute); }
.fm-note   { font-size: 12.5px; fill: var(--ink-soft); }
.fm-emoji  { font-size: 24px; }
.fm-num    { font-size: 12px; font-weight: 700; fill: #fff; }
.fm-morale { font-size: 15px; font-weight: 700; fill: var(--ink); }
.fm-chrono { font-family: var(--font-display); font-size: 24px; font-weight: 700; fill: var(--ink); }

/* ── Les animations, déclenchées par `.joue` ───────────────────────────── */

/* Une barre se remplit depuis la gauche. `--fm-w` porte sa largeur finale :
   animer `width` directement empêcherait de partir de zéro sans la recalculer
   en JavaScript. */
.film-scene .fm-remplit { width: 0; }
.film-scene.joue .fm-remplit {
    animation: fmRemplir .9s cubic-bezier(.22,.9,.3,1) forwards;
    animation-delay: var(--fm-d, 0s);
}
@keyframes fmRemplir { to { width: var(--fm-w); } }

.film-scene.joue .fm-valeur {
    animation: fmParait .5s ease forwards;
    animation-delay: var(--fm-d, 0s);
}

/* Une courbe se trace. La longueur est inconnue à l'avance : `pathLength`
   n'étant pas fixé, on prend une valeur large et `stroke-dasharray` en
   pourcentage du tracé via une astuce simple — un dash plus long que le
   chemin. 2000 couvre toutes les scènes de ce film. */
.film-scene .fm-trace { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.film-scene.joue .fm-trace {
    animation: fmTracer 1.5s ease-out forwards;
    animation-delay: var(--fm-d, 0s);
}
@keyframes fmTracer { to { stroke-dashoffset: 0; } }

.film-scene .fm-parait { opacity: 0; }
.film-scene.joue .fm-parait {
    animation: fmParait .6s ease forwards;
    animation-delay: var(--fm-d, 0s);
}
@keyframes fmParait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.film-scene .fm-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.film-scene.joue .fm-pop {
    animation: fmPop .5s cubic-bezier(.2,1.3,.4,1) forwards;
    animation-delay: var(--fm-d, 0s);
}
@keyframes fmPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* Le cadran du chronomètre se remplit : même mécanique que l'anneau du
   pomodoro, un cercle dont on anime le tiret. */
.film-scene .fm-cadran { stroke-dasharray: 390; stroke-dashoffset: 390; }
.film-scene.joue .fm-cadran { animation: fmCadran 2.4s ease-out .4s forwards; }
@keyframes fmCadran { to { stroke-dashoffset: 60; } }

@media (max-width: 720px) {
    .film-affiche { padding: 14px; gap: 12px; }
    .film-affiche-titre { font-size: 17px; }
    .film-lecteur { padding: 12px; }
    .film-legende { font-size: 14px; min-height: 5.4em; }
    .fm-titre { font-size: 22px; }
}