@import url('https://api.fontshare.com/v2/css?f[]=zodiak@100,101,300,301,400,401,700,701&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@100,101,200,201,300,301,400,401,500,501,600,601&display=swap');


#bridge {
  margin: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 4;
  pointer-events: none; /* important : ne bloque rien */
}


.draggable {
  position: absolute;
  cursor: grab;
  z-index: 1;
  display: inline-block; /* très important : évite que la div prenne plus de place */
  height: auto !important;
}

.draggable img {
  object-fit: contain;
  display: block; /* évite l’espace blanc en dessous de l’image */
  pointer-events: none; /* permet de cliquer sur la div même si l’image est là */
  object-fit: contain;
}


/*******************IMAGES**************************/
/*----IMAGE 1----*/
.img1 {
    top: 2vh;
    left: 20vw;
}
.img1 img{
    height: 22vh;
    width: auto;
}

/*----IMAGE 2----*/
.img2 {
    top: 62.9vh;
    left: 83.8vw;
}
.img2 img{
    height: 17vh;
    width: auto;
}

/*----IMAGE 3----*/
.img3 {
    top: 78vh;
    left: 76vw;
}
.img3 img{
    height: 13vh;
    width: auto;
}

/*----IMAGE 4----*/
.img4 {
    top: 66.5vh;
    left: 43vw;
}
.img4 img{
    height: 14vh;
    width: auto;
}


/*----IMAGE 5----*/
.img5 {
    top: 45vh;
    left: 58vw;
}
.img5 img{
    height: 16.5vh;
    width: auto;
}


/*----IMAGE 6----*/
.img6 {
    top: 3vh;
    left: 45vw;
}
.img6 img{
    height: 18.5vh;
    width: auto;
}


/*----IMAGE 7----*/
.img7 {
    top: 82vh;
    left: 54vw;
}
.img7 img{
    height: 16.5vh;
    width: auto;
}


/*----IMAGE 8----*/
.img8 {
    top: 37vh;
    left: 9vw;
}
.img8 img{
    height: 29vh;
    width: auto;
}


/*----IMAGE 9----*/
.img9 {
    top: 19vh;
    left: 86vw;
}
.img9 img{
    height: 34vh;
    width: auto;
}


/*----IMAGE 10----*/
.img10 {
  top: 3.2vh;
  left: 27vw;
}
.img10 img{
    height: 20vh;
    width: auto;
}


/*----IMAGE 11----*/
.img11 {
  top: 30vh;
  left: 71.6vw;
}
.img11 img{
    height: 9vh;
    width: auto;
}


/*----IMAGE 12----*/
.img12 {
    top: 63vh;
    left: 18.5vw;
}
.img12 img{
    height: 32.5vh;
    width: auto;
}






/**************  INTRO *********************/

section {
    height: 100vh;
    margin: 0 2.4vw 0 2.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}


/************** H1 *********************/
h1 {
    font-family: 'Zodiak', serif;
    font-weight: 400;
    font-size: 3.25em;
    letter-spacing: -0.02vw;
    margin: 0 0 1vh 0;   
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0.02em;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s cubic-bezier(0.67, 0.01, 0.15, 0.98);
    transition: background-size 0.5s cubic-bezier(0.67, 0.01, 0.15, 0.98);
        display: inline-block;
    width: 100%;
    text-align: right;
}
h1 span {
    font-size: 0.95em;
    font-weight: 200;
    letter-spacing: -0.04vw;
        font-style: italic;
        display: inline-block;
        margin: 0 1vw 0 1vw;
    -webkit-text-stroke-width: 0.01em;
    -webkit-text-fill-color: black;
}



/************** BOTTOM *********************/
.text-bottom {
    display: flex;  
    width: 100%;
    margin-top: 4vh;
    margin-bottom: 1.5vh;
}
.text-bottom ul {
    flex: 1;
}

ul {
    margin-top: auto;
    padding: 0;
    margin-bottom: 2vh;
}

li {
    list-style: none;
    font-family: 'Switzer';
    font-weight: 400;
    font-style: italic;
    font-size: 0.85em;
    margin: 1vh 0 0 0;
    color: black;
}

.text-bottom .text-home {
    flex: 4;
    text-align: end;
}



/************** TEXTE *********************/
.text-home p, .text-bottom p, .text-home a, .text-bottom a {
    font-family: 'Switzer';
    font-weight: 200;
    font-size: 3.2em;
    margin: 0;
    line-height: 135%;
    display: inline-block;
    color: black;
}

.zodiak {
    font-family: 'Zodiak', serif!important;
    font-weight: 300!important;
    font-size: 3.23em!important;
}

.italic {
    font-style: italic!important;
}

sup{
    font-weight: 400;
    font-style: italic;
    font-size: 0.34em;
}

.stroke {
    font-size: 3.3em!important;
    font-weight: 200 !important;
    font-style: italic !important;
    letter-spacing: -0.1vw;
    margin: 0 0 0 0.3vw !important;   
    -webkit-text-stroke-color: rgb(0, 0, 0);
    -webkit-text-stroke-width: 0.025em;
    -webkit-text-fill-color: transparent !important;
}

