.main-content {
      background: white;
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.12);
      overflow: hidden;
      padding: 20px 15px 25px;
      position: relative;
    }
    
    .compact-container {
      width: 100%;
      max-width: 1030px;
      margin: 0 auto;
      position: relative;
    }
    
    /* En-tête */
    .integrated-header-category {
      margin-bottom: 20px;
    }
    
    .header-visual-category {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      border: 2px groove black;
      background: linear-gradient(135deg, #9F9FA9 0%, #171717 100%);
      padding: 10px 20px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-text-overlay-category h2 {
      color: white !important;
      margin: 0;
      font-size: 1.5rem;
    }
    
    /* Grille page 16 */
    .popup-flex-grid {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .popup-flex-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .popup-flex-box {
      flex: 1 1 300px;
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .popup-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 10px 0;
    }
    
    .external-link {
      color: #2980b9;
      text-decoration: none;
      border-bottom: 1px dashed;
    }
    
    .internal-link {
      color: #2980b9;
      text-decoration: underline;
      cursor: pointer;
      font-weight: 500;
    }
    
    .popup-stack {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .info-box-gif {
      margin-bottom: 10px;
    }
    
    /* Tuiles */
    .tile-container {
      display: flex;
      flex-direction: column;
      gap: 15px;
      width: 100%;
      margin-top: 30px;
    }
    
    .tile {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      border: 1px solid #e0e0e0;
      overflow: hidden;
    }
    
    .tile-header {
      padding: 0 20px;
      height: 60px;
      background: linear-gradient(135deg, #9F9FA9 0%, #171717 100%);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      border-radius: 12px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      font-family: 'Source Code Pro', monospace;
    }
    
    .tile-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 100%);
      pointer-events: none;
      border-radius: 12px 12px 0 0;
    }
    
    .tile-header h2 {
      margin: 0;
      font-size: 1.2rem;
      color: white !important;
      font-weight: 300 !important;
      position: relative;
      z-index: 1;
    }
    
    .tile-header.active {
      background: linear-gradient(135deg, #AFAFB9 0%, #272727 100%);
      border-bottom: 3px solid #FF2800;
    }
    
    .tile-icon {
      font-size: 1.2em;
      color: white !important;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }
    
    .tile-header.active .tile-icon {
      transform: rotate(180deg);
      color: #FF2800 !important;
    }
    
    .tile-body {
      display: none;
      padding: 20px;
      background: white;
    }
    
    .tile-body.open {
      display: block;
    }
    
    /* Supprimer les indicateurs ronds */
    .slide-indicators {
      display: none !important;
    }
    
    /* BOUTONS FLOTTANTS - positionnés par rapport au conteneur */
    .close-popup-btn {
      position: absolute;
      top: -15px;
      right: -15px;
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #9F9FA9 0%, #171717 100%);
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: white;
      font-size: 26px;
      font-weight: 300;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      z-index: 10000;
      transition: all 0.2s;
      cursor: pointer;
      opacity: 0.75;
      overflow: hidden;
    }
    
    .scroll-top-btn {
      position: absolute;
      bottom: -15px;
      right: -15px;
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #9F9FA9 0%, #171717 100%);
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: white;
      font-size: 24px;
      font-weight: 300;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      z-index: 10000;
      transition: all 0.2s;
      cursor: pointer;
      opacity: 0.75;
      overflow: hidden;
    }
    
    .close-popup-btn::before,
    .scroll-top-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 100%);
      pointer-events: none;
      border-radius: 8px 8px 0 0;
    }
    
    .close-popup-btn:hover,
    .scroll-top-btn:hover {
      transform: scale(1.05);
      background: linear-gradient(135deg, #AFAFB9 0%, #272727 100%);
      border-color: rgba(255,255,255,0.5);
    }
    
    .close-icon,
    .scroll-top-icon {
      position: relative;
      z-index: 2;
      line-height: 1;
    }
    
    /* Cacher les boutons quand modale ouverte */
    body.modal-open .close-popup-btn,
    body.modal-open .scroll-top-btn {
      display: none !important;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .close-popup-btn {
        top: -10px;
        right: -10px;
        width: 40px;
        height: 40px;
        font-size: 22px;
      }
      
      .scroll-top-btn {
        bottom: -10px;
        right: -10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
      }
      
      .tile-header {
        height: 55px;
      }
      
      .tile-header h2 {
        font-size: 1.1rem;
      }
    }
    
    @media (max-width: 480px) {
      .close-popup-btn {
        top: -8px;
        right: -8px;
        width: 36px;
        height: 36px;
        font-size: 20px;
      }
      
      .scroll-top-btn {
        bottom: -8px;
        right: -8px;
        width: 36px;
        height: 36px;
        font-size: 18px;
      }
      
      .tile-header {
        height: 50px;
        padding: 0 15px;
      }
    }
/* =====================================================
		OPTIMISATIONS MOBILE - DOUBLE CARROUSEL
===================================================== */
@media (max-width: 768px) {
  /* Réduction de la hauteur des tuiles */
  .tile-header {
    height: 44px !important; /* Réduction de 55px à 44px */
    padding: 0 12px;
  }
  
  .tile-header h2 {
    font-size: calc(var(--font-size-h3) * 0.8); /* Légèrement plus petit */
  }
  
  .tile-body {
    padding: 8px 10px 12px !important; /* Padding réduit */
  }
  
  /* Optimisation du bloc legal-reference */
  .legal-reference {
    padding: 4px 8px;
    gap: 6px;
    margin: 0 auto 8px auto;
    min-height: auto;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
  }
  
  .legal-image-container {
    width: 30px;
    height: 30px;
    flex-shrink: 0; /* Empêche la réduction */
  }
  
  .legal-text {
    font-size: 0.75rem;
    gap: 4px;
    white-space: nowrap; /* Garde le texte sur une ligne */
    overflow-x: auto; /* Permet le défilement si nécessaire */
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
  }
  
  .legal-text a {
    padding: 2px 6px;
    font-size: 0.7rem;
    white-space: nowrap;
  }
  
  .legal-text span {
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* Optimisations supplémentaires pour très petits écrans */
  .tile-header {
    height: 40px !important;
  }
  
  .tile-header h2 {
    font-size: calc(var(--font-size-h3) * 0.75);
  }
  
  .tile-body {
    padding: 6px 8px 10px !important;
  }
  
  .legal-reference {
    padding: 3px 6px;
    gap: 4px;
  }
  
  .legal-image-container {
    width: 26px;
    height: 26px;
  }
  
  .legal-text {
    font-size: 0.7rem;
  }
  
  .legal-text a {
    padding: 2px 5px;
    font-size: 0.65rem;
  }
}

/* Pour les très petits écrans où le texte ne tient pas */
@media (max-width: 360px) {
  .legal-text {
    font-size: 0.65rem;
  }
  
  .legal-text a {
    padding: 1px 4px;
  }
}
	</style>
  
  <script>
    (function() {
      if ('scrollRestoration' in history) history.scrollRestoration = 'manual';
      function t() { window.scrollTo(0,0); }
      t(); window.addEventListener('load', t);
      window.addEventListener('pageshow', function(e) { if (e.persisted) t(); });
    })();