body {
    box-sizing: border-box;
    background-color: var(--teal-300);
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    cursor: default;
}

body * {
    box-sizing: border-box;
    font-family: var(--font-body);
}

/* The width/height attributes only reserve the image ratio while loading
   (no layout shift); the displayed size still comes from the CSS */
img {
    width: auto;
    height: auto;
}

.svg-sprite {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }


.btn {
    box-shadow: 0 4px 0 var(--btn-edge, var(--green-dark)), 0 8px 14px rgba(58, 42, 29, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover, 
.btn:focus { 
    transform: translateY(-2px); 
}

.btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--btn-edge, var(--green-dark));
}

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


/* temporaire - waintig for trailer */
.hero__cta-trailer {
    display: none;
}