/* Import font font-face@ */

@import url("../../css/font.css");

/************** RESET ***************/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html {
    font-size: 100%;
    height: 100%;
    width: 100%;
}

body {
    font-size: 0.625em;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #FFF;
}

strong {
    font-weight: bold;
}

a,
a:hover {
    text-decoration: none;
    outline: 0 none;
}

img {
    border: 0 none;
    max-width: 100%;
    vertical-align: middle;
    height: auto;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}

/**********************************  CONTENT **************************************/

/*GEN*/

#main {
    display: block;
    padding: 0;
    margin: 0;
}
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
.center {
    text-align: center;
    padding: 0;
    margin: 0;
}

/* DEFAULT */

.backServices {
    display: inline-flex;
    line-height: 2em;
    padding: 1em .5em   
}
.backServices span {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-weight: normal;
    padding: 0 .5em;
    font-size: 1.5em;
}
.store-page__iframe .backServices {
    display: none !important;
}
.contentListeMagasin {
    font-family: Arial, Helvetica, sans-serif;
}
.contentListeMagasin h2 {
    margin: 1.5em 0;
    display: block;
    font-size: 3.6em;
    color: #000;
    font-weight: bold;
    text-align: center;
}

.contentListeMagasin ul {
    display: flex; 
    flex-direction: column;
    margin: 0 1em 3em 0;
}
.contentListeMagasin ul li {
    display: block;
    line-height: 1.5;
}
.contentListeMagasin ul li a {
    font-size: 1.5em;
    color: #5f5a5a;
}
/* LISTE MAGASINS */
.list-mag {padding: 2em; background: #eee; overflow: hidden;}
.list-mag sub {display: block; font-size: 10px;}
.list-mag .header-list {background: #fff; display: block; overflow: hidden; padding: 0; margin-bottom: 1em; border: 0;}
.list-mag .header-list h3 {text-transform: uppercase; color: #5e5e5e; font-weight: normal; font-size: 2em;text-align: center; display: block; padding: .5em 0; margin: 0; line-height: 2em; border-bottom: 1px solid #c7c7c7; }
.list-mag .header-list h3 .periode {display: block; text-transform: lowercase; color: #000; font-size: 1.1em;}
.list-mag .header-list .collect {text-align: center; overflow: hidden; margin: 0; padding: .3em; }
.list-mag .header-list .collect li:first-child {margin-left: 0;}
.list-mag .header-list .collect li {display: inline-block; font-size: 13px; color: #7c7c7c; margin-left: 40px;}
.ico {display: inline-block; width: 10px; height: 10px; background: transparent; vertical-align: middle; padding: 0; margin: 2px;}
.ico.red {background: #56af59;} /* #d02e2e */
.ico.purple {background: #803783;}
.ico.green {background: #56af59;}
.ico.black {background: #000;}
.ico.orange {background: #f98e2f;}
.list-mag .header-list .collect .ico {margin: 0 0 0 15px;}
.list-mag .panel:first-child { margin-left: 0;}
.list-mag .panel {float: left; width: 32%; min-height: 660px; margin-left: 1em; border: 1px solid #e1e1e1; background: #fff; margin-bottom: 1em;}
.list-mag .panel.arrond .ville {padding-left: 10px; width: 128px;}
.list-mag .panel h3 {font-weight: bold; background: #f9f9f9; text-align: center; margin: 0 0 10px 0; padding: .5em; border-bottom: 1px solid #e1e1e1; font-size: 15px; color: #5e5e5e;} 
.list-mag .panel h4 {text-align: left; margin: 0 20px; font-size: 1.5em; color: #000; line-height: 1.2em; font-weight: 400;} 
.list-mag .panel ul {overflow: hidden; padding: 0; margin: 0 20px 20px 20px;}
.list-mag .panel ul li {display: block; font-size: 1.3em; color: #7c7c7c; padding: 0; margin-bottom: 2px; min-height: 15px;}
.list-mag .panel ul li .ville {display: inline-block; width: 138px; overflow: hidden;}
.list-mag .panel ul li .ico-collect {float: right; margin: 0; padding: 0; text-align: left;}
.list-mag .panel ul li .place {font-size: .9em; display: block; font-style: italic; color: #666; margin-bottom: .5em}

/*Pages règlement TEMP*/

.reglement {
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 2em;
}
.reglement p {
    margin: 1em 0;
    padding: 0;
    line-height: 1.3;
  }
  .reglement p.titleP {
      margin: 2em 0;
  }
  .reglement ul {
    margin-left: 2em;
  }
  .reglement ul li {
    line-height: 1.3;
    padding-bottom: .5em;
    padding-left: 1em;
    margin: 0;
    position: relative
  }
  .reglement ul li:before {
      position: absolute;
      content:'.';
      left: 0;
      top: -10px;
      font-weight: bold;
      font-size: 1.5em;
  }
#totop:before {
    content: url('../../img/arrow-back-top.png');
}
#totop,
#totop:hover,
#totop:focus {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background-color: rgb(165, 164, 169);
    border: 0;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 70px;
    height: 98px;
    position: fixed;
    right: 5px;
     z-index: 1000;
    cursor: pointer;
}

/* RESPONSIVE */

@media (max-width:1366px) {}

@media (max-width:1024px) {}

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

}

@media (max-width:800px) {
    .list-mag .panel {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width:768px) {

}

@media (max-width:600px) {

}

@media (max-width:480px) {
    .list-mag .header-list .collect {
        text-align: center;
    }
}

@media (max-width:375px) {}

@media (max-width:320px) {}