html {
    font-size: 10px;
}

/* Design: Police Body (defaut) */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', 'sans-serif';
}

html,body {
    scroll-behavior: smooth;
}

/* Vidéo (background SiteWEB) */
#FondVideosA {
    z-index: -999;
    position: fixed;
    height: 100%;
}

                   /* Design/Position: (ConteneurtubaNav) */
.tubaNav { 
    z-index: 50;
    position: fixed; 
    width: 50px;
    height: 60px;
    top: 10px;
    left: 52px; 
}
                    /* Design/Position: (ConteneurheliconNav) */
.heliconNav{ 
    z-index: 50;
    position: fixed; 
    width: 50px;
    height: 66px;
    top: 0px;
    left: 8px; 
    transform: rotate(-20deg);
}

                    /* Design/Position: (ConteneurNav) */
                    
/* Design/Position: (ConteneurnavfixeHaut) */
#navfixeHaut {
    z-index: 40;
    position: fixed;
    width: 100%;
    top: 40px;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    width: 8%;
    background-color: linear-gradient(to right, #373737, #c0b283);
    margin-bottom: 5px;
    text-align: center;
    padding-bottom: 18px;
    padding-top: 20px;
    transition: 0.5s;
    border-radius: 20%;
    /* border-top: 2px solid rgb(209, 174, 59);
    border-left: 1px solid rgb(209, 174, 59);
    border-right: 1px solid rgb(209, 174, 59); */
}
ul li:hover {
    background-color: #000000;
    transition: 0.5s;
}
ul li a {
    text-decoration: none;
    color: #117a7e;
    font-size: 20px;
    font-family: 'Kaushan Script';
}
ul li a:hover {
    color: #ffffff;
    
}

/* Design/Position: (ConteneurnavfixeBas) */
#navfixeBas {
    z-index: 30;
    position: fixed;
    width: 5%;
    top: 460px;
    border-radius: 10%;
    left: 3.2rem;
    padding-left: 1rem;
    background: transparent;
    box-shadow: 0 0 0 0 rgb(251, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#navfixeBas ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#navfixeBas ul li {
    width: 10%;
    background-color: linear-gradient(to right, #373737, #c0b283);
    margin-bottom: 5px;
    text-align: center;
    padding-top: 8px;
    transition: 0.5s;
}
#navfixeBas ul li:hover {
    width: 190%;
    background-color: #ffc400;
    padding-top: 8px;
    transition: 0.5s;
}
#navfixeBas ul li a:hover {
    color: tomato;
    font-size: 3rem;
}
#navfixeBas ul li a {
    text-decoration: none;
    color: #117a7e;
    font-size: 20px;
    font-family: 'Kaushan Script';
}

/* Design/Position: (Bouton RechercheWeb) */
.rechercheweb {
    position: fixed;
    z-index: 50;
    height: 8rem;
    width: 8rem;
    top: 37.6rem;
    left: 0.9rem;   
}

/* Design/Position: (Bouton Youtubeweb) */
.youtubeweb {
    position: fixed;
    z-index: 50;
    height: 8rem;
    width: 8rem;
    top: 37.6rem;
    left: 4rem;   
}

/* Design/Position: (ContainerIcôneFlèche) */ 
/* Position: (ContainerIcôneFlèche) */
/* #containerFlexiconfleche {
    width: 100%;
    height: 48rem;
    display: flex;
    align-items: center;
    justify-content: center;
}   */
/* Design: (ContainerflexCardsIcôneFlèche) */
/* .flexCardsiconfleche {
    width: 70rem;
    height: 17rem;
    margin: 2rem;
    transition: all 0.2s ease-in;
} */
/* .Creationsiconfleche {
    position: relative;
} */
/* Design/Position: (Icône Flèche) */
/* .iconfleche {
    position: fixed;
    z-index: 50;
    height: 5rem;
    width: 9rem;
    top: 10.5rem;
    left: 1rem;
} */




/* Design: (Conteneurs du SiteWEB) */
#conteneur {
    width: 1200px; 
    box-shadow: 8px 0px 85px #117a7e;
    margin: auto;
    display: grid;
    grid-template-columns: 1200px;
    grid-gap: 15px;
    grid-template-areas :
    "titragesite"
    "phototheque01"
    "videotheque02"
    "actualites03"
    "creations04"
    "insoliteweb05"
    "footer";
}















                   /* - Conteneur Titrage Site - */

