/* =========================================================
   THEME MARIAGE — PALETTE (marron / beige / terracotta)
   ========================================================= */

:root{
  --brown-dark:  #4A2F22;
  --brown-main:  #8B4A2B;
  --terracotta:  #A6522B;

  --beige-main:  #E6D5C3;
  --beige-light: #F4ECE3;
  --off-white:   #FBF7F2;

  --text-main:   #2E1F18;
  --shadow:      rgba(0,0,0,.35);
}

/* =========================================================
   GLOBAL — fond du site + texte par défaut
   ========================================================= */

/* IMPORTANT:
   Si tu ne peux plus scroller, c’est souvent un overflow caché
   imposé par le thème (html/body/wrapper) ou par un preloader.
   On rétablit un scroll normal et on évite les "height:100%" bloquants.
*/
html{
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
body{
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--beige-main);
  color: var(--text-main);
}

/* Si ton thème a un wrapper global, ça évite les fonds blancs non voulus */
#wrapper,
.main,
.page-wrapper{
  background: transparent;
}

/* Sections par défaut */
section{
  background: var(--beige-light);
}

/* Section alternée (si tu utilises déjà cette classe) */
.section-bg-color{
  background: var(--beige-main);
}

/* Texte des titres (hors hero) */
h1,h2,h3,h4,h5,h6{
  color: var(--brown-dark);
}

/* =========================================================
   PRELOADER — ne doit JAMAIS bloquer le scroll après chargement
   ========================================================= */

/* Le thème Neela masque parfois le scroll tant que le preloader est là.
   On s’assure qu’il ne "capture" pas la page si une classe active persiste.
*/
#preloader{
  pointer-events: none; /* évite de bloquer clic/scroll si le script bug */
}

/* =========================================================
   HERO — effet Neela + fondu
   IMPORTANT : tu as déjà <div class="hero-overlay"></div>
   Donc on UTILISE cette div (et on ne mélange pas avec ::before)
   ========================================================= */

#hero{
  position: relative;
  overflow: hidden;
  background-color: var(--brown-dark);
}

/* Ton overlay HTML */
#hero .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* ✅ voile marron clair uniforme */
  background-color: rgba(139, 74, 43, 0.35); /* marron clair translucide */
}

#hero{
  position: relative;
  overflow: hidden;

  /* ✅ image plus claire et douce */
  filter: brightness(1.12) contrast(1.03) saturate(1.02);
}


/* Le contenu au-dessus de l’overlay */
#hero .container,
#hero .hero-wrapper{
  position: relative;
  z-index: 2;
}

/* Texte avant le compte à rebours */
#hero .hero-lead{
  margin: 12px auto 14px;
  max-width: 820px;
  padding: 0 12px;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;

  color: rgba(255,255,255,.92);
  text-shadow: 0 3px 18px rgba(0,0,0,.35);
}

/* Bloc countdown */
#hero .hero-countdown{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

#hero .hero-countdown .cd-item{
  min-width: 110px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

#hero .hero-countdown .cd-num{
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: rgba(255,255,255,.96);
  text-shadow: 0 3px 18px rgba(0,0,0,.35);
}

#hero .hero-countdown .cd-label{
  display: block;
  margin-top: 6px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

@media (max-width: 600px){
  #hero .hero-lead{ font-size: 16px; margin: 10px auto 12px; }
  #hero .hero-countdown{ gap: 10px; }
  #hero .hero-countdown .cd-item{ min-width: 92px; padding: 10px 12px; border-radius: 14px; }
  #hero .hero-countdown .cd-num{ font-size: 34px; }
}

/* =========================================================
   TEXTES HERO
   ========================================================= */

#hero h1,
#hero h2{
  color: var(--off-white);
  text-shadow: 0 4px 18px var(--shadow);
}

#hero .hero-subtitle{
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 16px var(--shadow);
}

/* =========================================================
   HERO DATE — style "SEPT 24 2025" (si tu réutilises ce bloc)
   ========================================================= */

#hero .hero-subtitle{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 28px;
  margin: 10px 0 18px;
  text-align: center;
}

#hero .hero-subtitle .month,
#hero .hero-subtitle .year{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
  opacity: .95;
}

#hero .hero-subtitle .date{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 120px;
  line-height: .85;
  letter-spacing: 0;
  opacity: .98;
}

@media (max-width: 600px){
  #hero .hero-subtitle{ gap: 14px; margin: 8px 0 14px; }
  #hero .hero-subtitle .month,
  #hero .hero-subtitle .year{ font-size: 26px; }
  #hero .hero-subtitle .date{ font-size: 76px; line-height: .9; }
}

