/* #####################   ELEMENTS GLOBAUX ####################### */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Scope One", serif;
    font-weight: 400;
    font-style: normal;
}

body {
    line-height: 1;
}

h1 {
  font-family: "Afacad Flux", sans-serif;
	font-optical-sizing: 16px;
	font-weight: 900;
	font-style: normal;
}

/* #####################   SECTION 1 - grands écrans ####################### */
.section_1 {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/hero_bkgrd.jpg'); /* Ajoute l'image de fond */
    background-size: cover; /* Assure que l'image couvre tout l'espace sans être déformée */
    background-position: center; /* Centre l'image dans la div */
    background-repeat: no-repeat; /* Empêche que l'image se répète */
}

.section_1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0); /* Overlay noir semi-transparent */
    z-index: 2; /* Assure que l'overlay est par-dessus l'image */
    box-shadow: 0px 0px 8px #2c2c2c;
}

.section_1 * {
    position: relative;
    z-index: 3; /* Assure que le contenu (texte, boutons, etc.) est au-dessus de l'overlay */
}

#profile_image {
    position: relative;
    left: 3%;
    width: 20em;
    height: auto; /* Maintient le ratio de l'image tout en changeant la largeur */
    margin-bottom: 3%;
    margin-top: 3%;
}

.circle {
    width: 20em;
    height: 20em;
    background-color: rgba(255, 0, 0, 0);
    border-radius: 50%;
    position: absolute; 
    left: 3%; 
    margin-bottom: 3%;
    margin-top: 3%;
    z-index: 2;
    box-shadow: 0px 0px 8px #2c2c2c;
}

.circle_transi {
    width: 20em;
    height: 20em;
    background-color: #fff; 
    opacity: 0;
    border-radius: 50%;
    position: absolute; 
    left: 3%; 
    margin-bottom: 3%;
    margin-top: 3%;
    z-index: 4;
    transition: opacity 0.3s ease; /* Transition douce */
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle_transi:hover {
    opacity: 0.85; /* Opacité maximale */
}

.circle-text {
    color: rgb(7, 7, 7);
    font-size: 18px;
    position: absolute; /* Pour le centrer à l'intérieur du cercle */
    text-align: center;
    padding: 1em;
}

#pb {
    position: absolute;
    top: 30%;
    left: 30%;
    right: 0;
    bottom: 0;
    font-size: 5em;
    color:rgb(97, 97, 97);
}

#subtitle {
    position: absolute;
    top: 55%;
    left: 30%;
    right: 0;
    bottom: 0;
    font-size: 5em;
    color:rgb(255, 255, 255);
}

/* #####################   SECTION 1 - (max-width < 1200 px) ####################### */
@media all and (max-width: 1200px) {
    #profile_image {
        position: relative;
        left: 3%;
        width: 15em;
        height: auto; /* Maintient le ratio de l'image tout en changeant la largeur */
        margin-bottom: 3%;
        margin-top: 3%;
    }
    
    .circle {
        width: 15em;
        height: 15em;
        background-color: rgba(255, 0, 0, 0);
        border-radius: 50%;
        position: absolute; 
        left: 3%; 
        margin-bottom: 3%;
        margin-top: 3%;
        z-index: 2;
        box-shadow: 0px 0px 8px #2c2c2c;
    }
    
    .circle_transi {
        width: 15em;
        height: 15em;
        background-color: #fff; 
        opacity: 0;
        border-radius: 50%;
        position: absolute; 
        left: 3%; 
        margin-bottom: 3%;
        margin-top: 3%;
        z-index: 4;
        transition: opacity 0.3s ease; /* Transition douce */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .circle_transi:hover {
        opacity: 0.85; /* Opacité maximale */
    }
    
    .circle-text {
        color: rgb(7, 7, 7);
        font-size: 15px;
        position: absolute; /* Pour le centrer à l'intérieur du cercle */
        text-align: center;
    }
    
    #pb {
        position: absolute;
        top: 27%;
        left: 30%;
        right: 0;
        bottom: 0;
        font-size: 3.5em;
        color:rgb(97, 97, 97);
    }
    
    #subtitle {
        position: absolute;
        top: 60%;
        left: 30%;
        right: 0;
        bottom: 0;
        font-size: 3.5em;
        color:rgb(255, 255, 255);
    } 
}


