/*
Theme Name: HelloCommerce Child
Theme URI: http://formulette.fr
Description: Thème enfant pour HelloCommerce
Author: Jérôme
Author URI: 
Template: hello-commerce
Version: 1.0.0
Text Domain: hello-commerce-child
*/

/* CSS personnalisé */



/* Conteneur principal */
.maison-header-hello {
    display: flex;
    justify-content: space-between; /* desktop: logo à gauche, icônes à droite */
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0;
}

/* Logo */
.maison-title {
    margin: 0;
    flex: 0 0 auto;
}

.maison-title img {
    max-height: 120px;
    width: auto;
}

/* Wrapper texte + icônes */
.maison-social-wrapper {
    display: flex;
    flex-direction: row; /* texte + icônes sur la même ligne desktop */
    align-items: center;
    gap: 10px;

}

.term-description {
	  border-bottom: 1px solid #ddd; /* trait gris clair */
    padding-bottom: 10px; /* espace entre contenu et ligne */
    margin-bottom: 15px;  /* espace après la ligne */
}

/* Texte avant icônes */
.maison-social-text {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

/* Icônes */
.maison-social {
    display: flex;
    gap: 15px;
}

.maison-social a {
    font-size: 40px;
    color: #c82c86;
    transition: color 0.3s;
}

.maison-social a:hover {
    color: #e74c3c;
}

/* RESPONSIVE : trois lignes mobile */
@media (max-width: 768px) {
    .maison-header-hello {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .maison-social-wrapper {
        flex-direction: column; /* texte au-dessus des icônes */
        gap: 5px;
        margin-top: 10px;
        align-items: center;
    }

    .maison-social-text {
        margin: 0;
    }

    .maison-social {
        flex-direction: row; /* icônes toujours sur une ligne */
        justify-content: center;
        gap: 15px;
    }
}



/* CATEGORY */


/* Grille articles blog */

/* Wrapper global catégorie blog */
.blog-category-container {
    max-width: 1200px; /* largeur max sur grands écrans */
    margin: 0 auto;    /* centré */
    padding: 0 20px;   /* marge interne horizontale */
    box-sizing: border-box;
}

/* Responsive : moins de padding sur mobile si besoin */
@media (max-width: 768px) {
    .blog-category-container {
        padding: 0 15px;
    }
}

/* Grille articles blog 4 colonnes */
.blog-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 1200px) {
    .blog-category-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes grands écrans */
    }
}

@media (max-width: 1024px) {
    .blog-category-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes tablettes */
    }
}

@media (max-width: 768px) {
    .blog-category-grid {
        grid-template-columns: 1fr; /* 1 colonne mobile */
    }
}

.blog-category-grid article {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}

