/* ==========================================================================
   O'Dance Holiday — Crète 2027 · final CTA banner + footer + legal bar
   All rules scoped under .odf — nothing above this block is affected.
   ========================================================================== */
@font-face { font-family: "ODF Barlow"; src: url("fonts/barlow-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ODF Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ODF Barlow Semi"; src: url("fonts/barlow-semi-condensed-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "ODF Barlow Semi"; src: url("fonts/barlow-semi-condensed-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ODF Barlow Semi"; src: url("fonts/barlow-semi-condensed-800.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ODF Marck"; src: url("fonts/marck-script.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ODF Montserrat"; src: url("fonts/montserrat.woff") format("woff"); font-weight: 100 900; font-display: swap; }

.odf {
  --odf-blue: #035cab;
  --odf-navy: #0a2a6b;
  --odf-yellow: #fdd535;
  --odf-sun: #f8c21c;
  font-family: "ODF Barlow", system-ui, sans-serif;
}
.odf *, .odf *::before, .odf *::after { box-sizing: border-box; }
.odf :where(h2, p, ul) { margin: 0; padding: 0; }
.odf ul { list-style: none; }
.odf :where(a) { color: inherit; text-decoration: none; }
.odf svg { display: block; }

/* ---------- Final CTA banner (desktop = reference composition) ---------- */
.odf-cta {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1644 / 230;
  background-position: center 62%;
  background: #1d86d6 url("img/banniere-crete.jpg") center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.odf-cta__inner { --s: calc(100cqw / 1644); position: absolute; inset: 0; }

.odf-cta__title {
  position: absolute; left: calc(548 * var(--s)); top: calc(40 * var(--s));
  font-family: "ODF Marck", cursive; font-weight: 400;
  font-size: calc(60 * var(--s)); line-height: .9;
  transform: rotate(-8deg); transform-origin: 0 100%;
  text-shadow: 0 2px 10px rgba(0, 40, 110, .35);
}
.odf-cta__title span { display: block; }
.odf-cta__title span + span { padding-left: .72em; }
.odf-cta__sub {
  position: absolute; left: calc(560 * var(--s)); top: calc(36 * var(--s));
  margin: 0;
  font-family: "ODF Barlow Condensed", sans-serif; font-weight: 800;
  font-size: calc(46 * var(--s)); line-height: 1; letter-spacing: .005em;
  text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 40, 110, .55);
}
.odf-cta__btn {
  position: absolute; left: calc(1046 * var(--s)); top: calc(58 * var(--s));
  width: calc(420 * var(--s)); height: calc(70 * var(--s));
  display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--s));
  border-radius: calc(14 * var(--s));
  background: var(--odf-yellow); color: var(--odf-navy);
  font-family: "ODF Barlow Semi", sans-serif; font-weight: 800;
  font-size: max(calc(26 * var(--s)), 14px); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 calc(8 * var(--s)) calc(20 * var(--s)) rgba(0, 30, 90, .28);
  transition: background-color .18s ease, transform .18s ease;
}
.odf-cta__btn svg { width: .7em; height: .7em; flex: none; transition: transform .18s ease; }
.odf-cta__btn:hover { background: #ffe066; transform: translateY(-2px); }
.odf-cta__btn:hover svg { transform: translateX(3px); }
.odf-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.odf-cta__trust {
  position: absolute; left: calc(1024 * var(--s)); top: calc(150 * var(--s));
  width: calc(466 * var(--s));
  display: flex; align-items: center; justify-content: space-between;
  font-family: "ODF Barlow Semi", sans-serif; font-weight: 600;
  font-size: max(calc(16.5 * var(--s)), 11.5px); line-height: 1.2; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 40, 110, .45);
}
.odf-cta__trust li { display: flex; align-items: center; gap: calc(9 * var(--s)); }
.odf-cta__trust li + li::before {
  content: ""; width: 1.5px; height: 1.35em; background: rgba(255, 255, 255, .8);
  margin-right: calc(14 * var(--s));
}
.odf-cta__trust svg { width: 1.2em; height: 1.2em; flex: none; filter: drop-shadow(0 1px 3px rgba(0, 40, 110, .4)); }

/* ---------- Blue footer ---------- */
.odf-footer { background: var(--odf-blue); color: #fff; }
.odf-footer__bar {
  max-width: 1180px; margin: 0 auto;
  min-height: 0;
  padding: 2px 20px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: clamp(16px, 2vw, 32px);
}
.odf-logo { display: inline-flex; align-items: center; }
.odf-logo img { display: block; width: auto; height: 40px; }
.odf-logo:focus-visible, .odf-nav a:focus-visible, .odf-nav summary:focus-visible, .odf-social a:focus-visible { outline: 3px solid var(--odf-yellow); outline-offset: 4px; border-radius: 4px; }

.odf-nav ul.odf-nav__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px clamp(16px, 1.8vw, 36px); }
.odf-nav a, .odf-nav summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0;
  font-family: "ODF Barlow Semi", sans-serif; font-weight: 700;
  font-size: 14.5px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  color: #fff; cursor: pointer;
  transition: color .15s ease;
}
.odf-nav a:hover, .odf-nav summary:hover { color: var(--odf-yellow); }
.odf-nav__more { position: relative; }
.odf-nav__more summary { list-style: none; }
.odf-nav__more summary::-webkit-details-marker { display: none; }
.odf-nav__more summary svg { width: 11px; height: 11px; transition: transform .15s ease; }
.odf-nav__more[open] summary svg { transform: rotate(180deg); }
.odf-nav__more ul {
  position: absolute; left: -14px; bottom: calc(100% + 4px); z-index: 5;
  min-width: 220px; padding: 6px;
  background: #fff; border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 25, 70, .3);
}
.odf-nav__more ul a {
  display: block; padding: 10px 12px; border-radius: 6px;
  color: var(--odf-navy); font-size: 14.5px; text-transform: none; letter-spacing: 0;
}
.odf-nav__more ul a:hover { background: #eef4fc; color: var(--odf-blue); }

.odf-social { display: flex; align-items: center; gap: 18px; }
.odf-social a { display: block; width: 24px; height: 24px; color: #fff; transition: color .15s ease, transform .15s ease; }
.odf-social a:hover { color: var(--odf-yellow); transform: translateY(-2px); }
.odf-social svg { width: 100%; height: 100%; }


/* ---------- Legal bar ---------- */
.odf-legal { background: #fff; color: #2e4f8e; }
.odf-legal__bar {
  max-width: 1644px; margin: 0 auto;
  min-height: 0; padding: 7px clamp(20px, 3.6vw, 60px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px 30px; flex-wrap: wrap;
  font-size: 14.5px; line-height: 1.4;
}
.odf-legal__bar ul { display: flex; flex-wrap: wrap; align-items: center; }
.odf-legal__bar li { display: flex; align-items: center; }
.odf-legal__bar li + li::before { content: "|"; margin: 0 16px; color: #8aa0c8; }
.odf-legal__bar a { transition: color .15s ease; }
.odf-legal__copy { display: flex; flex-wrap: wrap; align-items: center; }
.odf-legal__sep { color: #8aa0c8; margin: 0 16px; }
.odf-legal__bar a:hover { color: var(--odf-blue); text-decoration: underline; text-underline-offset: 3px; }
.odf-legal__bar a:focus-visible { outline: 2px solid var(--odf-blue); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .odf-cta__btn, .odf-cta__btn svg, .odf-social a, .odf-nav a, .odf-nav__more summary svg { transition: none; }
  .odf-cta__btn:hover, .odf-social a:hover { transform: none; }
}

/* ==========================================================================
   Tablet (≤ 1024px): logo + icons on one line, menu underneath
   ========================================================================== */
@media (max-width: 1024px) {
  .odf-cta {
    aspect-ratio: auto; min-height: 0;
    background-position: 70% center;
    padding: 26px 20px 24px;
  }
  .odf-cta::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 45, 120, .30), rgba(0, 45, 120, .52));
  }
  .odf-cta__inner {
    position: relative; inset: auto;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  }
  .odf-cta__sub, .odf-cta__btn, .odf-cta__trust { position: static; }
  .odf-cta__sub { font-size: clamp(26px, 5vw, 36px); }
  .odf-cta__btn { width: min(100%, 420px); height: 54px; font-size: 18px; border-radius: 12px; gap: 16px; }
  .odf-cta__trust { width: auto; flex-wrap: wrap; justify-content: center; gap: 8px 0; font-size: 14px; }
  .odf-cta__trust li { gap: 7px; }
  .odf-cta__trust li + li::before { margin: 0 12px 0 12px; }

  .odf-footer__bar {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo social" "nav nav";
    row-gap: 2px; padding: 6px 20px 4px;
  }
  .odf-logo { grid-area: logo; justify-self: start; }
  .odf-nav { grid-area: nav; }
  .odf-social { grid-area: social; justify-content: flex-end; }
  .odf-nav__more ul { left: 50%; transform: translateX(-50%); }
  .odf-legal__bar { justify-content: center; text-align: center; font-size: 14px; }
  .odf-legal__bar ul { justify-content: center; }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  .odf-cta { padding: 24px 16px 22px; }
  .odf-cta__trust { flex-direction: column; gap: 4px; }
  .odf-cta__trust li + li::before { display: none; }
  .odf-footer__bar { padding: 6px 16px 4px; }
  .odf-logo img { height: 36px; }
  .odf-social { gap: 16px; }
  .odf-nav ul.odf-nav__list { gap: 0 18px; }
  .odf-legal__bar { flex-direction: column; gap: 4px; padding: 8px 16px; font-size: 13px; }
  .odf-legal__sep { display: none; }
  .odf-legal__copy { flex-direction: column; gap: 0; }
  .odf-legal__bar ul { gap: 0 16px; }
  .odf-legal__bar li + li::before { display: none; }
}