@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:Inter,sans-serif;color:#201a2d;background:#faf9fc;--bg:#faf9fc;--card:#fff;--text:#201a2d;--muted:#736b7d;--border:#e7e2ec;--primary:#7c3aed;--primary2:#db2777;--sidebar:#241532;--sidebarText:#f6efff;--ok:#059669;--bad:#dc2626}
:root.dark{--bg:#15121b;--card:#211b29;--text:#f5f1f8;--muted:#b2a8bd;--border:#3a3145;--sidebar:#100b17;--sidebarText:#fff}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);min-height:100vh} button,input{font:inherit} button{cursor:pointer}.app{min-height:100vh;display:flex}.sidebar{width:258px;background:var(--sidebar);color:var(--sidebarText);padding:22px 14px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:12px;align-items:center;padding:0 10px 20px;color:inherit;text-decoration:none}.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#ec4899);display:grid;place-items:center;font:700 20px 'Space Grotesk';color:#fff}.brand strong{font:700 18px 'Space Grotesk'}.brand small{display:block;opacity:.65;margin-top:2px}.nav{display:grid;gap:4px}.nav a{display:flex;gap:11px;align-items:center;color:rgba(255,255,255,.72);text-decoration:none;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px}.nav a:hover,.nav a.active{background:linear-gradient(90deg,rgba(139,92,246,.38),rgba(236,72,153,.24));color:white}.nav svg{width:18px}.version{margin-top:auto;text-align:center;font-size:11px;opacity:.45;padding-top:12px}.content{margin-left:258px;width:calc(100% - 258px);min-height:100vh}.mobileHeader{display:none}.page{padding:28px;max-width:1180px;margin:0 auto}.hero{border-radius:26px;padding:28px;color:#fff;background:linear-gradient(120deg,#6d28d9,#c026d3 55%,#f97316);box-shadow:0 16px 40px rgba(109,40,217,.22)}.hero h1{font:700 30px 'Space Grotesk';margin:0 0 8px}.hero p{margin:0;max-width:720px;opacity:.88}.grid{display:grid;gap:16px}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}.grid2{grid-template-columns:repeat(2,1fr)}.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 6px 20px rgba(31,19,49,.04)}.card h2,.card h3{font-family:'Space Grotesk';margin-top:0}.stat .value{font:700 28px 'Space Grotesk'}.muted{color:var(--muted)}.sectionTitle{font:700 19px 'Space Grotesk';margin:30px 0 14px}.btn{border:0;border-radius:11px;padding:10px 14px;font-weight:700;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}.btn.secondary{background:var(--card);border:1px solid var(--border);color:var(--text)}.btn.good{background:#059669}.btn.bad{background:#dc2626}.btn:disabled{opacity:.45;cursor:not-allowed}.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 9px;border-radius:999px;background:rgba(124,58,237,.1);color:#7c3aed;font-size:12px;font-weight:700}.progress{height:9px;background:rgba(124,58,237,.1);border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#ec4899);border-radius:inherit}.category{display:flex;align-items:center;gap:14px;text-align:left;width:100%}.catIcon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:25px;background:linear-gradient(135deg,#ede9fe,#fce7f3)}.category strong{font-family:'Space Grotesk'}.category .grow{flex:1}.lessonCard{min-height:310px;display:flex;flex-direction:column;justify-content:space-between}.label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--muted)}.bigPhrase{font:600 25px 'Space Grotesk';line-height:1.35}.english{font-size:21px;color:#6d28d9;font-weight:700}.actions{display:flex;gap:10px;flex-wrap:wrap}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.back{color:var(--muted);text-decoration:none;font-weight:700}.question{font:600 21px 'Space Grotesk';line-height:1.4}.input{width:100%;border:1px solid var(--border);background:var(--card);color:var(--text);padding:14px;border-radius:12px;outline:none}.input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.13)}.option{width:100%;padding:13px 14px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:12px;text-align:left}.option:hover{border-color:#a78bfa}.option.correct{background:#ecfdf5;border-color:#6ee7b7;color:#065f46}.option.wrong{background:#fef2f2;border-color:#fca5a5;color:#991b1b}.feedback{padding:13px;border-radius:12px;margin-top:12px}.feedback.good{background:#ecfdf5;color:#065f46}.feedback.bad{background:#fef2f2;color:#991b1b}.scenarioWrap{max-width:700px;margin:0 auto;background:#e9e1d8;border-radius:24px;overflow:hidden;min-height:70vh}.chatHead{padding:16px 18px;background:linear-gradient(90deg,#6d28d9,#7e22ce);color:#fff}.chat{padding:20px;display:grid;gap:13px}.bubbleRow{display:flex}.bubbleRow.client{justify-content:flex-end}.bubble{max-width:78%;padding:12px 14px;border-radius:17px;background:#fff;color:#26212c;box-shadow:0 3px 10px rgba(0,0,0,.06)}.client .bubble{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff}.bubble small{display:block;opacity:.68;margin-top:6px}.badge.locked{opacity:.45;filter:grayscale(.8)}.badgeEmoji{font-size:34px}.settingsRow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}.choiceGroup{display:flex;gap:8px;flex-wrap:wrap}.choice{border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 10px;border-radius:10px}.choice.active{border-color:#8b5cf6;background:rgba(139,92,246,.1);color:#7c3aed}.offline{position:fixed;z-index:60;left:50%;transform:translateX(-50%);top:12px;background:#b91c1c;color:#fff;padding:9px 14px;border-radius:999px;font-weight:700;font-size:13px}.score{font:800 44px 'Space Grotesk'}.center{text-align:center}.spacer{height:12px}.flashcard{min-height:300px;display:grid;place-items:center;text-align:center;cursor:pointer;perspective:1000px}.flashInner{width:100%;min-height:260px;border-radius:20px;background:linear-gradient(135deg,#fff,#f5f3ff);border:1px solid var(--border);display:grid;place-items:center;padding:28px;color:#211a2b}.dark .flashInner{background:linear-gradient(135deg,#211b29,#2e2539);color:var(--text)}.quickLink{text-decoration:none;color:inherit}.quickLink .card{height:100%;transition:.18s transform,.18s box-shadow}.quickLink:hover .card{transform:translateY(-3px);box-shadow:0 12px 28px rgba(31,19,49,.09)}
@media(max-width:900px){.sidebar{display:none}.content{margin-left:0;width:100%}.mobileHeader{display:flex;position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:10px 14px;align-items:center;justify-content:space-between}.dark .mobileHeader{background:rgba(21,18,27,.92)}.mobileNav{display:flex;overflow:auto;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--card)}.mobileNav a{white-space:nowrap;text-decoration:none;color:var(--muted);font-size:13px;font-weight:700;padding:7px 9px;border-radius:9px}.mobileNav a.active{background:rgba(124,58,237,.12);color:#7c3aed}.page{padding:18px}.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid2,.grid3,.grid4{grid-template-columns:1fr}.hero{padding:22px;border-radius:20px}.hero h1{font-size:25px}.bigPhrase{font-size:22px}.page{padding:14px}.card{padding:16px}.actions .btn{flex:1}.scenarioWrap{border-radius:0;margin:-14px;min-height:calc(100vh - 98px)}}
.back{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:6px}.category{border:1px solid var(--border)}
.mobileNav {
  display: none !important;
}/* ========================================
   DASHBOARD TAXISPEAK PRO
   ======================================== */

.heroEnhanced {
  position: relative;
  overflow: hidden;
}

.heroEnhanced::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  right: -55px;
  top: -85px;
}

.heroPill {
  background: rgba(255,255,255,.16);
  color: #fff;
  margin-bottom: 7px;
}


/* REPRENDRE + NIVEAU */

.dashboardFocusGrid {
  margin-top: 18px;
}

.resumeCard,
.levelCard {
  min-height: 190px;
}

.resumeCard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
  background:
    linear-gradient(
      135deg,
      var(--card),
      rgba(124,58,237,.055)
    );
}

.focusIcon,
.statIcon,
.motivationIcon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(124,58,237,.1);
  color: #7c3aed;
  flex: 0 0 auto;
}

.focusContent h2,
.levelCard h2 {
  margin: 4px 0 5px;
  font-size: 22px;
}

.focusContent p {
  margin: 0;
}

.resumeButton {
  grid-column: 1 / -1;
  width: max-content;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}


/* NIVEAU */

.levelHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.levelBadge {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #db2777
    );
  color: #fff;
  font:
    800 21px
    'Space Grotesk';
}

.levelMeta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 17px;
}

.levelProgress {
  margin-top: 8px;
  height: 11px;
}

.levelNote {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  margin: 12px 0 0;
}


