/* === PALETTE DE COULEURS HARMONISÉE === */
:root {
    --primary-gold: #b7a465;
    --secondary-gold: #f8e19c;
    --dark-gold: #b8985f;
    --light-gold: #f9f6e8;
    --accent-gold: #a8994e;
}

/* === HEADER AVEC GRADIENT DORÉ === */
.gradient-bg {
    background: linear-gradient(135deg, #bbb359 0%, #b9aa7d 50%, #a79868 100%);
    position: relative;
    overflow: hidden;
}

.gradient-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: shimmer 8s infinite;
}

@keyframes shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

/* === MISE EN VALEUR DU NOM CELER === */
.gradient-bg h1 {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-shadow: 
        0 2px 10px rgba(0,0,0,0.2),
        0 4px 20px rgba(212, 175, 55, 0.3);
    animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { text-shadow: 0 2px 10px rgba(0,0,0,0.2), 0 4px 20px rgba(212, 175, 55, 0.3); }
    50% { text-shadow: 0 2px 15px rgba(0,0,0,0.3), 0 6px 30px rgba(212, 175, 55, 0.5); }
}



/* === BOUTONS PRINCIPAUX (CONTACT/RDV) === */
#btn-contact.btn-gradient, #btn-rdv.btn-gradient {
    background: linear-gradient(135deg, #baa86c 0%, #d9c58b 100%);
    color: #2d2d2d;
    border: none;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    font-weight: 700;
    padding: 2rem 2.5rem !important;
}

#btn-contact.btn-gradient:hover, #btn-rdv.btn-gradient:hover {
    background: linear-gradient(135deg, #b8a65f 0%, #c7c16e 100%);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px) scale(1.05);
}

#btn-contact.bg-white, #btn-rdv.bg-white {
    background: white;
    color: #2d2d2d;
    border: 3px solid #e5cd7f;
    padding: 2rem 2.5rem !important;
}

#btn-contact.bg-white:hover, #btn-rdv.bg-white:hover {
    background: #f9f6e8;
    border-color: #9e8a48;
}
/* === CARTES DE CONTACT === */
.card-shadow {
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);
    transition: all 0.3s ease;
}

.card-shadow:hover {
    box-shadow: 0 15px 50px rgba(212, 175, 55, 0.25);
    transform: translateY(-8px);
}

/* Bordures supérieures dorées */
.card-shadow[style*="border-color: #a28150"] {
    border-top-color: #b5a05c !important;
}

.card-shadow[style*="border-color: #b8aa90"] {
    border-top-color: #beab70 !important;
}

.card-shadow[style*="border-color: #e5d9c5"] {
    border-top-color: #ac9a5c !important;
}

/* === ICÔNES AVEC GRADIENT DORÉ === */
.pulse-animation {
    background: linear-gradient(135deg, #c2aa59 0%, #c6b684 100%) !important;
    animation: pulseGold 2s infinite;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}
/* Réinitialisation des boutons */

button {

  cursor: pointer;

  border: none;

  outline: none;

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

}



/* Style de base pour tous les boutons */

.btn-base {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 600;

  text-align: center;

  vertical-align: middle;

  user-select: none;

  border: 1px solid transparent;

  line-height: 1.5;

  transition: all 0.3s ease;

  text-decoration: none;

  cursor: pointer;

}



/* Bouton avec gradient principal */

.btn-gradient {

  background: linear-gradient(135deg, #e5cd7f 0%, #d1be42 100%);

  color: white;

  border: none;

  padding: 1rem 2.5rem;

  border-radius: 1rem;

  font-weight: 600;

  font-size: 1.125rem;

  transition: all 0.3s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  text-decoration: none;

  cursor: pointer;

}
.btn-gradient:active {

  transform: scale(0.98);

}



/* Bouton secondaire blanc */

.btn-white {

  background: white;

  color: #374151;

  border: 3px solid #d1d5db;

  padding: 1rem 2.5rem;

  border-radius: 1rem;

  font-weight: 600;

  font-size: 1.125rem;

  transition: all 0.3s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  text-decoration: none;

  cursor: pointer;

}



.btn-white:hover {

  background: #f9fafb;

  border-color: #9ca3af;

  transform: scale(1.05);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}



/* Bouton de fermeture (croix) */

.btn-close {

  width: 2.5rem;

  height: 2.5rem;

  background: #f3f4f6;

  border: none;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  cursor: pointer;

  color: #6b7280;

  font-size: 1rem;

}



.btn-close:hover {

  background: #e5e7eb;

  color: #374151;

  transform: scale(1.1);

}



/* Bouton retour */

.btn-secondary {

  background: transparent;

  color: #374151;

  border: 2px solid #d1d5db;

  padding: 1rem 2.5rem;

  border-radius: 0.75rem;

  font-weight: 600;

  font-size: 1.125rem;

  transition: all 0.3s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  cursor: pointer;

}



.btn-secondary:hover {

  background: #f9fafb;

  border-color: #9ca3af;

}


@keyframes pulseGold {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);
    }
}

