/* gymveo.com · the demo request pages (/demo/, /ar/demo/, /en/demo/) and the 404 page. Loaded after site.css.
   The demo form is a counter slip to fill in: printed labels, write-on lines, a pen ring around the chosen member
   count, a perforation above the button; a take-a-number ticket ("C'est à vous") is clipped to its corner.
   Once sent, the slip is reprinted as a receipt out of a slot and stamped. The 404 is a queue ticket torn in two.
   Motion: CSS keyframes only, under html.motion (set in the head when motion is allowed, never removed); every
   keyframe ends on the default state, so reduced motion, no JS and a slow load all show the finished page. */

/* ======================= PAGE ======================= */
.dm,.nf{position:relative;padding-block:clamp(36px,6vw,92px) clamp(72px,9vw,128px)}
.dm-reg{top:18px;inset-inline-end:18px}
.dm-h1{margin-top:16px;font-size:clamp(40px,5.2vw,74px);font-weight:700;letter-spacing:-.05em;line-height:.96;max-width:15ch;text-wrap:balance}
.dm-lead{margin-top:22px;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:44ch}
/* the hand-drawn cobalt underline under "votre propre salle" */
.mark{padding-bottom:.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C48 6 95 8.2 150 6.4S245 3.5 297 6.8' fill='none' stroke='%232F50FF' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M40 13.2c60-2.6 130-3.4 210-2.2' fill='none' stroke='%23FF5A3C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .22em}
[dir=rtl] .mark{background-position:100% 100%}
/* pen links used as buttons */
.linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;cursor:pointer;color:var(--ink)}

/* ======================= DEMO: grid ======================= */
.dm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);column-gap:clamp(40px,7vw,120px);align-items:start}
#req,#done{display:contents}
#req[hidden],#done[hidden]{display:none}
.dm-intro,.done-text{grid-column:1;grid-row:1}
.dm-desk,.slip-wrap{grid-column:2;grid-row:1 / span 2}
.dm-next{grid-column:1;grid-row:2}

