/* Tajir Transfert — Style personnalisé
   ------------------------------------
   Tonalité : luxe, sobre, haut de gamme.
   Palette : noir profond, doré élégant.
   Police principale : Inter
   Police d'accent : Playfair Display
*/

html {
  scroll-behavior: smooth;
}

body {
  background-color: #0d0d0d;
  color: #f5f5f5;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
}

/* Sélecteur de texte personnalisé */
::selection {
  background-color: #d4af37;
  color: #0d0d0d;
}

/* Liens */
a {
  transition: color 0.3s ease, background-color 0.3s ease;
}
a:hover {
  color: #d4af37;
}

/* Ombres luxueuses */
.shadow-gold {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* Boutons dorés */
.btn-gold {
  background-color: #d4af37;
  color: #0d0d0d;
  border: 1px solid #d4af37;
  border-radius: 9999px;
  font-weight: 600;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: #0d0d0d;
  color: #d4af37;
  border-color: #d4af37;
}

/* Formulaires */
input, select, textarea {
  background-color: #111;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f5f5f5;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
}

/* Label */
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #d4af37;
}

/* Carte Google Maps */
#map {
  height: 400px;
  min-height: 400px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  z-index: 5;
  position: relative;
}


/* Popup succès */
#popupSuccess {
  animation: fadeInSlide 0.6s ease forwards;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section titres */
.section-title {
  font-family: "Playfair Display", serif;
  color: #d4af37;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* --- Section Avis Google --- */
.review-card {
  position: relative;
  background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.15);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}

/* Effet de fondu doré en bas */
.fade-overlay {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  background: linear-gradient(to top, rgba(13,13,13,1), rgba(13,13,13,0));
  border-radius: 0 0 14px 14px;
  pointer-events: none;
}


/* FAQ */
.faq-item {
  background-color: #111;
  border-left: 3px solid #d4af37;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Footer */
footer a {
  color: #f5f5f5;
  text-decoration: none;
}
footer a:hover {
  color: #d4af37;
}

/* Animation du bouton “haut de page” */
#backToTop {
  transition: opacity 0.4s ease, transform 0.3s ease;
}
#backToTop:hover {
  transform: translateY(-3px);
}

/* Media Queries (petits écrans) */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
  }
  #map {
    height: 280px;
  }
}

/* --- Section Tarifs --- */
.tarif-card {
  background: linear-gradient(180deg, #121212 0%, #0b0b0b 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* --- Animation et Glow doré --- */

/* Icône : rotation lente et halo doré au survol */
.icon-wrapper i {
  transition: transform 0.5s ease, text-shadow 0.5s ease;
}

.tarif-card:hover i {
  transform: rotate(10deg) scale(1.1);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.6),
               0 0 30px rgba(212, 175, 55, 0.3);
}

/* Bouton : halo progressif */
.btn-gold {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: scale(0.9);
  z-index: -1;
}
.btn-gold:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Lueur douce autour de la carte */
.tarif-card:hover {
  box-shadow: 0 0 35px rgba(212, 175, 55, 0.4);
}

.tarif-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
  border-color: rgba(212, 175, 55, 0.6);
}
.icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  background: rgba(212, 175, 55, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: background 0.3s ease;
}
.tarif-card:hover .icon-wrapper {
  background: rgba(212, 175, 55, 0.3);
}

/* --- Section Réservation --- */
#reservation {
  background: radial-gradient(circle at center, #0e0e0e 0%, #000 100%);
}

/* Ajustement global des champs */
#bookingForm input,
#bookingForm textarea,
#bookingForm select {
  width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;
  background-color: rgba(20, 20, 20, 0.9);
  color: #f5f5f5;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

#bookingForm input:focus,
#bookingForm textarea:focus,
#bookingForm select:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  background: rgba(25, 25, 25, 0.95);
}