/* =========================================================
   BOUTONS — cohérents palette
   ========================================================= */

.btn-primary{
  background-color: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--brown-main);
  border-color: var(--brown-main);
  color: #fff;
}

.btn-light{
  background-color: rgba(255,255,255,0.90);
  color: var(--brown-dark);
  border: none;
}

.btn-light:hover,
.btn-light:focus{
  background-color: var(--beige-light);
  color: var(--brown-dark);
}

/* =========================================================
   SECTIONS “FONCÉES” (si tu en utilises)
   ========================================================= */

.bg-color{
  background: var(--brown-dark);
  color: var(--off-white);
}
.bg-color h1,
.bg-color h2,
.bg-color h3,
.bg-color h4,
.bg-color h5,
.bg-color h6{
  color: var(--off-white);
}

/* =========================================================
   PROGRAMME (remplace la section "Lieu" côté front)
   ========================================================= */

#programme .program-card{
  padding: 18px 18px;
  border-radius: 18px;
  text-align: center;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

#programme .program-icon{
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
}

#programme .program-line{
  font-size: 18px;
  line-height: 1.35;
  color: var(--brown-dark);
}

#programme .program-note{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.65);
}

/* =========================================================
   DRESSCODE — PALETTE VISIBLE
   ========================================================= */

.dress-palette{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.dress-palette .swatch{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.swatch-brown-dark{ background: var(--brown-dark); }
.swatch-brown-main{ background: var(--brown-main); }
.swatch-terracotta{ background: var(--terracotta); }
.swatch-beige-main{ background: var(--beige-main); }
.swatch-beige-light{ background: var(--beige-light); }

/* =========================================================
   RSVP — CHAMPS CLIQUABLES / EDITABLES
   Problème classique : des pseudo-éléments décoratifs passent au-dessus
   ========================================================= */

#rsvp .form-wrapper,
#rsvp .rsvp-fields{
  position: relative;
  z-index: 10;
}

/* Les décorations ne doivent jamais capter les événements */
#rsvp .form-wrapper::before,
#rsvp .form-wrapper::after,
#rsvp .flowers::before,
#rsvp .flowers::after,
#rsvp .neela-style::before,
#rsvp .neela-style::after{
  pointer-events: none !important;
}

/* Sécurité : inputs toujours interactifs */
#rsvp input,
#rsvp select,
#rsvp textarea,
#rsvp button,
#rsvp a{
  pointer-events: auto !important;
}

/* Si un overlay global traîne (rare mais possible) */
#rsvp .hero-overlay,
#rsvp .bg-overlay{
  pointer-events: none !important;
}

/* =========================================================
   CAGNOTTE / GIFTS — SECTION STYLE (2 CARTES HORIZONTALES)
   IMPORTANT : évite la double-définition (.wedding-gifts) dans ton ancien CSS
   Ici on fixe tout proprement et une seule fois.
   ========================================================= */

.wedding-gifts-section{
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

/* Image de fond (tu changes l’URL ici) */
.wedding-gifts-section .bg-image{
  position: absolute;
  inset: 0;
  background-image: url('/images/gift-background-img.jpg'); /* 🔴 CHANGE ICI */
  background-size: cover;
  background-position: center;
  filter: grayscale(10%) contrast(1.05);
  z-index: 1;
}

/* Overlay fondu (plus chic + meilleure lisibilité) */
/* Overlay fondu — VERSION PLUS LÉGÈRE (image plus visible) */
.wedding-gifts-section .bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(90,55,40,0.45) 0%,
    rgba(170,120,95,0.30) 40%,
    rgba(240,225,210,0.65) 70%,
    rgba(240,225,210,0.85) 100%
  );
  z-index: 2;
  pointer-events: none;
}


/* Titre / sous-titre lisibles sur fond */
.wedding-gifts-section .section-title,
.wedding-gifts-section .section-subtitle,
.wedding-gifts-section .section-desc{
  position: relative;
  z-index: 3;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* Liste des cartes */
.wedding-gifts{
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 50px;
  list-style: none;
  padding: 0;
  margin: 50px 0 0;
}

/* 2 cartes larges */
.wedding-gifts > li{
  flex: 1 1 440px;
  max-width: 480px;
}

/* Carte "premium" */
.gift-card{
  height: 100%;
  padding: 60px 40px;
  text-align: center;
  background: rgba(255,255,255,0.92);
  border-radius: 22px;
  border: 1px solid rgba(180,200,215,.5);
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
}

/* cadre léger intérieur */
.gift-card::before,
.gift-card::after{
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(180,200,215,.5);
  border-radius: 18px;
  opacity: .35;
  pointer-events: none;
}
.gift-card::after{
  inset: 28px;
}

.gift-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 35px 80px rgba(0,0,0,0.25);
}

