/* app.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');
@font-face {
    font-family: 'Cardenio';
    src: url('webfont/CardenioModern-Bold.eot');
    src: url('webfont/CardenioModern-Bold.eot?#iefix') format('embedded-opentype'),
        url('webfont/CardenioModern-Bold.woff2') format('woff2'),
        url('webfont/CardenioModern-Bold.woff') format('woff'),
        url('webfont/CardenioModern-Bold.svg#CardenioModern-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

#debug{
position:fixed;
bottom:0;
background:#fff;
font-size:14px;
padding:5px 10px;
opacity:0.7;
}

body{
background:#8e8e8e;
margin:0;
font-family:'Montserrat',arial;
font-size:1.3em;
}
#content,
#app{
max-width:640px;
margin:auto;  
background:white;
padding:30px;
text-align:center;
font-size:1em;
padding-bottom:260px;
background:#ffffff url(images/bas-de-page.svg) no-repeat center bottom;
}



h1{
font-family:'Cardenio';
font-size:2.6em;
line-height:1em;
}

#content img{
width:65%;
height:auto;
}

#content .return,
#app .return{
width:90%;
margin:auto;
height:auto;
}
#content .return img,
#app .return img{
width:190px;
display:inline-block;
vertical-align:middle;
z-index:1;
position:relative;
}
#content .return a,
#app .return a{
background:#00839e;
color:white;
text-decoration:none;
padding:20px;
display:inline-block;
width:300px;
text-align:right;
text-transform:uppercase; 
border-radius:10px;
margin-left:-70px;
}

#content form input{
width:90%;
background:#e2e2e2;
border:1px solid #8e8e8e;
border-radius:8px;
padding:10px;
font-size:1em;
text-align:center;
margin-top:10px;
}

#domaineBoxListe p a{
font-weight:400;
color:#00839e;
text-decoration:underline;
cursor:pointer;
}
#domaineBoxListe{
margin-bottom:30px;
display:block;
}
#domaineBoxListe p a:hover{
color:#000;
}
#showDomainesListeBox{
background:#21aec6;
padding:5px 20px;
border-radius:10px;
width:75%;
margin:auto;
color:white;
}

.formfield-select {
position: relative;
}
.formfield-select--container select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%; 
height: auto;
border: 0; 
margin: 0;
padding: .5em 2.5em .5em .5em;
border-radius: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size:1em;
background: #e2e2e2;
}
/*fleche*/
.formfield-select--container::after { 
content: '';
position: absolute;
top: 50%;
margin-top: -6px;
right: .75em;  
display: block; 
width: 0; 
height: 0;
border-color: transparent;
border-top-color: #444; 
border-width: 16px;
border-style: solid;
pointer-events: none;
}

.formfield-select--container {
position: relative; 
border-radius:8px;
overflow: hidden;
background:#e2e2e2;
border:1px solid #8e8e8e;
font-size:1em;
text-align:center;
width:93%;
margin:auto;
}

#content p.inline input{
width:auto;
}
#content p.inline{
margin-bottom:30px;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
padding-left: 2.4rem;
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
display: block;
position: absolute;
box-sizing: border-box;
bottom: 0;
left: 0;
content:'';
width: 1.5rem;
height: 1.5rem; 
border-radius: 2rem;
margin-left:5px;
}
input[type="radio"] + label::before {
border: 1px solid #8e8e8e;
background-color: #e2e2e2;
}
input[type="radio"]:checked + label::after {
background-color: #8e8e8e;
}



#content p input.valider,
#content p input.ulis{
width:40%;
text-transform:uppercase; 
color:white;
border:none;
background:#007894;
padding:1.3rem;
cursor:pointer;
margin:0;
letter-spacing: 0.1rem;
}
#content p input.ulis{background:#6bae25;}
#content p input.valider:hover{background:#21aec6;}
#content p input.ulis:hover{background:#93c01f;}

#app .avenir{
background:url(images/metro.png) repeat-y center center;
}

#app p .parcours-etapes-fin{
font-weight:700;
display:inline-block;
background:url(images/metro-puce.png) no-repeat center center;
width:80%;
}

#app .avenir::before{
content:"";
display:block;
height:35px;
background:url(images/metro-puce.png) no-repeat center center;
}
#app .avenir::after{
content:"";
display:block;
height:35px;
background:url(images/metro-puce.png) no-repeat center center;
}


