/* @charset utf-8;*/ 

/* Les Berges Houlippe - Orléans */
:root{
  --ratio:  0.07142858em;/* ratio calculé/évalué grace au naviguateur => valeur ajusté pour que pour 1920 de lar, la typo ait un rendu de 14px */
  --fs:  calc(100vw * 14 / 1920);
  --themeBgColor:  #ffffff;
  --themeColor:  #333333;
  --sceneHeight: 560;
  --sceneWidth: 541;
  --scenePaddingLR:10;
  --formColor: #333333;
  --formBgColor: transparent;
  --fontFamily: sans-serif;
}
/*@media (max-width: 1600px) {
  :root{
    --fs:  calc(100vw * 14 / 1500);
  }
}
@media (max-width: 1024px) {
  :root{
    --fs:  calc(100vw * 14 / 768);
    --sceneWidth: 768;
    --scenePaddingLR: 10;
  }
}/**/
@media (max-width: 480px) {
  :root{
    --fs:  calc(100vw * 14 / 320);
    --sceneWidth: 320;
    --sceneHeight: 525;
    --scenePaddingLR: 18;
  }
}
/**/
body{
  font-family: sans-serif;
  background-color:var(--themeBgColor);
  color:var(--themeColor);
  padding:0;
  margin:0;
  max-width: 100%;
  font-size: var(--fs);
}/**/
a{
  color:var(--themeColor);
}
*{ box-sizing: border-box; }

/* DEFINITION DE LA CLASSE MIDDLE-BOX : cette classe permet de center horizontalement et verticalement un conteneur enfant unique (important) - ex : <div class="middle-box"><div> ... contenu centré verticalement </div> */
.middle-box{
  text-align:center;
  min-height: 100%;
  height: 100%;
  white-space: nowrap;
  font-size: 0;
}
body > .middle-box{
  height: 100vh;
}
.middle-box > * {
  font-size: var(--fs);
  display:inline-block;
  vertical-align:middle;
  max-width:100%;
  white-space: normal;
  max-width: 100%;
}
.middle-box-scene > * {
  width: calc(var(--sceneWidth) * var(--ratio));
}
.middle-box.login > * {
  min-width: calc(450 * var(--ratio));
}
.middle-box > * .message{
  font-size: 2.8em;
}
.middle-box > * .other {
  max-width: calc(var(--sceneWidth) * var(--ratio));
}
.middle-box > * .other p{
  margin-top:2em;
  font-size: calc(18 * var(--ratio));
}
@media (max-width: 320px) {
  .middle-box .content .message{
        font-size: 1.8em;
    }
    .middle-box .content .other{
        margin-top:1.5em;
        font-size:1em;
    }
}
.middle-box:before{
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.middle-box:after{
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}

/* "SCENE QUI TOURNENT" QUI CONTIENT LES 2 BLOCS (ex : FORMULAIRE/MESSAGES) */
.scene h1,.scene h2,.scene h3{
  margin: 0;
}
.scene h1{
  font-size: calc(44 * var(--ratio));
}
.scene h2{
  font-size: calc(38 * var(--ratio));
  font-weight: 400;
}
.scene p, .scene span, .scene a{
  font-size:calc(20 * var(--ratio));
}
.scene span > * , .scene a > * ,.scene p > *{ font-size:1em; }
.scene label{
  font-size:calc(16 * var(--ratio));
}

.scene {
  width: calc(var(--sceneWidth) * var(--ratio));
  max-width: 100%;
  height: calc(var(--sceneHeight) * var(--ratio));
  perspective: calc(var(--sceneWidth) * var(--ratio));
  margin: 0 auto;
}
@media (max-width: 480px) {
    .scene {
        margin: 0 auto calc(20 * var(--ratio));
    }
}
#scene-login{
  height: calc(195 * var(--ratio));
}
.object {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.object-face {
  position: absolute;
  width: calc(var(--sceneWidth) * var(--ratio));
  max-width: 100%;
  /*width: calc(359 +  * var(--ratio));*/
  height: calc(var(--sceneHeight) * var(--ratio));
  transition: transform 0.75s cubic-bezier(0.68,-0.35, 0.6, 0.75), opacity 0.75s cubic-bezier(0.68,-0.35, 0.6, 0.75);
  padding: 0 calc(var(--scenePaddingLR) * var(--ratio));
  margin:0 auto;
}
#scene-login .object-face{
  height: calc(195 * var(--ratio));
}
.object-face:first-child  { 
  transform: rotateY(  0deg) /*scale(1)*/; 
  opacity: 1;
  z-index: 2;
}
.object-face:last-child {
  transform: rotateY( -180deg);  
  opacity: 0;
  background-color: rgba(255,255,255,0.2);
  z-index: 3;
}
.object.active .object-face:first-child { transform: rotateY(  180deg) /*scale(0)*/;  opacity: 0;}
.object.active .object-face:last-child  { transform: rotateY( 0deg);  opacity: 1;}
.object:not(.active) .object-face:last-child{ z-index: 1; visibility:hidden; }
.object.active.prepared-init .object-face{
  transition:none;
}
.object.active.prepared .object-face:first-child { transform: rotateY(-180deg) /*scale(0)*/;  opacity: 0;}
.object.active.back .object-face:first-child { transform: rotateY(0deg) /*scale(0)*/;  opacity: 1;}
.object.active.back .object-face:last-child  { transform: rotateY(180deg);  opacity: 0;}
.object-face.hidden { visibility: hidden; }