.gift-card i{
  font-size: 44px;
  color: var(--terracotta);
  margin-bottom: 24px;
}

.gift-card h3{
  font-family: "Playfair Display", serif;
  font-size: 26px;
  color: var(--brown-dark);
  margin-bottom: 20px;
}

.gift-card p{
  font-size: 15px;
  line-height: 1.8;
  color: #6b4e3d;
  margin-bottom: 16px;
}

/* Bouton premium */
.gift-card .btn{
  background: linear-gradient(135deg, #a6522b, #8b4a2b);
  border: none;
  padding: 14px 32px;
  letter-spacing: 0.12em;
  font-size: 13px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gift-card .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Responsive */
@media (max-width: 992px){
  .wedding-gifts{
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  .wedding-gifts > li{
    max-width: 520px;
    width: 100%;
  }
}


/* =========================================================
   FIX PALETTE — SUPPRIMER LE BLEU DU THÈME NEELA
   Colle ce bloc en TOUT DERNIER dans custom-theme.css
   ========================================================= */

:root{
  --brown-dark:  #4A2F22;
  --brown-main:  #8B4A2B;
  --terracotta:  #A6522B;

  --beige-main:  #E6D5C3;
  --beige-light: #F4ECE3;
  --off-white:   #FBF7F2;

  --text-main:   #2E1F18;

  /* ✅ couleur d’accent unique (remplace le bleu du thème) */
  --accent:      var(--terracotta);
  --accent-2:    var(--brown-main);
}

/* ---------- Global ---------- */
body{ color: var(--text-main); }
a{ color: var(--accent); }
a:hover, a:focus{ color: var(--accent-2); }

h1,h2,h3,h4,h5,h6{ color: var(--brown-dark); }

/* ---------- Boutons ---------- */
.btn-primary,
.btn-primary.reverse{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.reverse:hover,
.btn-primary.reverse:focus{
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}

.btn-outline-primary{
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn-outline-primary:hover{
  background: var(--accent) !important;
  color: #fff !important;
}

/* ---------- Navigation / éléments actifs ---------- */
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-nav > li > a:focus{
  color: var(--accent) !important;
}

/* ---------- Icônes (celles qui ressortent en bleu) ---------- */
i[class^="icon-"],
i[class*=" icon-"],
.fa, .fas, .far, .fal, .fab{
  color: var(--accent) !important;
}

/* ---------- Séparateurs / ornements de titres (souvent bleus) ---------- */
.section-title:after,
.section-title:before,
.section-title-lg:after,
.section-title-lg:before,
.divider-about-us i,
.info-map-divider{
  border-color: rgba(166,82,43,.35) !important;
  color: var(--accent) !important;
}

/* ---------- Cadres / traits décoratifs autour des cartes ---------- */
.neela-style,
.invite.neela-style,
.form-wrapper.neela-style,
.program-card,
.gift-card{
  border-color: rgba(74,47,34,.18) !important;
}

/* ---------- Décos feuilles / SVG bleus dans le hero et ailleurs ---------- */
/* (Le thème colore souvent ces SVG via fill/stroke) */
#hero svg, #hero .leaf, #hero .leaves,
.section-divider-top-1 svg, .section-divider-bottom-1 svg,
.divider-about-us svg, .neela-style svg{
  fill: rgba(166,82,43,.28) !important;
  stroke: rgba(166,82,43,.28) !important;
}

/* Si tes décos sont en image (PNG/SVG) et restent bleues,
   on peut au moins les "réchauffer" légèrement */
#hero .hero-wrapper,
#hero .hero-overlay{
  filter: none; /* éviter les filtres du thème */
}

/* ---------- Programme / Dress code (si tu as mis des accents bleus) ---------- */
#programme .program-icon,
#programme .program-line strong,
#dresscode .dress-palette .swatch{
  color: var(--accent) !important;
}

/* Petits traits décoratifs sous titres (souvent en bleu clair) */
hr, .separator, .title-sep, .small-sep{
  border-color: rgba(166,82,43,.35) !important;
}

/* ---------- Inputs focus (souvent bleu Bootstrap) ---------- */
.form-control:focus, .form-select:focus{
  border-color: rgba(166,82,43,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(166,82,43,.18) !important;
}



/* =========================
   HERO — IMAGE RESPONSIVE (IMG HTML)
   ========================= */

#hero{
  position: relative;
  overflow: hidden;
  min-height: 78vh;      /* desktop */
  background-color: #8B4A2B; /* marron clair de secours */
}

/* conteneur image */
#hero .hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* image responsive */
#hero .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 🔑 ESSENTIEL */
  object-position: center 30%;
  display: block;
}
/* Masquer complètement le menu / header */
#header,
.nav-section,
.navbar,
#nav-mobile-btn{
  display: none !important;
}

/* =========================
   CITATION BIBLIQUE — À PROPOS
   ========================= */

.bible-quote{
  margin: 28px auto 0;
  padding: 22px 26px;
  max-width: 720px;
  text-align: center;

  background: var(--beige-light);
  border-left: 4px solid var(--terracotta);
  border-radius: 14px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.bible-quote .verse-text{
  margin: 0 0 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--brown-dark);
  font-style: italic;
}

.bible-quote .verse-ref{
  display: block;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
}


/* =========================================================
   FIX MOBILE HARD — Neela
   Boutons + titres qui débordent (RSVP / Cagnotte / Google Maps)
   À COLLER TOUT EN BAS de custom-theme.css
   ========================================================= */

html, body { overflow-x: hidden !important; }
#wrapper, section { overflow-x: hidden !important; }
* { box-sizing: border-box !important; }

/* --------- 1) TITRE "Confirmation de présence" qui déborde --------- */
@media (max-width: 576px){

  /* Le thème met parfois un nowrap ou une taille trop grande */
  #rsvp .section-title,
  #rsvp h2.section-title,
  #rsvp .form-wrapper h2{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;

    /* taille responsive */
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.05 !important;

    /* centrage */
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  /* --------- 2) BOUTONS qui débordent / pas centrés --------- */

  /* Cibles exactes : Google Maps (Invitation), WhatsApp (RSVP), Cagnotte */
  #the-wedding .invite_info a.btn,
  #rsvp #rsvp_whatsapp_btn,
  #giftregistry .gift-card a.btn{
    /* occupe toute la largeur disponible et reste centré */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;

    /* neutralise les comportements du thème */
    float: none !important;
    clear: both !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    /* empêche le texte de forcer une seule ligne */
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;

    /* réduit ce qui cause souvent le débordement */
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
    padding: 14px 14px !important;

    text-align: center !important;
  }

  /* Si le thème met un cadre décoratif via pseudo-éléments sur les boutons */
  #the-wedding .invite_info a.btn::before,
  #the-wedding .invite_info a.btn::after,
  #rsvp #rsvp_whatsapp_btn::before,
  #rsvp #rsvp_whatsapp_btn::after,
  #giftregistry .gift-card a.btn::before,
  #giftregistry .gift-card a.btn::after{
    content: none !important;
    display: none !important;
  }

  /* Certains thèmes ajoutent aussi des spans décoratifs internes */
  #the-wedding .invite_info a.btn * ,
  #giftregistry .gift-card a.btn * {
    max-width: 100% !important;
  }

  /* --------- 3) Le conteneur des boutons doit être centré --------- */
  #the-wedding .invite_info .mt-3,
  #rsvp .col-12.text-center,
  #giftregistry .gift-card{
    text-align: center !important;
  }

  /* --------- 4) Textes uppercase (Invitation) qui débordent parfois --------- */
  #the-wedding .invite_info .uppercase{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* --------- 5) Un peu de padding latéral pour éviter de toucher les bords --------- */
  #the-wedding .container,
  #rsvp .container,
  #giftregistry .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================================
   ABOUT US — MASQUER LES PHOTOS
   ========================================================= */

/* Masquer seulement les photos du couple (garde la structure + hover/info) */
#about-us .about-elems-wrapper .element .image > img{
  display: none !important;
}

/* Optionnel : si tu veux enlever la hauteur vide créée par l'image */
#about-us .about-elems-wrapper .element .image{
  height: 50% !important;
  min-height: 0 !important;
}


/* =========================================================
   ESPACER LA SECTION "À PROPOS" DU HERO
   ========================================================= */

/* Ajoute de l’espace AU-DESSUS de "À propos de nous" */
#about-us {
  padding-top: 300px; /* ajuste: 80 / 100 / 140 selon ton goût */
}

/* Mobile : un peu moins pour éviter trop de blanc */
@media (max-width: 767.98px) {
  #about-us {
    padding-top: 80px;
  }
}