/* #####################   SECTION 1 - (max-width < 900 px) ####################### */

@media all and (max-width: 900px) {
    #profile_image {
        position: relative;
        left: 3%;
        width: 15em;
        height: auto; /* Maintient le ratio de l'image tout en changeant la largeur */
        margin-bottom: 3%;
        margin-top: 3%;
    }
    
    .circle {
        width: 15em;
        height: 15em;
        background-color: rgba(255, 0, 0, 0);
        border-radius: 50%;
        position: absolute; 
        left: 3%; 
        margin-bottom: 3%;
        margin-top: 3%;
        z-index: 2;
        box-shadow: 0px 0px 8px #2c2c2c;
    }
    
    .circle_transi {
        width: 15em;
        height: 15em;
        background-color: #fff; 
        opacity: 0;
        border-radius: 50%;
        position: absolute; 
        left: 3%; 
        margin-bottom: 3%;
        margin-top: 3%;
        z-index: 4;
        transition: opacity 0.3s ease; /* Transition douce */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .circle_transi:hover {
        opacity: 0.85; /* Opacité maximale */
    }
    
    .circle-text {
        color: rgb(7, 7, 7);
        font-size: 15px;
        position: absolute; /* Pour le centrer à l'intérieur du cercle */
        text-align: center;
    }
    
    #pb {
        position: absolute;
        top: 27%;
        left: 40%;
        right: 0;
        bottom: 0;
        font-size: 3.5em;
        color:rgb(97, 97, 97);
    }
    
    #subtitle {
        position: absolute;
        top: 60%;
        left: 38.5%;
        right: 0;
        bottom: 0;
        font-size: 2.5em;
        color:rgb(255, 255, 255);
    } 
}

/* #####################   SECTION 1 - (max-width < 700 px) ####################### */

@media all and (max-width: 700px) {
    #profile_image {
        position: relative;
        left: 3%;
        width: 12em;
        height: auto; /* Maintient le ratio de l'image tout en changeant la largeur */
        margin-bottom: 3%;
        margin-top: 3%;
    }
    
    .circle {
        width: 12em;
        height: 12em;
        background-color: rgba(255, 0, 0, 0);
        border-radius: 50%;
        position: absolute; 
        left: 3%; 
        margin-bottom: 3%;
        margin-top: 3%;
        z-index: 2;
        box-shadow: 0px 0px 8px #2c2c2c;
    }
    
    .circle_transi {
        width: 12em;
        height: 12em;
        background-color: #fff; 
        opacity: 0;
        border-radius: 50%;
        position: absolute; 
        left: 3%; 
        margin-bottom: 3%;
        margin-top: 3%;
        z-index: 4;
        transition: opacity 0.3s ease; /* Transition douce */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .circle_transi:hover {
        opacity: 0.85; /* Opacité maximale */
    }
    
    .circle-text {
        color: rgb(7, 7, 7);
        font-size: 12px;
        position: absolute; /* Pour le centrer à l'intérieur du cercle */
        text-align: center;
    }
    
    #pb {
        position: absolute;
        top: 27%;
        left: 40%;
        right: 0;
        bottom: 0;
        font-size: 3.5em;
        color:rgb(97, 97, 97);
    }
    
    #subtitle {
        position: absolute;
        top: 60%;
        left: 38.5%;
        right: 0;
        bottom: 0;
        font-size: 2.5em;
        color:rgb(255, 255, 255);
    } 
}

/* #####################   SECTION 1 - (max-width < 550 px et orientation portrait) ####################### */