/* FORMULAIRES */
form > div + div{
  margin: calc(20 * var(--ratio)) 0 0 0;
}
fieldset{
  border: none;
  padding: 0.9375vw;
  position: relative;
}
.cta, input[type=submit]{
  cursor:pointer;
  text-transform: uppercase;
  font-weight: 500;
  user-select : none;
}
.cta, input[type=text],input[type=submit], input[type=tel], input[type=password], input[type=email], select{
  color: var(--formColor);
  background-color: var(--formBgColor);
  border: calc(2 * var(--ratio)) solid #7B7979;
  font-family: var(--fontFamily);
  line-height: calc(39 * var(--ratio));
  letter-spacing: calc(0.4 * var(--ratio));
  height: calc(39 * var(--ratio));
  font-weight: 300;
  font-size:calc(16 * var(--ratio));
  padding:0 0.8em;
  width: 100%;
}

input[readonly="readonly"]{
  background-color: #f1f1f1;
  user-select : none;
}
textarea{
  color: var(--formColor);
  background-color: var(--formBgColor);
  border: calc(2 * var(--ratio)) solid #7B7979;
  font-family: var(--fontFamily);
  line-height: calc(20 * var(--ratio));
  letter-spacing: calc(0.4 * var(--ratio));
  font-weight: 300;
  font-size:calc(16 * var(--ratio));
  padding:0.5em 0.8em;
  width: 100%;
}

.cta{
  width: auto;
  display: inline-block;
  text-decoration: none;
}
.cta, input[type=submit]{
  color: #ffffff;
  background-color: #025E55;
  font-weight: 600;
  border: none;
}
.cta:hover{
  opacity: 0.7;
}
.forget{
  margin: 0.4em 0 2em 0;
  padding:0 0.4em;
  text-align: right;
}
.forget a{
  font-size:calc(14 * var(--ratio));
  color:var(--themeColor);
}
label[for]{cursor: pointer;}
input::-webkit-input-placeholder{
  color: #333;
}
input:-ms-input-placeholder{
  color: #333;
}
input::placeholder{
  color: #333;
}
input[type=radio],input[type=checkbox]{
  cursor: pointer;
  margin-left: 1em
}

/* SELECT STYLING */
select {
  display: block;
  color: var(--formColor);
  cursor: pointer;
  line-height: 1.0;
  width: 100%;
  max-width: 100%; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position: right 1em top 50%, 0 0;
  background-size: .65em auto, 100%;
}
select::-ms-expand {    display: none;	}
select:hover {    border-color: var(--formColor);	}
select:focus {
  border-color: var(--formColor);
  color: #000000; 
  outline: none;
}
select option {    font-weight:normal;	}
/* End Of.. SELECT STYLING*/

/* Style de checkbox et radio */
input[type="checkbox"]:checked + span {/* <-- Style its checked state */
  background: white;
  -webkit-box-shadow:inset 0px 0px 0px 2px var(--themeBgColor);
  box-shadow:inset 0px 0px 0px 2px var(--themeBgColor);
}
[type=radio] + span{
  cursor:pointer;
  display: inline-block;
  margin-left: 1.5em;
  margin-bottom: 0.6em;
  border-radius: 50%;
}
[type=radio]:checked + span {/* <-- Style its checked state */
  background: white;
  -webkit-box-shadow:inset 0px 0px 0px 2px var(--themeBgColor);
  box-shadow:inset 0px 0px 0px 2px var(--themeBgColor);
}


/* Style marges / positions spécifiques conteneurs texte + radio d'un formulaire du théme courant */
.form-content {
  text-align: left;
  margin: 0;
}
.object-face{
  /*background-color: red;/**/
}
form{
  /*background-color: #fff;/**/
  max-width: calc(372 * var(--ratio));
  margin: 0 auto;
}
.form-content p, 
.form-content label,
.form-content input {
  margin: 0;
  font-size:calc(16 * var(--ratio));
  letter-spacing: calc(0.4 * var(--ratio));
  font-weight: 300;
  vertical-align: middle;
}

