@import url("theme.css");
@import url("rayons.css");
html, body {
    height: 100%;
}
body {
    margin: 0;
    overflow: hidden
}
body > main {
    height: 100%;
    overflow: hidden;
}
section {
    height: 100%;
    overflow: auto;
    position: relative;
}
#accueil a {
    float: left;
    width: 24%;
    margin: 0.3%;
    height: 130px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    border: 1px solid gray;
    text-decoration: none;
}
#accueil a figure {
    display: none;
}
#accueil span {
    display: block;
    margin: 0;
    width: 100%;
    line-height: 2em;
    color: white;
    font-size: medium;
    background-color: #00000075;
    border-radius: 5px 5px 0 0;
}
#accueil a:hover span {
    color: gold
}
/* DEBUT Pour afficher second niveau dans block */
#accueil div {
    display: block;
    float: left;
    margin-top: 2em;
    margin-left: -24%;
    width: 24%
}
#accueil div a {
    text-decoration: none;
}
#accueil div a h2 {
    font-size: small;
    background-color: #00000075;
    color: lightyellow;
    margin: 0;
    line-height: 2em;
}
#accueil div a h2:hover {
    color: lime;
}
#accueil section > div a span {
    display: none;
}
#accueil article {
    display: none
}
#accueil div div {
    display: none;
}
/* ------------------------------------- */
/*               entete                  */
/* ------------------------------------- */
header {
    height: 100%;
    overflow: hidden;
}
header .center {
    position: relative;
    display: list-item;
    margin: 0;
    padding: 0;
    /*! left: 50%; */
    top: 30%;
    /*! transform: translate(-50%, 0); */
    justify-content: space-between;
    color: snow;
    /*! background-color:red; */
    width: 50%;
}
header .center a {
    color: inherit;
    text-decoration: none;
    font-size: smaller;
    text-transform: capitalize;
    cursor: pointer /*car nohref*/
}
header .center li {
    display: inline-block;
    margin: 0 5%;
}
header .center li span {
    display: inline-block;
}
header .center .logo span {
    font-size: large;
}
header .center .logo img {
    display: none;
}
header .center li.menu {
    float: right;
    margin-left: 20px;
}
header .center li:last-child {
    float: right;
    margin-right: 20px;
}
header .center img {
    display: none;
}
header .center a:hover {
    color: lime
}
/* ------------------------------------- */
/*               titres                  */
/* ------------------------------------- */
.titre {
    display: block;
    text-decoration: none;
    text-align: center;
    /*width: 100%;*/
    color: firebrick;
}
.titre:target {
    /*! background-color: gold; */
}
.titre h1, .titre h2, .titre h3 {
    margin: 0;
    font-family: cursive;
    font-style: italic;
    font-weight: lighter;
    display: inline-block;
    vertical-align: middle;
}

