/* ===================== */
/* RESET / BASE STYLES */
/* ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #fff;
    color: #333;
    line-height: 1.6;
}

/* Ligne de séparation entre sections */
.section-divider {
    height: 4px;
    max-width: 90%;
    margin: 60px auto;
    border: none;
    border-radius: 2px;
    background: linear-gradient(90deg, #000000, #ff8c42, #ffffff);
}

/* ===================== */
/* HEADER / HERO */
/* ===================== */
header {
    background-color: #ff6600;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

header p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

header .btn, .btn {
    display: inline-block;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    background-color: #000;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s;
}

header .btn:hover, .btn:hover {
    background-color: #333;
}

header img {
    margin-top: 20px;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ===================== */
/* SECTIONS GENERALES */
/* ===================== */
section {
    padding: 60px 20px;
}

section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: #ff6600;
}

/* ===================== */
/* PÔLES */
/* ===================== */
.pole-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pole-card {
    background: linear-gradient(135deg, #f9e2e2, #ff8c426b);
    border-radius: 10px;
    padding: 20px;
    width: 280px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.pole-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.pole-card img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.pole-card h3 {
    margin-bottom: 10px;
    color: #000;
}

.pole-card p {
    margin-bottom: 15px;
}

/* ===================== */
/* TÉMOIGNAGES */
/* ===================== */
.testimonial-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.testimonial {
    background: linear-gradient(135deg, #1e1e1e, #2b2b2b);
    padding: 25px 20px;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

.testimonial::before {
    content: "“";
    font-size: 50px;
    position: absolute;
    top: -10px;
    left: 10px;
    color: #ff8c42;
}

.testimonial:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.testimonial p {
    font-style: italic;
    margin-bottom: 10px;
}

.testimonial strong {
    display: block;
    margin-bottom: 10px;
    color: #ff6600;
}

.testimonial img, .testimonial-image {
    border: 3px solid #ff8c42;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    width: auto;
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-image:hover {
    transform: scale(1.15);
    box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

#testimonial-pagination a {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 14px;
    border-radius: 50%;
    background: #1e1e1e;
    color: #ff8c42;
    font-weight: 600;
    transition: all 0.3s;
}

#testimonial-pagination a.active, #testimonial-pagination a:hover {
    background: #ff8c42;
    color: #fff;
    transform: scale(1.1);
}

/* ===================== */
/* FORMULAIRE DE TÉMOIGNAGE */
/* ===================== */
.testimonial-form {
    background: #fff;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.testimonial-form input:focus, 
.testimonial-form textarea:focus {
    outline: none;
    border-color: #ff8c42;
    box-shadow: 0 0 8px rgba(255,140,66,0.4);
}

.testimonial-form button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* ===================== */
/* ZONES D’INTERVENTION OPTIMISÉES */
/* ===================== */
.zones-container {
    display: flex;
    flex-wrap: wrap;       /* Les cartes passent à la ligne si espace insuffisant */
    justify-content: center;
    gap: 20px;             /* Espacement entre cartes */
}

.zone-card {
    background: #f5f5f5;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex: 1 1 200px;       /* Largeur minimale 200px, s’étend si possible */
    max-width: 250px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.zone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.zone-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: #ff8c42;
}

.zone-card p {
    font-size: 14px;
    color: #333;
}


/* ===================== */
/* FORMULAIRE CONTACT “ULTIMATE WOW” */
/* ===================== */
#contact form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(255, 255, 255, 0.85);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
    position: relative;
    box-sizing: border-box;
}

.field {
    position: relative;
    width: 100%;
    overflow: visible; /* ✅ Permet au label de sortir du champ */
}

.field input,
.field textarea {
    padding: 14px 15px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    width: 100%;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(5px);
    color: #1e1e1e;
    position: relative;
    z-index: 1; /* ✅ En dessous du label */
    transition: all 0.35s ease;
}

/* Placeholder */
.field input::placeholder,
.field textarea::placeholder {
    color: #aaa;
    opacity: 1;
    transition: color 0.3s ease;
}

/* Quand le champ est focus ou rempli, le placeholder devient plus clair */
.field input:focus::placeholder,
.field textarea:focus::placeholder {
    color: #ccc;
}

/* Label */
.field label {
    position: absolute;
    left: 15px;
    top: 14px;
    color: #555;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.35s ease-out;
    background: #fff; /* ✅ Fond opaque pour rester visible */
    padding: 0 5px;
    z-index: 2; /* ✅ Toujours au-dessus de l'input */
}

/* Focus et hover des champs */
.field input:focus,
.field textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 12px rgba(37,99,235,0.5);
    background: rgba(255,255,255,1);
}

.field input:hover,
.field textarea:hover {
    border-color: #2563eb;
    box-shadow: 0 0 6px rgba(37,99,235,0.2);
}

/* Label flottant animé */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    top: -10px;
    left: 10px;
    font-size: 13px;
    color: #FFA500; /* ✅ Orange */
    background: #000; /* ✅ Visible sur le champ */
    z-index: 3;
    animation: labelFloat 0.3s ease-out;
}

/* État invalide */
.field input:invalid,
.field textarea:invalid {
    border-color: #ff4d4d;
}

.field input:invalid + label,
.field textarea:invalid + label {
    color: #ff4d4d;
    transform: scale(1.05);
}

/* Bouton */
#contact button {
    padding: 12px;
    background: linear-gradient(90deg, #ff8c42, #1e1e1e, #ff8c42);
    background-size: 300% 100%;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    animation: gradientMove 3s linear infinite;
}

#contact button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(255,140,66,0.5);
}

#contact button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 3px 6px rgba(255,140,66,0.2);
}

/* Message de retour */
#contactMessage {
    text-align: center;
    font-size: 16px;
    color: #ff8c42;
    margin-top: 10px;
}

/* Recaptcha centré */
#contact .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

/* Focus visible (accessibilité) */
.field input:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
@keyframes waveEffect {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(3); opacity: 0; }
}

