/* =====================================================
   LectureMaline — Main Stylesheet
   Font: Syne (display) + DM Sans (body)
   Palette: #FF6B2C orange · #1A1A2E dark · #F5F0E8 cream
   ===================================================== */

:root {
    --orange:     #FF6B2C;
    --orange-lt:  #FF8C5A;
    --orange-dk:  #E0541A;
    --yellow:     #FFC94A;
    --dark:       #1A1A2E;
    --dark-2:     #16213E;
    --dark-card:  #242440;
    --cream:      #F5F0E8;
    --cream-2:    #EDE8DE;
    --text:       #2D2D3A;
    --text-muted: #7A7A95;
    --white:      #FFFFFF;
    --success:    #4CAF50;
    --error:      #EF5350;
    --radius:     16px;
    --radius-lg:  24px;
    --shadow:     0 4px 24px rgba(26,26,46,.10);
    --shadow-lg:  0 12px 48px rgba(26,26,46,.18);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3 { font-family: 'Syne', sans-serif; font-weight: 800; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
em { font-style: italic; color: var(--orange); }
strong { font-weight: 600; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- NAV ---- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem;
    height: 64px;
    background: rgba(245,240,232,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,107,44,.15);
}
.logo { display: flex; align-items: center; gap: .5rem; font-family: 'Syne', sans-serif; font-size: 1.2rem; color: var(--dark); text-decoration: none; }
.logo-icon { font-size: 1.4rem; }
.logo-text strong { color: var(--orange); }
.nav-links { display: flex; align-items: center; gap: .75rem; }
.nav-user { font-size: .9rem; color: var(--text-muted); }

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .75rem 1.5rem;
    border-radius: 50px;
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem;
    border: none; cursor: pointer; text-decoration: none;
    transition: all .2s ease;
    white-space: nowrap;
}
.btn--primary { background: var(--orange); color: var(--white); box-shadow: 0 4px 16px rgba(255,107,44,.35); }
.btn--primary:hover { background: var(--orange-dk); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,44,.45); text-decoration: none; color: white; }
.btn--ghost { background: transparent; color: var(--dark); border: 2px solid rgba(26,26,46,.2); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); text-decoration: none; }
.btn--large { padding: 1rem 2rem; font-size: 1.05rem; }
.btn--full { width: 100%; justify-content: center; }
.nav-btn { padding: .5rem 1.1rem; font-size: .88rem; }
.nav-btn--ghost { background: transparent; color: var(--text); border: 1.5px solid rgba(26,26,46,.2); }
.nav-btn--ghost:hover { color: var(--orange); border-color: var(--orange); text-decoration: none; }

.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 4px 16px rgba(255,107,44,.35); } 50% { box-shadow: 0 4px 32px rgba(255,107,44,.65); } }