/* CARTES DE PROGRESSION */

.statEnhanced {
  transition:
    .18s transform,
    .18s box-shadow;
}

.statEnhanced:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 26px
    rgba(31,19,49,.08);
}

.statTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.statPercent {
  font-size: 12px;
  font-weight: 800;
  color: #7c3aed;
  background:
    rgba(124,58,237,.08);
  padding: 5px 8px;
  border-radius: 999px;
}


/* OBJECTIF DU JOUR */

.dashboardSecondaryGrid {
  margin-top: 16px;
}

.goalHeader {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
}

.goalHeader h2 {
  margin: 4px 0 0;
}

.goalScore {
  font:
    800 30px
    'Space Grotesk';
  color: #7c3aed;
}

.goalProgress {
  margin: 16px 0;
}

.goalItems {
  display: grid;
  gap: 9px;
}

.goalItem {
  display: grid;
  grid-template-columns:
    auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 11px;
  background:
    rgba(124,58,237,.055);
  color: var(--muted);
  font-size: 13px;
}

.goalItem svg {
  color: #a89db4;
}

.goalItem.done {
  background: #ecfdf5;
  color: #065f46;
}

.goalItem.done svg {
  color: #059669;
}

.goalItem strong {
  font-family:
    'Space Grotesk';
}


/* SERIE + BADGES */

.motivationCard {
  display: grid;
  grid-template-columns:
    1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.motivationRow {
  display: flex;
  gap: 13px;
  align-items: center;
}

.motivationValue {
  font:
    800 32px
    'Space Grotesk';
  line-height: 1;
  margin-top: 6px;
}

.smallScore {
  font-size: 15px;
}

.motivationDivider {
  width: 1px;
  height: 72px;
  background: var(--border);
}

.textLink {
  display: inline-block;
  margin-top: 6px;
  color: #7c3aed;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.textLink:hover {
  text-decoration: underline;
}


/* PARCOURS RECOMMANDE */

.sectionHeadingRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-top: 28px;
}

.noBottomMargin {
  margin-bottom: 4px;
}

.sectionSubtitle {
  margin: 0 0 2px;
  font-size: 13px;
}

.recommendedCard {
  position: relative;
  min-height: 160px;
}

.recommendedCard.recommendedNow {
  border-color:
    rgba(124,58,237,.42);

  box-shadow:
    0 10px 28px
    rgba(124,58,237,.09);
}

.recommendedTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.recommendedCard h3 {
  margin: 16px 0 6px;
}

.statusPill {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
  background:
    rgba(124,58,237,.1);
  color: #7c3aed;
}

.statusPill.done {
  background: #ecfdf5;
  color: #047857;
}


/* CONSEIL */

.dashboardTip {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
}

.dashboardTip svg {
  color: #7c3aed;
  flex: 0 0 auto;
}

.dashboardTip .muted {
  font-size: 13px;
  margin-top: 3px;
}


/* TABLETTE */

@media(max-width:900px) {

  .dashboardFocusGrid {
    grid-template-columns: 1fr;
  }

  .motivationCard {
    grid-template-columns: 1fr;
  }

  .motivationDivider {
    width: 100%;
    height: 1px;
  }
}


/* TELEPHONE */

@media(max-width:620px) {

  .resumeCard {
    grid-template-columns: 1fr;
  }

  .resumeButton {
    width: 100%;
  }

  .levelMeta {
    flex-direction: column;
    gap: 4px;
  }

  .sectionHeadingRow {
    align-items: flex-start;
  }

  .recommendedGrid {
    grid-template-columns: 1fr;
  }
}/* ========================================
   LEÇONS - FICHE PEDAGOGIQUE
   ======================================== */

.lessonSituation {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.06),
      rgba(236,72,153,.035)
    );
}

.lessonSectionIcon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #7c3aed;
  background:
    rgba(124,58,237,.1);
}


.lessonLanguageBlock {
  padding-bottom: 18px;
  border-bottom:
    1px solid var(--border);
}


.lessonEnglishBlock {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background:
    rgba(124,58,237,.055);
}


.lessonEnglishBlock .english {
  font-size: 25px;
  line-height: 1.35;
}


.lessonLearningBlock {
  margin-top: 22px;
  padding-top: 18px;
  border-top:
    1px solid var(--border);
}


.lessonBlockTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  margin-bottom: 12px;
}


.lessonBlockTitle svg {
  color: #7c3aed;
}


.lessonVocabulary {
  display: grid;
  gap: 8px;
}


.lessonVocabularyRow {
  display: grid;
  grid-template-columns:
    minmax(120px, .6fr)
    1fr;
  gap: 15px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 10px;
  background:
    rgba(124,58,237,.045);
}


.lessonVocabularyRow strong {
  color: #7c3aed;
}


.lessonSmallText {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}


.lessonTip {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #fffbeb;
  border:
    1px solid #fde68a;
}


.lessonTip svg {
  flex: 0 0 auto;
  color: #d97706;
}


.lessonAcquired {
  margin-top: 20px;
}


.lessonAcquired.acquired {
  background: #059669;
}


.lessonCompletedMessage {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #059669;
  font-size: 13px;
  font-weight: 700;
}


.lessonCounter {
  font-size: 13px;
  font-weight: 700;
}


/* MOBILE */

@media(max-width:620px) {

  .lessonEnglishBlock .english {
    font-size: 21px;
  }

  .lessonVocabularyRow {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .lessonNavigation {
    display: grid;
    grid-template-columns:
      1fr 1fr;
  }

  .lessonCounter {
    display: none;
  }

}/* Correction espace vide dans les fiches Leçons */

.lessonLearningPage .lessonCard {
  min-height: 0;
  height: auto;
  justify-content: flex-start;
  gap: 22px;
}

.lessonLearningPage .lessonLanguageBlock {
  margin-bottom: 0;
}

.lessonLearningPage .lessonCard > div {
  width: 100%;
}/* ========================================
   ORAL - ENTRAINEMENT PEDAGOGIQUE
   ======================================== */

.oralInstruction {
  display: flex;
  gap: 14px;
  align-items: center;
  background:
    linear-gradient(
      135deg,
      rgba(236,72,153,.06),
      rgba(124,58,237,.04)
    );
}

.oralInstructionIcon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #db2777;
  background:
    rgba(236,72,153,.1);
}


.oralMainCard {
  padding: 26px;
}


.oralTarget {
  font-size: 28px;
  line-height: 1.35;
  margin:
    10px 0 18px;
}


.oralTranslation {
  padding: 12px 14px;
  border-radius: 12px;
  background:
    rgba(124,58,237,.045);
  margin-bottom: 22px;
}


.oralTranslation .label {
  display: block;
  margin-bottom: 5px;
}


.oralStep {
  display: grid;
  grid-template-columns:
    auto 1fr;
  gap: 14px;
  padding:
    20px 0;
  border-top:
    1px solid var(--border);
}


.oralStepNumber {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #db2777
    );
  color: white;
  font-weight: 800;
}


.oralStepContent {
  min-width: 0;
}


.oralHelp {
  margin:
    6px 0 12px;
  font-size: 14px;
}


.oralMicButton {
  min-width: 190px;
}


.oralMicButton.listening {
  background: #db2777;
}


.oralAnalysis {
  margin-top: 14px;
  padding: 18px;
  border-radius: 15px;
  background:
    rgba(124,58,237,.045);
  border:
    1px solid var(--border);
}


.oralRecognized {
  font-size: 20px;
  font-weight: 700;
  margin:
    8px 0 16px;
}


.oralScoreRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 7px;
}


.oralScoreRow strong {
  color: #7c3aed;
}


.oralScoreProgress {
  margin-bottom: 14px;
}


.oralFeedback {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 13px;
  border-radius: 11px;
  font-size: 13px;
}


.oralFeedback.good {
  background: #ecfdf5;
  color: #047857;
}


.oralFeedback.warning {
  background: #fff7ed;
  color: #9a3412;
}


.oralFeedback svg {
  flex: 0 0 auto;
}


.oralFeedback strong {
  display: block;
  margin-bottom: 3px;
}


.oralNextButton {
  width: 100%;
  justify-content: center;
}


.oralDisclaimer {
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}


/* MOBILE */

@media(max-width:620px) {

  .oralMainCard {
    padding: 18px;
  }

  .oralTarget {
    font-size: 23px;
  }

  .oralStep {
    grid-template-columns: 1fr;
  }

  .oralStepNumber {
    width: 30px;
    height: 30px;
  }

  .oralMicButton {
    width: 100%;
  }

}/* ========================================
   DICTEE AUDIO
   ======================================== */

