* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #1a1a1a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.bandeau {
    width: 100%;
    border-bottom: 2px solid #333;
}

/* BOUTON PARAMÈTRES */
.settings-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    background: none;
    border: none;
    color: #333;
    z-index: 100;
    transition: transform 0.3s;
}
.settings-btn:hover {
    transform: rotate(90deg);
}

/* MODAL PARAMÈTRES */
.modal-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 200;
    justify-content: center; align-items: center;
}
.modal-content {
    background: #2b3a4a; padding: 30px; border-radius: 10px; width: 450px; color: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
.form-group input, .form-group select { 
    width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #444; 
    background: #1e2a38; color: white; font-size: 1rem;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px; }
.modal-actions button { padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; font-weight: bold; font-size: 1rem; }
.btn-save { background: #8cc63f; color: black; }
.btn-save:hover { background: #7cba32; }
.btn-cancel { background: #f44336; color: white; }
.btn-cancel:hover { background: #d32f2f; }

/* --- BANDEAU 1: MÉTÉO --- */
.meteo-container {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #87CEEB, #B0E0E6);
    color: #111;
    height: 35vh;
    padding: 15px 30px;
    position: relative;
}

.meteo-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.meteo-col { flex: 1; }
.city-col { display: flex; flex-direction: column; justify-content: center; }
.city-name { font-size: 3rem; font-weight: 700; margin-bottom: 5px; }
.datetime { font-size: 1.2rem; color: #333; }

.temp-col { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.temp-current { font-size: 4.5rem; font-weight: bold; line-height: 1; }
.temp-minmax { font-size: 1.2rem; color: #444; margin-top: 5px; }

.icon-col { display: flex; justify-content: flex-end; align-items: center; padding-right: 40px; }
.icon-col img { height: 180px; width: 180px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }

.meteo-details {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    background-color: #2b3a4a;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.detail-item { display: flex; align-items: center; gap: 10px; }
.detail-text { display: flex; flex-direction: column; font-size: 0.9rem; }
.detail-value { font-weight: bold; font-size: 1.1rem; }
.detail-label { font-size: 0.8rem; color: #aaa; }

.forecast-container {
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 10px;
    border-radius: 8px;
}
.forecast-day { display: flex; flex-direction: column; align-items: center; font-size: 0.9rem; }
.forecast-day img { width: 40px; height: 40px; margin: 5px 0; }

/* --- BANDEAU 2: DANGERS --- */
.dangers-container { display: flex; background-color: #f0f0f0; height: 30vh; padding: 20px 30px; gap: 30px; overflow-y: auto; }
.danger-section { flex: 1; display: flex; flex-direction: column; }
.section-title { font-size: 1.2rem; color: #111; margin-bottom: 15px; font-weight: bold; }
.danger-list { display: flex; flex-direction: column; gap: 10px; }
.danger-card { display: flex; background-color: #2b3a4a; color: white; padding: 15px; border-radius: 5px; border-left: 8px solid transparent; }
.danger-card.degree-1 { border-left-color: #8cc63f; }
.danger-card.degree-2 { border-left-color: #ffeb3b; }
.danger-icon { font-size: 2rem; margin-right: 15px; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; }
.degree-2 .danger-icon { background-color: #ffeb3b; color: #111; }
.degree-1 .danger-icon { background-color: #8cc63f; color: #111; }
.danger-content h3 { font-size: 1.1rem; margin-bottom: 3px; }
.degree-text { font-weight: bold; font-size: 0.9rem; margin-bottom: 8px; }
.desc { font-size: 0.85rem; line-height: 1.3; }

/* --- BANDEAU 3: TRAINS --- */
.cff-container { flex: 1; background-color: #0b1f5e; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; }
.cff-header { display: flex; background-color: #e3e3e3; color: #0b1f5e; font-weight: bold; font-size: 1.2rem; padding: 8px 20px; border-bottom: 2px solid white; }

/* COLONNES RÉAJUSTÉES COMME DEMANDÉ (-30% pour train, -40% pour heure) */
.cff-train-col { width: 15%; }
.cff-time-col { width: 8%; font-family: monospace; font-size: 1.3rem; font-weight: bold; }
.cff-dest-col { width: 47%; }
.cff-track-col { width: 10%; text-align: center; }
.cff-remark-col { width: 20%; }

.cff-board { flex-grow: 1; overflow-y: hidden; padding: 0 20px; }
.cff-row { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 8px 0; font-size: 1.6rem; font-weight: bold; }

.cff-train { width: 15%; display: flex; align-items: center; }
.cff-time { width: 8%; font-family: monospace; }
.cff-dest { width: 47%; }
.cff-track { width: 10%; text-align: center; font-size: 1.8rem; color: white; }
.cff-remark { width: 20%; color: #ffd700; font-size: 1.2rem; }
.cff-remark.cancelled { background-color: #eb0000; color: white; padding: 2px 5px; display: inline-block; }

.train-category {
    background-color: white; color: #000; padding: 3px 6px; border-radius: 3px; font-size: 1.1rem;
    display: inline-block; min-width: 60px; text-align: center; border: 1px solid #000; white-space: nowrap;
}
.train-category.ir { background-color: #eb0000; color: white; border-color: #eb0000; }
.train-category.ic { background-color: #eb0000; color: white; border-color: #eb0000; }
.train-category.re { background-color: white; color: #eb0000; border-color: #eb0000; }

.cff-loading { text-align: center; font-size: 1.5rem; margin-top: 20px; }

/* ==================================================
   VERSION MOBILE (RÉPONSIVE)
   ================================================== */
@media (max-width: 768px) {
    body {
        height: auto;
        overflow-y: auto; /* Permet le scroll sur mobile */
    }
    
    .meteo-container {
        height: auto;
        padding: 15px;
    }
    
    .meteo-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .city-col {
        align-items: center;
        margin-bottom: 10px;
    }
    
    .city-name { font-size: 2.2rem; }
    
    .temp-col {
        margin: 10px 0;
    }
    .temp-current { font-size: 3.5rem; }
    
    .icon-col {
        padding-right: 0;
        justify-content: center;
    }
    .icon-col img {
        height: 120px;
        width: 120px;
    }
    
    .meteo-details {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 15px;
        padding: 15px;
    }
    
    .detail-item {
        flex-basis: 40%;
        margin-bottom: 5px;
    }
    
    .alertswiss-container {
        height: auto;
        padding: 5px 10px;
    }
    
    .dangers-container { 
        padding: 10px; 
        gap: 10px; 
    }
    
    .section-title { font-size: 1rem; margin-bottom: 5px; }
    
    #alert-board {
        flex-direction: column;
        align-items: stretch;
    }
    
    .danger-card {
        margin: 3px 0;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        border-left-width: 4px;
    }
    
    .danger-icon {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
        margin-right: 10px;
    }
    
    .danger-content h3 { font-size: 0.95rem; margin-bottom: 2px; }
    .degree-text { font-size: 0.8rem; margin-bottom: 2px; }
    .desc { font-size: 0.75rem; }
    
    .cff-container {
        height: auto;
        min-height: 50vh;
    }
    
    .cff-board {
        padding: 0 5px;
    }
    
    .cff-header {
        display: flex;
        font-size: 0.8rem;
        padding: 5px;
    }
    
    .cff-row {
        font-size: 0.95rem;
        flex-wrap: nowrap;
        padding: 8px 0;
    }
    
    /* Sur mobile, on garde 1 ligne mais on réduit les polices et ajuste les % */
    .cff-train { width: 17%; }
    .train-category { font-size: 0.65rem; padding: 2px 3px; min-width: 35px; }
    
    .cff-time { width: 13%; font-size: 0.85rem; }
    
    .cff-dest { 
        width: 38%; 
        font-size: 0.9rem; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }
    
    .cff-track { width: 8%; font-size: 0.9rem; margin-top: 0; text-align: center; }
    
    .cff-remark-col { width: 24%; margin-top: 0; text-align: right; }
    .cff-remark { width: 100%; font-size: 0.6rem; letter-spacing: -0.2px; }
    
    /* Réafficher les colonnes d'en-tête mais avec les mêmes % */
    .cff-train-col { display: block; width: 17%; }
    .cff-time-col { display: block; width: 13%; font-size: 0.8rem; }
    .cff-dest-col { display: block; width: 38%; }
    .cff-track-col { display: block; width: 8%; }
    
    /* Bouton paramètre */
    .settings-btn {
        top: 10px;
        right: 10px;
        font-size: 1.5rem;
    }
}