/* --- STYLE GENERAL --- */
body { 
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background-color: #102718; 
    height: 100dvh; 
    width: 100vw;
    overflow: hidden; 
    overscroll-behavior: none;
    margin: 0;
    padding: 0;
}

#app-wrapper {
    height: 100dvh; 
    width: 100%;
    max-width: 450px; 
    margin: 0 auto;
    background-color: #f3f4f6;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: max-width 0.3s ease;
}

/* --- MODE TABLETTE & PC --- */
@media (min-width: 768px) {
    #app-wrapper {
        max-width: 850px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .nuisible-img { height: 110px !important; width: 110px !important; }
    .text-xs { font-size: 0.95rem !important; } 
    .text-3xl { font-size: 3.5rem !important; margin-bottom: 10px !important; }
}

#scrollable-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
    position: relative;
    background-color: #102718;
}

.safe-pt { 
    padding-top: calc(env(safe-area-inset-top) + 20px); 
    background-color: white; 
} 

.fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.active-touch:active { transform: scale(0.98); opacity: 0.9; transition: transform 0.05s; }

.selected { border: 2px solid #f97316; background-color: #fff7ed; color: #c2410c; font-weight: bold; }

.time-btn.active { background-color: #f97316; color: white; border-color: #f97316; }

.time-disabled { 
    background-color: #e5e7eb; 
    color: #9ca3af; 
    text-decoration: line-through; 
    pointer-events: none; 
    border: 1px solid #e5e7eb; 
    opacity: 0.6; 
}

/* Loader de chargement entre les pages */
.loader-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.loader { 
    border: 3px solid #f3f3f3; 
    border-top: 3px solid #16a34a; 
    border-radius: 50%; 
    width: 30px; 
    height: 30px; 
    animation: spin 0.8s linear infinite; 
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }