/**
 * LLA Home Blocks — styles publics
 * Version: 0.1.5
 *
 * Changelog 0.1.5 :
 * - FIX: bouton .lla-home-btn--primary visible — !important sur color/background +
 *        text-decoration:none pour battre la surcharge Hostinger/Hello/thème qui
 *        rendait le texte du CTA hero invisible.
 * - FEAT: Régions affichent toutes les régions par défaut même sans artisans
 *        (toggle "Masquer régions vides" en admin pour le comportement précédent).
 *
 * Changelog 0.1.2 :
 * - FIX: grid showcase rendu autonome — toutes les règles grid sont scopées sous
 *        .lla-home-showcase ul.lla-shop-grid avec !important. Fonctionne même si :
 *        (1) le markup n'a pas la classe `products`, (2) lla-shop.css n'est pas
 *        chargé, (3) WP Rocket a stripé des règles dans son Used CSS. Le grid est
 *        garanti par lla-home-blocks.css seul.
 *
 * Changelog 0.1.1 :
 * - FIX: grid showcase produits — markup ajoute classe `products` pour activer
 *        le `display: grid !important` de lla-shop.css.
 *
 *
 * STRATÉGIE :
 * Ce fichier ne contient AUCUN style de carte produit. Les classes
 * .lla-product-card / .lla-card-* / .lla-shop-grid sont définies dans
 * lla-ecommerce et héritées via les dépendances WordPress.
 *
 * Couvre uniquement :
 *   - Section wrappers
 *   - Hero
 *   - Grille catégories asymétrique
 *   - Carrousel régions
 *   - Spotlight artisan
 *   - CTA vendeur
 *   - Boutons home
 */

/* ============================================
   1. Wrapper global + section
   ============================================ */
.lla-home {
  width: 100%;
}

.lla-home-section {
  padding: 64px 0;
  width: 100%;
  position: relative;
}
.lla-home-section + .lla-home-section {
  /* Pas de marge entre sections — chacune gère son padding interne. */
}

