/* ==========================================================================
   O'Dance Holiday — Crète 2027 · Contact page (contact.html). Scoped under .odc.
   Same tokens as the rest of the site: O'Dance blue, white, yellow CTA, Barlow / Marck.
   ========================================================================== */
@font-face { font-family: "ODC Barlow"; src: url("fonts/barlow-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ODC Barlow"; src: url("fonts/barlow-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ODC Barlow Semi"; src: url("fonts/barlow-semi-condensed-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ODC Barlow Semi"; src: url("fonts/barlow-semi-condensed-800.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "ODC Marck"; src: url("fonts/marck-script.woff") format("woff"); font-weight: 400; font-display: swap; }

.odc {
  --odc-navy: #0b3c9a;
  --odc-navy-deep: #0a2f7d;
  --odc-blue: #1f5fb4;
  --odc-text: #24406f;
  --odc-muted: #5a6b8c;
  --odc-line: #d6e2f2;
  --odc-field: #f5f9fe;
  --odc-yellow: #fdd535;
  --odc-pink: #e5197f;
  --odc-error: #c2185b;
  position: relative; isolation: isolate;
  padding-block: 26px 30px;
  padding-inline: clamp(16px, 4vw, 48px);
  color: var(--odc-text);
  font-family: "ODC Barlow", system-ui, sans-serif;
  background: #1f86d6 url("img/fond-contact.jpg") center 40% / cover no-repeat;
}
.odc::before {                               /* keeps the photo subtle behind the card */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9, 70, 170, .55) 0%, rgba(20, 120, 210, .35) 45%, rgba(255, 255, 255, .15) 100%);
}
.odc *, .odc *::before, .odc *::after { box-sizing: border-box; }
.odc :where(h1, h2, p, ul, dl, dd) { margin: 0; padding: 0; }
.odc ul { list-style: none; }

.odc__head { text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0, 30, 90, .35); }
.odc__title {
  font-family: "ODC Barlow Semi", sans-serif; font-weight: 800;
  font-size: clamp(32px, 4vw, 50px); line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}
.odc__subtitle { margin-top: 8px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45; font-weight: 500; text-wrap: balance; }

/* ---------- Card ---------- */
.odc-card {
  max-width: 1120px; margin: 18px auto 0;
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(4, 35, 100, .22), 0 2px 6px rgba(4, 35, 100, .1);
}

/* Left: contact details */
.odc-info {
  position: relative;
  padding: 34px 32px 30px;
  background: linear-gradient(170deg, #0b5fc0 0%, #0a3f94 100%);
  color: #fff;
  display: flex; flex-direction: column; gap: 22px;
}
.odc-info__brand { font-family: "ODC Barlow Semi", sans-serif; font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.odc-info__brand span { display: block; margin-top: 4px; font-family: "ODC Marck", cursive; font-weight: 400; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--odc-yellow); }
.odc-info__lead { font-size: 16px; line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, .92); }
.odc-info__list { display: grid; gap: 16px; }
.odc-info__item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.odc-info__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--odc-yellow); }
.odc-info__icon svg { width: 21px; height: 21px; }
.odc-info__label { font-family: "ODC Barlow Semi", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.odc-info__value { display: inline-block; margin-top: 1px; font-size: 17.5px; font-weight: 500; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.odc-info__value:hover { color: var(--odc-yellow); text-decoration: underline; text-underline-offset: 3px; }
.odc-info__value:focus-visible, .odc-social a:focus-visible { outline: 3px solid var(--odc-yellow); outline-offset: 3px; border-radius: 4px; }
.odc-info__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); }
.odc-info__foot p { font-family: "ODC Barlow Semi", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.odc-social { margin-top: 10px; display: flex; gap: 14px; }
.odc-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .15s ease, color .15s ease; }
.odc-social a:hover { background: var(--odc-yellow); color: var(--odc-navy-deep); }
.odc-social svg { width: 20px; height: 20px; }

