/* Importation de polices littéraires */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/* Titres des livres et titres principaux */
h1, h2, h3, .h1, .h2, .h3, .product-title a {
    font-family: 'Playfair Display', serif !important;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

/* Texte courant (résumés, bios) */
/*body, p, .product-description {
    font-family: 'Lora', serif;
    line-height: 1.8;
    color: #333;
}
*/
/* Style spécifique pour ton bloc "Qui suis-je" */
#custom-text {
    background-color: #7092be; /* Teinte papier ancien */
    border-top: 1px solid #e5e1d8;
    border-bottom: 1px solid #e5e1d8;
}


/* Animation douce au survol */
/*.product-miniature:hover .thumbnail-container img {
    transform: rotateY(-8deg) translateX(5px);
    box-shadow: 15px 15px 30px rgba(0,0,0,0.3);
}
*/
/* --- SUPPRESSION RADICALE DU SYSTÈME D'ONGLETS --- */

/* 1. On cache la barre de menu (Description / Détails du produit) */
.tabs .nav-tabs {
    display: none !important;
}

/* 2. On force l'affichage de TOUS les contenus d'un coup */
.tabs .tab-content .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
}

/* 3. On aligne le tout parfaitement à gauche, sous les miniatures */
.product-container .tabs {
    width: 100% !important;
    float: left !important;
    clear: both !important; /* Force le passage sous l'image */
    margin-top: 30px !important;
    padding-left: 0 !important;
}

/* 4. On s'assure que le texte ne reste pas coincé à droite */
.product-description {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* --- OPTIMISATION DE LA ZONE LARGE --- */

/* On enlève la bordure grise des onglets pour un look plus moderne */
.tabs .nav-tabs {
    border-bottom: 2px solid #e5e1d8;
    margin-bottom: 20px;
}

/* On donne du style à l'onglet actif */
.tabs .nav-link.active {
    border-color: #e5e1d8 #e5e1d8 #fff !important;
    color: #8c764e !important; /* Ta couleur dorée */
    font-weight: bold;
}

/* On s'assure que le texte ne touche pas les bords sur mobile */
@media (max-width: 767px) {
    .product-description {
        padding: 0 15px;
    }
}

/* Espacement entre le résumé et le bloc commentaires en dessous */
#main .product-accessories, 
#main .product-footer {
    margin-top: 50px;
    border-top: 1px solid #ebebeb;
    padding-top: 30px;
}
/* Titres complets sur le catalogue */
.product-miniature .product-title a {
    height: 55px; /* On laisse de la place pour 2-3 lignes */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-align: center;
    font-size: 1rem;
    padding: 5px;
}

/* On change le badge "NEUF" bleu (trop agressif) par un doré mat */
.product-flags .new {
    background: #8c764e !important;
    border-radius: 0;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    letter-spacing: 1px;
}


/* On retire les marges du module bannière */
.banner {
    padding: 0 !important;
    margin: 0 !important;
}

/* On force l'image de la bannière à prendre 100% de la largeur de l'écran */
.banner img {
    width: 100vw !important;
    max-width: 100vw !important;
    object-fit: cover; /* Évite de déformer l'image */
    display: block;
}

/* On s'assure que le conteneur ne bloque pas l'image */
#header .header-nav .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}





/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
body.page-index #wrapper {
    padding-top: 0;
}

body.page-index #wrapper .container 
{
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text
{
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/*body.page-index #wrapper .carousel .carousel-inner {
    height: 450px;
}*/

/* Garde les 450px uniquement pour les grands écrans (PC) */
@media screen and (min-width: 768px) {
    body.page-index #wrapper .carousel .carousel-inner {
        height: 450px;
    }
}

/* Sur mobile, on laisse l'image respirer */
@media screen and (max-width: 767px) {
    body.page-index #wrapper .carousel .carousel-inner {
        height: auto !important;
    }
    
    body.page-index #wrapper .carousel .carousel-item img {
        width: 100%;
        height: auto;
    }
}

body.page-index #wrapper .featured-products .product {
    width: 20%;
}


body.page-index #wrapper .banner img {
    width: 100%;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media screen and (max-width: 1024px) {
    body.page-index #wrapper .featured-products .product {
        width: 33%;
    }
}

@media screen and (max-width: 768px) {
    body.page-index #wrapper .featured-products .product {
        width: 50%;
    }
}


/* Change la couleur de fond du pied de page */
.footer-container {
    background-color: #7092be; /* Remplacez par votre couleur (ex: #000000 pour noir) */
}

/* Change la couleur de tous les textes, titres et liens du footer */
.footer-container, 
.footer-container p, 
.footer-container span, 
.footer-container a, 
.footer-container .h3, 
.footer-container .h4 {
    color: #FFFFFF !important;
}

/* Change la couleur au survol des liens pour qu'ils ne disparaissent pas */
.footer-container a:hover {
    color: #f1f1f1 !important;
    text-decoration: underline;
}

/* Correction pour le mobile (lignes blanches) */
.footer-container .collapse.in, 
.footer-container .collapse.show,
.footer-container ul,
.footer-container li {
    background-color: #7092be !important;
}

/* Force la suppression des bordures ou séparateurs blancs */
.footer-container .footer-column,
.footer-container .links {
    border: none !important;
}

/* Assure que les liens dans les listes mobiles sont aussi en bleu */
#footer .footer-column .collapse li a {
    background-color: #7092be !important;
    display: block;
    padding: 10px 0; /* Optionnel : pour donner un peu d'espace au clic */
}


/* Cache uniquement le carré de l'image */
#subcategories .subcategory-image {
    display: none !important;
}

/* Optionnel : Centre le texte restant pour faire plus propre */
#subcategories ul li {
    text-align: center;
    width: auto;
    margin: 10px;
}

/* Permet au conteneur de s'adapter à la taille de l'image */
#carousel, .carousel-inner, .carousel-item {
    height: auto !important;
    max-height: none !important;
}

/* Empêche l'image d'être écrasée ou rognée */
.carousel .carousel-item img {
    height: auto !important;
    width: 100%;
    object-fit: contain; 
}