/* ============================================================
   Styles communs aux pages produits, interieur, exterieur et sanitaire.
   Theme clair, coherent avec le reste du site.
   Ce fichier remplace les blocs <style> qui etaient dupliques dans
   chacune des quatre pages.
   ============================================================ */

/* ---- Barre de menu ----
   Le menu du theme est en texte blanc sur fond transparent : parfaitement
   lisible au-dessus d'une grande photo sombre, mais invisible au-dessus de
   l'en-tete clair de ces pages. On lui donne donc une barre pleine sombre,
   dans le meme ton que le pied de page. */
nav.menu-area-one {
    background-color: #141414 !important;
}

nav.menu-area-one .dropdown-menu {
    background-color: #141414 !important;
    border-color: #2a2a2a !important;
}

nav.menu-area-one .dropdown-menu > li > a { color: #fff !important; }

nav.menu-area-one .dropdown-menu > li > a:hover,
nav.menu-area-one .dropdown-menu > li > a:focus {
    background-color: #262626 !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    nav.menu-area-one .navbar-collapse { background-color: #141414 !important; }
}

/* ---- En-tete de page ---- */
.produits-header {
    padding: 130px 0 45px;
    text-align: center;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ececec;
}

.produits-header h1 {
    color: #141414;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 18px;
}

.produits-header p {
    color: #777;
    font-size: 17px;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
}

.fil-ariane {
    color: #999;
    font-size: 14px;
    margin: 0 0 22px;
}

.fil-ariane a { color: #777; }
.fil-ariane a:hover { color: #141414; }

/* ---- Sections ---- */
.produits-section { padding: 55px 0 25px; }

.section-titre {
    color: #141414;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.section-soustitre {
    color: #888;
    font-size: 15px;
    margin: 0 0 30px;
    max-width: 720px;
    line-height: 1.6;
}

.separateur {
    border: 0;
    border-top: 1px solid #e8e8e8;
    margin: 0 0 35px;
}

/* ---- Cartes de categorie ----
   Le texte reste visible en permanence. L'ancienne version le masquait
   (opacity: 0) et ne le revelait qu'au survol : sur telephone, ou le survol
   n'existe pas, les cartes etaient muettes. */
.cat-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    text-decoration: none;
    transition: box-shadow .3s ease, transform .3s ease;
}

.cat-card:hover,
.cat-card:focus {
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    transform: translateY(-3px);
}

.cat-card-media { position: relative; overflow: hidden; }

.cat-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.cat-card:hover .cat-card-media img { transform: scale(1.06); }

/* Degrade sombre uniquement sur la photo, pour que le texte blanc reste
   lisible quelle que soit l'image. */
.cat-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0) 100%);
}

.cat-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 24px;
    z-index: 2;
}

.cat-card-body h3 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}

.cat-card-body p {
    color: #eaeaea;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
}

.cat-lien {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 2px solid #fff;
    padding-bottom: 3px;
}

.cat-card:hover .cat-lien { color: #ddd; border-bottom-color: #ddd; }

/* Tailles */
.cat-card .cat-card-media { height: 240px; }
.cat-card.grande .cat-card-media { height: 420px; }
.cat-card.petite .cat-card-media { height: 240px; }
.cat-card.petite .cat-card-body { padding: 16px 18px; }
.cat-card.petite .cat-card-body h3 { font-size: 19px; margin-bottom: 4px; }
.cat-card.petite .cat-card-body p { font-size: 13px; margin-bottom: 0; }

/* ---- Galerie photo ---- */
.photo-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    cursor: zoom-in;
    transition: box-shadow .3s ease, transform .3s ease;
}

.photo-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    transform: translateY(-3px);
}

.photo-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.photo-item:hover img { transform: scale(1.06); }

.photo-legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}

/* ---- Bandeau final ---- */
.produits-cta {
    background-color: #f7f7f7;
    border-top: 1px solid #ececec;
    padding: 55px 0;
    margin-top: 30px;
    text-align: center;
}

