html, body {
    height: 100%; margin: 0; overflow: hidden;
    background-color: #ffffff; font-family: 'Segoe UI', sans-serif;
}

.no-scroll { display: flex; justify-content: center; align-items: center; position: relative; height: 100vh; }

.glass-circle-1 {
    position: absolute; top: -60px; left: -60px; width: 250px; height: 250px;
    background: rgba(106, 176, 76, 0.1); border-radius: 50%;
}

.glass-circle-2 {
    position: absolute; bottom: -60px; right: -60px; width: 250px; height: 250px;
    background: rgba(230, 126, 34, 0.08); border-radius: 50%;
}

.slide-container {
    position: relative; z-index: 1; width: 90%; max-width: 900px;
    height: 92vh; display: flex; flex-direction: column;
    justify-content: center; /* Centre tout le bloc verticalement */
}

.title-bold {
    font-size: 2rem; font-weight: 800; color: #222;
    text-align: center; margin: 0 0 20px 0; /* Réduction marge pour gagner de la place */
}

.list-container {
    display: flex; flex-direction: column; 
    gap: 8px; /* Espace réduit entre les cartes pour éviter le scroll */
    align-items: center;
}

.toc-card {
    background: #fdfdfd; border: 1px solid #eee;
    padding: 10px 20px; border-radius: 10px;
    display: flex; align-items: center;
    cursor: pointer; transition: all 0.2s ease;
    width: 85%;
    box-sizing: border-box;
}

/* Style spécial pour faire ressortir les remerciements */
.card-remerciements {
    border: 1px dashed #6ab04c;
    background: #f9fff6;
}

.toc-card:hover {
    background: #fff; transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-left: 10px solid #6ab04c;
}

.icon-box {
    font-size: 1.4rem; margin-right: 15px;
    min-width: 35px; text-align: center;
}

.text-box { flex-grow: 1; }

.main-desc {
    font-size: 1.05rem; font-weight: 700; color: #333; margin: 0;
}

.sub-desc {
    font-size: 0.85rem; font-weight: 500; color: #e67e22; margin: 0;
}

.arrow { font-size: 1rem; color: #ccc; }

.footer-nav { margin-top: 20px; text-align: center; }
.btn-back {
    background: #f0f0f0; color: #555; border: none;
    padding: 8px 20px; border-radius: 5px; font-weight: 600; cursor: pointer;
}

/* ==========================================
   BLOC DE SÉCURITÉ MOBILE (NE MODIFIE PAS LE PC)
   ========================================== */
@media screen and (max-width: 1024px) {
    /* 1. On débloque la hauteur pour pouvoir défiler sur téléphone */
    html, body, .no-scroll { 
        height: auto !important; 
        overflow-y: auto !important; 
        display: block !important; 
    }

    /* 2. On ajuste le conteneur principal pour qu'il ne dépasse pas de l'écran */
    .slide-container { 
        height: auto !important; 
        width: 95% !important; 
        margin: 10px auto !important; 
        padding: 10px !important;
        display: block !important;
    }

    /* 3. On force tes éléments (grilles ou listes) à se mettre les uns sous les autres */
    /* J'ai listé ici tous les noms de classes que nous avons utilisés ensemble */
    .conclusion-grid, .phase-grid, .list-container, .grid-moyens, .phase-selector { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 15px !important;
        width: 100% !important;
    }

    /* 4. On adapte la taille des titres pour qu'ils soient lisibles sur petit écran */
    .title-main, .title-bold { 
        font-size: 1.5rem !important; 
        text-align: center !important;
        margin: 15px 0 !important;
    }

    /* 5. On s'assure que les cartes prennent toute la largeur */
    .toc-card, .conc-panel, .benefit-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 6. On empile les boutons de navigation en bas */
    .footer-nav { 
        display: flex !important;
        flex-direction: column !important; 
        gap: 10px !important; 
        margin-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .btn-nav { width: 100% !important; text-align: center !important; }
}