/* ---- HERO ---- */
.hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
    padding: 5rem 4rem 6rem;
    min-height: calc(100vh - 64px);
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .4;
}
.blob--1 { width: 500px; height: 500px; background: #FF6B2C; top: -200px; right: -100px; }
.blob--2 { width: 300px; height: 300px; background: #FFC94A; bottom: 0; left: 30%; opacity: .3; }
.blob--3 { width: 200px; height: 200px; background: #4FC3F7; top: 40%; left: -50px; opacity: .25; }

.hero__content { position: relative; z-index: 1; }
.badge {
    display: inline-flex; align-items: center;
    background: var(--orange); color: white;
    padding: .35rem 1rem; border-radius: 50px;
    font-size: .85rem; font-weight: 700; font-family: 'Syne', sans-serif;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(255,107,44,.4);
}
.hero__title { margin-bottom: 1.25rem; color: var(--dark); }
.hero__subtitle { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 2rem; max-width: 480px; }
.hero__cta { display: flex; gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.btn-arrow { transition: transform .2s; }
.btn--primary:hover .btn-arrow { transform: translateX(4px); }
.hero__stats { display: flex; align-items: center; gap: 1.5rem; }
.stat { display: flex; flex-direction: column; }
.stat__num { font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--dark); }
.stat__label { font-size: .8rem; color: var(--text-muted); }
.stat__divider { width: 1px; height: 36px; background: rgba(26,26,46,.15); }

/* Phone mockup */
.hero__visual { position: relative; z-index: 1; display: flex; justify-content: center; }
.phone-mockup {
    width: 280px;
    background: var(--dark);
    border-radius: 36px;
    padding: 16px;
    box-shadow: 0 24px 80px rgba(26,26,46,.35), 0 0 0 1px rgba(255,255,255,.08);
    transform: rotate(2deg);
    transition: transform .3s;
}
.phone-mockup:hover { transform: rotate(0deg) scale(1.02); }
.phone-screen { background: var(--dark-2); border-radius: 24px; padding: 1.2rem; overflow: hidden; }
.mock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.mock-logo { font-size: .8rem; color: white; font-family: 'Syne', sans-serif; font-weight: 700; }
.mock-level { font-size: .75rem; color: var(--yellow); font-weight: 700; }
.mock-book-card { background: var(--dark-card); border-radius: 16px; padding: 1rem; margin-bottom: 1rem; border: 1px solid rgba(255,107,44,.3); }
.mock-book-cover { font-size: 2rem; text-align: center; margin-bottom: .5rem; }
.mock-book-title { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--orange); font-size: .95rem; text-align: center; }
.mock-book-author { font-size: .75rem; color: var(--text-muted); text-align: center; margin-bottom: .75rem; }
.mock-progress-bar { background: rgba(255,255,255,.1); border-radius: 50px; height: 4px; margin-bottom: .25rem; }
.mock-progress-fill { background: var(--orange); height: 100%; border-radius: 50px; }
.mock-progress-labels { display: flex; justify-content: space-between; font-size: .65rem; color: var(--text-muted); }
.mock-text-exercise { background: rgba(255,255,255,.05); border-radius: 10px; padding: .75rem; margin-bottom: .75rem; }
.mock-label { font-size: .7rem; color: var(--orange); font-weight: 600; margin-bottom: .4rem; }
.mock-text { font-size: .78rem; color: rgba(255,255,255,.85); line-height: 1.6; }
.mock-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 1px; vertical-align: middle; }
.mock-btn { width: 100%; background: var(--orange); color: white; border: none; border-radius: 10px; padding: .6rem; font-family: 'Syne', sans-serif; font-weight: 700; font-size: .85rem; cursor: pointer; }

/* ---- HOW IT WORKS ---- */
.how {
    padding: 6rem 4rem;
    background: var(--dark);
    color: white;
}
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { color: white; margin-bottom: .75rem; }
.section-header p { color: rgba(255,255,255,.6); font-size: 1.1rem; }
.section-tag {
    display: inline-block; background: rgba(255,107,44,.2); color: var(--orange);
    padding: .3rem .9rem; border-radius: 50px; font-size: .8rem; font-weight: 700;
    font-family: 'Syne', sans-serif; margin-bottom: .75rem; letter-spacing: .05em; text-transform: uppercase;
}
.steps { display: flex; align-items: center; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.step {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg); padding: 2rem 1.75rem;
    max-width: 280px; text-align: center; flex: 1; min-width: 220px;
    transition: transform .2s, background .2s;
}
.step:hover { transform: translateY(-4px); background: rgba(255,107,44,.1); border-color: rgba(255,107,44,.3); }
.step__number { font-size: .8rem; color: var(--orange); font-weight: 800; font-family: 'Syne', sans-serif; letter-spacing: .1em; margin-bottom: .5rem; }
.step__icon { font-size: 2.5rem; margin-bottom: 1rem; }
.step h3 { color: white; margin-bottom: .75rem; }
.step p { color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.6; }
.step__arrow { font-size: 1.5rem; color: rgba(255,107,44,.5); }

/* ---- EXPLAINER ---- */
.explainer {
    padding: 6rem 4rem;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: center;
    background: var(--cream-2);
}
.explainer__content .section-tag { margin-bottom: .75rem; }
.explainer__content h2 { color: var(--dark); margin-bottom: 1.25rem; }
.explainer__content p { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; }
.explainer__list { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.explainer__list li { display: flex; align-items: center; gap: .75rem; font-size: .95rem; }
.explainer__bullet { font-size: 1.2rem; }
.explainer__bullet--left { color: #4FC3F7; }
.explainer__bullet--right { color: var(--orange); }

.explainer__demo { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.demo-card {
    background: white; border-radius: var(--radius-lg); padding: 1.5rem;
    width: 100%; box-shadow: var(--shadow);
}
.demo-card--bihemi { background: var(--dark-card); }
.demo-label { font-size: .78rem; font-weight: 700; font-family: 'Syne', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .75rem; }
.demo-card--bihemi .demo-label { color: var(--orange); }
.demo-text { line-height: 1.8; font-size: .95rem; color: var(--text); }
.demo-text--bihemi { color: rgba(255,255,255,.85); }
.demo-arrow { font-size: 1.5rem; color: var(--orange); }

/* ---- CTA SECTION ---- */
.cta-section {
    padding: 6rem 4rem;
    background: var(--dark);
    text-align: center;
}
.cta-section__inner { max-width: 600px; margin: 0 auto; }
.cta-section h2 { color: white; margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,.6); margin-bottom: 2rem; font-size: 1.1rem; }

/* ---- FOOTER ---- */
.footer {
    padding: 1.5rem 2rem; text-align: center;
    background: var(--dark-2); color: rgba(255,255,255,.4);
    font-size: .85rem;
}

/* ---- AUTH PAGES ---- */
.auth-section {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 3rem 1rem;
    background: radial-gradient(ellipse at top, rgba(255,107,44,.08) 0%, transparent 60%);
}
.auth-card {
    background: white; border-radius: var(--radius-lg);
    padding: 2.5rem; width: 100%; max-width: 420px;
    box-shadow: var(--shadow-lg);
}
.auth-card__header { text-align: center; margin-bottom: 2rem; }
.auth-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.auth-card__header h1 { font-size: 1.8rem; margin-bottom: .5rem; }
.auth-card__header p { color: var(--text-muted); }

.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .88rem; font-weight: 600; color: var(--text); }
.form-group input {
    padding: .8rem 1rem;
    border: 2px solid #E5E0D8;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif; font-size: 1rem;
    transition: border-color .2s;
    background: var(--cream);
    width: 100%;
}
.form-group input:focus { outline: none; border-color: var(--orange); background: white; }
.input-with-toggle { position: relative; }
.input-with-toggle input { padding-right: 3rem; width: 100%; }
.toggle-password {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0;
}
.auth-footer { text-align: center; margin-top: 1.5rem; color: var(--text-muted); font-size: .9rem; }
.demo-hint {
    margin-top: 1.25rem; padding: .75rem 1rem;
    background: rgba(255,107,44,.06); border-radius: 10px;
    border: 1px dashed rgba(255,107,44,.3);
    font-size: .82rem; text-align: center; color: var(--text-muted);
}
.alert {
    padding: .75rem 1rem; border-radius: 10px;
    margin-bottom: 1rem; font-size: .9rem; font-weight: 500;
}
.alert--error { background: rgba(239,83,80,.1); color: var(--error); border: 1px solid rgba(239,83,80,.3); }

/* ---- DASHBOARD ---- */
.dashboard { padding: 2.5rem 3rem; max-width: 1000px; margin: 0 auto; width: 100%; }
.dashboard__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.dashboard__header h1 { font-size: 1.8rem; margin-bottom: .3rem; }
.dashboard__subtitle { color: var(--text-muted); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
    background: white; border-radius: var(--radius); padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow); border: 1px solid rgba(26,26,46,.06);
    transition: transform .2s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card__icon { font-size: 2rem; }
.stat-card__value { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--dark); }
.stat-card__label { font-size: .8rem; color: var(--text-muted); }
.stat-card--level { border-left: 4px solid var(--yellow); }
.stat-card--words { border-left: 4px solid var(--orange); }
.stat-card--streak { border-left: 4px solid #EF5350; }
.stat-card--sessions { border-left: 4px solid #4FC3F7; }

.progress-section { background: white; border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
.progress-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.progress-section__header h2 { font-size: 1.1rem; }
.progress-pct { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--orange); font-size: 1.2rem; }
.progress-bar-big { background: var(--cream-2); border-radius: 50px; height: 16px; overflow: hidden; margin-bottom: .5rem; }
.progress-bar-big__fill { background: linear-gradient(90deg, var(--orange), var(--yellow)); height: 100%; border-radius: 50px; transition: width 1s cubic-bezier(.4,0,.2,1); }
.progress-bar-labels { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-muted); }

.exercise-teaser {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
    border-radius: var(--radius-lg); padding: 2rem;
    display: flex; justify-content: space-between; align-items: center; gap: 2rem;
    box-shadow: var(--shadow-lg); margin-bottom: 2rem;
    border: 1px solid rgba(255,107,44,.2);
    flex-wrap: wrap;
}
.exercise-tag { display: inline-block; background: rgba(255,107,44,.2); color: var(--orange); padding: .25rem .8rem; border-radius: 50px; font-size: .78rem; font-weight: 700; font-family: 'Syne', sans-serif; margin-bottom: .75rem; text-transform: uppercase; }
.exercise-teaser__content h2 { color: white; margin-bottom: .5rem; font-size: 1.25rem; }
.exercise-teaser__content p { color: rgba(255,255,255,.6); margin-bottom: 1.25rem; font-size: .9rem; }
.mini-bihemi { font-size: 1rem; color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); border-radius: 10px; padding: .75rem 1rem; white-space: nowrap; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 1px; vertical-align: middle; }

.done-card {
    background: white; border-radius: var(--radius-lg); padding: 2.5rem;
    text-align: center; box-shadow: var(--shadow); margin-bottom: 2rem;
    border: 2px solid rgba(76,175,80,.2);
}
.done-card__icon { font-size: 3rem; margin-bottom: 1rem; }
.done-card h2 { margin-bottom: .5rem; }
.done-card p { color: var(--text-muted); margin-bottom: 1rem; }
.done-card__streak { font-weight: 600; color: var(--orange); }

.calendar-section {
    background: white; border-radius: var(--radius-lg);
    padding: 1.75rem; box-shadow: var(--shadow);
    overflow: hidden;
}
.calendar-section h2 { margin-bottom: 1.25rem; font-size: 1.1rem; }

/* Grille 14 jours — s'adapte automatiquement à la largeur */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: .35rem;
    min-width: 0;
}

.cal-day {
    display: flex; flex-direction: column; align-items: center;
    gap: .25rem; min-width: 0;
}
.cal-day__label {
    font-size: .62rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap; overflow: hidden;
}
.cal-day__dot {
    width: 100%; aspect-ratio: 1;
    max-width: 38px; min-width: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(.6rem, 1.8vw, .9rem);
    background: var(--cream-2); color: var(--text-muted); font-weight: 700;
    transition: transform .15s;
}
.cal-day__dot:hover { transform: scale(1.1); }
.cal-day--done .cal-day__dot {
    background: var(--orange); color: white;
    box-shadow: 0 2px 6px rgba(255,107,44,.3);
}
.cal-day--today .cal-day__dot {
    border: 2px solid var(--orange); color: var(--orange);
    background: rgba(255,107,44,.08);
}

/* ---- EXERCISE PAGE ---- */
.exercise-section { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem; }
.exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.back-btn { color: var(--text-muted); font-size: .9rem; text-decoration: none; }
.back-btn:hover { color: var(--orange); }
.exercise-header__info { display: flex; gap: .75rem; align-items: center; }
.exercise-badge { background: var(--orange); color: white; padding: .25rem .8rem; border-radius: 50px; font-size: .78rem; font-weight: 700; font-family: 'Syne', sans-serif; }
.exercise-day { color: var(--text-muted); font-size: .85rem; }
.exercise-timer { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--orange); font-size: .95rem; }
.exercise-progress-bar { background: var(--cream-2); border-radius: 50px; height: 6px; margin-bottom: 1.5rem; overflow: hidden; }
.exercise-progress-fill { background: var(--orange); height: 100%; border-radius: 50px; transition: width .5s; }
.exercise-book-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; background: white; border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); }
.book-cover-mini { font-size: 2rem; }
.book-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; }
.book-chapter { font-size: .85rem; color: var(--text-muted); }
.book-words { margin-left: auto; font-size: .82rem; color: var(--text-muted); background: var(--cream-2); padding: .3rem .7rem; border-radius: 50px; }

