/*
 Theme Name:   Chez Berthe Child
 Theme URI:    https://chez-berthe-restaurant.com
 Description:  Thème enfant Hello Elementor pour Chez Berthe Restaurant Social Club
 Author:       Graphicomm SARL
 Author URI:   https://graphicomm.fr
Template: hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  chez-berthe-child
*/

/* ─────────────────────────────────────────────────────────────
   CHEZ BERTHE — Thème enfant Hello Elementor
   Ce fichier contient les styles de base à importer dans WP.
   Le CSS principal est géré via Elementor > Site Settings > Custom CSS
   ───────────────────────────────────────────────────────────── */

/* Variables globales */
:root {
  --cb-vert:      #1A5245;
  --cb-vert-d:    #102E27;
  --cb-rose:      #BE63B0;
  --cb-rose-d:    #8B3F82;
  --cb-creme:     #E8DFA8;
  --cb-bois:      #7A4E2D;
  --cb-bois-c:    #A67C52;
  --cb-noir:      #0D0D0D;

  --cb-f-disp:    'Oswald', sans-serif;
  --cb-f-body:    'DM Sans', sans-serif;
  --cb-f-accent:  'Permanent Marker', cursive;
}

/* Police globale */
body {
  font-family: var(--cb-f-body) !important;
  background-color: var(--cb-vert-d) !important;
  color: var(--cb-creme) !important;
}

/* Titres */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--cb-f-disp) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Paragraphes */
p { color: rgba(232,223,168,.65); line-height: 1.75; }

/* Liens */
a { transition: color .2s; }
a:hover { color: var(--cb-rose); }

/* ─── HEADER ELEMENTOR ─── */
.e-con.elementor-section--header,
header.elementor-section {
  transition: background .4s, padding .4s !important;
}

/* ─── BOUTONS ELEMENTOR ─── */
.elementor-button {
  font-family: var(--cb-f-disp) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.elementor-button.elementor-button-primary,
.elementor-button.cb-btn-rose {
  background-color: var(--cb-rose) !important;
  color: var(--cb-noir) !important;
  border-color: var(--cb-rose) !important;
  font-weight: 700 !important;
}

.elementor-button.elementor-button-primary:hover,
.elementor-button.cb-btn-rose:hover {
  background-color: var(--cb-rose-d) !important;
  border-color: var(--cb-rose-d) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(190,99,176,.35);
}

/* ─── FORMULAIRE WPFORMS (STYLE CHEZ BERTHE) ─── */
.wpforms-container .wpforms-field input,
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
  background: rgba(232,223,168,.04) !important;
  border: 1px solid rgba(232,223,168,.15) !important;
  border-radius: 4px !important;
  color: var(--cb-creme) !important;
  font-family: var(--cb-f-body) !important;
  padding: 13px 16px !important;
  transition: border-color .2s, background .2s !important;
}

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field select:focus,
.wpforms-container .wpforms-field textarea:focus {
  outline: none !important;
  border-color: var(--cb-rose) !important;
  background: rgba(190,99,176,.06) !important;
}

.wpforms-container .wpforms-field input::placeholder,
.wpforms-container .wpforms-field textarea::placeholder {
  color: rgba(232,223,168,.3) !important;
}

.wpforms-container .wpforms-field-label {
  font-family: var(--cb-f-disp) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--cb-rose) !important;
}

.wpforms-container .wpforms-submit {
  background-color: var(--cb-rose) !important;
  color: var(--cb-noir) !important;
  font-family: var(--cb-f-disp) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 16px 32px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background .3s !important;
  width: 100% !important;
}

.wpforms-container .wpforms-submit:hover {
  background-color: var(--cb-rose-d) !important;
}

/* ─── SMASH BALLOON INSTAGRAM ─── */
#sb_instagram .sbi_photo_wrap img {
  border-radius: 0 !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1) !important;
}

#sb_instagram .sbi_photo_wrap:hover img {
  transform: scale(1.07) !important;
}

/* ─── GRAIN OVERLAY GLOBAL ─── */
.elementor-section.cb-grain::after,
.e-con.cb-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ─── LOOP GRID SOIRÉES ─── */
/* Carte soirée — Loop Card Template Elementor */
.cb-event-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

.cb-event-card .cb-event-img img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.cb-event-card:hover .cb-event-img img { transform: scale(1.07); }

.cb-event-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,.9) 0%, transparent 60%);
  pointer-events: none;
}

.cb-event-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  background: var(--cb-rose);
  color: var(--cb-noir);
  font-family: var(--cb-f-disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.cb-event-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 24px 20px;
}

/* Carte passée — désaturée */
.cb-event-card.cb-past .cb-event-img img {
  filter: grayscale(35%);
  opacity: .8;
}

.cb-event-card.cb-past:hover .cb-event-img img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ─── ANIMATIONS SCROLL ─── */
.cb-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

.cb-fade-up.cb-visible { opacity: 1; transform: translateY(0); }

/* ─── FOOTER ─── */
.elementor-location-footer {
  border-top: 3px solid var(--cb-rose) !important;
}