/*
Theme Name:   L'empreinte des âmes - Kadence Child
Theme URI:    https://llm-creations.fr
Description:  Thème enfant Kadence pour L'empreinte des âmes
Author:       L'empreinte des âmes
Template:     kadence
Version:      2.0.4
Text Domain:  llm-creations
*/

/* ============================================================
   GOOGLE FONTS — calligraphie + serif élégant + corps
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ============================================================
   VARIABLES & FONDATIONS — inspirées du logo
   Blanc pur, noir élégant, or artisan, accents tricolores
   ============================================================ */

:root {
  --llm-blanc:       #FFFFFF;
  --llm-ivoire:      #FDF8F7;     /* fond ivoire chaud — identique à l'app */
  --llm-ivoire-card: #FFFCFB;     /* cartes sur fond ivoire */
  --llm-noir:        #110F0F;     /* noir chaud — identique à l'app */
  --llm-or:          #B0651A;
  --llm-or-clair:    #D2913A;
  --llm-or-fonce:    #864A10;
  --llm-rose:        #E8A0AA;     /* fleurs du logo */
  --llm-rose-pale:   #F7E6E6;     /* aquarelle rosée du logo */
  --llm-sauge:       #A9B79E;     /* feuillage du logo */
  --llm-gris-clair:  #FDF8F7;     /* = ivoire (harmonisé avec l'app) */
  --llm-gris-moyen:  #E6D8D6;     /* bord chaud */
  --llm-gris-texte:  #6C605E;
  --llm-noir-soft:   #221D1D;

  /* Tricolore — touches très discrètes */
  --llm-bleu:        #002395;     /* bleu du drapeau français */
  --llm-rouge:       #ED2939;     /* rouge du drapeau */

  /* ── Override variables Kadence (/!\ priorité sur le Customizer) ── */
  /* Kadence utilise --global-palette1..9 pour ses propres éléments    */
  --global-palette1: #B0651A;    /* or → couleur primaire boutons Kadence */
  --global-palette2: #864A10;    /* or foncé → hover */
  --global-palette3: #110F0F;    /* noir chaud → titres */
  --global-palette4: #6C605E;    /* gris texte → paragraphes */
  --global-palette5: #E6D8D6;    /* gris bord → séparateurs */
  --global-palette6: #FDF8F7;    /* ivoire → fond clair sections */
  --global-palette7: #FFFFFF;    /* blanc pur */
  --global-palette8: #221D1D;    /* noir soft → footer */
  --global-palette9: #E6D8D6;    /* gris léger */

  /* Typographie — logo inspire : calligraphie + serif */
  --font-script:     'Pinyon Script', 'Dancing Script', cursive;
  --font-titre:      'Cormorant Garamond', 'Georgia', serif;
  --font-corps:      'Montserrat', 'Helvetica Neue', sans-serif;

  --rayon:           4px;
  --rayon-carte:     8px;
  --ombre-douce:     0 2px 20px rgba(0,0,0,0.07);
  --ombre-or:        0 4px 20px rgba(201,168,76,0.25);
  --transition:      all 0.3s ease;
}

/* ============================================================
   POLICE CALLIGRAPHIQUE — classe utilitaire
   Utilise la même écriture que "Llm" dans le logo
   ============================================================ */

.llm-script,
.llm-brand-name,
.site-title {
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* ============================================================
   SÉPARATEUR — décoration inspirée du logo
   Remplace les simples lignes horizontales
   ============================================================ */

.llm-separateur-dentelle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px auto;
}

.llm-separateur-dentelle::before,
.llm-separateur-dentelle::after {
  content: '';
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--llm-or), transparent);
}

.llm-separateur-dentelle span {
  color: var(--llm-or);
  font-family: var(--font-script);
  font-size: 1.4rem;
  line-height: 1;
  user-select: none;
}

/* ============================================================
   BADGE MADE IN FRANCE — tricolore très discret
   ============================================================ */