.reading-card { background: white; border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.reading-card--bihemi { background: var(--dark-card); }
.reading-phase-label { font-size: .78rem; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .08em; font-family: 'Syne', sans-serif; margin-bottom: 1rem; }
.reading-text { line-height: 1.9; font-size: 1rem; color: var(--text); margin-bottom: 1.75rem; }
.bihemi-text { color: rgba(255,255,255,.88) !important; }
.bihemi-legend { display: flex; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bihemi-legend span { font-size: .82rem; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: .4rem; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.bihemi-controls { display: flex; gap: 1rem; margin-top: 1.5rem; }

.memory-question { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .95rem; }
.memory-questions { display: flex; flex-direction: column; gap: 2rem; }
.memory-q p { font-weight: 600; margin-bottom: .75rem; font-size: 1rem; }
.memory-options { display: flex; flex-direction: column; gap: .5rem; }
.memory-btn {
    text-align: left; padding: .8rem 1.1rem;
    border: 2px solid #E5E0D8; border-radius: 12px;
    background: var(--cream); font-family: 'DM Sans', sans-serif; font-size: .9rem;
    cursor: pointer; transition: all .2s;
}
.memory-btn:hover { border-color: var(--orange); background: rgba(255,107,44,.05); }
.memory-btn.correct { border-color: var(--success); background: rgba(76,175,80,.1); color: #388E3C; }
.memory-btn.wrong { border-color: var(--error); background: rgba(239,83,80,.1); color: var(--error); }
.memory-btn:disabled { cursor: default; }

.results-card { background: white; border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; box-shadow: var(--shadow); }
.results-icon { font-size: 4rem; margin-bottom: 1rem; animation: pop .5s cubic-bezier(.4,0,.2,1); }
@keyframes pop { 0% { transform: scale(0); } 80% { transform: scale(1.15); } 100% { transform: scale(1); } }
.results-score { font-size: 1.2rem; font-weight: 700; color: var(--orange); margin-bottom: 2rem; font-family: 'Syne', sans-serif; }
.results-stats { display: flex; justify-content: center; gap: 2.5rem; margin-bottom: 2rem; }
.result-stat { display: flex; flex-direction: column; align-items: center; }
.result-stat__value { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--dark); }
.result-stat__label { font-size: .8rem; color: var(--text-muted); }

/* ---- PHASE LABELS ---- */
.phase-labels {
    display: flex; justify-content: space-between;
    gap: .4rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.phase-lbl {
    font-size: .75rem; font-weight: 600; font-family: 'Syne', sans-serif;
    color: var(--text-muted); padding: .3rem .6rem;
    border-radius: 50px; background: var(--cream-2);
    transition: all .3s; flex: 1; text-align: center;
}
.phase-lbl--active { background: var(--orange); color: white; }
.phase-lbl--done   { background: rgba(76,175,80,.15); color: #388E3C; }

/* ---- INTENSITY SLIDER ---- */
.intensity-control {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.intensity-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .9rem;
}
.intensity-header label {
    font-size: .88rem; color: rgba(255,255,255,.8); font-weight: 600;
    cursor: default;
}
.intensity-value {
    font-family: 'Syne', sans-serif; font-weight: 800;
    font-size: 1.15rem; min-width: 3.5rem; text-align: right;
    transition: color .2s;
}
.intensity-track {
    display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem;
}
.intensity-hint { font-size: .75rem; color: rgba(255,255,255,.45); white-space: nowrap; }

/* Custom range slider */
input[type="range"] {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 6px; border-radius: 50px;
    background: rgba(255,255,255,.12);
    outline: none; cursor: pointer;
    position: relative;
    background: linear-gradient(
        to right,
        var(--thumb-color, #4CAF50) 0%,
        var(--thumb-color, #4CAF50) var(--fill-pct, 44%),
        rgba(255,255,255,.15) var(--fill-pct, 44%),
        rgba(255,255,255,.15) 100%
    );
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--thumb-color, #4CAF50);
    box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 2px 8px rgba(0,0,0,.3);
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.4);
}
input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: var(--thumb-color, #4CAF50);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    cursor: pointer;
}

.intensity-presets { display: flex; gap: .5rem; flex-wrap: wrap; }
.preset-btn {
    flex: 1; min-width: 80px;
    padding: .45rem .6rem;
    background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 50px; color: rgba(255,255,255,.7);
    font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 500;
    cursor: pointer; transition: all .2s; white-space: nowrap;
}
.preset-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: white; }
.preset-btn.active { background: var(--orange); border-color: var(--orange); color: white; font-weight: 700; }

/* Bihemi shapes */
.bihemi-shape { font-size: .85em; vertical-align: middle; margin: 0 .5px; }

/* Ghost btn on dark bg */
.btn--bihemi-ghost { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.25); }
.btn--bihemi-ghost:hover { color: white; border-color: white; text-decoration: none; background: rgba(255,255,255,.08); }

/* ---- RESULTS BOOK ---- */
.results-book {
    font-size: 1.05rem; color: var(--text-muted); margin-bottom: .5rem;
    font-style: italic;
}
.results-book em { color: var(--orange); }

/* ---- ROADMAP ---- */
.exercise-roadmap {
    background: var(--cream); border-radius: var(--radius-lg);
    padding: 1.25rem; margin: 1.75rem 0;
}
.roadmap-title {
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
    margin-bottom: 1rem;
}
.roadmap-dots {
    display: flex; gap: .4rem; flex-wrap: nowrap;
    overflow-x: auto; padding-bottom: .25rem;
    margin-bottom: 1rem;
}
.roadmap-dot {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    min-width: 44px; cursor: default;
}
.roadmap-emoji {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    background: var(--cream-2); border: 2px solid transparent;
    transition: all .2s;
}
.roadmap-num { font-size: .68rem; color: var(--text-muted); font-weight: 700; }
.roadmap-dot.done .roadmap-emoji {
    background: rgba(76,175,80,.15); border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76,175,80,.15);
}
.roadmap-dot.current .roadmap-emoji {
    background: rgba(255,107,44,.12); border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(255,107,44,.2);
    transform: scale(1.12);
}
.roadmap-legend {
    display: flex; flex-direction: column; gap: .35rem;
    max-height: 180px; overflow-y: auto;
}
.roadmap-legend-item {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .8rem; color: var(--text-muted);
    padding: .3rem .5rem; border-radius: 8px;
}
.roadmap-legend-item.current {
    background: rgba(255,107,44,.08); color: var(--orange); font-weight: 600;
}
.roadmap-author { color: var(--text-muted); font-style: italic; font-size: .75rem; }

.hidden { display: none !important; }

/* ---- RESPONSIVE ---- */
/* ═══════════════════════════════════════════════════════
   RESPONSIVE — approche mobile-first
   Breakpoints : 480px · 600px · 768px · 900px · 1100px
   ═══════════════════════════════════════════════════════ */

/* ── Tablet large + desktop ── */
@media (max-width: 1100px) {
    .hero { padding: 4rem 3rem 5rem; gap: 3rem; }
    .explainer { padding: 5rem 3rem; gap: 3rem; }
    .how { padding: 5rem 3rem; }
    .dashboard { padding: 2rem; }
}

/* ── Tablet ── */
@media (max-width: 900px) {
    /* Hero */
    .hero { grid-template-columns: 1fr; padding: 3rem 2rem 4rem; min-height: auto; text-align: center; }
    .hero__visual { display: none; }
    .hero__cta { justify-content: center; flex-wrap: wrap; }
    .hero__stats { justify-content: center; }
    .hero__subtitle { max-width: 100%; }

    /* Explainer */
    .explainer { grid-template-columns: 1fr; padding: 4rem 2rem; gap: 2.5rem; }
    .explainer__demo { width: 100%; }

    /* How */
    .how { padding: 4rem 2rem; }
    .step__arrow { transform: rotate(90deg); }
    .steps { flex-direction: column; align-items: stretch; }
    .step { max-width: 100%; }

    /* CTA */
    .cta-section { padding: 4rem 2rem; }

    /* Nav */
    .navbar { padding: 0 1rem; }
    .nav-user { display: none; } /* masque le prénom sur tablette */

    /* Dashboard */
    .dashboard { padding: 1.5rem; }
    .dashboard__header { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Exercise */
    .exercise-section { padding: 1.5rem 1rem; }
    .results-stats { gap: 1.5rem; }
}

/* ── Mobile large ── */
@media (max-width: 768px) {
    /* Auth */
    .auth-section { padding: 2rem 1rem; }
    .auth-card { padding: 2rem 1.5rem; }

    /* Dashboard tabs */
    .dash-tabs { gap: .2rem; }
    .dash-tab { padding: .65rem .9rem; font-size: .82rem; }
    .dash-tab__count { font-size: .65rem; padding: .1rem .35rem; }

    /* Dashboard cards */
    .progress-section { padding: 1.25rem; }
    .exercise-teaser { flex-direction: column; gap: 1.25rem; }
    .exercise-teaser__preview { display: none; }
    .done-card { padding: 1.75rem; }
    .calendar-week { gap: .3rem; }

    /* My texts */
    .mytexts-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
    .text-card { flex-wrap: wrap; gap: .75rem; }
    .text-card__actions { width: 100%; justify-content: flex-end; }

    /* Import */
    .import-section { padding: 1.25rem 1rem; }
    .import-tabs { gap: .3rem; }
    .import-tab { font-size: .82rem; padding: .5rem .75rem; }

    /* Exercise page */
    .exercise-header { gap: .5rem; }
    .exercise-badge { font-size: .72rem; padding: .2rem .6rem; }
    .exercise-book-info { gap: .75rem; padding: .85rem 1rem; }
    .book-cover-mini { font-size: 1.6rem; }
    .book-title { font-size: 1rem; }
    .book-words { display: none; }
    .reading-card { padding: 1.5rem; }
    .phase-labels { gap: .25rem; }
    .phase-lbl { font-size: .7rem; padding: .25rem .4rem; }

    /* Intensity / speed controls */
    .intensity-control,
    .speed-control { padding: 1rem 1.1rem; }
    .intensity-header label,
    .intensity-header label { font-size: .82rem; }
    .intensity-presets,
    #speed-block .intensity-presets { gap: .3rem; flex-wrap: wrap; }
    .preset-btn { font-size: .75rem; padding: .38rem .5rem; min-width: 60px; }

    /* Mode toggle */
    .reading-mode-toggle { gap: .3rem; }
    .mode-btn { font-size: .82rem; padding: .5rem .7rem; }

    /* Alphabet legend */
    .alpha-grid { gap: .3rem .6rem; }
    .alpha-item { font-size: .8rem; }

    /* Teleprompter */
    .teleprompter-container { height: 260px; }
    .teleprompter-track { padding: 130px 1.25rem; }
    .teleprompter-text { font-size: 1rem; line-height: 1.9; }

    /* Bihemi controls */
    .bihemi-controls { flex-direction: column; gap: .75rem; }
    .bihemi-controls .btn { width: 100%; justify-content: center; }

    /* Results */
    .results-card { padding: 1.75rem 1.25rem; }
    .results-stats { gap: 1rem; }
    .result-stat__value { font-size: 1.25rem; }
    .roadmap-dots { gap: .3rem; }
    .roadmap-emoji { width: 30px; height: 30px; font-size: .9rem; }
    .roadmap-legend { display: none; } /* masqué sur mobile — trop chargé */
}

/* ── Mobile ── */
@media (max-width: 600px) {
    /* Global */
    body { font-size: .95rem; }
    h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); }

    /* Nav — hamburger-style minimal */
    .navbar { height: 56px; }
    .logo-text { font-size: 1.05rem; }
    .nav-btn--ghost { display: none; } /* garde seulement CTA principal */

    /* Hero */
    .hero { padding: 2.5rem 1.25rem 3rem; }
    .hero__stats { gap: 1rem; flex-wrap: wrap; justify-content: center; }
    .stat__num { font-size: 1.3rem; }
    .badge { font-size: .78rem; }
    .btn--large { padding: .875rem 1.5rem; font-size: .95rem; }

    /* Section tags */
    .section-tag { font-size: .72rem; }

    /* How */
    .step { padding: 1.5rem 1.25rem; }

    /* Auth */
    .auth-card { border-radius: var(--radius); padding: 1.75rem 1.25rem; }
    .auth-icon { font-size: 2rem; }
    .auth-card__header h1 { font-size: 1.5rem; }
    .demo-hint { font-size: .75rem; }

    /* Dashboard */
    .dashboard { padding: 1rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .stat-card { padding: 1rem; gap: .75rem; }
    .stat-card__icon { font-size: 1.6rem; }
    .stat-card__value { font-size: 1.2rem; }
    .progress-section { padding: 1rem; }
    .calendar-week { gap: .2rem; }
    .cal-day__label { font-size: .55rem; }

    /* Tabs */
    .dash-tabs { gap: .15rem; border-bottom-width: 1px; }
    .dash-tab { padding: .55rem .7rem; font-size: .78rem; }

    /* Exercise */
    .exercise-section { padding: 1rem .85rem; }
    .exercise-header { margin-bottom: 1rem; }
    .exercise-timer { font-size: .82rem; }
    .phase-labels { display: none; } /* masqué sur petits écrans */
    .exercise-progress-bar { margin-bottom: 1rem; }
    .reading-card { padding: 1.25rem; border-radius: var(--radius); }
    .reading-text { font-size: .95rem; line-height: 1.75; margin-bottom: 1.25rem; }

    /* Intensity / speed */
    .intensity-track { gap: .5rem; }
    .intensity-hint { font-size: .68rem; }
    .intensity-presets { gap: .25rem; }
    .preset-btn { font-size: .7rem; padding: .32rem .45rem; min-width: 55px; }

    /* Teleprompter */
    .teleprompter-container { height: 220px; border-radius: 10px; }
    .teleprompter-track { padding: 110px 1rem; }
    .teleprompter-text { font-size: .95rem; line-height: 1.8; }
    .teleprompter-reticle { left: 1rem; right: 1rem; }

    /* Scroll controls */
    .scroll-controls { gap: .5rem; }
    .scroll-ctrl-btn { padding: .45rem .9rem; font-size: .8rem; }

    /* Results */
    .results-card { padding: 1.5rem 1rem; }
    .results-icon { font-size: 3rem; }
    .results-score { font-size: 1.05rem; }
    .results-stats { gap: .75rem; }
    .result-stat__value { font-size: 1.1rem; }
    .exercise-roadmap { padding: 1rem; }
    .roadmap-dots { gap: .25rem; justify-content: center; }

    /* Memory test */
    .memory-btn { padding: .7rem .9rem; font-size: .88rem; }

    /* Import / my texts */
    .text-card { padding: 1rem; }
    .text-card__icon { font-size: 1.6rem; }
    .text-card__title { font-size: .9rem; }
    .import-section { padding: 1rem .85rem; }
    .import-header h1 { font-size: 1.4rem; }
    .dropzone { min-height: 160px; }
    .dropzone__icon { font-size: 2.2rem; }
    .dropzone__title { font-size: .9rem; }
    textarea { font-size: .9rem; }

    /* CTA footer */
    .cta-section { padding: 3rem 1.25rem; }
    .footer { font-size: .78rem; padding: 1.25rem 1rem; }
}

/* ── Très petit mobile (< 380px) ── */
@media (max-width: 380px) {
    .navbar { height: 52px; }
    .logo-text { font-size: .95rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .exercise-header { flex-wrap: wrap; gap: .4rem; }
    .exercise-header__info { flex: 1; }
    .exercise-timer { width: 100%; text-align: right; order: 3; }
    .intensity-presets { justify-content: center; }
    .preset-btn { flex: 1; min-width: 48px; text-align: center; }
    .scroll-controls { flex-direction: column; align-items: center; }
    .reading-mode-toggle { flex-direction: column; }
}

/* ═══════════════════════════════════════════
   DASHBOARD TABS
   ═══════════════════════════════════════════ */
.dash-tabs {
    display: flex; gap: .5rem; margin-bottom: 2rem;
    border-bottom: 2px solid var(--cream-2);
    padding-bottom: 0; flex-wrap: wrap;
}
.dash-tab {
    display: flex; align-items: center; gap: .4rem;
    padding: .75rem 1.25rem;
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: .9rem;
    color: var(--text-muted); text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; border-radius: 0;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}
.dash-tab:hover { color: var(--orange); text-decoration: none; }
.dash-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.dash-tab__count {
    background: var(--orange); color: white;
    font-size: .7rem; padding: .1rem .45rem;
    border-radius: 50px; font-weight: 800;
}

/* ═══════════════════════════════════════════
   TEXTS TAB
   ═══════════════════════════════════════════ */
.mytexts-tab { }
.mytexts-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.mytexts-header h2 { margin-bottom: .3rem; }
.mytexts-header p  { color: var(--text-muted); font-size: .9rem; }

.empty-state {
    text-align: center; padding: 4rem 2rem;
    background: white; border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 2px dashed var(--cream-2);
}
.empty-state__icon { font-size: 3.5rem; margin-bottom: 1rem; }
.empty-state h3    { margin-bottom: .5rem; }
.empty-state p     { color: var(--text-muted); margin-bottom: 1.5rem; }

.texts-grid { display: flex; flex-direction: column; gap: 1rem; }
.text-card {
    background: white; border-radius: var(--radius); padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow); border: 1px solid rgba(26,26,46,.06);
    transition: transform .2s, box-shadow .2s;
    flex-wrap: wrap;
}
.text-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.text-card__icon { font-size: 2rem; flex-shrink: 0; }
.text-card__info { flex: 1; min-width: 0; }
.text-card__title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-card__meta  { font-size: .8rem; color: var(--text-muted); margin-bottom: .5rem; }
.text-card__progress { display: flex; align-items: center; gap: .75rem; }
.text-card__progress-bar { flex: 1; background: var(--cream-2); border-radius: 50px; height: 6px; overflow: hidden; }
.text-card__progress-fill { background: linear-gradient(90deg, #AB47BC, #CE93D8); height: 100%; border-radius: 50px; transition: width .5s; }
.text-card__progress span { font-size: .78rem; color: #AB47BC; font-weight: 700; white-space: nowrap; }
.text-card__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.btn--danger { color: var(--error) !important; border-color: rgba(239,83,80,.3) !important; }
.btn--danger:hover { background: rgba(239,83,80,.08) !important; border-color: var(--error) !important; }

/* ═══════════════════════════════════════════
   IMPORT PAGE
   ═══════════════════════════════════════════ */
.import-section { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem; }
.import-header { margin-bottom: 2rem; }
.import-header h1 { font-size: 1.8rem; margin-bottom: .4rem; }
.import-header p  { color: var(--text-muted); }

.import-form { display: flex; flex-direction: column; gap: 1.5rem; }
.optional { font-weight: 400; color: var(--text-muted); font-size: .85em; }

.import-tabs {
    display: flex; gap: .5rem;
    background: var(--cream-2); border-radius: 12px; padding: .35rem;
}
.import-tab {
    flex: 1; padding: .6rem 1rem;
    border: none; border-radius: 8px;
    font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .88rem;
    color: var(--text-muted); background: transparent; cursor: pointer;
    transition: all .2s;
}
.import-tab.active { background: white; color: var(--orange); box-shadow: var(--shadow); }
.import-tab-content { }

/* Dropzone */
.dropzone {
    position: relative;
    border: 2.5px dashed #D4CFC6;
    border-radius: var(--radius-lg);
    background: white;
    min-height: 200px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    overflow: hidden;
}
.dropzone:hover { border-color: var(--orange); background: rgba(255,107,44,.02); }
.dropzone.dragover { border-color: var(--orange); background: rgba(255,107,44,.06); transform: scale(1.01); }
.dropzone.zone-error { border-color: var(--error); }
.dropzone__input {
    position: absolute; inset: 0; opacity: 0;
    cursor: pointer; width: 100%; height: 100%;
    z-index: 0;
}
.dropzone__content,
.dropzone__preview {
    pointer-events: none; text-align: center;
    padding: 2rem; z-index: 1;
}
.dropzone__icon  { font-size: 3rem; margin-bottom: .75rem; }
.dropzone__title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: .3rem; }
.dropzone__subtitle { color: var(--text-muted); font-size: .9rem; }
.dropzone__browse { color: var(--orange); text-decoration: underline; }
.dropzone__formats { font-size: .78rem; color: var(--text-muted); margin-top: .5rem; background: var(--cream-2); padding: .25rem .75rem; border-radius: 50px; display: inline-block; }

.dropzone__preview { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.dropzone__preview-icon { font-size: 2.5rem; }
.dropzone__preview-name { font-weight: 700; font-size: .95rem; word-break: break-all; }
.dropzone__preview-size { font-size: .82rem; color: var(--text-muted); }
.dropzone__remove {
    pointer-events: all; margin-top: .5rem;
    background: rgba(239,83,80,.1); color: var(--error); border: 1px solid rgba(239,83,80,.3);
    border-radius: 50px; padding: .3rem .9rem; font-size: .82rem; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}
.dropzone__remove:hover { background: rgba(239,83,80,.2); }

/* Paste textarea */
textarea {
    width: 100%;
    padding: .9rem 1rem;
    border: 2px solid #E5E0D8;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif; font-size: .95rem;
    line-height: 1.7; resize: vertical;
    background: var(--cream);
    transition: border-color .2s;
}
textarea:focus { outline: none; border-color: var(--orange); background: white; }
.paste-counter {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .82rem; margin-top: .35rem;
}
.paste-hint { color: var(--text-muted); }

/* Tips */
.import-tips {
    margin-top: 2rem;
    background: white; border-radius: var(--radius-lg);
    padding: 1.5rem; box-shadow: var(--shadow);
    border-left: 4px solid var(--yellow);
}
.import-tips h3 { font-size: 1rem; margin-bottom: .75rem; }
.import-tips ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.import-tips li { font-size: .88rem; color: var(--text-muted); padding-left: 1rem; position: relative; line-height: 1.5; }
.import-tips li::before { content: '→'; position: absolute; left: 0; color: var(--orange); }

/* Session progress */
.session-progress-wrap { text-align: left; margin: 1rem 0; }
.session-progress-label { font-size: .82rem; color: var(--text-muted); margin-bottom: .25rem; }



/* ═══════════════════════════════════════════
   MODE DE LECTURE (toggle normal / défilement)
   ═══════════════════════════════════════════ */
.reading-mode-toggle {
    display: flex; gap: .4rem;
    background: rgba(255,255,255,.07);
    border-radius: 12px; padding: .35rem;
    margin-bottom: 1.25rem;
}
.mode-btn {
    flex: 1; padding: .55rem .9rem;
    border: none; border-radius: 8px;
    font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .88rem;
    color: rgba(255,255,255,.55); background: transparent; cursor: pointer;
    transition: all .2s; white-space: nowrap;
}
.mode-btn:hover { color: rgba(255,255,255,.85); }
.mode-btn--active {
    background: var(--orange); color: white;
    box-shadow: 0 2px 10px rgba(255,107,44,.4);
}

/* speed control (same style as intensity) */
.speed-control {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.scroll-hint {
    font-size: .78rem; color: rgba(255,255,255,.4);
    margin-top: .6rem; text-align: center;
}

/* ═══════════════════════════════════════════
   MARQUEE / DÉFILEMENT
   ═══════════════════════════════════════════ */
.marquee-container {
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 1.5rem 0;
    margin-bottom: 1rem;
    cursor: pointer;
    position: relative;
    min-height: 80px;
    display: flex; align-items: center;
}
.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
    pointer-events: none;
}
.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(36,36,64,1), transparent);
}
.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(36,36,64,1), transparent);
}
.marquee-track {
    display: inline-flex; align-items: center;
    white-space: nowrap;
    will-change: transform;
    padding-left: 100%; /* start off-screen right */
}
.marquee-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255,255,255,.9);
    letter-spacing: .01em;
    padding-right: 4rem; /* gap between loops */
}
.marquee-text .bihemi-shape {
    font-size: 1em;
}

