﻿<!DOCTYPE html>
<html lang="fr" data-theme="dark">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Médecine PNS | Plateforme Médicale d'Excellence — Accueil</title>
  <meta name="description" content="L'écosystème numérique d'excellence médicale PNS pour les étudiants et candidats au Résidanat. Cours officiels, suivi de progression, banque de 10 000+ QCMs avec répétition espacée, fiches, calendrier et cartes mentales.">
  <meta name="theme-color" content="#090d16">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="Médecine PNS">
  <link rel="manifest" href="index.webmanifest">
  <link rel="icon" type="image/x-icon" href="favicon.ico?v=20261026">
  <link rel="icon" type="image/png" href="Logo/Médecine%20PNS%20Icon.png?v=20261026">
  <link rel="apple-touch-icon" href="Logo/Médecine%20PNS%20Icon.png?v=20261026">

  <!-- Core Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Aref+Ruqaa+Ink:wght@400;700&family=Manrope:wght@600;700;800;900&family=Noto+Naskh+Arabic:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  
  <!-- FontAwesome 6 (Local bundle) -->
  <link rel="stylesheet" href="assets/fonts/fontawesome/all.min.css">

  <!-- Shared PNS Platform Styles & Scripts -->
  <link rel="stylesheet" href="assets/pns-themes.css">
  <link rel="stylesheet" href="assets/pns-unified-theme.css?v=20261074">
  <link rel="stylesheet" href="assets/pns-sidebar-standard.css?v=20261075">

  <script src="global-settings.js?v=20261063"></script>
  <script src="assets/pns-smart-storage.js" defer></script>
  <script src="pns-catalog.js" defer></script>
  <script src="assets/pns-sidebar-standard.js?v=20261062" defer></script>
  <script src="assets/pns-sidebar-chrono.js?v=20261109" defer></script>
  <script src="assets/pns-unified-theme.js?v=20261062" defer></script>
  <script src="app-language.js?v=20261063" defer></script>
  <script src="app-update.js" defer></script>

  <style>
    /* ==========================================================================
       PNS ULTRA-MODERN INDEX STYLESHEET
       Theme-aware, zero-movement animations, glassmorphic bento cards
       ========================================================================== */
    :root {
      --bg-body: #090d16;
      --bg-canvas: #060910;
      --bg-card: rgba(15, 23, 42, 0.78);
      --bg-card-hover: rgba(22, 33, 58, 0.92);
      --bg-card-solid: #0f172a;
      --border-color: rgba(255, 255, 255, 0.08);
      --border-color-strong: rgba(255, 255, 255, 0.16);
      --border-hover: #3b82f6;
      --text-primary: #f8fafc;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      --accent-blue: #2563eb;
      --accent-blue-glow: rgba(37, 99, 235, 0.35);
      --accent-cyan: #06b6d4;
      --accent-emerald: #10b981;
      --accent-purple: #8b5cf6;
      --accent-amber: #f59e0b;
      --accent-rose: #f43f5e;
      --glass-blur: blur(16px);
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 22px;
      --radius-xl: 28px;
    }

    [data-theme="light"],
    body.light {
      --bg-body: #f8fafc;
      --bg-canvas: #f1f5f9;
      --bg-card: rgba(255, 255, 255, 0.88);
      --bg-card-hover: #ffffff;
      --bg-card-solid: #ffffff;
      --border-color: rgba(0, 0, 0, 0.08);
      --border-color-strong: rgba(0, 0, 0, 0.14);
      --border-hover: #2563eb;
      --text-primary: #0f172a;
      --text-secondary: #475569;
      --text-muted: #64748b;
      --accent-blue-glow: rgba(37, 99, 235, 0.2);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      min-height: 100%;
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      background-color: var(--bg-body);
      color: var(--text-primary);
      overflow-x: hidden;
    }

    /* Ambient background gradient meshes (Dark mode only — Clean & crisp in light mode) */
    [data-theme="dark"] body::before,
    body.dark::before,
    body.theme-dark::before {
      content: '';
      position: fixed;
      top: -200px;
      left: 10%;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0) 70%);
      pointer-events: none;
      z-index: 0;
    }

    [data-theme="dark"] body::after,
    body.dark::after,
    body.theme-dark::after {
      content: '';
      position: fixed;
      top: 40%;
      right: -150px;
      width: 650px;
      height: 650px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0) 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* Main layout container — Full Width Clean Layout (No Sidebar) */
    .pns-app-layout {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      position: relative;
      z-index: 1;
      width: 100%;
    }

    .main-content {
      flex: 1;
      min-width: 0;
      width: 100%;
      margin-left: 0 !important;
      padding: 24px 32px 100px;
    }

    body.sidebar-collapsed .main-content {
      margin-left: 0 !important;
    }

    @media (max-width: 980px) {
      .main-content {
        margin-left: 0 !important;
        padding: 16px 16px 90px;
      }
    }

    .pns-container {
      max-width: 1360px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 100%;
    }

    /* ==========================================================================
       BASMALA BANNER
       ========================================================================== */
    .pns-basmala-strip {
      text-align: center;
      padding: 10px 16px 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .pns-basmala-text {
      font-family: 'Aref Ruqaa Ink', 'Noto Naskh Arabic', serif;
      font-size: 26px;
      color: var(--text-primary);
      line-height: 1.3;
      letter-spacing: 0.5px;
      margin: 0;
    }

    /* ==========================================================================
       HERO SECTION — DIRECT ON PAGE (NO CONTAINERS)
       ========================================================================== */
    .pns-hero-card {
      padding: 14px 20px 20px;
      position: relative;
      background: transparent;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      --mouse-x: 50%;
      --mouse-y: 35%;
    }

    .pns-hero-card::after {
      display: none;
    }

    /* Author Signature Badge (Static Modern Black Font with Striped Heart Icon) */
    .pns-author-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 14px;
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      font-size: 13.5px;
      font-weight: 750;
      letter-spacing: 0.5px;
      color: #0f172a;
      user-select: none;
    }

    .pns-author-badge .pns-heart-pulse-icon {
      font-size: 14px;
      color: #0f172a;
    }

    [data-theme="dark"] .pns-author-badge,
    body.dark .pns-author-badge,
    body.theme-dark .pns-author-badge {
      color: #e2e8f0;
    }

    [data-theme="dark"] .pns-author-badge .pns-heart-pulse-icon,
    body.dark .pns-author-badge .pns-heart-pulse-icon,
    body.theme-dark .pns-author-badge .pns-heart-pulse-icon {
      color: #e2e8f0;
    }

    .pns-hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* Brand Showcase Wrapper */
    .pns-hero-brand-showcase {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 32px;
      position: relative;
      width: 100%;
    }

    /* Brand Showcase Wrapper */
    .pns-hero-brand-showcase {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 28px;
      position: relative;
      width: 100%;
    }

    /* Grand Kinetic Title "La Médecine PNS" */
    .pns-grand-title {
      font-family: 'Manrope', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      font-size: clamp(42px, 7.8vw, 86px);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -1.8px;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.26em;
      user-select: none;
      perspective: 1000px;
    }

    .pns-title-word {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      position: relative;
    }

    /* Animated Kinetic Characters */
    .pns-char {
      display: inline-block;
      position: relative;
      transform-origin: center bottom;
      cursor: default;
      animation: pnsCharEntrance 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
                 pnsCharWave 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
      animation-delay: calc(var(--ci) * 0.07s), calc(0.85s + var(--ci) * 0.1s);
      transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), 
                  filter 0.24s ease, 
                  text-shadow 0.24s ease;
    }

    /* Hover Interaction: Pop & 3D Tilt Burst */
    .pns-char:hover {
      transform: translateY(-16px) scale(1.22) rotate(var(--rot, 3deg)) !important;
      filter: drop-shadow(0 0 25px rgba(6, 182, 212, 0.95)) drop-shadow(0 0 45px rgba(37, 99, 235, 0.8)) !important;
      z-index: 10;
    }

    /* "La" and "Médecine" Color Grading & Shimmer */
    .word-la .pns-char,
    .word-medecine .pns-char {
      background: linear-gradient(
        115deg,
        #ffffff 0%,
        #f8fafc 20%,
        #67e8f9 35%,
        #ffffff 50%,
        #93c5fd 65%,
        #f8fafc 80%,
        #ffffff 100%
      );
      background-size: 250% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: pnsCharEntrance 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
                 pnsCharWave 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate,
                 pnsSpecularShine 6.5s ease-in-out infinite;
      animation-delay: calc(var(--ci) * 0.07s), calc(0.85s + var(--ci) * 0.1s), calc(var(--ci) * 0.12s);
    }

    [data-theme="light"] .word-la .pns-char,
    [data-theme="light"] .word-medecine .pns-char,
    body.light .word-la .pns-char,
    body.light .word-medecine .pns-char {
      color: #0f172a !important;
      background: none !important;
      -webkit-background-clip: initial !important;
      -webkit-text-fill-color: #0f172a !important;
      text-shadow: none !important;
      filter: none !important;
    }

    /* "PNS" Accent Letters: Ultra-Vibrant Aurora Glow */
    .word-pns .pns-char-accent {
      background: linear-gradient(
        135deg,
        #38bdf8 0%,
        #06b6d4 25%,
        #3b82f6 50%,
        #8b5cf6 75%,
        #10b981 100%
      );
      background-size: 280% 280%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 16px rgba(6, 182, 212, 0.6)) drop-shadow(0 0 35px rgba(37, 99, 235, 0.4));
      animation: pnsCharEntrance 0.95s cubic-bezier(0.16, 1, 0.3, 1) both,
                 pnsCharWave 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate,
                 pnsAuroraShift 5.5s ease-in-out infinite alternate;
      animation-delay: calc(var(--ci) * 0.07s), calc(0.85s + var(--ci) * 0.1s), 0s;
    }

    [data-theme="light"] .word-pns .pns-char-accent,
    body.light .word-pns .pns-char-accent {
      background: linear-gradient(
        135deg,
        #0284c7 0%,
        #0891b2 28%,
        #2563eb 65%,
        #7c3aed 100%
      );
      background-size: 280% 280%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 4px 14px rgba(2, 132, 199, 0.35));
    }

    /* ==========================================================================
       GRAND CYBER-MEDICAL ECG HEARTBEAT WAVE (BELOW TITLE)
       ========================================================================== */
    .pns-grand-ecg-wrapper {
      width: 100%;
      max-width: 680px;
      height: 60px;
      margin: 18px auto 28px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pns-grand-ecg-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .pns-grand-ecg-trail {
      stroke: rgba(56, 189, 248, 0.2);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    [data-theme="light"] .pns-grand-ecg-trail,
    body.light .pns-grand-ecg-trail {
      stroke: rgba(2, 132, 199, 0.22);
    }

    .pns-grand-ecg-pulse {
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 180 440;
      -webkit-animation: pnsGrandEcgBeat 2.8s linear infinite;
      animation: pnsGrandEcgBeat 2.8s linear infinite;
      filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.7));
    }

    .pns-grand-ecg-wrapper:hover .pns-grand-ecg-pulse {
      animation-duration: 1.8s;
      filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.95));
    }

    @-webkit-keyframes pnsGrandEcgBeat {
      0% {
        stroke-dashoffset: 620;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes pnsGrandEcgBeat {
      0% {
        stroke-dashoffset: 620;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }

    /* Keyframe Animations */
    @keyframes pnsCharEntrance {
      0% {
        opacity: 0;
        transform: translateY(35px) scale(0.7) rotate(10deg);
        filter: blur(6px);
      }
      65% {
        opacity: 1;
        transform: translateY(-8px) scale(1.06) rotate(-2deg);
        filter: blur(0px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0px);
      }
    }

    @keyframes pnsCharWave {
      0% {
        transform: translateY(0px) rotate(0deg);
      }
      50% {
        transform: translateY(-9px) rotate(calc(var(--rot, 0deg) * 0.75));
      }
      100% {
        transform: translateY(4px) rotate(calc(var(--rot, 0deg) * -0.5));
      }
    }

    @keyframes pnsSpecularShine {
      0%, 25% {
        background-position: 0% center;
      }
      65%, 100% {
        background-position: 100% center;
      }
    }

    @keyframes pnsAuroraShift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }





    .pns-hero-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 30px;
      width: 100%;
    }

    .pns-hero-socials {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 44px;
      padding: 0 8px;
      background: var(--bg-card);
      border: 1px solid var(--border-color-strong);
      border-radius: 12px;
      box-sizing: border-box;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .pns-hero-socials:hover {
      border-color: rgba(56, 189, 248, 0.4);
      box-shadow: 0 0 16px rgba(56, 189, 248, 0.12);
    }

    .pns-hero-socials .pns-footer-soc-link {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid transparent;
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14.5px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    [data-theme="light"] .pns-hero-socials .pns-footer-soc-link,
    body.light .pns-hero-socials .pns-footer-soc-link {
      background: rgba(0, 0, 0, 0.04);
    }

    .pns-hero-socials .pns-footer-soc-link:hover {
      background: rgba(37, 99, 235, 0.15);
      border-color: rgba(56, 189, 248, 0.4);
      color: var(--accent-blue, #38bdf8);
      transform: translateY(-1.5px);
    }

    .pns-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 44px;
      padding: 0 20px;
      border-radius: 12px;
      font-size: 13.5px;
      font-weight: 750;
      text-decoration: none;
      cursor: pointer;
      border: 1px solid transparent;
      transform: none !important;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .pns-btn-primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #ffffff !important;
      border-color: #2563eb;
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    }

    .pns-btn-primary:hover {
      background: linear-gradient(135deg, #1d4ed8, #1e40af);
      box-shadow: 0 0 24px rgba(37, 99, 235, 0.55);
      border-color: #60a5fa;
    }

    .pns-btn-secondary {
      background: var(--bg-card);
      color: var(--text-primary);
      border-color: var(--border-color-strong);
    }

    .pns-btn-secondary:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
      background: rgba(37, 99, 235, 0.05);
    }

    .pns-btn-emerald {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
      border-color: rgba(16, 185, 129, 0.3);
    }

    .pns-btn-emerald:hover {
      background: rgba(16, 185, 129, 0.18);
      border-color: #10b981;
    }

    /* Live KPI Metric Strip */
    .pns-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      border-top: 1px solid var(--border-color);
      padding-top: 24px;
    }

    @media (max-width: 860px) {
      .pns-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .pns-kpi-grid {
        grid-template-columns: 1fr;
      }
    }

    .pns-kpi-item {
      padding: 14px 16px;
      border-radius: var(--radius-md);
      background: rgba(0, 0, 0, 0.03);
      border: 1px solid var(--border-color);
    }

    [data-theme="dark"] .pns-kpi-item {
      background: rgba(255, 255, 255, 0.03);
    }

    .pns-kpi-num {
      font-family: 'Manrope', sans-serif;
      font-size: 24px;
      font-weight: 850;
      color: var(--text-primary);
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .pns-kpi-label {
      font-size: 11.5px;
      color: var(--text-muted);
      font-weight: 650;
      line-height: 1.35;
    }

    /* ==========================================================================
       PNS INTERACTIVE APPLICATION SHOWCASE TABS & 16:9 SLIDER
       ========================================================================== */
    .pns-showcase-container {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto 36px;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      position: relative;
      overflow: visible;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* 8-Tab Navigation Bar — Contiguous / Segmented Control Style (Centered) */
    .pns-showcase-tabs-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 auto 18px;
      text-align: center;
    }

    .pns-showcase-tabs-nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid var(--border-color-strong);
      border-radius: 12px;
      padding: 3px;
      margin: 0 auto;
      max-width: 100%;
      width: fit-content;
      overflow-x: auto;
      scrollbar-width: none;
    }

    [data-theme="light"] .pns-showcase-tabs-nav,
    body.light .pns-showcase-tabs-nav {
      background: #e2e8f0;
      border-color: #cbd5e1;
    }

    .pns-showcase-tabs-nav::-webkit-scrollbar {
      display: none;
    }

    .pns-showcase-tab-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 7px 11px;
      border-radius: 8px;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
      position: relative;
    }

    .pns-showcase-tab-btn:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 25%;
      height: 50%;
      width: 1px;
      background: rgba(255, 255, 255, 0.12);
      transition: opacity 0.2s;
    }

    .pns-showcase-tab-btn.active::after,
    .pns-showcase-tab-btn:hover::after,
    .pns-showcase-tab-btn.active + .pns-showcase-tab-btn::after {
      opacity: 0;
    }

    [data-theme="light"] .pns-showcase-tab-btn:not(:last-child)::after,
    body.light .pns-showcase-tab-btn:not(:last-child)::after {
      background: rgba(0, 0, 0, 0.12);
    }

    .pns-showcase-tab-btn:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.08);
    }

    [data-theme="light"] .pns-showcase-tab-btn,
    body.light .pns-showcase-tab-btn {
      color: #475569;
    }

    [data-theme="light"] .pns-showcase-tab-btn:hover,
    body.light .pns-showcase-tab-btn:hover {
      color: #0f172a;
      background: rgba(0, 0, 0, 0.06);
    }

    /* Active Tab: Pure Solid White text + glowing background */
    .pns-showcase-tab-btn.active,
    .pns-showcase-tab-btn.active .tab-label,
    .pns-showcase-tab-btn.active i {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      font-weight: 750;
    }

    .pns-showcase-tab-btn.active {
      background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5) !important;
    }

    .pns-showcase-tab-btn.tab-salam.active {
      background: linear-gradient(135deg, #0284c7, #0369a1) !important;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.5) !important;
    }

    /* Mobile: Tabs appear as icons only; active tab expands to show icon + title */
    @media (max-width: 860px) {
      .pns-showcase-tabs-nav {
        width: auto;
        max-width: 100%;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 3px;
        border-radius: 12px;
        gap: 0;
      }
      .pns-showcase-tab-btn {
        padding: 8px 10px;
        font-size: 13px;
        flex-shrink: 0;
        border-radius: 8px;
      }
      .pns-showcase-tab-btn::after {
        display: none;
      }
      .pns-showcase-tab-btn .tab-label {
        display: none;
      }
      .pns-showcase-tab-btn.active {
        padding: 8px 13px;
      }
      .pns-showcase-tab-btn.active .tab-label {
        display: inline !important;
        margin-left: 5px;
        font-weight: 800;
        animation: pnsMobileTabExpand 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
      }
    }

    @keyframes pnsMobileTabExpand {
      from {
        opacity: 0;
        transform: scale(0.92);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Tab Panels */
    .pns-showcase-panel {
      display: none;
      animation: pnsShowcaseFade 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .pns-showcase-panel.active {
      display: block;
    }

    @keyframes pnsShowcaseFade {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Header strip between tabs and images: Phrase (<= 5 words) + Launch Button */
    .pns-showcase-header-strip {
      max-width: 1100px;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding: 2px 4px;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      direction: ltr;
    }

    [data-theme="light"] .pns-showcase-header-strip,
    body.light .pns-showcase-header-strip {
      background: transparent !important;
    }

    .pns-showcase-tagline {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-size: 15px;
      font-weight: 750;
      color: var(--text-primary);
      display: inline-flex;
      align-items: center;
      gap: 9px;
      direction: ltr;
    }

    .pns-showcase-tagline .tagline-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px #10b981;
      display: inline-block;
      flex-shrink: 0;
    }

    .pns-salam-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 750;
      color: #0ea5e9;
      background: rgba(14, 165, 233, 0.1);
      padding: 5px 12px;
      border-radius: 8px;
      border: 1px solid rgba(14, 165, 233, 0.25);
    }

    .pns-showcase-launch-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 16px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #ffffff !important;
      font-size: 12.5px;
      font-weight: 750;
      text-decoration: none;
      border: 1px solid #3b82f6;
      box-shadow: 0 3px 12px rgba(37, 99, 235, 0.3);
      transition: all 0.2s ease;
    }

    .pns-showcase-launch-btn:hover {
      background: linear-gradient(135deg, #1d4ed8, #1e40af);
      box-shadow: 0 5px 20px rgba(37, 99, 235, 0.5);
      transform: translateY(-1px);
    }

    /* 16:9 Showcase Media Frame / Slider Frame (Enlarged) */
    .pns-showcase-media-frame {
      position: relative;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: #060910;
      border: 1px solid var(--border-color);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    }

    .pns-showcase-media-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    .pns-salam-frame img {
      object-fit: contain;
      background: #060910;
    }

    /* Slider Progress Line (5s countdown) */
    .pns-slider-progress {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3.5px;
      background: rgba(255, 255, 255, 0.12);
      z-index: 15;
    }

    .pns-slider-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #38bdf8, #2563eb);
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
    }

    /* Slider Track & Slides */
    .pns-slider-track {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .pns-slide-item {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s;
    }

    .pns-slide-item.active {
      opacity: 1;
      visibility: visible;
      z-index: 2;
    }

    /* Slider Controls (Prev / Next Buttons) */
    .pns-slider-ctrl {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 12;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.78);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
      user-select: none;
    }

    .pns-slider-ctrl:hover {
      background: rgba(37, 99, 235, 0.92);
      border-color: #60a5fa;
      box-shadow: 0 0 16px rgba(37, 99, 235, 0.65);
      transform: translateY(-50%) scale(1.08);
    }

    .pns-slider-ctrl.prev { left: 14px; }
    .pns-slider-ctrl.next { right: 14px; }

    @media (max-width: 640px) {
      .pns-slider-ctrl {
        width: 34px;
        height: 34px;
        font-size: 12px;
      }
      .pns-slider-ctrl.prev { left: 8px; }
      .pns-slider-ctrl.next { right: 8px; }
    }

    /* Slider Dots Strip */
    .pns-slider-dots-strip {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 12;
      background: rgba(15, 23, 42, 0.65);
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .pns-slider-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.35);
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .pns-slider-dot:hover {
      background: rgba(255, 255, 255, 0.7);
    }

    .pns-slider-dot.active {
      width: 22px;
      border-radius: 6px;
      background: #38bdf8;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
    }

    /* ==========================================================================
       WELCOME MESSAGE / CHARTER CARD
       ========================================================================== */
    .pns-charter-card {
      border-radius: var(--radius-lg);
      padding: 24px 28px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-right: 5px solid var(--accent-blue);
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .pns-charter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .pns-charter-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 800;
      color: #0ea5e9;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .pns-charter-body {
      direction: rtl;
      text-align: justify;
      text-align-last: right;
      font-family: 'Noto Naskh Arabic', 'Aref Ruqaa Ink', serif;
      font-size: 14px;
      line-height: 2;
      color: var(--text-primary);
    }

    .pns-charter-verse {
      color: #0ea5e9;
      font-weight: 800;
      background: rgba(14, 165, 233, 0.08);
      padding: 2px 8px;
      border-radius: 6px;
    }

    .pns-charter-author {
      margin-top: 12px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      direction: ltr;
      text-align: right;
      font-size: 12.5px;
      font-weight: 750;
      color: var(--text-muted);
    }

    /* ==========================================================================
       SECTION HEADER
       ========================================================================== */
    .pns-section-head {
      margin-top: 8px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    .pns-section-title-wrap h2 {
      font-family: 'Manrope', sans-serif;
      font-size: 22px;
      font-weight: 850;
      color: var(--text-primary);
      margin-bottom: 4px;
      letter-spacing: -0.4px;
    }

    .pns-section-title-wrap p {
      font-size: 13.5px;
      color: var(--text-secondary);
    }

    /* ==========================================================================
       7 PLATFORM APPLICATIONS — BENTO GRID SHOWCASE
       ========================================================================== */
    .pns-apps-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
    }

    .pns-app-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      transform: none !important;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .pns-app-card:hover {
      border-color: var(--card-accent, #2563eb) !important;
      box-shadow: 0 0 0 1px var(--card-accent, #2563eb), 0 12px 32px -4px rgba(0, 0, 0, 0.2) !important;
      background-color: var(--bg-card-hover) !important;
    }

    /* Span configurations for Bento Grid */
    .pns-card-col-8 { grid-column: span 8; }
    .pns-card-col-4 { grid-column: span 4; }
    .pns-card-col-6 { grid-column: span 6; }
    .pns-card-col-12 { grid-column: span 12; }

    @media (max-width: 1100px) {
      .pns-card-col-8,
      .pns-card-col-4,
      .pns-card-col-6 {
        grid-column: span 12;
      }
    }

    /* Card Interior Layout */
    .pns-card-settings {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: wrap;
      gap: 20px;
    }

    .pns-card-settings .pns-app-card-top {
      margin-bottom: 0 !important;
    }

    .pns-card-settings .pns-app-card-foot {
      margin-top: 0 !important;
    }

    @media (max-width: 640px) {
      .pns-card-settings {
        flex-direction: column !important;
        align-items: flex-start !important;
      }
      .pns-card-settings .pns-app-card-top {
        margin-bottom: 16px !important;
      }
    }

    .pns-app-card-top {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }

    .pns-app-ico-box {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: #fff;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 6px 18px var(--ico-shadow, rgba(37, 99, 235, 0.3));
    }

    .pns-app-ico-box img {
      width: 32px;
      height: 32px;
      object-fit: contain;
    }

    .pns-app-card > div:first-child {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .pns-card-col-8 .pns-app-features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 26px;
      row-gap: 11px;
    }

    .pns-card-col-12 .pns-app-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 26px;
      row-gap: 11px;
    }

    @media (max-width: 900px) {
      .pns-card-col-8 .pns-app-features,
      .pns-card-col-12 .pns-app-features {
        grid-template-columns: 1fr;
      }
    }

    .pns-app-title {
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--text-primary);
      margin: 0;
      letter-spacing: -0.2px;
      line-height: 1.2;
    }

    .pns-app-desc {
      font-size: 13.5px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 18px;
    }

    /* Screenshot container inside Bento */
    .pns-app-screenshot {
      width: 100%;
      height: 220px;
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: 20px;
      border: 1px solid var(--border-color);
      background: rgba(0, 0, 0, 0.05);
      position: relative;
    }

    .pns-app-screenshot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: filter 0.2s ease;
    }

    .pns-app-card:hover .pns-app-screenshot img {
      filter: brightness(1.05);
    }

    /* Key Features Bullet List */
    .pns-app-features {
      list-style: none !important;
      padding: 0 !important;
      margin: 0 0 20px 0 !important;
      display: flex;
      flex-direction: column;
      gap: 11px;
      flex: 1;
    }

    .pns-app-features li {
      list-style: none !important;
      font-size: 13.5px;
      color: var(--text-secondary);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.55;
      font-weight: 500;
    }

    .pns-app-features li i {
      color: var(--card-accent, #2563eb);
      font-size: 11.5px;
      margin-top: 4px;
      flex-shrink: 0;
    }

    .pns-app-card-foot {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      border-top: 1px solid var(--border-color);
      padding-top: 16px;
      margin-top: auto;
    }

    .pns-app-link-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 38px;
      padding: 0 18px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1px;
      text-decoration: none;
      color: #ffffff !important;
      background: var(--card-accent, #2563eb);
      border: none;
      box-shadow: none !important;
      transform: none !important;
      transition: filter 0.2s ease, opacity 0.2s ease;
      cursor: pointer;
    }

    .pns-app-link-btn:hover,
    .pns-app-link-btn:focus,
    .pns-app-link-btn:active {
      filter: brightness(1.09);
      box-shadow: none !important;
      transform: none !important;
      text-decoration: none;
    }

    .pns-app-link-ghost {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .pns-app-link-ghost:hover {
      color: var(--text-primary);
    }

    .pns-app-link-ghost:hover {
      color: var(--text-primary);
    }

    /* ==========================================================================
       MODAL: PWA INSTALLATION HELPER
       ========================================================================== */
    .pns-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 9999;
    }

    .pns-modal-backdrop.open {
      display: flex;
    }

    .pns-modal-box {
      width: min(520px, 100%);
      border-radius: var(--radius-lg);
      background: var(--bg-card-solid);
      border: 1px solid var(--border-color-strong);
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    }

    .pns-modal-title {
      font-size: 19px;
      font-weight: 850;
      color: var(--text-primary);
      margin-bottom: 10px;
    }

    .pns-modal-text {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }

    /* ==========================================================================
       MODERN FOOTER
       ========================================================================== */
    .pns-footer {
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 10px;
    }

    .pns-footer-copy {
      font-size: 13px;
      color: var(--text-muted);
    }

    .pns-footer-copy strong {
      color: var(--text-primary);
    }

    .pns-footer-socials {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pns-footer-soc-link {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s;
    }

    .pns-footer-soc-link:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }

  </style>
  <script src="assets/protection.js"></script>

  <style id="pnsDirectThemeOverrides">
    html[data-theme="light"],
    html[data-theme="light"] body,
    body.light,
    body.theme-light {
      --bg-body: #f8fafc !important;
      --bg-app: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
      --bg-canvas: #f1f5f9 !important;
      --bg-card: rgba(255, 255, 255, 0.94) !important;
      --bg-card-hover: #ffffff !important;
      --bg-card-solid: #ffffff !important;
      --border-color: rgba(0, 0, 0, 0.1) !important;
      --border-color-strong: rgba(0, 0, 0, 0.16) !important;
      --border-hover: #2563eb !important;
      --text-primary: #0f172a !important;
      --text-secondary: #475569 !important;
      --text-muted: #64748b !important;
      background-color: #f8fafc !important;
      color: #0f172a !important;
    }
    html[data-theme="light"] body::before,
    html[data-theme="light"] body::after,
    body.light::before,
    body.light::after {
      display: none !important;
    }
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    body.dark,
    body.theme-dark {
      --bg-body: #090d16 !important;
      --bg-canvas: #060910 !important;
      --bg-card: rgba(15, 23, 42, 0.78) !important;
      --bg-card-hover: rgba(22, 33, 58, 0.92) !important;
      --bg-card-solid: #0f172a !important;
      --border-color: rgba(255, 255, 255, 0.08) !important;
      --border-color-strong: rgba(255, 255, 255, 0.16) !important;
      --border-hover: #3b82f6 !important;
      --text-primary: #f8fafc !important;
      --text-secondary: #94a3b8 !important;
      --text-muted: #64748b !important;
      background-color: #090d16 !important;
      color: #f8fafc !important;
    }
  </style>
  <script>
    (function() {
      window.applyPnsThemeDirectly = function(theme) {
        var isDark = (theme !== 'light');
        var targetTheme = isDark ? 'dark' : 'light';
        var html = document.documentElement;
        var body = document.body;

        html.setAttribute('data-theme', targetTheme);
        html.classList.toggle('dark', isDark);
        html.classList.toggle('light', !isDark);
        html.style.colorScheme = targetTheme;

        if (body) {
          body.setAttribute('data-theme', targetTheme);
          body.classList.toggle('dark', isDark);
          body.classList.toggle('light', !isDark);
          body.classList.toggle('theme-dark', isDark);
          body.classList.toggle('theme-light', !isDark);
          body.classList.toggle('light-mode', !isDark);
        }

        try {
          localStorage.setItem('theme', targetTheme);
          localStorage.setItem('pns_theme', targetTheme);
          localStorage.setItem('qcm_pns_theme', targetTheme);
          localStorage.setItem('suivi-pns-theme', targetTheme);
          localStorage.setItem('chronos_theme', targetTheme);
          localStorage.setItem('darkMode', isDark ? 'true' : 'false');
          window.dispatchEvent(new CustomEvent('pnsThemeChanged', { detail: { theme: targetTheme } }));
        } catch (_) {}
      };

      window.togglePnsTheme = function(e) {
        if (e) {
          if (typeof e.preventDefault === 'function') e.preventDefault();
          if (typeof e.stopPropagation === 'function') e.stopPropagation();
        }
        var cur = document.documentElement.getAttribute('data-theme') || (document.body && document.body.classList.contains('light') ? 'light' : 'dark');
        var next = (cur === 'light') ? 'dark' : 'light';

        if (window.PNSGlobalSettings && typeof window.PNSGlobalSettings.setTheme === 'function') {
          window.PNSGlobalSettings.setTheme(next);
        }
        window.applyPnsThemeDirectly(next);
      };

      var saved = 'dark';
      try {
        saved = localStorage.getItem('theme') || localStorage.getItem('pns_theme') || localStorage.getItem('qcm_pns_theme') || 'dark';
      } catch (_) {}
      document.documentElement.setAttribute('data-theme', saved);
    })();
  </script>
</head>

<body class="theme-dark">
  <div class="pns-app-layout">

    <!-- ==================================================================== -->
    <!-- MAIN CONTENT AREA (Full Width — No Sidebar)                          -->
    <!-- ==================================================================== -->
    <main class="main-content" id="mainContent">
      <div class="pns-container">

        <!-- Basmala Banner -->
        <div class="pns-basmala-strip">
          <p class="pns-basmala-text">بِسْمِ ٱللَّٰهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
        </div>

        <!-- Hero Section (Directly on Page — No Box Container) -->
        <section class="pns-hero-card" aria-label="Présentation Médecine PNS">
          <div class="pns-hero-content">
            <!-- Animated Ultra-Modern Title Showcase (La Médecine PNS) -->
            <div class="pns-hero-brand-showcase">
              <!-- Author Signature (Static Modern Black Font with Striped Heart Icon) -->
              <div class="pns-author-badge" aria-label="Auteur : By Oussama Abdelaziz Djabali">
                <i class="fa-solid fa-heart-pulse pns-heart-pulse-icon" aria-hidden="true"></i>
                <span class="pns-author-text">By Oussama Abdelaziz Djabali</span>
              </div>

              <!-- Grand Kinetic Moving Letters Title -->
              <h1 class="pns-grand-title" aria-label="La Médecine PNS">
                <span class="pns-title-word word-la">
                  <span class="pns-char" style="--ci: 1; --rot: -4deg;">L</span><span class="pns-char" style="--ci: 2; --rot: 3deg;">a</span>
                </span>
                <span class="pns-title-word word-medecine">
                  <span class="pns-char" style="--ci: 3; --rot: -3deg;">M</span><span class="pns-char" style="--ci: 4; --rot: 4deg;">é</span><span class="pns-char" style="--ci: 5; --rot: -3deg;">d</span><span class="pns-char" style="--ci: 6; --rot: 3deg;">e</span><span class="pns-char" style="--ci: 7; --rot: -4deg;">c</span><span class="pns-char" style="--ci: 8; --rot: 3deg;">i</span><span class="pns-char" style="--ci: 9; --rot: -3deg;">n</span><span class="pns-char" style="--ci: 10; --rot: 4deg;">e</span>
                </span>
                <span class="pns-title-word word-pns">
                  <span class="pns-char pns-char-accent" style="--ci: 11; --rot: -4deg;">P</span><span class="pns-char pns-char-accent" style="--ci: 12; --rot: 3deg;">N</span><span class="pns-char pns-char-accent" style="--ci: 13; --rot: -3deg;">S</span>
                </span>
              </h1>

              <!-- Grand Cyber-Medical ECG Heartbeat Wave (Replacing the energy bar) -->
              <div class="pns-grand-ecg-wrapper" aria-hidden="true">
                <svg class="pns-grand-ecg-svg" viewBox="0 0 600 60" fill="none" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="pnsEcgGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                      <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.1" />
                      <stop offset="25%" stop-color="#06b6d4" stop-opacity="0.9" />
                      <stop offset="50%" stop-color="#3b82f6" stop-opacity="1" />
                      <stop offset="75%" stop-color="#10b981" stop-opacity="0.9" />
                      <stop offset="100%" stop-color="#8b5cf6" stop-opacity="0.1" />
                    </linearGradient>
                  </defs>
                  <!-- Baseline Trail -->
                  <path class="pns-grand-ecg-trail" d="M0 30 L160 30 Q175 22 190 30 L210 30 L220 34 L235 5 L250 55 L260 25 L270 30 L290 30 Q305 18 320 30 L340 30 L350 34 L365 5 L380 55 L390 25 L400 30 L420 30 Q435 18 450 30 L600 30" />
                  <!-- Animated Pulse Beat -->
                  <path class="pns-grand-ecg-pulse" d="M0 30 L160 30 Q175 22 190 30 L210 30 L220 34 L235 5 L250 55 L260 25 L270 30 L290 30 Q305 18 320 30 L340 30 L350 34 L365 5 L380 55 L390 25 L400 30 L420 30 Q435 18 450 30 L600 30" stroke="url(#pnsEcgGrad)" />
                </svg>
              </div>
            </div>

            <!-- Install Action Buttons & Quick Tools -->
            <div class="pns-hero-actions">
              <button type="button" class="pns-btn pns-btn-secondary" id="installDesktopBtn">
                <i class="fa-solid fa-laptop"></i> Installer PC
              </button>
              <button type="button" class="pns-btn pns-btn-secondary" id="installMobileBtn">
                <i class="fa-solid fa-mobile-screen"></i> Installer Mobile
              </button>
              <div class="pns-hero-socials" aria-label="Paramètres et liens">
                <button type="button" class="pns-footer-soc-link theme-toggle-btn" id="themeToggleBtn" onclick="window.togglePnsTheme(event)" title="Mode Sombre / Mode Clair" aria-label="Mode Sombre / Mode Clair">
                  <i class="fa-solid fa-gear"></i>
                </button>
                <a href="https://t.me/medecinepns" target="_blank" rel="noopener noreferrer" class="pns-footer-soc-link" title="Médecine PNS (Canal Telegram)"><i class="fa-brands fa-telegram"></i></a>
                <a href="https://t.me/Oussamaabdelazizdjabali" target="_blank" rel="noopener noreferrer" class="pns-footer-soc-link" title="أسامة عزيز (Contact Telegram)"><i class="fa-solid fa-paper-plane"></i></a>
                <a href="https://www.facebook.com/share/14qe5DyijNw/" target="_blank" rel="noopener noreferrer" class="pns-footer-soc-link" title="اسامة عزيز pns (Facebook)"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="https://www.instagram.com/oussama.aziz_pns?vrfl=OGEwNWM1a2Jta2dt" target="_blank" rel="noopener noreferrer" class="pns-footer-soc-link" title="Oussama.aziz_pns (Instagram)"><i class="fa-brands fa-instagram"></i></a>
              </div>
            </div>
          </div>

          <!-- Live KPI Metrics Strip -->
          <div class="pns-kpi-grid">
            <div class="pns-kpi-item">
              <div class="pns-kpi-num">+26 000</div>
              <div class="pns-kpi-label">QCMs</div>
            </div>
            <div class="pns-kpi-item">
              <div class="pns-kpi-num">+10 000</div>
              <div class="pns-kpi-label">Fichiers PDF</div>
            </div>
            <div class="pns-kpi-item">
              <div class="pns-kpi-num" style="font-size: 19px; line-height: 1.25;">Des dizaines d'idées</div>
              <div class="pns-kpi-label">facilitent votre chemin</div>
            </div>
            <div class="pns-kpi-item">
              <div class="pns-kpi-num">100%</div>
              <div class="pns-kpi-label">Gratuit</div>
            </div>
          </div>
        </section>

        <!-- ==================================================================
             PNS INTERACTIVE 8-TAB SHOWCASE & 16:9 SLIDER (COMPACT & FRENCH)
             ================================================================== -->
        <section class="pns-showcase-container" id="pnsIntroShowcase" aria-label="Présentation interactive de l'écosystème PNS">
          <!-- 8 Tabs Navigation Bar (Centered Horizontally) -->
          <div class="pns-showcase-tabs-wrapper">
            <div class="pns-showcase-tabs-nav" role="tablist">
              <button class="pns-showcase-tab-btn tab-salam active" type="button" role="tab" data-tab-target="tabSalam" aria-selected="true" title="السلام عليكم">
                <i class="fa-solid fa-handshake"></i><span class="tab-label">السلام عليكم</span>
              </button>
              <button class="pns-showcase-tab-btn" type="button" role="tab" data-tab-target="tabQcms" aria-selected="false" title="QCMs PNS">
                <i class="fa-solid fa-clipboard-question"></i><span class="tab-label">QCMs PNS</span>
              </button>
              <button class="pns-showcase-tab-btn" type="button" role="tab" data-tab-target="tabCours" aria-selected="false" title="Cours PNS">
                <i class="fa-solid fa-book-open"></i><span class="tab-label">Cours PNS</span>
              </button>
              <button class="pns-showcase-tab-btn" type="button" role="tab" data-tab-target="tabSuivi" aria-selected="false" title="Suivi PNS">
                <i class="fa-solid fa-chart-line"></i><span class="tab-label">Suivi PNS</span>
              </button>
              <button class="pns-showcase-tab-btn" type="button" role="tab" data-tab-target="tabMoyenne" aria-selected="false" title="Moyenne PNS">
                <i class="fa-solid fa-calculator"></i><span class="tab-label">Moyenne PNS</span>
              </button>
              <button class="pns-showcase-tab-btn" type="button" role="tab" data-tab-target="tabNotes" aria-selected="false" title="Notes PNS">
                <i class="fa-solid fa-note-sticky"></i><span class="tab-label">Notes PNS</span>
              </button>
              <button class="pns-showcase-tab-btn" type="button" role="tab" data-tab-target="tabCalendar" aria-selected="false" title="Calendarier PNS">
                <i class="fa-solid fa-calendar-days"></i><span class="tab-label">Calendarier PNS</span>
              </button>
              <button class="pns-showcase-tab-btn" type="button" role="tab" data-tab-target="tabMindmap" aria-selected="false" title="Mindmap PNS">
                <i class="fa-solid fa-diagram-project"></i><span class="tab-label">Mindmap PNS</span>
              </button>
            </div>
          </div>

          <!-- TAB 1: السلام عليكم -->
          <div class="pns-showcase-panel active" id="tabSalam" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Bienvenue sur Médecine PNS</span>
              <span class="pns-salam-badge"><i class="fa-solid fa-heart-pulse"></i> Message d'Accueil</span>
            </div>
            <div class="pns-showcase-media-frame pns-salam-frame">
              <img src="Intro/Intro salam.jpg" alt="Intro Salam - Médecine PNS" loading="eager">
            </div>
          </div>

          <!-- TAB 2: QCMs PNS -->
          <div class="pns-showcase-panel" id="tabQcms" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Banque d'épreuves et QCMs</span>
              <a href="qcmspns/qcmspns.html" class="pns-showcase-launch-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Ouvrir QCMs PNS
              </a>
            </div>
            <div class="pns-showcase-media-frame" data-slider-container>
              <div class="pns-slider-progress"><div class="pns-slider-progress-bar"></div></div>
              <button class="pns-slider-ctrl prev" type="button" aria-label="Image précédente"><i class="fa-solid fa-chevron-left"></i></button>
              <button class="pns-slider-ctrl next" type="button" aria-label="Image suivante"><i class="fa-solid fa-chevron-right"></i></button>
              <div class="pns-slider-track">
                <div class="pns-slide-item active" data-title="Banque d'Ã©preuves et catalogue officiel" data-desc="Accédez à plus de 10 000 QCMs classés par année, module et source facultaire avec filtres multicritères et statistiques de réussite.">
                  <img src="Intro/Intro QCMs PNS/Intro QCMs PNS 1.png" alt="QCMs PNS 1" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Mode Examen & simulation chronométrée" data-desc="Entraînez-vous dans les conditions réelles d'épreuves facultaires avec minuteur, calcul automatique du score et corrigé instantané.">
                  <img src="Intro/Intro QCMs PNS/Intro QCMs PNS 2.png" alt="QCMs PNS 2" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Répétition espacée d'Ebbinghaus (SM-2)" data-desc="Ancrez durablement les questions difficiles grâce aux cycles d'apprentissage programmés (J+1, J+3, J+7, J+14 et J+30).">
                  <img src="Intro/Intro QCMs PNS/Intro QCMs PNS 3.png" alt="QCMs PNS 3" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Résolution interactive et explications détaillées" data-desc="Visualisez la justification clinique de chaque item, le surlignage des mots-clés et le décryptage des pièges d'examen les plus fréquents.">
                  <img src="Intro/Intro QCMs PNS/Intro QCMs PNS 4.png" alt="QCMs PNS 4" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Boîte à outils et stratégies de résolution" data-desc="Profitez d'outils intégrés : surligneur couleur, To-Do list de session, corbeille de tri et conseils méthodologiques éprouvés.">
                  <img src="Intro/Intro QCMs PNS/Intro QCMs PNS 5.png" alt="QCMs PNS 5" loading="lazy">
                </div>
              </div>
              <div class="pns-slider-dots-strip">
                <span class="pns-slider-dot active" data-slide-index="0"></span>
                <span class="pns-slider-dot" data-slide-index="1"></span>
                <span class="pns-slider-dot" data-slide-index="2"></span>
                <span class="pns-slider-dot" data-slide-index="3"></span>
                <span class="pns-slider-dot" data-slide-index="4"></span>
              </div>
            </div>
          </div>

          <!-- TAB 3: Cours PNS -->
          <div class="pns-showcase-panel" id="tabCours" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Bibliothèque officielle des cours médicaux</span>
              <a href="Cours PNS/courspns.html" class="pns-showcase-launch-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Explorer Cours PNS
              </a>
            </div>
            <div class="pns-showcase-media-frame" data-slider-container>
              <div class="pns-slider-progress"><div class="pns-slider-progress-bar"></div></div>
              <button class="pns-slider-ctrl prev" type="button" aria-label="Image précédente"><i class="fa-solid fa-chevron-left"></i></button>
              <button class="pns-slider-ctrl next" type="button" aria-label="Image suivante"><i class="fa-solid fa-chevron-right"></i></button>
              <div class="pns-slider-track">
                <div class="pns-slide-item active" data-title="Bibliothèque médicale numérique centralisée" data-desc="Tous les cours officiels et polycopiés des 6 années de médecine réunis au même endroit, indexés et prêts à l'étude.">
                  <img src="Intro/Intro Cours PNS/Intro Cours PNS 1.png" alt="Cours PNS 1" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Organisation par années et modules cliniques" data-desc="Navigation intuitive couvrant les sciences fondamentales (1A-3A) jusqu'aux spécialités médicales et chirurgicales (4A-6A).">
                  <img src="Intro/Intro Cours PNS/Intro Cours PNS 2.png" alt="Cours PNS 2" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Espace préparation au Résidanat" data-desc="Fiches synthétiques, résumés percutants et conférences ciblées pour optimiser les révisions du concours de spécialité.">
                  <img src="Intro/Intro Cours PNS/Intro Cours PNS 3.png" alt="Cours PNS 3" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Drives collaboratifs et partages universitaires" data-desc="Liens directs vers les meilleurs drives hospitalo-universitaires algériens et français régulièrement actualisés.">
                  <img src="Intro/Intro Cours PNS/Intro Cours PNS 4.png" alt="Cours PNS 4" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Polycopiés nationaux et passerelle QCMs" data-desc="Supports de référence consultables avec pont interactif vers la banque de questions correspondante pour chaque cours.">
                  <img src="Intro/Intro Cours PNS/Intro Cours PNS 5.png" alt="Cours PNS 5" loading="lazy">
                </div>
              </div>
              <div class="pns-slider-dots-strip">
                <span class="pns-slider-dot active" data-slide-index="0"></span>
                <span class="pns-slider-dot" data-slide-index="1"></span>
                <span class="pns-slider-dot" data-slide-index="2"></span>
                <span class="pns-slider-dot" data-slide-index="3"></span>
                <span class="pns-slider-dot" data-slide-index="4"></span>
              </div>
            </div>
          </div>

          <!-- TAB 4: Suivi PNS -->
          <div class="pns-showcase-panel" id="tabSuivi" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Tableau de bord et progression</span>
              <a href="Suivi PNS/Suivipns.html" class="pns-showcase-launch-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Accéder au Suivi PNS
              </a>
            </div>
            <div class="pns-showcase-media-frame" data-slider-container>
              <div class="pns-slider-progress"><div class="pns-slider-progress-bar"></div></div>
              <button class="pns-slider-ctrl prev" type="button" aria-label="Image précédente"><i class="fa-solid fa-chevron-left"></i></button>
              <button class="pns-slider-ctrl next" type="button" aria-label="Image suivante"><i class="fa-solid fa-chevron-right"></i></button>
              <div class="pns-slider-track">
                <div class="pns-slide-item active" data-title="Tableau de bord analytique de progression" data-desc="Visualisez d'un coup d'œil le pourcentage d'avancement par module, les cours maîtrisés et les priorités de révision.">
                  <img src="Intro/Intro Suivi PNS/Intro Suivi PNS 1.png" alt="Suivi PNS 1" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Système d'apprentissage par couches (C1 à C4)" data-desc="Méthode structurée pour suivre la maturation de chaque cours, de la première lecture attentive jusqu'au rappel parfait.">
                  <img src="Intro/Intro Suivi PNS/Intro Suivi PNS 2.png" alt="Suivi PNS 2" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Indicateurs d'évaluation et difficulté ressentie" data-desc="Attribuez une note de difficulté, suivez le nombre de pages étudiées et planifiez vos prochaines sessions ciblées.">
                  <img src="Intro/Intro Suivi PNS/Intro Suivi PNS 3.png" alt="Suivi PNS 3" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Chronologie d'apprentissage et historique" data-desc="Frise temporelle dynamique pour garder le rythme de révision et identifier les retards avant chaque échéance facultaire.">
                  <img src="Intro/Intro Suivi PNS/Intro Suivi PNS 4.png" alt="Suivi PNS 4" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Génération et export PDF haute fidélité" data-desc="Imprimez vos feuilles de route en format A4 haute résolution pour un suivi papier personnalisé ou un affichage mural.">
                  <img src="Intro/Intro Suivi PNS/Intro Suivi PNS 5.png" alt="Suivi PNS 5" loading="lazy">
                </div>
              </div>
              <div class="pns-slider-dots-strip">
                <span class="pns-slider-dot active" data-slide-index="0"></span>
                <span class="pns-slider-dot" data-slide-index="1"></span>
                <span class="pns-slider-dot" data-slide-index="2"></span>
                <span class="pns-slider-dot" data-slide-index="3"></span>
                <span class="pns-slider-dot" data-slide-index="4"></span>
              </div>
            </div>
          </div>

          <!-- TAB 5: Moyenne PNS -->
       <div class="pns-showcase-panel" id="tabMoyenne" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Calculateur de moyenne et passage</span>
              <a href="Moyenne PNS/moyennepns.html" class="pns-showcase-launch-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Ouvrir Moyenne PNS
              </a>
            </div>
            <div class="pns-showcase-media-frame" data-slider-container>
              <div class="pns-slider-track">
                <div class="pns-slide-item active" data-title="Calculateur officiel conforme aux facultés" data-desc="Simulateur conforme aux arrêtés pédagogiques algériens intégrant les coefficients exacts et les seuils de validation.">
                  <img src="Intro/Intro Moyenne/Intro Moyenne 1.png" alt="Moyenne PNS" loading="lazy">
                </div>
              </div>
            </div>
          </div>

          <!-- TAB 6: Notes PNS -->
       <div class="pns-showcase-panel" id="tabNotes" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Carnet de fiches et synthèses</span>
              <a href="Notes PNS/notespns.html" class="pns-showcase-launch-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Lancer Notes PNS
              </a>
            </div>
            <div class="pns-showcase-media-frame" data-slider-container>
              <div class="pns-slider-track">
                <div class="pns-slide-item active" data-title="Espace de rédaction médicale sans distraction" data-desc="Éditeur moderne et épuré spécialement pensé pour la rédaction de fiches cliniques et de synthèses de cours rapides.">
                  <img src="Intro/Intro Notes PNS/Intro Notes PNS 1.png" alt="Notes PNS" loading="lazy">
                </div>
              </div>
            </div>
          </div>

          <!-- TAB 7: Calendar PNS -->
          <div class="pns-showcase-panel" id="tabCalendar" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Agenda médical et minuteur Pomodoro</span>
              <a href="Calendar PNS/Calendar.html" class="pns-showcase-launch-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Ouvrir Calendarier PNS
              </a>
            </div>
            <div class="pns-showcase-media-frame" data-slider-container>
              <div class="pns-slider-progress"><div class="pns-slider-progress-bar"></div></div>
              <button class="pns-slider-ctrl prev" type="button" aria-label="Image précédente"><i class="fa-solid fa-chevron-left"></i></button>
              <button class="pns-slider-ctrl next" type="button" aria-label="Image suivante"><i class="fa-solid fa-chevron-right"></i></button>
              <div class="pns-slider-track">
                <div class="pns-slide-item active" data-title="Planning hebdomadaire interactif" data-desc="Planification visuelle de vos créneaux de travail, séances de QCMs, cours magistraux et gardes hospitalières.">
                  <img src="Intro/Intro Calendar/Intro Calendar 1.png" alt="Calendar PNS 1" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Minuteur Pomodoro et focus profond" data-desc="Chronomètre d'étude intégré alternant phases d'effort intense et pauses régénératrices avec signaux sonores discrets.">
                  <img src="Intro/Intro Calendar/Intro Calendar 2.png" alt="Calendar PNS 2" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Gestion des examens et stages pratiques" data-desc="Ajout rapide d'événements avec codes couleurs personnalisés pour ne manquer aucune date d'épreuve facultaire.">
                  <img src="Intro/Intro Calendar/Intro Calendar 3.png" alt="Calendar PNS 3" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Vue mensuelle et anticipation des révisions" data-desc="Aperçu global du mois pour cadencer vos sessions de révision et équilibrer la charge de travail avant les partiels.">
                  <img src="Intro/Intro Calendar/Intro Calendar 4.png" alt="Calendar PNS 4" loading="lazy">
                </div>
                <div class="pns-slide-item" data-title="Filtres d'activités et calendrier miniature" data-desc="Filtrage sélectif des tâches par type d'activité et mini-calendrier latéral pour une navigation temporelle immédiate.">
                  <img src="Intro/Intro Calendar/Intro Calendar 5.png" alt="Calendar PNS 5" loading="lazy">
                </div>
              </div>
              <div class="pns-slider-dots-strip">
                <span class="pns-slider-dot active" data-slide-index="0"></span>
                <span class="pns-slider-dot" data-slide-index="1"></span>
                <span class="pns-slider-dot" data-slide-index="2"></span>
                <span class="pns-slider-dot" data-slide-index="3"></span>
                <span class="pns-slider-dot" data-slide-index="4"></span>
              </div>
            </div>
          </div>

          <!-- TAB 8: Mindmap PNS -->
          <div class="pns-showcase-panel" id="tabMindmap" role="tabpanel">
            <div class="pns-showcase-header-strip">
              <span class="pns-showcase-tagline"><span class="tagline-dot"></span> Cartes mentales et arbres diagnostiques</span>
              <a href="Mindmap PNS/mindmappns.html" class="pns-showcase-launch-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Explorer Mindmap PNS
              </a>
            </div>
            <div class="pns-showcase-media-frame" data-slider-container>
              <div class="pns-slider-track">
                <div class="pns-slide-item active" data-title="Atelier de cartographie mentale médicale" data-desc="Toile visuelle interactive pour structurer les démarches étiologiques et synthétiser les concepts complexes.">
                  <img src="Intro/Intro Mindmap PNS/Intro Mindmap PNS 5.png" alt="Mindmap PNS" loading="lazy">
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Section Title: 7 Platform Applications -->
        <div class="pns-section-head">
          <div class="pns-section-title-wrap">
            <h2>Les 7 Applications & Outils PNS</h2>
          </div>
        </div>

        <!-- 7 Platform Applications Bento Grid -->
        <div class="pns-apps-grid" id="appsBentoGrid">

          <!-- 1. QCMs PNS (Col 8) -->
          <article class="pns-app-card pns-card-col-8" style="--card-accent: #2563eb; --ico-shadow: rgba(37, 99, 235, 0.4);" data-app-search="qcm qcms examen résidanat annales répétition espacée ebbinghaus quiz flashcards">
            <div>
              
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
                  <i class="fa-solid fa-clipboard-question"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">QCMs PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">+26 000 QCMs · Externat &amp; Résidanat</p>
                </div>
              </div>

              <ul class="pns-app-features">
                <li><i class="fa-solid fa-check"></i> Plus de 26 000 QCMs issus de la Faculté de médecine de Sétif,  l’externat + résidanat.</li>
                <li><i class="fa-solid fa-check"></i> Un système de répétition espacée pour chaque QCM.</li>
                <li><i class="fa-solid fa-check"></i> Une révision intelligente, fluide et efficace.</li>
                <li><i class="fa-solid fa-check"></i> Ajoutez vos propres QCMs et vos flashcards dans QCMs AI et Flashcards AI pour les réviser intelligemment.</li>
                <li><i class="fa-solid fa-check"></i> Mode Examen : évaluez votre niveau grâce à des examens blancs.</li>
                <li><i class="fa-solid fa-check"></i> Mode Study, Mode Notes et Mode Mindmap : résolvez des QCMs tout en révisant vos cours ou en prenant des notes.</li>
                <li><i class="fa-solid fa-check"></i> Entraînez-vous au résidanat avec des examens blancs, à partir des QCMs d’externat, des QCMs officiels du résidanat de Sétif ou de QCMs externes.</li>
                <li><i class="fa-solid fa-check"></i> To-do : enregistrez les QCMs à revoir ultérieurement.</li>
                <li><i class="fa-solid fa-check"></i> Interrogez ChatGPT sur un QCM en un seul clic.</li>
                <li><i class="fa-solid fa-check"></i> Et bien d’autres fonctionnalités !</li>
              </ul>
            </div>
            <div class="pns-app-card-foot">
              <a href="qcmspns/qcmspns.html" class="pns-app-link-btn">
                <i class="fa-solid fa-arrow-right"></i> Ouvrir QCMs PNS
              </a>
            </div>
          </article>

          <!-- 2. Cours PNS (Col 4) -->
          <article class="pns-app-card pns-card-col-4" style="--card-accent: #06b6d4; --ico-shadow: rgba(6, 182, 212, 0.4);" data-app-search="cours résumés polycopiés drives bibliothèque livres cours">
            <div>
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #06b6d4, #0891b2);">
                  <i class="fa-solid fa-book-open"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">Cours PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">+10 000 PDFs · Drives officiels</p>
                </div>
              </div>
              <ul class="pns-app-features">
                <li><i class="fa-solid fa-check"></i> Plus de 10 000 fichiers PDF : cours, notes, résumés, QCMs, examens et bien plus encore.</li>
                <li><i class="fa-solid fa-check"></i> Plus de 30 Drives officiels de la Faculté de médecine de Sétif.</li>
                <li><i class="fa-solid fa-check"></i> Des ressources couvrant toutes les années d’études, tous les modules et tous les cours de médecine.</li>
                <li><i class="fa-solid fa-check"></i> Une expérience fluide, avec des ressources organisées pour retrouver facilement ce dont vous avez besoin.</li>
                <li><i class="fa-solid fa-check"></i> Et bien d’autres fonctionnalités !</li>
              </ul>
            </div>
            <div class="pns-app-card-foot">
              <a href="Cours PNS/courspns.html" class="pns-app-link-btn" style="background: #0891b2;">
                <i class="fa-solid fa-arrow-right"></i> Explorer Cours PNS
              </a>
            </div>
          </article>

          <!-- 3. Suivi PNS (Col 4) -->
          <article class="pns-app-card pns-card-col-4" style="--card-accent: #10b981; --ico-shadow: rgba(16, 185, 129, 0.4);" data-app-search="suivi progression avancement dashboard pdf export checklist tâches">
            <div>
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #10b981, #059669);">
                  <i class="fa-solid fa-chart-pie"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">Suivi PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">Planification · Tâches · Révision</p>
                </div>
              </div>
              <ul class="pns-app-features">
                <li><i class="fa-solid fa-check"></i> Un plan de préparation pour chaque module afin de vous donner une vision claire du parcours à suivre.</li>
                <li><i class="fa-solid fa-check"></i> Un système de répétition espacée pour chaque cours.</li>
                <li><i class="fa-solid fa-check"></i> Identifiez, organisez et suivez les tâches à accomplir pour chaque cours.</li>
                <li><i class="fa-solid fa-check"></i> Consultez vos statistiques et évaluez votre progression dans chaque module, chaque cours et chaque année.</li>
                <li><i class="fa-solid fa-check"></i> Enregistrez les informations relatives à chaque cours : nom de l’enseignant, date du cours et bien plus encore.</li>
                <li><i class="fa-solid fa-check"></i> Ajoutez vos propres ressources et conservez-les dans chaque cours et chaque module.</li>
                <li><i class="fa-solid fa-check"></i> Et de nombreuses autres fonctionnalités !</li>
              </ul>
            </div>
            <div class="pns-app-card-foot">
              <a href="Suivi PNS/Suivipns.html" class="pns-app-link-btn" style="background: #059669;">
                <i class="fa-solid fa-arrow-right"></i> Accéder au Suivi
              </a>
            </div>
          </article>

          <!-- 4. Calendar PNS (Col 4) -->
          <article class="pns-app-card pns-card-col-4" style="--card-accent: #f59e0b; --ico-shadow: rgba(245, 158, 11, 0.4);" data-app-search="calendar calendrier agenda planning pomodoro minuteur stages dates examens">
            <div>
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
                  <i class="fa-solid fa-calendar-days"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">Calendarier PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">Agenda · Pomodoro · Synchronisation</p>
                </div>
              </div>
              <ul class="pns-app-features">
                <li><i class="fa-solid fa-check"></i> Une synchronisation intelligente entre Calendarier PNS, Suivi PNS et QCMs PNS.</li>
                <li><i class="fa-solid fa-check"></i> Planifiez vos examens, vos séances de QCMs et les tâches à accomplir pour chaque cours.</li>
                <li><i class="fa-solid fa-check"></i> Organisez votre emploi du temps et suivez vos révisions grâce à une planification centralisée et intelligente.</li>
              </ul>
            </div>
            <div class="pns-app-card-foot">
              <a href="Calendar PNS/Calendar.html" class="pns-app-link-btn" style="background: #d97706;">
                <i class="fa-solid fa-arrow-right"></i> Ouvrir Calendarier PNS
              </a>
            </div>
          </article>

          <!-- 5. Notes PNS (Col 4) -->
          <article class="pns-app-card pns-card-col-4" style="--card-accent: #8b5cf6; --ico-shadow: rgba(139, 92, 246, 0.4);" data-app-search="notes carnet fiches éditeur texte synthèses écriture document">
            <div>
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
                  <i class="fa-solid fa-note-sticky"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">Notes PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">Prise de notes · Organisation des cours</p>
                </div>
              </div>
              <ul class="pns-app-features">
                <li><i class="fa-solid fa-check"></i> Ajoutez, modifiez et enregistrez vos notes en toute simplicité.</li>
                <li><i class="fa-solid fa-check"></i> Organisez vos notes dans l’ensemble de vos cours.</li>
                <li><i class="fa-solid fa-check"></i> Une liste des cours est déjà disponible et un éditeur intuitif vous permet de rédiger et de personnaliser vos notes.</li>
                <li><i class="fa-solid fa-check"></i> Tout est prêt : à vous de donner vie à vos idées !</li>
              </ul>
            </div>
            <div class="pns-app-card-foot">
              <a href="Notes PNS/notespns.html" class="pns-app-link-btn" style="background: #7c3aed;">
                <i class="fa-solid fa-arrow-right"></i> Lancer Notes PNS
              </a>
            </div>
          </article>

          <!-- 6. Mindmap PNS (Col 6) -->
          <article class="pns-app-card pns-card-col-6" style="--card-accent: #ec4899; --ico-shadow: rgba(236, 72, 153, 0.4);" data-app-search="mindmap carte mentale arbre diagnostique sémiologie organigramme visuel">
            <div>
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #ec4899, #db2777);">
                  <i class="fa-solid fa-diagram-project"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">Mindmap PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">Cartes mentales · Diagnostics visuels</p>
                </div>
              </div>
              <ul class="pns-app-features">
                <li><i class="fa-solid fa-check"></i> Créez, modifiez et enregistrez vos cartes mentales en toute simplicité.</li>
                <li><i class="fa-solid fa-check"></i> Organisez vos cartes mentales pour l’ensemble de vos cours.</li>
                <li><i class="fa-solid fa-check"></i> Une liste des cours est déjà disponible et un éditeur intuitif vous permet de créer vos cartes librement.</li>
                <li><i class="fa-solid fa-check"></i> Tout est prêt : à vous de laisser parler votre créativité !</li>
              </ul>
            </div>
            <div class="pns-app-card-foot">
              <a href="Mindmap PNS/mindmappns.html" class="pns-app-link-btn" style="background: #db2777;">
                <i class="fa-solid fa-arrow-right"></i> Explorer Mindmap PNS
              </a>
            </div>
          </article>

          <!-- 7. Moyenne PNS (Col 6) -->
          <article class="pns-app-card pns-card-col-6" style="--card-accent: #2563eb; --ico-shadow: rgba(37, 99, 235, 0.4);" data-app-search="moyenne notes calcul passage cursus délibération ecos théorie compensation éliminatoire">
            <div>
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #2563eb, #06b6d4);">
                  <i class="fa-solid fa-calculator"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">Moyenne PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">Calcul de moyennes · Cursus complet</p>
                </div>
              </div>
              <ul class="pns-app-features">
                <li><i class="fa-solid fa-check"></i> Saisissez simplement vos notes et laissez le système calculer vos moyennes.</li>
                <li><i class="fa-solid fa-check"></i> Calculez vos moyennes pour toutes les années d’études.</li>
                <li><i class="fa-solid fa-check"></i> Calculez également votre cursus médical complet afin d’avoir une vue d’ensemble de votre parcours universitaire.</li>
              </ul>
            </div>
            <div class="pns-app-card-foot">
              <a href="Moyenne PNS/moyennepns.html" class="pns-app-link-btn" style="background: linear-gradient(135deg, #2563eb, #06b6d4);">
                <i class="fa-solid fa-arrow-right"></i> Lancer Moyenne PNS
              </a>
            </div>
          </article>

          <!-- 8. Paramètres PNS (Col 12 Full Width) -->
          <article class="pns-app-card pns-card-col-12" style="--card-accent: #64748b; --ico-shadow: rgba(100, 116, 139, 0.4);" data-app-search="paramètres réglages profil thème nuit jour langue sauvegarde données">
            <div>
              <div class="pns-app-card-top">
                <div class="pns-app-ico-box" style="background: linear-gradient(135deg, #64748b, #475569);">
                  <i class="fa-solid fa-gear"></i>
                </div>
                <div style="flex: 1;">
                  <h3 class="pns-app-title" style="margin: 0 0 2px 0; font-size: 18px;">Paramètres PNS</h3>
                  <p style="margin: 0; font-size: 12px; color: var(--text-secondary, #94a3b8); font-weight: 500;">Configuration · Profil · Thème</p>
                </div>
              </div>
            </div>
            <div class="pns-app-card-foot">
              <a href="Paramètres PNS/parametres.html" class="pns-app-link-btn" style="background: #475569;">
                <i class="fa-solid fa-arrow-right"></i> Configurer Paramètres PNS
              </a>
            </div>
          </article>

        </div>
      </div>
    </main>

    <!-- ==================================================================== -->
    <!-- UNIFIED PNS MOBILE BOTTOM NAVIGATION BAR                             -->
    <!-- ==================================================================== -->
    <nav class="pns-mobile-bottom-bar" aria-label="Navigation mobile PNS">
      <!-- 1. Page Home Icon (Active) -->
      <div class="pns-mobile-btn-wrap pns-wrap-active">
        <a href="index.html" class="pns-mobile-btn pns-mobile-home active" title="Page Principale — Accueil" aria-label="Page Principale — Accueil">
          <i class="fa-solid fa-house"></i>
        </a>
      </div>

      <!-- 3. Applications Quick Access Flyout -->
      <div class="pns-mobile-btn-wrap">
        <button type="button" class="pns-mobile-btn pns-mobile-flyout-trigger" title="Applications PNS" aria-label="Applications PNS">
          <i class="fa-solid fa-folder-open"></i>
        </button>
        <div class="pns-mobile-flyout" role="menu">
          <a href="qcmspns/qcmspns.html" class="pns-flyout-item" title="QCMs PNS"><i class="fa-solid fa-clipboard-question"></i></a>
          <a href="Cours PNS/courspns.html" class="pns-flyout-item" title="Cours PNS"><i class="fa-solid fa-book-open"></i></a>
          <a href="Suivi PNS/Suivipns.html" class="pns-flyout-item" title="Suivi PNS"><i class="fa-solid fa-chart-line"></i></a>
          <a href="Calendar PNS/Calendar.html" class="pns-flyout-item" title="Calendarier PNS"><i class="fa-solid fa-calendar-days"></i></a>
        </div>
      </div>

      <!-- 4. Pages PNS Flyout (Strictly all pages including Page Principale & Paramètres) -->
      <div class="pns-mobile-btn-wrap">
        <button type="button" class="pns-mobile-btn pns-mobile-flyout-trigger" title="Pages PNS" aria-label="Pages PNS">
          <i class="fa-solid fa-layer-group"></i>
        </button>
        <div class="pns-mobile-flyout" role="menu">
          <a href="index.html" class="pns-flyout-item" title="Page Principale"><i class="fa-solid fa-house"></i></a>
          <a href="Cours PNS/courspns.html" class="pns-flyout-item" title="Cours PNS"><i class="fa-solid fa-book-open"></i></a>
          <a href="qcmspns/qcmspns.html" class="pns-flyout-item" title="QCMs PNS"><i class="fa-solid fa-brain"></i></a>
          <a href="Suivi PNS/Suivipns.html" class="pns-flyout-item" title="Suivi PNS"><i class="fa-solid fa-chart-line"></i></a>
          <a href="Calendar PNS/Calendar.html" class="pns-flyout-item" title="Calendarier PNS"><i class="fa-solid fa-calendar-days"></i></a>
          <a href="Notes PNS/notespns.html" class="pns-flyout-item" title="Notes PNS"><i class="fa-solid fa-note-sticky"></i></a>
          <a href="Mindmap PNS/mindmappns.html" class="pns-flyout-item" title="Mindmap PNS"><i class="fa-solid fa-diagram-project"></i></a>
          <a href="Moyenne PNS/moyennepns.html" class="pns-flyout-item" title="Moyenne PNS"><i class="fa-solid fa-calculator"></i></a>
          <a href="Paramètres PNS/parametres.html" class="pns-flyout-item" title="Paramètres PNS"><i class="fa-solid fa-gear"></i></a>
        </div>
      </div>

      <!-- 5. Accounts Flyout -->
      <div class="pns-mobile-btn-wrap">
        <button type="button" class="pns-mobile-btn pns-mobile-flyout-trigger" title="Comptes PNS" aria-label="Comptes PNS">
          <i class="fa-solid fa-address-card"></i>
        </button>
        <div class="pns-mobile-flyout" role="menu">
          <a href="https://t.me/LAMEDECINEPNS" target="_blank" rel="noopener noreferrer" class="pns-flyout-item" title="Telegram PNS"><i class="fa-brands fa-telegram" style="color:#0088cc;"></i></a>
          <a href="https://t.me/OussamaAzizDj" target="_blank" rel="noopener noreferrer" class="pns-flyout-item" title="Telegram Oussama"><i class="fa-solid fa-paper-plane" style="color:#38bdf8;"></i></a>
          <a href="https://www.facebook.com/share/1FRJ28m7Vu/" target="_blank" rel="noopener noreferrer" class="pns-flyout-item" title="Facebook"><i class="fa-brands fa-facebook-f" style="color:#1877f2;"></i></a>
          <a href="https://www.instagram.com/oussama_aziz.dj?igsh=MTVrMjAzNW04MnR3ZQ==" target="_blank" rel="noopener noreferrer" class="pns-flyout-item" title="Instagram"><i class="fa-brands fa-instagram" style="color:#e4405f;"></i></a>
        </div>
      </div>
      <!-- Mobile Theme Toggle -->
      <div class="pns-mobile-btn-wrap">
        <button type="button" class="pns-mobile-btn theme-toggle-btn" id="mobileThemeToggleBtn" title="Mode Sombre / Mode Clair" aria-label="Mode Sombre / Mode Clair">
          <i class="fa-solid fa-moon"></i>
        </button>
      </div>
    </nav>

  </div>

  <!-- PWA Installation Modal Sheet -->
  <div class="pns-modal-backdrop" id="installHelpModal">
    <div class="pns-modal-box">
      <h3 class="pns-modal-title">Installer l'application Médecine PNS</h3>
      <p class="pns-modal-text" id="installHelpText">
        Ouvrez le menu du navigateur puis cliquez sur « Installer l'application » ou « Ajouter à l'écran d'accueil ».
      </p>
      <button type="button" class="pns-btn pns-btn-primary" onclick="document.getElementById('installHelpModal').classList.remove('open')">
        Compris
      </button>
    </div>
  </div>

  <!-- Client-side Logic for Index -->
  <script>
    (function () {
      'use strict';

            // Universal Theme Toggle System for Page Principale
      function syncThemeAcrossUI(theme) {
        const isDark = (theme !== 'light');
        const activeTheme = isDark ? 'dark' : 'light';
        const html = document.documentElement;
        const body = document.body;

        html.setAttribute('data-theme', activeTheme);
        html.classList.toggle('dark', isDark);
        html.classList.toggle('light', !isDark);

        if (body) {
          body.setAttribute('data-theme', activeTheme);
          body.classList.toggle('dark', isDark);
          body.classList.toggle('light', !isDark);
          body.classList.toggle('theme-dark', isDark);
          body.classList.toggle('theme-light', !isDark);
          body.classList.toggle('light-mode', !isDark);
        }

        const themeBtns = document.querySelectorAll('.theme-toggle-btn');
        themeBtns.forEach(btn => {
          const icon = btn.querySelector('i');
          if (icon) {
            icon.className = isDark ? 'fa-solid fa-moon' : 'fa-solid fa-sun';
          }
          btn.setAttribute('title', isDark ? 'Mode Sombre actif (Cliquer pour Mode Clair)' : 'Mode Clair actif (Cliquer pour Mode Sombre)');
        });
      }

      function handleThemeToggleClick(e) {
        if (e) {
          e.preventDefault();
          e.stopPropagation();
        }
        const curTheme = document.documentElement.getAttribute('data-theme') || (document.body && document.body.classList.contains('light') ? 'light' : 'dark');
        const nextTheme = (curTheme === 'light') ? 'dark' : 'light';

        if (window.PNSGlobalSettings && typeof window.PNSGlobalSettings.setTheme === 'function') {
          window.PNSGlobalSettings.setTheme(nextTheme);
        }
        syncThemeAcrossUI(nextTheme);

        try {
          localStorage.setItem('theme', nextTheme);
          localStorage.setItem('pns_theme', nextTheme);
          localStorage.setItem('qcm_pns_theme', nextTheme);
          localStorage.setItem('suivi-pns-theme', nextTheme);
          localStorage.setItem('chronos_theme', nextTheme);
          localStorage.setItem('darkMode', nextTheme === 'dark' ? 'true' : 'false');
          window.dispatchEvent(new CustomEvent('pnsThemeChanged', { detail: { theme: nextTheme } }));
        } catch (_) {}
      }

      document.querySelectorAll('.theme-toggle-btn').forEach(btn => {
        btn.addEventListener('click', handleThemeToggleClick);
      });

      window.addEventListener('pnsThemeChanged', (e) => {
        if (e && e.detail && e.detail.theme) {
          syncThemeAcrossUI(e.detail.theme);
        }
      });

      const initialTheme = document.documentElement.getAttribute('data-theme') || localStorage.getItem('theme') || localStorage.getItem('pns_theme') || 'dark';
      syncThemeAcrossUI(initialTheme);

      // 1. Synchronize Profile Information
      function syncProfile() {
        try {
          if (window.PNSGlobalSettings && typeof window.PNSGlobalSettings.getProfile === 'function') {
            const p = window.PNSGlobalSettings.getProfile();
            const name = (p && p.name && p.name.trim()) || 'Utilisateur PNS';
            const initial = name.charAt(0).toUpperCase() || 'U';
            const metaBits = [p.year, p.faculty].filter(Boolean);
            const meta = metaBits.length ? metaBits.join(' · ') : 'Médecine Générale';

            const nameEl = document.getElementById('sideUserName');
            const metaEl = document.getElementById('sideUserMeta');
            const avatarEl = document.getElementById('sideUserAvatar');
            const topNameEl = document.getElementById('topProfileName');
            const topAvatarEl = document.getElementById('topProfileAvatar');

            if (nameEl) nameEl.textContent = name;
            if (metaEl) metaEl.textContent = meta;
            if (avatarEl && avatarEl.tagName !== 'IMG') avatarEl.textContent = initial;
            if (topNameEl) topNameEl.textContent = name;
            if (topAvatarEl && topAvatarEl.tagName !== 'IMG') topAvatarEl.textContent = initial;
          }
        } catch (e) {}
      }

      syncProfile();

      // 3. Compute Real Stats from Catalog & QCMs
      function syncCatalogStats() {
        try {
          const catalog = window.PNS_CATALOG || window.MODULE_CATALOG;
          if (catalog && Array.isArray(catalog.years) && catalog.years.length) {
            const yearsCount = catalog.years.length;
            const modulesCount = catalog.years.reduce((acc, y) => acc + ((y.modules && y.modules.length) || 0), 0);

            const yearsEl = document.getElementById('kpiYearsTotal');
            const modsEl = document.getElementById('kpiModulesTotal');

            if (yearsEl) yearsEl.textContent = `${yearsCount} Années`;
            if (modsEl) modsEl.textContent = `${modulesCount} Modules`;
          }
        } catch (e) {}
      }

      if (window.PNS_CATALOG_READY && typeof window.PNS_CATALOG_READY.then === 'function') {
        window.PNS_CATALOG_READY.then(syncCatalogStats).catch(() => {});
      } else {
        syncCatalogStats();
      }

      // 4. Client-side Live Filter for Applications
      window.filterIndexApps = function (query) {
        const q = String(query || '').trim().toLowerCase();
        const cards = document.querySelectorAll('#appsBentoGrid .pns-app-card');
        cards.forEach(card => {
          if (!q) {
            card.style.display = '';
            return;
          }
          const text = (card.textContent + ' ' + (card.dataset.appSearch || '')).toLowerCase();
          card.style.display = text.includes(q) ? '' : 'none';
        });
      };

      // 5. PWA Installation Handler
      let deferredPrompt = null;
      window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredPrompt = e;
      });

      const installPC = document.getElementById('installDesktopBtn');
      const installMobile = document.getElementById('installMobileBtn');
      const modal = document.getElementById('installHelpModal');
      const modalText = document.getElementById('installHelpText');

      function triggerInstall(isMobile) {
        if (deferredPrompt) {
          deferredPrompt.prompt();
          deferredPrompt.userChoice.then(() => { deferredPrompt = null; });
          return;
        }
        if (modal) {
          if (modalText) {
            modalText.textContent = isMobile
              ? "Sur Safari (iPhone/iPad) : appuyez sur l'icône Partager puis « Sur l'écran d'accueil ». Sur Android : ouvrez le menu Chrome puis « Installer l'application »."
              : "Sur votre navigateur PC (Chrome ou Edge) : cliquez sur l'icône d'installation dans la barre d'adresse en haut à droite, ou dans le menu « Installer Médecine PNS ».";
          }
          modal.classList.add('open');
        }
      }

      if (installPC) installPC.addEventListener('click', () => triggerInstall(false));
      if (installMobile) installMobile.addEventListener('click', () => triggerInstall(true));
      if (modal) {
        modal.addEventListener('click', (e) => {
          if (e.target === modal) modal.classList.remove('open');
        });
      }

      // 6. Interactive Cursor Spotlight for Hero Card
      const heroCard = document.querySelector('.pns-hero-card');
      if (heroCard) {
        heroCard.addEventListener('mousemove', (e) => {
          const rect = heroCard.getBoundingClientRect();
          const x = ((e.clientX - rect.left) / rect.width) * 100;
          const y = ((e.clientY - rect.top) / rect.height) * 100;
          heroCard.style.setProperty('--mouse-x', x.toFixed(2) + '%');
          heroCard.style.setProperty('--mouse-y', y.toFixed(2) + '%');
        });
        heroCard.addEventListener('mouseleave', () => {
          heroCard.style.setProperty('--mouse-x', '50%');
          heroCard.style.setProperty('--mouse-y', '35%');
        });
      }

      // ======================================================================
      // 7. PNS INTERACTIVE 8-TAB SHOWCASE & 16:9 AUTO-SLIDER (5s INTERVAL)
      // ======================================================================
      const showcaseSection = document.getElementById('pnsIntroShowcase');
      if (showcaseSection) {
        const tabBtns = showcaseSection.querySelectorAll('.pns-showcase-tab-btn');
        const panels = showcaseSection.querySelectorAll('.pns-showcase-panel');
        let activeSliderInterval = null;

        function initSliderForPanel(panel) {
          if (activeSliderInterval) {
            clearInterval(activeSliderInterval);
            activeSliderInterval = null;
          }

          const container = panel.querySelector('[data-slider-container]');
          if (!container) return; // Tab Salam has no slider

          const slides = container.querySelectorAll('.pns-slide-item');
          const dots = container.querySelectorAll('.pns-slider-dot');
          const prevBtn = container.querySelector('.pns-slider-ctrl.prev');
          const nextBtn = container.querySelector('.pns-slider-ctrl.next');
          const progressBar = container.querySelector('.pns-slider-progress-bar');
          const featureBox = panel.querySelector('[data-feature-box]');
          const featureIndexEl = featureBox ? featureBox.querySelector('[data-feature-index]') : null;
          const featureTitleEl = featureBox ? featureBox.querySelector('[data-feature-title]') : null;
          const featureTextEl = featureBox ? featureBox.querySelector('[data-feature-text]') : null;

          let currentIndex = 0;
          const totalSlides = slides.length;
          if (totalSlides === 0) return;

          function resetProgressBar() {
            if (!progressBar) return;
            progressBar.style.transition = 'none';
            progressBar.style.width = '0%';
            void progressBar.offsetWidth; // Force reflow
            progressBar.style.transition = 'width 5000ms linear';
            progressBar.style.width = '100%';
          }

          function showSlide(index) {
            if (index < 0) index = totalSlides - 1;
            if (index >= totalSlides) index = 0;
            currentIndex = index;

            slides.forEach((s, idx) => {
              s.classList.toggle('active', idx === currentIndex);
            });

            dots.forEach((d, idx) => {
              d.classList.toggle('active', idx === currentIndex);
            });

            const currentSlide = slides[currentIndex];
            if (currentSlide && featureBox) {
              const desc = currentSlide.getAttribute('data-desc') || '';
              if (featureTextEl) featureTextEl.textContent = desc;
            }

            resetProgressBar();
          }

          function startAutoPlay() {
            if (totalSlides <= 1) return;
            if (activeSliderInterval) clearInterval(activeSliderInterval);
            resetProgressBar();
            activeSliderInterval = setInterval(() => {
              showSlide(currentIndex + 1);
            }, 5000);
          }

          function stopAutoPlay() {
            if (activeSliderInterval) {
              clearInterval(activeSliderInterval);
              activeSliderInterval = null;
            }
            if (progressBar) {
              const computedWidth = window.getComputedStyle(progressBar).width;
              progressBar.style.transition = 'none';
              progressBar.style.width = computedWidth;
            }
          }

          if (prevBtn && !prevBtn._hasBound) {
            prevBtn._hasBound = true;
            prevBtn.addEventListener('click', (e) => {
              e.stopPropagation();
              showSlide(currentIndex - 1);
              startAutoPlay();
            });
          }

          if (nextBtn && !nextBtn._hasBound) {
            nextBtn._hasBound = true;
            nextBtn.addEventListener('click', (e) => {
              e.stopPropagation();
              showSlide(currentIndex + 1);
              startAutoPlay();
            });
          }

          dots.forEach((dot, dotIdx) => {
            if (!dot._hasBound) {
              dot._hasBound = true;
              dot.addEventListener('click', (e) => {
                e.stopPropagation();
                showSlide(dotIdx);
                startAutoPlay();
              });
            }
          });

          // Pause autoplay on mouse enter, resume on mouse leave
          container.addEventListener('mouseenter', stopAutoPlay);
          container.addEventListener('mouseleave', startAutoPlay);

          // Initial slide display & start timer
          showSlide(0);
          startAutoPlay();
        }

        // Tab Switching
        tabBtns.forEach(btn => {
          btn.addEventListener('click', () => {
            const targetId = btn.getAttribute('data-tab-target');
            tabBtns.forEach(b => {
              b.classList.remove('active');
              b.setAttribute('aria-selected', 'false');
            });
            panels.forEach(p => p.classList.remove('active'));

            btn.classList.add('active');
            btn.setAttribute('aria-selected', 'true');

            const activePanel = document.getElementById(targetId);
            if (activePanel) {
              activePanel.classList.add('active');
              initSliderForPanel(activePanel);
            }
          });
        });

        // Initialize active panel
        const initialActivePanel = showcaseSection.querySelector('.pns-showcase-panel.active');
        if (initialActivePanel) {
          initSliderForPanel(initialActivePanel);
        }

        // Deep linking: check URL parameter ?introTab=tabQcms or hash
        try {
          const urlParams = new URLSearchParams(window.location.search);
          const urlTab = urlParams.get('introTab') || window.location.hash.replace('#', '');
          if (urlTab) {
            const matchedBtn = showcaseSection.querySelector(`[data-tab-target="${urlTab}"]`);
            if (matchedBtn) {
              matchedBtn.click();
            }
          }
        } catch (e) {
          /* ignore URL parsing error */
        }
      }
    })();
  </script>
</body>

</html>