/* ==========================================================================
   2 — BASE : typographie et éléments communs
   ========================================================================== */

body{
  background: var(--lmd-creme);
  color: var(--lmd-bleu);
  font-family: var(--lmd-texte);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Titres : Cormorant, jamais sous 22px ---
   En dessous, les déliés disparaissent et le texte devient gris. */
h1, h2, h3,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module .et_pb_module_header{
  font-family: var(--lmd-display);
  font-weight: 600;   /* Cormorant en 600 : la graisse 300 manque de charpente
                         sur les grands titres et paraît fragile à l'écran. */
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--lmd-bleu);
}
/* Échelle par défaut : pages internes, catalogue, compte.
   Le grand format éditorial est réservé aux pages vitrine via .lmd-hero. */
h1, .et_pb_module h1{ font-size: clamp(30px, 4.2vw, 42px); }
h2, .et_pb_module h2{ font-size: clamp(25px, 3.2vw, 34px); }
h3, .et_pb_module h3{ font-size: clamp(22px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.01em; }

/* Format éditorial — classe à poser sur une section ou un module Divi
   pour les pages vitrine : accueil, marques, savoir-faire. */
.lmd-hero h1, h1.lmd-hero,
.lmd-hero .et_pb_module h1{ font-size: clamp(34px, 6.2vw, 70px); }
.lmd-hero h2, h2.lmd-hero{ font-size: clamp(27px, 4vw, 48px); }

/* h4 à h6 en Jost : trop petits pour un serif à fort contraste */
h4, h5, h6,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6{
  font-family: var(--lmd-texte);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--lmd-bleu);
}
h4, .et_pb_module h4{ font-size: 19px; }
h5, .et_pb_module h5{ font-size: 17px; }
h6, .et_pb_module h6{ font-size: 15px; }

p{ margin-bottom: 1em; }
a{ color: var(--lmd-dore-texte); text-decoration: none; }
a:hover{ color: var(--lmd-bleu); }
strong, b{ font-weight: 500; }   /* Jost 500 suffit, 700 est trop lourd ici */

/* --- Texte sur fond bleu : inversion complète --- */
.lmd-sur-bleu,
.lmd-sur-bleu p,
.lmd-sur-bleu li{ color: rgba(246,241,231,.85); }
.lmd-sur-bleu h1, .lmd-sur-bleu h2, .lmd-sur-bleu h3,
.lmd-sur-bleu h4, .lmd-sur-bleu h5, .lmd-sur-bleu h6{ color: var(--lmd-creme); }
.lmd-sur-bleu a{ color: var(--lmd-dore-clair); }
.lmd-sur-bleu .lmd-surtitre{ color: var(--lmd-dore-clair); }

/* --- Surtitre : les majuscules exigent toujours de l'interlettrage --- */
.lmd-surtitre{
  font-family: var(--lmd-texte);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lmd-dore-texte);
}

/* --- Chapô --- */
.lmd-chapo{
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--lmd-bleu-600);
  max-width: 56ch;
}

/* --- Chiffres tabulaires : indispensable en B2B ---
   Sans cela, les colonnes de prix ne s'alignent pas et un tableau de
   quarante lignes devient pénible à lire. */
.price, .amount, .woocommerce-Price-amount, .sku, .lmd-num,
.quantity input, table, .woocommerce-orders-table, .order-total,
.wc-product-table, .cart_totals{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- Accessibilité --- */
:focus-visible{ outline: 2px solid var(--lmd-dore-texte); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Filet tricolore : signature de la maison --- */
.lmd-triple{ display: flex; height: 2px; width: 104px; }
.lmd-triple i{ flex: 1; display: block; height: 2px; }
.lmd-triple i:nth-child(1){ background: var(--lmd-marque-lmd); }
.lmd-triple i:nth-child(2){ background: var(--lmd-marque-lsf); }
.lmd-triple i:nth-child(3){ background: var(--lmd-marque-ole); }

/* --- Pastilles de marque --- */
.lmd-pastille{
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; flex: none; vertical-align: middle;
}
.lmd-pastille--lmd{ background: var(--lmd-marque-lmd); }
.lmd-pastille--lsf{ background: var(--lmd-marque-lsf); }
.lmd-pastille--ole{ background: var(--lmd-marque-ole); }