@font-face {
  font-family: dahlia;
  src: url(../../assets/fonts/Dahlia-Medium.otf);
}

@font-face {
  font-family: maaxReg;
  src: url(../../assets/fonts/Maax\ -\ Regular-205TF.otf);
}

@font-face {
  font-family: maaxBold;
  src: url(../../assets/fonts/Maax\ -\ Bold-205TF.otf);
}

:root {
  --global-color-odyssee: #966b46;
  --odysse-lightSand-color: #e6dfd7;
  --global-blue-text: #0051ff;
  --global-textBlock-color: #644023;

  --global-atreo-title: #db4e16;
  --global-atreo-blue: #8fd7fd;

  --global-artistes-color: #dd6808;

  --global-txtBlock-margin: 4vw;
  --global-h1: 3vw;
  --global-paratxt-size: .8vw;

  --header-height: 9vh;

}


/*
                 _             _ _   
_ __   ___  _ __| |_ _ __ __ _(_) |_ 
| '_ \ / _ \| '__| __| '__/ _` | | __|
| |_) | (_) | |  | |_| | | (_| | | |_ 
| .__/ \___/|_|   \__|_|  \__,_|_|\__|
|_|                                   
En mode portrait sur global.html on a juste besoin d'afficher le popup d'orientation au premier plan
et toujours lorsque l'appareil est en mode portrait
*/
@media all and (max-device-width: 480px){
  html,
  body {
    /* opacity: .5; */
  }

  /* Display change orientation popup */
  .mobile-device-orientation {
    /* display: block;
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: 99999; */
  }
}

/* Styles for portrait orientation */
/* En partant du principe que aucun desktop n'est en mode portrait, cette règle devrait suffire */
@media screen and (orientation: portrait) {

  html,
  body {
    /* opacity: .5; */
  }
/* Display change orientation popup */
  .mobile-device-orientation {
    position: absolute;
    display: block;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background-color: white;
    background-image: url(../../assets/FONDSDÉGRADÉ/DÉGRADÉ_NEUTRE/07.jpg);
    background-repeat: no-repeat;
    background-position: left;
  }

  .mobile-device-orientation>h1 {
    right: 8vw;
    position: absolute;
    font-size: 7vw;
    font-family: dahlia;
    color: white;
  }

  .mobile-device-orientation>h1>a {
    text-decoration: none;
    /* color: #644023; */
    color: white;
  }

  .mobile-device-orientation>h2 {
    /* margin: 50% 50%; */
    position: absolute;
    /* translate: -50% 0%; */
    text-align: center;
    font-family: maaxReg;
    /* color: var(--global-textBlock-color); */
    color: white;
    width: 100%;
    bottom: 9vh;
    font-size: 5.5vw;
  }

  .mobile-device-orientation>img {
    width: 25vw;
    position: absolute;
    margin: 50% 50%;
    translate: -50% 100%;
  }
}

