/* ==========================================================================
   JEUZ'ON — site vitrine
   Même monde que le jeu : nuit, or, cyan, équerres lumineuses, trame de
   perspective qui dérive. Les personnages sont dessinés par le moteur du jeu.
   ========================================================================== */
:root{
  --nuit:#07090F; --nuit-2:#0E121B; --nuit-3:#151B27;
  --trait:rgba(255,255,255,.11); --trait-2:rgba(255,255,255,.22);
  --encre:#EEF2F8; --encre-2:#A2AEC4; --encre-3:#6B7789;
  --or:#E2B24A; --or-clair:#F5D98A; --or-doux:rgba(226,178,74,.14);
  --orange:#E8720C; --cyan:#3FE0FF; --vert:#3DDC84; --corail:#FF6A4D; --violet:#A78BFA;
  --l-titre:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --l-texte:"Manrope",system-ui,-apple-system,sans-serif;
  --l-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sortie:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:80px }
body{ margin:0; background:var(--nuit); color:var(--encre); font-family:var(--l-texte); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden }
img{ max-width:100%; display:block }
a{ color:var(--or) }
.cadre{ width:min(1200px, 100% - 40px); margin:0 auto }
@media (max-width:640px){ .cadre{ width:min(1200px, 100% - 32px) } }