/* Équilibre visuel des labels */
#bookingForm label {
  display: block;
  font-weight: 600;
  color: #d4af37;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

/* Style du texte d’aide */
#bookingForm input::placeholder,
#bookingForm textarea::placeholder {
  color: rgba(245, 245, 245, 0.5);
  font-style: italic;
}

/* Map stylisée */
#map {
  height: 400px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Animation douce au survol du bouton */
.btn-gold {
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.btn-gold:hover {
  background-color: #000;
  border-color: #d4af37;
  color: #d4af37;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
}

/* --- Section FAQ --- */
.faq-item {
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}

.faq-content {
  transition: max-height 0.5s ease, opacity 0.4s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.faq-item.active .faq-content {
  max-height: 300px;
  opacity: 1;
}

.faq-item.active .fa-chevron-down {
  transform: rotate(180deg);
}

/* --- Section Services --- */
.service-card {
  transition: all 0.4s ease;
  background-color: #111;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
}

/* --- Footer --- */
footer {
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(circle at center, #000 0%, #0a0a0a 100%);
}

footer h3 {
  letter-spacing: 0.5px;
}

footer a:hover i {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Séparateur doré entre sections */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.8), transparent);
  opacity: 0.6;
  filter: blur(0.2px);
  margin: 4rem 0;
}

/* --- Typographie Tajir Transfert --- */
body {
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.2px;
  font-weight: 400;
  color: #f5f5f5;
}

h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.text-gold {
  color: #d4af37;
}

/* === Icône calendrier dorée (Google Chrome / Edge / Safari) === */
input[type="datetime-local"] {
  color-scheme: dark;
  background-color: #0a0a0a;
  color: #f5f5f5;
  border: 1px solid #d4af37;
}

/* Couleur or fixe pour l’icône */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: brightness(1.2) sepia(1) saturate(600%) hue-rotate(10deg);
  cursor: pointer;
  opacity: 1;
}

/* Effet doré plus clair au survol (jamais noir) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  filter: brightness(1.8) sepia(1) saturate(800%) hue-rotate(10deg);
  opacity: 1;
}

/* Liseré doré au focus */
input[type="datetime-local"]:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 10px #d4af37;
  transition: all 0.3s ease;
}

/* === Styles premium pour les champs de formulaire Tajir Transfert === */

/* Base commune */
input[type="text"],
input[type="email"],
input[type="datetime-local"],
textarea {
  width: 100%;
  padding: 14px 18px;
  background-color: #0a0a0a;
  border: 1px solid rgba(212, 175, 55, 0.4); /* or pâle */
  border-radius: 10px;
  color: #f5f5f5;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 8px rgba(212, 175, 55, 0.08);
}

/* Placeholder doux */
input::placeholder,
textarea::placeholder {
  color: rgba(245, 245, 245, 0.6);
}

/* Focus : halo doré subtil */
input:focus,
textarea:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  background-color: #111;
  transform: scale(1.01);
}

/* Hover : léger relief doré */
input:hover,
textarea:hover {
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Ajuste la zone de texte */
textarea {
  resize: vertical;
  min-height: 120px;
}

/* Labels */
label {
  display: block;
  color: #d4af37;
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0.3px;
  font-family: 'Inter', sans-serif;
}

/* Bouton doré plus contrasté */
.btn-gold {
  background-color: #d4af37;
  color: #000;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  transform: translateY(-2px);
}

.tarif-card h3 {
  text-align: center;
}

#reponse {
  background: rgba(255, 215, 0, 0.05);
  border-left: 3px solid #d4af37;
  padding: 1rem;
  border-radius: 0.5rem;
  font-style: italic;
}

html {
  scroll-behavior: smooth;
}

:root {
  --scroll-offset: 100px; /* hauteur du header + bannière */
}

[id] {
  scroll-margin-top: var(--scroll-offset);
}

html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] body {
  font-family: 'Tajawal', 'Poppins', sans-serif;
}