/* Modele BILLET : carte d'embarquement, plan de vol, courrier par avion. */
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2")}

.lay-billet{--navy:#14213D;--navy2:#1d2f55;--paper:#F7F1E3;--ink:#1B2A4A;--red:#C8432F;--blue:#2F5D9B;--gold:#D9B26A;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;--mono:"Space Mono",ui-monospace,monospace;
  background:var(--navy);color:var(--paper);font-family:"Hanken Grotesk",system-ui,sans-serif;
  background-image:radial-gradient(circle at 20% 10%,rgba(217,178,106,.12),transparent 40%),radial-gradient(circle at 90% 60%,rgba(47,93,155,.35),transparent 45%)}
.lay-billet .k{font-family:var(--mono);color:var(--gold);margin-bottom:16px}
.lay-billet .muted{color:inherit}

/* porte : carte d'embarquement */
.lay-billet .gate{background:var(--navy);padding:20px}
.lay-billet .g-card{width:100%;max-width:420px;background:var(--paper);color:var(--ink);border-radius:18px;padding:32px 26px;text-align:center;position:relative;transition:transform .9s cubic-bezier(.6,0,.3,1),opacity .9s;
  -webkit-mask:radial-gradient(circle 12px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 12px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
.lay-billet .g-card::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,var(--paper) 12px 20px,var(--blue) 20px 32px,var(--paper) 32px 40px)}
.lay-billet .g-k{font-family:var(--mono);font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--red);margin-top:6px}
.lay-billet .g-names{font-family:var(--cond);font-size:clamp(40px,12vw,56px);line-height:1.05;text-transform:uppercase;margin:16px 0;display:flex;flex-wrap:wrap;gap:0 12px;align-items:center;justify-content:center}
.lay-billet .g-names .ic{color:var(--red);transform:rotate(90deg);width:.7em;height:.7em}
.lay-billet .g-for{font-size:15px;margin-bottom:24px;opacity:.85}
.lay-billet .b-btn{display:inline-block;font:700 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--red)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:15px 30px;cursor:pointer;text-decoration:none!important;transition:transform .2s,box-shadow .2s}
.lay-billet .b-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,67,47,.4)}
.lay-billet .b-btn-sm{padding:11px 20px;font-size:12px}
.lay-billet .gate.is-open .g-card{transform:translateY(-120vh) rotate(-4deg);opacity:0}

