:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --surface-2:#f8fbfc;
  --ink:#0d1b3d;
  --muted:#68728a;
  --line:#dfe5f0;
  --blue:#284a6e;
  --teal:#0b718d;
  --purple:#3d96bc;
  --purple-2:#7ecff8;
  --orange:#e2a200;
  --green:#aef1d5;
  --danger:#ff5757;
  --shadow:0 18px 50px rgba(24,38,74,.10);
  --radius:28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Mona Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(122,34,230,.08), transparent 28%),
    radial-gradient(circle at 95% 10%, rgba(11,141,139,.08), transparent 24%),
    var(--bg);
  overflow:hidden;
}

button, input { font:inherit; }
button { cursor:pointer; }

hr {
  border: none;
  height: 1px;
  /* width: 90%; */
  background-color:#e0dfdf;
  margin: 30px 0;
}

.app{
  height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

.topbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(320px,680px) minmax(220px,1fr);
  gap:28px;
  align-items:center;
  padding:18px 28px 12px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(223,229,240,.9);
  z-index:20;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--purple-2));
  color:#fff;
  font-weight:900;
  letter-spacing:-2px;
  box-shadow:0 9px 22px rgba(34, 158, 230, 0.11);
}

.brand-text small{
  display:block;
  color:var(--purple);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  margin-bottom:2px;
}

.brand-text strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:16px;
}

.progress-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
}

.screen-count,.percent{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}

.progress{
  height:9px;
  background:#e8edf6;
  border-radius:999px;
  overflow:hidden;
}

.progress > span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--purple),var(--blue),var(--teal));
  transition:width .35s ease;
}

.top-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
}

.ghost{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:10px 13px;
  font-weight:750;
}

.module-chip{
  border:0;
  background:#e3e3e3;
  color:var(--purple);
  border-radius:999px;
  padding:9px 14px;
  font-weight:850;
  font-size:13px;
}

.stage{
  min-height:0;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
}

.sidebar{
  border-right:1px solid var(--line);
  background:rgba(255,255,255,.72);
  padding:24px 18px;
  overflow:auto;
}

.sidebar h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  margin:0 0 14px 8px;
}

.nav-group{
  display:grid;
  gap:8px;
}

.nav-item{
  width:100%;
  border:0;
  text-align:left;
  background:transparent;
  border-radius:14px;
  padding:12px 13px;
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:start;
  color:var(--muted);
}

.nav-item:hover{ background:#f1f4fb; }
.nav-item.active{
  background:linear-gradient(90deg,rgba(34, 158, 230, 0.11),rgba(18,87,200,.07));
  color:var(--ink);
}

.nav-index{
  width:26px;
  height:26px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#e9edf5;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.nav-item.active .nav-index{
  background:var(--purple);
  color:#fff;
}

.nav-label strong{ display:block; font-size:14px; margin-bottom:3px; }
.nav-label span{ font-size:12px; line-height:1.35; }

.slide-shell{
  min-width:0;
  min-height:0;
  padding:28px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
}

.slide{
  width:min(1450px,100%);
  height:100%;
  min-height:0;
  background:var(--surface);
  border:1px solid rgba(223,229,240,.9);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:none;
  overflow:auto;
  position:relative;
}

.slide.active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{opacity:.35;transform:translateY(8px)} to{opacity:1;transform:none} }

.slide-inner{
  min-height:100%;
  padding:clamp(34px,5vw,72px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--teal);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:12px;
  margin-bottom:18px;
}

.dot{
  width:9px;height:9px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 6px rgba(11,141,139,.10);
}

h1,h2,h3,p{margin-top:0}
.hero-title{
  font-size:clamp(42px,5vw,72px);
  letter-spacing:-.055em;
  line-height:.98;
  margin-bottom:26px;
  max-width:1050px;
}
.hero-title em{
  font-style:normal;
  color:var(--purple);
}

.lead{
  /* max-width:900px; */
  font-size:clamp(18px,1.5vw,24px);
  line-height:1.5;
  color:#44506a;
  margin-bottom:30px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:40px;
  align-items:start;
}

.hero-visual{
  min-height:340px;
  border-radius:26px;
  padding:30px;
  background:
    radial-gradient(circle at 74% 24%, rgba(75, 97, 242, 0.22), transparent 26%),
    radial-gradient(circle at 24% 75%, rgba(11,141,139,.18), transparent 28%),
    #f7f5fc;
  display:grid;
  place-items:center;
  border:1px solid #e9e2f7;
}