.wave {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(37,99,235,0.4);
    pointer-events: none;
    transform: scale(0);
    animation: waveEffect 0.5s ease-out forwards;
    z-index: 5; /* ✅ Au-dessus des champs et labels */
}


/* ===================== */
/* ANIMATIONS */
@keyframes labelPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes labelFloat {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes waveEffect {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(3); opacity: 0; }
}

/* Wave effect */
.wave {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(37,99,235,0.4);
    pointer-events: none;
    transform: scale(0);
    animation: waveEffect 0.5s ease-out forwards;
}

/* ===================== */
/* MOBILE */
@media screen and (max-width: 450px) {
    #contact form {
        padding: 20px;
        width: 100%;
        max-width: 100%;
        gap: 25px;
    }

    .field input,
    .field textarea {
        font-size: 16px;
        padding: 14px 15px;
    }

    #contact button {
        padding: 12px;
        font-size: 16px;
    }

    #contact .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
    }
}


/* ===================== */
/* MOBILE */
@media screen and (max-width: 450px) {
    #contact form {
        padding: 20px;
        width: 100%;
        max-width: 100%;
        gap: 25px;
    }

    .field input,
    .field textarea {
        font-size: 16px;
        padding: 14px 15px;
    }

    #contact button {
        padding: 12px;
        font-size: 16px;
    }

    #contact .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
    }
}

/* ===================== */
/* FOOTER */
/* ===================== */
footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */
@media screen and (max-width: 768px) {
    .pole-container, .testimonial-container {
        flex-direction: column;
        align-items: center;
    }

    #reservation, #contact form, #testimonialForm {
        padding: 20px;
    }
}

/* ===================== */
/* RÉSERVATION / MODERNE */
/* ===================== */
#reservation {
    padding: 60px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    max-width: 700px;
    margin: 80px auto;
    text-align: center;
}

#reservation h2 {
    color: #2563eb;
    font-size: 28px;
    margin-bottom: 25px;
    position: relative;
}

#reservation h2::after {
    content: "";
    width: 60px;
    height: 4px;
    background: #ff8c42;
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

#reservationForm {
    display: grid;
    gap: 16px;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

#reservationForm label {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

#reservationForm input,
#reservationForm select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
}

#reservationForm input:focus,
#reservationForm select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

#reservationForm button[type="submit"] {
	background: linear-gradient(90deg, #ff8c42, #1e1e1e, #ff8c42);
    color: #fff;
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

#reservationForm button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255,140,66,0.3);
}

#reservationMessage {
    margin-top: 20px;
    font-weight: 600;
    color: #ff8c42;
    text-align: center;
}

/* ===================== */
/* LIGHTBOX IMAGE TÉMOIGNAGE */
/* ===================== */
#imageLightbox {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#imageLightbox.show {
    opacity: 1;
    pointer-events: auto;
}

#imageLightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

#imageLightbox.show img {
    transform: scale(1);
}