@media all and (max-width: 550px) and (orientation: portrait) {
    #profile_image {
        position: relative;
        width: 12em;
        height: auto; /* Maintient le ratio de l'image tout en changeant la largeur */
        left: 50%;
        transform: translateX(-50%);
        margin-top: 20%;
    }
    
    .circle {
        top: 0;
        width: 12em;
        height: 12em;
        background-color: rgba(255, 0, 0, 0);
        border-radius: 50%;
        position: absolute; 
        left: 50%;
        transform: translateX(-50%);
        margin-top: 20%;
        margin-bottom: 0;
        z-index: 2;
        box-shadow: 0px 0px 8px #2c2c2c;
    }
    
    .circle_transi {
        width: 12em;
        height: 12em;
        background-color: #fff; 
        opacity: 0;
        border-radius: 50%;
        position: absolute; 
        left: 0; 
        margin-top: 20%;
        z-index: 4;
        transition: opacity 0.3s ease; /* Transition douce */
        display: flex;
        justify-content: center;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .circle_transi:hover {
        opacity: 0.85; /* Opacité maximale */
    }
    
    .circle-text {
        color: rgb(7, 7, 7);
        font-size: 12px;
        position: absolute; /* Pour le centrer à l'intérieur du cercle */
        text-align: center;
    }
    
    #pb {
        position: absolute;
        top: 3%;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        font-size: 3em;
        color:rgb(255, 255, 255);
    }
    
    #subtitle {
        position: relative;
        margin-bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        font-size: 2em;
        color:rgb(255, 255, 255);
    }

    .section_1 * {
        position: relative;
        align-items: center;
        z-index: 3; /* Assure que le contenu (texte, boutons, etc.) est au-dessus de l'overlay */
    } 
}

/* #####################   SECTION 2 - grands écrans ####################### */
#gallery_title {
    color: #33364a;
    background-color: #eeeeee; 
    margin-top: 1em; 
    margin-bottom: 1em;  
}

.section_2 {
    position: relative;
    background-color:#ffffff;
    color: #060606;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section_2::before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0); /* Overlay noir semi-transparent */
    z-index: 2; /* Assure que l'overlay est par-dessus l'image */
    box-shadow: 0px 2px 8px #2c2c2c;
}

.section_2 a img {
    width: 22em;
    height: auto;
    align-items: center;
    margin-top: 1em;
    margin-left: 4em;
    margin-bottom: 4em;
    box-shadow:  0px 0px 8px #5e5e5e;
}

.pswp__custom-caption button {
    color: #1a0dab;
}

.pswp__custom-caption {
    background: rgba(255, 240, 164, 0.9);
    font-size: 16px;
    color: #000000;
    width: calc(100% - 32px);
    max-width: 300px;
    padding: 2px 8px;
    border-radius: 4px;
    position: absolute;
    left: 85%;
    bottom: 16px;
    transform: translateX(-50%);
    box-shadow:  0px 0px 8px #2c2c2c;
  }

  .pswp__custom-caption a {
    color: #fff;
    text-decoration: underline;
  }
  .hidden-caption-content {
    display: none;
  }

#click {
    position:absolute;
    width: 100px;
    top: 5em;
    left:12.5em;
    z-index: 2;
   
}

#click_txt{
    position:absolute;
    text-align: center;
    font-size: 20px;
    top: 3em;
    left:4em;
}

/* #####################   SECTION 2 - écrans < 1300 px ####################### */

@media all and (max-width: 1300px) {
    .section_2 a img {
        width: 300px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 4em;
        margin-bottom: 4em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }
}

/* #####################   SECTION 2 - écrans < 1100 px ####################### */

@media all and (max-width: 1100px) {
    .section_2 a img {
        width: 250px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 4em;
        margin-bottom: 4em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }
}

/* #####################   SECTION 2 - écrans < 1000 px ####################### */

@media all and (max-width: 1000px) {
    #click {
        position:absolute;
        width: 60px;
        top: 5.5em;
        left:11.5em;
        z-index: 2;
        transform: rotate(35deg);
       
    }

    .pswp__custom-caption {
        background: rgba(255, 240, 164, 0.9);
        font-size: 16px;
        color: #000000;
        width: calc(100% - 32px);
        max-width: 300px;
        padding: 2px 8px;
        border-radius: 4px;
        position: absolute;
        left: 80%;
        bottom: 16px;
        transform: translateX(-50%);
        box-shadow:  0px 0px 8px #2c2c2c;
      }
}

/* #####################   SECTION 2 - écrans < 950 px ####################### */

@media all and (max-width: 950px) {
    .section_2 a img {
        width: 200px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 4em;
        margin-bottom: 4em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }

    #click {
        position:absolute;
        width: 60px;
        top: 5.5em;
        left: 9.5em;
        z-index: 2;
        transform: rotate(15deg);
       
    }

    #click_txt{
        position:absolute;
        text-align: center;
        font-size: 15px;
        top: 5em;
        left:5em;
    }
}