/* --- décor ---------------------------------------------------------------- */
.decor{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.decor::before{ content:''; position:absolute; inset:-20% -20% -40% -20%;
  background:linear-gradient(var(--trait) 1px, transparent 1px) 0 0/100% 56px, linear-gradient(90deg, var(--trait) 1px, transparent 1px) 0 0/56px 100%;
  opacity:.18; transform:perspective(700px) rotateX(58deg); transform-origin:50% 0; animation:derive 22s linear infinite }
.decor::after{ content:''; position:absolute; inset:0; background:radial-gradient(70% 45% at 50% -5%, var(--or-doux), transparent 60%), radial-gradient(60% 50% at 50% 110%, rgba(63,224,255,.07), transparent 60%) }
@keyframes derive{ to{ background-position:0 56px, 56px 0 } }
.lueur{ position:fixed; z-index:0; border-radius:50%; filter:blur(90px); pointer-events:none }
.lueur-a{ width:60vw; height:60vw; left:-20vw; top:-25vw; background:var(--or); opacity:.12 }
.lueur-b{ width:50vw; height:50vw; right:-20vw; bottom:-25vw; background:var(--cyan); opacity:.08 }
#etoiles{ position:fixed; inset:0; z-index:0; pointer-events:none; width:100%; height:100% }
main, .nav, .pied, .bandeau{ position:relative; z-index:1 }

/* --- navigation ----------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; padding:12px 22px;
  background:rgba(7,9,15,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--trait) }
.nav-logo img{ height:46px; width:auto; filter:drop-shadow(0 0 14px rgba(226,178,74,.35)) }
@media (max-width:640px){ .nav-logo img{ height:28px } }
.nav-actions{ display:flex; gap:8px; margin-left:auto; align-items:center }
.nav-actions .btn{ white-space:nowrap } .nav-actions .court{ display:none }
@media (max-width:640px){ .nav{ padding:10px 14px; gap:10px } .nav-actions{ gap:6px } .nav-actions .btn{ padding:8px 11px; font-size:.8rem } .nav-actions .long{ display:none } .nav-actions .court{ display:inline } }
.nav-liens{ display:flex; gap:4px; margin-left:auto; align-items:center }
.nav-liens a{ color:var(--encre-2); text-decoration:none; font-size:.9rem; font-weight:600; padding:8px 12px; border-radius:999px; transition:color .2s, background .2s }
.nav-liens a:hover{ color:var(--encre); background:rgba(255,255,255,.06) }
.nav-liens .nav-app{ color:var(--or) }
.nav-burger{ display:none; margin-left:auto; width:42px; height:42px; border-radius:12px; border:1px solid var(--trait-2); background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px }
.nav-burger i{ width:18px; height:2px; background:var(--encre); border-radius:2px; transition:transform .25s, opacity .25s }
.nav-burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.nav-burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media (max-width:900px){
  .nav-burger{ display:flex }
  .btn--nav{ margin-left:auto; padding:9px 16px; font-size:.86rem; white-space:nowrap; flex-shrink:0 }
  .nav-logo{ min-width:0; flex-shrink:1 } .nav-logo img{ max-width:100%; object-fit:contain }
  .nav-burger{ margin-left:0 }
  .nav-liens{ position:fixed; left:0; right:0; top:63px; flex-direction:column; align-items:stretch; padding:12px 18px 18px; gap:2px;
    background:rgba(7,9,15,.96); border-bottom:1px solid var(--trait); transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .25s var(--sortie) }
  .nav-liens.ouvert{ transform:none; opacity:1; pointer-events:auto }
  .nav-liens a{ padding:13px 14px; font-size:1rem }
}

/* --- typographie ---------------------------------------------------------- */
.hero-logo{ display:block; height:clamp(64px, 8vw, 100px); width:auto; margin:0 0 22px -6px; filter:drop-shadow(0 0 28px rgba(226,178,74,.45)); animation:hero-logo-pouls 4s ease-in-out infinite }
@keyframes hero-logo-pouls{ 0%,100%{ filter:drop-shadow(0 0 22px rgba(226,178,74,.35)) } 50%{ filter:drop-shadow(0 0 40px rgba(226,178,74,.6)) } }
@media (prefers-reduced-motion: reduce){ .hero-logo{ animation:none } }
.oeil{ font-family:var(--l-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--or); display:flex; align-items:center; gap:10px; margin-bottom:16px }
.oeil::before{ content:''; width:7px; height:7px; background:var(--or); transform:rotate(45deg); box-shadow:0 0 12px var(--or) }
.oeil.cyan{ color:var(--cyan) } .oeil.cyan::before{ background:var(--cyan); box-shadow:0 0 12px var(--cyan) }
.oeil.vert{ color:var(--vert) } .oeil.vert::before{ background:var(--vert); box-shadow:0 0 12px var(--vert) }
h1, h2{ font-family:var(--l-titre); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0; text-wrap:balance }
h1{ font-size:clamp(2.6rem, 6.4vw, 5.4rem) }
h2{ font-size:clamp(2rem, 4.4vw, 3.6rem) }
h1 em, h2 em{ font-style:normal; color:var(--or); text-shadow:0 0 30px rgba(226,178,74,.45) }
h2 em.c{ color:var(--cyan); text-shadow:0 0 30px rgba(63,224,255,.4) }
.sous{ font-size:clamp(1.02rem, 1.4vw, 1.25rem); color:var(--encre-2); max-width:56ch; margin:20px 0 0 }
.sous b{ color:var(--encre); font-weight:700 }
.centre{ text-align:center } .centre-txt{ margin-left:auto; margin-right:auto }

/* --- boutons -------------------------------------------------------------- */
.btn{ font:inherit; font-weight:800; font-size:1rem; color:#0b0f17; background:linear-gradient(120deg, var(--or), var(--or-clair)); border:0; border-radius:999px;
  padding:14px 24px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:transform .18s var(--sortie), box-shadow .2s; box-shadow:0 12px 30px -14px var(--or) }
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px var(--or) } .btn:active{ transform:scale(.98) }
.btn--fant{ background:transparent; color:var(--encre); border:1px solid var(--trait-2); box-shadow:none }
.btn--fant:hover{ border-color:var(--or); box-shadow:none }
.btn--grand{ padding:17px 30px; font-size:1.06rem }
.btn--nav{ padding:10px 18px; font-size:.9rem }
.btn:disabled{ opacity:.5; cursor:default; transform:none }
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px }