#backToTop { opacity: 0; visibility: hidden; position: fixed; bottom: 30px; right: 30px; z-index: 1000; background: #ff8c42; color: #fff; border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 24px; font-weight: bold; text-align: center; line-height: 50px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: all 0.4s ease; } #backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); } #backToTop:hover { background: #ff944d; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.35); }

/* ===================== */
/* BACKGROUND PAR SECTION (VERSION CLAIRE & ÉLÉGANTE) */
/* ===================== */

/* HERO — Orange doux et accueillant */
header {
    background: linear-gradient(135deg, #ff944d 0%, #ffb066 100%);
    color: #fff;
}

/* PÔLES — Blanc chaud légèrement orangé */
#poles, .poles-section {
    background: linear-gradient(135deg, #fffaf5 0%, #fdb276  100%);
    color: #222;
}

/* TÉMOIGNAGES — Gris très clair avec accents orange subtils */
.testimonials, .testimonial-form {
    background: linear-gradient(135deg, #fffaf5 0%, #fdb276 100%);
    color: #222;
}

/* ZONES — Blanc cassé et gris perle */
#zones, .zones-section {
    background: linear-gradient(135deg, #fffaf5 0%, #fdb276 100%);
    color: #222;
}

/* CONTACT — Blanc lumineux avec une touche orangée apaisante */
#contact {
    background: linear-gradient(135deg, #fffaf5 0%, #fdb276 100%);
    color: #111;
}

/* RÉSERVATION — Dégradé léger entre beige et orange clair */
.reservation, #reservation {
    background: linear-gradient(135deg, #fffaf5 0%, #fdb276 100%);
    color: #111;
}

/* FOOTER — Gris chaud foncé, pas noir */
footer {
    background: linear-gradient(135deg, #2b2b2b 0%, #3a3a3a 100%);
    color: #fff;
}

/* Ligne de séparation entre sections — fine, fluide et chic */
.section-divider {
    background: linear-gradient(90deg, #ff8c42, #ccc, #ff8c42);
    height: 3px;
    max-width: 85%;
    margin: 60px auto;
    border: none;
    border-radius: 2px;
}

/* === STYLE GLOBAL === */
#reservation > div {
  background:linear-gradient(180deg,#fff,#fff9f0);
}

/* === LABELS === */
#reservationForm label {
  display:block;
  margin-bottom:6px;
  font-weight:600;
  color:#1e1e1e;
  font-size:15px;
}

/* === INPUTS / SELECTS === */
#reservationForm input,
#reservationForm select {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #ccc;
  font-size:16px;
  transition:all 0.3s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.08);
}

/* Focus */
#reservationForm input:focus,
#reservationForm select:focus {
  outline:none;
  border-color:#ff8c42;
  box-shadow:0 0 8px rgba(255,140,66,0.4);
}

/* === EFFET WAVE (uniquement pour champs texte) === */
@keyframes waveEffect {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(3); opacity: 0; }
}

.wave {
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(255,140,66,0.4);
  pointer-events:none;
  transform:scale(0);
  animation:waveEffect 0.5s ease-out forwards;
  z-index:5;
}

/* === BOUTONS === */
#reservationForm button {
  transition: all 0.3s, transform 0.2s;
  border:none;
  border-radius:12px;
  padding:14px 35px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.btn-orange {
  background:linear-gradient(90deg,#ff8c42,#1e1e1e);
  color:#fff;
}

.btn-reset {
  background:#ccc;
  color:#000;
}

#reservationForm button:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

/* === CRENEAUX === */
.time-slot {
  padding:10px 16px;
  border-radius:12px;
  border:1px solid #ff8c42;
  cursor:pointer;
  background:linear-gradient(135deg,#fff,#ffe8d1);
  transition:0.3s all, transform 0.2s;
  font-weight:600;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);
}

.time-slot:hover:not(.disabled) {
  background:linear-gradient(135deg,#ff8c42,#ffb26c);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 5px 12px rgba(0,0,0,0.2);
}

.time-slot.selected {
  background:#ff8c42;
  color:#fff;
  box-shadow:0 5px 12px rgba(0,0,0,0.25);
}

.time-slot.disabled {
  background:#ccc;
  color:#666;
  cursor:not-allowed;
}

#timeSlots {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* === RESPONSIVE === */
@media(max-width:600px){
  #reservationForm input,
  #reservationForm select {
    font-size:15px;
    padding:12px 14px;
  }
  .time-slot {
    font-size:14px;
    padding:8px 12px;
  }
}