@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
:root{
    --fond:#14081c; --fond-bord:#07050b; --texte:#ffffff; --gris:#c8c8cd; --gris-2:#8d8a96;
    --orange:#f97316; --violet:#6b21a8; --ligne:rgba(255,255,255,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:"Bricolage Grotesque",system-ui,sans-serif;color:var(--texte);min-height:100vh;
    background:radial-gradient(120% 80% at 50% 0%, var(--fond) 0%, var(--fond-bord) 70%) fixed, var(--fond-bord);
    line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;
  }
  em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400}
  .o{color:var(--orange)}
  .wrap{max-width:960px;margin:0 auto;padding:0 24px}
  header{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
  .marque{font-weight:800;font-size:20px;letter-spacing:-.02em}
  .marque span{color:var(--gris-2);font-weight:400;margin-left:8px;font-size:15px}

  .accueil{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 0 80px}
  .orbe{
    width:96px;aspect-ratio:1;border-radius:50%;margin-bottom:28px;
    background:url(/assets/boussole.svg) center/contain no-repeat;
    box-shadow:0 0 60px rgba(107,33,168,.6), 0 0 120px rgba(249,115,22,.2);
  }
  h1{font-weight:800;font-size:clamp(38px,5.6vw,64px);line-height:1.04;letter-spacing:-.035em}
  .chapo{color:var(--gris);font-size:19px;max-width:44ch;margin:18px auto 44px}

  /* carte d'embarquement */
  .carte{
    width:100%;max-width:760px;display:grid;grid-template-columns:1fr 200px;text-align:left;
    border-radius:22px;position:relative;
    background:linear-gradient(160deg,#21132d 0%,#150b1d 60%,#120919 100%);
    box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07);
    animation:arrivee .9s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes arrivee{from{opacity:0;transform:translateY(28px) scale(.98)}}
  .carte::before{ /* liseré lumineux en haut */
    content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(249,115,22,.7),rgba(107,33,168,.8),transparent)
  }
  .talon-sep{position:absolute;top:18px;bottom:18px;right:200px;border-left:2px dashed rgba(255,255,255,.14)}
  .encoche{position:absolute;right:189px;width:22px;height:22px;border-radius:50%;background:var(--fond-bord)}
  .encoche.h{top:-11px}.encoche.b{bottom:-11px}
  .principal{padding:30px 34px 28px}
  .ligne-haut{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:26px}
  .ligne-haut .titre{font-weight:600;font-size:14px;color:var(--gris)}
  .ligne-haut .titre b{color:var(--texte);font-weight:800;font-size:18px;letter-spacing:-.01em;margin-right:8px}
  .champs{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:22px 20px}
  .champ .lib{display:block;font-size:12px;color:var(--gris-2);margin-bottom:4px}
  .champ .val{display:block;font-weight:600;font-size:18px;letter-spacing:-.01em}
  .champ.large{grid-column:span 2}
  .champ .val.grand{font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.03em}
  .trajet{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--ligne)}
  .trajet .port{font-weight:800;font-size:22px;letter-spacing:-.02em}
  .trajet .port small{display:block;font-weight:400;font-size:12px;color:var(--gris-2);letter-spacing:0}
  .trajet .route{flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px);position:relative}
  .trajet .route i{position:absolute;left:38%;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(249,115,22,.8)}

  .talon{padding:30px 22px 26px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:18px}
  .talon .lib{font-size:12px;color:var(--gris-2);text-align:center}
  .talon .place{font-weight:800;font-size:56px;line-height:1;letter-spacing:-.04em;text-align:center}
  .talon .place small{display:block;font-size:13px;font-weight:400;color:var(--gris-2);letter-spacing:0;margin-top:6px}
  .tampon{
    width:118px;height:118px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    border:2px solid rgba(249,115,22,.85);color:var(--orange);font-weight:800;font-size:13px;line-height:1.15;
    box-shadow:inset 0 0 0 5px rgba(249,115,22,.08);transform:rotate(-12deg);
    animation:tampon .5s cubic-bezier(.2,1.6,.4,1) .75s both;
  }
  .tampon span{display:block;font-weight:400;font-size:11px;color:rgba(249,115,22,.85);margin-top:3px}
  @keyframes tampon{from{opacity:0;transform:rotate(-12deg) scale(1.8)}}

  /* prochaine étape */
  .etape{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:14px}
  .etape .lib{color:var(--gris-2);font-size:14px}
  .etape h2{font-weight:800;font-size:clamp(26px,3.4vw,34px);letter-spacing:-.025em;line-height:1.15}
  .etape p{color:var(--gris);max-width:46ch}
  .bouton{
    display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#1a0a02;font-weight:600;font-size:17px;
    padding:15px 28px;border-radius:999px;text-decoration:none;margin-top:8px;transition:transform .15s, box-shadow .15s
  }
  .bouton:hover{color:#fff;font-weight:800;transform:translateY(-1px);box-shadow:0 8px 30px rgba(249,115,22,.45)}
  .bouton:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .bouton svg{width:18px;height:18px}
  .bouton.secondaire{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
  .bouton.secondaire:hover{background:var(--orange);border-color:var(--orange)}
  .confirmation{margin-top:46px;color:var(--gris-2);font-size:14px;max-width:52ch}

  @media (prefers-reduced-motion:reduce){.carte,.tampon{animation:none}}
  @media (max-width:720px){
    body{font-size:16px}
    .accueil{padding:20px 0 60px}
    .carte{grid-template-columns:1fr}
    .talon-sep,.encoche{display:none}
    .principal{padding:24px 22px 26px}
    .champs{grid-template-columns:1fr 1fr;gap:18px 16px}
    .champ.acces{grid-column:span 2}
    .champ.large{grid-column:span 2}
    .talon{flex-direction:row;padding:24px 26px;position:relative;border-top:2px dashed rgba(255,255,255,.14);margin:0 14px;padding-left:12px;padding-right:12px}
    .talon::before,.talon::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--fond-bord)}
    .talon::before{left:-25px}.talon::after{right:-25px}
    .talon .place{font-size:48px}
    .tampon{width:104px;height:104px}
  }

/* --- pilote : attente et contenu dynamique --- */
[hidden]{display:none !important}
.marque{text-decoration:none;color:inherit}
.attente{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:80px 0}
.attente .orbe{animation:pouls-orbe 1.6s ease-in-out infinite}
@keyframes pouls-orbe{50%{transform:scale(1.12);box-shadow:0 0 90px rgba(107,33,168,.8),0 0 160px rgba(249,115,22,.35)}}
.attente p{color:var(--gris);max-width:40ch}
.attente h1{font-size:clamp(28px,4vw,40px)}
@media (prefers-reduced-motion:reduce){.attente .orbe{animation:none}}