﻿/* Hallmark: carnet de voyage ; identité bleu ciel, géométrie d’un billet de match. */
/* Critique: priorité aux dates, aux horaires et aux incertitudes de réservation. */
:root {
  --sky: #6cabdd;
  --pale: #eaf4fb;
  --navy: #092f4f;
  --ink: #153b54;
  --muted: #36586f;
  --paper: #fff;
  --line: #b9cfde;
  --font: Arial, Helvetica, sans-serif;
  --display: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--font); }
::selection { background: var(--navy); color: var(--paper); }
.trip { width: min(880px, calc(100% - 48px)); margin: 48px auto; }
.trip-header { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 32px; padding: 36px 40px; background: var(--sky); color: var(--navy); border-radius: 12px; }
.association { margin: 0; text-align: center; }
.association img { display: block; width: 100%; height: auto; }
/* Compense l’espace transparent sous le cœur dans le PNG fourni. */
.association figcaption { margin-top: -22%; font-size: 14px; }
.association a { color: inherit; text-underline-offset: 4px; }
.association a:hover { text-decoration-thickness: 2px; }
.association a:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.15; text-wrap: balance; }
h1 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 52px); letter-spacing: -.025em; }
.trip-dates { margin: 0; font-size: 22px; }
.group { margin: 24px 0 0; }
section { padding: 36px 40px; }
.section-heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 24px; }
h2 { margin: 0; font-size: 32px; }
.section-heading p { margin: 0; text-align: right; font-size: 16px; }
.flight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.flight > div { display: flex; flex-direction: column; }
.time { font-size: 30px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.flight span { font-size: 16px; }
.flight-group { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.flight-group h3 { margin: 0; font-size: 21px; line-height: 1.4; }
.flight-group p { margin: 8px 0 20px; font-size: 16px; }
.stay { background: var(--pale); border-radius: 12px; }
.stay h3 { margin: 20px 0 8px; font-size: 23px; line-height: 1.4; }
address { font-style: normal; }
.stay p { margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.stay a { color: inherit; text-underline-offset: 4px; }
.stay a:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.connection { margin: 20px 0; padding-block: 12px; border-block: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.local-times { margin: 0 40px; color: var(--muted); font-size: 14px; }
.match { padding: 0; margin-block: 32px 0; overflow: hidden; border-radius: 12px; }
.cherki-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--navy); color: var(--paper); }
.cherki-copy { padding: 36px 32px; align-self: center; }
.cherki-copy h2 { font-size: clamp(32px, 4vw, 42px); }
.match .cherki-intent { margin: 16px 0 32px; color: var(--pale); }
.match h3 { margin: 20px 0 12px; font-size: 23px; line-height: 1.4; }
.match p { margin: 12px 0; }
.match .match-time { margin-top: 24px; color: var(--sky); }
.match img { display: block; width: 100%; height: auto; }
.match .cherki-photo { height: 100%; object-fit: cover; object-position: center top; }
.match-schedule { padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 560px) {
  .trip { width: calc(100% - 32px); margin-block: 16px 28px; }
  .trip-header, section { padding: 28px 24px; }
  .trip-header { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .association { width: 176px; justify-self: center; }
  .trip-dates { font-size: 19px; }
  .section-heading { flex-direction: column; gap: 12px; }
  .section-heading p { text-align: left; }
  .flight { gap: 16px; }
  .time { font-size: 27px; }
  .flight span { font-size: 15px; }
  .stay h3 { font-size: 21px; }
  .local-times { margin-inline: 24px; }
  .match { padding: 0; }
  .cherki-feature { grid-template-columns: minmax(0, 1fr); }
  .cherki-copy { padding: 28px 24px; }
  .match .cherki-photo { height: auto; max-height: 520px; object-fit: contain; }
}
@media print {
  .trip { width: 100%; margin: 0; }
  .trip-header, section { padding: 20px 24px; }
  section { break-inside: avoid; }
}
