:root {
  --vert: #1457d9;
  --vert-fonce: #103b91;
  --vert-clair: #eaf1ff;
  --or: #57a5ff;
  --ivoire: #f5f8ff;
  --blanc: #ffffff;
  --texte: #172642;
  --secondaire: #64748b;
  --bordure: #dce6f5;
  --ombre: 0 12px 35px rgba(20, 87, 217, 0.12);
  --rayon: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--texte);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

a {
  color: var(--vert);
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1120px, 90%);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--bordure);
  backdrop-filter: blur(12px);
}

.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.logo {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.7px;
  color: var(--vert);
}

.logo span {
  color: var(--or);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.main-nav a {
  color: var(--texte);
  font-size: 14px;
  font-weight: 600;
}

.main-nav a:hover {
  color: var(--vert);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 700;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre);
}

.btn-primary {
  background: var(--vert);
  color: var(--blanc);
}

.btn-primary:hover {
  background: var(--vert-fonce);
  color: var(--blanc);
}

.btn-secondary {
  background: var(--blanc);
  color: var(--vert);
  border-color: var(--bordure);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 80px;
  background:
    radial-gradient(ellipse at 90% 15%, #dceaff 0, transparent 32%),
    linear-gradient(135deg, #eaf1ff 0%, #f5f8ff 70%);
}

.hero-content {
  max-width: 790px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid #cfe0ff;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--vert);
  font-size: 13px;
  font-weight: 700;
}

.hero h1 {
  max-width: 760px;
  margin: 23px 0 18px;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.08;
  letter-spacing: -2px;
}

.hero h1 span {
  color: var(--vert);
}

.hero p {
  max-width: 680px;
  color: #526581;
  font-size: clamp(16px, 2vw, 19px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 29px;
}

.section {
  padding: 72px 0;
}

.section-heading {
  max-width: 700px;
  margin: 0 auto 35px;
  text-align: center;
}

.section-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 39px);
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.section-heading p {
  color: var(--secondaire);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  padding: 27px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: 0 5px 18px rgba(20, 87, 217, 0.045);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre);
}

.card-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 15px;
  background: var(--vert-clair);
  font-size: 27px;
}

.card h3 {
  margin: 18px 0 8px;
  font-size: 21px;
}

.card p {
  color: var(--secondaire);
}

.card-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
}

.welcome-panel {
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid var(--bordure);
  border-radius: 24px;
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.welcome-panel h1,
.welcome-panel h2 {
  margin-top: 0;
  line-height: 1.2;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 25px;
}

.progress-track {
  overflow: hidden;
  height: 9px;
  border-radius: 20px;
  background: var(--vert-clair);
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--vert);
}

.form-card {
  width: min(100%, 480px);
  margin: 35px auto;
  padding: 30px;
  border: 1px solid var(--bordure);
  border-radius: 22px;
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.form-group {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}

.form-group label {
  font-size: 14px;
  font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #d3def0;
  border-radius: 10px;
  background: white;
  color: var(--texte);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 3px solid #dbeafe;
  border-color: var(--vert);
}

.notice {
  padding: 17px 20px;
  border-radius: 12px;
  background: #eaf2ff;
  color: #234a91;
  font-size: 14px;
}

.site-footer {
  padding: 30px 0;
  background: var(--vert-fonce);
  color: #fff;
  text-align: center;
}

.site-footer p {
  margin: 5px 0;
}

.muted {
  color: var(--secondaire);
}

.hidden {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
}

@media (max-width: 800px) {
  .main-nav {
    gap: 12px;
    flex-wrap: wrap;
  }

  .card-grid,
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    padding: 64px 0;
  }
}