#content p img,
#app p img{
width:25%;
font-size:1em;
color:#00223b;
}

#content .button.blue a,
#app .button.blue a{
width:60%;
margin:auto;
display:block;
color:white;
border:none;
background:#007894;
padding:1.3rem;
cursor:pointer;
letter-spacing: 0.1rem;
border-radius:10px;
text-decoration:none;
margin-top:60px;
}
#content .button.blue a:hover,
#app .button.blue a:hover{background:#21aec6;}

#content strong,
#app strong,
#app .color{
color:#00839e;
}

#app ul{
list-style-type:none;
margin:0;
padding:0;
width:85%;
margin:auto;
cursor:pointer;
}

#app .choices li{
padding:8px;
transition:all ease-in 0.2s;
}
#app .choices li .details{
border:2px solid #444;
width:28px;
height:28px;
display:inline-block;  
border-radius:32px;
vertical-align:middle;
margin-left:10px;
cursor:pointer;
}
#app .choices li .details:hover{
background:#00839e;
color:white;
border:2px solid #00839e;
}
#app .choices li:hover{
background:#e2e2e2;
border-radius:10px;
}
#app .choices li.separation{
height:32px;
margin:0;
padding:0;
}
#app .choices li.separation img{
height:16px;
width:auto;
}
#app .choices li.separation:hover{
background:none;
cursor:default;
}

#popupBox{
top:0;
left:0;
width:100%;
position:fixed;
z-index:998;
width:100%;
height:100%;
text-align:center;
opacity:1;
}
#popupBoxBkg{
width:100%;
position:fixed;
z-index:998;
width:100%;
height:100%;
text-align:center;
opacity:0.3;
background:black;
}

#infosBox{
background:#32b7cb;
opacity:1;
position:fixed;
top: 50%;
transform: perspective(1px) translateY(-50%);
height:auto;
width:70%;
margin:0 calc(15% - 40px);
z-index:999;
padding:40px;
border-radius:20px;
}
#infosBox p{
margin-bottom:0;
}
#infosBox h3{
color:white;
font-weight:400;
display:inline-block;
margin:0;
margin-right:60px;
padding:0;
}
#infosBox .closePopup{
position:absolute;
top:30px;
right:30px;
cursor:pointer;
width:50px;
height:auto;
}

.copyright{
width:90%;
margin:10px auto;
text-align:center;
font-size:14px;
}
.copyright a{
color:#132939;
text-decoration:none;
}
.copyright a:hover{
color:white;
}
    
@media screen and (max-width: 600px) {
body{font-size:0.9em;}

#content,
#app{
max-width:640px;
padding:20px;
font-size:.9em;
padding-bottom:200px;
background:#ffffff url(images/bas-de-page.svg) no-repeat center bottom;
}
#content .return,
#app .return{
width:100%;
}
#content .return img,
#app .return img{
width:120px;
}
#content .return a,
#app .return a{
padding:20px;
width:auto;
border-radius:5px;
margin-left:-50px;
padding-left:60px;
font-size:0.9em;
}
#app .choices li .details{
border:1px solid #444;
width:18px;
height:18px;
border-radius:20px;
margin-left:5px;
}
#app .choices li:hover{
background:#e2e2e2;
border-radius:5px;
}
#app .choices li.separation{
height:12px;
margin:4px 0 5px 0;
}
#app .choices li.separation img{
height:12px;
}  
#infosBox{
margin:0 calc(15% - 20px);
z-index:999;
padding:20px;
border-radius:10px;
}
#infosBox p{
margin-bottom:0;
}
#infosBox h3{
margin-right:40px;
}
#infosBox .closePopup{
top:20px;
right:20px;
width:30px;
} 
#app .avenir{
background:url(images/metro.png) repeat-y center center;
}
#app p .parcours-etapes-fin{
font-weight:600;
background:url(images/metro-puce.png) no-repeat center center;
background-size:contain;
width:90%;
}          
#app .avenir::before{
content:"";
display:block;
height:20px;
background:url(images/metro-puce.png) no-repeat center center;
background-size:contain;
}
#app .avenir::after{
content:"";
display:block;
height:20px;
background:url(images/metro-puce.png) no-repeat center center;
background-size:contain;
}          
.copyright{
font-size:12px;
}         
}