.flow-vertical{
  display:grid;
  gap:14px;
  width:min(420px,100%);
}

.flow-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:15px;
  box-shadow:0 10px 25px rgba(25,35,68,.06);
}

.flow-icon{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  font-size:22px;font-weight:900;
  color:#fff;background:var(--purple);
  flex:0 0 auto;
}

.flow-arrow{
  text-align:center;
  color:var(--purple);
  font-size:26px;
  line-height:1;
}

.two-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:20px;
}

.card{
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  background:#fff;
  box-shadow:0 10px 28px rgba(25,35,68,.05);
}

.card.ai{ border-top:5px solid var(--purple); }
.card.auto{ border-top:5px solid var(--teal); }

.card .tag{
  display:inline-block;
  padding:7px 10px;
  border-radius:999px;
  background:#f0ebfb;
  color:var(--purple);
  font-weight:850;
  font-size:12px;
  margin-bottom:18px;
}

.card.auto .tag{ background:#e8f7f5;color:var(--teal); }

.card h3{
  font-size:clamp(24px,2.4vw,38px);
  letter-spacing:-.035em;
  margin-bottom:12px;
}

.card p{ color:var(--muted); line-height:1.55; font-size:17px; }

.example{
  margin-top:18px;
  background:var(--surface-2);
  border-radius:16px;
  padding:16px 18px;
  font-size:15px;
  line-height:1.5;
}

.compare-line{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.pill{
  padding:13px 18px;
  border-radius:999px;
  font-weight:850;
  border:1px solid var(--line);
  background:#fff;
}

.pill.purple{ color:var(--purple); background:#e6e6e6; border-color:#dfdfdf;}
.pill.teal{ color:var(--teal); background:#e9f8f7; border-color:#c9ece8;}

.concept-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}

.concept{
  min-height:190px;
  border-radius:22px;
  padding:24px;
  background:linear-gradient(180deg,#fff,#f8faff);
  border:1px solid var(--line);
}

.concept .ico{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:#ece7fb;color:var(--purple);font-size:21px;font-weight:900;margin-bottom:16px;
}

.concept .logo{
  width:120px;height:120px;border-radius:15px;display:grid;place-items:center;
  background:#ece7fb;color:var(--purple);font-size:21px;font-weight:900;margin-bottom:16px;
}

.concept .logo img{
  width:72px;height:72px;border-radius:15px;display:grid;place-items:center;
}

.concept:nth-child(2) .ico, .concept:nth-child(2) .logo{background:#e8f7f5;color:var(--teal)}
.concept:nth-child(3) .ico, .concept:nth-child(3) .logo{background:#e9f0fe;color:var(--blue)}
.concept h3{font-size:21px;margin-bottom:8px}
.concept p{font-size:15px;line-height:1.45;color:var(--muted)}

.workflow{
  margin:28px 0 4px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:14px;
  align-items:center;
}

.workflow .node{
  min-height:170px;
  padding:23px;
  border-radius:22px;
  border:1px solid var(--line);
  background:#fff;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
}

.node.actual {
  border: 3px solid var(--orange);
}

.node .bigico{
  font-size:40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node .bigico img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.node strong{font-size:17px}
.node span{font-size:13px;color:var(--muted);line-height:1.35}

.connector{font-size:29px;color:var(--blue);font-weight:900}

.takeaway{
  margin-top:28px;
  border:1px solid #fcd8a9;
  background:#fff8ee;
  border-radius:18px;
  padding:17px 20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  color:#5c431f;
}
.takeaway strong{color:#bc8700}

.video-slot{
  margin-top:24px;
  border:1.5px dashed #c9cfe0;
  border-radius:18px;
  padding:17px 20px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  background:#fafbfe;
}
.video-slot b{color:var(--ink)}
.video-slot .video-icon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:#efe8fb;color:var(--purple);font-size:20px;flex:0 0 auto;
}

.quiz-grid{display:grid;gap:16px;margin-top:20px}
.question{
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  background:#fff;
}
.question h3{font-size:18px;line-height:1.45;margin-bottom:14px}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.answer{
  text-align:left;
  border:1px solid var(--line);
  background:#fafbfe;
  border-radius:14px;
  padding:13px 14px;
  font-weight:700;
  color:#303b55;
}
.answer:hover{border-color:#b9c3d9;background:#f5f7fb}
.answer.correct{border-color:#87d7b7;background:#ecfbf4;color:#106943}
.answer.wrong{border-color:#efb3ba;background:#fff0f2;color:#9d2734}
.feedback{font-size:13px;color:var(--muted);margin-top:11px;min-height:20px}

.quiz-score{
  margin-top:18px;
  display:none;
  border-radius:18px;
  padding:18px 20px;
  background:#eef4ff;
  color:var(--blue);
  font-weight:900;
}
.quiz-score.show{display:block}

.bottom{
  padding:13px 28px 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  z-index:20;
}

.bottom-note{
  color:var(--muted);
  font-size:12px;
}

.nav-arrows{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-btn{
  border:0;
  border-radius:14px;
  min-width:52px;
  height:48px;
  padding:0 18px;
  font-weight:900;
  background:var(--ink);
  color:#fff;
  box-shadow:0 10px 22px rgba(13,27,61,.16);
}

.nav-btn.secondary{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:none;
}

.nav-btn:disabled{opacity:.32;cursor:not-allowed}
.right-tip{text-align:right;color:var(--muted);font-size:12px}

.section-title{
  font-size:clamp(34px,4vw,62px);
  letter-spacing:-.045em;
  line-height:1.04;
  margin-bottom:18px;
  max-width:1050px;
}

.section-lead{
  max-width:920px;
  font-size:19px;
  line-height:1.55;
  color:#4d5871;
}

.callout-line{
  margin:26px 0 4px;
  padding:18px 22px;
  border-left:5px solid var(--purple);
  background:#f7f3fd;
  border-radius:0 16px 16px 0;
  font-size:17px;
  line-height:1.5;
  color:#2e4056;
}

.callout-line p{
  margin:0 0 10px;
}

.callout-line p:last-child{
  margin-bottom:0;
}

.callout-line ul,
.callout-line ol{
  margin:0;
  padding-left:0;
  list-style: none;
}

.callout-line li{
  margin-left: -30px;
  margin-bottom:7px;
}

.callout-line li:last-child{
  margin-bottom:0;
}

.small-note{font-size:13px;color:var(--muted);line-height:1.5}

/* =========================================================
CONTENU PÉDAGOGIQUE LONG
========================================================= */

.course-copy{
  max-width:1000px;
  font-size:16px;
  line-height:1.7;
  color:#3f4961;
}

.course-copy p{
  margin:20px 0 16px;
}

.course-copy p:last-child{
  margin-bottom:0;
}

.course-copy strong{
  color:var(--ink);
  font-weight:800;
}

.course-copy ul,
.course-copy ol{
  margin:10px 0 22px;
  padding-left:28px;
}

.course-copy li{
  margin-bottom:8px;
  padding-left:4px;
  line-height:1.6;
}

.course-copy li:last-child{
  margin-bottom:0;
}

/* Petit paragraphe qui introduit une idée importante */
.text-intro{
  max-width:950px;
  font-size:20px;
  line-height:1.6;
  color:#34405a;
  margin-bottom:22px;
}

/* Transition entre deux idées */
.text-transition{
  margin:24px 0 12px;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  font-weight:700;
}

/* Liste pédagogique un peu plus aérée */
.course-list{
  margin:12px 0 24px;
  padding-left:30px;
}

.course-list li{
  margin-bottom:9px;
}

/* Pour une phrase courte de conclusion sans gros encadré */
.key-sentence{
  max-width:950px;
  margin:22px 0;
  padding: 20px 0;
  font-size:18px;
  line-height:1.55;
  color:var(--blue);
  font-weight: 600;
}

/* Petit texte d'accompagnement / précision */
.text-muted{
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}

/* Sous-titre à l'intérieur d'un écran */
.content-title{
  margin:26px 0 12px;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--ink);
}

@media (max-width:1100px){
  .stage{grid-template-columns:1fr}
  .sidebar{display:none}
  .topbar{grid-template-columns:1fr;gap:10px}
  .top-actions{display:none}
  .hero-grid,.two-cols{grid-template-columns:1fr}
  .concept-row{grid-template-columns:1fr}
  .workflow{grid-template-columns:1fr}
  .connector{transform:rotate(90deg);text-align:center}
  .slide-shell{padding:14px}
  .slide-inner{padding:34px 26px}
  .answers{grid-template-columns:1fr}
  .course-copy{
    font-size:17px;
    line-height:1.65;
  }
  .text-intro{font-size:19px;}
}

@media (max-height:720px){
  .slide-inner{justify-content:flex-start;padding-top:34px;padding-bottom:34px}
  .hero-title{font-size:54px}
  .hero-visual{min-height:250px}
  .concept{min-height:0}
}