/************************
Structure de base pour gérer le responsive
************************/

/* Mobile portrait (default): les conteneurs main et aside sont à 100%, on cache les labels longs */
html {font-size: 100%;height: 100%;}
body {height: 100%;}
#main-contener {position:relative;max-width: 75rem; margin: 0 auto;min-height: 100%;}

header {width:100%;margin:0;}
header .logo {display:inline-block;width:100px;}
header .logo img {width:100%;}
header .personalLink {float:right;}

header nav {margin:0;padding:0.5em 0;}
header nav ul {margin:0;padding: 0;list-style: none;}
header nav ul li {display:inline-block;padding:0;margin: 0 0.1em;text-align: center;white-space: nowrap;overflow: hidden;}
header nav li a {font-size: 0.9em;padding:0.4em 0;border-radius: 0.4em;display: inline-block;text-align: left;width: 96%;}
header nav li a span {padding-right:0.4em;}
header nav li a span.num {border-radius: 1em;padding: 0 0.4em;margin:0 0.5em;}


header h1 {font-size: 1.1em;display:block;margin:0 1em;padding: 0;text-align:center;white-space: nowrap;}

footer {clear:both;width:100%;margin:0;}/*position: absolute;bottom: 0;}*/



article p span.price{display:block;float:right;width:20%;min-width:5rem;text-align:right;white-space: nowrap;}



main {float:right;width:100%;min-width:18rem;}
main article h1 span.summaryHeadingLabel{display:none;float:right;}
main article h1 span.summaryHeadingLabel span{display:inline-block;width:45%;text-align:center;}
main article h2 {margin:0.2em 0.6em;font-size:1.2rem}

main article.summary h2 span {display:block;font-size:0.8em;}
main article.summary div {display:inline-block;width:100%;margin:0;padding:0;}
main article.summary div p, 
main article.summary div img {display:inline-block;width:45%;margin:0;padding:2%;vertical-align: top;max-width:22rem;}
main article.summary .priceAndActions span.globalPrice {display:block;}
main article.summary .priceAndActions p span.actionDelete {display:block;text-align:center;font-size:0.8em;}
main article.summary .priceAndActions .actions {text-align:right;}
main article.summary .priceAndActions .actions .button {width:90%;}

main article.options section {margin: 0 2%;padding:0.2em;min-height:6em;}
main article.options section img {display:none;float:left;}
main article.options section ul {margin:0 0.4em;list-style-type: none;padding:0;}
main article.options section ul li {margin-bottom:0.4em;padding: 0.2em;}
main article.options section ul li p {margin: 0.2em 0;font-size:0.9em;}
main article.options section ul li p.priceAndQuantity span {display:inline-block;width:49%;text-align:center;}
main article.options section ul li p.priceAndQuantity span.price {text-align: right;}


aside {float:right;width:100%;min-width:18rem;font-size: 0.9em;}
aside section {margin:0 2%;border-bottom:1px solid #CCC;}
aside h2, aside h3 {margin:0.5em 0 0 0;}
aside h3 span {display:inline-block;width:100%;font-weight: normal;font-size:0.9em;}

.mlabel{display:inline;}
.llabel{display:none;}


/* Mobile paysage et tablette portait (> 576px): 2 colonnes de taille identique, affichage mobile dans chacune, les labels long sont affichés */
@media screen and (min-width: 36rem) {
   header .logo {width:130px;}
   header h1 {font-size: 1.2em;display:inline}
   header nav ul li {width: 20%;margin:0;}
   main {width:50%;}
   aside {width:50%;max-width:22rem;}
   .mlabel{display:none;}
   .llabel{display:inline;}
}

/* Tablette ( > 880px) 2 colonnes de tailles différentes, on conserve affichage mobile dans chacune, mais on agrandi les caractères et on montre les labels longs */
@media screen and (min-width: 55rem) {
   html { font-size: 112%; }
   header .logo {width:160px;}
   header h1 {font-size: 1.4em;display:inline}
   main {width:60%;min-width:22rem;}
   aside {width:40%;max-width:22rem;}
   
   main article.summary .priceAndActions .globalPrice {font-size:1.2em;}
   .mlabel{display:none;}
   .llabel{display:inline;}
}
/* Petit pc, grande tablette ( > 1024px), on chage juste l'affichage dans la colonne main pour montrer les détails, mais en plus petit que sur grand PC */
@media screen and (min-width: 64rem) {
   main article.summary div {width: 49%}
   main article h1 span.summaryHeadingLabel{display:block;width: 49%;}
   main article.options section img {display:block;width:5em}
   main article.options section ul {margin-left:6em;}
   main article.options section ul li p{display:inline-block;width:49%}
}
/* PC (>1200px), on agrandi encore la taille des caractères, et tous les détails sont affichés */
@media screen and (min-width: 75rem) {
   html { font-size: 120%; }
   header .logo {width:200px;}
   header h1 {font-size: 1.6em;display:inline}
   main {width:70%;}
   aside {width:30%;max-width:22rem;}
   main article.summary div .globalPrice {font-size:1.4em;}
   main article.summary .priceAndActions {width: 39%;}
   main article.summary .description {width:59%;}
   main article h1 span.summaryHeadingLabel{display:block;width: 39%;}
   
   main article.options section img {display:block;width:7em}
   main article.options section ul {margin-left:8em;}
   main article.options section ul li p{display:inline-block;width:69%}
   main article.options section ul li p.priceAndQuantity {width:29%;}

   .mlabel{display:none;}
   .llabel{display:inline;}
}







/* Contain floats. */
.cf:after {
  content: ' ';
  display: block;
  clear: both;
}