.calendar{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:8px;
}

.day{
    border:1px solid #ddd;
    border-radius:6px;
    padding:6px;
    background:white;
    min-height:120px;
}

.day-header{
    font-weight:bold;
    font-size:0.9em;
    margin-bottom:4px;
}

.sun{
    font-size:0.85em;
    color:#444;
}


.tide {
    display: grid;
    grid-template-columns: 35px 90px 30px;
    gap: 4px;
    align-items: center; /* aligne tout sur la même ligne */
    font-size: 0.85em;
}
.hour{
    width:40px;
}

.hour.high{
    color:#0077cc;
    font-weight:bold;
}

.name{
    width:80px;
}

.coef{
    color:#0066cc;
    font-weight:bold;
}

.hour.high{
    color:#0077cc;
    font-weight:bold;
}

.coef-good{
    background:#dff5df;
}

.night-low{
    background:#bfe7bf;
}

.coef-good{
    background:#dff5df;
}

.night-low{
    background:#a8e0a8;
}

.month-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap; /* responsive */
}

.month-nav h2{
    margin:0;
    font-size:1.5em;
    text-align:center;
    flex:1 1 auto;
}

.month-btn{
    display:inline-block;
    padding:8px 16px;
    background: linear-gradient(145deg, #00aaff, #0077cc);
    color:white;
    font-weight:bold;
    text-decoration:none;
    border-radius:8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
    margin: 4px;
}

.month-btn:hover{
    background: linear-gradient(145deg, #0077cc, #005fa3);
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.3);
}

.month-btn.prev::before{
    content: "⬅ ";
}

.month-btn.next::after{
    content: " ➡";
}

/* Sur petit écran */
@media (max-width:600px){
    .month-nav{
        flex-direction:column;
        align-items:stretch;
    }
    .month-btn{
        width:100%;
        text-align:center;
    }
    .month-nav h2{
        margin:10px 0;
    }
}