/*
 * EGP V3 re-skin for comet-wp. Applies the charte graphique V3 (colours + fonts)
 * over the existing comet-wp / WPBakery layout, without Elementor. Loaded last by
 * functions.php so it overrides the theme defaults.
 * Palette: New Bleu #18213C, Anthracite #2B2E34, Beige #F6F4EF, Gris sable #E1DED3,
 * CTA gold #9E7736 (from the maquettes). Fonts: Delight Black (titres), DM Sans
 * (corps), DM Serif Display (accents).
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap');

@font-face {
  font-family: 'Delight Black';
  src: url('fonts/Delight-Black.woff2') format('woff2'), url('fonts/Delight-Black.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('fonts/Delight-Regular.woff2') format('woff2'), url('fonts/Delight-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --egp-bleu: #18213C;
  --egp-anthracite: #2B2E34;
  --egp-beige: #F6F4EF;
  --egp-sable: #E1DED3;
  --egp-or: #9E7736;
  --egp-or-fonce: #80602B;
}

/* --- Base typography + colours --- */
body,
.wpb_text_column,
p, li, span, a, input, textarea, select, button {
  font-family: 'DM Sans', sans-serif;
}
body {
  color: var(--egp-anthracite);
  background-color: var(--egp-beige);
}

h1, h2, h3, h4, h5, h6,
.vc_custom_heading, .wpb_heading, .wpb-heading {
  font-family: 'Delight Black', 'DM Sans', sans-serif !important;
  color: var(--egp-bleu);
  letter-spacing: .2px;
}

/* Big hero "spans" carry inline color (white) on dark photos — keep them white,
   just swap the typeface. */
.full-height .wpb_text_column span,
section.vc_row .wpb_text_column h1 span,
section.vc_row .wpb_text_column h2 span {
  font-family: 'Delight Black', 'DM Sans', sans-serif !important;
}

a { color: var(--egp-bleu); }
a:hover { color: var(--egp-or); }

/* --- Header / nav in New Bleu --- */
#topnav, #topnav.dark { background-color: var(--egp-bleu) !important; }
#topnav .navigation-menu > li > a { color: #fff; font-weight: 500; }
#topnav .navigation-menu > li > a:hover { color: var(--egp-or); }

/* Nav CTA ("Nous contacter"): comet's .bg-white.text-blue rule sets teal text
   with 2-class specificity, so scope the gold + white text under #topnav to win. */
#topnav li.bg-white > a,
#topnav .text-blue > a,
#topnav li.bg-white.text-blue > a {
  background-color: var(--egp-or) !important;
  color: #fff !important;
  border-color: var(--egp-or) !important;
}
#topnav li.bg-white > a:hover,
#topnav li.bg-white.text-blue > a:hover {
  background-color: var(--egp-or-fonce) !important;
  color: #fff !important;
}

/* --- Buttons / CTA in gold --- */
/* Filled buttons: comet .btn / .btn-color, WPBakery vc_btn3, the nav CTA
   (li.bg-white > a), and form submits. All become solid gold + white text. */
.vc_btn3, .vc_btn3-color-blue, .wpb_button, .button,
.btn, a.btn, .btn-color, a.btn-color,
li.bg-white > a, .menu-item.bg-white > a, a.bg-white,
input[type="submit"], button[type="submit"] {
  background-color: var(--egp-or) !important;
  color: #fff !important;
  border-color: var(--egp-or) !important;
  border-radius: 2px !important;
  text-transform: none;
}
.vc_btn3:hover, .wpb_button:hover, .button:hover,
.btn:hover, a.btn:hover, .btn-color:hover, a.btn-color:hover,
li.bg-white > a:hover, .menu-item.bg-white > a:hover, a.bg-white:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background-color: var(--egp-or-fonce) !important;
  border-color: var(--egp-or-fonce) !important;
  color: #fff !important;
}

/* Coloured outline buttons (comet's teal .btn-color-out) -> gold outline,
   fill gold on hover. */
.btn-color-out, a.btn-color-out {
  background-color: transparent !important;
  color: var(--egp-or) !important;
  border-color: var(--egp-or) !important;
  border-radius: 2px !important;
  text-transform: none;
}
.btn-color-out:hover, a.btn-color-out:hover {
  background-color: var(--egp-or) !important;
  color: #fff !important;
}

/* Light outline buttons sit on dark/navy boxes -> keep the white outline,
   fill gold on hover. */
.btn-light-out, a.btn-light-out { border-radius: 2px !important; text-transform: none; }
.btn-light-out:hover, a.btn-light-out:hover {
  background-color: var(--egp-or) !important;
  border-color: var(--egp-or) !important;
  color: #fff !important;
}

/* --- Dark sections + footer in New Bleu (replace comet teal/blue) --- */
.dark, .bg-blue, section.dark { background-color: var(--egp-bleu) !important; }
.bg-blue, .bg-blue * { color: #fff; }
.text-blue { color: var(--egp-bleu) !important; }

/* Venue-photo contact bands are shot under teal lighting. Blend New Bleu over
   the photo so the band reads on-palette while keeping the image texture. */
.bg-blue,
section.vc_custom_1626350988207 {
  background-color: var(--egp-bleu) !important;
  background-blend-mode: multiply;
}

/* --- Heading accent bar (comet's teal h*::before underline) -> gold --- */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before,
.p1::before, .heading-line::before { background-color: var(--egp-or) !important; }

/* --- Soft section separators / cards on gris sable --- */
hr, .vc_separator .vc_sep_holder .vc_sep_line { border-color: var(--egp-sable); }

/* --- Forms --- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  border: 1px solid var(--egp-sable);
  background: #fff;
  color: var(--egp-anthracite);
}

/* Client logos in the "Ils nous ont fait confiance" slider. Black and white
   (greyscale), on a uniform white chip so the mixed sources (transparent,
   white-bg, dark-bg) read consistently, centered in each carousel slide. */
.egp-client-logo {
  height: 42px; width: auto; max-width: 100%;
  display: block; margin: 0 auto;
  background: #fff; border-radius: 6px;
  padding: 16px 18px; box-sizing: content-box;
  filter: grayscale(100%); opacity: .85;
  transition: opacity .2s ease, filter .2s ease;
}
.egp-client-logo:hover { opacity: 1; }
.egp-clients-carousel .vc_single_image-wrapper { display: flex; align-items: center; justify-content: center; min-height: 74px; }

/* Accent / editorial type */
blockquote, .egp-accent { font-family: 'DM Serif Display', serif; font-style: italic; }