.llm-made-in-france {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-corps);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--llm-gris-texte);
}

.llm-made-in-france::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 12px;
  background: linear-gradient(to right,
    var(--llm-bleu)  0%   33.3%,
    var(--llm-blanc) 33.3% 66.6%,
    var(--llm-rouge) 66.6% 100%);
  border-radius: 2px;
  opacity: 0.85;
}

/* ============================================================
   TYPOGRAPHIE GLOBALE
   ============================================================ */

body {
  font-family: var(--font-corps);
  color: var(--llm-noir);
  background-color: var(--llm-ivoire);  /* fond ivoire chaud comme l'app */
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--llm-noir);
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1em; }

a {
  color: var(--llm-or-fonce);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--llm-or); }

/* ============================================================
   EN-TÊTE (HEADER)
   ============================================================ */

.site-header,
#masthead,
.kadence-header {
  background-color: var(--llm-blanc) !important;
  border-bottom: 1px solid var(--llm-gris-moyen);
  box-shadow: 0 1px 15px rgba(0,0,0,0.05);
}

/* Logo centré en mode bureau */
.site-logo img,
.custom-logo {
  max-height: 80px;
  width: auto;
}

/* Barre de navigation */
.main-navigation a,
.kadence-navigation a,
#site-navigation a {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--llm-noir) !important;
  padding: 8px 16px;
  transition: var(--transition);
}

.main-navigation a:hover,
.kadence-navigation a:hover {
  color: var(--llm-or) !important;
}

/* Ligne dorée sous l'item actif */
.main-navigation .current-menu-item > a,
.kadence-navigation .current-menu-item > a {
  color: var(--llm-or) !important;
  border-bottom: 2px solid var(--llm-or);
}

/* Icône panier */
.cart-contents,
.woocommerce-cart-icon {
  color: var(--llm-noir);
  position: relative;
}

.cart-contents:hover { color: var(--llm-or); }

.cart-contents .count {
  background-color: var(--llm-or);
  color: var(--llm-blanc);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -8px;
  right: -8px;
}

/* ============================================================
   BANDEAU HERO — PAGE D'ACCUEIL
   ============================================================ */

.llm-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: var(--llm-noir-soft);
}

.llm-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
  transition: transform 0.6s ease;
}

.llm-hero__content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  max-width: 800px;
}

.llm-hero__surtitre {
  font-family: var(--font-corps);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--llm-or);
  margin-bottom: 1rem;
  display: block;
}

.llm-hero__titre {
  /* Police calligraphique — identique au logo */
  font-family: var(--font-script);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 400;
  color: var(--llm-blanc);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
  line-height: 1;
}

.llm-hero__sous-titre {
  font-family: var(--font-corps);
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn-llm,
.llm-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--font-corps) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  border-radius: var(--rayon) !important;
  transition: var(--transition) !important;
  cursor: pointer !important;
}

/* Bouton principal — or */
.btn-llm-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page a.button.alt {
  background-color: var(--llm-or) !important;
  color: var(--llm-blanc) !important;
  border: 2px solid var(--llm-or) !important;
}

.btn-llm-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--llm-or-fonce) !important;
  border-color: var(--llm-or-fonce) !important;
  transform: translateY(-1px);
  box-shadow: var(--ombre-or);
}

/* Bouton secondaire — contour */
.btn-llm-outline,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt) {
  background-color: transparent !important;
  color: var(--llm-noir) !important;
  border: 2px solid var(--llm-noir) !important;
}

.btn-llm-outline:hover,
.woocommerce a.button:not(.alt):hover {
  background-color: var(--llm-noir) !important;
  color: var(--llm-blanc) !important;
}

/* Bouton hero — blanc */
.btn-llm-hero {
  display: inline-block;
  background-color: transparent;
  color: var(--llm-blanc);
  border: 2px solid var(--llm-blanc);
  font-family: var(--font-corps);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 42px;
  transition: var(--transition);
  margin: 0 8px;
}