/* Pause overlay indicator */
.marquee-container.paused::after {
    content: '⏸';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    background: rgba(0,0,0,.35);
    pointer-events: none;
    border-radius: 14px;
}

/* Scroll controls */
.scroll-controls {
    display: flex; gap: .75rem; justify-content: center;
    margin-bottom: 1rem;
}
.scroll-ctrl-btn {
    padding: .5rem 1.2rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px; color: rgba(255,255,255,.8);
    font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .88rem;
    cursor: pointer; transition: all .2s;
}
.scroll-ctrl-btn:hover { background: rgba(255,255,255,.2); color: white; }

/* ═══════════════════════════════════════════
   ALPHABET VISUEL FIXE
   ═══════════════════════════════════════════ */
.alphabet-legend {
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: .75rem 1rem;
    margin-bottom: 1.1rem;
}
.alpha-title {
    font-size: .75rem; font-weight: 700; font-family: 'Syne', sans-serif;
    text-transform: uppercase; letter-spacing: .07em;
    color: rgba(255,255,255,.45); margin-bottom: .6rem;
}
.alpha-grid {
    display: flex; flex-wrap: wrap; gap: .4rem .9rem;
}
.alpha-item {
    font-size: .85rem; color: rgba(255,255,255,.75);
    display: flex; align-items: center; gap: .35rem;
    white-space: nowrap;
}
.alpha-item span:first-child {
    font-size: 1rem; font-weight: 700;
}