/* Design: (ConteneurTitrageSite) */
titragesite {
    background-image: linear-gradient(to right, #000, transparent);   
    grid-area: titragesite;
    height: 623px ;
    display: flex;  
    box-shadow: 8px 0px 15px #117a7e;
}

/* Design: (Titre: JMP - site web - JMP) */
h1 {
    text-align: center;
    margin: 0;
    color: #117a7e;
    position: relative; 
    top: 10rem;
    left: 35rem; 
    font-family: 'Kaushan Script';   
    font-size: 6rem;
    text-shadow: 0 0 0.2em rgb(8, 3, 44), 0 0 0.2em rgb(0, 0, 0),
                           0 0 0.2em rgb(136, 119, 255);
    box-shadow: 8px 0px 15px #117a7e; 
    height: 95px;
           /* Anim GreenSock */
}

/* Design: ( Sous-Titre: Souvenirs de Visites) */
h2 {
    text-align: center;
    margin: 0;
    color: #0b8488;
    position: relative; 
    top: 40rem;  
    left: -10rem; 
    font-family: 'Arial';  
    font-size: 3rem;
    letter-spacing: 0.2rem;
}

                     /* Design/Position: (ContainerTextedéroulant) */ 

/* Design/Position: (Texte déroulant) */ 
#textederoulant {
    position: relative;
    width: 100%;  
    background-size: cover;
    background-position: center;
}
.cadre {
    position: absolute;
    left: 50%;
    width: 75rem;
    height: 8rem;
    transform: translate(-50%,-50%);
    border-radius: 2px;
    color: rgb(255, 0, 0);
}
.centre {
    position: absolute;
    top: 100%;
    left: 5%;
    right: 0;
    margin-top: -2.25rem;
}
.carousel {
    position: relative;
    width: 100%;
    height: 3.5rem;
    text-align: center;
    line-height: 45px;
}
.carousel .changeHidden {
    position: absolute;
    top: 56rem;
    left: 37rem;
    transform: translate(-50%,-50%);
    margin: auto;
    height: 13rem;
    line-height: 13rem;
    width: 100rem;
    overflow: hidden;
}
.carousel .changeHidden .contenant {
    position: relative;
    animation: carousel 20s ease-in-out infinite;
}
.carousel .changeHidden .element {
    font-weight: 200;
    font-size: 1.8rem;
}
@keyframes carousel {
    0%, 20% {transform: translateY(0);}

    25%, 45% {transform: translateY(-13rem);}

    50%, 70% {transform: translateY(-26rem);}

    75%, 95% {transform: translateY(-39rem);}

    100% {transform: translateY(-52rem);}
}















                   /* - Conteneur Photothèque01 - */
                              
/* Design: (ConteneurPhotothèque01) */
phototheque01 {
    background: transparent;
    grid-area: phototheque01;
    height: 800px;
    display: flex; 
}
/* Design: Logo (Photothèque) */
.Flotte_Nikon_D { 
    position: relative;   
    width: 113px;
    height: 110px;
    top: 2%; 
    left: 5%;     
}  
.Flotte_Nikon_G { 
    position: relative;
    width: 113px;
    height: 110px;
    top: 3%; 
    left: 80%;      
}
 
/* Design: (JMP - Photothèque - JMP) */
.titreJMPPhotothèque {
    text-transform:  uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    top: 3rem;
    left: -6rem;
    font-size: 8rem;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: 0.1rem; 
    box-shadow: 8px 0px 15px #117a7e; 
    height: 95px;
}
.titreJMPPhotothèque strong {
    font-size: 9rem;
    color: #117a7e;
    opacity: 20%;
}
/* Design: (Voyages - Famille - Visites) */
.sousTitreJMPPhotothèque {
    text-align: center;
    margin: 0;
    position: relative;
    font-family: 'Kaushan Script'; 
    color: #df0909;
    top: 1rem; 
    left: -6.5rem; 
    font-size: 3rem; 
}
/* Design: (Retour en) */
.sousTitrePhotothèque01 { 
   text-align: right;
    margin: 0;
    position: relative;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 3rem;
    box-shadow: 8px 0px 15px #117a7e; 
    height: 45px;
    top: 15rem;
    left: -93rem;
}
.sousTitrePhotothèque02 {
    text-align: center;
    margin: 0;
    position: relative;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 3rem;
    box-shadow: 8px 0px 15px #117a7e;
    height: 45px;
    top: 15rem;
    left: -65rem;
}
.sousTitrePhotothèque03 {
    text-align: center;
    margin: 0;
    position: relative;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 3rem;
    box-shadow: 8px 0px 15px #117a7e;
    height: 43px;
    top: 15rem;
    left: -35rem;
}