.btn-llm-hero:hover {
  background-color: var(--llm-blanc);
  color: var(--llm-noir);
}

.btn-llm-hero-or {
  background-color: var(--llm-or);
  border-color: var(--llm-or);
  color: var(--llm-blanc);
}

.btn-llm-hero-or:hover {
  background-color: var(--llm-or-fonce);
  border-color: var(--llm-or-fonce);
  color: var(--llm-blanc);
}

/* ============================================================
   SECTION "NOS UNIVERS"
   ============================================================ */

.llm-univers {
  padding: 80px 0;
  background-color: var(--llm-blanc);
}

.llm-section-titre {
  text-align: center;
  margin-bottom: 60px;
}

/* Titre de section en calligraphie si classe .script ajoutée */
.llm-section-titre h2 {
  font-family: var(--font-titre);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 12px;
}

.llm-section-titre h2.script {
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.llm-section-titre .separateur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto;
}

.llm-section-titre .separateur::before,
.llm-section-titre .separateur::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--llm-or);
}

.llm-section-titre .separateur span {
  color: var(--llm-or);
  font-size: 1.2rem;
}

/* Les deux cartes d'univers étaient jointives (gap de 2 px), en mosaïque : des
   coins arrondis n'auraient eu aucun sens dans cette disposition. On les sépare
   pour qu'elles deviennent deux cartes distinctes, ce qui donne sa raison d'être
   à l'arrondi et à l'ombre. Arrondi volontairement discret et ombre très douce :
   le reste du site est en angles droits, une ombre marquée y ferait tache. */
.llm-univers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.llm-univers-carte {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

/* Ces cartes apparaissent en fondu au défilement. La règle qui gère ce fondu
   est chargée APRÈS celle-ci et pose « transition: opacity, transform » puis
   « transform: translateY(0) » sur l'état visible : avec un sélecteur d'une
   seule classe, le relief au survol serait donc écrasé sans rien afficher.
   On passe par la grille parente pour gagner en précision, et on reprend les
   transitions d'origine pour ne pas casser l'apparition. */
.llm-univers-grid .llm-univers-carte {
  transition: opacity 0.5s, transform 0.5s, box-shadow 0.4s ease;
}

.llm-univers-grid .llm-univers-carte.llm-visible:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  transform: translateY(-4px);
}

.llm-univers-carte__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.llm-univers-carte:hover .llm-univers-carte__img {
  transform: scale(1.05);
}

.llm-univers-carte__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
  transition: var(--transition);
}

.llm-univers-carte:hover .llm-univers-carte__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
}

.llm-univers-carte__tag {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--llm-or);
  font-weight: 600;
  margin-bottom: 6px;
}

.llm-univers-carte__nom {
  font-family: var(--font-titre);
  font-size: 1.8rem;
  font-style: italic;
  color: var(--llm-blanc);
  margin-bottom: 12px;
  line-height: 1.1;
}

.llm-univers-carte__lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--llm-blanc);
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: var(--transition);
}

.llm-univers-carte:hover .llm-univers-carte__lien {
  opacity: 1;
  transform: translateY(0);
}

.llm-univers-carte__lien::after {
  content: '→';
  transition: transform 0.2s ease;
}

.llm-univers-carte:hover .llm-univers-carte__lien::after {
  transform: translateX(4px);
}

/* ============================================================
   PRODUITS WOOCOMMERCE — GRILLE
   ============================================================ */

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product {
  margin: 0 !important;
  border-radius: var(--rayon-carte);
  overflow: hidden;
  background: var(--llm-blanc);
  box-shadow: var(--ombre-douce);
  transition: var(--transition);
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* Image produit */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
}

.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.03);
}

