/* ===============================
   LAYOUT — STRUCTURE SADSO31
================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* HEADER */
.s31-header {
    background: #fff;
    border-bottom: 5px solid #ddd;
    position: relative;
}

.s31-header-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s31-logo { height: 100px; }

.s31-nav a {
    margin-left: 40px;
    font-family: var(--font-titre);
    font-weight: 900;
    color: var(--bleu);
    transition: 0.2s;
}

.s31-nav a:hover { color: var(--rose); }

.s31-header-mascotte img {
    height: 120px;
    position: absolute;
    bottom: -18px;
    right: 20px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}

/* HERO */
.s31-hero,
.s31-hero-short {
    background: var(--bleu);
    color: #fff;
    text-align: center;
    border-bottom: 5px solid #ddd;
}

.s31-hero { padding: 60px 20px 40px; }
.s31-hero-short { padding: 20px 20px 40px; }

.s31-hero h1,
.s31-hero-short h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* FOOTER */
.s31-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 40px;
    background: var(--bleu);
    color: #fff;
}