/* #####################   SECTION 2 - écrans < 850 px ####################### */

@media all and (max-width: 850px) {
    #click {
        position:absolute;
        width: 60px;
        top: 5.7em;
        left: 7em;
        z-index: 2;
        transform: rotate(15deg);
       
    }

    #click_txt{
        position:absolute;
        text-align: center;
        font-size: 15px;
        top: 5.2em;
        left:2.5em;
    }
}

/* #####################   SECTION 2 - écrans < 800 px ####################### */
@media all and (max-width: 800px) {
    .section_2 a img {
        width: 200px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 2em;
        margin-bottom: 2em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }
}

/* #####################   SECTION 2 - écrans < 760 px ####################### */
@media all and (max-width: 760px) {
    #click {
      display: none;
       
    }

    #click_txt{
    display: none;
    }

    .pswp__custom-caption {
        background: rgba(255, 240, 164, 0.9);
        font-size: 16px;
        color: #000000;
        width: calc(100% - 32px);
        max-width: 300px;
        padding: 2px 8px;
        border-radius: 4px;
        position: absolute;
        left: 75%;
        bottom: 16px;
        transform: translateX(-50%);
        box-shadow:  0px 0px 8px #2c2c2c;
      }
}

/* #####################   SECTION 2 - écrans < 705 px ####################### */
@media all and (max-width: 705px) {
    .section_2 a img {
        width: 200px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 5em;
        margin-bottom: 2em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }
}

/* #####################   SECTION 2 - écrans < 615 px ####################### */
@media all and (max-width: 615px) {
.pswp__custom-caption {
    background: rgba(255, 240, 164, 0.9);
    font-size: 16px;
    color: #000000;
    width: calc(100% - 32px);
    max-width: 300px;
    padding: 2px 8px;
    border-radius: 4px;
    position: absolute;
    left: 70%;
    bottom: 16px;
    transform: translateX(-50%);
    box-shadow:  0px 0px 8px #2c2c2c;
  }
}
/* #####################   SECTION 2 - écrans < 580 px ####################### */

@media all and (max-width: 580px) {
    .section_2 a img {
        width: 200px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 2em;
        margin-bottom: 2em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }
}

/* #####################   SECTION 2 - écrans < 500 px ####################### */

@media all and (max-width: 500px) {
    .section_2 a img {
        width: 200px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 1em;
        margin-bottom: 2em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }

    #gallery_title {
        color: #33364a;
        background-color: #eeeeee; 
        margin-top: 1em; 
        margin-bottom: 1em; 
        font-size: 30px; 
    }
    .pswp__custom-caption {
        background: rgba(255, 240, 164, 0.9);
        font-size: 16px;
        color: #000000;
        width: calc(100% - 32px);
        max-width: 300px;
        padding: 2px 8px;
        border-radius: 4px;
        position: absolute;
        left: 65%;
        bottom: 16px;
        transform: translateX(-50%);
        box-shadow:  0px 0px 8px #2c2c2c;
      }
}

/* #####################   SECTION 2 - écrans < 450 px ####################### */

@media all and (max-width: 450px) {
    .section_2 a img {
        width: 200px;
        height: auto;
        align-items: center;
        margin-top: 1em;
        margin-left: 6em;
        margin-bottom: 2em;
        box-shadow:  0px 0px 8px #5e5e5e;
    }

    #gallery_title {
        color: #33364a;
        background-color: #eeeeee; 
        margin-top: 1em; 
        margin-bottom: 1em; 
        font-size: 25px; 
    }

    .pswp__custom-caption {
        background: rgba(255, 240, 164, 0.9);
        font-size: 16px;
        color: #000000;
        width: calc(100% - 32px);
        max-width: 300px;
        padding: 2px 8px;
        border-radius: 4px;
        position: absolute;
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
        box-shadow:  0px 0px 8px #2c2c2c;
      }
}

/* #####################   SECTION 3 ####################### */

.section_3 {
    position: relative;
    background-color:#33364a;
    color: #060606;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section_3 #gallery_title {
    color: #33364a;
    background-color: #eeeeee; 
    margin-top: 1em; 
    margin-bottom: 1em;    
}

#sm {
    margin-bottom: 2em;
}