/*
Theme Name: EloCréa Child
Template: theme-elocrea
Version: 1.0
*/

/* =====================================================================
   FEUILLE DE STYLE — ELO'CRÉA
   Thème enfant WordPress / WooCommerce / Elementor
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. PALETTE DE COULEURS
   --------------------------------------------------------------------- */
:root{
  --elo-fond:            #ffffff;
  --elo-texte:           #0d141a;
  --elo-texte-alt:       #1d1e20;
  --elo-brun:            #382E27;
  --elo-brun-survol:     #1d1e20;
  --elo-taupe:           #7A6B5F;
  --elo-blanc-casse:     #f7f5f3;
  --elo-bordure:         #e5e0da;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHIE
   --------------------------------------------------------------------- */
body,
.entry-content{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--elo-texte);
  background-color: var(--elo-fond);
}

p,
li,
a,
span,
input,
textarea,
button,
select{
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--elo-texte);
}

h1{ font-size: 64px; }
h2{ font-size: 56px; }
h3{ font-size: 48px; }
h4{ font-size: 40px; }
h5{ font-size: 26px; }
h6{ font-size: 18px; }

@media (max-width: 768px){
  h1{ font-size: 40px; }
  h2{ font-size: 34px; }
  h3{ font-size: 28px; }
  h4{ font-size: 24px; }
  h5{ font-size: 20px; }
  h6{ font-size: 17px; }
}

.elo-texte-large{
  font-size: 18px;
}

.elo-texte-petit{
  font-size: 14px;
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   3. LIENS
   --------------------------------------------------------------------- */
a{
  color: var(--elo-brun);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover,
a:focus{
  color: var(--elo-brun-survol);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   4. BOUTONS
   --------------------------------------------------------------------- */
.btn,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"]{
  display: inline-block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  background-color: var(--elo-brun);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}

.btn:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background-color: var(--elo-brun-survol);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-secondaire{
  background-color: transparent;
  color: var(--elo-brun);
  border: 1px solid var(--elo-brun);
}

.btn-secondaire:hover{
  background-color: var(--elo-brun);
  color: #ffffff;
}

/* ---------------------------------------------------------------------
   5. SECTIONS / BLOCS
   --------------------------------------------------------------------- */
.elo-section{
  padding: 80px 24px;
}

.elo-section--taupe{
  background-color: var(--elo-taupe);
  color: #ffffff;
}

.elo-section--taupe h1,
.elo-section--taupe h2,
.elo-section--taupe h3{
  color: #ffffff;
}

.elo-section--claire{
  background-color: var(--elo-blanc-casse);
}

.elo-carte,
.card,
.wp-block-group.is-style-card{
  background-color: #ffffff;
  border: 1px solid var(--elo-bordure);
  border-radius: 28px;
  padding: 32px;
}

@media (max-width: 768px){
  .elo-section{
    padding: 40px 16px;
  }
}

/* ---------------------------------------------------------------------
   6. CONTENEUR / MISE EN PAGE
   --------------------------------------------------------------------- */
.elo-container,
.site-content,
.alignwide{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------
   7. EN-TÊTE / NAVIGATION
   --------------------------------------------------------------------- */
.site-header,
header.site-header{
  background-color: #ffffff;
  border-bottom: 1px solid var(--elo-bordure);
}

.main-navigation a,
.nav-link{
  font-size: 16px;
  font-weight: 400;
  color: var(--elo-texte);
}

.main-navigation a:hover,
.main-navigation a:focus{
  color: var(--elo-brun);
  text-decoration: none;
}

/* Header personnalisé EHF */
.ehf-h-nav a{
  color: var(--elo-texte) !important;
}

.ehf-h-nav a:hover,
.ehf-h-nav a:focus{
  color: var(--elo-brun) !important;
}

/* ---------------------------------------------------------------------
   8. PIED DE PAGE
   --------------------------------------------------------------------- */
.site-footer,
footer.site-footer{
  background-color: var(--elo-texte);
  color: #ffffff;
  padding: 60px 24px;
}

.site-footer a{
  color: #ffffff;
  opacity: .85;
}

.site-footer a:hover,
.site-footer a:focus{
  opacity: 1;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   9. FORMULAIRES
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  color: var(--elo-texte);
  background-color: #ffffff;
  border: 1px solid var(--elo-bordure);
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: var(--elo-brun);
}

/* ---------------------------------------------------------------------
   10. WOOCOMMERCE — BOUTIQUE / PRODUITS
   --------------------------------------------------------------------- */

/* Titres des produits : empêche la couleur bleue du thème/Elementor */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product a .woocommerce-loop-product__title{
  color: var(--elo-texte) !important;
}

/* Liens des fiches produits */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link{
  color: var(--elo-texte) !important;
  text-decoration: none;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title{
  color: var(--elo-brun) !important;
}

/* Prix */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price *,
.woocommerce-page ul.products li.product .price,
.woocommerce-page ul.products li.product .price *{
  color: var(--elo-brun) !important;
  font-weight: 600;
}

/* Boutons WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  background-color: var(--elo-brun) !important;
  color: #ffffff !important;
  border-radius: 999px;
  text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background-color: var(--elo-brun-survol) !important;
  color: #ffffff !important;
}

/* Titres sur les pages produit */
.woocommerce div.product .product_title,
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title{
  color: var(--elo-texte) !important;
}

/* Liens WooCommerce génériques */
.woocommerce a:not(.button),
.woocommerce-page a:not(.button){
  color: var(--elo-brun);
}

.woocommerce a:not(.button):hover,
.woocommerce-page a:not(.button):hover{
  color: var(--elo-brun-survol);
}

/* ---------------------------------------------------------------------
   11. ELEMENTOR
   Évite qu'Elementor impose une couleur bleue aux liens/titres.
   --------------------------------------------------------------------- */
.elementor-widget-text-editor a,
.elementor-widget-heading a{
  color: var(--elo-brun);
}

.elementor-widget-text-editor a:hover,
.elementor-widget-heading a:hover{
  color: var(--elo-brun-survol);
}

/* Les titres WooCommerce restent prioritaires même dans Elementor */
.elementor .woocommerce ul.products li.product .woocommerce-loop-product__title{
  color: var(--elo-texte) !important;
}