/* Reset très léger */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.4;
      color: #222;
      background: #f7f9fb;
      padding: 20px;
    }

    header {
      background: linear-gradient(90deg, #2b6cb0, #4fd1c5);
      color: white;
      padding: 18px;
      border-radius: 8px;
      margin-bottom: 18px;
    }

    .container {
      max-width: 900px;
      margin: 0 auto;
    }

    nav {
      display: flex;
      gap: 12px;
      margin-top: 8px;
    }

    nav a {
      color: white;
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.08);
    }

    /* Zone "hero" (image + titre) */
    .hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: center;
      margin-bottom: 18px;
    }

    .hero img {
      width: 100%;
      border-radius: 8px;
      display: block;
    }

    h1 { font-size: 28px; margin-bottom: 6px; }
    p.lead { color: #334155; }

    /* Sections */
    section {
      background: white;
      padding: 14px;
      border-radius: 8px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      margin-top: 10px;
    }

    .card {
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #e6eef6;
    }

    /* Petit formulaire de réservation (non fonctionnel) */
    form label { display:inline; margin-top:8px; font-weight:600; }
    input[type="text"], input[type="email"], input[type="date"], select {
      width: 100%;
      padding: 8px;
      margin-top:6px;
      border: 1px solid #ccdbea;
      border-radius: 6px;
    }
    button {
      margin-top: 10px;
      padding: 10px 14px;
      border: none;
      border-radius: 6px;
      background: #2563eb;
      color: white;
      cursor: pointer;
      font-weight:600;
    }

    footer {
      text-align: center;
      color: #6b7280;
      margin-top: 14px;
      font-size: 14px;
    }

    /* Responsive small tweaks */
    @media (min-width:700px) {
      .hero { grid-template-columns: 1fr 320px; }
      .hero .hero-text { padding-right: 12px; }
    }