.produits-cta h2 { color: #141414; font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.produits-cta p { color: #777; font-size: 16px; margin: 0 0 25px; }
.produits-cta p a { color: #c0392b; }

.btn-produits {
    display: inline-block;
    margin: 6px 8px;
    padding: 13px 28px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-produits.plein { background-color: #c0392b; color: #fff; }
.btn-produits.plein:hover { background-color: #a93226; color: #fff; }
.btn-produits.vide { border: 1px solid #cfcfcf; color: #141414; }
.btn-produits.vide:hover { border-color: #141414; background-color: #141414; color: #fff; }

/* ---- Visionneuse plein ecran ----
   Volontairement sombre : c'est une surcouche par-dessus la page, pas le
   theme de la page elle-meme. */
.zoom-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .92);
    text-align: center;
}

.zoom-overlay.actif { display: flex; align-items: center; justify-content: center; }
.zoom-overlay img { max-width: 92%; max-height: 82%; border-radius: 4px; }

.zoom-fermer {
    position: absolute;
    top: 18px;
    right: 26px;
    color: #fff;
    font-size: 42px;
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
}

.zoom-legende { position: absolute; bottom: 30px; left: 0; right: 0; color: #ddd; font-size: 15px; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .produits-header { padding: 100px 0 32px; }
    .produits-header h1 { font-size: 29px; }
    .produits-header p { font-size: 15px; }
    .produits-section { padding: 40px 0 15px; }
    .cat-card .cat-card-media,
    .cat-card.petite .cat-card-media { height: 200px; }
    .cat-card.grande .cat-card-media { height: 260px; }
    .cat-card-body h3 { font-size: 22px; }
    .photo-item img { height: 210px; }
}

/* ---- Fiches produit (grille des modeles d'une famille) ---- */
.produit-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .3s ease, transform .3s ease;
}

.produit-card:hover,
.produit-card:focus {
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    transform: translateY(-3px);
}

.produit-media { position: relative; overflow: hidden; height: 260px; }

.produit-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.produit-card:hover .produit-media img { transform: scale(1.06); }

/* Pastille indiquant le nombre de photos disponibles */
.produit-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

/* Le nom du modele est sous la photo, en texte sombre : sur une page claire
   c'est plus lisible qu'une incrustation blanche sur la photo. */
.produit-corps {
    padding: 16px 18px 18px;
    border-top: 1px solid #f0f0f0;
}

.produit-corps h3 {
    color: #141414;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}

.produit-corps p { color: #999; font-size: 13px; margin: 0; }

.produit-action {
    display: inline-block;
    margin-top: 10px;
    color: #c0392b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
}

.produit-card:hover .produit-action { color: #a93226; }

/* ---- Navigation dans la visionneuse ---- */
.zoom-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    padding: 14px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .2s ease;
}

.zoom-nav:hover { background: rgba(255, 255, 255, .28); }
.zoom-nav.precedent { left: 20px; }
.zoom-nav.suivant { right: 20px; }
.zoom-compteur { position: absolute; top: 24px; left: 0; right: 0; color: #bbb; font-size: 14px; }

@media (max-width: 767px) {
    .produit-media { height: 210px; }
    .zoom-nav { font-size: 22px; padding: 10px 14px; }
    .zoom-nav.precedent { left: 8px; }
    .zoom-nav.suivant { right: 8px; }
}

/* ---- Fournitures listees sans photo ---- */
.fourniture {
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 22px 24px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

.fourniture h3 {
    color: #141414;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
}

.fourniture p { color: #777; font-size: 14px; line-height: 1.65; margin: 0; }

/* ---- Bloc de maillage interne en fin d'article ---- */
.articles-lies {
    margin: 45px 0 10px;
    padding: 26px 28px;
    background-color: #fafafa;
    border-left: 3px solid #c0392b;
    border-radius: 0 4px 4px 0;
}

.articles-lies h2 {
    color: #141414;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 14px;
}

.articles-lies ul { list-style: none; margin: 0 0 18px; padding: 0; }

.articles-lies li {
    padding: 7px 0 7px 18px;
    position: relative;
    border-bottom: 1px solid #ededed;
}

.articles-lies li:last-child { border-bottom: 0; }

.articles-lies li::before {
    content: "ƒA";
    position: absolute;
    left: 0;
    color: #c0392b;
    font-weight: 700;
}

.articles-lies li a { color: #141414; font-size: 15px; }
.articles-lies li a:hover { color: #c0392b; }

.articles-lies-cta { color: #777; font-size: 14px; margin: 0; line-height: 1.7; }
.articles-lies-cta a { color: #c0392b; font-weight: 700; }

/* ---- Cartes d'articles (index du blog) ---- */
.article-card { cursor: default; }

.article-media {
    display: block;
    position: relative;
    overflow: hidden;
    height: 210px;
}

.article-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.article-card:hover .article-media img { transform: scale(1.06); }

.article-theme {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(192, 57, 43, .92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 3px;
}

.article-date { display: block; color: #aaa; font-size: 12px; margin-bottom: 6px; }
.produit-corps h3 a { color: #141414; }
.produit-corps h3 a:hover { color: #c0392b; }
.article-resume { color: #777; font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.fourniture h3 a { color: #141414; }
.fourniture h3 a:hover { color: #c0392b; }

/* ---- Pages de texte (mentions legales, confidentialite, a propos) ---- */
.produits-section p { color: var(--ink, #4a5254); }
.produits-section .col-md-8 > p { font-size: 15.5px; line-height: 1.75; color: #55605f; margin: 0 0 14px; }
.produits-section .col-md-8 > h2 { margin-top: 0; }

/* Encadre signalant une information que l'exploitant doit renseigner */
.a-completer {
    background: #fdf6e6;
    border-left: 3px solid #b8860b;
    padding: 14px 18px;
    font-size: 14.5px;
    color: #6b5410 !important;
    margin: 18px 0;
}
.a-completer a { color: #8a6508; }