:root {
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: var(--default-font-family);
}

.main-container {
    width: 100%;
    min-height: 2500px; /* assez grand pour contenir toutes les images */
    position: relative;
    background: #dfc8f5;
}

/* TEXTE PRINCIPAL */
.text {
    position: absolute;       /* position précise */
    top: 80px;                /* ajuste pour descendre MEDIAS */
    left: 50%;                /* centré horizontalement */
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    font-family: Abril Fatface, var(--default-font-family);
    font-size: clamp(40px, 5vw, 96px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: clamp(10px, 2vw, 36px);
}

/* STYLE COMMUN AUX IMAGES */
.pic, .pic-2, .img, .pic-3, .pic-4 {
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 3vw;
}

/* IMAGES VERTICALEMENT RAPPROCHÉES */

/* Image droite en haut */
.pic {
    width: 26%;
    aspect-ratio: 505/897;
    top: 18%;
    left: 57%;
    background-image: url("/public/VideoCapture_20250909-2124271.png");
    z-index: 2;
}

/* Image gauche en haut */
.pic-2 {
    width: 28%;
    aspect-ratio: 547/410;
    top: 18%;
    left: 17%;
    background-image: url("/public/10000081071.png");
    z-index: 3;
}

/* Image centrale */
.img {
    width: 35%;
    aspect-ratio: 739/554;
    top: 36%;  /* rapprochée verticalement */
    left: 12%;
    background-image: url("/public/IMG-20240928-WA00301.png");
    z-index: 1;
}

/* Image droite en bas */
.pic-3 {
    width: 30%;
    aspect-ratio: 601/340;
    top: 56%;  /* rapprochée verticalement */
    left: 57%;
    background-image: url("/public/DSC_09731.png");
    z-index: 4;
}

/* Image gauche en bas */
.pic-4 {
    width: 35%;
    aspect-ratio: 751/500;
    top: 60%;  /* rapprochée verticalement */
    left: 12%;
    background-image: url("/public/AZ7B24451.png");
    z-index: 5;
}