/*
 * La maquette mobile fait 375 × 680 px. Toutes les dimensions sont exprimées
 * en multiples de --u (1 px maquette), calculé pour que l'écran tienne
 * toujours en largeur ET en hauteur. En desktop, l'appli est centrée dans un
 * cadre au format mobile, sur un fond savane flouté.
 */

:root {
    --green: #71814a;
    --green-dark: #4f5c31;
    --gold: #f1c36e;
    --khaki: #bab861;
    --cream: #eee8df;
    --night: #2b1a0e;
    --error: #ffb38a;

    --frame-w: 100vw;
    --u: min(calc(var(--frame-w) / 375), calc(100vh / 680));

    --font: 'Barlow Condensed', 'Arial Narrow', sans-serif-condensed, Arial, sans-serif;
}

@supports (height: 100svh) {
    :root {
        /* svh : ne varie pas quand la barre du navigateur ou le clavier apparaît */
        --u: min(calc(var(--frame-w) / 375), calc(100svh / 680));
    }
}

@view-transition {
    navigation: auto;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font);
    line-height: 1.2;
    color: var(--cream);
    background-color: var(--night);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

img, picture, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

a {
    color: inherit;
}

h1, h2, h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- Cadre de l'application ---------- */

.app {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: var(--frame-w);
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline: auto;
    overflow: hidden;
    background: #f5b445 url("../images/background-f139fbdcf05e8f0705e566339dcfd0c9.webp") center bottom / cover no-repeat;
}

/* Assombrit le sol pour la lisibilité du copyright */
.app::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    height: calc(var(--u) * 110);
    background: linear-gradient(to bottom, rgb(43 26 14 / 0), rgb(43 26 14 / .55) 55%, rgb(43 26 14 / .9));
    pointer-events: none;
}

.main {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Pied de page : personnages + copyright ---------- */

.footer {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 2) calc(var(--u) * 8) calc(var(--u) * 5 + env(safe-area-inset-bottom));
}

.footer-copyright {
    width: calc(var(--u) * 345);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 calc(var(--u) * 12);
    font-size: max(11px, calc(var(--u) * 11));
    font-weight: 500;
    letter-spacing: .02em;
}

.footer-links a,
.footer-links button {
    color: rgb(238 232 223 / .85);
    text-decoration: none;
}

.footer-links a:hover,
.footer-links button:hover {
    color: #fff;
    text-decoration: underline;
}

.characters {
    position: absolute;
    inset: auto 0 100%;
    pointer-events: none;
}

.characters img {
    position: absolute;
    bottom: 0;
    width: auto;
    max-width: none;
}

.characters-asterix {
    height: calc(var(--u) * 92);
    view-transition-name: asterix;
}

.characters-obelix {
    height: calc(var(--u) * 118);
    margin-bottom: calc(var(--u) * 6);
    view-transition-name: obelix;
}

.characters--sides .characters-asterix {
    left: calc(var(--u) * 22);
}

.characters--sides .characters-obelix {
    right: calc(var(--u) * 4);
}

.characters--center .characters-asterix {
    left: calc(50% - var(--u) * 54);
    z-index: 1;
}

.characters--center .characters-obelix {
    left: calc(50% - var(--u) * 24);
}

/* ---------- Boutons image ---------- */

.cta {
    display: block;
    border-radius: calc(var(--u) * 14);
    transition: transform .2s ease, filter .2s ease;
}

.cta img {
    width: 100%;
}

.cta:hover {
    transform: scale(1.04);
    filter: brightness(1.06);
}

.cta:active {
    transform: scale(.97);
}

/* ---------- Desktop : cadre mobile centré sur fond savane ---------- */

@media (min-width: 600px) {

    :root {
        --frame-w: min(100vw, 480px);
    }

    body {
        background:
            radial-gradient(ellipse at center, rgb(43 26 14 / 0) 30%, rgb(43 26 14 / .75) 100%),
            url("../images/background-desktop-7935a1fc30544e5e6102b3b58385304c.webp") center bottom / cover no-repeat fixed,
            var(--night);
    }

    .app {
        width: calc(var(--u) * 375);
        box-shadow:
            0 0 0 calc(var(--u) * 2) var(--gold),
            0 0 calc(var(--u) * 60) rgb(0 0 0 / .55);
    }

    /* Frises égyptiennes de part et d'autre du cadre */
    body::before,
    body::after {
        content: '';
        position: fixed;
        inset-block: 0;
        width: calc(var(--u) * 12);
        background: url("../images/frise-8c592c8a1e861215ab1dab746ef6e49a.webp") center top / 100% auto repeat-y;
        box-shadow: 0 0 calc(var(--u) * 20) rgb(0 0 0 / .4);
        pointer-events: none;
    }

    body::before {
        left: calc(50% - var(--u) * (187.5 + 16));
    }

    body::after {
        left: calc(50% + var(--u) * (187.5 + 4));
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    @view-transition {
        navigation: none;
    }
}