/* ═══════════════════════════════════════════════════════════════
   LecturePlus — Feuille de style principale
   Police : Nunito (défaut) | OpenDyslexic (mode accessible)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --primary:      #5B6EF5;
  --primary-dark: #3A52D4;
  --secondary:    #FF8C42;
  --success:      #4CAF82;
  --warning:      #FFD166;
  --danger:       #EF476F;
  --info:         #47B7D4;
  --bg:           #F8F7FF;
  --bg-card:      #FFFFFF;
  --text:         #2D2D3A;
  --text-muted:   #6B6B85;
  --border:       #E5E4F0;
  --shadow:       0 4px 20px rgba(91,110,245,.12);
  --radius:       16px;
  --radius-sm:    10px;
  --font-base:    'Nunito', sans-serif;
  --font-dys:     'OpenDyslexic', 'Arial', sans-serif;
  --font-size:    1.05rem;
  --line-height:  1.7;
}

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Mode accessible ────────────────────────────────────────── */
body.mode-accessible {
  --font-size: 1.2rem;
  --line-height: 2.0;
  --bg: #FFFBF0;
}
body.mode-accessible,
body.mode-accessible p,
body.mode-accessible li,
body.mode-accessible label,
body.mode-accessible .card-text,
body.mode-accessible .question-text {
  font-family: var(--font-dys) !important;
  letter-spacing: .05em;
  word-spacing: .15em;
}

body.mode-accessible .question-display {
  background: #FFFBF0;
  border-left: 5px solid var(--secondary);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
}

body.gros-texte { --font-size: 1.3rem; }
body.contraste-eleve {
  --text: #000000;
  --bg:   #FFFF00;
  --bg-card: #FFFFFF;
}