/* ═══════════════════════════════════════════
   TÉLÉPROMPTEUR VERTICAL
   ═══════════════════════════════════════════ */
.teleprompter-container {
    position: relative;
    height: 320px;           /* fenêtre de lecture visible */
    overflow: hidden;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    margin-bottom: 1rem;
    cursor: pointer;
}

/* Dégradés haut/bas pour effet de fondu */
.teleprompter-container::before,
.teleprompter-container::after {
    content: '';
    position: absolute; left: 0; right: 0; height: 72px; z-index: 2;
    pointer-events: none;
}
.teleprompter-container::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(36,36,64,1) 0%, transparent 100%);
}
.teleprompter-container::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(36,36,64,1) 0%, transparent 100%);
}

/* Ligne de lecture (repère horizontal fixe au centre) */
.teleprompter-reticle {
    position: absolute;
    top: 50%; left: 1.5rem; right: 1.5rem;
    height: 2px;
    background: rgba(255,107,44,.35);
    border-radius: 2px;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255,107,44,.3);
}

/* Le bloc de texte qui se déplace */
.teleprompter-track {
    padding: 160px 2rem 160px; /* espace avant/après pour centrer la lecture */
    will-change: transform;
    transition: none;
}

.teleprompter-text {
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(255,255,255,.9);
    white-space: pre-wrap;    /* respecte les sauts de ligne / paragraphes */
    word-break: break-word;
}

