/* =====================================================================
   L'ART DE LA CÔTE DE BOEUF — DESIGN SYSTEM
   À coller dans Elementor → Site Settings → Custom CSS
   (ou dans Apparence → Personnaliser → CSS additionnel)
   ===================================================================== */

/* ---------- 1. Variables globales ---------- */
:root {
  /* Couleurs */
  --Gold: #c8a45a;
  --gold-soft: #b8924a;
  --gold-bright: #d9b876;
  --bg-darkest: #0a0a0a;
  --bg-dark: #111111;
  --bg-card: #161616;
  --bg-elev: #1d1d1d;
  --text-ivory: #f5f0e6;
  --text-muted: #9a9388;
  --text-dim: #6b6660;
  --border-hair: rgba(200, 164, 90, 0.14);
  --border-gold: rgba(200, 164, 90, 0.35);
  --blood: #6b1f1a;

  /* Typographies */
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --display: 'Oswald', 'Helvetica Neue', sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}

/* ---------- 2. Base body ---------- */
body {
  background: var(--bg-darkest) !important;
  color: var(--text-ivory) !important;
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. Titres ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-ivory);
}
h1 { font-size: clamp(48px, 8vw, 124px); line-height: 0.95; }
h2 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; }
h3 { font-size: 32px; line-height: 1.1; }
em, .accent-italic { font-style: italic; color: var(--Gold); font-weight: 400; }

/* ---------- 4. Eyebrow / petit label or ---------- */
.eyebrow, .elementor-widget-heading.eyebrow .elementor-heading-title {
  font-family: var(--display) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--Gold) !important;
}

/* ---------- 5. Boutons (Elementor) ---------- */
.elementor-button,
.elementor-button-link {
  font-family: var(--display) !important;
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 16px 28px !important;
  border-radius: 0 !important;
  border: 1px solid var(--Gold) !important;
  background: var(--Gold) !important;
  color: var(--bg-darkest) !important;
  transition: background .2s, color .2s, transform .2s !important;
}
.elementor-button:hover {
  background: var(--gold-bright) !important;
  transform: translateY(-1px);
}
.elementor-button.ghost,
.elementor-button.elementor-size-md.ghost {
  background: transparent !important;
  color: var(--Gold) !important;
}
.elementor-button.ghost:hover {
  background: var(--Gold) !important;
  color: var(--bg-darkest) !important;
}

/* ---------- 6. Cartes / Loop items ---------- */
.cdb-card,
.elementor-loop-item .e-loop-item-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-hair);
  transition: border-color .25s, transform .25s;
}
.cdb-card:hover,
.elementor-loop-item .e-loop-item-wrapper:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
}

/* ---------- 7. Filtre éditorial (à appliquer aux images) ---------- */
.engraving img,
img.engraving {
  filter: url(#editorial-filter);
}

/* ---------- 8. Header sticky sombre ---------- */
.cdb-header,
header.elementor-location-header {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hair);
}

/* ---------- 9. Liens de navigation ---------- */
.elementor-nav-menu a,
.cdb-nav a {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-ivory);
  opacity: 0.86;
  transition: color .2s, opacity .2s;
}
.elementor-nav-menu a:hover,
.cdb-nav a:hover {
  color: var(--Gold);
  opacity: 1;
}

/* ---------- 10. Manifeste / Quote large ---------- */
.cdb-manifeste,
.elementor-section.cdb-manifeste {
  border-top: 1px solid var(--border-hair);
  border-bottom: 1px solid var(--border-hair);
  padding: 110px 32px;
  text-align: center;
}
.cdb-manifeste-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.25;
  max-width: 22ch;
  margin: 0 auto 28px;
  color: var(--text-ivory);
}

/* ---------- 11. Newsletter ---------- */
.cdb-newsletter input[type="email"] {
  background: transparent !important;
  border: 1px solid var(--border-gold) !important;
  border-right: 0 !important;
  color: var(--text-ivory) !important;
  font-family: var(--sans) !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
}

/* ---------- 12. Forms (inscription) ---------- */
.elementor-field-textual {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border-hair) !important;
  color: var(--text-ivory) !important;
  border-radius: 0 !important;
}
.elementor-field-textual:focus {
  border-color: var(--Gold) !important;
  outline: none !important;
}
.elementor-field-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--Gold);
}

/* ---------- 13. Sections : padding standard ---------- */
.elementor-section.cdb-section {
  padding: 130px 32px;
}
.elementor-section.cdb-section.tight {
  padding: 90px 32px;
}

/* ---------- 14. Images en aspect-ratio ---------- */
.cdb-img-portrait { aspect-ratio: 4/5; overflow: hidden; }
.cdb-img-square { aspect-ratio: 1/1; overflow: hidden; }
.cdb-img-wide { aspect-ratio: 16/9; overflow: hidden; }
.cdb-img-portrait img,
.cdb-img-square img,
.cdb-img-wide img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s;
}
.cdb-card:hover .cdb-img-portrait img,
.cdb-card:hover .cdb-img-square img,
.cdb-card:hover .cdb-img-wide img {
  transform: scale(1.05);
}

/* ---------- 15. Pin "Réservé Ambassadeurs" sur produit verrouillé ---------- */
.cdb-product-locked {
  position: relative;
}
.cdb-product-locked::after {
  content: 'Réservé Ambassadeurs';
  position: absolute; top: 14px; right: 14px;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: var(--Gold);
  color: var(--bg-darkest);
  padding: 6px 10px;
  z-index: 2;
}

/* ---------- 16. Scrollbar cohérente avec le thème ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-darkest); }
::-webkit-scrollbar-thumb { background: var(--bg-elev); border: 2px solid var(--bg-darkest); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

/* ---------- 17. Sélection texte ---------- */
::selection { background: var(--Gold); color: var(--bg-darkest); }

/* ---------- 18. Liens éditoriaux dans le contenu ---------- */
.elementor-widget-text-editor a,
article a {
  color: var(--Gold);
  border-bottom: 1px solid var(--border-gold);
  transition: color .2s, border-color .2s;
}
.elementor-widget-text-editor a:hover,
article a:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--Gold);
}

/* ---------- 19. WooCommerce — surcharges sombres ---------- */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: var(--display) !important;
  color: var(--text-ivory) !important;
  letter-spacing: 0.05em;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  color: var(--text-ivory) !important;
}

/* ---------- 20. Filtre éditorial SVG (à coller en Custom HTML dans le footer) ----------
À mettre une fois dans Elementor → Theme Builder → Footer (widget HTML) :

<svg style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
  <defs>
    <filter id="editorial-filter">
      <feColorMatrix type="matrix" values="
        1.10 0.00 0.00 0 -10
        0.00 1.05 0.00 0 -8
        0.00 0.00 0.95 0 -6
        0    0    0    1  0"/>
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="1" exponent="1.05" offset="0"/>
        <feFuncG type="gamma" amplitude="1" exponent="1.05" offset="0"/>
        <feFuncB type="gamma" amplitude="1" exponent="1.10" offset="0"/>
      </feComponentTransfer>
      <feConvolveMatrix order="3" preserveAlpha="true"
        kernelMatrix="0 -0.4 0  -0.4 2.6 -0.4  0 -0.4 0"/>
    </filter>
  </defs>
</svg>

Puis ajoutez la classe "engraving" sur les images dans Elementor.
---------------------------------------------------------------- */