/* Right: form */
.odc-form { padding: 30px 34px 30px; display: grid; gap: 14px; align-content: start; }
.odc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.odc-field { display: grid; gap: 6px; min-width: 0; }
.odc-field label { font-family: "ODC Barlow Semi", sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: .02em; color: var(--odc-navy); }
.odc-field label small { font-family: "ODC Barlow", sans-serif; font-weight: 500; font-size: 13px; color: var(--odc-muted); }
.odc-field input, .odc-field select, .odc-field textarea {
  width: 100%; min-height: 48px;
  padding: 11px 14px;
  font: 500 16px/1.4 "ODC Barlow", system-ui, sans-serif; color: #102a5c;
  background: var(--odc-field);
  border: 1.5px solid var(--odc-line); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  appearance: none;
}
.odc-field select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2 6 8l4-3.8' fill='none' stroke='%230b3c9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.odc-field textarea { min-height: 150px; resize: vertical; }
.odc-field ::placeholder { color: #8a9ab8; }
.odc-field input:focus, .odc-field select:focus, .odc-field textarea:focus {
  outline: none; background: #fff; border-color: var(--odc-blue); box-shadow: 0 0 0 4px rgba(31, 95, 180, .15);
}
.odc-field.is-invalid input, .odc-field.is-invalid textarea { border-color: var(--odc-error); background: #fff7fa; }
.odc-field__error { min-height: 0; font-size: 14px; font-weight: 500; color: var(--odc-error); }
.odc-field__error:empty { display: none; }

.odc-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 2px; }
.odc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--odc-yellow); color: var(--odc-navy-deep);
  font-family: "ODC Barlow Semi", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 6px 16px rgba(10, 42, 107, .18);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.odc-btn svg { width: 18px; height: 18px; flex: none; }
.odc-btn:hover { background: #ffe066; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(10, 42, 107, .22); }
.odc-btn:focus-visible { outline: 3px solid var(--odc-blue); outline-offset: 3px; }
.odc-btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.odc-btn--ghost { background: #fff; color: var(--odc-navy); border: 1.5px solid var(--odc-navy); box-shadow: none; min-height: 46px; font-size: 15px; padding: 0 18px; }
.odc-btn--ghost:hover { background: var(--odc-navy); color: #fff; }
.odc-form__note { font-size: 13.5px; color: var(--odc-muted); }

/* Status panels */
.odc-status { border-radius: 12px; padding: 16px 18px; font-size: 16px; line-height: 1.5; }
.odc-status[hidden] { display: none; }
.odc-status strong { display: block; font-family: "ODC Barlow Semi", sans-serif; font-weight: 800; font-size: 19px; color: var(--odc-navy); }
.odc-status--ok { background: #eef7ff; border: 1.5px solid #b9d7f5; }
.odc-status--ok strong::before { content: "✓ "; color: #15803d; }
.odc-status--info { background: #fffbea; border: 1.5px solid #f3dc7a; }
.odc-status--error { background: #fff4f8; border: 1.5px solid #f3b6cf; }
.odc-status__actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.odc-status__mail { margin-top: 8px; font-size: 14.5px; color: var(--odc-muted); }
.odc-status__mail b { color: var(--odc-navy); user-select: all; }

@media (prefers-reduced-motion: reduce) {
  .odc-btn, .odc-field input, .odc-field select, .odc-field textarea, .odc-social a { transition: none; }
  .odc-btn:hover { transform: none; }
}

/* Tablet: stack when two columns get cramped */
@media (max-width: 900px) {
  .odc-card { grid-template-columns: 1fr; max-width: 680px; }
  .odc-info { padding: 26px 24px 22px; gap: 16px; }
  .odc-info__list { grid-template-columns: 1fr 1fr; }
  .odc-info__foot { margin-top: 0; padding-top: 14px; }
  .odc-form { padding: 24px 24px 26px; }
}
@media (max-width: 560px) {
  .odc { padding-block: 20px 22px; }
  .odc-info__list { grid-template-columns: 1fr; gap: 12px; }
  .odc-form { padding: 20px 16px 22px; }
  .odc-form__row { grid-template-columns: 1fr; }
  .odc-btn { width: 100%; }
}