.teleprompter-text .bihemi-shape {
    font-size: 1em;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════
   MOBILE — safe area (iPhone encoche/Dynamic Island)
   et améliorations tactiles
   ═══════════════════════════════════════════ */

/* Navbar respecte l'encoche */
.navbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* Footer au-dessus de la barre home iOS */
.footer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Zones tactiles minimum 44px (recommandation Apple/Google) */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-btn, .memory-btn, .preset-btn,
    .scroll-ctrl-btn, .mode-btn, .import-tab,
    .dash-tab, .toggle-password {
        min-height: 44px;
    }
    /* Pas de hover sur touch */
    .stat-card:hover    { transform: none; }
    .step:hover         { transform: none; }
    .text-card:hover    { transform: none; }
    .phone-mockup:hover { transform: rotate(2deg) scale(1); }

    /* Slider plus grand sur touch */
    input[type="range"] { height: 8px; }
    input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
    input[type="range"]::-moz-range-thumb     { width: 28px; height: 28px; }

    /* Téléprompteur : tap pour pause */
    .teleprompter-container { cursor: default; }
}

/* ====================================================
   EXTENSIONS — Tous les composants ajoutés au projet
   ==================================================== */

/* ── Utilitaires ─────────────────────────────────── */
.hidden { display: none !important; }
.exercise-phase { animation: fadeInUp .3s ease; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Flash messages ──────────────────────────────── */
.flash-success {
    padding: .875rem 1rem; border-radius: var(--radius);
    font-size: .875rem; margin-bottom: 1rem;
    background: rgba(76,175,80,.1); border: 1px solid rgba(76,175,80,.3);
    color: #2e7d32; animation: flashIn .3s ease;
    display: flex; align-items: flex-start; gap: .6rem;
}
.flash-error {
    padding: .875rem 1rem; border-radius: var(--radius);
    font-size: .875rem; margin-bottom: 1rem;
    background: rgba(239,83,80,.08); border: 1px solid rgba(239,83,80,.3);
    color: var(--error); animation: flashIn .3s ease;
    display: flex; align-items: flex-start; gap: .6rem;
}
.flash-info {
    padding: .875rem 1rem; border-radius: var(--radius);
    font-size: .875rem; margin-bottom: 1rem;
    background: rgba(255,107,44,.08); border: 1px solid rgba(255,107,44,.25);
    color: var(--orange); animation: flashIn .3s ease;
    display: flex; align-items: flex-start; gap: .6rem;
}
.flash-warning {
    padding: .875rem 1rem; border-radius: var(--radius);
    font-size: .875rem; margin-bottom: 1rem;
    background: rgba(255,193,7,.08); border: 1px solid rgba(255,193,7,.3);
    color: #f59e0b; animation: flashIn .3s ease;
    display: flex; align-items: flex-start; gap: .6rem;
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Navbar — pages dynamiques + hamburger ───────── */
.logo-text strong { color: var(--orange); }
.nav-pages { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.nav-link {
    padding: .4rem .75rem; border-radius: 50px;
    font-size: .88rem; color: var(--text); text-decoration: none;
    transition: color .2s, background .2s; white-space: nowrap;
}
.nav-link:hover { color: var(--orange); background: rgba(255,107,44,.07); text-decoration: none; }
.nav-link--active { color: var(--orange); background: rgba(255,107,44,.1); font-weight: 600; }
.nav-divider {
    display: inline-block; width: 1px; height: 20px;
    background: rgba(26,26,46,.15); margin: 0 .35rem; vertical-align: middle; flex-shrink: 0;
}
.nav-btn--active {
    background: rgba(255,107,44,.1) !important;
    color: var(--orange) !important;
    border-color: rgba(255,107,44,.3) !important;
}
/* Hamburger mobile */
.navbar__burger {
    display: none; flex-direction: column; justify-content: space-between;
    width: 26px; height: 18px;
    background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
.navbar__burger span { display: block; height: 2px; background: var(--dark); border-radius: 2px; transition: .25s; }
/* Footer liens */
.footer__nav {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .25rem 1rem; margin-bottom: .75rem;
}
.footer__nav a { font-size: .82rem; color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; }
.footer__nav a:hover { color: var(--orange); }

/* ── Admin back-office ───────────────────────────── */
.admin-wrap { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
.admin-card {
    background: white; border-radius: var(--radius-lg);
    padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table th {
    text-align: left; padding: .75rem 1rem;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); border-bottom: 2px solid var(--cream-2);
    font-family: 'Syne', sans-serif;
}
.admin-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--cream-2); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,107,44,.025); }
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 50px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.badge-admin { background: rgba(255,107,44,.12); color: var(--orange); }
.badge-user  { background: rgba(76,175,80,.12);  color: var(--success); }
.btn--sm { padding: .4rem .9rem !important; font-size: .82rem !important; }

/* ── Profil ──────────────────────────────────────── */
.strength-bar { height: 4px; background: var(--cream-2); border-radius: 2px; overflow: hidden; margin: 6px 0 4px; }
.strength-bar__fill { height: 100%; border-radius: 2px; transition: width .25s, background .25s; }

/* ── Pages d'erreur ──────────────────────────────── */
.error-page { text-align: center; padding: 5rem 2rem; }
.error-page h1 { font-size: 6rem; color: var(--orange); margin: 0; font-family: 'Syne', sans-serif; }
.error-page p { color: var(--text-muted); margin: 1rem 0 2rem; }

/* ── Page dynamique ──────────────────────────────── */
.dynamic-page { max-width: 720px; margin: 0 auto; padding: 3rem 1rem; }
.dynamic-page h2 { margin: 1.5rem 0 .75rem; }
.dynamic-page p  { line-height: 1.8; margin-bottom: 1rem; color: var(--text); }

/* ── text-card__pct (alias) ──────────────────────── */
.text-card__pct { font-size: .78rem; color: #AB47BC; font-weight: 700; white-space: nowrap; }

/* ── Question block (admin exercices) ────────────── */
.question-block {
    background: var(--cream-2); border-radius: var(--radius);
    padding: 1.25rem; margin-bottom: 1rem;
    border: 1px solid rgba(0,0,0,.06);
    transition: opacity .2s, transform .2s;
}
.tbtn {
    padding: 4px 9px; background: var(--cream); border: 1px solid rgba(0,0,0,.12);
    border-radius: 5px; cursor: pointer; font-family: inherit; font-size: .82rem;
    transition: .15s; color: var(--text);
}
.tbtn:hover { background: var(--orange); color: white; border-color: var(--orange); }

/* ── Phase bihémisphérique — nouveau design ──────── */
.reading-card--bihemi { background: var(--dark-card); color: rgba(255,255,255,.88); }
.bihemi-header { margin-bottom: 1.5rem; }
.bihemi-subtitle { font-size: .85rem; color: rgba(255,255,255,.5); margin-top: .2rem; }
.bihemi-section { margin-bottom: 1.25rem; }
.bihemi-section-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--orange); margin-bottom: .6rem;
    font-family: 'Syne', sans-serif;
}

/* ── Mode toggle (3 boutons cards) ──────────────── */
.reading-mode-toggle {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .5rem; margin-bottom: 0;
}
.mode-btn {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .8rem .5rem;
    border: 2px solid rgba(255,255,255,.1);
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
    cursor: pointer; transition: all .2s;
    color: rgba(255,255,255,.55);
    font-family: 'DM Sans', sans-serif; line-height: 1.2;
}
.mode-btn:hover { border-color: rgba(255,107,44,.4); background: rgba(255,107,44,.06); color: rgba(255,255,255,.85); }
.mode-btn--active { border-color: var(--orange); background: rgba(255,107,44,.15); color: white; box-shadow: 0 0 0 3px rgba(255,107,44,.2); }
.mode-icon { font-size: 1.4rem; line-height: 1; }
.mode-text { font-weight: 700; font-size: .85rem; font-family: 'Syne', sans-serif; }
.mode-desc { font-size: .68rem; color: rgba(255,255,255,.4); }
.mode-btn--active .mode-desc { color: rgba(255,255,255,.7); }

/* ── Intensité / vitesse ─────────────────────────── */
.intensity-control,
.speed-control {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius); padding: 1rem 1.25rem;
}