.dicteeInstruction {
  display: flex;
  gap: 14px;
  align-items: center;
  background:
    linear-gradient(
      135deg,
      rgba(6,182,212,.07),
      rgba(20,184,166,.045)
    );
}

.dicteeInstructionIcon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #0891b2;
  background: rgba(6,182,212,.11);
}

.dicteeMainCard {
  padding: 26px;
}

.dicteeHeadphones {
  color: #0891b2;
}

.dicteeQuestion {
  margin-top: 25px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.dicteeOptions {
  margin-top: 12px;
  gap: 9px;
}

.dicteeOption {
  text-align: left;
  padding: 14px 16px;
  font-size: 14px;
  cursor: pointer;
}

.dicteeOption.correct {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
  font-weight: 700;
}

.dicteeOption.wrong {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}

.dicteeCorrection {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.dicteeResult {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: 12px;
}

.dicteeResult.good {
  color: #047857;
  background: #ecfdf5;
}

.dicteeResult.bad {
  color: #b91c1c;
  background: #fef2f2;
}

.dicteeResult svg {
  flex: 0 0 auto;
}

.dicteeResult strong {
  display: block;
  margin-bottom: 3px;
}

.dicteePhraseReveal {
  margin-top: 16px;
  padding: 17px;
  border-radius: 14px;
  background: rgba(6,182,212,.055);
}

.dicteePhraseReveal .english {
  margin-top: 6px;
  font-size: 23px;
  line-height: 1.35;
}

.dicteeFrench {
  margin-top: 5px;
  font-weight: 700;
}

.dicteeLearningBlock {
  margin-top: 20px;
}

.dicteeBlockTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  margin-bottom: 10px;
}

.dicteeBlockTitle svg {
  color: #0891b2;
}

.dicteeVocabulary {
  display: grid;
  gap: 7px;
}

.dicteeVocabularyRow {
  display: grid;
  grid-template-columns:
    minmax(130px, .5fr)
    1fr;
  gap: 14px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(6,182,212,.045);
}

.dicteeVocabularyRow strong {
  color: #0891b2;
}

.dicteeTip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 17px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.dicteeTip svg {
  flex: 0 0 auto;
  color: #d97706;
}

.dicteeTip .muted {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
}

.dicteeNextButton {
  margin-left: auto;
}


/* MOBILE */

@media(max-width:620px) {

  .dicteeMainCard {
    padding: 18px;
  }

  .dicteePhraseReveal .english {
    font-size: 20px;
  }

  .dicteeVocabularyRow {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .dicteeNextButton {
    margin-left: 0;
    width: 100%;
  }
}/* ========================================
   SCENARIOS INTERACTIFS TAXI / VTC
   ======================================== */

.scenarioSelector {
  padding: 0;
  overflow: hidden;
}

.scenarioSelectorMain {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.scenarioSelectorMain:hover {
  background:
    rgba(124,58,237,.035);
}

.scenarioResumeLabel {
  margin-top: 7px;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 800;
}


/* HEADER */

.scenarioProfessionalHeader {
  padding: 22px;
  border-radius: 18px;
  color: white;
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #9333ea,
      #db2777
    );
}

.scenarioBack {
  color: rgba(255,255,255,.88);
}

.scenarioHeaderContent {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 17px;
}

.scenarioHeaderIcon {
  width: 55px;
  height: 55px;
  border-radius: 17px;
  background:
    rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  font-size: 28px;
  flex: 0 0 auto;
}

.scenarioHeaderContent h1 {
  margin: 3px 0 4px;
  color: white;
}

.scenarioHeaderContent p {
  margin: 0;
  opacity: .88;
}

.scenarioHeaderLabel {
  color:
    rgba(255,255,255,.76);
}

.scenarioHeaderStats {
  margin-top: 18px;
  padding-top: 13px;
  border-top:
    1px solid
    rgba(255,255,255,.18);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}


/* CLIENT */

.scenarioClientCard {
  border-left:
    4px solid #0ea5e9;
}

.scenarioSpeaker {
  display: flex;
  align-items: center;
  gap: 11px;
}

.scenarioAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
}

.scenarioAvatar.client {
  background: #e0f2fe;
}

.scenarioClientPhrase {
  margin: 20px 0;
  padding: 18px;
  border-radius: 14px;
  background: #f0f9ff;
  color: #0c4a6e;
  font:
    700 22px/1.45
    'Space Grotesk';
}

.scenarioTranslation {
  margin: -8px 0 16px;
  padding: 11px 13px;
  background: #f8fafc;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
}


/* QUESTION */

.scenarioQuestionTitle {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 16px;
}

.scenarioQuestionTitle svg {
  color: #7c3aed;
}

.scenarioChoices {
  display: grid;
  gap: 10px;
}

.scenarioChoice {
  width: 100%;
  display: grid;
  grid-template-columns:
    auto 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  border:
    1px solid var(--border);
  border-radius: 13px;
  background: var(--card);
  color: inherit;
  padding: 14px;
  cursor: pointer;
  font: inherit;
  transition:
    transform .15s,
    border-color .15s,
    background .15s;
}

.scenarioChoice:hover:not(:disabled) {
  transform:
    translateY(-1px);
  border-color:
    rgba(124,58,237,.45);
  background:
    rgba(124,58,237,.035);
}

.scenarioChoice:disabled {
  cursor: default;
}

.scenarioChoiceLetter {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
  font-weight: 800;
}

.scenarioChoice.correct {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

.scenarioChoice.correct
.scenarioChoiceLetter {
  background: #10b981;
  color: white;
}

.scenarioChoice.wrong {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}

.scenarioChoice.wrong
.scenarioChoiceLetter {
  background: #ef4444;
  color: white;
}


/* FEEDBACK */

.scenarioFeedbackArea {
  margin-top: 20px;
  padding-top: 20px;
  border-top:
    1px solid var(--border);
}

.scenarioFeedback {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
}

.scenarioFeedback.good {
  background: #ecfdf5;
  color: #047857;
}

.scenarioFeedback.bad {
  background: #fef2f2;
  color: #b91c1c;
}

.scenarioFeedback svg {
  flex: 0 0 auto;
}

.scenarioFeedback strong {
  display: block;
  margin-bottom: 3px;
}


/* MODELE DE REPONSE */

.scenarioModelAnswer {
  margin-top: 16px;
  padding: 18px;
  border-radius: 14px;
  background:
    rgba(124,58,237,.055);
}

.scenarioModelAnswer .english {
  margin: 7px 0 12px;
  font-size: 22px;
  line-height: 1.4;
}

.scenarioDriverTranslation {
  margin-top: 5px;
  font-weight: 700;
}


/* CONSEIL */

.scenarioTip {
  margin-top: 16px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  background: #fffbeb;
  border:
    1px solid #fde68a;
}

.scenarioTip svg {
  color: #d97706;
  flex: 0 0 auto;
}

.scenarioTip .muted {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
}

.scenarioNextButton {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}


/* RESULTAT */

.scenarioResultCard {
  padding: 30px;
}

.scenarioResultIcon {
  width: 65px;
  height: 65px;
  margin:
    0 auto 10px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #7c3aed;
  background:
    rgba(124,58,237,.1);
}

.scenarioResultScenario {
  margin:
    18px 0;
  padding: 13px;
  border-radius: 12px;
  background:
    rgba(124,58,237,.045);
}


/* MOBILE */

@media(max-width:620px) {

  .scenarioHeaderContent {
    align-items:
      flex-start;
  }

  .scenarioHeaderIcon {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }

  .scenarioHeaderStats {
    flex-direction:
      column;
    gap: 3px;
  }

  .scenarioClientPhrase {
    font-size: 19px;
  }

  .scenarioChoice {
    grid-template-columns:
      auto 1fr;
  }

  .scenarioModelAnswer .english {
    font-size: 19px;
  }

}/* ========================================
   SCENARIOS - NIVEAUX PEDAGOGIQUES
   ======================================== */

.scenarioFeedback.acceptable {
  background: #fff7ed;
  color: #c2410c;
}

.scenarioChoice.acceptable {
  border-color: #fb923c;
  background: #fff7ed;
  color: #9a3412;
}

.scenarioChoice.acceptable
.scenarioChoiceLetter {
  background: #fb923c;
  color: #fff;
}

.scenarioChoiceLevel {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

@media(max-width:620px) {

  .scenarioChoice {
    grid-template-columns: auto 1fr;
  }

  .scenarioChoiceLevel {
    grid-column: 2;
    margin-left: 0;
    margin-top: 4px;
  }
}/* ========================================
   QCM / EXAMEN BLANC
   ======================================== */

.qcmModeGrid {
  margin-top: 10px;
}

.qcmModeCard {
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--border);
  color: inherit;
  font: inherit;
  transition:
    transform .18s,
    box-shadow .18s,
    border-color .18s;
}

.qcmModeCard:hover {
  transform: translateY(-2px);
  border-color:
    rgba(124,58,237,.38);
  box-shadow:
    0 14px 30px
    rgba(31,19,49,.08);
}

.qcmModeIcon {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.qcmModeIcon.training {
  background:
    rgba(124,58,237,.10);
  color: #7c3aed;
}

.qcmModeIcon.exam {
  background:
    rgba(5,150,105,.10);
  color: #059669;
}

.qcmModeCard h2 {
  margin:
    4px 0 8px;
}

.qcmFeatureList {
  display: grid;
  gap: 7px;
  margin:
    18px 0;
  font-size: 13px;
  color: var(--muted);
}

.qcmModeButton {
  display: inline-flex;
}

.qcmSummaryCard {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.qcmSummaryCard svg {
  color: #7c3aed;
}


/* LISTE DES TESTS */

.qcmTestCard {
  position: relative;
  cursor: pointer;
  min-height: 145px;
}

.qcmTestCard.passed {
  border-color:
    rgba(5,150,105,.35);
}

.qcmPassedIcon {
  position: absolute;
  top: 13px;
  right: 13px;
}

.qcmTestNumber {
  width: 42px;
  height: 42px;
  margin:
    0 auto 8px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.08);
  color: #7c3aed;
  font:
    800 16px
    'Space Grotesk';
}

.qcmLegend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}


/* QUESTION */

.qcmQuestionCard {
  padding: 26px;
}

.qcmOptions {
  margin-top: 18px;
  gap: 9px;
}

.qcmOption {
  text-align: left;
  padding: 14px 16px;
}

.qcmOption.selectedExam {
  border-color: #7c3aed;
  background:
    rgba(124,58,237,.08);
  color: #5b21b6;
  font-weight: 700;
}

.qcmImmediateFeedback {
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.qcmImmediateFeedback.good {
  background: #ecfdf5;
  color: #047857;
}

.qcmImmediateFeedback.bad {
  background: #fef2f2;
  color: #b91c1c;
}

.qcmImmediateFeedback svg {
  flex: 0 0 auto;
}

.qcmImmediateFeedback strong {
  display: block;
  margin-bottom: 4px;
}

.qcmCorrectAnswer {
  margin-top: 5px;
  font-weight: 800;
}

.qcmExamSelected {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 10px;
  background:
    rgba(124,58,237,.055);
  color: #6d28d9;
  font-size: 13px;
  font-weight: 700;
}


/* RESULTAT */

.qcmResultCard {
  padding: 32px;
}

.qcmResultCard.passed {
  border-color:
    rgba(5,150,105,.30);
}

.qcmResultIcon {
  width: 68px;
  height: 68px;
  margin:
    0 auto 12px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
}

.qcmResultCard.passed
.qcmResultIcon {
  background: #ecfdf5;
  color: #059669;
}

.qcmPercentage {
  margin-top: -5px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 800;
}

.qcmThreshold {
  display: inline-block;
  margin:
    8px 0 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 13px;
}

.qcmThreshold.passed {
  background: #ecfdf5;
  color: #047857;
}


/* CORRECTION */

.qcmReviewList {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.qcmReviewItem {
  border-left:
    4px solid var(--border);
}

.qcmReviewItem.correct {
  border-left-color: #10b981;
}

.qcmReviewItem.wrong {
  border-left-color: #ef4444;
}

.qcmReviewHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.qcmReviewStatus {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.qcmReviewStatus.correct {
  background: #ecfdf5;
  color: #047857;
}

.qcmReviewStatus.wrong {
  background: #fef2f2;
  color: #b91c1c;
}

.qcmWrongAnswer {
  color: #b91c1c;
  font-weight: 700;
}

.qcmGoodAnswer {
  color: #047857;
  font-weight: 800;
}


/* MOBILE */

@media(max-width:620px) {

  .qcmModeCard {
    flex-direction: column;
  }

  .qcmQuestionCard {
    padding: 18px;
  }

  .qcmReviewHeader {
    flex-direction: column;
  }
}/* ========================================
   REVISION INTELLIGENTE
   ======================================== */

.revisionPriorityCard {
  margin-top: 18px;
  padding: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.06),
      rgba(236,72,153,.035)
    );
}

.revisionPriorityHeader {
  display: flex;
  gap: 14px;
  align-items: center;
}

.revisionPriorityHeader h2 {
  margin:
    4px 0 0;
}

.revisionPriorityIcon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #7c3aed;
  background:
    rgba(124,58,237,.10);
}

.revisionStatsGrid {
  display: grid;
  grid-template-columns:
    repeat(2, 1fr);
  gap: 10px;
  margin:
    20px 0;
}

.revisionStat {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px;
  border-radius: 12px;
  background:
    rgba(255,255,255,.7);
  border:
    1px solid var(--border);
}

.revisionStatIcon {
  font-size: 24px;
}

.revisionStat strong {
  display: block;
  font-size: 20px;
  color: #7c3aed;
}

.revisionStat span {
  font-size: 12px;
  color: var(--muted);
}

.revisionMainButton {
  width: 100%;
  justify-content: center;
}

.revisionModeCard {
  border:
    1px solid var(--border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
}

.revisionModeIcon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
}

.revisionModeIcon.quick {
  color: #d97706;
  background: #fffbeb;
}

.revisionModeIcon.general {
  color: #7c3aed;
  background:
    rgba(124,58,237,.09);
}

.revisionModeCard strong {
  display: block;
  margin-bottom: 4px;
}

.revisionInfo {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
  border:
    1px solid var(--border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.revisionInfo svg {
  flex: 0 0 auto;
  color: #d97706;
}

.revisionInfo strong {
  display: block;
  color: var(--text);
  margin-bottom: 3px;
}


/* SESSION */

.revisionQuestionCard {
  padding: 26px;
}

.revisionSessionHeader {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.revisionSessionScore {
  padding: 7px 10px;
  border-radius: 999px;
  background:
    rgba(5,150,105,.08);
  color: #047857;
  font-size: 12px;
  font-weight: 800;
}

.revisionFrenchPhrase {
  margin:
    25px 0 20px;
  font:
    700 27px/1.4
    'Space Grotesk';
}

.revisionAnswerBlock {
  margin-top: 22px;
  padding-top: 20px;
  border-top:
    1px solid var(--border);
}

.revisionInput {
  margin-top: 8px;
  font-size: 16px;
}

.revisionFeedbackArea {
  margin-top: 18px;
}

.revisionFeedback {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px;
  border-radius: 12px;
}

.revisionFeedback.good {
  background: #ecfdf5;
  color: #047857;
}

.revisionFeedback.bad {
  background: #fef2f2;
  color: #b91c1c;
}

.revisionFeedback svg {
  flex: 0 0 auto;
}

.revisionFeedback strong {
  display: block;
  margin-bottom: 3px;
}

.revisionExpected {
  margin-top: 13px;
  padding: 15px;
  border-radius: 12px;
  background:
    rgba(124,58,237,.05);
}

.revisionExpected .english {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.4;
}

.revisionAdvice {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}

.revisionValidateButton {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}


/* RESULTAT */

.revisionResultCard {
  padding: 30px;
}

.revisionResultIcon {
  width: 66px;
  height: 66px;
  margin:
    0 auto 10px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #7c3aed;
  background:
    rgba(124,58,237,.09);
}

.revisionResultStats {
  display: grid;
  grid-template-columns:
    repeat(2, 1fr);
  gap: 10px;
  margin:
    20px 0;
}

.revisionResultStats > div {
  padding: 13px;
  border-radius: 12px;
  background: #f8fafc;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.revisionResultStats svg {
  color: #7c3aed;
}

.revisionResultStats strong {
  font-size: 20px;
}

.revisionResultStats span {
  font-size: 11px;
  color: var(--muted);
}


/* MOBILE */

@media(max-width:620px) {

  .revisionStatsGrid {
    grid-template-columns: 1fr;
  }

  .revisionQuestionCard {
    padding: 18px;
  }

  .revisionSessionHeader {
    align-items:
      flex-start;
    flex-direction:
      column;
  }

  .revisionFrenchPhrase {
    font-size: 22px;
  }

  .revisionResultStats {
    grid-template-columns: 1fr 1fr;
  }
}/* ========================================
   FLASHCARDS INTELLIGENTES
   ======================================== */

.flashDirectionCard {
  margin-top: 18px;
  padding: 20px;
}

.flashDirectionHeader {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 15px;
}

.flashDirectionHeader svg {
  color: #7c3aed;
}

.flashDirectionButtons {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}


/* CATEGORIES */

.flashCategoryCard {
  padding: 0;
  overflow: hidden;
}

.flashCategoryMain {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 17px;
  cursor: pointer;
}

.flashCategoryMain:hover {
  background:
    rgba(124,58,237,.035);
}

.flashResume {
  margin-top: 5px;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 800;
}

.flashCategoryStats {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding:
    10px 12px;
  border-top:
    1px solid var(--border);
  background: #f8fafc;
}

.flashStat {
  font-size: 11px;
  font-weight: 800;
}

.flashDifficultButton {
  width: 100%;
  border: 0;
  border-top:
    1px solid var(--border);
  background: #fff7ed;
  color: #9a3412;
  padding: 9px 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}


/* SESSION */

.flashSessionInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
}

.flashSessionInfo strong {
  display: block;
}

.flashSessionInfo span {
  color: var(--muted);
  font-size: 11px;
}


/* CARTE */

.smartFlashcard {
  width: 100%;
  min-height: 330px;
  border:
    1px solid var(--border);
  border-radius: 22px;
  padding: 34px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      rgba(124,58,237,.035)
    );
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    0 16px 35px
    rgba(31,19,49,.07);
  transition:
    transform .18s,
    box-shadow .18s,
    border-color .18s;
}

.smartFlashcard:hover {
  transform:
    translateY(-2px);
  border-color:
    rgba(124,58,237,.35);
  box-shadow:
    0 20px 40px
    rgba(31,19,49,.10);
}

.smartFlashcard.flipped {
  background:
    linear-gradient(
      145deg,
      rgba(124,58,237,.07),
      rgba(236,72,153,.045)
    );
}

.flashCardLanguage {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.smartFlashPhrase {
  max-width: 580px;
  font:
    700 29px/1.4
    'Space Grotesk';
}

.flashAudioButton {
  margin-top: 22px;
}

.flashFlipHint {
  margin-top: 26px;
  color: var(--muted);
  font-size: 11px;
}

.flashBeforeAnswer {
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}


/* EVALUATION */

.flashRatingTitle {
  margin:
    20px 0 10px;
  text-align: center;
  font-weight: 800;
}

.flashRatingButtons {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 10px;
}

.flashRating {
  border:
    1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: white;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.flashRating strong {
  font-size: 13px;
}

.flashRating span {
  font-size: 10px;
}

.flashRating.review {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.flashRating.almost {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}

.flashRating.acquired {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.flashRating:hover {
  transform:
    translateY(-1px);
}


/* RESULTAT */

.flashResultCard {
  padding: 30px;
}

.flashResultIcon {
  width: 66px;
  height: 66px;
  margin:
    0 auto 12px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
}

.flashResultStats {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 9px;
  width: 100%;
  margin:
    20px 0;
}

.flashResultStats > div {
  padding: 13px;
  border-radius: 12px;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.flashResultStats .acquired {
  background: #ecfdf5;
  color: #047857;
}

.flashResultStats .almost {
  background: #fff7ed;
  color: #c2410c;
}

.flashResultStats .review {
  background: #fef2f2;
  color: #b91c1c;
}

.flashResultStats strong {
  font-size: 20px;
}

.flashResultStats span {
  font-size: 10px;
  font-weight: 700;
}

.flashSessionSummary {
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 11px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}


/* MOBILE */

@media(max-width:620px) {

  .flashDirectionButtons {
    display: grid;
  }

  .smartFlashcard {
    min-height: 280px;
    padding: 24px 18px;
  }

  .smartFlashPhrase {
    font-size: 23px;
  }

  .flashRatingButtons {
    grid-template-columns: 1fr;
  }

  .flashRating {
    grid-template-columns:
      auto 1fr;
    justify-items: start;
    text-align: left;
    align-items: center;
  }

  .flashRating span {
    grid-column: 2;
  }

  .flashResultStats {
    grid-template-columns:
      repeat(3, 1fr);
  }
}/* ========================================
   TEST DE POSITIONNEMENT
   ======================================== */

.positioningIntro {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.06),
      rgba(236,72,153,.035)
    );
}

.positioningIntroIcon {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    rgba(124,58,237,.1);
  color: #7c3aed;
}

.positioningIntro h2 {
  margin:
    4px 0 7px;
}


.positioningSkills {
  margin-top: 14px;
}

.positioningSkill {
  display: flex;
  gap: 12px;
  align-items: center;
}

.positioningSkill svg {
  color: #7c3aed;
}

.positioningSkill strong {
  display: block;
}

.positioningSkill span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}


.positioningNotice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: #fffbeb;
  border:
    1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}

.positioningNotice svg {
  flex: 0 0 auto;
  color: #d97706;
}

.positioningNotice strong {
  display: block;
  margin-bottom: 3px;
}


.positioningPrevious {
  margin-top: 14px;
}


.positioningStartButton {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}


/* QUESTION */

.positioningQuestionCard {
  padding: 26px;
}

.positioningPrompt {
  margin:
    18px 0 24px;
  font:
    700 27px/1.4
    'Space Grotesk';
}

.positioningPrompt.english {
  color: #7c3aed;
}


.positioningAudio {
  text-align: center;
  padding:
    10px 0 20px;
}

.positioningAudio > svg {
  color: #7c3aed;
}


.positioningOptions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.positioningOption {
  text-align: left;
  padding: 14px 16px;
}

.positioningOption.selected {
  border-color: #7c3aed;
  background:
    rgba(124,58,237,.075);
  color: #6d28d9;
  font-weight: 700;
}


.positioningRecorded {
  margin-top: 15px;
  padding: 11px 13px;
  border-radius: 10px;
  background:
    rgba(124,58,237,.055);
  color: #6d28d9;
  font-size: 12px;
  font-weight: 700;
}


.positioningNextButton {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}


/* RESULTAT */

.positioningResultCard {
  padding: 32px;
}

.positioningResultIcon {
  width: 70px;
  height: 70px;
  margin:
    0 auto 12px;
  border-radius: 21px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
}

.positioningResultPercentage {
  margin:
    -5px 0 12px;
  color: var(--muted);
  font-weight: 800;
}

.positioningLevelBadge {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #db2777
    );
  color: white;
  font-size: 13px;
  font-weight: 800;
}


.positioningSectionResults {
  width: 100%;
  display: grid;
  gap: 14px;
  margin:
    24px 0;
  text-align: left;
}

.positioningSectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}


.positioningAnalysis {
  width: 100%;
  margin-top: 6px;
}

.positioningStrength,
.positioningWeakness {
  padding: 15px;
  border-radius: 12px;
  display: grid;
  gap: 7px;
  text-align: left;
}

.positioningStrength {
  background: #ecfdf5;
  color: #047857;
}

.positioningWeakness {
  background: #fff7ed;
  color: #9a3412;
}

.positioningStrength span,
.positioningWeakness span {
  font-size: 12px;
}


.positioningDisclaimer {
  margin:
    20px 0;
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}


/* MOBILE */

@media(max-width:620px) {

  .positioningIntro {
    align-items: flex-start;
  }

  .positioningIntroIcon {
    width: 48px;
    height: 48px;
  }

  .positioningQuestionCard {
    padding: 18px;
  }

  .positioningPrompt {
    font-size: 22px;
  }

  .positioningResultCard {
    padding: 20px;
  }
}/* ========================================
   DASHBOARD - POSITIONNEMENT
   ======================================== */

.dashboardPositioningCard {
  margin-top: 16px;
  display: grid;
  grid-template-columns:
    auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.045),
      rgba(236,72,153,.025)
    );
}

