/*
Theme Name: Côté Jardin - Divi Child
Theme URI: https://www.cotejardinantibes.fr/
Description: Thème enfant Divi sur mesure pour Côté Jardin : design one-page moderne, gourmet et minimaliste.
Author: FG Volution
Template: Divi
Version: 1.0.0
Text Domain: cote-jardin-divi-child
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --cj-green: #243B2E;
  --cj-green-dark: #17281F;
  --cj-green-deep: #0E1D17;
  --cj-ivory: #F7F4EF;
  --cj-cream: #EFE9DF;
  --cj-beige: #E9E3D6;
  --cj-gold: #C6A156;
  --cj-gold-dark: #A9843D;
  --cj-charcoal: #1D1D1B;
  --cj-white: #FFFFFF;
  --cj-muted: #6D6A64;
  --cj-border: rgba(29,29,27,.14);
  --cj-shadow: 0 18px 50px rgba(17, 28, 22, .10);
  --cj-radius-sm: 4px;
  --cj-radius-md: 10px;
  --cj-radius-lg: 18px;
  --cj-transition: all .28s ease;
  --cj-container: 1280px;
}

/* =========================================================
   BASE
   ========================================================= */
html { scroll-behavior: smooth; }
body {
  background: var(--cj-ivory);
  color: var(--cj-charcoal);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#page-container { overflow-x: hidden; }
#main-content { background: var(--cj-ivory); }
.et_pb_section { background-color: transparent; }

h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
  color: var(--cj-charcoal);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.12;
}
.et_button_icon_visible.et_button_left .et_pb_button,.et_button_left .et_pb_button:hover,.et_button_left .et_pb_module .et_pb_button:hover {
    padding-left: 2em;
    padding-right: .7em
}
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button, .et_button_no_icon.et_button_left .et_pb_button:hover, .et_button_no_icon .et_pb_button, .et_button_no_icon .et_pb_button:hover {
    padding: 1.3em 2.2em !important;
}
h1, .et_pb_text h1 { font-size: clamp(3rem, 6vw, 6.6rem); }
h2, .et_pb_text h2 { font-size: clamp(2.2rem, 4vw, 4.3rem); }
h3, .et_pb_text h3 { font-size: clamp(1.55rem, 2.4vw, 2.6rem); }

p:last-child { padding-bottom: 0; }
a { color: var(--cj-green); transition: var(--cj-transition); }
a:hover { color: var(--cj-gold-dark); }

::selection { background: var(--cj-gold); color: var(--cj-white); }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.cj-section { padding: clamp(72px, 8vw, 130px) 0; }
.cj-section--compact { padding: clamp(52px, 6vw, 88px) 0; }
.cj-section--ivory { background: var(--cj-ivory); }
.cj-section--cream { background: var(--cj-cream); }
.cj-section--green { background: var(--cj-green); color: var(--cj-white); }
.cj-section--dark { background: var(--cj-green-deep); color: var(--cj-white); }

.cj-section--green h1,
.cj-section--green h2,
.cj-section--green h3,
.cj-section--dark h1,
.cj-section--dark h2,
.cj-section--dark h3 { color: var(--cj-white); }

.cj-max-width,
.cj-max-width.et_pb_row { width: min(90%, var(--cj-container)); max-width: var(--cj-container); }

.cj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--cj-gold-dark);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}
.cj-eyebrow::after {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--cj-gold);
}

.cj-intro { max-width: 680px; color: var(--cj-muted); font-size: 1.05rem; }
.cj-center { text-align: center; }
.cj-center .cj-intro { margin-inline: auto; }

/* =========================================================
   HEADER - LOGO CENTRÉ
   Add class cj-header to the main header section if using Divi Theme Builder
   ========================================================= */
#main-header,
.cj-header {
  background: rgba(14, 29, 23, .94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#main-header .container {
  width: min(92%, 1480px);
  max-width: 1480px;
}

#main-header #logo { max-height: 74%; }
#top-menu a {
  color: rgba(255,255,255,.92) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
}
#top-menu li.current-menu-item > a,
#top-menu a:hover { color: var(--cj-gold) !important; opacity: 1 !important; }