.lla-home-section--bg-cream { background: var(--lla-section-bg, var(--lla-cream-100, #F7F5F3)); }
.lla-home-section--bg-white { background: var(--lla-section-bg, var(--lla-white, #FFFFFF)); }
.lla-home-section--bg-dark  { background: var(--lla-section-bg, var(--lla-brown-900, #30251D)); color: var(--lla-section-text, #fff); }

/* Surcharge generic — dès qu'une section a --lla-section-bg défini en inline-style.
   EXCLUSIONS : Hero (a une background-image), Regions (mode dark dégradé fixe).
   Pour ces sections, --lla-section-bg ne change pas le fond — le voile/image reste.
   Si l'utilisateur veut un autre voile sur Hero, il a un champ dédié plus bas. */
.lla-home-section[style*="--lla-section-bg"]:not(.lla-home-hero):not(.lla-home-regions) {
  background: var(--lla-section-bg) !important;
}

.lla-home-section__head {
  max-width: 1280px;
  margin: 0 auto 32px;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.lla-home-section__head--center {
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.lla-home-section__head-text { max-width: 720px; }

.lla-home-section__title {
  font-family: var(--lla-font-serif, Georgia, serif);
  font-size: var(--lla-text-3xl, 1.875rem);
  font-weight: var(--lla-font-medium, 500);
  color: var(--lla-section-title, var(--lla-brown-900, #30251D));
  margin: 0 0 4px;
  line-height: 1.2;
}
.lla-home-section--bg-dark .lla-home-section__title { color: var(--lla-section-title, #fff); }

.lla-home-section__subtitle {
  font-size: var(--lla-text-base, 1rem);
  color: var(--lla-section-subtitle, var(--lla-brown-600, #7A6F5D));
  margin: 0;
  line-height: 1.5;
}
.lla-home-section--bg-dark .lla-home-section__subtitle { color: var(--lla-section-subtitle, rgba(255,255,255,0.65)); }

.lla-home-section__link {
  font-size: var(--lla-text-sm, 0.875rem);
  color: var(--lla-section-accent, var(--lla-primary, #D79942));
  text-decoration: none;
  border-bottom: 1px solid var(--lla-section-accent, var(--lla-primary, #D79942));
  padding-bottom: 1px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.lla-home-section__link:hover { opacity: 0.7; }

.lla-home-section__foot {
  text-align: center;
  margin-top: 32px;
  padding: 0 24px;
}

.lla-home-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s;
}
a:hover .lla-home-arrow { transform: translateX(3px); }

/* ============================================
   2. Boutons home
   ============================================ */
.lla-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: var(--lla-text-sm, 0.875rem);
  font-weight: var(--lla-font-medium, 500);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
  line-height: 1;
}
.lla-home-btn--primary,
a.lla-home-btn--primary,
.lla-home a.lla-home-btn--primary {
  background: var(--lla-section-accent, var(--lla-primary, #D79942)) !important;
  color: var(--lla-brown-900, #30251D) !important;
  text-decoration: none !important;
}
.lla-home-btn--primary:hover,
a.lla-home-btn--primary:hover {
  background: var(--lla-section-accent, var(--lla-primary-hover, #C88835)) !important;
  color: var(--lla-brown-900, #30251D) !important;
  filter: brightness(0.92);
}
.lla-home-btn--ghost {
  background: transparent;
  color: var(--lla-brown-700, #5C5245);
  border-color: var(--lla-beige-400, #D4C9BD);
}
.lla-home-btn--ghost:hover {
  background: var(--lla-cream-100, #F7F5F3);
  color: var(--lla-brown-900, #30251D);
}
.lla-home-section--bg-dark .lla-home-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.lla-home-section--bg-dark .lla-home-btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}

/* ============================================
   3. Section Hero
   ============================================ */
.lla-home-hero {
  min-height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 96px 24px 0;
  position: relative;
}
.lla-home-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lla-home-hero__title {
  font-family: var(--lla-font-serif, Georgia, serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 4px;
  line-height: 1.15;
  color: var(--lla-section-title, #fff);
}
.lla-home-hero__subtitle {
  font-family: var(--lla-font-serif, Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-style: italic;
  color: var(--lla-section-subtitle, var(--lla-primary, #D79942));
  margin: 0 0 24px;
  line-height: 1.2;
}
.lla-home-hero__description {
  font-size: var(--lla-text-base, 1rem);
  line-height: 1.6;
  color: var(--lla-section-text, rgba(255,255,255,0.92));
  margin: 0 0 32px;
}
.lla-home-hero__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.lla-home-hero__ctas .lla-home-btn--ghost {
  background: rgba(255,255,255,0.92);
  color: var(--lla-brown-800, #3E372F);
  border-color: transparent;
}
.lla-home-hero__ctas .lla-home-btn--ghost:hover {
  background: #fff;
}

.lla-home-hero__reassurance {
  border-radius: 25px 25px 0 0;
  list-style: none;
  margin: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 150px;
  flex-wrap: wrap;
  padding: 16px 24px;
  width: 100%;
  margin-top: auto;
}
.lla-home-reassurance__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--lla-text-sm, 0.875rem);
  color: var(--lla-brown-700, #5C5245);
  margin: 0;
}
.lla-home-reassurance__item .lla-home-icon {
  color: var(--lla-primary, #D79942);
}

/* ============================================
   4. Grille catégories asymétrique
   ============================================ */
.lla-home-categories__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 200px 130px;
  gap: 12px;
}
.lla-home-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  text-decoration: none;
  color: #fff;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lla-home-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(48,37,29,0.15);
}
.lla-home-cat-card--hero    { grid-column: 1; grid-row: 1; }
.lla-home-cat-card--medium:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.lla-home-cat-card--medium:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.lla-home-cat-card--small {
  grid-row: 2;
}
.lla-home-cat-card--small:nth-of-type(4) { grid-column: 1; }
.lla-home-cat-card--small:nth-of-type(5) { grid-column: 2; }
.lla-home-cat-card--small:nth-of-type(6) { grid-column: 3; }
.lla-home-cat-card--small:nth-of-type(7) {
  grid-column: 1 / -1;
  grid-row: 3;
}

.lla-home-cat-card__title {
  font-size: var(--lla-text-xl, 1.25rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 4px;
  color: #fff;
  line-height: 1.2;
}
.lla-home-cat-card--hero .lla-home-cat-card__title { font-size: var(--lla-text-2xl, 1.5rem); }
.lla-home-cat-card--small .lla-home-cat-card__title { font-size: var(--lla-text-base, 1rem); }

.lla-home-cat-card__subtitle {
  font-size: var(--lla-text-xs, 0.75rem);
  color: rgba(255,255,255,0.85);
  margin: 0 0 4px;
}
.lla-home-cat-card__meta {
  font-size: var(--lla-text-xs, 0.75rem);
  color: rgba(255,255,255,0.75);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lla-home-cat-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.95);
  color: var(--lla-brown-800, #3E372F);
  font-size: 10px;
  font-weight: var(--lla-font-medium, 500);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lla-home-cat-card__badge--promo  { background: var(--lla-error, #EF4444); color: #fff; }
.lla-home-cat-card__badge--new    { background: var(--lla-success, #10B981); color: #fff; }
.lla-home-cat-card__badge--season { background: var(--lla-primary, #D79942); color: var(--lla-brown-900, #30251D); }

@media (max-width: 900px) {
  .lla-home-categories__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .lla-home-cat-card--hero { grid-column: 1 / -1; min-height: 200px; }
  .lla-home-cat-card--medium:nth-of-type(2),
  .lla-home-cat-card--medium:nth-of-type(3) { grid-column: auto; grid-row: auto; min-height: 130px; }
  .lla-home-cat-card--small { grid-column: auto !important; grid-row: auto !important; min-height: 100px; }
}

/* ============================================
   5. Carrousel régions
   ============================================ */
.lla-home-regions {
  padding: 56px 0;
}
.lla-home-regions--dark {
  background: linear-gradient(135deg, var(--lla-brown-900, #30251D) 0%, #1A130C 100%);
  color: #fff;
}
.lla-home-regions--light {
  background: var(--lla-cream-100, #F7F5F3);
}

.lla-home-regions__layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
}
.lla-home-regions__sidebar { padding-right: 16px; }
.lla-home-regions__title {
  font-family: var(--lla-font-serif, Georgia, serif);
  font-size: var(--lla-text-2xl, 1.5rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 6px;
  line-height: 1.2;
}
.lla-home-regions--dark .lla-home-regions__title { color: #fff; }
.lla-home-regions__subtitle {
  font-size: var(--lla-text-sm, 0.875rem);
  margin: 0 0 16px;
}
.lla-home-regions--dark .lla-home-regions__subtitle { color: rgba(255,255,255,0.7); }

.lla-home-regions__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 140px;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.lla-home-regions__track::-webkit-scrollbar { height: 6px; }
.lla-home-regions__track::-webkit-scrollbar-thumb { background: rgba(212,153,66,0.4); border-radius: 999px; }

.lla-home-region-card {
  scroll-snap-align: start;
  height: 180px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(212,153,66,0.2);
  transition: transform 0.2s, border-color 0.2s;
  overflow: hidden;
}
.lla-home-region-card:hover {
  transform: translateY(-2px);
  border-color: var(--lla-primary, #D79942);
}
.lla-home-region-card__name {
  font-size: var(--lla-text-base, 1rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 2px;
  color: #fff;
  line-height: 1.2;
}
.lla-home-region-card__count {
  font-size: var(--lla-text-xs, 0.75rem);
  color: rgba(255,255,255,0.7);
}

@media (max-width: 700px) {
  .lla-home-regions__layout {
    grid-template-columns: 1fr;
  }
  .lla-home-regions__sidebar { padding-right: 0; }
}

/* ============================================
   5b. Métiers — mosaïque (distinct visuellement des régions)
   ============================================ */
.lla-home-metiers {
  padding: 64px 0;
}
.lla-home-metiers__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.lla-home-metier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  text-decoration: none;
  color: var(--lla-brown-900, #30251D);
  border-radius: 10px;
  background-color: var(--lla-cream-200, #F0EBE6);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  min-height: 130px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid transparent;
}
.lla-home-metier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(48,37,29,0.12);
  border-color: var(--lla-primary, #D79942);
}
/* Quand une image est posée, le voile sombre prend le relais → texte blanc */
.lla-home-metier-card[style*="background-image"] {
  color: #fff;
}
.lla-home-metier-card[style*="background-image"] .lla-home-metier-card__name {
  color: #fff;
}
.lla-home-metier-card[style*="background-image"] .lla-home-metier-card__count {
  color: rgba(255,255,255,0.8);
}
.lla-home-metier-card__name {
  font-size: var(--lla-text-base, 1rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 2px;
  line-height: 1.2;
}
.lla-home-metier-card__count {
  font-size: var(--lla-text-xs, 0.75rem);
  color: var(--lla-brown-600, #7A6F5D);
}

/* Variante carousel scroll horizontal */
.lla-home-metiers--carousel .lla-home-metiers__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.lla-home-metiers--carousel .lla-home-metier-card {
  scroll-snap-align: start;
}

/* Mode dark : texte blanc partout */
.lla-home-section--bg-dark.lla-home-metiers .lla-home-metier-card {
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}
.lla-home-section--bg-dark.lla-home-metiers .lla-home-metier-card__name { color: #fff; }
.lla-home-section--bg-dark.lla-home-metiers .lla-home-metier-card__count { color: rgba(255,255,255,0.7); }

@media (max-width: 700px) {
  .lla-home-metiers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   6. Spotlight artisan
   ============================================ */
.lla-home-spotlight__card {
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--lla-cream-200, #F0EBE6);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}
.lla-home-spotlight__media {
  background: linear-gradient(135deg, var(--lla-brown-700, #5C5245), var(--lla-brown-900, #30251D));
  background-size: cover;
  background-position: center;
  padding: 20px;
  display: flex;
  align-items: flex-end;
}
.lla-home-spotlight__tag {
  background: rgba(212,153,66,0.2);
  color: var(--lla-primary, #D79942);
  font-size: var(--lla-text-xs, 0.75rem);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: var(--lla-font-medium, 500);
}
.lla-home-spotlight__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lla-home-spotlight__eyebrow {
  font-size: var(--lla-text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lla-primary, #D79942);
  margin-bottom: 6px;
  font-weight: var(--lla-font-medium, 500);
}
.lla-home-spotlight__headline {
  font-family: var(--lla-font-serif, Georgia, serif);
  font-size: var(--lla-text-2xl, 1.5rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 12px;
  color: var(--lla-brown-900, #30251D);
  line-height: 1.25;
}
.lla-home-spotlight__description {
  font-size: var(--lla-text-sm, 0.875rem);
  line-height: 1.6;
  color: var(--lla-brown-700, #5C5245);
  margin: 0 0 16px;
}
.lla-home-spotlight__quote {
  border-left: 3px solid var(--lla-primary, #D79942);
  padding: 4px 0 4px 14px;
  margin: 0 0 18px;
  font-style: italic;
  color: var(--lla-brown-800, #3E372F);
  font-size: var(--lla-text-sm, 0.875rem);
  line-height: 1.6;
}

@media (max-width: 700px) {
  .lla-home-spotlight__card { grid-template-columns: 1fr; }
  .lla-home-spotlight__media { min-height: 220px; }
}

/* ============================================
   7. CTA recrutement vendeur
   ============================================ */
.lla-home-vendor-cta__card {
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--lla-brown-900, #30251D) 0%, var(--lla-brown-700, #5C5245) 100%);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  color: #fff;
}
.lla-home-vendor-cta__media {
  background-size: cover;
  background-position: center;
  background-color: var(--lla-brown-800, #3E372F);
}
.lla-home-vendor-cta__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lla-home-vendor-cta__eyebrow {
  font-size: var(--lla-text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lla-primary, #D79942);
  margin-bottom: 6px;
  font-weight: var(--lla-font-medium, 500);
}
.lla-home-vendor-cta__title {
  font-size: var(--lla-text-2xl, 1.5rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0;
  color: #fff;
  line-height: 1.2;
}
.lla-home-vendor-cta__subtitle {
  font-family: var(--lla-font-serif, Georgia, serif);
  font-style: italic;
  color: var(--lla-primary, #D79942);
  margin: 0 0 14px;
  font-size: var(--lla-text-xl, 1.25rem);
}
.lla-home-vendor-cta__description {
  font-size: var(--lla-text-sm, 0.875rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0 0 16px;
}
.lla-home-vendor-cta__bullets {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.lla-home-vendor-cta__bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--lla-text-sm, 0.875rem);
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}
.lla-home-vendor-cta__bullets .lla-home-icon {
  color: var(--lla-primary, #D79942);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .lla-home-vendor-cta__card { grid-template-columns: 1fr; }
  .lla-home-vendor-cta__media { min-height: 200px; }
}

/* ============================================
   8. Layouts showcase (la grille .lla-shop-grid vient de lla-ecommerce)
   ============================================ */
.lla-home-showcase__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   Showcase grid — CSS autonome, ne dépend de rien
   ============================================
   On scope tout sous .lla-home-showcase pour que ça marche même si :
   - le markup n'a pas la classe `products` (cache ou PHP non uploadé)
   - lla-shop.css n'est pas chargé pour une raison quelconque
   - WP Rocket a stripé des règles dans son Used CSS
   Tous les sélecteurs ciblent .lla-home-showcase ul.lla-shop-grid avec !important. */

.lla-home-showcase ul.lla-shop-grid,
.lla-home-section.lla-home-showcase ul.lla-shop-grid {
  display: grid !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1280px !important;
  box-sizing: border-box;
}

.lla-home-showcase ul.lla-shop-grid > li,
.lla-home-showcase ul.lla-shop-grid > li.product,
.lla-home-showcase ul.lla-shop-grid > li.lla-product-card {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  clear: none !important;
  box-sizing: border-box !important;
}

.lla-home-showcase ul.lla-shop-grid::before,
.lla-home-showcase ul.lla-shop-grid::after {
  content: none !important;
  display: none !important;
}

/* Variantes de colonnes — selecteurs avec ou sans classe products. */
.lla-home-showcase--grid-3 ul.lla-shop-grid { grid-template-columns: repeat(3, 1fr) !important; }
.lla-home-showcase--grid-4 ul.lla-shop-grid { grid-template-columns: repeat(4, 1fr) !important; }
.lla-home-showcase--grid-5 ul.lla-shop-grid { grid-template-columns: repeat(5, 1fr) !important; }

.lla-home-showcase--carousel ul.lla-shop-grid {
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(220px, 1fr) !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px !important;
}
.lla-home-showcase--carousel .lla-product-card { scroll-snap-align: start; }

@media (max-width: 1100px) {
  .lla-home-showcase--grid-5 ul.lla-shop-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .lla-home-showcase--grid-4 ul.lla-shop-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  .lla-home-showcase--grid-5 ul.lla-shop-grid,
  .lla-home-showcase--grid-4 ul.lla-shop-grid,
  .lla-home-showcase--grid-3 ul.lla-shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lla-home-section__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   9. Specificity boost — bat Elementor kit + thèmes agressifs
   ============================================
   Elementor pose des sélecteurs de type `.elementor-kit-XX h1` (0,1,1) qui
   écrasent mes COULEURS. Je redéclare les règles critiques avec un chaînage
   `.lla-home` (0,2,0) qui gagne.

   IMPORTANT — fonts : par défaut, on HÉRITE du thème/Elementor (font-family:
   inherit). Mes anciennes valeurs hardcoded (Georgia, system sans) écrasaient
   les Google Fonts du thème. Maintenant si tu charges Cormorant ou Inter via
   Elementor, mes titres et corps utiliseront ces fonts.

   Override possible par section via le champ "Police titre / Police corps"
   dans l'admin (--lla-section-font-title / --lla-section-font-body). */

/* Color + size + weight overrides — pas de font-family ici par défaut.
   Sans déclaration font-family, Elementor's `.elementor-kit-XX h1` (Theme Style →
   Typographie → H1) s'applique nativement avec sa font + sa hauteur de ligne.
   Le user garde sa cohérence typo Elementor. */

.lla-home .lla-home-hero__title,
.lla-home h1.lla-home-hero__title {
  font-weight: var(--lla-font-medium, 500);
  color: var(--lla-section-title, #fff) !important;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.lla-home .lla-home-hero__subtitle {
  font-style: italic;
  color: var(--lla-section-subtitle, var(--lla-primary, #D79942)) !important;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}

.lla-home .lla-home-hero__description {
  color: var(--lla-section-text, rgba(255,255,255,0.92)) !important;
  font-size: var(--lla-text-base, 1rem);
  line-height: 1.6;
}

.lla-home .lla-home-section__title,
.lla-home h2.lla-home-section__title {
  font-weight: var(--lla-font-medium, 500);
  color: var(--lla-section-title, var(--lla-brown-900, #30251D)) !important;
  font-size: var(--lla-text-3xl, 1.875rem);
  line-height: 1.2;
  margin: 0 0 4px;
}
.lla-home .lla-home-section--bg-dark .lla-home-section__title {
  color: var(--lla-section-title, #fff) !important;
}

.lla-home .lla-home-section__subtitle {
  color: var(--lla-section-subtitle, var(--lla-brown-600, #7A6F5D)) !important;
  font-size: var(--lla-text-base, 1rem);
  line-height: 1.5;
  margin: 0;
}
.lla-home .lla-home-section--bg-dark .lla-home-section__subtitle {
  color: var(--lla-section-subtitle, rgba(255,255,255,0.65)) !important;
}

.lla-home .lla-home-cat-card__title,
.lla-home h3.lla-home-cat-card__title {
  color: #fff !important;
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 4px;
}

.lla-home .lla-home-region-card__name,
.lla-home h3.lla-home-region-card__name {
  color: #fff !important;
  font-size: var(--lla-text-base, 1rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 2px;
}

.lla-home .lla-home-metier-card__name,
.lla-home h3.lla-home-metier-card__name {
  color: var(--lla-section-title, var(--lla-brown-900, #30251D)) !important;
  font-size: var(--lla-text-base, 1rem);
  font-weight: var(--lla-font-medium, 500);
  margin: 0 0 2px;
}
.lla-home .lla-home-metier-card[style*="background-image"] .lla-home-metier-card__name {
  color: #fff !important;
}

.lla-home .lla-home-spotlight__headline,
.lla-home h3.lla-home-spotlight__headline {
  font-weight: var(--lla-font-medium, 500);
  color: var(--lla-section-title, var(--lla-brown-900, #30251D)) !important;
  font-size: var(--lla-text-2xl, 1.5rem);
  line-height: 1.25;
  margin: 0 0 12px;
}

.lla-home .lla-home-vendor-cta__title,
.lla-home h2.lla-home-vendor-cta__title {
  color: var(--lla-section-title, #fff) !important;
  font-size: var(--lla-text-2xl, 1.5rem);
  font-weight: var(--lla-font-medium, 500);
  line-height: 1.2;
  margin: 0;
}

.lla-home .lla-home-vendor-cta__subtitle {
  font-style: italic;
  color: var(--lla-section-subtitle, var(--lla-primary, #D79942)) !important;
  font-size: var(--lla-text-xl, 1.25rem);
}

.lla-home .lla-home-vendor-cta__description {
  color: var(--lla-section-text, rgba(255,255,255,0.78)) !important;
}

/* ─── Override font-family UNIQUEMENT quand l'utilisateur a saisi un override
       en admin (la section a alors --lla-section-font-title posée en inline-style).
       Sans cette déclaration côté section, Elementor's typo H1/H2/H3 reste maîtresse. */

.lla-home-section[style*="--lla-section-font-title"] .lla-home-hero__title,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-hero__subtitle,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-section__title,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-cat-card__title,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-region-card__name,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-metier-card__name,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-spotlight__headline,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-vendor-cta__title,
.lla-home-section[style*="--lla-section-font-title"] .lla-home-vendor-cta__subtitle {
  font-family: var(--lla-section-font-title) !important;
}

.lla-home-section[style*="--lla-section-font-body"] .lla-home-hero__description,
.lla-home-section[style*="--lla-section-font-body"] .lla-home-section__subtitle,
.lla-home-section[style*="--lla-section-font-body"] .lla-home-spotlight__description,
.lla-home-section[style*="--lla-section-font-body"] .lla-home-vendor-cta__description,
.lla-home-section[style*="--lla-section-font-body"] p {
  font-family: var(--lla-section-font-body) !important;
}

/* Anti-Elementor margin reset : Elementor pose souvent margin-bottom: 0.67em
   sur les h1/h2/h3 globalement. Je remets mes margins. */
.lla-home h1, .lla-home h2, .lla-home h3, .lla-home h4 {
  margin-top: 0;
}

/* Anti-Elementor link reset : couleur des liens Elementor = primary global,
   mes liens internes (titres cliquables) doivent rester sur la couleur du bloc.
   + margin de respiration sur les cartes pour que le shadow au hover
   ne soit pas clippé par overflow:hidden des conteneurs parents. */
.lla-home .lla-home-cat-card,
.lla-home .lla-home-region-card,
.lla-home .lla-home-metier-card {
  color: inherit !important;
  text-decoration: none !important;
  margin: 10px;
}
.lla-home .lla-home-cat-card:hover,
.lla-home .lla-home-region-card:hover,
.lla-home .lla-home-metier-card:hover {
  text-decoration: none !important;
}