/* ===== Base layout ===== */
    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; line-height:1.5; color:#1a1a1a; }
    a { color:#0e61ff; text-decoration: underline; }

    /* ===== HERO (image starts at top, clipped at bottom) ===== */
    header.showcase{
      position: relative;
      color:#fff;
      background:#0b1b3b;                 /* fallback while image loads */
      overflow:hidden;                     /* clip image where hero ends */
      padding: clamp(64px, 10vh, 120px) 1rem clamp(32px, 6vh, 72px);
      min-height: clamp(420px, 65vh, 740px);
    }
    /* the image layer (NO background-attachment: fixed) */
    header.showcase::before{
      content:"";
      position:absolute;
      inset:0;                             /* fill the header; starts at window top */
      background: url("lac-lyster.png") center top / cover no-repeat;
      z-index:0;
    }
    /* optional gradient for text legibility */
    header.showcase::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(
        to bottom,
        rgba(11,27,59,.65) 0%,
        rgba(11,27,59,.35) 35%,
        rgba(11,27,59,0) 65%
      );
      z-index:1;
    }
    header .content { max-width:980px; margin:0 auto; padding: 0 16px; position:relative; z-index:2; }
    header .title h1 { margin:.25rem 0 0; font-size: clamp(2rem, 4vw, 3rem); }
    header .text h2 { margin:.25rem 0 0; font-weight:500; font-size: clamp(1.1rem, 2.1vw, 1.5rem); }

    .lang-toggle { margin-top:.75rem; }
    .lang-toggle button {
      appearance:none; border:0; border-radius:999px; padding:.5rem .9rem;
      font:600 .95rem/1.1 inherit; cursor:pointer; background:#1e69ff; color:#fff;
      box-shadow:0 6px 16px rgba(0,0,0,.15); transition:transform .04s, box-shadow .2s;
    }
    .lang-toggle button:hover { box-shadow:0 8px 22px rgba(0,0,0,.2); }
    .lang-toggle button:active { transform: translateY(1px); }

    /* sections */
    section { padding:3rem 1rem; }
    .container { max-width:980px; margin:0 auto; padding: 0 16px; } /* equal side padding */
    .grid-2 { display:grid; grid-template-columns:1fr; gap:1.5rem; }
    .center { text-align:center; }
    .bg-light { background:#f6f7fb; }
    .bg-contact { background:#eef3ff; }
    .bg-dark { background:#0c0c0c; color:#fff; }
    footer { padding:1.25rem 1rem; text-align:center; }
    /* ensure the hero image does not show through the next section */
    section.services { background:#ffffff; }

    @media (min-width:760px) { .grid-2 { grid-template-columns:1fr 1fr; } }

    /* ===== Contact Form (matches container bg + equal padding) ===== */
    .contact-card {
      max-width: 760px;
      margin: 0 auto;
      text-align: left;             /* override .center wrapper */
      background: inherit;          /* same bg as section (.bg-contact) */
      border: 0;
      box-shadow: none;
      padding: 24px;                /* equal left/right padding */
      border-radius: 16px;
      position: relative;           /* for watermark positioning */
      overflow: hidden;             /* clip the watermark inside */
    }
    .contact-card h3 { margin: 0 0 .25rem 0; text-align: center; }
    .contact-card .form-subtext {
      text-align: center; color: #6b7280; margin: 0 0 1rem 0; font-size: .95rem;
    }

    /* keep form content above the watermark */
    .contact-card > * { position: relative; z-index: 1; }

    /* === Form grid spacing + alignment === */
    .contact-form .form-grid { display: grid; grid-template-columns: 1fr; row-gap: 20px; column-gap: 32px; }
    @media (min-width: 760px) { .contact-form .form-grid { grid-template-columns: 1fr 1fr; } }
    .contact-form .full { grid-column: 1 / -1; }

    .contact-form .field { display: flex; flex-direction: column; gap: 6px; }
    .contact-form label { font-weight: 600; color: #111827; }

    /* Selects alignés à droite sur desktop */
    .contact-form .field--select{ justify-self: end; }
    .contact-form .field--select .input{ width: min(100%, 360px); }
    @media (max-width: 759px){
      .contact-form .field--select{ justify-self: stretch; }
      .contact-form .field--select .input{ width: 100%; }
    }

    .contact-form .input,
    .contact-form select,
    .contact-form textarea {
      width: 100%; padding: .65rem .8rem; border-radius: 12px;
      border: 1px solid #cfd5e4; background: #fff; font: inherit; min-height: 44px;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .contact-form textarea { min-height: 130px; resize: vertical; }

    .contact-form .input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      outline: none; border-color: #0e61ff; box-shadow: 0 0 0 4px rgba(14,97,255,.15);
    }

    .contact-form .help { color: #6b7280; font-size: .9rem; }
    .contact-form .error { color: #dc2626; font-size: .9rem; min-height: 1.05rem; }
    .contact-form .invalid { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.14); }

    .contact-form .actions { display: flex; justify-content: flex-end; gap: 12px; }
    .contact-form .btn-primary {
      appearance: none; border: 0; border-radius: 12px; padding: .7rem 1.1rem; cursor: pointer;
      background: linear-gradient(0deg, #0e61ff, #2878ff); color: #fff; font-weight: 700;
      box-shadow: 0 10px 18px rgba(14,97,255,.22);
      transition: transform .04s ease, box-shadow .2s ease, opacity .15s;
    }
    .contact-form .btn-primary:hover { box-shadow: 0 12px 24px rgba(14,97,255,.28); }
    .contact-form .btn-primary:active { transform: translateY(1px); }

    /* how far to lift the icons (tweak this) */
    :root { --service-icon-lift: 101px; }

    /* make sure the lifted icons render above the hero image */
    section.services { position: relative; z-index: 3; }

    /* lift the icons into the image and make them white */
    section.services .grid-2 > div > i {
    display: inline-block;
    transform: translateY(calc(-1 * var(--service-icon-lift)));
    color: #fff;                                /* white icons */
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); /* readability on photo */
    }

    /* optional: tighten the space below the icon so the heading sits closer */
    section.services .grid-2 > div > h3 {
    margin-top: calc(-1 * var(--service-icon-lift) + 12px);
    }

    /* mobile: keep icons in normal flow if overlap looks odd */
    @media (max-width: 760px) {
    section.services .grid-2 > div > i {
        transform: none;
        filter: none;
        color: inherit;
    }
    section.services .grid-2 > div > h3 { margin-top: .5rem; }
    }