*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --navy: #0b1f30;
      --navy2: #132d42;
      --teal: #1a6278;
      --lake: #5aabcb;
      --sand: #f2ebe0;
      --sand2: #e6ddd0;
      --gold: #b8832e;
      --gold2: #d49a42;
      --white: #fdfaf5;
      --text: #191919;
      --muted: #677585;
      --r: 3px;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--white);
      color: var(--text);
      overflow-x: hidden
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 48px;
      background: rgba(11, 31, 48, .93);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px;
      color: var(--white);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo span {
      color: var(--gold2);
      font-style: italic
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 32px
    }

    nav a {
      color: rgba(255, 255, 255, .6);
      font-size: 13px;
      text-decoration: none;
      letter-spacing: .06em;
      text-transform: uppercase;
      transition: color .2s
    }

    nav a:hover {
      color: #fff
    }

    .nav-btn {
      background: var(--gold) !important;
      color: var(--navy) !important;
      padding: 9px 20px;
      border-radius: var(--r);
      font-weight: 500 !important
    }

    .nav-btn:hover {
      background: var(--gold2) !important
    }

    .lang-switch {
      display: flex;
      gap: 4px;
      align-items: center;
      margin-left: 8px
    }

    .lang-switch a {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      padding: 4px 7px;
      border-radius: 4px;
      transition: all .2s
    }

    .lang-switch a:hover {
      color: var(--white)
    }

    .lang-switch .lang-active {
      background: rgba(255, 255, 255, .15);
      color: var(--white)
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: url('../img/hero-bg.jpg') center/cover no-repeat
    }

    .hero-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(11, 31, 48, .50) 0%, rgba(11, 31, 48, .15) 50%, rgba(11, 31, 48, .55) 100%)
    }

    .hero-c {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 48px 52px;
      background: rgba(10, 20, 30, .45);
      backdrop-filter: blur(2px);
      border-radius: 8px;
      max-width: 760px
    }

    .badge-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(184, 131, 46, .2);
      border: 1px solid rgba(184, 131, 46, .5);
      padding: 6px 16px;
      border-radius: 20px;
      margin-bottom: 18px;
      max-width: 100%;
      box-sizing: border-box;
    }

    .badge-pill span {
      font-size: 12px;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold2);
      font-weight: 500;
      white-space: normal;
      word-break: break-word;
      min-width: 0;
      text-align: center;
    }

    .eyebrow {
      display: block;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold2);
      margin-bottom: 18px;
      opacity: 0;
      animation: up .8s .2s forwards
    }

    h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(48px, 7vw, 88px);
      font-weight: 400;
      line-height: 1.05;
      color: var(--white);
      margin-bottom: 22px;
      opacity: 0;
      animation: up .8s .4s forwards
    }

    h1 em {
      font-style: italic;
      color: var(--lake)
    }

    .hero-d {
      font-size: 16px;
      font-weight: 300;
      color: rgba(255, 255, 255, .78);
      line-height: 1.75;
      max-width: 500px;
      margin: 0 auto 36px;
      opacity: 0;
      animation: up .8s .6s forwards
    }

    .hero-stars {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 40px;
      opacity: 0;
      animation: up .8s .75s forwards;
      font-size: 13px;
      color: rgba(255, 255, 255, .65)
    }

    .stars-g {
      color: var(--gold2);
      font-size: 15px;
      letter-spacing: 2px
    }

    .btns {
      display: flex;
      gap: 14px;
      justify-content: center;
      opacity: 0;
      animation: up .8s .9s forwards
    }

    .btn-p {
      background: var(--gold);
      color: var(--navy);
      padding: 14px 34px;
      border-radius: var(--r);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .2s, transform .2s
    }

    .btn-p:hover {
      background: var(--gold2);
      transform: translateY(-2px)
    }

    .btn-g {
      border: 1px solid rgba(255, 255, 255, .45);
      color: var(--white);
      padding: 14px 34px;
      border-radius: var(--r);
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-decoration: none;
      transition: border-color .2s, transform .2s
    }

    .btn-g:hover {
      border-color: #fff;
      transform: translateY(-2px)
    }

    /* STRIP */
    .strip {
      background: var(--navy);
      display: flex;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      flex-wrap: wrap
    }

    .si {
      padding: 26px 48px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, .06)
    }

    .si:last-child {
      border-right: none
    }

    .sv {
      font-family: 'Cormorant Garamond', serif;
      font-size: 30px;
      font-weight: 500;
      color: var(--white)
    }

    .sl {
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-top: 4px
    }

    /* SECTIONS */
    section {
      padding: 60px 24px;
      scroll-margin-top: 70px
    }

    .ct {
      max-width: 1100px;
      margin: 0 auto
    }

    .sec-ey {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px
    }

    .sec-h {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(30px, 4vw, 50px);
      font-weight: 400;
      line-height: 1.2;
      color: var(--navy);
      margin-bottom: 18px
    }

    .sec-h em {
      font-style: italic;
      color: var(--teal)
    }

    .sec-p {
      font-size: 15px;
      color: var(--muted);
      font-weight: 300;
      line-height: 1.85;
      max-width: 580px
    }

    /* BATEAU */
    .boat-lay {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
      margin-top: 64px
    }

    .img-stack {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .img-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .img-stack img,
    .img-pair img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 2px;
      display: block
    }

    .specs-g {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 28px
    }

    .spec {
      border-left: 2px solid var(--sand2);
      padding-left: 14px
    }

    .spec-l {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted)
    }

    .spec-v {
      font-size: 14px;
      font-weight: 500;
      color: var(--navy);
      margin-top: 3px
    }

    .etags {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 24px
    }

    .etag {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--white);
      border: 1px solid var(--sand2);
      padding: 9px 12px;
      border-radius: var(--r);
      font-size: 13px;
      color: var(--text)
    }

    .etag-icon {
      font-size: 15px;
      flex-shrink: 0
    }

    .permis-note {
      background: #fff8ee;
      border: 1px solid #f0d898;
      border-radius: var(--r);
      padding: 12px 16px;
      font-size: 13px;
      color: #7a5a10;
      margin-top: 20px;
      line-height: 1.6
    }

    /* GALERIE */
    .gal {
      background: var(--navy);
      padding: 6px 6px 0
    }

    .gal-inner {
      display: flex;
      gap: 6px;
      max-width: 1600px;
      margin: 0 auto;
      align-items: stretch;
    }

    .gal-inner img {
      flex: 1;
      min-width: 0;
      height: 480px;
      object-fit: cover;
      display: block;
      border-radius: 2px 2px 0 0
    }

    /* TARIFS */
    .tarifs-sec {
      background: var(--navy)
    }

    .tarifs-sec .sec-h {
      color: var(--white)
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin-top: 48px;
      border-radius: var(--r);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .1)
    }

    .pg-head {
      padding: 12px 8px;
      text-align: center;
      background: rgba(255, 255, 255, .04);
      border-right: 1px solid rgba(255, 255, 255, .07)
    }

    .pg-head:last-child {
      border-right: none
    }

    .pg-head span {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4)
    }

    .pg-cell {
      padding: 18px 8px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, .07);
      border-top: 1px solid rgba(255, 255, 255, .07)
    }

    .pg-cell:last-child {
      border-right: none
    }

    .pg-cell.hi {
      background: #1a5f7a
    }

    .pg-val {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-weight: 500;
      color: var(--white)
    }

    .pg-chf {
      font-size: 10px;
      color: rgba(255, 255, 255, .4);
      margin-top: 3px
    }

    .pg-ppd {
      padding: 8px;
      text-align: center;
      background: #081926;
      border-right: 1px solid rgba(255, 255, 255, .07);
      border-top: 1px solid rgba(255, 255, 255, .05)
    }

    .pg-ppd:last-child {
      border-right: none
    }

    .pg-ppd span {
      font-size: 11px;
      color: rgba(255, 255, 255, .35)
    }

    .opts-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 32px
    }

    .opt-card {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r);
      padding: 16px 16px
    }

    .opt-card-name {
      font-size: 13px;
      color: rgba(255, 255, 255, .8)
    }

    .opt-card-price {
      font-size: 16px;
      color: var(--gold2);
      font-weight: 500;
      margin-top: 6px;
      font-family: 'Cormorant Garamond', serif
    }

    .caution-bar {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--r);
      padding: 16px 20px;
      margin-top: 20px;
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.7
    }

    .caution-bar strong {
      color: rgba(255, 255, 255, .9)
    }

    /* INFOS */
    .infos-sec {
      background: var(--sand)
    }

    .infos-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--sand2);
      border: 1px solid var(--sand2);
      border-radius: var(--r);
      overflow: hidden;
      padding-top: 0
    }

    .info-card {
      background: var(--white);
      padding: 32px 28px
    }

    .info-icon {
      font-size: 22px;
      margin-bottom: 14px
    }

    .info-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--navy);
      margin-bottom: 8px
    }

    .info-text {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.75;
      font-weight: 300
    }

    /* AVIS */
    .avis-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px
    }

    .av-card {
      background: var(--white);
      border: 1px solid var(--sand2);
      border-radius: var(--r);
      padding: 26px
    }

    .av-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px
    }

    .av-a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      color: var(--white);
      flex-shrink: 0
    }

    .av-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--navy)
    }

    .av-date {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px
    }

    .av-stars {
      color: var(--gold2);
      font-size: 12px;
      letter-spacing: 1px;
      margin-bottom: 8px
    }

    .av-text {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.7;
      font-style: italic
    }

    /* CARTE */
    .map-sec {
      background: var(--white)
    }

    .map-wrap {
      background: var(--white);
      border: 1px solid var(--sand2);
      border-radius: var(--r);
      overflow: hidden;
      max-width: 800px;
      margin: 48px auto 0
    }

    .map-head {
      padding: 16px 20px;
      border-bottom: 1px solid var(--sand2)
    }

    .map-head strong {
      font-size: 13px;
      font-weight: 500;
      color: var(--navy)
    }

    .map-head p {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px
    }

    .map-foot {
      padding: 14px 20px;
      background: var(--white);
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
      color: var(--muted)
    }

    /* RÉSERVATION */
    .resa-sec {
      background: var(--sand);
      padding: 40px 0 80px;
    }

    .resa-wrap {
      max-width: 680px;
      margin: 0 auto;
      border: 1px solid var(--sand2);
      border-radius: var(--r);
      overflow: hidden
    }

    .resa-head {
      background: var(--navy);
      padding: 28px 36px
    }

    .resa-head h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 26px;
      font-weight: 400;
      color: var(--white)
    }

    .resa-head p {
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      margin-top: 5px
    }

    .resa-body {
      padding: 36px
    }

    .resa-step {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .resa-step:last-of-type {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .resa-step-label {
      display: none;
    }

    .resa-step-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 12px;
      color: var(--navy);
    }

    input[type="file"] {
      display: none;
    }

    .custom-file-upload {
      display: inline-block;
      color: var(--text);
      background: var(--white);
      border: 1px solid var(--sand2);
      border-radius: var(--r);
      padding: 11px 13px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      font-family: 'DM Sans', sans-serif !important;
      text-transform: none;
      letter-spacing: normal;
      line-height: normal;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--text) !important;
      opacity: 1;
    }

    input::-webkit-input-placeholder {
      color: var(--text) !important;
    }

    input::-moz-placeholder {
      color: var(--text) !important;
      opacity: 1;
    }

    input:-ms-input-placeholder {
      color: var(--text) !important;
    }

    input:-moz-placeholder {
      color: var(--text) !important;
      opacity: 1;
    }

    select {
      color: var(--text) !important;
    }

    input,
    select,
    textarea {
      color: var(--text);
    }


    .fr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .fg {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 14px
    }

    label {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted)
    }

    input,
    select,
    textarea {
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      color: var(--text);
      background: var(--white);
      border: 1px solid var(--sand2);
      padding: 11px 13px;
      border-radius: var(--r);
      outline: none;
      transition: border-color .2s;
      width: 100%
    }

    #fp-start,
    #fp-end {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a3a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 38px;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--teal);
      background: var(--white)
    }

    textarea {
      resize: vertical;
      min-height: 80px
    }

    .duration-display {
      background: var(--white);
      border: 1px solid var(--sand2);
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      color: var(--navy);
      margin-bottom: 12px;
      display: none
    }

    .opts-checks {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-bottom: 14px
    }

    .opt-check {
      display: block;
      cursor: pointer
    }

    .opt-check input {
      display: none
    }

    .oci {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: var(--white);
      border: 1.5px solid var(--sand2);
      border-radius: var(--r);
      transition: all .15s;
      font-size: 13px
    }

    @media (hover: hover) {
    .opt-check:not(.opt-disabled):hover .oci {
      border-color: var(--teal)
    }
    }

    .opt-disabled {
      opacity: 0.5;
      filter: grayscale(1);
      cursor: not-allowed !important;
    }

    .opt-disabled .oci {
      pointer-events: none;
    }

    .opt-check input:checked+.oci {
      background: rgba(184, 131, 46, 0.05);
      border-color: var(--gold);
      box-shadow: 0 4px 12px rgba(184, 131, 46, 0.12);
      transform: translateY(-1px)
    }

    .opt-check input:checked+.oci .ocn {
      font-weight: 600;
      color: var(--gold)
    }

    .ocn {
      color: var(--text)
    }

    .ocp {
      font-size: 14px;
      color: var(--gold);
      font-weight: 600;
      white-space: nowrap
    }

    .total-bar {
      background: var(--navy);
      color: var(--white);
      border-radius: var(--r);
      padding: 14px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px
    }

    .total-bar span:first-child {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      color: rgba(255, 255, 255, .8)
    }

    .total-val {
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase
    }

    .f-sub {
      width: 100%;
      background: var(--navy);
      color: var(--white);
      border: none;
      padding: 16px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: var(--r);
      font-family: 'DM Sans', sans-serif;
      transition: background .2s;
      margin-top: 4px
    }

    @media (hover: hover) {
    .f-sub:hover {
      background: var(--teal)
    }
    }

    .f-note {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      margin-top: 12px;
      line-height: 1.6
    }

    /* FOOTER */
    footer {
      background: var(--navy);
      padding: 35px 24px 50px;
      text-align: center
    }

    .fl {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      color: var(--white);
      margin-bottom: 8px
    }

    .fl span {
      color: var(--gold2);
      font-style: italic
    }

    .ft {
      font-size: 13px;
      color: rgba(255, 255, 255, .3);
      margin-bottom: 32px
    }

    .flinks {
      display: flex;
      justify-content: center;
      gap: 28px;
      margin-bottom: 36px;
      flex-wrap: wrap
    }

    .flinks a {
      font-size: 11px;
      color: rgba(255, 255, 255, .35);
      text-decoration: none;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: color .2s
    }

    @media (hover: hover) {
    .flinks a:hover {
      color: var(--white)
    }
    }

    .fdiv {
      height: 1px;
      background: rgba(255, 255, 255, .07);
      margin-bottom: 24px
    }

    .fcopy {
      font-size: 12px;
      color: rgba(255, 255, 255, .18)
    }

    /* REVEAL */
    @keyframes up {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .rv {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s, transform .7s
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    /* RESPONSIVE */
    .menu-btn {
      display: none;
      color: var(--white);
      font-size: 28px;
      cursor: pointer;
      user-select: none;
    }

    @media(max-width:900px) {
      nav {
        padding: 16px 20px;
      }

      .menu-btn {
        display: block;
      }

      nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(11, 31, 48, .98);
        flex-direction: column;
        padding: 20px;
        gap: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
      }
      
      nav ul.show {
        display: flex;
      }

      .boat-lay,
      .infos-grid,
      .avis-grid,
      .fr {
        grid-template-columns: 1fr
      }

      .price-grid {
        grid-template-columns: repeat(4, 1fr)
      }

      .opts-grid {
        grid-template-columns: 1fr 1fr
      }

      section {
        padding: 60px 20px
      }

      .resa-body {
        padding: 24px
      }

      .resa-head {
        padding: 24px
      }

      .hero-c {
        padding: 32px 24px
      }

      .si {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06)
      }

      .etags {
        grid-template-columns: 1fr 1fr
      }
    }

    /* Flatpickr overrides */
    .flatpickr-input {
      background-color: var(--white) !important;
      border: 1px solid var(--sand2) !important;
      color: var(--text) !important;
      cursor: pointer !important
    }

    @media(max-width:900px) {
      #pass-skipper .rv[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
    }


    @media(max-width:900px) {
      #apropos .rv[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }
    }


    /* MOBILE VERTICAL PRICE GRID */
    @media(max-width:900px) {

      .tarifs-sec .ct,
      .tarifs-sec .rv {
        overflow-x: visible !important;
        padding-bottom: 0 !important;
      }

      .price-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-rows: repeat(7, auto) !important;
        grid-auto-flow: column !important;
        min-width: unset !important;
        gap: 0 !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
      }

      .pg-head {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 12px 16px !important;
        text-align: left !important;
      }

      .pg-cell {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
        border-top: none !important;
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 12px 8px !important;
      }

      .pg-ppd {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
        border-top: none !important;
        padding: 12px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .pg-head span {
        margin-left: 6px;
      }

      /* Option Grid Mobile */
      .opts-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ── Tablet breakpoint ── */
    @media(max-width:768px) {
      .rv[style*="grid-template-columns: 1.2fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      .rv[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      .hero-c h1 {
        font-size: clamp(2rem, 8vw, 3rem);
      }

      .resa-body {
        padding: 16px !important;
      }
    }

    /* ── Floating mobile buttons ── */
    .mob-float {
      display: none;
    }

    @media(max-width:900px) {
      .mob-float {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        gap: 12px;
        pointer-events: none;
      }

      .mob-float a {
        pointer-events: all;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 22px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 500;
        font-family: 'DM Sans', sans-serif;
        text-decoration: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        transition: transform .15s, box-shadow .15s;
        white-space: nowrap;
      }

      .mob-float a:active {
        transform: scale(0.96);
      }

      .mob-float-wa {
        background: #25d366;
        color: #fff;
      }

      .mob-float-resa {
        background: var(--gold);
        color: var(--navy);
      }

      /* Prevent content from being hidden behind floating bar */
      body {
        padding-bottom: 80px;
      }
    }
/* Language Selector */
.lang-sel { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.lang-sel a { color: var(--white); text-decoration: none; font-size: 13px; font-weight: 500; opacity: 0.5; transition: opacity 0.2s; }
.lang-sel a.active { opacity: 1; font-weight: 700; }
.lang-sel span { color: rgba(255,255,255,0.2); font-size: 12px; }

    .mob-actions { display: flex; align-items: center; gap: 16px; }
    @media(max-width:900px) {
      nav ul .lang-sel {
        display: flex !important;
        justify-content: center;
        margin: 24px 0 0 0;
        padding-top: 24px;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      nav ul .lang-sel a {
        font-size: 16px;
        padding: 8px 16px;
      }
    }

    .oc-radio {
      display: inline-block;
      width: 18px;
      height: 18px;
      min-width: 18px;
      border: 2px solid var(--sand2);
      border-radius: 50%;
      margin-right: 12px;
      transition: 0.2s;
      vertical-align: middle;
    }
    .opt-check input:checked + .oci .oc-radio {
      border-color: var(--gold);
      border-width: 5px;
    }
    input[type="checkbox"]:not(.opt-check input) {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      min-width: 20px;
      border: 2px solid var(--sand2);
      border-radius: 50%;
      background: var(--white);
      cursor: pointer;
      position: relative;
      margin: 0;
      transition: 0.2s;
      vertical-align: middle;
    }
    input[type="checkbox"]:not(.opt-check input):checked {
      border-color: var(--gold);
      border-width: 6px;
    }


/* Hide previous and next month days in Flatpickr */
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    visibility: hidden;
}