/* =====================================================
   🌲 Holz & Chalets - STYLE GLOBAL
   ===================================================== */

:root {
  --beige-clair: #F5F0E6;
  --beige-doux: #E9E2D3;
  --vert-foret: #2F3E35;
  --brun-bois: #7C500D;
  --texte-brun: #3B2A1A;
}


/* 🎨 Palette de couleurs */
:root {
  --vert: #3E6047;
  --marron: #A47C48;
  --beige: #F6F1E7;
  --blanc: #FEFCF8;
  --gris: #DDE5DC;
  --brun: #2C2213;
  --ombre: rgba(0, 0, 0, 0.08);
}

/* ✏️ Typographie */
body {
   font-family: 'Inter', sans-serif;
  background-color: var(--beige);
  color: var(--brun);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', serif;
  color: var(--brun);
}

p {
  color: var(--marron);
}

a {
  text-decoration: none;
}

/* =====================================================
   🔝 NAVBAR
   ===================================================== */
.navbar {
  background-color: var(--blanc);
  box-shadow: 0 2px 10px var(--ombre);
}
.navbar-brand {
  color: var(--vert) !important;
  font-weight: 700;
}
.nav-link {
  color: var(--brun) !important;
  transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--marron) !important;
}

/* =====================================================
   🏕️ SECTIONS GÉNÉRALES
   ===================================================== */
section.bg-light {
  background-color: var(--blanc);
}

.ligne-deco {
  width: 80px;
  height: 4px;
  background-color: var(--marron);
  border-radius: 3px;
}

/* =====================================================
   🌿 HÉROS D’Startseite
   ===================================================== */
.hero-home {
  background: url('../images/hero.png') center/cover no-repeat;
  min-height: 90vh;
  position: relative;
  width: 100%;
}
.hero-home .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.hero-home .container {
  position: relative;
  z-index: 2;
}
.hero-home h1 {
  font-family: 'Playfair Display', serif;
  color: var(--blanc);
}
.hero-home p {
  color: #f2f2f2;
}

/* =====================================================
   🪵 BOUTONS
   ===================================================== */
.btn-primary {
  background-color: var(--vert);
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  transition: all 0.3s;
}
.btn-primary:hover {
  background-color: var(--marron);
}
.btn-outline-light {
  border: 2px solid var(--blanc);
  color: var(--blanc);
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  transition: all 0.3s;
}
.btn-outline-light:hover {
  background-color: var(--blanc);
  color: var(--vert);
}

/* =====================================================
   🪵 CARTES PRODUITS
   ===================================================== */
.card {
  background-color: var(--blanc);
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 10px var(--ombre);
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px var(--ombre);
}
.card-title {
  color: var(--brun);
}
.card-text {
  color: var(--marron);
}

/* =====================================================
   🌳 POURQUOI NOUS CHOISIR / VALEURS
   ===================================================== */
.card-value {
  background-color: var(--blanc);
  border-radius: 16px;
  box-shadow: 0 4px 10px var(--ombre);
  transition: all 0.3s ease;
}
.card-value:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* =====================================================
   💬 TÉMOIGNAGES
   ===================================================== */
section.bg-light .p-4 {
  border-left: 4px solid var(--vert);
  background-color: var(--blanc);
  color: var(--brun);
}

/* =====================================================
   🪵 CTA FINALE
   ===================================================== */
.cta {
  background: linear-gradient(351deg, #00000000, #264f3f);
  color: var(--blanc);
}
.cta .btn-light {
  color: var(--vert);
  border-radius: 10px;
  transition: all 0.3s;
}
.cta .btn-light:hover {
  background-color: var(--marron);
  color: var(--blanc);
}

/* =====================================================
   🧺 PANIER / COMMANDE
   ===================================================== */
#contenu-panier {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--blanc);
  border-radius: 16px;
  box-shadow: 0 4px 16px var(--ombre);
}
#liste-panier .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border: none;
  border-bottom: 1px solid var(--gris);
}
#total-panier {
  color: var(--marron);
}

/* =====================================================
   🧾 FORMULAIRE DE COMMANDE
   ===================================================== */
form#form-commande {
  background-color: var(--blanc);
  border-radius: 16px;
  box-shadow: 0 4px 16px var(--ombre);
}
form#form-commande .form-control {
  border-radius: 10px;
  border: 1px solid var(--gris);
  padding: 0.75rem 1rem;
}
form#form-commande label {
  font-weight: 500;
  color: var(--brun);
}
form#form-commande .btn-primary {
  border-radius: 10px;
  background-color: var(--vert);
  border: none;
}
form#form-commande .btn-primary:hover {
  background-color: var(--marron);
}

/* =====================================================
   💬 FORMULAIRE CONTACT
   ===================================================== */
form#form-contact {
  background-color: var(--blanc);
  border-radius: 16px;
  box-shadow: 0 4px 16px var(--ombre);
  transition: transform 0.2s;
}
form#form-contact:hover {
  transform: translateY(-3px);
}
form#form-contact .form-control {
  border-radius: 10px;
  border: 1px solid var(--gris);
  padding: 0.75rem 1rem;
}
form#form-contact .btn-primary {
  border-radius: 10px;
  background-color: var(--vert);
  border: none;
}
form#form-contact .btn-primary:hover {
  background-color: var(--marron);
}

/* =====================================================
   🎉 PAGE REMERCIEMENT
   ===================================================== */
.icon-success i {
  color: var(--vert);
  animation: pop 0.6s ease;
}
@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  80% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

/* =====================================================
   🌲 PAGE Über
   ===================================================== */
