/*
Theme Name: Divi Child - Monter Son Business
Description: Child theme aligné sur remybigot.pro et remybigot.fr (violet/gold éditorial)
Author: Rémy Bigot
Version: 1.0.0
Template: Divi
*/

/* ============================================
   1. VARIABLES & RESET
   ============================================ */
:root {
  --violet: #7c3aed;
  --vbright: #a855f7;
  --gold: #c9922a;
  --gold-light: #e6b84a;
  --black: #060608;
  --ink: #0b0a10;
  --text: #e8e8ec;
  --text-muted: #a1a1aa;
  --border: rgba(168, 85, 247, 0.18);
}

/* ============================================
   2. TYPOGRAPHIE GLOBALE
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&family=Libre+Baskerville:ital@0;1&display=swap');

html body {
  background: var(--black) !important;
  background-color: var(--black) !important;
  color: var(--text) !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}
body .et_pb_module,
body p,
body li,
body .et_pb_text,
body .et_pb_post_content,
body .et_pb_text_inner {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--text) !important;
}
body #page-container,
body #et-main-area,
body #main-content,
body .et_pb_section:not(.et_pb_fullwidth_header) {
  background-color: var(--black) !important;
}

h1, h2, h3, h4,
body h1, body h2, body h3, body h4,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
}

h1, body h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.05; }
h2, body h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.15; }
h3, body h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

em, i, blockquote, .italic {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  color: var(--gold-light);
}

/* ============================================
   3. COULEURS DIVI OVERRIDE
   ============================================ */
a { color: var(--vbright); transition: color .25s ease; }
a:hover { color: var(--gold); }

.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button {
  background: linear-gradient(135deg, var(--violet) 0%, var(--vbright) 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 14px 32px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.et_pb_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.35);
}
.et_pb_button:after { display: none !important; }

.et_pb_button.gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
  color: var(--ink) !important;
}

/* ============================================
   4. HEADER & MENU
   ============================================ */
#main-header {
  background: rgba(6, 6, 8, 0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
#top-menu li a,
.et_mobile_menu li a {
  color: var(--text) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.85rem !important;
}
#top-menu li a:hover { color: var(--gold) !important; }
#top-menu li.current-menu-item > a { color: var(--gold) !important; }

.logo_container img { max-height: 42px; width: auto; }

/* ============================================
   5. HERO / SECTIONS
   ============================================ */
.et_pb_section {
  background: var(--black);
  position: relative;
}

/* Grain cosmique (background global discret) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(124, 58, 237, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(168, 85, 247, 0.08), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Séparateur doré */
.et_pb_section.gold-divider::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  margin-top: 40px;
}

/* ============================================
   6. CARTES (blog posts, modules)
   ============================================ */
.et_pb_post,
.et_pb_blog_grid .et_pb_post,
article.et_pb_post {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, rgba(6, 6, 8, 0.4) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.et_pb_post:hover {
  transform: translateY(-4px);
  border-color: var(--vbright);
  box-shadow: 0 20px 50px rgba(124, 58, 237, 0.25);
}
.et_pb_post h2.entry-title a,
.et_pb_post h3.entry-title a {
  color: #fff !important;
}
.et_pb_post .post-meta,
.et_pb_post .post-meta a {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.et_pb_post .entry-featured-image-url img {
  border-radius: 12px;
}

/* ============================================
   7. ARTICLE SINGLE (éditorial)
   ============================================ */
.single-post #main-content .container {
  max-width: 760px;
}
.single-post .entry-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  margin-bottom: 0.5em;
}
.single-post .post-meta {
  color: var(--gold);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.single-post .entry-content p {
  font-size: 1.12rem;
  line-height: 1.75;
  margin-bottom: 1.4em;
}
.single-post .entry-content p:first-of-type::first-letter {
  font-family: 'Libre Baskerville', serif;
  font-size: 4.5em;
  float: left;
  line-height: 0.9;
  margin: 0.1em 0.12em 0 0;
  color: var(--gold);
}
.single-post .entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 24px;
  margin: 2em 0;
  font-size: 1.25rem;
  color: var(--gold-light);
}
.single-post .entry-content h2,
.single-post .entry-content h3 {
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.single-post .entry-content img {
  border-radius: 12px;
  margin: 1.5em 0;
}

/* ============================================
   8. FOOTER
   ============================================ */
#main-footer {
  background: #030304 !important;
  border-top: 1px solid var(--border);
}
#footer-widgets,
#footer-info,
#footer-bottom {
  color: var(--text-muted) !important;
}
#footer-widgets h4 {
  color: var(--gold) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.06em;
}

/* ============================================
   9. FORMULAIRES
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
.et_pb_contact_field input,
.et_pb_contact_field textarea {
  background: rgba(11, 10, 16, 0.8) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-family: 'Outfit', sans-serif !important;
  transition: border-color .25s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--vbright) !important;
  outline: none !important;
}

/* ============================================
   10. SCROLLBAR & SELECTION
   ============================================ */
::selection { background: var(--violet); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--vbright); }

/* ============================================
   10a. LARGEUR GLOBALE — override Divi 1080px
   ============================================ */
.et_pb_row,
.et-db #et-boc .et-l .et_pb_row,
body .et_pb_row {
  max-width: 1440px !important;
  width: 92% !important;
}

.et_pb_row.et_pb_row_fullwidth,
.et_pb_fullwidth_section .et_pb_row {
  max-width: 100% !important;
  width: 100% !important;
}

.et_pb_section {
  padding: 60px 0 !important;
}

/* Containers Divi généraux */
.et-l .et_pb_row,
#main-content .container {
  max-width: 1440px !important;
}

body:not(.single-post) #main-content .container {
  width: 92% !important;
  max-width: 1440px !important;
}

/* ============================================
   10b. LARGEUR PAGES BLOG (override Divi 1080px)
   ============================================ */
body.blog #main-content .container,
body.archive #main-content .container,
body.category #main-content .container,
body.tag #main-content .container,
body.search #main-content .container {
  width: 92% !important;
  max-width: 1440px !important;
}

body.blog #left-area,
body.archive #left-area,
body.category #left-area {
  width: 100% !important;
  float: none !important;
  padding-right: 0 !important;
}

body.blog #sidebar,
body.archive #sidebar {
  display: none !important;
}

/* Grille 3 colonnes pour la liste d'articles */
body.blog #left-area,
body.archive #left-area,
body.category #left-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
body.blog #left-area > article,
body.archive #left-area > article,
body.category #left-area > article {
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  body.blog #left-area,
  body.archive #left-area,
  body.category #left-area {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  body.blog #left-area,
  body.archive #left-area,
  body.category #left-area {
    grid-template-columns: 1fr;
  }
}

/* Article single en pleine largeur aussi */
body.single-post #main-content .container {
  width: 92% !important;
  max-width: 860px !important;
}

/* ============================================
   11. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .single-post .entry-content p:first-of-type::first-letter {
    font-size: 3.5em;
  }
  .et_pb_post { padding: 20px !important; }
}