/* --- hero ----------------------------------------------------------------- */
.hero{ padding:8vh 0 4vh; min-height:calc(100vh - 64px); display:flex; align-items:center; position:relative }
.hero-grille{ display:grid; grid-template-columns:1.05fr 1fr; gap:4vw; align-items:center }
.hero-preuves{ display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; font-family:var(--l-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-3) }
.hero-preuves b{ color:var(--or); font-size:1rem; margin-right:6px }
.hero-scene{ position:relative; height:520px; display:grid; place-items:end center; perspective:900px }
.hero-scene .perso{ position:absolute; bottom:40px; filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)); transition:transform .6s var(--sortie) }
.perso--centre{ left:50%; transform:translateX(-50%); z-index:3 }
.perso--gauche{ left:-3%; bottom:52px !important; z-index:2; opacity:.92 }
.perso--droite{ right:-3%; bottom:56px !important; z-index:2; opacity:.92 }
.sol{ position:absolute; bottom:10px; left:50%; width:78%; height:120px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(226,178,74,.38), rgba(226,178,74,.06) 60%, transparent 75%); filter:blur(8px) }
.sol.petit{ width:70%; height:70px; bottom:0 }
.sol::after{ content:''; position:absolute; inset:18% 8%; border-radius:50%; border:1px solid rgba(226,178,74,.35); animation:onde 3.2s ease-out infinite }
@keyframes onde{ from{ transform:scale(.6); opacity:.9 } to{ transform:scale(1.25); opacity:0 } }
.cadeau{ position:absolute; font-size:34px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)); animation:flotte 4.6s ease-in-out infinite }
.cadeau-1{ left:14%; top:16%; animation-delay:-1s } .cadeau-2{ right:12%; top:8%; font-size:28px; animation-delay:-2.4s } .cadeau-3{ left:44%; top:2%; font-size:26px; animation-delay:-3.3s }
@keyframes flotte{ 0%,100%{ transform:translateY(0) rotate(-6deg) } 50%{ transform:translateY(-16px) rotate(6deg) } }
.etiquette{ position:absolute; top:0; right:0; font-family:var(--l-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or);
  padding:8px 12px; border:1px solid rgba(226,178,74,.45); border-radius:4px 12px 4px 12px; background:rgba(7,9,15,.7); display:flex; align-items:center; gap:8px }
.etiquette i{ width:6px; height:6px; border-radius:50%; background:var(--or); box-shadow:0 0 8px var(--or); animation:pulse 1.6s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.6) } }
.defile{ position:absolute; left:50%; bottom:18px; width:22px; height:36px; margin-left:-11px; border:1.5px solid var(--trait-2); border-radius:999px }
.defile span{ position:absolute; left:50%; top:7px; width:3px; height:8px; margin-left:-1.5px; border-radius:999px; background:var(--or); animation:roule 1.8s ease-in-out infinite }
@keyframes roule{ 0%,100%{ transform:translateY(0); opacity:1 } 55%{ transform:translateY(12px); opacity:.2 } }
@media (max-width:900px){
  .hero{ min-height:0; padding:5vh 0 3vh }
  .hero-grille{ grid-template-columns:1fr; gap:10px }
  .hero-scene{ height:min(420px, 96vw); order:-1 }
  .hero-scene .perso{ transform-origin:bottom center }
  .perso--gauche{ left:0 } .perso--droite{ right:0 }
  .etiquette{ font-size:.6rem; padding:6px 9px }
  .defile{ display:none }
}

/* --- bandeau défilant ------------------------------------------------------ */
.bandeau{ overflow:hidden; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); background:rgba(255,255,255,.02); padding:14px 0 }
.bandeau-piste{ display:flex; gap:26px; white-space:nowrap; width:max-content; animation:glisse 28s linear infinite; font-family:var(--l-titre); font-weight:800; font-size:1.2rem; letter-spacing:-.01em; color:var(--encre-2) }
.bandeau-piste i{ font-style:normal; color:var(--or); font-size:.7rem; align-self:center }
@keyframes glisse{ to{ transform:translateX(-50%) } }

/* --- blocs ---------------------------------------------------------------- */
.bloc{ padding:clamp(70px, 10vh, 130px) 0 }
.deux{ display:grid; grid-template-columns:1.05fr 1fr; gap:5vw; align-items:center }
.deux.inv{ grid-template-columns:1fr 1.05fr }
@media (max-width:900px){ .deux, .deux.inv{ grid-template-columns:1fr; gap:40px } .deux.inv > :first-child{ order:2 } }

/* révélation au défilement */
.revele{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .8s var(--sortie) }
.revele.vu{ opacity:1; transform:none }
.revele:nth-child(2){ transition-delay:.08s } .revele:nth-child(3){ transition-delay:.16s } .revele:nth-child(4){ transition-delay:.24s } .revele:nth-child(5){ transition-delay:.32s } .revele:nth-child(6){ transition-delay:.4s }