.dashboardPositioningCard.completed {
  border-color:
    rgba(124,58,237,.20);
}

.dashboardPositioningIcon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.10);
  color: #7c3aed;
}

.dashboardPositioningContent {
  min-width: 0;
}

.dashboardPositioningContent h2 {
  margin:
    4px 0 7px;
}

.dashboardPositioningMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.dashboardPositioningScore {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 5px;
}

.dashboardPositioningScore strong {
  font-size: 20px;
}

.dashboardPositioningScore span {
  padding: 4px 8px;
  border-radius: 999px;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
  font-size: 12px;
  font-weight: 800;
}

.dashboardPositioningDate {
  margin-top: 5px;
  font-size: 11px;
}

.dashboardPositioningBadge {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #db2777
    );
  color: #fff;
  font:
    800 17px
    'Space Grotesk';
}

.dashboardPositioningButton {
  white-space: nowrap;
}


/* MOBILE */

@media(max-width:720px) {

  .dashboardPositioningCard {
    grid-template-columns:
      auto 1fr;
  }

  .dashboardPositioningButton {
    grid-column:
      1 / -1;
    width: 100%;
    justify-content: center;
  }

}


@media(max-width:520px) {

  .dashboardPositioningCard {
    grid-template-columns: 1fr;
  }

  .dashboardPositioningIcon {
    width: 44px;
    height: 44px;
  }

  .dashboardPositioningMain {
    align-items: flex-start;
  }

}/* ========================================
   BADGES & RECOMPENSES
   ======================================== */

