@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* --- Configuration de base --- */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FFFFFF;
    color: #3E362E;
    /* Dark Brown */
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
}

/* --- Palette React Code --- */
:root {
    --color-gold: #C5A46D;
    --color-gold-hover: #B08D57;
    --color-brown: #3E362E;
    --color-bg-light: #F9F6F0;
    /* Input background */
    --color-border: #EFE9DB;
    --color-text-light: #78716c;
    /* stone-500 equivalent */
}

/* --- Animations --- */
.animate-fadeIn {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

/* --- Composants --- */
.btn-primary {
    background-color: var(--color-gold);
    color: white;
    box-shadow: 0 4px 14px rgba(197, 164, 109, 0.25);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--color-brown);
    color: white;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: black;
}

.input-field {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    transition: all 0.3s;
}

.input-field:focus {
    border-color: var(--color-gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(197, 164, 109, 0.1);
}

/* --- FAQ Logic --- */
.faq-answer {
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.faq-icon {
    transition: transform 0.3s;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}