* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; overflow: hidden; background: #f8fafc; }
    
    .slides { position: relative; width: 100vw; height: 100vh; }
    .slide { position: absolute; width: 100%; height: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 40px 60px 50px 60px; overflow-y: auto; }
    .slide.active { display: flex !important; }
    
    .arrow { position: fixed; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #0055A4, #003d7a); border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 24px; color: white; z-index: 1000; display: flex; align-items: center; justify-content: center; }
    .arrow:hover { background: linear-gradient(135deg, #FF6900, #FF8533); }
    .arrow-left { left: 15px; }
    .arrow-right { right: 15px; }
    
    .nav-dots { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 1000; background: rgba(0,0,0,0.3); padding: 8px 12px; border-radius: 20px; }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; }
    .dot.active { background: #FF6900; width: 24px; border-radius: 4px; }
    
    .slide-counter { position: fixed; top: 10px; right: 20px; font-size: 11px; color: white; font-weight: 600; background: rgba(0,0,0,0.6); padding: 4px 10px; border-radius: 10px; z-index: 1000; }
    
    .footer-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 8px; display: flex; z-index: 999; }
    .bar-blue { flex: 75; background: linear-gradient(90deg, #0055A4, #0077DD); }
    .bar-orange { flex: 25; background: linear-gradient(90deg, #FF6900, #FF8533); }

    /* === CSS BLOC TOPPAGE === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; }
    
    .slide {
      width: 100vw; height: 100vh; display: flex;
      flex-direction: column; justify-content: center; align-items: center;
      padding: 40px 60px 50px 60px;
    }
    .slide-bg-white { background: linear-gradient(180deg, #ffffff, #f8fafc); }
    .slide-bg-light { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }

    .content-slide { max-width: 1100px; width: 100%; }
    
    .section-title { 
      background: linear-gradient(135deg, #0055A4, #0077DD); 
      color: white; font-size: 20px; font-weight: 700; 
      padding: 12px 24px; margin-bottom: 20px; 
      display: inline-block; border-radius: 8px; 
    }
    .section-title-orange { 
      background: linear-gradient(135deg, #FF6900, #FF8533); 
      color: white; font-size: 20px; font-weight: 700; 
      padding: 12px 24px; margin-bottom: 20px; 
      display: inline-block; border-radius: 8px; 
    }

    /* ==========================================
       SLIDE 5 - TOP PAGE AVEC IMAGE (style V9)
       ========================================== */
    .toppage-wrapper {
      position: relative;
      display: inline-block;
      margin-bottom: 15px;
    }
    .toppage-img {
      width: 100%;
      max-width: 500px;
      border-radius: 10px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    }
    .tp-arrow {
      position: absolute;
      background: white;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      white-space: nowrap;
    }
    .tp-arrow.orange { border: 2px solid #FF6900; color: #FF6900; }
    .tp-arrow.blue { border: 2px solid #0055A4; color: #0055A4; }
    .tp-arrow.gray { border: 2px solid #64748b; color: #64748b; }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .goodtoknow {
      background: #f0fdf4;
      border: 2px solid #10B981;
      border-radius: 12px;
      padding: 14px;
    }
    .goodtoknow-title {
      font-size: 11px;
      font-weight: 700;
      color: #065F46;
      margin-bottom: 8px;
    }
    .goodtoknow-list {
      font-size: 9px;
      color: #047857;
      line-height: 1.45;
    }

    /* ==========================================
       SLIDE 6 - DESKTOP & MOBILE
       ========================================== */
    .dm-layout {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 40px;
      align-items: start;
    }

    /* DESKTOP */
    .desktop-section h3 {
      font-size: 14px;
      color: #0055A4;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .desktop-schema {
      background: #f0f4f8;
      border-radius: 14px;
      padding: 15px;
      border: 2px solid #e2e8f0;
      margin-bottom: 15px;
    }
    .desktop-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 10px;
      height: 180px;
    }
    .desktop-carousel {
      background: linear-gradient(135deg, #FF6900, #FF8533);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 16px;
    }
    .desktop-right {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .desktop-encart-d {
      flex: 1;
      background: linear-gradient(135deg, #0055A4, #0077DD);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 12px;
      text-align: center;
    }
    .desktop-encarts-s {
      display: flex;
      gap: 6px;
      height: 55px;
    }
    .desktop-encart-s {
      flex: 1;
      background: #94a3b8;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 14px;
    }
    .desktop-info {
      font-size: 11px;
      color: #4A5568;
      line-height: 1.6;
    }
    .desktop-info strong {
      color: #0055A4;
      font-size: 12px;
    }

    /* MOBILE - TAILLE RÉELLE */
    .mobile-section h3 {
      font-size: 14px;
      color: #FF6900;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mobile-wrapper {
      display: flex;
      gap: 25px;
      align-items: flex-start;
    }
    .mobile-phone {
      width: 180px;
      background: #1a1a1a;
      border-radius: 30px;
      padding: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    }
    .mobile-notch {
      width: 60px;
      height: 6px;
      background: #333;
      border-radius: 3px;
      margin: 0 auto 10px auto;
    }
    .mobile-screen {
      background: white;
      border-radius: 20px;
      padding: 10px;
      min-height: 300px;
    }
    .mobile-header {
      background: #f0f0f0;
      border-radius: 8px;
      padding: 8px;
      margin-bottom: 10px;
      font-size: 8px;
      color: #666;
    }
    .mobile-tabs {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
    }
    .mobile-tab {
      background: #e5e7eb;
      padding: 4px 8px;
      border-radius: 10px;
      font-size: 7px;
      color: #666;
    }
    .mobile-carousel {
      background: #9ca3af;
      border-radius: 8px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 10px;
    }
    .mobile-carousel-text {
      color: #FF6900;
      font-weight: 700;
      font-size: 14px;
    }
    .mobile-carousel-num {
      font-size: 28px;
      color: #666;
      font-weight: 300;
    }
    .mobile-carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: #666;
    }
    .mobile-carousel-arrow.left { left: 10px; }
    .mobile-carousel-arrow.right { right: 10px; }
    .mobile-encarts {
      display: flex;
      gap: 8px;
    }
    .mobile-encart {
      flex: 1;
      background: #a78bfa;
      border-radius: 8px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 18px;
    }
    .mobile-home {
      width: 40px;
      height: 5px;
      background: #333;
      border-radius: 3px;
      margin: 15px auto 0 auto;
    }

    .mobile-info {
      flex: 1;
    }
    .mobile-info-title {
      font-size: 13px;
      font-weight: 700;
      color: #FF6900;
      margin-bottom: 10px;
    }
    .mobile-info-list {
      font-size: 11px;
      color: #4A5568;
      line-height: 1.7;
      margin-bottom: 15px;
    }
    .tip-box {
      background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
      padding: 12px 16px;
      border-radius: 10px;
      border-left: 4px solid #10B981;
    }
    .tip-title {
      font-size: 12px;
      font-weight: 700;
      color: #065F46;
    }

    /* NAVIGATION TEST */
    .nav-test {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
    }
    .nav-test button {
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      background: #0055A4;
      color: white;
      cursor: pointer;
      font-weight: 600;
    }
    .nav-test button:hover {
      background: #FF6900;
    }

    /* === CSS BLOC NOMENCLATURE === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; }
    
    .slide {
      width: 100vw; height: 100vh; display: none;
      flex-direction: column; justify-content: center; align-items: center;
      padding: 40px 60px 50px 60px;
    }
    .slide.active { display: flex !important; }
    .slide-bg-white { background: linear-gradient(180deg, #ffffff, #f8fafc); }
    .slide-bg-light { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }

    .content-slide { max-width: 1100px; width: 100%; }
    
    .section-title { 
      background: linear-gradient(135deg, #0055A4, #0077DD); 
      color: white; font-size: 20px; font-weight: 700; 
      padding: 12px 24px; margin-bottom: 25px; 
      display: inline-block; border-radius: 8px; 
    }

    /* ==========================================
       SLIDE 7 - PRINCIPES GÉNÉRAUX
       ========================================== */
    .principes-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      align-items: center;
    }
    .principes-image {
      text-align: center;
    }
    .principes-image img {
      width: 100%;
      max-width: 400px;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    }
    .principes-cards {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .principe-card {
      background: white;
      border-radius: 14px;
      padding: 18px 20px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      display: flex;
      gap: 15px;
      align-items: flex-start;
      transition: transform 0.2s;
    }
    .principe-card:hover {
      transform: translateX(5px);
    }
    .principe-icon {
      width: 45px;
      height: 45px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }
    .principe-icon.blue { background: linear-gradient(135deg, #0055A4, #0077DD); }
    .principe-icon.orange { background: linear-gradient(135deg, #FF6900, #FF8533); }
    .principe-icon.red { background: linear-gradient(135deg, #EF4444, #F87171); }
    .principe-content h4 {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 5px;
    }
    .principe-content p {
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
    }
    .principe-content strong {
      color: #0055A4;
    }

    /* ==========================================
       SLIDE 8 - PARAMÈTRES
       ========================================== */
    .params-layout {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 25px;
    }
    .param-section {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    }
    .param-header {
      padding: 14px 20px;
      color: white;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .param-header.blue { background: linear-gradient(135deg, #0055A4, #0077DD); }
    .param-header.orange { background: linear-gradient(135deg, #FF6900, #FF8533); }
    .param-body {
      padding: 18px 20px;
    }
    .option-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 12px;
      background: #f8fafc;
      border-radius: 10px;
      margin-bottom: 10px;
    }
    .option-item:last-child { margin-bottom: 0; }
    .option-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0055A4, #0077DD);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .option-text {
      font-size: 11px;
      color: #4A5568;
      line-height: 1.5;
    }
    .option-text strong {
      color: #1e293b;
      font-size: 12px;
    }
    .rule-item {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    .rule-item:last-child { margin-bottom: 0; }
    .rule-item.gsa { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); }
    .rule-item.gss { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); }
    .rule-item.none { background: linear-gradient(135deg, #FEE2E2, #FECACA); }
    .rule-badge {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      color: white;
    }
    .rule-badge.gsa { background: #0055A4; }
    .rule-badge.gss { background: #10B981; }
    .rule-badge.none { background: #EF4444; }
    .rule-text {
      font-size: 11px;
      color: #4A5568;
    }

    /* ==========================================
       SLIDE 9 - DESKTOP VS MOBILE
       ========================================== */
    .compare-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }
    .compare-section {
      text-align: center;
    }
    .compare-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .compare-title.desktop { color: #0055A4; }
    .compare-title.mobile { color: #FF6900; }
    .compare-visual {
      background: white;
      border-radius: 16px;
      padding: 15px;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
      margin-bottom: 15px;
    }
    .compare-visual img {
      width: 100%;
      max-width: 320px;
      border-radius: 8px;
    }
    /* Mobile phone frame */
    .mobile-frame {
      width: 160px;
      margin: 0 auto;
      background: #1a1a1a;
      border-radius: 25px;
      padding: 10px;
    }
    .mobile-frame img {
      width: 100%;
      border-radius: 15px;
    }
    .compare-info {
      background: #f8fafc;
      border-radius: 12px;
      padding: 15px;
      text-align: left;
    }
    .compare-info ul {
      list-style: none;
      font-size: 11px;
      color: #4A5568;
      line-height: 1.7;
    }
    .compare-info li {
      padding-left: 18px;
      position: relative;
      margin-bottom: 5px;
    }
    .compare-info li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #FF6900;
      font-weight: bold;
    }

    /* ==========================================
       SLIDE 10 - SURCHARGE
       ========================================== */
    .surcharge-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }
    .surcharge-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    }
    .surcharge-header {
      padding: 16px 20px;
      color: white;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .surcharge-header.blue { background: linear-gradient(135deg, #0055A4, #0077DD); }
    .surcharge-header.orange { background: linear-gradient(135deg, #FF6900, #FF8533); }
    .surcharge-header-icon {
      font-size: 24px;
    }
    .surcharge-header-text {
      font-size: 14px;
      font-weight: 700;
    }
    .surcharge-body {
      padding: 20px;
    }
    .surcharge-body ul {
      list-style: none;
      font-size: 12px;
      color: #4A5568;
      line-height: 1.8;
    }
    .surcharge-body li {
      padding-left: 20px;
      position: relative;
      margin-bottom: 8px;
    }
    .surcharge-body li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #FF6900;
      font-weight: bold;
      font-size: 16px;
    }
    .surcharge-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 15px;
    }
    .surcharge-tag {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 600;
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      color: #92400E;
    }

    /* ==========================================
       SLIDE 11 - POINTS DE CONTRÔLE
       ========================================== */
    .controle-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }
    .checklist-card {
      background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
      border: 2px solid #10B981;
      border-radius: 16px;
      padding: 25px;
    }
    .checklist-title {
      font-size: 16px;
      font-weight: 700;
      color: #065F46;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .checklist-items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .checklist-item {
      display: flex;
      gap: 12px;
      align-items: center;
      background: white;
      padding: 12px 15px;
      border-radius: 10px;
    }
    .check-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #10B981, #34D399);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    .check-text {
      font-size: 12px;
      color: #4A5568;
    }
    .warning-card {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      border: 2px solid #F59E0B;
      border-radius: 16px;
      padding: 25px;
    }
    .warning-title {
      font-size: 16px;
      font-weight: 700;
      color: #92400E;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .warning-content {
      font-size: 12px;
      color: #78350F;
      line-height: 1.8;
    }
    .warning-content strong {
      color: #92400E;
    }
    .action-box {
      background: white;
      border-radius: 10px;
      padding: 15px;
      margin-top: 15px;
    }
    .action-box p {
      font-size: 11px;
      color: #4A5568;
      margin-bottom: 5px;
    }

    /* NAVIGATION */
    .nav-test {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      background: rgba(0,0,0,0.8);
      padding: 10px 15px;
      border-radius: 30px;
    }
    .nav-test button {
      padding: 8px 16px;
      border: none;
      border-radius: 20px;
      background: #0055A4;
      color: white;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
    }
    .nav-test button:hover, .nav-test button.active {
      background: #FF6900;
    }

    /* === CSS BLOC CE === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; }
    
    .slide {
      width: 100vw; height: 100vh; display: none;
      flex-direction: column; justify-content: center; align-items: center;
      padding: 40px 60px 50px 60px;
    }
    .slide.active { display: flex !important; }
    .slide-bg-white { background: linear-gradient(180deg, #ffffff, #f8fafc); }
    .slide-bg-light { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }

    .content-slide { max-width: 1100px; width: 100%; }
    
    .section-title-green { 
      background: linear-gradient(135deg, #10B981, #34D399); 
      color: white; font-size: 20px; font-weight: 700; 
      padding: 12px 24px; margin-bottom: 25px; 
      display: inline-block; border-radius: 8px; 
    }

    /* ==========================================
       SLIDE 12 - DÉFINITION & RÔLE
       ========================================== */
    .ce-hero {
      display: flex;
      gap: 25px;
      align-items: center;
      margin-bottom: 25px;
    }
    .ce-icon-big {
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, #10B981, #34D399);
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50px;
      box-shadow: 0 15px 40px rgba(16, 185, 129, 0.3);
      flex-shrink: 0;
    }
    .ce-intro {
      flex: 1;
    }
    .ce-intro h3 {
      font-size: 22px;
      color: #10B981;
      margin-bottom: 10px;
    }
    .ce-intro p {
      font-size: 13px;
      color: #64748b;
      line-height: 1.6;
    }
    .ce-intro .highlight {
      display: inline-block;
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 700;
      color: #92400E;
      margin-top: 8px;
    }

    .ce-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    /* Rôles du CE */
    .ce-roles-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 6px 25px rgba(0,0,0,0.06);
    }
    .ce-roles-title {
      font-size: 14px;
      font-weight: 700;
      color: #10B981;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ce-roles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .ce-role {
      background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
      border-radius: 12px;
      padding: 15px 10px;
      text-align: center;
      transition: transform 0.2s;
    }
    .ce-role:hover {
      transform: translateY(-3px);
    }
    .ce-role-icon {
      font-size: 28px;
      margin-bottom: 8px;
    }
    .ce-role-text {
      font-size: 10px;
      color: #065F46;
      font-weight: 600;
    }

    /* Comportement */
    .ce-behavior-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 6px 25px rgba(0,0,0,0.06);
    }
    .ce-behavior-title {
      font-size: 14px;
      font-weight: 700;
      color: #0055A4;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .behavior-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .behavior-option {
      display: flex;
      gap: 15px;
      align-items: center;
      padding: 15px;
      border-radius: 12px;
    }
    .behavior-option.noclick {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      border: 2px solid #F59E0B;
    }
    .behavior-option.click {
      background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
      border: 2px solid #3B82F6;
    }
    .behavior-icon {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .behavior-icon.noclick { background: #F59E0B; }
    .behavior-icon.click { background: #3B82F6; }
    .behavior-content h5 {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .behavior-content.noclick h5 { color: #92400E; }
    .behavior-content.click h5 { color: #1E40AF; }
    .behavior-content p {
      font-size: 10px;
      color: #64748b;
    }
    .warning-badge {
      display: inline-block;
      background: #EF4444;
      color: white;
      padding: 4px 10px;
      border-radius: 15px;
      font-size: 9px;
      font-weight: 700;
      margin-top: 8px;
    }

    /* ==========================================
       SLIDE 13 - GESTION & RÉUTILISATION
       ========================================== */
    .gestion-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }
    .gestion-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    }
    .gestion-header {
      padding: 16px 20px;
      color: white;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .gestion-header.green { background: linear-gradient(135deg, #10B981, #34D399); }
    .gestion-header.blue { background: linear-gradient(135deg, #0055A4, #0077DD); }
    .gestion-header-icon { font-size: 24px; }
    .gestion-header-text { font-size: 14px; font-weight: 700; }
    .gestion-body {
      padding: 20px;
    }
    .gestion-body ul {
      list-style: none;
      font-size: 12px;
      color: #4A5568;
      line-height: 1.8;
    }
    .gestion-body li {
      padding-left: 20px;
      position: relative;
      margin-bottom: 8px;
    }
    .gestion-body li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #10B981;
      font-weight: bold;
    }
    .link-box {
      background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
      border: 2px solid #8B5CF6;
      border-radius: 12px;
      padding: 15px;
      margin-top: 15px;
    }
    .link-box-title {
      font-size: 11px;
      font-weight: 700;
      color: #6D28D9;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .link-box a {
      display: block;
      color: #7C3AED;
      font-size: 10px;
      word-break: break-all;
      text-decoration: none;
      padding: 8px 12px;
      background: white;
      border-radius: 8px;
      margin-top: 5px;
      transition: background 0.2s;
    }
    .link-box a:hover {
      background: #F3E8FF;
    }

    .depot-box {
      background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
      border: 2px solid #10B981;
      border-radius: 16px;
      padding: 20px;
      margin-top: 20px;
    }
    .depot-title {
      font-size: 14px;
      font-weight: 700;
      color: #065F46;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .depot-text {
      font-size: 11px;
      color: #047857;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    .depot-link {
      display: inline-block;
      background: #10B981;
      color: white;
      padding: 10px 20px;
      border-radius: 25px;
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.2s;
    }
    .depot-link:hover {
      background: #059669;
    }

    /* ==========================================
       SLIDE 14 - GROUPEMENTS
       ========================================== */
    .groupement-visual {
      background: linear-gradient(135deg, #E0E7FF, #C7D2FE);
      border-radius: 16px;
      padding: 25px;
      margin-bottom: 20px;
      text-align: center;
    }
    .groupement-demo {
      display: flex;
      gap: 15px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .groupement-box {
      background: white;
      border: 3px solid #6366F1;
      border-radius: 14px;
      padding: 15px 20px;
      min-width: 140px;
    }
    .groupement-box h5 {
      font-size: 11px;
      color: #4338CA;
      margin-bottom: 10px;
    }
    .groupement-items {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .groupement-item {
      background: linear-gradient(135deg, #6366F1, #818CF8);
      color: white;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 9px;
      font-weight: 600;
    }
    .groupement-arrow {
      font-size: 30px;
      color: #6366F1;
    }
    .groupement-ce {
      background: linear-gradient(135deg, #10B981, #34D399);
      color: white;
      padding: 12px 20px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
    }

    .groupement-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .groupement-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    }
    .groupement-header {
      padding: 14px 20px;
      color: white;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .groupement-header.purple { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
    .groupement-header.orange { background: linear-gradient(135deg, #FF6900, #FF8533); }
    .groupement-body {
      padding: 18px;
    }
    .groupement-body ul {
      list-style: none;
      font-size: 11px;
      color: #4A5568;
      line-height: 1.7;
    }
    .groupement-body li {
      padding-left: 18px;
      position: relative;
      margin-bottom: 6px;
    }
    .groupement-body li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #8B5CF6;
      font-weight: bold;
    }
    .warning-inline {
      display: flex;
      gap: 10px;
      align-items: center;
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      padding: 12px 15px;
      border-radius: 10px;
      margin-top: 12px;
    }
    .warning-inline-icon {
      font-size: 20px;
    }
    .warning-inline-text {
      font-size: 10px;
      color: #92400E;
    }

    /* NAVIGATION */
    .nav-test {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      background: rgba(0,0,0,0.8);
      padding: 10px 15px;
      border-radius: 30px;
    }
    .nav-test button {
      padding: 8px 16px;
      border: none;
      border-radius: 20px;
      background: #10B981;
      color: white;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
    }
    .nav-test button:hover, .nav-test button.active {
      background: #FF6900;
    }

    /* === CSS BLOC HABILLAGE === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; }
    
    .slide {
      width: 100vw; height: 100vh; display: none;
      flex-direction: column; justify-content: center; align-items: center;
      padding: 40px 60px 50px 60px;
    }
    .slide.active { display: flex !important; }
    .slide-bg-white { background: linear-gradient(180deg, #ffffff, #f8fafc); }
    .slide-bg-light { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }

    .content-slide { max-width: 1100px; width: 100%; }
    
    .section-title-purple { 
      background: linear-gradient(135deg, #8B5CF6, #A78BFA); 
      color: white; font-size: 20px; font-weight: 700; 
      padding: 12px 24px; margin-bottom: 25px; 
      display: inline-block; border-radius: 8px; 
    }

    /* ==========================================
       SLIDE 15 - PRINCIPES
       ========================================== */
    .hab-hero {
      display: flex;
      gap: 30px;
      align-items: center;
      margin-bottom: 30px;
    }
    .hab-icon-big {
      width: 110px;
      height: 110px;
      background: linear-gradient(135deg, #8B5CF6, #A78BFA);
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 55px;
      box-shadow: 0 15px 40px rgba(139, 92, 246, 0.3);
      flex-shrink: 0;
    }
    .hab-intro {
      flex: 1;
    }
    .hab-intro h3 {
      font-size: 22px;
      color: #8B5CF6;
      margin-bottom: 12px;
    }
    .hab-intro p {
      font-size: 13px;
      color: #64748b;
      line-height: 1.7;
    }
    .hab-intro strong {
      color: #7C3AED;
    }

    .hab-principles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 25px;
    }
    .hab-principle {
      background: white;
      border-radius: 14px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      display: flex;
      gap: 15px;
      align-items: flex-start;
    }
    .hab-principle-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }
    .hab-principle-icon.purple { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); }
    .hab-principle-icon.orange { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
    .hab-principle-content h4 {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 6px;
    }
    .hab-principle-content p {
      font-size: 11px;
      color: #64748b;
      line-height: 1.5;
    }

    .hab-levels {
      display: flex;
      gap: 20px;
      justify-content: center;
    }
    .hab-level {
      padding: 18px 35px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 14px;
      color: white;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    .hab-level.simple { background: linear-gradient(135deg, #64748b, #94a3b8); }
    .hab-level.complex { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }

    /* ==========================================
       SLIDE 16 - SIMPLE VS COMPLEXE
       ========================================== */
    .compare-hab {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }
    .compare-card {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    .compare-card.simple { background: linear-gradient(180deg, #64748b, #475569); }
    .compare-card.complex { background: linear-gradient(180deg, #8B5CF6, #7C3AED); }
    .compare-header {
      padding: 20px 25px;
      color: white;
      text-align: center;
    }
    .compare-header h4 {
      font-size: 20px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .compare-ops {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }
    .compare-op {
      background: rgba(255,255,255,0.2);
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
    }
    .compare-body {
      background: white;
      padding: 25px;
    }
    .compare-body h5 {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .compare-body ul {
      list-style: none;
      font-size: 11px;
      color: #4A5568;
      line-height: 1.8;
    }
    .compare-body li {
      padding-left: 20px;
      position: relative;
      margin-bottom: 6px;
    }
    .compare-body.simple li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #64748b;
      font-weight: bold;
    }
    .compare-body.complex li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #8B5CF6;
      font-weight: bold;
    }
    .compare-badge {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      margin-top: 10px;
    }
    .compare-badge.simple { background: #E2E8F0; color: #475569; }
    .compare-badge.complex { background: #EDE9FE; color: #7C3AED; }

    /* ==========================================
       SLIDE 17 - REGROUPEMENTS
       ========================================== */
    .regroup-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }
    .regroup-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    }
    .regroup-header {
      padding: 16px 20px;
      color: white;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .regroup-header.purple { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
    .regroup-header.orange { background: linear-gradient(135deg, #FF6900, #FF8533); }
    .regroup-body {
      padding: 20px;
    }
    .regroup-body ul {
      list-style: none;
      font-size: 11px;
      color: #4A5568;
      line-height: 1.8;
    }
    .regroup-body li {
      padding-left: 20px;
      position: relative;
      margin-bottom: 6px;
    }
    .regroup-body li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #8B5CF6;
      font-weight: bold;
    }
    .regroup-example {
      background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
      border-radius: 10px;
      padding: 12px 15px;
      margin-top: 12px;
    }
    .regroup-example-title {
      font-size: 10px;
      font-weight: 700;
      color: #7C3AED;
      margin-bottom: 6px;
    }
    .regroup-example-text {
      font-size: 10px;
      color: #6D28D9;
    }
    .warning-box {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      border: 2px solid #F59E0B;
      padding: 15px;
      border-radius: 12px;
      margin-top: 15px;
    }
    .warning-icon {
      font-size: 24px;
      flex-shrink: 0;
    }
    .warning-content h5 {
      font-size: 12px;
      font-weight: 700;
      color: #92400E;
      margin-bottom: 5px;
    }
    .warning-content p {
      font-size: 10px;
      color: #78350F;
      line-height: 1.5;
    }

    /* Visual demo */
    .visual-demo {
      background: linear-gradient(135deg, #F3E8FF, #EDE9FE);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
    }
    .visual-demo-title {
      font-size: 12px;
      font-weight: 700;
      color: #7C3AED;
      margin-bottom: 15px;
    }
    .visual-demo-content {
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .demo-group {
      background: white;
      border: 2px solid #8B5CF6;
      border-radius: 12px;
      padding: 12px 15px;
      min-width: 100px;
    }
    .demo-group h6 {
      font-size: 10px;
      color: #7C3AED;
      margin-bottom: 8px;
    }
    .demo-products {
      display: flex;
      gap: 5px;
      justify-content: center;
    }
    .demo-product {
      background: linear-gradient(135deg, #8B5CF6, #A78BFA);
      color: white;
      padding: 4px 8px;
      border-radius: 5px;
      font-size: 8px;
    }
    .demo-arrow {
      font-size: 24px;
      color: #8B5CF6;
    }
    .demo-ce {
      background: linear-gradient(135deg, #10B981, #34D399);
      color: white;
      padding: 10px 15px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 700;
    }

    /* NAVIGATION */
    .nav-test {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      background: rgba(0,0,0,0.8);
      padding: 10px 15px;
      border-radius: 30px;
    }
    .nav-test button {
      padding: 8px 16px;
      border: none;
      border-radius: 20px;
      background: #8B5CF6;
      color: white;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
    }
    .nav-test button:hover, .nav-test button.active {
      background: #FF6900;
    }

    /* === CSS BLOC TRADE === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; }
    
    .slide {
      width: 100vw; height: 100vh; display: none;
      flex-direction: column; justify-content: center; align-items: center;
      padding: 40px 60px 50px 60px;
    }
    .slide.active { display: flex !important; }
    .slide-bg-white { background: linear-gradient(180deg, #ffffff, #f8fafc); }
    .slide-bg-light { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }

    .content-slide { max-width: 1100px; width: 100%; }
    
    .section-title-teal { 
      background: linear-gradient(135deg, #14B8A6, #2DD4BF); 
      color: white; font-size: 20px; font-weight: 700; 
      padding: 12px 24px; margin-bottom: 25px; 
      display: inline-block; border-radius: 8px; 
    }

    /* ==========================================
       SLIDE 1 - PÉRIMÈTRE & OBJECTIF
       ========================================== */
    .trade-hero {
      display: flex;
      gap: 30px;
      align-items: center;
      margin-bottom: 25px;
    }
    .trade-hero img {
      width: 350px;
      border-radius: 16px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.15);
      flex-shrink: 0;
    }
    .trade-intro {
      flex: 1;
    }
    .trade-intro h3 {
      font-size: 20px;
      color: #14B8A6;
      margin-bottom: 10px;
    }
    .trade-intro p {
      font-size: 12px;
      color: #64748b;
      line-height: 1.7;
    }

    .packs-grid {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-bottom: 25px;
    }
    .pack-badge {
      background: linear-gradient(135deg, #14B8A6, #2DD4BF);
      color: white;
      padding: 14px 28px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 6px 20px rgba(20, 184, 166, 0.3);
    }

    .mission-box {
      background: linear-gradient(135deg, #F0FDFA, #CCFBF1);
      border: 2px solid #14B8A6;
      border-radius: 16px;
      padding: 20px 25px;
    }
    .mission-title {
      font-size: 14px;
      font-weight: 700;
      color: #0F766E;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .mission-text {
      font-size: 12px;
      color: #115E59;
      line-height: 1.7;
    }
    .mission-text strong {
      color: #0F766E;
    }

    /* ==========================================
       SLIDE 2 - RÈGLES PAR TYPE
       ========================================== */
    .rules-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 18px;
    }
    .rule-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    }
    .rule-header {
      padding: 14px 18px;
      color: white;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .rule-header.mosaic { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
    .rule-header.boutique { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
    .rule-header.slider { background: linear-gradient(135deg, #0055A4, #0077DD); }
    .rule-body {
      padding: 16px;
    }
    .rule-body ul {
      list-style: none;
      font-size: 10px;
      color: #4A5568;
      line-height: 1.7;
    }
    .rule-body li {
      padding-left: 16px;
      position: relative;
      margin-bottom: 6px;
    }
    .rule-body li::before {
      content: '→';
      position: absolute;
      left: 0;
      font-weight: bold;
    }
    .rule-body.mosaic li::before { color: #F59E0B; }
    .rule-body.boutique li::before { color: #8B5CF6; }
    .rule-body.slider li::before { color: #0055A4; }
    .rule-img {
      width: 100%;
      max-height: 80px;
      object-fit: contain;
      margin-top: 10px;
      border-radius: 6px;
    }
    .rule-tip {
      background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
      padding: 8px 12px;
      border-radius: 8px;
      margin-top: 10px;
      font-size: 9px;
      color: #1E40AF;
    }
    .rule-alert {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      padding: 8px 12px;
      border-radius: 8px;
      margin-top: 10px;
      font-size: 9px;
      color: #92400E;
    }

    /* ==========================================
       SLIDE 3 - ANOMALIES & CONTACTS
       ========================================== */
    .contacts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }
    .contact-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    }
    .contact-header {
      padding: 16px 20px;
      color: white;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .contact-header.orange { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
    .contact-header.blue { background: linear-gradient(135deg, #0055A4, #0077DD); }
    .contact-body {
      padding: 20px;
    }
    .contact-body p {
      font-size: 12px;
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    .contact-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 12px;
      background: #f8fafc;
      border-radius: 10px;
      margin-bottom: 10px;
    }
    .contact-item:last-child { margin-bottom: 0; }
    .contact-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .contact-icon.ppo { background: linear-gradient(135deg, #10B981, #34D399); }
    .contact-icon.nano { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
    .contact-info h5 {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }
    .contact-info p {
      font-size: 10px;
      color: #64748b;
      margin-bottom: 2px;
    }
    .contact-info a {
      font-size: 10px;
      color: #0055A4;
      text-decoration: none;
    }

    .tip-box {
      background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
      border: 2px solid #10B981;
      border-radius: 12px;
      padding: 15px 20px;
      margin-top: 20px;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .tip-icon {
      font-size: 24px;
    }
    .tip-text {
      font-size: 11px;
      color: #065F46;
      line-height: 1.5;
    }

    /* NAVIGATION */
    .nav-test {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      background: rgba(0,0,0,0.8);
      padding: 10px 15px;
      border-radius: 30px;
    }
    .nav-test button {
      padding: 8px 16px;
      border: none;
      border-radius: 20px;
      background: #14B8A6;
      color: white;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
    }
    .nav-test button:hover, .nav-test button.active {
      background: #FF6900;
    }

    /* === CSS BLOC PROCESS GSA === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; }
    
    .slide {
      width: 100vw; height: 100vh; display: none;
      flex-direction: column; justify-content: center; align-items: center;
      padding: 40px 60px 50px 60px;
    }
    .slide.active { display: flex !important; }

    /* SLIDE 8 - PROCESS TITLE */
    .s8 {
      background: linear-gradient(135deg, #0055A4 0%, #003d7a 100%);
      position: relative;
      overflow: hidden;
    }

    .s8::before {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(255, 105, 0, 0.15) 0%, transparent 70%);
      top: -200px;
      right: -200px;
      animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .s8-content {
      position: relative;
      z-index: 2;
    }

    .s8-title {
      font-size: 66px;
      font-weight: 700;
      color: white;
      margin-bottom: 20px;
      text-align: center;
      text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      animation: glow 2s ease-in-out infinite;
    }

    @keyframes glow {
      0%, 100% { text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
      50% { text-shadow: 0 4px 25px rgba(255, 255, 255, 0.3); }
    }

    .s8-badge {
      background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
      color: white;
      font-size: 34px;
      font-weight: 700;
      padding: 17px 68px;
      border-radius: 52px;
      box-shadow: 0 10px 35px rgba(255, 105, 0, 0.4);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }

    /* SLIDE 9 - TIMELINE */
    .s9 {
      background: linear-gradient(135deg, #F0F4FF 0%, #FFFFFF 100%);
    }

    .s9-content {
      width: 100%;
      max-width: 1100px;
    }

    .timeline-title {
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      background: linear-gradient(135deg, #0055A4 0%, #FF6900 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 35px;
    }

    .timeline-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }

    .timeline-track {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      border: 3px solid transparent;
      transition: all 0.3s;
    }

    .timeline-track:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.18);
    }

    .timeline-track.crea {
      border-color: #FF6900;
      background: linear-gradient(135deg, rgba(255, 105, 0, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

    .timeline-track.cv2 {
      border-color: #0055A4;
      background: linear-gradient(135deg, rgba(0, 85, 164, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

    .timeline-track.trade {
      border-color: #10B981;
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

    .timeline-track-header {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 15px;
      padding: 10px 14px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    .timeline-track-header.crea {
      background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
      color: white;
    }

    .timeline-track-header.cv2 {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
    }

    .timeline-track-header.trade {
      background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
      color: white;
    }

    .timeline-steps {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .timeline-step {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px;
      background: white;
      border-radius: 8px;
      transition: all 0.2s;
    }

    .timeline-step:hover {
      background: #F8F9FA;
      transform: translateX(4px);
    }

    .timeline-step-dot {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: white;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }

    .timeline-step-dot.crea {
      background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
    }

    .timeline-step-dot.cv2 {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
    }

    .timeline-step-dot.trade {
      background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    }

    .timeline-step-content {
      flex: 1;
    }

    .timeline-step-date {
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .timeline-step-date.crea { color: #FF6900; }
    .timeline-step-date.cv2 { color: #0055A4; }
    .timeline-step-date.trade { color: #10B981; }

    .timeline-step-desc {
      font-size: 10px;
      color: #4A5568;
      line-height: 1.3;
    }

    .timeline-final {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
      padding: 22px;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 10px 40px rgba(0, 85, 164, 0.3);
    }

    .timeline-final-date {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 6px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .timeline-final-text {
      font-size: 16px;
      font-weight: 600;
    }

    /* === MINI-TIMELINE GSA EN HAUT DES SLIDES === */
    .mini-timeline-gsa {
      position: absolute;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, 0.95);
      padding: 8px 16px;
      border-radius: 25px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      z-index: 100;
    }

    .mini-tl-step {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .mini-tl-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      color: #94a3b8;
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      transition: all 0.3s;
      cursor: default;
    }

    .mini-tl-dot.active {
      background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
      color: white;
      border-color: #FF6900;
      box-shadow: 0 3px 10px rgba(255, 105, 0, 0.4);
      transform: scale(1.15);
    }

    .mini-tl-dot.done {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
      border-color: #0055A4;
    }

    .mini-tl-line {
      width: 20px;
      height: 3px;
      background: #e2e8f0;
      border-radius: 2px;
    }

    .mini-tl-line.done {
      background: linear-gradient(90deg, #0055A4, #0077DD);
    }

    .mini-tl-line.active {
      background: linear-gradient(90deg, #0055A4, #FF6900);
    }

    /* SLIDE 10 - S-7 VALIDATION */
    .s10 {
      background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
    }

    .s10-content {
      width: 100%;
      max-width: 1100px;
    }

    .validation-header {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
      font-size: 22px;
      font-weight: 700;
      padding: 16px 30px;
      border-radius: 14px;
      margin-bottom: 25px;
      box-shadow: 0 8px 30px rgba(0, 85, 164, 0.3);
      text-align: center;
    }

    .validation-section {
      background: white;
      padding: 20px;
      border-radius: 14px;
      margin-bottom: 18px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border-left: 5px solid #FF6900;
    }

    .validation-section-title {
      font-size: 16px;
      font-weight: 700;
      color: #FF6900;
      margin-bottom: 10px;
    }

    .validation-text {
      font-size: 13px;
      color: #4A5568;
      line-height: 1.6;
      margin-bottom: 8px;
    }

    .validation-list {
      list-style: none;
      padding-left: 15px;
    }

    .validation-list li {
      font-size: 13px;
      color: #1A1A1A;
      margin-bottom: 6px;
      position: relative;
      padding-left: 18px;
    }

    .validation-list li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #0055A4;
      font-weight: 700;
    }

    /* S-7 VALIDATION - VERSION GRAPHIQUE */
    .validation-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .validation-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
      display: flex;
      gap: 15px;
      align-items: flex-start;
      transition: transform 0.3s;
    }

    .validation-card:hover {
      transform: translateY(-4px);
    }

    .validation-card.full {
      grid-column: 1 / -1;
    }

    .validation-card-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #FF6900, #FF8533);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
      box-shadow: 0 6px 20px rgba(255, 105, 0, 0.3);
    }

    .validation-card-content {
      flex: 1;
    }

    .validation-card-title {
      font-size: 14px;
      font-weight: 700;
      color: #0055A4;
      margin-bottom: 8px;
    }

    .validation-card-text {
      font-size: 11px;
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .validation-card-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .validation-card-list-item {
      font-size: 11px;
      color: #4A5568;
      padding: 6px 10px;
      background: #F8F9FA;
      border-radius: 6px;
      border-left: 3px solid #0055A4;
    }

    .validation-card-badges {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .validation-badge {
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
    }

    .validation-badge.green {
      background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
      color: #065F46;
      border: 2px solid #10B981;
    }

    .validation-badge.blue {
      background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
      color: #1E40AF;
      border: 2px solid #3B82F6;
    }

    /* SLIDE 11 - S-8 FOCUS AVEC TABS */
    .s11 {
      background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
    }

    .s11-content {
      width: 100%;
      max-width: 1100px;
    }

    .focus-header-container {
      position: relative;
      margin-bottom: 20px;
    }

    .focus-header {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
      font-size: 20px;
      font-weight: 700;
      padding: 16px 30px;
      border-radius: 14px 14px 0 0;
      box-shadow: 0 4px 20px rgba(0, 85, 164, 0.3);
    }

    .focus-responsibility {
      position: absolute;
      top: 14px;
      right: 30px;
      background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
      color: white;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      box-shadow: 0 3px 15px rgba(255, 105, 0, 0.4);
    }

    .focus-intro {
      background: white;
      padding: 16px 30px;
      font-size: 13px;
      color: #4A5568;
      line-height: 1.6;
      border-bottom: 3px solid #E5E7EB;
    }

    .tabs-container {
      margin-top: 20px;
    }

    .tabs-nav {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }

    .tab-btn {
      flex: 1;
      padding: 10px 16px;
      background: white;
      border: 2px solid #E5E7EB;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #6B7280;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .tab-btn:hover {
      background: #F8F9FA;
      border-color: #0055A4;
      transform: translateY(-2px);
    }

    .tab-btn.active {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
      border-color: #0055A4;
      box-shadow: 0 6px 20px rgba(0, 85, 164, 0.3);
    }

    .tab-content {
      display: none;
      background: white;
      padding: 22px;
      border-radius: 14px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    .tab-content.active {
      display: block;
    }

    .tab-section {
      margin-bottom: 18px;
    }

    .tab-section:last-child {
      margin-bottom: 0;
    }

    .tab-section-title {
      font-size: 15px;
      font-weight: 700;
      color: #FF6900;
      margin-bottom: 10px;
    }

    .tab-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tab-list-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px;
      background: #F8F9FA;
      border-radius: 8px;
      border-left: 4px solid #0055A4;
      font-size: 12px;
      color: #4A5568;
    }

    .tab-list-item strong {
      color: #0055A4;
      font-weight: 700;
    }

    .tab-list-item a {
      color: #0055A4;
      text-decoration: underline;
      font-weight: 600;
    }

    .tab-list-item a:hover {
      color: #FF6900;
    }

    .tab-list-item-icon {
      flex-shrink: 0;
      font-size: 18px;
    }

    .tab-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .tab-card {
      padding: 14px;
      background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%);
      border-radius: 10px;
      border-left: 4px solid #FF6900;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: all 0.3s;
    }

    .tab-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .tab-card-num {
      font-size: 13px;
      font-weight: 700;
      color: #FF6900;
      margin-bottom: 6px;
    }

    .tab-card-text {
      font-size: 11px;
      color: #4A5568;
      line-height: 1.5;
    }

    /* NAVIGATION */
    .nav-test {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      background: rgba(0,0,0,0.8);
      padding: 10px 15px;
      border-radius: 30px;
    }
    .nav-test button {
      padding: 8px 14px;
      border: none;
      border-radius: 20px;
      background: #0055A4;
      color: white;
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
    }
    .nav-test button:hover, .nav-test button.active {
      background: #FF6900;
    }

    /* === CSS BLOC PROCESS GSA SUITE === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; }
    
    .slide {
      width: 100vw; height: 100vh; display: none;
      flex-direction: column; justify-content: center; align-items: center;
      padding: 40px 60px 50px 60px;
      position: relative;
    }
    .slide.active { display: flex !important; }
    .slide-bg-white { background: linear-gradient(180deg, #ffffff, #f8fafc); }
    .slide-bg-light { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }

    .content-slide { max-width: 1000px; width: 100%; }

    /* Responsibility tag */
    .responsibility-tag {
      position: absolute;
      top: 55px;
      right: 70px;
      background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
      color: white;
      font-size: 9px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 15px;
      z-index: 100;
    }

    /* Headers */
    .brief-header, .ar-header {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
      font-size: 18px;
      font-weight: 700;
      padding: 12px 22px;
      border-radius: 12px;
      margin-bottom: 16px;
      text-align: center;
    }

    /* Cards */
    .card {
      background: white;
      border-radius: 14px;
      padding: 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.06);
      transition: all 0.3s;
      border: 2px solid transparent;
    }
    .card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .card.orange { border-left: 4px solid #FF6900; }
    .card.blue { border-left: 4px solid #0055A4; }
    .card.green { border-left: 4px solid #10B981; }
    .card.purple { border-left: 4px solid #8B5CF6; }

    .card-icon { font-size: 26px; margin-bottom: 8px; }
    .card-title { font-size: 14px; font-weight: 700; color: #0055A4; margin-bottom: 8px; }
    .card-title.orange { color: #FF6900; }
    .card-list { font-size: 11px; color: #4A5568; line-height: 1.6; list-style: none; padding: 0; }
    .card-list li { padding-left: 16px; position: relative; margin-bottom: 4px; }
    .card-list li::before { content: '→'; position: absolute; left: 0; color: #FF6900; font-weight: bold; }

    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Warning/Tip/Status boxes */
    .warning-box {
      background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
      padding: 14px 18px;
      border-radius: 12px;
      border-left: 4px solid #F59E0B;
      margin-top: 14px;
    }
    .warning-title { font-size: 13px; font-weight: 700; color: #B45309; margin-bottom: 6px; }
    .warning-text { font-size: 11px; color: #92400E; line-height: 1.5; }

    .tip-box {
      background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
      padding: 14px 18px;
      border-radius: 12px;
      border-left: 4px solid #10B981;
      margin-top: 14px;
    }
    .tip-title { font-size: 13px; font-weight: 700; color: #065F46; margin-bottom: 6px; }
    .tip-text { font-size: 11px; color: #047857; line-height: 1.5; }

    .status-box {
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      color: white;
      padding: 20px;
      border-radius: 14px;
      text-align: center;
      margin-bottom: 14px;
    }
    .status-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
    .status-text { font-size: 13px; line-height: 1.7; }

    /* Links */
    a.styled-link {
      color: #0055A4;
      text-decoration: none;
      font-weight: 600;
      padding: 3px 8px;
      background: rgba(0, 85, 164, 0.1);
      border-radius: 5px;
      transition: all 0.2s;
    }
    a.styled-link:hover { background: rgba(0, 85, 164, 0.2); }

    /* NAVIGATION */
    .nav-test {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      background: rgba(0,0,0,0.8);
      padding: 10px 15px;
      border-radius: 30px;
      max-width: 90%;
    }
    .nav-test button {
      padding: 6px 12px;
      border: none;
      border-radius: 20px;
      background: #0055A4;
      color: white;
      cursor: pointer;
      font-size: 9px;
      font-weight: 600;
    }
    .nav-test button:hover, .nav-test button.active {
      background: #FF6900;
    }

    /* === CSS INTRO === */
    .s1 { background: linear-gradient(135deg, #0055A4, #003d7a, #001f3f); position: relative; }
    .s1-content { text-align: center; position: relative; z-index: 2; }
    .s1-sub { font-size: 46px; font-weight: 800; background: linear-gradient(135deg, #FF6900, #FFB366); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 6px; }
    .s1-title { font-size: 38px; font-weight: 800; color: white; margin-bottom: 6px; }
    .s1-year { font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 30px; }
    .s1-badges { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
    .badge { padding: 12px 45px; border-radius: 50px; font-size: 16px; font-weight: 700; color: white; cursor: pointer; }
    .badge-gsa { background: linear-gradient(135deg, #FF6900, #FF8533); }
    .badge-gss { background: linear-gradient(135deg, #10B981, #34D399); }
    .s1-footer-left { position: absolute; bottom: 22px; left: 30px; color: rgba(255,255,255,0.6); font-size: 10px; }
    .s1-footer-right { position: absolute; bottom: 22px; right: 30px; }
    .s1-footer-right img { height: 45px; opacity: 0.9; }

    .slide-bg-light { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }
    .slide-bg-white { background: linear-gradient(180deg, #ffffff, #f8fafc); }
    .content-slide { max-width: 1050px; width: 100%; }
    .section-title { background: linear-gradient(135deg, #0055A4, #0077DD); color: white; font-size: 18px; font-weight: 700; padding: 10px 20px; margin-bottom: 15px; display: inline-block; border-radius: 8px; }
    .section-title-orange { background: linear-gradient(135deg, #FF6900, #FF8533); color: white; font-size: 18px; font-weight: 700; padding: 10px 20px; margin-bottom: 15px; display: inline-block; border-radius: 8px; }

    .evolution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .evolution-card { background: white; border-radius: 14px; padding: 18px; }
    .evolution-card.print { border-top: 4px solid #64748b; }
    .evolution-card.digital { border-top: 4px solid #FF6900; }
    .evolution-header { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
    .evolution-header.print { color: #64748b; }
    .evolution-header.digital { color: #FF6900; }
    .evolution-list { font-size: 11px; color: #4A5568; line-height: 1.7; list-style: none; padding: 0; }
    .evolution-list li { margin-bottom: 5px; padding-left: 20px; position: relative; }
    .evolution-list.print li::before { content: '✗'; position: absolute; left: 0; color: #EF4444; font-weight: bold; }
    .evolution-list.digital li::before { content: '✓'; position: absolute; left: 0; color: #10B981; font-weight: bold; }

    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
    .stat { background: white; padding: 18px 12px; border-radius: 12px; text-align: center; border-top: 4px solid #FF6900; }
    .stat-icon { font-size: 28px; margin-bottom: 8px; }
    .stat-num { font-size: 32px; font-weight: 800; color: #0055A4; }
    .stat-label { font-size: 11px; color: #64748b; margin-top: 4px; }
    .mobile-box { background: linear-gradient(135deg, #0055A4, #0077DD); color: white; padding: 20px; border-radius: 12px; text-align: center; }
    .mobile-num { font-size: 48px; font-weight: 800; }
    .mobile-text { font-size: 14px; opacity: 0.9; }

    .concl-intro { font-size: 20px; font-weight: 600; color: #0055A4; margin-bottom: 22px; }
    .concl-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
    .concl-item { font-size: 17px; color: #1A1A1A; font-weight: 600; padding-left: 28px; position: relative; }
    .concl-item::before { content: '●'; position: absolute; left: 0; color: #0055A4; font-size: 18px; }
    .concl-detail { font-size: 14px; font-weight: 400; color: #64748b; }
    .concl-cta { background: linear-gradient(135deg, #FF6900, #FF8533); color: white; font-size: 18px; font-weight: 700; padding: 18px 25px; text-align: center; border-radius: 12px; }

    .glossaire-header { background: linear-gradient(135deg, #0055A4, #0077DD); color: white; font-size: 22px; font-weight: 800; padding: 14px 28px; border-radius: 12px; text-align: center; margin-bottom: 12px; }
    .glossaire-intro { text-align: center; font-size: 13px; color: #64748b; margin-bottom: 18px; }
    .glossaire-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .glossaire-main { background: linear-gradient(135deg, #FF6900, #FF8533); color: white; border-radius: 14px; padding: 18px; cursor: pointer; }
    .glossaire-main-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
    .glossaire-sub { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    .glossaire-sub-item { background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 20px; font-size: 10px; cursor: pointer; }
    .glossaire-others { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .glossaire-item { background: white; border-radius: 12px; padding: 14px; text-align: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
    .glossaire-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 8px auto; }
    .glossaire-icon.blue { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); }
    .glossaire-icon.green { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); }
    .glossaire-icon.purple { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); }
    .glossaire-icon.teal { background: linear-gradient(135deg, #CCFBF1, #99F6E4); }
    .glossaire-label { font-size: 11px; font-weight: 700; }
  

    .glossaire-small { font-size: 10px; color: #64748b; margin-top: 4px; line-height: 1.2; }
/* ====== IMPORT BLOC PROCESS GSS ====== */
/* === CSS BLOC PROCESS GSS === */

/* SLIDE TITRE GSS */
.s-gss-title {
  background: linear-gradient(135deg, #FF6900 0%, #cc5500 100%);
  position: relative;
  overflow: hidden;
}

.s-gss-title::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 85, 164, 0.15) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  animation: rotate 20s linear infinite;
}

.s-gss-title-text {
  font-size: 66px;
  font-weight: 700;
  color: white;
  margin-bottom: 20px;
  text-align: center;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.s-gss-badge {
  background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
  color: white;
  font-size: 34px;
  font-weight: 700;
  padding: 17px 68px;
  border-radius: 52px;
  box-shadow: 0 10px 35px rgba(0, 85, 164, 0.4);
}

/* TIMELINE GSS - 2 COLONNES */
.timeline-gss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 30px;
}

/* MINI-TIMELINE GSS EN HAUT DES SLIDES */
.mini-timeline-gss {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 14px;
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.mini-tl-gss-step {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mini-tl-gss-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #94a3b8;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  transition: all 0.3s;
  cursor: default;
}

.mini-tl-gss-dot.active {
  background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
  color: white;
  border-color: #FF6900;
  box-shadow: 0 3px 10px rgba(255, 105, 0, 0.4);
  transform: scale(1.15);
}

.mini-tl-gss-dot.done {
  background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
  color: white;
  border-color: #0055A4;
}

.mini-tl-gss-line {
  width: 16px;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
}

.mini-tl-gss-line.done {
  background: linear-gradient(90deg, #0055A4, #0077DD);
}

.mini-tl-gss-line.active {
  background: linear-gradient(90deg, #0055A4, #FF6900);
}

/* STYLES SPÉCIFIQUES GSS */
.gss-header {
  background: linear-gradient(135deg, #FF6900 0%, #FF8533 100%);
  color: white;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 6px 25px rgba(255, 105, 0, 0.3);
  text-align: center;
}

.gss-intro {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
  max-width: 900px;
}

.gss-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.gss-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.gss-card.orange {
  border-left: 4px solid #FF6900;
}

.gss-card.blue {
  border-left: 4px solid #0055A4;
}

.gss-card.green {
  border-left: 4px solid #10B981;
}

.gss-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0055A4;
  margin-bottom: 10px;
}

.gss-card-title.orange {
  color: #FF6900;
}

.gss-card-list {
  font-size: 11px;
  color: #4A5568;
  line-height: 1.6;
}

.gss-card-list li {
  margin-bottom: 6px;
  padding-left: 5px;
}

.gss-responsibility {
  position: absolute;
  top: 55px;
  right: 20px;
  background: linear-gradient(135deg, #0055A4, #0077DD);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 100;
}

.gss-tip-box {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2px solid #10B981;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 15px;
}

.gss-tip-title {
  font-size: 12px;
  font-weight: 700;
  color: #065F46;
  margin-bottom: 6px;
}

.gss-tip-text {
  font-size: 11px;
  color: #047857;
  line-height: 1.5;
}

.gss-warning-box {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #F59E0B;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 15px;
}

.gss-warning-title {
  font-size: 12px;
  font-weight: 700;
  color: #92400E;
  margin-bottom: 6px;
}

.gss-warning-text {
  font-size: 11px;
  color: #B45309;
  line-height: 1.5;
}


/* =========================================================
   GSS — HARMONISATION V2 (deck look & feel) — NO TEXT CHANGE
   ========================================================= */

/* Mark all GSS slides as a coherent "chapter" */
.slide.gss{
  padding: 40px 60px 50px 60px; /* align with deck padding */
}

/* Ensure GSS slides use the same content width rhythm */
.slide.gss .content-slide,
.slide.gss .s8-content,
.slide.gss .s9-content{
  max-width: 1100px;
  width: 100%;
}

/* Chapter title slide: more "deck" */
.slide.gss.s-gss-title{
  background: linear-gradient(135deg, #FF6900 0%, #cc5500 100%);
}
.slide.gss.s-gss-title .s8-content{
  padding-top: 10px;
}

/* GSS headers: match the deck section title sizing */
.slide.gss .gss-header{
  font-size: 20px;
  padding: 12px 24px;
  border-radius: 10px;
  box-shadow: 0 6px 25px rgba(255, 105, 0, 0.25);
}

/* Intro blocks: consistent readability */
.slide.gss .gss-intro{
  font-size: 12px;
  color: #64748b;
  line-height: 1.7;
  margin: 0 auto 18px auto;
  max-width: 900px;
}

/* Cards: unify radius/shadow/hover with deck */
.slide.gss .gss-card{
  border-radius: 16px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.08);
  border-left-width: 5px;
}
.slide.gss .gss-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* Card titles: align weight/size */
.slide.gss .gss-card-title{
  font-size: 13px;
  margin-bottom: 10px;
}

/* Lists: keep airy and consistent */
.slide.gss .gss-card-list{
  font-size: 11px;
  line-height: 1.65;
}
.slide.gss .gss-card-list li{
  margin-bottom: 5px;
}

/* Tip/Warning: same "box" language as deck */
.slide.gss .gss-tip-box,
.slide.gss .gss-warning-box{
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Responsibility badge: less intrusive, better alignment */
.slide.gss .gss-responsibility{
  top: 55px;
  right: 20px;
  font-size: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 85, 164, 0.25);
}

/* Mini timeline: avoid overlapping with header on smaller heights */
.slide.gss .mini-timeline-gss{
  top: 12px;
}

/* =========================
   GLOBAL NAV (chapitres)
   ========================= */

.global-nav{
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  background: rgba(0,0,0,0.60);
  padding: 6px 8px;
  border-radius: 999px;
  z-index: 1200;
  max-width: calc(100vw - 140px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.global-nav::-webkit-scrollbar{ height: 0; }

.global-nav .gn-btn{
  border: none;
  cursor: pointer;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: white;
  background: rgba(255,255,255,0.16);
  display:flex;
  align-items:center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}
.global-nav .gn-btn:hover{ background: rgba(255,255,255,0.24); }
.global-nav .gn-btn.active{ background: rgba(255,105,0,0.92); }

.global-nav .gn-ico{ font-size: 12px; }
.global-nav .gn-lbl{ font-size: 10px; }

@media (max-width: 900px){
  .global-nav{ top: 50px; max-width: calc(100vw - 40px); }
  .global-nav .gn-btn{ padding: 6px 8px; }
  .global-nav .gn-lbl{ display:none; } /* mobile = icones only */
}



/* === PATCH MINA: interactions & équilibre === */
.badge { cursor: pointer; border: none; }
.badge-liens { background: linear-gradient(135deg, #0EA5E9, #1D4ED8); }
.badge-liens:hover { filter: brightness(1.05); transform: translateY(-1px); }

.glossaire-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.glossaire-main { padding: 14px; }
.glossaire-main-title { font-size: 18px; }
.glossaire-sub-item { font-size: 12px; padding: 8px 10px; }

.glossaire-item { cursor: pointer; }

.hab-principes-inline{
  margin-top: 14px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 14px;
  padding: 14px 16px;
}
.hab-principes-inline-title{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 8px;
  color: #6D28D9;
}
.hab-principes-inline-body h3{ margin: 0 0 6px 0; font-size: 14px; }
.hab-principes-inline-body p{ margin: 0; font-size: 12px; color: #334155; }
.hab-principes-inline-body ul{ margin: 8px 0 0 18px; font-size: 12px; color: #334155; }


    /* Slide 1 — badges layout */
    .s1-badges-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
    .s1-badges-row-secondary .badge{ padding: 10px 34px; font-size: 14px; opacity: 0.95; }

    .glossaire-item{ min-height: 110px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }


    .goodtoknow-list .gt-ul{
      margin: 6px 0 0 0;
      padding-left: 16px;
    }
    .goodtoknow-list .gt-ul li{
      margin: 0 0 4px 0;
    }

    /* Resource button (Drive links) */
    .resource-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:800;
      font-size:13px;
      color:#ffffff;
      text-decoration:none;
      background: linear-gradient(135deg, #0055A4 0%, #0077DD 100%);
      box-shadow: 0 10px 25px rgba(0,85,164,0.25);
      border: 2px solid rgba(255,255,255,0.25);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      white-space:nowrap;
    }
    .resource-btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(0,85,164,0.32);
      filter: brightness(1.03);
    }
    .resource-btn:active{ transform: translateY(0px); }
    

    /* === OVERRIDE — Slide "Nomenclature : Points de contrôle" (rééquilibrage) === */
    .controle-layout{
      grid-template-columns: 1.7fr 0.9fr;
      align-items: start;
      gap: 22px;
    }
    .check-text{ font-size: 13px; line-height: 1.45; }
    .warning-card{
      padding: 18px;
      background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(255,255,255,0.92));
      border: 2px solid rgba(245,158,11,0.55);
    }
    .warning-content{
      font-size: 13px;
      line-height: 1.55;
      color: #7A3B09;
    }


    /* === FIT FIXES (Desktop vs Mobile / Habillage / Regroupements) === */
    .compare-layout{ align-items:flex-start; gap:24px; }
    .compare-visual{ padding:12px; }
    .compare-visual img{ width:100%; max-width:320px; max-height:34vh; object-fit:contain; }
    .mobile-frame{ width:150px; }
    .mobile-frame img{ max-height:34vh; object-fit:contain; }

    /* Habillage: reduce vertical density on small heights */
    .compare-hab{ gap:18px; align-items:flex-start; }
    .compare-body.simple, .compare-body.complex{ padding:14px; }
    .compare-body.simple ul, .compare-body.complex ul{ font-size:11px; line-height:1.6; }
    .compare-body.simple img, .compare-body.complex img{ max-height:16vh !important; object-fit:contain; }

    /* Regroupements */
    .visual-demo img{ max-height:22vh !important; object-fit:contain; }
    .regroup-layout{ gap:18px; }
    .regroup-body{ padding:14px; }
    .regroup-body ul{ font-size:11px; line-height:1.6; }

    @media (max-height: 800px){
      .slide{ padding:28px 44px 44px 44px; }
      .section-title, .section-title-purple{ margin-bottom:10px; }
      .compare-layout{ gap:16px; }
      .compare-info{ padding:12px; }
      .compare-info ul{ font-size:10.5px; }
      .compare-body.simple img, .compare-body.complex img{ max-height:14vh !important; }
      .visual-demo img{ max-height:18vh !important; }
      .warning-box{ padding:12px; }
    }

/* Liens tableaux GSA/GSS */
.s8-link, .s-gss-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 25px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid rgba(255,255,255,0.3);
  transition: all 0.3s;
}
.s8-link:hover, .s-gss-link:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
.slide.gss.s-gss-title .s8-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========== FIX TIMELINE OVERFLOW ========== */
/* Timeline GSA - réduction pour tenir dans le viewport */
.s9 .timeline-title {
  font-size: 26px !important;
  margin-bottom: 15px !important;
}
.s9 .timeline-grid {
  gap: 15px !important;
}
.s9 .timeline-track {
  padding: 12px !important;
  border-width: 2px !important;
}
.s9 .timeline-track-header {
  font-size: 11px !important;
  padding: 6px 10px !important;
  margin-bottom: 10px !important;
}
.s9 .timeline-step {
  padding: 6px 0 !important;
  gap: 6px !important;
}
.s9 .timeline-step-date {
  font-size: 10px !important;
  padding: 3px 8px !important;
}
.s9 .timeline-step-desc {
  font-size: 9px !important;
}
.s9 .timeline-final {
  padding: 15px !important;
  margin-top: 15px !important;
}
.s9 .timeline-final-date {
  font-size: 22px !important;
}
.s9 .timeline-final-text {
  font-size: 11px !important;
}
.s9 .s9-content {
  padding: 40px 50px !important;
}

/* Timeline GSS - mêmes réductions */
.slide.gss.s9 .timeline-gss-grid {
  gap: 15px !important;
}

/* ========== UNIFORMISATION BADGES RESPONSABILITÉ ========== */
/* Position unifiée pour tous les badges responsabilité */
.responsibility-tag,
.gss-responsibility {
  position: absolute;
  top: 95px;
  right: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  z-index: 10;
}

/* Style spécial pour S-8 qui a un layout différent */
.focus-responsibility {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Ajuster les slides avec mini-timeline pour éviter chevauchement */
.slide.s10,
.slide.s11,
.slide.slide-bg-light:has(.mini-timeline-gsa),
.slide.slide-bg-white:has(.mini-timeline-gsa),
.slide.gss:has(.mini-timeline-gss) {
  position: relative;
}

/* Mini-timelines position */
.mini-timeline-gsa,
.mini-timeline-gss {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* ========== HEADER UNIFIÉ GSA/GSS ========== */
/* Nouveau header qui contient titre + mini-timeline + badge responsabilité */
.unified-header {
  background: linear-gradient(135deg, #0055A4 0%, #003d7a 100%);
  padding: 15px 25px;
  border-radius: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.unified-header .uh-title {
  color: white;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.unified-header .uh-timeline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.unified-header .uh-step {
  background: rgba(255,255,255,0.2);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
}

.unified-header .uh-step.done {
  background: rgba(255,255,255,0.4);
}

.unified-header .uh-step.active {
  background: #FF6900;
  color: white;
}

.unified-header .uh-line {
  width: 15px;
  height: 2px;
  background: rgba(255,255,255,0.3);
}

.unified-header .uh-line.done {
  background: rgba(255,255,255,0.6);
}

.unified-header .uh-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Header GSS - couleur verte */
.unified-header.gss-header {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Masquer les anciens éléments */
.slide:has(.unified-header) .mini-timeline-gsa,
.slide:has(.unified-header) .mini-timeline-gss,
.slide:has(.unified-header) .responsibility-tag,
.slide:has(.unified-header) .gss-responsibility,
.slide:has(.unified-header) .brief-header,
.slide:has(.unified-header) .ar-header,
.slide:has(.unified-header) .gss-header,
.slide:has(.unified-header) .focus-header-container {
  display: none !important;
}

/* Header GSS - couleur verte */
.unified-header.gss-header-color {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}


/* ============================================
   ANIMATIONS SUBTILES - Dosées et élégantes
   ============================================ */

/* Transitions de base smooth */
.card, .gss-card, .tip-box, .gss-tip-box, .warning-box, .gss-warning-box, .status-box, .validation-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover léger sur les cards */
.card:hover, .gss-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Validation cards hover */
.validation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Tip/Warning boxes - subtil */
.tip-box:hover, .gss-tip-box:hover {
  transform: translateX(3px);
}

.warning-box:hover, .gss-warning-box:hover {
  transform: translateX(3px);
}

/* ✓ Checkmarks sur timeline (le truc que t'aimes bien) */
.uh-step.done {
  position: relative;
}

.uh-step.done::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 8px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Active step - léger highlight */
.uh-step.active {
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* Nav buttons */
.nav-btn {
  transition: all 0.2s ease;
}

.nav-btn:hover {
  transform: translateY(-2px);
  background: rgba(0, 85, 164, 0.1);
}

/* Tab buttons */
.tab-btn {
  transition: all 0.2s ease;
}

.tab-btn:hover:not(.active) {
  background: rgba(0, 85, 164, 0.08);
}

/* Links */
.styled-link {
  transition: color 0.2s ease;
}

.styled-link:hover {
  color: #0055A4;
}

/* Slide counter - visible et fixe */
.slide-counter {
  position: fixed !important;
  top: 10px !important;
  right: 20px !important;
  font-size: 12px !important;
  color: white !important;
  font-weight: 600 !important;
  background: rgba(0,0,0,0.7) !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  z-index: 10000 !important;
}

/* Badge hover */
.uh-badge {
  transition: transform 0.2s ease;
}

.uh-badge:hover {
  transform: scale(1.03);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   SLIDES CONCEPTS GSS
   ============================================ */

.concept-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.concept-icon {
  font-size: 60px;
  margin-bottom: 15px;
}

.concept-title {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 15px;
}

.concept-description {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 25px;
  max-width: 550px;
}

.concept-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
  width: 100%;
  max-width: 450px;
}

.concept-highlight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 3px solid #059669;
  text-align: left;
  font-size: 13px;
  color: #334155;
}

.highlight-icon {
  font-size: 18px;
}

.concept-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #059669, #047857);
  color: white;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
  transition: all 0.3s ease;
}

.concept-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4);
}

/* ============================================
   SLIDES AUTOMATISATIONS - Grid 4 cards
   ============================================ */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.auto-card {
  background: white;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  position: relative;
  border: 1px solid #e2e8f0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.auto-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.auto-card-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.auto-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
}

.auto-card-content {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

.auto-card-content p {
  margin-bottom: 8px;
}

.auto-card-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.auto-card-content li {
  padding-left: 15px;
  position: relative;
  margin-bottom: 4px;
}

.auto-card-content li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #0055A4;
}

.auto-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 10px;
}

.auto-card-tag.blue {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
}

.auto-card-tag.orange {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #c2410c;
}

@media (max-width: 600px) {
  .auto-grid {
    grid-template-columns: 1fr;
  }
}