/* =========================================================
   LA BONNE ÉTOILE — CSS OPTIMISÉ AVEC VARIABLES
   ========================================================= */
:root{
  --color-primary:#A85C70;
  --color-primary-hover:#a95e70;
  --color-primary-dark:#8f4c5e;
  --color-primary-rgb:168,92,112;   /* pour rgba() */
  --color-bg:#fdf9f7;
  --color-ink:#000;
  --color-muted:#6a5f56; /* contraste renforcé */
}

/* =========================================================
   BASE & STRUCTURE
   ========================================================= */

/* Conteneur produits (catalogues / sections personnalisées La Bonne Étoile) */
.yenedal-products{
  background-color:var(--color-bg);
  padding:60px 5vw;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  box-sizing:border-box;
}
/* Header */
.site-header{
  background-color:var(--color-bg);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.site-header .site-description{
  color:var(--color-primary);
  font-size:25px;
}
.site-logo img{ filter:none; }

/* Boutons globaux */
:where(.button,.elementor-button,.wp-block-button__link,.bouton-hero){
  padding:16px 32px;
  border-radius:8px;
  background-color:var(--color-primary);
  color:#fff;
  font-size:16px;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  outline:0;
}
:where(.button,.elementor-button,.wp-block-button__link,.bouton-hero):hover{
  background-color:var(--color-primary-hover);
  transform:translateY(-1px);
}
:where(.button,.elementor-button,.wp-block-button__link,.bouton-hero):focus-visible{
  box-shadow:0 0 0 3px rgba(var(--color-primary-rgb), .35);
}
:where(.button,.elementor-button,.wp-block-button__link,.bouton-hero):disabled{
  opacity:.6; cursor:not-allowed;
}

/* =========================================================
   HOME — SECTION PRODUITS
   ========================================================= */
.yb-home-grid{
  background-color:var(--color-bg);
  padding:32px 5vw;
}
.yb-home-grid h2{
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:clamp(28px, 5vw, 40px);
  line-height:1.25;
  font-weight:700;
  color:var(--color-ink);
  margin:0 0 12px;
}
.yb-home-grid p{
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(18px, 2.6vw, 22px);
  line-height:1.5;
  font-style:italic;
  color:var(--color-muted);
  max-width:980px;
  margin:0 auto 22px;
}
.yg-cta{ text-align:center; margin:0 0 18px; }
.yg-btn{
  display:inline-block;
  background-color:var(--color-primary);
  color:#fff;
  padding:16px 28px;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:transform .2s ease, background-color .2s ease;
}
.yg-btn:hover{ background-color:var(--color-primary-dark); transform:translateY(-1px); }

/* =========================================================
   WOOCOMMERCE — LISTINGS & CARTES
   ========================================================= */

/* Masquer variations en archives */
.woocommerce ul.products li.product .variations{ display:none; }

/* Cartes uniformes */
.archive .woocommerce ul.products li.product,
.post-type-archive-product .woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:18px;
  line-height:1.3;
  margin:8px 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:calc(1.3em * 3);
}
.woocommerce ul.products li.product .price{
  margin:6px 0 10px;
  min-height:1.6em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.woocommerce ul.products li.product .button{
  margin-top:auto;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1.2;
}

/* Galerie produit : bouton loupe */
.woocommerce-product-gallery__trigger{
  background-color:rgba(var(--color-primary-rgb), .8) !important;
  color:#fff !important;
  border-radius:50%;
}
.woocommerce-product-gallery__trigger:hover{
  background-color:rgba(var(--color-primary-rgb), 1);
}

/* Mon compte (fragile si markup change) */
.woocommerce-MyAccount-content p:nth-of-type(2){ display:none; }
/* Cartes produits : hauteur stable + images robustes */
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;     /* carré propre en grille */
  object-fit: cover;        /* évite les distorsions */
  background: #f1eaea;      /* placeholder doux */
}

/* Évite les "grands vides" : pas de min-height rigide côté carte */
.woocommerce ul.products li.product { min-height: unset; }

/* Fallback coupe-titre pour navigateurs sans -webkit-line-clamp */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display:block;           /* déjà défini, mais on s'assure du fallback */
  overflow:hidden;
  max-height: calc(1.3em * 3);
}