/* Position: (ContainerFlexPhotothèque) */
#containerFlexPhototheque {
    position: relative;
    background: #f7f7f7;
    opacity: 85%;
    width: 100%;
    height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8rem;
    top: 28rem;
    left: -133rem;
    opacity: 80%;
}
/* Design: (ContainerflexCardsPhotothèque) */
.flexCardsPhototheque {
    position: relative;
    top: 1rem;
    width: 31rem;
    height: 40rem;
    margin: 3rem;
    transition: all 0.2s ease-in;
    border: 5px solid rgb(209, 174, 59);
}
/* Design: (ContainerHEADPhotothèque) */
.headAnnees { 
    background-image: url("../ressources/FondConteneur.png");
    width: 100%;
    height: 40rem;
    text-align: center;
    color: #373737;
}
/* Design: Titrage (ContainerHEADPhotothèque) */
.headAnnees p {
    margin: 0;
    font-size: 2rem;
    line-height: 15rem;
    font-family: 'kaushan script';
}
/* Survol: (flexCardsPhotothèque) */
.flexCardsphototheque:hover {
    color: rgb(0, 0, 0);
    transform: scale(1.15);
}

.photothequeAnnees {
    position: relative;
}
.composition_photothequeAnnees {
    width: 32%;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);
    border-radius: 2px;
    position: absolute;
    z-index: 10;
    transition: all .5s;
    outline-offset: 1rem;
}
/* Position: (composition_photo--1990) */
.composition_photothequeAnnees--1990 {
    margin-left: 0rem;
    top: -25rem;
}
/* Position: (composition_photo--1991) */
.composition_photothequeAnnees--1991 {
    margin-left: 10.5rem;
    top: -25rem;
}
/* Position: (composition_photo--1992) */
.composition_photothequeAnnees--1992 {
    margin-left: 21rem;
    top: -25rem;
}
/* Position: (composition_photo--1993) */
.composition_photothequeAnnees--1993 {
    margin-left: 0rem;
    top: -18rem;
}
/* Position: (composition_photo--1994) */
.composition_photothequeAnnees--1994 {
    margin-left: 10.5rem;
    top: -18rem;
}
/* Position: (composition_photo--1995) */
.composition_photothequeAnnees--1995 {
    margin-left: 21rem;
    top: -18rem;
}
/* Position: (composition_photo--1996) */
.composition_photothequeAnnees--1996 {
    margin-left: 0rem;
    top: -12rem;
}
/* Position: (composition_photo--1997) */
.composition_photothequeAnnees--1997 {
    margin-left: 10.5rem;
    top: -12rem;
}
/* Position: (composition_photo--1998) */
.composition_photothequeAnnees--1998 {
    margin-left: 21rem;
    top: -12rem;
}
/* Position: (composition_photo--1999) */
.composition_photothequeAnnees--1999 {
    margin-left: 10.5rem;
    top: -6rem;
}
/* Position: (composition_photo--2000) */
.composition_photothequeAnnees--2000 {
    margin-left: 0rem;
    top: -25rem;
}
/* Position: (composition_photo--2001) */
.composition_photothequeAnnees--2001 {
    margin-left: 10.5rem;
    top: -25rem;
}
/* Position: (composition_photo--2002) */
.composition_photothequeAnnees--2002 {
    margin-left: 21rem;
    top: -25rem;
}
/* Position: (composition_photo--2003) */
.composition_photothequeAnnees--2003 {
    margin-left: 0rem;
    top: -18rem;
}
/* Position: (composition_photo--2004) */
.composition_photothequeAnnees--2004 {
    margin-left: 10.5rem;
    top: -18rem;
}
/* Position: (composition_photo--2005) */
.composition_photothequeAnnees--2005 {
    margin-left: 21rem;
    top: -18rem;
}
/* Position: (composition_photo--2006) */
.composition_photothequeAnnees--2006 {
    margin-left: 0rem;
    top: -12rem;
}
/* Position: (composition_photo--2007) */
.composition_photothequeAnnees--2007 {
    margin-left: 10.5rem;
    top: -12rem;
}
/* Position: (composition_photo--2008) */
.composition_photothequeAnnees--2008 {
    margin-left: 21rem;
    top: -12rem;
}
/* Position: (composition_photo--2009) */
.composition_photothequeAnnees--2009 {
    margin-left: 10.5rem;
    top: -6rem;
}
/* Position: (composition_photo--2010) */
.composition_photothequeAnnees--2010 {
    margin-left: 0rem;
    top: -25rem;
}
/* Position: (composition_photo--2011) */
.composition_photothequeAnnees--2011 {
    margin-left: 10.5rem;
    top: -25rem;
}
/* Position: (composition_photo--2012) */
.composition_photothequeAnnees--2012 {
    margin-left: 21rem;
    top: -25rem;
}
/* Position: (composition_photo--2013) */
.composition_photothequeAnnees--2013 {
    margin-left: 0rem;
    top: -18rem;
}
/* Position: (composition_photo--2014) */
.composition_photothequeAnnees--2014 {
    margin-left: 10.5rem;
    top: -18rem;
}
/* Position: (composition_photo--2015) */
.composition_photothequeAnnees--2015 {
    margin-left: 21rem;
    top: -18rem;
}
/* Position: (composition_photo--2016) */
.composition_photothequeAnnees--2016 {
    margin-left: 0rem;
    top: -12rem;
}
/* Position: (composition_photo--2017) */
.composition_photothequeAnnees--2017 {
    margin-left: 10.5rem;
    top: -12rem;
}
/* Position: (composition_photo--2018) */
.composition_photothequeAnnees--2018 {
    margin-left: 21rem;
    top: -12rem;
}
/* Position: (composition_photo--2019) */
.composition_photothequeAnnees--2019 {
    margin-left: 10.5rem;
    top: -6rem;
}
/* Position: (composition_photo--2020) */
.composition_photothequeAnnees--2020 {
    margin-left: 0rem;
    top: -25rem;
}
/* Position: (composition_photo--2021) */
.composition_photothequeAnnees--2021 {
    margin-left: 10.5rem;
    top: -25rem;
}
/* Position: (composition_photo--2022) */
.composition_photothequeAnnees--2022 {
    margin-left: 21rem;
    top: -25rem;
}
/* Position: (composition_photo--2023) */
.composition_photothequeAnnees--2023 {
    margin-left: 0rem;
    top: -18rem;
}
/* Position: (composition_photo--2024) */
.composition_photothequeAnnees--2024 {
    margin-left: 10.5rem;
    top: -18rem;
}
/* Position: (composition_photo--2025) */
.composition_photothequeAnnees--2025 {
    margin-left: 21rem;
    top: -18rem;
}
/* Position: (composition_photo--2026) */
.composition_photothequeAnnees--2026 {
    margin-left: 0rem;
    top: -12rem;
}
/* Position: (composition_photo--2027) */
.composition_photothequeAnnees--2027 {
    margin-left: 10.5rem;
    top: -12rem;
}
/* Position: (composition_photo--2028) */
.composition_photothequeAnnees--2028 {
    margin-left: 21rem;
    top: -12rem;
}
/* Position: (composition_photo--2029) */
.composition_photothequeAnnees--2029 {
    margin-left: 10.5rem;
    top: -6rem;
}
/* Survol: (composition_photo--photo) */
.composition_photothequeAnnees:hover {
    outline: 0.2rem solid #ffffff;
    transform: scale(0.5) translateY(-0.5rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
    z-index: 30;
}
.photothequeAnnees:hover .composition_photothequeAnnees:not(:hover) {
    transform: scale(0.95);
}












                   /* - Conteneur Vidéothèque02 - */
                              
/* Design: (ConteneurVidéothèque02) */
videotheque02 {
    background: transparent;
    grid-area: videotheque02;
    height: 800px;
    display: flex; 
}
/* Design: Logo (Vidéothèque) */
.Flotte_HG-HPX371E_D { 
    position: relative;   
    width: 123px;
    height: 120px;
    top: 2%; 
    left: 5%; 
    
}  
.Flotte_HG-HPX371E_G { 
    position: relative;
    width: 123px;
    height: 120px;
    top: 3%;
    left: 78%;  
     }
 
/* Design: (JMP - Vidéothèque - JMP) */
.titreJMPVidéothèque {
    text-transform:  uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    top: 3rem;
    left: -6rem;
    font-size: 8rem;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: 0.1rem; 
    box-shadow: 8px 0px 15px #117a7e; 
    height: 95px;
}
.titreJMPVidéothèque strong {
    font-size: 9rem;
    color: #117a7e;
    opacity: 20%;
}
/* Design: (Voyages - Famille - Visites) */
.sousTitreJMPVidéothèque {
    text-align: center;
    margin: 0;
    position: relative;
    font-family: 'Kaushan Script'; 
    color: #df0909;
    top: 1rem;  
    left: -6.5rem;
    font-size: 3rem; 
}
/* Design: (Retour en) */
.sousTitreVidéothèque01 { 
    text-align: right;
     margin: 0;
     position: relative;
     background-image: linear-gradient(to right, #373737, #c0b283);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     font-size: 3rem;
     box-shadow: 8px 0px 15px #117a7e; 
     height: 45px;
     top: 15rem;
     left: -91rem;
 }
 .sousTitreVidéothèque02 {
     text-align: center;
     margin: 0;
     position: relative;
     background-image: linear-gradient(to right, #373737, #c0b283);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     font-size: 3rem;
     box-shadow: 8px 0px 15px #117a7e;
     height: 45px;
     top: 15rem;
     left: -63rem;
 }
 .sousTitreVidéothèque03 {
     text-align: center;
     margin: 0;
     position: relative;
     background-image: linear-gradient(to right, #373737, #c0b283);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     font-size: 3rem;
     box-shadow: 8px 0px 15px #117a7e;
     height: 43px;
     top: 15rem;
     left: -33rem;
 }

/* Position: (ContainerFlexVidéothèque) */
#containerFlexVidéothèque {
    position: relative;
    background: #f7f7f7;
    opacity: 85%;
    width: 100%;
    height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8rem;
    top: 28rem;
    left: -131.5rem;
    opacity: 80%;
}
/* Design: (ContainerflexCardsVidéothèque) */
.flexCardsVidéothèque {
    position: relative;
    top: 1rem;
    width: 31rem;
    height: 40rem;
    margin: 3rem;
    transition: all 0.2s ease-in;
    border: 5px solid rgb(209, 174, 59);
}















                   /* - Conteneur Actualités03 - */
                              
/* Design: (ConteneurActualités03) */
actualites03 {
    background: transparent;
    grid-area: actualites03;
    height: 700px;
    display: flex;
}
/* Design: Logo (Actualités) */
.Flotte_Actualités_D { 
    position: relative;   
    width: 123px;
    height: 120px;
    top: 5%; 
    left: 9%;    
}  
.Flotte_Actualités_G { 
    position: relative;
    width: 123px;
    height: 120px;
    top: 5%;
    left: 75%;       
}
 
/* Design: (JMP - Actualités - JMP) */
.titreJMPActualités {
    text-transform:  uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    top: 3rem;
    left: 3rem;
    font-size: 8rem;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: 0.1rem; 
    box-shadow: 8px 0px 15px #117a7e; 
    height: 95px;
}
.titreJMPActualités strong {
    font-size: 9rem;
    color: #117a7e;
    opacity: 20%;
}
                     
/* Position/Design: (Mai2021) */
.sousTitreMois {
    position: relative;
    font-family: 'kaushan script';
    color: #117a7e;
    font-size: 6rem;
    line-height: 8rem;
    text-align: center;
    top: 10rem;
    left: -45rem;
    box-shadow: 8px 0px 15px #117a7e;
    width: 35rem;
    height: 9rem;
}

                  /* Position/Design: (BoutonsAnimésActualités) */
.ActualitesAnnees {
    position: relative;
}
.composition_ActualitesAnnees {
    position: absolute;
    width: 58%;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);
    border-radius: 2px; 
    transition: all .5s;
    outline-offset: 1rem;
}
/* Position: (composition_photo--Actu01) */
.composition_ActualitesAnnees--Actu01 {
    height: 20rem;
    width: 20rem;
    top: 33rem;
    left: -90rem;
}
/* Position: (composition_photo--Actu02) */
.composition_ActualitesAnnees--Actu02 {
    height: 20rem;
    width: 20rem;
    top: 33rem;
    left: -66rem;
}
/* Position: (composition_photo--Actu03) */
.composition_ActualitesAnnees--Actu03 {
    height: 20rem;
    width: 20rem;
    top: 33rem;
    left: -42rem;
}
/* Survol: (composition_photo--Actu01) */
.composition_ActualitesAnnees--Actu01:hover {
    z-index: 30;
    /* outline: 0.2rem solid #ffffff; */
    transform: scale(1.5) translateX(16rem) translateY(2.9rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
}
/* Survol: (composition_photo--Actu02) */
.composition_ActualitesAnnees--Actu02:hover {
    /* outline: 0.2rem solid #ffffff; */
    transform: scale(1.4) translateY(1.5rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
}
/* Survol: (composition_photo--Actu03) */
.composition_ActualitesAnnees--Actu03:hover {
    z-index: 30;
    /* outline: 0.2rem solid #ffffff; */
    transform: scale(1.5) translateX(-16rem) translateY(2.9rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
}
.telephone:hover .composition_telephoneicon:not(:hover) {
    transform: scale(1);
}
















                   /* - Conteneur Créations04 - */
                              
/* Design: (ConteneurCréations04) */
creations04 {
    background: transparent;
    grid-area: creations04;
    height: 700px;
    display: flex;
}

/* Design: Logo (Créations) */
.Flotte_Créations_D { 
    position: relative;   
    width: 123px;
    height: 120px;
    top: 5%;
    left: 9%;    
}  
.Flotte_Créations_G { 
    position: relative;
    width: 123px;
    height: 120px;
    top: 5%; 
    left: 75%;     
}
 
/* Design: (JMP - Créations - JMP) */
.titreJMPCréations {
    text-transform:  uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    top: 3rem;
    left: 4rem;
    font-size: 8rem;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: 0.1rem; 
    box-shadow: 8px 0px 15px #117a7e; 
    height: 95px;
}
.titreJMPCréations strong {
    font-size: 9rem;
    color: #117a7e;
    opacity: 20%;
}

                      /* Design/Position: (ContainerFlexLogo-FlexBouton) */

/* Position: (ContainerFlexLogocreations04) */
#containerFlexLogocreations04 {
    position: relative;
    top: 21rem;
    left: -74rem;
}

/* Position: (ContainerFlexBoutonCréa01) JMPanoramiques2017-2020 */
#containerFlexBoutonCrea01 {
    position: relative;
    top: 28rem;
    left: -140rem;
}
/* Position: (ContainerFlexBoutonCréa02) JFLChansons */
#containerFlexBoutonCrea02 {
    position: relative;
    top: 29rem;
    left: -116rem;
}
/* Position: (ContainerFlexBoutonCréa03) PanoramiquesJM2021 */
#containerFlexBoutonCrea03 {
    position: relative;
    top: 31rem;
    left: -156rem;
}
/* Position: (ContainerFlexBoutonCréa04) PanoramiquesJM2022 */
#containerFlexBoutonCrea04 {
    position: relative;
    top: 37rem;
    left: -210rem;
}
/* Position: (ContainerFlexBoutonCréa05) PanoramiquesJM2023 */
#containerFlexBoutonCrea05 {
    position: relative;
    top: 40rem;
    left: -208rem;
}
/* Position: (ContainerFlexBoutonCréa06) PanoramiquesJM2024 */
#containerFlexBoutonCrea06 {
    position: relative;
    top: 39rem;
    left: -205rem;
}
/* Position: (ContainerFlexBoutonCréa07) PanoramiquesJM2025 */
#containerFlexBoutonCrea07 {
    position: relative;
    top: 46rem;
    left: -275rem;
}

                      /* Design/Position (Bouton JMPanoramiques) */