/* hero : grande carte d'embarquement */
.lay-billet .hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:56px 16px 40px}
.lay-billet .hero-path{position:absolute;left:0;right:0;top:6%;width:100%;height:150px;color:var(--gold);opacity:.55}
.lay-billet .pass{position:relative;width:100%;max-width:880px;display:grid;grid-template-columns:1fr 230px;background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,.45);overflow:hidden}
.lay-billet .pass::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--paper) 14px 22px,var(--blue) 22px 36px,var(--paper) 36px 44px)}
.lay-billet .pass-main{padding:42px 34px 30px}
.lay-billet .pass-top{display:flex;justify-content:space-between;gap:12px;font:12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.lay-billet .pass-intro{margin-top:18px;font-size:15px;opacity:.8}
.lay-billet .pass-names{font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:clamp(44px,9vw,84px);line-height:1;margin:6px 0 22px;display:flex;flex-wrap:wrap;gap:0 16px;align-items:center}
.lay-billet .pass-names .ic{color:var(--red);transform:rotate(90deg);width:.55em;height:.55em}
.lay-billet .pass-f{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;padding-top:20px;border-top:2px dashed rgba(27,42,74,.25)}
.lay-billet .pass-f .wide{grid-column:1/-1}
.lay-billet .pass-f dt{font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.lay-billet .pass-f dd{font-family:var(--cond);font-size:26px;text-transform:uppercase;line-height:1.15;margin-top:2px}
.lay-billet .pass-stub{position:relative;padding:42px 24px 28px;background:#efe7d3;display:flex;flex-direction:column;gap:16px;border-left:2px dashed rgba(27,42,74,.35)}
.lay-billet .pass-stub::before,.lay-billet .pass-stub::after{content:"";position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:var(--navy)}
.lay-billet .pass-stub::before{top:-12px}
.lay-billet .pass-stub::after{bottom:-12px}
.lay-billet .stub-r span{display:block;font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.lay-billet .stub-r b{font-family:var(--cond);font-weight:600;font-size:24px;text-transform:uppercase;line-height:1.1}
.lay-billet .barcode{width:100%;height:46px;fill:var(--ink);margin-top:auto}
.lay-billet .pass-stub .b-btn{text-align:center}
@media (max-width:760px){
  .lay-billet .pass{grid-template-columns:1fr}
  .lay-billet .pass-stub{border-left:0;border-top:2px dashed rgba(27,42,74,.35);flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:14px 24px}
  .lay-billet .pass-stub::before{top:-12px;left:-12px}
  .lay-billet .pass-stub::after{top:-12px;left:auto;right:-12px;bottom:auto}
  .lay-billet .barcode{flex-basis:100%;order:5;height:40px}
}

/* sections */
.lay-billet .sec{max-width:760px;margin:0 auto;padding:44px 20px}
.lay-billet .mail{background:var(--paper);color:var(--ink);padding:34px 28px;border-radius:6px;position:relative;border:12px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--paper) 14px 22px,var(--blue) 22px 36px,var(--paper) 36px 44px) 12;text-align:center}
.lay-billet .mail .k{color:var(--red)}
.lay-billet .mail-t{font-size:clamp(18px,3.4vw,22px);line-height:1.6}

/* compte a rebours : tuiles a volets */
.lay-billet .flip{max-width:560px;margin:0 auto;gap:12px}
.lay-billet .flip>div{background:linear-gradient(#0d1730 49%,#0a1226 50%);border-radius:10px;padding:18px 4px 12px;position:relative;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.lay-billet .flip>div::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--navy)}
.lay-billet .flip b{font:700 clamp(28px,8vw,52px)/1 var(--mono);color:var(--gold)}
.lay-billet .flip span{font:11px var(--mono);letter-spacing:.15em;text-transform:uppercase;margin-top:10px;opacity:.8}

/* plan de vol */
.lay-billet .legs{position:relative;display:grid;gap:22px;padding-left:0}
.lay-billet .leg{display:grid;grid-template-columns:76px 1fr;background:var(--paper);color:var(--ink);border-radius:14px;overflow:hidden;position:relative;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.lay-billet .leg+.leg::before{content:"";position:absolute;left:38px;top:-22px;height:22px;border-left:2px dotted var(--gold)}
.lay-billet .leg-n{background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 0;position:relative;border-right:2px dashed var(--paper)}
.lay-billet .leg-n span{font:10px var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.lay-billet .leg-n b{font:600 34px var(--cond)}
.lay-billet .leg-b{padding:18px 20px 18px}
.lay-billet .leg-t{font:700 14px var(--mono);color:var(--red);letter-spacing:.05em}
.lay-billet .leg-b h3{font:600 30px/1.1 var(--cond);text-transform:uppercase;margin:4px 0 6px}
.lay-billet .leg-p{font-size:15px;opacity:.85}
.lay-billet .leg-d{margin-top:12px;font-size:14px}
.lay-billet .leg-d>span{display:block;font:11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.lay-billet p.leg-d>span{display:inline;margin:0 6px 0 0}
.lay-billet .leg-m{display:inline-flex;gap:8px;align-items:center;margin-top:14px;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:9px 16px;text-decoration:none}
.lay-billet .leg-m:hover{background:var(--ink);color:var(--paper)}
.lay-billet .dressbox{background:var(--paper);color:var(--ink);border-radius:14px;padding:22px;text-align:center}
.lay-billet .dressbox .sw{justify-content:center}

/* souvenirs : polaroids */
.lay-billet .polaroid{gap:18px}
.lay-billet .polaroid figure{background:#fff;padding:10px 10px 34px;box-shadow:0 12px 26px rgba(0,0,0,.4);transform:rotate(-2deg)}
.lay-billet .polaroid figure:nth-child(even){transform:rotate(2.2deg)}
.lay-billet .polaroid img{aspect-ratio:1/1}

/* enregistrement + pass */
.lay-billet .checkin,.lay-billet .ticket{background:var(--paper);color:var(--ink);border-radius:18px;padding:34px 26px;position:relative;overflow:hidden}
.lay-billet .checkin .k,.lay-billet .ticket .k{color:var(--red)}
.lay-billet .checkin h2{font:600 40px/1.05 var(--cond);text-transform:uppercase;margin-bottom:6px}
.lay-billet .checkin .rf{margin-top:20px}
.lay-billet .rf-choice span{border-color:var(--ink);font-weight:600}
.lay-billet .rf-choice input:checked+span,.lay-billet .drink input:checked+span{background:var(--ink);color:var(--paper)}
.lay-billet .rf-field textarea{border-color:rgba(27,42,74,.4)}
.lay-billet .rf-btn{background:var(--red);color:#fff;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:13px;border-radius:999px}
.lay-billet .form-msg.err{color:#b3261e}
.lay-billet .ticket{border:2px dashed rgba(27,42,74,.3)}
.lay-billet .ticket .pi-name{font:600 34px/1.05 var(--cond);text-transform:uppercase}
.lay-billet .ticket .pi-qr{border:2px solid var(--ink)}
.lay-billet .stamp{position:absolute;left:12px;bottom:10px;width:92px;color:var(--red);opacity:.3;transform:rotate(-14deg);font-family:var(--mono);z-index:0;pointer-events:none}
.lay-billet .ticket .k,.lay-billet .ticket .pi,.lay-billet .ticket .pi-hint,.lay-billet .ticket .pi-cal{position:relative;z-index:1}
.lay-billet .foot{color:rgba(247,241,227,.7)}
@media (max-width:600px){.lay-billet .stamp{width:72px;left:6px;bottom:6px}.lay-billet .pass-main{padding:40px 22px 24px}.lay-billet .leg{grid-template-columns:62px 1fr}.lay-billet .leg+.leg::before{left:31px}}

/* musique */
.lay-billet .mus{background:var(--gold);color:var(--navy);box-shadow:0 6px 16px rgba(0,0,0,.4)}