/* Page « Rejoins l'équipage » : création du compte. Une seule scène plein écran (la cabine éclairée à la bougie, sombre et BD) avec le contrat posé par-dessus ;
   dans l'esprit de la page d'entrée. Toutes les classes, animations et variables commencent par « sg ». */
.sg { --sg-px:0; --sg-py:0; --sg-display:'Anton','Impact','Arial Narrow',sans-serif; --sg-body:'Cabin',system-ui,-apple-system,'Segoe UI',sans-serif;
  position:fixed; inset:0; z-index:20; overflow:hidden; background:#060304; color:#f1e6c8; font-family:var(--sg-body); }
.sg, .sg *, .sg *::before, .sg *::after { box-sizing:border-box; }
html.sg-lock, html.sg-lock body { overflow:hidden; }

/* la scène : deux compositions de la même cabine, l'une large (ordinateur), l'autre haute (téléphone en portrait) */
.sg-scene { position:absolute; display:block; transform:scale(1.04) translate(calc(var(--sg-px) * -10px), calc(var(--sg-py) * -6px)); }
.sg-wide { inset:0; width:100%; height:100%; }
.sg-tall { display:none; left:0; top:0; width:100%; height:42vh; -webkit-mask-image:linear-gradient(#000 74%, transparent); mask-image:linear-gradient(#000 74%, transparent); }
.sg-shade { position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, rgba(2,3,10,0) 44%, rgba(2,4,14,.6) 68%, rgba(2,4,14,.86) 100%), radial-gradient(ellipse at 34% 62%, transparent 40%, rgba(0,0,0,.66) 100%); }
.sg-fx { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
/* la scène */
.sg-ember { position:absolute; bottom:-10px; width:var(--sg-s); height:var(--sg-s); border-radius:50%; background:radial-gradient(circle, #fff1b8, #ff8a1f 55%, transparent 72%); opacity:0; animation:sg-rise var(--sg-d) linear infinite; animation-delay:var(--sg-dl); }
@keyframes sg-rise { 0% { transform:translate(0,0) scale(1); opacity:0; } 8% { opacity:.95; } 100% { transform:translate(var(--sg-dx), -92vh) scale(.25); opacity:0; } }
.sg-glow { transform-box:fill-box; transform-origin:center; animation:sg-flick 2.7s infinite; }
.sg-hot .sg-glow, .sg-typing .sg-glow { animation-duration:1.5s; }
@keyframes sg-flick { 0%,100% { opacity:.85; transform:scale(1); } 18% { opacity:.55; transform:scale(.95); } 40% { opacity:.95; transform:scale(1.05); } 62% { opacity:.62; transform:scale(.97); } 80% { opacity:.9; transform:scale(1.02); } }
.sg-flame { transform-box:fill-box; transform-origin:50% 100%; animation:sg-flame .9s ease-in-out infinite alternate; }
@keyframes sg-flame { from { transform:scale(1,1) skewX(-3deg); } to { transform:scale(.92,1.12) skewX(3deg); } }
.sg-waves { animation:sg-sea 7s ease-in-out infinite alternate; }
@keyframes sg-sea { from { transform:translateX(-8px); } to { transform:translateX(8px); } }
.sg-quill { transform-origin:640px 452px; animation:sg-sway 4.5s ease-in-out infinite; }
@keyframes sg-sway { 0%,100% { transform:rotate(-1.5deg); } 50% { transform:rotate(1.5deg); } }
.sg-typing .sg-quill { animation:sg-write .5s ease-in-out infinite; }
@keyframes sg-write { 0%,100% { transform:rotate(-9deg) translate(-4px,2px); } 50% { transform:rotate(-2deg) translate(-12px,-3px); } }
.sg-page { transform-box:fill-box; transform-origin:0% 50%; animation:sg-breathe 6s ease-in-out infinite; }
@keyframes sg-breathe { 0%,100% { transform:skewY(0); } 50% { transform:skewY(-.8deg); } }
.sg-glint { transform-box:fill-box; transform-origin:center; animation:sg-glint 3.4s infinite; } .sg-g2 { animation-delay:-1.1s; } .sg-g3 { animation-delay:-2.2s; }
@keyframes sg-glint { 0%,70%,100% { opacity:0; transform:scale(.3) rotate(0); } 80% { opacity:1; transform:scale(1) rotate(45deg); } }
.sg-seal { transform-box:fill-box; transform-origin:center; transition:transform .35s cubic-bezier(.3,1.6,.5,1), filter .35s; filter:drop-shadow(0 0 0 rgba(255,80,40,0)); }
.sg-hot .sg-seal { transform:scale(1.18) rotate(-8deg); filter:drop-shadow(0 0 9px rgba(255,90,40,.9)); }
.sg-coins g { transition:transform .45s cubic-bezier(.3,1.6,.5,1); } .sg-hot .sg-coins g { transform:translateY(-6px); } .sg-hot .sg-coins g:nth-child(2) { transform:translateY(-10px); }
.sg-ink { stroke-dasharray:140; stroke-dashoffset:0; }

/* le contrat */
.sg-card { position:absolute; z-index:7; right:5vw; top:50%; width:min(34vw, 480px); max-height:92vh; overflow:auto; padding:clamp(18px, 2.4vw, 34px); transform:translateY(-50%) rotate(.6deg);
  background:rgba(6,8,16,.84); border:3px solid #000; box-shadow:8px 8px 0 #000, inset 0 0 0 2px rgba(255,179,71,.32); border-radius:6px; animation:sg-in .7s cubic-bezier(.2,1.2,.3,1) both; backdrop-filter:blur(3px); }
@keyframes sg-in { from { opacity:0; transform:translateY(-46%) rotate(-3deg); } }
.sg-kicker { margin:0 0 clamp(18px, 2.6vw, 34px); font:700 clamp(11px, 1vw, 13px)/1.2 var(--sg-body); letter-spacing:.22em; text-transform:uppercase; color:#cdb98d; text-shadow:0 2px 0 #000; }
.sg-title { margin:0 0 .35em; padding-top:.14em; font:400 clamp(34px, 4.6vw, 70px)/1.02 var(--sg-display); text-transform:uppercase; color:#ffcf6a; transform:skewX(-5deg) rotate(-1.5deg); transform-origin:left bottom;
  paint-order:stroke fill; -webkit-text-stroke:clamp(3px, .4vw, 6px) #000; text-shadow:.045em .05em 0 #7a1b12, 0 0 .5em rgba(255,140,40,.45); }
.sg-lead { margin:0 0 .7em; font-size:clamp(14px, 1.2vw, 17px); line-height:1.4; color:#f1e6c8; }
.sg-lead b { color:#fff3d6; }
.sg-bonus { display:inline-flex; align-items:center; gap:.55em; margin:.2em 0 1.1em; padding:.3em .9em .3em .4em; font:700 clamp(12px, 1.05vw, 15px) var(--sg-body); letter-spacing:.04em; color:#ffe6a8; background:#0a0a0f; border:2px solid #ffb347; border-radius:999px; box-shadow:3px 3px 0 #000; }
.sg-bonus i { display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; background:#e3b94f; border:2px solid #000; font-style:normal; color:#7a5a12; animation:sg-coin 2.6s ease-in-out infinite; }
@keyframes sg-coin { 0%,100% { transform:rotateY(0); } 50% { transform:rotateY(180deg); } }
.sg-field { display:block; margin:0 0 .4em; font:700 clamp(12px, 1vw, 14px) var(--sg-body); letter-spacing:.14em; text-transform:uppercase; color:#cdb98d; }
.sg-input { display:block; width:100%; margin-top:.4em; padding:.55em .7em; font:400 clamp(20px, 2vw, 28px) var(--sg-display); letter-spacing:.06em; color:#fff3d6; background:#0b0b12; border:3px solid #000; box-shadow:inset 0 0 0 2px #5a4a30; border-radius:3px; outline:none; transition:box-shadow .2s ease, transform .2s ease; }
.sg-input:focus { box-shadow:inset 0 0 0 2px #ffb347, 0 0 14px rgba(255,179,71,.45); transform:translateY(-1px); }
.sg-input::placeholder { color:#6b6250; }
.sg-hint { margin:.5em 0 0; font-size:clamp(12px, 1vw, 14px); color:#a89a78; }
.sg-error { margin:.7em 0 0; padding:.5em .7em; font-weight:700; color:#fff; background:#a8301f; border:2px solid #000; box-shadow:3px 3px 0 #000; border-radius:3px; }
.sg-error[hidden] { display:none; }
.sg-create { display:flex; align-items:center; justify-content:center; gap:.7em; width:100%; margin-top:1.2em; padding:.6em 1em; font:400 clamp(20px, 2.1vw, 30px) var(--sg-display); letter-spacing:.07em; text-transform:uppercase; color:#0a0608; background:#ffb347; border:3px solid #000; box-shadow:5px 5px 0 #000; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s; }
.sg-create svg { width:1.5em; height:1.5em; flex:none; transition:transform .35s cubic-bezier(.3,1.6,.5,1); }
.sg-create:hover, .sg-create:focus-visible { transform:translate(-3px,-3px) rotate(-.6deg); box-shadow:8px 8px 0 #000; background:#ffc766; outline:none; }
.sg-create:hover svg, .sg-create:focus-visible svg { transform:scale(1.3) rotate(-14deg); }
.sg-create:active { transform:translate(3px,3px); box-shadow:2px 2px 0 #000; }
.sg-create[disabled] { opacity:.7; cursor:progress; }
.sg-back { display:inline-block; margin-top:1em; padding:.35em .2em; font:700 clamp(13px, 1.1vw, 16px) var(--sg-body); color:#c9d6e2; background:none; border:0; border-bottom:2px dashed rgba(201,214,226,.5); cursor:pointer; }
.sg-back:hover, .sg-back:focus-visible { color:#fff; border-bottom-color:#7fe3ff; outline:none; }
.sg-music { position:fixed; z-index:9; top:1.8vh; left:2vw; width:38px; height:38px; display:grid; place-items:center; padding:0; font:700 20px/1 var(--sg-body); color:#ffd993; background:#0b0b12dd; border:2px solid #000; box-shadow:3px 3px 0 #000; border-radius:50%; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.sg-music:hover, .sg-music:focus-visible { transform:translate(-2px,-2px); box-shadow:5px 5px 0 #000; outline:none; }
.sg-music[aria-pressed="false"] { color:#7d7a72; }
.sg-music::after { content:""; position:absolute; width:26px; height:3px; background:#c8402f; border:1px solid #000; border-radius:2px; transform:rotate(-45deg); opacity:0; transition:opacity .2s; }
.sg-music[aria-pressed="false"]::after { opacity:1; }

/* téléphone (portrait) : la cabine en haut, qui se fond dans la nuit, et le contrat en dessous */
@media (max-aspect-ratio: 4/5) {
  .sg-wide { display:none; } .sg-tall { display:block; }
  .sg-shade { background:linear-gradient(180deg, rgba(2,3,10,0) 22%, rgba(2,4,14,.86) 44%, rgba(2,4,14,.96) 100%); }
  .sg-card { right:auto; left:50%; top:auto; bottom:9vh; width:min(92vw, 460px); max-height:56vh; transform:translateX(-50%) rotate(0); animation:none; padding:14px 16px 16px; }
  .sg-title { font-size:clamp(28px, 9vw, 44px); } .sg-kicker { margin-bottom:10px; } .sg-lead { margin-bottom:.4em; } .sg-bonus { margin-bottom:.5em; } .sg-hint { display:none; }
  .sg-music { top:1.2vh; left:3vw; width:34px; height:34px; font-size:18px; }
}
html.no-anim .sg *, html.no-anim .sg *::before, html.no-anim .sg *::after { animation:none !important; }
.sg-still *, .sg-still *::before, .sg-still *::after { animation:none !important; transition-duration:.01ms !important; }
.sg-still .sg-ember { display:none; }
@media (prefers-reduced-motion: reduce) { .sg *, .sg *::before, .sg *::after { animation:none !important; transition-duration:.01ms !important; } .sg-ember { display:none; } }