/* ==========================================================================
   O'Dance Holiday — Crète 2027 · HERO (section#accueil)
   Every rule is scoped under .odh-hero: nothing here touches the navbar,
   the other sections or the global styles.
   Fonts are self-hosted (./fonts, SIL Open Font License).
   ========================================================================== */

@font-face { font-family: "ODH Anton"; src: url("fonts/anton.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ODH Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "ODH Barlow Semi"; src: url("fonts/barlow-semi-condensed-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "ODH Barlow Semi"; src: url("fonts/barlow-semi-condensed-800i.woff") format("woff"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "ODH Marck"; src: url("fonts/marck-script.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ODH Montserrat"; src: url("fonts/montserrat.woff") format("woff"); font-weight: 100 900; font-display: swap; }

.odh-hero {
  /* 1 --u = 1px of the 1961px-wide reference design */
  --u: calc(min(100vw, 1960px) / 1961);
  --odh-navy: #0b2a78;
  --odh-navy-deep: #07205f;
  --odh-yellow: #fdd720;
  --odh-yellow-btn: #fac825;
  --odh-pink: #f70088;
  --odh-flag: #0d5eaf;
  /* If the site navbar is position:fixed and overlaps the hero, set this to its height */
  --odh-hero-offset: 0px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: calc(724 * var(--u) + var(--odh-hero-offset));
  padding-top: var(--odh-hero-offset);
  box-sizing: border-box;
  color: #fff;
  /* Desktop: a clean sky / sea / Crete-coast plate (no text baked in) */
  background:
    url("img/fond-crete.jpg") center top / cover no-repeat content-box,
    linear-gradient(180deg,
      #0079f4 0%, #008dfd 18%, #00a3fd 38%, #3fc2fd 55%, #9ae0fd 72%, #def3fe 81.4%,
      #0a78dc 81.6%, #0588e6 86%, #009bec 93%, #07b0e8 100%);
  font-family: "ODH Montserrat", system-ui, sans-serif;
  text-align: center;
}
.odh-hero *, .odh-hero *::before, .odh-hero *::after { box-sizing: border-box; }
.odh-hero :where(h1, p, figure) { margin: 0; padding: 0; }

/* ---------- Background decorations (drawn in code; used on tablet & mobile) ---------- */
.odh-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none; }
.odh-hero__bg svg { position: absolute; display: block; }
.odh-hero__sun {
  position: absolute; right: -8%; top: -30%; width: 48%; aspect-ratio: 1;
  background:
    radial-gradient(circle at 60% 40%, #fff 0 4%, rgba(255,255,255,.9) 9%, rgba(255,255,255,.35) 22%, rgba(255,255,255,0) 48%);
}
.odh-hero__rays {
  position: absolute; right: -6%; top: -32%; width: 60%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 200deg at 60% 40%, rgba(255,255,255,.07) 0 2deg, rgba(255,255,255,0) 2deg 9deg);
  -webkit-mask: radial-gradient(circle at 60% 40%, #000 0 15%, transparent 55%);
          mask: radial-gradient(circle at 60% 40%, #000 0 15%, transparent 55%);
}
.odh-hero__clouds { left: 0; top: 0; width: 100%; height: 100%; }
.odh-hero__mountains { right: 0; bottom: 18.4%; width: 50%; height: 22%; }
.odh-hero__glints {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18.4%;
  background:
    radial-gradient(ellipse 30% 40% at 18% 70%, rgba(140,235,255,.35), transparent 70%),
    radial-gradient(ellipse 35% 60% at 50% 100%, rgba(120,230,255,.45), transparent 70%),
    radial-gradient(ellipse 30% 45% at 85% 80%, rgba(120,225,255,.35), transparent 70%),
    linear-gradient(180deg, rgba(0,60,170,.35), rgba(0,60,170,0) 35%);
}
.odh-hero__flowers { right: -1%; bottom: -2%; width: calc(190 * var(--u)); height: auto; }

/* ---------- Stage (desktop composition, 1961 × 724 design units) ---------- */
.odh-hero__stage {
  position: relative;
  width: calc(1961 * var(--u));
  height: calc(724 * var(--u));
  margin: 0 auto;
}

/* Photos (the wrapper covers the stage on desktop) */
.odh-hero__photos { position: absolute; inset: 0; }
.odh-hero__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  border: calc(11 * var(--u)) solid #fff;
  background: #7ccff5;
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 40, 110, .28);
}
.odh-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.odh-hero__photo--a { left: calc(66 * var(--u)); top: calc(113 * var(--u)); width: calc(472 * var(--u)); height: calc(526 * var(--u)); }
.odh-hero__photo--b { left: calc(1335 * var(--u)); top: calc(205 * var(--u)); width: calc(385 * var(--u)); height: calc(390 * var(--u)); }
.odh-hero__photo--b img { object-position: 20% 50%; }
.odh-hero__photo--c { left: calc(1681 * var(--u)); top: calc(247 * var(--u)); width: calc(264 * var(--u)); height: calc(344 * var(--u)); z-index: 1; }

/* Handwritten tagline */
.odh-hero__tagline {
  position: absolute;
  left: calc(1580 * var(--u)); top: calc(38 * var(--u));
  width: calc(170 * var(--u));
  font-family: "ODH Marck", cursive; font-weight: 400;
  font-size: calc(58 * var(--u)); line-height: .76;
  text-align: left; color: #fff;
  transform: rotate(-12deg);
  transform-origin: 0 0;
  text-shadow: 0 2px 8px rgba(0, 60, 150, .35);
}
.odh-hero__tagline span { display: block; }
.odh-hero__tagline span:nth-child(2) { padding-left: .08em; }
.odh-hero__tagline span:nth-child(3) { padding-left: .5em; }
.odh-hero__tagline span:nth-child(4) { padding-left: .2em; }
.odh-hero__swoosh { display: block; width: calc(105 * var(--u)); height: auto; margin: calc(8 * var(--u)) 0 0 calc(35 * var(--u)); }

/* Centre column */
.odh-hero__content {
  position: absolute;
  left: calc(560 * var(--u)); top: 0;
  width: calc(800 * var(--u));
  height: 100%;
}

/* Title lock-up */
.odh-hero__title {
  position: absolute; left: 0; top: calc(20 * var(--u));
  width: 100%; height: calc(380 * var(--u));
  font-weight: 400;
}
.odh-hero__brand {
  position: absolute; left: calc(33 * var(--u)); top: calc(-2 * var(--u));
  font-family: "ODH Anton", Impact, sans-serif;
  font-size: calc(282 * var(--u)); line-height: 1.17;
  letter-spacing: calc(-6 * var(--u));
  color: #fff; white-space: nowrap;
  transform: scaleX(.865); transform-origin: 0 0;
  text-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0, 55, 150, .35);
}
.odh-hero__crete {
  position: absolute; left: calc(596 * var(--u)); top: calc(-16 * var(--u));
  transform: scaleX(.85); transform-origin: 0 0;
  font-family: "ODH Barlow Condensed", sans-serif; font-weight: 800;
  font-size: calc(84 * var(--u)); line-height: 1;
  color: var(--odh-yellow);
  text-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 50, 130, .25);
  z-index: 2;
}
.odh-hero__flag {
  position: absolute; left: calc(506 * var(--u)); top: calc(256 * var(--u));
  width: calc(300 * var(--u)); height: auto;
  transform: perspective(calc(900 * var(--u))) rotateY(18deg) rotateZ(-17deg);
  transform-origin: 0 50%;
  filter: drop-shadow(0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(0, 30, 90, .3));
  z-index: 1;
}
.odh-hero__holiday {
  position: absolute; left: calc(132 * var(--u)); top: calc(236 * var(--u));
  font-family: "ODH Marck", cursive;
  font-size: calc(146 * var(--u)); line-height: 1;
  letter-spacing: calc(4 * var(--u));
  color: var(--odh-navy);
  -webkit-text-stroke: calc(3 * var(--u)) var(--odh-navy);
  transform: rotate(-12deg);
  transform-origin: 0 50%;
  white-space: nowrap;
  z-index: 3;
  filter:
    drop-shadow(max(1px, calc(2.5 * var(--u))) 0 0 #fff) drop-shadow(calc(-1 * max(1px, calc(2.5 * var(--u)))) 0 0 #fff) drop-shadow(0 max(1px, calc(2.5 * var(--u))) 0 #fff) drop-shadow(0 calc(-1 * max(1px, calc(2.5 * var(--u)))) 0 #fff)
    drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 30, 100, .35));
}