/* ======================= DEMO: the counter slip (the form) ======================= */
.dm-desk{position:relative;padding-top:30px}
/* masks clip box-shadows, so the paper's shadow is a drop-shadow on the desk around it */
.dm-desk{filter:drop-shadow(0 20px 22px rgba(11,21,48,.13)) drop-shadow(0 0 1px rgba(11,21,48,.18))}
.fiche{position:relative;background:var(--sheet);color:var(--ink);padding:34px clamp(20px,3vw,40px) 28px;
  -webkit-mask:linear-gradient(#000 0 0) 0 8px/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 0, transparent 4.5px, #000 5px) 0 0/10px 9px repeat-x;
          mask:linear-gradient(#000 0 0) 0 8px/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 0, transparent 4.5px, #000 5px) 0 0/10px 9px repeat-x}
.fi-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-bottom:12px;padding-inline-end:124px;border-bottom:2px solid var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.fi-head span{font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:none;font-size:13.5px}
.fiche .two{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.fiche .field{padding-top:22px;min-width:0}
.fiche .field > label,.fiche legend{display:block;padding:0;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* the write-on line: an ink rule; a cobalt pen stroke is drawn over it while the field has focus */
.fiche .input{position:relative;display:flex;align-items:center;margin-top:2px;border-bottom:1.5px solid var(--ink);transition:background-color .25s}
.fiche .input::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:3px;border-radius:2px;background:var(--cobalt);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
[dir=rtl] .fiche .input::after{transform-origin:right}
.fiche .input.tel::after{transform-origin:left}
.fiche .input:focus-within{background:rgba(47,80,255,.05)}
.fiche .input:focus-within::after{transform:scaleX(1)}
.fiche input[type=text],.fiche input[type=tel]{flex:1;min-width:0;min-height:50px;padding:10px 4px 6px;border:0;border-radius:0;background:transparent;
  color:var(--ink);font:550 19px/1.2 var(--font);letter-spacing:-.01em;outline:none}
[dir=rtl] .fiche input[type=text]{font-family:'Readex Pro',Outfit,sans-serif;font-size:19px}
.fiche input::placeholder{color:#646A82;opacity:1;font-weight:400}
.fiche input:focus-visible{outline:none}
.fiche .pre{flex:none;align-self:stretch;display:flex;align-items:center;padding:6px 10px 0 2px;margin-inline-end:6px;border-inline-end:1.5px dotted var(--hair-2);
  font-size:17px;font-weight:650;color:var(--muted)}
.fiche input[type=tel]{font-feature-settings:"tnum" 1;letter-spacing:.02em}
.fiche small{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.4}
/* a field the reader has left wrong: the rule turns coral */
.fiche .input:has(input:user-invalid){border-bottom-color:var(--coral-ink);border-bottom-width:2px}

/* member count: printed options; the chosen one is circled by hand in cobalt */
.fiche .chips-set{border:0;margin:28px 0 0;padding:0;min-width:0}
.fiche .chips{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:12px}
.fiche .chip{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px;cursor:pointer;
  font-size:16px;font-weight:600;color:var(--ink-2);font-feature-settings:"tnum" 1;box-shadow:inset 0 0 0 1px var(--hair-2);
  transition:color .2s, box-shadow .2s, transform .12s}
.fiche .chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.fiche .chip:active{transform:translateY(1px)}
.fiche .chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.fiche .chip:has(input:focus-visible){outline:3px solid var(--cobalt);outline-offset:3px}
.fiche .chip input:checked + span{color:var(--ink)}
.fiche .chip:has(input:checked){box-shadow:none}
.ring{position:absolute;inset:-7px -9px -6px -8px;width:calc(100% + 17px);height:calc(100% + 13px);max-width:none;overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:var(--cobalt);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .1s}
.chip input:checked ~ .ring path{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--ease-io)}
.chip:nth-child(even) .ring{transform:rotate(-2deg) scaleX(-1)}
.chip:nth-child(odd) .ring{transform:rotate(1.5deg)}

/* the perforation above the button: a dashed tear line with a notch cut from each edge */
.fi-tear{position:relative;height:0;margin:30px calc(-1 * clamp(20px,3vw,40px)) 26px;border-top:2px dashed var(--hair-2)}
/* the notches are the inner halves of two paper-coloured discs, so nothing shows outside the slip */
.fi-tear::before,.fi-tear::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--paper)}
.fi-tear::before{left:-9px;clip-path:inset(0 0 0 50%)}.fi-tear::after{right:-9px;clip-path:inset(0 50% 0 0)}
.fi-send{width:100%;justify-content:space-between}
.fi-send .ink-pad svg{width:18px;height:18px}
.legal{margin-top:18px;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* the take-a-number ticket clipped to the slip's corner */
.qtk{position:absolute;z-index:2;top:0;inset-inline-end:clamp(10px,2.5vw,28px);width:112px;transform:rotate(5deg);transform-origin:50% 0}
[dir=rtl] .qtk{transform:rotate(-5deg)}
.qtk-paper{position:relative;display:grid;justify-items:center;gap:0;padding:14px 8px 12px;background:var(--white);color:var(--ink);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 6px,#000 6.5px) 0 0/51% 100% no-repeat, radial-gradient(circle at 100% 50%,transparent 6px,#000 6.5px) 100% 0/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,transparent 6px,#000 6.5px) 0 0/51% 100% no-repeat, radial-gradient(circle at 100% 50%,transparent 6px,#000 6.5px) 100% 0/51% 100% no-repeat}
.qtk-paper small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qtk-paper b{position:relative;z-index:0;font-size:50px;line-height:.95;font-weight:700;letter-spacing:-.06em;color:var(--cobalt);font-family:Outfit,sans-serif;font-feature-settings:"tnum" 1}
.qtk-paper b::before{content:attr(data-plate);position:absolute;inset:0;z-index:-1;color:var(--coral);transform:translate(2.5px,2.5px)}
.qtk-paper em{margin-top:6px;padding-top:6px;border-top:1.5px dashed var(--hair-2);font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.qtk .clip{position:absolute;z-index:3;top:-24px;inset-inline-end:12px;width:18px;height:44px;overflow:visible} /* grips the corner, clear of the N° label */
.qtk .clip path{fill:none;stroke:var(--cobalt-deep);stroke-width:2.6;stroke-linecap:round}

/* ======================= DEMO: what happens next ======================= */
.dm-next{margin-top:clamp(40px,5vw,64px);max-width:540px}
.dm-next h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.3;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.dm-next ol{list-style:none;margin:0;padding:0}
.dm-next li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-bottom:1px dashed var(--hair-2)}
.dm-next .n{position:relative;z-index:0;font-size:40px;line-height:.9;font-weight:700;letter-spacing:-.05em;color:var(--cobalt);font-family:Outfit,sans-serif;font-feature-settings:"tnum" 1}
.dm-next .n::before{content:attr(data-plate);position:absolute;inset:0;z-index:-1;color:var(--coral);transform:translate(2px,2px)}
[dir=rtl] .dm-next .n::before{transform:translate(-2px,2px)}
.dm-next h3{font-size:20px;font-weight:680;letter-spacing:-.025em;line-height:1.2}
.dm-next li p{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.dm-mail{margin-top:20px;font-size:15.5px;color:var(--ink-2)}
.dm-mail .pen{min-height:44px}

/* ======================= DEMO: sent (the receipt, reprinted and stamped) ======================= */
.done-text h1:focus{outline:none}
.done-text h1:focus-visible{outline:3px solid var(--cobalt);outline-offset:6px}
.dm-step{margin-top:18px;font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:48ch}
.dm-step .pen{min-height:0}
.bring{margin-top:26px;max-width:48ch;padding:18px 20px;background:var(--sheet);box-shadow:inset 3px 0 0 var(--coral), 0 0 0 1px var(--hair);transform:rotate(-.5deg)}
[dir=rtl] .bring{box-shadow:inset -3px 0 0 var(--coral), 0 0 0 1px var(--hair);transform:rotate(.5deg)}
.bring b{display:block;font-size:16px;font-weight:650}
.bring p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.dm-fix{margin-top:20px;font-size:15.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}

.slip-wrap{position:relative;width:min(100%,440px);justify-self:center;padding-top:6px}
.slot{position:relative;z-index:2;display:block;height:22px;margin-inline:-26px;border-radius:8px;background:var(--cobalt);
  background-image:radial-gradient(circle,rgba(255,255,255,.28) 1.1px,transparent 1.4px);background-size:5px 5px;box-shadow:0 5px 0 #15288f}
.slot::after{content:"";position:absolute;inset-inline:22px;bottom:4px;height:4px;border-radius:2px;background:var(--night)}
.slip-feed{position:relative;z-index:1;margin-top:-8px;clip-path:inset(0 -60px -80px -60px);filter:drop-shadow(0 18px 20px rgba(11,21,48,.14)) drop-shadow(0 0 1px rgba(11,21,48,.18))}
.st-slip{position:relative;background:var(--sheet);color:var(--ink);padding:24px 22px 18px;font-size:15px;line-height:1.35;transform:rotate(-.8deg);transform-origin:50% 0;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 100%, transparent 4.5px, #000 5px) 0 100%/10px 9px repeat-x;
          mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 100%, transparent 4.5px, #000 5px) 0 100%/10px 9px repeat-x}
.st-slip .h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1.5px dashed var(--hair-2);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.st-slip .h span:last-child{font-weight:600;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.st-slip .l{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px dotted var(--hair-2)}
.st-slip .l span{color:var(--muted);flex:none}
.st-slip .l b{font-weight:650;text-align:end;overflow-wrap:anywhere}
.sl-foot{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;min-height:96px;padding-top:16px}
.sl-foot small{font-size:12px;color:var(--muted);letter-spacing:.04em}
.barcode{display:block;width:96px;height:28px;opacity:.85;
  background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 3px,var(--ink) 3px 3.8px,transparent 3.8px 6.5px,var(--ink) 6.5px 9px,transparent 9px 10.4px)}
.st-slip .stamp{inset-inline-end:18px;bottom:22px;--rot:-10deg;padding:8px 14px 7px}
.st-slip .stamp b{font-size:30px}
[dir=rtl] .st-slip .stamp{--rot:8deg}
[dir=rtl] .st-slip .stamp b{font-size:26px}

/* ======================= 404: the torn queue ticket ======================= */
.nf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"main art" "more art";column-gap:clamp(40px,7vw,120px);align-items:start}
.nf-main{grid-area:main}
.nf-art{grid-area:art;padding-top:24px}
.nf-more{grid-area:more;margin-top:clamp(36px,4vw,56px);display:grid;gap:22px;max-width:560px}
.nf .dm-h1{max-width:12ch}
.nf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:32px}
.nf-biz{position:relative;padding:18px 20px 18px 22px;background:var(--sheet);box-shadow:0 0 0 1px var(--hair), 0 12px 22px -18px rgba(11,21,48,.45);transform:rotate(-.6deg);font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.nf-biz b{color:var(--ink)}
.nf-biz .pin{position:absolute;top:-7px;inset-inline-start:22px;width:14px;height:14px;border-radius:50%;background:var(--coral);box-shadow:inset -2px -2px 0 rgba(11,21,48,.2), 0 3px 4px rgba(11,21,48,.25)}
.nf-other{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.nf-other p{padding:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.nf-other p + p{padding-inline-start:20px;margin-inline-start:20px;border-inline-start:1px dashed var(--hair-2)}
.nf-other [lang=ar]{font-family:'Readex AR',var(--font);font-size:16.5px;line-height:1.7}
.nf-other b{display:block;color:var(--ink);font-weight:650}
.nf-other .pen{min-height:44px}

.tt{position:relative;width:min(100%,380px);margin-inline:auto}
.tt-half{filter:drop-shadow(0 18px 20px rgba(11,21,48,.16)) drop-shadow(0 0 1px rgba(11,21,48,.12))}
.tt-paper{position:relative;background:var(--sheet);color:var(--ink)}
.tt-a{transform:translate(-8px,-4px) rotate(-4deg);transform-origin:0 100%}
.tt-b{margin-top:-12px;transform:translate(10px,14px) rotate(3deg);transform-origin:100% 0}
.tt-a .tt-paper{padding:26px 24px 30px;
  -webkit-mask:linear-gradient(#000 0 0) 0 8px/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 0, transparent 4.5px, #000 5px) 0 0/10px 9px repeat-x;
          mask:linear-gradient(#000 0 0) 0 8px/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 0, transparent 4.5px, #000 5px) 0 0/10px 9px repeat-x;
  clip-path:polygon(0 0,100% 0,100.0% calc(100% - 4.8px),95.5% calc(100% - 3.5px),89.9% calc(100% - 7.9px),85.5% calc(100% - 3.1px),81.5% calc(100% - 9.0px),75.2% calc(100% - 0.2px),70.0% calc(100% - 6.9px),65.3% calc(100% - 0.6px),62.1% calc(100% - 10.1px),56.7% calc(100% - 1.7px),52.8% calc(100% - 2.4px),47.9% calc(100% - 3.9px),41.8% calc(100% - 4.5px),39.1% calc(100% - 2.9px),32.7% calc(100% - 11.5px),27.3% calc(100% - 2.1px),22.7% calc(100% - 7.9px),18.4% calc(100% - 1.0px),15.4% calc(100% - 9.4px),8.1% calc(100% - 3.2px),6.3% calc(100% - 4.6px),0.0% calc(100% - 1.8px))}
.tt-b .tt-paper{padding:26px 24px 20px;
  clip-path:polygon(0.0% 10.2px,6.3% 7.4px,8.1% 8.8px,15.4% 2.6px,18.4% 11.0px,22.7% 4.1px,27.3% 9.9px,32.7% 0.5px,39.1% 9.1px,41.8% 7.5px,47.9% 8.1px,52.8% 9.6px,56.7% 10.3px,62.1% 1.9px,65.3% 11.4px,70.0% 5.1px,75.2% 11.8px,81.5% 3.0px,85.5% 8.9px,89.9% 4.1px,95.5% 8.5px,100.0% 7.2px,100% 100%,0 100%);
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 100%, transparent 4.5px, #000 5px) 0 100%/10px 9px repeat-x;
          mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 5px 100%, transparent 4.5px, #000 5px) 0 100%/10px 9px repeat-x}
.tt-head{display:flex;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1.5px dashed var(--hair-2);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tt-head span{color:var(--muted)}
.tt-no{display:grid;justify-items:center;margin-top:14px}
.tt-no small{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tt-no b{position:relative;z-index:0;font-size:clamp(96px,11vw,136px);line-height:.9;font-weight:700;letter-spacing:-.07em;color:var(--cobalt);font-feature-settings:"tnum" 1}
.tt-no b::before{content:attr(data-plate);position:absolute;inset:0;z-index:-1;color:var(--coral);transform:translate(4px,4px)}
.tt-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px dotted var(--hair-2);font-size:15px}
.tt-row span{color:var(--muted);flex:none}
.tt-row b{font-weight:650;text-align:end;overflow-wrap:anywhere;min-width:0}
.tt .stamp{--c:var(--coral-ink);inset-inline-end:16px;bottom:30px;--rot:-9deg;padding:8px 13px 7px}
.tt .stamp b{font-size:27px}
.tt .stamp small{color:#C23A1F} /* 12px text: the deeper coral keeps 4.5:1 on the ticket */

/* ======================= MOTION (html.motion only; each keyframe ends on the default state) ======================= */
@keyframes dmFeed{from{clip-path:inset(0 -60px 100% -60px);transform:translateY(-14px)}to{clip-path:inset(-60px -60px -80px -60px);transform:none}}
@keyframes dmDrop{0%{opacity:0;transform:translateY(-26px) rotate(-10deg)}60%{opacity:1}100%{opacity:1}}
@keyframes dmMark{from{background-size:0% .22em}to{background-size:100% .22em}}
@keyframes dmPrint{from{transform:translateY(-100%)}to{transform:none}}
@keyframes dmStamp{0%{opacity:0;transform:rotate(var(--rot)) scale(1.9)}55%{opacity:1;transform:rotate(var(--rot)) scale(.94)}75%{transform:rotate(var(--rot)) scale(1.03)}100%{opacity:1;transform:rotate(var(--rot)) scale(1)}}
@keyframes dmJolt{0%,100%{transform:rotate(-.8deg)}40%{transform:rotate(-.8deg) translateY(3px)}}
@keyframes dmRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ttA{from{transform:none}to{transform:translate(-8px,-4px) rotate(-4deg)}}
@keyframes ttB{from{transform:none}to{transform:translate(10px,14px) rotate(3deg)}}

.motion .dm-intro > *,.motion .nf-main > *{animation:dmRise .7s var(--ease-out) both}
.motion .dm-intro > :nth-child(2),.motion .nf-main > :nth-child(2){animation-delay:.08s}
.motion .dm-intro > :nth-child(3),.motion .nf-main > :nth-child(3){animation-delay:.16s}
.motion .nf-main > :nth-child(4){animation-delay:.24s}
.motion .mark{animation:dmMark .6s var(--ease-io) .75s both}
/* the slip prints down from the top in steps, then the numbered ticket is clipped on */
.motion .fiche{animation:dmFeed .9s steps(12,end) .1s both}
.motion .qtk{animation:dmDrop .6s var(--ease-spring) .95s both}
.motion .dm-next{animation:dmRise .7s var(--ease-out) .35s both}
/* sent: the receipt feeds out of the slot, the stamp comes down, the receipt jolts under it */
.motion #done .st-slip{animation:dmPrint 1s steps(10,end) .15s both, dmJolt .3s ease-out 1.55s}
.motion #done .stamp{animation:dmStamp .5s var(--ease-out) 1.3s both}
.motion #done .done-text > *{animation:dmRise .6s var(--ease-out) both}
.motion #done .done-text > :nth-child(n+3){animation-delay:.12s}
/* 404: the ticket tears in two, then INTROUVABLE is stamped on the lower half */
.motion .tt-a{animation:ttA .7s var(--ease-out) .45s both}
.motion .tt-b{animation:ttB .7s var(--ease-out) .45s both}
.motion .tt .stamp{animation:dmStamp .5s var(--ease-out) 1.25s both}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1100px){
  .dm-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:48px}
  .nf-grid{grid-template-columns:minmax(0,1fr) minmax(0,380px);column-gap:48px}
}
@media (max-width:900px){
  .dm-grid{grid-template-columns:minmax(0,1fr)}
  .dm-intro,.done-text,.dm-desk,.slip-wrap,.dm-next{grid-column:1;grid-row:auto}
  .dm-desk{margin-top:26px}
  .slip-wrap{margin-top:40px}
  .dm-h1{max-width:15ch}
  .nf-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "art" "more"}
  .nf-art{margin-top:44px;padding-top:0}
}
@media (max-width:600px){
  .dm,.nf{padding-block:28px 72px}
  .dm-reg{display:none}
  .dm-h1{font-size:clamp(36px,10.4vw,48px)}
  .dm-lead{font-size:17.5px;margin-top:16px}
  .fiche{padding:30px 18px 22px}
  .fiche .two{grid-template-columns:minmax(0,1fr)}
  .fiche .field{padding-top:18px}
  .fiche .chips-set{padding-top:0;margin-top:26px}
  .fi-head{padding-inline-end:96px}
  .fi-tear{margin-inline:-18px}
  .qtk{width:92px;inset-inline-end:10px}
  .qtk-paper{padding:12px 6px 10px}
  .qtk-paper b{font-size:40px}
  .qtk-paper em{font-size:12px;letter-spacing:.03em}
  .fiche .chips{gap:8px}
  .fiche .chip{padding:0 14px;font-size:15.5px}
  .fi-send{min-height:58px;font-size:17px;padding-inline:20px 16px}
  .dm-next li{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .dm-next .n{font-size:34px}
  .slot{margin-inline:-6px}
  .st-slip{padding:22px 16px 16px}
  .nf-acts{gap:14px 24px}
  .nf-other{grid-template-columns:minmax(0,1fr)}
  .nf-other p + p{padding-inline-start:0;margin-inline-start:0;border-inline-start:0;margin-top:12px;border-top:1px dashed var(--hair-2)}
  .tt{width:min(100%,320px)}
  .tt .barcode{visibility:hidden}
  .tt-a .tt-paper,.tt-b .tt-paper{padding-inline:18px}
}

/* ======================= ARABIC ======================= */
[dir=rtl] .fi-head,[dir=rtl] .fiche .field > label,[dir=rtl] .fiche legend,[dir=rtl] .qtk-paper small,[dir=rtl] .qtk-paper em,
[dir=rtl] .dm-next h2,[dir=rtl] .st-slip .h{text-transform:none}
[dir=rtl] .fi-head{font-size:15px}
[dir=rtl] .fi-head span{font-size:14.5px}
[dir=rtl] .fiche .field > label,[dir=rtl] .fiche legend{font-size:14.5px;font-weight:600;color:var(--ink-2)}
[dir=rtl] .fiche .chip{font-size:16.5px}
[dir=rtl] .qtk-paper small{font-size:13px}
[dir=rtl] .qtk-paper em{font-size:14px}
[dir=rtl] .dm-h1{line-height:1.2;font-size:clamp(38px,4.8vw,68px);max-width:14ch}
[dir=rtl] .dm-lead{line-height:1.8}
[dir=rtl] .dm-next h2{font-size:15px}
[dir=rtl] .dm-next h3{font-size:20px;line-height:1.4}
[dir=rtl] .st-slip .h{font-size:14px}
[dir=rtl] .fi-send{font-size:18px}
[dir=rtl] .fiche .pre{padding:6px 10px 0 2px}
@media (max-width:600px){
  [dir=rtl] .dm-h1{font-size:clamp(34px,9.6vw,44px)}
  [dir=rtl] .fi-head{padding-inline-end:100px}
}