/* o10c.org : les blocs de couleur de 2001, superposés comme du papier calque */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* couleurs reprises telles quelles de la page de 2001 */
:root {
    --jaune: #ffd900;
    --pale: #feed85;
    --orange: #fd9a52;
    --bleu: #688aaf;
    --vert-clair: #abe56d;
    --violet: #a98bd6;
    --lagon: #5cc3b8;
    --nuit: #0b3d47;
    --encre: #1a1a1a;
    --papier: #fff;
    color-scheme: light;
}

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

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font: 1.125rem/1.5 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
}

main {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 2rem clamp(1rem, 4vw, 3rem);
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 4px;
}

/* Composition : une grille de 12 colonnes où les blocs se chevauchent */

/* positions reprises de la page de 2001 (cadres de 250 x 150 px sur 680 x 420 px), en pourcentages */
.blocs {
    position: relative;
    width: min(100%, 70rem);
    aspect-ratio: 68 / 42;
}

.bloc {
    position: absolute;
    width: 36.8%;
    min-height: 35.7%;
    padding: clamp(1rem, 2.2vw, 2rem);
}

/* tailles variées et légères rotations : des papiers posés sur une table */
.bloc-jaune {
    left: 14%;
    top: 0;
    width: 52%;
    min-height: 30%;
    rotate: -3deg;
    background: var(--jaune);
}

/* sous le jaune, entre lui et le bleu (placé avant le jaune dans le HTML) */
.bloc-violet {
    left: 2%;
    top: 22%;
    width: 30%;
    min-height: 40%;
    rotate: -5deg;
    background: var(--violet);
}

.bloc-orange {
    left: 58%;
    top: 8%;
    width: 30%;
    min-height: 46%;
    rotate: 5deg;
    background: var(--orange);
}

.bloc-bleu {
    left: 6%;
    top: 62%;
    width: 42%;
    min-height: 34%;
    rotate: 4deg;
    background: var(--bleu);
}

.bloc-pale {
    left: 32%;
    top: 34%;
    width: 32%;
    min-height: 34%;
    rotate: -7deg;
    background: var(--pale);
}

/* tous les blocs en transparence ; le texte noir reste noir en multiply */
.bloc {
    mix-blend-mode: multiply;
}

/* bloc central, plus grand et incliné : le texte monte en diagonale avec lui */
.bloc-accueil {
    left: 24%;
    top: 24%;
    width: 46%;
    min-height: 42%;
    rotate: -16deg;
    z-index: 2;
    display: grid;
    place-items: center;
    background: var(--vert-clair);
}

.titre {
    text-align: center;
}

.bloc-accueil h1 {
    margin: 0;
    font-size: clamp(3.4rem, 7vw, 7.5rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: .06em;
}

.bloc-accueil h1 span {
    font-size: .4em;
    font-weight: 400;
    letter-spacing: 0;
}

.bloc-accueil p {
    margin: .6rem 0 0;
}

.bloc-mayotte {
    left: 54%;
    top: 54%;
    width: 36%;
    rotate: 2deg;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background: var(--lagon);
    color: var(--nuit);
    text-decoration: none;
}

.bloc-mayotte strong {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.05;
}

.bloc-mayotte span {
    margin-top: .4rem;
    font-size: 1rem;
    line-height: 1.35;
}

.bloc-mayotte:hover strong {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: .15em;
}

/* Page d'erreur : deux blocs seulement */

.blocs-erreur {
    aspect-ratio: 68 / 30;
}

.blocs-erreur .bloc-accueil {
    left: 10%;
    top: 0;
    width: 50%;
    min-height: 60%;
    rotate: -4deg;
}

.blocs-erreur .bloc-orange {
    left: 48%;
    top: 30%;
    width: 40%;
    min-height: 60%;
}

/* Arrivée des blocs, une seule fois au chargement */

@media (prefers-reduced-motion: no-preference) {
    .bloc {
        animation: arrivee .6s cubic-bezier(.2, .7, .2, 1) both;
    }

    .bloc-violet { animation-delay: 0s; }
    .bloc-jaune { animation-delay: .04s; }
    .bloc-orange { animation-delay: .08s; }
    .bloc-pale { animation-delay: .16s; }
    .bloc-bleu { animation-delay: .24s; }
    .bloc-accueil { animation-delay: .32s; }
    .bloc-mayotte { animation-delay: .4s; }

    @keyframes arrivee {
        from {
            opacity: 0;
            translate: 0 1.2rem;
        }
    }
}

/* Écrans étroits : les blocs passent sur une grille de 6 colonnes */

@media (max-width: 52em) {
    .blocs,
    .blocs-erreur {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(18, minmax(2.2rem, auto));
        width: min(100%, 34rem);
        aspect-ratio: auto;
    }

    .blocs .bloc {
        position: static;
        width: auto;
        min-height: 0;
    }

    .bloc-violet { rotate: 3deg; }
    .bloc-jaune { rotate: -2deg; }
    .bloc-orange { rotate: 3deg; }
    .bloc-pale { rotate: -4deg; }
    .bloc-bleu { rotate: 3deg; }
    .bloc-accueil { rotate: -8deg; }
    .bloc-mayotte { rotate: 1.5deg; }

    .bloc-accueil h1 {
        font-size: clamp(2.6rem, 13vw, 4.2rem);
        letter-spacing: .03em;
    }

    .bloc-accueil p {
        font-size: .95rem;
    }

    .bloc-violet { grid-area: 16 / 3 / 19 / 7; }
    .bloc-jaune { grid-area: 1 / 2 / 4 / 7; }
    .bloc-accueil { grid-area: 2 / 1 / 8 / 7; }
    .bloc-orange { grid-area: 6 / 4 / 9 / 7; }
    .bloc-pale { grid-area: 8 / 1 / 11 / 4; }
    .bloc-bleu { grid-area: 15 / 1 / 18 / 5; }
    .bloc-mayotte { grid-area: 10 / 2 / 15 / 7; }

    .blocs-erreur .bloc-accueil { grid-area: 1 / 1 / 7 / 6; }
    .blocs-erreur .bloc-orange { grid-area: 5 / 3 / 9 / 7; }
}