/* ========================================
   style.css — Layout principal
   ======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* --- Wrapper qui pousse le contenu à droite de la navbar --- */
.page-wrapper {
    margin-left: 72px; /* = largeur de la navbar */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* --- Ligne de contenu : 2/3 + 1/3 --- */
.line_content {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 16px;
    padding: 16px;
    min-height: 0;
}

.content-block {
    border-radius: 12px;
    background-color: #fff;
    padding: 20px;
    overflow-y: auto;
}

.main-block {
    flex: 2; /* 2/3 */
}

.side-block {
    flex: 1; /* 1/3 */
}

/* --- Footer --- */
footer {
    margin-left: 72px;
    padding: 12px 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 0.85rem;
    color: #888;
    border-top: 1px solid #e8e8e8;
}

footer a {
    color: #888;
    text-decoration: none;
}

footer a:hover {
    color: #3498db;
}

/* --- Portrait (mobile) : colonne unique, navbar overlay --- */
@media (orientation: portrait) {
    .page-wrapper {
        margin-left: 0; /* pas de décalage, la navbar est overlay */
    }

    .line_content {
        flex-direction: column; /* les deux blocs s'empilent */
    }

    .main-block,
    .side-block {
        flex: unset;
        width: 100%;
    }

    footer {
        margin-left: 0;
    }
}