/* =========================================================================
   nicoow.fr — la porte d'entrée

   Deux univers cohabitent sur ce domaine et n'ont rien à voir : le streamer
   d'un côté, le serveur Minecraft de l'autre. Plutôt qu'une page qui en cache
   une autre, on pose le choix — chaque moitié porte l'identité de ce qu'elle
   ouvre, et affiche déjà quelque chose de vrai (le prochain live, les joueurs
   connectés) pour que le choix se fasse en connaissance de cause.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column;
  background: #16110E; color: #fff;
  font-family: 'Nunito', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.portes { flex: 1; display: flex; min-height: 0; }

/* ── une moitié ── */
.porte-cote {
  position: relative; overflow: hidden;
  /* base à 0 : sans ça les deux moitiés remplissent déjà tout et
     flex-grow n'a plus d'espace à répartir — le survol ne ferait rien. */
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
  text-decoration: none; color: inherit;
  isolation: isolate;
  transition: flex-grow .45s cubic-bezier(.22,.61,.36,1);
}

/* Au survol, la moitié visée prend de la place — un retour immédiat, sans
   qu'il faille cliquer pour comprendre ce qui va se passer. */
@media (hover: hover) and (min-width: 861px) {
  .portes:hover .porte-cote { flex-grow: .82; }
  .portes .porte-cote:hover { flex-grow: 1.36; }
}

.porte-fond { position: absolute; inset: 0; z-index: 0; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.porte-cote:hover .porte-fond { transform: scale(1.05); }

/* ── côté streamer : la charte crème et corail du site personnel ── */
.cote-twitch .porte-fond {
  background:
    radial-gradient(120% 90% at 20% 10%, #FFE3DC 0%, transparent 55%),
    radial-gradient(120% 90% at 85% 90%, #FFEFE2 0%, transparent 55%),
    #FFF6EE;
}
.cote-twitch { color: #4B3226; }
.cote-twitch .porte-sur { color: #F0705C; }
.cote-twitch .porte-sous { color: #6E5142; }
.cote-twitch .porte-aller { background: #F0705C; color: #fff; box-shadow: 0 4px 0 #D4523E; }
.cote-twitch:hover .porte-aller { box-shadow: 0 6px 0 #D4523E; transform: translateY(-2px); }
.cote-twitch .porte-etat { background: #fff; border-color: #F0D9C7; color: #6E5142; }
.cote-twitch .porte-dot { background: #9C8072; }
.cote-twitch .porte-etat.en-direct { border-color: #F3C3BE; background: #FFF3F1; color: #A81F15; }
.cote-twitch .porte-etat.en-direct .porte-dot { background: #D92D20; box-shadow: 0 0 0 4px rgba(217,45,32,.18); }

/* ── côté serveur : la charte du serveur, et sa capture si elle existe ── */
.cote-mc .porte-fond {
  background: radial-gradient(120% 100% at 50% 0%, #2A1810 0%, #140D09 70%);
  background-size: cover; background-position: center;
}
.cote-mc .porte-fond.a-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,10,8,.62), rgba(14,10,8,.86));
}
.cote-mc { color: #fff; }
.cote-mc .porte-titre { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.cote-mc .porte-sur { color: #FF8A4C; }
.cote-mc .porte-sous { color: rgba(255,255,255,.82); }
.cote-mc .porte-aller { background: #D83C00; color: #fff; box-shadow: 0 4px 0 #A82F00; }
.cote-mc:hover .porte-aller { box-shadow: 0 6px 0 #A82F00; transform: translateY(-2px); }
.cote-mc .porte-etat { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.9); }
.cote-mc .porte-dot { background: rgba(255,255,255,.6); }
.cote-mc .porte-etat.en-ligne { border-color: rgba(123,229,143,.4); background: rgba(52,211,153,.14); color: #9BF0BC; }
.cote-mc .porte-etat.en-ligne .porte-dot { background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,.2); }

/* ── côté ÉCHO : le jeu d'horreur, dans le faisceau d'une lampe ── */
.cote-echo .porte-fond {
  background: #080606 url(/assets/echo-fond.webp) center 42% / cover no-repeat;
}
.cote-echo .porte-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,6,6,.35) 0%, rgba(8,6,6,.55) 45%, rgba(8,6,6,.92) 100%);
}
.cote-echo { color: #EDE6DA; }
.cote-echo .porte-titre { font-family: 'Special Elite', 'Courier New', monospace; font-weight: 400; color: #D8231B; letter-spacing: .02em; font-size: clamp(2.4rem, 6vw, 3.6rem); }
.cote-echo .porte-sur { color: #B3AA9C; }
.cote-echo .porte-sous { color: rgba(237,230,218,.86); }
.cote-echo .porte-logo { border-color: rgba(237,230,218,.55); border-radius: 20px; background: #080606; }
.cote-echo .porte-aller { background: #B81D16; color: #fff; box-shadow: 0 4px 0 #7E120D; }
.cote-echo:hover .porte-aller { box-shadow: 0 6px 0 #7E120D; transform: translateY(-2px); }
.cote-echo .porte-etat { background: rgba(0,0,0,.45); border-color: rgba(237,230,218,.22); color: rgba(237,230,218,.9); }
.cote-echo .porte-dot { background: #D8231B; box-shadow: 0 0 0 4px rgba(216,35,27,.18); }

/* ── contenu commun ── */
.porte-corps {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; max-width: 24rem;
}
.porte-avatar, .porte-logo {
  width: 96px; height: 96px; border-radius: 24px; object-fit: cover;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  margin-bottom: .4rem;
}
.cote-mc .porte-logo { border-radius: 20px; }

.porte-sur {
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
}
.porte-titre {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.02em;
}
.porte-sous { font-size: .95rem; line-height: 1.5; text-wrap: pretty; }

.porte-etat {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .3rem; padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid transparent;
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.porte-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; transition: background .3s; }

.porte-aller {
  margin-top: 1rem; padding: .75rem 1.5rem; border-radius: 999px;
  font-size: 1rem; font-weight: 800;
  transition: transform .18s, box-shadow .18s;
}

/* ── pied ── */
.porte-pied {
  margin: 0; padding: .9rem 1rem;
  text-align: center; font-size: .8rem; color: rgba(255,255,255,.55);
  background: #16110E;
}
.porte-pied a { color: rgba(255,255,255,.8); text-decoration: none; }
.porte-pied a:hover { color: #fff; text-decoration: underline; }

/* ── focus clavier : la porte doit être franchissable sans souris ── */
.porte-cote:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* ── en étroit, les deux moitiés s'empilent ── */
@media (max-width: 860px) {
  .portes { flex-direction: column; }
  .porte-cote { flex: 1 1 0; padding: 2.2rem 1.25rem; }
  .porte-avatar, .porte-logo { width: 72px; height: 72px; }
  .porte-titre { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .porte-sous { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .porte-cote, .porte-fond, .porte-aller { transition: none; }
  .porte-cote:hover .porte-fond { transform: none; }
}