/* étapes */
.etapes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:44px }
.etape{ position:relative; padding:26px 22px 24px; border-radius:4px 20px 4px 20px; background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--trait); transition:transform .3s var(--sortie), border-color .3s }
.etape:hover{ transform:translateY(-4px); border-color:rgba(63,224,255,.5) }
.etape::after{ content:''; position:absolute; left:0; top:0; width:22px; height:22px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); border-top-left-radius:4px; opacity:.7 }
.etape .n{ font-family:var(--l-mono); font-size:.72rem; letter-spacing:.18em; color:var(--cyan); margin-bottom:12px }
.etape .ico{ font-size:2.3rem; line-height:1; margin-bottom:14px }
.etape b{ display:block; font-family:var(--l-titre); font-size:1.3rem; font-weight:800; margin-bottom:6px }
.etape span{ color:var(--encre-2); font-size:.95rem }
@media (max-width:900px){ .etapes{ grid-template-columns:1fr 1fr; gap:12px } .etape{ padding:18px 16px } }
@media (max-width:520px){ .etapes{ grid-template-columns:1fr } }

/* puces */
.pile{ display:flex; flex-direction:column; gap:12px; margin-top:28px }
.puce{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:4px 16px 4px 16px; background:rgba(255,255,255,.04); border:1px solid var(--trait); position:relative }
.puce::after{ content:''; position:absolute; left:0; top:0; width:18px; height:18px; border-top:2px solid var(--or); border-left:2px solid var(--or); border-top-left-radius:4px; opacity:.6 }
.puce .ico{ font-size:1.5rem; line-height:1; flex:0 0 auto; margin-top:2px }
.puce b{ display:block; font-size:1.02rem; font-weight:800 } .puce span{ color:var(--encre-2); font-size:.93rem }

