/* ========================================
   CONFIGURATION GÉNÉRALE
======================================== */

:root {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f8f6ee;
    color: #242228;
    font-family: Georgia, 'Times New Roman', serif;
}

/* ========================================
   CONTENEUR PRINCIPAL
======================================== */

main {
    width: min(1140px, calc(100% - 48px));
    margin: auto;
    text-align: center;
}

/* ========================================
   LOGO
======================================== */

.logo {
    display: block;
    width: 313px;
    max-width: 65%;
    height: auto;
    margin: 42px auto 64px;
}

/* ========================================
   TITRE PRINCIPAL
======================================== */

h1 {
    font-weight: 400;
    font-size: clamp(29px, 3.25vw, 53px);
    line-height: 1.12;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    margin: 0 auto 93px;
    max-width: 1160px;
}

/* ========================================
   LIGNE SÉPARATRICE
======================================== */

hr {
    height: 1px;
    border: 0;
    background: #e5e1d7;
    margin: 0 0 90px;
}

/* ========================================
   IMAGE PRINCIPALE
======================================== */

.food {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 0 40px;
    object-fit: cover;
}

/* ========================================
   BOUTON FACEBOOK
======================================== */

.facebook {
    position: fixed;
    top: 46%;
    left: 40px;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 1px solid #d7d3cb;
    border-radius: 50%;

    font: bold 20px Arial, sans-serif;
    color: #222;
    text-decoration: none;
}

.facebook:focus-visible {
    outline: 3px solid #a70016;
    outline-offset: 3px;
}

/* ========================================
   ÉCRANS LARGES MAIS PEU HAUTS
======================================== */

@media (min-width: 701px) and (max-height: 950px) {
    .logo {
        margin-top: clamp(18px, 3vh, 42px);
        margin-bottom: clamp(22px, 4vh, 64px);
    }

    h1 {
        margin-bottom: clamp(24px, 5vh, 93px);
    }

    hr {
        margin-bottom: clamp(24px, 5vh, 90px);
    }

    .food {
        max-height: clamp(170px, calc(100vh - 500px), 323px);
        width: auto;
        max-width: 90%;
        object-fit: contain;
    }
}

/* ========================================
   TABLETTES ET MOBILES
======================================== */

@media (max-width: 700px) {
    main {
        width: min(100% - 36px, 560px);
    }

    .logo {
        margin: 30px auto 45px;
        max-width: 70%;
    }

    h1 {
        font-size: clamp(25px, 6.3vw, 39px);
        line-height: 1.2;
        margin-bottom: 58px;
        letter-spacing: 0.025em;
    }

    hr {
        margin-bottom: 54px;
    }

    .food {
        width: 100%;
    }

    .facebook {
        position: static;
        margin: 30px auto 35px;
    }
}

/* Bouton Facebook - écrans intermédiaires */
@media (min-width: 701px) and (max-width: 1396px) {
    .facebook {
        position: static;
        margin: 30px auto;
    }
}