/* Disciplines, dates, SBK */
.odh-hero__styles {
  position: absolute; left: 0; right: 0; top: calc(403 * var(--u));
  font-family: "ODH Barlow Semi", sans-serif; font-weight: 800; font-style: italic;
  font-size: calc(31.5 * var(--u)); line-height: 1.2;
  color: #0f2996; white-space: nowrap;
  padding-right: calc(54 * var(--u));
}
.odh-hero__styles .odh-sep { margin: 0 calc(17 * var(--u)); }
.odh-hero__dates {
  position: absolute; left: calc(84 * var(--u)); top: calc(449 * var(--u));
  width: calc(589 * var(--u)); height: calc(70 * var(--u));
  display: flex; align-items: center; justify-content: center;
  background: var(--odh-yellow);
  font-family: "ODH Barlow Semi", sans-serif; font-weight: 800;
  font-size: calc(55 * var(--u)); line-height: 1;
  letter-spacing: calc(2.6 * var(--u));
  color: #103b7b; white-space: nowrap;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 40, 110, .18);
}
.odh-hero__dates time { color: inherit; }
.odh-hero__sbk {
  position: absolute; left: 0; right: 0; top: calc(516 * var(--u));
  padding-right: calc(40 * var(--u));
  font-family: "ODH Barlow Condensed", sans-serif; font-weight: 800;
  font-size: calc(80 * var(--u)); line-height: 1;
  color: var(--odh-pink); white-space: nowrap;
  transform: scaleX(.84);
  text-shadow: 0 0 calc(2 * var(--u)) #fff, 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(255, 255, 255, .55);
}

