/* ============================================================
   OPALINE CONSEIL — Thème unifié
   Vignobles · Intelligence Artificielle · Luxe Élégant
   Version 1.0 — 2026-05-22
   ============================================================
   Ce CSS est chargé sur TOUTES les pages du site pour garantir
   une cohérence visuelle. Il surcharge les styles inline existants.
   ============================================================ */

/* ---- 1. PALETTE LUXE OPALINE ---- */
:root {
  /* Noirs (cave, velours, profondeur) */
  --op-noir: #0f0f0f !important;
  --op-noir-velours: #1a1a1a !important;
  --op-noir-doux: #2a2a2a !important;

  /* Or signature (opaline) */
  --op-or: #d4a574 !important;
  --op-or-clair: #e8c490 !important;
  --op-or-fonce: #a8763d !important;
  --op-or-poudre: #faf6ee !important;

  /* Bordeaux (vignoble) */
  --op-bordeaux: #6b1f2e !important;
  --op-bordeaux-clair: #8a3041 !important;
  --op-bordeaux-fonce: #4a1520 !important;

  /* Blancs et neutres */
  --op-blanc: #fdfcfb !important;
  --op-creme: #f8f6f3 !important;
  --op-opale: #ebe6dd !important;
  --op-perle: #f5ede0 !important;

  /* Textes */
  --op-texte: #2a2a2a !important;
  --op-texte-muted: #6a6a78 !important;
  --op-texte-clair: #999 !important;

  /* Status / accents */
  --op-success: #4a8862 !important;
  --op-warning: #c98c52 !important;

  /* Surcharge des variables historiques de pages existantes */
  --gold: var(--op-or) !important;
  --gold-dark: var(--op-or-fonce) !important;
  --burg: var(--op-bordeaux) !important;
  --dark: var(--op-noir-velours) !important;
  --bg: var(--op-blanc) !important;
  --text: var(--op-texte) !important;
  --muted: var(--op-texte-muted) !important;
  --border: var(--op-opale) !important;
  --or: var(--op-or) !important;
  --or-dark: var(--op-or-fonce) !important;
  --noir: var(--op-noir-velours) !important;
  --noir-dark: var(--op-noir) !important;
  --opale: var(--op-opale) !important;
  --opale-light: var(--op-creme) !important;
  --blanc: var(--op-blanc) !important;
  --text-muted: var(--op-texte-muted) !important;
}