/* ── Alphabet accordéon ──────────────────────────── */
.alphabet-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: .65rem .9rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius); color: rgba(255,255,255,.7);
    font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: all .2s; text-align: left;
}
.alphabet-toggle:hover { border-color: rgba(255,107,44,.35); color: white; }
.alphabet-toggle-arrow { font-size: .7rem; color: rgba(255,255,255,.4); transition: transform .2s; }
.alphabet-panel {
    margin-top: .5rem; padding: 1rem;
    background: rgba(0,0,0,.2); border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.07);
}
.alpha-legend-intro { font-size: .78rem; color: rgba(255,255,255,.45); margin-bottom: .9rem; font-style: italic; }
.alpha-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.alpha-group-label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--orange); margin-bottom: .35rem; font-family: 'Syne', sans-serif;
}
.alpha-group-items { display: flex; flex-direction: column; gap: .2rem; }
.alpha-group-items span { font-size: .8rem; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: .4rem; }
.alpha-group-items em { font-style: normal; font-size: .7rem; color: rgba(255,255,255,.35); }

/* ── Pictogrammes bihémi ─────────────────────────── */
.bihemi-pic {
    display: inline-block; vertical-align: middle;
    margin: 0 2px; position: relative; top: -1px;
}
.bihemi-emoji {
    font-size: .85em; vertical-align: middle; line-height: 1;
    margin: 0 1px; position: relative; top: -1px;
}
img.bihemi-pic { width: 16px; height: 16px; }

/* ── Actions finales ─────────────────────────────── */
.bihemi-controls {
    display: flex; gap: .75rem; margin-top: 1.5rem;
    padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.08);
}
.btn--bihemi-ghost { color: rgba(255,255,255,.65) !important; border-color: rgba(255,255,255,.2) !important; }
.btn--bihemi-ghost:hover { color: white !important; border-color: rgba(255,255,255,.45) !important; background: rgba(255,255,255,.06) !important; text-decoration: none; }

/* ── Contrôles scroll / marquee ──────────────────── */
.scroll-controls, .marquee-controls-row {
    display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap;
}
.scroll-ctrl-btn {
    padding: .45rem 1rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px; background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.7); font-family: 'DM Sans', sans-serif;
    font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s;
    flex: 1; text-align: center;
}
.scroll-ctrl-btn:hover { border-color: rgba(255,107,44,.4); background: rgba(255,107,44,.1); color: white; }
.scroll-ctrl-btn--primary { border-color: var(--orange) !important; background: rgba(255,107,44,.2) !important; color: white !important; }

/* ── Bande défilante horizontale ─────────────────── */
.marquee-bihemi-container {
    width: 100%; overflow: hidden;
    border: 6px solid #1A1A2E; border-radius: 8px;
    background: #16213E;
    box-shadow: 0 4px 20px rgba(0,0,0,.4), inset 0 0 20px rgba(0,0,0,.3);
    cursor: pointer; position: relative;
    height: 68px; display: flex; align-items: center;
}
.marquee-bihemi-container::before,
.marquee-bihemi-container::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 50px; z-index: 2; pointer-events: none;
}
.marquee-bihemi-container::before { left: 0;  background: linear-gradient(to right, #16213E, transparent); }
.marquee-bihemi-container::after  { right: 0; background: linear-gradient(to left,  #16213E, transparent); }
.marquee-bihemi-track {
    display: inline-block; white-space: nowrap;
    padding: 0 1rem; font-size: 1.3rem; line-height: 1;
    color: rgba(255,255,255,.95); font-family: 'DM Sans', sans-serif;
    letter-spacing: .025em; will-change: transform; position: relative; z-index: 1;
}
.marquee-bihemi-track .bihemi-pic,
.marquee-bihemi-track .bihemi-emoji { width: 20px; height: 20px; font-size: 1.1em; top: -2px; }

/* ── Écran de lancement marquee ──────────────────── */
.marquee-launch {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 1.5rem;
    background: rgba(0,0,0,.2); border: 1px dashed rgba(255,107,44,.3);
    border-radius: var(--radius-lg); text-align: center;
}
.marquee-launch-preview {
    font-size: 1rem; color: rgba(255,255,255,.6);
    background: rgba(0,0,0,.2); padding: .6rem 1.25rem;
    border-radius: 50px; font-style: italic; line-height: 1.6;
}
.marquee-launch-btn {
    width: 100%; max-width: 320px;
    font-size: 1.05rem !important; padding: 1rem 1.5rem !important;
    box-shadow: 0 4px 20px rgba(255,107,44,.4) !important;
    animation: pulse 2s infinite;
}
.marquee-launch-hint { font-size: .75rem; color: rgba(255,255,255,.35); margin: 0; line-height: 1.5; }
.marquee-running { width: 100%; }

/* ── Navbar responsive ───────────────────────────── */
@media (max-width: 768px) {
    .navbar__burger { display: flex; }
    .navbar__menu {
        display: none; position: absolute; top: 64px; left: 0; right: 0;
        background: var(--cream); border-top: 1px solid rgba(255,107,44,.12);
        border-bottom: 1px solid rgba(255,107,44,.12);
        padding: 1rem 1.5rem; flex-direction: column; align-items: flex-start;
        gap: .5rem; box-shadow: 0 8px 24px rgba(26,26,46,.1); z-index: 99;
    }
    .navbar__menu.navbar__menu--open { display: flex; }
    .nav-pages { flex-direction: column; align-items: flex-start; width: 100%; }
    .nav-link { width: 100%; padding: .6rem .75rem; }
    .nav-divider { width: 100%; height: 1px; margin: .25rem 0; }
    .nav-btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── Mode toggle responsive ──────────────────────── */
@media (max-width: 640px) {
    .mode-desc { display: none; }
    .mode-btn { padding: .65rem .3rem; }
    .mode-icon { font-size: 1.2rem; }
    .mode-text { font-size: .78rem; }
    .bihemi-controls { flex-direction: column; }
    .bihemi-controls .btn { width: 100%; justify-content: center; }
    .marquee-bihemi-container { height: 58px; }
    .marquee-bihemi-track { font-size: 1.1rem; }
    .marquee-launch { padding: 1.25rem 1rem; }
    .marquee-launch-btn { font-size: .95rem !important; }
    .alpha-grid-new { grid-template-columns: repeat(2, 1fr); }
    .admin-wrap { padding: 1rem .75rem; }
    .admin-table th, .admin-table td { padding: .6rem .75rem; font-size: .8rem; }
}

@media (max-width: 380px) {
    .reading-mode-toggle { grid-template-columns: 1fr; }
    .mode-btn { flex-direction: row; justify-content: flex-start; gap: .6rem; padding: .6rem .8rem; }
    .mode-desc { display: block; }
    .alpha-grid-new { grid-template-columns: 1fr; }
    .navbar__burger { display: flex; }
}

/* ── Classes résiduelles manquantes ──────────────── */
.alpha-group { }
.badge-role { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.bihemi-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 1px; vertical-align: middle; }
.btn-primary { background: var(--orange); color: white; padding: .75rem 1.5rem; border-radius: 50px; border: none; cursor: pointer; font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem; text-decoration: none; display: inline-flex; align-items: center; }
.card { background: white; border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow); }
.demo-text--normal { line-height: 1.8; font-size: .95rem; color: var(--text); }
.exercise-teaser__content { flex: 1; }
.exercise-teaser__content h2 { color: white; margin-bottom: .5rem; font-size: 1.25rem; }
.exercise-teaser__content p  { color: rgba(255,255,255,.6); margin-bottom: 1.25rem; font-size: .9rem; }
.explainer__content { }
.stat-card__info { display: flex; flex-direction: column; }
.stat-lbl { font-size: .8rem; color: var(--text-muted); }
.stat-val  { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--dark); }
.stats     { display: flex; align-items: center; gap: 1.5rem; }
.stats-tab { }
.subtitle  { color: var(--text-muted); font-size: .95rem; margin-bottom: 1.5rem; }
.text-card__done { color: var(--success); font-weight: 600; font-size: .88rem; }

/* ====================================================
   QUESTION BLOCK — Admin exercices
   ==================================================== */

.question-block {
    background: var(--cream-2);
    border: 1.5px solid rgba(0,0,0,.08);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: .75rem;
    transition: box-shadow .2s;
}
.question-block:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.qblock-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem;
}
.qblock-title {
    font-size: .875rem; color: var(--dark); font-family: 'Syne', sans-serif;
}
.qblock-remove {
    border: none; background: none; cursor: pointer; color: var(--error);
    font-size: .8rem; padding: 4px 10px; border-radius: 6px; transition: .15s;
}
.qblock-remove:hover { background: rgba(239,83,80,.1); }

.qblock-field { margin-bottom: 1rem; }
.qblock-field label {
    display: block; font-size: .82rem; font-weight: 600;
    color: var(--text); margin-bottom: .3rem;
}
.qblock-input {
    width: 100%; padding: .7rem .9rem;
    border: 2px solid #E5E0D8; border-radius: 10px;
    font-family: inherit; font-size: .9rem;
    background: white; outline: none; transition: border-color .2s;
}
.qblock-input:focus { border-color: var(--orange); }

.qblock-answers {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    margin-bottom: .75rem;
}
.answer-row {
    display: flex; align-items: center; gap: .5rem;
    background: white; border: 2px solid rgba(0,0,0,.1);
    border-radius: 10px; padding: .55rem .75rem;
    cursor: pointer; transition: all .15s; position: relative;
}
.answer-row:hover { border-color: rgba(76,175,80,.4); }
.answer-row--correct {
    background: rgba(76,175,80,.07) !important;
    border-color: var(--success) !important;
}
.answer-row input[type="radio"] {
    accent-color: var(--success); flex-shrink: 0;
    width: 16px; height: 16px; cursor: pointer;
}
.answer-input {
    border: none; background: transparent; outline: none;
    font-family: inherit; font-size: .85rem; width: 100%; cursor: text;
    color: var(--text);
}
.answer-check {
    font-size: .75rem; color: var(--success);
    opacity: 0; transition: opacity .15s; flex-shrink: 0;
}
.answer-row--correct .answer-check { opacity: 1; }

.qblock-hint {
    font-size: .72rem; color: var(--text-muted); line-height: 1.4;
}

@media (max-width: 600px) {
    .qblock-answers { grid-template-columns: 1fr; }
}

/* ====================================================
   RGPD — Bannière cookies, captcha, consentement
   ==================================================== */

/* ── Bannière cookies ────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 720px;
    background: var(--dark);
    color: rgba(255,255,255,.9);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    z-index: 9999;
    transition: opacity .3s, transform .3s;
    border: 1px solid rgba(255,255,255,.1);
}
.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.cookie-banner__text {
    flex: 1;
    min-width: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255,255,255,.8);
}
.cookie-banner__text strong { color: white; }
.cookie-banner__text a { color: var(--orange); text-decoration: underline; }
.cookie-banner__actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}
.cookie-btn {
    padding: .5rem 1.1rem;
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    text-decoration: none;
}
.cookie-btn--accept {
    background: var(--orange);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(255,107,44,.4);
}
.cookie-btn--accept:hover { background: var(--orange-dk); }
.cookie-btn--info {
    background: transparent;
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
}
.cookie-btn--info:hover { color: white; border-color: rgba(255,255,255,.5); text-decoration: none; }

/* ── Captcha mathématique ────────────────────────── */
.captcha-group { }
.captcha-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.captcha-question {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--dark);
    background: var(--cream-2);
    padding: .5rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--cream-2);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .05em;
}
.captcha-wrap input[type="number"] {
    width: 100px;
    padding: .75rem .9rem;
    border: 2px solid #E5E0D8;
    border-radius: 12px;
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    background: var(--cream);
    outline: none;
    transition: border-color .2s;
    -moz-appearance: textfield;
}
.captcha-wrap input[type="number"]:focus { border-color: var(--orange); background: white; }
.captcha-wrap input[type="number"]::-webkit-inner-spin-button,
.captcha-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.captcha-hint {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .35rem;
}

