/* ==========================================================================
   O'Dance Holiday — Crète 2027 · Early Bird + "Votre semaine d'O'Dance"
   (section#programme). All rules scoped under .odeb.
   ========================================================================== */
@font-face { font-family: "ODEB Barlow"; src: url("fonts/barlow-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ODEB Barlow"; src: url("fonts/barlow-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ODEB Barlow"; src: url("fonts/barlow-800.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ODEB Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ODEB Barlow Semi"; src: url("fonts/barlow-semi-condensed-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ODEB Barlow Semi"; src: url("fonts/barlow-semi-condensed-800.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ODEB Barlow Semi"; src: url("fonts/barlow-semi-condensed-500i.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }

.odeb {
  /* 1 --s = 1px of the 940px-wide reference panel */
  --s: calc(min(100vw - 32px, 1200px) / 940);
  --odeb-navy: #0b3c9a;
  --odeb-navy-deep: #0a2f7d;
  --odeb-yellow: #fdd835;
  --odeb-btn: #fdd42e;
  --odeb-card: #eef4fb;
  --odeb-text: #1d4796;

  position: relative;
  isolation: isolate;
  background: #fff;
  color: var(--odeb-navy);
  font-family: "ODEB Barlow", system-ui, sans-serif;
  padding-block: 0 calc(28 * var(--s));
}
.odeb *, .odeb *::before, .odeb *::after { box-sizing: border-box; }
.odeb :where(h2, h3, p, ol, ul, dl, dd) { margin: 0; padding: 0; }
.odeb :where(ol, ul) { list-style: none; }

.odeb__inner {
  position: relative;
  width: min(100% - 32px, 1200px);
  margin: 0 auto;
}

/* ---------- Early Bird banner ---------- */
.odeb__banner {
  position: relative;
  aspect-ratio: 940 / 152;
  background: url("img/bandeau-early-bird.jpg") center / 100% 100% no-repeat;
  color: #fff;
}
.odeb__clock {
  position: absolute; left: calc(-75 * var(--s)); top: calc(8 * var(--s));
  width: calc(58 * var(--s)); height: auto;
  color: var(--odeb-yellow);
}
.odeb__offer { position: absolute; left: calc(115 * var(--s)); top: calc(26 * var(--s)); }
.odeb__price {
  display: flex; align-items: baseline; gap: calc(7 * var(--s));
  color: var(--odeb-yellow); line-height: 1; white-space: nowrap;
  text-shadow: 0 calc(2 * var(--s)) calc(6 * var(--s)) rgba(0, 30, 90, .25);
}
.odeb__eb {
  font-family: "ODEB Barlow Condensed", sans-serif; font-weight: 800;
  font-size: calc(38.5 * var(--s)); letter-spacing: -.005em;
}
.odeb__amount {
  font-family: "ODEB Barlow", sans-serif; font-weight: 800;
  font-size: calc(51 * var(--s)); letter-spacing: -.02em;
}
.odeb__tagline {
  margin-top: calc(4 * var(--s));
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 700;
  font-size: max(calc(14.6 * var(--s)), 12px); line-height: 1.2;
  white-space: nowrap;
}
.odeb__divider {
  position: absolute; left: calc(468 * var(--s)); top: calc(38 * var(--s));
  width: max(calc(1.5 * var(--s)), 1px); height: calc(56 * var(--s));
  background: rgba(255, 255, 255, .7);
}
.odeb__facts {
  position: absolute; left: calc(517 * var(--s)); top: calc(48 * var(--s));
  display: grid; gap: calc(8 * var(--s));
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 700;
  font-size: max(calc(13.4 * var(--s)), 11.5px); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .01em;
  white-space: nowrap;
}
.odeb__facts li { display: flex; align-items: center; gap: calc(13 * var(--s)); }
.odeb__facts svg { width: calc(14 * var(--s)); height: calc(15 * var(--s)); flex: none; }
.odeb__btn {
  position: absolute; left: calc(726 * var(--s)); top: calc(44 * var(--s));
  width: calc(183 * var(--s)); height: calc(42 * var(--s));
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--s));
  border-radius: calc(10 * var(--s));
  background: var(--odeb-btn); color: var(--odeb-navy-deep);
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 800;
  font-size: max(calc(15 * var(--s)), 12.5px); letter-spacing: .01em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: 0 calc(5 * var(--s)) calc(14 * var(--s)) rgba(0, 30, 90, .22);
  transition: background-color .18s ease, transform .18s ease;
}
.odeb__btn svg, .odeb__toggle svg { width: .72em; height: .72em; flex: none; transition: transform .18s ease; }
.odeb__btn:hover { background: #ffe066; transform: translateY(-1px); }
.odeb__btn:hover svg { transform: translateX(3px); }
.odeb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.odeb__palm {
  position: absolute; right: calc(-1 * var(--s)); top: calc(150 * var(--s));
  width: calc(102 * var(--s)); height: auto;
  pointer-events: none; z-index: 2;
}

/* ---------- Week heading ---------- */
.odeb__head { position: relative; z-index: 1; margin-top: calc(-13 * var(--s)); text-align: center; }
.odeb__title {
  font-family: "ODEB Barlow", sans-serif; font-weight: 800;
  font-size: max(calc(23.5 * var(--s)), 24px); line-height: 1.1;
  letter-spacing: .005em; text-transform: uppercase;
  color: var(--odeb-navy);
  text-wrap: balance;
}
.odeb__subtitle {
  margin-top: calc(4 * var(--s));
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 500; font-style: italic;
  font-size: max(calc(16 * var(--s)), 16px); line-height: 1.3;
  color: var(--odeb-navy);
}

/* ---------- 8 day cards ---------- */
.odeb__days {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: calc(8 * var(--s));
  margin: calc(12 * var(--s)) calc(23 * var(--s)) 0 calc(25 * var(--s));
}
.odeb-day {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  min-height: calc(104 * var(--s));
  padding: calc(11 * var(--s)) calc(5 * var(--s)) calc(9 * var(--s));
  border: 0; border-radius: calc(7 * var(--s));
  background: var(--odeb-card);
  color: var(--odeb-navy);
  font: inherit; text-align: center; cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.odeb-day:hover { background: #e2ecf9; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11, 60, 154, .1); }
.odeb-day:focus-visible { outline: 3px solid var(--odeb-navy); outline-offset: 2px; }
.odeb-day[aria-current="true"] { background: #dbe8f8; box-shadow: inset 0 0 0 2px rgba(11, 60, 154, .35); }
.odeb-day__label {
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 800;
  font-size: max(calc(12.6 * var(--s)), 13.5px); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
}
.odeb-day__icon { display: block; width: calc(31 * var(--s)); height: calc(31 * var(--s)); min-width: 26px; min-height: 26px; margin: calc(8 * var(--s)) 0 calc(6 * var(--s)); }
.odeb-day__icon svg { display: block; width: 100%; height: 100%; }
.odeb-day__text {
  font-family: "ODEB Barlow", sans-serif; font-weight: 500;
  font-size: max(calc(11.6 * var(--s)), 13px); line-height: 1.25;
  color: var(--odeb-text);
}
.odeb-day__text small { display: block; margin-top: 2px; font-size: .78em; }

/* ---------- "Voir le programme détaillé" ---------- */
.odeb__more { display: flex; justify-content: center; margin-top: calc(8 * var(--s)); }
.odeb__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--s));
  min-width: calc(228 * var(--s)); min-height: max(calc(30 * var(--s)), 40px);
  padding: 0 20px;
  border: 1.5px solid var(--odeb-navy); border-radius: calc(7 * var(--s));
  background: #fff; color: var(--odeb-navy);
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 800;
  font-size: max(calc(12.6 * var(--s)), 14px); letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.odeb__toggle:hover { background: var(--odeb-navy); color: #fff; }
.odeb__toggle:hover svg { transform: translateX(3px); }
.odeb__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.odeb__toggle:focus-visible { outline: 3px solid var(--odeb-yellow); outline-offset: 3px; }

/* Detailed programme (opened by the button or a day card) */
.odeb__detail { margin: 22px calc(23 * var(--s)) 0 calc(25 * var(--s)); }
.odeb__detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.odeb-plan {
  padding: 16px 16px 14px;
  border: 1px solid #dce7f5; border-radius: 10px;
  background: #fff;
  scroll-margin-top: 110px;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.odeb-plan.is-highlight { border-color: var(--odeb-navy); box-shadow: 0 0 0 3px rgba(11, 60, 154, .15); }
.odeb-plan__title {
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 800;
  font-size: 16px; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em;
  color: var(--odeb-navy);
}
.odeb-plan__title span { display: block; margin-top: 2px; font-weight: 700; font-size: 14px; text-transform: none; color: #3e64ad; }
.odeb-plan dl { margin-top: 10px; display: grid; gap: 7px; }
.odeb-plan dt {
  font-family: "ODEB Barlow Semi", sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #5d7bb8;
}
.odeb-plan dd { margin: 1px 0 0; font-size: 15px; line-height: 1.4; color: #203a70; }
/* alternating card tones: light / slightly deeper blue, in day order */
.odeb__detail-grid > .odeb-plan:nth-child(odd)  { background: #f7faff; border-color: #dfe9f6; }
.odeb__detail-grid > .odeb-plan:nth-child(even) { background: #d8e5f7; border-color: #c2d5ee; }
.odeb__detail-grid > .odeb-plan.is-highlight { border-color: var(--odeb-navy); }

.odeb__general { margin-top: 14px; text-align: center; color: var(--odeb-navy); }
.odeb__general-title { margin: 0; font-family: "ODEB Barlow Semi", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; }
.odeb__general-text { margin: 2px auto 0; max-width: 780px; font-size: 14.5px; line-height: 1.45; color: #3f5a8f; }
.odeb__general + .odeb__note { margin-top: 6px; }
.odeb__note { margin-top: 12px; text-align: center; font-size: 14px; color: #5a6b8c; }

@media (prefers-reduced-motion: reduce) {
  .odeb__btn, .odeb__btn svg, .odeb-day, .odeb__toggle, .odeb__toggle svg, .odeb-plan { transition: none; }
  .odeb__btn:hover, .odeb-day:hover { transform: none; }
}

/* ==========================================================================
   Tablet & mobile (≤ 900px): banner content stacks, days on 4 then 2 columns
   ========================================================================== */
@media (max-width: 900px) {
  .odeb { --s: 1px; padding-block: 0 32px; }
  .odeb__inner { width: 100%; padding: 0 16px; }
  .odeb__banner {
    aspect-ratio: auto;
    margin: 0 -16px;
    padding: 62px 24px 84px;
    background: url("img/bandeau-early-bird.jpg") left center / cover no-repeat;
    display: grid; gap: 18px;
    justify-items: start;
  }
  .odeb__clock, .odeb__offer, .odeb__facts, .odeb__btn { position: static; }
  .odeb__divider, .odeb__palm { display: none; }
  .odeb__offer { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .odeb__clock { width: 54px; grid-row: span 2; }
  .odeb__price { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .odeb__eb { font-size: clamp(30px, 7.4vw, 44px); }
  .odeb__amount { font-size: clamp(40px, 9.8vw, 58px); }
  .odeb__tagline { font-size: 15px; white-space: normal; }
  .odeb__facts { font-size: 14.5px; gap: 8px; }
  .odeb__facts svg { width: 16px; height: 17px; }
  .odeb__btn { width: auto; height: 48px; padding: 0 26px; font-size: 16px; border-radius: 10px; }

  .odeb__head { margin-top: 26px; }
  .odeb__days { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }
  .odeb-day { min-height: 124px; padding: 14px 8px; border-radius: 10px; }
  .odeb__more { margin-top: 18px; }
  .odeb__detail { margin: 20px 0 0; }
  .odeb__detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .odeb__banner { padding: 60px 20px 88px; }
  .odeb__btn { width: 100%; }
  .odeb__days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odeb-day { min-height: 0; }
  .odeb__toggle { width: 100%; }
  .odeb__detail-grid { grid-template-columns: 1fr; }
}