/* Infos produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--font-titre) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--llm-noir) !important;
  padding: 16px 16px 4px !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-corps) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--llm-or-fonce) !important;
  padding: 0 16px 8px !important;
  display: block !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--llm-gris-texte) !important;
  font-weight: 400 !important;
  margin-right: 6px;
}

/* Bouton ajouter au panier sur la carte */
.woocommerce ul.products li.product .button {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 8px 16px 16px !important;
  text-align: center !important;
  background-color: var(--llm-noir) !important;
  color: var(--llm-blanc) !important;
  border: none !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  padding: 11px !important;
  transition: var(--transition) !important;
}

.woocommerce ul.products li.product .button:hover {
  background-color: var(--llm-or) !important;
}

/* Badge "Nouveau" / "Promo" */
.woocommerce ul.products li.product .onsale {
  background-color: var(--llm-or) !important;
  color: var(--llm-blanc) !important;
  font-family: var(--font-corps) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
  top: 12px !important;
  left: 12px !important;
}

/* Badge "Sur commande" */
.llm-badge-commande {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: rgba(28,28,28,0.85);
  color: var(--llm-blanc);
  font-family: var(--font-corps);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

/* ============================================================
   FICHE PRODUIT — PAGE INDIVIDUELLE
   ============================================================ */

.woocommerce div.product {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 24px;
}

/* Galerie photos */
.woocommerce div.product div.images {
  width: 50% !important;
}

.woocommerce div.product div.images img {
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
}

.woocommerce div.product div.images .flex-viewport {
  border-radius: var(--rayon-carte);
  overflow: hidden;
}

/* Miniatures galerie */
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 20% !important;
  padding: 4px !important;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  border-radius: 4px !important;
  border: 2px solid transparent !important;
  transition: var(--transition) !important;
}

.woocommerce div.product div.images .flex-control-thumbs .flex-active {
  border-color: var(--llm-or) !important;
}

/* Infos produit à droite */
.woocommerce div.product div.summary {
  width: 46% !important;
  padding-left: 48px !important;
}

.woocommerce div.product .product_title {
  font-family: var(--font-titre) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2rem !important;
  color: var(--llm-noir) !important;
  margin-bottom: 8px !important;
}

.woocommerce div.product .price {
  font-family: var(--font-corps) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--llm-or-fonce) !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.9rem !important;
  color: var(--llm-gris-texte) !important;
  line-height: 1.8 !important;
  border-top: 1px solid var(--llm-gris-moyen) !important;
  border-bottom: 1px solid var(--llm-gris-moyen) !important;
  padding: 20px 0 !important;
  margin-bottom: 24px !important;
}

/* Variantes (tailles/couleurs) */
.woocommerce div.product table.variations {
  width: 100% !important;
  margin-bottom: 20px !important;
}

.woocommerce div.product table.variations td,
.woocommerce div.product table.variations th {
  padding: 8px 0 !important;
  vertical-align: middle !important;
}

.woocommerce div.product table.variations .label label {
  font-family: var(--font-corps) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--llm-noir) !important;
}

.woocommerce div.product table.variations select {
  border: 1px solid var(--llm-gris-moyen) !important;
  border-radius: var(--rayon) !important;
  padding: 10px 14px !important;
  font-family: var(--font-corps) !important;
  font-size: 0.85rem !important;
  width: 100% !important;
  background-color: var(--llm-blanc) !important;
  cursor: pointer !important;
}

.woocommerce div.product table.variations select:focus {
  border-color: var(--llm-or) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;
}

/* Quantité */
.woocommerce .quantity input {
  border: 1px solid var(--llm-gris-moyen) !important;
  border-radius: var(--rayon) !important;
  font-size: 1rem !important;
  text-align: center !important;
  height: 48px !important;
}

/* Bouton "Ajouter au panier" */
.woocommerce div.product .single_add_to_cart_button {
  background-color: var(--llm-or) !important;
  color: var(--llm-blanc) !important;
  border: none !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  border-radius: var(--rayon) !important;
  height: 54px !important;
  flex: 1 !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--llm-or-fonce) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ombre-or) !important;
}