/* ── Barre d'accessibilité ──────────────────────────────────── */
.accessibilite-bar {
  background: var(--primary);
  min-height: 36px;
}
.accessibilite-bar .btn {
  font-size: .78rem;
  padding: .2rem .6rem;
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.accessibilite-bar .btn:hover {
  background: rgba(255,255,255,.2);
  border-color: #fff;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar { padding: .6rem 0; border-bottom: 2px solid var(--border); }
.logo-emoji { font-size: 1.8rem; }
.navbar-brand .fw-800 { font-weight: 800; font-size: 1.3rem; letter-spacing: -.5px; }
.nav-link { font-weight: 600; border-radius: var(--radius-sm); padding: .4rem .9rem !important; }
.nav-link:hover, .nav-link.active { background: var(--bg); color: var(--primary) !important; }
.nav-link.active { color: var(--primary) !important; }

/* ── Main ───────────────────────────────────────────────────── */
.main-content { flex: 1; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, #8B6EF5 100%);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 3rem 1.5rem;
  text-align: center;
}
.hero h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: .5rem; }
.hero p   { font-size: 1.15rem; opacity: .9; }
.hero .emoji-big { font-size: 4rem; display: block; margin-bottom: 1rem; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(91,110,245,.18); }

.card-dys {
  border-top: 5px solid var(--primary);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  display: block;
}
.card-dys:hover { color: var(--text); }
.card-dys.dyslexie  { border-top-color: #EF476F; }
.card-dys.dyspraxie { border-top-color: #FFD166; }
.card-dys.dysphasie { border-top-color: #47B7D4; }

.card-icon { font-size: 3rem; display: block; margin-bottom: .5rem; }
.card-exercice { border-top: 4px solid var(--success); }

/* ── Badges de niveau ───────────────────────────────────────── */
.badge-niveau {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
}
.niveau-vert   { background: #D1F7E7; color: #1A7A4F; }
.niveau-orange { background: #FFF0DB; color: #B85C00; }
.niveau-rouge  { background: #FFDDE6; color: #9B1C3A; }

/* ── Boutons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-base);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: transform .15s, box-shadow .15s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.btn-success { background: var(--success); border-color: var(--success); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: var(--text); }
.btn-danger  { background: var(--danger);  border-color: var(--danger); }
.btn-xl { font-size: 1.2rem; padding: .85rem 2rem; }

/* ── Tests ──────────────────────────────────────────────────── */
.test-progress-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.test-progress-fill { height: 100%; background: var(--primary); transition: width .4s ease; }

.question-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
  animation: fadeIn .3s ease;
}
.question-number {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.question-text {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 1rem 0;
}
.question-display {
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  padding: 1.5rem;
  letter-spacing: .1em;
  color: var(--primary);
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin: 1rem 0;
}
.reponse-btn {
  width: 100%;
  text-align: left;
  padding: .9rem 1.4rem;
  border: 2.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  color: var(--text);
}
.reponse-btn:hover { border-color: var(--primary); background: rgba(91,110,245,.06); }
.reponse-btn.correct { border-color: var(--success); background: #D1F7E7; color: #1A7A4F; }
.reponse-btn.incorrect { border-color: var(--danger); background: #FFDDE6; color: #9B1C3A; }
.reponse-btn:disabled { cursor: not-allowed; }

/* Timer */
.timer-ring { position: relative; display: inline-flex; }
.timer-text  { font-size: 1.1rem; font-weight: 800; color: var(--primary); }

/* Résultats */
.result-circle {
  width: 140px; height: 140px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-size: 2.5rem; font-weight: 800;
  margin: 0 auto 1.5rem;
}
.result-vert   { background: #D1F7E7; color: #1A7A4F; border: 4px solid #4CAF82; }
.result-orange { background: #FFF0DB; color: #B85C00; border: 4px solid #FFD166; }
.result-rouge  { background: #FFDDE6; color: #9B1C3A; border: 4px solid #EF476F; }

/* ── Exercices ──────────────────────────────────────────────── */
.mot-carte {
  display: inline-block;
  padding: .8rem 1.6rem;
  border: 3px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  background: #fff;
  margin: .3rem;
}
.mot-carte:hover  { border-color: var(--primary); transform: scale(1.05); }
.mot-carte.active { border-color: var(--primary); background: rgba(91,110,245,.1); }

.syllabe { display: inline-block; padding: .1em .3em; border-radius: 4px; margin: 0 1px; }
.syllabe-1 { background: #FFE0E6; color: #9B1C3A; }
.syllabe-2 { background: #D1F7E7; color: #1A7A4F; }
.syllabe-3 { background: #DBEAFE; color: #1E4FA0; }
.syllabe-4 { background: #FFF0DB; color: #B85C00; }

/* Canvas motricité */
#canvasMotricite {
  border: 3px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: crosshair;
  touch-action: none;
  background: #fff;
}
.canvas-toolbar .btn { border-radius: var(--radius-sm); }

/* ── Suivi ──────────────────────────────────────────────────── */
.stat-card {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--border);
}
.stat-card .stat-value { font-size: 2.5rem; font-weight: 800; color: var(--primary); }
.stat-card .stat-label { color: var(--text-muted); font-size: .9rem; }

/* ── Profil ─────────────────────────────────────────────────── */
.avatar-option {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .3rem; cursor: pointer;
}
.avatar-option input { display: none; }
.avatar-emoji-btn {
  font-size: 2.8rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  border: 3px solid transparent;
  transition: all .15s;
  background: var(--bg);
}
.avatar-option input:checked + .avatar-emoji-btn {
  border-color: var(--primary);
  background: rgba(91,110,245,.12);
  transform: scale(1.1);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.animate-fade { animation: fadeIn .4s ease; }
.animate-bounce { animation: bounceIn .5s ease; }
.animate-pulse  { animation: pulse 1.5s infinite; }

/* ── Utilitaires ────────────────────────────────────────────── */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.fw-800 { font-weight: 800; }
.section-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; }
.page-intro { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {
  .hero h1        { font-size: 1.6rem; }
  .question-text  { font-size: 1.1rem; }
  .question-display { font-size: 1.8rem; }
  .reponse-btn    { font-size: 1rem; }
  .btn-xl         { font-size: 1rem; padding: .7rem 1.4rem; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — Améliorations complètes
   ══════════════════════════════════════════════════════════════ */

/* ── Navigation bottom mobile ───────────────────────────────── */
.bottom-nav {
  display: none;
}

@media (max-width: 991px) {
  /* Barre d'accessibilité compacte */
  .accessibilite-bar {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: .35rem !important;
    padding: .35rem .5rem !important;
  }
  .accessibilite-bar .btn {
    font-size: .72rem;
    padding: .28rem .5rem;
  }
  .accessibilite-bar .btn span { display: none; }

  /* Masquer la navbar desktop */
  .navbar { display: none !important; }

  /* Bottom navigation bar */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 2px solid var(--border);
    box-shadow: 0 -4px 20px rgba(91,110,245,.15);
    z-index: 1050;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .55rem .25rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .65rem;
    font-weight: 700;
    gap: .15rem;
    transition: color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a i { font-size: 1.2rem; }
  .bottom-nav a.active,
  .bottom-nav a:hover { color: var(--primary); }
  .bottom-nav a.active { border-top: 3px solid var(--primary); margin-top: -2px; }

  /* Décalage du contenu pour la bottom bar */
  .main-content { padding-bottom: 4.5rem !important; }
  footer        { margin-bottom: 4.5rem !important; }

  /* Header mobile avec titre de page */
  .mobile-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .mobile-header .logo-emoji { font-size: 1.6rem; }
  .mobile-header .app-name   { font-size: 1.1rem; font-weight: 800; color: var(--primary); }

  /* Bouton profil en haut à droite */
  .mobile-header .profil-btn {
    margin-left: auto;
    font-size: .75rem;
  }

  /* Cards en pleine largeur */
  .card { border-radius: var(--radius-sm) !important; }

  /* Textes ajustés */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem; }
  .section-title { font-size: 1.25rem; }

  /* Grilles : 1 colonne sur petit écran */
  .row.g-4 > [class*="col-lg"] { padding: 0 .75rem; }

  /* Boutons plus grands (cibles tactiles ≥ 44px) */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }

  /* Exercices : pleine largeur */
  .exercice-card, .texte-btn { width: 100% !important; }

  /* Canvas motricité */
  canvas { max-width: 100% !important; height: auto !important; touch-action: none; }

  /* Zone texte lecture */
  #zoneTexte { padding: 1rem !important; }

  /* Questions : plus de place */
  .question-display { font-size: 2rem; }
  .question-card    { padding: 1rem; }
  .reponse-btn      { width: 100%; margin-bottom: .4rem; }

  /* Suivi : graphiques */
  .chart-container { height: 220px !important; }

  /* Profil : avatars */
  .avatar-btn { font-size: 1.8rem !important; padding: .5rem !important; }
}

/* Très petits écrans */
@media (max-width: 360px) {
  .accessibilite-bar { display: none; } /* trop étroit, accessible via menu */
  h1 { font-size: 1.3rem !important; }
  .bottom-nav a { font-size: .58rem; }
  .bottom-nav a i { font-size: 1.1rem; }
}

/* ── PWA : splashscreen padding (iPhone notch) ──────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .accessibilite-bar {
    padding-top: max(.25rem, env(safe-area-inset-top)) !important;
  }
}