/* Boutons Woo : garantis pleine largeur cohérente en grille étroite */
@media (max-width: 768px){
  .woocommerce ul.products li.product .button { width:100%; }
}

/* =========================================================
   HÉRO SECTION
   ========================================================= */
.yb-hero{
  min-height:70vh;
  padding-top:40px;
  padding-bottom:60px;
  background-position:center top;
  background-size:cover;
}
.yb-hero .elementor-heading-title{
  font-size:clamp(28px, 4vw, 36px);
  line-height:1.2;
  text-align:center;
}
.yb-hero .elementor-button{
  font-size:16px;
  padding:12px 28px;
  margin-top:20px;
  display:inline-block;
}

/* =========================================================
   FOOTER
   ========================================================= */
#footer-columns-manual{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:4rem;
  max-width:900px;
  margin:2em auto 0;
}
#footer-columns-manual .footer-col{ width:250px; text-align:center; }
.footer-column p{ margin-bottom:10px; }
.footer-column ul{ margin-top:0; }

/* Nouveau : adaptation pour les petits écrans */
@media (max-width: 768px) {
  #footer-columns-manual .footer-col {
    width: 100%; /* La largeur devient 100% sur mobile */
    max-width: none; /* Annule la max-width précédente */
  }
}
/* =========================================================
   TYPO PERF
   ========================================================= */
h1.elementor-heading-title{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:600;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
  animation:none;
  transition:none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:768px){
  section.yenedal-products{ padding:40px 4vw; }

  .yb-home-grid h2{ font-size:clamp(26px,5vw,30px); }
  .yb-home-grid p{ font-size:clamp(18px,4.6vw,20px); }

  .woocommerce :where(ul.products li.product){
    min-height:auto;
    padding:10px;
    display:flex; flex-direction:column;
  }

  /* Images : carré propre, sans déformation */
  .woocommerce :where(ul.products li.product) img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    height:auto; /* pas de max-height rigide */
  }

  .woocommerce :where(ul.products li.product) .woocommerce-loop-product__title{
    font-size:1.0625rem; /* ~17px */
    line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
    min-height:calc(1.3em * 3);
  }

  .woocommerce :where(ul.products li.product) .price{
    font-size:0.95rem; margin-bottom:8px;
    min-height:1.6em; display:flex; align-items:center; justify-content:center;
  }

  .woocommerce :where(ul.products li.product) .ast-woo-product-category,
  .woocommerce :where(ul.products li.product) .woocommerce-loop-product__category,
  .woocommerce :where(ul.products li.product) .product-category{
    min-height:1.2em; margin-top:8px;
  }

  .woocommerce :where(ul.products li.product) .button{
    padding:12px 20px; font-size:0.95rem;
    min-height:48px; display:flex; align-items:center; justify-content:center;
    text-align:center; line-height:1.2; margin-top:auto;
  }

  .yenedal-products .button{
    font-size:0.9rem; padding:10px 16px; min-height:48px;
    display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.2;
  }
}

/* =========================================================
   ACCESSIBILITÉ — Motion réduit
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
/* =========================================================
   OPTIMISATION PRODUITS MOBILE
   ========================================================= */

/* 1) Forcer 2 colonnes propres sur mobile */
@media (max-width:768px){
  .woocommerce ul.products li.product{ width:50% !important; }
  .woocommerce ul.products{ gap:10px !important; }
}

/* 2) Peinture paresseuse et taille intrinsèque = moins de jank */
.woocommerce ul.products li.product a img{
  content-visibility:auto;
  contain-intrinsic-size:400px 400px;
}
/* =========================================================
   Optimisation polices Google — font-display: swap
   ========================================================= */

/* Playfair Display */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYh6OS.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXBTzYh6OS.woff2') format('woff2');
}

/* Cormorant Garamond */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/cormorantgaramond/v14/co3bmW9ljjQGyFcsY7U6ko3L0lw-43Z1A9k.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/cormorantgaramond/v14/co3ZmW9ljjQGyFcsY7U6ko3L0lw-43ZzCNEJ.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/cormorantgaramond/v14/co3bmW9ljjQGyFcsY7U6ko3L0lw-43ZVA9k.woff2') format('woff2');
}