.titre h2 {
    font-size: 1.5em;
}
section > .titre > figure {
    /*display:inline-block;*/
}
section > div > .titre > figure {
    display: none;
}
.titre span {
    font-size: x-small;
    margin-left: 5px;
    font-variant-position: super;
}
.soustitre {
    color: firebrick;
    /* background: blue;*/
    min-height: 1.5em;
}
/* --------------------------------------- */
/*             fiches articles             */
/* --------------------------------------- */
article {
    display: inline-block;
    width: 21%;
    height: 440px;
    padding: 1%;
    margin: 1%;
    box-shadow: 4px 4px 5px #555;
    /*! color: midnightblue; */
    background-color: aliceblue;
    overflow: hidden;
}
article:hover {
    background: antiquewhite;
}
article header, article main, article footer {
    overflow: hidden;
    font-size: small;
    background-color: white;
    /* border: 1px solid gray;*/
}
article header {
    height: 240px;
    margin: 0;
    /*! border: 1px solid blue */
}
article main {
    height: 150px;
    margin: 0;
    padding: 0 5px;
}
article h3, article h4 {
    color: darkgreen;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
article h3 {
    /*! margin-top: 10px */
}
article h4 {
    /*! margin-bottom: 10px; */
}
article main p {
    height: 6em;
    margin: 0;
    font-size: smaller;
    overflow: auto;
}
article footer {
    height: 50px;
    margin: 0;
    padding: 0 5px;
}
article footer span {}
article main a, article main span {
    display: block;
    line-height: 2em;
}
article figure, article img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    /*border: 1px solid burlywood;*/
}
article figure {
    height: 70%;
    text-align: center;
    margin-bottom: 0 auto 5px auto;
    margin: auto;
    margin-bottom: 5px;
}
article img {
    display: inline-block;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
}
article img:hover {
    cursor: zoom-in;
}
.chapelet {
    margin-top: 0;
    padding: 2.5%;
    font-size: 0.7em;
    /*! height: 5%; */
}
.chapelet a {
    text-decoration: none;
}
.chapelet a:hover {
    text-decoration: underline;
}
.chapelet * {
    font-size: 1em;
}
.marque {
    /*! width: 100%; */
    /*! line-height: 3em; */
    background-repeat: no-repeat;
    background-size:  auto;
    background-size:  contain;
    background-position: center;
    text-align: center;
    height: 30px;
    /*! background-color: red; */
    vertical-align: center;
    max-width: 80px;
    margin: auto;
    display: block;
}
.refcomplete, .reference, .conditionnement, .stock {
    display: block;
    font-size: smaller;
}
.reference, .conditionnement, .stock {
    width: 60%;
}
refcomplete {
    width: 100%;
}
.reference {
    text-decoration: none;
    color: black;
}
.reference:hover {
    text-decoration: none;
    cursor: default;
}
.reference:before {
    content: "EAN: ";
    display: inline-block;
    margin-right: 5px;
    color: black;
}
.refcomplete:before {
    content: "Référence: ";
    display: inline-block;
    margin-right: 5px;
    color: black;
}
.reference:before:hover {
    text-decoration: none;
}
.conditionnement {}
.stock {}
.unit:before {
    content: " Prix :";
}
.mètre:before, .détail:before {
    content: "Prix au ";
}
.sachet:before, .boîte:before, .charge:before {
    content: "Prix par ";
}
.unité:before {
    content: "Prix à l'";
}
.recharge:before {
    content: "Prix de la ";
}
.lot:before {
    content: "Prix du ";
}
.kg:before {
    content: "Le ";
}
.de:before {
    content: "Prix à partir ";
}
.refQuinc {
    display: inline-block;
    width: 30%;
    margin: 1%;
    color: lightslategray;
}
.prix, .nc {
    display: block;
    float: right;
    color: orangered;
    text-align: right;
    font-weight: bold;
    font-size: large;
    margin: -20px 10px
}
.prix:after {
    content: " € ttc";
    vertical-align: super;
    font-size: xx-small;
}
/* --------------------------------------- */
/*               footer                    */
/* --------------------------------------- */
#piedepage {
    /*! color: snow; */
    background-color: #555;
}
#piedepage ul {
    width: 27%;
    margin: 1%;
    padding: 1%;
    /*! float: left; */
    display: inline-block;
    /*! min-height: 250px; */
    display: inline-grid;
}
#piedepage h2 {
    font-size: medium;
    font-weight: normal;
    line-height: 2em;
    border-bottom: 1px solid silver;
    color: lime;
}
#piedepage ul li {
    list-style-type: none;
}
#piedepage a {
    line-height: 1.5em;
    font-size: smaller;
    text-decoration: none;
    color: silver;
}
#piedepage a:hover {
    text-decoration: underline;
}
#piedepage a span {
    color: snow;
}
@media screen and (min-width: 360px) and (max-width: 800px) {

    header .center {
        width: 100%;
    }
    .center .menu span {
        display: none;
    }
    header .center li img {
        display: inline-block;
    }
    .almanach {
        display: none;
    }
    .accueil {
        display: none;
    }
    /* --------------------------------------- */
    /*               articles                  */
    /* --------------------------------------- */
    article {
        width: 95%;
        height: 170px;
    }
    article > header, article > main, article > footer {
        float: left;
        /*! padding: 0 1%; */
    }
    article header {
        height: 100%;
        width: 33%;
        margin: 0;
    }
    .chapelet {
        /*! height: 25%; */
        margin: 0 0 5px 0;
    }
    article main {
        height: 67%;
        width: 63%;
        margin: 0;
        padding-left: 2%;
    }
    article main h3.title {
        margin: 0;
    }
    article main p {
        height: 6em;
        /*background:red*/
    }

    article footer {
        height: 33%;
        width: 63%;
        margin: 0;
        padding-left: 2%;
    }
    article figure {
        height: 55%;
    }
    article header p {
        font-size: smaller;
        /*! height: 10%; */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    footer ul {
        width: 29.3%;
    }
    footer h2 {
        font-size: small;
        overflow: hidden;
    }
}
@media screen and (max-width: 512px) {
    #accueil a {
        width: 30%;
        margin: 1%;
        height: 20%;
        text-align: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 5px;
        border: 1px solid gray;
    }
    article {
        width: 90%;
        padding: 2.5%;
        margin: 2.5%;
    }
}