.blog-category-grid article .post-thumb img {
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.blog-category-grid .post-title {
    margin: 10px 0 5px;
    font-size: 1.2rem;
}

.blog-category-grid .post-excerpt {
    flex: 1;
    font-size: 0.95rem;
    color: #555;
}

.blog-category-grid .read-more {
    margin-top: 10px;
    text-decoration: none;
    color: #c82c86;
    font-weight: bold;
}

.blog-category-title {
    
font-family: var(--e-global-typography-primary-font-family, "Questrial"), Sans-serif;
    font-size: var(--e-global-typography-primary-font-size, 2.5rem; );
    font-weight: var(--e-global-typography-primary-font-weight, 400);
    text-transform: var(--e-global-typography-primary-text-transform, uppercase);
    font-style: var(--e-global-typography-primary-font-style, normal);
    text-decoration: var(--e-global-typography-primary-text-decoration, none);
    line-height: var(--e-global-typography-primary-line-height, 1.5em);
    letter-spacing: var(--e-global-typography-primary-letter-spacing, 19px);
    word-spacing: var(--e-global-typography-primary-word-spacing, 0em);
    color: var(--e-global-color-primary, #29332F);
    margin: 0 0 30px 0; /* espace en dessous du H1 */
    text-align: left;   /* adapte à center si besoin */
}


}


/* TITRE ARTICLES BLOG (h2) */
.blog-category-grid .post-title {
    font-family: var(--e-global-typography-primary-font-family, "Questrial"), Sans-serif;
    font-size: 1.5rem; /* plus petit que H1 */
    font-weight: var(--e-global-typography-primary-font-weight, 400);
    text-transform: var(--e-global-typography-primary-text-transform, uppercase);
    font-style: var(--e-global-typography-primary-font-style, normal);
    letter-spacing: 5px; /* réduit par rapport au H1 */
    line-height: 1.3;
    margin: 10px 0 8px;
}

/* lien dans le titre */
.blog-category-grid .post-title a {
    color: var(--e-global-color-primary, #29332F);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
    font-size: 1.5rem; /* plus petit que H1 */
    letter-spacing: 5px; /* réduit par rapport au H1 */
    line-height: 1.3;
}

.blog-category-grid .post-title a:hover {
    color: #c82c86; /* cohérent avec tes icônes / liens */
    transform: translateY(-2px); /* petit effet dynamique */
}


/* H1 article */
.blog-article-title {
    font-family: var(--e-global-typography-primary-font-family, "Questrial"), Sans-serif;
    font-size: 2.5rem; 
    font-weight: var(--e-global-typography-primary-font-weight, 400);
    text-transform: var(--e-global-typography-primary-text-transform, uppercase);
    letter-spacing: 19px;
    color: var(--e-global-color-primary, #29332F);
    margin-bottom: 15px;
}

/* Meta */
.blog-article-meta {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 20px;
}

.blog-article-meta span {
    margin-right: 15px;
}

/* Image */
.blog-article-thumb img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Contenu */
.blog-article-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 30px;
}

/* Partage réseaux sociaux */
.blog-article-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.blog-article-share span {
    font-weight: 500;
}

.blog-article-share a {
    font-size: 28px;
    color: #c82c86;
    transition: color 0.3s;
}

.blog-article-share a:hover {
    color: #e74c3c;
}






/* ===============================
BASE
=============================== */

.site-header{
background:#ca2687;
font-family: var(--e-global-typography-primary-font-family), sans-serif;
}

.container{
width:90%;
margin:auto;
padding:0;
}

/* ===============================
TOPBAR
=============================== */

.topbar{
background:#bc1f7c;
padding:8px 0;
}

.topbar-menu{
display:flex;
justify-content:flex-end;
gap:15px;
list-style:none;
margin:0;
padding:0;
}

.topbar-menu li{
list-style:none;
}

.topbar-menu a{
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
color:white;
text-decoration:none;
font-weight:normal;
}

/* ===============================
HEADER GRID
=============================== */

.header-grid{

display:grid;
grid-template-columns:auto 1fr auto;

align-items:center;

gap:20px;

padding:0px;

}



/* ===============================
LOGO
=============================== */

.header-logo{
display:flex;
align-items:center;
}

.header-logo img{
max-height:80px;
width:auto;
}

/* ===============================
MENU
=============================== */

.header-menu{
display:flex;
justify-content:center;
}

.main-menu{
display:flex;
align-items:center;
justify-content:center;
gap:30px;

list-style:none;
margin:0;
padding:0;
}

.main-menu li{
list-style:none;
}

.main-menu a{
color:white;
text-decoration:none;
font-weight:normal;
}

/* ===============================
SEARCH
=============================== */
/* Wrapper du formulaire */
.my-search-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* Champ input */
.my-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    outline: none;
    box-sizing: border-box;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Bouton */

}

/* Bouton */
.my-search-form .my-search-wrapper .my-search-button  {
    all: unset;                  /* supprime toutes les propriétés héritées */
    flex: 0 0 auto;
    padding: 0 12px;
    background-color: #bc1f7c;   /* ta couleur désirée */
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 4px 4px 0;  /* arrondi du bouton */
}

/* Hover */
button.my-search-button:hover {
    background-color: #b0207a;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .my-search-wrapper {
        max-width: 100%;
    }
}