@media (min-width: 981px) {
  /* Divi classic header: logo visually centered */
  #main-header .logo_container {
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    text-align: center;
  }
  #main-header #et-top-navigation { width: 100%; padding-left: 0 !important; }
  #top-menu-nav { width: 100%; }
  #top-menu { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  #top-menu > li { padding-right: 0; }
  #top-menu > li:nth-child(3) { margin-right: 180px; }
  #top-menu > li:nth-child(4) { margin-left: 180px; }

  .cj-header .et_pb_row { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .cj-header .cj-header-left { justify-self: start; }
  .cj-header .cj-header-logo { justify-self: center; }
  .cj-header .cj-header-right { justify-self: end; }
}

.mobile_menu_bar:before { color: var(--cj-gold) !important; }
.et_mobile_menu { background: var(--cj-green-deep) !important; border-top-color: var(--cj-gold) !important; }
.et_mobile_menu li a { color: var(--cj-white) !important; text-transform: uppercase; letter-spacing: .08em; }

/* =========================================================
   BUTTONS
   ========================================================= */
.et_pb_button,
.cj-btn,
button,
input[type="submit"] {
  border: 1px solid var(--cj-green) !important;
  border-radius: var(--cj-radius-sm) !important;
  background: var(--cj-green) !important;
  color: var(--cj-white) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  line-height: 1.2 !important;
  padding: 16px 28px !important;
  text-transform: uppercase;
  transition: var(--cj-transition) !important;
}
.et_pb_button:hover,
.cj-btn:hover,
button:hover,
input[type="submit"]:hover {
  border-color: var(--cj-gold-dark) !important;
  background: var(--cj-gold) !important;
  color: var(--cj-green-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(198, 161, 86, .22);
}
.et_pb_button:after { display: none !important; }

.cj-btn--gold,
.cj-btn--gold.et_pb_button { background: var(--cj-gold) !important; border-color: var(--cj-gold) !important; color: var(--cj-green-deep) !important; }
.cj-btn--outline,
.cj-btn--outline.et_pb_button { background: transparent !important; border-color: rgba(255,255,255,.55) !important; color: var(--cj-white) !important; }
.cj-btn--outline-dark,
.cj-btn--outline-dark.et_pb_button { background: transparent !important; border-color: var(--cj-green) !important; color: var(--cj-green) !important; }

/* =========================================================
   HERO
   ========================================================= */
.cj-hero {
  min-height: min(900px, 92vh);
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
  position: relative;
}
.cj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,16,13,.88) 0%, rgba(8,16,13,.62) 42%, rgba(8,16,13,.12) 78%);
}
.cj-hero .et_pb_row { position: relative; z-index: 2; }
.cj-hero h1, .cj-hero h2 { color: var(--cj-white); max-width: 760px; }
.cj-hero p { max-width: 620px; color: rgba(255,255,255,.84); font-size: clamp(1rem, 1.5vw, 1.18rem); }
.cj-hero .cj-script {
  display: block;
  color: var(--cj-gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: .58em;
  font-style: italic;
  font-weight: 400;
  margin-top: .1em;
}

/* =========================================================
   IMAGE TREATMENT
   ========================================================= */
.cj-image img,
.cj-card img,
.et_pb_image.cj-image img {
  width: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.cj-image, .cj-card { overflow: hidden; }
.cj-image:hover img, .cj-card:hover img { transform: scale(1.025); }
.cj-image--portrait img { aspect-ratio: 4 / 5; }
.cj-image--landscape img { aspect-ratio: 16 / 10; }
.cj-image--square img { aspect-ratio: 1; }

/* =========================================================
   CARDS / MENU ITEMS
   ========================================================= */
.cj-card {
  height: 100%;
  background: var(--cj-white);
  border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-sm);
  box-shadow: 0 8px 28px rgba(17, 28, 22, .06);
  transition: var(--cj-transition);
}
.cj-card:hover { transform: translateY(-6px); box-shadow: var(--cj-shadow); }
.cj-card__content { padding: 24px; }
.cj-card h3 { margin-bottom: 8px; font-size: 1.45rem; }
.cj-card p { color: var(--cj-muted); font-size: .92rem; line-height: 1.65; }

.cj-menu-grid .et_pb_column { margin-bottom: 28px; }
.cj-menu-item { background: transparent; box-shadow: none; border: 0; }
.cj-menu-item .cj-card__content { padding: 18px 0 0; }
.cj-menu-item h3 { font-size: 1.28rem; }

/* =========================================================
   SPLIT CONTENT
   ========================================================= */
.cj-split .et_pb_row { display: flex; align-items: stretch; }
.cj-split .et_pb_column { display: flex; flex-direction: column; justify-content: center; }
.cj-split__content { padding: clamp(44px, 6vw, 96px); }

/* =========================================================
   EVENTS / ICON FEATURES
   ========================================================= */
.cj-features .et_pb_column { padding: 34px 28px; border-right: 1px solid var(--cj-border); }
.cj-features .et_pb_column:last-child { border-right: 0; }
.cj-feature-icon { color: var(--cj-gold); font-size: 34px; margin-bottom: 18px; }
.cj-features h3 { font-family: "Montserrat", Arial, sans-serif; font-size: .86rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.cj-features p { color: var(--cj-muted); font-size: .9rem; }

/* =========================================================
   RESERVATION / FORMS
   ========================================================= */
.cj-reservation {
  background: linear-gradient(135deg, var(--cj-green) 0%, var(--cj-green-dark) 100%);
  color: var(--cj-white);
}
.cj-reservation h2, .cj-reservation h3 { color: var(--cj-white); }

.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_contact_form select,
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], select, textarea {
  min-height: 52px;
  border: 1px solid var(--cj-border) !important;
  border-radius: var(--cj-radius-sm) !important;
  background: var(--cj-white) !important;
  color: var(--cj-charcoal) !important;
  font-family: "Montserrat", Arial, sans-serif;
  padding: 14px 16px !important;
}
textarea { min-height: 140px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--cj-gold) !important;
  box-shadow: 0 0 0 3px rgba(198,161,86,.14);
  outline: none;
}

