.course-layout{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.course-sidebar{
  background:var(--navy); color:#fff; padding:24px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.course-sidebar .sidebar-logo{ display:flex; align-items:center; gap:10px; margin-bottom:24px; font-family:var(--font-head); font-weight:700; }
.course-nav-item{
  padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:4px; cursor:pointer;
  color:rgba(255,255,255,.75); transition:background .15s ease, color .15s ease;
}
.course-nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.course-nav-item.active{ background:var(--accent); color:#fff; font-weight:700; }

.course-main{ padding:40px 32px; max-width:820px; margin:0 auto; width:100%; }
#course-stage{ opacity:0; }
#course-stage.fade-in{ animation:fadeInUp .4s ease forwards; }
.slide-progress{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.slide-image{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); margin-bottom:24px; }
.slide-text{ font-size:17px; color:var(--gray-900); line-height:1.7; margin-bottom:24px; }
.slide-next{ width:100%; margin-top:8px; }

.wa-help-zone{ margin:20px 0; }
.wa-help-btn{
  width:100%; padding:14px; border-radius:var(--radius-md); background:#25D366; color:#fff; font-weight:700;
  font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px;
}

.course-complete{ text-align:center; padding:60px 20px; }
.course-complete h2{ font-size:30px; }

/* ---- Bouton audio flottant (mini play/pause dans un angle de la slide) ---- */
.slide-media{ position:relative; margin-bottom:24px; }
.ap-mini-btn{
  position:absolute; bottom:14px; right:14px; width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:var(--shadow-md); transition:transform .15s ease;
}
.ap-mini-btn:active{ transform:scale(.92); }
.ap-mini-btn.is-playing{ animation:apPulse 1.6s ease-in-out infinite; }
@keyframes apPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,.35);} 50%{ box-shadow:0 0 0 10px rgba(22,163,74,0);} }

/* ---- Navigation slide : flèches gauche/droite ---- */
.slide-nav-row{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.slide-nav-arrow{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:var(--gray-100); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .15s ease;
}
.slide-nav-arrow:hover{ background:var(--accent-light); color:var(--accent-dark); }
.slide-nav-arrow[disabled]{ opacity:.35; pointer-events:none; }
.slide-nav-main{ flex:1; }

@media (max-width:780px){
  .course-layout{ grid-template-columns:1fr; }
  .course-sidebar{ position:relative; height:auto; display:flex; overflow-x:auto; gap:6px; padding:14px; }
  .course-sidebar .sidebar-logo{ display:none; }
  .course-nav-item{ white-space:nowrap; margin-bottom:0; }
  .course-main{ padding:24px 16px; }
}

/* ============================================
   Page d'accueil de l'app (dashboard)
   ============================================ */
.app-header{
  position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--gray-100); height:var(--header-h);
}
.app-header-inner{ display:flex; align-items:center; justify-content:space-between; height:100%; }

.home-main{ padding:32px 20px 60px; max-width:960px; }
.home-section-title{ font-size:20px; margin:36px 0 16px; }

.progress-block{ background:var(--accent-light); border-radius:var(--radius-lg); padding:22px 24px; }
.progress-block-top{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--accent-dark); margin-bottom:8px; }
.progress-bar-track{ height:10px; background:#fff; border-radius:var(--radius-pill); overflow:hidden; }
.progress-bar-fill{ height:100%; background:var(--accent); border-radius:var(--radius-pill); transition:width .3s ease; }
.progress-continue-btn{ margin-top:16px; width:100%; justify-content:space-between; }

.module-tile-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.module-tile{
  display:block; border-radius:var(--radius-md); overflow:hidden; background:var(--gray-100);
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
}
.module-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.module-tile-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.module-tile-body{ padding:12px 14px; }
.module-tile-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); }
.module-tile h4{ font-size:14px; margin:4px 0 6px; }
.module-tile-status{ font-size:11.5px; color:var(--gray-500); display:flex; align-items:center; gap:5px; }
.module-tile.status-done .module-tile-status{ color:var(--accent-dark); }
@media (max-width:640px){ .module-tile-grid{ grid-template-columns:1fr; } }

