body {
    margin: 0 !important;
    padding: 0 !important;
    /* padding-top: 56px !important; Ajuste selon la hauteur de ta navbar */
}
main, .main-content { 
    margin-top: 100px; /* Adapte la valeur selon la hauteur réelle de ta navbar */
}
/* Zone de simulation escamotable */
#simulation-panel {
    position: fixed;
    right: -400px; /* Caché par défaut */
    top: 0;
    width: 400px;
    height: 100%;
    background: #2c3e50;
    color: white;
    transition: 0.3s;
    z-index: 1050;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    padding: 20px;
}

#simulation-panel.active {
    right: 0;
}

/* Bouton pour ouvrir la simulation */
.btn-toggle-sim {
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 1060;
}

/* Style des blocs dans l'éditeur */
.strategy-block {
    background: #fff;
    border-left: 10px solid #3498db;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    list-style: none;
}
/* Style général des éléments de la boîte à outils */
.draggable-action {
    cursor: grab;
    transition: all 0.2s;
    border-left: 5px solid #ccc; /* Bordure par défaut */
}

.draggable-action:hover {
    transform: translateX(5px);
    filter: brightness(0.9);
}
/* Couleurs spécifiques basées sur tes blockStyles */
.type-logic { border-left-color: #e67e22 !important; background-color: #fef5ed !important; } /* Orange - Si/Tant que */
.type-loop  { border-left-color: #9b59b6 !important; background-color: #f8f0fb !important; } /* Violet - Répéter */
.type-action { border-left-color: #e74c3c !important; background-color: #fdedec !important; } /* Rouge - Miser */
.type-series { border-left-color: #27ae60 !important; background-color: #eafaf1 !important; } /* Vert - Série */
.type-wait   { border-left-color: #3498db !important; background-color: #ebf5fb !important; } /* Bleu - Attendre */

.child-zone {
    transition: all 0.2s;
}
.child-zone:hover {
    border-color: #3498db !important;
    background-color: #ebf5fb !important;
}
/* On force une hauteur minimale pour que la souris puisse 'viser' la zone */
/* pour avoir un pe ud eplace pour glisser un sous bloc dans le 'ALORS' d ela condtion SI */
.then-container, .else-container {
    min-height: 50px !important; /* Donne une surface à la souris */
    border: 2px dashed #ccc !important; /* Visible pour débugger */
    margin: 10px 0 !important;
    padding: 10px !important;
    display: block !important;
    background-color: rgba(0,0,0,0.02); /* Un fond léger pour voir la zone */
}

/* Optionnel : Changement de couleur au survol pour feedback visuel */
.then-container:hover { border-color: #28a745; background: rgba(40, 167, 69, 0.05); }
.else-container:hover { border-color: #dc3545; background: rgba(220, 53, 69, 0.05); }

/* pour le style du bloc runIf de l'editeur */
/* Style pour le sélecteur de condition */
.block-run-if {
    cursor: pointer;
    transition: all 0.2s ease;
}

.block-run-if:hover {
    background-color: #f1f1f1;
}

/* Optionnel : cacher le label pour gagner de la place, 
   l'icône suffit à comprendre */
.block-run-if option[value="win"] { color: #198754; font-weight: bold; }
.block-run-if option[value="loss"] { color: #dc3545; font-weight: bold; }

/* pour cibler la partie editable et pouvoir placer les blocks sans scroller */
#ex_strategy-tree {
    min-height: 800px !important; /* Hauteur massive pour le drop */
    background: #fdfdfd;
    border: 2px dashed #ddd;
    padding: 20px;
}

/*ascenseurs */
/* La colonne de gauche (Bibliothèque de blocs) */
#sidebar-left {
    height: calc(100vh - 60px); /* 100% de l'écran moins ton header */
    overflow-y: auto;           /* Ascenseur uniquement si ça déborde */
    position: sticky;           /* Elle reste en place */
    top: 60px;
}

/* La colonne du milieu (Éditeur de stratégie) */
#editor-container  {
    height: calc(100vh - 60px);
    overflow-y: auto;
    padding-bottom: 400px;      /* Marge de sécurité pour ne pas buter en bas */
     position: sticky; 
}
#simulation-panel{
       height: calc(100vh - 60px  );
        overflow-y: auto;
        margin-top:60px;
}
#sidebar-left, #editor-container {
    height: calc(100vh - 60px); 
}
/* On cible la classe Bootstrap directement */
.navbar.fixed-top {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030; /* Pour passer au-dessus des blocs de l'éditeur */
    margin: 0 !important;
}
/* COuleur des blocks attentes win et loss */
.block-attendre-win { border-left: 5px solid #28a745 !important; background: #f8fff9; }
.block-attendre-loss { border-left: 5px solid #fd7e14 !important; background: #fffaf5; }
.block-montante-auto {
    border-left: 5px solid #27ae60 !important; /* Un vert émeraude pour le gain/mise */
    background-color: #f4f9f4;
}
.block-montante-auto .block-header {
    background-color: #27ae60;
    color: white;
}
@keyframes pulse-error-input {
    0% { border-color: #ff0000; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); background-color: rgba(255, 0, 0, 0.1); }
    50% { border-color: #ff8080; box-shadow: 0 0 15px rgba(255, 0, 0, 0.3); background-color: rgba(255, 255, 255, 1); }
    100% { border-color: #ff0000; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); background-color: rgba(255, 0, 0, 0.1); }
}

.input-error-stop {
    animation: pulse-error-input 1s infinite !important;
    color: #ff0000 !important;
    font-weight: bold !important;
}

/* affichage des blocs en gain */
@keyframes pulse-success-input {
    0% { border-color: #28a745; box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); background-color: rgba(40, 167, 69, 0.1); }
    50% { border-color: #71d08d; box-shadow: 0 0 15px rgba(40, 167, 69, 0.3); background-color: rgba(255, 255, 255, 1); }
    100% { border-color: #28a745; box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); background-color: rgba(40, 167, 69, 0.1); }
}

.input-success-win {
    animation: pulse-success-input 1s infinite !important;
    color: #28a745 !important;
    font-weight: bold !important;
}

/*afifchage des badges sur le bloc densite*/
.block-active-signal {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
    transition: all 0.3s;
}

/* Animation de pulsation pour le badge actif */
@keyframes pulse-active {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Classe pour le bloc esclave quand il est piloté */
.slave-piloted {
    border: 2px solid #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.05) !important;
    transition: all 0.3s ease;
}
.badge-active-scan {
    animation: pulse-active 1.5s infinite;
    background-color: #198754 !important; /* Vert succès */
}

/* Animation du badge Scanner */
@keyframes pulse-active-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* État Actif pour le Scanner */
.badge-scanning-active {
    animation: pulse-active-green 1s infinite !important;
    background-color: #198754 !important;
    color: white !important;
    border: 1px solid #fff !important;
}

/* Signalement de l'Esclave piloté */
.slave-active-border {
    border: 2px solid #ffc107 !important; /* Jaune Warning */
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4) !important;
    transition: all 0.3s ease;
    transform: translateY(-2px);
}
/* div message*/
.toast {
    transition: transform 0.3s ease-in-out !important;
}
/* Le toast arrive en glissant du bas vers le haut */
.toast.showing {
    opacity: 0;
    transform: translateY(100%); /* Il part de plus bas */
}

.toast.show {
    opacity: 1;
    transform: translateY(0); /* Il s'arrête à sa place */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.toast.hide {
    transform: translateY(100%);
}
  body {
    /* On met l'image proprement sans toucher au reste */
    /* background-image: url('../images/fond_ecran.jpeg'); */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(31, 29, 29, 0.7)), url('../images/fond16.webp');
    background-size: cover;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* //background-color: #bbb3b3; Un gris foncé neutre en secours */
}

/* On éclaircit juste un peu les blocs pour qu'ils ne soient pas enterrés dans le sombre */
/* .card, .bloc-maitre, .bloc-esclave {
    background-color: rgba(20, 24, 28, 0.95) !important; /* Un gris-noir très profond presque opaque 
    border: 1px solid #00ffcc; /* Une fine bordure néon pour délimiter le bloc 
} */
 /* CSS DE LA DOC
 /* Style Global Documentation SpinLogic */
.doc-container {
    padding: 2rem;
    color: #ffffff;
}

/* Cartes Effet Vitré (Glassmorphism) */
.glass-card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.glass-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Carte Expert Pascal */
.card-pascal {
    background: linear-gradient(145deg, #0f0f0f, #000000);
    border-left: 5px solid #ffc107 !important;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* Titres & Effets */
.text-warning {
    color: #ffc107 !important;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.2);
}

.shadow-warning {
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.3));
}

.bg-black-opacity {
    background-color: rgba(0, 0, 0, 0.7) !important;
}