/* Design/Position: (Bouton JMPanoramiques) */
#boutonCrea01  {
    background: transparent;
    font-family: 'Kaushan Script';
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
    height: 9rem;
    width: 22rem; 
    transform: translate(-50%, -50%);
    text-decoration: none;
    border-radius: 50%;  
    box-shadow: 0 0 0 0 rgb(217, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#boutonCrea01 a {
    background-image: linear-gradient(to right, #ff0000, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

                      /* Design/Position (Bouton PageChansonsJFL) */
/* Design/Position: (Bouton PageChansonsJFL) */
#boutonCrea02  {
    background: transparent;
    font-family: 'Kaushan Script';
    font-size: 3rem;
    line-height: 8rem;
    text-align: center;
    height: 9rem;
    width: 18rem; 
    transform: translate(-50%, -50%);
    text-decoration: none;
    border-radius: 50%;  
    box-shadow: 0 0 0 0 rgb(217, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#boutonCrea02 a {
    background-image: linear-gradient(to right, #ff0000, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

                      /* Design/Position (Bouton Panoramiques2021) */
/* Design/Position: (Bouton Panoramiques2021) */
#boutonCrea03  {
    background: transparent;
    font-family: 'Kaushan Script';
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
    height: 8rem;
    width: 22rem; 
    transform: translate(-50%, -50%);
    text-decoration: none;
    border-radius: 50%;  
    box-shadow: 0 0 0 0 rgb(217, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#boutonCrea03 a {
    background-image: linear-gradient(to right, #ff0000, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

                      /* Design/Position (Bouton Panoramiques2022) */
/* Design/Position: (Bouton Panoramiques2022) */
#boutonCrea04  {
    background: transparent;
    font-family: 'Kaushan Script';
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
    height: 8rem;
    width: 22rem; 
    transform: translate(-50%, -50%);
    text-decoration: none;
    border-radius: 50%;  
    box-shadow: 0 0 0 0 rgb(217, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#boutonCrea04 a {
    background-image: linear-gradient(to right, #ff0000, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

                      /* Design/Position (Bouton Panoramiques2023) */
/* Design/Position: (Bouton Panoramiques2023) */
#boutonCrea05  {
    background: transparent;
    font-family: 'Kaushan Script';
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
    height: 8rem;
    width: 22rem; 
    transform: translate(-50%, -50%);
    text-decoration: none;
    border-radius: 50%;  
    box-shadow: 0 0 0 0 rgb(217, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#boutonCrea05 a {
    background-image: linear-gradient(to right, #ff0000, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

                      /* Design/Position (Bouton Panoramiques2024) */
/* Design/Position: (Bouton Panoramiques2024) */
#boutonCrea06  {
    background: transparent;
    font-family: 'Kaushan Script';
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
    height: 8rem;
    width: 22rem; 
    transform: translate(-50%, -50%);
    text-decoration: none;
    border-radius: 50%;  
    box-shadow: 0 0 0 0 rgb(217, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#boutonCrea06 a {
    background-image: linear-gradient(to right, #ff0000, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

                      /* Design/Position (Bouton Panoramiques2025) */
/* Design/Position: (Bouton Panoramiques2025) */
#boutonCrea07  {
    background: transparent;
    font-family: 'Kaushan Script';
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
    height: 8rem;
    width: 22rem; 
    transform: translate(-50%, -50%);
    text-decoration: none;
    border-radius: 50%;  
    box-shadow: 0 0 0 0 rgb(217, 255, 0);
    animation: pulse 1.3s infinite;
}
@keyframes pulse {
    to 
    {
        box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.01);
    }
}
#boutonCrea07 a {
    background-image: linear-gradient(to right, #ff0000, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}








 



 


















                   /* - Conteneur InsoliteWEB05 - */
                              
/* Design: (ConteneurInsoliteWEB05) */
insoliteweb05 {
    display: flex;
    grid-area: insoliteweb05;
    background: transparent;   
    height: 900px;
}
/* Design: (JMP - InsoliteWEB - JMP) */
.titreJMPInsoliteWEB {
    text-transform:  uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    top: 3rem;
    left: 24rem;
    font-size: 8rem;
    background-image: linear-gradient(to right, #373737, #c0b283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: 0.1rem; 
    box-shadow: 8px 0px 15px #117a7e; 
    height: 95px;
}
.titreJMPInsoliteWEB strong {
    font-size: 9rem;
    color: #117a7e;
    opacity: 20%;
}

                   /* Design/Position: (ContainerFlexInsoliteWEB) */
/* Position: (ContainerFlexInsoliteWEB) */
#containerFlexInsoliteWEB05 {
    position: relative;
    background: transparent;
    width: 100%;
    height: 7rem;
    display: flex;
    top: 30rem;
    left: -65rem;   
}
/* Design: (ContainerflexCardsInsoliteWEB) */
.flexCardsInsoliteWEB05 {
    width: 30rem;
    height: 7rem;
    margin: 2rem;
    transition: all 0.2s ease-in;
}
/* Suppression: (bordure container central) */
.flexCardsInsoliteWEB05:nth-child(1) {
    border: 3px solid rgb(209, 174, 59);
}
.flexCardsInsoliteWEB05:nth-child(2) {
    border: none;
}
.flexCardsInsoliteWEB05:nth-child(3) {
    border: 3px solid rgb(209, 174, 59);
}
/* Design: (ContainerHEAD) */
.head {
    width: 100%;
    height:7rem;
    text-align: center;
    color: #373737;
    background: #F0Ead6;
}
/* Design: Titrage (ContainerHEAD) */
.head p {
    margin: 0;
    font-size: 3rem;
    line-height: 7rem;
    font-family: 'Kaushan Script';
}
/* Changement: (Couleur Container central) */
.flexCardsInsoliteWEB05:nth-child(2) .head {
    background: #373737;
    color: #FFD700;
}
.flexCardsInsoliteWEB05:nth-child(2) .contenu {
    background: #373737;
    color: #FFD700;
}
/* Survol: (flexbox) */
.flexCardsInsoliteWEB05:hover {
    transform: scale(1.15) translateY(-0.5rem);
}

                  /* Design: Photos fond (PHOTOS)-(JMP - INSOLITEWEB - JMP) */
.photoinsoliteweb05 {
    position: relative;
}
.composition_photoinsoliteweb05 {
    width: 28%;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);
    border-radius: 2px;
    transition: all .5s;
    outline-offset: 1rem;
}
/* Position: (composition_photo--photo01) */
.composition_photoinsoliteweb05--photo01 {
    margin-left: 11rem;
}
/* Survol: (composition_photo--photo01) */
.composition_photoinsoliteweb05:hover {
    outline: 0.2rem solid #ffffff;
    transform: scale(0.5) translateY(-0.5rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
}
.photoinsoliteweb05:hover .composition_photoinsoliteweb05:not(:hover) {
    transform: scale(0.95);
}

                   /* Design: Videos fond (VIDEOS)-(JMP - INSOLITEWEB - JMP) */
.videoinsoliteweb05 {
    position: relative;
}
.composition_videoinsoliteweb05 {
    width: 28%;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);
    border-radius: 2px;
    transition: all .5s;
    outline-offset: 1rem;
}
/* Position: (composition_video--video01) */
.composition_videoinsoliteweb05--video01 {
    margin-left: 11rem;
    top: -30rem;
}
/* Survol: (composition_vidéo--vidéo01) */
.composition_videoinsoliteweb05:hover {
    outline: 0.2rem solid #ffffff;
    transform: scale(0.5) translateY(-0.5rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
}
.videoinsoliteweb05:hover .composition_videoinsoliteweb05:not(:hover) {
    transform: scale(0.95);
}

                        /* Design: Musiques fond (MUSIQUES)-(JMP - INSOLITEWEB - JMP) */
.musiqueinsoliteweb05 {
    position: relative;
}
.composition_musiqueinsoliteweb05 {
    width: 28%;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);
    border-radius: 2px;
    transition: all .5s;
    outline-offset: 1rem;
}
/* Position: (composition_musique--musique01) */
.composition_musiqueinsoliteweb05--musique01 {
    margin-left: 11rem;
    top: -30rem;
}
/* Survol: (composition_musique--musique01) */
.composition_musiqueinsoliteweb05:hover {
    outline: 0.2rem solid #ffffff;
    transform: scale(0.5) translateY(-0.5rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
}
.musiqueinsoliteweb05:hover .composition_musiqueinsoliteweb05:not(:hover) {
    transform: scale(0.95);
}
















                   /* - Conteneur Footer - */
                              
/* Design: (ConteneurFooter) */
footer {
    background: transparent;
    grid-area: footer;
    height: 110px; 
    display: flex;  
    
/* Design: (Ligne séparatrice) */
    border-top:  1.5px solid rgb(209, 174, 59);
    border-bottom:  4.5px solid rgb(209, 174, 59);
    margin-left: 4.2rem;
    border-radius: 5%;
}

/* Design: (parent.jean-marc@wanadoo.fr) */
.adresseweb {
    text-align: center;
    margin: 0;
    color: rgb(255, 0, 0);
    position: relative;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: 0.1rem;
    top: 9%;
    left: 39%;
    box-shadow: 8px 0px 15px #ffee00;
    height: 3rem;       
}

/* Design: (Logo Mail) */
.composition_mailicon {
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);
    border-radius: 2px;
    position: relative;
    transition: all .5s;
    outline-offset: 1rem;
}
/* Position: (Logo Mail) */
.composition_mailicon--mailicon {
    width: 5rem;
    height: 5rem;
    top: 0rem;
    left: 11rem;
}
/* Survol: (Logo Mail) */
.composition_mailicon:hover {
    outline: 0.2rem solid #ffffff;
    transform: scale(0.5) translateY(-0.5rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
}
/* .mailicon:hover .composition_mailicon:not(:hover) {
    transform: scale(0.95);
} */

/* Design: (Téléphone: 0678247564) */
.telephonenumber {
    text-align: center;
    margin: 0;
    color: rgb(255, 255, 255);
    position: relative;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    top: 6.5rem;
    left: 10%;
}
/* Design: (Logo Téléphone) */
.composition_telephoneicon {
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.4);
    border-radius: 2px;
    position: relative;  
    transition: all .5s;
    outline-offset: 1rem;
}
/* Position: (Logo Téléphone) */
.composition_telephoneicon--telephoneicon {
    left: 7.5%;
    height: 14rem;    
}
/* Design: (Logo Téléphone) */
.composition_telephoneicon {
    width: 15%;
    height: 45%;
    top: 5.5rem;
    left: -2.5rem;
}
/* Survol: (Logo Téléphone) */
.composition_telephoneicon:hover {
    transform: scale(0.50) translateY(-0.5rem);
    box-shadow: 0 0.3rem rem rgba(0,0,0,0.5);
    opacity: 0%;
}
/* Position: (CopyrightMai2021) */
.copyright {
    text-align: center;
    margin: 0;
    color: rgb(255, 255, 255);
    position: relative;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    top: 13rem;
    left: -74%;
    box-shadow: 8px 0px 15px #117a7e;
    height: 3rem;   
}
/* Position: (www.JMP.fr) */
.jmp {
    text-align: center;
    margin: 0;
    color: rgb(255, 255, 255);
    position: relative;
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: 0.1rem;
    top: 13rem;
    left: 12%;
    box-shadow: 8px 0px 15px #117a7e;
    height: 3rem;
}