/* CTA buttons */
.odh-hero__ctas {
  position: absolute; left: calc(119 * var(--u)); top: calc(614 * var(--u));
  display: flex; gap: calc(19 * var(--u));
}
.odh-hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: max(calc(65 * var(--u)), 44px);
  padding: 0 max(calc(30 * var(--u)), 18px);
  min-width: calc(270 * var(--u));
  border-radius: max(calc(9 * var(--u)), 6px);
  font-family: "ODH Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: max(calc(18.5 * var(--u)), 12.5px);
  letter-spacing: .01em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.odh-hero__btn--primary {
  background: var(--odh-yellow-btn); color: #022d84;
  border: 2px solid var(--odh-yellow-btn);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 40, 110, .28);
}
.odh-hero__btn--secondary {
  min-width: calc(296 * var(--u));
  background: rgba(0, 120, 220, .28); color: #fff;
  border: 2px solid #fff;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.odh-hero__btn:hover { transform: translateY(-2px); }
.odh-hero__btn--primary:hover { background: #ffd43d; border-color: #ffd43d; box-shadow: 0 12px 26px rgba(0, 40, 110, .32); }
.odh-hero__btn--secondary:hover { background: rgba(0, 90, 200, .5); }
.odh-hero__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.odh-hero__btn--primary:focus-visible { outline-color: var(--odh-navy); }

@media (prefers-reduced-motion: reduce) {
  .odh-hero__btn { transition: none; }
  .odh-hero__btn:hover { transform: none; }
}

/* ==========================================================================
   Tablet & mobile (< 1024px): the composition reflows into one column.
   Order: tagline · title · photos · disciplines · dates · SBK · buttons
   ========================================================================== */
@media (max-width: 1023.98px) {
  .odh-hero {
    /* design units now follow the width of the centre column (≈820 units) */
    --u: calc((min(100vw, 760px) - 32px) / 800);
    min-height: 0;
    padding: calc(var(--odh-hero-offset) + 28px) 16px 40px;
    background:
      linear-gradient(180deg,
        #0079f4 0%, #008dfd 14%, #00a3fd 32%, #3fc2fd 50%, #9ae0fd 66%, #def3fe 76%,
        #0a78dc 76.2%, #0588e6 82%, #009bec 91%, #07b0e8 100%);
  }
  .odh-hero__bg { display: block; }
  .odh-hero__mountains { bottom: 23.8%; width: 75%; height: clamp(36px, 9vw, 90px); }
  .odh-hero__glints { height: 23.8%; }
  .odh-hero__flowers { width: 96px; }

  .odh-hero__stage {
    width: 100%; max-width: 760px; height: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  .odh-hero__content { display: contents; }

  .odh-hero__tagline {
    order: 0; position: relative; left: auto; top: auto;
    align-self: flex-end;
    width: auto; margin: -8px 2% 0 0;
    font-size: clamp(20px, 5vw, 36px); line-height: .8;
    transform: rotate(-10deg); transform-origin: 100% 50%;
  }
  .odh-hero__tagline span { display: inline; padding: 0 !important; }
  .odh-hero__tagline span + span::before { content: " "; }
  .odh-hero__swoosh { display: none; }

  .odh-hero__title {
    order: 1; position: relative; top: auto;
    width: calc(800 * var(--u)); height: calc(390 * var(--u));
    margin-top: calc(34 * var(--u));
  }

  .odh-hero__photos {
    order: 2; position: relative;
    width: 100%; max-width: 620px;
    height: calc(330 * var(--u));
    margin: calc(8 * var(--u)) 0 calc(26 * var(--u));
  }
  .odh-hero__photo { border-width: max(calc(9 * var(--u)), 4px); }
  .odh-hero__photo--a { left: 50%; top: 0; width: calc(300 * var(--u)); height: calc(330 * var(--u)); transform: translateX(-50%); z-index: 2; }
  .odh-hero__photo--b { left: 4%; top: calc(46 * var(--u)); width: calc(250 * var(--u)); height: calc(254 * var(--u)); z-index: 1; }
  .odh-hero__photo--c { left: auto; right: 4%; top: calc(34 * var(--u)); width: calc(210 * var(--u)); height: calc(274 * var(--u)); z-index: 1; }

  .odh-hero__styles, .odh-hero__dates, .odh-hero__sbk, .odh-hero__ctas {
    position: relative; left: auto; right: auto; top: auto;
  }
  .odh-hero__styles {
    order: 3; padding: 0; white-space: normal;
    font-size: calc(36 * var(--u));
    word-spacing: 0;
  }
  .odh-hero__styles .odh-sep { margin: 0 .22em; }
  .odh-hero__dates {
    order: 4; margin-top: 10px;
    width: min(100%, calc(640 * var(--u))); height: auto;
    padding: .16em .4em .12em;
    font-size: clamp(26px, calc(72 * var(--u)), 58px);
  }
  .odh-hero__sbk {
    order: 5; margin-top: 10px; padding: 0;
    font-size: clamp(34px, calc(92 * var(--u)), 72px);
  }
  .odh-hero__ctas {
    order: 6; margin-top: 24px;
    width: 100%; justify-content: center; flex-wrap: wrap; gap: 14px;
  }
  .odh-hero__btn { height: 54px; font-size: 15px; min-width: 0; padding: 0 26px; border-radius: 9px; }
}

@media (max-width: 560px) {
  .odh-hero__ctas { flex-direction: column; align-items: stretch; max-width: 340px; }
  .odh-hero__btn { width: 100%; }
  .odh-hero__photo--b { left: 0; }
  .odh-hero__photo--c { right: 0; }
}