.badgesSummary {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.065),
      rgba(236,72,153,.035)
    );
}

.badgesSummaryIcon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.10);
  color: #7c3aed;
}

.badgesSummaryContent {
  width: 100%;
}

.badgesSummaryTitle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin:
    4px 0 10px;
}

.badgesSummaryTitle strong {
  font-size: 20px;
}

.badgesSummaryTitle span {
  color: #7c3aed;
  font-weight: 800;
}

.badgesSummaryText {
  margin-top: 8px;
  font-size: 11px;
}


/* SECTIONS */

.badgesSectionHeading {
  margin-top: 30px;
  margin-bottom: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.badgesSectionHeading svg {
  color: #7c3aed;
}


/* BADGE */

.badgeEnhanced {
  position: relative;
  min-height: 205px;
  display: flex;
  flex-direction: column;
}

.badgeEnhanced.unlocked {
  border-color:
    rgba(124,58,237,.20);
}

.badgeEnhanced.locked {
  opacity: .78;
}

.badgeTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.badgeEnhanced .badgeEmoji {
  width: 55px;
  height: 55px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 30px;
  background:
    rgba(124,58,237,.075);
}

.badgeEnhanced .lockedEmoji {
  filter: grayscale(1);
  background: #f1f5f9;
}

.badgeCheck {
  color: #059669;
}

.badgeEnhanced h3 {
  margin:
    14px 0 6px;
}

.badgeUnlockedLabel {
  margin-top: auto;
  padding-top: 14px;
  color: #059669;
  font-size: 11px;
  font-weight: 800;
}


/* PROGRESSION DU BADGE */

.badgeProgressBlock {
  margin-top: auto;
  padding-top: 16px;
}

.badgeProgressText {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 10px;
  color: var(--muted);
}

.badgeProgressText strong {
  color: var(--text);
}


/* MOBILE */

@media(max-width:620px) {

  .badgesSummary {
    align-items: flex-start;
  }

  .badgesSummaryIcon {
    width: 48px;
    height: 48px;
  }
}/* ========================================
   PARAMETRES
   ======================================== */

.settingsPageEnhanced .sectionTitle {
  margin-top: 26px;
}

.settingsEnhancedCard {
  padding: 0;
  overflow: hidden;
}

.settingsEnhancedCard .settingsRow {
  padding: 20px;
}

.settingsDivider {
  height: 1px;
  background: var(--border);
}

.settingsLabel {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.settingsLabel h3,
.settingsDataHeader h3 {
  margin: 0 0 4px;
}

.settingsIcon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
}

.settingsVoiceName {
  display: inline-block;
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: 8px;
  background:
    rgba(124,58,237,.055);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 700;
}


/* DONNEES */

.settingsDataCard {
  padding: 22px;
}

.settingsDataHeader {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.settingsDataHeader p {
  margin:
    5px 0 0;
}

.settingsDataNotice {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settingsDangerZone {
  margin-top: 18px;
  padding-top: 18px;
  border-top:
    1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.settingsDangerZone .muted {
  margin-top: 4px;
  font-size: 12px;
}

.settingsDefaultsCard {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}


/* MOBILE */

@media(max-width:700px) {

  .settingsEnhancedCard .settingsRow {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .settingsDangerZone {
    align-items: flex-start;
    flex-direction: column;
  }

  .settingsDangerZone .btn {
    width: 100%;
    justify-content: center;
  }

  .settingsDefaultsCard {
    align-items: flex-start;
    flex-direction: column;
  }

}/* ========================================
   SESSION DU JOUR
   ======================================== */

.dailySessionHero {
  margin-bottom: 18px;
}

.dailySessionHero .pill {
  margin-bottom: 10px;
}


/* RESUME */

.dailySessionSummary {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.06),
      rgba(236,72,153,.035)
    );
}

.dailySessionSummaryIcon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #7c3aed;
  background:
    rgba(124,58,237,.1);
}

.dailySessionSummaryContent {
  flex: 1;
}

.dailySessionSummaryTitle {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.dailySessionSummaryTitle h2 {
  margin:
    4px 0 10px;
}

.dailySessionSummaryTitle > strong {
  color: #7c3aed;
  font-size: 18px;
}

.dailySessionSummary p {
  margin:
    9px 0 0;
  font-size: 12px;
}


/* PROCHAINE ETAPE */

.dailyNextCard {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border:
    1px solid
    rgba(124,58,237,.28);
}

.dailyNextCard h2 {
  margin:
    4px 0 7px;
}

.dailyNextProgress {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7c3aed;
  background:
    rgba(124,58,237,.08);
  font-size: 11px;
  font-weight: 800;
}

.dailyNextButton {
  flex: 0 0 auto;
}


/* ETAPES */

.dailySessionSteps {
  display: grid;
  gap: 11px;
}

.dailyStepCard {
  display: grid;
  grid-template-columns:
    auto auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
}

.dailyStepCard.current {
  border-color:
    rgba(124,58,237,.4);
  background:
    rgba(124,58,237,.025);
}

.dailyStepCard.done {
  border-color:
    rgba(5,150,105,.25);
}

.dailyStepNumber {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
  font-weight: 800;
}

.dailyStepCard.done
.dailyStepNumber {
  color: #059669;
  background: #ecfdf5;
}

.dailyStepIcon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #7c3aed;
  background:
    rgba(124,58,237,.07);
}

.dailyStepContent {
  min-width: 0;
}

.dailyStepTitle {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dailyStepContent p {
  margin:
    5px 0 10px;
  font-size: 12px;
}

.dailyStepProgressRow {
  display: grid;
  grid-template-columns:
    1fr auto;
  align-items: center;
  gap: 10px;
}

.dailyStepProgressRow strong {
  font-size: 11px;
}

.dailyStepLink {
  white-space: nowrap;
}


/* REVISION BONUS */

.dailyRevisionBonus {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fffbeb;
  border-color: #fde68a;
}

.dailyRevisionIcon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #d97706;
  background: #fef3c7;
}

.dailyRevisionBonus h3 {
  margin:
    3px 0 4px;
}

.dailyRevisionBonus p {
  margin: 0;
  font-size: 12px;
}


/* DERNIERE ACTIVITE */

.dailyLastActivity {
  margin-top: 17px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}


/* MOBILE */

@media(max-width:720px) {

  .dailyNextCard {
    align-items: flex-start;
    flex-direction: column;
  }

  .dailyNextButton {
    width: 100%;
    justify-content: center;
  }

  .dailyStepCard {
    grid-template-columns:
      auto 1fr;
  }

  .dailyStepIcon {
    display: none;
  }

  .dailyStepLink {
    grid-column:
      1 / -1;
    width: 100%;
    justify-content: center;
  }

  .dailyRevisionBonus {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dailyRevisionBonus .btn {
    width: 100%;
    justify-content: center;
  }

}


@media(max-width:520px) {

  .dailySessionSummary {
    align-items: flex-start;
  }

  .dailySessionSummaryIcon {
    width: 47px;
    height: 47px;
  }

  .dailySessionSummaryTitle {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

}/* ========================================
   SESSION DU JOUR
   ======================================== */

.dailySessionHero {
  margin-bottom: 18px;
}

.dailySessionHero .pill {
  margin-bottom: 10px;
}


/* RESUME */

.dailySessionSummary {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.06),
      rgba(236,72,153,.035)
    );
}

.dailySessionSummaryIcon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #7c3aed;
  background:
    rgba(124,58,237,.1);
}

.dailySessionSummaryContent {
  flex: 1;
}

.dailySessionSummaryTitle {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.dailySessionSummaryTitle h2 {
  margin:
    4px 0 10px;
}

.dailySessionSummaryTitle > strong {
  color: #7c3aed;
  font-size: 18px;
}

.dailySessionSummary p {
  margin:
    9px 0 0;
  font-size: 12px;
}


/* PROCHAINE ETAPE */

.dailyNextCard {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border:
    1px solid
    rgba(124,58,237,.28);
}

.dailyNextCard h2 {
  margin:
    4px 0 7px;
}

.dailyNextProgress {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7c3aed;
  background:
    rgba(124,58,237,.08);
  font-size: 11px;
  font-weight: 800;
}

.dailyNextButton {
  flex: 0 0 auto;
}


/* ETAPES */

.dailySessionSteps {
  display: grid;
  gap: 11px;
}

.dailyStepCard {
  display: grid;
  grid-template-columns:
    auto auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
}

.dailyStepCard.current {
  border-color:
    rgba(124,58,237,.4);
  background:
    rgba(124,58,237,.025);
}

.dailyStepCard.done {
  border-color:
    rgba(5,150,105,.25);
}

.dailyStepNumber {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
  font-weight: 800;
}

.dailyStepCard.done
.dailyStepNumber {
  color: #059669;
  background: #ecfdf5;
}

.dailyStepIcon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #7c3aed;
  background:
    rgba(124,58,237,.07);
}

.dailyStepContent {
  min-width: 0;
}

.dailyStepTitle {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dailyStepContent p {
  margin:
    5px 0 10px;
  font-size: 12px;
}

.dailyStepProgressRow {
  display: grid;
  grid-template-columns:
    1fr auto;
  align-items: center;
  gap: 10px;
}

.dailyStepProgressRow strong {
  font-size: 11px;
}

.dailyStepLink {
  white-space: nowrap;
}


/* REVISION BONUS */

.dailyRevisionBonus {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fffbeb;
  border-color: #fde68a;
}

.dailyRevisionIcon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #d97706;
  background: #fef3c7;
}

.dailyRevisionBonus h3 {
  margin:
    3px 0 4px;
}

.dailyRevisionBonus p {
  margin: 0;
  font-size: 12px;
}


/* DERNIERE ACTIVITE */

.dailyLastActivity {
  margin-top: 17px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}


/* MOBILE */

@media(max-width:720px) {

  .dailyNextCard {
    align-items: flex-start;
    flex-direction: column;
  }

  .dailyNextButton {
    width: 100%;
    justify-content: center;
  }

  .dailyStepCard {
    grid-template-columns:
      auto 1fr;
  }

  .dailyStepIcon {
    display: none;
  }

  .dailyStepLink {
    grid-column:
      1 / -1;
    width: 100%;
    justify-content: center;
  }

  .dailyRevisionBonus {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dailyRevisionBonus .btn {
    width: 100%;
    justify-content: center;
  }

}


@media(max-width:520px) {

  .dailySessionSummary {
    align-items: flex-start;
  }

  .dailySessionSummaryIcon {
    width: 47px;
    height: 47px;
  }

  .dailySessionSummaryTitle {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

}/* ========================================
   SESSION DU JOUR
   ======================================== */

.dailySessionHero {
  margin-bottom: 18px;
}

.dailySessionHero .pill {
  margin-bottom: 10px;
}


/* RESUME */

.dailySessionSummary {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.06),
      rgba(236,72,153,.035)
    );
}

.dailySessionSummaryIcon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #7c3aed;
  background:
    rgba(124,58,237,.1);
}

