/* Nouvelle page d'accueil des visiteurs (app/index-nouveau.php) — HabbomCMS - Shanks
   Disposition de la maquette (logo + joueurs en ligne, diaporama des news, connexion, 3 cartes),
   aux couleurs du thème du site : fond, boîtes, boutons et polices viennent des variables du thème. */
.acc-n{--acc-main:var(--mo-green,var(--neon));--acc-main-b:var(--mo-green-b,var(--neon-hi));--acc-box:var(--panel);--acc-band:var(--panel2);
  --acc-border:var(--line);--acc-shad:var(--mo-shadow,0 3px 0 1px rgba(0,0,0,.3));--acc-link:var(--mo-link,var(--neon-soft))}
body.acc-n{min-height:100vh;display:flex;flex-direction:column}
.acc-n .acc-wrap{flex:1;width:min(100% - 32px,1000px);margin:0 auto;padding:34px 0 24px}

/* En-tête : logo, joueurs en ligne, boutons, Discord */
.acc-n .acc-top{display:flex;align-items:center;gap:18px;margin-bottom:18px;min-height:70px}
.acc-n .acc-logo{display:block;flex:none;line-height:0}
.acc-n .acc-logo img{height:72px;width:auto;max-width:300px;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.acc-n .acc-bulle{position:relative;background:var(--acc-box);color:var(--text);border:2px solid var(--acc-border);padding:9px 18px;border-radius:var(--r,6px);font-size:15px;box-shadow:var(--acc-shad);white-space:nowrap}
.acc-n .acc-bulle::before,.acc-n .acc-bulle::after{content:"";position:absolute;top:50%;border-style:solid;border-color:transparent}
.acc-n .acc-bulle::before{left:-11px;margin-top:-10px;border-width:10px 11px 10px 0;border-right-color:var(--acc-border)}
.acc-n .acc-bulle::after{left:-8px;margin-top:-8px;border-width:8px 9px 8px 0;border-right-color:var(--acc-box)}
.acc-n .acc-bulle b{color:var(--acc-link);font-weight:700}
.acc-n .acc-social{margin-left:auto;display:flex;align-items:center;gap:10px}
.acc-n .acc-social .corner{position:static;display:flex;gap:6px}
.acc-n .acc-social .corner .tool{width:38px;height:38px}
.acc-n .acc-discord{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border-radius:var(--r,6px);background:#5865F2;border:2px solid #8b93f7;color:#fff!important;font-weight:700;font-size:15px;text-decoration:none;box-shadow:var(--acc-shad);transition:background .15s}
.acc-n .acc-discord:hover{background:#4752C4}

/* Boîte principale : diaporama + connexion */
.acc-n .acc-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;background:var(--acc-box);border:2px solid var(--acc-border);border-radius:var(--r,6px);padding:18px;box-shadow:var(--acc-shad)}
.acc-n .acc-slider{position:relative;min-height:310px;border-radius:var(--r-s,4px);overflow:hidden;border:2px solid var(--acc-band);background:var(--acc-band)}
.acc-n .acc-slides,.acc-n .acc-slide{position:absolute;inset:0}
.acc-n .acc-slide{display:block;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s;color:#fff;text-decoration:none;background-size:cover!important;background-position:center!important}
.acc-n .acc-slide.on{opacity:1;visibility:visible;transition:opacity .6s}
.acc-n .acc-cap{position:absolute;left:0;right:0;top:26px;display:grid;gap:4px;padding:10px 14px;background:rgba(20,19,32,.72);border-left:4px solid var(--acc-main);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.acc-n .acc-cap b{font:400 30px/1.1 var(--title);text-transform:uppercase;letter-spacing:.01em;color:#fff}
.acc-n .acc-cap span{font-size:15px;opacity:.9}
.acc-n .acc-lock{position:absolute;right:12px;bottom:12px;padding:6px 12px;border-radius:var(--r-s,4px);background:var(--acc-main);border:2px solid var(--acc-main-b);font-size:13px;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.acc-n a.acc-slide:hover .acc-lock,.acc-n a.acc-slide:focus-visible .acc-lock{opacity:1;transform:none}
.acc-n .acc-arrow{all:unset;position:absolute;top:50%;margin-top:-22px;width:34px;height:44px;display:grid;place-items:center;font-size:32px;line-height:1;color:#fff;background:rgba(20,19,32,.55);cursor:pointer;opacity:0;transition:opacity .2s,background .2s;z-index:2}
.acc-n .acc-arrow.prev{left:0;border-radius:0 4px 4px 0}
.acc-n .acc-arrow.next{right:0;border-radius:4px 0 0 4px}
.acc-n .acc-slider:hover .acc-arrow,.acc-n .acc-arrow:focus-visible{opacity:1}
.acc-n .acc-arrow:hover{background:var(--acc-main)}
.acc-n .acc-prog{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--acc-main);transform-origin:left;transform:scaleX(0);z-index:2;opacity:.9}
.acc-n .acc-prog.run{animation:accProg 6s linear forwards}
@keyframes accProg{to{transform:scaleX(1)}}
.acc-n .acc-dots{position:absolute;left:24px;bottom:20px;display:flex;gap:12px;z-index:2}
.acc-n .acc-dots button{all:unset;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:0 0 0 2px rgba(20,19,32,.6);cursor:pointer;transition:background .2s,transform .2s}
.acc-n .acc-dots button.on{background:var(--acc-main);box-shadow:0 0 0 2px #fff;transform:scale(1.15)}
.acc-n .acc-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Connexion / inscription (champs et boutons : ceux du thème) */
.acc-n .acc-auth{display:flex;flex-direction:column;justify-content:center;min-width:0}
.acc-n .acc-auth>div{display:grid;gap:11px}
.acc-n .acc-auth>div[hidden]{display:none}
.acc-n .acc-auth h1{margin:0 0 4px;text-align:center;font:400 34px/1.1 var(--title);text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.acc-n .acc-auth form{display:grid;gap:11px}
.acc-n .acc-btn{width:100%;min-height:42px;margin-top:4px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.acc-n .acc-mini{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.acc-n .acc-mini a,.acc-n .acc-link{color:var(--acc-link);text-decoration:none}
.acc-n .acc-link{all:unset;color:var(--acc-link);cursor:pointer}
.acc-n .acc-mini a:hover,.acc-n .acc-link:hover{text-decoration:underline;color:#fff}
.acc-n .acc-txt{margin:0;text-align:center;color:var(--muted);font-size:14px}
.acc-n .acc-note{margin:0;padding:9px 11px;border-radius:var(--r-s,4px);background:rgba(var(--neon-rgb),.14);color:var(--text);font-size:13.5px;border-left:4px solid var(--acc-main)}
.acc-n .acc-note.pop{animation:accPop .45s ease}
@keyframes accPop{30%{transform:scale(1.03)}}
.acc-n .acc-warn{margin:0;padding:8px 10px;border-radius:var(--r-s,4px);background:var(--acc-band);border:1px solid var(--acc-border);color:var(--muted);font-size:12.5px;line-height:1.35}
.acc-n .acc-warn b{color:var(--text)}
.acc-n .acc-gender{display:flex;gap:10px;justify-content:center;margin:0;padding:0;border:0}
.acc-n .acc-gender legend{width:100%;margin-bottom:6px;text-align:center;font-size:13px;color:var(--muted)}
.acc-n .acc-gender label{display:grid;justify-items:center;gap:2px;padding:6px 14px;border:2px solid var(--acc-border);border-radius:var(--r,6px);background:var(--acc-band);color:var(--text);font-size:13px;cursor:pointer;position:relative}
.acc-n .acc-gender label:has(input:checked){border-color:var(--acc-main);background:rgba(var(--neon-rgb),.14)}
.acc-n .acc-gender input{position:absolute;opacity:0;pointer-events:none}
.acc-n .acc-gender img{image-rendering:pixelated;height:83px;width:auto}

/* Les derniers inscrits : têtes des avatars, du plus récent au plus ancien */
.acc-n .acc-recent{margin-top:14px;padding:12px 18px 14px;background:var(--acc-box);border:2px solid var(--acc-border);border-radius:var(--r,6px);box-shadow:var(--acc-shad)}
.acc-n .acc-recent h2{margin:0 0 10px;font:400 22px/1.1 var(--title);text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.acc-n .acc-recent ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr));gap:10px 8px}
.acc-n .acc-recent li{display:grid;justify-items:center;gap:5px;min-width:0}
.acc-n .acc-tete{position:relative;width:100%;max-width:64px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--acc-band);box-shadow:0 0 0 2px var(--acc-border);transition:box-shadow .15s,transform .15s}
.acc-n .acc-tete.neuf{box-shadow:0 0 0 2px var(--acc-main)}
.acc-n .acc-recent li:hover .acc-tete{box-shadow:0 0 0 2px var(--acc-main);transform:translateY(-2px)}
.acc-n .acc-tete img{width:84%;height:auto;margin-top:6%;image-rendering:pixelated}
.acc-n .acc-pseudo{max-width:100%;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 3 cartes du bas */
.acc-n .acc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.acc-n .acc-card{display:flex;align-items:center;gap:14px;min-height:92px;padding:14px 18px;background:var(--acc-box);border:2px solid var(--acc-border);border-radius:var(--r,6px);box-shadow:var(--acc-shad);color:var(--text);text-decoration:none;font-size:15px;line-height:1.45}
.acc-n a.acc-card{transition:transform .15s,border-color .15s}
.acc-n a.acc-card:hover{transform:translateY(-2px);border-color:var(--acc-main);color:var(--text)}
.acc-n .acc-ico{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--acc-band);box-shadow:0 0 0 2px var(--acc-main);font-size:28px;line-height:1}
.acc-n .acc-ico img{width:100%;height:100%;object-fit:cover}
.acc-n .acc-ctxt{min-width:0;overflow-wrap:anywhere}

/* Tablette et téléphone : tout en colonne, la connexion d'abord */
@media (max-width:820px){
  .acc-n .acc-wrap{padding-top:20px}
  .acc-n .acc-main{grid-template-columns:1fr;padding:14px}
  .acc-n .acc-slider{min-height:220px}
  .acc-n .acc-auth{order:-1}
  .acc-n .acc-cards{grid-template-columns:1fr}
  .acc-n .acc-cap b{font-size:24px}
  .acc-n .acc-arrow{opacity:1}
  /* Les derniers inscrits : 8 au plus, en rangées centrées (une rangée sur tablette, 2 de 4 sur téléphone) */
  .acc-n .acc-recent ul{display:flex;flex-wrap:wrap;justify-content:center}
  .acc-n .acc-recent li{width:78px}
  .acc-n .acc-recent li:nth-child(n+9){display:none}
}
@media (max-width:560px){
  .acc-n .acc-top{flex-wrap:wrap;gap:12px}
  .acc-n .acc-logo img{height:56px;max-width:220px}
  .acc-n .acc-social{margin-left:0}
  .acc-n .acc-cap{top:14px}
  .acc-n .acc-cap span{font-size:14px}
  .acc-n .acc-dots{left:18px;bottom:16px}
  .acc-n .acc-recent{padding:12px 12px 14px}
  .acc-n .acc-recent li{width:70px}
}
@media (prefers-reduced-motion:reduce){
  .acc-n .acc-slide,.acc-n .acc-slide.on{transition:none}
}