.form-content p + p {
  margin: 0;
}
.form-content {
  padding: 0; 
}
.form-content .title{
  line-height: calc(20 * var(--ratio)); 
  margin: 0; 
}
.form-content input{
  height: calc(15 * var(--ratio));
  width: calc(15 * var(--ratio));
  margin: 0 calc(5 * var(--ratio)) 0 0;
}
.form-content input + label {
  display: inline-block;
  vertical-align: middle;
}
.form-content input[type=checkbox] + label {
  display: inline;
  margin: 0;
}
.form-content input[type=radio] + label {
  width: 20%;
}
.form-content input + label {
  margin: 0 calc(3 * 8 * var(--ratio)) 0 0;
}
.form-question {
  padding-top:calc(16 * var(--ratio));
}
.form-mention {
  padding-top:calc(13 * var(--ratio));
}
.form-question .title {
  margin: 0 0 calc(3 * var(--ratio)) 0;
}
.form-mention .title {
  margin: 0;
}
.form-mention .text {
  font-size:calc(13 * var(--ratio));
  margin: 0 0 calc(6 * var(--ratio)) 0;
}
/*#optin_2,#optin_2 + label{
  display: none;
}/* A REACTIVER POUR RGPD OU SUPPRIMER LE OUI DANS LE FORMULAIRE */
.form-mention-required{
  padding:0 calc(5 * var(--ratio));
  line-height: calc(23 * var(--ratio)); 
}
.form-mention-required p{
  font-size:calc(11 * var(--ratio));
  color: #3D3837;
}
.form-submit {
  margin: 0;
  padding-top:calc(23 * var(--ratio));
}

/* PAGE AUTH UTILISATEUR */
.account > .middle-box > * { 
  width: 100%; 
}
.account .left > .middle-box > * { 
  width: 100%; 
  max-width: calc(680 * var(--ratio));
}
.account .layout {
  display: flex;
  width:100%;
  height: 100vh;
}
.account .layout .left{
  background-color: #f1f1f1;
  width: calc(100% - 542  *  var(--ratio));
}
.account .layout .right{
  background-color: #ffffff;
  width: calc(542  *  var(--ratio));
}
.account .middle-box > div > .title{
  text-align: left;
  width: calc(220 / 1.1 * var(--ratio));
  max-width: 100%;
  margin:0 auto calc(18 * var(--ratio));
  display: block;
}
.account .layout img{
  width:auto;
  height:auto;
  max-width:100%;
}
@media (max-width: 1024px) {
  .account .layout {
    height:auto;
    flex-direction: column;
    justify-content: flex-start;
  }
  .account > .middle-box > * { vertical-align: top; }
  .account .layout .left{
    height:inherit;
    justify-content: center;
    width: 100%;
  }
  .account .layout .right{
    padding: calc(91  *  var(--ratio)) 0 0 0;
    width: 100%;
  }
}
.account .auth-list{
  padding: 2em 3em;
  background-color: #ffffff;
  color: var(--themeColor);
  list-style: none;
  text-align: left;
  margin: 1em auto;
}
.account p.auth-list  {
  font-size: calc(16 * var(--ratio));
}
.account .auth-list li span:first-child:after{
  content:"";
  margin: 0 0.5em 0 0;
}
.account .auth-list li span.list-item:after{
  content:":";
  margin: 0 0.5em 0 0.3em;
}
.account .auth-list li span.list-item{
  font-weight: 300;
}
.account .auth-list li + li, .auth-list li ul li{
  margin: 0.7em 0 0 0;
}
.account .auth-list li span {
  font-size: calc(16 * var(--ratio));
}
@media (max-width: 480px) {
    .form-content p, 
    .form-content label,
    .form-content input,
    .scene label,
    textarea, 
    .cta, 
    input[type=text],
    input[type=submit], 
    input[type=tel],
    input[type=password], 
    input[type=email],
    select{
        font-size:calc(14 * var(--ratio));
    }
    .form-mention .text {
      font-size:calc(12 * var(--ratio));
    }
}@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;300;400;500;600;700;900&display=swap');

:root{ 
  --themeBgColor:  #ffffff;
  --themeColor:  #000000;
  --formColor: #1C1919;
  --formBgColor: transparent;
  --fontFamily: 'Rubik', sans-serif;
}
body{
  font-family: var(--fontFamily);
}
.layout{
  display: flex;
  width:100%;
  height: 100vh;
  
}
.left{
  background-color: #f1f1f1;
  width: calc(100% - 542  *  var(--ratio));
}
.right{
  background-color: #ffffff;
  width: calc(542  *  var(--ratio));
}
.middle-box .content img{
  width:auto;
  height:auto;
  max-width:100%;
}


@media (max-width: 1024px) {
  .layout{
    height:auto;
    flex-direction: column;
  }
  .left{
    height:36vh;
    justify-content: center;
    width: 100%;
  }
  .right{
    padding: calc(91  *  var(--ratio)) 0 0 0;
    width: 100%;
  }
}