/* ============================================================
   PAGE BOUTIQUE / CATÉGORIES
   ============================================================ */

.woocommerce-products-header {
  text-align: center;
  padding: 60px 0 40px;
  background-color: var(--llm-gris-clair);
}

.woocommerce-products-header__title {
  font-family: var(--font-titre) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--llm-noir) !important;
  margin-bottom: 12px !important;
}

/* Fil d'Ariane */
.woocommerce .woocommerce-breadcrumb {
  font-size: 0.75rem !important;
  color: var(--llm-gris-texte) !important;
  font-family: var(--font-corps) !important;
  letter-spacing: 0.05em !important;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--llm-gris-texte) !important;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--llm-or) !important;
}

/* Filtres et tri */
.woocommerce-ordering select {
  border: 1px solid var(--llm-gris-moyen) !important;
  border-radius: var(--rayon) !important;
  padding: 8px 14px !important;
  font-family: var(--font-corps) !important;
  font-size: 0.8rem !important;
}

/* ============================================================
   PANIER
   ============================================================ */

.woocommerce-cart table.cart td.actions .coupon .input-text {
  border: 1px solid var(--llm-gris-moyen);
  border-radius: var(--rayon);
  padding: 10px 14px;
  font-family: var(--font-corps);
}

.woocommerce-cart .cart_totals {
  background-color: var(--llm-gris-clair);
  border-radius: var(--rayon-carte);
  padding: 32px;
}

.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-titre);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 20px;
}

/* ============================================================
   TUNNEL DE COMMANDE (CHECKOUT)
   ============================================================ */

.woocommerce-checkout h3 {
  font-family: var(--font-titre) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  border-bottom: 1px solid var(--llm-gris-moyen) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  border: 1px solid var(--llm-gris-moyen) !important;
  border-radius: var(--rayon) !important;
  padding: 12px 14px !important;
  font-family: var(--font-corps) !important;
  font-size: 0.9rem !important;
  transition: var(--transition) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--llm-or) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}

.woocommerce form .form-row label {
  font-family: var(--font-corps) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--llm-noir) !important;
  margin-bottom: 6px !important;
}

/* ============================================================
   SECTION "À PROPOS / L'ATELIER"
   ============================================================ */

.llm-atelier {
  padding: 100px 0;
  background-color: var(--llm-gris-clair);
}

.llm-atelier-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.llm-atelier__img {
  border-radius: var(--rayon-carte);
  overflow: hidden;
  position: relative;
}

.llm-atelier__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.llm-atelier__img::after {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 60%;
  height: 60%;
  border: 2px solid var(--llm-or);
  border-radius: var(--rayon-carte);
  z-index: -1;
}

.llm-atelier__texte .llm-section-surtitre {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--llm-or);
  font-weight: 600;
  margin-bottom: 16px;
  display: block;
}

.llm-atelier__texte h2 {
  font-family: var(--font-titre);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 24px;
}

.llm-atelier__texte p {
  color: var(--llm-gris-texte);
  font-size: 0.95rem;
  line-height: 1.9;
}

/* ============================================================
   SECTION VALEURS / GAGES DE QUALITÉ
   ============================================================ */

.llm-valeurs {
  padding: 70px 0;
  background-color: var(--llm-blanc);
}

.llm-valeurs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.llm-valeur__icone {
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--llm-or);
}

.llm-valeur__titre {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 10px;
}

.llm-valeur__desc {
  font-size: 0.85rem;
  color: var(--llm-gris-texte);
  line-height: 1.7;
}

/* ============================================================
   BANDEAU OR (ANNONCE / PROMO)
   ============================================================ */

.llm-bandeau-or {
  background-color: var(--llm-or);
  color: var(--llm-blanc);
  text-align: center;
  padding: 14px 24px;
  font-family: var(--font-corps);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* ============================================================
   PIED DE PAGE (FOOTER)
   ============================================================ */

.site-footer,
#colophon {
  background-color: var(--llm-noir-soft) !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 60px 0 0 !important;
}