@media (max-width: 560px) {
  .container {
    width: 92%;
  }

  .header-inner {
    padding: 13px 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .logo {
    font-size: 21px;
  }

  .main-nav {
    width: 100%;
    gap: 8px 14px;
    flex-wrap: wrap;
  }

  .main-nav a {
    font-size: 12px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .hero {
    padding: 48px 0;
  }

  .hero h1 {
    letter-spacing: -1px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .section {
    padding: 48px 0;
  }

  .card-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 22px;
  }

  .form-card {
    padding: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* Espace apprenant */
.account-panel { max-width: 980px; margin-inline: auto; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.account-grid .form-card { width: 100%; margin: 0; }
.account-grid .form-card h3 { margin-top: 0; }
.account-panel [hidden] { display: none !important; }
.account-panel button:disabled { opacity: .65; cursor: wait; }
.course-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.course-item { padding: 20px; border: 1px solid var(--bordure); border-radius: 14px; background: var(--blanc); }
.course-item h4 { margin: 0 0 8px; font-size: 18px; }
.course-item p { color: var(--secondaire); white-space: pre-wrap; overflow-wrap: anywhere; }
.course-item .course-meta { font-size: 13px; font-weight: 700; color: var(--vert); }
@media (max-width: 700px) {
  .account-grid, .course-list { grid-template-columns: 1fr; }
  .account-grid .form-card { padding: 22px; }
}


/* Espaces formateur et administration */
.teacher-panel {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: #f3f7ff;
}
.teacher-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 20px 0 30px;
}
.teacher-form .form-group { margin: 0; }
.teacher-form .form-group:nth-last-of-type(1),
.teacher-form .form-group:nth-last-of-type(2),
.teacher-form button { grid-column: 1 / -1; }
.teacher-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9e3dc;
  border-radius: 10px;
  background: white;
  color: var(--texte);
  resize: vertical;
}
.teacher-form button { justify-self: start; }
@media (max-width: 650px) {
  .teacher-panel { padding: 17px; }
  .teacher-form { grid-template-columns: 1fr; }
  .teacher-form .form-group, .teacher-form button { grid-column: 1; }
}


/* Identité visuelle bleue — EduCap Afrique */
:root {
  --rayon: 20px;
}
body {
  background: #f5f8ff;
  letter-spacing: .05px;
}
.site-header {
  box-shadow: 0 4px 22px rgba(18, 56, 120, .06);
}
.logo { letter-spacing: -1px; }
.logo span { color: #57a5ff; }
.main-nav a { transition: color .18s ease; }
.btn { border-radius: 13px; box-shadow: 0 4px 12px rgba(20, 87, 217, .07); }
.btn-primary {
  background: linear-gradient(135deg, #1457d9, #2677f5);
  box-shadow: 0 8px 20px rgba(20, 87, 217, .18);
}
.btn-primary:hover { background: linear-gradient(135deg, #103b91, #1457d9); }
.btn-secondary { border-color: #d5e3fb; }
.hero {
  background:
    radial-gradient(ellipse at 88% 15%, rgba(87,165,255,.25) 0, transparent 34%),
    radial-gradient(ellipse at 10% 90%, rgba(20,87,217,.09) 0, transparent 36%),
    linear-gradient(135deg, #eaf1ff 0%, #f8faff 68%, #ffffff 100%);
}
.hero h1 span { color: #1457d9; }
.eyebrow { border-color: #d5e3fb; }
.card, .welcome-panel, .form-card, .course-item {
  box-shadow: 0 8px 26px rgba(25, 64, 130, .055);
}
.card { border-radius: 20px; }
.card-icon {
  background: linear-gradient(145deg, #eaf1ff, #dceaff);
  color: #1457d9;
}
.card:hover { border-color: #c5d9ff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.parcours-form select:focus, .parcours-form input:focus, .teacher-form textarea:focus {
  outline: 3px solid #dbeafe;
  border-color: #1457d9;
}
.parcours-form {
  border-color: #dce6f5;
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(20, 87, 217, .09);
}
.parcours-result { background: #eaf1ff; color: #17469c; }
.teacher-panel {
  background: #f7f9ff;
  border-color: #dce6f5;
  border-radius: 20px;
}
.course-item { border-radius: 18px; }
.course-item .course-meta { color: #1457d9; }
.site-footer { background: linear-gradient(135deg, #103b91, #1457d9); }
:focus-visible { outline-color: #57a5ff; }
::selection { background: #cfe0ff; color: #103b91; }
@media (max-width: 560px) {
  .main-nav { gap: 10px 14px; }
  .main-nav a { font-size: 12px; }
}


/* Bibliothèque vidéo : cours et tutoriels */
.video-section {
  background: linear-gradient(180deg, #f5f8ff 0%, #edf4ff 100%);
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.video-card {
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--bordure);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(25, 64, 130, .07);
}
.video-card-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 17px;
  background: #eaf1ff;
  font-size: 29px;
}
.video-label {
  display: inline-block;
  margin-top: 18px;
  color: #1457d9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.video-card h3 { margin: 8px 0 10px; font-size: 23px; }
.video-card p, .video-card li { color: var(--secondaire); }
.video-card ol { padding-left: 22px; margin-bottom: 24px; }
.video-card li { margin: 7px 0; }
.video-card .btn { margin-top: 10px; }
.video-note {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--secondaire);
  font-size: 14px;
  text-align: center;
}
@media (max-width: 650px) {
  .video-grid { grid-template-columns: 1fr; }
}


.video-steps {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid #dce6f5;
  border-radius: 13px;
  background: #f8faff;
}
.video-steps summary {
  color: #103b91;
  font-weight: 800;
  cursor: pointer;
}
.video-steps ol { padding-left: 22px; }
.video-steps li { margin: 9px 0; }
.video-steps p { color: #526581; }


/* Lecteurs vidéo responsifs */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 16px 0 10px;
  border-radius: 14px;
  background: #0b1220;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-grid-resources { margin-top: 24px; }
.video-card a:not(.btn) { color: #1457d9; font-weight: 700; }


/* Finition visuelle : accueil, lisibilité, respect des publics et accessibilité */
:root {
  --vert: #1457d9;
  --vert-fonce: #103b91;
  --vert-clair: #eaf1ff;
  --or: #57a5ff;
  --ivoire: #f5f8ff;
  --texte: #172642;
  --secondaire: #526581;
  --bordure: #dce6f5;
  --ombre: 0 16px 40px rgba(16, 59, 145, .10);
}
body { font-size: 16px; }
.site-header { box-shadow: 0 4px 18px rgba(16, 59, 145, .05); }
.logo { letter-spacing: -.6px; }
.logo span { color: #1457d9; }
.main-nav a { padding: 8px 0; transition: color .18s ease; }
.main-nav a[href="#inscription"] {
  padding: 9px 15px;
  border-radius: 999px;
  background: #1457d9;
  color: #fff;
}
.main-nav a[href="#inscription"]:hover { background: #103b91; color: #fff; }
.hero {
  background:
    radial-gradient(ellipse at 88% 10%, rgba(87,165,255,.22) 0, transparent 33%),
    radial-gradient(ellipse at 5% 95%, rgba(20,87,217,.08) 0, transparent 30%),
    linear-gradient(135deg, #eaf1ff 0%, #f8faff 68%, #fff 100%);
}
.hero-content { max-width: 850px; }
.hero h1 { max-width: 820px; }
.hero p { color: #435675; }
.section:nth-of-type(even) { background: rgba(234,241,255,.36); }
.card, .video-card, .form-card, .parcours-form, .welcome-panel {
  border-color: #dce6f5;
  box-shadow: 0 8px 26px rgba(16,59,145,.055);
}
.card:hover, .video-card:hover { border-color: #b9d1ff; }
.card-icon, .video-card-icon {
  background: #eaf1ff;
  color: #103b91;
}
.btn { border-radius: 12px; min-height: 48px; }
.btn-primary { background: #1457d9; }
.btn-primary:hover { background: #103b91; }
.btn-secondary { background: #fff; border-color: #cbd8ed; }
input, select, textarea { accent-color: #1457d9; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(87,165,255,.28);
  border-color: #1457d9 !important;
}
.notice { background: #eef4ff; color: #234a91; border: 1px solid #d7e5ff; }
.video-frame { overflow: hidden; border-radius: 14px; }
.site-footer { background: #103b91; }
.parcours-form label, .form-group label { color: #172642; }
button:disabled { opacity: .65; cursor: not-allowed; transform: none; }
a { text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #57a5ff;
  outline-offset: 3px;
}
@media (max-width: 800px) {
  .header-inner { align-items: flex-start; }
  .main-nav a[href="#inscription"] { padding: 6px 11px; }
}
@media (max-width: 560px) {
  .main-nav { gap: 8px 13px; }
  .main-nav a { font-size: 13px; }
  .hero h1 { font-size: clamp(34px, 10vw, 48px); }
  .section-heading { text-align: left; }
  .section-heading h2 { font-size: 29px; }
  .parcours-form { padding: 20px; }
}


/* Nouvelle direction artistique : campus ivoirien moderne */
:root {
  --vert: #087443;
  --vert-fonce: #064b30;
  --vert-clair: #e5f5ec;
  --or: #f28c28;
  --ivoire: #fbfaf6;
  --blanc: #ffffff;
  --texte: #172b24;
  --secondaire: #61736a;
  --bordure: #dce9df;
  --ombre: 0 18px 50px rgba(6, 75, 48, .10);
  --rayon: 22px;
}
html { scroll-padding-top: 100px; }
body {
  background: #fbfaf6;
  color: #172b24;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.site-header {
  background: rgba(255,255,255,.94);
  border-bottom-color: rgba(8,116,67,.12);
  box-shadow: 0 8px 30px rgba(16,49,33,.06);
}
.header-inner { min-height: 82px; }
.logo { color: #064b30; font-size: 25px; }
.logo span { color: #f28c28; }
.main-nav { gap: clamp(10px, 1.7vw, 23px); }
.main-nav a { font-size: 13px; }
.main-nav a[href="#inscription"] {
  background: #087443;
  color: #fff;
  padding: 11px 17px;
  border-radius: 999px;
}
.main-nav a[href="#inscription"]:hover { background: #064b30; }
.hero {
  isolation: isolate;
  padding: clamp(72px, 9vw, 120px) 0 clamp(70px, 8vw, 104px);
  color: #fff;
  background:
    radial-gradient(ellipse at 82% 20%, rgba(242,140,40,.24), transparent 28%),
    radial-gradient(ellipse at 12% 100%, rgba(31,175,105,.24), transparent 34%),
    linear-gradient(120deg, #063d28 0%, #075b39 54%, #087443 100%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 290px;
  right: 7%;
  top: 18%;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.02);
  pointer-events: none;
}
.hero-content { max-width: 920px; }
.eyebrow {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.25);
  color: #ffcc8d;
}
.hero h1 {
  max-width: 850px;
  color: #fff;
  font-size: clamp(42px, 6.8vw, 76px);
  letter-spacing: -2.4px;
}
.hero h1 span { color: #ffb45e; }
.hero p { max-width: 700px; color: #e1eee6; }
.hero .btn-primary {
  background: #f28c28;
  color: #18271e;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.hero .btn-primary:hover { background: #ffad52; }
.hero .btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.07);
}
.section { padding: clamp(52px, 7vw, 88px) 0; }
.section:nth-of-type(even) { background: #f3f7f1; }
.section-heading h2 { color: #123b29; letter-spacing: -1.1px; }
.section-heading p { color: #61736a; }
.card, .video-card, .welcome-panel, .form-card, .parcours-form, .course-item {
  border-color: #dce9df;
  border-radius: 22px;
  box-shadow: 0 10px 32px rgba(17,58,37,.055);
}
.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 99px;
  background: linear-gradient(90deg, #087443 0 68%, #f28c28 68% 100%);
}
.card-icon, .video-card-icon {
  border-radius: 17px;
  background: #e5f5ec;
  color: #087443;
}
.card-link, .video-card a:not(.btn) { color: #087443; }
.btn { border-radius: 13px; min-height: 48px; }
.btn-primary {
  background: linear-gradient(135deg, #087443, #0b8d53);
  box-shadow: 0 9px 22px rgba(8,116,67,.17);
}
.btn-primary:hover { background: #064b30; }
.btn-secondary { border-color: #dce9df; color: #087443; }
.video-section { background: linear-gradient(180deg, #f3f7f1, #fbfaf6); }
.video-label { color: #087443; letter-spacing: .07em; }
.video-steps { background: #f7faf6; border-color: #dce9df; }
.video-steps summary { color: #064b30; }
.parcours-form {
  padding: clamp(22px, 4vw, 34px);
  border-radius: 26px;
}
.parcours-form label { color: #244b37; }
.parcours-form select, .parcours-form input,
.form-group input, .form-group select, .form-group textarea {
  border-color: #cbdccf;
  border-radius: 12px;
}
.parcours-form select:focus, .parcours-form input:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: 3px solid #d8f1e2;
  border-color: #087443;
}
.notice { background: #eaf6ee; color: #20543a; }
.teacher-panel { background: #f3f8f3; border-color: #dce9df; }
.course-item .course-meta { color: #087443; }
.progress-track { background: #e5f5ec; }
.progress-fill { background: linear-gradient(90deg, #087443, #f28c28); }
.site-footer { background: linear-gradient(120deg, #063d28, #087443); }
::selection { background: #c4ecd3; color: #064b30; }
:focus-visible { outline-color: #f28c28; }
@media (max-width: 800px) {
  .header-inner { padding: 13px 0; }
  .main-nav { gap: 8px 14px; }
}
@media (max-width: 560px) {
  .hero { padding: 58px 0 62px; }
  .hero h1 { letter-spacing: -1.3px; }
  .hero::after { width: 170px; height: 170px; right: -35px; top: 12%; }
  .main-nav a[href="#inscription"] { padding: 7px 11px; }
}


/* Utilisation simple sur téléphone : champs lisibles, boutons accessibles et sections aérées */
html { scroll-behavior: smooth; }
img, video, iframe { max-width: 100%; }
.container { width: min(100% - 32px, 1160px); margin-inline: auto; }
button, .btn, select, input, textarea { font: inherit; }
input, select, textarea { max-width: 100%; min-height: 48px; }
button, .btn { touch-action: manipulation; }
section[id] { scroll-margin-top: 90px; }
.card-grid, .video-grid { align-items: stretch; }
.card, .video-card { min-width: 0; }
.card p, .video-card p { line-height: 1.65; }
.parcours-form, .form-card { width: min(100% - 24px, 680px); }
.parcours-form button, .form-card button { min-height: 48px; }
@media (max-width: 700px) {
  .container { width: min(100% - 24px, 1160px); }
  .header-inner { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .logo { font-size: 23px; }
  .main-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .main-nav a { display: inline-flex; align-items: center; min-height: 38px; font-size: 14px; }
  .hero { padding: 48px 0; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 46px); line-height: 1.12; }
  .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .card-grid, .video-grid, .video-grid-resources { grid-template-columns: minmax(0, 1fr) !important; }
  .section { padding: 42px 0; }
  .section-heading h2 { font-size: clamp(25px, 7vw, 32px); line-height: 1.2; }
  .card, .video-card { padding: 20px; }
  .parcours-form, .form-card { width: 100%; margin: 18px 0; padding: 18px; border-radius: 16px; }
  .parcours-form label, .form-group label { display: block; line-height: 1.45; margin-bottom: 7px; }
  .parcours-form input, .parcours-form select, .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 48px; font-size: 16px; }
  .parcours-form button, .form-card button, .form-card .btn { width: 100%; }
  .assistant-inscription { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; display: flex; flex-direction: column; align-items: flex-end; }
  .assistant-toggle { max-width: 100%; min-height: 48px; white-space: normal; }
  .assistant-panneau { width: 100%; height: min(68dvh, 540px); margin-bottom: 8px; }
  .assistant-choix button { min-height: 44px; font-size: 15px; }
}
@media (max-width: 380px) {
  .container { width: calc(100% - 20px); }
  .main-nav a { font-size: 13px; }
  .assistant-toggle { font-size: 12px; padding: 11px 12px; }
}


/* Tableau de bord administrateur — espace créateur */
body.is-admin #abonnement-edc, body.is-admin #rechoisir-parcours { display:none !important; }
.admin-dashboard{margin-top:28px;padding:clamp(20px,4vw,34px);border:1px solid #dce9df;border-radius:24px;background:linear-gradient(180deg,#fff,#f7fbf8);box-shadow:0 18px 50px rgba(6,75,48,.08)}
.admin-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.admin-eyebrow{color:#087443;font-size:11px;font-weight:900;letter-spacing:.16em}
.admin-heading h2{margin:8px 0;color:#123b29;font-size:clamp(25px,4vw,36px);letter-spacing:-.8px}
.admin-heading p,.admin-section-title p{margin:0;color:#61736a}
.admin-live{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #cdebd8;border-radius:999px;background:#eaf8ef;color:#17633c;font-size:12px;font-weight:800}
.admin-live i{width:8px;height:8px;border-radius:50%;background:#1a9a56;box-shadow:0 0 0 4px #d3f1de}
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.admin-stat{display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px;border:1px solid #e0ebe3;border-radius:17px;background:#fff;box-shadow:0 5px 18px rgba(20,60,38,.035)}
.admin-stat span{color:#53695c;font-size:13px;font-weight:700}
.admin-stat strong{color:#064b30;font-size:clamp(27px,4vw,36px);line-height:1.1;letter-spacing:-1px}
.admin-stat small{color:#829087;font-size:12px}
.admin-section-title{display:flex;justify-content:space-between;margin:32px 0 16px;padding-top:24px;border-top:1px solid #e2ebe4}
.admin-section-title h3{margin:0 0 5px;color:#123b29}
.admin-footnote{margin-top:22px;color:#718177;font-size:12px;line-height:1.6}
@media(max-width:700px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-stat{padding:15px}}
@media(max-width:420px){.admin-stats{gap:9px}.admin-stat{padding:12px}.admin-stat span{font-size:12px}}

/* Présentation pédagogique des cours */
.course-item{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,3vw,28px);border:1px solid #dbe5f2;border-radius:20px;background:linear-gradient(145deg,#fff 0%,#f8fbff 100%);box-shadow:0 10px 28px rgba(25,55,100,.06);}
.course-item h4{margin:0;color:#16376c;font-size:clamp(19px,2.3vw,24px);line-height:1.35;}
.course-item>p{line-height:1.75;margin:0;color:#40516a;}
.course-meta{align-self:flex-start;padding:6px 10px;border-radius:999px;background:#eaf1ff;color:#174ca5!important;font-size:12px;font-weight:800;letter-spacing:.02em;}
.lesson-preview{margin-top:4px;padding:clamp(16px,2.5vw,24px);border:1px solid #dce7f5;border-radius:16px;background:#fff;}
.lesson-preview>h5{margin:0 0 16px;color:#174ca5;font-size:17px;}
.lesson-content{color:#26364d;font-size:15px;line-height:1.85;overflow-wrap:anywhere;}
.lesson-content h5{margin:24px 0 8px;padding-bottom:7px;border-bottom:1px solid #e3ebf6;color:#174ca5;font-size:16px;}
.lesson-content p{margin:0 0 14px;}
.lesson-content ul{margin:4px 0 18px;padding-left:24px;}
.lesson-content li{padding:3px 0 3px 4px;}
.course-empty-note{padding:12px 14px;border-left:3px solid #e3a008;background:#fff8e5;color:#77520a!important;font-size:14px;}
.course-item .btn{align-self:flex-start;}
@media(max-width:600px){.course-item{border-radius:16px}.lesson-content{font-size:14px}}

/* Atelier de préparation pédagogique des enseignants */
.lesson-builder{margin:8px 0 28px;padding:clamp(18px,3vw,28px);border:1px solid #cbdcf5;border-radius:20px;background:linear-gradient(145deg,#f5f9ff,#fff);box-shadow:0 12px 32px rgba(27,68,130,.07)}
.lesson-builder h4{margin:0 0 8px;color:#173f7a;font-size:clamp(19px,2.4vw,24px)}
.lesson-builder>p{color:#52637a;line-height:1.7}
.lesson-builder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.lesson-builder .form-group{min-width:0}
.lesson-builder label{display:block;margin-bottom:7px;font-weight:750;color:#263b59}
.lesson-builder input,.lesson-builder select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cbd7e8;border-radius:10px;background:#fff;color:#172642;font:inherit}
.lesson-plan-result{margin-top:16px;padding:16px;border:1px solid #b9d8c4;border-radius:12px;background:#f0fbf3;color:#205335;line-height:1.65}
.lesson-plan-result h5{margin:0 0 8px;font-size:17px}
@media(max-width:600px){.lesson-builder-grid{grid-template-columns:1fr}.lesson-builder{border-radius:15px}}


/* Navigation simplifiée et lecture confortable sur téléphone */
.main-nav{gap:clamp(10px,2vw,22px)}
.main-nav a{white-space:nowrap}
.lesson-reader{width:100%;border:1px solid #d8e4f4;border-radius:13px;background:#f8fbff;overflow:hidden}
.lesson-reader>summary,.course-item details>summary{cursor:pointer;list-style:none;padding:14px 16px;color:#174ca5;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lesson-reader>summary::-webkit-details-marker,.course-item details>summary::-webkit-details-marker{display:none}
.lesson-reader>summary::after,.course-item details>summary::after{content:"＋";font-size:20px;line-height:1;color:#174ca5}
.lesson-reader[open]>summary::after,.course-item details[open]>summary::after{content:"−"}
.lesson-reader[open]>summary{border-bottom:1px solid #d8e4f4;background:#edf4ff}
.lesson-reader .lesson-preview{margin:0;border:0;border-radius:0;padding:clamp(16px,3vw,28px);box-shadow:none}
.course-content-readable{padding:16px;line-height:1.8;overflow-wrap:anywhere;background:#fff}
.course-content-readable h5{margin:22px 0 8px;color:#174ca5;font-size:17px}
.course-content-readable p{margin:0 0 14px}
.course-content-readable ul{padding-left:22px}
@media(max-width:700px){.header-inner{flex-direction:row;align-items:center;min-height:64px;gap:10px}.main-nav{flex:1;min-width:0;overflow-x:auto;flex-wrap:nowrap;gap:8px;padding:8px 0;scrollbar-width:thin}.main-nav a{font-size:12px;padding:7px 9px;background:#f1f6ff;border-radius:8px;min-height:36px}.logo{font-size:19px;white-space:nowrap}.lesson-reader>summary,.course-item details>summary{padding:13px 14px}.course-content-readable{padding:14px;font-size:15px;line-height:1.75}.course-item .btn{width:100%;align-self:stretch}}


/* Formulaire de parcours en étapes, plus lisible sur mobile. */
.parcours-step[hidden] { display: none !important; }
.parcours-progress { margin: 0 0 22px; }
.parcours-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #e3eaf6; }
.parcours-progress-track span { display:block; height:100%; width:50%; border-radius:99px; background:var(--vert); transition:width .2s ease; }
.parcours-step-actions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; }
.parcours-step-actions .btn { min-width:150px; }
@media (max-width:560px) {
  .parcours-step-actions { display:grid; grid-template-columns:1fr; }
  .parcours-step-actions .btn { width:100%; }
}

/* Navigation latérale organisée, inspirée d'un espace de travail moderne */
.site-header{position:fixed;inset:0 auto 0 0;width:258px;z-index:1000;background:#fff;border-right:1px solid #e5eaf2;box-shadow:2px 0 14px rgba(20,40,80,.035);overflow-y:auto}
.site-header .container{width:100%;max-width:none;padding:0}
.header-inner{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:22px 14px!important}
.site-header .logo{display:block;padding:4px 10px 18px;border-bottom:1px solid #edf0f5;font-size:1.35rem}
.main-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%}
.main-nav .nav-group-label{padding:16px 11px 5px;color:#8993a5;font-size:.68rem;font-weight:800;letter-spacing:.09em}
.main-nav .nav-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:#46536a;text-decoration:none;font-size:.91rem;font-weight:550;transition:background .18s,color .18s}
.main-nav .nav-link span{width:20px;text-align:center;font-size:1.1rem;color:#748198}
.main-nav .nav-link:hover,.main-nav .nav-link.active{background:#edf4ff;color:#1558c9}
.main-nav .nav-link.active span{color:#1558c9}
.sidebar-footer{display:flex;flex-direction:column;gap:5px;margin:20px 4px 0;padding:15px 11px;border-top:1px solid #edf0f5;color:#24334c;font-size:.85rem}
.sidebar-footer span{color:#8993a5;font-size:.73rem;line-height:1.5}
.menu-toggle{display:none}
body{padding-left:258px}
section[id],.hero[id]{scroll-margin-top:22px}
@media(max-width:760px){
 body{padding-left:0}
 .site-header{position:sticky;top:0;width:100%;height:auto;overflow:visible;border-right:0;border-bottom:1px solid #e5eaf2}
 .site-header .container{padding:0 14px}
 .header-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 0!important}
 .site-header .logo{padding:5px 0;border:0;font-size:1.12rem}
 .menu-toggle{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #dce4f0;border-radius:9px;background:#fff;color:#263650;font-weight:650}
 .main-nav{display:none;position:absolute;top:100%;left:0;right:0;max-height:72vh;overflow:auto;padding:12px 14px 18px;background:#fff;border-bottom:1px solid #e5eaf2;box-shadow:0 12px 22px rgba(20,40,80,.1)}
 .site-header.menu-open .main-nav{display:flex}
 .main-nav .nav-group-label{padding-top:12px}
 .sidebar-footer{margin-top:10px}
}