/* =============================================
   L'École des Champions – Style.css
   Design ludique pour CP
============================================= */

:root {
  --yellow:   #FFD93D;
  --orange:   #FF6B35;
  --green:    #6BCB77;
  --blue:     #4D96FF;
  --purple:   #B388FF;
  --pink:     #FF8FAB;
  --red:      #FF4C4C;
  --dark:     #2D3047;
  --light-bg: #FFF9F0;
  --card-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --radius-lg: 24px;
  --radius-xl: 36px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--light-bg);
  color: var(--dark);
  min-height: 100vh;
}

/* ---- NAVBAR ---- */
.fun-navbar {
  background: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.fun-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-icon { font-size: 2rem; }
.brand-text {
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: var(--orange);
  line-height: 1;
}
.fun-toggler {
  background: var(--yellow);
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 1.2rem;
}
.fun-nav-link {
  font-family: 'Fredoka One', cursive;
  font-size: 1.05rem;
  color: var(--dark) !important;
  border-radius: 14px;
  padding: 8px 18px !important;
  transition: all 0.2s;
  background: transparent;
}
.fun-nav-link:hover, .fun-nav-link.active {
  background: var(--yellow);
  color: var(--dark) !important;
  transform: translateY(-2px);
}
.nav-maths.active { background: #D0EBFF; }
.nav-lecture.active { background: #D3F9D8; }

/* ---- HERO ---- */
.hero-section {
  background: linear-gradient(135deg, #FFF3CD 0%, #FFE4B5 50%, #FFD9B7 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
}
.hero-badge {
  display: inline-block;
  background: var(--orange);
  color: white;
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  padding: 6px 20px;
  border-radius: 50px;
  letter-spacing: 1px;
}
.hero-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--dark);
  line-height: 1.15;
  margin: 16px 0;
}
.highlight-word {
  color: var(--orange);
  position: relative;
  display: inline-block;
}
.highlight-word::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--yellow);
  border-radius: 3px;
  z-index: -1;
}
.hero-subtitle {
  font-size: 1.2rem;
  color: #5a4a3a;
  max-width: 500px;
  margin: 0 auto;
}
.hero-stars span {
  font-size: 1.5rem;
  animation: starPop 1s ease-in-out infinite alternate;
}
.hero-stars span:nth-child(2) { animation-delay: 0.2s; }
.hero-stars span:nth-child(3) { animation-delay: 0.4s; }
.hero-stars span:nth-child(4) { animation-delay: 0.6s; }
.hero-stars span:nth-child(5) { animation-delay: 0.8s; }
@keyframes starPop { to { transform: scale(1.3); } }

/* FLOATING SHAPES */
.floating-shapes { position: absolute; inset: 0; pointer-events: none; }
.shape {
  position: absolute;
  font-size: 2rem;
  animation: float 4s ease-in-out infinite;
  opacity: 0.6;
}
.shape-1 { top:10%; left:5%; animation-delay: 0s; }
.shape-2 { top:20%; right:8%; animation-delay: 0.5s; }
.shape-3 { bottom:20%; left:10%; animation-delay: 1s; }
.shape-4 { top:60%; right:5%; animation-delay: 1.5s; }
.shape-5 { bottom:10%; right:15%; animation-delay: 2s; }
.shape-6 { top:40%; left:3%; animation-delay: 2.5s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

/* ---- BUTTONS ---- */
.btn-fun {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  padding: 14px 32px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.btn-fun:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.btn-maths { background: var(--blue); color: white; }
.btn-lecture { background: var(--green); color: white; }
.btn-icon { font-size: 1.4rem; }

/* ---- CARDS MATIÈRES ---- */
.section-title {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  color: var(--dark);
}
.card-matiere {
  background: white;
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--card-shadow);
  transition: all 0.3s;
  border: 3px solid transparent;
  color: var(--dark);
}
.card-matiere:hover { transform: translateY(-8px); }
.card-maths { border-color: var(--blue); }
.card-maths:hover { border-color: var(--blue); box-shadow: 0 16px 48px rgba(77,150,255,0.25); }
.card-lecture { border-color: var(--green); }
.card-lecture:hover { border-color: var(--green); box-shadow: 0 16px 48px rgba(107,203,119,0.25); }
.card-matiere-icon { font-size: 3.5rem; margin-bottom: 12px; }
.card-matiere-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.card-matiere-desc { color: #666; margin-bottom: 16px; }
.card-matiere-list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}
.card-matiere-list li {
  padding: 6px 0;
  font-size: 0.95rem;
  color: #555;
}
.card-matiere-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: var(--blue);
}
.card-lecture .card-matiere-btn { color: var(--green); }

