@import url("./reset.css");
@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@font-face {
    font-family: "Larke";
    src: url("../fonts/Larke\ Sans\ Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Swiss";
    src: url("../fonts/swiss-721-bt-roman.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
:root {
    --couleur-principale: #8f908a;
    --couleur-accent1: #efea91;
    --couleur-accent2: #ff562e;
    --couleur-fonce: #0f1010;
    --couleur-pale: #f3f3f3;
    --police-titre: "Swiss", sans-serif;
    --police-texte: "Arial", sans-serif;
    --police-xs: clamp(0.75rem, 0.34vi + 0.61rem, 0.95rem);
    --police-sm: clamp(1.25, 0.61vi + 1.2rem, 1.45rem);
    --police-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --police-md: clamp(1.15rem, 0.61vi + 1.1rem, 1.35rem);
    --police-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --police-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
    --police-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --police-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);
    --espace-xxxs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --espace-xxs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
    --espace-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --espace-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --espace-md: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --espace-lg: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --espace-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --espace-xxl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --espace-xxxl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
    --espace-xxxxl: clamp(9rem, 8.6522rem + 1.7391vw, 10rem);
}

@keyframes apparition {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    font-family: var(--police-texte);
    color: var(--color-tertiary);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    background-image: url("https://www.transparenttextures.com/patterns/black-paper.png");
}

h1 {
    font-family: var(--police-texte);
    font-size: var(--police-md);
    color: var(--couleur-accent2);
}

h2 {
    font-size: var(--police-sm);
    font-family: var(--police-texte);
    color: var(--couleur-principale);
    margin-bottom: var(--espace-sm);
}

a {
    color: var(--couleur-accent2);
    text-decoration: none;
    font-size: var(--police-sm);
    font-family: var(--police-texte);
    transition: all 0.5s;
    position: relative;

    ::after {
        content: " ";
        display: block;
        position: absolute;
        z-index: -1;
        top: 5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-bottom: 2px solid var(--couleur-accent2);
        width: 0;
        transition: all 350ms;
    }

    i {
        margin-right: var(--espace-xs);
    }
}

a:hover {
    color: color-mix(in oklab, var(--couleur-accent2) 70%, var(--couleur-accent1) 30%);
    ::after {
        border-color: color-mix(in oklab, var(--couleur-accent2) 70%, var(--couleur-accent1) 30%);
        width: calc(100% + 10px);
    }
}

img {
    max-width: 100%;
    height: auto;
}
/* Section principale */
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: var(--espace-xxxl);
    padding: var(--espace-xxl) var(--espace-xxxl);
    border-radius: 4px;
    border: white 1px solid;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: #a2a2a252 0px 0px 10px;
    backdrop-filter: blur(5px);
    opacity: 0;
    animation: apparition 1.5s 0.25s forwards;
}

.infos {
    display: flex;
    flex-direction: column;
    gap: var(--espace-xxxs);
}
.coordonnees {
    display: flex;
    gap: var(--espace-sm);
}

.logo-conteneur {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--espace-xs);
    min-width: 40vw;
}

@media screen and (max-width: 900px) and (orientation: landscape) {
    main {
        padding: var(--espace-md);
        aspect-ratio: initial;

        gap: var(--espace-md);
    }
}

@media screen and (max-width: 768px) {
    main {
        padding: var(--espace-xl) var(--espace-lg);
        aspect-ratio: 2/3;
        justify-content: flex-start;
        gap: 0;
    }

    .logo-conteneur {
        display: flex;
        align-items: flex-start;
        flex: 100%;
        gap: var(--espace-xs);
    }

    .coordonnees {
        flex-direction: column;
        gap: var(--espace-xs);
    }

    h1,
    h2,
    a {
        font-size: var(--police-sm);
    }
}

@media screen and (max-width: 480px) {
    main {
        padding: var(--espace-lg);
        aspect-ratio: 2/3;
        max-height:80dvh;
      	max-width:80dvw;
        justify-content: flex-start;
        gap: 0;
    }

    .logo-conteneur {
        display: flex;
        justify-content: flex-start;
        flex: 100%;
    }

    h1 {
        font-weight: bolder;
    }
    h1,
    h2,
    a {
        font-size: var(--police-xs);
    }
}