/* ── Consentement RGPD ───────────────────────────── */
.rgpd-consent {
    background: rgba(255,107,44,.04);
    border: 1.5px solid rgba(255,107,44,.2);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}
.rgpd-consent__label {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--text);
}
.rgpd-consent__label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--orange);
    cursor: pointer;
}
.rgpd-consent__label a { color: var(--orange); text-decoration: underline; }
.rgpd-consent__label a:hover { color: var(--orange-dk); }

/* ── Footer legal ────────────────────────────────── */
.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .35rem .75rem;
    margin-bottom: .5rem;
    font-size: .8rem;
}
.footer__legal a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.footer__legal a:hover { color: var(--orange); }
.footer__legal span { color: rgba(255,255,255,.25); }

/* ── Responsive bannière ─────────────────────────── */
@media (max-width: 600px) {
    .cookie-banner {
        bottom: 0;
        left: 0; right: 0;
        transform: none;
        width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
    }
    .cookie-banner__inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .cookie-banner__actions { width: 100%; }
    .cookie-btn { flex: 1; text-align: center; justify-content: center; }
    .captcha-wrap { flex-wrap: wrap; }
    .captcha-question { font-size: 1.1rem; }
}

/* ── Profil — zone danger RGPD ───────────────────── */
.rgpd-danger-zone {
    border: 1.5px solid rgba(239,83,80,.25) !important;
    background: rgba(239,83,80,.02) !important;
}
.danger-details summary {
    cursor: pointer;
    font-size: .875rem;
    color: var(--error);
    font-weight: 600;
    padding: .5rem 0;
    user-select: none;
    list-style: none;
}
.danger-details summary::-webkit-details-marker { display: none; }
.danger-details summary::before { content: '▶ '; font-size: .7rem; }
.danger-details[open] summary::before { content: '▼ '; }

/* ====================================================
   PAGE DYNAMIQUE — Layout + navigation RGPD
   ==================================================== */

.dynamic-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* ── Navigation haut ─────────────────────────────── */
.dynamic-page__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.dynamic-page__back {
    font-size: .875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .2s;
    flex-shrink: 0;
}
.dynamic-page__back:hover { color: var(--orange); text-decoration: none; }

/* Onglets navigation RGPD */
.rgpd-nav {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}
.rgpd-nav__link {
    padding: .35rem .8rem;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    color: var(--text-muted);
    background: var(--cream-2);
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.rgpd-nav__link:hover { background: rgba(255,107,44,.08); color: var(--orange); text-decoration: none; }
.rgpd-nav__link--active { background: var(--orange); color: white !important; }

/* ── Carte principale ────────────────────────────── */
.dynamic-page__card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.dynamic-page__header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--cream-2);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.dynamic-page__header h1 {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    margin: 0;
    color: var(--dark);
    flex: 1;
}
.dynamic-page__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.dynamic-page__meta span {
    font-size: .78rem;
    color: var(--text-muted);
}

/* ── Corps — styles pour le HTML des pages légales ── */
.dynamic-page__body {
    padding: 2rem;
    line-height: 1.8;
    color: var(--text);
}
.dynamic-page__body h2 {
    font-size: 1.4rem;
    color: var(--dark);
    margin: 0 0 1rem;
}
.dynamic-page__body h3 {
    font-size: 1rem;
    color: var(--dark);
    margin: 2rem 0 .6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cream-2);
}
.dynamic-page__body h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.dynamic-page__body p  { margin-bottom: .9rem; }
.dynamic-page__body ul { margin: .5rem 0 1rem 1.25rem; }
.dynamic-page__body li { margin-bottom: .4rem; }
.dynamic-page__body a  { color: var(--orange); text-decoration: underline; }
.dynamic-page__body a:hover { color: var(--orange-dk); }
.dynamic-page__body code {
    background: var(--cream-2);
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .875em;
    font-family: monospace;
}
.dynamic-page__body strong { font-weight: 700; }

/* ── Liens croisés en bas ────────────────────────── */
.rgpd-footer-links {
    display: flex;
    gap: .5rem 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cream-2);
}
.rgpd-footer-links a {
    font-size: .875rem;
    color: var(--orange);
    text-decoration: none;
    transition: color .2s;
}
.rgpd-footer-links a:hover { color: var(--orange-dk); text-decoration: underline; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
    .dynamic-page { padding: 1.25rem 1rem 2.5rem; }
    .dynamic-page__header { padding: 1.25rem 1.25rem 1rem; }
    .dynamic-page__body   { padding: 1.25rem; }
    .dynamic-page__header h1 { font-size: 1.3rem; }
    .rgpd-nav { gap: .25rem; }
    .rgpd-nav__link { font-size: .75rem; padding: .3rem .65rem; }
    .dynamic-page__nav { flex-direction: column; align-items: flex-start; }
}