/* ---- Menu latéral (drawer) ---- */
.app-menu-backdrop{
  position:fixed; inset:0; background:rgba(22,24,29,.5); z-index:60; display:none;
}
.app-menu-backdrop.open{ display:block; }
.app-menu-drawer{
  position:fixed; top:0; right:0; height:100%; width:320px; max-width:88vw; background:#fff; z-index:61;
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column; padding:20px;
}
.app-menu-drawer.open{ transform:translateX(0); }
.app-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.app-menu-logo{ font-family:var(--font-head); font-weight:700; font-size:18px; }
.app-menu-top button{ font-size:18px; color:var(--gray-500); }
.app-menu-heading{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500); margin:22px 0 10px; }
.menu-module-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.menu-module-item{
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-sm); font-size:13px;
  color:var(--ink); transition:background .15s ease;
}
.menu-module-item:hover{ background:var(--gray-100); }
.menu-module-item img{ width:40px; height:28px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.menu-module-check{ margin-left:auto; color:var(--accent); }
.app-menu-bottom{ display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:1px solid var(--gray-100); }
.app-menu-btn{ width:100%; }

/* Lien retour + icône complétion (course.html) */
.course-back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--gray-500); margin-bottom:14px; }
.course-back-link:hover{ color:var(--accent-dark); }
.course-complete-icon{ font-size:44px; color:var(--accent); margin-bottom:12px; }

/* ---- Notifications (cloche) ---- */
.app-header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{ position:relative; width:40px; height:40px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink); }
.notif-wrap{ position:relative; }
.notif-badge{
  position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--radius-pill);
  background:var(--danger); color:#fff; font-size:9.5px; font-weight:700; align-items:center; justify-content:center;
}
.notif-panel{
  position:absolute; top:48px; right:0; width:300px; max-width:88vw; max-height:400px; overflow-y:auto;
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:10px;
  display:none; z-index:70;
}
.notif-panel.open{ display:block; }
.notif-item{ padding:12px; border-radius:var(--radius-sm); margin-bottom:6px; }
.notif-item.unread{ background:var(--accent-light); }
.notif-item-title{ font-weight:700; font-size:13.5px; margin-bottom:3px; }
.notif-item-msg{ font-size:12.5px; color:var(--gray-700); margin-bottom:6px; }
.notif-item-date{ font-size:10.5px; color:var(--gray-500); margin-top:4px; }
.notif-item-btn{ display:inline-block; margin-top:4px; }
.notif-empty{ font-size:13px; color:var(--gray-500); text-align:center; padding:20px 10px; }

/* ---- Bouton d'installation PWA (menu latéral) ---- */
.pwa-install-btn{ display:none; }
.pwa-install-btn.visible{ display:flex; }

/* ---- Fenêtre de bascule d'appareil (connexion) ---- */
.device-switch-overlay{
  position:fixed; inset:0; background:rgba(22,24,29,.65); z-index:200; display:flex;
  align-items:center; justify-content:center; padding:20px; animation:fadeIn .15s ease;
}
.device-switch-box{
  background:#fff; border-radius:var(--radius-lg); max-width:360px; width:100%; padding:28px 24px;
  text-align:center; box-shadow:var(--shadow-lg); animation:fadeInUp .2s ease; border-top:4px solid var(--accent);
}
.device-switch-icon{ font-size:34px; color:var(--accent); margin-bottom:12px; }
.device-switch-box h3{ font-size:18px; margin-bottom:8px; }
.device-switch-box p{ font-size:13.5px; color:var(--gray-700); }
.device-switch-box #ds-countdown{ color:var(--accent-dark); font-size:16px; }
.device-switch-actions{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }