/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: #e8ecef; /* Fond par défaut si pas de WebP */
position: relative;
overflow-x: hidden;
}

body.webp {
background: url("../public/background.webp") no-repeat center center fixed;
background-size: cover;
}

body.webp::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4); /* Assombrissement pour lisibilité */
z-index: 1;
}

.content {
position: relative;
z-index: 2;
text-align: center;
width: 100%;
max-width: 420px;
padding: 25px;
color: #fff;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.4); /* Semi-transparent pour voir l'image derrière */
}

/* Titres */
h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 8px;
}

h2 {
font-size: 1.5rem;
font-weight: 600;
margin: 20px 0 10px;
}

h3.section-title {
font-size: 0.9rem;
margin: 25px 0 15px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}

.subtitle {
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 15px;
}

.description {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}

.phone-number {
font-size: 1.4rem;
font-weight: 600;
margin: 20px 0 25px;
}

/* Boutons */
.btn-primary,
.contact-btn,
.social-btn {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
border-radius: 8px;
padding: 14px;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover,
.contact-btn:hover,
.social-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
opacity: 0.9;
}

.btn-appelez,
.btn-reserver {
width: 100%;
min-height: 50px;
margin-bottom: 20px;
}

.secondary-buttons {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 25px;
}

.secondary-buttons .contact-btn {
flex: 1;
padding: 12px;
font-size: 0.9rem;
}

.social-buttons {
display: flex;
gap: 12px;
justify-content: center;
}

.social-btn {
flex: 1;
padding: 12px;
font-size: 0.9rem;
}

/* Couleurs */
.btn-appelez { background: rgba(46, 125, 50, 0.8); }
.contact-whatsapp { background: rgba(18, 140, 126, 0.8); }
.contact-sms { background: rgba(245, 124, 0, 0.8); }
.contact-email { background: rgba(211, 47, 47, 0.8); }
.btn-reserver { background: linear-gradient(135deg, rgba(255, 87, 34, 0.8), rgba(255, 138, 80, 0.8)); }
.social-instagram { background: linear-gradient(135deg, rgba(131, 58, 180, 0.8), rgba(225, 48, 108, 0.8), rgba(252, 175, 69, 0.8)); }
.social-facebook { background: rgba(25, 118, 210, 0.8); }
.social-tripadvisor { background: rgba(0, 166, 128, 0.8); }

/* Avis clients */
.review-section {
margin: 20px 0;
padding: 15px;
background: rgba(0, 0, 0, 0.6);
border-radius: 8px;
}

.review-section blockquote {
font-size: 0.95rem;
line-height: 1.5;
}

.review-section cite {
display: block;
font-size: 0.85rem;
margin-top: 10px;
}

/* Ajout pour iframe Tally.so (sans changer le frontend existant) */
iframe {
width: 100%;
min-height: 600px;
border: none;
margin: 20px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media screen and (max-width: 400px) {
.content { padding: 20px; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }
.subtitle, .description { font-size: 0.95rem; }
.phone-number { font-size: 1.3rem; }
.secondary-buttons, .social-buttons { flex-direction: column; gap: 10px; }
.btn-primary, .contact-btn, .social-btn { font-size: 0.9rem; padding: 12px; }
}