/* =========================================================
   MAP / INFO
   ========================================================= */
.cj-info-card { background: var(--cj-green); color: var(--cj-white); padding: clamp(36px, 5vw, 70px); }
.cj-info-card h2, .cj-info-card h3 { color: var(--cj-white); }
.cj-info-card a { color: var(--cj-gold); }
.cj-map iframe { width: 100%; min-height: 420px; filter: grayscale(1) sepia(.08) contrast(.92); }

/* =========================================================
   FOOTER
   ========================================================= */
#main-footer,
.cj-footer { background: var(--cj-green-deep) !important; color: rgba(255,255,255,.76); }
#main-footer h4,
.cj-footer h2,
.cj-footer h3,
.cj-footer h4 { color: var(--cj-white); }
#footer-bottom { background: rgba(0,0,0,.15) !important; }
#footer-info, #footer-info a { color: rgba(255,255,255,.62) !important; }

/* =========================================================
   DIVI MODULE POLISH
   ========================================================= */
.et_pb_blurb_content { max-width: none; }
.et_pb_blurb_position_left .et_pb_blurb_container { padding-left: 18px; }
.et_pb_divider:before { border-top-color: var(--cj-gold) !important; }
.et_pb_accordion .et_pb_toggle,
.et_pb_toggle { border: 0; border-bottom: 1px solid var(--cj-border); background: transparent; }
.et_pb_toggle_title:before { color: var(--cj-gold) !important; }
.et_pb_gallery_grid .et_pb_gallery_item { padding: 4px; }
.et_pb_gallery_image { overflow: hidden; }
.et_pb_gallery_image img { transition: transform .5s ease; }
.et_pb_gallery_image:hover img { transform: scale(1.035); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  h1, .et_pb_text h1 { font-size: clamp(2.8rem, 9vw, 4.6rem); }
  h2, .et_pb_text h2 { font-size: clamp(2.1rem, 7vw, 3.5rem); }
  .cj-hero { min-height: 760px; background-position: 62% center; }
  .cj-hero::before { background: linear-gradient(90deg, rgba(8,16,13,.90), rgba(8,16,13,.42)); }
  .cj-split .et_pb_row { display: block; }
  .cj-features .et_pb_column { border-right: 0; border-bottom: 1px solid var(--cj-border); }
  .cj-features .et_pb_column:last-child { border-bottom: 0; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .cj-section { padding: 64px 0; }
  .cj-section--compact { padding: 46px 0; }
  .cj-hero { min-height: 680px; }
  .cj-hero::before { background: rgba(8,16,13,.68); }
  .cj-hero p { max-width: 100%; }
  .cj-split__content { padding: 42px 24px; }
  .et_pb_button, .cj-btn { width: 100%; text-align: center; margin-bottom: 10px; }
}

/* Accessibility */
:focus-visible { outline: 3px solid rgba(198,161,86,.55); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}