/*
Theme Name: Boris Guignard — Thème φ
Theme URI: https://boris-guignard.fr
Description: Thème enfant Kadence — Design nombre d'or φ
Author: Boris Guignard
Template: kadence
Version: 1.0
*/

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

/* ── Variables ────────────────────────────────────────────── */
:root {
  --noir:      #0E0E12;
  --or:        #C4973A;
  --or-clair:  #D9B870;
  --blanc:     #FFFFFF;
  --creme:     #F7F4EE;
  --texte:     #1A1A24;
  --gris-mid:  #6B6B7B;
  --gris:      #E8E4DC;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  font-family: 'Inter', sans-serif !important;
  color: var(--texte) !important;
  background: var(--blanc) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
  font-family: 'EB Garamond', serif !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--texte) !important;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem) !important; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }
h3 { font-size: 1.35rem !important; }
h4 { font-size: 1.1rem !important; }

p { margin-bottom: 1.2rem; }
em { color: var(--or); font-style: italic; }
a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-clair); }

/* ── Navigation ───────────────────────────────────────────── */
.site-header,
#masthead,
.kadence-sticky-header {
  background: rgba(14,14,18,.95) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.main-navigation a,
.nav--toggle-sub a,
.kadence-navigation a {
  font-family: 'Inter', sans-serif !important;
  font-size: .8rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(247,244,238,.7) !important;
  font-weight: 500 !important;
}

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

.site-title a,
.site-branding .site-title {
  font-family: 'EB Garamond', serif !important;
  color: var(--blanc) !important;
  font-size: 1.3rem !important;
}

/* Bouton CTA nav */
.nav-cta a,
.menu-item-cta a {
  background: var(--or) !important;
  color: var(--noir) !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
}

/* ── Boutons ──────────────────────────────────────────────── */
.wp-block-button__link,
.button,
.btn,
input[type="submit"] {
  background: var(--or) !important;
  color: var(--noir) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  transition: background .2s !important;
}

.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--or-clair) !important;
  color: var(--noir) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--or) !important;
  border: 1px solid var(--or) !important;
}

/* ── Blocs Gutenberg ──────────────────────────────────────── */

/* Sections sombres */
.wp-block-group.is-style-dark,
.has-noir-background-color {
  background: var(--noir) !important;
  color: var(--blanc) !important;
  padding: 89px 0 !important;
}

.has-noir-background-color h1,
.has-noir-background-color h2,
.has-noir-background-color h3 {
  color: var(--blanc) !important;
}

/* Sections crème */
.has-creme-background-color,
.wp-block-group.is-style-creme {
  background: var(--creme) !important;
  padding: 89px 0 !important;
}

/* Colonnes */
.wp-block-columns { gap: 55px !important; }

/* Séparateur doré */
.wp-block-separator {
  border-color: var(--or) !important;
  width: 34px !important;
  margin: 21px 0 !important;
}

/* ── Citations ────────────────────────────────────────────── */
blockquote,
.wp-block-quote {
  border-left: 2px solid var(--or) !important;
  padding: 21px 34px !important;
  background: var(--creme) !important;
  margin: 34px 0 !important;
}

blockquote p,
.wp-block-quote p {
  font-family: 'EB Garamond', serif !important;
  font-size: 1.15rem !important;
  font-style: italic !important;
  color: var(--texte) !important;
  margin-bottom: .5rem !important;
}

blockquote cite,
.wp-block-quote cite {
  font-size: .8rem !important;
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--gris-mid) !important;
  letter-spacing: .05em !important;
}

/* ── Listes ───────────────────────────────────────────────── */
ul li::marker { color: var(--or); }
ol li::marker {
  color: var(--or);
  font-family: 'EB Garamond', serif;
  font-style: italic;
}

/* ── Formulaire ───────────────────────────────────────────── */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  width: 100% !important;
  background: var(--creme) !important;
  border: 1px solid var(--gris) !important;
  border-radius: 0 !important;
  padding: 13px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .95rem !important;
  color: var(--texte) !important;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus {
  outline: none !important;
  border-color: var(--or) !important;
  box-shadow: none !important;
}

.wpforms-field label {
  font-family: 'Inter', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--gris-mid) !important;
  margin-bottom: 6px !important;
}

.wpforms-submit {
  background: var(--or) !important;
  color: var(--noir) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 14px 34px !important;
  width: 100% !important;
}

/* ── Tag / étiquette ──────────────────────────────────────── */
.tag-or {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 13px;
}

.tag-or::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--or);
}

/* ── Badges certifications ────────────────────────────────── */
.badge {
  display: inline-block;
  border: 1px solid rgba(196,151,58,.4);
  padding: 5px 13px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or);
  margin: 4px;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer,
#colophon {
  background: var(--noir) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: 55px 0 34px !important;
}

.site-footer,
.site-footer p,
.site-footer li,
.site-footer a {
  font-family: 'Inter', sans-serif !important;
  color: rgba(247,244,238,.5) !important;
  font-size: .85rem !important;
}

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

.site-footer h4,
.site-footer .widget-title {
  font-family: 'Inter', sans-serif !important;
  font-size: .72rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(247,244,238,.3) !important;
  margin-bottom: 13px !important;
  font-weight: 600 !important;
}

/* ── Page hero ────────────────────────────────────────────── */
.page-hero {
  background: var(--noir);
  padding: 144px 0 89px;
  position: relative;
  overflow: hidden;
}

.page-hero h1 { color: var(--blanc) !important; }
.page-hero p { color: rgba(247,244,238,.65) !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }
  .wp-block-columns { flex-direction: column !important; }
  blockquote { padding: 16px 21px !important; }
}