@charset "utf-8";
/* CSS Document */
html, body { -webkit-text-size-adjust: 100%;text-size-adjust: 100%;}
body { margin:0; background: #FAFAF5; font-family: "Quicksand", Arial, Helvetica, sans-serif; font-size:18px; font-weight: 400;}
body.popuped { overflow: hidden;}
.wrap { margin:3rem;}
.center { margin:3rem auto; max-width: 1080px;}

.colored  { color:#00c1ac;}
a { text-decoration: none;  color:#000; cursor: pointer;    -moz-text-decoration-line: underline;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-decoration-color: #00c1ac;
    text-decoration: none;
}

    a:hover { text-decoration: none;}
h1.logo { overflow: hidden; text-indent: -5000px; height: 1.2em; background: no-repeat center center url(../images/mymood-black.png); background-size: contain; margin: 2em 0 1em 0;}

::placeholder { color:#000; opacity: 0.3;}
.champ { display: block; margin: 0.5em 0; box-sizing: border-box; width: 100%; padding: 1em; font-size: 100%; border-radius: 0.6em; border: 1px solid rgba(0,0,0,0.15); outline: none; background:#FFF no-repeat 0.8em center; background-size:1.2em; transition: border 0.2s, box-shadow 0.2s;}
.champ:focus { box-shadow: 0 2px 4px rgba(0,0,0,0.2); border-color: rgba(0,0,0,0.4);}

#search-form { position: relative; margin: 1.5em 0 2.5em 0;}
#search-form a { position: absolute; top:50%; right: 0; margin: -0.7em 0.5em; height:1.4em; width: 1.4em; font-size: 140%; line-height: 1.3em; color:#FFF; text-decoration: none; background:#00c1ac ; border-radius: 0.4em; text-align: center; font-weight: 700;}
#search-form .champ { padding-left: 2.6em; background-image: url(../images/pictos/search.svg);  font-family: "Quicksand", Arial, Helvetica, sans-serif; font-size:100%; font-weight: 500;}

.results { margin:1.5em 0;}

.results p { display: flex; flex-direction: row; width: 100%; flex-wrap: nowrap; margin: 0; font-size: 75%; position: relative; }
.results p:not(.title):before { background: #FFF; width: 0; opacity: 0; height: 100%; content: ""; position: absolute; left:0; top: 0; border-radius: 0.4rem; transition: all 0.3s; padding: 0 0.2em; margin: 0 -0.2em;}
.results p:not(.title):hover:before { width: 100%; opacity: 1; }

.results p.title { font-size:75%; font-weight: 600; color:#AAA; }
.results p.title span { border-top-width: 0; }
.results p span { border: 1px solid #DADBDC; border-width: 1px 0; line-height: 1.4rem; display: block; padding: 0.75em 0; margin:-1px 0.2rem 0 0.2rem;   overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; z-index: 2;}

.results p span.name { width: 60%;}
.results p span.ref { width: 15%;}
/* .results p span.ref-prod { width: 14%;} */
.results p span.location { width: 25%;}

.results p span.name a { font-weight: 600; font-size:125%; padding-left: 1.4em; background: url(../images/pictos/new-window.svg) no-repeat 0 center; background-size: 1em; }


.results p span.name a:before { content: ""; position: absolute; z-index: 2; top:0; left: 0; width: 100%; height: 100%;}





.overlay { background: rgba(0,0,0,0.7) no-repeat center center; z-index: 100;  backface-visibility: hidden; backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); position: fixed; width: 100%; height: 100%;  box-sizing: border-box; padding: 1rem 0.5rem; top: 0; left: 0;  background-attachment: fixed;   transition: border-radius 0.2s; overflow: hidden;}

#popup.loading { background-image: url(../images/spinner-light.svg); background-size: 2.5em;  }
 #popup { display: flex; overflow: auto; flex-direction: column; align-items: center; justify-content:center; padding-top: 50px; padding-bottom: 50px;  }

 #popup.scroller { display: block;}



#popup .popup {  background:#FAFAF5; width:100%; text-align: center; box-sizing: border-box; position:relative; margin: auto; max-width: 38em; max-width: 22em; border-radius: 0.75em; box-shadow: 0 2px 0.2em 1px rgba(0,0,0,0.6);  opacity:0; transition: opacity 0.3s , transform 0.3s;  transform:scale(0.9); }
#popup.loaded .popup { opacity: 1;  padding: 1px; transform:none; }
#popup.loaded .popup .wrap { margin: 1.8em;}
#popup .description { font-size:85%; font-weight: 300;   text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    -webkit-box-orient: vertical;}

#popup h1 { font-size:140%; line-height: 115%;}
#popup p { margin:1.5em 0;}

#popup hr { margin:1.8em -1.8em; height: 1px; background:#E8E8E3; border-top: 1px solid #FFF; border:none;}

#popup header { position: relative;/*  padding-left: 9em; padding-left: 0; min-height: 7.5em; */  }

#popup header .picture { width: 7.5em; height: 7.5em; background: no-repeat center center; border: 1px solid #EEE; position: absolute; left: 0; top: 0; border-radius: 0.6em; background-size: contain;}


.buttons a { display: inline-block; padding: 0.8em 1em; text-align: center; background: rgba(0,0,0,0.06); font-weight: 600; border-radius: 0.4em; font-size: 90%;}
.buttons a.picto { background-repeat: no-repeat; background-size: 1em; background-position: 1em center; padding-left: 2.5em; }
.buttons a.qr { background-image: url(../images/pictos/qr-code.svg);}
.buttons a.close { background-image: url(../images/pictos/close.svg);}



#popup .droplist { width: 100%;}
#popup .droplist td { background: #FFF; border-radius: 0.5rem 0 0 0.5rem; border: 1px solid rgba(0,0,0,0.1); border-right-style: dashed; padding: 0.7rem 0.8rem; color:#BABAB5; width: 5em; text-align: left; font-size: 75%; font-weight: 600;}
#popup .droplist td + td {  border-radius:0 0.5rem 0.5rem 0; border-left: none; width: auto;  border-right-style: solid; padding: 0; font-size: 100%;   }
#popup .droplist td select { border: none; width: 100%;   border-radius:0 0.5rem 0.5rem 0; font-size:100%; box-sizing: border-box; padding: 0.7rem 0.4rem; border: none; background-color: #FFF;}

@media screen and (max-width: 1080px) {
    body { font-size:16px;}


}

@media screen and (max-width: 700px) {
    body { font-size:15px;}
    .wrap { margin:1.5rem;}
    .center { margin:1.5rem auto; }
}


@media screen and (max-width:500px) {
    .results p span.ref-prod { display: none;}
    .results p span.ref { position: absolute; border: none; left: 1.8em; top: 1.5rem; width: 100%;  z-index: 1; padding-bottom: 0; line-height: 0.9rem;}
    .results p span.location { position: absolute; border: none; left: 1.8em; top: 2.4rem; width: 100%;  z-index: 1; padding-bottom: 0; line-height: 0.9rem;}
    .results p span.ref:before { content:"Réf. : "; }
    .results p.title {display:none;}
    .results p span.name { width:100%; z-index: 3;}
    .results p:not(.title) span { padding-bottom:2.5rem;}


    #popup header .picture { width: 3.8rem; height: 3.8rem; top: auto; margin-top: 0.2rem;  }
/*     #popup header { padding-left: 4.8rem; min-height: 4.5rem;}
    #popup header h1 { margin-left: -5rem; font-size: 110%;} */

    .results p span { position: static;}
    
    #popup .description { font-size:75%; }

    
}
@media screen and (max-width:400px) {
    #popup p.buttons { margin-left: -1rem; margin-right: -1rem;}
}