.footer-widgets {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 48px;
  margin-bottom: 48px;
}

.footer-widget h4,
.widget-title {
  font-family: var(--font-corps) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--llm-blanc) !important;
  margin-bottom: 20px !important;
}

.footer-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-widget ul li {
  margin-bottom: 10px;
}

.footer-widget ul li a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.85rem !important;
  transition: var(--transition) !important;
}

.footer-widget ul li a:hover {
  color: var(--llm-or) !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 24px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}

/* Réseaux sociaux footer */
.llm-social-links {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.llm-social-links a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.85rem;
  transition: var(--transition);
}

.llm-social-links a:hover {
  border-color: var(--llm-or);
  color: var(--llm-or) !important;
  background-color: rgba(201,168,76,0.1);
}

/* ============================================================
   MESSAGES WOOCOMMERCE
   ============================================================ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-top-color: var(--llm-or) !important;
  font-family: var(--font-corps) !important;
  font-size: 0.85rem !important;
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .llm-univers-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .llm-atelier-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .llm-atelier__img::after {
    display: none;
  }

  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100% !important;
    padding-left: 0 !important;
    float: none !important;
  }

  .woocommerce div.product div.images {
    margin-bottom: 32px !important;
  }

  .llm-hero { min-height: 70vh; }
  .llm-hero__titre { font-size: 2.5rem; }
}

@media (max-width: 480px) {
  .llm-univers-grid {
    grid-template-columns: 1fr;
  }

  /* En dessous de 480 px les deux cartes passent l'une sous l'autre. Au format
     portrait 3/4, chacune mesurait alors plus de 450 px de haut : il fallait
     faire défiler deux écrans pleins avant d'atteindre la suite de la page.
     En paysage, les deux univers tiennent dans un seul écran et restent
     lisibles — c'est le format qui compte ici, pas la taille de l'image. */
  .llm-univers-carte {
    aspect-ratio: 16/10;
  }

  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ============================================================
   UTILITAIRES
   ============================================================ */

.llm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.llm-section {
  padding: 80px 0;
}

.text-or { color: var(--llm-or); }
.text-center { text-align: center; }
.mt-or { margin-top: 0.5em; }

/* Séparateur or */
.llm-separateur {
  width: 60px;
  height: 2px;
  background: var(--llm-or);
  margin: 16px auto;
}

/* Lazy load fade-in */
.wp-post-image {
  transition: opacity 0.3s ease;
}

/* ============================================================
   SOUS-CATÉGORIES — affichage en chips sous le titre
   Utilisé dans les pages catégorie (bijoux → chrétiens / musulmans / juifs)
   ============================================================ */

.llm-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px 0 40px;
}

.llm-subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--llm-noir);
  border: 1.5px solid var(--llm-gris-moyen);
  border-radius: 100px;
  padding: 8px 18px;
  background-color: var(--llm-blanc);
  text-decoration: none;
  transition: var(--transition);
}

.llm-subcat-chip:hover {
  border-color: var(--llm-or);
  color: var(--llm-or-fonce);
  background-color: rgba(201,168,76,0.05);
}

.llm-subcat-chip.active {
  border-color: var(--llm-or);
  background-color: var(--llm-or);
  color: var(--llm-blanc);
}

/* ============================================================
   UNIVERS MULTI-DOMAINES — cartes avec lien externe
   Chaque "univers" peut pointer vers un domaine différent
   ============================================================ */

