/* ===========================================================================
   DeutschMaak — « 3D Language World » (login.php / register.php).
   Remplace l'ancienne carte centrée par une composition deux panneaux :
     - à gauche : un petit univers linguistique animé (CSS 3D, sans lib externe) ;
     - à droite : la carte du formulaire (login / register) + boutons sociaux.
   Le design-system public (.sp-field, .sp-btn, .sp-alert) reste la référence
   pour les champs, boutons et messages : aucune régression de style ou d'a11y.
   Chargé uniquement par login.php et register.php.
   =========================================================================== */

/* ------------------------------------------------------------------ Layout */
.lw-auth{position:relative;z-index:1;padding:84px 0 72px;overflow-x:clip}
.lw-wrap{
  width:min(1200px,calc(100% - 44px));margin-inline:auto;
  /* align-items:stretch (défaut) : les deux colonnes s'étirent sur la même
     hauteur de rangée. C'était la cause du bug (avant : align-items:center). */
  display:grid;grid-template-columns:1.06fr .94fr;gap:34px;align-items:stretch;
}
.lw-panel{min-width:0;display:flex}

/* --------------------------------------------------------- Scène (gauche) */
/* .lw-world enveloppe la scène : elle s'étire sur la même hauteur que la carte
   du formulaire et porte le halo rouge flou (::before derrière, ::after devant). */
.lw-world{position:relative;min-width:0;isolation:isolate}
.lw-world>.lw-scene{height:100%}
.lw-world::before{
  content:"";position:absolute;inset:-9% -13%;z-index:-1;pointer-events:none;
  border-radius:52%;
  background:radial-gradient(closest-side,rgba(225,29,46,.62),rgba(225,29,46,.30) 46%,transparent 74%);
  filter:blur(58px);
  animation:lwHalo 7.5s ease-in-out infinite;
}
.lw-world::after{
  content:"";position:absolute;inset:6% -8% -12% 22%;z-index:1;pointer-events:none;
  border-radius:50%;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(closest-side,rgba(255,92,102,.55),transparent 72%);
  filter:blur(52px);
}
@keyframes lwHalo{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.lw-scene{
  position:relative;overflow:hidden;border-radius:34px;min-height:648px;isolation:isolate;
  background:
    radial-gradient(circle at 78% 12%,rgba(225,29,46,.30),transparent 42%),
    radial-gradient(circle at 12% 88%,rgba(199,161,58,.26),transparent 44%),
    linear-gradient(150deg,#12151b 0%,#171b22 48%,#0d1015 100%);
  box-shadow:0 42px 100px rgba(16,18,22,.28),inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;display:flex;flex-direction:column;
}
.lw-scene::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 42%,#000,transparent 78%);
}
.lw-scene::after{
  content:"";position:absolute;width:420px;height:420px;right:-160px;bottom:-190px;
  border-radius:50%;background:radial-gradient(circle,rgba(225,29,46,.22),transparent 68%);
  pointer-events:none;
}
/* Zone 3D : strictement confinée sous la zone de présentation. L'overflow
   empêche tout élément (même animé) de remonter sur le titre. */
.lw-scene-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;perspective:1200px}
.lw-scene-inner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}

/* Objets flottants : un conteneur porte la parallaxe (variables JS),
   un enfant porte l'animation de flottement — les deux transforms ne se
   marchent pas dessus. */
.lw-item{
  position:absolute;
  /* --px/--py (px, mis à l'échelle par la profondeur) sont posés par le JS ;
     --depth (sans unité) ne sert qu'à éloigner l'objet dans la profondeur Z. */
  transform:translate3d(var(--px,0px),var(--py,0px),calc(var(--depth,1) * 12px));
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.lw-float{display:block;animation:lwFloat 7s ease-in-out infinite;animation-delay:var(--delay,0s)}

@keyframes lwFloat{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-16px) rotate(var(--rot,0deg))}}

/* Lettres allemandes 3D */
.lw-letter{font-family:"Space Grotesk",sans-serif;font-weight:700;line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.55);
  text-shadow:0 18px 34px rgba(0,0,0,.35)}