/* ---- MASCOTTE ---- */
.mascotte-section { background: linear-gradient(135deg, #E8F4FD, #F0FFF4); }
.mascotte-box {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: white;
  border-radius: var(--radius-xl);
  padding: 28px 40px;
  box-shadow: var(--card-shadow);
  max-width: 600px;
}
.mascotte-emoji {
  font-size: 4rem;
  animation: mascotteWave 2s ease-in-out infinite;
}
@keyframes mascotteWave {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.mascotte-bubble {
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  color: #444;
}

/* ---- SKILL BADGES ---- */
.bg-light-fun { background: linear-gradient(135deg, #FFF3CD, #E8F4FD); }
.skill-badge {
  background: white;
  border-radius: 20px;
  padding: 20px 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.skill-badge:hover { transform: translateY(-4px); }
.skill-icon { font-size: 2rem; margin-bottom: 8px; }
.skill-label { font-family: 'Fredoka One', cursive; font-size: 0.95rem; color: var(--dark); }

/* ---- PAGE HEADERS ---- */
.page-header { position: relative; overflow: hidden; }
.maths-header {
  background: linear-gradient(135deg, #D0EBFF 0%, #BAE3FF 100%);
}
.lecture-header {
  background: linear-gradient(135deg, #D3F9D8 0%, #B2F2BB 100%);
}
.page-header-icon { font-size: 4rem; margin-bottom: 12px; animation: bounce 1s ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(-10px); } }
.page-header-title {
  font-family: 'Fredoka One', cursive;
  font-size: 2.8rem;
  color: var(--dark);
  margin: 0;
}
.page-header-sub { font-size: 1.1rem; color: #555; margin-top: 8px; }

.score-bar {
  display: inline-block;
  background: white;
  border-radius: 50px;
  padding: 10px 28px;
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  margin-top: 16px;
  color: var(--dark);
}

/* ---- TABS ---- */
.fun-tabs { gap: 8px; flex-wrap: wrap; }
.fun-tab {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  background: white !important;
  color: var(--dark) !important;
  border: 2px solid #e0e0e0 !important;
  transition: all 0.2s !important;
}
.fun-tab.active, .fun-tab:hover {
  background: var(--yellow) !important;
  border-color: var(--orange) !important;
  color: var(--dark) !important;
  transform: translateY(-2px);
}

/* ---- EXERCICE CARDS ---- */
.exercice-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--card-shadow);
}
.exercice-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.6rem;
  color: var(--dark);
  margin-bottom: 8px;
}
.exercice-consigne {
  color: #666;
  font-size: 1rem;
  margin-bottom: 20px;
}

/* ---- COMPTER ---- */
.compter-zone {
  font-size: 2.5rem;
  letter-spacing: 6px;
  min-height: 80px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: #f8f9fa;
  border-radius: 16px;
  padding: 20px;
}
.choices-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.choice-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  width: 70px;
  height: 70px;
  border-radius: 18px;
  border: 3px solid #e0e0e0;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choice-btn:hover { transform: scale(1.1); border-color: var(--blue); background: #EBF4FF; }
.choice-btn.correct { background: var(--green); border-color: #4CAF50; color: white; }
.choice-btn.wrong { background: var(--red); border-color: #c0392b; color: white; }

/* ---- LIGNE DE NOMBRES ---- */
.number-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
}
.num-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #dee2e6;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.num-btn:hover { border-color: var(--blue); transform: scale(1.1); }
.num-btn.selected { background: var(--green); border-color: #4CAF50; color: white; }
.num-btn.wrong { background: var(--red); border-color: #c0392b; color: white; animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ---- OPÉRATIONS ---- */
.operation-zone {
  font-family: 'Fredoka One', cursive;
  font-size: 3.5rem;
  color: var(--dark);
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #EBF4FF, #F0FFF4);
  border-radius: 20px;
  letter-spacing: 8px;
}
.input-group-fun {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.fun-input {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  width: 120px;
  height: 70px;
  text-align: center;
  border: 3px solid #dee2e6;
  border-radius: 18px;
  outline: none;
  transition: border-color 0.2s;
  background: #FAFAFA;
}
.fun-input:focus { border-color: var(--blue); background: #EBF4FF; }
.btn-check {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  padding: 14px 28px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(107,203,119,0.4);
}
.btn-check:hover { transform: translateY(-2px); background: #5ab668; }

/* OBJETS ILLUSTRÉS */
.objets-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 2.8rem;
  flex-wrap: wrap;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
  min-height: 80px;
}
.objets-separator {
  font-family: 'Fredoka One', cursive;
  font-size: 2.5rem;
  color: var(--orange);
}

/* SOUSTRACTION VISUELLE */
.soustraction-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 60px;
}
.vis-item { font-size: 2rem; transition: opacity 0.5s; }
.vis-item.crossed { opacity: 0.2; text-decoration: line-through; }

/* COMPARAISON */
.comparaison-zone {
  font-family: 'Fredoka One', cursive;
  font-size: 4rem;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #FFF3CD, #FFE4B5);
  border-radius: 20px;
  letter-spacing: 24px;
}
.comparaison-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-comparaison {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  padding: 14px 28px;
  border-radius: 50px;
  border: 3px solid var(--blue);
  background: white;
  color: var(--blue);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-comparaison:hover { background: var(--blue); color: white; transform: translateY(-2px); }
.btn-egal { border-color: var(--orange); color: var(--orange); }
.btn-egal:hover { background: var(--orange); color: white; }

/* ---- FEEDBACK ---- */
.feedback-box {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  text-align: center;
  padding: 14px 24px;
  border-radius: 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feedback-correct { background: #D3F9D8; color: #2f9e44; }
.feedback-wrong { background: #FFE3E3; color: #c92a2a; }
.feedback-info { background: #D0EBFF; color: #1971c2; }

/* ---- BTN NEXT ---- */
.btn-next {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  padding: 12px 28px;
  background: var(--yellow);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  color: var(--dark);
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(255,217,61,0.4);
}
.btn-next:hover { transform: translateY(-2px); background: var(--orange); color: white; }

/* ---- MÉDAILLES ---- */
.medailles-section {
  background: white;
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--card-shadow);
}
.medailles-grid {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.medaille {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: #f8f9fa;
  border: 3px dashed #dee2e6;
  transition: all 0.3s;
  cursor: default;
}
.medaille span { font-size: 0.7rem; font-family: 'Fredoka One', cursive; color: #aaa; }
.medaille.unlocked { background: var(--yellow); border: 3px solid var(--orange); transform: scale(1.05); }
.medaille.unlocked span { color: var(--orange); }

/* =============================================
   LECTURE – ALPHABET
============================================= */
.alphabet-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.alpha-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  border: 3px solid #dee2e6;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
}
.alpha-btn:hover { transform: scale(1.15); border-color: var(--purple); background: #F3E8FF; }
.alpha-btn.voyelle { border-color: var(--pink); background: #FFF0F5; }
.alpha-btn.voyelle:hover { background: var(--pink); color: white; }
.alpha-btn small { font-size: 0.7rem; color: #999; font-family: 'Nunito', sans-serif; }

/* ORDER GAME */
.order-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 16px;
}
.order-letter {
  font-family: 'Fredoka One', cursive;
  font-size: 1.8rem;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  border: 3px solid #dee2e6;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.order-letter:hover { border-color: var(--purple); transform: scale(1.1); background: #F3E8FF; }
.order-letter.used { opacity: 0.3; pointer-events: none; }
.order-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 80px;
  padding: 16px;
  background: linear-gradient(135deg, #F3E8FF, #EBF4FF);
  border-radius: 16px;
  border: 2px dashed var(--purple);
  align-items: center;
}
.order-placed {
  font-family: 'Fredoka One', cursive;
  font-size: 1.8rem;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--purple);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- FICHE DE LETTRE ---- */
.lettre-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.btn-lettre {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 2px solid #dee2e6;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-lettre:hover { border-color: var(--green); background: #D3F9D8; transform: scale(1.1); }

.fiche-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--card-shadow);
  border: 4px solid var(--green);
}
.fiche-header {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 3px dashed #dee2e6;
}
.fiche-majuscule {
  font-family: 'Fredoka One', cursive;
  font-size: 8rem;
  color: var(--blue);
  line-height: 1;
}
.fiche-minuscule {
  font-family: 'Fredoka One', cursive;
  font-size: 6rem;
  color: var(--green);
  line-height: 1;
}
.fiche-section { margin-bottom: 24px; }
.fiche-section h4 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 10px;
}
.fiche-son {
  font-size: 1.5rem;
  background: #FFF3CD;
  border-radius: 12px;
  padding: 12px 20px;
  display: inline-block;
}
.fiche-mots {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fiche-mot {
  background: #EBF4FF;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fiche-mot .mot-emoji { font-size: 1.5rem; }
.fiche-ecriture {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
#lettre-canvas {
  border: 3px dashed #dee2e6;
  border-radius: 16px;
  background: #FAFAFA;
}
.tracing-guide {
  font-family: 'Fredoka One', cursive;
  font-size: 6rem;
  color: #dee2e6;
  line-height: 1;
}
.fiche-type-badge {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 50px;
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
}
.badge-voyelle { background: #FFB3C1; color: #c0392b; }
.badge-consonne { background: #A0D0FF; color: #1565c0; }

/* ---- QUIZ ---- */
.quiz-letter-zone {
  text-align: center;
  padding: 30px;
  background: linear-gradient(135deg, #F3E8FF, #EBF4FF);
  border-radius: 20px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
}
.quiz-letter-zone .quiz-main-letter {
  font-family: 'Fredoka One', cursive;
  font-size: 6rem;
  color: var(--purple);
  display: block;
  margin-bottom: 12px;
}
.image-word-zone {
  text-align: center;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 20px;
}
.image-word-emoji { font-size: 5rem; display: block; margin-bottom: 12px; }
.image-word-text {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  color: var(--dark);
}

/* ---- VOYELLES / CONSONNES ---- */
.voyelles-display {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
}
.voyelle-card {
  background: linear-gradient(135deg, #FFB3C1, #FF8FAB);
  color: white;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 90px;
}
.voyelle-card:hover { transform: scale(1.1); }
.voyelle-lettre { font-family: 'Fredoka One', cursive; font-size: 3rem; line-height: 1; }
.voyelle-min { font-family: 'Fredoka One', cursive; font-size: 1.5rem; opacity: 0.8; }
.voyelle-sound { background: rgba(255,255,255,0.3); border: none; border-radius: 8px; color: white; font-size: 1rem; padding: 4px 10px; cursor: pointer; margin-top: 8px; }

.consonnes-display {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 20px;
}
.consonne-card {
  background: linear-gradient(135deg, #A0D0FF, #4D96FF);
  color: white;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 65px;
}
.consonne-card:hover { transform: scale(1.1); }
.consonne-lettre { font-family: 'Fredoka One', cursive; font-size: 2rem; line-height: 1; }
.consonne-min { font-size: 1rem; opacity: 0.8; font-family: 'Fredoka One', cursive; }

.voc-zone {
  font-family: 'Fredoka One', cursive;
  font-size: 8rem;
  text-align: center;
  color: var(--purple);
  padding: 20px;
  background: #F3E8FF;
  border-radius: 20px;
}
.voc-btns { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.btn-voc {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  padding: 16px 36px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-voc:hover { transform: translateY(-3px) scale(1.05); }
.btn-voyelle { background: var(--pink); color: white; }
.btn-consonne { background: var(--blue); color: white; }

/* ---- MODAL ---- */
.fun-modal {
  border-radius: var(--radius-xl) !important;
  border: 4px solid var(--purple) !important;
}
.modal-letter-big { font-family: 'Fredoka One', cursive; font-size: 6rem; }
.modal-letter-info { font-size: 1rem; }

/* ---- CONFETTI ---- */
#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ---- FOOTER ---- */
.fun-footer {
  background: var(--dark);
  color: white;
}
.footer-mascotte { font-size: 2.5rem; }
.footer-text {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: var(--yellow);
  margin: 0;
}
.footer-sub { color: #aaa; font-size: 0.9rem; margin: 0; }
.footer-links a {
  color: #ccc;
  text-decoration: none;
  font-family: 'Fredoka One', cursive;
  font-size: 0.95rem;
}
.footer-links a:hover { color: var(--yellow); }
.footer-links span { color: #555; margin: 0 8px; }

/* ---- RESPONSIVE ---- */
@media (max-width: 576px) {
  .mascotte-box { flex-direction: column; padding: 24px; }
  .operation-zone { font-size: 2.5rem; letter-spacing: 4px; }
  .comparaison-zone { font-size: 3rem; letter-spacing: 12px; }
  .voc-zone { font-size: 6rem; }
  .fiche-majuscule { font-size: 5rem; }
  .fiche-minuscule { font-size: 4rem; }
}

/* =============================================
   NOUVEAUX STYLES – Objectif CP v2
   Pages dédiées, hub, breadcrumb, dropdown
============================================= */

/* ---- DROPDOWN NAVBAR ---- */
.fun-dropdown {
  border: 2px solid var(--yellow);
  border-radius: 18px !important;
  padding: 10px 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  min-width: 240px;
  margin-top: 8px !important;
}
.fun-dropdown-item {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  border-radius: 12px;
  padding: 10px 16px !important;
  color: var(--dark) !important;
  transition: all 0.15s;
}
.fun-dropdown-item:hover,
.fun-dropdown-item.active {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}
.fun-dropdown .dropdown-divider { border-color: #f0e8d8; margin: 6px 8px; }

/* ---- BREADCRUMB ---- */
.breadcrumb-fun {
  display: inline-block;
  font-family: 'Fredoka One', cursive;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: 6px 18px;
  margin-bottom: 12px;
  color: #555;
}
.breadcrumb-fun a {
  color: var(--orange);
  text-decoration: none;
}
.breadcrumb-fun a:hover { text-decoration: underline; }

/* ---- LIEN "EXERCICE SUIVANT" dans le header de carte ---- */
.exo-nav-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.exo-next-page {
  font-family: 'Fredoka One', cursive;
  font-size: 0.9rem;
  color: var(--blue);
  text-decoration: none;
  background: #EBF4FF;
  border-radius: 50px;
  padding: 6px 16px;
  white-space: nowrap;
  transition: all 0.2s;
}
.exo-next-page:hover {
  background: var(--blue);
  color: white;
}

/* ---- CARTES HUB (pages index) ---- */
.hub-category {
  background: white;
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--card-shadow);
  height: 100%;
  border: 3px solid transparent;
}
.hub-maths { border-color: var(--blue); }
.hub-lecture { border-color: var(--green); }

.hub-cat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px dashed #eee;
}
.hub-cat-icon { font-size: 2.5rem; }
.hub-cat-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  margin: 0;
  color: var(--dark);
}

.hub-cat-links { display: flex; flex-direction: column; gap: 10px; }

.hub-link {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FAFAFA;
  border: 2px solid #eee;
  border-radius: 16px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--dark);
  transition: all 0.2s;
}
.hub-link:hover {
  border-color: var(--blue);
  background: #EBF4FF;
  transform: translateX(4px);
  color: var(--dark);
}
.hub-lecture .hub-link:hover {
  border-color: var(--green);
  background: #D3F9D8;
}
.hub-link-icon { font-size: 1.8rem; flex-shrink: 0; }
.hub-link div { flex: 1; line-height: 1.3; }
.hub-link div strong { font-size: 1rem; }
.hub-link div small { color: #888; font-size: 0.8rem; }
.hub-link-arrow {
  font-size: 1.2rem;
  color: #ccc;
  flex-shrink: 0;
  transition: color 0.2s;
}
.hub-link:hover .hub-link-arrow { color: var(--blue); }

/* ---- CARTES EXERCICE (pages hub maths/lecture) ---- */
.hub-exo-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--card-shadow);
  border: 3px solid transparent;
  transition: all 0.25s;
  height: 100%;
}
.hub-exo-card:hover { transform: translateY(-6px); }
.hub-exo-blue  { border-color: var(--blue); }
.hub-exo-blue:hover  { box-shadow: 0 16px 48px rgba(77,150,255,0.25); }
.hub-exo-green { border-color: var(--green); }
.hub-exo-green:hover { box-shadow: 0 16px 48px rgba(107,203,119,0.25); }
.hub-exo-orange{ border-color: var(--orange); }
.hub-exo-orange:hover{ box-shadow: 0 16px 48px rgba(255,107,53,0.25); }
.hub-exo-purple{ border-color: var(--purple); }
.hub-exo-purple:hover{ box-shadow: 0 16px 48px rgba(179,136,255,0.25); }
.hub-exo-pink  { border-color: var(--pink); }
.hub-exo-pink:hover  { box-shadow: 0 16px 48px rgba(255,143,171,0.25); }

.hub-exo-icon { font-size: 3rem; margin-bottom: 10px; }
.hub-exo-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 8px;
}
.hub-exo-desc { color: #666; font-size: 0.95rem; margin-bottom: 16px; }
.hub-exo-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: var(--blue);
}
.hub-exo-purple .hub-exo-btn { color: var(--purple); }
.hub-exo-green  .hub-exo-btn { color: var(--green); }
.hub-exo-orange .hub-exo-btn { color: var(--orange); }
.hub-exo-pink   .hub-exo-btn { color: var(--pink); }

/* ---- CARTES SIGNES (comparaison) ---- */
.signe-card {
  border-radius: 20px;
  padding: 20px 10px;
  border: 3px solid transparent;
}
.signe-symbole {
  font-family: 'Fredoka One', cursive;
  font-size: 3.5rem;
  line-height: 1;
}
.signe-label { font-size: 0.85rem; font-weight: 700; margin: 6px 0 4px; }
.signe-ex {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
}
.signe-inf  { background: #D0EBFF; border-color: var(--blue);   color: #1565c0; }
.signe-egal { background: #FFF3CD; border-color: var(--yellow);  color: #9a6800; }
.signe-sup  { background: #D3F9D8; border-color: var(--green);  color: #2f7a3a; }

/* ---- FOOTER ÉTENDU ---- */
.footer-cat {
  color: var(--yellow);
  margin-right: 6px;
  font-size: 0.85rem;
}
.fun-footer .footer-links a {
  color: #bbb;
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
}
.fun-footer .footer-links a:hover { color: var(--yellow); }

/* =============================================
   OBJECTIF PRIMAIRE – Portail multi-niveaux
============================================= */

/* ---- NAVBAR GLOBALE ---- */
.global-navbar .fun-brand .brand-text { color: var(--orange); }

.niveau-pill {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  border-radius: 50px !important;
  padding: 8px 18px !important;
  transition: all 0.2s;
  background: white !important;
  border: 2px solid #eee !important;
}
.niveau-pill:hover, .niveau-pill.active {
  color: white !important;
  border-color: transparent !important;
  transform: translateY(-2px);
}
.niveau-pill-cp:hover,  .niveau-pill-cp.active  { background: #FF6B35 !important; }
.niveau-pill-ce1:hover, .niveau-pill-ce1.active  { background: #00B4D8 !important; }
.niveau-pill-ce2:hover, .niveau-pill-ce2.active  { background: #2DC653 !important; }
.niveau-pill-cm1:hover, .niveau-pill-cm1.active  { background: #7B2FBE !important; }
.niveau-pill-cm2:hover, .niveau-pill-cm2.active  { background: #E63946 !important; }

.niveau-dropdown-cp  { border-color: #FF6B35 !important; }
.niveau-dropdown-ce1 { border-color: #00B4D8 !important; }
.niveau-dropdown-ce2 { border-color: #2DC653 !important; }
.niveau-dropdown-cm1 { border-color: #7B2FBE !important; }
.niveau-dropdown-cm2 { border-color: #E63946 !important; }

.dropdown-hub { font-weight: 800 !important; }

.navbar-badge {
  color: white;
  font-family: 'Fredoka One', cursive;
  font-size: 0.9rem;
  padding: 6px 16px;
  border-radius: 50px;
  white-space: nowrap;
}

/* ---- PORTAIL HERO ---- */
.portail-hero {
  background: linear-gradient(135deg, #FFF3CD 0%, #FFE4B5 40%, #E8F4FD 100%);
  padding: 80px 0 60px;
}

/* ---- CARTES NIVEAU (portail) ---- */
.col-lg-2-4 { flex: 0 0 auto; width: 20%; }
@media (max-width: 992px) { .col-lg-2-4 { width: 33.333%; } }
@media (max-width: 768px) { .col-lg-2-4 { width: 50%; } }

.niveau-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 28px 16px;
  text-align: center;
  box-shadow: var(--card-shadow);
  border: 3px solid var(--niveau-color);
  transition: all 0.25s;
  color: var(--dark);
  height: 100%;
}
.niveau-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  background: var(--niveau-light);
  color: var(--dark);
}
.niveau-card-emoji { font-size: 3rem; margin-bottom: 8px; animation: bounce 2s ease-in-out infinite alternate; }
.niveau-card-label {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  color: var(--niveau-color);
  line-height: 1;
}
.niveau-card-full { font-size: 0.75rem; color: #888; margin: 4px 0 10px; }
.niveau-card-matieres { font-size: 1.4rem; margin-bottom: 14px; }
.niveau-card-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 0.9rem;
  color: var(--niveau-color);
  background: var(--niveau-light);
  border-radius: 50px;
  padding: 6px 16px;
  display: inline-block;
}
.niveau-card:hover .niveau-card-btn {
  background: var(--niveau-color);
  color: white;
}

/* ---- CARTES EXOS (portail bas) ---- */
.niveau-exo-card {
  background: white;
  border-radius: 20px;
  border: 2px solid;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.niveau-exo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
}
.niveau-exo-emoji { font-size: 1.5rem; }
.niveau-exo-label { font-size: 0.9rem; }
.niveau-exo-list {
  list-style: none;
  padding: 14px 18px;
  margin: 0;
  flex: 1;
}
.niveau-exo-list li {
  padding: 5px 0;
  font-size: 0.88rem;
  color: #555;
  border-bottom: 1px dashed #eee;
}
.niveau-exo-list li:last-child { border: none; }
.niveau-exo-link {
  display: block;
  padding: 12px 18px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.9rem;
  text-decoration: none;
  background: #fafafa;
  border-top: 1px solid #eee;
  transition: all 0.2s;
}
.niveau-exo-link:hover { padding-left: 26px; }

/* ---- PAGE HEADER NIVEAUX ---- */
.header-ce1 { background: linear-gradient(135deg, #E0F7FA, #B2EBF2); }
.header-ce2 { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); }
.header-cm1 { background: linear-gradient(135deg, #F3E5F5, #E1BEE7); }
.header-cm2 { background: linear-gradient(135deg, #FFEBEE, #FFCDD2); }

/* ---- FOOTER GLOBAL ---- */
.footer-niveaux {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 16px;
}
.footer-niveau-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 120px;
}
.footer-niveau-block strong { font-size: 0.85rem; }
.footer-niveau-block a {
  color: #bbb;
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s;
}
.footer-niveau-block a:hover { color: var(--yellow); }

/* ---- HUB NIVEAU (index de chaque niveau) ---- */
.niveau-hub-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 40px;
}
.niveau-hub-hero .page-header-title { font-size: 2.5rem; }

/* ---- BREADCRUMB MULTI-NIVEAUX ---- */
.breadcrumb-fun a { color: var(--orange); }

/* =============================================
   COMPOSANTS EXERCICES AVANCÉS (CE1→CM2)
============================================= */

/* ---- OPÉRATION POSÉE ---- */
.operation-posee {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  background: #f8f9fa;
  border-radius: 16px;
  padding: 20px 32px;
  font-family: 'Fredoka One', cursive;
  font-size: 2.5rem;
  border: 2px solid #dee2e6;
}
.posee-line { display: flex; align-items: center; gap: 16px; }
.posee-signe { width: 30px; text-align: right; color: var(--blue); }
.posee-num { min-width: 100px; text-align: right; }
.posee-line-op { border-top: 3px solid var(--dark); padding-top: 6px; }
.posee-result { color: var(--orange); }

/* ---- CONJUGAISON ---- */
.conjugaison-zone {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #F3E8FF, #EBF4FF);
  border-radius: 20px;
  padding: 24px 32px;
  line-height: 1.8;
  text-align: center;
}
.conj-inf { font-size: 1.1rem; color: #666; }
.conj-pronom { font-size: 2rem; color: var(--blue); margin-right: 10px; }
.conj-blank {
  display: inline-block;
  min-width: 200px;
  border-bottom: 3px solid var(--purple);
  color: var(--purple);
  font-size: 1.5rem;
}

/* ---- PHRASE ZONE ---- */
.phrase-zone {
  background: #FAFAFA;
  border-left: 5px solid var(--blue);
  border-radius: 0 16px 16px 0;
  padding: 16px 20px;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 8px 0;
}

/* ---- MOTS EN DÉSORDRE ---- */
.mots-desordre {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 16px;
}
.mot-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  background: white;
  border: 2px solid var(--blue);
  border-radius: 12px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--dark);
}
.mot-btn:hover { background: var(--blue); color: white; }
.mot-btn.used { opacity: 0.3; pointer-events: none; background: #eee; border-color: #ccc; }
.phrase-construite {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  min-height: 48px;
  background: linear-gradient(135deg, #D3F9D8, #E8F5E9);
  border-radius: 12px;
  padding: 12px 20px;
  color: var(--dark);
}

/* ---- NOMBRES EN DÉSORDRE ---- */
.nombres-shuffle {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
}
.nombre-tag, .note-tag {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  background: white;
  border: 2px solid var(--blue);
  border-radius: 12px;
  padding: 8px 18px;
  color: var(--dark);
}
.note-tag {
  border-color: var(--purple);
  font-size: 1.5rem;
  min-width: 50px;
  text-align: center;
}

/* ---- FRACTIONS ---- */
.fraction-zone, .fraction-comparaison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: #FFF3CD;
  border-radius: 20px;
}
.frac-display {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Fredoka One', cursive;
}
.frac-num, .frac-denom { font-size: 2.5rem; line-height: 1; color: var(--blue); }
.frac-bar {
  width: 60px;
  height: 4px;
  background: var(--dark);
  border-radius: 2px;
  margin: 4px 0;
}

/* ---- TABLEAU PROPORTIONNALITÉ ---- */
.tableau-prop { display: flex; justify-content: center; padding: 20px; }
.prop-table {
  border-collapse: collapse;
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
}
.prop-table td {
  border: 3px solid var(--dark);
  padding: 16px 32px;
  text-align: center;
  min-width: 80px;
  background: white;
}
.prop-table tr:first-child td { background: #EBF4FF; color: var(--blue); }

/* ---- GRAPHIQUE EN BARRES ---- */
.graphique-zone { padding: 16px; background: #f8f9fa; border-radius: 16px; }
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 160px;
  justify-content: center;
  padding: 0 10px 10px;
  border-bottom: 3px solid #dee2e6;
}
.bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bar-label { font-family: 'Fredoka One', cursive; font-size: 0.85rem; color: #555; }
.bar-bar { width: 40px; border-radius: 6px 6px 0 0; transition: all 0.5s; min-height: 8px; }
.bar-month { font-family: 'Fredoka One', cursive; font-size: 0.85rem; color: var(--dark); }

/* ---- PROBLÈME ZONE ---- */
.probleme-zone {
  background: linear-gradient(135deg, #FFF3CD, #FFE4B5);
  border-radius: 20px;
  padding: 24px 28px;
  font-size: 1.1rem;
  line-height: 1.7;
  border-left: 6px solid var(--orange);
}
.etapes-zone {
  background: #EBF4FF;
  border-radius: 16px;
  padding: 16px 20px;
}
.etapes-zone ol { margin: 8px 0 0 16px; }
.etapes-zone li { margin-bottom: 4px; font-size: 0.95rem; }

/* ---- PARTAGE ILLUSTRÉ ---- */
.partage-zone {
  font-size: 2rem;
  letter-spacing: 4px;
  background: #f8f9fa;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  line-height: 1.8;
}

/* ---- ASTUCES & TAGS ---- */
.astuces-zone {
  background: #D0EBFF;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 0.95rem;
}
.astuce-tag {
  display: inline-block;
  background: var(--blue);
  color: white;
  border-radius: 8px;
  padding: 2px 10px;
  font-size: 0.85rem;
  margin: 2px 4px;
  font-family: 'Fredoka One', cursive;
}

/* ---- FIGURES DE STYLE ---- */
.revision-cat {
  font-family: 'Fredoka One', cursive;
  font-size: 0.95rem;
  background: var(--purple);
  color: white;
  display: inline-block;
  padding: 4px 16px;
  border-radius: 50px;
  margin-bottom: 12px;
}

/* ---- SUJETS DE RÉDACTION ---- */
.sujet-zone {
  background: linear-gradient(135deg, #F3E8FF, #EBF4FF);
  border-radius: 20px;
  padding: 24px;
}
.sujet-type {
  font-family: 'Fredoka One', cursive;
  font-size: 0.9rem;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.sujet-enonce { font-size: 1.1rem; line-height: 1.6; font-weight: 700; margin-bottom: 12px; }
.mots-cles-zone { font-size: 0.9rem; color: #555; }
.fun-textarea {
  width: 100%;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  border: 3px solid #dee2e6;
  border-radius: 16px;
  padding: 16px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  background: #FAFAFA;
}
.fun-textarea:focus { border-color: var(--purple); background: #F3E8FF; }

/* ---- DISCOURS DIRECT ---- */
.discours-ex {
  font-style: italic;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 12px 20px;
  margin: 6px 0;
  font-size: 1.05rem;
}

/* ---- NOTES DISPLAY ---- */
.notes-display {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
}

/* ---- SIGNE CARDS (niveaux avancés) ---- */
.geo-figure-zone { padding: 10px; background: #f8f9fa; border-radius: 16px; }

/* ---- EXERCICE ZONE ---- */
.exercice-zone {
  min-height: 40px;
}