/* Lien externe discret sur la carte */
.llm-univers-carte__external {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.llm-univers-carte__external::after {
  content: '↗';
  font-size: 0.7rem;
}

/* Badge "Nouveau site" */
.llm-badge-nouveau-site {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(201,168,76,0.9);
  color: var(--llm-blanc);
  font-family: var(--font-corps);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}

/* ============================================================
   BANDEAU LOGO — intégration du logo calligraphique
   Fond blanc avec ombre dentelle subtile
   ============================================================ */

.llm-logo-banner {
  text-align: center;
  padding: 40px 24px 20px;
  background-color: var(--llm-blanc);
}

.llm-logo-banner img {
  max-width: 200px;
  height: auto;
}

/* Nom de marque en calligraphie (si pas d'image) */
.llm-logo-text {
  font-family: var(--font-script);
  font-size: 3.5rem;
  color: var(--llm-noir);
  line-height: 1;
  margin: 0;
}

.llm-logo-text-sub {
  font-family: var(--font-corps);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--llm-gris-texte);
  margin-top: 4px;
  display: block;
}

/* ============================================================
   LIEN VERS UN SOUS-SITE / AUTRE DOMAINE dans la navigation
   ============================================================ */

.llm-nav-external-link {
  position: relative;
}

.llm-nav-external-link > a::after {
  content: '↗';
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 2px;
  opacity: 0.6;
}

/* ============================================================
   BANDE TRICOLORE — harmonisation avec l'app mobile
   Fine barre bleue-blanche-rouge en haut du site
   ============================================================ */

.llm-tricolore-band {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 4px;
  position: relative;
  z-index: 9999;
}
.llm-strip-bleu  { flex: 1; background-color: var(--llm-bleu); }
.llm-strip-blanc { flex: 1; background-color: #FFFFFF; }
.llm-strip-rouge { flex: 1; background-color: var(--llm-rouge); }

/* ============================================================
   LOGO — forcer l'affichage du vrai logo PNG
   ============================================================ */

/* Logo dans le header Kadence */
.site-logo img,
.custom-logo-link img,
.kadence-logo img {
  max-height: 64px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Fond ivoire sur les cartes produits */
.woocommerce ul.products li.product {
  background: var(--llm-ivoire-card) !important;
}

/* Header fond ivoire (clair comme l'app) */
.site-header,
#masthead,
.kadence-header {
  background-color: var(--llm-ivoire) !important;
  border-bottom: 1px solid var(--llm-gris-moyen) !important;
}

/* Sections alternées : ivoire / blanc */
.woocommerce-products-header,
.llm-atelier,
.woocommerce-cart .cart_totals {
  background-color: var(--llm-ivoire) !important;
}

/* Séparateur or avec la même esthétique que l'app */
.llm-divider-or {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--llm-or), transparent);
  margin: 32px 0;
  opacity: 0.5;
}

/* Badges "Nouveau" / "Promo" — couleur or */
.woocommerce span.onsale {
  background-color: var(--llm-or) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   BARRE DE TOP — annonce fine au-dessus du header
   ============================================================ */

.llm-topbar {
  background-color: var(--llm-noir);
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 9px 24px;
  font-family: var(--font-corps);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.llm-topbar a {
  color: var(--llm-or) !important;
  text-decoration: none;
}

.llm-topbar a:hover {
  color: var(--llm-or-clair) !important;
}


/* ============================================================
   GALERIE DES CRÉATIONS
   Produits WooCommerce (automatique) + photos d'archives (manuel)
   ============================================================ */

.llm-page-galerie .llm-galerie-intro {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
    color: var(--llm-gris-texte);
    line-height: 1.7;
}

.llm-galerie-section { margin-bottom: 64px; }

.llm-galerie-titre {
    text-align: center;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 32px;
    color: var(--llm-noir);
}

.llm-galerie-titre::after {
    content: "\2726";
    display: block;
    color: var(--llm-or);
    font-size: 0.7em;
    margin-top: 10px;
}

.llm-galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.llm-galerie-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: var(--llm-ivoire-card);
    border: 1px solid var(--llm-gris-moyen);
    text-decoration: none;
    aspect-ratio: 1 / 1;
    transition: transform .3s ease, box-shadow .3s ease;
}

.llm-galerie-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(17, 15, 15, .12);
}

