.step-section { display: none; animation: fadeIn 0.4s ease; }
        .step-section.active { display: block; }
        
        .btn-next, .btn-submit {
            cursor: pointer;
        }
        .btn-next:hover, .btn-submit:hover { opacity: 0.9; }
        .btn-back {
            background: none; border: none; color: #777; cursor: pointer;
            text-decoration: underline; margin-top: 10px; display: block; width: 100%;
        }

        /* LISTE CARD (ETAPE 2) */
        .po-card {
            border: 1px solid var(--gris2);
    		background: var(--gris1);
            border-radius: 12px;
            padding: 1em;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.2s;
          	position: relative;
        }
        .po-card.selected { border: 2px solid var(--cl-primary); background: var(--cl-primary-light); }
		.po-card.selected > .heure-po { color: var(--blanc) !important; background-color: var(--cl-primary)!important; }
        /* CRENEAUX (ETAPE 3) */
        .slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
        .slot-btn {
                display: flex; justify-content: center; align-items: center; min-height: 53px; margin-bottom: 0; padding: 10px; border: 2px solid var(--gris2); border-radius: 6px; background: white; cursor: pointer; text-align: center;
        }
        .slot-btn.selected { background: var(--cl-primary, #e7581e); color: white; border-color: var(--cl-primary, #e7581e); }
        .slot-btn.disabled { background: #eee; color: #aaa; cursor: not-allowed; }
		
		.slot-btn.disabled { 
    background: #f3f4f6; 
    color: #9ca3af; 
    cursor: not-allowed; 
    border-color: #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}			

        /* CHECKBOXES (ETAPE 3) */
        .checkbox-group label {
            display: flex; align-items: center; gap: 10px; padding: 10px;
            border: 1px solid var(--gris2); border-radius: 6px; margin-bottom: 8px; cursor: pointer;
        }
        .checkbox-group input:checked + span { color: var(--cl-primary); font-weight: bold; }
		
		#formations-checklist { margin-bottom: 0; }
		
        @keyframes fadeIn {
		  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
        
        .hidden { display: none; }

@keyframes popIn {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(2) rotate(-15deg); 
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1) rotate(-5deg); 
    }
}
.po-card .tampon-complet {
    display: none;
}
.po-card.is-complet .tampon-complet {
    display: block;
}
.po-card.is-complet .badge-vite {
    display: none !important;
}

.close-po {
	    border: 3px solid #ff0000;
    color: #ff0000;
    padding: 24px 40px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 12px;
    letter-spacing: 2px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    animation: popIn 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
    margin-bottom: 0;
    font-size: 2em;
}
@media (max-width: 460px) {
.close-po {
    padding: 18px 30px;
    border-radius: 8px;
    font-size: 1.5em;
}
  #step-3 > div:nth-child(3) {
  	flex-direction: column-reverse;
  }
}