.hero-apropos {
  background: url('../images/hero-apropos.jpg') center/cover no-repeat;
  min-height: 60vh;
  position: relative;
}
.hero-apropos .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.hero-apropos .container {
  z-index: 2;
  position: relative;
}
.hero-apropos h1, .hero-apropos p {
  color: var(--blanc);
}

/* =====================================================
   🧭 PIED DE PAGE
   ===================================================== */
footer {
  background-color: var(--vert);
  color: var(--beige);
}
footer a:hover {
  color: var(--marron);
}
.social-icons a:hover {
  color: var(--marron);
}

/* =====================================================
   📱 RESPONSIVE DESIGN
   ===================================================== */
@media (max-width: 992px) {
  h1, h2 {
    font-size: 1.8rem;
  }
  .hero-home {
    min-height: 70vh;
  }
  .hero-home p {
    font-size: 1rem;
  }
  .cta h2 {
    font-size: 1.6rem;
  }
  .cta .btn {
    font-size: 1rem;
  }
}


/* =====================================================
   🌙 DARK MODE – Forêt Nocturne
   ===================================================== */
body.dark-mode {
  background-color: #1C1A16;
  color: #F6F1E7;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
  color: #F6F1E7;
}

body.dark-mode p,
body.dark-mode li {
  color: #EAE6DD;
}

body.dark-mode .navbar {
  background-color: #1F1D19;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
body.dark-mode .navbar-brand {
  color: #5E8C6A !important;
}
body.dark-mode .nav-link {
  color: #EAE6DD !important;
}
body.dark-mode .nav-link:hover {
  color: #B28958 !important;
}

body.dark-mode .card,
body.dark-mode form,
body.dark-mode footer,
body.dark-mode .cta {
  background-color: #2A2723;
  color: #EAE6DD;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

body.dark-mode .card-title {
  color: #F6F1E7;
}
body.dark-mode .card-text {
  color: #B28958;
}

body.dark-mode .btn-primary {
  background-color: #5E8C6A;
  color: #F6F1E7;
}
body.dark-mode .btn-primary:hover {
  background-color: #B28958;
  color: #1C1A16;
}

body.dark-mode footer {
  background-color: #1F1D19;
  color: #EAE6DD;
}

body.dark-mode .cta {
  background: linear-gradient(90deg, #2E4937, #5E8C6A);
  color: #EAE6DD;
}


/* 🌿 Notifications toast */
.toast {
  border-radius: 10px;
  font-size: 0.95rem;
  background-color: var(--vert) !important;
}
.toast-body {
  font-weight: 500;
}
.toast .btn-close {
  filter: invert(1);
}

/* 🛍️ Fenêtre latérale d’ajout au panier */
.popup-panier {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100vh;
  background-color: var(--blanc);
  box-shadow: -5px 0 15px rgba(0,0,0,0.2);
  transition: right 0.4s ease;
  z-index: 2000;
  padding: 0rem;
}
.popup-panier.active {
  right: 0;
}
.popup-content {
  position: relative;
  height: 100%;
}
.popup-content h5 {
  color: var(--vert);
}
.popup-content #popupProduit {
  font-size: 1rem;
  color: var(--brun);
}
.popup-panier .btn-outline-secondary {
  border-radius: 8px;
  border-color: var(--marron);
  color: var(--marron);
  transition: all 0.3s;
}
.popup-panier .btn-outline-secondary:hover {
  background-color: var(--marron);
  color: var(--blanc);
}
.popup-panier .btn-primary {
  border-radius: 8px;
  background-color: var(--vert);
  border: none;
}
.popup-panier .btn-primary:hover {
  background-color: var(--marron);
}

@keyframes slideIn {
  from { right: -400px; opacity: 0; }
  to { right: 0; opacity: 1; }
}
.popup-panier.active {
  animation: slideIn 0.4s ease forwards;
}


body {
  background-color: var(--beige-clair);
  color: var(--texte-brun);
  font-family: 'Inter', sans-serif;
}

/* ✅ Navigation */
.navbar {
  background-color: var(--beige-clair) !important;
}
.navbar a.nav-link {
  color: var(--texte-brun);
  font-weight: 500;
}
.navbar a.nav-link.active {
  color: var(--brun-bois);
  font-weight: 600;
}

/* ✅ Titres */
h1, h2, h3, h4 {
  color: var(--texte-brun);
  font-family: 'Playfair Display', serif;
}

/* ✅ Boutons */
.btn-primary {
  background-color: var(--brun-bois);
  border-color: var(--brun-bois);
  color: #fff;
  font-weight: 500;
  border-radius: 30px;
  padding: 10px 25px;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: var(--vert-foret);
  border-color: var(--vert-foret);
}

/* ✅ Cartes produits */
.card {
  background-color: var(--beige-doux);
  border: none;
  border-radius: 12px;
  overflow: hidden;
}
.card-title {
  color: var(--texte-brun);
  font-weight: 600;
}

section.produits {
  background-color: var(--beige-clair);
  padding: 60px 0;
}
section.produits h2 {
  color: var(--texte-brun);
  margin-bottom: 40px;
}


/* ✅ Footer */
footer {
  background-color: var(--vert-foret);
  color: var(--beige-clair);
  font-size: 0.95rem;
}
footer a {
  color: var(--beige-clair);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
  color: var(--brun-bois);
}

footer {
  background-color: var(--vert-foret);
  color: var(--beige-clair);
  padding: 50px 0 30px;
  border-top: 4px solid var(--brun-bois);
}
footer p {
  margin: 0;
  opacity: 0.9;
}