/*
 _                    _                          
| |    __ _ _ __   __| |___  ___ __ _ _ __   ___ 
| |   / _` | '_ \ / _` / __|/ __/ _` | '_ \ / _ \
| |__| (_| | | | | (_| \__ \ (_| (_| | |_) |  __/
|_____\__,_|_| |_|\__,_|___/\___\__,_| .__/ \___|
                                     |_|         
*/
/* CES DEUX REGLES FONCTIONNENT FOCNTIONNENT ENSEMBLE POUR IPHONE 11 ET FP3*/
/* Styles for landscape orientation */
/*si on ajoute (-webkit-device-pixel-ratio:2)*/
@media only screen and (max-height: 575.98px)  and (orientation: landscape) and (pointer: coarse){

  /* the right way to targeting mobile in landscape mode*/
  html {
    height: 100vh;
    overflow-y: hidden;
    /* background-color: aqua; */
  }
  body{
    overflow-y: hidden;
  }
  .cms-sections-wrapper{overflow-y: hidden;}
  .cms-scroller{overflow-y: hidden;}
  .menuHeader {
    display: none;
  }

  .mobile-menu-cta {
    display: block;
    position: fixed;
    top: 2vh;
    right: 1vw;
    z-index: 99;
    cursor: pointer;
  }

  .mobile-menu-cta>button {
    background-color: transparent;
    border: none;
    font-size: 5vw;
    border-color: var(--global-blue-text);
    color: var(--global-blue-text);
  }

  .mobileCta-active {
    transform: rotate(45deg);
  }

  .mobile-menuHeader {
    position: fixed;
    width: 35vw;
    background-color: white;
    height: 100vh;
    right: -100vh;
    z-index: 98;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    text-align: center;
    color: var(--global-color-odyssee);
  }

  .mobile-menuHeader-active {
    right: 0vw;
  }

  .mobile-menuHeader>.first,
  .second,
  .third,
  .quatre,
  .contact {
    font-family: maaxReg;
    align-self: center;
    text-decoration: none;
    color: var(--global-textBlock-color);
    font-size: 1.5vw;
    cursor: pointer;
  }

  .mobile-menuHeader>.first {
    grid-row: 2/3;
    color: var(--global-color-odyssee);
  }

  .mobile-menuHeader>.second {
    grid-row: 3/4;
  }

  .mobile-menuHeader>.third {
    grid-row: 4/5;
  }

  .mobile-menuHeader>.quatre {
    grid-row: 5/6;
  }

  .mobile-menuHeader>.contact {
    grid-row: 6/7;
  }

  .mobile-menuHeader>.home {
    font-family: dahlia;
    grid-column: 1/2;
    align-self: center;
    text-decoration: none;
    color: var(--global-textBlock-color);
    font-size: 2vw;
  }

  .mobile-device-orientation {
    display: none;
  }
/* - - - */
  .cms-sections-wrapper {
    height: 100vh;
    background-color: white;
  }
  .is-content-6-container>.is-img-overlay-3>img{
    margin-top: -10vh;
  }
  .is-inside-img>.is-img-overlay-1{
    top: 0;
  }
  .is-content-4-container>.over-group>.img-overlay>img{
    height: 60vh;
  }
  .is-content-2>.is-content-2-container>.img-fullContent {
    height: 100vh;
  }

  .is-content-1-artiste.is-start>.artiste-one>.title-wrap>p.atreo-blue {
    font-size: 1.5vw;
  }

  .start-chap>.title-wrap>.is-chap.artistes {
    font-size: 3vw;
  }

  h2.is-under-chap.artistes {
    font-size: 1vw;
  }
  .four{
    padding-top: 0;
  }

  .drawing {
    top: 12vh;
    margin-left: -9vw;
  }

  .drawing>img {
    height: 61vh;
    margin-left: -10vw;
  }

  #artistes_img1 {
    object-position: 0;
  }

  .three>.is-citation {
    color: var(--global-textBlock-color);
    font-size: 1.3vw;
    padding-bottom: 20vh;
  }
  .start-chap .one > .text-wrap{
    padding-top: 0;
  }

  .is-content-3-atreo-container>.is-content>.img-content>.this>.is-img>img {
    max-height: 55vh;
  }

  .is-content-5-container{ top: 0;}
  .is-content-5-container>.is-txt-content>p {
    color: var(--global-blue-text) !important;
  }

  .eight {
    opacity: 1 !important;
  }

  .atreo_two>figure>img {
    width: 15vw;
  }

  .atreo_two>figure {
    margin-left: 46vw;
  }

  .img-inside-holder>img {
    height: 100vh;
  }

  #logoAtreo {
    width: 5%;
  }

  .atreo_two {
    margin-bottom: 19vh;
    justify-content: flex-end;
  }
  .atreo_two > figure{bottom:14vh;}
  .is-content-2 > .is-content-2-container > .img-fullContent {
    height: 85vh;
  }
  .nine {
    overflow-y: scroll;
    margin-top: 0;
    /* margin-bottom: 19vh; */
  }
.ten{padding-top: 0; margin-top: -4vh;}
  .six {
    overflow-y: scroll;
    margin-top: 0;
    /* margin-bottom: 15vh; */
  }

  .six>.is-txt-content {
    margin-top: 24vh;
  }

  .is-content-5-container>img {
    height: 100vh;
  }

  .is-inside-img>.is-img-overlay-1 {
    height: 59vh;
  }

  .is-img-overlay-2>img {
    width: 32vw;
    height: 30vh;
  }
  footer{
    z-index: 9;
  }
  .start-chap .one{
    background-color: #dd6808;
  }
}

@media only screen and (max-device-width: 480px) and (orientation: landscape){
  html {
    height: 100vh;
    overflow-y: hidden;
  }
  body{
    overflow-y: hidden;
  }
  .cms-sections-wrapper{overflow-y: hidden;}
  .cms-scroller{overflow-y: hidden;}
  
}


/* CONTACT CSS*/

@media only screen and (max-height: 575.98px) and (orientation: landscape) {

  /* the right way to targeting mobile in landscape mode*/
  .mobile-device-orientation {
    display: none;
  }

  html{
    overflow-y: hidden;
  }
  body{
    overflow-y: hidden;
  }
  .cms-sections-wrapper{overflow-y: hidden;}
  .cms-scroller{overflow-y: hidden;}
  
  .is-content-contact-container{
    /* background-size: contain; */
  }

  .formulaire form {
    max-width: 30vw;
    align-self: end;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 10vw;
    /* margin-top:-4vh; */
  }

  .formulaire form .form-row {
    margin: 1vh 0;
    padding-right: 3vw;
  }

  .formulaire>form>.form-row:nth-child(1) {
    padding-top: 0;
  }

  .contactWrapper>.formulaire>form>.accroche {
    font-size: 2vw;
  }

  form .form-row .input-data {
    height: 4vh;
  }

  .input-data input {
    font-size: 2vw;
  }

  form .form-row .textarea {
    height: 7vh;
  }

  .input-data input,
  .textarea textarea {
    font-size: 1.3vw;
  }

  .textarea textarea {
    padding-top: 0;
  }

  input#autorise {
    width: 1.3vw;
  }

  .input-data label#autorise {
    font-size: .8vw;
  }

  .submit-btn .input-data input {
    font-size: 1vw;
  }

  .submit-btn .input-data {
    overflow: hidden;
    height: 6vh !important;
    width: 9vw !important;
  }
  .formulaire form .form-row .submit-btn > .input-data{
    padding-top: 10vh;
  }
}

