/*
Theme Name:   	Storefront Child Theme
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
Version:      	4.5.3
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/
/*
 * Add your own custom css below this text.
 */
/* CSS PAGE BLOG*/
.post-layout {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
}

/* Image mise en avant de l'article */
.post-thumbnail {
    flex: 0 0 auto;
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform .2s;
}


.post-thumbnail:hover img {
    transform: scale(1.05);
}

/* Contenu de l'article */
.post-content-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.entry-title a {
    color: #333;
    transition: color .2s;
}

/* Bouton "Lire la suite" */
.read-more-container .button {
    padding: 8px 12px;
    border: none;
    border-radius: 3px;
    background-color: #F2F2F2;
    color: #222;
    cursor: pointer;
    transition: background-color .2s;
}

.read-more-container .button:hover {
    background-color: #F7F7F7;
}

.hentry .entry-header {
    margin-bottom: 1em;
    border-bottom: 0;
}

.hentry {
    margin: 0 0 2.0em;
}

/* Media Query pour tablettes et écrans plus larges */
@media screen and (min-width: 768px) {
    .post-layout {
        flex-direction: row;
    }

    .post-thumbnail, .post-content-wrapper {
        width: auto;
    }
}
/* FIN PAGE BLOG */

/* Produits recemment consultes */
.recently-viewed-products {
    clear: both;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column-reverse; /* Inverse l'ordre des éléments */
}

.recently-viewed-products .product-thumbnails {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
}

.recently-viewed-products .product-thumbnail {
    margin: 0 10px;
    text-align: center;
    margin-right: 2px;
    flex: 0 0 auto;
    width: 200px;
    height: auto;
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 2px;
    text-align: center;
    position: relative;
}

/* Ajoutez le pseudo-élément ::before pour afficher les emplacements des produits avant leur consultation */
.product-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F5F5F5; /* Couleur de fond des emplacements des produits */
    border: 1px dashed #ccc; /* Bordure des emplacements */
    border-radius: 8px;
}

.product-title {
    font-size: 16px;
    margin-top: 5px;
}

.product-image img {
    max-width: 100%;
    height: auto;
}

/* Flèche (triangle) à droite */
.recently-viewed-products::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    border-width: 10px 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #ccc; /* Couleur de la flèche */
    transform: translateY(-50%);
}

/* Flèche (triangle) à gauche */
.recently-viewed-products::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent #ccc transparent transparent; /* Couleur de la flèche */
    transform: translateY(-50%);
}

/* Texte d'indication */
.scroll-indication {
    position: absolute;
    top: 102%;
    left: 20px; /* Ajustez la position du texte selon vos préférences */
    color: #999; /* Couleur du texte */
    transform: translateY(-50%);
}

/* Masquez les emplacements des produits par défaut */
.product-thumbnail::before {
    display: none;
}

/* Affichez les emplacements des produits lorsque des produits consultés sont disponibles */
.recently-viewed-products.has-products .product-thumbnail::before {
    display: block;
}
/* FIN */