.dailySessionSummaryContent {
  flex: 1;
}

.dailySessionSummaryTitle {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.dailySessionSummaryTitle h2 {
  margin:
    4px 0 10px;
}

.dailySessionSummaryTitle > strong {
  color: #7c3aed;
  font-size: 18px;
}

.dailySessionSummary p {
  margin:
    9px 0 0;
  font-size: 12px;
}


/* PROCHAINE ETAPE */

.dailyNextCard {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border:
    1px solid
    rgba(124,58,237,.28);
}

.dailyNextCard h2 {
  margin:
    4px 0 7px;
}

.dailyNextProgress {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7c3aed;
  background:
    rgba(124,58,237,.08);
  font-size: 11px;
  font-weight: 800;
}

.dailyNextButton {
  flex: 0 0 auto;
}


/* ETAPES */

.dailySessionSteps {
  display: grid;
  gap: 11px;
}

.dailyStepCard {
  display: grid;
  grid-template-columns:
    auto auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
}

.dailyStepCard.current {
  border-color:
    rgba(124,58,237,.4);
  background:
    rgba(124,58,237,.025);
}

.dailyStepCard.done {
  border-color:
    rgba(5,150,105,.25);
}

.dailyStepNumber {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
  font-weight: 800;
}

.dailyStepCard.done
.dailyStepNumber {
  color: #059669;
  background: #ecfdf5;
}

.dailyStepIcon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #7c3aed;
  background:
    rgba(124,58,237,.07);
}