/* ---- 2. TYPOGRAPHIE UNIFIÉE ---- */
body, body * {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, .logo,
h1 *, h2 *, h3 *,
.hero h1, .hero h1 *,
[class*="hero"] h1, [class*="hero"] h1 *,
[class*="title"], [class*="title"] *,
[class*="heading"], [class*="heading"] * {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Logo signature */
.logo, [class*="logo"]:not([class*="logo-subtitle"]) {
  font-family: 'Playfair Display', serif !important;
  letter-spacing: 0.08em !important;
}

body {
  line-height: 1.7 !important;
  color: var(--op-texte) !important;
  background: var(--op-blanc) !important;
  font-size: 17px !important;
}

/* ---- 3. NAVIGATION (header + nav) ---- */
nav.site-nav,
header nav,
header,
.site-header {
  background: var(--op-noir) !important;
  border-bottom: 2px solid var(--op-or) !important;
  color: var(--op-blanc) !important;
}

nav a, header a, header nav a {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500 !important;
}

nav a:hover, header a:hover {
  color: var(--op-or) !important;
}

nav .logo, header .logo {
  color: var(--op-or) !important;
}

nav .logo span, header .logo span {
  color: var(--op-blanc) !important;
}

/* ---- 4. HEROS ---- */
.hero,
section.hero,
[class*="hero"]:not([class*="hero-badge"]):not([class*="hero-eyebrow"]):not([class*="hero-card"]) {
  background: linear-gradient(135deg, var(--op-noir) 0%, var(--op-bordeaux-fonce) 50%, var(--op-bordeaux) 100%) !important;
  color: var(--op-blanc) !important;
}

.hero h1, [class*="hero"] h1 {
  color: var(--op-blanc) !important;
}

.hero-badge, .hero-eyebrow, .eyebrow,
[class*="badge"]:not([class*="status"]):not(.badge.high):not(.badge.veryhigh):not(.badge.med) {
  background: rgba(212,165,116,.15) !important;
  border: 1px solid rgba(212,165,116,.4) !important;
  color: var(--op-or) !important;
  padding: 6px 18px !important;
  border-radius: 24px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}

/* ---- 5. BOUTONS CTA ---- */
.cta, .cta-button, button.cta,
a.cta, a.cta-button,
[class*="btn-primary"], [class*="button-primary"],
input[type="submit"] {
  background: var(--op-or) !important;
  color: var(--op-noir) !important;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: .92rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: 2px solid var(--op-or) !important;
  transition: all .25s ease !important;
  display: inline-block !important;
  cursor: pointer !important;
}

.cta:hover, .cta-button:hover, a.cta:hover, a.cta-button:hover {
  background: var(--op-or-clair) !important;
  border-color: var(--op-or-clair) !important;
  transform: translateY(-1px) !important;
}

.cta-button.outline, .cta.outline,
[class*="btn-secondary"], [class*="button-secondary"] {
  background: transparent !important;
  color: var(--op-or) !important;
}

.cta-button.outline:hover, .cta.outline:hover {
  background: var(--op-or) !important;
  color: var(--op-noir) !important;
}

/* ---- 6. SECTIONS ---- */
section.alt, .section-alt,
[class*="bg-cream"], [class*="bg-light"] {
  background: var(--op-creme) !important;
}

section.dark, .section-dark {
  background: var(--op-noir) !important;
  color: var(--op-blanc) !important;
}

/* ---- 7. CARDS ---- */
.problem-card, .stake-card, .pricing-card, .article-card,
.chantier, .axis,
[class*="card"]:not(.pricing-card.featured) {
  background: var(--op-blanc) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
  border: 1px solid var(--op-opale) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.problem-card:hover, .stake-card:hover, .pricing-card:hover, .article-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.10) !important;
}

.pricing-card.featured {
  background: var(--op-blanc) !important;
  border-top: 4px solid var(--op-or) !important;
  border-bottom: 1px solid var(--op-opale) !important;
  border-left: 1px solid var(--op-opale) !important;
  border-right: 1px solid var(--op-opale) !important;
  box-shadow: 0 12px 40px rgba(212,165,116,.20) !important;
  transform: scale(1.03) !important;
}

/* ---- 8. TABLES ---- */
table, .cycle-table {
  background: var(--op-blanc) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
}

table th, .cycle-table th {
  background: var(--op-noir) !important;
  color: var(--op-blanc) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-size: .82rem !important;
}

table td, .cycle-table td {
  border-bottom: 1px solid var(--op-opale) !important;
}

table tr:nth-child(even) td {
  background: var(--op-creme) !important;
}

/* ---- 9. CALLOUTS / TLDR ---- */
.tldr, .callout, .promise {
  background: linear-gradient(135deg, var(--op-or-poudre) 0%, var(--op-perle) 100%) !important;
  border-left: 4px solid var(--op-or) !important;
  border-radius: 4px !important;
  padding: 24px 28px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}

.tldr strong, .callout strong, .promise strong, .promise h3 {
  color: var(--op-bordeaux) !important;
}

/* ---- 10. CTA BLOCK (full-width call-to-action) ---- */
.cta-block, .final-cta {
  background: linear-gradient(135deg, var(--op-noir) 0%, var(--op-bordeaux) 100%) !important;
  color: var(--op-blanc) !important;
  border-radius: 8px !important;
}

.cta-block h3, .cta-block h2, .final-cta h2, .final-cta h3 {
  color: var(--op-blanc) !important;
}

.cta-block a.cta {
  background: var(--op-or) !important;
  color: var(--op-noir) !important;
}

/* ---- 11. FOOTER ---- */
footer, footer.site-footer, .footer, .site-footer {
  background: var(--op-noir) !important;
  color: rgba(255,255,255,.65) !important;
  border-top: 2px solid var(--op-or) !important;
}

footer a, .site-footer a {
  color: var(--op-or) !important;
  text-decoration: none !important;
}

footer a:hover, .site-footer a:hover {
  color: var(--op-or-clair) !important;
}

footer h4 {
  color: var(--op-or) !important;
  font-size: .82rem !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
}

/* ---- 12. PRICE TAG / BADGES ---- */
.price-tag {
  background: var(--op-or) !important;
  color: var(--op-noir) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
}

.pricing-card .price {
  color: var(--op-noir) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
}

.pricing-card.featured::before {
  background: var(--op-or) !important;
  color: var(--op-noir) !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: .15em !important;
  font-size: .68rem !important;
}

/* ---- 13. LINKS ---- */
main a, article a, .blog-content a {
  color: var(--op-or-fonce) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

main a:hover, article a:hover {
  color: var(--op-bordeaux) !important;
}

/* ---- 14. ACCENTS LUXE ---- */
h2 strong, h3 strong {
  color: var(--op-bordeaux) !important;
  font-weight: 700 !important;
}

::selection {
  background: var(--op-or) !important;
  color: var(--op-noir) !important;
}

/* ---- 15. FORMS ---- */
input[type="text"], input[type="email"], textarea, select {
  border: 1px solid var(--op-opale) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  background: var(--op-blanc) !important;
  color: var(--op-texte) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--op-or) !important;
  outline: 2px solid rgba(212,165,116,.2) !important;
}

/* ---- 16. RESPONSIVE ---- */
@media (max-width: 768px) {
  body { font-size: 16px !important; }
  .hero h1, [class*="hero"] h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
}

/* ---- 17. SIGNATURE OPALINE — ornement subtil ---- */
.hero::after, section.hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 2px !important;
  background: var(--op-or) !important;
  opacity: 0.6 !important;
}

