/* ==== STYLES DE BASE ==== */
    @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Sans+Batak&family=Playwrite+DK+Loopet:wght@100..400&display=swap');
    
    :root {
      --primary: #d16004;
      --primary-dark: #b66700;
      --secondary: #0077b6;
      --secondary-dark: #023e8a;
      --dark: #01070a;
      --light: #f9f9f9;
      --accent: #ce4109;
      --accent-hover: #ad5705;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: linear-gradient(135deg, #1a2a6c, #2a4d8e, #3d7bd9);
      color: #333;
      font-family: 'Playwrite DK Loopet', sans-serif;
      min-height: 100vh;
      padding-top: 70px;
      overflow-x: hidden;
      background-attachment: fixed;
    }

    /* ==== ANIMATIONS ==== */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { 
        opacity: 0;
        transform: translateY(40px);
      }
      to { 
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    
    @keyframes waterRipple {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    
    @keyframes waveAnimation {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    /* ==== NAVBAR ==== */
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: var(--dark);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 30px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
      z-index: 1000;
      transition: all 0.4s ease;
    }
    
    .navbar.scrolled {
      padding: 8px 20px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    }
    
    .navbar .logo img {
      height: 50px;
      transition: transform 0.3s ease;
    }
    
    .navbar .logo:hover img {
      transform: rotate(10deg);
    }
    
    .nav-links {
      display: flex;
      gap: 25px;
    }
    
    .nav-links a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      position: relative;
      padding: 5px 0;
    }
    
    .nav-links a:after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(--accent-hover);
      transition: width 0.3s ease;
    }
    
    .nav-links a:hover {
      color: var(--accent-hover);
    }
    
    .nav-links a:hover:after {
      width: 100%;
    }
    
    /* ==== SECTION RÉSERVATION ==== */
    .reservation-section {
      max-width: 1000px;
      margin: 40px auto 80px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      padding: 40px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;
      animation: slideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
      z-index: 1;
    }
    
    .reservation-section:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="rgba(255,255,255,0.05)" d="M38.9,-31.7C53.8,-21.1,71.7,-10.6,71.6,0.1C71.5,10.7,53.4,21.5,38.6,34.3C23.7,47.1,11.9,62,-0.8,62.7C-13.5,63.4,-27.1,49.9,-38.5,37.1C-49.9,24.3,-59.1,12.2,-60.8,-1.3C-62.4,-14.8,-56.4,-29.6,-45,-40.2C-33.6,-50.8,-16.8,-57.2,-1.5,-56.1C13.7,-54.9,27.4,-46.2,38.9,-31.7Z" transform="translate(100 100)" /></svg>');
      background-size: 180px;
      opacity: 0.3;
      z-index: -1;
    }
    
    .water-ripple {
      position: absolute;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      animation: waterRipple 4s infinite;
      pointer-events: none;
      z-index: -1;
    }
    
    .formulaire {
      flex: 1 1 550px;
      margin-right: 40px;
      animation: fadeIn 0.8s 0.2s both;
    }
    
    .formulaire h2 {
      margin-bottom: 25px;
      color: var(--light);
      font-weight: 700;
      font-size: 2.2rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      position: relative;
      display: inline-block;
    }
    
    .formulaire h2:after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 60%;
      height: 4px;
      background: var(--light);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s ease;
    }
    
    .formulaire:hover h2:after {
      transform: scaleX(1);
    }
    
    form {
      display: flex;
      flex-direction: column;
    }
    
    .input-group {
      position: relative;
      margin-bottom: 25px;
    }
    
    form input,
    form select,
    form textarea {
      width: 100%;
      padding: 14px 20px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      font-family: inherit;
    }
    
    form input:focus,
    form select:focus,
    form textarea:focus {
      outline: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.4);
      transform: translateY(-2px);
    }
    
    .input-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--primary);
      opacity: 0.7;
    }
    
    form textarea {
      min-height: 120px;
      resize: vertical;
    }
    
    form button {
      background-color: var(--secondary);
      color: white;
      border: none;
      padding: 16px 30px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 700;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
      margin-top: 10px;
    }
    
    form button:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: 0.5s;
    }
    
    form button:hover {
      background-color: var(--secondary-dark);
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    }
    
    form button:hover:before {
      left: 100%;
    }
    
    /* ==== RÉSEAUX SOCIAUX ==== */
    .reseaux {
      flex: 0 0 150px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      animation: fadeIn 0.8s 0.4s both;
    }
    
    .reseaux h3 {
      margin-bottom: 25px;
      color: var(--light);
      font-weight: 700;
      font-size: 1.4rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .social-icons {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .social-icons a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--light);
      color: var(--primary);
      font-size: 24px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
      animation: pulse 2s infinite;
    }
    
    .social-icons a:nth-child(1) {
      animation-delay: 0.2s;
    }
    
    .social-icons a:nth-child(2) {
      animation-delay: 0.4s;
    }
    
    .social-icons a:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
      transition: 0.5s;
    }
    
    .social-icons a:hover {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
      animation: none;
    }
    
    .social-icons a:hover:before {
      left: 100%;
    }
    
    .social-icons a:nth-child(1):hover {
      background: #3b5998;
    }
    
    .social-icons a:nth-child(2):hover {
      background: #e1306c;
    }
    
    .social-icon-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    
    .social-icon-container img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      transition: all 0.3s ease;
    }
    
    .social-icons a:hover .social-icon-container img {
      filter: brightness(0) invert(1);
      transform: scale(1.2);
    }
    
    /* ==== ANIMATIONS DE FOND ==== */
    .ocean {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      overflow: hidden;
      z-index: -1;
    }
    
    .wave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" fill="rgba(255,255,255,0.07)"/></svg>') repeat-x;
      background-size: 1200px 100px;
      animation: waveAnimation 18s linear infinite;
    }
    
    .wave:nth-child(2) {
      animation-duration: 20s;
      animation-delay: -5s;
      opacity: 0.5;
      bottom: 10px;
    }
    
    .wave:nth-child(3) {
      animation-duration: 25s;
      animation-delay: -2s;
      opacity: 0.3;
      bottom: 15px;
    }
    
    .floating-element {
      position: absolute;
      z-index: -1;
      opacity: 0.2;
      animation: float 8s ease-in-out infinite;
    }
    
    .floating-element:nth-child(1) {
      top: 10%;
      left: 5%;
      font-size: 60px;
      animation-delay: 0s;
    }
    
    .floating-element:nth-child(2) {
      top: 25%;
      right: 10%;
      font-size: 40px;
      animation-delay: 2s;
      animation-duration: 10s;
    }
    
    .floating-element:nth-child(3) {
      bottom: 30%;
      left: 15%;
      font-size: 50px;
      animation-delay: 4s;
      animation-duration: 12s;
    }
    
    /* ==== RESPONSIVE ==== */
    @media (max-width: 900px) {
      .reservation-section {
        flex-direction: column;
        padding: 30px;
      }
      
      .formulaire {
        margin-right: 0;
        margin-bottom: 40px;
      }
      
      .reseaux {
        flex-direction: row;
        justify-content: center;
        width: 100%;
      }
      
      .social-icons {
        flex-direction: row;
        gap: 30px;
      }
      
      .reseaux h3 {
        margin-right: 20px;
        margin-bottom: 0;
      }
    }
    
    @media (max-width: 600px) {
      .navbar {
        padding: 10px 15px;
      }
      
      .nav-links {
        gap: 15px;
      }
      
      .nav-links a {
        font-size: 0.9rem;
      }
      
      .reservation-section {
        margin: 20px 15px 60px;
        padding: 25px;
      }
      
      .reseaux {
        flex-direction: column;
      }
      
      .reseaux h3 {
        margin-right: 0;
        margin-bottom: 20px;
      }
    }