/* === LIENS ET TEXTES AVEC COULEUR DORÉE === */
a[href^="tel"], a[href^="mailto"] {
    color: #d4af37 !important;
    font-weight: 700;
    transition: all 0.3s ease;
}

a[href^="tel"]:hover, a[href^="mailto"]:hover {
    color: #b8985f !important;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

/* === CHAMPS DE FORMULAIRE === */
.form-focus:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
}

.form-focus {
    transition: all 0.3s ease;
}

/* === ICÔNES DANS LES LABELS === */
i[style*="color: #a28150"] {
    color: #d4af37 !important;
}

/* === BOUTON DE SOUMISSION === */
button[type="submit"], button[onclick="sendEmail()"], .btn-gradient {
    background: linear-gradient(135deg, #d4af37 0%, #f5d061 100%) !important;
    color: #2d2d2d !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
    border: none !important;
}

button[type="submit"]:hover, button[onclick="sendEmail()"]:hover, .btn-gradient:hover {
    background: linear-gradient(135deg, #b8985f 0%, #d4af37 100%) !important;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6) !important;
}

/* === SECTIONS RÉCAPITULATIVES === */
.bg-gradient-to-r.from-blue-50 {
    background: linear-gradient(to right, #f9f6e8 0%, #fef9e7 100%) !important;
    border-color: #e5cd7f !important;
}

.border-blue-500 {
    border-color: #d4af37 !important;
}

.from-blue-500.to-indigo-500 {
    background: linear-gradient(135deg, #d4af37 0%, #f5d061 100%) !important;
}

.text-blue-900, .text-blue-800, .text-blue-700 {
    color: #2d2d2d !important;
}

/* === BORDURES COLORÉES DES ÉLÉMENTS === */
.border-l-4.border-blue-400 {
    border-left-color: #d4af37 !important;
}

.border-l-4.border-green-400 {
    border-left-color: #f5d061 !important;
}

.border-l-4.border-purple-400 {
    border-left-color: #e5cd7f !important;
}

.border-l-4.border-orange-400 {
    border-left-color: #c4a747 !important;
}

.border-l-4.border-amber-400 {
    border-left-color: #d4af37 !important;
}

/* === SECTIONS GRADIENT AMBRÉES === */
.from-amber-50.to-orange-50 {
    background: linear-gradient(to bottom right, #fef9e7 0%, #f9f6e8 100%) !important;
    border-color: #e5cd7f !important;
}

.from-amber-500.to-orange-500 {
    background: linear-gradient(135deg, #d4af37 0%, #f5d061 100%) !important;
}

/* === SECTION SUCCÈS === */
.from-green-50.to-emerald-50 {
    background: linear-gradient(to bottom right, #f9f6e8 0%, #fef9e7 100%) !important;
    border-color: #d4af37 !important;
}

.from-green-500.to-emerald-500 {
    background: linear-gradient(135deg, #d4af37 0%, #f5d061 100%) !important;
}

.bg-green-500 {
    background-color: #d4af37 !important;
}

/* === MODAL EMAIL === */
.email-option {
    border: 2px solid #e5cd7f;
    transition: all 0.3s ease;
}

.email-option:hover {
    border-color: #d4af37;
    background: #f9f6e8;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

/* Gradient des icônes dans la modal */
.email-option div[style*="background: linear-gradient(135deg, #a28150"] {
    background: linear-gradient(135deg, #d4af37 0%, #f5d061 100%) !important;
}

/* === BOUTON APPELER MAINTENANT === */
a[href^="tel"].btn-gradient {
    background: linear-gradient(135deg, #d4af37 0%, #f5d061 100%) !important;
    color: #2d2d2d !important;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .gradient-bg h1 {
        font-size: 2.5rem;
    }
}

/* === ÉTATS VALIDÉS === */
.border-success {
    border-color: #b0a549 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

/* === AMÉLIORATION GÉNÉRALE === */
* {
    scroll-behavior: smooth;
}

.slide-up {
    animation: slideUpGold 0.8s ease-out forwards;
}

@keyframes slideUpGold {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}