.dailyStepContent {
  min-width: 0;
}

.dailyStepTitle {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dailyStepContent p {
  margin:
    5px 0 10px;
  font-size: 12px;
}

.dailyStepProgressRow {
  display: grid;
  grid-template-columns:
    1fr auto;
  align-items: center;
  gap: 10px;
}

.dailyStepProgressRow strong {
  font-size: 11px;
}

.dailyStepLink {
  white-space: nowrap;
}


/* REVISION BONUS */

.dailyRevisionBonus {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fffbeb;
  border-color: #fde68a;
}

.dailyRevisionIcon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #d97706;
  background: #fef3c7;
}

.dailyRevisionBonus h3 {
  margin:
    3px 0 4px;
}

.dailyRevisionBonus p {
  margin: 0;
  font-size: 12px;
}


/* DERNIERE ACTIVITE */

.dailyLastActivity {
  margin-top: 17px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}


/* MOBILE */

@media(max-width:720px) {

  .dailyNextCard {
    align-items: flex-start;
    flex-direction: column;
  }

  .dailyNextButton {
    width: 100%;
    justify-content: center;
  }

  .dailyStepCard {
    grid-template-columns:
      auto 1fr;
  }

  .dailyStepIcon {
    display: none;
  }

  .dailyStepLink {
    grid-column:
      1 / -1;
    width: 100%;
    justify-content: center;
  }

  .dailyRevisionBonus {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dailyRevisionBonus .btn {
    width: 100%;
    justify-content: center;
  }

}


@media(max-width:520px) {

  .dailySessionSummary {
    align-items: flex-start;
  }

  .dailySessionSummaryIcon {
    width: 47px;
    height: 47px;
  }

  .dailySessionSummaryTitle {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

}/* ========================================
   LEÇONS - SESSION DU JOUR
   ======================================== */

.lessonSessionBanner {
  margin-bottom: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-color:
    rgba(124,58,237,.24);
  background:
    rgba(124,58,237,.025);
}

.lessonSessionBanner.done {
  border-color:
    rgba(5,150,105,.25);
  background:
    rgba(5,150,105,.035);
}

.lessonSessionIcon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
}

.lessonSessionBanner.done
.lessonSessionIcon {
  color: #059669;
  background: #ecfdf5;
}

.lessonSessionBanner h3 {
  margin:
    3px 0 8px;
}

.lessonSessionProgressRow {
  display: grid;
  grid-template-columns:
    minmax(100px, 240px) auto;
  align-items: center;
  gap: 10px;
}

.lessonSessionProgressRow strong {
  font-size: 11px;
}


/* ETAPE SUIVANTE */

.lessonSessionNext {
  margin-top: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-color:
    rgba(5,150,105,.28);
  background:
    linear-gradient(
      135deg,
      rgba(5,150,105,.055),
      rgba(16,185,129,.02)
    );
}

.lessonSessionNextIcon {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #059669;
  background: #ecfdf5;
}

.lessonSessionNext h2 {
  margin:
    3px 0 5px;
}

.lessonSessionNext p {
  margin: 0;
}


/* MOBILE */

@media(max-width:700px) {

  .lessonSessionBanner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .lessonSessionBanner > .btn {
    width: 100%;
    justify-content: center;
  }

  .lessonSessionNext {
    align-items: flex-start;
    flex-direction: column;
  }

  .lessonSessionNext .btn {
    width: 100%;
    justify-content: center;
  }

}/* ========================================
   EXERCICES - SESSION DU JOUR
   ======================================== */

.exerciseSessionBanner {
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-color:
    rgba(124,58,237,.24);
  background:
    rgba(124,58,237,.025);
}

.exerciseSessionBanner.done {
  border-color:
    rgba(5,150,105,.25);
  background:
    rgba(5,150,105,.035);
}

.exerciseSessionIcon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background:
    rgba(124,58,237,.09);
  color: #7c3aed;
}

.exerciseSessionBanner.done
.exerciseSessionIcon {
  color: #059669;
  background: #ecfdf5;
}

.exerciseSessionBanner h3 {
  margin:
    3px 0 8px;
}

.exerciseSessionProgressRow {
  display: grid;
  grid-template-columns:
    minmax(100px, 240px) auto;
  align-items: center;
  gap: 10px;
}