.lw-letter.solid{color:#fff;-webkit-text-stroke:0;text-shadow:0 22px 40px rgba(225,29,46,.34)}
.lw-letter--a{left:7%;top:11%;font-size:118px}
.lw-letter--o{right:11%;top:7%;font-size:92px;--delay:.9s}
.lw-letter--u{left:16%;bottom:24%;font-size:74px;--delay:.4s}
.lw-letter--s{right:8%;bottom:31%;font-size:104px;--delay:1.3s}

/* Cartes de vocabulaire */
.lw-vocab{
  display:inline-flex;flex-direction:column;gap:2px;padding:11px 15px;border-radius:16px;
  background:rgba(255,255,255,.94);color:#111318;font-weight:800;font-size:15px;letter-spacing:-.02em;
  box-shadow:0 20px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.6);cursor:default;
}
.lw-vocab small{font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#9aa0a8}
.lw-vocab--1{left:12%;top:30%;--delay:.2s}
.lw-vocab--2{right:9%;top:34%;--delay:1.1s}
.lw-vocab--3{left:9%;top:55%;--delay:.6s}
.lw-vocab--4{right:13%;top:58%;--delay:1.5s}

/* Bulles de conversation */
.lw-bubble{
  max-width:210px;padding:13px 15px;border-radius:18px 18px 18px 6px;font-size:12px;line-height:1.55;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);color:#eef1f4;box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.lw-bubble b{color:#fff}
.lw-bubble span{display:block;margin-top:7px;color:#ffd9dd;font-weight:800}
.lw-bubble--1{left:31%;top:14%;--delay:.35s}
.lw-bubble--2{right:6%;bottom:15%;border-radius:18px 18px 6px 18px;--delay:1.0s}

/* Badges de niveau */
.lw-badges{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:flex;gap:8px}
.lw-badge{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;
  font-family:"Space Grotesk";font-weight:700;font-size:14px;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  box-shadow:0 12px 26px rgba(0,0,0,.24);backdrop-filter:blur(6px);
  animation:lwBadge 6s ease-in-out infinite;animation-delay:var(--delay,0s);cursor:default;
}
.lw-badge.hot{background:linear-gradient(140deg,#e11d2e,#ff5a66);border-color:transparent;box-shadow:0 16px 32px rgba(225,29,46,.45)}
.lw-badge.gold{background:linear-gradient(140deg,#c7a13a,#e6c766);border-color:transparent;color:#241d05}
@keyframes lwBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Petites cartes pédagogiques */
.lw-idiom{
  position:absolute;padding:11px 13px;border-radius:14px;max-width:190px;
  background:rgba(20,24,30,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
  color:#dfe4ea;font-size:11px;line-height:1.5;box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.lw-idiom b{color:#fff;display:block;font-size:12px;margin-bottom:2px}
.lw-idiom--1{left:6%;top:70%;--delay:.8s}
.lw-idiom--2{right:6%;top:72%;--delay:1.7s}

/* Zone de présentation (haut gauche) — dans le flux, jamais recouverte par la 3D. */
.lw-scene-head{position:relative;z-index:5;flex:0 0 auto;padding:38px 34px 14px;max-width:360px}
.lw-scene-head span{display:inline-flex;align-items:center;gap:9px;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#aeb5bf}
.lw-scene-head span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dm-red);box-shadow:0 0 0 6px rgba(225,29,46,.18)}
.lw-scene-head h2{font-family:"Space Grotesk";font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.02;letter-spacing:-.05em;margin:14px 0 10px;color:#fff}
.lw-scene-head p{margin:0;color:#c3cad3;font-size:12.5px;line-height:1.7}

/* ------------------------------------------------------- Carte formulaire */
.lw-card{
  width:100%;padding:34px 34px 30px;border-radius:30px;background:rgba(255,255,255,.9);
  border:1px solid var(--sp-line);box-shadow:0 30px 80px rgba(16,18,22,.14);
  backdrop-filter:blur(20px);animation:lwCardIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lwCardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.lw-card-head{text-align:center;margin-bottom:22px}
.lw-card-head .dm-brand{justify-content:center}
.lw-card-head h1{font-family:"Space Grotesk";font-size:clamp(1.7rem,3.6vw,2.3rem);letter-spacing:-.05em;line-height:1.02;margin:16px 0 8px;color:var(--sp-ink)}
.lw-card-head p{color:#68717a;font-size:12.5px;line-height:1.7;margin:0}

/* Bouton d'authentification Google — unique, logo officiel multicolore, fond
   blanc (charte Google), pleine largeur. Le survol reste discret et le focus
   clavier est clairement visible. */
.lw-oauth{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}
.lw-google-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:11px;
  box-sizing:border-box;width:100%;min-height:54px;padding:12px 18px;
  border:1px solid rgba(16,18,22,.14);background:#fff;color:#3c4043;
  border-radius:16px;font:700 14px/1.3 "DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1),background-color .22s ease,
             border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.lw-google-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.lw-google-logo{display:block;width:18px;height:18px}
.lw-google-txt{display:inline-block}
.lw-google-btn:focus-visible{outline:3px solid rgba(66,133,244,.55);outline-offset:3px}
.lw-google-btn:active{transform:translateY(-1px) scale(.99)}
.lw-google-btn.is-disabled{opacity:.6;cursor:not-allowed;background:#f3f4f6;border-style:dashed;border-color:rgba(16,18,22,.12);color:#aeb3ba}
.lw-google-btn.is-loading{opacity:.65;pointer-events:none}
.lw-oauth-note{margin:0;font-size:10px;color:#939aa2;text-align:center;line-height:1.6}
.lw-oauth-privacy{margin:0;font-size:10px;color:#939aa2;text-align:center;line-height:1.6}
.lw-oauth-status{margin:12px 0 0;padding:9px 12px;border-radius:12px;font-size:11.5px;font-weight:700;text-align:center;line-height:1.5}
.lw-oauth-status.is-error{background:rgba(225,29,46,.10);color:#b3121f;border:1px solid rgba(225,29,46,.28)}
.lw-oauth-status.is-info{background:rgba(16,18,22,.06);color:#5f6770;border:1px solid rgba(16,18,22,.10)}

/* Survol discret (pointeurs avec survol uniquement). */
@media(hover:hover){
  .lw-google-btn:not(.is-disabled):hover{
    background:#fff;border-color:#dfe3e8;box-shadow:0 12px 26px rgba(66,133,244,.20);
    transform:translateY(-2px);
  }
}

/* Séparateur « ou » */
.lw-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:#9aa1a9;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.lw-divider::before,.lw-divider::after{content:"";height:1px;flex:1;background:var(--sp-line)}

/* Champs : on garde le design-system .sp-field ; ajustements de densité */
.lw-card .sp-field{margin-bottom:13px}
.lw-card .sp-form-submit{margin-top:6px}
.lw-card .sp-form-submit .sp-btn{width:100%;min-height:50px}
.lw-card .sp-alert{margin-bottom:16px}

/* Rappels / liens sous le formulaire */
.sp-auth-links{display:flex;justify-content:flex-end;align-items:center;margin-top:12px;font-size:12px;font-weight:750}
.sp-auth-links a{color:var(--sp-red);font-weight:800}
.sp-auth-links a:hover{color:var(--sp-red-deep)}
.sp-auth-switch{text-align:center;margin-top:22px;padding-top:19px;border-top:1px solid var(--sp-line);font-size:12.5px;color:#5f6770;line-height:1.7}
.sp-auth-switch a{color:var(--sp-red);font-weight:850}
.sp-auth-switch a:hover{color:var(--sp-red-deep)}
.sp-auth-back{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:12px;font-weight:800;color:#5f6770;width:100%}
.sp-auth-back:hover{color:var(--sp-ink)}

/* Transition douce Login <-> Register (même identité, changement de page) */
.lw-auth{animation:lwPageIn .5s ease both}
@keyframes lwPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------- Dark mode */
html.dark .lw-card{background:rgba(24,28,34,.86);border-color:rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.4)}
html.dark .lw-card-head h1{color:#f7f8f9}
html.dark .lw-card-head p{color:#98a1aa}
html.dark .lw-google-btn{background:#fff;border-color:rgba(255,255,255,.14);color:#26292e}
html.dark .lw-google-btn.is-disabled{background:#181c22;border-color:rgba(255,255,255,.10);color:#8b929b}
html.dark .lw-oauth-note,html.dark .lw-oauth-privacy{color:#8b939c}
html.dark .lw-oauth-status.is-error{background:rgba(127,29,29,.22);color:#fecdd3;border-color:rgba(248,113,113,.30)}
html.dark .lw-oauth-status.is-info{background:rgba(255,255,255,.06);color:#c3cad3;border-color:rgba(255,255,255,.10)}
html.dark .lw-divider{color:#7b838c}
html.dark .lw-divider::before,html.dark .lw-divider::after{background:rgba(255,255,255,.09)}
html.dark .sp-auth-switch{border-color:rgba(255,255,255,.09);color:#98a1aa}
html.dark .sp-auth-back{color:#8b939c}
html.dark .sp-auth-back:hover{color:#fff}
html.dark .sp-alert.error{background:rgba(127,29,29,.20);color:#fecdd3;border-color:rgba(248,113,113,.30)}
html.dark .sp-alert.success{background:rgba(6,78,59,.18);color:#bbf7d0;border-color:rgba(74,222,128,.28)}

/* ------------------------------------------------------------- Responsive */
@media(max-width:1024px){
  .lw-auth{padding-top:76px}
  .lw-wrap{grid-template-columns:1fr;gap:24px;min-height:0}
  .lw-world::before{inset:-4% -6%;filter:blur(44px)}
  .lw-world::after{inset:8% -6% -8% 30%;filter:blur(38px);opacity:.4}
  .lw-scene{min-height:360px;border-radius:26px}
  .lw-scene-head{padding:26px 24px 12px;max-width:none}
  .lw-scene-head h2{font-size:clamp(1.6rem,5vw,2.2rem)}
  /* On allège la scène : on retire les éléments les plus périphériques. */
  .lw-idiom,.lw-letter--o,.lw-letter--s,.lw-bubble--2{display:none}
  .lw-letter--a{font-size:84px;top:14%}
  .lw-letter--u{font-size:60px;bottom:16%}
  .lw-vocab--3,.lw-vocab--4{display:none}
  .lw-badges{bottom:6%}
}
@media(max-width:680px){
  .lw-auth{padding:72px 0 60px}
  .lw-wrap{width:calc(100% - 26px)}
  .lw-world::before{inset:-2% -5%;filter:blur(32px);opacity:.55}
  .lw-world::after{display:none}
  .lw-scene{min-height:300px;border-radius:22px}
  .lw-scene-head{padding:22px 20px 10px}
  .lw-scene-head p{display:none}
  .lw-vocab--2,.lw-bubble--1,.lw-letter--u{display:none}
  .lw-letter--a{font-size:66px}
  .lw-badge{width:36px;height:36px;font-size:12px;border-radius:11px}
  .lw-card{padding:26px 20px 24px;border-radius:24px}
  .lw-card-head{margin-bottom:18px}
  .lw-oauth{gap:9px}
  .lw-google-btn{min-height:50px;font-size:13.5px;padding:11px 16px}
  .lw-google-logo{width:17px;height:17px}
}

/* ------------------------------------------------------- Reduced motion */
@media(prefers-reduced-motion:reduce){
  .lw-scene-inner{transform:none!important;transition:none}
  .lw-item{transform:none!important;transition:none}
  .lw-float,.lw-badge{animation:none!important}
  .lw-card,.lw-auth{animation:none!important}
  .lw-world::before{animation:none!important}
  .lw-google-btn{transition:none}
  .lw-vocab:hover,.lw-google-btn:hover{transform:none}
}

/* Survol avec profondeur (pointeurs fins uniquement) */
@media(hover:hover) and (pointer:fine){
  .lw-vocab:hover{transform:translateZ(46px) scale(1.05);transition:transform .3s cubic-bezier(.22,1,.36,1)}
}