/* =========================================
   RESET & BASE
   ========================================= */

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

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--SORA);
    color: var(--couleur-noir);
    background: var(--couleur-blanc);
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 70px 45px;
}

img {
    max-width: 100%;
}

a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
}


/* =========================================
   REVEAL AU SCROLL
   ========================================= */
.anim [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out);
}

.anim [data-reveal="fade"] {
    transform: none;
}

.anim [data-reveal="left"] {
    transform: translateX(-28px);
}

.anim [data-reveal="right"] {
    transform: translateX(28px);
}

.anim [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}


/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    .container {
        padding: 60px 32px;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 52px 24px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 44px 18px;
    }
}


/* =========================================
   ACCESSIBILITÉ
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .anim [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}