.musee{
    margin-left: 5vw !important;
}

.fonction{
    margin-left: 3vw !important;
}

.creatif{
    margin-left: 12vw !important;
}

.interactif{
    margin-right: 6vw !important;
}



/*********************SMALL-DESKTOP********************/
@media (max-width: 1480px) {

h1 {
    font-size: 3.05em;
}


.text-home p, .text-bottom p, .text-home a, .text-bottom a {
    font-size: 2.9em;
}

.zodiak {
    font-size: 3em!important;
}

sup{
    font-size: 0.34em;
}

.stroke {
    font-size: 3em!important;
    -webkit-text-stroke-width: 0.025em;
}

/*******************IMAGES**************************/
/*----IMAGE 1----*/
.img1 {
    top: 3vh;
    left: 18vw;
}
.img1 img{
    height: 20vh;
}

/*----IMAGE 2----*/
.img2 img{
    height: 14.5vh;
}

/*----IMAGE 3----*/
.img3 {
    top: 74vh;
}
.img3 img{
    height: 12vh;
}

/*----IMAGE 4----*/
.img4 img{
    height: 14vh;
}

/*----IMAGE 5----*/
.img5 img{
    height: 15.5vh;
}

/*----IMAGE 6----*/
.img6 img{
    height: 20vh;
}

/*----IMAGE 7----*/
.img7 img{
    height: 15.5vh;
}

/*----IMAGE 8----*/
.img8 img{
    height: 28vh;
}

/*----IMAGE 9----*/
.img9 {
    top: 23vh;
}
.img9 img{
    height: 31vh;
}

/*----IMAGE 10----*/
.img10 img{
    height: 18vh;
}

/*----IMAGE 11----*/
.img11 {
  top: 31vh;
  left: 70vw;
}
.img11 img{
    height: 8.5vh;
}

/*----IMAGE 12----*/
.img12 {
    top: 63vh;
    left: 18vw;
}
.img12 img{
    height: 31vh;
}

}

/*********************TABLETTE********************/
@media (max-width: 1280px) {

h1 {
    font-size: 2.9em;
}

.text-home p, .text-bottom p, .text-home a, .text-bottom a {
    font-size: 2.8em;
}

.zodiak {
    font-size: 2.94em!important;
}

sup{
    font-size: 0.4em;
}

/*******************IMAGES**************************/
/*----IMAGE 1----*/
.img1 {
    left: 20vw;
}

/*----IMAGE 2----*/
.img2 {
    top: 63.4vh;
    left: 84.5vw;
}

/*----IMAGE 3----*/
.img3 {
    top: 78vh;
    left: 74vw;
}

/*----IMAGE 4----*/
.img4 {
    left: 39vw;
}

/*----IMAGE 7----*/
.img7 {
    top: 84vh;
}
.img7 img{
    height: 14.5vh;
}

/*----IMAGE 9----*/
.img9 {
    top: 19vh;
    left: 86vw;
}
.img9 img{
    height: 29vh;
}

/*----IMAGE 11----*/
.img11 {
  top: 30vh;
  left: 77vw;
}
.img11 img{
    height: 7.5vh;
}

/*----IMAGE 12----*/
.img12 {
    top: 64vh;
    left: 15vw;
}
.img12 img{
    height: 29vh;
}
}

/*********************MOBILE********************/
@media (max-width: 767px) {

.mobile-hide {
    display: none;
}

#bridge {
display: none;
}

.draggable img {
    display: none;
}
   

/**************  INTRO *********************/

section {
    height: 100vh;
    margin: 0 3.1vw 0 3.1vw;
    display: flex;
    justify-content: center;
    align-items: center;
}


/************** H1 *********************/
h1 {
    font-weight: 500;
    font-size: 2.2em;
    text-align: left;
    line-height: 110%;
}


/************** BOTTOM *********************/

ul {
display: none;
}

.text-bottom .text-home {
    text-align: start;
}



/************** TEXTE *********************/
.text-home p, .text-bottom p, .text-home a, .text-bottom a {
    font-family: 'Switzer';
    font-weight: 200;
    font-size: 1.84em;
    margin: 0;
    line-height: 127%;
    display: inline-block;
    color: black;
}

.zodiak {
    font-family: 'Zodiak', serif!important;
    font-weight: 300!important;
    font-size: 1.9em!important;
}

sup{
    font-weight: 400;
    font-style: italic;
    font-size: 0.34em;
}

.stroke {
    font-size: 1.95em!important;
    font-weight: 300 !important;
    font-style: italic !important;
    letter-spacing: -0.1vw;
    margin: 0 0 0 0.3vw !important;   
    -webkit-text-stroke-color: rgb(0, 0, 0);
    -webkit-text-stroke-width: 0.028em;
    -webkit-text-fill-color: transparent !important;
}
    
.text-bottom {
    margin-top: 2.5vh;
    margin-bottom: 7vh;
}

.musee{
    margin-left: 0!important;
}

.fonction{
    margin-left: 0!important;
}

.creatif{
    margin-left: 0!important;
}

.interactif{
    margin-right: 0!important;
}

    
}