/* =========================================================================
   accueil.css — page d'accueil (index.html).
   ========================================================================= */

body {
    --color-page: #222;
}

.accueil {
    width: min(100% - (2 * var(--page-gutter)), 1050px);
    margin: 0 auto;
    padding: clamp(42px, 7vh, 90px) 20px 50px;
    text-align: center;
}

.accueil h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
}

.accueil p {
    max-width: 760px;
    margin: 0 auto 34px;
    color: #ccc;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.65;
}

.accueil__lead {
    margin-top: 26px;
}

.accueil__warning {
    max-width: 760px;
    margin: 22px auto 0;
    color: #f39c12;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
}

.site-footer {
    width: min(100% - (2 * var(--page-gutter)), 1050px);
    margin: 0 auto;
    padding: 20px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 700px) {
    .accueil {
        padding-top: 42px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .accueil p {
        margin-bottom: 26px;
    }

    .site-footer {
        padding: 16px 8px;
    }
}

@media (max-width: 420px) {
    .accueil {
        padding-top: 32px;
    }

    .accueil h1 {
        font-size: 2rem;
    }
}