.llm-galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.llm-galerie-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.llm-galerie-badge.est-dispo {
    background: rgba(176, 101, 26, .92);
    color: #FFFFFF;
}

.llm-galerie-badge.est-vendu {
    background: rgba(255, 255, 255, .92);
    color: var(--llm-gris-texte);
    border: 1px solid var(--llm-gris-moyen);
}

.llm-galerie-nom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 12px;
    color: #FFFFFF;
    font-size: .9rem;
    line-height: 1.3;
    background: linear-gradient(to top, rgba(17, 15, 15, .78), transparent);
}

/* Bloc « Galerie » natif de WordPress, partie Archives */
.llm-galerie-archives .wp-block-gallery { gap: 20px; }

.llm-galerie-archives img {
    border-radius: 10px;
    border: 1px solid var(--llm-gris-moyen);
}

.llm-galerie-cta {
    text-align: center;
    padding: 48px 24px;
    border-radius: 14px;
    background: var(--llm-rose-pale);
    border: 1px solid var(--llm-gris-moyen);
}

.llm-galerie-cta h3 {
    margin: 0 0 10px;
    font-weight: 400;
}

.llm-galerie-cta p {
    margin: 0 0 22px;
    color: var(--llm-gris-texte);
}

@media (max-width: 640px) {
    .llm-galerie-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    .llm-galerie-section { margin-bottom: 44px; }
    .llm-galerie-cta { padding: 36px 18px; }
}

.llm-galerie-refaire {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: .72rem;
    letter-spacing: .4px;
    color: var(--llm-or-clair);
}

/* Bandeau diagonal « Vendu » sur les archives */
.llm-galerie-item--archive { position: relative; }

.llm-galerie-bandeau {
    position: absolute;
    top: 14px;
    right: -34px;
    z-index: 2;
    width: 130px;
    padding: 5px 0;
    text-align: center;
    transform: rotate(45deg);
    background: rgba(176, 101, 26, .95);
    color: #FFFFFF;
    font-size: .68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(17, 15, 15, .25);
}

.llm-galerie-desc {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: .74rem;
    line-height: 1.35;
    opacity: .9;
}

.llm-galerie-prix {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: .74rem;
    font-weight: 600;
    color: var(--llm-or-clair);
}

/* ============================================================
   GALERIE — vignette « archive » lisible
   Photo en haut, informations dessous sur fond plein.
   Remplace l'ancienne superposition texte-sur-photo, illisible.
   ============================================================ */

.llm-galerie-carte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: var(--llm-ivoire-card);
    border: 1px solid var(--llm-gris-moyen);
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease;
}

.llm-galerie-carte:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(17, 15, 15, .14);
}

.llm-galerie-visuel {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--llm-rose-pale);
}

.llm-galerie-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.llm-galerie-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(176, 101, 26, .95);
    color: #FFFFFF;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
}

.llm-galerie-infos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
}

.llm-galerie-titre-carte {
    font-size: .92rem;
    line-height: 1.35;
    color: var(--llm-noir);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.llm-galerie-infos .llm-galerie-prix {
    font-size: .85rem;
    font-weight: 600;
    font-style: normal;
    color: var(--llm-or);
}

.llm-galerie-infos .llm-galerie-refaire {
    margin-top: 2px;
    font-size: .74rem;
    font-style: normal;
    letter-spacing: .3px;
    color: var(--llm-gris-texte);
    text-decoration: underline;
}

/* Le bouton d'appel : le texte débordait de son cadre */
.llm-galerie-cta .btn-llm {
    display: inline-block;
    max-width: 100%;
    padding: 14px 26px;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
}

@media (max-width: 640px) {
    .llm-galerie-infos { padding: 10px 12px 12px; }
    .llm-galerie-titre-carte { font-size: .86rem; -webkit-line-clamp: 2; }
}