/* téléphones */
.tels{ display:flex; gap:20px; justify-content:center; align-items:flex-end; perspective:1400px }
.tel{ width:210px; border-radius:30px; padding:8px; background:#1A1F2B; border:1px solid rgba(255,255,255,.18); box-shadow:0 40px 80px -30px #000, inset 0 0 0 1px #000; position:relative; transition:transform .9s var(--sortie), opacity .6s ease }
.tel img{ border-radius:23px; width:100% }
.tel::before{ content:''; position:absolute; top:16px; left:50%; width:70px; height:18px; margin-left:-35px; background:#0a0c12; border-radius:999px; z-index:2 }
.tel .leg{ position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); white-space:nowrap; font-family:var(--l-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-3) }
.tels .tel:nth-child(1).vu{ transform:rotateY(14deg) translateY(18px) } .tels .tel:nth-child(3).vu{ transform:rotateY(-14deg) translateY(18px) }
.tels .tel:nth-child(2){ z-index:2 } .tels .tel:nth-child(2).vu{ transform:scale(1.06) }
@media (max-width:900px){
  .tels{ justify-content:flex-start; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 46px; perspective:none; margin:0 -16px; padding-inline:16px; -webkit-overflow-scrolling:touch }
  .tels::-webkit-scrollbar{ display:none }
  .tel{ flex:0 0 200px; scroll-snap-align:center; transform:none !important }
}

/* personnages */
.bloc--persos{ background:linear-gradient(180deg, transparent, rgba(226,178,74,.05), transparent) }
.rangs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:40px; align-items:end }
.rang{ text-align:center; position:relative; padding-bottom:6px }
.rang::before{ content:''; position:absolute; left:8%; right:8%; bottom:54px; height:1px; background:linear-gradient(90deg, transparent, var(--trait-2), transparent) }
.rang canvas{ display:block; margin:0 auto; filter:drop-shadow(0 18px 24px rgba(0,0,0,.7)) }
.rang b{ display:block; font-family:var(--l-titre); font-weight:800; font-size:1.12rem; margin-top:6px }
.rang small{ font-family:var(--l-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-3) }
@media (max-width:900px){ .rangs{ grid-template-columns:1fr 1fr; gap:10px 14px } }
.medailles{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:46px }
.medaille{ display:flex; flex-direction:column; align-items:center; gap:8px }
.medaille .anneau{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(from 200deg, var(--m1), var(--m2) 30%, var(--m3) 50%, var(--m2) 72%, var(--m1)); box-shadow:0 14px 30px -14px #000, 0 0 30px -8px var(--m2) }
.medaille .anneau::before{ content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 48%, transparent 58%); background-size:220% 100%; animation:reflet 4.5s ease-in-out infinite; mix-blend-mode:screen; opacity:.75 }
@keyframes reflet{ 0%,60%{ background-position:120% 0 } 100%{ background-position:-120% 0 } }
.medaille .coeur{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font-size:32px; background:radial-gradient(circle at 35% 30%, #262c3a, #0b0e15 70%); box-shadow:inset 0 2px 8px rgba(0,0,0,.85) }
.medaille b{ font-size:.9rem }
.bronze{ --m1:#8a4f1d; --m2:#c8813c; --m3:#f0b075 } .argent{ --m1:#7d8698; --m2:#c9d0dd; --m3:#fff } .or{ --m1:#8a6314; --m2:#e2b24a; --m3:#fff0b8 }
.verrou{ --m1:#3a404c; --m2:#5a6170; --m3:#7c8496 } .verrou .coeur{ filter:grayscale(1); opacity:.5 }

/* restaurateurs */
.ecran{ border-radius:14px; overflow:hidden; border:1px solid var(--trait-2); box-shadow:0 40px 90px -40px #000; transform:perspective(1200px) rotateY(8deg) rotateX(2deg) translateY(22px); transition:transform 1s var(--sortie), opacity .6s }
.ecran.vu{ transform:perspective(1200px) rotateY(6deg) rotateX(1deg) }
@media (max-width:900px){ .ecran, .ecran.vu{ transform:none } }
.gains{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px }
.gain{ padding:18px 18px 16px; border-radius:4px 18px 4px 18px; background:rgba(255,255,255,.04); border:1px solid var(--trait); position:relative }
.gain::after{ content:''; position:absolute; left:0; top:0; width:20px; height:20px; border-top:2px solid var(--vert); border-left:2px solid var(--vert); border-top-left-radius:4px; opacity:.7 }
.gain .ico{ font-size:1.7rem; line-height:1; margin-bottom:10px }
.gain b{ display:block; font-family:var(--l-titre); font-size:1.12rem; font-weight:800; margin-bottom:4px } .gain span{ color:var(--encre-2); font-size:.9rem }
@media (max-width:520px){ .gains{ grid-template-columns:1fr } }

/* --- contact en 3D --------------------------------------------------------- */
.bloc--contact{ padding-bottom:clamp(90px, 12vh, 150px) }
.contact-grille{ display:grid; grid-template-columns:1fr 1.15fr; gap:5vw; align-items:center }
.contact-perso{ position:relative; display:grid; place-items:end center; height:330px; margin-top:20px }
.contact-perso canvas{ filter:drop-shadow(0 26px 34px rgba(0,0,0,.7)) }
.scene3d{ perspective:1400px; perspective-origin:50% 40% }
.carte3d{ position:relative; transform-style:preserve-3d; transform:rotateX(6deg) rotateY(-8deg); transition:transform .18s ease-out;
  border-radius:4px 26px 4px 26px; padding:30px 30px 26px; margin:0; will-change:transform }
.carte3d.sans-souris{ animation:derive3d 9s ease-in-out infinite }
@keyframes derive3d{ 0%,100%{ transform:rotateX(6deg) rotateY(-8deg) } 50%{ transform:rotateX(-4deg) rotateY(7deg) } }
.c3-couche{ position:absolute; inset:0; border-radius:inherit; pointer-events:none }
.c3-fond{ background:linear-gradient(135deg, rgba(20,26,40,.96), rgba(12,15,24,.98)); border:1px solid var(--trait-2);
  box-shadow:0 60px 120px -50px #000, 0 0 0 1px rgba(226,178,74,.12) inset, 0 0 80px -30px rgba(226,178,74,.5); transform:translateZ(-10px) }
.c3-coins{ position:absolute; inset:12px; pointer-events:none; transform:translateZ(30px) }
.c3-coins i{ position:absolute; width:22px; height:22px; border:2px solid var(--or); opacity:.75; filter:drop-shadow(0 0 8px var(--or)) }
.c3-coins i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; border-top-left-radius:4px } .c3-coins i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; border-top-right-radius:4px }
.c3-coins i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; border-bottom-left-radius:4px } .c3-coins i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; border-bottom-right-radius:4px }
.c3-contenu{ position:relative; transform-style:preserve-3d }
.c3-tete{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; transform:translateZ(20px) }
.c3-etat{ font-family:var(--l-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vert) }
.profil{ display:flex; gap:6px; margin-bottom:16px; transform:translateZ(24px) }
.profil button{ font:inherit; font-size:.82rem; font-weight:700; color:var(--encre-2); background:rgba(255,255,255,.05); border:1px solid var(--trait-2); border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .2s }
.profil button.on{ color:#0b0f17; background:var(--or); border-color:var(--or) }
.champs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; transform-style:preserve-3d }
.champ{ display:flex; flex-direction:column; gap:6px; transform-style:preserve-3d }
.champ.large{ grid-column:1 / -1 }
.champ span{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-2) }
.champ input, .champ textarea{ width:100%; font:inherit; font-size:1rem; color:var(--encre); background:rgba(255,255,255,.05); border:1px solid var(--trait-2); border-radius:12px; padding:12px 14px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s; resize:vertical }
.champ input:focus, .champ textarea:focus{ border-color:var(--or); box-shadow:0 0 0 3px rgba(226,178,74,.16), 0 0 30px -10px var(--or); background:rgba(255,255,255,.07) }
.champ input.ko, .champ textarea.ko{ border-color:var(--corail) }
.c3-p1{ transform:translateZ(18px) } .c3-p2{ transform:translateZ(26px) } .c3-p3{ transform:translateZ(36px) }
.seulement-resto[hidden]{ display:none }
.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.c3-pied{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; transform-style:preserve-3d }
.c3-pied small{ font-size:.74rem; color:var(--encre-3); max-width:30ch } .c3-pied small a{ color:var(--encre-2) }
.btn--envoi{ padding:14px 26px; transform:translateZ(40px) }
.btn--envoi i{ font-style:normal; transition:transform .4s var(--sortie) } .btn--envoi:hover i{ transform:rotate(90deg) scale(1.2) }
.c3-succes{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:10px; padding:30px; transform:translateZ(30px); border-radius:inherit }
.c3-succes[hidden]{ display:none }
.c3-succes .rond{ width:78px; height:78px; margin:0 auto 8px; border-radius:50%; display:grid; place-items:center; font-size:34px; background:radial-gradient(circle at 35% 30%, rgba(61,220,132,.4), rgba(61,220,132,.08)); border:1px solid rgba(61,220,132,.6); box-shadow:0 0 40px -6px rgba(61,220,132,.7); animation:pop .6s var(--sortie) both }
@keyframes pop{ from{ transform:scale(.4); opacity:0 } to{ transform:none; opacity:1 } }
.c3-succes b{ font-family:var(--l-titre); font-size:1.5rem } .c3-succes span{ color:var(--encre-2); max-width:34ch; margin:0 auto }
.c3-succes .btn{ margin:12px auto 0 }
.carte3d.envoye .c3-contenu{ visibility:hidden }
@media (max-width:900px){
  .contact-grille{ grid-template-columns:1fr; gap:20px }
  .contact-perso{ height:260px; margin-top:6px }
  .carte3d{ padding:22px 18px 20px; transform:none; animation:none !important }
  .champs{ grid-template-columns:1fr }
  .c3-pied{ flex-direction:column; align-items:stretch } .c3-pied small{ max-width:none } .btn--envoi{ justify-content:center }
}
@media (hover:none){ .carte3d{ transform:none !important } }

/* --- pied ----------------------------------------------------------------- */
.pied{ border-top:1px solid var(--trait); padding:50px 0 26px; background:rgba(7,9,15,.6) }
.pied-grille{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px }
.pied-grille b{ display:block; font-family:var(--l-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--or); margin-bottom:12px }
.pied-grille a{ display:block; color:var(--encre-2); text-decoration:none; font-size:.92rem; padding:4px 0 } .pied-grille a:hover{ color:var(--encre) }
.pied-grille p{ color:var(--encre-2); font-size:.92rem; max-width:34ch }
.pied-logo{ height:56px; width:auto; margin-bottom:14px }
.pied-bas{ margin-top:34px; padding-top:18px; border-top:1px solid var(--trait); font-family:var(--l-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-3) }
@media (max-width:900px){ .pied-grille{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .pied-grille{ grid-template-columns:1fr } }

/* --- toast ---------------------------------------------------------------- */
.toast{ position:fixed; left:50%; bottom:22px; z-index:99; transform:translateX(-50%) translateY(20px); background:#000; border:1px solid rgba(255,255,255,.3); color:#fff; padding:12px 18px; border-radius:12px; font-size:.92rem; opacity:0; transition:all .3s; max-width:min(92vw, 520px); text-align:center; pointer-events:none }
.toast.on{ opacity:1; transform:translateX(-50%) }
.toast.ko{ border-color:var(--corail) }

@media (prefers-reduced-motion: reduce){
  .decor::before, .lueur, .cadeau, .sol::after, .bandeau-piste, .medaille .anneau::before, .etiquette i, .defile span, .carte3d{ animation:none !important }
  .revele{ opacity:1; transform:none; transition:none }
}