a{
text-decoration:none
}
body,html{
height:100%
}
body{
background:url(/images/sprite.webp) 0 -342px repeat-x #efefef;
padding:0
}
a:hover, #countryList li:hover{
text-decoration:underline;
}
h3{
font-weight:600;
color:#bf4d02;
font-size:1.2em;
padding-bottom:2px;
border-bottom:2px solid #ffab3d;
margin:8px 0;
}

h1{
font-size:2rem;
color:#2a5685;
}
h2{
color:#2a5685;
}
pre {
margin-bottom:0 !important;
}
.ico{
background-image:url(/images/sprite.webp);
width:32px;
height:32px;
display:inline-block;
vertical-align:bottom
}
.doc{
background-position:0 -246px
}
.api{
background-position:0 -214px
}
.contact{
background-position:0 -278px
}
.liste{
background-position:-32px -214px
}
.exemple{
background-position:-32px -246px
}
.contenu{
background-position:0 -310px
}
.lang{
background-position:-32px -278px
}
.trad{
background-position:0 -150px
}
.produit{
background-position:0 -182px
}
.prix{
background-position:-32px -182px
}
.reception{
background-position:-32px -310px
}
header{
height:210px
}
nav a{
color:#fff;
padding:0 16px;
font-weight:700;
font-size:1.3rem
}

nav ul {
list-style:none;
display: inline-flex;
padding: 0;
margin: 0;
}

#contenu{
margin:5px auto;
font-size:.9em
}
.overlay{
display:none;
background-color:#222;
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
}
@media (max-width:576px){
/*nav a{
padding:7px 3px
}*/

nav ul{
float: left;
display: none;
height: 100%;
width: 150px;
background-color: #292929;
position: fixed;
z-index: 100;
margin: 0;
padding: 0;
left: 0;
top: -4px;
opacity: 0.8;
border-right: solid 2px #181818;
}
#buttonMenuSmall
{
display:inline-block;
padding-top: 7px;
}
.overlay{
opacity:0.8;
}

}

@media (min-width: 576px) {
#buttonMenuSmall
{
display:none;
}

}


@media (max-width:768px){
.container{
max-width: 100% !important;
}

.colonne-d,.colonne-g{
width:100%;
padding-top:10px
}
header{
background-position-y:0;
width:387px;
height:100px
}
header.es{
background:url(/images/banniere_es_sm.webp) center no-repeat
}
header.fr{
background:url(/images/banniere_fr_sm.webp) center no-repeat
}
header.en{
background:url(/images/banniere_en_sm.webp) center no-repeat
}
body{
background-position-y:-452px
}
nav a{
font-size:16px
}
ul {
margin-top: 4px;
}

}
@media (min-width:769px){
.colonne-g{
max-width:287px;
margin:0 25px;
padding-top:10px
}
.colonne-d{
width:360px;
background-color:#fff;
padding:10px
}
header{
background-position-y:0;
width:699px;
height:210px
}
header.es{
background:url(/images/banniere_es.webp) center no-repeat
}
header.fr{
background:url(/images/banniere_fr.webp) center no-repeat
}
header.en{
background:url(/images/banniere_en.webp) center no-repeat
}
}
@media (min-width:992px){
.colonne-g{
max-width:405px;
margin:0 25px;
padding-top:10px
}
}
@media (min-width:1200px){
.colonne-g{
max-width:495px;
}
}
@media (min-width:1400px){
.colonne-g{
max-width:585px;
}
}
.center{
text-align:center
}
footer{
height:50px;
background:url(/images/sprite.webp) repeat-x #efefef
}
footer a{
color:#fff;
padding:0 1em
}
#output_example{
width:100%;
height:300px;
overflow:scroll;
background-color:#fff;
padding:5px
}

#countryList {
list-style-type:none;
}

#countryList li {
color:#0d6efd;
cursor:pointer;
}

#info{
position:fixed;
}

#msg_bon,#msg_erreur{
line-height:1.2em;
margin:0 auto 30px;
padding:0 10px 10px 0;
width:90%;
text-align:justify
}
#msg_erreur{
background:url(/images/no.gif) 6px 2px no-repeat #ffc;
border:1px solid #ef0e0e;
color:#ef0e0e
}
#msg_bon{
background:url(/images/ok.gif) 6px 2px no-repeat #edffe4;
border:1px solid #9cd580;
color:#2aaa00
}
#msg_bon li,#msg_erreur li{
margin-left:35px
}