/* Tillevent — page d'accueil */
  :root {
    --cream: #FBF4EA;
    --paper: #FFFDF8;
    --ink: #2A1F1A;
    --muted: #6E5F55;
    --line: #EADFD0;
    --sand: #F3E9DA;
    --accent: #D9462B;
    --shadow: 0 4px 0 rgba(42, 31, 26, 0.18);
    --soft: 0 14px 30px rgba(42, 31, 26, 0.10);
  }

  * { box-sizing: border-box; }

  html { overflow-x: clip; }

  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Figtree', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { color: inherit; }

  .display { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.04em; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

  /* ── En-tête ── */
  .top { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; }
  .wordmark { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.045em; text-decoration: none; }
  .wordmark span { color: var(--accent); }

  .lang { display: inline-flex; background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
  .lang button {
    min-width: 46px; height: 36px; border: 0; border-radius: 999px; background: transparent;
    font: 800 13px 'Figtree', sans-serif; color: var(--muted); cursor: pointer;
  }
  .lang button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

  /* ── Accroche ── */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 7px 14px; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
    transform: rotate(-2deg);
  }
  .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); animation: blink 2s ease infinite; }
  @keyframes blink { 50% { opacity: 0.25; } }

  h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 8vw, 92px);
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin: 22px 0 0;
  }
  h1 .accent { color: var(--accent); }

  .sub { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 520px; margin: 22px 0 0; }

  /* ── Compte à rebours ── */
  .countdown-label { margin: 36px 0 12px; font-weight: 800; font-size: 15px; }
  .countdown { display: flex; gap: 10px; flex-wrap: wrap; }
  .unit {
    min-width: 82px; padding: 12px 12px 10px; text-align: center;
    background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  }
  .unit:nth-child(odd) { transform: rotate(-2deg); }
  .unit:nth-child(even) { transform: rotate(1.5deg); }
  .unit b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .unit span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

  /* ── Boutons ── */
  .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px;
    border-radius: 18px; font-weight: 800; font-size: 16px; text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(42, 31, 26, 0.18); }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
  .btn-ghost { border: 1.5px solid var(--ink); background: transparent; }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-ghost:hover { background: var(--paper); }
  .btn svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* ── Collage ── */
  .collage { position: relative; height: 470px; }
  .tile {
    position: absolute; display: flex; flex-direction: column; justify-content: space-between;
    padding: 18px; border-radius: 28px; box-shadow: var(--soft);
  }
  .tile svg { width: 60px; height: 60px; }
  .tile p { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.08; letter-spacing: -0.02em; }
  .tile small { display: block; margin-top: 6px; font: 700 12px 'Figtree', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
  .t1 { background: #DCE8D2; color: #2F4A25; width: 200px; height: 230px; left: 0; top: 30px; transform: rotate(-8deg); }
  .t2 { background: #F7E7B4; color: #5E450D; width: 200px; height: 220px; right: 0; top: 0; transform: rotate(7deg); }
  .t3 { background: #E9E0F5; color: #3B2D57; width: 210px; height: 180px; left: 50px; top: 280px; transform: rotate(-3deg); z-index: 2; }
  .t4 { background: #FBDCC8; color: #7A3818; width: 190px; height: 180px; right: 10px; top: 250px; transform: rotate(5deg); z-index: 3; }
  .sticker {
    position: absolute; z-index: 4; left: 160px; top: 232px;
    background: var(--accent); color: #fff; border-radius: 999px; padding: 9px 16px;
    font-weight: 800; font-size: 14px; transform: rotate(-10deg); box-shadow: var(--shadow);
  }

  /* ── Comment ça marche ── */
  .how { padding-top: 40px; padding-bottom: 72px; }
  .how h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(32px, 5vw, 46px); letter-spacing: -0.04em; line-height: 1; margin: 0 0 28px; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .step { background: var(--paper); border: 1.5px solid var(--line); border-radius: 26px; padding: 22px; }
  .num {
    width: 40px; height: 40px; border-radius: 13px; background: var(--ink); color: var(--cream);
    display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px;
    transform: rotate(-6deg);
  }
  .step:nth-child(2) .num { background: var(--accent); color: #fff; transform: rotate(5deg); }
  .step h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 18px 0 6px; }
  .step p { margin: 0; color: var(--muted); }

  .safety {
    margin-top: 18px; display: flex; align-items: center; gap: 14px;
    background: var(--ink); color: var(--cream); border-radius: 22px; padding: 18px 22px;
    transform: rotate(-0.5deg);
  }
  .safety svg { width: 26px; height: 26px; flex-shrink: 0; color: #F2A08D; }
  .safety p { margin: 0; font-weight: 600; }

  /* ── Pied de page ── */
  footer { border-top: 1.5px solid var(--line); }
  .foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 40px; font-size: 14px; color: var(--muted); }
  .foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .foot a { font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }

  /* ── Mobile ── */
  @media (max-width: 860px) {
    .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 44px; overflow-x: clip; }
    .collage { width: 470px; height: 470px; margin-left: 50%; margin-bottom: -70px; transform: translateX(-50%) scale(0.85); transform-origin: top center; }
    .steps { grid-template-columns: 1fr; }
  }
  @media (max-width: 420px) {
    .unit { min-width: 70px; }
    .unit b { font-size: 32px; }
    .collage { transform: translateX(-50%) scale(0.72); margin-bottom: -132px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dot { animation: none; }
    .btn { transition: none; }
  }