/* ---- 18. CORRECTION PAGES SPÉCIFIQUES ---- */
/* PME — palette verte fragmentée */
.secteur-card { border-top: 3px solid var(--op-or) !important; }

/* Pack pages — uniformiser le hero */
.eyebrow {
  color: var(--op-or) !important;
  letter-spacing: .2em !important;
}

/* La Cave IA — accents */
.cave-badge, [class*="cave"] [class*="badge"] {
  background: rgba(212,165,116,.15) !important;
  color: var(--op-or) !important;
}

/* Fin du thème Opaline */

/* ============================================================
   MENU DÉROULANT PRODUITS — sous-menu nav
   ============================================================ */
.has-submenu {
  position: relative !important;
}
.has-submenu > a::after {
  content: " ▾" !important;
  font-size: .7em !important;
  margin-left: 4px !important;
  opacity: .7 !important;
}
.submenu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--op-noir) !important;
  border: 1px solid var(--op-or) !important;
  border-radius: 6px !important;
  min-width: 320px !important;
  padding: 12px 0 !important;
  margin-top: 8px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.4) !important;
  z-index: 1000 !important;
  list-style: none !important;
}
.has-submenu:hover .submenu,
.has-submenu.open .submenu,
.has-submenu:focus-within .submenu {
  display: block !important;
}
.submenu li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.submenu li a {
  display: block !important;
  padding: 12px 20px !important;
  color: rgba(255,255,255,.85) !important;
  font-size: .9rem !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  transition: all .2s !important;
}
.submenu li:last-child a {
  border-bottom: none !important;
}
.submenu li a:hover {
  background: rgba(212,165,116,.15) !important;
  color: var(--op-or) !important;
  padding-left: 24px !important;
}
.submenu .price {
  color: var(--op-or) !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  display: inline !important;
}
.submenu-divider {
  height: 1px !important;
  background: rgba(212,165,116,.2) !important;
  margin: 8px 0 !important;
}
.submenu-header {
  padding: 8px 20px !important;
  color: var(--op-or) !important;
  font-size: .72rem !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Mobile : dépliage vertical */
@media (max-width: 900px) {
  .submenu {
    position: static !important;
    display: none !important;
    border: none !important;
    background: rgba(255,255,255,.05) !important;
    box-shadow: none !important;
    margin: 4px 0 !important;
    border-radius: 0 !important;
  }
  .has-submenu.open .submenu {
    display: block !important;
  }
  .has-submenu > a::after {
    float: right !important;
  }
}

/* ============================================================
   OVERRIDE SPÉCIFICITÉ — Force dropdown vertical
   La nav existante a un display:flex que je surcharge ici.
   ============================================================ */
nav .has-submenu,
nav ul .has-submenu,
nav ul li.has-submenu {
  position: relative !important;
  display: inline-block !important;
}

nav .has-submenu > ul.submenu,
nav ul .submenu,
ul.submenu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  background: var(--op-noir) !important;
  border: 1px solid var(--op-or) !important;
  border-radius: 8px !important;
  min-width: 360px !important;
  max-width: 400px !important;
  padding: 8px 0 !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5) !important;
  z-index: 9999 !important;
}

nav .has-submenu:hover > ul.submenu,
nav .has-submenu.open > ul.submenu,
nav .has-submenu:focus-within > ul.submenu {
  display: flex !important;
}

nav .has-submenu > ul.submenu > li,
ul.submenu > li {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

nav .has-submenu > ul.submenu > li > a,
ul.submenu li a {
  display: block !important;
  padding: 11px 18px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  text-align: left !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
}

ul.submenu li:last-child a {
  border-bottom: none !important;
}

ul.submenu li a:hover {
  background: rgba(212,165,116,.12) !important;
  color: var(--op-or) !important;
  padding-left: 22px !important;
  border-bottom-color: rgba(212,165,116,.2) !important;
}

ul.submenu li.submenu-header {
  padding: 10px 18px 6px !important;
  color: var(--op-or) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  pointer-events: none !important;
  display: block !important;
}

ul.submenu li.submenu-divider {
  height: 1px !important;
  background: rgba(212,165,116,.2) !important;
  margin: 6px 14px !important;
  padding: 0 !important;
  pointer-events: none !important;
  display: block !important;
}

ul.submenu .price {
  color: var(--op-or) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  margin-left: 8px !important;
  white-space: nowrap !important;
}

/* Force la flèche ▾ sur l'item parent */
nav li.has-submenu > a::after {
  content: " ▾" !important;
  display: inline !important;
  font-size: .65em !important;
  margin-left: 4px !important;
  opacity: .8 !important;
  color: var(--op-or) !important;
}

/* Mobile : pile verticale dans le burger */
@media (max-width: 900px) {
  nav .has-submenu > ul.submenu,
  ul.submenu {
    position: static !important;
    border: none !important;
    background: rgba(255,255,255,.04) !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    margin: 4px 0 !important;
    border-radius: 0 !important;
  }
  nav .has-submenu:hover > ul.submenu {
    display: none !important;
  }
  nav .has-submenu.open > ul.submenu {
    display: flex !important;
  }
}