html, body {
    cursor: url("./curseur.png") 16 16, auto;
}

/* Important: sur les éléments interactifs aussi*/
a, button, input, textarea, select, label {
    cursor: url("./curseur.png") 16 16, pointer;
    
}

.box2 {
    justify-content: center ;
}

nav {
    text-align: right;
}



body::before {
    content: "";
    position: fixed;
    inset:0;
    background:url(./water.jpg) no-repeat center/cover;
    opacity: 1; /*change ici l'opacité*/
    z-index: -1;
}


body {
    font-family: 'Trebuchet MS';
    min-height: 300vh;
    color: rgba(25, 170, 214, 0.829);
    font-size: 0.5rem;
    margin: 3rem;
    padding: 0 12vh; /*desktop*/
    position: relative;
    font-weight: bold;
    /* VH = 100% de la taille de l'écran (viewport height) */
    /* min-height: 100vh; */
}

a {
    color: hsl(188, 86%, 86%);
    text-shadow: -1px 2px 11px #0502a7;
    text-align: left;
    font-size: 3vw;
    text-decoration: none;
}

.slideUp {
    color: rgb(255, 255, 255);
    -webkit-text-stroke: 0 !important;
    text-decoration: none;
    margin-left: 0;
}

.logo {
    display: inline-block;
    font-size: clamp(18px, 3vw, 28px); /* min / responsive / max */
    line-height: 1.05;
    text-decoration: none;
    text-align: left;
}


/* Ne marche pas sur mobile,
.flexbox1 {
    margin-left: 0vh;
    margin-right: 12vh;
}*/

.flexbox1 {
    justify-content: left;
}

.box3 {
    text-align: center;
}
h1 {
    text-align: center;
    color: rgb(0, 0, 0);
    text-shadow: 2px 5px 1px rgb(8, 75, 219);
    font-size: 4rem;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: black;
}


h2 {
    text-align: center;
    font-size: 4vw;
    color: rgb(250, 225, 225);
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: black;
}

main {
    border: 2px white;
    background: rgba(161, 199, 255, 0.247);
    border: 1px solid rgba(0, 89, 255, 0.651);
    border-radius: 20px;
    box-shadow: inset 11px -8px 11px 1px rgb(187, 255, 255);
}

/*div {
    text-align: justify;
    
    margin-right: 12vh;
    
}*/

.text {
    text-align: justify;
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    /*OPTIONNEL: un peu d'espace*/
    justify-content: center;
    padding: 8px 0px;
    display: flex;
    align-items: center;
}

.marquee__track {
    display: inline-flex;
    gap: 14px;
    will-change: transform;
    animation: marquee 12s linear infinite;
    width: max-content;
    
}

.marquee__item {
    font-size: 2rem;
    font-weight: 600;
    color: rgb(221, 169, 185);
    -webkit-text-stroke: 0.7px rgb(97, 63, 63) !important;
}

.marquee__dot {
    opacity: 1;
    align-items: center;
    justify-content: center;
    font-size: 2rem;

}

@keyframes marquee {
    from { transform: translateX(0);}
    to { transform: translateX(-10%);}
}

/*ACCESSIBILITE : stop l'animation si l'utilisateur préfère réduire */

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none;}
}

@media (max-width: 768px) {

.logo {
    font-size: 2rem !important;
    text-align: left;
    margin-left: 10px 0;
  }
    
body {
    padding: 0 16px; /* au lieu des 12vh*/
    font-size: 16px; /* 2vw peut être trop petit/grand sur mobile*/
}

nav {
    text-align: center;
    margin: 12px 0;
}

a {
    font-size: 14px; /* au lieu de 3vw */
    text-align: left;
}

/*mon cadre*/
main, .box1, .box2 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}



.slideUp {
    margin-left: 0;
}
    
h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.6rem;
    
}

.marquee__item {
    font-size: 1.2rem;
}
}

img {
    border-radius: 20px;
    align-item: center;
    width: 40%;
    height: 40%;
}