.exerciseSessionProgressRow strong {
  font-size: 11px;
}


/* ETAPE SUIVANTE */

.exerciseSessionNext {
  margin-top: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-color:
    rgba(5,150,105,.28);
  background:
    linear-gradient(
      135deg,
      rgba(5,150,105,.055),
      rgba(16,185,129,.02)
    );
}

.exerciseSessionNextIcon {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #059669;
  background: #ecfdf5;
}

.exerciseSessionNext h2 {
  margin:
    3px 0 5px;
}

.exerciseSessionNext p {
  margin: 0;
}


/* MOBILE */

@media(max-width:700px) {

  .exerciseSessionBanner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .exerciseSessionBanner > .btn {
    width: 100%;
    justify-content: center;
  }

  .exerciseSessionNext {
    align-items: flex-start;
    flex-direction: column;
  }

  .exerciseSessionNext .btn {
    width: 100%;
    justify-content: center;
  }

}/* ========================================
   ORAL - SESSION DU JOUR
   ======================================== */

.oralSessionBanner {
  margin-bottom: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-color:
    rgba(124,58,237,.24);
  background:
    rgba(124,58,237,.025);
}

.oralSessionBanner.done {
  border-color:
    rgba(5,150,105,.25);
  background:
    rgba(5,150,105,.035);
}

.oralSessionIcon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #7c3aed;
  background:
    rgba(124,58,237,.09);
}

.oralSessionBanner.done
.oralSessionIcon {
  color: #059669;
  background: #ecfdf5;
}

.oralSessionBanner h3 {
  margin:
    3px 0 8px;
}

.oralSessionProgressRow {
  display: grid;
  grid-template-columns:
    minmax(100px, 240px) auto;
  align-items: center;
  gap: 10px;
}

.oralSessionProgressRow strong {
  font-size: 11px;
}


/* SESSION TERMINEE */

.oralSessionComplete {
  margin-top: 18px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 17px;
  border-color:
    rgba(5,150,105,.32);
  background:
    linear-gradient(
      135deg,
      rgba(5,150,105,.07),
      rgba(16,185,129,.025)
    );
}

.oralSessionCompleteIcon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #059669;
  background: #ecfdf5;
}

.oralSessionComplete h2 {
  margin:
    3px 0 6px;
}

.oralSessionComplete p {
  margin:
    0 0 12px;
}

.oralSessionChecklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.oralSessionChecklist > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
}

.oralSessionTotal {
  display: inline-block;
  margin-top: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #047857;
  background: #d1fae5;
  font-size: 11px;
  font-weight: 800;
}


/* MOBILE */

@media(max-width:700px) {

  .oralSessionBanner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .oralSessionBanner > .btn {
    width: 100%;
    justify-content: center;
  }

  .oralSessionComplete {
    align-items: flex-start;
    flex-direction: column;
  }

  .oralSessionComplete .btn {
    width: 100%;
    justify-content: center;
  }

}/* ========================================
   MODE COURSE
   ======================================== */

.modeCourseHero {
  margin-bottom: 16px;
}

.modeCourseIntro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
}

.modeCourseIntro svg {
  flex: 0 0 auto;
  color: #7c3aed;
}


/* MISSIONS */

.modeCourseMissionGrid {
  align-items: stretch;
}

.modeMissionCard {
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition:
    transform .15s ease,
    border-color .15s ease;
}

.modeMissionCard:not(.locked):hover {
  transform:
    translateY(-2px);
  border-color:
    rgba(124,58,237,.35);
}

.modeMissionCard.locked {
  opacity: .58;
  cursor: not-allowed;
}

.modeMissionTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.modeMissionEmoji {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background:
    rgba(124,58,237,.08);
}

.modeMissionBadges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.modeMissionCard h3 {
  margin:
    15px 0 7px;
}

.modeMissionCard p {
  margin:
    0 0 16px;
}

.modeMissionMeta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.modeMissionMeta strong {
  color: #059669;
}

.modeMissionLocked {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
}


/* COURSE */

.modeCourseTop {
  margin:
    18px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modeCourseTop h1 {
  margin:
    3px 0 5px;
}

.modeCourseBadge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #7c3aed;
  background:
    rgba(124,58,237,.09);
}


/* PASSAGER */

.passengerCard {
  padding: 21px;
  border-color:
    rgba(59,130,246,.18);
  background:
    linear-gradient(
      135deg,
      rgba(59,130,246,.045),
      transparent
    );
}

.passengerHeader,
.driverHeader {
  display: flex;
  align-items: center;
  gap: 12px;
}

.passengerAvatar,
.driverAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
}

.passengerAvatar {
  background: #eff6ff;
}

.driverAvatar {
  background: #f5f3ff;
}

.passengerSpeech {
  margin:
    20px 0;
  font-size: 22px;
  font-family:
    'Space Grotesk';
  font-weight: 700;
  line-height: 1.4;
}


/* CHAUFFEUR */

.driverCard {
  margin-top: 14px;
  padding: 21px;
}

.modeCourseMic {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
  min-height: 50px;
}

.modeCourseMic.listening {
  animation:
    taxiMicPulse 1.25s infinite;
}

@keyframes taxiMicPulse {

  50% {
    transform:
      scale(.985);
  }

}

.modeRecognized {
  margin-top: 17px;
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
}

.modeRecognized strong {
  display: block;
  margin-top: 5px;
}


/* FEEDBACK */

.modeCourseFeedback {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
}

.modeFeedbackIcon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #059669;
  background: #ecfdf5;
}

.modeCourseFeedback h3 {
  margin:
    4px 0 12px;
}

.modeProfessionalPhrase {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 11px;
  background:
    rgba(5,150,105,.06);
  color: #047857;
}

.modeProfessionalPhrase svg {
  flex: 0 0 auto;
}

.modeProfessionalPhrase span {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
}

.modeProfessionalPhrase strong {
  display: block;
  margin-top: 3px;
}

.modeConfidenceNote {
  margin-top: 9px;
  font-size: 11px;
}

.modeFeedbackActions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.modeCoursePrivacy {
  margin-top: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}


/* RESULTAT */

.modeCourseResult {
  text-align: center;
  padding: 28px;
}

.modeResultTrophy {
  width: 67px;
  height: 67px;
  margin:
    0 auto 14px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #d97706;
  background: #fffbeb;
}

.modeCourseResult h1 {
  margin:
    5px 0 10px;
}

.modeGlobalScore {
  font-size: 52px;
  font-family:
    'Space Grotesk';
  font-weight: 800;
  color: #7c3aed;
}

.modeScoreGrid {
  margin-top: 23px;
  display: grid;
  gap: 13px;
  text-align: left;
}

.modeScoreLine > div:first-child {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.modeCourseReview {
  display: grid;
  gap: 11px;
}

.modeReviewCard {
  padding: 18px;
}

.modeReviewSpacing {
  margin-top: 13px;
}

.modeReviewFeedback {
  margin-top: 14px;
  padding: 10px;
  border-radius: 9px;
  background: #f8fafc;
  font-size: 11px;
}

.modeModelAnswer {
  margin-top: 10px;
  padding: 11px;
  border-radius: 9px;
  background: #ecfdf5;
  color: #047857;
}

.modeModelAnswer strong,
.modeModelAnswer span {
  display: block;
}

.modeModelAnswer span {
  margin-top: 4px;
}

.modeResultActions {
  margin-top: 18px;
  justify-content: center;
}


/* MOBILE */

@media(max-width:700px) {

  .modeCourseFeedback {
    flex-direction: column;
  }

  .modeFeedbackActions {
    width: 100%;
    flex-direction: row;
  }

  .modeFeedbackActions .btn {
    flex: 1;
    justify-content: center;
  }

  .modeCourseTop {
    align-items: flex-start;
  }

}


@media(max-width:520px) {

  .passengerSpeech {
    font-size: 19px;
  }

  .modeFeedbackActions {
    flex-direction: column;
  }

  .modeResultActions {
    flex-direction: column;
  }

  .modeResultActions .btn {
    width: 100%;
    justify-content: center;
  }

}/* ========================================
   MODE COURSE - EVENEMENT IMPREVU
   ======================================== */

.modeRandomEvent {
  margin-bottom: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 13px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.modeRandomEventEmoji {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #ffedd5;
  font-size: 22px;
}

.modeRandomEvent strong,
.modeRandomEvent small {
  display: block;
}

.modeRandomEvent strong {
  color: #c2410c;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.modeRandomEvent small {
  margin-top: 3px;
  color: #9a3412;
  font-weight: 700;
}